feat: render dashboard from model

src/lib/server/dashboard.test.ts

@@ -4,6 +4,7 @@ import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { afterEach, describe, expect, test } from "vitest";
 import { dimensionLabDashboardFixture } from "$lib/model/fixtures/dimensionlab";
+import { genericDashboardFixture } from "$lib/model/fixtures/generic";
 import { createDashboardStore, type DashboardStore } from "./db/dashboard-store";
 import { loadDashboardRuntime } from "./dashboard";
 
@@ -21,13 +22,30 @@ describe("dashboard runtime loader", () => {
 
     const runtime = loadDashboardRuntime(store);
 
-    expect(runtime.title).toBe(dimensionLabDashboardFixture.metadata.title);
-    expect(runtime.subtitle).toBe(dimensionLabDashboardFixture.metadata.subtitle);
-    expect(runtime.status).toBe("building");
+    expect(runtime.state).toBe("ready");
+    if (runtime.state !== "ready") throw new Error("expected ready dashboard");
+    expect(runtime.document.metadata.title).toBe(dimensionLabDashboardFixture.metadata.title);
+    expect(runtime.document.metadata.subtitle).toBe(dimensionLabDashboardFixture.metadata.subtitle);
     expect(runtime.schemaVersion).toBe(dimensionLabDashboardFixture.schemaVersion);
     expect(runtime.currentRevisionId).toBe(store.getActiveDashboard()?.currentRevisionId);
     expect(store.listRevisions()).toHaveLength(1);
   });
+
+  test("loads an existing active dashboard without reseeding", async () => {
+    const store = await createTestStore();
+    const seed = store.commitDashboard(genericDashboardFixture, {
+      actor: "test",
+      message: "existing dashboard",
+    });
+
+    const runtime = loadDashboardRuntime(store);
+
+    expect(runtime.state).toBe("ready");
+    if (runtime.state !== "ready") throw new Error("expected ready dashboard");
+    expect(runtime.currentRevisionId).toBe(seed.id);
+    expect(runtime.document.metadata.title).toBe(genericDashboardFixture.metadata.title);
+    expect(store.listRevisions()).toHaveLength(1);
+  });
 });
 
 async function createTestStore() {

src/lib/server/dashboard.ts

@@ -1,31 +1,42 @@
 import { dimensionLabDashboardFixture } from "$lib/model/fixtures/dimensionlab";
+import type { DashboardDocument } from "$lib/model";
 import {
   createDashboardStore,
+  DashboardPersistenceValidationError,
   type DashboardStore,
 } from "$lib/server/db/dashboard-store";
+import { UnsupportedDashboardModelVersionError } from "$lib/server/db/model-migrations";
 
-export type PlaceholderStatus = "ready" | "building";
+export type DashboardRuntimeState =
+  | DashboardRuntimeEmpty
+  | DashboardRuntimeInvalid
+  | DashboardRuntimeReady;
 
-export interface PlaceholderDashboard {
+export interface DashboardRuntimeReady {
+  state: "ready";
+  document: DashboardDocument;
+  schemaVersion: string;
+  currentRevisionId: string;
+}
+
+export interface DashboardRuntimeEmpty {
+  state: "empty";
   title: string;
   subtitle: string;
-  status: PlaceholderStatus;
   message: string;
-  schemaVersion?: string;
-  currentRevisionId?: string;
 }
 
-export function loadPlaceholderDashboard(): PlaceholderDashboard {
-  return {
-    title: "Dashboard Runtime",
-    subtitle: "Runtime scaffold",
-    status: "building",
-    message:
-      "SvelteKit is running. Later issues will replace this placeholder with the validated dashboard model.",
-  };
+export interface DashboardRuntimeInvalid {
+  state: "invalid";
+  title: string;
+  subtitle: string;
+  message: string;
+  errors: string[];
 }
 
-export function loadDashboardRuntime(store?: DashboardStore): PlaceholderDashboard {
+export function loadDashboardRuntime(
+  store?: DashboardStore,
+): DashboardRuntimeState {
   const dashboardStore = store || createDashboardStore();
 
   try {
@@ -37,16 +48,42 @@ export function loadDashboardRuntime(store?: DashboardStore): PlaceholderDashboa
     const document = active?.document || seeded.document;
     const currentRevisionId = active?.currentRevisionId || seeded.id;
 
+    if (!document) {
+      return {
+        state: "empty",
+        title: "No Dashboard Model",
+        subtitle: "No active document",
+        message: "No validated dashboard document is active yet.",
+      };
+    }
+
     return {
-      title: document.metadata.title,
-      subtitle: document.metadata.subtitle || "",
-      status: "building",
-      message:
-        "Active dashboard document loaded from SQLite. Later issues will replace this placeholder with model-driven rendering.",
+      state: "ready",
+      document,
       schemaVersion: document.schemaVersion,
       currentRevisionId,
     };
+  } catch (error) {
+    if (error instanceof DashboardPersistenceValidationError) {
+      return invalidRuntimeState(error.failure.errors);
+    }
+
+    if (error instanceof UnsupportedDashboardModelVersionError) {
+      return invalidRuntimeState([error.message]);
+    }
+
+    throw error;
   } finally {
     if (!store) dashboardStore.close();
   }
 }
+
+function invalidRuntimeState(errors: string[]): DashboardRuntimeInvalid {
+  return {
+    state: "invalid",
+    title: "Invalid Dashboard Model",
+    subtitle: "Validation failed",
+    message: "The active dashboard document could not be validated.",
+    errors,
+  };
+}

src/lib/ui/components/FooterCell.svelte

@@ -16,6 +16,7 @@
   <a
     class="footer-cell"
     data-severity={item.severity || "neutral"}
+    data-model-id={item.id}
     href={item.link.href}
     target={target}
     rel={rel}
@@ -24,7 +25,7 @@
     {@render cellContent()}
   </a>
 {:else}
-  <div class="footer-cell" data-severity={item.severity || "neutral"}>
+  <div class="footer-cell" data-severity={item.severity || "neutral"} data-model-id={item.id}>
     {@render cellContent()}
   </div>
 {/if}

src/lib/ui/components/ModuleCard.svelte

@@ -5,7 +5,7 @@
   let { module }: { module: UiModuleBlock } = $props();
 </script>
 
-<aside class="module-card" data-severity={module.severity || "neutral"}>
+<aside class="module-card" data-severity={module.severity || "neutral"} data-model-id={module.id}>
   <div>
     {#if module.title}
       <h2>{module.title}</h2>

src/lib/ui/components/ServiceRow.svelte

@@ -24,6 +24,7 @@
   <a
     class="service-row"
     data-severity={service.severity}
+    data-model-id={service.id}
     href={service.link.href}
     target={target}
     rel={rel}
@@ -32,7 +33,7 @@
     {@render rowContent()}
   </a>
 {:else}
-  <article class="service-row" data-severity={service.severity}>
+  <article class="service-row" data-severity={service.severity} data-model-id={service.id}>
     {@render rowContent()}
   </article>
 {/if}

src/lib/ui/components/TelemetryCard.svelte

@@ -9,7 +9,7 @@
   let value = $derived(formatMetricValue(card.value));
 </script>
 
-<article class="telemetry-card" data-severity={card.severity}>
+<article class="telemetry-card" data-severity={card.severity} data-model-id={card.id}>
   <header>
     {#if card.icon}
       <IconGlyph name={card.icon} size="sm" />

src/lib/ui/index.ts

@@ -23,6 +23,7 @@ export { default as TelemetryGrid } from "./components/TelemetryGrid.svelte";
 export { default as TelemetryStrip } from "./components/TelemetryStrip.svelte";
 export { default as WeatherModule } from "./components/WeatherModule.svelte";
 export { dashboardPreviewFixtures } from "./fixtures";
+export { dashboardDocumentToUiDashboard } from "./model-renderer";
 export type {
   UiDashboardPreview,
   UiLink,

src/lib/ui/model-renderer.test.ts

@@ -0,0 +1,90 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, test } from "vitest";
+import {
+  type DashboardDocument,
+} from "$lib/model";
+import { dimensionLabDashboardFixture } from "$lib/model/fixtures/dimensionlab";
+import { genericDashboardFixture } from "$lib/model/fixtures/generic";
+import { dashboardDocumentToUiDashboard } from "./model-renderer";
+
+describe("dashboard model renderer", () => {
+  test("projects the Dimension Lab model into UI component props", () => {
+    const dashboard = dashboardDocumentToUiDashboard(dimensionLabDashboardFixture);
+
+    expect(dashboard.title).toBe(dimensionLabDashboardFixture.metadata.title);
+    expect(dashboard.subtitle).toBe(dimensionLabDashboardFixture.metadata.subtitle);
+    expect(dashboard.telemetry.map((card) => card.id)).toEqual(
+      dimensionLabDashboardFixture.layout.telemetry,
+    );
+    expect(dashboard.telemetry[0]).toMatchObject({
+      label: "Infra RAM",
+      icon: "mdi:memory",
+      severity: "ok",
+    });
+    expect(dashboard.serviceGroups.map((group) => group.id)).toEqual(
+      dimensionLabDashboardFixture.layout.serviceGroups,
+    );
+    expect(dashboard.modules.map((module) => module.id)).toEqual([
+      "weather-amsterdam",
+      "runtime-health-summary",
+    ]);
+    expect(dashboard.statusItems.map((item) => item.id)).toEqual([
+      "footer-status:system-status",
+      "footer-status:last-sync",
+      "footer-status:uptime",
+      "footer-status:load-avg",
+    ]);
+  });
+
+  test("projects a second fixture through the same mapper", () => {
+    const dashboard = dashboardDocumentToUiDashboard(genericDashboardFixture);
+
+    expect(dashboard.title).toBe("Operations Console");
+    expect(dashboard.telemetry.map((card) => card.id)).toEqual([
+      "service-uptime",
+      "queue-depth",
+    ]);
+    expect(dashboard.serviceGroups[0]?.services.map((service) => service.id)).toEqual([
+      "identity",
+      "scheduler",
+    ]);
+    expect(dashboard.modules[0]).toMatchObject({
+      id: "ambient",
+      title: "Environment",
+      icon: "mdi:radar",
+    });
+  });
+
+  test("returns intentional empty arrays for missing optional sections", () => {
+    const emptyModel: DashboardDocument = {
+      ...genericDashboardFixture,
+      layout: {
+        density: "compact",
+        telemetry: [],
+        serviceGroups: [],
+        statusStrips: [],
+        modules: [],
+      },
+      telemetry: [],
+      serviceGroups: [],
+      statusStrips: [],
+      modules: [],
+    };
+
+    const dashboard = dashboardDocumentToUiDashboard(emptyModel);
+
+    expect(dashboard.telemetry).toEqual([]);
+    expect(dashboard.serviceGroups).toEqual([]);
+    expect(dashboard.statusItems).toEqual([]);
+    expect(dashboard.modules).toEqual([]);
+  });
+
+  test("does not hardcode environment-specific content in mapper source", () => {
+    const source = readFileSync(join(process.cwd(), "src/lib/ui/model-renderer.ts"), "utf8").toLowerCase();
+
+    expect(source).not.toContain("dimension");
+    expect(source).not.toContain("vaultwarden");
+    expect(source).not.toContain("forgejo");
+  });
+});

src/lib/ui/model-renderer.ts

@@ -0,0 +1,109 @@
+import type {
+  DashboardDocument,
+  DashboardModule,
+  ServiceEntry,
+  ServiceGroup,
+  StatusItem,
+  StatusStrip,
+  TelemetryCard,
+} from "$lib/model";
+import type {
+  UiDashboardPreview,
+  UiModuleBlock,
+  UiServiceGroup,
+  UiServiceRow,
+  UiStatusItem,
+  UiTelemetryCard,
+} from "./types";
+
+export function dashboardDocumentToUiDashboard(
+  document: DashboardDocument,
+): UiDashboardPreview {
+  return {
+    eyebrow: document.schemaVersion,
+    title: document.metadata.title,
+    subtitle: document.metadata.subtitle,
+    telemetry: orderedItems(document.layout.telemetry, document.telemetry).map(
+      telemetryToUi,
+    ),
+    serviceGroups: orderedItems(
+      document.layout.serviceGroups,
+      document.serviceGroups,
+    ).map(serviceGroupToUi),
+    modules: orderedItems(
+      document.layout.modules || [],
+      document.modules || [],
+    ).map(moduleToUi),
+    statusItems: orderedItems(
+      document.layout.statusStrips,
+      document.statusStrips,
+    ).flatMap(statusStripToUiItems),
+  };
+}
+
+function telemetryToUi(card: TelemetryCard): UiTelemetryCard {
+  return {
+    id: card.id,
+    label: card.label,
+    description: card.description,
+    icon: card.icon,
+    value: card.value,
+    detail: card.detail,
+    severity: card.severity,
+    sparkline: card.sparkline,
+  };
+}
+
+function serviceGroupToUi(group: ServiceGroup): UiServiceGroup {
+  return {
+    id: group.id,
+    title: group.title,
+    services: group.services.map(serviceToUi),
+  };
+}
+
+function serviceToUi(service: ServiceEntry): UiServiceRow {
+  return {
+    id: service.id,
+    label: service.label,
+    description: service.description,
+    icon: service.icon,
+    severity: service.severity,
+    detail: service.detail,
+    link: service.link,
+  };
+}
+
+function moduleToUi(module: DashboardModule): UiModuleBlock {
+  return {
+    id: module.id,
+    title: module.title,
+    label: module.label,
+    value: module.value,
+    detail: module.detail,
+    icon: module.icon,
+    severity: module.severity,
+  };
+}
+
+function statusStripToUiItems(strip: StatusStrip): UiStatusItem[] {
+  return strip.items.map((item) => statusItemToUi(strip.id, item));
+}
+
+function statusItemToUi(stripId: string, item: StatusItem): UiStatusItem {
+  return {
+    id: `${stripId}:${item.id}`,
+    label: item.label,
+    value: item.value,
+    severity: item.severity,
+    link: item.link,
+  };
+}
+
+function orderedItems<T extends { id: string }>(ids: string[], items: T[]): T[] {
+  const byId = new Map(items.map((item) => [item.id, item]));
+  return ids.flatMap((id) => {
+    const item = byId.get(id);
+    return item ? [item] : [];
+  });
+}

src/routes/+page.svelte

@@ -1,124 +1,80 @@
 <script lang="ts">
-  import { DashboardFrame, dashboardPreviewFixtures } from "$lib/ui";
+  import {
+    DashboardFrame,
+    SystemState,
+    dashboardDocumentToUiDashboard,
+  } from "$lib/ui";
   import type { PageData } from "./$types";
 
   let { data }: { data: PageData } = $props();
 
-  const fixtureKeys = ["runtime", "primary", "secondary"] as const;
-  let selectedFixture: (typeof fixtureKeys)[number] = $state("runtime");
-  let runtimeDashboard = $derived({
-    ...dashboardPreviewFixtures.primary,
-    eyebrow: data.dashboard.schemaVersion || "Runtime",
-    title: data.dashboard.title,
-    subtitle: data.dashboard.subtitle,
-    modules: [
-      {
-        id: "runtime-state",
-        title: "Runtime",
-        value: data.dashboard.status,
-        detail: data.dashboard.message,
-        icon: "mdi:database-check-outline",
-        severity: "loading" as const,
-      },
-    ],
-    statusItems: [
-      {
-        id: "runtime-status",
-        label: "Runtime",
-        value: data.dashboard.status,
-        severity: "loading" as const,
-      },
-      {
-        id: "schema-version",
-        label: "Schema",
-        value: data.dashboard.schemaVersion || "pending",
-        severity: "neutral" as const,
-      },
-      {
-        id: "revision",
-        label: "Revision",
-        value: data.dashboard.currentRevisionId?.slice(0, 12) || "pending",
-        severity: "stale" as const,
-      },
-    ],
-  });
   let dashboard = $derived(
-    selectedFixture === "runtime"
-      ? runtimeDashboard
-      : dashboardPreviewFixtures[selectedFixture],
+    data.dashboard.state === "ready"
+      ? dashboardDocumentToUiDashboard(data.dashboard.document)
+      : null,
+  );
+  let stateTitle = $derived(
+    data.dashboard.state === "ready" ? "" : data.dashboard.title,
+  );
+  let stateSubtitle = $derived(
+    data.dashboard.state === "ready" ? "" : data.dashboard.subtitle,
+  );
+  let stateMessage = $derived(
+    data.dashboard.state === "ready" ? "" : data.dashboard.message,
+  );
+  let stateErrors = $derived(
+    data.dashboard.state === "invalid" ? data.dashboard.errors : [],
+  );
+  let pageTitle = $derived(dashboard?.title || stateTitle);
+  let pageDescription = $derived(
+    dashboard?.subtitle || stateSubtitle || stateMessage,
   );
 </script>
 
 <svelte:head>
-  <title>{dashboard.title}</title>
-  <meta
-    name="description"
-    content="Standalone SvelteKit runtime for a model-driven system overview dashboard."
-  />
+  <title>{pageTitle}</title>
+  <meta name="description" content={pageDescription} />
 </svelte:head>
 
-<div class="preview-shell">
-  <div class="fixture-switcher" aria-label="Preview fixture">
-    {#each fixtureKeys as key}
-      <button
-        type="button"
-        class:active={selectedFixture === key}
-        aria-pressed={selectedFixture === key}
-        onclick={() => {
-          selectedFixture = key;
-        }}
-      >
-        {key}
-      </button>
-    {/each}
-  </div>
-
+{#if dashboard}
   <DashboardFrame {dashboard} />
-</div>
+{:else}
+  <main class="state-shell" data-dashboard-state={data.dashboard.state}>
+    <SystemState
+      title={stateTitle}
+      detail={`${stateSubtitle}: ${stateMessage}`}
+      severity={data.dashboard.state === "invalid" ? "danger" : "stale"}
+      icon={data.dashboard.state === "invalid" ? "mdi:file-alert-outline" : "mdi:tray"}
+    />
+    {#if stateErrors.length}
+      <ul aria-label="Validation errors">
+        {#each stateErrors as error}
+          <li>{error}</li>
+        {/each}
+      </ul>
+    {/if}
+  </main>
+{/if}
 
 <style>
-  .preview-shell {
-    position: relative;
+  .state-shell {
+    display: grid;
     min-height: 100vh;
+    align-content: center;
+    gap: var(--ui-space-3);
+    padding: var(--ui-space-4);
   }
 
-  .fixture-switcher {
-    position: fixed;
-    z-index: var(--ui-z-overlay);
-    top: var(--ui-space-3);
-    right: var(--ui-space-3);
-    display: inline-grid;
-    grid-auto-flow: column;
-    gap: 1px;
+  ul {
+    display: grid;
+    max-width: 56rem;
+    gap: var(--ui-space-2);
+    margin: 0;
     border: var(--ui-border);
-    background: var(--ui-color-line);
-  }
-
-  button {
-    min-width: 5.5rem;
-    min-height: 2rem;
-    border: 0;
-    background: rgba(2, 3, 2, 0.92);
+    background: rgba(6, 8, 7, 0.82);
     color: var(--ui-color-muted);
-    cursor: pointer;
-    font-size: 0.72rem;
-    font-weight: 800;
-    letter-spacing: 0;
-    text-transform: uppercase;
-  }
-
-  button.active {
-    background: var(--ui-color-accent);
-    color: var(--ui-color-canvas);
-  }
-
-  @media (max-width: 780px) {
-    .fixture-switcher {
-      position: sticky;
-      top: 0;
-      right: auto;
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-    }
+    font-size: 0.76rem;
+    list-style-position: inside;
+    padding: var(--ui-space-3);
   }
 </style>

src/routes/page.test.ts

@@ -1,17 +1,16 @@
 import { render } from "svelte/server";
 import { describe, expect, test } from "vitest";
+import { genericDashboardFixture } from "$lib/model/fixtures/generic";
 import Page from "./+page.svelte";
 
-describe("home page design-system preview", () => {
-  test("renders the runtime dashboard data from the server load", () => {
+describe("home page model renderer", () => {
+  test("renders the active dashboard model from the server load", () => {
     const { body } = render(Page, {
       props: {
         data: {
           dashboard: {
-            title: "Runtime Surface",
-            subtitle: "Loaded from persistence",
-            status: "building",
-            message: "Runtime model is available.",
+            state: "ready",
+            document: genericDashboardFixture,
             schemaVersion: "dashboard.v1",
             currentRevisionId: "revision-1234567890",
           },
@@ -19,10 +18,31 @@ describe("home page design-system preview", () => {
       },
     });
 
-    expect(body).toContain("Runtime Surface");
-    expect(body).toContain("Loaded from persistence");
-    expect(body).toContain("revision");
-    expect(body).toContain("primary");
-    expect(body).toContain("secondary");
+    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 } = render(Page, {
+      props: {
+        data: {
+          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.");
   });
 });