ispbills-icli 8.7.5 → 8.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ispbills-icli",
-  "version": "8.7.5",
+  "version": "8.7.6",
   "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,194 @@ 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 string into op type, type tag, and display parts.
+ * Returns { opType: 'read'|'edit'|'step'|'other', typeTag, verb, action, subject, done, ok }
+ */
+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 combined = action + ' ' + subject;
+
+  // ── Op type ──────────────────────────────────────────────────────────────
+  let opType = 'other';
+  let verb   = '';
+  if (/search|lookup|look.?up|reading|read|fetch|check|analys|correlat|simulat|predict|searching|looking|checking|analysing|correlating|predicting|simulating|retrieve/i.test(action)) {
+    opType = 'read';  verb = 'Read';
+  } else if (/edit|write|save|saving|generat|rollback|running on|exec|apply|creat|update/i.test(action)) {
+    opType = 'edit';  verb = 'Edit';
+  } else if (/assign|spawn|sub.?agent|delegat|step|next/i.test(action)) {
+    opType = 'step';  verb = 'Step';
+  }
+
+  // ── Type tag from subject/action ─────────────────────────────────────────
+  let typeTag = '';
+  const hay = combined.toLowerCase();
+  if      (/\.(js|jsx|mjs|cjs)\b/.test(hay))                           typeTag = 'JS';
+  else if (/\.(ts|tsx)\b/.test(hay))                                    typeTag = 'TS';
+  else if (/\.php\b/.test(hay))                                         typeTag = 'PHP';
+  else if (/\.py\b/.test(hay))                                          typeTag = 'PY';
+  else if (/\.(rb)\b/.test(hay))                                        typeTag = 'RB';
+  else if (/\.(go)\b/.test(hay))                                        typeTag = 'GO';
+  else if (/\.(sh|bash)\b/.test(hay))                                   typeTag = 'SH';
+  else if (/nas#|mikrotik|routeros|\/export|\/ip |\/ppp|\/interface|\/system|\/queue/.test(hay)) typeTag = 'ROS';
+  else if (/olt#|optical|onu|gpon|epon/.test(hay))                      typeTag = 'OLT';
+  else if (/github/.test(hay))                                          typeTag = 'GIT';
+  else if (/http|url|web page|web search/.test(hay))                    typeTag = 'WEB';
+  else if (/customer|subscriber|user/.test(hay))                        typeTag = 'CRM';
+  else if (/firmware|version|upgrade/.test(hay))                        typeTag = 'FW';
+  else if (/sub.?agent|specialist|role/.test(hay))                      typeTag = 'AI';
+  else if (/shell|command|script/.test(hay))                            typeTag = 'SH';
+  else if (/checkpoint|backup|config/.test(hay))                        typeTag = 'CFG';
+  else if (/docs|documentation/.test(hay))                              typeTag = 'DOC';
+  else if (/signal|optical|dbm/.test(hay))                              typeTag = 'OPT';
+
+  return { opType, typeTag, verb, action, subject, done, ok, full: s };
+}
+
+export function StatusLines({ lines = [], busy = false, navigable = false }) {
+  const [sel, setSel] = useState(-1);
+  const [expanded, setExpanded] = useState(new Set());
+
+  // Reset selection when lines change
+  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 next = new Set(prev);
+        next.has(sel) ? next.delete(sel) : next.add(sel);
+        return next;
+      });
+      return;
+    }
+    // Esc clears selection
+    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 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 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;
+          const hostTrunc = host.length > 22 ? host.slice(0, 20) + '…' : host;
+          const resultTrunc = result.length > 30 ? result.slice(0, 28) + '…' : result;
           return html`
-            <${Box} key=${'s' + i}>
-              <${Text} color=${C.gray}>  <//>
-              <${Text} color=${C.accent}>${branch} <//>
-              <${Text} color=${C.muted}>${idx}/${total} <//>
-              <${Text} color=${C.white} bold>${hostTrunc}<//>
-              <${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}<//>`}
+            <${Box} key=${'s' + i} flexDirection="column">
+              <${Box}>
+                <${Text} color=${C.muted}>  <//>
+                <${Text} color=${C.accent}>${branch} <//>
+                <${Text} color=${C.muted}>${idx}/${total} <//>
+                <${Text} color=${C.white} bold>${hostTrunc}<//>
+                <${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}<//>`}
+              <//>
             <//>`;
         }
 
-        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, action, subject, done, ok } = parseToolLine(lineStr);
+
+        const opColor = opType === 'read' ? C.success
+          : opType === 'edit' ? C.error
+          : opType === 'step' ? C.brand
+          : C.muted;
+
+        // Dot glyph (colored bullet)
+        const dot = '●';
+
+        // Type tag display (fixed 3-char width)
+        const tag = (typeTag || '···').slice(0, 3).padEnd(3);
+
+        // Subject truncation
+        const subjectTrunc = subject.length > 36 ? subject.slice(0, 34) + '…' : subject;
+        const actionTrunc  = action.length > 28  ? action.slice(0, 26) + '…'  : action;
+
+        // Status indicator on the right
+        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;
+
+        // Expand toggle hint for navigable lines
+        const expHint = navigable && isSel
+          ? html`<${Text} color=${C.muted} dimColor>  [${isExp ? '−' : '+'}]<//>` : 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=${'s' + i} flexDirection="column">
+            <!-- Main line -->
+            <${Box} backgroundColor=${isSel ? '#1a1a2e' : undefined}>
+              <${Text} color=${C.muted}>  <//>
+              <${Text} color=${opColor} dimColor>${tag}<//>
+              <${Text} color=${C.muted}> <//>
+              <${Text} color=${opColor}>${dot} <//>
+              <${Text} color=${opColor} bold=${opType === 'read'}>${verb || action.slice(0, 12)}<//>
+              ${subject
+                ? html`<${Text} color=${C.white} bold=${opType === 'read'}>  ${subjectTrunc.slice(0, 40)}<//>` 
+                : html`<${Text} color=${C.muted} bold=${opType === 'read'}>  ${actionTrunc}<//>` }
+              ${statusIcon}
+              ${expHint}
+            <//>
+
+            <!-- Expanded detail -->
+            ${isExp ? html`
+              <${Box} flexDirection="column" marginLeft=${4}>
+                <${Text} color=${C.separator}>${'┌' + '─'.repeat(50)}<//>
+                <${Box}>
+                  <${Text} color=${C.separator}>│ <//>
+                  <${Text} color=${C.muted} italic>${lineStr.slice(0, 120)}<//>
+                <//>
+                ${subject.length > 40 ? html`
+                  <${Box}>
+                    <${Text} color=${C.separator}>│ <//>
+                    <${Text} color=${C.muted} italic>${subject.slice(40)}<//>
+                  <//>` : null}
+                <${Text} color=${C.separator}>${'└' + '─'.repeat(50)}<//>
+              <//>` : null}
           <//>`;
       })}
+      ${navigable && lines.length > 1
+        ? html`<${Box} paddingLeft=${2} marginTop=${0}>
+            <${Text} color=${C.muted} dimColor>j/k navigate  ${midDot()}  Enter expand  ${midDot()}  Esc dismiss<//>
+          <//>` 
+        : null}
     <//>`;
 }