fix: complete model renderer states and ids

src/lib/server/dashboard.ts

@@ -10,6 +10,7 @@ import { UnsupportedDashboardModelVersionError } from "$lib/server/db/model-migr
 export type DashboardRuntimeState =
   | DashboardRuntimeEmpty
   | DashboardRuntimeInvalid
+  | DashboardRuntimeLoading
   | DashboardRuntimeReady;
 
 export interface DashboardRuntimeReady {
@@ -26,6 +27,13 @@ export interface DashboardRuntimeEmpty {
   message: string;
 }
 
+export interface DashboardRuntimeLoading {
+  state: "loading";
+  title: string;
+  subtitle: string;
+  message: string;
+}
+
 export interface DashboardRuntimeInvalid {
   state: "invalid";
   title: string;

src/lib/ui/components/DashboardFrame.svelte

@@ -44,7 +44,7 @@
     {/each}
   </section>
 
-  <StatusStrip items={dashboard.statusItems} />
+  <StatusStrip id={dashboard.statusStripId} items={dashboard.statusItems} />
 </main>
 
 <style>

src/lib/ui/components/ServicePanel.svelte

@@ -7,11 +7,13 @@
   let { group }: { group: UiServiceGroup } = $props();
 </script>
 
-<Panel title={group.title}>
+<div class="service-panel" data-model-id={group.id}>
+  <Panel title={group.title}>
   {#if group.summary?.length}
-    <StatusStrip items={group.summary} compact />
+    <StatusStrip id={`${group.id}:summary`} items={group.summary} compact />
   {/if}
   {#each group.services as service (service.id)}
     <ServiceRow {service} />
   {/each}
-</Panel>
+  </Panel>
+</div>

src/lib/ui/components/StatusStrip.svelte

@@ -3,15 +3,17 @@
   import FooterCell from "./FooterCell.svelte";
 
   let {
+    id,
     items,
     compact = false,
   }: {
+    id?: string;
     items: UiStatusItem[];
     compact?: boolean;
   } = $props();
 </script>
 
-<section class="status-strip" data-compact={compact}>
+<section class="status-strip" data-compact={compact} data-model-id={id}>
   {#each items as item (item.id)}
     <FooterCell {item} />
   {/each}

src/lib/ui/components/render.test.ts

@@ -70,6 +70,17 @@ describe("dashboard UI components", () => {
     expect(footer.body).toContain("href=\"https://example.test/status\"");
   });
 
+  test("renders stable model IDs on group and status containers", () => {
+    const { body } = render(DashboardFrame, {
+      props: {
+        dashboard: dashboardPreviewFixtures.primary,
+      },
+    });
+
+    expect(body).toContain("data-model-id=\"queue-workers\"");
+    expect(body).toContain("data-model-id=\"dashboard-status\"");
+  });
+
   test("does not render progress bars for non-percent metrics without explicit progress", () => {
     const withoutProgress = render(TelemetryCard, {
       props: {

src/lib/ui/fixtures.ts

@@ -58,6 +58,7 @@ export const dashboardPreviewFixtures: Record<string, UiDashboardPreview> = {
       { id: "uptime", label: "Uptime", value: "14d 08h", severity: "neutral" },
       { id: "refresh", label: "Refresh", value: "15s", severity: "neutral" },
     ],
+    statusStripId: "dashboard-status",
   },
   secondary: {
     eyebrow: "Support Surface",
@@ -96,6 +97,7 @@ export const dashboardPreviewFixtures: Record<string, UiDashboardPreview> = {
       { id: "handoff", label: "Handoff", value: "Pending", severity: "warning" },
       { id: "routing", label: "Routing", value: "Manual", severity: "neutral" },
     ],
+    statusStripId: "support-status",
   },
 };
 

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

@@ -35,6 +35,7 @@ describe("dashboard model renderer", () => {
       "footer-status:uptime",
       "footer-status:load-avg",
     ]);
+    expect(dashboard.statusStripId).toBe("footer-status");
   });
 
   test("projects a second fixture through the same mapper", () => {

src/lib/ui/model-renderer.ts

@@ -38,6 +38,7 @@ export function dashboardDocumentToUiDashboard(
       document.layout.statusStrips,
       document.statusStrips,
     ).flatMap(statusStripToUiItems),
+    statusStripId: document.layout.statusStrips[0],
   };
 }
 

src/lib/ui/types.ts

@@ -83,4 +83,5 @@ export interface UiDashboardPreview {
   serviceGroups: UiServiceGroup[];
   modules: UiModuleBlock[];
   statusItems: UiStatusItem[];
+  statusStripId?: string;
 }