@lloyal-labs/dev-tools 0.4.2 → 0.5.0-alpha.10

package/dist/react.js

@@ -17,13 +17,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useStore } from 'zustand';
-import { pressureStrip, pressurePercent, readConfigPath, lanePpl, isLive, KEY_TIERS, } from './index.js';
+import { pressureStrip, pressurePercent, readConfigPath, lanePpl, isLive, configRows, configCommand, liveConfigKeys, changing, } from './index.js';
 import { devStoreFor, EDGE_STEP } from './store.js';
 // ── palette: monochrome chrome, color reserved for data ──
 const C = {
     text: '#202124', dim: '#5f6368', faint: '#9aa0a6', border: '#e8eaed',
     hair: '#f4f5f7', chromeBg: '#f1f3f4', panelBg: '#fafbfc',
-    agent: '#1a73e8', agentDark: '#174ea6', fail: '#b3261e', ok: '#188038',
+    agent: '#1a73e8', agentDark: '#174ea6', recon: '#7cacf8', fail: '#b3261e', ok: '#188038',
     warn: '#9a6700', warnBg: '#fef7e0', warnBorder: '#f9d67a',
 };
 const HOST_CPU = '#00897b';
@@ -246,12 +246,12 @@ function runEndS(m) {
     return m.runStartAt === null ? 0 : Math.max(0, (end - m.runStartAt) / 1000);
 }
 // ═══════════════════════════════════════════════════════════════
-export function DevPane({ bridge, controls = [], title, runCommands = {}, children }) {
+export function DevPane({ bridge, config, title, runCommands = {}, framing, 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
     // bridge itself (dev-gated; a production stream folds nothing).
-    const store = devStoreFor(bridge);
+    const store = devStoreFor(bridge, framing);
     const rev = useStore(store, (s) => s.rev);
     const m = store.getState().model;
     const [open, setOpen] = useState(false);
@@ -328,10 +328,13 @@ export function DevPane({ bridge, controls = [], title, runCommands = {}, childr
                                     } }), m.clarifying ? '?' : liveCount > 0 ? liveCount : '!'] })), _jsx("span", { children: summary })] }), toast && _jsx(Notice, { at: toastAt, text: toast }), _jsx("span", { style: { flex: 1 } }), _jsxs("span", { "aria-hidden": "true", style: { display: 'inline-flex', alignItems: 'center', gap: 14 }, children: [_jsx(MiniSpark, { heading: "context", color: C.agent, values: barStrip.map((p) => p.pct), value: barPct === null ? '—' : `${barPct}%` }), _jsx(MiniSpark, { heading: "cpu", color: HOST_CPU, values: barHost.map((h) => h.cpu), value: barLast ? `${barLast.cpu}%` : '—' }), _jsx(MiniSpark, { heading: "mem", color: "#9aa0a6", values: barHost.filter((h) => h.memUsedMb !== null).map((h) => h.memUsedMb), value: barLast && barLast.memUsedMb !== null && barLast.memTotalMb > 0
                                 ? `${(barLast.memUsedMb / 1024).toFixed(1)} / ${Math.round(barLast.memTotalMb / 1024)}G` : '—' }), _jsx(MiniSpark, { heading: "harness", color: "#5f6368", values: barHost.map((h) => h.rssMb), value: barLast ? `${(barLast.rssMb / 1024).toFixed(1)}G` : '—' })] }), _jsx("span", { style: { flex: 1 } }), _jsx("span", { style: { color: C.faint }, "aria-hidden": "true", children: "click to expand" })] }));
     }
-    return shell(_jsx(Pane, { store: store, m: m, rev: rev, controls: controls, title: title, runCommands: runCommands, onClose: () => setOpen(false) }));
+    return shell(_jsx(Pane, { store: store, m: m, rev: rev, config: config, title: title, runCommands: runCommands, onClose: () => setOpen(false), 
+        // Thumbnails resolve through the bridge when the harness exposes a
+        // content route; the pane never learns the transport, only the URL.
+        mediaUrl: bridge.representationUrl ? (d, i) => bridge.representationUrl(d, i) : undefined }));
 }
 // ═══ the docked pane ═══
-function Pane({ store, m, rev, controls, title, runCommands, onClose }) {
+function Pane({ store, m, rev, config, title, runCommands, onClose, mediaUrl }) {
     const [tab, setTab] = useState('timeline');
     const [selAgent, setSelAgent] = useState(null);
     const [feedW, setFeedW] = useState(feedWidthPref);
@@ -401,7 +404,7 @@ function Pane({ store, m, rev, controls, title, runCommands, onClose }) {
                                                 : '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: {
+                                        : 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 === 'spine' && m.spine && (_jsxs(_Fragment, { children: [_jsx(FeedResizer, { width: feedW, onWidth: (w) => { feedWidthPref = w; setFeedW(w); } }), _jsx(SpineFeed, { m: m, onClose: () => setSelAgent(null), width: feedW, mediaUrl: mediaUrl, toolColor: toolColor })] })), selAgent === 'trunk' && m.trunk.length > 0 && (_jsxs(_Fragment, { children: [_jsx(FeedResizer, { width: feedW, onWidth: (w) => { feedWidthPref = w; setFeedW(w); } }), _jsx(TrunkFeed, { m: m, onClose: () => setSelAgent(null), width: feedW, mediaUrl: mediaUrl })] })), typeof selAgent === 'number' && 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, config: config, 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
@@ -492,11 +495,121 @@ 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: "context", 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: [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: {
+                            ? `${(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', overflow: 'hidden', 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)',
-                        }, children: "\u27F3 follow live" })), _jsxs("div", { style: { position: 'absolute', left: GUTTER, right: 0, top: 0, bottom: 0, pointerEvents: 'none' }, children: [ticks.map((t) => (_jsx("div", { style: { position: 'absolute', left: px(t) - GUTTER, top: 0, bottom: 0, width: 1, background: t % (step * 3) === 0 ? C.border : C.hair } }, t))), live && on(nowS) && (_jsxs(_Fragment, { children: [_jsx("div", { style: { position: 'absolute', left: px(nowS) - GUTTER, right: 0, top: 0, bottom: 0, background: C.panelBg } }), _jsx("div", { style: { position: 'absolute', left: px(nowS) - GUTTER, top: 0, bottom: 0, width: 1, background: C.text, zIndex: 1 } }), _jsx("div", { style: { position: 'absolute', left: px(nowS) - GUTTER, top: 2, transform: 'translateX(-50%)', fontSize: 8.5, background: C.text, color: '#fff', padding: '0 5px', borderRadius: 2, zIndex: 2, fontFamily: mono }, children: "now" })] }))] }), lanes.map((l) => (_jsx(Lane, { m: m, l: l, px: px, on: on, secOf: secOf, nowS: nowS, live: live, selected: selAgent === l.agentId, toolColor: toolColor, onClick: () => onSelect(selAgent === l.agentId ? null : l.agentId), gutter: GUTTER, windowEnd: w1 }, l.agentId)))] })] }));
+                        }, children: "\u27F3 follow live" })), _jsxs("div", { style: { position: 'absolute', left: GUTTER, right: 0, top: 0, bottom: 0, pointerEvents: 'none' }, children: [ticks.map((t) => (_jsx("div", { style: { position: 'absolute', left: px(t) - GUTTER, top: 0, bottom: 0, width: 1, background: t % (step * 3) === 0 ? C.border : C.hair } }, t))), live && on(nowS) && (_jsxs(_Fragment, { children: [_jsx("div", { style: { position: 'absolute', left: px(nowS) - GUTTER, right: 0, top: 0, bottom: 0, background: C.panelBg } }), _jsx("div", { style: { position: 'absolute', left: px(nowS) - GUTTER, top: 0, bottom: 0, width: 1, background: C.text, zIndex: 1 } }), _jsx("div", { style: { position: 'absolute', left: px(nowS) - GUTTER, top: 2, transform: 'translateX(-50%)', fontSize: 8.5, background: C.text, color: '#fff', padding: '0 5px', borderRadius: 2, zIndex: 2, fontFamily: mono }, children: "now" })] }))] }), (() => {
+                        // Fork topology, drawn. Pure px()/ROW_H geometry — no DOM reads —
+                        // and absolutely positioned INSIDE the scroll container, so curves
+                        // ride with their rows through scroll, pan, and every resize.
+                        const rows = [];
+                        if (m.trunk.length > 0)
+                            rows.push('session');
+                        if (m.spine)
+                            rows.push('spine');
+                        for (const l of lanes)
+                            rows.push(l.agentId);
+                        const rowIdx = new Map(rows.map((r, i) => [r, i]));
+                        const yMid = (r) => rowIdx.get(r) * ROW_H + 19;
+                        const paths = [];
+                        if (m.spine && rowIdx.has('spine')) {
+                            const sx = px(secOf(m.spine.spineAt ?? m.spine.at));
+                            // Warm lineage: the session's conversation feeds the spine.
+                            if (rowIdx.has('session') && (m.spine.inherited ?? 0) > 0 && sx >= GUTTER) {
+                                const sy = rowIdx.get('session') * ROW_H + 22;
+                                const ty = rowIdx.get('spine') * ROW_H + 19;
+                                const e = sx - 10;
+                                const r = 4;
+                                paths.push(_jsx("path", { d: `M ${sx} ${sy} L ${e + r} ${sy} Q ${e} ${sy} ${e} ${sy + r} L ${e} ${ty - r} Q ${e} ${ty} ${e + r} ${ty} L ${sx - 2} ${ty}`, stroke: "#9aa0a6", strokeWidth: "1.3", fill: "none" }, "warm"));
+                            }
+                            // Every lane hangs off the spine at its true spawn moment.
+                            const spineRow = rowIdx.get('spine');
+                            for (const l of lanes) {
+                                // Only lanes that forked AFTER the spine existed hang off it —
+                                // a planner forks from the session, and the pane draws no
+                                // parentage it does not know.
+                                if (m.spine.spineAt === null || l.spawnedAt + 250 < m.spine.spineAt)
+                                    continue;
+                                const x = px(secOf(l.spawnedAt));
+                                if (x < GUTTER || !on(secOf(l.spawnedAt)))
+                                    continue;
+                                const laneRow = rowIdx.get(l.agentId);
+                                // Nested elbows: drop at a small left offset (wider for deeper
+                                // rows, so simultaneous forks read as nested guides), rounded
+                                // corner, horizontal entry into the bar's left edge.
+                                const off = 8 + (laneRow - spineRow - 1) * 5;
+                                const sy = spineRow * ROW_H + 23;
+                                const ty = laneRow * ROW_H + 19;
+                                const e = x - off;
+                                const r = 4;
+                                paths.push(_jsx("path", { d: `M ${x} ${sy} L ${e + r} ${sy} Q ${e} ${sy} ${e} ${sy + r} L ${e} ${ty - r} Q ${e} ${ty} ${e + r} ${ty} L ${x - 2} ${ty}`, stroke: "#9aa0a6", strokeWidth: "1.3", fill: "none" }, `f${l.agentId}`));
+                            }
+                        }
+                        // DAG dependency edges — declared by the orchestrator, never inferred.
+                        for (const l of lanes) {
+                            for (const dep of l.after ?? []) {
+                                const d = m.lanes.get(dep);
+                                if (!d || d.doneAt === null || !rowIdx.has(dep))
+                                    continue;
+                                const x2 = px(secOf(l.spawnedAt));
+                                if (x2 < GUTTER)
+                                    continue;
+                                const x1 = Math.max(px(secOf(d.doneAt)), GUTTER);
+                                const y1 = yMid(dep);
+                                const y2 = yMid(l.agentId);
+                                const e = Math.max(x2 - 8, x1 + 4);
+                                const r = 4;
+                                const vdir = y2 > y1 ? 1 : -1;
+                                paths.push(_jsx("path", { d: `M ${x1} ${y1} L ${e - r} ${y1} Q ${e} ${y1} ${e} ${y1 + r * vdir} L ${e} ${y2 - r * vdir} Q ${e} ${y2} ${e + r} ${y2} L ${x2} ${y2}`, stroke: "#9aa0a6", strokeWidth: "1.2", strokeDasharray: "4 3", fill: "none" }, `d${dep}-${l.agentId}`));
+                            }
+                        }
+                        if (paths.length === 0)
+                            return null;
+                        return (_jsx("svg", { width: "100%", height: rows.length * ROW_H, style: { position: 'absolute', left: 0, top: 0, pointerEvents: 'none', zIndex: 1 }, children: paths }));
+                    })(), m.trunk.length > 0 && (_jsxs("div", { role: "button", tabIndex: 0, onClick: () => onSelect(selAgent === 'trunk' ? null : 'trunk'), onKeyDown: keyActivate(() => onSelect(selAgent === 'trunk' ? null : 'trunk')), style: {
+                            position: 'relative', height: ROW_H, display: 'flex', cursor: 'pointer',
+                            borderBottom: `1px solid ${C.hair}`,
+                            background: selAgent === 'trunk' ? C.chromeBg : undefined,
+                            boxShadow: selAgent === 'trunk' ? `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: "session" }), _jsxs("span", { style: { color: C.dim, fontSize: 10.5, fontFamily: mono }, children: [m.trunk.length, " turn", m.trunk.length === 1 ? '' : 's'] })] }), _jsx("div", { style: { flex: 1, position: 'relative', overflow: 'hidden' }, children: m.trunk.map((t, i) => {
+                                    const s = secOf(t.at);
+                                    if (!on(s))
+                                        return null;
+                                    // One diamond per side, colored by who spoke; a committed
+                                    // exchange ('turn') lands both at once and shows the pair.
+                                    const sides = t.speaker === 'turn' ? [TRUNK_QUERY, TRUNK_RESPONSE]
+                                        : t.speaker === 'user' ? [TRUNK_QUERY]
+                                            : t.speaker === 'tool' ? [TRUNK_TOOL]
+                                                : [TRUNK_RESPONSE];
+                                    return (_jsxs("span", { title: (t.query ?? t.content).slice(0, 200), children: [sides.map((c, j) => (_jsx("span", { style: {
+                                                    position: 'absolute', left: px(s) - GUTTER - 5 + j * 9, top: 13, width: 10, height: 10,
+                                                    borderRadius: 2, transform: 'rotate(45deg)', background: c, display: 'inline-block',
+                                                } }, j))), t.attachments.length > 0 && (_jsxs("span", { style: { position: 'absolute', left: px(s) - GUTTER + (sides.length > 1 ? 17 : 8), top: 11, fontSize: 9.5, color: C.dim }, children: ["\uD83D\uDCCE", t.attachments.length] }))] }, i));
+                                }) })] })), m.spine && (_jsxs("div", { role: "button", tabIndex: 0, onClick: () => onSelect(selAgent === 'spine' ? null : 'spine'), onKeyDown: keyActivate(() => onSelect(selAgent === 'spine' ? null : 'spine')), style: {
+                            position: 'relative', height: ROW_H, display: 'flex', cursor: 'pointer',
+                            borderBottom: `1px solid ${C.hair}`,
+                            background: selAgent === 'spine' ? C.chromeBg : undefined,
+                            boxShadow: selAgent === 'spine' ? `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: "spine" }), _jsx("span", { style: { color: C.dim, fontSize: 10.5, fontFamily: mono }, children: (m.spine.spineCells || m.spine.headerTokens) > 0
+                                            ? `${(m.spine.spineCells || m.spine.headerTokens).toLocaleString()} tokens` : 'seeding…' })] }), _jsx("div", { style: { flex: 1, position: 'relative', overflow: 'hidden' }, children: (() => {
+                                    // The spine as a BAR — alive for the whole run — with a tick
+                                    // wherever it grew (the seed, then each extension).
+                                    const s0 = secOf(m.spine.spineAt ?? m.spine.at);
+                                    const x0 = Math.max(px(s0), GUTTER);
+                                    const x1 = Math.max(px(Math.min(endS, w1)), x0 + 4);
+                                    if (px(s0) > px(w1))
+                                        return null;
+                                    return (_jsxs("span", { title: (m.spine.query ?? '').slice(0, 200), children: [_jsx("span", { style: {
+                                                    position: 'absolute', top: 15, height: 8, left: x0 - GUTTER, width: x1 - x0,
+                                                    background: '#e3e6ea', borderRadius: 4, border: `1px solid ${C.hair}`, display: 'inline-block',
+                                                } }), m.spine.growth.map((g, gi) => {
+                                                const gs = secOf(g.at);
+                                                if (!on(gs))
+                                                    return null;
+                                                return (_jsx("span", { title: `+${g.tokens.toLocaleString()} tokens`, style: { position: 'absolute', left: px(gs) - GUTTER, top: 13, width: 2, height: 12, background: C.text } }, gi));
+                                            }), m.spine.attachments.length > 0 && (_jsxs("span", { style: { position: 'absolute', left: x0 - GUTTER + 6, top: 11, fontSize: 9.5, color: C.dim }, children: ["\uD83D\uDCCE", m.spine.attachments.length] }))] }));
+                                })() })] })), lanes.map((l) => (_jsx(Lane, { m: m, l: l, px: px, on: on, secOf: secOf, nowS: nowS, live: live, selected: selAgent === l.agentId, toolColor: toolColor, onClick: () => onSelect(selAgent === l.agentId ? null : l.agentId), gutter: GUTTER, windowEnd: w1 }, l.agentId)))] })] }));
 }
 const label = {
     fontSize: 10, fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase', color: '#b0b6c2',
@@ -511,8 +624,14 @@ function Lane({ m, l, px, on, secOf, nowS, live, selected, toolColor, onClick, g
     const capL = px(s);
     const capR = px(Math.min(e, windowEnd));
     const running = l.doneAt === null;
-    const color = l.outcome === 'failed' ? C.fail : l.role === 'synth' ? C.agentDark : C.agent;
-    const rgb = l.outcome === 'failed' ? '179,38,30' : l.role === 'synth' ? '23,78,166' : '26,115,232';
+    const color = l.outcome === 'failed' ? C.fail
+        : l.role === 'synth' ? C.agentDark
+            : l.role === 'recon' ? C.recon
+                : C.agent;
+    const rgb = l.outcome === 'failed' ? '179,38,30'
+        : l.role === 'synth' ? '23,78,166'
+            : l.role === 'recon' ? '124,172,248'
+                : '26,115,232';
     const myCalls = m.retrievals.filter((r) => r.agentId === l.agentId);
     const myGuards = m.interventions.filter((iv) => iv.agentId === l.agentId && iv.kind !== 'nudge');
     const stripe = (x0, x1, grey = false) => {
@@ -536,7 +655,7 @@ function Lane({ m, l, px, on, secOf, nowS, live, selected, toolColor, onClick, g
                 : 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',
+            display: 'flex', height: ROW_H, borderTop: `1px solid ${C.hair}`, position: 'relative', cursor: 'pointer',
             background: selected ? C.chromeBg : cancelled ? 'rgba(179,38,30,.05)' : undefined,
             boxShadow: selected ? `inset 3px 0 0 ${C.text}` : undefined,
         }, children: [cancelled && (_jsx("span", { style: {
@@ -806,7 +925,125 @@ function AgentFeed({ m, lane, toolColor, onClose, onJump, nowMs, width, send, ca
         }, 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 } }), 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 }))] }))] })] }));
+                }, 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 && (() => {
+                                // Raw <think> never renders — the report splits into the
+                                // shared reasoning box + what the agent actually said.
+                                const { reasoning, said } = splitThink(lane.report);
+                                return (_jsxs("div", { style: { margin: '6px 0 2px 16px' }, children: [reasoning && _jsx(Reasoning, { text: reasoning, open: expanded.has('report-reasoning'), onToggle: () => toggle('report-reasoning') }), _jsx("div", { style: { lineHeight: 1.5, color: '#3c4043', whiteSpace: 'pre-wrap' }, children: said })] }));
+                            })()] }))] })] }));
+}
+/** One timeline row — session, spine, and every lane share it. The
+ *  connector overlay derives its geometry from this same constant, which is
+ *  what makes curves survive any resize without DOM measurement. */
+const ROW_H = 38;
+/** Trunk marker colors — one per conversation side, same family as the
+ *  lanes: the query is the deep blue everything forks from, the response the
+ *  light one. Tools are grey. */
+const TRUNK_QUERY = '#174ea6';
+const TRUNK_RESPONSE = '#5f8fd9';
+const TRUNK_TOOL = '#9aa0a6';
+/** Split verbatim model text into its reasoning and its said text. The pane
+ *  never renders raw `<think>` markup anywhere — reasoning is shown behind
+ *  {@link Reasoning}. An unclosed block (a cut stream) still splits clean. */
+function splitThink(text) {
+    const parts = text.split(/<think>([\s\S]*?)(?:<\/think>|$)/);
+    return {
+        reasoning: parts.filter((_, k) => k % 2 === 1).join('\n').trim(),
+        said: parts.filter((_, k) => k % 2 === 0).join('').trim(),
+    };
+}
+/** The expandable reasoning box — one look for every surface that carries
+ *  model thinking (trunk turns, agent reports). Collapsed by default. */
+function Reasoning({ text, open, onToggle }) {
+    return (_jsxs("div", { style: { margin: '0 0 4px' }, children: [_jsxs("div", { role: "button", tabIndex: 0, onClick: onToggle, onKeyDown: keyActivate(onToggle), style: { display: 'flex', alignItems: 'baseline', gap: 7, cursor: 'pointer', padding: '2px 0' }, children: [_jsx("span", { style: { color: C.faint, fontSize: 9, width: 9, flex: 'none' }, children: open ? '▾' : '▸' }), _jsx("span", { style: { color: C.dim }, children: "reasoning" })] }), open && (_jsx("div", { style: { whiteSpace: 'pre-wrap', lineHeight: 1.5, color: C.dim, fontFamily: mono, fontSize: 10.5, maxHeight: 240, overflowY: 'auto', margin: '2px 0 0 16px' }, children: text }))] }));
+}
+/** The spine's feed — the run's root: the user's instruction verbatim
+ *  (only when the harness declared where it lives — see
+ *  {@link RunFraming.instruction}), then the compiled header that seeded
+ *  position 0. This is where a prompt survives when a run fails. */
+function SpineFeed({ m, onClose, width, mediaUrl, toolColor }) {
+    // Substance visible by default — only the raw bytes stay behind a click.
+    const [headerOpen, setHeaderOpen] = useState(true);
+    const [compiledOpen, setCompiledOpen] = useState(false);
+    const k = m.spine;
+    if (!k)
+        return null;
+    return (_jsxs("div", { style: {
+            width, flex: 'none', borderLeft: '1px solid #d9dce1', display: 'flex',
+            flexDirection: 'column', minHeight: 0, background: C.panelBg,
+        }, 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: [_jsx("span", { style: { fontFamily: mono, fontWeight: 600, fontSize: 11 }, children: "spine" }), _jsx("span", { style: chip, children: "shared agent memory" }), k.inherited !== undefined && (_jsx("span", { style: chip, children: k.inherited > 0 ? `warm · ${k.inherited.toLocaleString()} tok from trunk` : 'cold start' })), k.headerTokens > 0 && (() => {
+                        const nCtx = m.pressure.length > 0 ? m.pressure[m.pressure.length - 1].nCtx : 0;
+                        const pct = nCtx > 0 ? Math.round((k.headerTokens / nCtx) * 1000) / 10 : null;
+                        return _jsxs("span", { style: chip, children: [k.headerTokens.toLocaleString(), " tok", pct !== null ? ` · ${pct}% ctx` : ''] });
+                    })(), _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: [k.query !== null && (_jsx("div", { style: feedItem, children: _jsxs("div", { style: { background: 'rgba(26,115,232,.05)', borderRadius: 4, padding: '6px 9px' }, children: [_jsxs("div", { style: { display: 'flex', gap: 7, alignItems: 'baseline', marginBottom: 3 }, children: [_jsx("b", { style: { fontSize: 11, color: TRUNK_QUERY }, children: "query" }), _jsx("span", { style: { fontSize: 10.5, color: C.faint }, children: "the user's instruction, as submitted" })] }), k.attachments.length > 0 && (_jsx("div", { style: { display: 'flex', gap: 6, flexWrap: 'wrap', margin: '2px 0 6px' }, children: k.attachments.map((a, j) => mediaUrl ? (_jsx("img", { src: mediaUrl(a.digest), alt: a.digest.slice(0, 12), title: `${a.digest.slice(0, 19)}\u2026`, style: { height: 72, maxWidth: 160, objectFit: 'cover', borderRadius: 4, border: `1px solid ${C.border}` } }, j)) : (_jsxs("span", { style: chip, title: a.digest, children: [a.digest.slice(0, 19), "\\u2026"] }, j))) })), _jsx("div", { style: { whiteSpace: 'pre-wrap', lineHeight: 1.5, color: '#3c4043', fontSize: 11.5, maxHeight: 200, overflowY: 'auto' }, children: k.query })] }) })), (k.tools && k.tools.length > 0) || k.systemText || k.headerText ? (_jsxs("div", { style: { borderBottom: `1px solid ${C.border}`, padding: '4px 12px 6px' }, children: [_jsxs("div", { role: "button", tabIndex: 0, onClick: () => setHeaderOpen((v) => !v), onKeyDown: keyActivate(() => setHeaderOpen((v) => !v)), style: { display: 'flex', alignItems: 'baseline', gap: 7, cursor: 'pointer', padding: '2px 0' }, title: "the shared header prefilled at position 0 \u2014 every agent inherits it via fork", children: [_jsx("span", { style: { color: C.faint, fontSize: 9, width: 9, flex: 'none' }, children: headerOpen ? '▾' : '▸' }), _jsx("span", { style: { color: C.dim }, children: "system + tools" })] }), headerOpen && (_jsxs("div", { style: { margin: '4px 0 2px 16px', display: 'flex', flexDirection: 'column', gap: 8 }, children: [k.tools && k.tools.length > 0 && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: k.tools.map((t2) => (_jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'baseline' }, children: [_jsx("span", { style: { flex: 'none', transform: 'translateY(2px)' }, children: _jsx(Badge, { color: toolColor(t2.name), letter: letterOf(t2.name), size: 14 }) }), _jsx("b", { style: { fontFamily: mono, fontSize: 10.5, flex: 'none' }, children: t2.name }), _jsx("span", { style: { color: C.dim, fontSize: 11, lineHeight: 1.4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }, title: t2.description, children: t2.description })] }, t2.name))) })), k.systemText && (_jsxs("div", { children: [_jsx("div", { style: { color: C.faint, fontSize: 10, marginBottom: 2 }, children: "system" }), _jsx("div", { style: { lineHeight: 1.5, color: '#3c4043', whiteSpace: 'pre-wrap', fontSize: 11.5, maxHeight: 220, overflowY: 'auto' }, children: k.systemText })] })), k.headerText && (_jsxs("div", { children: [_jsxs("div", { role: "button", tabIndex: 0, onClick: () => setCompiledOpen((v) => !v), onKeyDown: keyActivate(() => setCompiledOpen((v) => !v)), style: { display: 'flex', alignItems: 'baseline', gap: 7, cursor: 'pointer', padding: '2px 0' }, title: "the exact rendered template \u2014 what position 0 actually holds", children: [_jsx("span", { style: { color: C.faint, fontSize: 9, width: 9, flex: 'none' }, children: compiledOpen ? '▾' : '▸' }), _jsx("span", { style: { color: C.dim }, children: "compiled" })] }), compiledOpen && _jsx(JsonBlock, { text: k.headerText, raw: true })] }))] })), (() => {
+                                // Full accrual: what every fork inherited for free, minus the
+                                // one shared copy actually prefilled this run. Correct for
+                                // chain extensions, warm trunk inheritance, and recursive
+                                // forks — parallel degenerates to header × (n − 1).
+                                // Only lanes that actually forked the spine count as sharers —
+                                // the same attribution the connectors draw. A pre-spine lane
+                                // (the planner) never inherited it and never shows here.
+                                // Saved follows the cache-read convention: every token an agent
+                                // forked instead of prefilling counts. The spine's own build is
+                                // the cache write — never netted out of the headline.
+                                const sharers = [...m.lanes.values()].filter((l2) => l2.inherited !== undefined);
+                                const saved = sharers.reduce((n2, l2) => n2 + (l2.inherited ?? 0), 0);
+                                if (saved <= 0 && sharers.length < 2)
+                                    return null;
+                                return (_jsxs("div", { style: { padding: '5px 0 1px 16px', fontSize: 11, color: C.dim }, children: [sharers.length >= 2 && (_jsxs(_Fragment, { children: ["shared by ", _jsx("span", { style: { fontFamily: mono }, children: sharers.length }), " agents", saved > 0 ? ' · ' : ''] })), saved > 0 && (_jsxs(_Fragment, { children: ["tokens saved ", _jsx("span", { style: { fontFamily: mono }, children: saved.toLocaleString() })] }))] }));
+                            })()] })) : null] })] }));
+}
+/** The trunk's feed — the same panel grammar as {@link AgentFeed}, for the
+ *  session's own conversation: each `warmDelta` turn verbatim, its KV cost,
+ *  and the media that entered with it (thumbnails when the bridge exposes a
+ *  content resolver, digest chips otherwise). */
+function TrunkFeed({ m, onClose, width, mediaUrl }) {
+    const [thinkOpen, setThinkOpen] = useState(() => new Set());
+    // Responses default COLLAPSED — stats stay visible, the body (reasoning +
+    // text) expands on click. A committed exchange's response half can be a
+    // whole brief; the feed must not pay its render until asked.
+    const [respOpen, setRespOpen] = useState(() => new Set());
+    const toggleResp = (i) => {
+        setRespOpen((prev) => {
+            const next = new Set(prev);
+            if (next.has(i))
+                next.delete(i);
+            else
+                next.add(i);
+            return next;
+        });
+    };
+    const toggleThink = (i) => {
+        setThinkOpen((prev) => {
+            const next = new Set(prev);
+            if (next.has(i))
+                next.delete(i);
+            else
+                next.add(i);
+            return next;
+        });
+    };
+    return (_jsxs("div", { style: {
+            width, flex: 'none', borderLeft: '1px solid #d9dce1', display: 'flex',
+            flexDirection: 'column', minHeight: 0, background: C.panelBg,
+        }, 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: [_jsx("span", { style: { fontFamily: mono, fontWeight: 600, fontSize: 11 }, children: "session" }), _jsx("span", { style: chip, children: "the conversation" }), _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" })] }), _jsx("div", { style: { overflowY: 'auto', flex: 1, fontSize: 11, paddingBottom: 8 }, children: m.trunk.map((t, i) => {
+                    // Query and response render as their OWN blocks — a committed
+                    // exchange (`speaker: 'turn'`) carries both halves structurally,
+                    // and single-sided deltas carry one. Raw <think> never renders:
+                    // the response side splits into the shared reasoning box.
+                    const isTurn = t.speaker === 'turn';
+                    const q = isTurn ? (t.query ?? '') : t.speaker === 'user' ? t.content : '';
+                    const rRaw = isTurn ? (t.response ?? '') : (t.speaker === 'assistant' || t.speaker === 'tool' || t.speaker === undefined) ? t.content : '';
+                    const { reasoning, said } = splitThink(rRaw);
+                    const meta = (_jsxs("span", { style: { fontFamily: mono, fontSize: 10, color: C.faint }, children: [t.cells.toLocaleString(), " tokens"] }));
+                    return (_jsxs("div", { style: feedItem, children: [(q || t.attachments.length > 0) && (_jsxs("div", { style: { background: 'rgba(26,115,232,.05)', borderRadius: 4, padding: '6px 9px', margin: '0 0 6px' }, children: [_jsxs("div", { style: { display: 'flex', gap: 7, alignItems: 'baseline', marginBottom: 3 }, children: [_jsx("b", { style: { fontSize: 11, color: C.agentDark }, children: "query" }), meta] }), t.attachments.length > 0 && (_jsx("div", { style: { display: 'flex', gap: 6, flexWrap: 'wrap', margin: '2px 0 6px' }, children: t.attachments.map((a, j) => mediaUrl ? (_jsx("img", { src: mediaUrl(a.digest), alt: a.mediaType ?? a.digest.slice(0, 12), title: `${a.mediaType ?? 'media'} · ${a.digest.slice(0, 19)}…`, style: { height: 72, maxWidth: 160, objectFit: 'cover', borderRadius: 4, border: `1px solid ${C.border}` } }, j)) : (_jsxs("span", { style: chip, title: a.digest, children: [a.mediaType ?? 'media', " \u00B7 ", a.digest.slice(0, 19), "\u2026"] }, j))) })), q && (_jsx("div", { style: { whiteSpace: 'pre-wrap', lineHeight: 1.5, color: '#3c4043', fontFamily: mono, fontSize: 10.5, maxHeight: 200, overflowY: 'auto' }, children: q }))] })), rRaw && (_jsxs("div", { children: [_jsxs("div", { role: "button", tabIndex: 0, onClick: () => toggleResp(i), onKeyDown: keyActivate(() => toggleResp(i)), style: { display: 'flex', gap: 7, alignItems: 'baseline', marginBottom: 3, cursor: 'pointer' }, children: [_jsx("span", { style: { color: C.faint, fontSize: 9, width: 9, flex: 'none' }, children: respOpen.has(i) ? '\u25be' : '\u25b8' }), _jsx("b", { style: { fontSize: 11, color: TRUNK_RESPONSE }, children: t.speaker === 'tool' ? 'tool' : 'response' }), !q && meta, (t.agentTokens ?? 0) > 0 && (_jsxs("span", { style: { fontFamily: mono, fontSize: 10, color: C.faint }, children: [t.agentTokens.toLocaleString(), " tokens"] })), t.wallMs !== undefined && (_jsx("span", { style: { fontFamily: mono, fontSize: 10, color: C.faint }, children: fmtS(t.wallMs / 1000) }))] }), respOpen.has(i) && (_jsxs("div", { style: { margin: '0 0 0 16px' }, children: [reasoning && _jsx(Reasoning, { text: reasoning, open: thinkOpen.has(i), onToggle: () => toggleThink(i) }), said && (_jsx("div", { style: { whiteSpace: 'pre-wrap', lineHeight: 1.5, color: '#3c4043', fontFamily: mono, fontSize: 10.5, maxHeight: 300, overflowY: 'auto' }, children: said }))] }))] }))] }, i));
+                }) })] }));
 }
 const feedItem = { padding: '7px 12px', borderTop: '1px solid #eceef1' };
 const chip = {
@@ -895,69 +1132,19 @@ const cutline = {
     borderTop: '1px dashed #dadce0', marginTop: 6,
 };
 // ═══ Settings: category nav → harness (master list + detail) · ability pages ═══
-/** What the detail panel knows about each well-known harness key: what it is,
- *  and how to change it. Prose is product copy — one clause per sentence. */
-/** Config path → the ConfigOrigin field carrying its rung, so the
- *  exception note (env/cli overrode the manifest) fires for read-only rows
- *  too — full-rung provenance display stays demoted by design. */
-const ORIGIN_KEYS = {
-    'model.path': 'modelPath',
-    'model.reranker': 'reranker',
-    'model.nCtx': 'nCtx',
-    'model.gpu': 'gpu',
-    'sources.outputDir': 'outputDir',
-    'defaults.reasoningMode': 'reasoningMode',
-};
-const SETTING_META = {
-    'defaults.effort': {
-        desc: 'Run effort preset — agent budget, planner breadth, recovery cap.',
-        how: 'Change it here; it applies to your next run and is remembered locally. The committed default lives in harness.yml → defaults.effort.',
-    },
-    'defaults.reasoningMode': {
-        desc: 'flat runs one research wave over the plan; deep lets agents recurse into sub-plans.',
-        how: 'Change it here; it applies to your next run.',
-    },
-    'sources.outputDir': {
-        desc: 'Where per-query run-dirs and the session trace are written. Empty means where the harness started.',
-        how: 'Edit harness.yml → sources.outputDir; the next run picks it up.',
-    },
-    'defaults.maxTurns': {
-        desc: 'Turn cap per agent run.',
-        how: 'Edit harness.yml → defaults.maxTurns; the next run picks it up.',
-    },
-    'model.path': {
-        desc: 'Filesystem path or catalog id of the reasoning model.',
-        how: 'Saved changes load at the next start; this run keeps the model it booted with.',
-    },
-    'model.reranker': {
-        desc: 'The admission judge — a pointwise yes/no reranker that gates what enters the context.',
-        how: 'Saved changes load at the next start.',
-    },
-    'model.nCtx': {
-        desc: 'Context window of the one shared llama_context — every branch leases cells out of this budget.',
-        how: 'Edit harness.yml → model.llm.context, then restart.',
-    },
-    'model.branches': {
-        desc: 'Concurrent sequences — createContext takes it as nSeqMax. Each sequence holds its own KV lease.',
-        how: 'Edit harness.yml → model.llm.branches, then restart.',
-    },
-    'model.kvCache': {
-        desc: 'KV cache type for the attention layers — raise for precision, lower for memory.',
-        how: 'Edit harness.yml → model.llm.kvCache, then restart.',
-    },
-    'model.gpu': {
-        desc: 'Which native backend the process loaded — picked once at start. A configured backend fails loud if unavailable, never silently CPU.',
-        how: 'A deploy choice: set harness.yml → model.llm.gpu (or LLOYAL_GPU), then restart.',
-    },
-};
 const TIER_NOTE = {
     session: 'applies to the next run',
     reload: 'saved now — a restart loads it',
     boot: 'fixed for this run',
 };
-function Settings({ m, controls, send }) {
+function Settings({ m, config, send }) {
     const [cat, setCat] = useState('harness');
-    const [selKey, setSelKey] = useState(controls[0]?.key ?? 'model.path');
+    // With a table the rows are the application's own keys; without one, whatever config the harness announced.
+    const rows = config
+        ? configRows(config)
+        : liveConfigKeys(m.config).map((key) => ({ key, applies: 'session', values: null }));
+    // Open on the first thing that can be changed now, else the first that can be changed at all.
+    const [selKey, setSelKey] = useState((rows.find((r) => r.values && r.applies === 'session') ?? rows.find((r) => r.values) ?? rows[0])?.key ?? '');
     // The nav lists INSTALLED abilities (`abilities:state` descriptors) — not
     // merely configured ones, or the page you'd use to configure an ability
     // could never appear. Harnesses that don't emit descriptors degrade to the
@@ -977,38 +1164,41 @@ function Settings({ m, controls, send }) {
             borderLeft: on ? `3px solid ${C.text}` : '3px solid transparent',
         }, children: name }, name));
     return (_jsxs("div", { style: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsxs("div", { style: { width: 148, flex: 'none', borderRight: '1px solid #d9dce1', paddingTop: 10, background: C.panelBg, overflowY: 'auto' }, children: [navItem('harness', cat === 'harness'), abilities.length > 0 && _jsx("div", { style: { ...label, padding: '12px 16px 3px' }, children: "abilities" }), abilities.map((a) => navItem(a, cat === a))] }), cat === 'harness'
-                ? _jsx(HarnessSettings, { m: m, controls: controls, send: send, selKey: selKey, onSelect: setSelKey })
+                ? _jsx(HarnessSettings, { m: m, rows: rows, tiered: config !== undefined, send: send, selKey: selKey, onSelect: setSelKey })
                 : _jsx(AbilityPage, { m: m, name: cat, send: send })] }));
 }
-function HarnessSettings({ m, controls, send, selKey, onSelect }) {
+function HarnessSettings({ m, rows, tiered, send, selKey, onSelect }) {
     const config = m.config;
-    const byTier = (tier) => Object.entries(KEY_TIERS).filter(([, t]) => t === tier).map(([k]) => k);
-    const controlFor = (key) => controls.find((c) => c.key === key);
-    const row = (key) => {
-        const ctl = controlFor(key);
-        const value = ctl ? ctl.read(config) : readConfigPath(config, key);
-        if (value === undefined && !ctl)
-            return null; // skip-if-absent: basic has no defaults block
+    const byTier = (tier) => rows.filter((r) => r.applies === tier);
+    const row = (r) => {
+        const { key } = r;
+        const raw = readConfigPath(config, key); // a declared key the harness never set is still a row: its value is —
+        // A value that is itself a table (an app's own structured key) is shown as it is written.
+        const value = raw === undefined || raw === null ? undefined : typeof raw === 'object' ? JSON.stringify(raw) : String(raw);
         const selected = selKey === key;
+        // Choosing the value already in force is a selection, never a command: on a reload row the command would
+        // end the session to apply nothing.
+        const choose = (v) => { onSelect(key); if (v === value)
+            return; const command = configCommand(r, v); if (command)
+            send(command); };
         return (_jsxs("div", { onClick: () => onSelect(key), role: "button", tabIndex: 0, onKeyDown: keyActivate(() => onSelect(key)), style: {
                 display: 'flex', alignItems: 'center', gap: 8, padding: '5px 14px 5px 11px', minHeight: 36,
                 borderLeft: selected ? `3px solid ${C.text}` : '3px solid transparent', cursor: 'pointer',
                 background: selected ? C.chromeBg : undefined,
-            }, children: [_jsx("span", { style: { fontFamily: mono, fontSize: 11.5, fontWeight: 500 }, children: key }), _jsx("span", { style: { flex: 1 } }), ctl?.note && _jsx("span", { style: { color: C.faint, fontSize: 10.5, marginRight: 10, flex: 'none' }, children: ctl.note }), ctl ? (_jsx("span", { style: { display: 'flex', border: '1px solid #dadce0', borderRadius: 4, overflow: 'hidden', width: 276, flex: 'none' }, children: ctl.values.map((v) => (_jsx("span", { onClick: (e) => { e.stopPropagation(); onSelect(key); send({ type: ctl.command, [ctl.field]: v }); }, role: "button", tabIndex: 0, "aria-pressed": v === value, onKeyDown: keyActivate(() => { onSelect(key); send({ type: ctl.command, [ctl.field]: v }); }), style: {
+            }, children: [_jsx("span", { style: { fontFamily: mono, fontSize: 11.5, fontWeight: 500 }, children: key }), _jsx("span", { style: { flex: 1 } }), r.values ? (_jsx("span", { style: { display: 'flex', border: '1px solid #dadce0', borderRadius: 4, overflow: 'hidden', width: 276, flex: 'none' }, children: r.values.map((v) => (_jsx("span", { onClick: (e) => { e.stopPropagation(); choose(v); }, role: "button", tabIndex: 0, "aria-pressed": v === value, onKeyDown: keyActivate(() => choose(v)), style: {
                             flex: 1, fontSize: 11, padding: '5px 0', textAlign: 'center', cursor: 'pointer',
                             background: v === value ? C.text : '#fff', color: v === value ? '#fff' : C.dim,
                             fontWeight: v === value ? 500 : 400, borderLeft: '1px solid #e8eaed',
-                        }, children: v }, v))) })) : (_jsxs("span", { style: { fontFamily: mono, fontSize: 11, color: C.dim, maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: [value === undefined || value === null || value === '' ? '—' : String(value), key === 'model.branches' && _jsx("span", { style: { color: C.faint }, children: " \u2192 nSeqMax" })] }))] }, key));
+                        }, children: v }, v))) })) : (_jsxs("span", { style: { fontFamily: mono, fontSize: 11, color: C.dim, maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: [value === undefined || value === '' ? '—' : value, key === 'model.branches' && _jsx("span", { style: { color: C.faint }, children: " \u2192 nSeqMax" })] }))] }, key));
     };
     const head = (t) => (_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', gap: 8, padding: '13px 14px 3px' }, children: [_jsx("span", { style: label, children: t }), _jsx("span", { style: { color: C.faint, fontSize: 10.5 }, children: TIER_NOTE[t] })] }));
-    const meta = SETTING_META[selKey];
-    const tier = KEY_TIERS[selKey];
+    const selected = rows.find((r) => r.key === selKey);
+    const tier = tiered ? selected?.applies : undefined;
     // The exception case, surfaced exactly when true: something outside the
-    // manifest set this value. No badges anywhere else.
-    const originKey = controlFor(selKey)?.originKey ?? ORIGIN_KEYS[selKey];
-    const origin = originKey && m.origin ? m.origin[originKey] : undefined;
+    // manifest set this value. No badges anywhere else. Provenance is keyed by the config path itself.
+    const origin = m.origin ? m.origin[selKey] : undefined;
     const overridden = origin === 'env' || origin === 'cli';
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { flex: 1, minWidth: 0, overflowY: 'auto', paddingBottom: 10 }, children: [byTier('session').length > 0 && head('session'), byTier('session').map(row), byTier('reload').length > 0 && head('reload'), byTier('reload').map(row), byTier('boot').length > 0 && head('boot'), byTier('boot').map(row)] }), _jsxs("div", { style: { width: 400, flex: 'none', borderLeft: '1px solid #d9dce1', overflowY: 'auto', padding: '16px 20px', background: C.panelBg }, children: [meta ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontFamily: mono, fontSize: 13, fontWeight: 500 }, children: selKey }), tier && _jsx("span", { style: chip, children: TIER_NOTE[tier] })] }), _jsx("p", { style: { maxWidth: 340, margin: '8px 0 0', fontSize: 12, lineHeight: 1.55, color: '#3c4043' }, children: meta.desc }), _jsx("div", { style: { ...label, marginTop: 16 }, children: "changing it" }), _jsx("p", { style: { maxWidth: 340, margin: '6px 0 0', fontSize: 12, lineHeight: 1.55, color: '#3c4043' }, children: meta.how }), overridden && (_jsxs("div", { style: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { flex: 1, minWidth: 0, overflowY: 'auto', paddingBottom: 10 }, children: tiered ? ['session', 'reload', 'boot'].map((t) => byTier(t).length > 0 && (_jsxs("div", { children: [head(t), byTier(t).map(row)] }, t))) : rows.map(row) }), _jsxs("div", { style: { width: 400, flex: 'none', borderLeft: '1px solid #d9dce1', overflowY: 'auto', padding: '16px 20px', background: C.panelBg }, children: [selected ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontFamily: mono, fontSize: 13, fontWeight: 500 }, children: selKey }), tier && _jsx("span", { style: chip, children: TIER_NOTE[tier] })] }), selected.describe && (_jsx("p", { style: { maxWidth: 340, margin: '8px 0 0', fontSize: 12, lineHeight: 1.55, color: '#3c4043' }, children: selected.describe })), tiered && (_jsxs(_Fragment, { children: [_jsx("div", { style: { ...label, marginTop: 16 }, children: "changing it" }), _jsx("p", { style: { maxWidth: 340, margin: '6px 0 0', fontSize: 12, lineHeight: 1.55, color: '#3c4043' }, children: changing(selected) })] })), overridden && (_jsxs("div", { style: {
                                     display: 'flex', alignItems: 'baseline', gap: 8, padding: '8px 11px', marginTop: 14,
                                     background: C.warnBg, border: `1px solid ${C.warnBorder}`, borderRadius: 4, fontSize: 11, maxWidth: 360,
                                 }, children: [_jsx("b", { children: "currently overridden" }), _jsxs("span", { style: { color: C.dim }, children: [origin === 'env' ? 'an environment variable' : 'a command-line flag', " is overriding the manifest \u2014 the value shown is the one in effect."] })] }))] })) : (_jsx("span", { style: { color: C.faint }, children: "select a setting" })), m.lastSavedTo !== undefined && (_jsx("div", { style: { marginTop: 18, fontFamily: mono, fontSize: 10.5, color: C.dim }, children: m.lastSavedTo === null