klyro 0.1.8 → 0.1.10

package/dist/tui/app.js

@@ -1,77 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Ink app root — status line + scrollable transcript + input box.
- * 1.4: history per project, multiline, Ctrl+C double, slash registry, Windows handling
+ * 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, useInput } from 'ink';
-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 { Header } from './header.js';
-import { ApprovalModal, TuiApprovalBridge } from './approval.js';
+import { TuiApprovalBridge } from './approval.js';
 import { PlanView } from './plan.js';
 import { parse as parseSlash } from '../cli/slash/parser.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 _itemCounter = 0;
-function nextId(prefix) {
-    _itemCounter += 1;
-    return `${prefix}-${_itemCounter}`;
-}
-function getGitBranch(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 { /* ignore */ }
-    return '';
-}
-function getHistoryPath() {
-    const home = os.homedir() || process.cwd();
-    return path.join(home, '.klyro', 'history');
-}
-function loadHistory(cwd) {
-    try {
-        const raw = fs.readFileSync(getHistoryPath(), 'utf-8');
-        const lines = raw.split('\n').filter(Boolean);
-        const out = [];
-        for (const line of lines) {
-            try {
-                const obj = JSON.parse(line);
-                if (obj.cwd === cwd && typeof obj.text === 'string')
-                    out.push(obj.text);
-            }
-            catch {
-                // legacy plain text per line
-                if (line.trim())
-                    out.push(line.trim());
-            }
-        }
-        return out.slice(-200);
-    }
-    catch {
-        return [];
-    }
-}
-function appendHistory(cwd, text) {
-    try {
-        const p = getHistoryPath();
-        fs.mkdirSync(path.dirname(p), { recursive: true });
-        const entry = JSON.stringify({ cwd, text, ts: Date.now() });
-        fs.appendFileSync(p, entry + '\n', 'utf-8');
-    }
-    catch { /* ignore */ }
-}
+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 [planExpanded, setPlanExpanded] = useState(false);
     const [status, setStatus] = useState({
         model: props.initialModel,
         step: 0,
@@ -82,38 +29,41 @@ export function App(props) {
         status: 'idle',
         ...props.initialStatus,
     });
-    const [history, setHistory] = useState(() => loadHistory(props.cwd));
-    const historyIndexRef = useRef(-1);
-    const lastCtrlCRef = useRef(0);
-    const [gitBranch, setGitBranch] = useState(() => getGitBranch(props.cwd));
+    const [elapsed, setElapsed] = useState(0);
     const [queued, setQueued] = useState(null);
+    useEffect(() => bridge.subscribe((p) => setAwaitingApproval(p !== null)), [bridge]);
+    // 2.4 — send queued when idle
     useEffect(() => {
-        const t = setInterval(() => setGitBranch(getGitBranch(props.cwd)), 5000);
-        return () => clearInterval(t);
-    }, [props.cwd]);
+        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(() => {
-        return bridge.subscribe((p) => setAwaitingApproval(p !== null));
-    }, [bridge]);
+        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) {
+            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);
-    }, []);
+    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(() => {
@@ -127,37 +77,7 @@ export function App(props) {
             delete globalThis.__klyroAppPlan;
         };
     }, [append, updateStatus, updatePlan]);
-    // Handle Windows raw-mode fallback warning
-    const [rawModeWarning, setRawModeWarning] = useState(null);
-    useEffect(() => {
-        try {
-            const stdin = process.stdin;
-            if (stdin.isTTY && typeof stdin.setRawMode !== 'function') {
-                setRawModeWarning('Raw mode not available (mintty) — input may be limited');
-            }
-        }
-        catch { /* ignore */ }
-    }, []);
-    // Queue next message if typed during stream (2.4)
-    useEffect(() => {
-        if (queued && status.status !== 'running' && !awaitingApproval) {
-            const toSend = queued;
-            setQueued(null);
-            const trimmed = toSend.trim();
-            if (!trimmed)
-                return;
-            append({ id: nextId('text'), kind: 'text', text: toSend, role: 'user' });
-            const cmd = parseSlash(trimmed);
-            if (cmd.kind === 'prompt')
-                void props.onPrompt(cmd.text);
-            else if (cmd.kind === 'plan') {
-                if (plan.length > 0)
-                    setPlanExpanded((v) => !v);
-            }
-            else
-                void props.onSlash(cmd);
-        }
-    }, [queued, status.status, awaitingApproval, plan.length, append]);
+    // Single useInput owner — handles queued when running (2.4)
     useInput((inputStr, key) => {
         if (awaitingApproval)
             return;
@@ -167,171 +87,47 @@ export function App(props) {
                 return;
             }
             if (key.return) {
-                const value = input.trim();
-                if (!value)
+                const v = input.trim();
+                if (!v)
                     return;
-                setQueued(value);
+                setQueued(v);
                 setInput('');
-                append({ id: nextId('text'), kind: 'text', text: `queued: ${value.slice(0, 80)}`, role: 'assistant' });
+                setTranscript((prev) => [...prev, { id: nextId('text'), kind: 'text', text: `queued: ${v.slice(0, 80)}`, role: 'assistant' }]);
                 return;
             }
-            if (!key.ctrl && !key.meta) {
-                // Show typing indicator but don't change input (queued mode)
-                return;
-            }
-            return;
-        }
-        // History navigation
-        if (key.upArrow) {
-            if (history.length === 0)
+            if (key.backspace || key.delete) {
+                setInput((v) => v.slice(0, -1));
                 return;
-            if (historyIndexRef.current === -1)
-                historyIndexRef.current = history.length - 1;
-            else if (historyIndexRef.current > 0)
-                historyIndexRef.current--;
-            setInput(history[historyIndexRef.current] ?? '');
-            return;
-        }
-        if (key.downArrow) {
-            if (historyIndexRef.current === -1)
-                return;
-            historyIndexRef.current++;
-            if (historyIndexRef.current >= history.length) {
-                historyIndexRef.current = -1;
-                setInput('');
             }
-            else {
-                setInput(history[historyIndexRef.current] ?? '');
-            }
-            return;
-        }
-        // Ctrl+R search — simple: cycle history
-        if (key.ctrl && inputStr === 'r') {
-            if (history.length === 0)
-                return;
-            const term = input.toLowerCase();
-            for (let i = history.length - 1; i >= 0; i--) {
-                if (history[i].toLowerCase().includes(term)) {
-                    setInput(history[i]);
-                    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.return) {
-            // Multiline: trailing \ or Shift+Enter (where supported, key.shift is true)
-            // Ink's key object has `shift` for Shift+Enter on some terminals
-            const isShiftEnter = key.shift === true;
-            if (isShiftEnter || input.endsWith('\\')) {
-                // Replace trailing \ with newline, or just add newline for Shift+Enter
-                if (input.endsWith('\\'))
-                    setInput((v) => v.slice(0, -1) + '\n');
-                else
-                    setInput((v) => v + '\n');
-                return;
-            }
-            const value = input;
-            // Preserve newlines for bracketed paste — don't trim inner newlines, only outer
-            const trimmedOuter = value.replace(/^\s+|\s+$/g, '');
-            if (!trimmedOuter) {
-                setInput('');
-                return;
-            }
-            // 4.4 — handle @path and !cmd and # note without model call
-            if (trimmedOuter.startsWith('@')) {
-                const atPath = trimmedOuter.slice(1).trim().split(' ')[0] ?? '';
-                setInput('');
-                append({ id: nextId('text'), kind: 'text', text: `Attached @${atPath} (fuzzy completion stub)`, role: 'assistant' });
-                // Still send to model as context, but mark as @ reference
-                const atText = `Reference file: ${atPath}`;
-                void props.onPrompt(atText);
-                return;
-            }
-            if (trimmedOuter.startsWith('!')) {
-                const cmdText = trimmedOuter.slice(1).trim();
-                setInput('');
-                // Run shell without model call, attach output
-                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);
-                    append({ id: nextId('text'), kind: 'text', text: `!${cmdText}\n${out}`, role: 'assistant' });
-                });
+            const v = input.trim();
+            if (!v)
                 return;
-            }
-            if (trimmedOuter.startsWith('# ')) {
-                const note = trimmedOuter.slice(2).trim();
-                // Append to .klyro/memory/session-notes.md
-                import('node:fs/promises').then(async (fs) => {
-                    const p = (await import('node:path')).join(props.cwd, '.klyro', 'memory', 'session-notes.md');
-                    await fs.mkdir((await import('node:path')).dirname(p), { recursive: true });
-                    await fs.appendFile(p, `- ${note}\n`, 'utf-8');
-                });
-                setInput('');
-                append({ id: nextId('text'), kind: 'text', text: `Note saved: ${note}`, role: 'assistant' });
-                return;
-            }
-            // Check for Ctrl+C double at empty prompt handled below, but here handle submit
             setInput('');
-            historyIndexRef.current = -1;
-            // Save to history
-            setHistory((prev) => {
-                const next = [...prev, value];
-                appendHistory(props.cwd, value);
-                return next.slice(-200);
-            });
-            append({ id: nextId('text'), kind: 'text', text: value, role: 'user' });
-            const cmd = parseSlash(trimmedOuter);
-            if (cmd.kind === 'prompt') {
+            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 if (cmd.kind === 'plan') {
-                if (plan.length > 0)
-                    setPlanExpanded((v) => !v);
-            }
-            else {
+            else
                 void props.onSlash(cmd);
-            }
             return;
         }
         if (key.backspace || key.delete) {
             setInput((v) => v.slice(0, -1));
             return;
         }
-        // Ctrl+C double at empty prompt exits
-        if (key.ctrl && inputStr === 'c') {
-            if (input === '') {
-                const now = Date.now();
-                if (now - lastCtrlCRef.current < 1500) {
-                    void props.onSlash({ kind: 'quit' });
-                    return;
-                }
-                lastCtrlCRef.current = now;
-                append({ id: nextId('text'), kind: 'text', text: '(press Ctrl+C again to exit)', role: 'assistant' });
-                return;
-            }
-            // Single Ctrl+C cancels input
-            setInput('');
-            return;
-        }
-        if (key.ctrl && inputStr === 'd') {
-            void props.onSlash({ kind: 'quit' });
-            return;
-        }
-        if (key.ctrl && inputStr === 'l') {
-            // Clear — keep session but clear transcript marker
-            append({ id: nextId('text'), kind: 'text', text: '(cleared)', role: 'assistant' });
-            return;
-        }
-        // Handle bracketed paste: inputStr may contain \r\n or multiple lines
-        if (!key.ctrl && !key.meta) {
-            // Preserve all characters including newlines from paste
-            // Normalize \r\n to \n
-            const normalized = inputStr.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
-            setInput((v) => v + normalized);
-        }
+        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%", height: "100%", children: [_jsx(Header, { cwd: props.cwd, model: status.model, step: status.step, maxSteps: status.maxSteps }), rawModeWarning ? _jsx(Box, { children: _jsx(Text, { color: "yellow", children: rawModeWarning }) }) : null, _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 ? '! ' : `${promptStr} ` }), _jsx(Text, { children: awaitingApproval ? '(awaiting approval — see above)' : input }), status.status === 'running' ? _jsx(Text, { color: "cyan", children: " \u258D" }) : _jsx(Text, { children: "\u258D" })] }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Tab: slash completion \u00B7 Shift+Enter: newline \u00B7 Ctrl+C twice: exit \u00B7 Ctrl+R: history" }) })] }));
+    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.legacy.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Ink app root — status line + scrollable transcript + input box.
+ * 1.4: history per project, multiline, Ctrl+C double, slash registry, Windows handling
+ */
+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;