sanook-cli 0.5.5 → 0.5.8

package/dist/ui/app.js

@@ -6,9 +6,10 @@ 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 { 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 { getBrainPath, appendBrainWorklog, appendBrainTranscript } from '../memory.js';
 import { autoCompact, estimateTokens, summarizeCompact } from '../compaction.js';
 import { makeSummarizer } from '../summarize.js';
 import { agentTuning, patchGlobalConfig } from '../config.js';
@@ -18,7 +19,9 @@ 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 { loadSkills, saveSkill } from '../skills.js';
+import { maybeAutoSkill } from '../self-improve.js';
+import { defaultSkillSynthesizer } from '../self-improve-synth.js';
 import { copyTextToClipboard } from '../clipboard.js';
 import { useEditor } from './useEditor.js';
 import { useBusyElapsedSeconds } from './useBusyElapsed.js';
@@ -34,8 +37,10 @@ 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 { inputViewport, graphemesOf, cursorGraphemeIndex, SCROLL_LEAD, SCROLL_TAIL } from './input-view.js';
+import { PersonaOverlay } from './persona-wizard.js';
 import { thinkingPanelLines, snapshotThinking } from './thinking-panel.js';
-import { toolTrailLines, updateToolTrailOnEvent } from './tool-trail.js';
+import { toolTrailLines, toolTrailHeader, toolTrailWidth, 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';
@@ -53,6 +58,7 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
     });
     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);
@@ -65,6 +71,7 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
     const [thinkingMode, setThinkingMode] = useState('collapsed');
     const [contextCompression, setContextCompression] = useState();
     const [transcriptScroll, setTranscriptScroll] = useState(0);
+    const [personaOpen, setPersonaOpen] = useState(false);
     const idRef = useRef(0);
     const lastCost = useRef('');
     const nextToolTrailId = useRef(0);
@@ -74,6 +81,7 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
     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([]);
@@ -259,6 +267,26 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         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());
+    };
     // /diff /undo — git-backed (execFile ไม่ผ่าน shell)
     async function runGit(args, label) {
         try {
@@ -817,7 +845,7 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
             if (editor.value)
                 editor.reset(); // Ctrl+C ครั้งแรก = ล้างบรรทัด, ว่างแล้ว = ออก
             else
-                exit();
+                requestExit();
         }
     });
     /** ย้อน 1 turn — คืนไฟล์ (git, recoverable) + ตัดบทสนทนากลับ */
@@ -910,7 +938,7 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         if (cmd.handled) {
             addTurn('user', displayText);
             if (cmd.action === 'quit')
-                return exit();
+                return requestExit();
             if (cmd.action === 'clear') {
                 msgsRef.current = [];
                 checkpoints.current = [];
@@ -938,6 +966,10 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
                     .catch((e) => addTurn('system', `personality: ${e.message}`));
                 return;
             }
+            if (cmd.action === 'personaSetup') {
+                setPersonaOpen(true);
+                return;
+            }
             if (cmd.action === 'insights') {
                 void renderInsights({ days: cmd.insightsDays, cwd: cmd.insightsAll ? null : undefined })
                     .then((msg) => addTurn('system', msg))
@@ -1023,11 +1055,13 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         resetLiveToolTrail();
         resetLiveThinking();
         setStreaming('');
+        setAgentStatus('Starting…');
         setBusy(true);
         let buf = '';
         let reasoningBuf = '';
         let lastFlush = 0;
         let lastThinkingFlush = 0;
+        const rememberedFacts = []; // 🧠 ที่ user สั่งจำใน turn นี้ → โชว์ indicator ใน terminal
         try {
             const { cost, messages, text } = await runAgent({
                 model,
@@ -1039,8 +1073,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) {
@@ -1049,6 +1088,11 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
                         }
                     }
                     else if (e.type === 'tool-call') {
+                        if (e.tool === 'remember') {
+                            const fact = e.detail?.fact;
+                            if (typeof fact === 'string' && fact.trim())
+                                rememberedFacts.push(fact.trim());
+                        }
                         recordToolTrailEvent(e);
                     }
                     else if (e.type === 'tool-result' || e.type === 'error') {
@@ -1067,7 +1111,11 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
             });
             msgsRef.current = messages;
             lastCost.current = cost.summary();
-            addTurn('assistant', buf.trim() || text.trim(), { thinking: snapshotThinking(reasoningBuf), toolTrail: snapshotToolTrail() });
+            const answerText = buf.trim() || text.trim();
+            addTurn('assistant', answerText, { thinking: snapshotThinking(reasoningBuf), toolTrail: snapshotToolTrail() });
+            // 🧠 indicator: ผู้ใช้สั่งให้จำ → บันทึกถาวรแล้ว (memory + second-brain ถ้าตั้งไว้)
+            for (const fact of rememberedFacts)
+                addTurn('system', `🧠 จำไว้แล้ว: ${fact}`);
             // เซฟ session ทุกรอบ → resume ได้ด้วย sanook -c
             void saveSession({
                 id: sessionId.current,
@@ -1077,7 +1125,7 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
                 cwd: process.cwd(),
                 messages,
             });
-            // worklog เข้า second-brain — vault จำว่าทำอะไรใน session นี้
+            // worklog (ย่อ) + บทสนทนาเต็ม (ถ้าเปิด brainTranscript) เข้า second-brain
             void (async () => {
                 const brain = await getBrainPath();
                 if (brain) {
@@ -1087,6 +1135,31 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
                         model,
                         today: new Date().toISOString().slice(0, 10),
                     }).catch(() => { });
+                    await appendBrainTranscript(brain, {
+                        sessionId: sessionId.current,
+                        prompt: promptText,
+                        answer: answerText,
+                        model,
+                        // per-turn timestamp → correct HH:MM heading + correct day file (matches the worklog
+                        // above); sessionCreated is frozen at session start so it stamped every turn the same.
+                        createdIso: new Date().toISOString(),
+                    }).catch(() => { });
+                }
+            })();
+            // self-improvement: งานเดิมที่สั่งซ้ำถึง threshold → สร้าง skill อัตโนมัติ + แจ้งใน terminal
+            void (async () => {
+                try {
+                    const existing = new Set((await loadSkills()).map((s) => s.name));
+                    const result = await maybeAutoSkill(promptText, {
+                        synthesize: defaultSkillSynthesizer(model),
+                        saveSkill,
+                        existingSkillNames: existing,
+                    });
+                    if (result.created && result.announcement)
+                        addTurn('system', result.announcement);
+                }
+                catch {
+                    /* self-improvement เป็น best-effort — ไม่ให้ล้ม turn */
                 }
             })();
         }
@@ -1103,6 +1176,7 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
         }
         finally {
             setStreaming('');
+            setAgentStatus('');
             resetLiveThinking();
             resetLiveToolTrail();
             setBusy(false);
@@ -1117,12 +1191,24 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
     const contextTokens = estimateTokens(msgsRef.current);
     const activeQueueIndex = clampQueueActiveIndex(queueActiveIndex, queued.length);
     const queueWindow = getQueueWindow(queued.length, activeQueueIndex);
-    const toolTrailView = toolTrailLines(toolTrail, columns, toolTrailMode);
+    // gate only — the expanded view renders via ToolTrailView/ActivityRow and the compact view
+    // recomputes its own strings; equivalent to toolTrailLines(...).length without building the array each render.
+    const showToolTrail = toolTrailMode !== 'hidden' && toolTrail.length > 0;
+    // id of the most recent turn that has a tool trail — only it keeps full expanded diffs in
+    // scrollback (older tool turns downgrade to compact). Tracks the trail, not just the last turn,
+    // so trailing text/command turns don't strip detail off the latest tool work.
+    let latestTrailTurnId;
+    for (let i = history.length - 1; i >= 0; i -= 1) {
+        if (history[i].toolTrail) {
+            latestTrailTurnId = history[i].id;
+            break;
+        }
+    }
     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 })] })), _jsx(Text, { dimColor: true, children: footerStatus({
+    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, isLatest: turn.id === latestTrailTurnId, 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, showToolTrail ? (_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" })] })) : personaOpen ? (_jsx(PersonaOverlay, { onDone: (msg) => { setPersonaOpen(false); addTurn('system', msg); } })) : (_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, columns: columns })] })), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: footerStatus({
                     branch: gitBranch,
                     backgroundTaskCount: bgTaskCount,
                     busy,
@@ -1138,27 +1224,65 @@ export function App({ initialModel, fallbackModel, budgetUsd, permissionMode = '
                 }) })] }));
 }
 /** 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)" });
-    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);
-    const at = value.slice(cursor, cursor + 1) || ' ';
-    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 InputView({ value, cursor, busy, agentStatus, toolTrail, columns = 80, }) {
+    if (busy && !value) {
+        const runningTool = toolTrail?.find((item) => item.status === 'running');
+        // prefer the running tool's friendly activity title (e.g. "📖 อ่านไฟล์ src/x.ts", "$ npm test") over
+        // the raw "Tool · read_file" status — same detail the tool trail shows, so the one-line status during a
+        // turn says specifically what's happening; falls back to agentStatus (Thinking…/Writing…/Agent · model).
+        const detail = runningTool?.activity?.title || agentStatus || (runningTool ? `Tool · ${runningTool.name}` : 'Working…');
+        // wrap="truncate-end": status ต้องอยู่ 1 บรรทัดเสมอ — กัน timer/elapsed ทำบรรทัดเด้งหลังส่ง prompt
+        return (_jsxs(Text, { dimColor: true, wrap: "truncate-end", 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, wrap: "truncate-end", 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" }));
+    }
+    // multiline (กด Alt+Enter / ลงท้าย \) — สูงหลายบรรทัดตั้งใจอยู่แล้ว: render grapheme-cursor แบบ wrap ปกติ
+    if (value.includes('\n')) {
+        const ci = cursorGraphemeIndex(value, cursor);
+        const graphemes = graphemesOf(value);
+        const before = graphemes.slice(0, ci).join('');
+        const at = ci < graphemes.length ? graphemes[ci] : ' ';
+        const after = ci < graphemes.length ? graphemes.slice(ci + 1).join('') : '';
+        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] }));
+    }
+    // บรรทัดเดียว: viewport กว้างคงที่ (เลื่อนแนวนอนแทน wrap) → กล่อง input สูง 1 บรรทัดเสมอ ไม่เด้งตอนพิมพ์ไทย
+    // เผื่อ overhead: border(2) + paddingX(2) + prefix "› "(2) + ช่อง cursor/suffix ~2
+    const queueHint = busy ? '  (⏎ ต่อคิว)' : '';
+    const reserved = 8 + queueHint.length;
+    const vp = inputViewport(value, cursor, Math.max(8, columns - reserved));
+    return (_jsxs(Text, { wrap: "truncate-end", children: [vp.lead ? _jsx(Text, { dimColor: true, children: SCROLL_LEAD }) : null, vp.before, _jsx(Text, { inverse: true, children: vp.at }), vp.after, vp.tail ? _jsx(Text, { dimColor: true, children: SCROLL_TAIL }) : null, queueHint ? _jsx(Text, { dimColor: true, children: queueHint }) : null] }));
+}
+function statusColor(status) {
+    return status === 'error' ? 'red' : status === 'running' ? 'yellow' : 'green';
+}
+function statusMarker(status) {
+    return status === 'error' ? '✗' : status === 'running' ? '›' : '✓';
+}
+// total diff rows rendered per tool row — a hard per-item height bound. diffLines caps each SIDE at
+// MAX_DIFF_LINES, so a two-sided edit can exceed this; we cap the combined rows here and show a plain
+// "…" (no count — the inner per-side "…(+N)" sentinels already carry the numbers, so we don't double-count).
+const MAX_ROW_DIFF_LINES = 14;
+/** one tool's activity: a friendly title line + colored diff (green +, red -), height-bounded. */
+function ActivityRow({ item, width }) {
+    const title = item.activity?.title ?? item.name;
+    const fullDiff = item.activity?.diff;
+    const diff = fullDiff?.slice(0, MAX_ROW_DIFF_LINES);
+    const diffClipped = (fullDiff?.length ?? 0) > MAX_ROW_DIFF_LINES;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: statusColor(item.status), wrap: "truncate-end", children: [statusMarker(item.status), " ", title] }), diff?.map((line, idx) => (_jsxs(Text, { color: line.sign === '+' ? 'green' : line.sign === '-' ? 'red' : undefined, dimColor: line.sign === ' ', wrap: "truncate-end", children: ['  ', line.sign === ' ' ? ' ' : line.sign, " ", line.text.slice(0, Math.max(0, width - 4))] }, `d-${item.id}-${idx}`))), diffClipped ? _jsx(Text, { dimColor: true, children: '      …' }) : null, item.status !== 'running' && item.detail ? (_jsxs(Text, { color: item.status === 'error' ? 'red' : undefined, dimColor: true, wrap: "truncate-end", children: ['    ↳ ', item.detail.slice(0, Math.max(0, width - 6))] })) : null] }));
 }
 function ToolTrailView({ columns, items, mode }) {
-    const lines = toolTrailLines(items, columns, mode);
-    if (!lines.length)
+    if (mode === 'hidden' || !items.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}`));
-        }) }));
+    const header = toolTrailHeader(items, mode);
+    // compact mode keeps the terse one-line string rendering
+    if (mode === 'compact') {
+        const lines = toolTrailLines(items, columns, mode);
+        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}`))) }));
+    }
+    // expanded: rich, colored per-tool activity with diffs
+    const width = toolTrailWidth(columns);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "cyan", wrap: "truncate-end", children: header[0] }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: header[1] }), items.map((item) => (_jsx(ActivityRow, { item: item, width: width }, item.id)))] }));
 }
 function ThinkingView({ columns, mode, text }) {
     const lines = thinkingPanelLines(text, columns, mode);
@@ -1166,10 +1290,10 @@ function ThinkingView({ columns, mode, text }) {
         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, }) {
+function TurnView({ columns, isLatest, 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 (_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] }));
+    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: isLatest || toolTrailMode !== 'expanded' ? toolTrailMode : 'compact' })) : null] }));
 }

package/dist/ui/input-view.js

@@ -0,0 +1,104 @@
+import stringWidth from 'string-width';
+import { graphemeBoundaries } from './useEditor.js';
+// ────────────────────────────────────────────────────────────────────────────
+// Stable, Thai-safe rendering of the REPL input line.
+//
+// Two bugs this fixes (เทียบกับ CLI เจ้าอื่นที่ "นิ่ง"):
+//  1) cursor split a grapheme cluster — the old code did value.slice(cursor, cursor+1),
+//     which on Thai cuts a base char away from its combining vowel/tone mark (สระ/วรรณยุกต์
+//     เป็น zero-width). The orphaned mark then renders on its own cell → "อักษรห่างเกินไป".
+//     Fix: the cursor highlights a WHOLE grapheme cluster (base + all its marks).
+//  2) the line bounced between 1 and 2 rows while typing — a wrapping <Text> grows the box
+//     vertically the moment content crosses the right edge, shoving the footer down on every
+//     keystroke. Fix: a fixed-width horizontal viewport (readline-style) so the input box is
+//     always exactly one row; long lines scroll left with ‹ / › markers instead of wrapping.
+//
+// Display width is measured with string-width (the same lib Ink wraps with), so Thai combining
+// marks count as 0 and the window math matches what the terminal actually paints.
+// ────────────────────────────────────────────────────────────────────────────
+export const SCROLL_LEAD = '‹';
+export const SCROLL_TAIL = '›';
+/** split a string into grapheme clusters (base char + its combining marks stay together) */
+export function graphemesOf(value) {
+    const bounds = graphemeBoundaries(value);
+    const out = [];
+    for (let i = 0; i < bounds.length - 1; i += 1)
+        out.push(value.slice(bounds[i], bounds[i + 1]));
+    return out;
+}
+/** grapheme-cluster index that a code-unit cursor sits at (0..graphemeCount) */
+export function cursorGraphemeIndex(value, cursor) {
+    const bounds = graphemeBoundaries(value);
+    let index = 0;
+    for (let i = 0; i < bounds.length; i += 1) {
+        if (bounds[i] <= cursor)
+            index = i;
+        else
+            break;
+    }
+    return index;
+}
+/** display width of one grapheme, never less than 1 cell (so the cursor always has a cell) */
+function cellWidth(grapheme) {
+    return Math.max(1, stringWidth(grapheme));
+}
+/**
+ * Compute the visible window for a single physical line.
+ * `width` = number of terminal columns available to the value (caller subtracts prefix/border/padding).
+ * Returns the slice around the cursor that fits, plus whether truncation markers are needed.
+ */
+export function inputViewport(value, cursor, width) {
+    const w = Math.max(4, Math.floor(width));
+    const graphemes = graphemesOf(value);
+    const ci = cursorGraphemeIndex(value, cursor);
+    // a trailing sentinel cell so a cursor parked at end-of-line still has somewhere to sit
+    const units = [...graphemes.map((g) => ({ text: g, width: cellWidth(g) })), { text: ' ', width: 1 }];
+    const cursorUnit = Math.min(ci, units.length - 1);
+    const totalWidth = units.reduce((sum, u) => sum + u.width, 0);
+    if (totalWidth <= w) {
+        return {
+            lead: false,
+            before: graphemes.slice(0, cursorUnit).join(''),
+            at: cursorUnit < graphemes.length ? graphemes[cursorUnit] : ' ',
+            after: cursorUnit < graphemes.length ? graphemes.slice(cursorUnit + 1).join('') : '',
+            tail: false,
+        };
+    }
+    // overflow → slide a window that always contains the cursor unit; reserve 1 cell for each
+    // truncation marker that will actually be shown.
+    let start = cursorUnit;
+    let end = cursorUnit + 1;
+    let used = units[cursorUnit].width;
+    // extend right first (so typing at end keeps the tail in view), then backfill left context.
+    // the marker reservations (start>0 ⇒ ‹, end<len ⇒ ›) are folded into each fit check.
+    while (end < units.length) {
+        const next = units[end].width;
+        if (used + next + (start > 0 ? 1 : 0) + (end + 1 < units.length ? 1 : 0) <= w) {
+            used += next;
+            end += 1;
+        }
+        else
+            break;
+    }
+    while (start > 0) {
+        const prev = units[start - 1].width;
+        if (used + prev + (start - 1 > 0 ? 1 : 0) + (end < units.length ? 1 : 0) <= w) {
+            used += prev;
+            start -= 1;
+        }
+        else
+            break;
+    }
+    const slice = (from, to) => units
+        .slice(from, to)
+        .map((u) => u.text)
+        .join('');
+    const atUnit = units[cursorUnit];
+    return {
+        lead: start > 0,
+        before: slice(start, cursorUnit),
+        at: cursorUnit === units.length - 1 ? ' ' : atUnit.text,
+        after: slice(cursorUnit + 1, end),
+        tail: end < units.length,
+    };
+}

package/dist/ui/persona-wizard.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { TextInput, Select } from '@inkjs/ui';
+import { PERSONA_QUESTIONS, PERSONA_OTHER } from '../persona.js';
+/**
+ * Interactive persona questionnaire (`sanook persona`). Walks PERSONA_QUESTIONS one at a
+ * time — A/B/C/D Selects and free-text inputs. A select "อื่นๆ (พิมพ์เอง)" drops into a
+ * free-text follow-up for that same question. Esc goes back one step. Calls onComplete with
+ * the full answers map when finished.
+ */
+export function PersonaWizard({ onComplete, initialAnswers = {}, }) {
+    const total = PERSONA_QUESTIONS.length;
+    const [index, setIndex] = useState(0);
+    const [answers, setAnswers] = useState(initialAnswers);
+    const [otherMode, setOtherMode] = useState(false);
+    const prefilled = Object.keys(initialAnswers).filter((k) => initialAnswers[k]?.trim()).length;
+    const q = PERSONA_QUESTIONS[index];
+    const goBack = () => {
+        if (otherMode) {
+            setOtherMode(false);
+            return;
+        }
+        if (index > 0)
+            setIndex(index - 1);
+    };
+    useInput((_input, key) => {
+        if (key.escape)
+            goBack();
+    });
+    const advance = (value) => {
+        const next = { ...answers, [q.id]: value };
+        setAnswers(next);
+        setOtherMode(false);
+        if (index + 1 >= total) {
+            onComplete(next);
+        }
+        else {
+            setIndex(index + 1);
+        }
+    };
+    const showTextInput = q.type === 'text' || otherMode;
+    // On Esc-back, surface the previously-chosen option FIRST so the highlight lands on it. @inkjs/ui
+    // Select always focuses the first option on (re)mount and ignores defaultValue for the highlight, so
+    // with no defaultValue pressing Enter selects the focused (first) option — making that the prior
+    // answer keeps "Esc-back then Enter to re-confirm" from silently overwriting it with the first option.
+    // If the prior answer was a custom "อื่นๆ" value (not a literal option), highlight the PERSONA_OTHER
+    // option so Enter re-enters other-mode (where the TextInput restores the typed text via defaultValue).
+    const selectOptions = (() => {
+        const opts = (q.options ?? []).map((o) => ({ label: o.label, value: o.value }));
+        const prior = answers[q.id];
+        if (!prior)
+            return opts;
+        let i = opts.findIndex((o) => o.value === prior);
+        if (i < 0)
+            i = opts.findIndex((o) => o.value === PERSONA_OTHER); // custom typed value → highlight "อื่นๆ"
+        return i > 0 ? [opts[i], ...opts.slice(0, i), ...opts.slice(i + 1)] : opts;
+    })();
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, marginY: 1, children: [_jsxs(Text, { bold: true, color: "cyan", children: ["\uD83E\uDEAA \u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32 Persona ", _jsx(Text, { color: "gray", children: "\u2014 \u0E1A\u0E2D\u0E01 AI \u0E27\u0E48\u0E32\u0E04\u0E38\u0E13\u0E40\u0E1B\u0E47\u0E19\u0E43\u0E04\u0E23 + \u0E2D\u0E22\u0E32\u0E01\u0E43\u0E2B\u0E49\u0E17\u0E33\u0E07\u0E32\u0E19\u0E22\u0E31\u0E07\u0E44\u0E07" })] }), _jsxs(Text, { color: "gray", children: ["\u0E02\u0E49\u0E2D ", index + 1, "/", total, " \u00B7 Esc = \u0E22\u0E49\u0E2D\u0E19\u0E01\u0E25\u0E31\u0E1A \u00B7 Ctrl+C = \u0E2D\u0E2D\u0E01", prefilled ? ` · โหลดค่าเดิม ${prefilled} ข้อ` : ''] }), _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: q.prompt }), showTextInput ? (_jsx(TextInput, { defaultValue: answers[q.id] ?? '', placeholder: otherMode ? 'พิมพ์คำตอบของคุณ…' : (q.placeholder ?? ''), onSubmit: (v) => advance(v.trim()) }, `text-${index}-${otherMode ? 'other' : 'main'}`)) : (_jsx(Select, { options: selectOptions, onChange: (v) => {
+                            if (v === PERSONA_OTHER)
+                                setOtherMode(true);
+                            else
+                                advance(v);
+                        } }, `select-${index}`))] })] }));
+}
+/** REPL overlay — `/persona` loads existing answers then runs the same wizard inline */
+export function PersonaOverlay({ onDone }) {
+    const [initialAnswers, setInitialAnswers] = useState(null);
+    useEffect(() => {
+        void import('../memory.js')
+            .then((m) => m.loadPersonaAnswers())
+            .then(setInitialAnswers)
+            .catch(() => setInitialAnswers({}));
+    }, []);
+    if (!initialAnswers) {
+        return (_jsx(Box, { marginY: 1, children: _jsx(Text, { color: "gray", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14 persona\u2026" }) }));
+    }
+    return (_jsx(PersonaWizard, { initialAnswers: initialAnswers, onComplete: (answers) => {
+            void (async () => {
+                const { persistPersonaAnswers } = await import('../memory.js');
+                const { memoryWritten, vaultWritten, brainPath } = await persistPersonaAnswers(answers);
+                const memLine = memoryWritten > 0
+                    ? `จำเข้า memory ${memoryWritten} ข้อ`
+                    : 'ไม่มีข้อมูลใหม่ (ตรงกับของเดิม)';
+                const vaultLine = vaultWritten ? ` · vault: ${brainPath}/Shared/User-Persona/persona.md` : '';
+                onDone(`✅ บันทึก Persona — ${memLine}${vaultLine}`);
+            })();
+        } }));
+}