{snapshot.drafts.map((entry) => (
diff --git a/packages/client/src/client/remote-host-activity.ts b/packages/client/src/client/remote-host-activity.ts
new file mode 100644
index 0000000000..2894c8ea76
--- /dev/null
+++ b/packages/client/src/client/remote-host-activity.ts
@@ -0,0 +1,74 @@
+import type { RosterBot } from '../../../../apps/mobile/src/host/client.js';
+import type {
+ WireToolActivity,
+ WireSessionActivity,
+} from '../../../../apps/mobile/src/host/wire.js';
+import type {
+ PersonaBotSessionActivity,
+ PersonaBotToolActivity,
+} from '../../../core/src/state/tool-activity.js';
+
+export interface RemoteBotActivity {
+ state: RosterBot['state'];
+ activity?: PersonaBotToolActivity;
+ sessions?: readonly PersonaBotSessionActivity[];
+}
+
+export function createRemoteActivityProjection() {
+ const sessions = new WeakMap();
+ const received = new WeakMap();
+ const tool = (value: WireToolActivity, at: number): PersonaBotToolActivity => {
+ let activity = received.get(value);
+ if (activity === undefined) {
+ activity = { ...value, toolKind: 'other', startedAt: at };
+ received.set(value, activity);
+ }
+ return activity;
+ };
+ return (bots: readonly RosterBot[], at: number): ReadonlyMap =>
+ new Map(
+ bots.map((bot) => [
+ bot.slug,
+ {
+ state: bot.state,
+ ...(bot.activity === undefined
+ ? {}
+ : {
+ activity: {
+ ...tool(bot.activity, at),
+ ...(bot.sessions === undefined
+ ? {}
+ : {
+ sources: (['orchestrator', 'assignment', 'subagent'] as const).flatMap(
+ (role) => {
+ const count = bot.sessions!.filter(
+ (session) => session.role === role,
+ ).length;
+ return count > 0 ? [{ role, count }] : [];
+ },
+ ),
+ }),
+ },
+ }),
+ ...(bot.sessions === undefined
+ ? {}
+ : {
+ sessions: bot.sessions.map((session) => {
+ let projected = sessions.get(session);
+ if (projected === undefined) {
+ const { activity, ...identity } = session;
+ projected = {
+ ...identity,
+ revision: 0,
+ at,
+ ...(activity === undefined ? {} : { activity: tool(activity, at) }),
+ };
+ sessions.set(session, projected);
+ }
+ return projected;
+ }),
+ }),
+ },
+ ]),
+ );
+}
diff --git a/packages/client/src/client/remote-hosts.ts b/packages/client/src/client/remote-hosts.ts
index c39a677677..e00b083ecd 100644
--- a/packages/client/src/client/remote-hosts.ts
+++ b/packages/client/src/client/remote-hosts.ts
@@ -22,6 +22,7 @@ import {
type PairingRefusal,
} from '../../../../apps/mobile/src/host/pairing.js';
import { store } from './store.js';
+import { createRemoteActivityProjection, type RemoteBotActivity } from './remote-host-activity.js';
export const REMOTE_HOSTS_STORAGE_KEY = 'botharness.remoteHosts.v1';
export const HOST_TAB_STORAGE_KEY = 'botharness.hostTab.v1';
@@ -39,6 +40,7 @@ export interface RemoteHost {
host: SavedHost;
snapshot: HostSnapshot;
inbox: InboxSnapshot;
+ activity?: ReadonlyMap;
}
export interface RemoteHostsSnapshot {
@@ -61,6 +63,7 @@ export interface RemoteHosts {
open(target: RemoteConversationTarget): void;
close(): void;
conversation(target: RemoteConversationTarget): Conversation | undefined;
+ markRead(target: RemoteConversationTarget, messageId: string): Promise;
}
export interface HostStorage {
@@ -113,6 +116,7 @@ interface HostEntry {
release: () => void;
inbox: { feed: Inbox; release: () => void } | undefined;
retained: InboxSnapshot;
+ activity: ReadonlyMap;
}
const idleInbox: InboxSnapshot = { status: 'idle' };
@@ -175,10 +179,11 @@ export function createRemoteHosts(options: {
};
const publish = (): void => {
- const hosts = [...clients.values()].map(({ host, client, inbox, retained }) => ({
+ const hosts = [...clients.values()].map(({ host, client, inbox, retained, activity }) => ({
host,
snapshot: client.getSnapshot(),
inbox: inbox?.feed.getSnapshot() ?? retained,
+ activity,
}));
fetchAvatars(hosts);
const known = tab === ALL_HOSTS || tab === THIS_HOST || clients.has(tab);
@@ -216,12 +221,17 @@ export function createRemoteHosts(options: {
const attach = (host: SavedHost): void => {
const client = createHostClient({ routes: host.routes, credential: host.credential, carrier });
+ const projectActivity = createRemoteActivityProjection();
const entry: HostEntry = {
host,
client,
- release: client.subscribe(publish),
+ release: client.subscribe(() => {
+ entry.activity = projectActivity(client.getSnapshot().roster?.bots ?? [], Date.now());
+ publish();
+ }),
inbox: undefined,
retained: idleInbox,
+ activity: new Map(),
};
clients.set(host.hostId, entry);
if (listeners.size > 0) start(entry);
@@ -296,6 +306,17 @@ export function createRemoteHosts(options: {
open = undefined;
publish();
},
+ async markRead(target, messageId) {
+ const entry = clients.get(target.hostId);
+ if (entry === undefined) return;
+ const channelId =
+ target.channelId ??
+ entry.client.getSnapshot().roster?.bots.find((bot) => bot.slug === target.botSlug)
+ ?.dmChannelId;
+ if (channelId === undefined) throw new Error('The remote Channel is not ready.');
+ await entry.client.call('channelMarkRead', { channelId, messageId });
+ await entry.inbox?.feed.refresh();
+ },
conversation(target) {
const entry = clients.get(target.hostId);
if (entry === undefined) return undefined;
diff --git a/packages/client/src/client/unread-count.tsx b/packages/client/src/client/unread-count.tsx
new file mode 100644
index 0000000000..fa29e6ffd5
--- /dev/null
+++ b/packages/client/src/client/unread-count.tsx
@@ -0,0 +1,28 @@
+import type { ReactElement } from 'react';
+import type { BotHarnessTranslate } from './locale.js';
+
+export function unreadCountLabel(count: number): string {
+ return count > 99 ? '99+' : String(count);
+}
+
+export function UnreadCount({
+ count,
+ muted = false,
+ corner = false,
+ t,
+}: {
+ count: number;
+ muted?: boolean;
+ corner?: boolean;
+ t: BotHarnessTranslate;
+}): ReactElement | null {
+ if (count <= 0) return null;
+ return (
+
+ {unreadCountLabel(count)}
+
+ );
+}
diff --git a/packages/client/test/remote-conversation-read.test.ts b/packages/client/test/remote-conversation-read.test.ts
new file mode 100644
index 0000000000..94f2c6ce54
--- /dev/null
+++ b/packages/client/test/remote-conversation-read.test.ts
@@ -0,0 +1,116 @@
+import { createRequire } from 'node:module';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { ConversationSnapshot } from '../../../apps/mobile/src/host/conversation.js';
+import { observeRemoteRead } from '../src/client/remote-conversation-read.js';
+
+const {
+ JSDOM,
+}: {
+ JSDOM: new (
+ html: string,
+ options: { pretendToBeVisual: boolean },
+ ) => {
+ window: Window & typeof globalThis;
+ };
+} = createRequire(import.meta.url)('jsdom');
+
+afterEach(() => {
+ vi.useRealTimers();
+ vi.unstubAllGlobals();
+});
+
+describe('visible remote read acknowledgement', () => {
+ it('marks only live visible latest messages and cancels on scrolling, hiding, interruption and disposal', async () => {
+ vi.useFakeTimers();
+ const dom = new JSDOM('', { pretendToBeVisual: true });
+ const node = dom.window.document.querySelector('div')!;
+ let visible = true;
+ Object.defineProperty(node, 'getClientRects', { value: () => ({ length: visible ? 1 : 0 }) });
+ let resized = () => {};
+ const disconnect = vi.fn();
+ vi.stubGlobal(
+ 'ResizeObserver',
+ class {
+ constructor(callback: () => void) {
+ resized = callback;
+ }
+ observe() {}
+ disconnect = disconnect;
+ },
+ );
+ const listeners = new Set<() => void>();
+ let snapshot: ConversationSnapshot = {
+ status: 'live',
+ fromCache: false,
+ hasOlder: false,
+ loadingOlder: false,
+ drafts: [],
+ messages: [],
+ };
+ const publish = (id: string) => {
+ snapshot = {
+ ...snapshot,
+ messages: [
+ {
+ id,
+ at: '2026-10-21T00:00:00Z',
+ author: 'bot',
+ body: id,
+ delivery: 'committed',
+ attachments: [],
+ },
+ ],
+ };
+ listeners.forEach((listener) => listener());
+ };
+ const mark = vi.fn(async () => {});
+ const stop = observeRemoteRead(
+ node,
+ {
+ getSnapshot: () => snapshot,
+ subscribe(listener) {
+ listeners.add(listener);
+ return () => {
+ listeners.delete(listener);
+ };
+ },
+ },
+ mark,
+ );
+ publish('first');
+ await vi.advanceTimersByTimeAsync(250);
+ expect(mark).toHaveBeenCalledExactlyOnceWith('first');
+ publish('away');
+ node.scrollTop = -100;
+ node.dispatchEvent(new dom.window.Event('scroll'));
+ await vi.advanceTimersByTimeAsync(250);
+ expect(mark).toHaveBeenCalledTimes(1);
+ node.scrollTop = 0;
+ node.dispatchEvent(new dom.window.Event('scroll'));
+ visible = false;
+ resized();
+ await vi.advanceTimersByTimeAsync(250);
+ expect(mark).toHaveBeenCalledTimes(1);
+ visible = true;
+ resized();
+ await vi.advanceTimersByTimeAsync(250);
+ expect(mark).toHaveBeenLastCalledWith('away');
+ publish('interrupted');
+ snapshot = { ...snapshot, status: 'interrupted' };
+ resized();
+ await vi.advanceTimersByTimeAsync(250);
+ expect(mark).toHaveBeenCalledTimes(2);
+ snapshot = { ...snapshot, status: 'live', fromCache: true };
+ publish('cache');
+ await vi.advanceTimersByTimeAsync(250);
+ expect(mark).toHaveBeenCalledTimes(2);
+ snapshot = { ...snapshot, fromCache: false };
+ publish('unmounted');
+ stop();
+ await vi.advanceTimersByTimeAsync(250);
+ expect(mark).toHaveBeenCalledTimes(2);
+ expect(listeners.size).toBe(0);
+ expect(disconnect).toHaveBeenCalledOnce();
+ dom.window.close();
+ });
+});
diff --git a/packages/client/test/remote-host-activity.test.ts b/packages/client/test/remote-host-activity.test.ts
new file mode 100644
index 0000000000..7d9e7906cb
--- /dev/null
+++ b/packages/client/test/remote-host-activity.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import type { RosterBot } from '../../../apps/mobile/src/host/client.js';
+import { createRemoteActivityProjection } from '../src/client/remote-host-activity.js';
+
+describe('remote activity presentation', () => {
+ it('keeps received tool and session times stable across unrelated Host updates', () => {
+ const project = createRemoteActivityProjection();
+ const bot: RosterBot = {
+ slug: 'ada',
+ displayName: 'Ada',
+ roles: [],
+ computerAccess: false,
+ browserAccess: false,
+ paused: false,
+ state: 'working',
+ activity: { effect: 'executing', toolName: 'bash', activeToolCount: 2 },
+ sessions: [
+ {
+ id: 'assignment',
+ role: 'assignment',
+ state: 'working',
+ activity: { effect: 'coding', activeToolCount: 1 },
+ },
+ ],
+ };
+ const first = project([bot], 100).get('ada')!;
+ expect(first.activity).toMatchObject({
+ toolKind: 'other',
+ startedAt: 100,
+ effect: 'executing',
+ activeToolCount: 2,
+ sources: [{ role: 'assignment', count: 1 }],
+ });
+ expect(first.sessions?.[0]).toMatchObject({
+ id: 'assignment',
+ at: 100,
+ activity: { toolKind: 'other', startedAt: 100 },
+ });
+ const republished = project([{ ...bot, preview: 'new preview' }], 200).get('ada')!;
+ expect(republished.activity?.startedAt).toBe(100);
+ expect(republished.sessions?.[0]).toBe(first.sessions?.[0]);
+ const changed = project(
+ [{ ...bot, activity: { effect: 'searching', activeToolCount: 1 } }],
+ 300,
+ );
+ expect(changed.get('ada')?.activity).toMatchObject({ effect: 'searching', startedAt: 300 });
+ const { activity: _activity, sessions: _sessions, ...idle } = bot;
+ expect(project([{ ...idle, state: 'idle' }], 400).get('ada')).toEqual({ state: 'idle' });
+ expect(project([], 500).size).toBe(0);
+ });
+});
diff --git a/packages/client/test/remote-host-rows.test.tsx b/packages/client/test/remote-host-rows.test.tsx
new file mode 100644
index 0000000000..42bf7fbb4d
--- /dev/null
+++ b/packages/client/test/remote-host-rows.test.tsx
@@ -0,0 +1,156 @@
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+import type { RemoteHost } from '../src/client/remote-hosts.js';
+
+vi.mock('@deepseek-ai/dsh-client-ui-primitives', () => ({
+ Button: () => null,
+ Modal: () => null,
+ Input: () => null,
+ Textarea: () => null,
+ Tooltip: ({ children }: { children?: import('react').ReactNode }) => children,
+}));
+
+const fixture = vi.hoisted(() => ({
+ hosts: [] as RemoteHost[],
+ avatars: new Map(),
+}));
+vi.mock('../src/client/remote-hosts.js', async (original) => ({
+ ...(await original()),
+ remoteHosts: () => ({
+ getSnapshot: () => ({ hosts: fixture.hosts, avatars: fixture.avatars, tab: 'all' }),
+ subscribe: () => () => {},
+ }),
+}));
+
+import { RemoteHostRows } from '../src/client/host-tabs.js';
+import { zhTranslate } from '../src/client/locale.js';
+import { bindTobPresentation } from '../src/client/tob-presentation.js';
+
+const remote: RemoteHost = {
+ host: {
+ hostId: 'studio',
+ hostName: 'Studio',
+ routes: [],
+ deviceId: 'browser',
+ credential: 'test',
+ },
+ snapshot: {
+ connection: { status: 'stopped', route: '' },
+ roster: {
+ bots: [
+ {
+ slug: 'tob',
+ displayName: 'Ada',
+ roles: [],
+ state: 'working',
+ computerAccess: false,
+ browserAccess: false,
+ paused: false,
+ dmChannelId: 'private-ada',
+ avatarUrl: 'https://studio.example/avatar/tob',
+ preview: 'Studio preview',
+ },
+ ],
+ channels: [{ id: 'group', name: 'Team', members: ['tob'], memberCount: 1 }],
+ },
+ },
+ inbox: {
+ status: 'ready',
+ sections: { action: [], replies: [], unread: [], handled: [] },
+ unread: { 'private-ada': 2, group: 3 },
+ },
+ activity: new Map([
+ [
+ 'tob',
+ {
+ state: 'working',
+ activity: { effect: 'coding', toolKind: 'other', startedAt: 100, activeToolCount: 1 },
+ },
+ ],
+ ]),
+};
+
+describe('remote Host rows', () => {
+ it('uses the DM channel id and group id for unread badges and the Host activity for the avatar', () => {
+ fixture.hosts = [remote];
+ fixture.avatars = new Map([['https://studio.example/avatar/tob', 'blob:studio-tob']]);
+ const html = renderToStaticMarkup(
+ createElement(RemoteHostRows, { remote, query: '', showSource: true, t: zhTranslate }),
+ );
+ expect(html).toContain('data-state="working"');
+ expect(html).toContain('data-effect="coding"');
+ expect(html).toContain('2 条未读');
+ expect(html).toContain('3 条未读');
+ expect(html.match(/bh-unread-corner/g)).toHaveLength(2);
+ expect(html).toContain('bh-group-avatar-stack');
+ expect(html.match(/src="blob:studio-tob"/g)).toHaveLength(2);
+ expect(html).toContain('Studio preview');
+ expect(html).toContain('data-remote-host-mark="studio"');
+ });
+
+ it('keeps each Host portrait, activity and unread together for equal Bot slugs without local lookup', () => {
+ const other: RemoteHost = {
+ ...remote,
+ host: { ...remote.host, hostId: 'lab', hostName: 'Lab' },
+ snapshot: {
+ ...remote.snapshot,
+ roster: {
+ bots: [
+ {
+ ...remote.snapshot.roster!.bots[0]!,
+ state: 'idle',
+ avatarUrl: 'https://lab.example/avatar/tob',
+ preview: 'Lab preview',
+ },
+ ],
+ channels: [],
+ },
+ },
+ inbox: {
+ status: 'ready',
+ sections: { action: [], replies: [], unread: [], handled: [] },
+ unread: { 'private-ada': 7 },
+ },
+ activity: new Map([['tob', { state: 'idle' }]]),
+ };
+ fixture.hosts = [remote, other];
+ fixture.avatars = new Map([
+ ['https://studio.example/avatar/tob', 'blob:studio-tob'],
+ ['https://lab.example/avatar/tob', 'blob:lab-tob'],
+ ]);
+ const local = vi.fn(() => undefined);
+ const release = bindTobPresentation({
+ bot: local,
+ icon: () => 'bot',
+ subscribe: () => () => {},
+ });
+ try {
+ const render = (host: RemoteHost) =>
+ renderToStaticMarkup(
+ createElement(RemoteHostRows, {
+ remote: host,
+ query: '',
+ showSource: true,
+ t: zhTranslate,
+ }),
+ );
+ const studio = render(remote);
+ const lab = render(other);
+ expect(studio).toContain('src="blob:studio-tob"');
+ expect(studio).not.toContain('blob:lab-tob');
+ expect(studio).toContain('data-effect="coding"');
+ expect(studio).toContain('2 条未读');
+ expect(lab).toContain('src="blob:lab-tob"');
+ expect(lab).not.toContain('blob:studio-tob');
+ expect(lab).toContain('data-state="idle"');
+ expect(lab).not.toContain('data-effect="coding"');
+ expect(lab).toContain('7 条未读');
+ expect(lab).toContain('Lab preview');
+ expect(lab).toContain('data-remote-host-mark="lab"');
+ expect(local).not.toHaveBeenCalled();
+ } finally {
+ release();
+ }
+ });
+});
diff --git a/packages/client/test/remote-hosts.test.ts b/packages/client/test/remote-hosts.test.ts
index 46f8d88ec6..1a4d079d80 100644
--- a/packages/client/test/remote-hosts.test.ts
+++ b/packages/client/test/remote-hosts.test.ts
@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, assert, describe, expect, it, vi } from 'vitest';
import type { HostCarrier } from '../../../apps/mobile/src/host/carrier.js';
import { FakeHost } from '../../../apps/mobile/test/fake-host.js';
@@ -194,6 +194,46 @@ function liveHost() {
}
describe('Host Feed lifecycle', () => {
+ it('marks the remote DM channel read through its own credential and refreshes its Inbox', async () => {
+ const { host, storage } = liveHost();
+ host.methods.set('channels', () => ({
+ channels: [{ id: 'dm-ada', type: 'dm', botSlug: 'ada', name: 'Ada', members: ['ada'] }],
+ }));
+ host.methods.set('channelMarkRead', () => {
+ host.methods.set('channelUnreadCounts', () => ({ channels: [] }));
+ return { accepted: true };
+ });
+ const sources = createRemoteHosts({ carrier: host.carrier, storage });
+ releases.push(sources.subscribe(() => {}));
+ await vi.waitFor(() =>
+ expect(sources.getSnapshot().hosts[0]?.inbox).toMatchObject({
+ status: 'ready',
+ unread: { 'dm-ada': 2 },
+ }),
+ );
+ await sources.markRead({ hostId: host.hostId, title: 'Ada', botSlug: 'ada' }, 'message-2');
+ expect(host.calls.filter(({ method }) => method === 'channelMarkRead')).toEqual([
+ { method: 'channelMarkRead', args: { channelId: 'dm-ada', messageId: 'message-2' } },
+ ]);
+ const inbox = sources.getSnapshot().hosts[0]?.inbox;
+ assert(inbox?.status === 'ready');
+ expect(inbox.unread).toEqual({});
+ await sources.markRead({ hostId: 'another-host', title: 'Ada', botSlug: 'ada' }, 'message-2');
+ expect(host.calls.filter(({ method }) => method === 'channelMarkRead')).toHaveLength(1);
+ });
+
+ it('keeps canonical unread counts when the owning Host refuses a read update', async () => {
+ const { host, storage } = liveHost();
+ const sources = createRemoteHosts({ carrier: host.carrier, storage });
+ releases.push(sources.subscribe(() => {}));
+ await vi.waitFor(() => expect(sources.getSnapshot().hosts[0]?.inbox.status).toBe('ready'));
+ host.failing.add('channelMarkRead');
+ await expect(
+ sources.markRead({ hostId: host.hostId, title: 'Group', channelId: 'group' }, 'message-2'),
+ ).rejects.toThrow();
+ expect(sources.getSnapshot().hosts[0]?.inbox).toMatchObject({ unread: { 'dm-ada': 2 } });
+ });
+
it('retains legacy pairings when browser storage refuses the migration write', () => {
const { host, saved } = liveHost();
const storage = memoryStorage({