s-app-scoder-agent 0.9.3 → 0.9.6

package/dist/tui/markdown.js

@@ -1,387 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from "ink";
-import { theme } from "./theme.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "ink";
+import { parseMarkdown } from "./markdown/parse.js";
+import { renderBlock } from "./markdown/render.js";
+export { parseChartSpec, parseTimelineSpec, } from "./markdown/diagram.js";
+export { parseMarkdown } from "./markdown/parse.js";
+export { tokenizeInline, inlineToPlain } from "./markdown/inline.js";
 const DEFAULT_WIDTH = 100;
-const MAX_CODE_LINES = 60;
-function clip(line, width = DEFAULT_WIDTH) {
-    const safeWidth = Math.max(8, width);
-    return line.length > safeWidth ? line.slice(0, safeWidth - 1) + "…" : line;
-}
 function contentWidth(width) {
     return Math.max(32, Math.floor(width ?? DEFAULT_WIDTH));
 }
-function scalar(value) {
-    if (value == null)
-        return "";
-    return typeof value === "string" ? value.trim() : String(value);
-}
-/** Parse JSON or the intentionally small line format accepted by chart fences. */
-export function parseChartSpec(source, language = "chart") {
-    const raw = source.trim();
-    if (!raw)
-        return null;
-    let parsed;
-    try {
-        parsed = JSON.parse(raw);
-    }
-    catch {
-        parsed = null;
-    }
-    const object = parsed && typeof parsed === "object" && !Array.isArray(parsed)
-        ? parsed
-        : {};
-    const typeRaw = scalar(object.type) || language.split(/[:\s]+/)[1] || "bar";
-    const type = typeRaw.toLowerCase();
-    const rows = Array.isArray(parsed)
-        ? parsed
-        : Array.isArray(object.data) ? object.data : [];
-    const data = rows.flatMap((row, index) => {
-        if (Array.isArray(row)) {
-            const value = Number(row[1]);
-            return Number.isFinite(value) ? [{ label: scalar(row[0]) || String(index + 1), value }] : [];
-        }
-        if (row && typeof row === "object") {
-            const r = row;
-            const value = Number(r.value ?? r.y ?? r.amount);
-            return Number.isFinite(value) ? [{ label: scalar(r.label ?? r.name ?? r.x) || String(index + 1), value }] : [];
-        }
-        return [];
-    });
-    // Friendly fallback: `label | value` or `label, value` per line.
-    if (data.length === 0) {
-        for (const [index, line] of raw.split("\n").entries()) {
-            if (!line.trim() || /^(type|title|data)\s*:/i.test(line))
-                continue;
-            const parts = line.split(/\s*[|,]\s*/);
-            const value = Number(parts.at(-1));
-            if (parts.length >= 2 && Number.isFinite(value))
-                data.push({ label: parts.slice(0, -1).join(" ").trim() || String(index + 1), value });
-        }
-    }
-    if (data.length === 0 || !["bar", "line", "pie"].includes(type))
-        return null;
-    const title = scalar(object.title);
-    return {
-        type: type,
-        ...(title ? { title } : {}),
-        data: data.slice(0, 40),
-    };
-}
-/** Parse JSON or `time | title | detail | status` timeline rows. */
-export function parseTimelineSpec(source) {
-    const raw = source.trim();
-    if (!raw)
-        return [];
-    let parsed;
-    try {
-        parsed = JSON.parse(raw);
-    }
-    catch {
-        parsed = null;
-    }
-    const rows = Array.isArray(parsed)
-        ? parsed
-        : parsed && typeof parsed === "object" && Array.isArray(parsed.events)
-            ? parsed.events
-            : [];
-    const events = rows.flatMap((row) => {
-        if (!row || typeof row !== "object")
-            return [];
-        const r = row;
-        const title = scalar(r.title ?? r.name ?? r.event);
-        if (!title)
-            return [];
-        const status = scalar(r.status).toLowerCase();
-        return [{
-                time: scalar(r.time ?? r.date ?? r.timestamp),
-                title,
-                detail: scalar(r.detail ?? r.description ?? r.body) || undefined,
-                status: ["done", "active", "pending", "error"].includes(status) ? status : undefined,
-            }];
-    });
-    if (events.length > 0)
-        return events.slice(0, 40);
-    return raw.split("\n").flatMap((line) => {
-        const trimmed = line.replace(/^[-*]\s*/, "").trim();
-        if (!trimmed)
-            return [];
-        const parts = trimmed.split(/\s*\|\s*/);
-        if (parts.length < 2)
-            return [];
-        const status = parts[3]?.toLowerCase();
-        return [{ time: parts[0], title: parts[1], detail: parts[2] || undefined,
-                status: ["done", "active", "pending", "error"].includes(status) ? status : undefined }];
-    }).slice(0, 40);
-}
-// ── Syntax highlighting ───────────────────────────────────────────────────────
-/** T-15: token-based syntax highlighter for TypeScript/JavaScript/JSON/shell. */
-function highlightCode(code, width = DEFAULT_WIDTH) {
-    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"]);
-    const codeWidth = Math.max(8, width - 6);
-    return code.slice(0, MAX_CODE_LINES).map((sourceLine, i) => {
-        const line = clip(sourceLine, codeWidth);
-        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))) }));
-}
-function chartPreview(spec, width) {
-    const chartWidth = Math.max(24, Math.min(72, width - 8));
-    const max = Math.max(...spec.data.map((p) => Math.abs(p.value)), 1);
-    const min = Math.min(...spec.data.map((p) => p.value), 0);
-    const range = Math.max(1, max - min);
-    const labelWidth = Math.min(14, Math.max(4, ...spec.data.map((p) => p.label.length)));
-    const plotWidth = Math.max(12, chartWidth - labelWidth - 10);
-    const title = spec.title ? ` ${spec.title} ` : ` ${spec.type} chart `;
-    const rows = spec.data.map((point, index) => {
-        const ratio = (point.value - min) / range;
-        const filled = Math.max(0, Math.min(plotWidth, Math.round(ratio * plotWidth)));
-        const bar = "█".repeat(filled) + "░".repeat(plotWidth - filled);
-        const marker = spec.type === "line" ? (index === 0 ? "╭" : index === spec.data.length - 1 ? "╰" : "│") : "▌";
-        return ` ${point.label.slice(0, labelWidth).padEnd(labelWidth)} ${marker}${bar} ${String(point.value)}`;
-    });
-    if (spec.type === "pie") {
-        const total = spec.data.reduce((sum, p) => sum + Math.max(0, p.value), 0) || 1;
-        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: theme.table, bold: true, children: ["\u250C\u2500", title, "─".repeat(Math.max(0, chartWidth - title.length - 2)), "\u2510"] }), spec.data.map((p, i) => {
-                    const pct = Math.round((Math.max(0, p.value) / total) * 100);
-                    const pieBarWidth = Math.max(1, chartWidth - labelWidth - 9);
-                    const pieBar = "█".repeat(Math.min(pieBarWidth, Math.max(1, Math.round((pct / 100) * pieBarWidth))));
-                    return _jsxs(Text, { color: theme.code, children: ["\u2502 ", p.label.slice(0, labelWidth).padEnd(labelWidth), " ", String(pct).padStart(3), "% ", pieBar.padEnd(pieBarWidth, " ")] }, i);
-                }), _jsxs(Text, { color: theme.table, bold: true, children: ["\u2514", "─".repeat(chartWidth), "\u2518"] })] }));
-    }
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: theme.table, bold: true, children: ["\u250C\u2500", title, "─".repeat(Math.max(0, chartWidth - title.length - 2)), "\u2510"] }), rows.map((row, i) => _jsxs(Text, { color: theme.code, children: ["\u2502", row] }, i)), _jsxs(Text, { color: theme.table, bold: true, children: ["\u2514", "─".repeat(chartWidth), "\u2518"] })] }));
-}
-function timelinePreview(events, width) {
-    const detailWidth = Math.max(16, width - 18);
-    const icon = (status) => status === "done" ? "✓" : status === "error" ? "✗" : status === "active" ? "◆" : "○";
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { color: theme.table, bold: true, children: [" timeline \u00B7 ", events.length, " event", events.length === 1 ? "" : "s"] }), events.map((event, i) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: event.status === "error" ? theme.error : event.status === "done" ? theme.success : theme.accent, bold: true, children: icon(event.status) }), _jsxs(Text, { dimColor: true, children: [" ", clip(event.time || "—", 16).padEnd(16), " "] }), _jsx(Text, { bold: true, children: clip(event.title, detailWidth) })] }), event.detail && _jsxs(Text, { dimColor: true, children: ["  ", i === events.length - 1 ? " " : "│", " ", clip(event.detail, detailWidth)] }), i < events.length - 1 && _jsx(Text, { dimColor: true, children: "  \u2502" })] }, 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;
+/**
+ * Parse cache: finalized assistant messages are immutable, so re-renders
+ * (sidebar tick, scroll, resize) must not re-parse. Small LRU keyed by text;
+ * parse depends only on the text, not the width.
+ */
+const PARSE_CACHE_MAX = 50;
+const parseCache = new Map();
+function parseCached(text) {
+    const hit = parseCache.get(text);
+    if (hit) {
+        // Refresh recency (LRU).
+        parseCache.delete(text);
+        parseCache.set(text, hit);
+        return hit;
+    }
+    const blocks = parseMarkdown(text);
+    parseCache.set(text, blocks);
+    if (parseCache.size > PARSE_CACHE_MAX) {
+        const oldest = parseCache.keys().next().value;
+        if (oldest !== undefined)
+            parseCache.delete(oldest);
+    }
+    return blocks;
 }
 export function Markdown({ text, width }) {
     const paneWidth = contentWidth(width);
-    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;
-            }
-            if ((lang === "chart" || lang.startsWith("chart:")) && code.length > 0) {
-                const chart = parseChartSpec(code.join("\n"), lang);
-                blocks.push(chart ? _jsx(Box, { children: chartPreview(chart, paneWidth) }, key++) : _jsx(Text, { dimColor: true, children: "  (invalid chart data)" }, key++));
-                continue;
-            }
-            if ((lang === "timeline" || lang === "events") && code.length > 0) {
-                const events = parseTimelineSpec(code.join("\n"));
-                blocks.push(events.length > 0 ? _jsx(Box, { children: timelinePreview(events, paneWidth) }, key++) : _jsx(Text, { dimColor: true, children: "  (empty timeline)" }, 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, paneWidth)), 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 available = Math.max(20, paneWidth - 4);
-            const naturalWidths = header.map((h, c) => Math.min(MAX_CELL, Math.max(h.length, ...rows.map((r) => (r[c] ?? "").length))));
-            const separators = Math.max(0, header.length - 1) * 3 + 4;
-            const totalNatural = naturalWidths.reduce((sum, n) => sum + n, 0);
-            const widths = naturalWidths.map((n) => totalNatural + separators <= available ? n : Math.max(3, Math.floor((n / Math.max(1, totalNatural)) * (available - separators))));
-            const renderRow = (cells, chars, color, bold, rowKey) => {
-                const line = chars.l + widths.map((width, ci) => {
-                    const cell = cells[ci] ?? "";
-                    return (cell.length > width ? cell.slice(0, Math.max(1, width - 1)) + "…" : cell).padEnd(width, " ");
-                }).join(chars.m) + chars.r;
-                return _jsx(Text, { color: color, bold: bold, children: clip(line, paneWidth) }, rowKey);
-            };
-            blocks.push(_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [renderRow(header, { l: "┌ ", m: " ┬ ", r: " ┐" }, theme.table, 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, paneWidth), `t${key}`) }, key++));
-        i++;
-    }
-    return _jsx(Box, { flexDirection: "column", children: blocks });
+    const blocks = parseCached(text);
+    return (_jsx(Box, { flexDirection: "column", children: blocks.map((block, i) => renderBlock(block, paneWidth, i)) }));
 }

package/dist/tui/permission-modal.js

@@ -8,6 +8,7 @@ import { useState } from "react";
 import { Box, Text, useInput } from "ink";
 import { DiffLine } from "./chat-views.js";
 import { theme } from "./theme.js";
+import { boxBorderStyle } from "./charset.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
@@ -30,5 +31,5 @@ export function PermissionModal({ prompt }) {
     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" })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: boxBorderStyle(), 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/selectors.js

@@ -0,0 +1,157 @@
+import { parseMarkdown } from "./markdown/parse.js";
+import { measure } from "./text-width.js";
+const EST_WIDTH = 80;
+/** Ước lượng số dòng wrap của một đoạn text ở width cho trước. */
+function wrapEstimate(text, width) {
+    return text.split("\n").reduce((sum, line) => sum + Math.max(1, Math.ceil(measure(line) / width)), 0);
+}
+/**
+ * Block-aware estimate cho assistant message: parse markdown rồi cộng chiều
+ * cao từng block. Chính xác hơn nhiều so với heuristic len/80 cũ — bảng (+3
+ * viền), code box (+2 viền + gutter wrap), mermaid (~14 dòng) trước đây làm
+ * virtualization window lệch lớn.
+ */
+export function estimateMarkdownRows(text, width = EST_WIDTH) {
+    if (!text)
+        return 1;
+    let rows = 0;
+    for (const block of parseMarkdown(text)) {
+        switch (block.kind) {
+            case "paragraph":
+                rows += wrapEstimate(block.text, width);
+                break;
+            case "heading":
+            case "hr":
+            case "spacer":
+                rows += 1;
+                break;
+            case "code": {
+                const gutter = String(Math.min(block.lines.length, 60)).length;
+                const codeWidth = Math.max(8, width - gutter - 6);
+                const shown = Math.min(block.lines.length, 60);
+                rows += wrapEstimate(block.lines.slice(0, shown).join("\n"), codeWidth)
+                    + 2 // border top/bottom
+                    + (block.lang ? 1 : 0)
+                    + (block.lines.length > 60 ? 1 : 0)
+                    + 1; // marginTop
+                break;
+            }
+            case "table":
+                // top + header + separator + rows + bottom (+ cap note) + margin
+                rows += Math.min(block.rows.length, 50) + 4 + (block.rows.length > 50 ? 1 : 0) + 1;
+                break;
+            case "list":
+                rows += block.items.reduce((sum, it) => sum + wrapEstimate(it.text, Math.max(8, width - 4 - it.depth * 2)), 0);
+                break;
+            case "quote":
+                rows += wrapEstimate(block.text, Math.max(8, width - 2));
+                break;
+            case "mermaid":
+                // summary box: ~4 header lines + ≤6 nodes + ≤8 edges + hint + 2 border
+                rows += Math.min(block.lines.length, 12) + 6;
+                break;
+            case "chart":
+                rows += 2 + 40 + 1; // ContentBox max: borders + ≤40 data rows
+                break;
+            case "timeline":
+                rows += 1 + block.source.split("\n").length * 2;
+                break;
+        }
+    }
+    return rows;
+}
+/**
+ * T4: ước lượng chiều cao (rows) của một ChatItem khi render — dùng cho
+ * virtualization (chỉ render window quanh viewport thay vì cap cứng).
+ * Over-estimate nhẹ an toàn hơn under-estimate (viewport luôn đủ phủ).
+ * Assistant items dùng estimateMarkdownRows (block-aware); các kind khác giữ
+ * heuristic đơn giản vì render gần như 1:1 với text.
+ */
+export function estimateItemRows(item) {
+    switch (item.kind) {
+        case "user":
+            return 2 + Math.ceil(item.text.length / 80);
+        case "assistant":
+            // +1 marginTop; streaming raw text dùng wrap đơn giản (chưa qua markdown).
+            return item.streaming
+                ? wrapEstimate(item.text ?? "", EST_WIDTH)
+                : 1 + estimateMarkdownRows(item.text ?? "", EST_WIDTH);
+        case "thinking":
+            // Render: collapse to last 4 lines.
+            return 1 + Math.min(4, item.text ? item.text.split("\n").length : 0);
+        case "tool":
+            return 1 + 2; // title + preview 2 lines
+        case "compaction":
+            return 1;
+        case "diff":
+            return 3 + Math.min(24, (item.text?.split("\n").length ?? 0)); // header + ≤24 lines + border
+        case "todo":
+            // TodoItemView render null (plan hiển thị ở sidebar qua state.plan) —
+            // chiếm 0 dòng thực tế trong transcript.
+            return 0;
+        case "build":
+            return 1;
+        case "notice":
+            return 1 + Math.ceil(item.text.length / 2000);
+    }
+}
+/**
+ * T4: chọn window item để render: lấy từ cuối lên tới khi tổng rows ước
+ * lượng ≥ viewportRows + margin (render dư phía trên để scroll mượt), nhưng
+ * giữ toàn bộ khi tổng nhỏ. Trả về slice của items (không mutate).
+ */
+export function visibleWindow(items, viewportRows, margin = 50) {
+    const budget = viewportRows + margin;
+    let acc = 0;
+    let start = items.length;
+    while (start > 0 && acc < budget) {
+        start--;
+        acc += estimateItemRows(items[start]);
+    }
+    return start === 0 ? items : items.slice(start);
+}
+/**
+ * Plan mới nhất cho sidebar — todo items được append mỗi lần update nhưng
+ * sidebar chỉ cần snapshot hiện tại (last-wins), null khi chưa có plan.
+ *
+ * Reset realtime: mỗi lần user gửi message mới, plan reset — chỉ hiện plan
+ * được viết SAU user message cuối cùng. Tránh stale plan từ task trước hiện
+ * trong task mới.
+ */
+export function latestPlan(items) {
+    // Tìm user message cuối cùng — plan chỉ reset tại đây.
+    let lastUserIdx = -1;
+    for (let i = items.length - 1; i >= 0; i--) {
+        if (items[i].kind === "user") {
+            lastUserIdx = i;
+            break;
+        }
+    }
+    // Chỉ tìm todo SAU user cuối.
+    for (let i = items.length - 1; i > lastUserIdx; i--) {
+        if (items[i].kind === "todo")
+            return items[i];
+    }
+    return null;
+}
+/**
+ * Map tên tool → phase của breadcrumb (plan→explore→edit→build→verify).
+ * Trả về null với tool không thuộc phase nào (mcp__*...).
+ */
+export function toolPhase(name) {
+    if (name === "write_todos")
+        return "plan";
+    if (name === "list_files" || name === "read_file" || name === "grep" || name === "glob" || name === "web_fetch" || name === "load_skill" || name === "repo_map")
+        return "explore";
+    if (name === "write_file" || name === "edit_file" || name === "apply_patch")
+        return "edit";
+    if (name === "run_command")
+        return "build";
+    if (name === "task")
+        return "delegate";
+    if (name === "ask_user")
+        return "clear";
+    if (name.startsWith("mcp__"))
+        return "mcp";
+    return null;
+}

package/dist/tui/session-picker.js

@@ -9,8 +9,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect, useState } from "react";
 import { Box, Text, useInput } from "ink";
-import { listSessions } from "../session.js";
+import { listSessions } from "../session/session.js";
 import { theme, fit } from "./theme.js";
+import { boxBorderStyle } from "./charset.js";
 const DISPLAY_LIMIT = 12;
 export function SessionPicker({ workdir, onSelect, onClose }) {
     const [sessions, setSessions] = useState([]);
@@ -57,9 +58,9 @@ export function SessionPicker({ workdir, onSelect, onClose }) {
         }
     });
     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: boxBorderStyle(), 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) => {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: boxBorderStyle(), 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", " ") : "—";