@khorsheed/dsh-room 0.1.0

package/lib/types/client/RoomComposer.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Room composer: the `conversation.composer` chain takeover for room
+ * sessions. Replaces the official input bar while the selector holds (the
+ * official bar is display:none underneath), so it owns the whole interaction:
+ * a textarea (Enter sends, Shift+Enter newlines), a send button, and the
+ * @-completion menu listing ONLY existing roster members (pure addressing —
+ * invitation lives in the members tab). Addressing is the union of two
+ * channels: leading `@name` tokens (the host's parseMentions grammar,
+ * stripped from the dispatched text) and the mention menu's picks (a pick
+ * records explicit addressing wherever the `@name` sits in the sentence —
+ * the text is dispatched verbatim, the picks ride the postMessage request's
+ * `targets`). Hand-typed mid-sentence mentions without a menu pick stay
+ * prose: they address nobody. A bare message (neither channel) is NOT room
+ * business: it is released to the official submit
+ * path — the takeover writes the text into the session's official input
+ * machine (`inputActions.setDraft` + `inputActions.submit()`, the same entry
+ * the InputBar's Enter key drives), so it becomes an ordinary main-agent
+ * turn; sent while that turn runs, the machine's busy admission enqueues it
+ * exactly as the official bar's does. A structured rejection (unknown
+ * targets) shows as an inline error line.
+ *
+ * Taking over the chain inherits the official bar's environment duties (the
+ * member-channel rule, local-agent 84a2ed0): a pending interaction yields (the
+ * selector declines while `owner.pendingInteraction` is set, so the priority-1
+ * ApprovalPanel elects), and everything the hidden fallback tree carried is
+ * re-homed INTO this component — the main agent's turn Stop (the send circle
+ * swaps while `running`), the dock capsules (RoomDockCapsules), the main
+ * agent's todo strip (RoomTodoStrip, the `todos` projection), the queued-
+ * messages strip (RoomQueueStrip, the `inbox` projection — the 0.1.5 session
+ * snapshot's queue on the old line), the session
+ * stats row (RoomStatsLine below the card), and the main agent's model seat
+ * (RoomModelPicker over the official per-session ModelDirectory — the seat
+ * itself is single-owner and cannot be re-hosted, so the picker is our own
+ * trigger on the same directory; a host without ui-model-selection gets no
+ * picker).
+ */
+import { coordinatorMember } from '../journal.js';
+import { useRef, useState, useSyncExternalStore, } from 'react';
+import { memberColor } from './member-color.js';
+import { RoomStatsLine } from './RoomStatsLine.js';
+import { RoomDockCapsules } from './RoomDockCapsules.js';
+import { RoomTodoStrip } from './RoomTodoStrip.js';
+import { RoomPlanView } from './RoomPlanView.js';
+import { RoomQueueStrip } from './RoomQueueStrip.js';
+import { RoomRecoveryView } from './RoomRecoveryView.js';
+import { RoomModelPicker } from './RoomModelPicker.js';
+import css from './RoomComposer.module.css';
+const EMPTY_LEGACY_QUEUE = [];
+const QUEUE_PREVIEW_CHARS = 200;
+/** The queue row's flat preview: attachment blocks dropped, the rest joined and whitespace-collapsed, 200 chars max (the official QueueDock's rule). */
+function previewOf(content) {
+    const flat = content
+        .filter(block => block.type !== 'image' && block.type !== 'file')
+        .map(block => (block.type === 'text' ? block.text : `[${block.type}]`))
+        .join(' ').replace(/\s+/g, ' ').trim();
+    const chars = Array.from(flat);
+    return chars.length > QUEUE_PREVIEW_CHARS ? `${chars.slice(0, QUEUE_PREVIEW_CHARS).join('')}…` : flat;
+}
+/**
+ * Detect an active mention being typed: the text before the caret ends with
+ * `@partial` whose `@` follows the line start or whitespace — a mid-sentence
+ * mention completes as happily as a leading one. `\S` covers CJK member
+ * names (K酱). A menu pick of one of these candidates is explicit addressing
+ * even though the host's parseMentions reads only leading tokens.
+ */
+function detectMention(draft, caret) {
+    const head = draft.slice(0, caret);
+    const match = /(?:^|\s)@(\S*)$/.exec(head);
+    if (match === null)
+        return null;
+    return { query: match[1], start: caret - match[1].length - 1 };
+}
+/**
+ * Pure composer-chain selector: elect exactly the cached-room sessions.
+ * Pending interactions (questions/approvals) belong to the official
+ * ApprovalPanel — a chain entry at priority 1. Election runs ascending, so
+ * this -10 entry would shadow it: decline and let the interaction render
+ * (the member-channel rule, local-agent 84a2ed0). A cache miss declines too —
+ * the freshly opened room shows the official bar for the first pull's
+ * duration (accepted, see room-store.ts).
+ * @param owner - the composer chain currency dispatched by ConversationRoot.
+ * @param isRoomCached - the room store's cache probe (injected: the selector
+ *   must stay a pure function of the owner props plus stable state reads).
+ * @returns the room match, or null to pass the election down the chain.
+ */
+export function selectRoomComposer(owner, isRoomCached) {
+    if (owner.pendingInteraction !== undefined)
+        return null;
+    const sessionId = owner.sessionId ?? owner.session?.sessionId;
+    return sessionId !== undefined && isRoomCached(sessionId) ? { room: true } : null;
+}
+/** The room composer takeover component. */
+export function RoomComposer({ sessionId, roomStore, submit, stop, addTask, closeTask, setGoal, planCommand, openPlanSession, reconcileDelivery, roomCwd, invite, listProviders, listNames, browseDirectory, modelSurface, renderHarnessModelPicker, roomChrome, modelDirectory, renderMemberConfiguration, renderMemberInbox, stopMember, useSession, useProjection, t, }) {
+    const state = useSyncExternalStore(roomStore.subscribe, () => roomStore.getCached(sessionId));
+    const [draft, setDraft] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [mention, setMention] = useState(null);
+    /** Menu-picked addressees: a pick is explicit addressing wherever the
+        `@name` sits (see the module header); cleared with the draft on send. */
+    const [picked, setPicked] = useState([]);
+    const areaRef = useRef(null);
+    const members = state?.members ?? [];
+    const candidates = mention === null
+        ? []
+        : members.filter(member => member.name.startsWith(mention.query));
+    // The inherited environment state: the room's own main-agent turn flag
+    // (drives the Send/Stop swap) and the still-queued inbox rows (the official
+    // queue dock's data, re-homed as a read-only strip). alpha.2 moved the
+    // queue off the session snapshot into the `inbox` projection; 0.1.5 serves
+    // no `inbox` key — the undefined read falls back to the legacy snapshot
+    // queue.
+    const nativeRunning = useSession(snapshot => snapshot.running) ?? false;
+    const coordinator = state === undefined ? undefined : coordinatorMember(state);
+    const external = coordinator?.kind === 'cli';
+    const running = external ? state?.runs.some(run => run.member === coordinator.name && run.state === 'running') ?? false : nativeRunning;
+    const legacyQueue = useSession(snapshot => snapshot.queue)
+        ?? EMPTY_LEGACY_QUEUE;
+    const inbox = (useProjection === undefined ? undefined : useProjection('inbox'));
+    const nextTurn = inbox?.['next-turn'];
+    const queued = nextTurn === undefined
+        ? legacyQueue
+            .filter(row => row.placement === 'queued')
+            .map(row => ({ id: String(row.id), preview: row.preview }))
+        : nextTurn.map(row => ({ id: String(row.id), preview: previewOf(row.content) }));
+    const resize = (area) => {
+        area.style.height = 'auto';
+        area.style.height = `${area.scrollHeight}px`;
+    };
+    const onChange = (event) => {
+        const value = event.target.value;
+        setDraft(value);
+        resize(event.target);
+        const active = detectMention(value, event.target.selectionStart ?? value.length);
+        setMention(active === null ? null : { ...active, index: 0 });
+    };
+    const applyMention = (name) => {
+        if (mention === null)
+            return;
+        const caret = areaRef.current?.selectionStart ?? draft.length;
+        const next = `${draft.slice(0, mention.start)}@${name} ${draft.slice(caret)}`;
+        setDraft(next);
+        setMention(null);
+        setPicked(picked.includes(name) ? picked : [...picked, name]);
+    };
+    const send = async () => {
+        const text = draft.trim();
+        if (text === '' || busy)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            // Two-argument form while nothing was menu-picked: the injected face's
+            // third parameter is the pick channel only.
+            const outcome = picked.length > 0
+                ? await submit(sessionId, text, picked)
+                : await submit(sessionId, text);
+            if (!outcome.ok) {
+                setError(outcome.message);
+                return;
+            }
+            setDraft('');
+            setMention(null);
+            setPicked([]);
+        }
+        catch {
+            setError(t('composer.error.generic'));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const onKeyDown = (event) => {
+        if (mention !== null) {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                setMention(null);
+                return;
+            }
+            if (candidates.length > 0) {
+                if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    setMention({ ...mention, index: (mention.index + 1) % candidates.length });
+                    return;
+                }
+                if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    setMention({ ...mention, index: (mention.index + candidates.length - 1) % candidates.length });
+                    return;
+                }
+                if (event.key === 'Enter' || event.key === 'Tab') {
+                    event.preventDefault();
+                    applyMention(candidates[mention.index].name);
+                    return;
+                }
+            }
+        }
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            void send();
+        }
+    };
+    return (_jsxs("div", { className: css.root, children: [_jsxs("div", { className: css.dock, children: [!external && useProjection !== undefined && _jsx(RoomTodoStrip, { useProjection: useProjection, t: t }), _jsx(RoomDockCapsules, { sessionId: sessionId, roomStore: roomStore, addTask: addTask, closeTask: closeTask, setGoal: setGoal, formalPlans: planCommand !== undefined, roomCwd: roomCwd, invite: invite, listProviders: listProviders, listNames: listNames, browseDirectory: browseDirectory, modelSurface: modelSurface, renderHarnessModelPicker: renderHarnessModelPicker, roomChrome: roomChrome, t: t }), state !== undefined && planCommand !== undefined && _jsx(RoomPlanView, { plan: state.plan, members: state.members, command: planCommand, openSession: openPlanSession, stopMember: stopMember, t: t }), state !== undefined && reconcileDelivery !== undefined && _jsx(RoomRecoveryView, { deliveries: state.deliveries ?? [], members: state.members, reconcile: reconcileDelivery, openSession: openPlanSession, t: t }), _jsx(RoomQueueStrip, { items: [...external ? [] : queued, ...(state?.deliveries ?? []).filter(row => row.memberId === coordinator?.id && (row.status === 'queued' || row.status === 'uncertain')).map(row => ({ id: row.id, preview: row.status === 'uncertain' ? `${row.error ?? 'Outcome unknown'}: ${row.text}` : row.text }))], t: t })] }), error !== null && _jsx("div", { className: css.error, role: "alert", children: error }), external && coordinator.childSessionId !== undefined && renderMemberInbox?.(coordinator.childSessionId), _jsxs("div", { className: css.card, children: [_jsxs("div", { className: css.coordinator, children: [t('coordinator.label'), " \u00B7 ", coordinator?.name ?? 'dsh', external ? ` · ${coordinator.provider}` : ' · DSH'] }), mention !== null && candidates.length > 0 && (_jsx("ul", { className: css.menu, role: "listbox", "aria-label": "members", children: candidates.map((member, index) => (_jsx("li", { children: _jsxs("button", { type: "button", role: "option", "aria-selected": index === mention.index, className: index === mention.index ? css.itemActive : css.item, onMouseDown: (event) => {
+                                    event.preventDefault();
+                                    applyMention(member.name);
+                                }, children: [_jsx("span", { className: css.dot, style: { background: memberColor(member.name) }, "aria-hidden": true }), _jsx("span", { children: member.name }), _jsx("span", { className: css.hint, children: member.kind === 'main-agent' ? t('member.kind.main') : member.provider ?? '' })] }) }, member.name))) })), _jsx("textarea", { ref: areaRef, className: css.input, rows: 2, value: draft, placeholder: t('composer.placeholder'), onChange: onChange, onKeyDown: onKeyDown }), _jsxs("div", { className: css.row, children: [external && coordinator.childSessionId !== undefined && renderMemberConfiguration?.(coordinator.childSessionId), !external && modelDirectory !== undefined && (_jsx(RoomModelPicker, { directory: modelDirectory, onError: setError, t: t })), running && (_jsx("button", { type: "button", className: css.primary, "aria-label": t('composer.stop'), onMouseDown: (event) => { event.preventDefault(); }, onClick: () => { if (external)
+                                    stopMember?.(coordinator.name);
+                                else
+                                    stop(); }, children: _jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": true, children: _jsx("rect", { x: "3", y: "3", width: "10", height: "10", rx: "3", fill: "currentColor" }) }) })), _jsx("button", { type: "button", className: css.primary, "aria-label": t('composer.send'), disabled: busy || draft.trim() === '', onMouseDown: (event) => { event.preventDefault(); }, onClick: () => { void send(); }, children: _jsx("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": true, children: _jsx("path", { d: "M8.3125 0.980183C8.66767 1.0531 8.97902 1.20418 9.2627 1.43233C9.48724 1.61297 9.73029 1.85793 9.97949 2.10714L14.707 6.83468L13.293 8.24874L9 3.95577V15.0417H7V3.95577L2.70703 8.24874L1.29297 6.83468L6.02051 2.10714C6.26971 1.85793 6.51277 1.61297 6.7373 1.43233C6.97662 1.23986 7.28445 1.04402 7.6875 0.980183C7.8973 0.947006 8.1031 0.95516 8.3125 0.980183Z", fill: "currentColor" }) }) })] })] }), !external && useProjection !== undefined && _jsx(RoomStatsLine, { useProjection: useProjection, t: t })] }));
+}

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

@@ -0,0 +1,64 @@
+/**
+ * The room dock capsules, rendered by the RoomComposer itself above the input
+ * card — the seat of the old task-board strip (NOT a `conversation.input.dock`
+ * entry: that slot lives inside the official composer fallback, which the
+ * room's composer takeover hides). One collapsed row of two capsules plus a
+ * quick-add button:
+ *
+ * ```
+ * [◔33% 插件API v2上线]  [☑ 当前进度 1/3 · ●ada 在做]  ＋
+ * ```
+ *
+ * The row is ANCHORED just above the input card: an expanded panel renders
+ * above the capsule row (top-to-bottom: panel → capsules → input card) and
+ * grows upward only, so folding/unfolding never shifts the row under the
+ * user's pointer.
+ *
+ * The GOAL capsule's only visual focus is the progress ring: an SVG circle
+ * (tertiary track + business-primary progress arc) followed by the percent
+ * and the truncated goal text; without a goal it renders the 「＋ 设定目标」
+ * guide state (no ring). It expands into the goal card: the full text with an
+ * inline [编辑], a progress bar with the done/total fraction, and the recent
+ * advance records (who finished what, relative time).
+ *
+ * The TASK capsule leads with the checklist icon (IconChecklistOutlineMedium from
+ * the official primitives — never a Unicode glyph), then the open-task count
+ * and the members currently running (color dot + name). It expands into the
+ * Linear-style task panel: a member filter chip row (color-dot capsules, the
+ * selected one takes a tinted fill of the member color — no outline) with the
+ * ＋添加 trigger at its right end, small-caps tertiary group headers, and task
+ * rows (colored status icon — business-primary half-ring for in_progress,
+ * tertiary empty ring for pending, filled check for done, filled error × for
+ * failed — + title + member chip + right-aligned tertiary status/relative
+ * time + a row-end [完成]; a failed row's action is [关闭], dismissing to
+ * cancelled — the run did not finish, so it never closes done).
+ * Closing a task plays a restrained completion beat (the check pops, the
+ * title's strike draws in, <300ms, reduced-motion safe) — the row remounts on
+ * a status change (`key = id:status`) so the CSS animation replays. A blocked
+ * row greys with a 「等 ada」 tag until its `blockedBy` member has no open
+ * task left (display only: nothing auto-dispatches). The trailing ＋ opens
+ * the panel with the add form already expanded (member select + title +
+ * optional "等谁"). Panels close on a second capsule click or a click
+ * outside; no overlay.
+ *
+ * Visual layer: the capsules ride the official chip register (28px, r24,
+ * interactive hover fill, 13/20/500 label) with a visible outline (the
+ * InputBar card's `l2-darkmode-thin` pair, firming to `l3` on hover/expand);
+ * the expanded cards are the
+ * official Menu surface (`--dsw-specific-menu`, r12, inverted hairline,
+ * shadow-lv3); the task capsule sweeps a restrained glare band while tasks
+ * run (the ToolRow pattern, reduced-motion safe). Every token reference
+ * carries the light-theme literal as fallback; no divider lines anywhere.
+ *
+ * FRESH-ROOM STATE: a room with neither a goal nor any task (membership does
+ * not count — the main agent is always there) has no use for the guide/task
+ * pair, which would be pure noise. The collapsed row then renders a single
+ * 「＋ 邀请成员」 capsule (same chip family) that opens the invite dialog
+ * straight from the dock. The moment a goal is set or a task exists the pair
+ * returns, and the invite entry retires — the members tab already carries it.
+ */
+import { type ReactNode } from 'react';
+import type { RoomDockCapsulesProps } from './slots.ts';
+/** The dock capsules (goal + tasks) with their expanded cards. */
+export declare function RoomDockCapsules({ sessionId, roomStore, addTask, closeTask, setGoal, formalPlans, roomCwd, invite, listProviders, browseDirectory, modelSurface, renderHarnessModelPicker, t, }: RoomDockCapsulesProps): ReactNode;
+//# sourceMappingURL=RoomDockCapsules.d.ts.map

package/lib/types/client/RoomDockCapsules.js

@@ -0,0 +1,277 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The room dock capsules, rendered by the RoomComposer itself above the input
+ * card — the seat of the old task-board strip (NOT a `conversation.input.dock`
+ * entry: that slot lives inside the official composer fallback, which the
+ * room's composer takeover hides). One collapsed row of two capsules plus a
+ * quick-add button:
+ *
+ * ```
+ * [◔33% 插件API v2上线]  [☑ 当前进度 1/3 · ●ada 在做]  ＋
+ * ```
+ *
+ * The row is ANCHORED just above the input card: an expanded panel renders
+ * above the capsule row (top-to-bottom: panel → capsules → input card) and
+ * grows upward only, so folding/unfolding never shifts the row under the
+ * user's pointer.
+ *
+ * The GOAL capsule's only visual focus is the progress ring: an SVG circle
+ * (tertiary track + business-primary progress arc) followed by the percent
+ * and the truncated goal text; without a goal it renders the 「＋ 设定目标」
+ * guide state (no ring). It expands into the goal card: the full text with an
+ * inline [编辑], a progress bar with the done/total fraction, and the recent
+ * advance records (who finished what, relative time).
+ *
+ * The TASK capsule leads with the checklist icon (IconChecklistOutlineMedium from
+ * the official primitives — never a Unicode glyph), then the open-task count
+ * and the members currently running (color dot + name). It expands into the
+ * Linear-style task panel: a member filter chip row (color-dot capsules, the
+ * selected one takes a tinted fill of the member color — no outline) with the
+ * ＋添加 trigger at its right end, small-caps tertiary group headers, and task
+ * rows (colored status icon — business-primary half-ring for in_progress,
+ * tertiary empty ring for pending, filled check for done, filled error × for
+ * failed — + title + member chip + right-aligned tertiary status/relative
+ * time + a row-end [完成]; a failed row's action is [关闭], dismissing to
+ * cancelled — the run did not finish, so it never closes done).
+ * Closing a task plays a restrained completion beat (the check pops, the
+ * title's strike draws in, <300ms, reduced-motion safe) — the row remounts on
+ * a status change (`key = id:status`) so the CSS animation replays. A blocked
+ * row greys with a 「等 ada」 tag until its `blockedBy` member has no open
+ * task left (display only: nothing auto-dispatches). The trailing ＋ opens
+ * the panel with the add form already expanded (member select + title +
+ * optional "等谁"). Panels close on a second capsule click or a click
+ * outside; no overlay.
+ *
+ * Visual layer: the capsules ride the official chip register (28px, r24,
+ * interactive hover fill, 13/20/500 label) with a visible outline (the
+ * InputBar card's `l2-darkmode-thin` pair, firming to `l3` on hover/expand);
+ * the expanded cards are the
+ * official Menu surface (`--dsw-specific-menu`, r12, inverted hairline,
+ * shadow-lv3); the task capsule sweeps a restrained glare band while tasks
+ * run (the ToolRow pattern, reduced-motion safe). Every token reference
+ * carries the light-theme literal as fallback; no divider lines anywhere.
+ *
+ * FRESH-ROOM STATE: a room with neither a goal nor any task (membership does
+ * not count — the main agent is always there) has no use for the guide/task
+ * pair, which would be pure noise. The collapsed row then renders a single
+ * 「＋ 邀请成员」 capsule (same chip family) that opens the invite dialog
+ * straight from the dock. The moment a goal is set or a task exists the pair
+ * returns, and the invite entry retires — the members tab already carries it.
+ */
+import { useEffect, useRef, useState, useSyncExternalStore, } from 'react';
+import { IconChecklistOutlineMedium } from './icons.js';
+import { taskProgress } from '../journal.js';
+import { formatRelativeTime } from './format.js';
+import { memberColor } from './member-color.js';
+import { InviteDialog } from './InviteDialog.js';
+import css from './RoomDockCapsules.module.css';
+/** Glyph tooltip text per status. */
+function statusLabel(status, t) {
+    switch (status) {
+        case 'pending': return t('tasks.status.pending');
+        case 'in_progress': return t('tasks.status.in_progress');
+        case 'done': return t('tasks.status.done');
+        case 'cancelled': return t('tasks.status.cancelled');
+        case 'failed': return t('tasks.status.failed');
+    }
+}
+/* The Linear-style status icons: colored, 14px, centered in the 16px cell. */
+/** Done: filled success circle, check cut in the card surface tone. */
+function DoneGlyph() {
+    return (_jsxs("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", className: css.glyphDone, children: [_jsx("circle", { cx: "7", cy: "7", r: "7", fill: "currentColor" }), _jsx("path", { d: "M4.2 7.3L6.2 9.3L9.8 5.2", stroke: "var(--dsw-specific-menu, var(--dsw-alias-bg-base, #ffffff))", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+/** In-progress: business-primary half ring; CSS spins the svg. */
+function ProgressGlyph() {
+    return (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", className: css.glyphProgress, children: _jsx("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeDasharray: `${Math.PI * 5.5} ${2 * Math.PI * 5.5}` }) }));
+}
+/** Pending: the tertiary empty ring. */
+function PendingGlyph() {
+    return (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", className: css.glyphPending, children: _jsx("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeWidth: "1.4" }) }));
+}
+/** Cancelled: the pending ring in the dimmer caption tone. */
+function CancelledGlyph() {
+    return (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", className: css.glyphCancelled, children: _jsx("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeWidth: "1.4" }) }));
+}
+/** Failed: filled error circle, × cut in the card surface tone (DoneGlyph's cutout idiom). */
+function FailedGlyph() {
+    return (_jsxs("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", className: css.glyphFailed, children: [_jsx("circle", { cx: "7", cy: "7", r: "7", fill: "currentColor" }), _jsx("path", { d: "M4.8 4.8L9.2 9.2M9.2 4.8L4.8 9.2", stroke: "var(--dsw-specific-menu, var(--dsw-alias-bg-base, #ffffff))", strokeWidth: "1.4", strokeLinecap: "round" })] }));
+}
+function StatusGlyph({ status }) {
+    switch (status) {
+        case 'done': return _jsx(DoneGlyph, {});
+        case 'in_progress': return _jsx(ProgressGlyph, {});
+        case 'pending': return _jsx(PendingGlyph, {});
+        case 'cancelled': return _jsx(CancelledGlyph, {});
+        case 'failed': return _jsx(FailedGlyph, {});
+    }
+}
+/**
+ * The goal capsule's progress ring — the collapsed row's single visual focus:
+ * a tertiary track arc plus the business-primary progress arc, -90° rotated
+ * so the arc starts at twelve o'clock.
+ */
+function GoalRing({ fraction }) {
+    const clamped = Math.min(1, Math.max(0, fraction));
+    const R = 5.5;
+    const C = 2 * Math.PI * R;
+    return (_jsxs("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", className: css.ring, children: [_jsx("circle", { cx: "7", cy: "7", r: R, className: css.ringTrack, strokeWidth: "2" }), _jsx("circle", { cx: "7", cy: "7", r: R, className: css.ringFill, strokeWidth: "2", strokeLinecap: "round", strokeDasharray: `${C * clamped} ${C}`, transform: "rotate(-90 7 7)" })] }));
+}
+/**
+ * A task is BLOCKED while the member its `blockedBy` names still has an open
+ * (pending/in_progress) task — the row greys until the wait is over. The task
+ * ITSELF never counts as its own blocker (a "等谁" pointing at the owner
+ * would otherwise grey forever). Display only: nothing auto-dispatches when
+ * it clears.
+ */
+function isBlocked(task, tasks) {
+    return task.blockedBy !== undefined
+        && tasks.some(entry => entry.id !== task.id && entry.member === task.blockedBy
+            && (entry.status === 'pending' || entry.status === 'in_progress'));
+}
+/** How many recent advance records the goal card lists. */
+const RECENT_ADVANCES = 5;
+/** One task row of the task panel. */
+function TaskRow({ task, tasks, now, closeTask, t }) {
+    const blocked = isBlocked(task, tasks);
+    const open = task.status === 'pending' || task.status === 'in_progress';
+    return (_jsxs("li", { className: css.item, "data-status": task.status, "data-blocked": blocked || undefined, children: [_jsx("span", { className: css.glyph, title: statusLabel(task.status, t), children: _jsx(StatusGlyph, { status: task.status }) }), _jsx("span", { className: css.content, children: _jsx("span", { className: css.title, children: task.title }) }), _jsxs("span", { className: css.memberChip, children: [_jsx("span", { className: css.memberDot, style: { background: memberColor(task.member) }, "aria-hidden": true }), task.member] }), blocked && _jsx("span", { className: css.blockedTag, children: t('tasks.blocked', { member: task.blockedBy ?? '' }) }), _jsxs("span", { className: css.meta, children: [statusLabel(task.status, t), " \u00B7 ", formatRelativeTime(task.updatedAt, now, t)] }), open && (_jsx("button", { type: "button", className: css.action, onClick: () => { void closeTask(task.id); }, children: t('tasks.close') })), task.status === 'failed' && (_jsx("button", { type: "button", className: css.action, onClick: () => { void closeTask(task.id, 'cancelled'); }, children: t('tasks.dismiss') }))] }));
+}
+/** The dock capsules (goal + tasks) with their expanded cards. */
+export function RoomDockCapsules({ sessionId, roomStore, addTask, closeTask, setGoal, formalPlans = false, roomCwd, invite, listProviders, browseDirectory, modelSurface, renderHarnessModelPicker, t, }) {
+    const state = useSyncExternalStore(roomStore.subscribe, () => roomStore.getCached(sessionId));
+    const [open, setOpen] = useState(null);
+    const [addOpen, setAddOpen] = useState(false);
+    const [filter, setFilter] = useState('');
+    const [editingGoal, setEditingGoal] = useState(false);
+    const [goalDraft, setGoalDraft] = useState('');
+    const [draftTitle, setDraftTitle] = useState('');
+    const [draftMember, setDraftMember] = useState('');
+    const [draftBlockedBy, setDraftBlockedBy] = useState('');
+    const [error, setError] = useState(null);
+    const [inviteOpen, setInviteOpen] = useState(false);
+    const [providers, setProviders] = useState(undefined);
+    const rootRef = useRef(null);
+    // Collapse on any press outside the dock (no overlay; a second click on the
+    // capsule toggles too).
+    useEffect(() => {
+        if (open === null)
+            return;
+        const onPointerDown = (event) => {
+            if (rootRef.current !== null && event.target instanceof Node
+                && !rootRef.current.contains(event.target)) {
+                setOpen(null);
+                setAddOpen(false);
+                setEditingGoal(false);
+            }
+        };
+        document.addEventListener('mousedown', onPointerDown);
+        return () => { document.removeEventListener('mousedown', onPointerDown); };
+    }, [open]);
+    // A cache miss (first pull in flight) or a non-room: the dock vanishes.
+    if (state === undefined || roomStore.isRoomCached(sessionId) !== true)
+        return null;
+    // Fresh room (no goal, no tasks — membership does not count, the main
+    // agent is always there): the guide/task pair would be noise, so the row
+    // carries a single 「＋ 邀请成员」 capsule that opens the invite dialog
+    // straight from the dock. The pair returns the moment a goal or a task
+    // exists; the invite entry then retires (the members tab carries it).
+    const fresh = state.goal === undefined && state.tasks.length === 0;
+    if (fresh) {
+        const openInvite = () => {
+            setProviders(undefined);
+            setInviteOpen(true);
+            void listProviders().then(setProviders);
+        };
+        const submitInvite = (values) => invite({
+            provider: values.provider,
+            name: values.name,
+            // Blank instructions are omitted, not sent: the host rejects a
+            // present-but-blank role, and an absent one simply carries no preset.
+            ...values.instructions === '' ? {} : { instructions: values.instructions },
+            ...values.cwd === '' ? {} : { cwd: values.cwd },
+            ...values.firstTask === '' ? {} : { firstTask: values.firstTask },
+            ...values.model === '' ? {} : { model: values.model },
+        });
+        return (_jsxs("section", { ref: rootRef, className: css.root, "aria-label": t('goal.label'), children: [_jsx("div", { className: css.capsules, children: _jsx("button", { type: "button", className: css.capsule, onClick: openInvite, children: _jsx("span", { className: css.capsuleGuide, children: t('members.invite') }) }) }), inviteOpen && (_jsx(InviteDialog, { mode: "invite", providers: providers?.providers, localAgentAvailable: providers?.localAgentAvailable ?? true, inheritedCwd: roomCwd, existingNames: state.members.map(entry => entry.name), browseDirectory: browseDirectory, modelSurface: modelSurface, renderHarnessModelPicker: renderHarnessModelPicker, onSubmit: submitInvite, onClose: () => { setInviteOpen(false); }, t: t }))] }));
+    }
+    const now = Date.now();
+    const progress = taskProgress(state.tasks);
+    const runners = [...new Set(state.tasks.filter(task => task.status === 'in_progress').map(task => task.member))];
+    const members = state.members;
+    const chosen = members.some(member => member.name === draftMember)
+        ? draftMember
+        : (members[0]?.name ?? '');
+    const advances = state.tasks
+        .filter(task => task.status === 'done')
+        .slice()
+        .sort((a, b) => b.updatedAt - a.updatedAt);
+    const fraction = progress.total === 0 ? 0 : progress.done / progress.total;
+    const toggle = (panel) => {
+        if (open === panel) {
+            setOpen(null);
+            setAddOpen(false);
+            setEditingGoal(false);
+            return;
+        }
+        setOpen(panel);
+        setAddOpen(false);
+        setEditingGoal(false);
+        setError(null);
+        if (panel === 'goal' && state.goal === undefined) {
+            setGoalDraft('');
+            setEditingGoal(true);
+        }
+    };
+    const saveGoal = async () => {
+        const outcome = await setGoal(goalDraft);
+        if (!outcome.ok) {
+            setError(outcome.message);
+            return;
+        }
+        setEditingGoal(false);
+        setError(null);
+    };
+    const add = async () => {
+        const title = draftTitle.trim();
+        if (title === '' || chosen === '')
+            return;
+        const outcome = await addTask(chosen, title, draftBlockedBy === '' ? undefined : draftBlockedBy);
+        if (!outcome.ok) {
+            setError(outcome.message);
+            return;
+        }
+        setDraftTitle('');
+        setDraftBlockedBy('');
+        setError(null);
+    };
+    const onAddKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            void add();
+        }
+    };
+    const visibleTasks = filter === ''
+        ? undefined
+        : state.tasks.filter(task => task.member === filter);
+    return (_jsxs("section", { ref: rootRef, className: css.root, "aria-label": t('goal.label'), children: [!formalPlans && open === 'goal' && (_jsxs("div", { className: css.card, children: [editingGoal ? (_jsxs("div", { className: css.goalEditRow, children: [_jsx("input", { className: css.input, value: goalDraft, placeholder: t('goal.placeholder'), onChange: event => { setGoalDraft(event.target.value); }, onKeyDown: (event) => {
+                                    if (event.key === 'Enter') {
+                                        event.preventDefault();
+                                        void saveGoal();
+                                    }
+                                } }), _jsx("button", { type: "button", className: css.action, onClick: () => { void saveGoal(); }, children: t('goal.save') }), state.goal !== undefined && (_jsx("button", { type: "button", className: css.action, onClick: () => { setEditingGoal(false); }, children: t('goal.cancel') }))] })) : (_jsxs("div", { className: css.goalRow, children: [_jsx("span", { className: css.goalText, children: state.goal }), _jsx("button", { type: "button", className: css.action, onClick: () => {
+                                    setGoalDraft(state.goal ?? '');
+                                    setEditingGoal(true);
+                                }, children: t('goal.edit') })] })), _jsxs("div", { className: css.progressRow, children: [_jsx("div", { className: css.progressTrack, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": progress.total, "aria-valuenow": progress.done, children: _jsx("div", { className: css.progressFill, style: { width: `${fraction * 100}%` } }) }), _jsxs("span", { className: css.progressMeta, children: [progress.done, "/", progress.total] })] }), _jsx("div", { className: css.recentLabel, children: t('goal.recent') }), advances.length === 0 ? (_jsx("div", { className: css.meta, children: t('goal.noAdvances') })) : (_jsx("ul", { className: css.list, children: advances.slice(0, RECENT_ADVANCES).map(task => (_jsxs("li", { className: css.advanceRow, children: [t('advance.line', { member: task.member, title: task.title }), _jsxs("span", { className: css.meta, children: [" \u00B7 ", formatRelativeTime(task.updatedAt, now, t)] })] }, task.id))) })), error !== null && _jsx("div", { className: css.error, role: "alert", children: error })] })), open === 'tasks' && (_jsxs("div", { className: css.card, children: [_jsxs("div", { className: css.panelBar, children: [_jsxs("div", { className: css.chips, role: "group", "aria-label": t(formalPlans ? 'tasks.chat' : 'tasks.capsule'), children: [_jsx("button", { type: "button", className: css.chip, "data-active": filter === '' || undefined, onClick: () => { setFilter(''); }, children: t('tasks.filter.all') }), members.map(member => (_jsxs("button", { type: "button", className: css.chip, "data-active": filter === member.name || undefined, style: { '--room-chip-color': memberColor(member.name) }, onClick: () => { setFilter(member.name); }, children: [_jsx("span", { className: css.memberDot, style: { background: memberColor(member.name) }, "aria-hidden": true }), member.name] }, member.name)))] }), !addOpen && (_jsxs("button", { type: "button", className: css.addTrigger, onClick: () => { setAddOpen(true); }, children: ["\uFF0B ", t('tasks.addTrigger')] }))] }), _jsx("div", { className: css.groups, children: filter === ''
+                            ? members.map((member) => {
+                                const own = state.tasks.filter(task => task.member === member.name);
+                                if (own.length === 0)
+                                    return null;
+                                return (_jsxs("div", { className: css.group, children: [_jsx("div", { className: css.head, children: member.name }), _jsx("ul", { className: css.list, children: own.map(task => (_jsx(TaskRow, { task: task, tasks: state.tasks, now: now, closeTask: closeTask, t: t }, `${task.id}:${task.status}`))) })] }, member.name));
+                            })
+                            : (_jsx("ul", { className: css.list, children: (visibleTasks ?? []).map(task => (_jsx(TaskRow, { task: task, tasks: state.tasks, now: now, closeTask: closeTask, t: t }, `${task.id}:${task.status}`))) })) }), addOpen && (_jsxs("div", { className: css.addRow, children: [_jsx("select", { className: css.memberSelect, "aria-label": t('tasks.addMember'), value: chosen, onChange: event => { setDraftMember(event.target.value); }, children: members.map(member => (_jsx("option", { value: member.name, children: member.name }, member.name))) }), _jsx("input", { className: css.input, value: draftTitle, placeholder: t('tasks.addPlaceholder'), onChange: event => { setDraftTitle(event.target.value); }, onKeyDown: onAddKeyDown }), _jsxs("select", { className: css.memberSelect, "aria-label": t('tasks.addBlockedBy'), value: draftBlockedBy, onChange: event => { setDraftBlockedBy(event.target.value); }, children: [_jsx("option", { value: "", children: t('tasks.addBlockedByNone') }), members.map(member => (_jsx("option", { value: member.name, children: member.name }, member.name)))] }), _jsx("button", { type: "button", className: css.action, disabled: draftTitle.trim() === '' || chosen === '', onClick: () => { void add(); }, children: t('tasks.add') })] })), error !== null && _jsx("div", { className: css.error, role: "alert", children: error })] })), _jsxs("div", { className: css.capsules, children: [!formalPlans && _jsx("button", { type: "button", className: css.capsule, "aria-expanded": open === 'goal', "aria-label": t('goal.label'), onClick: () => { toggle('goal'); }, children: state.goal === undefined ? (_jsx("span", { className: css.capsuleGuide, children: t('goal.set') })) : (_jsxs(_Fragment, { children: [_jsx(GoalRing, { fraction: fraction }), _jsxs("span", { className: css.capsulePercent, children: [Math.round(fraction * 100), "%"] }), _jsx("span", { className: css.capsuleText, children: state.goal })] })) }), _jsxs("button", { type: "button", className: css.capsule, "aria-expanded": open === 'tasks', "aria-label": t(formalPlans ? 'tasks.chat' : 'tasks.capsule'), "data-running": runners.length > 0 || undefined, onClick: () => { toggle('tasks'); }, children: [_jsx(IconChecklistOutlineMedium, { size: 14, className: css.checklistIcon }), progress.total === 0 ? (_jsx("span", { className: css.capsuleText, children: t(formalPlans ? 'tasks.chat' : 'tasks.capsule') })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: css.capsuleText, children: t(formalPlans ? 'tasks.chat' : 'tasks.capsule') }), _jsxs("span", { className: css.capsuleCount, children: [progress.done, "/", progress.total] }), runners.length > 0 && (_jsxs("span", { className: css.runners, children: [runners.map(name => (_jsxs("span", { className: css.runner, children: [_jsx("span", { className: css.memberDot, style: { background: memberColor(name) }, "aria-hidden": true }), name] }, name))), _jsx("span", { className: css.runnerSuffix, children: t('tasks.doing') })] }))] }))] }), _jsx("button", { type: "button", className: css.addCapsule, "aria-label": t('tasks.addTrigger'), onClick: () => {
+                            setOpen('tasks');
+                            setAddOpen(true);
+                            setEditingGoal(false);
+                            setError(null);
+                        }, children: "\uFF0B" })] })] }));
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Boundary node ('room-event' keyed renderer): one dim
+ * compaction-marker-style line per member join/leave. The human's own
+ * @-messages are NOT here — postMessage appends them as standard
+ * `user/message` events, so the official user bubble carries them.
+ */
+import type { ReactNode } from 'react';
+import type { RoomEventViewProps } from './slots.ts';
+/** The boundary dim line. */
+export declare function RoomEventView({ node, t }: RoomEventViewProps): ReactNode;
+//# sourceMappingURL=RoomEventView.d.ts.map

package/lib/types/client/RoomEventView.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import css from './RoomEventView.module.css';
+/** The boundary dim line. */
+export function RoomEventView({ node, t }) {
+    const data = node.data;
+    let text;
+    switch (data.sub) {
+        case 'member-added':
+            text = t('event.joined', { member: data.member ?? '', provider: data.provider ?? '' })
+                + (data.invitedBy === 'agent' ? t('event.joinedByAgent') : '');
+            break;
+        case 'member-removed':
+            text = t('event.left', { member: data.member ?? '' });
+            break;
+    }
+    return _jsx("div", { className: css.row, children: text });
+}

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

@@ -0,0 +1,18 @@
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots';
+import type { RoomModelDirectory } from './slots.ts';
+interface RoomModelPickerProps {
+    /** The session's shared official directory (same instance the /model popup reads). */
+    readonly directory: RoomModelDirectory;
+    /** Selection failures ride the composer's inline error line. */
+    readonly onError: (message: string) => void;
+    readonly t: PropsLocale<'room'>['t'];
+}
+/**
+ * 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 declare function RoomModelPicker({ directory, onError, t }: RoomModelPickerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=RoomModelPicker.d.ts.map