ispbills-icli 8.7.5 → 8.7.7

package/package.json

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

package/src/tui/app.js

@@ -411,7 +411,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const [live, setLive] = useState(null);
   const [busy, setBusy] = useState(false);
   const [model, setModel] = useState(initialSession?.model || cfg._model);
-  const [showReasoning, setShowReasoning] = useState(false);
+  const [showReasoning, setShowReasoning] = useState(true);
   const [mode, setMode] = useState('ask');
   const [activeTab, setActiveTab] = useState('session');
   const [chips, setChips] = useState([]);
@@ -2099,6 +2099,9 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
 
   const tabPanel = activeTab !== 'session' ? TAB_CONTENT[activeTab] : null;
 
+  // ID of the last activity item — that one gets keyboard navigation (j/k + Enter to expand)
+  const lastActivityId = [...items].reverse().find((it) => it.type === 'activity')?.id ?? null;
+
   const renderItem = (it) => {
     const c = it.cols || 80;
     switch (it.type) {
@@ -2106,7 +2109,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       case 'assistant': return html`<${AssistantMessage} key=${it.id} text=${it.text} cols=${c} ts=${it.ts} />`;
       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 'activity': return html`<${StatusLines} key=${it.id} lines=${it.status} busy=${false} navigable=${!busy && it.id === lastActivityId} />`;
       case 'notice': return html`<${Notice} key=${it.id} text=${it.text} color=${it.color} />`;
       case 'info': return html`<${LabeledNotice} key=${it.id} label="ℹ  Info" text=${it.text} color=${C.muted} bodyColor=${it.color || C.white} cols=${c} ts=${it.ts} />`;
       case 'error': return html`<${LabeledNotice} key=${it.id} label="✗ Error" text=${it.text} color=${C.error} bodyColor=${it.color || C.white} cols=${c} ts=${it.ts} />`;

package/src/tui/components.js

@@ -1,6 +1,6 @@
 // Presentational components for the iCli Ink TUI.
 import { html, useState, useEffect } from './dom.js';
-import { Box, Text } from 'ink';
+import { Box, Text, useInput } from 'ink';
 import Spinner from 'ink-spinner';
 import { C, glyphs, spinnerType, borderStyle, midDot, dash } from './theme.js';
 import { Markdown } from './markdown.js';
@@ -298,56 +298,181 @@ export function ShellOutput({ command, output, cols = 80, ts, code = 0 }) {
 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;
 
-export function StatusLines({ lines = [], busy = false }) {
+/**
+ * Classify a status line into op type, a dim type-tag, and display parts.
+ * Tag is metadata only (file ext, device protocol, service) — never colored.
+ * Op type drives color: read=green, edit=red, step=blue.
+ */
+function parseToolLine(lineStr) {
+  const s = String(lineStr).trim();
+  const done = /^[✓✗x]/.test(s);
+  const ok   = /^✓/.test(s) || !/^[✗x]/.test(s);
+  const clean = s.replace(/^\s*[✓✗x]\s*/, '');
+
+  const em   = clean.match(LEAD_EMOJI);
+  const body = em ? clean.slice(em[0].length).trim() : clean;
+  const ci   = body.indexOf(':');
+  const action  = (ci > -1 ? body.slice(0, ci) : body).trim();
+  const subject = (ci > -1 ? body.slice(ci + 1) : '').trim();
+  const aL = action.toLowerCase();
+  const sL = subject.toLowerCase();
+
+  // ── Op type + descriptive verb (from action keywords) ────────────────────
+  let opType = 'other';
+  let verb   = '';
+  if      (/running on\b/i.test(aL))                                    { opType = 'edit'; verb = 'Exec'; }
+  else if (/\b(save|saving|generat|rollback|write|creat|update|apply)\b/i.test(aL)) { opType = 'edit'; verb = aL.includes('save') || aL.includes('saving') ? 'Save' : aL.includes('generat') ? 'Generate' : aL.includes('rollback') ? 'Rollback' : 'Edit'; }
+  else if (/\b(search|searching)\b/i.test(aL))                          { opType = 'read'; verb = 'Search'; }
+  else if (/\b(lookup|look.?up|looking)\b/i.test(aL))                   { opType = 'read'; verb = 'Lookup'; }
+  else if (/\b(check|checking|analys|correlat|simulat|predict|retrieve)\b/i.test(aL)) { opType = 'read'; verb = 'Check'; }
+  else if (/\b(fetch|reading|read)\b/i.test(aL))                        { opType = 'read'; verb = 'Read'; }
+  else if (/\b(assign|spawn|sub.?agent|delegat)\b/i.test(aL))           { opType = 'step'; verb = 'Spawn'; }
+
+  // ── Type tag — ONLY from explicit context; never inherit device from subject ──
+  // Tag identifies the protocol/format involved, not the device mentioned.
+  let typeTag = '';
+  // File extensions in subject or action (most specific)
+  const allText = aL + ' ' + sL;
+  if      (/\.(js|jsx|mjs|cjs)\b/.test(allText))   typeTag = 'JS';
+  else if (/\.(ts|tsx)\b/.test(allText))            typeTag = 'TS';
+  else if (/\.php\b/.test(allText))                 typeTag = 'PHP';
+  else if (/\.py\b/.test(allText))                  typeTag = 'PY';
+  else if (/\.(rb)\b/.test(allText))                typeTag = 'RB';
+  else if (/\.(go)\b/.test(allText))                typeTag = 'GO';
+  else if (/\.(sh|bash)\b/.test(allText))           typeTag = 'SH';
+  // Device protocol — ONLY when action is a device exec ("running on")
+  else if (/running on/i.test(aL)) {
+    if      (/nas#|mikrotik|\/export|\/ip |\/ppp|\/interface|\/system|\/queue|\/routing/.test(allText)) typeTag = 'ROS';
+    else if (/olt#|gpon|epon|optical/.test(allText)) typeTag = 'OLT';
+    else typeTag = 'DEV';
+  }
+  // Action-based tags
+  else if (/github/i.test(aL))                      typeTag = 'GIT';
+  else if (/web|url|page|http/i.test(aL))           typeTag = 'WEB';
+  else if (/customer|subscriber/i.test(aL))         typeTag = 'CRM';
+  else if (/firmware|version/i.test(aL))            typeTag = 'FW';
+  else if (/sub.?agent|specialist|assign/i.test(aL)) typeTag = 'AI';
+  else if (/shell|command/i.test(aL))               typeTag = 'SH';
+  else if (/checkpoint|backup/i.test(aL))           typeTag = 'CFG';
+  else if (/config/i.test(aL))                      typeTag = 'CFG';
+  else if (/docs|documentation/i.test(aL))          typeTag = 'DOC';
+  else if (/signal|optical|dbm/i.test(aL))          typeTag = 'OPT';
+  else if (/device|router|nas|olt/i.test(aL))       typeTag = 'DEV';
+
+  // Display text: verb + detail
+  // When action has no colon split, subject is empty — show trimmed action as detail
+  const display = subject || action;
+
+  return { opType, typeTag, verb, action, subject, display, done, ok, full: s };
+}
+
+export function StatusLines({ lines = [], busy = false, navigable = false }) {
+  const [sel, setSel] = useState(-1);
+  const [expanded, setExpanded] = useState(new Set());
+
+  useEffect(() => { setSel(-1); setExpanded(new Set()); }, [lines.length]);
+
+  useInput((input, key) => {
+    if (!navigable) return;
+    if (key.upArrow   || input === 'k') { setSel((i) => Math.max(0, (i < 0 ? lines.length - 1 : i) - 1)); return; }
+    if (key.downArrow || input === 'j') { setSel((i) => Math.min(lines.length - 1, (i < 0 ? -1 : i) + 1)); return; }
+    if ((key.return || input === ' ') && sel >= 0) {
+      setExpanded((prev) => { const n = new Set(prev); n.has(sel) ? n.delete(sel) : n.add(sel); return n; });
+      return;
+    }
+    if (key.escape) { setSel(-1); return; }
+  });
+
   if (!lines.length) return null;
   const lastIdx = lines.length - 1;
+
   return html`
     <${Box} flexDirection="column" marginTop=${1}>
       ${lines.map((line, i) => {
-        const lineStr = String(line);
+        const lineStr  = String(line);
+        const isRunning = busy && i === lastIdx;
+        const isSel    = navigable && sel === i;
+        const isExp    = expanded.has(i);
+
+        // ── Sub-agent tree line ─────────────────────────────────────────
         const sm = lineStr.match(SUBAGENT);
         if (sm) {
           const [, idx, total, host, result] = sm;
-          // A subagent line is still running when busy and hasn't got a ✓/✗ prefix yet
           const isCompleted = /^\s*[✓✗x]/.test(lineStr);
-          const running = busy && !isCompleted;
+          const running     = busy && !isCompleted;
           const good = !/fail|error|down|offline|unreachable|timeout|deny/i.test(result);
           const branch = Number(idx) === Number(total) ? glyphs.branchEnd : glyphs.branchMid;
-          const hostTrunc = host.length > 24 ? host.slice(0, 22) + '…' : host;
-          const resultTrunc = result.length > 32 ? result.slice(0, 30) + '…' : result;
           return html`
-            <${Box} key=${'s' + i}>
-              <${Text} color=${C.gray}>  <//>
+            <${Box} key=${`sa${i}`}>
+              <${Text} color=${C.muted}>  <//>
               <${Text} color=${C.accent}>${branch} <//>
               <${Text} color=${C.muted}>${idx}/${total} <//>
-              <${Text} color=${C.white} bold>${hostTrunc}<//>
+              <${Text} color=${C.white} bold>${host.slice(0, 20)}<//>
               <${Text} color=${C.muted}> ${dash()} <//>
               ${running
                 ? html`<${Text} color=${C.warning}><${Spinner} type=${spinnerType()} /><//>  <${Text} color=${C.muted}>running<//>`
-                : html`<${Text} color=${good ? C.success : C.error} bold>${good ? glyphs.check : glyphs.cross} ${resultTrunc}<//>`}
+                : html`<${Text} color=${good ? C.success : C.error} bold>${good ? glyphs.check : glyphs.cross} ${result.slice(0, 32)}<///>`}
             <//>`;
         }
 
-        const running = busy && i === lastIdx;
-        const em = lineStr.match(LEAD_EMOJI);
-        const body = em ? lineStr.slice(em[0].length) : lineStr.replace(/^[\s◈◆●○◎⇢→>*✓✗×!⚠·-]+/u, '');
-        const ci = body.indexOf(':');
-        const action = ci > -1 ? body.slice(0, ci).trim() : body.trim();
-        const detail = ci > -1 ? body.slice(ci + 1).trim() : '';
-        const chipLabel = detail
-          ? `${em ? em[1] : ''}${action}: ${detail.slice(0, 40)}`
-          : `${em ? em[1] : ''}${action}`;
+        // ── Regular tool status line ────────────────────────────────────
+        const { opType, typeTag, verb, display, done, ok, full } = parseToolLine(lineStr);
+
+        const opColor = opType === 'read' ? C.success
+          : opType === 'edit'             ? C.error
+          : opType === 'step'             ? C.brand
+          : C.muted;
+
+        // Type tag: always dim/muted — it's just metadata, never colored
+        const tag = typeTag ? typeTag.slice(0, 3).padEnd(3) : '   ';
+
+        // Verb label: padded to 8 chars for alignment
+        const verbLabel = (verb || 'Run').slice(0, 8).padEnd(8);
+
+        // Detail text: as much as fits
+        const detail = display.length > 52 ? display.slice(0, 50) + '…' : display;
+
+        // Status icon
+        const statusIcon = isRunning
+          ? html`<${Text} color=${C.warning}><${Spinner} type=${spinnerType()} /><//>`
+          : (done && ok)  ? html`<${Text} color=${C.success}> ${glyphs.check}<//>` 
+          : (done && !ok) ? html`<${Text} color=${C.error}> ${glyphs.cross}<//>` 
+          : null;
+
         return html`
-          <${Box} key=${'s' + i} marginTop=${0}>
-            <${Text} color=${C.muted}>  <//>
-            <${Text} color=${running ? C.warning : C.muted}>[<//>
-            <${Text} color=${running ? C.white : C.muted} bold=${running}>${chipLabel.trim().slice(0, 60)}<//><${Text} color=${running ? C.warning : C.muted}>]<//>
-            <${Text}> <//>
-            ${running
-              ? html`<${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>`
-              : html`<${Text} color=${C.success}>${glyphs.check}<//>`}
+          <${Box} key=${`sl${i}`} flexDirection="column">
+            <${Box}>
+              <${Text} color=${C.muted}>  <//>
+              <!-- Type tag: dim neutral — NOT colored by op type -->
+              <${Text} color=${C.muted} dimColor>${tag}<//>
+              <${Text} color=${C.muted}>  <//>
+              <!-- Colored dot — the ONLY colored part -->
+              <${Text} color=${opColor}>● <//>
+              <!-- Verb: bold for reads, normal otherwise -->
+              <${Text} color=${C.white} bold=${opType === 'read'}>${verbLabel}<//>
+              <!-- Detail: plain white -->
+              <${Text} color=${C.white} dimColor> ${detail}<//> 
+              ${statusIcon}
+              ${isSel ? html`<${Text} color=${C.muted} dimColor>  [${isExp ? '−' : '+'}]<//>` : null}
+            <//>
+            ${isExp ? html`
+              <${Box} flexDirection="column" paddingLeft=${8}>
+                <${Text} color=${C.separator}>${'┌' + '─'.repeat(48)}<//>
+                <${Box}><${Text} color=${C.separator}>│ <//>
+                  <${Text} color=${C.muted}>${full.slice(0, 100)}<//>
+                <//>
+                ${full.length > 100 ? html`<${Box}><${Text} color=${C.separator}>│ <//>
+                  <${Text} color=${C.muted}>${full.slice(100, 200)}<//>
+                <//>` : null}
+                <${Text} color=${C.separator}>${'└' + '─'.repeat(48)}<//>
+              <//>` : null}
           <//>`;
       })}
+      ${navigable && lines.length > 1
+        ? html`<${Box} paddingLeft=${2} marginTop=${0}>
+            <${Text} color=${C.muted} dimColor>j/k select  Enter expand  Esc dismiss<//>
+          <//>` 
+        : null}
     <//>`;
 }