From 1724cbadcd4ed67b28edd6f84465e95132f19a5c Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Mon, 25 May 2026 13:19:51 -0400
Subject: [PATCH] fix(web): wire diff stats into list rows and format
 consistently

The list-view Changes column was always empty because mapRunListItem
never copied additions/deletions from the API's diff payload. Populate
them so rows actually render +/- counts.

The run overview's Changes cell was rendering raw numbers; switch it to
toLocaleString() so it matches the list view's formatting.

Also tighten tabCountBadges in the run-detail test to scope to the
tab-strip's rounded-full badges. The previous selector matched any
tabular-nums span, so the unconditional size chip caused a false
positive in "hides the Files Changed tab badge when diff stats are
absent" after the chip went unconditional in 7d4aa474f.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/components/run-summary-panel.tsx | 6 +++---
 apps/fabro-web/app/data/runs.ts                     | 2 ++
 apps/fabro-web/app/routes/run-detail.test.ts        | 4 +++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/fabro-web/app/components/run-summary-panel.tsx b/apps/fabro-web/app/components/run-summary-panel.tsx
index 30797329d..1532ec4f5 100644
--- a/apps/fabro-web/app/components/run-summary-panel.tsx
+++ b/apps/fabro-web/app/components/run-summary-panel.tsx
@@ -183,11 +183,11 @@ export function RunSummaryPanelView({
           ) : diff ? (
             <div className="flex items-baseline gap-2 text-sm">
               <span className="font-mono tabular-nums">
-                <span className="text-mint">+{diff.additions}</span>{" "}
-                <span className="text-coral">−{diff.deletions}</span>
+                <span className="text-mint">+{diff.additions.toLocaleString()}</span>{" "}
+                <span className="text-coral">−{diff.deletions.toLocaleString()}</span>
               </span>
               <span className="text-fg-3">
-                in {diff.files_changed} {diff.files_changed === 1 ? "file" : "files"}
+                in {diff.files_changed.toLocaleString()} {diff.files_changed === 1 ? "file" : "files"}
               </span>
             </div>
           ) : (
diff --git a/apps/fabro-web/app/data/runs.ts b/apps/fabro-web/app/data/runs.ts
index 46c151fe6..6f587846c 100644
--- a/apps/fabro-web/app/data/runs.ts
+++ b/apps/fabro-web/app/data/runs.ts
@@ -107,6 +107,8 @@ export function mapRunListItem(item: Run): RunItem {
     sourceDirectory: item.source_directory ?? undefined,
     createdAt: item.timestamps.created_at,
     lastEventAt: item.timestamps.last_event_at ?? undefined,
+    additions: item.diff?.additions,
+    deletions: item.diff?.deletions,
   };
 }
 
diff --git a/apps/fabro-web/app/routes/run-detail.test.ts b/apps/fabro-web/app/routes/run-detail.test.ts
index 64cc380a7..66ca11c32 100644
--- a/apps/fabro-web/app/routes/run-detail.test.ts
+++ b/apps/fabro-web/app/routes/run-detail.test.ts
@@ -219,7 +219,9 @@ function hasClasses(value: unknown, classes: string[]) {
 
 function tabCountBadges(renderer: TestRenderer.ReactTestRenderer) {
   return renderer.root.findAll(
-    (node) => node.type === "span" && hasClasses(node.props.className, ["tabular-nums"]),
+    (node) =>
+      node.type === "span" &&
+      hasClasses(node.props.className, ["rounded-full", "tabular-nums"]),
   );
 }