klyro 0.1.2 → 0.1.4

package/dist/tui/app.js

@@ -11,10 +11,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * RuntimeEvents via the onEvent callback wired by cli/repl.ts and
  * translates them into transcript/status updates.
  */
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { StatusLine } from './status.js';
 import { Transcript } from './transcript.js';
+import { Header } from './header.js';
+import { ApprovalModal, TuiApprovalBridge } from './approval.js';
+import { PlanView } from './plan.js';
 import { parse as parseSlash } from '../cli/slash/parser.js';
 let _itemCounter = 0;
 function nextId(prefix) {
@@ -24,6 +27,10 @@ function nextId(prefix) {
 export function App(props) {
     const [transcript, setTranscript] = useState(props.initialTranscript ?? []);
     const [input, setInput] = useState('');
+    const [bridge] = useState(() => props.approvalBridge ?? new TuiApprovalBridge());
+    const [awaitingApproval, setAwaitingApproval] = useState(false);
+    const [plan, setPlan] = useState([]);
+    const [planExpanded, setPlanExpanded] = useState(false);
     const [status, setStatus] = useState({
         model: props.initialModel,
         step: 0,
@@ -34,19 +41,49 @@ export function App(props) {
         status: 'idle',
         ...props.initialStatus,
     });
+    // Track bridge state to disable the input box while a prompt is up.
+    useEffect(() => {
+        return bridge.subscribe((p) => setAwaitingApproval(p !== null));
+    }, [bridge]);
     const append = useCallback((item) => {
-        setTranscript((prev) => [...prev, item]);
+        setTranscript((prev) => {
+            const last = prev[prev.length - 1];
+            // Only coalesce when IDs match — separate turns have different IDs
+            if (last?.kind === 'text' &&
+                item.kind === 'text' &&
+                last.role === 'assistant' &&
+                item.role === 'assistant' &&
+                last.id === item.id) {
+                return [...prev.slice(0, -1), { ...last, text: last.text + item.text }];
+            }
+            return [...prev, item];
+        });
+    }, []);
+    const updateStatus = useCallback((s) => {
+        setStatus((prev) => ({ ...prev, ...s }));
     }, []);
+    const updatePlan = useCallback((p) => {
+        setPlan(p);
+        setPlanExpanded(true);
+    }, []);
+    // Stabilize onMounted to avoid re-installing hooks on every parent re-render
+    const onMountedRef = useRef(props.onMounted);
+    useEffect(() => { onMountedRef.current = props.onMounted; }, [props.onMounted]);
     useEffect(() => {
+        // Instance-local hooks via callback (preferred)
+        onMountedRef.current?.({ append, updateStatus, updatePlan });
+        // Global compat hooks for tests / legacy callers (single instance at a time)
         globalThis.__klyroAppAppend = append;
-        globalThis.__klyroAppStatus = (s) => setStatus((prev) => ({ ...prev, ...s }));
+        globalThis.__klyroAppStatus = updateStatus;
+        globalThis.__klyroAppPlan = updatePlan;
         return () => {
             delete globalThis.__klyroAppAppend;
             delete globalThis.__klyroAppStatus;
+            delete globalThis.__klyroAppPlan;
         };
-    }, [append]);
+    }, [append, updateStatus, updatePlan]);
     useInput((inputStr, key) => {
-        if (status.status === 'running')
+        if (status.status === 'running' || awaitingApproval)
             return;
         if (key.return) {
             const value = input.trim();
@@ -58,6 +95,11 @@ export function App(props) {
             if (cmd.kind === 'prompt') {
                 void props.onPrompt(cmd.text);
             }
+            else if (cmd.kind === 'plan') {
+                // Local UI command — toggle the plan view inline.
+                if (plan.length > 0)
+                    setPlanExpanded((v) => !v);
+            }
             else {
                 void props.onSlash(cmd);
             }
@@ -75,5 +117,5 @@ export function App(props) {
             setInput((v) => v + inputStr);
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsx(StatusLine, { snapshot: status }), _jsx(Transcript, { items: transcript }), _jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { color: "gray", children: '> ' }), _jsx(Text, { children: input }), status.status === 'running' ? _jsx(Text, { color: "cyan", children: " \u258D" }) : _jsx(Text, { children: "\u258D" })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsx(Header, { cwd: props.cwd, model: status.model, step: status.step, maxSteps: status.maxSteps }), _jsx(StatusLine, { snapshot: status }), plan.length > 0 ? (_jsx(PlanView, { steps: plan, expanded: planExpanded, onToggle: () => setPlanExpanded((v) => !v) })) : null, _jsx(Transcript, { items: transcript }), awaitingApproval ? _jsx(ApprovalModal, { bridge: bridge }) : null, _jsxs(Box, { borderStyle: "single", borderColor: awaitingApproval ? 'yellow' : 'gray', paddingX: 1, children: [_jsx(Text, { color: "gray", children: awaitingApproval ? '! ' : '> ' }), _jsx(Text, { children: awaitingApproval ? '(awaiting approval — see above)' : input }), status.status === 'running' ? _jsx(Text, { color: "cyan", children: " \u258D" }) : _jsx(Text, { children: "\u258D" })] })] }));
 }

package/dist/tui/app.test.js

@@ -4,7 +4,7 @@ import { render } from 'ink-testing-library';
 import { App } from './app.js';
 describe('App', () => {
     it('shows the empty-state hint and the status line', () => {
-        const { lastFrame } = render(_jsx(App, { initialModel: "mock", maxSteps: 10, onPrompt: async () => { }, onSlash: async () => { } }));
+        const { lastFrame } = render(_jsx(App, { initialModel: "mock", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: async () => { } }));
         const out = lastFrame();
         expect(out).toContain('mock');
         expect(out).toMatch(/Type a prompt/);
@@ -13,12 +13,12 @@ describe('App', () => {
         const items = [
             { id: '1', kind: 'text', text: 'seed', role: 'user' },
         ];
-        const { lastFrame } = render(_jsx(App, { initialModel: "m", maxSteps: 10, onPrompt: async () => { }, onSlash: async () => { }, initialTranscript: items }));
+        const { lastFrame } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: async () => { }, initialTranscript: items }));
         expect(lastFrame()).toContain('> seed');
     });
     it('honors initialStatus overrides', () => {
         const overrides = { step: 5, repairs: 3, status: 'running' };
-        const { lastFrame } = render(_jsx(App, { initialModel: "m", maxSteps: 10, onPrompt: async () => { }, onSlash: async () => { }, initialStatus: overrides }));
+        const { lastFrame } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: async () => { }, initialStatus: overrides }));
         const out = lastFrame();
         expect(out).toContain('5');
         expect(out).toContain('10');
@@ -27,7 +27,7 @@ describe('App', () => {
     });
     it('installs and tears down the global bridge hooks', () => {
         const g = globalThis;
-        const { unmount } = render(_jsx(App, { initialModel: "m", maxSteps: 10, onPrompt: async () => { }, onSlash: async () => { } }));
+        const { unmount } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: async () => { } }));
         expect(g.__klyroAppAppend).toBeTypeOf('function');
         expect(g.__klyroAppStatus).toBeTypeOf('function');
         unmount();
@@ -36,7 +36,7 @@ describe('App', () => {
     });
     it('submits a non-slash prompt via onPrompt', async () => {
         const onPrompt = vi.fn(async () => { });
-        const { stdin } = render(_jsx(App, { initialModel: "m", maxSteps: 10, onPrompt: onPrompt, onSlash: async () => { } }));
+        const { stdin } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: onPrompt, onSlash: async () => { } }));
         stdin.write('hello world');
         await new Promise((r) => setTimeout(r, 20));
         stdin.write('\x0d');
@@ -45,7 +45,7 @@ describe('App', () => {
     });
     it('routes a slash command to onSlash', async () => {
         const onSlash = vi.fn(async () => { });
-        const { stdin } = render(_jsx(App, { initialModel: "m", maxSteps: 10, onPrompt: async () => { }, onSlash: onSlash }));
+        const { stdin } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: onSlash }));
         stdin.write('/help');
         await new Promise((r) => setTimeout(r, 20));
         stdin.write('\x0d');
@@ -56,7 +56,7 @@ describe('App', () => {
     });
     it('ignores Enter while status is running', async () => {
         const onPrompt = vi.fn(async () => { });
-        const { stdin } = render(_jsx(App, { initialModel: "m", maxSteps: 10, onPrompt: onPrompt, onSlash: async () => { }, initialStatus: { status: 'running' } }));
+        const { stdin } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: onPrompt, onSlash: async () => { }, initialStatus: { status: 'running' } }));
         stdin.write('hello');
         await new Promise((r) => setTimeout(r, 20));
         stdin.write('\x0d');
@@ -65,7 +65,7 @@ describe('App', () => {
     });
     it('routes /quit to onSlash as a quit command', async () => {
         const onSlash = vi.fn(async () => { });
-        const { stdin } = render(_jsx(App, { initialModel: "m", maxSteps: 10, onPrompt: async () => { }, onSlash: onSlash }));
+        const { stdin } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: onSlash }));
         stdin.write('/quit');
         await new Promise((r) => setTimeout(r, 20));
         stdin.write('\x0d');

package/dist/tui/approval.d.ts

@@ -0,0 +1,42 @@
+/**
+ * TUI approval prompt — a TUI-native replacement for StdinApprovalPrompt.
+ *
+ * Why not just keep StdinApprovalPrompt and use readline?
+ *   Ink owns stdin via useInput. If readline is also attached to stdin,
+ *   their events race and the user sees garbled or missing input.
+ *
+ * The runtime calls `ask(req)` from inside the agent loop and awaits the
+ * choice. This module sits between them:
+ *
+ *   1. The Ink App registers a resolver via setResolver() in useEffect.
+ *   2. When the runtime calls ask(), we stash the request and return
+ *      a Promise.
+ *   3. The App polls getPending() on every render to show a modal.
+ *   4. The App's useInput handler sees a pending prompt and routes
+ *      y/n/a to the resolver.
+ *
+ * Non-TTY mode (no Ink mounted) keeps using StdinApprovalPrompt; this
+ * module is only used when the TUI is active.
+ */
+import React from 'react';
+import type { ApprovalChoice, ApprovalRequest } from '../policy/approval.js';
+import type { ApprovalPrompt } from '../policy/approval.js';
+interface PendingPrompt {
+    req: ApprovalRequest;
+    resolve: (choice: ApprovalChoice) => void;
+}
+declare class TuiApprovalBridge implements ApprovalPrompt {
+    private pending;
+    private listener;
+    ask(req: ApprovalRequest): Promise<ApprovalChoice>;
+    /** Called by the App's useInput to consume the pending prompt. */
+    resolve(choice: ApprovalChoice): boolean;
+    getPending(): ApprovalRequest | null;
+    /** Used by useSyncExternalStore-ish wiring in <ApprovalModal/>. */
+    subscribe(listener: (p: PendingPrompt | null) => void): () => void;
+}
+export { TuiApprovalBridge };
+/** Mounted inside the Ink App. Renders a modal when a prompt is pending. */
+export declare function ApprovalModal({ bridge }: {
+    bridge: TuiApprovalBridge;
+}): React.JSX.Element | null;

package/dist/tui/approval.js

@@ -0,0 +1,76 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * TUI approval prompt — a TUI-native replacement for StdinApprovalPrompt.
+ *
+ * Why not just keep StdinApprovalPrompt and use readline?
+ *   Ink owns stdin via useInput. If readline is also attached to stdin,
+ *   their events race and the user sees garbled or missing input.
+ *
+ * The runtime calls `ask(req)` from inside the agent loop and awaits the
+ * choice. This module sits between them:
+ *
+ *   1. The Ink App registers a resolver via setResolver() in useEffect.
+ *   2. When the runtime calls ask(), we stash the request and return
+ *      a Promise.
+ *   3. The App polls getPending() on every render to show a modal.
+ *   4. The App's useInput handler sees a pending prompt and routes
+ *      y/n/a to the resolver.
+ *
+ * Non-TTY mode (no Ink mounted) keeps using StdinApprovalPrompt; this
+ * module is only used when the TUI is active.
+ */
+import { useEffect, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+class TuiApprovalBridge {
+    pending = null;
+    listener = null;
+    ask(req) {
+        return new Promise((resolve) => {
+            this.pending = { req, resolve };
+            this.listener?.(this.pending);
+        });
+    }
+    /** Called by the App's useInput to consume the pending prompt. */
+    resolve(choice) {
+        if (!this.pending)
+            return false;
+        const p = this.pending;
+        this.pending = null;
+        this.listener?.(null);
+        p.resolve(choice);
+        return true;
+    }
+    getPending() {
+        return this.pending?.req ?? null;
+    }
+    /** Used by useSyncExternalStore-ish wiring in <ApprovalModal/>. */
+    subscribe(listener) {
+        this.listener = listener;
+        return () => { this.listener = null; };
+    }
+}
+export { TuiApprovalBridge };
+/** Mounted inside the Ink App. Renders a modal when a prompt is pending. */
+export function ApprovalModal({ bridge }) {
+    const [pending, setPending] = useState(bridge.getPending());
+    useEffect(() => {
+        return bridge.subscribe((p) => setPending(p?.req ?? null));
+    }, [bridge]);
+    useInput((inputStr, key) => {
+        if (!pending)
+            return;
+        const c = inputStr.toLowerCase();
+        if (c === 'y' || c === 'a' || c === 'd' || c === 'n') {
+            const choice = (c === 'y' || c === 'a') ? (c === 'a' ? 'always' : 'allow') : 'deny';
+            bridge.resolve(choice);
+            return;
+        }
+        if (key.return) {
+            bridge.resolve('deny');
+            return;
+        }
+    });
+    if (!pending)
+        return null;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: "yellow", paddingX: 1, marginY: 1, children: [_jsxs(Text, { color: "yellow", bold: true, children: ["\u26A0 approval needed \u2014 ", pending.toolName] }), _jsxs(Text, { color: "gray", children: ["  reason: ", pending.reason] }), pending.summary ? _jsxs(Text, { children: ["  ", pending.summary] }) : null, _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "green", children: "[y] allow" }), _jsx(Text, { color: "gray", children: "  " }), _jsx(Text, { color: "green", children: "[a] always allow" }), _jsx(Text, { color: "gray", children: "  " }), _jsx(Text, { color: "red", children: "[d] deny" }), _jsx(Text, { color: "gray", children: "  (Enter = deny)" })] })] }));
+}

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

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

package/dist/tui/approval.test.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { TuiApprovalBridge, ApprovalModal } from './approval.js';
+describe('TuiApprovalBridge', () => {
+    it('returns a pending prompt until resolve() is called', async () => {
+        const bridge = new TuiApprovalBridge();
+        expect(bridge.getPending()).toBeNull();
+        const choicePromise = bridge.ask({ toolName: 'shell_exec', reason: 'risky', summary: 'rm -rf' });
+        const req = bridge.getPending();
+        expect(req?.toolName).toBe('shell_exec');
+        bridge.resolve('deny');
+        await expect(choicePromise).resolves.toBe('deny');
+        expect(bridge.getPending()).toBeNull();
+    });
+    it('resolve() is a no-op when no prompt is pending', () => {
+        const bridge = new TuiApprovalBridge();
+        expect(bridge.resolve('allow')).toBe(false);
+    });
+    it('subscribers are notified on pending change', () => {
+        const bridge = new TuiApprovalBridge();
+        const fn = vi.fn();
+        bridge.subscribe(fn);
+        const promise = bridge.ask({ toolName: 'x', reason: 'r', summary: 's' });
+        expect(fn).toHaveBeenCalledTimes(1);
+        bridge.resolve('allow');
+        expect(fn).toHaveBeenCalledTimes(2);
+        return promise;
+    });
+});
+describe('ApprovalModal', () => {
+    function setup() {
+        const bridge = new TuiApprovalBridge();
+        const { lastFrame, stdin } = render(_jsx(ApprovalModal, { bridge: bridge }));
+        return { bridge, lastFrame, stdin };
+    }
+    it('renders nothing when no prompt is pending', () => {
+        const { lastFrame } = setup();
+        expect(lastFrame()).toBe('');
+    });
+    it('renders the modal when a prompt is pending', async () => {
+        const { lastFrame, bridge } = setup();
+        const promise = bridge.ask({ toolName: 'shell_exec', reason: 'destructive', summary: 'rm -rf /' });
+        await new Promise((r) => setTimeout(r, 5));
+        const out = lastFrame();
+        expect(out).toContain('approval needed');
+        expect(out).toContain('shell_exec');
+        expect(out).toContain('destructive');
+        expect(out).toContain('rm -rf /');
+        expect(out).toContain('allow');
+        expect(out).toContain('deny');
+        bridge.resolve('deny');
+        await promise;
+    });
+    it('"y" resolves to allow', async () => {
+        const { bridge, stdin } = setup();
+        const promise = bridge.ask({ toolName: 'x', reason: 'r', summary: 's' });
+        await new Promise((r) => setTimeout(r, 50));
+        stdin.write('y');
+        await new Promise((r) => setTimeout(r, 50));
+        await expect(promise).resolves.toBe('allow');
+    });
+    it('"a" resolves to always', async () => {
+        const { bridge, stdin } = setup();
+        const promise = bridge.ask({ toolName: 'x', reason: 'r', summary: 's' });
+        await new Promise((r) => setTimeout(r, 50));
+        stdin.write('a');
+        await new Promise((r) => setTimeout(r, 50));
+        await expect(promise).resolves.toBe('always');
+    });
+    it('"n" and "d" resolve to deny', async () => {
+        const { bridge: b1, stdin: s1 } = setup();
+        const p1 = b1.ask({ toolName: 'x', reason: 'r', summary: 's' });
+        await new Promise((r) => setTimeout(r, 50));
+        s1.write('n');
+        await new Promise((r) => setTimeout(r, 50));
+        await expect(p1).resolves.toBe('deny');
+        const { bridge: b2, stdin: s2 } = setup();
+        const p2 = b2.ask({ toolName: 'x', reason: 'r', summary: 's' });
+        await new Promise((r) => setTimeout(r, 50));
+        s2.write('d');
+        await new Promise((r) => setTimeout(r, 50));
+        await expect(p2).resolves.toBe('deny');
+    });
+    it('Enter resolves to deny', async () => {
+        const { bridge, stdin } = setup();
+        const promise = bridge.ask({ toolName: 'x', reason: 'r', summary: 's' });
+        await new Promise((r) => setTimeout(r, 50));
+        stdin.write('\x0d');
+        await new Promise((r) => setTimeout(r, 50));
+        await expect(promise).resolves.toBe('deny');
+    });
+});

package/dist/tui/diff-parser.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+import type { DiffHunk } from './diff.js';
+export declare function parseUnifiedDiff(raw: string): DiffHunk[];

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] })] })] }));
+}