@corenel/web-ui 0.6.0 → 0.8.0

package/dist/agentChat/AgentChat.js

@@ -7,17 +7,23 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * persona/policy selection and the system-parts toggles are owned here (harness
  * get/set); everything editor-specific (context source, tips lifecycle, budget
  * form, host slash commands) comes in via props. */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Transcript, ToolLine, DiffProposal } from '../Transcript';
 import { ToolResultCard } from '../toolRender';
-import { Markdown } from '../RichContent';
 import { Composer } from '../Composer';
 import { SendLater, useSendLater } from '../sendLater/SendLater';
 import { AskUser } from '../AskUser';
 import { Lightbox } from '../Lightbox';
 import { ContextBar } from '../ContextBar';
 import { useTranscriptView } from '../transcriptView';
-import { OptionsDrawer, useMcpTools } from './OptionsDrawer';
+import { useTranscriptSkin, skinCommand } from '../transcriptSkin';
+import { ToolFold } from '../ToolFold';
+import { useArrivalEffect, effectCommand, prefersReducedMotion, resolveArrivalEffect } from '../arrivalEffect';
+import { LiveAnswer } from '../fx/LiveAnswer';
+import { FlapRow } from '../fx/FlapRow';
+import { MatrixRain } from '../fx/MatrixRain';
+import { NetsplitJoin } from '../fx/NetsplitJoin';
+import { OptionsDrawer } from './OptionsDrawer';
 import { useControllerSession, useControllerGlobal } from './controller';
 import { getSelectedPolicyName, setSelectedPolicyName } from '@corenel/harness/guardrail';
 import { loadPersonas, getSelectedPersona, setSelectedPersona } from '@corenel/harness/prompts/config';
@@ -37,8 +43,10 @@ import { trayCommand, transcriptTurns } from '../commandTurn';
 import { composerHistory } from '../composerHistory';
 import { usePendingQueue, addPending, removePending, editPending, setPendingState, getPending, setPendingNote } from './pendingQueue';
 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, IcCode, IcHelp, IcEdit, Spinner, LiveCursor } from '@corenel/ui-kit/icons';
+import { IcPlus, IcZap, IcTrash, IcChevron, IcX, IcRefresh, IcKey, IcCheck, IcSliders, IcUser, IcFile, IcHelp, IcEdit, IcLayout, 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
@@ -69,14 +77,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, usageSurface, inPrice, modes, currentSrc, onApplyEdit, renderFence, emptyState, headerLead, headerExtras, composerRightSlot, title, features, embedded = false, onClose, chips, onRemoveChip, renderContextMenu, capabilities, slashExtra, onSlashAction, interceptSend, onUploadFile, sendOptsExtra, onAfterSend, tip, budgetSection, connections, toolBadge, policyEditor, settingsExtras, LiveTimeline, fixedIdentity, } = 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, } = 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, policyNotes, degradedModel, recEvents, plan, pendingCommand } = session;
+    const { turns, input, mode, running, live, recovery, error, suggestions, attachments, pendingPerm, pendingAsk, approvalSuggestion, policyNotes, degradedModel, recEvents, plan, pendingCommand, loaded } = 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)
@@ -113,6 +121,11 @@ export function AgentChat(props) {
     // so the scrubber's in-flow folded view reclaims its space.
     const [timelineScrubbed, setTimelineScrubbed] = useState(false);
     const [transcriptView] = useTranscriptView();
+    const [transcriptSkin, setTranscriptSkin] = useTranscriptSkin();
+    const [arrivalEffect, setArrivalEffect] = useArrivalEffect();
+    // The effect that plays: the setting ('match' follows the skin's pairing),
+    // and always off when the system asks for reduced motion.
+    const fx = resolveArrivalEffect(arrivalEffect, transcriptSkin, prefersReducedMotion());
     // Installed skills, for the "/" command menu (the drawer's SkillsSection loads its
     // own copy). Subscribe so the menu re-renders when a skill is installed/removed;
     // the same signal bumps registryTick so the drawer's tool groups recompute.
@@ -141,15 +154,6 @@ export function AgentChat(props) {
         return subscribeSkills(reload);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [capabilities?.skills, capabilities?.tools]);
-    // Discovered MCP tools for the "/" command menu — mount-load from cache, then a
-    // forced refresh each time the drawer opens (mirrors the old AgentPanel's
-    // mount-load + drawer-open refresh of its shared list), plus after a
-    // drawer-driven MCP mutation (onConnectionsChanged, Fix 4) so the slash menu
-    // doesn't go stale between drawer opens.
-    const [mcpKey, setMcpKey] = useState(0);
-    useEffect(() => { if (drawerOpen)
-        setMcpKey((k) => k + 1); }, [drawerOpen]);
-    const mcpTools = useMcpTools(connections, mcpKey);
     const [ctxMenuOpen, setCtxMenuOpen] = useState(false);
     const fileInputRef = useRef(null);
     const [uploadNotice, setUploadNotice] = useState(null);
@@ -289,6 +293,27 @@ export function AgentChat(props) {
         return c && !dismissed.has(c.turnId) ? c : null;
     }, [turns, dismissed]);
     const shownTurns = useMemo(() => transcriptTurns(turns), [turns]);
+    // Whether the conversation already has an answer (Netsplit joins only once).
+    const hasAnswer = useMemo(
+    // Multimodal (array) content counts too: any non-empty assistant content.
+    () => shownTurns.some((t) => t.messages.some((m) => m.role === 'assistant' && (typeof m.content === 'string' ? m.content.trim() !== '' : Array.isArray(m.content) && m.content.length > 0))), [shownTurns]);
+    /* Arrival-effect hand-off. Many models deliver the whole answer in one burst
+     * a second or two before the turn settles, so the in-progress area vanishes
+     * mid-reveal. When it does, the newest settled answer carries on from where
+     * the reveal was, then shows plain (Transcript clears it via onHandoffDone).
+     * Decided during render, not in an effect, so the full text never flashes
+     * for a frame first. In memory only: a reload or another chat shows plain. */
+    const liveShownRef = useRef(0);
+    const [handoff, setHandoff] = useState(null);
+    const [handoffWatch, setHandoffWatch] = useState({ live: !!live, sessionId });
+    if (handoffWatch.live !== !!live || handoffWatch.sessionId !== sessionId) {
+        setHandoffWatch({ live: !!live, sessionId });
+        const settled = handoffWatch.live && !live && handoffWatch.sessionId === sessionId;
+        const last = shownTurns[shownTurns.length - 1];
+        setHandoff(settled && fx !== 'none' && last ? { turnId: last.id, effect: fx, from: liveShownRef.current } : null);
+        if (live)
+            liveShownRef.current = 0;
+    }
     /* What Up/Down recall. Derived from the turns rather than kept as you type, so
      * it survives a reload and always matches what is on screen. Includes typed
      * commands, prefix restored, because re-running the last one is the single
@@ -374,17 +399,23 @@ export function AgentChat(props) {
         if (sessionId)
             controller.resolvePerm(sessionId, allow, always);
     };
+    const respondSuggestion = (c) => {
+        if (sessionId)
+            controller.respondSuggestion(sessionId, c);
+    };
     // The "/" command menu = the generic commands, the host's extras, then every
-    // available tool, skill, and MCP tool as an `insert` command that prefills an
+    // available tool (registry MCP tools included) and skill as an `insert` command that prefills an
     // editable request. Rebuilt when the registries change. `context` appears only
     // when the host supplies an add-context popup to open.
     const slashCommands = useMemo(() => {
         // Order matches the old AgentPanel: Session, Workspace(+host extras), Prompt,
-        // Help, then Tools/Skills/MCP inserts. `help` is generic but lands AFTER the
+        // Help, then Tools/Skills inserts. `help` is generic but lands AFTER the
         // host's slashExtra merge so a host's Workspace/Prompt entries stay ahead of it.
         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: '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' },
         ];
@@ -405,12 +436,9 @@ export function AgentChat(props) {
         const skillCmds = skills
             .filter((s) => s.enabled && !staticNames.has(s.name))
             .map((s) => ({ name: s.name, hint: trunc(s.description), section: 'Skills', icon: _jsx(IcZap, { size: 13 }), kind: 'insert', template: `Use the ${s.name} skill to ` }));
-        const mcpCmds = mcpTools
-            .filter((t) => !!t.name && !t.error && !staticNames.has(t.name))
-            .map((t) => ({ name: t.name, hint: trunc(t.description || t.serverLabel), section: 'MCP', icon: _jsx(IcCode, { size: 13 }), kind: 'insert', template: `Use the ${t.name} MCP tool (${t.serverLabel}) to ` }));
-        return [...staticCmds, ...toolCmds, ...skillCmds, ...mcpCmds];
+        return [...staticCmds, ...toolCmds, ...skillCmds];
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [renderContextMenu, slashExtra, capabilities, skills, mcpTools, registryTick]);
+    }, [renderContextMenu, slashExtra, capabilities, skills, registryTick]);
     const slashMap = useMemo(() => Object.fromEntries(slashCommands.map((c) => [c.name, c])), [slashCommands]);
     // Per-send options for the engine. Rebuilt per call so persona/policy/budget are
     // read fresh; `partsOverride` reads through the ref so a toggle right before send
@@ -467,11 +495,11 @@ export function AgentChat(props) {
     };
     // /help renders from the CURRENT resolved slash set, not a static blurb — so
     // every surface (editor, /agent, /craft) lists exactly its own commands. Tools/
-    // Skills/MCP are excluded (those are insert-a-request shortcuts, not "commands"
+    // Skills are excluded (those are insert-a-request shortcuts, not "commands"
     // in the help sense); only the Session/Workspace/Prompt/Help-style entries
     // (the generic set + a host's slashExtra) are listed.
     const buildHelpText = () => {
-        const cmds = slashCommands.filter((c) => c.section !== 'Tools' && c.section !== 'Skills' && c.section !== 'MCP');
+        const cmds = slashCommands.filter((c) => c.section !== 'Tools' && c.section !== 'Skills');
         const lines = cmds.map((c) => `- \`/${c.name}\` — ${c.hint}`).join('\n');
         return `**${brandName}** — type \`/\` for commands:\n\n${lines}\n\nPick a mode (auto/edit/plan/brainstorm) by the composer.`;
     };
@@ -487,7 +515,7 @@ export function AgentChat(props) {
         else
             pendingLoadsRef.current.push(name);
     };
-    const runSlash = (name) => {
+    const runSlash = (name, arg = '') => {
         const def = slashMap[name];
         if (!def)
             return 'none';
@@ -517,6 +545,24 @@ export function AgentChat(props) {
                 if (sessionId)
                     controller.note(sessionId, buildHelpText());
                 break;
+            case 'skin': {
+                // Local only: a note turn is never sent to the model.
+                const r = skinCommand(arg, transcriptSkin);
+                if (r.next)
+                    setTranscriptSkin(r.next);
+                if (sessionId)
+                    controller.note(sessionId, r.note);
+                break;
+            }
+            case 'effect': {
+                // Local only, like /skin: a note turn is never sent to the model.
+                const r = effectCommand(arg, arrivalEffect);
+                if (r.next)
+                    setArrivalEffect(r.next);
+                if (sessionId)
+                    controller.note(sessionId, r.note);
+                break;
+            }
             default: return 'none';
         }
         return 'handled';
@@ -558,7 +604,8 @@ export function AgentChat(props) {
             setInput(prior);
         }
         if (text.startsWith('/') && images.length === 0) {
-            const r = runSlash(text.slice(1).split(' ')[0]);
+            const [cmd, ...rest] = text.slice(1).split(' ');
+            const r = runSlash(cmd, rest.join(' '));
             if (r === 'handled') {
                 setInput('');
                 return;
@@ -574,8 +621,14 @@ export function AgentChat(props) {
      * does -- same guards, same transcript, same everything. It deliberately does
      * NOT go through `send` above, which reads the composer and would dispatch
      * slash commands a second time; the text was already resolved when it was
-     * parked. `running` holds firing until the current turn finishes. */
-    const { items: laterItems, now: laterNow } = useSendLater((text) => { void sendMessage(text, []); }, running);
+     * parked. `running` holds firing until the current turn finishes.
+     *
+     * WATCHING COUNTS AS BUSY. The queue is global, not per chat, so a due item
+     * would otherwise fire into whatever this column shows: into a finished
+     * browser run it continues that run as a chat nobody asked for, and into a
+     * daemon watch the send is a no-op -- after takeDue has already removed the
+     * item, so it is lost. Busy leaves it queued for a chat that can take it. */
+    const { items: laterItems, now: laterNow } = useSendLater((text) => { void sendMessage(text, []); }, running || !!readOnly);
     /* The pending queue: what you typed while a turn was running.
      *
      * Flush is deliberately ONE AT A TIME. Concatenating the queue into a single
@@ -761,78 +814,104 @@ export function AgentChat(props) {
         restoreToolResult: (turnId, blobId, content) => (sessionId ? controller.restoreToolResult(sessionId, turnId, blobId, content) : false),
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }), [sessionId, session.turns]);
-    const menuEnabled = features?.sessionMenu !== false;
+    const menuEnabled = features?.sessionMenu !== false && !readOnly;
     // Defaults true: every existing surface runs our loop, and only a proxied
     // engine opts out.
     const ownLoop = features?.ownLoop !== false;
     const sessionTitle = sessionList.find((s) => s.id === sessionId)?.title || (title ?? brandName);
     const modeEntries = useMemo(() => modes.map((m) => ({ id: m.id, label: m.label, description: m.description ?? '', accent: m.accent })), [modes]);
+    // 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.
+    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 || {}) } });
+        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, _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, connections: connections, toolBadge: toolBadge, policyEditor: policyEditor, registryTick: registryTick, capabilities: capabilities, sessionId: sessionId ?? '' }), ownLoop && _jsx(ContextBar, { contextWindow: contextWindow, systemSource: resolveSystemSource(), offloaded: offloaded, conversation: conversation, usageSurface: usageSurface, 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 && emptyState?.({ setInput }), _jsxs("div", { style: S.transcriptWrap, children: [_jsx(Transcript, { turns: shownTurns, currentSrc: currentSrc ?? '', view: transcriptView, onApplyEdit: onApplyEdit, onToggleInclude: toggleInclude, onRetry: onRetry, onImageClick: setLightboxSrc, renderFence: renderFence }), live && (_jsxs("div", { style: S.live, children: [recovery && _jsxs("div", { style: S.recovery, children: [_jsx(Spinner, { size: 13, title: "Recovering" }), " ", recovery] }), live.tools.map((t) => 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).
-                                            _jsx(ToolResultCard, { inv: { name: t.name, args: t.args || {}, result: t.result ?? '', isError: t.isError, running: false, ms: t.ms } }, t.id)) : (_jsx("div", { style: S.liveToolRow, children: _jsx(ToolLine, { name: t.name, args: t.args || {}, result: t.result, isError: t.isError, running: true, ms: t.ms }) }, t.id))), live.text ? _jsxs(_Fragment, { children: [_jsx(Markdown, { text: live.text }), 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 })] })))] })), plan && plan.length > 0 && _jsx(PlanCard, { entries: plan })] }), pendingPerm && (_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'
+                        } }, 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), onApprove: () => resolvePerm(true), onDeny: () => resolvePerm(false) })), 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' : '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" }), _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"] })] })) })] })), 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 }), !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) => {
+                                            : (_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)
                     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)"] }) })), 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); } })), 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) })] }));
 }
 // Session-row style is keyed by "active" — kept out of S (which is a flat style
 // map) and typed as its own helper.
@@ -857,6 +936,9 @@ const S = {
     // Wraps the settled Transcript + live-run block so a host-injected LiveTimeline
     // (position: absolute) can overlay them while scrubbed back. `body` already
     // owns the scroll (overflowY: auto) — this is just the positioning context.
+    /* Centred in the column like the opener it replaces, so the two states swap
+     * in place instead of the conversation jumping when the load lands. */
+    loadingTranscript: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '48px 16px', color: 'var(--text-tertiary)', fontSize: 13 },
     transcriptWrap: { position: 'relative', display: 'flex', flexDirection: 'column', gap: 16 },
     live: { display: 'flex', flexDirection: 'column', gap: 8 },
     liveToolRow: { display: 'flex', alignItems: 'center', padding: '6px 10px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: 'var(--surface-2)' },
@@ -873,16 +955,22 @@ const S = {
     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 },
     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)' },
-    permBody: { fontSize: 13, lineHeight: 1.5, color: 'var(--text-secondary)' },
+    // pre-wrap: a submit_plan summary is the whole multi-line plan being approved.
+    // Wraps a long path or URL at 390px, and a long plan scrolls inside the card
+    // so Allow and Deny stay in view.
+    permBody: { fontSize: 13, lineHeight: 1.5, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', maxHeight: '45vh', overflowY: 'auto' },
     permActions: { display: 'flex', gap: 8, flexWrap: 'wrap' },
     permDeny: { height: 30, padding: '0 12px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-1)', color: 'var(--text-secondary)', fontSize: 12.5, fontWeight: 600, cursor: 'pointer' },
     permAllowSession: { height: 30, padding: '0 12px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-1)', color: 'var(--text-secondary)', fontSize: 12.5, fontWeight: 600, cursor: 'pointer' },
     permAllow: { display: 'inline-flex', alignItems: 'center', gap: 5, height: 30, padding: '0 14px', border: 0, borderRadius: 'var(--radius-sm)', background: 'var(--grad-brand)', color: 'var(--text-on-accent, #fff)', fontSize: 12.5, fontWeight: 600, cursor: 'pointer' },
+    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 },
     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' },
 };
 //# sourceMappingURL=AgentChat.js.map