s-app-scoder-agent 0.8.20 → 0.9.2

package/dist/tui/commands.js

@@ -3,28 +3,45 @@
  * (src/tui/app.tsx). Pure parsing/formatting only — each frontend executes
  * the command against its own context, so both stay in sync on the surface.
  */
-export const SLASH_COMMANDS = [
-    { cmd: "/help", desc: "show this command list" },
-    { cmd: "/sessions", desc: "list saved sessions — /sessions resume <id|last>" },
-    { cmd: "/diff", desc: "show diffs: /diff turn | session | branch" },
-    { cmd: "/theme", desc: "switch palette: /theme <name> — /theme list (mission|paper|mono|light|high-contrast|solarized)" },
-    { cmd: "/clear", desc: "clear the conversation and reset agent context" },
-    { cmd: "/cost", desc: "token usage of the current session" },
-    { cmd: "/model", desc: "show the active model & provider" },
-    { cmd: "/skills", desc: "list discovered skills (SKILL.md)" },
-    { cmd: "/skill", desc: "load a skill into context: /skill <name>" },
-    { cmd: "/mcp", desc: "MCP servers & tools: /mcp [server] [tool] [json|text]" },
-    { cmd: "/review", desc: "prompt gate: rewrite + user approval — /review <prompt>" },
-    { cmd: "/permission", desc: "view or switch permission mode: /permission <auto|ask|readonly>" },
-    { cmd: "/undo", desc: "revert files: /undo [files|edit] — edit also trims the turn back for re-send" },
-    { cmd: "/exit", desc: "quit (aliases: /quit, exit, quit)" },
+/** Built-in commands — the single catalog both help and completion read. */
+export const BUILTIN_COMMANDS = [
+    { name: "/help", aliases: [], description: "show this command list", usage: "/help", visibility: "public", source: "builtin" },
+    { name: "/plan", aliases: [], description: "show the current plan — /plan done|start <id|n> to mark steps", usage: "/plan [done|start <id|n|text>]", visibility: "public", source: "builtin" },
+    { name: "/agent", aliases: [], description: "list selectable agents — /agent <name> to switch (idle only)", usage: "/agent [name]", visibility: "public", source: "builtin" },
+    { name: "/init", aliases: [], description: "create an AGENTS.md template in this project", usage: "/init", visibility: "public", source: "builtin" },
+    { name: "/sessions", aliases: [], description: "list saved sessions — /sessions resume <id|last>", usage: "/sessions [resume <id|last>]", visibility: "public", source: "builtin" },
+    { name: "/diff", aliases: [], description: "show diffs: /diff turn | session | branch", usage: "/diff [turn|session|branch]", visibility: "tui-only", source: "builtin" },
+    { name: "/theme", aliases: [], description: "switch palette: /theme <name> — /theme list (mission|paper|mono|light|high-contrast|solarized)", usage: "/theme [name|list]", visibility: "tui-only", source: "builtin" },
+    { name: "/clear", aliases: [], description: "clear the conversation and reset agent context", usage: "/clear", visibility: "public", source: "builtin" },
+    { name: "/compact", aliases: [], description: "summarize older history now (manual compaction)", usage: "/compact", visibility: "public", source: "builtin" },
+    { name: "/cost", aliases: [], description: "token usage of the current session", usage: "/cost", visibility: "public", source: "builtin" },
+    { name: "/model", aliases: [], description: "show the active model & provider", usage: "/model [provider/model]", visibility: "public", source: "builtin" },
+    { name: "/skills", aliases: [], description: "list discovered skills (SKILL.md)", usage: "/skills", visibility: "public", source: "builtin" },
+    { name: "/skill", aliases: [], description: "load a skill into context: /skill <name>", usage: "/skill <name>", visibility: "public", source: "builtin" },
+    { name: "/mcp", aliases: [], description: "MCP servers & tools: /mcp [server] [tool] [json|text]", usage: "/mcp [server [tool [json]]]", visibility: "public", source: "builtin" },
+    { name: "/review", aliases: [], description: "prompt gate: rewrite + user approval — /review <prompt>", usage: "/review <prompt>", visibility: "tui-only", source: "builtin" },
+    { name: "/permission", aliases: [], description: "view or switch permission mode: /permission <auto|ask|readonly>", usage: "/permission [auto|ask|readonly]", visibility: "public", source: "builtin" },
+    { name: "/undo", aliases: [], description: "revert files: /undo [files|edit] — edit also trims the turn back for re-send", usage: "/undo [files|edit]", visibility: "tui-only", source: "builtin" },
+    { name: "/commands", aliases: [], description: "list all commands (builtin + custom) — /commands <name> to inspect", usage: "/commands [name]", visibility: "public", source: "builtin" },
+    { name: "/export", aliases: [], description: "export session transcript: /export [md|json]", usage: "/export [md|json]", visibility: "public", source: "builtin" },
+    { name: "/search", aliases: [], description: "search transcript: /search <query>", usage: "/search <query>", visibility: "public", source: "builtin" },
+    { name: "/exit", aliases: ["/quit"], description: "quit (aliases: /quit, exit, quit)", usage: "/exit", visibility: "public", source: "builtin" },
 ];
+/** Back-compat view used by completion + /help — derived from BUILTIN_COMMANDS. */
+export const SLASH_COMMANDS = BUILTIN_COMMANDS
+    .filter((c) => c.visibility !== "hidden")
+    .map((c) => ({ cmd: c.name, desc: c.description }));
+/** Resolve a command name or alias → canonical CommandDef (case-insensitive). */
+export function resolveCommandDef(name) {
+    const n = name.toLowerCase();
+    return BUILTIN_COMMANDS.find((c) => c.name === n || c.aliases.includes(n));
+}
 /** Parse "/cmd arg…"; returns null when the input is not a slash command. */
 export function parseSlashCommand(input) {
-    const m = /^\/([a-zA-Z][a-zA-Z0-9]*)(?:\s+(.*\S))?\s*$/.exec(input.trim());
+    const m = /^\/([a-zA-Z][a-zA-Z0-9-]*)(?:\s+([\s\S]*\S))?\s*$/.exec(input.trim());
     if (!m)
         return null;
-    return { cmd: "/" + m[1].toLowerCase(), arg: m[2] ?? "" };
+    return { cmd: resolveCommandDef("/" + m[1].toLowerCase())?.name ?? "/" + m[1].toLowerCase(), arg: m[2] ?? "" };
 }
 /**
  * Tab completion for a partial input starting with "/".
@@ -52,44 +69,215 @@ export function completeSlashCommand(input) {
     }
     return { completed: prefix + (matches.length === 1 ? " " : ""), candidates: matches };
 }
+import { readdirSync, existsSync, readFileSync, statSync } from "node:fs";
+import { homedir } from "node:os";
+import { join, resolve, basename, extname } from "node:path";
 import { suggest } from "./at-complete.js";
+/** Substitute $ARGUMENTS, $1..$n, @file references in the body. */
+function substituteTemplate(body, argStr) {
+    const args = argStr.trim().split(/\s+/).filter(Boolean);
+    let out = body;
+    out = out.replace(/\$ARGUMENTS/g, argStr.trim());
+    for (let i = 0; i < args.length; i++) {
+        out = out.replace(new RegExp(`\\$${i + 1}`, "g"), args[i]);
+    }
+    out = out.replace(/\$ARGUMENTS/g, argStr.trim()); // repeat in case $ARGUMENTS contains $1
+    // @file references — leave as-is (agent interprets them).
+    return out;
+}
+/** Discover custom commands from ~/.scoder/commands/*.md + .scoder/commands/*.md. */
+export function discoverCustomCommands(workdir) {
+    const dirs = [resolve(workdir, ".scoder", "commands"), join(homedir(), ".scoder", "commands")].filter((d) => existsSync(d));
+    const results = [];
+    for (const dir of dirs) {
+        let files;
+        try {
+            files = readdirSync(dir);
+        }
+        catch {
+            continue;
+        }
+        for (const file of files) {
+            if (extname(file) !== ".md")
+                continue;
+            const filePath = join(dir, file);
+            let stat;
+            try {
+                stat = statSync(filePath);
+            }
+            catch {
+                continue;
+            }
+            if (!stat.isFile())
+                continue;
+            const content = readFileSync(filePath, "utf8");
+            const parsed = parseCustomCommandFile(basename(file, ".md"), filePath, content, dir === resolve(workdir, ".scoder", "commands") ? "project" : "global");
+            if (parsed)
+                results.push(parsed);
+        }
+    }
+    return results;
+}
+/** Parse a custom command .md file. Returns null on error. */
+function parseCustomCommandFile(defaultName, filePath, content, source) {
+    const frontMatch = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/.exec(content.trim());
+    if (!frontMatch) {
+        // No frontmatter: body is the entire file, name is filename.
+        return {
+            name: defaultName,
+            description: content.trim().slice(0, 80),
+            visibility: "public",
+            aliases: [],
+            body: content.trim(),
+            source,
+            filePath,
+        };
+    }
+    const frontRaw = frontMatch[1];
+    const body = frontMatch[2].trim();
+    // Parse YAML frontmatter manually (no external dependency).
+    const front = {};
+    for (const line of frontRaw.split("\n")) {
+        const m = /^(\w+):\s*(.*)$/.exec(line.trim());
+        if (m) {
+            const [, key, rawVal] = m;
+            front[key] = rawVal.startsWith('"') && rawVal.endsWith('"')
+                ? rawVal.slice(1, -1)
+                : rawVal;
+        }
+    }
+    return {
+        name: String(front.name ?? defaultName),
+        description: String(front.description ?? body.split("\n")[0].slice(0, 80)),
+        visibility: front.visibility ?? "public",
+        aliases: parseFrontList(front.aliases),
+        exec: front.exec ?? "prompt",
+        agent: front.agent ? String(front.agent) : undefined,
+        model: front.model ? String(front.model) : undefined,
+        shell: front.shell ? String(front.shell) : undefined,
+        args: front.args
+            ? (Array.isArray(front.args)
+                ? front.args.map(String)
+                : String(front.args)
+                    // YAML flow array "[a, b]" → strip brackets, split on comma.
+                    .replace(/^\[|\]$/g, "")
+                    .split(",")
+                    .map((s) => s.trim())
+                    .filter(Boolean))
+            : undefined,
+        body,
+        source,
+        filePath,
+    };
+}
+/** Parse the small YAML list subset used by command aliases/args metadata. */
+function parseFrontList(value) {
+    if (Array.isArray(value))
+        return value.map(String).map((s) => s.trim()).filter(Boolean);
+    if (typeof value !== "string")
+        return [];
+    const raw = value.trim().replace(/^\[|\]$/g, "");
+    return raw.split(",").map((s) => s.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean);
+}
+/** Substitute + execute a custom command; returns the prompt text to inject. */
+export function runCustomCommand(cmd, argStr) {
+    return substituteTemplate(cmd.body, argStr);
+}
 /** Build providers from runtime context (called once per keystroke burst). */
 export function completionProviders(sources) {
-    return [
+    const limit = sources.limit ?? 8;
+    const skills = sources.skills ?? [];
+    const agents = sources.agents ?? [];
+    const files = sources.files ?? [];
+    const commands = sources.commands ?? SLASH_COMMANDS;
+    const out = [
         {
             id: "commands",
             match: (t) => t.startsWith("/") && !t.slice(1).includes(" "),
-            candidates: (t) => SLASH_COMMANDS.filter((c) => c.cmd.startsWith(t.toLowerCase()))
-                .map((c) => ({ label: c.cmd, desc: c.desc, insert: c.cmd + " " })),
+            candidates: (t) => {
+                const q = t.toLowerCase();
+                return commands
+                    .filter((c) => c.cmd.toLowerCase().startsWith(q) || c.cmd.toLowerCase().includes(q.slice(1)))
+                    .slice(0, limit)
+                    .map((c) => ({ label: c.cmd, desc: c.desc, insert: c.cmd + " " }));
+            },
         },
-        {
+    ];
+    if (files.length > 0) {
+        out.push({
             id: "files",
             match: (t) => t.startsWith("@") && t.length > 1,
-            candidates: (t) => suggest(sources.files, t.slice(1)).map((f) => ({ label: f, insert: "@" + f + (f.endsWith("/") ? "" : " ") })),
-        },
-        {
+            candidates: (t) => suggest(files, t.slice(1), limit).map((f) => ({ label: f, insert: "@" + f + (f.endsWith("/") ? "" : " ") })),
+        });
+    }
+    if (skills.length > 0) {
+        out.push({
             id: "skills",
             match: (t) => t.startsWith("@") && t.length > 1,
             candidates: (t) => {
                 const q = t.slice(1).toLowerCase();
-                return sources.skills
-                    .filter((s) => s.toLowerCase().includes(q))
-                    .slice(0, 4)
-                    .map((s) => ({ label: `@${s}`, desc: "skill", insert: `@${s} ` }));
+                return skills.filter((s) => s.toLowerCase().includes(q)).slice(0, limit).map((s) => ({ label: `@${s}`, desc: "skill", insert: `@${s} ` }));
             },
-        },
-        {
+        });
+    }
+    if (agents.length > 0) {
+        out.push({
             id: "agents",
             match: (t) => t.startsWith("@") && t.length > 1,
             candidates: (t) => {
                 const q = t.slice(1).toLowerCase();
-                return sources.agents
-                    .filter((a) => a.toLowerCase().includes(q))
-                    .slice(0, 4)
-                    .map((a) => ({ label: `@${a}`, desc: "agent", insert: `@${a} ` }));
+                return agents.filter((a) => a.toLowerCase().includes(q)).slice(0, limit).map((a) => ({ label: `@${a}`, desc: "agent", insert: `@${a} ` }));
             },
-        },
-    ];
+        });
+    }
+    if (sources.mcpServers && sources.mcpServers.length > 0) {
+        out.push({
+            id: "mcp",
+            match: (t) => t.startsWith("@") && t.length > 1,
+            candidates: (t) => {
+                const q = t.slice(1).toLowerCase();
+                const res = [];
+                for (const s of sources.mcpServers ?? []) {
+                    if (s.name.toLowerCase().includes(q))
+                        res.push({ label: `@${s.name}`, desc: "mcp server", insert: `@${s.name} ` });
+                    for (const tool of s.tools ?? []) {
+                        if (tool.toLowerCase().includes(q))
+                            res.push({ label: `@${tool}`, desc: `mcp:${s.name}`, insert: `@${tool} ` });
+                    }
+                }
+                return res.slice(0, limit);
+            },
+        });
+    }
+    if (sources.sessions && sources.sessions.length > 0) {
+        out.push({
+            id: "sessions",
+            match: (t) => t.startsWith("@") && t.length > 1,
+            candidates: (t) => {
+                const q = t.slice(1).toLowerCase();
+                return (sources.sessions ?? []).filter((s) => s.toLowerCase().includes(q)).slice(0, limit).map((s) => ({ label: `@${s}`, desc: "session", insert: `@${s} ` }));
+            },
+        });
+    }
+    return out;
+}
+/** Fuzzy score helper (Completion v2 ranking). Higher = better. */
+export function fuzzyScore(query, target) {
+    const q = query.toLowerCase();
+    const t = target.toLowerCase();
+    if (!q)
+        return 0;
+    if (t.startsWith(q))
+        return 1000 - (t.length - q.length);
+    const idx = t.indexOf(q);
+    if (idx >= 0)
+        return 500 - idx;
+    // subsequence
+    let qi = 0;
+    for (let i = 0; i < t.length && qi < q.length; i++)
+        if (t[i] === q[qi])
+            qi++;
+    return qi === q.length ? 100 : 0;
 }
 /**
  * Ghost text: when the current input has exactly ONE candidate across all

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 })] }));
 }