ikie-cli 0.1.13 → 0.1.15

package/dist/agent.js

@@ -530,12 +530,13 @@ export class Agent {
             if (name === 'edit_file' && !result.startsWith('Error')) {
                 const oldStr = String(input.old_string ?? '');
                 const newStr = String(input.new_string ?? '');
-                block = toolDiffBlock(oldStr, newStr, ms);
+                const path = typeof input.path === 'string' ? input.path : undefined;
+                block = toolDiffBlock(oldStr, newStr, ms, { path, indent: this.indent });
             }
             else {
-                block = toolOutputBlock(result, ms);
+                block = toolOutputBlock(result, ms, this.indent);
             }
-            process.stdout.write(`${this.indent}${block}\n`);
+            process.stdout.write(`${block}\n`);
             return result;
         }
         catch (err) {

package/dist/repl.js

@@ -1,7 +1,7 @@
 import * as readline from 'node:readline';
 import { execSync, exec } from 'child_process';
 import { restoreStdinListeners } from './agent.js';
-import { c, PROMPT, CONTINUE_PROMPT, PROMPT_ARROW, printPromptHeader, modeTag, drawBanner, infoLine, successLine, errorLine, THEMES, setTheme, stripAnsi, contextRing, } from './theme.js';
+import { c, PROMPT, CONTINUE_PROMPT, PROMPT_ARROW, printPromptHeader, modeTag, drawBanner, infoLine, successLine, errorLine, THEMES, setTheme, stripAnsi, contextRing, renderSlashMenu, } from './theme.js';
 import { renderMarkdown } from './renderer.js';
 import { loadAllMemory } from './memory.js';
 import { HOME_DIR, saveConfig, DEFAULT_MODEL, IKIE_HOST, IKIE_API_BASE, isLoggedIn, getApiKey } from './config.js';
@@ -102,22 +102,36 @@ const SLASH_CMDS = [
     { name: 'logout', desc: 'Sign out of ikie account' },
     { name: 'exit', desc: 'Exit Ikie' },
 ];
-function slashCompleter(line) {
+/**
+ * Compute live slash-menu items for the current input line.
+ * Returns rich items (name/desc/insert) plus the typed fragment to highlight.
+ */
+function computeSlashMenu(line) {
     if (!line.startsWith('/'))
-        return [[], line];
-    const parts = line.slice(1).split(/\s+/);
+        return { items: [], fragment: '' };
+    const afterSlash = line.slice(1);
+    const parts = afterSlash.split(/\s+/);
     const cmd = parts[0]?.toLowerCase() ?? '';
+    // Sub-command stage: "/cmd <frag>" where cmd has subs.
     if (parts.length >= 2) {
-        const match = SLASH_CMDS.find(c => c.name === cmd);
-        if (match?.subs) {
-            const sub = parts[1].toLowerCase();
-            const hits = match.subs.filter(s => s.name.startsWith(sub)).map(s => `/${cmd} ${s.name}`);
-            return [hits, line];
-        }
-        return [[], line];
+        const match = SLASH_CMDS.find(s => s.name === cmd);
+        if (!match?.subs)
+            return { items: [], fragment: '' };
+        const frag = parts[1].toLowerCase();
+        const items = match.subs
+            .filter(s => s.name.startsWith(frag))
+            .map(s => ({ name: `${cmd} ${s.name}`, desc: s.desc, insert: `/${cmd} ${s.name} ` }));
+        return { items, fragment: frag };
     }
-    const hits = SLASH_CMDS.filter(c => c.name.startsWith(cmd)).map(c => '/' + c.name);
-    return [hits, line];
+    // Command-name stage: "/<frag>".
+    const items = SLASH_CMDS
+        .filter(s => s.name.startsWith(cmd))
+        .map(s => ({
+        name: s.name,
+        desc: s.desc,
+        insert: `/${s.name}${s.subs || s.args ? ' ' : ''}`,
+    }));
+    return { items, fragment: cmd };
 }
 function printHelp() {
     console.log(`
@@ -847,7 +861,6 @@ export async function startREPL(agent, config, projectContext, oneShot) {
         terminal: true,
         historySize: MAX_HISTORY,
         prompt: PROMPT,
-        completer: slashCompleter,
     });
     let multilineBuffer = '';
     let busy = false;
@@ -860,6 +873,77 @@ export async function startREPL(agent, config, projectContext, oneShot) {
     let pasteMode = false;
     let pasteBuffer = '';
     const pastedBlocks = new Map();
+    // ── Live slash-command menu state ──────────────────────────────────────────
+    let currentPrompt = PROMPT; // the prompt string readline is showing
+    let menuOpen = false;
+    let menuItems = [];
+    let menuFragment = '';
+    let menuSel = 0;
+    let menuRows = 0; // menu lines currently drawn below input
+    const inputCol = () => stripAnsi(currentPrompt).length + (rl.cursor ?? 0);
+    const eraseMenu = () => {
+        if (menuRows === 0)
+            return;
+        let out = '\r';
+        for (let i = 0; i < menuRows; i++)
+            out += '\n\x1b[2K';
+        out += `\x1b[${menuRows}A\r`;
+        const col = inputCol();
+        if (col > 0)
+            out += `\x1b[${col}C`;
+        process.stdout.write(out);
+        menuRows = 0;
+    };
+    const drawMenu = () => {
+        eraseMenu();
+        if (!menuOpen || menuItems.length === 0)
+            return;
+        const cols = Math.max(40, process.stdout.columns ?? 80);
+        const rows = renderSlashMenu(menuItems, menuSel, menuFragment, cols);
+        let out = '\r';
+        for (const r of rows)
+            out += `\n\x1b[2K${r}`;
+        out += `\x1b[${rows.length}A\r`;
+        const col = inputCol();
+        if (col > 0)
+            out += `\x1b[${col}C`;
+        process.stdout.write(out);
+        menuRows = rows.length;
+    };
+    const closeMenu = () => {
+        if (!menuOpen && menuRows === 0)
+            return;
+        menuOpen = false;
+        eraseMenu();
+    };
+    const updateMenu = () => {
+        const line = rl.line ?? '';
+        const { items, fragment } = computeSlashMenu(line);
+        // Hide when the sole match is exactly what's typed (nothing left to suggest).
+        const exhausted = items.length === 1 && line === `/${items[0].name}`;
+        if (items.length && line.startsWith('/') && !exhausted) {
+            menuItems = items;
+            menuFragment = fragment;
+            menuSel = 0;
+            menuOpen = true;
+            drawMenu();
+        }
+        else {
+            closeMenu();
+        }
+    };
+    const acceptSelection = () => {
+        if (!menuOpen || !menuItems[menuSel])
+            return;
+        const insert = menuItems[menuSel].insert;
+        eraseMenu();
+        menuOpen = false;
+        // Replace the line via public readline API (cursor→end, kill line, write).
+        rl.write(null, { ctrl: true, name: 'e' });
+        rl.write(null, { ctrl: true, name: 'u' });
+        rl.write(insert);
+        updateMenu(); // a trailing space may surface a sub-command menu
+    };
     const readlineDataListeners = process.stdin.rawListeners('data').slice();
     for (const fn of readlineDataListeners) {
         process.stdin.removeListener('data', fn);
@@ -886,8 +970,52 @@ export async function startREPL(agent, config, projectContext, oneShot) {
     };
     const routeInputData = (data) => {
         const text = data.toString('utf8');
+        // ── Live slash-menu navigation (only while the menu is open) ──
+        if (menuOpen) {
+            if (text === '\x1b[A') {
+                menuSel = (menuSel - 1 + menuItems.length) % menuItems.length;
+                drawMenu();
+                return;
+            }
+            if (text === '\x1b[B') {
+                menuSel = (menuSel + 1) % menuItems.length;
+                drawMenu();
+                return;
+            }
+            if (text === '\t') {
+                acceptSelection();
+                return;
+            }
+            if (text === '\x1b') {
+                closeMenu();
+                return;
+            }
+            if (text === '\r' || text === '\n') {
+                const item = menuItems[menuSel];
+                if (item) {
+                    // Fill the highlighted command. If it takes no args/subs (no trailing
+                    // space) submit it immediately; otherwise keep editing for the arg.
+                    const submit = !item.insert.endsWith(' ');
+                    eraseMenu();
+                    menuOpen = false;
+                    rl.write(null, { ctrl: true, name: 'e' });
+                    rl.write(null, { ctrl: true, name: 'u' });
+                    rl.write(item.insert);
+                    if (submit)
+                        forwardToReadline(Buffer.from('\r'));
+                    else
+                        updateMenu();
+                }
+                else {
+                    closeMenu();
+                    forwardToReadline(data);
+                }
+                return;
+            }
+        }
         // Shift+Tab (CSI Z) → cycle agent⇄plan mode live at the prompt.
         if (text === '\x1b[Z') {
+            closeMenu();
             const next = agent.getMode() === 'agent' ? 'plan' : 'agent';
             agent.setMode(next);
             const saved = rl.line || '';
@@ -900,6 +1028,7 @@ export async function startREPL(agent, config, projectContext, oneShot) {
         }
         // Check for Ctrl+V (0x16) - try to paste image from clipboard
         if (data.length === 1 && data[0] === 0x16) {
+            closeMenu();
             // Check if clipboard has an image
             if (hasClipboardImage()) {
                 try {
@@ -923,6 +1052,7 @@ export async function startREPL(agent, config, projectContext, oneShot) {
             return;
         }
         if (!pasteMode && !text.includes('\x1b[200~') && /[\r\n]/.test(text.trim()) && text.length > 3) {
+            closeMenu();
             const normalized = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
             rl.write(normalized);
             return;
@@ -946,11 +1076,13 @@ export async function startREPL(agent, config, projectContext, oneShot) {
             const start = rest.indexOf('\x1b[200~');
             if (start === -1) {
                 forwardToReadline(Buffer.from(rest, 'utf8'));
+                updateMenu();
                 return;
             }
             if (start > 0) {
                 forwardToReadline(Buffer.from(rest.slice(0, start), 'utf8'));
             }
+            closeMenu();
             pasteMode = true;
             rest = rest.slice(start + '\x1b[200~'.length);
         }
@@ -976,7 +1108,9 @@ export async function startREPL(agent, config, projectContext, oneShot) {
         return `${expanded}\n\n${attachments.join('\n\n')}`;
     };
     const showPrompt = () => {
+        closeMenu();
         if (multilineBuffer) {
+            currentPrompt = CONTINUE_PROMPT;
             rl.setPrompt(CONTINUE_PROMPT);
         }
         else {
@@ -991,6 +1125,7 @@ export async function startREPL(agent, config, projectContext, oneShot) {
                 const labels = imageState.pending.map(image => `[Image #${image.id}]`).join(' ');
                 process.stdout.write(`${c.muted('   attached')} ${c.secondary(labels)}\n`);
             }
+            currentPrompt = prompt;
             rl.setPrompt(prompt);
         }
         rl.prompt();
@@ -1013,6 +1148,7 @@ export async function startREPL(agent, config, projectContext, oneShot) {
         showPrompt();
     });
     const handleLine = async (raw) => {
+        closeMenu();
         const line = raw.trim();
         if (!line) {
             showPrompt();

package/dist/theme.d.ts

@@ -62,13 +62,28 @@ export declare class InlineSpinner {
 }
 export declare function toolLine(name: string, args: string): string;
 /** Multi-line output block shown after a tool runs. */
-export declare function toolOutputBlock(result: string, ms: number): string;
-/** Colored diff block for edit_file / write_file. */
-export declare function toolDiffBlock(oldStr: string, newStr: string, ms: number): string;
+export declare function toolOutputBlock(result: string, ms: number, indent?: string): string;
+interface DiffOpts {
+    path?: string;
+    indent?: string;
+}
+/**
+ * Render an edit as a polished unified diff: line-number gutter, a few lines of
+ * surrounding context pulled from the file, and full-width muted red/green rows.
+ */
+export declare function toolDiffBlock(oldStr: string, newStr: string, ms: number, opts?: DiffOpts): string;
 export declare function toolSuccessLine(ms: number, preview?: string): string;
 export declare function toolErrorLine(msg: string): string;
+export interface SlashMenuItem {
+    name: string;
+    desc: string;
+    insert: string;
+}
+/** Render the live slash-command dropdown as an array of fully-styled rows. */
+export declare function renderSlashMenu(items: SlashMenuItem[], sel: number, fragment: string, cols: number): string[];
 export declare function successLine(msg: string): string;
 export declare function errorLine(msg: string): string;
 export declare function warnLine(msg: string): string;
 export declare function infoLine(msg: string): string;
 export declare function permissionPrompt(toolName: string, preview: string): string;
+export {};

package/dist/theme.js

@@ -375,55 +375,159 @@ export function toolLine(name, args) {
     return `${tint('●')} ${c.white.bold(verb + badge)}${c.dim('(')}${c.muted(args)}${c.dim(')')}`;
 }
 /** Multi-line output block shown after a tool runs. */
-export function toolOutputBlock(result, ms) {
+export function toolOutputBlock(result, ms, indent = '  ') {
     const time = c.muted(formatDuration(ms));
     const lines = result.split('\n').filter(l => l.trim() !== '');
     if (!lines.length)
-        return `  ${c.muted('⎿')} ${time}`;
+        return `${indent}${c.muted('⎿')} ${time}`;
     const MAX = 5;
     const shown = lines.slice(0, MAX);
     const hidden = lines.length - MAX;
+    const cont = indent + '  ';
     const out = [];
-    out.push(`  ${c.muted('⎿')} ${time}  ${c.dim(clampLine(shown[0]))}`);
+    out.push(`${indent}${c.muted('⎿')} ${time}  ${c.dim(clampLine(shown[0]))}`);
     for (let i = 1; i < shown.length; i++) {
-        out.push(`    ${c.dim(clampLine(shown[i]))}`);
+        out.push(`${cont}${c.dim(clampLine(shown[i]))}`);
     }
     if (hidden > 0) {
-        out.push(`    ${c.muted(`… +${hidden} lines`)}`);
+        out.push(`${cont}${c.muted(`… +${hidden} lines`)}`);
     }
     return out.join('\n');
 }
-/** Colored diff block for edit_file / write_file. */
-export function toolDiffBlock(oldStr, newStr, ms) {
-    const time = c.muted(formatDuration(ms));
-    const removed = oldStr.split('\n');
-    const added = newStr.split('\n');
-    const nRemoved = removed.filter(l => l.trim()).length;
-    const nAdded = added.filter(l => l.trim()).length;
-    const parts = [];
-    if (nAdded)
-        parts.push(`Added ${nAdded} line${nAdded === 1 ? '' : 's'}`);
-    if (nRemoved)
-        parts.push(`removed ${nRemoved} line${nRemoved === 1 ? '' : 's'}`);
-    const summary = parts.join(', ') || 'no changes';
+// ── Diff rendering ────────────────────────────────────────────────────────────
+// Diff palette (256-color, muted — chalk degrades gracefully on low-color TTYs).
+const diffColors = {
+    delBg: chalk.bgAnsi256(52), // deep red
+    insBg: chalk.bgAnsi256(22), // deep green
+    delGutter: chalk.ansi256(210),
+    insGutter: chalk.ansi256(151),
+    onBg: chalk.ansi256(255),
+    ctxGutter: chalk.ansi256(240),
+    ctxCode: chalk.ansi256(248),
+};
+/** Classic LCS line diff — interleaves equal/removed/added like a real unified diff. */
+function lineDiff(a, b) {
+    const n = a.length, m = b.length;
+    const dp = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+    for (let i = n - 1; i >= 0; i--) {
+        for (let j = m - 1; j >= 0; j--) {
+            dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+        }
+    }
     const out = [];
-    out.push(`  ${c.muted('⎿')} ${time}  ${c.dim(summary)}`);
-    const MAX = 10;
-    let shown = 0;
-    for (const line of removed) {
-        if (shown >= MAX)
-            break;
-        out.push(chalk.bgRed.white(`  - ${clampLine(line, 116)}`));
-        shown++;
+    let i = 0, j = 0;
+    while (i < n && j < m) {
+        if (a[i] === b[j]) {
+            out.push({ t: 'eq', s: a[i] });
+            i++;
+            j++;
+        }
+        else if (dp[i + 1][j] >= dp[i][j + 1]) {
+            out.push({ t: 'del', s: a[i] });
+            i++;
+        }
+        else {
+            out.push({ t: 'ins', s: b[j] });
+            j++;
+        }
+    }
+    while (i < n)
+        out.push({ t: 'del', s: a[i++] });
+    while (j < m)
+        out.push({ t: 'ins', s: b[j++] });
+    return out;
+}
+/**
+ * Render an edit as a polished unified diff: line-number gutter, a few lines of
+ * surrounding context pulled from the file, and full-width muted red/green rows.
+ */
+export function toolDiffBlock(oldStr, newStr, ms, opts = {}) {
+    const indent = opts.indent ?? '  ';
+    const cols = Math.max(40, (process.stdout.columns ?? 100));
+    const time = c.muted(formatDuration(ms));
+    const oldLines = oldStr.split('\n');
+    const newLines = newStr.split('\n');
+    const ops = lineDiff(oldLines, newLines);
+    const nDel = ops.filter(o => o.t === 'del').length;
+    const nIns = ops.filter(o => o.t === 'ins').length;
+    // Anchor line numbers + context lines by locating the new text in the file.
+    let anchor = 1;
+    let fileLines = null;
+    const CTX = 3;
+    if (opts.path) {
+        try {
+            const content = readFileSync(opts.path, 'utf-8');
+            const idx = content.indexOf(newStr);
+            if (idx >= 0) {
+                anchor = (content.slice(0, idx).match(/\n/g)?.length ?? 0) + 1;
+                fileLines = content.split('\n');
+            }
+        }
+        catch { /* no context — fall back to anchorless diff */ }
+    }
+    const summaryParts = [];
+    if (nIns)
+        summaryParts.push(`Added ${nIns} line${nIns === 1 ? '' : 's'}`);
+    if (nDel)
+        summaryParts.push(`removed ${nDel} line${nDel === 1 ? '' : 's'}`);
+    const summary = summaryParts.join(', ') || 'no changes';
+    // Width of the line-number gutter.
+    const maxNum = anchor + Math.max(oldLines.length, newLines.length) + CTX;
+    const gw = String(maxNum).length;
+    const rowsRaw = [];
+    // Leading context (lines just before the edit).
+    if (fileLines) {
+        for (let k = Math.max(1, anchor - CTX); k < anchor; k++) {
+            rowsRaw.push({ kind: 'eq', num: k, text: fileLines[k - 1] ?? '' });
+        }
     }
-    for (const line of added) {
-        if (shown >= MAX)
-            break;
-        out.push(chalk.bgGreen.black(`  + ${clampLine(line, 116)}`));
-        shown++;
+    // The diff body — track separate old/new line counters off the same anchor.
+    let oldNum = anchor, newNum = anchor;
+    for (const op of ops) {
+        if (op.t === 'eq') {
+            rowsRaw.push({ kind: 'eq', num: newNum, text: op.s });
+            oldNum++;
+            newNum++;
+        }
+        else if (op.t === 'del') {
+            rowsRaw.push({ kind: 'del', num: oldNum, text: op.s });
+            oldNum++;
+        }
+        else {
+            rowsRaw.push({ kind: 'ins', num: newNum, text: op.s });
+            newNum++;
+        }
     }
-    if (shown >= MAX && (removed.length + added.length > MAX)) {
-        out.push(`    ${c.muted(`… +${removed.length + added.length - MAX} lines`)}`);
+    // Trailing context (lines just after the edit).
+    if (fileLines) {
+        const afterStart = newNum;
+        for (let k = afterStart; k < afterStart + CTX && k <= fileLines.length; k++) {
+            rowsRaw.push({ kind: 'eq', num: k, text: fileLines[k - 1] ?? '' });
+        }
+    }
+    const out = [];
+    out.push(`${indent}${c.muted('⎿')} ${time}  ${c.dim(summary)}`);
+    const MAX = 16;
+    const codeWidth = cols - indent.length - gw - 4; // gutter + " x " marker + space
+    const render = rowsRaw.slice(0, MAX);
+    for (const r of render) {
+        const numStr = String(r.num).padStart(gw);
+        const code = r.text.length > codeWidth ? r.text.slice(0, codeWidth - 1) + '…' : r.text;
+        if (r.kind === 'eq') {
+            out.push(`${indent}${diffColors.ctxGutter(numStr)}   ${diffColors.ctxCode(code)}`);
+        }
+        else {
+            const marker = r.kind === 'del' ? '-' : '+';
+            const bg = r.kind === 'del' ? diffColors.delBg : diffColors.insBg;
+            const gutter = r.kind === 'del' ? diffColors.delGutter : diffColors.insGutter;
+            const plainLen = numStr.length + 3 + code.length; // num + " x " + code
+            const pad = Math.max(0, cols - indent.length - plainLen);
+            const inner = `${gutter(numStr)} ${gutter(marker)} ${diffColors.onBg(code)}${' '.repeat(pad)}`;
+            out.push(`${indent}${bg(inner)}`);
+        }
+    }
+    if (rowsRaw.length > MAX) {
+        out.push(`${indent}${c.muted(`… +${rowsRaw.length - MAX} lines`)}`);
     }
     return out.join('\n');
 }
@@ -441,6 +545,33 @@ function formatDuration(ms) {
     const s = ms / 1000;
     return s < 10 ? `${s.toFixed(1)}s` : `${Math.round(s)}s`;
 }
+/** Render the live slash-command dropdown as an array of fully-styled rows. */
+export function renderSlashMenu(items, sel, fragment, cols) {
+    if (!items.length)
+        return [];
+    const nameW = Math.min(22, Math.max(...items.map(i => i.name.length)));
+    const frag = fragment.toLowerCase();
+    return items.map((item, i) => {
+        const selected = i === sel;
+        const bar = selected ? c.primary('▌') : ' ';
+        // Highlight the matched prefix within the command name.
+        let name;
+        if (frag && item.name.toLowerCase().startsWith(frag)) {
+            const hit = item.name.slice(0, frag.length);
+            const rest = item.name.slice(frag.length);
+            name = `${c.accent.bold(hit)}${selected ? c.white.bold(rest) : c.white(rest)}`;
+        }
+        else {
+            name = selected ? c.white.bold(item.name) : c.white(item.name);
+        }
+        const namePadded = name + ' '.repeat(Math.max(0, nameW - item.name.length));
+        // Description, clamped to the remaining width.
+        const used = 2 /* bar+space */ + 1 + nameW + 2; // leading "/" + gap
+        const descMax = Math.max(8, cols - used - 2);
+        const desc = item.desc.length > descMax ? item.desc.slice(0, descMax - 1) + '…' : item.desc;
+        return `${bar} ${c.primary('/')}${namePadded}  ${c.dim(desc)}`;
+    });
+}
 export function successLine(msg) {
     return `  ${c.success('ok')} ${c.muted(msg)}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikie-cli",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Agentic coding CLI — your terminal AI pair programmer",
   "type": "module",
   "bin": {