Approve tool use

The user has approved the tool use.

src/components/admin/ApprovalTransactionToggle.tsx

@@ -0,0 +1,100 @@
+import { useState, useEffect } from 'react';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { AlertCircle, CheckCircle2, Database } from 'lucide-react';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+/**
+ * Admin toggle for switching between approval flows:
+ * - OLD: Manual rollback in edge function (error-prone)
+ * - NEW: Atomic PostgreSQL transaction (true ACID guarantees)
+ */
+export function ApprovalTransactionToggle() {
+  const [useRpcApproval, setUseRpcApproval] = useState(false);
+
+  useEffect(() => {
+    // Read feature flag from localStorage
+    const enabled = localStorage.getItem('use_rpc_approval') === 'true';
+    setUseRpcApproval(enabled);
+  }, []);
+
+  const handleToggle = (checked: boolean) => {
+    localStorage.setItem('use_rpc_approval', checked ? 'true' : 'false');
+    setUseRpcApproval(checked);
+    
+    // Force page reload to ensure all components pick up the new setting
+    window.location.reload();
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Database className="w-5 h-5" />
+          Approval Transaction Mode
+        </CardTitle>
+        <CardDescription>
+          Control which approval flow is used for moderation
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="rpc-approval-toggle" className="flex-1">
+            <div className="font-medium">Use Atomic Transaction RPC</div>
+            <div className="text-sm text-muted-foreground">
+              {useRpcApproval 
+                ? 'Using process-selective-approval-v2 (NEW)'
+                : 'Using process-selective-approval (OLD)'}
+            </div>
+          </Label>
+          <Switch
+            id="rpc-approval-toggle"
+            checked={useRpcApproval}
+            onCheckedChange={handleToggle}
+          />
+        </div>
+
+        {useRpcApproval ? (
+          <Alert>
+            <CheckCircle2 className="h-4 w-4" />
+            <AlertDescription>
+              <strong>Atomic Transaction Mode Enabled</strong>
+              <ul className="mt-2 space-y-1 text-sm">
+                <li>✅ True ACID transactions</li>
+                <li>✅ Automatic rollback on errors</li>
+                <li>✅ Network-resilient (edge function crash = auto rollback)</li>
+                <li>✅ Zero orphaned entities</li>
+              </ul>
+            </AlertDescription>
+          </Alert>
+        ) : (
+          <Alert>
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>
+              <strong>Legacy Mode Active</strong>
+              <ul className="mt-2 space-y-1 text-sm">
+                <li>⚠️ Manual rollback logic (error-prone)</li>
+                <li>⚠️ Risk of orphaned entities if edge function crashes</li>
+                <li>⚠️ No true atomicity guarantee</li>
+              </ul>
+              <p className="mt-2 font-medium">
+                Consider enabling Atomic Transaction Mode for improved reliability.
+              </p>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <div className="text-xs text-muted-foreground pt-2 border-t">
+          <p><strong>Testing Instructions:</strong></p>
+          <ol className="list-decimal list-inside space-y-1 mt-1">
+            <li>Enable the toggle and approve a submission</li>
+            <li>Check logs for "Using edge function: process-selective-approval-v2"</li>
+            <li>Verify no orphaned entities in the database</li>
+            <li>Test error scenarios (invalid data, network issues)</li>
+          </ol>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}