feat: add diff line count to plans table results view

apps/web/app/routes/ws/deployments/page.$deploymentId.plans.$planId.tsx

@@ -3,14 +3,14 @@ import { FileText } from "lucide-react";
 import { Link, useParams } from "react-router";
 
 import { trpc } from "~/api/trpc";
+import { cn } from "~/lib/utils";
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "~/components/ui/breadcrumb";
-import { Button } from "~/components/ui/button";
 import { Separator } from "~/components/ui/separator";
 import { SidebarTrigger } from "~/components/ui/sidebar";
 import {
@@ -42,13 +42,30 @@ function resultTitle(result: Result) {
   return `${result.environment.name} · ${result.resource.name} · ${result.agent.name}`;
 }
 
-function ChangesCell({
-  result,
-  onViewDiff,
+function DiffStats({
+  stats,
 }: {
-  result: Result;
-  onViewDiff: (resultId: string) => void;
+  stats: { added: number; removed: number } | null;
 }) {
+  if (stats == null) return null;
+  return (
+    <span className="font-mono text-xs">
+      {stats.added > 0 && (
+        <span className="text-green-600 dark:text-green-400">
+          +{stats.added}
+        </span>
+      )}
+      {stats.added > 0 && stats.removed > 0 && (
+        <span className="text-muted-foreground"> </span>
+      )}
+      {stats.removed > 0 && (
+        <span className="text-red-600 dark:text-red-400">-{stats.removed}</span>
+      )}
+    </span>
+  );
+}
+
+function ChangesCell({ result }: { result: Result }) {
   if (result.status === "computing")
     return <span className="text-muted-foreground">—</span>;
   if (result.status === "errored")
@@ -63,16 +80,7 @@ function ChangesCell({
   if (result.status === "unsupported")
     return <span className="text-muted-foreground">Unsupported</span>;
   if (result.hasChanges === true)
-    return (
-      <Button
-        variant="outline"
-        size="sm"
-        className="h-6 cursor-pointer hover:bg-accent hover:text-accent-foreground"
-        onClick={() => onViewDiff(result.resultId)}
-      >
-        View diff
-      </Button>
-    );
+    return <DiffStats stats={result.diffStats} />;
   if (result.hasChanges === false)
     return <span className="text-muted-foreground">No changes</span>;
   return <span className="text-muted-foreground">—</span>;
@@ -99,16 +107,20 @@ function ResultsTableRow({
   result: Result;
   onViewDiff: (resultId: string) => void;
 }) {
+  const isClickable = result.hasChanges === true;
   return (
-    <TableRow className="hover:bg-muted/50">
+    <TableRow
+      className={cn("hover:bg-muted/50", isClickable && "cursor-pointer")}
+      onClick={isClickable ? () => onViewDiff(result.resultId) : undefined}
+    >
       <TableCell>{result.environment.name}</TableCell>
       <TableCell>{result.resource.name}</TableCell>
       <TableCell>{result.agent.name}</TableCell>
       <TableCell>
         <PlanStatusBadge status={result.status} />
       </TableCell>
       <TableCell>
-        <ChangesCell result={result} onViewDiff={onViewDiff} />
+        <ChangesCell result={result} />
       </TableCell>
     </TableRow>
   );

packages/trpc/package.json

@@ -32,6 +32,7 @@
     "@trpc/server": "11.0.0-rc.364",
     "better-auth": "^1.4.6",
     "cel-js": "^0.8.2",
+    "diff": "^9.0.0",
     "lodash": "catalog:",
     "superjson": "catalog:",
     "ts-is-present": "catalog:",
@@ -43,6 +44,7 @@
     "@ctrlplane/prettier-config": "workspace:*",
     "@ctrlplane/tsconfig": "workspace:*",
     "@octokit/types": "^13.5.0",
+    "@types/diff": "^8.0.0",
     "@types/lodash": "catalog:",
     "@types/node": "catalog:node22",
     "@types/uuid": "^10.0.0",

packages/trpc/src/routes/deployment-plans.ts

@@ -1,4 +1,6 @@
 import { TRPCError } from "@trpc/server";
+import { diffLines } from "diff";
+import _ from "lodash";
 import { z } from "zod";
 
 import { and, count, desc, eq, inArray, takeFirstOrNull } from "@ctrlplane/db";
@@ -7,6 +9,18 @@ import { Permission } from "@ctrlplane/validators/auth";
 
 import { protectedProcedure, router } from "../trpc.js";
 
+function computeDiffStats(
+  current: string | null,
+  proposed: string | null,
+): { added: number; removed: number } | null {
+  if (current == null || proposed == null) return null;
+  const parts = diffLines(current, proposed);
+  return {
+    added: _.sumBy(parts, (p) => (p.added ? p.count : 0)),
+    removed: _.sumBy(parts, (p) => (p.removed ? p.count : 0)),
+  };
+}
+
 type PlanSummary = {
   total: number;
   computing: number;
@@ -165,6 +179,8 @@ export const deploymentPlansRouter = router({
           hasChanges: schema.deploymentPlanTargetResult.hasChanges,
           message: schema.deploymentPlanTargetResult.message,
           contentHash: schema.deploymentPlanTargetResult.contentHash,
+          current: schema.deploymentPlanTargetResult.current,
+          proposed: schema.deploymentPlanTargetResult.proposed,
           startedAt: schema.deploymentPlanTargetResult.startedAt,
           completedAt: schema.deploymentPlanTargetResult.completedAt,
           dispatchContext: schema.deploymentPlanTargetResult.dispatchContext,
@@ -205,6 +221,7 @@ export const deploymentPlansRouter = router({
             status: r.status,
             hasChanges: r.hasChanges,
             message: r.message,
+            diffStats: computeDiffStats(r.current, r.proposed),
             contentHash: r.contentHash,
             startedAt: r.startedAt,
             completedAt: r.completedAt,