ispbills-icli 8.5.2 → 8.5.4

package/src/tui/composer.js

@@ -5,6 +5,9 @@ import { html, useState, useEffect, useCallback, useRef } from './dom.js';
 import { Box, Text, useInput } from 'ink';
 import { C, glyphs } from './theme.js';
 import { SLASH_COMMANDS } from '../commands.js';
+import { readFileSync, writeFileSync, rmSync } from 'fs';
+import { join } from 'path';
+import { spawnSync } from 'child_process';
 
 // @-mention entity types. Selecting one inserts e.g. "@olt:" so the user can
 // append an identifier (@olt:3); the backend treats it as a scoped reference.
@@ -20,34 +23,89 @@ const MENTIONS = [
   { tag: '@mac',      desc: 'A MAC address' },
 ];
 
-export function Composer({ onSubmit, busy, width = 80 }) {
+function insertAt(text, cursor, chunk) {
+  return text.slice(0, cursor) + chunk + text.slice(cursor);
+}
+
+function wordLeft(text, cursor) {
+  let i = cursor;
+  while (i > 0 && /\s/.test(text[i - 1])) i--;
+  while (i > 0 && !/\s/.test(text[i - 1])) i--;
+  return i;
+}
+
+function wordRight(text, cursor) {
+  let i = cursor;
+  while (i < text.length && /\s/.test(text[i])) i++;
+  while (i < text.length && !/\s/.test(text[i])) i++;
+  return i;
+}
+
+function openExternalEditor(currentValue) {
+  const file = join(process.cwd(), `.icli-compose-${process.pid}.txt`);
+  const editor = process.env.VISUAL || process.env.EDITOR || 'vi';
+  try {
+    writeFileSync(file, currentValue, { mode: 0o600 });
+    const res = spawnSync(editor, [file], { stdio: 'inherit', shell: true });
+    if (res.error) throw res.error;
+    return { ok: true, text: readFileSync(file, 'utf8') };
+  } catch (error) {
+    return { ok: false, error: error?.message || String(error) };
+  } finally {
+    try { rmSync(file, { force: true }); } catch {}
+  }
+}
+
+export function Composer({
+  onSubmit,
+  onSubmitKeep,
+  onEmptySubmit,
+  onQueue,
+  onSearch,
+  onNotice,
+  onEmptyEsc,
+  onValueChange,
+  busy,
+  blocked = false,
+  width = 80,
+  mode = 'ask',
+  clearToken = 0,
+}) {
   const [value, setValue] = useState('');
   const [cursor, setCursor] = useState(0);
   const [history, setHistory] = useState([]);
   const [histIdx, setHistIdx] = useState(-1);
   const [sel, setSel] = useState(0);
+  const [histSearch, setHistSearch] = useState(false);
+  const [histSearchQ, setHistSearchQ] = useState('');
+  const [histSearchSel, setHistSearchSel] = useState(0);
 
-  // Undo/redo history: snapshots of { value, cursor }. Consecutive typing is
-  // coalesced into a single undo step via `lastMut`.
   const undoRef = useRef([]);
   const redoRef = useRef([]);
   const lastMut = useRef('');
+  const pasteRef = useRef({ active: false, buf: '' });
+
   const snapshot = (kind) => {
-    if (kind === 'type' && lastMut.current === 'type') return; // coalesce a typing run
+    if (kind === 'type' && lastMut.current === 'type') return;
     undoRef.current.push({ value, cursor });
     if (undoRef.current.length > 200) undoRef.current.shift();
     redoRef.current = [];
     lastMut.current = kind;
   };
 
-  // Bracketed-paste assembly. A right-click / Cmd+V paste is wrapped by the
-  // terminal in \x1b[200~ … \x1b[201~ and can arrive split across several
-  // reads, so we buffer until the end marker before inserting.
-  const pasteRef = useRef({ active: false, buf: '' });
+  useEffect(() => {
+    setValue('');
+    setCursor(0);
+    setHistIdx(-1);
+    setHistSearch(false);
+    setHistSearchQ('');
+    setHistSearchSel(0);
+  }, [clearToken]);
+
+  useEffect(() => {
+    onValueChange?.(value);
+  }, [value, onValueChange]);
 
-  // Insert pasted text at the cursor, PRESERVING newlines so multi-line pastes
-  // (configs, logs) keep their structure. Tabs → 2 spaces; other control chars
-  // and the bracketed-paste markers are dropped.
   const insertPaste = (raw) => {
     const text = raw
       .replace(/\x1b?\[20[01]~/g, '')
@@ -56,11 +114,10 @@ export function Composer({ onSubmit, busy, width = 80 }) {
       .replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, '');
     if (!text) return;
     snapshot('paste');
-    setValue((v) => v.slice(0, cursor) + text + v.slice(cursor));
+    setValue((v) => insertAt(v, cursor, text));
     setCursor((c) => c + text.length);
   };
 
-  // Determine the token being typed at the cursor to drive the palette.
   const upto = value.slice(0, cursor);
   const tokStart = Math.max(upto.lastIndexOf(' '), upto.lastIndexOf('\n')) + 1;
   const token = upto.slice(tokStart);
@@ -73,44 +130,101 @@ export function Composer({ onSubmit, busy, width = 80 }) {
     : [];
   const menuOpen = matches.length > 0;
 
-  useEffect(() => { setSel((i) => Math.min(i, Math.max(0, matches.length - 1))); }, [matches.length]);
+  const historyMatches = [...history]
+    .reverse()
+    .filter((h) => !histSearchQ || h.toLowerCase().includes(histSearchQ.toLowerCase()));
+
+  useEffect(() => {
+    setSel((i) => Math.min(i, Math.max(0, matches.length - 1)));
+  }, [matches.length]);
+
+  useEffect(() => {
+    setHistSearchSel((i) => Math.min(i, Math.max(0, historyMatches.length - 1)));
+  }, [histSearchQ, historyMatches.length]);
 
-  const submit = useCallback((text) => {
+  const rememberHistory = useCallback((q) => {
+    if (!q) return;
+    setHistory((h) => (h[h.length - 1] === q ? h : [...h, q]));
+  }, []);
+
+  const submit = useCallback((text, { preserve = false } = {}) => {
     const q = text.trim();
-    setValue(''); setCursor(0); setHistIdx(-1); setSel(0);
-    undoRef.current = []; redoRef.current = []; lastMut.current = '';
-    if (q) {
-      setHistory((h) => (h[h.length - 1] === q ? h : [...h, q]));
+    if (!q) {
+      onEmptySubmit?.();
+      return;
+    }
+    rememberHistory(q);
+    setHistIdx(-1);
+    setSel(0);
+    setHistSearch(false);
+    setHistSearchQ('');
+    setHistSearchSel(0);
+    undoRef.current = [];
+    redoRef.current = [];
+    lastMut.current = '';
+    if (!preserve) {
+      setValue('');
+      setCursor(0);
       onSubmit(q);
+      return;
     }
-  }, [onSubmit]);
+    onSubmitKeep ? onSubmitKeep(q) : onSubmit(q);
+  }, [onSubmit, onSubmitKeep, onEmptySubmit, rememberHistory]);
 
   const setText = (v, c) => { setValue(v); setCursor(c ?? v.length); };
 
-  // Complete the active token to the highlighted palette entry.
   const complete = () => {
     if (!menuOpen) return;
-    if (slashMode) { const c = matches[sel].cmd + ' '; setText(c, c.length); return; }
+    if (slashMode) {
+      const c = matches[sel].cmd + ' ';
+      setText(c, c.length);
+      return;
+    }
     const ins = matches[sel].tag + ':';
     const v = value.slice(0, tokStart) + ins + value.slice(cursor);
     setText(v, tokStart + ins.length);
   };
 
   useInput((input, key) => {
-    if (busy) return; // ignore edits while a turn streams (App handles Ctrl+C/Esc)
+    const enter = key.return || input === '\r' || input === '\n';
+    const ctrlEnter = busy && key.ctrl && enter;
+    if (ctrlEnter || (busy && key.ctrl && input === 'q')) {
+      const q = value.trim();
+      if (q) onQueue?.(q);
+      else onNotice?.('Nothing to queue.', C.muted);
+      return;
+    }
+    if (blocked) return;
+    if (busy) return;
+
+    if (histSearch) {
+      if (key.escape) { setHistSearch(false); setHistSearchQ(''); setHistSearchSel(0); return; }
+      if (key.upArrow) { setHistSearchSel((i) => Math.max(0, i - 1)); return; }
+      if (key.downArrow || key.tab) { setHistSearchSel((i) => Math.min(historyMatches.length - 1, i + 1)); return; }
+      if (enter) {
+        const picked = historyMatches[histSearchSel];
+        if (picked) setText(picked);
+        setHistSearch(false);
+        return;
+      }
+      if (key.backspace || key.delete || (key.ctrl && input === 'h')) {
+        setHistSearchQ((q) => q.slice(0, -1));
+        return;
+      }
+      if (input && !key.ctrl && !key.meta) {
+        const printable = input.replace(/[\x00-\x1f\x7f]/g, '');
+        if (printable) setHistSearchQ((q) => q + printable);
+      }
+      return;
+    }
 
-    // ── Bracketed paste (mouse right-click / Cmd+V), possibly split reads ──
-    // Ink strips the leading ESC, so the terminal's \x1b[200~ … \x1b[201~
-    // wrappers arrive as the marker text "[200~" / "[201~" (sometimes as their
-    // own useInput calls). Buffer everything between them so embedded newlines
-    // are never treated as Enter, then insert the whole block at once.
     const START = '[200~';
     const END = '[201~';
     if (pasteRef.current.active || input.includes(START)) {
       pasteRef.current.active = true;
       pasteRef.current.buf += input;
       const e = pasteRef.current.buf.indexOf(END);
-      if (e === -1) return; // still receiving the paste
+      if (e === -1) return;
       const s = pasteRef.current.buf.indexOf(START);
       const raw = pasteRef.current.buf.slice(s + START.length, e);
       pasteRef.current = { active: false, buf: '' };
@@ -118,38 +232,70 @@ export function Composer({ onSubmit, busy, width = 80 }) {
       return;
     }
 
-    // ── Submit / complete ──
-    // Some terminals/PTYs deliver Enter as input="\r" without key.return, so
-    // treat a lone CR/LF as Enter too (a paste is a longer chunk, never "\r").
-    const enter = key.return || input === '\r' || input === '\n';
+    if (key.ctrl && input === 'g') {
+      const edited = openExternalEditor(value);
+      if (!edited.ok) {
+        onNotice?.(`External editor failed: ${edited.error}`, C.error);
+        return;
+      }
+      setText(edited.text);
+      onNotice?.('Loaded text from external editor.', C.success);
+      return;
+    }
+    if ((key.ctrl && input === 'v') && !pasteRef.current.active) {
+      onNotice?.('Paste attachment: paste an image or text via your terminal\'s paste shortcut (Ctrl+Shift+V on Linux, Cmd+V on Mac).', C.muted);
+      return;
+    }
+    if (key.ctrl && input === 'z') {
+      if (process.platform !== 'win32') {
+        try { process.kill(process.pid, 'SIGTSTP'); } catch {}
+      }
+      return;
+    }
+    if (key.pageUp || key.pageDown) {
+      onNotice?.('Use terminal scrollback to view history.', C.muted);
+      return;
+    }
+    if (key.ctrl && input === 'r') {
+      setHistSearch(true);
+      setHistSearchQ('');
+      setHistSearchSel(0);
+      return;
+    }
+    if (key.ctrl && input === 's') { submit(value, { preserve: true }); return; }
+    if (key.ctrl && input === 'f') { onSearch?.(); return; }
+    if (key.shift && enter) {
+      snapshot('type');
+      setValue((v) => insertAt(v, cursor, '\n'));
+      setCursor((c) => c + 1);
+      return;
+    }
+    if (key.meta && enter) {
+      snapshot('type');
+      setValue((v) => insertAt(v, cursor, '\n'));
+      setCursor((c) => c + 1);
+      return;
+    }
     if (enter) {
-      // In slash mode Enter runs the command; in mention mode it completes.
       if (menuOpen && slashMode) { submit(matches[sel].cmd); return; }
       if (menuOpen && mentionMode) { complete(); return; }
       submit(value);
       return;
     }
-    if (key.tab && !key.shift) { complete(); return; }
-
-    // ── Undo / redo ──
-    if (key.ctrl && input === 'z') {
-      const prev = undoRef.current.pop();
-      if (prev) { redoRef.current.push({ value, cursor }); setValue(prev.value); setCursor(prev.cursor); lastMut.current = 'undo'; }
-      return;
-    }
-    if (key.ctrl && (input === 'y' || (input === 'z' && key.shift))) {
-      const nx = redoRef.current.pop();
-      if (nx) { undoRef.current.push({ value, cursor }); setValue(nx.value); setCursor(nx.cursor); lastMut.current = 'redo'; }
+    if (key.escape && !value) {
+      onEmptyEsc?.();
       return;
     }
+    if (key.tab && !key.shift) { complete(); return; }
+    if (key.ctrl && input === 'y') { complete(); return; }
 
-    // ── Menu / history navigation ──
     if (key.upArrow) {
       if (menuOpen) { setSel((i) => Math.max(0, i - 1)); return; }
       setHistory((h) => {
         if (!h.length) return h;
         const idx = histIdx === -1 ? h.length - 1 : Math.max(0, histIdx - 1);
-        setHistIdx(idx); setText(h[idx]);
+        setHistIdx(idx);
+        setText(h[idx]);
         return h;
       });
       return;
@@ -159,70 +305,87 @@ export function Composer({ onSubmit, busy, width = 80 }) {
       setHistory((h) => {
         if (histIdx === -1) return h;
         const idx = histIdx + 1;
-        if (idx >= h.length) { setHistIdx(-1); setText(''); } else { setHistIdx(idx); setText(h[idx]); }
+        if (idx >= h.length) {
+          setHistIdx(-1);
+          setText('');
+        } else {
+          setHistIdx(idx);
+          setText(h[idx]);
+        }
         return h;
       });
       return;
     }
 
-    // ── Cursor movement ──
-    if (key.leftArrow) { setCursor((c) => Math.max(0, c - 1)); return; }
+    if (key.leftArrow || (key.ctrl && input === 'b')) { setCursor((c) => Math.max(0, c - 1)); return; }
     if (key.rightArrow) {
-      // At end of the active token, Right accepts the highlighted completion.
       if (menuOpen && cursor >= value.length) { complete(); return; }
       setCursor((c) => Math.min(value.length, c + 1));
       return;
     }
-    if (key.ctrl && input === 'a') { setCursor(0); return; }           // line start
-    if (key.ctrl && input === 'e') { setCursor(value.length); return; } // line end
+    if (key.home || (key.ctrl && input === 'a')) { setCursor(0); return; }
+    if (key.end || (key.ctrl && input === 'e')) { setCursor(value.length); return; }
+    if (key.meta && key.leftArrow) { setCursor(wordLeft(value, cursor)); return; }
+    if (key.meta && key.rightArrow) { setCursor(wordRight(value, cursor)); return; }
 
-    // ── Deletion ──
-    if (key.backspace || key.delete) {
-      if (cursor > 0) { snapshot('del'); setValue((v) => v.slice(0, cursor - 1) + v.slice(cursor)); setCursor((c) => c - 1); }
+    if (key.backspace || key.delete || (key.ctrl && input === 'h')) {
+      if (cursor > 0) {
+        snapshot('del');
+        setValue((v) => v.slice(0, cursor - 1) + v.slice(cursor));
+        setCursor((c) => c - 1);
+      }
       return;
     }
-    if (key.ctrl && input === 'u') { snapshot('cut'); setValue(value.slice(cursor)); setCursor(0); return; }        // to start
-    if (key.ctrl && input === 'k') { snapshot('cut'); setValue(value.slice(0, cursor)); return; }                    // to end
-    if (key.ctrl && input === 'w') {                                                                // prev word
-      let i = cursor;
-      while (i > 0 && value[i - 1] === ' ') i--;
-      while (i > 0 && value[i - 1] !== ' ') i--;
+    if (key.ctrl && input === 'u') { snapshot('cut'); setValue(value.slice(cursor)); setCursor(0); return; }
+    if (key.ctrl && input === 'k') { snapshot('cut'); setValue(value.slice(0, cursor)); return; }
+    if (key.ctrl && input === 'w') {
+      const i = wordLeft(value, cursor);
       snapshot('cut');
-      setValue(value.slice(0, i) + value.slice(cursor)); setCursor(i);
+      setValue(value.slice(0, i) + value.slice(cursor));
+      setCursor(i);
       return;
     }
 
-    // ── Printable input & paste ──
     if (input && !key.ctrl && !key.meta) {
-      // A multi-char chunk or one containing newlines/tabs is a non-bracketed
-      // paste (terminal without bracketed-paste support): keep its newlines.
       if (input.length > 1 || /[\r\n\t]/.test(input)) { insertPaste(input); return; }
       const text = input.replace(/[\x00-\x1f\x7f]/g, '');
       if (!text) return;
       snapshot('type');
-      setValue((v) => v.slice(0, cursor) + text + v.slice(cursor));
+      setValue((v) => insertAt(v, cursor, text));
       setCursor((c) => c + text.length);
     }
   });
 
   const before = value.slice(0, cursor);
   const rawAt = value[cursor];
-  // When the cursor sits on a newline, show an inverse space and keep the line
-  // break in `after` so the buffer still renders across multiple lines.
   const at = (rawAt === undefined || rawAt === '\n') ? ' ' : rawAt;
   const after = rawAt === '\n' ? '\n' + value.slice(cursor + 1) : value.slice(cursor + 1);
   const empty = value.length === 0;
   const sugTok = menuOpen && matches[sel] ? (slashMode ? matches[sel].cmd : matches[sel].tag) : '';
   const ghost = sugTok && sugTok.startsWith(token) && cursor >= value.length ? sugTok.slice(token.length) : '';
-
-  // Prompt glyph: ❯ (success/green) idle; ⧖ (warning/amber) busy.
   const promptGlyph = busy ? glyphs.busy : glyphs.prompt;
   const promptColor = busy ? C.warning : C.success;
-  // Ghost hint text when empty
-  const ghostHint = busy ? 'Working…' : 'Enter @ to mention a device or / for commands…';
+  const ghostHint = busy ? 'Working…' : 'Enter @ to mention files or / for commands…';
+  const modePrefix = mode === 'plan'
+    ? '[plan] '
+    : mode === 'autopilot'
+    ? '[auto] '
+    : mode === 'shell'
+    ? '[shell] '
+    : '';
 
   return html`
     <${Box} flexDirection="column" width=${width}>
+      ${histSearch
+        ? html`<${Box} paddingX=${1} marginBottom=${0}>
+            <${Text} color=${C.accent}>reverse-search<//>
+            <${Text} color=${C.muted}>: ${histSearchQ || 'type to filter history'}<//>
+            ${historyMatches[histSearchSel]
+              ? html`<${Text} color=${C.white}>  ${historyMatches[histSearchSel].slice(0, Math.max(20, width - 28))}<//>`
+              : html`<${Text} color=${C.error}>  no matches<//>`}
+          <//>`
+        : null}
+
       ${menuOpen
         ? html`<${Box} flexDirection="column" paddingX=${1} marginBottom=${0}>
             ${slashMode ? null : html`<${Box}><${Text} color=${C.accent} bold>@ mention <//><${Text} color=${C.muted}>a device, customer or entity<//><//>`}
@@ -250,6 +413,7 @@ export function Composer({ onSubmit, busy, width = 80 }) {
 
       <${Box} width=${width} paddingX=${1}>
         <${Text} color=${promptColor} bold>${promptGlyph} <//>
+        ${modePrefix ? html`<${Text} color=${mode === 'shell' ? C.warning : C.accent} bold>${modePrefix}<//>` : null}
         ${empty
           ? html`<${Box} flexGrow=${1}>
               <${Text} color="white" inverse> <//>
@@ -259,5 +423,7 @@ export function Composer({ onSubmit, busy, width = 80 }) {
               <${Text}>${before}<//><${Text} inverse>${at}<//><${Text}>${after}<//><${Text} color=${C.muted}>${ghost}<//>
             <//>`}
       <//>
+
+      <${Text} color=${C.separator}>${'─'.repeat(Math.max(1, width))}<//>
     <//>`;
 }

package/src/tui/run.js

@@ -1,27 +1,54 @@
-// Ink render entrypoint. Runs the TUI INLINE in the normal terminal buffer
-// (like GitHub Copilot CLI) — NOT the alternate screen — so the banner prints
-// once at the top and scrolls away, and the terminal's native scrollback keeps
-// the full conversation history. Completed transcript items are flushed to the
-// scrollback by Ink's <Static>; only the live area + input re-render in place.
+// Ink render entrypoint. Runs the TUI INLINE in the normal terminal buffer.
 import { html } from './dom.js';
 import { render } from 'ink';
 import { App } from './app.js';
+import { saveConfig } from '../config.js';
+
+const LOGO = [
+  '██╗ ██████╗ ██████╗ ██████╗ ██╗██╗      ██████╗ ████████╗',
+  '██║██╔════╝██╔═══██╗██╔══██╗██║██║     ██╔═══██╗╚══██╔══╝',
+  '██║██║     ██║   ██║██████╔╝██║██║     ██║   ██║   ██║   ',
+  '██║██║     ██║   ██║██╔═══╝ ██║██║     ██║   ██║   ██║   ',
+  '██║╚██████╗╚██████╔╝██║     ██║███████╗╚██████╔╝   ██║   ',
+  '╚═╝ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝ ╚═════╝    ╚═╝   ',
+];
+const COLORS = ['35', '95', '94', '96', '97'];
+
+async function animateSplash() {
+  if (!process.stdout.isTTY) return;
+  for (let frame = 0; frame < COLORS.length; frame++) {
+    const color = COLORS[frame];
+    const lines = LOGO.map((line, idx) => `\x1b[${Math.min(frame + idx + 1, 5) > 3 ? '1' : '2'};${color}m${line}\x1b[0m`).join('\n');
+    process.stdout.write(lines + '\n');
+    await new Promise((resolve) => setTimeout(resolve, 110));
+    if (frame !== COLORS.length - 1) process.stdout.write(`\x1b[${LOGO.length}A`);
+  }
+  process.stdout.write('\n');
+}
 
 export async function runTui(cfg, opts = {}) {
-  const { display = {}, onExternal, initialQuestion } = opts;
+  const { display = {}, onExternal, initialQuestion, banner = false } = opts;
   let externalAction;
+  const seen = Boolean(cfg?.tui?.bannerSeen);
+  const showAnimation = banner || !seen;
+
+  if (showAnimation) {
+    await animateSplash();
+    cfg.tui = { ...(cfg.tui || {}), bannerSeen: true };
+    try { saveConfig(cfg); } catch {}
+  }
 
   const instance = render(
     html`<${App}
       cfg=${cfg}
       display=${display}
       initialQuestion=${initialQuestion}
+      showBanner=${!showAnimation}
       onExternal=${(a) => { externalAction = a; onExternal?.(a); }}
     />`,
     { exitOnCtrlC: false },
   );
 
   await instance.waitUntilExit();
-
   return externalAction;
 }