klyro 0.1.2 → 0.1.3

package/dist/tui/diff-parser.js

@@ -0,0 +1,73 @@
+/**
+ * Tiny unified-diff parser.
+ *
+ * Handles the subset of `git diff` output that the runtime cares about:
+ *   - `diff --git a/x b/x` headers
+ *   - `+++ b/path` / `--- a/path` path lines
+ *   - `@@ ... @@` hunk headers
+ *   - `+`, `-`, ` ` (context) lines
+ *
+ * Skips:
+ *   - `index ...` lines
+ *   - `Binary files ... differ` lines
+ *   - "no newline at end of file" markers
+ *
+ * Returns one DiffHunk per file. Lines are preserved in order.
+ */
+export function parseUnifiedDiff(raw) {
+    const out = [];
+    let current = null;
+    for (const line of raw.split('\n')) {
+        if (line.startsWith('diff --git ')) {
+            if (current)
+                out.push(current);
+            current = null;
+            continue;
+        }
+        if (line.startsWith('+++ ')) {
+            const path = stripDiffPrefix(line.slice(4));
+            if (path)
+                current = { path, lines: [] };
+            continue;
+        }
+        if (line.startsWith('--- ')) {
+            // Path on the "from" side — we prefer the "to" path so the
+            // heading matches the file the user is editing.
+            continue;
+        }
+        if (line.startsWith('@@')) {
+            if (current)
+                current.lines.push({ kind: 'header', text: line });
+            continue;
+        }
+        if (!current)
+            continue;
+        if (line.startsWith('+')) {
+            current.lines.push({ kind: 'add', text: line.slice(1) });
+            continue;
+        }
+        if (line.startsWith('-')) {
+            current.lines.push({ kind: 'remove', text: line.slice(1) });
+            continue;
+        }
+        if (line.startsWith(' ')) {
+            current.lines.push({ kind: 'context', text: line.slice(1) });
+            continue;
+        }
+        if (line.startsWith('index ') || line.startsWith('Binary files'))
+            continue;
+        if (line === '\')
+            continue;
+        // Unknown line — keep as context so we don't lose info.
+        current.lines.push({ kind: 'context', text: line });
+    }
+    if (current)
+        out.push(current);
+    return out;
+}
+function stripDiffPrefix(s) {
+    // "b/src/foo.ts" → "src/foo.ts"; "a/src/foo.ts" → "src/foo.ts"
+    if (s.startsWith('b/') || s.startsWith('a/'))
+        return s.slice(2);
+    return s;
+}

package/dist/tui/diff.d.ts

@@ -0,0 +1,31 @@
+/**
+ * DiffView — a scrollable unified diff display.
+ *
+ * Data model: a list of `DiffHunk` (one per file). Each hunk has a path
+ * and a list of `DiffLine` with kind (add/remove/context/header).
+ *
+ *   src/auth/service.ts
+ *   -  const old = 1;
+ *   +  const old = 2;
+ *     const same = true;
+ *   +  // new line
+ *
+ * Lines are truncated to 200 chars and color-coded. The view returns
+ * null when there's no diff to show.
+ */
+import React from 'react';
+export type DiffLineKind = 'add' | 'remove' | 'context' | 'header';
+export interface DiffLine {
+    kind: DiffLineKind;
+    text: string;
+}
+export interface DiffHunk {
+    path: string;
+    lines: DiffLine[];
+}
+export interface DiffViewProps {
+    hunks: DiffHunk[];
+    /** Optional: total file count summary. */
+    summary?: string;
+}
+export declare function DiffView({ hunks, summary }: DiffViewProps): React.JSX.Element | null;

package/dist/tui/diff.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const LINE_COLORS = {
+    add: 'green',
+    remove: 'red',
+    context: 'gray',
+    header: 'cyan',
+};
+const GLYPHS = {
+    add: '+',
+    remove: '-',
+    context: ' ',
+    header: '@',
+};
+function truncate(s, max) {
+    if (s.length <= max)
+        return s;
+    return s.slice(0, max) + '…';
+}
+export function DiffView({ hunks, summary }) {
+    if (hunks.length === 0) {
+        return (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, marginY: 1, children: _jsx(Text, { color: "gray", children: "(no working-tree changes)" }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, marginY: 1, children: [summary ? (_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: "\uD83D\uDCDD Diff " }), _jsxs(Text, { color: "gray", children: ["  ", summary] })] })) : null, hunks.map((h, i) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", bold: true, children: ["\u2500\u2500 ", h.path, " "] }), _jsxs(Text, { color: "gray", children: ["(", h.lines.filter((l) => l.kind === 'add').length, "+ /", ' ', h.lines.filter((l) => l.kind === 'remove').length, "-)"] })] }), h.lines.map((l, j) => (_jsxs(Box, { children: [_jsxs(Text, { color: LINE_COLORS[l.kind], children: [GLYPHS[l.kind], " "] }), _jsx(Text, { color: LINE_COLORS[l.kind], children: truncate(l.text, 200) })] }, j)))] }, `${h.path}-${i}`)))] }));
+}

package/dist/tui/diff.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tui/diff.test.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { DiffView } from './diff.js';
+import { parseUnifiedDiff } from './diff-parser.js';
+const SAMPLE = `diff --git a/src/foo.ts b/src/foo.ts
+index 1234..5678 100644
+--- a/src/foo.ts
++++ b/src/foo.ts
+@@ -1,3 +1,4 @@
+ const a = 1;
+-const b = 2;
++const b = 3;
++const c = 4;
+ export {};
+diff --git a/src/bar.ts b/src/bar.ts
+index aaaa..bbbb 100644
+--- a/src/bar.ts
++++ b/src/bar.ts
+@@ -1,2 +1,2 @@
+-const x = 'old';
++const x = 'new';
+`;
+describe('parseUnifiedDiff', () => {
+    it('returns one hunk per file', () => {
+        const hunks = parseUnifiedDiff(SAMPLE);
+        expect(hunks).toHaveLength(2);
+        expect(hunks[0].path).toBe('src/foo.ts');
+        expect(hunks[1].path).toBe('src/bar.ts');
+    });
+    it('classifies add/remove/context/header lines', () => {
+        const hunks = parseUnifiedDiff(SAMPLE);
+        const lines = hunks[0].lines;
+        expect(lines[0].kind).toBe('header');
+        expect(lines[1].kind).toBe('context');
+        expect(lines[2].kind).toBe('remove');
+        expect(lines[3].kind).toBe('add');
+        expect(lines[4].kind).toBe('add');
+    });
+    it('skips index/binary/no-newline markers', () => {
+        const hunks = parseUnifiedDiff(SAMPLE);
+        for (const h of hunks) {
+            for (const l of h.lines) {
+                expect(l.text).not.toMatch(/^index /);
+                expect(l.text).not.toMatch(/Binary files/);
+                expect(l.text).not.toMatch(/No newline at end/);
+            }
+        }
+    });
+    it('returns empty array for empty input', () => {
+        expect(parseUnifiedDiff('')).toEqual([]);
+    });
+});
+describe('DiffView', () => {
+    it('shows an empty-state when hunks is empty', () => {
+        const { lastFrame } = render(_jsx(DiffView, { hunks: [] }));
+        expect(lastFrame()).toContain('no working-tree changes');
+    });
+    it('renders a file header and line glyphs', () => {
+        const hunks = [
+            {
+                path: 'src/foo.ts',
+                lines: [
+                    { kind: 'header', text: '@@ -1 +1 @@' },
+                    { kind: 'context', text: 'const a = 1;' },
+                    { kind: 'remove', text: 'const b = 2;' },
+                    { kind: 'add', text: 'const b = 3;' },
+                ],
+            },
+        ];
+        const { lastFrame } = render(_jsx(DiffView, { hunks: hunks, summary: "1 file changed" }));
+        const out = lastFrame();
+        expect(out).toContain('src/foo.ts');
+        expect(out).toContain('+ const b = 3;');
+        expect(out).toContain('- const b = 2;');
+        expect(out).toContain('1 file changed');
+    });
+    it('truncates long lines', () => {
+        const long = 'x'.repeat(500);
+        const hunks = [
+            { path: 'f.ts', lines: [{ kind: 'add', text: long }] },
+        ];
+        const { lastFrame } = render(_jsx(DiffView, { hunks: hunks }));
+        expect(lastFrame()).toContain('…');
+    });
+});

package/dist/tui/header.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Header — top-of-screen chrome: app name, cwd, model, step counter.
+ *
+ * Renders a single line with two padded cells separated by a vertical bar.
+ * Pure presentational; takes all data as props.
+ */
+import React from 'react';
+export interface HeaderProps {
+    /** Working directory, displayed abbreviated (last 2 path segments) if long. */
+    cwd: string;
+    /** Model id, e.g. "claude-sonnet" or "gpt-4o". */
+    model: string;
+    /** Current step number (0 when not started). */
+    step: number;
+    /** Max steps for this run (used to render "step / max"). */
+    maxSteps: number;
+}
+/** Abbreviate a path to the last two segments so long paths don't overflow. */
+export declare function abbrevPath(p: string, maxChars?: number): string;
+export declare function Header({ cwd, model, step, maxSteps }: HeaderProps): React.JSX.Element;

package/dist/tui/header.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+/** Abbreviate a path to the last two segments so long paths don't overflow. */
+export function abbrevPath(p, maxChars = 60) {
+    if (p.length <= maxChars)
+        return p;
+    // Detect the original separator style and rejoin with it.
+    const sep = p.includes('\\') ? '\\' : '/';
+    const parts = p.split(/[\\/]/).filter(Boolean);
+    if (parts.length <= 2)
+        return p;
+    return '…' + sep + parts.slice(-2).join(sep);
+}
+export function Header({ cwd, model, step, maxSteps }) {
+    return (_jsxs(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: "KLYRO" }), _jsx(Text, { color: "gray", children: "  " }), _jsx(Text, { color: "gray", children: abbrevPath(cwd) })] }), _jsxs(Box, { children: [_jsx(Text, { color: "gray", children: model }), _jsx(Text, { color: "gray", children: "  " }), _jsxs(Text, { color: step >= maxSteps ? 'red' : 'gray', children: ["step ", step, "/", maxSteps] })] })] }));
+}

package/dist/tui/header.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tui/header.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Header, abbrevPath } from './header.js';
+describe('abbrevPath', () => {
+    it('passes through short paths unchanged', () => {
+        expect(abbrevPath('/tmp/x')).toBe('/tmp/x');
+        expect(abbrevPath('C:\\projects\\app')).toBe('C:\\projects\\app');
+    });
+    it('keeps the last two segments of long paths', () => {
+        // 7 segments → last two are "src" and "index.ts".
+        expect(abbrevPath('/home/user/projects/some-really-deeply-nested-name/my-app/src/index.ts'))
+            .toBe('…/src/index.ts');
+    });
+    it('handles windows-style backslashes in long paths', () => {
+        const longWin = 'C:\\Users\\L.Siddhartha\\projects\\some-really-deep-name\\klyro-thing\\src\\index.ts';
+        expect(abbrevPath(longWin)).toBe('…\\src\\index.ts');
+    });
+});
+describe('Header', () => {
+    it('shows the app name, cwd, model, and step counter', () => {
+        const { lastFrame } = render(_jsx(Header, { cwd: "/tmp/proj", model: "claude-sonnet", step: 3, maxSteps: 30 }));
+        const out = lastFrame();
+        expect(out).toContain('KLYRO');
+        expect(out).toContain('/tmp/proj');
+        expect(out).toContain('claude-sonnet');
+        expect(out).toMatch(/step 3\/30/);
+    });
+    it('highlights the step counter when at or above maxSteps', () => {
+        const { lastFrame } = render(_jsx(Header, { cwd: "/p", model: "m", step: 30, maxSteps: 30 }));
+        const out = lastFrame();
+        expect(out).toMatch(/step 30\/30/);
+    });
+});

package/dist/tui/plan.d.ts

@@ -0,0 +1,24 @@
+/**
+ * PlanView — a scrollable, collapsible view of the agent's plan.
+ *
+ * Data model: a list of PlanStep objects with status. The runtime
+ * emits `plan_update` events; the TUI aggregates them into a single
+ * current plan and renders the steps with status glyphs.
+ *
+ *   ◯ read src/auth/service.ts
+ *   ● edit src/auth/service.ts        (in progress)
+ *   ✓ run tests                       (done)
+ *   ✗ run lint                        (failed)
+ *
+ * The view is collapsible so it doesn't take over the screen while
+ * the agent is mid-stream.
+ */
+import React from 'react';
+import type { PlanStep } from '../agent/runtime.js';
+export interface PlanViewProps {
+    steps: PlanStep[];
+    /** When true, render the full plan; when false, render only the in-progress step. */
+    expanded: boolean;
+    onToggle: () => void;
+}
+export declare function PlanView({ steps, expanded, onToggle }: PlanViewProps): React.JSX.Element | null;

package/dist/tui/plan.js

@@ -0,0 +1,25 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const GLYPHS = {
+    pending: '◯',
+    in_progress: '●',
+    done: '✓',
+    failed: '✗',
+    skipped: '⊘',
+};
+const COLORS = {
+    pending: 'gray',
+    in_progress: 'cyan',
+    done: 'green',
+    failed: 'red',
+    skipped: 'yellow',
+};
+export function PlanView({ steps, expanded, onToggle }) {
+    if (steps.length === 0)
+        return null;
+    if (!expanded) {
+        const current = steps.find((s) => s.status === 'in_progress') ?? steps[0];
+        return (_jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsxs(Text, { color: COLORS[current.status], children: [GLYPHS[current.status], " "] }), _jsxs(Text, { dimColor: true, children: ["[", steps.filter((s) => s.status === 'done').length, "/", steps.length, "] ", current.title] }), _jsx(Text, { color: "gray", children: "  (press /plan to expand)" })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, marginY: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: "\uD83D\uDCCB Plan " }), _jsxs(Text, { color: "gray", children: ["  (", steps.filter((s) => s.status === 'done').length, "/", steps.length, " done)"] }), _jsx(Text, { color: "gray", children: "  press /plan to collapse" })] }), steps.map((s) => (_jsxs(Box, { paddingLeft: 2, children: [_jsxs(Text, { color: COLORS[s.status], children: [GLYPHS[s.status], " "] }), _jsx(Text, { color: s.status === 'in_progress' ? 'cyan' : undefined, bold: s.status === 'in_progress', children: s.title }), s.files && s.files.length > 0 ? (_jsxs(Text, { color: "gray", children: ["  (", s.files.join(', '), ")"] })) : null] }, s.id)))] }));
+}

package/dist/tui/plan.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tui/plan.test.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { PlanView } from './plan.js';
+const sampleSteps = [
+    { id: '1', title: 'read src/foo.ts', status: 'done' },
+    { id: '2', title: 'edit src/foo.ts', status: 'in_progress', files: ['src/foo.ts'] },
+    { id: '3', title: 'run tests', status: 'pending' },
+];
+describe('PlanView', () => {
+    it('returns null when there are no steps', () => {
+        const { lastFrame } = render(_jsx(PlanView, { steps: [], expanded: true, onToggle: () => { } }));
+        expect(lastFrame()).toBe('');
+    });
+    it('renders the in-progress step when collapsed', () => {
+        const { lastFrame } = render(_jsx(PlanView, { steps: sampleSteps, expanded: false, onToggle: () => { } }));
+        const out = lastFrame();
+        expect(out).toContain('edit src/foo.ts');
+        expect(out).toContain('[1/3]');
+        expect(out).toContain('/plan');
+    });
+    it('renders all steps with status glyphs when expanded', () => {
+        const { lastFrame } = render(_jsx(PlanView, { steps: sampleSteps, expanded: true, onToggle: () => { } }));
+        const out = lastFrame();
+        expect(out).toContain('read src/foo.ts');
+        expect(out).toContain('edit src/foo.ts');
+        expect(out).toContain('run tests');
+        expect(out).toContain('1/3');
+        expect(out).toContain('Plan');
+    });
+    it('shows failure glyphs for failed steps', () => {
+        const steps = [
+            { id: '1', title: 'do thing', status: 'failed' },
+        ];
+        const { lastFrame } = render(_jsx(PlanView, { steps: steps, expanded: true, onToggle: () => { } }));
+        expect(lastFrame()).toContain('✗');
+    });
+    it('shows the files list for in-progress steps', () => {
+        const { lastFrame } = render(_jsx(PlanView, { steps: sampleSteps, expanded: true, onToggle: () => { } }));
+        expect(lastFrame()).toContain('src/foo.ts');
+    });
+});

package/dist/tui/transcript.d.ts

@@ -2,13 +2,15 @@
  * Transcript — a scrollable list of transcript entries.
  *
  * Each entry is a typed TranscriptItem (text delta, tool call block,
- * tool result, policy decision, error). The component takes a flat list
- * and renders it. Tool call blocks are collapsible via a `collapsed` flag.
+ * tool result, policy decision, error, file changed). The component
+ * takes a flat list and renders it. Tool blocks use a card layout
+ * (┌─ name ─┐) and show a spinner while running.
  *
  * State management: parent owns the list, passes a fresh array on every
  * update. This component is pure presentational.
  */
 import React from 'react';
+import { type DiffHunk } from './diff.js';
 export type TranscriptItem = {
     id: string;
     kind: 'text';
@@ -23,7 +25,8 @@ export type TranscriptItem = {
     result?: string;
     isError?: boolean;
     latencyMs?: number;
-    collapsed?: boolean;
+    /** When running, no result is attached yet. */
+    status: 'running' | 'done' | 'error';
 } | {
     id: string;
     kind: 'policy';
@@ -34,6 +37,16 @@ export type TranscriptItem = {
     id: string;
     kind: 'error';
     message: string;
+} | {
+    id: string;
+    kind: 'file_changed';
+    path: string;
+    op: 'created' | 'modified' | 'deleted';
+} | {
+    id: string;
+    kind: 'diff';
+    hunks: DiffHunk[];
+    summary?: string;
 };
 export declare function Transcript({ items }: {
     items: TranscriptItem[];

package/dist/tui/transcript.js

@@ -1,26 +1,72 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text, Box } from 'ink';
+import Spinner from 'ink-spinner';
+import { DiffView } from './diff.js';
 export function Transcript({ items }) {
     return (_jsx(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, children: items.length === 0 ? (_jsx(Text, { color: "gray", dimColor: true, children: "Type a prompt or /help for commands." })) : items.map((item) => (_jsx(TranscriptRow, { item: item }, item.id))) }));
 }
+/** Build a one-line summary of a tool call from its args JSON. */
+function summarizeTool(name, args) {
+    if (!args || args === '{}')
+        return '';
+    let parsed = null;
+    try {
+        parsed = JSON.parse(args);
+    }
+    catch {
+        return args.slice(0, 80);
+    }
+    switch (name) {
+        case 'read_file':
+        case 'write_file':
+        case 'edit_file':
+            return typeof parsed.path === 'string' ? parsed.path : '';
+        case 'shell_exec':
+            return typeof parsed.command === 'string' ? parsed.command : '';
+        case 'search_files':
+        case 'grep': {
+            const q = parsed.query ?? parsed.pattern;
+            return typeof q === 'string' ? `"${q}"` : '';
+        }
+        case 'list_directory':
+            return typeof parsed.path === 'string' ? parsed.path : '';
+        case 'git_status':
+        case 'git_diff':
+            return '';
+        default:
+            return '';
+    }
+}
 function TranscriptRow({ item }) {
     if (item.kind === 'text') {
         const color = item.role === 'user' ? 'blue' : undefined;
         return (_jsx(Box, { marginY: 0, children: _jsxs(Text, { color: color, children: [item.role === 'user' ? '> ' : '', item.text] }) }));
     }
     if (item.kind === 'tool') {
-        const headerColor = item.isError ? 'red' : 'yellow';
-        return (_jsxs(Box, { flexDirection: "column", marginY: 0, paddingLeft: 2, children: [_jsxs(Text, { children: [_jsxs(Text, { color: headerColor, children: ["[tool] ", item.name] }), item.latencyMs !== undefined ? (_jsxs(Text, { color: "gray", children: ["  (", item.latencyMs, "ms)"] })) : null] }), item.collapsed ? (_jsxs(Text, { color: "gray", dimColor: true, children: ["  (collapsed \u2014 ", item.args.length, " chars of args, ", item.result?.length ?? 0, " chars of result)"] })) : (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "gray", children: ["  args: ", truncate(item.args, 200)] }), item.result !== undefined ? (_jsxs(Text, { color: item.isError ? 'red' : 'gray', children: ["  -> ", truncate(item.result, 400)] })) : null] }))] }));
+        return _jsx(ToolCard, { item: item });
     }
     if (item.kind === 'policy') {
         const color = item.action === 'allow' ? 'green' : item.action === 'deny' ? 'red' : 'yellow';
         return (_jsxs(Box, { paddingLeft: 2, children: [_jsx(Text, { color: "gray", children: "[policy] " }), _jsx(Text, { color: color, children: item.action }), _jsxs(Text, { color: "gray", children: [" ", item.name] }), item.reason ? _jsxs(Text, { color: "gray", children: [" \u2014 ", item.reason] }) : null] }));
     }
+    if (item.kind === 'file_changed') {
+        const color = item.op === 'deleted' ? 'red' : item.op === 'created' ? 'green' : 'yellow';
+        const glyph = item.op === 'created' ? '+' : item.op === 'deleted' ? '-' : '~';
+        return (_jsx(Box, { paddingLeft: 2, children: _jsxs(Text, { color: color, children: ["[", glyph, " ", item.op, "] ", item.path] }) }));
+    }
     if (item.kind === 'error') {
         return (_jsx(Box, { paddingLeft: 2, children: _jsxs(Text, { color: "red", children: ["[error] ", item.message] }) }));
     }
+    if (item.kind === 'diff') {
+        return _jsx(DiffView, { hunks: item.hunks, summary: item.summary });
+    }
     return null;
 }
+function ToolCard({ item }) {
+    const summary = summarizeTool(item.name, item.args);
+    const borderColor = item.status === 'error' ? 'red' : item.status === 'running' ? 'cyan' : 'gray';
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: borderColor, marginY: 1, paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "\u250C\u2500 " }), _jsx(Text, { bold: true, children: item.name }), item.status === 'running' ? (_jsxs(Text, { color: "cyan", children: ["  ", _jsx(Spinner, { type: "dots" }), " running"] })) : item.status === 'error' ? (_jsx(Text, { color: "red", children: "  \u2717 error" })) : (_jsxs(Text, { color: "green", children: ["  \u2713 ", item.latencyMs ?? 0, "ms"] })), _jsx(Text, { color: "gray", children: " \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" })] }), summary ? (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { children: truncate(summary, 200) }) })) : null, item.status !== 'running' && item.result ? (_jsx(Box, { paddingLeft: 2, flexDirection: "column", children: _jsxs(Text, { color: item.isError ? 'red' : 'gray', children: [item.isError ? '✗ ' : '→ ', truncate(item.result, 400)] }) })) : null, _jsx(Box, { children: _jsx(Text, { color: "gray", children: "\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) })] }));
+}
 function truncate(s, max) {
     if (s.length <= max)
         return s;

package/dist/tui/transcript.test.js

@@ -22,50 +22,98 @@ describe('Transcript', () => {
         expect(lastFrame()).toContain('world');
         expect(lastFrame()).not.toContain('> world');
     });
-    it('renders a tool call block with header and result', () => {
+    it('renders a done tool call as a card with name, summary, and result', () => {
         const items = [
             {
                 id: 't1', kind: 'tool', name: 'read_file', id_call: 'c1',
-                args: '{"path":"x"}', result: 'content', isError: false, latencyMs: 12,
+                args: '{"path":"src/foo.ts"}', result: 'content', isError: false, latencyMs: 12,
+                status: 'done',
             },
         ];
         const { lastFrame } = render(_jsx(Transcript, { items: items }));
         const out = lastFrame();
-        expect(out).toContain('[tool]');
         expect(out).toContain('read_file');
-        expect(out).toContain('(12ms)');
+        expect(out).toContain('src/foo.ts');
         expect(out).toContain('content');
+        expect(out).toMatch(/12ms/);
     });
-    it('collapses long tool args/results when collapsed=true', () => {
+    it('renders a running tool with a spinner and no result', () => {
         const items = [
             {
                 id: 't1', kind: 'tool', name: 'shell_exec', id_call: 'c1',
-                args: 'x'.repeat(500), result: 'y'.repeat(500), isError: false, latencyMs: 5,
-                collapsed: true,
+                args: '{"command":"npm test"}',
+                status: 'running',
             },
         ];
         const { lastFrame } = render(_jsx(Transcript, { items: items }));
         const out = lastFrame();
-        expect(out).toContain('collapsed');
-        expect(out).toContain('500');
-        expect(out).not.toContain('x'.repeat(50));
+        expect(out).toContain('shell_exec');
+        expect(out).toContain('npm test');
+        expect(out).toMatch(/running/);
+    });
+    it('renders an errored tool with a red border and error glyph', () => {
+        const items = [
+            {
+                id: 't1', kind: 'tool', name: 'shell_exec', id_call: 'c1',
+                args: '{"command":"exit 1"}', result: 'command failed', isError: true, latencyMs: 5,
+                status: 'error',
+            },
+        ];
+        const { lastFrame } = render(_jsx(Transcript, { items: items }));
+        const out = lastFrame();
+        expect(out).toContain('shell_exec');
+        expect(out).toContain('command failed');
+        expect(out).toMatch(/error/);
     });
-    it('renders policy decisions with the right color cue', () => {
+    it('renders policy decisions with allow/deny colors', () => {
         const items = [
-            { id: 'p1', kind: 'policy', name: 'shell_exec', action: 'deny', reason: 'r' },
-            { id: 'p2', kind: 'policy', name: 'shell_exec', action: 'allow' },
+            { id: 'p1', kind: 'policy', name: 'shell_exec', action: 'deny', reason: 'destructive' },
         ];
         const { lastFrame } = render(_jsx(Transcript, { items: items }));
         const out = lastFrame();
         expect(out).toContain('deny');
-        expect(out).toContain('allow');
         expect(out).toContain('shell_exec');
+        expect(out).toContain('destructive');
+    });
+    it('renders file_changed items with op glyph', () => {
+        const items = [
+            { id: 'f1', kind: 'file_changed', path: 'src/x.ts', op: 'created' },
+            { id: 'f2', kind: 'file_changed', path: 'src/y.ts', op: 'deleted' },
+        ];
+        const { lastFrame } = render(_jsx(Transcript, { items: items }));
+        const out = lastFrame();
+        expect(out).toContain('+ created');
+        expect(out).toContain('src/x.ts');
+        expect(out).toContain('- deleted');
+        expect(out).toContain('src/y.ts');
     });
     it('renders error items', () => {
         const items = [
-            { id: 'e1', kind: 'error', message: 'oops' },
+            { id: 'e1', kind: 'error', message: 'something broke' },
+        ];
+        const { lastFrame } = render(_jsx(Transcript, { items: items }));
+        expect(lastFrame()).toContain('something broke');
+    });
+    it('summarizes a shell_exec with just the command', () => {
+        const items = [
+            {
+                id: 't1', kind: 'tool', name: 'shell_exec', id_call: 'c1',
+                args: '{"command":"ls -la"}',
+                status: 'running',
+            },
+        ];
+        const { lastFrame } = render(_jsx(Transcript, { items: items }));
+        expect(lastFrame()).toContain('ls -la');
+    });
+    it('summarizes a search with the query in quotes', () => {
+        const items = [
+            {
+                id: 't1', kind: 'tool', name: 'grep', id_call: 'c1',
+                args: '{"query":"authenticate"}',
+                status: 'done', result: '12 matches',
+            },
         ];
         const { lastFrame } = render(_jsx(Transcript, { items: items }));
-        expect(lastFrame()).toContain('[error] oops');
+        expect(lastFrame()).toContain('"authenticate"');
     });
 });

package/package.json

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