@corenel/web-ui 0.9.0 → 0.11.0

package/dist/agentChat/AgentChat.js

@@ -16,7 +16,9 @@ import { AskUser } from '../AskUser';
 import { Lightbox } from '../Lightbox';
 import { ContextBar } from '../ContextBar';
 import { useTranscriptView } from '../transcriptView';
-import { useTranscriptSkin, skinCommand } from '../transcriptSkin';
+import { useTranscriptSkin, skinCommand, SKIN_REACH } from '../transcriptSkin';
+import { ChatSkinRoot, CHAT_WORDS } from '../chatSkin';
+import { plainName } from '../chatSkinContext';
 import { ToolFold } from '../ToolFold';
 import { useArrivalEffect, effectCommand, prefersReducedMotion, resolveArrivalEffect } from '../arrivalEffect';
 import { LiveAnswer } from '../fx/LiveAnswer';
@@ -35,9 +37,12 @@ import { isDeferredTool } from '@corenel/harness/tools/toolSearch';
 import { addLoadedTools } from '@corenel/tools-web/sessionLoadedTools';
 import { useContextDocs, addDoc, removeDoc, classifyUpload, looksBinary, ContextDocError, UPLOAD_ACCEPT } from '@corenel/tools-web/contextDocs';
 import { DictateButton } from '../DictateButton';
+import { resolveDictation } from '@corenel/tools-web/speech/route';
 import { browserModelHost } from '@corenel/tools-web/speech/model';
 import { appendDictated } from './appendDictated';
 import { TodoBar } from '../TodoBar';
+import { DockStatus } from '../DockStatus';
+import { useTodos } from '@corenel/harness/todos';
 import { CommandTray, RunningCommand } from '../CommandTray';
 import { trayCommand, transcriptTurns } from '../commandTurn';
 import { composerHistory } from '../composerHistory';
@@ -46,7 +51,7 @@ import { fmtTok } from '@corenel/ui-kit/usage';
 import { isCheckpointTool } from '@corenel/protocol';
 import { PlanApprovalCard, SUBMIT_PLAN, planTextOf } from './PlanReview';
 import { useBrand } from '@corenel/ui-kit/host';
-import { IcPlus, IcZap, IcTrash, IcChevron, IcX, IcRefresh, IcKey, IcCheck, IcSliders, IcUser, IcFile, IcHelp, IcEdit, IcLayout, Spinner, LiveCursor } from '@corenel/ui-kit/icons';
+import { IcPlus, IcZap, IcTrash, IcChevron, IcX, IcRefresh, IcKey, IcCheck, IcSliders, IcUser, IcFile, IcHelp, IcEdit, IcLayout, IcCode, IcMic, IcClock, Spinner, LiveCursor } from '@corenel/ui-kit/icons';
 /* No NOOP default for onApplyEdit, deliberately. Transcript treats the prop's
  * ABSENCE as "this surface has nothing to apply an edit to" and renders the
  * review row as a statement instead of dead buttons. Substituting a no-op here
@@ -77,14 +82,14 @@ const PS = {
     textDone: { fontSize: 13, color: 'var(--text-tertiary)', textDecoration: 'line-through' },
 };
 export function AgentChat(props) {
-    const { controller, sessionId, onSessionChange, sessions, aboveComposer, contextWindow, systemSource, offloaded, inPrice, modes, currentSrc, onApplyEdit, renderFence, renderToolCard, emptyState, headerLead, headerExtras, composerRightSlot, title, features, embedded = false, onClose, chips, onRemoveChip, renderContextMenu, capabilities, slashExtra, onSlashAction, interceptSend, onUploadFile, sendOptsExtra, onAfterSend, tip, budgetSection, toolBadge, policyEditor, settingsExtras, LiveTimeline, fixedIdentity, readOnly, planAgents, } = props;
+    const { controller, sessionId, onSessionChange, sessions, aboveComposer, contextWindow, systemSource, offloaded, inPrice, modes, currentSrc, onApplyEdit, renderFence, renderToolCard, emptyState, headerLead, headerExtras, composerToggles, dockStatus, title, features, embedded = false, onClose, chips, onRemoveChip, renderContextMenu, capabilities, slashExtra, onSlashAction, interceptSend, onUploadFile, sendOptsExtra, onAfterSend, tip, budgetSection, toolBadge, policyEditor, settingsExtras, LiveTimeline, fixedIdentity, readOnly, planAgents, contentMaxWidth, startLayout = 'docked', startFooter, } = props;
     const { name: brandName } = useBrand(); // host-injected product name (CorenelHost seam)
     // The engine owns the conversation, run loop, worker, and persistence — this
     // column is a view over ONE controller session. The active session id is
     // CONTROLLED by the host (sessionId/onSessionChange).
     const session = useControllerSession(controller, sessionId ?? '');
     const globalTick = useControllerGlobal(controller); // cross-session changes (titles, run badges)
-    const { turns, input, mode, running, live, recovery, error, suggestions, attachments, pendingPerm, pendingAsk, approvalSuggestion, policyNotes, degradedModel, recEvents, plan, pendingCommand, loaded } = session;
+    const { turns, input, mode, running, live, recovery, error, suggestions, attachments, pendingPerm, pendingAsk, approvalSuggestion, policyNotes, degradedModel, recEvents, plan, pendingCommand, loaded, saveBlocked, mergeTick } = session;
     // Thin engine-routed setters so the render below reads like the old local-state
     // version (same call sites, engine-backed).
     const setInput = useCallback((v) => { if (sessionId)
@@ -155,7 +160,15 @@ export function AgentChat(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [capabilities?.skills, capabilities?.tools]);
     const [ctxMenuOpen, setCtxMenuOpen] = useState(false);
+    /* The mic and send-later live in the "+" menu; these drive them from there.
+     * The mic's own Stop shows in the composer whenever it is busy. */
+    const dictControl = useRef(null);
+    const [laterOpen, setLaterOpen] = useState(false);
+    const todosNow = useTodos(sessionId ?? null);
+    const [dockEmpty, setDockEmpty] = useState(true);
+    const onDockEmpty = useCallback((e) => setDockEmpty(e), []);
     const fileInputRef = useRef(null);
+    const panelRef = useRef(null);
     const [uploadNotice, setUploadNotice] = useState(null);
     /* THE DRAFT AS IT STOOD WHEN THE MIC OPENED, and the whole trick behind live
      * dictation writing into the composer.
@@ -253,6 +266,41 @@ export function AgentChat(props) {
     // A rejection notice is about THIS session's upload attempt; don't let it
     // linger onto another chat.
     useEffect(() => { setUploadNotice(null); }, [sessionId]);
+    /* MERGED IN. A save found another writer (a second tab, the daemon) had
+     * changed this chat and merged its turns in, so the transcript just grew
+     * above where the person was reading. Shown when the tick goes UP while this
+     * chat is on screen -- never for a merge from before it was opened -- and
+     * dismissible, like the upload notice beside it. */
+    const [mergedNotice, setMergedNotice] = useState(false);
+    const mergeSeen = useRef(null);
+    useEffect(() => {
+        const tick = mergeTick ?? 0;
+        const prev = mergeSeen.current;
+        mergeSeen.current = { id: sessionId ?? '', tick };
+        if (prev && prev.id === (sessionId ?? '')) {
+            if (tick > prev.tick)
+                setMergedNotice(true);
+        }
+        else {
+            setMergedNotice(false);
+        }
+    }, [sessionId, mergeTick]);
+    /* The unsaved-chat notice's Retry. Pending while the read and save run, so
+     * a second tap cannot start a second retry; a rejection is swallowed here
+     * because the notice itself is the report -- it stays until a save lands. */
+    const [retrying, setRetrying] = useState(false);
+    const retryLoad = useCallback(async () => {
+        if (!sessionId || !controller.retryLoad)
+            return;
+        setRetrying(true);
+        try {
+            await controller.retryLoad(sessionId);
+        }
+        catch { /* the notice stays */ }
+        finally {
+            setRetrying(false);
+        }
+    }, [controller, sessionId]);
     const [selPolicy, setSelPolicy] = useState(getSelectedPolicyName);
     const selectPolicy = useCallback((name) => { setSelPolicy(name); setSelectedPolicyName(name); }, []);
     const policyName = fixedIdentity?.policyName ?? selPolicy;
@@ -343,7 +391,8 @@ export function AgentChat(props) {
         return () => clearInterval(t);
     }, [running]);
     const newSession = async () => {
-        const id = await controller.newSession();
+        // A draft: nothing is saved, or listed, until the first send.
+        const id = await (controller.newDraft ? controller.newDraft() : controller.newSession());
         onSessionChange(id);
         refreshSessions();
         setMenuOpen(false);
@@ -414,7 +463,7 @@ export function AgentChat(props) {
         const beforeExtra = [
             { name: 'new', hint: 'start a fresh chat', section: 'Session', icon: _jsx(IcPlus, { size: 13 }), kind: 'action' },
             { name: 'clear', hint: 'clear this conversation', section: 'Session', icon: _jsx(IcRefresh, { size: 13 }), kind: 'action' },
-            { name: 'skin', hint: 'Change how the transcript looks', section: 'Session', icon: _jsx(IcLayout, { size: 13 }), kind: 'action' },
+            { name: 'skin', hint: 'Change how the chat looks', section: 'Session', icon: _jsx(IcLayout, { size: 13 }), kind: 'action' },
             { name: 'effect', hint: 'Change how new text arrives', section: 'Session', icon: _jsx(IcZap, { size: 13 }), kind: 'action' },
             ...(renderContextMenu ? [{ name: 'context', hint: 'attach files or selection', section: 'Workspace', icon: _jsx(IcFile, { size: 13 }), kind: 'action' }] : []),
             { name: 'persona', hint: 'switch the agent persona', section: 'Workspace', icon: _jsx(IcUser, { size: 13 }), kind: 'action' },
@@ -488,7 +537,7 @@ export function AgentChat(props) {
         void (async () => {
             if (!text || running)
                 return;
-            if (interceptSend && (await interceptSend(text)))
+            if (interceptSend && (await interceptSend(text, [])))
                 return;
             await sendMessage(text, []);
         })();
@@ -596,12 +645,19 @@ export function AgentChat(props) {
         if (interceptSend) {
             const prior = input;
             setInput('');
-            if (await interceptSend(text))
+            // The attachments go with the text, both ways: cleared now, restored if
+            // declined. Left behind, an image-mode send's screenshot sat in the
+            // composer after the image it was attached to had been made.
+            if (images.length)
+                setAttachments(() => []);
+            if (await interceptSend(text, images))
                 return;
             // Declined: it was never ours to take. Restoring matters most for the
             // slash path below, where a 'prefilled' template is left in the composer
             // for review and an optimistic clear would have wiped it.
             setInput(prior);
+            if (images.length)
+                setAttachments(() => images);
         }
         if (text.startsWith('/') && images.length === 0) {
             const [cmd, ...rest] = text.slice(1).split(' ');
@@ -815,6 +871,11 @@ export function AgentChat(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }), [sessionId, session.turns]);
     const menuEnabled = features?.sessionMenu !== false && !readOnly;
+    // Full-bleed surface, capped content: the panel and skin paint fill the stage
+    // while the header row, body content and dock share one centred column.
+    const cap = contentMaxWidth
+        ? { width: '100%', maxWidth: contentMaxWidth, marginInline: 'auto', boxSizing: 'border-box' }
+        : null;
     // Defaults true: every existing surface runs our loop, and only a proxied
     // engine opts out.
     const ownLoop = features?.ownLoop !== false;
@@ -823,104 +884,223 @@ export function AgentChat(props) {
     // A host card per live tool, built from the same call shape the settled
     // transcript hands renderToolCard, so a card does not change on settle. A
     // non-null card wins in every skin and effect: never folded, never a board row.
+    // The result goes along once the tool is done, as the settled transcript does.
     const liveCards = new Map();
     for (const t of live?.tools ?? []) {
-        const card = renderToolCard?.({ id: t.id, type: 'function', function: { name: t.name, arguments: JSON.stringify(t.args || {}) } });
+        const card = renderToolCard?.({ id: t.id, type: 'function', function: { name: t.name, arguments: JSON.stringify(t.args || {}) } }, t.done && t.result !== undefined ? { text: t.result, isError: !!t.isError } : undefined);
         if (card)
             liveCards.set(t.id, card);
     }
-    return (_jsxs("div", { style: S.panel, children: [_jsxs("header", { style: S.head, children: [headerLead, !menuEnabled ? (_jsx("span", { style: S.sessionName, children: title ?? brandName })) : renaming && renaming.id === sessionId ? (_jsx("input", { autoFocus: true, style: S.renameInput, value: renaming.title, onChange: (e) => setRenaming({ id: renaming.id, title: e.target.value }), onKeyDown: renameKey, onBlur: commitRename, placeholder: "Session name", "aria-label": "Rename session" })) : (_jsxs("div", { style: S.sessionBtn, onClick: () => { setMenuOpen((o) => !o); }, onDoubleClick: (e) => { if (sessionId) {
-                            e.stopPropagation();
-                            startRename(sessionId);
-                        } }, title: sessionId ? 'Double-click to rename' : undefined, children: [_jsx(IcZap, { size: 14 }), _jsx("span", { style: S.sessionName, children: sessionTitle }), _jsx(IcChevron, { size: 12 })] })), running && (_jsxs("span", { style: S.runChip, title: "The model is working \u2014 press Stop to cancel", children: [_jsx(Spinner, { size: 12 }), _jsx("span", { children: runElapsed > 0 ? `${runElapsed}s` : 'working…' })] })), _jsx("div", { style: { flex: 1, minWidth: 8 } }), headerExtras, !readOnly && _jsx("button", { style: S.iconBtn, onClick: newSession, title: "New chat", "aria-label": "New chat", children: _jsx(IcPlus, { size: 16 }) }), _jsx("button", { style: { ...S.iconBtn, ...(drawerOpen ? S.iconBtnActive : null) }, onClick: () => setDrawerOpen((o) => !o), title: fixedIdentity ? 'Display & capabilities' : `Persona, display & capabilities — ${personaLabel}`, "aria-label": "Panel options", children: _jsx(IcSliders, { size: 16 }) }), !embedded && onClose && _jsx("button", { style: S.iconBtn, onClick: onClose, title: "Close (\u2318K to reopen)", "aria-label": "Close", children: _jsx(IcX, { size: 16 }) }), menuEnabled && menuOpen && (_jsxs("div", { style: S.menu, onMouseLeave: () => setMenuOpen(false), children: [_jsxs("button", { style: S.menuItem, onClick: newSession, children: [_jsx(IcPlus, { size: 13 }), " New chat"] }), _jsx("div", { style: S.menuLabel, children: "Recent" }), sessionList.length === 0 && _jsx("div", { style: S.menuEmpty, children: "No saved chats" }), sessionList.slice(0, 12).map((s) => (_jsx("div", { style: S.menuRow, children: renaming && renaming.id === s.id ? (_jsx("input", { autoFocus: true, style: S.renameInput, value: renaming.title, onChange: (e) => setRenaming({ id: s.id, title: e.target.value }), onKeyDown: renameKey, onBlur: commitRename, placeholder: "Session name", "aria-label": "Rename session", onClick: (e) => e.stopPropagation() })) : (_jsxs(_Fragment, { children: [_jsx("button", { style: menuSession(s.id === sessionId), onClick: () => switchSession(s.id), children: s.title || 'Untitled' }), _jsx("button", { style: S.menuDel, onClick: () => startRename(s.id), title: "Rename", children: _jsx(IcEdit, { size: 12 }) }), _jsx("button", { style: S.menuDel, onClick: () => deleteSession(s.id), title: "Delete", children: _jsx(IcTrash, { size: 12 }) })] })) }, s.id)))] }))] }), ownLoop && _jsx(OptionsDrawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), personaName: personaName, onPersona: pickPersona, policyName: policyName, onPolicy: selectPolicy, hideIdentity: !!fixedIdentity, budgetSection: budgetSection?.({ override, setOverride }), settingsExtras: settingsExtras, toolBadge: toolBadge, policyEditor: policyEditor, registryTick: registryTick, capabilities: capabilities, sessionId: sessionId ?? '' }), ownLoop && !readOnly && _jsx(ContextBar, { contextWindow: contextWindow, systemSource: resolveSystemSource(), offloaded: offloaded, conversation: conversation, sessionId: sessionId ?? '' }), _jsxs("div", { style: S.chatRegion, children: [_jsxs("div", { style: { ...S.body, ...(timelineScrubbed ? { display: 'none' } : null) }, ref: bodyRef, "data-testid": "chat-body", onScroll: onBodyScroll, children: [turns.length === 0 && !live && (loaded !== false
-                                ? (readOnly ? null : emptyState?.({ setInput }))
-                                : _jsxs("div", { style: S.loadingTranscript, children: [_jsx(Spinner, { size: 14, title: "Loading conversation" }), " Loading conversation\u2026"] })), _jsxs("div", { style: S.transcriptWrap, children: [_jsx(Transcript, { turns: shownTurns, currentSrc: currentSrc ?? '', view: transcriptView, skin: transcriptSkin, handoff: handoff ?? undefined, onHandoffDone: () => setHandoff(null), onApplyEdit: onApplyEdit, onToggleInclude: readOnly ? undefined : toggleInclude, onRetry: readOnly ? undefined : onRetry, onImageClick: setLightboxSrc, renderFence: renderFence, renderToolCard: renderToolCard, footer: live ? (_jsxs("div", { style: fx === 'matrix' ? { ...S.live, position: 'relative', isolation: 'isolate' } : S.live, children: [fx === 'matrix' && _jsx(MatrixRain, { active: running }), recovery && _jsxs("div", { style: S.recovery, children: [_jsx(Spinner, { size: 13, title: "Recovering" }), " ", recovery] }), fx === 'splitflap' && live.tools.filter((t) => t.name !== 'propose_edit' && !liveCards.has(t.id)).map((t) => (_jsx("div", { "data-fx-id": t.id, children: _jsx(FlapRow, { status: t.done ? (t.isError ? 'failed' : 'done') : 'running', name: t.name.replace(/_/g, ' '), detail: Object.values(t.args ?? {}).find((v) => typeof v === 'string') ?? '' }) }, t.id))), fx !== 'splitflap' && transcriptSkin === 'minimal' && (_jsx(ToolFold, { invs: live.tools.filter((t) => t.name !== 'propose_edit' && !liveCards.has(t.id)).map((t) => ({
-                                                        name: t.name, args: t.args || {}, result: t.result ?? '', isError: t.isError, running: !t.done, ms: t.ms,
-                                                    })), view: transcriptView })), live.tools.filter((t) => (fx !== 'splitflap' && transcriptSkin !== 'minimal') || t.name === 'propose_edit' || liveCards.has(t.id)).map((t) => liveCards.has(t.id) ? (
-                                                // A host card replaces the default card mid-run too.
-                                                _jsx(React.Fragment, { children: liveCards.get(t.id) }, t.id)) : t.name === 'propose_edit' ? (
-                                                // propose_edit BLOCKS its run on the review, so the decidable card
-                                                // must render here, mid-run — not only in the settled transcript.
-                                                _jsx(DiffProposal, { call: { id: t.id, type: 'function', function: { name: 'propose_edit', arguments: JSON.stringify(t.args || {}) } }, currentSrc: currentSrc ?? '', onApplyEdit: onApplyEdit, view: transcriptView }, t.id)) : t.done ? (
-                                                // A tool that finished mid-run gets the SAME expandable card as the
-                                                // settled transcript, so its args/result are viewable before the
-                                                // turn ends (not just a bare summary line).
-                                                // data-fx-id stays the same across running -> done, so an effect
-                                                // treats the swap as the same tool line (one rock, one animation).
-                                                _jsx("div", { "data-fx-id": t.id, children: _jsx(ToolResultCard, { inv: { name: t.name, args: t.args || {}, result: t.result ?? '', isError: t.isError, running: false, ms: t.ms } }) }, t.id)) : (
-                                                // The name animates once, here, when the tool appears.
-                                                _jsx("div", { "data-fx-id": t.id, style: S.liveToolRow, children: _jsx(ToolLine, { name: t.name, args: t.args || {}, result: t.result, isError: t.isError, running: true, ms: t.ms, nameFx: fx }) }, t.id))), live.text && fx === 'netsplit' && !hasAnswer && _jsx(NetsplitJoin, {}), live.text ? _jsxs(_Fragment, { children: [_jsx("div", { "data-tx-part": "assistant", children: _jsx(LiveAnswer, { text: live.text, effect: fx, complete: !running, onProgress: (n) => { liveShownRef.current = n; } }) }), running && _jsx(LiveCursor, {})] }) : (!recovery && live.tools.length === 0 && (_jsxs("div", { style: S.thinkingWrap, children: [_jsxs("div", { style: S.thinking, children: [_jsx(Spinner, { size: 14, title: "Thinking" }), " thinking\u2026"] }), tip && _jsx("div", { style: S.tipGhost, children: tip })] })))] })) : undefined }), plan && plan.length > 0 && _jsx(PlanCard, { entries: plan })] }), pendingPerm && pendingPerm.tool === SUBMIT_PLAN && (_jsx(PlanApprovalCard, { agent: pendingPerm.agent ?? 'This agent', plan: planTextOf(undefined, pendingPerm.summary), ...(planAgents ? { agents: planAgents } : {}), onApprove: () => resolvePerm(true), onDeny: (note) => resolvePerm(false, false, note) })), pendingPerm && pendingPerm.tool !== SUBMIT_PLAN && (_jsxs("div", { style: S.perm, children: [_jsxs("div", { style: S.permHead, children: [_jsx(IcKey, { size: 14 }), " ", pendingPerm.tool === 'budget' ? 'Budget limit reached' : 'Permission needed'] }), _jsx("div", { style: S.permBody, children: pendingPerm.tool === 'budget'
-                                            ? pendingPerm.summary
-                                            : (_jsxs(_Fragment, { children: [pendingPerm.requester === 'you'
-                                                        ? 'Your command needs'
-                                                        : pendingPerm.agent
-                                                            ? _jsxs(_Fragment, { children: [_jsx("strong", { children: pendingPerm.agent }), " (called by ", pendingPerm.caller ?? 'this agent', ") wants to use"] })
-                                                            : 'The agent wants to use', ' ', _jsx("strong", { children: pendingPerm.tool }), ". ", pendingPerm.summary] })) }), _jsx("div", { style: S.permActions, children: pendingPerm.tool === 'budget' ? (_jsxs(_Fragment, { children: [_jsx("button", { style: S.permDeny, onClick: () => resolvePerm(false), children: "Stop" }), _jsxs("button", { style: S.permAllow, onClick: () => resolvePerm(true), children: [_jsx(IcCheck, { size: 12 }), " Continue"] })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { style: S.permDeny, onClick: () => resolvePerm(false), children: "Deny" }), !isCheckpointTool(pendingPerm.tool) && (_jsx("button", { style: S.permAllowSession, onClick: () => resolvePerm(true, true), children: "Allow for session" })), _jsxs("button", { style: S.permAllow, onClick: () => resolvePerm(true), children: [_jsx(IcCheck, { size: 12 }), " Allow once"] })] })) })] })), approvalSuggestion && !pendingPerm && (_jsxs("div", { style: S.approvalSuggest, role: "status", "aria-live": "polite", children: [_jsxs("div", { children: ["You've allowed ", _jsx("strong", { children: approvalSuggestion.tool }), " ", approvalSuggestion.count, " times", approvalSuggestion.scope === 'workspace' ? ' in this workspace' : '', ". Always allow it?"] }), _jsxs("div", { style: S.permActions, children: [approvalSuggestion.scopeChoice ? (_jsxs(_Fragment, { children: [_jsx("button", { style: S.permAllowSession, onClick: () => respondSuggestion('workspace'), children: "This workspace" }), _jsx("button", { style: S.permAllowSession, onClick: () => respondSuggestion('global'), children: "Everywhere" })] })) : (_jsx("button", { style: S.permAllowSession, onClick: () => respondSuggestion('global'), children: "Always allow" })), _jsx("button", { style: S.permDeny, onClick: () => respondSuggestion('not-now'), children: "Not now" }), _jsx("button", { style: S.permDeny, onClick: () => respondSuggestion('never'), children: "Never" })] })] })), policyNotes.map((n, i) => (_jsxs("div", { style: n.action === 'stop' ? S.policyStop : S.policyWarn, children: [_jsx(IcKey, { size: 12 }), " Policy (", policyName, "): ", n.message] }, i))), error && _jsx("div", { style: S.error, children: error }), !readOnly && !running && !error && suggestions.length > 0 && (_jsx("div", { style: S.followRow, children: suggestions.map((sg) => (_jsx("button", { style: S.followChip, onClick: () => setInput(sg), title: "Use this follow-up", children: sg }, sg))) }))] }), LiveTimeline && _jsx(LiveTimeline, { events: recEvents, running: running, onScrubbedChange: setTimelineScrubbed })] }), ctxMenuOpen && (_jsxs("div", { style: S.ctxMenu, onMouseLeave: () => setCtxMenuOpen(false), children: [renderContextMenu?.(() => setCtxMenuOpen(false)), _jsxs("button", { style: S.menuItem, disabled: !sessionId, onClick: () => fileInputRef.current?.click(), children: [_jsx(IcFile, { size: 13 }), " Upload document\u2026"] })] })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: UPLOAD_ACCEPT, style: { display: 'none' }, onChange: (e) => {
-                    const files = Array.from(e.target.files ?? []);
-                    e.target.value = '';
-                    setCtxMenuOpen(false);
-                    void processFiles(files);
-                } }), uploadNotice && (_jsxs("div", { style: S.uploadNotice, children: [_jsx("span", { style: { flex: 1, whiteSpace: 'pre-line' }, children: uploadNotice }), _jsx("button", { style: S.uploadNoticeX, onClick: () => setUploadNotice(null), "aria-label": "Dismiss", children: _jsx(IcX, { size: 11 }) })] })), pendingAsk && (_jsx(AskUser, { questions: pendingAsk.questions, onSubmit: (answers) => { if (sessionId)
+    /* The skin reaches past the transcript only for skins whose SKIN_REACH says
+     * so. The header and the options drawer sit inside the root, in their
+     * original order, for every skin: an unskinned chat's DOM (and so its tab
+     * order) is as before, a skin change restyles in place rather than
+     * remounting, and a drawer opened from a skinned header looks like it. The
+     * one exception is a chat-reach skin that leaves its header out: the header
+     * then renders above the root. The lightbox, a neutral image viewer, stays
+     * outside and keeps the app theme. */
+    const skinReach = SKIN_REACH[transcriptSkin];
+    const headerOutside = skinReach.chat && !skinReach.header;
+    const chatWords = skinReach.chat ? CHAT_WORDS[transcriptSkin] ?? {} : {};
+    const HeadRow = cap ? 'div' : 'header';
+    const headerRow = (_jsxs(HeadRow, { style: cap ? { ...S.head, ...cap } : S.head, "data-chat-part": "header", "data-chat-running": running ? '' : undefined, ...(cap ? { 'data-content-cap': '' } : null), children: [headerLead, !menuEnabled ? (_jsx("span", { style: S.sessionName, children: title ?? brandName })) : renaming && renaming.id === sessionId ? (_jsx("input", { autoFocus: true, style: S.renameInput, value: renaming.title, onChange: (e) => setRenaming({ id: renaming.id, title: e.target.value }), onKeyDown: renameKey, onBlur: commitRename, placeholder: "Session name", "aria-label": "Rename session" })) : (_jsxs("div", { style: S.sessionBtn, onClick: () => { setMenuOpen((o) => !o); }, onDoubleClick: (e) => { if (sessionId) {
+                    e.stopPropagation();
+                    startRename(sessionId);
+                } }, title: sessionId ? 'Double-click to rename' : undefined, children: [_jsx(IcZap, { size: 14 }), _jsx("span", { style: S.sessionName, children: sessionTitle }), _jsx(IcChevron, { size: 12 })] })), _jsx("div", { style: { flex: 1, minWidth: 8 } }), headerExtras, ownLoop && !readOnly && _jsx(ContextBar, { variant: "inline", contextWindow: contextWindow, systemSource: resolveSystemSource(), offloaded: offloaded, conversation: conversation, sessionId: sessionId ?? '' }), !readOnly && _jsx("button", { style: S.iconBtn, onClick: newSession, title: "New chat", "aria-label": "New chat", children: _jsx(IcPlus, { size: 16 }) }), _jsx("button", { style: { ...S.iconBtn, ...(drawerOpen ? S.iconBtnActive : null) }, onClick: () => setDrawerOpen((o) => !o), title: fixedIdentity ? 'Display & capabilities' : `Persona, display & capabilities — ${personaLabel}`, "aria-label": "Panel options", children: _jsx(IcSliders, { size: 16 }) }), !embedded && onClose && _jsx("button", { style: S.iconBtn, onClick: onClose, title: "Close (\u2318K to reopen)", "aria-label": "Close", children: _jsx(IcX, { size: 16 }) }), menuEnabled && menuOpen && (_jsxs("div", { style: S.menu, onMouseLeave: () => setMenuOpen(false), children: [_jsxs("button", { style: S.menuItem, onClick: newSession, children: [_jsx(IcPlus, { size: 13 }), " New chat"] }), _jsx("div", { style: S.menuLabel, children: "Recent" }), sessionList.length === 0 && _jsx("div", { style: S.menuEmpty, children: "No saved chats" }), sessionList.slice(0, 12).map((s) => (_jsx("div", { style: S.menuRow, children: renaming && renaming.id === s.id ? (_jsx("input", { autoFocus: true, style: S.renameInput, value: renaming.title, onChange: (e) => setRenaming({ id: s.id, title: e.target.value }), onKeyDown: renameKey, onBlur: commitRename, placeholder: "Session name", "aria-label": "Rename session", onClick: (e) => e.stopPropagation() })) : (_jsxs(_Fragment, { children: [_jsx("button", { style: menuSession(s.id === sessionId), onClick: () => switchSession(s.id), children: s.title || 'Untitled' }), _jsx("button", { style: S.menuDel, onClick: () => startRename(s.id), title: "Rename", children: _jsx(IcEdit, { size: 12 }) }), _jsx("button", { style: S.menuDel, onClick: () => deleteSession(s.id), title: "Delete", children: _jsx(IcTrash, { size: 12 }) })] })) }, s.id)))] }))] }));
+    const isPhone = useMatchMedia('(max-width: 640px)');
+    const switchRef = useRef(switchSession);
+    switchRef.current = switchSession;
+    const lastSession = useMemo(() => {
+        const best = sessionList
+            .filter((s) => s.id !== sessionId && typeof s.updatedAt === 'number' && (s.messages === undefined || s.messages.length > 0))
+            .sort((a, b) => (b.updatedAt ?? 0) - (a.updatedAt ?? 0))[0];
+        return best ? { title: best.title || 'Untitled', updatedAt: best.updatedAt ?? 0, open: () => switchRef.current(best.id) } : undefined;
+    }, [sessionList, sessionId]);
+    const showEmpty = turns.length === 0 && !live && loaded !== false && !readOnly;
+    const centered = startLayout === 'centered' && showEmpty && !isPhone;
+    const wasCentered = useRef(centered);
+    /* Moving the dock between the centred start and the panel foot REMOUNTS the
+     * composer (a new parent), so whatever focus it held is gone by the time any
+     * effect runs. Whether it had focus is read here, during the render that
+     * flips `centered` and before React touches the DOM; the old textarea is
+     * still the one in the document. */
+    const composerHadFocus = useRef(false);
+    if (centered !== wasCentered.current && typeof document !== 'undefined') {
+        const old = panelRef.current?.querySelector('[data-chat-part="composer"] textarea');
+        composerHadFocus.current = !!old && old === document.activeElement;
+    }
+    useEffect(() => {
+        const focusComposer = () => requestAnimationFrame(() => panelRef.current?.querySelector('[data-chat-part="composer"] textarea')?.focus());
+        // Centred -> docked once the chat has turns: the first send, and also a
+        // session switch into a chat that already has turns. Both put the caret in
+        // the box, intentionally -- the next thing you do is type.
+        if (wasCentered.current && !centered && (turns.length > 0 || live))
+            focusComposer();
+        // Docked -> centred (a new or emptied chat): keep the caret only if it was
+        // already in the composer; never steal focus from elsewhere on the page.
+        else if (!wasCentered.current && centered && composerHadFocus.current)
+            focusComposer();
+        wasCentered.current = centered;
+        composerHadFocus.current = false;
+        // turns/live are read only on the centred -> docked transition itself.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [centered]);
+    /* Escape closes the "+" menu and hands focus back to the "+" button that
+     * opened it, the way any menu behaves. Listening only while it is open. */
+    useEffect(() => {
+        if (!ctxMenuOpen)
+            return;
+        const onKey = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            setCtxMenuOpen(false);
+            panelRef.current?.querySelector('[data-testid="composer-add"]')?.focus();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [ctxMenuOpen]);
+    const headerEl = cap ? _jsx("header", { style: S.headOuter, children: headerRow }) : headerRow;
+    const composerEl = (_jsx(Composer, { value: input, onChange: setInput, docked: !centered, 
+        // The mic goes in the bottom row's FIXED first position, not the chip
+        // row. It was in the chip row first, and TodoBar shoved it sideways
+        // every time the agent's current task changed -- a control that moves
+        // while the agent works is a control people misclick, and this one's
+        // worst misclick is "I thought I stopped recording". It stays in the
+        // composer either way, which is what keeps it reachable on a phone
+        // (the chat header is not -- see composerSlot.test.ts).
+        //
+        // Rendered here rather than passed in by each host: dictation belongs to
+        // the agent chat, not to any one surface, and four separate wirings
+        // would mean four chances to ship a surface that is silently mute.
+        dictating: dictating, leadSlot: _jsx(DictateButton, { host: browserModelHost(), 
+            // Started from the "+" menu; shows itself (Stop, progress, consent,
+            // errors) only while busy, always in this same first slot.
+            hideWhenIdle: true, controlRef: dictControl, 
+            // Browser or paired sidecar, chosen when a dictation starts.
+            backend: () => { const r = resolveDictation(); return { host: r.host, createDictation: r.createDictation, supported: r.where !== 'none' }; }, 
+            // Capture the draft the moment the mic opens; every guess below joins
+            // onto THIS, never onto the previous guess.
+            onListeningChange: (on) => { if (on)
+                dictationBase.current = inputRef.current; setDictating(on); }, 
+            /* Live guesses go straight into the draft -- that is the feature.
+               EMPTY IS IGNORED, and that is load-bearing: DictateButton clears the
+               guess with onInterim('') AFTER stop() resolves, which is after the
+               final transcript has already landed. Honouring it would recompute
+               `base + ''` and wipe the committed text a beat after showing it. */
+            onInterim: (t) => { if (t)
+                setInput(appendDictated(dictationBase.current, t)); }, onFinal: (t) => setInput(appendDictated(dictationBase.current, t)) }), onSend: send, onStop: () => { stoppedRef.current = true; if (sessionId)
+            controller.stop(sessionId); }, running: running, mode: mode, onModeChange: setMode, modes: modeEntries, chips: [
+            ...(chips ?? []),
+            ...contextDocs.map((d) => ({ id: `doc:${d.id}`, label: `${d.name} · ${fmtTok(d.tokens)} tok`, removable: true })),
+        ], onRemoveChip: (cid) => {
+            if (cid.startsWith('doc:')) {
+                if (sessionId)
+                    removeDoc(sessionId, cid.slice(4));
+            }
+            else
+                onRemoveChip?.(cid);
+        }, onAddContext: () => setCtxMenuOpen((o) => !o), 
+        // The agent's plan, above the composer. prompd.app also has a dock panel
+        // for it; on corenel.ai this is the ONLY place it is visible. Renders
+        // nothing when there are no tasks.
+        // The host's own controls sit BEFORE the task list, so their position
+        // stays put: TodoBar renders nothing when there are no tasks, and a
+        // control that moves as the agent starts and finishes work is a
+        // control people misclick.
+        toggleChips: (composerToggles ?? []).filter((t) => t.on).map((t) => ({
+            id: t.id, label: t.label, icon: t.icon, ...(t.title ? { title: t.title } : {}), onRemove: t.onToggle,
+        })), status: (running || todosNow.length > 0 || degradedModel || dockStatus != null) ? (_jsx(DockStatus, { running: running, elapsed: runElapsed, todos: _jsx(TodoBar, { sessionId: sessionId }), hasTodos: todosNow.length > 0, degradedModel: degradedModel, host: dockStatus, onEmptyChange: onDockEmpty })) : undefined, statusHidden: dockEmpty && !running && todosNow.length === 0 && !degradedModel && pending.length === 0, slashCommands: slashCommands, onPickSlash: (name) => { if (runSlash(name) !== 'prefilled')
+            setInput(''); }, attachments: attachments, onAttach: (urls) => setAttachments((a) => [...a, ...urls]), onRemoveAttachment: (i) => setAttachments((a) => a.filter((_, j) => j !== i)), pending: pending, onQueue: queueCurrent, onInject: injectPending, onRemovePending: (id) => { if (sessionId)
+            removePending(sessionId, id); }, onEditPending: (id, text) => { if (sessionId)
+            editPending(sessionId, id, text); }, onImageClick: setLightboxSrc, inPrice: inPrice, onDropFiles: (files) => void processFiles(files), history: history, sendLater: (_jsx(SendLater, { collapsed: true, open: laterOpen, onOpenChange: setLaterOpen, text: input, onQueued: () => setInput(''), onSendNow: (t) => { void sendMessage(t, []); }, items: laterItems, now: laterNow })) }));
+    /* Everything that sits directly above the dock: notices, a pending question,
+     * the host's aboveComposer, a command in flight and the console tray. It
+     * travels WITH the dock -- into the centred start when the chat is empty,
+     * at the panel foot otherwise -- so it is never stranded far from the box
+     * it belongs to. The read-only bar is not part of it (centred never happens
+     * in read-only). */
+    const noticesEl = (_jsxs(_Fragment, { children: [saveBlocked === 'load-failed' && (_jsxs("div", { style: S.uploadNotice, role: "alert", "data-chat-part": "unsaved", children: [_jsx("span", { style: { flex: 1 }, children: "New messages in this chat are not being saved." }), controller.retryLoad && (_jsx("button", { type: "button", style: S.unsavedRetry, disabled: retrying, onClick: () => { void retryLoad(); }, children: retrying ? 'Retrying...' : 'Retry' }))] })), mergedNotice && (_jsxs("div", { style: S.uploadNotice, role: "status", "data-chat-part": "merged", children: [_jsx("span", { style: { flex: 1 }, children: "Another tab changed this chat; its turns were merged in." }), _jsx("button", { type: "button", style: S.uploadNoticeX, onClick: () => setMergedNotice(false), "aria-label": "Dismiss", children: _jsx(IcX, { size: 11 }) })] })), uploadNotice && (_jsxs("div", { style: S.uploadNotice, children: [_jsx("span", { style: { flex: 1, whiteSpace: 'pre-line' }, children: uploadNotice }), _jsx("button", { style: S.uploadNoticeX, onClick: () => setUploadNotice(null), "aria-label": "Dismiss", children: _jsx(IcX, { size: 11 }) })] })), pendingAsk && (_jsx(AskUser, { questions: pendingAsk.questions, onSubmit: (answers) => { if (sessionId)
                     controller.resolveAsk(sessionId, answers); }, onCancel: () => { if (sessionId)
-                    controller.resolveAsk(sessionId, null); } })), degradedModel && (_jsx("div", { style: S.budgetWrap, children: _jsxs("span", { style: S.budgetDegraded, children: ["Degraded to ", degradedModel, " (budget)"] }) })), readOnly ? (
-            /* WATCH MODE: the whole input region is replaced, not disabled piecemeal.
-               A disabled box with live chips around it still reads as "type here". */
-            _jsxs("div", { style: S.readOnlyBar, role: "region", "aria-label": "Watching this run", children: [_jsx("div", { style: S.readOnlyBanner, children: readOnly.banner }), readOnly.action] })) : (_jsxs(_Fragment, { children: [aboveComposer, pendingCommand && _jsx(RunningCommand, { command: pendingCommand.command, startedAt: pendingCommand.startedAt }), _jsx(CommandTray, { command: tray, onKeep: (turnId) => { if (sessionId)
-                            controller.toggleInclude(sessionId, turnId); }, onDismiss: (turnId) => setDismissed((d) => new Set(d).add(turnId)) }), _jsx(Composer, { value: input, onChange: setInput, 
-                        // The mic goes in the bottom row's FIXED first position, not the chip
-                        // row. It was in the chip row first, and TodoBar shoved it sideways
-                        // every time the agent's current task changed -- a control that moves
-                        // while the agent works is a control people misclick, and this one's
-                        // worst misclick is "I thought I stopped recording". It stays in the
-                        // composer either way, which is what keeps it reachable on a phone
-                        // (the chat header is not -- see composerSlot.test.ts).
-                        //
-                        // Rendered here rather than passed in by each host: dictation belongs to
-                        // the agent chat, not to any one surface, and four separate wirings
-                        // would mean four chances to ship a surface that is silently mute.
-                        dictating: dictating, leadSlot: _jsx(DictateButton, { host: browserModelHost(), 
-                            // Capture the draft the moment the mic opens; every guess below joins
-                            // onto THIS, never onto the previous guess.
-                            onListeningChange: (on) => { if (on)
-                                dictationBase.current = inputRef.current; setDictating(on); }, 
-                            /* Live guesses go straight into the draft -- that is the feature.
-                               EMPTY IS IGNORED, and that is load-bearing: DictateButton clears the
-                               guess with onInterim('') AFTER stop() resolves, which is after the
-                               final transcript has already landed. Honouring it would recompute
-                               `base + ''` and wipe the committed text a beat after showing it. */
-                            onInterim: (t) => { if (t)
-                                setInput(appendDictated(dictationBase.current, t)); }, onFinal: (t) => setInput(appendDictated(dictationBase.current, t)) }), onSend: send, onStop: () => { stoppedRef.current = true; if (sessionId)
-                            controller.stop(sessionId); }, running: running, mode: mode, onModeChange: setMode, modes: modeEntries, chips: [
-                            ...(chips ?? []),
-                            ...contextDocs.map((d) => ({ id: `doc:${d.id}`, label: `${d.name} · ${fmtTok(d.tokens)} tok`, removable: true })),
-                        ], onRemoveChip: (cid) => {
-                            if (cid.startsWith('doc:')) {
-                                if (sessionId)
-                                    removeDoc(sessionId, cid.slice(4));
-                            }
-                            else
-                                onRemoveChip?.(cid);
-                        }, onAddContext: () => setCtxMenuOpen((o) => !o), 
-                        // The agent's plan, above the composer. prompd.app also has a dock panel
-                        // for it; on corenel.ai this is the ONLY place it is visible. Renders
-                        // nothing when there are no tasks.
-                        // The host's own controls sit BEFORE the task list, so their position
-                        // stays put: TodoBar renders nothing when there are no tasks, and a
-                        // control that moves as the agent starts and finishes work is a
-                        // control people misclick.
-                        rightSlot: _jsxs(_Fragment, { children: [composerRightSlot, _jsx(TodoBar, { sessionId: sessionId })] }), slashCommands: slashCommands, onPickSlash: (name) => { if (runSlash(name) !== 'prefilled')
-                            setInput(''); }, attachments: attachments, onAttach: (urls) => setAttachments((a) => [...a, ...urls]), onRemoveAttachment: (i) => setAttachments((a) => a.filter((_, j) => j !== i)), pending: pending, onQueue: queueCurrent, onInject: injectPending, onRemovePending: (id) => { if (sessionId)
-                            removePending(sessionId, id); }, onEditPending: (id, text) => { if (sessionId)
-                            editPending(sessionId, id, text); }, onImageClick: setLightboxSrc, inPrice: inPrice, onDropFiles: (files) => void processFiles(files), history: history, sendLater: (_jsx(SendLater, { text: input, onQueued: () => setInput(''), onSendNow: (t) => { void sendMessage(t, []); }, items: laterItems, now: laterNow })) })] })), lightboxSrc && _jsx(Lightbox, { src: lightboxSrc, onClose: () => setLightboxSrc(null) })] }));
+                    controller.resolveAsk(sessionId, null); } })), readOnly ? null : (_jsxs(_Fragment, { children: [aboveComposer, pendingCommand && _jsx(RunningCommand, { command: pendingCommand.command, startedAt: pendingCommand.startedAt }), _jsx(CommandTray, { command: tray, onKeep: (turnId) => { if (sessionId)
+                            controller.toggleInclude(sessionId, turnId); }, onDismiss: (turnId) => setDismissed((d) => new Set(d).add(turnId)) })] }))] }));
+    const dockEl = (_jsxs("div", { style: S.dockWrap, children: [ctxMenuOpen && (_jsxs("div", { style: S.ctxMenu, onMouseLeave: () => setCtxMenuOpen(false), children: [renderContextMenu?.(() => setCtxMenuOpen(false)), _jsxs("button", { style: S.menuItem, disabled: !sessionId, onClick: () => fileInputRef.current?.click(), children: [_jsx(IcFile, { size: 13 }), " Upload document\u2026"] }), slashCommands.length > 0 && (_jsxs("button", { style: S.menuItem, onClick: () => {
+                            setCtxMenuOpen(false);
+                            setInput('/');
+                            requestAnimationFrame(() => panelRef.current?.querySelector('[data-chat-part="composer"] textarea')?.focus());
+                        }, children: [_jsx(IcCode, { size: 13 }), " Commands"] })), _jsx("div", { style: S.menuLabel, children: "Tools" }), (() => {
+                        const route = resolveDictation();
+                        const label = dictating ? 'Stop dictating'
+                            : route.where === 'sidecar' ? (route.tunnel ? 'Dictate (on your sidecar, via tunnel)' : 'Dictate (on your sidecar)')
+                                : 'Dictate';
+                        const unsupported = dictControl.current?.supported === false;
+                        return (_jsxs("button", { style: S.menuItem, disabled: !dictating && (route.where === 'none' || unsupported), title: dictating ? undefined : route.where === 'none' ? route.reason
+                                : unsupported ? 'Voice input needs a microphone and a browser that supports one.' : undefined, onClick: () => { setCtxMenuOpen(false); void dictControl.current?.toggle(); }, children: [_jsx(IcMic, { size: 13 }), " ", label] }));
+                    })(), _jsxs("button", { style: S.menuItem, disabled: running, title: running ? 'Available when this run finishes' : undefined, onClick: () => { setCtxMenuOpen(false); setLaterOpen(true); }, children: [_jsx(IcClock, { size: 13 }), " Send later\u2026"] }), (composerToggles ?? []).map((t) => (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": t.on, style: S.menuItem, title: t.title, onClick: () => { setCtxMenuOpen(false); t.onToggle(); }, children: [t.icon, " ", _jsx("span", { style: { flex: 1, textAlign: 'left' }, children: t.label }), t.on && _jsx(IcCheck, { size: 13 })] }, t.id)))] })), composerEl] }));
+    return (_jsxs("div", { style: S.panel, ref: panelRef, children: [headerOutside ? headerEl : null, _jsxs(ChatSkinRoot, { skin: transcriptSkin, style: S.skinBody, children: [headerOutside ? null : headerEl, ownLoop && _jsx(OptionsDrawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), personaName: personaName, onPersona: pickPersona, policyName: policyName, onPolicy: selectPolicy, hideIdentity: !!fixedIdentity, budgetSection: budgetSection?.({ override, setOverride }), settingsExtras: settingsExtras, toolBadge: toolBadge, policyEditor: policyEditor, registryTick: registryTick, capabilities: capabilities, sessionId: sessionId ?? '' }), _jsxs("div", { style: S.chatRegion, children: [_jsx("div", { style: { ...S.body, ...(timelineScrubbed ? { display: 'none' } : null) }, ref: bodyRef, "data-testid": "chat-body", onScroll: onBodyScroll, children: _jsxs(CapBox, { cap: cap, extra: S.bodyInner, children: [turns.length === 0 && !live && (loaded !== false
+                                            ? (readOnly ? null : (centered ? (_jsxs("div", { style: S.centerStart, "data-testid": "center-start", children: [emptyState?.({ setInput, lastSession }), noticesEl, dockEl, startFooter?.({ setInput, lastSession })] })) : (_jsxs(_Fragment, { children: [emptyState?.({ setInput, lastSession }), startFooter?.({ setInput, lastSession })] }))))
+                                            : _jsxs("div", { style: S.loadingTranscript, children: [_jsx(Spinner, { size: 14, title: "Loading conversation" }), " Loading conversation\u2026"] })), _jsxs("div", { style: S.transcriptWrap, children: [_jsx(Transcript, { turns: shownTurns, currentSrc: currentSrc ?? '', view: transcriptView, skin: transcriptSkin, handoff: handoff ?? undefined, onHandoffDone: () => setHandoff(null), onApplyEdit: onApplyEdit, onToggleInclude: readOnly ? undefined : toggleInclude, onRetry: readOnly ? undefined : onRetry, onImageClick: setLightboxSrc, renderFence: renderFence, renderToolCard: renderToolCard, footer: live ? (_jsxs("div", { style: fx === 'matrix' ? { ...S.live, position: 'relative', isolation: 'isolate' } : S.live, children: [fx === 'matrix' && _jsx(MatrixRain, { active: running }), recovery && _jsxs("div", { style: S.recovery, children: [_jsx(Spinner, { size: 13, title: "Recovering" }), " ", recovery] }), fx === 'splitflap' && live.tools.filter((t) => t.name !== 'propose_edit' && !liveCards.has(t.id)).map((t) => (_jsx("div", { "data-fx-id": t.id, children: _jsx(FlapRow, { status: t.done ? (t.isError ? 'failed' : 'done') : 'running', name: t.name.replace(/_/g, ' '), detail: Object.values(t.args ?? {}).find((v) => typeof v === 'string') ?? '' }) }, t.id))), fx !== 'splitflap' && transcriptSkin === 'minimal' && (_jsx(ToolFold, { invs: live.tools.filter((t) => t.name !== 'propose_edit' && !liveCards.has(t.id)).map((t) => ({
+                                                                    name: t.name, args: t.args || {}, result: t.result ?? '', isError: t.isError, running: !t.done, ms: t.ms,
+                                                                })), view: transcriptView })), live.tools.filter((t) => (fx !== 'splitflap' && transcriptSkin !== 'minimal') || t.name === 'propose_edit' || liveCards.has(t.id)).map((t) => liveCards.has(t.id) ? (
+                                                            // A host card replaces the default card mid-run too.
+                                                            _jsx(React.Fragment, { children: liveCards.get(t.id) }, t.id)) : t.name === 'propose_edit' ? (
+                                                            // propose_edit BLOCKS its run on the review, so the decidable card
+                                                            // must render here, mid-run — not only in the settled transcript.
+                                                            _jsx(DiffProposal, { call: { id: t.id, type: 'function', function: { name: 'propose_edit', arguments: JSON.stringify(t.args || {}) } }, currentSrc: currentSrc ?? '', onApplyEdit: onApplyEdit, view: transcriptView }, t.id)) : t.done ? (
+                                                            // A tool that finished mid-run gets the SAME expandable card as the
+                                                            // settled transcript, so its args/result are viewable before the
+                                                            // turn ends (not just a bare summary line).
+                                                            // data-fx-id stays the same across running -> done, so an effect
+                                                            // treats the swap as the same tool line (one rock, one animation).
+                                                            _jsx("div", { "data-fx-id": t.id, children: _jsx(ToolResultCard, { inv: { name: t.name, args: t.args || {}, result: t.result ?? '', isError: t.isError, running: false, ms: t.ms } }) }, t.id)) : (
+                                                            // The name animates once, here, when the tool appears.
+                                                            _jsx("div", { "data-fx-id": t.id, style: S.liveToolRow, children: _jsx(ToolLine, { name: t.name, args: t.args || {}, result: t.result, isError: t.isError, running: true, ms: t.ms, nameFx: fx }) }, t.id))), live.text && fx === 'netsplit' && !hasAnswer && _jsx(NetsplitJoin, {}), live.text ? _jsxs(_Fragment, { children: [_jsx("div", { "data-tx-part": "assistant", children: _jsx(LiveAnswer, { text: live.text, effect: fx, complete: !running, onProgress: (n) => { liveShownRef.current = n; } }) }), running && _jsx(LiveCursor, {})] }) : (!recovery && live.tools.length === 0 && (_jsxs("div", { style: S.thinkingWrap, children: [_jsxs("div", { style: S.thinking, children: [_jsx(Spinner, { size: 14, title: "Thinking" }), " thinking\u2026"] }), tip && _jsx("div", { style: S.tipGhost, children: tip })] })))] })) : undefined }), plan && plan.length > 0 && _jsx(PlanCard, { entries: plan })] }), pendingPerm && pendingPerm.tool === SUBMIT_PLAN && (_jsx(PlanApprovalCard, { agent: pendingPerm.agent ?? 'This agent', plan: planTextOf(undefined, pendingPerm.summary), ...(planAgents ? { agents: planAgents } : {}), onApprove: () => resolvePerm(true), onDeny: (note) => resolvePerm(false, false, note) })), pendingPerm && pendingPerm.tool !== SUBMIT_PLAN && (_jsxs("div", { style: S.perm, "data-chat-part": "perm", ...((pendingPerm.tool === 'budget' ? chatWords.budgetTitle : chatWords.permTitle)
+                                                ? { role: 'group', 'aria-label': pendingPerm.tool === 'budget' ? 'Budget limit reached' : 'Permission needed' }
+                                                : {}), children: [_jsx("div", { style: S.permHead, "data-chat-part": "perm-head", children: pendingPerm.tool === 'budget'
+                                                        ? (chatWords.budgetTitle ?? _jsxs(_Fragment, { children: [_jsx(IcKey, { size: 14 }), " Budget limit reached"] }))
+                                                        : (chatWords.permTitle?.(pendingPerm.tool) ?? _jsxs(_Fragment, { children: [_jsx(IcKey, { size: 14 }), " Permission needed"] })) }), _jsx("div", { style: S.permBody, children: pendingPerm.tool === 'budget'
+                                                        ? pendingPerm.summary
+                                                        : (_jsxs(_Fragment, { children: [pendingPerm.requester === 'you'
+                                                                    ? 'Your command needs'
+                                                                    : pendingPerm.agent
+                                                                        ? _jsxs(_Fragment, { children: [_jsx("strong", { children: pendingPerm.agent }), " (called by ", pendingPerm.caller ?? 'this agent', ") wants to use"] })
+                                                                        : 'The agent wants to use', ' ', _jsx("strong", { children: pendingPerm.tool }), ". ", pendingPerm.summary] })) }), _jsx("div", { style: S.permActions, children: pendingPerm.tool === 'budget' ? (_jsxs(_Fragment, { children: [_jsx("button", { style: S.permDeny, "data-chat-part": "perm-deny", ...plainName(chatWords.budgetStop, 'Stop'), onClick: () => resolvePerm(false), children: chatWords.budgetStop ?? 'Stop' }), _jsxs("button", { style: S.permAllow, "data-chat-part": "perm-go", ...plainName(chatWords.budgetContinue, 'Continue'), onClick: () => resolvePerm(true), children: [_jsx(IcCheck, { size: 12 }), " ", chatWords.budgetContinue ?? 'Continue'] })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { style: S.permDeny, "data-chat-part": "perm-deny", ...plainName(chatWords.deny, 'Deny'), onClick: () => resolvePerm(false), children: chatWords.deny ?? 'Deny' }), !isCheckpointTool(pendingPerm.tool) && (_jsx("button", { style: S.permAllowSession, "data-chat-part": "perm-session", ...plainName(chatWords.allowSession, 'Allow for session'), onClick: () => resolvePerm(true, true), children: chatWords.allowSession ?? 'Allow for session' })), _jsxs("button", { style: S.permAllow, "data-chat-part": "perm-go", ...plainName(chatWords.allowOnce, 'Allow once'), onClick: () => resolvePerm(true), children: [_jsx(IcCheck, { size: 12 }), " ", chatWords.allowOnce ?? 'Allow once'] })] })) })] })), approvalSuggestion && !pendingPerm && (_jsxs("div", { style: S.approvalSuggest, role: "status", "aria-live": "polite", "data-chat-part": "suggest", children: [_jsxs("div", { children: ["You've allowed ", _jsx("strong", { children: approvalSuggestion.tool }), " ", approvalSuggestion.count, " times", approvalSuggestion.scope === 'workspace' ? ' in this workspace' : '', ". Always allow it?"] }), _jsxs("div", { style: S.permActions, children: [approvalSuggestion.scopeChoice ? (_jsxs(_Fragment, { children: [_jsx("button", { style: S.permAllowSession, onClick: () => respondSuggestion('workspace'), children: "This workspace" }), _jsx("button", { style: S.permAllowSession, onClick: () => respondSuggestion('global'), children: "Everywhere" })] })) : (_jsx("button", { style: S.permAllowSession, onClick: () => respondSuggestion('global'), children: "Always allow" })), _jsx("button", { style: S.permDeny, onClick: () => respondSuggestion('not-now'), children: "Not now" }), _jsx("button", { style: S.permDeny, onClick: () => respondSuggestion('never'), children: "Never" })] })] })), policyNotes.map((n, i) => (_jsxs("div", { style: n.action === 'stop' ? S.policyStop : S.policyWarn, children: [_jsx(IcKey, { size: 12 }), " Policy (", policyName, "): ", n.message] }, i))), error && _jsx("div", { style: S.error, children: error }), !readOnly && !running && !error && suggestions.length > 0 && (_jsxs("div", { style: S.followRow, "data-chat-part": "followups", children: [chatWords.followups && _jsx("span", { style: S.followLabel, children: chatWords.followups }), suggestions.map((sg) => (_jsx("button", { style: S.followChip, onClick: () => setInput(sg), title: "Use this follow-up", children: sg }, sg)))] }))] }) }), LiveTimeline && _jsx(LiveTimeline, { events: recEvents, running: running, onScrubbedChange: setTimelineScrubbed })] }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: UPLOAD_ACCEPT, style: { display: 'none' }, onChange: (e) => {
+                            const files = Array.from(e.target.files ?? []);
+                            e.target.value = '';
+                            setCtxMenuOpen(false);
+                            void processFiles(files);
+                        } }), _jsxs(CapBox, { cap: cap, children: [centered ? null : noticesEl, readOnly ? (
+                            /* WATCH MODE: the whole input region is replaced, not disabled piecemeal.
+                               A disabled box with live chips around it still reads as "type here". */
+                            _jsxs("div", { style: S.readOnlyBar, role: "region", "aria-label": "Watching this run", children: [_jsx("div", { style: S.readOnlyBanner, children: readOnly.banner }), readOnly.action] })) : (centered ? null : dockEl)] })] }), lightboxSrc && _jsx(Lightbox, { src: lightboxSrc, onClose: () => setLightboxSrc(null) })] }));
+}
+function useMatchMedia(q) {
+    const get = () => typeof matchMedia === 'function' && matchMedia(q).matches;
+    const [m, setM] = useState(get);
+    useEffect(() => {
+        if (typeof matchMedia !== 'function')
+            return;
+        const mq = matchMedia(q);
+        const on = () => setM(mq.matches);
+        on();
+        mq.addEventListener?.('change', on);
+        return () => mq.removeEventListener?.('change', on);
+    }, [q]);
+    return m;
 }
 // Session-row style is keyed by "active" — kept out of S (which is a flat style
 // map) and typed as its own helper.
+function CapBox({ cap, extra, children }) {
+    return cap ? _jsx("div", { "data-content-cap": "", style: { ...cap, ...extra }, children: children }) : _jsx(_Fragment, { children: children });
+}
 const menuSession = (active) => ({ flex: 1, textAlign: 'left', padding: '7px 9px', border: 0, borderRadius: 'var(--radius-sm)', background: active ? 'var(--accent-soft)' : 'transparent', color: active ? 'var(--accent)' : 'var(--text-secondary)', fontSize: 13, cursor: 'pointer', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' });
 const S = {
     panel: { position: 'relative', display: 'flex', flexDirection: 'column', flex: 1, width: '100%', minWidth: 0, height: '100%', background: 'var(--surface-1)', overflow: 'hidden' },
-    head: { position: 'relative', display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 6, rowGap: 6, minHeight: 48, padding: '7px 10px', borderBottom: '1px solid var(--border-subtle)', flexShrink: 0 },
+    // Full-width shell for a capped header row; the rule stays on the capped row so it follows the column.
+    headOuter: { position: 'relative', flexShrink: 0, borderBottom: 'none' },
+    // Same flow as S.body's own, for the capped inner wrapper.
+    bodyInner: { display: 'flex', flexDirection: 'column', gap: 16, flex: '1 0 auto' },
+    head: { position: 'relative', display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 6, rowGap: 6, minHeight: 40, padding: '4px 10px', borderBottom: '1px solid var(--border-subtle)', flexShrink: 0 },
     sessionBtn: { display: 'inline-flex', alignItems: 'center', gap: 7, height: 30, padding: '0 10px', borderRadius: 'var(--radius-sm)', background: 'var(--surface-2)', border: '1px solid var(--border-subtle)', color: 'var(--text-secondary)', cursor: 'pointer', maxWidth: 220, minWidth: 0, flexShrink: 1 },
-    runChip: { display: 'inline-flex', alignItems: 'center', gap: 6, marginLeft: 8, height: 22, padding: '0 9px', borderRadius: 'var(--radius-pill, 999px)', background: 'var(--accent-soft)', border: '1px solid var(--border-accent)', color: 'var(--accent)', fontSize: 11.5, fontWeight: 600, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' },
     sessionName: { fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
     iconBtn: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, border: 0, borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'var(--text-tertiary)', cursor: 'pointer' },
     iconBtnActive: { background: 'var(--accent-soft)', color: 'var(--accent)' },
@@ -931,6 +1111,9 @@ const S = {
     menuRow: { display: 'flex', alignItems: 'center', gap: 4 },
     menuDel: { display: 'inline-flex', width: 26, height: 26, alignItems: 'center', justifyContent: 'center', border: 0, borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'var(--text-disabled)', cursor: 'pointer' },
     renameInput: { flex: 1, minWidth: 0, maxWidth: 240, height: 28, padding: '0 9px', boxSizing: 'border-box', borderRadius: 'var(--radius-sm)', background: 'var(--surface-1)', border: '1px solid var(--border-accent)', color: 'var(--text-primary)', fontSize: 13, fontWeight: 600, fontFamily: 'inherit', outline: 'none' },
+    // Holds everything the chat skin can reach. Same flex role the panel's own
+    // children had, so an unskinned chat lays out exactly as before.
+    skinBody: { position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' },
     chatRegion: { position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' },
     body: { flex: 1, minHeight: 0, overflowY: 'auto', padding: 14, display: 'flex', flexDirection: 'column', gap: 16 },
     // Wraps the settled Transcript + live-run block so a host-injected LiveTimeline
@@ -949,10 +1132,13 @@ const S = {
     error: { fontSize: 12.5, color: 'var(--danger)', background: 'var(--danger-soft)', border: '1px solid var(--danger)', borderRadius: 'var(--radius-sm)', padding: '8px 10px' },
     // Follow-up chips under the latest reply — click to prefill the composer.
     followRow: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 },
+    followLabel: { alignSelf: 'center', fontSize: 10.5, letterSpacing: '0.14em', color: 'var(--text-tertiary)' },
     followChip: { display: 'inline-flex', alignItems: 'center', maxWidth: '100%', padding: '5px 10px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-pill)', background: 'transparent', color: 'var(--text-secondary)', fontSize: 12.5, lineHeight: 1.3, textAlign: 'left', cursor: 'pointer' },
     policyWarn: { display: 'flex', alignItems: 'center', gap: 7, fontSize: 12.5, color: 'var(--warning)', background: 'var(--warning-soft)', border: '1px solid var(--warning)', borderRadius: 'var(--radius-sm)', padding: '8px 10px' },
     policyStop: { display: 'flex', alignItems: 'center', gap: 7, fontSize: 12.5, color: 'var(--danger)', background: 'var(--danger-soft)', border: '1px solid var(--danger)', borderRadius: 'var(--radius-sm)', padding: '8px 10px' },
-    ctxMenu: { margin: '0 10px', padding: 8, background: 'var(--surface-2)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', display: 'flex', flexDirection: 'column', gap: 4 },
+    dockWrap: { position: 'relative' },
+    centerStart: { margin: 'auto 0', display: 'flex', flexDirection: 'column', gap: 20, padding: '24px 0' },
+    ctxMenu: { position: 'absolute', left: 10, bottom: 'calc(100% - 4px)', zIndex: 200, minWidth: 240, boxShadow: 'var(--shadow-3)', padding: 8, background: 'var(--surface-2)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', display: 'flex', flexDirection: 'column', gap: 4 },
     perm: { border: '1px solid var(--warning)', borderRadius: 'var(--radius-md)', background: 'var(--warning-soft)', padding: 12, display: 'flex', flexDirection: 'column', gap: 8 },
     permHead: { display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' },
     // pre-wrap: a submit_plan summary is the whole multi-line plan being approved.
@@ -966,9 +1152,9 @@ const S = {
     approvalSuggest: { border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: 'var(--surface-2)', padding: 12, display: 'flex', flexDirection: 'column', gap: 8 },
     // Per-run budget control — the run chip's soft note when a degrade breach
     // switched the in-flight model.
-    budgetWrap: { position: 'relative', display: 'flex', alignItems: 'center', gap: 8, padding: '0 10px 6px', flexShrink: 0 },
-    budgetDegraded: { fontSize: 11, color: 'var(--warning)' },
     uploadNotice: { display: 'flex', alignItems: 'center', gap: 8, margin: '0 10px 6px', padding: '7px 10px', border: '1px solid var(--warning)', borderRadius: 'var(--radius-sm)', background: 'var(--warning-soft)', color: 'var(--warning)', fontSize: 12.5 },
+    // 44px tall: the one way out of an unsaved chat has to be easy to hit on a phone.
+    unsavedRetry: { minHeight: 44, padding: '0 14px', border: '1px solid var(--warning)', borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'inherit', fontSize: 12.5, fontWeight: 600, cursor: 'pointer', flexShrink: 0 },
     uploadNoticeX: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 20, height: 20, border: 0, borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'inherit', cursor: 'pointer', flexShrink: 0 },
     readOnlyBar: { display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', borderTop: '1px solid var(--border-subtle)', background: 'var(--surface-2)', flexShrink: 0 },
     readOnlyBanner: { flex: 1, minWidth: 0, fontSize: 13, color: 'var(--text-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },