feat: Implement circuit breaker and retry logic

src/components/ui/retry-status-indicator.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import { Card } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+
+interface RetryStatus {
+  attempt: number;
+  maxAttempts: number;
+  delay: number;
+  type: string;
+}
+
+/**
+ * Global retry status indicator
+ * Shows visual feedback when submissions are being retried due to transient failures
+ */
+export function RetryStatusIndicator() {
+  const [retryStatus, setRetryStatus] = useState<RetryStatus | null>(null);
+  const [countdown, setCountdown] = useState(0);
+
+  useEffect(() => {
+    const handleRetry = (event: Event) => {
+      const customEvent = event as CustomEvent<RetryStatus>;
+      const { attempt, maxAttempts, delay, type } = customEvent.detail;
+      setRetryStatus({ attempt, maxAttempts, delay, type });
+      setCountdown(delay);
+    };
+
+    window.addEventListener('submission-retry', handleRetry);
+    return () => window.removeEventListener('submission-retry', handleRetry);
+  }, []);
+
+  useEffect(() => {
+    if (countdown > 0) {
+      const timer = setInterval(() => {
+        setCountdown((prev) => {
+          if (prev <= 100) {
+            setRetryStatus(null);
+            return 0;
+          }
+          return prev - 100;
+        });
+      }, 100);
+      return () => clearInterval(timer);
+    }
+  }, [countdown]);
+
+  if (!retryStatus) return null;
+
+  const progress = ((retryStatus.delay - countdown) / retryStatus.delay) * 100;
+
+  return (
+    <Card className="fixed bottom-4 right-4 z-50 p-4 shadow-lg border-amber-500 bg-amber-50 dark:bg-amber-950 w-80 animate-in slide-in-from-bottom-4">
+      <div className="flex items-start gap-3">
+        <Loader2 className="w-5 h-5 animate-spin text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
+        <div className="flex-1 space-y-2">
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-medium text-amber-900 dark:text-amber-100">
+              Retrying submission...
+            </p>
+            <span className="text-xs font-mono text-amber-700 dark:text-amber-300">
+              {retryStatus.attempt}/{retryStatus.maxAttempts}
+            </span>
+          </div>
+          
+          <p className="text-xs text-amber-700 dark:text-amber-300">
+            Network issue detected. Retrying {retryStatus.type} submission in {Math.ceil(countdown / 1000)}s
+          </p>
+          
+          <Progress value={progress} className="h-1" />
+        </div>
+      </div>
+    </Card>
+  );
+}