feat: add ErrorBoundary for graceful crash recovery

- Catches render errors and shows a styled recovery UI instead of blank white screen
- Try Again button re-renders, Reload button refreshes the page
- Error details shown in a collapsible pre block
- Full i18n support (EN/FR)
- Wraps the entire app in main.tsx

src/components/ErrorBoundary.tsx

@@ -0,0 +1,78 @@
+import { Component, type ReactNode, type ErrorInfo } from 'react';
+import { t } from '../lib/i18n';
+
+interface Props {
+  children: ReactNode;
+  /** Optional fallback — defaults to built-in error card */
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Catches render errors in child components and shows a recovery UI
+ * instead of a blank white screen.
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('[PinchChat] Render error caught by ErrorBoundary:', error, info.componentStack);
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  handleReload = () => {
+    window.location.reload();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      return (
+        <div className="h-dvh flex items-center justify-center bg-[#1e1e24] text-zinc-300 p-6">
+          <div className="max-w-md w-full space-y-4 text-center">
+            <div className="text-4xl">💥</div>
+            <h1 className="text-xl font-semibold text-zinc-100">
+              {t('error.title')}
+            </h1>
+            <p className="text-sm text-zinc-400">
+              {t('error.description')}
+            </p>
+            {this.state.error && (
+              <pre className="mt-3 p-3 rounded-lg bg-zinc-800/60 text-xs text-red-400 text-left overflow-auto max-h-32">
+                {this.state.error.message}
+              </pre>
+            )}
+            <div className="flex gap-3 justify-center pt-2">
+              <button
+                onClick={this.handleRetry}
+                className="px-4 py-2 rounded-lg bg-zinc-700 hover:bg-zinc-600 text-sm font-medium transition-colors"
+              >
+                {t('error.retry')}
+              </button>
+              <button
+                onClick={this.handleReload}
+                className="px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-sm font-medium transition-colors"
+              >
+                {t('error.reload')}
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/lib/i18n.ts

@@ -73,6 +73,12 @@ const en = {
   'shortcuts.help': 'Show shortcuts',
   'shortcuts.close': 'Close',
   'shortcuts.chatSection': 'Chat',
+
+  // Error boundary
+  'error.title': 'Something went wrong',
+  'error.description': 'An unexpected error occurred while rendering the interface. You can try again or reload the page.',
+  'error.retry': 'Try again',
+  'error.reload': 'Reload page',
   'shortcuts.navigationSection': 'Navigation',
   'shortcuts.generalSection': 'General',
 } as const;
@@ -133,6 +139,11 @@ const fr: Record<keyof typeof en, string> = {
   'shortcuts.help': 'Afficher les raccourcis',
   'shortcuts.close': 'Fermer',
   'shortcuts.chatSection': 'Chat',
+
+  'error.title': 'Quelque chose s\'est mal passé',
+  'error.description': 'Une erreur inattendue est survenue lors de l\'affichage. Vous pouvez réessayer ou recharger la page.',
+  'error.retry': 'Réessayer',
+  'error.reload': 'Recharger',
   'shortcuts.navigationSection': 'Navigation',
   'shortcuts.generalSection': 'Général',
 };

src/main.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import { ErrorBoundary } from './components/ErrorBoundary'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </React.StrictMode>,
 )