s-app-scoder-agent 0.6.0 → 0.8.0

package/dist/tui/markdown.js

@@ -0,0 +1,229 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { theme } from "./theme.js";
+const MAX_LINE = 160;
+const MAX_CODE_LINES = 60;
+function clip(line) {
+    return line.length > MAX_LINE ? line.slice(0, MAX_LINE - 1) + "…" : line;
+}
+// ── Syntax highlighting ───────────────────────────────────────────────────────
+/** T-15: token-based syntax highlighter for TypeScript/JavaScript/JSON/shell. */
+function highlightCode(code) {
+    const kw = new Set(["const", "let", "var", "function", "async", "await", "return",
+        "if", "else", "for", "while", "do", "switch", "case", "break", "continue",
+        "try", "catch", "finally", "throw", "class", "extends", "import", "export",
+        "from", "default", "new", "typeof", "instanceof", "void", "in", "of",
+        "interface", "type", "enum", "implements", "private", "public", "protected",
+        "readonly", "abstract", "override", "declare", "namespace", "module"]);
+    const typeKw = new Set(["string", "number", "boolean", "any", "unknown", "never",
+        "null", "undefined", "void", "object", "true", "false", "Promise", "Array",
+        "Record", "Partial", "Required", "Omit", "Pick", "keyof", "infer"]);
+    return code.slice(0, MAX_CODE_LINES).map((line, i) => {
+        const parts = [];
+        const re = /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|(\b0x[\da-fA-F]+|\d+\.?\d*(?:[eE][+-]?\d+)?\b)|(\w+)/g;
+        let last = 0;
+        let k = 0;
+        let m;
+        while ((m = re.exec(line)) !== null) {
+            if (m.index > last)
+                parts.push(line.slice(last, m.index));
+            const tok = m[0];
+            if (m[1])
+                parts.push(_jsx(Text, { color: theme.code, children: tok }, `c${i}-${k++}`));
+            else if (m[2])
+                parts.push(_jsx(Text, { color: theme.thinking, children: tok }, `c${i}-${k++}`));
+            else if (m[3])
+                parts.push(_jsx(Text, { color: "magenta", children: tok }, `c${i}-${k++}`));
+            else if (kw.has(tok))
+                parts.push(_jsx(Text, { bold: true, color: "cyan", children: tok }, `c${i}-${k++}`));
+            else if (typeKw.has(tok))
+                parts.push(_jsx(Text, { color: "yellow", children: tok }, `c${i}-${k++}`));
+            else
+                parts.push(line.slice(m.index, m.index + tok.length));
+            last = m.index + tok.length;
+        }
+        if (last < line.length)
+            parts.push(line.slice(last));
+        return (_jsxs(Text, { children: [_jsxs(Text, { dimColor: true, children: [String(i + 1).padStart(3, " "), " \u2502 "] }), parts.length > 0 ? parts : line] }, i));
+    });
+}
+// ── Mermaid ASCII preview ──────────────────────────────────────────────────────
+/** T-15: parse mermaid source → compact ASCII art preview. */
+function mermaidPreview(code) {
+    const text = code.join("\n").trim();
+    const isFlowchart = /^(graph|flowchart|stateDiagram|erDiagram|gitGraph)/m.test(text);
+    const isSequence = /^sequenceDiagram/m.test(text);
+    const result = [];
+    result.push("┌─ ◉ diagram preview ──────────────────────────────────┐");
+    if (isFlowchart) {
+        const nodeMap = new Map();
+        const edges = [];
+        const nodeRe = /([A-Z][A-Za-z0-9_]*)(\[[^\]]*\]|\([^)]*\)|\{[^}]*\}|\(\([^)]*\)\))/g;
+        let m;
+        while ((m = nodeRe.exec(text)) !== null) {
+            nodeMap.set(m[1], m[2] ?? m[3] ?? m[4] ?? m[5] ?? m[1]);
+        }
+        const edgeRe = /([A-Z][A-Za-z0-9_]*)\s*(-->?|-.->|==>|<-->|===>|---)\|?([^|]+)\|?\s*([A-Z][A-Za-z0-9_]*)/g;
+        while ((m = edgeRe.exec(text)) !== null) {
+            edges.push([m[1], "", m[4]]);
+        }
+        const nodes = [...nodeMap.entries()].slice(0, 6);
+        for (const [id, label] of nodes) {
+            result.push(`│  [${id}]  ${label.slice(0, 24).padEnd(24)}            │`);
+        }
+        if (nodes.length > 0)
+            result.push("│  ─────────────────────────────────               │");
+        for (const [from, , to] of edges.slice(0, 4)) {
+            const fl = nodeMap.get(from) ?? from;
+            const tl = nodeMap.get(to) ?? to;
+            result.push(`│  ${fl.slice(0, 8)}  →  ${tl.slice(0, 8).padEnd(8)}              │`);
+        }
+    }
+    else if (isSequence) {
+        const parts = [];
+        const partRe = /(?:participant|actor)\s+(\w+)/gi;
+        let m;
+        while ((m = partRe.exec(text)) !== null)
+            parts.push(m[1]);
+        if (parts.length > 0)
+            result.push(`│  participants: ${parts.slice(0, 5).join(", ")}               │`);
+        result.push("│  ─────────────────────────────────               │");
+        const msgRe = /([\w]+)\s+(?:->|-->|-.>|=>)\s+([\w]+)(?:\s*:\s*(.*))?/gi;
+        while ((m = msgRe.exec(text)) !== null) {
+            if (result.length >= 10) {
+                result.push("│  … (more messages)                              │");
+                break;
+            }
+            const from = (m[1] ?? "").slice(0, 8), to = (m[2] ?? "").slice(0, 8), msg = (m[3] ?? "").slice(0, 20);
+            result.push(`│  ${from} → ${to.padEnd(8)} : ${msg}          │`);
+        }
+    }
+    else {
+        result.push("│  ◈ mermaid diagram                                  │");
+        result.push("│  (run: npx @mermaid-js/mermaid-cli -i <file>)     │");
+    }
+    result.push("└─────────────────────────────────────────────────────┘");
+    return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: result.map((l, i) => (_jsx(Text, { color: theme.mermaid, children: i === 0 || i === result.length - 1 ? _jsx(Text, { bold: true, children: l }) : l }, i))) }));
+}
+/** Render inline markdown tokens as nested Ink <Text> elements. */
+function renderInline(text, keyPrefix) {
+    const parts = [];
+    const re = /(`[^`\n]+`)|(\*\*[^*\n]+\*\*)|(\[[^\]\n]+\]\([^)\n]+\))/g;
+    let last = 0;
+    let k = 0;
+    let m;
+    while ((m = re.exec(text)) !== null) {
+        if (m.index > last)
+            parts.push(text.slice(last, m.index));
+        const tok = m[0];
+        if (tok.startsWith("`")) {
+            parts.push(_jsx(Text, { color: theme.code, children: tok.slice(1, -1) }, `${keyPrefix}-c${k++}`));
+        }
+        else if (tok.startsWith("**")) {
+            parts.push(_jsx(Text, { bold: true, children: tok.slice(2, -2) }, `${keyPrefix}-b${k++}`));
+        }
+        else {
+            const lm = /\[([^\]]+)\]\(([^)]+)\)/.exec(tok);
+            if (lm) {
+                parts.push(_jsxs(Text, { children: [_jsx(Text, { color: "blue", children: lm[1] }), _jsxs(Text, { dimColor: true, children: [" (", lm[2], ")"] })] }, `${keyPrefix}-l${k++}`));
+            }
+        }
+        last = m.index + tok.length;
+    }
+    if (last < text.length)
+        parts.push(text.slice(last));
+    return parts;
+}
+export function Markdown({ text }) {
+    const lines = text.split("\n");
+    const blocks = [];
+    let i = 0;
+    let key = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        // Fenced code block
+        if (line.startsWith("```")) {
+            const lang = line.slice(3).trim().toLowerCase();
+            const code = [];
+            i++;
+            while (i < lines.length && !lines[i].startsWith("```"))
+                code.push(lines[i++]);
+            i++; // consume closing fence (or EOF)
+            // T-15: mermaid diagram → visual ASCII preview
+            if (lang === "mermaid" && code.length > 0) {
+                blocks.push(_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "  \u25C9 mermaid diagram" }), mermaidPreview(code)] }, key++));
+                continue;
+            }
+            // T-15: syntax-highlighted code block
+            blocks.push(_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border, paddingX: 1, marginTop: 1, children: [lang && _jsx(Text, { dimColor: true, bold: true, children: lang }), code.length === 0 ? (_jsx(Text, { dimColor: true, children: "(empty)" })) : (highlightCode(code)), code.length > MAX_CODE_LINES && (_jsxs(Text, { dimColor: true, children: ["  \u2026 +", code.length - MAX_CODE_LINES, " more lines"] }))] }, key++));
+            continue;
+        }
+        // Headers
+        const h = /^(#{1,4})\s+(.*)$/.exec(line);
+        if (h) {
+            blocks.push(_jsx(Text, { bold: true, color: h[1].length <= 2 ? "magenta" : "cyan", children: renderInline(h[2], `h${key}`) }, key++));
+            i++;
+            continue;
+        }
+        // Table (GFM): header | separator | rows — collect the whole block.
+        if (/^\s*\|.*\|\s*$/.test(line) && i + 1 < lines.length && /^\s*\|[\s:|-]+\|\s*$/.test(lines[i + 1])) {
+            const MAX_CELL = 40;
+            const parseRow = (l) => l.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((c) => c.trim());
+            const header = parseRow(line);
+            i += 2; // header + separator
+            const rows = [];
+            while (i < lines.length && /^\s*\|.*\|\s*$/.test(lines[i]))
+                rows.push(parseRow(lines[i++]));
+            // Column widths (bounded — wide cells clip via clip()).
+            const widths = header.map((h, c) => Math.min(MAX_CELL, Math.max(h.length, ...rows.map((r) => (r[c] ?? "").length))));
+            const renderRow = (cells, chars, color, bold, rowKey) => {
+                const line = chars.l + cells.map((c, ci) => (c.length > widths[ci] ? c.slice(0, widths[ci] - 1) + "…" : c).padEnd(widths[ci], " ")).join(chars.m) + chars.r;
+                return _jsx(Text, { color: color, bold: bold, children: clip(line) }, rowKey);
+            };
+            blocks.push(_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [renderRow(header, { l: "┌ ", m: " ┬ ", r: " ┐" }, undefined, true, `th${key}`), renderRow(header.map(() => ""), { l: "├", m: "┼", r: "┤" }, "gray", false, `ts${key}`), rows.map((r, ri) => renderRow(r, { l: "│ ", m: " │ ", r: " │" }, undefined, false, `tr${key}-${ri}`))] }, key++));
+            continue;
+        }
+        // Bullets + task lists: - [ ] pending · - [x] completed
+        const b = /^(\s*)[-*]\s+(.*)$/.exec(line);
+        if (b) {
+            const body = b[2];
+            const taskMatch = /^\[([ xX])\]\s+(.*)$/.exec(body);
+            const indent = "  ".repeat(Math.floor(b[1].length / 2));
+            if (taskMatch) {
+                const checked = taskMatch[1].toLowerCase() === "x";
+                const taskBody = taskMatch[2];
+                blocks.push(_jsxs(Text, { children: [_jsxs(Text, { color: theme.accent, children: [indent, checked ? "☑" : "☐", " "] }), checked
+                            ? _jsx(Text, { dimColor: true, strikethrough: true, children: renderInline(taskBody, `b${key}`) })
+                            : renderInline(taskBody, `b${key}`)] }, key++));
+            }
+            else {
+                blocks.push(_jsxs(Text, { children: [_jsxs(Text, { color: theme.accent, children: [indent, "\u2022 "] }), renderInline(body, `b${key}`)] }, key++));
+            }
+            i++;
+            continue;
+        }
+        // Numbered list — keep the numbering as-is; nested indent preserved.
+        const n = /^(\s*)(\d+\.)\s+(.*)$/.exec(line);
+        if (n) {
+            const indent = "  ".repeat(Math.floor(n[1].length / 2));
+            blocks.push(_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: indent }), renderInline(`${n[2]} ${n[3]}`, `n${key}`)] }, key++));
+            i++;
+            continue;
+        }
+        // Quote
+        if (/^>\s?/.test(line)) {
+            blocks.push(_jsxs(Text, { dimColor: true, children: [_jsx(Text, { color: theme.dim, children: "\u2502" }), " ", _jsx(Text, { italic: true, children: clip(line.replace(/^>\s?/, "")) })] }, key++));
+            i++;
+            continue;
+        }
+        // Blank line → single spacer
+        if (line.trim() === "") {
+            blocks.push(_jsx(Text, { children: " " }, key++));
+            i++;
+            continue;
+        }
+        blocks.push(_jsx(Text, { children: renderInline(clip(line), `t${key}`) }, key++));
+        i++;
+    }
+    return _jsx(Box, { flexDirection: "column", children: blocks });
+}

package/dist/tui/mouse.js

@@ -0,0 +1,20 @@
+/**
+ * T5: mouse wheel (SGR 1006) — parse từ stdin raw chunk.
+ * Module thuần; TuiApp attach listener qua useStdin().
+ */
+/** `\x1b[<64;x;yM` = wheel up, `\x1b[<65;...` = wheel down (SGR mode). */
+export function parseWheel(chunk) {
+    // eslint-disable-next-line no-control-regex -- matching the ESC control sequence is the whole point here
+    const m = /\x1b\[<(\d+);\d+;\d+[Mm]/.exec(chunk);
+    if (!m)
+        return null;
+    const btn = Number(m[1]);
+    if (btn === 64)
+        return "up";
+    if (btn === 65)
+        return "down";
+    return null;
+}
+/** Bật/tắt mouse tracking (SGR 1000 + 1006) — chỉ khi alt-screen TTY. */
+export const MOUSE_ENABLE = "\x1b[?1000h\x1b[?1006h";
+export const MOUSE_DISABLE = "\x1b[?1000l\x1b[?1006l";

package/dist/tui/permission-modal.js

@@ -0,0 +1,34 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * T2/T3: PermissionModal — khối modal permission_request. T3: full unified
+ * diff có màu (DiffLine), scroll được (pageUp/pageDown do TuiApp điều phối
+ * qua useInput chung), không cắt cứng 12 dòng.
+ */
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { DiffLine } from "./chat-views.js";
+import { theme } from "./theme.js";
+const MODAL_DIFF_WINDOW = 20; // rows hiển thị cùng lúc; scroll bằng pgup/pgdn
+/**
+ * Permission request modal — elevated visual with a bold colored header
+ * bar, the command preview, a scrollable diff (if any), and the key legend.
+ */
+export function PermissionModal({ prompt }) {
+    const [offset, setOffset] = useState(0);
+    const lines = prompt.diff ? prompt.diff.split("\n") : [];
+    useInput((_input, key) => {
+        if (key.pageUp)
+            setOffset((o) => Math.min(o + MODAL_DIFF_WINDOW, Math.max(0, lines.length - 1)));
+        if (key.pageDown)
+            setOffset((o) => Math.max(0, o - MODAL_DIFF_WINDOW));
+        if (key.home)
+            setOffset(lines.length); // top (clamped below)
+        if (key.end)
+            setOffset(0); // bottom
+    });
+    const start = Math.max(0, Math.min(offset, Math.max(0, lines.length - MODAL_DIFF_WINDOW)));
+    const shown = lines.slice(start, start + MODAL_DIFF_WINDOW);
+    const hasMoreAbove = start > 0;
+    const hasMoreBelow = start + MODAL_DIFF_WINDOW < lines.length;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "bold", borderColor: theme.warn, paddingX: 1, paddingY: 1, children: [_jsxs(Box, { justifyContent: "space-between", marginBottom: 1, children: [_jsxs(Text, { color: theme.warn, bold: true, children: ["\u26A0 permission \u2014 ", prompt.kind] }), _jsxs(Text, { dimColor: true, children: ["timeout ", prompt.timeoutSecs, "s \u2192 deny"] })] }), _jsx(Text, { bold: true, children: prompt.label }), prompt.diff && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [hasMoreAbove && _jsxs(Text, { dimColor: true, children: ["\u2191 ", start, " earlier lines"] }), shown.map((l, i) => (_jsx(DiffLine, { line: l.length > 160 ? l.slice(0, 160) + "…" : l }, start + i))), hasMoreBelow && (_jsxs(Text, { dimColor: true, children: ["\u2193 ", lines.length - start - MODAL_DIFF_WINDOW, " more lines"] }))] })), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "─".repeat(28) }), _jsx(Text, { dimColor: true, children: "  y \u00B7 a \u00B7 n \u00B7 q  to answer" }), prompt.diff && _jsx(Text, { dimColor: true, children: "  pgup \u00B7 pgdn \u00B7 home \u00B7 end  scroll diff" })] })] }));
+}

package/dist/tui/review.js

@@ -0,0 +1,64 @@
+/** Process one MCP gate response — returns notice + optional next call. */
+export function reviewFromResponse(prev, tool, args, r) {
+    const err = (text, level = "error") => ({ ok: false, notice: { text, level }, nextCall: null, state: null });
+    if (!r.ok)
+        return err(`prompt gate error: ${r.output.slice(0, 500)}`);
+    const sc = (r.structured ?? {});
+    const status = typeof sc.status === "string" ? sc.status : null;
+    if (status === "pending_level_selection") {
+        return {
+            ok: true,
+            notice: {
+                text: "Which rewrite level?\n  [1] light — minimal, close to original\n  [2] balanced — structure + context + criteria\n  [3] detailed — full spec with acceptance criteria\nReply 1, 2 or 3.",
+                level: "info",
+            },
+            nextCall: null,
+            state: { stage: "level", tool, argsBase: args },
+        };
+    }
+    if (status === "pending_user_selection") {
+        const rewritten = typeof sc.rewritten_prompt === "string" ? sc.rewritten_prompt : "";
+        return {
+            ok: true,
+            notice: {
+                text: `--- ORIGINAL ---\n${String(sc.original_prompt ?? "(missing)")}\n\n--- REWRITTEN ---\n${rewritten}\n\nWhich should be used?\n  [1] original\n  [2] rewritten\n  [3] update — describe changes, rewrite again\n  [4] cancel\nReply 1-4 (or 3 + your changes).`,
+                level: "info",
+            },
+            nextCall: null,
+            state: { stage: "selection", tool, argsBase: args, rewrittenPrompt: rewritten },
+        };
+    }
+    if (status === "approved")
+        return { ok: true, notice: { text: `✔ prompt approved:\n${String(sc.selected_prompt ?? "")}`, level: "info" }, nextCall: null, state: null };
+    if (status === "cancelled")
+        return { ok: true, notice: { text: "⏹ prompt gate cancelled — nothing approved.", level: "info" }, nextCall: null, state: null };
+    return err(`prompt gate: unexpected status ${status ?? "(none)"}\n${r.output.slice(0, 500)}`, "warn");
+}
+/** Handle a user reply while /review is waiting (numbers 1-4 / feedback text). */
+export function reviewAnswerToCall(rv, text) {
+    const m = /^([1-4])(?:\s+([\s\S]+))?$/.exec(text.trim());
+    if (rv.stage === "level") {
+        if (!m)
+            return { notice: { text: "reply 1, 2 or 3 to pick the rewrite level", level: "warn" }, nextCall: null };
+        const levels = ["light", "balanced", "detailed"];
+        return { notice: null, nextCall: { tool: rv.tool, args: { ...rv.argsBase, rewrite_level: levels[Number(m[1]) - 1] } } };
+    }
+    // stage === "selection"
+    if (!m)
+        return { notice: { text: "reply 1-4 (or 3 + your requested changes)", level: "warn" }, nextCall: null };
+    const n = m[1];
+    if (n === "3") {
+        const feedback = m[2]?.trim();
+        if (!feedback)
+            return { notice: { text: "update needs your requested changes: 3 <what to change>", level: "warn" }, nextCall: null };
+        return { notice: null, nextCall: { tool: rv.tool, args: { ...rv.argsBase, selection: "update", feedback, rewritten_prompt: rv.rewrittenPrompt } } };
+    }
+    const selection = n === "1" ? "original" : n === "2" ? "rewritten" : "cancel";
+    return {
+        notice: null,
+        nextCall: {
+            tool: rv.tool,
+            args: { ...rv.argsBase, selection, ...(selection === "rewritten" ? { rewritten_prompt: rv.rewrittenPrompt } : {}) },
+        },
+    };
+}

package/dist/tui/session-picker.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Session Picker Modal — keyboard-navigable list of saved sessions.
+ *
+ * Opens via "/" when the agent is idle (no task running).
+ * ↑/↓ navigate, Enter select, Esc cancel.
+ *
+ * Shows: id (truncated), task, date, step count, build status.
+ */
+import { useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { listSessions } from "../session.js";
+import { theme, fit } from "./theme.js";
+const DISPLAY_LIMIT = 12;
+export function SessionPicker({ workdir, onSelect, onClose }) {
+    const [sessions, setSessions] = useState([]);
+    const [selected, setSelected] = useState(0);
+    useEffect(() => {
+        const all = listSessions(workdir).slice(0, DISPLAY_LIMIT);
+        setSessions(all);
+        setSelected(0);
+    }, [workdir]);
+    // Keyboard navigation — captures everything while the picker is open.
+    useInput((_input, key) => {
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (key.upArrow) {
+            setSelected((s) => Math.max(0, s - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setSelected((s) => Math.min(sessions.length - 1, s + 1));
+            return;
+        }
+        if (key.return) {
+            if (sessions.length > 0) {
+                onSelect(sessions[selected]);
+            }
+            return;
+        }
+        // Vim-style j/k navigation
+        if (_input === "k" && !key.ctrl && !key.meta) {
+            setSelected((s) => Math.max(0, s - 1));
+            return;
+        }
+        if (_input === "j" && !key.ctrl && !key.meta) {
+            setSelected((s) => Math.min(sessions.length - 1, s + 1));
+            return;
+        }
+        // Quick-jump by number (1-9 selects that entry)
+        const n = parseInt(_input, 10);
+        if (n >= 1 && n <= sessions.length) {
+            setSelected(n - 1);
+            return;
+        }
+    });
+    if (sessions.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.brand, paddingX: 1, paddingY: 1, children: [_jsx(Text, { color: theme.brand, bold: true, children: "\u2190 saved sessions" }), _jsx(Text, { dimColor: true, children: "no saved sessions found" }), _jsx(Text, { dimColor: true, children: "esc to close" })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.brand, paddingX: 1, paddingY: 1, children: [_jsxs(Box, { justifyContent: "space-between", marginBottom: 1, children: [_jsx(Text, { color: theme.brand, bold: true, children: "\u2190 saved sessions" }), _jsxs(Text, { dimColor: true, children: [sessions.length, " session", sessions.length !== 1 ? "s" : ""] })] }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "─".repeat(38) }) }), sessions.map((s, i) => {
+                const isSelected = i === selected;
+                const idPart = s.id.slice(0, 14);
+                const dateStr = s.updatedAt ? s.updatedAt.slice(0, 16).replace("T", " ") : "—";
+                return (_jsxs(Box, { flexDirection: "column", paddingLeft: isSelected ? 0 : 1, children: [_jsxs(Text, { color: isSelected ? theme.brand : theme.dim, bold: isSelected, dimColor: !isSelected, children: [isSelected ? "▸" : " ", " ", _jsx(Text, { bold: isSelected, color: isSelected ? theme.accent : theme.dim, children: idPart }), " ", _jsx(Text, { dimColor: true, children: dateStr }), " ", _jsxs(Text, { dimColor: true, children: ["\u00B7 ", s.steps, " steps"] })] }), _jsxs(Text, { dimColor: !isSelected, color: isSelected ? theme.user : undefined, bold: isSelected, children: [isSelected ? "  " : "   ", fit(s.task, 36)] })] }, s.id));
+            }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "─".repeat(38) }) }), _jsx(Text, { dimColor: true, children: "\u2191\u2193 / jk  navigate \u00B7 enter select \u00B7 esc close" }), _jsxs(Text, { dimColor: true, children: ["quick-jump: press 1-", Math.min(sessions.length, 9), " to jump"] })] }));
+}

package/dist/tui/sidebar.js

@@ -0,0 +1,99 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { contextWindowFor } from "../model-catalog.js";
+import { resolveModelPricing } from "../constants.js";
+import { latestPlan } from "./state.js";
+import { fit, theme } from "./theme.js";
+import { fuelGauge, gaugeColor, SIDEBAR_WIDTH } from "./chrome.js";
+const INNER = SIDEBAR_WIDTH - 4; // border + paddingX
+const MAX_PLAN_ROWS = 14; // cap chiều cao — plan dài thì gộp "+N more"
+function Section({ title, children }) {
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, flexShrink: 0, children: [_jsxs(Text, { dimColor: true, bold: true, children: ["\u2500 ", title] }), children] }));
+}
+function SectionLine({ label, value, color }) {
+    return (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { dimColor: true, children: ["  ", fit(label, 8), " "] }), _jsx(Text, { color: color, children: value })] }));
+}
+// ── Session ──────────────────────────────────────────────────────────────────
+function SessionSection({ state, config }) {
+    const model = state.model || config.model || "—";
+    const dir = config.workdir.split("/").filter(Boolean).pop() ?? config.workdir;
+    return (_jsxs(Section, { title: "SESSION", children: [_jsx(SectionLine, { label: "model", value: fit(model, INNER - 9) }), _jsx(SectionLine, { label: "dir", value: fit(dir, INNER - 9) })] }));
+}
+function PlanRow({ t, width }) {
+    if (t.status === "completed") {
+        return (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: theme.success, children: "  \u2714 " }), _jsx(Text, { color: theme.success, dimColor: true, children: fit(t.content, width - 4) })] }));
+    }
+    if (t.status === "in_progress") {
+        return (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: theme.accent, children: "  \u25C6 " }), _jsx(Text, { color: theme.accent, bold: true, children: fit(t.content, width - 4) })] }));
+    }
+    return (_jsxs(Text, { wrap: "truncate", dimColor: true, children: ["  ○ ", fit(t.content, width - 4)] }));
+}
+function PlanSection({ state }) {
+    const plan = latestPlan(state.items);
+    return (_jsx(Section, { title: "PLAN", children: !plan || plan.items.length === 0 ? (_jsx(Text, { dimColor: true, children: "  no plan yet" })) : (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [(() => {
+                    const done = plan.items.filter((t) => t.status === "completed").length;
+                    return _jsxs(Text, { children: ["  ", _jsx(Text, { bold: true, children: done }), _jsxs(Text, { dimColor: true, children: ["/", plan.items.length, " steps"] })] });
+                })(), plan.items.slice(0, MAX_PLAN_ROWS).map((t, i) => (_jsx(PlanRow, { t: t, width: INNER }, i))), plan.items.length > MAX_PLAN_ROWS && (_jsxs(Text, { dimColor: true, children: ["  \u2026 +", plan.items.length - MAX_PLAN_ROWS, " more"] }))] })) }));
+}
+// ── Metrics (tok/s · ctx · cost · elapsed · fuel gauge · guardrails) ─────────
+function MetricsSection({ state }) {
+    const fmt = (n) => (n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n));
+    const hasUsage = state.usage.calls > 0;
+    const elapsedMs = state.startedAt ? (state.endedAt ?? Date.now()) - state.startedAt : null;
+    const elapsedSec = elapsedMs != null ? Math.floor(elapsedMs / 1000) : null;
+    const gauge = fuelGauge(state.step, state.maxSteps);
+    const cost = (state.usage.inputTokens / 1_000_000) * resolveModelPricing(state.model).input +
+        (state.usage.outputTokens / 1_000_000) * resolveModelPricing(state.model).output;
+    // tok/s: output tokens / giây thô (chưa floor — 0.6s run đầu vẫn ra số).
+    const tokPerSec = hasUsage && elapsedMs != null && elapsedMs > 500
+        ? Math.round(state.usage.outputTokens / (elapsedMs / 1000))
+        : null;
+    // Live estimate based on accumulated streaming chars (chars / ~4 ≈ tokens).
+    const liveTokPerSec = state.streamingOutputChars > 0 && elapsedMs != null && elapsedMs > 500
+        ? Math.round((state.streamingOutputChars / 4) / (elapsedMs / 1000))
+        : null;
+    const win = contextWindowFor(state.provider, state.model);
+    const ctxPct = hasUsage && win > 0 ? Math.round((state.usage.inputTokens / win) * 100) : null;
+    // ctx giờ hiển thị đủ số: `input/ctxWin (pct%)`.
+    const ctxFmt = (n) => (n >= 1000 ? `${(n / 1000).toFixed(0)}k` : String(n));
+    const ctxDisplay = ctxPct != null
+        ? `${ctxFmt(state.usage.inputTokens)}/${ctxFmt(win)} (${ctxPct}%)`
+        : null;
+    return (_jsx(Section, { title: "METRICS", children: !hasUsage && elapsedSec == null ? (_jsx(Text, { dimColor: true, children: "  starting\u2026" })) : (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [gauge && (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { dimColor: true, children: "  steps " }), _jsx(Text, { color: gaugeColor(state.step, state.maxSteps), children: gauge }), _jsxs(Text, { dimColor: true, children: [" ", state.step, "/", state.maxSteps] })] })), hasUsage && (_jsx(SectionLine, { label: "toks", value: `${fmt(state.usage.inputTokens)} → ${fmt(state.usage.outputTokens)}` })), tokPerSec != null && (_jsx(SectionLine, { label: "speed", value: `${fmt(tokPerSec)} tok/s`, color: theme.accent })), liveTokPerSec != null && tokPerSec == null && (_jsx(SectionLine, { label: "speed", value: `~${fmt(liveTokPerSec)} tok/s`, color: theme.accent })), ctxDisplay != null && _jsx(SectionLine, { label: "ctx", value: ctxDisplay }), cost > 0 && _jsx(SectionLine, { label: "cost", value: `$${cost < 0.01 ? cost.toFixed(4) : cost.toFixed(2)}` }), elapsedSec != null && (_jsx(SectionLine, { label: "elapsed", value: `${Math.floor(elapsedSec / 60)}:${String(elapsedSec % 60).padStart(2, "0")}` })), state.usage.cachedTokens > 0 && (_jsx(SectionLine, { label: "cached", value: fmt(state.usage.cachedTokens) })), state.guardrailCount > 0 && (_jsx(SectionLine, { label: "guard", value: String(state.guardrailCount), color: theme.warn }))] })) }));
+}
+// ── Phases (plan › explore › edit › build › verify — vertical) ───────────────
+const PHASES = ["plan", "explore", "edit", "build", "verify"];
+function PhaseSection({ state }) {
+    if (state.phases.length === 0) {
+        return (_jsx(Section, { title: "PHASES", children: _jsx(Text, { dimColor: true, children: "  \u2014 idle" }) }));
+    }
+    const current = state.phases[state.phases.length - 1];
+    return (_jsx(Section, { title: "PHASES", children: _jsx(Box, { flexDirection: "column", flexShrink: 0, children: PHASES.map((p) => {
+                const visited = state.phases.includes(p);
+                const isCurrent = p === current;
+                return (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { dimColor: true, children: "  " }), isCurrent ? (_jsxs(Text, { color: theme.accent, bold: true, children: ["\u25C6 ", p] })) : visited ? (_jsxs(Text, { color: theme.success, children: ["\u2714 ", p] })) : (_jsxs(Text, { dimColor: true, children: ["\u00B7 ", p] }))] }, p));
+            }) }) }));
+}
+// ── Build (lamp + command) ───────────────────────────────────────────────────
+function BuildSection({ state, config }) {
+    const lampLabel = state.buildLamp === "ok" ? "build ok" : state.buildLamp === "fail" ? "build fail" : "no build yet";
+    const lampColor = state.buildLamp === "ok" ? theme.success : state.buildLamp === "fail" ? theme.error : theme.dim;
+    const cmd = state.buildCmd || config.buildCmd || null;
+    return (_jsxs(Section, { title: "BUILD", children: [_jsx(Text, { wrap: "truncate", children: _jsxs(Text, { color: lampColor, children: ["  \u25CF ", lampLabel] }) }), cmd && _jsxs(Text, { dimColor: true, wrap: "truncate", children: ["  ", fit(cmd, INNER)] })] }));
+}
+// ── MCP (trạng thái từng server — từ event mcp_status structured) ────────────
+function McpSection({ state, config }) {
+    const names = Object.keys(config.mcpServers ?? {});
+    return (_jsx(Section, { title: "MCP", children: names.length === 0 ? (_jsx(Text, { dimColor: true, children: "  none configured" })) : (_jsx(Box, { flexDirection: "column", flexShrink: 0, children: names.map((n) => {
+                const st = state.mcpServers[n] ?? "waiting";
+                const color = st === "ready" ? theme.success : st === "dead" ? theme.error : st === "waiting" ? theme.dim : theme.warn;
+                const mark = st === "ready" ? "●" : st === "dead" ? "✘" : "◐";
+                const budget = Math.max(6, INNER - 3 - st.length - 1);
+                return (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { color: color, children: ["  ", mark, " "] }), _jsx(Text, { color: color, children: fit(n, budget) }), _jsxs(Text, { dimColor: true, children: [" ", st] })] }, n));
+            }) })) }));
+}
+// ── Root ─────────────────────────────────────────────────────────────────────
+/** Sidebar phải — mọi trạng thái sống của run, cập nhật theo AgentEvent. */
+export function Sidebar({ state, config }) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.border, width: SIDEBAR_WIDTH, paddingX: 1, flexShrink: 0, overflow: "hidden", children: [_jsx(SessionSection, { state: state, config: config }), _jsx(MetricsSection, { state: state }), _jsx(PhaseSection, { state: state }), _jsx(BuildSection, { state: state, config: config }), _jsx(McpSection, { state: state, config: config }), _jsx(PlanSection, { state: state })] }));
+}