From 28a0f25b23511db9e935c19c2a5a97e8367cb62f Mon Sep 17 00:00:00 2001
From: Rene Fichtmueller <renefichtmueller@MacBook-Pro-von-Rene.local>
Date: Sat, 28 Mar 2026 00:56:27 +1300
Subject: [PATCH] =?UTF-8?q?feat:=20complete=20dashboard=20redesign=20?=
 =?UTF-8?q?=E2=80=94=20professional=20data-dense=20UI,=20click-through=20d?=
 =?UTF-8?q?etail=20panels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed AI-slop gradient header, replaced with compact info bar
- JetBrains Mono for data, Inter for text — proper engineering tool aesthetic
- Unified slide-in detail panel for hype cycle, transceivers, and blog drafts
- Transceiver table: clickable rows open full spec sheet in side panel
- Form factor dropdown filter on transceivers tab
- Blog drafts: click to read full content in panel
- Tighter spacing, smaller fonts, higher information density
- Escape key closes panel, responsive breakpoints
- No gratuitous badges/glow — clean data presentation
---
 packages/dashboard/index.html | 1143 ++++++++++++++++-----------------
 1 file changed, 564 insertions(+), 579 deletions(-)

diff --git a/packages/dashboard/index.html b/packages/dashboard/index.html
index d787cc9..dfd8fa9 100644
--- a/packages/dashboard/index.html
+++ b/packages/dashboard/index.html
@@ -4,20 +4,32 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>TIP — Transceiver Intelligence Platform</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   <style>
     :root {
-      --bg: #0a0e17;
-      --surface: #111827;
-      --surface2: #1f2937;
-      --border: #374151;
-      --text: #e5e7eb;
-      --text-dim: #9ca3af;
-      --accent: #3b82f6;
-      --accent-glow: rgba(59,130,246,0.15);
-      --green: #10b981;
-      --yellow: #f59e0b;
+      --bg: #0c0f16;
+      --surface: #13161f;
+      --surface2: #1a1e2a;
+      --surface3: #222736;
+      --border: #2a3040;
+      --border-hover: #3b4560;
+      --text: #d4d8e3;
+      --text-bright: #f0f2f5;
+      --text-dim: #7a829a;
+      --accent: #4f8ff7;
+      --accent-dim: rgba(79,143,247,0.12);
+      --green: #22c55e;
+      --green-dim: rgba(34,197,94,0.12);
+      --yellow: #eab308;
+      --yellow-dim: rgba(234,179,8,0.12);
       --red: #ef4444;
-      --purple: #8b5cf6;
+      --red-dim: rgba(239,68,68,0.12);
+      --purple: #a78bfa;
+      --purple-dim: rgba(167,139,250,0.12);
+      --orange: #f97316;
+      --orange-dim: rgba(249,115,22,0.12);
+      --mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;
     }
     * { margin:0; padding:0; box-sizing:border-box; }
     body {
@@ -25,318 +37,300 @@
       background: var(--bg);
       color: var(--text);
       min-height: 100vh;
+      font-size: 14px;
+      line-height: 1.5;
     }
+
+    /* HEADER — clean, no gradient nonsense */
     .header {
-      background: linear-gradient(135deg, #111827 0%, #1e1b4b 100%);
+      background: var(--surface);
       border-bottom: 1px solid var(--border);
-      padding: 1.5rem 2rem;
+      padding: 0 1.5rem;
+      height: 48px;
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
     }
+    .header-left { display: flex; align-items: center; gap: 1.5rem; }
     .header h1 {
-      font-size: 1.5rem;
-      font-weight: 700;
-      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: var(--text-bright);
+      letter-spacing: -0.01em;
     }
-    .header .status {
+    .header-stats {
       display: flex;
       gap: 1rem;
-      align-items: center;
-      font-size: 0.85rem;
+      font-size: 0.75rem;
+      font-family: var(--mono);
       color: var(--text-dim);
     }
-    .status-dot {
-      width: 8px; height: 8px; border-radius: 50%;
-      display: inline-block;
-      margin-right: 4px;
+    .header-stats .val { color: var(--text); font-weight: 500; }
+    .header .status {
+      display: flex;
+      gap: 0.75rem;
+      align-items: center;
+      font-size: 0.75rem;
+      color: var(--text-dim);
     }
-    .status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
-    .status-dot.red { background: var(--red); }
+    .dot {
+      width: 6px; height: 6px; border-radius: 50%;
+      display: inline-block;
+      margin-right: 3px;
+    }
+    .dot-ok { background: var(--green); }
+    .dot-err { background: var(--red); }
 
+    /* TABS */
     .tabs {
       display: flex;
       gap: 0;
       border-bottom: 1px solid var(--border);
-      padding: 0 2rem;
+      padding: 0 1.5rem;
       background: var(--surface);
     }
     .tab {
-      padding: 0.75rem 1.25rem;
+      padding: 0.6rem 1rem;
       cursor: pointer;
       border-bottom: 2px solid transparent;
       color: var(--text-dim);
-      font-size: 0.9rem;
-      transition: all 0.2s;
+      font-size: 0.8rem;
+      font-weight: 500;
+      transition: color 0.15s;
     }
     .tab:hover { color: var(--text); }
-    .tab.active {
-      color: var(--accent);
-      border-bottom-color: var(--accent);
-    }
+    .tab.active { color: var(--text-bright); border-bottom-color: var(--accent); }
 
-    .main { padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; }
-
-    .grid { display: grid; gap: 1rem; }
-    .grid-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
-    .grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
-    .grid-2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
+    /* LAYOUT */
+    .main { padding: 1.25rem 1.5rem; max-width: 1600px; margin: 0 auto; }
+    .grid { display: grid; gap: 0.75rem; }
+    .g4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
+    .g3 { grid-template-columns: repeat(3, 1fr); }
+    .g2 { grid-template-columns: 1fr 1fr; }
+    .g2-1 { grid-template-columns: 2fr 1fr; }
 
+    /* CARDS */
     .card {
       background: var(--surface);
       border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 1.25rem;
-    }
-    .card-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1rem;
-    }
-    .card-title {
-      font-size: 0.85rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--text-dim);
-    }
-    .card-value {
-      font-size: 2rem;
-      font-weight: 700;
-      color: var(--text);
-    }
-
-    .badge {
-      display: inline-block;
-      padding: 2px 8px;
-      border-radius: 4px;
-      font-size: 0.75rem;
-      font-weight: 600;
-    }
-    .badge-blue { background: rgba(59,130,246,0.2); color: #60a5fa; }
-    .badge-green { background: rgba(16,185,129,0.2); color: #34d399; }
-    .badge-yellow { background: rgba(245,158,11,0.2); color: #fbbf24; }
-    .badge-red { background: rgba(239,68,68,0.2); color: #f87171; }
-    .badge-purple { background: rgba(139,92,246,0.2); color: #a78bfa; }
-
-    .search-box {
-      display: flex;
-      gap: 0.5rem;
-      margin-bottom: 1.5rem;
-    }
-    .search-box input {
-      flex: 1;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 0.75rem 1rem;
-      color: var(--text);
-      font-size: 0.95rem;
-    }
-    .search-box input:focus { outline: none; border-color: var(--accent); }
-    .search-box select {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 0.5rem 0.75rem;
-      color: var(--text);
-    }
-    .search-box button {
-      background: var(--accent);
-      color: white;
-      border: none;
-      border-radius: 6px;
-      padding: 0.75rem 1.5rem;
-      cursor: pointer;
-      font-weight: 600;
-    }
-    .search-box button:hover { opacity: 0.9; }
-
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.9rem;
-    }
-    th {
-      text-align: left;
-      padding: 0.6rem 0.75rem;
-      border-bottom: 1px solid var(--border);
-      color: var(--text-dim);
-      font-weight: 600;
-      font-size: 0.8rem;
-      text-transform: uppercase;
-    }
-    td {
-      padding: 0.6rem 0.75rem;
-      border-bottom: 1px solid rgba(55,65,81,0.5);
-    }
-    tr:hover td { background: var(--accent-glow); }
-
-    .hype-bar {
-      height: 8px;
-      background: var(--surface2);
-      border-radius: 4px;
-      overflow: hidden;
-      width: 100%;
-    }
-    .hype-fill {
-      height: 100%;
-      border-radius: 4px;
-      transition: width 0.5s;
-    }
-
-    .result-item {
-      background: var(--surface2);
-      border: 1px solid var(--border);
       border-radius: 6px;
       padding: 1rem;
-      margin-bottom: 0.75rem;
     }
-    .result-item h4 { margin-bottom: 0.5rem; }
-    .result-score {
-      font-size: 0.8rem;
-      color: var(--accent);
-      font-weight: 600;
+    .card-sm { padding: 0.75rem; }
+    .card-label {
+      font-size: 0.7rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: var(--text-dim);
+      margin-bottom: 0.25rem;
     }
-    .result-meta { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.5rem; }
-
-    .section-title {
-      font-size: 1.1rem;
-      font-weight: 600;
-      margin: 1.5rem 0 1rem;
+    .card-num {
+      font-size: 1.5rem;
+      font-weight: 700;
+      font-family: var(--mono);
+      color: var(--text-bright);
+      letter-spacing: -0.02em;
+    }
+    .card-num small {
+      font-size: 0.7rem;
+      font-weight: 400;
+      color: var(--text-dim);
+      margin-left: 4px;
     }
 
-    .hidden { display: none !important; }
-    .loading { text-align: center; padding: 2rem; color: var(--text-dim); }
+    /* BADGES */
+    .b { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.7rem; font-weight: 600; font-family: var(--mono); }
+    .b-blue { background: var(--accent-dim); color: var(--accent); }
+    .b-green { background: var(--green-dim); color: var(--green); }
+    .b-yellow { background: var(--yellow-dim); color: var(--yellow); }
+    .b-red { background: var(--red-dim); color: var(--red); }
+    .b-purple { background: var(--purple-dim); color: var(--purple); }
+    .b-orange { background: var(--orange-dim); color: var(--orange); }
+    .b-neutral { background: var(--surface3); color: var(--text-dim); }
 
-    /* Hype Cycle Visualization */
-    .hype-viz { position: relative; }
+    /* TABLES */
+    table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
+    th {
+      text-align: left; padding: 0.5rem 0.6rem;
+      border-bottom: 1px solid var(--border);
+      color: var(--text-dim); font-weight: 500;
+      font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
+      position: sticky; top: 0; background: var(--surface); z-index: 1;
+    }
+    td { padding: 0.45rem 0.6rem; border-bottom: 1px solid rgba(42,48,64,0.5); }
+    tr.clickable { cursor: pointer; }
+    tr.clickable:hover td { background: var(--accent-dim); }
+    .table-wrap { max-height: 70vh; overflow-y: auto; }
+
+    /* SEARCH */
+    .search-row {
+      display: flex; gap: 0.5rem; margin-bottom: 1rem;
+    }
+    .search-row input, .search-row select {
+      background: var(--surface2); border: 1px solid var(--border);
+      border-radius: 4px; padding: 0.5rem 0.75rem;
+      color: var(--text); font-size: 0.85rem;
+    }
+    .search-row input { flex: 1; }
+    .search-row input:focus { outline: none; border-color: var(--accent); }
+    .search-row select { min-width: 120px; }
+    .btn {
+      background: var(--accent); color: #fff; border: none;
+      border-radius: 4px; padding: 0.5rem 1rem;
+      font-weight: 600; font-size: 0.8rem; cursor: pointer;
+    }
+    .btn:hover { opacity: 0.9; }
+    .btn-ghost {
+      background: transparent; border: 1px solid var(--border);
+      color: var(--text); cursor: pointer; border-radius: 4px;
+      padding: 0.4rem 0.75rem; font-size: 0.75rem; font-weight: 500;
+    }
+    .btn-ghost:hover { border-color: var(--border-hover); background: var(--surface2); }
+
+    /* RESULT ITEMS */
+    .ri {
+      border-bottom: 1px solid var(--border);
+      padding: 0.75rem 0;
+      cursor: pointer;
+    }
+    .ri:last-child { border-bottom: none; }
+    .ri:hover { background: var(--accent-dim); margin: 0 -1rem; padding: 0.75rem 1rem; }
+    .ri-title { font-weight: 500; font-size: 0.85rem; color: var(--text-bright); }
+    .ri-body { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.25rem; }
+    .ri-meta { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.25rem; display: flex; gap: 0.5rem; align-items: center; }
+
+    /* HYPE CYCLE */
     .hype-svg-wrap {
       background: var(--surface);
       border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 1.5rem;
+      border-radius: 6px;
+      padding: 1rem 1.5rem;
       overflow-x: auto;
     }
     .hype-svg-wrap svg { display: block; margin: 0 auto; }
-    .hype-dot {
-      cursor: pointer;
-      transition: r 0.2s, filter 0.2s;
-    }
-    .hype-dot:hover { filter: brightness(1.3); }
-    .hype-label {
-      font-size: 11px;
-      fill: var(--text);
-      pointer-events: none;
-      font-family: 'Inter', sans-serif;
-    }
-    .hype-phase-label {
-      font-size: 10px;
-      fill: var(--text-dim);
-      text-anchor: middle;
-      font-family: 'Inter', sans-serif;
-    }
-    .hype-detail-panel {
-      position: fixed;
-      top: 0; right: 0;
-      width: 420px;
-      height: 100vh;
-      background: var(--surface);
-      border-left: 1px solid var(--border);
-      box-shadow: -8px 0 32px rgba(0,0,0,0.5);
-      z-index: 1000;
-      overflow-y: auto;
-      transform: translateX(100%);
-      transition: transform 0.3s ease;
-      padding: 1.5rem;
-    }
-    .hype-detail-panel.open { transform: translateX(0); }
-    .hype-detail-close {
-      position: absolute;
-      top: 1rem; right: 1rem;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text);
-      width: 32px; height: 32px;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 1.1rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .hype-detail-close:hover { background: var(--border); }
-    .hype-detail-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.25rem; }
-    .hype-detail-phase { font-size: 0.85rem; margin-bottom: 1.5rem; }
-    .hype-stat-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 0.75rem;
-      margin-bottom: 1.5rem;
-    }
-    .hype-stat {
-      background: var(--surface2);
-      border-radius: 6px;
-      padding: 0.75rem;
-    }
-    .hype-stat-label { font-size: 0.7rem; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.05em; }
-    .hype-stat-value { font-size: 1.4rem; font-weight: 700; margin-top: 0.25rem; }
-    .hype-forecast-title { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.75rem; }
-    .hype-forecast-bar {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      margin-bottom: 0.4rem;
-      font-size: 0.85rem;
-    }
-    .hype-forecast-bar .year { width: 40px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
-    .hype-forecast-bar .bar-track { flex: 1; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
-    .hype-forecast-bar .bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
-    .hype-forecast-bar .pct { width: 45px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); }
+    .hype-dot { cursor: pointer; transition: filter 0.15s; }
+    .hype-dot:hover { filter: brightness(1.4); }
+    .hype-label { font-size: 10px; fill: var(--text); pointer-events: none; font-family: 'Inter', sans-serif; }
+    .hype-phase-label { font-size: 9px; fill: var(--text-dim); text-anchor: middle; font-family: 'Inter', sans-serif; }
 
-    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
-    .animate-pulse { animation: pulse 2s infinite; }
+    .hype-bar { height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; width: 100%; }
+    .hype-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
 
+    /* DETAIL PANEL (shared) */
+    .panel {
+      position: fixed; top: 0; right: 0;
+      width: 480px; height: 100vh;
+      background: var(--surface); border-left: 1px solid var(--border);
+      box-shadow: -4px 0 24px rgba(0,0,0,0.4);
+      z-index: 1000; overflow-y: auto;
+      transform: translateX(100%); transition: transform 0.25s ease;
+      padding: 1.25rem;
+    }
+    .panel.open { transform: translateX(0); }
+    .panel-close {
+      position: absolute; top: 0.75rem; right: 0.75rem;
+      background: var(--surface2); border: 1px solid var(--border);
+      color: var(--text-dim); width: 28px; height: 28px; border-radius: 4px;
+      cursor: pointer; font-size: 1rem;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .panel-close:hover { background: var(--border); color: var(--text); }
+    .panel-title { font-size: 1.1rem; font-weight: 700; color: var(--text-bright); margin-bottom: 0.15rem; }
+    .panel-sub { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 1rem; }
+    .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; }
+    .panel-stat {
+      background: var(--surface2); border-radius: 4px; padding: 0.6rem;
+    }
+    .panel-stat-label { font-size: 0.65rem; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.04em; }
+    .panel-stat-val { font-size: 1.2rem; font-weight: 700; font-family: var(--mono); margin-top: 0.15rem; color: var(--text-bright); }
+    .panel-section { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin: 1rem 0 0.5rem; }
+    .panel-row {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 0.35rem 0; border-bottom: 1px solid rgba(42,48,64,0.5);
+      font-size: 0.8rem;
+    }
+    .panel-row:last-child { border-bottom: none; }
+    .panel-row-label { color: var(--text-dim); }
+    .panel-row-val { font-weight: 500; font-family: var(--mono); color: var(--text); }
+
+    .forecast-bar {
+      display: flex; align-items: center; gap: 0.5rem;
+      margin-bottom: 0.3rem; font-size: 0.8rem;
+    }
+    .forecast-bar .yr { width: 36px; color: var(--text-dim); font-family: var(--mono); font-size: 0.75rem; }
+    .forecast-bar .track { flex: 1; height: 5px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
+    .forecast-bar .fill { height: 100%; border-radius: 3px; }
+    .forecast-bar .pct { width: 40px; text-align: right; font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim); }
+
+    /* BLOG */
+    .gen-card {
+      background: var(--surface2); border: 1px solid var(--border);
+      border-radius: 6px; padding: 0.75rem; cursor: pointer;
+      transition: border-color 0.15s;
+    }
+    .gen-card:hover { border-color: var(--accent); }
+    .gen-card-title { font-weight: 600; font-size: 0.85rem; color: var(--text-bright); }
+    .gen-card-sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.2rem; }
+
+    /* UTILITIES */
+    .hidden { display: none !important; }
+    .loading { text-align: center; padding: 2rem; color: var(--text-dim); font-size: 0.85rem; }
+    .mono { font-family: var(--mono); }
+    .dim { color: var(--text-dim); }
+    .mt { margin-top: 0.75rem; }
+    .mb { margin-bottom: 0.75rem; }
+
+    /* TOAST */
     .toast {
-      position: fixed;
-      top: 1.5rem;
-      right: 1.5rem;
-      z-index: 9999;
-      background: var(--surface);
-      border: 1px solid var(--green);
-      border-radius: 8px;
-      padding: 1rem 1.5rem;
-      max-width: 420px;
-      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
-      transform: translateX(120%);
-      transition: transform 0.3s ease;
+      position: fixed; top: 1rem; right: 1rem; z-index: 9999;
+      background: var(--surface); border: 1px solid var(--green);
+      border-radius: 6px; padding: 0.75rem 1.25rem; max-width: 380px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+      transform: translateX(120%); transition: transform 0.25s ease;
     }
     .toast.show { transform: translateX(0); }
     .toast.error { border-color: var(--red); }
-    .toast-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }
-    .toast-body { font-size: 0.8rem; color: var(--text-dim); }
+    .toast-title { font-weight: 600; font-size: 0.8rem; color: var(--text-bright); }
+    .toast-body { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.1rem; }
+
+    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
+    .pulse { animation: pulse 2s infinite; }
+
+    @media (max-width: 900px) {
+      .g2, .g2-1, .g3 { grid-template-columns: 1fr; }
+      .panel { width: 100%; }
+      .header-stats { display: none; }
+    }
   </style>
 </head>
 <body>
 
 <div id="toast" class="toast"><div class="toast-title"></div><div class="toast-body"></div></div>
 
+<!-- HEADER -->
 <div class="header">
-  <h1>TIP — Transceiver Intelligence Platform</h1>
+  <div class="header-left">
+    <h1>TIP</h1>
+    <div class="header-stats">
+      <span><span class="val" id="stat-transceivers">—</span> transceivers</span>
+      <span><span class="val" id="stat-vendors">—</span> vendors</span>
+      <span><span class="val" id="stat-standards">—</span> standards</span>
+      <span><span class="val" id="stat-news">—</span> news</span>
+    </div>
+  </div>
   <div class="status">
-    <span><span class="status-dot green" id="api-status"></span> API</span>
-    <span><span class="status-dot green" id="db-status"></span> Database</span>
-    <span><span class="status-dot green" id="qdrant-status"></span> Qdrant</span>
-    <span id="version-label"></span>
+    <span><span class="dot dot-ok" id="api-status"></span>API</span>
+    <span><span class="dot dot-ok" id="db-status"></span>DB</span>
+    <span><span class="dot dot-ok" id="qdrant-status"></span>Qdrant</span>
+    <span class="mono dim" id="version-label"></span>
   </div>
 </div>
 
+<!-- TABS -->
 <div class="tabs">
   <div class="tab active" data-tab="overview">Overview</div>
-  <div class="tab" data-tab="search">Semantic Search</div>
+  <div class="tab" data-tab="search">Search</div>
   <div class="tab" data-tab="hype">Hype Cycle</div>
   <div class="tab" data-tab="transceivers">Transceivers</div>
   <div class="tab" data-tab="news">News</div>
@@ -344,35 +338,27 @@
 </div>
 
 <div class="main">
-  <!-- OVERVIEW TAB -->
+  <!-- OVERVIEW -->
   <div id="tab-overview">
-    <div class="grid grid-4" id="stats-grid" style="margin-bottom:1.5rem">
-      <div class="card"><div class="card-title">Transceivers</div><div class="card-value" id="stat-transceivers">—</div></div>
-      <div class="card"><div class="card-title">Vendors</div><div class="card-value" id="stat-vendors">—</div></div>
-      <div class="card"><div class="card-title">Standards</div><div class="card-value" id="stat-standards">—</div></div>
-      <div class="card"><div class="card-title">News Articles</div><div class="card-value" id="stat-news">—</div></div>
-    </div>
-
-    <div class="grid grid-2">
+    <div class="grid g2 mb">
       <div class="card">
-        <div class="card-title" style="margin-bottom:1rem">Vector Collections</div>
-        <div id="collections-list"></div>
+        <div class="card-label">Vector Collections</div>
+        <div id="collections-list" class="mt" style="font-size:0.8rem"></div>
       </div>
       <div class="card">
-        <div class="card-title" style="margin-bottom:1rem">Recent News</div>
-        <div id="recent-news"></div>
+        <div class="card-label">Recent News</div>
+        <div id="recent-news" class="mt"></div>
       </div>
     </div>
-
-    <div class="card" style="margin-top:1rem">
-      <div class="card-title" style="margin-bottom:1rem">API Endpoints</div>
-      <div id="endpoints-list" style="font-family:monospace;font-size:0.85rem;color:var(--text-dim);line-height:1.8"></div>
+    <div class="card">
+      <div class="card-label">API Endpoints</div>
+      <div id="endpoints-list" class="mt" style="font-family:var(--mono);font-size:0.75rem;color:var(--text-dim);line-height:1.7;columns:2"></div>
     </div>
   </div>
 
-  <!-- SEARCH TAB -->
+  <!-- SEARCH -->
   <div id="tab-search" class="hidden">
-    <div class="search-box">
+    <div class="search-row">
       <input type="text" id="search-input" placeholder="Search transceivers, datasheets, FAQ, troubleshooting...">
       <select id="search-collection">
         <option value="product_embeddings">Products</option>
@@ -381,113 +367,114 @@
         <option value="datasheet_chunks">Datasheets</option>
         <option value="news_embeddings">News</option>
       </select>
-      <button id="search-btn">Search</button>
+      <button class="btn" id="search-btn">Search</button>
     </div>
-    <div id="search-results"></div>
+    <div class="card"><div id="search-results"></div></div>
   </div>
 
-  <!-- HYPE CYCLE TAB -->
+  <!-- HYPE CYCLE -->
   <div id="tab-hype" class="hidden">
     <div class="hype-svg-wrap">
-      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem">
         <div>
-          <div style="font-size:1.1rem;font-weight:700">Optical Transceiver Hype Cycle <span id="hype-year" style="color:var(--accent)">2026</span></div>
-          <div style="font-size:0.8rem;color:var(--text-dim);margin-top:0.25rem">Norton-Bass Multigenerational Diffusion Model — Click any technology for details</div>
+          <span style="font-weight:600;font-size:0.9rem;color:var(--text-bright)">Optical Transceiver Hype Cycle</span>
+          <span class="mono dim" style="margin-left:0.5rem" id="hype-year">2026</span>
+          <div style="font-size:0.7rem;color:var(--text-dim);margin-top:0.15rem">Norton-Bass Model &mdash; click any technology for details</div>
         </div>
-        <div style="display:flex;gap:1rem;font-size:0.75rem;color:var(--text-dim)">
-          <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#3b82f6;vertical-align:middle;margin-right:4px"></span>Innovation</span>
-          <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#f59e0b;vertical-align:middle;margin-right:4px"></span>Peak</span>
-          <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#ef4444;vertical-align:middle;margin-right:4px"></span>Trough</span>
-          <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#8b5cf6;vertical-align:middle;margin-right:4px"></span>Slope</span>
-          <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#10b981;vertical-align:middle;margin-right:4px"></span>Plateau</span>
+        <div style="display:flex;gap:0.75rem;font-size:0.65rem;color:var(--text-dim)">
+          <span><span class="dot dot-ok" style="background:#4f8ff7"></span>Innovation</span>
+          <span><span class="dot" style="background:#eab308"></span>Peak</span>
+          <span><span class="dot" style="background:#ef4444"></span>Trough</span>
+          <span><span class="dot" style="background:#a78bfa"></span>Slope</span>
+          <span><span class="dot" style="background:#22c55e"></span>Plateau</span>
         </div>
       </div>
       <div id="hype-svg-container"></div>
     </div>
-    <div style="margin-top:1rem">
-      <div class="card">
-        <div class="card-title" style="margin-bottom:0.75rem">All Technologies</div>
+    <div class="card mt">
+      <div class="table-wrap">
         <table>
-          <thead>
-            <tr><th>Technology</th><th>Phase</th><th>Position</th><th>Adoption</th><th>Peak Year</th><th>Years to Plateau</th></tr>
-          </thead>
+          <thead><tr><th>Technology</th><th>Phase</th><th>Position</th><th>Adoption</th><th>Peak</th><th>To Plateau</th></tr></thead>
           <tbody id="hype-table"></tbody>
         </table>
       </div>
     </div>
   </div>
 
-  <!-- HYPE CYCLE DETAIL PANEL (slides in from right) -->
-  <div id="hype-detail" class="hype-detail-panel">
-    <button class="hype-detail-close" id="hype-detail-close">&times;</button>
-    <div id="hype-detail-content"></div>
-  </div>
-
-  <!-- TRANSCEIVERS TAB -->
+  <!-- TRANSCEIVERS -->
   <div id="tab-transceivers" class="hidden">
-    <div class="search-box">
-      <input type="text" id="tx-search" placeholder="Search transceivers (e.g. 100G LR4, QSFP28, coherent)...">
-      <button id="tx-search-btn">Search</button>
+    <div class="search-row">
+      <input type="text" id="tx-search" placeholder="Filter: 100G LR4, QSFP28, coherent, SMF...">
+      <select id="tx-ff-filter">
+        <option value="">All Form Factors</option>
+        <option value="SFP">SFP</option>
+        <option value="SFP+">SFP+</option>
+        <option value="SFP28">SFP28</option>
+        <option value="QSFP+">QSFP+</option>
+        <option value="QSFP28">QSFP28</option>
+        <option value="QSFP-DD">QSFP-DD</option>
+        <option value="OSFP">OSFP</option>
+        <option value="CFP2">CFP2</option>
+      </select>
+      <button class="btn" id="tx-search-btn">Search</button>
     </div>
     <div class="card">
-      <table>
-        <thead>
-          <tr><th>Name</th><th>Form Factor</th><th>Speed</th><th>Reach</th><th>Fiber</th><th>Connector</th><th>WDM</th></tr>
-        </thead>
-        <tbody id="tx-table"></tbody>
-      </table>
+      <div class="table-wrap">
+        <table>
+          <thead><tr><th>Name</th><th>Form Factor</th><th>Speed</th><th>Reach</th><th>Fiber</th><th>Connector</th><th>WDM</th><th>Category</th></tr></thead>
+          <tbody id="tx-table"></tbody>
+        </table>
+      </div>
     </div>
   </div>
 
-  <!-- NEWS TAB -->
+  <!-- NEWS -->
   <div id="tab-news" class="hidden">
-    <div id="news-list"></div>
+    <div class="card">
+      <div id="news-list"></div>
+    </div>
   </div>
 
-  <!-- BLOG TAB -->
+  <!-- BLOG -->
   <div id="tab-blog" class="hidden">
-    <div class="grid grid-3" style="margin-bottom:1.5rem">
-      <div class="card" style="cursor:pointer" id="gen-hype">
-        <div class="card-title">Generate</div>
-        <div style="font-weight:600;margin-top:0.5rem">Hype Cycle Analysis</div>
-        <div style="font-size:0.8rem;color:var(--text-dim);margin-top:0.25rem">800G technology position article</div>
+    <div class="grid g3 mb">
+      <div class="gen-card" id="gen-hype">
+        <div class="gen-card-title">Hype Cycle Analysis</div>
+        <div class="gen-card-sub">800G technology position article</div>
       </div>
-      <div class="card" style="cursor:pointer" id="gen-comparison">
-        <div class="card-title">Generate</div>
-        <div style="font-weight:600;margin-top:0.5rem">Product Comparison</div>
-        <div style="font-size:0.8rem;color:var(--text-dim);margin-top:0.25rem">400G transceiver comparison</div>
+      <div class="gen-card" id="gen-comparison">
+        <div class="gen-card-title">Product Comparison</div>
+        <div class="gen-card-sub">400G transceiver comparison</div>
       </div>
-      <div class="card" style="cursor:pointer" id="gen-tutorial">
-        <div class="card-title">Generate</div>
-        <div style="font-weight:600;margin-top:0.5rem">Tutorial</div>
-        <div style="font-size:0.8rem;color:var(--text-dim);margin-top:0.25rem">Transceiver troubleshooting guide</div>
+      <div class="gen-card" id="gen-tutorial">
+        <div class="gen-card-title">Tutorial</div>
+        <div class="gen-card-sub">Transceiver troubleshooting guide</div>
       </div>
     </div>
-    <div class="section-title">Draft History</div>
-    <div id="blog-list"></div>
+    <div class="card"><div id="blog-list"></div></div>
   </div>
 </div>
 
-<script>
-const API = window.location.hostname === 'localhost'
-  ? 'http://localhost:3201'
-  : window.location.origin;
+<!-- DETAIL PANEL (shared for hype cycle + transceivers) -->
+<div id="detail-panel" class="panel">
+  <button class="panel-close" id="panel-close">&times;</button>
+  <div id="panel-content"></div>
+</div>
+
+<script>
+var API = window.location.hostname === 'localhost' ? 'http://localhost:3201' : window.location.origin;
 
-// Safe text escaping to prevent XSS
 function esc(str) {
   if (str == null) return '';
-  const d = document.createElement('div');
+  var d = document.createElement('div');
   d.textContent = String(str);
   return d.innerHTML;
 }
 
-async function api(path) {
-  const r = await fetch(API + path);
-  return r.json();
-}
-
 function el(id) { return document.getElementById(id); }
 
+function api(path) { return fetch(API + path).then(function(r) { return r.json(); }); }
+
 function showToast(title, body, isError) {
   var t = el('toast');
   t.querySelector('.toast-title').textContent = title;
@@ -500,14 +487,22 @@ function showToast(title, body, isError) {
 }
 
 function buildDOM(parent, html) {
-  // Using textContent where possible, innerHTML only with escaped data
   parent.textContent = '';
-  const t = document.createElement('template');
+  var t = document.createElement('template');
   t.innerHTML = html;
   parent.appendChild(t.content.cloneNode(true));
 }
 
-// Tab navigation
+function openPanel(html) {
+  var p = el('detail-panel');
+  buildDOM(el('panel-content'), html);
+  p.classList.add('open');
+}
+function closePanel() { el('detail-panel').classList.remove('open'); }
+el('panel-close').addEventListener('click', closePanel);
+document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closePanel(); });
+
+// TABS
 document.querySelectorAll('.tab').forEach(function(tab) {
   tab.addEventListener('click', function() {
     document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
@@ -521,336 +516,312 @@ document.querySelectorAll('.tab').forEach(function(tab) {
   });
 });
 
-// Overview
+// OVERVIEW
 async function loadOverview() {
   try {
-    var health = await api('/api/health');
-    el('stat-transceivers').textContent = health.database.stats.transceiver_count;
-    el('stat-vendors').textContent = health.database.stats.vendor_count;
-    el('stat-standards').textContent = health.database.stats.standard_count;
-    el('stat-news').textContent = health.database.stats.news_count;
-    el('version-label').textContent = 'v' + health.version;
-
-    el('api-status').className = 'status-dot ' + (health.success ? 'green' : 'red');
-    el('db-status').className = 'status-dot ' + (health.database.connected ? 'green' : 'red');
-  } catch(e) {
-    el('api-status').className = 'status-dot red';
-  }
+    var h = await api('/api/health');
+    el('stat-transceivers').textContent = h.database.stats.transceiver_count;
+    el('stat-vendors').textContent = h.database.stats.vendor_count;
+    el('stat-standards').textContent = h.database.stats.standard_count;
+    el('stat-news').textContent = h.database.stats.news_count;
+    el('version-label').textContent = 'v' + h.version;
+    el('api-status').className = 'dot ' + (h.success ? 'dot-ok' : 'dot-err');
+    el('db-status').className = 'dot ' + (h.database.connected ? 'dot-ok' : 'dot-err');
+  } catch(e) { el('api-status').className = 'dot dot-err'; }
 
   try {
     var stats = await api('/api/search/stats');
     buildDOM(el('collections-list'), stats.collections.map(function(c) {
-      return '<div style="display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid var(--border)">'
-        + '<span style="font-family:monospace;font-size:0.85rem">' + esc(c.collection) + '</span>'
-        + '<span class="badge ' + (c.pointsCount > 0 ? 'badge-green' : 'badge-yellow') + '">' + esc(c.pointsCount) + ' points</span>'
+      return '<div style="display:flex;justify-content:space-between;padding:0.35rem 0;border-bottom:1px solid var(--border)">'
+        + '<span class="mono" style="font-size:0.75rem">' + esc(c.collection) + '</span>'
+        + '<span class="b ' + (c.pointsCount > 0 ? 'b-green' : 'b-yellow') + '">' + esc(c.pointsCount) + '</span>'
         + '</div>';
     }).join(''));
-    el('qdrant-status').className = 'status-dot green';
-  } catch(e) {
-    el('qdrant-status').className = 'status-dot red';
-  }
+    el('qdrant-status').className = 'dot dot-ok';
+  } catch(e) { el('qdrant-status').className = 'dot dot-err'; }
 
   try {
     var root = await api('/');
     buildDOM(el('endpoints-list'), (root.endpoints || []).map(function(e) {
-      return '<div>' + esc(e) + '</div>';
+      return '<div style="padding:0.1rem 0">' + esc(e) + '</div>';
     }).join(''));
   } catch(e) {}
 
   try {
     var news = await api('/api/search?q=transceiver+optics+data+center&collection=news_embeddings&limit=5');
     buildDOM(el('recent-news'), (news.results || []).map(function(n) {
-      return '<div style="padding:0.5rem 0;border-bottom:1px solid var(--border)">'
-        + '<div style="font-weight:500;font-size:0.9rem">' + esc(n.title) + '</div>'
-        + '<div style="font-size:0.8rem;color:var(--text-dim)">' + esc(n.source) + ' &middot; ' + (n.published_at ? new Date(n.published_at).toLocaleDateString() : '') + '</div>'
+      return '<div class="ri">'
+        + '<div class="ri-title">' + esc(n.title) + '</div>'
+        + '<div class="ri-meta"><span class="b b-blue">' + esc(n.source) + '</span> ' + (n.published_at ? new Date(n.published_at).toLocaleDateString() : '') + '</div>'
         + '</div>';
-    }).join('') || '<div class="loading">No news yet</div>');
+    }).join('') || '<div class="loading">No news</div>');
   } catch(e) {}
 }
 
-// Semantic Search
+// SEARCH
 function doSearch() {
   var q = el('search-input').value;
   var col = el('search-collection').value;
   if (!q) return;
-
   el('search-results').textContent = 'Searching...';
-  api('/api/search?q=' + encodeURIComponent(q) + '&collection=' + col + '&limit=10').then(function(data) {
+  api('/api/search?q=' + encodeURIComponent(q) + '&collection=' + col + '&limit=15').then(function(data) {
     buildDOM(el('search-results'), (data.results || []).map(function(r) {
       var title = r.standard_name || r.title || r.question || r.symptom || (r.text ? r.text.slice(0,80) : 'Result');
       var body = r.answer || r.solution || r.summary || (r.text ? r.text.slice(0,300) : '');
-      return '<div class="result-item">'
-        + '<div style="display:flex;justify-content:space-between">'
-        + '<h4>' + esc(title) + '</h4>'
-        + '<span class="result-score">' + (r.score * 100).toFixed(1) + '%</span>'
+      return '<div class="ri">'
+        + '<div style="display:flex;justify-content:space-between;align-items:center">'
+        + '<div class="ri-title">' + esc(title) + '</div>'
+        + '<span class="mono dim" style="font-size:0.7rem">' + (r.score * 100).toFixed(1) + '%</span>'
         + '</div>'
-        + '<div style="font-size:0.9rem;margin-top:0.5rem;color:var(--text-dim)">' + esc(body) + '</div>'
-        + '<div class="result-meta">'
-        + (r.form_factor ? '<span class="badge badge-blue">' + esc(r.form_factor) + '</span> ' : '')
-        + (r.speed ? '<span class="badge badge-purple">' + esc(r.speed) + '</span> ' : '')
-        + (r.category ? '<span class="badge badge-yellow">' + esc(r.category) + '</span> ' : '')
-        + (r.severity ? '<span class="badge badge-red">' + esc(r.severity) + '</span> ' : '')
-        + (r.vendor ? esc(r.vendor) : '')
+        + '<div class="ri-body">' + esc(body) + '</div>'
+        + '<div class="ri-meta">'
+        + (r.form_factor ? '<span class="b b-blue">' + esc(r.form_factor) + '</span>' : '')
+        + (r.speed ? '<span class="b b-purple">' + esc(r.speed) + '</span>' : '')
+        + (r.category ? '<span class="b b-yellow">' + esc(r.category) + '</span>' : '')
+        + (r.severity ? '<span class="b b-red">' + esc(r.severity) + '</span>' : '')
+        + (r.vendor ? '<span class="dim">' + esc(r.vendor) + '</span>' : '')
         + '</div></div>';
     }).join('') || '<div class="loading">No results</div>');
   });
 }
-
 el('search-btn').addEventListener('click', doSearch);
 el('search-input').addEventListener('keydown', function(e) { if (e.key === 'Enter') doSearch(); });
 
-// Hype Cycle
-var PHASE_COLORS = {
-  'Innovation Trigger': '#3b82f6',
-  'Peak of Inflated Expectations': '#f59e0b',
+// HYPE CYCLE
+var PC = {
+  'Innovation Trigger': '#4f8ff7',
+  'Peak of Inflated Expectations': '#eab308',
   'Trough of Disillusionment': '#ef4444',
-  'Slope of Enlightenment': '#8b5cf6',
-  'Plateau of Productivity': '#10b981'
+  'Slope of Enlightenment': '#a78bfa',
+  'Plateau of Productivity': '#22c55e'
+};
+var PHASE_MAP = {
+  'INNOVATION_TRIGGER': 'Innovation Trigger',
+  'PEAK_OF_INFLATED_EXPECTATIONS': 'Peak of Inflated Expectations',
+  'TROUGH_OF_DISILLUSIONMENT': 'Trough of Disillusionment',
+  'SLOPE_OF_ENLIGHTENMENT': 'Slope of Enlightenment',
+  'PLATEAU_OF_PRODUCTIVITY': 'Plateau of Productivity'
 };
 
-function hypeCurveY(x, w, h) {
-  // Classic Gartner hype curve shape: rise, peak, trough, slope, plateau
+function curveY(x, w, h) {
   var t = x / w;
-  if (t < 0.15) return h - (t / 0.15) * h * 0.85; // rise to peak
-  if (t < 0.22) return h * 0.15 + ((t - 0.15) / 0.07) * h * 0.02; // peak plateau
-  if (t < 0.42) return h * 0.17 + ((t - 0.22) / 0.20) * h * 0.55; // drop to trough
-  if (t < 0.48) return h * 0.72 - ((t - 0.42) / 0.06) * h * 0.02; // trough bottom
-  if (t < 0.80) return h * 0.70 - ((t - 0.48) / 0.32) * h * 0.35; // slope up
-  return h * 0.35 - ((t - 0.80) / 0.20) * h * 0.02; // plateau
-}
-
-function positionPctToX(pct, w) {
-  // Map positionPct (0-100) to x on the curve
-  return (pct / 100) * w;
+  if (t < 0.15) return h - (t / 0.15) * h * 0.85;
+  if (t < 0.22) return h * 0.15 + ((t - 0.15) / 0.07) * h * 0.02;
+  if (t < 0.42) return h * 0.17 + ((t - 0.22) / 0.20) * h * 0.55;
+  if (t < 0.48) return h * 0.72 - ((t - 0.42) / 0.06) * h * 0.02;
+  if (t < 0.80) return h * 0.70 - ((t - 0.48) / 0.32) * h * 0.35;
+  return h * 0.35 - ((t - 0.80) / 0.20) * h * 0.02;
 }
 
 function renderHypeSvg(techs) {
-  var W = 960, H = 320, PAD = 40;
-  var cw = W - PAD * 2, ch = H - PAD * 2;
-
-  // Build curve path
+  var W = 1000, H = 300, P = 35;
+  var cw = W - P * 2, ch = H - P * 2;
   var pts = [];
-  for (var i = 0; i <= cw; i += 2) {
-    pts.push(i + PAD + ',' + (hypeCurveY(i, cw, ch) + PAD));
-  }
+  for (var i = 0; i <= cw; i += 2) pts.push((i + P) + ',' + (curveY(i, cw, ch) + P));
 
-  // Phase boundary x positions on the curve
-  var phases = [
-    { label: 'Innovation\\nTrigger', x: 0.07 },
-    { label: 'Peak of Inflated\\nExpectations', x: 0.18 },
-    { label: 'Trough of\\nDisillusionment', x: 0.42 },
-    { label: 'Slope of\\nEnlightenment', x: 0.64 },
-    { label: 'Plateau of\\nProductivity', x: 0.90 }
-  ];
+  var svg = '<svg width="' + W + '" height="' + (H + 40) + '" viewBox="0 0 ' + W + ' ' + (H + 40) + '" xmlns="http://www.w3.org/2000/svg">';
 
-  var svg = '<svg width="' + W + '" height="' + (H + 50) + '" viewBox="0 0 ' + W + ' ' + (H + 50) + '" xmlns="http://www.w3.org/2000/svg">';
-
-  // Phase region backgrounds
-  var regionBounds = [0, 0.15, 0.28, 0.50, 0.78, 1.0];
-  var regionColors = ['#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6', '#10b981'];
+  var rb = [0, 0.15, 0.28, 0.50, 0.78, 1.0];
+  var rc = ['#4f8ff7', '#eab308', '#ef4444', '#a78bfa', '#22c55e'];
   for (var r = 0; r < 5; r++) {
-    var rx1 = regionBounds[r] * cw + PAD;
-    var rx2 = regionBounds[r + 1] * cw + PAD;
-    svg += '<rect x="' + rx1 + '" y="' + PAD + '" width="' + (rx2 - rx1) + '" height="' + ch + '" fill="' + regionColors[r] + '" opacity="0.04" />';
+    svg += '<rect x="' + (rb[r]*cw+P) + '" y="' + P + '" width="' + ((rb[r+1]-rb[r])*cw) + '" height="' + ch + '" fill="' + rc[r] + '" opacity="0.03" />';
   }
 
-  // Phase labels at bottom
-  for (var p = 0; p < phases.length; p++) {
-    var px = phases[p].x * cw + PAD;
-    var lines = phases[p].label.split('\\n');
-    for (var li = 0; li < lines.length; li++) {
-      svg += '<text x="' + px + '" y="' + (H + 15 + li * 13) + '" class="hype-phase-label">' + esc(lines[li]) + '</text>';
+  var pl = [
+    {l:'Innovation\\nTrigger',x:0.07},{l:'Peak of Inflated\\nExpectations',x:0.18},
+    {l:'Trough of\\nDisillusionment',x:0.42},{l:'Slope of\\nEnlightenment',x:0.64},
+    {l:'Plateau of\\nProductivity',x:0.90}
+  ];
+  for (var p = 0; p < pl.length; p++) {
+    var px = pl[p].x * cw + P;
+    var ll = pl[p].l.split('\\n');
+    for (var li = 0; li < ll.length; li++) {
+      svg += '<text x="' + px + '" y="' + (H + 12 + li * 12) + '" class="hype-phase-label">' + esc(ll[li]) + '</text>';
     }
   }
 
-  // Curve line
-  svg += '<polyline points="' + pts.join(' ') + '" fill="none" stroke="#4b5563" stroke-width="2.5" stroke-linecap="round" />';
+  svg += '<polyline points="' + pts.join(' ') + '" fill="none" stroke="#333b4d" stroke-width="2" />';
 
-  // Technology dots + labels
   var placed = [];
   for (var ti = 0; ti < techs.length; ti++) {
-    var t = techs[ti];
-    var color = PHASE_COLORS[t.phase] || '#6b7280';
-    var tx = positionPctToX(t.positionPct, cw);
-    var ty = hypeCurveY(tx, cw, ch);
-    tx += PAD;
-    ty += PAD;
-
-    // Nudge overlapping labels
-    var labelY = ty - 14;
-    var labelX = tx + 8;
-    var isRight = true;
+    var t = techs[ti], color = PC[t.phase] || '#6b7280';
+    var tx = (t.positionPct / 100) * cw, ty = curveY(tx, cw, ch);
+    tx += P; ty += P;
+    var ly = ty - 12, lx = tx + 7, anc = 'start';
     for (var pi = 0; pi < placed.length; pi++) {
-      if (Math.abs(placed[pi].x - tx) < 50 && Math.abs(placed[pi].y - labelY) < 16) {
-        labelY = placed[pi].y + 16;
-      }
+      if (Math.abs(placed[pi].x - tx) < 45 && Math.abs(placed[pi].y - ly) < 14) ly = placed[pi].y + 14;
     }
-    if (tx > W - 160) { labelX = tx - 8; isRight = false; }
-    placed.push({ x: tx, y: labelY });
+    if (tx > W - 150) { lx = tx - 7; anc = 'end'; }
+    placed.push({x:tx, y:ly});
 
-    var dotR = 7;
-    svg += '<circle cx="' + tx + '" cy="' + ty + '" r="' + dotR + '" fill="' + color + '" class="hype-dot" data-tech="' + esc(t.technology) + '" />';
-    svg += '<text x="' + labelX + '" y="' + (labelY + 4) + '" class="hype-label" text-anchor="' + (isRight ? 'start' : 'end') + '" font-weight="600">' + esc(t.technology) + '</text>';
+    svg += '<circle cx="' + tx + '" cy="' + ty + '" r="6" fill="' + color + '" class="hype-dot" data-tech="' + esc(t.technology) + '" />';
+    svg += '<text x="' + lx + '" y="' + (ly + 3) + '" class="hype-label" text-anchor="' + anc + '" font-weight="600">' + esc(t.technology) + '</text>';
   }
-
   svg += '</svg>';
   return svg;
 }
 
-async function openHypeDetail(techName) {
-  var panel = el('hype-detail');
-  var content = el('hype-detail-content');
-  content.innerHTML = '';
-  content.textContent = 'Loading...';
-  panel.classList.add('open');
-
+async function openHypeDetail(name) {
+  openPanel('<div class="loading pulse">Loading...</div>');
   try {
-    var data = await api('/api/hype-cycle/' + encodeURIComponent(techName));
-    var color = PHASE_COLORS[data.phaseLabel] || '#6b7280';
+    var d = await api('/api/hype-cycle/' + encodeURIComponent(name));
+    var c = PC[d.phaseLabel] || '#6b7280';
+    var h = '<div class="panel-title">' + esc(d.technology) + '</div>';
+    h += '<div class="panel-sub"><span class="b" style="background:' + c + '22;color:' + c + '">' + esc(d.phaseLabel) + '</span></div>';
+    h += '<div class="panel-grid">';
+    h += '<div class="panel-stat"><div class="panel-stat-label">Adoption</div><div class="panel-stat-val" style="color:' + c + '">' + (d.adoptionPct != null ? (d.adoptionPct*100).toFixed(0) + '%' : '—') + '</div></div>';
+    h += '<div class="panel-stat"><div class="panel-stat-label">Position</div><div class="panel-stat-val">' + (d.positionPct||0) + '%</div></div>';
+    h += '<div class="panel-stat"><div class="panel-stat-label">Peak Year</div><div class="panel-stat-val">' + esc(d.forecast && d.forecast.peakShipmentYear || '—') + '</div></div>';
+    h += '<div class="panel-stat"><div class="panel-stat-label">To Plateau</div><div class="panel-stat-val">' + (d.forecast && d.forecast.yearsToPlateauFromNow != null ? d.forecast.yearsToPlateauFromNow + 'y' : '—') + '</div></div>';
+    h += '</div>';
 
-    var html = '<div class="hype-detail-title">' + esc(data.technology) + '</div>';
-    html += '<div class="hype-detail-phase"><span class="badge" style="background:' + color + '22;color:' + color + '">' + esc(data.phaseLabel) + '</span></div>';
-
-    html += '<div class="hype-stat-grid">';
-    html += '<div class="hype-stat"><div class="hype-stat-label">Adoption</div><div class="hype-stat-value" style="color:' + color + '">' + (data.adoptionPct != null ? (data.adoptionPct * 100).toFixed(0) + '%' : '—') + '</div></div>';
-    html += '<div class="hype-stat"><div class="hype-stat-label">Position</div><div class="hype-stat-value">' + (data.positionPct || 0) + '%</div></div>';
-    html += '<div class="hype-stat"><div class="hype-stat-label">Peak Year</div><div class="hype-stat-value">' + esc(data.forecast && data.forecast.peakShipmentYear ? data.forecast.peakShipmentYear : '—') + '</div></div>';
-    html += '<div class="hype-stat"><div class="hype-stat-label">Years to Plateau</div><div class="hype-stat-value">' + (data.forecast && data.forecast.yearsToPlateauFromNow != null ? data.forecast.yearsToPlateauFromNow + 'y' : '—') + '</div></div>';
-    html += '</div>';
-
-    // Forecast projection bars
-    if (data.forecast && data.forecast.fiveYearProjection && data.forecast.fiveYearProjection.length > 0) {
-      html += '<div class="hype-forecast-title">5-Year Adoption Forecast</div>';
-      for (var fi = 0; fi < data.forecast.fiveYearProjection.length; fi++) {
-        var f = data.forecast.fiveYearProjection[fi];
-        var fColor = PHASE_COLORS[{
-          'INNOVATION_TRIGGER': 'Innovation Trigger',
-          'PEAK_OF_INFLATED_EXPECTATIONS': 'Peak of Inflated Expectations',
-          'TROUGH_OF_DISILLUSIONMENT': 'Trough of Disillusionment',
-          'SLOPE_OF_ENLIGHTENMENT': 'Slope of Enlightenment',
-          'PLATEAU_OF_PRODUCTIVITY': 'Plateau of Productivity'
-        }[f.phase] || ''] || '#6b7280';
-        html += '<div class="hype-forecast-bar">';
-        html += '<span class="year">' + f.year + '</span>';
-        html += '<div class="bar-track"><div class="bar-fill" style="width:' + (f.adoptionPct || 0) + '%;background:' + fColor + '"></div></div>';
-        html += '<span class="pct">' + (f.adoptionPct || 0) + '%</span>';
-        html += '</div>';
+    if (d.forecast && d.forecast.fiveYearProjection && d.forecast.fiveYearProjection.length) {
+      h += '<div class="panel-section">5-Year Forecast</div>';
+      for (var i = 0; i < d.forecast.fiveYearProjection.length; i++) {
+        var f = d.forecast.fiveYearProjection[i];
+        var fc = PC[PHASE_MAP[f.phase] || ''] || '#6b7280';
+        h += '<div class="forecast-bar"><span class="yr">' + f.year + '</span><div class="track"><div class="fill" style="width:' + (f.adoptionPct||0) + '%;background:' + fc + '"></div></div><span class="pct">' + (f.adoptionPct||0) + '%</span></div>';
       }
     }
 
-    // Composite score
-    html += '<div style="margin-top:1.5rem;padding:1rem;background:var(--surface2);border-radius:6px">';
-    html += '<div style="font-size:0.75rem;text-transform:uppercase;color:var(--text-dim);letter-spacing:0.05em">Composite Score</div>';
-    html += '<div style="font-size:2rem;font-weight:700;color:' + color + '">' + (data.compositeScore || 0) + '<span style="font-size:0.9rem;color:var(--text-dim)"> / 100</span></div>';
-    html += '</div>';
+    h += '<div class="panel-section">Composite Score</div>';
+    h += '<div style="padding:0.6rem;background:var(--surface2);border-radius:4px">';
+    h += '<span class="mono" style="font-size:1.5rem;font-weight:700;color:' + c + '">' + (d.compositeScore||0) + '</span><span class="dim" style="font-size:0.8rem"> / 100</span>';
+    h += '</div>';
 
-    buildDOM(content, html);
-  } catch (err) {
-    content.textContent = 'Failed to load: ' + err.message;
-  }
+    buildDOM(el('panel-content'), h);
+  } catch(e) { el('panel-content').textContent = 'Error: ' + e.message; }
 }
 
-el('hype-detail-close').addEventListener('click', function() {
-  el('hype-detail').classList.remove('open');
-});
-
 async function loadHypeCycle() {
   var data = await api('/api/hype-cycle');
   var techs = data.technologies || [];
-
   el('hype-year').textContent = data.year;
 
-  // Render SVG
-  var container = el('hype-svg-container');
-  buildDOM(container, renderHypeSvg(techs));
+  var c = el('hype-svg-container');
+  buildDOM(c, renderHypeSvg(techs));
+  c.querySelectorAll('.hype-dot').forEach(function(dot) {
+    dot.addEventListener('click', function() { openHypeDetail(this.getAttribute('data-tech')); });
+  });
 
-  // Attach click handlers to dots
-  var dots = container.querySelectorAll('.hype-dot');
-  for (var di = 0; di < dots.length; di++) {
-    dots[di].addEventListener('click', function() {
-      openHypeDetail(this.getAttribute('data-tech'));
-    });
-  }
-
-  // Also render table (rows are clickable too)
   buildDOM(el('hype-table'), techs.map(function(t) {
-    var color = PHASE_COLORS[t.phase] || '#374151';
-    return '<tr style="cursor:pointer" data-tech="' + esc(t.technology) + '">'
-      + '<td style="font-weight:600">' + esc(t.technology) + '</td>'
-      + '<td><span class="badge" style="background:' + color + '22;color:' + color + '">' + esc(t.phase) + '</span></td>'
-      + '<td><div class="hype-bar"><div class="hype-fill" style="width:' + esc(t.positionPct) + '%;background:' + color + '"></div></div></td>'
-      + '<td>' + (t.adoptionPct * 100).toFixed(1) + '%</td>'
-      + '<td>' + esc(t.peakYear || '—') + '</td>'
-      + '<td>' + (t.yearsToPlateauFromNow != null ? t.yearsToPlateauFromNow + 'y' : '—') + '</td>'
+    var color = PC[t.phase] || '#374151';
+    return '<tr class="clickable" data-tech="' + esc(t.technology) + '">'
+      + '<td style="font-weight:500">' + esc(t.technology) + '</td>'
+      + '<td><span class="b" style="background:' + color + '22;color:' + color + '">' + esc(t.phase) + '</span></td>'
+      + '<td><div class="hype-bar"><div class="hype-fill" style="width:' + t.positionPct + '%;background:' + color + '"></div></div></td>'
+      + '<td class="mono">' + (t.adoptionPct * 100).toFixed(0) + '%</td>'
+      + '<td class="mono">' + esc(t.peakYear || '—') + '</td>'
+      + '<td class="mono">' + (t.yearsToPlateauFromNow != null ? t.yearsToPlateauFromNow + 'y' : '—') + '</td>'
       + '</tr>';
   }).join(''));
 
-  // Click handlers on table rows
-  var rows = el('hype-table').querySelectorAll('tr[data-tech]');
-  for (var ri = 0; ri < rows.length; ri++) {
-    rows[ri].addEventListener('click', function() {
-      openHypeDetail(this.getAttribute('data-tech'));
-    });
-  }
+  el('hype-table').querySelectorAll('tr.clickable').forEach(function(row) {
+    row.addEventListener('click', function() { openHypeDetail(this.getAttribute('data-tech')); });
+  });
 }
 
-// Transceivers
+// TRANSCEIVERS — with click-through detail
 function searchTransceivers() {
   var q = el('tx-search').value;
-  var url = q ? '/api/transceivers?q=' + encodeURIComponent(q) + '&limit=50' : '/api/transceivers?limit=50';
+  var ff = el('tx-ff-filter').value;
+  var params = [];
+  if (q) params.push('q=' + encodeURIComponent(q));
+  if (ff) params.push('form_factor=' + encodeURIComponent(ff));
+  params.push('limit=100');
+  var url = '/api/transceivers?' + params.join('&');
+
   api(url).then(function(data) {
     buildDOM(el('tx-table'), (data.transceivers || []).map(function(t) {
-      return '<tr>'
-        + '<td style="font-weight:500">' + esc(t.standard_name || t.slug) + '</td>'
-        + '<td><span class="badge badge-blue">' + esc(t.form_factor) + '</span></td>'
-        + '<td>' + esc(t.speed) + '</td>'
+      return '<tr class="clickable" data-txid="' + esc(t.id) + '">'
+        + '<td style="font-weight:500;color:var(--text-bright)">' + esc(t.standard_name || t.slug) + '</td>'
+        + '<td><span class="b b-blue">' + esc(t.form_factor) + '</span></td>'
+        + '<td class="mono">' + esc(t.speed) + '</td>'
         + '<td>' + esc(t.reach_label) + '</td>'
         + '<td>' + esc(t.fiber_type) + '</td>'
         + '<td>' + esc(t.connector) + '</td>'
-        + '<td>' + esc(t.wdm_type) + '</td>'
+        + '<td>' + esc(t.wdm_type || '—') + '</td>'
+        + '<td>' + (t.category ? '<span class="b b-neutral">' + esc(t.category) + '</span>' : '') + '</td>'
         + '</tr>';
     }).join(''));
+
+    el('tx-table').querySelectorAll('tr.clickable').forEach(function(row) {
+      row.addEventListener('click', function() { openTxDetail(this.getAttribute('data-txid')); });
+    });
   });
 }
-el('tx-search-btn').addEventListener('click', searchTransceivers);
-el('tx-search').addEventListener('keydown', function(e) { if (e.key === 'Enter') searchTransceivers(); });
 
-// News
-async function loadNews() {
-  var data = await api('/api/search?q=optical+transceiver+data+center+networking&collection=news_embeddings&limit=20');
-  buildDOM(el('news-list'), (data.results || []).map(function(n) {
-    var urlSafe = (n.url && /^https?:\/\//.test(n.url)) ? n.url : '#';
-    return '<div class="result-item">'
-      + '<h4>' + esc(n.title) + '</h4>'
-      + '<div style="font-size:0.9rem;margin:0.5rem 0;color:var(--text-dim)">' + esc(n.summary) + '</div>'
-      + '<div class="result-meta">'
-      + '<span class="badge badge-blue">' + esc(n.source) + '</span> '
-      + (n.published_at ? new Date(n.published_at).toLocaleDateString() : '')
-      + (urlSafe !== '#' ? ' &middot; <a href="' + esc(urlSafe) + '" target="_blank" rel="noopener noreferrer" style="color:var(--accent)">Read &rarr;</a>' : '')
-      + '</div></div>';
-  }).join('') || '<div class="loading">No news articles</div>');
+async function openTxDetail(id) {
+  openPanel('<div class="loading pulse">Loading...</div>');
+  try {
+    var data = await api('/api/transceivers/' + id);
+    var t = data.transceiver || data;
+    var h = '<div class="panel-title">' + esc(t.standard_name || t.slug) + '</div>';
+    h += '<div class="panel-sub">' + esc(t.description || '') + '</div>';
+
+    h += '<div class="panel-section">Specifications</div>';
+    var specs = [
+      ['Form Factor', t.form_factor],
+      ['Speed', t.speed],
+      ['Speed (Gbps)', t.speed_gbps],
+      ['Reach', t.reach_label],
+      ['Reach (km)', t.reach_km],
+      ['Fiber Type', t.fiber_type],
+      ['Connector', t.connector],
+      ['WDM Type', t.wdm_type],
+      ['Wavelength', t.wavelength_nm ? t.wavelength_nm + ' nm' : null],
+      ['Lanes', t.lanes],
+      ['Category', t.category],
+      ['Coherent', t.is_coherent ? 'Yes' : 'No'],
+      ['Bidirectional', t.is_bidirectional ? 'Yes' : 'No'],
+      ['Temperature', t.temperature_range],
+      ['Power (W)', t.power_max_w],
+      ['Standard', t.standard_name || t.standard_id],
+    ];
+    for (var s = 0; s < specs.length; s++) {
+      if (specs[s][1] != null && specs[s][1] !== '' && specs[s][1] !== false) {
+        h += '<div class="panel-row"><span class="panel-row-label">' + esc(specs[s][0]) + '</span><span class="panel-row-val">' + esc(specs[s][1]) + '</span></div>';
+      }
+    }
+
+    buildDOM(el('panel-content'), h);
+  } catch(e) { el('panel-content').textContent = 'Error: ' + e.message; }
 }
 
-// Blog
+el('tx-search-btn').addEventListener('click', searchTransceivers);
+el('tx-search').addEventListener('keydown', function(e) { if (e.key === 'Enter') searchTransceivers(); });
+el('tx-ff-filter').addEventListener('change', searchTransceivers);
+
+// NEWS
+async function loadNews() {
+  var data = await api('/api/search?q=optical+transceiver+data+center+networking&collection=news_embeddings&limit=25');
+  buildDOM(el('news-list'), (data.results || []).map(function(n) {
+    var urlSafe = (n.url && /^https?:\/\//.test(n.url)) ? n.url : '#';
+    return '<div class="ri">'
+      + '<div class="ri-title">' + esc(n.title) + '</div>'
+      + '<div class="ri-body">' + esc(n.summary) + '</div>'
+      + '<div class="ri-meta">'
+      + '<span class="b b-blue">' + esc(n.source) + '</span>'
+      + (n.published_at ? '<span>' + new Date(n.published_at).toLocaleDateString() + '</span>' : '')
+      + (urlSafe !== '#' ? '<a href="' + esc(urlSafe) + '" target="_blank" rel="noopener noreferrer" style="color:var(--accent);text-decoration:none;font-size:0.7rem">Read &rarr;</a>' : '')
+      + '</div></div>';
+  }).join('') || '<div class="loading">No news</div>');
+}
+
+// BLOG
 function generateBlog(topic, speed) {
-  el('blog-list').textContent = 'Generating blog draft...';
+  el('blog-list').textContent = 'Generating...';
   var body = { topic: topic };
   if (speed) body.speed = speed;
-
   fetch(API + '/api/blog/generate', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(body)
   }).then(function(r) { return r.json(); }).then(function(data) {
-    if (data.success) {
-      showToast('Draft generated', data.draft.title + ' — ' + data.draft.word_count + ' words');
-    } else {
-      showToast('Generation failed', data.error || 'Unknown error', true);
-    }
+    if (data.success) showToast('Draft generated', data.draft.title + ' — ' + data.draft.word_count + ' words');
+    else showToast('Failed', data.error || 'Unknown error', true);
     loadBlogDrafts();
-  }).catch(function(err) {
-    showToast('Network error', err.message, true);
-  });
+  }).catch(function(err) { showToast('Network error', err.message, true); });
 }
 
 el('gen-hype').addEventListener('click', function() { generateBlog('hype_cycle', '800G'); });
@@ -860,23 +831,37 @@ el('gen-tutorial').addEventListener('click', function() { generateBlog('tutorial
 async function loadBlogDrafts() {
   var data = await api('/api/blog');
   buildDOM(el('blog-list'), (data.drafts || []).map(function(d) {
-    var statusClass = d.status === 'published' ? 'badge-green' : d.status === 'review' ? 'badge-yellow' : 'badge-blue';
-    var keywords = (d.seo_keywords || []).map(function(k) { return '#' + esc(k); }).join(' ');
-    return '<div class="result-item">'
+    var sc = d.status === 'published' ? 'b-green' : d.status === 'review' ? 'b-yellow' : 'b-blue';
+    return '<div class="ri" onclick="openBlogDetail(\'' + esc(d.id) + '\')">'
       + '<div style="display:flex;justify-content:space-between;align-items:center">'
-      + '<h4>' + esc(d.title) + '</h4>'
-      + '<span class="badge ' + statusClass + '">' + esc(d.status) + '</span>'
+      + '<div class="ri-title">' + esc(d.title) + '</div>'
+      + '<span class="b ' + sc + '">' + esc(d.status) + '</span>'
       + '</div>'
-      + '<div class="result-meta">'
-      + '<span class="badge badge-purple">' + esc(d.topic) + '</span> '
-      + '<span class="badge badge-blue">' + esc(d.target_audience) + '</span> '
-      + esc(d.word_count) + ' words &middot; ' + new Date(d.created_at).toLocaleDateString()
-      + (keywords ? ' &middot; <span style="color:var(--text-dim)">' + keywords + '</span>' : '')
+      + '<div class="ri-meta">'
+      + '<span class="b b-purple">' + esc(d.topic) + '</span>'
+      + '<span class="b b-neutral">' + esc(d.target_audience) + '</span>'
+      + '<span class="mono">' + esc(d.word_count) + ' words</span>'
+      + '<span>' + new Date(d.created_at).toLocaleDateString() + '</span>'
       + '</div></div>';
-  }).join('') || '<div class="loading">No drafts yet. Click a template above to generate.</div>');
+  }).join('') || '<div class="loading">No drafts yet</div>');
 }
 
-// Init
+async function openBlogDetail(id) {
+  openPanel('<div class="loading pulse">Loading...</div>');
+  try {
+    var data = await api('/api/blog/' + id);
+    var d = data.draft;
+    var h = '<div class="panel-title">' + esc(d.title) + '</div>';
+    h += '<div class="panel-sub"><span class="b b-purple">' + esc(d.topic) + '</span> <span class="b b-neutral">' + esc(d.target_audience) + '</span> <span class="mono dim">' + esc(d.word_count) + ' words</span></div>';
+    h += '<div class="panel-section">Content</div>';
+    h += '<div style="font-size:0.8rem;color:var(--text);white-space:pre-wrap;line-height:1.6;max-height:60vh;overflow-y:auto;background:var(--surface2);padding:0.75rem;border-radius:4px">' + esc(d.draft_content) + '</div>';
+    h += '<div class="panel-section">SEO Keywords</div>';
+    h += '<div style="display:flex;gap:0.25rem;flex-wrap:wrap">' + (d.seo_keywords || []).map(function(k) { return '<span class="b b-neutral">' + esc(k) + '</span>'; }).join('') + '</div>';
+    buildDOM(el('panel-content'), h);
+  } catch(e) { el('panel-content').textContent = 'Error: ' + e.message; }
+}
+
+// INIT
 loadOverview();
 </script>
 </body>