@xenosystem/agent-conversation 0.1.35 → 0.1.37

package/dist/components/agent/transcript/Transcript.js

@@ -0,0 +1,544 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The XENO Agent transcript — D10 of `XENO AGENT PANEL - SPEC.md`, rendered.
+ *
+ * A user message is a plate. An assistant message is a TURN: a clock line (`▪ Working for 4s`), a
+ * rail of steps (28 px rows, the marker's box earned when the step settles, details as children on
+ * branches, asks as cards that stop the rail), the reply written as it arrives, and — after the
+ * fold — a receipt of consequences with a way back. Two step modes: expanded draws the rail as the
+ * turn works; collapsed keeps it folded and carries the current step on the clock line.
+ *
+ * Everything the transcript shows comes from `deriveTurn` (pure) over the conversation's own
+ * `ChatMessage`; everything it does goes back through the same store actions and bridge calls
+ * the previous cards used (`useAskActions`). What is not wired on a host is disabled and says so.
+ */
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { XenoElement } from '@xenosystem/elements-react';
+import { glyphDeclaration } from './glyphs.js';
+import { currentThought, deriveTurn, formatElapsed } from './turnModel.js';
+const MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform);
+const KEY_ENTER = MAC ? '⌘↵' : 'Ctrl+↵';
+const KEY_CANCEL = MAC ? '⌘.' : 'Ctrl+.';
+export function Glyph({ name, size = 12 }) {
+    // The Turn Modes Bench's static glyphs are 2.25px. Pass that explicit foundry weight at the
+    // consumer boundary so the canonical declaration renderer and the reference share a stroke
+    // without forking the elements design system.
+    return _jsx(XenoElement, { decl: glyphDeclaration(name), size: size, strokeWidth: 2.25, "aria-hidden": "true" });
+}
+/** The bench's chevron: a `span.chev` holding a 10 px glyph drawn on the 24-unit grid. */
+function Chevron() {
+    return (_jsx("span", { className: "xa-chev", children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "square", "aria-hidden": "true", children: _jsx("path", { d: "M9 6l6 6-6 6" }) }) }));
+}
+/** A clock that ticks once a second while something is live. */
+function useNow(live) {
+    const [now, setNow] = useState(() => Date.now());
+    useEffect(() => {
+        if (!live)
+            return;
+        setNow(Date.now());
+        const timer = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(timer);
+    }, [live]);
+    return now;
+}
+/**
+ * Remembers when a turn settled, so the clock line can say how long it worked even after the
+ * store stops changing — the store carries when a turn started, not when it ended.
+ */
+function useTurnTiming(turn) {
+    const settledAtRef = useRef(null);
+    const wasLive = useRef(turn.live);
+    if (wasLive.current && !turn.live && settledAtRef.current === null)
+        settledAtRef.current = Date.now();
+    wasLive.current = turn.live;
+    const now = useNow(turn.live);
+    if (turn.live)
+        return { elapsedMs: Math.max(0, now - turn.startedAt), settledAt: null };
+    const fromTools = turn.steps
+        .flatMap((step) => (step.kind === 'act' ? [step.row.toolCall.endedAt ?? 0] : []))
+        .reduce((max, value) => Math.max(max, value), 0);
+    // the host's own end time first: it is the only one that survives a reload
+    const settledAt = turn.endedAt ?? settledAtRef.current ?? (fromTools > turn.startedAt ? fromTools : null);
+    return { elapsedMs: settledAt ? settledAt - turn.startedAt : 0, settledAt };
+}
+// Keep the cursor in the final paragraph, as the bench does. A sibling after a block paragraph
+// drops onto its own line, which looks like an extra step marker instead of a writing cursor.
+function ReplyBody({ children, streaming }) {
+    const ref = useRef(null);
+    useLayoutEffect(() => {
+        const body = ref.current;
+        if (!streaming || !body)
+            return;
+        const last = body.lastElementChild;
+        // The markdown renderer owns its text nodes and may replace them on each delta. Add this
+        // presentation-only marker after that commit; remove our own node before the next one.
+        const target = last?.matches('p') ? last : body;
+        const caret = document.createElement('span');
+        caret.className = 'xa-caret';
+        caret.setAttribute('aria-hidden', 'true');
+        target.appendChild(caret);
+        return () => caret.remove();
+    }, [children, streaming]);
+    return _jsx("div", { className: "xa-body", ref: ref, children: children });
+}
+function currentStepTicker(turn) {
+    // a plan waiting for a go is what the rail is doing, and the line says so in the plan's own terms
+    const planask = turn.steps.find((step) => step.kind === 'planask' && step.row.ask?.status === 'pending');
+    if (planask)
+        return { key: `plan:${planask.tasks.length}`, glyph: 'list', verb: 'Asking for a go on', object: planSteps(planask.tasks.length), mono: false, joiner: ' ' };
+    const current = turn.steps[turn.steps.length - 1];
+    if (current?.kind === 'note')
+        return { key: `note:${current.id}`, glyph: null, verb: current.text, object: '', mono: false, joiner: ' ' };
+    if (current?.kind === 'plan')
+        return { key: `plan:${current.id}`, glyph: 'list', verb: 'Planned', object: planSteps(current.tasks.length), mono: false, joiner: ' ' };
+    const rows = turn.steps.filter((step) => step.kind === 'act');
+    const live = [...rows].reverse().find((step) => step.row.live) || rows[rows.length - 1];
+    if (live) {
+        const row = live.row;
+        const spoken = spokenStep(row);
+        return { key: `${row.family}:${spoken.verb}:${spoken.object}`, glyph: row.glyph, verb: spoken.verb, object: spoken.object, mono: row.objectMono, joiner: spoken.joiner };
+    }
+    const think = turn.steps.find((step) => step.kind === 'think');
+    if (think?.live)
+        return { key: `think:${currentThought(think.text)}`, glyph: 'brain', verb: 'Thinking ·', object: currentThought(think.text), mono: false, joiner: ' ' };
+    return null;
+}
+/**
+ * What a row SAYS — its verb and object as spoken, with an ask phrased as the asking: "Asking to use
+ * Discord", "Asking to run", "Asking" beside the question. One function, because the row and the
+ * clock line's ticker must say the same thing; they used to compute it separately, and the ticker
+ * carried the tool's raw verb ("Opened") while the row said "Asking to use Discord".
+ */
+function spokenStep(row) {
+    const ask = row.ask;
+    const verb = ask && ask.status === 'pending'
+        ? (ask.kind === 'grant' ? `Asking to use ${ask.what}` : ask.kind === 'approve' ? 'Asking to run' : 'Asking')
+        : ask && ask.kind === 'grant' && ask.status === 'yes' ? `${ask.what} — allowed for this ${ask.whatScope === 'this session' ? 'session' : 'conversation'}`
+            : ask && ask.kind === 'approve' && ask.status === 'yes' ? 'Approved'
+                : ask && (ask.status === 'no' || ask.status === 'cancelled') ? (ask.kind === 'question' ? 'Asked' : 'Refused')
+                    : row.verb;
+    const object = ask && ask.kind === 'approve' ? ask.body || row.object : ask && ask.kind === 'grant' ? '' : row.object;
+    // a question is set off from its asking with a dash (bench: "Asking — Three threads match…")
+    const joiner = ask && ask.kind === 'question' && ask.status === 'pending' ? ' — ' : ' ';
+    return { verb, object, joiner };
+}
+function tickerText(item) {
+    if (!item.object)
+        return item.verb;
+    // one run of text, as the bench writes it; only a mono object stands in its own span
+    return item.mono ? _jsxs(_Fragment, { children: [item.verb, item.joiner, _jsx("span", { className: "xa-mono", children: item.object })] }) : `${item.verb}${item.joiner}${item.object}`;
+}
+function Ticker({ item }) {
+    const [shown, setShown] = useState({ cur: item, prev: null, first: true });
+    const key = item?.key ?? null;
+    useEffect(() => {
+        setShown((state) => {
+            if ((state.cur?.key ?? null) === key)
+                return state;
+            return { cur: item, prev: state.cur, first: state.cur === null };
+        });
+        const timer = setTimeout(() => setShown((state) => (state.prev ? { ...state, prev: null } : state)), 300);
+        return () => clearTimeout(timer);
+    }, [key]); // eslint-disable-line react-hooks/exhaustive-deps
+    const sameGlyph = shown.prev && shown.cur && shown.prev.glyph === shown.cur.glyph;
+    return (_jsxs("span", { className: "xa-cur", "data-cur2": true, children: [_jsxs("span", { className: "xa-slot", children: [shown.prev && !sameGlyph && _jsx("span", { className: "xa-gl xa-out", children: shown.prev.glyph ? _jsx(Glyph, { name: shown.prev.glyph }) : _jsx("span", { className: "xa-sq" }) }), shown.cur && _jsx("span", { className: `xa-gl ${shown.first ? 'xa-first' : sameGlyph ? '' : 'xa-in'}`, children: shown.cur.glyph ? _jsx(Glyph, { name: shown.cur.glyph }) : _jsx("span", { className: "xa-sq" }) }, shown.cur.key)] }), _jsxs("span", { className: "xa-tx", children: [shown.prev && _jsx("span", { className: "xa-t xa-out", children: tickerText(shown.prev) }), shown.cur && _jsx("span", { className: `xa-t ${shown.first ? 'xa-first' : 'xa-in'}`, children: tickerText(shown.cur) }, `${shown.cur.key}:t`)] })] }));
+}
+function ClockLine({ turn, elapsedMs, open, onToggle, stepsMode, holdingRail = false }) {
+    const [phase, setPhase] = useState(turn.live ? 'live' : 'settled');
+    const readRef = useRef(null);
+    useLayoutEffect(() => {
+        if (turn.live) {
+            setPhase('live');
+            return;
+        }
+        if (phase !== 'live' || holdingRail)
+            return;
+        // the fold: the square blurs away, then the words glide 17 px left into its place
+        const turnElement = readRef.current?.closest('.xa-turn');
+        const markTimer = setTimeout(() => { setPhase('settling'); turnElement?.classList.add('xa-settle'); }, 300);
+        const timer = setTimeout(() => {
+            setPhase('settled');
+            const read = readRef.current;
+            if (read && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                read.style.transition = 'none';
+                read.style.transform = 'translateX(17px)';
+                requestAnimationFrame(() => {
+                    read.style.transition = 'transform 280ms var(--xa-glide)';
+                    read.style.transform = 'translateX(0)';
+                });
+            }
+        }, 500);
+        return () => { clearTimeout(markTimer); clearTimeout(timer); turnElement?.classList.remove('xa-settle'); };
+    }, [turn.live, holdingRail]); // eslint-disable-line react-hooks/exhaustive-deps
+    const elapsed = formatElapsed(elapsedMs);
+    const still = turn.live && elapsedMs >= 30_000;
+    const steps = turn.stepCount;
+    const read = turn.live
+        ? (still ? _jsxs(_Fragment, { children: ["Still working ", _jsxs("span", { className: "xa-n", children: ["\u00B7 ", elapsed] })] }) : _jsxs(_Fragment, { children: ["Working for ", elapsed] }))
+        : _jsxs(_Fragment, { children: [elapsedMs > 0 ? `Worked for ${elapsed}` : 'Worked', steps ? _jsxs("span", { className: "xa-n", children: [" \u00B7 ", steps, " step", steps === 1 ? '' : 's'] }) : null] });
+    // The line's whole anatomy is always present — dot, reading, divider, current step, chevron, shots —
+    // and the stylesheet decides what shows, as in the bench. Rendering the divider and the current step
+    // only in collapsed mode meant the elements did not exist to fade in, and the bench's rules for them
+    // (`.line .vr`, `.line .cur2`) had nothing to match.
+    const ticker = turn.live ? currentStepTicker(turn) : null;
+    return (_jsxs("div", { className: "xa-line", "data-line": true, onClick: turn.live && stepsMode !== 'collapsed' ? undefined : onToggle, role: turn.live && stepsMode !== 'collapsed' ? undefined : 'button', "aria-expanded": open, children: [_jsx("span", { className: `xa-dot${phase === 'settled' ? ' xa-gone' : ''}` }), _jsx("span", { ref: readRef, className: "xa-read xa-num", "data-read": true, children: read }), _jsx("span", { className: "xa-vr" }), _jsx(Ticker, { item: ticker }), _jsx(Chevron, {}), _jsx("span", { className: "xa-shots", "data-shots": true, children: !open && turn.steps.flatMap(step => step.kind === 'act' && step.row.detail?.kind === 'frames' ? step.row.detail.frames : []).map((frame, index) => _jsx("img", { className: "xa-frame", src: frame.src, alt: frame.alt || 'Captured screen' }, `${frame.src}:${index}`)) })] }));
+}
+// ── details ────────────────────────────────────────────────────────────────────
+function DetailView({ detail, row, actions }) {
+    switch (detail.kind) {
+        case 'output':
+            return (_jsxs("div", { className: "xa-detail xa-output", children: [detail.text ? _jsx("pre", { className: "xa-mono", children: detail.text }) : detail.streaming ? _jsx("pre", { className: "xa-mono", style: { color: 'var(--xa-t6)' }, children: "\u2026" }) : null, detail.error && _jsx("pre", { className: "xa-mono xa-err", children: detail.error }), (detail.foot.duration || detail.foot.exit || detail.foot.cwd) && (_jsxs("div", { className: "xa-foot xa-num", children: [detail.foot.duration && _jsx("span", { children: detail.foot.duration }), detail.foot.exit && _jsx("span", { children: detail.foot.exit }), detail.foot.cwd && _jsx("span", { className: "xa-cwd xa-mono", title: detail.foot.cwd, children: detail.foot.cwd })] }))] }));
+        case 'slice':
+            return (_jsxs("div", { className: "xa-detail xa-slice", children: [_jsx("pre", { className: "xa-mono", children: detail.lines.map((line, index) => (_jsxs(React.Fragment, { children: [_jsx("span", { className: "xa-gut xa-num", children: (detail.from + index).toLocaleString('en-US') }), line, index < detail.lines.length - 1 ? '\n' : ''] }, index))) }), detail.more > 0 && _jsxs("div", { className: "xa-more xa-num", children: ["\u2026 ", detail.more.toLocaleString('en-US'), " more line", detail.more === 1 ? '' : 's'] })] }));
+        case 'diff':
+            return (_jsx("div", { className: "xa-detail xa-diff", children: detail.hunks.map((hunk) => (_jsxs("div", { className: "xa-hk", children: [_jsxs("div", { className: "xa-hunk", children: [_jsx("span", { className: "xa-mono", children: hunk.header }), detail.path && _jsx("span", { className: "xa-mono", style: { color: 'var(--xa-t6)' }, children: detail.path.split(/[/\\]/).pop() }), _jsxs("span", { className: "xa-keep", children: [detail.diff && actions.openDiff && _jsx("button", { type: "button", onClick: () => actions.openDiff?.(detail.diff), children: "Open" }), _jsx("button", { type: "button", disabled: true, title: "Landing a single hunk is not available on this host yet", children: "Keep" }), _jsx("button", { type: "button", disabled: true, title: "Undoing a single hunk is not available on this host yet", children: "Undo" })] })] }), _jsx("pre", { className: "xa-mono", children: hunk.lines.map((line, index) => (_jsxs("span", { className: line.kind === 'added' ? 'xa-add' : line.kind === 'removed' ? 'xa-del' : undefined, children: [line.kind === 'added' ? '+ ' : line.kind === 'removed' ? '− ' : '  ', line.text, index < hunk.lines.length - 1 ? '\n' : ''] }, index))) })] }, hunk.id))) }));
+        case 'list':
+            return (
+            /* the bench's list: what, then where or when at the right — no glyph, the row's own marks it */
+            _jsx("div", { className: "xa-detail xa-list", children: detail.items.map((item, index) => (_jsxs("div", { className: "xa-it", children: [item.path && actions.openPath
+                            ? _jsx("button", { type: "button", className: "xa-k", title: item.path, onClick: () => actions.openPath?.(item.path), children: item.label })
+                            : _jsx("span", { className: "xa-k", title: item.path, children: item.label }), item.where && _jsx("span", { className: "xa-where xa-num", children: item.where })] }, index))) }));
+        case 'matches':
+            return (_jsx("div", { className: "xa-detail xa-matches", children: detail.groups.map((group) => (_jsxs("div", { className: "xa-grp", children: [_jsxs("div", { className: "xa-file", children: [_jsx("span", { className: "xa-fg", children: _jsx(Glyph, { name: "file" }) }), actions.openPath
+                                    ? _jsx("button", { type: "button", className: "xa-k xa-mono", onClick: () => actions.openPath?.(group.file), children: group.file })
+                                    : _jsx("span", { className: "xa-k xa-mono", children: group.file }), _jsx("span", { className: "xa-where xa-num", children: group.lines.length })] }), _jsx("div", { className: "xa-lns", children: group.lines.map((line, index) => (_jsxs("div", { className: "xa-ln", children: [_jsx("span", { className: "xa-n xa-num", children: line.n }), _jsx("span", { className: "xa-s xa-mono", children: line.text })] }, index))) })] }, group.file))) }));
+        case 'sources':
+            return _jsx(SourcesDetail, { items: detail.items, actions: actions });
+        case 'prose':
+            return _jsx("div", { className: "xa-detail xa-prose", children: detail.text });
+        case 'frames':
+            return (_jsx("div", { className: "xa-detail xa-frames", children: detail.frames.map((frame, index) => _jsx("img", { className: "xa-frame", src: frame.src, alt: frame.alt || `frame ${index + 1}` }, index)) }));
+        default:
+            return null;
+    }
+}
+function SourcesDetail({ items, actions }) {
+    return (_jsx("div", { className: "xa-detail xa-sources", children: items.map((item, index) => (_jsxs("div", { className: "xa-it", children: [_jsx("span", { className: "xa-n xa-num", children: index + 1 }), _jsx("span", { className: "xa-fav", "aria-hidden": "true" }), _jsx("button", { type: "button", className: "xa-k", title: item.url, onClick: () => actions.openExternal?.(item.url), children: item.title }), _jsx("span", { className: "xa-where", children: item.domain }), _jsx("span", { className: "xa-go", children: _jsx(Glyph, { name: "arrow-up-right", size: 10 }) })] }, item.url))) }));
+}
+// ── the ask card ───────────────────────────────────────────────────────────────
+function AskCard({ row, ask, actions, children }) {
+    const [draft, setDraft] = useState('');
+    const [picked, setPicked] = useState(null);
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState(null);
+    const [menu, setMenu] = useState(false);
+    const pending = ask.status === 'pending';
+    const { permission, askUser } = ask;
+    const placement = ask.host?.kind === 'workspace-placement' && actions.workspacePlacement?.workspacePlacementId === ask.host.workspacePlacementId ? actions.workspacePlacement : null;
+    const goForward = useCallback(async () => {
+        if (!pending || sending)
+            return;
+        if (ask.host?.kind === 'choose-directory') {
+            actions.chooseDirectory?.(row.toolCall);
+            return;
+        }
+        if (ask.host?.kind === 'workspace-placement') {
+            placement?.onChoose('inbox');
+            return;
+        }
+        if (ask.kind === 'question' && askUser) {
+            const value = picked ?? (ask.options?.length && !draft.trim() ? ask.options[0] : draft);
+            setSending(true);
+            setError(null);
+            const failure = await actions.ask.answer(askUser, value, picked ?? (ask.options?.includes(value) ? value : undefined));
+            setSending(false);
+            if (failure)
+                setError(failure);
+            return;
+        }
+        if (permission)
+            actions.ask.grant(row.toolCall, permission);
+    }, [pending, sending, ask, askUser, permission, picked, draft, actions, row.toolCall, placement]);
+    const cancel = useCallback(() => {
+        if (!pending || ask.host)
+            return;
+        if (ask.kind === 'question' && askUser) {
+            actions.ask.cancelQuestion(askUser);
+            return;
+        }
+        if (permission)
+            actions.ask.deny(permission);
+    }, [pending, ask.kind, askUser, permission, actions]);
+    // ⌘↵ takes the way forward, ⌘. cancels — while the card is the pending one
+    useEffect(() => {
+        if (!pending)
+            return;
+        const onKey = (event) => {
+            if (!(event.metaKey || event.ctrlKey))
+                return;
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                void goForward();
+            }
+            if (event.key === '.') {
+                event.preventDefault();
+                cancel();
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [pending, goForward, cancel]);
+    const answered = !pending;
+    // the bench's card names the thing asked for — the app window — while its rail row carries the lock
+    const headerGlyph = ask.kind === 'grant' ? (ask.subject === 'app' ? 'app-window' : ask.subject === 'folder' ? 'folder' : 'lock') : ask.kind === 'approve' ? 'terminal' : ask.kind === 'plan' ? 'list' : 'help';
+    return (_jsxs("div", { className: `xa-card${answered ? ' xa-answered' : ''}${ask.status === 'yes' ? ' xa-ok' : ask.status === 'no' || ask.status === 'cancelled' ? ' xa-bad' : ''}`, "data-ask": ask.kind, children: [_jsxs("div", { className: "xa-hd", children: [_jsx(Glyph, { name: headerGlyph }), ask.title, ask.scope && _jsx("span", { className: "xa-right", children: ask.scope })] }), _jsxs("div", { className: "xa-bd", children: [_jsxs("div", { className: "xa-what", children: [_jsx("span", { className: "xa-sq" }), _jsx("span", { children: ask.what }), ask.whatScope && _jsx("span", { className: "xa-scope", children: ask.whatScope })] }), children, ask.host?.kind === 'workspace-placement' ? (_jsxs("div", { className: "xa-opts", children: [_jsxs("button", { type: "button", className: "xa-opt", disabled: !placement || placement.resolving, onClick: () => placement?.onChoose('inbox'), children: [_jsx("span", { className: "xa-osq" }), "Keep in Inbox"] }), placement?.existingWorkspaceName && _jsxs("button", { type: "button", className: "xa-opt", disabled: placement.resolving, onClick: () => placement.onChoose('reuse'), children: [_jsx("span", { className: "xa-osq" }), "Move to ", placement.existingWorkspaceName] }), _jsxs("button", { type: "button", className: "xa-opt", disabled: !placement || placement.resolving, onClick: () => placement?.onChoose('create'), children: [_jsx("span", { className: "xa-osq" }), placement?.resolving ? 'Working…' : `Create ${placement?.suggestedWorkspaceName || 'a workspace'}`] })] })) : ask.kind === 'question' ? (_jsxs(_Fragment, { children: [ask.body && _jsx("div", { children: ask.body }), ask.options && (_jsx("div", { className: "xa-opts", children: ask.options.map((option) => (_jsxs("button", { type: "button", className: `xa-opt${(picked ?? ask.answer) === option ? ' xa-on' : ''}`, onClick: () => { setPicked(option); if (!answered)
+                                        void actions.ask.answer(askUser, option, option).then((failure) => failure && setError(failure)); }, children: [_jsx("span", { className: "xa-osq" }), option] }, option))) })), pending && !ask.options && (_jsx("div", { className: "xa-free", children: _jsx("input", { value: draft, onChange: (event) => setDraft(event.target.value), placeholder: "Your answer", onKeyDown: (event) => { if (event.key === 'Enter') {
+                                        event.preventDefault();
+                                        void goForward();
+                                    } } }) }))] })) : ask.body ? (
+                    // a sentence is just the card's words (bench: a bare text node in `.bd`); a command is a block
+                    ask.bodyMono ? _jsx("pre", { className: "xa-mono", children: ask.body }) : ask.body) : null] }), error && _jsx("div", { className: "xa-error", children: error }), _jsxs("div", { className: "xa-ft", children: [_jsxs("span", { className: "xa-cacts", children: [ask.host ? _jsx("span", { className: "xa-hint", children: ask.host.kind === 'choose-directory' ? 'the picker decides' : 'pick one' }) : _jsxs("button", { type: "button", className: "xa-b", onClick: cancel, disabled: sending, children: ["Cancel ", _jsx("kbd", { children: KEY_CANCEL })] }), ask.host?.kind === 'choose-directory' ? (_jsx("button", { type: "button", className: "xa-b xa-main", onClick: () => void goForward(), disabled: !actions.chooseDirectory, title: actions.chooseDirectory ? undefined : 'This surface has no folder picker', children: ask.mainLabel })) : ask.host?.kind === 'workspace-placement' ? null : ask.kind === 'question' ? (ask.options
+                                ? _jsxs("span", { className: "xa-hint", children: ["pick one \u00B7 ", _jsx("kbd", { children: KEY_ENTER }), " takes the first"] })
+                                : _jsxs("button", { type: "button", className: "xa-b xa-main", onClick: () => void goForward(), disabled: sending || !draft.trim(), children: ["Send ", _jsx("kbd", { children: KEY_ENTER })] })) : (
+                            /* the bench's footer holds its buttons directly — no wrapper, so none here either */
+                            _jsxs(_Fragment, { children: [(ask.canAllowAlways || ask.canDenyAlways) && (_jsxs("span", { className: "xa-more", children: [_jsx("button", { type: "button", className: "xa-b", onClick: () => setMenu((value) => !value), "aria-haspopup": "menu", "aria-expanded": menu, children: "Remember\u2026" }), menu && (_jsxs("div", { className: "xa-menu", role: "menu", children: [ask.canAllowAlways && permission && _jsx("button", { type: "button", role: "menuitem", onClick: () => { setMenu(false); actions.ask.grantAlways(row.toolCall, permission); }, children: "Always allow this" }), ask.canDenyAlways && permission && _jsx("button", { type: "button", role: "menuitem", onClick: () => { setMenu(false); actions.ask.denyAlways(permission); }, children: "Always refuse this" })] }))] })), _jsxs("button", { type: "button", className: "xa-b xa-main", onClick: () => void goForward(), disabled: !actions.ask.canAnswer, title: actions.ask.canAnswer ? undefined : 'This surface cannot answer the agent', children: [ask.mainLabel, " ", _jsx("kbd", { children: KEY_ENTER })] })] }))] }), _jsx("span", { className: "xa-verdict", children: ask.verdict })] })] }));
+}
+// ── rows ───────────────────────────────────────────────────────────────────────
+function StepRowView({ row, actions, last, reveal = 0 }) {
+    const [open, setOpen] = useState(false);
+    useEffect(() => { if (reveal)
+        setOpen(true); }, [reveal]);
+    const ask = row.ask;
+    // A backgrounded run's row is answered by the RUN, not by the tool call that started it: that call
+    // completed the moment the command was detached, and everything after belongs to the task.
+    const run = row.background?.action === 'started' && actions.background ? actions.background.find(row.background.taskId) : null;
+    const runLive = !!run && run.status === 'running';
+    const background = row.background?.action === 'started'
+        ? {
+            taskId: row.background.taskId,
+            live: run ? runLive : true,
+            verb: run ? (runLive ? 'Running' : run.status === 'stopped' ? 'Stopped' : 'Ran') : 'Started',
+            result: run
+                ? [
+                    run.status === 'running' ? 'in the background' : run.status === 'stopped' ? 'stopped' : typeof run.exitCode === 'number' ? 'exit ' + run.exitCode : run.status,
+                    formatElapsed((runLive ? Date.now() : run.updatedAt) - run.startedAt),
+                ].filter(Boolean).join(' · ')
+                : row.result,
+            streamed: run?.lastOutput,
+            busy: run?.busy,
+        }
+        : null;
+    const askClass = ask ? ` xa-ask${ask.status === 'yes' ? ' xa-ok' : ask.status === 'no' || ask.status === 'cancelled' ? ' xa-bad' : ''}${ask.status !== 'pending' && !last ? ' xa-joined' : ''}` : '';
+    const toneClass = !ask && row.tone !== 'none' && !row.live ? ` xa-${row.tone}` : '';
+    const hasDetail = !!row.detail;
+    const { verb, object } = spokenStep(row);
+    return (_jsxs("div", { 
+        // a pending ask IS the live step (bench `.xrow.now.ask`): the rail has stopped at it, and `now` is
+        // what draws its marker breathing and its glyph in motion
+        className: `xa-row${(background ? background.live : row.live) || ask?.status === 'pending' ? ' xa-now' : ''}${askClass}${toneClass}${hasDetail || background?.streamed ? ' xa-hasd' : ''}${open ? ' xa-open' : ''}`, "data-step": row.family, onClick: hasDetail && !row.live ? (event) => { if (!event.target.closest('.xa-dwrap, button, a'))
+            setOpen((value) => !value); } : undefined, children: [_jsx("span", { className: "xa-ic", children: _jsx(Glyph, { name: row.glyph }) }), _jsx("span", { className: ask ? 'xa-what' : 'xa-verb', children: background ? background.verb : verb }), object && _jsx("span", { className: `xa-obj${row.objectMono || (ask?.kind === 'approve') ? ' xa-mono' : ''}`, title: object, children: object }), background && actions.background && (_jsxs("span", { className: "xa-rowacts", children: [_jsx("button", { type: "button", disabled: !!background.busy, onClick: (event) => { event.stopPropagation(); actions.background.output(background.taskId); }, title: "Read this run's output so far", children: background.busy === 'output' ? 'Reading…' : 'Output' }), background.live && _jsx("button", { type: "button", disabled: !!background.busy, onClick: (event) => { event.stopPropagation(); actions.background.stop(background.taskId); }, title: "Stop this background run", children: background.busy === 'stop' ? 'Stopping…' : 'Stop' })] })), (background ? background.result : row.result) && !ask && _jsx("span", { className: `xa-res xa-num${row.resultLate ? ' xa-late' : ''}`, children: background ? background.result : row.result }), row.detail?.kind === 'frames' && _jsx("span", { className: "xa-frames", children: row.detail.frames.map((frame, index) => _jsx("img", { className: "xa-frame", src: frame.src, alt: frame.alt || 'Captured screen' }, `${frame.src}:${index}`)) }), hasDetail && _jsx(Chevron, {}), ask && _jsxs(_Fragment, { children: [_jsx("span", { className: "xa-brk" }), _jsx("div", { className: "xa-cardslot", children: _jsx(AskCard, { row: row, ask: ask, actions: actions }) })] }), row.detail
+                ? _jsx("div", { className: "xa-dwrap", children: _jsx("div", { children: _jsx(DetailView, { detail: background?.streamed && row.detail.kind === 'output' ? { ...row.detail, text: background.streamed, streaming: background.live } : row.detail, row: row, actions: actions }) }) })
+                : background?.streamed
+                    ? _jsx("div", { className: "xa-dwrap", children: _jsx("div", { children: _jsx(DetailView, { detail: { kind: 'output', text: background.streamed, streaming: background.live, foot: {} }, row: row, actions: actions }) }) })
+                    : null] }));
+}
+function ThinkRow({ step, durationMs }) {
+    const [open, setOpen] = useState(false);
+    const label = step.live ? 'Thinking' : durationMs && durationMs >= 1000 ? `Thought for ${formatElapsed(durationMs)}` : 'Thought';
+    return (_jsxs("div", { className: `xa-row xa-think${step.live ? ' xa-now' : ''}${open ? ' xa-open' : ''}`, children: [_jsx("span", { className: "xa-ic", children: _jsx(Glyph, { name: "brain" }) }), _jsxs("span", { className: "xa-head", onClick: () => { if (!step.live)
+                    setOpen((value) => !value); }, role: "button", "aria-expanded": open, children: [_jsx("span", { className: "xa-what", children: label }), _jsx("span", { className: "xa-dot2", children: "\u00B7" }), _jsx("span", { className: "xa-curthought", children: currentThought(step.text) }, currentThought(step.text)), _jsx(Chevron, {})] }), _jsx("span", { className: "xa-fullwrap", children: _jsx("span", { className: "xa-full", children: step.text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean).map((line, index) => _jsx("p", { children: line }, `${index}:${line}`)) }) })] }));
+}
+/** The agent's words BETWEEN two steps — its own sentence, not a step, and not a reply body. */
+function NoteRow({ text }) {
+    return (_jsxs("div", { className: "xa-row xa-note", children: [_jsx("span", { className: "xa-ic" }), _jsx("span", { children: text })] }));
+}
+const planSteps = (count) => `${count} step${count === 1 ? '' : 's'}`;
+/**
+ * One plan item, marked with where the plan has got to. The tray and both plan rows draw the same
+ * one. When nothing is explicitly in progress the FIRST unfinished step is the one marked `now` —
+ * the list always says where the plan stands, as the bench's does, rather than going blank between
+ * two steps.
+ */
+function PlanList({ tasks, marked = true }) {
+    const current = tasks.some((task) => task.status === 'in_progress')
+        ? null
+        : tasks.find((task) => task.status !== 'done' && task.status !== 'blocked')?.id ?? null;
+    return (_jsx("div", { className: "xa-plan-list", children: tasks.map((task) => (_jsxs("div", { className: `xa-item${!marked ? '' : task.status === 'done' ? ' xa-done' : task.status === 'in_progress' || task.id === current ? ' xa-now' : task.status === 'blocked' ? ' xa-blocked' : ''}`, children: [_jsx("span", { className: "xa-sq" }), _jsx("span", { children: task.text })] }, task.id))) }));
+}
+function PlanHead({ tasks, done, onToggle, open }) {
+    return (_jsxs("span", { className: "xa-head", onClick: onToggle, role: "button", "aria-expanded": open, children: [_jsx("span", { className: "xa-verb", children: "Planned" }), _jsx("span", { className: "xa-obj", children: planSteps(tasks.length) }), _jsx("span", { className: "xa-res xa-num", children: `${done} of ${tasks.length}` }), _jsx(Chevron, {})] }));
+}
+function PlanRow({ tasks, done }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs("div", { className: `xa-row xa-plan${open ? ' xa-open' : ''}`, children: [_jsx("span", { className: "xa-ic", children: _jsx(Glyph, { name: "list" }) }), _jsx(PlanHead, { tasks: tasks, done: done, open: open, onToggle: () => setOpen((value) => !value) }), _jsx("div", { className: "xa-planwrap", children: _jsx("div", { children: _jsx(PlanList, { tasks: tasks }) }) })] }));
+}
+/**
+ * The plan AND the go it is waiting for, in one row (bench `.xrow.plan.ask`). The rail has stopped
+ * here, so this row is the live one; the card restates the steps as they will be run, unmarked —
+ * nothing has started, and marking them would say otherwise.
+ */
+function PlanAskRow({ step, actions }) {
+    const [open, setOpen] = useState(false);
+    const ask = step.row.ask;
+    const pending = ask.status === 'pending';
+    return (_jsxs("div", { className: `xa-row xa-plan xa-ask${pending ? ' xa-now' : ask.status === 'yes' ? ' xa-ok' : ' xa-bad'}${open ? ' xa-open' : ''}`, "data-step": "plan", children: [_jsx("span", { className: "xa-ic", children: _jsx(Glyph, { name: "list" }) }), _jsx(PlanHead, { tasks: step.tasks, done: step.done, open: open, onToggle: () => setOpen((value) => !value) }), _jsx("div", { className: "xa-planwrap", children: _jsx("div", { children: _jsx(PlanList, { tasks: step.tasks }) }) }), _jsx("span", { className: "xa-brk" }), _jsx("div", { className: "xa-cardslot", children: _jsx(AskCard, { row: step.row, ask: { ...ask, scope: planSteps(step.tasks.length) }, actions: actions, children: _jsx(PlanList, { tasks: step.tasks, marked: false }) }) })] }));
+}
+function HousekeepingRow({ rows, actions }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs("div", { className: `xa-row xa-hasd${open ? ' xa-open' : ''}`, onClick: (event) => { if (!event.target.closest('.xa-dwrap'))
+            setOpen((value) => !value); }, children: [_jsx("span", { className: "xa-ic", children: _jsx(Glyph, { name: "eye-off" }) }), _jsx("span", { className: "xa-verb", children: "Housekeeping" }), _jsxs("span", { className: "xa-obj", children: [rows.length, " step", rows.length === 1 ? '' : 's', " hidden"] }), _jsx(Chevron, {}), _jsx("div", { className: "xa-dwrap", children: _jsx("div", { children: _jsx("div", { className: "xa-detail xa-nest", children: _jsx("div", { className: "xa-rail", children: rows.map((row, index) => _jsx(StepRowView, { row: row, actions: actions, last: index === rows.length - 1 }, row.id)) }) }) }) })] }));
+}
+function EndingRow({ ending, actions, onShowOutput }) {
+    const tone = ending.kind === 'credits' ? 'xa-warn' : ending.kind === 'failed' ? 'xa-bad' : 'xa-stop';
+    const glyph = ending.kind === 'credits' ? 'alert' : 'x';
+    return (_jsxs("div", { className: `xa-row ${tone}`, style: { alignItems: 'flex-start' }, children: [_jsx("span", { className: "xa-ic", children: _jsx(Glyph, { name: glyph }) }), _jsx("span", { className: "xa-what", style: { paddingTop: 1 }, children: ending.text }), _jsx("span", { className: "xa-why", style: { paddingTop: 1 }, children: ending.why.map((part, index) => (typeof part === 'string'
+                    ? _jsx(React.Fragment, { children: part }, index)
+                    : _jsx("code", { children: part.code }, index))) }), ending.kind === 'interrupted' && _jsx("button", { type: "button", className: "xa-act", onClick: actions.resume, disabled: !actions.resume, title: actions.resume ? 'Restart the interrupted turn through the host' : 'This surface cannot run a turn again', children: "Continue" }), ending.kind === 'failed' && ending.action === 'show-output' && _jsx("button", { type: "button", className: "xa-act", onClick: onShowOutput, children: "Show output" }), ending.kind === 'credits' && _jsx("button", { type: "button", className: "xa-act", onClick: () => actions.openExternal?.('https://xenostudio.ai/account'), disabled: !actions.openExternal, children: "Get credits" })] }));
+}
+// ── the receipt ────────────────────────────────────────────────────────────────
+function FilesReceipt({ turn, actions }) {
+    const [review, setReview] = useState(false);
+    const files = turn.receipt?.files || [];
+    if (!files.length)
+        return null;
+    const added = files.reduce((sum, file) => sum + file.added, 0);
+    const removed = files.reduce((sum, file) => sum + file.removed, 0);
+    return (_jsxs("div", { className: "xa-files", children: [_jsxs("div", { className: "xa-hd", children: [_jsx("span", { className: "xa-ic", children: _jsx(Glyph, { name: "edit" }) }), _jsxs("span", { className: "xa-t", children: [`Edited ${files.length} file${files.length === 1 ? '' : 's'}`, _jsxs("span", { className: "xa-n xa-num", children: [_jsx("span", { className: "xa-add", children: `+${added}` }), _jsx("span", { className: "xa-del", children: `−${removed}` })] })] }), _jsx("button", { type: "button", className: "xa-b", disabled: true, title: "Reverting these edits is not available on this host yet", children: "Undo" }), _jsx("button", { type: "button", className: "xa-b", onClick: () => setReview((value) => !value), "aria-expanded": review, children: "Review" })] }), files.map((file) => (_jsxs("div", { className: "xa-frow", children: [actions.openPath
+                        ? _jsx("button", { type: "button", className: "xa-name xa-mono", title: file.path, onClick: () => actions.openPath?.(file.path), children: file.name })
+                        : _jsx("span", { className: "xa-name xa-mono", title: file.path, children: file.name }), _jsxs("span", { className: "xa-n xa-num", children: [_jsx("span", { className: "xa-add", children: `+${file.added}` }), _jsx("span", { className: "xa-del", children: `−${file.removed}` })] })] }, file.path))), review && (_jsx("div", { className: "xa-review", children: files.map((file) => file.row.detail?.kind === 'diff' ? _jsx(DetailView, { detail: file.row.detail, row: file.row, actions: actions }, file.path) : null) }))] }));
+}
+// ── the turn ───────────────────────────────────────────────────────────────────
+export function TranscriptTurn({ msg, stepsMode, actions, renderMarkdown, tasks, model, latest }) {
+    const turn = useMemo(() => deriveTurn(msg, { tasks }), [msg, tasks]);
+    const { elapsedMs, settledAt } = useTurnTiming(turn);
+    const [userOpen, setUserOpen] = useState(null);
+    const wasLive = useRef(turn.live);
+    const [holdingRail, setHoldingRail] = useState(false);
+    useLayoutEffect(() => {
+        const finished = wasLive.current && !turn.live;
+        wasLive.current = turn.live;
+        if (turn.live) {
+            setHoldingRail(false);
+            return;
+        }
+        if (!finished)
+            return;
+        setHoldingRail(true);
+        const timer = setTimeout(() => setHoldingRail(false), 1400);
+        return () => clearTimeout(timer);
+    }, [turn.live]);
+    const railLive = turn.live || holdingRail;
+    const open = railLive ? (stepsMode === 'collapsed' ? userOpen === true : true) : userOpen === true;
+    const [sourcesOpen, setSourcesOpen] = useState(false);
+    const [copied, setCopied] = useState('idle');
+    const copyTimer = useRef(null);
+    const railRef = useRef(null);
+    const screenshotPositions = useRef([]);
+    useLayoutEffect(() => {
+        const rail = railRef.current;
+        if (!rail)
+            return;
+        if (open) {
+            screenshotPositions.current = Array.from(rail.querySelectorAll('.xa-row > .xa-frames > .xa-frame'), frame => frame.getBoundingClientRect());
+            return;
+        }
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+            return;
+        const shots = rail.closest('.xa-turn')?.querySelectorAll('.xa-shots .xa-frame');
+        const animations = [];
+        shots?.forEach((shot, index) => {
+            const from = screenshotPositions.current[index];
+            if (!from)
+                return;
+            const to = shot.getBoundingClientRect();
+            animations.push(shot.animate([
+                { transform: `translate(${from.left - to.left}px, ${from.top - to.top}px)` },
+                { transform: 'none' },
+            ], { duration: 340, easing: 'cubic-bezier(.3,0,.2,1)' }));
+        });
+        return () => animations.forEach(animation => animation.cancel());
+    }, [open, turn.steps]);
+    // how long the thought took: measured from when the thought went live to when it stopped, and
+    // handed to the surface to keep — otherwise reopening the conversation loses it
+    const thinkStartRef = useRef(null);
+    const thinkMsRef = useRef(null);
+    const [measuredThinkMs, setMeasuredThinkMs] = useState(null);
+    const think = turn.steps.find((step) => step.kind === 'think');
+    useEffect(() => {
+        if (think?.live && thinkStartRef.current === null)
+            thinkStartRef.current = Date.now();
+        if (think && !think.live && thinkStartRef.current !== null && thinkMsRef.current === null) {
+            thinkMsRef.current = Date.now() - thinkStartRef.current;
+            setMeasuredThinkMs(thinkMsRef.current);
+            actions.rememberThinkingTime?.(thinkMsRef.current);
+        }
+    }, [think, actions.rememberThinkingTime]);
+    const thinkMs = msg.thinkingMs ?? measuredThinkMs;
+    const hasRail = turn.steps.length > 0;
+    const [outputRequest, setOutputRequest] = useState({ id: '', revision: 0 });
+    const showOutput = useCallback(() => {
+        setUserOpen(true);
+        const output = [...turn.steps].reverse().find(step => step.kind === 'act' && step.row.detail?.kind === 'output');
+        setOutputRequest(previous => ({ id: output?.id ?? '', revision: previous.revision + 1 }));
+    }, [turn.steps]);
+    // a copy that was refused says so — a control that reports success it did not have is a bug
+    const copyReply = useCallback(() => {
+        if (copyTimer.current)
+            clearTimeout(copyTimer.current);
+        Promise.resolve()
+            .then(() => actions.copy(turn.reply))
+            .then(() => setCopied('done'), () => setCopied('failed'))
+            .then(() => { copyTimer.current = setTimeout(() => setCopied('idle'), 1600); });
+    }, [actions, turn.reply]);
+    useEffect(() => () => { if (copyTimer.current)
+        clearTimeout(copyTimer.current); }, []);
+    const settledTime = settledAt ? new Date(settledAt) : new Date(msg.timestamp);
+    const time = settledTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    // the surface hands down the model's DISPLAY name for this message; the raw id is the fallback
+    const modelName = (model || msg.model || '').replace(/^local:/, '');
+    // and how long the turn took, from the host's own end time where it has one — so it survives a reload
+    const took = settledAt && settledAt > turn.startedAt ? formatElapsed(settledAt - turn.startedAt) : null;
+    return (_jsxs("div", { className: "xa-agent", "data-turn": msg.id, children: [hasRail && (
+            /* `xa-open` is the PERSON's choice, as in the bench (`.turn.open`): it rotates the chevron and
+               unfolds a turn that is folded. A live turn in expanded mode shows its rail without it — marking
+               every live turn open drew its chevron rotated, which the bench never does. `open` itself still
+               says whether the rail is showing, for the clock line's aria-expanded. */
+            _jsxs("div", { className: `xa-turn${railLive ? ' xa-live' : ''}${!turn.live ? ' xa-done' : ''}${userOpen === true ? ' xa-open' : ''}${turn.asking ? ' xa-asking' : ''}${turn.opening ? ' xa-opening' : ''}`, children: [_jsx(ClockLine, { turn: turn, elapsedMs: elapsedMs, open: open, onToggle: () => setUserOpen((value) => !(value ?? (turn.live ? true : false))), stepsMode: stepsMode, holdingRail: holdingRail }), _jsx("div", { className: "xa-railwrap", children: _jsx("div", { className: "xa-rail", ref: railRef, children: turn.steps.map((step, index) => {
+                                const last = index === turn.steps.length - 1;
+                                switch (step.kind) {
+                                    case 'think': return _jsx(ThinkRow, { step: step, durationMs: thinkMs }, step.id);
+                                    case 'note': return _jsx(NoteRow, { text: step.text }, step.id);
+                                    case 'act': return _jsx(StepRowView, { row: step.row, actions: actions, last: last, reveal: outputRequest.id === step.id ? outputRequest.revision : 0 }, step.id);
+                                    case 'housekeeping': return _jsx(HousekeepingRow, { rows: step.rows, actions: actions }, step.id);
+                                    case 'plan': return _jsx(PlanRow, { tasks: step.tasks, done: step.done }, step.id);
+                                    case 'planask': return _jsx(PlanAskRow, { step: step, actions: actions }, step.id);
+                                    case 'ending': return _jsx(EndingRow, { ending: step.ending, actions: actions, onShowOutput: showOutput }, step.id);
+                                    default: return null;
+                                }
+                            }) }) })] })), !hasRail && turn.live && !turn.reply && (_jsx("div", { className: "xa-turn xa-live xa-opening", children: _jsx(ClockLine, { turn: turn, elapsedMs: elapsedMs, open: false, onToggle: () => { }, stepsMode: stepsMode }) })), (turn.reply || turn.replyStreaming) && (_jsx(ReplyBody, { streaming: turn.replyStreaming, children: renderMarkdown(turn.reply) })), !turn.live && turn.sources.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: `xa-srcline${sourcesOpen ? ' xa-open' : ''}`, onClick: () => setSourcesOpen((value) => !value), role: "button", "aria-expanded": sourcesOpen, children: [_jsx("span", { className: "xa-stack", children: turn.sources.slice(0, 3).map((source) => _jsx("span", { className: "xa-fav" }, source.url)) }), _jsxs("span", { children: [turn.sources.length, " source", turn.sources.length === 1 ? '' : 's'] }), _jsx(Chevron, {})] }), _jsx("div", { className: `xa-srcwrap${sourcesOpen ? ' xa-open' : ''}`, children: _jsx("div", { children: _jsx(SourcesDetail, { items: turn.sources, actions: actions }) }) })] })), !turn.live && _jsx(FilesReceipt, { turn: turn, actions: actions }), !turn.live && turn.reply && (_jsxs("div", { className: `xa-acts xa-rfoot${latest ? ' xa-on' : ''}`, children: [actions.retry && _jsxs("button", { type: "button", className: "xa-b", onClick: actions.retry, children: [_jsx(Glyph, { name: "refresh", size: 11 }), "Retry"] }), _jsxs("button", { type: "button", className: `xa-b${copied === 'done' ? ' xa-done' : copied === 'failed' ? ' xa-failed' : ''}`, onClick: copyReply, "aria-live": "polite", children: [_jsx(Glyph, { name: copied === 'done' ? 'check' : copied === 'failed' ? 'x' : 'copy', size: 11 }), copied === 'done' ? 'Copied' : copied === 'failed' ? 'Copy failed. Try again.' : 'Copy'] }), actions.edit && _jsxs("button", { type: "button", className: "xa-b", onClick: actions.edit, children: [_jsx(Glyph, { name: "edit", size: 11 }), "Edit"] }), _jsx("span", { className: "xa-vr" }), ['good', 'poor'].map((value) => (_jsx("button", { type: "button", className: `xa-b xa-tog${msg.rating === value ? ' xa-on' : ''}`, "data-tog": value, "aria-pressed": msg.rating === value, disabled: !actions.rate, title: value === 'good' ? 'Good reply' : 'Poor reply', onClick: () => actions.rate?.(msg.rating === value ? null : value), children: _jsx(Glyph, { name: value === 'good' ? 'thumbs-up' : 'thumbs-down', size: 11 }) }, value))), _jsx("span", { className: "xa-meta xa-num", children: [modelName, took ?? time].filter(Boolean).join(' · ') })] }))] }));
+}
+// ── the plan on the composer's top edge ────────────────────────────────────────
+/**
+ * The background runs a conversation is holding — a bar on the composer's top edge, the Tasks tray's
+ * shape. It exists because a backgrounded command outlives the turn that started it: without it the
+ * only place a run appeared was the workbench, which a panel host does not mount.
+ */
+export function BackgroundTray({ runs, open, onToggle, onOutput, onStop }) {
+    if (!runs.length)
+        return null;
+    const running = runs.filter((run) => run.status === 'running');
+    const current = running[0] || runs[0];
+    return (_jsxs("div", { className: `xa-transcript xa-tasks xa-bgruns${open ? ' xa-open' : ''}`, "data-background-runs": true, children: [_jsxs("button", { type: "button", className: "xa-bar", onClick: onToggle, "aria-expanded": open, children: [_jsx("span", { className: "xa-label", children: running.length ? 'Running' : 'Ran' }), _jsx("span", { className: "xa-curtask xa-mono", children: current.command || current.taskId }), _jsx("span", { className: "xa-cnt xa-num", children: running.length ? `${running.length} of ${runs.length}` : String(runs.length) }), _jsx(Chevron, {})] }), _jsx("div", { className: "xa-listwrap", children: _jsx("div", { className: "xa-list", children: _jsx("div", { className: "xa-in", children: runs.map((run) => (_jsxs("div", { className: `xa-item${run.status === 'running' ? ' xa-now' : run.status === 'failed' ? ' xa-blocked' : ' xa-done'}`, children: [_jsx("span", { className: "xa-sq" }), _jsx("span", { className: "xa-mono", title: run.command || run.taskId, children: run.command || run.taskId }), _jsx("span", { className: "xa-runres xa-num", children: run.status === 'running' ? formatElapsed(Date.now() - run.startedAt) : typeof run.exitCode === 'number' ? `exit ${run.exitCode}` : run.status }), _jsxs("span", { className: "xa-rowacts", children: [_jsx("button", { type: "button", disabled: !!run.busy, onClick: () => onOutput(run.taskId), children: run.busy === 'output' ? 'Reading…' : 'Output' }), run.status === 'running' && _jsx("button", { type: "button", disabled: !!run.busy, onClick: () => onStop(run.taskId), children: run.busy === 'stop' ? 'Stopping…' : 'Stop' })] })] }, run.taskId))) }) }) })] }));
+}
+/**
+ * The sub-agents this conversation has spawned (D11's Sub-work family, seen from the dock). In this
+ * runtime a delegation IS a child conversation, so the tray lists those rather than inventing a
+ * second record of them — and opening one is opening that conversation, which is where its own rail
+ * already lives.
+ */
+export function AgentsTray({ runs, open, onToggle, onOpen }) {
+    if (!runs.length)
+        return null;
+    const live = runs.filter((run) => run.live);
+    const current = live[0] || runs[0];
+    return (_jsxs("div", { className: `xa-transcript xa-tasks xa-agents${open ? ' xa-open' : ''}`, "data-delegated-runs": true, children: [_jsxs("button", { type: "button", className: "xa-bar", onClick: onToggle, "aria-expanded": open, children: [_jsx("span", { className: "xa-label", children: live.length ? 'Delegated' : 'Delegated · done' }), _jsx("span", { className: "xa-curtask", children: current.current || current.title }), _jsx("span", { className: "xa-cnt xa-num", children: live.length ? `${live.length} of ${runs.length}` : String(runs.length) }), _jsx(Chevron, {})] }), _jsx("div", { className: "xa-listwrap", children: _jsx("div", { className: "xa-list", children: _jsx("div", { className: "xa-in", children: runs.map((run) => (_jsxs("div", { className: `xa-item${run.live ? ' xa-now' : ' xa-done'}`, children: [_jsx("span", { className: "xa-sq" }), _jsx("span", { title: run.title, children: run.title }), _jsx("span", { className: "xa-runres xa-num", children: run.live ? formatElapsed(Date.now() - run.startedAt) : formatElapsed(run.updatedAt - run.startedAt) }), _jsx("span", { className: "xa-rowacts", children: _jsx("button", { type: "button", onClick: () => onOpen(run.conversationId), title: "Open this sub-agent's conversation", children: "Open" }) })] }, run.conversationId))) }) }) })] }));
+}
+export function TasksTray({ tasks, open, onToggle }) {
+    if (!tasks.length)
+        return null;
+    const done = tasks.filter((task) => task.status === 'done').length;
+    const current = tasks.find((task) => task.status === 'in_progress') || tasks.find((task) => task.status === 'pending') || tasks[tasks.length - 1];
+    const finished = done === tasks.length;
+    return (_jsxs("div", { className: `xa-transcript xa-tasks${open ? ' xa-open' : ''}`, "data-tasks": true, children: [_jsxs("button", { type: "button", className: "xa-bar", onClick: onToggle, "aria-expanded": open, children: [_jsx("span", { className: "xa-label", children: finished ? 'Done' : 'Tasks' }), _jsx("span", { className: "xa-curtask", children: finished ? '' : current.text }), _jsxs("span", { className: "xa-cnt xa-num", children: [done, " of ", tasks.length] }), _jsx(Chevron, {})] }), _jsx("div", { className: "xa-listwrap", children: _jsx("div", { className: "xa-list", children: _jsx("div", { className: "xa-in", children: tasks.map((task) => _jsxs("div", { className: `xa-item${task.status === 'done' ? ' xa-done' : task.status === 'in_progress' ? ' xa-now' : task.status === 'blocked' ? ' xa-blocked' : ''}`, children: [_jsx("span", { className: "xa-sq" }), _jsx("span", { children: task.text })] }, task.id)) }) }) })] }));
+}
+//# sourceMappingURL=Transcript.js.map