s-app-scoder-agent 0.6.0 → 0.8.0

package/dist/tui/app.js

@@ -1,225 +1,477 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Full-screen Ink TUI for scoder — "mission control for the build loop".
  *
  * Identity (deliberately distinct from chat-first agent UIs): the build is
  * the mission, so the screen is organized around it —
- *   · Build Rail (top): brand, build-status lamp, step fuel gauge ▰▰▰▱▱▱
+ *   · Build Rail (top): brand, model/permission badges, build lamp, fuel gauge
  *   · Flight-recorder log: each tool entry is stamped `07 ▸ name(args)`
  *   · `✎` diff cards rendered inline for every file edit
+ *   · Assistant messages render as markdown (code fences, headers, lists)
+ *   · Input: ↑/↓ history · Tab command completion · live candidates hint
  * Driven entirely by AgentEvents (the same stream the HTTP/SSE server uses).
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Box, Text, useApp, useInput, useStdout } from "ink";
+import { Box, Text, useApp, useBoxMetrics, useInput, useStdin, useWindowSize } from "ink";
 import { Agent } from "../agent.js";
 import { setQuiet } from "../ui.js";
+import { discoverSkills } from "../skills.js";
+import { discoverAgents } from "../agents.js";
+import { resolveSessionId } from "../session.js";
 import { applyEvent, initialState, markAborted } from "./state.js";
-import { formatSlashHelp, parseSlashCommand } from "./commands.js";
-const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-/** Fuel gauge is scaled to this many cells regardless of maxSteps. */
-const GAUGE_CELLS = 10;
-function useSpinner(active) {
-    const [frame, setFrame] = useState(0);
-    useEffect(() => {
-        if (!active)
-            return;
-        const timer = setInterval(() => setFrame((f) => (f + 1) % SPINNER_FRAMES.length), 80);
-        return () => clearInterval(timer);
-    }, [active]);
-    return SPINNER_FRAMES[frame];
-}
-function formatArgs(args) {
-    return Object.entries(args)
-        .map(([k, v]) => {
-        const s = typeof v === "string" ? v : JSON.stringify(v) ?? "";
-        return `${k}=${s.length > 60 ? s.slice(0, 60) + "…" : s.replace(/\n/g, " ")}`;
-    })
-        .join(" ");
-}
-/** Scaled step fuel gauge: ▰ filled / ▱ remaining, e.g. ▰▰▰▰▱▱▱▱ 4/40. */
-function fuelGauge(step, maxSteps) {
-    if (maxSteps <= 0)
-        return null;
-    const filled = Math.min(GAUGE_CELLS, Math.round((Math.min(step, maxSteps) / maxSteps) * GAUGE_CELLS));
-    return "▰".repeat(filled) + "▱".repeat(GAUGE_CELLS - filled);
-}
-const OUTPUT_PREVIEW_LINES = 4;
-function ToolItemView({ item, spinner }) {
-    const running = item.ok === null;
-    const icon = running ? _jsx(Text, { color: "cyan", children: spinner }) : item.ok ? _jsx(Text, { color: "green", children: "\u2714" }) : _jsx(Text, { color: "red", children: "\u2718" });
-    const lines = item.output.length > 0 ? item.output.replace(/\n+$/, "").split("\n") : [];
-    const preview = lines.slice(-OUTPUT_PREVIEW_LINES);
-    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsxs(Text, { children: [_jsxs(Text, { dimColor: true, children: [String(item.step).padStart(2, "0"), "\u25B8"] }), " ", icon, " ", _jsx(Text, { color: "cyan", children: item.name }), _jsxs(Text, { dimColor: true, children: ["(", formatArgs(item.args), ")"] }), running && _jsx(Text, { dimColor: true, children: " \u00B7 running\u2026" })] }), preview.map((line, i) => (_jsx(Text, { dimColor: i < preview.length - 1, children: line.length > 160 ? line.slice(0, 160) + "…" : line }, i)))] }));
-}
-/** One colored line of a unified diff (+ green, - red, @@ cyan, header bold). */
-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 });
-    if (line.startsWith("+"))
-        return _jsx(Text, { color: "green", children: line });
-    if (line.startsWith("-"))
-        return _jsx(Text, { color: "red", children: line });
-    return _jsx(Text, { children: line });
-}
-const MAX_DIFF_RENDER_LINES = 24;
-function DiffItemView({ item }) {
-    const lines = item.text.length > 0 ? item.text.split("\n") : [];
-    const shown = lines.slice(0, MAX_DIFF_RENDER_LINES);
-    const hidden = lines.length - shown.length;
-    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, children: [_jsxs(Text, { children: [_jsxs(Text, { dimColor: true, children: [String(item.step).padStart(2, "0"), "\u25B8"] }), " ", _jsx(Text, { color: "magenta", bold: true, children: "\u270E" }), " ", _jsxs(Text, { color: "green", children: ["+", item.added] }), " ", _jsxs(Text, { color: "red", children: ["-", item.removed] }), " ", _jsx(Text, { bold: true, children: item.path }), item.truncated && _jsx(Text, { color: "yellow", children: " (diff truncated)" })] }), shown.map((line, i) => (_jsx(DiffLine, { line: line.length > 160 ? line.slice(0, 160) + "…" : line }, i))), hidden > 0 && _jsxs(Text, { dimColor: true, children: ["\u2026 +", hidden, " more diff lines"] })] }));
-}
-function ChatItemView({ item, spinner }) {
-    switch (item.kind) {
-        case "user":
-            return (_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: "blue", bold: true, children: ["\u276F", " "] }), _jsx(Text, { bold: true, children: item.text })] }));
-        case "assistant":
-            return (_jsx(Box, { marginTop: item.text ? 1 : 0, paddingLeft: 1, children: _jsx(Text, { dimColor: item.streaming, children: item.text || (item.streaming ? "" : "(no text)") }) }));
-        case "tool":
-            return _jsx(ToolItemView, { item: item, spinner: spinner });
-        case "diff":
-            return _jsx(DiffItemView, { item: item });
-        case "build":
-            return (_jsxs(Box, { paddingLeft: 1, children: [item.success ? _jsx(Text, { color: "green", bold: true, children: "\u2714 build passed" }) : _jsx(Text, { color: "red", bold: true, children: "\u2718 build failed" }), _jsxs(Text, { dimColor: true, children: [" \u2014 ", item.command] })] }));
-        case "notice":
-            return (_jsx(Box, { paddingLeft: 1, children: _jsxs(Text, { color: item.level === "error" ? "red" : item.level === "warn" ? "yellow" : "gray", children: [item.level === "error" ? "✘ " : "⚠ ", item.text.length > 500 ? item.text.slice(0, 500) + "…" : item.text] }) }));
-    }
-}
-/** Build Rail — scoder's signature top bar: lamp + build command + fuel gauge. */
-function BuildRail({ state, config }) {
-    const lampColor = state.buildLamp === "ok" ? "green" : state.buildLamp === "fail" ? "red" : "gray";
-    const lampLabel = state.buildLamp === "ok" ? "build ok" : state.buildLamp === "fail" ? "build fail" : "no build yet";
-    const gauge = fuelGauge(state.step, state.maxSteps);
-    return (_jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, justifyContent: "space-between", children: [_jsx(Text, { bold: true, color: "magenta", children: "scoder" }), _jsxs(Text, { children: [_jsxs(Text, { color: lampColor, children: ["\u25CF ", lampLabel] }), _jsxs(Text, { dimColor: true, children: [" ", state.buildCmd || config.buildCmd || "auto"] })] }), _jsxs(Text, { children: [gauge && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "magenta", children: gauge }), _jsxs(Text, { dimColor: true, children: [" ", state.step, "/", state.maxSteps] })] })), !gauge && _jsx(Text, { dimColor: true, children: "\u2014 idle" })] })] }));
-}
-function StatusBar({ state, spinner }) {
-    const statusColor = state.status === "running" ? "cyan" : state.status === "success" ? "green" : state.status === "failed" ? "red" : "gray";
-    const statusLabel = state.status === "running" ? `running ${state.step}/${state.maxSteps}` : state.status === "idle" ? "idle" : state.status;
-    return (_jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, justifyContent: "space-between", children: [_jsxs(Text, { children: [_jsx(Text, { color: statusColor, children: state.status === "running" ? `${spinner} ${statusLabel}` : statusLabel }), _jsxs(Text, { dimColor: true, children: [" \u00B7 ", state.model || "—"] }), state.usage.calls > 0 && (_jsxs(Text, { dimColor: true, children: [" ", "\u00B7 tok ", state.usage.inputTokens, "/", state.usage.outputTokens, state.usage.cachedTokens > 0 ? ` (+${state.usage.cachedTokens} cached)` : ""] }))] }), _jsx(Text, { dimColor: true, children: "\u23CE send \u00B7 pgup/pgdn scroll \u00B7 esc abort \u00B7 ctrl+c quit" })] }));
-}
-function Input({ valueRef, value, onChange, onSubmit }) {
-    useInput((input, key) => {
-        const current = valueRef.current;
-        if (key.return) {
-            onSubmit(current);
-            return;
-        }
-        if (key.backspace || key.delete) {
-            const next = current.slice(0, -1);
-            valueRef.current = next;
-            onChange(next);
-            return;
-        }
-        if (input.length > 0 && !key.ctrl && !key.meta && !key.escape && !key.upArrow && !key.downArrow && !key.tab) {
-            // A chunk may contain several pasted chars — even a trailing newline
-            // (terminal pastes / PTY writes deliver "exit\r" as one chunk).
-            const parts = input.split(/[\r\n]+/);
-            const next = current + parts[0];
-            valueRef.current = next;
-            onChange(next);
-            if (parts.length > 1)
-                onSubmit(next); // newline in the chunk = submit
-        }
-    });
-    return (_jsxs(Box, { children: [_jsx(Text, { color: "magenta", bold: true, children: "❯ " }), _jsx(Text, { children: value }), _jsx(Text, { dimColor: true, children: "\u258C" })] }));
-}
-export function TuiApp({ config, initialTask, bootNotice }) {
+import { parseSlashCommand } from "./commands.js";
+import { dispatchCommand } from "./command-registry.js";
+import { ChatItemView } from "./chat-views.js"; // T2
+import { BuildRail, StatusBar, SIDEBAR_MIN_COLS } from "./chrome.js"; // T2
+import { Input } from "./input.js"; // T2
+import { SessionPicker } from "./session-picker.js"; // session picker modal
+import { fileIndex } from "./at-complete.js";
+import { parseWheel, MOUSE_ENABLE, MOUSE_DISABLE } from "./mouse.js"; // T5
+import { getTheme, setActiveTheme, theme, THEMES, useNamedTheme } from "./theme.js";
+import { reviewFromResponse, reviewAnswerToCall } from "./review.js"; // T2
+import { PermissionModal } from "./permission-modal.js"; // T2
+import { Sidebar } from "./sidebar.js"; // sidebar opencode
+import { getVersion } from "../version.js";
+export function TuiApp({ config, initialTask }) {
     const { exit } = useApp();
-    const { stdout } = useStdout();
+    // T-09: theme resolve at mount (.scoder/theme.json > builtin). Proxy-based
+    // theme reads re-render via a bump.
+    const [, bump] = useState(0);
+    const bumpFrame = useCallback(() => bump((n) => n + 1), []);
+    useEffect(() => {
+        setActiveTheme(getTheme(config.workdir));
+        bumpFrame();
+    }, [config.workdir, bumpFrame]);
     const [state, setState] = useState(initialState);
     const [input, setInput] = useState(initialTask ?? "");
-    const [scrollOffset, setScrollOffset] = useState(0); // 0 = pinned to bottom
+    /** Rows scrolled up from the bottom; 0 = follow the newest content. */
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const [permMode, setPermMode] = useState(config.permissionMode);
+    // T-03: active permission prompt (modal) — the run blocks until answered.
+    const [permPrompt, setPermPrompt] = useState(null);
+    const permPromptRef = useRef(permPrompt);
+    permPromptRef.current = permPrompt;
+    // Session picker modal state (open via Ctrl+S)
+    const [sessionPickerOpen, setSessionPickerOpen] = useState(false);
     const inputRef = useRef(initialTask ?? "");
     const writeInput = useCallback((v) => {
         inputRef.current = v;
         setInput(v);
     }, []);
+    const historyRef = useRef([]);
     const runningRef = useRef(false);
     const agentRef = useRef(null);
-    const spinner = useSpinner(state.status === "running");
-    // Boot notice (e.g. "permission=ask is not supported in the TUI") as a chat
-    // item, so it scrolls with the conversation instead of being lost off-screen.
-    const bootedRef = useRef(false);
+    // MCP connections live for the session (one connect, no per-message re-spawn).
+    // Dispose on unmount so child server processes never outlive the TUI.
+    useEffect(() => () => {
+        agentRef.current?.dispose();
+        agentRef.current = null;
+    }, []);
+    // ── Prompt-gate review flow (/review) ──────────────────────────────────────
+    // State machine relaying the universal-prompt-gate-mcp text-fallback flow:
+    // call → pending_level_selection → user picks level → pending_user_selection
+    // → user picks original/rewritten/update/cancel → approved/cancelled.
+    // `argsBase` holds the immutable prompt/context/language; `rewrittenPrompt`
+    // is echoed back verbatim from the server's pending result (never from the
+    // user or LLM) so only exactly what the user saw can be approved.
+    const reviewRef = useRef(null);
+    const reviewBusyRef = useRef(false);
+    // ── Scrollable chat viewport (Ink 8 alt-screen) ──
+    // The viewport clips overflow; the inner content wrapper keeps its natural
+    // height so it can be measured and offset upward for scrolling.
+    const viewportRef = useRef(null);
+    const contentRef = useRef(null);
+    const viewport = useBoxMetrics(viewportRef);
+    const content = useBoxMetrics(contentRef);
+    const viewportRowsRef = useRef(null);
     useEffect(() => {
-        if (bootedRef.current)
+        viewportRowsRef.current = viewport.clientHeight || null;
+    }, [viewport.clientHeight]);
+    const maxScroll = Math.max(0, content.height - viewport.clientHeight);
+    // scrollOffset counts rows UP from the bottom; 0 = follow the newest item.
+    const scrollTop = Math.max(0, maxScroll - scrollOffset);
+    // 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]);
+    const skills = useMemo(() => discoverSkills(config.workdir), [config.workdir]);
+    const skillNames = useMemo(() => skills.map((s) => s.name), [skills]);
+    // T-02: completion sources (agents + files) computed once per mount.
+    const atSources = useMemo(() => ({
+        skills: skillNames,
+        agents: discoverAgents(config.workdir).filter((a) => a.mode !== "subagent" || a.name === "explore").map((a) => a.name),
+        files: fileIndex(config.workdir),
+    }), [config.workdir, skillNames]);
+    // Mirror of state for the submit path (isFirst, /cost, /model) and the
+    // abort handler — kept in sync synchronously by update() below, so it is
+    // exact even between renders (event bursts land between them).
+    const stateRef = useRef(state);
+    /**
+     * 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]);
+    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;
-        bootedRef.current = true;
-        if (bootNotice)
-            setState((s) => ({ ...s, items: [{ kind: "notice", text: bootNotice, level: "warn" }, ...s.items] }));
-    }, [bootNotice]);
-    const pushNotice = useCallback((text, level = "info") => setState((s) => ({ ...s, items: [...s.items, { kind: "notice", text, level }] })), []);
+        }
+        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]);
+    const pushNotice = useCallback((text, level = "info") => update((s) => ({ ...s, items: [...s.items, { kind: "notice", text, level }] })), [update]);
+    /** 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(config.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 ?? config.maxSteps,
+            model: s.model || config.model,
+            provider: s.provider || config.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");
+        }
+    }, [config, createAgent, pushNotice, update]);
+    /** T1: CommandHost cho registry dùng chung với REPL. */
+    const tuiHost = useCallback(() => ({
+        agent: () => agentRef.current,
+        config,
+        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(config.permissionMode);
+        },
+        resumeAndRun: async (s) => {
+            const agent = createAgent();
+            // Replace the pane with the restored transcript, then continue.
+            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 })),
+            }));
+            runningRef.current = true;
+            setScrollOffset(0);
+            try {
+                await agent.resume(s);
+                runningRef.current = false;
+            }
+            catch (err) {
+                runningRef.current = false;
+                pushNotice(`resume failed: ${err.message}`, "error");
+            }
+            return { success: true, steps: 0, buildCmd: config.buildCmd, summary: "resumed" };
+        },
+    }), [config, update, pushNotice, createAgent]);
+    /** One round of the /review state machine: call the gate, render the result. */
+    const reviewStep = useCallback(async (tool, args) => {
+        const agent = agentRef.current ?? createAgent();
+        reviewBusyRef.current = true;
+        try {
+            const r = await agent.callMcpTool(tool, args);
+            const out = reviewFromResponse(reviewRef.current, tool, args, r);
+            reviewRef.current = out.state;
+            if (out.notice)
+                pushNotice(out.notice.text, out.notice.level);
+        }
+        catch (err) {
+            reviewRef.current = null;
+            pushNotice(`prompt gate failed: ${err.message}`, "error");
+        }
+        finally {
+            reviewBusyRef.current = false;
+        }
+    }, [createAgent, pushNotice]);
+    /** Handle a user reply while /review is waiting (numbers 1-4 / feedback text). */
+    const reviewAnswer = useCallback((text) => {
+        const rv = reviewRef.current;
+        if (!rv || reviewBusyRef.current)
+            return false;
+        const out = reviewAnswerToCall(rv, text);
+        if (out.notice)
+            pushNotice(out.notice.text, out.notice.level);
+        if (out.nextCall)
+            void reviewStep(out.nextCall.tool, out.nextCall.args);
+        return true;
+    }, [reviewStep, pushNotice]);
+    // Close any lingering streaming messages when the user sends a new query —
+    // prevents green/dim text from the previous response appearing stale.
+    const closeStreamingItems = useCallback(() => {
+        update((s) => {
+            let changed = false;
+            for (const it of s.items) {
+                if (it.kind === "assistant" && it.streaming) {
+                    it.streaming = false;
+                    changed = true;
+                }
+            }
+            return changed ? { ...s, items: [...s.items] } : s;
+        });
+    }, [update]);
+    /**
+     * Shared entry point for every task submission:
+     *   1. Close any still-streaming assistant message from the previous response.
+     *   2. Record the query in history.
+     *   3. Clear the input field.
+     * Then the caller handles steer vs. new-run separately.
+     */
+    const preSubmit = useCallback((task) => {
+        closeStreamingItems();
+        historyRef.current = [...historyRef.current, task].slice(-100);
+        writeInput("");
+    }, [closeStreamingItems, writeInput]);
     const submit = useCallback(async (text) => {
         const task = text.trim();
         if (!task)
             return;
+        // Prompt-gate review in progress — numeric replies drive the flow.
+        if (reviewRef.current) {
+            writeInput("");
+            historyRef.current = [...historyRef.current, task].slice(-100);
+            reviewAnswer(task);
+            return;
+        }
         // "exit"/"quit" always works — aborts a running agent first.
         if (task === "exit" || task === "quit") {
             agentRef.current?.abort();
             exit();
             return;
         }
-        // Slash commands — handled by the UI itself, never sent to the LLM.
+        // Slash commands — TUI-specific first (/review /diff /theme /undo),
+        // then the shared registry (T1) for the rest.
         const slash = parseSlashCommand(task);
         if (slash) {
             writeInput("");
-            if (slash.cmd === "/exit" || slash.cmd === "/quit") {
-                agentRef.current?.abort();
-                exit();
+            if (slash.cmd === "/review") {
+                if (!slash.arg) {
+                    pushNotice("usage: /review <prompt> — rewrites it, you pick original/rewritten/update/cancel", "warn");
+                    return;
+                }
+                if (!Object.keys(config.mcpServers ?? {}).some((s) => s === "prompt-gate")) {
+                    pushNotice("no \"prompt-gate\" MCP server configured — add it to ~/.scoder/config.json", "error");
+                    return;
+                }
+                // Context grounded in this session: last user item + current workdir.
+                const lastUser = [...stateRef.current.items].reverse().find((i) => i.kind === "user");
+                const context = `User is in scoder TUI at ${config.workdir}${lastUser ? `; earlier they asked: "${lastUser.text.slice(0, 120)}"` : ""}.`;
+                void reviewStep("mcp__prompt-gate__review_and_select_prompt", {
+                    prompt: slash.arg,
+                    context,
+                    language: "vietnamese",
+                });
                 return;
             }
-            if (slash.cmd === "/help") {
-                pushNotice(formatSlashHelp("scoder tui"));
+            if (slash.cmd === "/diff") {
+                // T-06: /diff turn | session | branch (default: turn). TUI-specific —
+                // turn scope reads the reducer's diff items.
+                const scope = slash.arg.trim() || "turn";
+                const diffs = stateRef.current.items.filter((i) => i.kind === "diff");
+                if (scope === "turn") {
+                    // Diffs since the last user message (current turn).
+                    let count = 0;
+                    const turnDiffs = [];
+                    for (let i = stateRef.current.items.length - 1; i >= 0; i--) {
+                        const it = stateRef.current.items[i];
+                        if (it.kind === "user" && count > 0)
+                            break;
+                        if (it.kind === "diff") {
+                            count++;
+                            turnDiffs.unshift(`✎ ${it.path} (+${it.added}/-${it.removed})\n${it.text}`);
+                        }
+                    }
+                    pushNotice(turnDiffs.length ? turnDiffs.join("\n\n") : "no file edits in this turn yet");
+                }
+                else if (scope === "session") {
+                    const total = diffs.reduce((a, d) => ({ add: a.add + d.added, rem: a.rem + d.removed }), { add: 0, rem: 0 });
+                    pushNotice(diffs.length === 0
+                        ? "no file edits this session"
+                        : diffs.map((d) => `✎ ${d.path} (+${d.added}/-${d.removed})`).join("\n") + `\n${diffs.length} files · +${total.add}/-${total.rem}`);
+                }
+                else if (scope === "branch") {
+                    const agent = agentRef.current;
+                    const snaps = agent?.snapshots.list() ?? [];
+                    if (!agent || snaps.length === 0) {
+                        pushNotice("no snapshot checkpoints — /diff branch needs at least one captured edit batch");
+                    }
+                    else {
+                        const d = agent.snapshots.diff(snaps[0].tree, null);
+                        pushNotice(d ? d : "worktree matches the first checkpoint (no net change)");
+                    }
+                }
+                else {
+                    pushNotice("usage: /diff [turn|session|branch]", "warn");
+                }
                 return;
             }
-            if (slash.cmd === "/clear") {
-                agentRef.current?.abort();
-                agentRef.current = null;
-                runningRef.current = false;
-                writeInput("");
-                setScrollOffset(0);
-                setState(initialState());
+            if (slash.cmd === "/theme") {
+                // T-09: palette hot-swap.
+                if (!slash.arg) {
+                    pushNotice(`themes: ${Object.keys(THEMES).join(", ")} — /theme <name>; project default qua .scoder/theme.json`);
+                    return;
+                }
+                pushNotice(useNamedTheme(slash.arg.trim()), "info");
+                bumpFrame();
                 return;
             }
-            if (slash.cmd === "/cost") {
-                const u = stateRef.current.usage;
-                pushNotice(u.calls > 0
-                    ? `session usage: ${u.calls} LLM calls · tokens in ${u.inputTokens} / out ${u.outputTokens}` +
-                        (u.cachedTokens > 0 ? ` (+${u.cachedTokens} cached)` : "")
-                    : "no LLM calls yet in this session");
+            if (slash.cmd === "/undo") {
+                // T-07: /undo [edit|turn|files]
+                //   (bare)|files — revert files to the previous checkpoint.
+                //   edit — files + trim conversation back one turn, then the user
+                //          can edit and re-send (fork/edit-resend, opencode UX).
+                const agent = agentRef.current;
+                const mode = slash.arg.trim() || "files";
+                const cps = agent?.snapshots.list() ?? [];
+                if (!agent || cps.length < 2) {
+                    pushNotice("undo: no snapshot checkpoint to revert to", "warn");
+                    return;
+                }
+                if (mode !== "files" && mode !== "edit") {
+                    pushNotice("usage: /undo [files|edit]", "warn");
+                    return;
+                }
+                // Revert to the second-newest checkpoint (newest = current state).
+                const target = cps[cps.length - 2];
+                const ok = agent.snapshots.restore(target.tree);
+                if (!ok) {
+                    pushNotice("undo: restore failed", "warn");
+                    return;
+                }
+                if (mode === "edit") {
+                    // Fork: trim the transcript UI back to the last user message and
+                    // put it in the input for editing + re-send.
+                    const items = stateRef.current.items;
+                    let lastUserIdx = -1;
+                    for (let i = items.length - 1; i >= 0; i--)
+                        if (items[i].kind === "user") {
+                            lastUserIdx = i;
+                            break;
+                        }
+                    const resend = lastUserIdx >= 0 && items[lastUserIdx].kind === "user" ? items[lastUserIdx].text : "";
+                    update((s) => ({ ...s, items: lastUserIdx >= 0 ? items.slice(0, lastUserIdx) : s.items, status: "idle", summary: null }));
+                    if (resend)
+                        writeInput(resend);
+                    agent.trimLastTurn();
+                    pushNotice(`undo edit: files → ${target.id}; last task back in the input — edit + re-send`, "info");
+                }
+                else {
+                    pushNotice(`undo: reverted to ${target.id} (${target.label})`);
+                }
                 return;
             }
-            if (slash.cmd === "/model") {
-                const s = stateRef.current;
-                pushNotice(`model: ${s.model || config.model || "—"} · provider: ${s.provider || config.provider || "auto"}`);
-                return;
+            // T1: phần còn lại qua registry dùng chung với REPL.
+            const { handled, outcome } = await dispatchCommand(task, tuiHost(), pushNotice);
+            if (handled && outcome?.quit) {
+                agentRef.current?.abort();
+                exit();
             }
-            pushNotice(`unknown command ${slash.cmd} — try /help`, "warn");
             return;
         }
-        if (runningRef.current)
-            return; // keep the typed text for when the agent is idle
-        writeInput("");
+        if (runningRef.current) {
+            // Steer: user input while the agent runs — deliver at next step
+            // boundary (H-08, "steer by default" — pattern from opencode).
+            preSubmit(task);
+            agentRef.current?.steer(task);
+            update((s) => ({ ...s, items: [...s.items, { kind: "user", text: `${task}  (steered)` }] }));
+            return;
+        }
+        preSubmit(task);
         runningRef.current = true;
         setScrollOffset(0);
         // isFirst must be computed BEFORE pushing the user item below.
         const isFirst = stateRef.current.items.every((i) => i.kind !== "user");
         // runTurn() doesn't emit run_start, so the TUI shows the user's message
         // itself; applyEvent's run_start dedupe keeps turn 1 from doubling.
-        setState((s) => ({ ...s, items: [...s.items, { kind: "user", text: task }], status: "running", summary: null }));
-        let agent = agentRef.current;
-        if (!agent) {
-            agent = new Agent(config);
-            // Functional updates: React feeds each updater the latest queued
-            // state, so events can never land on a stale snapshot (a ref mirror
-            // updated in useEffect races events arriving within one render batch
-            // — tool results then miss their items and stay "running…" forever).
-            agent.onEvent = (ev) => setState((prev) => {
-                const next = applyEvent(prev, ev);
-                return { ...next, items: [...next.items] };
-            });
-            agentRef.current = agent;
-        }
+        update((s) => ({ ...s, items: [...s.items, { kind: "user", text: task }], status: "running", summary: null }));
+        const agent = createAgent();
         try {
             // First submission runs the full closed loop; later ones continue the session.
             const result = isFirst ? await agent.run(task) : await agent.runTurn(task);
@@ -228,33 +480,76 @@ export function TuiApp({ config, initialTask, bootNotice }) {
         }
         catch (err) {
             runningRef.current = false;
-            setState((s) => applyEvent({ ...s, items: [...s.items] }, { type: "error", message: err.message }));
+            // Surface the failure through the reducer (not just a notice) so the
+            // status leaves "running" and the error is visible as the final line.
+            update((s) => applyEvent({ ...s, items: [...s.items] }, { type: "finish", success: false, steps: s.step, summary: `Run failed: ${err.message}` }));
+            update((s) => ({ ...s, items: [...s.items, { kind: "notice", text: err.message, level: "error" }] }));
         }
-    }, [config, pushNotice, writeInput, exit]);
-    // Mirror of state for the submit path (isFirst, /cost, /model) and the
-    // abort handler — approximate between renders, exact whenever idle.
-    const stateRef = useRef(state);
-    useEffect(() => {
-        stateRef.current = state;
-    }, [state]);
+    }, [config, pushNotice, writeInput, exit, update, queueEvent, skills, skillNames, permMode, reviewAnswer, reviewStep, tuiHost, preSubmit]);
+    /** Create (or return) the session agent — permission mode always current. */
+    function createAgent() {
+        if (agentRef.current)
+            return agentRef.current;
+        const agent = new Agent({ ...config, permissionMode: permMode });
+        // Events go through the batching queue (see FLUSH_MS above): applyEvent
+        // still receives the latest state because update() keeps stateRef in
+        // sync synchronously — tool results can never miss their items.
+        agent.onEvent = queueEvent;
+        agentRef.current = agent;
+        return agent;
+    }
     // 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 (key.pageUp)
-            setScrollOffset((o) => Math.min(stateRef.current.items.length, o + 10));
-        if (key.pageDown)
-            setScrollOffset((o) => Math.max(0, o - 10));
+        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;
+        }
+        // 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) {
-                setState((s) => ({ ...markAborted(s), items: [...s.items] }));
+                update((s) => ({ ...markAborted(s), items: [...s.items] }));
                 agentRef.current?.abort();
             }
         }
@@ -266,7 +561,7 @@ export function TuiApp({ config, initialTask, bootNotice }) {
             return;
         if (runningRef.current && ctrlCArmed.current === null) {
             ctrlCArmed.current = Date.now();
-            setState((s) => ({ ...s, items: [...s.items, { kind: "notice", text: "Press Ctrl+C again to quit", level: "warn" }] }));
+            update((s) => ({ ...s, items: [...s.items, { kind: "notice", text: "Press Ctrl+C again to quit", level: "warn" }] }));
             setTimeout(() => (ctrlCArmed.current = null), 2000);
             return;
         }
@@ -286,28 +581,40 @@ export function TuiApp({ config, initialTask, bootNotice }) {
             return null;
         return state.summary;
     }, [state.status, state.summary]);
-    // Scrollback viewport: by default pin to the newest items that fit on
-    // screen; PgUp/PgDn moves the window over the flight-recorder log.
-    const rows = stdout.rows ?? 24;
-    const viewItems = Math.max(6, rows - 9);
-    const total = state.items.length;
-    const start = Math.max(0, Math.min(total - viewItems, total - viewItems - scrollOffset));
-    const end = Math.max(start, Math.min(total, total - scrollOffset));
-    const visible = state.items.slice(start, end);
-    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(BuildRail, { state: state, config: config }), _jsxs(Box, { flexDirection: "column", paddingX: 1, flexGrow: 1, children: [total === 0 && (_jsx(Text, { dimColor: true, children: "Type a task and press Enter. The agent works autonomously until the build passes. (/help for commands)" })), scrollOffset > 0 && _jsx(Text, { dimColor: true, children: "\u2191 scrollback \u2014 PgDn to return to the newest" }), visible.map((item, i) => (_jsx(ChatItemView, { item: item, spinner: spinner }, start + i))), state.status === "running" && state.step > 0 && (_jsxs(Text, { dimColor: true, children: [spinner, " step ", state.step, "/", state.maxSteps, " \u2014 thinking\u2026"] })), lastSummary && (_jsx(Box, { marginTop: 1, children: state.status === "success" ? (_jsxs(Text, { color: "green", bold: true, children: ["\u2714 ", lastSummary] })) : state.status === "aborted" ? (_jsxs(Text, { color: "yellow", bold: true, children: ["\u23F9 ", lastSummary] })) : (_jsxs(Text, { color: "red", bold: true, children: ["\u2718 ", lastSummary] })) }))] }), _jsx(Box, { paddingX: 1, children: _jsx(Input, { valueRef: inputRef, value: input, onChange: writeInput, onSubmit: (v) => void submit(v) }) }), _jsx(StatusBar, { state: state, spinner: spinner })] }));
+    // When the run ends, jump back to the bottom so the final summary is always
+    // visible — a user scrolled up would otherwise never see the conclusion.
+    const prevStatusRef = useRef(state.status);
+    useEffect(() => {
+        if (prevStatusRef.current === "running" && state.status !== "running")
+            setScrollOffset(0);
+        prevStatusRef.current = state.status;
+    }, [state.status]);
+    // The viewport renders items at full height so scroll math (content.height) is
+    // always correct. Ink clips with overflow="hidden"; contentOffsetY shifts the
+    // content column upward to reveal items above the current bottom.
+    const { rows, columns } = useWindowSize();
+    const showSidebar = (columns ?? 100) >= SIDEBAR_MIN_COLS;
+    return (
+    // flexShrink={0}: pinned chrome must never be squeezed when the chat
+    // content overflows — Ink defaults every box to flexShrink:1, which
+    // shrank the input bar to zero rows once the log outgrew the terminal.
+    _jsxs(Box, { flexDirection: "column", height: rows || 24, flexShrink: 0, children: [_jsx(BuildRail, { state: state, config: config }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, flexShrink: 1, minHeight: 0, children: [_jsx(Box, { ref: viewportRef, flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, overflow: "hidden", contentOffsetY: scrollTop, children: _jsxs(Box, { ref: contentRef, flexDirection: "column", paddingX: 1, flexShrink: 0, children: [state.items.length === 0 ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: [_jsx(Text, { bold: true, color: theme.brand, children: "\u2691 SCoder" }), _jsx(Text, { dimColor: true, children: `autonomous coding agent · v${getVersion()}` }), _jsx(Text, {}), _jsx(Text, { dimColor: true, children: "type a task to start \u2014 agent plans, edits, and builds" }), _jsx(Text, {}), _jsxs(Text, { dimColor: true, children: ["\u23CE send \u00B7 ", _jsx(Text, { bold: true, children: "ctrl+s" }), " sessions \u00B7 tab complete \u00B7 /help \u00B7 /skills"] })] })) : (state.items.map((item, i) => _jsx(ChatItemView, { item: item }, i))), lastSummary && (_jsx(Box, { marginTop: 1, children: state.status === "success" ? (_jsxs(Text, { color: "green", bold: true, children: ["\u2714 ", lastSummary] })) : state.status === "aborted" ? (_jsxs(Text, { color: "yellow", bold: true, children: ["\u23F9 ", lastSummary] })) : (_jsxs(Text, { color: "red", bold: true, children: ["\u2718 ", lastSummary] })) }))] }) }), showSidebar && _jsx(Sidebar, { state: state, config: config })] }), sessionPickerOpen && (_jsx(SessionPicker, { workdir: config.workdir, onSelect: handleSessionSelect, onClose: () => setSessionPickerOpen(false) })), permPrompt && _jsx(PermissionModal, { prompt: permPrompt }), _jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(Input, { valueRef: inputRef, value: input, onChange: writeInput, onSubmit: (v) => void submit(v), historyRef: historyRef, skillNames: skillNames, agentRef: agentRef, config: config, atSources: atSources, modalRef: permPromptRef }) }), _jsx(StatusBar, { state: state, scroll: scrollOffset > 0 ? `↑ ${Math.min(scrollOffset, maxScroll)}/${maxScroll}` : null })] }));
 }
 /** Mount the TUI (called from the `scoder tui` subcommand). */
 export async function runTui(config, initialTask) {
     setQuiet(true);
-    // `ask` prompts via readline on stdin, which corrupts the alt-screen TUI
-    // (same rule as `scoder serve`): fall back to auto with an in-pane notice.
-    let bootNotice = null;
-    if (config.permissionMode === "ask") {
-        config = { ...config, permissionMode: "auto" };
-        bootNotice = "permission=ask is not supported in the TUI — falling back to auto";
-    }
+    // T-03: permission=ask works in the TUI — prompts route through the
+    // in-pane modal (permission_request events), not stdin readline.
     const { render } = await import("ink");
-    const { waitUntilExit } = render(_jsx(TuiApp, { config: config, initialTask: initialTask, bootNotice: bootNotice }));
+    // Alternate screen buffer (vim/htop style): the app owns the whole screen,
+    // the BuildRail stays pinned at the top and the input at the bottom while
+    // the chat pane scrolls internally. Terminal content is restored on exit.
+    // Fallback: terminals without alt-screen support (TERM=dumb, non-TTY pipes,
+    // some CI runners) render inline instead — the layout still works.
+    const altScreen = process.stdout.isTTY === true && process.env.TERM !== "dumb";
+    const { waitUntilExit } = render(_jsx(TuiApp, { config: config, initialTask: initialTask }), {
+        alternateScreen: altScreen,
+    });
     await waitUntilExit();
     // Ink restores the terminal on unmount; exit explicitly so provider
     // keep-alive sockets (undici pool) can't keep the event loop alive.