From 9106e5a071056050152558fd243faa1cae3ccaf2 Mon Sep 17 00:00:00 2001
From: Jon Vanvik <jon@vanvikinternet.no>
Date: Tue, 23 Jun 2026 13:45:24 +0200
Subject: [PATCH] Add top tabs + telemetry Dashboard + animated edge glow

Restructure the UI behind top-level tabs (Dashboard / ONU / OLT) so more
features have room to land. showView() now drives the active tab via a
VIEW_TO_TAB map, so sub-views (campaign/verify) keep the ONU tab lit.
Tabs appear on login (landing on Dashboard) and hide on logout.

Dashboard: a read-only network telemetry view modeled on the PONGo iOS
app's DashboardViewModel. New api:dashboardStats aggregates, all in
main.js (renderer just formats):
- counts: ONUs, OLTs, controllers (controllers best-effort via
  /v3/controllers/configs/)
- aggregate traffic (OLT TX BW = downstream, RX BW = upstream)
- health: OLTs with laser off; abnormal-Rx count (rx < -28 || > -10)
- ONU registration-state breakdown (clicking a state deep-links to the
  ONU tab pre-filtered)
- opt-in detailed scan: per-ONU optical + FEC-health distribution
fmtBps is a port of the iOS Format.bps.

Edge glow: #edge-glow draws a neon conic-gradient beam masked to a 3px
border ring and spins an @property --beam-angle 0->360deg, so a glow
travels around the screen edge. Honors prefers-reduced-motion.

mcms-api: add listAllControllerConfigs.
Docs: CLAUDE.md section 15 + README + IPC table.

Verified: npm run check passes; rendered the Dashboard + tabs + edge beam
offscreen (beam frozen on the right edge to confirm it follows the border).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 CLAUDE.md           |  63 ++++++++++++++--
 README.md           |  15 ++--
 main.js             | 113 +++++++++++++++++++++++++++++
 preload.js          |   2 +
 renderer/app.css    | 141 ++++++++++++++++++++++++++++++++++++
 renderer/app.js     | 170 +++++++++++++++++++++++++++++++++++++++++++-
 renderer/index.html |  30 ++++++++
 src/mcms-api.js     |  11 +++
 8 files changed, 533 insertions(+), 12 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index fdf8301..050aa24 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -12,12 +12,13 @@ is the engineering counterpart.
 
 ## 1. What this app does
 
-Electron desktop client for two bulk operations against **Ciena
-MCMS 6.2** PON Manager:
+Electron desktop client for operating a **Ciena MCMS 6.2** PON Manager
+fleet. Top-level **tabs** (Dashboard / ONU / OLT) switch between:
 
-1. **Bulk ONU firmware upgrades** (the original purpose).
-2. **Bulk OLT PON flooding-mode changes** (private↔auto on NNI services —
-   see §14).
+- **Dashboard** — read-only network telemetry (see §15).
+- **ONU** — the fleet table + firmware-upgrade campaign + verify flows
+  (the original purpose: bulk ONU firmware upgrades).
+- **OLT** — bulk OLT PON flooding-mode changes (private↔auto, see §14).
 
 Reference deployment: GNXS / Tibit MicroPlug ONUs running Interos Everest
 (EV051xxR / EV052xxR firmware family) behind Tibit OLTs.
@@ -122,6 +123,7 @@ stream progress events back to the renderer.
 | `api:executeBulkTask` | Procedure 8 — single AUTO-TASK-CFG | — |
 | `api:getTaskConfig` / `api:getUpgradeStatus` | poll helpers | — |
 | `api:deleteOnus` | bulk delete (CFG + best-effort STATE) | `delete:progress` |
+| `api:dashboardStats` | network telemetry aggregates (Dashboard tab) | — |
 | `api:listOlts` | OLT-CFG list + per-OLT NNI flood-mode summary | — |
 | `api:executeFloodChange` | bulk PON flooding-mode flip (GET→plan→PUT) | `olt-flood:progress` |
 | `api:fetchFecHealth` | pre-flight FEC pre/post + optical | `fec:progress` |
@@ -721,4 +723,55 @@ entries pass through untouched.
 
 ---
 
+## 15. Tabbed navigation & Dashboard
+
+### Tabs
+
+The topbar holds a `<nav id="tabs">` (Dashboard / ONU / OLT), hidden until
+login. Navigation goes through the existing `showView(id)` — it now also
+sets the active tab via the `VIEW_TO_TAB` map, so sub-views keep the right
+tab lit (campaign/verify → ONU). To add a tab: add a `.tab` button with
+`data-view="#view-x"` in `index.html`, a `#view-x` section, and a
+`VIEW_TO_TAB` entry. Login lands on Dashboard; logout hides the tabs and
+clears `state.dashboard`.
+
+### Dashboard telemetry
+
+Modeled on the PONGo iOS app's `DashboardViewModel`
+(`ssh://…/Svorka/PONGo_ios.git`). One IPC call, `api:dashboardStats`,
+returns aggregates computed in `main.js` — the renderer only formats them.
+
+**Light path (default)** — everything from the small OLT-STATE docs, no
+per-ONU fetches:
+
+- OLT count; ONU total + registration-state breakdown (the same
+  `OLT-STATE["ONU States"]` buckets as `api:listFleet`, Procedure 2).
+- Aggregate traffic — **OLT TX BW = downstream, RX BW = upstream**, summed
+  over `STATS["OLT-PON"]["TX|RX BW Ethernet Rate bps"]`.
+- OLTs with laser off — `OLT["Laser Shutdown"] != "Laser ON"`.
+- Controllers count via `listAllControllerConfigs` (`/v3/controllers/
+  configs/`) — **best-effort**, wrapped in try/catch (returns `null` if the
+  build doesn't expose it; UI shows "—").
+
+**Detailed path (`extraStats`, opt-in toggle)** — pulls every ONU-STATE
+(heavy, like a fleet load) to add: abnormal-Rx count (`rx < −28 || rx >
+−10` dBm, the iOS `OpticalThreshold.rxAbnormal` rule) and the FEC-health
+distribution via `extractOnuHealth`.
+
+The ONU-state rows drill down: clicking one sets `#filter-status` and jumps
+to the ONU tab (loading the fleet if needed). `fmtBps` in `app.js` is a
+port of the iOS `Format.bps`.
+
+### Animated edge glow
+
+`#edge-glow` is a fixed, pointer-events-none full-viewport element. A
+`conic-gradient(from var(--beam-angle), …)` with a white-hot core is masked
+to just the 3px border ring (the standard `mask` + `mask-composite:
+exclude` border trick) and animated by spinning the `@property
+--beam-angle` 0→360°, so a neon beam travels around the screen edge.
+Respects `prefers-reduced-motion`. z-index sits below the scanline overlay
+(9999) and modals (10000).
+
+---
+
 *Last updated: 2026-06-23.*
diff --git a/README.md b/README.md
index b3e4df0..9ca0a21 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,15 @@
 # PON Fleet Upgrader
 
-An Electron desktop app for bulk operations against a **Ciena
-MicroClimate Management System (MCMS) 6.2** PON Manager. It does two
-things:
+An Electron desktop app for operating a **Ciena MicroClimate Management
+System (MCMS) 6.2** PON Manager. Top tabs split it into:
 
-1. **Bulk ONU firmware upgrades** (below).
-2. **Bulk OLT PON flooding-mode changes** (private↔auto on NNI services —
-   see "OLT PON flooding mode" below).
+1. **Dashboard** — read-only network telemetry: ONU/OLT/controller counts,
+   aggregate up/down traffic, health (abnormal Rx, lasers off), and ONU
+   registration-state breakdown (with an opt-in per-ONU Rx/FEC scan).
+   Clicking a state jumps to the ONU tab pre-filtered.
+2. **ONU** — the fleet table plus **bulk ONU firmware upgrades** (below).
+3. **OLT** — **bulk OLT PON flooding-mode changes** (private↔auto on NNI
+   services — see "OLT PON flooding mode" below).
 
 ## ONU firmware upgrades
 
diff --git a/main.js b/main.js
index 40310d5..a6c7cfe 100644
--- a/main.js
+++ b/main.js
@@ -706,3 +706,116 @@ ipcMain.handle('api:executeFloodChange', async (event, opts) => {
     return { ok: false, error: toWireError(err) };
   }
 });
+
+// ---- Dashboard telemetry --------------------------------------------
+
+function toNum(v) {
+  if (typeof v === 'number') return Number.isFinite(v) ? v : null;
+  if (typeof v === 'string' && v.trim() !== '' && Number.isFinite(Number(v))) return Number(v);
+  return null;
+}
+
+/**
+ * Network-wide telemetry for the Dashboard tab, modeled on the PONGo iOS
+ * app's DashboardViewModel. The "light" path is cheap — everything below
+ * comes from the small OLT-STATE docs:
+ *   - OLT count
+ *   - ONU total + registration-state breakdown (OLT-STATE "ONU States"
+ *     buckets, dev guide Procedure 2)
+ *   - aggregate traffic: OLT TX BW = downstream, RX BW = upstream
+ *     (STATS["OLT-PON"]["TX|RX BW Ethernet Rate bps"])
+ *   - OLTs with the laser shut down (OLT["Laser Shutdown"] != "Laser ON")
+ * Controllers count is best-effort (not on every build).
+ *
+ * The heavy per-ONU optical/FEC scan (pull every ONU-STATE) runs only
+ * when `extraStats` is set — same opt-in as the iOS "Rx scan" toggle.
+ */
+ipcMain.handle('api:dashboardStats', async (_ev, opts) => {
+  try {
+    const c = requireClient();
+    const extraStats = !!(opts && opts.extraStats);
+
+    const olts = await c.listAllOltStates();
+    const oltCount = olts.length;
+
+    // Registration map: onuId -> bucket. Prefer a non-Registered bucket on
+    // duplicates (the interesting signal), matching api:listFleet.
+    const stateByOnu = new Map();
+    for (const olt of olts) {
+      const buckets = olt?.['ONU States'] || {};
+      for (const [bucket, ids] of Object.entries(buckets)) {
+        if (!Array.isArray(ids)) continue;
+        for (const id of ids) {
+          const existing = stateByOnu.get(id);
+          if (!existing || existing === 'Registered') stateByOnu.set(id, bucket);
+        }
+      }
+    }
+    const onuTotal = stateByOnu.size;
+    const stateCounts = {};
+    for (const s of stateByOnu.values()) stateCounts[s] = (stateCounts[s] || 0) + 1;
+    const onuCounts = Object.entries(stateCounts)
+      .map(([state, count]) => ({ state, count }))
+      .sort((a, b) => b.count - a.count);
+
+    // Aggregate traffic + laser state from OLT-STATE.
+    let downBps = 0, upBps = 0, trafficSeen = false;
+    const lasersOff = [];
+    for (const olt of olts) {
+      const pon = olt?.STATS?.['OLT-PON'] || {};
+      const tx = toNum(pon['TX BW Ethernet Rate bps']);
+      const rx = toNum(pon['RX BW Ethernet Rate bps']);
+      if (tx !== null) { downBps += tx; trafficSeen = true; }
+      if (rx !== null) { upBps += rx; trafficSeen = true; }
+      const laser = olt?.OLT?.['Laser Shutdown'];
+      if (typeof laser === 'string' && laser.toLowerCase() !== 'laser on') {
+        lasersOff.push({ oltId: olt._id, name: olt?.OLT?.Name || '', laser });
+      }
+    }
+
+    // Controllers — best-effort (some builds don't expose this).
+    let controllerCount = null;
+    try {
+      controllerCount = (await c.listAllControllerConfigs()).length;
+    } catch (_) { controllerCount = null; }
+
+    // Opt-in heavy scan: every ONU-STATE for optical + FEC health.
+    let optical = { available: false, abnormalRx: [], abnormalRxCount: 0 };
+    let fecCounts = null;
+    if (extraStats) {
+      const states = await c.listAllOnuStates();
+      const RX_LOW = -28, RX_HIGH = -10; // PONGo OpticalThreshold.rxAbnormal
+      const abnormalRx = [];
+      let available = false;
+      fecCounts = { ok: 0, pre: 0, post: 0, buggy: 0, nodata: 0, error: 0 };
+      for (const st of states) {
+        const health = extractOnuHealth(st);
+        if (fecCounts[health.flag] !== undefined) fecCounts[health.flag] += 1;
+        const rx = health.optical && typeof health.optical.rx === 'number' ? health.optical.rx : null;
+        if (rx !== null) {
+          available = true;
+          if (rx < RX_LOW || rx > RX_HIGH) {
+            abnormalRx.push({ onuId: st._id, rx, name: st?.ONU?.Name || '' });
+          }
+        }
+      }
+      optical = { available, abnormalRx, abnormalRxCount: abnormalRx.length };
+    }
+
+    return {
+      ok: true,
+      data: {
+        onuTotal, oltCount, controllerCount,
+        onuCounts,
+        traffic: trafficSeen ? { downBps, upBps } : null,
+        lasersOff,
+        optical,
+        fecCounts,
+        extraStats,
+        sampledAt: new Date().toISOString(),
+      },
+    };
+  } catch (err) {
+    return { ok: false, error: toWireError(err) };
+  }
+});
diff --git a/preload.js b/preload.js
index 831d08e..7449633 100644
--- a/preload.js
+++ b/preload.js
@@ -26,6 +26,8 @@ contextBridge.exposeInMainWorld('api', {
 
   deleteOnus: (opts) => call('api:deleteOnus', opts),
 
+  dashboardStats: (opts) => call('api:dashboardStats', opts),
+
   listOlts: (opts) => call('api:listOlts', opts),
   executeFloodChange: (opts) => call('api:executeFloodChange', opts),
 
diff --git a/renderer/app.css b/renderer/app.css
index b9170a6..b92c0a8 100644
--- a/renderer/app.css
+++ b/renderer/app.css
@@ -415,3 +415,144 @@ button.danger:hover:not(:disabled) {
 }
 .modal-type-label { display: block; }
 .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }
+
+/* -------- Animated neon edge glow (beam travels around the border) -------- */
+@property --beam-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+#edge-glow {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  pointer-events: none;
+  padding: 3px;                 /* thickness of the glowing border band */
+  background: conic-gradient(
+    from var(--beam-angle),
+    transparent 0deg,
+    transparent 38deg,
+    var(--cyan) 64deg,
+    #ffffff 90deg,
+    var(--neon) 116deg,
+    transparent 142deg,
+    transparent 360deg
+  );
+  /* Keep only the padding ring (border band); punch out the interior. */
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+          mask-composite: exclude;
+  filter: drop-shadow(0 0 8px var(--neon)) drop-shadow(0 0 22px var(--cyan));
+  animation: beamspin 7s linear infinite;
+}
+@keyframes beamspin { to { --beam-angle: 360deg; } }
+@media (prefers-reduced-motion: reduce) {
+  #edge-glow { animation: none; }
+}
+
+/* -------- Top tabs -------- */
+.tabs { display: flex; gap: 4px; margin-left: 18px; align-self: stretch; align-items: flex-end; }
+.tabs .tab {
+  background: transparent;
+  border: 1px solid transparent;
+  border-bottom: none;
+  border-radius: 7px 7px 0 0;
+  color: var(--fg-dim);
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 8px 18px;
+  box-shadow: none;
+}
+.tabs .tab:hover:not(.active) {
+  color: var(--neon);
+  border-color: transparent;
+  text-shadow: var(--glow-neon);
+  box-shadow: none;
+}
+.tabs .tab.active {
+  color: var(--neon);
+  border-color: var(--neon);
+  background: rgba(33, 200, 255, 0.1);
+  text-shadow: var(--glow-neon);
+  box-shadow: 0 0 12px rgba(33, 200, 255, 0.45), inset 0 0 14px rgba(33, 200, 255, 0.12);
+}
+
+/* -------- Dashboard -------- */
+.dash-wrap { overflow: hidden; }
+.dash-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+.dash-toggle { text-transform: none; letter-spacing: 0; color: var(--fg-dim); font-size: 12px; }
+
+.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.tile {
+  background: linear-gradient(180deg, rgba(33, 200, 255, 0.07), transparent 70%), var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 16px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  box-shadow: inset 0 0 26px rgba(33, 200, 255, 0.05);
+}
+.tile .tile-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--fg-dim); }
+.tile .tile-value { font-size: 34px; font-weight: 700; line-height: 1.05; color: var(--neon); text-shadow: var(--glow-neon-strong); font-variant-numeric: tabular-nums; }
+.tile .tile-sub { font-size: 11px; color: var(--fg-dim); }
+.tile.tile-teal .tile-value { color: var(--cyan); text-shadow: var(--glow-cyan); }
+.tile.tile-indigo .tile-value { color: var(--blue); text-shadow: 0 0 10px rgba(42, 123, 255, 0.75), 0 0 22px rgba(42, 123, 255, 0.4); }
+
+.dash-section { display: flex; flex-direction: column; gap: 8px; }
+.dash-section > h3 {
+  margin: 0;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  color: var(--neon);
+  text-shadow: var(--glow-neon);
+}
+.dash-card {
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 2px 14px;
+  box-shadow: inset 0 0 22px rgba(33, 200, 255, 0.04);
+}
+.dash-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 2px;
+  border-bottom: 1px solid var(--border);
+}
+.dash-row:last-child { border-bottom: none; }
+.dash-row.tappable { cursor: pointer; }
+.dash-row.tappable:hover { background: rgba(33, 200, 255, 0.06); }
+.dash-row .dash-row-main { display: flex; flex-direction: column; gap: 2px; }
+.dash-row .dash-row-sub { font-size: 11px; color: var(--fg-dim); }
+.dash-num { font-variant-numeric: tabular-nums; font-weight: 700; }
+
+.dash-traffic { display: flex; gap: 36px; padding: 6px 2px; }
+.dash-traffic .t-block { display: flex; flex-direction: column; gap: 4px; }
+.dash-traffic .t-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); }
+.dash-traffic .t-val { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.dash-traffic .t-down { color: var(--neon); text-shadow: var(--glow-neon); }
+.dash-traffic .t-up { color: var(--cyan); text-shadow: var(--glow-cyan); }
+
+.dash-pill {
+  display: inline-block;
+  padding: 2px 9px;
+  border-radius: 999px;
+  border: 1px solid currentColor;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
diff --git a/renderer/app.js b/renderer/app.js
index a9bcf98..5bf7a7e 100644
--- a/renderer/app.js
+++ b/renderer/app.js
@@ -14,15 +14,28 @@ const state = {
   olts: [],            // result of listOlts
   oltFiltered: [],     // current visible OLTs
   oltSelected: new Set(),
+  dashboard: null,     // result of dashboardStats (null until first load)
 };
 
 // -------- Helpers --------
 const $ = (sel) => document.querySelector(sel);
 const $$ = (sel) => document.querySelectorAll(sel);
 
+// Which top tab "owns" each view, so sub-views (campaign/verify) keep the
+// ONU tab highlighted and showView() callers don't each have to know.
+const VIEW_TO_TAB = {
+  '#view-dashboard': 'dashboard',
+  '#view-fleet': 'onu',
+  '#view-campaign': 'onu',
+  '#view-verify': 'onu',
+  '#view-olts': 'olt',
+};
+
 function showView(id) {
   for (const v of $$('.view')) v.classList.add('hidden');
   $(id).classList.remove('hidden');
+  const tab = VIEW_TO_TAB[id] || null;
+  for (const t of $$('.tab')) t.classList.toggle('active', t.dataset.tab === tab);
 }
 
 function activeBank(cfg) {
@@ -220,17 +233,31 @@ $('#btn-login').addEventListener('click', async () => {
   }
   $('#session-label').textContent = `${username} @ ${baseUrl}`;
   $('#btn-logout').classList.remove('hidden');
-  showView('#view-fleet');
+  $('#tabs').classList.remove('hidden');
+  showView('#view-dashboard');
+  loadDashboard();
 });
 
 $('#btn-logout').addEventListener('click', async () => {
   await window.api.logout();
   $('#session-label').textContent = 'Not connected';
   $('#btn-logout').classList.add('hidden');
+  $('#tabs').classList.add('hidden');
   state.fleet = []; state.filtered = []; state.selected.clear();
+  state.dashboard = null;
   showView('#view-login');
 });
 
+// -------- Top tab navigation --------
+for (const tab of $$('.tab')) {
+  tab.addEventListener('click', () => {
+    const view = tab.dataset.view;
+    showView(view);
+    // Dashboard loads itself on first visit; other tabs load on demand.
+    if (view === '#view-dashboard' && !state.dashboard) loadDashboard();
+  });
+}
+
 // -------- Fleet loading + filtering --------
 $('#btn-refresh').addEventListener('click', loadFleet);
 
@@ -1521,3 +1548,144 @@ $('#btn-olt-execute').addEventListener('click', async () => {
   // Refresh the table so the user sees the new state.
   await loadOlts();
 });
+
+// -------- Dashboard: network telemetry --------
+
+$('#dash-refresh').addEventListener('click', loadDashboard);
+$('#dash-extra').addEventListener('change', loadDashboard);
+
+// Bit-rate formatter, ported from the iOS app's Format.bps.
+function fmtBps(v) {
+  if (typeof v !== 'number' || !(v >= 0)) return '—';
+  const units = ['bps', 'kbps', 'Mbps', 'Gbps', 'Tbps'];
+  let x = v, i = 0;
+  while (x >= 1000 && i < units.length - 1) { x /= 1000; i += 1; }
+  const digits = (i === 0 || x >= 100) ? 0 : 1;
+  return `${x.toFixed(digits)} ${units[i]}`;
+}
+
+function statePillClass(stateName) {
+  if (stateName === 'Registered') return 'status-ok';
+  if (DOWN_STATUSES.has(stateName)) return 'status-err';
+  return 'status-pending';
+}
+
+function optionExists(selectSel, value) {
+  return Array.from($(selectSel).options).some((o) => o.value === value);
+}
+
+function dashHealthRow(title, detail, count) {
+  const cls = count > 0 ? 'status-warn' : 'status-ok';
+  return `<div class="dash-row">
+    <span class="dash-row-main">${escapeHtml(title)}${detail ? `<span class="dash-row-sub">${escapeHtml(detail)}</span>` : ''}</span>
+    <span class="dash-num ${cls}">${count}</span>
+  </div>`;
+}
+
+async function loadDashboard() {
+  const extra = $('#dash-extra').checked;
+  $('#dash-status').textContent = extra
+    ? 'Loading network + per-ONU Rx/FEC scan… (this fetches every ONU-STATE)'
+    : 'Loading network overview…';
+  $('#dash-refresh').disabled = true;
+  const res = await window.api.dashboardStats({ extraStats: extra });
+  $('#dash-refresh').disabled = false;
+  if (!res.ok) {
+    $('#dash-status').textContent = `Error: ${res.error?.message || 'unknown'}`;
+    return;
+  }
+  state.dashboard = res.data;
+  renderDashboard(res.data);
+}
+
+function renderDashboard(d) {
+  // --- Count tiles ---
+  const tiles = [
+    { label: 'ONUs', value: d.onuTotal, cls: '', sub: 'across all OLTs' },
+    { label: 'OLTs', value: d.oltCount, cls: 'tile-teal', sub: '' },
+    {
+      label: 'Controllers',
+      value: d.controllerCount === null ? '—' : d.controllerCount,
+      cls: 'tile-indigo',
+      sub: d.controllerCount === null ? 'not exposed on this build' : '',
+    },
+  ];
+  $('#dash-tiles').innerHTML = tiles.map((t) => `
+    <div class="tile ${t.cls}">
+      <span class="tile-label">${escapeHtml(t.label)}</span>
+      <span class="tile-value">${escapeHtml(String(t.value))}</span>
+      ${t.sub ? `<span class="tile-sub">${escapeHtml(t.sub)}</span>` : ''}
+    </div>`).join('');
+
+  const sections = [];
+
+  // --- Traffic ---
+  if (d.traffic) {
+    sections.push(`
+      <div class="dash-section">
+        <h3>Traffic · all OLTs</h3>
+        <div class="dash-card">
+          <div class="dash-traffic">
+            <div class="t-block"><span class="t-label">↓ Downstream</span><span class="t-val t-down">${escapeHtml(fmtBps(d.traffic.downBps))}</span></div>
+            <div class="t-block"><span class="t-label">↑ Upstream</span><span class="t-val t-up">${escapeHtml(fmtBps(d.traffic.upBps))}</span></div>
+          </div>
+        </div>
+      </div>`);
+  }
+
+  // --- Health ---
+  const healthRows = [];
+  if (d.optical && d.optical.available) {
+    healthRows.push(dashHealthRow('ONUs with abnormal Rx', '< −28 or > −10 dBm', d.optical.abnormalRxCount));
+  }
+  healthRows.push(dashHealthRow('OLTs with laser off', null, (d.lasersOff || []).length));
+  sections.push(`
+    <div class="dash-section">
+      <h3>Health</h3>
+      <div class="dash-card">${healthRows.join('')}</div>
+    </div>`);
+
+  // --- ONU registration states (click → ONU tab, filtered) ---
+  if (d.onuCounts && d.onuCounts.length) {
+    const rows = d.onuCounts.map((r) => `
+      <div class="dash-row tappable" data-status="${escapeHtml(r.state)}" title="Show these in the ONU tab">
+        <span class="dash-pill ${statePillClass(r.state)}">${escapeHtml(r.state)}</span>
+        <span class="dash-num">${r.count}</span>
+      </div>`).join('');
+    sections.push(`<div class="dash-section"><h3>ONU states</h3><div class="dash-card">${rows}</div></div>`);
+  }
+
+  // --- ONU FEC health (only with the detailed scan) ---
+  if (d.fecCounts) {
+    const order = [
+      ['ok', 'Healthy', 'status-ok'],
+      ['pre', 'Pre-FEC only (marginal)', 'status-warn'],
+      ['post', 'Post-FEC errors', 'status-err'],
+      ['buggy', 'Buggy (pre ≈ post)', 'status-info'],
+      ['nodata', 'No FEC data', 'status-pending'],
+      ['error', 'Fetch error', 'status-pending'],
+    ];
+    const rows = order
+      .filter(([k]) => k === 'ok' || (d.fecCounts[k] || 0) > 0)
+      .map(([k, label, cls]) =>
+        `<div class="dash-row"><span class="${cls}">${escapeHtml(label)}</span><span class="dash-num">${d.fecCounts[k] || 0}</span></div>`)
+      .join('');
+    sections.push(`<div class="dash-section"><h3>ONU FEC health</h3><div class="dash-card">${rows}</div></div>`);
+  }
+
+  $('#dash-sections').innerHTML = sections.join('');
+
+  // Drill-down: clicking an ONU-state row jumps to the ONU tab pre-filtered.
+  for (const row of $$('#dash-sections .dash-row.tappable')) {
+    row.addEventListener('click', () => {
+      const status = row.dataset.status;
+      $('#filter-status').value = optionExists('#filter-status', status) ? status : '';
+      showView('#view-fleet');
+      if (!state.fleet.length) loadFleet(); else applyFilters();
+    });
+  }
+
+  const stamp = d.sampledAt ? new Date(d.sampledAt).toLocaleTimeString() : '';
+  $('#dash-status').textContent =
+    `${d.onuTotal} ONUs · ${d.oltCount} OLTs${d.extraStats ? ' · detailed scan' : ''}${stamp ? ' · ' + stamp : ''}`;
+}
diff --git a/renderer/index.html b/renderer/index.html
index 2ff911a..b1c09ab 100644
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -6,8 +6,16 @@
   <link rel="stylesheet" href="app.css" />
 </head>
 <body>
+  <!-- Animated neon beam that travels around the screen edge. -->
+  <div id="edge-glow" aria-hidden="true"></div>
+
   <header class="topbar">
     <div class="brand">PON Fleet Upgrader</div>
+    <nav id="tabs" class="tabs hidden">
+      <button class="tab" data-tab="dashboard" data-view="#view-dashboard">Dashboard</button>
+      <button class="tab" data-tab="onu" data-view="#view-fleet">ONU</button>
+      <button class="tab" data-tab="olt" data-view="#view-olts">OLT</button>
+    </nav>
     <div class="session" id="session-label">Not connected</div>
     <button id="btn-logout" class="ghost hidden">Disconnect</button>
   </header>
@@ -35,6 +43,28 @@
     </div>
   </section>
 
+  <!-- ================= Dashboard view ================= -->
+  <section id="view-dashboard" class="view hidden">
+    <div class="panel-main dash-wrap">
+      <div class="fleet-head">
+        <h2>Dashboard</h2>
+        <div class="row">
+          <label class="inline dash-toggle">
+            <input id="dash-extra" type="checkbox" />
+            Detailed stats (Rx / FEC scan)
+          </label>
+          <button id="dash-refresh" class="ghost">↻ Refresh</button>
+        </div>
+      </div>
+      <p class="muted small" id="dash-status">Connect and the network overview loads here.</p>
+
+      <div class="dash-scroll">
+        <div class="dash-grid" id="dash-tiles"></div>
+        <div id="dash-sections"></div>
+      </div>
+    </div>
+  </section>
+
   <!-- ================= Fleet view ================= -->
   <section id="view-fleet" class="view hidden">
     <div class="panel-left">
diff --git a/src/mcms-api.js b/src/mcms-api.js
index 6cb6370..12590b6 100644
--- a/src/mcms-api.js
+++ b/src/mcms-api.js
@@ -576,6 +576,17 @@ class McmsClient {
     return res.body;
   }
 
+  // --- Controllers (dashboard counts) ----------------------------------
+
+  /**
+   * Bulk-fetch all PON Controller config documents (CNTL-CFG). Used only
+   * for the dashboard "Controllers" count. Best-effort: not every MCMS
+   * build exposes this, so callers should tolerate a throw / 404.
+   */
+  async listAllControllerConfigs({ pageSize = 100 } = {}) {
+    return this._listPaginatedByNext('/v3/controllers/configs/', { pageSize });
+  }
+
   // --- Firmware inventory ----------------------------------------------
 
   async listOnuFirmware() {