sanook-cli 0.5.10 → 0.5.13

package/dist/ui/banner.js

@@ -5,6 +5,7 @@ import Gradient from 'ink-gradient';
 import { homedir } from 'node:os';
 import { readFileSync } from 'node:fs';
 import { BRAND } from '../brand.js';
+import { clipToWidth, padEndToWidth } from './text-width.js';
 // gradient ของ Sanook: เขียว → ส้ม → ฟ้า (สนุก = สดใส)
 const SANOOK_GRADIENT = ['#22C55E', '#F97316', '#38BDF8'];
 const BANNER_TITLE = BRAND.bannerWide.toUpperCase();
@@ -24,11 +25,8 @@ const TINY_PANEL_COLUMNS = 44;
 const MAX_PANEL_COLUMNS = 100;
 // version จาก package.json (single source of truth) — กัน default drift เหมือน bin.ts
 const VERSION = JSON.parse(readFileSync(new URL('../../package.json', import.meta.url), 'utf8')).version;
-const clip = (text, width) => {
-    if (width <= 0)
-        return '';
-    return text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text;
-};
+// display-width aware so the Thai brand line + box border don't drift (Thai marks 0, emoji 2 cells)
+const clip = (text, width) => clipToWidth(text, width);
 function signalText(signals) {
     return signals
         .filter((signal) => signal.label.trim() && signal.value.trim())
@@ -73,7 +71,7 @@ function bannerLines({ account, dir, model, mode, signals, version, }, columns)
         `◆ ${BRAND_LINE}`,
         flow,
         routeLine,
-        ...SERVICE_ROUTES.map(([num, label, hint]) => `› ${num} ${label.padEnd(7)} ${hint}`),
+        ...SERVICE_ROUTES.map(([num, label, hint]) => `› ${num} ${padEndToWidth(label, 7)} ${hint}`),
     ];
 }
 /** welcome banner — Hermes-style responsive wordmark + compact Sanook launchpad. */

package/dist/ui/brain-wizard.js

@@ -10,16 +10,18 @@ const DEFAULT_PATH = join(homedir(), 'Documents', BRAIN_DEFAULTS.vaultName);
 export function BrainWizard({ onComplete }) {
     const [step, setStep] = useState('path');
     const [path, setPath] = useState(DEFAULT_PATH);
-    const [ownerName, setOwnerName] = useState(BRAIN_DEFAULTS.ownerName);
-    const [aiName, setAiName] = useState(BRAIN_DEFAULTS.aiName);
+    // raw typed values — '' means "skipped" (so it isn't seeded as a name); the placeholder still shows
+    // the default so the user knows what Enter-to-skip yields in the scaffolded vault.
+    const [ownerName, setOwnerName] = useState('');
+    const [aiName, setAiName] = useState('');
     return (_jsxs(Box, { flexDirection: "column", gap: 1, marginY: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "\uD83E\uDDE0 \u0E2A\u0E23\u0E49\u0E32\u0E07 Second Brain workspace" }), step === 'path' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: "1. \u0E27\u0E32\u0E07\u0E42\u0E04\u0E23\u0E07\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E44\u0E27\u0E49\u0E17\u0E35\u0E48\u0E44\u0E2B\u0E19? (Enter = default)" }), _jsxs(Text, { color: "gray", children: ["   ", DEFAULT_PATH] }), _jsx(TextInput, { defaultValue: DEFAULT_PATH, placeholder: DEFAULT_PATH, onSubmit: (v) => {
                             setPath(v.trim() || DEFAULT_PATH);
                             setStep('owner');
                         } })] })), step === 'owner' && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["2. \u0E40\u0E23\u0E35\u0E22\u0E01\u0E04\u0E38\u0E13\u0E27\u0E48\u0E32\u0E2D\u0E30\u0E44\u0E23\u0E14\u0E35? (\u0E0A\u0E37\u0E48\u0E2D/\u0E0A\u0E37\u0E48\u0E2D\u0E40\u0E25\u0E48\u0E19 \u2014 Enter \u0E40\u0E1B\u0E25\u0E48\u0E32 = \u0E43\u0E0A\u0E49 \"", BRAIN_DEFAULTS.ownerName, "\")"] }), _jsx(TextInput, { placeholder: BRAIN_DEFAULTS.ownerName, onSubmit: (v) => {
-                            setOwnerName(v.trim() || BRAIN_DEFAULTS.ownerName);
+                            setOwnerName(v.trim());
                             setStep('ai');
                         } })] })), step === 'ai' && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["3. \u0E2D\u0E22\u0E32\u0E01\u0E43\u0E2B\u0E49 AI \u0E40\u0E23\u0E35\u0E22\u0E01\u0E15\u0E31\u0E27\u0E40\u0E2D\u0E07\u0E27\u0E48\u0E32\u0E2D\u0E30\u0E44\u0E23? ", _jsxs(Text, { color: "gray", children: ["(Enter \u0E40\u0E1B\u0E25\u0E48\u0E32 = \"", BRAIN_DEFAULTS.aiName, "\")"] })] }), _jsx(TextInput, { placeholder: BRAIN_DEFAULTS.aiName, onSubmit: (v) => {
-                            setAiName(v.trim() || BRAIN_DEFAULTS.aiName);
+                            setAiName(v.trim());
                             setStep('autonomy');
                         } })] })), step === 'autonomy' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: "4. \u0E43\u0E2B\u0E49 AI \u0E17\u0E33\u0E07\u0E32\u0E19\u0E41\u0E1A\u0E1A\u0E44\u0E2B\u0E19?" }), _jsx(Select, { options: [
                             { label: 'ask-on-risk — ทำเลยถ้าปลอดภัย ถามเฉพาะ destructive (แนะนำ)', value: 'ask-on-risk' },

package/dist/ui/input-view.js

@@ -1,13 +1,14 @@
+import chalk from 'chalk';
 import stringWidth from 'string-width';
-import { graphemeBoundaries } from './useEditor.js';
+import { clampCursorToGrapheme, graphemeBoundaries } from './useEditor.js';
 // ────────────────────────────────────────────────────────────────────────────
 // Stable, Thai-safe rendering of the REPL input line.
+// Regression guards: repl-layout-guard.test.ts + input-view.test.ts (width + gap cursor).
 //
 // 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).
+//  1) block cursor on Thai text — splitting the line across multiple Ink <Text> nodes breaks
+//     grapheme shaping; inverse video on a middle segment paints over Thai base marks + vowels.
+//     Fix: one ANSI string for the whole line + bgCyan gap cell between clusters (never inverse on letters).
 //  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
@@ -26,17 +27,20 @@ export function graphemesOf(value) {
         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) {
+/** insert position between grapheme clusters (0 = before first char, n = after last) */
+export function cursorInsertGraphemeIndex(value, cursor) {
+    const clamped = clampCursorToGrapheme(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;
+        if (bounds[i] === clamped)
+            return i;
     }
-    return index;
+    return bounds.length - 1;
+}
+/** @deprecated use cursorInsertGraphemeIndex — kept for callers that need cluster index */
+export function cursorGraphemeIndex(value, cursor) {
+    const insert = cursorInsertGraphemeIndex(value, cursor);
+    return insert >= graphemesOf(value).length ? Math.max(0, insert - 1) : insert;
 }
 /** display width of one grapheme, never less than 1 cell (so the cursor always has a cell) */
 function cellWidth(grapheme) {
@@ -50,27 +54,29 @@ function cellWidth(grapheme) {
 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 insertAt = cursorInsertGraphemeIndex(value, cursor);
+    const units = [];
+    for (let i = 0; i < insertAt; i += 1) {
+        units.push({ text: graphemes[i], width: cellWidth(graphemes[i]), isCursor: false });
+    }
+    units.push({ text: ' ', width: 1, isCursor: true });
+    for (let i = insertAt; i < graphemes.length; i += 1) {
+        units.push({ text: graphemes[i], width: cellWidth(graphemes[i]), isCursor: false });
+    }
+    const cursorUnit = insertAt;
     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('') : '',
+            before: graphemes.slice(0, insertAt).join(''),
+            at: ' ',
+            after: graphemes.slice(insertAt).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) {
@@ -91,14 +97,37 @@ export function inputViewport(value, cursor, width) {
     }
     const slice = (from, to) => units
         .slice(from, to)
+        .filter((u) => !u.isCursor)
         .map((u) => u.text)
         .join('');
-    const atUnit = units[cursorUnit];
     return {
         lead: start > 0,
         before: slice(start, cursorUnit),
-        at: cursorUnit === units.length - 1 ? ' ' : atUnit.text,
+        at: ' ',
         after: slice(cursorUnit + 1, end),
         tail: end < units.length,
     };
 }
+/** Styled gap cursor cell — background highlight, not inverse video (safer for Thai terminals). */
+export function inputCursorCell() {
+    return chalk.bgCyan.black(' ');
+}
+/**
+ * Render the whole input line as one string so Thai clusters are shaped once (no split Text nodes).
+ * The cursor is a single highlighted gap cell between grapheme clusters, never on a letter.
+ */
+export function formatInputLineDisplay(vp, opts) {
+    const lead = vp.lead ? chalk.dim(SCROLL_LEAD) : '';
+    const tail = vp.tail ? chalk.dim(SCROLL_TAIL) : '';
+    const queue = opts?.queueHint ? chalk.dim(opts.queueHint) : '';
+    return `${lead}${vp.before}${inputCursorCell()}${vp.after}${tail}${queue}`;
+}
+/** Multiline input: same single-string cursor treatment at the grapheme insert point. */
+export function formatMultilineInputDisplay(value, cursor, opts) {
+    const insertAt = cursorInsertGraphemeIndex(value, cursor);
+    const graphemes = graphemesOf(value);
+    const before = graphemes.slice(0, insertAt).join('');
+    const after = graphemes.slice(insertAt).join('');
+    const queue = opts?.queueHint ? chalk.dim(opts.queueHint) : '';
+    return `${before}${inputCursorCell()}${after}${queue}`;
+}

package/dist/ui/markdown.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { memo, useRef } from 'react';
+import { clipToWidth } from './text-width.js';
 const FENCE_RE = /^\s*(`{3,}|~{3,})(.*)$/;
+// display-width aware so Thai/emoji/code lines in transcript truncate at the right column
 function clip(text, width) {
-    if (width <= 0)
-        return '';
-    return text.length > width ? `${text.slice(0, Math.max(0, width - 3))}...` : text;
+    return clipToWidth(text, width, '...');
 }
 function bodyWidth(columns) {
     return Math.max(24, Math.min(Math.max(30, columns - 4), 100));

package/dist/ui/overlay.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { HOTKEYS } from '../hotkeys.js';
+import { clipToWidth, padEndToWidth } from './text-width.js';
 const MIN_OVERLAY_COLUMNS = 42;
 const MAX_OVERLAY_COLUMNS = 96;
 const MODEL_WINDOW = 10;
@@ -11,6 +12,22 @@ const TASK_WINDOW = 10;
 const TOOL_WINDOW = 10;
 const DEFAULT_PAGER_PAGE_SIZE = 12;
 const COMPLETION_WINDOW = 8;
+/** Item rows + footer hint row — fixed slot height so / and @ completions do not bounce the input dock. */
+export const COMPLETION_OVERLAY_SLOT_LINES = COMPLETION_WINDOW + 1;
+/** Terminal rows reserved above the input while slash/@ completion is active (content + border). */
+export const COMPLETION_OVERLAY_RESERVED_ROWS = COMPLETION_OVERLAY_SLOT_LINES + 2;
+export function shouldReserveCompletionSlot(input, items) {
+    if (items.length > 0)
+        return true;
+    return input.startsWith('/') || input.includes('@');
+}
+export function completionOverlaySlotLines(items, selected, columns) {
+    const active = completionOverlayLines(items, selected, columns);
+    const slot = active.length ? [...active] : [];
+    while (slot.length < COMPLETION_OVERLAY_SLOT_LINES)
+        slot.push('');
+    return slot.slice(0, COMPLETION_OVERLAY_SLOT_LINES);
+}
 function OverlayBox({ children, columns }) {
     const width = overlayWidth(columns);
     return (_jsx(Box, { borderStyle: "double", borderColor: "cyan", flexDirection: "column", marginBottom: 1, paddingX: 1, width: width, children: children }));
@@ -18,10 +35,10 @@ function OverlayBox({ children, columns }) {
 function overlayWidth(columns) {
     return Math.max(34, Math.min(Math.max(MIN_OVERLAY_COLUMNS, Math.floor(columns || 80) - 4), MAX_OVERLAY_COLUMNS));
 }
+// display-width aware (Thai marks 0, emoji/CJK 2) so the bordered overlay columns + right edge stay
+// aligned for non-ASCII session titles / skill names / mcp targets / model labels.
 function clip(text, width) {
-    if (width <= 0)
-        return '';
-    return text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text;
+    return clipToWidth(text, width);
 }
 export function completionOverlayLines(items, selected, columns) {
     if (!items.length)
@@ -36,21 +53,22 @@ export function completionOverlayLines(items, selected, columns) {
     const lines = visible.map((item, offset) => {
         const index = start + offset;
         const cursor = index === safeSelected ? '>' : ' ';
-        return `${cursor} ${clip(item.display, commandWidth).padEnd(commandWidth)} ${clip(item.meta, metaWidth)}`;
+        return `${cursor} ${padEndToWidth(clip(item.display, commandWidth), commandWidth)} ${clip(item.meta, metaWidth)}`;
     });
     lines.push('↑↓ select · Tab/Enter complete');
     return lines;
 }
-export function CompletionOverlay({ columns, items, selected }) {
+export function CompletionOverlay({ columns, items, selected, reserved = false }) {
+    if (!reserved)
+        return null;
     const width = Math.max(28, Math.min(Math.max(34, columns - 6), MAX_OVERLAY_COLUMNS));
     const innerWidth = Math.max(1, width - 4);
-    const lines = completionOverlayLines(items, selected, columns);
-    if (!lines.length)
-        return null;
-    return (_jsx(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", marginBottom: 1, paddingX: 1, width: width, children: lines.map((line, index) => {
-            const isActive = line.startsWith('>');
-            return (_jsx(Text, { color: isActive ? 'green' : undefined, dimColor: !isActive, inverse: isActive, wrap: "truncate-end", children: clip(line, innerWidth) }, `${index}-${line}`));
-        }) }));
+    const lines = completionOverlaySlotLines(items, selected, columns);
+    const visible = items.length > 0;
+    return (_jsx(Box, { flexDirection: "column", height: COMPLETION_OVERLAY_RESERVED_ROWS, justifyContent: "flex-end", marginBottom: 1, width: width, children: visible ? (_jsx(Box, { borderStyle: "round", borderColor: "cyan", flexDirection: "column", paddingX: 1, children: lines.map((line, index) => {
+                const isActive = line.startsWith('>');
+                return (_jsx(Text, { color: isActive ? 'green' : undefined, dimColor: !isActive, inverse: isActive, wrap: "truncate-end", children: clip(line || ' ', innerWidth) }, `${index}-${line || 'blank'}`));
+            }) })) : null }));
 }
 export function hotkeyOverlayLines(columns) {
     const width = overlayWidth(columns);
@@ -96,7 +114,7 @@ export function modelOverlayLines(overlay, columns) {
         for (const [offset, provider] of visible.entries()) {
             const index = window.start + offset;
             const cursor = index === overlay.selected ? '>' : ' ';
-            lines.push(`${cursor} ${clip(provider.label, nameWidth).padEnd(nameWidth)} ${provider.modelCount} models · ${provider.status}`);
+            lines.push(`${cursor} ${padEndToWidth(clip(provider.label, nameWidth), nameWidth)} ${provider.modelCount} models · ${provider.status}`);
         }
         if (window.end < overlay.providers.length)
             lines.push(`... ${overlay.providers.length - window.end} more`);
@@ -115,7 +133,7 @@ export function modelOverlayLines(overlay, columns) {
         const index = window.start + offset;
         const cursor = index === overlay.selected ? '>' : ' ';
         const current = option.current ? '*' : ' ';
-        lines.push(`${cursor}${current} ${clip(option.label, optionWidth).padEnd(optionWidth)} ${clip(option.meta, metaWidth)}`);
+        lines.push(`${cursor}${current} ${padEndToWidth(clip(option.label, optionWidth), optionWidth)} ${clip(option.meta, metaWidth)}`);
     }
     if (window.end < overlay.options.length)
         lines.push(`... ${overlay.options.length - window.end} more`);
@@ -169,7 +187,7 @@ export function mcpOverlayLines(overlay, columns) {
     for (const [offset, server] of visible.entries()) {
         const index = window.start + offset;
         const cursor = index === overlay.selected ? '>' : ' ';
-        lines.push(`${cursor} ${clip(server.name, nameWidth).padEnd(nameWidth)} ${server.transport.padEnd(5)} ${clip(server.target, targetWidth)}`);
+        lines.push(`${cursor} ${padEndToWidth(clip(server.name, nameWidth), nameWidth)} ${server.transport.padEnd(5)} ${clip(server.target, targetWidth)}`);
     }
     if (window.end < overlay.servers.length)
         lines.push(`... ${overlay.servers.length - window.end} more`);
@@ -260,7 +278,7 @@ export function skillsOverlayLines(overlay, columns) {
     for (const [offset, skill] of visible.entries()) {
         const index = window.start + offset;
         const cursor = index === overlay.selected ? '>' : ' ';
-        lines.push(`${cursor} ${clip(skill.name, nameWidth).padEnd(nameWidth)} ${clip(skill.description || '(no description)', descWidth)}`);
+        lines.push(`${cursor} ${padEndToWidth(clip(skill.name, nameWidth), nameWidth)} ${clip(skill.description || '(no description)', descWidth)}`);
     }
     if (window.end < overlay.skills.length)
         lines.push(`... ${overlay.skills.length - window.end} more`);
@@ -304,7 +322,7 @@ export function toolsOverlayLines(overlay, columns) {
     for (const [offset, tool] of visible.entries()) {
         const index = window.start + offset;
         const cursor = index === overlay.selected ? '>' : ' ';
-        lines.push(`${cursor} ${clip(tool.group, groupWidth).padEnd(groupWidth)} ${clip(tool.name, nameWidth).padEnd(nameWidth)} ${clip(tool.summary, summaryWidth)}`);
+        lines.push(`${cursor} ${padEndToWidth(clip(tool.group, groupWidth), groupWidth)} ${padEndToWidth(clip(tool.name, nameWidth), nameWidth)} ${clip(tool.summary, summaryWidth)}`);
     }
     if (window.end < overlay.tools.length)
         lines.push(`... ${overlay.tools.length - window.end} more`);
@@ -452,7 +470,7 @@ export function sessionsOverlayLines(overlay, columns) {
         const cursor = index === overlay.selected ? '>' : ' ';
         const title = sessionTitle(session, overlay.currentCwd);
         const meta = `${session.model} · ${shortDate(session.updated)}`;
-        lines.push(`${cursor} ${clip(session.id, idWidth).padEnd(idWidth)} ${clip(title, titleWidth).padEnd(titleWidth)} ${clip(meta, metaWidth)}`);
+        lines.push(`${cursor} ${padEndToWidth(clip(session.id, idWidth), idWidth)} ${padEndToWidth(clip(title, titleWidth), titleWidth)} ${clip(meta, metaWidth)}`);
     }
     if (window.end < overlay.sessions.length)
         lines.push(`... ${overlay.sessions.length - window.end} more`);

package/dist/ui/queue.js

@@ -1,7 +1,8 @@
+import { clipToWidth } from './text-width.js';
 export const QUEUE_WINDOW = 3;
+// display-width aware: queued items are user prompts (often Thai) — clip by columns, not code units
 export function compactPreview(text, width) {
-    const max = Math.max(8, width);
-    return text.length > max ? `${text.slice(0, Math.max(0, max - 1))}…` : text;
+    return clipToWidth(text, Math.max(8, width));
 }
 export function getQueueWindow(queueLength, activeIndex = null) {
     const start = activeIndex === null ? 0 : Math.max(0, Math.min(activeIndex - 1, Math.max(0, queueLength - QUEUE_WINDOW)));

package/dist/ui/render.js

@@ -4,7 +4,7 @@ import { render } from 'ink';
 import { App } from './app.js';
 import { SetupWizard } from './setup.js';
 import { BrainWizard } from './brain-wizard.js';
-import { PersonaWizard } from './persona-wizard.js';
+import { PersonaWizard, PersonaOverlay } from './persona-wizard.js';
 import { saveKey, saveGlobalConfig, saveBrainPath } from '../config.js';
 import { BRAND } from '../brand.js';
 // Ink needs raw mode; mounting on a non-TTY stdin (piped/redirected/cron/CI) throws
@@ -33,6 +33,8 @@ export function Root({ needsSetup, appProps, clearScreen }) {
     const [model, setModel] = useState(appProps.initialModel);
     const [brainNote, setBrainNote] = useState(undefined);
     const [locale, setLocale] = useState('th');
+    // carried across the brain phase so the persona questionnaire still runs after brain creation
+    const [setupPersona, setSetupPersona] = useState(false);
     // เข้า REPL: เคลียร์จอที่เต็มไปด้วย wizard ก่อน → banner "Sanook AI" เด้งบนจอว่าง
     const enterApp = () => {
         clearScreen?.();
@@ -51,8 +53,14 @@ export function Root({ needsSetup, appProps, clearScreen }) {
                 });
                 setModel(r.model);
                 setLocale(r.locale);
+                setSetupPersona(r.setupPersona ?? false);
+                // setup → (brain?) → (persona?) → REPL. The persona phase runs after brain creation when both
+                // were requested, so a user who creates a vault AND fills the questionnaire isn't asked twice
+                // (the questionnaire prefills from the brain-seeded name).
                 if (r.createBrain)
                     setPhase('brain');
+                else if (r.setupPersona)
+                    setPhase('persona');
                 else
                     enterApp();
             })();
@@ -71,8 +79,9 @@ export function Root({ needsSetup, appProps, clearScreen }) {
                 try {
                     const res = await scaffoldBrain(target, {
                         ...BRAIN_DEFAULTS,
-                        ownerName: a.ownerName,
-                        aiName: a.aiName,
+                        // vault scaffold needs a non-empty name → apply the default when the user skipped (a.* === '')
+                        ownerName: a.ownerName || BRAIN_DEFAULTS.ownerName,
+                        aiName: a.aiName || BRAIN_DEFAULTS.aiName,
                         autonomy: a.autonomy,
                         language,
                         today,
@@ -81,12 +90,12 @@ export function Root({ needsSetup, appProps, clearScreen }) {
                     const wired = await wireBrainMcp(target).catch(() => 'skip');
                     const linked = await linkBrainToProject({ brainPath: target, cwd: process.cwd(), today }).catch(() => null);
                     // เซฟ persona/identity ที่เก็บใน wizard ลง durable memory (owner ground-truth) → agent จำได้ทันที
+                    // ส่ง RAW value (a.ownerName อาจเป็น '') — seedPersonaMemory จะข้ามค่าว่างเอง ไม่ seed 'Owner' placeholder
                     const seeded = await seedPersonaMemory({
                         ownerName: a.ownerName,
                         aiName: a.aiName,
                         language,
                         autonomy: a.autonomy,
-                        defaults: { ownerName: BRAIN_DEFAULTS.ownerName, aiName: BRAIN_DEFAULTS.aiName },
                     }).catch(() => 0);
                     const linkNote = linked?.projectRelDir
                         ? ` · project ${linked.projectRelDir} · ${linked.memoryCreated ? 'created' : 'linked'} ${BRAND.memoryFileName}`
@@ -98,11 +107,22 @@ export function Root({ needsSetup, appProps, clearScreen }) {
                 catch (e) {
                     setBrainNote(`⚠ สร้าง second-brain ไม่สำเร็จ: ${e.message} — ลองใหม่ด้วย ${'`'}sanook brain init${'`'}`);
                 }
-                enterApp();
+                if (setupPersona)
+                    setPhase('persona');
+                else
+                    enterApp();
             })();
         };
         return _jsx(BrainWizard, { onComplete: onComplete });
     }
+    if (phase === 'persona') {
+        // full persona questionnaire (PersonaOverlay loads existing answers — incl. a brain-seeded name —
+        // persists to auto-memory + vault, then reports). Its note is appended to any brain note above.
+        return (_jsx(PersonaOverlay, { onDone: (msg) => {
+                setBrainNote((n) => (n ? `${n}\n${msg}` : msg));
+                enterApp();
+            } }));
+    }
     // App mount สดตอน phase = 'app' → useState(initialModel) หยิบ model ที่เลือกจาก wizard ถูกต้อง
     return _jsx(App, { ...appProps, initialModel: model, initialNote: brainNote ?? appProps.initialNote });
 }
@@ -140,8 +160,8 @@ export function startBrainSetup() {
                 const target = expandHome(a.path);
                 const res = await scaffoldBrain(target, {
                     ...BRAIN_DEFAULTS,
-                    ownerName: a.ownerName,
-                    aiName: a.aiName,
+                    ownerName: a.ownerName || BRAIN_DEFAULTS.ownerName,
+                    aiName: a.aiName || BRAIN_DEFAULTS.aiName,
                     autonomy: a.autonomy,
                     today,
                 });
@@ -152,7 +172,6 @@ export function startBrainSetup() {
                     ownerName: a.ownerName,
                     aiName: a.aiName,
                     autonomy: a.autonomy,
-                    defaults: { ownerName: BRAIN_DEFAULTS.ownerName, aiName: BRAIN_DEFAULTS.aiName },
                 }).catch(() => 0);
                 unmount();
                 const linkLine = linked?.projectRelDir ? `\n   linked repo → ${linked.projectRelDir} · ${BRAND.memoryFileName} in cwd` : '';

package/dist/ui/session-panel.js

@@ -4,15 +4,13 @@ import { homedir } from 'node:os';
 import { useState } from 'react';
 import { BRAND } from '../brand.js';
 import { TOOL_CATALOG } from '../tool-catalog.js';
+import { clipToWidth } from './text-width.js';
 const MIN_PANEL_COLUMNS = 48;
 const COMPACT_PANEL_COLUMNS = 72;
 const MAX_PANEL_COLUMNS = 100;
 const PREVIEW_LIMIT = 4;
-const clip = (text, width) => {
-    if (width <= 0)
-        return '';
-    return text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text;
-};
+// display-width aware (Thai/emoji) so panel rows align with the border
+const clip = (text, width) => clipToWidth(text, width);
 function displayDir(cwd) {
     return (cwd ?? process.cwd()).replace(homedir(), '~');
 }

package/dist/ui/setup.js

@@ -31,6 +31,7 @@ export function SetupWizard({ onComplete }) {
     const [codexDeviceAttempt, setCodexDeviceAttempt] = useState(0);
     const [permissionMode, setPermissionMode] = useState('ask');
     const [gatewayHint, setGatewayHint] = useState();
+    const [createBrain, setCreateBrain] = useState(false);
     const cfg = provider ? PROVIDERS[provider] : undefined;
     const providerOptions = setupProviderOptions();
     const providerMenuLines = setupProviderMenuLines();
@@ -106,23 +107,9 @@ export function SetupWizard({ onComplete }) {
         };
     }, [step, cfg, key]);
     const modelOptions = cfg ? mergeModelOptions(cfg, remote) : [];
-    const finish = (createBrain) => {
-        if (createBrain) {
-            onComplete({
-                locale,
-                provider,
-                model,
-                envVar: cfg?.envVar ?? '',
-                key,
-                permissionMode,
-                gatewayHint,
-                createBrain: true,
-            });
-            return;
-        }
-        setStep('complete');
-    };
-    const finishRepl = () => onComplete({
+    // single terminal exit — carries both post-setup branch flags (brain creation + persona questionnaire).
+    // Root sequences them: setup → (brain?) → (persona?) → REPL.
+    const complete = (flags) => onComplete({
         locale,
         provider,
         model,
@@ -130,7 +117,8 @@ export function SetupWizard({ onComplete }) {
         key,
         permissionMode,
         gatewayHint,
-        createBrain: false,
+        createBrain: flags.createBrain,
+        setupPersona: flags.setupPersona,
     });
     const backToProvider = () => {
         setProvider('');
@@ -252,5 +240,19 @@ export function SetupWizard({ onComplete }) {
                         } })] })), step === 'brain-offer' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: m.stepBrain }), _jsx(Text, { color: "gray", children: m.brainQuestion }), _jsx(Select, { options: [
                             { label: m.brainYes, value: 'yes' },
                             { label: m.brainNo, value: 'no' },
-                        ], onChange: (v) => finish(v === 'yes') })] })), step === 'complete' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: m.stepComplete }), _jsx(Text, { bold: true, children: m.completeTitle }), _jsx(Text, { color: "gray", children: m.completeBody }), _jsxs(Text, { color: "cyan", children: ["   ", m.completeDashboard, ": ", BRAND.cliName, " dashboard"] }), gatewayHint ? _jsxs(Text, { color: "yellow", children: ["   Gateway: ", gatewayHint] }) : null, _jsxs(Text, { color: "gray", children: ["   permissionMode: ", permissionMode] }), _jsx(Select, { options: [{ label: m.completeRepl, value: 'repl' }], onChange: () => finishRepl() })] }))] }));
+                        ], onChange: (v) => {
+                            setCreateBrain(v === 'yes');
+                            setStep('persona-offer');
+                        } })] })), step === 'persona-offer' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: m.stepPersona }), _jsx(Text, { color: "gray", children: m.personaQuestion }), _jsx(Select, { options: [
+                            { label: m.personaYes, value: 'yes' },
+                            { label: m.personaNo, value: 'no' },
+                        ], onChange: (v) => {
+                            const setupPersona = v === 'yes';
+                            // jump straight to onComplete when a follow-up phase (brain/persona) will run; otherwise
+                            // show the summary 'complete' screen before entering the REPL.
+                            if (setupPersona || createBrain)
+                                complete({ createBrain, setupPersona });
+                            else
+                                setStep('complete');
+                        } })] })), step === 'complete' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: m.stepComplete }), _jsx(Text, { bold: true, children: m.completeTitle }), _jsx(Text, { color: "gray", children: m.completeBody }), _jsxs(Text, { color: "cyan", children: ["   ", m.completeDashboard, ": ", BRAND.cliName, " dashboard"] }), gatewayHint ? _jsxs(Text, { color: "yellow", children: ["   Gateway: ", gatewayHint] }) : null, _jsxs(Text, { color: "gray", children: ["   permissionMode: ", permissionMode] }), _jsx(Select, { options: [{ label: m.completeRepl, value: 'repl' }], onChange: () => complete({ createBrain: false, setupPersona: false }) })] }))] }));
 }

package/dist/ui/status.js

@@ -1,8 +1,6 @@
-const clip = (text, width) => {
-    if (width <= 0)
-        return '';
-    return text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text;
-};
+import { clipToWidth, displayWidth, padEndToWidth } from './text-width.js';
+// display-width aware (Thai marks 0, emoji/CJK 2) so the two-column footer stays aligned
+const clip = (text, width) => clipToWidth(text, width);
 export function statusSegments(columns) {
     const width = Math.max(20, Math.floor(columns || 80));
     return {
@@ -25,7 +23,7 @@ export function statusRuleWidths(columns, rightLabel, minLeftContent = 0) {
     const maxRight = Math.max(0, width - separatorWidth - leftFloor);
     if (!rightLabel || maxRight <= 0)
         return { leftWidth: width, rightWidth: 0, separatorWidth: 0 };
-    const rightWidth = Math.min(rightLabel.length, maxRight);
+    const rightWidth = Math.min(displayWidth(rightLabel), maxRight);
     return {
         leftWidth: Math.max(1, width - separatorWidth - rightWidth),
         rightWidth,
@@ -58,12 +56,13 @@ export function footerStatus({ branch, backgroundTaskCount = 0, busy = false, co
     if (!segments.cwd || !cwd)
         return clip(left, width);
     const right = formatCwd(cwd, branch);
-    const minRight = width >= 96 ? Math.min(right.length, 22) : Math.min(right.length, 12);
-    const minLeft = Math.min(width, Math.max(20, Math.min(left.length, width - 3 - minRight)));
+    const rightW = displayWidth(right);
+    const minRight = width >= 96 ? Math.min(rightW, 22) : Math.min(rightW, 12);
+    const minLeft = Math.min(width, Math.max(20, Math.min(displayWidth(left), width - 3 - minRight)));
     const rule = statusRuleWidths(width, right, minLeft);
     if (!rule.rightWidth)
         return clip(left, width);
-    const leftPart = clip(left, rule.leftWidth).padEnd(rule.leftWidth);
+    const leftPart = padEndToWidth(clip(left, rule.leftWidth), rule.leftWidth);
     const rightPart = clip(right, rule.rightWidth);
     return `${leftPart}${' '.repeat(rule.separatorWidth)}${rightPart}`;
 }

package/dist/ui/text-width.js

@@ -0,0 +1,52 @@
+import stringWidth from 'string-width';
+// Display-WIDTH-aware text helpers. The REPL renders Thai (combining vowels/tone marks = 0 cells),
+// emoji (2 cells), and CJK (2 cells); measuring those with String.prototype.length / .slice / .padEnd
+// counts UTF-16 code units, not terminal columns, so fixed-width layouts (banner box, status bar,
+// tool-trail columns, transcript truncation) drift, the right edge misaligns, and borders look broken
+// — differently across terminals. These helpers measure with string-width (the same table Ink uses to
+// wrap) and cut on grapheme boundaries, so a base char and its marks never split. For pure ASCII the
+// output is byte-identical to the old .length math (display width == length), so capable terminals are
+// unaffected; only Thai/emoji/CJK lines change — toward correct alignment.
+const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+/** split into grapheme clusters (base char + combining marks / emoji ZWJ sequences stay together) */
+function graphemes(text) {
+    return Array.from(segmenter.segment(text), (s) => s.segment);
+}
+/** terminal display width in columns (Thai marks 0, emoji/CJK 2) */
+export function displayWidth(text) {
+    return stringWidth(text);
+}
+/**
+ * Truncate `text` to at most `maxWidth` DISPLAY columns, appending `ellipsis` when content is cut.
+ * Cuts on grapheme boundaries (never splits a Thai cluster or emoji). When maxWidth is too small even
+ * for the ellipsis, fills with as many whole clusters as fit (no ellipsis).
+ */
+export function clipToWidth(text, maxWidth, ellipsis = '…') {
+    if (maxWidth <= 0)
+        return '';
+    if (stringWidth(text) <= maxWidth)
+        return text;
+    const ellW = stringWidth(ellipsis);
+    const budget = maxWidth > ellW ? maxWidth - ellW : maxWidth;
+    const withEllipsis = maxWidth > ellW;
+    let out = '';
+    let w = 0;
+    for (const g of graphemes(text)) {
+        const gw = Math.max(1, stringWidth(g)); // guard: a stray 0-width cluster still consumes one slot
+        if (w + gw > budget)
+            break;
+        out += g;
+        w += gw;
+    }
+    return withEllipsis ? out + ellipsis : out;
+}
+/** Pad the END with spaces to a target DISPLAY width (returns text unchanged if already ≥ target). */
+export function padEndToWidth(text, target) {
+    const pad = target - stringWidth(text);
+    return pad > 0 ? text + ' '.repeat(pad) : text;
+}
+/** Pad the START with spaces to a target DISPLAY width (returns text unchanged if already ≥ target). */
+export function padStartToWidth(text, target) {
+    const pad = target - stringWidth(text);
+    return pad > 0 ? ' '.repeat(pad) + text : text;
+}