From 2c67944b4bcfc2150495c71535b166a51c8caacf Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sat, 14 Mar 2026 22:42:38 -0400
Subject: [PATCH] Fix topology chain order and inspector SFP port width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Topology:
- Correct series layout: UDM-Pro → USW-Agg → Pro 24 PoE (not a fork)
- Remove CSS fork divs, replace with straight vertical connectors
- Labels: WAN · 10G SFP+ (UDM→Agg), 10G trunk (Agg→PoE)
- Remove ISL from legend (no parallel switch pair)

Inspector:
- Fix USW-Agg port blocks appearing narrower than other switches
- SFP ports in rows now use same width (34px) as copper ports;
  all-SFP switches like USL8A no longer look undersized

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/style.css     |  9 +++---
 templates/index.html | 69 ++++++++++++++++++++++----------------------
 2 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/static/style.css b/static/style.css
index d396c15..deb2a5c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1076,9 +1076,9 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-amber); }
   letter-spacing: 0;
 }
 
-/* SFP port (in rows — slightly narrower to suggest cage) */
+/* SFP port (in rows) — width overridden to 34px further down */
 .switch-port-block.sfp-port {
-  width: 28px;
+  width: 34px;
   height: 38px;
   font-size: .55em;
 }
@@ -2006,9 +2006,10 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-amber); }
   letter-spacing: .04em;
   border-left-width: 3px;
 }
-/* SFP port in rows */
+/* SFP port in rows — same width as copper ports so all-SFP switches
+   (e.g. USW-Agg / USL8A) don't appear narrower than other switches */
 .switch-port-block.sfp-port {
-  width: 26px;
+  width: 34px;
   height: 40px;
   font-size: .55em;
   border-left-width: 2px;
diff --git a/templates/index.html b/templates/index.html
index 6d3993d..81b3fd9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -62,47 +62,47 @@
       </div>
     </div>
 
-    <!-- Fork: UDM-Pro → both switches via CSS (no SVG distortion) -->
-    <div class="topo-fork">
-      <div class="topo-fork-stem"></div>
-      <div class="topo-fork-bar"><span class="topo-fork-label">10G DAC</span></div>
-      <div class="topo-fork-drop topo-fork-drop-l"></div>
-      <div class="topo-fork-drop topo-fork-drop-r"></div>
+    <!-- UDM-Pro → USW-Agg (10G SFP+) -->
+    <div class="topo-vc">
+      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
+      <span class="topo-vc-label">10G SFP+</span>
     </div>
 
     <!-- ══════════════════════════════════════════════════════════════
-         TIER 3: Switches — each in a 50% half so fork drops align
+         TIER 3: USW-Aggregation
          ══════════════════════════════════════════════════════════ -->
-    <div class="topo-sw-row">
-
-      <!-- USW-Aggregation in left half (center = 25% of total width) -->
-      <div class="topo-sw-half">
-        <div class="topo-v2-node topo-v2-switch" id="topo-switch-agg">
-          <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>
+    <div class="topo-tier">
+      <div class="topo-v2-node topo-v2-switch" id="topo-switch-agg">
+        <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>
-
-      <!-- Pro 24 PoE in right half (center = 75% of total width) -->
-      <div class="topo-sw-half">
-        <div class="topo-v2-node topo-v2-switch" id="topo-switch-poe">
-          <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>
 
-    <!-- Drop connectors from switch centres down to bus rails -->
-    <div class="topo-sw-drops">
-      <div class="topo-sw-drop topo-sw-drop-l"></div>
-      <div class="topo-sw-drop topo-sw-drop-r"></div>
+    <!-- USW-Agg → Pro 24 PoE (10G trunk) -->
+    <div class="topo-vc">
+      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
+      <span class="topo-vc-label">10G trunk</span>
+    </div>
+
+    <!-- ══════════════════════════════════════════════════════════════
+         TIER 4: Pro 24 PoE
+         ══════════════════════════════════════════════════════════ -->
+    <div class="topo-tier">
+      <div class="topo-v2-node topo-v2-switch" id="topo-switch-poe">
+        <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>
+
+    <!-- Pro 24 PoE → host bus section -->
+    <div class="topo-vc">
+      <div class="topo-vc-wire" style="background:var(--border);opacity:.5;"></div>
     </div>
 
     <!-- ══════════════════════════════════════════════════════════════
@@ -159,7 +159,6 @@
     <!-- ── 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>