perf(web): restore last known dashboard tiles

apps/web/src/lib/client/dashboard-refresh.ts

@@ -3,6 +3,39 @@ export interface DashboardRefreshPauseState {
   online: boolean;
 }
 
+export type DashboardTileReference =
+  | { kind: "telemetry"; id: string }
+  | { kind: "service"; groupId: string; id: string }
+  | { kind: "module"; id: string }
+  | { kind: "status"; stripId: string; id: string };
+
+type SnapshotMetricValue = Record<string, unknown>;
+
+export type DashboardTileSnapshotItem = {
+  detail?: string;
+  id: string;
+  label?: string;
+  severity?: string;
+  value?: SnapshotMetricValue | string;
+} & Record<string, unknown>;
+
+export type DashboardTileSnapshotResponse =
+  | {
+      state: "ready";
+      tile: DashboardTileReference;
+      item: DashboardTileSnapshotItem;
+    }
+  | {
+      state: "not_found";
+      tile: DashboardTileReference;
+      message: string;
+    }
+  | {
+      state: "disabled";
+      tile: DashboardTileReference;
+      message: string;
+    };
+
 export function shouldPauseDashboardRefresh(
   state: DashboardRefreshPauseState,
 ): boolean {
@@ -145,3 +178,165 @@ export function createDashboardTileBackoff() {
     },
   };
 }
+
+interface DashboardTileSnapshotRecord {
+  item: DashboardTileSnapshotItem;
+  savedAt: number;
+  tile: DashboardTileReference;
+}
+
+interface DashboardTileSnapshotPayload {
+  currentRevisionId: string;
+  schemaVersion: string;
+  tiles: DashboardTileSnapshotRecord[];
+  version: 1;
+}
+
+export interface DashboardTileSnapshotStoreContext {
+  currentRevisionId: string;
+  schemaVersion: string;
+}
+
+export interface DashboardTileSnapshotStoreOptions {
+  now?: () => number;
+}
+
+export interface RestoredDashboardTileSnapshot {
+  ageMs: number;
+  response: Extract<DashboardTileSnapshotResponse, { state: "ready" }>;
+}
+
+const dashboardTileSnapshotStorageKey = "dimensionlab.dashboard.tiles.v1";
+
+export function createDashboardTileSnapshotStore(
+  storage: Storage | undefined,
+  options: DashboardTileSnapshotStoreOptions = {},
+) {
+  const now = options.now || Date.now;
+
+  function read(): DashboardTileSnapshotPayload | null {
+    if (!storage) return null;
+
+    try {
+      const serialized = storage.getItem(dashboardTileSnapshotStorageKey);
+      if (!serialized) return null;
+
+      const payload = JSON.parse(serialized) as Partial<DashboardTileSnapshotPayload>;
+      if (
+        payload.version !== 1 ||
+        typeof payload.currentRevisionId !== "string" ||
+        typeof payload.schemaVersion !== "string" ||
+        !Array.isArray(payload.tiles)
+      ) {
+        return null;
+      }
+
+      return payload as DashboardTileSnapshotPayload;
+    } catch {
+      return null;
+    }
+  }
+
+  function write(payload: DashboardTileSnapshotPayload): void {
+    if (!storage) return;
+
+    try {
+      storage.setItem(dashboardTileSnapshotStorageKey, JSON.stringify(payload));
+    } catch {
+      // Best-effort warm-start cache; quota and privacy failures are non-fatal.
+    }
+  }
+
+  function matchingPayload(
+    context: DashboardTileSnapshotStoreContext,
+  ): DashboardTileSnapshotPayload {
+    const payload = read();
+    if (
+      payload &&
+      payload.currentRevisionId === context.currentRevisionId &&
+      payload.schemaVersion === context.schemaVersion
+    ) {
+      return payload;
+    }
+
+    return {
+      currentRevisionId: context.currentRevisionId,
+      schemaVersion: context.schemaVersion,
+      tiles: [],
+      version: 1,
+    };
+  }
+
+  function saveReadyTile(
+    input: DashboardTileSnapshotStoreContext & {
+      response: Extract<DashboardTileSnapshotResponse, { state: "ready" }>;
+    },
+  ): void {
+    const payload = matchingPayload(input);
+    const key = dashboardTileSnapshotKey(input.response.tile);
+    const nextRecord: DashboardTileSnapshotRecord = {
+      item: input.response.item,
+      savedAt: now(),
+      tile: input.response.tile,
+    };
+    payload.tiles = [
+      nextRecord,
+      ...payload.tiles.filter((record) =>
+        dashboardTileSnapshotKey(record.tile) !== key
+      ),
+    ];
+    write(payload);
+  }
+
+  return {
+    restore(context: DashboardTileSnapshotStoreContext): RestoredDashboardTileSnapshot[] {
+      const payload = read();
+      if (
+        !payload ||
+        payload.currentRevisionId !== context.currentRevisionId ||
+        payload.schemaVersion !== context.schemaVersion
+      ) {
+        return [];
+      }
+
+      const restoredAt = now();
+      return payload.tiles.map((record) => ({
+        ageMs: Math.max(0, restoredAt - record.savedAt),
+        response: {
+          state: "ready",
+          tile: record.tile,
+          item: {
+            ...record.item,
+            detail: staleDashboardTileDetail(record.item.detail, restoredAt - record.savedAt),
+            severity: "stale",
+          },
+        },
+      }));
+    },
+    saveReadyTile,
+    saveTile(input: DashboardTileSnapshotStoreContext & {
+      response: DashboardTileSnapshotResponse;
+    }): void {
+      if (input.response.state === "ready") {
+        saveReadyTile({
+          currentRevisionId: input.currentRevisionId,
+          response: input.response,
+          schemaVersion: input.schemaVersion,
+        });
+      }
+    },
+  };
+}
+
+function dashboardTileSnapshotKey(tile: DashboardTileReference): string {
+  return JSON.stringify(tile);
+}
+
+function staleDashboardTileDetail(
+  detail: string | undefined,
+  ageMs: number,
+): string | undefined {
+  if (!detail) return detail;
+  const ageSeconds = Math.max(0, Math.floor(ageMs / 1_000));
+  return ageSeconds > 0 ? `${detail} - stale ${ageSeconds}s` : detail;
+}