@khorsheed/dsh-room 0.2.2 → 0.2.3

package/lib/types/client/RoomStatsLine.js

@@ -10,11 +10,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * degrade). Unlike the official row there is no window-fold fallback — the
  * takeover has no business re-deriving what the host already projects.
  *
- * Semantics: the figures are the ROOM SESSION's own — its main agent's
- * turns and billing. CLI members consume in their own child sessions, so
- * this row is never a whole-room aggregate.
+ * Semantics: the projected figures are the ROOM SESSION's own — its main
+ * agent's turns and billing. Members consume in their own child sessions, so
+ * when the room has member runs the row adds a members chip (how many
+ * members worked, their billed tokens) whose breakdown lists each member's
+ * model, rounds, tokens and run time from the room's execution records.
  */
-import { Fragment, memo, useLayoutEffect, useRef, useState } from 'react';
+import { Fragment, memo, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
 import css from './RoomStatsLine.module.css';
 /**
@@ -75,7 +77,47 @@ export function cacheHitPercent(usage) {
         ? null
         : Math.round(usage.cacheReadTokens / denominator * 100);
 }
-export const RoomStatsLine = memo(function RoomStatsLine({ useProjection, t }) {
+/**
+ * Per-member usage from the room's execution records: every run but the
+ * main agent's (its turns are the projected figures already), in roster
+ * order. Members without a run do not appear.
+ * @param state - the replayed room state.
+ * @returns one row per member that ran.
+ */
+export function memberUsage(state) {
+    if (state === undefined)
+        return [];
+    const main = new Set(state.members.filter(member => member.kind === 'main-agent').map(member => member.name));
+    const rows = new Map();
+    for (const run of state.executions ?? []) {
+        if (main.has(run.member))
+            continue;
+        const row = rows.get(run.member) ?? { member: run.member, rounds: 0, tokens: 0, elapsedMs: 0 };
+        row.rounds += 1;
+        row.tokens += run.tokens ?? 0;
+        row.elapsedMs += run.elapsedMs ?? 0;
+        if (run.model !== undefined)
+            row.model = run.model;
+        rows.set(run.member, row);
+    }
+    const order = state.members.map(member => member.name);
+    return [...rows.values()].sort((a, b) => order.indexOf(a.member) - order.indexOf(b.member));
+}
+export const RoomStatsLine = memo(function RoomStatsLine({ useProjection, state, t }) {
+    const members = memberUsage(state);
+    const [open, setOpen] = useState(false);
+    const membersRef = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const close = (event) => {
+            if (event instanceof KeyboardEvent ? event.key === 'Escape' : membersRef.current?.contains(event.target) !== true)
+                setOpen(false);
+        };
+        document.addEventListener('pointerdown', close);
+        document.addEventListener('keydown', close);
+        return () => { document.removeEventListener('pointerdown', close); document.removeEventListener('keydown', close); };
+    }, [open]);
     const stats = useProjection('sessionStats');
     const usage = useProjection('tokenUsage');
     // Pipe-separated groups, mirroring the official assembly; a group with no
@@ -132,7 +174,11 @@ export const RoomStatsLine = memo(function RoomStatsLine({ useProjection, t }) {
         observer.observe(el);
         return () => { observer.disconnect(); };
     }, [line]);
-    if (groups.length === 0)
+    if (groups.length === 0 && members.length === 0)
         return null;
-    return (_jsx(Tooltip, { label: line, side: "top", delayMs: 500, disabled: !truncated, children: _jsx("div", { ref: rootRef, className: css.root, children: groups.map((group, i) => (_jsxs(Fragment, { children: [i > 0 && _jsxs(_Fragment, { children: [_jsx("span", { className: css.sep, "aria-hidden": true, children: "|" }), ' '] }), _jsx("span", { children: group })] }, group))) }) }));
+    const own = groups.length === 0 ? null : (_jsx(Tooltip, { label: line, side: "top", delayMs: 500, disabled: !truncated, children: _jsx("div", { ref: rootRef, className: css.root, children: groups.map((group, i) => (_jsxs(Fragment, { children: [i > 0 && _jsxs(_Fragment, { children: [_jsx("span", { className: css.sep, "aria-hidden": true, children: "|" }), ' '] }), _jsx("span", { children: group })] }, group))) }) }));
+    if (members.length === 0)
+        return own;
+    const total = members.reduce((sum, row) => sum + row.tokens, 0);
+    return (_jsxs("div", { className: css.withMembers, ref: membersRef, children: [own, own !== null && _jsx("span", { className: css.sep, "aria-hidden": true, children: "|" }), _jsxs("button", { type: "button", className: css.membersChip, "aria-expanded": open, onClick: () => { setOpen(value => !value); }, children: [total > 0 ? t('stats.members', { count: members.length, tokens: formatTokens(total) }) : t('stats.membersNoTokens', { count: members.length }), " \u25BE"] }), open && (_jsx("div", { className: css.breakdown, role: "dialog", "aria-label": t('stats.membersTitle'), children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t('stats.col.member') }), _jsx("th", { children: t('stats.col.model') }), _jsx("th", { className: css.num, children: t('stats.col.rounds') }), _jsx("th", { className: css.num, children: t('stats.col.tokens') }), _jsx("th", { className: css.num, children: t('stats.col.time') })] }) }), _jsx("tbody", { children: members.map(row => (_jsxs("tr", { children: [_jsx("td", { className: css.name, children: row.member }), _jsx("td", { children: row.model ?? '—' }), _jsx("td", { className: css.num, children: row.rounds }), _jsx("td", { className: css.num, children: row.tokens > 0 ? formatTokens(row.tokens) : '—' }), _jsx("td", { className: css.num, children: row.elapsedMs > 0 ? formatDuration(row.elapsedMs) : '—' })] }, row.member))) })] }) }))] }));
 });

package/lib/types/client/RoomTaskCapsule.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The task capsule above the room composer: 「● N 个任务进行中」 plus, when
+ * something waits on the human (an uncertain outcome, a held message), an
+ * amber 「⚠ N 件需要处理」. Both open the task page in the right sidebar
+ * (the second straight at the first task that needs the human). A fresh
+ * room — no task, no goal — shows a single 「＋ 邀请成员」 capsule instead.
+ * Without the sidebar the capsule cannot open anything, so uncertain
+ * outcomes fall back to the inline reconcile view.
+ */
+import { type ReactNode } from 'react';
+import type { RoomState } from '../types.ts';
+import type { RoomComposerProps } from './slots.ts';
+type Props = Pick<RoomComposerProps, 'openTasks' | 'reconcileDelivery' | 'openPlanSession' | 'invite' | 'listProviders' | 'roomCwd' | 'browseDirectory' | 'modelSurface' | 'renderHarnessModelPicker' | 't'> & {
+    readonly state: RoomState;
+};
+/** The capsule row. */
+export declare function RoomTaskCapsule({ state, openTasks, reconcileDelivery, openPlanSession, invite, listProviders, roomCwd, browseDirectory, modelSurface, renderHarnessModelPicker, t, }: Props): ReactNode;
+export {};
+//# sourceMappingURL=RoomTaskCapsule.d.ts.map

package/lib/types/client/RoomTaskCapsule.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The task capsule above the room composer: 「● N 个任务进行中」 plus, when
+ * something waits on the human (an uncertain outcome, a held message), an
+ * amber 「⚠ N 件需要处理」. Both open the task page in the right sidebar
+ * (the second straight at the first task that needs the human). A fresh
+ * room — no task, no goal — shows a single 「＋ 邀请成员」 capsule instead.
+ * Without the sidebar the capsule cannot open anything, so uncertain
+ * outcomes fall back to the inline reconcile view.
+ */
+import { useState } from 'react';
+import { InviteDialog, inviteRequest } from './InviteDialog.js';
+import { RoomRecoveryView } from './RoomRecoveryView.js';
+import { attentionCount, needsAttention } from './tasks.js';
+import css from './RoomTaskCapsule.module.css';
+/** The capsule row. */
+export function RoomTaskCapsule({ state, openTasks, reconcileDelivery, openPlanSession, invite, listProviders, roomCwd, browseDirectory, modelSurface, renderHarnessModelPicker, t, }) {
+    const [inviteOpen, setInviteOpen] = useState(false);
+    const [providers, setProviders] = useState(undefined);
+    const jobs = state.jobs ?? [];
+    if (jobs.length === 0 && state.goal === undefined && state.plan === undefined) {
+        const submitInvite = (values) => invite(inviteRequest(values));
+        return _jsxs("div", { className: css.root, children: [_jsx("div", { className: css.capsules, children: _jsx("button", { type: "button", className: css.capsule, onClick: () => {
+                            setProviders(undefined);
+                            setInviteOpen(true);
+                            void listProviders().then(setProviders);
+                        }, children: _jsx("span", { className: css.guide, children: t('members.invite') }) }) }), inviteOpen && _jsx(InviteDialog, { mode: "invite", providers: providers?.providers, presets: providers?.presets, sessionPreset: providers?.sessionPreset, localAgentAvailable: providers?.localAgentAvailable ?? true, inheritedCwd: roomCwd, existingNames: state.members.map(entry => entry.name), browseDirectory: browseDirectory, modelSurface: modelSurface, renderHarnessModelPicker: renderHarnessModelPicker, onSubmit: submitInvite, onClose: () => { setInviteOpen(false); }, t: t })] });
+    }
+    if (openTasks === undefined) {
+        return reconcileDelivery === undefined ? null
+            : _jsx(RoomRecoveryView, { deliveries: state.deliveries ?? [], members: state.members, reconcile: reconcileDelivery, openSession: openPlanSession, t: t });
+    }
+    const running = jobs.filter(job => job.status === 'running').length;
+    const attention = attentionCount(state);
+    const firstAttention = jobs.find(job => needsAttention(state, job));
+    return _jsx("div", { className: css.root, children: _jsxs("div", { className: css.capsules, children: [_jsxs("button", { type: "button", className: css.capsule, "data-testid": "room-task-capsule", ...running > 0 ? { 'data-running': '' } : {}, onClick: () => { openTasks(); }, children: [running > 0 && _jsx("span", { className: css.dot, "aria-hidden": true }), running > 0 ? t('job.capsule.running', { count: running }) : t('job.capsule.idle', { count: jobs.length })] }), attention > 0 && _jsx("button", { type: "button", className: css.capsule, "data-attention": "", onClick: () => { openTasks(firstAttention?.id); }, children: t('job.capsule.attention', { count: attention }) })] }) });
+}

package/lib/types/client/TasksTab.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The room's collaboration page as one right-sidebar page (kind
+ * `room-tasks`): a 任务 / 团队 switch over the task page and the team view,
+ * so the two never open as separate sidebar tabs. Opened from the composer's
+ * task capsule (`view` tasks, an optional `task` param opens that task) and
+ * from the members tab's 团队 button (`view` team, an optional `member` param
+ * reveals that member); every navigation (revision bump) applies again.
+ * 「追问」 / 「＋ 新任务」 tag the main composer and, on a narrow window where
+ * the sidebar covers the conversation, close this page so the composer is in
+ * reach.
+ */
+import { type ReactNode } from 'react';
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots';
+import type { RoomStore } from './room-store.ts';
+import type { RoomTaskTags } from './task-tag.ts';
+import { type TasksViewActions } from './TasksView.tsx';
+export declare const ROOM_TASKS_KIND = "room-tasks";
+export declare const ROOM_TASKS_TAB_ID = "@khorsheed/dsh-room/tasks";
+declare module '@deepseek-ai/dsh-client-ui-sidebar-right/client' {
+    interface SidebarRightTabParamsMap {
+        'room-tasks': {
+            readonly view?: 'tasks' | 'team';
+            readonly task?: string;
+            readonly member?: string;
+        };
+    }
+}
+/** What the task page needs injected. */
+export interface RoomTasksInjected extends Omit<TasksViewActions, 'compose'> {
+    readonly roomStore: RoomStore;
+    readonly taskTags: RoomTaskTags;
+    /** Keep an outside session on the member list (the team view's 加入房间成员). */
+    readonly linkSession?: ((target: string, title: string) => void) | undefined;
+    /** Take it off the list. */
+    readonly unlinkSession?: ((target: string) => void) | undefined;
+}
+type Props = PropsRuntime<'sidebar.right.pane.tab'> & InjectFace<RoomTasksInjected> & PropsLocale<'room'>;
+/** The sidebar page body. */
+export declare function RoomTasksTab({ sessionId, roomStore, taskTags, useTabInfo, linkSession, unlinkSession, t, ...actions }: Props): ReactNode;
+export {};
+//# sourceMappingURL=TasksTab.d.ts.map

package/lib/types/client/TasksTab.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The room's collaboration page as one right-sidebar page (kind
+ * `room-tasks`): a 任务 / 团队 switch over the task page and the team view,
+ * so the two never open as separate sidebar tabs. Opened from the composer's
+ * task capsule (`view` tasks, an optional `task` param opens that task) and
+ * from the members tab's 团队 button (`view` team, an optional `member` param
+ * reveals that member); every navigation (revision bump) applies again.
+ * 「追问」 / 「＋ 新任务」 tag the main composer and, on a narrow window where
+ * the sidebar covers the conversation, close this page so the composer is in
+ * reach.
+ */
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { TasksView } from './TasksView.js';
+import { TeamView } from './TeamView.js';
+import css from './TasksTab.module.css';
+export const ROOM_TASKS_KIND = 'room-tasks';
+export const ROOM_TASKS_TAB_ID = '@khorsheed/dsh-room/tasks';
+/** Below this window width the sidebar covers the conversation. */
+const NARROW = '(max-width: 720px)';
+/** The sidebar page body. */
+export function RoomTasksTab({ sessionId, roomStore, taskTags, useTabInfo, linkSession, unlinkSession, t, ...actions }) {
+    const state = useSyncExternalStore(roomStore.subscribe, () => roomStore.getCached(sessionId));
+    useEffect(() => { void roomStore.refresh(sessionId); }, [roomStore, sessionId]);
+    const { tab } = useTabInfo();
+    const params = tab.navigation.params;
+    const task = typeof params?.task === 'string' ? params.task : undefined;
+    const member = typeof params?.member === 'string' ? params.member : undefined;
+    const asked = params?.view === 'team' ? 'team' : 'tasks';
+    // The switch is the human's between navigations; a navigation sets it again.
+    const [view, setView] = useState(asked);
+    useEffect(() => { setView(asked); }, [asked, tab.navigation.revision]);
+    if (state === undefined)
+        return null;
+    const compose = (tag) => {
+        taskTags.set(sessionId, tag);
+        if (typeof window !== 'undefined' && window.matchMedia?.(NARROW).matches === true)
+            tab.actions.close();
+    };
+    return (_jsxs("div", { className: css.page, children: [_jsx("div", { className: css.switch, role: "tablist", "aria-label": t('collab.title'), children: ['tasks', 'team'].map(entry => (_jsx("button", { type: "button", role: "tab", className: css.switchTab, "aria-selected": view === entry, onClick: () => { setView(entry); }, children: t(entry === 'tasks' ? 'job.title' : 'team.title') }, entry))) }), _jsx("div", { className: css.body, role: "tabpanel", children: view === 'tasks'
+                    ? _jsx(TasksView, { state: state, focus: task === undefined ? undefined : { task, revision: tab.navigation.revision }, compose: compose, ...actions, t: t })
+                    : _jsx(TeamView, { state: state, focus: member === undefined ? undefined : { member, revision: tab.navigation.revision }, openSession: (id) => { actions.openSession?.(id); }, linkSession: linkSession, unlinkSession: unlinkSession, t: t }) })] }));
+}

package/lib/types/client/TasksView.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The task page (right sidebar): every task in the room — one human request
+ * and the subtask tree it set in motion — with filters, and a detail view
+ * per task: what the human said (and how follow-ups were filed), stop the
+ * whole task, follow up through the main composer's tag, what needs the
+ * human (uncertain outcomes, held messages), the formal goal it belongs to,
+ * the subtask tree, and a member swimlane timeline. The room goal sits on
+ * top of the list. The page has no input of its own: 「追问」 and
+ * 「＋ 新任务」 tag the main composer.
+ */
+import { type ReactNode } from 'react';
+import type { RoomState } from '../types.ts';
+import type { RoomComposerProps, RoomMutationOutcome } from './slots.ts';
+type T = RoomComposerProps['t'];
+/** What the task page can do. */
+export interface TasksViewActions {
+    readonly setGoal?: ((text: string) => Promise<RoomMutationOutcome>) | undefined;
+    readonly stopJob?: ((task: string) => Promise<RoomMutationOutcome>) | undefined;
+    /** Stop a member's running round (only the one with that run id, when given). */
+    readonly stopDelivery?: ((member: string, deliveryId?: string) => void) | undefined;
+    readonly reconcile?: RoomComposerProps['reconcileDelivery'];
+    readonly confirmRelay?: ((relayId: string) => Promise<void>) | undefined;
+    readonly dismissRelay?: ((relayId: string) => Promise<void>) | undefined;
+    readonly planCommand?: ((command: string) => Promise<RoomMutationOutcome>) | undefined;
+    readonly openSession?: ((sessionId: string) => void) | undefined;
+    /** Tag the main composer (「任务 N」 or 「新任务」) and hand it focus. */
+    readonly compose?: ((tag: {
+        readonly task: string;
+        readonly label: string;
+    }) => void) | undefined;
+}
+export interface TasksViewProps extends TasksViewActions {
+    readonly state: RoomState;
+    /** Open this task (a navigation param); each revision re-opens. */
+    readonly focus?: {
+        readonly task: string;
+        readonly revision: number;
+    } | undefined;
+    readonly t: T;
+}
+/** The task page body. */
+export declare function TasksView({ state, focus, t, ...actions }: TasksViewProps): ReactNode;
+export {};
+//# sourceMappingURL=TasksView.d.ts.map

package/lib/types/client/TasksView.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The task page (right sidebar): every task in the room — one human request
+ * and the subtask tree it set in motion — with filters, and a detail view
+ * per task: what the human said (and how follow-ups were filed), stop the
+ * whole task, follow up through the main composer's tag, what needs the
+ * human (uncertain outcomes, held messages), the formal goal it belongs to,
+ * the subtask tree, and a member swimlane timeline. The room goal sits on
+ * top of the list. The page has no input of its own: 「追问」 and
+ * 「＋ 新任务」 tag the main composer.
+ */
+import { useEffect, useState } from 'react';
+import { executionRows } from './executions.js';
+import { formatClock, formatDurationMs } from './format.js';
+import { memberColor } from './member-color.js';
+import { RoomPlanView } from './RoomPlanView.js';
+import { RoomRecoveryView } from './RoomRecoveryView.js';
+import { TASK_FILTERS, filterJobs, isOpenDelivery, jobDeliveries, jobElapsed, needsAttention, pendingRelays, runningMembers, segmentsOf, subtaskTree, } from './tasks.js';
+import { IconChevronLeftOutlineMedium } from './icons.js';
+import css from './TasksView.module.css';
+const memberOf = (state, id) => state.members.find(member => member.id === id) ?? state.members.find(member => member.name === id);
+function Avatars({ state, ids }) {
+    return _jsx("span", { className: css.avatars, children: ids.map(id => {
+            const name = memberOf(state, id)?.name ?? id;
+            return _jsx("span", { className: css.avatar, style: { '--member-color': memberColor(name) }, title: name, children: name.slice(0, 1).toUpperCase() }, id);
+        }) });
+}
+/** The task's time split into queue / held / exec, across all its deliveries. */
+function Bar({ rows, from, to, now }) {
+    const span = Math.max(1, to - from);
+    return _jsx("span", { className: css.bar, "aria-hidden": true, children: rows.flatMap(row => segmentsOf(row, now)).map((segment, index) => _jsx("span", { className: css.seg, "data-kind": segment.kind, style: { left: `${(segment.from - from) / span * 100}%`, width: `${Math.max(0.6, (segment.to - segment.from) / span * 100)}%` } }, index)) });
+}
+function useNow(live) {
+    const [now, setNow] = useState(Date.now);
+    useEffect(() => {
+        if (!live)
+            return;
+        setNow(Date.now());
+        const timer = setInterval(() => { setNow(Date.now()); }, 1000);
+        return () => { clearInterval(timer); };
+    }, [live]);
+    return now;
+}
+/** The room goal, editable in place. */
+function Goal({ goal, setGoal, t }) {
+    const [draft, setDraft] = useState(null);
+    const [error, setError] = useState(null);
+    const save = async () => {
+        if (draft === null || setGoal === undefined)
+            return;
+        const outcome = await setGoal(draft.trim());
+        if (outcome.ok)
+            setDraft(null);
+        else
+            setError(outcome.message);
+    };
+    if (draft !== null) {
+        return _jsxs("div", { className: css.goal, children: [_jsx("input", { className: css.goalInput, value: draft, placeholder: t('goal.placeholder'), autoFocus: true, "aria-label": t('job.goal'), onChange: event => { setDraft(event.target.value); }, onKeyDown: event => { if (event.key === 'Enter')
+                        void save();
+                    else if (event.key === 'Escape')
+                        setDraft(null); } }), _jsx("button", { type: "button", className: css.link, onClick: () => { void save(); }, children: t('goal.save') }), _jsx("button", { type: "button", className: css.link, onClick: () => { setDraft(null); }, children: t('goal.cancel') }), error !== null && _jsx("span", { role: "alert", className: css.error, children: error })] });
+    }
+    return _jsxs("div", { className: css.goal, children: [_jsx("span", { className: css.goalKey, children: t('job.goal') }), _jsx("span", { className: goal === undefined ? css.muted : css.goalText, children: goal ?? t('job.goalNone') }), setGoal !== undefined && _jsx("button", { type: "button", className: css.link, onClick: () => { setDraft(goal ?? ''); setError(null); }, children: goal === undefined ? t('goal.set') : t('goal.edit') })] });
+}
+function statusOf(state, job) {
+    return needsAttention(state, job) ? 'attention' : job.status;
+}
+/** The one-line summary under a row's title: who it is waiting on, or what needs the human. */
+function waitingLine(state, job, t) {
+    if (needsAttention(state, job))
+        return t('job.need');
+    const running = runningMembers(state, job).map(id => memberOf(state, id)?.name ?? id);
+    return running.length === 0 ? undefined : t('job.waiting', { member: running.join('、') });
+}
+function JobRow({ state, job, now, open, t }) {
+    const status = statusOf(state, job);
+    const waiting = waitingLine(state, job, t);
+    return _jsxs("button", { type: "button", className: css.row, "data-task": job.id, onClick: open, children: [_jsxs("span", { className: css.rowHead, children: [_jsx("span", { className: css.dot, "data-status": status, "aria-hidden": true }), _jsx("span", { className: css.rowTitle, title: job.title, children: job.title }), _jsx("span", { className: css.elapsed, children: formatDurationMs(jobElapsed(job, now)) })] }), _jsxs("span", { className: css.rowMeta, children: [_jsx(Avatars, { state: state, ids: job.members }), _jsx("span", { className: css.tag, "data-status": status, children: t(`job.status.${status}`) }), waiting !== undefined && _jsx("span", { className: status === 'attention' ? css.need : css.now, children: waiting }), job.goalId !== undefined && job.goalId === state.plan?.id && _jsx("span", { className: css.tag, "data-status": "goal", children: t('job.goalTag', { objective: state.plan.objective }) })] }), _jsx(Bar, { rows: jobDeliveries(state, job), from: job.startedAt, to: job.endedAt ?? now, now: now })] });
+}
+function SubtaskTree({ state, nodes, now, actions, t }) {
+    const executions = new Map(executionRows(state).map(row => [row.id, row]));
+    const render = (node) => {
+        const row = node.delivery;
+        const member = memberOf(state, row.memberId);
+        const name = member?.name ?? row.memberId;
+        const segments = segmentsOf(row, now);
+        const from = segments[0]?.from ?? row.queuedAt;
+        const to = segments.at(-1)?.to ?? from;
+        const tokens = executions.get(row.id)?.tokens;
+        return _jsxs("li", { children: [_jsxs("div", { className: css.node, "data-delivery": row.id, children: [_jsx("span", { className: css.nodeState, "data-status": row.status, "aria-label": t(`team.status.${row.status}`) }), _jsx("span", { className: css.avatar, style: { '--member-color': memberColor(name) }, "aria-hidden": true, children: name.slice(0, 1).toUpperCase() }), _jsx("span", { className: css.nodeName, children: name }), _jsxs("span", { className: css.nodeText, title: row.text, children: [row.kind === 'notify' ? `${t('job.notify')} · ` : '', row.text.replace(/\s+/g, ' ')] }), _jsx(Bar, { rows: [row], from: from, to: Math.max(to, from + 1), now: now }), _jsxs("span", { className: css.elapsed, children: [formatDurationMs(Math.max(0, to - from)), tokens === undefined ? '' : ` · ${Intl.NumberFormat(undefined, { notation: 'compact', maximumFractionDigits: 1 }).format(tokens)} tok`] }), row.status === 'running' && actions.stopDelivery !== undefined && member !== undefined
+                            ? _jsx("button", { type: "button", className: css.small, onClick: () => { actions.stopDelivery?.(member.name, row.id); }, children: t('job.node.stop') })
+                            : member?.childSessionId !== undefined && actions.openSession !== undefined && _jsx("button", { type: "button", className: css.small, onClick: () => { actions.openSession?.(member.childSessionId); }, children: t('job.node.session') })] }), row.error !== undefined && _jsx("p", { className: css.nodeError, children: row.error }), node.children.length > 0 && _jsx("ul", { className: css.tree, children: node.children.map(render) })] }, row.id);
+    };
+    return _jsx("ul", { className: css.tree, "data-root": true, children: nodes.map(render) });
+}
+/** One lane per member, each delivery's queue / held / exec stretches along the task's span. */
+function Timeline({ state, job, now, t }) {
+    const rows = jobDeliveries(state, job);
+    const lanes = [...new Set(rows.map(row => row.memberId))];
+    const to = job.endedAt ?? now;
+    return _jsxs("div", { className: css.timeline, children: [lanes.map(id => {
+                const name = memberOf(state, id)?.name ?? id;
+                return _jsxs("div", { className: css.lane, children: [_jsx("span", { className: css.laneName, title: name, children: name }), _jsx(Bar, { rows: rows.filter(row => row.memberId === id), from: job.startedAt, to: to, now: now })] }, id);
+            }), _jsxs("div", { className: css.axis, children: [_jsx("span", { children: formatClock(job.startedAt) }), _jsx("span", { children: formatDurationMs(Math.max(0, to - job.startedAt)) })] }), _jsx("div", { className: css.legend, children: ['queue', 'held', 'exec'].map(kind => _jsxs("span", { children: [_jsx("i", { className: css.seg, "data-kind": kind }), t(`job.seg.${kind}`)] }, kind)) })] });
+}
+function JobDetail({ state, job, now, actions, back, t }) {
+    const [confirming, setConfirming] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [message, setMessage] = useState(null);
+    const status = statusOf(state, job);
+    const rows = jobDeliveries(state, job);
+    const open = rows.filter(isOpenDelivery);
+    const relays = pendingRelays(state).filter(relay => relay.intent?.task === job.id);
+    const label = t('job.number', { number: job.number });
+    const stop = async () => {
+        if (actions.stopJob === undefined || busy)
+            return;
+        setBusy(true);
+        try {
+            const outcome = await actions.stopJob(job.id);
+            setMessage(outcome.ok ? null : outcome.message);
+            setConfirming(false);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const stopping = [...new Set(open.map(row => memberOf(state, row.memberId)?.name ?? row.memberId))];
+    return _jsxs("div", { className: css.detail, "data-task": job.id, children: [_jsxs("button", { type: "button", className: css.back, onClick: back, children: [_jsx(IconChevronLeftOutlineMedium, { size: 18 }), t('job.back')] }), _jsxs("div", { className: css.card, children: [_jsxs("strong", { className: css.cardTitle, children: [label, " \u00B7 ", job.title] }), _jsxs("div", { className: css.rowMeta, children: [_jsx("span", { className: css.tag, "data-status": status, children: t(`job.status.${status}`) }), _jsx("span", { className: css.muted, children: t('job.elapsed', { time: formatDurationMs(jobElapsed(job, now)) }) }), _jsx(Avatars, { state: state, ids: job.members })] }), _jsx("ul", { className: css.messages, children: job.messages.map(entry => _jsxs("li", { children: [_jsx("span", { className: css.muted, children: formatClock(entry.time) }), _jsxs("span", { className: css.messageText, children: [t('job.you'), entry.text] }), entry.by !== undefined && _jsx("span", { className: css.attr, children: entry.by === 'model'
+                                        ? t('job.by.model', { probability: (entry.probability ?? 0).toFixed(2) })
+                                        : t(`job.by.${entry.by}`) })] }, entry.id)) }), _jsx(Bar, { rows: rows, from: job.startedAt, to: job.endedAt ?? now, now: now })] }), _jsxs("div", { className: css.actions, children: [open.length > 0 && actions.stopJob !== undefined && !confirming
+                        && _jsx("button", { type: "button", className: css.danger, onClick: () => { setConfirming(true); }, children: t('job.stop') }), actions.compose !== undefined && _jsx("button", { type: "button", className: css.primary, onClick: () => { actions.compose?.({ task: job.id, label }); }, children: t('job.followUp') }), actions.compose !== undefined && _jsx("span", { className: css.muted, children: t('job.followUpHint', { label }) })] }), confirming && _jsxs("div", { className: css.confirm, role: "alertdialog", "aria-label": t('job.stop'), children: [_jsx("p", { children: t('job.stopConfirm', { members: stopping.join('、') }) }), _jsxs("div", { className: css.actions, children: [_jsx("button", { type: "button", className: css.danger, disabled: busy, onClick: () => { void stop(); }, children: t('job.stopYes') }), _jsx("button", { type: "button", className: css.small, onClick: () => { setConfirming(false); }, children: t('goal.cancel') })] })] }), message !== null && _jsx("p", { role: "alert", className: css.error, children: message }), actions.reconcile !== undefined && _jsx(RoomRecoveryView, { deliveries: rows, members: state.members, reconcile: actions.reconcile, openSession: actions.openSession, t: t }), relays.map(relay => _jsxs("div", { className: css.need, children: [_jsx("p", { children: t('job.relay', { from: relay.from, to: relay.to }) }), _jsx("p", { className: css.messageText, children: relay.content }), _jsxs("div", { className: css.actions, children: [actions.confirmRelay !== undefined && _jsx("button", { type: "button", className: css.small, onClick: () => { void actions.confirmRelay?.(relay.id); }, children: t('job.relayConfirm') }), actions.dismissRelay !== undefined && _jsx("button", { type: "button", className: css.small, onClick: () => { void actions.dismissRelay?.(relay.id); }, children: t('job.relayDismiss') })] })] }, relay.id)), job.goalId !== undefined && job.goalId === state.plan?.id && actions.planCommand !== undefined && _jsxs("section", { className: css.section, children: [_jsx("h4", { children: t('job.goalTag', { objective: state.plan.objective }) }), _jsx(RoomPlanView, { plan: state.plan, members: state.members, command: actions.planCommand, openSession: actions.openSession, stopMember: actions.stopDelivery, t: t })] }), _jsxs("section", { className: css.section, children: [_jsx("h4", { children: t('job.subtasks') }), _jsx(SubtaskTree, { state: state, nodes: subtaskTree(state, job), now: now, actions: actions, t: t })] }), _jsxs("section", { className: css.section, children: [_jsx("h4", { children: t('job.timeline') }), _jsx(Timeline, { state: state, job: job, now: now, t: t })] })] });
+}
+/** The task page body. */
+export function TasksView({ state, focus, t, ...actions }) {
+    const jobs = state.jobs ?? [];
+    const [filter, setFilter] = useState(() => jobs.some(job => job.status === 'running' || needsAttention(state, job)) ? 'running' : 'all');
+    const [selected, setSelected] = useState(focus?.task ?? null);
+    useEffect(() => { if (focus !== undefined)
+        setSelected(focus.task); }, [focus?.task, focus?.revision]);
+    const now = useNow(jobs.some(job => job.status === 'running' || job.status === 'attention'));
+    const job = jobs.find(entry => entry.id === selected);
+    if (job !== undefined)
+        return _jsx("div", { className: css.page, children: _jsx(JobDetail, { state: state, job: job, now: now, actions: actions, back: () => { setSelected(null); }, t: t }) });
+    const shown = filterJobs(state, filter);
+    // A formal goal no task has picked up yet still needs a home.
+    const looseGoal = state.plan !== undefined && !jobs.some(entry => entry.goalId === state.plan?.id);
+    return _jsxs("div", { className: css.page, children: [_jsx(Goal, { goal: state.goal, setGoal: actions.setGoal, t: t }), _jsxs("div", { className: css.filters, role: "group", "aria-label": t('job.title'), children: [TASK_FILTERS.map(value => _jsxs("button", { type: "button", className: css.filter, "data-kind": value, "aria-pressed": filter === value, onClick: () => { setFilter(value); }, children: [t(`job.filter.${value}`), _jsx("span", { className: css.count, children: filterJobs(state, value).length })] }, value)), actions.compose !== undefined && _jsx("button", { type: "button", className: css.newTask, onClick: () => { actions.compose?.({ task: 'new', label: t('job.tagNew') }); }, children: t('job.new') })] }), _jsxs("div", { className: css.list, children: [shown.map(entry => _jsx(JobRow, { state: state, job: entry, now: now, open: () => { setSelected(entry.id); }, t: t }, entry.id)), shown.length === 0 && _jsx("p", { className: css.muted, children: jobs.length === 0 ? t('job.empty') : t('job.emptyFilter') })] }), looseGoal && actions.planCommand !== undefined && _jsxs("section", { className: css.section, children: [_jsx("h4", { children: t('job.goalTag', { objective: state.plan.objective }) }), _jsx(RoomPlanView, { plan: state.plan, members: state.members, command: actions.planCommand, openSession: actions.openSession, stopMember: actions.stopDelivery, t: t })] })] });
+}

package/lib/types/client/TeamView.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The team view: the room's organization in the right sidebar, opened from
+ * the members tab. One layout that adapts to its own width — narrow, an
+ * indented tree (you → coordinator → members) whose nodes expand into the
+ * deliveries they received; wide (≥ 600px), the same tree laid out
+ * top-down with drawn edges (solid = tasks handed over, with the report
+ * count coming back; dashed = FYIs off the tree) and the selected member's
+ * details below. Opening it with a `member` param selects and reveals that
+ * member (the cards' 在团队中定位).
+ */
+import { type ReactNode } from 'react';
+import type { SessionId } from '@deepseek-ai/dsh-session/types';
+import type { RoomState } from '../types.ts';
+import type { MembersViewProps } from './slots.ts';
+type T = MembersViewProps['t'];
+/** What a link control needs. */
+interface LinkActions {
+    readonly linkSession?: ((target: string, title: string) => void) | undefined;
+    readonly unlinkSession?: ((target: string) => void) | undefined;
+}
+/** The team view body. */
+export declare function TeamView({ state, focus, openSession, linkSession, unlinkSession, t }: LinkActions & {
+    readonly state: RoomState;
+    /** A member name to select and reveal (the navigation param). */
+    readonly focus?: {
+        readonly member: string;
+        readonly revision: number;
+    } | undefined;
+    readonly openSession: (sessionId: SessionId) => void;
+    readonly t: T;
+}): ReactNode;
+export {};
+//# sourceMappingURL=TeamView.d.ts.map