koneck 2.124.0 → 2.126.0

package/dist/ink-chat.js

@@ -3,7 +3,8 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Box, Static, Text, render, useApp, useInput, useStdin } from 'ink';
 import { execa } from 'execa';
 import { resolveAgentConcurrency, toolsUnsupportedNotice } from './engine-facts.js';
-import { withSynchronizedFrames } from './frame-sync.js';
+import { withSynchronizedFrames, probeSynchronizedOutput } from './frame-sync.js';
+import { pacedInterval, startingInterval, floorFor } from './frame-pace.js';
 import { estimateCost, formatCost, rateText } from './pricing.js';
 import { generateSessionId, saveSession, listSessions, loadSession, relativeAge, renameSession, forkSession, archiveSession, findSession, } from './session.js';
 import { loadMemory } from './memory.js';
@@ -1265,7 +1266,7 @@ export function DiffPanel({ files, width, height }) {
  * Typechecking passes on that code and no test could reach it, because nothing in the suite mounted
  * an Ink app. Something does now.
  */
-export function App({ config: initialConfig, clearFrame }) {
+export function App({ config: initialConfig, clearFrame, synchronizedFrames = false }) {
     const { exit } = useApp();
     const [cfg, setCfg] = useState(initialConfig);
     // Tool approval callbacks belong to a session created on an earlier render. Keep the control
@@ -2197,6 +2198,17 @@ export function App({ config: initialConfig, clearFrame }) {
     /** Tools this turn has run, which is what separates work from a plain answer. */
     const turnToolsRef = useRef(0); // a tool failed and was worked around
     const busyStart = useRef(0);
+    /*
+     * Whether this terminal composites a redraw, decided once before Ink started.
+     *
+     * A ref rather than state: it never changes for the life of the process, and the ticker reads it
+     * when it starts. It gates the frame rate, because in alt-screen mode every frame rewrites the
+     * whole screen — invisible where the terminal composites it, a blink of the entire interface
+     * where it does not. See frame-sync.ts and frame-pace.ts.
+     */
+    const syncedFramesRef = useRef(synchronizedFrames);
+    /** Whether the diff panel is showing, so the transcript does not draw the same diff again. */
+    const diffPanelOpenRef = useRef(false);
     const wordTimer = useRef(0);
     // Register on the session bus so other running KONECK instances can reach this one.
     useEffect(() => {
@@ -2267,18 +2279,32 @@ export function App({ config: initialConfig, clearFrame }) {
         // each frame atomically; see frame-sync.ts.
         let timer;
         const wordEvery = Math.max(1, Math.round(WORD_HOLD_MS / FRAME_MS));
+        /*
+         * The rate this machine can actually sustain, not the one we would like.
+         *
+         * Each frame records how long the timer really took to arrive. On time means the loop is
+         * keeping up and the rate stands; late means the event loop had more work than the frame's own
+         * budget, and asking again just as soon only queues a frame that cannot be painted — which is
+         * how a Pi ends up lagging while the same build feels instant on a laptop. See frame-pace.ts.
+         */
+        const floor = floorFor(syncedFramesRef.current);
+        let interval = startingInterval(syncedFramesRef.current);
+        let asked = Date.now();
         const tick = () => {
+            const now = Date.now();
+            interval = pacedInterval(interval, now - asked, floor);
             // Elapsed is read from the clock rather than counted in ticks, so a frame the event loop
             // delivers late moves the animation on by what actually passed instead of falling behind.
-            const elapsed = Date.now() - busyStart.current;
+            const elapsed = now - busyStart.current;
             const { spin, shimmer } = animFrames(elapsed, SPINNER.length);
             setAnim({ spin, shimmer, elapsed });
             wordTimer.current += 1;
             if (wordTimer.current % wordEvery === 0)
                 setSpinWord(w => w + 1);
-            timer = setTimeout(tick, FRAME_MS);
+            asked = Date.now();
+            timer = setTimeout(tick, interval);
         };
-        timer = setTimeout(tick, FRAME_MS);
+        timer = setTimeout(tick, interval);
         return () => clearTimeout(timer);
     }, [busy]);
     // A queued prompt runs the moment the agent is free again. Keyed on `busy` rather than done
@@ -5352,6 +5378,9 @@ export function App({ config: initialConfig, clearFrame }) {
      * scrollback full-width, and there is no frame to put a second column in.
      */
     const diffPanelOpen = showDiffPanel && altScreen && liveDiffs.length > 0;
+    // Read by renderStep, which is defined above this line, so it goes through a ref rather than
+    // depending on declaration order.
+    diffPanelOpenRef.current = diffPanelOpen;
     const diffPanelWidth = diffPanelOpen
         ? Math.max(34, Math.min(Math.floor(uiWidth * 0.46), 96))
         : 0;
@@ -5406,7 +5435,7 @@ export function App({ config: initialConfig, clearFrame }) {
         const ms = (step.endedAt ?? Date.now()) - step.startedAt;
         const glyph = running ? SPINNER[spinFrame] : step.ok === false ? G.fail : G.ok;
         const color = running ? AMBER : step.ok === false ? CRIMSON : GREEN;
-        return (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: color, children: glyph }), _jsx(Text, { color: AMBER, bold: true, children: step.name }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsx(Text, { color: MUTED, children: fmtElapsed(ms) })] }), step.detail !== '' && (step.diffs ?? []).length === 0 && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { color: DIM, children: "\u2514" }), _jsx(Text, { color: MUTED, children: step.detail })] })), step.ok === false && step.error && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { color: DIM, children: "\u2514" }), _jsx(Text, { color: CRIMSON, children: fitCells(step.error, Math.max(20, barWidth - 6)) })] })), running && step.output && (_jsx(Box, { paddingLeft: 4, children: _jsx(Text, { color: DIM, children: fitCells(step.output, Math.max(20, barWidth - 6)) }) })), (step.diffs ?? []).map((d, i) => renderDiff(d, i))] }, key));
+        return (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: color, children: glyph }), _jsx(Text, { color: AMBER, bold: true, children: step.name }), _jsx(Text, { color: DIM, children: "\u00B7" }), _jsx(Text, { color: MUTED, children: fmtElapsed(ms) })] }), step.detail !== '' && (step.diffs ?? []).length === 0 && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { color: DIM, children: "\u2514" }), _jsx(Text, { color: MUTED, children: step.detail })] })), step.ok === false && step.error && (_jsxs(Box, { paddingLeft: 2, gap: 1, children: [_jsx(Text, { color: DIM, children: "\u2514" }), _jsx(Text, { color: CRIMSON, children: fitCells(step.error, Math.max(20, barWidth - 6)) })] })), running && step.output && (_jsx(Box, { paddingLeft: 4, children: _jsx(Text, { color: DIM, children: fitCells(step.output, Math.max(20, barWidth - 6)) }) })), !diffPanelOpenRef.current && (step.diffs ?? []).map((d, i) => renderDiff(d, i))] }, key));
     };
     /**
      * One transcript row.
@@ -5474,7 +5503,7 @@ export function App({ config: initialConfig, clearFrame }) {
                             //
                             // Both halves matter. Clipping the bottom would hide what just happened; anchoring
                             // always to the bottom is what put the banner there.
-                            _jsx(Box, { flexGrow: 0, flexShrink: 1, flexDirection: "column", justifyContent: "flex-end", overflowY: "hidden", children: visibleRows.map((row, i) => (_jsx(Box, { flexDirection: "column", flexShrink: 0, children: renderRow(row, i) }, i))) })), altScreen && scrollBack > 0 && (_jsx(Text, { color: AMBER, children: `${G.caret} scrolled back ${scrollBack} rows — PageDown, or just type, to follow again` })), showAnalytics && (_jsxs(Box, { borderStyle: "round", borderColor: AMBER, paddingX: 1, marginBottom: 1, flexDirection: "column", width: barWidth, children: [_jsx(Text, { color: AMBER, bold: true, children: "\u25C6 Session Analytics" }), _jsxs(Text, { color: MUTED, children: ["Turns      : ", _jsx(Text, { color: INK, children: stats.turns })] }), _jsxs(Text, { color: MUTED, children: ["Prompt tok : ", _jsx(Text, { color: INK, children: stats.promptTokens.toLocaleString() })] }), _jsxs(Text, { color: MUTED, children: ["Output tok : ", _jsx(Text, { color: INK, children: stats.completionTokens.toLocaleString() })] }), _jsxs(Text, { color: MUTED, children: ["Total tok  : ", _jsx(Text, { color: INK, children: stats.totalTokens.toLocaleString() })] }), _jsxs(Text, { color: MUTED, children: ["Model      : ", _jsx(Text, { color: INK, children: modelShort }), "  Provider: ", _jsx(Text, { color: INK, children: cfg.provider })] }), _jsx(Text, { color: DIM, children: "Tab to close" })] })), _jsx(Static, { items: altScreen ? [] : rows, children: (row, index) => renderRow(row, index) }), _jsx(Box, { flexDirection: "column", flexShrink: 0, children: busy && (agentState === 'processing' || agentState === 'syncing') && (_jsxs(Box, { flexDirection: "column", children: [sayRef.current.trim() !== '' && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: CYAN, bold: true, children: replyStartedRef.current ? '  ' : G.brand }), _jsx(Box, { flexDirection: "column", children: tailLines(sayRef.current, liveReplyLines(termRows), replyWidth - 3)
+                            _jsx(Box, { flexGrow: 0, flexShrink: 1, flexDirection: "column", justifyContent: "flex-end", overflowY: "hidden", children: visibleRows.map((row, i) => (_jsx(Box, { flexDirection: "column", flexShrink: 0, children: renderRow(row, i) }, i))) })), altScreen && scrollBack > 0 && (_jsx(Text, { color: AMBER, children: `${G.caret} scrolled back ${scrollBack} rows — PageDown, or just type, to follow again` })), showAnalytics && (_jsxs(Box, { borderStyle: "round", borderColor: AMBER, paddingX: 1, marginBottom: 1, flexDirection: "column", width: barWidth, children: [_jsx(Text, { color: AMBER, bold: true, children: "\u25C6 Session Analytics" }), _jsxs(Text, { color: MUTED, children: ["Turns      : ", _jsx(Text, { color: INK, children: stats.turns })] }), _jsxs(Text, { color: MUTED, children: ["Prompt tok : ", _jsx(Text, { color: INK, children: stats.promptTokens.toLocaleString() })] }), _jsxs(Text, { color: MUTED, children: ["Output tok : ", _jsx(Text, { color: INK, children: stats.completionTokens.toLocaleString() })] }), _jsxs(Text, { color: MUTED, children: ["Total tok  : ", _jsx(Text, { color: INK, children: stats.totalTokens.toLocaleString() })] }), _jsxs(Text, { color: MUTED, children: ["Model      : ", _jsx(Text, { color: INK, children: modelShort }), "  Provider: ", _jsx(Text, { color: INK, children: cfg.provider })] }), _jsx(Text, { color: DIM, children: "Tab to close" })] })), _jsx(Static, { items: altScreen ? [] : rows, children: (row, index) => renderRow(row, index) }), _jsx(Box, { flexDirection: "column", flexShrink: 0, children: busy && (agentState === 'processing' || agentState === 'syncing') && (_jsxs(Box, { flexDirection: "column", children: [!ask && sayRef.current.trim() !== '' && (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: CYAN, bold: true, children: replyStartedRef.current ? '  ' : G.brand }), _jsx(Box, { flexDirection: "column", children: tailLines(sayRef.current, liveReplyLines(termRows), replyWidth - 3)
                                                         .split('\n').map((line, i) => _jsx(Text, { color: INK, children: line }, i)) })] })), liveToolRef.current && renderStep(liveToolRef.current, 1), queued.length > 0 && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: AMBER, children: "\u25AA" }), _jsxs(Text, { color: MUTED, children: [queued.length, " queued, will run when this finishes \u00B7 /aside to ask without waiting"] })] }), queued.map((q, i) => (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: DIM, children: fitCells(q.split('\n')[0] ?? '', Math.max(20, barWidth - 6), true) }) }, i)))] })), agents.length > 0 && (() => {
                                             const done = agents.filter(a => a.status !== 'running').length;
                                             const failed = agents.filter(a => a.status === 'failed').length;
@@ -5504,7 +5533,7 @@ export function App({ config: initialConfig, clearFrame }) {
                                                                     : elapsedMs > 8_000 ? `no response from ${cfg.provider} yet`
                                                                         : 'starting', thinkingRef.current.chars > 0 && Date.now() - thinkingRef.current.at < 2_000
                                                                 ? ` | thinking, ${fmtTokens(Math.round(thinkingRef.current.chars / 4))} reasoning tokens`
-                                                                : '', ")"] })] }) }), showThinking && thinkingTextRef.current.trim() !== '' && (_jsx(Box, { flexDirection: "column", paddingLeft: 2, children: thinkingTail(thinkingTextRef.current, THINKING_LINES, barWidth - 6).map((line, i) => (_jsx(Text, { color: DIM, italic: true, children: line }, i))) })), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: DIM, children: "esc to cancel and keep your input \u00B7 ctrl+c to exit" }) })] })) }), usagePane && (() => {
+                                                                : '', ")"] })] }) }), showThinking && !ask && thinkingTextRef.current.trim() !== '' && (_jsx(Box, { flexDirection: "column", paddingLeft: 2, children: thinkingTail(thinkingTextRef.current, THINKING_LINES, barWidth - 6).map((line, i) => (_jsx(Text, { color: DIM, italic: true, children: line }, i))) })), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: DIM, children: "esc to cancel and keep your input \u00B7 ctrl+c to exit" }) })] })) }), usagePane && (() => {
                                 const width = Math.min(barWidth, usagePane === 'settings' ? 96 : 66);
                                 const inner = width - 4;
                                 const BAR_W = Math.max(12, inner - 14);
@@ -5844,7 +5873,14 @@ export async function runInkChatMode(config) {
     // Frames go out bracketed as synchronized updates, so the erase-then-redraw Ink performs on
     // every repaint is composited by the terminal instead of being shown as a blank flash. That is
     // what allows the animation to run at FRAME_MS; see frame-sync.ts.
-    const app = render(_jsx(App, { config: config, clearFrame: () => inkClear?.() }), { stdout: withSynchronizedFrames(process.stdout),
+    /*
+     * Asked before Ink starts, because the reply arrives on stdin and Ink owns stdin from here.
+     *
+     * The answer sets the animation's floor: fast where a redraw is composited, slow where every
+     * frame is a visible blink of the whole screen. 150ms at worst, once, on startup.
+     */
+    const synchronizedFrames = await probeSynchronizedOutput().catch(() => false);
+    const app = render(_jsx(App, { config: config, synchronizedFrames: synchronizedFrames, clearFrame: () => inkClear?.() }), { stdout: withSynchronizedFrames(process.stdout),
         exitOnCtrlC: false, patchConsole: false });
     inkClear = app.clear;
     // The engine is imported on demand so the banner and the prompt are not waiting on the OpenAI