ispbills-icli 6.1.1 → 8.0.0

package/README.md

@@ -57,8 +57,6 @@ $ icli
   model IspBills AI  ·  user Admin  ·  role group_admin
   url   https://app.myisp.com
 
-  Type a message to start.  /help for commands  ·  Ctrl+C to exit
-
   ❯ is vlan 82 free on all devices?
 
   working
@@ -69,9 +67,10 @@ $ icli
 
   VLAN 82 is free across all 3 reachable devices in your fleet.
 
-  IspBills AI  ·  Admin  ·  group_admin
-
-  ❯ /exit
+  ╭──────────────────────────────────────────────────────────╮
+  │ ❯  Ask about your network, or type / for commands         │
+  ╰──────────────────────────────────────────────────────────╯
+   IspBills AI · Admin · group_admin   /help · Ctrl+T reasoning · Ctrl+C exit
 ```
 
 ### Single-shot query
@@ -122,7 +121,24 @@ Inside the REPL, type `/` to see the menu. Shortcuts:
 | `/help` | Show help |
 | `/exit` | Quit |
 
-Function keys: **F1** help · **F2** history · **F3** rollback last action · **F4** bulk device sweep. **Tab** autocompletes slash commands; **↑/↓** navigate input history.
+**Keys**
+
+| Key | Action |
+|---|---|
+| **Enter** | Send message (or run the highlighted slash command) |
+| **/** then **↑/↓** | Open the slash menu and move the selection; **Tab** completes, **Enter** runs |
+| **↑/↓** (empty input) | Navigate input history |
+| **Ctrl+T** | Toggle reasoning display |
+| **Ctrl+L** | Clear the transcript |
+| **Esc** | Cancel the in-flight request |
+| **Ctrl+C** | Cancel a running request; press again on an empty prompt to exit |
+| **Ctrl+A/E** | Jump to start / end of the line |
+| **Ctrl+U/K/W** | Delete to start / to end / previous word |
+
+The REPL runs as a full-height app in the terminal's alternate screen: the banner
+stays pinned at the top, the transcript fills the middle, and the input box is
+pinned to the bottom — the same layout as GitHub Copilot CLI. On exit, the session
+transcript is reprinted to your normal scrollback.
 
 ---
 
@@ -137,8 +153,8 @@ iCli connects to the same AI engine as the in-browser terminal:
 - **Web search** — looks up vendor CLI docs when it needs to  
 - **Streaming output** — answers stream live with a thinking indicator, reasoning, and step-by-step server progress  
 - **Plans & connect cards** — proposed fixes render as a reviewable plan (`apply fix` to confirm); device connections show as a connect card  
-- **Zero dependencies** — pure Node.js (built-ins only), so it installs instantly and runs the same on Windows, macOS, and Linux  
-- **Terminal-aware rendering** — full-width separators, and automatic ASCII-safe glyphs on classic Windows consoles (`cmd.exe` / legacy PowerShell) so nothing shows as broken boxes  
+- **Full-screen terminal UI** — a full-height alternate-screen TUI (built on [Ink](https://github.com/vadimdemedes/ink)) with the banner pinned to the top, a bottom-pinned bordered input, a selectable slash-command menu, input history, and a bottom-anchored transcript — the same layout as GitHub Copilot CLI / Gemini CLI. Piped/non-interactive use falls back to plain streaming output  
+- **Terminal-aware rendering** — the layout reflows to your terminal width and resizes live; on classic Windows consoles (`cmd.exe` / legacy PowerShell) it auto-switches to ASCII-safe glyphs and borders so nothing shows as broken boxes  
 
 ---
 

package/bin/icli.js

@@ -310,6 +310,21 @@ async function main() {
     return;
   }
 
+  // Interactive: use the rich Ink TUI on a real terminal; fall back to the
+  // plain readline REPL when stdout/stdin is not a TTY (pipes, dumb terminals).
+  if (output.isTTY && input.isTTY) {
+    const { runTui } = await import('../src/tui/run.js');
+    const action = await runTui(cfg, { display });
+    if (action === 'logout') {
+      const cleared = clearConfig();
+      console.log(`\n  ${cleared ? GREEN + glyphs.check + RESET + ' Logged out — credentials cleared.' : YELLOW + 'Already logged out.' + RESET}`);
+      console.log(`  ${DIM}Run ${RESET}${ACCENT}icli login${RESET}${DIM} to sign in again.${RESET}\n`);
+    } else if (action === 'update') {
+      selfUpdate();
+    }
+    return;
+  }
+
   await interactiveRepl(cfg);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ispbills-icli",
-  "version": "6.1.1",
+  "version": "8.0.0",
   "description": "iCli — IspBills AI network engineer in your terminal",
   "keywords": [
     "ispbills",
@@ -23,5 +23,10 @@
     "src/",
     "README.md"
   ],
-  "dependencies": {}
+  "dependencies": {
+    "htm": "^3.1.1",
+    "ink": "^6.8.0",
+    "ink-spinner": "^5.0.0",
+    "react": "^19.2.7"
+  }
 }

package/src/tui/app.js

@@ -0,0 +1,243 @@
+// Root Ink application. Renders a full-height, alt-screen chat UI (Copilot-CLI
+// style): banner pinned to the top, transcript filling the middle, input
+// pinned to the bottom. Manages conversation state and streams from the
+// IspBills backend.
+import { html, useState, useEffect, useRef, useCallback } from './dom.js';
+import { Box, Text, useStdout, useApp, useInput } from 'ink';
+import { C, glyphs, midDot } from './theme.js';
+import {
+  Banner, UserMessage, AssistantMessage, StatusLines, Reasoning,
+  Plan, Connect, Notice, Thinking,
+} from './components.js';
+import { Composer } from './composer.js';
+import { streamChat } from '../client.js';
+import { slashToQuestion, SLASH_COMMANDS } from '../commands.js';
+import { shortModel } from '../ui.js';
+
+function useTerminalSize() {
+  const { stdout } = useStdout();
+  const [size, setSize] = useState({
+    cols: stdout?.columns || 80,
+    rows: stdout?.rows || 24,
+  });
+  useEffect(() => {
+    if (!stdout) return;
+    const on = () => setSize({ cols: stdout.columns || 80, rows: stdout.rows || 24 });
+    stdout.on('resize', on);
+    return () => stdout.off('resize', on);
+  }, [stdout]);
+  return size;
+}
+
+let itemId = 0;
+const nextId = () => ++itemId;
+
+// Rough rendered-height estimates so we can tail-slice the transcript to fit
+// the available middle region (biased high → under-fill, never overflow/clip).
+const wrapLines = (text, cols) =>
+  String(text || '').split('\n').reduce((n, l) => n + Math.max(1, Math.ceil(l.length / Math.max(1, cols))), 0);
+
+function itemHeight(it, cols) {
+  switch (it.type) {
+    case 'user': return 1 + wrapLines(it.text, cols);
+    case 'assistant': return 1 + wrapLines(it.text, cols);
+    case 'notice': return 1 + wrapLines(it.text, cols);
+    case 'plan': { const s = it.reply?.steps || []; return 2 + (it.reply?.summary ? 1 : 0) + s.length * 2 + 2; }
+    case 'connect': return 3 + (it.reply?.note ? 1 : 0);
+    default: return 1;
+  }
+}
+
+function bannerHeight(cols, compact) {
+  if (compact) return 2;
+  return cols >= 60 ? 11 : 5;
+}
+
+function liveHeight(live, cols, showReasoning) {
+  if (!live) return 0;
+  let h = 2; // thinking line + margin
+  if (live.status?.length) h += 1 + live.status.length;
+  if (showReasoning && live.reasoning) h += 1 + wrapLines(live.reasoning, cols);
+  if (live.text) h += 1 + wrapLines(live.text, cols);
+  return h;
+}
+
+export function App({ cfg, display = {}, onExternal, onExit, initialQuestion }) {
+  const { exit } = useApp();
+  const { cols, rows } = useTerminalSize();
+
+  const [items, setItems] = useState([]);
+  const [live, setLive] = useState(null); // { status:[], reasoning:'', text:'' }
+  const [busy, setBusy] = useState(false);
+  const [model, setModel] = useState(cfg._model);
+  const [showReasoning, setShowReasoning] = useState(!!display.reasoning);
+  const [hint, setHint] = useState('');
+
+  const convo = useRef([]);      // [{role, content}] for the backend
+  const plain = useRef([]);      // plain-text transcript for exit reprint
+  const abortRef = useRef(null); // AbortController of the in-flight turn
+  const ctrlC = useRef(0);       // timestamp of the last lone Ctrl+C
+
+  const push = useCallback((item) => setItems((xs) => [...xs, { id: nextId(), ...item }]), []);
+  const log = (line) => plain.current.push(line);
+
+  const runTurn = useCallback(async (question) => {
+    push({ type: 'user', text: question });
+    log(`\n${glyphs.prompt} ${question}\n`);
+    convo.current.push({ role: 'user', content: question });
+    setBusy(true);
+    setHint('');
+    const s = { status: [], reasoning: '', text: '' };
+    setLive({ ...s });
+
+    const abort = new AbortController();
+    abortRef.current = abort;
+
+    try {
+      const { reply, text, meta } = await streamChat(cfg, [...convo.current], {
+        signal: abort.signal,
+        onEvent: (ev) => {
+          if (ev.type === 'status') s.status = [...s.status, ev.line];
+          else if (ev.type === 'reasoning') s.reasoning += ev.delta;
+          else if (ev.type === 'text') s.text += ev.delta;
+          setLive({ ...s });
+        },
+      });
+      if (meta.model) setModel(meta.model);
+      const type = reply.type ?? 'message';
+      if (type === 'plan') { push({ type: 'plan', reply }); log('[plan] ' + (reply.summary || '')); }
+      else if (type === 'connect') { push({ type: 'connect', reply }); log('[connect] ' + (reply.device?.kind || '')); }
+      else { push({ type: 'assistant', text: text || '(no response)' }); log(text || ''); }
+      if (text) convo.current.push({ role: 'assistant', content: text });
+    } catch (e) {
+      if (abort.signal.aborted) push({ type: 'notice', text: `${glyphs.cross} Cancelled.`, color: C.yellow });
+      else push({ type: 'notice', text: `${glyphs.cross} ${e.message}`, color: C.red });
+    } finally {
+      abortRef.current = null;
+      setLive(null);
+      setBusy(false);
+    }
+  }, [cfg, push]);
+
+  const doExit = useCallback(() => { onExit?.(plain.current); exit(); }, [exit, onExit]);
+
+  const onSubmit = useCallback((raw) => {
+    const q = raw.trim();
+    if (!q) return;
+    setHint('');
+
+    if (q === '/exit' || q === 'exit' || q === 'quit') { doExit(); return; }
+    if (q === '/clear') { setItems([]); return; }
+    if (q === '/new') {
+      convo.current = [];
+      setItems([]);
+      push({ type: 'notice', text: `${glyphs.check} New conversation started.`, color: C.green });
+      return;
+    }
+    if (q === '/reasoning') {
+      setShowReasoning((v) => { push({ type: 'notice', text: `Reasoning display ${!v ? 'on' : 'off'}.` }); return !v; });
+      return;
+    }
+    if (q === '/help' || q === 'help') {
+      const lines = SLASH_COMMANDS.map((c) => `  ${(c.cmd + (c.hint ? ' ' + c.hint : '')).padEnd(20)}${c.desc}`).join('\n');
+      push({ type: 'notice', text: 'Commands:\n' + lines + '\n\n  Keys: Ctrl+T reasoning · Ctrl+L clear · Ctrl+C cancel · Ctrl+C twice to exit' });
+      return;
+    }
+    if (q === '/history') {
+      const us = convo.current.filter((m) => m.role === 'user');
+      push({ type: 'notice', text: us.length ? us.map((m, i) => `  ${i + 1}. ${m.content.slice(0, 80)}`).join('\n') : 'No history yet.' });
+      return;
+    }
+    if (q === '/logout') { onExternal?.('logout'); doExit(); return; }
+    if (q === '/update') { onExternal?.('update'); doExit(); return; }
+
+    let question = q;
+    if (q.startsWith('/')) {
+      const mapped = slashToQuestion(q);
+      if (mapped) question = mapped;
+      else { push({ type: 'notice', text: `Unknown command: ${q}. Type /help.` }); return; }
+    }
+    runTurn(question);
+  }, [doExit, push, runTurn, onExternal]);
+
+  // Global keys (Composer handles text editing; here we handle app-level keys).
+  useInput((input, key) => {
+    if (key.ctrl && input === 'c') {
+      if (busy) { abortRef.current?.abort(); setHint(''); return; }
+      const now = Date.now();
+      if (now - ctrlC.current < 1500) { doExit(); return; }
+      ctrlC.current = now;
+      setHint('Press Ctrl+C again to exit');
+      return;
+    }
+    if (key.escape && busy) { abortRef.current?.abort(); return; }
+    if (key.ctrl && input === 't') { setShowReasoning((v) => !v); return; }
+    if (key.ctrl && input === 'l' && !busy) { setItems([]); return; }
+  });
+
+  // Auto-run a first question if launched with one.
+  const started = useRef(false);
+  useEffect(() => {
+    if (initialQuestion && !started.current) { started.current = true; onSubmit(initialQuestion); }
+  }, [initialQuestion, onSubmit]);
+
+  const renderItem = (it) => {
+    switch (it.type) {
+      case 'user': return html`<${UserMessage} key=${it.id} text=${it.text} />`;
+      case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} />`;
+      case 'plan': return html`<${Plan} key=${it.id} reply=${it.reply} />`;
+      case 'connect': return html`<${Connect} key=${it.id} reply=${it.reply} />`;
+      case 'notice': return html`<${Notice} key=${it.id} text=${it.text} color=${it.color} />`;
+      default: return null;
+    }
+  };
+
+  const ctx = [model ? shortModel(model) : null, cfg.user?.name, cfg.user?.role].filter(Boolean).join(midDot());
+  const footerRight = hint || `/help ${midDot()} Ctrl+T reasoning ${midDot()} Ctrl+C exit`;
+
+  // Tail-slice the transcript to what fits the middle region so nothing is
+  // clipped mid-line on small terminals.
+  const compact = rows < 30 || cols < 60;
+  const budget = Math.max(
+    3,
+    rows - bannerHeight(cols, compact) - 3 /*composer*/ - 1 /*footer*/ - 1 /*safety*/
+      - liveHeight(live, cols, showReasoning) - 1 /*earlier indicator*/,
+  );
+  const chosen = [];
+  let used = 0;
+  for (let i = items.length - 1; i >= 0; i--) {
+    const h = itemHeight(items[i], cols);
+    if (chosen.length && used + h > budget) break;
+    chosen.unshift(items[i]);
+    used += h;
+  }
+  const hidden = items.length - chosen.length;
+
+  return html`
+    <${Box} flexDirection="column" width=${cols} height=${rows}>
+      <${Box} flexShrink=${0} flexDirection="column">
+        <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${compact} />
+      <//>
+
+      <${Box} flexGrow=${1} flexDirection="column" justifyContent="flex-end" overflow="hidden">
+        ${hidden > 0 ? html`<${Text} color=${C.gray}>${glyphs.up} ${hidden} earlier message${hidden > 1 ? 's' : ''}<//>` : null}
+        ${chosen.map(renderItem)}
+        ${live
+          ? html`<${Box} flexDirection="column">
+              <${StatusLines} lines=${live.status} />
+              ${showReasoning && live.reasoning ? html`<${Reasoning} text=${live.reasoning} />` : null}
+              ${live.text ? html`<${Box} marginTop=${1}><${AssistantMessage} text=${live.text} /><//>` : null}
+              <${Thinking} label=${live.text ? 'Responding' : 'Thinking'} />
+            <//>`
+          : null}
+      <//>
+
+      <${Box} flexShrink=${0} flexDirection="column">
+        <${Composer} onSubmit=${onSubmit} busy=${busy} width=${cols} />
+        <${Box} paddingX=${1} width=${cols}>
+          <${Box} flexGrow=${1}><${Text} color=${C.gray} wrap="truncate-end">${ctx}<//><//>
+          <${Text} color=${hint ? C.yellow : C.gray} wrap="truncate-end">${footerRight}<//>
+        <//>
+      <//>
+    <//>`;
+}

package/src/tui/components.js

@@ -0,0 +1,167 @@
+// Presentational components for the iCli Ink TUI.
+import { html } from './dom.js';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { C, glyphs, spinnerType, borderStyle, midDot, dash } from './theme.js';
+import { Markdown } from './markdown.js';
+import { shortModel } from '../ui.js';
+
+const LOGO = [
+  '██╗ ██████╗ ██████╗ ██████╗ ██╗██╗      ██████╗ ████████╗',
+  '██║██╔════╝██╔═══██╗██╔══██╗██║██║     ██╔═══██╗╚══██╔══╝',
+  '██║██║     ██║   ██║██████╔╝██║██║     ██║   ██║   ██║   ',
+  '██║██║     ██║   ██║██╔═══╝ ██║██║     ██║   ██║   ██║   ',
+  '██║╚██████╗╚██████╔╝██║     ██║███████╗╚██████╔╝   ██║   ',
+  '╚═╝ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝ ╚═════╝    ╚═╝   ',
+];
+
+/** Header banner — full logo on wide/tall terminals, compact title otherwise. */
+export function Banner({ cfg = {}, model, width = 80, compact = false }) {
+  const m = shortModel(model || cfg._model || 'IspBills AI');
+  const wide = !compact && width >= 60;
+  const meta = [
+    ['model', m], ['user', cfg.user?.name], ['role', cfg.user?.role],
+  ].filter(([, v]) => v);
+
+  if (compact) {
+    return html`
+      <${Box} marginBottom=${1}>
+        <${Text} color=${C.accent} bold>iCopilot <//>
+        ${meta.map(([label, val], i) => html`
+          <${Box} key=${'m' + i}>
+            <${Text} color=${C.gray}>${midDot()}<//>
+            <${Text} color=${label === 'model' ? C.cyan : C.white}>${val}<//>
+          <//>`)}
+      <//>`;
+  }
+
+  return html`
+    <${Box} flexDirection="column" marginBottom=${1}>
+      ${wide
+        ? html`<${Box} flexDirection="column">
+            ${LOGO.map((l, i) => html`<${Text} key=${'l' + i} color=${C.accent} bold>${l}<//>`)}
+            <${Text} color=${C.gray}>           iCopilot ${dash()} network engineer in your terminal<//>
+          <//>`
+        : html`<${Text} color=${C.accent} bold>iCopilot ${html`<${Text} color=${C.gray}>${dash()} IspBills AI terminal<//>`}<//>`}
+      <${Box} marginTop=${1}>
+        ${meta.map(([label, val], i) => html`
+          <${Box} key=${'m' + i}>
+            ${i > 0 ? html`<${Text} color=${C.gray}>${midDot()}<//>` : null}
+            <${Text} color=${C.gray}>${label} <//>
+            <${Text} color=${label === 'model' ? C.cyan : C.white}>${val}<//>
+          <//>`)}
+      <//>
+      ${cfg.url ? html`<${Text} color=${C.gray}>url   ${html`<${Text} color=${C.accent}>${cfg.url}<//>`}<//>` : null}
+    <//>`;
+}
+
+/** The user's prompt line. */
+export function UserMessage({ text }) {
+  return html`
+    <${Box} marginTop=${1}>
+      <${Text} color=${C.accent} bold>${glyphs.prompt} <//>
+      <${Text} color=${C.white}>${text}<//>
+    <//>`;
+}
+
+/** A finished assistant answer (markdown). */
+export function AssistantMessage({ text }) {
+  return html`
+    <${Box} flexDirection="column" marginTop=${1}>
+      <${Markdown} content=${text} />
+    <//>`;
+}
+
+/** Icon for a server progress/status line. */
+function statusIcon(line) {
+  const l = String(line).toLowerCase();
+  if (/unreachable|skip|fail|error|denied|timeout/.test(l)) return html`<${Text} color=${C.red}>${glyphs.cross}<//>`;
+  if (/done|success|found|complet|online|ready|ok\b/.test(l)) return html`<${Text} color=${C.green}>${glyphs.check}<//>`;
+  if (/batch|sub.?agent|fleet|parallel/.test(l)) return html`<${Text} color=${C.accent}>${glyphs.ring}<//>`;
+  if (/\[\d+\/\d+\]/.test(l)) return html`<${Text} color=${C.accent}>${glyphs.diamond}<//>`;
+  if (/probe|reachab|ping/.test(l)) return html`<${Text} color=${C.yellow}>${glyphs.target}<//>`;
+  if (/connect|ssh|telnet|api|session/.test(l)) return html`<${Text} color=${C.accent}>${glyphs.arrow}<//>`;
+  return html`<${Text} color=${C.gray}>${glyphs.bullet}<//>`;
+}
+
+/** Live server activity (tool calls happening backend-side). */
+export function StatusLines({ lines = [] }) {
+  if (!lines.length) return null;
+  return html`
+    <${Box} flexDirection="column" marginTop=${1}>
+      ${lines.map((line, i) => html`
+        <${Box} key=${'s' + i}>
+          ${statusIcon(line)}
+          <${Text} color=${C.gray}> ${line}<//>
+        <//>`)}
+    <//>`;
+}
+
+/** Reasoning trace (only when enabled). */
+export function Reasoning({ text }) {
+  if (!text) return null;
+  return html`
+    <${Box} flexDirection="column" marginTop=${1}>
+      <${Text} color=${C.accent}>${glyphs.reasoning} ${html`<${Text} color=${C.gray}>Reasoning<//>`}<//>
+      <${Text} color=${C.gray}>${text}<//>
+    <//>`;
+}
+
+/** A proposed remediation plan. */
+export function Plan({ reply = {} }) {
+  const steps = reply.steps || [];
+  return html`
+    <${Box} flexDirection="column" marginTop=${1}>
+      <${Text} color=${C.accent} bold>${glyphs.diamond} Plan<//>
+      ${reply.summary ? html`<${Text} color=${C.gray}>${reply.summary}<//>` : null}
+      ${steps.map((s, i) => {
+        const last = i === steps.length - 1;
+        const risk = (s.risk === 'destructive' || s.risk === 'high')
+          ? html`<${Text} color=${C.red}> ${glyphs.warn} destructive<//>`
+          : (s.risk === 'caution' || s.risk === 'medium')
+          ? html`<${Text} color=${C.yellow}> ${glyphs.bolt} caution<//>` : null;
+        return html`
+          <${Box} flexDirection="column" key=${'p' + i}>
+            <${Box}>
+              <${Text} color=${C.gray}>${last ? glyphs.branchEnd : glyphs.branchMid} <//>
+              <${Text} color=${C.gray}>${i + 1}. <//>
+              <${Text} color=${C.yellow}>${s.cmd || ''}<//>
+              ${risk}
+              ${s.blocked ? html`<${Text} color=${C.red}> ${glyphs.block} blocked<//>` : null}
+            <//>
+            ${(s.why || s.purpose) ? html`<${Text} color=${C.gray}>     ${s.why || s.purpose}<//>` : null}
+          <//>`;
+      })}
+      <${Box} marginTop=${1}>
+        <${Text} color=${C.gray}>Type ${html`<${Text} color=${C.white}>apply fix<//>`} to confirm.<//>
+      <//>
+    <//>`;
+}
+
+/** A device-connect card. */
+export function Connect({ reply = {} }) {
+  const d = reply.device ?? reply ?? {};
+  return html`
+    <${Box} flexDirection="column" marginTop=${1}>
+      <${Box}>
+        <${Text} color=${C.green}>${glyphs.plug} <//>
+        <${Text} bold>${(d.kind ?? '?').toUpperCase()} #${d.id ?? '?'}<//>
+        ${d.proto ? html`<${Text} color=${C.gray}> via ${d.proto}<//>` : null}
+      <//>
+      ${reply.note ? html`<${Text} color=${C.gray}>${reply.note}<//>` : null}
+    <//>`;
+}
+
+/** A local notice (help hint, errors, etc.). */
+export function Notice({ text, color = C.gray }) {
+  return html`<${Box} marginTop=${1}><${Text} color=${color}>${text}<//><//>`;
+}
+
+/** The active "thinking" line with a spinner. */
+export function Thinking({ label = 'Thinking' }) {
+  return html`
+    <${Box} marginTop=${1}>
+      <${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>
+      <${Text} color=${C.gray}> ${label}…<//>
+    <//>`;
+}

package/src/tui/composer.js

@@ -0,0 +1,146 @@
+// Bottom-pinned input composer with cursor editing, input history, readline
+// key bindings and a Copilot-style slash-command palette that appears ABOVE
+// the input and is navigable with the arrow keys.
+import { html, useState, useEffect, useCallback } from './dom.js';
+import { Box, Text, useInput } from 'ink';
+import { C, glyphs, borderStyle } from './theme.js';
+import { SLASH_COMMANDS } from '../commands.js';
+
+export function Composer({ onSubmit, busy, width = 80 }) {
+  const [value, setValue] = useState('');
+  const [cursor, setCursor] = useState(0);
+  const [history, setHistory] = useState([]);
+  const [histIdx, setHistIdx] = useState(-1);
+  const [sel, setSel] = useState(0);
+
+  // The slash palette is open while typing the command token (no space yet).
+  const matches = value.startsWith('/') && !value.includes(' ')
+    ? SLASH_COMMANDS.filter((s) => s.cmd.startsWith(value))
+    : [];
+  const menuOpen = matches.length > 0;
+
+  useEffect(() => { setSel((i) => Math.min(i, Math.max(0, matches.length - 1))); }, [matches.length]);
+
+  const submit = useCallback((text) => {
+    const q = text.trim();
+    setValue(''); setCursor(0); setHistIdx(-1); setSel(0);
+    if (q) {
+      setHistory((h) => (h[h.length - 1] === q ? h : [...h, q]));
+      onSubmit(q);
+    }
+  }, [onSubmit]);
+
+  const setText = (v, c) => { setValue(v); setCursor(c ?? v.length); };
+
+  useInput((input, key) => {
+    if (busy) return; // ignore edits while a turn streams (App handles Ctrl+C/Esc)
+
+    // ── Submit / complete ──
+    if (key.return) {
+      if (menuOpen) { submit(matches[sel].cmd); return; }
+      submit(value);
+      return;
+    }
+    if (input && /[\r\n]/.test(input)) {
+      const first = input.split(/[\r\n]/)[0];
+      submit(value.slice(0, cursor) + first + value.slice(cursor));
+      return;
+    }
+    if (key.tab) {
+      if (menuOpen) { const c = matches[sel].cmd + ' '; setText(c, c.length); }
+      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]);
+        return h;
+      });
+      return;
+    }
+    if (key.downArrow) {
+      if (menuOpen) { setSel((i) => Math.min(matches.length - 1, i + 1)); return; }
+      setHistory((h) => {
+        if (histIdx === -1) return h;
+        const idx = histIdx + 1;
+        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.rightArrow) { 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
+
+    // ── Deletion ──
+    if (key.backspace || key.delete) {
+      if (cursor > 0) { setValue((v) => v.slice(0, cursor - 1) + v.slice(cursor)); setCursor((c) => c - 1); }
+      return;
+    }
+    if (key.ctrl && input === 'u') { setValue(value.slice(cursor)); setCursor(0); return; }        // to start
+    if (key.ctrl && input === 'k') { 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--;
+      setValue(value.slice(0, i) + value.slice(cursor)); setCursor(i);
+      return;
+    }
+
+    // ── Printable input ──
+    if (input && !key.ctrl && !key.meta) {
+      const printable = input.replace(/[\x00-\x1f\x7f]/g, '');
+      if (!printable) return;
+      setValue((v) => v.slice(0, cursor) + printable + v.slice(cursor));
+      setCursor((c) => c + printable.length);
+    }
+  });
+
+  const before = value.slice(0, cursor);
+  const at = value[cursor] ?? ' ';
+  const after = value.slice(cursor + 1);
+  const empty = value.length === 0;
+
+  return html`
+    <${Box} flexDirection="column" width=${width}>
+      ${menuOpen
+        ? html`<${Box} flexDirection="column" paddingX=${1} marginBottom=${0}>
+            ${(() => {
+              const MAX = 8;
+              let start = 0;
+              if (matches.length > MAX) start = Math.min(Math.max(0, sel - Math.floor(MAX / 2)), matches.length - MAX);
+              const window = matches.slice(start, start + MAX);
+              return window.map((s, wi) => {
+                const i = start + wi;
+                const on = i === sel;
+                const label = (s.cmd + (s.hint ? ' ' + s.hint : '')).padEnd(21);
+                return html`<${Box} key=${'m' + i}>
+                  <${Text} color=${on ? C.accent : C.gray}>${on ? glyphs.prompt + ' ' : '  '}<//>
+                  <${Text} color=${on ? C.accent : C.white} bold=${on}>${label}<//>
+                  <${Text} color=${C.gray}>${s.desc}<//>
+                <//>`;
+              });
+            })()}
+          <//>`
+        : null}
+
+      <${Box} width=${width} borderStyle=${borderStyle()} borderColor=${busy ? C.gray : C.accent} paddingX=${1}>
+        <${Text} color=${busy ? C.gray : C.accent}>${glyphs.prompt} <//>
+        ${empty
+          ? html`<${Box} flexGrow=${1}>
+              <${Text} color=${C.gray} inverse> <//>
+              <${Text} color=${C.gray}>${busy ? 'Working…' : 'Ask about your network, or type / for commands'}<//>
+            <//>`
+          : html`<${Box} flexGrow=${1}>
+              <${Text}>${before}<//><${Text} inverse>${at}<//><${Text}>${after}<//>
+            <//>`}
+      <//>
+    <//>`;
+}

package/src/tui/dom.js

@@ -0,0 +1,9 @@
+// JSX-free React/Ink binding via htm — lets us author components with
+// tagged-template markup and ship plain ESM (no build step, works the same
+// on Windows and Linux).
+import React from 'react';
+import htm from 'htm';
+
+export { React };
+export const html = htm.bind(React.createElement);
+export const { useState, useEffect, useRef, useCallback, useMemo } = React;

package/src/tui/markdown.js

@@ -0,0 +1,76 @@
+// Minimal, dependency-free markdown → Ink renderer. Supports headings,
+// bold, inline code, bullet/numbered lists and fenced code blocks. Ink
+// handles wrapping to the available width automatically.
+import { html, React } from './dom.js';
+import { Box, Text } from 'ink';
+import { C, glyphs } from './theme.js';
+
+let keyId = 0;
+const k = () => `md${keyId++}`;
+
+/** Parse a single line into styled Ink <Text> spans (bold, `code`). */
+function renderInline(line) {
+  const spans = [];
+  // Tokenise on **bold** and `code`.
+  const re = /(\*\*([^*]+)\*\*|`([^`]+)`)/g;
+  let last = 0;
+  let m;
+  while ((m = re.exec(line)) !== null) {
+    if (m.index > last) spans.push(html`<${Text} key=${k()}>${line.slice(last, m.index)}<//>`);
+    if (m[2] !== undefined) spans.push(html`<${Text} key=${k()} bold>${m[2]}<//>`);
+    else if (m[3] !== undefined) spans.push(html`<${Text} key=${k()} color=${C.cyan}>${m[3]}<//>`);
+    last = m.index + m[0].length;
+  }
+  if (last < line.length) spans.push(html`<${Text} key=${k()}>${line.slice(last)}<//>`);
+  return spans.length ? spans : [html`<${Text} key=${k()}> <//>`];
+}
+
+/** Render a markdown string as a column of Ink lines. */
+export function Markdown({ content = '' }) {
+  const rows = [];
+  let inCode = false;
+  const lines = String(content).replace(/\s+$/, '').split('\n');
+
+  for (const raw of lines) {
+    const line = raw.replace(/\t/g, '  ');
+
+    if (line.trim().startsWith('```')) {
+      inCode = !inCode;
+      continue;
+    }
+    if (inCode) {
+      rows.push(html`<${Text} key=${k()} color=${C.gray}>  ${line}<//>`);
+      continue;
+    }
+
+    const h = line.match(/^(#{1,3})\s+(.*)$/);
+    if (h) {
+      rows.push(html`<${Text} key=${k()} bold color=${C.white}>${h[2]}<//>`);
+      continue;
+    }
+
+    const bullet = line.match(/^(\s*)[-*]\s+(.*)$/);
+    if (bullet) {
+      rows.push(html`
+        <${Box} key=${k()}>
+          <${Text} color=${C.accent}>${bullet[1]}${glyphs.bullet} <//>
+          <${Text}>${renderInline(bullet[2])}<//>
+        <//>`);
+      continue;
+    }
+
+    const num = line.match(/^(\s*)(\d+)\.\s+(.*)$/);
+    if (num) {
+      rows.push(html`
+        <${Box} key=${k()}>
+          <${Text} color=${C.accent}>${num[1]}${num[2]}. <//>
+          <${Text}>${renderInline(num[3])}<//>
+        <//>`);
+      continue;
+    }
+
+    rows.push(html`<${Text} key=${k()}>${renderInline(line)}<//>`);
+  }
+
+  return html`<${Box} flexDirection="column">${rows}<//>`;
+}

package/src/tui/run.js

@@ -0,0 +1,44 @@
+// Ink render entrypoint. Runs the TUI as a full-height app inside the
+// alternate screen buffer (like GitHub Copilot CLI): the banner stays pinned
+// at the top, the transcript fills the middle, and the input is pinned to the
+// bottom of the terminal. On exit we leave the alt screen and, optionally,
+// reprint the transcript into the normal scrollback.
+import { html } from './dom.js';
+import { render } from 'ink';
+import { App } from './app.js';
+
+const ALT_ENTER = '\x1b[?1049h\x1b[2J\x1b[H';
+const ALT_LEAVE = '\x1b[?1049l';
+
+export async function runTui(cfg, opts = {}) {
+  const { display = {}, onExternal, initialQuestion } = opts;
+  let externalAction;
+  let transcript = null;
+
+  const isTTY = process.stdout.isTTY;
+  if (isTTY) process.stdout.write(ALT_ENTER);
+
+  const instance = render(
+    html`<${App}
+      cfg=${cfg}
+      display=${display}
+      initialQuestion=${initialQuestion}
+      onExternal=${(a) => { externalAction = a; onExternal?.(a); }}
+      onExit=${(t) => { transcript = t; }}
+    />`,
+    { exitOnCtrlC: false },
+  );
+
+  try {
+    await instance.waitUntilExit();
+  } finally {
+    if (isTTY) process.stdout.write(ALT_LEAVE);
+  }
+
+  // Reprint the conversation into the normal buffer so it survives exit.
+  if (transcript && transcript.length) {
+    process.stdout.write('\n' + transcript.join('\n') + '\n');
+  }
+
+  return externalAction;
+}

package/src/tui/theme.js

@@ -0,0 +1,41 @@
+// Colours + glyphs for the Ink TUI. Colours are Ink-friendly names/hex;
+// glyphs and the spinner reuse the ASCII-safe logic from ui.js so classic
+// Windows consoles never render "tofu" boxes.
+import { glyphs, asciiSafe } from '../ui.js';
+
+export { glyphs, asciiSafe };
+
+// Soft-blue brand accent (approx. xterm-256 colour 111).
+export const ACCENT = '#87afff';
+export const C = {
+  accent: ACCENT,
+  gray: 'gray',
+  white: 'white',
+  cyan: 'cyan',
+  green: 'green',
+  yellow: 'yellow',
+  red: 'red',
+  magenta: 'magenta',
+  blue: 'blue',
+};
+
+// ink-spinner uses cli-spinners; 'line' is pure ASCII (|/-\), 'dots' is braille.
+export function spinnerType() {
+  return asciiSafe() ? 'line' : 'dots';
+}
+
+// Border style — rounded corners (╭╮╰╯) are NOT in CP437, so fall back to a
+// single-line border on classic Windows consoles; rounded elsewhere.
+export function borderStyle() {
+  return asciiSafe() ? 'single' : 'round';
+}
+
+// Middle-dot separator, ASCII-safe on classic Windows consoles.
+export function midDot() {
+  return asciiSafe() ? ' - ' : '  ·  ';
+}
+
+// Em-dash, ASCII-safe on classic Windows consoles.
+export function dash() {
+  return asciiSafe() ? '-' : '—';
+}

package/src/ui.js

@@ -73,13 +73,13 @@ export function asciiSafe() {
 
 const ASCII_GLYPHS = {
   prompt: '>', bullet: '-', diamond: '*', ring: '*', target: 'o',
-  arrow: '->', down: 'v', check: 'OK', cross: 'XX', warn: '!!',
+  arrow: '->', down: 'v', up: '^', check: 'OK', cross: 'XX', warn: '!!',
   bolt: '!', block: 'X', plug: '>>', reasoning: '~',
   branchMid: '|-', branchEnd: '`-', vbar: '|',
 };
 const UNICODE_GLYPHS = {
   prompt: '❯', bullet: '·', diamond: '◆', ring: '◈', target: '◎',
-  arrow: '⇢', down: '↓', check: '✓', cross: '✗', warn: '⚠',
+  arrow: '⇢', down: '↓', up: '↑', check: '✓', cross: '✗', warn: '⚠',
   bolt: '⚡', block: '⛔', plug: '🔌', reasoning: '◆',
   branchMid: '├─', branchEnd: '└─', vbar: '│',
 };