s-app-scoder-agent 0.9.3 → 0.9.6

package/dist/tui/app.js

@@ -4,7 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * Identity (deliberately distinct from chat-first agent UIs): the build is
  * the mission, so the screen is organized around it —
- *   · Build Rail (top): brand, model/permission badges, build lamp, fuel gauge
+ *   · Build Rail (top): brand, permission badge, build lamp
+ *   · Sidebar (right panel): session · MCP · metrics · phases · plan · build
  *   · 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)
@@ -12,26 +13,48 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Driven entirely by AgentEvents (the same stream the HTTP/SSE server uses).
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Box, Text, useApp, useBoxMetrics, useInput, useStdin, useWindowSize } from "ink";
+import { Box, Text, useApp, 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, estimateItemRows } from "./state.js";
-import { parseSlashCommand, SLASH_COMMANDS, formatSlashHelp } from "./commands.js";
-import { dispatchCommand } from "./command-registry.js";
+import { setQuiet } from "../io/terminal.js";
+import { discoverSkills } from "../context/skills.js";
+import { discoverAgents } from "../context/agents.js";
+import { initialState } from "./state.js";
+import { SLASH_COMMANDS, formatSlashHelp } from "../commands/definitions.js";
 import { ChatItemView } from "./chat-views.js"; // T2
-import { BuildRail, StatusBar, SIDEBAR_MIN_COLS } from "./chrome.js"; // T2
+import { BuildRail, StatusBar, SIDEBAR_MIN_COLS, SIDEBAR_WIDTH } 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 { getTheme, setActiveTheme, theme } from "./theme.js";
+import { boxBorderStyle, isAsciiMode } from "./charset.js";
 import { PermissionModal } from "./permission-modal.js"; // T2
 import { Sidebar } from "./sidebar.js"; // sidebar opencode
-import { getVersion } from "../version.js";
+import { getVersion } from "../shared/version.js";
+import { useScrollMetrics } from "./hooks/use-scroll.js";
+/**
+ * Logo lớn cho màn hình welcome (block letters, ~49 cols) — chỉ vẽ khi pane
+ * chat đủ rộng, ngược lại fallback dòng "⚑ SCoder". ASCII mode: biến thể '#'.
+ */
+const BANNER = [
+    "███████╗ ██████╗ ██████╗ ██████╗ ███████╗██████╗ ",
+    "██╔════╝██╔════╝██╔═══██╗██╔══██╗██╔════╝██╔══██╗",
+    "███████╗██║     ██║   ██║██║  ██║█████╗  ██████╔╝",
+    "╚════██║██║     ██║   ██║██║  ██║██╔══╝  ██╔══██╗",
+    "███████║╚██████╗╚██████╔╝██████╔╝███████╗██║  ██║",
+    "╚══════╝ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝",
+];
+const BANNER_ASCII = [
+    "#####   ####   ####  #####  ###### ##### ",
+    "#      #      #    # #    # #      #    #",
+    "#####  #      #    # #    # ####   ##### ",
+    "     # #      #    # #    # #      #   # ",
+    "#####   ####   ####  #####  ###### #    #",
+];
+import { useEventQueue } from "./hooks/use-event-queue.js";
+import { useSessionResume } from "./hooks/use-session-resume.js";
+import { useCommandHost } from "./hooks/use-command-host.js";
+import { useTuiKeybinds } from "./hooks/use-keybinds.js";
+import { useSubmit } from "./hooks/use-submit.js";
 export function TuiApp({ config, initialTask }) {
     // v2: the effective config can be hot-patched by slash commands (/agent,
     // /permission) — the prop is the initial value, cfg is the live one.
@@ -72,52 +95,13 @@ export function TuiApp({ config, initialTask }) {
         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(() => {
-        viewportRowsRef.current = viewport.clientHeight || null;
-    }, [viewport.clientHeight]);
+    const { viewportRef, contentRef, viewport, content, viewportRowsRef } = useScrollMetrics(setScrollOffset);
     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(cfg.workdir), [cfg.workdir]);
     const skillNames = useMemo(() => skills.map((s) => s.name), [skills]);
     // T-02: completion sources (agents + files) computed once per mount.
@@ -127,406 +111,21 @@ export function TuiApp({ config, initialTask }) {
         files: fileIndex(cfg.workdir),
     }), [cfg.workdir, skillNames]);
     // Mirror of state for the submit path (isFirst, /cost, /model) and the
-    // abort handler — kept in sync synchronously by update() below, so it is
+    // abort handler — kept in sync synchronously by update(), 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]);
-    // Realtime tick: re-render at least once per second while a run is active so
-    // sidebar metrics (elapsed time, ctx pressure, tok/s during/after a stream)
-    // update live instead of only on the next event/command boundary.
-    useEffect(() => {
-        const id = setInterval(() => {
-            if (!runningRef.current)
-                return;
-            update((s) => ({ ...s }));
-        }, 1000);
-        return () => clearInterval(id);
-    }, [update]);
-    const queueEvent = useCallback((ev) => {
-        // T-03: permission modal must appear instantly (not batched) — the run
-        // blocks on the answer.
-        if (ev.type === "permission_request") {
-            setPermPrompt(ev);
-            return;
-        }
-        eventQueue.current.push(ev);
-        if (!flushTimer.current)
-            flushTimer.current = setTimeout(flushEvents, FLUSH_MS);
-    }, [flushEvents]);
-    // Flush on unmount so a trailing burst is never dropped.
-    useEffect(() => () => {
-        if (flushTimer.current)
-            clearTimeout(flushTimer.current);
-        flushEvents();
-    }, [flushEvents]);
+    const { stateRef, update, queueEvent, eventQueue } = useEventQueue(state, setState, setPermPrompt, runningRef);
     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(cfg.workdir, session.id);
-        if (!s) {
-            pushNotice(`session not found: ${session.id}`, "error");
-            return;
-        }
-        // Restore full TUI state from the session (items + step count + model info).
-        update(() => ({
-            ...initialState(),
-            items: s.messages
-                .filter((m) => m.role === "user" || m.role === "assistant")
-                .map((m) => m.role === "user"
-                ? { kind: "user", text: typeof m.content === "string" ? m.content : "" }
-                : { kind: "assistant", text: typeof m.content === "string" ? m.content : "", streaming: false }),
-            step: s.steps ?? 0,
-            maxSteps: s.maxSteps ?? cfg.maxSteps,
-            model: s.model || cfg.model,
-            provider: s.provider || cfg.provider,
-            status: "idle",
-            summary: null,
-        }));
-        runningRef.current = true;
-        setScrollOffset(0);
-        const agent = createAgent();
-        try {
-            await agent.resume(s);
-            runningRef.current = false;
-        }
-        catch (err) {
-            runningRef.current = false;
-            pushNotice(`resume failed: ${err.message}`, "error");
-        }
-    }, [cfg, createAgent, pushNotice, update]);
-    /** T1: CommandHost cho registry dùng chung với REPL. */
-    const tuiHost = useCallback(() => ({
-        agent: () => agentRef.current,
-        config: cfg,
-        updateConfig: (patch) => setCfg((c) => ({ ...c, ...patch })),
-        isRunning: () => runningRef.current,
-        replaceAgent: (next) => {
-            agentRef.current?.abort();
-            agentRef.current?.dispose();
-            agentRef.current = next;
-            if (!next) {
-                runningRef.current = false;
-                setScrollOffset(0);
-                eventQueue.current = [];
-                update(() => initialState());
-            }
-            setPermMode(cfg.permissionMode);
-        },
-        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: cfg.buildCmd, summary: "resumed" };
-        },
-        /** [Phase 7] Transcript items — used by /export and /search. */
-        transcriptItems: () => stateRef.current.items,
-        /** [Phase 7] Scroll to a transcript item by index (best-effort row estimation). */
-        selectTranscriptItem: (index) => {
-            const items = stateRef.current.items;
-            if (index < 0 || index >= items.length)
-                return;
-            // target: show item at index at the TOP of the viewport.
-            // Ink contentOffsetY shifts content upward by that many rows.
-            let above = 0;
-            for (let i = 0; i < index; i++)
-                above += estimateItemRows(items[i]);
-            const maxScroll = Math.max(0, content.height - viewport.height);
-            setScrollOffset(Math.max(0, maxScroll - above));
-        },
-    }), [cfg, update, pushNotice, createAgent, viewport, content]);
-    /** One round of the /review state machine: call the gate, render the result. */
-    const reviewStep = useCallback(async (tool, args) => {
-        const agent = agentRef.current ?? createAgent();
-        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) => {
-        let 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 — 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 === "/review") {
-                if (!slash.arg) {
-                    pushNotice("usage: /review <prompt> — rewrites it, you pick original/rewritten/update/cancel", "warn");
-                    return;
-                }
-                // v2: no hardcoded server/language — any MCP server exposing a
-                // review_and_select_prompt tool wins; language is auto-detected by
-                // the gate from the prompt itself.
-                const servers = Object.keys(cfg.mcpServers ?? {});
-                const gateServer = servers.find((s) => s === "prompt-gate") ?? servers.find((s) => /gate/i.test(s));
-                if (!gateServer) {
-                    pushNotice("no MCP prompt-gate server configured — add one exposing review_and_select_prompt to ~/.scoder/config.json", "error");
-                    return;
-                }
-                // Context grounded in this session: last user item + current workdir.
-                const lastUser = [...stateRef.current.items].reverse().find((i) => i.kind === "user");
-                const context = `User is in scoder TUI at ${cfg.workdir}${lastUser ? `; earlier they asked: "${lastUser.text.slice(0, 120)}"` : ""}.`;
-                void reviewStep(`mcp__${gateServer}__review_and_select_prompt`, {
-                    prompt: slash.arg,
-                    context,
-                });
-                return;
-            }
-            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 === "/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 === "/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;
-            }
-            // 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();
-            }
-            if (handled && outcome?.task) {
-                task = outcome.task;
-            }
-            else {
-                return;
-            }
-        }
-        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.
-        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);
-            void result;
-            runningRef.current = false;
-        }
-        catch (err) {
-            runningRef.current = false;
-            // 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" }] }));
-        }
-    }, [cfg, pushNotice, writeInput, exit, update, queueEvent, skills, skillNames, permMode, reviewAnswer, reviewStep, tuiHost, preSubmit]);
+    const handleSessionSelect = useSessionResume({
+        cfg, createAgent, pushNotice, update, runningRef, setScrollOffset, setSessionPickerOpen,
+    });
+    const tuiHost = useCommandHost({
+        cfg, setCfg, update, agentRef, runningRef, eventQueue, setScrollOffset, setPermMode,
+    });
+    const { submit } = useSubmit({
+        cfg, pushNotice, writeInput, exit, update, queueEvent, skills, skillNames, permMode,
+        tuiHost, agentRef, runningRef, stateRef,
+        historyRef, setScrollOffset, createAgent, bumpFrame,
+    });
     /** Create (or return) the session agent — permission mode always current. */
     function createAgent() {
         if (agentRef.current)
@@ -539,85 +138,10 @@ export function TuiApp({ config, initialTask }) {
         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 (permPromptRef.current)
-            return; // modal owns the keyboard
-        // ── Ctrl+S: open session picker (when not running, not already open) ──
-        if (key.ctrl && _input === "s") {
-            if (!runningRef.current && !sessionPickerOpen) {
-                setSessionPickerOpen(true);
-            }
-            return;
-        }
-        // ── Ctrl+P: command palette ──
-        if (key.ctrl && _input === "p") {
-            setPaletteOpen((o) => !o);
-            return;
-        }
-        // ── ?: help overlay (when input empty) ──
-        if (_input === "?" && !inputRef.current.trim()) {
-            setHelpOpen((o) => !o);
-            return;
-        }
-        // T-10: ctrl+t toggles the thinking stream visibility.
-        if (key.ctrl && _input === "t") {
-            update((s) => ({ ...s, thinkingVisible: !s.thinkingVisible }));
-            return;
-        }
-        if (key.pageUp || key.pageDown || key.home || key.end) {
-            const page = Math.max(1, Math.floor((viewportRowsRef.current ?? 20) * 0.8));
-            if (key.pageUp)
-                setScrollOffset((o) => o + page);
-            if (key.pageDown)
-                setScrollOffset((o) => Math.max(0, o - page));
-            if (key.home)
-                setScrollOffset(999_999); // top (clamped to maxScroll in render)
-            if (key.end)
-                setScrollOffset(0); // bottom = follow
-            return;
-        }
-        if (key.escape) {
-            if (scrollOffsetRef.current > 0) {
-                setScrollOffset(0);
-                return;
-            }
-            if (runningRef.current) {
-                update((s) => ({ ...markAborted(s), items: [...s.items] }));
-                agentRef.current?.abort();
-            }
-        }
-    });
-    // Ctrl+C quits (press again within 2s to confirm while running).
-    const ctrlCArmed = useRef(null);
-    useInput((_input, key) => {
-        if (!key.ctrl || _input !== "c")
-            return;
-        if (runningRef.current && ctrlCArmed.current === null) {
-            ctrlCArmed.current = Date.now();
-            update((s) => ({ ...s, items: [...s.items, { kind: "notice", text: "Press Ctrl+C again to quit", level: "warn" }] }));
-            setTimeout(() => (ctrlCArmed.current = null), 2000);
-            return;
-        }
-        agentRef.current?.abort();
-        exit();
+    useTuiKeybinds({
+        scrollOffset, permPromptRef, setPermPrompt, agentRef, runningRef, sessionPickerOpen,
+        setSessionPickerOpen, setPaletteOpen, inputRef, setHelpOpen, update, viewportRowsRef,
+        setScrollOffset, exit,
     });
     // Submit an initial task passed on the command line once, after mount.
     const bootRef = useRef(false);
@@ -649,7 +173,10 @@ export function TuiApp({ config, initialTask }) {
     // flexShrink={0}: pinned chrome must never be squeezed when the chat
     // content overflows — Ink defaults every box to flexShrink:1, which
     // shrank the input bar to zero rows once the log outgrew the terminal.
-    _jsxs(Box, { flexDirection: "column", height: rows || 24, flexShrink: 0, children: [_jsx(BuildRail, { state: state, config: cfg }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, flexShrink: 1, minHeight: 0, children: [_jsx(Box, { ref: viewportRef, flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, overflow: "hidden", contentOffsetY: scrollTop, children: _jsxs(Box, { ref: contentRef, flexDirection: "column", paddingX: 1, flexShrink: 0, children: [state.items.length === 0 ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: [_jsx(Text, { bold: true, color: theme.brand, children: "\u2691 SCoder" }), _jsx(Text, { dimColor: true, children: `autonomous coding agent · v${getVersion()}` }), _jsx(Text, {}), _jsx(Text, { dimColor: true, children: "type a task to start \u2014 agent plans, edits, and builds" }), _jsx(Text, {}), _jsxs(Text, { dimColor: true, children: ["\u23CE send \u00B7 ", _jsx(Text, { bold: true, children: "ctrl+s" }), " sessions \u00B7 tab complete \u00B7 /help \u00B7 /skills"] })] })) : (state.items.map((item, i) => _jsx(ChatItemView, { item: item, width: (columns ?? 100) - (showSidebar ? 42 : 4) }, i))), lastSummary && (_jsx(Box, { marginTop: 1, children: state.status === "success" ? (_jsxs(Text, { color: "green", bold: true, children: ["\u2714 ", lastSummary] })) : state.status === "aborted" ? (_jsxs(Text, { color: "yellow", bold: true, children: ["\u23F9 ", lastSummary] })) : (_jsxs(Text, { color: "red", bold: true, children: ["\u2718 ", lastSummary] })) }))] }) }), showSidebar && _jsx(Sidebar, { state: state, config: cfg })] }), sessionPickerOpen && (_jsx(SessionPicker, { workdir: cfg.workdir, onSelect: handleSessionSelect, onClose: () => setSessionPickerOpen(false) })), paletteOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, paddingY: 1, children: [_jsx(Text, { color: theme.accent, bold: true, children: "Command palette (Ctrl+P to close)" }), SLASH_COMMANDS.slice(0, 40).map((c) => (_jsxs(Text, { children: [c.cmd.padEnd(12), " ", c.desc] }, c.cmd)))] })), helpOpen && (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.dim, paddingX: 1, paddingY: 1, children: [_jsx(Text, { color: theme.brand, bold: true, children: "Help (?)" }), _jsx(Text, { children: formatSlashHelp("scoder tui") })] })), permPrompt && _jsx(PermissionModal, { prompt: permPrompt }), _jsx(Box, { paddingX: 1, paddingTop: 1, paddingBottom: 1, flexShrink: 0, alignSelf: "stretch", children: _jsx(Input, { valueRef: inputRef, value: input, onChange: writeInput, onSubmit: (v) => void submit(v), historyRef: historyRef, skillNames: skillNames, agentRef: agentRef, config: cfg, atSources: atSources, modalRef: permPromptRef }) }), _jsx(StatusBar, { state: state, scroll: scrollOffset > 0 ? `↑ ${Math.min(scrollOffset, maxScroll)}/${maxScroll}` : null })] }));
+    _jsxs(Box, { flexDirection: "column", height: rows || 24, flexShrink: 0, children: [_jsx(BuildRail, { state: state, config: cfg }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, flexShrink: 1, minHeight: 0, children: [_jsx(Box, { ref: viewportRef, flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, overflow: "hidden", contentOffsetY: scrollTop, children: _jsxs(Box, { ref: contentRef, flexDirection: "column", paddingX: 1, flexShrink: 0, children: [state.items.length === 0 ? (
+                                // 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.map((item, i) => _jsx(ChatItemView, { item: item, width: (columns ?? 100) - (showSidebar ? SIDEBAR_WIDTH + 2 : 4) }, 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 })] }));
 }
 /** Mount the TUI (called from the `scoder tui` subcommand). */
 export async function runTui(config, initialTask) {