ispbills-icli 7.0.0 → 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,7 +153,7 @@ 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  
-- **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  
+- **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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ispbills-icli",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "iCli — IspBills AI network engineer in your terminal",
   "keywords": [
     "ispbills",

package/src/tui/app.js

@@ -1,7 +1,9 @@
-// Root Ink application: manages conversation state, streams from the IspBills
-// backend, and lays out a scrollable history (Static) above a pinned input.
+// 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, Static, useStdout, useApp } from 'ink';
+import { Box, Text, useStdout, useApp, useInput } from 'ink';
 import { C, glyphs, midDot } from './theme.js';
 import {
   Banner, UserMessage, AssistantMessage, StatusLines, Reasoning,
@@ -12,80 +14,133 @@ import { streamChat } from '../client.js';
 import { slashToQuestion, SLASH_COMMANDS } from '../commands.js';
 import { shortModel } from '../ui.js';
 
-function useTerminalWidth() {
+function useTerminalSize() {
   const { stdout } = useStdout();
-  const [width, setWidth] = useState(stdout?.columns || 80);
+  const [size, setSize] = useState({
+    cols: stdout?.columns || 80,
+    rows: stdout?.rows || 24,
+  });
   useEffect(() => {
     if (!stdout) return;
-    const on = () => setWidth(stdout.columns || 80);
+    const on = () => setSize({ cols: stdout.columns || 80, rows: stdout.rows || 24 });
     stdout.on('resize', on);
     return () => stdout.off('resize', on);
   }, [stdout]);
-  return width;
+  return size;
 }
 
 let itemId = 0;
 const nextId = () => ++itemId;
 
-export function App({ cfg, display = {}, onExternal, initialQuestion }) {
+// 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 width = useTerminalWidth();
+  const { cols, rows } = useTerminalSize();
 
-  // 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 [items, setItems] = useState([]);
   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 [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);
-    const liveState = { status: [], reasoning: '', text: '' };
-    setLive({ ...liveState });
+    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') 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 (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 });
-      else if (type === 'connect') push({ type: 'connect', reply });
-      else push({ type: 'assistant', text: text || '(no response)' });
+      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) {
-      push({ type: 'notice', text: `${glyphs.cross} ${e.message}`, color: C.red });
+      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, display.reasoning, push]);
+  }, [cfg, push]);
+
+  const doExit = useCallback(() => { onExit?.(plain.current); exit(); }, [exit, onExit]);
 
   const onSubmit = useCallback((raw) => {
     const q = raw.trim();
     if (!q) return;
+    setHint('');
 
-    // Locally-handled commands.
-    if (q === '/exit' || q === 'exit' || q === 'quit') { exit(); return; }
-    if (q === '/clear') { setItems([{ id: nextId(), type: 'banner' }]); return; }
+    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((s) => `  ${(s.cmd + (s.hint ? ' ' + s.hint : '')).padEnd(18)}${s.desc}`).join('\n');
-      push({ type: 'notice', text: 'Commands:\n' + lines });
+      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') {
@@ -93,10 +148,9 @@ export function App({ cfg, display = {}, onExternal, initialQuestion }) {
       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; }
+    if (q === '/logout') { onExternal?.('logout'); doExit(); return; }
+    if (q === '/update') { onExternal?.('update'); doExit(); return; }
 
-    // Shortcut slash → natural-language question.
     let question = q;
     if (q.startsWith('/')) {
       const mapped = slashToQuestion(q);
@@ -104,20 +158,31 @@ export function App({ cfg, display = {}, onExternal, initialQuestion }) {
       else { push({ type: 'notice', text: `Unknown command: ${q}. Type /help.` }); return; }
     }
     runTurn(question);
-  }, [exit, push, runTurn, onExternal]);
+  }, [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; }
+  });
 
-  // Optionally auto-run a first question (e.g. launched with a query).
+  // Auto-run a first question if launched with one.
   const started = useRef(false);
   useEffect(() => {
-    if (initialQuestion && !started.current) {
-      started.current = true;
-      onSubmit(initialQuestion);
-    }
+    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} />`;
@@ -128,26 +193,51 @@ export function App({ cfg, display = {}, onExternal, initialQuestion }) {
   };
 
   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=${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} 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} 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<//>
+
+      <${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

@@ -15,14 +15,26 @@ const LOGO = [
   '╚═╝ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝ ╚═════╝    ╚═╝   ',
 ];
 
-/** Header banner — full logo on wide terminals, compact title otherwise. */
-export function Banner({ cfg = {}, model, width = 80 }) {
+/** 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 = width >= 60;
+  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

package/src/tui/composer.js

@@ -1,85 +1,100 @@
-// 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';
+// 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, cfg = {}, width = 80 }) {
+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); // -1 = current (editing) line
+  const [histIdx, setHistIdx] = useState(-1);
+  const [sel, setSel] = useState(0);
 
-  const slashMatches = value.startsWith('/')
-    ? SLASH_COMMANDS.filter((s) => s.cmd.startsWith(value.trim().split(/\s+/)[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);
+    setValue(''); setCursor(0); setHistIdx(-1); setSel(0);
     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
+  const setText = (v, c) => { setValue(v); setCursor(c ?? v.length); };
 
-    if (key.return) { submit(value); return; }
+  useInput((input, key) => {
+    if (busy) return; // ignore edits while a turn streams (App handles Ctrl+C/Esc)
 
-    // Pasted/batched input may arrive as one chunk containing a newline —
-    // insert the text before it, then submit (mirrors typing + Enter).
+    // ── 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 (slashMatches.length) {
-        const c = slashMatches[0].cmd + ' ';
-        setValue(c); setCursor(c.length);
-      }
+      if (menuOpen) { const c = matches[sel].cmd + ' '; setText(c, 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; }
+    // ── 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); setValue(h[idx]); setCursor(h[idx].length);
+        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); setValue(''); setCursor(0); }
-        else { setHistIdx(idx); setValue(h[idx]); setCursor(h[idx].length); }
+        if (idx >= h.length) { setHistIdx(-1); setText(''); } else { setHistIdx(idx); setText(h[idx]); }
         return h;
       });
       return;
     }
 
-    // ink maps both Backspace and Delete here across platforms; treat as
-    // "delete char before cursor" so Windows conhost behaves correctly.
+    // ── 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);
-      }
+      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 (ignore control/meta chords; ctrl+c handled by the app).
+    // ── Printable input ──
     if (input && !key.ctrl && !key.meta) {
       const printable = input.replace(/[\x00-\x1f\x7f]/g, '');
       if (!printable) return;
@@ -88,28 +103,44 @@ export function Composer({ onSubmit, busy, cfg = {}, width = 80 }) {
     }
   });
 
-  // 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;
+  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} <//>
-        ${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}<//><//>`}
+        ${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}<//>
+            <//>`}
       <//>
-      ${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/run.js

@@ -1,25 +1,44 @@
-// Ink render entrypoint for the interactive TUI.
+// 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';
 
-/**
- * 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.
- */
+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;
-  const record = (action) => { externalAction = action; };
+  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) => { record(a); onExternal?.(a); }} />`,
-    { exitOnCtrlC: true },
+    html`<${App}
+      cfg=${cfg}
+      display=${display}
+      initialQuestion=${initialQuestion}
+      onExternal=${(a) => { externalAction = a; onExternal?.(a); }}
+      onExit=${(t) => { transcript = t; }}
+    />`,
+    { exitOnCtrlC: false },
   );
 
-  await instance.waitUntilExit();
+  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/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: '│',
 };