s-app-scoder-agent 0.9.2 → 0.9.6

package/dist/tui/sidebar.js

@@ -1,14 +1,17 @@
 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";
-import { latestPlan } from "./state.js";
+import { contextWindowFor } from "../llm/model-catalog.js";
+import { resolveModelPricing } from "../shared/constants.js";
 import { fit, theme } from "./theme.js";
+import { charset } from "./charset.js";
 import { fuelGauge, gaugeColor, SIDEBAR_WIDTH } from "./chrome.js";
 const INNER = SIDEBAR_WIDTH - 4; // border + paddingX
 const MAX_PLAN_ROWS = 14; // cap chiều cao — plan dài thì gộp "+N more"
 function Section({ title, children }) {
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, flexShrink: 0, children: [_jsxs(Text, { dimColor: true, bold: true, children: ["\u2500 ", title] }), children] }));
+    // Header chuẩn design-system: rule mảnh + tiêu đề bold + rule lấp đầy chiều
+    // ngang còn lại — phân tách section rõ ràng mà không cần khung nặng.
+    const rule = charset.h.repeat(Math.max(0, INNER - title.length - 3));
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, flexShrink: 0, children: [_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { dimColor: true, children: [charset.h, " "] }), _jsx(Text, { bold: true, children: title }), _jsxs(Text, { dimColor: true, children: [" ", rule] })] }), children] }));
 }
 function SectionLine({ label, value, color }) {
     return (_jsxs(Text, { wrap: "truncate", children: [_jsxs(Text, { dimColor: true, children: ["  ", fit(label, 8), " "] }), _jsx(Text, { color: color, children: value })] }));
@@ -28,15 +31,19 @@ function PlanRow({ t, width }) {
     }
     return (_jsxs(Text, { wrap: "truncate", dimColor: true, children: ["  ○ ", fit(t.content, width - 4)] }));
 }
-function PlanSection({ state }) {
-    const plan = latestPlan(state.items);
-    return (_jsx(Section, { title: "PLAN", children: !plan || plan.items.length === 0 ? (_jsx(Text, { dimColor: true, children: "  no plan yet" })) : (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [(() => {
-                    const done = plan.items.filter((t) => t.status === "completed").length;
-                    return _jsxs(Text, { children: ["  ", _jsx(Text, { bold: true, children: done }), _jsxs(Text, { dimColor: true, children: ["/", plan.items.length, " steps"] })] });
-                })(), plan.items.slice(0, MAX_PLAN_ROWS).map((t, i) => (_jsx(PlanRow, { t: t, width: INNER }, i))), plan.items.length > MAX_PLAN_ROWS && (_jsxs(Text, { dimColor: true, children: ["  \u2026 +", plan.items.length - MAX_PLAN_ROWS, " more"] }))] })) }));
+function PlanSection({ state, cap }) {
+    const plan = state.plan;
+    return (_jsx(Section, { title: "PLAN", children: !plan || plan.length === 0 ? (_jsx(Text, { dimColor: true, children: "  no plan yet" })) : (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [(() => {
+                    const done = plan.filter((t) => t.status === "completed").length;
+                    return _jsxs(Text, { children: ["  ", _jsx(Text, { bold: true, children: done }), _jsxs(Text, { dimColor: true, children: ["/", plan.length, " steps"] })] });
+                })(), plan.slice(0, cap).map((t, i) => (_jsx(PlanRow, { t: t, width: INNER }, i))), plan.length > cap && (_jsxs(Text, { dimColor: true, children: ["  \u2026 +", plan.length - cap, " more"] }))] })) }));
 }
 // ── Metrics (tok/s · ctx · cost · elapsed · fuel gauge · guardrails) ─────────
-function MetricsSection({ state }) {
+/**
+ * Danh sách dòng metrics — dùng chung cho render VÀ ước lượng chiều cao
+ * (sidebar budget), nên 2 chỗ không bao giờ lệch nhau.
+ */
+function buildMetricsRows(state) {
     const fmt = (n) => (n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n));
     const hasUsage = state.usage.calls > 0;
     const elapsedMs = state.startedAt ? (state.endedAt ?? Date.now()) - state.startedAt : null;
@@ -69,7 +76,42 @@ function MetricsSection({ state }) {
     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 }))] })) }));
+    if (!hasUsage && elapsedSec == null)
+        return [];
+    const rows = [];
+    if (gauge) {
+        rows.push(_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] })] }, "gauge"));
+    }
+    if (hasUsage) {
+        rows.push(_jsx(SectionLine, { label: "toks", value: `${fmt(state.usage.inputTokens)} → ${fmt(state.usage.outputTokens)}` }, "toks"));
+    }
+    if (!hasUsage && state.streamingOutputChars > 0) {
+        rows.push(_jsx(SectionLine, { label: "toks", value: `~${fmt(Math.round(state.streamingOutputChars / 4))} (streaming)`, color: theme.accent }, "toks"));
+    }
+    // Show one speed line: live ~N during streaming, then N once usage events fire.
+    if (tokPerSec != null) {
+        rows.push(_jsx(SectionLine, { label: "speed", value: `${fmt(tokPerSec)} tok/s`, color: theme.accent }, "speed"));
+    }
+    if (liveTokPerSec != null && tokPerSec == null) {
+        rows.push(_jsx(SectionLine, { label: "speed", value: `~${fmt(liveTokPerSec)} tok/s`, color: theme.accent }, "speed"));
+    }
+    if (ctxDisplay != null)
+        rows.push(_jsx(SectionLine, { label: "ctx", value: ctxDisplay }, "ctx"));
+    if (cost > 0)
+        rows.push(_jsx(SectionLine, { label: "cost", value: `$${cost < 0.01 ? cost.toFixed(4) : cost.toFixed(2)}` }, "cost"));
+    if (elapsedSec != null) {
+        rows.push(_jsx(SectionLine, { label: "elapsed", value: `${Math.floor(elapsedSec / 60)}:${String(elapsedSec % 60).padStart(2, "0")}` }, "elapsed"));
+    }
+    if (state.usage.cachedTokens > 0) {
+        rows.push(_jsx(SectionLine, { label: "cached", value: fmt(state.usage.cachedTokens) }, "cached"));
+    }
+    if (state.guardrailCount > 0) {
+        rows.push(_jsx(SectionLine, { label: "guard", value: String(state.guardrailCount), color: theme.warn }, "guard"));
+    }
+    return rows;
+}
+function MetricsSection({ rows }) {
+    return (_jsx(Section, { title: "METRICS", children: rows.length === 0 ? (_jsx(Text, { dimColor: true, children: "  starting\u2026" })) : (_jsx(Box, { flexDirection: "column", flexShrink: 0, children: rows })) }));
 }
 // ── Phases (plan › explore › edit › build › verify — vertical) ───────────────
 const PHASES = ["plan", "explore", "edit", "build", "verify"];
@@ -116,7 +158,80 @@ function SubagentSection({ state }) {
         }) }));
 }
 // ── 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(SubagentSection, { state: state }), _jsx(BuildSection, { state: state, config: config })] }));
+/** Chiều cao ước lượng (gồm title + marginBottom=1) của các section tĩnh. */
+const SESSION_ROWS = 4; // title + model + dir
+const PHASES_ROWS = 7; // title + 5 phase
+const PHASES_IDLE_ROWS = 3; // title + "— idle"
+/**
+ * Sidebar phải — mọi trạng thái sống của run, cập nhật theo AgentEvent.
+ *
+ * Thứ tự section CỐ ĐỊNH (layout gốc): SESSION → MCP → METRICS → PHASES →
+ * PLAN → SUBAGENTS → BUILD.
+ *
+ * Height-aware: nội dung sidebar thường CAO HƠN chiều cao khả dụng (terminal
+ * 24–30 dòng trừ BuildRail/input/StatusBar). Greedy-fit theo đúng thứ tự
+ * hiển thị với budget chiều cao thật (`rows` do app.tsx đo từ khung chính):
+ * section nào không vừa trọn vẹn thì BỎ QUA (không clip nửa chừng). Riêng
+ * PLAN co giãn được — cap số dòng theo chỗ còn lại + dòng "… +N more".
+ *
+ * `rows` = chiều cao ngoài của sidebar (= chiều cao chat viewport cùng hàng).
+ * undefined/0 (chưa đo xong) → không giới hạn (behavior cũ, dùng trong tests).
+ */
+export function Sidebar({ state, config, rows }) {
+    const avail = rows != null && rows > 0 ? Math.max(8, rows - 2 /* border trên/dưới */) : Number.POSITIVE_INFINITY;
+    let used = SESSION_ROWS;
+    const fits = (h) => used + h <= avail;
+    const body = [];
+    // MCP — tĩnh theo config.
+    const mcpH = 1 + Math.max(1, Object.keys(config.mcpServers ?? {}).length) + 1;
+    if (fits(mcpH)) {
+        used += mcpH;
+        body.push(_jsx(McpSection, { state: state, config: config }, "mcp"));
+    }
+    // METRICS — sống theo run.
+    const metricsRows = buildMetricsRows(state);
+    const metricsH = 1 + Math.max(1, metricsRows.length) + 1;
+    if (fits(metricsH)) {
+        used += metricsH;
+        body.push(_jsx(MetricsSection, { rows: metricsRows }, "metrics"));
+    }
+    // PHASES.
+    const phasesH = state.phases.length === 0 ? PHASES_IDLE_ROWS : PHASES_ROWS;
+    if (fits(phasesH)) {
+        used += phasesH;
+        body.push(_jsx(PhaseSection, { state: state }, "phases"));
+    }
+    // PLAN — co giãn theo chỗ còn lại (plan rows từng dòng tự có nghĩa, khác
+    // các section all-or-nothing). Overhead = title + dòng đếm + margin = 3;
+    // khi bị cap chừa thêm 1 dòng "… +N more".
+    const planItems = state.plan ?? [];
+    if (planItems.length === 0) {
+        if (fits(3)) {
+            used += 3;
+            body.push(_jsx(PlanSection, { state: state, cap: MAX_PLAN_ROWS }, "plan"));
+        }
+    }
+    else {
+        let cap = Math.min(MAX_PLAN_ROWS, planItems.length, avail - used - 3);
+        if (cap < planItems.length)
+            cap -= 1; // chừa dòng "… +N more"
+        if (cap >= 1) {
+            used += 3 + cap + (cap < planItems.length ? 1 : 0);
+            body.push(_jsx(PlanSection, { state: state, cap: cap }, "plan"));
+        }
+    }
+    // SUBAGENTS — chỉ khi có.
+    if (state.subagents.length > 0) {
+        const h = 1 + state.subagents.length + 1;
+        if (fits(h)) {
+            used += h;
+            body.push(_jsx(SubagentSection, { state: state }, "subagents"));
+        }
+    }
+    // BUILD — lamp đã có trên BuildRail header, ưu tiên cuối.
+    const buildH = 1 + 1 + (state.buildCmd || config.buildCmd ? 1 : 0) + 1;
+    if (fits(buildH)) {
+        body.push(_jsx(BuildSection, { state: state, config: config }, "build"));
+    }
+    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 }), body] }));
 }

package/dist/tui/state.js

@@ -1,3 +1,4 @@
+import { toolPhase } from "./selectors.js";
 export function initialState() {
     return {
         items: [],
@@ -28,78 +29,12 @@ export function initialState() {
         queue: { pending: 0, steering: 0 },
         verification: null,
         subagents: [],
+        plan: null,
     };
 }
 const MAX_ITEMS = 400;
 const MAX_OUTPUT_CHARS = 20_000;
 const MAX_TEXT_CHARS = 40_000;
-/**
- * T4: ước lượng chiều cao (rows) của một ChatItem khi render — dùng cho
- * virtualization (chỉ render window quanh viewport thay vì cap cứng).
- * Over-estimate nhẹ an toàn hơn under-estimate (viewport luôn đủ phủ).
- * ponytail: heuristic theo chars, không đo Ink thật — nâng cấp thành đo
- * height thật (useBoxMetrics per item) khi heuristic lệch đáng kể.
- */
-export function estimateItemRows(item) {
-    switch (item.kind) {
-        case "user":
-            return 2 + Math.ceil(item.text.length / 80);
-        case "assistant":
-        case "thinking":
-            return 1 + Math.ceil((item.text?.length ?? 0) / 80) + (item.text ? item.text.split("\n").length : 0);
-        case "tool":
-            return 1 + 2; // title + preview 2 lines
-        case "compaction":
-            return 1;
-        case "diff":
-            return 3 + Math.min(24, (item.text?.split("\n").length ?? 0)); // header + ≤24 lines + border
-        case "todo":
-            return 2 + item.items.length;
-        case "build":
-            return 1;
-        case "notice":
-            return 1 + Math.ceil(item.text.length / 2000);
-    }
-}
-/**
- * T4: chọn window item để render: lấy từ cuối lên tới khi tổng rows ước
- * lượng ≥ viewportRows + margin (render dư phía trên để scroll mượt), nhưng
- * giữ toàn bộ khi tổng nhỏ. Trả về slice của items (không mutate).
- */
-export function visibleWindow(items, viewportRows, margin = 50) {
-    const budget = viewportRows + margin;
-    let acc = 0;
-    let start = items.length;
-    while (start > 0 && acc < budget) {
-        start--;
-        acc += estimateItemRows(items[start]);
-    }
-    return start === 0 ? items : items.slice(start);
-}
-/**
- * Plan mới nhất cho sidebar — todo items được append mỗi lần update nhưng
- * sidebar chỉ cần snapshot hiện tại (last-wins), null khi chưa có plan.
- *
- * Reset realtime: mỗi lần user gửi message mới, plan reset — chỉ hiện plan
- * được viết SAU user message cuối cùng. Tránh stale plan từ task trước hiện
- * trong task mới.
- */
-export function latestPlan(items) {
-    // Tìm user message cuối cùng — plan chỉ reset tại đây.
-    let lastUserIdx = -1;
-    for (let i = items.length - 1; i >= 0; i--) {
-        if (items[i].kind === "user") {
-            lastUserIdx = i;
-            break;
-        }
-    }
-    // Chỉ tìm todo SAU user cuối.
-    for (let i = items.length - 1; i > lastUserIdx; i--) {
-        if (items[i].kind === "todo")
-            return items[i];
-    }
-    return null;
-}
 function appendItem(state, item) {
     state.items.push(item);
     if (state.items.length > MAX_ITEMS)
@@ -108,33 +43,21 @@ function appendItem(state, item) {
 function lastItem(state) {
     return state.items[state.items.length - 1];
 }
+/**
+ * Thay một chat item bằng bản copy đã patch — KHÔNG mutate in-place.
+ * ChatItemView là React.memo: mutate in-place khiến prevProps.item ===
+ * nextProps.item (cùng object), comparator so object với chính nó luôn
+ * "bằng" → memo đóng băng UI (stream đứng ở chunk đầu, tool kẹt "running").
+ */
+function patchItem(state, index, patch) {
+    state.items[index] = { ...state.items[index], ...patch };
+}
 /** Cap long strings, keeping the tail (errors usually live at the end). */
 function capTail(text, max = MAX_OUTPUT_CHARS) {
     if (text.length <= max)
         return text;
     return `…[truncated ${text.length - max} chars]\n${text.slice(text.length - max)}`;
 }
-/**
- * Map tên tool → phase của breadcrumb (plan→explore→edit→build→verify).
- * Trả về null với tool không thuộc phase nào (mcp__*...).
- */
-export function toolPhase(name) {
-    if (name === "write_todos")
-        return "plan";
-    if (name === "list_files" || name === "read_file" || name === "grep" || name === "glob" || name === "web_fetch" || name === "load_skill" || name === "repo_map")
-        return "explore";
-    if (name === "write_file" || name === "edit_file" || name === "apply_patch")
-        return "edit";
-    if (name === "run_command")
-        return "build";
-    if (name === "task")
-        return "delegate";
-    if (name === "ask_user")
-        return "clear";
-    if (name.startsWith("mcp__"))
-        return "mcp";
-    return null;
-}
 /** Guardrail event: đếm + giữ decision gần nhất (ngắn, tự giải thích cho header). */
 function applyGuardrail(state, ev) {
     // history-trim là routine context management — đếm làm gì, hiện làm gì:
@@ -154,6 +77,9 @@ function applyGuardrail(state, ev) {
     };
     state.lastGuardrail = HUMAN[ev.rule] ?? `${ev.rule}: ${ev.reason}`;
 }
+// Pure selectors live in ./selectors.js (Phase 5.4) — re-exported so existing
+// import sites (app.tsx, hooks, tests) keep working unchanged.
+export { estimateItemRows, visibleWindow, latestPlan, toolPhase } from "./selectors.js";
 /**
  * Fold one AgentEvent into the state (mutates `state`, returns it for
  * reducer-style chaining). Unknown events are ignored.
@@ -197,6 +123,8 @@ export function applyEvent(state, ev) {
             if (!(last && last.kind === "user" && last.text === ev.task)) {
                 appendItem(state, { kind: "user", text: ev.task });
             }
+            // Plan của task trước không được lọt sang task mới.
+            state.plan = null;
             break;
         }
         case "llm_reasoning": {
@@ -206,9 +134,10 @@ export function applyEvent(state, ev) {
                 break;
             const last = lastItem(state);
             if (last && last.kind === "thinking" && last.streaming) {
-                last.text += ev.delta;
-                if (last.text.length > MAX_TEXT_CHARS)
-                    last.text = last.text.slice(-MAX_TEXT_CHARS);
+                let text = last.text + ev.delta;
+                if (text.length > MAX_TEXT_CHARS)
+                    text = text.slice(-MAX_TEXT_CHARS);
+                patchItem(state, state.items.length - 1, { text });
             }
             else {
                 appendItem(state, { kind: "thinking", text: ev.delta, streaming: true });
@@ -224,10 +153,9 @@ export function applyEvent(state, ev) {
             state.llmCallStartedAt = Date.now();
             // A new step starts: close any still-"streaming" assistant message.
             const last = lastItem(state);
-            if (last && last.kind === "assistant" && last.streaming)
-                last.streaming = false;
-            if (last && last.kind === "thinking" && last.streaming)
-                last.streaming = false;
+            if (last && (last.kind === "assistant" || last.kind === "thinking") && last.streaming) {
+                patchItem(state, state.items.length - 1, { streaming: false });
+            }
             break;
         }
         case "llm_delta": {
@@ -237,14 +165,15 @@ export function applyEvent(state, ev) {
             state.streamingOutputChars += ev.delta.length;
             const last = lastItem(state);
             if (last && last.kind === "assistant" && last.streaming) {
-                last.text += ev.delta;
-                if (last.text.length > MAX_TEXT_CHARS)
-                    last.text = last.text.slice(-MAX_TEXT_CHARS);
+                let text = last.text + ev.delta;
+                if (text.length > MAX_TEXT_CHARS)
+                    text = text.slice(-MAX_TEXT_CHARS);
+                patchItem(state, state.items.length - 1, { text });
             }
             else {
                 if (last && last.kind === "assistant" && last.streaming === false && last.text === "") {
                     // reuse an empty assistant placeholder from a previous step
-                    last.streaming = true;
+                    patchItem(state, state.items.length - 1, { streaming: true });
                 }
                 else {
                     appendItem(state, { kind: "assistant", text: ev.delta, streaming: true });
@@ -292,9 +221,10 @@ export function applyEvent(state, ev) {
             for (let i = state.items.length - 1; i >= 0; i--) {
                 const it = state.items[i];
                 if (it.kind === "tool" && it.ok === null && it.name === ev.name) {
-                    it.output += ev.delta;
-                    if (it.output.length > MAX_OUTPUT_CHARS)
-                        it.output = capTail(it.output);
+                    let output = it.output + ev.delta;
+                    if (output.length > MAX_OUTPUT_CHARS)
+                        output = capTail(output);
+                    patchItem(state, i, { output });
                     break;
                 }
                 // Stop searching at the previous tool boundary to avoid cross-attachment.
@@ -310,14 +240,13 @@ export function applyEvent(state, ev) {
                 const it = state.items[i];
                 const match = it.kind === "tool" && it.ok === null && (ev.id ? it.callId === ev.id : it.name === ev.name);
                 if (match) {
-                    it.ok = ev.ok;
-                    if (it.startedAt != null)
-                        it.durationMs = Date.now() - it.startedAt;
-                    // Prefer the final (complete) result over accumulated live chunks.
-                    if (ev.output.length >= it.output.length)
-                        it.output = ev.output;
-                    if (ev.image)
-                        it.image = ev.image;
+                    patchItem(state, i, {
+                        ok: ev.ok,
+                        durationMs: it.startedAt != null ? Date.now() - it.startedAt : it.durationMs,
+                        // Prefer the final (complete) result over accumulated live chunks.
+                        output: ev.output.length >= it.output.length ? ev.output : it.output,
+                        image: ev.image ?? it.image,
+                    });
                     break;
                 }
             }
@@ -344,7 +273,9 @@ export function applyEvent(state, ev) {
             break;
         }
         case "todo": {
-            // Plan updates render as a live checkbox list in the chat pane.
+            // Snapshot last-wins cho sidebar PLAN (field riêng, không bị MAX_ITEMS
+            // eviction xoá trên run dài). Chat item vẫn append để giữ transcript.
+            state.plan = ev.items.map((t) => ({ ...t }));
             appendItem(state, { kind: "todo", items: ev.items.map((t) => ({ ...t })) });
             break;
         }
@@ -401,7 +332,7 @@ export function applyEvent(state, ev) {
                 const it = state.items[i];
                 if (it.kind === "tool" && it.ok === null && (it.callId === ev.id || it.name === ev.name)) {
                     if (ev.message)
-                        it.output = capTail(`${it.output}\n… ${ev.message}`.trim());
+                        patchItem(state, i, { output: capTail(`${it.output}\n… ${ev.message}`.trim()) });
                     break;
                 }
                 if (it.kind === "tool")
@@ -426,10 +357,7 @@ export function applyEvent(state, ev) {
             // Close ALL dangling streaming assistant messages — not just the last
             // item: a notice/tool item appended after the assistant text would
             // otherwise leave it stuck in raw streaming mode (invisible text).
-            for (const it of state.items) {
-                if (it.kind === "assistant" && it.streaming)
-                    it.streaming = false;
-            }
+            state.items = state.items.map((it) => it.kind === "assistant" && it.streaming ? { ...it, streaming: false } : it);
             break;
         }
         case "error": {
@@ -445,7 +373,8 @@ export function markAborted(state) {
     state.summary = "abort requested…";
     state.endedAt = Date.now();
     const last = lastItem(state);
-    if (last && last.kind === "assistant")
-        last.streaming = false;
+    if (last && last.kind === "assistant" && last.streaming) {
+        patchItem(state, state.items.length - 1, { streaming: false });
+    }
     return state;
 }

package/dist/tui/text-width.js

@@ -0,0 +1,139 @@
+/**
+ * Display-width helpers — SINGLE source of truth for measuring, clipping,
+ * padding and wrapping visible text in the TUI.
+ *
+ * Rules:
+ * - Width is measured in terminal cells (via string-width): emoji and CJK are
+ *   2 cells, combining marks (e.g. Vietnamese tone marks) are 0 cells.
+ * - ANSI escape sequences are ignored when measuring, passed through
+ *   untouched, and never split when clipping/wrapping.
+ * - Grapheme clusters (emoji ZWJ sequences, base + combining marks) are never
+ *   split either.
+ *
+ * Every pad/clip/truncate of user-visible strings in src/tui/ must go through
+ * here — never use String.prototype.padEnd/slice directly on display text.
+ */
+import stringWidth from "string-width";
+/** Visible cell width of a string (ANSI ignored, emoji/CJK = 2 cells). */
+export function measure(text) {
+    return stringWidth(text);
+}
+// eslint-disable-next-line no-control-regex -- ANSI escape sequences are control chars by definition
+const ANSI_RX = /\x1b\[[0-9;?]*[a-zA-Z]|\x1b\][^\x07]*\x07/g;
+/** Split into tokens: ANSI sequences (width 0) vs plain text chunks. */
+function tokenize(text) {
+    const tokens = [];
+    let last = 0;
+    for (const m of text.matchAll(ANSI_RX)) {
+        if (m.index > last)
+            tokens.push({ ansi: false, value: text.slice(last, m.index) });
+        tokens.push({ ansi: true, value: m[0] });
+        last = m.index + m[0].length;
+    }
+    if (last < text.length)
+        tokens.push({ ansi: false, value: text.slice(last) });
+    return tokens;
+}
+/** Iterate grapheme clusters (keeps emoji ZWJ sequences + combining marks whole). */
+function* graphemes(text) {
+    const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
+    for (const seg of segmenter.segment(text))
+        yield seg.segment;
+}
+/** Iterate display units: ANSI tokens (width 0) and grapheme clusters. */
+function* units(text) {
+    for (const token of tokenize(text)) {
+        if (token.ansi) {
+            yield { value: token.value, width: 0 };
+        }
+        else {
+            for (const g of graphemes(token.value))
+                yield { value: g, width: stringWidth(g) };
+        }
+    }
+}
+/** Slice to the longest prefix fitting `width` cells (no ellipsis). */
+export function sliceCells(text, width) {
+    if (width <= 0)
+        return "";
+    if (measure(text) <= width)
+        return text;
+    let out = "";
+    let used = 0;
+    for (const u of units(text)) {
+        if (u.width > 0 && used + u.width > width)
+            break;
+        out += u.value;
+        used += u.width;
+    }
+    return out;
+}
+/**
+ * Clip to at most `width` cells, appending "…" when truncated.
+ * Never splits a grapheme cluster or ANSI sequence.
+ */
+export function clipCells(text, width) {
+    const safe = Math.max(1, width);
+    if (measure(text) <= safe)
+        return text;
+    return sliceCells(text, Math.max(0, safe - 1)) + "…";
+}
+/** padEnd by display cells (pads with spaces to exactly `width` cells). */
+export function padEndCells(text, width) {
+    const missing = width - measure(text);
+    return missing > 0 ? text + " ".repeat(missing) : text;
+}
+/** padStart by display cells. */
+export function padStartCells(text, width) {
+    const missing = width - measure(text);
+    return missing > 0 ? " ".repeat(missing) + text : text;
+}
+/**
+ * Word-wrap to `width` cells. Breaks at spaces when possible; hard-breaks
+ * long words at the cell boundary. Returns at least one line per input line.
+ * ANSI sequences and grapheme clusters are never split.
+ */
+export function wrapCells(text, width) {
+    const safe = Math.max(4, width);
+    const out = [];
+    for (const rawLine of text.split("\n")) {
+        if (measure(rawLine) <= safe) {
+            out.push(rawLine);
+            continue;
+        }
+        let line = "";
+        let lineW = 0;
+        for (const word of rawLine.split(/(\s+)/)) {
+            if (word === "")
+                continue;
+            const wordW = measure(word);
+            if (lineW + wordW <= safe) {
+                line += word;
+                lineW += wordW;
+                continue;
+            }
+            // Word fits on a fresh line → break before it.
+            if (wordW <= safe && word.trim() !== "") {
+                if (line.trim() !== "")
+                    out.push(line.trimEnd());
+                line = word.trimStart();
+                lineW = measure(line);
+                continue;
+            }
+            // Long word (or whitespace overflow): hard-break by cells.
+            for (const u of units(word)) {
+                if (u.width > 0 && lineW + u.width > safe) {
+                    out.push(line);
+                    line = "";
+                    lineW = 0;
+                }
+                if (u.width > 0 && u.value.trim() === "" && line === "")
+                    continue; // drop leading ws
+                line += u.value;
+                lineW += u.width;
+            }
+        }
+        out.push(line.trimEnd());
+    }
+    return out;
+}

package/dist/tui/theme.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "ink";
+import { clipCells } from "./text-width.js";
 import { readFileSync, existsSync } from "node:fs";
 import { join } from "node:path";
 const MISSION = {
@@ -36,10 +37,14 @@ export const THEMES = {
     mission: MISSION, paper: PAPER, mono: MONO,
     light: LIGHT, "high-contrast": HIGH_CONTRAST, solarized: SOLARIZED,
 };
+/** NO_COLOR spec (no-color.org): mọi giá trị non-empty ≠ "0" đều tắt màu. */
+function noColorSet(v) {
+    return v !== undefined && v !== "" && v !== "0";
+}
 export function defaultThemeName(env = process.env) {
     if (env.SCODER_THEME && THEMES[env.SCODER_THEME])
         return env.SCODER_THEME;
-    if (env.SCODER_PLAIN === "1" || env.NO_COLOR === "1" || process.env.NO_COLOR === "1")
+    if (env.SCODER_PLAIN === "1" || noColorSet(env.NO_COLOR) || noColorSet(process.env.NO_COLOR))
         return "mono";
     if (env.TERM === "dumb" || !env.TERM)
         return "mono";
@@ -86,7 +91,7 @@ export function toolIcon(name) {
     return "🔧";
 }
 export function fit(text, max) {
-    return text.length <= max ? text : text.slice(0, Math.max(0, max - 1)) + "…";
+    return clipCells(text, max);
 }
 /** The agent's signature mark, used as an avatar on assistant output. */
 export function AgentMark() {

package/dist/{build.js → workspace/build.js}

@@ -1,6 +1,6 @@
 import { existsSync, readFileSync } from "node:fs";
 import { resolve } from "node:path";
-import { toolRunCommand } from "./tools.js";
+import { toolRunCommand } from "../tools/run-command.js";
 /** Detect a sensible build command from project files in workdir. */
 export function detectBuildCommand(workdir) {
     const pkgPath = resolve(workdir, "package.json");