@git-snitch/renderer 0.0.9 → 0.0.11

package/package.json

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

package/src/ai-usage.tsx

@@ -0,0 +1,119 @@
+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 { AiUsageBreakdownItem, AiUsageSummary, ReportAiUsageProjectSummary } from "@git-snitch/core";
+
+import { EmptyState } from "./empty-state.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>
+  );
+}
+
+function BreakdownTable({ title, rows, emptyDescription }: { readonly title: string; readonly rows: readonly AiUsageBreakdownItem[]; readonly emptyDescription: string }) {
+  const visibleRows = rows.slice(0, 8);
+
+  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>
+  );
+}
+
+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, ScanProjectReport, ScanReportData } from "@git-snitch/core";
 
 import { EmptyState } from "./empty-state.js";
 
@@ -42,6 +42,7 @@ 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 };
 
 type ChartPanelProps = {
   readonly title: string;
@@ -213,6 +214,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 +463,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.">

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,6 +3,7 @@ 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 { EmptyState } from "./empty-state.js";
 import { StatsGrid } from "./layout.js";
@@ -43,6 +44,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 +184,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 +212,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 +255,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 +287,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",
@@ -305,6 +327,13 @@ 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} />
       <CrossProjectContributors report={report} />
     </div>

package/vite.config.ts

@@ -1,5 +1,7 @@
 import tailwindcss from "@tailwindcss/vite";
 import viteReact from "@vitejs/plugin-react";
+import { createRequire } from "node:module";
+import { basename, dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { defineConfig } from "vite";
 
@@ -7,9 +9,27 @@ import { createInlineHtmlPlugin } from "./src/inline-plugin";
 
 const packageDirectory = fileURLToPath(new URL(".", import.meta.url));
 const defaultTemplateModule = fileURLToPath(new URL("./src/custom-templates.ts", import.meta.url));
-const packageNodeModules = fileURLToPath(new URL("./node_modules/", import.meta.url));
 const customTemplateModule = process.env.GIT_SNITCH_TEMPLATE_MODULE;
 
+const require = createRequire(import.meta.url);
+
+function resolvePackageModule(specifier: string): string {
+  const entry = require.resolve(specifier);
+  return entry;
+}
+
+function resolvePackageRoot(pkgName: string): string {
+  const entry = require.resolve(pkgName);
+  let dir = dirname(entry);
+  while (basename(dir) !== pkgName && dirname(dir) !== dir) {
+    dir = dirname(dir);
+  }
+  return dir;
+}
+
+const reactRoot = resolvePackageRoot("react");
+const reactDomRoot = resolvePackageRoot("react-dom");
+
 export default defineConfig({
   base: "./",
   build: {
@@ -30,9 +50,10 @@ export default defineConfig({
   resolve: {
     alias: {
       "@git-snitch/renderer": fileURLToPath(new URL("./src", import.meta.url)),
-      react: `${packageNodeModules}react`,
-      "react/jsx-dev-runtime": `${packageNodeModules}react/jsx-dev-runtime.js`,
-      "react/jsx-runtime": `${packageNodeModules}react/jsx-runtime.js`,
+      react: resolve(reactRoot),
+      "react/jsx-dev-runtime": resolvePackageModule("react/jsx-dev-runtime"),
+      "react/jsx-runtime": resolvePackageModule("react/jsx-runtime"),
+      "react-dom": resolve(reactDomRoot),
       "virtual:git-snitch-custom-templates": customTemplateModule ?? defaultTemplateModule,
     },
     tsconfigPaths: true,