Redesign topology diagram with dual-homed bus layout and improve inspector chassis

- Replace flat topology with tiered bus-bar layout: Internet → UDM-Pro → SVG fork → USW-Agg + Pro 24 PoE → dual-homed servers
- Show 10G VLAN90 (Ceph) bus from USW-Agg and 1G DHCP management bus from Pro 24 PoE per host
- Add per-host drop wires (solid 10G + dashed 1G) with correct rack positions
- Mark large1 as off-rack (dashed border), ZimaBoards as off-rack mon-01/mon-02
- Add topology legend, inter-switch 10G ISL indicator
- Add recently resolved events section (last 24h) to dashboard
- Add last_seen column and relative timestamps to events table
- Add stale data banner when monitoring data >15 min old
- Improve inspector chassis with port speed labels, LLDP neighbor info, mounting ears, chassis legend
- Add duplex/speed mismatch warnings and carrier changes to path debug panel
- Bump updateTopology() to handle both topo-v2-status-* and topo-status-* classes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/app.js

@@ -109,7 +109,9 @@ function updateTopology(hosts) {
     const name = node.dataset.host;
     const host = hosts[name];
     if (!host) return;
+    node.className = node.className.replace(/topo-v2-status-(up|down|degraded|unknown)/g, '');
     node.className = node.className.replace(/topo-status-(up|down|degraded|unknown)/g, '');
+    node.classList.add(`topo-v2-status-${host.status}`);
     node.classList.add(`topo-status-${host.status}`);
     const badge = node.querySelector('.topo-badge');
     if (badge) {

static/style.css

@@ -1534,6 +1534,439 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-amber); }
   text-shadow: var(--glow-cyan);
 }
 
+/* ── Topology v2 – professional network diagram ──────────────────── */
+
+/* Outer wrapper */
+.topo-v2 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  min-width: 860px;
+  padding: 20px 24px 24px;
+  position: relative;
+}
+
+/* Each tier row */
+.topo-tier {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+/* ── Vertical connector section between tiers ── */
+.topo-vc {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+  position: relative;
+  height: 40px;
+}
+
+/* Single centered vertical wire */
+.topo-vc-wire {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  width: 2px;
+  height: 100%;
+  background: linear-gradient(to bottom, var(--cyan), var(--green));
+  opacity: .7;
+}
+
+/* Labeled vertical connector */
+.topo-vc-label {
+  position: absolute;
+  left: calc(50% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: .58em;
+  color: var(--amber);
+  text-shadow: var(--glow-amber);
+  white-space: nowrap;
+  letter-spacing: .06em;
+  font-family: var(--font);
+}
+
+/* ── WAN tier node (Internet + Router side by side) ── */
+.topo-tier-wan {
+  gap: 0;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* ── Individual node boxes ── */
+.topo-v2-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  padding: 8px 16px;
+  border: 1px solid var(--border);
+  background: var(--bg3);
+  position: relative;
+  font-size: .75em;
+  font-family: var(--font);
+  min-width: 110px;
+  text-align: center;
+  transition: border-color .2s, box-shadow .2s;
+}
+.topo-v2-node::before { content:'┌'; position:absolute; top:-1px; left:-1px; color:var(--green); font-size:.85rem; line-height:1; pointer-events:none; }
+.topo-v2-node::after  { content:'┐'; position:absolute; top:-1px; right:-1px; color:var(--green); font-size:.85rem; line-height:1; pointer-events:none; }
+
+.topo-v2-icon  { font-size:1.3em; line-height:1; }
+.topo-v2-label { font-weight:bold; letter-spacing:.04em; }
+.topo-v2-sub   { font-size:.58em; color:var(--text-muted); letter-spacing:.02em; }
+.topo-v2-vlan  { font-size:.54em; color:var(--cyan); opacity:.75; letter-spacing:.02em; }
+
+/* Node type colours */
+.topo-v2-internet { border-color:var(--cyan);  color:var(--cyan);  text-shadow:var(--glow-cyan); }
+.topo-v2-router   { border-color:var(--cyan);  color:var(--cyan);  text-shadow:var(--glow-cyan); }
+.topo-v2-switch   { border-color:var(--amber); color:var(--amber); text-shadow:var(--glow-amber); }
+.topo-v2-host     { border-color:var(--border); color:var(--text); cursor:default; }
+
+/* ── Switch tier: both switches with inter-switch link ── */
+.topo-switch-pair {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.topo-isl {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 12px;
+  gap: 4px;
+}
+.topo-isl-wire {
+  width: 80px;
+  height: 2px;
+  background: linear-gradient(to right, var(--amber), var(--amber));
+  opacity: .6;
+  position: relative;
+}
+.topo-isl-wire::before,
+.topo-isl-wire::after {
+  content: '';
+  position: absolute;
+  top: -3px;
+  width: 2px;
+  height: 8px;
+  background: var(--amber);
+  opacity: .6;
+}
+.topo-isl-wire::before { left: 0; }
+.topo-isl-wire::after  { right: 0; }
+.topo-isl-label {
+  font-size: .54em;
+  color: var(--amber);
+  opacity: .75;
+  white-space: nowrap;
+  letter-spacing: .05em;
+  font-family: var(--font);
+}
+
+/* ── Dual-home bus section ── */
+/* This is the complex section linking two switches to N hosts */
+.topo-bus-section {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+  margin-top: 0;
+}
+
+/* Bus bar row: the horizontal rail that distributes to hosts */
+.topo-bus-bars {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  position: relative;
+  width: 100%;
+}
+
+/* The two drop buses: 10G (green) and 1G mgmt (amber dashed) */
+.topo-bus-10g {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 20px;
+}
+.topo-bus-10g-line {
+  flex: 1;
+  height: 2px;
+  background: var(--green);
+  opacity: .45;
+  margin: 0 4px;
+}
+.topo-bus-10g-label {
+  font-size: .56em;
+  color: var(--green);
+  text-shadow: var(--glow);
+  white-space: nowrap;
+  letter-spacing: .05em;
+  font-family: var(--font);
+  opacity: .85;
+  padding: 0 8px;
+}
+
+.topo-bus-1g {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 18px;
+}
+.topo-bus-1g-line {
+  flex: 1;
+  height: 0;
+  border-top: 2px dashed var(--amber);
+  opacity: .35;
+  margin: 0 4px;
+}
+.topo-bus-1g-label {
+  font-size: .56em;
+  color: var(--amber);
+  text-shadow: var(--glow-amber);
+  white-space: nowrap;
+  letter-spacing: .05em;
+  font-family: var(--font);
+  opacity: .8;
+  padding: 0 8px;
+}
+
+/* ── Host row ── */
+.topo-v2-hosts {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding-top: 4px;
+  width: 100%;
+}
+
+/* Host status colouring */
+.topo-v2-status-up      { border-color:var(--green);  box-shadow:0 0 8px rgba(0,255,65,.2); }
+.topo-v2-status-down    { border-color:var(--red);     box-shadow:0 0 8px rgba(255,68,68,.35); animation:pulse-glow 2s infinite; }
+.topo-v2-status-degraded{ border-color:var(--orange);  box-shadow:0 0 8px rgba(255,140,0,.2); }
+.topo-v2-status-unknown { border-color:var(--border); }
+
+/* Off-rack host: dashed border */
+.topo-v2-offrack { border-style: dashed !important; }
+
+/* ── Legend row ── */
+.topo-legend {
+  display: flex;
+  gap: 18px;
+  align-items: center;
+  margin-top: 14px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(0,255,65,.12);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.topo-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: .58em;
+  color: var(--text-muted);
+  font-family: var(--font);
+}
+.topo-legend-line-10g {
+  width: 24px; height: 2px;
+  background: var(--green);
+  display: inline-block;
+}
+.topo-legend-line-1g {
+  width: 24px; height: 0;
+  border-top: 2px dashed var(--amber);
+  display: inline-block;
+}
+.topo-legend-line-isl {
+  width: 24px; height: 2px;
+  background: var(--amber);
+  display: inline-block;
+}
+.topo-legend-line-wan {
+  width: 24px; height: 2px;
+  background: linear-gradient(to right, var(--cyan), var(--green));
+  display: inline-block;
+}
+
+/* ── Drop-wire stubs for host dual-homing ── */
+/* Wrapper that sits above each host showing its two connections */
+.topo-v2-host-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+}
+
+.topo-v2-host-wires {
+  display: flex;
+  gap: 6px;
+  height: 28px;
+  align-items: flex-start;
+}
+.topo-v2-wire-10g {
+  width: 2px;
+  height: 100%;
+  background: var(--green);
+  opacity: .55;
+}
+.topo-v2-wire-1g {
+  width: 0;
+  height: 100%;
+  border-left: 2px dashed var(--amber);
+  opacity: .45;
+}
+
+/* host badge */
+.topo-v2-badge {
+  font-size: .65em;
+  padding: 1px 5px;
+  border: 1px solid;
+  letter-spacing: .03em;
+  margin-top: 2px;
+}
+.topo-v2-badge-up      { color:var(--green);  border-color:var(--green);  text-shadow:var(--glow); }
+.topo-v2-badge-down    { color:var(--red);    border-color:var(--red);    animation:pulse-glow 1.5s infinite; }
+.topo-v2-badge-degraded{ color:var(--orange); border-color:var(--orange); }
+.topo-v2-badge-unknown { color:var(--text-muted); border-color:var(--border); }
+
+/* vertical connector from router to switch tier */
+.topo-v2-fork {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  height: 50px;
+}
+
+/* Fork tree SVG lines from UDM-Pro down to two switches */
+.topo-v2-fork svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+/* ── Improved chassis legend ── */
+.chassis-legend {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 7px 16px 8px;
+  border-top: 1px solid rgba(0,255,65,.1);
+  background: var(--bg2);
+  flex-wrap: wrap;
+}
+.chassis-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: .58em;
+  color: var(--text-muted);
+  font-family: var(--font);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+.chassis-legend-swatch {
+  width: 14px;
+  height: 14px;
+  border: 1px solid;
+  flex-shrink: 0;
+  display: inline-block;
+}
+.cls-down    { background:var(--bg3);       border-color:rgba(0,255,65,.15); }
+.cls-up      { background:rgba(0,255,65,.06); border-color:var(--green-muted); }
+.cls-poe     { background:var(--amber-dim); border-color:var(--amber); }
+.cls-uplink  { background:var(--cyan-dim);  border-color:var(--cyan); }
+
+/* ── Port block v2: flex-col with speed sub-label ── */
+.switch-port-block {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1px;
+  padding: 2px 1px;
+}
+.port-num {
+  line-height: 1;
+  font-weight: bold;
+}
+.port-speed {
+  font-size: .72em;
+  opacity: .7;
+  line-height: 1;
+  font-weight: normal;
+}
+.port-lldp {
+  font-size: .62em;
+  opacity: .65;
+  line-height: 1;
+  max-width: 32px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+  font-weight: normal;
+}
+
+/* US24PRO port group separators (every 2 ports = 1 pair gap) */
+.chassis-row.us24pro-row .switch-port-block:nth-child(2n+1):not(:first-child) {
+  margin-left: 6px;
+}
+
+/* SFP block: taller and narrower cage look */
+.switch-port-block.sfp-block {
+  width: 36px;
+  height: 38px;
+  font-size: .55em;
+  letter-spacing: .04em;
+  border-left-width: 3px;
+}
+/* SFP port in rows */
+.switch-port-block.sfp-port {
+  width: 26px;
+  height: 40px;
+  font-size: .55em;
+  border-left-width: 2px;
+}
+
+/* Chassis mounting ears */
+.chassis-body {
+  position: relative;
+}
+.chassis-ear-l,
+.chassis-ear-r {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 36px;
+  background: var(--bg3);
+  border: 1px solid var(--border);
+}
+.chassis-ear-l { left: -9px;  border-right: none; }
+.chassis-ear-r { right: -9px; border-left: none; }
+.chassis-ear-l::before,
+.chassis-ear-r::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
 /* ── Responsive ───────────────────────────────────────────────────── */
 @media (max-width: 768px) {
   .host-grid         { grid-template-columns:1fr; }

templates/index.html

@@ -29,96 +29,149 @@
   </div>
 
   <div class="topology" id="topology-diagram">
+  <div class="topo-v2">
 
-    <!-- ── Tier 1: Internet ───────────────────────── -->
-    <div class="topo-row">
-      <div class="topo-node topo-internet">
-        <span class="topo-icon">◈</span>
-        <span class="topo-label">Internet</span>
-      </div>
-    </div>
-    <div class="topo-connectors single">
-      <div class="topo-line topo-line-labeled" data-link-label="WAN 10G SFP+"></div>
-    </div>
-
-    <!-- ── Tier 2: Router ─────────────────────────── -->
-    <div class="topo-row">
-      <div class="topo-node topo-unifi">
-        <span class="topo-icon">⬡</span>
-        <span class="topo-label">UDM-Pro</span>
-        <span class="topo-node-sub">Dream Machine Pro · RU24</span>
-      </div>
-    </div>
-    <div class="topo-connectors single">
-      <div class="topo-line topo-line-labeled" data-link-label="10G DAC"></div>
-    </div>
-
-    <!-- ── Tier 3: Switches (Agg + PoE side by side) ─ -->
-    <div class="topo-row">
-      <div class="topo-switch-tier">
-        <div class="topo-node topo-switch" id="topo-switch-agg">
-          <span class="topo-icon">⬡</span>
-          <span class="topo-label">USW-Agg</span>
-          <span class="topo-node-sub">8×10G SFP+ · RU22</span>
-          <span class="topo-node-sub topo-vlan-tag">VLAN90 · 10.10.90.x</span>
-        </div>
-        <div class="topo-h-link">
-          <div class="topo-h-link-line"></div>
-          <span class="topo-h-link-label">10G SFP+</span>
-        </div>
-        <div class="topo-node topo-switch" id="topo-switch-poe">
-          <span class="topo-icon">⬡</span>
-          <span class="topo-label">Pro 24 PoE</span>
-          <span class="topo-node-sub">24×1G PoE · RU23</span>
-          <span class="topo-node-sub topo-vlan-tag">DHCP mgmt</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- ── Tier 4: Hosts (all dual-homed 10G + 1G) ── -->
-    <div class="topo-host-tier">
-      <div class="topo-host-group">
-
-        <!-- 10G static VLAN90 lines from Agg (primary / Ceph) -->
-        <div class="topo-connectors" style="gap:20px; justify-content:center">
-          <div class="topo-line topo-line-labeled" data-link-label="10G SFP+"></div>
-          <div class="topo-line"></div>
-          <div class="topo-line"></div>
-          <div class="topo-line"></div>
-          <div class="topo-line"></div>
-          <div class="topo-line topo-line-dashed"></div>
-        </div>
-
-        <!-- 1G management lines from PoE (dashed amber) -->
-        <!-- 1G DHCP management band from PoE switch -->
-        <div class="topo-mgmt-band">
-          <span class="topo-mgmt-label">← 1G DHCP mgmt (Pro 24 PoE) →</span>
-          <div class="topo-mgmt-line"></div>
-        </div>
-
-        <div class="topo-row topo-hosts-row">
     {%- set topo_h = snapshot.hosts if snapshot.hosts else {} -%}
+
+    <!-- ══════════════════════════════════════════════════════════════
+         TIER 1: Internet (WAN edge)
+         ══════════════════════════════════════════════════════════ -->
+    <div class="topo-tier">
+      <div class="topo-v2-node topo-v2-internet">
+        <span class="topo-v2-icon">◈</span>
+        <span class="topo-v2-label">INTERNET</span>
+        <span class="topo-v2-sub">WAN uplink</span>
+      </div>
+    </div>
+
+    <!-- WAN wire: cyan → green gradient, labeled -->
+    <div class="topo-vc">
+      <div class="topo-vc-wire" style="background:linear-gradient(to bottom,var(--cyan),var(--cyan)); opacity:.55;"></div>
+      <span class="topo-vc-label">WAN · 10G SFP+</span>
+    </div>
+
+    <!-- ══════════════════════════════════════════════════════════════
+         TIER 2: Router – UDM-Pro
+         ══════════════════════════════════════════════════════════ -->
+    <div class="topo-tier">
+      <div class="topo-v2-node topo-v2-router">
+        <span class="topo-v2-icon">⬡</span>
+        <span class="topo-v2-label">UDM-Pro</span>
+        <span class="topo-v2-sub">Dream Machine Pro</span>
+        <span class="topo-v2-sub">RU24</span>
+      </div>
+    </div>
+
+    <!-- Fork: UDM-Pro → two switches via SVG tree -->
+    <div class="topo-vc" style="height:56px; overflow:visible;">
+      <svg viewBox="0 0 400 56" preserveAspectRatio="none" style="width:100%;height:56px;overflow:visible;display:block;">
+        <!-- stem down from router -->
+        <line x1="200" y1="0" x2="200" y2="24" stroke="var(--green)" stroke-width="2" opacity=".6"/>
+        <!-- horizontal branch -->
+        <line x1="108" y1="24" x2="292" y2="24" stroke="var(--amber)" stroke-width="2" opacity=".5"/>
+        <!-- drop to Agg switch (left) -->
+        <line x1="108" y1="24" x2="108" y2="56" stroke="var(--amber)" stroke-width="2" opacity=".55"/>
+        <!-- drop to PoE switch (right) -->
+        <line x1="292" y1="24" x2="292" y2="56" stroke="var(--amber)" stroke-width="2" opacity=".55"/>
+        <!-- DAC label -->
+        <text x="204" y="21" fill="var(--amber)" font-size="9" font-family="monospace" opacity=".8">10G DAC</text>
+      </svg>
+    </div>
+
+    <!-- ══════════════════════════════════════════════════════════════
+         TIER 3: Switches (Agg + PoE)
+         ══════════════════════════════════════════════════════════ -->
+    <div class="topo-tier">
+      <div class="topo-switch-pair">
+
+        <!-- USW-Aggregation -->
+        <div class="topo-v2-node topo-v2-switch" id="topo-switch-agg" style="min-width:130px;">
+          <span class="topo-v2-icon">⬡</span>
+          <span class="topo-v2-label">USW-Agg</span>
+          <span class="topo-v2-sub">Aggregation · RU22</span>
+          <span class="topo-v2-sub">8 × 10G SFP+</span>
+          <span class="topo-v2-vlan">VLAN90 · 10.10.90.x/24</span>
+        </div>
+
+        <!-- Inter-switch link -->
+        <div class="topo-isl">
+          <div class="topo-isl-wire"></div>
+          <span class="topo-isl-label">10G SFP+</span>
+        </div>
+
+        <!-- Pro 24 PoE -->
+        <div class="topo-v2-node topo-v2-switch" id="topo-switch-poe" style="min-width:130px;">
+          <span class="topo-v2-icon">⬡</span>
+          <span class="topo-v2-label">Pro 24 PoE</span>
+          <span class="topo-v2-sub">24-Port · RU23</span>
+          <span class="topo-v2-sub">24 × 1G PoE</span>
+          <span class="topo-v2-vlan">DHCP · mgmt</span>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- ══════════════════════════════════════════════════════════════
+         TIER 4 connecting bus – two rails (10G green + 1G amber dashed)
+         showing dual-homing for all 6 servers
+         ══════════════════════════════════════════════════════════ -->
+    <div class="topo-bus-section" style="max-width:860px;">
+
+      <!-- 10G storage bus (Agg → VLAN90) -->
+      <div class="topo-bus-10g">
+        <span class="topo-bus-10g-label">← USW-Agg · 10G SFP+ · VLAN90 →</span>
+        <div class="topo-bus-10g-line"></div>
+      </div>
+
+      <!-- 1G management bus (PoE → DHCP) -->
+      <div class="topo-bus-1g">
+        <span class="topo-bus-1g-label">← Pro 24 PoE · 1G · DHCP mgmt →</span>
+        <div class="topo-bus-1g-line"></div>
+      </div>
+
+      <!-- ── Host nodes with drop wires ── -->
+      <div class="topo-v2-hosts">
         {%- set all_defs = [
-            ('compute-storage-gpu-01', 'csg-01',    'RU4–12 · VLAN90',    False),
+          ('compute-storage-gpu-01', 'csg-01',    'RU4–12',    'Ceph · VLAN90', False),
-            ('compute-storage-01',     'cs-01',     'RU14–17 · VLAN90',   False),
+          ('compute-storage-01',     'cs-01',     'RU14–17',   'Ceph · VLAN90', False),
-            ('storage-01',             'storage-01','rack · VLAN90',       False),
+          ('storage-01',             'sto-01',    'rack',      'Ceph · VLAN90', False),
-            ('monitor-01',             'monitor-01','ZimaBoard · VLAN90',  False),
+          ('monitor-01',             'mon-01',    'ZimaBoard', 'mgmt',          False),
-            ('monitor-02',             'monitor-02','ZimaBoard · VLAN90',  False),
+          ('monitor-02',             'mon-02',    'ZimaBoard', 'mgmt',          False),
-            ('large1',                 'large1',    'table · VLAN90',      True),
+          ('large1',                 'large1',    'off-rack',  'table',         True),
         ] -%}
-          {%- for hname, hlabel, hsub, off_rack in all_defs -%}
+        {%- for hname, hlabel, hsub, hvlan, off_rack in all_defs -%}
         {%- set st = topo_h[hname].status if hname in topo_h else 'unknown' -%}
-          <div class="topo-node topo-host{{ ' topo-host-table' if off_rack else '' }} topo-status-{{ st }}" data-host="{{ hname }}">
+        <div class="topo-v2-host-wrap">
-            <span class="topo-icon">▣</span>
+          <!-- dual-homing wires: 10G solid green + 1G dashed amber -->
-            <span class="topo-label">{{ hlabel }}</span>
+          <div class="topo-v2-host-wires">
-            <span class="topo-node-sub">{{ hsub }}</span>
+            <div class="topo-v2-wire-10g" title="10G SFP+ → USW-Agg"></div>
+            <div class="topo-v2-wire-1g"  title="1G → Pro 24 PoE"></div>
+          </div>
+          <!-- host box -->
+          <div class="topo-v2-node topo-v2-host topo-host topo-v2-status-{{ st }}{{ ' topo-v2-offrack' if off_rack else '' }}"
+               data-host="{{ hname }}" style="min-width:80px; max-width:96px;">
+            <span class="topo-v2-icon">▣</span>
+            <span class="topo-v2-label">{{ hlabel }}</span>
+            <span class="topo-v2-sub">{{ hsub }}</span>
+            <span class="topo-v2-vlan">{{ hvlan }}</span>
             <span class="topo-badge topo-badge-{{ st }}">{{ st if st != 'unknown' else '–' }}</span>
           </div>
+        </div>
         {%- endfor -%}
       </div>
 
+    </div><!-- /topo-bus-section -->
+
+    <!-- ── Legend ── -->
+    <div class="topo-legend">
+      <div class="topo-legend-item"><span class="topo-legend-line-wan"></span> WAN / uplink</div>
+      <div class="topo-legend-item"><span class="topo-legend-line-isl"></span> ISL / inter-switch</div>
+      <div class="topo-legend-item"><span class="topo-legend-line-10g"></span> 10G SFP+ (Ceph / VLAN90)</div>
+      <div class="topo-legend-item"><span class="topo-legend-line-1g"></span> 1G DHCP (mgmt)</div>
+      <div class="topo-legend-item" style="border:1px dashed var(--border); padding:1px 5px; font-size:.56em; color:var(--text-muted);">dashed border = off-rack</div>
     </div>
-    </div><!-- /topo-host-tier -->
+
+  </div><!-- /topo-v2 -->
   </div>
 
   <!-- Host cards -->

templates/inspector.html

@@ -84,16 +84,46 @@ function portBlockState(d) {
   return 'up';
 }
 
+// ── Speed label helper ───────────────────────────────────────────────────
+function portSpeedLabel(port) {
+  if (!port || !port.up) return '';
+  const spd = port.speed;   // speed in Mbps from UniFi API
+  if (!spd) return '';
+  if (spd >= 10000) return '10G';
+  if (spd >= 1000)  return '1G';
+  if (spd >= 100)   return '100M';
+  return spd + 'M';
+}
+
 // ── Render a single port block element ──────────────────────────────────
 function portBlockHtml(idx, port, swName, sfpBlock) {
   const state     = portBlockState(port);
-  const label = sfpBlock ? 'SFP' : idx;
+  const numLabel  = sfpBlock ? 'SFP' : idx;
   const title     = port ? escHtml(port.name) : `Port ${idx}`;
   const sfpCls    = sfpBlock ? ' sfp-block' : '';
+  const speedTxt  = portSpeedLabel(port);
+  // LLDP neighbor: first 6 chars of hostname
+  const lldpName  = (port && port.lldp_table && port.lldp_table.length)
+                    ? escHtml((port.lldp_table[0].chassis_id_subtype === 'local'
+                        ? port.lldp_table[0].chassis_id
+                        : port.lldp_table[0].system_name || port.lldp_table[0].chassis_id || '').slice(0, 6))
+                    : '';
+  const lldpHtml  = lldpName ? `<span class="port-lldp">${lldpName}</span>` : '';
+  const speedHtml = speedTxt ? `<span class="port-speed">${speedTxt}</span>` : '';
   return `<div class="switch-port-block ${state}${sfpCls}"
     data-switch="${escHtml(swName)}" data-port-idx="${idx}"
     title="${title}"
-    onclick="selectPort(this)">${label}</div>`;
+    onclick="selectPort(this)"><span class="port-num">${numLabel}</span>${speedHtml}${lldpHtml}</div>`;
+}
+
+// ── Chassis legend HTML ──────────────────────────────────────────────────
+function chassisLegendHtml() {
+  return `<div class="chassis-legend">
+    <div class="chassis-legend-item"><span class="chassis-legend-swatch cls-down"></span>down</div>
+    <div class="chassis-legend-item"><span class="chassis-legend-swatch cls-up"></span>up</div>
+    <div class="chassis-legend-item"><span class="chassis-legend-swatch cls-poe"></span>poe active</div>
+    <div class="chassis-legend-item"><span class="chassis-legend-swatch cls-uplink"></span>uplink</div>
+  </div>`;
 }
 
 // ── Render one switch chassis ────────────────────────────────────────────
@@ -107,6 +137,9 @@ function renderChassis(swName, sw) {
   const downCount = totCount - upCount;
   const meta = [model, `${upCount}/${totCount} up`, downCount ? `${downCount} down` : ''].filter(Boolean).join(' · ');
 
+  // Is this a US24PRO? Used to add group-separator class
+  const isUs24Pro = (model === 'US24PRO');
+
   let chassisHtml = '';
 
   if (layout) {
@@ -116,17 +149,26 @@ function renderChassis(swName, sw) {
     // Main port rows
     chassisHtml += '<div class="chassis-rows">';
     for (const row of layout.rows) {
-      chassisHtml += '<div class="chassis-row">';
+      const rowCls = isUs24Pro ? ' us24pro-row' : '';
+      chassisHtml += `<div class="chassis-row${rowCls}">`;
       for (const idx of row) {
         const port   = portMap[idx];
         const isSfp  = sfpPortSet.has(idx);
         const sfpCls = isSfp ? ' sfp-port' : '';
         const state  = portBlockState(port);
         const title  = port ? escHtml(port.name) : `Port ${idx}`;
+        const speedTxt  = portSpeedLabel(port);
+        const lldpName  = (port && port.lldp_table && port.lldp_table.length)
+                          ? escHtml((port.lldp_table[0].chassis_id_subtype === 'local'
+                              ? port.lldp_table[0].chassis_id
+                              : port.lldp_table[0].system_name || port.lldp_table[0].chassis_id || '').slice(0, 6))
+                          : '';
+        const speedHtml = speedTxt ? `<span class="port-speed">${speedTxt}</span>` : '';
+        const lldpHtml  = lldpName ? `<span class="port-lldp">${lldpName}</span>` : '';
         chassisHtml += `<div class="switch-port-block ${state}${sfpCls}"
           data-switch="${escHtml(swName)}" data-port-idx="${idx}"
           title="${title}"
-          onclick="selectPort(this)">${idx}</div>`;
+          onclick="selectPort(this)"><span class="port-num">${idx}</span>${speedHtml}${lldpHtml}</div>`;
       }
       chassisHtml += '</div>';
     }
@@ -158,7 +200,12 @@ function renderChassis(swName, sw) {
         ${sw.ip ? `<span class="chassis-ip">${escHtml(sw.ip)}</span>` : ''}
         <span class="chassis-meta">${escHtml(meta)}</span>
       </div>
-      <div class="chassis-body">${chassisHtml}</div>
+      <div class="chassis-body">
+        <div class="chassis-ear-l"></div>
+        <div class="chassis-ear-r"></div>
+        ${chassisHtml}
+      </div>
+      ${chassisLegendHtml()}
     </div>`;
 }