ispbills-icli 8.7.2 → 8.7.4

package/package.json

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

package/src/tui/app.js

@@ -1106,16 +1106,18 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         // Show interactive model picker
         const cur = model || modelRef.current || '';
         const MODELS = [
-          { id: 'gpt-4o-mini',                     desc: 'Fast & affordable (default)' },
-          { id: 'openai/gpt-4o',                   desc: 'OpenAI GPT-4o — balanced' },
-          { id: 'openai/gpt-4.1',                  desc: 'OpenAI GPT-4.1 — latest' },
-          { id: 'openai/o3',                        desc: 'OpenAI o3 — reasoning' },
-          { id: 'openai/o3-mini',                   desc: 'OpenAI o3-mini — fast reasoning' },
-          { id: 'anthropic/claude-3-5-sonnet',      desc: 'Claude 3.5 Sonnet — strong' },
-          { id: 'anthropic/claude-3-opus',          desc: 'Claude 3 Opus — advanced' },
-          { id: 'anthropic/claude-3-haiku',         desc: 'Claude 3 Haiku — fast' },
-          { id: 'meta/llama-3.3-70b-instruct',      desc: 'Llama 3.3 70B (open)' },
-          { id: 'mistral/mistral-large',            desc: 'Mistral Large' },
+          { id: 'gpt-4o-mini',                          desc: 'Fast & affordable (default)' },
+          { id: 'openai/gpt-4o',                        desc: 'OpenAI GPT-4o — balanced' },
+          { id: 'openai/gpt-4.1',                       desc: 'OpenAI GPT-4.1 — latest' },
+          { id: 'openai/gpt-5.3-codex',                 desc: 'GPT-5.3 Codex — advanced coding' },
+          { id: 'openai/o3',                            desc: 'OpenAI o3 — reasoning' },
+          { id: 'openai/o3-mini',                       desc: 'OpenAI o3-mini — fast reasoning' },
+          { id: 'anthropic/claude-sonnet-4-6',          desc: 'Claude Sonnet 4.6 — latest (recommended)' },
+          { id: 'anthropic/claude-3-5-sonnet',          desc: 'Claude 3.5 Sonnet — strong' },
+          { id: 'anthropic/claude-3-opus',              desc: 'Claude 3 Opus — advanced' },
+          { id: 'anthropic/claude-3-haiku',             desc: 'Claude 3 Haiku — fast' },
+          { id: 'meta/llama-3.3-70b-instruct',          desc: 'Llama 3.3 70B (open)' },
+          { id: 'mistral/mistral-large',                desc: 'Mistral Large' },
         ];
         choiceActionRef.current = (val) => {
           if (val) {
@@ -2130,9 +2132,12 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     ? `${glyphs.spinner} Working\u2026`
     : hint
     ? hint
-    : `? help ${midDot()} / commands ${midDot()} \u2191\u2193 history ${midDot()} Tab mode`;
-  const footerStatusColor = busy ? C.warning : hint ? C.warning : C.muted;
-  const footerStatusRight = busy ? `Ctrl+C to cancel` : '';
+    : activeTab !== 'session'
+    ? `Enter → Session  ${midDot()}  r refresh  ${midDot()}  Tab next tab  ${midDot()}  1-9 insert command`
+    : `? help  ${midDot()}  / commands  ${midDot()}  @ mention  ${midDot()}  \u2191\u2193 history  ${midDot()}  Tab mode`;
+  const footerStatusColor = busy ? C.warning : hint ? C.accent : C.brand;
+  const footerStatusRight = busy ? `Ctrl+C cancel` : mode === 'autopilot' ? 'AUTOPILOT' : mode === 'plan' ? 'PLAN' : '';
+  const footerStatusRightColor = busy ? C.warning : mode === 'autopilot' ? C.warning : mode === 'plan' ? C.accent : C.muted;
   const composerMode = shellMode ? 'shell' : mode;
 
   // ── Viewport slicing ───────────────────────────────────────────────────────
@@ -2252,9 +2257,9 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
 
         <${Box} paddingX=${1} width=${cols}>
           <${Box} flexGrow=${1}>
-            <${Text} color=${footerStatusColor} wrap="truncate-end">${footerStatusLeft}<//>
+            <${Text} color=${footerStatusColor} bold=${busy} wrap="truncate-end">${footerStatusLeft}<//>
           <//>
-          <${Text} color=${footerStatusColor} dimColor wrap="truncate-end">${footerStatusRight}<//>
+          <${Text} color=${footerStatusRightColor} bold wrap="truncate-end">${footerStatusRight}<//>
         <//>
 
         <${Box} paddingX=${1} width=${cols}>

package/src/tui/components.js

@@ -614,6 +614,20 @@ function statusCounts(list) {
   return { on, off, other: list.length - on - off };
 }
 
+/** Format a timestamp as a relative "Xm ago" / "Xh ago" string. */
+function fmtAgo(ts) {
+  if (!ts) return '';
+  const diff = Date.now() - new Date(ts).getTime();
+  if (isNaN(diff) || diff < 0) return '';
+  const s = Math.floor(diff / 1000);
+  if (s < 90)       return `${s}s ago`;
+  const m = Math.floor(s / 60);
+  if (m < 90)       return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 48)       return `${h}h ago`;
+  return `${Math.floor(h / 24)}d ago`;
+}
+
 // ── DevicesPanel ─────────────────────────────────────────────────────────────
 
 export function DevicesPanel({ data, loading, error, cols }) {
@@ -658,56 +672,95 @@ export function DevicesPanel({ data, loading, error, cols }) {
       <//>
     <//>`;
 
-  const nameW  = Math.max(20, Math.floor(cols * 0.35));
-  const ipW    = 16;
-  const tagW   = 10;
-  const maxRowsPerGroup = Math.max(5, Math.floor((cols > 100 ? 12 : 8)));
+  // Compute column widths based on terminal width
+  const nameW  = Math.max(20, Math.floor(cols * 0.32));
+  const ipW    = 17;
+  const statusW = 9;   // ' ONLINE  ' / ' OFFLINE ' / ' UNKNOWN '
+  const maxRowsPerGroup = Math.max(5, cols > 100 ? 14 : 10);
 
   const ts = data.fetchedAt
     ? new Date(data.fetchedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
     : '';
 
+  // Summary line: total counts across all device types
+  const totals = groups.reduce((acc, g) => {
+    const { on, off, other } = statusCounts(g.items);
+    acc.on += on; acc.off += off; acc.other += other; acc.total += g.items.length;
+    return acc;
+  }, { on: 0, off: 0, other: 0, total: 0 });
+
   return html`
     <${Box} flexDirection="column">
       ${header}
+
+      <!-- Fleet summary bar -->
+      <${Box} paddingX=${2} marginBottom=${1}>
+        <${Text} color=${C.muted}>Total <//>
+        <${Text} bold>${totals.total}<//>
+        <${Text} color=${C.muted}>  devices  <//>
+        <${Text} color=${C.success} bold>● ${totals.on} online<//>
+        <${Text} color=${C.muted}>  <//>
+        <${Text} color=${C.error} bold>○ ${totals.off} offline<//>
+        ${totals.other > 0 ? html`<${Text} color=${C.warning} bold>  ◌ ${totals.other} unknown<//>` : null}
+      <//>
+
       <${Box} flexDirection="column" paddingX=${2} paddingY=${0}>
         ${groups.map((g) => {
           const { on, off, other } = statusCounts(g.items);
+          // Sort: online first, unknown second, offline last
           const sorted = [...g.items].sort((a, b) => {
             const order = { online: 0, unknown: 1, offline: 2 };
             return (order[devStatus(a)] ?? 1) - (order[devStatus(b)] ?? 1);
           });
           const shown  = sorted.slice(0, maxRowsPerGroup);
           const hidden = sorted.length - shown.length;
+
           return html`
             <${Box} key=${g.label} flexDirection="column" marginTop=${1}>
+              <!-- Group header with status summary -->
               <${Box}>
                 <${Text} color=${C.accent} bold>${g.icon} ${g.label}<//>
-                <${Text} color=${C.muted}>  <//>
-                <${Text} color=${C.success}>${on}↑<//>
-                <${Text} color=${C.muted}> <//>
-                <${Text} color=${C.error}>${off}↓<//>
-                ${other > 0 ? html`<${Text} color=${C.warning}>  ${other}?<//>` : null}
+                <${Text} color=${C.muted}>  (${g.items.length})  <//>
+                <${Text} color=${C.success}>${on} online<//>
+                ${off > 0 ? html`<${Text} color=${C.error}>  ${off} offline<//>` : null}
+                ${other > 0 ? html`<${Text} color=${C.warning}>  ${other} unknown<//>` : null}
+              <//>
+
+              <!-- Column header -->
+              <${Box}>
+                <${Text} color=${C.muted}>    ${'Name'.padEnd(nameW)}${'IP Address'.padEnd(ipW)}Status   Checked<//>
               <//>
+
               ${shown.map((d, i) => {
+                const st = devStatus(d);
                 const { dot, color } = statusDot(d);
                 const isLast = i === shown.length - 1 && hidden === 0;
                 const tree = isLast ? '└─' : '├─';
+
                 const name = (d.name || d.device_name || `#${d.id}`)
                   .slice(0, nameW - 1).padEnd(nameW);
                 const ip = (d.ip_address || '─').slice(0, ipW - 1).padEnd(ipW);
-                const extra = d.model ? d.model.slice(0, tagW) : '';
+
+                // Status badge
+                const badgeText = st === 'online' ? ' ONLINE ' : st === 'offline' ? ' OFFLINE' : ' UNKNOWN';
+                const badgeColor = st === 'online' ? C.success : st === 'offline' ? C.error : C.warning;
+
+                // Last-check time
+                const checkTs = d.last_check || d.last_seen || d.created_at;
+                const ago = fmtAgo(checkTs);
+
                 return html`
                   <${Box} key=${d.id}>
-                    <${Text} color=${C.muted}>${tree}<//>
+                    <${Text} color=${C.muted}>${tree} <//>
                     <${Text} color=${color}>${dot} <//>
                     <${Text}>${name}<//>
                     <${Text} color=${C.muted}>${ip}<//>
-                    <${Text} color=${C.muted} dimColor>${extra}<//>
+                    <${Text} color=${badgeColor} bold>${badgeText}<//>
+                    ${ago ? html`<${Text} color=${C.muted} dimColor>  ${ago}<//>` : null}
                   <//>`;
               })}
               ${hidden > 0
-                ? html`<${Box}><${Text} color=${C.muted} dimColor>   └─ …and ${hidden} more<//>  <//>` 
+                ? html`<${Box}><${Text} color=${C.muted} dimColor>   └─ …and ${hidden} more (press r to refresh)<//>  <//>` 
                 : null}
             <//>`;
         })}
@@ -716,7 +769,7 @@ export function DevicesPanel({ data, loading, error, cols }) {
         <${Text} color=${C.separator}>${'─'.repeat(Math.max(1, bw))}<//>
       <//>
       <${Box} paddingX=${2}>
-        <${Text} color=${C.muted} dimColor>r refresh${ts ? '  ' + midDot() + '  updated ' + ts : ''}  ${midDot()}  Enter → Session<//>
+        <${Text} color=${C.muted} dimColor>r refresh${ts ? '  ' + midDot() + '  updated ' + ts : ''}  ${midDot()}  ● online  ○ offline  ◌ unknown  ${midDot()}  Enter → Session<//>
       <//>
     <//>`;
 }
@@ -751,81 +804,130 @@ export function MapsPanel({ data, loading, error, cols }) {
     <//>`;
 
   const tiers = [
-    { label: 'Routers',      items: data.routers,  icon: '⬡', color: C.brand    },
-    { label: 'OLTs',         items: data.olts,     icon: '◈', color: C.accent   },
-    { label: 'Ubiquiti APs', items: data.ubiquiti, icon: '◉', color: C.success  },
-    { label: 'Cambium APs',  items: data.cambium,  icon: '◉', color: C.warning  },
+    { label: 'Routers',      items: data.routers,  icon: '⬡', color: C.brand   },
+    { label: 'OLTs',         items: data.olts,     icon: '◈', color: C.accent  },
+    { label: 'Ubiquiti APs', items: data.ubiquiti, icon: '◉', color: C.success },
+    { label: 'Cambium APs',  items: data.cambium,  icon: '◉', color: C.warning },
   ].filter((t) => t.items.length > 0);
 
-  const maxPerTier = Math.max(4, Math.floor((cols > 100 ? 10 : 6)));
-  const indent = '   ';
+  const maxPerTier = cols > 100 ? 12 : 8;
+  const nameW = Math.max(18, Math.floor(cols * 0.28));
+  const ipW   = 17;
+
+  // Build the total fleet summary
+  const fleet = tiers.reduce((acc, t) => {
+    const { on, off, other } = statusCounts(t.items);
+    acc.on += on; acc.off += off; acc.other += other; acc.total += t.items.length;
+    return acc;
+  }, { on: 0, off: 0, other: 0, total: 0 });
+
+  const ts = data.fetchedAt
+    ? new Date(data.fetchedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+    : '';
 
   return html`
     <${Box} flexDirection="column">
       ${header}
+
       <${Box} flexDirection="column" paddingX=${2} paddingY=${0}>
 
-        <${Box} marginTop=${1} marginBottom=${0}>
-          <${Text} color=${C.muted}>${indent}┌─────────────┐<//>
+        <!-- Fleet summary -->
+        <${Box} marginTop=${1} marginBottom=${1}>
+          <${Text} color=${C.muted}>Fleet: <//>
+          <${Text} bold>${fleet.total} devices<//>
+          <${Text} color=${C.muted}>  <//>
+          <${Text} color=${C.success} bold>● ${fleet.on} up<//>
+          <${Text} color=${C.muted}>  <//>
+          <${Text} color=${C.error} bold>○ ${fleet.off} down<//>
+          ${fleet.other > 0 ? html`<${Text} color=${C.warning} bold>  ◌ ${fleet.other} unknown<//>` : null}
+        <//>
+
+        <!-- Internet cloud node -->
+        <${Box}>
+          <${Text} color=${C.muted}>    ╔══════════════╗<//>
         <//>
         <${Box}>
-          <${Text} color=${C.muted}>${indent}│<//>
-          <${Text} color=${C.brand} bold>  Internet    <//>
-          <${Text} color=${C.muted}>│<//>
+          <${Text} color=${C.muted}>    ║  <//>
+          <${Text} color=${C.brand} bold>  INTERNET  <//>
+          <${Text} color=${C.muted}>  ║<//>
         <//>
-        <${Box} marginBottom=${0}>
-          <${Text} color=${C.muted}>${indent}└──────┬──────┘<//>
+        <${Box}>
+          <${Text} color=${C.muted}>    ╚══════╤═══════╝<//>
         <//>
 
+        <!-- Each tier rendered as a branch under the topology tree -->
         ${tiers.map((tier, ti) => {
-          const { on, off } = statusCounts(tier.items);
-          const shown  = tier.items.slice(0, maxPerTier);
-          const hidden = tier.items.length - shown.length;
+          const { on, off, other } = statusCounts(tier.items);
+          // Sort: online first, offline last
+          const sorted = [...tier.items].sort((a, b) => {
+            const order = { online: 0, unknown: 1, offline: 2 };
+            return (order[devStatus(a)] ?? 1) - (order[devStatus(b)] ?? 1);
+          });
+          const shown  = sorted.slice(0, maxPerTier);
+          const hidden = sorted.length - shown.length;
           const isLast = ti === tiers.length - 1;
-          const nameW  = Math.max(18, Math.floor(cols * 0.3));
 
           return html`
             <${Box} key=${tier.label} flexDirection="column">
+
+              <!-- Vertical connector to this tier -->
+              <${Box}>
+                <${Text} color=${C.muted}>           │<//>
+              <//>
+
+              <!-- Tier header box -->
+              <${Box}>
+                <${Text} color=${C.muted}>    ┌──────┴──────────────────────────────<//>
+              <//>
               <${Box}>
-                <${Text} color=${C.muted}>${indent}       │<//>
+                <${Text} color=${C.muted}>    │ <//>
+                <${Text} color=${tier.color} bold>${tier.icon} ${tier.label.padEnd(14)}<//>
+                <${Text} color=${C.success}> ● ${on} up<//>
+                ${off > 0 ? html`<${Text} color=${C.error}>  ○ ${off} down<//>` : null}
+                ${other > 0 ? html`<${Text} color=${C.warning}>  ◌ ${other} unk<//>` : null}
               <//>
               <${Box}>
-                <${Text} color=${C.muted}>${indent}  ┌────┴<//>
-                <${Text} color=${tier.color} bold> ${tier.icon} ${tier.label} <//>
-                <${Text} color=${C.success}>${on}↑ <//>
-                <${Text} color=${C.error}>${off}↓<//>
+                <${Text} color=${C.muted}>    └─┬────────────────────────────────<//>
               <//>
+
+              <!-- Device rows -->
               ${shown.map((d, i) => {
+                const st = devStatus(d);
                 const { dot, color } = statusDot(d);
                 const isLastItem = i === shown.length - 1 && hidden === 0;
-                const tree = isLastItem ? '  └──' : '  ├──';
-                const name = (d.name || d.device_name || `#${d.id}`).slice(0, nameW);
-                const ip   = d.ip_address ? `  ${d.ip_address}` : '';
-                const st   = devStatus(d) === 'offline' ? '  [offline]' : '';
+                const branch = isLastItem ? '  └─' : '  ├─';
+                const name   = (d.name || d.device_name || `#${d.id}`).slice(0, nameW - 1).padEnd(nameW);
+                const ip     = (d.ip_address || '─').slice(0, ipW - 1).padEnd(ipW);
+                const ago    = fmtAgo(d.last_check || d.last_seen);
+                const badge  = st === 'online' ? 'UP  ' : st === 'offline' ? 'DOWN' : 'UNKN';
+                const badgeColor = st === 'online' ? C.success : st === 'offline' ? C.error : C.warning;
                 return html`
                   <${Box} key=${d.id}>
-                    <${Text} color=${C.muted}>${indent}${tree} <//>
+                    <${Text} color=${C.muted}>     ${branch} <//>
                     <${Text} color=${color}>${dot} <//>
-                    <${Text} bold>${name}<//>
+                    <${Text}>${name}<//>
                     <${Text} color=${C.muted}>${ip}<//>
-                    <${Text} color=${C.error} dimColor>${st}<//>
+                    <${Text} color=${badgeColor} bold>[${badge}]<//>
+                    ${ago ? html`<${Text} color=${C.muted} dimColor>  ${ago}<//>` : null}
                   <//>`;
               })}
               ${hidden > 0
-                ? html`<${Box}><${Text} color=${C.muted} dimColor>${indent}  └── …+${hidden} more<//><//>` 
+                ? html`<${Box}><${Text} color=${C.muted} dimColor>       └─ …+${hidden} more<//>  <//>` 
                 : null}
-              ${!isLast
-                ? null
-                : html`<${Box}><${Text} color=${C.muted}>${indent}       │   (end)<//>  <//>` }
             <//>`;
         })}
 
+        <!-- End cap -->
+        <${Box} marginTop=${1}>
+          <${Text} color=${C.muted} dimColor>           (topology end)<//>
+        <//>
       <//>
+
       <${Box} paddingX=${2} marginTop=${1}>
         <${Text} color=${C.separator}>${'─'.repeat(Math.max(1, bw))}<//>
       <//>
       <${Box} paddingX=${2}>
-        <${Text} color=${C.muted} dimColor>r refresh  ${midDot()}  /topology for AI-generated diagram  ${midDot()}  Enter → Session<//>
+        <${Text} color=${C.muted} dimColor>r refresh${ts ? '  ' + midDot() + '  updated ' + ts : ''}  ${midDot()}  ● up  ○ down  ◌ unknown  ${midDot()}  /topology for AI analysis<//>
       <//>
     <//>`;
 }

package/src/tui/composer.js

@@ -248,6 +248,11 @@ export function Composer({
   };
 
   useInput((input, key) => {
+    // Drop any mouse escape sequences that leaked through the stdin filter.
+    // SGR: \x1b[<N;N;N[Mm]   X10: \x1b[M...   URXVT: \x1b[N;N;NM
+    if (input && input[0] === '\x1b') {
+      if (/^\x1b\[(?:<\d|M|\d+;\d+;\d+M)/.test(input)) return;
+    }
     const enter = key.return || input === '\r' || input === '\n';
     const ctrlEnter = busy && key.ctrl && enter;
     if (ctrlEnter || (busy && key.ctrl && input === 'q')) {

package/src/tui/run.js

@@ -26,20 +26,39 @@ class MouseFilterTransform extends Transform {
     let out = '';
     let i = 0;
     while (i < this._buf.length) {
-      // SGR mouse: \x1b[<N;N;N[Mm]
-      if (this._buf[i] === '\x1b' && this._buf[i + 1] === '[' && this._buf[i + 2] === '<') {
-        const rest = this._buf.slice(i);
-        const m = rest.match(/^\x1b\[<\d+;\d+;\d+[Mm]/);
-        if (m) { i += m[0].length; continue; }
-        if (rest.length < 32) break; // incomplete – wait for more bytes
-        out += this._buf[i++]; // give up, pass through
-        continue;
-      }
-      // X10 mouse: \x1b[M + 3 bytes
-      if (this._buf[i] === '\x1b' && this._buf[i + 1] === '[' && this._buf[i + 2] === 'M') {
-        if (i + 6 <= this._buf.length) { i += 6; continue; }
-        break; // incomplete
+      const c0 = this._buf[i];
+      const c1 = this._buf[i + 1]; // may be undefined at end of buffer
+      const c2 = this._buf[i + 2]; // may be undefined
+
+      if (c0 === '\x1b' && c1 === '[') {
+        // SGR mouse: \x1b[<N;N;N[Mm]  (e.g. \x1b[<0;5;3M  \x1b[<64;10;5M)
+        if (c2 === '<') {
+          const rest = this._buf.slice(i);
+          const m = rest.match(/^\x1b\[<\d+;\d+;\d+[Mm]/);
+          if (m) { i += m[0].length; continue; }
+          if (rest.length < 40) break; // wait for more bytes (max SGR seq ~20 chars)
+          out += this._buf[i++]; // give up on this ESC, pass through
+          continue;
+        }
+        // X10 mouse: \x1b[M + 3 raw bytes  (total 6 bytes)
+        if (c2 === 'M') {
+          if (i + 6 <= this._buf.length) { i += 6; continue; }
+          break; // incomplete X10 sequence — wait
+        }
+        // URXVT extended mouse: \x1b[N;N;NM  (digits without '<', ends with M)
+        if (c2 !== undefined && c2 >= '0' && c2 <= '9') {
+          const rest = this._buf.slice(i);
+          const mu = rest.match(/^\x1b\[\d+;\d+;\d+M/);
+          if (mu) { i += mu[0].length; continue; }
+          // partial — if short, wait for more data
+          if (rest.length < 20) break;
+          // Not a mouse seq — fall through to pass through ESC
+        }
+        // Focus-gained/lost: \x1b[I  \x1b[O  — these look like keys in some
+        // terminals but are focus events; drop them silently.
+        if (c2 === 'I' || c2 === 'O') { i += 3; continue; }
       }
+
       out += this._buf[i++];
     }
     this._buf = this._buf.slice(i);