ispbills-icli 6.1.1 → 7.0.0

package/README.md

@@ -137,8 +137,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** — an interactive TUI (built on [Ink](https://github.com/vadimdemedes/ink)) with a bordered input, slash-command menu, input history, and a scrolling transcript — the same style 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": "7.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,153 @@
+// Root Ink application: manages conversation state, streams from the IspBills
+// backend, and lays out a scrollable history (Static) above a pinned input.
+import { html, useState, useEffect, useRef, useCallback } from './dom.js';
+import { Box, Text, Static, useStdout, useApp } 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 useTerminalWidth() {
+  const { stdout } = useStdout();
+  const [width, setWidth] = useState(stdout?.columns || 80);
+  useEffect(() => {
+    if (!stdout) return;
+    const on = () => setWidth(stdout.columns || 80);
+    stdout.on('resize', on);
+    return () => stdout.off('resize', on);
+  }, [stdout]);
+  return width;
+}
+
+let itemId = 0;
+const nextId = () => ++itemId;
+
+export function App({ cfg, display = {}, onExternal, initialQuestion }) {
+  const { exit } = useApp();
+  const width = useTerminalWidth();
+
+  // Finished, scrolled-away items (rendered once via <Static>).
+  const [items, setItems] = useState(() => [{ id: nextId(), type: 'banner' }]);
+  // Live streaming state for the in-flight turn.
+  const [live, setLive] = useState(null); // { status:[], reasoning:'', text:'' }
+  const [busy, setBusy] = useState(false);
+  const [model, setModel] = useState(cfg._model);
+  const convo = useRef([]); // [{role, content}] sent to backend
+
+  const push = useCallback((item) => setItems((xs) => [...xs, { id: nextId(), ...item }]), []);
+
+  const runTurn = useCallback(async (question) => {
+    push({ type: 'user', text: question });
+    convo.current.push({ role: 'user', content: question });
+    setBusy(true);
+    const liveState = { status: [], reasoning: '', text: '' };
+    setLive({ ...liveState });
+
+    try {
+      const { reply, text, meta } = await streamChat(cfg, [...convo.current], {
+        onEvent: (ev) => {
+          if (ev.type === 'status') liveState.status = [...liveState.status, ev.line];
+          else if (ev.type === 'reasoning' && display.reasoning) liveState.reasoning += ev.delta;
+          else if (ev.type === 'text') liveState.text += ev.delta;
+          setLive({ ...liveState });
+        },
+      });
+      if (meta.model) setModel(meta.model);
+      const type = reply.type ?? 'message';
+      if (type === 'plan') push({ type: 'plan', reply });
+      else if (type === 'connect') push({ type: 'connect', reply });
+      else push({ type: 'assistant', text: text || '(no response)' });
+      if (text) convo.current.push({ role: 'assistant', content: text });
+    } catch (e) {
+      push({ type: 'notice', text: `${glyphs.cross} ${e.message}`, color: C.red });
+    } finally {
+      setLive(null);
+      setBusy(false);
+    }
+  }, [cfg, display.reasoning, push]);
+
+  const onSubmit = useCallback((raw) => {
+    const q = raw.trim();
+    if (!q) return;
+
+    // Locally-handled commands.
+    if (q === '/exit' || q === 'exit' || q === 'quit') { exit(); return; }
+    if (q === '/clear') { setItems([{ id: nextId(), type: 'banner' }]); return; }
+    if (q === '/new') {
+      convo.current = [];
+      push({ type: 'notice', text: `${glyphs.check} New conversation started.`, color: C.green });
+      return;
+    }
+    if (q === '/help' || q === 'help') {
+      const lines = SLASH_COMMANDS.map((s) => `  ${(s.cmd + (s.hint ? ' ' + s.hint : '')).padEnd(18)}${s.desc}`).join('\n');
+      push({ type: 'notice', text: 'Commands:\n' + lines });
+      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'); exit(); return; }
+    if (q === '/update') { onExternal?.('update'); exit(); return; }
+
+    // Shortcut slash → natural-language question.
+    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);
+  }, [exit, push, runTurn, onExternal]);
+
+  // Optionally auto-run a first question (e.g. launched with a query).
+  const started = useRef(false);
+  useEffect(() => {
+    if (initialQuestion && !started.current) {
+      started.current = true;
+      onSubmit(initialQuestion);
+    }
+  }, [initialQuestion, onSubmit]);
+
+  const renderItem = (it) => {
+    switch (it.type) {
+      case 'banner': return html`<${Banner} key=${it.id} cfg=${cfg} model=${model} width=${width} />`;
+      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());
+
+  return html`
+    <${Box} flexDirection="column" width=${width}>
+      <${Static} items=${items}>${renderItem}<//>
+
+      ${live
+        ? html`<${Box} flexDirection="column">
+            <${StatusLines} lines=${live.status} />
+            ${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} marginTop=${1}>
+        <${Composer} onSubmit=${onSubmit} busy=${busy} cfg=${cfg} width=${width} />
+      <//>
+      <${Box} paddingX=${1} width=${width}>
+        <${Box} flexGrow=${1}><${Text} color=${C.gray} wrap="truncate-end">${ctx}<//><//>
+        <${Text} color=${C.gray} wrap="truncate-end">/help ${midDot()} history ${midDot()} Ctrl+C to exit<//>
+      <//>
+    <//>`;
+}

package/src/tui/components.js

@@ -0,0 +1,155 @@
+// 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 terminals, compact title otherwise. */
+export function Banner({ cfg = {}, model, width = 80 }) {
+  const m = shortModel(model || cfg._model || 'IspBills AI');
+  const wide = width >= 60;
+  const meta = [
+    ['model', m], ['user', cfg.user?.name], ['role', cfg.user?.role],
+  ].filter(([, v]) => v);
+
+  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,115 @@
+// Bordered input composer with cursor editing, input history and slash-command
+// completion — the pinned bottom control of the TUI.
+import { html, useState, 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, cfg = {}, width = 80 }) {
+  const [value, setValue] = useState('');
+  const [cursor, setCursor] = useState(0);
+  const [history, setHistory] = useState([]);
+  const [histIdx, setHistIdx] = useState(-1); // -1 = current (editing) line
+
+  const slashMatches = value.startsWith('/')
+    ? SLASH_COMMANDS.filter((s) => s.cmd.startsWith(value.trim().split(/\s+/)[0]))
+    : [];
+
+  const submit = useCallback((text) => {
+    const q = text.trim();
+    setValue('');
+    setCursor(0);
+    setHistIdx(-1);
+    if (q) {
+      setHistory((h) => (h[h.length - 1] === q ? h : [...h, q]));
+      onSubmit(q);
+    }
+  }, [onSubmit]);
+
+  useInput((input, key) => {
+    if (busy) return; // ignore edits while a turn is streaming
+
+    if (key.return) { submit(value); return; }
+
+    // Pasted/batched input may arrive as one chunk containing a newline —
+    // insert the text before it, then submit (mirrors typing + Enter).
+    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 (slashMatches.length) {
+        const c = slashMatches[0].cmd + ' ';
+        setValue(c); setCursor(c.length);
+      }
+      return;
+    }
+
+    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.upArrow) {
+      setHistory((h) => {
+        if (!h.length) return h;
+        const idx = histIdx === -1 ? h.length - 1 : Math.max(0, histIdx - 1);
+        setHistIdx(idx); setValue(h[idx]); setCursor(h[idx].length);
+        return h;
+      });
+      return;
+    }
+    if (key.downArrow) {
+      setHistory((h) => {
+        if (histIdx === -1) return h;
+        const idx = histIdx + 1;
+        if (idx >= h.length) { setHistIdx(-1); setValue(''); setCursor(0); }
+        else { setHistIdx(idx); setValue(h[idx]); setCursor(h[idx].length); }
+        return h;
+      });
+      return;
+    }
+
+    // ink maps both Backspace and Delete here across platforms; treat as
+    // "delete char before cursor" so Windows conhost behaves correctly.
+    if (key.backspace || key.delete) {
+      if (cursor > 0) {
+        setValue((v) => v.slice(0, cursor - 1) + v.slice(cursor));
+        setCursor((c) => c - 1);
+      }
+      return;
+    }
+
+    // Printable input (ignore control/meta chords; ctrl+c handled by the app).
+    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);
+    }
+  });
+
+  // Render the value with an inverse cursor block.
+  const before = value.slice(0, cursor);
+  const at = value[cursor] ?? ' ';
+  const after = value.slice(cursor + 1);
+  const showPlaceholder = value.length === 0;
+
+  return html`
+    <${Box} flexDirection="column" width=${width}>
+      <${Box} width=${width} borderStyle=${borderStyle()} borderColor=${busy ? C.gray : C.accent} paddingX=${1}>
+        <${Text} color=${busy ? C.gray : C.accent}>${glyphs.prompt} <//>
+        ${showPlaceholder
+          ? 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}<//><//>`}
+      <//>
+      ${slashMatches.length && !busy
+        ? html`<${Box} flexDirection="column" paddingX=${1}>
+            ${slashMatches.slice(0, 6).map((s, i) => html`
+              <${Box} key=${'sc' + i}>
+                <${Text} color=${C.accent}>${(s.cmd + (s.hint ? ' ' + s.hint : '')).padEnd(21)}<//>
+                <${Text} color=${C.gray}>${s.desc}<//>
+              <//>`)}
+          <//>`
+        : null}
+    <//>`;
+}

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,25 @@
+// Ink render entrypoint for the interactive TUI.
+import { html } from './dom.js';
+import { render } from 'ink';
+import { App } from './app.js';
+
+/**
+ * Launch the interactive Ink TUI.
+ *
+ * @param {object} cfg   Loaded config ({ url, token, user, _model, ... }).
+ * @param {object} opts  { display: { reasoning }, initialQuestion, onExternal }
+ * @returns {Promise<string|undefined>}  An external action ('logout'|'update') if requested.
+ */
+export async function runTui(cfg, opts = {}) {
+  const { display = {}, onExternal, initialQuestion } = opts;
+  let externalAction;
+  const record = (action) => { externalAction = action; };
+
+  const instance = render(
+    html`<${App} cfg=${cfg} display=${display} initialQuestion=${initialQuestion} onExternal=${(a) => { record(a); onExternal?.(a); }} />`,
+    { exitOnCtrlC: true },
+  );
+
+  await instance.waitUntilExit();
+  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() ? '-' : '—';
+}