ispbills-icli 8.7.1 → 8.7.3

package/package.json

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

package/src/client.js

@@ -1,5 +1,46 @@
 import { refreshToken } from './auth.js';
 
+/**
+ * Generic authenticated GET for any /api/v1/<path> endpoint.
+ * Uses the same Bearer token as the AI chat stream.
+ */
+export async function fetchApi(cfg, path) {
+  const doFetch = (token) =>
+    fetch(`${cfg.url}/api/v1/${path}`, {
+      headers: { Accept: 'application/json', Authorization: 'Bearer ' + token },
+    });
+
+  let res = await doFetch(cfg.token);
+  if (res.status === 401 && cfg.refresh_token) {
+    const updated = await refreshToken(cfg);
+    if (!updated) throw new Error('Session expired – run `icli login`.');
+    Object.assign(cfg, updated);
+    res = await doFetch(cfg.token);
+  }
+  if (!res.ok) throw new Error(`API ${path} — HTTP ${res.status}`);
+  return res.json();
+}
+
+/**
+ * Fetch all device types in parallel for the Devices / Maps tabs.
+ * Uses Promise.allSettled so a missing endpoint never kills the whole load.
+ */
+export async function fetchDeviceData(cfg) {
+  const [routers, olts, ubiquiti, cambium] = await Promise.allSettled([
+    fetchApi(cfg, 'routers'),
+    fetchApi(cfg, 'olts'),
+    fetchApi(cfg, 'monitoring/ubiquiti'),
+    fetchApi(cfg, 'monitoring/cambium'),
+  ]);
+  return {
+    routers:  routers.status  === 'fulfilled' ? (routers.value.data  || []) : [],
+    olts:     olts.status     === 'fulfilled' ? (olts.value.data     || []) : [],
+    ubiquiti: ubiquiti.status === 'fulfilled' ? (ubiquiti.value.data || []) : [],
+    cambium:  cambium.status  === 'fulfilled' ? (cambium.value.data  || []) : [],
+    fetchedAt: Date.now(),
+  };
+}
+
 /**
  * Incrementally extract the answer text from the raw JSON the backend streams
  * in `delta` events (the reply object is built up as a JSON string).

package/src/tui/app.js

@@ -6,10 +6,10 @@ import { useMouse } from './mouse.js';
 import {
   Banner, TabBar, FollowupChips, UserMessage, AssistantMessage, StatusLines, Reasoning,
   Plan, Connect, Notice, Thinking, Choice, ShellOutput, SearchOverlay, HelpOverlay,
-  SessionPicker, DiffViewer, LabeledNotice, TABS, TAB_W,
+  SessionPicker, DiffViewer, LabeledNotice, DevicesPanel, MapsPanel, TABS, TAB_W,
 } from './components.js';
 import { Composer } from './composer.js';
-import { streamChat } from '../client.js';
+import { streamChat, fetchDeviceData } from '../client.js';
 import { slashToQuestion, SLASH_COMMANDS } from '../commands.js';
 import { saveConfig } from '../config.js';
 import { shortModel } from '../ui.js';
@@ -432,6 +432,9 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const [trusted, setTrusted] = useState(isTrustedDir(cfg, process.cwd()));
   const [sessionPicker, setSessionPicker] = useState(null);
   const [diffState, setDiffState] = useState(null);
+  const [deviceData, setDeviceData] = useState(null);
+  const [deviceLoading, setDeviceLoading] = useState(false);
+  const [deviceError, setDeviceError] = useState(null);
   const chipsRows = (!busy && chips.length && !choice && !search && !sessionPicker && !diffState) ? 1 : 0;
   const composerRows = 2;
   const chromeRows = 2 + composerRows + 1 + chipsRows + 2; // +2 for two footer rows
@@ -483,6 +486,31 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
     for (const timer of dismissTimers.current.values()) clearTimeout(timer);
   }, []);
 
+  // ── Device data fetch ───────────────────────────────────────────────────────
+  const deviceLoadingRef = useRef(false);
+  const loadDeviceData = useCallback(async () => {
+    if (deviceLoadingRef.current) return;
+    deviceLoadingRef.current = true;
+    setDeviceLoading(true);
+    setDeviceError(null);
+    try {
+      const data = await fetchDeviceData(cfg);
+      setDeviceData(data);
+    } catch (e) {
+      setDeviceError(String(e?.message || e));
+    } finally {
+      deviceLoadingRef.current = false;
+      setDeviceLoading(false);
+    }
+  }, [cfg]);
+
+  // Auto-fetch when the user first opens the Devices or Maps tab
+  useEffect(() => {
+    if ((activeTab === 'devices' || activeTab === 'maps') && !deviceData && !deviceLoadingRef.current) {
+      loadDeviceData();
+    }
+  }, [activeTab]);
+
   const persistCfg = useCallback(() => {
     try { saveConfig(cfg); } catch {}
   }, [cfg]);
@@ -1997,6 +2025,12 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
       pushNotice(`Search ${activeTab} tab…`, C.muted, true);
       return;
     }
+    // 'r' refreshes the device list when on Devices or Maps tab
+    if ((activeTab === 'devices' || activeTab === 'maps') && input === 'r' && !key.ctrl) {
+      loadDeviceData();
+      setHint('Refreshing devices…');
+      return;
+    }
     if (key.tab && key.shift && !busy) {
       const cur = MODES.indexOf(modeRef.current);
       const next = MODES[(cur + 1) % MODES.length];
@@ -2158,6 +2192,10 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         <${Notice} text=${`${glyphs.expand} ${expandedItems.kind}`} color=${C.muted} />
         ${expandedItems.items.map((it) => renderItem(it))}
       <//>`
+    : activeTab === 'devices'
+    ? html`<${DevicesPanel} data=${deviceData} loading=${deviceLoading} error=${deviceError} cols=${cols} />`
+    : activeTab === 'maps'
+    ? html`<${MapsPanel} data=${deviceData} loading=${deviceLoading} error=${deviceError} cols=${cols} />`
     : tabPanel
     ? html`<${TabView} panel=${tabPanel} cols=${cols} activeTab=${activeTab} />`
     : html`<${Box} flexDirection="column">

package/src/tui/components.js

@@ -591,3 +591,343 @@ export function Choice({ title, note, options = [], sel = 0, allowText = false,
       <//>
     <//>`;
 }
+
+// ── Shared device-status helpers ────────────────────────────────────────────
+
+function devStatus(d) {
+  const s = String(d.status || '').toLowerCase();
+  if (d.is_online === true  || s === 'online'  || s === 'active' || s === 'ok') return 'online';
+  if (d.is_online === false || s === 'offline' || s === 'inactive' || s === 'down') return 'offline';
+  return 'unknown';
+}
+
+function statusDot(d) {
+  const st = devStatus(d);
+  return st === 'online'  ? { dot: '●', color: C.success }
+    :    st === 'offline' ? { dot: '○', color: C.error   }
+    :                       { dot: '◌', color: C.warning };
+}
+
+function statusCounts(list) {
+  const on = list.filter((d) => devStatus(d) === 'online').length;
+  const off = list.filter((d) => devStatus(d) === 'offline').length;
+  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 }) {
+  const bw = cols - 4;
+  const header = html`
+    <${Box} flexDirection="column" paddingX=${2}>
+      <${Box} marginBottom=${0}>
+        <${Text} color=${C.brand} bold>Devices<//><${Text} color=${C.muted}>  ISP fleet — routers · OLTs · access points<//>
+      <//>
+      <${Text} color=${C.separator}>${'─'.repeat(Math.max(1, bw))}<//>
+    <//>`;
+
+  if (loading) return html`
+    <${Box} flexDirection="column">
+      ${header}
+      <${Box} paddingX=${2} paddingY=${1} gap=${1}>
+        <${Spinner} type=${spinnerType} /><${Text} color=${C.muted}> Loading devices…<//>
+      <//>
+    <//>`;
+
+  if (error || !data) return html`
+    <${Box} flexDirection="column">
+      ${header}
+      <${Box} paddingX=${2} paddingY=${1} flexDirection="column">
+        <${Text} color=${C.error}>${error || 'No data'}<//>
+        <${Text} color=${C.muted} dimColor>Press r to retry<//>
+      <//>
+    <//>`;
+
+  const groups = [
+    { label: 'Routers',        icon: '⬡', items: data.routers,  typeTag: 'router'   },
+    { label: 'OLTs',           icon: '◈', items: data.olts,     typeTag: 'olt'      },
+    { label: 'Ubiquiti APs',   icon: '◉', items: data.ubiquiti, typeTag: 'ubiquiti' },
+    { label: 'Cambium APs',    icon: '◉', items: data.cambium,  typeTag: 'cambium'  },
+  ].filter((g) => g.items.length > 0);
+
+  if (groups.length === 0) return html`
+    <${Box} flexDirection="column">
+      ${header}
+      <${Box} paddingX=${2} paddingY=${1}>
+        <${Text} color=${C.muted}>No devices found. Press r to refresh.<//>
+      <//>
+    <//>`;
+
+  // 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}>  (${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);
+
+                // 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=${color}>${dot} <//>
+                    <${Text}>${name}<//>
+                    <${Text} color=${C.muted}>${ip}<//>
+                    <${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 (press r to refresh)<//>  <//>` 
+                : null}
+            <//>`;
+        })}
+      <//>
+      <${Box} paddingX=${2} marginTop=${1}>
+        <${Text} color=${C.separator}>${'─'.repeat(Math.max(1, bw))}<//>
+      <//>
+      <${Box} paddingX=${2}>
+        <${Text} color=${C.muted} dimColor>r refresh${ts ? '  ' + midDot() + '  updated ' + ts : ''}  ${midDot()}  ● online  ○ offline  ◌ unknown  ${midDot()}  Enter → Session<//>
+      <//>
+    <//>`;
+}
+
+// ── MapsPanel (static ASCII topology) ────────────────────────────────────────
+
+export function MapsPanel({ data, loading, error, cols }) {
+  const bw = cols - 4;
+  const header = html`
+    <${Box} flexDirection="column" paddingX=${2}>
+      <${Box} marginBottom=${0}>
+        <${Text} color=${C.brand} bold>Network Map<//><${Text} color=${C.muted}>  Static topology — routers · OLTs · access points<//>
+      <//>
+      <${Text} color=${C.separator}>${'─'.repeat(Math.max(1, bw))}<//>
+    <//>`;
+
+  if (loading) return html`
+    <${Box} flexDirection="column">
+      ${header}
+      <${Box} paddingX=${2} paddingY=${1} gap=${1}>
+        <${Spinner} type=${spinnerType} /><${Text} color=${C.muted}> Building topology…<//>
+      <//>
+    <//>`;
+
+  if (error || !data) return html`
+    <${Box} flexDirection="column">
+      ${header}
+      <${Box} paddingX=${2} paddingY=${1} flexDirection="column">
+        <${Text} color=${C.error}>${error || 'No data'}<//>
+        <${Text} color=${C.muted} dimColor>Press r to retry<//>
+      <//>
+    <//>`;
+
+  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 },
+  ].filter((t) => t.items.length > 0);
+
+  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}>
+
+        <!-- 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}>    ║  <//>
+          <${Text} color=${C.brand} bold>  INTERNET  <//>
+          <${Text} color=${C.muted}>  ║<//>
+        <//>
+        <${Box}>
+          <${Text} color=${C.muted}>    ╚══════╤═══════╝<//>
+        <//>
+
+        <!-- Each tier rendered as a branch under the topology tree -->
+        ${tiers.map((tier, ti) => {
+          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;
+
+          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}>    │ <//>
+                <${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}>    └─┬────────────────────────────────<//>
+              <//>
+
+              <!-- Device rows -->
+              ${shown.map((d, i) => {
+                const st = devStatus(d);
+                const { dot, color } = statusDot(d);
+                const isLastItem = i === shown.length - 1 && hidden === 0;
+                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}>     ${branch} <//>
+                    <${Text} color=${color}>${dot} <//>
+                    <${Text}>${name}<//>
+                    <${Text} color=${C.muted}>${ip}<//>
+                    <${Text} color=${badgeColor} bold>[${badge}]<//>
+                    ${ago ? html`<${Text} color=${C.muted} dimColor>  ${ago}<//>` : null}
+                  <//>`;
+              })}
+              ${hidden > 0
+                ? html`<${Box}><${Text} color=${C.muted} dimColor>       └─ …+${hidden} more<//>  <//>` 
+                : null}
+            <//>`;
+        })}
+
+        <!-- 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${ts ? '  ' + midDot() + '  updated ' + ts : ''}  ${midDot()}  ● up  ○ down  ◌ unknown  ${midDot()}  /topology for AI analysis<//>
+      <//>
+    <//>`;
+}