cli-jaw 1.4.11 → 1.5.0

package/dist/bin/commands/chat.js

@@ -7,15 +7,17 @@ import { parseArgs } from 'node:util';
 import WebSocket from 'ws';
 import fs from 'node:fs';
 import { spawnSync } from 'node:child_process';
-import { resolve as resolvePath, dirname } from 'node:path';
+import { resolve as resolvePath, dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { parseCommand, executeCommand } from '../../src/cli/commands.js';
+import { loadLocales } from '../../src/core/i18n.js';
+import { parseCommand, executeCommand, getCompletionItems, getArgumentCompletionItems } from '../../src/cli/commands.js';
 import { appendNewlineToComposer, appendTextToComposer, backspaceComposer, clearComposer, consumePasteProtocol, flattenComposerForSubmit, getComposerDisplayText, getPlainCommandDraft, getTrailingTextSegment, setBracketedPaste, } from '../../src/cli/tui/composer.js';
 import { classifyKeyAction } from '../../src/cli/tui/keymap.js';
-import { applyResolvedAutocompleteState, clearAutocomplete, closeAutocomplete, makeSelectionKey, popupTotalRows, renderAutocomplete, resolveAutocompleteState, } from '../../src/cli/tui/overlay.js';
+import { applyResolvedAutocompleteState, clearAutocomplete, closeAutocomplete, makeSelectionKey, popupTotalRows, renderAutocomplete, resolveAutocompleteState, renderHelpOverlay, clearOverlayBox, renderCommandPalette, renderChoiceSelector, filterSelectorItems, } from '../../src/cli/tui/overlay.js';
 import { clipTextToCols, visualWidth } from '../../src/cli/tui/renderers.js';
 import { cleanupScrollRegion, ensureSpaceBelow, resolveShellLayout, setupScrollRegion } from '../../src/cli/tui/shell.js';
 import { createTuiStore } from '../../src/cli/tui/store.js';
+import { appendUserItem, startAssistantItem, appendToActiveAssistant, finalizeAssistant, appendStatusItem, clearEphemeralStatus, } from '../../src/cli/tui/transcript.js';
 import { isGitRepo, captureFileSet, diffFileSets, detectIde, getIdeCli, openDiffInIde, getDiffStat, } from '../../src/ide/diff.js';
 const chatCwd = process.cwd();
 const isGit = isGitRepo(chatCwd);
@@ -45,6 +47,22 @@ import { APP_VERSION, getServerUrl, getWsUrl } from '../../src/core/config.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const SKILL_SCRIPT = resolvePath(__dirname, 'skill.js');
+// Resolve package root: works both from source tree (bin/commands → root)
+// and from dist layout (dist/bin/commands → root where public/ lives).
+function findPackageRoot(start) {
+    let dir = start;
+    for (let i = 0; i < 5; i++) {
+        if (fs.existsSync(join(dir, 'public', 'locales')))
+            return dir;
+        const parent = dirname(dir);
+        if (parent === dir)
+            break;
+        dir = parent;
+    }
+    return resolvePath(start, '../..'); // fallback
+}
+const PROJECT_ROOT = findPackageRoot(__dirname);
+loadLocales(join(PROJECT_ROOT, 'public', 'locales'));
 let ws;
 try {
     ws = await new Promise((resolve, reject) => {
@@ -60,6 +78,8 @@ catch {
 }
 // ─── Fetch info ──────────────────────────────
 let info = { cli: 'codex', workingDir: '~', model: '' };
+let runtimeLocale = 'ko';
+let tuiConfig = { pasteCollapseLines: 2, pasteCollapseChars: 160, keymapPreset: 'default', diffStyle: 'summary', themeSeed: 'jaw-default' };
 try {
     const r = await fetch(`${apiUrl}/api/settings`, { signal: AbortSignal.timeout(2000) });
     if (r.ok) {
@@ -67,6 +87,10 @@ try {
         const s = res.data || res;
         const cli = s.cli || 'codex';
         info = { cli, workingDir: s.workingDir || '~', model: s.perCli?.[cli]?.model || '' };
+        if (s.locale)
+            runtimeLocale = s.locale;
+        if (s.tui && typeof s.tui === 'object')
+            tuiConfig = { ...tuiConfig, ...s.tui };
     }
     // Active session model overrides perCli default
     const sr = await fetch(`${apiUrl}/api/session`, { signal: AbortSignal.timeout(2000) });
@@ -80,9 +104,37 @@ try {
 catch { }
 const cliLabel = { claude: 'Claude Code', codex: 'Codex', gemini: 'Gemini CLI', opencode: 'OpenCode', copilot: 'Copilot' };
 const cliColor = { claude: c.magenta, codex: c.red, gemini: c.blue, opencode: c.yellow, copilot: c.cyan };
-const accent = cliColor[info.cli] || c.red;
-const label = cliLabel[info.cli] || info.cli;
-const dir = info.workingDir.replace(process.env.HOME || '', '~');
+let accent = cliColor[info.cli] || c.red;
+let label = cliLabel[info.cli] || info.cli;
+let dir = info.workingDir.replace(process.env.HOME || '', '~');
+/** Re-fetch settings/session from server and rebuild derived display state. */
+async function refreshInfo() {
+    try {
+        const r = await fetch(`${apiUrl}/api/settings`, { signal: AbortSignal.timeout(2000) });
+        if (r.ok) {
+            const res = await r.json();
+            const s = res.data || res;
+            const cli = s.cli || 'codex';
+            info = { cli, workingDir: s.workingDir || '~', model: s.perCli?.[cli]?.model || '' };
+            if (s.locale)
+                runtimeLocale = s.locale;
+            if (s.tui && typeof s.tui === 'object')
+                tuiConfig = { ...tuiConfig, ...s.tui };
+        }
+        const sr = await fetch(`${apiUrl}/api/session`, { signal: AbortSignal.timeout(2000) });
+        if (sr.ok) {
+            const ses = await sr.json();
+            const sd = ses.data || ses;
+            if (sd.model)
+                info.model = sd.model;
+        }
+    }
+    catch { /* keep current info on fetch failure */ }
+    // Rebuild derived display state
+    accent = cliColor[info.cli] || c.red;
+    label = cliLabel[info.cli] || info.cli;
+    dir = info.workingDir.replace(process.env.HOME || '', '~');
+}
 // ─── Width helper ────────────────────────────
 const W = () => Math.max(20, Math.min((process.stdout.columns || 60) - 4, 60));
 const hrLine = () => '-'.repeat(W());
@@ -117,6 +169,7 @@ function runSkillResetLocal() {
 function makeCliCommandCtx() {
     return {
         interface: 'cli',
+        locale: runtimeLocale,
         version: APP_VERSION,
         getSession: () => apiJson('/api/session'),
         getSettings: () => apiJson('/api/settings'),
@@ -292,8 +345,14 @@ else {
     console.log('');
     console.log(`  ${c.dim}/quit to exit, /clear to clear screen, /reset confirm to factory reset${c.reset}`);
     console.log(`  ${c.dim}/file <path> to attach${c.reset}`);
-    const footer = `  ${c.dim}${accent}${label}${c.reset}${c.dim}  |  /quit  |  /clear${c.reset}`;
-    const promptPrefix = `  ${accent}\u276F${c.reset} `;
+    let footer = `  ${c.dim}${accent}${label}${c.reset}${c.dim}  |  /quit  |  /clear${c.reset}`;
+    let promptPrefix = `  ${accent}\u276F${c.reset} `;
+    /** Rebuild footer/prompt strings from current derived state and refresh scroll region. */
+    function rebuildFooter() {
+        footer = `  ${c.dim}${accent}${label}${c.reset}${c.dim}  |  /quit  |  /clear${c.reset}`;
+        promptPrefix = `  ${accent}\u276F${c.reset} `;
+        setupScrollRegion(footer, `  ${c.dim}${hrLine()}${c.reset}`, resolveShellLayout(process.stdout.columns || 80, getRows(), panes));
+    }
     // ─── Scroll region: fixed footer at bottom ──
     const getRows = () => process.stdout.rows || 24;
     function renderBlockSeparator() {
@@ -354,6 +413,9 @@ else {
     const composer = store.composer;
     const pasteCapture = store.pasteCapture;
     const panes = store.panes;
+    const transcript = store.transcript;
+    const ov = store.overlay;
+    let overlayBoxHeight = 0;
     let inputActive = true;
     let streaming = false;
     let commandRunning = false;
@@ -361,6 +423,28 @@ else {
     let escPending = false;
     let escTimer = null;
     const ac = store.autocomplete;
+    function dismissOverlay() {
+        if (!ov.helpOpen && !ov.paletteOpen && !ov.selector.open)
+            return;
+        if (overlayBoxHeight > 0) {
+            clearOverlayBox((chunk) => process.stdout.write(chunk), process.stdout.columns || 80, getRows(), overlayBoxHeight);
+            overlayBoxHeight = 0;
+        }
+        ov.helpOpen = false;
+        ov.paletteOpen = false;
+        ov.paletteFilter = '';
+        ov.paletteSelected = 0;
+        ov.paletteItems = [];
+        ov.selector.open = false;
+        ov.selector.commandName = '';
+        ov.selector.filter = '';
+        ov.selector.selected = 0;
+        ov.selector.allItems = [];
+        ov.selector.filteredItems = [];
+        setupScrollRegion(footer, `  ${c.dim}${hrLine()}${c.reset}`, resolveShellLayout(process.stdout.columns || 80, getRows(), panes));
+        showPrompt();
+        redrawPromptLine();
+    }
     function getMaxPopupRows() {
         // Scroll region ends at rows-2 (rows-1/rows are fixed footer).
         // Prompt baseline at rows-2 can be lifted up to rows-3 lines.
@@ -404,6 +488,105 @@ else {
         resizeTimer = setTimeout(() => { resizeTimer = null; handleResize(); }, 50);
     });
     async function runSlashCommand(parsed) {
+        // Overlay intercepts — handle before executeCommand
+        if (parsed.name === 'help') {
+            ov.helpOpen = true;
+            const cmds = getCompletionItems('/', 'cli');
+            overlayBoxHeight = renderHelpOverlay((chunk) => process.stdout.write(chunk), process.stdout.columns || 80, getRows(), c.dim, c.reset, cmds);
+            commandRunning = false;
+            inputActive = true;
+            return;
+        }
+        // No-arg /model → open interactive selector
+        if (parsed.name === 'model' && !parsed.args.length) {
+            const argItems = getArgumentCompletionItems('model', '', 'cli', [], makeCliCommandCtx());
+            const sel = ov.selector;
+            sel.open = true;
+            sel.commandName = 'model';
+            sel.title = 'Model';
+            sel.subtitle = `${info.cli}: ${info.model || 'default'}`;
+            sel.filter = '';
+            sel.selected = 0;
+            sel.allItems = argItems.map((a) => ({
+                value: a.name,
+                label: a.desc || '',
+                current: a.name === info.model,
+            }));
+            sel.filteredItems = sel.allItems;
+            // Pre-select current model
+            const curIdx = sel.filteredItems.findIndex(i => i.current);
+            if (curIdx >= 0)
+                sel.selected = curIdx;
+            overlayBoxHeight = renderChoiceSelector({
+                write: (chunk) => process.stdout.write(chunk),
+                cols: process.stdout.columns || 80,
+                rows: getRows(),
+                dimCode: c.dim,
+                resetCode: c.reset,
+                title: sel.title,
+                subtitle: sel.subtitle,
+                filter: sel.filter,
+                items: sel.filteredItems,
+                selected: sel.selected,
+            });
+            commandRunning = false;
+            inputActive = true;
+            return;
+        }
+        // No-arg /cli → open interactive selector
+        if (parsed.name === 'cli' && !parsed.args.length) {
+            const argItems = getArgumentCompletionItems('cli', '', 'cli', [], makeCliCommandCtx());
+            const sel = ov.selector;
+            sel.open = true;
+            sel.commandName = 'cli';
+            sel.title = 'CLI Engine';
+            sel.subtitle = `current: ${info.cli}`;
+            sel.filter = '';
+            sel.selected = 0;
+            sel.allItems = argItems.map((a) => ({
+                value: a.name,
+                label: a.desc || '',
+                current: a.name === info.cli,
+            }));
+            sel.filteredItems = sel.allItems;
+            const curIdx = sel.filteredItems.findIndex(i => i.current);
+            if (curIdx >= 0)
+                sel.selected = curIdx;
+            overlayBoxHeight = renderChoiceSelector({
+                write: (chunk) => process.stdout.write(chunk),
+                cols: process.stdout.columns || 80,
+                rows: getRows(),
+                dimCode: c.dim,
+                resetCode: c.reset,
+                title: sel.title,
+                subtitle: sel.subtitle,
+                filter: sel.filter,
+                items: sel.filteredItems,
+                selected: sel.selected,
+            });
+            commandRunning = false;
+            inputActive = true;
+            return;
+        }
+        if (parsed.name === 'commands') {
+            ov.paletteOpen = true;
+            ov.paletteFilter = '';
+            ov.paletteSelected = 0;
+            ov.paletteItems = getCompletionItems('/', 'cli');
+            overlayBoxHeight = renderCommandPalette({
+                write: (chunk) => process.stdout.write(chunk),
+                cols: process.stdout.columns || 80,
+                rows: getRows(),
+                dimCode: c.dim,
+                resetCode: c.reset,
+                filter: ov.paletteFilter,
+                items: ov.paletteItems,
+                selected: ov.paletteSelected,
+            });
+            commandRunning = false;
+            inputActive = true;
+            return;
+        }
         let exiting = false;
         try {
             const result = await executeCommand(parsed, makeCliCommandCtx());
@@ -431,6 +614,11 @@ else {
                 const ideName = detectedIde ? getIdeCli(detectedIde) : null;
                 console.log(`  ${idePopEnabled ? c.green + '✓' : c.yellow + '✗'}${c.reset} IDE popup: ${idePopEnabled ? 'ON' : 'OFF'}${ideName ? ` (${ideName})` : ` ${c.dim}(IDE 미감지)${c.reset}`}`);
             }
+            // Refresh TUI state after model/cli mutations
+            if (result?.ok && (parsed.name === 'model' || parsed.name === 'cli') && parsed.args.length > 0) {
+                await refreshInfo();
+                rebuildFooter();
+            }
             if (result?.code === 'exit') {
                 exiting = true;
                 cleanupScrollRegion(resolveShellLayout(process.stdout.columns || 80, getRows(), panes));
@@ -461,6 +649,10 @@ else {
     function flushPendingEscape() {
         escPending = false;
         escTimer = null;
+        if (ov.helpOpen || ov.paletteOpen || ov.selector.open) {
+            dismissOverlay();
+            return;
+        }
         if (ac.open) {
             closeAutocomplete(ac, (chunk) => process.stdout.write(chunk));
             redrawPromptLine();
@@ -506,6 +698,147 @@ else {
             redrawInputWithAutocomplete();
             return;
         }
+        // Help overlay: ? when input is empty
+        if (action === 'printable' && key === '?' && !ac.open && !ov.paletteOpen) {
+            const draft = getPlainCommandDraft(composer);
+            if (draft === '' || draft === null) {
+                if (ov.helpOpen) {
+                    dismissOverlay();
+                    return;
+                }
+                ov.helpOpen = true;
+                closeAutocomplete(ac, (chunk) => process.stdout.write(chunk));
+                const cmds = getCompletionItems('/', 'cli');
+                overlayBoxHeight = renderHelpOverlay((chunk) => process.stdout.write(chunk), process.stdout.columns || 80, getRows(), c.dim, c.reset, cmds);
+                return;
+            }
+        }
+        // Dismiss help on any key that isn't ?
+        // (ESC is handled by flushPendingEscape which calls dismissOverlay)
+        if (ov.helpOpen) {
+            dismissOverlay();
+        }
+        // Command palette: Ctrl+K
+        if (action === 'ctrl-k' && !ov.helpOpen) {
+            if (ov.paletteOpen) {
+                dismissOverlay();
+                return;
+            }
+            ov.paletteOpen = true;
+            ov.paletteFilter = '';
+            ov.paletteSelected = 0;
+            ov.paletteItems = getCompletionItems('/', 'cli');
+            closeAutocomplete(ac, (chunk) => process.stdout.write(chunk));
+            overlayBoxHeight = renderCommandPalette({
+                write: (chunk) => process.stdout.write(chunk),
+                cols: process.stdout.columns || 80,
+                rows: getRows(),
+                dimCode: c.dim,
+                resetCode: c.reset,
+                filter: ov.paletteFilter,
+                items: ov.paletteItems,
+                selected: ov.paletteSelected,
+            });
+            return;
+        }
+        // Palette input handling
+        // (ESC dismiss is handled by flushPendingEscape)
+        if (ov.paletteOpen) {
+            if (action === 'arrow-up') {
+                ov.paletteSelected = Math.max(0, ov.paletteSelected - 1);
+            }
+            else if (action === 'arrow-down') {
+                ov.paletteSelected = Math.min(ov.paletteItems.length - 1, ov.paletteSelected + 1);
+            }
+            else if (action === 'enter') {
+                const picked = ov.paletteItems[ov.paletteSelected];
+                dismissOverlay();
+                if (picked) {
+                    clearComposer(composer);
+                    appendTextToComposer(composer, `/${picked.name}`);
+                    handleKeyInput('\r');
+                }
+                return;
+            }
+            else if (action === 'backspace') {
+                ov.paletteFilter = ov.paletteFilter.slice(0, -1);
+                ov.paletteItems = getCompletionItems('/' + ov.paletteFilter, 'cli');
+                ov.paletteSelected = Math.min(ov.paletteSelected, Math.max(0, ov.paletteItems.length - 1));
+            }
+            else if (action === 'printable') {
+                ov.paletteFilter += key;
+                ov.paletteItems = getCompletionItems('/' + ov.paletteFilter, 'cli');
+                ov.paletteSelected = Math.min(ov.paletteSelected, Math.max(0, ov.paletteItems.length - 1));
+            }
+            else {
+                return;
+            }
+            overlayBoxHeight = renderCommandPalette({
+                write: (chunk) => process.stdout.write(chunk),
+                cols: process.stdout.columns || 80,
+                rows: getRows(),
+                dimCode: c.dim,
+                resetCode: c.reset,
+                filter: ov.paletteFilter,
+                items: ov.paletteItems,
+                selected: ov.paletteSelected,
+            });
+            return;
+        }
+        // Choice selector input handling
+        // (ESC dismiss is handled by flushPendingEscape)
+        if (ov.selector.open) {
+            const sel = ov.selector;
+            const itemCount = sel.filteredItems.length;
+            if (action === 'arrow-up') {
+                if (itemCount > 0)
+                    sel.selected = Math.max(0, sel.selected - 1);
+            }
+            else if (action === 'arrow-down') {
+                if (itemCount > 0)
+                    sel.selected = Math.min(itemCount - 1, sel.selected + 1);
+            }
+            else if (action === 'enter') {
+                if (itemCount === 0)
+                    return; // nothing to select
+                const picked = sel.filteredItems[sel.selected];
+                const cmdName = sel.commandName;
+                dismissOverlay();
+                if (picked) {
+                    // Synthesize the command and execute through normal path
+                    clearComposer(composer);
+                    appendTextToComposer(composer, `/${cmdName} ${picked.value}`);
+                    handleKeyInput('\r');
+                }
+                return;
+            }
+            else if (action === 'backspace') {
+                sel.filter = sel.filter.slice(0, -1);
+                sel.filteredItems = filterSelectorItems(sel.allItems, sel.filter);
+                sel.selected = Math.min(sel.selected, Math.max(0, sel.filteredItems.length - 1));
+            }
+            else if (action === 'printable') {
+                sel.filter += key;
+                sel.filteredItems = filterSelectorItems(sel.allItems, sel.filter);
+                sel.selected = Math.min(sel.selected, Math.max(0, sel.filteredItems.length - 1));
+            }
+            else {
+                return;
+            }
+            overlayBoxHeight = renderChoiceSelector({
+                write: (chunk) => process.stdout.write(chunk),
+                cols: process.stdout.columns || 80,
+                rows: getRows(),
+                dimCode: c.dim,
+                resetCode: c.reset,
+                title: sel.title,
+                subtitle: sel.subtitle,
+                filter: sel.filter,
+                items: sel.filteredItems,
+                selected: sel.selected,
+            });
+            return;
+        }
         // Autocomplete navigation (raw ESC sequences)
         if (ac.open && action === 'arrow-up') { // Up
             ac.selected = Math.max(0, ac.selected - 1);
@@ -637,6 +970,7 @@ else {
             }
             // Enter — submit
             const draft = getPlainCommandDraft(composer);
+            const displayText = getComposerDisplayText(composer);
             const text = flattenComposerForSubmit(composer).trim();
             clearComposer(composer);
             closeAutocomplete(ac, (chunk) => process.stdout.write(chunk));
@@ -646,6 +980,7 @@ else {
                 return;
             }
             renderBlockSeparator();
+            appendUserItem(transcript, displayText.trim(), text);
             // Phase 10: /file command
             if (draft !== null && text.startsWith('/file ')) {
                 const parts = text.slice(6).trim().split(/\s+/);
@@ -739,7 +1074,7 @@ else {
         if (commandRunning && !inputActive)
             return;
         const beforeDisplay = getComposerDisplayText(composer);
-        const tokens = consumePasteProtocol(incoming, pasteCapture, composer);
+        const tokens = consumePasteProtocol(incoming, pasteCapture, composer, { collapseLines: tuiConfig.pasteCollapseLines, collapseChars: tuiConfig.pasteCollapseChars });
         const afterDisplay = getComposerDisplayText(composer);
         if (beforeDisplay !== afterDisplay) {
             if (!inputActive) {
@@ -762,24 +1097,34 @@ else {
             const msg = JSON.parse(raw);
             switch (msg.type) {
                 case 'agent_chunk':
+                    if (ov.helpOpen || ov.paletteOpen)
+                        dismissOverlay();
                     if (isRaw) {
                         console.log(`  ${c.dim}${raw}${c.reset}`);
                         break;
                     }
+                    clearEphemeralStatus(transcript);
                     if (!streaming) {
                         streaming = true;
+                        startAssistantItem(transcript);
                         renderAssistantTurnStart();
                     }
+                    appendToActiveAssistant(transcript, msg.text || '');
                     process.stdout.write((msg.text || '').replace(/\n/g, '\n  '));
                     break;
                 case 'agent_done':
+                    clearEphemeralStatus(transcript);
                     if (isRaw) {
                         console.log(`  ${c.dim}${raw}${c.reset}`);
                     }
                     else if (streaming) {
+                        finalizeAssistant(transcript);
                         console.log('');
                     }
                     else if (msg.text) {
+                        startAssistantItem(transcript);
+                        appendToActiveAssistant(transcript, msg.text);
+                        finalizeAssistant(transcript);
                         renderAssistantTurnStart();
                         console.log(msg.text.replace(/\n/g, '\n  '));
                     }
@@ -819,6 +1164,7 @@ else {
                     }
                     else if (msg.status === 'running') {
                         const name = msg.agentName || msg.agentId || 'agent';
+                        appendStatusItem(transcript, `${name} working...`);
                         process.stdout.write(`\r  ${c.yellow}\u25CF${c.reset} ${c.dim}${name} working...${c.reset}          \r`);
                     }
                     break;
@@ -827,6 +1173,7 @@ else {
                         console.log(`  ${c.dim}${raw}${c.reset}`);
                     }
                     else if (msg.icon && msg.label) {
+                        appendStatusItem(transcript, `${msg.icon} ${msg.label}`);
                         process.stdout.write(`\r  ${c.dim}${msg.icon} ${msg.label}${c.reset}          \r`);
                     }
                     break;
@@ -835,11 +1182,13 @@ else {
                         console.log(`  ${c.dim}${raw}${c.reset}`);
                     }
                     else {
+                        appendStatusItem(transcript, `${msg.from} → ${msg.to}`);
                         process.stdout.write(`\r  ${c.yellow}⚡${c.reset} ${c.dim}${msg.from} → ${msg.to}${c.reset}          \r`);
                     }
                     break;
                 case 'queue_update':
                     if (msg.pending > 0) {
+                        appendStatusItem(transcript, `${msg.pending}개 대기 중`);
                         process.stdout.write(`\r  ${c.yellow}⏳ ${msg.pending}개 대기 중${c.reset}          \r`);
                     }
                     break;