s-app-scoder-agent 0.9.2 → 0.9.6

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

@@ -2,6 +2,7 @@ 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";
+import { boxBorderStyle } from "./charset.js";
 /** Modal for ask_user tool — single/multi choice + free text. */
 export function AskUserModal({ question, options, multiple, onAnswer, onCancel }) {
     const [input, setInput] = useState("");
@@ -21,5 +22,5 @@ export function AskUserModal({ question, options, multiple, onAnswer, onCancel }
         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" })] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: boxBorderStyle(), 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/at-complete.js

@@ -1,93 +1,2 @@
-/**
- * T-01: `@` fuzzy autocomplete engine — pure logic, TUI-agnostic (unit-testable).
- * Sources: file index (.gitignore-aware via `rg --files`, fallback walk) +
- * directory prefixes so `@src/` opens the subtree. Engine: fuzzysort (MIT).
- */
-import { spawnSync } from "node:child_process";
-import { readdirSync } from "node:fs";
-import { join, relative } from "node:path";
-import fuzzysort from "fuzzysort";
-const SKIP = new Set(["node_modules", ".git", "dist", "build", ".next", "__pycache__", ".venv"]);
-let cache = null;
-/** File index for `workdir` (cached, TTL 5s; invalidateFileIndex on tool writes). */
-export function fileIndex(workdir) {
-    if (cache && Date.now() - cache.built < 5_000)
-        return cache.files;
-    const files = [];
-    // Fast path: ripgrep --files (gitignore-aware). Bare-name globs match at any
-    // depth; `!**/x/**` does NOT match absolute paths (I-07 lesson).
-    try {
-        const r = spawnSync("rg", ["--files", "--hidden", "-g", "!.git", "-g", "!node_modules", "-g", "!dist", "-g", "!build", "-g", "!.venv", "-g", "!__pycache__", "-g", "!.next", "--no-messages", workdir], { maxBuffer: 16e6, timeout: 3_000 });
-        if (r.status === 0) {
-            for (const line of r.stdout.toString().split("\n")) {
-                if (line)
-                    files.push(relative(workdir, line) || line);
-            }
-        }
-    }
-    catch {
-        // no rg on PATH → walker fallback
-    }
-    if (files.length === 0)
-        walkFiles(workdir, "", files, 0);
-    files.sort();
-    cache = { files, built: Date.now() };
-    return files;
-}
-/** Cache invalidate — call after write/edit tool_result (scope: whole index). */
-export function invalidateFileIndex() {
-    cache = null;
-}
-function walkFiles(root, prefix, out, depth) {
-    if (depth > 6)
-        return;
-    let entries;
-    try {
-        entries = readdirSync(root, { withFileTypes: true });
-    }
-    catch {
-        return;
-    }
-    for (const e of entries) {
-        if (SKIP.has(e.name))
-            continue;
-        const rel = prefix ? `${prefix}/${e.name}` : e.name;
-        if (e.isDirectory())
-            walkFiles(join(root, e.name), rel, out, depth + 1);
-        else if (e.isFile())
-            out.push(rel);
-    }
-}
-/** Active `@` token in `value`, or null. Returns start index (of "@") + query. */
-export function atQuery(value) {
-    const m = /(^|\s)@([^\s@]*)$/.exec(value);
-    if (!m)
-        return null;
-    return { start: m.index + m[1].length, query: m[2] };
-}
-/** Candidate suggestions for a query: fuzzy files + dir prefixes, max 8. */
-export function suggest(files, query, limit = 8) {
-    const dirs = new Set();
-    for (const f of files) {
-        const parts = f.split("/");
-        for (let i = 1; i < parts.length; i++)
-            dirs.add(parts.slice(0, i).join("/"));
-    }
-    const all = [...files, ...[...dirs].map((d) => `${d}/`)];
-    let hits;
-    if (query.includes("/") || query.endsWith("/")) {
-        // Subtree mode: prefix match on directories (`@src/tui/…`).
-        hits = all.filter((t) => t.startsWith(query));
-    }
-    else if (query === "") {
-        hits = all.slice(0, limit * 4);
-    }
-    else {
-        hits = fuzzysort.go(query, all, { limit: limit * 4 }).map((r) => r.target);
-    }
-    return hits.slice(0, limit);
-}
-/** Replace the active @token with `sel` (dirs keep the trailing slash). */
-export function applySuggestion(value, at, sel) {
-    return value.slice(0, at.start) + "@" + sel + (sel.endsWith("/") ? "" : " ");
-}
+/** Legacy compatibility facade; implementation lives in src/file-index.ts. */
+export * from "../workspace/file-index.js";

package/dist/tui/charset.js

@@ -0,0 +1,41 @@
+/**
+ * Drawing charset — every box-drawing / block / marker glyph the TUI paints,
+ * in one place, with an ASCII-only fallback for terminals without Unicode
+ * (TERM=dumb, legacy Windows consoles, some CI logs).
+ *
+ * ASCII mode activates when SCODER_ASCII=1 or TERM=dumb. Colors are NOT
+ * handled here: Ink/chalk already respect NO_COLOR and FORCE_COLOR.
+ */
+const UNICODE = {
+    tl: "┌", tr: "┐", bl: "└", br: "┘",
+    h: "─", v: "│",
+    teeDown: "┬", teeUp: "┴", teeRight: "├", teeLeft: "┤", cross: "┼",
+    blockFull: "█", blockEmpty: "░", barMarker: "▌",
+    bullet: "•", taskDone: "☑", taskTodo: "☐",
+    ok: "✓", fail: "✗", active: "◆", pending: "○",
+    cont: "↪",
+    spinner: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
+};
+const ASCII = {
+    tl: "+", tr: "+", bl: "+", br: "+",
+    h: "-", v: "|",
+    teeDown: "+", teeUp: "+", teeRight: "+", teeLeft: "+", cross: "+",
+    blockFull: "#", blockEmpty: ".", barMarker: "|",
+    bullet: "*", taskDone: "[x]", taskTodo: "[ ]",
+    ok: "v", fail: "x", active: ">", pending: "o",
+    cont: ">",
+    spinner: ["-", "\\", "|", "/"],
+};
+export function isAsciiMode() {
+    return process.env.SCODER_ASCII === "1" || process.env.TERM === "dumb";
+}
+/** Active charset — resolved once at module load (env is static per process). */
+export const charset = isAsciiMode() ? ASCII : UNICODE;
+/** Ink borderStyle for code/diff boxes: "classic" is the ASCII-safe style. */
+export function boxBorderStyle() {
+    return isAsciiMode() ? "classic" : "round";
+}
+/** Ink borderStyle for one-sided divider rules (app bars): thin, ASCII-safe. */
+export function dividerBorderStyle() {
+    return isAsciiMode() ? "classic" : "single";
+}

package/dist/tui/chat-views.js

@@ -4,12 +4,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ChatItemView. Tách khỏi app.tsx (component-based, pattern từ opencode
  * packages/tui).
  */
-import { useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import { Box, Text } from "ink";
 import { Markdown } from "./markdown.js";
 import { detectImageCaps, halfblockRows } from "./image.js"; // T7
 import { AgentMark, fit, theme, toolIcon } from "./theme.js";
-const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+import { clipCells } from "./text-width.js";
+import { boxBorderStyle, charset } from "./charset.js";
+const SPINNER_FRAMES = charset.spinner;
 const SPINNER_MS = 80;
 function useSpinner(active) {
     const [frame, setFrame] = useState(0);
@@ -30,7 +32,7 @@ export function Spinner({ active }) {
     const frame = useSpinner(active);
     if (!active)
         return null;
-    return _jsx(Text, { color: "cyan", children: frame });
+    return _jsx(Text, { color: theme.accent, children: frame });
 }
 const OUTPUT_PREVIEW_LINES = 5;
 /** T7: decode data URL → halfblock rows (null khi không PNG/không decode được). */
@@ -76,18 +78,18 @@ function ToolItemView({ item, width }) {
             ? `${(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 > 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] }))] }));
+    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: ["  └ ", clipCells(line, outputWidth)] }, 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). */
+/** One colored line of a unified diff (+ success, - error, @@ accent, header bold). */
 export function DiffLine({ line }) {
     if (line.startsWith("+++") || line.startsWith("---"))
         return _jsx(Text, { bold: true, children: line });
     if (line.startsWith("@@"))
-        return _jsx(Text, { color: "cyan", children: line });
+        return _jsx(Text, { color: theme.accent, children: line });
     if (line.startsWith("+"))
-        return _jsx(Text, { color: "green", children: line });
+        return _jsx(Text, { color: theme.success, children: line });
     if (line.startsWith("-"))
-        return _jsx(Text, { color: "red", children: line });
+        return _jsx(Text, { color: theme.error, children: line });
     return _jsx(Text, { children: line });
 }
 const MAX_DIFF_RENDER_LINES = 20;
@@ -103,22 +105,76 @@ function DiffItemView({ item, width }) {
     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 > diffWidth ? line.slice(0, diffWidth - 1) + "…" : line }, i))), hidden > 0 && (_jsxs(Text, { dimColor: true, children: ["  \u2026 +", hidden, " more diff lines"] }))] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: boxBorderStyle(), 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: clipCells(line, diffWidth) }, 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
- * phải (sidebar.tsx, PlanSection) để transcript sạch; todo items vẫn được
- * giữ trong state (latestPlan) làm nguồn dữ liệu cho sidebar.
+ * phải (sidebar.tsx, PlanSection) để transcript sạch; plan hiển thị từ
+ * state.plan (field riêng, miễn nhiễm MAX_ITEMS eviction trên run dài).
  */
 function TodoItemView() {
     return null;
 }
-export function ChatItemView({ item, width }) {
+/**
+ * Field-level equality for ChatItem — defense-in-depth cho React.memo.
+ * state.ts cập nhật item theo kiểu immutable (patchItem thay object trong
+ * array): item đổi nội dung ⇒ đổi reference ⇒ memo thấy khác và re-render.
+ * (Regression cũ: mutate in-place + memo ⇒ prev/next là CÙNG object ⇒ mọi
+ * so sánh đều "bằng" ⇒ stream đóng băng ở chunk đầu, tool kẹt "running".)
+ */
+function chatItemEqual(a, b) {
+    if (a === b && a.kind !== "assistant" && a.kind !== "thinking" && a.kind !== "tool")
+        return true;
+    if (a.kind !== b.kind)
+        return false;
+    switch (a.kind) {
+        case "user":
+            return a.text === b.text;
+        case "assistant":
+        case "thinking": {
+            const bb = b;
+            return a.text === bb.text && a.streaming === bb.streaming;
+        }
+        case "tool": {
+            const bb = b;
+            return a.name === bb.name && a.ok === bb.ok && a.output === bb.output
+                && a.step === bb.step && a.durationMs === bb.durationMs && a.image === bb.image;
+        }
+        case "diff": {
+            const bb = b;
+            return a.text === bb.text && a.path === bb.path && a.added === bb.added && a.removed === bb.removed;
+        }
+        case "todo": {
+            const bb = b;
+            return a.items === bb.items;
+        }
+        case "build": {
+            const bb = b;
+            return a.success === bb.success && a.command === bb.command;
+        }
+        case "compaction": {
+            const bb = b;
+            return a.tokensBefore === bb.tokensBefore && a.tokensAfter === bb.tokensAfter && a.manual === bb.manual;
+        }
+        case "notice": {
+            const bb = b;
+            return a.text === bb.text && a.level === bb.level;
+        }
+    }
+}
+/**
+ * Memoized: during streaming, events flush at ~20 fps and previously forced
+ * EVERY chat item to re-render (O(n²) over a long transcript). Old finalized
+ * items now skip rendering entirely; only the item actually changed by the
+ * last event batch re-renders.
+ */
+export const ChatItemView = memo(function ChatItemView({ item, width }) {
     switch (item.kind) {
         case "user":
-            // User messages stand out with a full colored border + bold label so they're
-            // immediately visible at a glance, distinct from the agent's ◆ markdown.
-            return (_jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsx(Box, { borderStyle: "single", borderColor: theme.user, borderLeft: true, borderRight: false, borderTop: false, borderBottom: false, backgroundColor: "gray", width: "100%", paddingX: 1, paddingTop: 1, paddingBottom: 1, flexDirection: "column", children: _jsxs(Text, { children: [_jsx(Text, { color: "white", bold: true, children: "you \u25B8 " }), _jsx(Text, { color: "white", bold: true, children: item.text })] }) }) }));
+            // User messages stand out with a clean left accent border (│) + bold
+            // label — no full-width background block (design-system: subtle,
+            // scannable, không phá nhịp đọc của transcript).
+            return (_jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsx(Box, { borderStyle: "single", borderColor: theme.user, borderLeft: true, borderRight: false, borderTop: false, borderBottom: false, width: "100%", paddingX: 1, flexDirection: "column", children: _jsxs(Text, { children: [_jsx(Text, { color: theme.user, bold: true, children: "you \u25B8 " }), _jsx(Text, { bold: true, children: item.text })] }) }) }));
         case "assistant": {
             // Streaming: dim with pulsing cursor; finalized: markdown with agent mark.
             if (item.streaming || !item.text) {
@@ -150,4 +206,4 @@ export function ChatItemView({ item, width }) {
                         item.level === "warn" ? theme.warn :
                             theme.dim, children: [item.level === "error" ? "✗ " : item.level === "warn" ? "⚠ " : "  ", item.text.length > 2000 ? item.text.slice(0, 2000) + "…" : item.text] }) }));
     }
-}
+}, (prev, next) => prev.width === next.width && chatItemEqual(prev.item, next.item));

package/dist/tui/chrome.js

@@ -2,12 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text, useWindowSize } from "ink";
 import { fit, theme } from "./theme.js";
 import { Spinner } from "./chat-views.js";
+import { getVersion } from "../shared/version.js";
+import { dividerBorderStyle } from "./charset.js";
 /** Fuel gauge is scaled to this many cells regardless of maxSteps. */
 export const GAUGE_CELLS = 12;
 /** Sidebar phải: tổng rộng (kể cả border + padding) — pattern opencode. */
-export const SIDEBAR_WIDTH = 40;
+export const SIDEBAR_WIDTH = 48;
 /** Dưới ngưỡng cột này ẩn sidebar — BuildRail fallback sang header đầy đủ. */
-export const SIDEBAR_MIN_COLS = 92;
+export const SIDEBAR_MIN_COLS = 100;
 /** Scaled step fuel gauge: ▰ filled / ▱ remaining, e.g. ▰▰▰▰▱▱▱▱ 4/40. */
 export function fuelGauge(step, maxSteps) {
     if (maxSteps <= 0)
@@ -45,7 +47,10 @@ export function BuildRail({ state, config }) {
     const centerBudget = Math.max(24, (columns ?? 100) - 34);
     // Phase breadcrumb or narrow-terminal metrics (right of the center)
     const showNarrowMetrics = !wide && (state.status === "running" || state.phases.length > 0);
-    return (_jsxs(Box, { borderStyle: "bold", borderColor: theme.border, paddingX: 1, justifyContent: "space-between", alignItems: "center", flexShrink: 0, children: [_jsxs(Text, { bold: true, color: theme.brand, children: ["\u2691 ", _jsx(Text, { bold: true, children: "scoder" })] }), _jsx(Box, { flexGrow: 1, justifyContent: "center", children: hasGuardrail ? (_jsxs(Text, { color: theme.warn, bold: true, children: ["\u26A0 ", fit(state.lastGuardrail, centerBudget)] })) : state.status === "running" ? (showNarrowMetrics ? (_jsx(PhaseBreadcrumb, { phases: state.phases })) : (_jsx(Text, { dimColor: true, children: "plan \u203A explore \u203A edit \u203A build \u203A verify" }))) : (_jsx(Text, { dimColor: true, children: "ready" })) }), _jsxs(Text, { children: [_jsxs(Text, { color: permColor, children: ["[", perm, "]"] }), _jsx(Text, { children: " " }), _jsx(Text, { color: lampColor, children: lampLabel }), _jsxs(Text, { dimColor: true, children: [" ", lampText] })] })] }));
+    return (
+    // App-bar style: chỉ 1 divider mảnh dưới đáy thay vì khung "bold" nặng
+    // 3 hàng — tiết kiệm 1 dòng dọc và cho cảm giác hiện đại hơn.
+    _jsxs(Box, { borderStyle: dividerBorderStyle(), borderColor: theme.border, borderTop: false, borderLeft: false, borderRight: false, paddingX: 1, justifyContent: "space-between", alignItems: "center", flexShrink: 0, children: [_jsxs(Text, { bold: true, color: theme.brand, children: ["\u2691 ", _jsx(Text, { bold: true, children: "scoder" }), _jsxs(Text, { dimColor: true, children: [" (v", getVersion(), ")"] })] }), _jsx(Box, { flexGrow: 1, justifyContent: "center", children: hasGuardrail ? (_jsxs(Text, { color: theme.warn, bold: true, children: ["\u26A0 ", fit(state.lastGuardrail, centerBudget)] })) : state.status === "running" ? (showNarrowMetrics ? (_jsx(PhaseBreadcrumb, { phases: state.phases })) : (_jsx(Text, { dimColor: true, children: "plan \u203A explore \u203A edit \u203A build \u203A verify" }))) : (_jsx(Text, { dimColor: true, children: "ready" })) }), _jsxs(Text, { children: [_jsxs(Text, { color: permColor, children: ["[", perm, "]"] }), _jsx(Text, { children: " " }), _jsx(Text, { color: lampColor, children: lampLabel }), _jsxs(Text, { dimColor: true, children: [" ", lampText] })] })] }));
 }
 /** Breadcrumb tiến trình: plan › explore › edit › build › verify. */
 const PHASE_SEQUENCE = ["plan", "explore", "edit", "build", "verify"];
@@ -94,5 +99,7 @@ export function StatusBar({ state, scroll }) {
         else
             left = fit(left, leftBudget);
     }
-    return (_jsxs(Box, { borderStyle: "bold", borderColor: theme.border, paddingX: 1, justifyContent: "space-between", alignItems: "center", flexShrink: 0, children: [_jsxs(Text, { children: [state.status === "running" && _jsx(Spinner, { active: true }), state.status === "running" ? "  " : statusIcon ? `${statusIcon} ` : "   ", _jsx(Text, { color: statusColor, bold: true, children: left })] }), _jsx(Text, { dimColor: true, children: fit(rightText, Math.floor(width * 0.5)) })] }));
+    return (
+    // App-bar style: chỉ 1 divider mảnh trên đỉnh, đối xứng với BuildRail.
+    _jsxs(Box, { borderStyle: dividerBorderStyle(), borderColor: theme.border, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1, justifyContent: "space-between", alignItems: "center", flexShrink: 0, children: [_jsxs(Text, { children: [state.status === "running" && _jsx(Spinner, { active: true }), state.status === "running" ? "  " : statusIcon ? `${statusIcon} ` : "   ", _jsx(Text, { color: statusColor, bold: true, children: left })] }), _jsx(Text, { dimColor: true, children: fit(rightText, Math.floor(width * 0.5)) })] }));
 }

package/dist/tui/hooks/use-command-host.js

@@ -0,0 +1,26 @@
+/** T1: CommandHost cho registry dùng chung với REPL. */
+import { useCallback } from "react";
+import { initialState } from "../state.js";
+export function useCommandHost(deps) {
+    const { cfg, setCfg, update, agentRef, runningRef, eventQueue, setScrollOffset, setPermMode } = deps;
+    /** T1: CommandHost cho registry dùng chung với REPL. */
+    const tuiHost = useCallback(() => ({
+        agent: () => agentRef.current,
+        config: cfg,
+        updateConfig: (patch) => setCfg((c) => ({ ...c, ...patch })),
+        isRunning: () => runningRef.current,
+        replaceAgent: (next) => {
+            agentRef.current?.abort();
+            agentRef.current?.dispose();
+            agentRef.current = next;
+            if (!next) {
+                runningRef.current = false;
+                setScrollOffset(0);
+                eventQueue.current = [];
+                update(() => initialState());
+            }
+            setPermMode(cfg.permissionMode);
+        },
+    }), [cfg, update]);
+    return tuiHost;
+}

package/dist/tui/hooks/use-event-queue.js

@@ -0,0 +1,69 @@
+/**
+ * Event batching + the synchronous stateRef mirror for the TUI. Extracted
+ * verbatim from app.tsx — flush timing (FLUSH_MS) and reducer order unchanged.
+ */
+import { useCallback, useEffect, useRef } from "react";
+import { applyEvent } from "../state.js";
+export function useEventQueue(initial, setState, setPermPrompt, runningRef) {
+    const stateRef = useRef(initial);
+    /**
+     * Central state updater — the single source of truth is stateRef, updated
+     * synchronously so event handlers never race a render cycle.
+     */
+    const update = useCallback((fn) => {
+        stateRef.current = fn(stateRef.current);
+        setState(stateRef.current);
+    }, []);
+    /**
+     * Event batching: streaming (`llm_delta`) and live tool output (`tool_output`)
+     * can emit hundreds of events per second; each one previously triggered a
+     * full-tree re-render (the flicker). Buffer incoming events and flush them
+     * through the reducer at most every FLUSH_MS (~20 fps, well above what the
+     * eye needs for streaming text).
+     */
+    const FLUSH_MS = 50;
+    const eventQueue = useRef([]);
+    const flushTimer = useRef(null);
+    const flushEvents = useCallback(() => {
+        flushTimer.current = null;
+        const events = eventQueue.current;
+        if (events.length === 0)
+            return;
+        eventQueue.current = [];
+        update((s) => {
+            let next = s;
+            for (const ev of events)
+                next = applyEvent(next, ev);
+            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.
+        if (ev.type === "permission_request") {
+            setPermPrompt(ev);
+            return;
+        }
+        eventQueue.current.push(ev);
+        if (!flushTimer.current)
+            flushTimer.current = setTimeout(flushEvents, FLUSH_MS);
+    }, [flushEvents]);
+    // Flush on unmount so a trailing burst is never dropped.
+    useEffect(() => () => {
+        if (flushTimer.current)
+            clearTimeout(flushTimer.current);
+        flushEvents();
+    }, [flushEvents]);
+    return { stateRef, update, queueEvent, eventQueue };
+}

package/dist/tui/hooks/use-keybinds.js

@@ -0,0 +1,87 @@
+/** Global keybinds: permission modal answers, scroll/abort, Ctrl+C confirm-quit. */
+import { useInput } from "ink";
+import { useEffect, useRef } from "react";
+import { markAborted } from "../state.js";
+export function useTuiKeybinds(deps) {
+    const { scrollOffset, permPromptRef, setPermPrompt, agentRef, runningRef, sessionPickerOpen, setSessionPickerOpen, setPaletteOpen, inputRef, setHelpOpen, update, viewportRowsRef, setScrollOffset, exit } = deps;
+    // Esc aborts the running task (like SIGINT in the CLI); when scrolled up,
+    // the first Esc returns to the bottom instead.
+    const scrollOffsetRef = useRef(0);
+    useEffect(() => {
+        scrollOffsetRef.current = scrollOffset;
+    }, [scrollOffset]);
+    // T-03: permission modal keybinds — intercepts y/a/n/q while open.
+    useInput((input, key) => {
+        const p = permPromptRef.current;
+        if (!p)
+            return;
+        const answer = key.return ? "yes" : input.toLowerCase() === "y" ? "yes" : input.toLowerCase() === "a" ? "always" : input.toLowerCase() === "n" ? "no" : input.toLowerCase() === "q" ? "quit" : key.escape ? "no" : null;
+        if (!answer)
+            return;
+        setPermPrompt(null);
+        agentRef.current?.resolvePermission(p.id, answer);
+    });
+    // T-01/T-02: scroll + abort keybinds.
+    useInput((_input, key) => {
+        if (permPromptRef.current)
+            return; // modal owns the keyboard
+        // ── Ctrl+S: open session picker (when not running, not already open) ──
+        if (key.ctrl && _input === "s") {
+            if (!runningRef.current && !sessionPickerOpen) {
+                setSessionPickerOpen(true);
+            }
+            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 }));
+            return;
+        }
+        if (key.pageUp || key.pageDown || key.home || key.end) {
+            const page = Math.max(1, Math.floor((viewportRowsRef.current ?? 20) * 0.8));
+            if (key.pageUp)
+                setScrollOffset((o) => o + page);
+            if (key.pageDown)
+                setScrollOffset((o) => Math.max(0, o - page));
+            if (key.home)
+                setScrollOffset(999_999); // top (clamped to maxScroll in render)
+            if (key.end)
+                setScrollOffset(0); // bottom = follow
+            return;
+        }
+        if (key.escape) {
+            if (scrollOffsetRef.current > 0) {
+                setScrollOffset(0);
+                return;
+            }
+            if (runningRef.current) {
+                update((s) => ({ ...markAborted(s), items: [...s.items] }));
+                agentRef.current?.abort();
+            }
+        }
+    });
+    // Ctrl+C quits (press again within 2s to confirm while running).
+    const ctrlCArmed = useRef(null);
+    useInput((_input, key) => {
+        if (!key.ctrl || _input !== "c")
+            return;
+        if (runningRef.current && ctrlCArmed.current === null) {
+            ctrlCArmed.current = Date.now();
+            update((s) => ({ ...s, items: [...s.items, { kind: "notice", text: "Press Ctrl+C again to quit", level: "warn" }] }));
+            setTimeout(() => (ctrlCArmed.current = null), 2000);
+            return;
+        }
+        agentRef.current?.abort();
+        exit();
+    });
+}

package/dist/tui/hooks/use-scroll.js

@@ -0,0 +1,38 @@
+/** Scroll viewport metrics + mouse wheel (SGR 1006) wiring for the TUI. */
+import { useCallback, useEffect, useRef } from "react";
+import { useBoxMetrics, useStdin } from "ink";
+import { parseWheel, MOUSE_ENABLE, MOUSE_DISABLE } from "../mouse.js";
+export function useScrollMetrics(setScrollOffset) {
+    const viewportRef = useRef(null);
+    const contentRef = useRef(null);
+    const viewport = useBoxMetrics(viewportRef);
+    const content = useBoxMetrics(contentRef);
+    const viewportRowsRef = useRef(null);
+    useEffect(() => {
+        viewportRowsRef.current = viewport.clientHeight || null;
+    }, [viewport.clientHeight]);
+    // T5: mouse wheel scroll (SGR 1006) — raw stdin listener; Ink's useInput
+    // drops unrepresentable CSI sequences, so wheel events must be read here.
+    // Only in alt-screen TTY (mouse tracking sequences corrupt plain pipes).
+    const { stdin, setRawMode, isRawModeSupported } = useStdin();
+    const wheelScroll = useCallback((dir) => {
+        setScrollOffset((o) => Math.max(0, o + (dir === "up" ? 3 : -3)));
+    }, []);
+    useEffect(() => {
+        if (process.stdout.isTTY !== true || !isRawModeSupported)
+            return;
+        process.stdout.write(MOUSE_ENABLE);
+        setRawMode(true);
+        const onData = (chunk) => {
+            const dir = parseWheel(String(chunk));
+            if (dir)
+                wheelScroll(dir);
+        };
+        stdin.on("data", onData);
+        return () => {
+            stdin.off("data", onData);
+            process.stdout.write(MOUSE_DISABLE);
+        };
+    }, [stdin, setRawMode, isRawModeSupported, wheelScroll]);
+    return { viewportRef, contentRef, viewport, content, viewportRowsRef };
+}

package/dist/tui/hooks/use-session-resume.js

@@ -0,0 +1,47 @@
+/** Session picker resume flow — restores transcript state and resumes the run. */
+import { useCallback } from "react";
+import { resolveSessionId } from "../../session/session.js";
+import { initialState } from "../state.js";
+export function useSessionResume(deps) {
+    const { cfg, createAgent, pushNotice, update, runningRef, setScrollOffset, setSessionPickerOpen } = deps;
+    /** Session picker: when a session is selected, resume it. */
+    const handleSessionSelect = useCallback(async (session) => {
+        setSessionPickerOpen(false);
+        if (runningRef.current) {
+            pushNotice("agent is running — wait or Esc first", "warn");
+            return;
+        }
+        const s = resolveSessionId(cfg.workdir, session.id);
+        if (!s) {
+            pushNotice(`session not found: ${session.id}`, "error");
+            return;
+        }
+        // Restore full TUI state from the session (items + step count + model info).
+        update(() => ({
+            ...initialState(),
+            items: s.messages
+                .filter((m) => m.role === "user" || m.role === "assistant")
+                .map((m) => m.role === "user"
+                ? { 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 ?? cfg.maxSteps,
+            model: s.model || cfg.model,
+            provider: s.provider || cfg.provider,
+            status: "idle",
+            summary: null,
+        }));
+        runningRef.current = true;
+        setScrollOffset(0);
+        const agent = createAgent();
+        try {
+            await agent.resume(s);
+            runningRef.current = false;
+        }
+        catch (err) {
+            runningRef.current = false;
+            pushNotice(`resume failed: ${err.message}`, "error");
+        }
+    }, [cfg, createAgent, pushNotice, update]);
+    return handleSessionSelect;
+}