@khorsheed/dsh-room 0.1.0

package/lib/types/client/RoomModelPicker.js

@@ -0,0 +1,134 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The room composer's main-agent model picker: our own trigger over the
+ * official per-session ModelDirectory (ui-model-selection's public
+ * `ctx.modelDirectories` service), because the official model seat
+ * (`conversation.input.model`) rides the hidden InputBar fallback and slots
+ * are single-owner — no cross-plugin API re-hosts it. The room's bare-message
+ * path IS the session's root agent, so this directory's `select()` writes
+ * exactly what the official composer seat switches (the durable per-session
+ * selection through the session controller's selectModel remote); @-addressed
+ * member dispatches ride room's own submit remote and are untouched. The
+ * trigger and the two-level menu mirror the official ModelSelect (figma
+ * 496:26454): a root pane of Model / Effort cells drilling into the
+ * provider-grouped model list and the current model's effort levels. The menu
+ * opens upward absolutely from the picker (the composer sits at the
+ * conversation's bottom) rather than portaled — the takeover card has no
+ * overflow clip above the row.
+ */
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { IconCheckOutlineMedium, IconChevronDownOutlineMedium, IconChevronRightOutlineMedium } from './icons.js';
+import css from './RoomModelPicker.module.css';
+/**
+ * Render the main-agent model seat: trigger (current model name + effort in
+ * the caption tone + chevron) and, while open, the two-level menu.
+ * @param props - the shared directory, the error sink, and the locale seat.
+ * @returns the picker.
+ */
+export function RoomModelPicker({ directory, onError, t }) {
+    const state = useSyncExternalStore(fn => directory.store.subscribe(fn), () => directory.store.getSnapshot());
+    const [open, setOpen] = useState(false);
+    const [pane, setPane] = useState('root');
+    const rootRef = useRef(null);
+    const choices = useMemo(() => state.groups.flatMap(group => group.models.map(model => ({ group, model }))), [state.groups]);
+    const currentChoice = choices.find(choice => choice.group.id === state.current?.provider && choice.model.id === state.current.model);
+    const reasoning = currentChoice?.model.reasoning;
+    const effectiveEffort = state.current?.reasoningEffort ?? reasoning?.defaultEffort;
+    const effortLabel = reasoning === undefined
+        ? undefined
+        : effectiveEffort === undefined
+            ? t('composer.model.effortDefault')
+            : reasoning.efforts.find(level => level.id === effectiveEffort)?.name ?? effectiveEffort;
+    const busy = state.status === 'selecting';
+    // Click-outside closes the dropdown (the member composer's picker pattern);
+    // Escape backs out of a drilled pane first, then closes.
+    useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            if (rootRef.current?.contains(event.target) === true)
+                return;
+            setOpen(false);
+            setPane('root');
+        };
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            if (pane !== 'root')
+                setPane('root');
+            else
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', onPointerDown);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', onPointerDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [open, pane]);
+    const show = () => {
+        setPane('root');
+        setOpen(true);
+        // The official seat's show(): ensure the shared advisory catalog is
+        // loaded; failures land on the store and render as the in-menu status.
+        void directory.load().catch(() => { });
+    };
+    const settle = (promise) => {
+        void promise.then((result) => {
+            // alpha.2 resolves a RemoteResult whose `ok` carries the outcome;
+            // 0.1.5's void resolution (any non-Result value) reads as success.
+            if (typeof result === 'object' && result !== null && 'ok' in result && !result.ok) {
+                onError(t('composer.model.failed'));
+                return;
+            }
+            setOpen(false);
+            setPane('root');
+        }, () => {
+            onError(t('composer.model.failed'));
+        });
+    };
+    const choose = (selection) => {
+        if (state.current?.provider === selection.provider && state.current.model === selection.model) {
+            setOpen(false);
+            setPane('root');
+            return;
+        }
+        settle(directory.select(selection));
+    };
+    const chooseEffort = (effort) => {
+        if (state.current === null || effectiveEffort === effort) {
+            setOpen(false);
+            setPane('root');
+            return;
+        }
+        settle(directory.select({
+            provider: state.current.provider,
+            model: state.current.model,
+            ...effort === undefined ? {} : { reasoningEffort: effort },
+        }));
+    };
+    const waiting = state.current === null && state.status === 'loading';
+    const modelLabel = waiting
+        ? t('composer.model.loading')
+        : currentChoice?.model.name
+            ?? (state.current === null ? t('composer.model.select') : `${state.current.provider}/${state.current.model}`);
+    return (_jsxs("div", { className: css.root, ref: rootRef, children: [_jsxs("button", { type: "button", className: css.trigger, "aria-label": t('composer.model.picker'), "aria-haspopup": "menu", "aria-expanded": open, title: effortLabel === undefined ? modelLabel : `${modelLabel} · ${effortLabel}`, onClick: () => {
+                    if (open) {
+                        setOpen(false);
+                        setPane('root');
+                    }
+                    else {
+                        show();
+                    }
+                }, children: [_jsx("span", { className: css.triggerLabel, children: modelLabel }), effortLabel !== undefined && _jsx("span", { className: css.triggerEffort, children: effortLabel }), _jsx(IconChevronDownOutlineMedium, { className: open ? css.chevronOpen : css.chevron })] }), open && (_jsxs("div", { className: css.menu, role: "menu", "aria-label": t('composer.model.picker'), "aria-busy": state.status === 'loading' || busy, children: [pane === 'root' && (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", role: "menuitem", className: css.cell, onClick: () => { setPane('model'); }, children: [_jsx("span", { className: css.cellLabel, children: t('composer.model.menu.model') }), _jsx("span", { className: css.cellValue, children: modelLabel }), _jsx(IconChevronRightOutlineMedium, { className: css.cellChevron })] }), reasoning !== undefined && (_jsxs("button", { type: "button", role: "menuitem", className: css.cell, onClick: () => { setPane('effort'); }, children: [_jsx("span", { className: css.cellLabel, children: t('composer.model.menu.effort') }), _jsx("span", { className: css.cellValue, children: effortLabel }), _jsx(IconChevronRightOutlineMedium, { className: css.cellChevron })] }))] })), pane === 'model' && (_jsxs(_Fragment, { children: [state.status === 'loading' && (_jsx("div", { className: css.status, children: t('composer.model.status.loading') })), _jsx("div", { className: css.groups, children: state.groups.map(group => (_jsxs("section", { role: "group", "aria-label": group.name, className: css.group, children: [_jsx("div", { className: css.groupTitle, children: group.name }), group.models.map((model) => {
+                                            const selected = state.current?.provider === group.id && state.current.model === model.id;
+                                            return (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": selected, className: css.option, title: model.name, disabled: busy, onClick: () => { choose({ provider: group.id, model: model.id }); }, children: [_jsx("span", { className: css.modelName, children: model.name }), _jsx("span", { className: css.check, children: selected ? _jsx(IconCheckOutlineMedium, {}) : null })] }, model.id));
+                                        })] }, group.id))) }), state.status === 'ready' && choices.length === 0 && (_jsx("div", { className: css.status, children: t('composer.model.empty') }))] })), pane === 'effort' && (reasoning === undefined
+                        ? _jsx("div", { className: css.status, children: t('composer.model.emptyEfforts') })
+                        : [
+                            ...reasoning.defaultEffort === undefined
+                                ? [{ key: 'provider-default', effort: undefined, label: t('composer.model.effortDefault') }]
+                                : [],
+                            ...reasoning.efforts.map(level => ({ key: `effort:${level.id}`, effort: level.id, label: level.name })),
+                        ].map(level => (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": effectiveEffort === level.effort, className: css.option, disabled: busy, onClick: () => { chooseEffort(level.effort); }, children: [_jsx("span", { className: css.modelName, children: level.label }), _jsx("span", { className: css.check, children: effectiveEffort === level.effort ? _jsx(IconCheckOutlineMedium, {}) : null })] }, level.key))))] }))] }));
+}

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

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import type { RoomPlan } from '../plan.ts';
+import type { RoomMember } from '../types.ts';
+import type { RoomComposerProps, RoomMutationOutcome } from './slots.ts';
+type PlanView = Omit<RoomPlan, 'requests'>;
+export interface RoomPlanViewProps {
+    plan?: PlanView | undefined;
+    members: readonly RoomMember[];
+    command: (json: string) => Promise<RoomMutationOutcome>;
+    openSession?: ((id: string) => void) | undefined;
+    stopMember?: ((name: string) => void) | undefined;
+    t: RoomComposerProps['t'];
+}
+/** Goal review is optional room chrome; ordinary chat never opens this form. */
+export declare function RoomPlanView({ plan, members, command, openSession, stopMember, t }: RoomPlanViewProps): ReactNode;
+export {};
+//# sourceMappingURL=RoomPlanView.d.ts.map

package/lib/types/client/RoomPlanView.js

@@ -0,0 +1,88 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { RoomRequestIds } from './request-ids.js';
+import css from './RoomPlanView.module.css';
+/** Goal review is optional room chrome; ordinary chat never opens this form. */
+export function RoomPlanView({ plan, members, command, openSession, stopMember, t }) {
+    const [creating, setCreating] = useState(false);
+    const [objective, setObjective] = useState('');
+    const [execute, setExecute] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [reason, setReason] = useState('');
+    const [references, setReferences] = useState('');
+    const [artifacts, setArtifacts] = useState('');
+    const [reviewTask, setReviewTask] = useState(null);
+    const [goalControls, setGoalControls] = useState(false);
+    const [parallel, setParallel] = useState(plan?.budget.maxParallel ?? 2);
+    const [attempts, setAttempts] = useState(plan?.budget.maxAttempts ?? 12);
+    const [perTask, setPerTask] = useState(plan?.budget.maxAttemptsPerTask ?? 3);
+    const [minutes, setMinutes] = useState((plan?.budget.maxActiveMs ?? 1800000) / 60000);
+    useEffect(() => {
+        if (plan === undefined)
+            return;
+        setParallel(plan.budget.maxParallel);
+        setAttempts(plan.budget.maxAttempts);
+        setPerTask(plan.budget.maxAttemptsPerTask);
+        setMinutes(plan.budget.maxActiveMs / 60000);
+    }, [plan?.id, plan?.budget.maxParallel, plan?.budget.maxAttempts, plan?.budget.maxAttemptsPerTask, plan?.budget.maxActiveMs]);
+    const ids = useRef(new RoomRequestIds());
+    const revision = useRef(undefined);
+    const lines = (value) => value.split('\n').map(line => line.trim()).filter(Boolean);
+    const evidence = { summary: reason.trim(), references: lines(references), artifacts: lines(artifacts) };
+    const hasEvidence = evidence.summary !== '' && evidence.references.length > 0;
+    const status = (value) => t(`plan.status.${value}`);
+    const run = async (action) => {
+        if (busy)
+            return;
+        const requestId = ids.current.forInput('plan', JSON.stringify(action));
+        if (revision.current?.id !== requestId)
+            revision.current = { id: requestId, revision: plan?.revision ?? 0 };
+        setBusy(true);
+        setError(null);
+        try {
+            const result = await command(JSON.stringify({ ...action, ...action.action === 'create' ? { id: `goal-${requestId}` } : {}, requestId, expectedRevision: revision.current.revision }));
+            if (!result.ok) {
+                if (result.message.includes('revision changed'))
+                    ids.current.complete('plan', requestId);
+                setError(result.message);
+                return;
+            }
+            ids.current.complete('plan', requestId);
+            setReviewTask(null);
+            setReason('');
+            setReferences('');
+            setArtifacts('');
+            if (action.action === 'create') {
+                setCreating(false);
+                setObjective('');
+            }
+        }
+        catch {
+            setError(t('composer.error.generic'));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const budget = { maxParallel: parallel, maxAttempts: attempts, maxAttemptsPerTask: perTask, maxActiveMs: Math.round(minutes * 60000) };
+    const budgetFields = _jsxs(_Fragment, { children: [_jsx("p", { children: t('plan.budgetHelp') }), _jsxs("div", { className: css.budget, children: [_jsxs("label", { children: [t('plan.parallel'), _jsx("input", { type: "number", min: 1, max: 8, value: parallel, onChange: event => setParallel(Number(event.target.value)) })] }), _jsxs("label", { children: [t('plan.attempts'), _jsx("input", { type: "number", min: 1, max: 100, value: attempts, onChange: event => setAttempts(Number(event.target.value)) })] }), _jsxs("label", { children: [t('plan.perTask'), _jsx("input", { type: "number", min: 1, max: 10, value: perTask, onChange: event => setPerTask(Number(event.target.value)) })] }), _jsxs("label", { children: [t('plan.minutes'), _jsx("input", { type: "number", min: 1, max: 1440, value: minutes, onChange: event => setMinutes(Number(event.target.value)) })] })] })] });
+    const evidenceFields = _jsxs("div", { className: css.fields, children: [_jsxs("label", { children: [t('plan.reason'), _jsx("textarea", { value: reason, onChange: event => setReason(event.target.value) })] }), _jsxs("label", { children: [t('plan.references'), _jsx("textarea", { value: references, onChange: event => setReferences(event.target.value) })] }), _jsxs("label", { children: [t('plan.artifacts'), _jsx("textarea", { value: artifacts, onChange: event => setArtifacts(event.target.value) })] })] });
+    const list = (values) => _jsx("ul", { children: values.map((value, index) => _jsx("li", { children: /^https?:\/\//i.test(value)
+                ? _jsx("a", { href: value, target: "_blank", rel: "noreferrer", children: value }) : _jsx("span", { className: css.reference, children: value }) }, `${index}:${value}`)) });
+    const attemptView = (attempt) => _jsxs("details", { className: css.attempt, children: [_jsxs("summary", { children: [t('plan.attempt'), " ", attempt.number, " \u00B7 ", status(attempt.status)] }), _jsx("div", { className: css.reference, children: attempt.id }), attempt.error && _jsx("p", { role: "status", children: attempt.error }), attempt.submission && _jsxs(_Fragment, { children: [_jsx("p", { className: css.text, children: attempt.submission.summary }), list(attempt.submission.references), list(attempt.submission.artifacts)] }), attempt.review && _jsxs("p", { children: [attempt.review.by, " \u00B7 ", attempt.review.reason] }), attempt.retry && _jsxs("p", { children: [attempt.retry.by, " \u00B7 ", attempt.retry.reason] })] }, attempt.id);
+    const taskView = (task) => {
+        const owner = members.find(member => member.id === task.ownerMemberId);
+        const attempt = task.attempts.at(-1);
+        const uncertain = attempt?.status === 'uncertain';
+        const reviewable = attempt?.status === 'submitted' && attempt.settledAt !== undefined;
+        return _jsxs("details", { id: `room-plan-task-${task.id}`, className: task.parentId === undefined ? css.task : css.childTask, children: [_jsxs("summary", { children: [task.title, " \u00B7 ", task.kind === 'group' ? t('plan.group') : status(task.status), owner && ` · ${owner.name}`] }), _jsx("p", { className: css.text, children: task.instruction }), task.parentId && _jsxs("p", { children: [t('plan.parent'), ": ", plan?.tasks.find(parent => parent.id === task.parentId)?.title ?? task.parentId] }), task.criteria.length > 0 && _jsxs(_Fragment, { children: [_jsx("strong", { children: t('plan.criteria') }), list(task.criteria)] }), task.inputRefs.length > 0 && _jsxs(_Fragment, { children: [_jsx("strong", { children: t('plan.inputs') }), list(task.inputRefs)] }), task.artifactPaths.length > 0 && _jsxs(_Fragment, { children: [_jsx("strong", { children: t('plan.expectedArtifacts') }), list(task.artifactPaths)] }), task.dependsOn.length > 0 && _jsxs("div", { children: [t('plan.dependencies'), ": ", task.dependsOn.map(id => _jsx("a", { className: css.dependency, href: `#room-plan-task-${id}`, children: plan?.tasks.find(task => task.id === id)?.title ?? id }, id))] }), _jsxs("div", { className: css.actions, children: [owner?.childSessionId && openSession && _jsx("button", { type: "button", onClick: () => openSession(owner.childSessionId), children: t('plan.session') }), owner && stopMember && attempt?.startedAt !== undefined && attempt.settledAt === undefined && ['running', 'submitted'].includes(attempt.status) && _jsx("button", { type: "button", onClick: () => stopMember(owner.name), children: t('composer.stop') }), (uncertain || (!closed && (reviewable || task.status === 'failed'))) && _jsx("button", { type: "button", onClick: () => { setReviewTask(task.id); setGoalControls(false); setReason(''); setReferences(''); setArtifacts(''); }, children: t(uncertain ? 'plan.reconcile' : reviewable ? 'plan.review' : 'plan.retry') })] }), reviewTask === task.id && attempt && _jsxs("div", { className: css.review, children: [evidenceFields, _jsxs("div", { className: css.actions, children: [reviewable && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", disabled: busy || !hasEvidence, onClick: () => { void run({ action: 'review', taskId: task.id, attemptId: attempt.id, decision: 'accepted', reason, references: lines(references) }); }, children: t('plan.accept') }), _jsx("button", { type: "button", disabled: busy || !hasEvidence, onClick: () => { void run({ action: 'review', taskId: task.id, attemptId: attempt.id, decision: 'rework', reason, references: lines(references) }); }, children: t('plan.rework') })] }), uncertain && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", disabled: busy || !hasEvidence, onClick: () => { void run({ action: 'reconcile', taskId: task.id, attemptId: attempt.id, outcome: 'submitted', evidence }); }, children: t('plan.reconcileSubmitted') }), _jsx("button", { type: "button", disabled: busy || !hasEvidence, onClick: () => { void run({ action: 'reconcile', taskId: task.id, attemptId: attempt.id, outcome: 'failed', evidence }); }, children: t('plan.reconcileFailed') })] }), !uncertain && !reviewable && task.status === 'failed' && _jsx("button", { type: "button", disabled: busy || reason.trim() === '', onClick: () => { void run({ action: 'retry', taskId: task.id, reason }); }, children: t('plan.retry') })] })] }), task.attempts.map(attemptView)] }, task.id);
+    };
+    const leaf = plan?.tasks.filter(task => task.kind === 'task' && task.status !== 'cancelled') ?? [];
+    const accepted = leaf.filter(task => task.status === 'accepted').length;
+    const closed = plan !== undefined && ['completed', 'cancelled'].includes(plan.status);
+    const createForm = _jsxs("div", { className: css.fields, children: [_jsxs("label", { children: [t('plan.objective'), _jsx("textarea", { value: objective, onChange: event => setObjective(event.target.value) })] }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: execute, onChange: event => setExecute(event.target.checked) }), t('plan.execute')] }), budgetFields, _jsx("button", { type: "button", disabled: busy || objective.trim() === '', onClick: () => { void run({ action: 'create', objective: objective.trim(), mode: execute ? 'execute' : 'draft', budget }); }, children: t(execute ? 'plan.start' : 'plan.saveDraft') })] });
+    return _jsxs("details", { className: css.root, "data-testid": "room-plan", children: [_jsx("summary", { children: plan === undefined ? t('plan.create') : `${plan.objective} · ${status(plan.status)} · ${t('plan.acceptedCount', { done: accepted, total: leaf.length })}` }), error && _jsx("p", { role: "alert", children: error }), plan === undefined ? createForm : _jsxs(_Fragment, { children: [_jsxs("p", { children: [t('plan.revision'), ": ", plan.revision, " \u00B7 ", t('plan.attempts'), ": ", plan.tasks.reduce((count, task) => count + task.attempts.length, 0), "/", plan.budget.maxAttempts, " \u00B7 ", t('plan.parallel'), ": ", plan.budget.maxParallel] }), plan.reason && _jsx("p", { role: "status", children: plan.reason }), !closed && _jsx("div", { className: css.actions, children: plan.status === 'running' ? _jsx("button", { type: "button", disabled: busy, onClick: () => { void run({ action: 'pause', goalId: plan.id, reason: t('plan.humanPause') }); }, children: t('plan.pause') })
+                            : _jsx("button", { type: "button", disabled: busy, onClick: () => { void run({ action: 'resume' }); }, children: t('plan.resume') }) }), plan.stages.map(stage => _jsxs("details", { className: css.stage, open: true, children: [_jsx("summary", { children: stage.title }), plan.tasks.filter(task => task.stageId === stage.id).map(taskView)] }, stage.id)), plan.completion && _jsxs(_Fragment, { children: [_jsx("p", { children: plan.completion.summary }), list(plan.completion.references), list(plan.completion.artifacts)] }), !closed && _jsxs("details", { className: css.review, open: goalControls, onToggle: event => { const open = event.currentTarget.open; setGoalControls(open); if (open)
+                            setReviewTask(null); }, children: [_jsx("summary", { children: t('plan.goalControls') }), goalControls && _jsxs(_Fragment, { children: [budgetFields, _jsx("button", { type: "button", disabled: busy, onClick: () => { void run({ action: 'budget', budget }); }, children: t('plan.updateBudget') }), evidenceFields, _jsxs("div", { className: css.actions, children: [_jsx("button", { type: "button", disabled: busy || !hasEvidence || leaf.length === 0 || accepted !== leaf.length, onClick: () => { void run({ action: 'complete', evidence }); }, children: t('plan.complete') }), _jsx("button", { type: "button", disabled: busy || reason.trim() === '', onClick: () => { void run({ action: 'cancel', reason }); }, children: t('plan.cancel') })] })] })] }), closed && _jsx("button", { type: "button", onClick: () => setCreating(value => !value), children: t('plan.create') }), closed && creating && createForm] })] });
+}

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

@@ -0,0 +1,26 @@
+/**
+ * The room session's queue strip — a read-only echo of the official
+ * QueueDock (harness ui-conversation queue/QueueDock.tsx), whose
+ * `conversation.input.dock` seat hides with the InputBar fallback under the
+ * composer takeover. The queue itself is NOT re-implemented: a bare message
+ * sent while the main agent's turn runs goes through the official input
+ * machine's `submit()`, whose busy admission enqueues exactly as the
+ * official bar's does — this strip only makes the queued rows visible again
+ * (count header + previews; one item renders its preview directly).
+ * Read-only by design: per-row mutations (edit/remove/steer) stay with the
+ * hidden official dock.
+ */
+import { type ReactNode } from 'react';
+import type { RoomComposerProps } from './slots.ts';
+/** One queued message, pre-selected by the composer from the inbox projection (the legacy snapshot queue on 0.1.5). */
+export interface RoomQueueItem {
+    readonly id: string;
+    readonly preview: string;
+}
+/** Props: the still-queued rows plus the room locale seat. */
+export interface RoomQueueStripProps {
+    readonly items: readonly RoomQueueItem[];
+    readonly t: RoomComposerProps['t'];
+}
+export declare function RoomQueueStrip({ items, t }: RoomQueueStripProps): ReactNode;
+//# sourceMappingURL=RoomQueueStrip.d.ts.map

package/lib/types/client/RoomQueueStrip.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The room session's queue strip — a read-only echo of the official
+ * QueueDock (harness ui-conversation queue/QueueDock.tsx), whose
+ * `conversation.input.dock` seat hides with the InputBar fallback under the
+ * composer takeover. The queue itself is NOT re-implemented: a bare message
+ * sent while the main agent's turn runs goes through the official input
+ * machine's `submit()`, whose busy admission enqueues exactly as the
+ * official bar's does — this strip only makes the queued rows visible again
+ * (count header + previews; one item renders its preview directly).
+ * Read-only by design: per-row mutations (edit/remove/steer) stay with the
+ * hidden official dock.
+ */
+import { useId, useState } from 'react';
+import { IconChevronDownOutlineMedium, IconChevronUpOutlineMedium, IconQueueOutlineMedium } from './icons.js';
+import css from './RoomQueueStrip.module.css';
+export function RoomQueueStrip({ items, t }) {
+    const [collapsed, setCollapsed] = useState(true);
+    const listId = useId();
+    if (items.length === 0)
+        return null;
+    // Single-item strip: no count header, the row itself carries the glyph
+    // (the official QueueDock's single-item posture).
+    if (items.length === 1) {
+        return (_jsx("div", { className: css.root, "data-testid": "room-queue-strip", children: _jsxs("div", { className: css.header, role: "status", children: [_jsx("span", { className: css.lead, "aria-hidden": true, children: _jsx(IconQueueOutlineMedium, {}) }), _jsx("span", { className: css.preview, children: items[0].preview })] }) }));
+    }
+    return (_jsxs("div", { className: css.root, "data-testid": "room-queue-strip", children: [_jsxs("button", { type: "button", className: css.header, "aria-controls": listId, "aria-expanded": !collapsed, onClick: () => { setCollapsed(v => !v); }, children: [_jsx("span", { className: css.lead, "aria-hidden": true, children: _jsx(IconQueueOutlineMedium, {}) }), _jsx("span", { className: css.count, children: t('queue.count', { n: items.length }) }), _jsx("span", { className: css.chevron, "aria-hidden": true, children: collapsed ? _jsx(IconChevronUpOutlineMedium, {}) : _jsx(IconChevronDownOutlineMedium, {}) })] }), !collapsed && (_jsx("ul", { id: listId, className: css.list, children: items.map(item => (_jsx("li", { className: css.row, children: _jsx("span", { className: css.preview, children: item.preview }) }, item.id))) }))] }));
+}

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

@@ -0,0 +1,11 @@
+import type { RoomDelivery, RoomMember } from '../types.ts';
+import type { RoomComposerProps } from './slots.ts';
+/** Ordinary chat needs the same explicit recovery boundary as formal goals. */
+export declare function RoomRecoveryView({ deliveries, members, reconcile, openSession, t }: {
+    deliveries: readonly RoomDelivery[];
+    members: readonly RoomMember[];
+    reconcile: NonNullable<RoomComposerProps['reconcileDelivery']>;
+    openSession: RoomComposerProps['openPlanSession'];
+    t: RoomComposerProps['t'];
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=RoomRecoveryView.d.ts.map

package/lib/types/client/RoomRecoveryView.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import css from './RoomPlanView.module.css';
+/** Ordinary chat needs the same explicit recovery boundary as formal goals. */
+export function RoomRecoveryView({ deliveries, members, reconcile, openSession, t }) {
+    const [selected, setSelected] = useState(null);
+    const [evidence, setEvidence] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const rows = deliveries.filter(row => row.status === 'uncertain' && row.plan?.taskId === undefined);
+    if (rows.length === 0)
+        return null;
+    const resolve = async (id, outcome) => {
+        if (busy || !evidence.trim())
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            const result = await reconcile(id, outcome, evidence.trim());
+            if (result.ok) {
+                setSelected(null);
+                setEvidence('');
+            }
+            else
+                setError(result.message);
+        }
+        catch {
+            setError(t('composer.error.generic'));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return _jsxs("details", { className: css.root, "data-testid": "room-recovery", open: true, children: [_jsx("summary", { children: t('recovery.title') }), _jsx("p", { children: t('recovery.help') }), error && _jsx("p", { role: "alert", children: error }), rows.map(row => {
+                const member = members.find(member => member.id === row.memberId);
+                return _jsxs("div", { className: css.task, children: [_jsx("strong", { children: member?.name ?? row.memberId }), _jsx("p", { className: css.text, children: row.text }), _jsxs("div", { className: css.actions, children: [member?.childSessionId && openSession && _jsx("button", { type: "button", onClick: () => openSession(member.childSessionId), children: t('plan.session') }), _jsx("button", { type: "button", disabled: busy, onClick: () => { setSelected(row.id); setEvidence(''); setError(null); }, children: t('plan.reconcile') })] }), selected === row.id && _jsxs("div", { className: css.fields, children: [_jsxs("label", { children: [t('plan.reason'), _jsx("textarea", { value: evidence, onChange: event => setEvidence(event.target.value) })] }), _jsxs("div", { className: css.actions, children: [_jsx("button", { type: "button", disabled: busy || !evidence.trim(), onClick: () => { void resolve(row.id, 'done'); }, children: t('recovery.done') }), _jsx("button", { type: "button", disabled: busy || !evidence.trim(), onClick: () => { void resolve(row.id, 'cancelled'); }, children: t('recovery.cancelled') })] })] })] }, row.id);
+            })] });
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Relay gate node ('room-relay' keyed renderer): a member-to-member
+ * notification waiting at the human gate — a dim RoomEventView-register row
+ * (`⇢ ada → bill: 摘要…`) plus [确认派发] [忽略] while pending. Resolutions
+ * fold in place through the journal (the Definition updates the row), so a
+ * confirmed/dismissed/sent relay reads as a plain dim line with its outcome.
+ */
+import type { ReactNode } from 'react';
+import type { RoomRelayViewProps } from './slots.ts';
+/** The relay gate row. */
+export declare function RoomRelayView({ node, confirmRelay, dismissRelay, t }: RoomRelayViewProps): ReactNode;
+//# sourceMappingURL=RoomRelayView.d.ts.map

package/lib/types/client/RoomRelayView.js

@@ -0,0 +1,20 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import css from './RoomRelayView.module.css';
+/** The relay gate row. */
+export function RoomRelayView({ node, confirmRelay, dismissRelay, t }) {
+    const data = node.data;
+    let suffix = '';
+    switch (data.state) {
+        case 'confirmed':
+            suffix = t('relay.state.confirmed');
+            break;
+        case 'dismissed':
+            suffix = t('relay.state.dismissed');
+            break;
+        case 'sent':
+            suffix = t('relay.state.sent');
+            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') })] }))] }));
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Member run node ('room-run' keyed renderer): a ToolRow-isomorphic 24px
+ * line — StateDot +「ada 正在工作… · 12s」+ the running sweep (with a
+ * prefers-reduced-motion fallback). The WHOLE row jumps into the member's
+ * child session (looked up from the room store's roster — run events carry
+ * 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.
+ */
+import { type ReactNode } from 'react';
+import type { RoomRunViewProps } from './slots.ts';
+/** The member run row. */
+export declare function RoomRunView({ node, sessionId, roomStore, openSession, cancelMember, renderMemberOutput, t }: RoomRunViewProps): ReactNode;
+//# sourceMappingURL=RoomRunView.d.ts.map

package/lib/types/client/RoomRunView.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Member run node ('room-run' keyed renderer): a ToolRow-isomorphic 24px
+ * line — StateDot +「ada 正在工作… · 12s」+ the running sweep (with a
+ * prefers-reduced-motion fallback). The WHOLE row jumps into the member's
+ * child session (looked up from the room store's roster — run events carry
+ * 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.
+ */
+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 css from './RoomRunView.module.css';
+/** The member run row. */
+export function RoomRunView({ node, sessionId, roomStore, openSession, cancelMember, renderMemberOutput, t }) {
+    const state = useSyncExternalStore(roomStore.subscribe, () => roomStore.getCached(sessionId));
+    const recovered = state?.runs.find(run => run.member === node.data.member && run.startedAt === node.data.startedAt);
+    const data = node.data.state === 'running' && recovered !== undefined ? { ...node.data, ...recovered } : node.data;
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (data.state !== 'running')
+            return undefined;
+        const timer = setInterval(() => { setNow(Date.now()); }, 1000);
+        return () => { clearInterval(timer); };
+    }, [data.state]);
+    // The run events carry no delegation handle; the roster record does.
+    const childSessionId = state?.members.find(entry => entry.name === data.member)?.childSessionId;
+    // The Definition hides done/cancelled; guard the same states here.
+    if (data.state === 'done' || data.state === 'cancelled')
+        return null;
+    const failed = data.state === 'failed';
+    const elapsed = failed ? data.elapsedMs : Math.max(0, now - data.startedAt);
+    const jump = () => {
+        if (childSessionId !== undefined)
+            openSession(childSessionId);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            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)] }));
+}

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

@@ -0,0 +1,18 @@
+/**
+ * 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
+ * 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
+ * roster/blackboard semantics) and TPS/TTFT (a CLI run has no token stream).
+ */
+import { type ReactNode } from 'react';
+import type { RoomSpeechViewProps } from './slots.ts';
+/** The member speech row. */
+export declare function RoomSpeechView({ node, sessionId, roomStore, openSession, t }: RoomSpeechViewProps): ReactNode;
+//# sourceMappingURL=RoomSpeechView.d.ts.map

package/lib/types/client/RoomSpeechView.js

@@ -0,0 +1,62 @@
+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
+ * 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
+ * roster/blackboard semantics) and TPS/TTFT (a CLI run has no token stream).
+ */
+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 { memberColor } from './member-color.js';
+import { formatClock, formatDurationMs } from './format.js';
+import css from './RoomSpeechView.module.css';
+/**
+ * Speeches longer than this start collapsed. Chars, not rendered lines: a
+ * stable threshold that needs no layout measurement — roughly ten rendered
+ * lines of prose.
+ */
+const COLLAPSE_CHARS = 600;
+/** Localized Markdown chrome (code-fence copy buttons, footnotes) over the room namespace. */
+function markdownLabels(t) {
+    return {
+        code: { copyLabel: t('action.copy'), copiedLabel: t('action.copied') },
+        footnotes: t('markdown.footnotes'),
+    };
+}
+/** The member speech row. */
+export function RoomSpeechView({ node, sessionId, roomStore, openSession, t }) {
+    const data = node.data;
+    const [copied, setCopied] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+    const copyTimer = useRef(null);
+    useEffect(() => () => {
+        if (copyTimer.current !== null)
+            clearTimeout(copyTimer.current);
+    }, []);
+    const state = useSyncExternalStore(roomStore.subscribe, () => roomStore.getCached(sessionId));
+    const member = state?.members.find(entry => entry.name === data.member);
+    const provider = member === undefined
+        ? undefined
+        : member.kind === 'main-agent' ? t('member.kind.main') : member.provider;
+    const child = data.childSessionId;
+    const collapsible = data.text.length > COLLAPSE_CHARS;
+    const clamped = collapsible && !expanded;
+    const labels = useMemo(() => markdownLabels(t), [t]);
+    const copy = () => {
+        void writeClipboard(data.text).then((ok) => {
+            if (!ok)
+                return;
+            setCopied(true);
+            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) })] })] }));
+}

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

@@ -0,0 +1,61 @@
+/**
+ * The room session's stats row — a RoomComposer footer replicating the
+ * official StatsLine (harness ui-conversation chat/StatsLine.tsx), which
+ * lives inside the InputBar fallback the composer takeover hides. Every
+ * figure rides the durable whole-log projections through the framework's
+ * `useProjection` seat: `sessionStats` for turn/step counts and wall times,
+ * `tokenUsage` for billing. A key with no served value drops its groups;
+ * with neither projection served the row does not render at all (silent
+ * 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.
+ */
+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';
+/**
+ * Compact token count: 517 / 12.2K / 517K / 1.2M (one decimal under three
+ * digits). Copied from the official StatsLine.
+ * @param n - token count.
+ * @returns display string.
+ */
+export declare function formatTokens(n: number): string;
+/**
+ * Compact duration: 45.2s under a minute, 2m42s from there on. Copied from
+ * the official StatsLine.
+ * @param ms - duration in milliseconds.
+ * @returns display string.
+ */
+export declare function formatDuration(ms: number): string;
+/**
+ * Throughput figure: integer at 10+, one decimal below. Copied from the
+ * official message-chrome formatTokensPerSecond.
+ * @param tps - tokens per second.
+ * @returns display number without unit.
+ */
+export declare function formatTokensPerSecond(tps: number): string;
+/**
+ * Sum the three disjoint prompt-side billing buckets. Copied from the
+ * official StatsLine.
+ * @param usage - the session's token-usage projection value.
+ * @returns billed input tokens.
+ */
+export declare function billedInputTokens(usage: TokenUsageProjection): number;
+/**
+ * Cache-hit share of prompt-side input over the whole durable log. Copied
+ * from the official StatsLine.
+ * @param usage - the session's token-usage projection value.
+ * @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. */
+export interface RoomStatsLineProps {
+    readonly useProjection: UseProjection;
+    readonly t: RoomComposerProps['t'];
+}
+export declare const RoomStatsLine: import("react").MemoExoticComponent<({ useProjection, t }: RoomStatsLineProps) => ReactNode>;
+//# sourceMappingURL=RoomStatsLine.d.ts.map