fix: detect CSS preload errors and keep banner visible during error states

- Add "unable to preload" pattern to isChunkError for Vite CSS preload failures
- Move ConnectionMonitor and ConnectionBanner outside ErrorBoundary so they
  remain visible when the error boundary catches a render crash
- Add test for CSS preload error retry

apps/web/src/App.tsx

@@ -167,9 +167,10 @@ function ConnectionMonitor() {
 
 export function App() {
   return (
-    <ErrorBoundary>
+    <>
       <ConnectionMonitor />
       <ConnectionBanner />
+      <ErrorBoundary>
         <Toaster position="bottom-right" />
         <BrowserRouter>
           <KeyboardShortcutProvider>
@@ -188,7 +189,10 @@ export function App() {
                     element={<Navigate to="/adjust-colors" replace />}
                   />
                   <Route path="/saturation" element={<Navigate to="/adjust-colors" replace />} />
-                <Route path="/color-channels" element={<Navigate to="/adjust-colors" replace />} />
+                  <Route
+                    path="/color-channels"
+                    element={<Navigate to="/adjust-colors" replace />}
+                  />
                   <Route path="/color-effects" element={<Navigate to="/adjust-colors" replace />} />
                   <Route path="/:toolId" element={<ToolPage />} />
                   <Route path="/" element={<HomePage />} />
@@ -198,5 +202,6 @@ export function App() {
           </KeyboardShortcutProvider>
         </BrowserRouter>
       </ErrorBoundary>
+    </>
   );
 }

apps/web/src/lib/lazy-with-retry.ts

@@ -7,7 +7,8 @@ export function isChunkError(error: unknown): boolean {
     msg.includes("dynamically imported module") ||
     msg.includes("loading chunk") ||
     msg.includes("loading css chunk") ||
-    msg.includes("failed to fetch")
+    msg.includes("failed to fetch") ||
+    msg.includes("unable to preload")
   );
 }
 

tests/unit/web/lazy-with-retry.test.ts

@@ -33,6 +33,19 @@ describe("retryDynamicImport", () => {
     expect(importFn).toHaveBeenCalledTimes(3);
   });
 
+  it("retries CSS preload errors", async () => {
+    const mod = { default: () => null };
+    const importFn = vi
+      .fn()
+      .mockRejectedValueOnce(
+        new TypeError("Unable to preload CSS for /assets/tool-page-DDbXBANV.css"),
+      )
+      .mockResolvedValue(mod);
+    const result = await retryDynamicImport(importFn, 3, 0);
+    expect(result).toBe(mod);
+    expect(importFn).toHaveBeenCalledTimes(2);
+  });
+
   it("only retries chunk-related errors, not other errors", async () => {
     const err = new Error("Some other error");
     const importFn = vi.fn().mockRejectedValue(err);