@khorsheed/dsh-room 0.1.0

package/lib/types/client/InviteDialog.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The invite/edit dialog as a character-creation card: a self-drawn
+ * lightweight modal (overlay + centered card, Esc/overlay-click closes) with
+ * a live member-card preview beside the form — every keystroke re-renders
+ * the preview (the preview avatar stays neutral; the name-hash color joins
+ * once the member is seated), and a 🎲 dice button rolls a random
+ * game-flavored name from the pool (name-pool.ts), skipping names already
+ * on the roster. The chrome rides the official design tokens: the near-black
+ * button-primary-fill capsule is the one filled action, and no blue accent
+ * appears (see InviteDialog.module.css).
+ *
+ * Field order is primary-first: provider → 默认模型 → 称呼(+🎲) → 首个任务 →
+ * ▸ 高级设置 (role instructions + the member-level cwd, collapsed on invite —
+ * editing opens it, since editing IS changing those). The model field sits in
+ * the main form (promoted out of the drawer): the same control the provider
+ * settings cards use. Invites retain a saved provider choice, otherwise the
+ * shared picker chooses the first candidate. Edits retain member configuration.
+ * Older cores without the shared picker keep the legacy default/input fallback.
+ * The rest of the original
+ * contract is unchanged: logged-out providers grey with login guidance (an
+ * absent facade degrades the whole section to a hint), the name precheck
+ * plus the host's structured duplicate/invalid errors ride the inline error
+ * line, instructions ride the front of the member's FIRST task message
+ * (never a system-prompt channel), the cwd is a read-only display filled by
+ * the 浏览… button (the official `uiWorkspace.pickDirectory` call;
+ * empty = inherit the room session's cwd, shown as the placeholder), and
+ * edit mode diffs name/cwd/instructions/model.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { IconChevronDownOutlineMedium } from './icons.js';
+import { MemberCard } from './MemberCard.js';
+import { rollName } from './name-pool.js';
+import css from './InviteDialog.module.css';
+/** The addressing-name grammar (host-validated too; this is the precheck). */
+function validName(name) {
+    return name !== '' && !/\s/.test(name) && !name.includes('@');
+}
+/** The invite/edit modal card. */
+export function InviteDialog({ mode, member, providers, localAgentAvailable, inheritedCwd, existingNames, browseDirectory, modelSurface, renderHarnessModelPicker, memberModel, memberConfiguration, onSubmit, onClose, t, }) {
+    const [provider, setProvider] = useState('');
+    const [name, setName] = useState(member?.name ?? '');
+    const [instructions, setInstructions] = useState(member?.instructions ?? '');
+    const [cwd, setCwd] = useState(member?.cwd ?? '');
+    const [firstTask, setFirstTask] = useState('');
+    // Edit mode opens on the journaled intent; the broker's effective model
+    // replaces it when the memberModel read below answers.
+    const [model, setModel] = useState(mode === 'edit' ? member?.model ?? '' : '');
+    const [modelBaseline, setModelBaseline] = useState(mode === 'edit' ? member?.model ?? '' : '');
+    /** The model row's surface: menu vocabulary + the default an unset field displays. */
+    const [surface, setSurface] = useState(undefined);
+    const [modelMenuOpen, setModelMenuOpen] = useState(false);
+    const modelFieldRef = useRef(null);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [browsing, setBrowsing] = useState(false);
+    // Invite keeps the advanced drawer folded; edit opens it — changing those
+    // fields is what the edit dialog is for.
+    const [advancedOpen, setAdvancedOpen] = useState(mode === 'edit');
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            // An open model menu eats the first Esc; the next one closes the dialog.
+            if (modelMenuOpen) {
+                setModelMenuOpen(false);
+                return;
+            }
+            onClose();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => { document.removeEventListener('keydown', onKey); };
+    }, [onClose, modelMenuOpen]);
+    // Click-outside closes the model menu (the settings cards' pattern).
+    useEffect(() => {
+        if (!modelMenuOpen)
+            return;
+        const onPointerDown = (event) => {
+            if (modelFieldRef.current?.contains(event.target) === true)
+                return;
+            setModelMenuOpen(false);
+        };
+        document.addEventListener('mousedown', onPointerDown);
+        return () => { document.removeEventListener('mousedown', onPointerDown); };
+    }, [modelMenuOpen]);
+    const authenticated = (providers ?? []).filter(entry => entry.authenticated);
+    const chosen = provider === '' ? (authenticated[0]?.provider ?? '') : provider;
+    const someLoggedOut = (providers ?? []).some(entry => !entry.authenticated);
+    /** The chosen provider's roster harness name (the harnessModel lookup key). */
+    const chosenHarness = (providers ?? []).find(entry => entry.provider === chosen)?.harness;
+    // The model surface follows the chosen provider: a harness without a
+    // broker read (or a composition without the family's client half) leaves
+    // the field a plain text input — blank still follows the harness default.
+    useEffect(() => {
+        setSurface(undefined);
+        if (mode !== 'invite' || modelSurface === undefined || chosenHarness === undefined)
+            return;
+        let cancelled = false;
+        void modelSurface(chosenHarness).then((result) => {
+            if (!cancelled) {
+                setSurface(result);
+                const saved = result?.settings;
+                if (saved)
+                    setModel(current => current || saved);
+            }
+        }, () => { });
+        return () => { cancelled = true; };
+    }, [mode, modelSurface, chosenHarness]);
+    // Edit mode: the member's own model surface prefills the field (effective)
+    // and serves the menu (choices). null (no delegation record yet — a
+    // never-started member — or a brokerless harness) and undefined (RPC
+    // failure) answers keep the journaled intent as the baseline.
+    const editChild = mode === 'edit' ? member?.childSessionId : undefined;
+    useEffect(() => {
+        if (mode !== 'edit' || memberModel === undefined || editChild === undefined)
+            return;
+        let cancelled = false;
+        void memberModel(editChild).then((info) => {
+            if (cancelled || info === null || info === undefined)
+                return;
+            setModel(info.effective ?? '');
+            setModelBaseline(info.effective ?? '');
+            setSurface(info);
+        }, () => { });
+        return () => { cancelled = true; };
+    }, [mode, memberModel, editChild]);
+    // Edit mode: instructions may clear (empty = no preset injected); the name
+    // is the only hard requirement.
+    const canSubmit = mode === 'edit'
+        ? validName(name)
+        : localAgentAvailable && chosen !== '' && validName(name);
+    // The model row: the same control the provider settings cards use. An unset
+    // field DISPLAYS the provider's current default dimmed (inherited, never
+    // pinned); the chevron menu leads with the 默认 item (picking it clears the
+    // field back to follow-default) over the full unfiltered vocabulary.
+    const modelChoices = surface?.choices ?? [];
+    const surfaceDefault = surface?.effective ?? surface?.cliDefault;
+    const modelPlaceholder = mode === 'edit'
+        ? t('invite.modelPlaceholderEdit')
+        : surfaceDefault !== undefined && surfaceDefault !== ''
+            ? t('invite.modelPlaceholderDefault', { model: surfaceDefault })
+            : t('invite.modelPlaceholder');
+    const modelDefaultItem = mode === 'edit'
+        ? t('invite.modelDefaultItemEdit')
+        : surfaceDefault !== undefined && surfaceDefault !== ''
+            ? t('invite.modelDefaultItemNamed', { model: surfaceDefault })
+            : t('invite.modelDefaultItem');
+    const modelField = (_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.label, children: t('invite.model') }), modelChoices.length > 0 ? (_jsxs("div", { className: css.modelField, ref: modelFieldRef, children: [_jsx("input", { className: css.modelInput, value: model, placeholder: modelPlaceholder, "aria-label": t('invite.model'), onChange: event => { setModel(event.target.value); } }), _jsx("button", { type: "button", className: css.modelMenuButton, "aria-label": t('invite.modelMenu'), "aria-haspopup": "menu", "aria-expanded": modelMenuOpen, onClick: () => { setModelMenuOpen(open => !open); }, children: _jsx(IconChevronDownOutlineMedium, { className: modelMenuOpen ? `${css.modelMenuChevron} ${css.modelMenuChevronOpen}` : css.modelMenuChevron }) }), modelMenuOpen && (_jsxs("div", { className: css.modelMenu, role: "menu", "aria-label": t('invite.modelMenu'), children: [_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": model.trim() === '', className: model.trim() === '' ? `${css.modelItemDefault} ${css.modelItemCurrent}` : css.modelItemDefault, onClick: () => { setModel(''); setModelMenuOpen(false); }, children: [_jsx("span", { className: css.modelItemLabel, children: modelDefaultItem }), _jsx("span", { className: css.modelItemCheck, "aria-hidden": true, children: model.trim() === '' ? '✓' : '' })] }), modelChoices.map(choice => (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": choice === model.trim(), className: choice === model.trim() ? css.modelItemCurrent : css.modelItem, onClick: () => { setModel(choice); setModelMenuOpen(false); }, children: [_jsx("span", { className: css.modelItemLabel, children: choice }), _jsx("span", { className: css.modelItemCheck, "aria-hidden": true, children: choice === model.trim() ? '✓' : '' })] }, choice)))] }))] })) : (_jsx("input", { className: css.input, value: model, placeholder: modelPlaceholder, "aria-label": t('invite.model'), onChange: event => { setModel(event.target.value); } })), _jsx("span", { className: css.hint, children: mode === 'edit' ? t('invite.modelHintEdit') : t('invite.modelHint') })] }));
+    // The live preview: the form values as a roster card, always idle.
+    const previewName = name.trim() === '' ? t('invite.previewName') : name.trim();
+    const previewProvider = mode === 'edit'
+        ? member?.provider
+        : (providers ?? []).find(entry => entry.provider === chosen)?.displayName ?? chosen;
+    const previewMember = {
+        name: previewName,
+        kind: 'cli',
+        invitedBy: 'human',
+        ...previewProvider === undefined || previewProvider === '' ? {} : { provider: previewProvider },
+        ...instructions.trim() === '' ? {} : { instructions: instructions.trim() },
+    };
+    const rollDice = () => {
+        const rolled = rollName(existingNames, name);
+        if (rolled !== undefined)
+            setName(rolled);
+    };
+    const browse = async () => {
+        if (browsing)
+            return;
+        setBrowsing(true);
+        setError(null);
+        try {
+            const picked = await browseDirectory();
+            if (picked !== null)
+                setCwd(picked);
+        }
+        catch {
+            // No native picking capability on this host (or a transport failure):
+            // the field keeps its value and the hint explains the miss.
+            setError(t('invite.browseFailed'));
+        }
+        finally {
+            setBrowsing(false);
+        }
+    };
+    const submit = async () => {
+        if (!canSubmit || busy)
+            return;
+        if (!validName(name)) {
+            setError(t('invite.error.invalid'));
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            const outcome = await onSubmit({
+                provider: chosen, name, instructions: instructions.trim(), cwd: cwd.trim(), firstTask: firstTask.trim(),
+                model: model.trim(), modelBaseline,
+            });
+            if (!outcome.ok) {
+                setError(outcome.message);
+                return;
+            }
+            onClose();
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const onCardKeyDown = (event) => {
+        event.stopPropagation();
+    };
+    return (_jsx("div", { className: css.overlay, role: "presentation", onMouseDown: (event) => {
+            if (event.target === event.currentTarget)
+                onClose();
+        }, children: _jsxs("div", { className: css.card, role: "dialog", "aria-modal": "true", onKeyDown: onCardKeyDown, children: [_jsx("div", { className: css.title, children: mode === 'invite' ? t('invite.title') : t('invite.title.edit', { member: member?.name ?? '' }) }), _jsxs("div", { className: css.body, children: [_jsxs("div", { className: css.form, children: [mode === 'invite' && (!localAgentAvailable ? (_jsx("div", { className: css.hint, role: "status", children: t('invite.facadeMissing') })) : (_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.label, children: t('invite.provider') }), _jsx("select", { className: css.select, value: chosen, onChange: event => { setProvider(event.target.value); setModel(''); }, children: (providers ?? []).map(entry => (_jsxs("option", { value: entry.provider, disabled: !entry.authenticated, children: [entry.displayName, entry.authenticated ? '' : t('invite.loggedOut')] }, entry.provider))) }), someLoggedOut && _jsx("span", { className: css.hint, children: t('invite.loginHint') })] }))), memberConfiguration ?? (chosenHarness !== undefined && (modelSurface === undefined || surface !== undefined) ? renderHarnessModelPicker?.(chosenHarness, { value: model, onChange: setModel, disabled: busy }) : undefined) ?? modelField, _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.label, children: t('invite.name') }), _jsxs("span", { className: css.nameRow, children: [_jsx("input", { className: css.input, value: name, placeholder: "ada", onChange: event => { setName(event.target.value); } }), _jsx("button", { type: "button", className: css.dice, title: t('invite.randomName'), "aria-label": t('invite.randomName'), onClick: rollDice, children: "\uD83C\uDFB2" })] }), _jsx("span", { className: css.hint, children: t('invite.nameHint') })] }), mode === 'invite' && (_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.label, children: t('invite.firstTask') }), _jsx("textarea", { className: css.textarea, rows: 2, value: firstTask, onChange: event => { setFirstTask(event.target.value); } }), _jsx("span", { className: css.hint, children: t('invite.firstTaskHint') })] })), _jsxs("details", { className: css.advanced, open: advancedOpen, onToggle: (event) => { setAdvancedOpen(event.currentTarget.open); }, children: [_jsx("summary", { className: css.advancedSummary, children: t('invite.advanced') }), _jsxs("div", { className: css.advancedBody, children: [_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.label, children: t('invite.instructions') }), _jsx("textarea", { className: css.textarea, rows: 3, value: instructions, placeholder: t('invite.instructionsPlaceholder'), onChange: event => { setInstructions(event.target.value); } }), _jsx("span", { className: css.hint, children: mode === 'edit' ? t('invite.instructionsHintEdit') : t('invite.instructionsHint') })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.label, children: t('invite.cwd') }), _jsxs("span", { className: css.cwdRow, children: [_jsx("input", { className: css.input, value: cwd, placeholder: inheritedCwd ?? '', readOnly: true, "aria-label": t('invite.cwd') }), _jsx("button", { type: "button", className: css.browse, disabled: browsing, onClick: () => { void browse(); }, children: t('invite.browse') }), cwd !== '' && (_jsx("button", { type: "button", className: css.browse, "aria-label": t('invite.cwdReset'), onClick: () => { setCwd(''); }, children: "\u2715" }))] }), _jsx("span", { className: css.hint, children: t('invite.cwdHint') })] })] })] })] }), _jsxs("div", { className: css.previewCol, children: [_jsx("span", { className: css.previewLabel, children: t('invite.preview') }), _jsx(MemberCard, { preview: true, member: previewMember, run: undefined, elapsedMs: undefined, openSession: () => { }, onEdit: () => { }, onRemove: () => { }, t: t })] })] }), error !== null && _jsx("div", { className: css.error, role: "alert", children: error }), _jsxs("div", { className: css.buttons, children: [_jsx("button", { type: "button", className: css.button, onClick: onClose, children: t('invite.cancel') }), _jsx("button", { type: "button", className: css.primary, disabled: !canSubmit || busy, onClick: () => { void submit(); }, children: mode === 'invite' ? t('invite.submit') : t('invite.save') })] })] }) }));
+}

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

@@ -0,0 +1,33 @@
+/**
+ * One roster card: identity, avatar block, role, status chip, actions.
+ * Extracted from MembersView so the invite/edit dialog can render the same
+ * card as its live preview — `preview` drops the action foot (the preview
+ * member has no session to jump to and nothing to edit or remove) and is
+ * always rendered idle (no run to report).
+ */
+import { type ReactNode } from 'react';
+import type { RoomMember, RoomMemberRun } from '../types.ts';
+import type { MembersViewProps } from './slots.ts';
+/** One roster card: identity, avatar block, role, status chip, actions. */
+export declare function MemberCard({ member, run, elapsedMs, openSession, onEdit, onRemove, t, modelHint, coordinator, onPromote, preview, }: {
+    readonly coordinator?: boolean;
+    readonly onPromote?: (() => void) | undefined;
+    readonly member: RoomMember;
+    readonly run: RoomMemberRun | undefined;
+    /** Tick-driven elapsed for a running member (undefined otherwise). */
+    readonly elapsedMs: number | undefined;
+    readonly openSession: MembersViewProps['openSession'];
+    readonly onEdit: () => void;
+    readonly onRemove: () => void;
+    readonly t: MembersViewProps['t'];
+    /**
+     * The effective-model hint, appended to the provider/kind line (`kimi-cli ·
+     * kimi-code/k3`): the member's memberModel read (CLI) or the session's
+     * official directory selection (main agent). Absent = no hint (pre-broker
+     * behavior).
+     */
+    readonly modelHint?: ReactNode;
+    /** True = the dialog's live preview: no action foot. */
+    readonly preview?: boolean;
+}): ReactNode;
+//# sourceMappingURL=MemberCard.d.ts.map

package/lib/types/client/MemberCard.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One roster card: identity, avatar block, role, status chip, actions.
+ * Extracted from MembersView so the invite/edit dialog can render the same
+ * card as its live preview — `preview` drops the action foot (the preview
+ * member has no session to jump to and nothing to edit or remove) and is
+ * always rendered idle (no run to report).
+ */
+import { useEffect, useRef, useState } from 'react';
+import { formatDurationMs } from './format.js';
+import { memberColor } from './member-color.js';
+import css from './MembersView.module.css';
+/** One roster card: identity, avatar block, role, status chip, actions. */
+export function MemberCard({ member, run, elapsedMs, openSession, onEdit, onRemove, t, modelHint, coordinator = false, onPromote, preview = false, }) {
+    const [expanded, setExpanded] = useState(false);
+    const [overflowing, setOverflowing] = useState(false);
+    const instructionsRef = useRef(null);
+    useEffect(() => {
+        if (expanded)
+            return;
+        const element = instructionsRef.current;
+        if (element !== null)
+            setOverflowing(element.scrollHeight > element.clientHeight + 1);
+    }, [member.instructions, expanded]);
+    const color = memberColor(member.name);
+    const child = member.childSessionId;
+    const running = run?.state === 'running';
+    const failed = run?.state === 'failed';
+    return (_jsxs("div", { className: css.card, "data-member": member.name, children: [_jsxs("div", { className: css.head, children: [_jsx("span", { className: css.avatarTile, style: preview ? undefined : { '--member-color': color }, "aria-hidden": true, children: member.name.slice(0, 1).toUpperCase() }), _jsxs("span", { className: css.identity, children: [_jsx("span", { className: css.name, children: member.name }), coordinator && _jsx("span", { className: css.hint, children: t('coordinator.label') }), _jsxs("span", { className: css.hint, children: [member.kind === 'main-agent' ? t('member.kind.main') : member.provider ?? '', modelHint !== undefined && modelHint !== '' && _jsxs(_Fragment, { children: [' · ', modelHint] })] })] }), running ? (_jsx("button", { type: "button", className: css.chipRunning, title: t('speech.jump'), disabled: child === undefined, onClick: () => { if (child !== undefined)
+                            openSession(child); }, children: `${t('members.status.running')} · ${formatDurationMs(elapsedMs ?? 0)}` })) : (_jsx("span", { className: failed ? css.chipFailed : css.chipIdle, children: failed ? t('members.status.failed') : t('members.status.idle') }))] }), member.kind === 'cli' && (member.instructions === undefined ? (_jsx("p", { className: css.instructionsEmpty, children: t('members.instructions.empty') })) : (_jsxs("div", { className: css.instructionsBlock, children: [_jsx("p", { ref: instructionsRef, className: expanded ? css.instructionsExpanded : css.instructions, title: expanded ? undefined : member.instructions, children: member.instructions }), (overflowing || expanded) && (_jsx("button", { type: "button", className: css.expandToggle, onClick: () => { setExpanded(value => !value); }, children: expanded ? t('members.instructions.collapse') : t('members.instructions.expand') }))] }))), !preview && (_jsxs("div", { className: css.foot, children: [!coordinator && onPromote !== undefined && _jsx("button", { type: "button", className: css.action, disabled: running, onClick: onPromote, children: t('coordinator.promote') }), member.kind === 'cli' && (_jsxs("span", { className: css.actions, children: [_jsx("button", { type: "button", className: css.action, disabled: child === undefined, onClick: () => { if (child !== undefined)
+                                    openSession(child); }, children: t('members.trajectory') }), _jsx("button", { type: "button", className: css.action, onClick: onEdit, children: t('members.edit') }), _jsx("button", { type: "button", className: css.action, disabled: coordinator, onClick: onRemove, children: t('members.remove') })] }))] }))] }));
+}

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

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+import type { MembersViewProps } from './slots.ts';
+/** The members tab. */
+export declare function MembersView({ sessionId, roomStore, roomCwd, openSession, removeMember, updateMember, invite, listProviders, browseDirectory, modelSurface, renderHarnessModelPicker, memberModel, setMemberModel, renderMemberConfiguration, modelDirectory, setCoordinator, t, }: MembersViewProps): ReactNode;
+//# sourceMappingURL=MembersView.d.ts.map

package/lib/types/client/MembersView.js

@@ -0,0 +1,168 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Members view: the room session's 成员 conversation-view tab. Owns
+ * everything member-related — a card grid (member-color avatar block with the
+ * uppercased name, provider/kind, clamped role instructions with an inline
+ * expander, status chip, per-card [轨迹→] [编辑] [移除]) and the dashed
+ * invite card. The running chip is the "去看看它在干什么" jump into the
+ * member's child session; interrupt deliberately does NOT live here — it
+ * belongs to the run surfaces (the chat-stream run row's stop, the member
+ * session's own Stop). Data rides the room store (refreshed on entering the
+ * tab and after every own mutation; the store's running-only poll keeps the
+ * elapsed honest). The main-agent member takes no instructions and cannot be
+ * removed — it is the room itself.
+ */
+import { coordinatorMember } from '../journal.js';
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { Button } from '@deepseek-ai/dsh-client-ui-primitives';
+import { IconAgentPresetOutlineMedium } from './icons.js';
+import { MemberCard } from './MemberCard.js';
+import { InviteDialog } from './InviteDialog.js';
+import css from './MembersView.module.css';
+/**
+ * The main-agent card's model hint: the session's current selection from the
+ * official per-session directory (the same instance the composer's model seat
+ * reads), null before the first load resolves.
+ */
+function MainAgentModelHint({ directory }) {
+    const state = useSyncExternalStore(fn => directory.store.subscribe(fn), () => directory.store.getSnapshot());
+    if (state.current === null)
+        return null;
+    const choice = state.groups
+        .flatMap(group => group.models.map(model => ({ group, model })))
+        .find(entry => entry.group.id === state.current?.provider && entry.model.id === state.current.model);
+    return _jsx(_Fragment, { children: choice?.model.name ?? `${state.current.provider}/${state.current.model}` });
+}
+/** The members tab. */
+export function MembersView({ sessionId, roomStore, roomCwd, openSession, removeMember, updateMember, invite, listProviders, browseDirectory, modelSurface, renderHarnessModelPicker, memberModel, setMemberModel, renderMemberConfiguration, modelDirectory, setCoordinator, t, }) {
+    // Entering the tab pulls the freshest state once.
+    useEffect(() => { void roomStore.refresh(sessionId); }, [roomStore, sessionId]);
+    const state = useSyncExternalStore(roomStore.subscribe, () => roomStore.getCached(sessionId));
+    const [dialog, setDialog] = useState(null);
+    const [providers, setProviders] = useState(undefined);
+    const [notice, setNotice] = useState(null);
+    const [error, setError] = useState(null);
+    /** The CLI members' effective models, keyed by member name (the cards' hints). */
+    const [memberModels, setMemberModels] = useState(new Map());
+    const anyRunning = state?.runs.some(run => run.state === 'running') ?? false;
+    const [, setTick] = useState(0);
+    useEffect(() => {
+        if (!anyRunning)
+            return undefined;
+        const timer = setInterval(() => { setTick(value => value + 1); }, 1000);
+        return () => { clearInterval(timer); };
+    }, [anyRunning]);
+    // The cards' model hints: one memberModel read per dispatched CLI member,
+    // refetched with the store (a switch through the member composer or the
+    // edit dialog lands on the next refresh). Null/absent answers render no
+    // hint — the pre-broker behavior exactly.
+    useEffect(() => {
+        if (memberModel === undefined)
+            return;
+        const fetchable = (state?.members ?? [])
+            .filter(member => member.kind === 'cli' && member.childSessionId !== undefined);
+        let cancelled = false;
+        void Promise.all(fetchable.map(async (member) => [member.name, await memberModel(member.childSessionId)])).then((results) => {
+            if (cancelled)
+                return;
+            const next = new Map();
+            for (const [name, info] of results) {
+                if (info === null || info === undefined)
+                    continue;
+                next.set(name, info.effective ?? t('members.model.default'));
+            }
+            setMemberModels(next);
+        });
+        return () => { cancelled = true; };
+    }, [memberModel, state?.members, t]);
+    const flash = (message) => {
+        setNotice(message);
+        setTimeout(() => { setNotice(null); }, 3000);
+    };
+    const openInvite = () => {
+        setProviders(undefined);
+        setDialog({ mode: 'invite' });
+        void listProviders().then(setProviders);
+    };
+    const submitDialog = async (values) => {
+        if (dialog === null)
+            return { ok: false, message: '' };
+        if (dialog.mode === 'edit') {
+            // Diff against the member record: only changed fields ride the patch;
+            // an emptied cwd/instructions CLEARS (null) back to the inherit/no-
+            // preset state.
+            const member = dialog.member;
+            const name = values.name.trim();
+            const cwd = values.cwd.trim();
+            const instructions = values.instructions.trim();
+            const model = values.model.trim();
+            const modelChanged = model !== values.modelBaseline.trim() && !(member.childSessionId !== undefined && renderMemberConfiguration !== undefined);
+            if (modelChanged && member.childSessionId !== undefined) {
+                if (setMemberModel === undefined)
+                    return { ok: false, message: t('invite.error.generic') };
+                // Compatibility entry also uses the core queue. No journaled model
+                // mutation for a started member: its durable owner is local-agent.
+                const result = await setMemberModel(member.childSessionId, model === '' ? undefined : model);
+                if (result === undefined)
+                    return { ok: false, message: t('invite.error.generic') };
+                if (!result.ok)
+                    return { ok: false, message: result.error };
+            }
+            const patch = {
+                ...name !== member.name ? { rename: name } : {},
+                ...cwd !== (member.cwd ?? '') ? { cwd: cwd === '' ? null : cwd } : {},
+                ...instructions !== (member.instructions ?? '')
+                    ? { instructions: instructions === '' ? null : instructions }
+                    : {},
+                // The journaled intent: the first dispatch binds it for a never-
+                // started member (the broker call above is a no-op there — no
+                // delegation record — so this value alone carries the edit).
+                ...modelChanged && member.childSessionId === undefined ? { model: model === '' ? null : model } : {},
+            };
+            return Object.keys(patch).length === 0 ? { ok: true } : updateMember(member.name, patch);
+        }
+        const outcome = await 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 },
+        });
+        if (outcome.ok) {
+            flash(outcome.pendingFirstTask
+                ? t('invite.success.task', { member: values.name })
+                : t('invite.success.idle', { member: values.name }));
+        }
+        return outcome;
+    };
+    const remove = async (member) => {
+        if (!window.confirm(t('members.removeConfirm', { member: member.name })))
+            return;
+        const outcome = await removeMember(member.name);
+        if (!outcome.ok)
+            setError(outcome.message);
+    };
+    const dialogNode = dialog !== null && (_jsx(InviteDialog, { mode: dialog.mode, member: dialog.mode === 'edit' ? dialog.member : undefined, providers: providers?.providers, localAgentAvailable: providers?.localAgentAvailable ?? true, inheritedCwd: roomCwd, existingNames: (state?.members ?? []).map(entry => entry.name), browseDirectory: browseDirectory, modelSurface: modelSurface, renderHarnessModelPicker: renderHarnessModelPicker, memberModel: memberModel, memberConfiguration: dialog.mode === 'edit' && dialog.member.childSessionId !== undefined ? renderMemberConfiguration?.(dialog.member.childSessionId) : undefined, onSubmit: submitDialog, onClose: () => { setDialog(null); }, t: t }));
+    // A plain session gets the centered guide state (the official empty-state
+    // shape: glyph → title → one-line explainer → primary action) instead of
+    // the bare "not a room": inviting an agent IS the promotion (the header
+    // action is its twin entry).
+    if (roomStore.isRoomCached(sessionId) === false) {
+        return (_jsxs("div", { className: css.guide, children: [_jsx("span", { className: css.guideIcon, "aria-hidden": true, children: _jsx(IconAgentPresetOutlineMedium, { size: 30 }) }), _jsx("p", { className: css.guideTitle, children: t('members.notRoomTitle') }), _jsx("p", { className: css.guideHint, children: t('members.notRoom') }), _jsx(Button, { variant: "primary", onClick: openInvite, children: t('members.notRoomAction') }), dialogNode] }));
+    }
+    if (state === undefined)
+        return null;
+    return (_jsxs("div", { className: css.members, children: [_jsxs("div", { className: css.grid, children: [state.members.map((member) => {
+                        const run = state.runs.find(entry => entry.member === member.name);
+                        const running = run?.state === 'running';
+                        return (_jsx(MemberCard, { coordinator: coordinatorMember(state)?.name === member.name, onPromote: setCoordinator === undefined || member.id === undefined ? undefined : () => {
+                                void setCoordinator(member.id, state.coordinator?.revision ?? 0).then(outcome => { if (!outcome.ok)
+                                    setError(outcome.message); });
+                            }, member: member, run: run, elapsedMs: running ? Date.now() - (run?.startedAt ?? Date.now()) : undefined, openSession: openSession, onEdit: () => { setDialog({ mode: 'edit', member }); }, onRemove: () => { void remove(member); }, modelHint: member.kind === 'main-agent'
+                                ? (modelDirectory !== undefined ? _jsx(MainAgentModelHint, { directory: modelDirectory }) : undefined)
+                                : memberModels.get(member.name), t: t }, member.id ?? member.name));
+                    }), _jsx("button", { type: "button", className: css.invite, onClick: openInvite, children: t('members.invite') })] }), notice !== null && _jsx("div", { className: css.notice, role: "status", children: notice }), error !== null && _jsx("div", { className: css.error, role: "alert", children: error }), dialogNode] }));
+}

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

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import type { SessionId } from '@deepseek-ai/dsh-session/types';
+import type { ComposerChainProps } from '@deepseek-ai/dsh-client-ui-conversation/client';
+import type { RoomComposerMatch, RoomComposerProps } from './slots.ts';
+/**
+ * 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 declare function selectRoomComposer(owner: ComposerChainProps, isRoomCached: (sessionId: SessionId) => boolean): RoomComposerMatch | null;
+/** The room composer takeover component. */
+export declare 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, }: RoomComposerProps): ReactNode;
+//# sourceMappingURL=RoomComposer.d.ts.map