🌀 Force Layout · {nodeCount} nodes
@@ -1131,30 +1284,27 @@ function AnalysisSidebar({
);
}
-// ============================================================================
-// MAIN COMPONENT
-// ============================================================================
-
export default function ArchitectureMap({
dependencyGraph = {},
entryPoints = [],
fileMetrics = [],
prChangedFiles = [],
+ pageRankScores = {},
}: {
dependencyGraph: Record;
entryPoints: string[];
fileMetrics?: { path: string; size: number }[];
prChangedFiles?: string[];
+ pageRankScores?: Record;
}) {
const [selectedNode, setSelectedNode] = useState(null);
const previousGraphRef = useRef("");
const [activeMode, setActiveMode] = useState(
- prChangedFiles && prChangedFiles.length > 0 ? ("pr-blast" as ActiveMode) : ("default" as ActiveMode)
+ prChangedFiles && prChangedFiles.length > 0 ? "pr-blast" : null,
);
const [heatmapEnabled, setHeatmapEnabled] = useState(false);
const [selectedOrphan, setSelectedOrphan] = useState(null);
- // ── Algorithmic computations ───────────────────────────────────────────────
const { cycleNodes, cycleCount } = useMemo(
() => detectCircularDependencies(dependencyGraph),
[dependencyGraph],
@@ -1170,7 +1320,6 @@ export default function ArchitectureMap({
[dependencyGraph],
);
- // Reverse graph — used by both single-node blast radius AND multi-source PR BFS
const adjacencyList = useMemo(() => {
const rev: Record = {};
Object.keys(dependencyGraph).forEach((src) => {
@@ -1182,8 +1331,6 @@ export default function ArchitectureMap({
return rev;
}, [dependencyGraph]);
- // Multi-source reverse BFS — recomputed whenever prChangedFiles changes.
- // Returns empty sets when no PR data is present (zero-cost default).
const { prModifiedNodes, prBlastNodes } = useMemo(() => {
if (!prChangedFiles || prChangedFiles.length === 0)
return {
@@ -1197,7 +1344,23 @@ export default function ArchitectureMap({
return { prModifiedNodes: modifiedNodes, prBlastNodes: blastNodes };
}, [prChangedFiles, adjacencyList]);
- // Auto-activate pr-blast mode when new PR data arrives
+ const pageRankTopFiles = useMemo(
+ () =>
+ Object.entries(pageRankScores)
+ .sort(([, a], [, b]) => b - a)
+ .slice(0, 20)
+ .map(([path, score]) => ({ path, score })),
+ [pageRankScores],
+ );
+
+ const pageRankTierMap = useMemo(() => {
+ const map = new Map();
+ for (const [path, score] of Object.entries(pageRankScores)) {
+ map.set(path, getPageRankTier(score));
+ }
+ return map;
+ }, [pageRankScores]);
+
const prevPrFilesRef = useRef("");
useEffect(() => {
const key = prChangedFiles.join(",");
@@ -1206,7 +1369,6 @@ export default function ArchitectureMap({
}
}, [prChangedFiles]);
- // ── Build initial nodes/edges (layout only) ────────────────────────────────
const { initialNodes, initialEdges, graphHash } = useMemo(() => {
if (!dependencyGraph || typeof dependencyGraph !== "object")
return { initialNodes: [], initialEdges: [], graphHash: "" };
@@ -1230,6 +1392,9 @@ export default function ArchitectureMap({
isOrphanHighlighted: false,
isPrModified: false,
isPrBlast: false,
+ pageRankScore: pageRankScores[filePath] ?? 0,
+ pageRankTier: getPageRankTier(pageRankScores[filePath] ?? 0),
+ pageRankActive: false,
},
position: { x: 0, y: 0 },
});
@@ -1261,8 +1426,7 @@ export default function ArchitectureMap({
});
return { initialNodes: layoutNodes, initialEdges: layoutEdges, graphHash };
-
- }, [dependencyGraph, entryPoints]);
+ }, [dependencyGraph, entryPoints, pageRankScores]);
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
@@ -1275,8 +1439,6 @@ export default function ArchitectureMap({
}
}, [initialNodes, initialEdges, graphHash, setNodes, setEdges]);
- // ── Apply static overlay data (heatmap, circular, orphan flags) ───────────
- // This never re-runs the force layout.
useEffect(() => {
setNodes((nds) =>
nds.map((n) => ({
@@ -1293,9 +1455,7 @@ export default function ArchitectureMap({
);
}, [cycleNodes, heatmapColors, heatmapEnabled, orphans, setNodes]);
- // ── Master highlight effect ────────────────────────────────────────────────
useEffect(() => {
- // Default: clear all highlight state
if (!activeMode && !selectedNode) {
setNodes((nds) =>
nds.map((n) => ({
@@ -1307,6 +1467,7 @@ export default function ArchitectureMap({
isOrphanHighlighted: false,
isPrModified: false,
isPrBlast: false,
+ pageRankActive: false,
},
})),
);
@@ -1321,18 +1482,69 @@ export default function ArchitectureMap({
return;
}
- // PR-BLAST mode — multi-source reverse BFS result applied to graph
+ if (activeMode === "pagerank") {
+ setNodes((nds) =>
+ nds.map((n) => {
+ const tier = pageRankTierMap.get(n.id) ?? 0;
+ return {
+ ...n,
+ data: {
+ ...n.data,
+ pageRankActive: true,
+ pageRankTier: tier,
+ pageRankScore: pageRankScores[n.id] ?? 0,
+ isBlastRadius: false,
+ isPrModified: false,
+ isPrBlast: false,
+ isOrphanHighlighted: false,
+ isDimmed: tier === 0,
+ },
+ };
+ }),
+ );
+ setEdges((eds) =>
+ eds.map((e) => {
+ const srcTier = pageRankTierMap.get(e.source) ?? 0;
+ const tgtTier = pageRankTierMap.get(e.target) ?? 0;
+ const isHotEdge = srcTier >= 2 || tgtTier >= 2;
+ const isTier3Edge = srcTier === 3 || tgtTier === 3;
+ return {
+ ...e,
+ style: {
+ stroke: isTier3Edge
+ ? "#22d3ee"
+ : isHotEdge
+ ? "#3b82f6"
+ : "#475569",
+ strokeWidth: isTier3Edge ? 3 : isHotEdge ? 2 : 1,
+ opacity: isHotEdge ? 1 : 0.1,
+ },
+ animated: isTier3Edge,
+ markerEnd: {
+ type: MarkerType.ArrowClosed,
+ color: isTier3Edge
+ ? "#22d3ee"
+ : isHotEdge
+ ? "#3b82f6"
+ : "#475569",
+ },
+ };
+ }),
+ );
+ return;
+ }
+
if (activeMode === "pr-blast") {
setNodes((nds) =>
nds.map((n) => ({
...n,
data: {
...n.data,
+ pageRankActive: false,
isBlastRadius: false,
isOrphanHighlighted: false,
isPrModified: prModifiedNodes.has(n.id),
isPrBlast: prBlastNodes.has(n.id),
- // Dim only nodes that are neither modified nor in the blast set
isDimmed: !prModifiedNodes.has(n.id) && !prBlastNodes.has(n.id),
},
})),
@@ -1344,7 +1556,6 @@ export default function ArchitectureMap({
const targetHit =
prModifiedNodes.has(e.target) || prBlastNodes.has(e.target);
const isHotEdge = sourceHit && targetHit;
- // Yellow edge between modified nodes, red edge from modified to blast
const isModifiedEdge =
prModifiedNodes.has(e.source) && prModifiedNodes.has(e.target);
return {
@@ -1373,13 +1584,13 @@ export default function ArchitectureMap({
return;
}
- // ORPHAN mode
if (activeMode === "orphan") {
setNodes((nds) =>
nds.map((n) => ({
...n,
data: {
...n.data,
+ pageRankActive: false,
isBlastRadius: false,
isPrModified: false,
isPrBlast: false,
@@ -1405,13 +1616,13 @@ export default function ArchitectureMap({
return;
}
- // CIRCULAR mode
if (activeMode === "circular") {
setNodes((nds) =>
nds.map((n) => ({
...n,
data: {
...n.data,
+ pageRankActive: false,
isBlastRadius: false,
isPrModified: false,
isPrBlast: false,
@@ -1442,7 +1653,6 @@ export default function ArchitectureMap({
return;
}
- // BLAST mode — single node, existing behaviour unchanged
if (activeMode === "blast" && selectedNode) {
const blastNodes = new Set();
const blastEdges = new Set();
@@ -1463,6 +1673,7 @@ export default function ArchitectureMap({
...n,
data: {
...n.data,
+ pageRankActive: false,
isBlastRadius: blastNodes.has(n.id),
isDimmed: !blastNodes.has(n.id),
isOrphanHighlighted: false,
@@ -1497,12 +1708,13 @@ export default function ArchitectureMap({
selectedOrphan,
prModifiedNodes,
prBlastNodes,
+ pageRankTierMap,
+ pageRankScores,
adjacencyList,
setNodes,
setEdges,
]);
- // ── Handlers ──────────────────────────────────────────────────────────────
const handleNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
setSelectedOrphan(null);
setSelectedNode(node.id);
@@ -1535,7 +1747,6 @@ export default function ArchitectureMap({
setHeatmapEnabled((v) => !v);
}, []);
- // ── Empty state ────────────────────────────────────────────────────────────
if (nodes.length === 0) {
return (
@@ -1548,7 +1759,6 @@ export default function ArchitectureMap({
return (
- {/* Graph canvas */}
@@ -1560,7 +1770,6 @@ export default function ArchitectureMap({
- {/* Active mode pill */}
{activeMode && (
@@ -1587,9 +1798,11 @@ export default function ArchitectureMap({
? "Blast radius active"
: activeMode === "circular"
? "Circular deps highlighted"
- : selectedOrphan
- ? `Orphan: ${selectedOrphan.split("/").pop()}`
- : "Orphan mode — select a file"}
+ : activeMode === "pagerank"
+ ? `PageRank · ${pageRankTopFiles.filter((f) => getPageRankTier(f.score) >= 2).length} hubs`
+ : selectedOrphan
+ ? `Orphan: ${selectedOrphan.split("/").pop()}`
+ : "Orphan mode — select a file"}
@@ -1630,7 +1843,6 @@ export default function ArchitectureMap({
- {/* Analysis sidebar */}
{TAB_CONFIG.map((tab) => {
const isActive = activeTab === tab.id;
+ const tooltip = TAB_TOOLTIPS[tab.id];
return (
);
})}
diff --git a/components/analyze/ArchInsightsPanel.tsx b/components/analyze/ArchInsightsPanel.tsx
new file mode 100644
index 0000000..db1d59c
--- /dev/null
+++ b/components/analyze/ArchInsightsPanel.tsx
@@ -0,0 +1,995 @@
+// components/analyze/ArchInsightsPanel.tsx
+"use client";
+
+import { useMemo, useState, memo, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+ ShieldAlert,
+ TrendingUp,
+ Ghost,
+ ChevronDown,
+ ChevronRight,
+ CheckCircle2,
+ AlertTriangle,
+} from "lucide-react";
+import { RepoData } from "@/lib/types/analyze";
+import { computeArticulationPoints } from "@/lib/algorithms/articulationPoints";
+import { computeStability } from "@/lib/algorithms/stability";
+import { computeDeadCode } from "@/lib/algorithms/deadCode";
+import InfoTooltip from "@/components/InfoTooltip";
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const MAX_BRIDGES_SHOWN = 8;
+const MAX_FILES_SHOWN = 30;
+
+const TAB_CONTENT_TRANSITION = { duration: 0.15 };
+
+// ─── Sub-tab config ───────────────────────────────────────────────────────────
+
+const SUB_TABS = [
+ {
+ id: "ap" as const,
+ icon: ShieldAlert,
+ label: "Critical Files",
+ accentColor: "#ef4444",
+ color: "text-red-400",
+ activeText: "text-red-300",
+ activeBg: "bg-red-500/10",
+ activeBorder: "border-red-500/30",
+ tooltip:
+ "Files that if removed would split the codebase into disconnected pieces.",
+ },
+ {
+ id: "stability" as const,
+ icon: TrendingUp,
+ label: "Stability",
+ accentColor: "#3b82f6",
+ color: "text-blue-400",
+ activeText: "text-blue-300",
+ activeBg: "bg-blue-500/10",
+ activeBorder: "border-blue-500/30",
+ tooltip:
+ "How stable each file is based on how many files import it vs how many it imports.",
+ },
+ {
+ id: "dead" as const,
+ icon: Ghost,
+ label: "Dead Code",
+ accentColor: "#8b5cf6",
+ color: "text-violet-400",
+ activeText: "text-violet-300",
+ activeBg: "bg-violet-500/10",
+ activeBorder: "border-violet-500/30",
+ tooltip:
+ "Files that can never be reached from your entry points at runtime.",
+ },
+] as const;
+
+type SubTabId = (typeof SUB_TABS)[number]["id"];
+
+const SUB_TAB_MAP = new Map(SUB_TABS.map((t) => [t.id, t]));
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function fileName(path: string) {
+ return path.split("/").pop() ?? path;
+}
+
+function dirName(path: string) {
+ const idx = path.lastIndexOf("/");
+ return idx > -1 ? path.slice(0, idx) : "";
+}
+
+// Severity is rank-based: top file = critical, second = high, rest = medium.
+// This ensures visual differentiation even in small repos where absolute
+// disconnect counts are all small numbers.
+type Severity = "critical" | "high" | "medium";
+
+function getSeverityByRank(index: number): Severity {
+ if (index === 0) return "critical";
+ if (index === 1) return "high";
+ return "medium";
+}
+
+const SEVERITY_STYLES: Record<
+ Severity,
+ { border: string; dot: string; text: string; badge: string }
+> = {
+ critical: {
+ border: "border-red-500/25 bg-red-500/[0.06]",
+ dot: "bg-red-500 shadow-[0_0_6px_rgba(239,68,68,0.8)]",
+ text: "text-red-300",
+ badge: "bg-red-500/15 text-red-400 border-red-500/25",
+ },
+ high: {
+ border: "border-orange-500/25 bg-orange-500/[0.06]",
+ dot: "bg-orange-400 shadow-[0_0_6px_rgba(251,146,60,0.7)]",
+ text: "text-orange-300",
+ badge: "bg-orange-500/15 text-orange-400 border-orange-500/25",
+ },
+ medium: {
+ border: "border-yellow-500/20 bg-yellow-500/[0.04]",
+ dot: "bg-yellow-500",
+ text: "text-yellow-200",
+ badge: "bg-yellow-500/15 text-yellow-400 border-yellow-500/20",
+ },
+};
+
+const SEVERITY_LABEL: Record
= {
+ critical: "CRITICAL",
+ high: "HIGH",
+ medium: "MEDIUM",
+};
+
+type ZoneTag = { label: string; style: string } | null;
+
+function getZoneTag(zone: string | undefined): ZoneTag {
+ if (zone === "pain")
+ return {
+ label: "PAIN",
+ style: "bg-red-500/15 text-red-400 border-red-500/25",
+ };
+ if (zone === "uselessness")
+ return {
+ label: "UNUSED",
+ style: "bg-yellow-500/15 text-yellow-400 border-yellow-500/20",
+ };
+ return null;
+}
+
+// ─── Shared empty-state ───────────────────────────────────────────────────────
+
+function AllClear({
+ title,
+ description,
+}: {
+ title: string;
+ description: string;
+}) {
+ return (
+
+
+
{title}
+
{description}
+
+
+ {label}
+
+
{value}
+
{sub}
+
+ {/* Summary cards */}
+
+
+ 0
+ ? "fragile dependency edges"
+ : "no fragile edges"
+ }
+ borderColor="border-orange-500/20"
+ bgColor="bg-orange-500/[0.05]"
+ />
+
+
+ {/* Risk callout if top file is severe */}
+ {topDisconnects >= 3 && (
+
+
+
+
+ {fileName(sorted[0])}
+ {" "}
+ is your highest-risk file — removing it would disconnect{" "}
+ {topDisconnects} parts of your codebase.
+
+
+ )}
+
+ {/* File list */}
+
+
+ Files — sorted by impact
+
+ {sorted.map((ap, idx) => {
+ const disconnects = result.componentSizes.get(ap) ?? 0;
+ const severity = getSeverityByRank(idx);
+ const { border, dot, text, badge } = SEVERITY_STYLES[severity];
+
+ return (
+
+ {/* Glowing dot */}
+
+
+
+
+
+ {fileName(ap)}
+
+
+ {SEVERITY_LABEL[severity]}
+
+
+
+ {dirName(ap)}
+
+
+
+
+
+ {disconnects}
+
+
+ {disconnects === 1 ? "component" : "components"}
+
+
+
+ );
+ })}
+
+
+ {/* Bridges section */}
+ {result.bridges.length > 0 && (
+
+
+ Dependency Bridges
+
+
+ {visibleBridges.map(([a, b]) => (
+
+
+ {fileName(a)}
+
+
+ ──→
+
+
+ {fileName(b)}
+
+
+ ))}
+
+ {extraBridges > 0 && (
+
+ +{extraBridges} more bridges
+
+ )}
+
+ )}
+
+ No dependency data available.
+
+ );
+ }
+
+ const visibleFiles = filtered.slice(0, MAX_FILES_SHOWN);
+ const extraFiles = filtered.length - MAX_FILES_SHOWN;
+
+ return (
+
+ {/* Scatter plot */}
+
+
+
+ Instability Distribution
+
+
+
+
+ {/* Legend */}
+
+ {[
+ { color: "#ef4444", label: "Zone of Pain" },
+ { color: "#f97316", label: "Unstable" },
+ { color: "#22d3ee", label: "Healthy" },
+ { color: "#eab308", label: "Unused" },
+ ].map(({ color, label }) => (
+
+ ))}
+
+
+
+ {/* Filter buttons */}
+
+ {(
+ [
+ {
+ key: "pain" as const,
+ label: "Zone of Pain",
+ count: painCount,
+ countColor: "text-red-400",
+ sub: "rigid & hard to change",
+ activeBorder: "border-red-500/30",
+ activeBg: "bg-red-500/8",
+ },
+ {
+ key: "uselessness" as const,
+ label: "Uselessness",
+ count: uselessCount,
+ countColor: "text-yellow-400",
+ sub: "nobody imports them",
+ activeBorder: "border-yellow-500/30",
+ activeBg: "bg-yellow-500/8",
+ },
+ {
+ key: "unstable" as const,
+ label: "Unstable",
+ count: unstableCount,
+ countColor: "text-orange-400",
+ sub: "instability > 70%",
+ activeBorder: "border-orange-500/30",
+ activeBg: "bg-orange-500/8",
+ },
+ ] as const
+ ).map(
+ ({ key, label, count, countColor, sub, activeBorder, activeBg }) => (
+
+ ),
+ )}
+
+
+ {/* File list */}
+
+
+ {filter === "all"
+ ? `All ${sortedFiles.length} files — sorted by instability`
+ : `${filtered.length} files — filtered: ${filter}`}
+
+ {visibleFiles.map((f) => {
+ const instPct = Math.round(f.instability * 100);
+ const barColor =
+ f.instability > 0.7
+ ? "bg-red-500"
+ : f.instability > 0.4
+ ? "bg-orange-400"
+ : "bg-emerald-500";
+
+ // Suppress UNUSED badge for entry points — Ca:0 is expected for
+ // roots, not a sign of uselessness.
+ const zoneTag = entryPointSet.has(f.path) ? null : getZoneTag(f.zone);
+
+ return (
+
+
+
+
+ {fileName(f.path)}
+
+ {zoneTag && (
+
+ {zoneTag.label}
+
+ )}
+
+
+
+
+
+ Ca:{f.afferent} Ce:{f.efferent}
+
+
+
+ );
+ })}
+ {extraFiles > 0 && (
+
+ +{extraFiles} more files
+
+ )}
+
+
+ {/* Summary */}
+
+
+
+ 80
+ ? "text-emerald-400"
+ : result.reachabilityScore > 60
+ ? "text-yellow-400"
+ : "text-red-400"
+ }
+ sub={deadPct > 0 ? `${deadPct}% unreachable` : "fully covered"}
+ borderColor="border-white/8"
+ bgColor="bg-white/[0.02]"
+ />
+
+
+ {/* Reachability bar */}
+
+
+
+
+
+
+ {result.reachable.size} reachable
+
+
+ {result.unreachable.length} dead
+
+
+
+
+ {/* Entry points */}
+
+
+ Entry Points Traced
+
+
+ {data.entryPoints.map((ep) => (
+
+ {fileName(ep)}
+
+ ))}
+
+
+
+ {/* Dead files by directory */}
+
+
+ Unreachable files by directory
+
+ {dirs.map(([dir, files]) => (
+
+
+
+ {openDir === dir && (
+
+
+ {files.map((f) => (
+
+ ))}
+
+
+ ))}
+
+
+ {/* Header */}
+
+
+ Architecture Insights
+
+
+ Pure graph algorithms — no AI, no guessing.
+
+
+
+ {/* Sub-tab strip */}
+
+ {SUB_TABS.map((tab) => {
+ const isActive = activeTab === tab.id;
+ return (
+
+ );
+ })}
+
+
+ {/* Active tab label */}
+
+
+
+ {current.label}
+
+
+
+
+ {/* Tab content */}
+
+
+ {activeTab === "ap" && }
+ {activeTab === "stability" && }
+ {activeTab === "dead" && }
+
+
+
@@ -59,24 +67,33 @@ export default function VisualizerPanel({
VISUAL LAYOUT
+
- {MAP_VIEW_CONFIG.map((view) => (
-
- ))}
+ {MAP_VIEW_CONFIG.map((view) => {
+ const tooltip = MAP_VIEW_TOOLTIPS[view.id];
+ return (
+
+ );
+ })}
- {/* Map canvas */}
+ {/* ── Map area ──────────────────────────────────────────────────── */}
{mapView === "graph" ? (
@@ -87,6 +104,7 @@ export default function VisualizerPanel({
entryPoints={data.entryPoints}
fileMetrics={data.fileMetrics}
prChangedFiles={prChangedFiles}
+ pageRankScores={data.pageRankScores ?? {}}
/>
) : (
diff --git a/components/analyze/constants.tsx b/components/analyze/constants.tsx
index 4a02318..2aa4d61 100644
--- a/components/analyze/constants.tsx
+++ b/components/analyze/constants.tsx
@@ -4,6 +4,7 @@ import {
Activity,
GitPullRequest,
Target,
+ Cpu,
} from "lucide-react";
// ─── Framer Motion ────────────────────────────────────────────────────────────
@@ -18,6 +19,7 @@ export const TAB_CONFIG = [
{ id: "doctor" as const, icon: Activity, label: "Diagnostic Engine" },
{ id: "pr_impact" as const, icon: GitPullRequest, label: "PR Impact" },
{ id: "risk_radar" as const, icon: Target, label: "Risk Radar" },
+ { id: "arch_insights" as const, icon: Cpu, label: "Arch Insights" },
] as const;
export type TabType = (typeof TAB_CONFIG)[number]["id"];
diff --git a/components/dashboard/DashboardGrid.tsx b/components/dashboard/DashboardGrid.tsx
new file mode 100644
index 0000000..911ce6d
--- /dev/null
+++ b/components/dashboard/DashboardGrid.tsx
@@ -0,0 +1,364 @@
+// components/dashboard/DashboardGrid.tsx
+"use client";
+
+import { useState, useMemo } from "react";
+import Link from "next/link";
+import {
+ Database,
+ Clock,
+ GitBranch,
+ ArrowRight,
+ ChevronDown,
+ Layers,
+ CalendarClock,
+} from "lucide-react";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type Analysis = {
+ id: string;
+ repo_url: string;
+ repo_name: string;
+ commit_sha: string;
+ created_at: string;
+};
+
+type GroupedRepo = {
+ repo_url: string;
+ repo_name: string;
+ latest_commit_sha: string;
+ latest_created_at: string;
+ oldest_created_at: string;
+ analysisCount: number;
+};
+
+type SortKey = "latest-desc" | "latest-asc" | "count-desc" | "count-asc";
+
+// ─── Sort Options Config ──────────────────────────────────────────────────────
+
+const SORT_OPTIONS: { value: SortKey; label: string }[] = [
+ { value: "latest-desc", label: "Latest First" },
+ { value: "latest-asc", label: "Oldest First" },
+ { value: "count-desc", label: "Most Analyzed" },
+ { value: "count-asc", label: "Least Analyzed" },
+];
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/**
+ * Groups a flat analyses array by repo_url.
+ * The "representative" row for a group is the one with the latest created_at.
+ */
+function groupAnalysesByRepo(analyses: Analysis[]): GroupedRepo[] {
+ const map = new Map
();
+
+ for (const analysis of analyses) {
+ const existing = map.get(analysis.repo_url);
+
+ if (!existing) {
+ map.set(analysis.repo_url, {
+ repo_url: analysis.repo_url,
+ repo_name: analysis.repo_name,
+ latest_commit_sha: analysis.commit_sha,
+ latest_created_at: analysis.created_at,
+ oldest_created_at: analysis.created_at,
+ analysisCount: 1,
+ });
+ } else {
+ existing.analysisCount += 1;
+
+ // Track the most recent entry
+ if (
+ new Date(analysis.created_at) > new Date(existing.latest_created_at)
+ ) {
+ existing.latest_created_at = analysis.created_at;
+ existing.latest_commit_sha = analysis.commit_sha;
+ }
+
+ // Track the oldest entry
+ if (
+ new Date(analysis.created_at) < new Date(existing.oldest_created_at)
+ ) {
+ existing.oldest_created_at = analysis.created_at;
+ }
+ }
+ }
+
+ return Array.from(map.values());
+}
+
+/**
+ * Formats a date string into "29 MAY 2026 • 2:30 PM"
+ */
+function formatDateTime(dateStr: string): string {
+ const date = new Date(dateStr);
+ const day = date.getDate().toString().padStart(2, "0");
+ const month = date.toLocaleString("en-US", { month: "short" }).toUpperCase();
+ const year = date.getFullYear();
+ const time = date.toLocaleString("en-US", {
+ hour: "numeric",
+ minute: "2-digit",
+ hour12: true,
+ });
+ return `${day} ${month} ${year} • ${time}`;
+}
+
+// ─── Sort Dropdown ────────────────────────────────────────────────────────────
+
+function SortDropdown({
+ value,
+ onChange,
+}: {
+ value: SortKey;
+ onChange: (v: SortKey) => void;
+}) {
+ const [open, setOpen] = useState(false);
+ const current = SORT_OPTIONS.find((o) => o.value === value)!;
+
+ // Split the label to show an accent on the qualifier ("First", "Analyzed")
+ const [base, qualifier] = current.label.split(" ").reduce(
+ (acc, word, i, arr) => {
+ if (i < arr.length - 1) acc[0] = (acc[0] ? acc[0] + " " : "") + word;
+ else acc[1] = word;
+ return acc;
+ },
+ ["", ""] as [string, string],
+ );
+
+ return (
+
+
+
+ {open && (
+ <>
+ {/* Backdrop */}
+
setOpen(false)} />
+ {/* Menu */}
+
+ {/* Group: Time */}
+
+
+ Time
+
+
+ {SORT_OPTIONS.slice(0, 2).map((opt) => (
+
+ ))}
+
+ {/* Divider */}
+
+
+ {/* Group: Count */}
+
+
+ Scans
+
+
+ {SORT_OPTIONS.slice(2).map((opt) => (
+
+ ))}
+
+
+
+ )}
+
+ );
+}
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+export default function DashboardGrid({
+ analyses,
+ error,
+}: {
+ analyses: Analysis[];
+ error?: string;
+}) {
+ const [sortKey, setSortKey] = useState
("latest-desc");
+
+ const sortedRepos = useMemo(() => {
+ const grouped = groupAnalysesByRepo(analyses);
+
+ return grouped.sort((a, b) => {
+ switch (sortKey) {
+ case "latest-desc":
+ return (
+ new Date(b.latest_created_at).getTime() -
+ new Date(a.latest_created_at).getTime()
+ );
+ case "latest-asc":
+ return (
+ new Date(a.latest_created_at).getTime() -
+ new Date(b.latest_created_at).getTime()
+ );
+ case "count-desc":
+ return b.analysisCount - a.analysisCount;
+ case "count-asc":
+ return a.analysisCount - b.analysisCount;
+ }
+ });
+ }, [analyses, sortKey]);
+
+ if (error) {
+ return (
+
+
+ Database Error
+
+
{error}
+
+ {/* ── Section Header ─────────────────────────────────────────────── */}
+
+
+ Historical Scans
+ {sortedRepos.length > 0 && (
+
+ ({sortedRepos.length} repo{sortedRepos.length !== 1 ? "s" : ""})
+
+ )}
+
+
+ {/* Sort control — only visible when there's data */}
+ {sortedRepos.length > 0 && (
+
+
+ Sort
+
+
+
+ )}
+
+
+ {/* ── Empty State ────────────────────────────────────────────────── */}
+ {sortedRepos.length === 0 ? (
+
+
+
+ No Autopsies Found
+
+
+ You haven't analyzed any repositories yet. Start your first
+ scan to generate an architecture blueprint and diagnostic report.
+
+
+ Initiate Scan
+
+
+ ) : (
+ /* ── Grid ────────────────────────────────────────────────────── */
+
+ {sortedRepos.map((repo) => (
+
+ {/* ── Card Header ─────────────────────────────────── */}
+
+
+ {/* DB icon */}
+
+
+
+ {/* Scans badge */}
+
= 5
+ ? "bg-indigo-500/15 border-indigo-500/30 text-indigo-300"
+ : repo.analysisCount >= 2
+ ? "bg-slate-200/10 border-slate-200/20 text-slate-300"
+ : "bg-white/5 border-white/10 text-slate-500"
+ }`}
+ >
+ {repo.analysisCount} Scan
+ {repo.analysisCount !== 1 ? "s" : ""}
+
+
+
+ {/* Timestamp */}
+
+
+
+ {formatDateTime(repo.latest_created_at)}
+
+
+
+
+ {/* ── Card Body ───────────────────────────────────── */}
+
+
+ {repo.repo_name}
+
+
+
+
+ {repo.latest_commit_sha.substring(0, 7)}
+
+
+
+
+ {/* ── CTA ─────────────────────────────────────────── */}
+
+ Load Report
+
+
+ ))}
+
+ )}
+