klyro 0.1.38 → 0.1.40

package/dist/tui/app.d.ts

@@ -1,6 +1,6 @@
 /**
- * Klyro TUI — design.md Claude Code-like — White & Orange #FF6B1A — 3 columns
- * Top bar + Sidebar 28 + Chat flex + Inspector 36 + Prompt — per plan 1-10
+ * Klyro TUI — opencode-clean — no clumsy words, correct wrap, markdown, scroll
+ * Header 3 rows, guide │ at col2, ● Klyro accent, prose wrapped at word boundaries
  */
 import React from 'react';
 import type { StatusSnapshot } from './status.js';

package/dist/tui/app.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
- * Klyro TUI — design.md Claude Code-like — White & Orange #FF6B1A — 3 columns
- * Top bar + Sidebar 28 + Chat flex + Inspector 36 + Prompt — per plan 1-10
+ * Klyro TUI — opencode-clean — no clumsy words, correct wrap, markdown, scroll
+ * Header 3 rows, guide │ at col2, ● Klyro accent, prose wrapped at word boundaries
  */
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { Box, Text, useInput, useStdout } from 'ink';
@@ -10,62 +10,33 @@ import { parse as parseSlash } from '../cli/slash/parser.js';
 import { tokens, g } from './tokens.js';
 let _id = 0;
 function nextId(p) { _id++; return `${p}-${_id}`; }
-// Top bar §3
-function TopBar({ width, cwd, model }) {
+function Header({ cwd, model, version, width }) {
     const branch = (() => { try {
         const { execSync } = require('node:child_process');
         return execSync('git rev-parse --abbrev-ref HEAD', { cwd, stdio: ['ignore', 'pipe', 'ignore'] }).toString().trim();
     }
     catch {
-        return 'main';
+        return '';
     } })();
-    const showFull = width >= 120;
-    return (_jsxs(Box, { width: width, justifyContent: "space-between", borderStyle: "single", borderColor: tokens.colors.border, paddingX: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.orange, bold: true, children: [g('logoBar'), " claude-code"] }), _jsxs(Text, { color: tokens.colors.fgDim, children: [" \u2502 ", branch, " \u2502"] }), _jsx(Text, { color: tokens.colors.orange, children: " \u25C9 3 sessions " }), _jsx(Text, { color: tokens.colors.fgDim, children: "\u2502 \u2318 palette \u2502 ? help" })] }), _jsxs(Box, { children: [showFull ? _jsx(Text, { color: tokens.colors.orange, children: "\u25CF\u25CF\u25CF \u25CF\u25CF  " }) : null, _jsx(Text, { color: tokens.colors.fgDim, children: "\u229E \u25A2" })] })] }));
+    const showLinks = width >= 120;
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { bold: true, color: tokens.colors.accent, children: ["KLYRO  v", version] }), showLinks ? _jsx(Text, { color: tokens.colors.dim, children: "\u00E2\u201D\u201A  /help   /config   /clear   /exit" }) : null] }), _jsxs(Text, { color: tokens.colors.dim, children: [model, "[200k]  \u00C2\u00B7  API Usage Billing"] }), _jsxs(Text, { color: tokens.colors.dim, children: [cwd, branch ? `  ·  ${branch}` : ''] })] }));
 }
-// Sidebar §4
-function Sidebar({ width }) {
-    if (width < 60)
-        return null;
-    const w = Math.min(28, Math.floor(width * 0.22));
-    return (_jsxs(Box, { flexDirection: "column", width: w, borderStyle: "single", borderColor: tokens.colors.border, paddingX: 1, marginRight: 1, children: [_jsx(Text, { bold: true, color: tokens.colors.fg, children: "\u25BE Sessions" }), _jsxs(Text, { color: tokens.colors.orange, children: ["\u25C9 Build auth flow     ", _jsx(Text, { color: tokens.colors.fgDim, children: "2m" })] }), _jsx(Text, { color: tokens.colors.fgDim, children: "\u25CB Refactor parser    12m" }), _jsx(Text, { color: tokens.colors.fgDim, children: "\u25CB Fix bug #42        1h" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, color: tokens.colors.fg, children: "\u25B8 Files" }) }), _jsx(Text, { color: tokens.colors.fgDim, children: "\u25B8 Agents" }), _jsx(Text, { color: tokens.colors.fgDim, children: "\u25B8 MCP" }), _jsx(Text, { color: tokens.colors.fgDim, children: "\u25B8 Hooks" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: tokens.colors.orange, children: "[+ new]" }) })] }));
-}
-// Inspector §6
-function Inspector({ width }) {
-    if (width < 80)
-        return null;
-    const w = 36;
-    return (_jsxs(Box, { flexDirection: "column", width: w, borderStyle: "single", borderColor: tokens.colors.border, paddingX: 1, marginLeft: 1, children: [_jsx(Text, { bold: true, color: tokens.colors.fg, children: "Inspector \u00B7 Tools" }), _jsx(Text, { color: tokens.colors.success, children: "\u2713 edit_file   src/routes.rs" }), _jsx(Text, { color: tokens.colors.fgDim, children: "  +12 / -3     0.3s" }), _jsx(Text, { children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsx(Text, { color: tokens.colors.success, children: "\u2713 read_file   Cargo.toml" }), _jsx(Text, { color: tokens.colors.fgDim, children: "  890 bytes    0.1s" }), _jsx(Text, { children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsx(Text, { color: tokens.colors.warning, children: "\u23F3 bash       cargo test" }), _jsx(Text, { color: tokens.colors.fgDim, children: "  running...    2.1s" })] }));
-}
-// Chat bubbles §5.1-5.4
-function MarkdownText({ text }) {
-    // minimal: **bold** → bold, keep rest
-    const parts = [];
-    let last = 0;
-    const re = /\*\*(.+?)\*\*/g;
-    let m;
-    let i = 0;
-    while ((m = re.exec(text))) {
-        if (m.index > last)
-            parts.push(_jsx(Text, { wrap: "wrap", children: text.slice(last, m.index) }, `t-${i++}`));
-        parts.push(_jsx(Text, { bold: true, wrap: "wrap", children: m[1] }, `b-${i++}`));
-        last = m.index + m[0].length;
-    }
-    if (last < text.length)
-        parts.push(_jsx(Text, { wrap: "wrap", children: text.slice(last) }, `t-${i++}`));
-    return _jsx(Text, { wrap: "wrap", children: parts.length ? parts : text });
-}
-function verbForTool(n) {
-    if (n === 'read_file')
+function verbForTool(name) {
+    if (name === 'read_file')
         return 'Read';
-    if (n === 'list_directory')
+    if (name === 'list_directory')
         return 'Listed';
-    if (n === 'grep' || n === 'glob' || n.includes('search'))
+    if (name === 'grep' || name === 'glob' || name === 'find_files' || name === 'search_files' || name === 'recent_files')
         return 'Searched';
-    if (n === 'shell_exec')
+    if (name === 'shell_exec')
         return 'Ran';
-    if (n.startsWith('git_'))
+    if (name.startsWith('git_'))
         return 'Checked git';
-    if (n === 'edit_file' || n.includes('edit') || n.includes('write'))
+    if (name === 'web_fetch')
+        return 'Fetched';
+    if (name === 'web_search')
+        return 'Searched web';
+    if (name === 'edit_file' || name === 'multi_edit' || name === 'apply_patch' || name === 'write_file')
         return 'Edited';
     return 'Called';
 }
@@ -73,7 +44,7 @@ function groupTools(items) {
     const out = [];
     let cur = [];
     const flush = () => {
-        if (!cur.length)
+        if (cur.length === 0)
             return;
         const byVerb = new Map();
         for (const it of cur) {
@@ -84,7 +55,7 @@ function groupTools(items) {
         }
         for (const [verb, list] of byVerb) {
             const totalMs = list.reduce((s, x) => s + (x.latencyMs ?? 0), 0);
-            const status = list.some(x => x.isError || x.status === 'error') ? 'error' : list.some(x => x.status === 'running') ? 'running' : 'done';
+            const status = list.some((x) => x.isError || x.status === 'error') ? 'error' : list.some((x) => x.status === 'running') ? 'running' : 'done';
             out.push({ id: nextId('g'), verb, items: list, totalMs, status });
         }
         cur = [];
@@ -100,6 +71,27 @@ function groupTools(items) {
     flush();
     return out;
 }
+// Simple markdown: **bold** → bold, keep lists/tables, wrap at word boundaries
+function MarkdownText({ text, dim, width }) {
+    // Split by **bold** segments
+    const parts = [];
+    let last = 0;
+    const re = /\*\*(.+?)\*\*/g;
+    let m;
+    let idx = 0;
+    while ((m = re.exec(text))) {
+        if (m.index > last)
+            parts.push(_jsx(Text, { color: dim ? tokens.colors.dim : undefined, wrap: "wrap", children: text.slice(last, m.index) }, `t-${idx++}`));
+        parts.push(_jsx(Text, { bold: true, color: dim ? undefined : tokens.colors.soft, wrap: "wrap", children: m[1] }, `b-${idx++}`));
+        last = m.index + m[0].length;
+    }
+    if (last < text.length)
+        parts.push(_jsx(Text, { color: dim ? tokens.colors.dim : undefined, wrap: "wrap", children: text.slice(last) }, `t-${idx++}`));
+    if (parts.length === 0)
+        return _jsx(Text, { color: dim ? tokens.colors.dim : undefined, wrap: "wrap", children: text });
+    // Render as single line with bold segments — Ink will wrap the parent Box
+    return _jsx(Text, { wrap: "wrap", children: parts });
+}
 export function App(props) {
     const { stdout } = useStdout();
     const [transcript, setTranscript] = useState(props.initialTranscript ?? []);
@@ -113,60 +105,66 @@ export function App(props) {
     const [expandedGroups, setExpandedGroups] = useState(new Set());
     const [scrollOffset, setScrollOffset] = useState(0);
     const streamingIdRef = useRef(null);
-    const width = stdout?.columns ?? 120;
+    const width = stdout?.columns ?? 100;
     const height = stdout?.rows ?? 30;
     const isFullscreen = props.isFullscreen ?? false;
     const grouped = groupTools(transcript);
     const viewportH = Math.max(5, height - 10);
-    const totalRows = grouped.reduce((s, it) => s + (it.verb ? 1 + (it.items.length > 1 && expandedGroups.has(it.id) ? it.items.length : 0) : 2), 0) + (plan.length ? 1 : 0) + 2;
+    const totalRows = grouped.length + (plan.length > 0 ? 1 : 0) + 2;
     const maxOffset = Math.max(0, totalRows - viewportH);
+    const isAtBottom = scrollOffset >= maxOffset;
     const trackH = viewportH;
-    const thumbPos = maxOffset === 0 ? 0 : Math.round(scrollOffset / maxOffset * (trackH - 1));
+    const thumbPos = maxOffset === 0 ? 0 : Math.round((scrollOffset / maxOffset) * (trackH - 1));
     const visibleGrouped = isFullscreen ? grouped.slice(scrollOffset, scrollOffset + viewportH) : grouped;
-    const placeholder = 'Message Klyro…';
-    useEffect(() => bridge.subscribe(p => setAwaitingApproval(p !== null)), [bridge]);
-    useEffect(() => { if (queuedInputs.length > 0 && status.status !== 'running' && !awaitingApproval) {
-        const toSend = queuedInputs[0];
-        setQueuedInputs(p => p.slice(1));
-        setTranscript(p => [...p, { id: nextId('user'), kind: 'text', text: toSend, role: 'user' }]);
-        streamingIdRef.current = null;
-        const cmd = parseSlash(toSend.trim());
-        if (cmd.kind === 'prompt')
-            void props.onPrompt(cmd.text);
-        else
-            void props.onSlash(cmd);
-    } }, [queuedInputs, status.status, awaitingApproval]);
+    useEffect(() => bridge.subscribe((p) => setAwaitingApproval(p !== null)), [bridge]);
+    useEffect(() => {
+        if (queuedInputs.length > 0 && status.status !== 'running' && !awaitingApproval) {
+            const toSend = queuedInputs[0];
+            setQueuedInputs((prev) => prev.slice(1));
+            setTranscript((prev) => [...prev, { id: nextId('user'), kind: 'text', text: toSend, role: 'user' }]);
+            streamingIdRef.current = null;
+            const cmd = parseSlash(toSend.trim());
+            if (cmd.kind === 'prompt')
+                void props.onPrompt(cmd.text);
+            else
+                void props.onSlash(cmd);
+        }
+    }, [queuedInputs, 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]);
-    useEffect(() => { if (scrollOffset >= maxOffset)
-        setScrollOffset(maxOffset); }, [transcript.length, plan.length, maxOffset]);
+    useEffect(() => { if (isAtBottom)
+        setScrollOffset(maxOffset); }, [transcript.length, plan.length, maxOffset, isAtBottom]);
     const append = useCallback((item) => { if (item.kind !== 'text' || item.role !== 'assistant')
-        streamingIdRef.current = null; setTranscript(p => [...p, item]); }, []);
-    const appendDelta = useCallback((text) => { if (!text)
-        return; const sid = streamingIdRef.current; if (sid)
-        setTranscript(p => { const idx = p.findIndex(x => x.id === sid); if (idx === -1)
-            return [...p, { id: sid, kind: 'text', text, role: 'assistant' }]; const cur = p[idx]; const copy = [...p]; copy[idx] = { ...cur, text: cur.text + text }; return copy; });
-    else {
-        const id = nextId('stream');
-        streamingIdRef.current = id;
-        setTranscript(p => [...p, { id, kind: 'text', text, role: 'assistant' }]);
-    } }, []);
+        streamingIdRef.current = null; setTranscript((prev) => [...prev, item]); }, []);
+    const appendDelta = useCallback((text) => {
+        if (!text)
+            return;
+        const sid = streamingIdRef.current;
+        if (sid)
+            setTranscript((prev) => { const idx = prev.findIndex((x) => x.id === sid); if (idx === -1)
+                return [...prev, { id: sid, kind: 'text', text, role: 'assistant' }]; const cur = prev[idx]; const copy = [...prev]; copy[idx] = { ...cur, text: cur.text + text }; return copy; });
+        else {
+            const id = nextId('stream');
+            streamingIdRef.current = id;
+            setTranscript((prev) => [...prev, { id, kind: 'text', text, role: 'assistant' }]);
+        }
+    }, []);
     useEffect(() => { if (status.status !== 'running')
         streamingIdRef.current = null; }, [status.status]);
-    const updateStatus = useCallback((s) => setStatus(p => ({ ...p, ...s })), []);
+    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, appendDelta, updateStatus, updatePlan }); globalThis.__klyroAppAppend = append; globalThis.__klyroAppendDelta = appendDelta; globalThis.__klyroAppStatus = updateStatus; globalThis.__klyroAppPlan = updatePlan; return () => { delete globalThis.__klyroAppAppend; delete globalThis.__klyroAppendDelta; delete globalThis.__klyroAppStatus; delete globalThis.__klyroAppPlan; }; }, [append, appendDelta, updateStatus, updatePlan]);
-    const toggleGroup = (id) => setExpandedGroups(p => { const n = new Set(p); if (n.has(id))
+    const toggleGroup = (id) => setExpandedGroups((prev) => { const n = new Set(prev); if (n.has(id))
         n.delete(id);
     else
         n.add(id); return n; });
-    const scrollUp = (n = 3) => setScrollOffset(p => Math.max(0, p - n));
-    const scrollDown = (n = 3) => setScrollOffset(p => Math.min(maxOffset, p + n));
+    const scrollUp = (n = 3) => setScrollOffset((p) => Math.max(0, p - n));
+    const scrollDown = (n = 3) => setScrollOffset((p) => Math.min(maxOffset, p + n));
     useInput((inputStr, key) => {
         if (key.escape && queuedInputs.length > 0) {
-            setQueuedInputs(p => p.slice(1));
+            setQueuedInputs((prev) => prev.slice(1));
             return;
         }
         if (key.pageUp || (key.ctrl && inputStr === 'u')) {
@@ -205,16 +203,16 @@ export function App(props) {
                     return;
                 if (queuedInputs.length >= 3)
                     return;
-                setQueuedInputs(p => [...p, v]);
+                setQueuedInputs((prev) => [...prev, v]);
                 setInput('');
                 return;
             }
             if (key.backspace || key.delete) {
-                setInput(v => v.slice(0, -1));
+                setInput((v) => v.slice(0, -1));
                 return;
             }
             if (!key.ctrl && !key.meta)
-                setInput(v => v + inputStr.replace(/\r\n/g, '\n').replace(/\r/g, '\n'));
+                setInput((v) => v + inputStr.replace(/\r\n/g, '\n').replace(/\r/g, '\n'));
             return;
         }
         if (key.return) {
@@ -222,7 +220,7 @@ export function App(props) {
             if (!v)
                 return;
             setInput('');
-            setTranscript(p => [...p, { id: nextId('user'), kind: 'text', text: v, role: 'user' }]);
+            setTranscript((prev) => [...prev, { id: nextId('user'), kind: 'text', text: v, role: 'user' }]);
             streamingIdRef.current = null;
             const cmd = parseSlash(v);
             if (cmd.kind === 'prompt')
@@ -232,71 +230,92 @@ export function App(props) {
             return;
         }
         if (key.backspace || key.delete) {
-            setInput(v => v.slice(0, -1));
+            setInput((v) => v.slice(0, -1));
             return;
         }
         if (!key.ctrl && !key.meta)
-            setInput(v => v + inputStr);
+            setInput((v) => v + inputStr);
     });
-    const ver = props.version ?? '0.1.36';
-    const rule = '─'.repeat(Math.max(10, width - 2));
+    const ver = props.version ?? '0.1.27';
+    const rule = g('rule').repeat(Math.max(10, width - 2));
     const cost = (status.usageInput / 1000 * 0.003 + status.usageOutput / 1000 * 0.015);
-    const ctxPct = status.usageInput + status.usageOutput > 0 ? Math.round((status.usageInput + status.usageOutput) / 120_000 * 100) : 0;
-    const hints = maxOffset > 0 && isFullscreen ? 'PgUp/Dn scroll  ·  ' : '' + (status.status === 'running' ? 'ctrl+c to stop  ·  enter to queue  ·  ctrl+o expand' : transcript.length === 0 ? 'shift+tab to cycle  ·  ↑↓ for history  ·  / for commands' : 'enter to send  ·  shift+enter newline  ·  @ to attach');
-    return (_jsxs(Box, { flexDirection: "column", width: width, height: isFullscreen ? height - 1 : undefined, children: [_jsx(TopBar, { width: width, cwd: props.cwd, model: status.model }), _jsxs(Box, { flexDirection: "row", flexGrow: isFullscreen ? 1 : 0, overflow: isFullscreen ? 'hidden' : undefined, children: [_jsx(Sidebar, { width: width }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "single", borderColor: tokens.colors.border, paddingX: 1, overflow: isFullscreen ? 'hidden' : undefined, children: [grouped.length === 0 ? _jsx(Text, { color: tokens.colors.fgDim, children: "Message Klyro\u2026" }) : visibleGrouped.map(item => {
+    const totalTokens = status.usageInput + status.usageOutput;
+    const ctxPct = totalTokens > 0 ? Math.round((totalTokens / 120_000) * 100) : 0;
+    const baseHints = status.status === 'running' ? 'ctrl+c to stop  ·  enter to queue  ·  ctrl+o expand' : transcript.length === 0 ? 'shift+tab to cycle  ·  ↑↓ for history  ·  / for commands' : 'enter to send  ·  shift+enter newline  ·  @ to attach';
+    const hints = maxOffset > 0 && isFullscreen ? `${baseHints}  ·  PgUp/Dn scroll` : baseHints;
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: isFullscreen ? height - 1 : undefined, children: [_jsx(Header, { cwd: props.cwd, model: status.model, version: ver, width: width }), _jsxs(Box, { flexDirection: "row", flexGrow: isFullscreen ? 1 : 0, overflow: isFullscreen ? 'hidden' : undefined, children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, overflow: isFullscreen ? 'hidden' : undefined, paddingX: 0, children: [grouped.length === 0 ? (_jsx(Text, { color: tokens.colors.dim, children: "Message Klyro\u00E2\u20AC\u00A6" })) : visibleGrouped.map((item) => {
                                 if (item.verb) {
                                     const gr = item;
                                     const isExpanded = expandedGroups.has(gr.id);
-                                    const verbLine = (() => { if (gr.items.length === 1) {
-                                        const it = gr.items[0];
-                                        let p = '';
-                                        try {
-                                            const a = JSON.parse(it.args);
-                                            p = a.path ?? a.pattern ?? a.command?.slice(0, 48) ?? '';
+                                    const verbLine = (() => {
+                                        if (gr.items.length === 1) {
+                                            const it = gr.items[0];
+                                            let p = '';
+                                            try {
+                                                const a = JSON.parse(it.args);
+                                                p = a.path ?? a.pattern ?? a.command?.slice(0, 48) ?? '';
+                                            }
+                                            catch {
+                                                p = '';
+                                            }
+                                            if (gr.verb === 'Read' && p)
+                                                return `Read ${p.split('/').pop()}`;
+                                            if (gr.verb === 'Searched' && p)
+                                                return `Searched "${p}"`;
+                                            if (gr.verb === 'Ran' && p)
+                                                return `Ran ${p.split(' ')[0]}`;
+                                            return `${gr.verb} ${p}`;
                                         }
-                                        catch { }
-                                        if (gr.verb === 'Read' && p)
-                                            return `Read ${p.split('/').pop()}`;
-                                        if (gr.verb === 'Searched' && p)
-                                            return `Searched "${p}"`;
-                                        if (gr.verb === 'Ran' && p)
-                                            return `Ran ${p.split(' ')[0]}`;
-                                        return `${gr.verb} ${p}`;
-                                    } if (gr.verb === 'Read')
-                                        return `Read ${gr.items.length} files`; if (gr.verb === 'Searched')
-                                        return `Searched ${gr.items.length} patterns`; if (gr.verb === 'Ran')
-                                        return `Ran ${gr.items.length} commands`; return `${gr.verb} ${gr.items.length} items`; })();
-                                    const right = gr.status === 'running' ? `${(elapsed / 1000).toFixed(1)}s` : gr.status === 'error' ? '✗' : `${gr.totalMs}ms`;
-                                    const marker = isExpanded ? '▼' : '✓';
-                                    const markerColor = gr.status === 'error' ? tokens.colors.danger : gr.status === 'running' ? tokens.colors.orange : tokens.colors.success;
-                                    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "single", borderColor: tokens.colors.border, paddingX: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { color: markerColor, children: [marker, " ", verbLine] }), _jsx(Text, { color: tokens.colors.fgDim, children: right })] }), isExpanded ? gr.items.map(it => {
+                                        if (gr.verb === 'Read')
+                                            return `Read ${gr.items.length} files`;
+                                        if (gr.verb === 'Searched')
+                                            return `Searched ${gr.items.length} patterns`;
+                                        if (gr.verb === 'Ran')
+                                            return `Ran ${gr.items.length} commands`;
+                                        if (gr.verb === 'Edited')
+                                            return `Edited ${gr.items.length} files`;
+                                        return `${gr.verb} ${gr.items.length} items`;
+                                    })();
+                                    const right = gr.status === 'running' ? `${(elapsed / 1000).toFixed(1)}s` : gr.status === 'error' ? '✗' : `${gr.totalMs}ms`;
+                                    const marker = isExpanded ? '▼' : '✓';
+                                    const markerColor = gr.status === 'error' ? tokens.colors.err : gr.status === 'running' ? tokens.colors.warn : tokens.colors.ok;
+                                    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: markerColor, children: [marker, " ", verbLine] }), _jsxs(Text, { color: tokens.colors.dim, children: ["  ", right] })] }), isExpanded ? gr.items.map((it) => {
                                                 let friendly = '';
                                                 try {
                                                     const a = JSON.parse(it.args);
-                                                    const p = a.path ?? '';
-                                                    friendly = p ? p.split('/').pop() ?? p : it.args.slice(0, 40);
+                                                    const p = a.path ?? a.pattern ?? a.command ?? '';
+                                                    const short = p ? String(p).split('/').pop()?.slice(0, 40) ?? p : '';
+                                                    if (it.name === 'read_file' && short)
+                                                        friendly = `${short}`;
+                                                    else if (it.name === 'shell_exec' && p)
+                                                        friendly = `$ ${String(p).slice(0, 40)}`;
+                                                    else if (short)
+                                                        friendly = short;
+                                                    else
+                                                        friendly = it.args.slice(0, 40);
                                                 }
                                                 catch {
                                                     friendly = it.args.slice(0, 40);
                                                 }
-                                                return _jsx(Box, { paddingLeft: 1, children: _jsxs(Text, { color: tokens.colors.fgDim, children: ["\u2514 ", friendly] }) }, it.id);
+                                                return (_jsxs(Box, { paddingLeft: 4, children: [_jsxs(Text, { color: tokens.colors.guide, children: [g('end'), " "] }), _jsx(Text, { color: tokens.colors.dim, children: friendly })] }, it.id));
                                             }) : null] }, gr.id));
                                 }
                                 const it = item;
                                 if (it.kind === 'text' && it.role === 'user') {
-                                    return _jsxs(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "single", borderColor: tokens.colors.border, paddingX: 1, children: [_jsx(Text, { color: tokens.colors.fgMuted, children: "You" }), _jsx(Text, { wrap: "wrap", children: it.text })] }, it.id);
+                                    return _jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: tokens.colors.accent, bold: true, children: [g('prompt'), " "] }), _jsx(Text, { wrap: "wrap", children: it.text })] }, it.id);
                                 }
                                 if (it.kind === 'text') {
-                                    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "single", borderColor: tokens.colors.orangeSoft, paddingX: 1, borderLeftColor: tokens.colors.orange, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: tokens.colors.orange, children: "Claude" }), _jsxs(Text, { color: tokens.colors.fgDim, children: [" \u00B7 ", status.model, " ", status.status === 'running' && !streamingIdRef.current ? '◯ thinking' : ''] })] }), _jsx(Box, { marginTop: 1, children: _jsx(MarkdownText, { text: it.text }) })] }, it.id));
+                                    // prose — render markdown, not raw **, with proper wrap and guide
+                                    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: tokens.colors.accent, children: [g('agentBullet'), " Klyro"] })] }), _jsx(Box, { paddingLeft: 2, flexDirection: "column", children: _jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.dim, children: ["  ", g('guide'), "   "] }), _jsx(Box, { flexGrow: 1, children: _jsx(MarkdownText, { text: it.text }) })] }) })] }, it.id));
                                 }
                                 if (it.kind === 'error')
-                                    return _jsx(Box, { borderStyle: "single", borderColor: tokens.colors.danger, paddingX: 1, marginBottom: 1, children: _jsxs(Text, { color: tokens.colors.danger, children: ["\u2717 ", it.message] }) }, it.id);
+                                    return _jsx(Box, { paddingLeft: 2, marginBottom: 1, children: _jsxs(Text, { color: tokens.colors.err, children: ["  ", g('guide'), "   \u00E2\u0153\u2014 ", it.message] }) }, it.id);
                                 if (it.kind === 'policy')
                                     return null;
                                 if (it.kind === 'file_changed')
-                                    return _jsx(Box, { borderStyle: "single", borderColor: tokens.colors.border, paddingX: 1, marginBottom: 1, children: _jsxs(Text, { color: tokens.colors.fgDim, children: ["\u270E ", it.path, "  ", it.op] }) }, it.id);
+                                    return _jsx(Box, { paddingLeft: 2, marginBottom: 1, children: _jsxs(Text, { color: tokens.colors.dim, children: ["  ", g('guide'), "   ", g('editsBadge'), " ", it.path, "  ", it.op] }) }, it.id);
                                 if (it.kind === 'diff')
-                                    return _jsxs(Box, { borderStyle: "single", borderColor: tokens.colors.border, paddingX: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, children: it.summary }), it.hunks.map((h, i) => _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: tokens.colors.fg, children: h.path }), h.lines.map((l, j) => _jsxs(Text, { wrap: "wrap", color: l.kind === 'add' ? tokens.colors.success : l.kind === 'remove' ? tokens.colors.danger : tokens.colors.fgDim, children: [l.kind === 'add' ? "+ " : l.kind === 'remove' ? "- " : "  ", l.text] }, j))] }, i))] }, it.id);
+                                    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, color: tokens.colors.soft, children: it.summary ?? 'Diff' }), it.hunks.map((h, i) => (_jsxs(Box, { flexDirection: "column", marginTop: 0, children: [_jsx(Text, { color: tokens.colors.soft, children: h.path }), h.lines.map((l, j) => (_jsxs(Text, { wrap: "wrap", color: l.kind === 'add' ? tokens.colors.ok : l.kind === 'remove' ? tokens.colors.err : tokens.colors.dim, children: [l.kind === 'add' ? '+ ' : l.kind === 'remove' ? '- ' : '  ', l.text] }, j)))] }, i)))] }, it.id));
                                 return null;
-                            }), status.status === 'running' && !streamingIdRef.current ? _jsx(Box, { borderStyle: "single", borderColor: tokens.colors.orangeSoft, paddingX: 1, marginBottom: 1, children: _jsxs(Text, { color: tokens.colors.orange, children: ["\u25EF thinking ", (elapsed / 1000).toFixed(1), "s"] }) }) : null, plan.length > 0 ? _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: tokens.colors.border, paddingX: 1, marginBottom: 1, children: [_jsxs(Text, { bold: true, children: ["\u25C7 Plan ", plan.filter(p => p.status === 'done').length, "/", plan.length] }), plan.slice(0, 8).map(p => _jsxs(Text, { color: p.status === 'done' ? tokens.colors.success : p.status === 'in_progress' ? tokens.colors.orange : tokens.colors.fgDim, children: [p.status === 'done' ? '✓' : p.status === 'in_progress' ? '●' : '○', " ", p.title] }, p.id))] }) : null, queuedInputs.length > 0 ? _jsx(Box, { flexDirection: "column", paddingX: 1, marginBottom: 1, children: queuedInputs.map((q, i) => _jsxs(Text, { color: tokens.colors.fgDim, children: ["queued: ", q.slice(0, 60), i === 0 ? '  esc to drop' : ''] }, i)) }) : null] }), _jsx(Inspector, { width: width }), isFullscreen ? _jsx(Box, { flexDirection: "column", width: 1, marginLeft: 1, children: Array.from({ length: trackH }).map((_, i) => _jsx(Text, { color: i === thumbPos ? tokens.colors.orange : tokens.colors.border, children: i === thumbPos ? '●' : '│' }, i)) }) : null] }), _jsx(Box, { flexDirection: "column", borderStyle: "single", borderColor: tokens.colors.border, paddingX: 1, children: _jsxs(Box, { children: [_jsx(Text, { color: tokens.colors.orange, children: "\u258C " }), _jsxs(Text, { wrap: "wrap", children: [input || _jsx(Text, { color: tokens.colors.fgDim, children: "Type a message\u2026  \u23CE send  \u21E7\u23CE newline  /" }), "\u258F"] })] }) }), _jsxs(Box, { justifyContent: "space-between", paddingX: 1, children: [_jsx(Text, { color: tokens.colors.fgDim, children: hints }), _jsxs(Text, { color: tokens.colors.fgDim, children: [cost > 0 ? `$${cost.toFixed(2)} · ` : '', ctxPct > 0 ? `${ctxPct}% ` : ' ', _jsx(Text, { color: tokens.colors.orange, children: "\u25CF\u25CF\u25CF \u25CF\u25CF" })] })] })] }));
+                            }), status.status === 'running' && !streamingIdRef.current ? (_jsxs(Box, { paddingLeft: 2, marginBottom: 1, children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsx(Text, { color: tokens.colors.dim, children: "Thinking..." }), _jsxs(Text, { color: tokens.colors.dim, children: ["  ", (elapsed / 1000).toFixed(1), "s"] })] })) : null, plan.length > 0 ? (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginTop: 0, marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { bold: true, children: [g('todoPlan'), " Plan  ", plan.filter((p) => p.status === 'done').length, "/", plan.length] })] }), plan.slice(0, 8).map((p) => (_jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: p.status === 'done' ? tokens.colors.ok : p.status === 'in_progress' ? tokens.colors.accent : tokens.colors.dim, children: [p.status === 'done' ? g('todoDone') : p.status === 'in_progress' ? g('todoActive') : g('todoPending'), " ", p.title] })] }, p.id)))] })) : null, queuedInputs.length > 0 ? (_jsx(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: queuedInputs.map((q, i) => (_jsxs(Text, { color: tokens.colors.dim, children: ["queued: ", q.slice(0, 60), i === 0 ? '  esc to drop' : ''] }, i))) })) : null] }), isFullscreen ? (_jsx(Box, { flexDirection: "column", width: 1, marginLeft: 1, children: Array.from({ length: trackH }).map((_, i) => (_jsx(Text, { color: i === thumbPos ? tokens.colors.accent : tokens.colors.guide, children: i === thumbPos ? '●' : '│' }, i))) })) : null] }), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: tokens.colors.guide, children: g('rule').repeat(Math.max(10, width - 2)) }), _jsxs(Box, { children: [_jsxs(Text, { color: tokens.colors.accent, bold: true, children: [g('prompt'), " "] }), _jsxs(Text, { wrap: "wrap", children: [input || _jsx(Text, { color: tokens.colors.dim, children: "Message Klyro\u00E2\u20AC\u00A6" }), "\u00E2\u2013\u008F"] })] }), _jsx(Text, { color: tokens.colors.guide, children: g('rule').repeat(Math.max(10, width - 2)) })] }), _jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { color: tokens.colors.dim, children: [baseHints, maxOffset > 0 && isFullscreen ? '  ·  PgUp/Dn scroll' : ''] }), _jsxs(Text, { color: tokens.colors.dim, children: [cost > 0 ? `$${cost.toFixed(2)} · ` : '', ctxPct > 0 ? `${ctxPct}% ctx · ` : '', status.status === 'running' ? 'auto mode on ●' : ''] })] })] }));
 }

package/dist/tui/tokens.d.ts

@@ -1,53 +1,40 @@
 /**
- * design.md §2 — White & Orange (light default) + Dark mirror
- * Light: bg #FFFFFF orange #FF6B1A — Dark: bg #1A1A1A orange #FF8A3D
- * Only orange is saturated in chrome; content uses dim borders.
+ * Klyro tokens — White & Orange #FF6B1A light + Dark #E8843C — per design.md + TUI_DESIGN.md
+ * True 24-bit hex, Ink will render via 256-color fallback. No backgrounds except diff.
  */
 export declare const tokens: {
     readonly colors: {
         readonly bg: "#FFFFFF";
         readonly bgElevated: "#FAF7F2";
-        readonly bgSubtle: "#F5F0E8";
         readonly fg: "#1A1A1A";
-        readonly fgMuted: "#6B6B6B";
-        readonly fgDim: "#9A9A9A";
-        readonly orange: "#FF6B1A";
-        readonly orangeHot: "#FF8A3D";
-        readonly orangeDeep: "#CC4F0A";
-        readonly orangeSoft: "#FFF1E6";
-        readonly border: "#E8E0D2";
-        readonly borderStrong: "#1A1A1A";
-        readonly success: "#2E7D32";
-        readonly warning: "#C77700";
-        readonly danger: "#C62828";
-        readonly codeBg: "#FAF7F2";
-        readonly codeBorder: "#E8E0D2";
-        readonly guide: "#E8E0D2";
-        readonly darkBg: "#1A1A1A";
-        readonly darkOrange: "#FF8A3D";
-        readonly darkBorder: "#333333";
+        readonly soft: "#F5F5F5";
+        readonly dim: "#9A9A9A";
+        readonly guide: "#3A3A3A";
+        readonly accent: "#FF6B1A";
+        readonly accentSoft: "#FFF1E6";
+        readonly ok: "#FF6B1A";
+        readonly err: "#E06C6C";
+        readonly warn: "#FF6B1A";
+        readonly info: "#6FA8DC";
+        readonly diffAddBg: "#12250F";
+        readonly diffDelBg: "#2A1212";
     };
     readonly ansi: {
-        readonly bg: "white";
-        readonly fg: "black";
-        readonly fgMuted: "gray";
+        readonly accent: "yellowBright";
+        readonly accentBold: "yellowBright";
+        readonly fg: "white";
+        readonly soft: "whiteBright";
         readonly dim: "gray";
-        readonly orange: "yellow";
-        readonly orangeBright: "red";
-        readonly border: "gray";
         readonly guide: "gray";
-        readonly success: "green";
-        readonly warning: "yellow";
-        readonly danger: "red";
-        readonly accent: "yellow";
-        readonly accentBold: "yellowBright";
-        readonly soft: "white";
+        readonly ok: "yellowBright";
+        readonly err: "red";
+        readonly warn: "yellowBright";
+        readonly info: "blue";
+        readonly border: "gray";
         readonly muted: "gray";
+        readonly success: "yellowBright";
         readonly error: "red";
-        readonly ok: "green";
-        readonly warn: "yellow";
-        readonly info: "blue";
-        readonly successAlt: "green";
+        readonly warning: "yellowBright";
     };
 };
 export declare const glyphs: {
@@ -72,12 +59,10 @@ export declare const glyphs: {
     readonly logoBar: "▌";
     readonly dotFilled: "●";
     readonly dotEmpty: "○";
-    readonly dotHalf: "◐";
-    readonly sidebar: "⊞";
-    readonly inspector: "▢";
-    readonly copy: "⧉";
     readonly brand: "◆";
     readonly compaction: "⟲";
+    readonly editsBadge: "✎";
+    readonly dot: "·";
 };
 export declare const glyphAscii: {
     readonly prompt: ">";
@@ -101,14 +86,10 @@ export declare const glyphAscii: {
     readonly logoBar: "|";
     readonly dotFilled: "*";
     readonly dotEmpty: "o";
-    readonly dotHalf: "o";
 };
 export declare function isAsciiMode(): boolean;
 export declare function g(name: keyof typeof glyphs): string;
 export declare const spacing: {
-    readonly maxWidth: 120;
-    readonly indent: 2;
-    readonly gap: 1;
     readonly sidebar: 28;
     readonly inspector: 36;
 };

package/dist/tui/tokens.js

@@ -1,54 +1,40 @@
 /**
- * design.md §2 — White & Orange (light default) + Dark mirror
- * Light: bg #FFFFFF orange #FF6B1A — Dark: bg #1A1A1A orange #FF8A3D
- * Only orange is saturated in chrome; content uses dim borders.
+ * Klyro tokens — White & Orange #FF6B1A light + Dark #E8843C — per design.md + TUI_DESIGN.md
+ * True 24-bit hex, Ink will render via 256-color fallback. No backgrounds except diff.
  */
 export const tokens = {
     colors: {
         bg: '#FFFFFF',
         bgElevated: '#FAF7F2',
-        bgSubtle: '#F5F0E8',
         fg: '#1A1A1A',
-        fgMuted: '#6B6B6B',
-        fgDim: '#9A9A9A',
-        orange: '#FF6B1A',
-        orangeHot: '#FF8A3D',
-        orangeDeep: '#CC4F0A',
-        orangeSoft: '#FFF1E6',
-        border: '#E8E0D2',
-        borderStrong: '#1A1A1A',
-        success: '#2E7D32',
-        warning: '#C77700',
-        danger: '#C62828',
-        codeBg: '#FAF7F2',
-        codeBorder: '#E8E0D2',
-        guide: '#E8E0D2',
-        // dark mirror
-        darkBg: '#1A1A1A',
-        darkOrange: '#FF8A3D',
-        darkBorder: '#333333',
+        soft: '#F5F5F5',
+        dim: '#9A9A9A',
+        guide: '#3A3A3A',
+        accent: '#FF6B1A',
+        accentSoft: '#FFF1E6',
+        ok: '#FF6B1A',
+        err: '#E06C6C',
+        warn: '#FF6B1A',
+        info: '#6FA8DC',
+        diffAddBg: '#12250F',
+        diffDelBg: '#2A1212',
     },
     ansi: {
-        bg: 'white',
-        fg: 'black',
-        fgMuted: 'gray',
+        accent: 'yellowBright',
+        accentBold: 'yellowBright',
+        fg: 'white',
+        soft: 'whiteBright',
         dim: 'gray',
-        orange: 'yellow', // #FF6B1A → 202
-        orangeBright: 'red', // fallback vivid
-        border: 'gray',
         guide: 'gray',
-        success: 'green',
-        warning: 'yellow',
-        danger: 'red',
-        accent: 'yellow',
-        accentBold: 'yellowBright',
-        soft: 'white',
+        ok: 'yellowBright',
+        err: 'red',
+        warn: 'yellowBright',
+        info: 'blue',
+        border: 'gray',
         muted: 'gray',
+        success: 'yellowBright',
         error: 'red',
-        ok: 'green',
-        warn: 'yellow',
-        info: 'blue',
-        successAlt: 'green',
+        warning: 'yellowBright',
     },
 };
 export const glyphs = {
@@ -73,12 +59,10 @@ export const glyphs = {
     logoBar: '▌',
     dotFilled: '●',
     dotEmpty: '○',
-    dotHalf: '◐',
-    sidebar: '⊞',
-    inspector: '▢',
-    copy: '⧉',
     brand: '◆',
     compaction: '⟲',
+    editsBadge: '✎',
+    dot: '·',
 };
 export const glyphAscii = {
     prompt: '>',
@@ -102,7 +86,6 @@ export const glyphAscii = {
     logoBar: '|',
     dotFilled: '*',
     dotEmpty: 'o',
-    dotHalf: 'o',
 };
 export function isAsciiMode() {
     return process.env.TERM === 'dumb' || process.env.KLYRO_ASCII === '1' || false;
@@ -112,4 +95,4 @@ export function g(name) {
         return glyphAscii[name] ?? glyphs[name];
     return glyphs[name];
 }
-export const spacing = { maxWidth: 120, indent: 2, gap: 1, sidebar: 28, inspector: 36 };
+export const spacing = { sidebar: 28, inspector: 36 };

package/package.json

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