ispbills-icli 8.7.0 → 8.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ispbills-icli",
-  "version": "8.7.0",
+  "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,9 +432,12 @@ 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 + 1;
+  const chromeRows = 2 + composerRows + 1 + chipsRows + 2; // +2 for two footer rows
   const viewportRows = Math.max(3, rows - chromeRows);
   const scrollPage = Math.max(4, viewportRows - 2);
 
@@ -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];
@@ -2090,11 +2124,15 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
   const cwdMaxLen = Math.max(12, cols - footerRightEstLen - (branch ? branch.length + 6 : 0) - 4);
   const cwd = shortenPath(process.cwd(), cwdMaxLen);
   const footerLeft = [cwd, branch ? `${glyphs.gitBranch}${branch}` : null].filter(Boolean).join(midDot());
-  const footerRight = hint
+  const footerInfoRight = streamerMode ? '' : [modelLabel, tokenLabel].filter(Boolean).join(midDot());
+  // Status row: working indicator when busy, key hints when idle, hint message when set
+  const footerStatusLeft = busy
+    ? `${glyphs.spinner} Working\u2026`
+    : hint
     ? hint
-    : streamerMode
-    ? ''
-    : [modelLabel, tokenLabel].filter(Boolean).join(midDot());
+    : `? 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` : '';
   const composerMode = shellMode ? 'shell' : mode;
 
   // ── Viewport slicing ───────────────────────────────────────────────────────
@@ -2154,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">
@@ -2210,9 +2252,16 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
 
         <${Box} paddingX=${1} width=${cols}>
           <${Box} flexGrow=${1}>
-            <${Text} color=${C.muted} wrap="truncate-end">${footerLeft}<//>
+            <${Text} color=${footerStatusColor} wrap="truncate-end">${footerStatusLeft}<//>
+          <//>
+          <${Text} color=${footerStatusColor} dimColor wrap="truncate-end">${footerStatusRight}<//>
+        <//>
+
+        <${Box} paddingX=${1} width=${cols}>
+          <${Box} flexGrow=${1}>
+            <${Text} color=${C.muted} dimColor wrap="truncate-end">${footerLeft}<//>
           <//>
-          <${Text} color=${hint ? C.warning : C.muted} wrap="truncate-end">${footerRight}<//>
+          <${Text} color=${C.muted} dimColor wrap="truncate-end">${footerInfoRight}<//>
         <//>
       <//>
     <//>`;

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

package/src/tui/mouse.js

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from './dom.js';
-import { useStdin } from 'ink';
 
 function parseMouseData(chunk, emit) {
   let i = 0;
@@ -28,15 +27,16 @@ function parseMouseData(chunk, emit) {
   return '';
 }
 
+// Read directly from process.stdin (before Ink's filtered stream) so we see
+// the raw mouse escape sequences that the filter strips out in run.js.
 export function useMouse(handler, enabled = true) {
-  const { stdin } = useStdin();
   const handlerRef = useRef(handler);
   const bufferRef = useRef('');
 
   handlerRef.current = handler;
 
   useEffect(() => {
-    if (!enabled || !stdin) return;
+    if (!enabled) return;
 
     try { process.stdout.write('\x1b[?1000h\x1b[?1006h'); } catch {}
 
@@ -47,11 +47,11 @@ export function useMouse(handler, enabled = true) {
       });
     };
 
-    stdin.on('data', onData);
+    process.stdin.on('data', onData);
     return () => {
-      stdin.off('data', onData);
+      process.stdin.off('data', onData);
       bufferRef.current = '';
       try { process.stdout.write('\x1b[?1000l\x1b[?1006l'); } catch {}
     };
-  }, [enabled, stdin]);
+  }, [enabled]);
 }

package/src/tui/run.js

@@ -1,9 +1,58 @@
 // Ink render entrypoint. Runs the TUI in a full-screen ALT-SCREEN viewport.
 import { html } from './dom.js';
 import { render } from 'ink';
+import { Transform } from 'stream';
 import { App } from './app.js';
 import { saveConfig } from '../config.js';
 
+// ── Mouse sequence filter ────────────────────────────────────────────────────
+// Strips SGR (\x1b[<N;N;N[Mm]) and X10 (\x1b[M + 3 bytes) mouse escape
+// sequences from the stdin stream before Ink sees it. Without this, unrecognised
+// CSI sequences leak into the composer as raw characters when clicking/scrolling.
+// mouse.js reads from process.stdin directly (before this filter) to get events.
+class MouseFilterTransform extends Transform {
+  constructor() {
+    super();
+    this.isTTY = process.stdin.isTTY;
+    this.setRawMode = process.stdin.setRawMode
+      ? (mode) => process.stdin.setRawMode(mode)
+      : undefined;
+    this._buf = '';
+  }
+
+  _transform(chunk, _enc, cb) {
+    const text = Buffer.isBuffer(chunk) ? chunk.toString('latin1') : String(chunk);
+    this._buf += text;
+    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
+      }
+      out += this._buf[i++];
+    }
+    this._buf = this._buf.slice(i);
+    if (out) this.push(out);
+    cb();
+  }
+
+  _flush(cb) {
+    if (this._buf) { this.push(this._buf); this._buf = ''; }
+    cb();
+  }
+}
+
 // ── Alt-screen management ────────────────────────────────────────────────────
 // Switch to the alternate terminal buffer so the TUI owns the full viewport and
 // nothing leaks into the user's native scrollback. Must run BEFORE Ink renders.
@@ -124,6 +173,11 @@ export async function runTui(cfg, opts = {}) {
     try { saveConfig(cfg); } catch {}
   }
 
+  // Pipe raw stdin through the mouse filter so Ink never sees mouse escape
+  // sequences. mouse.js reads from process.stdin directly to capture events.
+  const mouseFilter = new MouseFilterTransform();
+  process.stdin.pipe(mouseFilter);
+
   const instance = render(
     html`<${App}
       cfg=${cfg}
@@ -134,7 +188,7 @@ export async function runTui(cfg, opts = {}) {
       resumeMode=${resumeMode}
       onExternal=${(a) => { externalAction = a; onExternal?.(a); }}
     />`,
-    { exitOnCtrlC: false },
+    { exitOnCtrlC: false, stdin: mouseFilter },
   );
 
   try {