@corenel/web-ui 0.1.0 → 0.2.0

package/dist/agentChat/AgentChat.js

@@ -0,0 +1,527 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 /
+ * live tools / permission card / composer with host differences expressed as
+ * props. Engine calls go through `controller` + the CONTROLLED `sessionId`;
+ * persona/policy selection and the system-parts toggles are owned here (harness
+ * get/set); everything editor-specific (context source, tips lifecycle, budget
+ * form, host slash commands) comes in via props. */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Transcript, ToolLine, DiffProposal } from '../Transcript';
+import { ToolResultCard } from '../toolRender';
+import { Markdown } from '../RichContent';
+import { Composer } from '../Composer';
+import { AskUser } from '../AskUser';
+import { Lightbox } from '../Lightbox';
+import { ContextBar } from '../ContextBar';
+import { useTranscriptView } from '../transcriptView';
+import { OptionsDrawer, useMcpTools } from './OptionsDrawer';
+import { useControllerSession, useControllerGlobal } from './controller';
+import { getSelectedPolicyName, setSelectedPolicyName } from '@corenel/harness/guardrail';
+import { loadPersonas, getSelectedPersona, setSelectedPersona } from '@corenel/harness/prompts/config';
+import { getSystemParts, setSystemParts } from '@corenel/harness/systemParts';
+import { listSkills, subscribeSkills } from '@corenel/harness/skills';
+import { allTools } from '@corenel/harness/tools/builtins';
+import { useContextDocs, addDoc, removeDoc, classifyUpload, looksBinary, ContextDocError, UPLOAD_ACCEPT } from '@corenel/tools-web/contextDocs';
+import { fmtTok } from '@corenel/ui-kit/usage';
+import { useBrand } from '@corenel/ui-kit/host';
+import { IcPlus, IcZap, IcTrash, IcChevron, IcX, IcRefresh, IcKey, IcCheck, IcSliders, IcUser, IcFile, IcCode, IcHelp, IcEdit, Spinner, LiveCursor } from '@corenel/ui-kit/icons';
+const NOOP = () => { };
+export function AgentChat(props) {
+    const { controller, sessionId, onSessionChange, sessions, contextWindow, systemSource, offloaded, usageSurface, inPrice, modes, currentSrc, onApplyEdit, renderFence, emptyState, headerLead, headerExtras, title, features, embedded = false, onClose, chips, onRemoveChip, renderContextMenu, capabilities, slashExtra, onSlashAction, interceptSend, sendOptsExtra, onAfterSend, tip, budgetSection, connections, toolBadge, policyEditor, settingsExtras, LiveTimeline, fixedIdentity, } = props;
+    const { name: brandName } = useBrand(); // host-injected product name (CorenelHost seam)
+    // The engine owns the conversation, run loop, worker, and persistence — this
+    // column is a view over ONE controller session. The active session id is
+    // CONTROLLED by the host (sessionId/onSessionChange).
+    const session = useControllerSession(controller, sessionId ?? '');
+    const globalTick = useControllerGlobal(controller); // cross-session changes (titles, run badges)
+    const { turns, input, mode, running, live, recovery, error, suggestions, attachments, pendingPerm, pendingAsk, policyNotes, degradedModel, recEvents } = session;
+    // Thin engine-routed setters so the render below reads like the old local-state
+    // version (same call sites, engine-backed).
+    const setInput = useCallback((v) => { if (sessionId)
+        controller.setInput(sessionId, v); }, [controller, sessionId]);
+    const setMode = useCallback((m) => { if (sessionId)
+        controller.setMode(sessionId, m); }, [controller, sessionId]);
+    const setAttachments = useCallback((fn) => { if (sessionId)
+        controller.setAttachments(sessionId, fn); }, [controller, sessionId]);
+    const toggleInclude = useCallback((turnId) => { if (sessionId)
+        controller.toggleInclude(sessionId, turnId); }, [controller, sessionId]);
+    // Which composed parts of the system prompt to include (persona/mode/...). A ref
+    // mirror keeps composeSystem reading the latest even if toggled just before send.
+    const [parts, setParts] = useState(getSystemParts);
+    const partsRef = useRef(parts);
+    partsRef.current = parts;
+    const togglePart = (k) => setParts((p) => { const next = { ...p, [k]: !p[k] }; setSystemParts(next); return next; });
+    // Per-run budget override: AgentChat only stores + forwards it (send opts); the
+    // HOST's budgetSection form computes the effective value and merges changes.
+    const [override, setOverride] = useState({});
+    const [sessionList, setSessionList] = useState([]);
+    const [menuOpen, setMenuOpen] = useState(false);
+    // 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);
+    // 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);
+    const [transcriptView] = useTranscriptView();
+    // Installed skills, for the "/" command menu (the drawer's SkillsSection loads its
+    // own copy). Subscribe so the menu re-renders when a skill is installed/removed;
+    // the same signal bumps registryTick so the drawer's tool groups recompute.
+    const [skills, setSkills] = useState([]);
+    const [registryTick, setRegistryTick] = useState(0);
+    const skillsFn = capabilities?.skills ?? listSkills;
+    // Fingerprint of the last-loaded skills list (names+enabled), so the reload
+    // below only bumps registryTick when the registry actually changed. Keying the
+    // effect on the OBJECT identity of `capabilities` (rather than its getters) and
+    // bumping the tick unconditionally would loop with a host that passes an inline
+    // (unmemoized) `capabilities={{...}}` prop: effect -> setRegistryTick ->
+    // re-render -> new object identity -> effect again, forever.
+    const skillsFpRef = useRef('');
+    useEffect(() => {
+        const reload = () => {
+            skillsFn().then((list) => {
+                setSkills(list);
+                const fp = list.map((s) => `${s.name}:${s.enabled}`).join('|');
+                if (fp !== skillsFpRef.current) {
+                    skillsFpRef.current = fp;
+                    setRegistryTick((t) => t + 1);
+                }
+            }).catch(() => setSkills([]));
+        };
+        reload();
+        return subscribeSkills(reload);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [capabilities?.skills, capabilities?.tools]);
+    // Discovered MCP tools for the "/" command menu — mount-load from cache, then a
+    // forced refresh each time the drawer opens (mirrors the old AgentPanel's
+    // mount-load + drawer-open refresh of its shared list), plus after a
+    // drawer-driven MCP mutation (onConnectionsChanged, Fix 4) so the slash menu
+    // doesn't go stale between drawer opens.
+    const [mcpKey, setMcpKey] = useState(0);
+    useEffect(() => { if (drawerOpen)
+        setMcpKey((k) => k + 1); }, [drawerOpen]);
+    const mcpTools = useMcpTools(connections, mcpKey);
+    const [ctxMenuOpen, setCtxMenuOpen] = useState(false);
+    const fileInputRef = useRef(null);
+    const [uploadNotice, setUploadNotice] = useState(null);
+    const contextDocs = useContextDocs(sessionId ?? '');
+    const readAsDataUrl = (f) => new Promise((res) => {
+        const r = new FileReader();
+        r.onload = () => res(typeof r.result === 'string' ? r.result : '');
+        r.onerror = () => res('');
+        r.readAsDataURL(f);
+    });
+    // Route uploads: images -> one-shot attachments (as paste does), text-like ->
+    // persistent context docs, everything else -> a notice. Cap breaches surface
+    // the store's user-facing ContextDocError message verbatim.
+    const processFiles = async (files) => {
+        setUploadNotice(null);
+        const notices = [];
+        for (const f of files) {
+            const kind = classifyUpload(f.name, f.type);
+            if (kind === 'image') {
+                // Images are one-shot attachments (composer state), so they route
+                // even without a bound session.
+                const url = await readAsDataUrl(f);
+                if (url)
+                    setAttachments((a) => [...a, url]);
+                continue;
+            }
+            if (!sessionId) {
+                notices.push('Start a chat before attaching documents.');
+                continue;
+            }
+            if (kind === 'unsupported') {
+                notices.push(`"${f.name}" is not supported yet - PDF and Office ingestion are coming later. Upload plain-text files (md, txt, csv, json, code).`);
+                continue;
+            }
+            let text;
+            try {
+                text = await f.text();
+            }
+            catch {
+                notices.push(`"${f.name}" could not be read.`);
+                continue;
+            }
+            if (looksBinary(text)) {
+                notices.push(`"${f.name}" looks like a binary file - only plain-text documents are supported.`);
+                continue;
+            }
+            try {
+                addDoc(sessionId, { name: f.name, mime: f.type, text });
+            }
+            catch (e) {
+                if (e instanceof ContextDocError)
+                    notices.push(e.message);
+                else
+                    throw e;
+            }
+        }
+        setUploadNotice(notices.length ? notices.join('\n') : null);
+    };
+    // A rejection notice is about THIS session's upload attempt; don't let it
+    // linger onto another chat.
+    useEffect(() => { setUploadNotice(null); }, [sessionId]);
+    const [selPolicy, setSelPolicy] = useState(getSelectedPolicyName);
+    const selectPolicy = useCallback((name) => { setSelPolicy(name); setSelectedPolicyName(name); }, []);
+    const policyName = fixedIdentity?.policyName ?? selPolicy;
+    const [selPersona, setSelPersona] = useState(getSelectedPersona);
+    const pickPersona = useCallback((id) => { setSelPersona(id); setSelectedPersona(id); }, []);
+    const personaName = fixedIdentity ? (fixedIdentity.persona ?? '') : selPersona;
+    // Persona list, only for the options-button tooltip label (the drawer loads its
+    // own copy for the picker).
+    const [personas, setPersonas] = useState([]);
+    useEffect(() => { loadPersonas().then(setPersonas).catch(() => setPersonas([])); }, []);
+    const personaLabel = personas.find((p) => p.id === personaName)?.name || personaName;
+    const bodyRef = useRef(null);
+    const [lightboxSrc, setLightboxSrc] = useState(null);
+    // Stick-to-bottom: autoscroll only while the user is pinned at the bottom.
+    // Scrolling up to read history must never be interrupted by streaming deltas;
+    // scrolling back down re-engages the pin. 48px of slop absorbs sub-pixel
+    // rounding and momentum overshoot.
+    const pinnedRef = useRef(true);
+    const onBodyScroll = () => {
+        const el = bodyRef.current;
+        if (el)
+            pinnedRef.current = el.scrollHeight - el.scrollTop - el.clientHeight <= 48;
+    };
+    // auto-scroll the transcript to the bottom as content streams in — unless the
+    // user has scrolled up to read history
+    useEffect(() => {
+        if (pinnedRef.current)
+            bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight });
+    }, [turns, live]);
+    // A session switch is a fresh view: re-pin and land on the latest message.
+    useEffect(() => {
+        pinnedRef.current = true;
+        bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight });
+    }, [sessionId]);
+    // Keep the switcher in sync with the store — refreshed on every engine global
+    // change (new/deleted session, run start/stop, first-message auto-titling).
+    const refreshSessions = useCallback(() => { sessions.list().then(setSessionList).catch(() => { }); }, [sessions]);
+    useEffect(() => { refreshSessions(); }, [refreshSessions, globalTick]);
+    // Elapsed seconds while a run is in flight — drives the persistent header
+    // indicator so "the model is working" stays visible through streaming + tools
+    // (the inline "thinking…" only shows before the first token).
+    const [runElapsed, setRunElapsed] = useState(0);
+    useEffect(() => {
+        if (!running) {
+            setRunElapsed(0);
+            return;
+        }
+        const start = Date.now();
+        setRunElapsed(0);
+        const t = setInterval(() => setRunElapsed(Math.floor((Date.now() - start) / 1000)), 1000);
+        return () => clearInterval(t);
+    }, [running]);
+    const newSession = async () => {
+        const id = await controller.newSession();
+        onSessionChange(id);
+        refreshSessions();
+        setMenuOpen(false);
+    };
+    const switchSession = (id) => {
+        onSessionChange(id);
+        void controller.load(id);
+        setMenuOpen(false);
+    };
+    const deleteSession = async (id) => {
+        await controller.deleteSession(id);
+        // Land on (or create) another session so the composer stays bound — the
+        // engine keys all input/run state by session id. openInitial() can reject
+        // (e.g. nothing to reopen); fall back to a fresh session so the composer
+        // still lands on a live one. Only if both fail is the current id left as-is.
+        if (id === sessionId) {
+            const next = await controller.openInitial().catch(() => null) ?? await controller.newSession().catch(() => null);
+            if (next)
+                onSessionChange(next);
+        }
+        refreshSessions();
+    };
+    // Inline rename — double-click the header title or the menu's pencil. Committing
+    // locks the title so auto-titling from the first message stops overwriting it.
+    const [renaming, setRenaming] = useState(null);
+    const commitRename = async () => {
+        if (!renaming)
+            return;
+        const { id, title: next } = renaming;
+        setRenaming(null);
+        const t = next.trim();
+        const cur = sessionList.find((s) => s.id === id)?.title || '';
+        if (t && t !== cur) {
+            await sessions.rename(id, t);
+            refreshSessions();
+        }
+    };
+    const startRename = (id) => {
+        setMenuOpen(false);
+        setRenaming({ id, title: sessionList.find((s) => s.id === id)?.title || '' });
+    };
+    const renameKey = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            void commitRename();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            setRenaming(null);
+        }
+    };
+    const resolvePerm = (allow, always = false) => {
+        if (sessionId)
+            controller.resolvePerm(sessionId, allow, always);
+    };
+    // The "/" command menu = the generic commands, the host's extras, then every
+    // available tool, skill, and MCP tool as an `insert` command that prefills an
+    // editable request. Rebuilt when the registries change. `context` appears only
+    // when the host supplies an add-context popup to open.
+    const slashCommands = useMemo(() => {
+        // Order matches the old AgentPanel: Session, Workspace(+host extras), Prompt,
+        // Help, then Tools/Skills/MCP inserts. `help` is generic but lands AFTER the
+        // host's slashExtra merge so a host's Workspace/Prompt entries stay ahead of it.
+        const beforeExtra = [
+            { name: 'new', hint: 'start a fresh chat', section: 'Session', icon: _jsx(IcPlus, { size: 13 }), kind: 'action' },
+            { name: 'clear', hint: 'clear this conversation', section: 'Session', icon: _jsx(IcRefresh, { size: 13 }), kind: 'action' },
+            ...(renderContextMenu ? [{ name: 'context', hint: 'attach files or selection', section: 'Workspace', icon: _jsx(IcFile, { size: 13 }), kind: 'action' }] : []),
+            { name: 'persona', hint: 'switch the agent persona', section: 'Workspace', icon: _jsx(IcUser, { size: 13 }), kind: 'action' },
+        ];
+        const help = { name: 'help', hint: 'what the agent can do', section: 'Help', icon: _jsx(IcHelp, { size: 13 }), kind: 'action' };
+        // Dedupe slashExtra against the generic set — first definition wins (generic
+        // first), so a colliding host entry is dropped rather than doubled in the menu.
+        const genericNames = new Set([...beforeExtra, help].map((c) => c.name));
+        const dedupedExtra = (slashExtra ?? []).filter((c) => !genericNames.has(c.name));
+        const staticCmds = [...beforeExtra, ...dedupedExtra, help];
+        const staticNames = new Set(staticCmds.map((c) => c.name));
+        const trunc = (s) => {
+            const one = (s ?? '').replace(/\s+/g, ' ').trim();
+            return one.length > 72 ? one.slice(0, 71) + '…' : one;
+        };
+        const toolCmds = (capabilities?.tools ?? allTools)()
+            .filter((t) => !staticNames.has(t.name))
+            .map((t) => ({ name: t.name, hint: trunc(t.description), section: 'Tools', icon: _jsx(IcSliders, { size: 13 }), kind: 'insert', template: `Use the ${t.name} tool to ` }));
+        const skillCmds = skills
+            .filter((s) => s.enabled && !staticNames.has(s.name))
+            .map((s) => ({ name: s.name, hint: trunc(s.description), section: 'Skills', icon: _jsx(IcZap, { size: 13 }), kind: 'insert', template: `Use the ${s.name} skill to ` }));
+        const mcpCmds = mcpTools
+            .filter((t) => !!t.name && !t.error && !staticNames.has(t.name))
+            .map((t) => ({ name: t.name, hint: trunc(t.description || t.serverLabel), section: 'MCP', icon: _jsx(IcCode, { size: 13 }), kind: 'insert', template: `Use the ${t.name} MCP tool (${t.serverLabel}) to ` }));
+        return [...staticCmds, ...toolCmds, ...skillCmds, ...mcpCmds];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [renderContextMenu, slashExtra, capabilities, skills, mcpTools, registryTick]);
+    const slashMap = useMemo(() => Object.fromEntries(slashCommands.map((c) => [c.name, c])), [slashCommands]);
+    // Per-send options for the engine. Rebuilt per call so persona/policy/budget are
+    // read fresh; `partsOverride` reads through the ref so a toggle right before send
+    // still lands. Host extras (editorFile, onEditReview, ...) spread on top.
+    const buildSendOpts = () => {
+        const base = {
+            persona: personaName,
+            policyName,
+            constraints: Object.keys(override).length ? override : undefined,
+            partsOverride: partsRef.current,
+            // AgentChat renders the policyNotes banner — skip the duplicate transcript
+            // note() turn for budget warn/stop (see BaseSendOpts.budgetNotices).
+            budgetNotices: 'notes',
+        };
+        const extra = sendOptsExtra?.();
+        return (extra ? { ...base, ...extra } : base);
+    };
+    /** Resolve the session to run against — the active one, or a fresh one when
+     * none is active yet (mirrors the old runSend's auto-create). */
+    const ensureSession = async () => {
+        if (sessionId)
+            return sessionId;
+        const id = await controller.newSession();
+        onSessionChange(id);
+        return id;
+    };
+    const sendMessage = async (text, images) => {
+        if ((!text && images.length === 0) || running)
+            return;
+        // Sending your own message always snaps the view to the bottom.
+        pinnedRef.current = true;
+        const sid = await ensureSession();
+        await controller.send(sid, text, images, buildSendOpts());
+        onAfterSend?.(sid);
+    };
+    /** 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) => {
+        void (async () => {
+            if (!text || running)
+                return;
+            if (interceptSend && (await interceptSend(text)))
+                return;
+            await sendMessage(text, []);
+        })();
+    };
+    // /help renders from the CURRENT resolved slash set, not a static blurb — so
+    // every surface (editor, /agent, /craft) lists exactly its own commands. Tools/
+    // Skills/MCP are excluded (those are insert-a-request shortcuts, not "commands"
+    // in the help sense); only the Session/Workspace/Prompt/Help-style entries
+    // (the generic set + a host's slashExtra) are listed.
+    const buildHelpText = () => {
+        const cmds = slashCommands.filter((c) => c.section !== 'Tools' && c.section !== 'Skills' && c.section !== 'MCP');
+        const lines = cmds.map((c) => `- \`/${c.name}\` — ${c.hint}`).join('\n');
+        return `**${brandName}** — type \`/\` for commands:\n\n${lines}\n\nPick a mode (auto/edit/plan/brainstorm) by the composer.`;
+    };
+    const runSlash = (name) => {
+        const def = slashMap[name];
+        if (!def)
+            return 'none';
+        if (def.kind === 'insert') {
+            setInput(def.template ?? '');
+            return 'prefilled';
+        }
+        if (onSlashAction?.(name, { sendText }))
+            return 'handled';
+        switch (name) {
+            case 'new':
+                void newSession();
+                break;
+            case 'clear':
+                if (sessionId)
+                    controller.clear(sessionId);
+                break;
+            case 'context':
+                setCtxMenuOpen(true);
+                break;
+            case 'persona':
+                setDrawerOpen(true);
+                break;
+            case 'help':
+                if (sessionId)
+                    controller.note(sessionId, buildHelpText());
+                break;
+            default: return 'none';
+        }
+        return 'handled';
+    };
+    const send = async () => {
+        const text = input.trim();
+        const images = attachments;
+        if ((!text && images.length === 0) || running)
+            return;
+        // Host commands are first-chance (the editor's /strategy + /model) — BEFORE
+        // slash dispatch, matching the old AgentPanel where those intercepts ran
+        // ahead of runSlash so '/strategy <goal>' isn't swallowed by a menu prefill.
+        if (interceptSend && (await interceptSend(text)))
+            return;
+        if (text.startsWith('/') && images.length === 0) {
+            const r = runSlash(text.slice(1).split(' ')[0]);
+            if (r === 'handled') {
+                setInput('');
+                return;
+            }
+            if (r === 'prefilled')
+                return; // template is in the composer — review, then send
+        }
+        // The engine guards + clears the composer itself: a feature-guard denial
+        // surfaces in session.error with the draft and pasted images intact.
+        await sendMessage(text, images);
+    };
+    // Re-run a prior user turn (the engine drops it + everything after, then re-sends).
+    const onRetry = (turnId) => {
+        if (!sessionId || running)
+            return;
+        void controller.retry(sessionId, turnId, buildSendOpts());
+    };
+    // The drawer acts on THIS engine session (include-toggles + offload Restore).
+    // `conversation` is a required ContextBar/ContextManagerBody prop, so this
+    // always returns an object; without an active session yet, the actions are
+    // no-ops (there is nothing to toggle/restore). Memoized on the turns identity
+    // so the projection memos downstream don't recompute per render.
+    const conversation = useMemo(() => ({
+        turns: session.turns,
+        toggleInclude: (turnId) => { if (sessionId)
+            controller.toggleInclude(sessionId, turnId); },
+        restoreToolResult: (turnId, blobId, content) => (sessionId ? controller.restoreToolResult(sessionId, turnId, blobId, content) : false),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }), [sessionId, session.turns]);
+    const menuEnabled = features?.sessionMenu !== false;
+    const 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]);
+    return (_jsxs("div", { style: S.panel, children: [_jsxs("header", { style: S.head, children: [headerLead, !menuEnabled ? (_jsx("span", { style: S.sessionName, children: title ?? brandName })) : renaming && renaming.id === sessionId ? (_jsx("input", { autoFocus: true, style: S.renameInput, value: renaming.title, onChange: (e) => setRenaming({ id: renaming.id, title: e.target.value }), onKeyDown: renameKey, onBlur: commitRename, placeholder: "Session name", "aria-label": "Rename session" })) : (_jsxs("div", { style: S.sessionBtn, onClick: () => { setMenuOpen((o) => !o); }, onDoubleClick: (e) => { if (sessionId) {
+                            e.stopPropagation();
+                            startRename(sessionId);
+                        } }, title: sessionId ? 'Double-click to rename' : undefined, children: [_jsx(IcZap, { size: 14 }), _jsx("span", { style: S.sessionName, children: sessionTitle }), _jsx(IcChevron, { size: 12 })] })), running && (_jsxs("span", { style: S.runChip, title: "The model is working \u2014 press Stop to cancel", children: [_jsx(Spinner, { size: 12 }), _jsx("span", { children: runElapsed > 0 ? `${runElapsed}s` : 'working…' })] })), _jsx("div", { style: { flex: 1, minWidth: 8 } }), headerExtras, _jsx("button", { style: S.iconBtn, onClick: newSession, title: "New chat", "aria-label": "New chat", children: _jsx(IcPlus, { size: 16 }) }), _jsx("button", { style: { ...S.iconBtn, ...(drawerOpen ? S.iconBtnActive : null) }, onClick: () => setDrawerOpen((o) => !o), title: fixedIdentity ? 'Display & capabilities' : `Persona, display & capabilities — ${personaLabel}`, "aria-label": "Panel options", children: _jsx(IcSliders, { size: 16 }) }), !embedded && onClose && _jsx("button", { style: S.iconBtn, onClick: onClose, title: "Close (\u2318K to reopen)", "aria-label": "Close", children: _jsx(IcX, { size: 16 }) }), menuEnabled && menuOpen && (_jsxs("div", { style: S.menu, onMouseLeave: () => setMenuOpen(false), children: [_jsxs("button", { style: S.menuItem, onClick: newSession, children: [_jsx(IcPlus, { size: 13 }), " New chat"] }), _jsx("div", { style: S.menuLabel, children: "Recent" }), sessionList.length === 0 && _jsx("div", { style: S.menuEmpty, children: "No saved chats" }), sessionList.slice(0, 12).map((s) => (_jsx("div", { style: S.menuRow, children: renaming && renaming.id === s.id ? (_jsx("input", { autoFocus: true, style: S.renameInput, value: renaming.title, onChange: (e) => setRenaming({ id: s.id, title: e.target.value }), onKeyDown: renameKey, onBlur: commitRename, placeholder: "Session name", "aria-label": "Rename session", onClick: (e) => e.stopPropagation() })) : (_jsxs(_Fragment, { children: [_jsx("button", { style: menuSession(s.id === sessionId), onClick: () => switchSession(s.id), children: s.title || 'Untitled' }), _jsx("button", { style: S.menuDel, onClick: () => startRename(s.id), title: "Rename", children: _jsx(IcEdit, { size: 12 }) }), _jsx("button", { style: S.menuDel, onClick: () => deleteSession(s.id), title: "Delete", children: _jsx(IcTrash, { size: 12 }) })] })) }, s.id)))] }))] }), _jsx(OptionsDrawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), personaName: personaName, onPersona: pickPersona, policyName: policyName, onPolicy: selectPolicy, hideIdentity: !!fixedIdentity, budgetSection: budgetSection?.({ override, setOverride }), settingsExtras: settingsExtras, connections: connections, toolBadge: toolBadge, policyEditor: policyEditor, registryTick: registryTick, capabilities: capabilities, onConnectionsChanged: () => setMcpKey((k) => k + 1) }), _jsx(ContextBar, { contextWindow: contextWindow, parts: parts, onToggle: togglePart, systemSource: typeof systemSource === 'function' ? systemSource(parts) : systemSource, offloaded: offloaded, conversation: conversation, usageSurface: usageSurface }), _jsxs("div", { style: S.chatRegion, children: [_jsxs("div", { style: { ...S.body, ...(timelineScrubbed ? { display: 'none' } : null) }, ref: bodyRef, "data-testid": "chat-body", onScroll: onBodyScroll, children: [turns.length === 0 && !live && emptyState?.({ setInput }), _jsxs("div", { style: S.transcriptWrap, children: [_jsx(Transcript, { turns: turns, currentSrc: currentSrc ?? '', view: transcriptView, onApplyEdit: onApplyEdit ?? NOOP, onToggleInclude: toggleInclude, onRetry: onRetry, onImageClick: setLightboxSrc, renderFence: renderFence }), live && (_jsxs("div", { style: S.live, children: [recovery && _jsxs("div", { style: S.recovery, children: [_jsx(Spinner, { size: 13, title: "Recovering" }), " ", recovery] }), live.tools.map((t) => t.name === 'propose_edit' ? (
+                                            // propose_edit BLOCKS its run on the review, so the decidable card
+                                            // must render here, mid-run — not only in the settled transcript.
+                                            _jsx(DiffProposal, { call: { id: t.id, type: 'function', function: { name: 'propose_edit', arguments: JSON.stringify(t.args || {}) } }, currentSrc: currentSrc ?? '', onApplyEdit: onApplyEdit ?? NOOP, view: transcriptView }, t.id)) : t.done ? (
+                                            // A tool that finished mid-run gets the SAME expandable card as the
+                                            // settled transcript, so its args/result are viewable before the
+                                            // turn ends (not just a bare summary line).
+                                            _jsx(ToolResultCard, { inv: { name: t.name, args: t.args || {}, result: t.result ?? '', isError: t.isError, running: false, ms: t.ms } }, t.id)) : (_jsx("div", { style: S.liveToolRow, children: _jsx(ToolLine, { name: t.name, args: t.args || {}, result: t.result, isError: t.isError, running: true, ms: t.ms }) }, t.id))), live.text ? _jsxs(_Fragment, { children: [_jsx(Markdown, { text: live.text }), running && _jsx(LiveCursor, {})] }) : (!recovery && live.tools.length === 0 && (_jsxs("div", { style: S.thinkingWrap, children: [_jsxs("div", { style: S.thinking, children: [_jsx(Spinner, { size: 14, title: "Thinking" }), " thinking\u2026"] }), tip && _jsx("div", { style: S.tipGhost, children: tip })] })))] }))] }), pendingPerm && (_jsxs("div", { style: S.perm, children: [_jsxs("div", { style: S.permHead, children: [_jsx(IcKey, { size: 14 }), " ", pendingPerm.tool === 'budget' ? 'Budget limit reached' : 'Permission needed'] }), _jsx("div", { style: S.permBody, children: pendingPerm.tool === 'budget' ? pendingPerm.summary : _jsxs(_Fragment, { children: ["The agent wants to use ", _jsx("strong", { children: pendingPerm.tool }), ". ", pendingPerm.summary] }) }), _jsx("div", { style: S.permActions, children: pendingPerm.tool === 'budget' ? (_jsxs(_Fragment, { children: [_jsx("button", { style: S.permDeny, onClick: () => resolvePerm(false), children: "Stop" }), _jsxs("button", { style: S.permAllow, onClick: () => resolvePerm(true), children: [_jsx(IcCheck, { size: 12 }), " Continue"] })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { style: S.permDeny, onClick: () => resolvePerm(false), children: "Deny" }), _jsx("button", { style: S.permAllowSession, onClick: () => resolvePerm(true, true), children: "Allow for session" }), _jsxs("button", { style: S.permAllow, onClick: () => resolvePerm(true), children: [_jsx(IcCheck, { size: 12 }), " Allow once"] })] })) })] })), policyNotes.map((n, i) => (_jsxs("div", { style: n.action === 'stop' ? S.policyStop : S.policyWarn, children: [_jsx(IcKey, { size: 12 }), " Policy (", policyName, "): ", n.message] }, i))), error && _jsx("div", { style: S.error, children: error }), !running && !error && suggestions.length > 0 && (_jsx("div", { style: S.followRow, children: suggestions.map((sg) => (_jsx("button", { style: S.followChip, onClick: () => setInput(sg), title: "Use this follow-up", children: sg }, sg))) }))] }), LiveTimeline && _jsx(LiveTimeline, { events: recEvents, running: running, onScrubbedChange: setTimelineScrubbed })] }), ctxMenuOpen && (_jsxs("div", { style: S.ctxMenu, onMouseLeave: () => setCtxMenuOpen(false), children: [renderContextMenu?.(() => setCtxMenuOpen(false)), _jsxs("button", { style: S.menuItem, disabled: !sessionId, onClick: () => fileInputRef.current?.click(), children: [_jsx(IcFile, { size: 13 }), " Upload document\u2026"] })] })), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: UPLOAD_ACCEPT, style: { display: 'none' }, onChange: (e) => {
+                    const files = Array.from(e.target.files ?? []);
+                    e.target.value = '';
+                    setCtxMenuOpen(false);
+                    void processFiles(files);
+                } }), uploadNotice && (_jsxs("div", { style: S.uploadNotice, children: [_jsx("span", { style: { flex: 1, whiteSpace: 'pre-line' }, children: uploadNotice }), _jsx("button", { style: S.uploadNoticeX, onClick: () => setUploadNotice(null), "aria-label": "Dismiss", children: _jsx(IcX, { size: 11 }) })] })), pendingAsk && (_jsx(AskUser, { questions: pendingAsk.questions, onSubmit: (answers) => { if (sessionId)
+                    controller.resolveAsk(sessionId, answers); }, onCancel: () => { if (sessionId)
+                    controller.resolveAsk(sessionId, null); } })), degradedModel && (_jsx("div", { style: S.budgetWrap, children: _jsxs("span", { style: S.budgetDegraded, children: ["Degraded to ", degradedModel, " (budget)"] }) })), _jsx(Composer, { value: input, onChange: setInput, onSend: send, onStop: () => { if (sessionId)
+                    controller.stop(sessionId); }, running: running, mode: mode, onModeChange: setMode, modes: modeEntries, chips: [
+                    ...(chips ?? []),
+                    ...contextDocs.map((d) => ({ id: `doc:${d.id}`, label: `${d.name} · ${fmtTok(d.tokens)} tok`, removable: true })),
+                ], onRemoveChip: (cid) => {
+                    if (cid.startsWith('doc:')) {
+                        if (sessionId)
+                            removeDoc(sessionId, cid.slice(4));
+                    }
+                    else
+                        onRemoveChip?.(cid);
+                }, onAddContext: () => setCtxMenuOpen((o) => !o), 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)), onImageClick: setLightboxSrc, inPrice: inPrice, onDropFiles: (files) => void processFiles(files) }), lightboxSrc && _jsx(Lightbox, { src: lightboxSrc, onClose: () => setLightboxSrc(null) })] }));
+}
+// Session-row style is keyed by "active" — kept out of S (which is a flat style
+// map) and typed as its own helper.
+const menuSession = (active) => ({ flex: 1, textAlign: 'left', padding: '7px 9px', border: 0, borderRadius: 'var(--radius-sm)', background: active ? 'var(--accent-soft)' : 'transparent', color: active ? 'var(--accent)' : 'var(--text-secondary)', fontSize: 13, cursor: 'pointer', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' });
+const S = {
+    panel: { position: 'relative', display: 'flex', flexDirection: 'column', flex: 1, width: '100%', minWidth: 0, height: '100%', background: 'var(--surface-1)', overflow: 'hidden' },
+    head: { position: 'relative', display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 6, rowGap: 6, minHeight: 48, padding: '7px 10px', borderBottom: '1px solid var(--border-subtle)', flexShrink: 0 },
+    sessionBtn: { display: 'inline-flex', alignItems: 'center', gap: 7, height: 30, padding: '0 10px', borderRadius: 'var(--radius-sm)', background: 'var(--surface-2)', border: '1px solid var(--border-subtle)', color: 'var(--text-secondary)', cursor: 'pointer', maxWidth: 220, minWidth: 0, flexShrink: 1 },
+    runChip: { display: 'inline-flex', alignItems: 'center', gap: 6, marginLeft: 8, height: 22, padding: '0 9px', borderRadius: 'var(--radius-pill, 999px)', background: 'var(--accent-soft)', border: '1px solid var(--border-accent)', color: 'var(--accent)', fontSize: 11.5, fontWeight: 600, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' },
+    sessionName: { fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    iconBtn: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, border: 0, borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'var(--text-tertiary)', cursor: 'pointer' },
+    iconBtnActive: { background: 'var(--accent-soft)', color: 'var(--accent)' },
+    menu: { position: 'absolute', top: 'calc(100% + 4px)', left: 10, width: 280, maxWidth: 'calc(100vw - 20px)', background: 'var(--surface-1)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-4)', padding: 6, zIndex: 200 },
+    menuItem: { display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '8px 9px', border: 0, borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'var(--text-primary)', cursor: 'pointer', fontSize: 13, fontWeight: 500 },
+    menuLabel: { fontSize: 'var(--fs-eyebrow)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--text-tertiary)', padding: '8px 9px 4px' },
+    menuEmpty: { padding: '4px 9px 8px', fontSize: 12.5, color: 'var(--text-disabled)' },
+    menuRow: { display: 'flex', alignItems: 'center', gap: 4 },
+    menuDel: { display: 'inline-flex', width: 26, height: 26, alignItems: 'center', justifyContent: 'center', border: 0, borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'var(--text-disabled)', cursor: 'pointer' },
+    renameInput: { flex: 1, minWidth: 0, maxWidth: 240, height: 28, padding: '0 9px', boxSizing: 'border-box', borderRadius: 'var(--radius-sm)', background: 'var(--surface-1)', border: '1px solid var(--border-accent)', color: 'var(--text-primary)', fontSize: 13, fontWeight: 600, fontFamily: 'inherit', outline: 'none' },
+    chatRegion: { position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' },
+    body: { flex: 1, minHeight: 0, overflowY: 'auto', padding: 14, display: 'flex', flexDirection: 'column', gap: 16 },
+    // Wraps the settled Transcript + live-run block so a host-injected LiveTimeline
+    // (position: absolute) can overlay them while scrubbed back. `body` already
+    // owns the scroll (overflowY: auto) — this is just the positioning context.
+    transcriptWrap: { position: 'relative', display: 'flex', flexDirection: 'column', gap: 16 },
+    live: { display: 'flex', flexDirection: 'column', gap: 8 },
+    liveToolRow: { display: 'flex', alignItems: 'center', padding: '6px 10px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', background: 'var(--surface-2)' },
+    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 },
+    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.
+    followRow: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 },
+    followChip: { display: 'inline-flex', alignItems: 'center', maxWidth: '100%', padding: '5px 10px', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-pill)', background: 'transparent', color: 'var(--text-secondary)', fontSize: 12.5, lineHeight: 1.3, textAlign: 'left', cursor: 'pointer' },
+    policyWarn: { display: 'flex', alignItems: 'center', gap: 7, fontSize: 12.5, color: 'var(--warning)', background: 'var(--warning-soft)', border: '1px solid var(--warning)', borderRadius: 'var(--radius-sm)', padding: '8px 10px' },
+    policyStop: { display: 'flex', alignItems: 'center', gap: 7, fontSize: 12.5, color: 'var(--danger)', background: 'var(--danger-soft)', border: '1px solid var(--danger)', borderRadius: 'var(--radius-sm)', padding: '8px 10px' },
+    ctxMenu: { margin: '0 10px', padding: 8, background: 'var(--surface-2)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', display: 'flex', flexDirection: 'column', gap: 4 },
+    perm: { border: '1px solid var(--warning)', borderRadius: 'var(--radius-md)', background: 'var(--warning-soft)', padding: 12, display: 'flex', flexDirection: 'column', gap: 8 },
+    permHead: { display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' },
+    permBody: { fontSize: 13, lineHeight: 1.5, color: 'var(--text-secondary)' },
+    permActions: { display: 'flex', gap: 8, flexWrap: 'wrap' },
+    permDeny: { height: 30, padding: '0 12px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-1)', color: 'var(--text-secondary)', fontSize: 12.5, fontWeight: 600, cursor: 'pointer' },
+    permAllowSession: { height: 30, padding: '0 12px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-1)', color: 'var(--text-secondary)', fontSize: 12.5, fontWeight: 600, cursor: 'pointer' },
+    permAllow: { display: 'inline-flex', alignItems: 'center', gap: 5, height: 30, padding: '0 14px', border: 0, borderRadius: 'var(--radius-sm)', background: 'var(--grad-brand)', color: '#fff', fontSize: 12.5, fontWeight: 600, cursor: 'pointer' },
+    // Per-run budget control — the run chip's soft note when a degrade breach
+    // switched the in-flight model.
+    budgetWrap: { position: 'relative', display: 'flex', alignItems: 'center', gap: 8, padding: '0 10px 6px', flexShrink: 0 },
+    budgetDegraded: { fontSize: 11, color: 'var(--warning)' },
+    uploadNotice: { display: 'flex', alignItems: 'center', gap: 8, margin: '0 10px 6px', padding: '7px 10px', border: '1px solid var(--warning)', borderRadius: 'var(--radius-sm)', background: 'var(--warning-soft)', color: 'var(--warning)', fontSize: 12.5 },
+    uploadNoticeX: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 20, height: 20, border: 0, borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'inherit', cursor: 'pointer', flexShrink: 0 },
+};
+//# sourceMappingURL=AgentChat.js.map