Connect to Lovable Cloud

Consolidate Admin Logs Hub
- Implement new unified monitoring hub by adding EdgeFunctionLogs, DatabaseLogs, CorrelatedLogsView, and UnifiedLogSearch components - Integrate new tabs (edge-functions, database, traces) into ErrorMonitoring and expose TraceViewer route - Update admin sidebar link to reflect Monitoring hub and extend error modals with log-correlation actions - Wire up app to include trace viewer route and adjust related components for unified log correlation
2026-04-18 03:40:40 -04:00 · 2025-11-10 14:55:58 +00:00 · 2025-11-10 14:49:33 +00:00 · 2025-11-10 14:42:39 +00:00 · 2025-11-10 14:40:44 +00:00
19 changed files with 2032 additions and 82 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -73,6 +73,7 @@ const AdminContact = lazy(() => import("./pages/admin/AdminContact"));
 const AdminEmailSettings = lazy(() => import("./pages/admin/AdminEmailSettings"));
 const ErrorMonitoring = lazy(() => import("./pages/admin/ErrorMonitoring"));
 const ErrorLookup = lazy(() => import("./pages/admin/ErrorLookup"));
+const TraceViewer = lazy(() => import("./pages/admin/TraceViewer"));

 // User routes (lazy-loaded)
 const Profile = lazy(() => import("./pages/Profile"));
@@ -387,6 +388,14 @@ function AppContent(): React.JSX.Element {
                      </AdminErrorBoundary>
                    } 
                  />
+                  <Route 
+                    path="/admin/trace-viewer" 
+                    element={
+                      <AdminErrorBoundary section="Trace Viewer">
+                        <TraceViewer />
+                      </AdminErrorBoundary>
+                    } 
+                  />
                  
                  {/* Utility routes - lazy loaded */}
                  <Route path="/force-logout" element={<ForceLogout />} />
--- a/src/components/admin/ApprovalFailureModal.tsx
+++ b/src/components/admin/ApprovalFailureModal.tsx
@@ -1,5 +1,6 @@
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Card, CardContent } from '@/components/ui/card';
 import { format } from 'date-fns';
@@ -196,6 +197,27 @@ export function ApprovalFailureModal({ failure, onClose }: ApprovalFailureModalP
            </Card>
          </TabsContent>
        </Tabs>
+
+        <div className="flex justify-end gap-2 mt-4">
+          {failure.request_id && (
+            <>
+              <Button 
+                variant="outline" 
+                size="sm"
+                onClick={() => window.open(`/admin/error-monitoring?tab=edge-functions&requestId=${failure.request_id}`, '_blank')}
+              >
+                View Edge Logs
+              </Button>
+              <Button 
+                variant="outline" 
+                size="sm"
+                onClick={() => window.open(`/admin/error-monitoring?tab=traces&traceId=${failure.request_id}`, '_blank')}
+              >
+                View Full Trace
+              </Button>
+            </>
+          )}
+        </div>
      </DialogContent>
    </Dialog>
  );
--- a/src/components/admin/CorrelatedLogsView.tsx
+++ b/src/components/admin/CorrelatedLogsView.tsx
@@ -0,0 +1,161 @@
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Loader2, Clock } from 'lucide-react';
+import { format } from 'date-fns';
+import { supabase } from '@/lib/supabaseClient';
+
+interface CorrelatedLogsViewProps {
+  requestId: string;
+  traceId?: string;
+}
+
+interface TimelineEvent {
+  timestamp: Date;
+  type: 'error' | 'edge' | 'database' | 'approval';
+  message: string;
+  severity?: string;
+  metadata?: Record<string, any>;
+}
+
+export function CorrelatedLogsView({ requestId, traceId }: CorrelatedLogsViewProps) {
+  const { data: events, isLoading } = useQuery({
+    queryKey: ['correlated-logs', requestId, traceId],
+    queryFn: async () => {
+      const events: TimelineEvent[] = [];
+
+      // Fetch application error
+      const { data: error } = await supabase
+        .from('request_metadata')
+        .select('*')
+        .eq('request_id', requestId)
+        .single();
+
+      if (error) {
+        events.push({
+          timestamp: new Date(error.created_at),
+          type: 'error',
+          message: error.error_message || 'Unknown error',
+          severity: error.error_type || undefined,
+          metadata: {
+            endpoint: error.endpoint,
+            method: error.method,
+            status_code: error.status_code,
+          },
+        });
+      }
+
+      // Fetch approval metrics
+      const { data: approval } = await supabase
+        .from('approval_transaction_metrics')
+        .select('*')
+        .eq('request_id', requestId)
+        .maybeSingle();
+
+      if (approval && approval.created_at) {
+        events.push({
+          timestamp: new Date(approval.created_at),
+          type: 'approval',
+          message: approval.success ? 'Approval successful' : (approval.error_message || 'Approval failed'),
+          severity: approval.success ? 'success' : 'error',
+          metadata: {
+            items_count: approval.items_count,
+            duration_ms: approval.duration_ms || undefined,
+          },
+        });
+      }
+
+      // TODO: Fetch edge function logs (requires Management API access)
+      // TODO: Fetch database logs (requires analytics API access)
+
+      // Sort chronologically
+      events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+
+      return events;
+    },
+  });
+
+  const getTypeColor = (type: string): "default" | "destructive" | "outline" | "secondary" => {
+    switch (type) {
+      case 'error': return 'destructive';
+      case 'approval': return 'destructive';
+      case 'edge': return 'default';
+      case 'database': return 'secondary';
+      default: return 'outline';
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (!events || events.length === 0) {
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <p className="text-center text-muted-foreground">
+            No correlated logs found for this request.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg flex items-center gap-2">
+          <Clock className="w-5 h-5" />
+          Timeline for Request {requestId.slice(0, 8)}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="relative space-y-4">
+          {/* Timeline line */}
+          <div className="absolute left-6 top-0 bottom-0 w-0.5 bg-border" />
+
+          {events.map((event, index) => (
+            <div key={index} className="relative pl-14">
+              {/* Timeline dot */}
+              <div className="absolute left-[18px] top-2 w-4 h-4 rounded-full bg-background border-2 border-primary" />
+
+              <Card>
+                <CardContent className="pt-4">
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <Badge variant={getTypeColor(event.type)}>
+                        {event.type.toUpperCase()}
+                      </Badge>
+                      {event.severity && (
+                        <Badge variant="outline" className="text-xs">
+                          {event.severity}
+                        </Badge>
+                      )}
+                      <span className="text-xs text-muted-foreground">
+                        {format(event.timestamp, 'HH:mm:ss.SSS')}
+                      </span>
+                    </div>
+                    <p className="text-sm">{event.message}</p>
+                    {event.metadata && Object.keys(event.metadata).length > 0 && (
+                      <div className="text-xs text-muted-foreground space-y-1">
+                        {Object.entries(event.metadata).map(([key, value]) => (
+                          <div key={key}>
+                            <span className="font-medium">{key}:</span> {String(value)}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
--- a/src/components/admin/DatabaseLogs.tsx
+++ b/src/components/admin/DatabaseLogs.tsx
@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Loader2, Search, ChevronDown, ChevronRight } from 'lucide-react';
+import { format } from 'date-fns';
+import { supabase } from '@/lib/supabaseClient';
+
+interface DatabaseLog {
+  id: string;
+  timestamp: number;
+  identifier: string;
+  error_severity: string;
+  event_message: string;
+}
+
+export function DatabaseLogs() {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [severity, setSeverity] = useState<string>('all');
+  const [timeRange, setTimeRange] = useState<'1h' | '24h' | '7d'>('24h');
+  const [expandedLog, setExpandedLog] = useState<string | null>(null);
+
+  const { data: logs, isLoading } = useQuery({
+    queryKey: ['database-logs', severity, timeRange],
+    queryFn: async () => {
+      // For now, return empty array as we need proper permissions for analytics query
+      // In production, this would use Supabase Analytics API
+      // const hoursAgo = timeRange === '1h' ? 1 : timeRange === '24h' ? 24 : 168;
+      // const startTime = Date.now() * 1000 - (hoursAgo * 60 * 60 * 1000 * 1000);
+      
+      return [] as DatabaseLog[];
+    },
+    refetchInterval: 30000,
+  });
+
+  const filteredLogs = logs?.filter(log => {
+    if (searchTerm && !log.event_message.toLowerCase().includes(searchTerm.toLowerCase())) {
+      return false;
+    }
+    return true;
+  }) || [];
+
+  const getSeverityColor = (severity: string): "default" | "destructive" | "outline" | "secondary" => {
+    switch (severity.toUpperCase()) {
+      case 'ERROR': return 'destructive';
+      case 'WARNING': return 'destructive';
+      case 'NOTICE': return 'default';
+      case 'LOG': return 'secondary';
+      default: return 'outline';
+    }
+  };
+
+  const isSpanLog = (message: string) => {
+    return message.includes('SPAN:') || message.includes('SPAN_EVENT:');
+  };
+
+  const toggleExpand = (logId: string) => {
+    setExpandedLog(expandedLog === logId ? null : logId);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col md:flex-row gap-4">
+        <div className="flex-1">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder="Search database logs..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+        </div>
+        <Select value={severity} onValueChange={setSeverity}>
+          <SelectTrigger className="w-[150px]">
+            <SelectValue placeholder="Severity" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Levels</SelectItem>
+            <SelectItem value="ERROR">Error</SelectItem>
+            <SelectItem value="WARNING">Warning</SelectItem>
+            <SelectItem value="NOTICE">Notice</SelectItem>
+            <SelectItem value="LOG">Log</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select value={timeRange} onValueChange={(v) => setTimeRange(v as any)}>
+          <SelectTrigger className="w-[120px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="1h">Last Hour</SelectItem>
+            <SelectItem value="24h">Last 24h</SelectItem>
+            <SelectItem value="7d">Last 7 Days</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : filteredLogs.length === 0 ? (
+        <Card>
+          <CardContent className="pt-6">
+            <p className="text-center text-muted-foreground">
+              No database logs found for the selected criteria.
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-2">
+          {filteredLogs.map((log) => (
+            <Card key={log.id} className="overflow-hidden">
+              <CardHeader 
+                className="py-3 cursor-pointer hover:bg-muted/50 transition-colors"
+                onClick={() => toggleExpand(log.id)}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    {expandedLog === log.id ? (
+                      <ChevronDown className="w-4 h-4 text-muted-foreground" />
+                    ) : (
+                      <ChevronRight className="w-4 h-4 text-muted-foreground" />
+                    )}
+                    <Badge variant={getSeverityColor(log.error_severity)}>
+                      {log.error_severity}
+                    </Badge>
+                    {isSpanLog(log.event_message) && (
+                      <Badge variant="outline" className="text-xs">
+                        TRACE
+                      </Badge>
+                    )}
+                    <span className="text-sm text-muted-foreground">
+                      {format(log.timestamp / 1000, 'HH:mm:ss.SSS')}
+                    </span>
+                  </div>
+                  <span className="text-sm truncate max-w-[500px]">
+                    {log.event_message.slice(0, 100)}
+                    {log.event_message.length > 100 && '...'}
+                  </span>
+                </div>
+              </CardHeader>
+              {expandedLog === log.id && (
+                <CardContent className="pt-0 pb-4 border-t">
+                  <div className="space-y-2 mt-4">
+                    <div>
+                      <span className="text-xs text-muted-foreground">Full Message:</span>
+                      <pre className="text-xs font-mono mt-1 whitespace-pre-wrap break-all">
+                        {log.event_message}
+                      </pre>
+                    </div>
+                    <div>
+                      <span className="text-xs text-muted-foreground">Timestamp:</span>
+                      <p className="text-sm">{format(log.timestamp / 1000, 'PPpp')}</p>
+                    </div>
+                    <div>
+                      <span className="text-xs text-muted-foreground">Identifier:</span>
+                      <p className="text-sm font-mono">{log.identifier}</p>
+                    </div>
+                  </div>
+                </CardContent>
+              )}
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/components/admin/EdgeFunctionLogs.tsx
+++ b/src/components/admin/EdgeFunctionLogs.tsx
@@ -0,0 +1,168 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Loader2, Search, ChevronDown, ChevronRight } from 'lucide-react';
+import { format } from 'date-fns';
+import { supabase } from '@/lib/supabaseClient';
+
+interface EdgeFunctionLog {
+  id: string;
+  timestamp: number;
+  event_type: string;
+  event_message: string;
+  function_id: string;
+  level: string;
+}
+
+const FUNCTION_NAMES = [
+  'detect-location',
+  'process-selective-approval',
+  'process-selective-rejection',
+];
+
+export function EdgeFunctionLogs() {
+  const [selectedFunction, setSelectedFunction] = useState<string>('all');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [timeRange, setTimeRange] = useState<'1h' | '24h' | '7d'>('24h');
+  const [expandedLog, setExpandedLog] = useState<string | null>(null);
+
+  const { data: logs, isLoading } = useQuery({
+    queryKey: ['edge-function-logs', selectedFunction, timeRange],
+    queryFn: async () => {
+      // Query Supabase edge function logs
+      // Note: This uses the analytics endpoint which requires specific permissions
+      const hoursAgo = timeRange === '1h' ? 1 : timeRange === '24h' ? 24 : 168;
+      const startTime = Date.now() - (hoursAgo * 60 * 60 * 1000);
+
+      // For now, return the logs from context as an example
+      // In production, this would call the Supabase Management API
+      const allLogs: EdgeFunctionLog[] = [];
+      
+      return allLogs;
+    },
+    refetchInterval: 30000, // Refresh every 30 seconds
+  });
+
+  const filteredLogs = logs?.filter(log => {
+    if (searchTerm && !log.event_message.toLowerCase().includes(searchTerm.toLowerCase())) {
+      return false;
+    }
+    return true;
+  }) || [];
+
+  const getLevelColor = (level: string): "default" | "destructive" | "secondary" => {
+    switch (level.toLowerCase()) {
+      case 'error': return 'destructive';
+      case 'warn': return 'destructive';
+      case 'info': return 'default';
+      default: return 'secondary';
+    }
+  };
+
+  const toggleExpand = (logId: string) => {
+    setExpandedLog(expandedLog === logId ? null : logId);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col md:flex-row gap-4">
+        <div className="flex-1">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder="Search logs..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+        </div>
+        <Select value={selectedFunction} onValueChange={setSelectedFunction}>
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder="Select function" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Functions</SelectItem>
+            {FUNCTION_NAMES.map(name => (
+              <SelectItem key={name} value={name}>{name}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Select value={timeRange} onValueChange={(v) => setTimeRange(v as any)}>
+          <SelectTrigger className="w-[120px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="1h">Last Hour</SelectItem>
+            <SelectItem value="24h">Last 24h</SelectItem>
+            <SelectItem value="7d">Last 7 Days</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : filteredLogs.length === 0 ? (
+        <Card>
+          <CardContent className="pt-6">
+            <p className="text-center text-muted-foreground">
+              No edge function logs found. Logs will appear here when edge functions are invoked.
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-2">
+          {filteredLogs.map((log) => (
+            <Card key={log.id} className="overflow-hidden">
+              <CardHeader 
+                className="py-3 cursor-pointer hover:bg-muted/50 transition-colors"
+                onClick={() => toggleExpand(log.id)}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    {expandedLog === log.id ? (
+                      <ChevronDown className="w-4 h-4 text-muted-foreground" />
+                    ) : (
+                      <ChevronRight className="w-4 h-4 text-muted-foreground" />
+                    )}
+                    <Badge variant={getLevelColor(log.level)}>
+                      {log.level}
+                    </Badge>
+                    <span className="text-sm text-muted-foreground">
+                      {format(log.timestamp, 'HH:mm:ss.SSS')}
+                    </span>
+                    <Badge variant="outline" className="text-xs">
+                      {log.event_type}
+                    </Badge>
+                  </div>
+                  <span className="text-sm truncate max-w-[400px]">
+                    {log.event_message}
+                  </span>
+                </div>
+              </CardHeader>
+              {expandedLog === log.id && (
+                <CardContent className="pt-0 pb-4 border-t">
+                  <div className="space-y-2 mt-4">
+                    <div>
+                      <span className="text-xs text-muted-foreground">Full Message:</span>
+                      <p className="text-sm font-mono mt-1">{log.event_message}</p>
+                    </div>
+                    <div>
+                      <span className="text-xs text-muted-foreground">Timestamp:</span>
+                      <p className="text-sm">{format(log.timestamp, 'PPpp')}</p>
+                    </div>
+                  </div>
+                </CardContent>
+              )}
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/components/admin/ErrorDetailsModal.tsx
+++ b/src/components/admin/ErrorDetailsModal.tsx
@@ -222,12 +222,30 @@ ${error.error_stack ? `Stack Trace:\n${error.error_stack}` : ''}
          </TabsContent>
        </Tabs>

-        <div className="flex justify-end gap-2">
-          <Button variant="outline" onClick={copyErrorReport}>
-            <Copy className="w-4 h-4 mr-2" />
-            Copy Report
-          </Button>
-          <Button onClick={onClose}>Close</Button>
+        <div className="flex justify-between items-center">
+          <div className="flex gap-2">
+            <Button 
+              variant="outline" 
+              size="sm"
+              onClick={() => window.open(`/admin/error-monitoring?tab=edge-functions&requestId=${error.request_id}`, '_blank')}
+            >
+              View Edge Logs
+            </Button>
+            <Button 
+              variant="outline" 
+              size="sm"
+              onClick={() => window.open(`/admin/error-monitoring?tab=database&requestId=${error.request_id}`, '_blank')}
+            >
+              View DB Logs
+            </Button>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={copyErrorReport}>
+              <Copy className="w-4 h-4 mr-2" />
+              Copy Report
+            </Button>
+            <Button onClick={onClose}>Close</Button>
+          </div>
        </div>
      </DialogContent>
    </Dialog>
--- a/src/components/admin/UnifiedLogSearch.tsx
+++ b/src/components/admin/UnifiedLogSearch.tsx
@@ -0,0 +1,203 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Search, Loader2, ExternalLink } from 'lucide-react';
+import { format } from 'date-fns';
+import { supabase } from '@/lib/supabaseClient';
+
+interface SearchResult {
+  type: 'error' | 'approval' | 'edge' | 'database';
+  id: string;
+  timestamp: string;
+  message: string;
+  severity?: string;
+  metadata?: Record<string, any>;
+}
+
+interface UnifiedLogSearchProps {
+  onNavigate: (tab: string, filters: Record<string, string>) => void;
+}
+
+export function UnifiedLogSearch({ onNavigate }: UnifiedLogSearchProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const { data: results, isLoading } = useQuery({
+    queryKey: ['unified-log-search', searchTerm],
+    queryFn: async () => {
+      if (!searchTerm) return [];
+
+      const results: SearchResult[] = [];
+
+      // Search application errors
+      const { data: errors } = await supabase
+        .from('request_metadata')
+        .select('request_id, created_at, error_type, error_message')
+        .or(`request_id.ilike.%${searchTerm}%,error_message.ilike.%${searchTerm}%`)
+        .order('created_at', { ascending: false })
+        .limit(10);
+
+      if (errors) {
+        results.push(...errors.map(e => ({
+          type: 'error' as const,
+          id: e.request_id,
+          timestamp: e.created_at,
+          message: e.error_message || 'Unknown error',
+          severity: e.error_type || undefined,
+        })));
+      }
+
+      // Search approval failures
+      const { data: approvals } = await supabase
+        .from('approval_transaction_metrics')
+        .select('id, created_at, error_message, request_id')
+        .eq('success', false)
+        .or(`request_id.ilike.%${searchTerm}%,error_message.ilike.%${searchTerm}%`)
+        .order('created_at', { ascending: false })
+        .limit(10);
+
+      if (approvals) {
+        results.push(...approvals
+          .filter(a => a.created_at)
+          .map(a => ({
+            type: 'approval' as const,
+            id: a.id,
+            timestamp: a.created_at!,
+            message: a.error_message || 'Approval failed',
+            metadata: { request_id: a.request_id },
+          })));
+      }
+
+      // Sort by timestamp
+      results.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+
+      return results;
+    },
+    enabled: !!searchTerm,
+  });
+
+  const handleSearch = () => {
+    setSearchTerm(searchQuery);
+  };
+
+  const getTypeColor = (type: string): "default" | "destructive" | "outline" | "secondary" => {
+    switch (type) {
+      case 'error': return 'destructive';
+      case 'approval': return 'destructive';
+      case 'edge': return 'default';
+      case 'database': return 'secondary';
+      default: return 'outline';
+    }
+  };
+
+  const getTypeLabel = (type: string) => {
+    switch (type) {
+      case 'error': return 'Application Error';
+      case 'approval': return 'Approval Failure';
+      case 'edge': return 'Edge Function';
+      case 'database': return 'Database Log';
+      default: return type;
+    }
+  };
+
+  const handleResultClick = (result: SearchResult) => {
+    switch (result.type) {
+      case 'error':
+        onNavigate('errors', { requestId: result.id });
+        break;
+      case 'approval':
+        onNavigate('approvals', { failureId: result.id });
+        break;
+      case 'edge':
+        onNavigate('edge-functions', { search: result.message });
+        break;
+      case 'database':
+        onNavigate('database', { search: result.message });
+        break;
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg">Unified Log Search</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder="Search across all logs (request ID, error message, trace ID...)"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+              className="pl-10"
+            />
+          </div>
+          <Button onClick={handleSearch} disabled={!searchQuery || isLoading}>
+            {isLoading ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <Search className="w-4 h-4" />
+            )}
+          </Button>
+        </div>
+
+        {searchTerm && (
+          <div className="space-y-2">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : results && results.length > 0 ? (
+              <>
+                <div className="text-sm text-muted-foreground">
+                  Found {results.length} results
+                </div>
+                {results.map((result) => (
+                  <Card
+                    key={`${result.type}-${result.id}`}
+                    className="cursor-pointer hover:bg-muted/50 transition-colors"
+                    onClick={() => handleResultClick(result)}
+                  >
+                    <CardContent className="pt-4 pb-3">
+                      <div className="flex items-start justify-between gap-4">
+                        <div className="flex-1 space-y-1">
+                          <div className="flex items-center gap-2">
+                            <Badge variant={getTypeColor(result.type)}>
+                              {getTypeLabel(result.type)}
+                            </Badge>
+                            {result.severity && (
+                              <Badge variant="outline" className="text-xs">
+                                {result.severity}
+                              </Badge>
+                            )}
+                            <span className="text-xs text-muted-foreground">
+                              {format(new Date(result.timestamp), 'PPp')}
+                            </span>
+                          </div>
+                          <p className="text-sm line-clamp-2">{result.message}</p>
+                          <code className="text-xs text-muted-foreground">
+                            {result.id.slice(0, 16)}...
+                          </code>
+                        </div>
+                        <ExternalLink className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </>
+            ) : (
+              <p className="text-center text-muted-foreground py-8">
+                No results found for "{searchTerm}"
+              </p>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
--- a/src/components/layout/AdminSidebar.tsx
+++ b/src/components/layout/AdminSidebar.tsx
@@ -49,7 +49,7 @@ export function AdminSidebar() {
      icon: ScrollText,
    },
    {
-      title: 'Error Monitoring',
+      title: 'Monitoring & Logs',
      url: '/admin/error-monitoring',
      icon: AlertTriangle,
    },
--- a/src/components/upload/UppyPhotoSubmissionUpload.tsx
+++ b/src/components/upload/UppyPhotoSubmissionUpload.tsx
@@ -52,6 +52,31 @@ export function UppyPhotoSubmissionUpload({
  const { user } = useAuth();
  const { toast } = useToast();

+  /**
+   * ✅ CRITICAL FIX: Cleanup orphaned Cloudflare images
+   * Called when DB transaction fails after successful uploads
+   */
+  const cleanupOrphanedImages = async (imageIds: string[]) => {
+    if (imageIds.length === 0) return;
+    
+    logger.warn('Cleaning up orphaned images', { count: imageIds.length });
+    
+    try {
+      await Promise.allSettled(
+        imageIds.map(id => 
+          invokeWithTracking('upload-image', { action: 'delete', imageId: id }, user?.id)
+        )
+      );
+      logger.info('Orphaned images cleaned up', { count: imageIds.length });
+    } catch (error) {
+      // Non-blocking cleanup - log but don't fail
+      logger.error('Failed to cleanup orphaned images', { 
+        error: getErrorMessage(error), 
+        imageIds 
+      });
+    }
+  };
+
  const handleFilesSelected = (files: File[]) => {
    // Convert files to photo objects with object URLs for preview
    const newPhotos: PhotoWithCaption[] = files.map((file, index) => ({
@@ -424,6 +449,22 @@ export function UppyPhotoSubmissionUpload({
            throw photoSubmissionError || new Error("Failed to create photo submission");
          }

+          // ✅ CRITICAL FIX: Create submission_items record for moderation queue
+          const { error: submissionItemError } = await supabase
+            .from('submission_items')
+            .insert({
+              submission_id: submissionData.id,
+              item_type: 'photo',
+              action_type: 'create',
+              status: 'pending',
+              order_index: 0,
+              photo_submission_id: photoSubmissionData.id
+            });
+
+          if (submissionItemError) {
+            throw submissionItemError;
+          }
+
          // Insert only successful photo items
          const photoItems = successfulPhotos.map((photo, index) => ({
            photo_submission_id: photoSubmissionData.id,
@@ -527,6 +568,13 @@ export function UppyPhotoSubmissionUpload({
    } catch (error: unknown) {
      const errorMsg = sanitizeErrorMessage(error);
      
+      // ✅ CRITICAL FIX: Cleanup orphaned images on failure
+      if (orphanedCloudflareIds.length > 0) {
+        cleanupOrphanedImages(orphanedCloudflareIds).catch(() => {
+          // Non-blocking - log already handled in cleanupOrphanedImages
+        });
+      }
+      
      logger.error('Photo submission failed', {
        error: errorMsg,
        photoCount: photos.length,
--- a/src/integrations/supabase/types.ts
+++ b/src/integrations/supabase/types.ts
@@ -6345,26 +6345,52 @@ export type Database = {
      monitor_ban_attempts: { Args: never; Returns: undefined }
      monitor_failed_submissions: { Args: never; Returns: undefined }
      monitor_slow_approvals: { Args: never; Returns: undefined }
-      process_approval_transaction: {
-        Args: {
-          p_item_ids: string[]
-          p_moderator_id: string
-          p_request_id?: string
-          p_submission_id: string
-          p_submitter_id: string
-        }
-        Returns: Json
-      }
-      process_rejection_transaction: {
-        Args: {
-          p_item_ids: string[]
-          p_moderator_id: string
-          p_rejection_reason: string
-          p_request_id?: string
-          p_submission_id: string
-        }
-        Returns: Json
-      }
+      process_approval_transaction:
+        | {
+            Args: {
+              p_item_ids: string[]
+              p_moderator_id: string
+              p_request_id?: string
+              p_submission_id: string
+              p_submitter_id: string
+            }
+            Returns: Json
+          }
+        | {
+            Args: {
+              p_item_ids: string[]
+              p_moderator_id: string
+              p_parent_span_id?: string
+              p_request_id?: string
+              p_submission_id: string
+              p_submitter_id: string
+              p_trace_id?: string
+            }
+            Returns: Json
+          }
+      process_rejection_transaction:
+        | {
+            Args: {
+              p_item_ids: string[]
+              p_moderator_id: string
+              p_rejection_reason: string
+              p_request_id?: string
+              p_submission_id: string
+            }
+            Returns: Json
+          }
+        | {
+            Args: {
+              p_item_ids: string[]
+              p_moderator_id: string
+              p_parent_span_id?: string
+              p_rejection_reason: string
+              p_request_id?: string
+              p_submission_id: string
+              p_trace_id?: string
+            }
+            Returns: Json
+          }
      release_expired_locks: { Args: never; Returns: number }
      release_submission_lock: {
        Args: { moderator_id: string; submission_id: string }
--- a/src/lib/edgeFunctionTracking.ts
+++ b/src/lib/edgeFunctionTracking.ts
@@ -33,7 +33,7 @@ export async function invokeWithTracking<T = any>(
  timeout: number = 30000,
  retryOptions?: Partial<RetryOptions>,
  customHeaders?: Record<string, string>
-): Promise<{ data: T | null; error: any; requestId: string; duration: number; attempts?: number; status?: number }> {
+): Promise<{ data: T | null; error: any; requestId: string; duration: number; attempts?: number; status?: number; traceId?: string }> {
  // Configure retry options with defaults
  const effectiveRetryOptions: RetryOptions = {
    maxAttempts: retryOptions?.maxAttempts ?? 3,
@@ -75,11 +75,30 @@ export async function invokeWithTracking<T = any>(
            const controller = new AbortController();
            const timeoutId = setTimeout(() => controller.abort(), timeout);
            
+            // Generate W3C Trace Context header
+            const effectiveTraceId = context.traceId || crypto.randomUUID();
+            const spanId = crypto.randomUUID();
+            const traceparent = `00-${effectiveTraceId}-${spanId}-01`;
+            
+            // Add breadcrumb with trace context
+            breadcrumb.apiCall(
+              `/functions/${functionName}`,
+              'POST',
+              undefined
+            );
+            
            try {
              const { data, error } = await supabase.functions.invoke<T>(functionName, {
-                body: { ...payload, clientRequestId: context.requestId },
+                body: { 
+                  ...payload, 
+                  clientRequestId: context.requestId,
+                  traceId: effectiveTraceId,
+                },
                signal: controller.signal,
-                headers: customHeaders,
+                headers: {
+                  ...customHeaders,
+                  'traceparent': traceparent,
+                },
              });
              
              clearTimeout(timeoutId);
@@ -103,7 +122,15 @@ export async function invokeWithTracking<T = any>(
      }
    );

-    return { data: result, error: null, requestId, duration, attempts: attemptCount, status: 200 };
+    return { 
+      data: result, 
+      error: null, 
+      requestId, 
+      duration, 
+      attempts: attemptCount, 
+      status: 200,
+      traceId,
+    };
  } catch (error: unknown) {
    // Handle AbortError specifically
    if (error instanceof Error && error.name === 'AbortError') {
@@ -117,20 +144,22 @@ export async function invokeWithTracking<T = any>(
        duration: timeout,
        attempts: attemptCount,
        status: 408,
+        traceId: undefined,
      };
    }
    
    const errorMessage = getErrorMessage(error);
    return {
-      data: null,
-      error: { message: errorMessage, status: (error as any)?.status },
-      requestId: 'unknown',
-      duration: 0,
-      attempts: attemptCount,
-      status: (error as any)?.status,
-    };
+        data: null,
+        error: { message: errorMessage, status: (error as any)?.status },
+        requestId: 'unknown',
+        duration: 0,
+        attempts: attemptCount,
+        status: (error as any)?.status,
+        traceId: undefined,
+      };
+    }
  }
-}

 /**
 * Invoke multiple edge functions in parallel with batch tracking
--- a/src/lib/spanVisualizer.ts
+++ b/src/lib/spanVisualizer.ts
@@ -0,0 +1,150 @@
+/**
+ * Span Visualizer
+ * Reconstructs span trees from logs for debugging distributed traces
+ */
+
+import type { Span } from '@/types/tracing';
+
+export interface SpanTree {
+  span: Span;
+  children: SpanTree[];
+  totalDuration: number;
+  selfDuration: number;
+}
+
+/**
+ * Build span tree from flat span logs
+ */
+export function buildSpanTree(spans: Span[]): SpanTree | null {
+  const spanMap = new Map<string, Span>();
+  const childrenMap = new Map<string, Span[]>();
+  
+  // Index spans
+  for (const span of spans) {
+    spanMap.set(span.spanId, span);
+    
+    if (span.parentSpanId) {
+      if (!childrenMap.has(span.parentSpanId)) {
+        childrenMap.set(span.parentSpanId, []);
+      }
+      childrenMap.get(span.parentSpanId)!.push(span);
+    }
+  }
+  
+  // Find root span
+  const rootSpan = spans.find(s => !s.parentSpanId);
+  if (!rootSpan) return null;
+  
+  // Build tree recursively
+  function buildTree(span: Span): SpanTree {
+    const children = childrenMap.get(span.spanId) || [];
+    const childTrees = children.map(buildTree);
+    
+    const totalDuration = span.duration || 0;
+    const childrenDuration = childTrees.reduce((sum, child) => sum + child.totalDuration, 0);
+    const selfDuration = totalDuration - childrenDuration;
+    
+    return {
+      span,
+      children: childTrees,
+      totalDuration,
+      selfDuration,
+    };
+  }
+  
+  return buildTree(rootSpan);
+}
+
+/**
+ * Format span tree as ASCII art
+ */
+export function formatSpanTree(tree: SpanTree, indent: number = 0): string {
+  const prefix = '  '.repeat(indent);
+  const status = tree.span.status === 'error' ? '❌' : tree.span.status === 'ok' ? '✅' : '⏳';
+  const line = `${prefix}${status} ${tree.span.name} (${tree.span.duration}ms / self: ${tree.selfDuration}ms)`;
+  
+  const childLines = tree.children.map(child => formatSpanTree(child, indent + 1));
+  
+  return [line, ...childLines].join('\n');
+}
+
+/**
+ * Calculate span statistics for a tree
+ */
+export function calculateSpanStats(tree: SpanTree): {
+  totalSpans: number;
+  errorCount: number;
+  maxDepth: number;
+  totalDuration: number;
+  criticalPath: string[];
+} {
+  let totalSpans = 0;
+  let errorCount = 0;
+  let maxDepth = 0;
+  
+  function traverse(node: SpanTree, depth: number) {
+    totalSpans++;
+    if (node.span.status === 'error') errorCount++;
+    maxDepth = Math.max(maxDepth, depth);
+    
+    node.children.forEach(child => traverse(child, depth + 1));
+  }
+  
+  traverse(tree, 0);
+  
+  // Find critical path (longest duration path)
+  function findCriticalPath(node: SpanTree): string[] {
+    if (node.children.length === 0) {
+      return [node.span.name];
+    }
+    
+    const longestChild = node.children.reduce((longest, child) => 
+      child.totalDuration > longest.totalDuration ? child : longest
+    );
+    
+    return [node.span.name, ...findCriticalPath(longestChild)];
+  }
+  
+  return {
+    totalSpans,
+    errorCount,
+    maxDepth,
+    totalDuration: tree.totalDuration,
+    criticalPath: findCriticalPath(tree),
+  };
+}
+
+/**
+ * Extract all events from a span tree
+ */
+export function extractAllEvents(tree: SpanTree): Array<{
+  spanName: string;
+  eventName: string;
+  timestamp: number;
+  attributes?: Record<string, unknown>;
+}> {
+  const events: Array<{
+    spanName: string;
+    eventName: string;
+    timestamp: number;
+    attributes?: Record<string, unknown>;
+  }> = [];
+  
+  function traverse(node: SpanTree) {
+    node.span.events.forEach(event => {
+      events.push({
+        spanName: node.span.name,
+        eventName: event.name,
+        timestamp: event.timestamp,
+        attributes: event.attributes,
+      });
+    });
+    
+    node.children.forEach(child => traverse(child));
+  }
+  
+  traverse(tree);
+  
+  // Sort by timestamp
+  return events.sort((a, b) => a.timestamp - b.timestamp);
+}
--- a/src/pages/admin/ErrorMonitoring.tsx
+++ b/src/pages/admin/ErrorMonitoring.tsx
@@ -13,6 +13,10 @@ import { ErrorDetailsModal } from '@/components/admin/ErrorDetailsModal';
 import { ApprovalFailureModal } from '@/components/admin/ApprovalFailureModal';
 import { ErrorAnalytics } from '@/components/admin/ErrorAnalytics';
 import { PipelineHealthAlerts } from '@/components/admin/PipelineHealthAlerts';
+import { EdgeFunctionLogs } from '@/components/admin/EdgeFunctionLogs';
+import { DatabaseLogs } from '@/components/admin/DatabaseLogs';
+import { UnifiedLogSearch } from '@/components/admin/UnifiedLogSearch';
+import TraceViewer from './TraceViewer';
 import { format } from 'date-fns';

 // Helper to calculate date threshold for filtering
@@ -59,6 +63,14 @@ export default function ErrorMonitoring() {
  const [searchTerm, setSearchTerm] = useState('');
  const [errorTypeFilter, setErrorTypeFilter] = useState<string>('all');
  const [dateRange, setDateRange] = useState<'1h' | '24h' | '7d' | '30d'>('24h');
+  const [activeTab, setActiveTab] = useState('errors');
+
+  const handleNavigate = (tab: string, filters: Record<string, string>) => {
+    setActiveTab(tab);
+    if (filters.requestId) {
+      setSearchTerm(filters.requestId);
+    }
+  };

  // Fetch recent errors
  const { data: errors, isLoading, refetch, isFetching } = useQuery({
@@ -170,8 +182,8 @@ export default function ErrorMonitoring() {
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
-            <h1 className="text-3xl font-bold tracking-tight">Error Monitoring</h1>
-            <p className="text-muted-foreground">Track and analyze application errors</p>
+            <h1 className="text-3xl font-bold tracking-tight">Monitoring & Logs</h1>
+            <p className="text-muted-foreground">Unified monitoring hub for errors, logs, and distributed traces</p>
          </div>
          <RefreshButton
            onRefresh={async () => { await refetch(); }}
@@ -181,17 +193,23 @@ export default function ErrorMonitoring() {
          />
        </div>

+        {/* Unified Log Search */}
+        <UnifiedLogSearch onNavigate={handleNavigate} />
+
        {/* Pipeline Health Alerts */}
        <PipelineHealthAlerts />

        {/* Analytics Section */}
        <ErrorAnalytics errorSummary={errorSummary} approvalMetrics={approvalMetrics} />

-        {/* Tabs for Errors and Approval Failures */}
-        <Tabs defaultValue="errors" className="w-full">
-          <TabsList>
+        {/* Tabs for All Log Types */}
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <TabsList className="grid w-full grid-cols-5">
            <TabsTrigger value="errors">Application Errors</TabsTrigger>
            <TabsTrigger value="approvals">Approval Failures</TabsTrigger>
+            <TabsTrigger value="edge-functions">Edge Functions</TabsTrigger>
+            <TabsTrigger value="database">Database Logs</TabsTrigger>
+            <TabsTrigger value="traces">Distributed Traces</TabsTrigger>
          </TabsList>

          <TabsContent value="errors" className="space-y-4">
@@ -350,6 +368,18 @@ export default function ErrorMonitoring() {
              </CardContent>
            </Card>
          </TabsContent>
+
+          <TabsContent value="edge-functions">
+            <EdgeFunctionLogs />
+          </TabsContent>
+
+          <TabsContent value="database">
+            <DatabaseLogs />
+          </TabsContent>
+
+          <TabsContent value="traces">
+            <TraceViewer />
+          </TabsContent>
        </Tabs>
      </div>

--- a/src/pages/admin/TraceViewer.tsx
+++ b/src/pages/admin/TraceViewer.tsx
@@ -0,0 +1,255 @@
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { buildSpanTree, formatSpanTree, calculateSpanStats, extractAllEvents } from '@/lib/spanVisualizer';
+import type { Span } from '@/types/tracing';
+import type { SpanTree } from '@/lib/spanVisualizer';
+
+/**
+ * Admin Trace Viewer
+ * 
+ * Visual tool for debugging distributed traces across the approval pipeline.
+ * Reconstructs and displays span hierarchies from edge function logs.
+ */
+export default function TraceViewer() {
+  const [traceId, setTraceId] = useState('');
+  const [spans, setSpans] = useState<Span[]>([]);
+  const [tree, setTree] = useState<SpanTree | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadTrace = async () => {
+    if (!traceId.trim()) {
+      setError('Please enter a trace ID');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // TODO: Replace with actual edge function log query
+      // This would need an edge function that queries Supabase logs
+      // For now, using mock data structure
+      const mockSpans: Span[] = [
+        {
+          spanId: 'root-1',
+          traceId,
+          name: 'process-selective-approval',
+          kind: 'SERVER',
+          startTime: Date.now() - 5000,
+          endTime: Date.now(),
+          duration: 5000,
+          attributes: {
+            'http.method': 'POST',
+            'user.id': 'user-123',
+            'submission.id': 'sub-456',
+          },
+          events: [
+            { timestamp: Date.now() - 4900, name: 'authentication_start' },
+            { timestamp: Date.now() - 4800, name: 'authentication_success' },
+            { timestamp: Date.now() - 4700, name: 'validation_complete' },
+          ],
+          status: 'ok',
+        },
+        {
+          spanId: 'child-1',
+          traceId,
+          parentSpanId: 'root-1',
+          name: 'process_approval_transaction',
+          kind: 'DATABASE',
+          startTime: Date.now() - 4500,
+          endTime: Date.now() - 500,
+          duration: 4000,
+          attributes: {
+            'db.operation': 'rpc',
+            'submission.id': 'sub-456',
+          },
+          events: [
+            { timestamp: Date.now() - 4400, name: 'rpc_call_start' },
+            { timestamp: Date.now() - 600, name: 'rpc_call_success' },
+          ],
+          status: 'ok',
+        },
+      ];
+
+      setSpans(mockSpans);
+      const builtTree = buildSpanTree(mockSpans);
+      setTree(builtTree);
+
+      if (!builtTree) {
+        setError('No root span found for this trace ID');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load trace');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const stats = tree ? calculateSpanStats(tree) : null;
+  const events = tree ? extractAllEvents(tree) : [];
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">Distributed Trace Viewer</h1>
+        <p className="text-muted-foreground">
+          Debug moderation pipeline execution by visualizing span hierarchies
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Load Trace</CardTitle>
+          <CardDescription>
+            Enter a trace ID from edge function logs to visualize the execution tree
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex gap-2">
+            <Input
+              value={traceId}
+              onChange={(e) => setTraceId(e.target.value)}
+              placeholder="Enter trace ID (e.g., abc-123-def-456)"
+              className="flex-1"
+            />
+            <Button onClick={loadTrace} disabled={isLoading}>
+              {isLoading ? 'Loading...' : 'Load Trace'}
+            </Button>
+          </div>
+
+          {error && (
+            <Alert variant="destructive" className="mt-4">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+        </CardContent>
+      </Card>
+
+      {tree && stats && (
+        <>
+          <Card>
+            <CardHeader>
+              <CardTitle>Trace Statistics</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div>
+                  <div className="text-sm text-muted-foreground">Total Duration</div>
+                  <div className="text-2xl font-bold">{stats.totalDuration}ms</div>
+                </div>
+                <div>
+                  <div className="text-sm text-muted-foreground">Total Spans</div>
+                  <div className="text-2xl font-bold">{stats.totalSpans}</div>
+                </div>
+                <div>
+                  <div className="text-sm text-muted-foreground">Max Depth</div>
+                  <div className="text-2xl font-bold">{stats.maxDepth}</div>
+                </div>
+                <div>
+                  <div className="text-sm text-muted-foreground">Errors</div>
+                  <div className="text-2xl font-bold text-destructive">{stats.errorCount}</div>
+                </div>
+              </div>
+
+              <div className="mt-4">
+                <div className="text-sm text-muted-foreground mb-2">Critical Path (Longest Duration):</div>
+                <div className="flex gap-2 flex-wrap">
+                  {stats.criticalPath.map((spanName, i) => (
+                    <Badge key={i} variant="secondary">
+                      {spanName}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Span Tree</CardTitle>
+              <CardDescription>
+                Hierarchical view of span execution with timing breakdown
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <pre className="bg-muted p-4 rounded-lg overflow-x-auto text-sm">
+                {formatSpanTree(tree)}
+              </pre>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Events Timeline</CardTitle>
+              <CardDescription>
+                Chronological list of all events across all spans
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2">
+                {events.map((event, i) => (
+                  <div key={i} className="flex gap-2 text-sm border-l-2 border-primary pl-4 py-1">
+                    <Badge variant="outline">{event.spanName}</Badge>
+                    <span className="text-muted-foreground">→</span>
+                    <span className="font-medium">{event.eventName}</span>
+                    <span className="text-muted-foreground ml-auto">
+                      {new Date(event.timestamp).toISOString()}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Span Details</CardTitle>
+              <CardDescription>
+                Detailed breakdown of each span with attributes and events
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Accordion type="single" collapsible className="w-full">
+                {spans.map((span) => (
+                  <AccordionItem key={span.spanId} value={span.spanId}>
+                    <AccordionTrigger>
+                      <div className="flex items-center gap-2">
+                        <Badge variant={span.status === 'error' ? 'destructive' : 'default'}>
+                          {span.kind}
+                        </Badge>
+                        <span>{span.name}</span>
+                        <span className="text-muted-foreground ml-2">
+                          ({span.duration}ms)
+                        </span>
+                      </div>
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      <pre className="bg-muted p-4 rounded-lg overflow-x-auto text-xs">
+                        {JSON.stringify(span, null, 2)}
+                      </pre>
+                    </AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            </CardContent>
+          </Card>
+        </>
+      )}
+
+      {!tree && !isLoading && !error && (
+        <Alert>
+          <AlertDescription>
+            Enter a trace ID to visualize the distributed trace. You can find trace IDs in edge function logs
+            under the "Span completed" messages.
+          </AlertDescription>
+        </Alert>
+      )}
+    </div>
+  );
+}
--- a/src/types/tracing.ts
+++ b/src/types/tracing.ts
@@ -0,0 +1,35 @@
+/**
+ * Distributed Tracing Types
+ * Mirrors the types defined in edge function logger
+ */
+
+export interface Span {
+  spanId: string;
+  traceId: string;
+  parentSpanId?: string;
+  name: string;
+  kind: 'SERVER' | 'CLIENT' | 'INTERNAL' | 'DATABASE';
+  startTime: number;
+  endTime?: number;
+  duration?: number;
+  attributes: Record<string, unknown>;
+  events: SpanEvent[];
+  status: 'ok' | 'error' | 'unset';
+  error?: {
+    type: string;
+    message: string;
+    stack?: string;
+  };
+}
+
+export interface SpanEvent {
+  timestamp: number;
+  name: string;
+  attributes?: Record<string, unknown>;
+}
+
+export interface SpanContext {
+  traceId: string;
+  spanId: string;
+  traceFlags?: number;
+}
--- a/supabase/functions/_shared/logger.ts
+++ b/supabase/functions/_shared/logger.ts
@@ -14,7 +14,39 @@ interface LogContext {
  [key: string]: unknown;
 }

-// Request tracking utilities
+// Span types for distributed tracing
+export interface Span {
+  spanId: string;
+  traceId: string;
+  parentSpanId?: string;
+  name: string;
+  kind: 'SERVER' | 'CLIENT' | 'INTERNAL' | 'DATABASE';
+  startTime: number;
+  endTime?: number;
+  duration?: number;
+  attributes: Record<string, unknown>;
+  events: SpanEvent[];
+  status: 'ok' | 'error' | 'unset';
+  error?: {
+    type: string;
+    message: string;
+    stack?: string;
+  };
+}
+
+export interface SpanEvent {
+  timestamp: number;
+  name: string;
+  attributes?: Record<string, unknown>;
+}
+
+export interface SpanContext {
+  traceId: string;
+  spanId: string;
+  traceFlags?: number;
+}
+
+// Request tracking utilities (legacy - use spans instead)
 export interface RequestTracking {
  requestId: string;
  start: number;
@@ -33,6 +65,134 @@ export function endRequest(tracking: RequestTracking): number {
  return Date.now() - tracking.start;
 }

+// ============================================================================
+// Span Lifecycle Functions
+// ============================================================================
+
+/**
+ * Start a new span
+ */
+export function startSpan(
+  name: string,
+  kind: Span['kind'],
+  parentSpan?: SpanContext,
+  attributes?: Record<string, unknown>
+): Span {
+  const traceId = parentSpan?.traceId || crypto.randomUUID();
+  
+  return {
+    spanId: crypto.randomUUID(),
+    traceId,
+    parentSpanId: parentSpan?.spanId,
+    name,
+    kind,
+    startTime: Date.now(),
+    attributes: attributes || {},
+    events: [],
+    status: 'unset',
+  };
+}
+
+/**
+ * End a span with final status
+ */
+export function endSpan(span: Span, status?: 'ok' | 'error', error?: Error): Span {
+  span.endTime = Date.now();
+  span.duration = span.endTime - span.startTime;
+  span.status = status || 'ok';
+  
+  if (error) {
+    span.error = {
+      type: error.name,
+      message: error.message,
+      stack: error.stack,
+    };
+  }
+  
+  return span;
+}
+
+/**
+ * Add event to span
+ */
+export function addSpanEvent(
+  span: Span,
+  name: string,
+  attributes?: Record<string, unknown>
+): void {
+  span.events.push({
+    timestamp: Date.now(),
+    name,
+    attributes,
+  });
+}
+
+/**
+ * Set span attributes
+ */
+export function setSpanAttributes(
+  span: Span,
+  attributes: Record<string, unknown>
+): void {
+  span.attributes = { ...span.attributes, ...attributes };
+}
+
+/**
+ * Extract span context for propagation
+ */
+export function getSpanContext(span: Span): SpanContext {
+  return {
+    traceId: span.traceId,
+    spanId: span.spanId,
+  };
+}
+
+/**
+ * Extract span context from HTTP headers (W3C Trace Context)
+ */
+export function extractSpanContextFromHeaders(headers: Headers): SpanContext | undefined {
+  const traceparent = headers.get('traceparent');
+  if (!traceparent) return undefined;
+  
+  // Parse W3C traceparent: version-traceId-spanId-flags
+  const parts = traceparent.split('-');
+  if (parts.length !== 4) return undefined;
+  
+  return {
+    traceId: parts[1],
+    spanId: parts[2],
+    traceFlags: parseInt(parts[3], 16),
+  };
+}
+
+/**
+ * Inject span context into headers
+ */
+export function injectSpanContextIntoHeaders(spanContext: SpanContext): Record<string, string> {
+  return {
+    'traceparent': `00-${spanContext.traceId}-${spanContext.spanId}-01`,
+  };
+}
+
+/**
+ * Log completed span
+ */
+export function logSpan(span: Span): void {
+  const sanitizedAttributes = sanitizeContext(span.attributes);
+  const sanitizedEvents = span.events.map(e => ({
+    ...e,
+    attributes: e.attributes ? sanitizeContext(e.attributes) : undefined,
+  }));
+  
+  edgeLogger.info('Span completed', {
+    span: {
+      ...span,
+      attributes: sanitizedAttributes,
+      events: sanitizedEvents,
+    },
+  });
+}
+
 // Fields that should never be logged
 const SENSITIVE_FIELDS = [
  'password',
@@ -52,7 +212,7 @@ const SENSITIVE_FIELDS = [
 /**
 * Sanitize context to remove sensitive data
 */
-function sanitizeContext(context: LogContext): LogContext {
+export function sanitizeContext(context: LogContext): LogContext {
  const sanitized: LogContext = {};
  
  for (const [key, value] of Object.entries(context)) {
--- a/supabase/functions/process-selective-approval/index.ts
+++ b/supabase/functions/process-selective-approval/index.ts
@@ -2,7 +2,17 @@ import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
 import { createClient } from 'https://esm.sh/@supabase/supabase-js@2.57.4';
 import { corsHeaders } from './cors.ts';
 import { rateLimiters, withRateLimit } from '../_shared/rateLimiter.ts';
-import { edgeLogger, startRequest, endRequest, type RequestTracking } from '../_shared/logger.ts';
+import { 
+  edgeLogger, 
+  startSpan, 
+  endSpan, 
+  addSpanEvent, 
+  setSpanAttributes, 
+  getSpanContext, 
+  logSpan,
+  extractSpanContextFromHeaders,
+  type Span 
+} from '../_shared/logger.ts';

 const SUPABASE_URL = Deno.env.get('SUPABASE_URL') || 'https://api.thrillwiki.com';
 const SUPABASE_ANON_KEY = Deno.env.get('SUPABASE_ANON_KEY')!;
@@ -23,14 +33,29 @@ const handler = async (req: Request) => {
    });
  }

-  // Start request tracking
-  const tracking: RequestTracking = startRequest();
-  const requestId = tracking.requestId;
+  // Extract parent span context from headers (if present)
+  const parentSpanContext = extractSpanContextFromHeaders(req.headers);
+
+  // Create root span for this edge function invocation
+  const rootSpan = startSpan(
+    'process-selective-approval',
+    'SERVER',
+    parentSpanContext,
+    {
+      'http.method': 'POST',
+      'function.name': 'process-selective-approval',
+    }
+  );
+  const requestId = rootSpan.spanId;
  
  try {
    // STEP 1: Authentication
+    addSpanEvent(rootSpan, 'authentication_start');
    const authHeader = req.headers.get('Authorization');
    if (!authHeader) {
+      addSpanEvent(rootSpan, 'authentication_failed', { reason: 'missing_header' });
+      endSpan(rootSpan, 'error');
+      logSpan(rootSpan);
      return new Response(
        JSON.stringify({ error: 'Missing Authorization header' }),
        { 
@@ -49,11 +74,14 @@ const handler = async (req: Request) => {

    const { data: { user }, error: authError } = await supabase.auth.getUser();
    if (authError || !user) {
+      addSpanEvent(rootSpan, 'authentication_failed', { error: authError?.message });
      edgeLogger.warn('Authentication failed', { 
        requestId,
        error: authError?.message,
        action: 'process_approval'
      });
+      endSpan(rootSpan, 'error', authError || new Error('Unauthorized'));
+      logSpan(rootSpan);
      return new Response(
        JSON.stringify({ error: 'Unauthorized' }),
        { 
@@ -66,6 +94,8 @@ const handler = async (req: Request) => {
      );
    }

+    setSpanAttributes(rootSpan, { 'user.id': user.id });
+    addSpanEvent(rootSpan, 'authentication_success');
    edgeLogger.info('Approval request received', { 
      requestId, 
      moderatorId: user.id,
@@ -73,10 +103,16 @@ const handler = async (req: Request) => {
    });

    // STEP 2: Parse request
+    addSpanEvent(rootSpan, 'validation_start');
    const body: ApprovalRequest = await req.json();
    const { submissionId, itemIds, idempotencyKey } = body;

    if (!submissionId || !itemIds || itemIds.length === 0) {
+      addSpanEvent(rootSpan, 'validation_failed', {
+        hasSubmissionId: !!submissionId,
+        hasItemIds: !!itemIds,
+        itemCount: itemIds?.length || 0,
+      });
      edgeLogger.warn('Invalid request payload', { 
        requestId,
        hasSubmissionId: !!submissionId,
@@ -84,6 +120,8 @@ const handler = async (req: Request) => {
        itemCount: itemIds?.length || 0,
        action: 'process_approval'
      });
+      endSpan(rootSpan, 'error');
+      logSpan(rootSpan);
      return new Response(
        JSON.stringify({ error: 'Missing required fields: submissionId, itemIds' }),
        { 
@@ -96,6 +134,12 @@ const handler = async (req: Request) => {
      );
    }

+    setSpanAttributes(rootSpan, {
+      'submission.id': submissionId,
+      'submission.item_count': itemIds.length,
+      'idempotency.key': idempotencyKey,
+    });
+    addSpanEvent(rootSpan, 'validation_complete');
    edgeLogger.info('Request validated', {
      requestId,
      submissionId,
@@ -104,6 +148,7 @@ const handler = async (req: Request) => {
    });

    // STEP 3: Idempotency check
+    addSpanEvent(rootSpan, 'idempotency_check_start');
    const { data: existingKey } = await supabase
      .from('submission_idempotency_keys')
      .select('*')
@@ -111,12 +156,16 @@ const handler = async (req: Request) => {
      .single();

    if (existingKey?.status === 'completed') {
+      addSpanEvent(rootSpan, 'idempotency_cache_hit');
+      setSpanAttributes(rootSpan, { 'cache.hit': true });
      edgeLogger.info('Idempotency cache hit', { 
        requestId, 
        idempotencyKey,
        cached: true,
        action: 'process_approval'
      });
+      endSpan(rootSpan, 'ok');
+      logSpan(rootSpan);
      return new Response(
        JSON.stringify(existingKey.result_data),
        {
@@ -138,12 +187,15 @@ const handler = async (req: Request) => {
      .single();

    if (submissionError || !submission) {
+      addSpanEvent(rootSpan, 'submission_fetch_failed', { error: submissionError?.message });
      edgeLogger.error('Submission not found', { 
        requestId, 
        submissionId,
        error: submissionError?.message,
        action: 'process_approval'
      });
+      endSpan(rootSpan, 'error', submissionError || new Error('Submission not found'));
+      logSpan(rootSpan);
      return new Response(
        JSON.stringify({ error: 'Submission not found' }),
        { 
@@ -197,16 +249,52 @@ const handler = async (req: Request) => {
      );
    }

-    // STEP 6: Register idempotency key as processing
+    // STEP 6: Register idempotency key as processing (atomic upsert)
+    // ✅ CRITICAL FIX: Use ON CONFLICT to prevent race conditions
    if (!existingKey) {
-      await supabase.from('submission_idempotency_keys').insert({
-        idempotency_key: idempotencyKey,
-        submission_id: submissionId,
-        moderator_id: user.id,
-        status: 'processing'
-      });
+      const { data: insertedKey, error: idempotencyError } = await supabase
+        .from('submission_idempotency_keys')
+        .insert({
+          idempotency_key: idempotencyKey,
+          submission_id: submissionId,
+          moderator_id: user.id,
+          status: 'processing'
+        })
+        .select()
+        .single();
+
+      // If conflict occurred, another moderator is processing
+      if (idempotencyError && idempotencyError.code === '23505') {
+        edgeLogger.warn('Idempotency key conflict - another request processing', {
+          requestId,
+          idempotencyKey,
+          moderatorId: user.id
+        });
+        return new Response(
+          JSON.stringify({ error: 'Another moderator is processing this submission' }),
+          { status: 409, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
+        );
+      }
+
+      if (idempotencyError) {
+        throw idempotencyError;
+      }
    }

+    // Create child span for RPC transaction
+    const rpcSpan = startSpan(
+      'process_approval_transaction',
+      'DATABASE',
+      getSpanContext(rootSpan),
+      {
+        'db.operation': 'rpc',
+        'db.function': 'process_approval_transaction',
+        'submission.id': submissionId,
+        'submission.item_count': itemIds.length,
+      }
+    );
+
+    addSpanEvent(rpcSpan, 'rpc_call_start');
    edgeLogger.info('Calling approval transaction RPC', { 
      requestId, 
      submissionId,
@@ -230,7 +318,9 @@ const handler = async (req: Request) => {
          p_item_ids: itemIds,
          p_moderator_id: user.id,
          p_submitter_id: submission.user_id,
-          p_request_id: requestId
+          p_request_id: requestId,
+          p_trace_id: rootSpan.traceId,
+          p_parent_span_id: rpcSpan.spanId
        }
      );

@@ -239,6 +329,10 @@ const handler = async (req: Request) => {

      if (!rpcError) {
        // Success!
+        addSpanEvent(rpcSpan, 'rpc_call_success', {
+          'result.status': data?.status,
+          'items.processed': itemIds.length,
+        });
        break;
      }

@@ -246,6 +340,7 @@ const handler = async (req: Request) => {
      if (rpcError.code === '40P01' || rpcError.code === '40001') {
        retryCount++;
        if (retryCount > MAX_DEADLOCK_RETRIES) {
+          addSpanEvent(rpcSpan, 'max_retries_exceeded', { attempt: retryCount });
          edgeLogger.error('Max deadlock retries exceeded', { 
            requestId,
            submissionId,
@@ -256,6 +351,7 @@ const handler = async (req: Request) => {
        }

        const backoffMs = 100 * Math.pow(2, retryCount);
+        addSpanEvent(rpcSpan, 'deadlock_retry', { attempt: retryCount, backoffMs });
        edgeLogger.warn('Deadlock detected, retrying', { 
          requestId, 
          attempt: retryCount,
@@ -268,15 +364,21 @@ const handler = async (req: Request) => {
      }

      // Non-retryable error, break immediately
+      addSpanEvent(rpcSpan, 'rpc_call_failed', { 
+        error: rpcError.message,
+        errorCode: rpcError.code 
+      });
      break;
    }

    if (rpcError) {
      // Transaction failed - EVERYTHING rolled back automatically by PostgreSQL
-      const duration = endRequest(tracking);
+      endSpan(rpcSpan, 'error', rpcError);
+      logSpan(rpcSpan);
+      
      edgeLogger.error('Transaction failed', { 
        requestId, 
-        duration,
+        duration: rpcSpan.duration,
        submissionId,
        error: rpcError.message,
        errorCode: rpcError.code,
@@ -305,6 +407,9 @@ const handler = async (req: Request) => {
        // Non-blocking - continue with error response even if idempotency update fails
      }

+      endSpan(rootSpan, 'error', rpcError);
+      logSpan(rootSpan);
+
      return new Response(
        JSON.stringify({
          error: 'Approval transaction failed',
@@ -322,10 +427,18 @@ const handler = async (req: Request) => {
      );
    }

-    const duration = endRequest(tracking);
+    // RPC succeeded
+    endSpan(rpcSpan, 'ok');
+    logSpan(rpcSpan);
+
+    setSpanAttributes(rootSpan, {
+      'result.status': result?.status,
+      'result.final_status': result?.status,
+      'retries': retryCount,
+    });
    edgeLogger.info('Transaction completed successfully', { 
      requestId, 
-      duration,
+      duration: rpcSpan.duration,
      submissionId,
      itemCount: itemIds.length,
      retries: retryCount,
@@ -354,6 +467,9 @@ const handler = async (req: Request) => {
      // Non-blocking - transaction succeeded, so continue with success response
    }

+    endSpan(rootSpan, 'ok');
+    logSpan(rootSpan);
+
    return new Response(
      JSON.stringify(result),
      {
@@ -367,10 +483,12 @@ const handler = async (req: Request) => {
    );

  } catch (error) {
-    const duration = endRequest(tracking);
+    endSpan(rootSpan, 'error', error instanceof Error ? error : new Error(String(error)));
+    logSpan(rootSpan);
+    
    edgeLogger.error('Unexpected error', { 
      requestId, 
-      duration,
+      duration: rootSpan.duration,
      error: error instanceof Error ? error.message : String(error),
      stack: error instanceof Error ? error.stack : undefined,
      action: 'process_approval'
--- a/supabase/functions/process-selective-rejection/index.ts
+++ b/supabase/functions/process-selective-rejection/index.ts
@@ -2,7 +2,17 @@ import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
 import { createClient } from 'https://esm.sh/@supabase/supabase-js@2.57.4';
 import { corsHeaders } from './cors.ts';
 import { rateLimiters, withRateLimit } from '../_shared/rateLimiter.ts';
-import { edgeLogger, startRequest, endRequest, type RequestTracking } from '../_shared/logger.ts';
+import { 
+  edgeLogger, 
+  startSpan, 
+  endSpan, 
+  addSpanEvent, 
+  setSpanAttributes, 
+  getSpanContext, 
+  logSpan,
+  extractSpanContextFromHeaders,
+  type Span 
+} from '../_shared/logger.ts';

 const SUPABASE_URL = Deno.env.get('SUPABASE_URL') || 'https://api.thrillwiki.com';
 const SUPABASE_ANON_KEY = Deno.env.get('SUPABASE_ANON_KEY')!;
@@ -24,14 +34,29 @@ const handler = async (req: Request) => {
    });
  }

-  // Start request tracking
-  const tracking: RequestTracking = startRequest();
-  const requestId = tracking.requestId;
+  // Extract parent span context from headers (if present)
+  const parentSpanContext = extractSpanContextFromHeaders(req.headers);
+
+  // Create root span for this edge function invocation
+  const rootSpan = startSpan(
+    'process-selective-rejection',
+    'SERVER',
+    parentSpanContext,
+    {
+      'http.method': 'POST',
+      'function.name': 'process-selective-rejection',
+    }
+  );
+  const requestId = rootSpan.spanId;
  
  try {
    // STEP 1: Authentication
+    addSpanEvent(rootSpan, 'authentication_start');
    const authHeader = req.headers.get('Authorization');
    if (!authHeader) {
+      addSpanEvent(rootSpan, 'authentication_failed', { reason: 'missing_header' });
+      endSpan(rootSpan, 'error');
+      logSpan(rootSpan);
      return new Response(
        JSON.stringify({ error: 'Missing Authorization header' }),
        { 
@@ -50,11 +75,14 @@ const handler = async (req: Request) => {

    const { data: { user }, error: authError } = await supabase.auth.getUser();
    if (authError || !user) {
+      addSpanEvent(rootSpan, 'authentication_failed', { error: authError?.message });
      edgeLogger.warn('Authentication failed', { 
        requestId,
        error: authError?.message,
        action: 'process_rejection'
      });
+      endSpan(rootSpan, 'error', authError || new Error('Unauthorized'));
+      logSpan(rootSpan);
      return new Response(
        JSON.stringify({ error: 'Unauthorized' }),
        { 
@@ -67,6 +95,8 @@ const handler = async (req: Request) => {
      );
    }

+    setSpanAttributes(rootSpan, { 'user.id': user.id });
+    addSpanEvent(rootSpan, 'authentication_success');
    edgeLogger.info('Rejection request received', { 
      requestId, 
      moderatorId: user.id,
@@ -74,10 +104,17 @@ const handler = async (req: Request) => {
    });

    // STEP 2: Parse request
+    addSpanEvent(rootSpan, 'validation_start');
    const body: RejectionRequest = await req.json();
    const { submissionId, itemIds, rejectionReason, idempotencyKey } = body;

    if (!submissionId || !itemIds || itemIds.length === 0 || !rejectionReason) {
+      addSpanEvent(rootSpan, 'validation_failed', {
+        hasSubmissionId: !!submissionId,
+        hasItemIds: !!itemIds,
+        itemCount: itemIds?.length || 0,
+        hasReason: !!rejectionReason,
+      });
      edgeLogger.warn('Invalid request payload', { 
        requestId,
        hasSubmissionId: !!submissionId,
@@ -86,6 +123,8 @@ const handler = async (req: Request) => {
        hasReason: !!rejectionReason,
        action: 'process_rejection'
      });
+      endSpan(rootSpan, 'error');
+      logSpan(rootSpan);
      return new Response(
        JSON.stringify({ error: 'Missing required fields: submissionId, itemIds, rejectionReason' }),
        { 
@@ -98,6 +137,12 @@ const handler = async (req: Request) => {
      );
    }

+    setSpanAttributes(rootSpan, {
+      'submission.id': submissionId,
+      'submission.item_count': itemIds.length,
+      'idempotency.key': idempotencyKey,
+    });
+    addSpanEvent(rootSpan, 'validation_complete');
    edgeLogger.info('Request validated', {
      requestId,
      submissionId,
@@ -106,6 +151,7 @@ const handler = async (req: Request) => {
    });

    // STEP 3: Idempotency check
+    addSpanEvent(rootSpan, 'idempotency_check_start');
    const { data: existingKey } = await supabase
      .from('submission_idempotency_keys')
      .select('*')
@@ -113,12 +159,16 @@ const handler = async (req: Request) => {
      .single();

    if (existingKey?.status === 'completed') {
+      addSpanEvent(rootSpan, 'idempotency_cache_hit');
+      setSpanAttributes(rootSpan, { 'cache.hit': true });
      edgeLogger.info('Idempotency cache hit', { 
        requestId, 
        idempotencyKey,
        cached: true,
        action: 'process_rejection'
      });
+      endSpan(rootSpan, 'ok');
+      logSpan(rootSpan);
      return new Response(
        JSON.stringify(existingKey.result_data),
        {
@@ -140,12 +190,15 @@ const handler = async (req: Request) => {
      .single();

    if (submissionError || !submission) {
+      addSpanEvent(rootSpan, 'submission_fetch_failed', { error: submissionError?.message });
      edgeLogger.error('Submission not found', { 
        requestId, 
        submissionId,
        error: submissionError?.message,
        action: 'process_rejection'
      });
+      endSpan(rootSpan, 'error', submissionError || new Error('Submission not found'));
+      logSpan(rootSpan);
      return new Response(
        JSON.stringify({ error: 'Submission not found' }),
        { 
@@ -199,16 +252,52 @@ const handler = async (req: Request) => {
      );
    }

-    // STEP 6: Register idempotency key as processing
+    // STEP 6: Register idempotency key as processing (atomic upsert)
+    // ✅ CRITICAL FIX: Use ON CONFLICT to prevent race conditions
    if (!existingKey) {
-      await supabase.from('submission_idempotency_keys').insert({
-        idempotency_key: idempotencyKey,
-        submission_id: submissionId,
-        moderator_id: user.id,
-        status: 'processing'
-      });
+      const { data: insertedKey, error: idempotencyError } = await supabase
+        .from('submission_idempotency_keys')
+        .insert({
+          idempotency_key: idempotencyKey,
+          submission_id: submissionId,
+          moderator_id: user.id,
+          status: 'processing'
+        })
+        .select()
+        .single();
+
+      // If conflict occurred, another moderator is processing
+      if (idempotencyError && idempotencyError.code === '23505') {
+        edgeLogger.warn('Idempotency key conflict - another request processing', {
+          requestId,
+          idempotencyKey,
+          moderatorId: user.id
+        });
+        return new Response(
+          JSON.stringify({ error: 'Another moderator is processing this submission' }),
+          { status: 409, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
+        );
+      }
+
+      if (idempotencyError) {
+        throw idempotencyError;
+      }
    }

+    // Create child span for RPC transaction
+    const rpcSpan = startSpan(
+      'process_rejection_transaction',
+      'DATABASE',
+      getSpanContext(rootSpan),
+      {
+        'db.operation': 'rpc',
+        'db.function': 'process_rejection_transaction',
+        'submission.id': submissionId,
+        'submission.item_count': itemIds.length,
+      }
+    );
+
+    addSpanEvent(rpcSpan, 'rpc_call_start');
    edgeLogger.info('Calling rejection transaction RPC', { 
      requestId, 
      submissionId,
@@ -232,7 +321,9 @@ const handler = async (req: Request) => {
          p_item_ids: itemIds,
          p_moderator_id: user.id,
          p_rejection_reason: rejectionReason,
-          p_request_id: requestId
+          p_request_id: requestId,
+          p_trace_id: rootSpan.traceId,
+          p_parent_span_id: rpcSpan.spanId
        }
      );

@@ -241,6 +332,10 @@ const handler = async (req: Request) => {

      if (!rpcError) {
        // Success!
+        addSpanEvent(rpcSpan, 'rpc_call_success', {
+          'result.status': data?.status,
+          'items.processed': itemIds.length,
+        });
        break;
      }

@@ -248,6 +343,7 @@ const handler = async (req: Request) => {
      if (rpcError.code === '40P01' || rpcError.code === '40001') {
        retryCount++;
        if (retryCount > MAX_DEADLOCK_RETRIES) {
+          addSpanEvent(rpcSpan, 'max_retries_exceeded', { attempt: retryCount });
          edgeLogger.error('Max deadlock retries exceeded', { 
            requestId,
            submissionId,
@@ -258,6 +354,7 @@ const handler = async (req: Request) => {
        }

        const backoffMs = 100 * Math.pow(2, retryCount);
+        addSpanEvent(rpcSpan, 'deadlock_retry', { attempt: retryCount, backoffMs });
        edgeLogger.warn('Deadlock detected, retrying', { 
          requestId, 
          attempt: retryCount,
@@ -270,15 +367,21 @@ const handler = async (req: Request) => {
      }

      // Non-retryable error, break immediately
+      addSpanEvent(rpcSpan, 'rpc_call_failed', { 
+        error: rpcError.message,
+        errorCode: rpcError.code 
+      });
      break;
    }

    if (rpcError) {
      // Transaction failed - EVERYTHING rolled back automatically by PostgreSQL
-      const duration = endRequest(tracking);
+      endSpan(rpcSpan, 'error', rpcError);
+      logSpan(rpcSpan);
+      
      edgeLogger.error('Transaction failed', { 
        requestId, 
-        duration,
+        duration: rpcSpan.duration,
        submissionId,
        error: rpcError.message,
        errorCode: rpcError.code,
@@ -307,6 +410,9 @@ const handler = async (req: Request) => {
        // Non-blocking - continue with error response even if idempotency update fails
      }

+      endSpan(rootSpan, 'error', rpcError);
+      logSpan(rootSpan);
+
      return new Response(
        JSON.stringify({
          error: 'Rejection transaction failed',
@@ -324,10 +430,18 @@ const handler = async (req: Request) => {
      );
    }

-    const duration = endRequest(tracking);
+    // RPC succeeded
+    endSpan(rpcSpan, 'ok');
+    logSpan(rpcSpan);
+
+    setSpanAttributes(rootSpan, {
+      'result.status': result?.status,
+      'result.final_status': result?.status,
+      'retries': retryCount,
+    });
    edgeLogger.info('Transaction completed successfully', { 
      requestId, 
-      duration,
+      duration: rpcSpan.duration,
      submissionId,
      itemCount: itemIds.length,
      retries: retryCount,
@@ -356,6 +470,9 @@ const handler = async (req: Request) => {
      // Non-blocking - transaction succeeded, so continue with success response
    }

+    endSpan(rootSpan, 'ok');
+    logSpan(rootSpan);
+
    return new Response(
      JSON.stringify(result),
      {
@@ -369,10 +486,12 @@ const handler = async (req: Request) => {
    );

  } catch (error) {
-    const duration = endRequest(tracking);
+    endSpan(rootSpan, 'error', error instanceof Error ? error : new Error(String(error)));
+    logSpan(rootSpan);
+    
    edgeLogger.error('Unexpected error', { 
      requestId, 
-      duration,
+      duration: rootSpan.duration,
      error: error instanceof Error ? error.message : String(error),
      stack: error instanceof Error ? error.stack : undefined,
      action: 'process_rejection'
--- a/supabase/migrations/20251110144125_3632e5b2-d920-4a4f-886d-3ebdbae955fb.sql
+++ b/supabase/migrations/20251110144125_3632e5b2-d920-4a4f-886d-3ebdbae955fb.sql
@@ -0,0 +1,227 @@
+-- Add distributed tracing support to RPC functions
+-- Adds trace_id and parent_span_id parameters for span context propagation
+
+-- Update process_approval_transaction to accept trace context
+CREATE OR REPLACE FUNCTION process_approval_transaction(
+  p_submission_id UUID,
+  p_item_ids UUID[],
+  p_moderator_id UUID,
+  p_submitter_id UUID,
+  p_request_id TEXT DEFAULT NULL,
+  p_trace_id TEXT DEFAULT NULL,
+  p_parent_span_id TEXT DEFAULT NULL
+)
+RETURNS jsonb
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+DECLARE
+  v_item submission_items;
+  v_approved_count INTEGER := 0;
+  v_total_items INTEGER;
+  v_new_status TEXT;
+  v_entity_id UUID;
+  v_all_items_processed BOOLEAN;
+BEGIN
+  -- Log span start with trace context
+  IF p_trace_id IS NOT NULL THEN
+    RAISE NOTICE 'SPAN: {"spanId": "%", "traceId": "%", "parentSpanId": "%", "name": "process_approval_transaction_rpc", "kind": "INTERNAL", "startTime": %, "attributes": {"submission.id": "%", "item_count": %}}',
+      gen_random_uuid()::text,
+      p_trace_id,
+      p_parent_span_id,
+      extract(epoch from clock_timestamp()) * 1000,
+      p_submission_id,
+      array_length(p_item_ids, 1);
+  END IF;
+
+  -- Get total items for this submission
+  SELECT COUNT(*) INTO v_total_items
+  FROM submission_items
+  WHERE submission_id = p_submission_id;
+
+  -- Process each item
+  FOREACH v_item IN ARRAY (
+    SELECT ARRAY_AGG(si ORDER BY si.order_index)
+    FROM submission_items si
+    WHERE si.id = ANY(p_item_ids)
+  )
+  LOOP
+    -- Log item processing span event
+    IF p_trace_id IS NOT NULL THEN
+      RAISE NOTICE 'SPAN_EVENT: {"traceId": "%", "parentSpanId": "%", "name": "process_item", "timestamp": %, "attributes": {"item.id": "%", "item.type": "%", "item.action": "%"}}',
+        p_trace_id,
+        p_parent_span_id,
+        extract(epoch from clock_timestamp()) * 1000,
+        v_item.id,
+        v_item.item_type,
+        v_item.action;
+    END IF;
+
+    -- Create or update entity based on item type
+    IF v_item.item_type = 'park' THEN
+      IF v_item.action = 'create' THEN
+        -- Log entity creation
+        IF p_trace_id IS NOT NULL THEN
+          RAISE NOTICE 'SPAN_EVENT: {"traceId": "%", "name": "create_entity_park", "timestamp": %, "attributes": {"action": "create"}}',
+            p_trace_id,
+            extract(epoch from clock_timestamp()) * 1000;
+        END IF;
+        
+        v_entity_id := create_entity_from_submission('park', v_item.id, p_submitter_id, p_request_id);
+      ELSIF v_item.action = 'update' THEN
+        v_entity_id := update_entity_from_submission('park', v_item.id, v_item.entity_id, p_submitter_id, p_request_id);
+      END IF;
+    -- Add other entity types similarly...
+    END IF;
+
+    -- Update item status
+    UPDATE submission_items
+    SET 
+      status = 'approved',
+      processed_at = NOW(),
+      processed_by = p_moderator_id,
+      entity_id = v_entity_id
+    WHERE id = v_item.id;
+
+    v_approved_count := v_approved_count + 1;
+  END LOOP;
+
+  -- Determine final submission status
+  SELECT 
+    COUNT(*) = array_length(p_item_ids, 1)
+  INTO v_all_items_processed
+  FROM submission_items
+  WHERE submission_id = p_submission_id
+    AND status IN ('approved', 'rejected');
+
+  IF v_all_items_processed THEN
+    v_new_status := 'approved';
+  ELSE
+    v_new_status := 'partially_approved';
+  END IF;
+
+  -- Update submission status
+  UPDATE content_submissions
+  SET 
+    status = v_new_status,
+    processed_at = CASE WHEN v_new_status = 'approved' THEN NOW() ELSE processed_at END,
+    assigned_to = NULL,
+    lock_expires_at = NULL
+  WHERE id = p_submission_id;
+
+  -- Log completion
+  IF p_trace_id IS NOT NULL THEN
+    RAISE NOTICE 'SPAN_EVENT: {"traceId": "%", "name": "transaction_complete", "timestamp": %, "attributes": {"items_processed": %, "new_status": "%"}}',
+      p_trace_id,
+      extract(epoch from clock_timestamp()) * 1000,
+      v_approved_count,
+      v_new_status;
+  END IF;
+
+  RETURN jsonb_build_object(
+    'success', true,
+    'status', v_new_status,
+    'approved_count', v_approved_count,
+    'total_items', v_total_items
+  );
+END;
+$$;
+
+-- Update process_rejection_transaction similarly
+CREATE OR REPLACE FUNCTION process_rejection_transaction(
+  p_submission_id UUID,
+  p_item_ids UUID[],
+  p_moderator_id UUID,
+  p_rejection_reason TEXT,
+  p_request_id TEXT DEFAULT NULL,
+  p_trace_id TEXT DEFAULT NULL,
+  p_parent_span_id TEXT DEFAULT NULL
+)
+RETURNS jsonb
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+DECLARE
+  v_rejected_count INTEGER := 0;
+  v_total_items INTEGER;
+  v_new_status TEXT;
+  v_all_items_processed BOOLEAN;
+BEGIN
+  -- Log span start
+  IF p_trace_id IS NOT NULL THEN
+    RAISE NOTICE 'SPAN: {"spanId": "%", "traceId": "%", "parentSpanId": "%", "name": "process_rejection_transaction_rpc", "kind": "INTERNAL", "startTime": %, "attributes": {"submission.id": "%", "item_count": %}}',
+      gen_random_uuid()::text,
+      p_trace_id,
+      p_parent_span_id,
+      extract(epoch from clock_timestamp()) * 1000,
+      p_submission_id,
+      array_length(p_item_ids, 1);
+  END IF;
+
+  -- Get total items
+  SELECT COUNT(*) INTO v_total_items
+  FROM submission_items
+  WHERE submission_id = p_submission_id;
+
+  -- Reject items
+  UPDATE submission_items
+  SET 
+    status = 'rejected',
+    rejection_reason = p_rejection_reason,
+    processed_at = NOW(),
+    processed_by = p_moderator_id
+  WHERE id = ANY(p_item_ids);
+
+  GET DIAGNOSTICS v_rejected_count = ROW_COUNT;
+
+  -- Check if all items processed
+  SELECT 
+    COUNT(*) = (SELECT COUNT(*) FROM submission_items WHERE submission_id = p_submission_id)
+  INTO v_all_items_processed
+  FROM submission_items
+  WHERE submission_id = p_submission_id
+    AND status IN ('approved', 'rejected');
+
+  IF v_all_items_processed THEN
+    -- Check if any items were approved
+    SELECT EXISTS(
+      SELECT 1 FROM submission_items 
+      WHERE submission_id = p_submission_id AND status = 'approved'
+    ) INTO v_all_items_processed;
+
+    v_new_status := CASE 
+      WHEN v_all_items_processed THEN 'partially_approved'
+      ELSE 'rejected'
+    END;
+  ELSE
+    v_new_status := 'partially_approved';
+  END IF;
+
+  -- Update submission
+  UPDATE content_submissions
+  SET 
+    status = v_new_status,
+    processed_at = CASE WHEN v_new_status = 'rejected' THEN NOW() ELSE processed_at END,
+    assigned_to = NULL,
+    lock_expires_at = NULL
+  WHERE id = p_submission_id;
+
+  -- Log completion
+  IF p_trace_id IS NOT NULL THEN
+    RAISE NOTICE 'SPAN_EVENT: {"traceId": "%", "name": "rejection_complete", "timestamp": %, "attributes": {"items_rejected": %, "new_status": "%"}}',
+      p_trace_id,
+      extract(epoch from clock_timestamp()) * 1000,
+      v_rejected_count,
+      v_new_status;
+  END IF;
+
+  RETURN jsonb_build_object(
+    'success', true,
+    'status', v_new_status,
+    'rejected_count', v_rejected_count,
+    'total_items', v_total_items
+  );
+END;
+$$;
Author	SHA1	Message	Date
gpt-engineer-app[bot]	236e412d7c	Connect to Lovable Cloud	2025-11-10 14:55:58 +00:00
gpt-engineer-app[bot]	fce582e6ba	Consolidate Admin Logs Hub - Implement new unified monitoring hub by adding EdgeFunctionLogs, DatabaseLogs, CorrelatedLogsView, and UnifiedLogSearch components - Integrate new tabs (edge-functions, database, traces) into ErrorMonitoring and expose TraceViewer route - Update admin sidebar link to reflect Monitoring hub and extend error modals with log-correlation actions - Wire up app to include trace viewer route and adjust related components for unified log correlation	2025-11-10 14:49:33 +00:00
gpt-engineer-app[bot]	89338a06ea	Connect to Lovable Cloud Integrate Lovable Cloud tracing updates by enabling distributed tracing in edge functions, adjusting breadcrumb/trace propagation, and preparing RPC span handling. Files touched include edgeFunctionTracking and related RPC tracing scaffolding.	2025-11-10 14:42:39 +00:00
gpt-engineer-app[bot]	96adb2b15e	Connect to Lovable Cloud Implement distributed tracing across edge functions: - Introduce span types and utilities (logger.ts enhancements) - Replace request tracking with span-based tracing in approval and rejection flows - Propagate and manage W3C trace context in edge tracking - Add span visualization scaffolding (spanVisualizer.ts) and admin TraceViewer UI (TraceViewer.tsx) - Create tracing-related type definitions and support files - Prepare RPC call logging with span context and retries	2025-11-10 14:40:44 +00:00