s-app-scoder-agent 0.8.20 → 0.9.2

package/dist/tui/app.js

@@ -18,8 +18,8 @@ import { setQuiet } from "../ui.js";
 import { discoverSkills } from "../skills.js";
 import { discoverAgents } from "../agents.js";
 import { resolveSessionId } from "../session.js";
-import { applyEvent, initialState, markAborted } from "./state.js";
-import { parseSlashCommand } from "./commands.js";
+import { applyEvent, initialState, markAborted, estimateItemRows } from "./state.js";
+import { parseSlashCommand, SLASH_COMMANDS, formatSlashHelp } from "./commands.js";
 import { dispatchCommand } from "./command-registry.js";
 import { ChatItemView } from "./chat-views.js"; // T2
 import { BuildRail, StatusBar, SIDEBAR_MIN_COLS } from "./chrome.js"; // T2
@@ -33,26 +33,31 @@ import { PermissionModal } from "./permission-modal.js"; // T2
 import { Sidebar } from "./sidebar.js"; // sidebar opencode
 import { getVersion } from "../version.js";
 export function TuiApp({ config, initialTask }) {
+    // v2: the effective config can be hot-patched by slash commands (/agent,
+    // /permission) — the prop is the initial value, cfg is the live one.
+    const [cfg, setCfg] = useState(config);
     const { exit } = useApp();
     // T-09: theme resolve at mount (.scoder/theme.json > builtin). Proxy-based
     // theme reads re-render via a bump.
     const [, bump] = useState(0);
     const bumpFrame = useCallback(() => bump((n) => n + 1), []);
     useEffect(() => {
-        setActiveTheme(getTheme(config.workdir));
+        setActiveTheme(getTheme(cfg.workdir));
         bumpFrame();
-    }, [config.workdir, bumpFrame]);
+    }, [cfg.workdir, bumpFrame]);
     const [state, setState] = useState(initialState);
     const [input, setInput] = useState(initialTask ?? "");
     /** Rows scrolled up from the bottom; 0 = follow the newest content. */
     const [scrollOffset, setScrollOffset] = useState(0);
-    const [permMode, setPermMode] = useState(config.permissionMode);
+    const [permMode, setPermMode] = useState(cfg.permissionMode);
     // T-03: active permission prompt (modal) — the run blocks until answered.
     const [permPrompt, setPermPrompt] = useState(null);
     const permPromptRef = useRef(permPrompt);
     permPromptRef.current = permPrompt;
     // Session picker modal state (open via Ctrl+S)
     const [sessionPickerOpen, setSessionPickerOpen] = useState(false);
+    const [paletteOpen, setPaletteOpen] = useState(false);
+    const [helpOpen, setHelpOpen] = useState(false);
     const inputRef = useRef(initialTask ?? "");
     const writeInput = useCallback((v) => {
         inputRef.current = v;
@@ -113,14 +118,14 @@ export function TuiApp({ config, initialTask }) {
             process.stdout.write(MOUSE_DISABLE);
         };
     }, [stdin, setRawMode, isRawModeSupported, wheelScroll]);
-    const skills = useMemo(() => discoverSkills(config.workdir), [config.workdir]);
+    const skills = useMemo(() => discoverSkills(cfg.workdir), [cfg.workdir]);
     const skillNames = useMemo(() => skills.map((s) => s.name), [skills]);
     // T-02: completion sources (agents + files) computed once per mount.
     const atSources = useMemo(() => ({
         skills: skillNames,
-        agents: discoverAgents(config.workdir).filter((a) => a.mode !== "subagent" || a.name === "explore").map((a) => a.name),
-        files: fileIndex(config.workdir),
-    }), [config.workdir, skillNames]);
+        agents: discoverAgents(cfg.workdir).filter((a) => a.mode !== "subagent" || a.name === "explore").map((a) => a.name),
+        files: fileIndex(cfg.workdir),
+    }), [cfg.workdir, skillNames]);
     // Mirror of state for the submit path (isFirst, /cost, /model) and the
     // abort handler — kept in sync synchronously by update() below, so it is
     // exact even between renders (event bursts land between them).
@@ -156,6 +161,17 @@ export function TuiApp({ config, initialTask }) {
             return { ...next, items: [...next.items] };
         });
     }, [update]);
+    // Realtime tick: re-render at least once per second while a run is active so
+    // sidebar metrics (elapsed time, ctx pressure, tok/s during/after a stream)
+    // update live instead of only on the next event/command boundary.
+    useEffect(() => {
+        const id = setInterval(() => {
+            if (!runningRef.current)
+                return;
+            update((s) => ({ ...s }));
+        }, 1000);
+        return () => clearInterval(id);
+    }, [update]);
     const queueEvent = useCallback((ev) => {
         // T-03: permission modal must appear instantly (not batched) — the run
         // blocks on the answer.
@@ -181,7 +197,7 @@ export function TuiApp({ config, initialTask }) {
             pushNotice("agent is running — wait or Esc first", "warn");
             return;
         }
-        const s = resolveSessionId(config.workdir, session.id);
+        const s = resolveSessionId(cfg.workdir, session.id);
         if (!s) {
             pushNotice(`session not found: ${session.id}`, "error");
             return;
@@ -195,9 +211,9 @@ export function TuiApp({ config, initialTask }) {
                 ? { kind: "user", text: typeof m.content === "string" ? m.content : "" }
                 : { kind: "assistant", text: typeof m.content === "string" ? m.content : "", streaming: false }),
             step: s.steps ?? 0,
-            maxSteps: s.maxSteps ?? config.maxSteps,
-            model: s.model || config.model,
-            provider: s.provider || config.provider,
+            maxSteps: s.maxSteps ?? cfg.maxSteps,
+            model: s.model || cfg.model,
+            provider: s.provider || cfg.provider,
             status: "idle",
             summary: null,
         }));
@@ -212,11 +228,12 @@ export function TuiApp({ config, initialTask }) {
             runningRef.current = false;
             pushNotice(`resume failed: ${err.message}`, "error");
         }
-    }, [config, createAgent, pushNotice, update]);
+    }, [cfg, createAgent, pushNotice, update]);
     /** T1: CommandHost cho registry dùng chung với REPL. */
     const tuiHost = useCallback(() => ({
         agent: () => agentRef.current,
-        config,
+        config: cfg,
+        updateConfig: (patch) => setCfg((c) => ({ ...c, ...patch })),
         isRunning: () => runningRef.current,
         replaceAgent: (next) => {
             agentRef.current?.abort();
@@ -228,7 +245,7 @@ export function TuiApp({ config, initialTask }) {
                 eventQueue.current = [];
                 update(() => initialState());
             }
-            setPermMode(config.permissionMode);
+            setPermMode(cfg.permissionMode);
         },
         resumeAndRun: async (s) => {
             const agent = createAgent();
@@ -249,9 +266,24 @@ export function TuiApp({ config, initialTask }) {
                 runningRef.current = false;
                 pushNotice(`resume failed: ${err.message}`, "error");
             }
-            return { success: true, steps: 0, buildCmd: config.buildCmd, summary: "resumed" };
+            return { success: true, steps: 0, buildCmd: cfg.buildCmd, summary: "resumed" };
         },
-    }), [config, update, pushNotice, createAgent]);
+        /** [Phase 7] Transcript items — used by /export and /search. */
+        transcriptItems: () => stateRef.current.items,
+        /** [Phase 7] Scroll to a transcript item by index (best-effort row estimation). */
+        selectTranscriptItem: (index) => {
+            const items = stateRef.current.items;
+            if (index < 0 || index >= items.length)
+                return;
+            // target: show item at index at the TOP of the viewport.
+            // Ink contentOffsetY shifts content upward by that many rows.
+            let above = 0;
+            for (let i = 0; i < index; i++)
+                above += estimateItemRows(items[i]);
+            const maxScroll = Math.max(0, content.height - viewport.height);
+            setScrollOffset(Math.max(0, maxScroll - above));
+        },
+    }), [cfg, update, pushNotice, createAgent, viewport, content]);
     /** One round of the /review state machine: call the gate, render the result. */
     const reviewStep = useCallback(async (tool, args) => {
         const agent = agentRef.current ?? createAgent();
@@ -310,7 +342,7 @@ export function TuiApp({ config, initialTask }) {
         writeInput("");
     }, [closeStreamingItems, writeInput]);
     const submit = useCallback(async (text) => {
-        const task = text.trim();
+        let task = text.trim();
         if (!task)
             return;
         // Prompt-gate review in progress — numeric replies drive the flow.
@@ -336,17 +368,21 @@ export function TuiApp({ config, initialTask }) {
                     pushNotice("usage: /review <prompt> — rewrites it, you pick original/rewritten/update/cancel", "warn");
                     return;
                 }
-                if (!Object.keys(config.mcpServers ?? {}).some((s) => s === "prompt-gate")) {
-                    pushNotice("no \"prompt-gate\" MCP server configured — add it to ~/.scoder/config.json", "error");
+                // v2: no hardcoded server/language — any MCP server exposing a
+                // review_and_select_prompt tool wins; language is auto-detected by
+                // the gate from the prompt itself.
+                const servers = Object.keys(cfg.mcpServers ?? {});
+                const gateServer = servers.find((s) => s === "prompt-gate") ?? servers.find((s) => /gate/i.test(s));
+                if (!gateServer) {
+                    pushNotice("no MCP prompt-gate server configured — add one exposing review_and_select_prompt to ~/.scoder/config.json", "error");
                     return;
                 }
                 // Context grounded in this session: last user item + current workdir.
                 const lastUser = [...stateRef.current.items].reverse().find((i) => i.kind === "user");
-                const context = `User is in scoder TUI at ${config.workdir}${lastUser ? `; earlier they asked: "${lastUser.text.slice(0, 120)}"` : ""}.`;
-                void reviewStep("mcp__prompt-gate__review_and_select_prompt", {
+                const context = `User is in scoder TUI at ${cfg.workdir}${lastUser ? `; earlier they asked: "${lastUser.text.slice(0, 120)}"` : ""}.`;
+                void reviewStep(`mcp__${gateServer}__review_and_select_prompt`, {
                     prompt: slash.arg,
                     context,
-                    language: "vietnamese",
                 });
                 return;
             }
@@ -453,7 +489,12 @@ export function TuiApp({ config, initialTask }) {
                 agentRef.current?.abort();
                 exit();
             }
-            return;
+            if (handled && outcome?.task) {
+                task = outcome.task;
+            }
+            else {
+                return;
+            }
         }
         if (runningRef.current) {
             // Steer: user input while the agent runs — deliver at next step
@@ -485,12 +526,12 @@ export function TuiApp({ config, initialTask }) {
             update((s) => applyEvent({ ...s, items: [...s.items] }, { type: "finish", success: false, steps: s.step, summary: `Run failed: ${err.message}` }));
             update((s) => ({ ...s, items: [...s.items, { kind: "notice", text: err.message, level: "error" }] }));
         }
-    }, [config, pushNotice, writeInput, exit, update, queueEvent, skills, skillNames, permMode, reviewAnswer, reviewStep, tuiHost, preSubmit]);
+    }, [cfg, pushNotice, writeInput, exit, update, queueEvent, skills, skillNames, permMode, reviewAnswer, reviewStep, tuiHost, preSubmit]);
     /** Create (or return) the session agent — permission mode always current. */
     function createAgent() {
         if (agentRef.current)
             return agentRef.current;
-        const agent = new Agent({ ...config, permissionMode: permMode });
+        const agent = new Agent({ ...cfg, permissionMode: permMode });
         // Events go through the batching queue (see FLUSH_MS above): applyEvent
         // still receives the latest state because update() keeps stateRef in
         // sync synchronously — tool results can never miss their items.
@@ -526,6 +567,16 @@ export function TuiApp({ config, initialTask }) {
             }
             return;
         }
+        // ── Ctrl+P: command palette ──
+        if (key.ctrl && _input === "p") {
+            setPaletteOpen((o) => !o);
+            return;
+        }
+        // ── ?: help overlay (when input empty) ──
+        if (_input === "?" && !inputRef.current.trim()) {
+            setHelpOpen((o) => !o);
+            return;
+        }
         // T-10: ctrl+t toggles the thinking stream visibility.
         if (key.ctrl && _input === "t") {
             update((s) => ({ ...s, thinkingVisible: !s.thinkingVisible }));
@@ -598,7 +649,7 @@ export function TuiApp({ config, initialTask }) {
     // flexShrink={0}: pinned chrome must never be squeezed when the chat
     // content overflows — Ink defaults every box to flexShrink:1, which
     // shrank the input bar to zero rows once the log outgrew the terminal.
-    _jsxs(Box, { flexDirection: "column", height: rows || 24, flexShrink: 0, children: [_jsx(BuildRail, { state: state, config: config }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, flexShrink: 1, minHeight: 0, children: [_jsx(Box, { ref: viewportRef, flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, overflow: "hidden", contentOffsetY: scrollTop, children: _jsxs(Box, { ref: contentRef, flexDirection: "column", paddingX: 1, flexShrink: 0, children: [state.items.length === 0 ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: [_jsx(Text, { bold: true, color: theme.brand, children: "\u2691 SCoder" }), _jsx(Text, { dimColor: true, children: `autonomous coding agent · v${getVersion()}` }), _jsx(Text, {}), _jsx(Text, { dimColor: true, children: "type a task to start \u2014 agent plans, edits, and builds" }), _jsx(Text, {}), _jsxs(Text, { dimColor: true, children: ["\u23CE send \u00B7 ", _jsx(Text, { bold: true, children: "ctrl+s" }), " sessions \u00B7 tab complete \u00B7 /help \u00B7 /skills"] })] })) : (state.items.map((item, i) => _jsx(ChatItemView, { item: item }, i))), lastSummary && (_jsx(Box, { marginTop: 1, children: state.status === "success" ? (_jsxs(Text, { color: "green", bold: true, children: ["\u2714 ", lastSummary] })) : state.status === "aborted" ? (_jsxs(Text, { color: "yellow", bold: true, children: ["\u23F9 ", lastSummary] })) : (_jsxs(Text, { color: "red", bold: true, children: ["\u2718 ", lastSummary] })) }))] }) }), showSidebar && _jsx(Sidebar, { state: state, config: config })] }), sessionPickerOpen && (_jsx(SessionPicker, { workdir: config.workdir, onSelect: handleSessionSelect, onClose: () => setSessionPickerOpen(false) })), permPrompt && _jsx(PermissionModal, { prompt: permPrompt }), _jsx(Box, { paddingX: 1, paddingTop: 1, paddingBottom: 1, flexShrink: 0, alignSelf: "stretch", children: _jsx(Input, { valueRef: inputRef, value: input, onChange: writeInput, onSubmit: (v) => void submit(v), historyRef: historyRef, skillNames: skillNames, agentRef: agentRef, config: config, atSources: atSources, modalRef: permPromptRef }) }), _jsx(StatusBar, { state: state, scroll: scrollOffset > 0 ? `↑ ${Math.min(scrollOffset, maxScroll)}/${maxScroll}` : null })] }));
+    _jsxs(Box, { flexDirection: "column", height: rows || 24, flexShrink: 0, children: [_jsx(BuildRail, { state: state, config: cfg }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, flexShrink: 1, minHeight: 0, children: [_jsx(Box, { ref: viewportRef, flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, overflow: "hidden", contentOffsetY: scrollTop, children: _jsxs(Box, { ref: contentRef, flexDirection: "column", paddingX: 1, flexShrink: 0, children: [state.items.length === 0 ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: [_jsx(Text, { bold: true, color: theme.brand, children: "\u2691 SCoder" }), _jsx(Text, { dimColor: true, children: `autonomous coding agent · v${getVersion()}` }), _jsx(Text, {}), _jsx(Text, { dimColor: true, children: "type a task to start \u2014 agent plans, edits, and builds" }), _jsx(Text, {}), _jsxs(Text, { dimColor: true, children: ["\u23CE send \u00B7 ", _jsx(Text, { bold: true, children: "ctrl+s" }), " sessions \u00B7 tab complete \u00B7 /help \u00B7 /skills"] })] })) : (state.items.map((item, i) => _jsx(ChatItemView, { item: item, width: (columns ?? 100) - (showSidebar ? 42 : 4) }, i))), lastSummary && (_jsx(Box, { marginTop: 1, children: state.status === "success" ? (_jsxs(Text, { color: "green", bold: true, children: ["\u2714 ", lastSummary] })) : state.status === "aborted" ? (_jsxs(Text, { color: "yellow", bold: true, children: ["\u23F9 ", lastSummary] })) : (_jsxs(Text, { color: "red", bold: true, children: ["\u2718 ", lastSummary] })) }))] }) }), showSidebar && _jsx(Sidebar, { state: state, config: cfg })] }), sessionPickerOpen && (_jsx(SessionPicker, { workdir: cfg.workdir, onSelect: handleSessionSelect, onClose: () => setSessionPickerOpen(false) })), paletteOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, paddingY: 1, children: [_jsx(Text, { color: theme.accent, bold: true, children: "Command palette (Ctrl+P to close)" }), SLASH_COMMANDS.slice(0, 40).map((c) => (_jsxs(Text, { children: [c.cmd.padEnd(12), " ", c.desc] }, c.cmd)))] })), helpOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.dim, paddingX: 1, paddingY: 1, children: [_jsx(Text, { color: theme.brand, bold: true, children: "Help (?)" }), _jsx(Text, { children: formatSlashHelp("scoder tui") })] })), permPrompt && _jsx(PermissionModal, { prompt: permPrompt }), _jsx(Box, { paddingX: 1, paddingTop: 1, paddingBottom: 1, flexShrink: 0, alignSelf: "stretch", children: _jsx(Input, { valueRef: inputRef, value: input, onChange: writeInput, onSubmit: (v) => void submit(v), historyRef: historyRef, skillNames: skillNames, agentRef: agentRef, config: cfg, atSources: atSources, modalRef: permPromptRef }) }), _jsx(StatusBar, { state: state, scroll: scrollOffset > 0 ? `↑ ${Math.min(scrollOffset, maxScroll)}/${maxScroll}` : null })] }));
 }
 /** Mount the TUI (called from the `scoder tui` subcommand). */
 export async function runTui(config, initialTask) {

package/dist/tui/ask-user-modal.js

@@ -0,0 +1,25 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { theme } from "./theme.js";
+/** Modal for ask_user tool — single/multi choice + free text. */
+export function AskUserModal({ question, options, multiple, onAnswer, onCancel }) {
+    const [input, setInput] = useState("");
+    useInput((ch, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (key.return) {
+            onAnswer(input.trim() || (options?.[0] ?? ""));
+            return;
+        }
+        if (key.backspace) {
+            setInput((v) => v.slice(0, -1));
+            return;
+        }
+        if (ch && !key.ctrl && !key.meta)
+            setInput((v) => v + ch);
+    });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, paddingY: 1, children: [_jsxs(Text, { color: theme.accent, bold: true, children: ["\u2753 ", question] }), options?.length ? (_jsx(Box, { flexDirection: "column", marginTop: 1, children: options.map((o, i) => _jsxs(Text, { children: [i + 1, ". ", o] }, i)) })) : null, _jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: [multiple ? "comma-separated choices" : "type answer", ": "] }), _jsx(Text, { children: input }), _jsx(Text, { color: theme.accent, children: "\u258C" })] }), _jsx(Text, { dimColor: true, children: "Enter submit \u00B7 Esc cancel" })] }));
+}

package/dist/tui/chat-views.js

@@ -53,8 +53,9 @@ function previewLines(output) {
         .filter((l) => !/^--- (stdout|stderr) ---$/.test(l.trim()));
     return lines.slice(-OUTPUT_PREVIEW_LINES);
 }
-function ToolItemView({ item }) {
+function ToolItemView({ item, width }) {
     const running = item.ok === null;
+    const outputWidth = Math.max(24, (width ?? 100) - 6);
     // One meaningful arg per tool type keeps the line scannable.
     const keyArg = typeof item.args.command === "string"
         ? fit(item.args.command, 60)
@@ -75,7 +76,7 @@ function ToolItemView({ item }) {
             ? `${(elapsedMs / 1000).toFixed(0)}s`
             : `${(elapsedMs / 1000).toFixed(1)}s`
         : null;
-    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [_jsxs(Text, { children: [_jsxs(Text, { dimColor: true, children: [String(item.step).padStart(2, "0"), "\u25B8 "] }), _jsxs(Text, { color: theme.accent, children: [toolIcon(item.name), " "] }), _jsx(Text, { color: item.ok === false ? theme.error : theme.accent, bold: true, children: item.name }), keyArg && _jsxs(Text, { dimColor: true, children: [" ", keyArg] }), running && _jsx(Text, { dimColor: true, children: " \u00B7 running" }), !running && elapsed && _jsxs(Text, { dimColor: true, children: [" \u00B7 ", elapsed] })] }), preview.map((line, i) => (_jsxs(Text, { dimColor: true, children: ["  └ ", line.length > 140 ? line.slice(0, 140) + "…" : line] }, i))), halfblocks && (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [halfblocks.map((r, i) => (_jsx(Text, { children: r.text }, i))), _jsx(Text, { dimColor: true, children: "  \u2514 image preview" })] })), item.image && !halfblocks && (_jsxs(Text, { dimColor: true, children: ["  \u2514 image \u2014 ", item.output] }))] }));
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [_jsxs(Text, { children: [_jsxs(Text, { dimColor: true, children: [String(item.step).padStart(2, "0"), "\u25B8 "] }), _jsxs(Text, { color: theme.accent, children: [toolIcon(item.name), " "] }), _jsx(Text, { color: item.ok === false ? theme.error : theme.accent, bold: true, children: item.name }), keyArg && _jsxs(Text, { dimColor: true, children: [" ", keyArg] }), running && _jsx(Text, { dimColor: true, children: " \u00B7 running" }), !running && elapsed && _jsxs(Text, { dimColor: true, children: [" \u00B7 ", elapsed] })] }), preview.map((line, i) => (_jsxs(Text, { dimColor: true, children: ["  └ ", line.length > outputWidth ? line.slice(0, outputWidth - 1) + "…" : line] }, i))), halfblocks && (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [halfblocks.map((r, i) => (_jsx(Text, { children: r.text }, i))), _jsx(Text, { dimColor: true, children: "  \u2514 image preview" })] })), item.image && !halfblocks && (_jsxs(Text, { dimColor: true, children: ["  \u2514 image \u2014 ", item.output] }))] }));
 }
 /** One colored line of a unified diff (+ green, - red, @@ cyan, header bold). */
 export function DiffLine({ line }) {
@@ -95,13 +96,14 @@ const MAX_DIFF_RENDER_LINES = 20;
  * Header row: [step] ✎ [+/− stats] [path]
  * Body: up to MAX_DIFF_RENDER_LINES of colored diff lines.
  */
-function DiffItemView({ item }) {
+function DiffItemView({ item, width }) {
     const lines = item.text.length > 0 ? item.text.split("\n") : [];
     const shown = lines.slice(0, MAX_DIFF_RENDER_LINES);
     const hidden = lines.length - shown.length;
+    const diffWidth = Math.max(24, (width ?? 100) - 6);
     const addedColor = item.added > 0 ? theme.success : undefined;
     const removedColor = item.removed > 0 ? theme.error : undefined;
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border, paddingX: 1, marginTop: 1, marginLeft: 1, children: [_jsxs(Text, { children: [_jsxs(Text, { dimColor: true, children: [String(item.step).padStart(2, "0"), "\u25B8 "] }), _jsx(Text, { color: theme.brand, bold: true, children: "\u270E" }), _jsx(Text, { children: "  " }), _jsxs(Text, { color: addedColor, children: ["+", item.added] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: removedColor, children: ["-", item.removed] }), _jsx(Text, { children: "  " }), _jsx(Text, { bold: true, color: theme.accent, children: item.path }), item.truncated && _jsx(Text, { dimColor: true, children: " \u00B7 diff truncated" })] }), shown.map((line, i) => (_jsx(DiffLine, { line: line.length > 160 ? line.slice(0, 160) + "…" : line }, i))), hidden > 0 && (_jsxs(Text, { dimColor: true, children: ["  \u2026 +", hidden, " more diff lines"] }))] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.border, paddingX: 1, marginTop: 1, marginLeft: 1, children: [_jsxs(Text, { children: [_jsxs(Text, { dimColor: true, children: [String(item.step).padStart(2, "0"), "\u25B8 "] }), _jsx(Text, { color: theme.brand, bold: true, children: "\u270E" }), _jsx(Text, { children: "  " }), _jsxs(Text, { color: addedColor, children: ["+", item.added] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: removedColor, children: ["-", item.removed] }), _jsx(Text, { children: "  " }), _jsx(Text, { bold: true, color: theme.accent, children: item.path }), item.truncated && _jsx(Text, { dimColor: true, children: " \u00B7 diff truncated" })] }), shown.map((line, i) => (_jsx(DiffLine, { line: line.length > diffWidth ? line.slice(0, diffWidth - 1) + "…" : line }, i))), hidden > 0 && (_jsxs(Text, { dimColor: true, children: ["  \u2026 +", hidden, " more diff lines"] }))] }));
 }
 /**
  * Plan KHÔNG còn render trong chat — checklist live hiển thị ở Sidebar bên
@@ -111,7 +113,7 @@ function DiffItemView({ item }) {
 function TodoItemView() {
     return null;
 }
-export function ChatItemView({ item }) {
+export function ChatItemView({ item, width }) {
     switch (item.kind) {
         case "user":
             // User messages stand out with a full colored border + bold label so they're
@@ -122,15 +124,15 @@ export function ChatItemView({ item }) {
             if (item.streaming || !item.text) {
                 return (_jsxs(Box, { marginTop: item.text ? 1 : 0, paddingLeft: 2, children: [_jsx(AgentMark, {}), _jsx(Text, { dimColor: item.streaming, children: item.text || (item.streaming ? "" : "(no text)") }), item.streaming && _jsx(Text, { color: theme.accent, bold: true, children: "\u258B" })] }));
             }
-            return (_jsxs(Box, { marginTop: 1, paddingLeft: 2, children: [_jsx(AgentMark, {}), _jsx(Markdown, { text: item.text })] }));
+            return (_jsxs(Box, { marginTop: 1, paddingLeft: 2, children: [_jsx(AgentMark, {}), _jsx(Markdown, { text: item.text, width: width })] }));
         }
         case "thinking":
             // T-10: reasoning stream — dim color, ⊙ prefix, collapse to last 4 lines.
             return (_jsx(Box, { paddingLeft: 1, marginTop: 1, children: _jsxs(Text, { color: theme.thinking, italic: true, children: [_jsx(Text, { dimColor: true, children: "\u2299" }), " ", item.text.split("\n").slice(-4).join("\n  ")] }) }));
         case "tool":
-            return _jsx(ToolItemView, { item: item });
+            return _jsx(ToolItemView, { item: item, width: width });
         case "diff":
-            return _jsx(DiffItemView, { item: item });
+            return _jsx(DiffItemView, { item: item, width: width });
         case "todo":
             return _jsx(TodoItemView, {});
         case "build":
@@ -138,6 +140,11 @@ export function ChatItemView({ item }) {
             return (_jsx(Box, { paddingLeft: 1, marginTop: 1, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: item.success
                                 ? _jsx(Text, { color: theme.success, bold: true, children: "\u2713 build passed" })
                                 : _jsx(Text, { color: theme.error, bold: true, children: "\u2717 build FAILED" }) }), _jsxs(Text, { dimColor: true, children: ["   ", item.command] })] }) }));
+        case "compaction": {
+            // Divider marking an LLM summarization of older history.
+            const fmt = (n) => (n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n));
+            return (_jsx(Box, { paddingLeft: 1, marginTop: 1, children: _jsxs(Text, { dimColor: true, italic: true, children: ["\u2500\u2500 ", item.manual ? "compacted (manual)" : "compacted", ": ", fmt(item.tokensBefore), " \u2192 ", fmt(item.tokensAfter), " tokens \u2500\u2500\u2500"] }) }));
+        }
         case "notice":
             return (_jsx(Box, { paddingLeft: 2, marginTop: 1, children: _jsxs(Text, { color: item.level === "error" ? theme.error :
                         item.level === "warn" ? theme.warn :