klyro 0.1.45 → 0.1.46

package/dist/cli/repl.js

@@ -85,7 +85,25 @@ export async function startRepl(opts = {}) {
     const pendingQueue = [];
     let isMounted = false;
     let directHooks;
+    // Plain-text mirror for exit replay (scroll.md §1.2: session survives in
+    // native scrollback after the alt screen is torn down). Cap 300 lines.
+    const exitMirror = [];
+    function mirrorLine(item) {
+        let line = null;
+        if (item.kind === 'text')
+            line = `${item.role === 'user' ? '> ' : ''}${item.text}`;
+        else if (item.kind === 'error')
+            line = `[error] ${item.message}`;
+        else if (item.kind === 'file_changed')
+            line = `[${item.op}] ${item.path}`;
+        if (line === null)
+            return;
+        exitMirror.push(line.slice(0, 2000));
+        if (exitMirror.length > 300)
+            exitMirror.splice(0, exitMirror.length - 300);
+    }
     function queuedAppend(item) {
+        mirrorLine(item);
         if (isMounted && directHooks)
             directHooks.append(item);
         else
@@ -140,6 +158,49 @@ export async function startRepl(opts = {}) {
     let tuiSessionId;
     if (isAltScreen)
         enterAlt();
+    // I7 (scroll.md §8.6, S8): while the TUI owns stdout, route console.*
+    // to a ring buffer + ~/.klyro/debug.log so stray tool/provider logs
+    // can't corrupt the frame. Restored on exit.
+    const consoleRing = [];
+    const origConsoleFns = {
+        log: console.log,
+        info: console.info,
+        warn: console.warn,
+        error: console.error,
+        debug: console.debug,
+    };
+    function patchConsole() {
+        if (!isAltScreen)
+            return;
+        const sink = (...args) => {
+            const line = `[${new Date().toISOString()}] ${args.map((a) => (typeof a === 'string' ? a : JSON.stringify(a))).join(' ')}`;
+            consoleRing.push(line);
+            if (consoleRing.length > 200)
+                consoleRing.splice(0, consoleRing.length - 200);
+            try {
+                const fs = require('node:fs');
+                const path = require('node:path');
+                const home = process.env.HOME ?? process.env.USERPROFILE ?? cwd;
+                const dir = path.join(home, '.klyro');
+                fs.mkdirSync(dir, { recursive: true });
+                fs.appendFileSync(path.join(dir, 'debug.log'), line + '\n');
+            }
+            catch { /* ignore */ }
+        };
+        console.log = sink;
+        console.info = sink;
+        console.warn = sink;
+        console.error = sink;
+        console.debug = sink;
+    }
+    function restoreConsole() {
+        console.log = origConsoleFns.log;
+        console.info = origConsoleFns.info;
+        console.warn = origConsoleFns.warn;
+        console.error = origConsoleFns.error;
+        console.debug = origConsoleFns.debug;
+    }
+    patchConsole();
     const EFFORT_STEPS = { low: 10, medium: 30, high: 50, max: 100 };
     // P1 session/permission state (commands.md Priority 1)
     let sessionLabel = '';
@@ -278,6 +339,7 @@ export async function startRepl(opts = {}) {
         leaveAlt();
     };
     process.once('SIGINT', sigintHandler);
+    process.once('SIGTERM', sigintHandler);
     async function runWithBridge(text) {
         if (!model) {
             queuedAppend({ id: `err-${Date.now()}`, kind: 'error', message: 'no model configured' });
@@ -2092,9 +2154,22 @@ export async function startRepl(opts = {}) {
     // ac.aborted indicates SIGINT; return 130 (128+SIGINT) like shells do.
     return new Promise((resolve) => {
         const onExit = () => {
-            if (sigintHandler)
+            if (sigintHandler) {
                 process.removeListener('SIGINT', sigintHandler);
+                process.removeListener('SIGTERM', sigintHandler);
+            }
+            restoreConsole();
             leaveAlt();
+            // §1.2 exit behavior: replay a plain-text transcript into the main
+            // buffer so the session survives in native scrollback.
+            if (exitMirror.length > 0) {
+                try {
+                    process.stdout.write('\n--- klyro session transcript ---\n');
+                    for (const line of exitMirror.slice(-100))
+                        process.stdout.write(line + '\n');
+                }
+                catch { /* ignore */ }
+            }
             resolve(ac.signal.aborted ? 130 : 0);
         };
         if (!app) {

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,130 @@ 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);
+    }, []);
     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;
     useEffect(() => bridge.subscribe((p) => setAwaitingApproval(p !== null)), [bridge]);
     useEffect(() => {
         if (queuedInputs.length > 0 && status.status !== 'running' && !awaitingApproval) {
@@ -259,7 +377,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,6 +386,10 @@ export function App(props) {
                 commands.jumpBottom();
                 return;
             }
+            if (key.ctrl && inputStr === 'g') {
+                commands.jumpBottom();
+                return;
+            } // Ctrl+G → bottom (§8.4)
             if (key.pageUp || (key.ctrl && inputStr === 'u')) {
                 commands.pageUp();
                 return;
@@ -299,14 +421,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 +444,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 +502,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 +516,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 +553,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 +591,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 ●' : ''] })] })] }));
 }

package/dist/tui/app.test.js

@@ -201,6 +201,54 @@ describe('App', () => {
         const frame = lastFrame() ?? '';
         expect(frame).toMatch(/LATE-1-tag/);
     });
+    it('↑ recalls the previous prompt (input history, §8.3)', async () => {
+        const onPrompt = vi.fn(async () => { });
+        const { stdin, lastFrame } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: onPrompt, onSlash: async () => { } }));
+        stdin.write('first recallable prompt');
+        await new Promise((r) => setTimeout(r, 20));
+        stdin.write('\x0d');
+        await new Promise((r) => setTimeout(r, 50));
+        expect(onPrompt).toHaveBeenCalledWith('first recallable prompt');
+        // Input cleared after submit; ↑ should restore it from history.
+        stdin.write('\x1b[A');
+        await new Promise((r) => setTimeout(r, 30));
+        expect(lastFrame() ?? '').toContain('first recallable prompt');
+    });
+    it('↑ on empty input scrolls one line instead of history', async () => {
+        const { stdin, lastFrame } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: async () => { }, isFullscreen: true, initialTranscript: makeInitialTranscript(25) }));
+        await new Promise((r) => setTimeout(r, 50));
+        stdin.write(KEY_HOME);
+        await new Promise((r) => setTimeout(r, 30));
+        // Empty input + plain ↑ → line up (stays near top, MSG-00 visible).
+        stdin.write('\x1b[A');
+        await new Promise((r) => setTimeout(r, 30));
+        expect(lastFrame() ?? '').toMatch(/MSG-00-tag/);
+    });
+    it('/c shows top-6 suggestions and Tab completes', async () => {
+        const { stdin, lastFrame } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: async () => { } }));
+        stdin.write('/c');
+        await new Promise((r) => setTimeout(r, 30));
+        const withSuggest = lastFrame() ?? '';
+        expect(withSuggest).toMatch(/\/clear/);
+        expect(withSuggest).toMatch(/tab to complete/i);
+        stdin.write('\t');
+        await new Promise((r) => setTimeout(r, 30));
+        expect(lastFrame() ?? '').toContain('/clear ');
+    });
+    it('Enter on empty input while pinned jumps back to bottom (§7.2)', async () => {
+        const { stdin, lastFrame } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: async () => { }, isFullscreen: true, initialTranscript: makeInitialTranscript(25) }));
+        await new Promise((r) => setTimeout(r, 100));
+        stdin.write(KEY_HOME);
+        await new Promise((r) => setTimeout(r, 100));
+        const g = globalThis;
+        g.__klyroAppAppend({ id: 'late-1', kind: 'text', text: 'LATE-1-tag', role: 'assistant' });
+        await new Promise((r) => setTimeout(r, 200));
+        expect(lastFrame() ?? '').not.toMatch(/LATE-1-tag/);
+        // Empty input + Enter → dismiss badge, follow tail.
+        stdin.write('\x0d');
+        await new Promise((r) => setTimeout(r, 100));
+        expect(lastFrame() ?? '').toMatch(/LATE-1-tag/);
+    });
     it('Shift+Up / Shift+Down scroll by one line', async () => {
         const { stdin, lastFrame } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: async () => { }, isFullscreen: true, initialTranscript: makeInitialTranscript(25) }));
         await new Promise((r) => setTimeout(r, 50));

package/dist/tui/measure.d.ts

@@ -0,0 +1,85 @@
+/**
+ * scroll.md §4 — Measurement layer (item → display lines).
+ *
+ * Pure functions only: no hooks, no side effects. The App measures each
+ * transcript block into wrapped display-line heights, caches by
+ * (key, width, content-signature), and builds a cumulative line index so
+ * scrolling is O(1) per frame and only the streaming tail is re-measured.
+ *
+ * Heights mirror the render structure in app.tsx:
+ *   user text      = wrapped lines + 1 (marginBottom)
+ *   assistant text = 1 (guide+Klyro header) + wrapped + 1
+ *   group collapsed= 1 + 1 margin; expanded = 1 + min(n,12) + overflow?1 + 1
+ *   error          = wrapped + 1 margin
+ *   policy         = 0 (renders null)
+ *   file_changed   = 1 + 1 margin
+ *   diff           = 1 summary + Σ(1 path + wrapped hunk lines) + 1 margin
+ *   plan block     = 1 + min(8, steps) + 1 margin
+ *   thinking/queue = content lines + 1 margin
+ */
+/** Display width per scroll.md §12: never `.length` (CJK=2, emoji=2, combining=0). */
+export declare function displayWidth(s: string): number;
+/** Wrapped display-line count for already-newline-split text at `width`. */
+export declare function wrapCount(text: string, width: number): number;
+/** Content width inside the transcript column (guide prefix + padding). */
+export declare function contentWidth(termWidth: number): number;
+export type BlockDesc = {
+    kind: 'user';
+    text: string;
+} | {
+    kind: 'assistant';
+    text: string;
+} | {
+    kind: 'group';
+    count: number;
+    expanded: boolean;
+} | {
+    kind: 'error';
+    message: string;
+} | {
+    kind: 'policy';
+} | {
+    kind: 'file';
+    path: string;
+} | {
+    kind: 'diff';
+    hunks: Array<{
+        path: string;
+        lines: string[];
+    }>;
+} | {
+    kind: 'plan';
+    done: number;
+    total: number;
+} | {
+    kind: 'thinking';
+} | {
+    kind: 'queued';
+    count: number;
+};
+export declare const EXPANDED_DETAIL_CAP = 12;
+export declare function blockHeight(b: BlockDesc, termWidth: number): number;
+/** Content fingerprint: changes whenever the block's rendered lines could change. */
+export declare function blockSig(b: BlockDesc): string;
+/** Cache: key → height. Only the streaming tail changes sig per tick (I6 → O(1)). */
+export declare class MeasureCache {
+    private map;
+    private maxEntries;
+    constructor(maxEntries?: number);
+    heightFor(key: string, block: BlockDesc, termWidth: number): number;
+    /** Resize (width change) invalidates everything — scroll.md §12. */
+    invalidateWidth(): void;
+    get size(): number;
+}
+export interface LineIndex {
+    offsets: number[];
+    total: number;
+}
+/** Cumulative first-row offsets; dirtyFrom allows incremental rebuild (only tail dirtied). */
+export declare function buildIndex(heights: number[], prev?: {
+    offsets: number[];
+    dirtyFrom: number;
+}): LineIndex;
+/** Binary search: display row → block index (upperBound(offsets, row) - 1). */
+export declare function itemAtRow(offsets: number[], row: number): number;
+export declare function clamp(n: number, lo: number, hi: number): number;

package/dist/tui/measure.js

@@ -0,0 +1,186 @@
+/**
+ * scroll.md §4 — Measurement layer (item → display lines).
+ *
+ * Pure functions only: no hooks, no side effects. The App measures each
+ * transcript block into wrapped display-line heights, caches by
+ * (key, width, content-signature), and builds a cumulative line index so
+ * scrolling is O(1) per frame and only the streaming tail is re-measured.
+ *
+ * Heights mirror the render structure in app.tsx:
+ *   user text      = wrapped lines + 1 (marginBottom)
+ *   assistant text = 1 (guide+Klyro header) + wrapped + 1
+ *   group collapsed= 1 + 1 margin; expanded = 1 + min(n,12) + overflow?1 + 1
+ *   error          = wrapped + 1 margin
+ *   policy         = 0 (renders null)
+ *   file_changed   = 1 + 1 margin
+ *   diff           = 1 summary + Σ(1 path + wrapped hunk lines) + 1 margin
+ *   plan block     = 1 + min(8, steps) + 1 margin
+ *   thinking/queue = content lines + 1 margin
+ */
+const ANSI_RE = /\x1b\[[0-9;]*m/g;
+function isWide(cp) {
+    return ((cp >= 0x1100 && cp <= 0x115f) ||
+        (cp >= 0x2e80 && cp <= 0xa4cf) ||
+        (cp >= 0xac00 && cp <= 0xd7a3) ||
+        (cp >= 0xf900 && cp <= 0xfaff) ||
+        (cp >= 0xfe30 && cp <= 0xfe4f) ||
+        (cp >= 0xff00 && cp <= 0xff60) ||
+        (cp >= 0xffe0 && cp <= 0xffe6) ||
+        (cp >= 0x1f300 && cp <= 0x1faff) ||
+        (cp >= 0x2600 && cp <= 0x27bf) ||
+        (cp >= 0x2b00 && cp <= 0x2bff));
+}
+function isZeroWidth(cp) {
+    return ((cp >= 0x0300 && cp <= 0x036f) ||
+        (cp >= 0x200b && cp <= 0x200f) ||
+        (cp >= 0xfe00 && cp <= 0xfe0f) ||
+        cp === 0x00ad);
+}
+/** Display width per scroll.md §12: never `.length` (CJK=2, emoji=2, combining=0). */
+export function displayWidth(s) {
+    const clean = s.replace(ANSI_RE, '').replace(/\t/g, '        ');
+    let w = 0;
+    for (const ch of clean) {
+        const cp = ch.codePointAt(0) ?? 0;
+        if (isZeroWidth(cp))
+            continue;
+        w += isWide(cp) ? 2 : 1;
+    }
+    return w;
+}
+/** Wrapped display-line count for already-newline-split text at `width`. */
+export function wrapCount(text, width) {
+    const w = Math.max(1, width);
+    let n = 0;
+    for (const line of text.split('\n')) {
+        const dw = displayWidth(line);
+        n += dw === 0 ? 1 : Math.max(1, Math.ceil(dw / w));
+    }
+    return Math.max(1, n);
+}
+/** Content width inside the transcript column (guide prefix + padding). */
+export function contentWidth(termWidth) {
+    return Math.max(20, termWidth - 10);
+}
+export const EXPANDED_DETAIL_CAP = 12; // scroll.md §9.3
+export function blockHeight(b, termWidth) {
+    const cw = contentWidth(termWidth);
+    switch (b.kind) {
+        case 'user':
+            return wrapCount(b.text, termWidth) + 1;
+        case 'assistant':
+            return 1 + wrapCount(b.text, cw) + 1;
+        case 'group':
+            if (!b.expanded)
+                return 1 + 1;
+            return 1 + Math.min(b.count, EXPANDED_DETAIL_CAP) + (b.count > EXPANDED_DETAIL_CAP ? 1 : 0) + 1;
+        case 'error':
+            return wrapCount(b.message, termWidth) + 1;
+        case 'policy':
+            return 0;
+        case 'file':
+            return 1 + 1;
+        case 'diff': {
+            let n = 1; // summary
+            for (const h of b.hunks)
+                n += 1 + h.lines.reduce((s, l) => s + wrapCount(l, cw), 0);
+            return n + 1;
+        }
+        case 'plan':
+            return 1 + Math.min(8, b.total) + 1;
+        case 'thinking':
+            return 1 + 1;
+        case 'queued':
+            return b.count + 1;
+    }
+}
+/** Content fingerprint: changes whenever the block's rendered lines could change. */
+export function blockSig(b) {
+    switch (b.kind) {
+        case 'user':
+            return `u:${b.text.length}:${b.text.slice(0, 16)}:${b.text.slice(-16)}`;
+        case 'assistant':
+            return `a:${b.text.length}:${b.text.slice(0, 16)}:${b.text.slice(-16)}`;
+        case 'group':
+            return `g:${b.count}:${b.expanded ? 1 : 0}`;
+        case 'error':
+            return `e:${b.message.length}:${b.message.slice(-32)}`;
+        case 'policy':
+            return 'p';
+        case 'file':
+            return `f:${b.path}`;
+        case 'diff':
+            return `d:${b.hunks.length}:${b.hunks.reduce((s, h) => s + h.lines.length, 0)}`;
+        case 'plan':
+            return `pl:${b.done}/${b.total}`;
+        case 'thinking':
+            return 't';
+        case 'queued':
+            return `q:${b.count}`;
+    }
+}
+/** Cache: key → height. Only the streaming tail changes sig per tick (I6 → O(1)). */
+export class MeasureCache {
+    map = new Map();
+    maxEntries;
+    constructor(maxEntries = 2000) {
+        this.maxEntries = maxEntries;
+    }
+    heightFor(key, block, termWidth) {
+        const sig = blockSig(block);
+        const hit = this.map.get(key);
+        if (hit && hit.width === termWidth && hit.sig === sig)
+            return hit.height;
+        const height = blockHeight(block, termWidth);
+        if (this.map.size >= this.maxEntries) {
+            const oldest = this.map.keys().next();
+            if (!oldest.done)
+                this.map.delete(oldest.value);
+        }
+        this.map.set(key, { width: termWidth, sig, height });
+        return height;
+    }
+    /** Resize (width change) invalidates everything — scroll.md §12. */
+    invalidateWidth() {
+        this.map.clear();
+    }
+    get size() {
+        return this.map.size;
+    }
+}
+/** Cumulative first-row offsets; dirtyFrom allows incremental rebuild (only tail dirtied). */
+export function buildIndex(heights, prev) {
+    const offsets = prev ? [...prev.offsets] : [];
+    const from = prev ? Math.min(prev.dirtyFrom, heights.length) : 0;
+    for (let i = Math.max(0, from); i < heights.length; i++) {
+        offsets[i] = i === 0 ? 0 : offsets[i - 1] + heights[i - 1];
+    }
+    offsets.length = heights.length;
+    const last = heights.length - 1;
+    const total = last < 0 ? 0 : offsets[last] + heights[last];
+    return { offsets, total };
+}
+/** Binary search: display row → block index (upperBound(offsets, row) - 1). */
+export function itemAtRow(offsets, row) {
+    if (offsets.length === 0)
+        return -1;
+    if (row <= 0)
+        return 0;
+    let lo = 0;
+    let hi = offsets.length - 1;
+    let ans = 0;
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        if (offsets[mid] <= row) {
+            ans = mid;
+            lo = mid + 1;
+        }
+        else {
+            hi = mid - 1;
+        }
+    }
+    return ans;
+}
+export function clamp(n, lo, hi) {
+    return Math.max(lo, Math.min(hi, n));
+}

package/dist/tui/scroll-model.d.ts

@@ -0,0 +1,67 @@
+/**
+ * scroll.md §5 — Anchor-based scroll model (pure, no React).
+ *
+ * Position is an Anchor ({itemId, lineInItem}), never a raw row index (I4),
+ * so resizes, group expand/collapse, and compaction never make the view jump.
+ * While anchored to 'bottom', new output follows; the instant the user scrolls
+ * up the anchor pins to an item and freezes, accumulating newSinceUnstick
+ * display lines for the `↓ N new` badge (§7).
+ */
+export type Anchor = {
+    mode: 'bottom';
+} | {
+    mode: 'pinned';
+    itemId: string;
+    lineInItem: number;
+};
+export interface ScrollState {
+    anchor: Anchor;
+    userScrolled: boolean;
+    /** display lines appended since the user unstuck (badge count, §7) */
+    newSinceUnstick: number;
+}
+export declare const FOLLOW_EPSILON = 1;
+export declare const initialScroll: ScrollState;
+export type ScrollAction = {
+    type: 'BY_LINES';
+    delta: number;
+} | {
+    type: 'BY_PAGE';
+    dir: -1 | 1;
+} | {
+    type: 'BY_HALF_PAGE';
+    dir: -1 | 1;
+} | {
+    type: 'TO_TOP';
+} | {
+    type: 'TO_BOTTOM';
+} | {
+    type: 'CONTENT_GREW';
+    lines: number;
+} | {
+    type: 'REFLOW';
+};
+/** Index abstraction over measured display lines (§4.3). */
+export interface ScrollCtx {
+    /** number of blocks */
+    count: number;
+    /** display-line offset of block i */
+    offsetOf: (i: number) => number;
+    /** key of block i (stable across regroups) */
+    keyOf: (i: number) => string;
+    /** block index containing display row */
+    indexAt: (row: number) => number;
+    /** total measured display lines */
+    total: number;
+    viewportH: number;
+}
+export declare function maxTopFor(ctx: ScrollCtx): number;
+export declare function scrollReducer(s: ScrollState, a: ScrollAction, ctx: ScrollCtx): ScrollState;
+export interface Resolved {
+    topRow: number;
+    atBottom: boolean;
+}
+/** Anchor → topRow, run once per frame after the line index rebuild (§5.3). */
+export declare function resolveTopRow(s: ScrollState, ctx: ScrollCtx): Resolved;
+/** Badge label per §7.2. Empty string = hidden. */
+export declare function badgeLabel(atBottom: boolean, newSinceUnstick: number, idle: boolean): string;

package/dist/tui/scroll-model.js

@@ -0,0 +1,96 @@
+/**
+ * scroll.md §5 — Anchor-based scroll model (pure, no React).
+ *
+ * Position is an Anchor ({itemId, lineInItem}), never a raw row index (I4),
+ * so resizes, group expand/collapse, and compaction never make the view jump.
+ * While anchored to 'bottom', new output follows; the instant the user scrolls
+ * up the anchor pins to an item and freezes, accumulating newSinceUnstick
+ * display lines for the `↓ N new` badge (§7).
+ */
+export const FOLLOW_EPSILON = 1; // within 1 line of bottom counts as "at bottom" (§13)
+export const initialScroll = {
+    anchor: { mode: 'bottom' },
+    userScrolled: false,
+    newSinceUnstick: 0,
+};
+function clampN(n, lo, hi) {
+    return Math.max(lo, Math.min(hi, n));
+}
+export function maxTopFor(ctx) {
+    return Math.max(0, ctx.total - ctx.viewportH);
+}
+function stickBottom() {
+    return { anchor: { mode: 'bottom' }, userScrolled: false, newSinceUnstick: 0 };
+}
+function pinAt(s, ctx, row) {
+    const maxTop = maxTopFor(ctx);
+    const top = clampN(row, 0, maxTop);
+    if (top >= maxTop - FOLLOW_EPSILON)
+        return stickBottom();
+    if (ctx.count === 0)
+        return stickBottom();
+    const i = clampN(ctx.indexAt(top), 0, ctx.count - 1);
+    return {
+        anchor: { mode: 'pinned', itemId: ctx.keyOf(i), lineInItem: top - ctx.offsetOf(i) },
+        userScrolled: true,
+        newSinceUnstick: s.newSinceUnstick,
+    };
+}
+export function scrollReducer(s, a, ctx) {
+    const maxTop = maxTopFor(ctx);
+    // current resolved top (anchor may predate this frame's measurements)
+    const cur = resolveTopRow(s, ctx).topRow;
+    switch (a.type) {
+        case 'BY_LINES':
+            return pinAt(s, ctx, cur + a.delta);
+        case 'BY_PAGE':
+            return pinAt(s, ctx, cur + a.dir * (ctx.viewportH - 1)); // 1-line overlap
+        case 'BY_HALF_PAGE':
+            return pinAt(s, ctx, cur + a.dir * Math.floor(ctx.viewportH / 2));
+        case 'TO_TOP':
+            return pinAt(s, ctx, 0);
+        case 'TO_BOTTOM':
+            return stickBottom();
+        case 'CONTENT_GREW':
+            if (a.lines <= 0) {
+                // tail shrank/rewrote (§12): keep anchor, recompute, don't count
+                return { ...s };
+            }
+            if (s.anchor.mode === 'bottom') {
+                // follow — keep the counter clean; topRow derives from maxTop
+                return { ...s, newSinceUnstick: 0 };
+            }
+            void maxTop;
+            return { ...s, newSinceUnstick: s.newSinceUnstick + a.lines };
+        case 'REFLOW':
+            return { ...s };
+    }
+}
+/** Anchor → topRow, run once per frame after the line index rebuild (§5.3). */
+export function resolveTopRow(s, ctx) {
+    const maxTop = maxTopFor(ctx);
+    if (s.anchor.mode === 'bottom')
+        return { topRow: maxTop, atBottom: true };
+    let i = -1;
+    for (let k = 0; k < ctx.count; k++) {
+        if (ctx.keyOf(k) === s.anchor.itemId) {
+            i = k;
+            break;
+        }
+    }
+    if (i === -1)
+        return { topRow: maxTop, atBottom: true }; // pruned → re-stick (§12)
+    const raw = ctx.offsetOf(i) + Math.max(0, s.anchor.lineInItem);
+    const topRow = clampN(raw, 0, maxTop);
+    return { topRow, atBottom: topRow >= maxTop - FOLLOW_EPSILON };
+}
+/** Badge label per §7.2. Empty string = hidden. */
+export function badgeLabel(atBottom, newSinceUnstick, idle) {
+    if (atBottom || newSinceUnstick <= 0)
+        return '';
+    if (idle)
+        return '↓ jump to end';
+    if (newSinceUnstick >= 1000)
+        return '↓ 999+ new';
+    return `↓ ${newSinceUnstick} new`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "klyro",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "description": "Klyro \u2014 autonomous coding harness CLI that streams from any OpenAI-compatible or Anthropic LLM endpoint.",
   "type": "module",
   "main": "dist/index.js",