Enhance error handling and diagnostics in UI

[valuecodes]

What

This update introduces an AppErrorBoundary component for improved error handling during rendering, ensuring users receive a clear message when an error occurs. A noscript fallback is added for users without JavaScript enabled, enhancing accessibility. Additionally, a bundle analysis command is included to help developers understand the UI build size. A DeveloperHud component is implemented for real-time diagnostics, providing insights into rendering performance and event status.

• Added AppErrorBoundary for catching rendering errors and displaying user-friendly messages.

• Implemented a noscript fallback for users without JavaScript.

• Introduced a command for bundle analysis to optimize UI builds.

• Created DeveloperHud for real-time diagnostics, enhancing developer experience.

How to test

• Run pnpm start to launch the application and verify that the error boundary displays correctly when an error is thrown.

• Disable JavaScript in the browser and confirm that the noscript fallback is displayed.

• Execute pnpm --filter rehoboam-ui bundle:analyze to analyze the bundle size.

• Check the DeveloperHud by enabling diagnostics in the application settings and observing the real-time updates.

Security review

• Secrets / env vars: not changed.

• Auth / session: not changed.

• Network / API calls: not changed.

• Data handling / PII: not changed.

• Dependencies: added. Introduced vite-bundle-analyzer for bundle analysis.

No security-impacting changes identified.

• No new dependencies and no network calls.

• No env var changes and no auth/session logic touched.

[Copilot]

Pull request overview

This PR improves UI resilience and developer diagnostics by adding a React error boundary for render-time crashes, introducing a no-JS fallback experience, and instrumenting the Rehoboam renderer/scene with optional render diagnostics surfaced via a lazy-loaded Developer HUD. It also adds a bundle analysis command and documents the new workflow.

Changes:

• Add AppErrorBoundary (with styling + tests) and wire it into the UI entrypoint.
• Add optional render diagnostics collection + a lazy-loaded DeveloperHud overlay (enabled via ?hud).
• Add a <noscript> fallback in index.html and introduce a bundle analysis script + dependency.

Reviewed changes

Copilot reviewed 19 out of 20 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Locks new vite-bundle-analyzer dependency.
apps/ui/package.json	Adds bundle:analyze script and vite-bundle-analyzer devDependency.
apps/ui/AGENTS.md	Documents running bundle analysis for the UI.
README.md	Documents bundle:analyze usage in repo-level instructions.
apps/ui/index.html	Adds a styled <noscript> fallback UI.
apps/ui/src/main.tsx	Wraps app root with AppErrorBoundary; adjusts font imports.
apps/ui/src/shared/errors/app-error-boundary.tsx	New error boundary component + reload UX.
apps/ui/src/shared/errors/app-error-boundary.css	Styling for the error boundary fallback UI.
apps/ui/src/tests/shared/errors/app-error-boundary.test.tsx	Tests for nominal render and fallback behavior.
apps/ui/src/features/rehoboam/data/bootstrap.ts	Adds refreshEventsFromSourceWithStatus returning { events, status } and keeps legacy wrapper.
apps/ui/src/tests/rehoboam/data/bootstrap.test.ts	Adds coverage for the new status-returning refresh helper.
apps/ui/src/features/rehoboam/engine/types.ts	Introduces RehoboamRenderDiagnostics and optional diagnostics on render snapshots; adds diagnosticsEnabled options.
apps/ui/src/features/rehoboam/engine/rehoboam-engine.ts	Forwards diagnosticsEnabled to the renderer factory.
apps/ui/src/features/rehoboam/render/canvas2d/render-diagnostics.ts	New per-frame diagnostics collector with pass timing.
apps/ui/src/features/rehoboam/render/canvas2d/renderer-2d.ts	Measures render pass timings, emits optional diagnostics, and draws the contour pass.
apps/ui/src/features/rehoboam/render/canvas2d/passes/event-contour-pass.ts	Refactors contour pass input to accept precomputed eventAngles.
apps/ui/src/tests/rehoboam/render/renderer-2d.test.ts	Adds test for diagnostics emission + contour rendering behavior.
apps/ui/src/features/rehoboam/overlay/developer-hud.tsx	New Developer HUD component for cache/network/quality + render pass metrics.
apps/ui/src/features/rehoboam/scene/rehoboam-scene.tsx	Adds HUD query flag, publishes diagnostics on an interval, and tracks cache/network status.
apps/ui/src/features/rehoboam/scene/rehoboam-scene.css	Adds styling for the developer HUD overlay.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

PR description says "No new dependencies", but this change adds the new devDependency vite-bundle-analyzer. Please update the PR description/security review section to reflect the added dependency (and why it’s needed).

[Copilot]

refreshEventsFromSourceWithStatus introduces a new observable behavior (status: "success" | "fallback"), but the tests only cover the success case. Please add a companion test that forces the source to throw and asserts { status: "fallback", events: existingEvents } to prevent regressions in the fallback path.

Suggested change

	it("falls back to existing events and reports fallback status when source throws", async () => {
	const existingEvents: readonly WorldEvent[] = [
	createEvent({
	id: "event-6",
	title: "Cached fallback for status",
	severity: "high",
	}),
	];
	const source: RehoboamEventSource = {
	loadEvents: () => {
	return Promise.reject(new Error("Source unavailable"));
	},
	};
	await expect(
	refreshEventsFromSourceWithStatus({
	existingEvents,
	source,
	})
	).resolves.toStrictEqual({
	events: existingEvents,
	status: "fallback",
	});
	});