@lloyal-labs/dev-tools 0.1.0

package/dist/react.js

@@ -0,0 +1,899 @@
+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.
+ *
+ * Mounted ONCE beside the app's view; 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
+ * edge, wait stripes CUT into capsules, letter badges with a collision rule)
+ * are cheaper to own than to fight a library for.
+ *
+ * Everything shown is a recorded event field; absence renders as absence.
+ */
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useStore } from 'zustand';
+import { pressureStrip, pressurePercent, readConfigPath, lanePpl, isLive, KEY_TIERS, } 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',
+    warn: '#9a6700', warnBg: '#fef7e0', warnBorder: '#f9d67a',
+};
+const HOST_CPU = '#00897b';
+const TOOL_PALETTE = ['#e8710a', '#8430ce', '#00897b', '#d01884', '#827717', '#0097a7'];
+const mono = 'ui-monospace, "SF Mono", Menlo, Consolas, monospace';
+/** Per-tool color, assigned first-seen — stable within a run. */
+function useToolColors() {
+    const map = useRef(new Map());
+    return (name) => {
+        if (!map.current.has(name)) {
+            map.current.set(name, TOOL_PALETTE[map.current.size % TOOL_PALETTE.length]);
+        }
+        return map.current.get(name);
+    };
+}
+const letterOf = (name) => (name[0] || '?').toUpperCase();
+/** Enter/Space activates a clickable — pairs with role="button" tabIndex={0}. */
+const keyActivate = (fn) => (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        fn();
+    }
+};
+/** One cell of the metric row: heading + magnitude on top, a min-max
+ *  auto-scaled area spark filling the cell below — the shape carries the
+ *  trend, the number carries the truth the auto-zoom hides. */
+function MetricCell({ heading, value, values, color, title, last = false }) {
+    const gradId = React.useId();
+    let spark = null;
+    if (values.length >= 2) {
+        let min = Infinity, max = -Infinity;
+        for (const v of values) {
+            if (v < min)
+                min = v;
+            if (v > max)
+                max = v;
+        }
+        const spanV = Math.max(max - min, 1e-6);
+        const pts = values.map((v, i) => `${((i / (values.length - 1)) * 100).toFixed(2)},${(26 - ((v - min) / spanV) * 22).toFixed(2)}`).join(' ');
+        spark = (_jsxs("svg", { viewBox: "0 0 100 28", preserveAspectRatio: "none", style: { width: '100%', height: 28, display: 'block' }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.35" }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0.04" })] }) }), _jsx("polygon", { fill: `url(#${gradId})`, stroke: "none", points: `0,28 ${pts} 100,28` }), _jsx("polyline", { fill: "none", stroke: color, strokeWidth: "1.4", vectorEffect: "non-scaling-stroke", strokeLinejoin: "round", points: pts })] }));
+    }
+    return (_jsxs("div", { title: title, style: {
+            flex: 1, minWidth: 0, padding: '5px 12px 0',
+            borderRight: last ? undefined : `1px solid ${C.hair}`,
+            display: 'flex', flexDirection: 'column',
+        }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }, children: [_jsx("span", { style: label, children: heading }), _jsx("span", { style: { fontFamily: mono, fontSize: 10.5, color: C.dim, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: value })] }), _jsx("div", { style: { flex: 1, display: 'flex', alignItems: 'flex-end' }, children: spark })] }));
+}
+/** Bars over reranker scores: log-odds go NEGATIVE, so score/max explodes
+ *  past 100% when the max is negative. Min-max into [0.06, 1] — bars only
+ *  ever rank WITHIN one retrieval, so the scale is local by design. */
+function relScale(scores) {
+    const min = Math.min(...scores);
+    const max = Math.max(...scores);
+    const span = max - min;
+    return (v) => (span <= 0 ? 1 : 0.06 + 0.94 * ((v - min) / span));
+}
+/** The human argument out of a tool call's JSON args — the query or url the
+ *  agent actually wrote, not the envelope around it. */
+function argSummary(args) {
+    try {
+        const a = JSON.parse(args);
+        const v = a.query ?? a.url ?? Object.values(a).find((x) => typeof x === 'string');
+        return typeof v === 'string' ? v : args;
+    }
+    catch {
+        return args;
+    }
+}
+/** The launchable page out of a call's args, when the tool took one. */
+function argUrl(args) {
+    try {
+        const a = JSON.parse(args);
+        return typeof a.url === 'string' && /^https?:\/\//.test(a.url) ? a.url : null;
+    }
+    catch {
+        return null;
+    }
+}
+/** ↗ beside a fetched page — opens it in a new tab without toggling the row. */
+function LinkOut({ url }) {
+    return (_jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", title: url, onClick: (e) => e.stopPropagation(), style: { color: C.agent, textDecoration: 'none', flex: 'none', fontSize: 11, lineHeight: 1 }, children: "\u2197" }));
+}
+/** One tokenizer pass over pretty-printed JSON — keys, strings, numbers,
+ *  and literals get the pane's own palette; everything else stays dim. */
+const JSON_TOKEN = /("(?:[^"\\]|\\.)*")(\s*:)?|(-?\d+\.?\d*(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b)/g;
+function highlightJson(src) {
+    const out = [];
+    let last = 0;
+    let i = 0;
+    let match;
+    JSON_TOKEN.lastIndex = 0;
+    while ((match = JSON_TOKEN.exec(src)) !== null) {
+        if (match.index > last)
+            out.push(_jsx("span", { style: { color: C.dim }, children: src.slice(last, match.index) }, i++));
+        if (match[1] !== undefined) {
+            const isKey = match[2] !== undefined;
+            out.push(_jsx("span", { style: { color: isKey ? '#8430ce' : C.ok }, children: match[1] }, i++));
+            if (isKey)
+                out.push(_jsx("span", { style: { color: C.dim }, children: match[2] }, i++));
+        }
+        else if (match[3] !== undefined) {
+            out.push(_jsx("span", { style: { color: C.agent }, children: match[3] }, i++));
+        }
+        else {
+            out.push(_jsx("span", { style: { color: C.warn }, children: match[4] }, i++));
+        }
+        last = JSON_TOKEN.lastIndex;
+    }
+    if (last < src.length)
+        out.push(_jsx("span", { style: { color: C.dim }, children: src.slice(last) }, i++));
+    return out;
+}
+/** 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 }) {
+    const [copied, setCopied] = useState(false);
+    const { pretty, body } = useMemo(() => {
+        try {
+            const p = JSON.stringify(JSON.parse(text), null, 2);
+            return { pretty: p, body: highlightJson(p) };
+        }
+        catch {
+            return { pretty: text, body: null };
+        }
+    }, [text]);
+    const copy = () => {
+        navigator.clipboard.writeText(pretty).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1200); }, () => { });
+    };
+    return (_jsxs("div", { style: { position: 'relative', margin: '4px 0' }, children: [_jsx("span", { onClick: copy, style: {
+                    position: 'absolute', top: 5, right: 9, zIndex: 1, cursor: 'pointer',
+                    fontSize: 9.5, color: copied ? C.ok : C.dim, background: '#f8f9fa',
+                    border: `1px solid ${C.border}`, borderRadius: 3, padding: '1px 6px',
+                }, children: copied ? 'copied' : 'copy' }), _jsx("pre", { style: {
+                    maxHeight: 240, overflow: 'auto', margin: 0, padding: '8px 10px',
+                    background: '#f8f9fa', border: `1px solid ${C.border}`, borderRadius: 4,
+                    fontFamily: mono, fontSize: 10.5, lineHeight: 1.55,
+                    whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+                }, children: body ?? pretty })] }));
+}
+function resultRows(parsed) {
+    const arr = Array.isArray(parsed) ? parsed
+        : parsed && typeof parsed === 'object'
+            ? (Array.isArray(parsed.results) ? parsed.results
+                : Array.isArray(parsed.hits) ? parsed.hits
+                    : null)
+            : null;
+    if (!arr || arr.length === 0)
+        return null;
+    const rows = [];
+    for (const o of arr) {
+        if (!o || typeof o !== 'object')
+            return null;
+        const r = o;
+        const head = r.title ?? r.heading;
+        if (typeof head !== 'string')
+            return null;
+        rows.push({
+            head,
+            sub: typeof r.url === 'string' ? r.url : typeof r.file === 'string' ? r.file : undefined,
+            body: typeof r.snippet === 'string' ? r.snippet : typeof r.text === 'string' ? r.text : undefined,
+            ...(typeof r.score === 'number' ? { score: r.score } : {}),
+        });
+    }
+    return rows;
+}
+const fmtS = (s) => s >= 60 ? `${Math.floor(s / 60)}m${String(Math.round(s % 60)).padStart(2, '0')}s` : `${s.toFixed(1)}s`;
+function runEndS(m) {
+    // The answer can land AFTER the last lane closes (synthesis emits it at
+    // the very end) — the recorded run end wins over lane completions.
+    let end = m.runEndedAt ?? 0;
+    for (const l of m.lanes.values()) {
+        if (l.doneAt !== null)
+            end = Math.max(end, l.doneAt);
+    }
+    return m.runStartAt === null ? 0 : Math.max(0, (end - m.runStartAt) / 1000);
+}
+// ═══════════════════════════════════════════════════════════════
+export function DevPane({ bridge, controls = [], title }) {
+    // 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 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.
+    if (!m.dev)
+        return 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');
+        // iOS-style badge: always the one red, meaning carried by the glyph —
+        // ? = the planner waits on the user, ! = an agent failed, n = agents live.
+        const badge = m.clarifying
+            ? '?'
+            : liveCount > 0 ? String(liveCount)
+                : failed ? '!' : 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" })] })] }));
+    }
+    return _jsx(Pane, { store: store, m: m, rev: rev, controls: controls, title: title, onClose: () => setOpen(false) });
+}
+// ═══ the docked pane ═══
+function Pane({ store, m, rev, controls, title, onClose }) {
+    const [tab, setTab] = useState('timeline');
+    const [selAgent, setSelAgent] = useState(null);
+    const [feedW, setFeedW] = useState(feedWidthPref);
+    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.
+    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;
+        };
+    }, []);
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            if (selAgent !== null)
+                setSelAgent(null);
+            else
+                onClose();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [selAgent, onClose]);
+    const live = isLive(m);
+    const lanes = [...m.lanes.values()];
+    const done = lanes.filter((l) => l.doneAt !== null).length;
+    const toolsSeen = [...new Set(m.retrievals.map((r) => r.tool))];
+    const tabStyle = (on) => ({
+        padding: '0 13px', display: 'flex', alignItems: 'center', gap: 6, fontSize: 12,
+        color: on ? C.text : C.dim, borderRight: `1px solid ${C.border}`, cursor: 'pointer',
+        background: on ? '#fff' : 'transparent', fontWeight: on ? 500 : 400,
+        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)',
+            background: '#fff', borderTop: '1px solid #bdc1c6', display: 'flex',
+            flexDirection: 'column', zIndex: 50, 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) => {
+                        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: {
+                    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
+                                ? 'no run yet'
+                                : `run 0:00 – ${fmtS(live ? (performance.now() - m.runStartAt) / 1000 : runEndS(m))} · ${lanes.length} agents (${done} done) · ${m.retrievals.length} tool calls`, title ? ` · ${title}` : ''] }), _jsx("span", { style: { flex: 1 } }), _jsxs("span", { style: { color: C.faint }, children: [tab === 'timeline' && 'click a lane or badge → detail · esc closes · drag pans (detaches follow) · double-click re-follows', tab === 'sources' && 'what entered the context — every number is a recorded event field', tab === 'settings' && 'session-tier controls apply next run · boot rows are fixed for this run'] })] })] }));
+}
+// ═══ shared atoms ═══
+function Badge({ color, letter, size = 18, hollow = false, title }) {
+    return (_jsx("span", { title: title, style: {
+            width: size, height: size, borderRadius: '50%', flex: 'none',
+            display: 'inline-grid', placeItems: 'center',
+            background: hollow ? '#fff' : color,
+            color: hollow ? color : '#fff',
+            border: hollow ? `2px solid ${color}` : '2px solid #fff',
+            boxShadow: '0 1px 2px rgba(0,0,0,.18)',
+            fontSize: size * 0.53, fontWeight: 700, fontFamily: 'system-ui, sans-serif',
+        }, children: letter }));
+}
+// ═══ Timeline ═══
+const SPAN_LIVE = 75; // seconds visible while following
+function Timeline({ m, rev, store, selAgent, onSelect, toolColor }) {
+    const [follow, setFollow] = useState(true);
+    const [panWindow, setPanWindow] = useState(null);
+    const trackRef = useRef(null);
+    // Observed, not read-at-render: a completed run stops repainting, so a
+    // layout change (the detail pane mounting) would leave a render-time
+    // measurement stale forever.
+    const [trackWidth, setTrackWidth] = useState(900);
+    useEffect(() => {
+        const el = trackRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(() => setTrackWidth(el.clientWidth));
+        ro.observe(el);
+        setTrackWidth(el.clientWidth);
+        return () => ro.disconnect();
+    }, []);
+    const drag = useRef(null);
+    const t0 = m.runStartAt;
+    const live = isLive(m);
+    const paintedAt = store.getState().paintedAt;
+    // The stepped live edge: quantized to the repaint grid, never per-token.
+    const nowS = t0 === null ? 0 : Math.floor(((paintedAt - t0) / 1000) / (EDGE_STEP / 1000)) * (EDGE_STEP / 1000);
+    const endS = live ? nowS : runEndS(m);
+    // The WINDOW: fixed span; parked at the run start, then SLIDES — never grows.
+    let w0;
+    let w1;
+    if (panWindow && !follow)
+        ({ w0, w1 } = panWindow);
+    else if (live) {
+        if (nowS <= SPAN_LIVE) {
+            w0 = 0;
+            w1 = SPAN_LIVE;
+        }
+        else {
+            w0 = Math.floor(nowS - SPAN_LIVE * 0.85);
+            w1 = w0 + SPAN_LIVE;
+        }
+    }
+    else {
+        w0 = -2;
+        w1 = Math.max(SPAN_LIVE, endS + 6);
+    }
+    const GUTTER = 168;
+    const width = trackWidth;
+    const track = Math.max(50, width - GUTTER);
+    const px = (s) => GUTTER + ((s - w0) / (w1 - w0)) * track;
+    const on = (s) => s >= w0 && s <= w1;
+    const secOf = (at) => (t0 === null ? 0 : (at - t0) / 1000);
+    const span = w1 - w0;
+    const step = span > 240 ? 60 : span > 120 ? 30 : span > 60 ? 15 : 5;
+    const ticks = [];
+    for (let t = Math.ceil(w0 / step) * step; t <= w1; t += step)
+        ticks.push(t);
+    const lanes = [...m.lanes.values()];
+    const strip = pressureStrip(m, 200);
+    const pct = pressurePercent(m);
+    const host = m.host;
+    const lastHost = host[host.length - 1];
+    const onMouseDown = (e) => { drag.current = { x: e.clientX, w0, w1 }; };
+    const onMouseMove = (e) => {
+        if (!drag.current)
+            return;
+        if (Math.abs(e.clientX - drag.current.x) > 3 && follow)
+            setFollow(false);
+        const dt = ((drag.current.x - e.clientX) / track) * (drag.current.w1 - drag.current.w0);
+        setPanWindow({ w0: drag.current.w0 + dt, w1: drag.current.w1 + dt });
+    };
+    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: {
+                            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)))] })] }));
+}
+const label = {
+    fontSize: 10, fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase', color: '#b0b6c2',
+};
+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);
+    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 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) => {
+        if (x1 <= x0)
+            return null;
+        const g = grey ? '95,99,104' : rgb;
+        return (_jsx("div", { style: {
+                position: 'absolute', top: 12, height: 14, left: x0 - gutter, width: x1 - x0,
+                background: `repeating-linear-gradient(135deg, rgba(${g},.45) 0 4px, rgba(${g},.08) 4px 9px), #fff`,
+            } }, `w${x0}`));
+    };
+    const glyph = l.outcome === 'failed' ? '✗' : l.outcome === 'recovered' ? '↻' : '✓';
+    const glyphBg = l.outcome === 'failed' ? C.fail : l.outcome === 'recovered' ? C.agent : C.ok;
+    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);
+    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,
+            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: {
+                                    position: 'absolute', top: 12, height: 14,
+                                    left: Math.max(capL, gutter) - gutter,
+                                    width: Math.max(4, capR - Math.max(capL, gutter)),
+                                    background: color,
+                                    borderRadius: running ? '7px 0 0 7px' : capL < gutter ? '0 7px 7px 0' : 7,
+                                } }), myCalls.filter((r) => r.settledAt !== null).map((r) => stripe(Math.max(px(secOf(r.dispatchedAt)), Math.max(capL, gutter)), Math.min(px(Math.min(secOf(r.settledAt), e)), capR))), myCalls.filter((r) => r.settledAt === null).map((r) => {
+                                const from = Math.max(px(secOf(r.dispatchedAt)), Math.max(capL, gutter));
+                                if (!r.retry)
+                                    return stripe(from, capR);
+                                const parkFrom = Math.max(px(secOf(r.retry.at)), Math.max(capL, gutter));
+                                return (_jsxs(React.Fragment, { children: [stripe(from, Math.min(parkFrom, capR)), stripe(Math.min(parkFrom, capR), capR, true)] }, `lw${r.dispatchedAt}`));
+                            }), l.clarify && stripe(Math.max(px(secOf(l.clarify.askedAt)), Math.max(capL, gutter)), Math.min(px(l.clarify.answeredAt === null ? e : secOf(l.clarify.answeredAt)), capR), true), running && live && (_jsx("span", { style: {
+                                    position: 'absolute', left: capR - gutter - 3, top: 15.5, width: 7, height: 7,
+                                    borderRadius: '50%', background: C.agentDark, zIndex: 2,
+                                } })), l.prunedAt !== null && l.doneAt !== null && secOf(l.prunedAt) > e + 0.5 && (_jsx("div", { title: "the branch's KV stayed resident until the pool pruned it", style: {
+                                    position: 'absolute', top: 12, height: 14,
+                                    left: Math.max(px(e), gutter) - gutter,
+                                    width: Math.max(2, Math.min(px(Math.min(secOf(l.prunedAt), windowEnd)), px(windowEnd)) - Math.max(px(e), gutter)),
+                                    background: 'repeating-linear-gradient(135deg, rgba(95,99,104,.30) 0 4px, rgba(95,99,104,.06) 4px 9px)',
+                                    borderRadius: '0 7px 7px 0',
+                                } }))] })), l.clarify && on(secOf(l.clarify.askedAt)) && (_jsx("span", { style: { position: 'absolute', left: px(secOf(l.clarify.askedAt)) - gutter - 9, top: 8.5, zIndex: 2 }, title: `asked the user — ${l.clarify.questions.join(' · ')}`, children: _jsx(Badge, { color: C.dim, letter: "?", hollow: true }) })), l.clarify?.answeredAt != null && on(secOf(l.clarify.answeredAt)) && (_jsx("span", { style: { position: 'absolute', left: px(secOf(l.clarify.answeredAt)) - gutter - 9, top: 8.5, zIndex: 2 }, title: "the user replied", children: _jsx(Badge, { color: C.dim, letter: "?" }) })), myGuards.filter((g) => g.kind === 'guard' || g.kind === 'auth').map((g, i) => on(secOf(g.at)) ? (_jsx("span", { style: { position: 'absolute', left: px(secOf(g.at)) - gutter - 9, top: 8.5, zIndex: 2 }, title: `blocked — ${g.guard ?? g.kind}: ${g.message ?? g.tool ?? ''}`, children: _jsx(Badge, { color: C.warn, letter: "\u2298", hollow: true }) }, `g${i}`)) : null), myCalls.map((r, i) => {
+                        const cs = secOf(r.dispatchedAt);
+                        const ce = r.settledAt === null ? null : secOf(r.settledAt);
+                        const err = r.result !== null && r.result.includes('"error"');
+                        const collides = ce !== null && px(ce) - px(cs) < 20;
+                        return (_jsxs(React.Fragment, { children: [on(cs) && !collides && (_jsx("span", { style: { position: 'absolute', left: px(cs) - gutter - 9, top: 8.5, zIndex: 2 }, title: `${r.tool} · ${r.args.slice(0, 140)}`, children: _jsx(Badge, { color: toolColor(r.tool), letter: letterOf(r.tool), hollow: true }) })), ce !== null && on(ce) && (_jsx("span", { style: { position: 'absolute', left: px(ce) - gutter - 9, top: 8.5, zIndex: 2 }, title: `${r.tool} → ${fmtS(ce - cs)}${r.contextAvailablePercent != null ? ` · ctx ${r.contextAvailablePercent}%` : ''}`, children: _jsx(Badge, { color: err ? C.fail : toolColor(r.tool), letter: letterOf(r.tool) }) }))] }, `c${i}`));
+                    }), l.doneAt !== null && on(e) && (_jsxs(_Fragment, { children: [_jsx("span", { style: { position: 'absolute', left: px(e) - gutter + 8, top: 8.5, zIndex: 2 }, children: _jsx("span", { style: {
+                                        width: 18, height: 18, borderRadius: '50%', display: 'inline-grid', placeItems: 'center',
+                                        background: glyphBg, color: '#fff', border: '2px solid #fff',
+                                        boxShadow: '0 1px 2px rgba(0,0,0,.18)', fontSize: 10, fontWeight: 700,
+                                    }, children: glyph }) }), _jsx("span", { style: {
+                                    position: 'absolute', left: px(e) - gutter + 33, top: 13, fontSize: 10.5,
+                                    fontFamily: mono, color: endColor, whiteSpace: 'nowrap', pointerEvents: 'none',
+                                }, children: endLabel })] })), running && on(e) && (_jsx("span", { style: {
+                            position: 'absolute', left: px(e) - gutter + 10, top: 13, fontSize: 10.5,
+                            fontFamily: mono, color: C.agentDark, whiteSpace: 'nowrap', pointerEvents: 'none',
+                        }, children: (() => {
+                            if (l.clarify && l.clarify.answeredAt === null)
+                                return 'waiting on you…';
+                            if (l.inflightTool) {
+                                const parked = m.retrievals.find((r) => r.agentId === l.agentId && r.settledAt === null && r.retry !== null);
+                                if (parked?.retry) {
+                                    const left = Math.ceil((parked.retry.afterMs - (nowS - secOf(parked.retry.at)) * 1000) / 1000);
+                                    return left > 0
+                                        ? `${l.inflightTool} — rate-limited · retry in ${left}s`
+                                        : `${l.inflightTool} — retrying (attempt ${parked.retry.attempt + 1})…`;
+                                }
+                                return `${l.inflightTool}…`;
+                            }
+                            return l.role === 'synth' ? 'streaming report…' : 'thinking…';
+                        })() }))] })] }));
+}
+// ═══ agent detail: the story feed ═══
+/** Drag handle on the agent feed's left edge — pull to widen the panel
+ *  (the chart stretches with it); double-click restores the default. The
+ *  strip is invisible: the cursor change is the affordance, and the feed's
+ *  own border stays the visual line. Width persists for the page session. */
+const FEED_W_DEFAULT = 420;
+let feedWidthPref = FEED_W_DEFAULT;
+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) => {
+            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))));
+        }, onPointerUp: (e) => {
+            drag.current = null;
+            e.currentTarget.releasePointerCapture(e.pointerId);
+        } }));
+}
+/** The epistemics instrument: entropy (area) and surprisal (line) in nats
+ *  over the agent's WHOLE span — x is anchored time, so samples never slide,
+ *  and amber ticks mark where tool results landed (a spike right after one
+ *  means the injected content destabilized the model). The y-ceiling floors
+ *  at 4 nats and clips at p95: a calm run reads calm instead of auto-zooming
+ *  its own noise into drama. Gaps are honest — a tool wait produces no
+ *  tokens, so the chart breaks rather than bridging it. */
+const SURPRISAL_COLOR = '#7c3aed';
+function EpistemicsChart({ m, lane, nowMs }) {
+    const e = lane.epistemics;
+    if (e.length < 2)
+        return null;
+    const t0 = lane.spawnedAt;
+    const t1 = Math.max(lane.doneAt ?? nowMs, e[e.length - 1].at, t0 + 1000);
+    const B = 140;
+    const H = 54;
+    // bucket to pixel columns: mean entropy (the band), MAX surprisal (spikes
+    // are the signal — a mean would erase exactly what matters).
+    const hSum = Array(B).fill(0);
+    const hN = Array(B).fill(0);
+    const sMax = Array(B).fill(null);
+    for (const smp of e) {
+        const i = Math.min(B - 1, Math.max(0, Math.floor(((smp.at - t0) / (t1 - t0)) * B)));
+        hSum[i] += smp.h;
+        hN[i] += 1;
+        sMax[i] = sMax[i] === null ? smp.s : Math.max(sMax[i], smp.s);
+    }
+    const sorted = e.flatMap((x) => [x.h, x.s]).sort((a, b) => a - b);
+    const yMax = Math.max(4, sorted[Math.floor(sorted.length * 0.95)] ?? 4);
+    const y = (v) => H - (Math.min(v, yMax) / yMax) * (H - 2);
+    // runs of consecutive non-empty buckets → separate path segments
+    const segs = [];
+    let run = [];
+    for (let i = 0; i < B; i++) {
+        if (hN[i] > 0)
+            run.push(i);
+        else if (run.length) {
+            segs.push(run);
+            run = [];
+        }
+    }
+    if (run.length)
+        segs.push(run);
+    const entropyArea = segs.map((seg) => {
+        const pts = seg.map((i) => `${i + 0.5},${y(hSum[i] / hN[i]).toFixed(1)}`);
+        const x0 = seg[0] + 0.5;
+        const x1 = seg[seg.length - 1] + 0.5;
+        return `M ${x0},${H} L ${pts.join(' L ')} L ${x1},${H} Z`;
+    }).join(' ');
+    const entropyLine = segs.map((seg) => 'M ' + seg.map((i) => `${i + 0.5},${y(hSum[i] / hN[i]).toFixed(1)}`).join(' L ')).join(' ');
+    const surprisalLine = segs.map((seg) => 'M ' + seg.map((i) => `${i + 0.5},${y(sMax[i]).toFixed(1)}`).join(' L ')).join(' ');
+    const ticks = m.retrievals
+        .filter((r) => r.agentId === lane.agentId && r.settledAt !== null)
+        .map((r) => ((r.settledAt - t0) / (t1 - t0)) * B)
+        .filter((x) => x >= 0 && x <= B);
+    const last = e[e.length - 1];
+    const ppl = lanePpl(lane);
+    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"] })] })] }));
+}
+function AgentFeed({ m, lane, toolColor, onClose, onJump, nowMs, width }) {
+    const [expanded, setExpanded] = useState(() => new Set(['report']));
+    const toggle = (id) => {
+        setExpanded((prev) => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    const calls = m.retrievals.map((r, i) => ({ r, id: `c${i}` })).filter(({ r }) => r.agentId === lane.agentId);
+    const interventions = m.interventions.filter((iv) => iv.agentId === lane.agentId);
+    const items = [];
+    if (lane.clarify) {
+        items.push({
+            at: lane.clarify.askedAt,
+            el: (_jsxs("div", { style: feedItem, children: [_jsxs("div", { style: { display: 'flex', gap: 7, alignItems: 'baseline' }, children: [_jsx("b", { style: { color: C.dim }, children: "? asked the user" }), _jsxs("span", { style: { color: '#3c4043' }, children: ["\u201C", lane.clarify.questions.join(' · '), "\u201D"] })] }), _jsx("div", { style: { margin: '3px 0 0 16px', color: lane.clarify.answeredAt === null ? C.warn : C.dim }, children: lane.clarify.answeredAt === null
+                            ? 'waiting on the user…'
+                            : `the user replied · ${fmtS((lane.clarify.answeredAt - lane.clarify.askedAt) / 1000)}` })] }, "clarify")),
+        });
+    }
+    for (const iv of interventions) {
+        items.push({
+            at: iv.at,
+            el: (_jsxs("div", { style: { ...feedItem, color: C.warn }, children: [_jsxs("div", { style: { display: 'flex', gap: 7, alignItems: 'baseline' }, children: [_jsx("b", { children: iv.kind === 'nudge' ? '▲ harness nudge' : '⊘ blocked' }), iv.tool && _jsxs("span", { style: { fontFamily: mono, fontSize: 10.5 }, children: [iv.tool, iv.args ? ` · ${iv.args.slice(0, 80)}` : ''] })] }), _jsxs("div", { style: { margin: '2px 0 0 16px', color: C.dim }, children: [iv.guard ? `${iv.guard} guard — ` : iv.reason ? `${iv.reason} — ` : '', iv.message ? `“${iv.message}”` : ''] })] }, `iv${iv.at}`)),
+        });
+    }
+    for (const { r, id } of calls) {
+        const open = expanded.has(id);
+        const err = r.result !== null && r.result.includes('"error"');
+        const status = r.settledAt === null
+            ? (r.retry ? `rate-limited · parked ${Math.round(r.retry.afterMs / 1000)}s · attempt ${r.retry.attempt}` : 'in flight')
+            : r.admission
+                ? `${r.admission.selectedPassageCount}${r.admission.totalScored != null ? ` of ${r.admission.totalScored}` : ''} passages${r.admission.admittedTokens != null ? ` · ${r.admission.admittedTokens} tok` : ''}`
+                : err ? 'error' : 'done';
+        items.push({
+            at: r.dispatchedAt,
+            el: (_jsxs("div", { style: feedItem, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 7, cursor: 'pointer' }, onClick: () => toggle(id), role: "button", tabIndex: 0, onKeyDown: keyActivate(() => toggle(id)), children: [_jsx("span", { style: { color: C.faint, fontSize: 9, width: 9, flex: 'none' }, children: open ? '▾' : '▸' }), _jsx(Badge, { color: err ? C.fail : toolColor(r.tool), letter: letterOf(r.tool), size: 14 }), _jsx("span", { style: { fontFamily: mono, fontSize: 10.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: '0 1 auto', minWidth: 0 }, children: argSummary(r.args) }), argUrl(r.args) !== null && _jsx(LinkOut, { url: argUrl(r.args) }), _jsx("span", { style: { flex: 1 } }), _jsx("span", { style: { color: err ? C.fail : C.faint, fontSize: 10.5 }, children: status })] }), open && (_jsxs("div", { style: { margin: '6px 0 2px 16px', fontSize: 11 }, children: [r.explore === false && (_jsx("div", { style: { color: C.faint, marginBottom: 3 }, children: "exploit \u2014 re-ranked against the query" })), r.admission && r.admission.topResults.length > 0 && (_jsx("div", { style: { color: C.dim, margin: '2px 0 3px' }, children: "Sections read:" })), r.admission?.topResults.map((t, i, all) => (_jsxs("div", { style: {
+                                    padding: '3px 7px', borderRadius: 3, marginTop: 2,
+                                    // admission ORDER is the signal — rank 1 deepest, fading with rank
+                                    background: `rgba(26,115,232,${(0.03 + 0.13 * (1 - i / Math.max(1, all.length - 1))).toFixed(3)})`,
+                                }, children: [_jsxs("b", { style: { fontSize: 11 }, children: [i + 1, " \u00B7 ", t.heading] }), t.textPreview && _jsxs("div", { style: { color: C.dim, fontSize: 10.5, lineHeight: 1.45 }, children: [t.textPreview, "\u2026"] })] }, i))), !r.admission && r.result && _jsx(JsonBlock, { text: r.result })] }))] }, id)),
+        });
+    }
+    items.sort((a, b) => a.at - b.at);
+    // The planner's report IS the plan — structure, with task→agent jumps.
+    const research = [...m.lanes.values()].filter((l) => l.role === 'research');
+    const planView = lane.role === 'planner' && m.plan && (_jsxs("div", { style: feedItem, children: [_jsxs("div", { style: { display: 'flex', gap: 7, alignItems: 'baseline', marginBottom: 3 }, children: [_jsx("b", { style: { fontSize: 11 }, children: "plan" }), _jsxs("span", { style: { color: C.faint }, children: [m.plan.tasks.length, " tasks \u2014 click one to follow its agent"] })] }), m.plan.tasks.map((task, i) => {
+                const ag = research[i]; // fanout order = flat-mode spawn order
+                const g = !ag ? '' : ag.outcome === 'failed' ? '✗' : ag.outcome === 'recovered' ? '↻' : ag.doneAt === null ? '…' : '✓';
+                const gc = !ag ? C.faint : ag.outcome === 'failed' ? C.fail : ag.outcome === 'recovered' ? C.agent : C.ok;
+                return (_jsxs("div", { onClick: ag ? () => onJump(ag.agentId) : undefined, style: { display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0', borderTop: `1px solid ${C.hair}`, cursor: ag ? 'pointer' : 'default' }, children: [_jsx("span", { style: { width: 16, textAlign: 'right', fontFamily: mono, fontSize: 10, color: C.faint }, children: i + 1 }), _jsx("span", { style: { flex: 1, fontSize: 11, lineHeight: 1.4 }, children: task }), ag && _jsx("span", { style: chip, children: `research ${ag.agentId}` }), _jsx("b", { style: { color: gc, width: 14, textAlign: 'center' }, children: g })] }, i));
+            })] }));
+    const reportOpen = expanded.has('report');
+    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: [_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 }))] }))] })] }));
+}
+const feedItem = { padding: '7px 12px', borderTop: '1px solid #eceef1' };
+const chip = {
+    fontSize: 10, fontWeight: 600, padding: '1px 6px', borderRadius: 2, background: C.chromeBg, color: C.dim,
+};
+// ═══ Sources: the admission view ═══
+function Sources({ m, toolColor }) {
+    const settled = m.retrievals.filter((r) => r.settledAt !== null);
+    const [pinned, setPinned] = useState(null);
+    const sel = pinned !== null && pinned < settled.length ? pinned : settled.length - 1;
+    const r = settled[sel];
+    const blocked = m.interventions.filter((iv) => iv.kind === 'guard' || iv.kind === 'auth');
+    return (_jsxs("div", { style: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsxs("div", { style: { width: 300, flex: 'none', borderRight: '1px solid #d9dce1', overflowY: 'auto' }, children: [settled.length === 0 && blocked.length === 0 && (_jsx("div", { style: { padding: '16px 14px', color: C.faint, fontSize: 11 }, children: "no results yet" })), settled.map((x, i) => {
+                        const err = x.result !== null && x.result.includes('"error"');
+                        return (_jsxs("div", { onClick: () => setPinned(i), role: "button", tabIndex: 0, onKeyDown: keyActivate(() => setPinned(i)), style: {
+                                display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', fontSize: 11,
+                                borderBottom: `1px solid ${C.hair}`, cursor: 'pointer',
+                                background: i === sel ? C.chromeBg : undefined,
+                                boxShadow: i === sel ? `inset 3px 0 0 ${C.text}` : undefined,
+                            }, children: [_jsx(Badge, { color: err ? C.fail : toolColor(x.tool), letter: letterOf(x.tool), size: 16 }), _jsx("span", { style: { fontFamily: mono, fontSize: 10.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: '0 1 auto', minWidth: 0 }, children: argSummary(x.args) }), argUrl(x.args) !== null && _jsx(LinkOut, { url: argUrl(x.args) }), _jsx("span", { style: { flex: 1 } }), _jsx("span", { style: { fontFamily: mono, fontSize: 10, color: C.faint }, children: x.settledAt !== null ? fmtS((x.settledAt - x.dispatchedAt) / 1000) : '' })] }, i));
+                    }), blocked.map((g, i) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', fontSize: 11, borderBottom: `1px solid ${C.hair}`, opacity: 0.65 }, children: [_jsx(Badge, { color: C.warn, letter: "\u2298", size: 16, hollow: true }), _jsx("span", { style: { fontFamily: mono, fontSize: 10.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }, children: g.args ?? g.tool ?? '' }), _jsx("span", { style: { fontSize: 10.5, color: C.warn }, children: "blocked" })] }, `b${i}`)))] }), _jsx("div", { style: { flex: 1, minWidth: 0, overflowY: 'auto', fontSize: 11.5 }, children: r && _jsx(AdmissionView, { r: r }) })] }));
+}
+function AdmissionView({ r }) {
+    let parsed = null;
+    try {
+        parsed = r.result ? JSON.parse(r.result) : null;
+    }
+    catch { /* not JSON */ }
+    const error = parsed && typeof parsed.error === 'string' ? parsed.error : null;
+    const alsoOnPage = parsed && Array.isArray(parsed.alsoOnPage) ? parsed.alsoOnPage : null;
+    const a = r.admission;
+    return (_jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', borderBottom: `1px solid ${C.border}`, flexWrap: 'wrap' }, children: [_jsxs("span", { style: { fontFamily: mono, fontSize: 11 }, children: [r.tool, " \u00B7 ", argSummary(r.args).slice(0, 160)] }), argUrl(r.args) !== null && _jsx(LinkOut, { url: argUrl(r.args) }), _jsx("span", { style: { flex: 1 } }), r.explore === false && (_jsx("span", { style: { ...fchip, background: C.warnBg, color: C.warn }, children: "exploit \u2014 re-ranked against the query" })), r.explore === true && _jsx("span", { style: fchip, children: "explore \u2014 scored against the agent's task" }), _jsxs("span", { style: fchip, children: ["agent ", r.agentId] })] }), error && (_jsxs("div", { style: { padding: '8px 14px' }, children: [_jsx("b", { style: { color: C.fail }, children: error }), _jsx("p", { style: { margin: '3px 0 0', color: C.dim, fontSize: 11 }, children: "the agent was told and pivoted" })] })), !error && r.exploitChunks && r.exploitChunks.length > 0 && _jsx(SlopeChart, { r: r }), !error && a && a.topResults.length > 0 && (_jsxs("div", { style: { padding: '6px 16px 2px', maxWidth: 760 }, children: [a.topResults.map((t, i) => {
+                        const rel = relScale(a.topResults.map((x) => x.score))(t.score);
+                        return (_jsxs("div", { style: { padding: '6px 0', borderTop: i ? `1px solid ${C.hair}` : undefined }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 7 }, children: [_jsx("span", { style: { width: 14, textAlign: 'right', fontFamily: mono, fontSize: 10, color: C.faint }, children: i + 1 }), _jsx("span", { style: { width: 150, flex: 'none' }, children: _jsx("span", { style: { display: 'block', height: 5, borderRadius: 3, background: C.agent, width: `${Math.round(rel * 100)}%` } }) }), _jsx("b", { style: { fontSize: 11 }, children: t.heading }), _jsx("span", { style: { flex: 1 } })] }), t.textPreview && (_jsxs("p", { style: { margin: '2px 0 0 21px', color: C.dim, fontSize: 10.5, lineHeight: 1.45 }, children: [t.textPreview, "\u2026"] }))] }, i));
+                    }), _jsx("div", { style: cutline, children: a.tokenBudget != null
+                            ? `admitted ${a.selectedPassageCount}${a.totalScored != null ? ` of ${a.totalScored}` : ''} · ${a.admittedTokens?.toLocaleString() ?? '?'} of ${a.tokenBudget.toLocaleString()} token budget`
+                            : a.threshold != null
+                                ? `admitted ${a.selectedPassageCount}${a.totalScored != null ? ` of ${a.totalScored}` : ''} at the score floor`
+                                : `admitted ${a.selectedPassageCount}` }), alsoOnPage && alsoOnPage.length > 0 && (_jsxs("div", { style: { padding: '2px 0 10px', display: 'flex', flexWrap: 'wrap', gap: 6, alignItems: 'center' }, children: [alsoOnPage.map((h) => _jsx("span", { style: { ...fchip, opacity: 0.7 }, children: h }, h)), _jsx("span", { style: { color: C.faint, fontSize: 10.5 }, children: "\u2014 left on the page, offered to the agent as topics" })] }))] })), !error && (() => {
+                if (a && a.topResults.length > 0)
+                    return null; // the admission view above already rendered
+                const rows = resultRows(parsed);
+                if (rows) {
+                    const scored = rows.some((x) => x.score !== undefined);
+                    const rel = relScale(rows.map((x) => x.score ?? 0));
+                    return (_jsxs("div", { style: { padding: '6px 16px 10px', maxWidth: 820 }, children: [rows.map((x, i) => (_jsxs("div", { style: { padding: '7px 0', borderTop: i ? `1px solid ${C.hair}` : undefined }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { width: 14, textAlign: 'right', fontFamily: mono, fontSize: 10, color: C.faint }, children: i + 1 }), scored && (_jsx("span", { style: { width: 130, flex: 'none' }, children: _jsx("span", { style: { display: 'block', height: 5, borderRadius: 3, background: C.agent, width: `${Math.round(rel(x.score ?? 0) * 100)}%` } }) })), _jsx("b", { style: { fontSize: 11.5 }, children: x.head }), x.sub && _jsx("span", { style: { color: C.faint, fontSize: 10.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: x.sub })] }), x.body && _jsxs("p", { style: { margin: `2px 0 0 ${scored ? 160 : 22}px`, color: C.dim, fontSize: 11, lineHeight: 1.5 }, children: [x.body.slice(0, 280), x.body.length > 280 ? '…' : ''] })] }, i))), scored && _jsx("div", { style: { padding: '6px 0 0 22px', color: C.faint, fontSize: 10 }, children: "bars are relative to this retrieval's best match" })] }));
+                }
+                const content = parsed && typeof parsed === 'object' && typeof parsed.content === 'string'
+                    ? parsed.content : null;
+                if (content !== null) {
+                    const also = parsed && Array.isArray(parsed.alsoOnPage)
+                        ? (parsed.alsoOnPage) : null;
+                    return (_jsxs("div", { style: { padding: '8px 16px 10px', maxWidth: 820 }, children: [_jsxs("div", { style: { color: C.dim, fontSize: 11, whiteSpace: 'pre-wrap', lineHeight: 1.55 }, children: [content.slice(0, 1200), content.length > 1200 ? '…' : ''] }), also && also.length > 0 && (_jsxs("div", { style: { padding: '8px 0 0', display: 'flex', flexWrap: 'wrap', gap: 6, alignItems: 'center' }, children: [also.map((h) => _jsx("span", { style: { ...fchip, opacity: 0.7 }, children: h }, h)), _jsx("span", { style: { color: C.faint, fontSize: 10.5 }, children: "\u2014 left on the page, offered to the agent as topics" })] }))] }));
+                }
+                if (r.result) {
+                    return (_jsx("div", { style: { padding: '8px 14px', maxWidth: 900 }, children: _jsx(JsonBlock, { text: r.result }) }));
+                }
+                return null;
+            })()] }));
+}
+/** Two rankings of the same chunks, side by side — each column HEADED by the
+ *  question it ranks for; crossing lines ARE the re-rank. No legend. */
+function SlopeChart({ r }) {
+    const chunks = r.exploitChunks;
+    const ROW = 26;
+    const W = 70;
+    const HEAD = 40;
+    const byTask = [...chunks].sort((a, b) => b.combinedScore - a.combinedScore);
+    const byTool = [...chunks].sort((a, b) => b.toolQueryScore - a.toolQueryScore);
+    const H = chunks.length * ROW;
+    let agentQ = '';
+    try {
+        agentQ = String(JSON.parse(r.args || '{}').query ?? '');
+    }
+    catch { /* raw args */ }
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', padding: '14px 16px 4px', maxWidth: 900 }, children: [_jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { height: HEAD, textAlign: 'right' }, children: [_jsx("div", { style: label, children: "for this call's query" }), agentQ && _jsxs("div", { style: { fontFamily: mono, fontSize: 10, color: C.faint }, children: ["\u201C", agentQ, "\u201D"] })] }), byTool.map((x, i) => (_jsxs("div", { style: { height: ROW, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 7, color: '#3c4043' }, children: [_jsx("span", { style: { fontSize: 11 }, children: x.heading }), _jsx("span", { style: { width: 14, fontFamily: mono, fontSize: 10, color: C.faint }, children: i + 1 })] }, x.heading)))] }), _jsx("svg", { width: W, height: H, style: { flex: 'none', margin: `${HEAD}px 10px 0` }, children: byTask.map((x, ti) => {
+                    const li = byTool.indexOf(x);
+                    return _jsx("line", { x1: 0, y1: li * ROW + 13, x2: W, y2: ti * ROW + 13, stroke: C.agent, strokeWidth: 1.8 }, x.heading);
+                }) }), _jsxs("div", { style: { flex: 1.2, minWidth: 0 }, children: [_jsx("div", { style: { height: HEAD }, children: _jsx("div", { style: label, children: "re-ranked with the run query" }) }), byTask.map((x, i) => (_jsxs("div", { style: { height: ROW, display: 'flex', alignItems: 'center', gap: 7 }, children: [_jsx("span", { style: { width: 14, textAlign: 'right', fontFamily: mono, fontSize: 10, color: C.faint }, children: i + 1 }), _jsx("span", { style: { fontSize: 11, fontWeight: 600 }, children: x.heading })] }, x.heading)))] })] }));
+}
+const fchip = {
+    fontSize: 10, fontWeight: 600, padding: '2px 8px', borderRadius: 3, background: C.chromeBg, color: C.dim,
+};
+const cutline = {
+    display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0 4px', color: C.faint, fontSize: 10,
+    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 }) {
+    const [cat, setCat] = useState('harness');
+    const [selKey, setSelKey] = useState(controls[0]?.key ?? 'model.path');
+    // 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
+    // redacted config keys.
+    const abilities = m.abilities
+        ? m.abilities.map((a) => a.name)
+        : m.config && typeof m.config.abilities === 'object' && m.config.abilities !== null
+            ? Object.keys(m.config.abilities)
+            : [];
+    if (!m.config) {
+        return (_jsx("div", { style: { flex: 1, display: 'grid', placeItems: 'center', color: C.faint, fontSize: 11.5 }, children: "this harness has not emitted config:loaded \u2014 the inspector has nothing to show" }));
+    }
+    const navItem = (name, on) => (_jsx("div", { onClick: () => setCat(name), role: "button", tabIndex: 0, onKeyDown: keyActivate(() => setCat(name)), style: {
+            padding: '7px 16px', fontSize: 12, cursor: 'pointer',
+            color: on ? C.text : C.dim, fontWeight: on ? 600 : 400,
+            background: on ? '#fff' : undefined,
+            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(AbilityPage, { m: m, name: cat, send: send })] }));
+}
+function HarnessSettings({ m, controls, 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 selected = selKey === key;
+        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: {
+                            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));
+    };
+    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];
+    // 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;
+    const overridden = origin === 'env' || origin === 'cli';
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { flex: 1, minWidth: 0, overflowY: 'auto', paddingBottom: 10 }, children: [head('session'), byTier('session').map(row), head('reload'), byTier('reload').map(row), 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: {
+                                    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
+                            ? 'applied for this session — a served session has no local file'
+                            : `saved → ${m.lastSavedTo} (local, not committed)` }))] })] }));
+}
+function fieldsOf(a) {
+    const props = a.configSchema?.properties;
+    if (!props)
+        return [];
+    const required = new Set(a.configSchema?.required ?? []);
+    return Object.entries(props).map(([key, raw]) => {
+        const prop = raw ?? {};
+        const secret = prop['x-secret'] === true;
+        return {
+            key,
+            badge: secret ? 'SECRET' : required.has(key) ? 'REQUIRED' : 'OPTIONAL',
+            secret,
+            description: prop.description,
+            stored: a.config[key] !== undefined,
+        };
+    });
+}
+/** One editable config field. Values are write-only on this wire — the input
+ *  never prefills; the placeholder carries the set-state. Saving dispatches
+ *  set_app_config with the entered field (whole-replace semantics until the
+ *  per-key merge helper lands — exact for the shipped single-field schemas). */
+function AbilityField({ name, field, send }) {
+    const [draft, setDraft] = useState('');
+    const [saved, setSaved] = useState(false);
+    const save = () => {
+        const v = draft.trim();
+        if (!v)
+            return;
+        send({ type: 'set_app_config', name, values: { [field.key]: v } });
+        setDraft('');
+        setSaved(true);
+    };
+    return (_jsxs("div", { style: { marginTop: 14 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontFamily: mono, fontSize: 11.5, fontWeight: 500 }, children: field.key }), _jsx("span", { style: {
+                            ...chip,
+                            background: field.secret ? C.warnBg : C.chromeBg,
+                            color: field.secret ? C.warn : C.dim,
+                        }, children: field.badge }), (field.stored || saved) && _jsx("span", { style: { color: C.ok, fontSize: 10.5 }, children: "set \u2713" })] }), field.description && (_jsx("div", { style: { color: C.faint, fontSize: 10.5, marginTop: 2 }, children: field.description })), _jsxs("div", { style: { display: 'flex', gap: 6, marginTop: 6 }, children: [_jsx("input", { type: field.secret ? 'password' : 'text', value: draft, onChange: (e) => { setDraft(e.target.value); }, onKeyDown: (e) => { if (e.key === 'Enter')
+                            save(); }, placeholder: field.stored || saved ? 'set ✓ — enter to replace' : 'not set', style: {
+                            width: 320, fontSize: 11, fontFamily: mono, padding: '5px 8px',
+                            border: '1px solid #dadce0', borderRadius: 4,
+                        } }), _jsx("button", { type: "button", onClick: save, style: {
+                            font: 'inherit', fontSize: 11, border: '1px solid #dadce0', background: C.text,
+                            color: '#fff', borderRadius: 4, padding: '2px 12px', cursor: 'pointer',
+                        }, children: "save" })] })] }));
+}
+/** An ability's page: schema-driven config form (the reference app's field
+ *  grammar), write-only on this wire. Falls back to the redacted key-presence
+ *  inspector when the harness never sent descriptors. */
+function AbilityPage({ m, name, send }) {
+    const info = m.abilities?.find((a) => a.name === name);
+    const stored = info?.config
+        ?? m.config?.abilities?.[name]
+        ?? {};
+    const fields = info ? fieldsOf(info) : [];
+    const setCount = fields.length > 0
+        ? fields.filter((f) => f.stored).length
+        : Object.keys(stored).length;
+    return (_jsxs("div", { style: { flex: 1, minWidth: 0, overflowY: 'auto', padding: '16px 22px' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontFamily: mono, fontSize: 13, fontWeight: 500 }, children: info?.title ?? name }), fields.length > 0 && (_jsxs("span", { style: { color: setCount === fields.length ? C.ok : C.dim, fontSize: 10.5 }, children: [setCount, " of ", fields.length, " set", setCount === fields.length ? ' ✓' : ''] })), _jsx("span", { style: chip, children: "applies to the next run" }), info && !info.enabled && (_jsx("span", { style: chip, title: "installed but not enabled \u2014 configure it here; it enables at the next session boot", children: "not enabled" }))] }), info?.description && (_jsx("p", { style: { maxWidth: 480, margin: '6px 0 0', fontSize: 11.5, color: C.dim }, children: info.description })), _jsx("p", { style: { maxWidth: 480, margin: '6px 0 0', fontSize: 11, color: C.faint }, children: "Values are write-only on this wire \u2014 the form shows which keys are set, never what they hold." }), fields.map((f) => _jsx(AbilityField, { name: name, field: f, send: send }, f.key)), fields.length === 0 && Object.keys(stored).map((k) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10, marginTop: 12 }, children: [_jsx("span", { style: { width: 140, flex: 'none', fontFamily: mono, fontSize: 11.5 }, children: k }), _jsx("span", { style: { color: C.ok, fontSize: 11 }, children: "set \u2713" })] }, k))), fields.length === 0 && Object.keys(stored).length === 0 && (_jsx("p", { style: { marginTop: 12, color: C.faint, fontSize: 11 }, children: "this ability declares no config" }))] }));
+}
+//# sourceMappingURL=react.js.map