ispbills-icli 8.6.7 → 8.6.9

package/package.json

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

package/src/tui/app.js

@@ -1,6 +1,6 @@
 // Root Ink application. Renders an INLINE chat UI (GitHub Copilot CLI style).
 import { html, useState, useEffect, useRef, useCallback } from './dom.js';
-import { Box, Text, Static, useStdout, useApp, useInput } from 'ink';
+import { Box, Text, useStdout, useApp, useInput } from 'ink';
 import { C, glyphs, midDot, dash } from './theme.js';
 import {
   Banner, TabBar, FollowupChips, UserMessage, AssistantMessage, StatusLines, Reasoning,
@@ -230,6 +230,78 @@ function itemPreview(it) {
   return JSON.stringify(it);
 }
 
+// Approximate the number of terminal rows an item occupies. Used purely for
+// viewport slicing — Ink clips any overflow, so this only needs to be close.
+function wrappedLines(text, width) {
+  const w = Math.max(1, width);
+  return String(text || '')
+    .split('\n')
+    .reduce((n, line) => n + Math.max(1, Math.ceil(line.length / w)), 0);
+}
+
+function itemHeight(it, cols = 80) {
+  const w = Math.max(1, cols - 4); // paddingX + body inset
+  switch (it.type) {
+    case 'user':
+      return 3 + wrappedLines(it.text, w); // sep + speaker + margin + body
+    case 'assistant':
+      return 3 + wrappedLines(it.text, Math.min(w, 96));
+    case 'shell':
+      return 4 + wrappedLines(it.output || '(no output)', w) + 1;
+    case 'plan':
+      return 4 + (it.reply?.steps?.length || 0);
+    case 'connect':
+      return 5;
+    case 'activity':
+      return 1 + (it.status?.length || 0);
+    case 'notice':
+      return 1 + wrappedLines(it.text, w);
+    case 'info':
+    case 'error':
+    case 'system':
+      return 2 + wrappedLines(it.text, w);
+    case 'help':
+      return 44;
+    default:
+      return 2 + wrappedLines(it.text, w);
+  }
+}
+
+// Given the full items array, choose the subset visible in a viewport that is
+// `avail` rows tall, scrolled up from the bottom by `scrollOffset` rows.
+// scrollOffset === 0 pins to the newest content at the bottom.
+function selectViewport(items, cols, avail, scrollOffset) {
+  const heights = items.map((it) => itemHeight(it, cols));
+  const total = heights.reduce((a, b) => a + b, 0);
+  const maxOffset = Math.max(0, total - avail);
+  const clamped = Math.max(0, Math.min(scrollOffset, maxOffset));
+  const windowBottom = total - clamped;      // exclusive row from top
+  const windowTop = windowBottom - avail;    // inclusive row from top
+  const visible = [];
+  let aboveCount = 0;
+  let y = 0;
+  for (let i = 0; i < items.length; i++) {
+    const h = heights[i];
+    const top = y;
+    const bottom = y + h;
+    if (bottom <= windowTop) aboveCount++;
+    else if (top < windowBottom) visible.push(items[i]);
+    y = bottom;
+  }
+  return { visible, aboveCount, hasAbove: windowTop > 0, maxOffset, clamped };
+}
+
+function liveAreaHeight(live, cols = 80, showReasoning = false) {
+  if (!live) return 0;
+  const w = Math.max(1, cols - 4);
+  let h = 2; // thinking line + margin
+  if (live.text) h += 3 + wrappedLines(live.text, Math.min(w, 96));
+  if (live.reasoning) h += showReasoning ? 2 + wrappedLines(live.reasoning, w) : 1;
+  if (live.reply?.steps) h += 3 + live.reply.steps.length;
+  if (live.status?.length) h += 1 + live.status.length;
+  return h;
+}
+
 function useTerminalSize() {
   const { stdout } = useStdout();
   const [size, setSize] = useState({ cols: stdout?.columns || 80, rows: stdout?.rows || 24 });
@@ -246,6 +318,50 @@ let itemId = 0;
 const nextId = () => ++itemId;
 const MODES = ['ask', 'plan', 'autopilot'];
 
+// Tab-specific quick-command panels. Static — does not depend on component state.
+const TAB_CONTENT = {
+  devices: {
+    title: 'Devices',
+    commands: [
+      { cmd: '/status',           desc: 'Fleet health summary' },
+      { cmd: '/reachable',        desc: 'Who is up / down' },
+      { cmd: '/alarms',           desc: 'Active alarms' },
+      { cmd: '/check [device]',   desc: 'Full device diagnostics' },
+      { cmd: '/uptime [device]',  desc: 'Uptime and last reboot' },
+      { cmd: '/cpu [device]',     desc: 'CPU / memory load' },
+      { cmd: '/offline',          desc: 'All offline devices' },
+      { cmd: '/flapping [device]', desc: 'Flapping interfaces' },
+    ],
+    hint: 'Press a number (1–8) to insert command · Enter to return to Session',
+  },
+  maps: {
+    title: 'Network Maps',
+    commands: [
+      { cmd: '/vlan [id]',        desc: 'VLAN topology & members' },
+      { cmd: '/route [device]',   desc: 'Routing table & next-hops' },
+      { cmd: '/overlaps',         desc: 'IP subnet overlap check' },
+      { cmd: '/mac [addr]',       desc: 'MAC address lookup' },
+      { cmd: '/arp [device]',     desc: 'ARP table & IP-MAC map' },
+      { cmd: '/trace [host]',     desc: 'Traceroute to host' },
+      { cmd: '/topology',         desc: 'Network topology diagram' },
+      { cmd: '/segments',         desc: 'Network segments & subnets' },
+    ],
+    hint: 'Press a number (1–8) to insert command · Enter to return to Session',
+  },
+  alarms: {
+    title: 'Alarms',
+    commands: [
+      { cmd: '/alarms',           desc: 'Active alarms & recent faults' },
+      { cmd: '/offline',          desc: 'All offline devices' },
+      { cmd: '/down [circuit]',   desc: 'Down circuits / uplinks' },
+      { cmd: '/flapping [device]', desc: 'Flapping interfaces' },
+      { cmd: '/optical [device]', desc: 'Optical RX/TX (dBm)' },
+      { cmd: '/reachable',        desc: 'Reachability sweep' },
+    ],
+    hint: 'Press a number (1–6) to insert command · Enter to return to Session',
+  },
+};
+
 export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, showBanner = true, agentName, resumeMode }) {
   const { exit } = useApp();
   const initialResumeRef = useRef(undefined);
@@ -261,6 +377,10 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const { cols, rows } = useTerminalSize();
   const colsRef = useRef(cols);
   useEffect(() => { colsRef.current = cols; }, [cols]);
+  // Fixed-height viewport: total rows minus chrome (tabbar + spacing + chips +
+  // composer + footer). Everything else scrolls inside this region.
+  const viewportRows = Math.max(3, rows - 6);
+  const scrollPage = Math.max(4, viewportRows - 2);
 
   const [items, setItems] = useState(() => renderConversationItems(initialMessages, cols));
   const [live, setLive] = useState(null);
@@ -275,6 +395,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const [startedAt, setStartedAt] = useState(0);
   const [choice, setChoice] = useState(null);
   const [clearEpoch, setClearEpoch] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
   const [composerClearToken, setComposerClearToken] = useState(0);
   const [composerText, setComposerText] = useState('');
   const [composerPreset, setComposerPreset] = useState({ token: 0, text: '' });
@@ -301,6 +422,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const activeTurns = useRef(0);
   const dismissTimers = useRef(new Map());
   const dispatchSubmitRef = useRef(null);
+  const maxScrollRef = useRef(0);
   const sessionIdRef = useRef(initialSession?.id || Date.now().toString(36));
   const sessionCreatedAtRef = useRef(initialSession?.createdAt || new Date().toISOString());
   const sessionNameRef = useRef(initialSession?.name || sessionAutoName(initialMessages));
@@ -327,6 +449,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const push = useCallback((item) => {
     const next = { id: nextId(), cols: colsRef.current, ts: item.ts ?? Date.now(), ...item };
     setItems((xs) => [...xs, next]);
+    setScrollOffset(0); // auto-pin to bottom on new content
     return next;
   }, []);
 
@@ -347,6 +470,9 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     }
   }, [items, removeItem]);
 
+  // Pin the viewport to the newest content whenever a turn begins streaming.
+  useEffect(() => { if (startedAt) setScrollOffset(0); }, [startedAt]);
+
   const pushNotice = useCallback((text, color = C.gray, autoDismiss = false, type = null) => {
     const resolvedType = type || (color === C.red || color === C.error ? 'error' : 'info');
     push({ type: resolvedType, text, color, autoDismiss });
@@ -359,6 +485,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     setItems([]);
     setExpandedItems(null);
     setSearch(null);
+    setScrollOffset(0);
     setClearEpoch((n) => n + 1);
   }, []);
 
@@ -367,6 +494,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     setItems(renderConversationItems(messages, colsRef.current));
     setExpandedItems(null);
     setSearch(null);
+    setScrollOffset(0);
     setClearEpoch((n) => n + 1);
   }, []);
 
@@ -900,7 +1028,42 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     if (q === '/model' || q.startsWith('/model ')) {
       const name = q.slice('/model'.length).trim();
       if (!name) {
-        pushNotice(`Current model: ${model || modelRef.current || 'server default'}.\nUse /model <name> to request a different model.`);
+        // Show interactive model picker
+        const cur = model || modelRef.current || '';
+        const MODELS = [
+          { id: 'gpt-4o-mini',                     desc: 'Fast & affordable (default)' },
+          { id: 'openai/gpt-4o',                   desc: 'OpenAI GPT-4o — balanced' },
+          { id: 'openai/gpt-4.1',                  desc: 'OpenAI GPT-4.1 — latest' },
+          { id: 'openai/o3',                        desc: 'OpenAI o3 — reasoning' },
+          { id: 'openai/o3-mini',                   desc: 'OpenAI o3-mini — fast reasoning' },
+          { id: 'anthropic/claude-3-5-sonnet',      desc: 'Claude 3.5 Sonnet — strong' },
+          { id: 'anthropic/claude-3-opus',          desc: 'Claude 3 Opus — advanced' },
+          { id: 'anthropic/claude-3-haiku',         desc: 'Claude 3 Haiku — fast' },
+          { id: 'meta/llama-3.3-70b-instruct',      desc: 'Llama 3.3 70B (open)' },
+          { id: 'mistral/mistral-large',            desc: 'Mistral Large' },
+        ];
+        choiceActionRef.current = (val) => {
+          if (val) {
+            modelRef.current = val;
+            setModel(val);
+            cfg._model = val;
+            persistCfg();
+            saveCurrentSession();
+            pushNotice(`${glyphs.check} Model set to ${val}.`, C.green);
+          }
+        };
+        setChoice({
+          title: `Select AI Model  (current: ${cur || 'server default'})`,
+          note: 'Use ↑/↓ to move, Enter to confirm, Esc to cancel',
+          sel: Math.max(0, MODELS.findIndex((m) => m.id === cur)),
+          text: '',
+          focusText: false,
+          allowText: false,
+          options: MODELS.map((m, i) => ({
+            label: `${i + 1}. ${m.id.padEnd(36)} ${m.desc}`,
+            value: m.id,
+          })),
+        });
       } else {
         modelRef.current = name;
         setModel(name);
@@ -1234,7 +1397,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         '  optical       — Optical power analysis and ONU diagnostics (enabled)',
         '  fleet-check   — Parallel multi-device scanning (enabled)',
         '  backup        — Automated config backup via git (enabled)',
-        '  customers     — Customer lookup and ticket integration (enabled)',
+        '  maps          — Network topology maps and IP planning (enabled)',
         '  alarms        — Real-time alarm monitoring (enabled)',
         '',
         'Use /experimental to unlock additional skills.',
@@ -1685,6 +1848,14 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       return;
     }
     if (key.ctrl && input === 'd') { doExit(); return; }
+    if (key.pageUp && !choice && !search && !sessionPicker && !diffState) {
+      setScrollOffset((n) => Math.min(maxScrollRef.current, n + scrollPage));
+      return;
+    }
+    if (key.pageDown && !choice && !search && !sessionPicker && !diffState) {
+      setScrollOffset((n) => Math.max(0, n - scrollPage));
+      return;
+    }
     if (key.escape && busy) { abortRef.current?.abort(); return; }
     if (key.escape && shellMode && !composerText.trim()) { setShellMode(false); pushNotice('Exited shell mode.', C.muted, true); return; }
     if (key.escape && expandedItems) { setExpandedItems(null); return; }
@@ -1730,61 +1901,42 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     if (key.ctrl && input === 'p' && chips.length) { setActiveChip((i) => (i - 1 + chips.length) % chips.length); return; }
     if (key.tab && !key.shift && !busy && !composerText.trim()) {
       setActiveTab((t) => {
-        const tabs = ['session', 'devices', 'customers', 'alarms'];
+        const tabs = ['session', 'devices', 'maps', 'alarms'];
         return tabs[(tabs.indexOf(t) + 1) % tabs.length];
       });
     }
+    // Alt+↑/↓ for viewport scrolling (alternative to PgUp/PgDn)
+    if (key.meta && key.upArrow && !choice && !search && !sessionPicker && !diffState) {
+      setScrollOffset((n) => Math.min(maxScrollRef.current, n + Math.max(3, Math.floor(scrollPage / 4))));
+      return;
+    }
+    if (key.meta && key.downArrow && !choice && !search && !sessionPicker && !diffState) {
+      setScrollOffset((n) => Math.max(0, n - Math.max(3, Math.floor(scrollPage / 4))));
+      return;
+    }
+    // Number keys on non-session tabs: 1-9 insert the panel's Nth command into composer
+    if (activeTab !== 'session' && !choice && !search) {
+      const n = parseInt(input, 10);
+      if (!isNaN(n) && n >= 1) {
+        const panel = TAB_CONTENT[activeTab];
+        const cmd = panel?.commands[n - 1]?.cmd;
+        if (cmd) {
+          const insertCmd = cmd.replace(/\[.*?\]/g, '').trim();
+          setActiveTab('session');
+          setComposerPreset({ token: Date.now(), text: insertCmd });
+        }
+        return;
+      }
+    }
   });
 
-  // Tab-specific content panels (shown when not on Session tab)
-  const TAB_CONTENT = {
-    devices: {
-      title: 'Devices',
-      commands: [
-        { cmd: '/status', desc: 'Fleet health summary' },
-        { cmd: '/reachable', desc: 'Who is up / down' },
-        { cmd: '/alarms', desc: 'Active alarms' },
-        { cmd: '/check [device]', desc: 'Full device diagnostics' },
-        { cmd: '/uptime [device]', desc: 'Uptime and last reboot' },
-        { cmd: '/cpu [device]', desc: 'CPU / memory load' },
-        { cmd: '/offline', desc: 'All offline devices' },
-        { cmd: '/flapping [device]', desc: 'Flapping interfaces' },
-      ],
-      hint: 'Press Enter to switch back to Session and use the composer',
-    },
-    customers: {
-      title: 'Customers',
-      commands: [
-        { cmd: '/customer [name]', desc: 'Look up a customer' },
-        { cmd: '/online', desc: 'Online PPPoE sessions' },
-        { cmd: '/pppoe [user]', desc: 'PPPoE session detail' },
-        { cmd: '/dhcp', desc: 'DHCP leases & pool usage' },
-        { cmd: '/onu [id]', desc: 'ONU signal and status' },
-        { cmd: '/bandwidth [device]', desc: 'Traffic / bandwidth' },
-      ],
-      hint: 'Press Enter to switch back to Session and send commands',
-    },
-    alarms: {
-      title: 'Alarms',
-      commands: [
-        { cmd: '/alarms', desc: 'Active alarms & recent faults' },
-        { cmd: '/offline', desc: 'All offline devices' },
-        { cmd: '/down [circuit]', desc: 'Down circuits / uplinks' },
-        { cmd: '/flapping [device]', desc: 'Flapping interfaces' },
-        { cmd: '/optical [device]', desc: 'Optical RX/TX (dBm)' },
-        { cmd: '/reachable', desc: 'Reachability sweep' },
-      ],
-      hint: 'Press Enter to switch back to Session and type a command',
-    },
-  };
-
   const tabPanel = activeTab !== 'session' ? TAB_CONTENT[activeTab] : null;
 
   const renderItem = (it) => {
     const c = it.cols || 80;
     switch (it.type) {
       case 'user': return html`<${UserMessage} key=${it.id} text=${it.text} cols=${c} ts=${it.ts} />`;
-      case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} cols=${c} ts=${it.ts} />`;
+      case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} cols=${c} />`;
       case 'plan': return html`<${Plan} key=${it.id} reply=${it.reply} />`;
       case 'connect': return html`<${Connect} key=${it.id} reply=${it.reply} />`;
       case 'activity': return html`<${StatusLines} key=${it.id} lines=${it.status} busy=${false} />`;
@@ -1812,81 +1964,94 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     : streamerMode
     ? ''
     : [modelLabel, tokenLabel].filter(Boolean).join(midDot());
-  const compact = cols < 60;
   const composerMode = shellMode ? 'shell' : mode;
-  const staticItems = showBanner
-    ? [{ type: 'banner', id: `banner-${clearEpoch}`, cols }, ...items]
-    : items;
 
-  return html`
-    <${Box} flexDirection="column" width=${cols}>
-      <${Static} key=${clearEpoch} items=${staticItems}>
-        ${(it) => it.type === 'banner'
-          ? html`<${Box} key=${it.id} flexDirection="column" alignItems="center" width=${cols}>
-              <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${compact} streamerMode=${streamerMode} />
+  // ── Viewport slicing ───────────────────────────────────────────────────────
+  // Reserve room for the live streaming area, then pick the items that fit in
+  // the remaining rows, scrolled up from the bottom by scrollOffset.
+  const liveH = liveAreaHeight(live, cols, showReasoning);
+  const availRows = Math.max(1, viewportRows - liveH);
+  const { visible: visibleItems, aboveCount, hasAbove } = selectViewport(items, cols, availRows, scrollOffset);
+  const totalRows = items.reduce((n, it) => n + itemHeight(it, cols), 0);
+  maxScrollRef.current = Math.max(0, totalRows - availRows);
+  const showEmptyBanner = items.length === 0 && !live;
+  const diffHeight = Math.max(8, viewportRows - 1);
+
+  const liveArea = live
+    ? html`<${Box} flexDirection="column">
+        ${live.text ? html`<${AssistantMessage} text=${live.text} cols=${cols} ts=${startedAt || Date.now()} streaming=${true} />` : null}
+        ${live.reasoning ? html`<${Reasoning} text=${live.reasoning} show=${showReasoning} />` : null}
+        ${live.reply?.steps ? html`<${Plan} reply=${live.reply} live=${true} />` : null}
+        <${StatusLines} lines=${live.status} busy=${busy} />
+        <${Thinking} label=${live.reply ? 'Planning' : live.text ? 'Responding' : 'Working'} startedAt=${startedAt} />
+      <//>`
+    : null;
+
+  const scrollIndicator = hasAbove
+    ? html`<${Box} paddingX=${1}>
+        <${Text} color=${C.muted} dimColor>${glyphs.up} ${aboveCount} message${aboveCount === 1 ? '' : 's'} above ${midDot()} PgUp/PgDn or Alt+↑/↓ to scroll<//>
+      <//>`
+    : null;
+
+  const timelineContent = diffState
+    ? html`<${Box} flexDirection="column">
+        <${DiffViewer}
+          diff=${diffState.lines}
+          sel=${diffState.sel}
+          staged=${diffState.staged}
+          whitespace=${diffState.whitespace}
+          cols=${cols}
+          height=${diffHeight}
+          commentCount=${Object.keys(diffState.comments || {}).length}
+        />
+        ${diffState.commentInput
+          ? html`<${Choice}
+              title=${`Tell Copilot what stands out about ${diffState.commentInput.file}:${diffState.commentInput.lineNumber || '?'}`}
+              note=${diffState.commentInput.content}
+              sel=${0}
+              allowText=${true}
+              text=${diffState.commentInput.text}
+              focusText=${true}
+              options=${[]}
+            />`
+          : null}
+      <//>`
+    : expandedItems
+    ? html`<${Box} flexDirection="column">
+        <${Notice} text=${`${glyphs.expand} ${expandedItems.kind}`} color=${C.muted} />
+        ${expandedItems.items.map((it) => renderItem(it))}
+      <//>`
+    : tabPanel
+    ? html`<${Box} flexDirection="column" paddingX=${1} paddingY=${1}>
+        <${Text} color=${C.brand} bold>${tabPanel.title} — Quick Commands<//>\n
+        ${tabPanel.commands.map((c, i) =>
+          html`<${Box} key=${i}>
+            <${Text} color=${C.accent} bold>${String(i + 1)}. <//>
+            <${Text} color=${C.slash}>${c.cmd.padEnd(22)}<//>
+            <${Text} color=${C.muted}>${c.desc}<//>
+          <//>`)}
+        \n<${Text} color=${C.muted}>${tabPanel.hint}<//>
+      <//>`
+    : html`<${Box} flexDirection="column">
+        ${showEmptyBanner
+          ? html`<${Box} flexDirection="column" alignItems="center" width=${cols}>
+              <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${true} streamerMode=${streamerMode} />
             <//>`
-          : renderItem(it)}
-      <//>
-
-      ${live
-        ? html`<${Box} flexDirection="column">
-            ${live.text ? html`<${AssistantMessage} text=${live.text} cols=${cols} ts=${startedAt || Date.now()} streaming=${true} />` : null}
-            ${live.reasoning ? html`<${Reasoning} text=${live.reasoning} show=${showReasoning} />` : null}
-            ${live.reply?.steps ? html`<${Plan} reply=${live.reply} live=${true} />` : null}
-            <${StatusLines} lines=${live.status} busy=${busy} />
-            <${Thinking} label=${live.reply ? 'Planning' : live.text ? 'Responding' : 'Working'} startedAt=${startedAt} />
-          <//>`
-        : null}
-
-      ${expandedItems
-        ? html`<${Box} flexDirection="column">
-            <${Notice} text=${`${glyphs.expand} ${expandedItems.kind}`} color=${C.muted} />
-            ${expandedItems.items.map((it) => renderItem(it))}
-          <//>`
-        : null}
+          : null}
+        ${scrollIndicator}
+        ${visibleItems.map((it) => renderItem(it))}
+        ${liveArea}
+      <//>`;
 
-      ${search ? html`<${SearchOverlay} query=${search.query} matches=${searchMatches} active=${search.active} cols=${cols} />` : null}
+  return html`
+    <${Box} flexDirection="column" width=${cols} height=${rows}>
+      <${TabBar} active=${activeTab} cols=${cols} mode=${composerMode} />
 
-      ${diffState
-        ? html`<${Box} flexDirection="column">
-            <${DiffViewer}
-              diff=${diffState.lines}
-              sel=${diffState.sel}
-              staged=${diffState.staged}
-              whitespace=${diffState.whitespace}
-              cols=${cols}
-              height=${Math.max(8, rows - 14)}
-              commentCount=${Object.keys(diffState.comments || {}).length}
-            />
-            ${diffState.commentInput
-              ? html`<${Choice}
-                  title=${`Tell Copilot what stands out about ${diffState.commentInput.file}:${diffState.commentInput.lineNumber || '?'}`}
-                  note=${diffState.commentInput.content}
-                  sel=${0}
-                  allowText=${true}
-                  text=${diffState.commentInput.text}
-                  focusText=${true}
-                  options=${[]}
-                />`
-              : null}
-          <//>`
-        : null}
-
-      <${Box} marginTop=${1}>
-        <${TabBar} active=${activeTab} cols=${cols} mode=${composerMode} />
+      <${Box} flexDirection="column" flexGrow=${1} overflow="hidden">
+        ${timelineContent}
       <//>
 
-      ${tabPanel && !diffState
-        ? html`<${Box} flexDirection="column" paddingX=${1} paddingY=${1}>
-            <${Text} color=${C.brand} bold>${tabPanel.title} — Quick Commands<//>\n
-            ${tabPanel.commands.map((c, i) =>
-              html`<${Box} key=${i}>
-                <${Text} color=${C.slash}>${c.cmd.padEnd(24)}<//>
-                <${Text} color=${C.muted}>${c.desc}<//>
-              <//>`)}
-            \n<${Text} color=${C.muted}>${tabPanel.hint} · Press Enter to return to Session · Press c to start a #reference<//>
-          <//>`
-        : null}
+      ${search ? html`<${SearchOverlay} query=${search.query} matches=${searchMatches} active=${search.active} cols=${cols} />` : null}
 
       ${!busy && chips.length ? html`<${FollowupChips} chips=${chips} active=${activeChip} />` : null}
 

package/src/tui/components.js

@@ -109,7 +109,7 @@ function SpeakerLine({ label, color, glyphColor, cols = 80, ts, rightLabel = ''
 const TABS = [
   { id: 'session',   label: 'Session'   },
   { id: 'devices',   label: 'Devices'   },
-  { id: 'customers', label: 'Customers' },
+  { id: 'maps', label: 'Network Maps' },
   { id: 'alarms',    label: 'Alarms'    },
 ];
 
@@ -278,13 +278,13 @@ function StreamingText({ text = '' }) {
   return rendered;
 }
 
-export function AssistantMessage({ text, cols = 80, ts, label = `${glyphs.copilotDot} iCopilot`, streaming = false }) {
+export function AssistantMessage({ text, cols = 80, ts, label = `${glyphs.ring} iCopilot`, streaming = false }) {
   // §11: response content box capped at 100 columns; separators stay full-width (§6).
   const bodyWidth = Math.min(cols, 100);
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
       <${Sep} cols=${cols} />
-      <${SpeakerLine} label=${label} color="white" glyphColor=${C.accent} cols=${cols} ts=${ts} />
+      <${SpeakerLine} label=${label} color="white" glyphColor=${C.accent} cols=${cols} />
       <${Box} paddingX=${1} flexDirection="column" width=${bodyWidth}>
         ${streaming ? html`<${StreamingText} text=${text} />` : html`<${Markdown} content=${text} />`}
       <//>

package/src/tui/composer.js

@@ -347,7 +347,7 @@ export function Composer({
       return;
     }
     if (key.pageUp || key.pageDown) {
-      onNotice?.('Use terminal scrollback to view history.', C.muted);
+      // Viewport scrolling is handled by the app-level input handler.
       return;
     }
     if (key.ctrl && input === 'r') {
@@ -517,7 +517,7 @@ export function Composer({
               <${Text} color=${C.muted} italic> ${ghostHint}<//>
             <//>`
           : html`<${Box} flexGrow=${1}>
-              <${Text}>${before}<//><${Text} inverse>${at}<//><${Text}>${after}<//><${Text} color=${C.muted}>${ghost}<//>
+              <${Text}>${before}<//><${Text} inverse>${at}<//><${Text}>${after}<//><${Text} color=${C.muted} italic>${ghost}<//>
             <//>`}
       <//>
 

package/src/tui/run.js

@@ -1,9 +1,26 @@
-// Ink render entrypoint. Runs the TUI INLINE in the normal terminal buffer.
+// Ink render entrypoint. Runs the TUI in a full-screen ALT-SCREEN viewport.
 import { html } from './dom.js';
 import { render } from 'ink';
 import { App } from './app.js';
 import { saveConfig } from '../config.js';
 
+// ── Alt-screen management ────────────────────────────────────────────────────
+// Switch to the alternate terminal buffer so the TUI owns the full viewport and
+// nothing leaks into the user's native scrollback. Must run BEFORE Ink renders.
+let altScreenActive = false;
+
+function enterAltScreen() {
+  if (altScreenActive || !process.stdout.isTTY) return;
+  process.stdout.write('\x1b[?1049h\x1b[2J\x1b[H'); // enter alt-screen, clear, home
+  altScreenActive = true;
+}
+
+function exitAltScreen() {
+  if (!altScreenActive) return;
+  try { process.stdout.write('\x1b[?1049l'); } catch {}
+  altScreenActive = false;
+}
+
 // iCopilot wordmark in block letters
 const LOGO = [
   ' ██╗ ██████╗ ██████╗ ██████╗ ██╗██╗      ██████╗ ████████╗',
@@ -93,6 +110,14 @@ export async function runTui(cfg, opts = {}) {
   const seen = Boolean(cfg?.tui?.bannerSeen);
   const showAnimation = banner || !seen;
 
+  // Enter the alternate screen buffer before anything renders, and make sure we
+  // always restore the primary buffer no matter how the process ends.
+  enterAltScreen();
+  process.on('exit', exitAltScreen);
+  const onSignal = (sig) => { exitAltScreen(); process.exit(sig === 'SIGINT' ? 130 : 0); };
+  process.on('SIGINT', () => onSignal('SIGINT'));
+  process.on('SIGTERM', () => onSignal('SIGTERM'));
+
   if (showAnimation) {
     await animateSplash(cfg);
     cfg.tui = { ...(cfg.tui || {}), bannerSeen: true };
@@ -112,6 +137,10 @@ export async function runTui(cfg, opts = {}) {
     { exitOnCtrlC: false },
   );
 
-  await instance.waitUntilExit();
+  try {
+    await instance.waitUntilExit();
+  } finally {
+    exitAltScreen();
+  }
   return externalAction;
 }