fix: complete model renderer states and ids

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: {