sanook-cli 0.5.2 → 0.5.7

package/dist/ui/app.js

@@ -1,26 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
 import { execFile } from 'node:child_process';
 import { promisify } from 'node:util';
-import { Box, Text, Static, useApp, useInput } from 'ink';
-import { BUILTIN_COMMANDS, expandCustomCommand, loadCustomCommands, parseCommand, parseSlashInvocation, } from '../commands.js';
+import { Box, Text, useApp, useInput, useStdout } from 'ink';
+import { homedir } from 'node:os';
+import { BUILTIN_COMMANDS, HELP_TEXT, expandCustomCommand, loadCustomCommands, parseCommand, parseSlashInvocation, } from '../commands.js';
 import { runAgent } from '../loop.js';
-import { saveSession, newSessionId } from '../session.js';
+import { finalizeReplSession, formatFinalizeMessage } from '../session-brain.js';
+import { saveSession, newSessionId, listSessions, removeSession, renameSession } from '../session.js';
+import { TOOL_CATALOG } from '../tool-catalog.js';
 import { getBrainPath, appendBrainWorklog } from '../memory.js';
 import { autoCompact, estimateTokens, summarizeCompact } from '../compaction.js';
 import { makeSummarizer } from '../summarize.js';
 import { agentTuning, patchGlobalConfig } from '../config.js';
 import { snapshotWorkTree, restoreWorkTree } from '../checkpoint.js';
 import { renderInsights } from '../insights.js';
+import { loadMcpHubEntries } from '../mcp-hub.js';
+import { probeMcpServer } from '../mcp.js';
+import { filterModelPickerOptions, initialModelPickerIndex, modelPickerOptions, modelProviderEntries, } from '../model-picker.js';
+import { clampCompletionIndex, completionForInput, completionReplaceValue } from '../slash-completion.js';
+import { loadSkills } from '../skills.js';
+import { copyTextToClipboard } from '../clipboard.js';
 import { useEditor } from './useEditor.js';
+import { useBusyElapsedSeconds } from './useBusyElapsed.js';
+import { useGitBranch } from './useGitBranch.js';
 import { loadHistory, appendHistory } from './history.js';
 import { expandMentions } from './mentions.js';
 import { BRAND } from '../brand.js';
+import { backgroundTaskRunningCount, listBackgroundTasks } from '../tools/task.js';
 import { Banner } from './banner.js';
+import { CompletionOverlay, FloatingOverlay, firstUserSummary } from './overlay.js';
+import { clampQueueActiveIndex, compactPreview, getQueueWindow, queueActiveIndexAfterDelete } from './queue.js';
+import { MarkdownText, StreamingMarkdownText } from './markdown.js';
+import { SessionPanel } from './session-panel.js';
+import { getTranscriptWindow, transcriptScrollStep, transcriptWindowSize } from './transcript.js';
+import { footerStatus } from './status.js';
+import { thinkingPanelLines, snapshotThinking } from './thinking-panel.js';
+import { toolTrailLines, updateToolTrailOnEvent } from './tool-trail.js';
 const execFileP = promisify(execFile);
 const PRE_TURN_COMPACT_TOKENS = 100_000; // session ยาวมากเท่านั้นถึง summarize ก่อน turn (mode summarize)
+const startupCount = (value) => value === 'checking' ? 'checking' : value.count ? `${value.count}` : 'none';
+const shortSignal = (value, max = 18) => value.length > max ? `…${value.slice(Math.max(0, value.length - max + 1))}` : value;
 export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = 'ask', initialHistory, initialNote }) {
     const { exit } = useApp();
+    const { stdout } = useStdout();
     const [history, setHistory] = useState(() => {
         const seed = [];
         if (initialNote)
@@ -30,37 +53,235 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         return seed;
     });
     const [streaming, setStreaming] = useState('');
+    const [thinking, setThinking] = useState('');
+    const [agentStatus, setAgentStatus] = useState('');
+    const [toolTrail, setToolTrail] = useState([]);
     const [busy, setBusy] = useState(false);
     const [model, setModel] = useState(initialModel);
     const [approvalReq, setApprovalReq] = useState(null);
+    const [overlay, setOverlay] = useState(null);
+    const [completionIndex, setCompletionIndex] = useState(0);
+    const [historyResetKey, setHistoryResetKey] = useState(0);
+    const [queueActiveIndex, setQueueActiveIndex] = useState(null);
+    const [toolTrailMode, setToolTrailModeState] = useState('expanded');
+    const [thinkingMode, setThinkingMode] = useState('collapsed');
+    const [contextCompression, setContextCompression] = useState();
+    const [transcriptScroll, setTranscriptScroll] = useState(0);
     const idRef = useRef(0);
     const lastCost = useRef('');
+    const nextToolTrailId = useRef(0);
+    const toolTrailRef = useRef([]);
+    const toolTrailModeRef = useRef('expanded');
+    const thinkingRef = useRef('');
     const msgsRef = useRef(initialHistory ?? []); // conversation จริงสำหรับ LLM (สะสมข้ามรอบ)
     const sessionId = useRef(newSessionId());
     const sessionCreated = useRef(new Date().toISOString());
+    const exitingRef = useRef(false);
     const approvalResolve = useRef(null);
     const replHistory = useRef(loadHistory()); // prompt เก่า (persist) สำหรับ ↑/↓
     const checkpoints = useRef([]);
     const lastRun = useRef(null);
     const editor = useEditor(replHistory.current);
+    const cwd = process.cwd();
+    const [startupReadiness, setStartupReadiness] = useState({
+        brain: 'checking',
+        mcp: 'checking',
+        skills: 'checking',
+    });
     // real-time steering: หยุด turn ที่กำลังรัน (abort) + คิวข้อความที่พิมพ์ระหว่าง busy
     const abortRef = useRef(null);
     const queueRef = useRef([]);
     const [queued, setQueued] = useState([]);
+    const [bgTaskCount, setBgTaskCount] = useState(0);
     const enqueue = (msg) => {
         queueRef.current.push(msg);
         setQueued([...queueRef.current]);
+        setQueueActiveIndex((index) => clampQueueActiveIndex(index, queueRef.current.length));
     };
     const dequeue = () => {
         const m = queueRef.current.shift();
         setQueued([...queueRef.current]);
+        setQueueActiveIndex((index) => {
+            if (!queueRef.current.length)
+                return null;
+            if (index === null)
+                return 0;
+            return clampQueueActiveIndex(index - 1, queueRef.current.length);
+        });
         return m;
     };
     const clearQueue = () => {
         queueRef.current = [];
         setQueued([]);
+        setQueueActiveIndex(null);
+    };
+    const moveQueueActive = (delta) => {
+        setQueueActiveIndex((index) => {
+            const active = clampQueueActiveIndex(index, queueRef.current.length);
+            return active === null ? null : clampQueueActiveIndex(active + delta, queueRef.current.length);
+        });
+    };
+    const removeActiveQueued = () => {
+        const length = queueRef.current.length;
+        const active = clampQueueActiveIndex(queueActiveIndex, length);
+        if (active === null)
+            return undefined;
+        const [removed] = queueRef.current.splice(active, 1);
+        setQueued([...queueRef.current]);
+        setQueueActiveIndex(queueActiveIndexAfterDelete(active, length));
+        return removed;
+    };
+    const resetLiveToolTrail = () => {
+        nextToolTrailId.current = 0;
+        toolTrailRef.current = [];
+        setToolTrail([]);
+    };
+    const resetLiveThinking = () => {
+        thinkingRef.current = '';
+        setThinking('');
+    };
+    const setToolTrailMode = (mode) => {
+        toolTrailModeRef.current = mode;
+        setToolTrailModeState(mode);
+        // NOTE: this remount is load-bearing — the transcript lives in <Static>, which freezes already-
+        // emitted turns; bumping the key is what re-renders past turns in the new mode. (Cost: a full
+        // scrollback re-emit on toggle — a known <Static> trade-off, not removable without a rewrite.)
+        setHistoryResetKey((key) => key + 1);
+    };
+    const changeToolTrailMode = (mode) => {
+        const next = mode ?? (toolTrailModeRef.current === 'expanded' ? 'compact' : 'expanded');
+        setToolTrailMode(next);
+        return next;
+    };
+    const noteToolTrailMode = (mode) => {
+        addTurn('system', `tool trail → ${mode} (${mode === 'compact' ? 'สรุปสั้น' : mode === 'hidden' ? 'ซ่อน' : 'แสดงรายละเอียด'})`);
+    };
+    const snapshotToolTrail = () => toolTrailRef.current.length ? toolTrailRef.current.map((item) => ({ ...item })) : undefined;
+    const applyDetailsMode = (section, mode) => {
+        if (!section || !mode)
+            return;
+        if (section === 'thinking') {
+            setThinkingMode(mode);
+            setHistoryResetKey((key) => key + 1); // remount needed to restyle frozen <Static> turns (see setToolTrailMode)
+            addTurn('system', `details thinking → ${mode}`);
+            return;
+        }
+        const nextToolMode = mode === 'expanded' ? 'expanded' : mode === 'hidden' ? 'hidden' : 'compact';
+        noteToolTrailMode(changeToolTrailMode(nextToolMode));
+    };
+    const addTurn = (role, text, extras) => {
+        setTranscriptScroll(0);
+        setHistory((h) => [
+            ...h,
+            {
+                id: idRef.current++,
+                role,
+                thinking: extras?.thinking,
+                text,
+                toolTrail: extras?.toolTrail?.length ? extras.toolTrail.map((item) => ({ ...item })) : undefined,
+            },
+        ]);
+    };
+    const recordToolTrailEvent = (event) => {
+        if (event.type !== 'tool-call' && event.type !== 'tool-result' && event.type !== 'error')
+            return;
+        const type = event.type === 'tool-call' ? 'tool-call' : event.type === 'tool-result' ? 'tool-result' : 'error';
+        const next = updateToolTrailOnEvent(toolTrailRef.current, { detail: event.detail, text: event.text, tool: event.tool, type }, nextToolTrailId.current);
+        nextToolTrailId.current = next.nextId;
+        toolTrailRef.current = next.items;
+        setToolTrail(next.items);
+    };
+    const replaceHistory = (next) => {
+        setHistoryResetKey((key) => key + 1);
+        setTranscriptScroll(0);
+        setHistory(next);
+    };
+    const filterHistory = (predicate) => {
+        setHistoryResetKey((key) => key + 1);
+        setTranscriptScroll(0);
+        setHistory((h) => h.filter(predicate));
+    };
+    const gitBranch = useGitBranch(cwd);
+    const busyElapsedSeconds = useBusyElapsedSeconds(busy);
+    const columns = Math.max(20, stdout?.columns ?? 80);
+    const pagerPageSize = Math.max(5, Math.min(18, (stdout?.rows ?? 24) - 10));
+    const completion = !overlay && !busy ? completionForInput(editor.value, cwd) : { items: [], replaceFrom: 0 };
+    const completions = completion.items;
+    const selectedCompletion = clampCompletionIndex(completionIndex, completions.length);
+    useEffect(() => {
+        let alive = true;
+        void agentTuning()
+            .then((tuning) => {
+            if (alive)
+                setContextCompression(tuning.contextCompression);
+        })
+            .catch(() => {
+            if (alive)
+                setContextCompression(undefined);
+        });
+        return () => {
+            alive = false;
+        };
+    }, []);
+    useEffect(() => {
+        let alive = true;
+        void Promise.allSettled([getBrainPath(), loadMcpHubEntries(cwd), loadSkills(cwd)]).then(([brain, mcp, skills]) => {
+            if (!alive)
+                return;
+            setStartupReadiness({
+                brain: brain.status === 'fulfilled' && brain.value ? 'ready' : 'missing',
+                mcp: mcp.status === 'fulfilled'
+                    ? { count: mcp.value.entries.length, names: mcp.value.entries.map((entry) => entry.name) }
+                    : { count: 0, names: [] },
+                skills: skills.status === 'fulfilled'
+                    ? { count: skills.value.length, names: skills.value.map((skill) => skill.name) }
+                    : { count: 0, names: [] },
+            });
+        });
+        return () => {
+            alive = false;
+        };
+    }, [cwd]);
+    useEffect(() => {
+        const refresh = () => setBgTaskCount(backgroundTaskRunningCount());
+        refresh();
+        const timer = setInterval(refresh, 2000);
+        return () => clearInterval(timer);
+    }, []);
+    const bannerSignals = [
+        { label: 'brain', tone: startupReadiness.brain === 'ready' ? 'ready' : startupReadiness.brain === 'checking' ? 'muted' : 'warn', value: startupReadiness.brain },
+        { label: 'mcp', tone: startupReadiness.mcp === 'checking' ? 'muted' : startupReadiness.mcp.count ? 'ready' : 'warn', value: startupCount(startupReadiness.mcp) },
+        { label: 'skills', tone: startupReadiness.skills === 'checking' ? 'muted' : startupReadiness.skills.count ? 'ready' : 'warn', value: startupCount(startupReadiness.skills) },
+        ...(gitBranch ? [{ label: 'git', tone: 'ready', value: shortSignal(gitBranch) }] : []),
+    ];
+    const applyCompletion = () => {
+        const next = completionReplaceValue(editor.value, completions[selectedCompletion], completion.replaceFrom);
+        if (!next)
+            return false;
+        editor.setValue(next);
+        setCompletionIndex(0);
+        return true;
+    };
+    const requestExit = () => {
+        if (exitingRef.current)
+            return;
+        exitingRef.current = true;
+        void finalizeReplSession({
+            sessionId: sessionId.current,
+            sessionCreated: sessionCreated.current,
+            model,
+            cwd,
+            messages: msgsRef.current,
+            history: history.map((turn) => ({ role: turn.role, text: turn.text })),
+        })
+            .then((result) => {
+            const note = formatFinalizeMessage(result);
+            if (note)
+                process.stderr.write(`\n${note}\n`);
+            exit();
+        })
+            .catch(() => exit());
     };
-    const addTurn = (role, text) => setHistory((h) => [...h, { id: idRef.current++, role, text }]);
     // /diff /undo — git-backed (execFile ไม่ผ่าน shell)
     async function runGit(args, label) {
         try {
@@ -76,7 +297,460 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         approvalResolve.current = resolve;
         setApprovalReq({ tool, summary });
     });
+    const openModelPicker = () => {
+        const providers = modelProviderEntries();
+        const options = modelPickerOptions(model);
+        setOverlay({
+            kind: 'model',
+            phase: 'provider',
+            providers,
+            options,
+            selected: 0,
+        });
+    };
+    const openMcpHub = async () => {
+        try {
+            const state = await loadMcpHubEntries(process.cwd());
+            setOverlay({ detail: false, kind: 'mcp', notes: state.notes, selected: 0, servers: state.entries });
+        }
+        catch (e) {
+            addTurn('system', `mcp: ${e.message}`);
+        }
+    };
+    const moveMcpHub = (delta) => {
+        setOverlay((current) => {
+            if (current?.kind !== 'mcp' || current.detail)
+                return current;
+            const last = Math.max(0, current.servers.length - 1);
+            return { ...current, probe: undefined, selected: Math.max(0, Math.min(last, current.selected + delta)), toolSelected: 0 };
+        });
+    };
+    const moveMcpToolCatalog = (delta) => {
+        setOverlay((current) => {
+            if (current?.kind !== 'mcp' || !current.detail)
+                return current;
+            const tools = current.probe?.status === 'pass' ? (current.probe.tools ?? []) : [];
+            if (!tools.length)
+                return current;
+            const last = tools.length - 1;
+            const selected = Math.max(0, Math.min(last, (current.toolSelected ?? 0) + delta));
+            return { ...current, toolSelected: selected };
+        });
+    };
+    const testMcpServerFromOverlay = (current) => {
+        if (current.kind !== 'mcp')
+            return;
+        const server = current.servers[current.selected];
+        if (!server)
+            return;
+        setOverlay({ ...current, detail: true, probe: { serverName: server.name, status: 'running' }, toolSelected: 0 });
+        void probeMcpServer(server.config, 8_000)
+            .then((result) => {
+            setOverlay((latest) => {
+                if (latest?.kind !== 'mcp' || !latest.detail || latest.probe?.serverName !== server.name)
+                    return latest;
+                return {
+                    ...latest,
+                    detail: true,
+                    probe: result.ok
+                        ? { serverName: server.name, status: 'pass', tools: result.tools, transport: result.transport }
+                        : {
+                            error: result.error ?? 'unknown error',
+                            serverName: server.name,
+                            status: 'fail',
+                            transport: result.transport,
+                        },
+                    toolSelected: 0,
+                };
+            });
+        })
+            .catch((e) => {
+            setOverlay((latest) => {
+                if (latest?.kind !== 'mcp' || !latest.detail || latest.probe?.serverName !== server.name)
+                    return latest;
+                return {
+                    ...latest,
+                    detail: true,
+                    probe: { error: e.message, serverName: server.name, status: 'fail' },
+                    toolSelected: 0,
+                };
+            });
+        });
+    };
+    const moveModelPicker = (delta) => {
+        setOverlay((current) => {
+            if (current?.kind !== 'model')
+                return current;
+            const list = current.phase === 'provider' ? current.providers : current.options;
+            const last = Math.max(0, list.length - 1);
+            return { ...current, selected: Math.max(0, Math.min(last, current.selected + delta)) };
+        });
+    };
+    const selectModelFromOverlay = (current) => {
+        if (current.kind !== 'model')
+            return;
+        if (current.phase === 'provider') {
+            const provider = current.providers[current.selected];
+            if (!provider)
+                return;
+            const options = filterModelPickerOptions(modelPickerOptions(model), provider.id);
+            setOverlay({
+                kind: 'model',
+                phase: 'model',
+                providerFilter: provider.id,
+                providers: current.providers,
+                options,
+                selected: initialModelPickerIndex(options),
+            });
+            return;
+        }
+        const selectedSpec = current.options[current.selected]?.spec ?? '';
+        setOverlay(null);
+        if (!selectedSpec)
+            return;
+        const result = parseCommand(`/model ${selectedSpec}`, { model, costSummary: lastCost.current });
+        if (result.modelChange)
+            setModel(result.modelChange);
+        if (result.message)
+            addTurn('system', result.message);
+    };
+    const openHelpPager = (text = HELP_TEXT) => {
+        setOverlay({ kind: 'pager', lines: text.split('\n'), offset: 0, title: 'Sanook help' });
+    };
+    const movePager = (delta) => {
+        setOverlay((current) => {
+            if (current?.kind !== 'pager')
+                return current;
+            const max = Math.max(0, current.lines.length - pagerPageSize);
+            const step = delta === 'top' ? -current.lines.length : delta === 'bottom' ? current.lines.length : delta;
+            const next = Math.max(0, Math.min(current.offset + step, max));
+            return next === current.offset ? current : { ...current, offset: next };
+        });
+    };
+    const pagePagerForward = () => {
+        setOverlay((current) => {
+            if (current?.kind !== 'pager')
+                return current;
+            const max = Math.max(0, current.lines.length - pagerPageSize);
+            if (current.offset >= max)
+                return null;
+            return { ...current, offset: Math.min(current.offset + pagerPageSize, max) };
+        });
+    };
+    const openSkillsHub = async () => {
+        try {
+            const skills = (await loadSkills()).sort((a, b) => a.name.localeCompare(b.name));
+            setOverlay({ detail: false, kind: 'skills', selected: 0, skills });
+        }
+        catch (e) {
+            addTurn('system', `skills: ${e.message}`);
+        }
+    };
+    const openToolsHub = () => {
+        setOverlay({ detail: false, kind: 'tools', selected: 0, tools: TOOL_CATALOG });
+    };
+    const openTasksHub = () => {
+        const tasks = listBackgroundTasks().sort((a, b) => b.startedMs - a.startedMs);
+        setOverlay({ detail: false, kind: 'tasks', selected: 0, tasks });
+    };
+    const moveTasksHub = (delta) => {
+        setOverlay((current) => {
+            if (current?.kind !== 'tasks' || current.detail)
+                return current;
+            const last = Math.max(0, current.tasks.length - 1);
+            return { ...current, selected: Math.max(0, Math.min(last, current.selected + delta)) };
+        });
+    };
+    const copyLatestAssistant = async () => {
+        const latest = [...history].reverse().find((turn) => turn.role === 'assistant' && turn.text.trim());
+        if (!latest) {
+            addTurn('system', 'copy: ยังไม่มีคำตอบ assistant ให้คัดลอก');
+            return;
+        }
+        try {
+            const result = await copyTextToClipboard(latest.text, { writeOsc52: (sequence) => stdout?.write(sequence) });
+            addTurn('system', `copy: copied latest assistant (${latest.text.length} chars) via ${result.detail}`);
+        }
+        catch (e) {
+            addTurn('system', `copy: ${e.message}`);
+        }
+    };
+    const moveToolsHub = (delta) => {
+        setOverlay((current) => {
+            if (current?.kind !== 'tools' || current.detail)
+                return current;
+            const last = Math.max(0, current.tools.length - 1);
+            return { ...current, selected: Math.max(0, Math.min(last, current.selected + delta)) };
+        });
+    };
+    const moveSkillsHub = (delta) => {
+        setOverlay((current) => {
+            if (current?.kind !== 'skills' || current.detail)
+                return current;
+            const last = Math.max(0, current.skills.length - 1);
+            return { ...current, selected: Math.max(0, Math.min(last, current.selected + delta)) };
+        });
+    };
+    const openSessionsHub = async () => {
+        try {
+            const sessions = await listSessions({ cwd: null, limit: 20 });
+            setOverlay({ currentCwd: cwd, kind: 'sessions', selected: 0, sessions });
+        }
+        catch (e) {
+            addTurn('system', `sessions: ${e.message}`);
+        }
+    };
+    const moveSessionsHub = (delta) => {
+        setOverlay((current) => {
+            if (current?.kind !== 'sessions')
+                return current;
+            const last = Math.max(0, current.sessions.length - 1);
+            return { ...current, notice: undefined, pendingDeleteId: undefined, selected: Math.max(0, Math.min(last, current.selected + delta)) };
+        });
+    };
+    const inspectSessionFromOverlay = (current) => {
+        if (current.kind !== 'sessions' || !current.sessions[current.selected])
+            return;
+        setOverlay({ ...current, detail: true, notice: undefined, pendingDeleteId: undefined });
+    };
+    const resumeSessionFromOverlay = (current) => {
+        if (current.kind !== 'sessions')
+            return;
+        const session = current.sessions[current.selected];
+        setOverlay(null);
+        if (!session)
+            return;
+        restoreSession(session);
+    };
+    const restoreSession = (session) => {
+        msgsRef.current = session.messages;
+        checkpoints.current = [];
+        lastRun.current = null;
+        lastCost.current = '';
+        sessionId.current = session.id;
+        sessionCreated.current = session.created;
+        setModel(session.model);
+        resetLiveToolTrail();
+        resetLiveThinking();
+        const crossProject = session.cwd !== cwd;
+        const cwdNote = crossProject ? ` · cwd ${session.cwd.replace(homedir(), '~')}` : '';
+        replaceHistory([
+            {
+                id: idRef.current++,
+                role: 'system',
+                text: `↻ เปิด session ${session.id} (${session.messages.length} messages)${cwdNote}${crossProject ? ' · --continue-any' : ''}`,
+            },
+        ]);
+    };
+    const startSessionRename = (current) => {
+        if (current.kind !== 'sessions')
+            return;
+        const session = current.sessions[current.selected];
+        if (!session)
+            return;
+        const draft = session.title || firstUserSummary(session) || '';
+        setOverlay({
+            ...current,
+            detail: false,
+            notice: undefined,
+            pendingDeleteId: undefined,
+            renaming: draft,
+        });
+    };
+    const confirmSessionRename = async (current) => {
+        if (current.kind !== 'sessions' || current.renaming === undefined)
+            return;
+        const session = current.sessions[current.selected];
+        if (!session)
+            return;
+        const title = current.renaming.trim();
+        if (!title) {
+            setOverlay({ ...current, notice: 'rename: title cannot be empty' });
+            return;
+        }
+        try {
+            const updated = await renameSession(session.id, title);
+            if (!updated) {
+                setOverlay({ ...current, notice: `rename failed: ${session.id} not found` });
+                return;
+            }
+            const sessions = current.sessions.map((item) => (item.id === session.id ? updated : item));
+            setOverlay({
+                ...current,
+                notice: `renamed → ${title}`,
+                renaming: undefined,
+                sessions,
+            });
+        }
+        catch (e) {
+            setOverlay({ ...current, notice: `rename failed: ${e.message}` });
+        }
+    };
+    const deleteSessionFromOverlay = async (current) => {
+        if (current.kind !== 'sessions')
+            return;
+        const session = current.sessions[current.selected];
+        if (!session)
+            return;
+        if (current.pendingDeleteId !== session.id) {
+            setOverlay({ ...current, notice: `delete? press d again: ${session.id}`, pendingDeleteId: session.id });
+            return;
+        }
+        try {
+            const removed = await removeSession(session.id);
+            const sessions = current.sessions.filter((item) => item.id !== session.id);
+            const selected = Math.max(0, Math.min(current.selected, sessions.length - 1));
+            setOverlay({
+                detail: false,
+                kind: 'sessions',
+                notice: removed ? `deleted ${session.id}` : `already removed ${session.id}`,
+                selected,
+                sessions,
+            });
+        }
+        catch (e) {
+            setOverlay({ ...current, notice: `delete failed: ${e.message}`, pendingDeleteId: undefined });
+        }
+    };
     useInput((input, key) => {
+        if (overlay) {
+            if (overlay.kind === 'model') {
+                if (input === 'q' || input === 'Q')
+                    setOverlay(null);
+                else if (key.escape) {
+                    if (overlay.phase === 'model') {
+                        setOverlay({ ...overlay, phase: 'provider', providerFilter: undefined, selected: 0 });
+                    }
+                    else
+                        setOverlay(null);
+                }
+                else if (key.return)
+                    selectModelFromOverlay(overlay);
+                else if (key.downArrow || input === 'j' || input === 'J')
+                    moveModelPicker(1);
+                else if (key.upArrow || input === 'k' || input === 'K')
+                    moveModelPicker(-1);
+                return;
+            }
+            if (overlay.kind === 'mcp') {
+                if (input === 'q' || input === 'Q')
+                    setOverlay(null);
+                else if (input === 't' || input === 'T')
+                    testMcpServerFromOverlay(overlay);
+                else if (overlay.detail && (key.escape || key.return))
+                    setOverlay({ ...overlay, detail: false, toolSelected: 0 });
+                else if (key.escape)
+                    setOverlay(null);
+                else if (key.return && overlay.servers.length)
+                    setOverlay({ ...overlay, detail: true, toolSelected: 0 });
+                else if (overlay.detail && (key.downArrow || input === 'j' || input === 'J'))
+                    moveMcpToolCatalog(1);
+                else if (overlay.detail && (key.upArrow || input === 'k' || input === 'K'))
+                    moveMcpToolCatalog(-1);
+                else if (key.downArrow || input === 'j' || input === 'J')
+                    moveMcpHub(1);
+                else if (key.upArrow || input === 'k' || input === 'K')
+                    moveMcpHub(-1);
+                return;
+            }
+            if (overlay.kind === 'pager') {
+                if (key.escape || input === 'q' || input === 'Q')
+                    setOverlay(null);
+                else if (key.upArrow || input === 'k' || input === 'K')
+                    movePager(-1);
+                else if (key.downArrow || input === 'j' || input === 'J')
+                    movePager(1);
+                else if (key.pageUp || input === 'b' || input === 'B')
+                    movePager(-pagerPageSize);
+                else if (input === 'g')
+                    movePager('top');
+                else if (input === 'G')
+                    movePager('bottom');
+                else if (key.return || key.pageDown || input === ' ')
+                    pagePagerForward();
+                return;
+            }
+            if (overlay.kind === 'skills') {
+                if (input === 'q' || input === 'Q')
+                    setOverlay(null);
+                else if (overlay.detail && (key.escape || key.return))
+                    setOverlay({ ...overlay, detail: false });
+                else if (key.escape)
+                    setOverlay(null);
+                else if (key.return && overlay.skills.length)
+                    setOverlay({ ...overlay, detail: true });
+                else if (key.downArrow || input === 'j' || input === 'J')
+                    moveSkillsHub(1);
+                else if (key.upArrow || input === 'k' || input === 'K')
+                    moveSkillsHub(-1);
+                return;
+            }
+            if (overlay.kind === 'sessions') {
+                if (overlay.renaming !== undefined) {
+                    if (key.escape)
+                        setOverlay({ ...overlay, notice: undefined, renaming: undefined });
+                    else if (key.return)
+                        void confirmSessionRename(overlay);
+                    else if (key.backspace || key.delete)
+                        setOverlay({ ...overlay, renaming: overlay.renaming.slice(0, -1) });
+                    else if (input && !key.ctrl && !key.meta)
+                        setOverlay({ ...overlay, renaming: overlay.renaming + input });
+                    return;
+                }
+                if (input === 'q' || input === 'Q')
+                    setOverlay(null);
+                else if (overlay.detail && key.escape)
+                    setOverlay({ ...overlay, detail: false, notice: undefined, pendingDeleteId: undefined });
+                else if (key.escape)
+                    setOverlay(null);
+                else if (input === 'd' || input === 'D')
+                    void deleteSessionFromOverlay(overlay);
+                else if (input === 'r' || input === 'R')
+                    startSessionRename(overlay);
+                else if (input === 'i' || input === 'I')
+                    inspectSessionFromOverlay(overlay);
+                else if (key.return)
+                    resumeSessionFromOverlay(overlay);
+                else if (!overlay.detail && (key.downArrow || input === 'j' || input === 'J'))
+                    moveSessionsHub(1);
+                else if (!overlay.detail && (key.upArrow || input === 'k' || input === 'K'))
+                    moveSessionsHub(-1);
+                return;
+            }
+            if (overlay.kind === 'tools') {
+                if (input === 'q' || input === 'Q')
+                    setOverlay(null);
+                else if (overlay.detail && (key.escape || key.return))
+                    setOverlay({ ...overlay, detail: false });
+                else if (key.escape)
+                    setOverlay(null);
+                else if (key.return && overlay.tools.length)
+                    setOverlay({ ...overlay, detail: true });
+                else if (key.downArrow || input === 'j' || input === 'J')
+                    moveToolsHub(1);
+                else if (key.upArrow || input === 'k' || input === 'K')
+                    moveToolsHub(-1);
+                return;
+            }
+            if (overlay.kind === 'tasks') {
+                if (input === 'q' || input === 'Q')
+                    setOverlay(null);
+                else if (overlay.detail && (key.escape || key.return))
+                    setOverlay({ ...overlay, detail: false, tasks: listBackgroundTasks().sort((a, b) => b.startedMs - a.startedMs) });
+                else if (key.escape)
+                    setOverlay(null);
+                else if (key.return && overlay.tasks.length)
+                    setOverlay({ ...overlay, detail: true });
+                else if (key.downArrow || input === 'j' || input === 'J')
+                    moveTasksHub(1);
+                else if (key.upArrow || input === 'k' || input === 'K')
+                    moveTasksHub(-1);
+                return;
+            }
+            if (key.escape || key.return || input === 'q' || input === 'Q')
+                setOverlay(null);
+            return;
+        }
         // มี approval ค้าง → จับ y/n ก่อน (แม้ agent กำลังรัน/busy)
         if (approvalReq) {
             if (input === 'y' || input === 'Y' || key.return) {
@@ -96,10 +770,23 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
                 clearQueue();
                 return;
             }
+            if (key.ctrl && input === 't') {
+                noteToolTrailMode(changeToolTrailMode());
+                return;
+            }
+            if (key.ctrl && input === 'x') {
+                removeActiveQueued();
+                return;
+            }
+            if (!editor.value && queueRef.current.length && (key.upArrow || key.downArrow)) {
+                moveQueueActive(key.upArrow ? -1 : 1);
+                return;
+            }
             // พิมพ์ระหว่าง busy ได้ — Enter = ต่อคิว (รันอัตโนมัติหลัง turn นี้จบ)
             const a = editor.handleKey(input, key);
             if (a === 'submit') {
                 const v = editor.value.trim();
+                const expanded = editor.expandValue(v).trim();
                 editor.reset();
                 const slash = parseSlashInvocation(v);
                 if (slash?.name === 'stop') {
@@ -108,11 +795,44 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
                     clearQueue();
                     return;
                 }
-                if (v)
-                    enqueue(v);
+                if (expanded)
+                    enqueue(expanded);
+            }
+            return;
+        }
+        if (completions.length) {
+            if (key.upArrow) {
+                setCompletionIndex((index) => clampCompletionIndex(index - 1, completions.length));
+                return;
+            }
+            if (key.downArrow) {
+                setCompletionIndex((index) => clampCompletionIndex(index + 1, completions.length));
+                return;
+            }
+            if (key.tab || key.return) {
+                if (applyCompletion())
+                    return;
             }
+        }
+        if (key.ctrl && input === 't') {
+            noteToolTrailMode(changeToolTrailMode());
             return;
         }
+        const transcriptLimit = transcriptWindowSize(stdout?.rows);
+        const transcriptStep = transcriptScrollStep(transcriptLimit);
+        if (history.length > transcriptLimit) {
+            if (key.pageUp || (key.ctrl && input === 'u')) {
+                setTranscriptScroll((scroll) => {
+                    const max = Math.max(0, history.length - transcriptLimit);
+                    return Math.min(max, scroll + transcriptStep);
+                });
+                return;
+            }
+            if (key.pageDown || (key.ctrl && input === 'd')) {
+                setTranscriptScroll((scroll) => Math.max(0, scroll - transcriptStep));
+                return;
+            }
+        }
         const action = editor.handleKey(input, key);
         if (action === 'submit')
             void submit(editor.value);
@@ -120,7 +840,7 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
             if (editor.value)
                 editor.reset(); // Ctrl+C ครั้งแรก = ล้างบรรทัด, ว่างแล้ว = ออก
             else
-                exit();
+                requestExit();
         }
     });
     /** ย้อน 1 turn — คืนไฟล์ (git, recoverable) + ตัดบทสนทนากลับ */
@@ -141,7 +861,7 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         }
         msgsRef.current = msgsRef.current.slice(0, cp.msgLen);
         lastRun.current = null;
-        setHistory((h) => h.filter((t) => t.id < cp.turnId));
+        filterHistory((t) => t.id < cp.turnId);
         addTurn('system', `↩ ย้อนกลับ 1 turn${note}`);
     }
     async function retryLastTurn() {
@@ -153,7 +873,7 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         }
         msgsRef.current = msgsRef.current.slice(0, previous.msgLen);
         checkpoints.current = checkpoints.current.filter((cp) => cp.turnId < previous.turnId);
-        setHistory((h) => h.filter((t) => t.id < previous.turnId));
+        filterHistory((t) => t.id < previous.turnId);
         const mark = { turnId: idRef.current, msgLen: previous.msgLen };
         const preview = previous.userText.length > 120 ? `${previous.userText.slice(0, 117)}...` : previous.userText;
         addTurn('user', '/retry');
@@ -168,6 +888,8 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
             return;
         }
         const tuning = await agentTuning().catch(() => null);
+        if (tuning?.contextCompression)
+            setContextCompression(tuning.contextCompression);
         if (tuning?.compaction === 'summarize') {
             addTurn('system', '⏳ กำลังย่อ context ด้วย model ถูก…');
             msgsRef.current = await summarizeCompact(msgsRef.current, targetTokens, makeSummarizer(model, tuning.summaryModel), 20).catch(() => autoCompact(msgsRef.current, targetTokens, 20));
@@ -179,13 +901,14 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         }
     }
     async function submit(raw) {
-        const text = raw.trim();
+        const displayText = raw.trim();
+        const text = editor.expandValue(displayText).trim();
         editor.reset();
-        if (!text)
+        if (!displayText)
             return;
-        appendHistory(text, replHistory.current[replHistory.current.length - 1]);
-        replHistory.current.push(text);
-        const slash = parseSlashInvocation(text);
+        appendHistory(displayText, replHistory.current[replHistory.current.length - 1]);
+        replHistory.current.push(displayText);
+        const slash = parseSlashInvocation(displayText);
         if (slash) {
             if (slash.name === 'rewind') {
                 await rewind();
@@ -196,31 +919,38 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
                 if (custom) {
                     const expanded = expandCustomCommand(custom, slash.args);
                     const mark = { turnId: idRef.current, msgLen: msgsRef.current.length };
-                    addTurn('user', text);
+                    addTurn('user', displayText);
                     if (!expanded.trim()) {
                         addTurn('system', `custom command /${slash.name} ว่าง`);
                         return;
                     }
-                    await runAssistantTurn(expanded, [], mark, text);
+                    await runAssistantTurn(expanded, [], mark, displayText);
                     return;
                 }
             }
         }
-        const cmd = parseCommand(text, { model, costSummary: lastCost.current });
+        const cmd = parseCommand(displayText, { model, costSummary: lastCost.current });
         if (cmd.handled) {
-            addTurn('user', text);
+            addTurn('user', displayText);
             if (cmd.action === 'quit')
-                return exit();
+                return requestExit();
             if (cmd.action === 'clear') {
                 msgsRef.current = [];
                 checkpoints.current = [];
                 lastRun.current = null;
-                return setHistory([]);
+                setStreaming('');
+                resetLiveToolTrail();
+                replaceHistory([]);
+                return;
             }
             if (cmd.action === 'compact') {
                 void compactHistory(40_000, 'บีบ context');
                 return;
             }
+            if (cmd.action === 'copyLast') {
+                void copyLatestAssistant();
+                return;
+            }
             if (cmd.action === 'diff')
                 return void runGit(['diff', '--stat'], 'diff');
             if (cmd.action === 'retry')
@@ -241,6 +971,46 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
                 void runGit(['stash', 'push', '-u', '-m', BRAND.undoStashMessage], 'undo').then(() => addTurn('system', 'กู้คืน: git stash pop'));
                 return;
             }
+            if (cmd.action === 'help') {
+                openHelpPager(cmd.message);
+                return;
+            }
+            if (cmd.action === 'mcpHub') {
+                void openMcpHub();
+                return;
+            }
+            if (cmd.action === 'hotkeys') {
+                setOverlay({ kind: 'hotkeys' });
+                return;
+            }
+            if (cmd.action === 'modelPicker') {
+                openModelPicker();
+                return;
+            }
+            if (cmd.action === 'skillsHub') {
+                void openSkillsHub();
+                return;
+            }
+            if (cmd.action === 'toolTrail') {
+                noteToolTrailMode(changeToolTrailMode(cmd.toolTrailMode));
+                return;
+            }
+            if (cmd.action === 'details') {
+                applyDetailsMode(cmd.detailSection, cmd.detailMode);
+                return;
+            }
+            if (cmd.action === 'toolsHub') {
+                openToolsHub();
+                return;
+            }
+            if (cmd.action === 'sessionsHub') {
+                void openSessionsHub();
+                return;
+            }
+            if (cmd.action === 'tasksHub') {
+                openTasksHub();
+                return;
+            }
             if (cmd.modelChange)
                 setModel(cmd.modelChange);
             if (cmd.message)
@@ -249,11 +1019,11 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         }
         // prompt ปกติ → expand @mentions (inline ไฟล์ text + เก็บ path รูป)
         const mark = { turnId: idRef.current, msgLen: msgsRef.current.length };
-        addTurn('user', text);
+        addTurn('user', displayText);
         const { text: expanded, images, errors } = await expandMentions(text);
         if (errors.length)
             addTurn('system', `@mention: ${errors.join(' · ')}`);
-        await runAssistantTurn(expanded, images, mark, text);
+        await runAssistantTurn(expanded, images, mark, displayText);
     }
     async function runAssistantTurn(promptText, images, mark, userText = promptText) {
         lastRun.current = { ...mark, userText, promptText, images };
@@ -261,6 +1031,8 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         // (mode truncate: ปล่อยให้ loop.ts ตัดต่อ-step เอา; ไม่บีบที่นี่ กัน latency)
         if (estimateTokens(msgsRef.current) > PRE_TURN_COMPACT_TOKENS) {
             const t = await agentTuning().catch(() => null);
+            if (t?.contextCompression)
+                setContextCompression(t.contextCompression);
             if (t?.compaction === 'summarize') {
                 addTurn('system', '⏳ context ยาว — ย่ออัตโนมัติก่อนรอบนี้…');
                 msgsRef.current = await summarizeCompact(msgsRef.current, PRE_TURN_COMPACT_TOKENS, makeSummarizer(model, t.summaryModel), 20).catch(() => msgsRef.current);
@@ -271,9 +1043,15 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         checkpoints.current.push({ ref, turnId: mark.turnId, msgLen: mark.msgLen });
         const ac = new AbortController(); // steering: ให้ Esc/Ctrl+C หยุด stream กลางทางได้
         abortRef.current = ac;
+        resetLiveToolTrail();
+        resetLiveThinking();
+        setStreaming('');
+        setAgentStatus('Starting…');
         setBusy(true);
         let buf = '';
+        let reasoningBuf = '';
         let lastFlush = 0;
+        let lastThinkingFlush = 0;
         try {
             const { cost, messages, text } = await runAgent({
                 model,
@@ -285,8 +1063,13 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
                 permissionMode,
                 approve: requestApproval,
                 signal: ac.signal,
+                usageMeta: { sessionId: sessionId.current, source: 'repl' },
                 onEvent: (e) => {
-                    if (e.type === 'text') {
+                    if (e.type === 'status' && typeof e.detail === 'string') {
+                        setAgentStatus(e.detail);
+                    }
+                    else if (e.type === 'text') {
+                        setAgentStatus((prev) => (prev.startsWith('Codex') || prev.startsWith('Agent') ? 'Writing…' : prev));
                         buf += e.text ?? '';
                         const now = Date.now();
                         if (now - lastFlush > 80) {
@@ -295,14 +1078,25 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
                         }
                     }
                     else if (e.type === 'tool-call') {
-                        buf += `\n→ ${e.tool}\n`;
-                        setStreaming(buf);
+                        recordToolTrailEvent(e);
+                    }
+                    else if (e.type === 'tool-result' || e.type === 'error') {
+                        recordToolTrailEvent(e);
+                    }
+                    else if (e.type === 'reasoning') {
+                        reasoningBuf += e.text ?? '';
+                        thinkingRef.current = reasoningBuf;
+                        const now = Date.now();
+                        if (now - lastThinkingFlush > 120) {
+                            setThinking(reasoningBuf);
+                            lastThinkingFlush = now;
+                        }
                     }
                 },
             });
             msgsRef.current = messages;
             lastCost.current = cost.summary();
-            addTurn('assistant', buf.trim() || text.trim());
+            addTurn('assistant', buf.trim() || text.trim(), { thinking: snapshotThinking(reasoningBuf), toolTrail: snapshotToolTrail() });
             // เซฟ session ทุกรอบ → resume ได้ด้วย sanook -c
             void saveSession({
                 id: sessionId.current,
@@ -329,7 +1123,7 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
             if (ac.signal.aborted) {
                 // หยุดเอง — เก็บ partial output ไว้ดู, ทิ้ง turn นี้ออกจาก LLM history (msgsRef ไม่อัปเดต)
                 if (buf.trim())
-                    addTurn('assistant', buf.trim());
+                    addTurn('assistant', buf.trim(), { thinking: snapshotThinking(reasoningBuf), toolTrail: snapshotToolTrail() });
                 addTurn('system', '⊘ หยุด turn แล้ว (ไฟล์ที่ tool แก้ไปแล้วคืนด้วย /rewind ได้)');
             }
             else {
@@ -338,6 +1132,9 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         }
         finally {
             setStreaming('');
+            setAgentStatus('');
+            resetLiveThinking();
+            resetLiveToolTrail();
             setBusy(false);
             abortRef.current = null;
         }
@@ -347,12 +1144,36 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
             void submit(next);
     }
     const costHint = lastCost.current.includes('cost ') ? lastCost.current.split('cost ')[1] : '';
-    return (_jsxs(Box, { flexDirection: "column", children: [history.length === 0 ? _jsx(Banner, { model: model }) : null, _jsx(Static, { items: history, children: (turn) => _jsx(TurnView, { turn: turn }, turn.id) }), streaming ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: streaming }) })) : null, queued.length ? (_jsx(Box, { flexDirection: "column", marginTop: 1, children: queued.map((q, i) => (_jsxs(Text, { dimColor: true, children: ["\u23F3 \u0E04\u0E34\u0E27 ", i + 1, ": ", q.length > 64 ? `${q.slice(0, 64)}…` : q] }, i))) })) : null, approvalReq ? (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "yellow", paddingX: 1, flexDirection: "column", children: [_jsxs(Text, { color: "yellow", children: ["\u0E2D\u0E19\u0E38\u0E21\u0E31\u0E15\u0E34\u0E23\u0E31\u0E19 ", approvalReq.tool, "?"] }), _jsx(Text, { dimColor: true, children: approvalReq.summary }), _jsx(Text, { dimColor: true, children: "y = \u0E23\u0E31\u0E19 \u00B7 n = \u0E1B\u0E0F\u0E34\u0E40\u0E2A\u0E18" })] })) : (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: busy ? 'gray' : 'blue', paddingX: 1, children: [_jsx(Text, { color: busy ? 'gray' : 'cyan', children: busy ? '· ' : '› ' }), _jsx(InputView, { value: editor.value, cursor: editor.cursor, busy: busy })] })), _jsxs(Text, { dimColor: true, children: ['  ', model, " \u00B7 ", permissionMode === 'ask' ? 'ask-mode' : 'auto', " \u00B7 /help \u00B7 @file \u00B7 \u2191 history", costHint ? ` · ${costHint}` : ''] })] }));
+    const contextTokens = estimateTokens(msgsRef.current);
+    const activeQueueIndex = clampQueueActiveIndex(queueActiveIndex, queued.length);
+    const queueWindow = getQueueWindow(queued.length, activeQueueIndex);
+    const toolTrailView = toolTrailLines(toolTrail, columns, toolTrailMode);
+    const thinkingView = thinkingPanelLines(thinking, columns, thinkingMode);
+    const transcriptLimit = transcriptWindowSize(stdout?.rows);
+    const transcriptView = getTranscriptWindow(history.length, transcriptLimit, transcriptScroll);
+    const visibleHistory = history.slice(transcriptView.start, transcriptView.end);
+    return (_jsxs(Box, { flexDirection: "column", children: [history.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Banner, { columns: columns, model: model, mode: permissionMode === 'ask' ? 'ask' : 'auto', signals: bannerSignals }), _jsx(SessionPanel, { columns: columns, cwd: cwd, mcp: startupReadiness.mcp, model: model, mode: permissionMode === 'ask' ? 'ask' : 'auto', skills: startupReadiness.skills })] })) : null, transcriptView.showOlder ? (_jsxs(Text, { dimColor: true, children: ["\u2026 ", transcriptView.start, " older turns \u00B7 PgUp/Ctrl+U scroll \u00B7 PgDn/Ctrl+D newer"] })) : null, visibleHistory.map((turn) => (_jsx(TurnView, { columns: columns, thinkingMode: thinkingMode, toolTrailMode: toolTrailMode, turn: turn }, `${historyResetKey}-${turn.id}`))), transcriptView.showNewer ? (_jsxs(Text, { dimColor: true, children: ["\u2026 ", transcriptView.scrollFromBottom, " newer turns hidden \u00B7 PgDn/Ctrl+D to catch up"] })) : null, thinkingView.length ? _jsx(ThinkingView, { columns: columns, mode: thinkingMode, text: thinking }) : null, streaming ? (_jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsx(StreamingMarkdownText, { columns: columns, text: streaming }) })) : null, toolTrailView.length ? (_jsx(ToolTrailView, { columns: columns, items: toolTrail, mode: toolTrailMode })) : null, _jsx(FloatingOverlay, { columns: columns, overlay: overlay, pageSize: pagerPageSize }), _jsx(CompletionOverlay, { columns: columns, items: completions, selected: selectedCompletion }), queued.length ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { dimColor: true, children: ["queued (", queued.length, ") \u00B7 \u2191\u2193 select \u00B7 Ctrl+X delete \u00B7 Esc clears"] }), queueWindow.showLead ? _jsx(Text, { dimColor: true, children: " \u2026" }) : null, queued.slice(queueWindow.start, queueWindow.end).map((q, i) => (_jsxs(Text, { color: queueWindow.start + i === activeQueueIndex ? 'yellow' : undefined, dimColor: queueWindow.start + i !== activeQueueIndex, children: [queueWindow.start + i === activeQueueIndex ? '›' : ' ', " ", queueWindow.start + i + 1, ".", ' ', compactPreview(q, Math.max(16, columns - 10))] }, `${queueWindow.start + i}-${q.slice(0, 16)}`))), queueWindow.showTail ? _jsxs(Text, { dimColor: true, children: ["  \u2026and ", queued.length - queueWindow.end, " more"] }) : null] })) : null, approvalReq ? (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: "yellow", paddingX: 1, flexDirection: "column", children: [_jsxs(Text, { color: "yellow", children: ["\u0E2D\u0E19\u0E38\u0E21\u0E31\u0E15\u0E34\u0E23\u0E31\u0E19 ", approvalReq.tool, "?"] }), _jsx(Text, { dimColor: true, children: approvalReq.summary }), _jsx(Text, { dimColor: true, children: "y = \u0E23\u0E31\u0E19 \u00B7 n = \u0E1B\u0E0F\u0E34\u0E40\u0E2A\u0E18" })] })) : (_jsxs(Box, { marginTop: 1, borderStyle: "round", borderColor: busy ? 'gray' : 'blue', paddingX: 1, children: [_jsx(Text, { color: busy ? 'gray' : 'cyan', children: busy ? '· ' : '› ' }), _jsx(InputView, { value: editor.value, cursor: editor.cursor, busy: busy, agentStatus: agentStatus, toolTrail: toolTrail })] })), _jsx(Text, { dimColor: true, children: footerStatus({
+                    branch: gitBranch,
+                    backgroundTaskCount: bgTaskCount,
+                    busy,
+                    columns,
+                    contextCompression,
+                    contextTokens,
+                    costHint,
+                    cwd,
+                    elapsedSeconds: busyElapsedSeconds,
+                    model,
+                    mode: permissionMode === 'ask' ? 'ask' : 'auto',
+                    queuedCount: queued.length,
+                }) })] }));
 }
 /** input ที่มี cursor (inverse) + placeholder — minimal; รับ input ได้แม้ busy (ต่อคิว) */
-function InputView({ value, cursor, busy }) {
-    if (busy && !value)
-        return _jsx(Text, { dimColor: true, children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E17\u0E33\u0E07\u0E32\u0E19\u2026 Esc/Ctrl+C \u0E2B\u0E22\u0E38\u0E14 \u00B7 \u0E1E\u0E34\u0E21\u0E1E\u0E4C\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E15\u0E48\u0E2D\u0E04\u0E34\u0E27 (\u23CE)" });
+function InputView({ value, cursor, busy, agentStatus, toolTrail, }) {
+    if (busy && !value) {
+        const runningTool = toolTrail?.find((item) => item.status === 'running');
+        const detail = agentStatus || (runningTool ? `Tool · ${runningTool.name}` : 'Working…');
+        return (_jsxs(Text, { dimColor: true, children: [detail, " \u00B7 Esc/Ctrl+C \u0E2B\u0E22\u0E38\u0E14 \u00B7 \u0E1E\u0E34\u0E21\u0E1E\u0E4C\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E15\u0E48\u0E2D\u0E04\u0E34\u0E27 (\u23CE)"] }));
+    }
     if (!busy && !value)
         return _jsx(Text, { dimColor: true, children: "\u0E16\u0E32\u0E21\u0E2D\u0E30\u0E44\u0E23\u0E01\u0E47\u0E44\u0E14\u0E49 \u2014 /help \u0E14\u0E39\u0E04\u0E33\u0E2A\u0E31\u0E48\u0E07 \u00B7 /tools \u0E14\u0E39 tools \u00B7 @\u0E44\u0E1F\u0E25\u0E4C \u0E41\u0E19\u0E1A context/\u0E23\u0E39\u0E1B" });
     const before = value.slice(0, cursor);
@@ -360,10 +1181,28 @@ function InputView({ value, cursor, busy }) {
     const after = value.slice(cursor + 1);
     return (_jsxs(Text, { children: [before, _jsx(Text, { inverse: true, children: at }), after, busy ? _jsxs(Text, { dimColor: true, children: ['  ', "(\u23CE \u0E15\u0E48\u0E2D\u0E04\u0E34\u0E27)"] }) : null] }));
 }
-function TurnView({ turn }) {
+function ToolTrailView({ columns, items, mode }) {
+    const lines = toolTrailLines(items, columns, mode);
+    if (!lines.length)
+        return null;
+    return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: lines.map((line, index) => {
+            const isRunning = line.startsWith('>');
+            const isError = line.startsWith('!');
+            const isDone = line.startsWith('+');
+            const isMeta = line.startsWith('view:') || line.startsWith('tools:');
+            return (_jsx(Text, { color: index === 0 ? 'cyan' : isError ? 'red' : isRunning ? 'yellow' : undefined, dimColor: isDone || isMeta, wrap: "truncate-end", children: line }, `${index}-${line}`));
+        }) }));
+}
+function ThinkingView({ columns, mode, text }) {
+    const lines = thinkingPanelLines(text, columns, mode);
+    if (!lines.length)
+        return null;
+    return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: lines.map((line, index) => (_jsx(Text, { color: index === 0 ? 'cyan' : undefined, dimColor: index > 0, wrap: "truncate-end", children: line }, `${index}-${line}`))) }));
+}
+function TurnView({ columns, thinkingMode, toolTrailMode, turn, }) {
     if (turn.role === 'system')
         return _jsx(Text, { dimColor: true, children: turn.text });
     if (turn.role === 'user')
         return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "cyan", children: "\u203A " }), _jsx(Text, { color: "cyan", children: turn.text })] }));
-    return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: turn.text }) }));
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [turn.thinking ? _jsx(ThinkingView, { columns: columns, mode: thinkingMode, text: turn.thinking }) : null, _jsx(MarkdownText, { columns: columns, text: turn.text }), turn.toolTrail ? _jsx(ToolTrailView, { columns: columns, items: turn.toolTrail, mode: toolTrailMode }) : null] }));
 }