klyro 0.1.45 → 0.1.47

package/dist/tui/app.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Klyro TUI - opencode-clean - no clumsy words, correct wrap, markdown, scroll
  * Header 3 rows, guide │ at col2, ● Klyro accent, prose wrapped at word boundaries
@@ -9,6 +9,8 @@ import { execFileSync } from 'node:child_process';
 import { TuiApprovalBridge } from './approval.js';
 import { parse as parseSlash, suggestCommands } from '../cli/slash/parser.js';
 import { tokens, g } from './tokens.js';
+import { initialScroll, scrollReducer, resolveTopRow, maxTopFor, } from './scroll-model.js';
+import { buildIndex, itemAtRow, MeasureCache } from './measure.js';
 let _id = 0;
 function nextId(p) { _id++; return `${p}-${_id}`; }
 function Header({ cwd, model, version, width }) {
@@ -42,29 +44,34 @@ function verbForTool(name) {
         return 'Edited';
     return 'Called';
 }
+/**
+ * Aggregator (scroll.md §9): merge CONSECUTIVE same-op tool events into one
+ * ActivityGroup. Never merge across a different op — read,read,edit,read →
+ * 3 groups, not 2. Group ids are content-derived (stable across regroups so
+ * scroll anchors and expansion state survive streaming appends).
+ */
 function groupTools(items) {
     const out = [];
     let cur = [];
+    let curVerb = null;
     const flush = () => {
         if (cur.length === 0)
             return;
-        const byVerb = new Map();
-        for (const it of cur) {
-            const v = verbForTool(it.name);
-            if (!byVerb.has(v))
-                byVerb.set(v, []);
-            byVerb.get(v).push(it);
-        }
-        for (const [verb, list] of byVerb) {
-            const totalMs = list.reduce((s, x) => s + (x.latencyMs ?? 0), 0);
-            const status = list.some((x) => x.isError || x.status === 'error') ? 'error' : list.some((x) => x.status === 'running') ? 'running' : 'done';
-            out.push({ id: nextId('g'), verb, items: list, totalMs, status });
-        }
+        const verb = curVerb;
+        const totalMs = cur.reduce((s, x) => s + (x.latencyMs ?? 0), 0);
+        const status = cur.some((x) => x.isError || x.status === 'error') ? 'error' : cur.some((x) => x.status === 'running') ? 'running' : 'done';
+        out.push({ id: `g:${verb}:${cur.map((i) => i.id_call).join('|')}`, verb, items: cur, totalMs, status });
         cur = [];
+        curVerb = null;
     };
     for (const it of items) {
-        if (it.kind === 'tool')
+        if (it.kind === 'tool') {
+            const v = verbForTool(it.name);
+            if (curVerb !== null && v !== curVerb)
+                flush(); // different op → break the group
+            curVerb = v;
             cur.push(it);
+        }
         else {
             flush();
             out.push(it);
@@ -94,78 +101,86 @@ function MarkdownText({ text, dim, width }) {
     // Render as single line with bold segments — Ink will wrap the parent Box
     return _jsx(Text, { wrap: "wrap", children: parts });
 }
-// Chat scroll state: scrollOffset, pinned (user scrolled away from bottom),
-// pendingNew (rows arrived while pinned), and a commands bag for key handlers.
-// The `tick` prop is a monotonic value that increments on every content mutation,
-// including in-place text growth during streaming (appendDelta mutates by index,
-// so transcript.length does not change on a delta — the effect must fire anyway).
+// Chat scroll — scroll.md §5 anchor model adapted to Ink.
+//
+// Position is an Anchor ({itemId, lineInItem}), never a raw row index (I4),
+// resolved per frame against measured *display lines* (I3, see measure.ts).
+// While anchored to 'bottom', new output follows; scrolling up pins to an
+// item and freezes, accumulating newSinceUnstick lines for the `↓ N new` pill.
+//
+// Deviation from §7.1: Ink cannot overlay rows, so the badge renders as a
+// one-line pill above the input instead of overwriting the last viewport row.
 function useChatScroll(opts) {
-    const { totalRows, viewportH, messageBoundaries, tick } = opts;
-    const [scrollOffset, setScrollOffset] = useState(0);
-    const [pinned, setPinned] = useState(false);
-    const [pendingNew, setPendingNew] = useState(0);
-    const pinnedRef = useRef(false);
-    const maxOffset = Math.max(0, totalRows - viewportH);
-    // 1-line tolerance: maxOffset can shift by 1 during streaming and leave us
-    // at maxOffset - 1, which would otherwise be "not at bottom". The +1 tolerance
-    // keeps follow-tail engaged through that off-by-one.
-    const isAtBottom = scrollOffset + 1 >= maxOffset;
-    const recomputePinned = useCallback((next) => {
-        const atBottom = next + 1 >= maxOffset;
-        pinnedRef.current = !atBottom;
-        setPinned(!atBottom);
-        if (atBottom)
-            setPendingNew(0);
-    }, [maxOffset]);
-    // Watch `tick` — fires on every content change (add, remove, in-place delta).
-    const lastTickRef = useRef(tick);
-    const lastMaxOffsetRef = useRef(maxOffset);
-    const firstEffectRef = useRef(true);
+    const { keys, heights, viewportH, width } = opts;
+    const [state, setState] = useState(initialScroll);
+    const index = useMemo(() => buildIndex(heights), [heights]);
+    const boundaries = useMemo(() => index.offsets.filter((_, i) => heights[i] > 0), [index, heights]);
+    const ctx = {
+        count: keys.length,
+        offsetOf: (i) => index.offsets[i] ?? 0,
+        keyOf: (i) => keys[i] ?? '',
+        indexAt: (row) => itemAtRow(index.offsets, row),
+        total: index.total,
+        viewportH,
+    };
+    const ctxRef = useRef(ctx);
+    ctxRef.current = ctx;
+    const boundariesRef = useRef(boundaries);
+    boundariesRef.current = boundaries;
+    // Auto-follow wiring (§6): measured total deltas → CONTENT_GREW;
+    // width change → REFLOW (§12). Initial anchor is 'bottom' → follow-tail.
+    const prevTotalRef = useRef(index.total);
+    const prevWidthRef = useRef(width);
     useEffect(() => {
-        if (firstEffectRef.current) {
-            // Initial mount: if there's content, follow the tail (preserves the
-            // pre-refactor behavior where scrollOffset was 0 only on empty state).
-            firstEffectRef.current = false;
-            lastTickRef.current = tick;
-            lastMaxOffsetRef.current = maxOffset;
-            if (maxOffset > 0) {
-                setScrollOffset(maxOffset);
-            }
+        const prevTotal = prevTotalRef.current;
+        const prevWidth = prevWidthRef.current;
+        prevTotalRef.current = index.total;
+        prevWidthRef.current = width;
+        if (width !== prevWidth) {
+            setState((s) => scrollReducer(s, { type: 'REFLOW' }, ctxRef.current));
             return;
         }
-        if (tick === lastTickRef.current)
-            return;
-        lastTickRef.current = tick;
-        const grew = maxOffset - lastMaxOffsetRef.current;
-        lastMaxOffsetRef.current = maxOffset;
-        if (pinnedRef.current) {
-            if (grew > 0)
-                setPendingNew((p) => p + grew);
-        }
-        else {
-            // FollowTail: snap to the new bottom.
-            setScrollOffset(maxOffset);
+        const delta = index.total - prevTotal;
+        if (delta !== 0) {
+            setState((s) => scrollReducer(s, { type: 'CONTENT_GREW', lines: delta }, ctxRef.current));
         }
-    }, [tick, maxOffset]);
-    const commands = {
-        lineUp: () => { const next = Math.max(0, scrollOffset - 1); setScrollOffset(next); recomputePinned(next); },
-        lineDown: () => { const next = Math.min(maxOffset, scrollOffset + 1); setScrollOffset(next); recomputePinned(next); },
+    }, [index.total, width]);
+    const dispatch = useCallback((a) => {
+        setState((s) => scrollReducer(s, a, ctxRef.current));
+    }, []);
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const commands = useMemo(() => ({
+        lineUp: () => dispatch({ type: 'BY_LINES', delta: -1 }),
+        lineDown: () => dispatch({ type: 'BY_LINES', delta: 1 }),
         pageUp: () => {
-            const prev = [...messageBoundaries].reverse().find((b) => b < scrollOffset);
-            const next = prev ?? Math.max(0, scrollOffset - viewportH);
-            setScrollOffset(next);
-            recomputePinned(next);
+            const c = ctxRef.current;
+            const top = resolveTopRow(stateRef.current, c).topRow;
+            const prev = [...boundariesRef.current].reverse().find((b) => b < top);
+            const next = prev ?? Math.max(0, top - (c.viewportH - 1)); // 1-line overlap
+            dispatch({ type: 'BY_LINES', delta: next - top });
         },
         pageDown: () => {
-            const nxt = messageBoundaries.find((b) => b > scrollOffset);
-            const next = nxt ?? Math.min(maxOffset, scrollOffset + viewportH);
-            setScrollOffset(next);
-            recomputePinned(next);
+            const c = ctxRef.current;
+            const top = resolveTopRow(stateRef.current, c).topRow;
+            const nxt = boundariesRef.current.find((b) => b > top);
+            const next = nxt ?? Math.min(maxTopFor(c), top + (c.viewportH - 1));
+            dispatch({ type: 'BY_LINES', delta: next - top });
         },
-        jumpTop: () => { setScrollOffset(0); recomputePinned(0); },
-        jumpBottom: () => { setScrollOffset(maxOffset); recomputePinned(maxOffset); },
+        jumpTop: () => dispatch({ type: 'TO_TOP' }),
+        jumpBottom: () => dispatch({ type: 'TO_BOTTOM' }),
+    }), [dispatch]);
+    const resolved = resolveTopRow(state, ctx);
+    const maxTop = maxTopFor(ctx);
+    const pinned = state.anchor.mode === 'pinned' && !resolved.atBottom;
+    return {
+        topRow: resolved.topRow,
+        atBottom: resolved.atBottom,
+        maxTop,
+        pinned,
+        pendingNew: state.newSinceUnstick,
+        commands,
     };
-    return { scrollOffset, setScrollOffset, pinned, pendingNew, isAtBottom, maxOffset, commands };
 }
 export function App(props) {
     const { stdout } = useStdout();
@@ -179,27 +194,145 @@ export function App(props) {
     const [queuedInputs, setQueuedInputs] = useState([]);
     const [expandedGroups, setExpandedGroups] = useState(new Set());
     const streamingIdRef = useRef(null);
+    // Input history for contextual ↑/↓ (scroll.md §8.3, S6)
+    const [history, setHistory] = useState([]);
+    const [histIdx, setHistIdx] = useState(null);
+    const pushHistory = useCallback((v) => {
+        setHistory((prev) => (prev[prev.length - 1] === v ? prev : [...prev.slice(-99), v]));
+        setHistIdx(null);
+    }, []);
+    // Live scroll control for external drivers (mouse-wheel tap in repl.ts).
+    const scrollCmdsRef = useRef({ line: (_d) => { }, bottom: () => { } });
     const width = stdout?.columns ?? 100;
     const height = stdout?.rows ?? 30;
     const isFullscreen = props.isFullscreen ?? false;
     const grouped = groupTools(transcript);
     const viewportH = Math.max(5, height - 10);
-    const totalRows = grouped.length + (plan.length > 0 ? 1 : 0) + 2;
-    const messageBoundaries = useMemo(() => grouped.map((_, i) => i), [grouped]);
-    // Monotonic tick: increments on every render, so the scroll hook fires
-    // for every content mutation — including in-place text deltas.
-    const tickRef = useRef(0);
-    useEffect(() => { tickRef.current += 1; });
-    const scroll = useChatScroll({
-        totalRows,
-        viewportH,
-        messageBoundaries,
-        tick: tickRef.current,
-    });
-    const { scrollOffset, isAtBottom, maxOffset, pinned, pendingNew, commands } = scroll;
+    // Degraded mode (§12): terminal < 10 rows → transcript hidden, input+status only.
+    const tiny = height < 10;
+    // --- Measured blocks (§4): one entry per grouped item + tail blocks ------
+    // Heights are estimated wrapped display lines; the cache makes streaming
+    // O(1) (only the tail sig changes per tick, I6).
+    const measureCacheRef = useRef(null);
+    if (!measureCacheRef.current)
+        measureCacheRef.current = new MeasureCache();
+    const cache = measureCacheRef.current;
+    const blocks = useMemo(() => {
+        const out = [];
+        grouped.forEach((entry, gi) => {
+            if (entry.verb) {
+                const gr = entry;
+                out.push({
+                    key: gr.id,
+                    desc: { kind: 'group', count: gr.items.length, expanded: expandedGroups.has(gr.id) },
+                    groupIndex: gi,
+                    tail: null,
+                });
+                return;
+            }
+            const it = entry;
+            if (it.kind === 'text' && it.role === 'user') {
+                out.push({ key: it.id, desc: { kind: 'user', text: it.text }, groupIndex: gi, tail: null });
+            }
+            else if (it.kind === 'text') {
+                out.push({ key: it.id, desc: { kind: 'assistant', text: it.text }, groupIndex: gi, tail: null });
+            }
+            else if (it.kind === 'error') {
+                out.push({ key: it.id, desc: { kind: 'error', message: it.message }, groupIndex: gi, tail: null });
+            }
+            else if (it.kind === 'policy') {
+                out.push({ key: it.id, desc: { kind: 'policy' }, groupIndex: gi, tail: null });
+            }
+            else if (it.kind === 'file_changed') {
+                out.push({ key: it.id, desc: { kind: 'file', path: it.path }, groupIndex: gi, tail: null });
+            }
+            else if (it.kind === 'diff') {
+                out.push({
+                    key: it.id,
+                    desc: { kind: 'diff', hunks: it.hunks.map((h) => ({ path: h.path, lines: h.lines.map((l) => l.text) })) },
+                    groupIndex: gi,
+                    tail: null,
+                });
+            }
+        });
+        if (plan.length > 0) {
+            out.push({
+                key: 'tail:plan',
+                desc: { kind: 'plan', done: plan.filter((p) => p.status === 'done').length, total: plan.length },
+                groupIndex: null,
+                tail: 'plan',
+            });
+        }
+        if (status.status === 'running' && !streamingIdRef.current) {
+            out.push({ key: 'tail:thinking', desc: { kind: 'thinking' }, groupIndex: null, tail: 'thinking' });
+        }
+        if (queuedInputs.length > 0) {
+            out.push({ key: 'tail:queued', desc: { kind: 'queued', count: queuedInputs.length }, groupIndex: null, tail: 'queued' });
+        }
+        return out;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [grouped, plan, status.status, queuedInputs.length, expandedGroups, width, transcript]);
+    const blockKeys = useMemo(() => blocks.map((b) => b.key), [blocks]);
+    const blockHeights = useMemo(() => blocks.map((b) => cache.heightFor(b.key, b.desc, width)), [blocks, width, cache]);
+    const scroll = useChatScroll({ keys: blockKeys, heights: blockHeights, viewportH, width });
+    const { topRow, maxTop, pinned, pendingNew, commands } = scroll;
     const trackH = viewportH;
-    const thumbPos = maxOffset === 0 ? 0 : Math.round((scrollOffset / maxOffset) * (trackH - 1));
-    const visibleGrouped = isFullscreen ? grouped.slice(scrollOffset, scrollOffset + viewportH) : grouped;
+    const thumbPos = maxTop === 0 ? 0 : Math.round((topRow / maxTop) * (trackH - 1));
+    // Slice *display lines* [topRow, topRow+viewportH): intersecting blocks only
+    // (§6.1 virtualization — only visible items are composed).
+    const endRow = topRow + viewportH;
+    let gi0 = grouped.length;
+    let gi1 = -1;
+    let showPlan = false;
+    let showThinking = false;
+    let showQueued = false;
+    if (!isFullscreen || tiny) {
+        gi0 = 0;
+        gi1 = grouped.length - 1;
+        showPlan = true;
+        showThinking = true;
+        showQueued = true;
+    }
+    else {
+        let row = 0;
+        for (let bi = 0; bi < blocks.length; bi++) {
+            const h = blockHeights[bi] ?? 0;
+            const bStart = row;
+            const bEnd = row + h;
+            row = bEnd;
+            if (bEnd <= topRow || bStart >= endRow || h === 0)
+                continue;
+            const b = blocks[bi];
+            if (b.groupIndex !== null) {
+                gi0 = Math.min(gi0, b.groupIndex);
+                gi1 = Math.max(gi1, b.groupIndex);
+            }
+            else if (b.tail === 'plan')
+                showPlan = true;
+            else if (b.tail === 'thinking')
+                showThinking = true;
+            else if (b.tail === 'queued')
+                showQueued = true;
+        }
+        if (gi1 < gi0) {
+            gi0 = 0;
+            gi1 = -1;
+        }
+    }
+    const visibleGrouped = isFullscreen && !tiny ? grouped.slice(gi0, gi1 + 1) : grouped;
+    // Publish live scroll control for the mouse-wheel tap (stable callbacks, latest ctx).
+    scrollCmdsRef.current = {
+        line: (d) => {
+            const n = Math.abs(Math.round(d));
+            for (let i = 0; i < n; i++) {
+                if (d < 0)
+                    commands.lineUp();
+                else
+                    commands.lineDown();
+            }
+        },
+        bottom: () => commands.jumpBottom(),
+    };
     useEffect(() => bridge.subscribe((p) => setAwaitingApproval(p !== null)), [bridge]);
     useEffect(() => {
         if (queuedInputs.length > 0 && status.status !== 'running' && !awaitingApproval) {
@@ -236,9 +369,13 @@ export function App(props) {
     const updateStatus = useCallback((s) => setStatus((p) => ({ ...p, ...s })), []);
     const updatePlan = useCallback((p) => setPlan(p), []);
     const clearTranscript = useCallback(() => { streamingIdRef.current = null; setTranscript([]); setPlan([]); }, []);
+    // Scroll control for external drivers (mouse-wheel tap in repl.ts, §8.4).
+    // Stored in refs so the callbacks stay stable while acting on latest state.
+    const scrollLines = useCallback((delta) => { scrollCmdsRef.current.line(delta); }, []);
+    const scrollToBottom = useCallback(() => { scrollCmdsRef.current.bottom(); }, []);
     const onMountedRef = useRef(props.onMounted);
     useEffect(() => { onMountedRef.current = props.onMounted; }, [props.onMounted]);
-    useEffect(() => { onMountedRef.current?.({ append, appendDelta, updateStatus, updatePlan, clearTranscript }); globalThis.__klyroAppAppend = append; globalThis.__klyroAppendDelta = appendDelta; globalThis.__klyroAppStatus = updateStatus; globalThis.__klyroAppPlan = updatePlan; return () => { delete globalThis.__klyroAppAppend; delete globalThis.__klyroAppendDelta; delete globalThis.__klyroAppStatus; delete globalThis.__klyroAppPlan; }; }, [append, appendDelta, updateStatus, updatePlan, clearTranscript]);
+    useEffect(() => { onMountedRef.current?.({ append, appendDelta, updateStatus, updatePlan, clearTranscript, scrollLines, scrollToBottom }); globalThis.__klyroAppAppend = append; globalThis.__klyroAppendDelta = appendDelta; globalThis.__klyroAppStatus = updateStatus; globalThis.__klyroAppPlan = updatePlan; return () => { delete globalThis.__klyroAppAppend; delete globalThis.__klyroAppendDelta; delete globalThis.__klyroAppStatus; delete globalThis.__klyroAppPlan; }; }, [append, appendDelta, updateStatus, updatePlan, clearTranscript, scrollLines, scrollToBottom]);
     const toggleGroup = (id) => setExpandedGroups((prev) => { const n = new Set(prev); if (n.has(id))
         n.delete(id);
     else
@@ -259,7 +396,7 @@ export function App(props) {
             return;
         }
         // Scroll keys (work in any mode, including while running).
-        if (isFullscreen && maxOffset > 0) {
+        if (isFullscreen && maxTop > 0) {
             if (key.home) {
                 commands.jumpTop();
                 return;
@@ -268,11 +405,15 @@ export function App(props) {
                 commands.jumpBottom();
                 return;
             }
-            if (key.pageUp || (key.ctrl && inputStr === 'u')) {
+            if (key.ctrl && inputStr === 'g') {
+                commands.jumpBottom();
+                return;
+            } // Ctrl+G → bottom (§8.4)
+            if (key.pageUp || (key.ctrl && inputStr === 'u') || (key.ctrl && inputStr === 'b')) {
                 commands.pageUp();
                 return;
             }
-            if (key.pageDown || (key.ctrl && inputStr === 'd')) {
+            if (key.pageDown || (key.ctrl && inputStr === 'd') || (key.ctrl && inputStr === 'f')) {
                 commands.pageDown();
                 return;
             }
@@ -299,14 +440,19 @@ export function App(props) {
                 void props.onSlash({ kind: 'quit' });
                 return;
             }
+            // Enter on empty input dismisses the badge (jump to bottom, §7.2)
             if (key.return) {
                 const v = input.trim();
-                if (!v)
+                if (!v) {
+                    if (pinned)
+                        commands.jumpBottom();
                     return;
+                }
                 if (queuedInputs.length >= 3)
                     return;
                 setQueuedInputs((prev) => [...prev, v]);
                 setInput('');
+                pushHistory(v);
                 return;
             }
             if (key.backspace || key.delete) {
@@ -317,11 +463,53 @@ export function App(props) {
                 setInput((v) => v + inputStr.replace(/\r\n/g, '\n').replace(/\r/g, '\n'));
             return;
         }
+        // Contextual ↑/↓ (§8.3): text in buffer (or browsing) → history;
+        // empty buffer → scroll viewport one line.
+        if (key.upArrow && !key.shift && !key.ctrl) {
+            if (input.trim() !== '' || histIdx !== null) {
+                if (history.length > 0) {
+                    const next = histIdx === null ? history.length - 1 : Math.max(0, histIdx - 1);
+                    setHistIdx(next);
+                    setInput(history[next] ?? '');
+                }
+                return;
+            }
+            if (isFullscreen && maxTop > 0) {
+                commands.lineUp();
+                return;
+            }
+        }
+        if (key.downArrow && !key.shift && !key.ctrl) {
+            if (histIdx !== null) {
+                const next = histIdx + 1;
+                if (next >= history.length) {
+                    setHistIdx(null);
+                    setInput('');
+                }
+                else {
+                    setHistIdx(next);
+                    setInput(history[next] ?? '');
+                }
+                return;
+            }
+            if (input.trim() !== '')
+                return; // single line with text, nothing newer
+            if (isFullscreen && maxTop > 0) {
+                commands.lineDown();
+                return;
+            }
+        }
+        // Enter on empty input dismisses the badge (jump to bottom, §7.2)
         if (key.return) {
             const v = input.trim();
-            if (!v)
+            if (!v) {
+                if (pinned)
+                    commands.jumpBottom();
                 return;
+            }
             setInput('');
+            setHistIdx(null);
+            pushHistory(v);
             setTranscript((prev) => [...prev, { id: nextId('user'), kind: 'text', text: v, role: 'user' }]);
             streamingIdRef.current = null;
             const cmd = parseSlash(v);
@@ -333,10 +521,13 @@ export function App(props) {
         }
         if (key.backspace || key.delete) {
             setInput((v) => v.slice(0, -1));
+            setHistIdx(null);
             return;
         }
-        if (!key.ctrl && !key.meta)
+        if (!key.ctrl && !key.meta) {
             setInput((v) => v + inputStr);
+            setHistIdx(null);
+        }
     });
     const ver = props.version ?? '0.1.27';
     const rule = g('rule').repeat(Math.max(10, width - 2));
@@ -344,8 +535,8 @@ export function App(props) {
     const totalTokens = status.usageInput + status.usageOutput;
     const ctxPct = totalTokens > 0 ? Math.round((totalTokens / 120_000) * 100) : 0;
     const baseHints = status.status === 'running' ? 'ctrl+c to stop  ·  enter to queue  ·  ctrl+o expand' : transcript.length === 0 ? 'shift+tab to cycle  ·  ↑/↓ for history  ·  / for commands' : 'enter to send  ·  shift+enter newline  ·  @ to attach';
-    const hints = maxOffset > 0 && isFullscreen ? `${baseHints}  ·  PgUp/Dn scroll` : baseHints;
-    return (_jsxs(Box, { flexDirection: "column", width: width, height: isFullscreen ? height - 1 : undefined, children: [_jsx(Header, { cwd: props.cwd, model: status.model, version: ver, width: width }), _jsxs(Box, { flexDirection: "row", flexGrow: isFullscreen ? 1 : 0, overflow: isFullscreen ? 'hidden' : undefined, children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, overflow: isFullscreen ? 'hidden' : undefined, paddingX: 0, children: [grouped.length === 0 ? (_jsx(Text, { color: tokens.colors.dim, children: "Message Klyro..." })) : visibleGrouped.map((item) => {
+    const hints = maxTop > 0 && isFullscreen ? `${baseHints}  ·  PgUp/Dn scroll` : baseHints;
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: isFullscreen ? height - 1 : undefined, children: [_jsx(Header, { cwd: props.cwd, model: status.model, version: ver, width: width }), _jsxs(Box, { flexDirection: "row", flexGrow: isFullscreen ? 1 : 0, overflow: isFullscreen ? 'hidden' : undefined, children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, overflow: isFullscreen ? 'hidden' : undefined, paddingX: 0, children: [tiny ? (_jsxs(Text, { color: tokens.colors.warn, children: ["\u26A0 terminal too small (", width, "x", height, ") \u2014 transcript hidden"] })) : null, !tiny && grouped.length === 0 ? (_jsx(Text, { color: tokens.colors.dim, children: "Message Klyro..." })) : !tiny ? visibleGrouped.map((item) => {
                                 if (item.verb) {
                                     const gr = item;
                                     const isExpanded = expandedGroups.has(gr.id);
@@ -381,26 +572,26 @@ export function App(props) {
                                     const right = gr.status === 'running' ? `${(elapsed / 1000).toFixed(1)}s` : gr.status === 'error' ? g('failure') : `${gr.totalMs}ms`;
                                     const marker = isExpanded ? g('expanded') : g('collapsed');
                                     const markerColor = gr.status === 'error' ? tokens.colors.err : gr.status === 'running' ? tokens.colors.warn : tokens.colors.ok;
-                                    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: markerColor, children: [marker, " ", verbLine] }), _jsxs(Text, { color: tokens.colors.dim, children: ["  ", right] })] }), isExpanded ? gr.items.map((it) => {
-                                                let friendly = '';
-                                                try {
-                                                    const a = JSON.parse(it.args);
-                                                    const p = a.path ?? a.pattern ?? a.command ?? '';
-                                                    const short = p ? String(p).split('/').pop()?.slice(0, 40) ?? p : '';
-                                                    if (it.name === 'read_file' && short)
-                                                        friendly = `${short}`;
-                                                    else if (it.name === 'shell_exec' && p)
-                                                        friendly = `$ ${String(p).slice(0, 40)}`;
-                                                    else if (short)
-                                                        friendly = short;
-                                                    else
-                                                        friendly = it.args.slice(0, 40);
-                                                }
-                                                catch {
-                                                    friendly = it.args.slice(0, 40);
-                                                }
-                                                return (_jsxs(Box, { paddingLeft: 4, children: [_jsxs(Text, { color: tokens.colors.guide, children: [g('end'), " "] }), _jsx(Text, { color: tokens.colors.dim, children: friendly })] }, it.id));
-                                            }) : null] }, gr.id));
+                                    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: markerColor, children: [marker, " ", verbLine] }), _jsxs(Text, { color: tokens.colors.dim, children: ["  ", right] })] }), isExpanded ? (_jsxs(_Fragment, { children: [gr.items.slice(0, 12).map((it) => {
+                                                        let friendly = '';
+                                                        try {
+                                                            const a = JSON.parse(it.args);
+                                                            const p = a.path ?? a.pattern ?? a.command ?? '';
+                                                            const short = p ? String(p).split('/').pop()?.slice(0, 40) ?? p : '';
+                                                            if (it.name === 'read_file' && short)
+                                                                friendly = `${short}`;
+                                                            else if (it.name === 'shell_exec' && p)
+                                                                friendly = `$ ${String(p).slice(0, 40)}`;
+                                                            else if (short)
+                                                                friendly = short;
+                                                            else
+                                                                friendly = it.args.slice(0, 40);
+                                                        }
+                                                        catch {
+                                                            friendly = it.args.slice(0, 40);
+                                                        }
+                                                        return (_jsxs(Box, { paddingLeft: 4, children: [_jsxs(Text, { color: tokens.colors.guide, children: [g('end'), " "] }), _jsx(Text, { color: tokens.colors.dim, children: friendly })] }, it.id));
+                                                    }), gr.items.length > 12 ? (_jsx(Box, { paddingLeft: 4, children: _jsxs(Text, { color: tokens.colors.dim, children: ["\u2026 ", gr.items.length - 12, " more"] }) })) : null] })) : null] }, gr.id));
                                 }
                                 const it = item;
                                 if (it.kind === 'text' && it.role === 'user') {
@@ -419,5 +610,5 @@ export function App(props) {
                                 if (it.kind === 'diff')
                                     return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, color: tokens.colors.soft, children: it.summary ?? 'Diff' }), it.hunks.map((h, i) => (_jsxs(Box, { flexDirection: "column", marginTop: 0, children: [_jsx(Text, { color: tokens.colors.soft, children: h.path }), h.lines.map((l, j) => (_jsxs(Text, { wrap: "wrap", color: l.kind === 'add' ? tokens.colors.ok : l.kind === 'remove' ? tokens.colors.err : tokens.colors.dim, children: [l.kind === 'add' ? '+ ' : l.kind === 'remove' ? '- ' : '  ', l.text] }, j)))] }, i)))] }, it.id));
                                 return null;
-                            }), status.status === 'running' && !streamingIdRef.current ? (_jsxs(Box, { paddingLeft: 2, marginBottom: 1, children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsx(Text, { color: tokens.colors.dim, children: "Thinking..." }), _jsxs(Text, { color: tokens.colors.dim, children: ["  ", (elapsed / 1000).toFixed(1), "s"] })] })) : null, plan.length > 0 ? (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginTop: 0, marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { bold: true, children: [g('todoPlan'), " Plan  ", plan.filter((p) => p.status === 'done').length, "/", plan.length] })] }), plan.slice(0, 8).map((p) => (_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: p.status === 'done' ? tokens.colors.ok : p.status === 'in_progress' ? tokens.colors.accent : tokens.colors.dim, children: [p.status === 'done' ? g('todoDone') : p.status === 'in_progress' ? g('todoActive') : g('todoPending'), " ", p.title] })] }, p.id)))] })) : null, queuedInputs.length > 0 ? (_jsx(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: queuedInputs.map((q, i) => (_jsxs(Text, { color: tokens.colors.dim, children: ["queued: ", q.slice(0, 60), i === 0 ? '  esc to drop' : ''] }, i))) })) : null] }), isFullscreen ? (_jsx(Box, { flexDirection: "column", width: 1, marginLeft: 1, children: Array.from({ length: trackH }).map((_, i) => (_jsx(Text, { color: i === thumbPos ? tokens.colors.accent : tokens.colors.guide, children: i === thumbPos ? '●' : '│' }, i))) })) : null] }), pinned && pendingNew > 0 ? (_jsx(Box, { justifyContent: "flex-end", paddingX: 1, marginTop: -1, children: _jsxs(Text, { backgroundColor: tokens.colors.accentSoft, color: tokens.colors.accent, bold: true, children: [' ↓ ', pendingNew, ' new ', pendingNew === 1 ? 'message' : 'messages', ' '] }) })) : null, slashSuggest.length > 0 ? (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [slashSuggest.map((s, i) => (_jsxs(Text, { color: i === 0 ? tokens.colors.accent : tokens.colors.dim, children: [i === 0 ? '▸' : ' ', " /", s.name, "  \u2014 ", s.hint] }, s.name))), _jsx(Text, { color: tokens.colors.dim, children: "  tab to complete" })] })) : null, _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: tokens.colors.guide, children: g('rule').repeat(Math.max(10, width - 2)) }), _jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.accent, bold: true, children: [g('prompt'), " "] }), _jsxs(Text, { wrap: "wrap", children: [input || _jsx(Text, { color: tokens.colors.dim, children: "Message Klyro..." }), "|"] })] }), _jsx(Text, { color: tokens.colors.guide, children: g('rule').repeat(Math.max(10, width - 2)) })] }), _jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { color: tokens.colors.dim, children: [baseHints, maxOffset > 0 && isFullscreen ? '  ·  PgUp/Dn scroll' : ''] }), _jsxs(Text, { color: tokens.colors.dim, children: [cost > 0 ? `$${cost.toFixed(2)} · ` : '', ctxPct > 0 ? `${ctxPct}% ctx · ` : '', status.status === 'running' ? 'auto mode on ●' : ''] })] })] }));
+                            }) : null, showThinking && status.status === 'running' && !streamingIdRef.current ? (_jsxs(Box, { paddingLeft: 2, marginBottom: 1, children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsx(Text, { color: tokens.colors.dim, children: "Thinking..." }), _jsxs(Text, { color: tokens.colors.dim, children: ["  ", (elapsed / 1000).toFixed(1), "s"] })] })) : null, showPlan && plan.length > 0 ? (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginTop: 0, marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { bold: true, children: [g('todoPlan'), " Plan  ", plan.filter((p) => p.status === 'done').length, "/", plan.length] })] }), plan.slice(0, 8).map((p) => (_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: p.status === 'done' ? tokens.colors.ok : p.status === 'in_progress' ? tokens.colors.accent : tokens.colors.dim, children: [p.status === 'done' ? g('todoDone') : p.status === 'in_progress' ? g('todoActive') : g('todoPending'), " ", p.title] })] }, p.id)))] })) : null, showQueued && queuedInputs.length > 0 ? (_jsx(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: queuedInputs.map((q, i) => (_jsxs(Text, { color: tokens.colors.dim, children: ["queued: ", q.slice(0, 60), i === 0 ? '  esc to drop' : ''] }, i))) })) : null] }), isFullscreen ? (_jsx(Box, { flexDirection: "column", width: 1, marginLeft: 1, children: Array.from({ length: trackH }).map((_, i) => (_jsx(Text, { color: i === thumbPos ? tokens.colors.accent : tokens.colors.guide, children: i === thumbPos ? '●' : '│' }, i))) })) : null] }), pinned && pendingNew > 0 ? (_jsx(Box, { justifyContent: "flex-end", paddingX: 1, marginTop: -1, children: _jsxs(Text, { backgroundColor: tokens.colors.accentSoft, color: tokens.colors.accent, bold: true, children: [' ↓ ', pendingNew >= 1000 ? '999+ new' : `${pendingNew} new`, ' '] }) })) : null, slashSuggest.length > 0 ? (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [slashSuggest.map((s, i) => (_jsxs(Text, { color: i === 0 ? tokens.colors.accent : tokens.colors.dim, children: [i === 0 ? '▸' : ' ', " /", s.name, "  \u2014 ", s.hint] }, s.name))), _jsx(Text, { color: tokens.colors.dim, children: "  tab to complete" })] })) : null, _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: tokens.colors.guide, children: g('rule').repeat(Math.max(10, width - 2)) }), _jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.accent, bold: true, children: [g('prompt'), " "] }), _jsxs(Text, { wrap: "wrap", children: [input || _jsx(Text, { color: tokens.colors.dim, children: "Message Klyro..." }), "|"] })] }), _jsx(Text, { color: tokens.colors.guide, children: g('rule').repeat(Math.max(10, width - 2)) })] }), _jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { color: tokens.colors.dim, children: [baseHints, maxTop > 0 && isFullscreen ? '  ·  PgUp/Dn scroll' : ''] }), _jsxs(Text, { color: tokens.colors.dim, children: [cost > 0 ? `$${cost.toFixed(2)} · ` : '', ctxPct > 0 ? `${ctxPct}% ctx · ` : '', status.status === 'running' ? 'auto mode on ●' : ''] })] })] }));
 }