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>

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

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

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">