@dhruviii/attack-path 1.0.0

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@dhruviii/attack-path",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/Attack-path.umd.cjs",
+  "module": "dist/Attack-path.js",
+  "types": "dist/Attack-path.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/Attack-path.js",
+      "require": "./dist/Attack-path.cjs",
+      "types": "./dist/Attack-path.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/three": "^0.185.1",
+    "framer-motion": "^12.35.0",
+    "lucide-react": "^0.577.0",
+    "react-router-dom": "^7.13.1",
+    "tailwindcss": "^4.2.1",
+    "three": "^0.185.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^5.0.3",
+    "storybook": "^10.5.3",
+    "@storybook/react-vite": "^10.5.3",
+    "@chromatic-com/storybook": "^5.2.1",
+    "@storybook/addon-vitest": "^10.5.3",
+    "@storybook/addon-a11y": "^10.5.3",
+    "@storybook/addon-docs": "^10.5.3",
+    "@storybook/addon-mcp": "^0.7.0",
+    "eslint-plugin-storybook": "^10.5.3",
+    "vitest": "^4.1.10",
+    "playwright": "^1.61.1",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10"
+  }
+}

package/public/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#06080c"/>
+  <circle cx="8" cy="16" r="3" fill="#5b7cfa"/>
+  <circle cx="22" cy="9" r="2.6" fill="#ff5d68"/>
+  <circle cx="22" cy="16" r="2.6" fill="#ffc043"/>
+  <circle cx="22" cy="23" r="2.6" fill="#46a6ff"/>
+  <path d="M11 15 L19 9.5 M11 16 L19 16 M11 17 L19 22.5" stroke="#2a3646" stroke-width="1.4" fill="none"/>
+</svg>

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.tsx

@@ -0,0 +1,9 @@
+import Attack_path from "./Attack-path";
+
+export const App = () => {
+    return (
+        <Attack_path />
+    )
+}
+
+export default App

package/src/Attack-path.tsx

@@ -0,0 +1,195 @@
+import { useEffect, useMemo, useState } from "react";
+import { GitBranch, Maximize2, Minus, Plus, Share2, ShieldCheck } from "lucide-react";
+import data from "./data/data.json";
+import {
+  loadSurfaceFromJSON, graphLayout, pathLayout, severityMeta, subtreeOf, withPositions,
+  type Severity,
+} from "./lib/surface";
+import { usePanZoom } from "./hooks/usePanZoom";
+import { GraphCanvas } from "./components/GraphCanvas";
+import { Minimap } from "./components/Minimap";
+import { DomainSidebar } from "./components/DomainSidebar";
+import { Inspector } from "./components/Inspector";
+
+const SEVERITIES: Severity[] = ["critical", "high", "medium", "low", "info"];
+const NAV = ["Dashboard", "Attack Surface", "Assets", "Findings"];
+
+export default function Attack_path() {
+  const base = useMemo(() => loadSurfaceFromJSON(data), []);
+  const [layout, setLayout] = useState<"path" | "graph">("graph");
+  const positions = useMemo(() => ({ path: pathLayout(base), graph: graphLayout(base) }), [base]);
+  const surface = useMemo(() => withPositions(base, layout === "graph" ? positions.graph : positions.path), [base, layout, positions]);
+
+  const [selected, setSelected] = useState<string | null>(null);
+  const [hovered, setHovered] = useState<string | null>(null);
+  const [sevFilter, setSevFilter] = useState<Set<Severity>>(new Set());
+  const [activeNav, setActiveNav] = useState<string | null>(null);
+
+  const pz = usePanZoom();
+  const [viewport, setViewport] = useState({ w: 1000, h: 700 });
+
+  useEffect(() => {
+    const el = pz.ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setViewport({ w: el.clientWidth, h: el.clientHeight }));
+    ro.observe(el);
+    setViewport({ w: el.clientWidth, h: el.clientHeight });
+    const id = setTimeout(() => pz.fitTo(surface.bounds), 60);
+    return () => { ro.disconnect(); clearTimeout(id); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const t = setTimeout(() => pz.fitTo(surface.bounds), 40);
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [layout]);
+
+  const selectedNode = selected ? surface.nodeMap[selected] : null;
+
+  // ---- node filtering ----
+  const highlight = useMemo(() => {
+    // 1) selection → highlight that node's subtree (domain↔asset↔finding chain)
+    if (selected) return subtreeOf(selected, surface);
+    // 2) severity filter → keep findings of chosen severities + their asset+domain
+    if (sevFilter.size > 0) {
+      const s = new Set<string>();
+      surface.nodes.forEach((n) => {
+        if (n.type === "finding" && sevFilter.has(n.severity)) {
+          s.add(n.id);
+          if (n.parentAsset) s.add(n.parentAsset);
+          if (n.parentDomain) s.add(n.parentDomain);
+        }
+      });
+      return s;
+    }
+    return null;
+  }, [selected, sevFilter, surface]);
+
+  const handleSelect = (id: string | null) => {
+    setSelected(id);
+    if (id) { const n = surface.nodeMap[id]; if (n) pz.centerOn(n.x, n.y); }
+  };
+
+  const toggleSev = (s: Severity) => setSevFilter((prev) => {
+    const n = new Set(prev); n.has(s) ? n.delete(s) : n.add(s); return n;
+  });
+
+  return (
+    <div className="flex h-screen flex-col overflow-hidden bg-void text-ink">
+      {/* Top nav */}
+      <header className="flex h-16 shrink-0 items-center justify-between border-b border-line bg-surface px-6">
+        <div className="flex items-center gap-6">
+          <div className="flex items-center gap-2.5">
+            <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-brand to-violet shadow-card">
+              <ShieldCheck className="h-5 w-5 text-white" strokeWidth={2.2} />
+            </div>
+            <div>
+              <div className="flex items-center gap-2">
+                <span className="text-[15px] font-extrabold tracking-tight text-ink">SENTINEL</span>
+                <span className="rounded-md bg-brand-soft px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider text-brand">Attack Surface</span>
+              </div>
+              <div className="text-[10px] font-medium uppercase tracking-[0.14em] text-faint">Vulnerability Graph</div>
+            </div>
+          </div>
+          <nav className="hidden items-center gap-1 md:flex">
+            {NAV.map((t) => (
+              <button
+                key={t}
+                onClick={() => setActiveNav(t)}
+                className={`rounded-lg px-3.5 py-2 text-[13px] font-semibold transition-colors ${
+                  activeNav === t ? "bg-brand-soft text-brand" : "text-muted hover:bg-panel-2 hover:text-ink"
+                }`}
+              >
+                {t}
+              </button>
+            ))}
+          </nav>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5 rounded-lg border border-mint/30 bg-mint/10 px-3 py-2">
+            <span className="relative flex h-1.5 w-1.5">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-mint opacity-75" />
+              <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-mint" />
+            </span>
+            <span className="text-[11px] font-bold uppercase tracking-wider text-mint">Live</span>
+          </div>
+          <div className="h-9 w-9 rounded-full bg-gradient-to-br from-brand to-azure ring-2 ring-white/10 shadow-card" />
+        </div>
+      </header>
+
+      <div className="flex min-h-0 flex-1">
+        <DomainSidebar surface={surface} selected={selected} onSelect={handleSelect} />
+
+        <main className="relative flex min-w-0 flex-1 flex-col">
+          {/* toolbar */}
+          <div className="flex h-14 shrink-0 items-center gap-3 border-b border-line bg-surface px-5">
+            {/* view toggle */}
+            <div className="flex items-center gap-0.5 rounded-xl border border-line bg-panel p-1">
+              {([{ key: "graph", label: "Graph", icon: <Share2 className="h-3.5 w-3.5" /> }, { key: "path", label: "Path", icon: <GitBranch className="h-3.5 w-3.5" /> }] as const).map((v) => (
+                <button key={v.key} onClick={() => setLayout(v.key)}
+                  className={`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] font-semibold transition-colors ${layout === v.key ? "bg-brand text-white shadow-card" : "text-muted hover:text-ink"}`}>
+                  {v.icon}{v.label}
+                </button>
+              ))}
+            </div>
+
+            {/* severity filter */}
+            <div className="ml-auto flex items-center gap-1 rounded-xl border border-line bg-panel p-1">
+              {SEVERITIES.map((s) => {
+                const active = sevFilter.has(s);
+                return (
+                  <button key={s} onClick={() => toggleSev(s)}
+                    className={`flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-[12px] font-semibold transition-colors ${active ? "bg-panel-2 text-ink" : "text-muted hover:text-ink"}`}
+                    style={active ? { boxShadow: `inset 0 -2px 0 ${severityMeta[s].css}` } : undefined}>
+                    <span className="h-2 w-2 rounded-full" style={{ background: severityMeta[s].css }} />
+                    <span className="hidden lg:inline">{severityMeta[s].label}</span>
+                    <span className="font-mono text-faint tnum">{base.stats.bySeverity[s]}</span>
+                  </button>
+                );
+              })}
+              {sevFilter.size > 0 && <button onClick={() => setSevFilter(new Set())} className="px-2 font-mono text-[10px] text-brand hover:underline">clear</button>}
+            </div>
+          </div>
+
+          {/* canvas */}
+          <div ref={pz.ref} onPointerDown={pz.onPointerDown} onPointerMove={pz.onPointerMove} onPointerUp={pz.onPointerUp} onPointerLeave={pz.onPointerUp}
+            className="relative min-h-0 flex-1 overflow-hidden dot-bg" style={{ cursor: pz.panning ? "grabbing" : "grab" }}>
+            <GraphCanvas surface={surface} transform={pz.t} layout={layout} hovered={hovered} selected={selected}
+              highlight={highlight} onHover={setHovered} onSelect={handleSelect} />
+
+            {/* legend */}
+            <div className="pointer-events-none absolute left-5 top-5 flex flex-col gap-2 rounded-2xl border border-line bg-surface/90 px-4 py-3.5 shadow-card backdrop-blur">
+              <span className="mb-0.5 text-[9px] font-semibold uppercase tracking-wider text-faint">Severity</span>
+              {SEVERITIES.map((s) => (
+                <div key={s} className="flex items-center gap-2">
+                  <span className="h-2.5 w-2.5 rounded-full" style={{ background: severityMeta[s].css }} />
+                  <span className="text-[11px] font-medium text-muted">{severityMeta[s].label}</span>
+                  <span className="ml-auto font-mono text-[10px] text-faint tnum">{base.stats.bySeverity[s]}</span>
+                </div>
+              ))}
+            </div>
+
+            {/* zoom controls */}
+            <div className="absolute bottom-5 left-5 flex flex-col gap-1 rounded-2xl border border-line bg-surface/90 p-1.5 shadow-card backdrop-blur">
+              <Ctrl onClick={() => pz.zoomBy(1.25)}><Plus className="h-4 w-4" /></Ctrl>
+              <div className="py-0.5 text-center font-mono text-[10px] font-medium text-muted tnum">{Math.round(pz.t.k * 100)}%</div>
+              <Ctrl onClick={() => pz.zoomBy(1 / 1.25)}><Minus className="h-4 w-4" /></Ctrl>
+              <div className="my-0.5 h-px bg-line" />
+              <Ctrl onClick={() => pz.fitTo(surface.bounds)}><Maximize2 className="h-4 w-4" /></Ctrl>
+            </div>
+
+            {/* minimap */}
+            <div className="absolute bottom-5 right-5"><Minimap surface={surface} transform={pz.t} viewport={viewport} /></div>
+          </div>
+        </main>
+
+        <Inspector surface={surface} node={selectedNode} onSelect={handleSelect} onClose={() => setSelected(null)} />
+      </div>
+    </div>
+  );
+}
+
+function Ctrl({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
+  return <button onClick={onClick} className="flex h-8 w-8 items-center justify-center rounded-lg text-muted transition-colors hover:bg-panel-2 hover:text-ink">{children}</button>;
+}

package/src/components/DomainSidebar.tsx

@@ -0,0 +1,154 @@
+import { useMemo, useState } from "react";
+import { ChevronRight, Globe, Search, X } from "lucide-react";
+import type { Domain, Severity, Surface } from "../lib/surface";
+import { severityMeta } from "../lib/surface";
+
+const SEV: Severity[] = ["critical", "high", "medium", "low", "info"];
+
+export function DomainSidebar({
+  surface,
+  selected,
+  onSelect,
+}: {
+  surface: Surface;
+  selected: string | null;
+  onSelect: (id: string) => void;
+}) {
+  const [q, setQ] = useState("");
+  const query = q.trim().toLowerCase();
+
+  const domains = useMemo(() => {
+    if (!query) return surface.domains;
+    return surface.domains.filter(
+      (d) =>
+        d.name.toLowerCase().includes(query) ||
+        d.fullName.toLowerCase().includes(query) ||
+        d.url.includes(query) ||
+        d.assetIds.some((aid) => surface.nodeMap[aid]?.host?.toLowerCase().includes(query))
+    );
+  }, [query, surface]);
+
+  const isDomainActive = (d: Domain) => Boolean(selected && selected === d.id);
+
+  return (
+    <aside className="flex w-[320px] shrink-0 flex-col border-r border-line bg-surface select-none">
+      <div className="flex h-14 items-center gap-2.5 border-b border-line px-5">
+        <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-brand-soft">
+          <Globe className="h-4 w-4 text-brand" strokeWidth={2.2} />
+        </div>
+        <span className="text-[13px] font-bold tracking-tight text-ink">Domains</span>
+        <span className="ml-auto rounded-full bg-panel-2 px-2 py-0.5 font-mono text-[11px] font-semibold text-muted tnum">
+          {surface.domains.length}
+        </span>
+      </div>
+
+      {/* search bar */}
+      <div className="border-b border-line p-3">
+        <div className="relative">
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-faint" />
+          <input
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder="Search domains, hosts…"
+            className="h-9 w-full rounded-xl border border-line bg-panel pl-9 pr-8 text-[13px] text-ink placeholder:text-faint focus:border-brand/40 focus:outline-none focus:ring-2 focus:ring-brand/15"
+          />
+          {q && (
+            <button onClick={() => setQ("")} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-faint hover:text-ink">
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* summary */}
+      <div className="flex items-center gap-3 border-b border-line px-5 py-2.5">
+        <Metric label="Domains" value={surface.stats.domains} />
+        <Metric label="Assets" value={surface.stats.assets} />
+        <Metric label="Findings" value={surface.stats.findings} />
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+        {domains.map((d) => (
+          <DomainRow
+            key={d.id}
+            d={d}
+            active={isDomainActive(d)}
+            onSelect={onSelect}
+          />
+        ))}
+        {domains.length === 0 && (
+          <div className="py-10 text-center font-mono text-[11px] text-faint">No domains match</div>
+        )}
+      </div>
+    </aside>
+  );
+}
+
+function DomainRow({
+  d,
+  active,
+  onSelect,
+}: {
+  d: Domain;
+  active: boolean;
+  onSelect: (id: string) => void;
+}) {
+  const worst =
+    d.tally.critical > 0
+      ? "critical"
+      : d.tally.high > 0
+        ? "high"
+        : d.tally.medium > 0
+          ? "medium"
+          : d.tally.low > 0
+            ? "low"
+            : "info";
+
+  return (
+    <button
+      onClick={() => onSelect(d.id)}
+      className={`group mb-2 flex w-full items-center gap-3 rounded-xl border p-3 text-left transition-all ${active
+        ? "border-brand/50 bg-brand-soft/40 shadow-card"
+        : "border-line bg-panel hover:border-brand/40 hover:bg-brand-soft/30"
+        }`}
+    >
+      <div
+        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-transform group-hover:scale-105"
+        style={{ background: `${severityMeta[worst].css}1f` }}
+      >
+        <Globe className="h-4 w-4" style={{ color: severityMeta[worst].css }} />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div
+          className={`truncate text-[13px] font-semibold transition-colors ${active ? "text-brand" : "text-ink group-hover:text-brand"
+            }`}
+        >
+          {d.fullName}
+        </div>
+        <div className="truncate font-mono text-[10.5px] text-faint">{d.url}</div>
+      </div>
+      <div className="flex flex-col items-end gap-1">
+        <span
+          className={`font-mono text-[11px] font-semibold tnum transition-colors ${active ? "text-brand" : "text-muted"
+            }`}
+        >
+          {d.assetIds.length}a
+        </span>
+        <span className="font-mono text-[10px] text-faint tnum">{d.findingIds.length}f</span>
+      </div>
+      <ChevronRight
+        className={`h-4 w-4 shrink-0 transition-colors ${active ? "text-brand" : "text-faint group-hover:text-brand"
+          }`}
+      />
+    </button>
+  );
+}
+
+function Metric({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="flex-1">
+      <div className="font-mono text-[14px] font-bold text-ink tnum">{value}</div>
+      <div className="font-mono text-[8px] uppercase tracking-wider text-faint">{label}</div>
+    </div>
+  );
+}

package/src/components/GraphCanvas.tsx

@@ -0,0 +1,135 @@
+import type { Surface, SLink, SNode } from "../lib/surface";
+import { severityMeta } from "../lib/surface";
+import type { Transform } from "../hooks/usePanZoom";
+import { NodeGlyph } from "./NodeGlyph";
+
+const RADIUS: Record<string, number> = { domain: 24, asset: 18, finding: 13 };
+
+function edgeD(a: SNode, b: SNode, layout: "path" | "graph") {
+  if (layout === "path") {
+    const dx = b.x - a.x;
+    const c = Math.max(40, Math.abs(dx) * 0.5);
+    return `M ${a.x} ${a.y} C ${a.x + c} ${a.y}, ${b.x - c} ${b.y}, ${b.x} ${b.y}`;
+  }
+  const mx = (a.x + b.x) / 2, my = (a.y + b.y) / 2;
+  const dx = b.x - a.x, dy = b.y - a.y;
+  const len = Math.sqrt(dx * dx + dy * dy) || 1;
+  const bow = Math.min(len * 0.12, 40);
+  return `M ${a.x} ${a.y} Q ${mx + (-dy / len) * bow} ${my + (dx / len) * bow}, ${b.x} ${b.y}`;
+}
+
+interface Props {
+  surface: Surface;
+  transform: Transform;
+  layout: "path" | "graph";
+  hovered: string | null;
+  selected: string | null;
+  highlight: Set<string> | null;   // node ids to keep bright (rest dim)
+  onHover: (id: string | null) => void;
+  onSelect: (id: string) => void;
+}
+
+export function GraphCanvas({ surface, transform, layout, hovered, selected, highlight, onHover, onSelect }: Props) {
+  const focus = hovered ?? selected;
+  const showLabels = transform.k > 0.5;
+
+  const edgeActive = (l: SLink) => {
+    if (highlight) return highlight.has(l.from) && highlight.has(l.to);
+    if (focus) return l.from === focus || l.to === focus;
+    return true;
+  };
+
+  return (
+    <svg className="absolute inset-0 h-full w-full" style={{ touchAction: "none" }}>
+      <defs>
+        <marker id="arr" viewBox="0 0 10 10" refX="8.5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+          <path d="M0 0 L10 5 L0 10 z" fill="#3a4a5e" />
+        </marker>
+        <filter id="ng" x="-80%" y="-80%" width="260%" height="260%">
+          <feGaussianBlur stdDeviation="4" result="b" /><feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
+        </filter>
+      </defs>
+
+      <g transform={`translate(${transform.x}, ${transform.y}) scale(${transform.k})`}>
+        {/* column headers in path layout */}
+        {layout === "path" && <PathHeaders surface={surface} />}
+
+        <g>
+          {surface.links.map((l) => {
+            const a = surface.nodeMap[l.from], b = surface.nodeMap[l.to];
+            if (!a || !b) return null;
+            const active = edgeActive(l);
+            const color = l.severity === "info" ? "#2a3646" : severityMeta[l.severity].css;
+            return (
+              <path key={l.id} d={edgeD(a, b, layout)} fill="none"
+                stroke={active ? color : "#232d3c"} strokeWidth={active ? 1.6 : 1} strokeLinecap="round"
+                markerEnd="url(#arr)" opacity={highlight && !active ? 0.12 : active ? 0.6 : 0.3}
+                style={{ transition: "opacity .18s" }} />
+            );
+          })}
+        </g>
+
+        <g>
+          {surface.nodes.map((n) => (
+            <Node key={n.id} n={n} selected={selected === n.id} hovered={hovered === n.id}
+              dim={highlight ? !highlight.has(n.id) : false} showLabel={showLabels}
+              onHover={onHover} onSelect={onSelect} />
+          ))}
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+function PathHeaders({ surface }: { surface: Surface }) {
+  const cols = [
+    { label: "DOMAINS", x: surface.nodes.find((n) => n.type === "domain")?.x ?? 0 },
+    { label: "ASSETS", x: surface.nodes.find((n) => n.type === "asset")?.x ?? 380 },
+    { label: "FINDINGS", x: surface.nodes.find((n) => n.type === "finding")?.x ?? 760 },
+  ];
+  const topY = surface.bounds.minY - 46;
+  return (
+    <g>
+      {cols.map((c) => (
+        <text key={c.label} x={c.x} y={topY} textAnchor="middle"
+          style={{ font: "600 12px 'Plus Jakarta Sans', sans-serif", letterSpacing: "0.12em" }} fill="#4a5a6e">{c.label}</text>
+      ))}
+    </g>
+  );
+}
+
+function Node({ n, selected, hovered, dim, showLabel, onHover, onSelect }: {
+  n: SNode; selected: boolean; hovered: boolean; dim: boolean; showLabel: boolean;
+  onHover: (id: string | null) => void; onSelect: (id: string) => void;
+}) {
+  // const meta = severityMeta[n.severity];
+  const meta = severityMeta[n.severity] ?? severityMeta.info;
+  const R = RADIUS[n.type];
+  const emph = selected || hovered;
+  const color = n.type === "domain" ? "#5b7cfa" : meta.css;
+
+  return (
+    <g data-node transform={`translate(${n.x}, ${n.y})`}
+      onMouseEnter={() => onHover(n.id)} onMouseLeave={() => onHover(null)}
+      onClick={(e) => { e.stopPropagation(); onSelect(n.id); }} style={{ cursor: "pointer" }}>
+      <g style={{ opacity: dim ? 0.24 : 1, transition: "opacity .18s" }}>
+        {emph && <circle r={R + 6} fill={n.type === "domain" ? "#16203a" : meta.soft} stroke={color} strokeWidth={1.4} opacity={0.9} />}
+        <circle r={R} fill="#0c1017" stroke={color} strokeWidth={emph ? 2.6 : 2} filter={emph ? "url(#ng)" : undefined} />
+        <circle r={R - 3} fill={n.type === "domain" ? "#16203a" : meta.soft} />
+        <foreignObject x={-R} y={-R} width={R * 2} height={R * 2}>
+          <div className="flex h-full w-full items-center justify-center" style={{ color }}>
+            <NodeGlyph type={n.type} className={n.type === "domain" ? "h-5 w-5" : n.type === "asset" ? "h-[17px] w-[17px]" : "h-3.5 w-3.5"} />
+          </div>
+        </foreignObject>
+        {showLabel && (
+          <text textAnchor="middle" y={R + 14} style={{ font: `${n.type === "finding" ? "500 9.5px" : "600 11px"} 'IBM Plex Mono', monospace` }}
+            fill={dim ? "#4a5a6e" : n.type === "finding" ? meta.css : "#c2cbd8"}>
+            {truncate(n.type === "domain" ? n.domainName ?? n.label : n.label, n.type === "finding" ? 20 : 26)}
+          </text>
+        )}
+      </g>
+    </g>
+  );
+}
+
+function truncate(s: string, n: number) { return s.length > n ? s.slice(0, n - 1) + "…" : s; }