@git-snitch/renderer 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@git-snitch/renderer",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "publishConfig": {
     "access": "public"
   },
@@ -35,8 +35,8 @@
     "react-dom": "^19.2.5",
     "recharts": "3.8.0",
     "vite": "^8.0.8",
-    "@git-snitch/core": "0.0.10",
-    "@git-snitch/ui": "0.0.10"
+    "@git-snitch/core": "0.0.12",
+    "@git-snitch/ui": "0.0.12"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",

package/src/ai-usage.tsx

@@ -0,0 +1,108 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@git-snitch/ui/components/card";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import { useMemo } from "react";
+import type { AiUsageBreakdownItem, AiUsageSummary, ReportAiUsageProjectSummary } from "@git-snitch/core";
+
+import { EmptyState } from "./empty-state.js";
+import { DataTable } from "./tables.js";
+
+type AiUsagePanelProps = {
+  readonly title?: string;
+  readonly description?: string;
+  readonly usage: AiUsageSummary | ReportAiUsageProjectSummary;
+};
+
+function formatNumber(value: number) {
+  return new Intl.NumberFormat("en").format(value);
+}
+
+export function formatAiUsageCost(value: number) {
+  return new Intl.NumberFormat("en", { style: "currency", currency: "USD", maximumFractionDigits: 4 }).format(value);
+}
+
+export function formatAiUsageTokens(value: number) {
+  return new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(value);
+}
+
+function hasBreakdowns(usage: AiUsageSummary | ReportAiUsageProjectSummary): usage is ReportAiUsageProjectSummary {
+  return "breakdowns" in usage;
+}
+
+function usageHasTotals(usage: AiUsageSummary) {
+  return usage.records > 0 || usage.tokens.total > 0 || usage.cost > 0;
+}
+
+function SummaryMetric({ label, value, description }: { readonly label: string; readonly value: string; readonly description: string }) {
+  return (
+    <div className="rounded-xl border border-border/70 bg-background/70 p-4">
+      <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">{label}</p>
+      <p className="mt-2 text-2xl font-semibold tracking-tight text-foreground">{value}</p>
+      <p className="mt-1 text-xs leading-5 text-muted-foreground">{description}</p>
+    </div>
+  );
+}
+
+const breakdownColumns: ColumnDef<AiUsageBreakdownItem>[] = [
+  { accessorKey: "key", header: "Name", cell: ({ row }) => <span className="font-medium text-foreground">{row.original.key}</span> },
+  { accessorKey: "records", header: "Messages", cell: ({ row }) => formatNumber(row.original.records) },
+  { accessorKey: "tokens.total", header: "Tokens", cell: ({ row }) => formatAiUsageTokens(row.original.tokens.total) },
+  { accessorKey: "cost", header: "Cost", cell: ({ row }) => formatAiUsageCost(row.original.cost) },
+];
+
+function BreakdownTable({ title, rows, emptyDescription }: { readonly title: string; readonly rows: readonly AiUsageBreakdownItem[]; readonly emptyDescription: string }) {
+  const columns = useMemo(() => breakdownColumns, []);
+
+  return (
+    <DataTable
+      ariaLabel={title}
+      data={rows}
+      columns={columns}
+      search={{ placeholder: "Search", toText: (row) => row.key }}
+      exportConfig={{
+        filename: `${title.toLowerCase().replace(/\s+/g, "-")}.csv`,
+        mapRow: (row) => ({ name: row.key, messages: row.records, tokens: row.tokens.total, cost: row.cost }),
+      }}
+      emptyState={{ title: `${title} unavailable`, description: emptyDescription }}
+    />
+  );
+}
+
+export function AiUsagePanel({
+  title = "AI usage",
+  description = "Local assistant usage matched to this report. Workspace paths are not rendered in the HTML report.",
+  usage,
+}: AiUsagePanelProps) {
+  const hasTotals = usageHasTotals(usage);
+
+  return (
+    <Card className="overflow-hidden shadow-none transition-transform duration-500 ease-out hover:-translate-y-0.5" aria-label={title}>
+      <CardHeader className="space-y-2">
+        <CardTitle className="text-base font-semibold tracking-tight text-foreground">{title}</CardTitle>
+        <p className="text-sm leading-6 text-muted-foreground">{description}</p>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className="grid grid-flow-dense gap-3 sm:grid-cols-3">
+          <SummaryMetric label="Total tokens" value={formatNumber(usage.tokens.total)} description="Input, output, cache, and reasoning tokens." />
+          <SummaryMetric label="Estimated cost" value={formatAiUsageCost(usage.cost)} description="USD estimate reported or derived from local logs." />
+          <SummaryMetric label="Messages" value={formatNumber(usage.records)} description="Matched assistant usage records." />
+        </div>
+
+        {!hasTotals ? (
+          <EmptyState
+            title="No AI usage matched this report"
+            description="AI usage collection was enabled, but the matched local logs contain zero messages, tokens, and estimated cost for this report scope."
+          />
+        ) : null}
+
+        {hasBreakdowns(usage) ? (
+          <div className="grid grid-flow-dense gap-4 xl:grid-cols-3">
+            <BreakdownTable title="Client breakdown" rows={usage.breakdowns.byClient} emptyDescription="No client-level AI usage rows were available." />
+            <BreakdownTable title="Model breakdown" rows={usage.breakdowns.byModel} emptyDescription="No model-level AI usage rows were available." />
+            <BreakdownTable title="Recent days" rows={usage.breakdowns.byDay} emptyDescription="No dated AI usage rows were available." />
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

package/src/charts-route.tsx

@@ -6,6 +6,7 @@ import type { RepoReportData, ReportData } from "@git-snitch/core";
 import {
   ActivityHeatmap,
   AdditionsVsDeletionsChart,
+  AiUsageBreakdownChart,
   CodeOwnershipChart,
   CommitActivityChart,
   CommitSizeDistributionChart,
@@ -17,6 +18,7 @@ import {
   WeeklyActivityChart,
   deriveActivityHeatmapData,
   deriveAdditionsVsDeletionsData,
+  deriveAiUsageBreakdownData,
   deriveCodeOwnershipData,
   deriveCommitActivityData,
   deriveCommitSizeDistributionData,
@@ -112,6 +114,8 @@ export function ChartsRoute({ report }: ChartsRouteProps) {
   const timeOfDay = deriveTimeOfDayData(report.commits);
   const contributorShare = deriveContributorPieData(report.contributors);
   const weeklyActivity = deriveWeeklyActivityData(report.commits);
+  const aiUsageByModel = deriveAiUsageBreakdownData(report.aiUsage?.breakdowns.byModel ?? []);
+  const aiUsageByHarness = deriveAiUsageBreakdownData(report.aiUsage?.breakdowns.byClient ?? []);
   const showContributorShare = contributorShare.length > 1;
 
   return (
@@ -153,6 +157,15 @@ export function ChartsRoute({ report }: ChartsRouteProps) {
           <ContributionCalendar data={calendar} />
         </div>
       </SectionFrame>
+
+      {report.aiUsage !== undefined ? (
+        <SectionFrame title="AI usage" description="Model and harness usage from matched local assistant logs. These charts stay scoped to this repository report payload.">
+          <div className="grid grid-flow-dense gap-5 lg:grid-cols-2">
+            <AiUsageBreakdownChart title="AI usage by model" description="Matched assistant tokens and messages grouped by model." data={aiUsageByModel} />
+            <AiUsageBreakdownChart title="AI usage by harness" description="Matched assistant tokens and messages grouped by local harness or client." data={aiUsageByHarness} />
+          </div>
+        </SectionFrame>
+      ) : null}
     </div>
   );
 }

package/src/charts.tsx

@@ -21,7 +21,7 @@ import {
 } from "recharts";
 import type { ReactNode } from "react";
 
-import type { CommitRecord, ContributorSummary, RepoReportData, ScanProjectReport, ScanReportData } from "@git-snitch/core";
+import type { AiUsageBreakdownItem, CommitRecord, ContributorSummary, RepoReportData, ReportAiUsageProjectSummary, ScanProjectReport, ScanReportData } from "@git-snitch/core";
 
 import { EmptyState } from "./empty-state.js";
 
@@ -42,6 +42,11 @@ export type VelocityPoint = { readonly period: string; readonly commits: number;
 export type CodeOwnershipPoint = { readonly owner: string; readonly additions: number; readonly deletions: number; readonly filesChanged: number };
 export type ProjectComparisonPoint = { readonly project: string; readonly commits: number; readonly contributors: number; readonly filesChanged: number };
 export type ActivityHeatmapCell = { readonly day: string; readonly hour: string; readonly commits: number };
+export type AiUsageBreakdownPoint = { readonly name: string; readonly messages: number; readonly tokens: number; readonly cost: number };
+export type ScanCommitSlice = { readonly name: string; readonly commits: number };
+export type ScanChurnSlice = { readonly name: string; readonly additions: number; readonly deletions: number; readonly churn: number };
+export type ScanAiProjectSlice = { readonly name: string; readonly messages: number; readonly tokens: number };
+export type ScanAiModelSlice = { readonly name: string; readonly messages: number; readonly tokens: number };
 
 type ChartPanelProps = {
   readonly title: string;
@@ -213,6 +218,14 @@ export function deriveProjectsComparisonData(projects: readonly ScanProjectRepor
     .sort((left, right) => right.commits - left.commits || left.project.localeCompare(right.project));
 }
 
+export function deriveAiUsageBreakdownData(rows: readonly AiUsageBreakdownItem[]): readonly AiUsageBreakdownPoint[] {
+  return rows
+    .filter((row) => row.records > 0 || row.tokens.total > 0 || row.cost > 0)
+    .map((row) => ({ name: row.key, messages: row.records, tokens: row.tokens.total, cost: row.cost }))
+    .sort((left, right) => right.tokens - left.tokens || right.messages - left.messages || left.name.localeCompare(right.name))
+    .slice(0, 8);
+}
+
 export function deriveActivityHeatmapData(commits: readonly CommitRecord[]): readonly ActivityHeatmapCell[] {
   const counts = new Map<string, number>();
   for (const commit of commits) {
@@ -454,6 +467,23 @@ export function ProjectsComparisonChart({ data }: { readonly data: readonly Proj
   );
 }
 
+export function AiUsageBreakdownChart({ title, description, data }: { readonly title: string; readonly description: string; readonly data: readonly AiUsageBreakdownPoint[] }) {
+  return (
+    <ChartPanel title={title} description={description} isEmpty={!hasPositiveValue(data, (item) => [item.messages, item.tokens])} emptyTitle={`No ${title.toLowerCase()} to chart`} emptyDescription="AI usage charts need matched local assistant records with model or harness metadata.">
+      <ChartContainer config={{ tokens: { label: "Tokens", color: chartPalette[2] }, messages: { label: "Messages", color: chartPalette[4] } }} className="h-72 w-full">
+        <BarChart data={data} layout="vertical" margin={{ left: 8, right: 16, top: 8, bottom: 0 }}>
+          <CartesianGrid horizontal={false} />
+          <XAxis type="number" hide />
+          <YAxis dataKey="name" type="category" width={124} tickLine={false} axisLine={false} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <Bar dataKey="tokens" fill="var(--color-tokens)" radius={[0, 3, 3, 0]} {...staticChartProps} />
+          <Bar dataKey="messages" fill="var(--color-messages)" radius={[0, 3, 3, 0]} {...staticChartProps} />
+        </BarChart>
+      </ChartContainer>
+    </ChartPanel>
+  );
+}
+
 export function ActivityHeatmap({ data }: { readonly data: readonly ActivityHeatmapCell[] }) {
   return (
     <ChartPanel title="Activity heatmap" description="UTC weekday and hour density." isEmpty={!hasPositiveValue(data, (item) => [item.commits])} emptyTitle="No activity heatmap to show" emptyDescription="The heatmap needs at least one dated commit.">
@@ -468,6 +498,167 @@ export function ActivityHeatmap({ data }: { readonly data: readonly ActivityHeat
   );
 }
 
+export function ScanCommitBarChart({ data }: { readonly data: readonly ScanCommitSlice[] }) {
+  return (
+    <ChartPanel
+      title="Commits per project"
+      description="Commit count across scanned repositories."
+      isEmpty={!hasPositiveValue(data, (item) => [item.commits])}
+      emptyTitle="No commits to chart"
+      emptyDescription="Commit comparison needs at least one scanned project with commits."
+    >
+      <ChartContainer config={{ commits: { label: "Commits", color: chartPalette[1] } }} className="h-64 w-full">
+        <BarChart data={data} layout="vertical" margin={{ left: 8, right: 16, top: 8, bottom: 0 }}>
+          <CartesianGrid horizontal={false} />
+          <XAxis type="number" hide />
+          <YAxis dataKey="name" type="category" width={112} tickLine={false} axisLine={false} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <Bar dataKey="commits" fill="var(--color-commits)" radius={[0, 3, 3, 0]} {...staticChartProps} />
+        </BarChart>
+      </ChartContainer>
+    </ChartPanel>
+  );
+}
+
+export function ScanChurnPieChart({ data }: { readonly data: readonly ScanChurnSlice[] }) {
+  return (
+    <ChartPanel
+      title="Churn per project"
+      description="Lines changed (additions + deletions) by project."
+      isEmpty={!hasPositiveValue(data, (item) => [item.churn])}
+      emptyTitle="No churn to chart"
+      emptyDescription="Churn data appears after file-level additions or deletions exist."
+    >
+      <ChartContainer config={{ churn: { label: "Churn" } }} className="h-64 w-full">
+        <PieChart>
+          <ChartTooltip content={<ChartTooltipContent nameKey="name" />} />
+          <Pie data={data} dataKey="churn" nameKey="name" innerRadius={56} outerRadius={88} paddingAngle={2} {...staticChartProps}>
+            {data.map((slice, index) => (
+              <Cell key={slice.name} fill={chartPalette[index % chartPalette.length]} />
+            ))}
+          </Pie>
+        </PieChart>
+      </ChartContainer>
+    </ChartPanel>
+  );
+}
+
+export function ScanAiMessagesPieChart({ data }: { readonly data: readonly ScanAiProjectSlice[] }) {
+  return (
+    <ChartPanel
+      title="AI messages per project"
+      description="Message share across scanned repositories."
+      isEmpty={!hasPositiveValue(data, (item) => [item.messages])}
+      emptyTitle="No AI messages to chart"
+      emptyDescription="AI message data appears after local assistant records are matched to projects."
+    >
+      <ChartContainer config={{ messages: { label: "Messages" } }} className="h-64 w-full">
+        <PieChart>
+          <ChartTooltip content={<ChartTooltipContent nameKey="name" />} />
+          <Pie data={data} dataKey="messages" nameKey="name" innerRadius={56} outerRadius={88} paddingAngle={2} {...staticChartProps}>
+            {data.map((slice, index) => (
+              <Cell key={slice.name} fill={chartPalette[index % chartPalette.length]} />
+            ))}
+          </Pie>
+        </PieChart>
+      </ChartContainer>
+    </ChartPanel>
+  );
+}
+
+export function ScanAiTokensBarChart({ data }: { readonly data: readonly ScanAiProjectSlice[] }) {
+  return (
+    <ChartPanel
+      title="AI tokens per project"
+      description="Token usage across scanned repositories."
+      isEmpty={!hasPositiveValue(data, (item) => [item.tokens])}
+      emptyTitle="No AI tokens to chart"
+      emptyDescription="AI token data appears after local assistant records are matched to projects."
+    >
+      <ChartContainer config={{ tokens: { label: "Tokens", color: chartPalette[2] } }} className="h-64 w-full">
+        <BarChart data={data} layout="vertical" margin={{ left: 8, right: 16, top: 8, bottom: 0 }}>
+          <CartesianGrid horizontal={false} />
+          <XAxis type="number" hide />
+          <YAxis dataKey="name" type="category" width={112} tickLine={false} axisLine={false} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <Bar dataKey="tokens" fill="var(--color-tokens)" radius={[0, 3, 3, 0]} {...staticChartProps} />
+        </BarChart>
+      </ChartContainer>
+    </ChartPanel>
+  );
+}
+
+export function ScanAiModelsPieChart({ data }: { readonly data: readonly ScanAiModelSlice[] }) {
+  return (
+    <ChartPanel
+      title="AI usage by model"
+      description="Message share across all models used in the scan."
+      isEmpty={!hasPositiveValue(data, (item) => [item.messages])}
+      emptyTitle="No AI model data to chart"
+      emptyDescription="AI model data appears after local assistant records with model metadata are matched."
+    >
+      <ChartContainer config={{ messages: { label: "Messages" } }} className="h-64 w-full">
+        <PieChart>
+          <ChartTooltip content={<ChartTooltipContent nameKey="name" />} />
+          <Pie data={data} dataKey="messages" nameKey="name" innerRadius={56} outerRadius={88} paddingAngle={2} {...staticChartProps}>
+            {data.map((slice, index) => (
+              <Cell key={slice.name} fill={chartPalette[index % chartPalette.length]} />
+            ))}
+          </Pie>
+        </PieChart>
+      </ChartContainer>
+    </ChartPanel>
+  );
+}
+
+export function deriveScanCommitData(projects: readonly ScanProjectReport[]): readonly ScanCommitSlice[] {
+  return projects
+    .map((project) => ({
+      name: project.repository.name,
+      commits: project.report.commits.length,
+    }))
+    .sort((left, right) => right.commits - left.commits || left.name.localeCompare(right.name));
+}
+
+export function deriveScanChurnData(projects: readonly ScanProjectReport[]): readonly ScanChurnSlice[] {
+  return projects
+    .map((project) => {
+      let additions = 0;
+      let deletions = 0;
+      for (const commit of project.report.commits) {
+        for (const file of commit.files) {
+          additions += file.additions;
+          deletions += file.deletions;
+        }
+      }
+      return { name: project.repository.name, additions, deletions, churn: additions + deletions };
+    })
+    .filter((item) => item.churn > 0)
+    .sort((left, right) => right.churn - left.churn || left.name.localeCompare(right.name));
+}
+
+export function deriveScanAiPerProjectData(projects: readonly ScanProjectReport[]): readonly ScanAiProjectSlice[] {
+  return projects
+    .filter((project) => project.report.aiUsage !== undefined && project.report.aiUsage.records > 0)
+    .map((project) => ({
+      name: project.repository.name,
+      messages: project.report.aiUsage!.records,
+      tokens: project.report.aiUsage!.tokens.total,
+    }))
+    .sort((left, right) => right.messages - left.messages || left.name.localeCompare(right.name));
+}
+
+export function deriveScanAiModelsData(aiUsage: ReportAiUsageProjectSummary): readonly ScanAiModelSlice[] {
+  return aiUsage.breakdowns.byModel
+    .filter((item) => item.records > 0 || item.tokens.total > 0)
+    .map((item) => ({
+      name: item.key,
+      messages: item.records,
+      tokens: item.tokens.total,
+    }))
+    .sort((left, right) => right.messages - left.messages || left.name.localeCompare(right.name));
+}
+
 function heatClass(commits: number) {
   if (commits >= 8) {
     return "border-chart-4/40 bg-chart-4";

package/src/layout.tsx

@@ -53,7 +53,7 @@ export function Header({ title, titleHref, eyebrow, description, actions }: Head
 
   return (
     <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/75">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-5 py-8 sm:px-8 lg:flex-row lg:items-end lg:justify-between">
+      <div className="mx-auto flex w-full flex-col gap-6 px-6 py-8 sm:px-10 lg:flex-row lg:items-end lg:justify-between">
         <div className="max-w-4xl">
           {eyebrow ? <p className="text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground">{eyebrow}</p> : null}
           {titleHref ? (
@@ -81,7 +81,7 @@ export function Navigation({ items, label = "Report sections" }: NavigationProps
 
   return (
     <nav aria-label={label} className="border-b bg-background/80">
-      <div className="mx-auto flex w-full max-w-7xl gap-2 overflow-x-auto px-5 py-3 sm:px-8">
+      <div className="mx-auto flex w-full gap-2 overflow-x-auto px-6 py-3 sm:px-10">
         {items.map((item) =>
           item.disabled ? (
             <span
@@ -146,7 +146,7 @@ export function AppShell({
     <main className="min-h-screen w-full max-w-full overflow-x-hidden bg-background text-foreground transition-colors">
       <Header title={title} titleHref={titleHref} eyebrow={eyebrow} description={description} actions={headerActions} />
       <Navigation items={navigationItems} />
-      <div className={cn("mx-auto flex w-full max-w-7xl flex-col gap-8 px-5 py-8 sm:px-8 sm:py-10")}>{children}</div>
+      <div className={cn("mx-auto flex w-full flex-col gap-8 px-6 py-8 sm:px-10 sm:py-10")}>{children}</div>
     </main>
   );
 }

package/src/overview.tsx

@@ -2,6 +2,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@git-snitch/ui/compone
 
 import type { CommitRecord, GitHubRepoMeta, RepoReportData, ReportData } from "@git-snitch/core";
 
+import { AiUsagePanel } from "./ai-usage.js";
 import { CommitActivityChart, deriveCommitActivityData } from "./charts.js";
 import { EmptyState } from "./empty-state.js";
 import { StatsGrid } from "./layout.js";
@@ -232,6 +233,7 @@ export function RepoOverview({ report }: { readonly report: ReportData }) {
       <div className="grid gap-6">
         <StatsGrid stats={buildOverviewStats(report)} />
         {githubMeta !== undefined ? <GitHubMetaBar meta={githubMeta} /> : null}
+        {report.aiUsage !== undefined ? <AiUsagePanel usage={report.aiUsage} /> : null}
         <EmptyState
           title="This repository has no commit activity yet"
           description="git-snitch found a repository report, but there are no commits or contributors to summarize. Charts and streaks will appear after activity exists."
@@ -244,6 +246,7 @@ export function RepoOverview({ report }: { readonly report: ReportData }) {
     <div className="grid gap-6">
       <StatsGrid stats={buildOverviewStats(report)} />
       {githubMeta !== undefined ? <GitHubMetaBar meta={githubMeta} /> : null}
+      {report.aiUsage !== undefined ? <AiUsagePanel usage={report.aiUsage} /> : null}
       <section aria-label="Repository overview previews" className="grid grid-flow-dense gap-6 lg:grid-cols-2">
         <StreakCard streak={deriveStreakSummary(report.commits)} />
         <ChartPreview report={report} />

package/src/scan-routes.tsx

@@ -3,7 +3,21 @@ 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 { AiUsagePanel, formatAiUsageCost, formatAiUsageTokens } from "./ai-usage.js";
 import { ChartsRoute } from "./charts-route.js";
+import {
+  LanguageDistributionChart,
+  ScanAiMessagesPieChart,
+  ScanAiModelsPieChart,
+  ScanAiTokensBarChart,
+  ScanChurnPieChart,
+  ScanCommitBarChart,
+  deriveLanguageDistributionData,
+  deriveScanAiModelsData,
+  deriveScanAiPerProjectData,
+  deriveScanChurnData,
+  deriveScanCommitData,
+} from "./charts.js";
 import { EmptyState } from "./empty-state.js";
 import { StatsGrid } from "./layout.js";
 import { RepoOverview } from "./overview.js";
@@ -43,6 +57,9 @@ type ProjectComparisonRow = {
   readonly contributors: number;
   readonly churn: number;
   readonly lastCommitAt: string | undefined;
+  readonly aiMessages: number | undefined;
+  readonly aiTokens: number | undefined;
+  readonly aiCost: number | undefined;
 };
 
 export type ScanProjectRouteEntry = {
@@ -180,7 +197,7 @@ export function deriveCrossProjectContributors(report: ScanReportData): readonly
     .sort((left, right) => right.commitCount - left.commitCount || right.projectCount - left.projectCount || left.name.localeCompare(right.name));
 }
 
-const projectComparisonColumns: ColumnDef<ProjectComparisonRow>[] = [
+const projectComparisonBaseColumns: ColumnDef<ProjectComparisonRow>[] = [
   {
     accessorKey: "label",
     header: "Project",
@@ -208,6 +225,12 @@ const projectComparisonColumns: ColumnDef<ProjectComparisonRow>[] = [
   { accessorKey: "lastCommitAt", header: "Last commit", cell: ({ row }) => formatDate(row.original.lastCommitAt) },
 ];
 
+const projectComparisonAiUsageColumns: ColumnDef<ProjectComparisonRow>[] = [
+  { accessorKey: "aiMessages", header: "AI messages", cell: ({ row }) => row.original.aiMessages === undefined ? "—" : formatNumber(row.original.aiMessages) },
+  { accessorKey: "aiTokens", header: "AI tokens", cell: ({ row }) => row.original.aiTokens === undefined ? "—" : formatAiUsageTokens(row.original.aiTokens) },
+  { accessorKey: "aiCost", header: "AI cost", cell: ({ row }) => row.original.aiCost === undefined ? "—" : formatAiUsageCost(row.original.aiCost) },
+];
+
 const crossProjectContributorColumns: ColumnDef<ContributorAggregate>[] = [
   {
     accessorKey: "name",
@@ -245,19 +268,31 @@ function ScanIntro({ report }: { readonly report: ScanReportData }) {
 
 function ProjectComparison({ report }: { readonly report: ScanReportData }) {
   const entries = deriveScanProjectRouteEntries(report);
+  const hasProjectAiUsage = report.projects.some((project) => project.report.aiUsage !== undefined);
+  const columns = useMemo(
+    () => hasProjectAiUsage ? [...projectComparisonBaseColumns, ...projectComparisonAiUsageColumns] : projectComparisonBaseColumns,
+    [hasProjectAiUsage],
+  );
 
   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.map((entry) => {
+        const usage = entry.project.report.aiUsage;
+
+        return {
+          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,
+          aiMessages: usage?.records,
+          aiTokens: usage?.tokens.total,
+          aiCost: usage?.cost,
+        };
+      }),
     [entries],
   );
 
@@ -265,7 +300,7 @@ function ProjectComparison({ report }: { readonly report: ScanReportData }) {
     <DataTable
       ariaLabel="Project comparison"
       data={rows}
-      columns={projectComparisonColumns}
+      columns={columns}
       search={{ placeholder: "Search projects", toText: (row) => `${row.label}` }}
       emptyState={{
         title: "No repositories matched this scan",
@@ -296,6 +331,28 @@ function CrossProjectContributors({ report }: { readonly report: ScanReportData
   );
 }
 
+function ScanCharts({ report }: { readonly report: ScanReportData }) {
+  const commitData = deriveScanCommitData(report.projects);
+  const churnData = deriveScanChurnData(report.projects);
+  const languageData = deriveLanguageDistributionData(report);
+  const aiPerProject = deriveScanAiPerProjectData(report.projects);
+  const aiModels = report.analysis.aiUsage !== undefined ? deriveScanAiModelsData(report.analysis.aiUsage) : [];
+
+  return (
+    <section aria-label="Visual comparison">
+      <h2 className="mb-4 text-lg font-semibold tracking-tight text-foreground">Visual comparison</h2>
+      <div className="grid gap-6 lg:grid-cols-3">
+        <ScanCommitBarChart data={commitData} />
+        <ScanChurnPieChart data={churnData} />
+        <LanguageDistributionChart data={languageData} />
+        {aiPerProject.length > 0 ? <ScanAiMessagesPieChart data={aiPerProject} /> : null}
+        {aiPerProject.length > 0 ? <ScanAiTokensBarChart data={aiPerProject} /> : null}
+        {aiModels.length > 0 ? <ScanAiModelsPieChart data={aiModels} /> : null}
+      </div>
+    </section>
+  );
+}
+
 export function ScanOverview({ report }: ScanRouteProps) {
   if (report.kind !== "scan") {
     return scanDataMismatch("Scan overview is unavailable for repository reports");
@@ -305,7 +362,15 @@ export function ScanOverview({ report }: ScanRouteProps) {
     <div className="grid gap-6">
       <ScanIntro report={report} />
       <StatsGrid stats={buildScanStats(report)} />
+      {report.analysis.aiUsage !== undefined ? (
+        <AiUsagePanel
+          title="Scan AI usage"
+          description="Total matched local assistant usage across repositories in this scan. Workspace paths are not rendered in the HTML report."
+          usage={report.analysis.aiUsage}
+        />
+      ) : null}
       <ProjectComparison report={report} />
+      <ScanCharts report={report} />
       <CrossProjectContributors report={report} />
     </div>
   );