@corenel/web-ui 0.13.2 → 0.14.0

package/dist/agentChat/AgentChat.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* AgentChat — the one chat column, extracted verbatim from the editor
  * AgentPanel and re-based on the structural AgentSurfaceController so every
  * agent surface (editor, /agent, /craft) renders the same header / transcript /
@@ -8,9 +8,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * get/set); everything editor-specific (context source, tips lifecycle, budget
  * form, host slash commands) comes in via props. */
 import { useHostSheet } from '@corenel/ui-kit/sheetHost';
+import { useEscape } from '@corenel/ui-kit/useEscape';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Transcript, ToolLine, DiffProposal } from '../Transcript';
-import { ToolResultCard } from '../toolRender';
+import { BlockedResults, ToolResultCard } from '../toolRender';
 import { Composer } from '../Composer';
 import { SendLater, useSendLater } from '../sendLater/SendLater';
 import { AskUser } from '../AskUser';
@@ -19,6 +20,7 @@ import { ContextBar } from '../ContextBar';
 import { useTranscriptView } from '../transcriptView';
 import { useTranscriptSkin, skinCommand, SKIN_REACH } from '../transcriptSkin';
 import { ChatSkinRoot, CHAT_WORDS } from '../chatSkin';
+import { ChatRefreshScope } from '../chatRefreshContext';
 import { plainName } from '../chatSkinContext';
 import { ToolFold } from '../ToolFold';
 import { useArrivalEffect, effectCommand, prefersReducedMotion, resolveArrivalEffect } from '../arrivalEffect';
@@ -27,8 +29,15 @@ import { FlapRow } from '../fx/FlapRow';
 import { MatrixRain } from '../fx/MatrixRain';
 import { NetsplitJoin } from '../fx/NetsplitJoin';
 import { OptionsDrawer } from './OptionsDrawer';
+import { ChatSettingsSheet } from './ChatSettingsSheet';
 import { useControllerSession, useControllerGlobal } from './controller';
-import { getSelectedPolicyName, setSelectedPolicyName } from '@corenel/harness/guardrail';
+import { StepDetailHost, useStepDetail } from '../steps/StepDetailHost';
+import { LiveRail, LIVE_SCOPE } from '../steps/LiveRail';
+import { argsJson, liveBlocks } from '../steps/model';
+import { planAfter } from '../steps/plan';
+import { ApprovalSlotContext, approvalBelongsToCall, chatApproval } from '../steps/approval';
+import { ArmedPlanApproval, ChatApproval } from '../steps/ChatApproval';
+import { getPolicy, getSelectedPolicyName, setSelectedPolicyName, STANDARD_POLICY } from '@corenel/harness/guardrail';
 import { loadPersonas, getSelectedPersona, setSelectedPersona } from '@corenel/harness/prompts/config';
 import { getSystemParts } from '@corenel/harness/systemParts';
 import { sessionSystemConfig } from '@corenel/tools-web/sessionSystemConfig';
@@ -38,7 +47,10 @@ import { allTools } from '@corenel/harness/tools/builtins';
 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 { usePicks, removePick, setPicks, listPicks, withPicks } from '@corenel/tools-web/composerPicks';
 import { DictateButton } from '../DictateButton';
+import { KitButton, KitChip, KitSheet, ListRow } from '@corenel/ui-kit/kit';
+import { Toggle } from '@corenel/ui-kit/FieldControls';
 import { resolveDictation } from '@corenel/tools-web/speech/route';
 import { browserModelHost } from '@corenel/tools-web/speech/model';
 import { appendDictated } from './appendDictated';
@@ -48,17 +60,39 @@ import { useTodos } from '@corenel/harness/todos';
 import { CommandTray, RunningCommand } from '../CommandTray';
 import { trayCommand, transcriptTurns } from '../commandTurn';
 import { composerHistory } from '../composerHistory';
-import { usePendingQueue, addPending, removePending, editPending, setPendingState, getPending, setPendingNote } from './pendingQueue';
+import { usePendingQueue, addPending, removePending, editPending, setPendingState, getPending, setPendingNote, dropQueued } from './pendingQueue';
 import { fmtTok } from '@corenel/ui-kit/usage';
-import { isCheckpointTool } from '@corenel/protocol';
+import { HOOK_ASK_TOOL, 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, IcCode, IcMic, IcClock, 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, IcTarget } 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
  * made that absence unobservable: /craft got a live Apply that silently did
  * nothing and then reported the edit applied. Forward undefined as undefined. */
+/** Longest the rail's run-end hand-off waits for the live answer's reveal. */
+const HANDOFF_MAX_MS = 3000;
+/** A turn's last answer text, or '' when it has none. */
+function lastAnswerOf(turn) {
+    for (let i = turn.messages.length - 1; i >= 0; i--) {
+        const m = turn.messages[i];
+        if (m.role === 'assistant' && typeof m.content === 'string' && m.content)
+            return m.content;
+    }
+    return '';
+}
+/** Lends the step detail host's api to the chat that renders it (Run again closes it). */
+function DetailApiBridge({ into }) {
+    into.current = useStepDetail();
+    return null;
+}
+/** The chat's step detail host, when the rail is on; otherwise its children as they are. */
+function ChatDetailHost(p) {
+    if (!p.on)
+        return _jsx(_Fragment, { children: p.children });
+    return (_jsxs(StepDetailHost, { className: "tx-chat-host", follow: p.follow, hidden: p.hidden, children: [_jsx(DetailApiBridge, { into: p.apiRef }), p.children] }));
+}
 /** An agent-maintained task list.
  *
  * Rendered as plain state, not as something to interact with: these steps are
@@ -84,7 +118,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, 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', runHint = false, startFooter, } = props;
+    const { controller, sessionId, onSessionChange, sessions, aboveComposer, contextWindow, systemSource, offloaded, inPrice, modes, currentSrc, onApplyEdit, renderFence, renderToolCard, emptyState, headerLead, headerExtras, openOptionsRef, 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', runHint = false, startFooter, smartAction = false, phoneKit = false, hideHeader = false, settingsLead, rerunCommand, } = 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
@@ -123,7 +157,23 @@ export function AgentChat(props) {
     // The right-side options drawer: persona, display, policy, and capabilities —
     // the extracted OptionsDrawer (Task 3) renders it; AgentChat owns only the
     // open flag and the CONTROLLED persona/policy selections.
-    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [ownDrawerOpen, setDrawerOpen] = useState(false);
+    /* Controlled when the host passes `settingsOpen` (the internal flag is then
+     * unread). Every open and close goes through setSettings, which also reports
+     * to the host when one is listening. */
+    const drawerOpen = props.settingsOpen ?? ownDrawerOpen;
+    const onSettingsOpenChangeRef = useRef(props.onSettingsOpenChange);
+    onSettingsOpenChangeRef.current = props.onSettingsOpenChange;
+    const setSettings = useCallback((v) => {
+        setDrawerOpen(v);
+        onSettingsOpenChangeRef.current?.(v);
+    }, []);
+    useEffect(() => {
+        if (!openOptionsRef)
+            return;
+        openOptionsRef.current = () => setSettings(true);
+        return () => { openOptionsRef.current = null; };
+    }, [openOptionsRef]);
     // True while the injected live scrubber is scrubbed back: hide the live transcript
     // so the scrubber's in-flow folded view reclaims its space.
     const [timelineScrubbed, setTimelineScrubbed] = useState(false);
@@ -169,6 +219,9 @@ export function AgentChat(props) {
     /* 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);
+    /* smartAction: the mic reports consent, download progress and errors here,
+     * shown in the notice row above the composer. */
+    const [dictNotice, setDictNotice] = useState(null);
     const [laterOpen, setLaterOpen] = useState(false);
     const todosNow = useTodos(sessionId ?? null);
     const [dockEmpty, setDockEmpty] = useState(true);
@@ -209,6 +262,15 @@ export function AgentChat(props) {
      * and the DictateButton are siblings; the button reports, this decides. */
     const [dictating, setDictating] = useState(false);
     const contextDocs = useContextDocs(sessionId ?? '');
+    /* Elements picked in a page preview (composerPicks.ts): one-shot, like a
+     * pasted image. They go with the next message as marked text, so every path
+     * below that takes the composer's text takes `draftText()`, and they clear
+     * wherever the attachments clear. */
+    const pickKey = sessionId ?? '';
+    const picks = usePicks(pickKey);
+    const draftText = () => withPicks(input.trim(), picks);
+    const clearPicks = () => { if (picks.length)
+        setPicks(pickKey, []); };
     const readAsDataUrl = (f) => new Promise((res) => {
         const r = new FileReader();
         r.onload = () => res(typeof r.result === 'string' ? r.result : '');
@@ -310,6 +372,11 @@ export function AgentChat(props) {
     const [selPolicy, setSelPolicy] = useState(getSelectedPolicyName);
     const selectPolicy = useCallback((name) => { setSelPolicy(name); setSelectedPolicyName(name); }, []);
     const policyName = fixedIdentity?.policyName ?? selPolicy;
+    /* The policy a send resolves (runtime.ts: getPolicy(policyName), else the
+     * standard one), for the context figure's tool count. A host's policy
+     * transform only adds permissions, never a tools gate, so this is the gate
+     * the run applies. */
+    const runPolicy = useMemo(() => getPolicy(policyName) ?? STANDARD_POLICY, [policyName]);
     const [selPersona, setSelPersona] = useState(getSelectedPersona);
     const pickPersona = useCallback((id) => { setSelPersona(id); setSelectedPersona(id); }, []);
     const personaName = fixedIdentity ? (fixedIdentity.persona ?? '') : selPersona;
@@ -373,16 +440,76 @@ export function AgentChat(props) {
      * 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);
+    /* smartAction: the request the chat's own card last answered, so a second
+     * tap (or the plan card's Approve after a Deny) cannot answer again. */
+    const answeredPermRef = useRef(null);
+    /* How many sub-agent rows show the pending approval (ApprovalSlotContext).
+     * While none does, the card stays on the rail. */
+    const [slotClaims, setSlotClaims] = useState(0);
+    const claimSlot = useCallback(() => {
+        setSlotClaims((n) => n + 1);
+        return () => setSlotClaims((n) => n - 1);
+    }, []);
     const [handoff, setHandoff] = useState(null);
     const [handoffWatch, setHandoffWatch] = useState({ live: !!live, sessionId });
+    /* The rail (smartAction, normal and expanded views) hands off without a
+     * snap: the live turn's last view stays in place, its answer still the same
+     * LiveAnswer playing its reveal and fades, until that reveal is done; then
+     * the settled turn takes over, plain. `railTwin` is the turn the run settled
+     * into, so an open live step's detail moves to its settled twin. */
+    const railLive = smartAction && transcriptView !== 'summary';
+    const lastLiveRef = useRef(null);
+    const [frozen, setFrozen] = useState(null);
+    const [railTwin, setRailTwin] = useState(null);
     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)
+        const snap = lastLiveRef.current;
+        const freeze = railLive && settled && fx !== 'none' && !!last && !!snap && !!snap.text
+            && snap.live.tools.every((t) => t.done) && lastAnswerOf(last) === snap.text;
+        setFrozen(freeze && snap ? snap : null);
+        setRailTwin(railLive && settled && last ? last.id : null);
+        setHandoff(settled && fx !== 'none' && last && !freeze ? { turnId: last.id, effect: fx, from: liveShownRef.current } : null);
+        if (live) {
             liveShownRef.current = 0;
+            lastLiveRef.current = null;
+        }
+    }
+    /* The answer the live footer shows. On the rail the runtime's commit of the
+     * answer (foldLive's 'assistant' clears the text, the tool list unchanged)
+     * does not take it off screen before the run settles. */
+    const heldRef = useRef({ text: '', tools: null });
+    if (live) {
+        if (live.text)
+            heldRef.current = { text: live.text, tools: live.tools };
+        else if (heldRef.current.tools !== live.tools)
+            heldRef.current = { text: '', tools: null };
+    }
+    else {
+        heldRef.current = { text: '', tools: null };
+    }
+    const liveText = live ? (railLive ? live.text || heldRef.current.text : live.text) : '';
+    if (live && railLive)
+        lastLiveRef.current = { live, turns: shownTurns, text: liveText, hadAnswer: hasAnswer };
+    /* When each running live step was first seen: its time reads from it on the
+     * one-second runElapsed tick. Cleared with the run. */
+    const firstSeenRef = useRef({ sessionId, at: new Map() });
+    if ((!live && firstSeenRef.current.at.size) || firstSeenRef.current.sessionId !== sessionId) {
+        firstSeenRef.current = { sessionId, at: new Map() };
     }
+    // Off the rail (the summary view) there is no hand-off view to keep.
+    if (frozen && !railLive)
+        setFrozen(null);
+    // The hand-off waits for the reveal at most HANDOFF_MAX_MS: a hidden tab (no
+    // animation frames) must not keep the settled turn off screen.
+    const handoffHeld = !live && !!frozen;
+    useEffect(() => {
+        if (!handoffHeld)
+            return undefined;
+        const id = setTimeout(() => setFrozen(null), HANDOFF_MAX_MS);
+        return () => clearTimeout(id);
+    }, [handoffHeld]);
     /* 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
@@ -465,10 +592,28 @@ export function AgentChat(props) {
             setRenaming(null);
         }
     };
+    /* A tool result a System One check or hook blocked, for the tool card's
+     * "Show the result": held by the controller in this page's memory only. */
+    const blockedLookup = useMemo(() => (sessionId && controller.blockedResult ? (callId) => controller.blockedResult?.(sessionId, callId) : null), [controller, sessionId]);
     const resolvePerm = (allow, always = false, note) => {
         if (sessionId)
             controller.resolvePerm(sessionId, allow, always, note);
     };
+    /* smartAction: an answer resolves the exact request its card was shown for
+     * (resolvePermIf with that request's id), never a newer one, and only once.
+     * A controller with no request ids (ACP, a remote run) has one ask at a
+     * time and answers through resolvePerm. */
+    const answerShownPerm = (sid, perm, allow, always, note) => {
+        if (answeredPermRef.current === perm)
+            return;
+        answeredPermRef.current = perm;
+        if (typeof perm.id === 'number' && controller.resolvePermIf)
+            controller.resolvePermIf(sid, perm.id, allow, always, note);
+        else if (note !== undefined)
+            controller.resolvePerm(sid, allow, always, note);
+        else
+            controller.resolvePerm(sid, allow, always);
+    };
     const respondSuggestion = (c) => {
         if (sessionId)
             controller.respondSuggestion(sessionId, c);
@@ -535,8 +680,14 @@ export function AgentChat(props) {
         return id;
     };
     /** Returns false when nothing was sent (empty message, or a run in flight) --
-     * a caller holding the only copy of the text must not drop it on a refusal. */
-    const sendMessage = async (text, images) => {
+     * a caller holding the only copy of the text must not drop it on a refusal.
+     *
+     * `onSettled` hears, once the controller's send has returned, whether the
+     * message LANDED: a new user turn is in the session. That is the one signal
+     * every controller gives. A refusal can return quietly with nothing put
+     * back (the ACP proxy with no sidecar sets only an error), so a caller that
+     * emptied the composer itself uses it to put the draft back. */
+    const sendMessage = async (text, images, onSettled) => {
         if ((!text && images.length === 0) || running)
             return false;
         // Sending your own message always snaps the view to the bottom.
@@ -548,10 +699,30 @@ export function AgentChat(props) {
             addLoadedTools(sid, pendingLoadsRef.current);
             pendingLoadsRef.current = [];
         }
-        await controller.send(sid, text, images, buildSendOpts());
+        const before = new Set(controller.getState(sid).turns.map((t) => t.id));
+        try {
+            await controller.send(sid, text, images, buildSendOpts());
+        }
+        finally {
+            // A send that threw settles too: its turn was taken back, so it did not land.
+            onSettled?.(sid, controller.getState(sid).turns.some((t) => !before.has(t.id) && t.messages[0]?.role === 'user'));
+        }
         onAfterSend?.(sid);
         return true;
     };
+    /** Deliver a message that is not in the composer (a queued flush, a held
+     * chip's "Send now", an interrupt). With `smartAction` it goes through
+     * `interceptSend` first, like a typed send, so image mode and host commands
+     * apply to it (D6). Without it, exactly sendMessage. Refused while a run is
+     * in flight BEFORE the intercept: an image generation must not start beside
+     * a live run. */
+    const deliver = async (text, images) => {
+        if ((!text && images.length === 0) || running)
+            return false;
+        if (smartAction && interceptSend && (await interceptSend(text, images)))
+            return true;
+        return sendMessage(text, images);
+    };
     /** The full send pipeline minus slash dispatch — the `api.sendText` handed to
      * host slash actions (the editor's /init sends a composed prompt through it). */
     const sendText = (text) => {
@@ -609,7 +780,7 @@ export function AgentChat(props) {
                 setCtxMenuOpen(true);
                 break;
             case 'persona':
-                setDrawerOpen(true);
+                setSettings(true);
                 break;
             case 'help':
                 if (sessionId)
@@ -638,8 +809,9 @@ export function AgentChat(props) {
         return 'handled';
     };
     const send = async () => {
-        const text = input.trim();
+        const text = draftText();
         const images = attachments;
+        const taken = picks;
         if ((!text && images.length === 0) || running)
             return;
         // Host commands are first-chance (the editor's /strategy + /model) — BEFORE
@@ -671,6 +843,8 @@ export function AgentChat(props) {
             // composer after the image it was attached to had been made.
             if (images.length)
                 setAttachments(() => []);
+            // Picks too, the same both ways.
+            clearPicks();
             if (await interceptSend(text, images))
                 return;
             // Declined: it was never ours to take. Restoring matters most for the
@@ -679,8 +853,11 @@ export function AgentChat(props) {
             setInput(prior);
             if (images.length)
                 setAttachments(() => images);
+            if (taken.length)
+                setPicks(pickKey, taken);
         }
-        if (text.startsWith('/') && images.length === 0) {
+        // A message carrying picks is not a slash command, the same rule as images.
+        if (text.startsWith('/') && images.length === 0 && taken.length === 0) {
             const [cmd, ...rest] = text.slice(1).split(' ');
             const r = runSlash(cmd, rest.join(' '));
             if (r === 'handled') {
@@ -692,6 +869,48 @@ export function AgentChat(props) {
         }
         // The engine guards + clears the composer itself: a feature-guard denial
         // surfaces in session.error with the draft and pasted images intact.
+        //
+        // With picks the sent text is not what the box holds, and the engine only
+        // empties a box whose text IS what was sent (runtime startTurn), so the
+        // box and the picks are emptied here -- and put back if the message did
+        // not land, whatever the controller did or did not restore. The box is
+        // restored only when it is empty or holds the merged text a runtime put
+        // back; anything typed since is left alone.
+        //
+        // The restore goes to the session the send USED: in a new chat that is
+        // the one ensureSession just made, which is where the composer reads its
+        // picks from next, not the '' they were taken from. A send that never
+        // reached the controller (a false return, ensureSession failing) puts
+        // them back where they were. A send that throws is restored and not
+        // rethrown: the controller owns how its failure is shown.
+        if (taken.length) {
+            const prior = input;
+            const from = pickKey;
+            clearPicks();
+            setInput('');
+            const restore = (sid) => {
+                setPicks(sid, [...taken, ...listPicks(sid).filter((p) => !taken.includes(p))]);
+                const now = controller.getState(sid).input;
+                if (!now.trim() || now.trim() === text)
+                    controller.setInput(sid, prior);
+            };
+            let settled = false;
+            try {
+                await sendMessage(text, images, (sid, landed) => {
+                    settled = true;
+                    if (!landed)
+                        restore(sid);
+                });
+            }
+            catch {
+                /* restored in onSettled (or below, when the send never reached the controller) */
+            }
+            finally {
+                if (!settled)
+                    restore(from);
+            }
+            return;
+        }
         await sendMessage(text, images);
     };
     /* Send-later: a parked message goes through sendMessage exactly as a typed one
@@ -719,6 +938,10 @@ export function AgentChat(props) {
     const flushingRef = useRef(null);
     const stopNotesRef = useRef(0);
     const prevRunning = useRef(running);
+    /** smartAction: a message that interrupted the run by stopping it (no inject
+     * on this controller, or it carries attachments). Sent at the run's end,
+     * ahead of anything queued. */
+    const interruptRef = useRef(null);
     useEffect(() => {
         if (running && !prevRunning.current) {
             // A fresh run: forget the last one's abnormal markers.
@@ -747,7 +970,26 @@ export function AgentChat(props) {
             const unconfirmed = getPending(sessionId).filter((p) => p.state === 'injecting').map((p) => p.id);
             if (unconfirmed.length)
                 setPendingState(sessionId, unconfirmed, 'queued');
-            if (abnormal) {
+            const interrupt = interruptRef.current;
+            interruptRef.current = null;
+            /* Parked as held on its OWN session, never lost: the composer was
+             * already cleared, so this is the only copy. */
+            const park = (m) => {
+                const p = addPending(m.sid, m.text, m.images);
+                setPendingState(m.sid, [p.id], 'held');
+            };
+            if (interrupt && interrupt.sid !== sessionId) {
+                // The chat changed before its run ended: this edge belongs to another
+                // session, so the message must not be sent into it.
+                park(interrupt);
+            }
+            if (interrupt && interrupt.sid === sessionId) {
+                // The run was stopped to make room for this message: it goes now, and
+                // whatever else was queued stays queued, flushing after it (D3).
+                void deliver(interrupt.text, interrupt.images).then((sent) => { if (!sent)
+                    park(interrupt); });
+            }
+            else if (abnormal) {
                 const ids = getPending(sessionId).map((p) => p.id);
                 if (ids.length)
                     setPendingState(sessionId, ids, 'held');
@@ -761,7 +1003,7 @@ export function AgentChat(props) {
                 const next = getPending(sessionId).find((p) => p.state === 'queued' && p.id !== flushingRef.current);
                 if (next) {
                     flushingRef.current = next.id;
-                    void sendMessage(next.text, next.images).then((sent) => {
+                    void deliver(next.text, next.images).then((sent) => {
                         if (sent)
                             removePending(sessionId, next.id);
                         flushingRef.current = null;
@@ -797,12 +1039,13 @@ export function AgentChat(props) {
     const queueCurrent = () => {
         if (!sessionId)
             return;
-        const text = input.trim();
+        const text = draftText();
         if (!text && attachments.length === 0)
             return;
         addPending(sessionId, text, attachments);
         setInput('');
         setAttachments(() => []);
+        clearPicks();
     };
     /* Push a message into the turn already running.
      *
@@ -821,11 +1064,12 @@ export function AgentChat(props) {
         // time -- so they are reconciled here, at press time, and never re-pushed.
         const landed = new Set(session.injectedIds ?? []);
         if (!id) {
-            const text = input.trim();
+            const text = draftText();
             if (text || attachments.length > 0) {
                 const msg = addPending(sid, text, attachments);
                 setInput('');
                 setAttachments(() => []);
+                clearPicks();
                 id = msg.id;
             }
             else {
@@ -862,7 +1106,7 @@ export function AgentChat(props) {
         // Nothing live took it. A held chip's "Send now" then means what it says:
         // send as a fresh turn -- and the entry goes only once that send happened.
         if (entry.state === 'held') {
-            void sendMessage(entry.text, entry.images).then((sent) => {
+            void deliver(entry.text, entry.images).then((sent) => {
                 if (sent)
                     removePending(sid, entry.id);
                 else
@@ -873,6 +1117,55 @@ export function AgentChat(props) {
         if (!injectable)
             setPendingNote(sid, entry.id, INJECT_IMAGES_NOTE);
     };
+    /* smartAction: a hold on Queue interrupts the reply with the draft (D3).
+     *
+     * A text-only draft on a controller that can inject is pushed in HARD: it
+     * cuts the reply and lands now. Anything else (no inject, the ACP proxy, or
+     * a draft with attachments the inject wire cannot carry) stops the run and
+     * sends the draft when it ends. The draft leaves the composer either way.
+     *
+     * A host switch that is ON (image mode) also takes the stop-and-send path:
+     * the inject wire goes straight to the chat model, and the message must go
+     * through interceptSend at the run's end like any other send (D6).
+     *
+     * With no run to interrupt (it ended as the hold landed) there is nothing to
+     * cut: the draft is a normal send. Stopping an idle session would leave the
+     * draft waiting on a run-end edge that never comes, until the NEXT run. */
+    const interruptCurrent = () => {
+        const sid = sessionId;
+        if (!sid)
+            return;
+        if (!running) {
+            void send();
+            return;
+        }
+        const text = draftText();
+        const images = attachments;
+        if (!text && images.length === 0)
+            return;
+        setInput('');
+        setAttachments(() => []);
+        clearPicks();
+        const toggleOn = (composerToggles ?? []).some((t) => t.on);
+        if (images.length === 0 && controller.inject && !toggleOn) {
+            const msg = addPending(sid, text, []);
+            if (controller.inject(sid, [{ id: msg.id, text }], true)) {
+                setPendingState(sid, [msg.id], 'injecting');
+                return;
+            }
+            // Refused (no run on the worker to take it): the same as a controller
+            // without inject -- stop, then send it at the run's end.
+            removePending(sid, msg.id);
+        }
+        // A second hold while the first stop is still landing: the earlier message
+        // queues behind this one rather than being overwritten.
+        const earlier = interruptRef.current;
+        if (earlier)
+            addPending(earlier.sid, earlier.text, earlier.images);
+        interruptRef.current = { sid, text, images };
+        stoppedRef.current = true;
+        controller.stop(sid);
+    };
     // Re-run a prior user turn (the engine drops it + everything after, then re-sends).
     const onRetry = (turnId) => {
         if (!sessionId || running)
@@ -902,16 +1195,119 @@ export function AgentChat(props) {
     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]);
+    // The live turn as drawn: the run's own, or on the rail its last view kept
+    // through the run-end hand-off (see `frozen`).
+    const liveView = live ?? (railLive && frozen ? frozen.live : null);
+    const liveAnswer = live ? liveText : frozen?.text ?? '';
     // 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 || {}) } }, t.done && t.result !== undefined ? { text: t.result, isError: !!t.isError } : undefined);
-        if (card)
-            liveCards.set(t.id, card);
+    // Built when the tools change, not on every text delta (the fold keeps the
+    // tools array while only the answer text grows).
+    const liveTools = liveView?.tools;
+    const liveCards = useMemo(() => {
+        const cards = new Map();
+        if (!renderToolCard)
+            return cards;
+        for (const t of liveTools ?? []) {
+            const card = renderToolCard({ id: t.id, type: 'function', function: { name: t.name, arguments: argsJson(t.args) } }, t.done && t.result !== undefined ? { text: t.result, isError: !!t.isError } : undefined);
+            if (card)
+                cards.set(t.id, card);
+        }
+        return cards;
+    }, [liveTools, renderToolCard]);
+    /* The live turn on the rail. A running step's time counts from when it was
+     * first seen; the one-second runElapsed tick re-renders it. Every effect
+     * draws the rail; split-flap flips the step words in tiles instead of the
+     * departures board (which stays for the summary view and prompd.app). */
+    const railTurns = railLive && frozen && !live ? frozen.turns : shownTurns;
+    const livePlanStart = useMemo(() => planAfter(railTurns), [railTurns]);
+    /* smartAction: the pending permission as a card in the flow. On the live
+     * rail it sits after the step that asked; a delegated callee's ask goes to
+     * the row of the call that asked, once that row shows it (ApprovalSlot).
+     * With no rail in view (no run in progress, the summary view)
+     * it stands alone where the permission card always was. Keyed by request,
+     * so a newer ask is a new card. */
+    const askPerm = smartAction && sessionId ? pendingPerm : null;
+    const skinReach = SKIN_REACH[transcriptSkin];
+    const chatWords = skinReach.chat ? CHAT_WORDS[transcriptSkin] ?? {} : {};
+    // The kit card shows the skin's words (plain words stay its accessible names).
+    // A key is passed only when the skin defines it, so the default skin is unchanged.
+    const approvalLabels = {
+        ...(chatWords.allowOnce ? { allow: chatWords.allowOnce } : {}),
+        ...(chatWords.deny ? { deny: chatWords.deny } : {}),
+        ...(chatWords.allowSession ? { session: chatWords.allowSession } : {}),
+        ...(chatWords.budgetTitle ? { budgetTitle: chatWords.budgetTitle } : {}),
+        ...(chatWords.budgetContinue ? { budgetContinue: chatWords.budgetContinue } : {}),
+        ...(chatWords.budgetStop ? { budgetStop: chatWords.budgetStop } : {}),
+    };
+    let approvalNode = null;
+    if (askPerm && sessionId) {
+        const sid = sessionId;
+        const cardKey = typeof askPerm.id === 'number' ? `chat:${sid}:${askPerm.id}` : `chat:${sid}:${askPerm.tool}:${askPerm.summary}`;
+        approvalNode = askPerm.tool === HOOK_ASK_TOOL ? (_jsx(HookAskCard, { perm: askPerm, onAnswer: (allow) => answerShownPerm(sid, askPerm, allow, false) }, cardKey)) : askPerm.tool === SUBMIT_PLAN ? (_jsx(ArmedPlanApproval, { agent: askPerm.agent ?? 'This agent', plan: planTextOf(undefined, askPerm.summary), ...(planAgents ? { agents: planAgents } : {}), onApprove: () => answerShownPerm(sid, askPerm, true, false), onDeny: (note) => answerShownPerm(sid, askPerm, false, false, note) }, cardKey)) : (_jsx(ChatApproval, { request: chatApproval(sid, askPerm, Date.now(), approvalLabels), onAnswer: (a) => answerShownPerm(sid, askPerm, a.allow, a.always) }, cardKey));
     }
+    const approvalCall = askPerm && liveView ? liveView.tools.find((t) => approvalBelongsToCall(askPerm, t)) : undefined;
+    const approvalSlot = approvalCall && approvalNode
+        ? { callId: approvalCall.id, node: approvalNode, claim: claimSlot }
+        : null;
+    const approvalOnRail = !!approvalNode && railLive && !!liveView;
+    const approvalAlone = !!approvalNode && !approvalOnRail;
+    /* The live rail is rebuilt when its inputs change: the tools, the view, the
+     * plan, an approval on the rail, and the one-second tick while a step runs
+     * (its time). A text delta alone does not rebuild it, so the steps keep their
+     * identity and their lines do not redraw. */
+    const railApproval = approvalOnRail && !(approvalSlot && slotClaims > 0) ? approvalNode : null;
+    const liveRunning = !!liveTools?.some((t) => !t.done && typeof t.ms !== 'number');
+    const liveEdits = !!liveTools?.some((t) => t.name === 'propose_edit');
+    const railTick = liveRunning ? runElapsed : 0;
+    const railSrc = liveEdits ? currentSrc ?? '' : '';
+    const railView = transcriptView === 'expanded' ? 'expanded' : 'normal';
+    const liveRail = useMemo(() => {
+        if (!railLive || !liveTools)
+            return [];
+        const now = Date.now();
+        const timed = liveTools.map((t) => {
+            if (t.done || typeof t.ms === 'number')
+                return t;
+            const at = firstSeenRef.current.at;
+            let seen = at.get(t.id);
+            if (seen === undefined) {
+                seen = now;
+                at.set(t.id, seen);
+            }
+            return { ...t, ms: Math.max(0, now - seen) };
+        });
+        return liveBlocks(timed, {
+            live: true,
+            view: railView,
+            custom: (callId, name, args) => liveCards.get(callId) ?? (name === 'propose_edit'
+                // propose_edit BLOCKS its run on the review, so the decidable card renders mid-run.
+                ? _jsx(DiffProposal, { call: { id: callId, type: 'function', function: { name, arguments: args } }, currentSrc: railSrc, onApplyEdit: onApplyEdit, view: transcriptView })
+                : null),
+            planStart: livePlanStart,
+            showUpcoming: true,
+            ...(railApproval ? { approval: railApproval } : {}),
+        });
+        // railTick is here so a running step's time follows the one-second tick.
+    }, [railLive, liveTools, railView, liveCards, railSrc, onApplyEdit, transcriptView, livePlanStart, railApproval, railTick]);
+    /* Run again (rail only): the host's rerun text goes in the composer, the
+     * detail closes and the composer takes focus. Nothing is sent. */
+    const detailApiRef = useRef(null);
+    const onRerun = rerunCommand ? (tool, command, where) => {
+        const text = rerunCommand({ tool, command, ...where });
+        if (text === null)
+            return;
+        setInput(text);
+        detailApiRef.current?.close();
+        requestAnimationFrame(() => panelRef.current?.querySelector('[data-chat-part="composer"] textarea')?.focus());
+    } : undefined;
+    const canRerun = rerunCommand ? (tool, command, where) => rerunCommand({ tool, command, ...where }) !== null : undefined;
+    /* The rail's live footer. Its parts keep their places between the running
+     * turn and its hand-off view, so the answer's LiveAnswer is never remounted. */
+    const handingOff = !live && !!frozen;
+    const railFooterEl = railLive && liveView ? (_jsxs("div", { style: fx === 'matrix' ? { ...S.live, position: 'relative', isolation: 'isolate' } : S.live, children: [fx === 'matrix' && _jsx(MatrixRain, { active: running }), recovery && _jsxs("div", { "data-chat-part": "recovery", style: S.recovery, children: [_jsx(Spinner, { size: 13, title: "Recovering" }), " ", recovery] }), _jsx(ApprovalSlotContext.Provider, { value: approvalSlot, children: _jsx(LiveRail, { blocks: liveRail, nameFx: fx, onRerun: onRerun, canRerun: canRerun }) }), liveAnswer && fx === 'netsplit' && !(handingOff && frozen ? frozen.hadAnswer : hasAnswer) && _jsx(NetsplitJoin, {}), liveAnswer ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-tx-part": "assistant", children: _jsx(LiveAnswer, { text: liveAnswer, effect: fx, complete: !running, onProgress: (n) => { liveShownRef.current = n; }, onDone: handingOff ? () => setFrozen(null) : undefined }) }), running && _jsx(LiveCursor, {})] })) : (!recovery && liveView.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;
     /* The skin reaches past the transcript only for skins whose SKIN_REACH says
      * so. The header and the options drawer sit inside the root, in their
      * original order, for every skin: an unskinned chat's DOM (and so its tab
@@ -920,14 +1316,12 @@ export function AgentChat(props) {
      * one exception is a chat-reach skin that leaves its header out: the header
      * then renders above the root. The lightbox, a neutral image viewer, stays
      * outside and keeps the app theme. */
-    const skinReach = SKIN_REACH[transcriptSkin];
     const headerOutside = skinReach.chat && !skinReach.header;
-    const chatWords = skinReach.chat ? CHAT_WORDS[transcriptSkin] ?? {} : {};
     const HeadRow = cap ? 'div' : 'header';
     const headerRow = (_jsxs(HeadRow, { style: cap ? { ...S.head, ...cap } : S.head, "data-chat-part": "header", "data-chat-running": running ? '' : undefined, ...(cap ? { 'data-content-cap': '' } : null), children: [headerLead, !menuEnabled ? (_jsx("span", { style: S.sessionName, children: title ?? brandName })) : renaming && renaming.id === sessionId ? (_jsx("input", { autoFocus: true, style: S.renameInput, value: renaming.title, onChange: (e) => setRenaming({ id: renaming.id, title: e.target.value }), onKeyDown: renameKey, onBlur: commitRename, placeholder: "Session name", "aria-label": "Rename session" })) : (_jsxs("div", { style: S.sessionBtn, onClick: () => { setMenuOpen((o) => !o); }, onDoubleClick: (e) => { if (sessionId) {
                     e.stopPropagation();
                     startRename(sessionId);
-                } }, title: sessionId ? 'Double-click to rename' : undefined, children: [_jsx(IcZap, { size: 14 }), _jsx("span", { style: S.sessionName, children: sessionTitle }), _jsx(IcChevron, { size: 12 })] })), _jsx("div", { style: { flex: 1, minWidth: 8 } }), headerExtras, ownLoop && !readOnly && _jsx(ContextBar, { variant: "inline", contextWindow: contextWindow, systemSource: resolveSystemSource(), offloaded: offloaded, conversation: conversation, sessionId: sessionId ?? '' }), !readOnly && _jsx("button", { style: S.iconBtn, onClick: newSession, title: "New chat", "aria-label": "New chat", children: _jsx(IcPlus, { size: 16 }) }), _jsx("button", { style: { ...S.iconBtn, ...(drawerOpen ? S.iconBtnActive : null) }, onClick: () => setDrawerOpen((o) => !o), title: fixedIdentity ? 'Display & capabilities' : `Persona, display & capabilities — ${personaLabel}`, "aria-label": "Panel options", children: _jsx(IcSliders, { size: 16 }) }), !embedded && onClose && _jsx("button", { style: S.iconBtn, onClick: onClose, title: "Close (\u2318K to reopen)", "aria-label": "Close", children: _jsx(IcX, { size: 16 }) }), menuEnabled && menuOpen && (_jsxs("div", { style: S.menu, onMouseLeave: () => setMenuOpen(false), children: [_jsxs("button", { style: S.menuItem, onClick: newSession, children: [_jsx(IcPlus, { size: 13 }), " New chat"] }), _jsx("div", { style: S.menuLabel, children: "Recent" }), sessionList.length === 0 && _jsx("div", { style: S.menuEmpty, children: "No saved chats" }), sessionList.slice(0, 12).map((s) => (_jsx("div", { style: S.menuRow, children: renaming && renaming.id === s.id ? (_jsx("input", { autoFocus: true, style: S.renameInput, value: renaming.title, onChange: (e) => setRenaming({ id: s.id, title: e.target.value }), onKeyDown: renameKey, onBlur: commitRename, placeholder: "Session name", "aria-label": "Rename session", onClick: (e) => e.stopPropagation() })) : (_jsxs(_Fragment, { children: [_jsx("button", { style: menuSession(s.id === sessionId), onClick: () => switchSession(s.id), children: s.title || 'Untitled' }), _jsx("button", { style: S.menuDel, onClick: () => startRename(s.id), title: "Rename", children: _jsx(IcEdit, { size: 12 }) }), _jsx("button", { style: S.menuDel, onClick: () => deleteSession(s.id), title: "Delete", children: _jsx(IcTrash, { size: 12 }) })] })) }, s.id)))] }))] }));
+                } }, 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 ?? '', policy: runPolicy }), !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: () => setSettings(!drawerOpen), 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;
@@ -967,19 +1361,13 @@ export function AgentChat(props) {
         // 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]);
+     * opened it, the way any menu behaves. On the shared escape stack, so a sheet
+     * opened from the menu closes first; under phoneKit the menu is itself a
+     * sheet, which closes on Escape and returns focus on its own. */
+    useEscape(ctxMenuOpen && !phoneKit, () => {
+        setCtxMenuOpen(false);
+        panelRef.current?.querySelector('[data-testid="composer-add"]')?.focus();
+    });
     /* A press anywhere else closes it too. Hover-out alone is not enough once a
      * toggle's options show: their lists float past the menu's edge, and on a
      * phone there is no hover at all. The "+" button and toggle chips open and
@@ -987,7 +1375,8 @@ export function AgentChat(props) {
      * portalled out of the menu) is part of it. */
     const ctxMenuRef = useRef(null);
     useEffect(() => {
-        if (!ctxMenuOpen)
+        // The phone Sheet closes itself; Sheets opened from it portal outside it.
+        if (!ctxMenuOpen || phoneKit)
             return;
         const onDown = (e) => {
             const t = e.target;
@@ -1001,7 +1390,7 @@ export function AgentChat(props) {
         };
         document.addEventListener('pointerdown', onDown);
         return () => document.removeEventListener('pointerdown', onDown);
-    }, [ctxMenuOpen]);
+    }, [ctxMenuOpen, phoneKit]);
     /* Options under a switched-on toggle (the image settings) hold dropdowns;
      * leaving the menu's box to reach one must not close it. */
     const optionsShown = (composerToggles ?? []).some((t) => t.on && t.options);
@@ -1047,6 +1436,29 @@ export function AgentChat(props) {
     }, [ctxMenuOpen]);
     const menuItemStyle = isPhone ? { ...S.menuItem, minHeight: 44, fontSize: 14 } : S.menuItem;
     const headerEl = cap ? _jsx("header", { style: S.headOuter, children: headerRow }) : headerRow;
+    /* The host's ON toggles as composer chips. */
+    const chipsFor = (toggles) => (toggles ?? []).filter((t) => t.on).map((t) => ({
+        id: t.id, label: t.label, icon: t.icon, onRemove: t.onToggle,
+        ...(t.title ? { title: t.title } : {}),
+        ...(t.chipLabel ? { chipLabel: t.chipLabel } : {}),
+        // smartAction: an ON toggle can rename the action ("Generate").
+        ...(smartAction && t.sendLabel ? { sendLabel: t.sendLabel } : {}),
+        /* Opens the menu ON the options: focus goes to the toggle's row,
+         * so a keyboard or screen reader lands where the chip pointed. */
+        ...(t.options ? {
+            onOpen: () => {
+                setCtxMenuOpen(true);
+                requestAnimationFrame(() => panelRef.current?.querySelector(`[data-composer-toggle="${t.id}"]`)?.focus());
+            },
+        } : {}),
+    }));
+    /* smartAction: the mic IS the composer's action while it has nothing else to
+     * do (or while it is busy), and reports consent, progress and errors to the
+     * notice row instead of beside itself. Same wiring as the leadSlot mic below,
+     * which stays for the legacy composer; Composer renders only one of them. */
+    const smartMic = smartAction ? (_jsx(DictateButton, { host: browserModelHost(), backend: () => { const r = resolveDictation(); return { host: r.host, createDictation: r.createDictation, supported: r.where !== 'none' }; }, onListeningChange: (on) => { if (on)
+            dictationBase.current = inputRef.current; setDictating(on); }, onInterim: (t) => { if (t)
+            setInput(appendDictated(dictationBase.current, t)); }, onFinal: (t) => setInput(appendDictated(dictationBase.current, t)), onNotice: setDictNotice })) : undefined;
     const composerEl = (_jsx(Composer, { value: input, onChange: setInput, runHint: runHint, 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
@@ -1075,15 +1487,28 @@ export function AgentChat(props) {
                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: [
+                setInput(appendDictated(dictationBase.current, t)); }, onFinal: (t) => setInput(appendDictated(dictationBase.current, t)) }), smartAction: smartAction, phoneLayout: phoneKit, sessionKey: sessionId ?? undefined, dictate: smartMic, onInterrupt: smartAction ? interruptCurrent : undefined, onSend: send, 
+        // smartAction: Stop also drops every queued message (held ones stay), and an interrupt
+        // still waiting for this run to end (D4). Without it
+        // they are parked as held by the run-end effect, as before.
+        onStop: () => { stoppedRef.current = true; if (sessionId) {
+            if (smartAction) {
+                dropQueued(sessionId);
+                if (interruptRef.current?.sid === sessionId)
+                    interruptRef.current = null;
+            }
+            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 })),
+            ...picks.map((p) => ({ id: `pick:${p.id}`, label: p.label, removable: true, oneShot: true, icon: _jsx(IcTarget, { size: 11 }), removeLabel: 'Remove picked element', detail: p.text })),
         ], onRemoveChip: (cid) => {
             if (cid.startsWith('doc:')) {
                 if (sessionId)
                     removeDoc(sessionId, cid.slice(4));
             }
+            else if (cid.startsWith('pick:'))
+                removePick(pickKey, cid.slice(5));
             else
                 onRemoveChip?.(cid);
         }, onAddContext: () => setCtxMenuOpen((o) => !o), 
@@ -1094,29 +1519,21 @@ export function AgentChat(props) {
         // 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, onRemove: t.onToggle,
-            ...(t.title ? { title: t.title } : {}),
-            ...(t.chipLabel ? { chipLabel: t.chipLabel } : {}),
-            /* Opens the menu ON the options: focus goes to the toggle's row,
-             * so a keyboard or screen reader lands where the chip pointed. */
-            ...(t.options ? {
-                onOpen: () => {
-                    setCtxMenuOpen(true);
-                    requestAnimationFrame(() => panelRef.current?.querySelector(`[data-composer-toggle="${t.id}"]`)?.focus());
-                },
-            } : {}),
-        })), 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')
+        toggleChips: chipsFor(composerToggles), 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, 
+        // smartAction: queued bubbles sit above the box, not in the strip.
+        statusHidden: dockEmpty && !running && todosNow.length === 0 && !degradedModel && (smartAction || 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 })) }));
+            editPending(sessionId, id, text); }, onImageClick: setLightboxSrc, inPrice: inPrice, onDropFiles: (files) => void processFiles(files), history: history, sendLater: (_jsx(SendLater, { collapsed: true, open: laterOpen, onOpenChange: setLaterOpen, 
+            // Picks are parked with the text, like a send, and leave the composer.
+            text: draftText(), onQueued: () => { setInput(''); clearPicks(); }, 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)
+    const noticesEl = (_jsxs(_Fragment, { children: [smartAction && dictNotice && (_jsx("div", { style: S.uploadNotice, role: dictNotice.kind === 'error' ? 'alert' : 'status', "data-chat-part": "dictation", children: dictNotice.kind === 'consent' ? (_jsxs(_Fragment, { children: [_jsxs("span", { style: { flex: 1 }, children: ["Voice input runs entirely on your device. It needs a one-time ", dictNotice.size, " download."] }), _jsx(KitButton, { variant: "primary", onClick: dictNotice.accept, children: "Enable" }), _jsx(KitButton, { variant: "secondary", onClick: dictNotice.decline, children: "Not now" })] })) : dictNotice.kind === 'preparing' ? (_jsxs(_Fragment, { children: [_jsxs("span", { style: { flex: 1 }, children: ["Getting voice input ready", dictNotice.progress != null ? ` ${dictNotice.progress}%` : ''] }), _jsx(KitButton, { variant: "secondary", onClick: dictNotice.cancel, children: "Cancel" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { style: { flex: 1 }, children: dictNotice.message }), _jsx("button", { type: "button", style: S.uploadNoticeX, onClick: dictNotice.dismiss, "aria-label": "Dismiss", children: _jsx(IcX, { size: 11 }) })] })) })), 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)) })] }))] }));
@@ -1124,7 +1541,7 @@ export function AgentChat(props) {
                     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" }), (() => {
+                }, children: [_jsx(IcCode, { size: 13 }), " Commands"] })), _jsx("div", { style: S.menuLabel, children: "Tools" }), !smartAction && (() => {
                 const route = resolveDictation();
                 const label = dictating ? 'Stop dictating'
                     : route.where === 'sidecar' ? (route.tunnel ? 'Dictate (on your sidecar, via tunnel)' : 'Dictate (on your sidecar)')
@@ -1136,7 +1553,15 @@ export function AgentChat(props) {
             /* A toggle with settings is a switch: flipping it keeps the
              * menu open so its settings appear right here, under it. */
             _jsxs(React.Fragment, { children: [_jsxs("button", { role: "menuitemcheckbox", "aria-checked": t.on, style: isPhone ? { ...S.menuItemTall, minHeight: 48, fontSize: 14 } : S.menuItemTall, "data-composer-toggle": t.id, title: t.title, onClick: t.onToggle, children: [t.icon, _jsxs("span", { style: S.menuItemText, children: [_jsx("span", { children: t.label }), t.on && t.summary && _jsx("span", { style: S.menuItemSub, children: t.summary })] }), _jsx("span", { "aria-hidden": "true", style: { ...S.switchTrack, ...(t.on ? S.switchTrackOn : null) }, children: _jsx("span", { style: { ...S.switchKnob, ...(t.on ? S.switchKnobOn : null) } }) })] }), t.on && _jsx("div", { style: S.menuOptions, "data-testid": `composer-toggle-options-${t.id}`, children: t.options() })] }, t.id)) : (_jsxs("button", { role: "menuitemcheckbox", "aria-checked": t.on, style: menuItemStyle, 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)))] }));
-    const dockEl = (_jsxs("div", { style: S.dockWrap, children: [ctxMenuOpen && (phoneSheet ? (
+    const dockEl = (_jsxs("div", { style: S.dockWrap, children: [ctxMenuOpen && (phoneKit ? (
+            /* The phone shell: attach, then one row per host switch, in a kit
+             * Sheet. Attach clicks the picker FIRST so it opens inside the tap's
+             * gesture, then closes the Sheet. */
+            _jsx(KitSheet, { open: true, label: "Add to message", onClose: () => setCtxMenuOpen(false), children: _jsxs("div", { className: "chat-plus-sheet", children: [_jsx(ListRow, { title: "Attach a file", lead: _jsx(IcFile, { size: 18 }), onClick: () => { fileInputRef.current?.click(); setCtxMenuOpen(false); } }), (composerToggles ?? []).map((t) => {
+                            const name = t.sheetLabel ?? t.label;
+                            const opts = t.on ? (t.sheetOptions ?? t.options) : undefined;
+                            return (_jsxs(React.Fragment, { children: [_jsx(ListRow, { title: name, lead: t.icon, trailing: _jsx(Toggle, { ariaLabel: name, checked: t.on, onChange: () => t.onToggle() }) }), opts?.()] }, t.id));
+                        }), renderContextMenu?.(() => setCtxMenuOpen(false))] }) })) : phoneSheet ? (
             /* On a phone the menu is a bottom sheet: anchored where the thumb
              * is, the conversation dimmed behind it, and its body scrolls the
              * way every phone sheet does once the image settings are open. */
@@ -1146,42 +1571,67 @@ export function AgentChat(props) {
                     ...(menuFit.top !== undefined ? { bottom: 'auto', top: menuFit.top } : null),
                     ...(menuFit.maxHeight !== undefined ? { maxHeight: menuFit.maxHeight, overflowY: 'auto' } : null),
                 }, onMouseLeave: optionsShown ? undefined : () => setCtxMenuOpen(false), children: menuItems }))), composerEl] }));
-    return (_jsxs("div", { style: S.panel, ref: panelRef, children: [headerOutside ? headerEl : null, _jsxs(ChatSkinRoot, { skin: transcriptSkin, style: S.skinBody, children: [headerOutside ? null : headerEl, ownLoop && _jsx(OptionsDrawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), personaName: personaName, onPersona: pickPersona, policyName: policyName, onPolicy: selectPolicy, hideIdentity: !!fixedIdentity, budgetSection: budgetSection?.({ override, setOverride }), settingsExtras: settingsExtras, toolBadge: toolBadge, policyEditor: policyEditor, registryTick: registryTick, capabilities: capabilities, sessionId: sessionId ?? '' }), _jsxs("div", { style: S.chatRegion, children: [_jsx("div", { style: { ...S.body, ...(timelineScrubbed ? { display: 'none' } : null) }, ref: bodyRef, "data-testid": "chat-body", onScroll: onBodyScroll, children: _jsxs(CapBox, { cap: cap, extra: S.bodyInner, children: [turns.length === 0 && !live && (loaded !== false
-                                            ? (readOnly ? null : (centered ? (_jsxs("div", { style: S.centerStart, "data-testid": "center-start", children: [emptyState?.({ setInput, lastSession }), noticesEl, dockEl, startFooter?.({ setInput, lastSession })] })) : (_jsxs(_Fragment, { children: [emptyState?.({ setInput, lastSession }), startFooter?.({ setInput, lastSession })] }))))
-                                            : _jsxs("div", { style: S.loadingTranscript, children: [_jsx(Spinner, { size: 14, title: "Loading conversation" }), " Loading conversation\u2026"] })), _jsxs("div", { style: S.transcriptWrap, children: [_jsx(Transcript, { turns: shownTurns, currentSrc: currentSrc ?? '', view: transcriptView, skin: transcriptSkin, handoff: handoff ?? undefined, onHandoffDone: () => setHandoff(null), onApplyEdit: onApplyEdit, onToggleInclude: readOnly ? undefined : toggleInclude, onRetry: readOnly ? undefined : onRetry, onImageClick: setLightboxSrc, renderFence: renderFence, renderToolCard: renderToolCard, footer: live ? (_jsxs("div", { style: fx === 'matrix' ? { ...S.live, position: 'relative', isolation: 'isolate' } : S.live, children: [fx === 'matrix' && _jsx(MatrixRain, { active: running }), recovery && _jsxs("div", { style: S.recovery, children: [_jsx(Spinner, { size: 13, title: "Recovering" }), " ", recovery] }), fx === 'splitflap' && live.tools.filter((t) => t.name !== 'propose_edit' && !liveCards.has(t.id)).map((t) => (_jsx("div", { "data-fx-id": t.id, children: _jsx(FlapRow, { status: t.done ? (t.isError ? 'failed' : 'done') : 'running', name: t.name.replace(/_/g, ' '), detail: Object.values(t.args ?? {}).find((v) => typeof v === 'string') ?? '' }) }, t.id))), fx !== 'splitflap' && transcriptSkin === 'minimal' && (_jsx(ToolFold, { invs: live.tools.filter((t) => t.name !== 'propose_edit' && !liveCards.has(t.id)).map((t) => ({
-                                                                    name: t.name, args: t.args || {}, result: t.result ?? '', isError: t.isError, running: !t.done, ms: t.ms,
-                                                                })), view: transcriptView })), live.tools.filter((t) => (fx !== 'splitflap' && transcriptSkin !== 'minimal') || t.name === 'propose_edit' || liveCards.has(t.id)).map((t) => liveCards.has(t.id) ? (
-                                                            // A host card replaces the default card mid-run too.
-                                                            _jsx(React.Fragment, { children: liveCards.get(t.id) }, t.id)) : t.name === 'propose_edit' ? (
-                                                            // propose_edit BLOCKS its run on the review, so the decidable card
-                                                            // must render here, mid-run — not only in the settled transcript.
-                                                            _jsx(DiffProposal, { call: { id: t.id, type: 'function', function: { name: 'propose_edit', arguments: JSON.stringify(t.args || {}) } }, currentSrc: currentSrc ?? '', onApplyEdit: onApplyEdit, view: transcriptView }, t.id)) : t.done ? (
-                                                            // A tool that finished mid-run gets the SAME expandable card as the
-                                                            // settled transcript, so its args/result are viewable before the
-                                                            // turn ends (not just a bare summary line).
-                                                            // data-fx-id stays the same across running -> done, so an effect
-                                                            // treats the swap as the same tool line (one rock, one animation).
-                                                            _jsx("div", { "data-fx-id": t.id, children: _jsx(ToolResultCard, { inv: { name: t.name, args: t.args || {}, result: t.result ?? '', isError: t.isError, running: false, ms: t.ms } }) }, t.id)) : (
-                                                            // The name animates once, here, when the tool appears.
-                                                            _jsx("div", { "data-fx-id": t.id, style: S.liveToolRow, children: _jsx(ToolLine, { name: t.name, args: t.args || {}, result: t.result, isError: t.isError, running: true, ms: t.ms, nameFx: fx }) }, t.id))), live.text && fx === 'netsplit' && !hasAnswer && _jsx(NetsplitJoin, {}), live.text ? _jsxs(_Fragment, { children: [_jsx("div", { "data-tx-part": "assistant", children: _jsx(LiveAnswer, { text: live.text, effect: fx, complete: !running, onProgress: (n) => { liveShownRef.current = n; } }) }), running && _jsx(LiveCursor, {})] }) : (!recovery && live.tools.length === 0 && (_jsxs("div", { style: S.thinkingWrap, children: [_jsxs("div", { style: S.thinking, children: [_jsx(Spinner, { size: 14, title: "Thinking" }), " thinking\u2026"] }), tip && _jsx("div", { style: S.tipGhost, children: tip })] })))] })) : undefined }), plan && plan.length > 0 && _jsx(PlanCard, { entries: plan })] }), pendingPerm && pendingPerm.tool === SUBMIT_PLAN && (_jsx(PlanApprovalCard, { agent: pendingPerm.agent ?? 'This agent', plan: planTextOf(undefined, pendingPerm.summary), ...(planAgents ? { agents: planAgents } : {}), onApprove: () => resolvePerm(true), onDeny: (note) => resolvePerm(false, false, note) })), pendingPerm && pendingPerm.tool !== SUBMIT_PLAN && (_jsxs("div", { style: S.perm, "data-chat-part": "perm", ...((pendingPerm.tool === 'budget' ? chatWords.budgetTitle : chatWords.permTitle)
-                                                ? { role: 'group', 'aria-label': pendingPerm.tool === 'budget' ? 'Budget limit reached' : 'Permission needed' }
-                                                : {}), children: [_jsx("div", { style: S.permHead, "data-chat-part": "perm-head", children: pendingPerm.tool === 'budget'
-                                                        ? (chatWords.budgetTitle ?? _jsxs(_Fragment, { children: [_jsx(IcKey, { size: 14 }), " Budget limit reached"] }))
-                                                        : (chatWords.permTitle?.(pendingPerm.tool) ?? _jsxs(_Fragment, { children: [_jsx(IcKey, { size: 14 }), " Permission needed"] })) }), _jsx("div", { style: S.permBody, children: pendingPerm.tool === 'budget'
-                                                        ? pendingPerm.summary
-                                                        : (_jsxs(_Fragment, { children: [pendingPerm.requester === 'you'
-                                                                    ? 'Your command needs'
-                                                                    : pendingPerm.agent
-                                                                        ? _jsxs(_Fragment, { children: [_jsx("strong", { children: pendingPerm.agent }), " (called by ", pendingPerm.caller ?? 'this agent', ") wants to use"] })
-                                                                        : 'The agent wants to use', ' ', _jsx("strong", { children: pendingPerm.tool }), ". ", pendingPerm.summary] })) }), _jsx("div", { style: S.permActions, children: pendingPerm.tool === 'budget' ? (_jsxs(_Fragment, { children: [_jsx("button", { style: S.permDeny, "data-chat-part": "perm-deny", ...plainName(chatWords.budgetStop, 'Stop'), onClick: () => resolvePerm(false), children: chatWords.budgetStop ?? 'Stop' }), _jsxs("button", { style: S.permAllow, "data-chat-part": "perm-go", ...plainName(chatWords.budgetContinue, 'Continue'), onClick: () => resolvePerm(true), children: [_jsx(IcCheck, { size: 12 }), " ", chatWords.budgetContinue ?? 'Continue'] })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { style: S.permDeny, "data-chat-part": "perm-deny", ...plainName(chatWords.deny, 'Deny'), onClick: () => resolvePerm(false), children: chatWords.deny ?? 'Deny' }), !isCheckpointTool(pendingPerm.tool) && (_jsx("button", { style: S.permAllowSession, "data-chat-part": "perm-session", ...plainName(chatWords.allowSession, 'Allow for session'), onClick: () => resolvePerm(true, true), children: chatWords.allowSession ?? 'Allow for session' })), _jsxs("button", { style: S.permAllow, "data-chat-part": "perm-go", ...plainName(chatWords.allowOnce, 'Allow once'), onClick: () => resolvePerm(true), children: [_jsx(IcCheck, { size: 12 }), " ", chatWords.allowOnce ?? 'Allow once'] })] })) })] })), approvalSuggestion && !pendingPerm && (_jsxs("div", { style: S.approvalSuggest, role: "status", "aria-live": "polite", "data-chat-part": "suggest", children: [_jsxs("div", { children: ["You've allowed ", _jsx("strong", { children: approvalSuggestion.tool }), " ", approvalSuggestion.count, " times", approvalSuggestion.scope === 'workspace' ? ' in this workspace' : '', ". Always allow it?"] }), _jsxs("div", { style: S.permActions, children: [approvalSuggestion.scopeChoice ? (_jsxs(_Fragment, { children: [_jsx("button", { style: S.permAllowSession, onClick: () => respondSuggestion('workspace'), children: "This workspace" }), _jsx("button", { style: S.permAllowSession, onClick: () => respondSuggestion('global'), children: "Everywhere" })] })) : (_jsx("button", { style: S.permAllowSession, onClick: () => respondSuggestion('global'), children: "Always allow" })), _jsx("button", { style: S.permDeny, onClick: () => respondSuggestion('not-now'), children: "Not now" }), _jsx("button", { style: S.permDeny, onClick: () => respondSuggestion('never'), children: "Never" })] })] })), policyNotes.map((n, i) => (_jsxs("div", { style: n.action === 'stop' ? S.policyStop : S.policyWarn, children: [_jsx(IcKey, { size: 12 }), " Policy (", policyName, "): ", n.message] }, i))), error && _jsx("div", { style: S.error, children: error }), !readOnly && !running && !error && suggestions.length > 0 && (_jsxs("div", { style: S.followRow, "data-chat-part": "followups", children: [chatWords.followups && _jsx("span", { style: S.followLabel, children: chatWords.followups }), suggestions.map((sg) => (_jsx("button", { style: S.followChip, onClick: () => setInput(sg), title: "Use this follow-up", children: sg }, sg)))] }))] }) }), LiveTimeline && _jsx(LiveTimeline, { events: recEvents, running: running, onScrubbedChange: setTimelineScrubbed })] }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: UPLOAD_ACCEPT, style: { display: 'none' }, onChange: (e) => {
-                            const files = Array.from(e.target.files ?? []);
-                            e.target.value = '';
-                            setCtxMenuOpen(false);
-                            void processFiles(files);
-                        } }), _jsxs(CapBox, { cap: cap, children: [centered ? null : noticesEl, readOnly ? (
-                            /* WATCH MODE: the whole input region is replaced, not disabled piecemeal.
-                               A disabled box with live chips around it still reads as "type here". */
-                            _jsxs("div", { style: S.readOnlyBar, role: "region", "aria-label": "Watching this run", children: [_jsx("div", { style: S.readOnlyBanner, children: readOnly.banner }), readOnly.action] })) : (centered ? null : dockEl)] })] }), lightboxSrc && _jsx(Lightbox, { src: lightboxSrc, onClose: () => setLightboxSrc(null) })] }));
+    /* The settings, as the drawer or (phoneKit) the phone Sheet: one prop set. */
+    const settingsProps = {
+        open: drawerOpen,
+        onClose: () => setSettings(false),
+        personaName,
+        onPersona: pickPersona,
+        policyName,
+        onPolicy: selectPolicy,
+        hideIdentity: !!fixedIdentity,
+        budgetSection: budgetSection?.({ override, setOverride }),
+        settingsExtras,
+        toolBadge,
+        policyEditor,
+        registryTick,
+        capabilities,
+        sessionId: sessionId ?? '',
+        // smartAction: the composer has no mode control, so Mode lives here, and
+        // a proxied chat (no own loop) gets the settings as Mode only.
+        ...(smartAction ? { modes: modeEntries, mode, onMode: setMode, modeOnly: !ownLoop } : null),
+    };
+    return (_jsx(BlockedResults.Provider, { value: blockedLookup, children: _jsx(ChatRefreshScope, { on: smartAction, children: _jsxs("div", { style: S.panel, ref: panelRef, children: [headerOutside && !hideHeader ? headerEl : null, _jsxs(ChatSkinRoot, { skin: transcriptSkin, style: S.skinBody, children: [headerOutside || hideHeader ? null : headerEl, (ownLoop || smartAction) && (phoneKit ? _jsx(ChatSettingsSheet, { ...settingsProps, lead: settingsLead, contextMeter: ownLoop && !readOnly ? _jsx(ContextBar, { variant: "flow", contextWindow: contextWindow, systemSource: resolveSystemSource(), offloaded: offloaded, conversation: conversation, sessionId: sessionId ?? '', policy: runPolicy }) : undefined }) : _jsx(OptionsDrawer, { ...settingsProps })), _jsxs("div", { style: S.chatRegion, children: [_jsx(ChatDetailHost, { on: smartAction, hidden: timelineScrubbed, apiRef: detailApiRef, follow: railTwin && !liveView ? { from: LIVE_SCOPE, to: `${railTwin}/` } : undefined, children: _jsx("div", { style: { ...S.body, ...(timelineScrubbed ? { display: 'none' } : null) }, ref: bodyRef, "data-testid": "chat-body", "data-chat-session": sessionId, 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: railTurns, 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, chatRefresh: smartAction, liveFooter: !!liveView, onRerun: smartAction ? onRerun : undefined, canRerun: smartAction ? canRerun : undefined, footer: railLive ? railFooterEl : live ? (_jsxs("div", { style: fx === 'matrix' ? { ...S.live, position: 'relative', isolation: 'isolate' } : S.live, children: [fx === 'matrix' && _jsx(MatrixRain, { active: running }), recovery && _jsxs("div", { "data-chat-part": "recovery", 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 })] }), approvalAlone && _jsx("div", { className: "tx-approval", "data-tx-part": "approval", "data-tx-alone": "", children: approvalNode }), !approvalNode && 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) })), !approvalNode && pendingPerm && pendingPerm.tool === HOOK_ASK_TOOL && (
+                                                    // Bound to this request's id: an answer never lands on a newer ask.
+                                                    _jsx(HookAskCard, { perm: pendingPerm, onAnswer: (allow) => { if (sessionId)
+                                                            answerShownPerm(sessionId, pendingPerm, allow, false); } }, pendingPerm.id ?? pendingPerm.summary)), !approvalNode && pendingPerm && pendingPerm.tool !== SUBMIT_PLAN && pendingPerm.tool !== HOOK_ASK_TOOL && (_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) => smartAction
+                                                                ? _jsx(KitChip, { onClick: () => setInput(sg), children: sg }, sg)
+                                                                : _jsx("button", { style: S.followChip, onClick: () => setInput(sg), title: "Use this follow-up", children: sg }, sg))] }))] }) }) }), LiveTimeline && _jsx(LiveTimeline, { events: recEvents, running: running, onScrubbedChange: setTimelineScrubbed })] }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: UPLOAD_ACCEPT, style: { display: 'none' }, onChange: (e) => {
+                                    const files = Array.from(e.target.files ?? []);
+                                    e.target.value = '';
+                                    setCtxMenuOpen(false);
+                                    void processFiles(files);
+                                } }), _jsxs(CapBox, { cap: cap, children: [centered ? null : noticesEl, readOnly ? (
+                                    /* WATCH MODE: the whole input region is replaced, not disabled piecemeal.
+                                       A disabled box with live chips around it still reads as "type here". */
+                                    _jsxs("div", { style: S.readOnlyBar, role: "region", "aria-label": "Watching this run", children: [_jsx("div", { style: S.readOnlyBanner, children: readOnly.banner }), readOnly.action] })) : (centered ? null : dockEl)] })] }), lightboxSrc && _jsx(Lightbox, { src: lightboxSrc, onClose: () => setLightboxSrc(null) })] }) }) }));
 }
 function useMatchMedia(q) {
     const get = () => typeof matchMedia === 'function' && matchMedia(q).matches;
@@ -1203,6 +1653,23 @@ 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' });
+/** A System One check or hook asking before the run goes on (tool
+ * HOOK_ASK_TOOL). It names the tool and every reason, shows the tool's result
+ * on request when the ask carries one, and offers only Block and Allow: the
+ * answer is for this one tool call, so there is no session allow. */
+function HookAskCard({ perm, onAnswer }) {
+    const [shown, setShown] = useState(false);
+    const answered = useRef(false);
+    const answer = (allow) => {
+        if (answered.current)
+            return;
+        answered.current = true;
+        onAnswer(allow);
+    };
+    const reasons = perm.hook?.reasons.length ? perm.hook.reasons : perm.summary.split('\n').filter(Boolean);
+    const result = perm.hook?.result;
+    return (_jsxs("div", { style: S.perm, role: "group", "aria-label": "System One check", "data-chat-part": "hook-ask", children: [_jsxs("div", { style: S.permHead, "data-chat-part": "perm-head", children: [_jsx(IcKey, { size: 14 }), " System One check"] }), _jsxs("div", { style: S.permBody, children: [perm.hook ? _jsxs("div", { children: ["Tool ", _jsx("strong", { children: perm.hook.tool })] }) : null, _jsx("ul", { style: S.hookReasons, children: reasons.map((r, i) => _jsx("li", { children: r }, i)) }), _jsx("div", { children: "The run waits for your answer." }), result !== undefined ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", style: S.hookShow, "aria-expanded": shown, onClick: () => setShown((v) => !v), children: shown ? 'Hide the result' : 'Show the result' }), shown ? _jsx("pre", { style: S.hookResult, children: result }) : null] })) : null] }), _jsxs("div", { style: S.permActions, children: [_jsx("button", { type: "button", style: S.hookBlock, "data-chat-part": "perm-deny", onClick: () => answer(false), children: "Block" }), _jsxs("button", { type: "button", style: S.hookAllow, "data-chat-part": "perm-go", onClick: () => answer(true), children: [_jsx(IcCheck, { size: 12 }), " Allow"] })] })] }));
+}
 const S = {
     panel: { position: 'relative', display: 'flex', flexDirection: 'column', flex: 1, width: '100%', minWidth: 0, height: '100%', background: 'var(--surface-1)', overflow: 'hidden' },
     // Full-width shell for a capped header row; the rule stays on the capped row so it follows the column.
@@ -1248,7 +1715,8 @@ const S = {
     liveToolRow: { display: 'flex', alignItems: 'center', padding: '6px 10px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: 'var(--surface-2)' },
     thinkingWrap: { display: 'flex', flexDirection: 'column', gap: 6 },
     thinking: { display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--text-tertiary)', fontSize: 13 },
-    recovery: { display: 'inline-flex', alignItems: 'center', gap: 7, color: 'var(--warning)', fontSize: 13, marginBottom: 6 },
+    // A chat skin sets --chat-recovery on the part where its --warning does not read.
+    recovery: { display: 'inline-flex', alignItems: 'center', gap: 7, color: 'var(--chat-recovery, var(--warning))', fontSize: 13, marginBottom: 6 },
     tipGhost: { fontSize: 12, color: 'var(--text-disabled)', fontStyle: 'italic', opacity: 0.7, paddingLeft: 20, maxWidth: 320, lineHeight: 1.4 },
     error: { fontSize: 12.5, color: 'var(--danger)', background: 'var(--danger-soft)', border: '1px solid var(--danger)', borderRadius: 'var(--radius-sm)', padding: '8px 10px' },
     // Follow-up chips under the latest reply — click to prefill the composer.
@@ -1268,6 +1736,11 @@ const S = {
     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' },
+    hookReasons: { margin: '4px 0', paddingLeft: 18 },
+    hookShow: { minHeight: 44, marginTop: 6, 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' },
+    hookResult: { margin: '6px 0 0', padding: 8, maxHeight: 240, overflow: 'auto', whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', fontSize: 12, background: 'var(--surface-1)', borderRadius: 'var(--radius-sm)' },
+    hookBlock: { flex: 1, minHeight: 44, padding: '0 14px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-1)', color: 'var(--text-secondary)', fontSize: 13, fontWeight: 600, cursor: 'pointer' },
+    hookAllow: { flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 5, minHeight: 44, padding: '0 14px', border: 0, borderRadius: 'var(--radius-sm)', background: 'var(--grad-brand)', color: 'var(--text-on-accent, #fff)', fontSize: 13, 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 },