s-app-scoder-agent 0.8.21 → 0.9.3

package/dist/tui/markdown.js

@@ -1,14 +1,121 @@
 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 DEFAULT_WIDTH = 100;
 const MAX_CODE_LINES = 60;
-function clip(line) {
-    return line.length > MAX_LINE ? line.slice(0, MAX_LINE - 1) + "…" : line;
+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) {
+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",
@@ -18,7 +125,9 @@ function highlightCode(code) {
     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 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;
@@ -105,6 +214,37 @@ function mermaidPreview(code) {
     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 = [];
@@ -134,7 +274,8 @@ function renderInline(text, keyPrefix) {
         parts.push(text.slice(last));
     return parts;
 }
-export function Markdown({ text }) {
+export function Markdown({ text, width }) {
+    const paneWidth = contentWidth(width);
     const lines = text.split("\n");
     const blocks = [];
     let i = 0;
@@ -154,8 +295,18 @@ export function Markdown({ text }) {
                 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)), code.length > MAX_CODE_LINES && (_jsxs(Text, { dimColor: true, children: ["  \u2026 +", code.length - MAX_CODE_LINES, " more lines"] }))] }, key++));
+            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
@@ -175,12 +326,19 @@ export function Markdown({ text }) {
             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 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 + 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);
+                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: " ┐" }, 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++));
+            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
@@ -222,7 +380,7 @@ export function Markdown({ text }) {
             i++;
             continue;
         }
-        blocks.push(_jsx(Text, { children: renderInline(clip(line), `t${key}`) }, key++));
+        blocks.push(_jsx(Text, { children: renderInline(clip(line, paneWidth), `t${key}`) }, key++));
         i++;
     }
     return _jsx(Box, { flexDirection: "column", children: blocks });

package/dist/tui/sidebar.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { contextWindowFor } from "../model-catalog.js";
 import { resolveModelPricing } from "../constants.js";
@@ -44,20 +44,30 @@ function MetricsSection({ state }) {
     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 > 250
-        ? Math.round((state.streamingOutputChars / 4) / (elapsedMs / 1000))
+    // tok/s of the most recently completed LLM call (output tokens / call duration).
+    // This is NOT averaged over the whole run (which includes tool/build time and
+    // dilutes the number); it reflects the model's actual generation speed.
+    const tokPerSec = state.lastLlmTokPerSec;
+    // Live estimate during an active stream: chars so far / elapsed since the
+    // first delta of this stream.
+    const streamElapsedMs = state.streamStartedAt != null ? Date.now() - state.streamStartedAt : null;
+    const liveTokPerSec = state.streamingOutputChars > 0 && streamElapsedMs != null && streamElapsedMs > 250
+        ? Math.round((state.streamingOutputChars / 4) / (streamElapsedMs / 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%)`.
+    // `ctx` should reflect the CURRENT context window pressure (estimateTokens of
+    // the live message history), NOT the cumulative input tokens spent across the
+    // whole session (state.usage.inputTokens grows forever and can exceed 100%).
+    // state.context is emitted by the agent after every LLM turn; fall back to the
+    // cumulative counter only before the first turn has reported.
+    const ctxTokens = state.context?.tokens ?? (hasUsage ? state.usage.inputTokens : null);
+    const ctxWindow = state.context?.window ?? win;
+    const ctxPct = state.context?.pct ??
+        (ctxTokens != null && ctxWindow > 0 ? Math.min(100, Math.round((ctxTokens / ctxWindow) * 100)) : null);
+    // ctx giờ hiển thị đủ số: `current/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}%)`
+    const ctxDisplay = ctxTokens != null && ctxPct != null
+        ? `${ctxFmt(ctxTokens)}/${ctxFmt(ctxWindow)} (${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)}` })), !hasUsage && state.streamingOutputChars > 0 && (_jsx(SectionLine, { label: "toks", value: `~${fmt(Math.round(state.streamingOutputChars / 4))} (streaming)`, color: theme.accent })), 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 }))] })) }));
 }
@@ -92,8 +102,21 @@ function McpSection({ state, config }) {
                 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));
             }) })) }));
 }
+function SubagentSection({ state }) {
+    if (state.subagents.length === 0)
+        return _jsx(_Fragment, {});
+    return (_jsx(Section, { title: "SUBAGENTS", children: state.subagents.map((s) => {
+            const color = s.status === "running" ? theme.accent :
+                s.status === "ok" ? theme.success :
+                    theme.error;
+            const mark = s.status === "running" ? "◐" : s.status === "ok" ? "✔" : "✘";
+            const summary = s.summary ? ` — ${s.summary.slice(0, 50)}${s.summary.length > 50 ? "…" : ""}` : "";
+            const steps = s.steps != null ? ` (${s.steps} steps)` : "";
+            return (_jsxs(Text, { wrap: "truncate", dimColor: true, children: [_jsxs(Text, { color: color, children: ["  ", mark, " "] }), _jsx(Text, { color: color, children: s.name }), _jsxs(Text, { dimColor: true, children: [summary, steps] })] }, s.id));
+        }) }));
+}
 // ── 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(McpSection, { state: state, config: config }), _jsx(MetricsSection, { state: state }), _jsx(PhaseSection, { state: state }), _jsx(PlanSection, { state: state }), _jsx(BuildSection, { state: state, config: 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(McpSection, { state: state, config: config }), _jsx(MetricsSection, { state: state }), _jsx(PhaseSection, { state: state }), _jsx(PlanSection, { state: state }), _jsx(SubagentSection, { state: state }), _jsx(BuildSection, { state: state, config: config })] }));
 }

package/dist/tui/state.js

@@ -20,6 +20,14 @@ export function initialState() {
         phases: [],
         mcpServers: {},
         streamingOutputChars: 0,
+        streamStartedAt: null,
+        llmCallStartedAt: null,
+        lastLlmTokPerSec: null,
+        agent: "build",
+        context: null,
+        queue: { pending: 0, steering: 0 },
+        verification: null,
+        subagents: [],
     };
 }
 const MAX_ITEMS = 400;
@@ -41,6 +49,8 @@ export function estimateItemRows(item) {
             return 1 + Math.ceil((item.text?.length ?? 0) / 80) + (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":
@@ -111,12 +121,18 @@ function capTail(text, max = MAX_OUTPUT_CHARS) {
 export function toolPhase(name) {
     if (name === "write_todos")
         return "plan";
-    if (name === "list_files" || name === "read_file" || name === "web_fetch" || name === "load_skill")
+    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")
+    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;
 }
 /** Guardrail event: đếm + giữ decision gần nhất (ngắn, tự giải thích cho header). */
@@ -156,6 +172,11 @@ export function applyEvent(state, ev) {
             state.buildCmd = ev.buildCmd;
             state.buildLamp = "none";
             state.permission = ev.permission;
+            state.agent = ev.agent ?? "build";
+            state.context = null;
+            state.queue = { pending: 0, steering: 0 };
+            state.verification = null;
+            state.subagents = [];
             state.startedAt = Date.now();
             state.endedAt = null;
             state.status = "running";
@@ -167,6 +188,9 @@ export function applyEvent(state, ev) {
             state.lastGuardrail = null;
             state.phases = [];
             state.streamingOutputChars = 0;
+            state.streamStartedAt = null;
+            state.llmCallStartedAt = null;
+            state.lastLlmTokPerSec = null;
             // The TUI pushes the user's message itself when submitting; avoid a
             // duplicate when run_start carries the same task.
             const last = lastItem(state);
@@ -194,6 +218,10 @@ export function applyEvent(state, ev) {
         case "step": {
             state.step = ev.step;
             state.maxSteps = ev.maxSteps;
+            // New LLM turn: reset per-stream tracking.
+            state.streamingOutputChars = 0;
+            state.streamStartedAt = null;
+            state.llmCallStartedAt = Date.now();
             // A new step starts: close any still-"streaming" assistant message.
             const last = lastItem(state);
             if (last && last.kind === "assistant" && last.streaming)
@@ -203,6 +231,9 @@ export function applyEvent(state, ev) {
             break;
         }
         case "llm_delta": {
+            if (state.streamStartedAt == null) {
+                state.streamStartedAt = state.llmCallStartedAt ?? Date.now();
+            }
             state.streamingOutputChars += ev.delta.length;
             const last = lastItem(state);
             if (last && last.kind === "assistant" && last.streaming) {
@@ -226,6 +257,17 @@ export function applyEvent(state, ev) {
             state.usage.inputTokens += ev.usage.input_tokens ?? 0;
             state.usage.outputTokens += ev.usage.output_tokens ?? 0;
             state.usage.cachedTokens += ev.usage.cached_tokens ?? 0;
+            // Per-call speed from the actual call duration, not the whole run.
+            const start = state.streamStartedAt ?? state.llmCallStartedAt;
+            if (start != null) {
+                const elapsedMs = Math.max(1, Date.now() - start);
+                const out = ev.usage.output_tokens ?? 0;
+                if (out > 0) {
+                    state.lastLlmTokPerSec = Math.round(out / (elapsedMs / 1000));
+                }
+            }
+            state.streamingOutputChars = 0;
+            state.streamStartedAt = null;
             break;
         }
         case "tool_call": {
@@ -320,10 +362,67 @@ export function applyEvent(state, ev) {
             appendItem(state, { kind: "notice", text: ev.line, level: ev.line.includes("unavailable") ? "warn" : "info" });
             break;
         }
+        case "steer_queued": {
+            // Pending depth tracked via the absolute `queue` event; nothing else.
+            state.queue = { ...state.queue, pending: state.queue.pending + 1, steering: state.queue.steering + (ev.mode === "steer" ? 1 : 0) };
+            break;
+        }
+        case "steer_delivered": {
+            state.queue = { pending: 0, steering: 0 };
+            appendItem(state, { kind: "notice", text: `steer: ${ev.count} message(s) delivered`, level: "info" });
+            break;
+        }
+        case "queue": {
+            state.queue = { pending: ev.pending, steering: ev.steering };
+            break;
+        }
+        case "compaction": {
+            appendItem(state, { kind: "compaction", tokensBefore: ev.tokensBefore, tokensAfter: ev.tokensAfter, manual: ev.manual });
+            break;
+        }
+        case "context": {
+            state.context = { tokens: ev.tokens, window: ev.window, pct: ev.pct };
+            break;
+        }
+        case "agent_start": {
+            // Track in the tree list; rendering lands in the sidebar (Phase 7).
+            const rest = state.subagents.filter((s) => s.id !== ev.id);
+            rest.push({ id: ev.id, name: ev.name, description: ev.description, status: "running" });
+            state.subagents = rest.slice(-20);
+            break;
+        }
+        case "agent_end": {
+            state.subagents = state.subagents.map((s) => s.id === ev.id ? { ...s, status: ev.ok ? "ok" : "failed", steps: ev.steps, summary: ev.summary } : s);
+            break;
+        }
+        case "tool_progress": {
+            // Attach latest progress message to the running tool card (if any).
+            for (let i = state.items.length - 1; i >= 0; i--) {
+                const it = state.items[i];
+                if (it.kind === "tool" && it.ok === null && (it.callId === ev.id || it.name === ev.name)) {
+                    if (ev.message)
+                        it.output = capTail(`${it.output}\n… ${ev.message}`.trim());
+                    break;
+                }
+                if (it.kind === "tool")
+                    break;
+            }
+            break;
+        }
+        case "question_request": {
+            // Surfaced via the dedicated ask_user modal (Phase 3/7); queue a notice
+            // so the transcript isn't silent while waiting for user input.
+            appendItem(state, { kind: "notice", text: `❓ ${ev.question}`, level: "info" });
+            break;
+        }
         case "finish": {
             state.status = ev.success ? "success" : /interrupted|aborted/i.test(ev.summary) ? "aborted" : "failed";
             state.summary = ev.summary;
             state.endedAt = Date.now();
+            if (ev.usage)
+                state.usage = { ...ev.usage };
+            if (ev.verification)
+                state.verification = { ...ev.verification };
             // Close ALL dangling streaming assistant messages — not just the last
             // item: a notice/tool item appended after the assistant text would
             // otherwise leave it stuck in raw streaming mode (invisible text).

package/dist/tui/theme.js

@@ -37,6 +37,10 @@ export const THEMES = {
     light: LIGHT, "high-contrast": HIGH_CONTRAST, solarized: SOLARIZED,
 };
 export function defaultThemeName(env = process.env) {
+    if (env.SCODER_THEME && THEMES[env.SCODER_THEME])
+        return env.SCODER_THEME;
+    if (env.SCODER_PLAIN === "1" || env.NO_COLOR === "1" || process.env.NO_COLOR === "1")
+        return "mono";
     if (env.TERM === "dumb" || !env.TERM)
         return "mono";
     if (env.COLOR_COUNT && Number(env.COLOR_COUNT) < 16)

package/dist/tui/transcript.js

@@ -0,0 +1,145 @@
+// ── Export ────────────────────────────────────────────────────────────────────
+/** Render a ChatItem to its plain-text representation for export. */
+export function itemToText(item) {
+    switch (item.kind) {
+        case "user": return `## you\n\n${item.text}`;
+        case "assistant": return `## agent\n\n${item.text}`;
+        case "thinking": return `## thinking\n\n${item.text}`;
+        case "tool": {
+            const args = Object.entries(item.args).map(([k, v]) => `  ${k}=${JSON.stringify(v)}`).join("\n");
+            const elapsed = item.durationMs != null ? ` (${item.durationMs}ms)` : "";
+            const status = item.ok === null ? "running" : item.ok ? "ok" : "FAILED";
+            return `## tool: ${item.name}${elapsed}\n\n${status}${args ? "\n" + args : ""}\n\n${item.output}`;
+        }
+        case "diff":
+            return `## diff: ${item.path} (+${item.added}/-${item.removed})\n\n${item.text}`;
+        case "build":
+            return `## build: ${item.command}\n\n${item.success ? "✓ passed" : "✗ FAILED"}`;
+        case "todo": {
+            const rows = item.items.map((t) => `- [${t.status === "completed" ? "x" : t.status === "in_progress" ? ">" : " "}] ${t.content}`);
+            return `## plan\n\n${rows.join("\n")}`;
+        }
+        case "compaction":
+            return `## compacted (${item.tokensBefore} → ${item.tokensAfter} tokens)${item.manual ? " [manual]" : ""}`;
+        case "notice":
+            return `${item.level === "error" ? "✗" : item.level === "warn" ? "⚠" : ""} ${item.text}`;
+    }
+}
+/** Format a chat item as Markdown (GitHub-flavored). */
+export function itemToMarkdown(item) {
+    const ts = item.kind === "tool" ? `[${item.step.toString().padStart(2, "0")}]` : "";
+    switch (item.kind) {
+        case "user":
+            return `## you\n\n> ${item.text}`;
+        case "assistant":
+            return `## agent\n\n${item.text}`;
+        case "thinking":
+            return `> ⊙ ${item.text.split("\n").slice(-4).join(" | ")}`;
+        case "tool": {
+            const elapsed = item.durationMs != null ? ` — ${(item.durationMs / 1000).toFixed(1)}s` : "";
+            const ok = item.ok === null ? "⏳ running" : item.ok ? "✅" : "❌";
+            const args = Object.keys(item.args).length > 0
+                ? `\`${item.name}(${Object.entries(item.args).map(([k, v]) => `${k}=${JSON.stringify(v)}`).join(", ")})\``
+                : `\`${item.name}\``;
+            return `${ts} ${ok} **${args}**${elapsed}\n\n\`\`\`\n${item.output}\n\`\`\``;
+        }
+        case "diff":
+            return `${ts} ✎ \`${item.path}\` \`+${item.added}/-${item.removed}\`\n\`\`\`diff\n${item.text}\n\`\`\``;
+        case "build":
+            return `${item.success ? "✅" : "❌"} **build**: \`${item.command}\``;
+        case "todo": {
+            const rows = item.items.map((t) => `- [${t.status === "completed" ? "x" : t.status === "in_progress" ? ">" : " "}] ${t.content}`);
+            return `## plan\n\n${rows.join("\n")}`;
+        }
+        case "compaction":
+            return `\n---\n*compacted: ${item.tokensBefore} → ${item.tokensAfter} tokens*${item.manual ? " (manual)" : ""}\n---\n`;
+        case "notice":
+            return `${item.level === "error" ? "> ❌" : item.level === "warn" ? "> ⚠" : ">"} ${item.text}`;
+    }
+}
+/** Export transcript to the requested format. */
+export function exportTranscript(items, format = "md") {
+    if (format === "json") {
+        return JSON.stringify(items, null, 2);
+    }
+    return items.map(itemToMarkdown).join("\n\n");
+}
+/** Case-insensitive search over transcript items.
+ *  Returns all items whose text representation matches `query`.
+ *  Searches: assistant/thinking text, tool name+output, diff path+text, notice text.
+ */
+export function findInTranscript(items, query) {
+    if (!query.trim())
+        return [];
+    const lc = query.toLowerCase();
+    const results = [];
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        const matched = (text) => text.toLowerCase().includes(lc);
+        let hit = false;
+        let snippet = "";
+        switch (item.kind) {
+            case "assistant":
+            case "thinking":
+                if (matched(item.text)) {
+                    hit = true;
+                    snippet = snippetOf(item.text, query);
+                }
+                break;
+            case "tool":
+                if (matched(item.name) || matched(item.output) || matched(JSON.stringify(item.args))) {
+                    hit = true;
+                    snippet = snippetOf(`${item.name}: ${item.output}`, query);
+                }
+                break;
+            case "diff":
+                if (matched(item.path) || matched(item.text)) {
+                    hit = true;
+                    snippet = snippetOf(`${item.path} · ${item.text}`, query);
+                }
+                break;
+            case "user":
+                if (matched(item.text)) {
+                    hit = true;
+                    snippet = snippetOf(item.text, query);
+                }
+                break;
+            case "notice":
+                if (matched(item.text)) {
+                    hit = true;
+                    snippet = snippetOf(item.text, query);
+                }
+                break;
+            case "build":
+                if (matched(item.command)) {
+                    hit = true;
+                    snippet = snippetOf(item.command, query);
+                }
+                break;
+            default:
+                break;
+        }
+        if (hit)
+            results.push({ index: i, kind: item.kind, snippet });
+    }
+    return results;
+}
+/** Return a ~120-char snippet around the first occurrence of `query` in `text`. */
+function snippetOf(text, query) {
+    const pos = text.toLowerCase().indexOf(query.toLowerCase());
+    if (pos === -1)
+        return text.slice(0, 120);
+    const start = Math.max(0, pos - 40);
+    const end = Math.min(text.length, pos + query.length + 80);
+    return (start > 0 ? "…" : "") + text.slice(start, end) + (end < text.length ? "…" : "");
+}
+// ── Copy ─────────────────────────────────────────────────────────────────────
+/** Return the copyable text for a chat item (for clipboard). */
+export function copyTextForItem(item) {
+    switch (item.kind) {
+        case "diff": return item.text;
+        case "tool": return item.output;
+        case "assistant": return item.text;
+        default: return itemToText(item);
+    }
+}