s-app-scoder-agent 0.9.10 → 0.9.15

package/dist/tools/run-command.js

@@ -116,23 +116,34 @@ export async function toolRunCommand(workdir, args, signal, onOutput, sandbox, r
             cwd: workdir,
             stdio: ["ignore", "pipe", "pipe"],
             env: buildChildEnv(workdir), // G3: allowlist — không kế thừa full process.env
+            // Own process group so killTree(-pid) can reap grandchildren (see killTree).
+            detached: process.platform !== "win32",
         });
+        let exited = false;
         let stdout = "";
         let stderr = "";
         let killedReason = null;
-        const killChild = (reason) => {
-            killedReason = reason;
+        // Linux/macOS: sh fork command con (sleep, make, npm…) rồi chết trước —
+        // kill mỗi `child` để chúng mồ côi, còn giữ PIPE => 'close' không bao giờ
+        // tới, tool treo, run không finish (fail CI serve-abort reproducibly).
+        // detached:true cho child một process group riêng -> kill cả nhóm qua -pid.
+        const killTree = (sig) => {
             try {
-                child.kill("SIGTERM");
+                if (process.platform !== "win32" && child.pid)
+                    process.kill(-child.pid, sig);
+                else
+                    child.kill(sig);
             }
-            catch { /* already dead */ }
-            // SIGKILL fallback if the process ignores SIGTERM
+            catch { /* already dead / group gone */ }
+        };
+        const killChild = (reason) => {
+            killedReason = reason;
+            killTree("SIGTERM");
+            // SIGKILL escalation — sh chết nhưng GRANDCHILD ignore TERM thì group
+            // vẫn sống; exitCode của bản thân sh không phản ánh điều đó, dùng `exited`.
             setTimeout(() => {
-                try {
-                    if (child.exitCode === null)
-                        child.kill("SIGKILL");
-                }
-                catch { /* already dead */ }
+                if (!exited)
+                    killTree("SIGKILL");
             }, 5_000).unref();
         };
         const timer = setTimeout(() => killChild("timeout"), timeoutMs);
@@ -156,34 +167,41 @@ export async function toolRunCommand(workdir, args, signal, onOutput, sandbox, r
         child.on("error", (err) => {
             finish({ ok: false, output: clamp(`${echoLine}\n(spawn error) ${err.message}`) });
         });
-        child.on("close", (code) => {
+        const buildResult = (code) => {
             if (killedReason === "timeout") {
-                finish({
+                return {
                     ok: false,
                     output: clamp(`${echoLine}\n(command timed out after ${Math.round(timeoutMs / 1000)}s and was killed)\n--- stdout ---\n${redactSecrets(stdout)}\n--- stderr ---\n${redactSecrets(stderr)}`),
-                });
-                return;
+                };
             }
             if (killedReason === "aborted") {
-                finish({
+                return {
                     ok: false,
                     output: clamp(`${echoLine}\n(interrupted by user)\n--- stdout ---\n${redactSecrets(stdout)}\n--- stderr ---\n${redactSecrets(stderr)}`),
-                });
-                return;
+                };
             }
             const status = code ?? -1;
             // G3: redact trước khi output vào conversation/log/TUI.
             const redacted = redactSecrets(stdout);
             const redactedErr = redactSecrets(stderr);
             if (status === 0) {
-                finish({ ok: true, output: clamp(`${echoLine}\n(exit 0)\n${redacted}`) });
-            }
-            else {
-                finish({
-                    ok: false,
-                    output: clamp(`${echoLine}\n(exit ${status})\n--- stdout ---\n${redacted}\n--- stderr ---\n${redactedErr}`),
-                });
+                return { ok: true, output: clamp(`${echoLine}\n(exit 0)\n${redacted}`) };
             }
+            return {
+                ok: false,
+                output: clamp(`${echoLine}\n(exit ${status})\n--- stdout ---\n${redacted}\n--- stderr ---\n${redactedErr}`),
+            };
+        };
+        // 'close' chờ EOF của pipe; grandchild lì (khác process group — hiếm, hoặc
+        // spawn của chính command) có thể giữ nó mở vĩnh viễn. Đã kill mà child
+        // exit rồi thì resolve ngay trên 'exit', đừng đợi close.
+        child.on("exit", (code) => {
+            exited = true;
+            if (killedReason)
+                finish(buildResult(code));
+        });
+        child.on("close", (code) => {
+            finish(buildResult(code));
         });
     });
 }

package/dist/tools/search.js

@@ -91,7 +91,14 @@ export function toolGrep(workdir, args) {
             // status >= 2 → rg error; fall through to grep fallback.
         }
         // Fallback: grep -rn (portable) — output already path:line:text.
+        // CI runners (ubuntu-latest) không có rg → đường này là mainstream, phải
+        // hỗ trợ include + skip noise dirs như rg; grep BSD không hiểu các cờ này
+        // sẽ exit ≥2 → rơi tiếp xuống jsGrepFallback (xử lý đúng, không mất sạch).
         const gArgs = ["-rn", "--binary-files=without-match", "-I", "-m", "5", "-e", pattern];
+        for (const d of SEARCH_SKIP)
+            gArgs.push(`--exclude-dir=${d}`);
+        if (args.include)
+            gArgs.push("--include", args.include);
         if (ctxBefore > 0)
             gArgs.push("-B", String(ctxBefore));
         if (ctxAfter > 0)

package/dist/tui/app.js

@@ -73,6 +73,8 @@ export function TuiApp({ config, initialTask }) {
     const [input, setInput] = useState(initialTask ?? "");
     /** Rows scrolled up from the bottom; 0 = follow the newest content. */
     const [scrollOffset, setScrollOffset] = useState(0);
+    /** Ctrl+O: native terminal text selection (mouse tracking released). */
+    const [selectMode, setSelectMode] = useState(false);
     const [permMode, setPermMode] = useState(cfg.permissionMode);
     // T-03: active permission prompt (modal) — the run blocks until answered.
     const [permPrompt, setPermPrompt] = useState(null);
@@ -102,7 +104,7 @@ export function TuiApp({ config, initialTask }) {
     // Scroll offset khi đọc lại dùng rows ước lượng; khi BÁM ĐÁY dùng chiều
     // cao THẬT của cửa sổ đã mount (đo rẻ vì cửa sổ ~viewport+overscan) —
     // estimate sai lệch bao nhiêu thì dòng cuối vẫn luôn thấy.
-    const { viewportRef, viewport, contentRef, content, viewportRowsRef } = useScrollMetrics(setScrollOffset);
+    const { viewportRef, viewport, contentRef, content, viewportRowsRef } = useScrollMetrics(setScrollOffset, !selectMode);
     const viewportRows = viewport.clientHeight || 24;
     const win = useMemo(() => {
         const total = estimateTotalRows(state.items);
@@ -154,8 +156,19 @@ export function TuiApp({ config, initialTask }) {
     useTuiKeybinds({
         scrollOffset, permPromptRef, setPermPrompt, agentRef, runningRef, sessionPickerOpen,
         setSessionPickerOpen, setPaletteOpen, inputRef, setHelpOpen, update, viewportRowsRef,
-        setScrollOffset, exit,
+        setScrollOffset, selectMode, setSelectMode, exit,
     });
+    // WARMUP (plan/WARMUP-PLAN.md): tạo agent + prefill prefix system+tools nền
+    // NGAY khi mở TUI — TTFT của câu chat đầu không còn phải trả cold-load model
+    // và 20–60k token prefill. Bỏ qua khi có initialTask (submit trả prefill ngay
+    // sau mount, warm-up chỉ nhân đôi việc — settleWarmup sẽ abort nó).
+    const warmupRef = useRef(false);
+    useEffect(() => {
+        if (initialTask || warmupRef.current)
+            return;
+        warmupRef.current = true;
+        void createAgent().warmup();
+    }, [initialTask]);
     // Submit an initial task passed on the command line once, after mount.
     const bootRef = useRef(false);
     useEffect(() => {
@@ -190,7 +203,7 @@ export function TuiApp({ config, initialTask }) {
     _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: contentOffset, children: _jsxs(Box, { ref: contentRef, flexDirection: "column", paddingX: 1, flexShrink: 0, children: [state.items.length === 0 ? (
                                 // Welcome: căn giữa cả 2 chiều — height = chiều cao đo được của
                                 // viewport (flexGrow không giãn được vì content box flexShrink=0).
-                                _jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", height: viewport.clientHeight || undefined, children: [(columns ?? 100) - (showSidebar ? SIDEBAR_WIDTH + 2 : 4) >= 54 ? (_jsx(Box, { flexDirection: "column", alignItems: "center", children: (isAsciiMode() ? BANNER_ASCII : BANNER).map((line, i) => (_jsx(Text, { bold: true, color: theme.brand, children: line }, i))) })) : (_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 the agent plans, edits, and builds" }), _jsx(Text, {}), _jsxs(Text, { children: [_jsx(Text, { bold: true, color: theme.accent, children: "\u23CE" }), _jsx(Text, { dimColor: true, children: " send   " }), _jsx(Text, { bold: true, color: theme.accent, children: "ctrl+s" }), _jsx(Text, { dimColor: true, children: " sessions   " }), _jsx(Text, { bold: true, color: theme.accent, children: "tab" }), _jsx(Text, { dimColor: true, children: " complete   " }), _jsx(Text, { bold: true, color: theme.accent, children: "/help" }), _jsx(Text, { dimColor: true, children: " commands" })] })] })) : (state.items.slice(win.start, win.end).map((item, i) => (_jsx(ChatItemView, { item: item, width: (columns ?? 100) - (showSidebar ? SIDEBAR_WIDTH + 2 : 4) }, win.start + i)))), lastSummary && (_jsx(Box, { marginTop: 1, children: state.status === "success" ? (_jsxs(Text, { color: theme.success, bold: true, children: ["\u2714 ", lastSummary] })) : state.status === "aborted" ? (_jsxs(Text, { color: theme.warn, bold: true, children: ["\u23F9 ", lastSummary] })) : (_jsxs(Text, { color: theme.error, bold: true, children: ["\u2718 ", lastSummary] })) }))] }) }), showSidebar && _jsx(Sidebar, { state: state, config: cfg, rows: viewport.clientHeight || undefined })] }), sessionPickerOpen && (_jsx(SessionPicker, { workdir: cfg.workdir, onSelect: handleSessionSelect, onClose: () => setSessionPickerOpen(false) })), paletteOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: boxBorderStyle(), 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: boxBorderStyle(), 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: 0, paddingBottom: 0, 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 })] }));
+                                _jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", height: viewport.clientHeight || undefined, children: [(columns ?? 100) - (showSidebar ? SIDEBAR_WIDTH + 2 : 4) >= 54 ? (_jsx(Box, { flexDirection: "column", alignItems: "center", children: (isAsciiMode() ? BANNER_ASCII : BANNER).map((line, i) => (_jsx(Text, { bold: true, color: theme.brand, children: line }, i))) })) : (_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 the agent plans, edits, and builds" }), _jsx(Text, {}), _jsxs(Text, { children: [_jsx(Text, { bold: true, color: theme.accent, children: "\u23CE" }), _jsx(Text, { dimColor: true, children: " send   " }), _jsx(Text, { bold: true, color: theme.accent, children: "ctrl+s" }), _jsx(Text, { dimColor: true, children: " sessions   " }), _jsx(Text, { bold: true, color: theme.accent, children: "tab" }), _jsx(Text, { dimColor: true, children: " complete   " }), _jsx(Text, { bold: true, color: theme.accent, children: "/help" }), _jsx(Text, { dimColor: true, children: " commands" })] }), _jsxs(Text, { children: [_jsx(Text, { bold: true, color: theme.accent, children: "ctrl+o" }), _jsx(Text, { dimColor: true, children: " select/copy (t\u1EAFt mouse tracking \u0111\u1EC3 t\u00F4 \u0111en k\u00E9o chu\u1ED9t)" })] }), state.warmup?.active && (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: state.warmup.message ?? "đang warm-up…" }), _jsxs(Box, { children: [_jsxs(Text, { color: theme.accent, children: ["█".repeat(Math.round((state.warmup.percent / 100) * 32)), "░".repeat(32 - Math.round((state.warmup.percent / 100) * 32))] }), _jsxs(Text, { dimColor: true, children: [" ", state.warmup.percent, "%"] })] })] }))] })) : (state.items.slice(win.start, win.end).map((item, i) => (_jsx(ChatItemView, { item: item, width: (columns ?? 100) - (showSidebar ? SIDEBAR_WIDTH + 2 : 4) }, win.start + i)))), lastSummary && (_jsx(Box, { marginTop: 1, children: state.status === "success" ? (_jsxs(Text, { color: theme.success, bold: true, children: ["\u2714 ", lastSummary] })) : state.status === "aborted" ? (_jsxs(Text, { color: theme.warn, bold: true, children: ["\u23F9 ", lastSummary] })) : (_jsxs(Text, { color: theme.error, bold: true, children: ["\u2718 ", lastSummary] })) }))] }) }), showSidebar && _jsx(Sidebar, { state: state, config: cfg, rows: viewport.clientHeight || undefined })] }), sessionPickerOpen && (_jsx(SessionPicker, { workdir: cfg.workdir, onSelect: handleSessionSelect, onClose: () => setSessionPickerOpen(false) })), paletteOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: boxBorderStyle(), 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: boxBorderStyle(), 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: 0, paddingBottom: 0, 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, selectMode: selectMode })] }));
 }
 /** Mount the TUI (called from the `scoder tui` subcommand). */
 export async function runTui(config, initialTask) {

package/dist/tui/charset.js

@@ -6,6 +6,18 @@
  * ASCII mode activates when SCODER_ASCII=1 or TERM=dumb. Colors are NOT
  * handled here: Ink/chalk already respect NO_COLOR and FORCE_COLOR.
  */
+// Connection-mask glyph table: index = up(1) | right(2) | down(4) | left(8).
+// A cell shows the arms it has: up+right=╰ · up+left=╯ · down+right=┌ ·
+// down+left=┐ · no-left=├ · no-right=┤ · no-down=┴ · no-up=┬ — so elbow
+// routing needs no corner special-casing.
+const LINE_UNICODE = [
+    " ", "│", "─", "╰", "│", "│", "┌", "├",
+    "─", "╯", "─", "┴", "┐", "┤", "┬", "┼",
+];
+const LINE_ASCII = [
+    " ", "|", "-", "+", "|", "|", "+", "+",
+    "-", "+", "-", "+", "+", "+", "+", "+",
+];
 const UNICODE = {
     tl: "┌", tr: "┐", bl: "└", br: "┘",
     h: "─", v: "│",
@@ -15,6 +27,13 @@ const UNICODE = {
     ok: "✓", fail: "✗", active: "◆", pending: "○",
     cont: "↪",
     spinner: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
+    line: LINE_UNICODE,
+    hHeavy: "═", vHeavy: "║", hDotted: "╌", vDotted: "┆",
+    arrowUp: "▲", arrowRight: "▶", arrowDown: "▼", arrowLeft: "◀",
+    cornerRect: ["┌", "┐", "┘", "└"],
+    cornerRound: ["╭", "╮", "╯", "╰"],
+    cornerDiamond: ["╱", "╲", "╱", "╲"],
+    loop: "↩",
 };
 const ASCII = {
     tl: "+", tr: "+", bl: "+", br: "+",
@@ -25,6 +44,13 @@ const ASCII = {
     ok: "v", fail: "x", active: ">", pending: "o",
     cont: ">",
     spinner: ["-", "\\", "|", "/"],
+    line: LINE_ASCII,
+    hHeavy: "=", vHeavy: "|", hDotted: ".", vDotted: ":",
+    arrowUp: "^", arrowRight: ">", arrowDown: "v", arrowLeft: "<",
+    cornerRect: ["+", "+", "+", "+"],
+    cornerRound: ["+", "+", "+", "+"],
+    cornerDiamond: ["/", "\\", "/", "\\"],
+    loop: "<-",
 };
 export function isAsciiMode() {
     return process.env.SCODER_ASCII === "1" || process.env.TERM === "dumb";

package/dist/tui/chrome.js

@@ -67,9 +67,10 @@ function PhaseBreadcrumb({ phases }) {
 /** Metrics cho narrow-terminal — không còn dùng (sidebar đã thay thế), giữ để tham khảo. */
 /**
  * Status bar — bottom row. Left: spinner · status · elapsed · model.
- * Right: scroll position OR keyboard hints.
+ * Right: scroll position OR keyboard hints. In select mode (Ctrl+O) the hints
+ * swap to the copy reminder — the mouse belongs to the terminal there.
  */
-export function StatusBar({ state, scroll }) {
+export function StatusBar({ state, scroll, selectMode = false }) {
     const { columns } = useWindowSize();
     const width = Math.max(40, (columns ?? 100) - 6);
     const statusColor = state.status === "running" ? theme.accent :
@@ -86,10 +87,12 @@ export function StatusBar({ state, scroll }) {
             state.status === "aborted" ? "⚠" :
                 state.status === "idle" ? "○" : null;
     const model = state.model || "—";
-    // Right side: scroll position OR helpful keybinds
-    const rightText = scroll
-        ? `scroll ${scroll} · esc→tail`
-        : `⏎ send · ctrl+s sessions · ctrl+t ${state.thinkingVisible ? "◉" : "○"} · esc abort · ctrl+c quit`;
+    // Right side: select-mode reminder OR scroll position OR keybind hints
+    const rightText = selectMode
+        ? "⊝ select · drag to highlight · ⌘C/ctrl+c copy · ctrl+o back"
+        : scroll
+            ? `scroll ${scroll} · esc→tail`
+            : `⏎ send · ctrl+s sessions · ctrl+t ${state.thinkingVisible ? "◉" : "○"} · esc abort · ctrl+c quit`;
     const leftBudget = Math.max(24, width - rightText.length - 3);
     let left = statusLabel;
     if (model && model !== "—") {

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

@@ -3,13 +3,18 @@ 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;
+    const { scrollOffset, permPromptRef, setPermPrompt, agentRef, runningRef, sessionPickerOpen, setSessionPickerOpen, setPaletteOpen, inputRef, setHelpOpen, update, viewportRowsRef, setScrollOffset, selectMode, setSelectMode, 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]);
+    // useInput closures go stale between renders (same reason as scrollOffsetRef).
+    const selectModeRef = useRef(false);
+    useEffect(() => {
+        selectModeRef.current = selectMode;
+    }, [selectMode]);
     // T-03: permission modal keybinds — intercepts y/a/n/q while open.
     useInput((input, key) => {
         const p = permPromptRef.current;
@@ -47,6 +52,24 @@ export function useTuiKeybinds(deps) {
             update((s) => ({ ...s, thinkingVisible: !s.thinkingVisible }));
             return;
         }
+        // Ctrl+O: toggle select mode — mouse tracking off (native drag-select +
+        // Cmd/Ctrl+C copy) / on (wheel scroll). Scroll with PgUp/PgDn while off.
+        if (key.ctrl && _input === "o") {
+            const next = !selectModeRef.current;
+            selectModeRef.current = next;
+            setSelectMode(next);
+            update((s) => ({
+                ...s,
+                items: [...s.items, {
+                        kind: "notice",
+                        text: next
+                            ? "select mode ON — drag to highlight, copy with ⌘C/Ctrl+C · scroll via PgUp/PgDn · Ctrl+O back to mouse wheel"
+                            : "select mode OFF — mouse wheel scrolling restored",
+                        level: "info",
+                    }],
+            }));
+            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)

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

@@ -1,11 +1,13 @@
 /** Scroll viewport metrics + mouse wheel (SGR 1006) wiring for the TUI.
  * P1-8: contentRef giờ đo CỬA SỔ item đã mount (không phải cả transcript) —
  * chi phí đo O(window) nên vẫn rẻ; số đo thật dùng cho follow-bottom chính
- * xác, ước lượng (transcriptWindow) chỉ dùng khi scroll lên trên. */
+ * xác, ước lượng (transcriptWindow) chỉ dùng khi scroll lên trên.
+ * mouseEnabled=false (select mode, Ctrl+O): nhả mouse tracking để terminal
+ * cho tô đen kéo chuột + copy thường — wheel scroll tắt, dùng PgUp/PgDn. */
 import { useCallback, useEffect, useRef } from "react";
 import { useBoxMetrics, useStdin } from "ink";
 import { parseWheel, MOUSE_ENABLE, MOUSE_DISABLE } from "../mouse.js";
-export function useScrollMetrics(setScrollOffset) {
+export function useScrollMetrics(setScrollOffset, mouseEnabled = true) {
     const viewportRef = useRef(null);
     const contentRef = useRef(null);
     const viewport = useBoxMetrics(viewportRef);
@@ -17,6 +19,8 @@ export function useScrollMetrics(setScrollOffset) {
     // 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).
+    // Select mode (mouseEnabled=false): MOUSE_DISABLE → native terminal drag
+    // selection/copy returns; setRawMode calls stay balanced across toggles.
     const { stdin, setRawMode, isRawModeSupported } = useStdin();
     const wheelScroll = useCallback((dir) => {
         setScrollOffset((o) => Math.max(0, o + (dir === "up" ? 3 : -3)));
@@ -24,6 +28,10 @@ export function useScrollMetrics(setScrollOffset) {
     useEffect(() => {
         if (process.stdout.isTTY !== true || !isRawModeSupported)
             return;
+        if (!mouseEnabled) {
+            process.stdout.write(MOUSE_DISABLE);
+            return;
+        }
         process.stdout.write(MOUSE_ENABLE);
         setRawMode(true);
         const onData = (chunk) => {
@@ -35,7 +43,8 @@ export function useScrollMetrics(setScrollOffset) {
         return () => {
             stdin.off("data", onData);
             process.stdout.write(MOUSE_DISABLE);
+            setRawMode(false);
         };
-    }, [stdin, setRawMode, isRawModeSupported, wheelScroll]);
+    }, [stdin, setRawMode, isRawModeSupported, wheelScroll, mouseEnabled]);
     return { viewportRef, viewport, contentRef, content, viewportRowsRef };
 }

package/dist/tui/markdown/diagram.js

@@ -1,8 +1,12 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { createHash } from "node:crypto";
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
 import { theme } from "../theme.js";
 import { charset } from "../charset.js";
 import { clipCells, measure, padEndCells } from "../text-width.js";
+import { cleanMermaidLabel, renderFlowchart, MAX_GRAPH_ROWS } from "./graph.js";
 // ── Chart / timeline specs (unchanged data formats) ─────────────────────────
 function scalar(value) {
     if (value == null)
@@ -121,9 +125,9 @@ const MERMAID_NODE_RX = /([\p{L}\p{N}_]+)\s*(\[\s*(?:[^\]]*)\s*\]|\(\s*(?:[^)]*)
 /** Node id with optional shape, so `A[Start] --> B{Valid?}` still parses. */
 const NODE_WITH_SHAPE = String.raw `([\p{L}\p{N}_]+)(?:\(\([^)]*\)\)|\[[^\]]*\]|\([^)]*\)|\{[^}]*\})?`;
 const MERMAID_EDGE_RX = new RegExp(NODE_WITH_SHAPE + String.raw `\s*(--?>?|-.->|==>|<--?>|x--?x|o--?o|---)\s*(?:\|([^|]*)\|)?\s*` + NODE_WITH_SHAPE, "gu");
-/** Strip surrounding shape brackets to get the label: "[Start]" → "Start". */
+/** Shape wrapper → display label: `"[Start<br/>2016]"` → `"Start 2016"`. */
 function nodeLabel(shape) {
-    return shape.replace(/^[[({]+|[)\]}]+$/g, "").trim().replace(/^"|"$/g, "");
+    return cleanMermaidLabel(shape.replace(/^[[({]+|[)\]}]+$/g, "").trim());
 }
 export function summarizeMermaid(source) {
     const text = source.join("\n");
@@ -191,15 +195,90 @@ export function summarizeMermaid(source) {
         lines: [`${type || "unknown"} — unknown diagram type`],
     };
 }
-const MERMAID_EXPORT_HINT = "export: npx @mermaid-js/mermaid-cli -i <file> -o out.svg";
 const MAX_SOURCE_LINES = 12;
-/** Mermaid block: structured summary box; unsupported types → source + note. */
+const exported = new Set();
+/** `Angular 12-14 <br/> 2021` → `angular-12-14-2021-a1b2c3`. */
+function diagramSlug(source) {
+    const first = source.join(" ").match(/\["?([^"\]]{3,40})"\?\]/)?.[1] ?? "diagram";
+    const base = first
+        .toLowerCase()
+        .replace(/<[^>]+>/g, " ")
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, 24);
+    const hash = createHash("sha1").update(source.join("\n")).digest("hex").slice(0, 6);
+    return `${base || "diagram"}-${hash}`;
+}
+/**
+ * Save the diagram source so the export hint becomes a command that actually
+ * runs. Idempotent per source and silent on failure — rendering must never
+ * break because the filesystem did. `.scoder/` is gitignored.
+ */
+function exportDiagram(source) {
+    const path = join(".scoder", "diagrams", `${diagramSlug(source)}.mmd`);
+    if (exported.has(path))
+        return path;
+    try {
+        mkdirSync(join(".scoder", "diagrams"), { recursive: true });
+        writeFileSync(path, `${source.join("\n")}\n`, "utf8");
+        exported.add(path);
+        return path;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Export hint, pre-split so the real path is never clipped by a box border:
+ * break before the arguments and indent the continuation line.
+ */
+function exportHintLines(file, width) {
+    if (!file) {
+        return [
+            "export: save these lines to a .mmd file, then",
+            "  npx @mermaid-js/mermaid-cli -i FILE -o diagram.svg",
+        ];
+    }
+    const oneLine = `export: npx @mermaid-js/mermaid-cli -i ${file} -o diagram.svg`;
+    if (measure(oneLine) <= width)
+        return [oneLine];
+    const args = `-i ${file} -o diagram.svg`;
+    return [
+        "export: npx @mermaid-js/mermaid-cli",
+        `  ${measure(args) <= width - 2 ? args : clipCells(args, Math.max(4, width - 2))}`,
+    ];
+}
+/** Cell kind → text props: boxes/edges stay quiet, labels carry the meaning. */
+function cellStyle(kind) {
+    switch (kind) {
+        case "box": return { color: theme.mermaid };
+        case "arrow": return { color: theme.mermaid };
+        case "edge": return { color: theme.dim };
+        case "label": return { bold: true };
+        case "elabel": return { color: theme.accent };
+        default: return {};
+    }
+}
+/** A flowchart drawn for real: box-drawing nodes, routed edges, edge labels. */
+export function FlowchartView({ raster, source, width }) {
+    const file = exportDiagram(source);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: [_jsx(Text, { color: theme.mermaid, bold: true, children: "\u25C9 " }), "flowchart ", raster.direction, " \u00B7 ", raster.nodes, " nodes \u00B7 ", raster.edges, " edges", raster.mode === "strip" ? " · chain layout" : ""] }), raster.rows.map((segs, y) => (_jsx(Text, { children: segs.map((seg, i) => (_jsx(Text, { ...cellStyle(seg.kind), children: seg.text }, i))) }, y))), raster.notes.map((note, i) => (_jsx(Text, { dimColor: true, children: `${charset.bullet} ${clipCells(note, Math.max(8, width - 2))}` }, `note-${i}`))), exportHintLines(file, Math.max(24, width)).map((line, i) => (_jsx(Text, { dimColor: true, children: line }, `hint-${i}`)))] }));
+}
+/**
+ * Mermaid block: draw the graph when it fits the pane; otherwise an honest
+ * structured summary (supported types) or source + note (unsupported).
+ */
 export function MermaidPreview({ source, width }) {
+    const graph = renderFlowchart(source, Math.max(24, width), MAX_GRAPH_ROWS);
+    if (graph)
+        return _jsx(FlowchartView, { raster: graph, source: source, width: width });
     const summary = summarizeMermaid(source);
     if (summary.supported) {
-        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "  \u25C9 mermaid diagram" }), _jsx(ContentBox, { title: "\u25C8 diagram preview", lines: [...summary.lines, "", MERMAID_EXPORT_HINT], width: Math.min(width, 72), color: theme.mermaid })] }));
+        const boxWidth = Math.min(width, 72);
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "  \u25C9 mermaid diagram" }), _jsx(ContentBox, { title: "\u25C8 diagram preview", lines: [...summary.lines, "", ...exportHintLines(exportDiagram(source), boxWidth - 4)], width: boxWidth, color: theme.mermaid })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: ["  \u25C9 mermaid diagram \u2014 ", summary.lines[0]] }), source.slice(0, MAX_SOURCE_LINES).map((l, i) => (_jsxs(Text, { color: theme.mermaid, children: ["  ", clipCells(l, Math.max(8, width - 2))] }, i))), source.length > MAX_SOURCE_LINES && (_jsxs(Text, { dimColor: true, children: ["  \u2026 +", source.length - MAX_SOURCE_LINES, " more lines"] })), _jsxs(Text, { dimColor: true, children: ["  ", MERMAID_EXPORT_HINT] })] }));
+    const file = exportDiagram(source);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: ["  \u25C9 mermaid diagram \u2014 ", summary.lines[0]] }), source.slice(0, MAX_SOURCE_LINES).map((l, i) => (_jsxs(Text, { color: theme.mermaid, children: ["  ", clipCells(l, Math.max(8, width - 2))] }, i))), source.length > MAX_SOURCE_LINES && (_jsxs(Text, { dimColor: true, children: ["  \u2026 +", source.length - MAX_SOURCE_LINES, " more lines"] })), exportHintLines(file, Math.max(24, width - 2)).map((line, i) => (_jsxs(Text, { dimColor: true, children: ["  ", line] }, `hint-${i}`)))] }));
 }
 // ── Chart fence ─────────────────────────────────────────────────────────────
 export function ChartPreview({ spec, width }) {