ispbills-icli 8.5.2 → 8.5.4

package/src/tui/components.js

@@ -15,9 +15,45 @@ const LOGO = [
   '╚═╝ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝ ╚═════╝    ╚═╝   ',
 ];
 
+const HELP_ROWS = [
+  ['Shift+Tab', 'cycle ask / plan / autopilot'],
+  ['Ctrl+S', 'run while preserving input'],
+  ['Ctrl+Enter / Ctrl+Q', 'queue follow-up while busy'],
+  ['Ctrl+G', 'edit prompt in external editor'],
+  ['Ctrl+F', 'search timeline'],
+  ['Ctrl+O / Ctrl+E', 'expand recent / all timeline items'],
+  ['Ctrl+T', 'toggle reasoning'],
+  ['Ctrl+R', 'reverse-search input history'],
+  ['Ctrl+V', 'paste attachment help'],
+  ['Ctrl+Z', 'suspend to background'],
+  ['!', 'shell command / shell mode'],
+  ['?', 'quick help overlay'],
+  ['@mention', 'insert ISP entities'],
+  ['#123', 'reference customer / ticket id'],
+];
+
+function formatTs(ts) {
+  if (!ts) return '';
+  try {
+    return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return '';
+  }
+}
+
+function SpeakerLine({ label, color, cols = 80, ts, rightLabel = '' }) {
+  const stamp = ts ? `[${formatTs(ts)}]` : '';
+  return html`
+    <${Box} paddingX=${2} marginTop=${1} width=${cols}>
+      <${Text} color=${color} bold>${label}<//>
+      <${Box} flexGrow=${1} />
+      ${rightLabel ? html`<${Text} color=${C.muted}>${rightLabel}<//>` : null}
+      ${rightLabel && stamp ? html`<${Text} color=${C.muted}> <//>` : null}
+      ${stamp ? html`<${Text} color=${C.muted}>${stamp}<//>` : null}
+    <//>`;
+}
+
 // ── Tab Bar ─────────────────────────────────────────────────────────────────
-// Matches the June 2026 Copilot CLI GA redesign: deep-blue track, active tab
-// wrapped in [brackets], inactive tabs dimmed. Adapted for ISP NOC context.
 const TABS = [
   { id: 'session',   label: 'Session'   },
   { id: 'devices',   label: 'Devices'   },
@@ -25,25 +61,28 @@ const TABS = [
   { id: 'alarms',    label: 'Alarms'    },
 ];
 
-export function TabBar({ active = 'session', cols = 80, onSwitch }) {
+export function TabBar({ active = 'session', cols = 80, mode = 'ask' }) {
+  const modeBadge = mode !== 'ask'
+    ? ` ${mode === 'autopilot' ? '⚡ AUTO' : mode === 'shell' ? '⌘ SHELL' : '📋 PLAN'}`
+    : '';
   return html`
-    <${Box} width=${cols} paddingX=${1} backgroundColor="#0D1117">
-      ${TABS.map((t, i) => {
-        const on = t.id === active;
-        return html`
-          <${Box} key=${t.id}>
-            ${i > 0 ? html`<${Text} color=${C.muted}>   <//>` : null}
-            ${on
-              ? html`<${Text} color="white" bold>[${t.label}]<//>`
-              : html`<${Text} color=${C.muted}>${t.label}<//>`}
-          <//>`;
-      })}
+    <${Box} width=${cols} backgroundColor="blue">
+      <${Box} paddingX=${1} flexGrow=${1}>
+        ${TABS.map((t, i) => {
+          const on = t.id === active;
+          return html`
+            <${Box} key=${t.id}>
+              ${i > 0 ? html`<${Text} color="cyan" backgroundColor="blue">   <//>` : null}
+              ${on
+                ? html`<${Text} color="white" bold backgroundColor="blue">[${t.label}]<//>`
+                : html`<${Text} color="cyan" backgroundColor="blue">${t.label}<//>`}
+            <//>`;
+        })}
+      <//>
+      ${modeBadge ? html`<${Box} paddingRight=${1}><${Text} color="yellow" bold backgroundColor="blue">${modeBadge}<//><//>` : null}
     <//>`;
 }
 
-// ── Followup Chips ────────────────────────────────────────────────────────────
-// Up to 4 suggested followup actions shown above the input after a response.
-// Ctrl+N/P cycles; ↵ on empty input submits active; Esc clears.
 export function FollowupChips({ chips = [], active = 0 }) {
   if (!chips.length) return null;
   return html`
@@ -61,12 +100,11 @@ export function FollowupChips({ chips = [], active = 0 }) {
     <//>`;
 }
 
-/** 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, streamerMode = 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],
+    ['model', streamerMode ? 'hidden' : m], ['user', cfg.user?.name], ['role', cfg.user?.role],
   ].filter(([, v]) => v);
 
   if (compact) {
@@ -101,62 +139,64 @@ export function Banner({ cfg = {}, model, width = 80, compact = false }) {
     <//>`;
 }
 
-/** Split text into spans, colouring @mentions. */
 function withMentions(text, base = C.white) {
-  const parts = String(text).split(/(@[\w:.\-/]+)/g);
+  const parts = String(text).split(/(@[\w:.\-/]+|#\d+)/g);
   return parts.map((p, i) =>
     /^@[\w:.\-/]+$/.test(p)
       ? html`<${Text} key=${'mn' + i} color=${C.accent} bold>${p}<//>`
+      : /^#\d+$/.test(p)
+      ? html`<${Text} key=${'mn' + i} color=${C.slash} bold>${p}<//>`
       : html`<${Text} key=${'mn' + i} color=${base}>${p}<//>`,
   );
 }
 
-// Full-width separator line, drawn in muted separator colour.
 function Sep({ cols = 80 }) {
-  return html`<${Text} color=${C.separator}>${'─'.repeat(Math.max(1, cols))}<//>`;
+  return html`<${Text} color=${C.separator}>${'-'.repeat(Math.max(1, cols))}<//>`;
 }
 
-/** The user's prompt block — separator + "You" label + text. */
-export function UserMessage({ text, cols = 80 }) {
+export function UserMessage({ text, cols = 80, ts }) {
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
       <${Sep} cols=${cols} />
-      <${Box} paddingX=${2} marginTop=${1}>
-        <${Text} color=${C.brand} bold>You<//>
-      <//>
+      <${SpeakerLine} label="You" color=${C.brand} cols=${cols} ts=${ts} />
       <${Box} paddingX=${2}>
         <${Text}>${withMentions(text)}<//>
       <//>
     <//>`;
 }
 
-/** A finished assistant answer — separator + "⬡ iCopilot" label + markdown. */
-export function AssistantMessage({ text, cols = 80 }) {
-  const dot = glyphs.copilotDot;
+export function AssistantMessage({ text, cols = 80, ts, label = `${glyphs.copilotDot} iCopilot` }) {
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
       <${Sep} cols=${cols} />
-      <${Box} paddingX=${2} marginTop=${1}>
-        <${Text} color=${C.accent} bold>${dot} iCopilot<//>
-      <//>
+      <${SpeakerLine} label=${label} color=${C.accent} cols=${cols} ts=${ts} />
       <${Box} paddingX=${2}>
         <${Markdown} content=${text} />
       <//>
     <//>`;
 }
 
-// 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*$/;
+export function ShellOutput({ command, output, cols = 80, ts, code = 0 }) {
+  return html`
+    <${Box} flexDirection="column" marginTop=${1}>
+      <${Sep} cols=${cols} />
+      <${SpeakerLine}
+        label="⌘ Shell"
+        color=${code === 0 ? C.warning : C.error}
+        cols=${cols}
+        ts=${ts}
+        rightLabel=${code === 0 ? '' : `exit ${code}`}
+      />
+      <${Box} paddingX=${2} flexDirection="column">
+        <${Text} color=${C.warning}>$ ${command}<//>
+        <${Text}>${output || '(no output)'}<//>
+      <//>
+    <//>`;
+}
 
-// A leading emoji/pictograph on a tool status label (from statusLabel()).
+const SUBAGENT = /^\s*[✓✗x]?\s*\[(\d+)\/(\d+)\]\s*(.+?)\s*[:：]\s*(.+?)\s*$/;
 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));
@@ -184,7 +224,6 @@ export function StatusLines({ lines = [], busy = false }) {
             <//>`;
         }
 
-        // 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, '');
@@ -205,10 +244,8 @@ export function StatusLines({ lines = [], busy = false }) {
     <//>`;
 }
 
-/** Reasoning trace — collapsed to a single dim line; Ctrl+T to expand. */
 export function Reasoning({ text, show = true }) {
   if (!text) return null;
-  // Estimate token count (~4 chars per token as rough heuristic)
   const tokenEst = Math.round(text.length / 4);
   if (!show) {
     return html`
@@ -223,7 +260,6 @@ export function Reasoning({ text, show = true }) {
     <//>`;
 }
 
-/** A proposed remediation plan. */
 export function Plan({ reply = {}, live = false }) {
   const steps = reply.steps || [];
   const dot3 = '…';
@@ -257,7 +293,6 @@ export function Plan({ reply = {}, live = false }) {
     <//>`;
 }
 
-/** A device-connect card. */
 export function Connect({ reply = {} }) {
   const d = reply.device ?? reply ?? {};
   return html`
@@ -271,12 +306,41 @@ export function Connect({ reply = {} }) {
     <//>`;
 }
 
-/** A local notice (help hint, errors, etc.). */
 export function Notice({ text, color = C.gray }) {
   return html`<${Box} marginTop=${1}><${Text} color=${color}>${text}<//><//>`;
 }
 
-/** The active "working" line — animated spinner (warning colour), elapsed time, cancel hint. */
+export function HelpOverlay({ cols = 80, ts }) {
+  return html`
+    <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.accent} paddingX=${1} width=${cols}>
+      <${SpeakerLine} label="? Help" color=${C.accent} cols=${Math.max(10, cols - 2)} ts=${ts} />
+      ${HELP_ROWS.map(([key, desc]) => html`
+        <${Box} key=${key} paddingX=${1}>
+          <${Text} color=${C.success} bold>${key.padEnd(22)}<//>
+          <${Text} color=${C.muted}>${desc}<//>
+        <//>`)}
+    <//>`;
+}
+
+export function SearchOverlay({ query = '', matches = [], active = 0, cols = 80 }) {
+  const snippetWidth = Math.max(12, cols - 20);
+  return html`
+    <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.accent} paddingX=${1} width=${cols}>
+      <${Text} color=${C.accent} bold>Search timeline<//>
+      <${Text} color=${C.muted}>query: <//><${Text} color=${C.white}>${query || 'type to search'}<//>
+      <${Text} color=${C.muted}>matches: ${matches.length}${matches.length ? `  active ${active + 1}/${matches.length}` : ''}<//>
+      ${matches.slice(0, 5).map((m, i) => {
+        const on = i === active;
+        return html`
+          <${Box} key=${m.id || i}>
+            <${Text} color=${on ? C.success : C.muted}>${on ? glyphs.prompt : ' '} <//>
+            <${Text} color=${on ? C.white : C.muted}>${String(m.preview || '').slice(0, snippetWidth)}<//>
+          <//>`;
+      })}
+      <${Text} color=${C.muted}>Enter expand  Tab/↑/↓ cycle  Esc close<//>
+    <//>`;
+}
+
 export function Thinking({ label = 'Working', startedAt }) {
   const [, tick] = useState(0);
   useEffect(() => {
@@ -292,11 +356,6 @@ export function Thinking({ label = 'Working', startedAt }) {
     <//>`;
 }
 
-/**
- * An interactive prompt — pick an option with ↑/↓ + Enter, or (when
- * `allowText`) type a free-form answer. Mirrors GitHub Copilot CLI prompts.
- * Presentational only: the parent owns `sel`/`textValue` and key handling.
- */
 export function Choice({ title, note, options = [], sel = 0, allowText = false, text = '', focusText = false }) {
   return html`
     <${Box} flexDirection="column" marginTop=${1} borderStyle=${borderStyle()} borderColor=${C.accent} paddingX=${1}>