ccompactor 0.1.14 → 0.1.16

package/dist/tui/App.js

@@ -1,44 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * The interactive browser.
+ * `ccompactor --tui`
  *
- * Three screens, because there are three questions: *which session* (browse),
- * *is this the one* (quick look), and *what do I do with it* (actions). The
- * first version had one screen and answered none of them — it listed sessions,
- * and pressing `h` did nothing at all unless you had already extracted, which
- * is the wrong order for anyone who does not yet know what they want.
+ * A frame with a top bar, a sidebar, a content pane and a bottom bar, and
+ * modals over the top of it. The screens that need a decision are modals rather
+ * than pages, so the thing you were looking at stays where it was.
  *
- * The rules it follows:
- *
- * - **The session id is never truncated.** It is the one column a reader may
- *   need to copy, and a truncated id is a useless one.
- * - **Nothing is silent.** Every operation that can take longer than a blink
- *   shows the stage it is in, because on a 260 MB transcript a frozen screen and
- *   a working one look identical.
- * - **The actions are named, not remembered.** Choosing a session shows what can
- *   be done to it, with the destination written out.
+ * Nothing here is reachable only by a key. Every cell of the top bar, the
+ * sidebar and the bottom bar is clickable, and the bottom bar prints the key on
+ * the button so the shortcut is learned by using it.
  */
 import { Box, Text, useApp, useInput, useStdout } from 'ink';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { listSessions, fuzzyScore } from '../discover/index.js';
 import { extractSession } from '../extract.js';
 import { plan, installed } from '../handoff/index.js';
-import { THEME, hazard, sizeLabel } from './theme.js';
-import { enableMouse, readMouse } from './mouse.js';
-import { barCells, inSpan, layoutCells } from './bar.js';
 import { loadDetails } from './details.js';
-/**
- * Terminal rows, 1-based, that a click is measured against.
- *
- * Every screen puts the stripe, the title chips and the action bar on rows 1-3,
- * so a click means the same thing on all of them and the arithmetic stays in one
- * place. The row below the bar is a column header on the browse screen and a
- * question on the menu screens; either way the first thing you can click is 5.
- */
-const ROW_CHIPS = 2;
-const ROW_BAR = 3;
-const LIST_TOP = 5;
-const MENU_TOP = 5;
+import { THEME, sizeLabel } from './theme.js';
+import { enableMouse, readMouse } from './mouse.js';
+import { MENU, ROW_TOP, SIDEBAR_TOP, SIDEBAR_WIDTH, bottomBar, inCell, layoutCells, menuIndex, tabCells, } from './frame.js';
 /**
  * How large a transcript may be before the table stops reading it in the
  * background. Above this the row shows a size and a date, and the rest arrives
@@ -49,12 +29,11 @@ export function App({ outDir, anyProject, onDone }) {
     const { exit } = useApp();
     const { stdout } = useStdout();
     // Not `?? 100`: a pty with no window size reports 0, and 0 is not nullish, so
-    // every layout decision saw a zero-width terminal and collapsed to a single
-    // button. A width too small to draw anything is a width we do not know.
+    // every layout decision saw a zero-width terminal and collapsed to nothing.
     const rawColumns = stdout?.columns;
-    const columns = rawColumns !== undefined && rawColumns >= 20 ? rawColumns : 100;
+    const columns = rawColumns !== undefined && rawColumns >= 40 ? rawColumns : 100;
     const rawRows = stdout?.rows;
-    const rows = rawRows !== undefined && rawRows >= 8 ? rawRows : 30;
+    const rows = rawRows !== undefined && rawRows >= 12 ? rawRows : 30;
     const [sessions, setSessions] = useState([]);
     const [loading, setLoading] = useState('scanning agent stores …');
     const [query, setQuery] = useState('');
@@ -62,11 +41,10 @@ export function App({ outDir, anyProject, onDone }) {
     const [agentsOff, setAgentsOff] = useState(new Set());
     const [cursor, setCursor] = useState(0);
     const [offset, setOffset] = useState(0);
-    const [screen, setScreen] = useState('browse');
-    // One cache for every session whose metadata has been read, and one for the
-    // row being looked at. The window is prefilled in the background so the
-    // MSGS/TURNS/CWD columns fill in as the reader browses rather than sitting
-    // empty until they land on a row.
+    const [page, setPage] = useState('sessions');
+    const [menuCursor, setMenuCursor] = useState(0);
+    const [focus, setFocus] = useState('content');
+    const [modal, setModal] = useState();
     const [cache, setCache] = useState(new Map());
     const [previewScroll, setPreviewScroll] = useState(0);
     const [actionIndex, setActionIndex] = useState(0);
@@ -77,6 +55,8 @@ export function App({ outDir, anyProject, onDone }) {
     const [results, setResults] = useState([]);
     const [lastArtifact, setLastArtifact] = useState();
     const [error, setError] = useState();
+    const [report, setReport] = useState();
+    const [artifacts, setArtifacts] = useState([]);
     const busy = useRef(false);
     // ---- loading ------------------------------------------------------------
     useEffect(() => {
@@ -104,9 +84,11 @@ export function App({ outDir, anyProject, onDone }) {
         }
         return out;
     }, [sessions, query, agentsOff]);
-    const visibleRows = Math.max(3, rows - LIST_TOP - 3);
+    // Rows the content pane may draw on, minus what the pane itself spends.
+    const bodyHeight = Math.max(4, rows - 2);
+    const contentHeight = Math.max(2, bodyHeight - 3);
+    const visibleRows = Math.max(2, contentHeight - 2);
     const selected = filtered[cursor];
-    // Keep the cursor on screen without a scroll library.
     useEffect(() => {
         setOffset((current) => {
             if (cursor < current)
@@ -116,21 +98,9 @@ export function App({ outDir, anyProject, onDone }) {
             return current;
         });
     }, [cursor, visibleRows]);
-    // ---- details, loaded for whatever is under the cursor ----------------
-    //
-    // Debounced, because holding an arrow key should not queue twenty parses of a
-    // 260 MB file.
-    // ---- prefill the window -------------------------------------------------
-    //
-    // Bounded on purpose: only what is on screen, three at a time, and never a
-    // file already in the cache. Filling all 720 would mean parsing hundreds of
-    // megabytes for rows nobody has looked at.
+    // ---- details, loaded for whatever is under the cursor --------------------
     useEffect(() => {
         const window = filtered.slice(offset, offset + visibleRows);
-        // Big transcripts are left alone here and read only when the reader lands on
-        // one. Parsing a 268 MB session to fill in a column of file sizes is not a
-        // trade worth making, and doing thirty of them at once is what killed the
-        // process.
         const wanted = window.filter((ref) => !cache.has(`${ref.agent}:${ref.id}`) && (ref.bytes ?? 0) < PREFILL_MAX_BYTES);
         if (wanted.length === 0)
             return;
@@ -150,8 +120,7 @@ export function App({ outDir, anyProject, onDone }) {
                     });
                 }
                 catch {
-                    // A session that cannot be read is a row with no metadata, not a
-                    // failed run. The real error is still available through `extract`.
+                    // A session that cannot be read is a row with no metadata.
                 }
             }
         })();
@@ -159,7 +128,6 @@ export function App({ outDir, anyProject, onDone }) {
             cancelled = true;
         };
     }, [filtered, offset, visibleRows, cache]);
-    // Whatever is under the cursor is always read, however large, one at a time.
     useEffect(() => {
         if (!selected)
             return;
@@ -188,20 +156,10 @@ export function App({ outDir, anyProject, onDone }) {
     }, [selected, cache]);
     // ---- actions ------------------------------------------------------------
     const actions = useMemo(() => {
-        const hasLlm = Boolean(process.env['CCOMPAT_API_KEY'] ?? process.env['CCOMPACTOR_API_KEY'] ?? process.env['ANTHROPIC_API_KEY'] ?? process.env['OPENAI_API_KEY']);
+        const hasLlm = Boolean(process.env['CCOMPACTOR_API_KEY'] ??
+            process.env['ANTHROPIC_API_KEY'] ??
+            process.env['OPENAI_API_KEY']);
         return [
-            // These two read as synonyms — "hand off" and "launch" both suggest the
-            // agent starts. They differ in who starts it, so the labels say that.
-            {
-                id: 'handoff',
-                label: 'Hand off — print the command for the next agent',
-                detail: 'fork this session into a new one and show the command; you run it yourself',
-            },
-            {
-                id: 'handoff-run',
-                label: 'Hand off — and start the next agent here',
-                detail: 'the same command, run for you in this terminal',
-            },
             {
                 id: 'extract',
                 label: 'Extract handoff — deterministic, no model',
@@ -210,7 +168,16 @@ export function App({ outDir, anyProject, onDone }) {
             {
                 id: 'extract-llm',
                 label: 'Extract handoff — with a model-written summary',
-                detail: hasLlm ? `adds L1 via the configured backend → ${outDir}/handoff.md` : 'no API key found; set CCOMPACTOR_API_KEY and CCOMPACTOR_BASE_URL',
+                detail: hasLlm
+                    ? `adds L1 via the configured backend → ${outDir}/handoff.md`
+                    : 'no API key found; set CCOMPACTOR_API_KEY and CCOMPACTOR_BASE_URL',
+            },
+            {
+                id: 'narrate',
+                label: 'Narrate — write L1 from the artifact',
+                detail: hasLlm
+                    ? `reads ${outDir}/handoff.md, not the transcript; ~5k tokens`
+                    : 'needs a model; and an artifact to narrate',
             },
             {
                 id: 'transcript',
@@ -222,6 +189,16 @@ export function App({ outDir, anyProject, onDone }) {
                 label: 'Readable transcript — including tool calls',
                 detail: `adds every tool call and its output → ${outDir}/transcript.md`,
             },
+            {
+                id: 'handoff',
+                label: 'Hand off — print the command for the next agent',
+                detail: 'fork this session into a new one and show the command; you run it yourself',
+            },
+            {
+                id: 'handoff-run',
+                label: 'Hand off — and start the next agent here',
+                detail: 'the same command, run for you in this terminal',
+            },
             {
                 id: 'verify',
                 label: 'Verify the artifact already in this directory',
@@ -236,19 +213,37 @@ export function App({ outDir, anyProject, onDone }) {
         setError(undefined);
         setResults([]);
         setProgress([]);
-        setScreen('running');
+        setModal({ kind: 'running' });
         const onProgress = (stage, message) => {
             setProgress((current) => [...current.slice(-8), `${stage}: ${message}`]);
         };
         try {
             if (actionId === 'verify') {
                 const { verify } = await import('../artifact/verify.js');
-                const report = await verify(outDir);
+                const r = await verify(outDir);
+                setResults([
+                    `${r.constraintsQuoted} quote(s) checked, ${r.missingQuotes.length} missing`,
+                    `${r.filesClaimed} file(s) claimed, ${r.filesChecked} looked for, ${r.missingFiles.length} gone`,
+                ]);
+                setModal({ kind: 'result' });
+                return;
+            }
+            if (actionId === 'narrate') {
+                const { narrate, writeNarrative, requireArtifact } = await import('../compact/narrate.js');
+                const { resolveAuto, build } = await import('../llm/index.js');
+                await requireArtifact(outDir);
+                const backend = build(resolveAuto());
+                if (!backend)
+                    throw new Error('narrate needs a model; set CCOMPACTOR_API_KEY and CCOMPACTOR_BASE_URL');
+                onProgress('narrate', `reading ${outDir}/handoff.md`);
+                const result = await narrate(outDir, backend);
+                await writeNarrative(outDir, result.narrative);
+                setLastArtifact(`${outDir}/handoff.md`);
                 setResults([
-                    `${report.constraintsQuoted} quote(s) checked, ${report.missingQuotes.length} missing`,
-                    `${report.filesClaimed} file(s) claimed, ${report.missingFiles.length} gone`,
+                    `${result.artifactTokens} input token(s)`,
+                    `written into ${outDir}/handoff.md`,
                 ]);
-                setScreen('done');
+                setModal({ kind: 'result' });
                 return;
             }
             const format = actionId.startsWith('transcript') ? 'transcript' : 'handoff';
@@ -263,15 +258,12 @@ export function App({ outDir, anyProject, onDone }) {
             }, onProgress);
             const artifact = result.written[0] ?? `${outDir}/handoff.md`;
             setLastArtifact(artifact);
-            setResults([
-                `${result.rendered.tokens} tokens in ${result.elapsedMs} ms`,
-                ...result.written,
-            ]);
+            setResults([`${result.rendered.tokens} tokens in ${result.elapsedMs} ms`, ...result.written]);
             if (actionId === 'handoff' || actionId === 'handoff-run') {
                 const chosen = target ?? targets[0];
                 if (!chosen) {
                     setError('no launchable agent found on PATH');
-                    setScreen('done');
+                    setModal({ kind: 'result' });
                     return;
                 }
                 const launch = plan(chosen, artifact, process.cwd());
@@ -284,32 +276,23 @@ export function App({ outDir, anyProject, onDone }) {
                     return;
                 }
             }
-            setScreen('done');
+            setModal({ kind: 'result' });
         }
         catch (caught) {
             setError(caught.message);
-            setScreen('done');
+            setModal({ kind: 'result' });
         }
         finally {
             busy.current = false;
         }
     }, [selected, outDir, targets, exit, onDone]);
-    const openActions = useCallback(() => {
-        setActionIndex(0);
-        setScreen('actions');
-    }, []);
-    const openPreview = useCallback(() => {
-        setPreviewScroll(0);
-        setScreen('preview');
-    }, []);
-    // ---- the top bar --------------------------------------------------------
     const runSelectedAction = useCallback(() => {
         const action = actions[actionIndex];
         if (!action)
             return;
         if (action.id === 'handoff' || action.id === 'handoff-run') {
             setTargetIndex(0);
-            setScreen('target');
+            setModal({ kind: 'target' });
             return;
         }
         void run(action.id);
@@ -320,170 +303,263 @@ export function App({ outDir, anyProject, onDone }) {
         if (action && target)
             void run(action.id, target);
     }, [actions, actionIndex, targetIndex, targets, run]);
-    /**
-     * The buttons for this screen. The key handler calls these same functions, so
-     * a click and a keystroke cannot drift apart — there is one implementation per
-     * action and two ways to reach it.
-     */
-    const barButtons = (() => {
-        if (screen === 'browse') {
-            return [
-                {
-                    id: 'search',
-                    key: '/',
-                    label: 'search',
-                    run: () => {
-                        setSearching(true);
-                        setQuery('');
-                    },
-                },
-                {
-                    id: 'all',
-                    key: '0',
-                    label: 'all agents',
-                    run: () => {
-                        setAgentsOff(new Set());
-                        setCursor(0);
-                    },
-                },
-                { id: 'open', key: '↵', label: 'quick look', run: openPreview },
-                { id: 'actions', key: 'a', label: 'actions', run: openActions },
-                {
-                    id: 'quit',
-                    key: 'q',
-                    label: 'quit',
-                    run: () => {
-                        exit();
-                        onDone(0);
-                    },
-                },
-            ];
+    const openActions = useCallback(() => {
+        setActionIndex(0);
+        setModal({ kind: 'actions' });
+    }, []);
+    const openPreview = useCallback(() => {
+        setPreviewScroll(0);
+        setModal({ kind: 'preview' });
+    }, []);
+    // ---- pages --------------------------------------------------------------
+    const loadArtifacts = useCallback(async () => {
+        const { readdir, stat } = await import('node:fs/promises');
+        const { join } = await import('node:path');
+        try {
+            const names = await readdir(outDir);
+            const entries = await Promise.all(names.map(async (name) => ({
+                name,
+                size: (await stat(join(outDir, name))).size,
+            })));
+            setArtifacts(entries.sort((a, b) => a.name.localeCompare(b.name)));
         }
-        if (screen === 'preview') {
-            return [
-                { id: 'actions', key: 'a', label: 'actions', run: openActions },
-                { id: 'back', key: 'esc', label: 'back to the list', run: () => setScreen('browse') },
-            ];
+        catch {
+            setArtifacts([]);
         }
-        if (screen === 'actions') {
-            return [
-                { id: 'run', key: '↵', label: 'run this', run: runSelectedAction },
-                { id: 'back', key: 'esc', label: 'back to the list', run: () => setScreen('browse') },
-            ];
+    }, [outDir]);
+    const showReport = useCallback(async (title, build) => {
+        setModal({ kind: 'report', title, lines: ['working …'] });
+        try {
+            setModal({ kind: 'report', title, lines: await build() });
         }
-        if (screen === 'target') {
-            return [
-                { id: 'fork', key: '↵', label: 'continue in this agent', run: runSelectedTarget },
-                { id: 'back', key: 'esc', label: 'back', run: () => setScreen('actions') },
-            ];
+        catch (caught) {
+            setModal({ kind: 'report', title, lines: [`error: ${caught.message}`] });
+        }
+    }, []);
+    const doctorLines = useCallback(async () => {
+        const { adapters } = await import('../adapters/index.js');
+        const { resolveAuto, selectionLabel } = await import('../llm/index.js');
+        const { installations } = await import('../install.js');
+        const out = [];
+        for (const adapter of adapters()) {
+            const available = adapter.available();
+            const count = available ? (await adapter.list({ anyProject: true })).length : 0;
+            out.push(`${available ? '✓' : '·'} ${adapter.kind.padEnd(10)} ${adapter.store()}  ${available ? `${count} session(s)` : 'not found'}`);
         }
-        if (screen === 'done') {
-            return [{ id: 'back', key: '↵', label: 'back to the list', run: () => setScreen('browse') }];
-        }
-        return [];
-    })();
-    const barSpans = barCells(barButtons, columns);
-    // The title and the counts are cells too, so the chips that follow are drawn
-    // and hit-tested at the same columns.
-    const chipCells = [
-        { id: 'title', text: ' ccompactor ' },
-        { id: 'count', text: `  ${filtered.length} of ${sessions.length}  ` },
-        { id: 'agent:all', text: ' all ' },
-        ...agents.map(([agent, count]) => ({ id: `agent:${agent}`, text: ` ${agent} ${count} ` })),
+        out.push('');
+        out.push('backends');
+        const auto = resolveAuto();
+        const key = (name) => (process.env[name] ? 'set' : 'not set');
+        out.push(`  none              always available`);
+        out.push(`  auto              resolves to ${selectionLabel(auto)}`);
+        out.push(`  api:anthropic     ANTHROPIC_API_KEY ${key('ANTHROPIC_API_KEY')}`);
+        out.push(`  api:openai        OPENAI_API_KEY ${key('OPENAI_API_KEY')}`);
+        out.push(`  api:compat/<m>    CCOMPACTOR_BASE_URL ${key('CCOMPACTOR_BASE_URL')}, CCOMPACTOR_API_KEY ${key('CCOMPACTOR_API_KEY')}`);
+        out.push('');
+        out.push('installs on PATH');
+        for (const entry of installations()) {
+            out.push(`  ${entry.version ?? 'did not answer'}  ${entry.path}${entry.current ? '   <- this one' : ''}`);
+        }
+        return out;
+    }, []);
+    // ---- the frame ----------------------------------------------------------
+    // The top bar is three blocks: the brand and the agent tabs on the left, the
+    // destination on the right, and whatever space is between them. The left block
+    // is laid out through `layoutCells` so the tab columns are real, and the pad is
+    // then whatever is left — computed from the laid-out width rather than from the
+    // sum of the strings, which is off by one per join and pushed the right-hand
+    // block off the end of the row.
+    const rightText = `out: ${outDir}${anyProject ? '' : ' · this project'}`;
+    const leftCells = [
+        { id: 'brand', text: ' ccompactor ' },
+        { id: 'gap', text: '  ' },
+        ...tabCells(agents, undefined, columns).map((cell) => ({ id: cell.id, text: cell.text })),
     ];
-    const chipSpans = layoutCells(chipCells, columns);
-    /**
-     * Act on a click at `x` on terminal row `row`.
-     *
-     * The row has to select which row's spans are searched. Looking through all of
-     * them and taking the first whose columns match sent a click on the `claude`
-     * chip at column 38 to the `[↵ quick look]` button, which happens to cover the
-     * same columns one row down — so filtering by agent opened the preview instead.
-     */
-    function clickCell(row, x) {
-        if (row === ROW_BAR) {
-            const bar = barSpans.find((span) => inSpan(span, x));
-            if (bar)
-                barButtons.find((b) => b.id === bar.id)?.run();
+    const topSpans = layoutCells(leftCells, columns);
+    const leftWidth = topSpans.length === 0 ? 0 : topSpans[topSpans.length - 1].end + 1;
+    // Three blocks means two joins, and the pad has to leave room for both. One
+    // short and the row is a column too wide, which Ink wraps onto a second line
+    // and the frame scrolls.
+    let right = rightText;
+    let pad = columns - leftWidth - right.length - 2;
+    if (pad < 1) {
+        // The destination is the first thing to go: it is context, not a control.
+        right = '';
+        pad = columns - leftWidth - 1;
+    }
+    if (pad < 0)
+        pad = 0;
+    /** Bottom-bar buttons for the current page. */
+    /** Bottom-bar buttons for the current page. */
+    const navButtons = [
+        {
+            id: 'pane',
+            key: '←→',
+            label: 'pane',
+            run: () => setFocus((f) => (f === 'menu' ? 'content' : 'menu')),
+        },
+        { id: 'up', key: '↑↓', label: 'move', run: () => move(1) },
+        { id: 'select', key: '⏎', label: 'select', run: () => activate() },
+        { id: 'filter', key: '/', label: 'filter', run: () => beginSearch() },
+        { id: 'back', key: 'esc', label: 'back', run: () => back() },
+        { id: 'help', key: '?', label: 'help', run: () => setModal({ kind: 'help' }) },
+    ];
+    const actButtons = page === 'sessions'
+        ? [
+            { id: 'look', key: 'v', label: 'look', run: openPreview },
+            { id: 'actions', key: 'a', label: 'actions', run: openActions },
+        ]
+        : page === 'artifacts'
+            ? [
+                { id: 'verify', key: 'V', label: 'verify', run: () => void run('verify') },
+                { id: 'reload', key: 'r', label: 'reload', run: () => void loadArtifacts() },
+            ]
+            : page === 'skill'
+                ? [
+                    { id: 'install', key: 'i', label: 'install', run: () => void doSkill('install') },
+                    { id: 'uninstall', key: 'u', label: 'uninstall', run: () => void doSkill('uninstall') },
+                    { id: 'path', key: 'p', label: 'path', run: () => void doSkill('path') },
+                ]
+                : page === 'update'
+                    ? [
+                        { id: 'check', key: 'c', label: 'check', run: () => void doUpdate(true) },
+                        { id: 'apply', key: 'U', label: 'update', run: () => void doUpdate(false) },
+                    ]
+                    : [];
+    const bar = bottomBar(navButtons.map((b) => ({ id: b.id, key: b.key, label: b.label })), actButtons.map((b) => ({ id: b.id, key: b.key, label: b.label })), columns, rows);
+    const barButtons = [...navButtons, ...actButtons];
+    const menuSpans = layoutCells(MENU.map((item) => ({ id: `menu:${item.id}`, text: ` ${item.label} ` })), SIDEBAR_WIDTH - 2);
+    function move(delta) {
+        if (modal) {
+            if (modal.kind === 'actions') {
+                setActionIndex((i) => Math.min(actions.length - 1, Math.max(0, i + delta)));
+            }
+            else if (modal.kind === 'target') {
+                setTargetIndex((i) => Math.min(targets.length - 1, Math.max(0, i + delta)));
+            }
             return;
         }
-        const chip = chipSpans.find((span) => inSpan(span, x));
-        if (!chip || !chip.id.startsWith('agent:'))
-            return;
-        const agent = chip.id.slice('agent:'.length);
-        if (agent === 'all') {
-            setAgentsOff(new Set());
-            setCursor(0);
+        if (focus === 'menu') {
+            setMenuCursor((i) => Math.min(MENU.length - 1, Math.max(0, i + delta)));
             return;
         }
-        setAgentFilter(agent);
+        if (page === 'sessions') {
+            setCursor((c) => Math.min(filtered.length - 1, Math.max(0, c + delta)));
+        }
     }
-    function handleMouse(event) {
-        if (event.kind === 'click') {
-            // The bar and the chips first: they sit on every screen, and a click that
-            // lands on one must not also be read as a list row.
-            if (event.y === ROW_BAR || event.y === ROW_CHIPS) {
-                clickCell(event.y, event.x);
-                return;
-            }
+    function openPage(next) {
+        if (next === 'exit') {
+            exit();
+            onDone(0);
+            return;
         }
-        if (screen === 'browse') {
-            if (event.kind === 'wheel-up') {
-                setCursor((c) => Math.max(0, c - 3));
-                return;
-            }
-            if (event.kind === 'wheel-down') {
-                setCursor((c) => Math.min(filtered.length - 1, c + 3));
-                return;
-            }
-            if (event.kind === 'click') {
-                const row = event.y - LIST_TOP + offset;
-                if (row >= 0 && row < filtered.length) {
-                    setCursor(row);
-                    openPreview();
-                }
+        setPage(next);
+        setFocus('content');
+        setMenuCursor(menuIndex(next));
+        if (next === 'artifacts')
+            void loadArtifacts();
+        if (next === 'doctor')
+            void showReport('Doctor', doctorLines);
+    }
+    function activate() {
+        if (modal) {
+            if (modal.kind === 'actions')
+                return runSelectedAction();
+            if (modal.kind === 'target')
+                return runSelectedTarget();
+            if (modal.kind === 'report' || modal.kind === 'result' || modal.kind === 'help') {
+                return setModal(undefined);
             }
             return;
         }
-        if (screen === 'preview') {
-            if (event.kind === 'wheel-up')
-                setPreviewScroll((s) => Math.max(0, s - 3));
-            if (event.kind === 'wheel-down')
-                setPreviewScroll((s) => s + 3);
+        if (focus === 'menu')
+            return openPage(MENU[menuCursor]?.id ?? 'sessions');
+        if (page === 'sessions')
+            return openPreview();
+        if (page === 'artifacts')
+            void run('verify');
+    }
+    function beginSearch() {
+        if (page !== 'sessions')
             return;
-        }
-        if (screen === 'actions' || screen === 'target') {
-            const both = screen === 'actions' ? actions.length : targets.length;
-            if (event.kind === 'wheel-up') {
-                const step = (i) => Math.max(0, i - 1);
-                if (screen === 'actions')
-                    setActionIndex(step);
-                else
-                    setTargetIndex(step);
-                return;
-            }
-            if (event.kind === 'wheel-down') {
-                const step = (i) => Math.min(both - 1, i + 1);
-                if (screen === 'actions')
-                    setActionIndex(step);
-                else
-                    setTargetIndex(step);
+        setSearching(true);
+        setQuery('');
+    }
+    function back() {
+        if (modal)
+            return setModal(undefined);
+        if (searching)
+            return setSearching(false);
+        if (focus === 'content')
+            return setFocus('menu');
+        setFocus('content');
+    }
+    async function doSkill(action) {
+        await showReport(`Skill · ${action}`, async () => {
+            const { install, uninstall, skillTargets, payloadDir } = await import('../skill/index.js');
+            if (action === 'install')
+                return await install();
+            if (action === 'uninstall')
+                return await uninstall();
+            return [
+                `payload: ${payloadDir()}`,
+                ...skillTargets().map((t) => `target: ${t.dir}`),
+            ];
+        });
+    }
+    async function doUpdate(check) {
+        await showReport(`Update${check ? ' · check' : ''}`, async () => {
+            const { update } = await import('../update/index.js');
+            const result = await update({ check });
+            return [
+                `${result.current} → ${result.latest}  (${result.kind})`,
+                result.location,
+                '',
+                ...result.message.split('\n'),
+            ];
+        });
+    }
+    function setAgentFilter(agent) {
+        const known = agents.map(([name]) => name);
+        setAgentsOff(new Set(known.filter((name) => name !== agent)));
+        setCursor(0);
+    }
+    // ---- mouse --------------------------------------------------------------
+    function handleMouse(event) {
+        // A modal owns the pointer while it is open. This has to come first: written
+        // the other way round, the early return narrowed `modal` to `undefined` and
+        // the wheel could never reach the quick look it was scrolling.
+        if (modal) {
+            if (event.kind === 'wheel-up' || event.kind === 'wheel-down') {
+                const delta = event.kind === 'wheel-up' ? -3 : 3;
+                if (modal.kind === 'preview') {
+                    setPreviewScroll((s) => Math.max(0, s + delta));
+                }
+                else if (modal.kind === 'actions') {
+                    setActionIndex((i) => Math.min(actions.length - 1, Math.max(0, i + (delta > 0 ? 1 : -1))));
+                }
+                else if (modal.kind === 'target') {
+                    setTargetIndex((i) => Math.min(targets.length - 1, Math.max(0, i + (delta > 0 ? 1 : -1))));
+                }
                 return;
             }
-            if (event.kind === 'click') {
-                const row = event.y - MENU_TOP;
-                if (row < 0 || row >= both)
+            if (event.kind === 'click' && (modal.kind === 'actions' || modal.kind === 'target')) {
+                const itemTop = modalItemTop(modalContent().lines.length);
+                // Action dialogs put a detail line under every label, so the clickable
+                // stride is two rows, not one.
+                const raw = event.y - itemTop;
+                const row = modal.kind === 'actions' ? Math.floor(raw / 2) : raw;
+                const count = modal.kind === 'actions' ? actions.length : targets.length;
+                if (row < 0 || row >= count)
                     return;
-                // A click on a menu item runs it, which is what clicking a menu item
-                // does everywhere else.
-                if (screen === 'actions') {
+                if (modal.kind === 'actions') {
                     setActionIndex(row);
                     const action = actions[row];
                     if (!action)
                         return;
                     if (action.id === 'handoff' || action.id === 'handoff-run') {
                         setTargetIndex(0);
-                        setScreen('target');
+                        setModal({ kind: 'target' });
                         return;
                     }
                     void run(action.id);
@@ -496,11 +572,54 @@ export function App({ outDir, anyProject, onDone }) {
                         void run(action.id, target);
                 }
             }
+            return;
+        }
+        if (event.kind === 'click') {
+            const barCell = bar.cells.find((c) => inCell(c, event.x));
+            if (event.y === bar.row && barCell) {
+                const button = barButtons.find((b) => b.id === barCell.id.replace(/^(nav|act):/, ''));
+                if (button)
+                    button.run();
+                return;
+            }
+            if (event.y === ROW_TOP) {
+                const cell = topSpans.find((c) => inCell(c, event.x));
+                if (cell?.id === 'agent:all') {
+                    setAgentsOff(new Set());
+                    setCursor(0);
+                    return;
+                }
+                if (cell?.id.startsWith('agent:')) {
+                    setAgentFilter(cell.id.slice('agent:'.length));
+                }
+                return;
+            }
+            // The sidebar.
+            if (event.x <= SIDEBAR_WIDTH) {
+                const row = event.y - SIDEBAR_TOP;
+                const item = MENU[row];
+                if (item) {
+                    setMenuCursor(row);
+                    openPage(item.id);
+                }
+                return;
+            }
+            if (page === 'sessions') {
+                const row = event.y - SIDEBAR_TOP + 1 + offset;
+                if (row >= 0 && row < filtered.length) {
+                    setCursor(row);
+                    setFocus('content');
+                    openPreview();
+                }
+            }
+            return;
+        }
+        if (event.kind === 'wheel-up' || event.kind === 'wheel-down') {
+            const delta = event.kind === 'wheel-up' ? -3 : 3;
+            if (page === 'sessions')
+                setCursor((c) => Math.min(filtered.length - 1, Math.max(0, c + delta)));
         }
     }
-    // The listener is installed once and reads the handler through a ref. Written
-    // the other way it has to list every value the handler closes over, and a
-    // missed dependency silently freezes a click on a stale screen.
     const mouseRef = useRef(handleMouse);
     mouseRef.current = handleMouse;
     useEffect(() => {
@@ -520,8 +639,7 @@ export function App({ outDir, anyProject, onDone }) {
     useInput((input, key) => {
         // Mouse sequences arrive on the same stream and Ink's key parser hands the
         // unrecognised remainder through as typed text, so a click while the search
-        // box is open spelled `[<0;3;3M` into the query. `mouse.ts` consumes them
-        // for its own use; this stops the leftovers reaching a text field.
+        // box is open spelled `[<0;3;3M` into the query.
         if (/\u001b?\[<\d+;\d+;\d+[Mm]/.test(input))
             return;
         if (key.ctrl && input === 'c') {
@@ -529,51 +647,8 @@ export function App({ outDir, anyProject, onDone }) {
             onDone(0);
             return;
         }
-        if (screen === 'running')
-            return;
-        if (screen === 'done') {
-            if (key.return || key.escape || input === 'q') {
-                setScreen('browse');
-            }
-            return;
-        }
-        if (screen === 'actions') {
-            if (key.upArrow)
-                setActionIndex((i) => Math.max(0, i - 1));
-            if (key.downArrow)
-                setActionIndex((i) => Math.min(actions.length - 1, i + 1));
-            if (key.escape)
-                setScreen('browse');
-            if (key.return)
-                runSelectedAction();
+        if (modal?.kind === 'running')
             return;
-        }
-        if (screen === 'target') {
-            if (key.upArrow)
-                setTargetIndex((i) => Math.max(0, i - 1));
-            if (key.downArrow)
-                setTargetIndex((i) => Math.min(targets.length - 1, i + 1));
-            if (key.escape)
-                setScreen('actions');
-            if (key.return)
-                runSelectedTarget();
-            return;
-        }
-        if (screen === 'preview') {
-            if (key.escape || input === 'q') {
-                setScreen('browse');
-                return;
-            }
-            const lines = selected ? (cache.get(`${selected.agent}:${selected.id}`)?.preview.length ?? 0) : 0;
-            if (key.upArrow)
-                setPreviewScroll((s) => Math.max(0, s - 1));
-            if (key.downArrow)
-                setPreviewScroll((s) => Math.min(Math.max(0, lines - 1), s + 1));
-            if (input === 'a' || input === 'h' || key.return)
-                openActions();
-            return;
-        }
-        // browse
         if (searching) {
             if (key.return || key.escape)
                 setSearching(false);
@@ -585,123 +660,211 @@ export function App({ outDir, anyProject, onDone }) {
             }
             return;
         }
-        if (input === 'q') {
-            exit();
-            onDone(0);
-            return;
-        }
-        if (input === '/') {
-            setSearching(true);
-            setQuery('');
-            return;
-        }
-        if (input === 'c') {
-            setAgentFilter('claude');
+        if (key.leftArrow || key.rightArrow || key.tab) {
+            setFocus((f) => (f === 'menu' ? 'content' : 'menu'));
             return;
         }
-        if (input === 'x') {
-            setAgentFilter('codex');
-            return;
-        }
-        if (input === 'p') {
-            setAgentFilter('pi');
+        if (key.upArrow)
+            return move(-1);
+        if (key.downArrow)
+            return move(1);
+        if (key.escape)
+            return back();
+        if (key.return)
+            return activate();
+        if (input === '?')
+            return setModal({ kind: 'help' });
+        if (input === 'q' && !modal) {
+            exit();
+            onDone(0);
             return;
         }
-        // `a` used to clear the agent filter here and open actions in the preview
-        // pane, so the hint line was lying on one of the two screens. One key, one
-        // meaning: `a` is actions everywhere, and `0` is the whole list.
+        if (input === '/')
+            return beginSearch();
         if (input === '0') {
             setAgentsOff(new Set());
             setCursor(0);
             return;
         }
-        if (key.upArrow)
-            setCursor((c) => Math.max(0, c - 1));
-        if (key.downArrow)
-            setCursor((c) => Math.min(filtered.length - 1, c + 1));
-        if (key.return || input === ' ')
-            openPreview();
-        if (input === 'a' || input === 'e' || input === 'h')
-            openActions();
+        if (input === 'c')
+            return setAgentFilter('claude');
+        if (input === 'x')
+            return setAgentFilter('codex');
+        if (input === 'p')
+            return setAgentFilter('pi');
+        // The bottom bar is the single definition of what a key does: the key
+        // handler looks the key up in the same list the buttons are drawn from, so
+        // a shortcut cannot do one thing while its button does another.
+        const act = actButtons.find((b) => b.key === input);
+        if (act)
+            act.run();
     });
-    function setAgentFilter(agent) {
-        const known = agents.map(([name]) => name);
-        setAgentsOff(new Set(known.filter((name) => name !== agent)));
-        setCursor(0);
-    }
     // ---- render -------------------------------------------------------------
-    if (loading)
-        return _jsx(Text, { color: THEME.yellow, children: loading });
-    const layout = layoutFor(columns, filtered.length > 0 ? filtered : sessions);
-    const chips = (_jsx(Box, { children: chipSpans.map((span, i) => {
-            const prefix = i > 0 ? ' ' : '';
-            if (span.id === 'title') {
-                return (_jsx(Text, { bold: true, backgroundColor: THEME.yellow, color: THEME.onYellow, children: span.text }, span.id));
-            }
-            if (span.id === 'count') {
-                return (_jsx(Text, { color: THEME.muted, children: span.text }, span.id));
-            }
-            const agent = span.id.slice('agent:'.length);
-            const on = agent === 'all' ? agentsOff.size === 0 : !agentsOff.has(agent);
-            return (_jsx(Text, { ...(on
+    if (loading) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, backgroundColor: THEME.yellow, color: THEME.onYellow, children: ' ccompactor ' }), _jsx(Text, { color: THEME.yellowInk, children: loading })] }));
+    }
+    const menuWidth = SIDEBAR_WIDTH - 2;
+    const menu = (_jsx(Box, { flexDirection: "column", width: SIDEBAR_WIDTH, borderStyle: "round", borderColor: focus === 'menu' ? THEME.yellow : THEME.stripeDim, children: MENU.map((item, i) => {
+            const active = page === item.id;
+            const cursorHere = focus === 'menu' && menuCursor === i;
+            return (_jsxs(Text, { ...(active
                     ? { backgroundColor: THEME.yellow, color: THEME.onYellow, bold: true }
-                    : { color: THEME.muted }), children: prefix + span.text }, span.id));
+                    : { color: THEME.muted }), children: [cursorHere ? '❯' : ' ', item.label.padEnd(menuWidth - 1)] }, item.id));
         }) }));
-    // The action bar. Every shortcut on this screen is also a button, so the
-    // screen can be driven without knowing any of them.
-    const actionBar = (_jsxs(Box, { children: [barSpans.map((span, i) => (_jsx(Text, { backgroundColor: THEME.yellow, color: THEME.onYellow, bold: true, children: (i > 0 ? ' ' : '') + span.text }, span.id))), barSpans.length === 0 && _jsx(Text, { children: " " })] }));
-    // The bar carries the actions, so this line only has to explain the things
-    // that are not buttons: moving around.
-    const hints = screen === 'browse'
-        ? `${sessions.length > visibleRows ? `${cursor + 1}/${filtered.length} · ` : ''}click a row, scroll, or type c/x/p// to narrow`
-        : screen === 'preview'
-            ? 'scroll with the wheel or ↑↓'
-            : screen === 'actions' || screen === 'target'
-                ? 'click an item, or ↑↓ then enter'
-                : '';
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: hazard(columns).map((cell, i) => (_jsx(Text, { color: cell.dim ? THEME.stripeDim : THEME.yellow, children: cell.ch }, i))) }), chips, actionBar, screen === 'browse' && (_jsxs(_Fragment, { children: [_jsx(Columns, { layout: layout, width: columns }), _jsx(Box, { flexDirection: "column", children: filtered.slice(offset, offset + visibleRows).map((ref, i) => {
-                            const index = offset + i;
-                            const active = index === cursor;
-                            const meta = cache.get(`${ref.agent}:${ref.id}`);
-                            return (_jsx(Row, { ref_: ref, active: active, layout: layout, details: meta }, ref.path));
-                        }) })] })), screen === 'preview' && selected && (_jsx(Preview, { ref_: selected, details: cache.get(`${selected.agent}:${selected.id}`), scroll: previewScroll, height: visibleRows + 2, width: columns })), screen === 'actions' && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, color: THEME.yellowInk, children: ["What do you want to do with ", selected?.agent, ":", selected?.id.slice(0, 8), "?"] }), actions.map((action, i) => (_jsxs(Text, { ...(i === actionIndex
-                            ? { backgroundColor: THEME.yellow, color: THEME.onYellow, bold: true }
-                            : {}), children: [i === actionIndex ? '❯ ' : '  ', action.label, _jsxs(Text, { color: i === actionIndex ? THEME.onYellow : THEME.muted, children: ['  ', action.detail] })] }, action.id)))] })), screen === 'target' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: THEME.yellowInk, children: "Continue this session in which agent?" }), targets.length === 0 && _jsx(Text, { color: THEME.muted, children: "none found on PATH" }), targets.map((target, i) => (_jsxs(Text, { ...(i === targetIndex
-                            ? { backgroundColor: THEME.yellow, color: THEME.onYellow, bold: true }
-                            : {}), children: [i === targetIndex ? '❯ ' : '  ', target] }, target)))] })), screen === 'running' && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { bold: true, color: THEME.yellowInk, children: ["working on ", selected?.agent, ":", selected?.id.slice(0, 8), " \u2026 ", elapsedLabel()] }), progress.slice(-6).map((line, i) => (_jsxs(Text, { color: THEME.muted, children: ['  ', line] }, i)))] })), screen === 'done' && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [error ? (_jsxs(Text, { color: "#FF6B6B", children: ["error: ", error] })) : (_jsx(Text, { bold: true, color: THEME.yellowInk, children: "done" })), results.map((line, i) => (_jsxs(Text, { color: THEME.muted, children: ['  ', line] }, i))), lastArtifact && (_jsxs(Text, { color: THEME.muted, children: ['  ', "read it: ", lastArtifact] })), _jsx(Text, { color: THEME.muted, children: "press enter to go back" })] })), status.length > 0 && _jsx(Text, { color: THEME.yellowInk, children: status }), searching && screen === 'browse' && (_jsxs(Box, { children: [_jsxs(Text, { bold: true, color: THEME.yellow, children: ["search:", ' '] }), _jsx(Text, { children: query }), _jsx(Text, { color: THEME.yellowInk, children: "\u258F" })] })), screen !== 'done' && screen !== 'running' && hints.length > 0 && (_jsx(Text, { color: THEME.muted, children: hints }))] }));
-    function elapsedLabel() {
-        return '';
+    const contentWidth = Math.max(20, columns - SIDEBAR_WIDTH - 1);
+    const content = (_jsx(Box, { flexDirection: "column", width: contentWidth, borderStyle: "round", borderColor: focus === 'content' ? THEME.yellow : THEME.stripeDim, children: contentBody() }));
+    function contentBody() {
+        if (page === 'sessions')
+            return sessionsPage();
+        if (page === 'artifacts') {
+            return (_jsxs(_Fragment, { children: [_jsxs(Text, { color: THEME.muted, bold: true, children: [' ', artifacts.length === 0 ? `nothing in ${outDir}` : `${outDir} — ${artifacts.length} file(s)`, ' '] }), artifacts.map((file) => (_jsxs(Text, { color: THEME.muted, children: ['  ', file.name.padEnd(24), sizeLabel(file.size).padStart(10)] }, file.name))), _jsxs(Text, { color: THEME.muted, children: [' ', "V verifies the artifact against the transcript; r reloads this list", ' '] })] }));
+        }
+        if (page === 'settings') {
+            return (_jsxs(_Fragment, { children: [_jsxs(Text, { color: THEME.muted, bold: true, children: [' ', "Where things are written", ' '] }), _jsxs(Text, { children: ['  ', "output directory ", '  ', _jsx(Text, { color: THEME.yellowInk, children: outDir })] }), _jsxs(Text, { children: ['  ', "session scope ", '   ', _jsx(Text, { color: THEME.yellowInk, children: anyProject ? 'every project' : 'this project only' })] }), _jsxs(Text, { children: ['  ', "working directory", ' ', _jsx(Text, { color: THEME.yellowInk, children: process.cwd() })] }), _jsxs(Text, { color: THEME.muted, children: [' ', "Change these with --out and --project on the command line.", ' '] })] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsxs(Text, { color: THEME.muted, bold: true, children: [' ', MENU[menuIndex(page)]?.label ?? page, ' '] }), _jsx(Text, { color: THEME.muted, children: " press enter or click the menu to load this page " })] }));
     }
-}
-function layoutFor(columns, sessions) {
-    const longest = sessions.reduce((n, ref) => Math.max(n, ref.id.length), 0);
-    const id = Math.min(Math.max(longest, 36), 64);
-    const fixed = 2 + 8 + id + 10 + 18;
-    return {
-        id,
-        meta: columns - fixed >= 14,
-        size: columns - fixed >= 10,
-        cwd: columns - fixed - (columns - fixed >= 14 ? 14 : 0) >= 42,
-    };
-}
-function Columns({ layout, width: columns }) {
-    return (_jsxs(Text, { color: THEME.muted, bold: true, children: ['  ', 'AGENT'.padEnd(8), 'SESSION ID'.padEnd(layout.id), layout.meta ? 'MSGS'.padStart(7) + 'TURNS'.padStart(7) : '', layout.size ? 'SIZE'.padStart(10) : '', 'MODIFIED'.padStart(18), layout.cwd ? `  ${'CWD'}` : '', columns < 0 ? '' : ''] }));
-}
-function Row({ ref_, active, layout, details, }) {
-    const cwd = details?.cwd ?? '';
-    const shortCwd = cwd.length > 44 ? `…${cwd.slice(-42)}` : cwd;
-    const style = active ? { backgroundColor: THEME.yellow, color: THEME.onYellow, bold: true } : {};
-    return (_jsxs(Text, { ...style, children: [active ? '❯ ' : '  ', ref_.agent.padEnd(8), ref_.id.padEnd(layout.id), layout.meta
-                ? `${details ? String(details.messages) : '·'}`.padStart(7) +
-                    `${details ? String(details.userTurns) : '·'}`.padStart(7)
-                : '', layout.size ? sizeLabel(ref_.bytes).padStart(10) : '', new Date(ref_.mtime).toISOString().slice(0, 16).replace('T', ' ').padStart(18), layout.cwd ? `  ${shortCwd}` : ''] }));
-}
-function Preview({ ref_, details, scroll, height, width: columns, }) {
-    if (!details) {
-        return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: THEME.yellow, children: ["reading ", ref_.id, " \u2026"] }) }));
+    function sessionsPage() {
+        // One width, used by the header and every row. An agent id is 36 characters
+        // and a codex id is 60, so a fixed column either wastes the difference or
+        // lets the long ones run into the date.
+        const idWidth = Math.max(12, Math.min(38, contentWidth - 34));
+        return (_jsxs(_Fragment, { children: [_jsxs(Text, { color: THEME.muted, bold: true, children: [' ', searching ? `search: ${query}▏` : `${filtered.length} of ${sessions.length} session(s)`, agentsOff.size > 0 && !searching ? '  ·  filtered' : '', ' '] }), _jsxs(Text, { color: THEME.muted, children: [' ', 'AGENT'.padEnd(8), 'SESSION ID'.padEnd(idWidth + 2), 'MODIFIED'] }), filtered.slice(offset, offset + visibleRows).map((ref, i) => {
+                    const index = offset + i;
+                    const active = index === cursor && focus === 'content';
+                    const details = cache.get(`${ref.agent}:${ref.id}`);
+                    return (_jsxs(Text, { ...(active ? { backgroundColor: THEME.yellow, color: THEME.onYellow, bold: true } : {}), children: [active ? '❯ ' : '  ', ref.agent.padEnd(8), (ref.id.length > idWidth ? `…${ref.id.slice(-(idWidth - 1))}` : ref.id).padEnd(idWidth), '  ', new Date(ref.mtime).toISOString().slice(0, 16).replace('T', ' '), details && contentWidth > 74 ? `  ${details.messages} msg` : ''] }, ref.path));
+                }), filtered.length === 0 && (_jsx(Text, { color: THEME.muted, children: " nothing matches. Press esc to clear, or / to search again. " }))] }));
+    }
+    /**
+     * What a dialog contains.
+     *
+     * One function, used by the drawing *and* by the click mapping, so the row a
+     * dialog item is painted on is the row it answers on. Written as two places
+     * this is the bug the clickable bar already had once.
+     */
+    function modalContent() {
+        const width = Math.max(40, Math.min(columns - 8, 96));
+        const inner = width - 6;
+        const lines = [];
+        let title = '';
+        let hints = 'esc or ⏎ close';
+        let actionable = 0;
+        if (!modal)
+            return { title, lines, hints, actionable };
+        if (modal.kind === 'help') {
+            title = 'Keys';
+            lines.push(_jsxs(Text, { color: THEME.muted, children: ['  ', "\u2190\u2192 or tab move between the menu and the content"] }, "h1"), _jsxs(Text, { color: THEME.muted, children: ['  ', "\u2191\u2193 move within the focused pane"] }, "h2"), _jsxs(Text, { color: THEME.muted, children: ['  ', "\u23CE select \u00B7 / filter \u00B7 esc back \u00B7 ? help \u00B7 q quit"] }, "h3"), _jsxs(Text, { color: THEME.muted, children: ['  ', "Every cell of the top, side and bottom bars is clickable,"] }, "h4"), _jsxs(Text, { color: THEME.muted, children: ['  ', "and the mouse wheel scrolls the list and the quick look."] }, "h5"));
+        }
+        else if (modal.kind === 'actions') {
+            title = `What to do with ${selected?.agent}:${selected?.id.slice(0, 8)}`;
+            hints = '↑↓ choose · ⏎ run · esc close · click an item to run it';
+            actions.forEach((action, i) => {
+                const active = i === actionIndex;
+                lines.push(_jsxs(Text, { ...(active ? { backgroundColor: THEME.yellow, color: THEME.onYellow, bold: true } : {}), children: [active ? '❯ ' : '  ', action.label] }, action.id));
+                lines.push(_jsxs(Text, { color: THEME.muted, children: ['    ', action.detail.slice(0, inner - 4)] }, `${action.id}-d`));
+            });
+            actionable = actions.length;
+        }
+        else if (modal.kind === 'target') {
+            title = 'Continue this session in which agent?';
+            hints = '↑↓ choose · ⏎ continue · esc back';
+            if (targets.length === 0) {
+                lines.push(_jsxs(Text, { color: THEME.muted, children: ['  ', "none found on PATH"] }, "none"));
+            }
+            targets.forEach((target, i) => {
+                const active = i === targetIndex;
+                lines.push(_jsxs(Text, { ...(active ? { backgroundColor: THEME.yellow, color: THEME.onYellow, bold: true } : {}), children: [active ? '❯ ' : '  ', target] }, target));
+            });
+            actionable = targets.length;
+        }
+        else if (modal.kind === 'running') {
+            title = `working on ${selected?.agent}:${selected?.id.slice(0, 8)} …`;
+            hints = 'this closes itself when the work is done';
+            for (const line of progress.slice(-8)) {
+                lines.push(_jsxs(Text, { color: THEME.muted, children: ['  ', line.slice(0, inner)] }, line));
+            }
+            if (progress.length === 0) {
+                lines.push(_jsxs(Text, { color: THEME.muted, children: ['  ', "starting \u2026"] }, "start"));
+            }
+        }
+        else if (modal.kind === 'result') {
+            title = error ? 'Something went wrong' : 'Done';
+            if (error) {
+                lines.push(_jsxs(Text, { color: "#FF6B6B", children: ['  ', error.slice(0, inner)] }, "err"));
+            }
+            results.forEach((line, i) => lines.push(_jsxs(Text, { color: THEME.muted, children: ['  ', line.slice(0, inner)] }, i)));
+            if (lastArtifact) {
+                lines.push(_jsxs(Text, { color: THEME.muted, children: ['  ', "read it: ", lastArtifact] }, "art"));
+            }
+        }
+        else if (modal.kind === 'report') {
+            title = modal.title;
+            for (const line of modal.lines) {
+                lines.push(_jsxs(Text, { color: THEME.muted, children: ['  ', line.slice(0, inner)] }, line));
+            }
+        }
+        else if (modal.kind === 'preview') {
+            const details = selected ? cache.get(`${selected.agent}:${selected.id}`) : undefined;
+            title = selected ? `${selected.agent}:${selected.id}` : 'quick look';
+            hints = 'wheel or ↑↓ scroll · a actions · esc close';
+            if (!details) {
+                lines.push(_jsxs(Text, { color: THEME.yellow, children: ['  ', "reading \u2026"] }, "l"));
+            }
+            else {
+                lines.push(_jsxs(Text, { color: THEME.muted, children: ['  ', details.messages, " msg \u00B7 ", details.userTurns, " user turns \u00B7 ", details.toolCalls, " tool calls \u00B7", ' ', details.tokens, " tokens \u00B7 ", details.compactBoundaries, " compaction(s)"] }, "m"));
+                if (details.cwd) {
+                    lines.push(_jsxs(Text, { color: THEME.muted, children: ['  ', "cwd: ", details.cwd.slice(0, inner)] }, "c"));
+                }
+                const room = Math.max(2, bodyHeight - 8);
+                const all = details.preview;
+                const shown = all.slice(Math.max(0, all.length - room - previewScroll), all.length - previewScroll);
+                shown.forEach((line, i) => lines.push(_jsxs(Text, { children: [_jsx(Text, { color: line.role === 'user' ? THEME.yellow : THEME.muted, bold: line.role === 'user', children: line.role === 'user' ? '  user  ' : line.role === 'agent' ? '  agent ' : '  tool  ' }), _jsx(Text, { children: line.text.slice(0, inner - 8) })] }, `${line.evt}-${i}`)));
+            }
+        }
+        return { title, lines, hints, actionable };
     }
-    const lines = details.preview;
-    const shown = lines.slice(Math.max(0, lines.length - height - scroll + 1), lines.length - scroll);
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: THEME.muted, children: [ref_.agent, ":", ref_.id, '  ', details.messages, " msg \u00B7 ", details.userTurns, " user turns \u00B7 ", details.toolCalls, " tool calls \u00B7", ' ', details.tokens, " tokens \u00B7 ", details.compactBoundaries, " compaction(s)"] }), details.cwd && _jsxs(Text, { color: THEME.muted, children: ["cwd: ", details.cwd] }), details.branch && (_jsxs(Text, { color: THEME.muted, children: ["branch: ", details.branch, details.model ? ` · model: ${details.model}` : '', details.first ? ` · ${details.first.slice(0, 16).replace('T', ' ')} → ${details.last?.slice(0, 16).replace('T', ' ')}` : ''] })), _jsx(Text, { color: THEME.yellowInk, children: '─'.repeat(Math.max(10, Math.min(columns - 2, 100))) }), shown.map((line, i) => (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: line.role === 'user' ? THEME.yellow : THEME.muted, bold: line.role === 'user', children: line.role === 'user' ? 'user  ' : line.role === 'agent' ? 'agent ' : 'tool  ' }), _jsx(Text, { children: line.text.slice(0, Math.max(20, columns - 10)) })] }, `${line.evt}-${i}`))), lines.length === 0 && _jsx(Text, { color: THEME.muted, children: "no user or agent turns in this session" })] }));
+    /**
+     * The row the first clickable line of a dialog lands on.
+     *
+     * Derived from the same numbers the drawing uses rather than guessed: top bar
+     * (1) + the padding above the box + the border + the title.
+     */
+    function modalItemTop(lineCount) {
+        const box = lineCount + 4;
+        const padTop = Math.max(0, Math.floor((bodyHeight - box) / 2));
+        return padTop + 4;
+    }
+    /** A dialog, centred in the body. The frame stays visible around it. */
+    function modalBox() {
+        const { title, lines, hints } = modalContent();
+        const width = Math.max(40, Math.min(columns - 8, 96));
+        const room = Math.max(3, bodyHeight - 6);
+        const shown = lines.slice(0, room);
+        const box = shown.length + 4;
+        const padTop = Math.max(0, Math.floor((bodyHeight - box) / 2));
+        const padLeft = Math.max(0, Math.floor((columns - width) / 2));
+        return (_jsxs(Box, { flexDirection: "column", height: bodyHeight, children: [Array.from({ length: padTop }, (_, i) => (_jsx(Text, { children: " " }, `pad${i}`))), _jsxs(Box, { marginLeft: padLeft, flexDirection: "column", width: Math.min(width, columns - padLeft), borderStyle: "double", borderColor: THEME.yellow, children: [_jsx(Text, { bold: true, backgroundColor: THEME.yellow, color: THEME.onYellow, children: ` ${title} `.slice(0, width - 2).padEnd(width - 2) }), shown, _jsx(Text, { color: THEME.muted, children: ` ${hints}`.slice(0, width - 2).padEnd(width - 2) })] })] }));
+    }
+    return (
+    // One row short of the terminal. A frame exactly `rows` tall is written with
+    // a trailing newline, which scrolls the top bar off the screen.
+    _jsxs(Box, { flexDirection: "column", height: Math.max(6, rows - 1), children: [_jsxs(Box, { children: [topSpans.map((cell, i) => {
+                        const isTab = cell.id.startsWith('agent:');
+                        const agent = cell.id.slice('agent:'.length);
+                        const on = agent === 'all' ? agentsOff.size === 0 : !agentsOff.has(agent);
+                        const separator = i > 0 ? ' ' : '';
+                        if (cell.id === 'brand') {
+                            return (_jsx(Text, { bold: true, backgroundColor: THEME.yellow, color: THEME.onYellow, children: cell.text }, cell.id));
+                        }
+                        return (_jsx(Text, { ...(isTab && on
+                                ? { backgroundColor: THEME.yellow, color: THEME.onYellow, bold: true }
+                                : { color: THEME.muted }), children: separator + cell.text }, `${cell.id}-${i}`));
+                    }), pad > 0 && _jsx(Text, { color: THEME.muted, children: ' '.repeat(pad) }), right.length > 0 && (_jsx(Text, { color: THEME.muted, children: ` ${right.slice(0, Math.max(0, columns - leftWidth - pad - 1))}` }))] }), modal ? (modalBox()) : (_jsxs(Box, { height: bodyHeight, children: [menu, content] })), _jsx(Box, { children: bar.cells.map((cell, i) => {
+                    const isLabel = cell.id === 'navlabel' || cell.id === 'actlabel';
+                    return (_jsx(Text, { ...(isLabel
+                            ? { backgroundColor: THEME.yellow, color: THEME.onYellow, bold: true }
+                            : { color: THEME.muted }), children: (i > 0 && !isLabel ? '' : '') + cell.text }, `${cell.id}-${i}`));
+                }) }), status.length > 0 && _jsx(Text, { color: THEME.yellowInk, children: status })] }));
 }
 //# sourceMappingURL=App.js.map