Display an error message if the workspace fails to render.

lynxkite-app/web/src/main.tsx

@@ -2,21 +2,52 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "@xyflow/react/dist/style.css";
 import "./index.css";
-import { BrowserRouter, Route, Routes } from "react-router";
+import {
+  Link,
+  Route,
+  RouterProvider,
+  createBrowserRouter,
+  createRoutesFromElements,
+  useRouteError,
+} from "react-router";
 import Code from "./Code.tsx";
 import Directory from "./Directory.tsx";
 import Workspace from "./workspace/Workspace.tsx";
 
+function WorkspaceError() {
+  const error = useRouteError();
+  const stack = error instanceof Error ? error.stack : null;
+  return (
+    <div className="hero min-h-screen">
+      <div className="card bg-base-100 shadow-sm">
+        <div className="card-body">
+          <h2 className="card-title">Something went wrong...</h2>
+          <pre>{stack || "Unknown error."}</pre>
+          <div className="card-actions justify-end">
+            <Link to="/" className="btn btn-primary">
+              Close workspace
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <>
+      <Route path="/" element={<Directory />} />
+      <Route path="/dir" element={<Directory />} />
+      <Route path="/dir/*" element={<Directory />} />
+      <Route path="/edit/*" element={<Workspace />} errorElement={<WorkspaceError />} />
+      <Route path="/code/*" element={<Code />} />
+    </>,
+  ),
+);
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Directory />} />
-        <Route path="/dir" element={<Directory />} />
-        <Route path="/dir/*" element={<Directory />} />
-        <Route path="/edit/*" element={<Workspace />} />
-        <Route path="/code/*" element={<Code />} />
-      </Routes>
-    </BrowserRouter>
+    <RouterProvider router={router} />
   </StrictMode>,
 );