ispbills-icli 8.4.2 → 8.4.5

package/bin/icli.js

@@ -315,7 +315,7 @@ async function main() {
   // 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 });
+    const action = await runTui(cfg, { display, version: pkgVersion() });
     if (action === 'logout') {
       const cleared = clearConfig();
       console.log(`\n  ${cleared ? GREEN + glyphs.check + RESET + ' Logged out — credentials cleared.' : YELLOW + 'Already logged out.' + RESET}`);

package/package.json

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

package/src/banner.js

@@ -22,6 +22,7 @@ const LOGO_WIDTH = Math.max(...LOGO.map((l) => l.length));
 export function printBanner(cfg = {}, opts = {}) {
   const width = cols();
   const model = opts.model || cfg._model || 'IspBills AI';
+  const version = opts.version || '';
 
   console.log();
   if (width >= LOGO_WIDTH) {
@@ -36,10 +37,11 @@ export function printBanner(cfg = {}, opts = {}) {
   parts.push(`${DIM}model${RESET} ${CYAN}${shortModel(model)}${RESET}`);
   if (cfg.user?.name) parts.push(`${DIM}user${RESET} ${WHITE}${cfg.user.name}${RESET}`);
   if (cfg.user?.role) parts.push(`${DIM}role${RESET} ${WHITE}${cfg.user.role}${RESET}`);
+  if (version) parts.push(`${DIM}v${RESET} ${WHITE}${version}${RESET}`);
   console.log('  ' + parts.join(`  ${GRAY}·${RESET}  `));
   if (cfg.url) console.log(`  ${DIM}url${RESET}   ${ACCENT}${cfg.url}${RESET}`);
   console.log();
-  console.log(`  ${DIM}Type a message to start.  ${RESET}${ACCENT}/help${RESET}${DIM} for commands  ·  ${RESET}${ACCENT}Ctrl+C${RESET}${DIM} to exit${RESET}`);
+  console.log(`  ${DIM}Type a message to start.  ${RESET}${ACCENT}/help${RESET}${DIM} for commands  ·  ${RESET}${ACCENT}!cmd${RESET}${DIM} to run shell  ·  ${RESET}${ACCENT}Ctrl+C${RESET}${DIM} to exit${RESET}`);
   console.log();
   hr();
   console.log();

package/src/commands.js

@@ -52,6 +52,7 @@ export const SLASH_COMMANDS = [
   { cmd: '/copy',       hint: '',            desc: 'Copy the last AI answer to the clipboard', group: 'Memory', local: true },
 
   // ── Session & app ──
+  { cmd: '/usage',      hint: '',            desc: 'Show conversation stats (turns, ~tokens, model)', group: 'Session', local: true },
   { cmd: '/autopilot',  hint: '',            desc: 'Toggle autopilot (auto-apply fixes)',     group: 'Session', local: true },
   { cmd: '/model',      hint: '[name]',      desc: 'Show or set the AI model',                group: 'Session', local: true },
   { cmd: '/reasoning',  hint: '',            desc: 'Toggle reasoning display (Ctrl+T)',       group: 'Session', local: true },

package/src/shell.js

@@ -0,0 +1,18 @@
+import { exec } from 'child_process';
+
+/**
+ * Run a shell command and capture combined stdout/stderr.
+ * Returns { ok, stdout, stderr, exitCode }.
+ */
+export function runShell(cmd, timeout = 30_000) {
+  return new Promise((resolve) => {
+    exec(cmd, { timeout, maxBuffer: 512 * 1024, shell: true }, (err, stdout, stderr) => {
+      resolve({
+        ok: !err || err.code === 0,
+        stdout: (stdout || '').trim(),
+        stderr: (stderr || '').trim(),
+        exitCode: err?.code ?? 0,
+      });
+    });
+  });
+}

package/src/tui/app.js

@@ -8,7 +8,7 @@ import { Box, Text, Static, useStdout, useApp, useInput } from 'ink';
 import { C, glyphs, midDot, dash } from './theme.js';
 import {
   Banner, UserMessage, AssistantMessage, StatusLines, Reasoning,
-  Plan, Connect, Notice, Thinking, Choice,
+  Plan, Connect, Notice, Thinking, Choice, ShellInput, ShellOut,
 } from './components.js';
 import { Composer } from './composer.js';
 import { streamChat } from '../client.js';
@@ -19,6 +19,11 @@ import { loadNotes, addNote, forgetNote, memoryPreamble } from '../memory.js';
 import { copyToClipboard } from '../clipboard.js';
 import { createGist } from '../gist.js';
 import { git as gitCmd, commitBackup } from '../gitrepo.js';
+import { runShell } from '../shell.js';
+import { basename } from 'path';
+
+// CWD basename — computed once at startup (before any cd).
+const APP_CWD = basename(process.cwd());
 
 // Split a command argument string into argv, honouring "quoted" segments.
 function splitArgs(s) {
@@ -47,7 +52,7 @@ function useTerminalSize() {
 let itemId = 0;
 const nextId = () => ++itemId;
 
-export function App({ cfg, display = {}, onExternal, onExit, initialQuestion }) {
+export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, version = '' }) {
   const { exit } = useApp();
   const { cols, rows } = useTerminalSize();
 
@@ -241,6 +246,22 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
     if (!q) return;
     setHint('');
 
+    // ── ! shell command execution (GitHub Copilot CLI parity) ──────────────
+    if (q.startsWith('!')) {
+      const cmd = q.slice(1).trim();
+      if (!cmd) return;
+      push({ type: 'shell_in', cmd });
+      log(`$ ${cmd}`);
+      runShell(cmd).then((result) => {
+        const out = [result.stdout, result.stderr].filter(Boolean).join('\n').trim();
+        push({ type: 'shell_out', ok: result.ok, output: out || `(exit code ${result.exitCode})` });
+        if (out) log(out);
+      }).catch((e) => {
+        push({ type: 'notice', text: `${glyphs.cross} Shell error: ${e.message}`, color: C.red });
+      });
+      return;
+    }
+
     if (q === '/exit' || q === 'exit' || q === 'quit') { doExit(); return; }
     if (q === '/clear') { clearAll(); return; }
     if (q === '/new') {
@@ -290,6 +311,23 @@ export function App({ cfg, display = {}, onExternal, onExit, 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 === '/usage') {
+      const total = convo.current.length;
+      const userTurns = convo.current.filter((m) => m.role === 'user').length;
+      const chars = convo.current.reduce((acc, m) => acc + m.content.length, 0);
+      const approxTokens = Math.round(chars / 4);
+      const lines = [
+        `Conversation stats:`,
+        `  turns       ${userTurns}`,
+        `  messages    ${total}`,
+        `  ~tokens     ${approxTokens.toLocaleString()} (estimated)`,
+        `  ~chars      ${chars.toLocaleString()}`,
+        `  model       ${model || cfg._model || 'server default'}`,
+        `  cwd         ${APP_CWD}`,
+      ];
+      push({ type: 'notice', text: lines.join('\n'), color: C.cyan });
+      return;
+    }
     if (q === '/logout') { onExternal?.('logout'); doExit(); return; }
     if (q === '/update') { onExternal?.('update'); doExit(); return; }
 
@@ -454,13 +492,21 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       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} />`;
+      case 'shell_in': return html`<${ShellInput} key=${it.id} cmd=${it.cmd} />`;
+      case 'shell_out': return html`<${ShellOut} key=${it.id} ok=${it.ok} output=${it.output} />`;
       default: return null;
     }
   };
 
-  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 ctx = [model ? shortModel(model) : null, APP_CWD, cfg.user?.name, cfg.user?.role].filter(Boolean).join(midDot());
+  // Footer: left = session context (dimmed), right = hint or key-hints.
+  // Autopilot mode turns the right side yellow.
+  const footerHint = hint
+    ? hint
+    : autopilot
+    ? `${glyphs.bolt} autopilot ON${midDot()}/help${midDot()}Shift+Tab off${midDot()}Ctrl+C exit`
+    : `/help${midDot()}Shift+Tab autopilot${midDot()}Ctrl+C exit`;
+  const footerColor = hint ? C.yellow : autopilot ? C.yellow : void 0;
   const compact = cols < 60;
 
   // The banner is the first <Static> item so it prints once at the very top and
@@ -474,7 +520,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
       <${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} />
+              <${Banner} cfg=${cfg} model=${model} width=${cols} compact=${compact} version=${version} cwd=${APP_CWD} />
             <//>`
           : renderItem(it)}
       <//>
@@ -484,8 +530,15 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
             <${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} />
+            ${live.text
+              ? html`<${Box} marginTop=${live.status.length ? 0 : 1}>
+                  <${AssistantMessage} text=${live.text} streaming=${true} />
+                <//>` : null}
+            ${!live.text && !live.reply?.steps
+              ? html`<${Thinking}
+                  label=${live.status.length ? 'Working' : 'Thinking'}
+                  startedAt=${startedAt} />`
+              : null}
           <//>`
         : null}
 
@@ -494,8 +547,10 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion })
           ? html`<${Choice} ...${choice} />`
           : html`<${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 || autopilot ? C.yellow : C.gray} wrap="truncate-end">${footerRight}<//>
+          <${Box} flexGrow=${1}>
+            <${Text} dimColor wrap="truncate-end">${ctx}<//>
+          <//>
+          <${Text} color=${footerColor} dimColor=${!footerColor} wrap="truncate-end">${footerHint}<//>
         <//>
       <//>
     <//>`;

package/src/tui/components.js

@@ -2,7 +2,7 @@
 import { html, useState, useEffect } from './dom.js';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
-import { C, glyphs, spinnerType, borderStyle, midDot, dash } from './theme.js';
+import { C, SG, glyphs, spinnerType, borderStyle, midDot, dash, asciiSafe } from './theme.js';
 import { Markdown } from './markdown.js';
 import { shortModel } from '../ui.js';
 
@@ -15,13 +15,26 @@ const LOGO = [
   '╚═╝ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝ ╚═════╝    ╚═╝   ',
 ];
 
+// Width of the widest logo line (used for the separator beneath).
+const LOGO_WIDTH = Math.max(...LOGO.map((l) => l.length));
+
+/** Thin separator that spans the full logo width (or less on narrow terminals). */
+function LogoRule({ width }) {
+  const w = Math.min(width, LOGO_WIDTH + 4);
+  return html`<${Text} dimColor>${(asciiSafe() ? '-' : '─').repeat(Math.max(8, w))}<//>`;
+}
+
 /** Header banner — full logo on wide/tall terminals, compact title otherwise. */
-export function Banner({ cfg = {}, model, width = 80, compact = false }) {
+export function Banner({ cfg = {}, model, width = 80, compact = false, version = '', cwd = '' }) {
   const m = shortModel(model || cfg._model || 'IspBills AI');
   const wide = !compact && width >= 60;
   const meta = [
-    ['model', m], ['user', cfg.user?.name], ['role', cfg.user?.role],
-  ].filter(([, v]) => v);
+    ['model', m],
+    ['user', cfg.user?.name],
+    ['role', cfg.user?.role],
+    version ? ['v', version] : null,
+    cwd     ? ['cwd', cwd]   : null,
+  ].filter(Boolean).filter(([, v]) => v);
 
   if (compact) {
     return html`
@@ -30,28 +43,42 @@ export function Banner({ cfg = {}, model, width = 80, compact = false }) {
         ${meta.map(([label, val], i) => html`
           <${Box} key=${'m' + i}>
             <${Text} color=${C.gray}>${midDot()}<//>
-            <${Text} color=${label === 'model' ? C.cyan : C.white}>${val}<//>
+            <${Text} color=${label === 'model' ? C.cyan : label === 'v' ? C.gray : C.white}>${val}<//>
           <//>`)}
       <//>`;
   }
 
   return html`
-    <${Box} flexDirection="column" marginBottom=${1} alignItems="center">
+    <${Box} flexDirection="column" marginBottom=${0} alignItems="center">
       ${wide
         ? html`<${Box} flexDirection="column" alignItems="center">
             ${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<//>
+            <${Text} dimColor>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}<//>
+            <${Text} dimColor>${label} <//>
+            <${Text} color=${
+              label === 'model' ? C.cyan :
+              label === 'v'     ? C.gray :
+              label === 'cwd'   ? C.yellow :
+              C.white}>${val}<//>
           <//>`)}
       <//>
-      ${cfg.url ? html`<${Text} color=${C.gray}>${cfg.url}<//>` : null}
+      ${cfg.url ? html`<${Box} marginTop=${0}><${Text} dimColor>${cfg.url}<//>` : null}
+      <${Box} marginTop=${1}>
+        <${Text} dimColor>Type a message${midDot()}<//>
+        <${Text} color=${C.accent}>/help<//>
+        <${Text} dimColor> for commands${midDot()}<//>
+        <${Text} color=${C.orange}>!<//>
+        <${Text} dimColor> to run shell<//>
+      <//>
+      <${Box} marginTop=${1}>
+        <${LogoRule} width=${width} />
+      <//>
     <//>`;
 }
 
@@ -68,17 +95,20 @@ function withMentions(text, base = C.white) {
 /** The user's prompt line. */
 export function UserMessage({ text }) {
   return html`
-    <${Box} marginTop=${1}>
+    <${Box} marginTop=${1} marginBottom=${0}>
       <${Text} color=${C.accent} bold>${glyphs.prompt} <//>
-      <${Text}>${withMentions(text)}<//>
+      <${Box} flexShrink=${1}>
+        <${Text} bold>${withMentions(text)}<//>
+      <//>
     <//>`;
 }
 
-/** A finished assistant answer (markdown). */
-export function AssistantMessage({ text }) {
+/** A finished assistant answer (markdown). Optionally shows a streaming cursor. */
+export function AssistantMessage({ text, streaming = false }) {
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
       <${Markdown} content=${text} />
+      ${streaming ? html`<${Text} color="cyan">▌<//>`  : null}
     <//>`;
 }
 
@@ -88,101 +118,248 @@ const SUBAGENT = /^\s*[✓✗x]?\s*\[(\d+)\/(\d+)\]\s*(.+?)\s*[:：]\s*(.+?)\s*$
 // 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;
 
+// Max tool-groups shown before collapsing older ones (GitHub Copilot CLI style).
+const MAX_VISIBLE_GROUPS = 5;
+
+// Max sub-agent rows per group before collapsing earlier agents.
+const MAX_SUBAGENT_ROWS = 8;
+
 /**
- * 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.
+ * Group consecutive SUBAGENT lines under their preceding tool line.
+ * Returns [{ tool: string|null, subagents: string[] }]
  */
-export function StatusLines({ lines = [], busy = false }) {
-  if (!lines.length) return null;
-  const subLines = lines.filter((l) => SUBAGENT.test(l));
-  const lastIdx = lines.length - 1;
+function groupStatusLines(lines) {
+  const groups = [];
+  let cur = null;
+  for (const line of lines) {
+    if (SUBAGENT.test(String(line))) {
+      if (!cur) { cur = { tool: null, subagents: [] }; groups.push(cur); }
+      cur.subagents.push(line);
+    } else {
+      cur = { tool: String(line), subagents: [] };
+      groups.push(cur);
+    }
+  }
+  return groups;
+}
+
+/**
+ * Parse a tool status string into { em, action, detail }.
+ * Strips leading emoji/glyphs and splits on the first ':'.
+ */
+function parseTool(line) {
+  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(':');
+  return {
+    em: em ? em[1] : null,
+    action: ci > -1 ? body.slice(0, ci).trim() : body.trim(),
+    detail: ci > -1 ? body.slice(ci + 1).trim() : '',
+  };
+}
+
+/**
+ * Render a single tool activity line.
+ * running=true → accent spinner + white bold text.
+ * done → dim ● + dim text (GitHub Copilot CLI completed-step style).
+ * extraLabel → appended dim text (used for sub-agent progress badge "(N/M)").
+ */
+function toolLine(line, running, gi, extraLabel) {
+  const { em, action, detail } = parseTool(line);
   return html`
-    <${Box} flexDirection="column" marginTop=${1}>
-      ${lines.map((line, i) => {
-        const sm = String(line).match(SUBAGENT);
-        if (sm) {
-          const [, idx, total, host, result] = sm;
-          const good = !/fail|error|down|offline|unreachable|timeout|deny/i.test(result);
-          const isLast = subLines[subLines.length - 1] === line;
-          const running = busy && isLast && Number(idx) < Number(total);
-          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()} /> working<//>`
-                : html`<${Text} color=${good ? C.green : C.red} bold>${good ? glyphs.check : glyphs.cross} ${result}<//>`}
-            <//>`;
-        }
-
-        // 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() : '';
+    <${Box} key=${'tl' + gi}>
+      ${running
+        ? html`<${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>`
+        : html`<${Text} dimColor>${SG.filled}<//>` }
+      <${Text}> <//>
+      ${em ? html`<${Text}>${em} <//>` : null}
+      <${Text} color=${running ? C.white : void 0} dimColor=${!running} bold=${running}>${action}<//>
+      ${detail
+        ? html`<${Text} dimColor>: <//>
+                 <${Text} dimColor>${detail}<//>` : null}
+      ${extraLabel ? html`<${Text} dimColor>  ${extraLabel}<//>` : null}
+    <//>`;
+}
+
+/**
+ * Render a group that has sub-agent rows nested inside it.
+ *
+ * GitHub Copilot CLI fleet/sub-agent style:
+ *  ● spawn_subagent: fleet check  (8/8)          ← parent tool, progress badge
+ *    ├─  1/8  olt#1       ✓  5 ONUs online        ← completed OK  (dim)
+ *    ├─  2/8  nas#2       ✗  unreachable          ← completed ERR (dim red)
+ *    │   3/8  router#1   ⠙  checking…            ← in-flight     (│ pipe)
+ *    └─  4/8  switch#1    ✓  all OK               ← last done     (└─)
+ */
+function subagentGroup(group, groupRunning, gi) {
+  const { tool, subagents } = group;
+
+  // Cap visible sub-agents — collapse older ones to "N earlier agents".
+  const visibleSubs = subagents.slice(-MAX_SUBAGENT_ROWS);
+  const hiddenSubs = subagents.length - visibleSubs.length;
+
+  // Determine total from last sub-agent line.
+  const lastSm = SUBAGENT.exec(visibleSubs[visibleSubs.length - 1] || '');
+  const total = lastSm ? Number(lastSm[2]) : subagents.length;
+
+  // Count completed agents for progress badge.
+  const doneCount = subagents.filter(l => {
+    const m = SUBAGENT.exec(l);
+    return m && !/checking|running|pending/i.test(m[4]);
+  }).length;
+
+  // Is the last visible sub-agent still running?
+  const lastVisIdx = visibleSubs.length - 1;
+  const lastSmCheck = SUBAGENT.exec(visibleSubs[lastVisIdx] || '');
+  const lastRunning = groupRunning && lastSmCheck
+    ? Number(lastSmCheck[1]) < Number(lastSmCheck[2])
+    : groupRunning;
+
+  // Progress badge on parent: "(3/8)" while running, "(8/8 done)" when complete.
+  const badge = lastRunning
+    ? `(${doneCount}/${total})`
+    : `(${total}/${total} ${glyphs.check})`;
+
+  // Column-pad host names within this group for alignment.
+  const hosts = visibleSubs.map(l => (SUBAGENT.exec(l)?.[3] || '').trim());
+  const padW = Math.min(Math.max(...hosts.map(h => h.length), 6), 20);
+
+  // Width for idx/total fraction display (right-align idx).
+  const totLen = String(total).length;
+
+  return html`
+    <${Box} key=${'sg' + gi} flexDirection="column">
+      ${tool ? toolLine(tool, groupRunning && lastRunning, gi, badge) : null}
+      ${hiddenSubs > 0
+        ? html`<${Box} key="hid">
+            <${Text} dimColor>  ${glyphs.vbar}   <//>
+            <${Text} dimColor>${glyphs.bullet} ${hiddenSubs} earlier agent${hiddenSubs > 1 ? 's' : ''} ${dash()} collapsed<//>
+          <//>` : null}
+      ${visibleSubs.map((line, si) => {
+        const sm = SUBAGENT.exec(line);
+        if (!sm) return null;
+        const [, idx, tot, host, result] = sm;
+        const good = !/fail|error|down|offline|unreachable|timeout|deny/i.test(result);
+        const isLast = si === lastVisIdx;
+        const isRunning = groupRunning && isLast && Number(idx) < Number(tot);
+
+        // Tree marker: │ (pipe) for in-flight, └─ for last done, ├─ for others.
+        const isFinalEntry = Number(idx) === Number(tot) || (isLast && !isRunning);
+        const branch = isRunning
+          ? glyphs.vbar + '  '                               // "│  " in-flight
+          : (isFinalEntry ? glyphs.branchEnd + ' ' : glyphs.branchMid + ' '); // "└─ " or "├─ "
+
+        // Right-align idx within the fraction, e.g. " 3/8" vs "12/12".
+        const frac = String(idx).padStart(totLen) + '/' + tot;
+        const hostPad = host.padEnd(padW);
+
         return html`
-          <${Box} key=${'s' + i}>
-            ${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}
+          <${Box} key=${'sa' + si}>
+            <${Text} color=${isRunning ? C.accent : void 0} dimColor=${!isRunning}>  ${branch}<//>
+            <${Text} color=${isRunning ? C.cyan : void 0} dimColor=${!isRunning}>${frac} <//>
+            <${Text} color=${isRunning ? C.white : void 0} dimColor=${!isRunning}>${hostPad} <//>
+            ${isRunning
+              ? html`<${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>
+                       <${Text} color=${C.accent}> checking…<//>` 
+              : html`<${Text} color=${good ? C.green : C.red} dimColor> ${good ? glyphs.check : glyphs.cross}<//>
+                       <${Text} color=${good ? C.green : C.red} dimColor> ${result}<//>` }
           <//>`;
       })}
     <//>`;
 }
 
-/** Reasoning trace (shown by default; toggle with Ctrl+T). */
+/**
+ * Live server activity — tool calls and sub-agents, rendered Copilot-CLI style.
+ *
+ * Tool groups are the primary unit: each tool line is rendered with a spinner
+ * (in-flight) or dim ● (done). Sub-agent blocks are nested tree-style under
+ * their parent tool with ├─/└─/│ markers, padded columns, and a progress
+ * badge on the parent line — matching GitHub Copilot CLI fleet/sub-agent UI.
+ *
+ * Old groups collapse to a summary count so the live area stays compact.
+ */
+export function StatusLines({ lines = [], busy = false }) {
+  if (!lines.length) return null;
+
+  const groups = groupStatusLines(lines);
+
+  // Collapse old groups — keep last MAX_VISIBLE_GROUPS.
+  const hiddenGroupCount = groups.length > MAX_VISIBLE_GROUPS
+    ? groups.length - MAX_VISIBLE_GROUPS : 0;
+  const visibleGroups = groups.slice(hiddenGroupCount);
+
+  // Total lines in hidden groups (for the summary count).
+  const hiddenLineCount = groups
+    .slice(0, hiddenGroupCount)
+    .reduce((acc, g) => acc + 1 + g.subagents.length, 0);
+
+  const lastGi = visibleGroups.length - 1;
+
+  return html`
+    <${Box} flexDirection="column" marginTop=${0}>
+      ${hiddenLineCount > 0
+        ? html`<${Box} key="coll">
+            <${Text} dimColor>${SG.filled} ${hiddenLineCount} earlier step${hiddenLineCount > 1 ? 's' : ''} ${dash()} collapsed<//>
+          <//>` : null}
+      ${visibleGroups.map((g, gi) => {
+        const isLast = gi === lastGi;
+        const groupRunning = busy && isLast;
+        if (g.subagents.length > 0) return subagentGroup(g, groupRunning, gi);
+        return toolLine(g.tool || '', groupRunning, gi, null);
+      })}
+    <//>`;
+}
+
+/** Reasoning / thinking trace (shown by default; toggle with Ctrl+T). */
 export function Reasoning({ text }) {
   if (!text) return null;
   return html`
-    <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.gray}
-           borderTop=${false} borderRight=${false} borderBottom=${false} paddingLeft=${1}>
-      <${Text} color=${C.magenta}>${glyphs.reasoning} ${html`<${Text} color=${C.gray} bold>Reasoning<//>`}<//>
-      <${Text} color=${C.gray} italic>${text}<//>
+    <${Box} flexDirection="column" marginTop=${1}
+            borderStyle=${borderStyle()} borderColor=${C.magenta}
+            borderTop=${false} borderRight=${false} borderBottom=${false} paddingLeft=${1}>
+      <${Text} color=${C.magenta} bold>◆ Thinking<//>
+      <${Text} dimColor italic>${text}<//>
     <//>`;
 }
 
 /** A proposed remediation plan. */
 export function Plan({ reply = {}, live = false }) {
   const steps = reply.steps || [];
-  const dot3 = '…';
+  const riskCount = steps.filter((s) => /destruct|high/i.test(s.risk || '')).length;
   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}
+      <${Box} key="hdr">
+        <${Text} color=${C.accent} bold>${glyphs.diamond} Plan<//>
+        ${reply.summary ? html`<${Text} key="sum" dimColor>  ${dash()}  ${reply.summary}<//>` : null}
+      <//>
+      ${riskCount > 0
+        ? html`<${Text} key="risk" color=${C.red}>${glyphs.warn} ${riskCount} destructive step${riskCount > 1 ? 's' : ''} — review carefully<//>` : 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<//>`
+          ? html`<${Text} key="r" color=${C.red}> ${glyphs.warn} destructive<//>`
           : (s.risk === 'caution' || s.risk === 'medium')
-          ? html`<${Text} color=${C.yellow}> ${glyphs.bolt} caution<//>` : null;
+          ? html`<${Text} key="r" 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 || ''}<//>
+            <${Box} key="cmd">
+              <${Text} dimColor>${last ? glyphs.branchEnd : glyphs.branchMid} <//>
+              <${Text} dimColor>${i + 1}. <//>
+              <${Text} color=${C.yellow} bold>${s.cmd || ''}<//>
               ${risk}
-              ${s.blocked ? html`<${Text} color=${C.red}> ${glyphs.block} blocked<//>` : null}
+              ${s.blocked ? html`<${Text} key="blk" color=${C.red}> ${glyphs.block} blocked<//>` : null}
             <//>
-            ${(s.why || s.purpose) ? html`<${Text} color=${C.gray}>     ${s.why || s.purpose}<//>` : null}
+            ${(s.why || s.purpose) ? html`<${Text} key="why" dimColor>     ${s.why || s.purpose}<//>` : null}
           <//>`;
       })}
-      <${Box} marginTop=${1}>
+      <${Box} key="foot" marginTop=${1}>
         ${live
-          ? html`<${Text} color=${C.gray} italic>${glyphs.bullet} forming plan${dot3}<//>`
-          : html`<${Text} color=${C.gray}>Type ${html`<${Text} color=${C.white}>apply fix<//>`} to confirm.<//>`}
+          ? html`<${Text} key="lv" dimColor italic>${glyphs.bullet} forming plan…<//>`
+          : html`<${Text} key="cf" dimColor>Type <//>
+                   <${Text} key="cf2" color=${C.white}>apply fix<//>
+                   <${Text} key="cf3" dimColor> to confirm, or choose below.<//>` }
       <//>
     <//>`;
 }
@@ -201,24 +378,34 @@ export function Connect({ reply = {} }) {
     <//>`;
 }
 
-/** A local notice (help hint, errors, etc.). */
+/** A local notice (help hint, errors, etc.). Handles multi-line text. */
 export function Notice({ text, color = C.gray }) {
-  return html`<${Box} marginTop=${1}><${Text} color=${color}>${text}<//><//>`;
+  const lines = String(text).split('\n');
+  return html`
+    <${Box} marginTop=${1} flexDirection="column">
+      ${lines.map((ln, i) => html`<${Text} key=${'n' + i} color=${color}>${ln}<//>` )}
+    <//>`;
 }
 
-/** The active "working" line — animated spinner, elapsed time, cancel hint. */
-export function Thinking({ label = 'Working', startedAt }) {
+/**
+ * The active "working" line — animated spinner, elapsed time, cancel hint.
+ * label: 'Thinking' when waiting for AI, 'Working' when tools are active.
+ */
+export function Thinking({ label = 'Thinking', startedAt }) {
   const [, tick] = useState(0);
   useEffect(() => {
     const id = setInterval(() => tick((n) => n + 1), 1000);
     return () => clearInterval(id);
   }, []);
   const secs = startedAt ? Math.max(0, Math.round((Date.now() - startedAt) / 1000)) : 0;
+  const timeStr = secs >= 60
+    ? `${Math.floor(secs / 60)}m ${secs % 60}s`
+    : secs > 0 ? `${secs}s` : '';
   return html`
     <${Box} marginTop=${1}>
       <${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>
-      <${Text} color=${C.accent} bold> ${label}<//>
-      <${Text} color=${C.gray}>… (${secs}s ${midDot()}esc to interrupt)<//>
+      <${Text} color=${C.accent} bold> ${label}…<//>
+      <${Text} dimColor>${timeStr ? ` (${timeStr})` : ''} · esc to cancel<//>
     <//>`;
 }
 
@@ -231,7 +418,7 @@ export function Choice({ title, note, options = [], sel = 0, allowText = false,
   return html`
     <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.accent} paddingX=${1}>
       ${title ? html`<${Text} color=${C.accent} bold>${glyphs.diamond} ${title}<//>` : null}
-      ${note ? html`<${Text} color=${C.gray}>${note}<//>` : null}
+      ${note ? html`<${Text} dimColor>${note}<//>` : null}
       <${Box} flexDirection="column" marginTop=${title || note ? 1 : 0}>
         ${options.map((o, i) => {
           const on = !focusText && i === sel;
@@ -241,19 +428,54 @@ export function Choice({ title, note, options = [], sel = 0, allowText = false,
             <${Box} key=${'o' + i}>
               <${Text} color=${on ? C.accent : C.gray}>${on ? glyphs.prompt + ' ' : '  '}<//>
               <${Text} color=${tone} bold=${on}>${label}<//>
-              ${o.hint ? html`<${Text} color=${C.gray}> ${dash()} ${o.hint}<//>` : null}
+              ${o.hint ? html`<${Text} dimColor> ${dash()} ${o.hint}<//>` : null}
             <//>`;
         })}
         ${allowText
           ? html`<${Box} key="freetext">
               <${Text} color=${focusText ? C.accent : C.gray}>${focusText ? glyphs.prompt + ' ' : '  '}<//>
-              <${Text} color=${C.gray}>${text ? '' : 'Type a custom answer…'}<//>
+              <${Text} dimColor>${text ? '' : 'Type a custom answer…'}<//>
               <${Text} color=${C.white}>${text}<//>${focusText ? html`<${Text} inverse> <//>` : null}
             <//>`
           : null}
       <//>
       <${Box} marginTop=${1}>
-        <${Text} color=${C.gray}>${glyphs.up}${glyphs.down} choose ${midDot()}${allowText ? 'Tab type ' + midDot() : ''}Enter confirm ${midDot()}Esc dismiss<//>
+        <${Text} dimColor>${glyphs.up}${glyphs.down} navigate${allowText ? ' · Tab type' : ''} · Enter confirm · Esc dismiss<//>
+      <//>
+    <//>`;
+}
+
+/**
+ * Shell command prompt line — shown in history when the user runs a ! command.
+ * Renders as a yellow $ prompt with the command text, matching GitHub Copilot
+ * CLI's visual treatment of direct shell commands.
+ */
+export function ShellInput({ cmd }) {
+  return html`
+    <${Box} marginTop=${1} marginBottom=${0}>
+      <${Text} color=${C.orange} bold>$ <//>
+      <${Box} flexShrink=${1}>
+        <${Text} color=${C.white} bold>${cmd}<//>
       <//>
     <//>`;
 }
+
+/**
+ * Shell command output — shown below a ShellInput.  Uses a left border to
+ * visually group the output with the command.  Long outputs are capped at
+ * 80 lines to keep the terminal readable.
+ */
+export function ShellOut({ ok, output = '' }) {
+  const lines = output.split('\n');
+  const capped = lines.slice(0, 80);
+  const more = lines.length - capped.length;
+  return html`
+    <${Box} flexDirection="column" marginTop=${0}
+            borderStyle="single" borderColor=${ok ? C.gray : C.red}
+            borderTop=${false} borderRight=${false} borderBottom=${false}
+            paddingLeft=${1}>
+      ${capped.map((l, i) => html`<${Text} key=${'so' + i} color=${ok ? C.white : C.red}>${l || ' '}<//>` )}
+      ${more > 0
+        ? html`<${Text} dimColor>${glyphs.bullet} ${more} more line${more > 1 ? 's' : ''} hidden<//>` : null}
+    <//>`;
+}

package/src/tui/composer.js

@@ -40,6 +40,9 @@ export function Composer({ onSubmit, busy, width = 80 }) {
     lastMut.current = kind;
   };
 
+  // Ctrl+S stash: save the current prompt to restore later (GitHub Copilot CLI parity).
+  const stashRef = useRef('');
+
   // Bracketed-paste assembly. A right-click / Cmd+V paste is wrapped by the
   // terminal in \x1b[200~ … \x1b[201~ and can arrive split across several
   // reads, so we buffer until the end marker before inserting.
@@ -143,6 +146,18 @@ export function Composer({ onSubmit, busy, width = 80 }) {
       return;
     }
 
+    // ── Ctrl+S: stash / pop prompt (GitHub Copilot CLI parity) ──
+    if (key.ctrl && input === 's') {
+      if (value) {
+        stashRef.current = value;
+        setValue(''); setCursor(0);
+      } else if (stashRef.current) {
+        const v = stashRef.current; stashRef.current = '';
+        setText(v, v.length);
+      }
+      return;
+    }
+
     // ── Menu / history navigation ──
     if (key.upArrow) {
       if (menuOpen) { setSel((i) => Math.max(0, i - 1)); return; }
@@ -215,6 +230,15 @@ export function Composer({ onSubmit, busy, width = 80 }) {
   const sugTok = menuOpen && matches[sel] ? (slashMode ? matches[sel].cmd : matches[sel].tag) : '';
   const ghost = sugTok && sugTok.startsWith(token) && cursor >= value.length ? sugTok.slice(token.length) : '';
 
+  // ── Shell mode: prefix '!' triggers yellow $ prompt + orange border ──
+  const shellMode = value.startsWith('!') && !menuOpen;
+  const borderColor = busy ? C.gray : shellMode ? C.orange : C.accent;
+  const promptGlyph = shellMode ? '$ ' : glyphs.prompt + ' ';
+  const promptColor = busy ? C.gray : shellMode ? C.orange : C.accent;
+
+  // Number of lines in the buffer (for the line-count badge).
+  const lineCount = value.split('\n').length;
+
   return html`
     <${Box} flexDirection="column" width=${width}>
       ${menuOpen
@@ -240,16 +264,18 @@ export function Composer({ onSubmit, busy, width = 80 }) {
           <//>`
         : null}
 
-      <${Box} width=${width} borderStyle=${borderStyle()} borderColor=${busy ? C.gray : C.accent} paddingX=${1}>
-        <${Text} color=${busy ? C.gray : C.accent}>${glyphs.prompt} <//>
+      <${Box} width=${width} borderStyle=${borderStyle()} borderColor=${borderColor} paddingX=${1}>
+        <${Text} color=${promptColor}>${promptGlyph}<//>
         ${empty
           ? html`<${Box} flexGrow=${1}>
               <${Text} color=${C.gray} inverse> <//>
-              <${Text} color=${C.gray}>${busy ? 'Working…' : 'Ask about your network, or type / for commands'}<//>
+              <${Text} color=${C.gray}>${busy ? 'Working…' : 'How can I help with your network?  · /help · ! shell'}<//>
             <//>`
           : html`<${Box} flexGrow=${1}>
               <${Text}>${before}<//><${Text} inverse>${at}<//><${Text}>${after}<//><${Text} color=${C.gray}>${ghost}<//>
             <//>`}
+        ${lineCount > 1
+          ? html`<${Text} dimColor> ${lineCount}L<//>` : null}
       <//>
     <//>`;
 }

package/src/tui/markdown.js

@@ -90,14 +90,30 @@ function renderTable(header, rows) {
 export function Markdown({ content = '' }) {
   const rows = [];
   let inCode = false;
+  let codeLines = [];
   const lines = String(content).replace(/\s+$/, '').split('\n');
 
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i].replace(/\t/g, '  ');
 
-    // Fenced code block.
-    if (line.trim().startsWith('```')) { inCode = !inCode; continue; }
-    if (inCode) { rows.push(html`<${Text} key=${k()} color=${C.green}>  ${line}<//>`); continue; }
+    // Fenced code block — collect all lines then render as a left-bordered block.
+    if (line.trim().startsWith('```')) {
+      if (!inCode) {
+        inCode = true;
+        codeLines = [];
+      } else {
+        inCode = false;
+        const captured = codeLines;
+        rows.push(html`
+          <${Box} key=${k()} flexDirection="column" marginY=${1}
+            borderStyle=${asciiSafe() ? 'single' : 'single'} borderColor=${C.gray}
+            borderTop=${false} borderRight=${false} borderBottom=${false} paddingLeft=${1}>
+            ${captured.map((cl, ci) => html`<${Text} key=${k()} color=${C.green}>${cl}<//>` )}
+          <//>`);
+      }
+      continue;
+    }
+    if (inCode) { codeLines.push(line); continue; }
 
     // GFM table: header row + separator + body rows.
     if (isTableRow(line) && i + 1 < lines.length && isTableSep(lines[i + 1])) {

package/src/tui/run.js

@@ -8,7 +8,7 @@ import { render } from 'ink';
 import { App } from './app.js';
 
 export async function runTui(cfg, opts = {}) {
-  const { display = {}, onExternal, initialQuestion } = opts;
+  const { display = {}, onExternal, initialQuestion, version = '' } = opts;
   let externalAction;
 
   const instance = render(
@@ -16,6 +16,7 @@ export async function runTui(cfg, opts = {}) {
       cfg=${cfg}
       display=${display}
       initialQuestion=${initialQuestion}
+      version=${version}
       onExternal=${(a) => { externalAction = a; onExternal?.(a); }}
     />`,
     { exitOnCtrlC: false },

package/src/tui/theme.js

@@ -5,18 +5,36 @@ import { glyphs, asciiSafe } from '../ui.js';
 
 export { glyphs, asciiSafe };
 
-// Soft-blue brand accent (approx. xterm-256 colour 111).
+// Soft-blue brand accent (approx. xterm-256 colour 111) — matches Copilot CLI.
 export const ACCENT = '#87afff';
+
+// Semantic color palette. Where possible mirror Copilot CLI conventions:
+// - accent/cyan for interactive / in-flight elements
+// - green for success / completed
+// - red for errors / destructive
+// - yellow for warnings / caution / autopilot
+// - magenta for reasoning/thinking
+// - gray / dimColor for secondary / completed-dim text
 export const C = {
-  accent: ACCENT,
-  gray: 'gray',
-  white: 'white',
-  cyan: 'cyan',
-  green: 'green',
-  yellow: 'yellow',
-  red: 'red',
+  accent:  ACCENT,
+  gray:    'gray',
+  white:   'white',
+  cyan:    'cyan',
+  green:   'green',
+  yellow:  'yellow',
+  red:     'red',
   magenta: 'magenta',
-  blue: 'blue',
+  blue:    'blue',
+  orange:  '#ffb86c',  // shell mode / caution
+  purple:  '#d097ff',  // sub-agent / agent role
+};
+
+// Copilot-style task status glyphs (Unicode only; fall back handled per use-site).
+// ● filled  = step completed   ◐ half = step in-progress   ○ empty = pending
+export const SG = {
+  filled:  '●',   // U+25CF  completed
+  half:    '◐',   // U+25D0  in-progress (used alongside spinner)
+  empty:   '○',   // U+25CB  pending
 };
 
 // ink-spinner uses cli-spinners; 'line' is pure ASCII (|/-\), 'dots' is braille.
@@ -30,9 +48,9 @@ export function borderStyle() {
   return asciiSafe() ? 'single' : 'round';
 }
 
-// Middle-dot separator, ASCII-safe on classic Windows consoles.
+// Middle-dot separator.  Copilot CLI uses a single space each side.
 export function midDot() {
-  return asciiSafe() ? ' - ' : '  ·  ';
+  return asciiSafe() ? ' - ' : ' · ';
 }
 
 // Em-dash, ASCII-safe on classic Windows consoles.