klyro 0.1.35 → 0.1.37

package/dist/tui/app.d.ts

@@ -1,6 +1,6 @@
 /**
- * Klyro TUI — opencode-clean — no clumsy words, correct wrap, markdown, scroll
- * Header 3 rows, guide │ at col2, ● Klyro accent, prose wrapped at word boundaries
+ * 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
  */
 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 — opencode-clean — no clumsy words, correct wrap, markdown, scroll
- * Header 3 rows, guide │ at col2, ● Klyro accent, prose wrapped at word boundaries
+ * 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
  */
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { Box, Text, useInput, useStdout } from 'ink';
@@ -10,33 +10,62 @@ 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}`; }
-function Header({ cwd, model, version, width }) {
+// Top bar §3
+function TopBar({ width, cwd, model }) {
     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 '';
+        return 'main';
     } })();
-    const showLinks = width >= 120;
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { bold: true, color: tokens.ansi.accent, children: ["KLYRO  v", version] }), showLinks ? _jsx(Text, { color: tokens.ansi.dim, children: "\u2502  /help   /config   /clear   /exit" }) : null] }), _jsxs(Text, { color: tokens.ansi.dim, children: [model, "[200k]  \u00B7  API Usage Billing"] }), _jsxs(Text, { color: tokens.ansi.dim, children: [cwd, branch ? `  ·  ${branch}` : ''] })] }));
+    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" })] })] }));
 }
-function verbForTool(name) {
-    if (name === 'read_file')
+// 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')
         return 'Read';
-    if (name === 'list_directory')
+    if (n === 'list_directory')
         return 'Listed';
-    if (name === 'grep' || name === 'glob' || name === 'find_files' || name === 'search_files' || name === 'recent_files')
+    if (n === 'grep' || n === 'glob' || n.includes('search'))
         return 'Searched';
-    if (name === 'shell_exec')
+    if (n === 'shell_exec')
         return 'Ran';
-    if (name.startsWith('git_'))
+    if (n.startsWith('git_'))
         return 'Checked git';
-    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')
+    if (n === 'edit_file' || n.includes('edit') || n.includes('write'))
         return 'Edited';
     return 'Called';
 }
@@ -44,7 +73,7 @@ function groupTools(items) {
     const out = [];
     let cur = [];
     const flush = () => {
-        if (cur.length === 0)
+        if (!cur.length)
             return;
         const byVerb = new Map();
         for (const it of cur) {
@@ -55,7 +84,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 = [];
@@ -71,27 +100,6 @@ 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.ansi.dim : undefined, wrap: "wrap", children: text.slice(last, m.index) }, `t-${idx++}`));
-        parts.push(_jsx(Text, { bold: true, color: dim ? undefined : tokens.ansi.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.ansi.dim : undefined, wrap: "wrap", children: text.slice(last) }, `t-${idx++}`));
-    if (parts.length === 0)
-        return _jsx(Text, { color: dim ? tokens.ansi.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 ?? []);
@@ -105,74 +113,60 @@ export function App(props) {
     const [expandedGroups, setExpandedGroups] = useState(new Set());
     const [scrollOffset, setScrollOffset] = useState(0);
     const streamingIdRef = useRef(null);
-    const width = stdout?.columns ?? 100;
+    const width = stdout?.columns ?? 120;
     const height = stdout?.rows ?? 30;
     const isFullscreen = props.isFullscreen ?? false;
     const grouped = groupTools(transcript);
     const viewportH = Math.max(5, height - 10);
-    const estLines = (s) => Math.max(1, Math.ceil(s.length / Math.max(20, width - 6)));
-    const totalRows = grouped.reduce((sum, it) => {
-        if (it.verb)
-            return sum + 1 + ((it.items.length > 1 && expandedGroups.has(it.id)) ? it.items.length : 0);
-        const t = it;
-        if (t.kind === 'text')
-            return sum + estLines(t.text) + 1;
-        return sum + 2;
-    }, 0) + (plan.length > 0 ? plan.length + 1 : 0) + 2;
+    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 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;
-    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]);
+    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(() => { 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 (isAtBottom)
-        setScrollOffset(maxOffset); }, [transcript.length, plan.length, maxOffset, isAtBottom]);
+    useEffect(() => { if (scrollOffset >= maxOffset)
+        setScrollOffset(maxOffset); }, [transcript.length, plan.length, maxOffset]);
     const append = useCallback((item) => { if (item.kind !== 'text' || item.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' }]);
-        }
-    }, []);
+        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' }]);
+    } }, []);
     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((prev) => { const n = new Set(prev); if (n.has(id))
+    const toggleGroup = (id) => setExpandedGroups(p => { const n = new Set(p); 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((prev) => prev.slice(1));
+            setQueuedInputs(p => p.slice(1));
             return;
         }
         if (key.pageUp || (key.ctrl && inputStr === 'u')) {
@@ -211,16 +205,16 @@ export function App(props) {
                     return;
                 if (queuedInputs.length >= 3)
                     return;
-                setQueuedInputs((prev) => [...prev, v]);
+                setQueuedInputs(p => [...p, 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) {
@@ -228,7 +222,7 @@ export function App(props) {
             if (!v)
                 return;
             setInput('');
-            setTranscript((prev) => [...prev, { id: nextId('user'), kind: 'text', text: v, role: 'user' }]);
+            setTranscript(p => [...p, { id: nextId('user'), kind: 'text', text: v, role: 'user' }]);
             streamingIdRef.current = null;
             const cmd = parseSlash(v);
             if (cmd.kind === 'prompt')
@@ -238,92 +232,71 @@ 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.27';
-    const rule = g('rule').repeat(Math.max(10, width - 2));
+    const ver = props.version ?? '0.1.36';
+    const rule = '─'.repeat(Math.max(10, width - 2));
     const cost = (status.usageInput / 1000 * 0.003 + status.usageOutput / 1000 * 0.015);
-    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.ansi.dim, children: "Message Klyro\u2026" })) : visibleGrouped.map((item) => {
+    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 => {
                                 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) ?? '';
-                                            }
-                                            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}`;
+                                    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) ?? '';
                                         }
-                                        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`;
-                                    })();
+                                        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.ansi.err : gr.status === 'running' ? tokens.ansi.warn : tokens.ansi.ok;
-                                    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: tokens.ansi.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: markerColor, children: [marker, " ", verbLine] }), _jsxs(Text, { color: tokens.ansi.dim, children: ["  ", right] })] }), isExpanded ? gr.items.map((it) => {
+                                    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 => {
                                                 let friendly = '';
                                                 try {
                                                     const a = JSON.parse(it.args);
-                                                    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);
+                                                    const p = a.path ?? '';
+                                                    friendly = p ? p.split('/').pop() ?? p : it.args.slice(0, 40);
                                                 }
                                                 catch {
                                                     friendly = it.args.slice(0, 40);
                                                 }
-                                                return (_jsxs(Box, { paddingLeft: 4, children: [_jsxs(Text, { color: tokens.ansi.guide, children: [g('end'), " "] }), _jsx(Text, { color: tokens.ansi.dim, children: friendly })] }, it.id));
+                                                return _jsx(Box, { paddingLeft: 1, children: _jsxs(Text, { color: tokens.colors.fgDim, children: ["\u2514 ", friendly] }) }, it.id);
                                             }) : null] }, gr.id));
                                 }
                                 const it = item;
                                 if (it.kind === 'text' && it.role === 'user') {
-                                    return _jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: tokens.ansi.accent, bold: true, children: [g('prompt'), " "] }), _jsx(Text, { wrap: "wrap", children: it.text })] }, it.id);
+                                    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);
                                 }
                                 if (it.kind === 'text') {
-                                    // 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.ansi.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: tokens.ansi.accent, children: [g('agentBullet'), " Klyro"] })] }), _jsx(Box, { paddingLeft: 2, flexDirection: "column", children: _jsxs(Box, { children: [_jsxs(Text, { color: tokens.ansi.dim, children: ["  ", g('guide'), "   "] }), _jsx(Box, { flexGrow: 1, children: _jsx(MarkdownText, { text: it.text }) })] }) })] }, it.id));
+                                    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));
                                 }
                                 if (it.kind === 'error')
-                                    return _jsx(Box, { paddingLeft: 2, marginBottom: 1, children: _jsxs(Text, { color: tokens.ansi.err, children: ["  ", g('guide'), "   \u2717 ", it.message] }) }, it.id);
+                                    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);
                                 if (it.kind === 'policy')
                                     return null;
                                 if (it.kind === 'file_changed')
-                                    return _jsx(Box, { paddingLeft: 2, marginBottom: 1, children: _jsxs(Text, { color: tokens.ansi.dim, children: ["  ", g('guide'), "   ", g('editsBadge'), " ", it.path, "  ", it.op] }) }, it.id);
+                                    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);
                                 if (it.kind === 'diff')
-                                    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, marginBottom: 1, children: [_jsx(Text, { bold: true, color: tokens.ansi.soft, children: it.summary ?? 'Diff' }), it.hunks.map((h, i) => (_jsxs(Box, { flexDirection: "column", marginTop: 0, children: [_jsx(Text, { color: tokens.ansi.soft, children: h.path }), h.lines.map((l, j) => (_jsxs(Text, { wrap: "wrap", color: l.kind === 'add' ? tokens.ansi.ok : l.kind === 'remove' ? tokens.ansi.err : tokens.ansi.dim, children: [l.kind === 'add' ? '+ ' : l.kind === 'remove' ? '- ' : '  ', l.text] }, j)))] }, i)))] }, it.id));
+                                    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 null;
-                            }), status.status === 'running' && !streamingIdRef.current ? (_jsxs(Box, { paddingLeft: 2, marginBottom: 1, children: [_jsxs(Text, { color: tokens.ansi.guide, children: ["  ", g('guide'), "   "] }), _jsx(Text, { color: tokens.ansi.dim, children: "Thinking..." }), _jsxs(Text, { color: tokens.ansi.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.ansi.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.ansi.guide, children: ["  ", g('guide'), "   "] }), _jsxs(Text, { color: p.status === 'done' ? tokens.ansi.ok : p.status === 'in_progress' ? tokens.ansi.accent : tokens.ansi.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.ansi.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.ansi.accent : tokens.ansi.guide, children: i === thumbPos ? '●' : '│' }, i))) })) : null] }), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: tokens.ansi.guide, children: g('rule').repeat(Math.max(10, width - 2)) }), _jsxs(Box, { children: [_jsxs(Text, { color: tokens.ansi.accent, bold: true, children: [g('prompt'), " "] }), _jsxs(Text, { wrap: "wrap", children: [input || _jsx(Text, { color: tokens.ansi.dim, children: "Message Klyro\u2026" }), "\u258F"] })] }), _jsx(Text, { color: tokens.ansi.guide, children: g('rule').repeat(Math.max(10, width - 2)) })] }), _jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Text, { color: tokens.ansi.dim, children: [baseHints, maxOffset > 0 && isFullscreen ? '  ·  PgUp/Dn scroll' : ''] }), _jsxs(Text, { color: tokens.ansi.dim, children: [cost > 0 ? `$${cost.toFixed(2)} · ` : '', ctxPct > 0 ? `${ctxPct}% ctx · ` : '', status.status === 'running' ? 'auto mode on ●' : ''] })] })] }));
+                            }), 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" })] })] })] }));
 }

package/dist/tui/app.test.js

@@ -6,8 +6,9 @@ describe('App', () => {
     it('shows the empty-state hint and the status line', () => {
         const { lastFrame } = render(_jsx(App, { initialModel: "mock", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: async () => { } }));
         const out = lastFrame();
-        expect(out).toContain('mock');
-        expect(out).toMatch(/Message Klyro|KLYRO|Type a prompt/i);
+        // design.md: top bar shows claude-code + sessions, center shows Message Klyro placeholder
+        expect(out).toMatch(/claude-code|Sessions|Message Klyro/i);
+        expect(out).toMatch(/Message Klyro|Type a message/i);
     });
     it('renders initial transcript items', () => {
         const items = [
@@ -16,7 +17,7 @@ describe('App', () => {
         const { lastFrame } = render(_jsx(App, { initialModel: "m", maxSteps: 10, cwd: "/test", onPrompt: async () => { }, onSlash: async () => { }, initialTranscript: items }));
         const frame = lastFrame();
         expect(frame).toContain('seed');
-        expect(frame).toMatch(/›|>/);
+        expect(frame).toMatch(/You|seed|›|>/);
     });
     it('honors initialStatus overrides', () => {
         const overrides = { step: 5, repairs: 3, status: 'running' };

package/dist/tui/snapshot.test.js

@@ -16,11 +16,11 @@ describe('App visual snapshot', () => {
     it('renders header + statusline + transcript + input at idle', () => {
         const { lastFrame } = render(_jsx(App, { ...DEFAULT_PROPS, initialModel: "gpt-4o-mini", maxSteps: 30, initialStatus: { status: 'idle', model: 'gpt-4o-mini', step: 0, maxSteps: 30, usageInput: 0, usageOutput: 0, repairs: 0 } }));
         const frame = lastFrame();
-        expect(frame).toContain('KLYRO');
-        expect(frame).toContain('demo');
-        expect(frame).toContain('gpt-4o-mini');
-        expect(frame).toMatch(/shift\+tab|for history|Message Klyro/);
-        expect(frame).toMatch(/KLYRO|Message Klyro|>/i);
+        // design.md: top bar shows ▌ claude-code, not KLYRO, and sessions/files
+        expect(frame).toMatch(/claude-code|KLYRO/i);
+        expect(frame).toMatch(/demo|Sessions|Files/i);
+        expect(frame).toMatch(/shift\+tab|for history|Message Klyro|Type a message/i);
+        expect(frame).toMatch(/Message Klyro|claude-code|>/i);
     });
     it('renders a transcript with assistant text', () => {
         const { lastFrame } = render(_jsx(App, { ...DEFAULT_PROPS, initialModel: "gpt-4o-mini", maxSteps: 30, initialStatus: { status: 'idle', model: 'gpt-4o-mini', step: 0, maxSteps: 30, usageInput: 0, usageOutput: 0, repairs: 0 }, initialTranscript: [

package/dist/tui/tokens.d.ts

@@ -1,38 +1,53 @@
 /**
- * §2.1 Color tokens + §2.2 Glyph set — TUI_DESIGN.md
- * Accent is Orange #E8843C (256:209, 16: yellow bold), one accent ≤5%
- * No backgrounds except diff viewer. fg.dim ≥4.5:1 on near-black.
+ * 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.
  */
 export declare const tokens: {
     readonly colors: {
-        readonly accent: "#E8843C";
-        readonly fg: "#FFFFFF";
-        readonly soft: "#F5F5F5";
-        readonly dim: "#9A9A9A";
-        readonly guide: "#3A3A3A";
-        readonly ok: "#E8843C";
-        readonly err: "#E06C6C";
-        readonly warn: "#E8843C";
-        readonly info: "#FFFFFF";
-        readonly diffAddBg: "#12250F";
-        readonly diffDelBg: "#2A1212";
+        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 ansi: {
-        readonly accent: "yellowBright";
-        readonly accentBold: "yellowBright";
-        readonly fg: "whiteBright";
-        readonly soft: "white";
+        readonly bg: "white";
+        readonly fg: "black";
+        readonly fgMuted: "gray";
         readonly dim: "gray";
-        readonly guide: "gray";
-        readonly ok: "yellowBright";
-        readonly err: "red";
-        readonly warn: "yellowBright";
-        readonly info: "white";
+        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 muted: "gray";
-        readonly success: "yellowBright";
         readonly error: "red";
-        readonly warning: "yellowBright";
+        readonly ok: "green";
+        readonly warn: "yellow";
+        readonly info: "blue";
+        readonly successAlt: "green";
     };
 };
 export declare const glyphs: {
@@ -54,15 +69,13 @@ export declare const glyphs: {
     readonly todoActive: "●";
     readonly todoDone: "✓";
     readonly todoPlan: "◇";
-    readonly modeAccept: "◐";
-    readonly modePlan: "○";
-    readonly modeAuto: "●";
-    readonly editsBadge: "✎";
-    readonly dot: "·";
-    readonly ellipsis: "…";
-    readonly meterFilled: "▰";
-    readonly meterEmpty: "▱";
-    readonly continuation: "↪";
+    readonly logoBar: "▌";
+    readonly dotFilled: "●";
+    readonly dotEmpty: "○";
+    readonly dotHalf: "◐";
+    readonly sidebar: "⊞";
+    readonly inspector: "▢";
+    readonly copy: "⧉";
     readonly brand: "◆";
     readonly compaction: "⟲";
 };
@@ -85,6 +98,10 @@ export declare const glyphAscii: {
     readonly todoActive: "[>]";
     readonly todoDone: "[x]";
     readonly todoPlan: "#";
+    readonly logoBar: "|";
+    readonly dotFilled: "*";
+    readonly dotEmpty: "o";
+    readonly dotHalf: "o";
 };
 export declare function isAsciiMode(): boolean;
 export declare function g(name: keyof typeof glyphs): string;
@@ -92,4 +109,6 @@ 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,38 +1,54 @@
 /**
- * §2.1 Color tokens + §2.2 Glyph set — TUI_DESIGN.md
- * Accent is Orange #E8843C (256:209, 16: yellow bold), one accent ≤5%
- * No backgrounds except diff viewer. fg.dim ≥4.5:1 on near-black.
+ * 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.
  */
 export const tokens = {
     colors: {
-        accent: '#E8843C', // Orange — wordmark, prompt >, ●, thumb, selected
-        fg: '#FFFFFF', // White — user input, headings, file names
-        soft: '#F5F5F5', // Soft white — assistant prose
-        dim: '#9A9A9A', // Dim white — hints, durations
-        guide: '#3A3A3A', // Guide │
-        ok: '#E8843C', // Orange for success check (white+orange theme)
-        err: '#E06C6C',
-        warn: '#E8843C', // Orange for running/spinner
-        info: '#FFFFFF',
-        diffAddBg: '#12250F',
-        diffDelBg: '#2A1212',
+        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',
     },
     ansi: {
-        accent: 'yellowBright', // #E8843C → vivid orange
-        accentBold: 'yellowBright',
-        fg: 'whiteBright', // #FFFFFF — pure white
-        soft: 'white',
+        bg: 'white',
+        fg: 'black',
+        fgMuted: 'gray',
         dim: 'gray',
-        guide: 'gray',
-        ok: 'yellowBright', // ✓ orange vivid
-        err: 'red',
-        warn: 'yellowBright', // spinner orange vivid
-        info: 'white',
+        orange: 'yellow', // #FF6B1A → 202
+        orangeBright: 'red', // fallback vivid
         border: 'gray',
+        guide: 'gray',
+        success: 'green',
+        warning: 'yellow',
+        danger: 'red',
+        accent: 'yellow',
+        accentBold: 'yellowBright',
+        soft: 'white',
         muted: 'gray',
-        success: 'yellowBright',
         error: 'red',
-        warning: 'yellowBright',
+        ok: 'green',
+        warn: 'yellow',
+        info: 'blue',
+        successAlt: 'green',
     },
 };
 export const glyphs = {
@@ -54,16 +70,13 @@ export const glyphs = {
     todoActive: '●',
     todoDone: '✓',
     todoPlan: '◇',
-    modeAccept: '◐',
-    modePlan: '○',
-    modeAuto: '●',
-    editsBadge: '✎',
-    dot: '·',
-    ellipsis: '…',
-    meterFilled: '▰',
-    meterEmpty: '▱',
-    continuation: '↪',
-    // compat
+    logoBar: '▌',
+    dotFilled: '●',
+    dotEmpty: '○',
+    dotHalf: '◐',
+    sidebar: '⊞',
+    inspector: '▢',
+    copy: '⧉',
     brand: '◆',
     compaction: '⟲',
 };
@@ -86,16 +99,17 @@ export const glyphAscii = {
     todoActive: '[>]',
     todoDone: '[x]',
     todoPlan: '#',
+    logoBar: '|',
+    dotFilled: '*',
+    dotEmpty: 'o',
+    dotHalf: 'o',
 };
 export function isAsciiMode() {
-    return (process.env.TERM === 'dumb' ||
-        process.env.KLYRO_ASCII === '1' ||
-        (process.env.LANG !== undefined && !process.env.LANG.toLowerCase().includes('utf-8')) ||
-        false);
+    return process.env.TERM === 'dumb' || process.env.KLYRO_ASCII === '1' || false;
 }
 export function g(name) {
     if (isAsciiMode())
         return glyphAscii[name] ?? glyphs[name];
     return glyphs[name];
 }
-export const spacing = { maxWidth: 120, indent: 2, gap: 1 };
+export const spacing = { maxWidth: 120, indent: 2, gap: 1, sidebar: 28, inspector: 36 };

package/package.json

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