ispbills-icli 8.7.2 → 8.7.3

package/package.json

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

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<//>
       <//>
     <//>`;
 }