klyro 0.1.40 → 0.1.41

package/dist/tui/app.js

@@ -3,7 +3,7 @@ import { jsxs as _jsxs, jsx as _jsx } 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
  */
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { Box, Text, useInput, useStdout } from 'ink';
 import { TuiApprovalBridge } from './approval.js';
 import { parse as parseSlash } from '../cli/slash/parser.js';
@@ -92,6 +92,79 @@ 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).
+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);
+    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);
+            }
+            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);
+        }
+    }, [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); },
+        pageUp: () => {
+            const prev = [...messageBoundaries].reverse().find((b) => b < scrollOffset);
+            const next = prev ?? Math.max(0, scrollOffset - viewportH);
+            setScrollOffset(next);
+            recomputePinned(next);
+        },
+        pageDown: () => {
+            const nxt = messageBoundaries.find((b) => b > scrollOffset);
+            const next = nxt ?? Math.min(maxOffset, scrollOffset + viewportH);
+            setScrollOffset(next);
+            recomputePinned(next);
+        },
+        jumpTop: () => { setScrollOffset(0); recomputePinned(0); },
+        jumpBottom: () => { setScrollOffset(maxOffset); recomputePinned(maxOffset); },
+    };
+    return { scrollOffset, setScrollOffset, pinned, pendingNew, isAtBottom, maxOffset, commands };
+}
 export function App(props) {
     const { stdout } = useStdout();
     const [transcript, setTranscript] = useState(props.initialTranscript ?? []);
@@ -103,7 +176,6 @@ export function App(props) {
     const [elapsed, setElapsed] = useState(0);
     const [queuedInputs, setQueuedInputs] = useState([]);
     const [expandedGroups, setExpandedGroups] = useState(new Set());
-    const [scrollOffset, setScrollOffset] = useState(0);
     const streamingIdRef = useRef(null);
     const width = stdout?.columns ?? 100;
     const height = stdout?.rows ?? 30;
@@ -111,8 +183,18 @@ export function App(props) {
     const grouped = groupTools(transcript);
     const viewportH = Math.max(5, height - 10);
     const totalRows = grouped.length + (plan.length > 0 ? 1 : 0) + 2;
-    const maxOffset = Math.max(0, totalRows - viewportH);
-    const isAtBottom = scrollOffset >= maxOffset;
+    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;
     const trackH = viewportH;
     const thumbPos = maxOffset === 0 ? 0 : Math.round((scrollOffset / maxOffset) * (trackH - 1));
     const visibleGrouped = isFullscreen ? grouped.slice(scrollOffset, scrollOffset + viewportH) : grouped;
@@ -132,8 +214,6 @@ export function App(props) {
     }, [queuedInputs, status.status, awaitingApproval]);
     useEffect(() => { if (status.status !== 'running')
         return; const start = Date.now() - elapsed; const t = setInterval(() => setElapsed(Date.now() - start), 1000); return () => clearInterval(t); }, [status.status, elapsed]);
-    useEffect(() => { if (isAtBottom)
-        setScrollOffset(maxOffset); }, [transcript.length, plan.length, maxOffset, isAtBottom]);
     const append = useCallback((item) => { if (item.kind !== 'text' || item.role !== 'assistant')
         streamingIdRef.current = null; setTranscript((prev) => [...prev, item]); }, []);
     const appendDelta = useCallback((text) => {
@@ -160,28 +240,37 @@ export function App(props) {
         n.delete(id);
     else
         n.add(id); return n; });
-    const scrollUp = (n = 3) => setScrollOffset((p) => Math.max(0, p - n));
-    const scrollDown = (n = 3) => setScrollOffset((p) => Math.min(maxOffset, p + n));
     useInput((inputStr, key) => {
         if (key.escape && queuedInputs.length > 0) {
             setQueuedInputs((prev) => prev.slice(1));
             return;
         }
-        if (key.pageUp || (key.ctrl && inputStr === 'u')) {
-            scrollUp(5);
-            return;
-        }
-        if (key.pageDown || (key.ctrl && inputStr === 'd')) {
-            scrollDown(5);
-            return;
-        }
-        if (key.upArrow && (key.shift || key.ctrl)) {
-            scrollUp(1);
-            return;
-        }
-        if (key.downArrow && (key.shift || key.ctrl)) {
-            scrollDown(1);
-            return;
+        // Scroll keys (work in any mode, including while running).
+        if (isFullscreen && maxOffset > 0) {
+            if (key.home) {
+                commands.jumpTop();
+                return;
+            }
+            if (key.end) {
+                commands.jumpBottom();
+                return;
+            }
+            if (key.pageUp || (key.ctrl && inputStr === 'u')) {
+                commands.pageUp();
+                return;
+            }
+            if (key.pageDown || (key.ctrl && inputStr === 'd')) {
+                commands.pageDown();
+                return;
+            }
+            if (key.upArrow && (key.shift || key.ctrl)) {
+                commands.lineUp();
+                return;
+            }
+            if (key.downArrow && (key.shift || key.ctrl)) {
+                commands.lineDown();
+                return;
+            }
         }
         if (awaitingApproval)
             return;
@@ -317,5 +406,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] }), _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\u00E2\u20AC\u00A6" }), "\u00E2\u2013\u008F"] })] }), _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 ●' : ''] })] })] }));
+                            }), 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, _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\u00E2\u20AC\u00A6" }), "\u00E2\u2013\u008F"] })] }), _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 ●' : ''] })] })] }));
 }

package/dist/tui/app.test.js

@@ -79,4 +79,146 @@ describe('App', () => {
         const call = onSlash.mock.calls[0]?.[0];
         expect(call?.kind).toBe('quit');
     });
+    // --- Chat scroll behavior (TUI_DESIGN chat_scroll.md) -----------------
+    // Build a 25-item initial transcript. Each item has a unique tag so we can
+    // grep `lastFrame()` for it.
+    function makeInitialTranscript(n) {
+        const out = [];
+        for (let i = 0; i < n; i++) {
+            out.push({
+                id: `seed-${i}`,
+                kind: 'text',
+                text: `MSG-${i.toString().padStart(2, '0')}-tag`,
+                role: 'user',
+            });
+        }
+        return out;
+    }
+    // ANSI sequences Ink's parse-keypress recognizes.
+    const KEY_HOME = '\x1b[H';
+    const KEY_END = '\x1b[F';
+    const KEY_PGUP = '\x1b[5~';
+    const KEY_PGDN = '\x1b[6~';
+    const KEY_SHIFT_UP = '\x1b[1;2A';
+    const KEY_SHIFT_DOWN = '\x1b[1;2B';
+    it('starts at the bottom (follow-tail) when initial content fills the viewport', async () => {
+        const { 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));
+        const frame = lastFrame() ?? '';
+        // The viewport is 20 rows; the last few seeded items (MSG-22..MSG-24) should
+        // be in the visible window. The first item (MSG-00) should NOT be visible.
+        expect(frame).toMatch(/MSG-24-tag/);
+        expect(frame).toMatch(/MSG-23-tag/);
+        expect(frame).not.toMatch(/MSG-00-tag/);
+    });
+    it('Home jumps to the top; End re-engages follow-tail', 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));
+        const top = lastFrame() ?? '';
+        expect(top).toMatch(/MSG-00-tag/);
+        expect(top).not.toMatch(/MSG-24-tag/);
+        // End re-engages follow-tail.
+        stdin.write(KEY_END);
+        await new Promise((r) => setTimeout(r, 30));
+        const bottom = lastFrame() ?? '';
+        expect(bottom).toMatch(/MSG-24-tag/);
+        expect(bottom).not.toMatch(/MSG-00-tag/);
+    });
+    it('PageUp/PageDown snap to message boundaries', 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));
+        // Go to top, then PageDown 3 times. Each PageDown should land on a message
+        // boundary, so visible window starts at one of the seeded indices.
+        stdin.write(KEY_HOME);
+        await new Promise((r) => setTimeout(r, 30));
+        stdin.write(KEY_PGDN);
+        await new Promise((r) => setTimeout(r, 30));
+        stdin.write(KEY_PGDN);
+        await new Promise((r) => setTimeout(r, 30));
+        stdin.write(KEY_PGDN);
+        await new Promise((r) => setTimeout(r, 30));
+        const frame = lastFrame() ?? '';
+        // After 3 PageDowns from top, the earliest visible item should be MSG-03
+        // (snap-to-message keeps the boundary on the first visible row). We assert
+        // that MSG-03 is visible and MSG-00 is not.
+        expect(frame).toMatch(/MSG-03-tag/);
+        expect(frame).not.toMatch(/MSG-00-tag/);
+    });
+    it('pins to top: new content does NOT auto-scroll when user has scrolled up', 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));
+        // Pin: scroll up to top.
+        stdin.write(KEY_HOME);
+        await new Promise((r) => setTimeout(r, 100));
+        const before = lastFrame() ?? '';
+        expect(before).toMatch(/MSG-00-tag/);
+        expect(before).not.toMatch(/MSG-24-tag/);
+        // New content arrives while pinned.
+        const g = globalThis;
+        g.__klyroAppAppend({
+            id: 'late-1',
+            kind: 'text',
+            text: 'LATE-1-tag',
+            role: 'assistant',
+        });
+        g.__klyroAppAppend({
+            id: 'late-2',
+            kind: 'text',
+            text: 'LATE-2-tag',
+            role: 'assistant',
+        });
+        g.__klyroAppAppend({
+            id: 'late-3',
+            kind: 'text',
+            text: 'LATE-3-tag',
+            role: 'assistant',
+        });
+        await new Promise((r) => setTimeout(r, 200));
+        const after = lastFrame() ?? '';
+        // Still pinned at top: MSG-00 visible, LATE items not in viewport.
+        expect(after).toMatch(/MSG-00-tag/);
+        expect(after).not.toMatch(/LATE-1-tag/);
+    });
+    it('pressing End re-engages follow-tail and reveals new content', 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/);
+        // End re-engages follow-tail and shows the new content.
+        stdin.write(KEY_END);
+        await new Promise((r) => setTimeout(r, 100));
+        const frame = lastFrame() ?? '';
+        expect(frame).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));
+        // Jump to top, then shift+down a few times, then back with shift+up.
+        stdin.write(KEY_HOME);
+        await new Promise((r) => setTimeout(r, 30));
+        stdin.write(KEY_SHIFT_DOWN);
+        stdin.write(KEY_SHIFT_DOWN);
+        await new Promise((r) => setTimeout(r, 30));
+        const frame = lastFrame() ?? '';
+        // Shift+Down from scrollOffset=0 moves us down by 2. The visible window
+        // is now [2..22). MSG-00 should be off-screen, MSG-02 should be on-screen.
+        expect(frame).not.toMatch(/MSG-00-tag/);
+        expect(frame).toMatch(/MSG-02-tag/);
+        // Shift+Up once: scrollOffset back to 1, MSG-01 visible, MSG-02 still visible.
+        stdin.write(KEY_SHIFT_UP);
+        await new Promise((r) => setTimeout(r, 30));
+        const frame2 = lastFrame() ?? '';
+        expect(frame2).toMatch(/MSG-01-tag/);
+    });
 });

package/package.json

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