@git-snitch/renderer 0.0.3

package/src/repo-routes.tsx

@@ -0,0 +1,285 @@
+import { Button } from "@git-snitch/ui/components/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@git-snitch/ui/components/card";
+import { useMemo, useState } from "react";
+import type { ReactNode } from "react";
+
+import type { CommitRecord, ContributorSummary, JsonObject, RepoReportData, ReportData } from "@git-snitch/core";
+
+import {
+  CodeOwnershipChart,
+  ContributorPieChart,
+  deriveCodeOwnershipData,
+  deriveContributorPieData,
+} from "./charts.js";
+import { EmptyState } from "./empty-state.js";
+import { downloadJson } from "./export.js";
+import { CommitsTable, ContributorsTable } from "./tables.js";
+import type { DownloadResult } from "./export.js";
+
+export type JsonDownloadResult = DownloadResult;
+export type JsonDownloader = (filename: string, rows: readonly JsonObject[]) => JsonDownloadResult;
+
+type RepoRouteProps = {
+  readonly report: ReportData;
+  readonly jsonDownloader?: JsonDownloader;
+};
+
+type ContributorTimelineSummary =
+  | {
+      readonly status: "ready";
+      readonly firstDate: string;
+      readonly lastDate: string;
+      readonly activeDays: number;
+      readonly latestContributor: string;
+    }
+  | { readonly status: "empty" }
+  | { readonly status: "insufficient-dates" };
+
+function formatNumber(value: number) {
+  return new Intl.NumberFormat("en").format(value);
+}
+
+function dayKey(value: string | undefined) {
+  if (value === undefined) {
+    return undefined;
+  }
+
+  const timestamp = Date.parse(value);
+  return Number.isNaN(timestamp) ? undefined : new Date(timestamp).toISOString().slice(0, 10);
+}
+
+function daysBetweenInclusive(firstDate: string, lastDate: string) {
+  const first = Date.parse(`${firstDate}T00:00:00.000Z`);
+  const last = Date.parse(`${lastDate}T00:00:00.000Z`);
+  return Math.floor((last - first) / 86_400_000) + 1;
+}
+
+function repoDataMismatch(title: string) {
+  return (
+    <EmptyState
+      title={title}
+      description="This route expects a single-repository report. Open the scan overview for multi-repository aggregate evidence."
+    />
+  );
+}
+
+function repoFilename(report: RepoReportData, suffix: string) {
+  const safeName = report.repository.name.trim().replaceAll(/[^a-zA-Z0-9._-]+/g, "-").replaceAll(/^-|-$/g, "");
+  return `${safeName.length > 0 ? safeName : "repo"}-${suffix}`;
+}
+
+function commitAdditions(commit: CommitRecord) {
+  return commit.files.reduce((sum, file) => sum + file.additions, 0);
+}
+
+function commitDeletions(commit: CommitRecord) {
+  return commit.files.reduce((sum, file) => sum + file.deletions, 0);
+}
+
+function commitToJsonRow(commit: CommitRecord): JsonObject {
+  return {
+    hash: commit.hash,
+    shortHash: commit.shortHash,
+    message: commit.message,
+    authorName: commit.author.name,
+    authorEmail: commit.author.email,
+    authoredAt: commit.authoredAt,
+    committedAt: commit.committedAt,
+    classification: commit.classification,
+    additions: commitAdditions(commit),
+    deletions: commitDeletions(commit),
+    files: commit.files.map((file) => file.path),
+    refs: commit.refs,
+  };
+}
+
+function contributorToJsonRow(contributor: ContributorSummary): JsonObject {
+  return {
+    name: contributor.name,
+    email: contributor.email,
+    commitCount: contributor.commitCount,
+    additions: contributor.additions,
+    deletions: contributor.deletions,
+    filesChanged: contributor.filesChanged,
+    firstCommitAt: contributor.firstCommitAt ?? null,
+    lastCommitAt: contributor.lastCommitAt ?? null,
+  };
+}
+
+function defaultJsonDownloader(filename: string, rows: readonly JsonObject[]) {
+  return downloadJson(filename, rows);
+}
+
+function JsonExportButton({ filename, rows, downloader }: { readonly filename: string; readonly rows: readonly JsonObject[]; readonly downloader?: JsonDownloader }) {
+  const [status, setStatus] = useState<string | undefined>();
+  const canExport = rows.length > 0;
+
+  function handleExport() {
+    if (!canExport) {
+      return;
+    }
+
+    const result = (downloader ?? defaultJsonDownloader)(filename, rows);
+    setStatus(result.status === "downloaded" ? "JSON export started." : result.reason);
+  }
+
+  return (
+    <div className="flex flex-col items-start gap-2 sm:items-end">
+      <Button type="button" variant="outline" size="sm" onClick={handleExport} disabled={!canExport}>
+        Export JSON
+      </Button>
+      {status ? <p className="text-xs text-muted-foreground" aria-live="polite">{status}</p> : null}
+    </div>
+  );
+}
+
+function RouteHeader({ title, description, action }: { readonly title: string; readonly description: string; readonly action?: ReactNode }) {
+  return (
+    <section className="grid grid-flow-dense gap-4 rounded-2xl border border-border/70 bg-card/80 p-5 shadow-sm sm:grid-cols-[1fr_auto] sm:items-start">
+      <div className="max-w-3xl">
+        <h2 className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">{title}</h2>
+        <p className="mt-2 text-sm leading-6 text-muted-foreground">{description}</p>
+      </div>
+      {action}
+    </section>
+  );
+}
+
+function CommitsSummary({ commits }: { readonly commits: readonly CommitRecord[] }) {
+  const touchedFiles = new Set(commits.flatMap((commit) => commit.files.map((file) => file.path))).size;
+  const additions = commits.reduce((sum, commit) => sum + commitAdditions(commit), 0);
+  const deletions = commits.reduce((sum, commit) => sum + commitDeletions(commit), 0);
+
+  return (
+    <section aria-label="Commit ledger summary" className="grid grid-flow-dense gap-3 sm:grid-cols-3">
+      <SummaryCard title="Touched files" value={formatNumber(touchedFiles)} description="Unique paths changed by visible commits." />
+      <SummaryCard title="Additions" value={formatNumber(additions)} description="Lines added across commit file stats." />
+      <SummaryCard title="Deletions" value={formatNumber(deletions)} description="Lines removed across commit file stats." />
+    </section>
+  );
+}
+
+function SummaryCard({ title, value, description }: { readonly title: string; readonly value: string; readonly description: string }) {
+  return (
+    <Card className="overflow-hidden shadow-none transition-transform duration-500 ease-out hover:-translate-y-0.5">
+      <CardHeader>
+        <CardTitle className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-3xl font-semibold tracking-tight text-foreground">{value}</p>
+        <p className="mt-2 text-xs leading-5 text-muted-foreground">{description}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ContributorsComparison({ contributors }: { readonly contributors: readonly ContributorSummary[] }) {
+  const contributorShare = deriveContributorPieData(contributors);
+  const ownership = deriveCodeOwnershipData(contributors);
+
+  if (contributorShare.length === 0 && ownership.length === 0) {
+    return <EmptyState title="No contributor comparison yet" description="Comparison visuals need contributor commit, file, or churn activity." />;
+  }
+
+  return (
+    <section aria-label="Contributor comparison visuals" className="grid grid-flow-dense gap-6 lg:grid-cols-2">
+      <ContributorPieChart data={contributorShare} />
+      <CodeOwnershipChart data={ownership} />
+    </section>
+  );
+}
+
+export function deriveContributorTimelineSummary(contributors: readonly ContributorSummary[]): ContributorTimelineSummary {
+  if (contributors.length === 0) {
+    return { status: "empty" };
+  }
+
+  const datedContributors = contributors
+    .map((contributor) => ({ contributor, firstDate: dayKey(contributor.firstCommitAt), lastDate: dayKey(contributor.lastCommitAt) }))
+    .filter((entry): entry is { readonly contributor: ContributorSummary; readonly firstDate: string; readonly lastDate: string } => entry.firstDate !== undefined && entry.lastDate !== undefined)
+    .sort((left, right) => left.lastDate.localeCompare(right.lastDate));
+
+  if (datedContributors.length === 0) {
+    return { status: "insufficient-dates" };
+  }
+
+  const firstDate = datedContributors.reduce((earliest, entry) => entry.firstDate < earliest ? entry.firstDate : earliest, datedContributors[0]?.firstDate ?? "");
+  const latest = datedContributors[datedContributors.length - 1];
+
+  if (latest === undefined) {
+    return { status: "insufficient-dates" };
+  }
+
+  return {
+    status: "ready",
+    firstDate,
+    lastDate: latest.lastDate,
+    activeDays: daysBetweenInclusive(firstDate, latest.lastDate),
+    latestContributor: latest.contributor.name,
+  };
+}
+
+function ContributorTimeline({ contributors }: { readonly contributors: readonly ContributorSummary[] }) {
+  const summary = deriveContributorTimelineSummary(contributors);
+
+  if (summary.status === "empty") {
+    return <EmptyState title="No contributor timeline yet" description="Timeline summary appears once at least one contributor exists." />;
+  }
+
+  if (summary.status === "insufficient-dates") {
+    return <EmptyState title="Contributor timeline is unavailable" description="Contributor rows do not include valid first and last commit dates." />;
+  }
+
+  return (
+    <section aria-label="Contributor activity timeline" className="grid grid-flow-dense gap-3 sm:grid-cols-3">
+      <SummaryCard title="Activity span" value={`${formatNumber(summary.activeDays)} days`} description={`${summary.firstDate} through ${summary.lastDate}.`} />
+      <SummaryCard title="Latest contributor" value={summary.latestContributor} description="Contributor with the most recent recorded commit." />
+      <SummaryCard title="Tracked people" value={formatNumber(contributors.length)} description="Contributor identities in this repository report." />
+    </section>
+  );
+}
+
+export function CommitsRoute({ report, jsonDownloader }: RepoRouteProps) {
+  const jsonRows = useMemo(() => report.kind === "repo" ? report.commits.map(commitToJsonRow) : [], [report]);
+
+  if (report.kind !== "repo") {
+    return repoDataMismatch("Commits are unavailable for scan reports");
+  }
+
+  const hasCommits = report.commits.length > 0;
+
+  return (
+    <div className="grid gap-6">
+      <RouteHeader
+        title="Commits ledger"
+        description="Searchable, sortable commit evidence with line churn and file context preserved for standalone reports."
+        action={hasCommits ? <JsonExportButton filename={repoFilename(report, "commits.json")} rows={jsonRows} downloader={jsonDownloader} /> : undefined}
+      />
+      {hasCommits ? <CommitsSummary commits={report.commits} /> : null}
+      <CommitsTable commits={report.commits} exportFilename={repoFilename(report, "commits.csv")} remoteUrl={report.repository.remoteUrl} />
+    </div>
+  );
+}
+
+export function ContributorsRoute({ report, jsonDownloader }: RepoRouteProps) {
+  const jsonRows = useMemo(() => report.kind === "repo" ? report.contributors.map(contributorToJsonRow) : [], [report]);
+
+  if (report.kind !== "repo") {
+    return repoDataMismatch("Contributors are unavailable for scan reports");
+  }
+
+  const hasContributors = report.contributors.length > 0;
+
+  return (
+    <div className="grid gap-6">
+      <RouteHeader
+        title="Contributors"
+        description="A contributor-first view of ownership, recent activity, and exportable identity-level report data."
+        action={hasContributors ? <JsonExportButton filename={repoFilename(report, "contributors.json")} rows={jsonRows} downloader={jsonDownloader} /> : undefined}
+      />
+      <ContributorsComparison contributors={report.contributors} />
+      <ContributorTimeline contributors={report.contributors} />
+      <ContributorsTable contributors={report.contributors} exportFilename={repoFilename(report, "contributors.csv")} />
+    </div>
+  );
+}

package/src/scan-routes.tsx

@@ -0,0 +1,393 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+import type { ContributorSummary, RepoReportData, ReportData, ScanProjectReport, ScanReportData } from "@git-snitch/core";
+import { cn } from "@git-snitch/ui/lib/utils";
+
+import { ChartsRoute } from "./charts-route.js";
+import { EmptyState } from "./empty-state.js";
+import { StatsGrid } from "./layout.js";
+import { RepoOverview } from "./overview.js";
+import { HotspotsRoute, QualityRoute } from "./quality-hotspots-routes.js";
+import { CommitsRoute, ContributorsRoute } from "./repo-routes.js";
+import { DataTable } from "./tables.js";
+
+type ScanRouteProps = {
+  readonly report: ReportData;
+};
+
+type ScanProjectRouteProps = ScanRouteProps & {
+  readonly projectSlug: string;
+};
+
+type ContributorAggregate = {
+  readonly key: string;
+  readonly name: string;
+  readonly email: string;
+  readonly commitCount: number;
+  readonly additions: number;
+  readonly deletions: number;
+  readonly filesChanged: number;
+  readonly projectCount: number;
+};
+
+type MutableContributorAggregate = Omit<ContributorAggregate, "projectCount"> & {
+  readonly projectKeys: Set<string>;
+};
+
+type ProjectComparisonRow = {
+  readonly slug: string;
+  readonly href: string;
+  readonly label: string;
+  readonly remoteUrl: string | undefined;
+  readonly commits: number;
+  readonly contributors: number;
+  readonly churn: number;
+  readonly lastCommitAt: string | undefined;
+};
+
+export type ScanProjectRouteEntry = {
+  readonly project: ScanProjectReport;
+  readonly slug: string;
+  readonly href: string;
+  readonly label: string;
+};
+
+function formatNumber(value: number) {
+  return new Intl.NumberFormat("en").format(value);
+}
+
+function totalChurn(report: RepoReportData) {
+  return report.commits.reduce(
+    (sum, commit) => sum + commit.files.reduce((fileSum, file) => fileSum + file.additions + file.deletions, 0),
+    0,
+  );
+}
+
+function stableHash(value: string) {
+  let hash = 2_166_136_261;
+
+  for (const character of value) {
+    hash ^= character.charCodeAt(0);
+    hash = Math.imul(hash, 16_777_619);
+  }
+
+  return (hash >>> 0).toString(36).slice(0, 6);
+}
+
+function slugBase(value: string) {
+  const slug = value
+    .trim()
+    .toLowerCase()
+    .replaceAll(/[^a-z0-9._-]+/g, "-")
+    .replaceAll(/-+/g, "-")
+    .replaceAll(/^-|-$/g, "");
+
+  return slug.length > 0 ? slug : "project";
+}
+
+function formatDate(isoDate: string | undefined): string {
+  if (isoDate === undefined) {
+    return "Not available";
+  }
+  return new Intl.DateTimeFormat("en", { dateStyle: "medium", timeStyle: "short", timeZone: "UTC" }).format(new Date(isoDate));
+}
+
+export function deriveScanProjectSlug(project: ScanProjectReport) {
+  const source = `${project.repository.id}|${project.repository.relativePath}|${project.repository.name}`;
+  return `${slugBase(project.repository.id || project.repository.relativePath || project.repository.name)}-${stableHash(source)}`;
+}
+
+export function deriveScanProjectRouteEntries(report: ScanReportData): readonly ScanProjectRouteEntry[] {
+  return report.projects.map((project) => {
+    const slug = deriveScanProjectSlug(project);
+
+    return {
+      project,
+      slug,
+      href: `#/scan/projects/${slug}`,
+      label: project.repository.name,
+    };
+  });
+}
+
+function scanDataMismatch(title: string) {
+  return (
+    <EmptyState
+      title={title}
+      description="This route expects a scan report. Open the repository overview, commits, contributors, charts, quality, or hotspots routes for single-repository data."
+    />
+  );
+}
+
+function buildScanStats(report: ScanReportData) {
+  return [
+    { label: "Repositories", value: formatNumber(report.analysis.totalRepositories), description: "Projects included in this scan report" },
+    { label: "Commits", value: formatNumber(report.analysis.totalCommits), description: "Commits aggregated across scanned projects" },
+    { label: "Contributors", value: formatNumber(report.analysis.totalContributors), description: "Contributor identities counted by the scan analysis" },
+    { label: "Languages", value: formatNumber(report.analysis.languages.length), description: "Detected language groups across projects" },
+  ];
+}
+
+function contributorKey(contributor: ContributorSummary) {
+  const email = contributor.email.trim().toLowerCase();
+  return email.length > 0 ? email : contributor.name.trim().toLowerCase();
+}
+
+export function deriveCrossProjectContributors(report: ScanReportData): readonly ContributorAggregate[] {
+  const aggregates = new Map<string, MutableContributorAggregate>();
+
+  for (const project of report.projects) {
+    for (const contributor of project.report.contributors) {
+      const key = contributorKey(contributor);
+      const existing = aggregates.get(key);
+
+      if (existing) {
+        aggregates.set(key, {
+          ...existing,
+          commitCount: existing.commitCount + contributor.commitCount,
+          additions: existing.additions + contributor.additions,
+          deletions: existing.deletions + contributor.deletions,
+          filesChanged: existing.filesChanged + contributor.filesChanged,
+          projectKeys: new Set([...existing.projectKeys, project.repository.id]),
+        });
+      } else {
+        aggregates.set(key, {
+          key,
+          name: contributor.name,
+          email: contributor.email,
+          commitCount: contributor.commitCount,
+          additions: contributor.additions,
+          deletions: contributor.deletions,
+          filesChanged: contributor.filesChanged,
+          projectKeys: new Set([project.repository.id]),
+        });
+      }
+    }
+  }
+
+  return [...aggregates.values()]
+    .map((aggregate) => ({
+      key: aggregate.key,
+      name: aggregate.name,
+      email: aggregate.email,
+      commitCount: aggregate.commitCount,
+      additions: aggregate.additions,
+      deletions: aggregate.deletions,
+      filesChanged: aggregate.filesChanged,
+      projectCount: aggregate.projectKeys.size,
+    }))
+    .filter((aggregate) => aggregate.projectCount > 1)
+    .sort((left, right) => right.commitCount - left.commitCount || right.projectCount - left.projectCount || left.name.localeCompare(right.name));
+}
+
+const projectComparisonColumns: ColumnDef<ProjectComparisonRow>[] = [
+  {
+    accessorKey: "label",
+    header: "Project",
+    cell: ({ row }) => (
+      <div>
+        <a className="font-medium text-foreground underline-offset-4 hover:underline" href={row.original.href}>
+          {row.original.label}
+        </a>
+        {row.original.remoteUrl ? (
+          <a
+            className="mt-1 block text-xs text-muted-foreground hover:text-foreground"
+            href={row.original.remoteUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View remote
+          </a>
+        ) : null}
+      </div>
+    ),
+  },
+  { accessorKey: "commits", header: "Commits", cell: ({ row }) => formatNumber(row.original.commits) },
+  { accessorKey: "contributors", header: "Contributors", cell: ({ row }) => formatNumber(row.original.contributors) },
+  { accessorKey: "churn", header: "Churn", cell: ({ row }) => formatNumber(row.original.churn) },
+  { accessorKey: "lastCommitAt", header: "Last commit", cell: ({ row }) => formatDate(row.original.lastCommitAt) },
+];
+
+const crossProjectContributorColumns: ColumnDef<ContributorAggregate>[] = [
+  {
+    accessorKey: "name",
+    header: "Contributor",
+    cell: ({ row }) => (
+      <div>
+        <span className="font-medium text-foreground">{row.original.name}</span>
+        <p className="mt-1 text-xs text-muted-foreground">{row.original.email}</p>
+      </div>
+    ),
+  },
+  { accessorKey: "projectCount", header: "Projects", cell: ({ row }) => formatNumber(row.original.projectCount) },
+  { accessorKey: "commitCount", header: "Commits", cell: ({ row }) => formatNumber(row.original.commitCount) },
+  { accessorKey: "additions", header: "Additions", cell: ({ row }) => formatNumber(row.original.additions) },
+  { accessorKey: "deletions", header: "Deletions", cell: ({ row }) => formatNumber(row.original.deletions) },
+];
+
+function ScanIntro({ report }: { readonly report: ScanReportData }) {
+  return (
+    <section className="grid grid-flow-dense gap-5 rounded-3xl border border-border/70 bg-card/80 p-6 shadow-sm md:grid-cols-[minmax(0,1fr)_18rem] md:items-end">
+      <div className="max-w-4xl">
+        <h2 className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">Scan overview</h2>
+        <p className="mt-3 text-sm leading-6 text-muted-foreground">
+          Evidence across {report.projects.length} repositories: repository totals, comparable project rows, and contributors whose work spans more than one codebase.
+        </p>
+      </div>
+      <div className="rounded-2xl border border-border/70 bg-background/70 p-4">
+        <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">Scan scope</p>
+        <p className="mt-2 text-sm font-medium text-foreground">Max depth {report.options.scan.maxDepth}</p>
+        <p className="mt-1 text-xs leading-5 text-muted-foreground">Generated {report.generatedAt}</p>
+      </div>
+    </section>
+  );
+}
+
+function ProjectComparison({ report }: { readonly report: ScanReportData }) {
+  const entries = deriveScanProjectRouteEntries(report);
+
+  const rows: readonly ProjectComparisonRow[] = useMemo(
+    () =>
+      entries.map((entry) => ({
+        slug: entry.slug,
+        href: entry.href,
+        label: entry.label,
+        remoteUrl: entry.project.repository.remoteUrl,
+        commits: entry.project.report.commits.length,
+        contributors: entry.project.report.contributors.length,
+        churn: totalChurn(entry.project.report),
+        lastCommitAt: entry.project.repository.lastCommitAt,
+      })),
+    [entries],
+  );
+
+  return (
+    <DataTable
+      ariaLabel="Project comparison"
+      data={rows}
+      columns={projectComparisonColumns}
+      search={{ placeholder: "Search projects", toText: (row) => `${row.label}` }}
+      emptyState={{
+        title: "No repositories matched this scan",
+        description: "git-snitch did not find repositories within the configured directory, max depth, include patterns, and exclude patterns. Widen the scan scope or check that the target directory contains Git repositories.",
+      }}
+    />
+  );
+}
+
+function CrossProjectContributors({ report }: { readonly report: ScanReportData }) {
+  const contributors = deriveCrossProjectContributors(report);
+
+  return (
+    <DataTable
+      ariaLabel="Cross-project contributors"
+      data={contributors}
+      columns={crossProjectContributorColumns}
+      search={{ placeholder: "Search contributors", toText: (row) => `${row.name} ${row.email}` }}
+      exportConfig={{
+        filename: "cross-project-contributors.csv",
+        mapRow: (row) => ({ name: row.name, email: row.email, projects: row.projectCount, commits: row.commitCount, additions: row.additions, deletions: row.deletions }),
+      }}
+      emptyState={{
+        title: "No shared contributors across projects",
+        description: "Each contributor identity currently appears in only one scanned repository. Shared contributor evidence will appear here once the same author email or name is present in more than one project.",
+      }}
+    />
+  );
+}
+
+export function ScanOverview({ report }: ScanRouteProps) {
+  if (report.kind !== "scan") {
+    return scanDataMismatch("Scan overview is unavailable for repository reports");
+  }
+
+  return (
+    <div className="grid gap-6">
+      <ScanIntro report={report} />
+      <StatsGrid stats={buildScanStats(report)} />
+      <ProjectComparison report={report} />
+      <CrossProjectContributors report={report} />
+    </div>
+  );
+}
+
+const scanProjectTabs = ["Overview", "Commits", "Contributors", "Charts", "Quality", "Hotspots"] as const;
+type ScanProjectTab = (typeof scanProjectTabs)[number];
+
+function ScanProjectTabs({ report }: { readonly report: RepoReportData }) {
+  const [activeTab, setActiveTab] = useState<ScanProjectTab>("Overview");
+
+  return (
+    <div className="grid gap-6">
+      <nav aria-label="Project sections" className="flex gap-1 rounded-xl border border-border/70 bg-muted/25 p-1">
+        {scanProjectTabs.map((tab) => (
+          <button
+            key={tab}
+            type="button"
+            onClick={() => setActiveTab(tab)}
+            className={cn(
+              "rounded-lg px-4 py-2 text-sm font-medium transition-colors",
+              activeTab === tab
+                ? "bg-background text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {tab}
+          </button>
+        ))}
+      </nav>
+      {activeTab === "Overview" ? <RepoOverview report={report} /> : null}
+      {activeTab === "Commits" ? <CommitsRoute report={report} /> : null}
+      {activeTab === "Contributors" ? <ContributorsRoute report={report} /> : null}
+      {activeTab === "Charts" ? <ChartsRoute report={report} /> : null}
+      {activeTab === "Quality" ? <QualityRoute report={report} /> : null}
+      {activeTab === "Hotspots" ? <HotspotsRoute report={report} /> : null}
+    </div>
+  );
+}
+
+export function ScanProjectRoute({ report, projectSlug }: ScanProjectRouteProps) {
+  if (report.kind !== "scan") {
+    return scanDataMismatch("Scan project drill-down is unavailable for repository reports");
+  }
+
+  const entry = deriveScanProjectRouteEntries(report).find((candidate) => candidate.slug === projectSlug);
+
+  if (!entry) {
+    return (
+      <EmptyState
+        title="Scan project was not found"
+        description="The project link does not match any repository in this scan report. Return to the scan overview and choose one of the generated project links."
+      />
+    );
+  }
+
+  const repoReport = entry.project.report;
+
+  return (
+    <div className="grid gap-6">
+      <section className="grid grid-flow-dense gap-4 rounded-2xl border border-border/70 bg-card/80 p-5 shadow-sm sm:grid-cols-[1fr_auto] sm:items-start">
+        <div className="max-w-4xl">
+          <h2 className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">{entry.project.repository.name}</h2>
+          <p className="mt-2 text-sm leading-6 text-muted-foreground">
+            Drill-down for {entry.project.repository.name}. Overview, commits, contributors, charts, hotspots, and quality signals from the scanned project report.
+          </p>
+          {entry.project.repository.remoteUrl ? (
+            <a
+              className="mt-2 inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+              href={entry.project.repository.remoteUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              View remote
+            </a>
+          ) : null}
+        </div>
+        <a className="text-sm font-medium text-foreground underline-offset-4 hover:underline" href="#/scan">
+          Back to scan overview
+        </a>
+      </section>
+      <ScanProjectTabs report={repoReport} />
+    </div>
+  );
+}