From fd5c84e703d7253c18a6d3d8958e3db440554e09 Mon Sep 17 00:00:00 2001
From: Pro-builder <kemisolatolase@gmail.com>
Date: Sat, 17 Oct 2026 22:07:36 +0100
Subject: [PATCH] feat: scoped error fallback, pause notice, theme key fallback
 and og locale

---
 app/layout.tsx                       | 1 +
 components/CircuitBreakerOverlay.tsx | 3 +++
 components/ErrorBoundary.tsx         | 3 ++-
 components/ThemeToggle.tsx           | 5 ++++-
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 46c9102..294edaf 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -17,6 +17,7 @@ export const metadata: Metadata = {
     siteName:    'Conduit',
     images: [{ url: '/og-image.svg', width: 1200, height: 630, alt: 'Conduit — Streaming Payments on Stellar' }],
     type:        'website',
+    locale:      'en_US',
   },
   twitter: {
     card:        'summary_large_image',
diff --git a/components/CircuitBreakerOverlay.tsx b/components/CircuitBreakerOverlay.tsx
index fd2c806..6ae4c73 100644
--- a/components/CircuitBreakerOverlay.tsx
+++ b/components/CircuitBreakerOverlay.tsx
@@ -49,6 +49,9 @@ export function CircuitBreakerOverlay() {
   return (
     <div className="fixed bottom-4 right-4 z-50 max-w-sm rounded-lg border border-yellow-400/50 bg-yellow-50 p-3 text-xs shadow-lg dark:border-yellow-600/50 dark:bg-yellow-950/90 dark:text-yellow-100">
       <div className="mb-2 font-semibold">Circuit Breaker Monitor</div>
+      <p className="mb-2 text-[11px] opacity-80">
+        Some actions are paused while the network recovers. They resume automatically.
+      </p>
       <ul className="space-y-1.5">
         {states.map((s) => {
           const seconds = Math.ceil(s.remainingMs / 1000);
diff --git a/components/ErrorBoundary.tsx b/components/ErrorBoundary.tsx
index afe892e..e43f809 100644
--- a/components/ErrorBoundary.tsx
+++ b/components/ErrorBoundary.tsx
@@ -122,7 +122,8 @@ export class ErrorBoundary extends Component<Props, State> {
         return this.props.fallback(this.state.error!, this.retry, this.reset);
       }
 
-      return React.createElement('div', { className: 'flex items-center justify-center min-h-[200px]' },
+      // Scoped to this boundary, so wrapping a single stream card keeps the rest of the page usable.
+      return React.createElement('div', { role: 'alert', className: 'flex items-center justify-center min-h-[200px]' },
         React.createElement('div', { className: 'text-center p-6 max-w-md' },
           React.createElement('h2', { className: 'text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2' }, 'Something went wrong'),
           React.createElement('p', { className: 'text-sm text-gray-500 dark:text-gray-400 mb-4' }, this.state.error?.message || 'An unexpected error occurred.'),
diff --git a/components/ThemeToggle.tsx b/components/ThemeToggle.tsx
index 6d48e93..b726b7a 100644
--- a/components/ThemeToggle.tsx
+++ b/components/ThemeToggle.tsx
@@ -25,7 +25,10 @@ export function ThemeToggle() {
   useEffect(() => {
     setMounted(true);
     try {
-      const stored = localStorage.getItem(THEME_STORAGE_KEY) || localStorage.getItem('theme');
+      const stored =
+        localStorage.getItem(THEME_STORAGE_KEY) ||
+        localStorage.getItem('conduit-theme') ||
+        localStorage.getItem('theme');
       if (stored && (stored === 'light' || stored === 'dark' || stored === 'system') && stored !== theme) {
         setTheme(stored);
       }