From a7d0a4c3b2016ac867d2dee89d6f913c42c26ff6 Mon Sep 17 00:00:00 2001
From: vince <vince@linux-infra.dimensionlab.net>
Date: Sat, 20 Jun 2026 15:16:51 +0200
Subject: [PATCH] fix(web): use structured dashboard tile match keys

---
 apps/web/src/App.test.tsx | 14 ++++++++++++++
 apps/web/src/App.tsx      | 10 +++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/App.test.tsx b/apps/web/src/App.test.tsx
index 4db0cbc..5053640 100644
--- a/apps/web/src/App.test.tsx
+++ b/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" }),
+    );
+  });
 });
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 74c34c3..fdb610e 100644
--- a/apps/web/src/App.tsx
+++ b/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;