klyro 0.1.9 → 0.1.10

package/dist/tui/app.d.ts

@@ -1,10 +1,6 @@
 /**
- * Klyro TUI v2 — inline/scrollback architecture per TUI_DESIGN.md §1, §10-11
- * Four disciplines:
- * 1. History in <Static> — never re-rendered
- * 2. Only live region is dynamic
- * 3. Stream deltas batched at ~30fps
- * 4. Exactly one useInput owner
+ * Klyro Full-Screen TUI — TUI_DESIGN.md §2, §24, §38 (Phase 1-4)
+ * Full viewport, conversation, input, status bar — professional, dense, terminal-native
  */
 import React from 'react';
 import { type StatusSnapshot } from './status.js';

package/dist/tui/app.fullscreen.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Klyro Full-Screen TUI — TUI_DESIGN.md §2, §24, §38 (Phase 1-4)
+ * Full viewport, conversation, input, status bar — professional, dense, terminal-native
+ */
+import React from 'react';
+import { type StatusSnapshot } from './status.js';
+import { type TranscriptItem } from './transcript.js';
+import { TuiApprovalBridge } from './approval.js';
+import type { PlanStep } from '../agent/runtime.js';
+export interface AppProps {
+    initialModel: string;
+    maxSteps: number;
+    cwd: string;
+    onPrompt: (text: string) => void | Promise<void>;
+    onSlash: (cmd: import('../cli/slash/parser.js').SlashCommand) => void | Promise<void>;
+    initialTranscript?: TranscriptItem[];
+    initialStatus?: Partial<StatusSnapshot>;
+    approvalBridge?: TuiApprovalBridge;
+    onMounted?: (hooks: {
+        append: (i: TranscriptItem) => void;
+        updateStatus: (s: Partial<StatusSnapshot>) => void;
+        updatePlan: (p: PlanStep[]) => void;
+    }) => void;
+}
+export declare function App(props: AppProps): React.JSX.Element;

package/dist/tui/app.fullscreen.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Klyro Full-Screen TUI — TUI_DESIGN.md §2, §24, §38 (Phase 1-4)
+ * Full viewport, conversation, input, status bar — professional, dense, terminal-native
+ */
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
+import { TuiApprovalBridge } from './approval.js';
+import { PlanView } from './plan.js';
+import { parse as parseSlash } from '../cli/slash/parser.js';
+import { tokens } from './tokens.js';
+let _id = 0;
+function nextId(p) { _id++; return `${p}-${_id}`; }
+export function App(props) {
+    const { stdout } = useStdout();
+    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 [status, setStatus] = useState({
+        model: props.initialModel,
+        step: 0,
+        maxSteps: props.maxSteps,
+        usageInput: 0,
+        usageOutput: 0,
+        repairs: 0,
+        status: 'idle',
+        ...props.initialStatus,
+    });
+    const [elapsed, setElapsed] = useState(0);
+    useEffect(() => bridge.subscribe((p) => setAwaitingApproval(p !== null)), [bridge]);
+    useEffect(() => {
+        if (status.status !== 'running')
+            return;
+        const start = Date.now() - elapsed;
+        const t = setInterval(() => setElapsed(Date.now() - start), 1000);
+        return () => clearInterval(t);
+    }, [status.status, elapsed]);
+    const append = useCallback((item) => {
+        setTranscript((prev) => {
+            const last = prev[prev.length - 1];
+            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((p) => ({ ...p, ...s })), []);
+    const updatePlan = useCallback((p) => setPlan(p), []);
+    const onMountedRef = useRef(props.onMounted);
+    useEffect(() => { onMountedRef.current = props.onMounted; }, [props.onMounted]);
+    useEffect(() => {
+        onMountedRef.current?.({ append, updateStatus, updatePlan });
+        globalThis.__klyroAppAppend = append;
+        globalThis.__klyroAppStatus = updateStatus;
+        globalThis.__klyroAppPlan = updatePlan;
+        return () => {
+            delete globalThis.__klyroAppAppend;
+            delete globalThis.__klyroAppStatus;
+            delete globalThis.__klyroAppPlan;
+        };
+    }, [append, updateStatus, updatePlan]);
+    // Single useInput owner
+    useInput((inputStr, key) => {
+        if (awaitingApproval)
+            return;
+        if (status.status === 'running' && key.ctrl && inputStr === 'c') {
+            void props.onSlash({ kind: 'quit' });
+            return;
+        }
+        if (key.return) {
+            const v = input.trim();
+            if (!v)
+                return;
+            setInput('');
+            const item = { id: nextId('text'), kind: 'text', text: v, role: 'user' };
+            setTranscript((prev) => [...prev, item]);
+            const cmd = parseSlash(v);
+            if (cmd.kind === 'prompt')
+                void props.onPrompt(cmd.text);
+            else
+                void props.onSlash(cmd);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setInput((v) => v.slice(0, -1));
+            return;
+        }
+        if (!key.ctrl && !key.meta)
+            setInput((v) => v + inputStr);
+    });
+    const width = stdout?.columns ?? 100;
+    const height = stdout?.rows ?? 30;
+    const isSmall = width < 80;
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height - 1, children: [_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: tokens.ansi.border, paddingX: 1, children: [_jsx(Text, { bold: true, children: "KLYRO v0.1.9" }), _jsxs(Text, { color: tokens.ansi.muted, children: [status.model, " \u00B7 API Usage Billing \u00B7 step ", status.step, "/", status.maxSteps, " \u00B7 ", status.status, " \u00B7 repairs ", status.repairs] }), _jsx(Text, { color: tokens.ansi.muted, children: props.cwd })] }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", paddingX: 1, paddingY: 1, children: [transcript.length === 0 ? (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { color: tokens.ansi.muted, children: "No conversation yet. Try \"fix the failing login test\"" }) })) : (transcript.map((item) => (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: item.kind === 'text' && item.role === 'user' ? (_jsxs(Text, { children: ["\u203A ", item.text] })) : item.kind === 'text' ? (_jsxs(Text, { children: ["  ", item.text] })) : item.kind === 'tool' ? (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: tokens.ansi.border, paddingX: 1, children: [_jsxs(Text, { children: [item.name, " ", item.isError ? '✗' : '✓', " ", item.latencyMs ?? 0, "ms"] }), item.result ? _jsx(Text, { color: tokens.ansi.muted, children: String(item.result).slice(0, 200) }) : null] })) : (_jsx(Text, { children: JSON.stringify(item).slice(0, 100) })) }, item.id)))), status.status === 'running' ? (_jsxs(Box, { children: [_jsx(Text, { color: tokens.ansi.info, children: "\u2726 Thinking..." }), _jsxs(Text, { color: tokens.ansi.muted, children: [" \u00B7 ", Math.round(elapsed / 1000), "s"] })] })) : null, plan.length > 0 ? _jsx(PlanView, { steps: plan, expanded: false, onToggle: () => { } }) : null] }), _jsxs(Box, { borderStyle: "single", borderColor: tokens.ansi.accent, paddingX: 1, children: [_jsx(Text, { children: "\u203A " }), _jsxs(Text, { children: [input, "\u258F"] })] }), _jsxs(Box, { justifyContent: "space-between", paddingX: 1, borderStyle: "single", borderColor: tokens.ansi.border, children: [_jsxs(Text, { color: tokens.ansi.muted, children: [status.model, " \u00B7 ", status.usageInput + status.usageOutput, " tokens \u00B7 $", (status.usageInput / 1000 * 0.003 + status.usageOutput / 1000 * 0.015).toFixed(2), " \u00B7 ", Math.round(elapsed / 1000), "s"] }), _jsx(Text, { color: tokens.ansi.muted, children: isSmall ? 'Ctrl+C interrupt' : 'Ctrl+C interrupt · Ctrl+O expand · ↑↓ scroll' })] })] }));
+}

package/dist/tui/app.inline.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Klyro TUI v2 — inline/scrollback architecture per TUI_DESIGN.md §1, §10-11
+ * Four disciplines:
+ * 1. History in <Static> — never re-rendered
+ * 2. Only live region is dynamic
+ * 3. Stream deltas batched at ~30fps
+ * 4. Exactly one useInput owner
+ */
+import React from 'react';
+import { type StatusSnapshot } from './status.js';
+import { type TranscriptItem } from './transcript.js';
+import { TuiApprovalBridge } from './approval.js';
+import type { PlanStep } from '../agent/runtime.js';
+export interface AppProps {
+    initialModel: string;
+    maxSteps: number;
+    cwd: string;
+    onPrompt: (text: string) => void | Promise<void>;
+    onSlash: (cmd: import('../cli/slash/parser.js').SlashCommand) => void | Promise<void>;
+    initialTranscript?: TranscriptItem[];
+    initialStatus?: Partial<StatusSnapshot>;
+    approvalBridge?: TuiApprovalBridge;
+    onMounted?: (hooks: {
+        append: (i: TranscriptItem) => void;
+        updateStatus: (s: Partial<StatusSnapshot>) => void;
+        updatePlan: (p: PlanStep[]) => void;
+    }) => void;
+}
+export declare function App(props: AppProps): React.JSX.Element;

package/dist/tui/app.inline.js

@@ -0,0 +1,336 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Klyro TUI v2 — inline/scrollback architecture per TUI_DESIGN.md §1, §10-11
+ * Four disciplines:
+ * 1. History in <Static> — never re-rendered
+ * 2. Only live region is dynamic
+ * 3. Stream deltas batched at ~30fps
+ * 4. Exactly one useInput owner
+ */
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { Box, Text, Static, useInput } from 'ink';
+import { Banner } from './banner.js';
+import { ActivityLine } from './activity-line.js';
+import { StatusLine } from './status.js';
+import { Transcript } from './transcript.js';
+import { TuiApprovalBridge } from './approval.js';
+import { parse as parseSlash } from '../cli/slash/parser.js';
+import { tokens, glyphs } from './tokens.js';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as os from 'node:os';
+import { spawnSync } from 'node:child_process';
+let _id = 0;
+function nextId(p) { _id++; return `${p}-${_id}`; }
+function getBranch(cwd) {
+    try {
+        const r = spawnSync('git', ['branch', '--show-current'], { cwd, encoding: 'utf-8', timeout: 800, windowsHide: true });
+        if (r.status === 0 && r.stdout)
+            return r.stdout.trim().slice(0, 40);
+    }
+    catch { }
+    return '';
+}
+function getHistoryPath() {
+    return path.join(os.homedir() || process.cwd(), '.klyro', 'history');
+}
+export function App(props) {
+    // Scrollback — committed once to <Static>, never re-rendered (discipline 1)
+    const [staticItems, setStaticItems] = useState(props.initialTranscript ?? []);
+    // Live region — only current turn's streaming text / active tool / activity
+    const [liveText, setLiveText] = useState('');
+    const [liveThinking, setLiveThinking] = useState('');
+    const [isThinkingExpanded, setThinkingExpanded] = useState(false);
+    const [activity, setActivity] = useState(null);
+    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,
+        maxSteps: props.maxSteps,
+        usageInput: 0,
+        usageOutput: 0,
+        repairs: 0,
+        status: 'idle',
+        ...props.initialStatus,
+    });
+    const [history, setHistory] = useState(() => {
+        try {
+            const raw = fs.readFileSync(getHistoryPath(), 'utf-8');
+            return raw.split('\n').filter(Boolean).slice(-200).map((l) => {
+                try {
+                    const o = JSON.parse(l);
+                    return o.cwd === props.cwd ? o.text ?? '' : '';
+                }
+                catch {
+                    return l;
+                }
+            }).filter(Boolean);
+        }
+        catch {
+            return [];
+        }
+    });
+    const histIdx = useRef(-1);
+    const lastCtrlC = useRef(0);
+    const [queued, setQueued] = useState(null);
+    const [gitBranch, setGitBranch] = useState(() => getBranch(props.cwd));
+    const batchRef = useRef('');
+    const batchTimer = useRef(null);
+    useEffect(() => {
+        const t = setInterval(() => setGitBranch(getBranch(props.cwd)), 5000);
+        return () => clearInterval(t);
+    }, [props.cwd]);
+    useEffect(() => bridge.subscribe((p) => setAwaitingApproval(p !== null)), [bridge]);
+    // Batched delta handler — 30fps (discipline 3)
+    const flushBatch = useCallback(() => {
+        if (batchRef.current) {
+            const chunk = batchRef.current;
+            batchRef.current = '';
+            setLiveText((prev) => prev + chunk);
+        }
+        if (batchTimer.current) {
+            clearTimeout(batchTimer.current);
+            batchTimer.current = null;
+        }
+    }, []);
+    const appendDeltaBatched = useCallback((text) => {
+        batchRef.current += text;
+        if (!batchTimer.current) {
+            batchTimer.current = setTimeout(flushBatch, 33); // ~30fps
+        }
+    }, [flushBatch]);
+    // Commit live region to scrollback atomically (discipline 1)
+    const commitLive = useCallback(() => {
+        flushBatch();
+        if (liveText) {
+            const item = { id: nextId('text'), kind: 'text', text: liveText, role: 'assistant' };
+            setStaticItems((prev) => [...prev, item]);
+            setLiveText('');
+        }
+        if (liveThinking) {
+            // Thinking is not committed unless expanded — spec says collapsed by default
+            setLiveThinking('');
+        }
+        setActivity(null);
+    }, [liveText, liveThinking, flushBatch]);
+    const appendStatic = useCallback((item) => {
+        // If live text is pending, commit first
+        if (liveText)
+            commitLive();
+        setStaticItems((prev) => [...prev, item]);
+    }, [liveText, commitLive]);
+    const updateStatus = useCallback((s) => setStatus((p) => ({ ...p, ...s })), []);
+    const updatePlan = useCallback((p) => { setPlan(p); setPlanExpanded(true); }, []);
+    const onMountedRef = useRef(props.onMounted);
+    useEffect(() => { onMountedRef.current = props.onMounted; }, [props.onMounted]);
+    useEffect(() => {
+        onMountedRef.current?.({ append: appendStatic, updateStatus, updatePlan });
+        globalThis.__klyroAppAppend = appendStatic;
+        globalThis.__klyroAppStatus = updateStatus;
+        globalThis.__klyroAppPlan = updatePlan;
+        return () => {
+            delete globalThis.__klyroAppAppend;
+            delete globalThis.__klyroAppStatus;
+            delete globalThis.__klyroAppPlan;
+        };
+    }, [appendStatic, updateStatus, updatePlan]);
+    // Also handle batched text via global hook for streaming
+    useEffect(() => {
+        const origAppend = appendStatic;
+        globalThis.__klyroAppendDelta = appendDeltaBatched;
+        return () => { delete globalThis.__klyroAppendDelta; };
+    }, [appendDeltaBatched, appendStatic]);
+    // Queue handling (2.4)
+    useEffect(() => {
+        if (queued && status.status !== 'running' && !awaitingApproval) {
+            const toSend = queued;
+            setQueued(null);
+            const trimmed = toSend.trim();
+            if (!trimmed)
+                return;
+            const item = { id: nextId('text'), kind: 'text', text: toSend, role: 'user' };
+            setStaticItems((prev) => [...prev, item]);
+            try {
+                fs.mkdirSync(path.dirname(getHistoryPath()), { recursive: true });
+                fs.appendFileSync(getHistoryPath(), JSON.stringify({ cwd: props.cwd, text: toSend, ts: Date.now() }) + '\n');
+            }
+            catch { }
+            const cmd = parseSlash(trimmed);
+            if (cmd.kind === 'prompt')
+                void props.onPrompt(cmd.text);
+            else
+                void props.onSlash(cmd);
+        }
+    }, [queued, status.status, awaitingApproval]);
+    // Single useInput owner (discipline 4)
+    useInput((inputStr, key) => {
+        if (awaitingApproval)
+            return; // approval modal owns input
+        if (status.status === 'running') {
+            if (key.ctrl && inputStr === 'c') {
+                void props.onSlash({ kind: 'quit' });
+                return;
+            }
+            if (key.return) {
+                const v = input.trim();
+                if (!v)
+                    return;
+                setQueued(v);
+                setInput('');
+                appendStatic({ id: nextId('text'), kind: 'text', text: `queued: ${v.slice(0, 80)}`, role: 'assistant' });
+                return;
+            }
+            if (key.ctrl && inputStr === 't') {
+                setThinkingExpanded((v) => !v);
+                return;
+            }
+            if (key.backspace || key.delete) {
+                setInput((v) => v.slice(0, -1));
+                return;
+            }
+            if (!key.ctrl && !key.meta) {
+                const norm = inputStr.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+                setInput((v) => v + norm);
+            }
+            return;
+        }
+        if (key.upArrow) {
+            if (history.length === 0)
+                return;
+            if (histIdx.current === -1)
+                histIdx.current = history.length - 1;
+            else if (histIdx.current > 0)
+                histIdx.current--;
+            setInput(history[histIdx.current] ?? '');
+            return;
+        }
+        if (key.downArrow) {
+            if (histIdx.current === -1)
+                return;
+            histIdx.current++;
+            if (histIdx.current >= history.length) {
+                histIdx.current = -1;
+                setInput('');
+            }
+            else
+                setInput(history[histIdx.current] ?? '');
+            return;
+        }
+        if (key.ctrl && inputStr === 'r') {
+            const term = input.toLowerCase();
+            for (let i = history.length - 1; i >= 0; i--)
+                if (history[i].toLowerCase().includes(term)) {
+                    setInput(history[i]);
+                    return;
+                }
+            return;
+        }
+        if (key.return) {
+            const isShift = key.shift === true;
+            if (isShift || input.endsWith('\\')) {
+                if (input.endsWith('\\'))
+                    setInput((v) => v.slice(0, -1) + '\n');
+                else
+                    setInput((v) => v + '\n');
+                return;
+            }
+            const value = input;
+            const trimmed = value.replace(/^\s+|\s+$/g, '');
+            if (!trimmed) {
+                setInput('');
+                return;
+            }
+            // @ and ! handling
+            if (trimmed.startsWith('@')) {
+                const atPath = trimmed.slice(1).trim().split(' ')[0] ?? '';
+                setInput('');
+                setStaticItems((prev) => [...prev, { id: nextId('text'), kind: 'text', text: value, role: 'user' }]);
+                void props.onPrompt(`Reference file: ${atPath}`);
+                return;
+            }
+            if (trimmed.startsWith('!')) {
+                const cmdText = trimmed.slice(1).trim();
+                setInput('');
+                setStaticItems((prev) => [...prev, { id: nextId('text'), kind: 'text', text: value, role: 'user' }]);
+                import('../tools/shell/shell-exec.js').then(async ({ shellExecTool }) => {
+                    const { builtinRegistry } = await import('../tools/registry.js');
+                    const reg = builtinRegistry();
+                    const r = await reg.execute('shell_exec', { command: cmdText }, { cwd: props.cwd, env: process.env, nonInteractive: true });
+                    const out = r.ok ? JSON.stringify(r.value).slice(0, 500) : String(r.error.message);
+                    setStaticItems((prev) => [...prev, { id: nextId('text'), kind: 'text', text: `!${cmdText}\n${out}`, role: 'assistant' }]);
+                });
+                return;
+            }
+            if (trimmed.startsWith('# ')) {
+                const note = trimmed.slice(2).trim();
+                import('node:fs/promises').then(async (fs) => {
+                    const p = path.join(props.cwd, '.klyro', 'memory', 'session-notes.md');
+                    await fs.mkdir(path.dirname(p), { recursive: true });
+                    await fs.appendFile(p, `- ${note}\n`, 'utf-8');
+                });
+                setInput('');
+                setStaticItems((prev) => [...prev, { id: nextId('text'), kind: 'text', text: `Note saved: ${note}`, role: 'assistant' }]);
+                return;
+            }
+            setInput('');
+            histIdx.current = -1;
+            setHistory((prev) => {
+                const next = [...prev, value];
+                try {
+                    fs.mkdirSync(path.dirname(getHistoryPath()), { recursive: true });
+                    fs.appendFileSync(getHistoryPath(), JSON.stringify({ cwd: props.cwd, text: value, ts: Date.now() }) + '\n');
+                }
+                catch { }
+                return next.slice(-200);
+            });
+            const userItem = { id: nextId('text'), kind: 'text', text: value, role: 'user' };
+            setStaticItems((prev) => [...prev, userItem]);
+            const cmd = parseSlash(trimmed);
+            if (cmd.kind === 'prompt')
+                void props.onPrompt(cmd.text);
+            else
+                void props.onSlash(cmd);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setInput((v) => v.slice(0, -1));
+            return;
+        }
+        if (key.ctrl && inputStr === 'c') {
+            if (input === '') {
+                const now = Date.now();
+                if (now - lastCtrlC.current < 1500) {
+                    void props.onSlash({ kind: 'quit' });
+                    return;
+                }
+                lastCtrlC.current = now;
+                setStaticItems((prev) => [...prev, { id: nextId('text'), kind: 'text', text: '(press Ctrl+C again to exit)', role: 'assistant' }]);
+                return;
+            }
+            setInput('');
+            return;
+        }
+        if (key.ctrl && inputStr === 'd') {
+            void props.onSlash({ kind: 'quit' });
+            return;
+        }
+        if (key.ctrl && inputStr === 'l') {
+            setStaticItems((prev) => [...prev, { id: nextId('text'), kind: 'text', text: '(cleared)', role: 'assistant' }]);
+            return;
+        }
+        if (key.ctrl && inputStr === 't') {
+            setThinkingExpanded((v) => !v);
+            return;
+        }
+        if (!key.ctrl && !key.meta) {
+            const norm = inputStr.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+            setInput((v) => v + norm);
+        }
+    });
+    const promptStr = `klyro › ${path.basename(props.cwd)}${gitBranch ? ` (${gitBranch})` : ''}`;
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(Banner, { version: "0.1.8", cwd: props.cwd, branch: gitBranch, model: status.model, klyroMdLoaded: false, packageManager: "pnpm", testRunner: "vitest" }), _jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsxs(Box, { borderStyle: "single", borderColor: tokens.ansi.accent, paddingX: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { color: tokens.ansi.accent, bold: true, children: "KLYRO" }), _jsxs(Text, { color: tokens.ansi.muted, children: ["  ", path.basename(props.cwd)] })] }), _jsx(Box, { children: _jsxs(Text, { color: tokens.ansi.muted, children: [status.model, "  step ", status.step, "/", status.maxSteps] }) })] }), _jsx(StatusLine, { snapshot: status })] }), _jsx(Static, { items: staticItems, children: (item) => (_jsx(Box, { flexDirection: "column", width: "100%", children: item.kind === 'text' && item.role === 'user' ? (_jsxs(Box, { children: [_jsxs(Text, { color: tokens.ansi.accent, children: [glyphs.prompt, " "] }), _jsx(Text, { children: item.text })] })) : item.kind === 'text' ? (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { children: item.text }) })) : (_jsx(Transcript, { items: [item] })) }, item.id)) }), _jsxs(Box, { flexDirection: "column", width: "100%", children: [liveThinking ? (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: tokens.ansi.muted, dimColor: true, children: "\u2234 Thinking\u2026" }), isThinkingExpanded ? _jsxs(Text, { color: tokens.ansi.muted, dimColor: true, children: [" ", liveThinking] }) : _jsx(Text, { color: tokens.ansi.muted, dimColor: true, children: " ctrl+t to show" })] })) : null, liveText ? (_jsx(Box, { paddingX: 1, flexDirection: "column", children: _jsxs(Text, { children: [liveText, "\u258D"] }) })) : null, activity ? (_jsx(ActivityLine, { verb: activity.verb, elapsedMs: Date.now() - activity.start, hint: "esc to interrupt" })) : null, queued ? (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: tokens.ansi.muted, dimColor: true, children: ["\u23F3 queued: \"", queued.slice(0, 60), "\""] }) })) : null, _jsxs(Box, { borderStyle: "round", borderColor: awaitingApproval ? tokens.ansi.warning : tokens.ansi.accent, paddingX: 1, children: [_jsxs(Text, { color: tokens.ansi.muted, dimColor: true, children: [promptStr, " "] }), _jsxs(Text, { children: [input, "\u258F"] })] }), _jsxs(Box, { paddingX: 1, justifyContent: "space-between", children: [_jsx(Text, { color: tokens.ansi.muted, dimColor: true, children: "Tab: slash completion \u00B7 Shift+Enter: newline \u00B7 Ctrl+C twice: exit" }), _jsxs(Text, { color: tokens.ansi.muted, dimColor: true, children: [status.model, " \u00B7 ctx ", Math.round(((status.usageInput + status.usageOutput) / 128000) * 100), "% \u00B7 $", ((status.usageInput / 1000) * 0.003 + (status.usageOutput / 1000) * 0.015).toFixed(2)] })] })] })] }));
+}

package/dist/tui/app.js

@@ -1,52 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Klyro TUI v2 — inline/scrollback architecture per TUI_DESIGN.md §1, §10-11
- * Four disciplines:
- * 1. History in <Static> — never re-rendered
- * 2. Only live region is dynamic
- * 3. Stream deltas batched at ~30fps
- * 4. Exactly one useInput owner
+ * Klyro Full-Screen TUI — TUI_DESIGN.md §2, §24, §38 (Phase 1-4)
+ * Full viewport, conversation, input, status bar — professional, dense, terminal-native
  */
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { Box, Text, Static, useInput } from 'ink';
-import { Banner } from './banner.js';
-import { ActivityLine } from './activity-line.js';
-import { StatusLine } from './status.js';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
 import { Transcript } from './transcript.js';
 import { TuiApprovalBridge } from './approval.js';
+import { PlanView } from './plan.js';
 import { parse as parseSlash } from '../cli/slash/parser.js';
-import { tokens, glyphs } from './tokens.js';
-import * as fs from 'node:fs';
-import * as path from 'node:path';
-import * as os from 'node:os';
-import { spawnSync } from 'node:child_process';
+import { tokens } from './tokens.js';
 let _id = 0;
 function nextId(p) { _id++; return `${p}-${_id}`; }
-function getBranch(cwd) {
-    try {
-        const r = spawnSync('git', ['branch', '--show-current'], { cwd, encoding: 'utf-8', timeout: 800, windowsHide: true });
-        if (r.status === 0 && r.stdout)
-            return r.stdout.trim().slice(0, 40);
-    }
-    catch { }
-    return '';
-}
-function getHistoryPath() {
-    return path.join(os.homedir() || process.cwd(), '.klyro', 'history');
-}
 export function App(props) {
-    // Scrollback — committed once to <Static>, never re-rendered (discipline 1)
-    const [staticItems, setStaticItems] = useState(props.initialTranscript ?? []);
-    // Live region — only current turn's streaming text / active tool / activity
-    const [liveText, setLiveText] = useState('');
-    const [liveThinking, setLiveThinking] = useState('');
-    const [isThinkingExpanded, setThinkingExpanded] = useState(false);
-    const [activity, setActivity] = useState(null);
+    const { stdout } = useStdout();
+    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,
@@ -57,79 +29,46 @@ export function App(props) {
         status: 'idle',
         ...props.initialStatus,
     });
-    const [history, setHistory] = useState(() => {
-        try {
-            const raw = fs.readFileSync(getHistoryPath(), 'utf-8');
-            return raw.split('\n').filter(Boolean).slice(-200).map((l) => {
-                try {
-                    const o = JSON.parse(l);
-                    return o.cwd === props.cwd ? o.text ?? '' : '';
-                }
-                catch {
-                    return l;
-                }
-            }).filter(Boolean);
-        }
-        catch {
-            return [];
-        }
-    });
-    const histIdx = useRef(-1);
-    const lastCtrlC = useRef(0);
+    const [elapsed, setElapsed] = useState(0);
     const [queued, setQueued] = useState(null);
-    const [gitBranch, setGitBranch] = useState(() => getBranch(props.cwd));
-    const batchRef = useRef('');
-    const batchTimer = useRef(null);
-    useEffect(() => {
-        const t = setInterval(() => setGitBranch(getBranch(props.cwd)), 5000);
-        return () => clearInterval(t);
-    }, [props.cwd]);
     useEffect(() => bridge.subscribe((p) => setAwaitingApproval(p !== null)), [bridge]);
-    // Batched delta handler — 30fps (discipline 3)
-    const flushBatch = useCallback(() => {
-        if (batchRef.current) {
-            const chunk = batchRef.current;
-            batchRef.current = '';
-            setLiveText((prev) => prev + chunk);
-        }
-        if (batchTimer.current) {
-            clearTimeout(batchTimer.current);
-            batchTimer.current = null;
+    // 2.4 — send queued when idle
+    useEffect(() => {
+        if (queued && status.status !== 'running' && !awaitingApproval) {
+            const toSend = queued;
+            setQueued(null);
+            const item = { id: nextId('text'), kind: 'text', text: toSend, role: 'user' };
+            setTranscript((prev) => [...prev, item]);
+            const cmd = parseSlash(toSend.trim());
+            if (cmd.kind === 'prompt')
+                void props.onPrompt(cmd.text);
+            else
+                void props.onSlash(cmd);
         }
+    }, [queued, status.status, awaitingApproval]);
+    useEffect(() => {
+        if (status.status !== 'running')
+            return;
+        const start = Date.now() - elapsed;
+        const t = setInterval(() => setElapsed(Date.now() - start), 1000);
+        return () => clearInterval(t);
+    }, [status.status, elapsed]);
+    const append = useCallback((item) => {
+        setTranscript((prev) => {
+            const last = prev[prev.length - 1];
+            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 appendDeltaBatched = useCallback((text) => {
-        batchRef.current += text;
-        if (!batchTimer.current) {
-            batchTimer.current = setTimeout(flushBatch, 33); // ~30fps
-        }
-    }, [flushBatch]);
-    // Commit live region to scrollback atomically (discipline 1)
-    const commitLive = useCallback(() => {
-        flushBatch();
-        if (liveText) {
-            const item = { id: nextId('text'), kind: 'text', text: liveText, role: 'assistant' };
-            setStaticItems((prev) => [...prev, item]);
-            setLiveText('');
-        }
-        if (liveThinking) {
-            // Thinking is not committed unless expanded — spec says collapsed by default
-            setLiveThinking('');
-        }
-        setActivity(null);
-    }, [liveText, liveThinking, flushBatch]);
-    const appendStatic = useCallback((item) => {
-        // If live text is pending, commit first
-        if (liveText)
-            commitLive();
-        setStaticItems((prev) => [...prev, item]);
-    }, [liveText, commitLive]);
     const updateStatus = useCallback((s) => setStatus((p) => ({ ...p, ...s })), []);
-    const updatePlan = useCallback((p) => { setPlan(p); setPlanExpanded(true); }, []);
+    const updatePlan = useCallback((p) => setPlan(p), []);
     const onMountedRef = useRef(props.onMounted);
     useEffect(() => { onMountedRef.current = props.onMounted; }, [props.onMounted]);
     useEffect(() => {
-        onMountedRef.current?.({ append: appendStatic, updateStatus, updatePlan });
-        globalThis.__klyroAppAppend = appendStatic;
+        onMountedRef.current?.({ append, updateStatus, updatePlan });
+        globalThis.__klyroAppAppend = append;
         globalThis.__klyroAppStatus = updateStatus;
         globalThis.__klyroAppPlan = updatePlan;
         return () => {
@@ -137,39 +76,11 @@ export function App(props) {
             delete globalThis.__klyroAppStatus;
             delete globalThis.__klyroAppPlan;
         };
-    }, [appendStatic, updateStatus, updatePlan]);
-    // Also handle batched text via global hook for streaming
-    useEffect(() => {
-        const origAppend = appendStatic;
-        globalThis.__klyroAppendDelta = appendDeltaBatched;
-        return () => { delete globalThis.__klyroAppendDelta; };
-    }, [appendDeltaBatched, appendStatic]);
-    // Queue handling (2.4)
-    useEffect(() => {
-        if (queued && status.status !== 'running' && !awaitingApproval) {
-            const toSend = queued;
-            setQueued(null);
-            const trimmed = toSend.trim();
-            if (!trimmed)
-                return;
-            const item = { id: nextId('text'), kind: 'text', text: toSend, role: 'user' };
-            setStaticItems((prev) => [...prev, item]);
-            try {
-                fs.mkdirSync(path.dirname(getHistoryPath()), { recursive: true });
-                fs.appendFileSync(getHistoryPath(), JSON.stringify({ cwd: props.cwd, text: toSend, ts: Date.now() }) + '\n');
-            }
-            catch { }
-            const cmd = parseSlash(trimmed);
-            if (cmd.kind === 'prompt')
-                void props.onPrompt(cmd.text);
-            else
-                void props.onSlash(cmd);
-        }
-    }, [queued, status.status, awaitingApproval]);
-    // Single useInput owner (discipline 4)
+    }, [append, updateStatus, updatePlan]);
+    // Single useInput owner — handles queued when running (2.4)
     useInput((inputStr, key) => {
         if (awaitingApproval)
-            return; // approval modal owns input
+            return;
         if (status.status === 'running') {
             if (key.ctrl && inputStr === 'c') {
                 void props.onSlash({ kind: 'quit' });
@@ -181,107 +92,27 @@ export function App(props) {
                     return;
                 setQueued(v);
                 setInput('');
-                // Show queued indicator in live region
+                setTranscript((prev) => [...prev, { id: nextId('text'), kind: 'text', text: `queued: ${v.slice(0, 80)}`, role: 'assistant' }]);
                 return;
             }
-            if (key.ctrl && inputStr === 't') {
-                setThinkingExpanded((v) => !v);
+            if (key.backspace || key.delete) {
+                setInput((v) => v.slice(0, -1));
                 return;
             }
-            return;
-        }
-        if (key.upArrow) {
-            if (history.length === 0)
-                return;
-            if (histIdx.current === -1)
-                histIdx.current = history.length - 1;
-            else if (histIdx.current > 0)
-                histIdx.current--;
-            setInput(history[histIdx.current] ?? '');
-            return;
-        }
-        if (key.downArrow) {
-            if (histIdx.current === -1)
-                return;
-            histIdx.current++;
-            if (histIdx.current >= history.length) {
-                histIdx.current = -1;
-                setInput('');
+            if (!key.ctrl && !key.meta) {
+                const norm = inputStr.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+                setInput((v) => v + norm);
             }
-            else
-                setInput(history[histIdx.current] ?? '');
-            return;
-        }
-        if (key.ctrl && inputStr === 'r') {
-            const term = input.toLowerCase();
-            for (let i = history.length - 1; i >= 0; i--)
-                if (history[i].toLowerCase().includes(term)) {
-                    setInput(history[i]);
-                    return;
-                }
             return;
         }
         if (key.return) {
-            const isShift = key.shift === true;
-            if (isShift || input.endsWith('\\')) {
-                if (input.endsWith('\\'))
-                    setInput((v) => v.slice(0, -1) + '\n');
-                else
-                    setInput((v) => v + '\n');
-                return;
-            }
-            const value = input;
-            const trimmed = value.replace(/^\s+|\s+$/g, '');
-            if (!trimmed) {
-                setInput('');
-                return;
-            }
-            // @ and ! handling
-            if (trimmed.startsWith('@')) {
-                const atPath = trimmed.slice(1).trim().split(' ')[0] ?? '';
-                setInput('');
-                setStaticItems((prev) => [...prev, { id: nextId('text'), kind: 'text', text: value, role: 'user' }]);
-                void props.onPrompt(`Reference file: ${atPath}`);
-                return;
-            }
-            if (trimmed.startsWith('!')) {
-                const cmdText = trimmed.slice(1).trim();
-                setInput('');
-                setStaticItems((prev) => [...prev, { id: nextId('text'), kind: 'text', text: value, role: 'user' }]);
-                import('../tools/shell/shell-exec.js').then(async ({ shellExecTool }) => {
-                    const { builtinRegistry } = await import('../tools/registry.js');
-                    const reg = builtinRegistry();
-                    const r = await reg.execute('shell_exec', { command: cmdText }, { cwd: props.cwd, env: process.env, nonInteractive: true });
-                    const out = r.ok ? JSON.stringify(r.value).slice(0, 500) : String(r.error.message);
-                    setStaticItems((prev) => [...prev, { id: nextId('text'), kind: 'text', text: `!${cmdText}\n${out}`, role: 'assistant' }]);
-                });
-                return;
-            }
-            if (trimmed.startsWith('# ')) {
-                const note = trimmed.slice(2).trim();
-                import('node:fs/promises').then(async (fs) => {
-                    const p = path.join(props.cwd, '.klyro', 'memory', 'session-notes.md');
-                    await fs.mkdir(path.dirname(p), { recursive: true });
-                    await fs.appendFile(p, `- ${note}\n`, 'utf-8');
-                });
-                setInput('');
-                setStaticItems((prev) => [...prev, { id: nextId('text'), kind: 'text', text: `Note saved: ${note}`, role: 'assistant' }]);
+            const v = input.trim();
+            if (!v)
                 return;
-            }
             setInput('');
-            histIdx.current = -1;
-            setHistory((prev) => {
-                const next = [...prev, value];
-                try {
-                    fs.mkdirSync(path.dirname(getHistoryPath()), { recursive: true });
-                    fs.appendFileSync(getHistoryPath(), JSON.stringify({ cwd: props.cwd, text: value, ts: Date.now() }) + '\n');
-                }
-                catch { }
-                return next.slice(-200);
-            });
-            const userItem = { id: nextId('text'), kind: 'text', text: value, role: 'user' };
-            setStaticItems((prev) => [...prev, userItem]);
-            const cmd = parseSlash(trimmed);
+            const item = { id: nextId('text'), kind: 'text', text: v, role: 'user' };
+            setTranscript((prev) => [...prev, item]);
+            const cmd = parseSlash(v);
             if (cmd.kind === 'prompt')
                 void props.onPrompt(cmd.text);
             else
@@ -292,37 +123,11 @@ export function App(props) {
             setInput((v) => v.slice(0, -1));
             return;
         }
-        if (key.ctrl && inputStr === 'c') {
-            if (input === '') {
-                const now = Date.now();
-                if (now - lastCtrlC.current < 1500) {
-                    void props.onSlash({ kind: 'quit' });
-                    return;
-                }
-                lastCtrlC.current = now;
-                setStaticItems((prev) => [...prev, { id: nextId('text'), kind: 'text', text: '(press Ctrl+C again to exit)', role: 'assistant' }]);
-                return;
-            }
-            setInput('');
-            return;
-        }
-        if (key.ctrl && inputStr === 'd') {
-            void props.onSlash({ kind: 'quit' });
-            return;
-        }
-        if (key.ctrl && inputStr === 'l') {
-            setStaticItems((prev) => [...prev, { id: nextId('text'), kind: 'text', text: '(cleared)', role: 'assistant' }]);
-            return;
-        }
-        if (key.ctrl && inputStr === 't') {
-            setThinkingExpanded((v) => !v);
-            return;
-        }
-        if (!key.ctrl && !key.meta) {
-            const norm = inputStr.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
-            setInput((v) => v + norm);
-        }
+        if (!key.ctrl && !key.meta)
+            setInput((v) => v + inputStr);
     });
-    const promptStr = `klyro › ${path.basename(props.cwd)}${gitBranch ? ` (${gitBranch})` : ''}`;
-    return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(Banner, { version: "0.1.8", cwd: props.cwd, branch: gitBranch, model: status.model, klyroMdLoaded: false, packageManager: "pnpm", testRunner: "vitest" }), _jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsxs(Box, { borderStyle: "single", borderColor: tokens.ansi.accent, paddingX: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { color: tokens.ansi.accent, bold: true, children: "KLYRO" }), _jsxs(Text, { color: tokens.ansi.muted, children: ["  ", path.basename(props.cwd)] })] }), _jsx(Box, { children: _jsxs(Text, { color: tokens.ansi.muted, children: [status.model, "  step ", status.step, "/", status.maxSteps] }) })] }), _jsx(StatusLine, { snapshot: status })] }), _jsx(Static, { items: staticItems, children: (item) => (_jsx(Box, { flexDirection: "column", width: "100%", children: item.kind === 'text' && item.role === 'user' ? (_jsxs(Box, { children: [_jsxs(Text, { color: tokens.ansi.accent, children: [glyphs.prompt, " "] }), _jsx(Text, { children: item.text })] })) : item.kind === 'text' ? (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { children: item.text }) })) : (_jsx(Transcript, { items: [item] })) }, item.id)) }), _jsxs(Box, { flexDirection: "column", width: "100%", children: [liveThinking ? (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: tokens.ansi.muted, dimColor: true, children: "\u2234 Thinking\u2026" }), isThinkingExpanded ? _jsxs(Text, { color: tokens.ansi.muted, dimColor: true, children: [" ", liveThinking] }) : _jsx(Text, { color: tokens.ansi.muted, dimColor: true, children: " ctrl+t to show" })] })) : null, liveText ? (_jsx(Box, { paddingX: 1, flexDirection: "column", children: _jsxs(Text, { children: [liveText, "\u258D"] }) })) : null, activity ? (_jsx(ActivityLine, { verb: activity.verb, elapsedMs: Date.now() - activity.start, hint: "esc to interrupt" })) : null, queued ? (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: tokens.ansi.muted, dimColor: true, children: ["\u23F3 queued: \"", queued.slice(0, 60), "\""] }) })) : null, _jsxs(Box, { borderStyle: "round", borderColor: awaitingApproval ? tokens.ansi.warning : tokens.ansi.accent, paddingX: 1, children: [_jsxs(Text, { color: tokens.ansi.muted, dimColor: true, children: [promptStr, " "] }), _jsxs(Text, { children: [input, "\u258F"] })] }), _jsxs(Box, { paddingX: 1, justifyContent: "space-between", children: [_jsx(Text, { color: tokens.ansi.muted, dimColor: true, children: "Tab: slash completion \u00B7 Shift+Enter: newline \u00B7 Ctrl+C twice: exit" }), _jsxs(Text, { color: tokens.ansi.muted, dimColor: true, children: [status.model, " \u00B7 ctx ", Math.round(((status.usageInput + status.usageOutput) / 128000) * 100), "% \u00B7 $", ((status.usageInput / 1000) * 0.003 + (status.usageOutput / 1000) * 0.015).toFixed(2)] })] })] })] }));
+    const width = stdout?.columns ?? 100;
+    const height = stdout?.rows ?? 30;
+    const isSmall = width < 80;
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height - 1, children: [_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: tokens.ansi.border, paddingX: 1, children: [_jsx(Text, { bold: true, children: "KLYRO v0.1.10" }), _jsxs(Text, { color: tokens.ansi.muted, children: [status.model, " \u00B7 API Usage Billing \u00B7 step ", status.step, "/", status.maxSteps, " \u00B7 ", status.status, " \u00B7 repairs ", status.repairs] }), _jsx(Text, { color: tokens.ansi.muted, children: props.cwd })] }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", paddingX: 1, paddingY: 1, children: [transcript.length === 0 ? (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { color: tokens.ansi.muted, children: "No conversation yet. Try \"fix the failing login test\"" }) })) : (transcript.map((item) => (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: item.kind === 'text' && item.role === 'user' ? (_jsxs(Text, { children: ["\u203A ", item.text] })) : item.kind === 'text' ? (_jsxs(Text, { children: ["  ", item.text] })) : item.kind === 'tool' ? (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: tokens.ansi.border, paddingX: 1, children: [_jsxs(Text, { children: [item.name, " ", item.isError ? '✗' : '✓', " ", item.latencyMs ?? 0, "ms"] }), item.result ? _jsx(Text, { color: tokens.ansi.muted, children: String(item.result).slice(0, 200) }) : null] })) : item.kind === 'diff' ? (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: tokens.ansi.border, paddingX: 1, children: [_jsx(Text, { bold: true, children: item.summary ?? 'Diff' }), item.hunks.map((h, i) => (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: tokens.ansi.info, children: h.path }), h.lines.map((l, j) => (_jsxs(Text, { color: l.kind === 'add' ? tokens.ansi.success : l.kind === 'remove' ? tokens.ansi.error : tokens.ansi.muted, children: [l.kind === 'add' ? '+ ' : l.kind === 'remove' ? '- ' : '  ', l.text] }, j)))] }, i)))] })) : (_jsx(Transcript, { items: [item] })) }, item.id)))), status.status === 'running' ? (_jsxs(Box, { children: [_jsx(Text, { color: tokens.ansi.info, children: "\u2726 Thinking..." }), _jsxs(Text, { color: tokens.ansi.muted, children: [" \u00B7 ", Math.round(elapsed / 1000), "s"] })] })) : null, plan.length > 0 ? _jsx(PlanView, { steps: plan, expanded: false, onToggle: () => { } }) : null] }), _jsxs(Box, { borderStyle: "single", borderColor: tokens.ansi.accent, paddingX: 1, children: [_jsx(Text, { children: "\u203A " }), _jsxs(Text, { children: [input, "\u258F"] })] }), _jsxs(Box, { justifyContent: "space-between", paddingX: 1, borderStyle: "single", borderColor: tokens.ansi.border, children: [_jsxs(Text, { color: tokens.ansi.muted, children: [status.model, " \u00B7 ", status.usageInput + status.usageOutput, " tokens \u00B7 $", (status.usageInput / 1000 * 0.003 + status.usageOutput / 1000 * 0.015).toFixed(2), " \u00B7 ", Math.round(elapsed / 1000), "s"] }), _jsx(Text, { color: tokens.ansi.muted, children: isSmall ? 'Ctrl+C interrupt' : 'Ctrl+C interrupt · Ctrl+O expand · ↑↓ scroll' })] })] }));
 }

package/dist/tui/app.test.js

@@ -57,14 +57,16 @@ describe('App', () => {
         const call = onSlash.mock.calls[0]?.[0];
         expect(call?.kind).toBe('help');
     });
-    it('ignores Enter while status is running', async () => {
+    it('queues Enter while status is running (2.4)', async () => {
         const onPrompt = vi.fn(async () => { });
-        const { stdin } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: onPrompt, onSlash: async () => { }, initialStatus: { status: 'running' } }));
+        const { stdin, lastFrame } = 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');
         await new Promise((r) => setTimeout(r, 50));
-        expect(onPrompt).not.toHaveBeenCalled();
+        // Per TUI_DESIGN.md §5.2 queued message while running, not immediate
+        expect(lastFrame()).toMatch(/queued|hello/);
+        expect(onPrompt).not.toHaveBeenCalled(); // not yet, queued
     });
     it('routes /quit to onSlash as a quit command', async () => {
         const onSlash = vi.fn(async () => { });

package/dist/tui/components/Header.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare function Header(props: {
+    version: string;
+    model: string;
+    provider?: string;
+    cwd: string;
+}): React.JSX.Element;

package/dist/tui/components/Header.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function Header(props) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: "KLYRO" }), _jsxs(Text, { color: "gray", children: [" v", props.version] })] }), _jsxs(Box, { children: [_jsx(Text, { color: "gray", children: props.model }), props.provider ? _jsxs(Text, { color: "gray", children: [" \u00B7 ", props.provider] }) : null, _jsxs(Text, { color: "gray", children: [" \u00B7 ", props.cwd] })] })] }));
+}

package/dist/tui/state.d.ts

@@ -0,0 +1,66 @@
+/**
+ * TUI State Store — TUI_DESIGN.md §27
+ * Centralized state for the full-screen TUI.
+ * Agent Runtime -> Event Stream -> TUI State Store -> Terminal Renderer
+ */
+import type { TranscriptItem } from './transcript.js';
+import type { PlanStep } from '../agent/runtime.js';
+export interface TuiState {
+    session: {
+        id: string;
+        cwd: string;
+        startedAt: number;
+    };
+    agent: {
+        status: 'idle' | 'running' | 'thinking' | 'verifying' | 'repairing';
+        currentTask?: string;
+        elapsedMs: number;
+    };
+    conversation: TranscriptItem[];
+    tools: Array<{
+        id: string;
+        name: string;
+        status: 'pending' | 'running' | 'success' | 'failed';
+        input: unknown;
+        output?: unknown;
+        durationMs?: number;
+    }>;
+    plan: PlanStep[];
+    files: {
+        changed: Array<{
+            path: string;
+            status: 'M' | 'A' | 'D';
+            additions?: number;
+            deletions?: number;
+        }>;
+    };
+    verification: {
+        checks: Array<{
+            name: string;
+            status: 'pending' | 'success' | 'failed';
+            durationMs?: number;
+            message?: string;
+        }>;
+    };
+    usage: {
+        inputTokens: number;
+        outputTokens: number;
+        cost: number;
+    };
+    permissions: {
+        pending: Array<{
+            toolName: string;
+            reason?: string;
+        }>;
+    };
+    input: {
+        value: string;
+        cursor: number;
+        suggestions: string[];
+    };
+    ui: {
+        showThinking: boolean;
+        expandedTools: Set<string>;
+    };
+}
+export declare function createInitialState(cwd: string, model: string): TuiState;

package/dist/tui/state.js

@@ -0,0 +1,20 @@
+/**
+ * TUI State Store — TUI_DESIGN.md §27
+ * Centralized state for the full-screen TUI.
+ * Agent Runtime -> Event Stream -> TUI State Store -> Terminal Renderer
+ */
+export function createInitialState(cwd, model) {
+    return {
+        session: { id: `sess-${Date.now().toString(36)}`, cwd, startedAt: Date.now() },
+        agent: { status: 'idle', elapsedMs: 0 },
+        conversation: [],
+        tools: [],
+        plan: [],
+        files: { changed: [] },
+        verification: { checks: [] },
+        usage: { inputTokens: 0, outputTokens: 0, cost: 0 },
+        permissions: { pending: [] },
+        input: { value: '', cursor: 0, suggestions: [] },
+        ui: { showThinking: false, expandedTools: new Set() },
+    };
+}

package/package.json

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