feat(app): render dashboard with react

src/page.test.tsx

@@ -0,0 +1,73 @@
+import { renderToString } from "react-dom/server";
+import { describe, expect, test } from "vitest";
+import { genericDashboardFixture } from "$lib/model/fixtures/generic";
+import { AppStateView } from "./App";
+
+describe("home page model renderer", () => {
+  test("renders the active dashboard model from the runtime state", () => {
+    const body = renderToString(
+      <AppStateView
+        dashboard={{
+          state: "ready",
+          document: genericDashboardFixture,
+          schemaVersion: "dashboard.v1",
+          currentRevisionId: "revision-1234567890",
+        }}
+      />,
+    );
+
+    expect(body).toContain("Operations Console");
+    expect(body).toContain("Service Uptime");
+    expect(body).toContain("Identity");
+    expect(body).toContain("data-model-id=\"service-uptime\"");
+    expect(body).not.toContain("primary");
+    expect(body).not.toContain("secondary");
+  });
+
+  test("renders invalid model state without crashing", () => {
+    const body = renderToString(
+      <AppStateView
+        dashboard={{
+          state: "invalid",
+          title: "Invalid Dashboard",
+          subtitle: "Validation failed",
+          message: "Dashboard document is invalid.",
+          errors: ["/metadata/title is required"],
+        }}
+      />,
+    );
+
+    expect(body).toContain("Invalid Dashboard");
+    expect(body).toContain("Validation failed");
+    expect(body).toContain("Dashboard document is invalid.");
+    expect(body).toContain("/metadata/title is required");
+  });
+
+  test("renders empty and loading model states without crashing", () => {
+    const empty = renderToString(
+      <AppStateView
+        dashboard={{
+          state: "empty",
+          title: "No Dashboard Model",
+          subtitle: "No active document",
+          message: "No validated dashboard document is active yet.",
+        }}
+      />,
+    );
+    const loading = renderToString(
+      <AppStateView
+        dashboard={{
+          state: "loading",
+          title: "Loading Dashboard",
+          subtitle: "Fetching active model",
+          message: "Waiting for the active dashboard document.",
+        }}
+      />,
+    );
+
+    expect(empty).toContain("No Dashboard Model");
+    expect(empty).toContain("No active document");
+    expect(loading).toContain("Loading Dashboard");
+    expect(loading).toContain("Fetching active model");
+  });
+});