klyro 0.1.51 → 0.1.53

package/dist/cli/repl.js

@@ -142,6 +142,16 @@ export async function startRepl(opts = {}) {
         else
             pendingQueue.push({ kind: 'delta', text });
     }
+    // Tool results patch the running start-item in place (App.updateTool) so a
+    // group resolves to done/error with its real latency instead of ticking
+    // forever. Falls back to a standalone item if the start item is gone.
+    const pendingToolIds = new Set();
+    function queuedToolUpdate(idCall, patch) {
+        if (isMounted && directHooks)
+            directHooks.updateTool(idCall, patch);
+        else
+            pendingQueue.push({ kind: 'toolupdate', idCall, patch });
+    }
     function queuedStatus(s) {
         lastStatus = { ...(lastStatus ?? { model: model ?? '', step: 0, maxSteps: opts.maxSteps ?? 30, usageInput: 0, usageOutput: 0, repairs: 0, status: 'idle' }), ...s };
         if (isMounted && directHooks)
@@ -393,6 +403,8 @@ export async function startRepl(opts = {}) {
                     hooks.updatePlan(ev.plan);
                 else if (ev.kind === 'delta')
                     hooks.appendDelta(ev.text);
+                else if (ev.kind === 'toolupdate')
+                    hooks.updateTool(ev.idCall, ev.patch);
                 else
                     hooks.append(ev.item);
             }
@@ -511,6 +523,7 @@ export async function startRepl(opts = {}) {
                         activeCallArgs += ev.argsJson;
                     }
                     else if (ev.kind === 'tool_call_end') {
+                        pendingToolIds.add(ev.id);
                         queuedAppend({
                             id: `tool-${ev.id}-${Date.now()}`,
                             kind: 'tool',
@@ -533,17 +546,30 @@ export async function startRepl(opts = {}) {
                         });
                     }
                     else if (ev.kind === 'tool_result') {
-                        queuedAppend({
-                            id: `tres-${ev.id}-${Date.now()}`,
-                            kind: 'tool',
-                            name: ev.name,
-                            id_call: ev.id,
-                            args: '',
+                        const patch = {
                             result: typeof ev.output === 'string' ? ev.output : JSON.stringify(ev.output, null, 2),
                             isError: ev.isError,
                             latencyMs: ev.latencyMs,
-                            status: ev.isError ? 'error' : 'done',
-                        });
+                            status: (ev.isError ? 'error' : 'done'),
+                        };
+                        if (pendingToolIds.delete(ev.id)) {
+                            // Patch the running start-item in place — no stale spinner.
+                            queuedToolUpdate(ev.id, patch);
+                        }
+                        else {
+                            // Start item gone (e.g. transcript cleared) — keep a record.
+                            queuedAppend({
+                                id: `tres-${ev.id}-${Date.now()}`,
+                                kind: 'tool',
+                                name: ev.name,
+                                id_call: ev.id,
+                                args: '',
+                                result: patch.result,
+                                isError: patch.isError,
+                                latencyMs: patch.latencyMs,
+                                status: patch.status,
+                            });
+                        }
                     }
                     else if (ev.kind === 'final_text') {
                         // streamingId is closed by status change; no extra handling needed

package/dist/tui/app.d.ts

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import type { StatusSnapshot } from './status.js';
-import type { TranscriptItem } from './transcript.js';
+import type { TranscriptItem, ToolResultPatch } from './transcript.js';
 import { TuiApprovalBridge } from './approval.js';
 import type { PlanStep } from '../agent/runtime.js';
 import { type TranscriptScrollHandle } from './transcript-commands.js';
@@ -28,6 +28,7 @@ export interface AppProps {
         scrollHalfPage: (dir: -1 | 1) => void;
         scrollToTop: () => void;
         transcript: TranscriptScrollHandle;
+        updateTool: (idCall: string, patch: ToolResultPatch) => void;
     }) => void;
     version?: string;
     isFullscreen?: boolean;

package/dist/tui/app.js

@@ -3,7 +3,7 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
  * 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, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { Box, Text, useInput, useStdout } from 'ink';
 import { execFileSync } from 'node:child_process';
 import { TuiApprovalBridge } from './approval.js';
@@ -34,7 +34,7 @@ function verbForTool(name) {
         return 'Listed';
     if (name === 'grep' || name === 'glob' || name === 'find_files' || name === 'search_files' || name === 'recent_files')
         return 'Searched';
-    if (name === 'shell_exec')
+    if (name === 'shell_exec' || name === 'run_verify')
         return 'Ran';
     if (name.startsWith('git_'))
         return 'Checked git';
@@ -83,13 +83,17 @@ function groupTools(items) {
     return out;
 }
 // design.md §23/§24 — terminal Markdown via tui/markdown.ts: headings,
-// **bold**, *italic*, `code`, fences, links, lists. Ink wraps each line.
+// **bold**, *italic*, `code`, fences, links, lists. Ink wraps the text.
+//
+// CRITICAL: this must return a SINGLE <Text> with inline nested parts.
+// A fragment of sibling <Text>s inside the row-direction parent Box lays
+// out as side-by-side COLUMNS (garbled transcript) instead of lines.
 function MarkdownText({ text, dim, width }) {
     void width;
     const lines = useMemo(() => renderMarkdownLines(text), [text]);
     const dimColor = tokens.colors.dim;
     const softColor = tokens.colors.soft;
-    return (_jsx(_Fragment, { children: lines.map((l, i) => (_jsx(Text, { wrap: "wrap", color: dim ? dimColor : undefined, children: l.parts.map((p, j) => (_jsx(Text, { bold: p.bold || undefined, color: p.bold ? (dim ? undefined : softColor) : p.dim ? dimColor : p.code ? softColor : undefined, children: p.text }, j))) }, i))) }));
+    return (_jsx(Text, { wrap: "wrap", color: dim ? dimColor : undefined, children: lines.map((l, i) => (_jsxs(React.Fragment, { children: [i > 0 ? '\n' : null, l.parts.map((p, j) => (_jsx(Text, { bold: p.bold || undefined, color: p.bold ? (dim ? undefined : softColor) : p.dim ? dimColor : p.code ? softColor : undefined, children: p.text }, j)))] }, i))) }));
 }
 // Chat scroll — scroll.md §5 anchor model adapted to Ink.
 //
@@ -234,7 +238,13 @@ export function App(props) {
                 const gr = entry;
                 out.push({
                     key: gr.id,
-                    desc: { kind: 'group', count: gr.items.length, expanded: expandedGroups.has(gr.id) },
+                    desc: {
+                        kind: 'group',
+                        count: gr.items.length,
+                        expanded: expandedGroups.has(gr.id),
+                        status: gr.status,
+                        resultLen: gr.items.reduce((s, x) => s + (x.result?.length ?? 0), 0),
+                    },
                     groupIndex: gi,
                     tail: null,
                 });
@@ -385,6 +395,20 @@ export function App(props) {
         streamingIdRef.current = null; }, [status.status]);
     const updateStatus = useCallback((s) => setStatus((p) => ({ ...p, ...s })), []);
     const updatePlan = useCallback((p) => setPlan(p), []);
+    // Tool results patch the running start-item IN PLACE (no second item, so a
+    // group never stays 'running' forever showing a ticking elapsed timer).
+    const updateTool = useCallback((idCall, patch) => {
+        setTranscript((prev) => {
+            const idx = prev.findIndex((x) => x.kind === 'tool' &&
+                x.id_call === idCall &&
+                x.status === 'running');
+            if (idx === -1)
+                return prev;
+            const copy = [...prev];
+            copy[idx] = { ...copy[idx], ...patch };
+            return copy;
+        });
+    }, []);
     const clearTranscript = useCallback(() => { streamingIdRef.current = null; setTranscript([]); setPlan([]); }, []);
     // Scroll control for external drivers (mouse-wheel tap in repl.ts, §8.4).
     // Stored in refs so the callbacks stay stable while acting on latest state.
@@ -413,7 +437,7 @@ export function App(props) {
     }), []);
     const onMountedRef = useRef(props.onMounted);
     useEffect(() => { onMountedRef.current = props.onMounted; }, [props.onMounted]);
-    useEffect(() => { onMountedRef.current?.({ append, appendDelta, updateStatus, updatePlan, clearTranscript, scrollLines, scrollToBottom, scrollHalfPage, scrollToTop, transcript: transcriptHandle }); globalThis.__klyroAppAppend = append; globalThis.__klyroAppendDelta = appendDelta; globalThis.__klyroAppStatus = updateStatus; globalThis.__klyroAppPlan = updatePlan; return () => { delete globalThis.__klyroAppAppend; delete globalThis.__klyroAppendDelta; delete globalThis.__klyroAppStatus; delete globalThis.__klyroAppPlan; }; }, [append, appendDelta, updateStatus, updatePlan, clearTranscript, scrollLines, scrollToBottom, scrollHalfPage, scrollToTop, transcriptHandle]);
+    useEffect(() => { onMountedRef.current?.({ append, appendDelta, updateStatus, updatePlan, clearTranscript, scrollLines, scrollToBottom, scrollHalfPage, scrollToTop, transcript: transcriptHandle, updateTool }); globalThis.__klyroAppAppend = append; globalThis.__klyroAppendDelta = appendDelta; globalThis.__klyroAppStatus = updateStatus; globalThis.__klyroAppPlan = updatePlan; return () => { delete globalThis.__klyroAppAppend; delete globalThis.__klyroAppendDelta; delete globalThis.__klyroAppStatus; delete globalThis.__klyroAppPlan; }; }, [append, appendDelta, updateStatus, updatePlan, clearTranscript, scrollLines, scrollToBottom, scrollHalfPage, scrollToTop, transcriptHandle, updateTool]);
     const toggleGroup = (id) => setExpandedGroups((prev) => { const n = new Set(prev); if (n.has(id))
         n.delete(id);
     else
@@ -612,9 +636,15 @@ export function App(props) {
     const cost = (status.usageInput / 1000 * 0.003 + status.usageOutput / 1000 * 0.015);
     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';
+    // Narrow terminals: compact hints so the status bar never wraps mid-word.
+    const baseHints = width < 90
+        ? status.status === 'running' ? 'ctrl+c stop · enter queue' : 'enter send · / commands'
+        : 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 = 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) => {
+    // I1 structural guard: the frame can never exceed terminal rows. Even if a
+    // child mis-measures, the root clips — the input/status stay on screen and
+    // Ink's cursor math can't corrupt into overlapping text.
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: isFullscreen ? height - 1 : undefined, overflow: isFullscreen ? 'hidden' : 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);

package/dist/tui/app.test.js

@@ -356,6 +356,44 @@ describe('App', () => {
         await new Promise((r) => setTimeout(r, 50));
         expect(lastFrame() ?? '').toMatch(/MSG-24-tag/);
     });
+    it('tool result patches the running item in place (no stale spinner)', async () => {
+        let hooks = null;
+        const { lastFrame } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: async () => { }, isFullscreen: true, onMounted: (h) => {
+                hooks = { append: h.append, updateTool: h.updateTool };
+            } }));
+        await new Promise((r) => setTimeout(r, 50));
+        expect(hooks).not.toBeNull();
+        hooks.append({ id: 't1', kind: 'tool', name: 'read_file', id_call: 'c1', args: '{"path":"a.ts"}', status: 'running' });
+        await new Promise((r) => setTimeout(r, 50));
+        expect(lastFrame() ?? '').toMatch(/Read/);
+        hooks.updateTool('c1', { result: 'ok', isError: false, latencyMs: 42, status: 'done' });
+        await new Promise((r) => setTimeout(r, 50));
+        const frame = lastFrame() ?? '';
+        // Resolved with real latency — exactly one group (start item patched, no duplicate).
+        expect(frame).toMatch(/42ms/);
+        expect(frame.match(/Read/g)?.length ?? 0).toBeLessThanOrEqual(2);
+    });
+    it('heavy transcript: frame bounded, input and tail visible', async () => {
+        const items = [];
+        for (let i = 0; i < 30; i++) {
+            items.push({ id: `u-${i}`, kind: 'text', text: `user message number ${i} asking about stuff`, role: 'user' });
+            items.push({
+                id: `a-${i}`,
+                kind: 'text',
+                text: `## Answer ${i}\n\nAssistant answer **number ${i}** with a long explanation that wraps across multiple terminal lines.`,
+                role: 'assistant',
+            });
+            items.push({ id: `t-${i}`, kind: 'tool', name: 'read_file', id_call: `c-${i}`, args: '{"path":"a.ts"}', result: 'ok', latencyMs: 5, status: 'done' });
+        }
+        const { lastFrame } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: async () => { }, isFullscreen: true, initialTranscript: items }));
+        await new Promise((r) => setTimeout(r, 100));
+        const frame = lastFrame() ?? '';
+        // I1: frame never exceeds terminal rows; input + tail always on screen.
+        expect(frame.split('\n').length).toBeLessThanOrEqual(32);
+        expect(frame).toContain('Message Klyro');
+        expect(frame).toContain('Answer 29');
+        expect(frame).not.toContain('user message number 0');
+    });
     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

@@ -33,6 +33,8 @@ export type BlockDesc = {
     kind: 'group';
     count: number;
     expanded: boolean;
+    status: string;
+    resultLen: number;
 } | {
     kind: 'error';
     message: string;

package/dist/tui/measure.js

@@ -102,7 +102,7 @@ export function blockSig(b) {
         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}`;
+            return `g:${b.count}:${b.expanded ? 1 : 0}:${b.status}:${b.resultLen}`;
         case 'error':
             return `e:${b.message.length}:${b.message.slice(-32)}`;
         case 'policy':

package/dist/tui/snapshot.test.js

@@ -82,6 +82,17 @@ describe('App visual snapshot', () => {
         expect(frame).not.toContain('## Done');
         expect(frame).not.toContain('`npm test`');
     });
+    it('multiline assistant text renders as stacked lines, not columns', () => {
+        const { lastFrame } = render(_jsx(App, { ...DEFAULT_PROPS, initialModel: "gpt-4o-mini", maxSteps: 30, initialStatus: { status: 'idle', model: 'gpt-4o-mini', step: 0, maxSteps: 30, usageInput: 0, usageOutput: 0, repairs: 0 }, initialTranscript: [
+                { id: 'm1', kind: 'text', text: 'ZZZTOPLINE\nZZZBOTTOMLINE', role: 'assistant' },
+            ] }));
+        const rows = (lastFrame() ?? '').split('\n');
+        const top = rows.findIndex((r) => r.includes('ZZZTOPLINE'));
+        const bottom = rows.findIndex((r) => r.includes('ZZZBOTTOMLINE'));
+        // Columns bug put both markers on the SAME row; correct render stacks them.
+        expect(top).toBeGreaterThanOrEqual(0);
+        expect(bottom).toBeGreaterThan(top);
+    });
     it('diff transcript item renders the diff box', () => {
         const { lastFrame } = render(_jsx(App, { ...DEFAULT_PROPS, initialModel: "gpt-4o-mini", maxSteps: 30, initialStatus: { status: 'idle', model: 'gpt-4o-mini', step: 0, maxSteps: 30, usageInput: 0, usageOutput: 0, repairs: 0 }, initialTranscript: [
                 {

package/dist/tui/transcript.d.ts

@@ -11,6 +11,13 @@
  */
 import React from 'react';
 import { type DiffHunk } from './diff.js';
+/** Patch applied to a running tool item when its result arrives. */
+export interface ToolResultPatch {
+    result: string;
+    isError: boolean;
+    latencyMs: number;
+    status: 'done' | 'error';
+}
 export type TranscriptItem = {
     id: string;
     kind: 'text';

package/package.json

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