ispbills-icli 8.3.1 → 8.4.0

package/README.md

@@ -59,11 +59,12 @@ $ icli
 
   ❯ is vlan 82 free on all devices?
 
-  working
-  ◈ Assigning 3 sub-agents…
-  ✓ [1/3] nas#1: FREE
-  ✓ [2/3] nas#2: FREE
-  ✓ [3/3] olt#1: FREE
+  ✓ Connecting to OLT epon-olt-3…
+  ✓ 🧭 No single device named — delegating across the fleet. Assigning one
+      sub-agent per device to: check whether VLAN 82 is in use
+    ├─ 1/3 nas#1 — ✓ FREE
+    ├─ 2/3 nas#2 — ✓ FREE
+    └─ 3/3 olt#1 — ✓ FREE
 
   VLAN 82 is free across all 3 reachable devices in your fleet.
 
@@ -201,10 +202,13 @@ suggestion (accept with **Tab** or **→**), and runs the highlighted command on
 plan is applied automatically without waiting for you to type `apply fix`.
 Toggle it with **Shift+Tab** or `/autopilot`.
 
-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.
+The REPL renders inline in your terminal's normal buffer — exactly like GitHub
+Copilot CLI. The banner prints once at the top and scrolls away into your native
+scrollback as the conversation grows, so you can scroll back through the entire
+session with your terminal's own scrollbar/wheel. The input box stays at the
+bottom while a request is in flight, and each answer (including the sub-agent /
+tool-call trace that produced it) is committed to scrollback so it stays visible
+in your history.
 
 ---
 

package/package.json

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

package/src/tui/app.js

@@ -1,9 +1,10 @@
-// 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.
+// Root Ink application. Renders an INLINE chat UI (GitHub Copilot CLI style):
+// the banner prints once at the top and scrolls away, completed transcript
+// items are flushed to the terminal's native scrollback via Ink <Static> (so
+// you can scroll back through history), and only the live/streaming area plus
+// the input composer are re-rendered in place at the bottom.
 import { html, useState, useEffect, useRef, useCallback } from './dom.js';
-import { Box, Text, useStdout, useApp, useInput } from 'ink';
+import { Box, Text, Static, useStdout, useApp, useInput } from 'ink';
 import { C, glyphs, midDot, dash } from './theme.js';
 import {
   Banner, UserMessage, AssistantMessage, StatusLines, Reasoning,
@@ -46,37 +47,6 @@ function useTerminalSize() {
 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.reply?.steps) h += 3 + live.reply.steps.length * 2 + (live.reply.summary ? 1 : 0);
-  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();
@@ -90,6 +60,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
   const [hint, setHint] = useState('');
   const [startedAt, setStartedAt] = useState(0);
   const [choice, setChoice] = useState(null); // { title, note, options, allowText, sel, text, focusText, onPick }
+  const [clearEpoch, setClearEpoch] = useState(0); // bump to remount <Static> on /clear /new
 
   const convo = useRef([]);      // [{role, content}] for the backend
   const plain = useRef([]);      // plain-text transcript for exit reprint
@@ -116,6 +87,14 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
   const push = useCallback((item) => setItems((xs) => [...xs, { id: nextId(), ...item }]), []);
   const log = (line) => plain.current.push(line);
 
+  // Clear the visible transcript: wipe the screen + native scrollback and
+  // remount <Static> (via clearEpoch) so nothing is re-flushed above the input.
+  const clearAll = useCallback(() => {
+    try { process.stdout.write('\x1b[2J\x1b[3J\x1b[H'); } catch {}
+    setItems([]);
+    setClearEpoch((n) => n + 1);
+  }, []);
+
   const runTurn = useCallback(async (question, opts = {}) => {
     const { depth = 0, archive = null, label = '' } = opts;
     push({ type: 'user', text: question });
@@ -153,6 +132,9 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       });
       if (meta.model) setModel(meta.model);
       const type = reply.type ?? 'message';
+      // Persist the tool / sub-agent activity trace inline (Copilot-CLI style)
+      // so it stays in history instead of vanishing with the live region.
+      if (s.status.length) push({ type: 'activity', status: s.status });
       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 if (type === 'prompt' || type === 'choice') { push({ type: 'assistant', text: text || reply.question || '' }); log(text || reply.question || ''); }
@@ -246,10 +228,10 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
     setHint('');
 
     if (q === '/exit' || q === 'exit' || q === 'quit') { doExit(); return; }
-    if (q === '/clear') { setItems([]); return; }
+    if (q === '/clear') { clearAll(); return; }
     if (q === '/new') {
       convo.current = [];
-      setItems([]);
+      clearAll();
       push({ type: 'notice', text: `${glyphs.check} New conversation started.`, color: C.green });
       return;
     }
@@ -441,7 +423,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       return;
     }
     if (key.ctrl && input === 't') { setShowReasoning((v) => !v); return; }
-    if (key.ctrl && input === 'l' && !busy) { setItems([]); return; }
+    if (key.ctrl && input === 'l' && !busy) { clearAll(); return; }
   });
 
   // Auto-run a first question if launched with one.
@@ -456,6 +438,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       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 'activity': return html`<${StatusLines} key=${it.id} lines=${it.status} busy=${false} />`;
       case 'notice': return html`<${Notice} key=${it.id} text=${it.text} color=${it.color} />`;
       default: return null;
     }
@@ -464,46 +447,35 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
   const ctx = [model ? shortModel(model) : null, cfg.user?.name, cfg.user?.role].filter(Boolean).join(midDot());
   const modeTag = autopilot ? `${glyphs.bolt} autopilot ${midDot()} ` : '';
   const footerRight = hint || `${modeTag}/help ${midDot()} Shift+Tab autopilot ${midDot()} Ctrl+C exit`;
+  const compact = cols < 60;
 
-  // 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;
+  // The banner is the first <Static> item so it prints once at the very top and
+  // scrolls away with history; completed transcript items follow it. Ink flushes
+  // each <Static> item to the terminal's normal buffer exactly once, leaving the
+  // native scrollback intact so earlier conversation can be scrolled back to.
+  const staticItems = [{ type: 'banner', id: `banner-${clearEpoch}` }, ...items];
 
   return html`
-    <${Box} flexDirection="column" width=${cols} height=${rows}>
-      <${Box} flexShrink=${0} flexDirection="column" alignItems="center">
-        <${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} busy=${busy} />
-              ${showReasoning && live.reasoning ? html`<${Reasoning} text=${live.reasoning} />` : null}
-              ${live.reply?.steps ? html`<${Plan} reply=${live.reply} live=${true} />` : null}
-              ${live.text ? html`<${Box} marginTop=${1}><${AssistantMessage} text=${live.text} /><//>` : null}
-              <${Thinking} label=${live.reply ? 'Planning' : live.text ? 'Responding' : 'Working'} startedAt=${startedAt} />
+    <${Box} flexDirection="column" width=${cols}>
+      <${Static} key=${clearEpoch} items=${staticItems}>
+        ${(it) => it.type === 'banner'
+          ? html`<${Box} key=${it.id} flexDirection="column" alignItems="center" marginBottom=${1}>
+              <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${compact} />
             <//>`
-          : null}
+          : renderItem(it)}
       <//>
 
-      <${Box} flexShrink=${0} flexDirection="column">
+      ${live
+        ? html`<${Box} flexDirection="column">
+            <${StatusLines} lines=${live.status} busy=${busy} />
+            ${showReasoning && live.reasoning ? html`<${Reasoning} text=${live.reasoning} />` : null}
+            ${live.reply?.steps ? html`<${Plan} reply=${live.reply} live=${true} />` : null}
+            ${live.text ? html`<${Box} marginTop=${1}><${AssistantMessage} text=${live.text} /><//>` : null}
+            <${Thinking} label=${live.reply ? 'Planning' : live.text ? 'Responding' : 'Working'} startedAt=${startedAt} />
+          <//>`
+        : null}
+
+      <${Box} flexDirection="column" marginTop=${1}>
         ${choice
           ? html`<${Choice} ...${choice} />`
           : html`<${Composer} onSubmit=${onSubmit} busy=${busy} width=${cols} />`}

package/src/tui/components.js

@@ -82,24 +82,22 @@ export function AssistantMessage({ text }) {
     <//>`;
 }
 
-/** Classify a server progress/status line into an icon + tone. */
-function classify(line) {
-  const l = String(line).toLowerCase();
-  if (/unreachable|skip|fail|error|denied|timeout|down\b|offline/.test(l)) return { icon: glyphs.cross, color: C.red };
-  if (/done|success|found|complet|online|ready|free\b|ok\b|\bup\b/.test(l)) return { icon: glyphs.check, color: C.green };
-  if (/assign|sub.?agent|fleet|parallel|dispatch|spawn/.test(l)) return { icon: glyphs.ring, color: C.magenta };
-  if (/probe|reachab|ping/.test(l)) return { icon: glyphs.target, color: C.yellow };
-  if (/connect|ssh|telnet|api|session|running|exec|command/.test(l)) return { icon: glyphs.arrow, color: C.accent };
-  return { icon: glyphs.bullet, color: C.gray };
-}
-
 // A sub-agent progress line, e.g. "✓ [1/3] nas#1: FREE" or "[2/3] olt#1: down".
 const SUBAGENT = /^\s*[✓✗x]?\s*\[(\d+)\/(\d+)\]\s*(.+?)\s*[:：]\s*(.+?)\s*$/;
 
-/** Live server activity — tool calls and sub-agents happening backend-side. */
+// A leading emoji/pictograph on a tool status label (from statusLabel()).
+const LEAD_EMOJI = /^\s*([\u{1F000}-\u{1FAFF}\u{2600}-\u{27BF}\u{2B00}-\u{2BFF}\u{2190}-\u{21FF}\u{FE0F}\u{2049}\u{203C}]+)\s*/u;
+
+/**
+ * Live server activity — tool calls and sub-agents, rendered Copilot-CLI style:
+ * each activity gets a status marker (spinner while it's the in-flight step,
+ * green check once done), the tool's purpose label is kept, and sub-agent
+ * progress is nested underneath its parent as a tree.
+ */
 export function StatusLines({ lines = [], busy = false }) {
   if (!lines.length) return null;
   const subLines = lines.filter((l) => SUBAGENT.test(l));
+  const lastIdx = lines.length - 1;
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
       ${lines.map((line, i) => {
@@ -112,21 +110,33 @@ export function StatusLines({ lines = [], busy = false }) {
           const branch = Number(idx) === Number(total) ? glyphs.branchEnd : glyphs.branchMid;
           return html`
             <${Box} key=${'s' + i}>
+              <${Text} color=${C.gray}>  <//>
               <${Text} color=${C.magenta}>${branch} <//>
               <${Text} color=${C.gray}>${idx}/${total} <//>
               <${Text} color=${C.white} bold>${host}<//>
               <${Text} color=${C.gray}> ${dash()} <//>
               ${running
-                ? html`<${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>`
+                ? html`<${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /> working<//>`
                 : html`<${Text} color=${good ? C.green : C.red} bold>${good ? glyphs.check : glyphs.cross} ${result}<//>`}
             <//>`;
         }
-        const { icon, color } = classify(line);
-        const clean = String(line).replace(/^[\s◈◆●○◎⇢→>*✓✗×!⚠·-]+/u, '').trimStart() || String(line);
+
+        // Tool / activity line. The last line while busy is the in-flight step.
+        const running = busy && i === lastIdx;
+        const em = String(line).match(LEAD_EMOJI);
+        const body = em ? String(line).slice(em[0].length) : String(line).replace(/^[\s◈◆●○◎⇢→>*✓✗×!⚠·-]+/u, '');
+        const ci = body.indexOf(':');
+        const action = ci > -1 ? body.slice(0, ci) : body;
+        const detail = ci > -1 ? body.slice(ci + 1).trim() : '';
         return html`
           <${Box} key=${'s' + i}>
-            <${Text} color=${color}>${icon}<//>
-            <${Text} color=${C.gray}> ${clean}<//>
+            ${running
+              ? html`<${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>`
+              : html`<${Text} color=${C.green}>${glyphs.check}<//>`}
+            <${Text}> <//>
+            ${em ? html`<${Text}>${em[1]} <//>` : null}
+            <${Text} color=${running ? C.white : C.gray} bold=${running}>${action}<//>
+            ${detail ? html`<${Text} color=${C.gray}>: ${detail}<//>` : null}
           <//>`;
       })}
     <//>`;

package/src/tui/run.js

@@ -1,22 +1,15 @@
-// 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.
+// Ink render entrypoint. Runs the TUI INLINE in the normal terminal buffer
+// (like GitHub Copilot CLI) — NOT the alternate screen — so the banner prints
+// once at the top and scrolls away, and the terminal's native scrollback keeps
+// the full conversation history. Completed transcript items are flushed to the
+// scrollback by Ink's <Static>; only the live area + input re-render in place.
 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}
@@ -24,21 +17,11 @@ export async function runTui(cfg, opts = {}) {
       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');
-  }
+  await instance.waitUntilExit();
 
   return externalAction;
 }