Add an error boundary and split the bundle (0.50.0)

F15 — Two unrelated frontend weaknesses.

A render error unmounted the whole React tree: a white window, no navigation,
no indication of what happened, and the only way out was knowing to reload.
ErrorBoundary now shows the message with a retry and a reload, and clears itself
when resetKey (the route) changes, so navigating to a working page just works
instead of staying stuck. There are two: one inside AppShell around the routed
pages, one at the root for the shell itself and the login screen, which sit
outside it.

The bundle was one 841 kB file (234 kB gzipped) every visitor downloaded in
full, with Vite warning about it on every build. Routes are lazy now and the
entry chunk is 377 kB (120 kB gzipped) — a 55% cut, warning gone.

Measuring first changed what to split. Monaco turned out not to be in the bundle
at all: @monaco-editor/react loads it from cdn.jsdelivr.net, so only the small
wrapper ships. xterm.js *is* bundled, all 294 kB of it, and it was reachable
from ContainerCard — which renders on every stack detail page — so every visitor
paid for a terminal most never open. It is lazy now and lands in its own chunk.

(Worth knowing separately: the compose editor therefore needs jsdelivr.net
reachable. For a self-hosted tool on an air-gapped network that is a real
limitation, but vendoring Monaco means +3 MB and is its own change.)

Adding a boundary whose behaviour I could only reason about was not good enough,
and the missing frontend test runner was already flagged as the gap from 0.49.0.
So this also sets up vitest + jsdom + testing-library and covers the boundary:
that it renders the error rather than a blank page, offers a way out, clears on
navigation, and stays put on an unrelated re-render. CI runs `npm test` next to
pytest.

One snag worth recording: installing the dev dependencies triggered npm's
optional-dependency pruning and dropped @rollup/rollup-linux-x64-gnu, which
broke the build. Reinstalling it directly put a linux-x64-glibc binary in
package.json, which would have broken `npm ci` on every other platform — so that
was backed out and the lockfile now carries the bindings as rollup's optional
deps, where they belong. Verified with a clean `npm ci` in a scratch copy:
install, typecheck, build and test all pass from the committed lockfile.

758 backend tests, 7 frontend tests.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Dk43rmEeRfYi5wsLDbmfyG

frontend/src/components/ui/ErrorBoundary.tsx

@@ -0,0 +1,75 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui";
+
+/**
+ * Catches render errors so one broken page does not blank the whole app.
+ *
+ * Without this, any exception thrown while rendering unmounts the entire React
+ * tree: the user gets a white window with no navigation and no indication of
+ * what happened, and the only way out is to know to reload. React offers no
+ * hook equivalent — catching render errors requires a class component.
+ *
+ * `resetKey` is how the boundary recovers on navigation: change it (the route
+ * path) and the boundary clears, so moving to a working page just works instead
+ * of staying stuck on the error screen.
+ */
+
+interface Props {
+  children: ReactNode;
+  /** Changing this clears a caught error — pass the current route. */
+  resetKey?: string;
+}
+
+interface State {
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { error: null };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  componentDidUpdate(prev: Props) {
+    if (this.state.error && prev.resetKey !== this.props.resetKey) {
+      this.setState({ error: null });
+    }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    // The browser console is the only place this can go — there is no error
+    // reporting backend, and inventing one is not this component's job.
+    console.error("Render error:", error, info.componentStack);
+  }
+
+  render() {
+    const { error } = this.state;
+    if (!error) return this.props.children;
+
+    return (
+      <div className="sp-card mx-auto max-w-2xl p-6">
+        <div className="mb-3 flex items-center gap-2">
+          <AlertTriangle className="h-5 w-5 text-red-500" />
+          <h2 className="sp-heading text-lg">This page hit an error</h2>
+        </div>
+        <p className="mb-4 text-sm text-sp-text-2">
+          The rest of StackPilot is still running — your stacks are unaffected.
+          Try again, or pick another page from the menu.
+        </p>
+        <pre className="mb-4 max-h-48 overflow-auto rounded-lg bg-sp-surface-2 p-3 font-mono text-xs text-sp-text-2">
+          {error.message || String(error)}
+        </pre>
+        <div className="flex gap-2">
+          <Button onClick={() => this.setState({ error: null })}>
+            <RefreshCw className="h-4 w-4" /> Try again
+          </Button>
+          <Button variant="outline" onClick={() => window.location.reload()}>
+            Reload the page
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}