feat(auth): disable write affordances for viewer role

src/pages/Reconciliation.tsx

@@ -9,6 +9,7 @@ import { ErrorState } from "@/components/ui/error-state";
 import { PageHeader } from "@/components/PageHeader";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { RoleGate } from "@/auth/RoleGate";
 
 /**
  * Two-column manual reconciliation surface. The operator picks one row from
@@ -191,14 +192,22 @@ export function ReconciliationPage() {
       </div>
 
       <div className="flex items-center gap-2 flex-wrap">
-        <Button
-          onClick={handleMatch}
-          disabled={!selectedClaim || !selectedRemit || match.isPending}
-          className="min-h-[44px] sm:min-h-0"
-        >
-          <GitMerge className="h-3.5 w-3.5 mr-1.5" />
-          Match selected
-        </Button>
+        {/* Match selected is the only true write affordance on this
+            page — it transitions a claim from "submitted" /
+            "rejected" to "paid" / "partial" / "denied" / "received"
+            via `record_manual_match`. Viewers can still pick rows
+            and see the selection chrome, but the button itself is
+            disabled + tooltip-explained for them. */}
+        <RoleGate allow={["admin", "user"]}>
+          <Button
+            onClick={handleMatch}
+            disabled={!selectedClaim || !selectedRemit || match.isPending}
+            className="min-h-[44px] sm:min-h-0"
+          >
+            <GitMerge className="h-3.5 w-3.5 mr-1.5" />
+            Match selected
+          </Button>
+        </RoleGate>
         <Button
           variant="outline"
           onClick={handleClear}