ispbills-icli 8.4.12 → 8.4.13

package/src/tui/components.js

@@ -1,8 +1,8 @@
 // Presentational components for the iCli Ink TUI.
-import { html, useState, useEffect, useRef, useCallback } from './dom.js';
+import { html, useState, useEffect } from './dom.js';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
-import { C, SG, glyphs, spinnerType, borderStyle, midDot, dash, asciiSafe } from './theme.js';
+import { C, glyphs, spinnerType, borderStyle, midDot, dash } from './theme.js';
 import { Markdown } from './markdown.js';
 import { shortModel } from '../ui.js';
 
@@ -15,26 +15,13 @@ 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, version = '', cwd = '' }) {
+export function Banner({ cfg = {}, model, width = 80, compact = false }) {
   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],
-    version ? ['v', version] : null,
-    cwd     ? ['cwd', cwd]   : null,
-  ].filter(Boolean).filter(([, v]) => v);
+    ['model', m], ['user', cfg.user?.name], ['role', cfg.user?.role],
+  ].filter(([, v]) => v);
 
   if (compact) {
     return html`
@@ -43,42 +30,28 @@ export function Banner({ cfg = {}, model, width = 80, compact = false, version =
         ${meta.map(([label, val], i) => html`
           <${Box} key=${'m' + i}>
             <${Text} color=${C.gray}>${midDot()}<//>
-            <${Text} color=${label === 'model' ? C.cyan : label === 'v' ? C.gray : C.white}>${val}<//>
+            <${Text} color=${label === 'model' ? C.cyan : C.white}>${val}<//>
           <//>`)}
       <//>`;
   }
 
   return html`
-    <${Box} flexDirection="column" marginBottom=${0} alignItems="center">
+    <${Box} flexDirection="column" marginBottom=${1} alignItems="center">
       ${wide
         ? html`<${Box} flexDirection="column" alignItems="center">
             ${LOGO.map((l, i) => html`<${Text} key=${'l' + i} color=${C.accent} bold>${l}<//>`)}
-            <${Text} dimColor>iCopilot ${dash()} network engineer in your terminal<//>
+            <${Text} color=${C.gray}>iCopilot ${dash()} network engineer in your terminal<//>
           <//>`
         : html`<${Text} color=${C.accent} bold>iCopilot ${html`<${Text} color=${C.gray}>${dash()} IspBills AI terminal<//>`}<//>`}
       <${Box} marginTop=${1}>
         ${meta.map(([label, val], i) => html`
           <${Box} key=${'m' + i}>
             ${i > 0 ? html`<${Text} color=${C.gray}>${midDot()}<//>` : null}
-            <${Text} dimColor>${label} <//>
-            <${Text} color=${
-              label === 'model' ? C.cyan :
-              label === 'v'     ? C.gray :
-              label === 'cwd'   ? C.yellow :
-              C.white}>${val}<//>
+            <${Text} color=${C.gray}>${label} <//>
+            <${Text} color=${label === 'model' ? C.cyan : C.white}>${val}<//>
           <//>`)}
       <//>
-      ${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} />
-      <//>
+      ${cfg.url ? html`<${Text} color=${C.gray}>${cfg.url}<//>` : null}
     <//>`;
 }
 
@@ -95,20 +68,17 @@ function withMentions(text, base = C.white) {
 /** The user's prompt line. */
 export function UserMessage({ text }) {
   return html`
-    <${Box} marginTop=${1} marginBottom=${0}>
+    <${Box} marginTop=${1}>
       <${Text} color=${C.accent} bold>${glyphs.prompt} <//>
-      <${Box} flexShrink=${1}>
-        <${Text} bold>${withMentions(text)}<//>
-      <//>
+      <${Text}>${withMentions(text)}<//>
     <//>`;
 }
 
-/** A finished assistant answer (markdown). Optionally shows a streaming cursor. */
-export function AssistantMessage({ text, streaming = false }) {
+/** A finished assistant answer (markdown). */
+export function AssistantMessage({ text }) {
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
       <${Markdown} content=${text} />
-      ${streaming ? html`<${Text} color="cyan">▌<//>`  : null}
     <//>`;
 }
 
@@ -118,248 +88,101 @@ 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;
-
-/**
- * Group consecutive SUBAGENT lines under their preceding tool line.
- * Returns [{ tool: string|null, subagents: string[] }]
- */
-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} 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=${'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}<//>` }
-          <//>`;
-      })}
-    <//>`;
-}
-
-/**
- * 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.
+ * 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 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;
-
+  const subLines = lines.filter((l) => SUBAGENT.test(l));
+  const lastIdx = lines.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);
+    <${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() : '';
+        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}
+          <//>`;
       })}
     <//>`;
 }
 
-/** Reasoning / thinking trace (shown by default; toggle with Ctrl+T). */
+/** Reasoning 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.magenta}
-            borderTop=${false} borderRight=${false} borderBottom=${false} paddingLeft=${1}>
-      <${Text} color=${C.magenta} bold>◆ Thinking<//>
-      <${Text} dimColor italic>${text}<//>
+    <${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}<//>
     <//>`;
 }
 
 /** A proposed remediation plan. */
 export function Plan({ reply = {}, live = false }) {
   const steps = reply.steps || [];
-  const riskCount = steps.filter((s) => /destruct|high/i.test(s.risk || '')).length;
+  const dot3 = '…';
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
-      <${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}
+      <${Text} color=${C.accent} bold>${glyphs.diamond} Plan<//>
+      ${reply.summary ? html`<${Text} color=${C.gray}>${reply.summary}<//>` : null}
       ${steps.map((s, i) => {
         const last = i === steps.length - 1;
         const risk = (s.risk === 'destructive' || s.risk === 'high')
-          ? html`<${Text} key="r" color=${C.red}> ${glyphs.warn} destructive<//>`
+          ? html`<${Text} color=${C.red}> ${glyphs.warn} destructive<//>`
           : (s.risk === 'caution' || s.risk === 'medium')
-          ? html`<${Text} key="r" color=${C.yellow}> ${glyphs.bolt} caution<//>` : null;
+          ? html`<${Text} color=${C.yellow}> ${glyphs.bolt} caution<//>` : null;
         return html`
           <${Box} flexDirection="column" key=${'p' + i}>
-            <${Box} key="cmd">
-              <${Text} dimColor>${last ? glyphs.branchEnd : glyphs.branchMid} <//>
-              <${Text} dimColor>${i + 1}. <//>
-              <${Text} color=${C.yellow} bold>${s.cmd || ''}<//>
+            <${Box}>
+              <${Text} color=${C.gray}>${last ? glyphs.branchEnd : glyphs.branchMid} <//>
+              <${Text} color=${C.gray}>${i + 1}. <//>
+              <${Text} color=${C.yellow}>${s.cmd || ''}<//>
               ${risk}
-              ${s.blocked ? html`<${Text} key="blk" color=${C.red}> ${glyphs.block} blocked<//>` : null}
+              ${s.blocked ? html`<${Text} color=${C.red}> ${glyphs.block} blocked<//>` : null}
             <//>
-            ${(s.why || s.purpose) ? html`<${Text} key="why" dimColor>     ${s.why || s.purpose}<//>` : null}
+            ${(s.why || s.purpose) ? html`<${Text} color=${C.gray}>     ${s.why || s.purpose}<//>` : null}
           <//>`;
       })}
-      <${Box} key="foot" marginTop=${1}>
+      <${Box} marginTop=${1}>
         ${live
-          ? 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.<//>` }
+          ? 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.<//>`}
       <//>
     <//>`;
 }
@@ -378,34 +201,24 @@ export function Connect({ reply = {} }) {
     <//>`;
 }
 
-/** A local notice (help hint, errors, etc.). Handles multi-line text. */
+/** A local notice (help hint, errors, etc.). */
 export function Notice({ text, color = C.gray }) {
-  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}<//>` )}
-    <//>`;
+  return html`<${Box} marginTop=${1}><${Text} color=${color}>${text}<//><//>`;
 }
 
-/**
- * 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 }) {
+/** The active "working" line — animated spinner, elapsed time, cancel hint. */
+export function Thinking({ label = 'Working', 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} dimColor>${timeStr ? ` (${timeStr})` : ''} · esc to cancel<//>
+      <${Text} color=${C.accent} bold> ${label}<//>
+      <${Text} color=${C.gray}>… (${secs}s ${midDot()}esc to interrupt)<//>
     <//>`;
 }
 
@@ -418,7 +231,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} dimColor>${note}<//>` : null}
+      ${note ? html`<${Text} color=${C.gray}>${note}<//>` : null}
       <${Box} flexDirection="column" marginTop=${title || note ? 1 : 0}>
         ${options.map((o, i) => {
           const on = !focusText && i === sel;
@@ -428,330 +241,19 @@ 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} dimColor> ${dash()} ${o.hint}<//>` : null}
+              ${o.hint ? html`<${Text} color=${C.gray}> ${dash()} ${o.hint}<//>` : null}
             <//>`;
         })}
         ${allowText
           ? html`<${Box} key="freetext">
               <${Text} color=${focusText ? C.accent : C.gray}>${focusText ? glyphs.prompt + ' ' : '  '}<//>
-              <${Text} dimColor>${text ? '' : 'Type a custom answer…'}<//>
+              <${Text} color=${C.gray}>${text ? '' : 'Type a custom answer…'}<//>
               <${Text} color=${C.white}>${text}<//>${focusText ? html`<${Text} inverse> <//>` : null}
             <//>`
           : null}
       <//>
       <${Box} marginTop=${1}>
-        <${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}
-    <//>`;
-}
-
-// ── Tab bar ──────────────────────────────────────────────────────────────────
-// GitHub Copilot CLI-style tab bar pinned above the content area.
-// Tabs are keyboard-accessible via Ctrl+1/2/3/4 (wired in app.js).
-
-/**
- * Top-of-screen tab bar: Session | Monitoring | Issues | Gists
- * Active tab rendered with accent underline + bold; inactive tabs are dimmed.
- * The separator rule beneath uses the brand accent colour.
- */
-export function TabBar({ tabs = [], active = 0, onSelect, width = 80 }) {
-  const A = asciiSafe();
-  const sep = A ? '-' : '─';
-  return html`
-    <${Box} flexDirection="column" width=${width}>
-      <${Box} flexDirection="row" paddingX=${1} paddingTop=${0}>
-        ${tabs.map((label, i) => {
-          const on = i === active;
-          return html`
-            <${Box} key=${'tab' + i} marginRight=${2}>
-              <${Text}
-                color=${on ? C.accent : C.gray}
-                bold=${on}
-                dimColor=${!on}
-                underline=${on}
-              >${on ? glyphs.prompt + ' ' : '  '}${label}<//><//>`;
-        })}
-        <${Box} flexGrow=${1}>
-          <${Text} dimColor>  click or Ctrl+${tabs.map((_, i) => i + 1).join('/')}<//><//>
-      <//>
-      <${Text} color=${C.accent} dimColor>${sep.repeat(Math.max(8, width - 2))}<//>
-    <//>`;
-}
-
-// ── Monitoring tab ────────────────────────────────────────────────────────────
-
-/**
- * Auto-fetch /api/v2/monitoring/devices and /api/v2/monitoring/status-checks.
- * Refreshes every 30 seconds.
- */
-export function MonitoringView({ cfg }) {
-  const [data, setData] = useState(null);  // { devices, checks }
-  const [loading, setLoading] = useState(true);
-  const [err, setErr] = useState(null);
-  const [lastAt, setLastAt] = useState(null);
-  const timerRef = useRef(null);
-
-  const fetch_ = useCallback(async () => {
-    if (!cfg?.url || !cfg?.token) {
-      setErr('No server configured. Run icli login first.');
-      setLoading(false);
-      return;
-    }
-    try {
-      const headers = { Authorization: `Bearer ${cfg.token}`, Accept: 'application/json' };
-      const [devRes, chkRes] = await Promise.all([
-        fetch(`${cfg.url}/api/v2/monitoring/devices`, { headers }).catch(() => null),
-        fetch(`${cfg.url}/api/v2/monitoring/status-checks`, { headers }).catch(() => null),
-      ]);
-      const devices = devRes?.ok ? ((await devRes.json()).data || []) : [];
-      const checks  = chkRes?.ok ? ((await chkRes.json()).data || []) : [];
-      setData({ devices, checks });
-      setErr(null);
-    } catch (e) {
-      setErr(e.message || 'Fetch failed');
-    } finally {
-      setLoading(false);
-      setLastAt(new Date().toLocaleTimeString());
-    }
-  }, [cfg]);
-
-  useEffect(() => {
-    fetch_();
-    timerRef.current = setInterval(fetch_, 30000);
-    return () => clearInterval(timerRef.current);
-  }, [fetch_]);
-
-  if (loading) return html`
-    <${Box} marginTop=${2} paddingX=${2}>
-      <${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>
-      <${Text} color=${C.gray}> Fetching device status…<//>
-    <//>`;
-
-  if (err) return html`
-    <${Box} marginTop=${2} paddingX=${2} flexDirection="column">
-      <${Text} color=${C.red}>${glyphs.cross} Monitoring error: ${err}<//>
-      <${Text} dimColor>Make sure the server is reachable and you are logged in.<//>
-    <//>`;
-
-  const { devices = [], checks = [] } = data || {};
-  const devUp   = devices.filter((d) => String(d.status).toLowerCase() === 'up' || d.status === 1).length;
-  const devDown = devices.length - devUp;
-  const chkOk   = checks.filter((c) => c.latest_result?.status === 'up').length;
-  const chkFail = checks.filter((c) => c.latest_result?.status !== 'up' && c.latest_result).length;
-
-  return html`
-    <${Box} flexDirection="column" paddingX=${2} marginTop=${1}>
-      <${Box} marginBottom=${1}>
-        <${Text} color=${C.accent} bold>Network Monitoring<//>
-        ${lastAt ? html`<${Text} dimColor>  · refreshes every 30s · last: ${lastAt}<//>` : null}
-      <//>
-
-      ${/* ── Device summary ── */ null}
-      <${Box} marginBottom=${1} flexDirection="row" gap=${3}>
-        <${Box} flexDirection="column">
-          <${Text} dimColor>Managed Devices<//>
-          <${Box}>
-            <${Text} color=${C.green} bold>${devUp}<//>
-            <${Text} color=${C.gray}> up  <//>
-            <${Text} color=${devDown > 0 ? C.red : C.gray} bold=${devDown > 0}>${devDown}<//>
-            <${Text} color=${C.gray}> down<//>
-          <//>
-        <//>
-        <${Box} flexDirection="column">
-          <${Text} dimColor>Status Checks<//>
-          <${Box}>
-            <${Text} color=${C.green} bold>${chkOk}<//>
-            <${Text} color=${C.gray}> ok  <//>
-            <${Text} color=${chkFail > 0 ? C.red : C.gray} bold=${chkFail > 0}>${chkFail}<//>
-            <${Text} color=${C.gray}> fail<//>
-          <//>
-        <//>
-      <//>
-
-      ${/* ── Down devices ── */ null}
-      ${devDown > 0
-        ? html`<${Box} flexDirection="column" marginBottom=${1}>
-            <${Text} color=${C.red} bold>${glyphs.warn} Down devices<//>
-            ${devices.filter((d) => String(d.status).toLowerCase() !== 'up' && d.status !== 1).slice(0, 10).map((d, i) =>
-              html`<${Box} key=${'dd' + i}>
-                <${Text} color=${C.red}>  ${glyphs.cross} <//>
-                <${Text} color=${C.white}>${d.name || d.ip_address}<//>
-                <${Text} dimColor>  ${d.device_type || ''}  ${d.ip_address}<//>
-              <//>` )}
-          <//>` : null}
-
-      ${/* ── Failed checks ── */ null}
-      ${chkFail > 0
-        ? html`<${Box} flexDirection="column">
-            <${Text} color=${C.yellow} bold>${glyphs.warn} Failed checks<//>
-            ${checks.filter((c) => c.latest_result?.status !== 'up' && c.latest_result).slice(0, 10).map((c, i) =>
-              html`<${Box} key=${'cf' + i}>
-                <${Text} color=${C.yellow}>  ${glyphs.warn} <//>
-                <${Text} color=${C.white}>${c.name}<//>
-                <${Text} dimColor>  ${c.target || ''}  ${c.latest_result?.status || 'unknown'}<//>
-              <//>` )}
-          <//>` : null}
-
-      ${devDown === 0 && chkFail === 0
-        ? html`<${Box}><${Text} color=${C.green}>${glyphs.check} All devices and checks are up<//>  <//>`
-        : null}
-
-      <${Box} marginTop=${1}>
-        <${Text} dimColor>Switch to Session tab (Ctrl+1) · type /check in Session for details<//>
-      <//>
-    <//>`;
-}
-
-// ── Issues tab ────────────────────────────────────────────────────────────────
-
-/**
- * Shows AI-flagged issues collected during the current session.
- * Issues are populated by app.js whenever the AI notices an error/alarm.
- */
-export function IssuesView({ issues = [] }) {
-  if (!issues.length) return html`
-    <${Box} flexDirection="column" paddingX=${2} marginTop=${2}>
-      <${Text} color=${C.accent} bold>Issues<//>
-      <${Box} marginTop=${1}>
-        <${Text} dimColor>${glyphs.bullet} No issues flagged in this session.<//>
-      <//>
-      <${Box} marginTop=${1}>
-        <${Text} dimColor>Run /alarms or /check in the Session tab to detect problems.<//>
-      <//>
-    <//>`;
-
-  return html`
-    <${Box} flexDirection="column" paddingX=${2} marginTop=${1}>
-      <${Text} color=${C.accent} bold>Issues  <${Text} dimColor>(${issues.length} flagged this session)<//><//>
-      <${Box} flexDirection="column" marginTop=${1}>
-        ${issues.slice().reverse().slice(0, 20).map((iss, i) => html`
-          <${Box} key=${'iss' + i} flexDirection="column" marginBottom=${1}>
-            <${Box}>
-              <${Text} color=${iss.severity === 'high' ? C.red : iss.severity === 'medium' ? C.yellow : C.gray}
-              >${iss.severity === 'high' ? glyphs.cross : glyphs.warn} <//>
-              <${Text} color=${C.white} bold>${iss.title}<//>
-              <${Text} dimColor>  ${iss.ts || ''}<//>
-            <//>
-            ${iss.body ? html`<${Text} dimColor>  ${iss.body.slice(0, 120)}<//>` : null}
-          <//>` )}
-      <//>
-    <//>`;
-}
-
-// ── Gists tab ─────────────────────────────────────────────────────────────────
-
-/**
- * Lists GitHub gists created with /gist during this session or stored locally.
- * If no GitHub token is set, shows instructions.
- */
-export function GistsView({ cfg }) {
-  const [gists, setGists] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [err, setErr] = useState(null);
-
-  useEffect(() => {
-    const token = cfg?.github_token;
-    if (!token) {
-      setLoading(false);
-      return;
-    }
-    fetch('https://api.github.com/gists?per_page=20', {
-      headers: { Authorization: `token ${token}`, Accept: 'application/vnd.github.v3+json' },
-    })
-      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
-      .then((data) => {
-        const icliGists = Array.isArray(data)
-          ? data.filter((g) => (g.description || '').startsWith('[icli]') || (g.description || '').includes('iCopilot'))
-          : [];
-        setGists(icliGists.length ? icliGists : data.slice(0, 10));
-      })
-      .catch((e) => setErr(e.message))
-      .finally(() => setLoading(false));
-  }, [cfg?.github_token]);
-
-  if (!cfg?.github_token) return html`
-    <${Box} flexDirection="column" paddingX=${2} marginTop=${2}>
-      <${Text} color=${C.accent} bold>Gists<//>
-      <${Box} marginTop=${1} flexDirection="column">
-        <${Text} dimColor>No GitHub token configured.<//>
-        <${Text} dimColor>Run: ${''}<//>
-        <${Text} color=${C.cyan}>  /gist token YOUR_TOKEN<//>
-        <${Text} dimColor>Then use ${''}<//>
-        <${Text} color=${C.cyan}>  /gist<//>
-        <${Text} dimColor> in Session to save AI answers as secret gists.<//>
-      <//>
-    <//>`;
-
-  if (loading) return html`
-    <${Box} paddingX=${2} marginTop=${2}>
-      <${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>
-      <${Text} color=${C.gray}> Loading gists…<//>
-    <//>`;
-
-  if (err) return html`
-    <${Box} paddingX=${2} marginTop=${2} flexDirection="column">
-      <${Text} color=${C.red}>${glyphs.cross} GitHub error: ${err}<//>
-    <//>`;
-
-  if (!gists.length) return html`
-    <${Box} paddingX=${2} marginTop=${2} flexDirection="column">
-      <${Text} color=${C.accent} bold>Gists<//>
-      <${Box} marginTop=${1}><${Text} dimColor>No gists yet. Use /gist in Session to save an answer.<//>  <//><//>
-    <//>`;
-
-  return html`
-    <${Box} flexDirection="column" paddingX=${2} marginTop=${1}>
-      <${Text} color=${C.accent} bold>Gists  <${Text} dimColor>(${gists.length} recent)<//><//>
-      <${Box} flexDirection="column" marginTop=${1}>
-        ${gists.slice(0, 15).map((g, i) => {
-          const fname = Object.keys(g.files || {})[0] || 'unknown';
-          const desc  = (g.description || fname).slice(0, 60);
-          const date  = g.updated_at ? g.updated_at.slice(0, 10) : '';
-          return html`
-            <${Box} key=${'g' + i} marginBottom=${0}>
-              <${Text} color=${C.cyan}>${glyphs.bullet} <//>
-              <${Text} color=${C.white}>${desc}<//>
-              <${Text} dimColor>  ${date}<//>
-            <//>
-            <${Box} key=${'gu' + i}>
-              <${Text} dimColor>  ${g.html_url || ''}<//>
-            <//>`;
-        })}
+        <${Text} color=${C.gray}>${glyphs.up}${glyphs.down} choose ${midDot()}${allowText ? 'Tab type ' + midDot() : ''}Enter confirm ${midDot()}Esc dismiss<//>
       <//>
     <//>`;
 }