@lloyal-labs/dev-tools 0.1.1 → 0.3.0

package/dist/react.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * The dev pane's web/desktop surface: a cog FAB that docks a full-width pane
- * over the harness's own view — Timeline · Sources · Settings.
+ * The dev pane's web/desktop surface: the harness view's LAYOUT SHELL. The
+ * app renders inside the shell's scroll container and the pane docks BELOW
+ * it as its own flex region — Timeline · Sources · Settings. Opening the
+ * pane shrinks the app's viewport (the Chrome DevTools anchoring); it never
+ * covers the app.
  *
- * Mounted ONCE beside the app's view; it subscribes to the same bridge stream
+ * Wraps the app's view ONCE (the view is its children); it subscribes to the same bridge stream
  * through {@link createDevStore} (wire-gated: a production stream folds
  * nothing but `config:loaded`). Rendering is hand-rolled — no timeline
  * library: the design's invariants (fixed-span sliding window, stepped live
@@ -26,6 +29,10 @@ const C = {
 const HOST_CPU = '#00897b';
 const TOOL_PALETTE = ['#e8710a', '#8430ce', '#00897b', '#d01884', '#827717', '#0097a7'];
 const mono = 'ui-monospace, "SF Mono", Menlo, Consolas, monospace';
+const runBtn = {
+    fontSize: 10.5, padding: '2px 10px', borderRadius: 11, cursor: 'pointer',
+    border: '1px solid #dadce0', background: '#fff', color: C.dim, fontWeight: 600,
+};
 /** Per-tool color, assigned first-seen — stable within a run. */
 function useToolColors() {
     const map = useRef(new Map());
@@ -37,6 +44,18 @@ function useToolColors() {
     };
 }
 const letterOf = (name) => (name[0] || '?').toUpperCase();
+/** Invisible companion that forces one re-render when a toast expires —
+ *  the store stops repainting after the run ends, and a toast must never
+ *  outlive its 8 seconds on a frozen clock. */
+function ToastDismiss({ at }) {
+    const [, force] = useState(0);
+    useEffect(() => {
+        const left = Math.max(0, 8000 - (performance.now() - at)) + 50;
+        const t = setTimeout(() => force((n) => n + 1), left);
+        return () => clearTimeout(t);
+    }, [at]);
+    return null;
+}
 /** Enter/Space activates a clickable — pairs with role="button" tabIndex={0}. */
 const keyActivate = (fn) => (e) => {
     if (e.key === 'Enter' || e.key === ' ') {
@@ -136,9 +155,13 @@ function highlightJson(src) {
 /** A tool result in full: pretty-printed and token-colored when it parses as
  *  JSON, scrollable past ~14 lines, and the copy control carries EVERY byte —
  *  the block never truncates. */
-function JsonBlock({ text }) {
+function JsonBlock({ text, raw = false }) {
     const [copied, setCopied] = useState(false);
     const { pretty, body } = useMemo(() => {
+        // raw: byte-for-byte — a compiled prompt that HAPPENS to be valid JSON
+        // must never be reformatted; what you copy is what the model saw.
+        if (raw)
+            return { pretty: text, body: null };
         try {
             const p = JSON.stringify(JSON.parse(text), null, 2);
             return { pretty: p, body: highlightJson(p) };
@@ -146,7 +169,7 @@ function JsonBlock({ text }) {
         catch {
             return { pretty: text, body: null };
         }
-    }, [text]);
+    }, [text, raw]);
     const copy = () => {
         navigator.clipboard.writeText(pretty).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1200); }, () => { });
     };
@@ -199,7 +222,7 @@ function runEndS(m) {
     return m.runStartAt === null ? 0 : Math.max(0, (end - m.runStartAt) / 1000);
 }
 // ═══════════════════════════════════════════════════════════════
-export function DevPane({ bridge, controls = [], title }) {
+export function DevPane({ bridge, controls = [], title, runCommands = {}, children }) {
     // The store is a per-bridge SINGLETON: a remount reattaches to the running
     // fold (full history intact) instead of restarting it and desyncing. It is
     // deliberately NOT destroyed on unmount — it lives with the page, like the
@@ -208,64 +231,103 @@ export function DevPane({ bridge, controls = [], title }) {
     const rev = useStore(store, (s) => s.rev);
     const m = store.getState().model;
     const [open, setOpen] = useState(false);
-    // The FAB renders only when the wire said dev — production ships inert.
+    // While the pane is open, everything is seen live; the failure badge
+    // shows only failures newer than the last moment the pane was open.
+    const seenAtRef = useRef(0);
+    useEffect(() => { if (open)
+        seenAtRef.current = performance.now(); }, [open, rev]);
+    // The shell: app above, dev chrome below/over. Rendered in EVERY state —
+    // dev off, cog closed, pane open — so the app subtree keeps its position
+    // in the tree and never remounts when the dev flag or the pane toggles.
+    const shell = (content) => (_jsxs("div", { style: { height: '100dvh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }, children: [_jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto', position: 'relative' }, children: children }), content] }));
+    // The cog renders only when the wire said dev — production ships inert.
     if (!m.dev)
-        return null;
+        return shell(null);
     if (!open) {
         // The closed cog still tells the story: amber ? = the planner is waiting
         // on the USER (the one state that blocks everything), red = an agent
         // failed this run, blue = agents live right now. Nothing = quiet.
-        const liveCount = [...m.lanes.values()].filter((l) => l.doneAt === null).length;
-        const failed = [...m.lanes.values()].some((l) => l.outcome === 'failed');
+        // A stop can halt lanes without closing them — an ended run counts none.
+        const liveCount = isLive(m)
+            ? [...m.lanes.values()].filter((l) => l.doneAt === null).length
+            : 0;
+        // A user cancel is a deliberate cull, not a failure — it never badges.
+        const failedLanes = [...m.lanes.values()].filter((l) => l.outcome === 'failed' && l.failReason !== 'user_cancel');
+        const failed = failedLanes.length > 0;
+        const lastFailAt = failedLanes.reduce((mx, l) => Math.max(mx, l.doneAt ?? 0), 0);
         // iOS-style badge: always the one red, meaning carried by the glyph —
-        // ? = the planner waits on the user, ! = an agent failed, n = agents live.
+        // ? = the planner waits on the user, ! = an unseen failure, n = agents live.
         const badge = m.clarifying
             ? '?'
             : liveCount > 0 ? String(liveCount)
-                : failed ? '!' : null;
+                : failed && lastFailAt > seenAtRef.current ? '!' : null;
         const fabTitle = m.clarifying
             ? 'the planner is waiting on your answer'
             : liveCount > 0
                 ? `${liveCount} agent${liveCount === 1 ? '' : 's'} live${failed ? ' · one failed' : ''}`
                 : failed ? 'an agent failed — open for the reason' : 'dev pane (LLOYAL_DEV)';
-        return (_jsxs("button", { onClick: () => setOpen(true), "aria-label": "open the dev pane", title: fabTitle, style: {
-                position: 'fixed', right: 20, bottom: 20, width: 44, height: 44,
-                borderRadius: '50%', background: '#fff', border: `1px solid #dadce0`,
-                display: 'grid', placeItems: 'center', color: C.dim, cursor: 'pointer',
-                boxShadow: '0 2px 8px rgba(32,33,36,.14)', zIndex: 40, padding: 0,
-            }, children: [badge && (_jsx("span", { style: {
-                        position: 'absolute', top: -6, right: -6, minWidth: 20, height: 20,
-                        borderRadius: 10, background: 'linear-gradient(180deg, #ff544a 0%, #ff2d1f 100%)',
-                        color: '#fff', fontSize: 12, fontWeight: 600,
-                        display: 'grid', placeItems: 'center', padding: '0 6px', boxSizing: 'border-box',
-                        lineHeight: 1, boxShadow: '0 1px 3px rgba(0,0,0,.35)',
-                        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-                    }, children: badge })), _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })] })] }));
+        // A park or failure in the last 8s surfaces as a one-line toast beside
+        // the cog. Age reads the REAL clock (paintedAt freezes when the run
+        // ends) and a timer forces the dismissal render — no immortal toasts.
+        const nowP = performance.now();
+        let toast = null;
+        let toastAt = 0;
+        for (const r of m.retrievals) {
+            if (r.retry && nowP - r.retry.at < 8000 && r.settledAt === null) {
+                toast = `${r.tool} rate-limited · retrying`;
+                toastAt = r.retry.at;
+            }
+        }
+        for (const l of failedLanes) {
+            if (l.doneAt !== null && nowP - l.doneAt < 8000) {
+                toast = `agent #${l.agentId} failed — open for the reason`;
+                toastAt = l.doneAt;
+            }
+        }
+        return shell(_jsxs(_Fragment, { children: [toast && (_jsxs("div", { role: "status", "aria-live": "polite", style: {
+                        position: 'fixed', right: 74, bottom: 28, zIndex: 40,
+                        background: '#fff', border: `1px solid ${C.warnBorder}`, borderRadius: 8,
+                        padding: '6px 12px', fontSize: 11.5, color: C.warn, boxShadow: '0 2px 8px rgba(32,33,36,.14)',
+                    }, children: [toast, _jsx(ToastDismiss, { at: toastAt })] })), _jsxs("button", { onClick: () => setOpen(true), "aria-label": "open the dev pane", title: fabTitle, style: {
+                        position: 'fixed', right: 20, bottom: 20, width: 44, height: 44,
+                        borderRadius: '50%', background: '#fff', border: `1px solid #dadce0`,
+                        display: 'grid', placeItems: 'center', color: C.dim, cursor: 'pointer',
+                        boxShadow: '0 2px 8px rgba(32,33,36,.14)', zIndex: 40, padding: 0,
+                    }, children: [badge && (_jsx("span", { style: {
+                                position: 'absolute', top: -6, right: -6, minWidth: 20, height: 20,
+                                borderRadius: 10, background: 'linear-gradient(180deg, #ff544a 0%, #ff2d1f 100%)',
+                                color: '#fff', fontSize: 12, fontWeight: 600,
+                                display: 'grid', placeItems: 'center', padding: '0 6px', boxSizing: 'border-box',
+                                lineHeight: 1, boxShadow: '0 1px 3px rgba(0,0,0,.35)',
+                                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                            }, children: badge })), _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })] })] })] }));
     }
-    return _jsx(Pane, { store: store, m: m, rev: rev, controls: controls, title: title, onClose: () => setOpen(false) });
+    return shell(_jsx(Pane, { store: store, m: m, rev: rev, controls: controls, title: title, runCommands: runCommands, onClose: () => setOpen(false) }));
 }
 // ═══ the docked pane ═══
-function Pane({ store, m, rev, controls, title, onClose }) {
+function Pane({ store, m, rev, controls, title, runCommands, onClose }) {
     const [tab, setTab] = useState('timeline');
     const [selAgent, setSelAgent] = useState(null);
     const [feedW, setFeedW] = useState(feedWidthPref);
+    const [paneH, setPaneH] = useState(paneHeightPref);
     const toolColor = useToolColors();
     const paneRef = useRef(null);
-    // The pane is fixed, so the document doesn't know it's there — reserve its
-    // height as body padding while open, so the app's bottom content can always
-    // scroll clear of it. Restored on close/unmount.
+    // A dragged height outlives the viewport that fit it — re-clamp on window
+    // resize so the pane can never swallow the whole shell (the app area is
+    // minHeight: 0 and would collapse to nothing).
     useEffect(() => {
-        const prev = document.body.style.paddingBottom;
-        const apply = () => {
-            if (paneRef.current)
-                document.body.style.paddingBottom = `${paneRef.current.offsetHeight}px`;
-        };
-        apply();
-        window.addEventListener('resize', apply);
-        return () => {
-            window.removeEventListener('resize', apply);
-            document.body.style.paddingBottom = prev;
+        const onResize = () => {
+            setPaneH((h) => {
+                if (h === null)
+                    return h;
+                const clamped = clampPaneH(h);
+                if (clamped !== h)
+                    paneHeightPref = clamped;
+                return clamped;
+            });
         };
+        window.addEventListener('resize', onResize);
+        return () => window.removeEventListener('resize', onResize);
     }, []);
     useEffect(() => {
         const onKey = (e) => {
@@ -290,17 +352,30 @@ function Pane({ store, m, rev, controls, title, onClose }) {
         boxShadow: on ? `inset 0 2px 0 ${C.text}` : undefined,
     });
     return (_jsxs("div", { ref: paneRef, style: {
-            position: 'fixed', left: 0, right: 0, bottom: 0, height: 'min(560px, 72vh)',
+            position: 'relative', flex: 'none',
+            height: paneH !== null ? paneH : 'min(560px, 72vh)',
             background: '#fff', borderTop: '1px solid #bdc1c6', display: 'flex',
-            flexDirection: 'column', zIndex: 50, fontSize: 12, color: C.text,
+            flexDirection: 'column', fontSize: 12, color: C.text,
             fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
-        }, children: [_jsxs("div", { role: "tablist", style: { height: 30, display: 'flex', alignItems: 'stretch', background: C.chromeBg, borderBottom: '1px solid #d9dce1', flex: 'none' }, children: [['timeline', 'sources', 'settings'].map((t) => {
+        }, children: [_jsx(PaneResizer, { height: paneH, paneRef: paneRef, onHeight: (h) => { paneHeightPref = h; setPaneH(h); } }), _jsxs("div", { role: "tablist", style: { height: 30, display: 'flex', alignItems: 'stretch', background: C.chromeBg, borderBottom: '1px solid #d9dce1', flex: 'none' }, children: [['timeline', 'sources', 'settings'].map((t) => {
                         const settled = t === 'sources' ? m.retrievals.filter((r) => r.settledAt !== null).length : 0;
                         return (_jsxs("div", { role: "tab", tabIndex: 0, "aria-selected": tab === t, style: tabStyle(tab === t), onClick: () => setTab(t), onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
                                 e.preventDefault();
                                 setTab(t);
                             } }, children: [t[0].toUpperCase() + t.slice(1), settled > 0 && _jsx("span", { style: { marginLeft: 5, fontFamily: mono, fontSize: 9.5, color: C.faint }, children: settled })] }, t));
-                    }), _jsx("span", { style: { flex: 1 } }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, padding: '0 12px', fontSize: 10.5, color: C.dim }, children: [_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 5 }, children: [_jsx("span", { style: { width: 14, height: 5, borderRadius: 3, background: C.agent, display: 'inline-block' } }), " agent"] }), _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 5 }, children: [_jsx("span", { style: { width: 14, height: 5, display: 'inline-block', borderRadius: 3, background: 'repeating-linear-gradient(135deg, rgba(26,115,232,.45) 0 4px, rgba(26,115,232,.12) 4px 9px)' } }), " waiting"] }), toolsSeen.map((t) => (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 5 }, children: [_jsx(Badge, { color: toolColor(t), letter: letterOf(t), size: 15 }), " ", t] }, t))), _jsxs("span", { style: { fontFamily: mono, display: 'inline-flex', alignItems: 'center', gap: 7 }, children: [_jsx("span", { style: { width: 7, height: 7, borderRadius: '50%', background: live ? C.ok : C.faint } }), live ? 'live' : m.runStartAt === null ? 'idle' : 'run complete'] }), _jsx("span", { style: { cursor: 'pointer', color: C.dim }, onClick: onClose, title: "collapse to the cog", children: "\u2715" })] })] }), tab === 'timeline' && (_jsxs("div", { style: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Timeline, { m: m, rev: rev, store: store, selAgent: selAgent, onSelect: setSelAgent, toolColor: toolColor }), selAgent !== null && m.lanes.has(selAgent) && (_jsxs(_Fragment, { children: [_jsx(FeedResizer, { width: feedW, onWidth: (w) => { feedWidthPref = w; setFeedW(w); } }), _jsx(AgentFeed, { m: m, lane: m.lanes.get(selAgent), toolColor: toolColor, onClose: () => setSelAgent(null), onJump: setSelAgent, nowMs: store.getState().paintedAt, width: feedW })] }))] })), tab === 'sources' && _jsx(Sources, { m: m, toolColor: toolColor }), tab === 'settings' && _jsx(Settings, { m: m, controls: controls, send: (c) => store.send(c) }), _jsxs("div", { style: {
+                    }), _jsx("span", { style: { flex: 1 } }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, padding: '0 12px', fontSize: 10.5, color: C.dim }, children: [_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 5 }, children: [_jsx("span", { style: { width: 14, height: 5, borderRadius: 3, background: C.agent, display: 'inline-block' } }), " agent"] }), _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 5 }, children: [_jsx("span", { style: { width: 14, height: 5, display: 'inline-block', borderRadius: 3, background: 'repeating-linear-gradient(135deg, rgba(26,115,232,.45) 0 4px, rgba(26,115,232,.12) 4px 9px)' } }), " waiting"] }), toolsSeen.map((t) => (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 5 }, children: [_jsx(Badge, { color: toolColor(t), letter: letterOf(t), size: 15 }), " ", t] }, t))), live && (runCommands.pause || runCommands.wrapUp || runCommands.stop) && (_jsxs("span", { style: { display: 'inline-flex', gap: 6 }, children: [runCommands.pause && (_jsx("button", { onClick: () => store.send({ type: m.pausedAt !== null ? 'resume' : 'pause' }), disabled: m.windingDownAt !== null, title: m.windingDownAt !== null
+                                            ? 'finishing — the run is winding down'
+                                            : m.pausedAt !== null
+                                                ? 'play — the next tick proceeds from the settled state'
+                                                : 'pause — hold at the tick boundary; branches stay resident', style: m.windingDownAt !== null ? { ...runBtn, opacity: 0.4, cursor: 'default' }
+                                            : m.pausedAt !== null ? { ...runBtn, color: C.ok, borderColor: '#c9e7d4' } : runBtn, children: m.pausedAt !== null ? '▶ play' : '⏸ pause' })), runCommands.wrapUp && (_jsx("button", { onClick: () => store.send({ type: 'wrap_up' }), disabled: m.pausedAt !== null || m.windingDownAt !== null, title: m.windingDownAt !== null
+                                            ? 'agents are wrapping up and reporting'
+                                            : m.pausedAt !== null
+                                                ? 'paused — press play first'
+                                                : 'finish up — agents wrap up and report; the trajectory is kept', style: m.pausedAt !== null || m.windingDownAt !== null
+                                            ? { ...runBtn, opacity: 0.4, cursor: 'default' } : runBtn, children: m.windingDownAt !== null ? 'finishing…' : 'finish up' })), runCommands.stop && (_jsx("button", { onClick: () => store.send({ type: 'stop' }), title: "halt the run", style: { ...runBtn, color: C.fail, borderColor: '#f0c4c1' }, children: "stop" }))] })), _jsxs("span", { style: { fontFamily: mono, display: 'inline-flex', alignItems: 'center', gap: 7 }, children: [_jsx("span", { style: { width: 7, height: 7, borderRadius: '50%', background: live ? (m.pausedAt !== null ? C.warn : C.ok) : C.faint } }), live
+                                        ? (m.pausedAt !== null ? 'paused' : m.windingDownAt !== null ? 'finishing' : 'live')
+                                        : m.runStartAt === null ? 'idle' : 'run complete'] }), _jsx("span", { style: { cursor: 'pointer', color: C.dim }, onClick: onClose, title: "collapse to the cog", children: "\u2715" })] })] }), tab === 'timeline' && (_jsxs("div", { style: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Timeline, { m: m, rev: rev, store: store, selAgent: selAgent, onSelect: setSelAgent, toolColor: toolColor }), selAgent !== null && m.lanes.has(selAgent) && (_jsxs(_Fragment, { children: [_jsx(FeedResizer, { width: feedW, onWidth: (w) => { feedWidthPref = w; setFeedW(w); } }), _jsx(AgentFeed, { m: m, lane: m.lanes.get(selAgent), toolColor: toolColor, onClose: () => setSelAgent(null), onJump: setSelAgent, nowMs: store.getState().paintedAt, width: feedW, send: (c) => store.send(c), canCancel: !!runCommands.cancelAgent })] }))] })), tab === 'sources' && _jsx(Sources, { m: m, toolColor: toolColor }), tab === 'settings' && _jsx(Settings, { m: m, controls: controls, send: (c) => store.send(c) }), _jsxs("div", { style: {
                     height: 24, display: 'flex', alignItems: 'center', gap: 14, padding: '0 12px',
                     borderTop: `1px solid ${C.border}`, background: '#f8f9fa', fontSize: 10.5, color: C.dim, flex: 'none',
                 }, children: [_jsxs("span", { style: { fontFamily: mono }, children: [m.runStartAt === null
@@ -391,7 +466,7 @@ function Timeline({ m, rev, store, selAgent, onSelect, toolColor }) {
     };
     const onMouseUp = () => { drag.current = null; };
     return (_jsxs("div", { style: { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', minHeight: 0 }, children: [_jsxs("div", { style: { height: 54, borderBottom: `1px solid ${C.border}`, display: 'flex', flex: 'none' }, children: [_jsx(MetricCell, { heading: "pressure", color: C.agent, values: strip.slice(-60).map((p) => p.pct), value: pct === null ? '—' : `${pct}% · ${m.pressure[m.pressure.length - 1]?.cellsUsed.toLocaleString()} / ${m.pressure[m.pressure.length - 1]?.nCtx.toLocaleString()}`, title: "kv cells used \u2014 context pressure on the model side" }), _jsx(MetricCell, { heading: "cpu", color: HOST_CPU, values: host.slice(-60).map((h) => h.cpu), value: lastHost ? `${lastHost.cpu}%` : '—', title: "this process's cpu, % of the whole machine" }), _jsx(MetricCell, { heading: "mem", color: "#9aa0a6", values: host.slice(-60).filter((h) => h.memUsedMb !== null).map((h) => h.memUsedMb), value: lastHost && lastHost.memUsedMb !== null && lastHost.memTotalMb > 0
-                            ? `${(lastHost.memUsedMb / 1024).toFixed(1)} / ${Math.round(lastHost.memTotalMb / 1024)}G` : '—', title: "machine memory in use, honestly counted (vm_stat / MemAvailable)" }), _jsx(MetricCell, { heading: "harness", color: "#5f6368", last: true, values: host.slice(-60).map((h) => h.rssMb), value: lastHost ? `${(lastHost.rssMb / 1024).toFixed(1)}G` : '—', title: "this process's resident memory \u2014 weights + KV + runtime" })] }), _jsxs("div", { style: { height: 20, display: 'flex', borderBottom: `1px solid ${C.border}`, flex: 'none' }, children: [_jsx("div", { style: { width: GUTTER, flex: 'none', padding: '4px 0 0 14px' }, children: _jsx("span", { style: label, children: lanes.length ? `${lanes.length} agents` : '' }) }), _jsx("div", { style: { flex: 1, position: 'relative', fontFamily: mono }, children: ticks.map((t) => (_jsx("span", { style: { position: 'absolute', left: px(t) - GUTTER, fontSize: 9, color: C.faint }, children: t >= 60 ? `${Math.floor(t / 60)}m${t % 60 ? String(t % 60).padStart(2, '0') : ''}` : `${t}s` }, t))) })] }), _jsxs("div", { ref: trackRef, style: { flex: 1, position: 'relative', overflowY: 'auto', overflowX: 'hidden', cursor: drag.current ? 'grabbing' : undefined }, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, onMouseLeave: onMouseUp, onDoubleClick: () => { setFollow(true); setPanWindow(null); }, children: [!follow && live && (_jsx("button", { onClick: (e) => { e.stopPropagation(); setFollow(true); setPanWindow(null); }, style: {
+                            ? `${(lastHost.memUsedMb / 1024).toFixed(1)} / ${Math.round(lastHost.memTotalMb / 1024)}G` : '—', title: "machine memory in use, honestly counted (vm_stat / MemAvailable)" }), _jsx(MetricCell, { heading: "harness", color: "#5f6368", last: true, values: host.slice(-60).map((h) => h.rssMb), value: lastHost ? `${(lastHost.rssMb / 1024).toFixed(1)}G` : '—', title: "this process's resident memory \u2014 weights + KV + runtime" })] }), _jsxs("div", { style: { height: 20, display: 'flex', borderBottom: `1px solid ${C.border}`, flex: 'none' }, children: [_jsx("div", { style: { width: GUTTER, flex: 'none', padding: '4px 0 0 14px' }, children: _jsx("span", { style: label, children: lanes.length ? `${lanes.length} agents` : '' }) }), _jsx("div", { style: { flex: 1, position: 'relative', fontFamily: mono }, children: ticks.map((t) => (_jsx("span", { style: { position: 'absolute', left: px(t) - GUTTER, fontSize: 9, color: C.faint }, children: t >= 60 ? `${Math.floor(t / 60)}m${t % 60 ? String(t % 60).padStart(2, '0') : ''}` : `${t}s` }, t))) })] }), _jsxs("div", { ref: trackRef, style: { flex: 1, position: 'relative', overflowY: 'auto', overflowX: 'hidden', cursor: drag.current ? 'grabbing' : undefined }, onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, onMouseLeave: onMouseUp, onDoubleClick: () => { setFollow(true); setPanWindow(null); }, children: [m.runStartAt === null && (_jsx("div", { style: { position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: C.faint, fontSize: 11.5, pointerEvents: 'none' }, children: "run a query \u2014 agents appear here live" })), !follow && live && (_jsx("button", { onClick: (e) => { e.stopPropagation(); setFollow(true); setPanWindow(null); }, style: {
                             position: 'absolute', top: 6, right: 10, zIndex: 3, cursor: 'pointer',
                             fontSize: 10.5, padding: '3px 10px', borderRadius: 12, border: `1px solid ${C.border}`,
                             background: '#fff', color: C.agentDark, fontWeight: 600, boxShadow: '0 1px 4px rgba(32,33,36,.12)',
@@ -402,7 +477,11 @@ const label = {
 };
 function Lane({ m, l, px, on, secOf, nowS, live, selected, toolColor, onClick, gutter, windowEnd }) {
     const s = secOf(l.spawnedAt);
-    const e = l.doneAt === null ? nowS : secOf(l.doneAt);
+    // A paused run's lanes freeze at the hold — the widening gap to the
+    // now-line IS the pause, drawn honestly (no decode happened there).
+    const e = l.doneAt === null
+        ? (m.pausedAt !== null ? Math.min(nowS, secOf(m.pausedAt)) : nowS)
+        : secOf(l.doneAt);
     const capL = px(s);
     const capR = px(Math.min(e, windowEnd));
     const running = l.doneAt === null;
@@ -421,16 +500,24 @@ function Lane({ m, l, px, on, secOf, nowS, live, selected, toolColor, onClick, g
     };
     const glyph = l.outcome === 'failed' ? '✗' : l.outcome === 'recovered' ? '↻' : '✓';
     const glyphBg = l.outcome === 'failed' ? C.fail : l.outcome === 'recovered' ? C.agent : C.ok;
+    // A user cancel is a deliberate cull, not a failure of the agent's own —
+    // the row wears it: faint red wash, red identity, a 'cancelled' pill.
+    const cancelled = l.outcome === 'failed' && l.failReason === 'user_cancel';
     const endLabel = l.role === 'planner' && m.plan
         ? `plan · ${m.plan.tasks.length} tasks · ${fmtS(e - s)}`
         : l.outcome === 'recovered' ? `recovered · ${fmtS(e - s)}`
-            : l.outcome === 'failed' ? `${l.failReason ?? l.dropReason ?? 'failed'} · ${fmtS(e - s)}` : fmtS(e - s);
+            : cancelled ? fmtS(e - s)
+                : l.outcome === 'failed' ? `${l.failReason ?? l.dropReason ?? 'failed'} · ${fmtS(e - s)}` : fmtS(e - s);
     const endColor = l.outcome === 'failed' ? C.fail : l.outcome === 'recovered' ? C.agent : '#3c4043';
     return (_jsxs("div", { onClick: onClick, role: "button", tabIndex: 0, onKeyDown: keyActivate(onClick), "aria-label": `open agent ${l.agentId}`, style: {
             display: 'flex', height: 38, borderTop: `1px solid ${C.hair}`, position: 'relative', cursor: 'pointer',
-            background: selected ? C.chromeBg : undefined,
+            background: selected ? C.chromeBg : cancelled ? 'rgba(179,38,30,.05)' : undefined,
             boxShadow: selected ? `inset 3px 0 0 ${C.text}` : undefined,
-        }, children: [_jsxs("div", { style: { width: gutter, flex: 'none', display: 'flex', alignItems: 'baseline', gap: 6, padding: '12px 0 0 14px', fontSize: 11.5 }, children: [_jsx("span", { style: { fontWeight: 600 }, children: l.role ?? 'agent' }), _jsxs("span", { style: { color: C.dim, fontSize: 10.5, fontFamily: mono }, children: ["#", l.agentId] })] }), _jsxs("div", { style: { flex: 1, position: 'relative', overflow: 'hidden' }, children: [capR > gutter && capL < px(windowEnd) && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+        }, children: [cancelled && (_jsx("span", { style: {
+                    position: 'absolute', right: 10, top: 10, zIndex: 2,
+                    fontSize: 9.5, fontWeight: 600, padding: '2px 9px', borderRadius: 9,
+                    color: C.fail, background: 'rgba(179,38,30,.08)', border: '1px solid #f0c4c1',
+                }, children: "cancelled" })), _jsxs("div", { style: { width: gutter, flex: 'none', display: 'flex', alignItems: 'baseline', gap: 6, padding: '12px 0 0 14px', fontSize: 11.5 }, children: [_jsx("span", { style: { fontWeight: 600, color: cancelled ? C.fail : undefined }, children: l.role ?? 'agent' }), _jsxs("span", { style: { color: cancelled ? C.fail : C.dim, fontSize: 10.5, fontFamily: mono }, children: ["#", l.agentId] })] }), _jsxs("div", { style: { flex: 1, position: 'relative', overflow: 'hidden' }, children: [capR > gutter && capL < px(windowEnd) && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                                     position: 'absolute', top: 12, height: 14,
                                     left: Math.max(capL, gutter) - gutter,
                                     width: Math.max(4, capR - Math.max(capL, gutter)),
@@ -490,21 +577,82 @@ function Lane({ m, l, px, on, secOf, nowS, live, selected, toolColor, onClick, g
  *  own border stays the visual line. Width persists for the page session. */
 const FEED_W_DEFAULT = 420;
 let feedWidthPref = FEED_W_DEFAULT;
+const feedMax = () => Math.max(480, window.innerWidth - 380);
+const clampFeedW = (w) => Math.round(Math.min(Math.max(w, 320), feedMax()));
 function FeedResizer({ width, onWidth }) {
     const drag = useRef(null);
-    return (_jsx("div", { style: { width: 7, margin: '0 -3.5px', flex: 'none', cursor: 'col-resize', zIndex: 3, position: 'relative', userSelect: 'none', touchAction: 'none' }, title: "drag to resize \\u00b7 double-click to reset", onDoubleClick: () => { feedWidthPref = FEED_W_DEFAULT; onWidth(FEED_W_DEFAULT); }, onPointerDown: (e) => {
+    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "resize the agent feed", "aria-valuemin": 320, "aria-valuemax": feedMax(), "aria-valuenow": Math.round(width), tabIndex: 0, style: { width: 7, margin: '0 -3.5px', flex: 'none', cursor: 'col-resize', zIndex: 3, position: 'relative', userSelect: 'none', touchAction: 'none' }, title: "drag to resize \\u00b7 double-click to reset", onDoubleClick: () => { feedWidthPref = FEED_W_DEFAULT; onWidth(FEED_W_DEFAULT); }, onKeyDown: (e) => {
+            if (e.key === 'ArrowLeft')
+                onWidth(clampFeedW(width + 32));
+            else if (e.key === 'ArrowRight')
+                onWidth(clampFeedW(width - 32));
+            else if (e.key === 'Home')
+                onWidth(320);
+            else if (e.key === 'End')
+                onWidth(feedMax());
+            else if (e.key === 'Enter') {
+                feedWidthPref = FEED_W_DEFAULT;
+                onWidth(FEED_W_DEFAULT);
+            }
+            else
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+        }, onPointerDown: (e) => {
             e.preventDefault();
             drag.current = { x: e.clientX, w: width };
             e.currentTarget.setPointerCapture(e.pointerId);
         }, onPointerMove: (e) => {
             if (!drag.current)
                 return;
-            const w = drag.current.w + (drag.current.x - e.clientX);
-            onWidth(Math.round(Math.min(Math.max(w, 320), Math.max(480, window.innerWidth - 380))));
+            onWidth(clampFeedW(drag.current.w + (drag.current.x - e.clientX)));
+        }, onPointerUp: (e) => {
+            drag.current = null;
+            if (e.currentTarget.hasPointerCapture(e.pointerId))
+                e.currentTarget.releasePointerCapture(e.pointerId);
+        }, onPointerCancel: () => { drag.current = null; }, onLostPointerCapture: () => { drag.current = null; } }));
+}
+/** Drag handle on the pane's TOP edge — pull up for a taller pane, exactly
+ *  the Chrome DevTools gesture; double-click (or Enter) restores the
+ *  responsive default (min(560px, 72vh)). Same invisible-strip affordance as
+ *  FeedResizer: the cursor is the hint, the pane's own border stays the
+ *  line. Height persists for the page session. Keyboard: a focusable
+ *  horizontal separator — arrows step, Home/End jump to the bounds. */
+let paneHeightPref = null;
+const PANE_MIN = 180;
+const paneMax = () => Math.max(PANE_MIN, window.innerHeight - 48);
+const clampPaneH = (h) => Math.round(Math.min(Math.max(h, PANE_MIN), paneMax()));
+function PaneResizer({ height, paneRef, onHeight }) {
+    const drag = useRef(null);
+    const current = () => height ?? (paneRef.current?.offsetHeight ?? 560);
+    return (_jsx("div", { role: "separator", "aria-orientation": "horizontal", "aria-label": "resize the pane", "aria-valuemin": PANE_MIN, "aria-valuemax": paneMax(), "aria-valuenow": Math.round(current()), tabIndex: 0, style: { position: 'absolute', top: -3.5, left: 0, right: 0, height: 7, cursor: 'ns-resize', zIndex: 3, userSelect: 'none', touchAction: 'none' }, title: "drag to resize \\u00b7 double-click to reset", onDoubleClick: () => onHeight(null), onKeyDown: (e) => {
+            if (e.key === 'ArrowUp')
+                onHeight(clampPaneH(current() + 32));
+            else if (e.key === 'ArrowDown')
+                onHeight(clampPaneH(current() - 32));
+            else if (e.key === 'Home')
+                onHeight(PANE_MIN);
+            else if (e.key === 'End')
+                onHeight(paneMax());
+            else if (e.key === 'Enter')
+                onHeight(null);
+            else
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+        }, onPointerDown: (e) => {
+            e.preventDefault();
+            drag.current = { y: e.clientY, h: current() };
+            e.currentTarget.setPointerCapture(e.pointerId);
+        }, onPointerMove: (e) => {
+            if (!drag.current)
+                return;
+            onHeight(clampPaneH(drag.current.h + (drag.current.y - e.clientY)));
         }, onPointerUp: (e) => {
             drag.current = null;
-            e.currentTarget.releasePointerCapture(e.pointerId);
-        } }));
+            if (e.currentTarget.hasPointerCapture(e.pointerId))
+                e.currentTarget.releasePointerCapture(e.pointerId);
+        }, onPointerCancel: () => { drag.current = null; }, onLostPointerCapture: () => { drag.current = null; } }));
 }
 /** The epistemics instrument: entropy (area) and surprisal (line) in nats
  *  over the agent's WHOLE span — x is anchored time, so samples never slide,
@@ -563,10 +711,14 @@ function EpistemicsChart({ m, lane, nowMs }) {
         .filter((x) => x >= 0 && x <= B);
     const last = e[e.length - 1];
     const ppl = lanePpl(lane);
+    const tail = e.slice(-64);
+    const recentPpl = tail.length >= 16
+        ? Math.exp(tail.reduce((a, x) => a + x.s, 0) / tail.length)
+        : null;
     const chip = (color, label, value, title) => (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'baseline', gap: 4, whiteSpace: 'nowrap' }, title: title, children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: 2, background: color, alignSelf: 'center' } }), _jsx("span", { style: { color: C.dim }, children: label }), _jsx("span", { style: { fontFamily: mono, fontSize: 10, color: C.text }, children: value.toFixed(2) })] }));
-    return (_jsxs("div", { style: { borderBottom: `1px solid ${C.border}` }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', gap: 10, padding: '6px 12px 4px' }, children: [_jsx("span", { style: { color: C.dim }, children: "epistemics" }), _jsx("span", { style: { flex: 1 } }), chip(C.agent, 'entropy', last.h, 'how open the model\u2019s next-token choice was \u2014 nats, over the full vocabulary'), chip(SURPRISAL_COLOR, 'surprisal', last.s, 'how unexpected the picked token was \u2014 \u2212ln p, in nats'), ppl !== null && (_jsxs("span", { style: { fontFamily: mono, fontSize: 10, color: C.faint, whiteSpace: 'nowrap' }, title: "perplexity \\u2014 exp of mean surprisal over this agent\\u2019s tokens; compare agents, lower reads more fluent", children: ["ppl ", ppl.toFixed(2)] }))] }), _jsxs("div", { style: { position: 'relative', padding: '0 12px 7px' }, children: [_jsxs("svg", { viewBox: `0 0 ${B} ${H}`, preserveAspectRatio: "none", style: { width: '100%', height: H, display: 'block' }, children: [_jsx("line", { x1: 0, y1: y(yMax / 2), x2: B, y2: y(yMax / 2), stroke: C.hair, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }), _jsx("path", { d: entropyArea, fill: "rgba(26,115,232,.16)" }), _jsx("path", { d: entropyLine, fill: "none", stroke: C.agent, strokeWidth: 1.1, vectorEffect: "non-scaling-stroke" }), _jsx("path", { d: surprisalLine, fill: "none", stroke: SURPRISAL_COLOR, strokeWidth: 1, strokeOpacity: 0.75, vectorEffect: "non-scaling-stroke" }), ticks.map((x, i) => (_jsx("line", { x1: x, y1: H - 5, x2: x, y2: H, stroke: "#e8710a", strokeWidth: 2, vectorEffect: "non-scaling-stroke", children: _jsx("title", { children: "a tool result landed" }) }, i)))] }), _jsxs("span", { style: { position: 'absolute', top: 0, left: 14, fontFamily: mono, fontSize: 8.5, color: C.faint }, children: [yMax.toFixed(0), " nats"] })] })] }));
+    return (_jsxs("div", { style: { borderBottom: `1px solid ${C.border}` }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', gap: 10, padding: '6px 12px 4px' }, children: [_jsx("span", { style: { color: C.dim }, children: "epistemics" }), _jsx("span", { style: { flex: 1 } }), chip(C.agent, 'entropy', last.h, 'how open the model\u2019s next-token choice was \u2014 nats, over the full vocabulary'), chip(SURPRISAL_COLOR, 'surprisal', last.s, 'how unexpected the picked token was \u2014 \u2212ln p, in nats'), ppl !== null && (_jsxs("span", { style: { fontFamily: mono, fontSize: 10, color: C.faint, whiteSpace: 'nowrap' }, title: "ppl = exp of mean surprisal over ALL this agent's tokens (compare agents); recent = the same over the last ~64 \u2014 the live fluency signal, e.g. across quants", children: ["ppl ", ppl.toFixed(2), recentPpl !== null ? ` · recent ${recentPpl.toFixed(2)}` : ''] }))] }), _jsxs("div", { style: { position: 'relative', padding: '0 12px 7px' }, children: [_jsxs("svg", { viewBox: `0 0 ${B} ${H}`, preserveAspectRatio: "none", style: { width: '100%', height: H, display: 'block' }, children: [_jsx("line", { x1: 0, y1: y(yMax / 2), x2: B, y2: y(yMax / 2), stroke: C.hair, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }), _jsx("path", { d: entropyArea, fill: "rgba(26,115,232,.16)" }), _jsx("path", { d: entropyLine, fill: "none", stroke: C.agent, strokeWidth: 1.1, vectorEffect: "non-scaling-stroke" }), _jsx("path", { d: surprisalLine, fill: "none", stroke: SURPRISAL_COLOR, strokeWidth: 1, strokeOpacity: 0.75, vectorEffect: "non-scaling-stroke" }), ticks.map((x, i) => (_jsx("line", { x1: x, y1: H - 5, x2: x, y2: H, stroke: "#e8710a", strokeWidth: 2, vectorEffect: "non-scaling-stroke", children: _jsx("title", { children: "a tool result landed" }) }, i)))] }), _jsxs("span", { style: { position: 'absolute', top: 0, left: 14, fontFamily: mono, fontSize: 8.5, color: C.faint }, children: [yMax.toFixed(0), " nats"] })] })] }));
 }
-function AgentFeed({ m, lane, toolColor, onClose, onJump, nowMs, width }) {
+function AgentFeed({ m, lane, toolColor, onClose, onJump, nowMs, width, send, canCancel }) {
     const [expanded, setExpanded] = useState(() => new Set(['report']));
     const toggle = (id) => {
         setExpanded((prev) => {
@@ -628,7 +780,7 @@ function AgentFeed({ m, lane, toolColor, onClose, onJump, nowMs, width }) {
         }, children: [_jsxs("div", { style: {
                     height: 30, flex: 'none', display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px',
                     borderBottom: `1px solid ${C.border}`, background: '#f8f9fa',
-                }, children: [_jsxs("span", { style: { fontFamily: mono, fontWeight: 600, fontSize: 11 }, children: [lane.role ?? 'agent', " #", lane.agentId] }), lane.parentAgentId !== null && m.lanes.has(lane.parentAgentId) && (_jsxs("span", { style: chip, children: ["forked from #", lane.parentAgentId] })), _jsxs("span", { style: chip, children: [lane.outcome, lane.doneAt !== null && m.runStartAt !== null ? ` · ${fmtS((lane.doneAt - lane.spawnedAt) / 1000)}` : ''] }), _jsx("span", { style: { flex: 1 } }), _jsx("span", { style: { cursor: 'pointer', color: C.dim }, onClick: onClose, title: "close \u2014 the timeline returns to full width", children: "\u2715" })] }), _jsxs("div", { style: { overflowY: 'auto', flex: 1, fontSize: 11, paddingBottom: 8 }, children: [_jsx(EpistemicsChart, { m: m, lane: lane, nowMs: nowMs }), (lane.failReason || lane.dropReason) && (_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', padding: '6px 12px', gap: 8 }, children: [_jsx("span", { style: { color: C.dim, width: 92, flex: 'none' }, children: "pool said" }), _jsx("span", { style: { fontFamily: mono, fontSize: 11 }, children: lane.dropReason ?? lane.failReason })] })), items.map((it) => it.el), planView, lane.role !== 'planner' && (lane.report !== null || lane.outcome === 'failed') && (_jsxs("div", { style: feedItem, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 7, cursor: 'pointer' }, onClick: () => toggle('report'), children: [_jsx("span", { style: { color: C.faint, fontSize: 9, width: 9, flex: 'none' }, children: reportOpen ? '▾' : '▸' }), _jsx("b", { style: { fontSize: 11 }, children: "report" }), _jsx("span", { style: { color: C.faint }, children: lane.report === null ? 'not delivered' : lane.reportSource === 'recovery' ? 'extracted by recovery' : 'delivered' })] }), reportOpen && lane.report !== null && (_jsx("div", { style: { margin: '6px 0 2px 16px', lineHeight: 1.5, color: '#3c4043', whiteSpace: 'pre-wrap' }, children: lane.report }))] }))] })] }));
+                }, children: [_jsxs("span", { style: { fontFamily: mono, fontWeight: 600, fontSize: 11 }, children: [lane.role ?? 'agent', " #", lane.agentId] }), lane.parentAgentId !== null && m.lanes.has(lane.parentAgentId) && (_jsxs("span", { style: chip, children: ["forked from #", lane.parentAgentId] })), _jsxs("span", { style: chip, children: [lane.outcome, lane.doneAt !== null && m.runStartAt !== null ? ` · ${fmtS((lane.doneAt - lane.spawnedAt) / 1000)}` : ''] }), _jsx("span", { style: { flex: 1 } }), canCancel && lane.doneAt === null && (_jsx("button", { onClick: () => send({ type: 'cancel_agent', agentId: lane.agentId }), "aria-label": "cancel this agent", title: "cancel this agent \u2014 its branch is reclaimed; siblings continue. Works while paused: evaluate trajectories, cull, play", style: { ...runBtn, color: C.fail, borderColor: '#f0c4c1', padding: '2px 7px', display: 'inline-flex', alignItems: 'center' }, children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "3 6 5 6 21 6" }), _jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }), _jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }), _jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })] }) })), _jsx("span", { style: { cursor: 'pointer', color: C.dim }, onClick: onClose, title: "close \u2014 the timeline returns to full width", children: "\u2715" })] }), _jsxs("div", { style: { overflowY: 'auto', flex: 1, fontSize: 11, paddingBottom: 8 }, children: [_jsx(EpistemicsChart, { m: m, lane: lane, nowMs: nowMs }), lane.prompt && (_jsxs("div", { style: { borderBottom: `1px solid ${C.border}`, padding: '4px 12px 6px' }, children: [_jsxs("div", { role: "button", tabIndex: 0, onClick: () => toggle('prompt'), onKeyDown: keyActivate(() => toggle('prompt')), style: { display: 'flex', alignItems: 'baseline', gap: 7, cursor: 'pointer', padding: '2px 0' }, title: "the compiled prompt suffix that seeded this agent. In shared-spine mode the system + tool header lives on the spine PREFIX (inherited via fork) and is not repeated here; recursive agents inherit further parent context the same way", children: [_jsx("span", { style: { color: C.faint, fontSize: 9, width: 9, flex: 'none' }, children: expanded.has('prompt') ? '▾' : '▸' }), _jsx("span", { style: { color: C.dim }, children: "prompt" }), _jsxs("span", { style: { fontFamily: mono, fontSize: 10, color: C.faint }, children: [lane.prompt.tokenCount.toLocaleString(), " tok"] })] }), expanded.has('prompt') && _jsx(JsonBlock, { text: lane.prompt.text, raw: true })] })), (lane.failReason || lane.dropReason) && (_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', padding: '6px 12px', gap: 8 }, children: [_jsx("span", { style: { color: C.dim, width: 92, flex: 'none' }, children: "pool said" }), _jsx("span", { style: { fontFamily: mono, fontSize: 11 }, children: lane.dropReason ?? lane.failReason })] })), items.map((it) => it.el), planView, lane.role !== 'planner' && (lane.report !== null || lane.outcome === 'failed') && (_jsxs("div", { style: feedItem, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 7, cursor: 'pointer' }, onClick: () => toggle('report'), children: [_jsx("span", { style: { color: C.faint, fontSize: 9, width: 9, flex: 'none' }, children: reportOpen ? '▾' : '▸' }), _jsx("b", { style: { fontSize: 11 }, children: "report" }), _jsx("span", { style: { color: C.faint }, children: lane.report === null ? 'not delivered' : lane.reportSource === 'recovery' ? 'extracted by recovery' : 'delivered' })] }), reportOpen && lane.report !== null && (_jsx("div", { style: { margin: '6px 0 2px 16px', lineHeight: 1.5, color: '#3c4043', whiteSpace: 'pre-wrap' }, children: lane.report }))] }))] })] }));
 }
 const feedItem = { padding: '7px 12px', borderTop: '1px solid #eceef1' };
 const chip = {