@git-snitch/renderer 0.0.11 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@git-snitch/renderer",
-  "version": "0.0.11",
+  "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.11",
-    "@git-snitch/ui": "0.0.11"
+    "@git-snitch/core": "0.0.12",
+    "@git-snitch/ui": "0.0.12"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",

package/src/ai-usage.tsx

@@ -1,9 +1,11 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@git-snitch/ui/components/card";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@git-snitch/ui/components/table";
 
+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;
@@ -41,41 +43,28 @@ function SummaryMetric({ label, value, description }: { readonly label: string;
   );
 }
 
+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 visibleRows = rows.slice(0, 8);
+  const columns = useMemo(() => breakdownColumns, []);
 
   return (
-    <div className="rounded-xl border border-border/70 bg-background/70">
-      <div className="border-b border-border/70 px-4 py-3">
-        <h4 className="text-sm font-semibold text-foreground">{title}</h4>
-      </div>
-      {visibleRows.length === 0 ? (
-        <div className="p-4">
-          <EmptyState title={`${title} unavailable`} description={emptyDescription} />
-        </div>
-      ) : (
-        <Table aria-label={title}>
-          <TableHeader>
-            <TableRow className="hover:bg-transparent">
-              <TableHead className="bg-muted/30 px-3 py-2 text-[0.7rem] uppercase tracking-[0.18em] text-muted-foreground">Name</TableHead>
-              <TableHead className="bg-muted/30 px-3 py-2 text-[0.7rem] uppercase tracking-[0.18em] text-muted-foreground">Messages</TableHead>
-              <TableHead className="bg-muted/30 px-3 py-2 text-[0.7rem] uppercase tracking-[0.18em] text-muted-foreground">Tokens</TableHead>
-              <TableHead className="bg-muted/30 px-3 py-2 text-[0.7rem] uppercase tracking-[0.18em] text-muted-foreground">Cost</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {visibleRows.map((row) => (
-              <TableRow key={row.key}>
-                <TableCell className="px-3 py-3 text-sm font-medium text-foreground">{row.key}</TableCell>
-                <TableCell className="px-3 py-3 text-sm text-muted-foreground">{formatNumber(row.records)}</TableCell>
-                <TableCell className="px-3 py-3 text-sm text-muted-foreground">{formatNumber(row.tokens.total)}</TableCell>
-                <TableCell className="px-3 py-3 text-sm text-muted-foreground">{formatAiUsageCost(row.cost)}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      )}
-    </div>
+    <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 }}
+    />
   );
 }
 

package/src/charts.tsx

@@ -21,7 +21,7 @@ import {
 } from "recharts";
 import type { ReactNode } from "react";
 
-import type { AiUsageBreakdownItem, 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";
 
@@ -43,6 +43,10 @@ export type CodeOwnershipPoint = { readonly owner: string; readonly additions: n
 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;
@@ -494,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/scan-routes.tsx

@@ -5,6 +5,19 @@ 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";
@@ -318,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");
@@ -335,6 +370,7 @@ export function ScanOverview({ report }: ScanRouteProps) {
         />
       ) : null}
       <ProjectComparison report={report} />
+      <ScanCharts report={report} />
       <CrossProjectContributors report={report} />
     </div>
   );