npm - @leanlabsinnov/codegraph - Versions diffs - 0.1.3 → 0.1.5 - Mend

@leanlabsinnov/codegraph 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/README.md +87 -21
package/dist/bin.js +4 -4
package/dist/{chunk-AVP24SX5.js → chunk-C2AULDUQ.js} +2 -2
package/dist/{chunk-B2TIVKUB.js → chunk-GOJIV25M.js} +10 -7
package/dist/chunk-GOJIV25M.js.map +1 -0
package/dist/{chunk-5WYXRWEY.js → chunk-KYPDPBI5.js} +933 -176
package/dist/chunk-KYPDPBI5.js.map +1 -0
package/dist/{chunk-XGPZDCQ4.js → chunk-Z6DQLXRR.js} +18 -3
package/dist/chunk-Z6DQLXRR.js.map +1 -0
package/dist/index.js +4 -4
package/dist/src-HB4UDUBX.js +10 -0
package/dist/{src-M7HSEMBT.js → src-IKWDKNPH.js} +3 -3
package/package.json +2 -1
package/viewer/index.html +1466 -0
package/dist/chunk-5WYXRWEY.js.map +0 -1
package/dist/chunk-B2TIVKUB.js.map +0 -1
package/dist/chunk-XGPZDCQ4.js.map +0 -1
package/dist/src-UVET6JHH.js +0 -10
/package/dist/{chunk-AVP24SX5.js.map → chunk-C2AULDUQ.js.map} +0 -0
/package/dist/{src-M7HSEMBT.js.map → src-HB4UDUBX.js.map} +0 -0
/package/dist/{src-UVET6JHH.js.map → src-IKWDKNPH.js.map} +0 -0

package/viewer/index.html ADDED Viewed

@@ -0,0 +1,1466 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>CodeGraph</title>
+<style>
+/* ─────────────────────────  Design tokens  ───────────────────────── */
+:root {
+  --bg-0:        #0a0e14;
+  --bg-1:        #0f141b;
+  --bg-2:        #161b22;
+  --bg-3:        #1c232c;
+  --border:      #262d36;
+  --border-mid:  #30363d;
+  --text-0:      #e6edf3;
+  --text-1:      #b1bac4;
+  --text-2:      #7d8590;
+  --text-3:      #484f58;
+  --accent:      #58a6ff;
+  --accent-mid:  rgba(88,166,255,0.18);
+  --warn:        #fbbf24;
+  --success:     #56d364;
+  --shadow-lg:   0 10px 40px -10px rgba(0,0,0,0.6);
+  --shadow-md:   0 4px 16px -4px rgba(0,0,0,0.5);
+  /* Node colors — softer, Obsidian-inspired palette */
+  --kind-File:      #6b7280;
+  --kind-Function:  #60a5fa;
+  --kind-Class:     #a78bfa;
+  --kind-Interface: #818cf8;
+  --kind-Component: #22d3ee;
+  --kind-Route:     #34d399;
+  --kind-Variable:  #fbbf24;
+  --edge-IMPORTS:   #6b7280;
+  --edge-CALLS:     #60a5fa;
+  --edge-RENDERS:   #22d3ee;
+  --edge-INHERITS:  #a78bfa;
+  --edge-DEFINES:   #fbbf24;
+  --edge-EXPORTS:   #34d399;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body {
+  height: 100%;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
+  font-feature-settings: "cv11", "ss03";
+  background: var(--bg-0);
+  color: var(--text-0);
+  -webkit-font-smoothing: antialiased;
+  font-size: 13px;
+  line-height: 1.45;
+}
+button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
+button { background: none; border: none; cursor: pointer; }
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--border-mid); }
+::-webkit-scrollbar-track { background: transparent; }
+/* ─────────────────────────  Top bar  ───────────────────────── */
+#app { display: grid; grid-template-rows: 48px 1fr; height: 100%; }
+#topbar {
+  display: flex; align-items: center; gap: 12px;
+  padding: 0 14px;
+  background: var(--bg-1);
+  border-bottom: 1px solid var(--border);
+  z-index: 5;
+}
+#logo {
+  display: flex; align-items: center; gap: 8px;
+  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
+  color: var(--text-0);
+}
+#logo svg { width: 18px; height: 18px; color: var(--accent); }
+#logo small { color: var(--text-2); font-weight: 400; margin-left: 2px; }
+.divider { width: 1px; height: 22px; background: var(--border); }
+select, input[type="search"], input[type="text"] {
+  background: var(--bg-2);
+  border: 1px solid var(--border);
+  color: var(--text-0);
+  padding: 5px 10px;
+  border-radius: 6px;
+  font-size: 12.5px;
+  outline: none;
+  transition: border-color 0.15s, background 0.15s;
+}
+select:hover, input:hover { border-color: var(--border-mid); }
+select:focus, input:focus { border-color: var(--accent); background: var(--bg-3); }
+#repo-select { min-width: 180px; cursor: pointer; }
+#search-bar {
+  position: relative; display: flex; align-items: center;
+  background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px;
+  padding: 0 8px 0 28px; width: 220px; height: 28px;
+  transition: border-color 0.15s, background 0.15s;
+}
+#search-bar:focus-within { border-color: var(--accent); background: var(--bg-3); }
+#search-bar svg { position: absolute; left: 8px; width: 14px; height: 14px; color: var(--text-3); }
+#search-bar input {
+  background: transparent; border: none; outline: none;
+  width: 100%; height: 100%; padding: 0;
+}
+#search-bar input::placeholder { color: var(--text-3); }
+.kbd {
+  font-family: ui-monospace, "SF Mono", monospace;
+  font-size: 10px; color: var(--text-3);
+  background: var(--bg-3); border: 1px solid var(--border);
+  border-radius: 3px; padding: 1px 4px; margin-left: 4px;
+}
+#topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
+.icon-btn {
+  width: 28px; height: 28px;
+  display: flex; align-items: center; justify-content: center;
+  color: var(--text-2);
+  border-radius: 6px;
+  transition: background 0.15s, color 0.15s;
+}
+.icon-btn:hover { background: var(--bg-3); color: var(--text-0); }
+.icon-btn.active { background: var(--accent-mid); color: var(--accent); }
+.icon-btn svg { width: 15px; height: 15px; }
+/* ─────────────────────────  Main grid  ───────────────────────── */
+#main {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  height: 100%;
+  overflow: hidden;
+  transition: grid-template-columns 0.2s ease;
+}
+#main.sidebar-collapsed { grid-template-columns: 0 1fr; }
+#main.sidebar-collapsed #sidebar { transform: translateX(-100%); opacity: 0; }
+/* ─────────────────────────  Sidebar  ───────────────────────── */
+#sidebar {
+  background: var(--bg-1);
+  border-right: 1px solid var(--border);
+  overflow-y: auto; overflow-x: hidden;
+  padding: 14px;
+  transition: transform 0.2s ease, opacity 0.15s ease;
+}
+.section { margin-bottom: 22px; }
+.section-title {
+  font-size: 10.5px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--text-3); margin-bottom: 8px;
+  display: flex; align-items: center; justify-content: space-between;
+}
+.section-title .count {
+  color: var(--text-3); font-weight: 600; font-size: 10px;
+}
+.toggle-row {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 5px 8px; border-radius: 5px;
+  cursor: pointer; user-select: none;
+  transition: background 0.12s;
+}
+.toggle-row:hover { background: var(--bg-2); }
+.toggle-row .toggle-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.toggle-row .dot {
+  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+  box-shadow: 0 0 0 2px var(--bg-1);
+}
+.toggle-row .label {
+  font-size: 12px; color: var(--text-1);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.toggle-row .badge {
+  font-size: 10px; font-variant-numeric: tabular-nums;
+  color: var(--text-3); padding: 0 5px;
+}
+.toggle-row.off { opacity: 0.35; }
+.toggle-row.off .dot { background: var(--text-3) !important; }
+.slider-row { margin-bottom: 12px; }
+.slider-row label {
+  display: flex; justify-content: space-between;
+  font-size: 11.5px; color: var(--text-2); margin-bottom: 4px;
+}
+.slider-row label .value {
+  color: var(--text-1); font-variant-numeric: tabular-nums;
+  font-family: ui-monospace, "SF Mono", monospace; font-size: 11px;
+}
+input[type="range"] {
+  -webkit-appearance: none; appearance: none;
+  width: 100%; height: 18px;
+  background: transparent; cursor: pointer;
+}
+input[type="range"]::-webkit-slider-runnable-track {
+  height: 3px; background: var(--border); border-radius: 2px;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none; appearance: none;
+  width: 12px; height: 12px; border-radius: 50%;
+  background: var(--accent); margin-top: -4.5px;
+  border: 2px solid var(--bg-1); cursor: grab;
+}
+input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
+.checkbox-row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 5px 8px; border-radius: 5px;
+  cursor: pointer; user-select: none;
+  transition: background 0.12s;
+}
+.checkbox-row:hover { background: var(--bg-2); }
+.checkbox-row input { accent-color: var(--accent); cursor: pointer; }
+.checkbox-row .label { font-size: 12px; color: var(--text-1); }
+/* ─────────────────────────  Canvas area  ───────────────────────── */
+#canvas-wrap { position: relative; overflow: hidden; background: var(--bg-0); }
+#canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
+#canvas.dragging { cursor: grabbing; }
+#canvas.node-drag { cursor: crosshair; }
+/* Subtle dotted grid (Obsidian-style) */
+#canvas-wrap::before {
+  content: "";
+  position: absolute; inset: 0;
+  background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
+  background-size: 28px 28px;
+  pointer-events: none;
+}
+/* Vignette */
+#canvas-wrap::after {
+  content: "";
+  position: absolute; inset: 0;
+  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
+  pointer-events: none;
+}
+/* Stats badge (bottom-left) */
+#stats {
+  position: absolute; left: 14px; bottom: 14px;
+  background: rgba(15,20,27,0.88); backdrop-filter: blur(8px);
+  border: 1px solid var(--border);
+  border-radius: 6px; padding: 6px 10px;
+  font-size: 11px; color: var(--text-1);
+  font-variant-numeric: tabular-nums;
+  display: flex; align-items: center; gap: 10px;
+  box-shadow: var(--shadow-md);
+}
+#stats .pulse {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--success); animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%      { opacity: 0.5; transform: scale(1.25); }
+}
+/* Floating zoom controls (bottom-right) */
+#zoom-controls {
+  position: absolute; right: 14px; bottom: 14px;
+  background: rgba(15,20,27,0.88); backdrop-filter: blur(8px);
+  border: 1px solid var(--border); border-radius: 6px;
+  display: flex; align-items: center; padding: 2px;
+  box-shadow: var(--shadow-md);
+}
+#zoom-controls button {
+  width: 28px; height: 28px;
+  display: flex; align-items: center; justify-content: center;
+  color: var(--text-1); border-radius: 4px;
+  transition: background 0.12s, color 0.12s;
+}
+#zoom-controls button:hover { background: var(--bg-3); color: var(--text-0); }
+#zoom-controls .sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; }
+#zoom-controls .level {
+  padding: 0 8px; font-size: 11px; color: var(--text-2);
+  font-variant-numeric: tabular-nums; min-width: 42px; text-align: center;
+}
+/* Minimap (top-right) */
+#minimap {
+  position: absolute; right: 14px; top: 14px;
+  width: 160px; height: 110px;
+  background: rgba(15,20,27,0.88); backdrop-filter: blur(8px);
+  border: 1px solid var(--border); border-radius: 6px;
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+  cursor: pointer;
+}
+#minimap canvas { display: block; width: 100%; height: 100%; }
+/* Detail panel (right, slides in) */
+#detail {
+  position: absolute; right: 14px; bottom: 60px;
+  width: 320px; max-height: calc(100% - 200px);
+  background: rgba(15,20,27,0.94); backdrop-filter: blur(12px);
+  border: 1px solid var(--border-mid);
+  border-radius: 10px;
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  display: flex; flex-direction: column;
+  transform: translateX(20px); opacity: 0; pointer-events: none;
+  transition: transform 0.18s ease, opacity 0.18s ease;
+}
+#detail.visible { transform: translateX(0); opacity: 1; pointer-events: auto; }
+#detail-header {
+  padding: 14px 14px 10px;
+  border-bottom: 1px solid var(--border);
+  display: flex; align-items: flex-start; gap: 10px;
+}
+#detail-header .meta { flex: 1; min-width: 0; }
+#detail-name {
+  font-size: 14px; font-weight: 600; color: var(--text-0);
+  font-family: ui-monospace, "SF Mono", monospace;
+  word-break: break-all; line-height: 1.3; margin-bottom: 6px;
+}
+.kind-badge {
+  display: inline-block; padding: 2px 7px;
+  border-radius: 10px; font-size: 10.5px; font-weight: 700;
+  letter-spacing: 0.03em;
+}
+#detail-close {
+  color: var(--text-3); padding: 2px;
+  display: flex; align-items: center;
+}
+#detail-close:hover { color: var(--text-0); }
+#detail-body {
+  padding: 12px 14px; overflow-y: auto; flex: 1;
+}
+.detail-meta {
+  margin-bottom: 12px; padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+  font-size: 11.5px;
+}
+.detail-meta-row {
+  display: flex; justify-content: space-between;
+  padding: 2px 0; color: var(--text-2);
+}
+.detail-meta-row .key { color: var(--text-3); }
+.detail-meta-row .val {
+  color: var(--text-1);
+  font-family: ui-monospace, "SF Mono", monospace; font-size: 11px;
+  word-break: break-all; text-align: right; max-width: 70%;
+}
+.detail-meta-row .val.clickable {
+  cursor: pointer; transition: color 0.12s;
+}
+.detail-meta-row .val.clickable:hover { color: var(--accent); }
+.edge-group { margin-bottom: 10px; }
+.edge-group-title {
+  font-size: 10px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 4px;
+  display: flex; justify-content: space-between;
+}
+.edge-list { list-style: none; }
+.edge-list li {
+  display: flex; align-items: center; gap: 6px;
+  padding: 4px 6px; border-radius: 4px;
+  font-size: 11.5px; color: var(--text-1);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+.edge-list li:hover { background: var(--bg-3); color: var(--text-0); }
+.edge-list li .edge-pill {
+  font-size: 9px; font-weight: 700;
+  padding: 1px 4px; border-radius: 3px; flex-shrink: 0;
+}
+.edge-list li .target-name {
+  flex: 1; min-width: 0;
+  font-family: ui-monospace, "SF Mono", monospace;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.edge-list li .target-kind-dot {
+  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
+}
+.detail-actions {
+  padding: 10px 14px; border-top: 1px solid var(--border);
+  display: flex; gap: 6px;
+}
+.btn-primary, .btn-secondary {
+  flex: 1; padding: 6px 10px;
+  font-size: 11.5px; font-weight: 600;
+  border-radius: 5px;
+  display: flex; align-items: center; justify-content: center; gap: 6px;
+  transition: all 0.12s;
+}
+.btn-primary {
+  background: var(--accent-mid); color: var(--accent);
+  border: 1px solid var(--accent-mid);
+}
+.btn-primary:hover { background: rgba(88,166,255,0.28); }
+.btn-secondary {
+  background: var(--bg-3); color: var(--text-1);
+  border: 1px solid var(--border);
+}
+.btn-secondary:hover { background: var(--bg-2); color: var(--text-0); }
+/* Tooltip */
+#tooltip {
+  position: fixed; pointer-events: none; z-index: 100;
+  background: rgba(15,20,27,0.96); backdrop-filter: blur(8px);
+  border: 1px solid var(--border-mid);
+  border-radius: 6px; padding: 6px 10px;
+  font-size: 11.5px; color: var(--text-0);
+  white-space: nowrap;
+  box-shadow: var(--shadow-md);
+  display: none;
+}
+#tooltip .kind { color: var(--text-2); font-size: 10px; margin-right: 4px; }
+/* Help overlay */
+#help {
+  position: absolute; inset: 0; z-index: 50;
+  background: rgba(10,14,20,0.75); backdrop-filter: blur(8px);
+  display: none; align-items: center; justify-content: center;
+}
+#help.visible { display: flex; }
+#help-content {
+  background: var(--bg-1); border: 1px solid var(--border-mid);
+  border-radius: 10px; padding: 24px 28px;
+  max-width: 480px; box-shadow: var(--shadow-lg);
+}
+#help-content h2 { font-size: 16px; margin-bottom: 16px; color: var(--text-0); }
+#help-content h3 {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--text-3); margin: 14px 0 6px;
+}
+.shortcut {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 5px 0; font-size: 12px; color: var(--text-1);
+}
+.shortcut .keys { display: flex; gap: 4px; }
+.shortcut .keys .kbd {
+  background: var(--bg-3); border: 1px solid var(--border-mid);
+  color: var(--text-1); font-size: 11px; padding: 2px 6px;
+}
+/* Overlay (loading / empty state) */
+#overlay {
+  position: absolute; inset: 0; z-index: 30;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  background: var(--bg-0); gap: 14px;
+  transition: opacity 0.3s;
+}
+#overlay.hidden { opacity: 0; pointer-events: none; }
+.spinner {
+  width: 30px; height: 30px;
+  border: 2.5px solid var(--bg-3);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+#overlay .msg { font-size: 13px; color: var(--text-2); max-width: 380px; text-align: center; }
+#overlay .empty-icon {
+  width: 64px; height: 64px; color: var(--text-3);
+  margin-bottom: 8px;
+}
+#overlay code {
+  background: var(--bg-2); border: 1px solid var(--border);
+  padding: 2px 6px; border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", monospace;
+  color: var(--accent); font-size: 12px;
+}
+</style>
+</head>
+<body>
+<div id="app">
+  <!-- ──────── Top bar ──────── -->
+  <header id="topbar">
+    <div id="logo">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="5" r="2.5"/><circle cx="5" cy="19" r="2.5"/><circle cx="19" cy="19" r="2.5"/>
+        <line x1="12" y1="7.5" x2="6" y2="16.5"/><line x1="12" y1="7.5" x2="18" y2="16.5"/>
+      </svg>
+      CodeGraph <small>viewer</small>
+    </div>
+    <span class="divider"></span>
+    <select id="repo-select" title="Repo"><option value="">— select repo —</option></select>
+    <div id="search-bar">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/>
+      </svg>
+      <input id="search" type="search" placeholder="Search symbols…" autocomplete="off" spellcheck="false">
+      <span class="kbd">/</span>
+    </div>
+    <div id="topbar-right">
+      <button class="icon-btn" id="toggle-sidebar" title="Toggle sidebar">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
+      </button>
+      <button class="icon-btn" id="toggle-minimap" title="Toggle minimap">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="1 6 8 3 16 6 23 3 23 18 16 21 8 18 1 21"/><line x1="8" y1="3" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="21"/></svg>
+      </button>
+      <button class="icon-btn" id="show-help" title="Help (?)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+      </button>
+    </div>
+  </header>
+  <!-- ──────── Main grid ──────── -->
+  <div id="main">
+    <!-- ──────── Sidebar ──────── -->
+    <aside id="sidebar">
+      <div class="section">
+        <div class="section-title">
+          <span>Node Types</span>
+          <span class="count" id="node-count">0</span>
+        </div>
+        <div id="node-filters"></div>
+      </div>
+      <div class="section">
+        <div class="section-title">
+          <span>Edge Types</span>
+          <span class="count" id="edge-count">0</span>
+        </div>
+        <div id="edge-filters"></div>
+      </div>
+      <div class="section">
+        <div class="section-title"><span>Display</span></div>
+        <label class="checkbox-row"><input type="checkbox" id="opt-size-by-degree" checked><span class="label">Size by connections</span></label>
+        <label class="checkbox-row"><input type="checkbox" id="opt-show-labels" checked><span class="label">Show labels</span></label>
+        <label class="checkbox-row"><input type="checkbox" id="opt-curved-edges" checked><span class="label">Curved edges</span></label>
+      </div>
+      <div class="section">
+        <div class="section-title"><span>Physics</span></div>
+        <div class="slider-row">
+          <label>Link distance <span class="value" id="v-link-dist">90</span></label>
+          <input type="range" id="s-link-dist" min="30" max="200" value="90">
+        </div>
+        <div class="slider-row">
+          <label>Link strength <span class="value" id="v-link-str">40</span></label>
+          <input type="range" id="s-link-str" min="0" max="100" value="40">
+        </div>
+        <div class="slider-row">
+          <label>Repel force <span class="value" id="v-repel">90</span></label>
+          <input type="range" id="s-repel" min="20" max="200" value="90">
+        </div>
+        <div class="slider-row">
+          <label>Center gravity <span class="value" id="v-gravity">8</span></label>
+          <input type="range" id="s-gravity" min="0" max="40" value="8">
+        </div>
+      </div>
+    </aside>
+    <!-- ──────── Canvas area ──────── -->
+    <div id="canvas-wrap">
+      <canvas id="canvas"></canvas>
+      <div id="minimap"><canvas id="minimap-canvas"></canvas></div>
+      <div id="stats">
+        <span class="pulse"></span>
+        <span id="stats-text">—</span>
+      </div>
+      <div id="zoom-controls">
+        <button id="zoom-out" title="Zoom out (-)">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>
+        </button>
+        <span class="level" id="zoom-level">100%</span>
+        <button id="zoom-in" title="Zoom in (+)">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+        </button>
+        <span class="sep"></span>
+        <button id="zoom-fit" title="Fit to view (F)">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 4 20 10 20"/><polyline points="20 10 20 4 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+        </button>
+      </div>
+      <!-- Detail panel -->
+      <div id="detail">
+        <div id="detail-header">
+          <div class="meta">
+            <div id="detail-name">—</div>
+            <span class="kind-badge" id="detail-kind">—</span>
+          </div>
+          <button id="detail-close" title="Close (Esc)">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+        <div id="detail-body">
+          <div class="detail-meta">
+            <div class="detail-meta-row"><span class="key">Path</span><span class="val clickable" id="detail-path">—</span></div>
+            <div class="detail-meta-row"><span class="key">Line</span><span class="val" id="detail-line">—</span></div>
+            <div class="detail-meta-row"><span class="key">Connections</span><span class="val" id="detail-degree">—</span></div>
+          </div>
+          <div id="detail-edges"></div>
+        </div>
+        <div class="detail-actions">
+          <button class="btn-primary" id="btn-focus">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="9"/></svg>
+            Focus
+          </button>
+          <button class="btn-secondary" id="btn-unpin" title="Unpin all">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"/></svg>
+            Unpin
+          </button>
+        </div>
+      </div>
+      <!-- Help overlay -->
+      <div id="help">
+        <div id="help-content">
+          <h2>Keyboard & mouse</h2>
+          <h3>Navigation</h3>
+          <div class="shortcut"><span>Pan</span><span class="keys"><span class="kbd">Drag canvas</span></span></div>
+          <div class="shortcut"><span>Zoom</span><span class="keys"><span class="kbd">Scroll</span><span class="kbd">+</span><span class="kbd">−</span></span></div>
+          <div class="shortcut"><span>Fit to view</span><span class="keys"><span class="kbd">F</span><span class="kbd">Double-click</span></span></div>
+          <h3>Selection</h3>
+          <div class="shortcut"><span>Select node</span><span class="keys"><span class="kbd">Click</span></span></div>
+          <div class="shortcut"><span>Pin / move node</span><span class="keys"><span class="kbd">Drag node</span></span></div>
+          <div class="shortcut"><span>Deselect</span><span class="keys"><span class="kbd">Esc</span></span></div>
+          <h3>Other</h3>
+          <div class="shortcut"><span>Focus search</span><span class="keys"><span class="kbd">/</span></span></div>
+          <div class="shortcut"><span>Toggle sidebar</span><span class="keys"><span class="kbd">B</span></span></div>
+          <div class="shortcut"><span>Help</span><span class="keys"><span class="kbd">?</span></span></div>
+        </div>
+      </div>
+      <!-- Loading / empty overlay -->
+      <div id="overlay">
+        <div class="spinner"></div>
+        <div class="msg" id="overlay-msg">Connecting…</div>
+      </div>
+      <div id="tooltip"></div>
+    </div>
+  </div>
+</div>
+<script>
+'use strict';
+/* ─────────────────────────  Constants  ───────────────────────── */
+const NODE_KINDS = ['File','Function','Class','Interface','Component','Route','Variable'];
+const EDGE_KINDS = ['IMPORTS','CALLS','RENDERS','INHERITS','DEFINES','EXPORTS'];
+const cssVar = (n) => getComputedStyle(document.documentElement).getPropertyValue(n).trim();
+const KIND_COLOR = {}, EDGE_COLOR = {};
+for (const k of NODE_KINDS) KIND_COLOR[k] = cssVar(`--kind-${k}`);
+for (const k of EDGE_KINDS) EDGE_COLOR[k] = cssVar(`--edge-${k}`);
+/* ─────────────────────────  State  ───────────────────────── */
+const state = {
+  // Graph
+  nodes: [], edges: [],
+  nodeById: new Map(),
+  edgesOut: new Map(),
+  edgesIn:  new Map(),
+  degree: new Map(),
+  // Filters
+  visibleKinds: new Set(NODE_KINDS),
+  visibleEdges: new Set(EDGE_KINDS),
+  searchTerm: '',
+  // Selection
+  selected: null,
+  hovered:  null,
+  focusedSet: null, // 2-hop neighborhood ids when focus-mode
+  // Display
+  sizeByDegree: true,
+  showLabels:   true,
+  curvedEdges:  true,
+  // Physics
+  linkDist:     90,
+  linkStrength: 0.04,
+  repel:        9000,
+  gravity:      0.008,
+  damp:         0.82,
+  // Viewport
+  tx: 0, ty: 0, scale: 1,
+  targetScale: 1,
+  // Simulation
+  simRunning: false, animId: null, alpha: 1,
+  // Interaction
+  draggingNode: null,
+  draggingCanvas: false,
+  dragStart: null,
+  showMinimap: true,
+  showSidebar: true,
+};
+/* ─────────────────────────  DOM refs  ───────────────────────── */
+const $ = (id) => document.getElementById(id);
+const canvas      = $('canvas');
+const ctx         = canvas.getContext('2d');
+const miniCanvas  = $('minimap-canvas');
+const miniCtx     = miniCanvas.getContext('2d');
+const tooltip     = $('tooltip');
+const overlay     = $('overlay');
+const overlayMsg  = $('overlay-msg');
+const repoSel     = $('repo-select');
+const searchEl    = $('search');
+const nodeFilters = $('node-filters');
+const edgeFilters = $('edge-filters');
+const statsText   = $('stats-text');
+const zoomLevel   = $('zoom-level');
+const detailEl    = $('detail');
+const main        = $('main');
+const helpEl      = $('help');
+const minimapEl   = $('minimap');
+/* ─────────────────────────  Filters UI  ───────────────────────── */
+function buildFilters() {
+  nodeFilters.innerHTML = '';
+  edgeFilters.innerHTML = '';
+  for (const kind of NODE_KINDS) {
+    const row = document.createElement('div');
+    row.className = 'toggle-row';
+    row.innerHTML = `
+      <div class="toggle-left">
+        <span class="dot" style="background:${KIND_COLOR[kind]}"></span>
+        <span class="label">${kind}</span>
+      </div>
+      <span class="badge" data-kind="${kind}">0</span>`;
+    row.addEventListener('click', () => {
+      if (state.visibleKinds.has(kind)) state.visibleKinds.delete(kind);
+      else state.visibleKinds.add(kind);
+      row.classList.toggle('off');
+      render();
+    });
+    nodeFilters.appendChild(row);
+  }
+  for (const kind of EDGE_KINDS) {
+    const row = document.createElement('div');
+    row.className = 'toggle-row';
+    row.innerHTML = `
+      <div class="toggle-left">
+        <span class="dot" style="background:${EDGE_COLOR[kind]}"></span>
+        <span class="label">${kind}</span>
+      </div>
+      <span class="badge" data-edge="${kind}">0</span>`;
+    row.addEventListener('click', () => {
+      if (state.visibleEdges.has(kind)) state.visibleEdges.delete(kind);
+      else state.visibleEdges.add(kind);
+      row.classList.toggle('off');
+      render();
+    });
+    edgeFilters.appendChild(row);
+  }
+}
+buildFilters();
+function updateFilterCounts() {
+  const nodeCounts = {}; const edgeCounts = {};
+  for (const k of NODE_KINDS) nodeCounts[k] = 0;
+  for (const k of EDGE_KINDS) edgeCounts[k] = 0;
+  for (const n of state.nodes) nodeCounts[n.kind] = (nodeCounts[n.kind] ?? 0) + 1;
+  for (const e of state.edges) edgeCounts[e.kind] = (edgeCounts[e.kind] ?? 0) + 1;
+  for (const k of NODE_KINDS) {
+    const el = document.querySelector(`[data-kind="${k}"]`);
+    if (el) el.textContent = nodeCounts[k];
+  }
+  for (const k of EDGE_KINDS) {
+    const el = document.querySelector(`[data-edge="${k}"]`);
+    if (el) el.textContent = edgeCounts[k];
+  }
+  $('node-count').textContent = state.nodes.length;
+  $('edge-count').textContent = state.edges.length;
+}
+/* ─────────────────────────  API  ───────────────────────── */
+async function fetchRepos() {
+  const r = await fetch('/api/repos');
+  if (!r.ok) throw new Error(`/api/repos → ${r.status}`);
+  return r.json();
+}
+async function fetchGraph(repoId) {
+  const r = await fetch(`/api/graph?repoId=${encodeURIComponent(repoId)}`);
+  if (!r.ok) {
+    const body = await r.json().catch(() => ({}));
+    throw new Error(body.error || `/api/graph → ${r.status}`);
+  }
+  return r.json();
+}
+/* ─────────────────────────  Graph loading  ───────────────────────── */
+function loadGraph(data) {
+  stopSim();
+  state.selected = null; state.hovered = null; state.focusedSet = null;
+  detailEl.classList.remove('visible');
+  const W = canvas.clientWidth || 800, H = canvas.clientHeight || 600;
+  // Initial layout: spiral so nothing starts on top of each other
+  state.nodes = data.nodes.map((n, i) => {
+    const r = 30 + Math.sqrt(i) * 22;
+    const a = i * 2.399;
+    return { ...n, x: Math.cos(a) * r, y: Math.sin(a) * r, vx: 0, vy: 0, pinned: false };
+  });
+  state.nodeById = new Map(state.nodes.map(n => [n.id, n]));
+  state.edgesOut = new Map(state.nodes.map(n => [n.id, []]));
+  state.edgesIn  = new Map(state.nodes.map(n => [n.id, []]));
+  state.degree   = new Map(state.nodes.map(n => [n.id, 0]));
+  state.edges = [];
+  for (const e of data.edges) {
+    const a = state.nodeById.get(e.from), b = state.nodeById.get(e.to);
+    if (!a || !b) continue;
+    state.edges.push({ from: e.from, to: e.to, kind: e.kind, a, b });
+    state.edgesOut.get(e.from).push({ kind: e.kind, other: b });
+    state.edgesIn.get(e.to).push({ kind: e.kind, other: a });
+    state.degree.set(e.from, state.degree.get(e.from) + 1);
+    state.degree.set(e.to,   state.degree.get(e.to)   + 1);
+  }
+  statsText.textContent = `${state.nodes.length} nodes · ${state.edges.length} edges`;
+  updateFilterCounts();
+  resetView();
+  state.alpha = 1;
+  startSim();
+}
+/* ─────────────────────────  Physics  ───────────────────────── */
+function simStep() {
+  if (state.alpha < 0.005) { state.alpha = 0; stopSim(); return; }
+  const nodes = state.nodes;
+  const n = nodes.length;
+  // Repulsion — Barnes-Hut-ish budget: O(n²) only when ≤ 600 nodes,
+  // otherwise sample 80% of pairs per tick for perf.
+  const sparse = n > 600;
+  for (let i = 0; i < n; i++) {
+    const a = nodes[i];
+    for (let j = i + 1; j < n; j++) {
+      if (sparse && (i * j) % 5 === 0) continue;
+      const b = nodes[j];
+      let dx = b.x - a.x, dy = b.y - a.y;
+      const d2 = dx*dx + dy*dy || 1;
+      const d  = Math.sqrt(d2);
+      const f  = state.repel / d2 * state.alpha;
+      const fx = dx/d * f, fy = dy/d * f;
+      a.vx -= fx; a.vy -= fy;
+      b.vx += fx; b.vy += fy;
+    }
+  }
+  // Springs
+  for (const e of state.edges) {
+    const a = e.a, b = e.b;
+    const dx = b.x - a.x, dy = b.y - a.y;
+    const d  = Math.sqrt(dx*dx + dy*dy) || 1;
+    const f  = (d - state.linkDist) * state.linkStrength * state.alpha;
+    const fx = dx/d * f, fy = dy/d * f;
+    if (!a.pinned) { a.vx += fx; a.vy += fy; }
+    if (!b.pinned) { b.vx -= fx; b.vy -= fy; }
+  }
+  // Gravity + damp
+  for (const node of nodes) {
+    if (node.pinned) continue;
+    node.vx -= node.x * state.gravity;
+    node.vy -= node.y * state.gravity;
+    node.vx *= state.damp;
+    node.vy *= state.damp;
+    node.x  += node.vx;
+    node.y  += node.vy;
+  }
+  state.alpha *= 0.99;
+}
+function startSim() {
+  if (state.simRunning) return;
+  state.simRunning = true;
+  function loop() {
+    if (!state.simRunning) return;
+    simStep();
+    smoothZoom();
+    render();
+    state.animId = requestAnimationFrame(loop);
+  }
+  state.animId = requestAnimationFrame(loop);
+}
+function stopSim() {
+  state.simRunning = false;
+  if (state.animId) { cancelAnimationFrame(state.animId); state.animId = null; }
+}
+function kickSim(a = 0.3) {
+  state.alpha = Math.max(state.alpha, a);
+  if (!state.simRunning) startSim();
+}
+function smoothZoom() {
+  if (Math.abs(state.scale - state.targetScale) > 0.001) {
+    state.scale += (state.targetScale - state.scale) * 0.2;
+  }
+}
+/* ─────────────────────────  Node sizing  ───────────────────────── */
+const BASE_R = 5.5;
+function nodeRadius(n) {
+  if (!state.sizeByDegree) return BASE_R;
+  const d = state.degree.get(n.id) ?? 0;
+  return BASE_R + Math.min(Math.sqrt(d) * 1.8, 12);
+}
+/* ─────────────────────────  Highlighting  ───────────────────────── */
+function neighborSet(node) {
+  if (!node) return null;
+  const out = new Set([node.id]);
+  for (const e of state.edgesOut.get(node.id) ?? []) out.add(e.other.id);
+  for (const e of state.edgesIn.get(node.id)  ?? []) out.add(e.other.id);
+  return out;
+}
+function highlightedSet() {
+  if (state.focusedSet) return state.focusedSet;
+  if (state.selected)  return neighborSet(state.selected);
+  if (state.hovered)   return neighborSet(state.hovered);
+  return null;
+}
+/* ─────────────────────────  Render  ───────────────────────── */
+function render() {
+  const W = canvas.width, H = canvas.height;
+  const dpr = devicePixelRatio || 1;
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, W, H);
+  ctx.translate(W/2 + state.tx * dpr, H/2 + state.ty * dpr);
+  ctx.scale(state.scale * dpr, state.scale * dpr);
+  const s        = state.scale;
+  const search   = state.searchTerm.toLowerCase();
+  const hi       = highlightedSet();
+  const isHi     = (id) => hi == null || hi.has(id);
+  zoomLevel.textContent = `${Math.round(s * 100)}%`;
+  /* Edges */
+  for (const e of state.edges) {
+    if (!state.visibleEdges.has(e.kind)) continue;
+    const a = e.a, b = e.b;
+    if (!state.visibleKinds.has(a.kind) || !state.visibleKinds.has(b.kind)) continue;
+    const highlighted = isHi(a.id) && isHi(b.id);
+    const matchSearch = !search ||
+      a.name.toLowerCase().includes(search) ||
+      b.name.toLowerCase().includes(search);
+    const visible = highlighted && matchSearch;
+    ctx.globalAlpha = visible ? 0.55 : 0.06;
+    ctx.strokeStyle = EDGE_COLOR[e.kind] ?? '#555';
+    ctx.lineWidth   = (visible ? 1.4 : 1.0) / s;
+    const ra = nodeRadius(a), rb = nodeRadius(b);
+    const dx = b.x - a.x, dy = b.y - a.y;
+    const d  = Math.sqrt(dx*dx + dy*dy) || 1;
+    const sx = a.x + dx/d * ra, sy = a.y + dy/d * ra;
+    const ex = b.x - dx/d * rb, ey = b.y - dy/d * rb;
+    ctx.beginPath();
+    if (state.curvedEdges) {
+      // Curve perpendicular by a small offset; positive offset only when from < to id
+      // to avoid same-line A↔B overlap.
+      const off = e.from < e.to ? 8 : -8;
+      const mx = (sx + ex) / 2 + (-dy/d) * off;
+      const my = (sy + ey) / 2 + ( dx/d) * off;
+      ctx.moveTo(sx, sy);
+      ctx.quadraticCurveTo(mx, my, ex, ey);
+    } else {
+      ctx.moveTo(sx, sy);
+      ctx.lineTo(ex, ey);
+    }
+    ctx.stroke();
+    // Arrow head
+    if (visible && s > 0.45) {
+      const ang = Math.atan2(ey - (state.curvedEdges ? ((sy+ey)/2 + (-dy/d)*(e.from<e.to?8:-8)) : sy),
+                              ex - (state.curvedEdges ? ((sx+ex)/2 + (-dy/d)*(e.from<e.to?8:-8)*0) : sx));
+      const finalAng = Math.atan2(dy, dx);
+      const ar = 4 / s;
+      ctx.beginPath();
+      ctx.moveTo(ex, ey);
+      ctx.lineTo(ex - ar*Math.cos(finalAng - 0.42), ey - ar*Math.sin(finalAng - 0.42));
+      ctx.lineTo(ex - ar*Math.cos(finalAng + 0.42), ey - ar*Math.sin(finalAng + 0.42));
+      ctx.closePath();
+      ctx.fillStyle = EDGE_COLOR[e.kind] ?? '#555';
+      ctx.fill();
+    }
+  }
+  /* Nodes */
+  for (const n of state.nodes) {
+    if (!state.visibleKinds.has(n.kind)) continue;
+    const r          = nodeRadius(n) / s;
+    const isSel      = n === state.selected;
+    const isHov      = n === state.hovered;
+    const highlighted= isHi(n.id);
+    const matchSearch= !search || n.name.toLowerCase().includes(search);
+    const visible    = highlighted && matchSearch;
+    const dim        = !visible;
+    const isMatch    = search && n.name.toLowerCase().includes(search);
+    ctx.globalAlpha = dim ? 0.18 : 1;
+    // Glow on selection/hover/match
+    if (isSel || isHov || isMatch) {
+      const glowR = (isSel ? r * 2.6 : isMatch ? r * 2.0 : r * 1.8);
+      const grad = ctx.createRadialGradient(n.x, n.y, r * 0.5, n.x, n.y, glowR);
+      const c = isMatch ? 'rgba(251,191,36,0.45)' : `${KIND_COLOR[n.kind]}66`;
+      grad.addColorStop(0, c);
+      grad.addColorStop(1, `${KIND_COLOR[n.kind]}00`);
+      ctx.fillStyle = grad;
+      ctx.beginPath();
+      ctx.arc(n.x, n.y, glowR, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    // Body
+    ctx.fillStyle = KIND_COLOR[n.kind] ?? '#888';
+    ctx.beginPath();
+    ctx.arc(n.x, n.y, r, 0, Math.PI * 2);
+    ctx.fill();
+    // Ring (selection / search match / pinned)
+    if (isSel) {
+      ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 2 / s;
+      ctx.stroke();
+    } else if (isMatch) {
+      ctx.strokeStyle = '#fbbf24'; ctx.lineWidth = 1.7 / s;
+      ctx.stroke();
+    } else if (isHov) {
+      ctx.strokeStyle = 'rgba(255,255,255,0.55)'; ctx.lineWidth = 1.3 / s;
+      ctx.stroke();
+    }
+    // Pinned indicator: small white dot top-right of the node
+    if (n.pinned) {
+      ctx.fillStyle = '#ffffff';
+      ctx.beginPath();
+      ctx.arc(n.x + r * 0.7, n.y - r * 0.7, 1.4 / s, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    // Label — fade by zoom + dim if not highlighted
+    if (state.showLabels && s > 0.5 && !dim) {
+      const labelAlpha = isSel || isHov || isMatch ? 1 : Math.min(1, (s - 0.5) * 2.5);
+      ctx.globalAlpha = labelAlpha;
+      ctx.fillStyle = isSel || isMatch ? '#ffffff' : '#cfd6dd';
+      ctx.font = `${(isSel ? 12 : 11) / s}px ui-monospace,monospace`;
+      ctx.textBaseline = 'middle';
+      ctx.fillText(n.name, n.x + r + 4/s, n.y);
+    }
+  }
+  ctx.globalAlpha = 1;
+  renderMinimap();
+}
+/* ─────────────────────────  Minimap  ───────────────────────── */
+function renderMinimap() {
+  if (!state.showMinimap) return;
+  const mw = miniCanvas.width, mh = miniCanvas.height;
+  miniCtx.fillStyle = '#0a0e14';
+  miniCtx.fillRect(0, 0, mw, mh);
+  if (!state.nodes.length) return;
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const n of state.nodes) {
+    if (n.x < minX) minX = n.x; if (n.x > maxX) maxX = n.x;
+    if (n.y < minY) minY = n.y; if (n.y > maxY) maxY = n.y;
+  }
+  const rangeX = (maxX - minX) || 1, rangeY = (maxY - minY) || 1;
+  const margin = 8;
+  const sx = (mw - margin*2) / rangeX, sy = (mh - margin*2) / rangeY;
+  const sk = Math.min(sx, sy);
+  const ox = mw/2 - ((minX + maxX) / 2) * sk;
+  const oy = mh/2 - ((minY + maxY) / 2) * sk;
+  for (const n of state.nodes) {
+    if (!state.visibleKinds.has(n.kind)) continue;
+    miniCtx.fillStyle = KIND_COLOR[n.kind] ?? '#666';
+    miniCtx.fillRect(n.x * sk + ox - 1, n.y * sk + oy - 1, 2, 2);
+  }
+  // Viewport rect
+  const W = canvas.clientWidth, H = canvas.clientHeight;
+  const vw = W / state.scale, vh = H / state.scale;
+  const cx = -state.tx / state.scale, cy = -state.ty / state.scale;
+  miniCtx.strokeStyle = 'rgba(255,255,255,0.5)';
+  miniCtx.lineWidth = 1;
+  miniCtx.strokeRect(
+    (cx - vw/2) * sk + ox,
+    (cy - vh/2) * sk + oy,
+    vw * sk, vh * sk,
+  );
+}
+/* ─────────────────────────  Hit-test  ───────────────────────── */
+function toWorld(px, py) {
+  const W = canvas.clientWidth, H = canvas.clientHeight;
+  return {
+    x: (px - W/2 - state.tx) / state.scale,
+    y: (py - H/2 - state.ty) / state.scale,
+  };
+}
+function hitTest(px, py) {
+  const w = toWorld(px, py);
+  let best = null, bestD = Infinity;
+  for (let i = state.nodes.length - 1; i >= 0; i--) {
+    const n = state.nodes[i];
+    if (!state.visibleKinds.has(n.kind)) continue;
+    const r = nodeRadius(n) + 5;
+    const dx = n.x - w.x, dy = n.y - w.y;
+    const d2 = dx*dx + dy*dy;
+    if (d2 < r*r && d2 < bestD) { best = n; bestD = d2; }
+  }
+  return best;
+}
+/* ─────────────────────────  Viewport  ───────────────────────── */
+function resetView() { state.tx = 0; state.ty = 0; state.scale = state.targetScale = 1; render(); }
+function fitView() {
+  if (!state.nodes.length) return;
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const n of state.nodes) {
+    if (!state.visibleKinds.has(n.kind)) continue;
+    if (n.x < minX) minX = n.x; if (n.x > maxX) maxX = n.x;
+    if (n.y < minY) minY = n.y; if (n.y > maxY) maxY = n.y;
+  }
+  if (!isFinite(minX)) return;
+  const W = canvas.clientWidth, H = canvas.clientHeight;
+  const mx = (minX + maxX) / 2, my = (minY + maxY) / 2;
+  const rx = (maxX - minX) || 1, ry = (maxY - minY) || 1;
+  state.targetScale = Math.min(0.85 * W / rx, 0.85 * H / ry, 1.6);
+  state.scale = state.targetScale;
+  state.tx = -mx * state.scale;
+  state.ty = -my * state.scale;
+  render();
+}
+/* ─────────────────────────  Detail panel  ───────────────────────── */
+function showDetail(node) {
+  state.selected = node;
+  detailEl.classList.add('visible');
+  $('detail-name').textContent = node.name;
+  const badge = $('detail-kind');
+  badge.textContent = node.kind;
+  badge.style.background = `${KIND_COLOR[node.kind]}26`;
+  badge.style.color      = KIND_COLOR[node.kind];
+  const path = node.path || '—';
+  const pathEl = $('detail-path');
+  pathEl.textContent = path;
+  pathEl.title = path;
+  pathEl.onclick = path !== '—' ? () => navigator.clipboard?.writeText(path) : null;
+  $('detail-line').textContent = node.lineStart != null && node.lineStart > 0 ? `:${node.lineStart}` : '—';
+  $('detail-degree').textContent = state.degree.get(node.id) ?? 0;
+  // Edges grouped
+  const out = state.edgesOut.get(node.id) ?? [];
+  const inp = state.edgesIn.get(node.id) ?? [];
+  const edgesBox = $('detail-edges');
+  edgesBox.innerHTML = '';
+  function renderGroup(title, list, dir) {
+    if (!list.length) return;
+    const group = document.createElement('div'); group.className = 'edge-group';
+    const groupTitle = document.createElement('div'); groupTitle.className = 'edge-group-title';
+    groupTitle.innerHTML = `<span>${title}</span><span>${list.length}</span>`;
+    group.appendChild(groupTitle);
+    const ul = document.createElement('ul'); ul.className = 'edge-list';
+    for (const { kind, other } of list.slice(0, 30)) {
+      const li = document.createElement('li');
+      li.innerHTML = `
+        <span class="edge-pill" style="background:${EDGE_COLOR[kind]}33;color:${EDGE_COLOR[kind]}">${kind}</span>
+        <span class="target-kind-dot" style="background:${KIND_COLOR[other.kind]}"></span>
+        <span class="target-name" title="${other.name}">${other.name}</span>`;
+      li.addEventListener('click', () => {
+        showDetail(other);
+        centerOn(other);
+        render();
+      });
+      ul.appendChild(li);
+    }
+    if (list.length > 30) {
+      const more = document.createElement('li');
+      more.style.color = 'var(--text-3)';
+      more.style.justifyContent = 'center';
+      more.style.cursor = 'default';
+      more.textContent = `+${list.length - 30} more`;
+      ul.appendChild(more);
+    }
+    group.appendChild(ul);
+    edgesBox.appendChild(group);
+  }
+  renderGroup('Outgoing', out, 'out');
+  renderGroup('Incoming', inp, 'in');
+  if (!out.length && !inp.length) {
+    const empty = document.createElement('div');
+    empty.style.fontSize = '11.5px';
+    empty.style.color = 'var(--text-3)';
+    empty.style.padding = '8px 0';
+    empty.textContent = 'No connected nodes.';
+    edgesBox.appendChild(empty);
+  }
+  render();
+}
+function closeDetail() {
+  state.selected = null;
+  state.focusedSet = null;
+  detailEl.classList.remove('visible');
+  render();
+}
+function centerOn(node) {
+  state.tx = -node.x * state.scale;
+  state.ty = -node.y * state.scale;
+}
+/* ─────────────────────────  Focus mode  ───────────────────────── */
+function focusOnSelected() {
+  if (!state.selected) return;
+  const set = new Set([state.selected.id]);
+  const oneHop = neighborSet(state.selected);
+  for (const id of oneHop ?? []) {
+    set.add(id);
+    for (const e of state.edgesOut.get(id) ?? []) set.add(e.other.id);
+    for (const e of state.edgesIn.get(id)  ?? []) set.add(e.other.id);
+  }
+  state.focusedSet = set;
+  fitFocused();
+}
+function fitFocused() {
+  if (!state.focusedSet) return;
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const n of state.nodes) {
+    if (!state.focusedSet.has(n.id)) continue;
+    if (n.x < minX) minX = n.x; if (n.x > maxX) maxX = n.x;
+    if (n.y < minY) minY = n.y; if (n.y > maxY) maxY = n.y;
+  }
+  if (!isFinite(minX)) return;
+  const W = canvas.clientWidth, H = canvas.clientHeight;
+  const mx = (minX + maxX) / 2, my = (minY + maxY) / 2;
+  const rx = (maxX - minX) || 200, ry = (maxY - minY) || 200;
+  state.targetScale = Math.min(0.75 * W / rx, 0.75 * H / ry, 2.5);
+  state.tx = -mx * state.targetScale;
+  state.ty = -my * state.targetScale;
+}
+function unpinAll() {
+  for (const n of state.nodes) n.pinned = false;
+  kickSim(0.4);
+}
+/* ─────────────────────────  Pointer events  ───────────────────────── */
+function getCanvasXY(e) {
+  const r = canvas.getBoundingClientRect();
+  const t = e.touches?.[0] ?? e;
+  return { x: t.clientX - r.left, y: t.clientY - r.top };
+}
+canvas.addEventListener('pointerdown', (e) => {
+  const { x, y } = getCanvasXY(e);
+  const hit = hitTest(x, y);
+  if (hit) {
+    state.draggingNode = hit;
+    hit.pinned = true;
+    canvas.classList.add('node-drag');
+    showDetail(hit);
+    kickSim(0.2);
+  } else {
+    state.draggingCanvas = true;
+    state.dragStart = { x, y, tx: state.tx, ty: state.ty };
+    canvas.classList.add('dragging');
+    if (state.selected) closeDetail();
+  }
+  canvas.setPointerCapture(e.pointerId);
+});
+canvas.addEventListener('pointermove', (e) => {
+  const { x, y } = getCanvasXY(e);
+  if (state.draggingNode) {
+    const w = toWorld(x, y);
+    state.draggingNode.x = w.x; state.draggingNode.y = w.y;
+    state.draggingNode.vx = 0;   state.draggingNode.vy = 0;
+    if (!state.simRunning) render();
+  } else if (state.draggingCanvas && state.dragStart) {
+    state.tx = state.dragStart.tx + (x - state.dragStart.x);
+    state.ty = state.dragStart.ty + (y - state.dragStart.y);
+    if (!state.simRunning) render();
+  } else {
+    const hit = hitTest(x, y);
+    if (hit !== state.hovered) {
+      state.hovered = hit;
+      if (!state.simRunning) render();
+    }
+    if (hit) {
+      tooltip.style.display = 'block';
+      tooltip.style.left = `${e.clientX + 14}px`;
+      tooltip.style.top  = `${e.clientY - 8}px`;
+      tooltip.innerHTML  = `<span class="kind">${hit.kind}</span>${hit.name}`;
+    } else tooltip.style.display = 'none';
+  }
+});
+canvas.addEventListener('pointerup', () => {
+  if (state.draggingNode) { state.draggingNode = null; canvas.classList.remove('node-drag'); }
+  state.draggingCanvas = false; state.dragStart = null;
+  canvas.classList.remove('dragging');
+});
+canvas.addEventListener('wheel', (e) => {
+  e.preventDefault();
+  const { x, y } = getCanvasXY(e);
+  const W = canvas.clientWidth, H = canvas.clientHeight;
+  const factor = e.deltaY < 0 ? 1.12 : 1/1.12;
+  const ns = Math.max(0.1, Math.min(8, state.scale * factor));
+  const ratio = ns / state.scale;
+  state.tx = (state.tx - (x - W/2)) * ratio + (x - W/2);
+  state.ty = (state.ty - (y - H/2)) * ratio + (y - H/2);
+  state.scale = state.targetScale = ns;
+  if (!state.simRunning) render();
+}, { passive: false });
+canvas.addEventListener('dblclick', () => fitView());
+/* Minimap click → recenter */
+minimapEl.addEventListener('click', (e) => {
+  if (!state.nodes.length) return;
+  const r = miniCanvas.getBoundingClientRect();
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const n of state.nodes) {
+    if (n.x < minX) minX = n.x; if (n.x > maxX) maxX = n.x;
+    if (n.y < minY) minY = n.y; if (n.y > maxY) maxY = n.y;
+  }
+  const rx = (maxX - minX) || 1, ry = (maxY - minY) || 1;
+  const margin = 8;
+  const sk = Math.min((miniCanvas.width - margin*2) / rx,
+                      (miniCanvas.height - margin*2) / ry);
+  const ox = miniCanvas.width/2 - ((minX + maxX) / 2) * sk;
+  const oy = miniCanvas.height/2 - ((minY + maxY) / 2) * sk;
+  const px = ((e.clientX - r.left) * (miniCanvas.width / r.width)  - ox) / sk;
+  const py = ((e.clientY - r.top ) * (miniCanvas.height / r.height) - oy) / sk;
+  state.tx = -px * state.scale;
+  state.ty = -py * state.scale;
+  if (!state.simRunning) render();
+});
+/* ─────────────────────────  Controls  ───────────────────────── */
+$('zoom-in').addEventListener('click', () => zoomBy(1.25));
+$('zoom-out').addEventListener('click', () => zoomBy(1/1.25));
+$('zoom-fit').addEventListener('click', () => fitView());
+$('detail-close').addEventListener('click', closeDetail);
+$('btn-focus').addEventListener('click', focusOnSelected);
+$('btn-unpin').addEventListener('click', unpinAll);
+$('toggle-sidebar').addEventListener('click', () => toggleSidebar());
+$('toggle-minimap').addEventListener('click', () => {
+  state.showMinimap = !state.showMinimap;
+  minimapEl.style.display = state.showMinimap ? 'block' : 'none';
+  $('toggle-minimap').classList.toggle('active', state.showMinimap);
+});
+$('toggle-minimap').classList.add('active');
+$('show-help').addEventListener('click', () => helpEl.classList.toggle('visible'));
+helpEl.addEventListener('click', (e) => { if (e.target === helpEl) helpEl.classList.remove('visible'); });
+function zoomBy(factor) {
+  const W = canvas.clientWidth, H = canvas.clientHeight;
+  const ns = Math.max(0.1, Math.min(8, state.scale * factor));
+  const ratio = ns / state.scale;
+  state.tx *= ratio;
+  state.ty *= ratio;
+  state.scale = state.targetScale = ns;
+  if (!state.simRunning) render();
+}
+function toggleSidebar() {
+  state.showSidebar = !state.showSidebar;
+  main.classList.toggle('sidebar-collapsed', !state.showSidebar);
+  $('toggle-sidebar').classList.toggle('active', state.showSidebar);
+  setTimeout(resizeCanvas, 200);
+}
+$('toggle-sidebar').classList.add('active');
+/* Display toggles */
+$('opt-size-by-degree').addEventListener('change', (e) => { state.sizeByDegree = e.target.checked; render(); });
+$('opt-show-labels').addEventListener('change',    (e) => { state.showLabels = e.target.checked;    render(); });
+$('opt-curved-edges').addEventListener('change',   (e) => { state.curvedEdges = e.target.checked;   render(); });
+/* Physics sliders */
+function bindSlider(id, valueId, key, transform) {
+  const slider = $(id), val = $(valueId);
+  slider.addEventListener('input', () => {
+    const raw = Number(slider.value);
+    state[key] = transform ? transform(raw) : raw;
+    val.textContent = raw;
+    kickSim(0.4);
+  });
+}
+bindSlider('s-link-dist', 'v-link-dist', 'linkDist');
+bindSlider('s-link-str',  'v-link-str',  'linkStrength', (v) => v / 1000);
+bindSlider('s-repel',     'v-repel',     'repel',        (v) => v * 100);
+bindSlider('s-gravity',   'v-gravity',   'gravity',      (v) => v / 1000);
+/* ─────────────────────────  Search  ───────────────────────── */
+searchEl.addEventListener('input', () => {
+  state.searchTerm = searchEl.value.trim();
+  if (!state.simRunning) render();
+});
+/* ─────────────────────────  Keyboard  ───────────────────────── */
+document.addEventListener('keydown', (e) => {
+  if (e.target instanceof HTMLInputElement && e.target.type !== 'range' && e.target.type !== 'checkbox') {
+    if (e.key === 'Escape') e.target.blur();
+    return;
+  }
+  if (e.key === '/') { e.preventDefault(); searchEl.focus(); searchEl.select(); }
+  else if (e.key === '?') { e.preventDefault(); helpEl.classList.toggle('visible'); }
+  else if (e.key === 'f' || e.key === 'F') { fitView(); }
+  else if (e.key === 'b' || e.key === 'B') { toggleSidebar(); }
+  else if (e.key === 'Escape') { closeDetail(); helpEl.classList.remove('visible'); }
+  else if (e.key === '+' || e.key === '=') { zoomBy(1.25); }
+  else if (e.key === '-' || e.key === '_') { zoomBy(1/1.25); }
+});
+/* ─────────────────────────  Resize  ───────────────────────── */
+function resizeCanvas() {
+  for (const c of [canvas, miniCanvas]) {
+    const r = c.getBoundingClientRect();
+    c.width  = Math.max(1, r.width)  * devicePixelRatio;
+    c.height = Math.max(1, r.height) * devicePixelRatio;
+  }
+  if (!state.simRunning) render();
+}
+new ResizeObserver(resizeCanvas).observe(canvas);
+new ResizeObserver(resizeCanvas).observe(miniCanvas);
+/* ─────────────────────────  Repo loader  ───────────────────────── */
+async function onRepoChange(repoId) {
+  if (!repoId) return;
+  overlay.classList.remove('hidden');
+  overlayMsg.textContent = 'Loading graph…';
+  try {
+    const data = await fetchGraph(repoId);
+    loadGraph(data);
+    overlay.classList.add('hidden');
+    setTimeout(fitView, 1500);
+  } catch (err) {
+    overlayMsg.innerHTML = `<div style="color:#fbbf24">Error loading graph</div><div style="margin-top:4px;font-size:11px">${err.message}</div>`;
+  }
+}
+repoSel.addEventListener('change', () => onRepoChange(repoSel.value));
+/* ─────────────────────────  Boot  ───────────────────────── */
+(async () => {
+  overlayMsg.textContent = 'Connecting to CodeGraph…';
+  try {
+    const { repos } = await fetchRepos();
+    if (!repos.length) {
+      overlay.innerHTML = `
+        <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="5" r="2.5"/><circle cx="5" cy="19" r="2.5"/><circle cx="19" cy="19" r="2.5"/>
+          <line x1="12" y1="7.5" x2="6" y2="16.5"/><line x1="12" y1="7.5" x2="18" y2="16.5"/>
+        </svg>
+        <div class="msg">No indexed repos found. Run <code>codegraph index &lt;path&gt;</code> to get started.</div>`;
+      return;
+    }
+    for (const id of repos) {
+      const opt = document.createElement('option');
+      opt.value = opt.textContent = id;
+      repoSel.appendChild(opt);
+    }
+    repoSel.value = repos[0];
+    await onRepoChange(repos[0]);
+  } catch (err) {
+    overlay.innerHTML = `
+      <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+      </svg>
+      <div class="msg">Cannot reach CodeGraph server. Is <code>codegraph serve</code> running?<br/><br/><span style="color:var(--text-3);font-size:11px">${err.message}</span></div>`;
+  }
+})();
+</script>
+</body>
+</html>