graph-dependency-analyzer 0.2.0__py3-none-any.whl

src/presentation/api/rest/routers/relationships.py

@@ -0,0 +1,1089 @@
+"""
+Repository Relationships Router
+
+GET  /api/analysis/repository-relationships
+     Discover and return all relationships between indexed repositories.
+     Uses 4-pass strategy: explicit → path-matching → semantic names → shared artifacts.
+
+GET  /api/analysis/repository-relationships/graph.html
+     Two-level interactive graph:
+       Level 1 (overview) — one node per repository, edges show cross-repo relationships
+       Level 2 (drill-down) — double-click a repo node to expand its internal graph
+                              (classes, components, endpoints, APIs) with cross-repo edges highlighted
+"""
+import json
+from typing import Any
+
+from fastapi import APIRouter, Depends, HTTPException, Query, status
+from fastapi.responses import HTMLResponse, JSONResponse
+import structlog
+
+from dependency_injector.wiring import Provide, inject
+
+from src.config.container import Container
+from src.infrastructure.persistence.repository_relationship_repository import (
+    RepositoryRelationshipRepository,
+)
+
+logger = structlog.get_logger(__name__)
+
+router = APIRouter(prefix="/api/analysis", tags=["relationships"])
+
+_CONF_COLOURS = {
+    "HIGH":   "#27AE60",
+    "MEDIUM": "#F39C12",
+    "LOW":    "#E74C3C",
+}
+
+_RELATION_LABELS = {
+    "CALLS_BACKEND":  "calls HTTP",
+    "CALLS_API":      "calls API",
+    "USES_LIBRARY":   "shared lib",
+    "DEPENDS_ON":     "depends on",
+    "POSSIBLE_MATCH": "possible link",
+    "SHARED_DB":      "shared DB",
+    "SHARED_EVENT":   "shared event",
+    "USES_SERVICE":   "uses service",
+    "USES_DB_SCHEMA": "uses DB schema",
+}
+
+
+# ---------------------------------------------------------------------------
+# JSON endpoint
+# ---------------------------------------------------------------------------
+
+@router.get(
+    "/repository-relationships",
+    status_code=status.HTTP_200_OK,
+    summary="Discover relationships between all indexed repositories",
+    description=(
+        "4-pass discovery:\n"
+        "1. Explicit (HIGH) — CALLS_BACKEND, USES_LIBRARY, DEPENDS_ON\n"
+        "2. Path matching (MEDIUM) — unmatched API calls fuzzy-matched to endpoints\n"
+        "3. Semantic names (LOW/MEDIUM) — shared domain concepts across class names\n"
+        "4. Shared artifacts (MEDIUM) — same DB table or event name\n\n"
+        "Every relationship includes `confidence`, `evidence`, and `details`."
+    ),
+)
+@inject
+async def get_repository_relationships(
+    confidence: str | None = Query(
+        default=None,
+        description="Filter by minimum confidence: HIGH | MEDIUM | LOW",
+        pattern="^(HIGH|MEDIUM|LOW)$",
+    ),
+    relation_type: str | None = Query(
+        default=None,
+        description="Filter by relation type, e.g. CALLS_BACKEND",
+    ),
+    repo: str | None = Query(
+        default=None,
+        description="Only show relationships involving this repository",
+    ),
+    relationship_repo: RepositoryRelationshipRepository = Depends(
+        Provide[Container.relationship_repository]
+    ),
+) -> JSONResponse:
+    logger.info("repository_relationships_requested", confidence=confidence, relation_type=relation_type, repo=repo)
+    try:
+        graph = await relationship_repo.discover_all()
+        rels = graph.relationships
+
+        if confidence:
+            order = {"HIGH": 0, "MEDIUM": 1, "LOW": 2}
+            max_order = order[confidence]
+            rels = [r for r in rels if order.get(r["confidence"], 99) <= max_order]
+        if relation_type:
+            rels = [r for r in rels if r["type"] == relation_type]
+        if repo:
+            rels = [r for r in rels if r["from"] == repo or r["to"] == repo]
+
+        return JSONResponse(content={
+            "repositories": graph.repositories,
+            "relationships": rels,
+            "meta": {
+                **graph.meta,
+                "filtered_count": len(rels),
+                "filters_applied": {"confidence": confidence, "relation_type": relation_type, "repo": repo},
+            },
+        })
+    except Exception as e:
+        logger.error("repository_relationships_failed", error=str(e))
+        raise HTTPException(status_code=500, detail=f"Repository relationship discovery failed: {e}")
+
+
+# ---------------------------------------------------------------------------
+# Two-level interactive HTML graph
+# ---------------------------------------------------------------------------
+
+@router.get(
+    "/repository-relationships/graph.html",
+    status_code=status.HTTP_200_OK,
+    response_class=HTMLResponse,
+    summary="Two-level interactive repository relationship graph",
+    description=(
+        "Level 1 — overview: one node per repository, edges = cross-repo relationships. "
+        "Level 2 — drill-down: double-click a repository node to expand its internal "
+        "dependency graph (classes, components, endpoints, APIs). "
+        "Cross-repo edges are highlighted in the drill-down view. "
+        "Press Esc or the Back button to return to Level 1."
+    ),
+)
+@inject
+async def get_repository_relationships_html(
+    confidence: str | None = Query(
+        default=None,
+        description="Filter by minimum confidence: HIGH | MEDIUM | LOW",
+        pattern="^(HIGH|MEDIUM|LOW)$",
+    ),
+    relationship_repo: RepositoryRelationshipRepository = Depends(
+        Provide[Container.relationship_repository]
+    ),
+) -> HTMLResponse:
+    try:
+        graph = await relationship_repo.discover_all()
+        rels = graph.relationships
+        if confidence:
+            order = {"HIGH": 0, "MEDIUM": 1, "LOW": 2}
+            max_order = order[confidence]
+            rels = [r for r in rels if order.get(r["confidence"], 99) <= max_order]
+
+        html = _build_two_level_html(graph.repositories, rels, graph.meta, graph.external_services)
+        return HTMLResponse(content=html)
+    except Exception as e:
+        logger.error("repository_relationships_html_failed", error=str(e))
+        raise HTTPException(status_code=500, detail=f"Repository graph HTML failed: {e}")
+
+
+# ---------------------------------------------------------------------------
+# HTML builder — two-level graph
+# ---------------------------------------------------------------------------
+
+def _build_two_level_html(
+    repos: list[str],
+    relationships: list[dict[str, Any]],
+    meta: dict[str, Any],
+    external_services: list[dict[str, Any]] | None = None,
+) -> str:
+    # Colours per external service category
+    _EXT_CATEGORY_COLOURS = {
+        "ai":          {"bg": "#7B2FBE", "border": "#9B59B6"},  # purple
+        "azure":       {"bg": "#0078D4", "border": "#106EBE"},  # azure blue
+        "database":    {"bg": "#C0392B", "border": "#E74C3C"},  # red
+        "messaging":   {"bg": "#16A085", "border": "#1ABC9C"},  # teal
+        "analytics":   {"bg": "#D35400", "border": "#E67E22"},  # orange
+        "observability":{"bg": "#2C3E50","border": "#34495E"},  # dark
+        "auth":        {"bg": "#27AE60", "border": "#2ECC71"},  # green
+        "cloud":       {"bg": "#2980B9", "border": "#3498DB"},  # light blue
+        "saas":        {"bg": "#8E44AD", "border": "#9B59B6"},  # violet
+        "external":    {"bg": "#7F8C8D", "border": "#95A5A6"},  # grey
+    }
+
+    out_degree: dict[str, int] = {}
+    in_degree:  dict[str, int] = {}
+    for rel in relationships:
+        out_degree[rel["from"]] = out_degree.get(rel["from"], 0) + 1
+        in_degree[rel["to"]]    = in_degree.get(rel["to"], 0) + 1
+
+    # Level-1 nodes — repositories
+    l1_nodes = []
+    for repo in repos:
+        out_d = out_degree.get(repo, 0)
+        in_d  = in_degree.get(repo, 0)
+        size  = max(18, min(55, 18 + (out_d + in_d) * 4))
+        l1_nodes.append({
+            "id":       repo,
+            "label":    repo,
+            "title": (
+                f"<b>{repo}</b><br/>"
+                f"outgoing: {out_d} &nbsp;·&nbsp; incoming: {in_d}<br/>"
+                f"<i>Double-click to drill down</i>"
+            ),
+            "size":     size,
+            "color": {
+                "background": "#4A90D9",
+                "border":     "#2C3E50",
+                "highlight":  {"background": "#e94560", "border": "#fff"},
+                "hover":      {"background": "#74B3E8", "border": "#fff"},
+            },
+            "font":     {"color": "#eee", "size": 14, "bold": True},
+            "shape":    "dot",
+            "_node_type": "REPOSITORY",
+        })
+
+    # Level-1 external service nodes
+    ext_svcs = external_services or []
+    seen_ext_ids: set[str] = set()
+    for svc in ext_svcs:
+        svc_id = svc["id"]
+        if svc_id in seen_ext_ids:
+            continue
+        seen_ext_ids.add(svc_id)
+        cat    = svc.get("category", "external")
+        colours = _EXT_CATEGORY_COLOURS.get(cat, _EXT_CATEGORY_COLOURS["external"])
+        # Count how many repos use this service
+        usage_count = sum(
+            1 for r in relationships
+            if r.get("to") == svc_id and r.get("type") == "USES_SERVICE"
+        )
+        l1_nodes.append({
+            "id":    svc_id,
+            "label": svc["label"],
+            "title": (
+                f"<b>{svc['label']}</b><br/>"
+                f"category: {cat}<br/>"
+                f"used by {usage_count} repo(s)"
+            ),
+            "size":  max(14, min(40, 14 + usage_count * 5)),
+            "color": {
+                "background": colours["bg"],
+                "border":     colours["border"],
+                "highlight":  {"background": "#e94560", "border": "#fff"},
+                "hover":      {"background": "#fff",    "border": colours["border"]},
+            },
+            "font":  {"color": "#eee", "size": 11},
+            "shape": "diamond",
+            "_node_type":  "EXTERNAL_SERVICE",
+            "_category":   cat,
+        })
+
+    # Level-1 edges — cross-repo + repo→service relationships
+    l1_edges = []
+    for i, rel in enumerate(relationships):
+        is_service = rel.get("type") == "USES_SERVICE"
+        colour = _CONF_COLOURS.get(rel["confidence"], "#888")
+        if is_service:
+            # Use category colour of the service node
+            svc_id  = rel.get("to", "")
+            svc_obj = next((s for s in ext_svcs if s["id"] == svc_id), None)
+            cat     = svc_obj.get("category", "external") if svc_obj else "external"
+            colour  = _EXT_CATEGORY_COLOURS.get(cat, _EXT_CATEGORY_COLOURS["external"])["bg"]
+        label  = _RELATION_LABELS.get(rel["type"], rel["type"])
+        evidence_html = "<br/>".join(rel.get("evidence", [])[:4])
+        l1_edges.append({
+            "id":    i,
+            "from":  rel["from"],
+            "to":    rel["to"],
+            "label": label,
+            "title": (
+                f"<b>{label}</b> &nbsp;<span style='color:{colour}'>[{rel['confidence']}]</span>"
+                f"<br/>{evidence_html}"
+            ),
+            "color":  {"color": colour, "highlight": "#e94560", "hover": "#fff"},
+            "font":   {"color": colour, "size": 10, "align": "middle"},
+            "arrows": "to",
+            "width":  2 if rel["confidence"] == "HIGH" else 1,
+            "dashes": rel["confidence"] == "LOW",
+            "_confidence": rel["confidence"],
+            "_type":       rel["type"],
+            "_evidence":   rel.get("evidence", []),
+            "_details":    rel.get("details", [])[:5],
+        })
+
+    total_repos = meta.get("total_repos", len(repos))
+    explicit    = meta.get("explicit", 0)
+    inferred    = meta.get("path_inferred", 0) + meta.get("semantic_inferred", 0)
+    shared      = meta.get("shared_artifact", 0)
+    ext_count   = len(seen_ext_ids)
+
+    l1_nodes_json     = json.dumps(l1_nodes)
+    l1_edges_json     = json.dumps(l1_edges)
+    conf_colours_json = json.dumps(_CONF_COLOURS)
+
+    return f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Repository Dependency Explorer</title>
+  <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+  <style>
+    *, *::before, *::after {{ box-sizing: border-box; margin: 0; padding: 0; }}
+    body {{
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #0d1117; color: #c9d1d9;
+      height: 100vh; display: flex; flex-direction: column; overflow: hidden;
+    }}
+
+    /* ── header ── */
+    #header {{
+      background: #161b22; padding: 10px 20px;
+      display: flex; align-items: center; gap: 12px;
+      border-bottom: 1px solid #30363d; flex-shrink: 0; min-height: 48px;
+    }}
+    #header h1 {{ font-size: 15px; font-weight: 700; color: #58a6ff; white-space: nowrap; }}
+    #breadcrumb {{
+      display: flex; align-items: center; gap: 6px;
+      font-size: 13px; color: #8b949e; flex: 1;
+    }}
+    #breadcrumb .crumb {{ color: #58a6ff; cursor: pointer; }}
+    #breadcrumb .crumb:hover {{ text-decoration: underline; }}
+    #breadcrumb .sep {{ color: #30363d; }}
+    #back-btn {{
+      display: none; background: #21262d; color: #c9d1d9;
+      border: 1px solid #30363d; padding: 5px 14px; border-radius: 6px;
+      cursor: pointer; font-size: 13px; transition: background .15s;
+    }}
+    #back-btn:hover {{ background: #30363d; }}
+    #header .meta {{ font-size: 11px; color: #8b949e; margin-left: auto; white-space: nowrap; }}
+
+    /* ── toolbar ── */
+    #toolbar {{
+      background: #161b22; padding: 7px 20px;
+      display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
+      border-bottom: 1px solid #30363d; flex-shrink: 0;
+    }}
+    #toolbar input {{
+      background: #0d1117; border: 1px solid #30363d; color: #c9d1d9;
+      padding: 5px 10px; border-radius: 6px; font-size: 13px; width: 190px;
+    }}
+    #toolbar input:focus {{ outline: none; border-color: #58a6ff; }}
+    #toolbar button {{
+      background: #21262d; color: #c9d1d9; border: 1px solid #30363d;
+      padding: 5px 13px; border-radius: 6px; cursor: pointer; font-size: 13px;
+    }}
+    #toolbar button:hover {{ background: #30363d; }}
+    #toolbar button.primary {{
+      background: #1f6feb; border-color: #1f6feb; color: #fff;
+    }}
+    #toolbar button.primary:hover {{ background: #388bfd; }}
+    #toolbar select {{
+      background: #0d1117; border: 1px solid #30363d; color: #c9d1d9;
+      padding: 5px 8px; border-radius: 6px; font-size: 13px;
+    }}
+    #level-badge {{
+      font-size: 11px; padding: 2px 8px; border-radius: 10px;
+      font-weight: 600; letter-spacing: .5px;
+    }}
+    .badge-l1 {{ background: #1f6feb; color: #fff; }}
+    .badge-l2 {{ background: #3d2b00; color: #e3b341; border: 1px solid #9e6a03; }}
+    #legend {{
+      display: flex; gap: 12px; align-items: center; margin-left: auto;
+    }}
+    .leg {{ display: flex; align-items: center; gap: 5px; font-size: 11px; color: #8b949e; }}
+    .leg-dot {{ width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }}
+
+    /* ── main ── */
+    #main {{ display: flex; flex: 1; overflow: hidden; }}
+    #canvas {{ flex: 1; position: relative; }}
+    #network {{ width: 100%; height: 100%; }}
+
+    /* drill-down hint overlay */
+    #hint {{
+      position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
+      background: rgba(22,27,34,.85); border: 1px solid #30363d;
+      padding: 6px 14px; border-radius: 20px; font-size: 12px; color: #8b949e;
+      pointer-events: none; transition: opacity .3s;
+    }}
+
+    /* ── sidebar ── */
+    #sidebar {{
+      width: 310px; background: #161b22; border-left: 1px solid #30363d;
+      display: flex; flex-direction: column; flex-shrink: 0;
+    }}
+    #sidebar-header {{
+      padding: 12px 16px 8px; border-bottom: 1px solid #30363d; flex-shrink: 0;
+    }}
+    #sidebar-header h2 {{ font-size: 13px; font-weight: 600; color: #58a6ff; }}
+    #sidebar-body {{ flex: 1; overflow-y: auto; padding: 12px; }}
+    .card {{
+      background: #0d1117; border: 1px solid #30363d; border-radius: 8px;
+      padding: 10px 12px; margin-bottom: 10px; font-size: 12px;
+    }}
+    .card-title {{ font-weight: 600; color: #c9d1d9; margin-bottom: 6px; font-size: 13px; }}
+    .card-row {{ display: flex; justify-content: space-between; margin-bottom: 3px; }}
+    .card-label {{ color: #8b949e; }}
+    .card-val {{ color: #c9d1d9; text-align: right; max-width: 170px; word-break: break-all; }}
+    .badge {{
+      display: inline-block; font-size: 10px; font-weight: 700;
+      padding: 1px 6px; border-radius: 4px; letter-spacing: .4px;
+    }}
+    .badge-HIGH   {{ background: #1a4731; color: #3fb950; border: 1px solid #238636; }}
+    .badge-MEDIUM {{ background: #3d2b00; color: #e3b341; border: 1px solid #9e6a03; }}
+    .badge-LOW    {{ background: #3d0f0f; color: #f85149; border: 1px solid #da3633; }}
+    .badge-code   {{ background: #1f3d6e; color: #58a6ff; border: 1px solid #1f6feb; }}
+    .badge-mod    {{ background: #1a4731; color: #3fb950; border: 1px solid #238636; }}
+    .badge-api    {{ background: #3d2b00; color: #e3b341; border: 1px solid #9e6a03; }}
+    .ev-list {{ margin-top: 6px; }}
+    .ev-item {{ color: #8b949e; padding: 2px 0; border-top: 1px solid #21262d; font-size: 11px; }}
+    .empty {{ color: #484f58; font-style: italic; font-size: 12px; }}
+    .drill-hint {{
+      background: #1f2937; border: 1px solid #1f6feb;
+      border-radius: 6px; padding: 8px 10px; margin-bottom: 10px;
+      font-size: 11px; color: #58a6ff;
+    }}
+
+    /* ── status bar ── */
+    #statusbar {{
+      padding: 4px 20px; background: #161b22; border-top: 1px solid #30363d;
+      font-size: 11px; color: #484f58; flex-shrink: 0;
+    }}
+  </style>
+</head>
+<body>
+
+<div id="header">
+  <h1>&#9741; Dependency Explorer</h1>
+  <div id="breadcrumb">
+    <span class="crumb" onclick="goLevel1()">All Repositories</span>
+    <span class="sep" id="bc-sep" style="display:none">›</span>
+    <span id="bc-repo" style="display:none; color:#e3b341"></span>
+  </div>
+  <button id="back-btn" onclick="goLevel1()">&#8592; Back to overview</button>
+  <span class="meta" id="header-meta">
+    {total_repos} repos &nbsp;·&nbsp;
+    {ext_count} external services &nbsp;·&nbsp;
+    {len(relationships)} relationships &nbsp;·&nbsp;
+    {explicit} explicit &nbsp;·&nbsp;
+    {inferred} inferred
+  </span>
+</div>
+
+<div id="toolbar">
+  <span id="level-badge" class="level-badge badge-l1">LEVEL 1 — Overview</span>
+  <input id="search" type="text" placeholder="Search…"/>
+  <button class="primary" onclick="doSearch()">Find</button>
+  <button onclick="resetView()">Reset view</button>
+  <select id="confFilter" onchange="applyFilter()">
+    <option value="">All confidence</option>
+    <option value="HIGH">HIGH only</option>
+    <option value="MEDIUM">HIGH + MEDIUM</option>
+  </select>
+  <select id="typeFilter" onchange="applyFilter()">
+    <option value="">All types</option>
+    <option value="calls HTTP">calls HTTP</option>
+    <option value="calls API">calls API</option>
+    <option value="shared lib">shared lib</option>
+    <option value="depends on">depends on</option>
+    <option value="possible link">possible link</option>
+    <option value="shared DB">shared DB</option>
+    <option value="shared event">shared event</option>
+    <option value="uses service">uses service</option>
+    <option value="uses DB schema">uses DB schema</option>
+  </select>
+  <div id="legend">
+    <div class="leg"><div class="leg-dot" style="background:#27AE60"></div>HIGH</div>
+    <div class="leg"><div class="leg-dot" style="background:#F39C12"></div>MEDIUM</div>
+    <div class="leg"><div class="leg-dot" style="background:#E74C3C"></div>LOW</div>
+    <div class="leg"><div class="leg-dot" style="background:#4A90D9"></div>Repository</div>
+    <div class="leg"><div class="leg-dot" style="background:#74B3E8"></div>Class/Component</div>
+    <div class="leg"><div class="leg-dot" style="background:#E8A838"></div>API/Endpoint</div>
+  </div>
+</div>
+
+<div id="main">
+  <div id="canvas">
+    <div id="network"></div>
+    <div id="hint">Double-click a repository to drill down ↓</div>
+  </div>
+  <div id="sidebar">
+    <div id="sidebar-header"><h2 id="sidebar-title">Details</h2></div>
+    <div id="sidebar-body">
+      <p class="empty">Click a node or edge to inspect it.</p>
+    </div>
+  </div>
+</div>
+
+<div id="statusbar" id="statusBar">Loading…</div>
+
+<script>
+// ── Data from server ──────────────────────────────────────────────────────
+const L1_NODES = {l1_nodes_json};
+const L1_EDGES = {l1_edges_json};
+const CONF_COLOURS = {conf_colours_json};
+
+const CONF_ORDER = {{HIGH:0, MEDIUM:1, LOW:2}};
+
+// ── State ─────────────────────────────────────────────────────────────────
+let network = null;
+let visNodes = null;
+let visEdges = null;
+let currentLevel = 1;
+let currentRepo  = null;
+
+// ── Level-1 helpers ───────────────────────────────────────────────────────
+function l1FilteredData() {{
+  const confF = document.getElementById('confFilter').value;
+  const typeF = document.getElementById('typeFilter').value;
+  const maxOrder = confF === 'HIGH' ? 0 : confF === 'MEDIUM' ? 1 : 99;
+
+  const edges = L1_EDGES.filter(e => {{
+    if ((CONF_ORDER[e._confidence] ?? 2) > maxOrder) return false;
+    if (typeF && e.label !== typeF) return false;
+    return true;
+  }});
+
+  const nodeIds = new Set();
+  edges.forEach(e => {{ nodeIds.add(e.from); nodeIds.add(e.to); }});
+  // always show isolated repos too
+  L1_NODES.forEach(n => nodeIds.add(n.id));
+  const nodes = L1_NODES.filter(n => nodeIds.has(n.id));
+  return {{nodes, edges}};
+}}
+
+// ── Init Level-1 ─────────────────────────────────────────────────────────
+function initLevel1() {{
+  currentLevel = 1;
+  currentRepo  = null;
+
+  document.getElementById('level-badge').textContent = 'LEVEL 1 — Overview';
+  document.getElementById('level-badge').className   = 'level-badge badge-l1';
+  document.getElementById('back-btn').style.display  = 'none';
+  document.getElementById('bc-sep').style.display    = 'none';
+  document.getElementById('bc-repo').style.display   = 'none';
+  document.getElementById('hint').style.opacity      = '1';
+  document.getElementById('confFilter').style.display = '';
+  document.getElementById('typeFilter').style.display = '';
+
+  const {{nodes, edges}} = l1FilteredData();
+  visNodes = new vis.DataSet(nodes);
+  visEdges = new vis.DataSet(edges);
+
+  if (network) network.destroy();
+  network = new vis.Network(
+    document.getElementById('network'),
+    {{nodes: visNodes, edges: visEdges}},
+    {{
+      physics: {{
+        enabled: true,
+        solver: 'forceAtlas2Based',
+        forceAtlas2Based: {{
+          gravitationalConstant: -120,
+          centralGravity: 0.005,
+          springLength: 200,
+          springConstant: 0.04,
+          damping: 0.9,
+        }},
+        stabilization: {{iterations: 400, updateInterval: 25}},
+      }},
+      interaction: {{
+        hover: true, tooltipDelay: 80,
+        navigationButtons: true, keyboard: true,
+        multiselect: false,
+      }},
+      layout: {{improvedLayout: true}},
+    }}
+  );
+
+  network.on('click',       params => onL1Click(params));
+  network.on('doubleClick', params => onL1DoubleClick(params));
+  network.on('stabilizationIterationsDone', () => {{
+    network.setOptions({{physics: false}});
+    setStatus(nodes.length + ' repositories · ' + edges.length + ' relationships · stabilized');
+  }});
+  setStatus(nodes.length + ' repositories · ' + edges.length + ' relationships · stabilizing…');
+  setSidebar('Details', '<p class="empty">Click a node or edge to inspect it.</p>');
+}}
+
+function onL1Click(params) {{
+  if (params.nodes.length > 0) {{
+    const node = visNodes.get(params.nodes[0]);
+    if (node && node._node_type === 'EXTERNAL_SERVICE') showExtServiceCard(node);
+    else showRepoCard(params.nodes[0]);
+  }} else if (params.edges.length > 0) showEdgeCard(params.edges[0]);
+  else setSidebar('Details', '<p class="empty">Click a node or edge.</p>');
+}}
+
+function onL1DoubleClick(params) {{
+  if (params.nodes.length === 0) return;
+  const node = visNodes.get(params.nodes[0]);
+  // External service nodes don't have an internal graph — skip drill-down
+  if (node && node._node_type === 'EXTERNAL_SERVICE') return;
+  drillDown(params.nodes[0]);
+}}
+
+function showRepoCard(repoId) {{
+  const edges = L1_EDGES.filter(e => e.from === repoId || e.to === repoId);
+  const outEdges = edges.filter(e => e.from === repoId);
+  const inEdges  = edges.filter(e => e.to   === repoId);
+
+  let html = `
+    <div class="card">
+      <div class="card-title">&#128230; ${{repoId}}</div>
+      <div class="card-row"><span class="card-label">Outgoing calls</span><span class="card-val">${{outEdges.length}}</span></div>
+      <div class="card-row"><span class="card-label">Incoming calls</span><span class="card-val">${{inEdges.length}}</span></div>
+    </div>
+    <div class="drill-hint">&#8592; Double-click this node to explore its internal dependency graph</div>
+  `;
+
+  if (outEdges.length) {{
+    html += '<div class="card"><div class="card-title">Calls →</div>';
+    outEdges.slice(0,10).forEach(e => {{
+      html += `<div class="card-row">
+        <span class="card-label">${{e.to}}</span>
+        <span class="card-val"><span class="badge badge-${{e._confidence}}">${{e._confidence}}</span></span>
+      </div>
+      <div style="font-size:11px;color:#8b949e;margin-bottom:5px">${{e._evidence.slice(0,2).join('<br/>')}}</div>`;
+    }});
+    html += '</div>';
+  }}
+  if (inEdges.length) {{
+    html += '<div class="card"><div class="card-title">← Called by</div>';
+    inEdges.slice(0,10).forEach(e => {{
+      html += `<div class="card-row">
+        <span class="card-label">${{e.from}}</span>
+        <span class="card-val"><span class="badge badge-${{e._confidence}}">${{e._confidence}}</span></span>
+      </div>`;
+    }});
+    html += '</div>';
+  }}
+  setSidebar(repoId, html);
+}}
+
+function showEdgeCard(edgeId) {{
+  const edge = visEdges.get(edgeId);
+  if (!edge) return;
+  let html = `
+    <div class="card">
+      <div class="card-title">${{edge.from}} → ${{edge.to}}</div>
+      <div class="card-row"><span class="card-label">Type</span><span class="card-val">${{edge.label}}</span></div>
+      <div class="card-row"><span class="card-label">Confidence</span>
+        <span class="card-val"><span class="badge badge-${{edge._confidence}}">${{edge._confidence}}</span></span>
+      </div>
+    </div>`;
+  if (edge._evidence && edge._evidence.length) {{
+    html += '<div class="card"><div class="card-title">Evidence</div><div class="ev-list">';
+    edge._evidence.forEach(ev => {{ html += `<div class="ev-item">${{ev}}</div>`; }});
+    html += '</div></div>';
+  }}
+  if (edge._details && edge._details.length) {{
+    html += '<div class="card"><div class="card-title">Details</div>';
+    edge._details.slice(0,5).forEach(d => {{
+      const kv = Object.entries(d).slice(0,4);
+      kv.forEach(([k,v]) => {{
+        html += `<div class="card-row"><span class="card-label">${{k}}</span><span class="card-val">${{v}}</span></div>`;
+      }});
+    }});
+    html += '</div>';
+  }}
+  setSidebar(`${{edge.from}} → ${{edge.to}}`, html);
+}}
+
+function showExtServiceCard(node) {{
+  const svcId = node.id;
+  const cat   = node._category || 'external';
+  // Find all repos that use this service
+  const callers = L1_EDGES.filter(e => e.to === svcId && e._type === 'USES_SERVICE');
+  const catIcons = {{
+    ai: '🤖', azure: '☁️', database: '🗄️', messaging: '📨',
+    analytics: '📊', observability: '📡', auth: '🔐', cloud: '☁️', saas: '🔌',
+  }};
+  const icon = catIcons[cat] || '🔌';
+  let html = `<div class="card">
+    <div class="card-title">${{icon}} ${{node.label}}</div>
+    <div class="card-row"><span class="card-label">Category</span>
+      <span class="card-val"><span class="badge badge-code">${{cat}}</span></span></div>
+    <div class="card-row"><span class="card-label">Used by</span>
+      <span class="card-val">${{callers.length}} repo(s)</span></div>
+  </div>`;
+  if (callers.length) {{
+    html += '<div class="card"><div class="card-title">Consumers</div>';
+    callers.forEach(e => {{
+      html += `<div class="card-row">
+        <span class="card-label">${{e.from}}</span>
+        <span class="card-val"><span class="badge badge-${{e._confidence}}">${{e._confidence}}</span></span>
+      </div>
+      <div style="font-size:11px;color:#8b949e;margin-bottom:5px">
+        ${{(e._evidence||[]).slice(0,2).join('<br/>')}}
+      </div>`;
+    }});
+    html += '</div>';
+  }}
+  setSidebar(node.label, html);
+}}
+
+// ── Level-2 drill-down ────────────────────────────────────────────────────
+async function drillDown(repoId) {{
+  currentLevel = 2;
+  currentRepo  = repoId;
+
+  document.getElementById('level-badge').textContent = 'LEVEL 2 — ' + repoId;
+  document.getElementById('level-badge').className   = 'level-badge badge-l2';
+  document.getElementById('back-btn').style.display  = '';
+  document.getElementById('bc-sep').style.display    = '';
+  document.getElementById('bc-repo').style.display   = '';
+  document.getElementById('bc-repo').textContent     = repoId;
+  document.getElementById('hint').style.opacity      = '0';
+  document.getElementById('confFilter').style.display = 'none';
+  document.getElementById('typeFilter').style.display = 'none';
+
+  setStatus('Loading internal graph for ' + repoId + '…');
+  setSidebar(repoId, '<p class="empty">Loading…</p>');
+
+  let graphData = null;
+  try {{
+    const resp = await fetch('/api/export/graph.json?repository=' + encodeURIComponent(repoId) + '&group=true&max_nodes=200');
+    if (resp.ok) graphData = await resp.json();
+  }} catch(err) {{
+    console.warn('graph.json fetch failed', err);
+  }}
+
+  if (!graphData || !graphData.nodes || graphData.nodes.length === 0) {{
+    setSidebar(repoId, `<p class="empty">No internal graph data found for "${{repoId}}".<br/>Index this repository first.</p>`);
+    setStatus('No data for ' + repoId);
+    initLevel2Empty(repoId);
+    return;
+  }}
+
+  // Sanitise node IDs — vis.js chokes on '.', '../', './' and other
+  // relative path fragments used as TypeScript import paths.
+  // We replace them with safe equivalents and patch edges to match.
+  const idMap = {{}};   // original → safe
+  graphData.nodes.forEach(n => {{
+    const orig = n.id;
+    // Replace ./ ../ and leading dots; collapse spaces
+    const safe = String(orig)
+      .replace(/^\.\.\//g, '__parent__/')
+      .replace(/^\.\//g, '__rel__/')
+      .replace(/^\.$/, '__dot__')
+      .replace(/^\.\.$/, '__dotdot__')
+      .replace(/[^a-zA-Z0-9_\-\/.:@]/g, '_');
+    idMap[orig] = safe;
+    n.id = safe;
+  }});
+  graphData.edges.forEach(e => {{
+    e.source = idMap[e.source] || e.source;
+    e.target = idMap[e.target] || e.target;
+  }});
+
+  initLevel2(repoId, graphData);
+}}
+
+// Colour by neo4j label (more specific than generic type)
+const LABEL_COLOURS = {{
+  CLASS:          '#4A90D9',
+  METHOD:         '#74B3E8',
+  REPOSITORY:     '#2C6FA8',
+  LIBRARY:        '#52BE80',
+  NPM_PACKAGE:    '#27AE60',
+  API:            '#E8A838',
+  ENDPOINT:       '#F39C12',
+  DATABASE:       '#E67E22',
+  Component:      '#5DADE2',
+  Microfrontend:  '#A569BD',
+  WORKSPACE:      '#BDC3C7',
+  PROJECT:        '#85929E',
+  // DB schema objects
+  DB_TABLE:       '#C0392B',
+  DB_VIEW:        '#E74C3C',
+  DB_PROCEDURE:   '#D35400',
+  DB_PACKAGE:     '#E67E22',
+  DB_TRIGGER:     '#A93226',
+  DB_SEQUENCE:    '#CB4335',
+  DB_FUNCTION:    '#BA4A00',
+  DB_COLLECTION:  '#8E44AD',
+}};
+const TYPE_COLOURS = {{
+  code:     '#4A90D9',
+  module:   '#52BE80',
+  concept:  '#E8A838',
+  document: '#9B59B6',
+}};
+const NODE_SHAPES = {{
+  CLASS: 'dot', METHOD: 'dot', Component: 'dot',
+  LIBRARY: 'square', NPM_PACKAGE: 'square',
+  API: 'diamond', ENDPOINT: 'diamond', DATABASE: 'diamond',
+  REPOSITORY: 'star', Microfrontend: 'hexagon',
+  DB_TABLE: 'database', DB_VIEW: 'diamond', DB_PROCEDURE: 'triangle',
+  DB_PACKAGE: 'triangle', DB_TRIGGER: 'triangleDown',
+  DB_COLLECTION: 'database',
+}};
+
+function nodeColour(n) {{
+  const lbl = (n.metadata || {{}}).neo4j_label || '';
+  return LABEL_COLOURS[lbl] || TYPE_COLOURS[n.type] || '#4A90D9';
+}}
+function nodeShape(n) {{
+  const lbl = (n.metadata || {{}}).neo4j_label || '';
+  return NODE_SHAPES[lbl] || (n.type === 'module' ? 'square' : n.type === 'concept' ? 'diamond' : 'dot');
+}}
+function nodeSize(n) {{
+  const lbl = (n.metadata || {{}}).neo4j_label || '';
+  if (lbl === 'REPOSITORY') return 20;
+  if (lbl === 'CLASS' || lbl === 'Component') return 12;
+  if (lbl === 'METHOD') return 8;
+  if (lbl === 'LIBRARY' || lbl === 'NPM_PACKAGE') return 11;
+  if (lbl === 'API' || lbl === 'ENDPOINT') return 10;
+  return 10;
+}}
+
+function initLevel2(repoId, graphData) {{
+  const visN = graphData.nodes.map(n => {{
+    const col = nodeColour(n);
+    return {{
+      id:    n.id,
+      label: n.label,
+      title: buildNodeTooltip(n),
+      color: {{
+        background: col,
+        border:     '#21262d',
+        highlight:  {{background: '#e94560', border: '#fff'}},
+        hover:      {{background: '#fff',    border: col}},
+      }},
+      size:  nodeSize(n),
+      shape: nodeShape(n),
+      font:  {{color: '#c9d1d9', size: 10}},
+      _raw:  n,
+    }};
+  }});
+
+  // Add "external repo" proxy nodes for cross-repo edges
+  const externalRepos = new Set();
+  L1_EDGES.forEach(e => {{
+    if (e.from === repoId && e.to !== repoId)   externalRepos.add(e.to);
+    if (e.to   === repoId && e.from !== repoId) externalRepos.add(e.from);
+  }});
+
+  externalRepos.forEach(extRepo => {{
+    visN.push({{
+      id:    '__ext__' + extRepo,
+      label: extRepo,
+      title: `<b>External repo: ${{extRepo}}</b><br/>Connected via cross-repo relationship`,
+      color: {{
+        background: '#3d2b00',
+        border:     '#9e6a03',
+        highlight:  {{background: '#e3b341', border: '#fff'}},
+      }},
+      size:  18,
+      shape: 'box',
+      font:  {{color: '#e3b341', size: 12, bold: true}},
+    }});
+  }});
+
+  // Internal edges
+  const visE = graphData.edges.map((e, i) => ({{
+    id:     'int_' + i,
+    from:   e.source,
+    to:     e.target,
+    label:  e.relation,
+    color:  {{color: '#30363d', highlight: '#58a6ff'}},
+    font:   {{color: '#484f58', size: 9}},
+    arrows: 'to',
+    width:  1,
+  }}));
+
+  // Cross-repo edges — connect from the REPOSITORY node (or first node) to the external proxy
+  const repoRootNode =
+    graphData.nodes.find(n => n.id === repoId) ||
+    graphData.nodes.find(n => (n.metadata || {{}}).neo4j_label === 'REPOSITORY') ||
+    (graphData.nodes.length > 0 ? graphData.nodes[0] : null);
+  const rootId = repoRootNode ? repoRootNode.id : null;
+
+  L1_EDGES.forEach((e, i) => {{
+    const extRepo = e.from === repoId ? e.to : (e.to === repoId ? e.from : null);
+    if (!extRepo || !rootId) return;
+    const colour = CONF_COLOURS[e._confidence] || '#888';
+    visE.push({{
+      id:     'cross_' + i,
+      from:   rootId,
+      to:     '__ext__' + extRepo,
+      label:  e.label,
+      title:  `<b>Cross-repo: ${{e.label}}</b> [${{e._confidence}}]<br/>${{(e._evidence||[]).slice(0,3).join('<br/>')}}`,
+      color:  {{color: colour, highlight: '#fff'}},
+      font:   {{color: colour, size: 10, bold: true}},
+      arrows: e.from === repoId ? 'to' : 'from',
+      width:  3,
+      dashes: e._confidence === 'LOW',
+    }});
+  }});
+
+  visNodes = new vis.DataSet(visN);
+  visEdges = new vis.DataSet(visE);
+
+  if (network) network.destroy();
+  network = new vis.Network(
+    document.getElementById('network'),
+    {{nodes: visNodes, edges: visEdges}},
+    {{
+      physics: {{
+        enabled: true,
+        solver: 'barnesHut',
+        barnesHut: {{
+          gravitationalConstant: -3000,
+          centralGravity: 0.3,
+          springLength: 80,
+          springConstant: 0.04,
+          damping: 0.09,
+        }},
+        stabilization: {{iterations: 300}},
+      }},
+      interaction: {{
+        hover: true, tooltipDelay: 80,
+        navigationButtons: true, keyboard: true,
+      }},
+    }}
+  );
+
+  network.on('click', params => onL2Click(params));
+  network.on('doubleClick', params => {{
+    // double-click on external proxy node → navigate to that repo
+    if (params.nodes.length > 0) {{
+      const id = params.nodes[0];
+      if (id.startsWith('__ext__')) drillDown(id.replace('__ext__', ''));
+    }}
+  }});
+  network.on('stabilizationIterationsDone', () => {{
+    network.setOptions({{physics: false}});
+    setStatus(visN.length + ' nodes · ' + visE.length + ' edges · stabilized');
+  }});
+
+  setStatus(visN.length + ' nodes · ' + visE.length + ' edges · stabilizing…');
+  showL2Summary(repoId, graphData, externalRepos);
+}}
+
+function initLevel2Empty(repoId) {{
+  if (network) network.destroy();
+  visNodes = new vis.DataSet([{{id: repoId, label: repoId, color: {{background:'#4A90D9'}}, size: 25, shape: 'dot'}}]);
+  visEdges = new vis.DataSet([]);
+  network = new vis.Network(document.getElementById('network'), {{nodes: visNodes, edges: visEdges}}, {{}});
+}}
+
+function onL2Click(params) {{
+  if (params.nodes.length > 0) {{
+    const id = params.nodes[0];
+    if (id.startsWith('__ext__')) {{
+      const extRepo = id.replace('__ext__','');
+      showExternalRepoCard(extRepo);
+    }} else {{
+      const node = visNodes.get(id);
+      showInternalNodeCard(node);
+    }}
+  }} else if (params.edges.length > 0) {{
+    const edge = visEdges.get(params.edges[0]);
+    showInternalEdgeCard(edge);
+  }} else {{
+    showL2Summary(currentRepo, null, null);
+  }}
+}}
+
+function buildNodeTooltip(n) {{
+  const m = n.metadata || {{}};
+  const lines = [`<b>${{n.label}}</b>`, `type: ${{n.type}}`];
+  if (m.neo4j_label) lines.push(`neo4j: ${{m.neo4j_label}}`);
+  if (m.repository)  lines.push(`repo: ${{m.repository}}`);
+  if (m.qualified_name) lines.push(`qname: ${{m.qualified_name}}`);
+  if (m.framework)   lines.push(`fw: ${{m.framework}}`);
+  if (n.file)        lines.push(`file: ${{n.file}}`);
+  return lines.join('<br/>');
+}}
+
+function showInternalNodeCard(node) {{
+  if (!node) return;
+  const r = node._raw || {{}};
+  const m = r.metadata || {{}};
+  let html = `<div class="card">
+    <div class="card-title">${{r.label || node.label}}</div>`;
+  const typeLabel = r.type || 'unknown';
+  const badgeClass = typeLabel === 'code' ? 'badge-code' : typeLabel === 'module' ? 'badge-mod' : 'badge-api';
+  html += `<div class="card-row"><span class="card-label">Type</span>
+    <span class="card-val"><span class="badge ${{badgeClass}}">${{typeLabel}}</span></span></div>`;
+  for (const [k,v] of Object.entries(m)) {{
+    if (v) html += `<div class="card-row"><span class="card-label">${{k}}</span><span class="card-val">${{v}}</span></div>`;
+  }}
+  if (r.file) html += `<div class="card-row"><span class="card-label">file</span><span class="card-val">${{r.file}}</span></div>`;
+  html += '</div>';
+  setSidebar(r.label || node.label, html);
+}}
+
+function showInternalEdgeCard(edge) {{
+  if (!edge) return;
+  setSidebar('Edge', `<div class="card">
+    <div class="card-title">${{edge.from || ''}} → ${{edge.to || ''}}</div>
+    <div class="card-row"><span class="card-label">Relation</span><span class="card-val">${{edge.label || ''}}</span></div>
+  </div>`);
+}}
+
+function showExternalRepoCard(extRepo) {{
+  const rels = L1_EDGES.filter(e => (e.from === currentRepo && e.to === extRepo) || (e.from === extRepo && e.to === currentRepo));
+  let html = `<div class="card">
+    <div class="card-title">&#128230; ${{extRepo}}</div>
+    <p style="font-size:11px;color:#8b949e;margin-top:4px">External repository connected to <b>${{currentRepo}}</b></p>
+  </div>
+  <div class="drill-hint">Double-click this node to explore ${{extRepo}}</div>`;
+  if (rels.length) {{
+    html += '<div class="card"><div class="card-title">Relationships</div>';
+    rels.forEach(e => {{
+      const dir = e.from === currentRepo ? `${{currentRepo}} → ${{extRepo}}` : `${{extRepo}} → ${{currentRepo}}`;
+      html += `<div class="card-row"><span class="card-label">${{dir}}</span>
+        <span class="card-val"><span class="badge badge-${{e._confidence}}">${{e._confidence}}</span></span></div>
+        <div style="font-size:11px;color:#8b949e;margin-bottom:5px">${{(e._evidence||[]).slice(0,2).join('<br/>')}}</div>`;
+    }});
+    html += '</div>';
+  }}
+  setSidebar(extRepo, html);
+}}
+
+function showL2Summary(repoId, graphData, externalRepos) {{
+  const nodeCount = graphData ? graphData.nodes.length : 0;
+  const edgeCount = graphData ? graphData.edges.length : 0;
+  const extList   = externalRepos ? [...externalRepos] : [];
+  const rels = L1_EDGES.filter(e => e.from === repoId || e.to === repoId);
+
+  let html = `<div class="card">
+    <div class="card-title">&#128230; ${{repoId}}</div>
+    <div class="card-row"><span class="card-label">Internal nodes</span><span class="card-val">${{nodeCount}}</span></div>
+    <div class="card-row"><span class="card-label">Internal edges</span><span class="card-val">${{edgeCount}}</span></div>
+    <div class="card-row"><span class="card-label">Cross-repo links</span><span class="card-val">${{rels.length}}</span></div>
+  </div>`;
+
+  if (extList.length) {{
+    html += '<div class="card"><div class="card-title">Connected repositories</div>';
+    extList.forEach(ext => {{
+      const r = rels.find(e => e.from === ext || e.to === ext);
+      html += `<div class="card-row">
+        <span class="card-label" style="cursor:pointer;color:#58a6ff" onclick="drillDown('${{ext}}')">${{ext}}</span>
+        ${{r ? `<span class="card-val"><span class="badge badge-${{r._confidence}}">${{r._confidence}}</span></span>` : ''}}
+      </div>`;
+    }});
+    html += '</div>';
+  }}
+  setSidebar(repoId, html);
+}}
+
+// ── Navigation ────────────────────────────────────────────────────────────
+function goLevel1() {{
+  initLevel1();
+}}
+
+// ── Shared utils ──────────────────────────────────────────────────────────
+function setSidebar(title, bodyHtml) {{
+  document.getElementById('sidebar-title').textContent = title;
+  document.getElementById('sidebar-body').innerHTML = bodyHtml;
+}}
+
+function setStatus(msg) {{
+  document.getElementById('statusbar').textContent = msg;
+}}
+
+function resetView() {{
+  if (network) network.fit({{animation: true}});
+}}
+
+function doSearch() {{
+  const term = document.getElementById('search').value.toLowerCase().trim();
+  if (!term || !visNodes) return;
+  const match = visNodes.get().find(n => (n.label||'').toLowerCase().includes(term));
+  if (match) {{
+    network.selectNodes([match.id]);
+    network.focus(match.id, {{scale: 1.8, animation: true}});
+    if (currentLevel === 1) showRepoCard(match.id);
+    else showInternalNodeCard(match);
+  }}
+}}
+
+function applyFilter() {{
+  if (currentLevel === 1) initLevel1();
+}}
+
+document.getElementById('search').addEventListener('keydown', e => {{
+  if (e.key === 'Enter') doSearch();
+}});
+document.addEventListener('keydown', e => {{
+  if (e.key === 'Escape' && currentLevel === 2) goLevel1();
+}});
+
+// ── Boot ──────────────────────────────────────────────────────────────────
+initLevel1();
+</script>
+</body>
+</html>"""