diff --git a/index.html b/index.html
index fc77ee2..ef8abac 100644
--- a/index.html
+++ b/index.html
@@ -3,578 +3,703 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Ourpad — Dashboard</title>
+  <title>Ourpad — Infrastructure</title>
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <link rel="apple-touch-icon" href="/favicon.svg">
-  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ['Geist', 'system-ui', '-apple-system', 'sans-serif'],
+            mono: ['Geist Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'],
+          }
+        }
+      }
+    }
+  </script>
   <style>
-    :root {
-      --black: #171717; --white: #ffffff; --gray-600: #4d4d4d; --gray-400: #808080;
-      --gray-200: #d4d4d4; --gray-100: #ebebeb; --gray-50: #fafafa;
-      --link-blue: #0072f5; --green: #22c55e; --red: #ef4444; --amber: #f59e0b;
-      --ring: rgba(0,0,0,0.08) 0px 0px 0px 1px;
-      --card-shadow: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px;
-      --bg: #ffffff; --bg-alt: #fafafa; --text: #171717;
-    }
-    body.dark {
-      --black: #e5e5e5; --white: #1a1a1a; --gray-600: #a0a0a0; --gray-400: #707070;
-      --gray-200: #404040; --gray-100: #2a2a2a; --gray-50: #222222;
-      --link-blue: #5ba4ff;
-      --ring: rgba(255,255,255,0.06) 0px 0px 0px 1px;
-      --card-shadow: rgba(255,255,255,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.2) 0px 2px 4px;
-      --bg: #1a1a1a; --bg-alt: #222222; --text: #e5e5e5;
-    }
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-feature-settings: 'liga'; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; }
-    nav { position: sticky; top: 0; background: var(--bg); box-shadow: var(--ring); padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; z-index: 100; }
-    .nav-brand { font-size: 18px; font-weight: 600; letter-spacing: -0.36px; color: var(--text); text-decoration: none; }
-    .nav-links { display: flex; gap: 24px; align-items: center; }
-    .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-600); text-decoration: none; transition: color 0.15s; }
-    .nav-links a:hover { color: var(--text); }
-
-    .hero { text-align: center; padding: 64px 24px 40px; }
-    .hero h1 { font-size: 42px; font-weight: 600; letter-spacing: -2px; margin-bottom: 8px; color: var(--text); }
-    .hero p { font-size: 17px; color: var(--gray-600); max-width: 600px; margin: 0 auto; }
-    .section { max-width: 1300px; margin: 0 auto; padding: 0 24px 48px; }
-    .section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
-    .section-header h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.88px; color: var(--text); }
-    .badge { display: inline-flex; align-items: center; background: #ebf5ff; color: #0068d6; font-size: 12px; font-weight: 500; padding: 0 10px; height: 24px; border-radius: 9999px; }
-
-    /* Host Cards */
-    .host-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; }
-    .host-card { background: var(--white); box-shadow: var(--card-shadow); border-radius: 10px; padding: 20px 24px; }
-    .host-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
-    .host-card .host-sub { font-size: 12px; color: var(--gray-400); margin-bottom: 14px; font-family: 'Geist Mono', monospace; }
-    .metric-row { display: grid; grid-template-columns: 80px 1fr 70px; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
-    .metric-label { font-weight: 500; color: var(--gray-600); font-size: 12px; }
-    .metric-bar-bg { height: 8px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
-    .metric-bar-fill { height: 100%; border-radius: 4px; transition: width 1s ease; }
-    .metric-val { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--gray-600); text-align: right; }
-
-    /* LXC table inside host card */
-    .lxc-table { margin-top: 12px; border-top: 1px solid var(--gray-100); padding-top: 8px; }
-    .lxc-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gray-400); display: grid; grid-template-columns: 1.4fr 0.6fr 0.8fr 1fr; gap: 6px; padding: 2px 0; }
-    .lxc-row { display: grid; grid-template-columns: 1.4fr 0.6fr 0.8fr 1fr; gap: 6px; align-items: center; font-size: 12px; padding: 3px 0; }
-    .lxc-row + .lxc-row { border-top: 1px solid var(--gray-50); }
-    .lxc-name { font-weight: 500; }
-    .lxc-cpu { color: var(--gray-400); font-family: 'Geist Mono', monospace; }
-    .lxc-bar-wrap { display: flex; align-items: center; gap: 4px; }
-    .lxc-bar-bg { flex: 1; height: 5px; background: var(--gray-100); border-radius: 2px; overflow: hidden; }
-    .lxc-bar-fill { height: 100%; border-radius: 2px; }
-    .lxc-pct { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--gray-400); min-width: 32px; text-align: right; }
-    .lxc-off { opacity: 0.4; }
-
-    /* Docker table (same as LXC, wider) */
-    .docker-table { margin-top: 12px; border-top: 1px solid var(--gray-100); padding-top: 8px; }
-    .docker-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gray-400); display: grid; grid-template-columns: 1.6fr 0.5fr 0.6fr 1.2fr 1.2fr 0.3fr; gap: 6px; padding: 2px 0; }
-    .docker-row { display: grid; grid-template-columns: 1.6fr 0.5fr 0.6fr 1.2fr 1.2fr 0.3fr; gap: 6px; align-items: center; font-size: 11px; padding: 3px 0; }
-    .docker-row + .docker-row { border-top: 1px solid var(--gray-50); }
-    .docker-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .docker-cpu { color: var(--gray-400); font-family: 'Geist Mono', monospace; font-size: 10px; }
-    .docker-bar-wrap { display: flex; align-items: center; gap: 4px; }
-    .docker-bar-bg { flex: 1; height: 5px; background: var(--gray-100); border-radius: 2px; overflow: hidden; }
-    .docker-bar-fill { height: 100%; border-radius: 2px; }
-    .docker-val { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--gray-400); }
-    .docker-io { font-size: 10px; color: var(--gray-400); font-family: 'Geist Mono', monospace; }
-
-    /* Service cards */
-    .grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
-    .svc-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; background: var(--white); box-shadow: var(--ring); border-radius: 8px; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; }
-    .svc-card:hover { box-shadow: rgba(0,0,0,0.15) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 4px; transform: translateY(-1px); }
-    .svc-icon { font-size: 20px; flex-shrink: 0; line-height: 1.2; }
-    .svc-info { flex: 1; min-width: 0; }
-    .svc-name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
-    .svc-desc { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
-    .status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
-    .status-dot.online { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
-    .status-dot.offline { background: var(--red); }
-    .status-dot.checking,.status-dot.timeout,.status-dot.error { background: var(--amber); animation: pulse 1s infinite; }
-    .status-label { font-size: 11px; font-weight: 500; }
-    .status-label.online { color: var(--green); }
-    .status-label.offline { color: var(--red); }
-    .status-label.checking,.status-label.timeout,.status-label.error { color: var(--amber); }
-
-    .svc-expand { display: none; padding: 10px 18px 14px; margin-top: -12px; background: var(--bg-alt); border-radius: 0 0 8px 8px; box-shadow: var(--ring); font-size: 13px; color: var(--gray-600); }
-    .svc-expand.open { display: block; }
-    .detail-row { display: flex; gap: 16px; align-items: baseline; margin-bottom: 4px; }
-    .detail-label { font-weight: 500; color: var(--gray-400); min-width: 36px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
-    .detail-val { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--black); word-break: break-all; }
-    .detail-val a { color: var(--link-blue); text-decoration: none; }
-    .detail-val a:hover { text-decoration: underline; }
-    .expand-indicator { font-size: 12px; color: var(--gray-200); margin-left: auto; transition: transform 0.2s; flex-shrink: 0; }
-    .svc-card.expanded .expand-indicator { transform: rotate(180deg); color: var(--gray-400); }
-
-    .alt-bg { background: var(--bg-alt); padding: 48px 24px; box-shadow: rgba(0,0,0,0.04) 0px -1px 0px 0px, rgba(0,0,0,0.04) 0px 1px 0px 0px; }
-    .alt-bg + .alt-bg { padding-top: 36px; }
-    .alt-bg .section { padding-bottom: 0; }
-
-    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
-    .card { background: var(--white); box-shadow: var(--card-shadow); border-radius: 8px; padding: 24px; text-decoration: none; color: inherit; transition: box-shadow 0.2s, transform 0.15s; display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
-    .card:hover { box-shadow: rgba(0,0,0,0.12) 0px 0px 0px 1px, rgba(0,0,0,0.06) 0px 2px 4px, rgba(0,0,0,0.04) 0px 12px 12px -8px; transform: translateY(-1px); }
-    .card-header { display: flex; align-items: center; gap: 10px; }
-    .card-icon { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
-    .card-title { font-size: 18px; font-weight: 600; letter-spacing: -0.36px; }
-    .card-desc { font-size: 13px; color: var(--gray-600); line-height: 1.6; }
-    .card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
-    .tag { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; color: var(--gray-400); padding: 2px 8px; background: var(--gray-50); border-radius: 4px; }
-    .tag.active { background: #ecfdf5; color: #065f46; }
-    .tag.wip { background: #fef3c7; color: #92400e; }
-    .tag.internal { background: #f3e8ff; color: #7c3aed; }
-    .card-expand { display: none; }
-    .card-expand.open { display: block; margin-top: 4px; }
-
-    .stats-error { font-size: 13px; color: var(--gray-400); font-style: italic; }
-    footer { text-align: center; padding: 32px 24px; font-size: 13px; color: var(--gray-400); }
-    footer a { color: var(--link-blue); text-decoration: none; }
-
     @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }
-
-    @media (max-width: 768px) {
-      .hero { padding: 40px 24px 28px; }
-      .hero h1 { font-size: 28px; letter-spacing: -1.2px; }
-      .hero p { font-size: 15px; }
-      .grid, .grid-4, .host-grid { grid-template-columns: 1fr; }
-      .nav-links { display: none; }
-      .host-grid { grid-template-columns: 1fr; }
-    }
+    .animate-pulse-slow { animation: pulse 2s infinite; }
+    [x-cloak] { display: none !important; }
+    .topo-line { stroke: #d4d4d4; stroke-width: 1.5; fill: none; }
+    .dark .topo-line { stroke: #404040; }
+    .topo-box { fill: #fafafa; stroke: #d4d4d4; stroke-width: 1; rx: 6; }
+    .dark .topo-box { fill: #222; stroke: #404040; }
+    .topo-pill { fill: #ebf5ff; stroke: none; rx: 4; }
+    .dark .topo-pill { fill: #1e3a5f; }
   </style>
 </head>
-<body>
+<body class="bg-white dark:bg-[#1a1a1a] text-[#171717] dark:text-[#e5e5e5] antialiased min-h-screen" x-data="dashboard()" :class="{ 'dark': dark }" x-init="init()">
 
-<nav>
-  <a href="/" class="nav-brand">Ourpad</a>
-  <div class="nav-links">
-    <a href="https://gitea.ourpad.casa">Gitea</a>
-    <a href="https://pass.ourpad.casa">Pass Vault</a>
-    <a href="https://dashboard.ourpad.casa">Dashboard</a>
-    <a href="https://status.ourpad.casa">Status</a>
-    <button id="dark-toggle" onclick="toggleDark()" style="background:none;border:1px solid var(--gray-200);border-radius:6px;padding:4px 8px;cursor:pointer;font-size:16px;" title="Toggle dark mode">🌙</button>
+<!-- ════════════════════════════════════ -->
+<!-- NAV -->
+<!-- ════════════════════════════════════ -->
+<nav class="sticky top-0 z-50 bg-white/90 dark:bg-[#1a1a1a]/90 backdrop-blur-md border-b border-black/5 dark:border-white/5 px-6 h-14 flex items-center justify-between">
+  <a href="/" class="text-lg font-semibold tracking-tight">🏠 <span class="hidden sm:inline">Ourpad</span></a>
+  <div class="flex items-center gap-4 sm:gap-6">
+    <a href="https://gitea.ourpad.casa" class="text-sm font-medium text-[#808080] dark:text-[#a0a0a0] hover:text-[#171717] dark:hover:text-white transition-colors">Gitea</a>
+    <a href="https://pass.ourpad.casa" class="text-sm font-medium text-[#808080] dark:text-[#a0a0a0] hover:text-[#171717] dark:hover:text-white transition-colors">Pass</a>
+    <a href="https://status.ourpad.casa" class="text-sm font-medium text-[#808080] dark:text-[#a0a0a0] hover:text-[#171717] dark:hover:text-white transition-colors">Status</a>
+    <span class="text-[#d4d4d4] dark:text-[#404040] hidden sm:inline">|</span>
+    <a href="https://canteen.ourpad.casa" class="text-sm font-medium text-[#808080] dark:text-[#a0a0a0] hover:text-[#171717] dark:hover:text-white transition-colors hidden sm:inline">Canteen</a>
+    <a href="https://hermes.ourpad.casa" class="text-sm font-medium text-[#808080] dark:text-[#a0a0a0] hover:text-[#171717] dark:hover:text-white transition-colors hidden sm:inline">Hermes</a>
+    <button @click="toggleDark()" class="border border-[#d4d4d4] dark:border-[#404040] rounded-md px-2 py-1 text-base cursor-pointer hover:bg-[#fafafa] dark:hover:bg-[#2a2a2a] transition-colors shrink-0" x-text="dark ? '☀️' : '🌙'" :title="dark ? 'Light mode' : 'Dark mode'"></button>
   </div>
 </nav>
 
-<section class="hero">
-  <h1>Ourpad Dashboard</h1>
-  <p>Live service health, Proxmox hosts, resource usage, and project links.</p>
+<!-- ════════════════════════════════════ -->
+<!-- HERO -->
+<!-- ════════════════════════════════════ -->
+<section class="text-center py-12 sm:py-16 px-6 max-w-3xl mx-auto">
+  <h1 class="text-3xl sm:text-[42px] font-semibold tracking-[-2px] mb-3">Ourpad Infrastructure</h1>
+  <p class="text-[15px] sm:text-[17px] text-[#808080] dark:text-[#a0a0a0] leading-relaxed">
+    Live service dashboard <span class="text-[#d4d4d4] dark:text-[#404040]">·</span> Infrastructure source of truth
+    <span class="text-[#d4d4d4] dark:text-[#404040]">·</span> <span class="font-mono text-sm">project-directory + network-inventory</span>
+  </p>
 </section>
 
-<!-- ─── HOST RESOURCES ─── -->
-<div class="section">
-  <div class="section-header"><h2>🖥️ Proxmox Hosts</h2><span class="badge" id="host-count">2</span></div>
-  <div class="host-grid" id="host-cards">
-    <div class="host-card"><span class="stats-error">Loading host stats...</span></div>
+<!-- ════════════════════════════════════ -->
+<!-- NETWORK TOPOLOGY DIAGRAM -->
+<!-- ════════════════════════════════════ -->
+<div class="max-w-[900px] mx-auto px-6 pb-8">
+  <div class="bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-xl p-5 overflow-x-auto">
+    <svg viewBox="0 0 820 340" class="w-full h-auto" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+          <path d="M0,0 L10,5 L0,10 Z" fill="#d4d4d4"/>
+        </marker>
+        <marker id="arrow-dark" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+          <path d="M0,0 L10,5 L0,10 Z" fill="#404040"/>
+        </marker>
+      </defs>
+
+      <!-- Cloud / Internet -->
+      <rect x="320" y="5" width="160" height="36" rx="18" class="topo-pill"/>
+      <text x="400" y="28" text-anchor="middle" fill="#0068d6" font-size="12" font-family="Geist, sans-serif" font-weight="500" class="dark:fill-blue-400">☁️ Internet 68.202.6.107</text>
+
+      <!-- Cloudflare Badge -->
+      <rect x="295" y="50" width="90" height="20" rx="10" fill="#fef3c7"/>
+      <text x="340" y="64" text-anchor="middle" fill="#92400e" font-size="9" font-family="Geist, sans-serif" font-weight="500">🔒 Cloudflare Proxy</text>
+
+      <!-- Direct Badge -->
+      <rect x="415" y="50" width="90" height="20" rx="10" fill="#e0f2fe"/>
+      <text x="460" y="64" text-anchor="middle" fill="#0369a1" font-size="9" font-family="Geist, sans-serif" font-weight="500">🔓 Direct</text>
+
+      <!-- Arrow: Internet → NPMplus -->
+      <line x1="400" y1="72" x2="400" y2="95" class="topo-line" marker-end="url(#arrow)"/>
+
+      <!-- NPMplus Box -->
+      <rect x="320" y="95" width="160" height="42" rx="8" class="topo-box"/>
+      <text x="400" y="115" text-anchor="middle" fill="#171717" font-size="13" font-family="Geist, sans-serif" font-weight="600" class="dark:fill-[#e5e5e5]">🌐 NPMplus Reverse Proxy</text>
+      <text x="400" y="130" text-anchor="middle" fill="#808080" font-size="10" font-family="Geist Mono, monospace">192.168.0.110 · ourpad N150</text>
+
+      <!-- Arrow: NPMplus → PVE -->
+      <line x1="400" y1="137" x2="400" y2="160" class="topo-line" marker-end="url(#arrow)"/>
+
+      <!-- PVE Box -->
+      <rect x="295" y="160" width="210" height="52" rx="8" class="topo-box"/>
+      <text x="400" y="180" text-anchor="middle" fill="#171717" font-size="13" font-family="Geist, sans-serif" font-weight="600" class="dark:fill-[#e5e5e5]">🖥️ PVE Host (i5-6500 · 31GB)</text>
+      <text x="400" y="195" text-anchor="middle" fill="#808080" font-size="10" font-family="Geist Mono, monospace">192.168.0.144 · 15 LXC + 1 VM · No Tailscale</text>
+
+      <!-- Arrow: PVE → VM 110 (left path) -->
+      <line x1="345" y1="212" x2="295" y2="240" class="topo-line" marker-end="url(#arrow)"/>
+
+      <!-- Arrow: PVE → Docker CT 100 (right path) -->
+      <line x1="455" y1="212" x2="465" y2="240" class="topo-line" marker-end="url(#arrow)"/>
+
+      <!-- VM 110 Box (this server) -->
+      <rect x="120" y="240" width="190" height="82" rx="8" class="topo-box"/>
+      <text x="215" y="258" text-anchor="middle" fill="#171717" font-size="12" font-family="Geist, sans-serif" font-weight="600" class="dark:fill-[#e5e5e5]">🖥️ VM 110 — This Server</text>
+      <text x="215" y="273" text-anchor="middle" fill="#808080" font-size="9" font-family="Geist Mono, monospace">192.168.0.127 (LAN)</text>
+      <text x="215" y="286" text-anchor="middle" fill="#808080" font-size="9" font-family="Geist Mono, monospace">100.89.190.113 (Tailscale)</text>
+      <text x="215" y="299" text-anchor="middle" fill="#808080" font-size="9" font-family="Geist Mono, monospace">68.202.6.107 (Public)</text>
+      <text x="215" y="314" text-anchor="middle" fill="#808080" font-size="8" font-family="Geist, sans-serif">Hermes · Canteen · Dashboards · News</text>
+
+      <!-- Docker CT 100 Box -->
+      <rect x="395" y="240" width="190" height="82" rx="8" class="topo-box"/>
+      <text x="490" y="258" text-anchor="middle" fill="#171717" font-size="12" font-family="Geist, sans-serif" font-weight="600" class="dark:fill-[#e5e5e5]">🐳 Docker CT 100</text>
+      <text x="490" y="273" text-anchor="middle" fill="#808080" font-size="9" font-family="Geist Mono, monospace">192.168.0.223 (LAN)</text>
+      <text x="490" y="286" text-anchor="middle" fill="#808080" font-size="9" font-family="Geist Mono, monospace">No Tailscale (via PVE)</text>
+      <text x="490" y="299" text-anchor="middle" fill="#808080" font-size="9" font-family="Geist Mono, monospace">—</text>
+      <text x="490" y="314" text-anchor="middle" fill="#808080" font-size="8" font-family="Geist, sans-serif">Gitea · Pass Vault</text>
+
+      <!-- Ourpad N150 Box (bottom right) -->
+      <rect x="610" y="240" width="190" height="82" rx="8" class="topo-box"/>
+      <text x="705" y="258" text-anchor="middle" fill="#171717" font-size="12" font-family="Geist, sans-serif" font-weight="600" class="dark:fill-[#e5e5e5]">🖧 Ourpad N150</text>
+      <text x="705" y="273" text-anchor="middle" fill="#808080" font-size="9" font-family="Geist Mono, monospace">192.168.0.110 (LAN)</text>
+      <text x="705" y="286" text-anchor="middle" fill="#808080" font-size="9" font-family="Geist Mono, monospace">No Tailscale</text>
+      <text x="705" y="299" text-anchor="middle" fill="#808080" font-size="9" font-family="Geist Mono, monospace">—</text>
+      <text x="705" y="314" text-anchor="middle" fill="#808080" font-size="8" font-family="Geist, sans-serif">NPMplus · Jellyfin · cf-ddns</text>
+
+      <!-- Arrow: PVE → Ourpad N150 (not directly, but via network) -->
+      <line x1="505" y1="212" x2="705" y2="240" class="topo-line" marker-end="url(#arrow)"/>
+
+      <!-- Tailscale overlay box -->
+      <rect x="550" y="5" width="140" height="36" rx="18" fill="#ede9fe"/>
+      <text x="620" y="28" text-anchor="middle" fill="#6d28d9" font-size="12" font-family="Geist, sans-serif" font-weight="500">🔗 Tailscale 100.x.x.x</text>
+
+      <!-- Dashed line from VM 110 to Tailscale -->
+      <line x1="215" y1="240" x2="550" y2="23" stroke="#6d28d9" stroke-width="1.5" stroke-dasharray="4,3" fill="none" opacity="0.5"/>
+      <line x1="620" y1="41" x2="620" y2="240" stroke="#6d28d9" stroke-width="1" stroke-dasharray="4,3" fill="none" opacity="0.4"/>
+
+      <!-- Legend: 3 address types -->
+      <rect x="30" y="5" width="180" height="72" rx="6" fill="none" stroke="#00000010" stroke-width="1" class="dark:stroke-white/5"/>
+      <text x="40" y="22" fill="#808080" font-size="9" font-family="Geist, sans-serif" font-weight="600">Access Legend</text>
+      <rect x="40" y="30" width="8" height="8" rx="2" fill="#0072f5"/>
+      <text x="53" y="38" fill="#808080" font-size="9" font-family="Geist Mono, monospace">External (domain / public IP)</text>
+      <rect x="40" y="46" width="8" height="8" rx="2" fill="#808080"/>
+      <text x="53" y="54" fill="#808080" font-size="9" font-family="Geist Mono, monospace">LAN (192.168.0.x)</text>
+      <rect x="40" y="62" width="8" height="8" rx="2" fill="#6d28d9"/>
+      <text x="53" y="70" fill="#808080" font-size="9" font-family="Geist Mono, monospace">Tailscale (100.x.x.x)</text>
+    </svg>
   </div>
 </div>
 
-<!-- ─── DOCKER CONTAINERS ─── -->
-<div class="alt-bg">
-<div class="section">
-  <div class="section-header"><h2>🐳 Docker Containers</h2><span class="badge" id="docker-count">0</span></div>
-  <p style="font-size:13px;color:var(--gray-400);margin:-8px 0 20px;">CT 100 (docker LXC) on primary Proxmox — CPU, memory, network, disk I/O</p>
-  <div class="host-card" id="docker-card">
-    <span class="stats-error">Loading Docker stats...</span>
-  </div>
-</div>
-</div>
-
-<!-- ─── PUBLIC SERVICES ─── -->
-<div class="alt-bg">
-<div class="section">
-  <div class="section-header"><h2>🌐 Public Services</h2><span class="badge" id="pub-count">22</span></div>
-  <p style="font-size:13px;color:var(--gray-400);margin:-8px 0 20px;">All behind NPMplus + Cloudflare — click to expand for URLs</p>
-  <div class="grid-4" id="public-services"></div>
-</div>
-</div>
-
-<!-- ─── INTERNAL SERVICES ─── -->
-<div class="alt-bg">
-<div class="section">
-  <div class="section-header"><h2>🔒 Internal Services</h2><span class="badge" id="int-count">0</span></div>
-  <p style="font-size:13px;color:var(--gray-400);margin:-8px 0 20px;">Tailscale / internal network only</p>
-  <div class="grid-4" id="internal-services"></div>
-</div>
-</div>
-
-<!-- ─── PROJECTS ─── -->
-<div class="section">
-  <div class="section-header"><h2>🛠️ Projects</h2><span class="badge">9</span></div>
-  <div class="grid">
-
-    <a href="https://gitea.ourpad.casa/shawn/pass-vault" class="card">
-      <div class="card-header"><div class="card-icon" style="background:#fef3c7;">🔐</div><span class="card-title">Pass Vault</span></div>
-      <p class="card-desc">Browser-based password manager — GPG-encrypted pass store with dark-themed web UI.</p>
-      <div class="card-meta"><span class="tag">FastAPI</span><span class="tag">pass</span><span class="tag active">active</span></div>
-    </a>
-    <a href="https://gitea.ourpad.casa/shawn/canteen-asset-tracker" class="card">
-      <div class="card-header"><div class="card-icon" style="background:#e0f2fe;">📍</div><span class="card-title">Canteen Asset Tracker</span></div>
-      <p class="card-desc">Mobile webapp — machine-id scanning, OCR, GPS check-ins, geofences, CSV export.</p>
-      <div class="card-meta"><span class="tag">FastAPI</span><span class="tag">SQLite</span><span class="tag wip">in progress</span></div>
-    </a>
-    <a href="https://gitea.ourpad.casa/shawn/canteen-web-app" class="card">
-      <div class="card-header"><div class="card-icon" style="background:#fce7f3;">🌐</div><span class="card-title">Canteen Web App</span></div>
-      <p class="card-desc">Full-stack frontend — login, navigation, asset CRUD, reporting.</p>
-      <div class="card-meta"><span class="tag">Frontend</span><span class="tag wip">in progress</span></div>
-    </a>
-    <a href="https://gitea.ourpad.casa/shawn/photo-geotagger" class="card">
-      <div class="card-header"><div class="card-icon" style="background:#f0fdf4;">📍</div><span class="card-title">Photo Geotagger</span></div>
-      <p class="card-desc">Batch GPS updater — EXIF extraction, OCR scanning, Leaflet map review.</p>
-      <div class="card-meta"><span class="tag">Python</span><span class="tag">FastAPI</span><span class="tag active">active</span></div>
-    </a>
-    <a href="https://gitea.ourpad.casa/shawn/canteen-seed-import" class="card">
-      <div class="card-header"><div class="card-icon" style="background:#fef3c7;">🌱</div><span class="card-title">Canteen Seed Import</span></div>
-      <p class="card-desc">Seed data import tool — CSV parsing, GPS derivation, location extraction, sync to main app.</p>
-      <div class="card-meta"><span class="tag">Python</span><span class="tag">CLI+Web</span><span class="tag wip">in progress</span></div>
-    </a>
-    <a href="https://gitea.ourpad.casa/shawn/raspberry-pi-mixer" class="card">
-      <div class="card-header"><div class="card-icon" style="background:#fef2f2;">🎛️</div><span class="card-title">Raspberry Pi Mixer</span></div>
-      <p class="card-desc">Custom Linux distro for RPi4B — low-latency digital mixer, VST/LV2, touchscreen.</p>
-      <div class="card-meta"><span class="tag">Embedded Linux</span><span class="tag">Audio DSP</span><span class="tag active">active</span></div>
-    </a>
-    <a href="https://gitea.ourpad.casa/shawn/project-directory" class="card">
-      <div class="card-header"><div class="card-icon" style="background:#ecfdf5;">📂</div><span class="card-title">Project Directory</span></div>
-      <p class="card-desc">This page — a living dashboard of all Ourpad projects and infrastructure.</p>
-      <div class="card-meta"><span class="tag">HTML/CSS</span><span class="tag active">active</span></div>
-    </a>
-    <a href="https://github.com/NousResearch/hermes-agent" class="card">
-      <div class="card-header"><div class="card-icon" style="background:#ede9fe;">🤖</div><span class="card-title">Hermes Agent</span></div>
-      <p class="card-desc">AI agent framework — 3 profiles, cron jobs, kanban, MCP tools, multi-model.</p>
-      <div class="card-meta"><span class="tag">Python</span><span class="tag">AI/ML</span><span class="tag active">active</span></div>
-    </a>
-    <a href="https://obsidian.md" class="card">
-      <div class="card-header"><div class="card-icon" style="background:#f1f5f9;">📝</div><span class="card-title">Obsidian Vault</span></div>
-      <p class="card-desc">Knowledge management — three-layer vault, LLM Wiki, daily notes, automated reviews.</p>
-      <div class="card-meta"><span class="tag">Obsidian</span><span class="tag">Dataview</span><span class="tag active">active</span></div>
-    </a>
-
-  </div>
-</div>
-
-<!-- ─── INFRASTRUCTURE ─── -->
-<div class="alt-bg">
-<div class="section">
-  <div class="section-header"><h2>🏗️ Infrastructure</h2></div>
-  <div class="grid">
-
-    <div class="card nolink" onclick="toggleCardExpand(this)">
-      <div class="card-header"><div class="card-icon" style="background:#f0fdf4;">💾</div><span class="card-title">NAS Storage</span><span class="expand-indicator">▾</span></div>
-      <p class="card-desc"><strong>3.6TB ext4</strong> at /mnt/nas — bind-mounted into all arr LXCs. Media library, torrents, backups.</p>
-      <div class="card-meta"><span class="tag">/dev/sdb</span><span class="tag">ext4</span></div>
-      <div class="card-expand"><div class="detail-row"><span class="detail-label">Mount</span><span class="detail-val">/mnt/nas</span></div><div class="detail-row"><span class="detail-label">Device</span><span class="detail-val">/dev/sdb</span></div></div>
+<!-- ════════════════════════════════════ -->
+<!-- QUICK STATS BAR -->
+<!-- ════════════════════════════════════ -->
+<div class="max-w-[1300px] mx-auto px-6 pb-8">
+  <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-center">
+    <div class="bg-[#fafafa] dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg py-4 px-3">
+      <div class="text-2xl font-semibold" x-text="hosts.length">0</div>
+      <div class="text-xs text-[#808080] dark:text-[#a0a0a0] uppercase tracking-wider font-medium mt-0.5">Proxmox Hosts</div>
     </div>
-
-    <div class="card nolink" onclick="toggleCardExpand(this)">
-      <div class="card-header"><div class="card-icon" style="background:#f5f3ff;">🔒</div><span class="card-title">Networking</span><span class="expand-indicator">▾</span></div>
-      <p class="card-desc"><strong>Cloudflare</strong> DNS + proxy (68.202.6.107) → NPMplus (192.168.0.115) → internal services. <strong>Tailscale</strong> mesh.</p>
-      <div class="card-meta"><span class="tag">ourpad.casa</span><span class="tag">TLS 1.3</span></div>
-      <div class="card-expand"><div class="detail-row"><span class="detail-label">WAN</span><span class="detail-val">68.202.6.107</span></div><div class="detail-row"><span class="detail-label">Proxy</span><span class="detail-val">192.168.0.115</span></div><div class="detail-row"><span class="detail-label">VPN</span><span class="detail-val">Tailscale mesh — 2 nodes</span></div></div>
+    <div class="bg-[#fafafa] dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg py-4 px-3">
+      <div class="text-2xl font-semibold" x-text="hosts.reduce((a,h)=>a+(h.lxcs?.length||0),0)">0</div>
+      <div class="text-xs text-[#808080] dark:text-[#a0a0a0] uppercase tracking-wider font-medium mt-0.5">Containers</div>
     </div>
+    <div class="bg-[#fafafa] dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg py-4 px-3">
+      <div class="text-2xl font-semibold" x-text="onlineCount">0</div>
+      <div class="text-xs text-[#808080] dark:text-[#a0a0a0] uppercase tracking-wider font-medium mt-0.5">Services Online</div>
+    </div>
+    <div class="bg-[#fafafa] dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg py-4 px-3">
+      <div class="text-2xl font-semibold">33</div>
+      <div class="text-xs text-[#808080] dark:text-[#a0a0a0] uppercase tracking-wider font-medium mt-0.5">Mapped Ports</div>
+    </div>
+  </div>
+</div>
 
-    <div class="card nolink" id="win-pc-card" onclick="toggleCardExpand(this)">
-      <div class="card-header"><div class="card-icon" style="background:#fce7f3;">🖥️</div><span class="card-title">Windows Gaming PC</span><span class="expand-indicator">▾</span></div>
-      <p class="card-desc"><strong>i7-8700K · RTX 2080 4GB · 32GB RAM</strong> — ComfyUI :8188, Ollama qwen2.5vl :11434. Tailscale 100.84.53.121</p>
-      <div class="card-meta"><span class="tag">Win 11 Pro</span><span class="tag">NVMe</span><span class="tag">C: 931GB</span></div>
-      <div id="win-pc-metrics" style="margin: 10px 0 0 0; font-size: 13px;">
-        <span class="stats-error">Loading Windows stats...</span>
-      </div>
-      <div class="card-expand">
-        <div class="detail-row"><span class="detail-label">CPU</span><span class="detail-val">Intel Core i7-8700K @ 3.70GHz (6C/12T)</span></div>
-        <div class="detail-row"><span class="detail-label">GPU</span><span class="detail-val">NVIDIA RTX 2080 (4GB) + Intel UHD 630</span></div>
-        <div class="detail-row"><span class="detail-label">RAM</span><span class="detail-val">32 GB DDR4</span></div>
-        <div class="detail-row"><span class="detail-label">Storage</span><span class="detail-val">C: 931GB HDD, 238GB Toshiba NVMe, 931GB Sabrent NVMe</span></div>
-        <div class="detail-row"><span class="detail-label">IP</span><span class="detail-val">192.168.0.181 (LAN) / 100.84.53.121 (Tailscale)</span></div>
-        <div class="detail-row"><span class="detail-label">Login</span><span class="detail-val"><code>desktop-4lsf17k\shawn-gamingpc</code> / <code>pass servers/windows/gaming-pc</code></span></div>
+<!-- ════════════════════════════════════ -->
+<!-- LIVE DASHBOARD -->
+<!-- ════════════════════════════════════ -->
+<div class="max-w-[1300px] mx-auto px-6 pb-6">
+  <div class="flex items-center gap-3 mb-5">
+    <div class="h-5 w-1 bg-[#0072f5] dark:bg-[#5ba4ff] rounded-full"></div>
+    <h2 class="text-lg font-semibold tracking-tight">📊 Live Dashboard</h2>
+  </div>
+
+  <!-- Proxmox Hosts -->
+  <div class="mb-6">
+    <div class="flex items-center gap-2 mb-3">
+      <h3 class="text-sm font-semibold text-[#808080] dark:text-[#a0a0a0] uppercase tracking-wider">🖥️ Proxmox Hosts</h3>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <template x-for="h in hosts" :key="h.id">
+        <div class="bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg p-5">
+          <template x-if="h.error">
+            <div><h4 class="font-semibold flex items-center gap-2"><span>🖥️</span><span x-text="h.name"></span></h4><span class="text-sm italic text-[#808080]" x-text="'Error: '+h.error"></span></div>
+          </template>
+          <template x-if="!h.error">
+            <div>
+              <h4 class="font-semibold flex items-center gap-2 mb-3"><span>🖥️</span><span x-text="h.name"></span><span class="ml-auto text-xs text-[#808080] dark:text-[#a0a0a0] font-mono" x-text="h.node.pveversion + ' · ' + h.node.uptime_hrs + 'h'"></span></h4>
+              <div class="space-y-2">
+                <div class="flex items-center gap-3"><span class="text-xs font-medium text-[#808080] dark:text-[#a0a0a0] uppercase tracking-wider w-8 shrink-0">CPU</span><div class="flex-1 h-2 bg-[#ebebeb] dark:bg-[#333] rounded-full overflow-hidden"><div class="h-full rounded-full transition-all duration-1000" :style="'width:'+Math.min(h.node.cpu,100)+'%;background:'+barColor(h.node.cpu)"></div></div><span class="font-mono text-xs text-[#808080] dark:text-[#a0a0a0] w-12 text-right" x-text="h.node.cpu+'%'"></span></div>
+                <div class="flex items-center gap-3"><span class="text-xs font-medium text-[#808080] dark:text-[#a0a0a0] uppercase tracking-wider w-8 shrink-0">RAM</span><div class="flex-1 h-2 bg-[#ebebeb] dark:bg-[#333] rounded-full overflow-hidden"><div class="h-full rounded-full transition-all duration-1000" :style="'width:'+h.node.memory.pct+'%;background:'+barColor(h.node.memory.pct)"></div></div><span class="font-mono text-xs text-[#808080] dark:text-[#a0a0a0] w-20 text-right" x-text="h.node.memory.used_mb+'/'+h.node.memory.total_mb+' MB'"></span></div>
+                <div class="flex items-center gap-3"><span class="text-xs font-medium text-[#808080] dark:text-[#a0a0a0] uppercase tracking-wider w-8 shrink-0">DISK</span><div class="flex-1 h-2 bg-[#ebebeb] dark:bg-[#333] rounded-full overflow-hidden"><div class="h-full rounded-full transition-all duration-1000" :style="'width:'+h.node.disk.pct+'%;background:'+barColor(h.node.disk.pct)"></div></div><span class="font-mono text-xs text-[#808080] dark:text-[#a0a0a0] w-20 text-right" x-text="h.node.disk.used_gb+'/'+h.node.disk.total_gb+' GB'"></span></div>
+              </div>
+              <div class="mt-4 pt-3 border-t border-black/5 dark:border-white/5">
+                <div class="grid grid-cols-[1.4fr_0.5fr_0.5fr_0.5fr] gap-1.5 items-center text-[11px] text-[#808080] dark:text-[#a0a0a0] font-semibold uppercase tracking-wider pb-1">
+                  <span>Container</span><span>CPU</span><span>RAM</span><span>Disk</span>
+                </div>
+                <template x-for="ct in (h.lxcs||[])" :key="ct.vmid">
+                  <div class="grid grid-cols-[1.4fr_0.5fr_0.5fr_0.5fr] gap-1.5 items-center text-xs py-0.5" :class="ct.status!='running'?'opacity-40':''">
+                    <span class="font-medium truncate text-xs" x-text="'CT'+ct.vmid+'.'+ct.name"></span>
+                    <span class="font-mono text-[11px] text-[#808080] dark:text-[#a0a0a0]" x-text="ct.cpu_pct+'%'"></span>
+                    <div class="flex items-center gap-1"><div class="flex-1 h-1.5 bg-[#ebebeb] dark:bg-[#333] rounded-full overflow-hidden"><div class="h-full rounded-full" :style="'width:'+ct.mem_pct+'%;background:'+barColor(ct.mem_pct)"></div></div><span class="font-mono text-[11px] text-[#808080] dark:text-[#a0a0a0]" x-text="ct.mem_mb+'M'"></span></div>
+                    <div class="flex items-center gap-1"><div class="flex-1 h-1.5 bg-[#ebebeb] dark:bg-[#333] rounded-full overflow-hidden"><div class="h-full rounded-full" :style="'width:'+ct.disk_pct+'%;background:'+barColor(ct.disk_pct)"></div></div><span class="font-mono text-[11px] text-[#808080] dark:text-[#a0a0a0]" x-text="ct.disk_gb+'G'"></span></div>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+
+  <!-- Docker -->
+  <div class="mb-6" x-show="dockerContainers.length" x-cloak>
+    <div class="flex items-center gap-2 mb-3">
+      <h3 class="text-sm font-semibold text-[#808080] dark:text-[#a0a0a0] uppercase tracking-wider">🐳 Docker (CT 100)</h3>
+      <span class="inline-flex items-center bg-[#ebf5ff] dark:bg-blue-900/30 text-[#0068d6] dark:text-blue-400 text-xs font-medium px-2 h-5 rounded-full" x-text="dockerContainers.length"></span>
+    </div>
+    <div class="bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg p-4 overflow-x-auto">
+      <div class="grid grid-cols-[1.6fr_0.5fr_0.6fr_1.2fr_1.2fr_0.3fr] gap-2 items-center text-[11px] text-[#808080] dark:text-[#a0a0a0] font-semibold uppercase tracking-wider pb-2 border-b border-black/5 dark:border-white/5 mb-2 min-w-[480px]">
+        <span>Container</span><span>CPU</span><span>RAM</span><span>Network ↓ / ↑</span><span>Block ↓ / ↑</span><span>PIDs</span>
       </div>
+      <template x-for="c in dockerContainers" :key="c.name">
+        <div class="grid grid-cols-[1.6fr_0.5fr_0.6fr_1.2fr_1.2fr_0.3fr] gap-2 items-center text-xs py-1 border-b border-[#fafafa] dark:border-[#2a2a2a] last:border-0 min-w-[480px]">
+          <span class="font-medium truncate" x-text="c.name" :title="c.name"></span>
+          <span class="font-mono text-[11px] text-[#808080] dark:text-[#a0a0a0]" x-text="c.cpu+'%'"></span>
+          <div class="flex items-center gap-1"><div class="flex-1 h-1.5 bg-[#ebebeb] dark:bg-[#333] rounded-full overflow-hidden"><div class="h-full rounded-full" :style="'width:'+Math.min(parseFloat(c.mem_pct)||0,100)+'%;background:'+barColor(parseFloat(c.mem_pct)||0)"></div></div><span class="font-mono text-[11px] text-[#808080] dark:text-[#a0a0a0]" x-text="c.mem_used"></span></div>
+          <span class="font-mono text-[11px] text-[#808080] dark:text-[#a0a0a0]" x-text="c.net_in+' / '+c.net_out"></span>
+          <span class="font-mono text-[11px] text-[#808080] dark:text-[#a0a0a0]" x-text="c.blk_in+' / '+c.blk_out"></span>
+          <span class="font-mono text-[11px] text-[#808080] dark:text-[#a0a0a0]" x-text="c.pids"></span>
+        </div>
+      </template>
     </div>
+  </div>
+
+  <!-- Services with live status + 3-address expand -->
+  <div class="mb-6">
+    <div class="flex items-center gap-2 mb-3">
+      <h3 class="text-sm font-semibold text-[#808080] dark:text-[#a0a0a0] uppercase tracking-wider">🌐 Service Health</h3>
+      <span class="inline-flex items-center bg-[#ebf5ff] dark:bg-blue-900/30 text-[#0068d6] dark:text-blue-400 text-xs font-medium px-2 h-5 rounded-full" x-text="publicServices.length + internalServices.length"></span>
+    </div>
+    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2" x-data="{ expanded: null }">
+      <template x-for="s in [...publicServices, ...internalServices]" :key="s.id">
+        <div>
+          <div class="flex items-center gap-2 px-3 py-2.5 bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg cursor-pointer hover:border-[#808080]/30 dark:hover:border-[#808080]/30 transition-colors"
+            @click="expanded = expanded === s.id ? null : s.id">
+            <span x-text="s.icon" class="text-base shrink-0"></span>
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center gap-1.5">
+                <span x-show="!s.nostatus" class="shrink-0">
+                  <span class="inline-block w-2 h-2 rounded-full" :class="'bg-'+((serviceStatus[s.id]||'checking')=='online'?'[#22c55e]':(serviceStatus[s.id]=='offline'?'[#ef4444]':(serviceStatus[s.id]=='checking'?'[#f59e0b] animate-pulse-slow':'[#f59e0b]'))"></span>
+                </span>
+                <span x-show="s.nostatus" class="shrink-0"><span class="inline-block w-2 h-2 rounded-full bg-[#d4d4d4]"></span></span>
+                <span class="text-xs font-medium truncate" x-text="s.name"></span>
+              </div>
+              <div class="text-[11px] text-[#808080] dark:text-[#a0a0a0] truncate" x-text="s.desc"></div>
+            </div>
+          </div>
+          <!-- Expanded: 3-address card -->
+          <div x-show="expanded === s.id" x-cloak x-collision class="px-3 py-2.5 bg-[#fafafa] dark:bg-[#2a2a2a] rounded-b-lg border-x border-b border-black/5 dark:border-white/5 text-xs text-[#808080] dark:text-[#a0a0a0] space-y-1">
+            <div class="flex gap-2 items-start">
+              <span class="font-semibold uppercase tracking-wider text-[9px] bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-1 py-0.5 rounded shrink-0 mt-0.5">EXT</span>
+              <template x-if="s.external">
+                <a :href="s.external" target="_blank" class="font-mono text-[11px] text-[#0072f5] dark:text-[#5ba4ff] no-underline hover:underline truncate" x-text="s.external"></a>
+              </template>
+              <template x-if="!s.external">
+                <span class="font-mono text-[11px] italic opacity-50">no external access</span>
+              </template>
+            </div>
+            <div class="flex gap-2 items-start">
+              <span class="font-semibold uppercase tracking-wider text-[9px] bg-[#ebebeb] dark:bg-[#333] text-[#808080] dark:text-[#a0a0a0] px-1 py-0.5 rounded shrink-0 mt-0.5">LAN</span>
+              <template x-if="s.lan">
+                <span class="font-mono text-[11px]" x-text="s.lan"></span>
+              </template>
+              <template x-if="!s.lan">
+                <span class="font-mono text-[11px] italic opacity-50">—</span>
+              </template>
+            </div>
+            <div class="flex gap-2 items-start">
+              <span class="font-semibold uppercase tracking-wider text-[9px] bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 px-1 py-0.5 rounded shrink-0 mt-0.5">TS</span>
+              <template x-if="s.ts">
+                <span class="font-mono text-[11px]" x-text="s.ts"></span>
+              </template>
+              <template x-if="!s.ts">
+                <span class="font-mono text-[11px] italic opacity-50">not on Tailscale</span>
+              </template>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</div>
+
+<!-- ════════════════════════════════════ -->
+<!-- SECTION DIVIDER -->
+<!-- ════════════════════════════════════ -->
+<div class="border-t border-black/5 dark:border-white/5 my-6 max-w-[1300px] mx-auto px-6"></div>
+
+<!-- ════════════════════════════════════ -->
+<!-- SOURCE OF TRUTH -->
+<!-- ════════════════════════════════════ -->
+<div class="max-w-[1300px] mx-auto px-6 pb-12">
+  <div class="flex items-center gap-3 mb-5">
+    <div class="h-5 w-1 bg-[#22c55e] rounded-full"></div>
+    <h2 class="text-lg font-semibold tracking-tight">📋 Source of Truth</h2>
+    <span class="inline-flex items-center bg-[#ecfdf5] dark:bg-green-900/20 text-[#065f46] dark:text-green-400 text-xs font-medium px-2 h-5 rounded-full">live from network-inventory.yaml</span>
+  </div>
+
+  <div x-show="!inv" class="text-sm italic text-[#808080] dark:text-[#a0a0a0] py-8 text-center">Loading inventory...</div>
+
+  <template x-if="inv && !inv.error">
+    <div class="space-y-6">
+
+      <!-- ──────── CREDENTIALS ──────── -->
+      <div class="bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg overflow-hidden" x-data="{ credOpen: true }">
+        <div class="flex items-center justify-between px-5 py-3.5 bg-[#fafafa] dark:bg-[#2a2a2a] border-b border-black/5 dark:border-white/5 cursor-pointer select-none" @click="credOpen = !credOpen">
+          <div class="flex items-center gap-2.5">
+            <span class="text-lg">🔑</span>
+            <h3 class="font-semibold text-sm">Credentials</h3>
+            <span class="inline-flex items-center bg-[#ebf5ff] dark:bg-blue-900/30 text-[#0068d6] dark:text-blue-400 text-xs font-medium px-2 h-5 rounded-full" x-text="(inv.credentials?.entries?.length||0)+' entries'"></span>
+          </div>
+          <span class="text-xs text-[#808080] dark:text-[#a0a0a0] transition-transform duration-200" :class="credOpen ? 'rotate-180' : ''">▾</span>
+        </div>
+        <div x-show="credOpen">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="text-[11px] text-[#808080] dark:text-[#a0a0a0] font-semibold uppercase tracking-wider border-b border-black/5 dark:border-white/5 bg-white dark:bg-[#222]">
+                  <th class="text-left px-5 py-3 w-[35%]">Service</th>
+                  <th class="text-left px-5 py-3 w-[25%]">Pass Path</th>
+                  <th class="text-left px-5 py-3 w-[15%] hidden sm:table-cell">User</th>
+                  <th class="text-left px-5 py-3 w-[25%] hidden md:table-cell">Notes</th>
+                </tr>
+              </thead>
+              <tbody>
+                <template x-for="(entry, i) in (inv.credentials?.entries||[])" :key="i">
+                  <tr class="border-b border-[#fafafa] dark:border-[#2a2a2a] last:border-0 hover:bg-[#fafafa] dark:hover:bg-[#2a2a2a]">
+                    <td class="px-5 py-3 font-medium text-sm" x-text="entry.service"></td>
+                    <td class="px-5 py-3">
+                      <a :href="'https://pass.ourpad.casa/'+entry.pass_path" target="_blank" class="font-mono text-xs text-[#0072f5] dark:text-[#5ba4ff] no-underline hover:underline bg-[#ebf5ff] dark:bg-blue-900/20 px-1.5 py-0.5 rounded" x-text="entry.pass_path"></a>
+                    </td>
+                    <td class="px-5 py-3 text-[#808080] dark:text-[#a0a0a0] text-xs hidden sm:table-cell font-mono" x-text="entry.username||'—'"></td>
+                    <td class="px-5 py-3 text-[#808080] dark:text-[#a0a0a0] text-xs hidden md:table-cell" x-text="entry.note||'—'"></td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <!-- ──────── PORT MAP ──────── -->
+      <div class="bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg overflow-hidden" x-data="{ portOpen: true }">
+        <div class="flex items-center justify-between px-5 py-3.5 bg-[#fafafa] dark:bg-[#2a2a2a] border-b border-black/5 dark:border-white/5 cursor-pointer select-none" @click="portOpen = !portOpen">
+          <div class="flex items-center gap-2.5">
+            <span class="text-lg">📡</span>
+            <h3 class="font-semibold text-sm">Port Map</h3>
+            <span class="inline-flex items-center bg-[#ebf5ff] dark:bg-blue-900/30 text-[#0068d6] dark:text-blue-400 text-xs font-medium px-2 h-5 rounded-full" x-text="Object.keys(inv.port_map||{}).length+' ports'"></span>
+          </div>
+          <span class="text-xs text-[#808080] dark:text-[#a0a0a0] transition-transform duration-200" :class="portOpen ? 'rotate-180' : ''">▾</span>
+        </div>
+        <div x-show="portOpen" x-cloak>
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead>
+                <tr class="text-[11px] text-[#808080] dark:text-[#a0a0a0] font-semibold uppercase tracking-wider border-b border-black/5 dark:border-white/5">
+                  <th class="text-left px-5 py-3 w-[10%]">Port</th>
+                  <th class="text-left px-5 py-3 w-[65%]">Service</th>
+                  <th class="text-left px-5 py-3 w-[25%] hidden sm:table-cell">Access</th>
+                </tr>
+              </thead>
+              <tbody>
+                <template x-for="(desc, port) in sortPorts(inv.port_map||{})" :key="port">
+                  <tr class="border-b border-[#fafafa] dark:border-[#2a2a2a] last:border-0 hover:bg-[#fafafa] dark:hover:bg-[#2a2a2a]">
+                    <td class="px-5 py-2"><code class="font-mono text-sm font-bold bg-[#ebf5ff] dark:bg-blue-900/20 text-[#0068d6] dark:text-blue-400 px-2 py-0.5 rounded" x-text="port"></code></td>
+                    <td class="px-5 py-2 text-sm" x-text="desc"></td>
+                    <td class="px-5 py-2 text-xs text-[#808080] dark:text-[#a0a0a0] hidden sm:table-cell">
+                      <span x-text="portAccessLabel(port, inv)"></span>
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <!-- ──────── SERVICES (detailed YAML) ──────── -->
+      <div class="bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg overflow-hidden" x-data="{ svcOpen: true }">
+        <div class="flex items-center justify-between px-5 py-3.5 bg-[#fafafa] dark:bg-[#2a2a2a] border-b border-black/5 dark:border-white/5 cursor-pointer select-none" @click="svcOpen = !svcOpen">
+          <div class="flex items-center gap-2.5">
+            <span class="text-lg">🔧</span>
+            <h3 class="font-semibold text-sm">Service Details</h3>
+            <span class="inline-flex items-center bg-[#ebf5ff] dark:bg-blue-900/30 text-[#0068d6] dark:text-blue-400 text-xs font-medium px-2 h-5 rounded-full" x-text="(inv.services?.length||0)+' services'"></span>
+          </div>
+          <span class="text-xs text-[#808080] dark:text-[#a0a0a0] transition-transform duration-200" :class="svcOpen ? 'rotate-180' : ''">▾</span>
+        </div>
+        <div x-show="svcOpen" x-cloak>
+          <div class="divide-y divide-black/5 dark:divide-white/5">
+            <template x-for="(svc, i) in (inv.services||[])" :key="i">
+              <div class="px-5 py-4 hover:bg-[#fafafa] dark:hover:bg-[#2a2a2a]">
+                <div class="flex items-start justify-between gap-3 mb-1">
+                  <div class="flex items-center gap-2">
+                    <span class="font-medium text-sm" x-text="svc.name"></span>
+                    <span class="text-[11px] text-[#808080] dark:text-[#a0a0a0] bg-[#fafafa] dark:bg-[#2a2a2a] px-1.5 py-0.5 rounded" x-text="svc.category||''"></span>
+                  </div>
+                  <div class="flex gap-1.5 shrink-0">
+                    <template x-if="svc.port">
+                      <code class="font-mono text-xs bg-[#ebf5ff] dark:bg-blue-900/20 text-[#0068d6] dark:text-blue-400 px-1.5 py-0.5 rounded" x-text="':'+svc.port"></code>
+                    </template>
+                    <template x-if="svc.auth_port">
+                      <code class="font-mono text-xs bg-[#fef3c7] dark:bg-yellow-900/20 text-[#92400e] dark:text-yellow-400 px-1.5 py-0.5 rounded" x-text="'proxy:'+svc.auth_port"></code>
+                    </template>
+                  </div>
+                </div>
+                <p class="text-xs text-[#808080] dark:text-[#a0a0a0] mb-2 leading-relaxed" x-text="svc.description||''"></p>
+                <div class="flex flex-wrap gap-x-6 gap-y-1 text-xs">
+                  <template x-if="svc.systemd">
+                    <div><span class="text-[10px] text-[#808080] dark:text-[#a0a0a0] font-medium uppercase tracking-wider">systemd</span> <code class="font-mono text-xs" x-text="typeof svc.systemd==='string'?svc.systemd:'(multiple)'"></code></div>
+                  </template>
+                  <template x-if="svc.working_dir">
+                    <div><span class="text-[10px] text-[#808080] dark:text-[#a0a0a0] font-medium uppercase tracking-wider">dir</span> <code class="font-mono text-xs" x-text="svc.working_dir"></code></div>
+                  </template>
+                  <template x-if="svc.db_path">
+                    <div class="w-full"><span class="text-[10px] text-[#808080] dark:text-[#a0a0a0] font-medium uppercase tracking-wider">db</span> <code class="font-mono text-xs" x-text="svc.db_path"></code></div>
+                  </template>
+                  <template x-if="svc.tech_stack">
+                    <div class="flex flex-wrap gap-1 mt-1">
+                      <template x-for="tech in (Array.isArray(svc.tech_stack)?svc.tech_stack:[svc.tech_stack])" :key="tech">
+                        <span class="font-mono text-[10px] text-[#808080] dark:text-[#a0a0a0] bg-[#fafafa] dark:bg-[#2a2a2a] px-1.5 py-0.5 rounded" x-text="tech"></span>
+                      </template>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <!-- ──────── PROXMOX HARDWARE ──────── -->
+      <div class="bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg overflow-hidden" x-data="{ hwOpen: true }">
+        <div class="flex items-center justify-between px-5 py-3.5 bg-[#fafafa] dark:bg-[#2a2a2a] border-b border-black/5 dark:border-white/5 cursor-pointer select-none" @click="hwOpen = !hwOpen">
+          <div class="flex items-center gap-2.5">
+            <span class="text-lg">🖥️</span>
+            <h3 class="font-semibold text-sm">Proxmox Hardware Specs</h3>
+            <span class="inline-flex items-center bg-[#ebf5ff] dark:bg-blue-900/30 text-[#0068d6] dark:text-blue-400 text-xs font-medium px-2 h-5 rounded-full" x-text="(inv.proxmox_hosts?.length||0)+' hosts'"></span>
+          </div>
+          <span class="text-xs text-[#808080] dark:text-[#a0a0a0] transition-transform duration-200" :class="hwOpen ? 'rotate-180' : ''">▾</span>
+        </div>
+        <div x-show="hwOpen" x-cloak>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-0 divide-y md:divide-y-0 md:divide-x divide-black/5 dark:divide-white/5">
+            <template x-for="(host, i) in (inv.proxmox_hosts||[])" :key="i">
+              <div class="p-5">
+                <div class="flex items-center justify-between mb-4">
+                  <h4 class="font-semibold" x-text="host.hostname"></h4>
+                  <a :href="host.web_ui" target="_blank" class="text-[11px] text-[#0072f5] dark:text-[#5ba4ff] no-underline hover:underline">Web UI →</a>
+                </div>
+                <div class="space-y-2 text-sm">
+                  <div class="flex gap-2"><span class="text-[11px] text-[#808080] dark:text-[#a0a0a0] font-medium uppercase tracking-wider min-w-[48px]">Model</span><span class="font-mono text-xs" x-text="host.hardware?.model||'—'"></span></div>
+                  <div class="flex gap-2"><span class="text-[11px] text-[#808080] dark:text-[#a0a0a0] font-medium uppercase tracking-wider min-w-[48px]">CPU</span><span class="font-mono text-xs" x-text="host.hardware?.cpu||'—'"></span></div>
+                  <div class="flex gap-2"><span class="text-[11px] text-[#808080] dark:text-[#a0a0a0] font-medium uppercase tracking-wider min-w-[48px]">Cores</span><span class="font-mono text-xs" x-text="host.hardware?.cores||'—'"></span></div>
+                  <div class="flex gap-2"><span class="text-[11px] text-[#808080] dark:text-[#a0a0a0] font-medium uppercase tracking-wider min-w-[48px]">RAM</span><span class="font-mono text-xs" x-text="host.hardware?.ram||'—'"></span></div>
+                  <div class="flex gap-2"><span class="text-[11px] text-[#808080] dark:text-[#a0a0a0] font-medium uppercase tracking-wider min-w-[48px]">IP</span><span class="font-mono text-xs" x-text="host.local_ip||'—'"></span></div>
+                  <div class="flex gap-2"><span class="text-[11px] text-[#808080] dark:text-[#a0a0a0] font-medium uppercase tracking-wider min-w-[48px]">OS</span><span class="font-mono text-xs" x-text="host.os||'—'"></span></div>
+                  <div class="flex gap-2"><span class="text-[11px] text-[#808080] dark:text-[#a0a0a0] font-medium uppercase tracking-wider min-w-[48px]">Boot</span><span class="font-mono text-xs" x-text="host.boot_disk_size+'GB'"></span></div>
+                </div>
+                <div class="mt-4 pt-3 border-t border-black/5 dark:border-white/5">
+                  <div class="flex flex-wrap gap-1">
+                    <template x-for="(storage, si) in (host.hardware?.storage||[])" :key="si">
+                      <span class="font-mono text-[11px] text-[#808080] dark:text-[#a0a0a0] bg-[#fafafa] dark:bg-[#2a2a2a] px-1.5 py-0.5 rounded" x-text="storage"></span>
+                    </template>
+                  </div>
+                  <p class="text-xs text-[#808080] dark:text-[#a0a0a0] mt-3 leading-relaxed" x-text="host.notes||''"></p>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </template>
+
+  <template x-if="inv && inv.error">
+    <div class="bg-[#fef2f2] dark:bg-red-900/20 border border-[#fecaca] dark:border-red-800 rounded-lg p-4 text-sm text-[#991b1b] dark:text-red-400">
+      ⚠️ Error loading inventory: <span x-text="inv.error"></span>
+    </div>
+  </template>
+</div>
+
+<!-- ════════════════════════════════════ -->
+<!-- PROJECT CARDS -->
+<!-- ════════════════════════════════════ -->
+<div class="max-w-[1300px] mx-auto px-6 pb-12">
+  <div class="border-t border-black/5 dark:border-white/5 pt-6 mb-6">
+    <div class="flex items-center gap-3 mb-5">
+      <div class="h-5 w-1 bg-[#f59e0b] rounded-full"></div>
+      <h2 class="text-lg font-semibold tracking-tight">🛠️ Projects</h2>
+    </div>
+  </div>
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+
+    <a href="https://gitea.ourpad.casa/shawn/pass-vault" class="flex flex-col gap-2.5 p-5 bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg no-underline text-inherit transition-all hover:border-[#808080]/30 dark:hover:border-[#808080]/30 hover:-translate-y-0.5">
+      <div class="flex items-center gap-2.5"><div class="w-8 h-8 rounded flex items-center justify-center shrink-0 bg-[#fef3c7]">🔐</div><span class="font-semibold text-sm">Pass Vault</span></div>
+      <p class="text-xs text-[#808080] dark:text-[#a0a0a0] leading-relaxed">Browser-based password manager — GPG-encrypted pass store.</p>
+      <div class="flex gap-1 flex-wrap mt-auto"><span class="text-[10px] font-mono uppercase tracking-wider text-[#808080] dark:text-[#a0a0a0] bg-[#fafafa] dark:bg-[#2a2a2a] px-1.5 py-0.5 rounded">FastAPI</span><span class="text-[10px] font-mono uppercase tracking-wider text-[#065f46] dark:text-green-400 bg-[#ecfdf5] dark:bg-green-900/20 px-1.5 py-0.5 rounded">active</span></div>
+    </a>
+
+    <a href="https://gitea.ourpad.casa/shawn/canteen-asset-tracker" class="flex flex-col gap-2.5 p-5 bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg no-underline text-inherit transition-all hover:border-[#808080]/30 dark:hover:border-[#808080]/30 hover:-translate-y-0.5">
+      <div class="flex items-center gap-2.5"><div class="w-8 h-8 rounded flex items-center justify-center shrink-0 bg-[#e0f2fe]">📍</div><span class="font-semibold text-sm">Canteen Asset Tracker</span></div>
+      <p class="text-xs text-[#808080] dark:text-[#a0a0a0] leading-relaxed">Machine-id scanning, OCR, GPS check-ins, geofences, CSV export.</p>
+      <div class="flex gap-1 flex-wrap mt-auto"><span class="text-[10px] font-mono uppercase tracking-wider text-[#808080] dark:text-[#a0a0a0] bg-[#fafafa] dark:bg-[#2a2a2a] px-1.5 py-0.5 rounded">FastAPI</span><span class="text-[10px] font-mono uppercase tracking-wider text-[#92400e] dark:text-yellow-400 bg-[#fef3c7] dark:bg-yellow-900/20 px-1.5 py-0.5 rounded">wip</span></div>
+    </a>
+
+    <a href="https://gitea.ourpad.casa/shawn/canteen-web-app" class="flex flex-col gap-2.5 p-5 bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg no-underline text-inherit transition-all hover:border-[#808080]/30 dark:hover:border-[#808080]/30 hover:-translate-y-0.5">
+      <div class="flex items-center gap-2.5"><div class="w-8 h-8 rounded flex items-center justify-center shrink-0 bg-[#fce7f3]">🌐</div><span class="font-semibold text-sm">Canteen Web App</span></div>
+      <p class="text-xs text-[#808080] dark:text-[#a0a0a0] leading-relaxed">Full-stack frontend — login, navigation, asset CRUD, reporting.</p>
+      <div class="flex gap-1 flex-wrap mt-auto"><span class="text-[10px] font-mono uppercase tracking-wider text-[#808080] dark:text-[#a0a0a0] bg-[#fafafa] dark:bg-[#2a2a2a] px-1.5 py-0.5 rounded">Frontend</span><span class="text-[10px] font-mono uppercase tracking-wider text-[#92400e] dark:text-yellow-400 bg-[#fef3c7] dark:bg-yellow-900/20 px-1.5 py-0.5 rounded">wip</span></div>
+    </a>
+
+    <a href="https://gitea.ourpad.casa/shawn/canteen-seed-import" class="flex flex-col gap-2.5 p-5 bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg no-underline text-inherit transition-all hover:border-[#808080]/30 dark:hover:border-[#808080]/30 hover:-translate-y-0.5">
+      <div class="flex items-center gap-2.5"><div class="w-8 h-8 rounded flex items-center justify-center shrink-0 bg-[#fef3c7]">🌱</div><span class="font-semibold text-sm">Canteen Seed Import</span></div>
+      <p class="text-xs text-[#808080] dark:text-[#a0a0a0] leading-relaxed">CSV parsing, GPS derivation, location extraction, sync to main app.</p>
+      <div class="flex gap-1 flex-wrap mt-auto"><span class="text-[10px] font-mono uppercase tracking-wider text-[#808080] dark:text-[#a0a0a0] bg-[#fafafa] dark:bg-[#2a2a2a] px-1.5 py-0.5 rounded">Python</span><span class="text-[10px] font-mono uppercase tracking-wider text-[#92400e] dark:text-yellow-400 bg-[#fef3c7] dark:bg-yellow-900/20 px-1.5 py-0.5 rounded">wip</span></div>
+    </a>
+
+    <a href="https://gitea.ourpad.casa/shawn/raspberry-pi-mixer" class="flex flex-col gap-2.5 p-5 bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg no-underline text-inherit transition-all hover:border-[#808080]/30 dark:hover:border-[#808080]/30 hover:-translate-y-0.5">
+      <div class="flex items-center gap-2.5"><div class="w-8 h-8 rounded flex items-center justify-center shrink-0 bg-[#fef2f2]">🎛️</div><span class="font-semibold text-sm">Raspberry Pi Mixer</span></div>
+      <p class="text-xs text-[#808080] dark:text-[#a0a0a0] leading-relaxed">Custom Linux distro for RPi4B — low-latency digital mixer.</p>
+      <div class="flex gap-1 flex-wrap mt-auto"><span class="text-[10px] font-mono uppercase tracking-wider text-[#065f46] dark:text-green-400 bg-[#ecfdf5] dark:bg-green-900/20 px-1.5 py-0.5 rounded">active</span></div>
+    </a>
+
+    <a href="https://gitea.ourpad.casa/shawn/project-directory" class="flex flex-col gap-2.5 p-5 bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg no-underline text-inherit transition-all hover:border-[#808080]/30 dark:hover:border-[#808080]/30 hover:-translate-y-0.5">
+      <div class="flex items-center gap-2.5"><div class="w-8 h-8 rounded flex items-center justify-center shrink-0 bg-[#ecfdf5]">📂</div><span class="font-semibold text-sm">Project Directory</span></div>
+      <p class="text-xs text-[#808080] dark:text-[#a0a0a0] leading-relaxed">This page — living dashboard of all Ourpad projects and infrastructure.</p>
+      <div class="flex gap-1 flex-wrap mt-auto"><span class="text-[10px] font-mono uppercase tracking-wider text-[#065f46] dark:text-green-400 bg-[#ecfdf5] dark:bg-green-900/20 px-1.5 py-0.5 rounded">active</span></div>
+    </a>
+
+    <a href="https://github.com/NousResearch/hermes-agent" class="flex flex-col gap-2.5 p-5 bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg no-underline text-inherit transition-all hover:border-[#808080]/30 dark:hover:border-[#808080]/30 hover:-translate-y-0.5">
+      <div class="flex items-center gap-2.5"><div class="w-8 h-8 rounded flex items-center justify-center shrink-0 bg-[#ede9fe]">🤖</div><span class="font-semibold text-sm">Hermes Agent</span></div>
+      <p class="text-xs text-[#808080] dark:text-[#a0a0a0] leading-relaxed">AI agent framework — 5 profiles, cron jobs, kanban, MCP tools.</p>
+      <div class="flex gap-1 flex-wrap mt-auto"><span class="text-[10px] font-mono uppercase tracking-wider text-[#065f46] dark:text-green-400 bg-[#ecfdf5] dark:bg-green-900/20 px-1.5 py-0.5 rounded">active</span></div>
+    </a>
+
+    <a href="https://obsidian.md" class="flex flex-col gap-2.5 p-5 bg-white dark:bg-[#222] border border-black/5 dark:border-white/5 rounded-lg no-underline text-inherit transition-all hover:border-[#808080]/30 dark:hover:border-[#808080]/30 hover:-translate-y-0.5">
+      <div class="flex items-center gap-2.5"><div class="w-8 h-8 rounded flex items-center justify-center shrink-0 bg-[#f1f5f9]">📝</div><span class="font-semibold text-sm">Obsidian Vault</span></div>
+      <p class="text-xs text-[#808080] dark:text-[#a0a0a0] leading-relaxed">Three-layer vault, LLM Wiki, daily notes, automated reviews.</p>
+      <div class="flex gap-1 flex-wrap mt-auto"><span class="text-[10px] font-mono uppercase tracking-wider text-[#065f46] dark:text-green-400 bg-[#ecfdf5] dark:bg-green-900/20 px-1.5 py-0.5 rounded">active</span></div>
+    </a>
 
   </div>
 </div>
-</div>
 
-<footer>
-  <p>Built with <a href="https://github.com/NousResearch/hermes-agent">Hermes Agent</a> · <a href="https://gitea.ourpad.casa/shawn/project-directory">Source</a></p>
+<!-- ════════════════════════════════════ -->
+<!-- FOOTER -->
+<!-- ════════════════════════════════════ -->
+<footer class="border-t border-black/5 dark:border-white/5 py-8 px-6 text-center">
+  <p class="text-sm text-[#808080] dark:text-[#a0a0a0]">
+    Built with <a href="https://github.com/NousResearch/hermes-agent" class="text-[#0072f5] dark:text-[#5ba4ff] no-underline hover:underline">Hermes Agent</a>
+    <span class="mx-2 text-[#d4d4d4] dark:text-[#404040]">·</span>
+    <a href="https://gitea.ourpad.casa/shawn/project-directory" class="text-[#0072f5] dark:text-[#5ba4ff] no-underline hover:underline">Source</a>
+    <span class="mx-2 text-[#d4d4d4] dark:text-[#404040]">·</span>
+    <span class="font-mono text-xs" x-text="new Date().toLocaleDateString('en-US', {year:'numeric',month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'})"></span>
+  </p>
 </footer>
 
 <script>
-// ─── Service Definitions ──────────────────────────────────────────────
-const SERVICES = [
-  { id:"gitea",        name:"Gitea",               desc:"Self-hosted Git — repos, issues, CI",       icon:"🦊", url:"https://gitea.ourpad.casa",        ip:"192.168.0.223", section:"public" },
-  { id:"pass-vault",   name:"Pass Vault",           desc:"Web-based secret management",                icon:"🔐", url:"https://pass.ourpad.casa",          ip:"192.168.0.223", section:"public" },
-  { id:"projects",     name:"Project Directory",    desc:"This page",                                  icon:"📂", url:"https://projects.ourpad.casa",      ip:"127.0.0.1:18834", section:"public" },
-  { id:"hermes",       name:"Hermes Dashboard",     desc:"Agent management UI",                        icon:"🤖", url:"https://hermes.ourpad.casa",         ip:"127.0.0.1:9119", section:"public" },
-  { id:"coder",        name:"Hermes Coder",         desc:"Agent dashboard (coder profile)",            icon:"💻", url:"https://coder.ourpad.casa",          ip:"127.0.0.1:9120", section:"public" },
-  { id:"system-db",    name:"System Dashboard",     desc:"Real-time server monitoring",                icon:"📊", url:"https://system-dashboard.ourpad.casa", ip:"127.0.0.1:8899", section:"public" },
-  { id:"canteen",      name:"Canteen App",          desc:"Asset tracker (WIP)",                        icon:"🏗️", url:"https://canteen.ourpad.casa",       ip:"127.0.0.1:8901", section:"public" },
-  { id:"canteen-admin",name:"Canteen Admin",        desc:"Asset tracker admin panel",                  icon:"🛠️", url:"https://admin.canteen.ourpad.casa", ip:"127.0.0.1:8090", section:"public" },
-  { id:"canteen-dev",   name:"Canteen App (Dev)",   desc:"Dev instance — port 8904",                   icon:"🧪", url:"https://dev.canteen.ourpad.casa",    ip:"127.0.0.1:8904", section:"public" },
-  { id:"canteen-admin-dev",name:"Canteen Admin (Dev)",desc:"Dev admin — port 8092",                     icon:"🧪", url:"https://canteen-admin-dev.ourpad.casa", ip:"127.0.0.1:8092", section:"public" },
-  { id:"canteen-seed",  name:"Seed Import",          desc:"Asset seed data importer — prod :8091",      icon:"🌱", url:"https://canteen-seed.ourpad.casa",   ip:"127.0.0.1:8091", section:"public" },
-  { id:"canteen-seed-dev",name:"Seed Import (Dev)",  desc:"Seed dev instance — port 8093",              icon:"🌱", url:"https://canteen-seed-dev.ourpad.casa", ip:"127.0.0.1:8093", section:"public" },
-  { id:"geotagger",    name:"Photo Geotagger",      desc:"Batch GPS updater",                          icon:"📍", url:"https://geotagger.ourpad.casa",     ip:"127.0.0.1:8902", section:"public" },
-  { id:"sonarr",       name:"Sonarr",               desc:"TV show automation",                         icon:"📺", url:"https://sonarr.ourpad.casa",         ip:"192.168.0.178", section:"public" },
-  { id:"radarr",       name:"Radarr",               desc:"Movie automation",                           icon:"🎬", url:"https://radarr.ourpad.casa",         ip:"192.168.0.123", section:"public" },
-  { id:"jellyseerr",   name:"Jellyseerr",           desc:"Media requests",                             icon:"🎞️", url:"https://jellyseerr.ourpad.casa",     ip:"192.168.0.229", section:"public" },
-  { id:"deluge",       name:"Deluge",               desc:"Torrent client",                             icon:"📥", url:"https://deluge.ourpad.casa",         ip:"192.168.0.243", section:"public" },
-  { id:"jellyfin",     name:"Jellyfin",             desc:"Media streaming",                            icon:"▶️", url:"https://jellyfin.ourpad.casa",       ip:"192.168.0.125", section:"public" },
-  { id:"obsidian",     name:"Obsidian LiveSync",    desc:"CouchDB sync server",                        icon:"🔄", url:"https://obsidian.ourpad.casa",       ip:"192.168.0.223", section:"public" },
-  { id:"inventree",    name:"Inventree",            desc:"Inventory management",                       icon:"📦", url:"https://inventory.ourpad.casa",      ip:"192.168.0.132", section:"public" },
-  { id:"npmplus",      name:"NPMplus",             desc:"Reverse proxy admin",                        icon:"🌐", url:"https://npmplus.ourpad.casa",        ip:"192.168.0.115", section:"public" },
-  { id:"proxmox",      name:"Proxmox Admin",        desc:"VE management UI",                           icon:"🖥️", url:"https://admin.ourpad.casa",          ip:"192.168.0.144:8006", section:"public" },
-  { id:"rustdesk",     name:"RustDesk",             desc:"Remote desktop relay",                       icon:"🖧", url:"https://rustdesk.ourpad.casa",       ip:"192.168.0.144", section:"public" },
-  { id:"status",       name:"Network Status",       desc:"Live service health monitor",                icon:"📡", url:"https://status.ourpad.casa",         ip:"127.0.0.1:18898", section:"public" },
-  { id:"dashboard",    name:"Heimdall Dashboard",   desc:"Service landing page",                       icon:"🏠", url:"https://dashboard.ourpad.casa",      ip:"192.168.0.213", section:"public", nostatus:true },
-  // Internal
-  { id:"prowlarr",     name:"Prowlarr",             desc:"Indexer aggregator (CT 104)",                icon:"🔍", url:null, ip:"192.168.0.225", section:"internal", nostatus:true },
-  { id:"readarr",      name:"Readarr",              desc:"Book management (CT 108)",                   icon:"📚", url:null, ip:"192.168.0.193", section:"internal", nostatus:true },
-  { id:"configarr",    name:"Configarr",            desc:"Config sync (CT 107)",                       icon:"⚙️", url:null, ip:"192.168.0.238", section:"internal", nostatus:true },
-  { id:"unpackerr",    name:"Unpackerr",            desc:"RAR extraction (CT 114)",                    icon:"📦", url:null, ip:"192.168.0.119", section:"internal", nostatus:true },
-  { id:"element",      name:"Element Synapse",      desc:"Matrix server (CT 112)",                     icon:"💬", url:null, ip:"192.168.0.220", section:"internal", nostatus:true },
-  { id:"portainer",    name:"Portainer",            desc:"Docker management (CT 100:9443)",            icon:"🐳", url:null, ip:"192.168.0.223:9443", section:"internal", nostatus:true },
-  { id:"hermes-webui", name:"Hermes WebUI",         desc:"Agent dashboard (CT 102:8787)",              icon:"🧠", url:null, ip:"100.89.190.113:8787", section:"internal", nostatus:true },
-  { id:"deskbrid",     name:"Deskbrid",             desc:"Desktop automation",                         icon:"⌨️", url:null, ip:"127.0.0.1", section:"internal", nostatus:true },
-  { id:"cf-ddns",      name:"Cloudflare DDNS",      desc:"Dynamic DNS updater (CT 105)",               icon:"☁️", url:null, ip:"192.168.0.110", section:"internal", nostatus:true },
-  { id:"tailscale",    name:"Tailscale",            desc:"Mesh VPN — 2 nodes",                         icon:"🔗", url:null, ip:"100.89.190.113", section:"internal", nostatus:true },
-];
+function dashboard() {
+  return {
+    dark: localStorage.getItem('dark') === 'true',
+    hosts: [],
+    dockerContainers: [],
+    serviceStatus: {},
+    publicServices: [],
+    internalServices: [],
+    inv: null,
+    pollTimers: [],
 
-// ─── Render Service Cards ─────────────────────────────────────────────
-function renderServices() {
-  const pubEl = document.getElementById("public-services");
-  const intEl = document.getElementById("internal-services");
-  pubEl.innerHTML = ""; intEl.innerHTML = "";
-  let pubCount = 0, intCount = 0;
+    get onlineCount() {
+      return Object.values(this.serviceStatus).filter(s => s === 'online').length;
+    },
 
-  for (const s of SERVICES) {
-    const isInternal = s.section === "internal";
-    const el = isInternal ? intEl : pubEl;
-    const tag = s.url ? "a" : "span";
-    const href = s.url ? `href="${s.url}" target="_blank"` : "";
-    const cls = s.url ? "svc-card" : "svc-card nolink";
-    const onclick = s.url ? `onclick="toggleSvcExpand(this)"` : `onclick="toggleSvcExpand(this);event.preventDefault()"`;
+    barColor(pct) {
+      if (pct > 90) return '#ef4444';
+      if (pct > 70) return '#f59e0b';
+      return '#22c55e';
+    },
 
-    el.insertAdjacentHTML("beforeend", `<${tag} ${href} class="${cls}" data-svc="${s.id}" data-url="${s.url||''}" data-ip="${s.ip||''}" ${s.nostatus ? 'data-nostatus="1"' : ''} ${onclick}>
-      <span class="svc-icon">${s.icon}</span>
-      <div class="svc-info">
-        <div class="svc-name">
-          ${s.nostatus ? '<span class="status-dot" style="background:#d4d4d4"></span><span class="status-label" style="color:#808080">N/A</span>' : '<span class="status-dot checking"></span><span class="status-label checking">Checking...</span>'}
-          ${s.name}
-          <span class="expand-indicator">▾</span>
-        </div>
-        <div class="svc-desc">${s.desc}</div>
-      </div>
-    </${tag}>
-    <div class="svc-expand" data-for="${s.id}">
-      ${s.url ? `<div class="detail-row"><span class="detail-label">URL</span><span class="detail-val"><a href="${s.url}" target="_blank">${s.url}</a></span></div>` : ""}
-      ${s.ip ? `<div class="detail-row"><span class="detail-label">IP</span><span class="detail-val">${s.ip}</span></div>` : ""}
-    </div>`);
+    toggleDark() {
+      this.dark = !this.dark;
+      localStorage.setItem('dark', String(this.dark));
+    },
 
-    if (isInternal) intCount++; else pubCount++;
-  }
-  document.getElementById("pub-count").textContent = pubCount;
-  document.getElementById("int-count").textContent = intCount;
-}
+    portAccessLabel(port, inv) {
+      if (!inv || !inv.services) return '';
+      for (const svc of inv.services) {
+        if (String(svc.port) === String(port) && svc.auth_port) return '🔒 proxy:' + svc.auth_port;
+        if (String(svc.auth_port) === String(port)) return '🔒 auth proxy';
+        if (String(svc.port) === String(port)) return '🔓 direct';
+      }
+      const portNum = parseInt(port);
+      if (portNum < 1024) return '⚙️ system';
+      if (portNum > 10000 && portNum < 20000) return '🔒 internal';
+      return '';
+    },
 
-function toggleSvcExpand(card) {
-  if (card.tagName === "A" && card.href && !card.classList.contains("expanded")) {
-    card.classList.add("expanded");
-    const panel = document.querySelector(`.svc-expand[data-for="${card.dataset.svc}"]`);
-    if (panel) panel.classList.add("open");
-    return;
-  }
-  if (card.tagName === "A" && card.classList.contains("expanded")) return; // let link navigate
-  card.classList.toggle("expanded");
-  const panel = document.querySelector(`.svc-expand[data-for="${card.dataset.svc}"]`);
-  if (panel) panel.classList.toggle("open");
-}
+    sortPorts(map) {
+      return Object.fromEntries(Object.entries(map).sort(([a],[b]) => parseInt(a)-parseInt(b)));
+    },
 
-function toggleCardExpand(card) {
-  card.classList.toggle("expanded");
-  const exp = card.querySelector(".card-expand");
-  if (exp) exp.classList.toggle("open");
-}
+    async fetchHosts() {
+      try { const r = await fetch('/api/proxmox/stats'); const d = await r.json(); this.hosts = d.hosts || []; }
+      catch(e) { console.log('host fetch failed', e); }
+    },
 
-// ─── Status Updates ───────────────────────────────────────────────────
-async function updateStatus() {
-  try {
-    const r = await fetch("/api/status");
-    const d = await r.json();
-    const byId = {};
-    for (const s of d.services) { byId[s.id] = s.status; }
+    async fetchDocker() {
+      try { const r = await fetch('/api/docker/stats'); const d = await r.json(); this.dockerContainers = d.containers || []; }
+      catch(e) { console.log('docker fetch failed', e); }
+    },
 
-    document.querySelectorAll("[data-svc]").forEach(el => {
-      if (el.dataset.nostatus) return;  // skip non-HTTP services
-      const sid = el.dataset.svc;
-      const dot = el.querySelector(".status-dot");
-      const lbl = el.querySelector(".status-label");
-      const st = byId[sid] || "checking";
-      const labelMap = { online:"Online", offline:"Offline", timeout:"Timeout", error:"Error", checking:"Checking..." };
-      if (dot) dot.className = "status-dot " + st;
-      if (lbl) { lbl.className = "status-label " + st; lbl.textContent = labelMap[st] || st; }
-    });
-  } catch(e) { console.log("status check failed", e); }
-}
+    async fetchStatus() {
+      try {
+        const r = await fetch('/api/status'); const d = await r.json();
+        if (d.services) { const map = {}; for (const s of d.services) map[s.id] = s.status; this.serviceStatus = map; }
+      } catch(e) { console.log('status fetch failed', e); }
+    },
 
-// ─── Proxmox Host Stats ───────────────────────────────────────────────
-function barColor(pct) {
-  if (pct > 90) return "#ef4444";
-  if (pct > 70) return "#f59e0b";
-  return "#22c55e";
-}
-
-function renderHosts(hosts) {
-  const container = document.getElementById("host-cards");
-  if (!hosts || hosts.length === 0) {
-    container.innerHTML = '<div class="host-card"><span class="stats-error">No host data</span></div>';
-    return;
-  }
-  let html = "";
-  for (const host of hosts) {
-    if (host.error) {
-      html += `<div class="host-card"><h3>🖥️ ${host.name}</h3><span class="stats-error">Error: ${host.error}</span></div>`;
-      continue;
+    init() {
+      // Each service has: external (public domain/ip), lan (192.168.x), ts (tailscale 100.x)
+      // Fields left undefined = not applicable
+      this.publicServices = [
+        { id:'gitea',        name:'Gitea',            desc:'Self-hosted Git — repos, issues, CI',                 icon:'🦊', external:'https://gitea.ourpad.casa',          lan:'192.168.0.223:3000'                                },
+        { id:'pass-vault',   name:'Pass Vault',        desc:'Web-based secret management',                          icon:'🔐', external:'https://pass.ourpad.casa',            lan:'192.168.0.223:8833'                                },
+        { id:'projects',     name:'Project Directory', desc:'This page — infrastructure dashboard',                 icon:'📂', external:'https://projects.ourpad.casa',        lan:'192.168.0.127:8834',  ts:'100.89.190.113:8834'    },
+        { id:'hermes',       name:'Hermes Dashboard',  desc:'Agent management UI (default profile)',                icon:'🤖', external:'https://hermes.ourpad.casa',          lan:'192.168.0.127:9119',  ts:'100.89.190.113:9119'   },
+        { id:'coder',        name:'Hermes Coder',      desc:'Agent dashboard (coder profile)',                      icon:'💻', external:'https://coder.ourpad.casa',           lan:'192.168.0.127:9120',  ts:'100.89.190.113:9120'   },
+        { id:'system-db',    name:'System Dashboard',  desc:'Real-time CPU/mem/disk/network monitoring',            icon:'📊', external:'https://system-dashboard.ourpad.casa',  lan:'192.168.0.127:8899',  ts:'100.89.190.113:8899'   },
+        { id:'canteen',      name:'Canteen App',       desc:'Asset tracker with OCR and GPS (WIP)',                 icon:'🏗️', external:'https://canteen.ourpad.casa',        lan:'192.168.0.127:8901',  ts:'100.89.190.113:8901'   },
+        { id:'canteen-admin',name:'Canteen Admin',     desc:'Admin panel — manage assets, users, config',           icon:'🛠️', external:'https://admin.canteen.ourpad.casa',  lan:'192.168.0.127:8090',  ts:'100.89.190.113:8090'   },
+        { id:'canteen-dev',   name:'Canteen (Dev)',    desc:'Dev instance — port 8904',                              icon:'🧪', external:'https://dev.canteen.ourpad.casa',     lan:'192.168.0.127:8904',  ts:'100.89.190.113:8904'   },
+        { id:'canteen-admin-dev',name:'Canteen Admin (Dev)',desc:'Dev admin panel — port 8092',                    icon:'🧪', external:'https://canteen-admin-dev.ourpad.casa',lan:'192.168.0.127:8092',  ts:'100.89.190.113:8092'   },
+        { id:'canteen-seed',  name:'Seed Import',      desc:'Import seed data — CSV, GPS, OCR (prod :8091)',        icon:'🌱', external:'https://canteen-seed.ourpad.casa',    lan:'192.168.0.127:8091',  ts:'100.89.190.113:8091'   },
+        { id:'canteen-seed-dev',name:'Seed Import (Dev)',desc:'Dev seed instance — port 8093',                      icon:'🌱', external:'https://canteen-seed-dev.ourpad.casa',lan:'192.168.0.127:8093',  ts:'100.89.190.113:8093'   },
+        { id:'sonarr',       name:'Sonarr',            desc:'TV series automation (CT 104)',                         icon:'📺', external:'https://sonarr.ourpad.casa',          lan:'192.168.0.178:8989'                               },
+        { id:'radarr',       name:'Radarr',            desc:'Movie automation (CT 111)',                             icon:'🎬', external:'https://radarr.ourpad.casa',          lan:'192.168.0.123:7878'                               },
+        { id:'jellyseerr',   name:'Jellyseerr',        desc:'Media requests — Plex/Overseerr (CT 101)',             icon:'🎞️', external:'https://jellyseerr.ourpad.casa',      lan:'192.168.0.229:5055'                               },
+        { id:'deluge',       name:'Deluge',            desc:'Torrent client (CT 110)',                               icon:'📥', external:'https://deluge.ourpad.casa',          lan:'192.168.0.243:8112'                               },
+        { id:'jellyfin',     name:'Jellyfin',          desc:'Media streaming (ourpad:8096)',                         icon:'▶️', external:'https://jellyfin.ourpad.casa',        lan:'192.168.0.110:8096'                               },
+        { id:'obsidian',     name:'Obsidian LiveSync', desc:'CouchDB sync server (CT 100)',                          icon:'🔄', external:'https://obsidian.ourpad.casa',        lan:'192.168.0.223:5984'                               },
+        { id:'inventree',    name:'Inventree',         desc:'Inventory management (CT 106)',                         icon:'📦', external:'https://inventory.ourpad.casa',       lan:'192.168.0.132:8080'                               },
+        { id:'npmplus',      name:'NPMplus',           desc:'Reverse proxy admin (ourpad)',                          icon:'🌐', external:'https://npmplus.ourpad.casa',         lan:'192.168.0.110:81'                                 },
+        { id:'proxmox',      name:'Proxmox Admin',     desc:'VE management UI (PVE host)',                           icon:'🖥️', external:'https://admin.ourpad.casa',           lan:'192.168.0.144:8006'                               },
+        { id:'rustdesk',     name:'RustDesk',          desc:'Remote desktop relay (PVE host)',                       icon:'🖧', external:'https://rustdesk.ourpad.casa',        lan:'192.168.0.144:21116'                              },
+        { id:'status',       name:'Network Status',    desc:'Live service health monitor',                           icon:'📡', external:'https://status.ourpad.casa',          lan:'192.168.0.127:8898',  ts:'100.89.190.113:8898'   },
+        { id:'dashboard',    name:'Heimdall',          desc:'Service landing page (CT 113)',                         icon:'🏠', external:'https://dashboard.ourpad.casa',       lan:'192.168.0.213:80',   nostatus:true              },
+        { id:'news',         name:'News Brief',        desc:'Daily news summary — automated',                        icon:'📰', external:'https://news.ourpad.casa',            lan:'192.168.0.127:8920',  ts:'100.89.190.113:8920'   },
+      ];
+      this.internalServices = [
+        { id:'prowlarr',     name:'Prowlarr',          desc:'Indexer aggregator (CT 104)',                          icon:'🔍',                              lan:'192.168.0.225:9696'                                },
+        { id:'readarr',      name:'Readarr',           desc:'Book management (CT 108)',                              icon:'📚',                              lan:'192.168.0.193:8787'                                },
+        { id:'configarr',    name:'Configarr',         desc:'Config sync via API (CT 107)',                          icon:'⚙️',                              lan:'192.168.0.238:9091'                                },
+        { id:'unpackerr',    name:'Unpackerr',         desc:'RAR extraction automation (CT 114)',                    icon:'📦',                              lan:'192.168.0.119:5656'                                },
+        { id:'element',      name:'Element Synapse',   desc:'Matrix chat server (CT 112)',                           icon:'💬',                              lan:'192.168.0.220:6167'                                },
+        { id:'portainer',    name:'Portainer',         desc:'Docker management UI (CT 100)',                         icon:'🐳',                              lan:'192.168.0.223:9443'                                },
+        { id:'hermes-webui', name:'Hermes WebUI',      desc:'Agent dashboard — alternative UI (CT 102)',             icon:'🧠',                              lan:'192.168.0.127:8787',  ts:'100.89.190.113:8787'   },
+        { id:'deskbrid',     name:'Deskbrid',          desc:'Desktop automation service',                             icon:'⌨️'                                                                                   },
+        { id:'cf-ddns',      name:'Cloudflare DDNS',   desc:'Dynamic DNS updater (ourpad CT 105)',                   icon:'☁️',                              lan:'192.168.0.110:9090'                                },
+        { id:'tailscale',    name:'Tailscale',         desc:'Mesh VPN — 3 active nodes',                             icon:'🔗',                                                          ts:'100.89.190.113'         },
+      ];
+      this.fetchHosts(); this.fetchDocker(); this.fetchStatus();
+      fetch('/api/inventory').then(r=>r.json()).then(d=>this.inv=d).catch(e=>console.log('inv fetch failed', e));
+      this.pollTimers = [
+        setInterval(() => this.fetchHosts(), 30000),
+        setInterval(() => this.fetchDocker(), 30000),
+        setInterval(() => this.fetchStatus(), 30000),
+      ];
     }
-    const n = host.node;
-    html += `<div class="host-card">
-      <h3>🖥️ ${host.name}</h3>
-      <div class="host-sub">${n.pveversion} · uptime ${n.uptime_hrs}h · node ${n.node}</div>
-      <div class="metric-row"><span class="metric-label">CPU</span><div class="metric-bar-bg"><div class="metric-bar-fill" style="width:${Math.min(n.cpu,100)}%;background:${barColor(n.cpu)}"></div></div><span class="metric-val">${n.cpu}%</span></div>
-      <div class="metric-row"><span class="metric-label">RAM</span><div class="metric-bar-bg"><div class="metric-bar-fill" style="width:${n.memory.pct}%;background:${barColor(n.memory.pct)}"></div></div><span class="metric-val">${n.memory.used_mb}/${n.memory.total_mb} MB</span></div>
-      <div class="metric-row"><span class="metric-label">Disk</span><div class="metric-bar-bg"><div class="metric-bar-fill" style="width:${n.disk.pct}%;background:${barColor(n.disk.pct)}"></div></div><span class="metric-val">${n.disk.used_gb}/${n.disk.total_gb} GB</span></div>
-      ${n.swap.used_mb > 0 ? `<div class="metric-row"><span class="metric-label">Swap</span><div class="metric-bar-bg"><div class="metric-bar-fill" style="width:${Math.round(n.swap.used_mb/Math.max(n.swap.total_mb,1)*100)}%;background:#d4d4d4"></div></div><span class="metric-val">${n.swap.used_mb}/${n.swap.total_mb} MB</span></div>` : ""}
-      ${host.lxcs && host.lxcs.length > 0 ? `
-      <div class="lxc-table">
-        <div class="lxc-header"><span>Container</span><span>CPU</span><span>RAM</span><span>Disk</span></div>
-        ${host.lxcs.map(ct => `
-          <div class="lxc-row ${ct.status !== 'running' ? 'lxc-off' : ''}">
-            <span class="lxc-name">CT${ct.vmid} ${ct.name}</span>
-            <span class="lxc-cpu">${ct.cpu_pct}%</span>
-            <div class="lxc-bar-wrap"><div class="lxc-bar-bg"><div class="lxc-bar-fill" style="width:${ct.mem_pct}%;background:${barColor(ct.mem_pct)}"></div></div><span class="lxc-pct">${ct.mem_mb}M</span></div>
-            <div class="lxc-bar-wrap"><div class="lxc-bar-bg"><div class="lxc-bar-fill" style="width:${ct.disk_pct}%;background:${barColor(ct.disk_pct)}"></div></div><span class="lxc-pct">${ct.disk_gb}G</span></div>
-          </div>
-        `).join('')}
-      </div>` : ""}
-    </div>`;
-  }
-  container.innerHTML = html;
-  document.getElementById("host-count").textContent = hosts.length;
-}
-
-async function updateHosts() {
-  try {
-    const r = await fetch("/api/proxmox/stats");
-    const d = await r.json();
-    renderHosts(d.hosts);
-  } catch(e) { console.log("proxmox fetch failed", e); }
-}
-
-// ─── Docker Stats ──────────────────────────────────────────────────────
-function renderDocker(containers) {
-  const card = document.getElementById("docker-card");
-  if (!containers || containers.length === 0) {
-    card.innerHTML = '<span class="stats-error">No Docker containers found</span>';
-    document.getElementById("docker-count").textContent = "0";
-    return;
-  }
-  
-  let html = `<div class="docker-table">
-    <div class="docker-header">
-      <span>Container</span><span>CPU</span><span>RAM</span><span>Network ↓ / ↑</span><span>Disk ↓ / ↑</span><span>PIDs</span>
-    </div>`;
-  
-  for (const c of containers) {
-    const memPct = parseFloat(c.mem_pct) || 0;
-    html += `<div class="docker-row">
-      <span class="docker-name" title="${c.name}">${c.name}</span>
-      <span class="docker-cpu">${c.cpu}%</span>
-      <div class="docker-bar-wrap"><div class="docker-bar-bg"><div class="docker-bar-fill" style="width:${Math.min(memPct,100)}%;background:${barColor(memPct)}"></div></div><span class="docker-val">${c.mem_used}</span></div>
-      <span class="docker-io">${c.net_in} / ${c.net_out}</span>
-      <span class="docker-io">${c.blk_in} / ${c.blk_out}</span>
-      <span class="docker-val">${c.pids}</span>
-    </div>`;
-  }
-  html += `</div>`;
-  card.innerHTML = html;
-  document.getElementById("docker-count").textContent = containers.length;
-}
-
-async function updateDocker() {
-  try {
-    const r = await fetch("/api/docker/stats");
-    const d = await r.json();
-    if (d.error && !d.containers) {
-      document.getElementById("docker-card").innerHTML = `<span class="stats-error">${d.error}</span>`;
-      return;
-    }
-    renderDocker(d.containers);
-  } catch(e) {
-    console.log("docker fetch failed", e);
-    document.getElementById("docker-card").innerHTML = '<span class="stats-error">Docker API unreachable</span>';
-  }
-}
-
-// ─── Windows Gaming PC Live Stats ──────────────────────────────────────
-async function updateWindowsStats() {
-  const el = document.getElementById("win-pc-metrics");
-  if (!el) return;
-  try {
-    const r = await fetch("/api/windows/stats");
-    const d = await r.json();
-    if (!d.online) {
-      el.innerHTML = `<span class="stats-error">Windows PC offline</span>`;
-      return;
-    }
-    const memPct = d.mem_total_gb > 0 ? Math.round((d.mem_used_gb / d.mem_total_gb) * 100) : 0;
-    const diskPct = d.disk_c_total_gb > 0 ? Math.round((d.disk_c_used_gb / d.disk_c_total_gb) * 100) : 0;
-
-    el.innerHTML = `
-      <div class="metric-row" style="margin-bottom:2px">
-        <span class="metric-label" style="font-size:12px">CPU</span>
-        <div class="metric-bar-bg" style="height:6px">
-          <div class="metric-bar-fill" style="width:${Math.min(d.cpu, 100)}%;background:${barColor(d.cpu)}"></div>
-        </div>
-        <span class="metric-val" style="font-size:11px">${d.cpu}%</span>
-      </div>
-      <div class="metric-row" style="margin-bottom:2px">
-        <span class="metric-label" style="font-size:12px">RAM</span>
-        <div class="metric-bar-bg" style="height:6px">
-          <div class="metric-bar-fill" style="width:${memPct}%;background:${barColor(memPct)}"></div>
-        </div>
-        <span class="metric-val" style="font-size:11px">${d.mem_used_gb}/${d.mem_total_gb} GB</span>
-      </div>
-      <div class="metric-row" style="margin-bottom:2px">
-        <span class="metric-label" style="font-size:12px">C:</span>
-        <div class="metric-bar-bg" style="height:6px">
-          <div class="metric-bar-fill" style="width:${diskPct}%;background:${barColor(diskPct)}"></div>
-        </div>
-        <span class="metric-val" style="font-size:11px">${d.disk_c_used_gb}/${d.disk_c_total_gb} GB</span>
-      </div>
-      <div style="font-size:11px;color:var(--gray-400);margin-top:4px">
-        Uptime: ${d.uptime_days}d &middot; Win 11 Pro
-      </div>`;
-  } catch(e) {
-    el.innerHTML = `<span class="stats-error">Windows stats unavailable</span>`;
-  }
-}
-
-// ─── Init ─────────────────────────────────────────────────────────────
-renderServices();
-updateStatus();
-updateHosts();
-updateDocker();
-updateWindowsStats();
-setInterval(updateStatus, 60000);
-setInterval(updateHosts, 30000);
-setInterval(updateDocker, 30000);
-setInterval(updateWindowsStats, 30000);
-
-// ─── Dark Mode Toggle ──────────────────────────────────────────────────
-function toggleDark() {
-  document.body.classList.toggle("dark");
-  const isDark = document.body.classList.contains("dark");
-  document.getElementById("dark-toggle").textContent = isDark ? "☀️" : "🌙";
-  localStorage.setItem("darkMode", isDark ? "1" : "0");
-}
-// Restore preference
-if (localStorage.getItem("darkMode") === "1") {
-  document.body.classList.add("dark");
-  document.getElementById("dark-toggle").textContent = "☀️";
+  };
 }
 </script>
 </body>
