@corenel/web-ui 0.10.0 → 0.11.0

package/dist/agentChat/AgentChat.js

@@ -37,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';
@@ -48,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
@@ -79,7 +82,7 @@ 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
@@ -157,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.
@@ -380,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);
@@ -525,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, []);
         })();
@@ -633,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(' ');
@@ -852,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;
@@ -860,9 +884,10 @@ 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);
     }
@@ -877,103 +902,205 @@ export function AgentChat(props) {
     const skinReach = SKIN_REACH[transcriptSkin];
     const headerOutside = skinReach.chat && !skinReach.header;
     const chatWords = skinReach.chat ? CHAT_WORDS[transcriptSkin] ?? {} : {};
-    const headerEl = (_jsxs("header", { style: S.head, "data-chat-part": "header", "data-chat-running": running ? '' : undefined, 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) {
+    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 })] })), 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)))] }))] }));
-    return (_jsxs("div", { style: S.panel, 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 ?? '' }), 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, "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 })] }), 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) => {
+                } }, 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); } })), 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);
-                        } }), 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) })] }));
+                        } }), _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)' },
@@ -1009,7 +1136,9 @@ const S = {
     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.
@@ -1023,8 +1152,6 @@ 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 },