sanook-cli 0.5.1 → 0.5.5

package/dist/ui/session-panel.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { homedir } from 'node:os';
+import { useState } from 'react';
+import { BRAND } from '../brand.js';
+import { TOOL_CATALOG } from '../tool-catalog.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;
+};
+function displayDir(cwd) {
+    return (cwd ?? process.cwd()).replace(homedir(), '~');
+}
+function sectionCount(value, fallback = 0) {
+    if (value === 'checking')
+        return 'checking';
+    if (!value)
+        return `${fallback}`;
+    return value.count ? `${value.count}` : 'none';
+}
+function previewNames(value, fallbackNames = []) {
+    if (value === 'checking')
+        return ['checking…'];
+    if (!value?.names.length)
+        return fallbackNames.length ? fallbackNames : ['none configured'];
+    return value.names.slice(0, PREVIEW_LIMIT);
+}
+export function sessionPanelLines({ columns, cwd, expanded, mcp, model, mode, skills, tools, }) {
+    const width = Math.max(20, Math.floor(columns || 80));
+    if (width < MIN_PANEL_COLUMNS)
+        return [];
+    const dir = displayDir(cwd);
+    const toolPreview = tools ?? { count: TOOL_CATALOG.length, names: TOOL_CATALOG.map((tool) => tool.name) };
+    const expandedSections = expanded ?? new Set();
+    if (width < COMPACT_PANEL_COLUMNS) {
+        return [
+            'Routes: Code · Brain · Connect · Ship',
+            'Code    @file · /tools · git diff/undo',
+            'Brain   context · remember · /skills',
+            'Connect /mcp search/install · doctor',
+            'Ship    /copy · cost guard · final proof',
+            `System ${model} · ${mode}-mode`,
+        ];
+    }
+    const lines = [
+        `${BRAND.bannerWide} service routes`,
+        'Code     @file mentions · read/edit/run tools · git diff/undo',
+        'Brain    second-brain context · remember/recall · reusable workflows /skills',
+        'Connect  MCP registry search/install · doctor · gateway serve',
+        'Ship     /copy handoff · cost guard · final proof · /undo safety',
+        'System   ask approvals · queued follow-ups · /hotkeys',
+        `Runtime ${model} · ${mode}-mode · BYOK · ${dir}`,
+        'Launchpad 1 tools · 2 skills · 3 MCP',
+    ];
+    const sectionLine = (key, label, countLabel, preview) => {
+        const open = expandedSections.has(key);
+        lines.push(`${open ? '▾' : '▸'} ${label} (${countLabel})`);
+        if (open) {
+            for (const name of preview)
+                lines.push(`    ${name}`);
+        }
+    };
+    sectionLine('tools', 'Tools', sectionCount(toolPreview, TOOL_CATALOG.length), previewNames(toolPreview, TOOL_CATALOG.map((tool) => tool.name)));
+    sectionLine('skills', 'Skills', sectionCount(skills), previewNames(skills, ['load with /skills']));
+    sectionLine('mcp', 'MCP', sectionCount(mcp), previewNames(mcp, ['sanook mcp search/install']));
+    return lines;
+}
+/** Hermes-style startup service panel, rebranded around Sanook's local-first workflow. */
+export function SessionPanel(props) {
+    const [expanded, setExpanded] = useState(() => new Set());
+    useInput((input) => {
+        if (input === '1') {
+            setExpanded((current) => {
+                const next = new Set(current);
+                if (next.has('tools'))
+                    next.delete('tools');
+                else
+                    next.add('tools');
+                return next;
+            });
+        }
+        else if (input === '2') {
+            setExpanded((current) => {
+                const next = new Set(current);
+                if (next.has('skills'))
+                    next.delete('skills');
+                else
+                    next.add('skills');
+                return next;
+            });
+        }
+        else if (input === '3') {
+            setExpanded((current) => {
+                const next = new Set(current);
+                if (next.has('mcp'))
+                    next.delete('mcp');
+                else
+                    next.add('mcp');
+                return next;
+            });
+        }
+    });
+    const width = Math.max(20, Math.floor(props.columns || 80));
+    const lines = sessionPanelLines({ ...props, expanded });
+    if (!lines.length)
+        return null;
+    const panelWidth = Math.max(36, Math.min(width, MAX_PANEL_COLUMNS));
+    const innerWidth = Math.max(1, panelWidth - 4);
+    return (_jsx(Box, { borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, width: panelWidth, marginBottom: 1, children: lines.map((line, index) => (_jsx(Text, { color: index === 0 ? 'green' : undefined, dimColor: index > 0, wrap: "truncate-end", children: clip(line, innerWidth) }, `${index}-${line}`))) }));
+}

package/dist/ui/setup-providers.js

@@ -0,0 +1,40 @@
+import { PROVIDERS, hasUsableEnvKey } from '../providers/registry.js';
+import { resolveKeyFromEnv } from '../providers/keys.js';
+/** Provider menu order — Codex sits right after OpenAI (ChatGPT plan vs API key). */
+export const SETUP_PROVIDER_ORDER = [
+    'anthropic',
+    'openai',
+    'codex',
+    'google',
+    'xai',
+    'mistral',
+    'groq',
+    'ollama',
+    'lmstudio',
+];
+/** label + hint ต่อ provider: เจอ key ใน env / local / ChatGPT-login / ต้องมี key — ให้เลือกง่ายขึ้น */
+export function providerOption(id) {
+    const p = PROVIDERS[id];
+    let hint;
+    if (p.kind === 'delegate')
+        hint = 'login ChatGPT · ไม่ใช้ API key';
+    else if (!p.requiresKey)
+        hint = 'local · ไม่ต้อง key';
+    else if (hasUsableEnvKey(id))
+        hint = '✓ key ใน env ใช้ได้';
+    else if (resolveKeyFromEnv(p.envVar, p.envFallbacks))
+        hint = 'key ใน env ใช้ไม่ได้';
+    else
+        hint = 'ต้องมี API key';
+    return { label: `${p.label}  —  ${hint}`, value: p.id };
+}
+export function setupProviderOptions() {
+    return SETUP_PROVIDER_ORDER.filter((id) => PROVIDERS[id]).map((id) => providerOption(id));
+}
+/** Static lines so every provider (incl. Codex) is visible before scrolling the Select. */
+export function setupProviderMenuLines() {
+    return setupProviderOptions().map((option, index) => {
+        const marker = option.value === 'codex' ? '★' : '·';
+        return `   ${marker} ${index + 1}. ${option.label}`;
+    });
+}

package/dist/ui/setup.js

@@ -1,31 +1,21 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { Select, PasswordInput } from '@inkjs/ui';
 import { PROVIDERS, consoleUrl } from '../providers/registry.js';
-import { resolveKeyFromEnv, assertDirectApiKey } from '../providers/keys.js';
+import { assertDirectApiKey } from '../providers/keys.js';
 import { listRemoteModels, mergeModelOptions } from '../providers/models.js';
 import { detectCodex } from '../providers/codex.js';
+import { CODEX_DEVICE_VERIFY_URL, runCodexDeviceCodeLogin } from '../providers/codex-login.js';
 import { BRAND } from '../brand.js';
-// จัดลำดับ provider ในเมนู: cloud ยอดนิยม → cloud อื่น → local → ChatGPT-plan (codex) ท้ายสุด
-const PROVIDER_ORDER = ['anthropic', 'openai', 'google', 'deepseek', 'xai', 'mistral', 'groq', 'glm', 'minimax', 'ollama', 'lmstudio', 'codex'];
-/** label + hint ต่อ provider: เจอ key ใน env / local / ChatGPT-login / ต้องมี key — ให้เลือกง่ายขึ้น */
-export function providerOption(id) {
-    const p = PROVIDERS[id];
-    let hint;
-    if (p.kind === 'delegate')
-        hint = 'login ChatGPT · ไม่ใช้ API key';
-    else if (!p.requiresKey)
-        hint = 'local · ไม่ต้อง key';
-    else if (resolveKeyFromEnv(p.envVar, p.envFallbacks))
-        hint = '✓ เจอ key ใน env';
-    else
-        hint = 'ต้องมี API key';
-    return { label: `${p.label}  —  ${hint}`, value: p.id };
-}
-/** first-run setup wizard: เลือก provider → (codex login | API key) → เลือก model → เสนอสร้าง second-brain */
+import { setupProviderMenuLines, setupProviderOptions } from './setup-providers.js';
+import { detectDefaultLocale, getLocaleCatalog, normalizeLocale } from '../i18n/index.js';
+export { providerOption } from './setup-providers.js';
+/** first-run setup wizard: language → welcome → provider → auth → model → brain → complete */
 export function SetupWizard({ onComplete }) {
-    const [step, setStep] = useState('provider');
+    const [step, setStep] = useState('language');
+    const [locale, setLocale] = useState(detectDefaultLocale());
+    const m = getLocaleCatalog(locale).setup;
     const [provider, setProvider] = useState('');
     const [key, setKey] = useState('');
     const [model, setModel] = useState('');
@@ -33,9 +23,24 @@ export function SetupWizard({ onComplete }) {
     const [loadingModels, setLoadingModels] = useState(false);
     const [codexStatus, setCodexStatus] = useState(null);
     const [recheck, setRecheck] = useState(0);
+    const [keyDraft, setKeyDraft] = useState('');
     const [keyError, setKeyError] = useState('');
+    const [codexDeviceCode, setCodexDeviceCode] = useState('');
+    const [codexDeviceStatus, setCodexDeviceStatus] = useState('idle');
+    const [codexDeviceError, setCodexDeviceError] = useState('');
+    const [codexDeviceAttempt, setCodexDeviceAttempt] = useState(0);
+    const [permissionMode, setPermissionMode] = useState('ask');
+    const [gatewayHint, setGatewayHint] = useState();
     const cfg = provider ? PROVIDERS[provider] : undefined;
-    const providerOptions = PROVIDER_ORDER.filter((id) => PROVIDERS[id]).map(providerOption);
+    const providerOptions = setupProviderOptions();
+    const providerMenuLines = setupProviderMenuLines();
+    const advanceIfCodexReady = (status) => {
+        if (!status.loggedIn)
+            return;
+        setModel(`codex:${PROVIDERS.codex.models.default}`);
+        if (status.installed)
+            setStep('agent');
+    };
     // codex-auth: เช็ก codex CLI ติดตั้ง + login ChatGPT (re-run เมื่อกด "เช็กใหม่")
     useEffect(() => {
         if (step !== 'codex-auth')
@@ -46,16 +51,48 @@ export function SetupWizard({ onComplete }) {
             if (!alive)
                 return;
             setCodexStatus(s);
-            if (s.installed && s.loggedIn) {
-                // login แล้ว → ใช้ default model ของ codex (ChatGPT-plan เลือก model เอง) ข้ามขั้นเลือก key/model
-                setModel(`codex:${PROVIDERS.codex.models.default}`);
-                setStep('brain-offer');
-            }
+            advanceIfCodexReady(s);
         });
         return () => {
             alive = false;
         };
     }, [step, recheck]);
+    // Hermes-style device-code login (writes ~/.codex/auth.json for the official CLI)
+    useEffect(() => {
+        if (step !== 'codex-device-code')
+            return;
+        let alive = true;
+        const controller = new AbortController();
+        setCodexDeviceStatus('running');
+        setCodexDeviceError('');
+        setCodexDeviceCode('');
+        void runCodexDeviceCodeLogin({
+            signal: controller.signal,
+            onStatus: (message) => {
+                if (!alive)
+                    return;
+                if (message.startsWith('code:'))
+                    setCodexDeviceCode(message.slice('code:'.length));
+            },
+        })
+            .then(() => {
+            if (!alive)
+                return;
+            setCodexDeviceStatus('done');
+            setRecheck((n) => n + 1);
+            setStep('codex-auth');
+        })
+            .catch((e) => {
+            if (!alive)
+                return;
+            setCodexDeviceStatus('error');
+            setCodexDeviceError(e.message);
+        });
+        return () => {
+            alive = false;
+            controller.abort();
+        };
+    }, [step, codexDeviceAttempt]);
     // ดึงรายชื่อ model จริงจาก provider (เฉพาะ provider แบบ SDK ที่ต้อง/ไม่ต้อง key)
     useEffect(() => {
         if (step !== 'model' || !cfg)
@@ -70,30 +107,61 @@ export function SetupWizard({ onComplete }) {
         };
     }, [step, cfg, key]);
     const modelOptions = cfg ? mergeModelOptions(cfg, remote) : [];
-    const finish = (createBrain) => onComplete({ provider, model, envVar: cfg?.envVar ?? '', key, createBrain });
+    const finish = (createBrain) => {
+        if (createBrain) {
+            onComplete({
+                locale,
+                provider,
+                model,
+                envVar: cfg?.envVar ?? '',
+                key,
+                permissionMode,
+                gatewayHint,
+                createBrain: true,
+            });
+            return;
+        }
+        setStep('complete');
+    };
+    const finishRepl = () => onComplete({
+        locale,
+        provider,
+        model,
+        envVar: cfg?.envVar ?? '',
+        key,
+        permissionMode,
+        gatewayHint,
+        createBrain: false,
+    });
     const backToProvider = () => {
         setProvider('');
         setCodexStatus(null);
         setKeyError('');
         setKey('');
+        setKeyDraft('');
+        setCodexDeviceCode('');
+        setCodexDeviceStatus('idle');
+        setCodexDeviceError('');
         setStep('provider');
     };
     // Esc บนทุก step (ยกเว้น provider) = ย้อนกลับไปเลือก provider — กัน dead-end ตอนเลือกผิด
-    // หรือ codex detect ค้าง (step codex-auth ตอน pending ไม่มีปุ่มอื่น แต่ Esc ออกได้เสมอ)
     useInput((_input, key) => {
-        if (key.escape && step !== 'provider')
+        if (key.return && step === 'key' && !keyDraft.trim()) {
+            setKeyError(m.keyEmptyError);
+            return;
+        }
+        if (key.escape && step !== 'provider' && step !== 'language' && step !== 'codex-device-code')
             backToProvider();
     });
-    // ตรวจ API key ในขั้นใส่ key — ว่าง = ไม่ผ่าน, OAuth/format ผิด = บอก error (กัน setup จบทั้งที่ key ใช้ไม่ได้)
     const submitKey = (raw) => {
         const k = raw.trim();
         if (!k) {
-            setKeyError('วาง API key ก่อนค่ะ (กด Enter ทั้งที่ว่างไม่ได้) · Esc = กลับไปเลือก provider');
+            setKeyError(m.keyEmptyError);
             return;
         }
         if (cfg) {
             try {
-                assertDirectApiKey(cfg, k); // reject OAuth/subscription token + format ผิด (เหมือน runtime)
+                assertDirectApiKey(cfg, k);
             }
             catch (e) {
                 setKeyError(e.message.split('\n')[0]);
@@ -102,9 +170,16 @@ export function SetupWizard({ onComplete }) {
         }
         setKeyError('');
         setKey(k);
+        setKeyDraft(k);
         setStep('model');
     };
-    return (_jsxs(Box, { flexDirection: "column", gap: 1, marginY: 1, children: [_jsxs(Text, { bold: true, color: "cyan", children: ["\u2699  \u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32 ", BRAND.bannerTitle, " (\u0E04\u0E23\u0E31\u0E49\u0E07\u0E41\u0E23\u0E01)"] }), step === 'provider' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: "1. \u0E40\u0E25\u0E37\u0E2D\u0E01 AI provider (\u2191\u2193 \u0E40\u0E25\u0E37\u0E2D\u0E01 \u00B7 Enter \u0E22\u0E37\u0E19\u0E22\u0E31\u0E19):" }), _jsx(Text, { color: "gray", children: "   cloud = \u0E43\u0E2A\u0E48 API key \u00B7 local = \u0E1F\u0E23\u0E35\u0E1A\u0E19\u0E40\u0E04\u0E23\u0E37\u0E48\u0E2D\u0E07 \u00B7 Codex = login \u0E14\u0E49\u0E27\u0E22 ChatGPT" }), _jsx(Select, { options: providerOptions, onChange: (v) => {
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, marginY: 1, children: [_jsxs(Text, { bold: true, color: "cyan", children: ["\u2699  ", m.title] }), step === 'language' && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [m.stepLanguage, " (\u2191\u2193 \u00B7 Enter):"] }), _jsxs(Text, { color: "gray", children: ["   ", m.languageHint] }), _jsx(Select, { options: [
+                            { label: m.languageTh, value: 'th' },
+                            { label: m.languageEn, value: 'en' },
+                        ], onChange: (v) => {
+                            setLocale(normalizeLocale(v));
+                            setStep('welcome');
+                        } })] })), step === 'welcome' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: m.stepWelcome }), _jsx(Text, { color: "gray", children: m.welcomeBody }), _jsx(Select, { options: [{ label: m.welcomeContinue, value: 'continue' }], onChange: () => setStep('provider') })] })), step === 'provider' && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [m.stepProvider, " (\u2191\u2193 \u00B7 Enter):"] }), _jsxs(Text, { color: "gray", children: ["   ", m.providerHint] }), _jsxs(Text, { color: "gray", children: ["   ", m.providerMenuHint] }), providerMenuLines.map((line) => (_jsx(Text, { color: "gray", children: line }, line))), _jsx(Select, { options: providerOptions, onChange: (v) => {
                             setProvider(v);
                             const p = PROVIDERS[v];
                             if (p.kind === 'delegate')
@@ -113,19 +188,70 @@ export function SetupWizard({ onComplete }) {
                                 setStep('key');
                             else
                                 setStep('model');
-                        } })] })), step === 'codex-auth' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: "2. \u0E40\u0E0A\u0E37\u0E48\u0E2D\u0E21 OpenAI Codex (\u0E43\u0E0A\u0E49\u0E42\u0E04\u0E27\u0E15\u0E49\u0E32 ChatGPT plan \u2014 \u0E44\u0E21\u0E48\u0E15\u0E49\u0E2D\u0E07\u0E21\u0E35 API key):" }), codexStatus === null ? (_jsx(Text, { color: "gray", children: "   \u0E01\u0E33\u0E25\u0E31\u0E07\u0E40\u0E0A\u0E47\u0E01 codex CLI + \u0E2A\u0E16\u0E32\u0E19\u0E30 login\u2026" })) : !codexStatus.installed ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "yellow", children: "   \u274C \u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E15\u0E34\u0E14\u0E15\u0E31\u0E49\u0E07 codex CLI" }), _jsxs(Text, { children: ['   ', "\u0E15\u0E34\u0E14\u0E15\u0E31\u0E49\u0E07\u0E43\u0E19 terminal \u0E2D\u0E35\u0E01\u0E2B\u0E19\u0E49\u0E32\u0E15\u0E48\u0E32\u0E07: ", _jsx(Text, { color: "cyan", children: "npm i -g @openai/codex" })] }), _jsx(Select, { options: [
-                                    { label: 'เช็กใหม่ (ติดตั้งเสร็จแล้ว)', value: 'recheck' },
-                                    { label: '← กลับไปเลือก provider อื่น', value: 'back' },
-                                ], onChange: (v) => (v === 'recheck' ? setRecheck((n) => n + 1) : backToProvider()) })] })) : !codexStatus.loggedIn ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "yellow", children: "   \u26A0 \u0E15\u0E34\u0E14\u0E15\u0E31\u0E49\u0E07\u0E41\u0E25\u0E49\u0E27 \u0E41\u0E15\u0E48\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49 login ChatGPT" }), _jsxs(Text, { children: ['   ', "\u0E23\u0E31\u0E19\u0E43\u0E19 terminal \u0E2D\u0E35\u0E01\u0E2B\u0E19\u0E49\u0E32\u0E15\u0E48\u0E32\u0E07: ", _jsx(Text, { color: "cyan", children: "codex login" }), " ", _jsx(Text, { color: "gray", children: "(\u0E40\u0E1B\u0E34\u0E14 browser \u0E43\u0E2B\u0E49\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E14\u0E49\u0E27\u0E22\u0E1A\u0E31\u0E0D\u0E0A\u0E35 ChatGPT)" })] }), _jsx(Select, { options: [
-                                    { label: 'เช็กใหม่ (login เสร็จแล้ว)', value: 'recheck' },
-                                    { label: '← กลับไปเลือก provider อื่น', value: 'back' },
-                                ], onChange: (v) => (v === 'recheck' ? setRecheck((n) => n + 1) : backToProvider()) })] })) : (_jsx(Text, { color: "green", children: "   \u2705 login ChatGPT \u0E41\u0E25\u0E49\u0E27 \u2014 \u0E01\u0E33\u0E25\u0E31\u0E07\u0E44\u0E1B\u0E15\u0E48\u0E2D\u2026" }))] })), step === 'key' && cfg && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["2. \u0E27\u0E32\u0E07 API key \u0E02\u0E2D\u0E07 ", cfg.label, ": ", _jsx(Text, { color: "gray", children: "(Esc = \u0E01\u0E25\u0E31\u0E1A)" })] }), consoleUrl(provider) ? _jsxs(Text, { color: "cyan", children: ["   \u2192 \u0E40\u0E2D\u0E32 key \u0E17\u0E35\u0E48: ", consoleUrl(provider)] }) : null, cfg.keyExample ? _jsxs(Text, { color: "gray", children: ["   \u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A key: ", cfg.keyExample] }) : null, _jsx(Text, { color: "gray", children: "   (API key \u0E15\u0E23\u0E07\u0E08\u0E32\u0E01 console \u2014 \u0E2B\u0E49\u0E32\u0E21 OAuth/subscription token \u00B7 key \u0E08\u0E30\u0E40\u0E01\u0E47\u0E1A\u0E41\u0E1A\u0E1A\u0E40\u0E02\u0E49\u0E32\u0E23\u0E2B\u0E31\u0E2A\u0E43\u0E19\u0E40\u0E04\u0E23\u0E37\u0E48\u0E2D\u0E07)" }), _jsx(PasswordInput, { placeholder: cfg.envVar, onSubmit: submitKey }), keyError ? _jsxs(Text, { color: "red", children: ["   \u2717 ", keyError] }) : null] })), step === 'model' &&
+                        } })] })), step === 'codex-auth' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: m.stepCodex }), codexStatus === null ? (_jsxs(Text, { color: "gray", children: ["   ", m.codexChecking] })) : codexStatus.loggedIn && !codexStatus.installed ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "green", children: ["   \u2705 ", m.codexReady] }), _jsxs(Text, { color: "yellow", children: ["   \u26A0 ", m.codexLoggedInNeedCli] }), _jsxs(Text, { children: ['   ', _jsx(Text, { color: "cyan", children: m.codexInstallCmd })] }), _jsx(Select, { options: [
+                                    { label: `${m.recheckLabel}`, value: 'recheck' },
+                                    { label: m.codexOptionBack, value: 'back' },
+                                ], onChange: (v) => (v === 'recheck' ? setRecheck((n) => n + 1) : backToProvider()) })] })) : !codexStatus.installed ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "yellow", children: ["   \u274C ", m.codexNeedInstall] }), _jsx(Select, { options: [
+                                    { label: m.codexOptionDevice, value: 'device-code' },
+                                    { label: m.codexOptionBack, value: 'back' },
+                                ], onChange: (v) => {
+                                    if (v === 'device-code')
+                                        setStep('codex-device-code');
+                                    else if (v === 'back')
+                                        backToProvider();
+                                } })] })) : !codexStatus.loggedIn ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "yellow", children: ["   \u26A0 ", m.codexNeedLogin] }), _jsx(Select, { options: [
+                                    { label: m.codexOptionDevice, value: 'device-code' },
+                                    { label: m.codexOptionCliLogin, value: 'cli-login' },
+                                    { label: m.recheckLabel, value: 'recheck' },
+                                    { label: m.codexOptionBack, value: 'back' },
+                                ], onChange: (v) => {
+                                    if (v === 'device-code')
+                                        setStep('codex-device-code');
+                                    else if (v === 'recheck')
+                                        setRecheck((n) => n + 1);
+                                    else if (v === 'back')
+                                        backToProvider();
+                                } }), _jsx(Text, { color: "gray", children: "   codex login" })] })) : (_jsxs(Text, { color: "green", children: ["   \u2705 ", m.codexReady] }))] })), step === 'codex-device-code' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: m.codexDeviceTitle }), codexDeviceStatus === 'running' ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "gray", children: ["   ", m.codexDeviceOpen] }), _jsxs(Text, { color: "cyan", children: ["      ", CODEX_DEVICE_VERIFY_URL] }), codexDeviceCode ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "gray", children: ["   ", m.codexDeviceEnter] }), _jsx(Text, { color: "cyan", bold: true, children: `      ${codexDeviceCode}` })] })) : (_jsx(Text, { color: "gray", children: "   \u2026" })), _jsxs(Text, { color: "gray", children: ["   ", m.codexDeviceWaiting] })] })) : codexDeviceStatus === 'error' ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "red", children: ["   \u2717 ", codexDeviceError] }), _jsx(Select, { options: [
+                                    { label: m.codexDeviceRetry, value: 'retry' },
+                                    { label: m.codexDeviceBack, value: 'back' },
+                                ], onChange: (v) => v === 'retry' ? setCodexDeviceAttempt((n) => n + 1) : setStep('codex-auth') })] })) : (_jsx(Text, { color: "green", children: "   \u2705 ~/.codex/auth.json" }))] })), step === 'key' && cfg && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [m.stepKey, " \u2014 ", cfg.label, ": ", _jsx(Text, { color: "gray", children: m.keyEscHint })] }), provider === 'openai' ? _jsxs(Text, { color: "yellow", children: ["   ", m.keyOpenAiCodexHint] }) : null, consoleUrl(provider) ? _jsxs(Text, { color: "cyan", children: ["   \u2192 ", consoleUrl(provider)] }) : null, cfg.keyExample ? (_jsxs(Text, { color: "gray", children: ['   ', m.keyFormatHint, ": ", cfg.keyExample] })) : null, _jsxs(Text, { color: "gray", children: ["   ", m.keyStorageHint] }), _jsx(PasswordInput, { placeholder: cfg.envVar, onChange: (v) => {
+                            setKeyDraft(v);
+                            if (keyError)
+                                setKeyError('');
+                        }, onSubmit: submitKey }), keyError ? _jsxs(Text, { color: "red", children: ["   \u2717 ", keyError] }) : null] })), step === 'model' &&
                 cfg &&
-                (loadingModels ? (_jsxs(Text, { color: "gray", children: ["   \u0E01\u0E33\u0E25\u0E31\u0E07\u0E14\u0E36\u0E07\u0E23\u0E32\u0E22\u0E0A\u0E37\u0E48\u0E2D model \u0E08\u0E32\u0E01 ", cfg.label, "\u2026"] })) : (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: ["3. \u0E40\u0E25\u0E37\u0E2D\u0E01 model \u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19", remote.length ? _jsxs(Text, { color: "gray", children: [" (", modelOptions.length, " \u0E15\u0E31\u0E27\u0E08\u0E32\u0E01 provider + alias)"] }) : null, ":"] }), _jsx(Select, { options: modelOptions, onChange: (v) => {
+                (loadingModels ? (_jsxs(Text, { color: "gray", children: ['   ', m.modelLoading, " ", cfg.label, "\u2026"] })) : (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [m.stepModel, " \u2014 ", m.modelPick, remote.length ? _jsxs(Text, { color: "gray", children: [" (", modelOptions.length, ")"] }) : null, ":"] }), _jsx(Select, { options: modelOptions, onChange: (v) => {
                                 setModel(`${provider}:${v}`);
-                                setStep('brain-offer');
-                            } })] }))), step === 'brain-offer' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: "4. \u0E2A\u0E23\u0E49\u0E32\u0E07 \"second brain\" workspace (Obsidian) \u0E2A\u0E33\u0E2B\u0E23\u0E31\u0E1A\u0E08\u0E31\u0E14\u0E40\u0E01\u0E47\u0E1A\u0E07\u0E32\u0E19 + \u0E04\u0E27\u0E32\u0E21\u0E08\u0E33 AI?" }), _jsx(Select, { options: [
-                            { label: 'สร้างเลย — ตอบไม่กี่ข้อ (ชื่อ + ที่เก็บ)', value: 'yes' },
-                            { label: `ข้ามไปก่อน (สั่ง ${BRAND.cliName} brain init ทีหลังได้)`, value: 'no' },
-                        ], onChange: (v) => finish(v === 'yes') })] }))] }));
+                                setStep('agent');
+                            } })] }))), step === 'agent' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: m.stepAgent }), _jsx(Text, { color: "gray", children: m.agentTitle }), _jsx(Select, { options: [
+                            { label: m.agentAsk, value: 'ask' },
+                            { label: m.agentAuto, value: 'auto' },
+                        ], onChange: (v) => {
+                            setPermissionMode(v);
+                            setStep('tools');
+                        } }), _jsxs(Text, { color: "gray", children: ["   ", m.agentHint] })] })), step === 'tools' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: m.stepTools }), _jsx(Text, { color: "gray", children: m.toolsBody }), _jsxs(Text, { color: "gray", children: ["   ", m.toolsMcpHint] }), _jsx(Select, { options: [
+                            { label: m.toolsWebSkip, value: 'skip' },
+                            { label: m.toolsWebLater, value: 'later' },
+                        ], onChange: () => setStep('gateway') })] })), step === 'gateway' && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: m.stepGateway }), _jsx(Text, { color: "gray", children: m.gatewayBody }), _jsx(Select, { options: [
+                            { label: m.gatewaySkip, value: 'skip' },
+                            { label: m.gatewayTelegram, value: 'telegram' },
+                            { label: m.gatewayDiscord, value: 'discord' },
+                            { label: m.gatewaySlack, value: 'slack' },
+                            { label: m.gatewayDashboard, value: 'dashboard' },
+                        ], onChange: (v) => {
+                            if (v === 'telegram')
+                                setGatewayHint('sanook gateway setup telegram');
+                            else if (v === 'discord')
+                                setGatewayHint('sanook gateway setup discord');
+                            else if (v === 'slack')
+                                setGatewayHint('sanook gateway setup slack');
+                            else if (v === 'dashboard')
+                                setGatewayHint('sanook dashboard → Channels');
+                            else
+                                setGatewayHint(undefined);
+                            setStep('brain-offer');
+                        } })] })), 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() })] }))] }));
 }

package/dist/ui/status.js

@@ -0,0 +1,142 @@
+const clip = (text, width) => {
+    if (width <= 0)
+        return '';
+    return text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text;
+};
+export function statusSegments(columns) {
+    const width = Math.max(20, Math.floor(columns || 80));
+    return {
+        backgroundTasks: width >= 42,
+        compression: width >= 88,
+        contextBar: width >= 96,
+        cost: width >= 78,
+        cwd: width >= 64,
+        elapsed: width >= 58,
+        hints: width >= 46,
+        hotkeys: width >= 72,
+        queue: width >= 42,
+    };
+}
+export function statusRuleWidths(columns, rightLabel, minLeftContent = 0) {
+    const width = Math.max(1, Math.floor(columns || 1));
+    const separatorWidth = width >= 48 ? 3 : 1;
+    const baseLeft = width >= 48 ? 20 : 8;
+    const leftFloor = Math.min(width, Math.max(baseLeft, Math.floor(minLeftContent)));
+    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);
+    return {
+        leftWidth: Math.max(1, width - separatorWidth - rightWidth),
+        rightWidth,
+        separatorWidth,
+    };
+}
+export function footerStatus({ branch, backgroundTaskCount = 0, busy = false, columns, contextCompression, contextLimit = 100_000, contextTokens, costHint = '', cwd = '', elapsedSeconds, model, mode, queuedCount = 0, }) {
+    const width = Math.max(20, Math.floor(columns || 80));
+    const segments = statusSegments(width);
+    const state = busy ? 'working' : 'ready';
+    const parts = width < 40 ? [shortModel(model), mode] : ['SANOOK', state, shortModel(model), `${mode}-mode`];
+    if (contextTokens != null && width >= 52) {
+        parts.push(contextSegment(contextTokens, contextLimit, segments.contextBar));
+    }
+    if (contextCompression && segments.compression)
+        parts.push(compressionSegment(contextCompression));
+    if (busy && elapsedSeconds != null && segments.elapsed)
+        parts.push(`time ${formatElapsed(elapsedSeconds)}`);
+    if (queuedCount > 0 && segments.queue)
+        parts.push(`q ${queuedCount}`);
+    if (backgroundTaskCount > 0 && segments.backgroundTasks)
+        parts.push(`bg ${backgroundTaskCount}`);
+    if (costHint && segments.cost)
+        parts.push(`cost ${costHint}`);
+    if (segments.hints)
+        parts.push('/help', '@file');
+    if (segments.hotkeys)
+        parts.push('/hotkeys');
+    const left = `  ${parts.join(' · ')}`;
+    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 rule = statusRuleWidths(width, right, minLeft);
+    if (!rule.rightWidth)
+        return clip(left, width);
+    const leftPart = clip(left, rule.leftWidth).padEnd(rule.leftWidth);
+    const rightPart = clip(right, rule.rightWidth);
+    return `${leftPart}${' '.repeat(rule.separatorWidth)}${rightPart}`;
+}
+function shortModel(model) {
+    if (model.includes(':')) {
+        const [provider, name] = model.split(':', 2);
+        return `${provider}:${clip(name ?? '', 18)}`;
+    }
+    return clip(model, 24);
+}
+function contextSegment(tokens, limit, showBar) {
+    const safeTokens = Math.max(0, Math.floor(tokens));
+    const safeLimit = Math.max(1, Math.floor(limit));
+    const pct = Math.max(0, Math.min(100, Math.round((safeTokens / safeLimit) * 100)));
+    if (!showBar)
+        return `ctx ${formatTokens(safeTokens)}`;
+    return `ctx ${ctxBar(pct)} ${pct}%`;
+}
+function ctxBar(percent, width = 6) {
+    const filled = Math.max(0, Math.min(width, Math.round((percent / 100) * width)));
+    return `${'#'.repeat(filled)}${'-'.repeat(width - filled)}`;
+}
+function compressionSegment(mode) {
+    if (mode === 'headroom')
+        return 'cmp hdr';
+    if (mode === 'off')
+        return 'cmp off';
+    return 'cmp sel';
+}
+function formatTokens(tokens) {
+    if (tokens >= 1_000_000)
+        return `${trimNumber(tokens / 1_000_000)}m`;
+    if (tokens >= 1_000)
+        return `${trimNumber(tokens / 1_000)}k`;
+    return `${tokens}`;
+}
+export function formatElapsed(seconds) {
+    const safe = Math.max(0, Math.floor(seconds));
+    if (safe < 60)
+        return `${safe}s`;
+    const minutes = Math.floor(safe / 60);
+    const secs = safe % 60;
+    if (minutes < 60)
+        return `${minutes}m ${secs.toString().padStart(2, '0')}s`;
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return `${hours}h ${mins.toString().padStart(2, '0')}m`;
+}
+function trimNumber(value) {
+    return value >= 10 ? value.toFixed(0) : value.toFixed(1).replace(/\.0$/, '');
+}
+export function formatCwd(cwd, branch) {
+    const home = process.env.HOME;
+    const homeBase = home && home !== '/' ? home.replace(/\/+$/, '') : undefined;
+    const inHome = Boolean(homeBase && (cwd === homeBase || cwd.startsWith(`${homeBase}/`)));
+    const label = inHome && homeBase
+        ? cwd === homeBase
+            ? '~'
+            : `~/${cwd.slice(homeBase.length + 1)}`
+        : cwd;
+    const parts = label.split('/').filter(Boolean);
+    const shortPath = label.startsWith('~/') && parts.length > 2
+        ? `~/${parts.slice(-2).join('/')}`
+        : label.startsWith('/') && parts.length > 2
+            ? `/${parts.slice(-2).join('/')}`
+            : label || cwd;
+    if (!branch)
+        return shortPath;
+    return `${shortPath} (${shortBranch(branch)})`;
+}
+function shortBranch(branch) {
+    const clean = branch.trim();
+    if (clean.length <= 19)
+        return clean;
+    return `…${clean.slice(-18)}`;
+}

package/dist/ui/thinking-panel.js

@@ -0,0 +1,36 @@
+const THINKING_CHAR_LIMIT = 2_000;
+const THINKING_LINE_LIMIT = 6;
+function clip(text, width) {
+    if (width <= 0)
+        return '';
+    return text.length > width ? `${text.slice(0, Math.max(0, width - 3))}...` : text;
+}
+function normalize(text) {
+    return text.replace(/\s+/g, ' ').trim();
+}
+export function snapshotThinking(text) {
+    const clean = text.trim();
+    if (!clean)
+        return undefined;
+    const chars = Array.from(clean);
+    return chars.length > THINKING_CHAR_LIMIT ? `${chars.slice(0, THINKING_CHAR_LIMIT).join('')}\n[thinking truncated]` : clean;
+}
+export function thinkingPanelLines(text, columns, mode = 'collapsed') {
+    const clean = (text ?? '').trim();
+    if (!clean || mode === 'hidden')
+        return [];
+    const width = Math.max(24, Math.min(Math.max(30, columns - 4), 96));
+    const header = `Sanook thinking (${clean.length} chars)`;
+    const hint = `view: ${mode} | /details thinking hidden|collapsed|expanded`;
+    if (mode === 'collapsed') {
+        return [header, hint, clip(normalize(clean), width)].map((line) => clip(line, width));
+    }
+    const lines = clean
+        .split('\n')
+        .map((line) => line.trim())
+        .filter(Boolean)
+        .slice(0, THINKING_LINE_LIMIT)
+        .map((line) => clip(line, width));
+    const omitted = clean.split('\n').filter((line) => line.trim()).length - lines.length;
+    return [header, hint, ...lines, omitted > 0 ? `... ${omitted} more thinking lines` : ''].filter(Boolean).map((line) => clip(line, width));
+}