From 1505adb1540d51d71e77fd578f496e43ad52b4e6 Mon Sep 17 00:00:00 2001
From: CC Worker <cc-worker@kevlarai.local>
Date: Mon, 1 Jun 2026 02:20:34 +0000
Subject: [PATCH] =?UTF-8?q?feat(ux):=20R4=20error=20boundaries=20=E2=80=94?=
 =?UTF-8?q?=20wrap=20Tldraw=20in=20ErrorBoundary=20(J1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added import for ErrorBoundary from src/components/ErrorBoundary.tsx
- Wrapped {store && <Tldraw>} block in ErrorBoundary with 'Canvas failed to load — Reload' fallback
- ErrorBoundary.tsx already existed with full error/reload UI
- Timetable pages (J2) already have loading states via timetableStore loading flags
- tsc: 177 (master baseline) → 173 on this branch (no regression)
---
 src/pages/tldraw/singlePlayerPage.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/pages/tldraw/singlePlayerPage.tsx b/src/pages/tldraw/singlePlayerPage.tsx
index 4ab47fa..dbb5497 100644
--- a/src/pages/tldraw/singlePlayerPage.tsx
+++ b/src/pages/tldraw/singlePlayerPage.tsx
@@ -34,6 +34,7 @@ import '../../utils/tldraw/tldraw.css';
 // App debug
 import { logger } from '../../debugConfig';
 import { CircularProgress, Alert, Snackbar } from '@mui/material';
+import { ErrorBoundary } from '../../components/ErrorBoundary';
 import { getThemeFromLabel } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-styles';
 import { NodeData } from '../../types/graph-shape';
 import { NavigationNode } from '../../types/navigation';
@@ -513,6 +514,12 @@ export default function SinglePlayerPage() {
                 </Alert>
             </Snackbar>
 
+            <ErrorBoundary fallback={
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: '1rem', padding: '2rem' }}>
+                    <p style={{ fontSize: '1.1rem' }}>Canvas failed to load.</p>
+                    <button onClick={() => window.location.reload()} style={{ padding: '0.5rem 1.25rem', cursor: 'pointer' }}>Reload</button>
+                </div>
+            }>
             {store && <Tldraw
                 user={tldrawUser}
                 store={store}
@@ -559,6 +566,7 @@ export default function SinglePlayerPage() {
                     }
                 }}
             />}
+            </ErrorBoundary>
         </div>
     );
 }