ispbills-icli 8.7.1 → 8.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ispbills-icli",
-  "version": "8.7.1",
+  "version": "8.7.2",
   "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,241 @@ 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 };
+}
+
+// ── 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.<//>
+      <//>
+    <//>`;
+
+  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)));
+
+  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}>
+        ${groups.map((g) => {
+          const { on, off, other } = statusCounts(g.items);
+          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}>
+              <${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}
+              <//>
+              ${shown.map((d, i) => {
+                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) : '';
+                return html`
+                  <${Box} key=${d.id}>
+                    <${Text} color=${C.muted}>${tree}<//>
+                    <${Text} color=${color}>${dot} <//>
+                    <${Text}>${name}<//>
+                    <${Text} color=${C.muted}>${ip}<//>
+                    <${Text} color=${C.muted} dimColor>${extra}<//>
+                  <//>`;
+              })}
+              ${hidden > 0
+                ? html`<${Box}><${Text} color=${C.muted} dimColor>   └─ …and ${hidden} more<//>  <//>` 
+                : 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()}  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 = Math.max(4, Math.floor((cols > 100 ? 10 : 6)));
+  const indent = '   ';
+
+  return html`
+    <${Box} flexDirection="column">
+      ${header}
+      <${Box} flexDirection="column" paddingX=${2} paddingY=${0}>
+
+        <${Box} marginTop=${1} marginBottom=${0}>
+          <${Text} color=${C.muted}>${indent}┌─────────────┐<//>
+        <//>
+        <${Box}>
+          <${Text} color=${C.muted}>${indent}│<//>
+          <${Text} color=${C.brand} bold>  Internet    <//>
+          <${Text} color=${C.muted}>│<//>
+        <//>
+        <${Box} marginBottom=${0}>
+          <${Text} color=${C.muted}>${indent}└──────┬──────┘<//>
+        <//>
+
+        ${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 isLast = ti === tiers.length - 1;
+          const nameW  = Math.max(18, Math.floor(cols * 0.3));
+
+          return html`
+            <${Box} key=${tier.label} flexDirection="column">
+              <${Box}>
+                <${Text} color=${C.muted}>${indent}       │<//>
+              <//>
+              <${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}↓<//>
+              <//>
+              ${shown.map((d, i) => {
+                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]' : '';
+                return html`
+                  <${Box} key=${d.id}>
+                    <${Text} color=${C.muted}>${indent}${tree} <//>
+                    <${Text} color=${color}>${dot} <//>
+                    <${Text} bold>${name}<//>
+                    <${Text} color=${C.muted}>${ip}<//>
+                    <${Text} color=${C.error} dimColor>${st}<//>
+                  <//>`;
+              })}
+              ${hidden > 0
+                ? html`<${Box}><${Text} color=${C.muted} dimColor>${indent}  └── …+${hidden} more<//><//>` 
+                : null}
+              ${!isLast
+                ? null
+                : html`<${Box}><${Text} color=${C.muted}>${indent}       │   (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<//>
+      <//>
+    <//>`;
+}