@khorsheed/dsh-room 0.2.2 → 0.2.4

package/lib/types/client/RoomHelpView.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Cross-session help, on both ends.
+ *
+ * - `room-help` (the asking room): one line per thread — who asked which
+ *   session, where it stands — that opens to the request and every message
+ *   on the thread (the helper's questions, its reply with the handoff, the
+ *   asker's follow-ups), plus a jump into the helper's session.
+ * - `room-help-request` (the helper's session): the request the room queued
+ *   there, as a card naming the asking room and member, with a jump back.
+ */
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { NUDGE_AFTER } from '../helps.js';
+import css from './RoomHelpView.module.css';
+const NO_STORE = () => () => { };
+/** Default minutes before an unanswered request turns amber (the room setting's default). */
+const REMINDER_MINUTES = 30;
+/** The thread row in the asking room. */
+export function RoomHelpView({ node, sessionId, roomStore, openSession, linkSession, dismissNudge, t }) {
+    const help = node.data.help;
+    const [open, setOpen] = useState(false);
+    // An unanswered request (queued, or the helper still on it) past the room's
+    // reminder turns amber with how long it has waited; nothing is cancelled.
+    const state = useSyncExternalStore(roomStore?.subscribe ?? NO_STORE, () => roomStore?.getCached(sessionId));
+    const minutes = state?.settings?.helpReminderMinutes ?? REMINDER_MINUTES;
+    // The third ask of one plain session, once answered: a one-time hint to keep
+    // it on the member list (unless it is already there, or the hint was dismissed).
+    const target = help.target.sessionId;
+    const asks = (state?.helps ?? []).filter(entry => entry.target.sessionId === target && entry.target.room !== true);
+    const nudge = help.state === 'replied' && help.target.room !== true && linkSession !== undefined
+        && asks.length >= NUDGE_AFTER && asks[NUDGE_AFTER - 1]?.id === help.id
+        && state?.linked?.some(entry => entry.sessionId === target) !== true
+        && state?.helpNudgesDismissed?.includes(target) !== true;
+    const waiting = help.state === 'queued' || help.state === 'running';
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (!waiting)
+            return;
+        const timer = setInterval(() => { setNow(Date.now()); }, 30_000);
+        return () => { clearInterval(timer); };
+    }, [waiting]);
+    const waited = Math.floor((now - help.since) / 60_000);
+    const overdue = waiting && waited >= minutes;
+    return (_jsxs("div", { className: css.thread, "data-state": help.state, "data-overdue": overdue ? '' : undefined, children: [_jsxs("div", { className: css.line, children: [_jsx("span", { "aria-hidden": true, className: css.icon, children: help.state === 'replied' ? '✓' : help.state === 'failed' ? '!' : '↗' }), _jsx("span", { className: css.text, children: t('help.title', { from: help.fromName, target: help.target.title }) }), _jsxs("span", { className: css.tag, "data-state": overdue ? 'overdue' : help.state, children: [t(`help.state.${help.state}`), help.state === 'failed' && help.error !== undefined ? `：${help.error}` : '', overdue && t('help.waited', { minutes: waited })] }), _jsx("button", { type: "button", className: css.action, "aria-expanded": open, onClick: () => { setOpen(value => !value); }, children: t(open ? 'help.collapse' : 'help.expand') }), _jsx("button", { type: "button", className: css.action, onClick: () => { openSession(help.target.sessionId); }, children: t('help.open') })] }), nudge && (_jsxs("div", { className: css.nudge, children: [_jsx("span", { children: t('help.nudge', { count: asks.length }) }), _jsx("button", { type: "button", className: css.action, onClick: () => { linkSession(target, help.target.title); }, children: t('help.nudgeLink') }), dismissNudge !== undefined && _jsx("button", { type: "button", className: css.action, onClick: () => { dismissNudge(target); }, children: t('help.nudgeDismiss') })] })), open && (_jsxs("div", { className: css.body, children: [_jsxs("div", { className: css.entry, children: [_jsx("span", { className: css.label, children: t('help.request') }), _jsx("p", { className: css.copy, children: help.text })] }), help.messages.map((message, index) => (_jsxs("div", { className: css.entry, "data-kind": message.kind, children: [_jsx("span", { className: css.label, children: message.kind === 'message'
+                                    ? t('help.msg.message', { from: help.fromName })
+                                    : t(message.kind === 'reply' ? (message.fallback === true ? 'help.msg.fallback' : 'help.msg.reply') : 'help.msg.question') }), _jsx("p", { className: css.copy, children: message.text }), message.handoff !== undefined && _jsxs("p", { className: css.handoff, children: [_jsx("b", { children: t('help.handoff') }), message.handoff] })] }, index)))] }))] }));
+}
+/** Lines past which the request card folds. */
+const FOLD_LINES = 6;
+/** The request card in the helper's session. */
+export function RoomHelpRequestView({ node, openSession, t }) {
+    const data = node.data;
+    const [open, setOpen] = useState(false);
+    const long = data.text.split('\n').length > FOLD_LINES || data.text.length > 360;
+    return (_jsxs("div", { className: css.card, children: [_jsxs("div", { className: css.cardHead, children: [_jsx("span", { "aria-hidden": true, className: css.icon, children: "\u2198" }), _jsxs("span", { className: css.cardTitle, children: [t(data.op === 'message' ? 'help.card.message' : 'help.card.request', { room: data.roomTitle, from: data.from }), data.member !== undefined && t('help.card.to', { member: data.member })] }), data.held === true && _jsx("span", { className: css.tag, children: t('help.card.held') }), _jsx("button", { type: "button", className: css.action, onClick: () => { openSession(data.room); }, children: t('help.card.back') })] }), _jsx("p", { className: css.cardBody, "data-folded": long && !open ? 'true' : undefined, children: data.text }), long && (_jsx("button", { type: "button", className: css.more, onClick: () => { setOpen(value => !value); }, children: t(open ? 'help.card.less' : 'help.card.more') }))] }));
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Held-reports line ('room-inbox' keyed renderer): the report gate kept some
+ * results in a member's inbox instead of waking it — one dim line saying so,
+ * with the model's verdict and a 现在交给 button that wakes the member now.
+ */
+import { type ReactNode } from 'react';
+import type { RoomInboxViewProps } from './slots.ts';
+/** The held-reports line. */
+export declare function RoomInboxView({ node, releaseReports, t }: RoomInboxViewProps): ReactNode;
+//# sourceMappingURL=RoomInboxView.d.ts.map

package/lib/types/client/RoomInboxView.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Held-reports line ('room-inbox' keyed renderer): the report gate kept some
+ * results in a member's inbox instead of waking it — one dim line saying so,
+ * with the model's verdict and a 现在交给 button that wakes the member now.
+ */
+import { useState } from 'react';
+import css from './RoomInboxView.module.css';
+/** The held-reports line. */
+export function RoomInboxView({ node, releaseReports, t }) {
+    const data = node.data;
+    const [busy, setBusy] = useState(false);
+    return (_jsxs("div", { className: css.row, role: "status", children: [_jsxs("span", { className: css.text, children: [t('inbox.line', { member: data.member, count: data.held.length }), data.probability !== undefined && _jsx("span", { className: css.why, children: t('inbox.why', { p: data.probability.toFixed(2) }) })] }), _jsx("button", { type: "button", className: css.action, disabled: busy, onClick: () => { setBusy(true); void releaseReports(data.member).finally(() => { setBusy(false); }); }, children: t('inbox.release', { member: data.member }) })] }));
+}

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

@@ -0,0 +1,13 @@
+/**
+ * A member's question card ('room-question' keyed renderer): the questions a
+ * CLI member asked through its bridge's `ask_user_question`, answered by
+ * picking — one option (or several on a multi-pick question) plus an optional
+ * 其他 free-text line — instead of a numbered list in the member's reply that
+ * the human answers by typing. Submitting resolves the member's waiting call;
+ * the card then folds to the given answers (or 已过期 when the call ended).
+ */
+import { type ReactNode } from 'react';
+import type { RoomQuestionViewProps } from './slots.ts';
+/** The question card. */
+export declare function RoomQuestionView({ node, answerQuestion, t }: RoomQuestionViewProps): ReactNode;
+//# sourceMappingURL=RoomQuestionView.d.ts.map

package/lib/types/client/RoomQuestionView.js

@@ -0,0 +1,61 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A member's question card ('room-question' keyed renderer): the questions a
+ * CLI member asked through its bridge's `ask_user_question`, answered by
+ * picking — one option (or several on a multi-pick question) plus an optional
+ * 其他 free-text line — instead of a numbered list in the member's reply that
+ * the human answers by typing. Submitting resolves the member's waiting call;
+ * the card then folds to the given answers (or 已过期 when the call ended).
+ */
+import { useState } from 'react';
+import { memberColor } from './member-color.js';
+import css from './RoomQuestionView.module.css';
+/** The question card. */
+export function RoomQuestionView({ node, answerQuestion, t }) {
+    const data = node.data;
+    const [drafts, setDrafts] = useState({});
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(undefined);
+    const pending = data.state === 'pending';
+    const draftOf = (id) => drafts[id] ?? { selected: [], custom: '' };
+    const setDraft = (id, next) => { setDrafts(current => ({ ...current, [id]: next })); };
+    const answered = (id) => draftOf(id).selected.length > 0 || draftOf(id).custom.trim() !== '';
+    const complete = data.questions.every(question => answered(question.id));
+    const pick = (id, label, multi) => {
+        const draft = draftOf(id);
+        const has = draft.selected.includes(label);
+        setDraft(id, { ...draft, selected: multi ? (has ? draft.selected.filter(entry => entry !== label) : [...draft.selected, label]) : (has ? [] : [label]) });
+    };
+    const submit = async () => {
+        if (busy || !complete)
+            return;
+        setBusy(true);
+        try {
+            const answers = data.questions.map((question) => {
+                const draft = draftOf(question.id);
+                const custom = draft.custom.trim();
+                return { id: question.id, selected: draft.selected, ...custom === '' ? {} : { custom } };
+            });
+            setError(await answerQuestion(data.questionId, answers));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    /** The folded answer text of one question. */
+    const answerText = (id) => {
+        const answer = data.answers?.find(entry => entry.id === id);
+        return [...answer?.selected ?? [], ...answer?.custom === undefined ? [] : [answer.custom]].join('；');
+    };
+    return (_jsxs("div", { className: css.card, "data-state": data.state, style: { '--member-color': memberColor(data.member) }, children: [_jsxs("div", { className: css.head, children: [_jsx("span", { className: css.avatar, "aria-hidden": true, children: data.member.slice(0, 1).toUpperCase() }), _jsx("span", { className: css.title, children: t('question.title', { member: data.member }) }), !pending && _jsx("span", { className: css.status, children: t(data.state === 'answered' ? 'question.answered' : 'question.cancelled') })] }), data.questions.map((question) => {
+                const multi = question.multiSelect === true;
+                const draft = draftOf(question.id);
+                return (_jsxs("fieldset", { className: css.question, disabled: !pending || busy, children: [_jsxs("legend", { className: css.prompt, children: [question.header !== undefined && _jsx("span", { className: css.chip, children: question.header }), _jsx("span", { children: question.question }), pending && multi && _jsx("span", { className: css.hint, children: t('question.multi') })] }), pending ? (_jsxs(_Fragment, { children: [(question.options ?? []).map(option => (_jsxs("label", { className: css.option, "data-picked": draft.selected.includes(option.label), children: [_jsx("input", { type: multi ? 'checkbox' : 'radio', name: `${data.questionId}-${question.id}`, checked: draft.selected.includes(option.label), onChange: () => { pick(question.id, option.label, multi); }, onClick: (event) => {
+                                                // A picked radio unpicks on a second click (the draft allows none).
+                                                if (!multi && draft.selected.includes(option.label)) {
+                                                    event.preventDefault();
+                                                    pick(question.id, option.label, multi);
+                                                }
+                                            } }), _jsxs("span", { className: css.optionText, children: [_jsx("span", { className: css.optionLabel, children: option.label }), option.description !== undefined && _jsx("span", { className: css.optionDescription, children: option.description })] })] }, option.label))), _jsx("input", { className: css.other, value: draft.custom, "aria-label": t('question.other'), placeholder: (question.options ?? []).length > 0 ? `${t('question.other')}：${t('question.otherPlaceholder')}` : t('question.otherPlaceholder'), onChange: (event) => { setDraft(question.id, { ...draft, custom: event.target.value }); } })] })) : data.state === 'answered' && (_jsx("div", { className: css.answer, children: t('question.answer', { answer: answerText(question.id) }) }))] }, question.id));
+            }), pending && (_jsxs("div", { className: css.actions, children: [error !== undefined && _jsx("span", { className: css.error, children: error }), _jsx("button", { type: "button", className: css.submit, disabled: !complete || busy, onClick: () => { void submit(); }, children: t('question.submit') })] }))] }));
+}

package/lib/types/client/RoomRelayView.js

@@ -16,5 +16,5 @@ export function RoomRelayView({ node, confirmRelay, dismissRelay, t }) {
             break;
         case 'pending': break;
     }
-    return (_jsxs("div", { className: css.row, "data-state": data.state, children: [_jsxs("span", { className: css.text, children: [t('relay.line', { from: data.from, to: data.to, content: data.content }), suffix === '' ? '' : ` ${suffix}`] }), data.state === 'pending' && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: css.action, onClick: () => { void confirmRelay(data.relayId); }, children: t('relay.confirm') }), _jsx("button", { type: "button", className: css.action, onClick: () => { void dismissRelay(data.relayId); }, children: t('relay.dismiss') })] }))] }));
+    return (_jsxs("div", { className: css.row, "data-state": data.state, children: [_jsxs("span", { className: css.text, children: [data.reason !== undefined && data.state === 'pending' && _jsx("span", { className: css.reason, children: t(`relay.reason.${data.reason}`) }), t('relay.line', { from: data.from, to: data.to, content: data.content }), suffix === '' ? '' : ` ${suffix}`] }), data.state === 'pending' && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: css.action, onClick: () => { void confirmRelay(data.relayId); }, children: data.reason === 'hop-limit' ? t('relay.continue') : t('relay.confirm') }), _jsx("button", { type: "button", className: css.action, onClick: () => { void dismissRelay(data.relayId); }, children: data.reason === 'hop-limit' ? t('relay.stop') : t('relay.dismiss') })] }))] }));
 }

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

@@ -6,7 +6,9 @@
  * no handle), and a trailing stop button cancels through the Remote. A
  * failed run stays as a dim error row with the journaled reason (truncated,
  * the full text on hover); done/cancelled are hidden by the Definition and
- * never reach here.
+ * never reach here. A RUNNING member's row takes the speech card's shape —
+ * avatar and light card, the row as the card's header, the live output
+ * below — so the reply card that replaces it lands in the same place.
  */
 import { type ReactNode } from 'react';
 import type { RoomRunViewProps } from './slots.ts';

package/lib/types/client/RoomRunView.js

@@ -7,13 +7,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * no handle), and a trailing stop button cancels through the Remote. A
  * failed run stays as a dim error row with the journaled reason (truncated,
  * the full text on hover); done/cancelled are hidden by the Definition and
- * never reach here.
+ * never reach here. A RUNNING member's row takes the speech card's shape —
+ * avatar and light card, the row as the card's header, the live output
+ * below — so the reply card that replaces it lands in the same place.
  */
 import { useEffect, useState, useSyncExternalStore } from 'react';
 import { StateDot, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
 import { IconStopFillMedium } from './icons.js';
 import { formatDurationMs } from './format.js';
+import { memberColor } from './member-color.js';
 import css from './RoomRunView.module.css';
+import speech from './RoomSpeechView.module.css';
 /** The member run row. */
 export function RoomRunView({ node, sessionId, roomStore, openSession, cancelMember, renderMemberOutput, t }) {
     const state = useSyncExternalStore(roomStore.subscribe, () => roomStore.getCached(sessionId));
@@ -43,8 +47,11 @@ export function RoomRunView({ node, sessionId, roomStore, openSession, cancelMem
             jump();
         }
     };
-    return (_jsxs("div", { children: [_jsxs("div", { className: css.run, "data-state": failed ? 'failed' : 'running', role: "button", tabIndex: 0, onClick: jump, onKeyDown: onKeyDown, children: [_jsx(StateDot, { state: failed ? 'error' : 'ongoing' }), _jsx("span", { className: css.title, children: failed ? t('run.failed', { member: data.member }) : t('run.working', { member: data.member }) }), _jsxs("span", { className: css.elapsed, "aria-hidden": true, children: ["\u00B7 ", elapsed === undefined ? t('run.durationUnknown') : formatDurationMs(elapsed)] }), failed && data.error !== undefined && (_jsx("span", { className: css.reason, title: data.error, children: data.error })), !failed && (_jsx(Tooltip, { label: t('run.stop'), side: "bottom", children: _jsx("button", { type: "button", className: css.stop, "aria-label": t('run.stop'), onClick: (event) => {
-                                event.stopPropagation();
-                                void cancelMember(data.member);
-                            }, children: _jsx(IconStopFillMedium, {}) }) }))] }), !failed && childSessionId !== undefined && renderMemberOutput?.(childSessionId, data.startedAt)] }));
+    const row = (_jsxs("div", { className: css.run, "data-state": failed ? 'failed' : 'running', role: "button", tabIndex: 0, onClick: jump, onKeyDown: onKeyDown, children: [_jsx(StateDot, { state: failed ? 'error' : 'ongoing' }), _jsx("span", { className: css.title, children: failed ? t('run.failed', { member: data.member }) : t('run.working', { member: data.member }) }), _jsxs("span", { className: css.elapsed, "aria-hidden": true, children: ["\u00B7 ", elapsed === undefined ? t('run.durationUnknown') : formatDurationMs(elapsed)] }), failed && data.error !== undefined && (_jsx("span", { className: css.reason, title: data.error, children: data.error })), !failed && (_jsx(Tooltip, { label: t('run.stop'), side: "bottom", children: _jsx("button", { type: "button", className: css.stop, "aria-label": t('run.stop'), onClick: (event) => {
+                        event.stopPropagation();
+                        void cancelMember(data.member);
+                    }, children: _jsx(IconStopFillMedium, {}) }) }))] }));
+    if (failed)
+        return _jsx("div", { children: row });
+    return (_jsxs("div", { className: speech.speech, style: { '--member-color': memberColor(data.member) }, children: [_jsx("span", { className: speech.avatar, "aria-hidden": true, children: data.member.slice(0, 1).toUpperCase() }), _jsxs("div", { className: `${speech.card} ${css.liveCard}`, children: [row, childSessionId !== undefined && renderMemberOutput?.(childSessionId, data.startedAt)] })] }));
 }

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

@@ -0,0 +1,19 @@
+/**
+ * The members tab's 协作设置, built on the host primitives so it reads like
+ * the host's own settings: a full-row DisclosureRow (closed by default, the
+ * current values as its collapsed summary), SegmentedControls for the
+ * choices and Switches. Two groups: 协作 (how members message each other,
+ * the hop limit of one chain of messages, pause) and 自动判断 — the room's
+ * decision scenarios (decisions.ts), one switch each; report timing carries
+ * its threshold and longest wait in a box of its own.
+ */
+import { type ReactNode } from 'react';
+import type { RoomSettings } from '../types.ts';
+import type { MembersViewProps, RoomMutationOutcome } from './slots.ts';
+/** The settings block. */
+export declare function RoomSettingsView({ settings, onChange, t }: {
+    readonly settings: RoomSettings;
+    readonly onChange: (patch: Partial<RoomSettings>) => Promise<RoomMutationOutcome>;
+    readonly t: MembersViewProps['t'];
+}): ReactNode;
+//# sourceMappingURL=RoomSettingsView.d.ts.map

package/lib/types/client/RoomSettingsView.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The members tab's 协作设置, built on the host primitives so it reads like
+ * the host's own settings: a full-row DisclosureRow (closed by default, the
+ * current values as its collapsed summary), SegmentedControls for the
+ * choices and Switches. Two groups: 协作 (how members message each other,
+ * the hop limit of one chain of messages, pause) and 自动判断 — the room's
+ * decision scenarios (decisions.ts), one switch each; report timing carries
+ * its threshold and longest wait in a box of its own.
+ */
+import { useState } from 'react';
+import { DisclosureRow, SegmentedControl, Switch } from '@deepseek-ai/dsh-client-ui-primitives';
+import { IconAgentPresetOutlineMedium } from './icons.js';
+import css from './RoomSettingsView.module.css';
+/** The settings block. */
+export function RoomSettingsView({ settings, onChange, t }) {
+    const [open, setOpen] = useState(false);
+    const [error, setError] = useState(null);
+    const change = (patch) => {
+        void onChange(patch).then(outcome => { setError(outcome.ok ? null : outcome.message); });
+    };
+    const judged = settings.reportTiming === 'judge';
+    const step = (value, delta, min, max) => Math.min(max, Math.max(min, Math.round((value + delta) * 10) / 10));
+    const summary = [
+        settings.memberMessages === 'free' ? t('settings.free') : t('settings.confirm'),
+        t('settings.hopSummary', { count: settings.hopLimit }),
+        ...settings.paused ? [t('settings.pausedSummary')] : [],
+    ].join(' · ');
+    return (_jsx("div", { className: css.settings, children: _jsx(DisclosureRow, { icon: _jsx(IconAgentPresetOutlineMedium, {}), title: t('settings.title'), open: open, expandable: true, expandOnRowClick: true, keepContentWhenOpen: true, onToggle: () => { setOpen(value => !value); }, collapsedContent: _jsx("span", { className: settings.paused ? css.valuesPaused : css.values, children: summary }), children: _jsxs("div", { className: css.rows, children: [_jsx("div", { className: css.group, children: t('settings.groupCollab') }), _jsxs("div", { className: css.row, children: [_jsxs("span", { className: css.label, children: [_jsx("b", { children: t('settings.messages') }), _jsx("span", { children: t('settings.messagesHint') })] }), _jsx(SegmentedControl, { id: "room-settings-messages", label: t('settings.messages'), value: settings.memberMessages, options: [{ value: 'free', label: t('settings.free') }, { value: 'confirm', label: t('settings.confirm') }], onChange: (memberMessages) => { change({ memberMessages }); } })] }), _jsxs("div", { className: css.row, children: [_jsxs("span", { className: css.label, children: [_jsx("b", { children: t('settings.hops') }), _jsx("span", { children: t('settings.hopsHint') })] }), _jsxs("span", { className: css.stepper, children: [_jsx("button", { type: "button", "aria-label": t('settings.hopsLess'), disabled: settings.hopLimit <= 2, onClick: () => { change({ hopLimit: settings.hopLimit - 1 }); }, children: "\u2212" }), _jsx("b", { "aria-live": "polite", children: settings.hopLimit }), _jsx("button", { type: "button", "aria-label": t('settings.hopsMore'), disabled: settings.hopLimit >= 50, onClick: () => { change({ hopLimit: settings.hopLimit + 1 }); }, children: "\uFF0B" })] })] }), _jsxs("div", { className: css.row, children: [_jsxs("span", { className: css.label, children: [_jsx("b", { children: t('settings.pause') }), _jsx("span", { children: t('settings.pauseHint') })] }), _jsx(Switch, { checked: settings.paused, label: t('settings.pause'), onChange: (paused) => { change({ paused }); } })] }), _jsxs("div", { className: css.row, children: [_jsxs("span", { className: css.label, children: [_jsx("b", { children: t('settings.helpReminder') }), _jsx("span", { children: t('settings.helpReminderHint') })] }), _jsxs("span", { className: css.stepper, children: [_jsx("button", { type: "button", "aria-label": t('settings.less'), disabled: settings.helpReminderMinutes <= 10, onClick: () => { change({ helpReminderMinutes: settings.helpReminderMinutes - 10 }); }, children: "\u2212" }), _jsx("b", { "aria-live": "polite", children: t('settings.minutes', { count: settings.helpReminderMinutes }) }), _jsx("button", { type: "button", "aria-label": t('settings.more'), disabled: settings.helpReminderMinutes >= 120, onClick: () => { change({ helpReminderMinutes: settings.helpReminderMinutes + 10 }); }, children: "\uFF0B" })] })] }), _jsx("div", { className: css.group, children: t('settings.groupAuto') }), _jsxs("div", { className: css.row, children: [_jsxs("span", { className: css.label, children: [_jsx("b", { children: t('settings.autoFiling') }), _jsx("span", { children: t('settings.autoFilingHint') })] }), _jsx(Switch, { checked: settings.autoTaskFiling, label: t('settings.autoFiling'), onChange: (autoTaskFiling) => { change({ autoTaskFiling }); } })] }), _jsxs("div", { className: css.row, children: [_jsxs("span", { className: css.label, children: [_jsx("b", { children: t('settings.autoReport') }), _jsx("span", { children: t('settings.autoReportHint') })] }), _jsx(Switch, { checked: judged, label: t('settings.autoReport'), onChange: (on) => { change({ reportTiming: on ? 'judge' : 'each' }); } })] }), judged && (_jsxs("div", { className: css.subbox, children: [_jsxs("div", { className: css.subrow, children: [_jsxs("span", { className: css.label, children: [_jsx("b", { children: t('settings.reportThreshold') }), _jsx("span", { children: t('settings.reportThresholdHint') })] }), _jsxs("span", { className: css.stepper, children: [_jsx("button", { type: "button", "aria-label": t('settings.less'), disabled: settings.reportThreshold <= 0.1, onClick: () => { change({ reportThreshold: step(settings.reportThreshold, -0.1, 0.1, 0.9) }); }, children: "\u2212" }), _jsx("b", { "aria-live": "polite", children: settings.reportThreshold.toFixed(1) }), _jsx("button", { type: "button", "aria-label": t('settings.more'), disabled: settings.reportThreshold >= 0.9, onClick: () => { change({ reportThreshold: step(settings.reportThreshold, 0.1, 0.1, 0.9) }); }, children: "\uFF0B" })] })] }), _jsxs("div", { className: css.subrow, children: [_jsxs("span", { className: css.label, children: [_jsx("b", { children: t('settings.reportWait') }), _jsx("span", { children: t('settings.reportWaitHint') })] }), _jsxs("span", { className: css.stepper, children: [_jsx("button", { type: "button", "aria-label": t('settings.less'), disabled: settings.reportWaitMinutes <= 1, onClick: () => { change({ reportWaitMinutes: settings.reportWaitMinutes - 1 }); }, children: "\u2212" }), _jsx("b", { "aria-live": "polite", children: t('settings.minutes', { count: settings.reportWaitMinutes }) }), _jsx("button", { type: "button", "aria-label": t('settings.more'), disabled: settings.reportWaitMinutes >= 30, onClick: () => { change({ reportWaitMinutes: settings.reportWaitMinutes + 1 }); }, children: "\uFF0B" })] })] })] })), error !== null && _jsx("p", { className: css.error, role: "alert", children: error })] }) }) }));
+}

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

@@ -1,11 +1,16 @@
 /**
- * Member speech node ('room-speech' keyed renderer): a 2px member-color rail
- * bands the whole block (identity row: 16px member-color dot + refChip-styled
- * name capsule + provider in tertiary grey; the unframed full-column markdown
- * body — the official MarkdownText, typographically identical to main-agent
- * speech; and the action row), so one glance tells WHOSE paragraph it is. A
- * body past {@link COLLAPSE_CHARS} starts clamped to ~10 lines under a
- * bg-base fade with an expand/collapse toggle. The action row replicates the
+ * Member speech node ('room-speech' keyed renderer): a conversation entry —
+ * the member's color avatar beside a light card that blocks off one member's
+ * turn (several agents take turns in a room, so each turn reads as its own
+ * block): a header (name, public role, provider, time), the markdown body —
+ * the official MarkdownText, typographically identical to main-agent speech —
+ * and a quiet footer row. A
+ * body past {@link COLLAPSE_CHARS} may fold to ~10 lines under a bg-base fade
+ * with an expand/collapse toggle (the fade expands too). The newest reply to
+ * the room starts unfolded — it is what the human is reading — and folds once
+ * a newer reply lands; reports to another member and older replies start
+ * folded. The human's own expand/collapse wins and is remembered per speech
+ * (see {@link foldChoices}). The action row replicates the
  * official MessageIconActions chrome: copy, child-session jump (when the
  * speech carries its handle), honest duration, and a hover-revealed clock.
  * Deliberately absent: branch (forking the room session has undefined
@@ -13,6 +18,15 @@
  */
 import { type ReactNode } from 'react';
 import type { RoomSpeechViewProps } from './slots.ts';
+/**
+ * The human's expand/collapse choices for one room's speeches, by speech seq.
+ * A per-viewer convenience in browser storage: unreadable storage (private
+ * window, blocked site data) only means the default folding applies.
+ */
+export declare const foldChoices: {
+    read(sessionId: string): Record<string, boolean>;
+    write(sessionId: string, seq: number, expanded: boolean): void;
+};
 /** The member speech row. */
-export declare function RoomSpeechView({ node, sessionId, roomStore, openSession, t }: RoomSpeechViewProps): ReactNode;
+export declare function RoomSpeechView({ node, sessionId, roomStore, openSession, openDetail, t }: RoomSpeechViewProps): ReactNode;
 //# sourceMappingURL=RoomSpeechView.d.ts.map

package/lib/types/client/RoomSpeechView.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Member speech node ('room-speech' keyed renderer): a 2px member-color rail
- * bands the whole block (identity row: 16px member-color dot + refChip-styled
- * name capsule + provider in tertiary grey; the unframed full-column markdown
- * body — the official MarkdownText, typographically identical to main-agent
- * speech; and the action row), so one glance tells WHOSE paragraph it is. A
- * body past {@link COLLAPSE_CHARS} starts clamped to ~10 lines under a
- * bg-base fade with an expand/collapse toggle. The action row replicates the
+ * Member speech node ('room-speech' keyed renderer): a conversation entry —
+ * the member's color avatar beside a light card that blocks off one member's
+ * turn (several agents take turns in a room, so each turn reads as its own
+ * block): a header (name, public role, provider, time), the markdown body —
+ * the official MarkdownText, typographically identical to main-agent speech —
+ * and a quiet footer row. A
+ * body past {@link COLLAPSE_CHARS} may fold to ~10 lines under a bg-base fade
+ * with an expand/collapse toggle (the fade expands too). The newest reply to
+ * the room starts unfolded — it is what the human is reading — and folds once
+ * a newer reply lands; reports to another member and older replies start
+ * folded. The human's own expand/collapse wins and is remembered per speech
+ * (see {@link foldChoices}). The action row replicates the
  * official MessageIconActions chrome: copy, child-session jump (when the
  * speech carries its handle), honest duration, and a hover-revealed clock.
  * Deliberately absent: branch (forking the room session has undefined
@@ -14,9 +19,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { MarkdownText, Tooltip, writeClipboard } from '@deepseek-ai/dsh-client-ui-primitives';
-import { IconCheckOutlineMedium, IconCopyOutlineMedium, IconLinkOutlineMedium } from './icons.js';
+import { IconCheckOutlineMedium, IconChevronDownOutlineMedium, IconCopyOutlineMedium, IconLinkOutlineMedium } from './icons.js';
+import { IconRequestDetailOutline16 } from './icons-local.js';
 import { memberColor } from './member-color.js';
 import { formatClock, formatDurationMs } from './format.js';
+import { formatTokens } from './RoomStatsLine.js';
 import css from './RoomSpeechView.module.css';
 /**
  * Speeches longer than this start collapsed. Chars, not rendered lines: a
@@ -24,6 +31,35 @@ import css from './RoomSpeechView.module.css';
  * lines of prose.
  */
 const COLLAPSE_CHARS = 600;
+/** Browser storage key of one room's remembered expand/collapse choices. */
+const FOLD_KEY_PREFIX = 'dsh-room:speech-fold:';
+/** Choices kept per room (newest speeches win): bounds the stored map. */
+const FOLD_KEEP = 200;
+/**
+ * The human's expand/collapse choices for one room's speeches, by speech seq.
+ * A per-viewer convenience in browser storage: unreadable storage (private
+ * window, blocked site data) only means the default folding applies.
+ */
+export const foldChoices = {
+    read(sessionId) {
+        try {
+            const raw = globalThis.localStorage?.getItem(FOLD_KEY_PREFIX + sessionId);
+            const parsed = raw == null ? undefined : JSON.parse(raw);
+            return typeof parsed === 'object' && parsed !== null ? parsed : {};
+        }
+        catch {
+            return {};
+        }
+    },
+    write(sessionId, seq, expanded) {
+        try {
+            const choices = { ...foldChoices.read(sessionId), [String(seq)]: expanded };
+            const kept = Object.keys(choices).map(Number).sort((a, b) => b - a).slice(0, FOLD_KEEP);
+            globalThis.localStorage?.setItem(FOLD_KEY_PREFIX + sessionId, JSON.stringify(Object.fromEntries(kept.map(key => [key, choices[key]]))));
+        }
+        catch { /* a convenience: never fail the view */ }
+    },
+};
 /** Localized Markdown chrome (code-fence copy buttons, footnotes) over the room namespace. */
 function markdownLabels(t) {
     return {
@@ -32,10 +68,11 @@ function markdownLabels(t) {
     };
 }
 /** The member speech row. */
-export function RoomSpeechView({ node, sessionId, roomStore, openSession, t }) {
+export function RoomSpeechView({ node, sessionId, roomStore, openSession, openDetail, t }) {
     const data = node.data;
     const [copied, setCopied] = useState(false);
-    const [expanded, setExpanded] = useState(false);
+    // The human's own choice for this speech (remembered), else the default.
+    const [chosen, setChosen] = useState(() => foldChoices.read(sessionId)[String(node.data.seq)]);
     const copyTimer = useRef(null);
     useEffect(() => () => {
         if (copyTimer.current !== null)
@@ -47,8 +84,27 @@ export function RoomSpeechView({ node, sessionId, roomStore, openSession, t }) {
         ? undefined
         : member.kind === 'main-agent' ? t('member.kind.main') : member.provider;
     const child = data.childSessionId;
+    // The run's billed tokens, as the host's 用量 chip shows them (recorded
+    // when the run settles; absent for runs the producer reported none for).
+    const execution = data.runId === undefined ? undefined : state?.executions?.find(entry => entry.id === data.runId);
+    // The billed total is the sum of the disjoint buckets when they were
+    // recorded (an older record's total may leave the cache out).
+    const usage = execution?.usage;
+    const tokens = usage === undefined ? execution?.tokens
+        : usage.inputTokens + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0) + usage.outputTokens;
+    // The newest speech keeps its action row shown; older rows reveal on hover
+    // (the host's turn-tail rule). A speech newer than the cached state's is the newest.
+    const newestSpeech = data.seq >= (state?.latestSpeechSeq ?? data.seq);
     const collapsible = data.text.length > COLLAPSE_CHARS;
+    // The newest reply to the room reads unfolded. A reply newer than the
+    // cached state's (the refresh is debounced) is the newest already.
+    const newestReply = data.reportedTo === undefined && data.seq >= (state?.latestReplySeq ?? data.seq);
+    const expanded = chosen ?? newestReply;
     const clamped = collapsible && !expanded;
+    const toggle = (next) => {
+        setChosen(next);
+        foldChoices.write(sessionId, data.seq, next);
+    };
     const labels = useMemo(() => markdownLabels(t), [t]);
     const copy = () => {
         void writeClipboard(data.text).then((ok) => {
@@ -58,5 +114,32 @@ export function RoomSpeechView({ node, sessionId, roomStore, openSession, t }) {
             copyTimer.current = setTimeout(() => { setCopied(false); }, 1000);
         });
     };
-    return (_jsxs("div", { className: css.speech, "data-time-hover-root": "", style: { borderLeft: `2px solid ${memberColor(data.member)}` }, children: [_jsxs("div", { className: css.identity, children: [_jsx("span", { className: css.dot, style: { background: memberColor(data.member) }, "aria-hidden": true }), _jsx("span", { className: css.chip, children: data.member }), provider !== undefined && provider !== '' && _jsx("span", { className: css.provider, children: provider }), data.interrupted !== undefined && _jsx("span", { className: css.meta, children: t(data.interrupted === 'cancelled' ? 'speech.stopped' : 'speech.failed') })] }), _jsxs("div", { className: clamped ? `${css.body} ${css.clamped}` : css.body, children: [_jsx(MarkdownText, { text: data.text, labels: labels }), clamped && _jsx("div", { className: css.fade, "aria-hidden": true })] }), collapsible && (_jsx("button", { type: "button", className: css.expandToggle, onClick: () => { setExpanded(value => !value); }, children: expanded ? t('speech.collapse') : t('speech.expand') })), _jsxs("div", { className: css.actions, children: [_jsx(Tooltip, { label: copied ? t('action.copied') : t('action.copy'), side: "bottom", children: _jsx("button", { type: "button", className: css.action, "aria-label": copied ? t('action.copied') : t('action.copy'), onClick: copy, children: copied ? _jsx(IconCheckOutlineMedium, {}) : _jsx(IconCopyOutlineMedium, {}) }) }), child !== undefined && (_jsx(Tooltip, { label: t('speech.jump'), side: "bottom", children: _jsx("button", { type: "button", className: css.action, "aria-label": t('speech.jump'), onClick: () => { openSession(child); }, children: _jsx(IconLinkOutlineMedium, {}) }) })), data.durationMs !== undefined && (_jsx("span", { className: css.meta, children: formatDurationMs(data.durationMs) })), _jsx("span", { className: css.time, children: formatClock(data.time) })] })] }));
+    const color = memberColor(data.member);
+    return (_jsxs("div", { className: css.speech, "data-time-hover-root": "", "data-actions-reveal": newestSpeech ? 'always' : 'hover', style: { '--member-color': color }, children: [_jsx("span", { className: css.avatar, "aria-hidden": true, children: data.member.slice(0, 1).toUpperCase() }), _jsxs("div", { className: css.stack, children: [_jsxs("div", { className: css.card, children: [_jsxs("div", { className: css.identity, children: [_jsx("span", { className: css.name, children: data.member }), member?.role !== undefined && _jsx("span", { className: css.role, children: member.role }), provider !== undefined && provider !== '' && _jsx("span", { className: css.provider, children: provider }), data.interrupted !== undefined && _jsx("span", { className: css.interrupted, children: t(data.interrupted === 'cancelled' ? 'speech.stopped' : 'speech.failed') })] }), _jsxs("div", { className: clamped ? `${css.body} ${css.clamped}` : css.body, children: [_jsx(MarkdownText, { text: data.text, labels: labels }), clamped && _jsx("div", { className: css.fade, "aria-hidden": true, onClick: () => { toggle(true); } }), collapsible && (_jsx("div", { className: css.foldBar, children: _jsx(Tooltip, { label: expanded ? t('speech.collapse') : t('speech.expand'), side: "bottom", children: _jsx("button", { type: "button", className: css.foldToggle, "aria-label": expanded ? t('speech.collapse') : t('speech.expand'), "aria-expanded": expanded, onClick: () => { toggle(!expanded); }, children: _jsx(IconChevronDownOutlineMedium, {}) }) }) }))] }), data.reportedTo !== undefined && (_jsx("span", { className: css.reported, children: t('speech.reportedTo', { member: data.reportedTo }) }))] }), _jsxs("div", { className: css.actions, children: [_jsx(Tooltip, { label: copied ? t('action.copied') : t('action.copy'), side: "bottom", children: _jsx("button", { type: "button", className: css.action, "aria-label": copied ? t('action.copied') : t('action.copy'), onClick: copy, children: copied ? _jsx(IconCheckOutlineMedium, {}) : _jsx(IconCopyOutlineMedium, {}) }) }), child !== undefined && (_jsx(Tooltip, { label: t('speech.jump'), side: "bottom", children: _jsx("button", { type: "button", className: css.action, "aria-label": t('speech.jump'), onClick: () => { openSession(child); }, children: _jsx(IconLinkOutlineMedium, {}) }) })), child !== undefined && data.messageId !== undefined && openDetail !== undefined && (_jsx(Tooltip, { label: t('speech.detail'), side: "bottom", children: _jsx("button", { type: "button", className: css.action, "aria-label": t('speech.detail'), onClick: () => { openDetail(child, data.messageId); }, children: _jsx(IconRequestDetailOutline16, {}) }) })), tokens !== undefined && tokens > 0
+                                ? _jsx(UsageChip, { tokens: tokens, execution: execution, provider: member?.kind === 'cli' ? member.provider : undefined, durationMs: data.durationMs, t: t })
+                                : data.durationMs !== undefined && _jsx("span", { className: css.meta, children: formatDurationMs(data.durationMs) }), _jsx("span", { className: css.meta, children: formatClock(data.time) })] })] })] }));
+}
+/**
+ * 用量 with its breakdown on hover or focus — the host's turn usage panel:
+ * total, provider / model, cache hit, the disjoint input buckets, output, and
+ * this round's run time. Rows the harness did not report are left out.
+ */
+function UsageChip({ tokens, execution, provider, durationMs, t }) {
+    const [open, setOpen] = useState(false);
+    const usage = execution?.usage;
+    const billed = usage === undefined ? 0 : usage.inputTokens + (usage.cacheReadTokens ?? 0) + (usage.cacheWriteTokens ?? 0);
+    const exact = (n) => n.toLocaleString('en-US');
+    const route = [provider, execution?.model].filter(Boolean).join('/');
+    const rows = [
+        ...route === '' ? [] : [[t('usage.route'), route]],
+        ...usage !== undefined && billed > 0 ? [[t('usage.cacheHit'), `${Math.round((usage.cacheReadTokens ?? 0) / billed * 1000) / 10}%`]] : [],
+        ...usage === undefined ? [] : [
+            [t('usage.uncached'), `${exact(usage.inputTokens)} tok`],
+            ...usage.cacheReadTokens === undefined ? [] : [[t('usage.cacheRead'), `${exact(usage.cacheReadTokens)} tok`]],
+            ...usage.cacheWriteTokens === undefined ? [] : [[t('usage.cacheWrite'), `${exact(usage.cacheWriteTokens)} tok`]],
+            [t('usage.output'), `${exact(usage.outputTokens)} tok`],
+        ],
+        ...durationMs === undefined ? [] : [[t('usage.duration'), formatDurationMs(durationMs)]],
+    ];
+    return (_jsxs("span", { className: css.usage, onMouseEnter: () => { setOpen(true); }, onMouseLeave: () => { setOpen(false); }, children: [_jsx("button", { type: "button", className: css.usageChip, "aria-expanded": open, onFocus: () => { setOpen(true); }, onBlur: () => { setOpen(false); }, children: t('speech.usage', { tokens: formatTokens(tokens) }) }), open && (_jsxs("span", { className: css.usagePanel, role: "tooltip", children: [_jsxs("span", { className: css.usageHead, children: [_jsx("span", { children: t('usage.title') }), _jsxs("span", { children: [exact(tokens), " tok"] })] }), rows.map(([label, value]) => _jsxs("span", { className: css.usageRow, children: [_jsx("span", { children: label }), _jsx("span", { children: value })] }, label))] }))] }));
 }

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

@@ -9,14 +9,17 @@
  * 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 { type ReactNode } from 'react';
 import type { UseProjection } from '@deepseek-ai/dsh-api-session-controller/client';
 import type { TokenUsageProjection } from '@deepseek-ai/dsh-token-meter/client';
 import type { RoomComposerProps } from './slots.ts';
+import type { RoomState } from '../types.ts';
 /**
  * Compact token count: 517 / 12.2K / 517K / 1.2M (one decimal under three
  * digits). Copied from the official StatsLine.
@@ -52,10 +55,28 @@ export declare function billedInputTokens(usage: TokenUsageProjection): number;
  * @returns rounded integer percent, or null when no input was billed.
  */
 export declare function cacheHitPercent(usage: TokenUsageProjection): number | null;
-/** Props: the projection read seat plus the room locale seat. */
+/** One member's share of the room's work. */
+export interface MemberUsage {
+    readonly member: string;
+    readonly model?: string;
+    readonly rounds: number;
+    readonly tokens: number;
+    readonly elapsedMs: number;
+}
+/**
+ * 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 declare function memberUsage(state: RoomState | undefined): readonly MemberUsage[];
+/** Props: the projection read seat, the room state, and the room locale seat. */
 export interface RoomStatsLineProps {
     readonly useProjection: UseProjection;
+    /** The room's replayed state: the members chip reads its execution records. */
+    readonly state?: RoomState | undefined;
     readonly t: RoomComposerProps['t'];
 }
-export declare const RoomStatsLine: import("react").MemoExoticComponent<({ useProjection, t }: RoomStatsLineProps) => ReactNode>;
+export declare const RoomStatsLine: import("react").MemoExoticComponent<({ useProjection, state, t }: RoomStatsLineProps) => ReactNode>;
 //# sourceMappingURL=RoomStatsLine.d.ts.map