apps/web/src/App.test.tsx

@@ -4,6 +4,7 @@ import { genericDashboardFixture } from "@dimensionlab/dashboard-model/fixtures"
 import { dimensionLabDashboardFixture } from "$lib/dashboard-seed/dimensionlab";
 import {
   AppStateView,
+  dashboardTileMatchKey,
   dashboardHydrationTiles,
   restoreDashboardTileSnapshots,
 } from "./App";
@@ -159,4 +160,17 @@ describe("React app dashboard state view", () => {
       severity: "stale",
     });
   });
+
+  test("uses structured tile match keys for delimiter-bearing ids", () => {
+    expect(
+      dashboardTileMatchKey({ kind: "service", groupId: "a:b", id: "c" }),
+    ).not.toBe(
+      dashboardTileMatchKey({ kind: "service", groupId: "a", id: "b:c" }),
+    );
+    expect(
+      dashboardTileMatchKey({ kind: "status", stripId: "a:b", id: "c" }),
+    ).not.toBe(
+      dashboardTileMatchKey({ kind: "status", stripId: "a", id: "b:c" }),
+    );
+  });
 });

apps/web/src/App.tsx

@@ -385,7 +385,7 @@ export default function App() {
 
         const responsesByKey = new Map(
           batchResponse.tiles.map((tileResponse) => [
-            dashboardTileKey(tileResponse.tile),
+            dashboardTileMatchKey(tileResponse.tile),
             tileResponse,
           ]),
         );
@@ -397,7 +397,7 @@ export default function App() {
               tile,
               result: applyDashboardTileHydrationResponse(
                 tile,
-                responsesByKey.get(key),
+                responsesByKey.get(dashboardTileMatchKey(tile)),
                 run,
                 signal,
                 snapshotContext,
@@ -474,7 +474,7 @@ export default function App() {
         signal.aborted ||
         run !== hydrationRun ||
         !tileResponse ||
-        dashboardTileKey(tileResponse.tile) !== dashboardTileKey(tile) ||
+        dashboardTileMatchKey(tileResponse.tile) !== dashboardTileMatchKey(tile) ||
         tileResponse.state !== "ready"
       ) {
         return signal.aborted || cancelled || run !== hydrationRun
@@ -749,6 +749,10 @@ function dashboardTileKey(tile: DashboardTileReference): string {
   return `${tile.kind}:${tile.id}`;
 }
 
+export function dashboardTileMatchKey(tile: DashboardTileReference): string {
+  return JSON.stringify(tile);
+}
+
 function dashboardTileModelId(tile: DashboardTileReference): string {
   if (tile.kind === "status") return `${tile.stripId}:${tile.id}`;
   return tile.id;