feat(batch-diff): claim ids drillable to /claims?claim=ID

src/components/BatchDiffView.tsx

@@ -5,6 +5,7 @@ import {
   Plus,
   type LucideIcon,
 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
 import { Badge } from "@/components/ui/badge";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -15,6 +16,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { DrillableCell } from "@/components/drill/DrillableCell";
 import { fmt } from "@/lib/format";
 import { cn } from "@/lib/utils";
 import type {
@@ -263,13 +265,28 @@ function RowIndicator({
 // ---------------------------------------------------------------------------
 
 function ClaimIdCell({ id }: { id: string }) {
+  // SP21 Phase 5 Task 5.6: each claim id is drillable to
+  // /claims?claim=ID so the operator can jump straight from a
+  // "Removed from A" or "Changed" row into the ClaimDrawer.
+  // DrillableCell handles e.stopPropagation internally — important
+  // if these rows ever get a row-level onClick. For removed claims
+  // that no longer exist in the DB, the ClaimDrawer's 404 state
+  // takes over (verified in Phase 2 testing).
+  const navigate = useNavigate();
   return (
-    <span
-      className="font-mono text-[12px] tracking-tight"
-      data-testid="diff-claim-id"
+    <DrillableCell
+      onClick={() =>
+        navigate(`/claims?claim=${encodeURIComponent(id)}`)
+      }
+      ariaLabel={`View claim ${id} in detail`}
     >
-      {id}
-    </span>
+      <span
+        className="font-mono text-[12px] tracking-tight"
+        data-testid="diff-claim-id"
+      >
+        {id}
+      </span>
+    </DrillableCell>
   );
 }