Merge pull request 'fix(web): remove prompt registry shortcut' (#57)

fix(web): remove prompt registry shortcut

.forgejo/workflows/dimensionlab-website.yml

@@ -0,0 +1,85 @@
+name: Dimension Lab website
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+concurrency:
+  group: dimensionlab-website-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
+
+jobs:
+  ci:
+    runs-on: docker
+    timeout-minutes: 30
+    steps:
+      - name: Checkout
+        uses: https://data.forgejo.org/actions/checkout@v4
+        with:
+          fetch-depth: 0
+          submodules: false
+
+      - name: Initialize submodules
+        run: |
+          git config --global url."https://git.dimensionlab.net/".insteadOf "ssh://git@git.dimensionlab.net/"
+          git submodule update --init --recursive
+
+      - name: Install Bun
+        run: |
+          curl -fsSL https://bun.sh/install | bash -s "bun-v1.3.14"
+          "$HOME/.bun/bin/bun" --version
+
+      - name: Check, test, and build
+        run: |
+          export BUN_INSTALL="$HOME/.bun"
+          export PATH="$BUN_INSTALL/bin:$PATH"
+          bun install --frozen-lockfile
+          bun run check
+          bun run test
+          bun run build
+
+  deploy:
+    needs: ci
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    runs-on: deploy
+    timeout-minutes: 30
+    steps:
+      - name: Checkout
+        run: |
+          if [ -d .git ]; then
+            git remote set-url origin git@git.dimensionlab.net:vince/dimensionlab-website.git
+          else
+            git init
+            git remote add origin git@git.dimensionlab.net:vince/dimensionlab-website.git
+          fi
+          git fetch --force --prune --depth=1 origin "$GITHUB_SHA"
+          git checkout --force --detach "$GITHUB_SHA"
+          git clean -ffdx
+
+      - name: Initialize submodules
+        run: |
+          git config --global url."https://git.dimensionlab.net/".insteadOf "ssh://git@git.dimensionlab.net/"
+          git submodule update --init --recursive
+
+      - name: Verify Podman deployment socket
+        run: |
+          command -v podman
+          command -v systemctl
+          unit="$(timeout 15s podman inspect dimensionlab-website --format '{{ index .Config.Labels "PODMAN_SYSTEMD_UNIT" }}')"
+          test "$unit" = "dimensionlab-website.service"
+
+      - name: Deploy production website
+        env:
+          DEPLOY_CONTAINER_CLI: podman
+          DEPLOY_EVENT_NAME: ${{ github.event_name }}
+          DEPLOY_REF: ${{ github.ref }}
+          DEPLOY_RESTART_STRATEGY: quadlet-container
+          DEPLOY_SHA: ${{ github.sha }}
+        run: scripts/deploy-dimensionlab-website.sh

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "packages/ui"]
+	path = packages/ui
+	url = ssh://git@git.dimensionlab.net/vince/dimensionlab-ui.git
+	branch = main

README.md

@@ -15,14 +15,16 @@ validated dashboard model state inside the web app.
   persistence, Playwright e2e checks, and container build.
 - `packages/dashboard-model`: reusable dashboard schema, validation, and
   generic model fixtures shared by apps and tooling.
-- `packages/ui`: reusable dashboard React components, design tokens,
-  shadcn/radix primitives, generic fixtures, and Storybook. Component source is
-  grouped under `foundation`, `frames`, `operations`, and `telemetry` domains.
+- `packages/ui`: Git submodule for the reusable dashboard React components,
+  design tokens, shadcn/radix primitives, generic fixtures, and Storybook.
+  Component source is grouped under `foundation`, `frames`, `operations`, and
+  `telemetry` domains.
 - `docs/superpowers`: migration specs and execution plans used for this repo.
 
 ## Development
 
 ```sh
+git submodule update --init --recursive
 bun install
 bun run dev
 ```
@@ -127,6 +129,7 @@ The production build emits Vite client assets under `apps/web/dist/` and a Bun
 server entry at `apps/web/build/index.js`. A minimal deployment flow is:
 
 ```sh
+git submodule update --init --recursive
 bun install --frozen-lockfile
 bun run build
 cd apps/web
@@ -158,3 +161,27 @@ The env file must provide `AGENT_CONFIG_TOKEN`. Runtime defaults inside the
 image set `HOST=0.0.0.0`, `PORT=3000`,
 `DATABASE_URL=file:/data/dimensionlab.sqlite`, and
 `DASHBOARD_MIGRATIONS_DIR=/repo/apps/web/drizzle`.
+
+### Forgejo Actions Deployment
+
+Merges to `main` run `.forgejo/workflows/dimensionlab-website.yml`. Pull
+requests run check, test, and build only; the deploy job is guarded to run only
+for `push` events on `refs/heads/main`.
+
+The workflow uses two runner classes. Pull request CI runs on the containerized
+`docker` runner. Production deployment runs on a separate host runner with the
+`deploy:host` label so the guarded deploy script can use the user's rootless
+`podman` and `systemctl --user` commands directly. The deploy job uses a
+shell-only `git fetch` checkout so the host runner does not need a Node runtime
+for checkout actions.
+
+```yaml
+runner:
+  labels:
+    - deploy:host
+```
+
+The deploy job also performs a host preflight against the
+`dimensionlab-website.service` Podman label before it builds or restarts the
+production container. Do not give the general pull request runner deployment
+socket access; keep deploy privileges on the dedicated `deploy` runner.

apps/web/Containerfile

@@ -11,7 +11,7 @@ RUN bunx turbo prune @dimensionlab/web --docker
 FROM base AS deps
 
 COPY --from=pruner /repo/out/json/ ./
-RUN bun install --frozen-lockfile
+RUN bun install --frozen-lockfile --ignore-scripts
 
 FROM deps AS build
 

apps/web/package.json

@@ -8,8 +8,8 @@
     "build": "rm -rf build && vite build && bun build src/server/index.ts --target bun --outdir build",
     "preview": "HOST=0.0.0.0 PORT=4173 bun build/index.js",
     "check": "tsc --noEmit",
-    "test": "vitest run",
-    "test:unit": "vitest run",
+    "test": "bun --bun vitest run",
+    "test:unit": "bun --bun vitest run",
     "test:e2e": "env -u NO_COLOR playwright test",
     "db:generate": "drizzle-kit generate",
     "db:check": "drizzle-kit check"

apps/web/src/App.test.tsx

@@ -1,6 +1,13 @@
 import { renderToString } from "react-dom/server";
 import { describe, expect, test } from "vitest";
-import { AppStateView } from "./App";
+import { genericDashboardFixture } from "@dimensionlab/dashboard-model/fixtures";
+import { dimensionLabDashboardFixture } from "$lib/dashboard-seed/dimensionlab";
+import {
+  AppStateView,
+  dashboardTileMatchKey,
+  dashboardHydrationTiles,
+  restoreDashboardTileSnapshots,
+} from "./App";
 
 describe("React app dashboard state view", () => {
   test("renders loading dashboard state", () => {
@@ -41,4 +48,191 @@ describe("React app dashboard state view", () => {
     expect(html).toContain("Dark");
     expect(html).toContain("Light");
   });
+
+  test("renders the dashboard shell while individual items hydrate", () => {
+    const html = renderToString(
+      <AppStateView
+        dashboard={{
+          state: "ready",
+          document: genericDashboardFixture,
+          schemaVersion: "dashboard.v1",
+          currentRevisionId: "revision-1234567890",
+        }}
+        hydratingItemIds={new Set([
+          "telemetry:service-uptime",
+          "service:core-services:identity",
+          "module:ambient",
+          "status:runtime:status",
+        ])}
+      />,
+    );
+
+    expect(html).toContain("Operations Console");
+    expect(html).toContain("Service Uptime");
+    expect(html).toContain("Identity");
+    expect(html).toContain("Environment");
+    expect(html).not.toContain("Loading Dashboard");
+    expect(html).toContain(
+      'data-severity="loading" data-model-id="service-uptime"',
+    );
+    expect(html).toContain('data-severity="loading" data-model-id="identity"');
+    expect(html).toContain('data-severity="loading" data-model-id="ambient"');
+    expect(html).toContain('data-severity="loading" data-model-id="runtime:status"');
+  });
+
+  test("hydrates every status cell from the Dimension Lab shell", () => {
+    expect(dashboardHydrationTiles(dimensionLabDashboardFixture)).toContainEqual({
+      kind: "status",
+      stripId: "footer-status",
+      id: "auto-refresh",
+    });
+  });
+
+  test("prioritizes status, telemetry, modules, then services for hydration", () => {
+    const tiles = dashboardHydrationTiles(dimensionLabDashboardFixture);
+    const kinds = tiles.map((tile) => tile.kind);
+    const firstServiceIndex = kinds.indexOf("service");
+
+    expect(kinds.slice(0, 5)).toEqual([
+      "status",
+      "status",
+      "status",
+      "status",
+      "status",
+    ]);
+    expect(kinds.lastIndexOf("telemetry")).toBeLessThan(kinds.indexOf("module"));
+    expect(kinds.lastIndexOf("module")).toBeLessThan(firstServiceIndex);
+    expect(
+      tiles.filter((tile) => tile.kind === "telemetry").map((tile) => tile.id),
+    ).toEqual(
+      dimensionLabDashboardFixture.telemetry
+        .filter((card) => card.datasource?.type === "external")
+        .map((card) => card.id),
+    );
+    expect(
+      tiles.filter((tile) => tile.kind === "service").map((tile) => ({
+        groupId: tile.groupId,
+        id: tile.id,
+      })),
+    ).toEqual(
+      dimensionLabDashboardFixture.serviceGroups.flatMap((group) =>
+        group.services
+          .filter((service) => service.datasource?.type === "external")
+          .map((service) => ({
+            groupId: group.id,
+            id: service.id,
+          }))
+      ),
+    );
+  });
+
+  test("applies restored tile snapshots without marking them as loading", () => {
+    const restored = restoreDashboardTileSnapshots(
+      {
+        state: "ready",
+        document: dimensionLabDashboardFixture,
+        schemaVersion: "dashboard.v1",
+        currentRevisionId: "revision-a",
+      },
+      [
+        {
+          ageMs: 60_000,
+          response: {
+            state: "ready",
+            tile: { kind: "telemetry", id: "infra-ram" },
+            item: {
+              ...dimensionLabDashboardFixture.telemetry[0],
+              detail: "cached - stale 60s",
+              severity: "stale",
+            },
+          },
+        },
+      ],
+    );
+
+    expect(restored.restoredItemIds).toEqual(new Set(["telemetry:infra-ram"]));
+    if (restored.dashboard.state !== "ready") {
+      throw new Error("Expected dashboard to be ready");
+    }
+    expect(restored.dashboard.document.telemetry[0]).toMatchObject({
+      id: "infra-ram",
+      detail: "cached - stale 60s",
+      severity: "stale",
+    });
+  });
+
+  test("does not restore aggregate health snapshots over the fresh shell", () => {
+    const restored = restoreDashboardTileSnapshots(
+      {
+        state: "ready",
+        document: dimensionLabDashboardFixture,
+        schemaVersion: "dashboard.v1",
+        currentRevisionId: "revision-a",
+      },
+      [
+        {
+          ageMs: 60_000,
+          response: {
+            state: "ready",
+            tile: { kind: "status", stripId: "footer-status", id: "system-status" },
+            item: {
+              id: "system-status",
+              label: "System Status",
+              value: "20 services down",
+              severity: "stale",
+            },
+          },
+        },
+        {
+          ageMs: 60_000,
+          response: {
+            state: "ready",
+            tile: { kind: "module", id: "runtime-health-summary" },
+            item: {
+              id: "runtime-health-summary",
+              kind: "summary",
+              title: "Runtime Health",
+              value: "20 services down",
+              detail: "0 warnings - 8 services ok - stale 60s",
+              severity: "stale",
+            },
+          },
+        },
+      ],
+    );
+
+    expect(restored.restoredItemIds).toEqual(new Set());
+    if (restored.dashboard.state !== "ready") {
+      throw new Error("Expected dashboard to be ready");
+    }
+    expect(
+      restored.dashboard.document.statusStrips[0].items.find((item) =>
+        item.id === "system-status"
+      ),
+    ).toMatchObject({
+      id: "system-status",
+      value: "Fallback operational",
+    });
+    expect(
+      restored.dashboard.document.modules?.find((module) =>
+        module.id === "runtime-health-summary"
+      ),
+    ).toMatchObject({
+      id: "runtime-health-summary",
+      value: "fallback",
+    });
+  });
+
+  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

@@ -1,5 +1,30 @@
 import { useEffect, useState } from "react";
+import type {
+  DashboardDocument,
+  DashboardModule,
+  ServiceEntry,
+  StatusItem,
+  TelemetryCard,
+} from "@dimensionlab/dashboard-model";
 import type { DashboardRuntimeState } from "$lib/server/dashboard";
+import {
+  attachDashboardRefreshLifecycle,
+  collectVisibleDashboardModelIds,
+  createDashboardPerformanceMarks,
+  createDashboardRefreshDelay,
+  createDashboardTileSnapshotStore,
+  createDashboardTileBackoff,
+  createDashboardRequestAborter,
+  isPersistableDashboardTileSnapshot,
+  runViewportAwareDashboardHydrationQueue,
+  shouldPauseDashboardRefresh,
+  subscribeToDashboardTileEvents,
+  waitForDashboardHydrationIdle,
+  type DashboardIntersectionObserverFactory,
+  type DashboardTileReference,
+  type DashboardTileSnapshotStoreContext,
+  type RestoredDashboardTileSnapshot,
+} from "$lib/client/dashboard-refresh";
 import { dashboardDocumentToUiDashboard } from "$lib/ui-adapter/model-renderer";
 import {
   DashboardFrame,
@@ -9,21 +34,46 @@ import {
   resolveInitialUiTheme,
   type UiTheme,
   type UiSeverity,
+  type UiDashboardPreview,
 } from "@dimensionlab/ui";
 
-const loadingDashboardState: DashboardRuntimeState = {
-  state: "loading",
-  title: "Loading Dashboard",
-  subtitle: "Fetching active model",
-  message: "Waiting for the active dashboard document.",
+type DashboardTileResponse =
+  | {
+      state: "ready";
+      tile: DashboardTileReference;
+      item: DashboardModule | ServiceEntry | StatusItem | TelemetryCard;
+    }
+  | {
+      state: "not_found";
+      tile: DashboardTileReference;
+      message: string;
+    }
+  | {
+      state: "disabled";
+      tile: DashboardTileReference;
+      message: string;
+    };
+
+type DashboardTilesBatchResponse = {
+  state: "ready";
+  tiles: DashboardTileResponse[];
 };
 
+type DashboardTileHydrationResult = "aborted" | "failed" | "ready";
+
+const dashboardTileHydrationConcurrency = 6;
+const dashboardFallbackRefreshIntervalMs = 30_000;
+const dashboardViewportObservationTimeoutMs = 80;
+type DashboardTileSnapshotStore = ReturnType<typeof createDashboardTileSnapshotStore>;
+
 export function AppStateView({
   dashboard,
   onThemeChange,
   theme,
+  hydratingItemIds,
 }: {
   dashboard: DashboardRuntimeState;
+  hydratingItemIds?: ReadonlySet<string>;
   onThemeChange?: (theme: UiTheme) => void;
   theme?: UiTheme;
 }) {
@@ -33,9 +83,14 @@ export function AppStateView({
     ) : null;
 
   if (dashboard.state === "ready") {
+    const uiDashboard = markHydratingItems(
+      dashboardDocumentToUiDashboard(dashboard.document),
+      hydratingItemIds,
+    );
+
     return (
       <DashboardFrame
-        dashboard={dashboardDocumentToUiDashboard(dashboard.document)}
+        dashboard={uiDashboard}
         actions={themeToggle}
       />
     );
@@ -89,7 +144,10 @@ export function resolveDocumentMetadata(dashboard: DashboardRuntimeState): {
 
 export default function App() {
   const [dashboard, setDashboard] =
-    useState<DashboardRuntimeState>(loadingDashboardState);
+    useState<DashboardRuntimeState | null>(null);
+  const [hydratingItemIds, setHydratingItemIds] = useState<Set<string>>(
+    () => new Set(),
+  );
   const [theme, setTheme] = useState<UiTheme>(() => {
     if (typeof window === "undefined") return "dark";
 
@@ -97,6 +155,8 @@ export default function App() {
   });
 
   useEffect(() => {
+    if (!dashboard) return;
+
     const metadata = resolveDocumentMetadata(dashboard);
     document.title = metadata.title;
 
@@ -119,47 +179,404 @@ export default function App() {
   useEffect(() => {
     let cancelled = false;
     let refreshTimer: number | undefined;
+    let unsubscribeTileEvents: (() => void) | undefined;
+    let lastRefreshIntervalMs = dashboardFallbackRefreshIntervalMs;
+    let hydrationRun = 0;
+    const requestAborter = createDashboardRequestAborter();
+    const performanceMarks = createDashboardPerformanceMarks();
+    const refreshDelay = createDashboardRefreshDelay();
+    const tileBackoff = createDashboardTileBackoff();
+    const tileSnapshotStore = createDashboardTileSnapshotStore(
+      getTileSnapshotStorage(),
+    );
 
-    async function loadDashboard() {
-      const response = await fetch("/api/dashboard");
-      const nextDashboard = (await response.json()) as DashboardRuntimeState;
+    function refreshPaused() {
+      return shouldPauseDashboardRefresh({
+        visibilityState: document.visibilityState,
+        online: navigator.onLine,
+      });
+    }
 
-      if (cancelled) return;
-      setDashboard(nextDashboard);
-
-      if (refreshTimer) {
-        window.clearInterval(refreshTimer);
+    function clearRefreshTimer() {
+      if (refreshTimer !== undefined) {
+        window.clearTimeout(refreshTimer);
         refreshTimer = undefined;
       }
+    }
 
-      const refreshIntervalSeconds =
-        nextDashboard.state === "ready"
-          ? nextDashboard.document.metadata.refreshIntervalSeconds
-          : undefined;
+    function scheduleNextRefresh(baseDelayMs: number) {
+      clearRefreshTimer();
+      if (cancelled || refreshPaused()) return;
 
-      if (refreshIntervalSeconds) {
-        refreshTimer = window.setInterval(
-          () => void loadDashboard(),
-          refreshIntervalSeconds * 1000,
+      refreshTimer = window.setTimeout(() => {
+        refreshTimer = undefined;
+        void loadDashboard();
+      }, refreshDelay.nextDelayMs(baseDelayMs));
+    }
+
+    function pauseRefreshes() {
+      clearRefreshTimer();
+      unsubscribeTileEvents?.();
+      unsubscribeTileEvents = undefined;
+      requestAborter.abortActiveRequests();
+      setHydratingItemIds(new Set());
+    }
+
+    async function loadDashboard() {
+      if (cancelled || refreshPaused()) return;
+
+      clearRefreshTimer();
+      const shellSignal = requestAborter.beginShellRun();
+
+      try {
+        const response = await fetch("/api/dashboard", { signal: shellSignal });
+        const nextDashboard = (await response.json()) as DashboardRuntimeState;
+
+        if (cancelled || shellSignal.aborted || refreshPaused()) return;
+        refreshDelay.recordSuccess();
+        performanceMarks.markShellLoad();
+        const restored = restoreDashboardTileSnapshots(
+          nextDashboard,
+          nextDashboard.state === "ready"
+            ? tileSnapshotStore.restore({
+                currentRevisionId: nextDashboard.currentRevisionId,
+                schemaVersion: nextDashboard.schemaVersion,
+              })
+            : [],
+        );
+        setDashboard(restored.dashboard);
+
+        const currentRun = ++hydrationRun;
+        if (
+          restored.dashboard.state === "ready" &&
+          restored.dashboard.liveDatasourceHydration?.enabled !== false
+        ) {
+          const tiles = dashboardHydrationTiles(restored.dashboard.document).filter(
+            (tile) => tileBackoff.canAttempt(dashboardTileKey(tile)),
+          );
+          const tileSignal = requestAborter.beginTileRun();
+          setHydratingItemIds(
+            new Set(
+              tiles
+                .map(dashboardTileKey)
+                .filter((key) => !restored.restoredItemIds.has(key)),
+            ),
+          );
+          hydrateDashboardTiles(
+            tiles,
+            currentRun,
+            tileSignal,
+            {
+              currentRevisionId: restored.dashboard.currentRevisionId,
+              schemaVersion: restored.dashboard.schemaVersion,
+            },
+          );
+          subscribeDashboardTileEvents(
+            currentRun,
+            tileSignal,
+            {
+              currentRevisionId: restored.dashboard.currentRevisionId,
+              schemaVersion: restored.dashboard.schemaVersion,
+            },
+          );
+        } else {
+          setHydratingItemIds(new Set());
+        }
+
+        const refreshIntervalSeconds =
+          nextDashboard.state === "ready"
+            ? nextDashboard.document.metadata.refreshIntervalSeconds
+            : undefined;
+
+        if (refreshIntervalSeconds && !refreshPaused()) {
+          lastRefreshIntervalMs = refreshIntervalSeconds * 1000;
+          scheduleNextRefresh(lastRefreshIntervalMs);
+        }
+      } catch (error) {
+        if (!isAbortError(error) && !cancelled) {
+          refreshDelay.recordFailure();
+          console.error("Dashboard refresh failed", error);
+          scheduleNextRefresh(lastRefreshIntervalMs);
+        }
+      }
+    }
+
+    function hydrateDashboardTiles(
+      tiles: DashboardTileReference[],
+      run: number,
+      signal: AbortSignal,
+      snapshotContext: DashboardTileSnapshotStoreContext,
+    ) {
+      const modelIds = tiles.map(dashboardTileModelId);
+
+      void runViewportAwareDashboardHydrationQueue({
+        batchSize: dashboardTileHydrationConcurrency,
+        collectVisibleModelIds: async () => {
+          await waitForDashboardRenderFrame(signal);
+          return collectVisibleDashboardModelIds({
+            clearTimeout: window.clearTimeout.bind(window),
+            createObserver: getDashboardIntersectionObserverFactory(),
+            documentTarget: document,
+            modelIds,
+            setTimeout: window.setTimeout.bind(window),
+            signal,
+            timeoutMs: dashboardViewportObservationTimeoutMs,
+          });
+        },
+        concurrency: dashboardTileHydrationConcurrency,
+        getModelId: dashboardTileModelId,
+        hydrate: async (tile) => {
+          const key = dashboardTileKey(tile);
+          const result = await hydrateDashboardTile(
+            tile,
+            run,
+            signal,
+            snapshotContext,
+          );
+
+          if (result === "ready") {
+            tileBackoff.recordSuccess(key);
+          } else if (result === "failed") {
+            tileBackoff.recordFailure(key);
+          }
+        },
+        hydrateBatch: async (batch) => {
+          const results = await hydrateDashboardTileBatch(
+            batch,
+            run,
+            signal,
+            snapshotContext,
+          );
+
+          for (const { result, tile } of results) {
+            const key = dashboardTileKey(tile);
+            if (result === "ready") {
+              tileBackoff.recordSuccess(key);
+            } else if (result === "failed") {
+              tileBackoff.recordFailure(key);
+            }
+          }
+        },
+        items: tiles,
+        onAllItemsSettled: () => performanceMarks.markAllTilesSettled(),
+        onVisibleItemsSettled: () => performanceMarks.markVisibleTilesReady(),
+        signal,
+        waitForIdle: () =>
+          waitForDashboardHydrationIdle({
+            ...getDashboardIdleCallbacks(),
+            clearTimeout: window.clearTimeout.bind(window),
+            setTimeout: window.setTimeout.bind(window),
+            signal,
+          }),
+      });
+    }
+
+    function subscribeDashboardTileEvents(
+      run: number,
+      signal: AbortSignal,
+      snapshotContext: DashboardTileSnapshotStoreContext,
+    ) {
+      unsubscribeTileEvents?.();
+      unsubscribeTileEvents = subscribeToDashboardTileEvents({
+        onTile: (event) => {
+          const tileResponse = event as DashboardTileResponse;
+          if (!isDashboardTileResponse(tileResponse)) return;
+          applyDashboardTileHydrationResponse(
+            tileResponse.tile,
+            tileResponse,
+            run,
+            signal,
+            snapshotContext,
+          );
+        },
+        onUnavailable: () => {
+          unsubscribeTileEvents = undefined;
+        },
+      });
+    }
+
+    async function hydrateDashboardTileBatch(
+      tiles: DashboardTileReference[],
+      run: number,
+      signal: AbortSignal,
+      snapshotContext: DashboardTileSnapshotStoreContext,
+    ): Promise<Array<{ result: DashboardTileHydrationResult; tile: DashboardTileReference }>> {
+      try {
+        const response = await fetch("/api/dashboard/tiles", {
+          body: JSON.stringify({ tiles }),
+          headers: { "Content-Type": "application/json" },
+          method: "POST",
+          signal,
+        });
+        const batchResponse = (await response.json()) as DashboardTilesBatchResponse;
+
+        if (
+          cancelled ||
+          signal.aborted ||
+          run !== hydrationRun ||
+          !response.ok ||
+          batchResponse.state !== "ready"
+        ) {
+          throw new Error("Dashboard tile batch hydration failed");
+        }
+
+        const responsesByKey = new Map(
+          batchResponse.tiles.map((tileResponse) => [
+            dashboardTileMatchKey(tileResponse.tile),
+            tileResponse,
+          ]),
+        );
+
+        return tiles.map((tile) => {
+          const key = dashboardTileKey(tile);
+          try {
+            return {
+              tile,
+              result: applyDashboardTileHydrationResponse(
+                tile,
+                responsesByKey.get(dashboardTileMatchKey(tile)),
+                run,
+                signal,
+                snapshotContext,
+              ),
+            };
+          } finally {
+            finishDashboardTileHydration(key, run, signal);
+          }
+        });
+      } catch (error) {
+        if (signal.aborted || cancelled || run !== hydrationRun) {
+          return tiles.map((tile) => ({ result: "aborted", tile }));
+        }
+
+        return Promise.all(
+          tiles.map(async (tile) => ({
+            tile,
+            result: await hydrateDashboardTile(tile, run, signal, snapshotContext),
+          })),
         );
       }
     }
 
+    async function hydrateDashboardTile(
+      tile: DashboardTileReference,
+      run: number,
+      signal: AbortSignal,
+      snapshotContext: DashboardTileSnapshotStoreContext,
+    ): Promise<DashboardTileHydrationResult> {
+      const key = dashboardTileKey(tile);
+
+      try {
+        const response = await fetch(dashboardTileUrl(tile), { signal });
+        const tileResponse = (await response.json()) as DashboardTileResponse;
+
+        if (!response.ok) {
+          return "failed";
+        }
+
+        const result = applyDashboardTileHydrationResponse(
+          tile,
+          tileResponse,
+          run,
+          signal,
+          snapshotContext,
+        );
+        if (result !== "ready") {
+          return signal.aborted || cancelled || run !== hydrationRun
+            ? "aborted"
+            : "failed";
+        }
+
+        return "ready";
+      } catch (error) {
+        if (!isAbortError(error) && !cancelled) {
+          console.error("Dashboard tile hydration failed", error);
+          return "failed";
+        }
+        return "aborted";
+      } finally {
+        finishDashboardTileHydration(key, run, signal);
+      }
+    }
+
+    function applyDashboardTileHydrationResponse(
+      tile: DashboardTileReference,
+      tileResponse: DashboardTileResponse | undefined,
+      run: number,
+      signal: AbortSignal,
+      snapshotContext: DashboardTileSnapshotStoreContext,
+    ): DashboardTileHydrationResult {
+      if (
+        cancelled ||
+        signal.aborted ||
+        run !== hydrationRun ||
+        !tileResponse ||
+        dashboardTileMatchKey(tileResponse.tile) !== dashboardTileMatchKey(tile) ||
+        tileResponse.state !== "ready"
+      ) {
+        return signal.aborted || cancelled || run !== hydrationRun
+          ? "aborted"
+          : "failed";
+      }
+
+      const readyTileResponse = tileResponse;
+      setDashboard((current) =>
+        current?.state === "ready"
+          ? {
+              ...current,
+              document: applyDashboardTile(current.document, readyTileResponse),
+            }
+          : current,
+      );
+      tileSnapshotStore.saveReadyTile({
+        ...snapshotContext,
+        response: readyTileResponse,
+      });
+      performanceMarks.markFirstTileReady();
+      return "ready";
+    }
+
+    function finishDashboardTileHydration(
+      key: string,
+      run: number,
+      signal: AbortSignal,
+    ) {
+      if (!cancelled && !signal.aborted && run === hydrationRun) {
+        setHydratingItemIds((current) => {
+          const next = new Set(current);
+          next.delete(key);
+          return next;
+        });
+      }
+    }
+
+    const detachRefreshLifecycle = attachDashboardRefreshLifecycle({
+      documentTarget: document,
+      windowTarget: window,
+      loadDashboard,
+      pauseRefreshes,
+      refreshPaused: () => cancelled || refreshPaused(),
+    });
+
     void loadDashboard();
 
     return () => {
       cancelled = true;
-      if (refreshTimer) window.clearInterval(refreshTimer);
+      clearRefreshTimer();
+      unsubscribeTileEvents?.();
+      requestAborter.abortActiveRequests();
+      detachRefreshLifecycle();
     };
   }, []);
 
-  return (
+  return dashboard ? (
     <AppStateView
       dashboard={dashboard}
+      hydratingItemIds={hydratingItemIds}
       theme={theme}
       onThemeChange={setTheme}
     />
-  );
+  ) : null;
 }
 
 function stateSeverity(state: DashboardRuntimeState["state"]): UiSeverity {
@@ -181,3 +598,278 @@ function getThemeStorage(): Storage | undefined {
     return undefined;
   }
 }
+
+function getTileSnapshotStorage(): Storage | undefined {
+  try {
+    return window.localStorage;
+  } catch {
+    return undefined;
+  }
+}
+
+type DashboardIdleWindow = Window & {
+  cancelIdleCallback?: (handle: number) => void;
+  requestIdleCallback?: (
+    callback: () => void,
+    options?: { timeout?: number },
+  ) => number;
+};
+
+function getDashboardIdleCallbacks() {
+  const idleWindow = window as DashboardIdleWindow;
+  return {
+    cancelIdleCallback: idleWindow.cancelIdleCallback?.bind(idleWindow),
+    requestIdleCallback: idleWindow.requestIdleCallback?.bind(idleWindow),
+  };
+}
+
+function getDashboardIntersectionObserverFactory():
+  | DashboardIntersectionObserverFactory
+  | undefined {
+  if (typeof window.IntersectionObserver === "undefined") return undefined;
+
+  return (callback) =>
+    new window.IntersectionObserver((entries) => {
+      callback(entries);
+    });
+}
+
+async function waitForDashboardRenderFrame(signal: AbortSignal): Promise<void> {
+  if (signal.aborted) return;
+
+  await new Promise<void>((resolve) => {
+    let settled = false;
+    let frame: number | undefined;
+
+    function finish() {
+      if (settled) return;
+      settled = true;
+      if (frame !== undefined) window.cancelAnimationFrame(frame);
+      signal.removeEventListener("abort", finish);
+      resolve();
+    }
+
+    signal.addEventListener("abort", finish, { once: true });
+    frame = window.requestAnimationFrame(finish);
+  });
+}
+
+function isAbortError(error: unknown): boolean {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "name" in error &&
+    error.name === "AbortError"
+  );
+}
+
+function isDashboardTileResponse(value: unknown): value is DashboardTileResponse {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "state" in value &&
+    (value.state === "ready" ||
+      value.state === "not_found" ||
+      value.state === "disabled") &&
+    "tile" in value &&
+    typeof value.tile === "object" &&
+    value.tile !== null
+  );
+}
+
+export function restoreDashboardTileSnapshots(
+  dashboard: DashboardRuntimeState,
+  snapshots: RestoredDashboardTileSnapshot[],
+): {
+  dashboard: DashboardRuntimeState;
+  restoredItemIds: Set<string>;
+} {
+  if (dashboard.state !== "ready" || snapshots.length === 0) {
+    return {
+      dashboard,
+      restoredItemIds: new Set(),
+    };
+  }
+
+  return snapshots.filter((snapshot) =>
+    isPersistableDashboardTileSnapshot(snapshot.response.tile)
+  ).reduce(
+    (current, snapshot) => ({
+      dashboard: {
+        ...current.dashboard,
+        document: applyDashboardTile(
+          current.dashboard.document,
+          snapshot.response as Extract<DashboardTileResponse, { state: "ready" }>,
+        ),
+      },
+      restoredItemIds: new Set([
+        ...current.restoredItemIds,
+        dashboardTileKey(snapshot.response.tile),
+      ]),
+    }),
+    {
+      dashboard,
+      restoredItemIds: new Set<string>(),
+    },
+  );
+}
+
+function markHydratingItems(
+  dashboard: UiDashboardPreview,
+  hydratingItemIds?: ReadonlySet<string>,
+): UiDashboardPreview {
+  if (!hydratingItemIds?.size) return dashboard;
+
+  return {
+    ...dashboard,
+    telemetry: dashboard.telemetry.map((card) =>
+      hydratingItemIds.has(`telemetry:${card.id}`)
+        ? {
+            ...card,
+            severity: "loading",
+            detail: "loading live telemetry",
+          }
+        : card,
+    ),
+    serviceGroups: dashboard.serviceGroups.map((group) => ({
+      ...group,
+      services: group.services.map((service) =>
+        hydratingItemIds.has(`service:${group.id}:${service.id}`)
+          ? {
+              ...service,
+              severity: "loading",
+              detail: "loading",
+            }
+          : service,
+      ),
+    })),
+    modules: dashboard.modules.map((module) =>
+      hydratingItemIds.has(`module:${module.id}`)
+        ? {
+            ...module,
+            severity: "loading",
+            detail: "loading live data",
+          }
+        : module,
+    ),
+    statusItems: dashboard.statusItems.map((item) =>
+      hydratingItemIds.has(`status:${item.id}`)
+        ? {
+            ...item,
+            severity: "loading",
+            value: "loading",
+          }
+        : item,
+    ),
+  };
+}
+
+export function dashboardHydrationTiles(
+  document: DashboardDocument,
+): DashboardTileReference[] {
+  const telemetry = document.telemetry
+    .filter((card) => card.datasource?.type === "external")
+    .map((card): DashboardTileReference => ({ kind: "telemetry", id: card.id }));
+  const services = document.serviceGroups.flatMap((group) =>
+    group.services
+      .filter((service) => service.datasource?.type === "external")
+      .map((service): DashboardTileReference => ({
+        kind: "service",
+        groupId: group.id,
+        id: service.id,
+      })),
+  );
+  const modules = (document.modules || [])
+    .filter((module) =>
+      module.datasource?.type === "external" ||
+      module.id === "runtime-health-summary"
+    )
+    .map((module): DashboardTileReference => ({ kind: "module", id: module.id }));
+  const status = document.statusStrips.flatMap((strip) =>
+    strip.items
+      .map((item): DashboardTileReference => ({
+        kind: "status",
+        stripId: strip.id,
+        id: item.id,
+      })),
+  );
+
+  return [...status, ...telemetry, ...modules, ...services];
+}
+
+function dashboardTileKey(tile: DashboardTileReference): string {
+  if (tile.kind === "status") return `${tile.kind}:${tile.stripId}:${tile.id}`;
+  if (tile.kind === "service") return `${tile.kind}:${tile.groupId}:${tile.id}`;
+  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;
+}
+
+function dashboardTileUrl(tile: DashboardTileReference): string {
+  const parts = tile.kind === "status"
+    ? ["api", "dashboard", "tile", tile.kind, tile.stripId, tile.id]
+    : tile.kind === "service"
+      ? ["api", "dashboard", "tile", tile.kind, tile.groupId, tile.id]
+      : ["api", "dashboard", "tile", tile.kind, tile.id];
+  return `/${parts.map(encodeURIComponent).join("/")}`;
+}
+
+function applyDashboardTile(
+  document: DashboardDocument,
+  response: Extract<DashboardTileResponse, { state: "ready" }>,
+): DashboardDocument {
+  if (response.tile.kind === "telemetry") {
+    return {
+      ...document,
+      telemetry: document.telemetry.map((card) =>
+        card.id === response.tile.id ? response.item as TelemetryCard : card,
+      ),
+    };
+  }
+
+  if (response.tile.kind === "service") {
+    const tile = response.tile;
+    return {
+      ...document,
+      serviceGroups: document.serviceGroups.map((group) => ({
+        ...group,
+        services: group.id === tile.groupId
+          ? group.services.map((service) =>
+              service.id === tile.id ? response.item as ServiceEntry : service,
+            )
+          : group.services,
+      })),
+    };
+  }
+
+  if (response.tile.kind === "module") {
+    return {
+      ...document,
+      modules: (document.modules || []).map((module) =>
+        module.id === response.tile.id ? response.item as DashboardModule : module,
+      ),
+    };
+  }
+
+  const tile = response.tile;
+  return {
+    ...document,
+    statusStrips: document.statusStrips.map((strip) =>
+      strip.id === tile.stripId
+        ? {
+            ...strip,
+            items: strip.items.map((item) =>
+              item.id === tile.id ? response.item as StatusItem : item,
+            ),
+          }
+        : strip,
+    ),
+  };
+}

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

@@ -0,0 +1,633 @@
+import { describe, expect, test } from "vitest";
+import {
+  attachDashboardRefreshLifecycle,
+  collectVisibleDashboardModelIds,
+  createDashboardPerformanceMarks,
+  createDashboardRefreshDelay,
+  dashboardPerformanceMarks,
+  createDashboardTileSnapshotStore,
+  createDashboardTileBackoff,
+  createDashboardRequestAborter,
+  runDashboardHydrationQueue,
+  runDashboardHydrationBatchQueue,
+  runViewportAwareDashboardHydrationQueue,
+  shouldPauseDashboardRefresh,
+  splitDashboardHydrationItemsByVisibility,
+  subscribeToDashboardTileEvents,
+  waitForDashboardHydrationIdle,
+  type DashboardIntersectionEntry,
+} from "./dashboard-refresh";
+
+describe("dashboard refresh lifecycle", () => {
+  test("pauses refreshes when the document is hidden or the browser is offline", () => {
+    expect(
+      shouldPauseDashboardRefresh({ visibilityState: "visible", online: true }),
+    ).toBe(false);
+    expect(
+      shouldPauseDashboardRefresh({ visibilityState: "hidden", online: true }),
+    ).toBe(true);
+    expect(
+      shouldPauseDashboardRefresh({ visibilityState: "visible", online: false }),
+    ).toBe(true);
+  });
+
+  test("aborts shell and tile requests when a new shell run starts", () => {
+    const aborter = createDashboardRequestAborter();
+    const shellSignal = aborter.beginShellRun();
+    const tileSignal = aborter.beginTileRun();
+
+    const nextShellSignal = aborter.beginShellRun();
+
+    expect(shellSignal.aborted).toBe(true);
+    expect(tileSignal.aborted).toBe(true);
+    expect(nextShellSignal.aborted).toBe(false);
+  });
+
+  test("aborts active requests when refreshes are paused", () => {
+    const aborter = createDashboardRequestAborter();
+    const shellSignal = aborter.beginShellRun();
+    const tileSignal = aborter.beginTileRun();
+
+    aborter.abortActiveRequests();
+
+    expect(shellSignal.aborted).toBe(true);
+    expect(tileSignal.aborted).toBe(true);
+  });
+
+  test("pauses on hidden, offline, and pagehide events then resumes immediately when visible", () => {
+    const documentTarget = new EventTarget();
+    const windowTarget = new EventTarget();
+    const calls: string[] = [];
+    let paused = true;
+
+    const detach = attachDashboardRefreshLifecycle({
+      documentTarget,
+      windowTarget,
+      loadDashboard: () => {
+        calls.push("load");
+      },
+      pauseRefreshes: () => {
+        calls.push("pause");
+      },
+      refreshPaused: () => paused,
+    });
+
+    documentTarget.dispatchEvent(new Event("visibilitychange"));
+    windowTarget.dispatchEvent(new Event("offline"));
+    windowTarget.dispatchEvent(new Event("pagehide"));
+
+    paused = false;
+    documentTarget.dispatchEvent(new Event("visibilitychange"));
+    windowTarget.dispatchEvent(new Event("online"));
+
+    detach();
+    documentTarget.dispatchEvent(new Event("visibilitychange"));
+    windowTarget.dispatchEvent(new Event("online"));
+
+    expect(calls).toEqual(["pause", "pause", "pause", "load", "load"]);
+  });
+
+  test("limits tile hydration concurrency", async () => {
+    let active = 0;
+    let maxActive = 0;
+    const started: number[] = [];
+    const releases = new Map<number, () => void>();
+
+    const queue = runDashboardHydrationQueue({
+      concurrency: 2,
+      items: [1, 2, 3, 4],
+      signal: new AbortController().signal,
+      hydrate: async (item) => {
+        active += 1;
+        maxActive = Math.max(maxActive, active);
+        started.push(item);
+        await new Promise<void>((resolve) => releases.set(item, resolve));
+        active -= 1;
+      },
+    });
+
+    await waitFor(() => started.length === 2);
+    expect(started).toEqual([1, 2]);
+    expect(maxActive).toBe(2);
+
+    releases.get(1)?.();
+    await waitFor(() => started.length === 3);
+    expect(started).toEqual([1, 2, 3]);
+    expect(maxActive).toBe(2);
+
+    releases.get(2)?.();
+    releases.get(3)?.();
+    await waitFor(() => started.length === 4);
+    releases.get(4)?.();
+    await queue;
+    expect(maxActive).toBe(2);
+  });
+
+  test("hydrates queued work in fixed-size batches", async () => {
+    const batches: number[][] = [];
+
+    await runDashboardHydrationBatchQueue({
+      batchSize: 3,
+      hydrateBatch: (items) => {
+        batches.push(items);
+      },
+      items: [1, 2, 3, 4, 5, 6, 7],
+      signal: new AbortController().signal,
+    });
+
+    expect(batches).toEqual([
+      [1, 2, 3],
+      [4, 5, 6],
+      [7],
+    ]);
+  });
+
+  test("hydrates visible items before deferred items and waits for idle", async () => {
+    const calls: string[] = [];
+    const idleReleases: Array<() => void> = [];
+
+    const hydration = runViewportAwareDashboardHydrationQueue({
+      collectVisibleModelIds: async () => new Set(["b"]),
+      concurrency: 1,
+      getModelId: (item) => item,
+      hydrate: async (item) => {
+        calls.push(item);
+      },
+      items: ["a", "b", "c"],
+      onAllItemsSettled: () => calls.push("all-settled"),
+      onVisibleItemsSettled: () => calls.push("visible-settled"),
+      signal: new AbortController().signal,
+      waitForIdle: async () => {
+        calls.push("idle");
+        await new Promise<void>((resolve) => idleReleases.push(resolve));
+      },
+    });
+
+    await waitFor(() => calls.includes("idle"));
+    expect(calls).toEqual(["b", "visible-settled", "idle"]);
+
+    idleReleases.shift()?.();
+    await hydration;
+    expect(calls).toEqual([
+      "b",
+      "visible-settled",
+      "idle",
+      "a",
+      "c",
+      "all-settled",
+    ]);
+  });
+
+  test("splits visible hydration items while preserving document order", () => {
+    expect(splitDashboardHydrationItemsByVisibility({
+      getModelId: (item) => item.id,
+      items: [{ id: "status" }, { id: "telemetry" }, { id: "service" }],
+      visibleModelIds: new Set(["service", "status"]),
+    })).toEqual({
+      visible: [{ id: "status" }, { id: "service" }],
+      deferred: [{ id: "telemetry" }],
+    });
+  });
+
+  test("collects visible data-model-id elements with IntersectionObserver", async () => {
+    const elements = [
+      modelElement("status"),
+      modelElement("telemetry"),
+      modelElement("unrelated"),
+    ];
+    let callback:
+      | ((entries: DashboardIntersectionEntry[]) => void)
+      | undefined;
+    let finishObservation: (() => void) | undefined;
+    let disconnected = false;
+    const observed: string[] = [];
+
+    const visible = collectVisibleDashboardModelIds({
+      createObserver: (observerCallback) => {
+        callback = observerCallback;
+        return {
+          disconnect() {
+            disconnected = true;
+          },
+          observe(element) {
+            observed.push(element.getAttribute("data-model-id") || "");
+          },
+        };
+      },
+      documentTarget: {
+        querySelectorAll: () => elements,
+      },
+      modelIds: ["status", "telemetry"],
+      setTimeout: (handler) => {
+        finishObservation = handler;
+        return 1 as unknown as ReturnType<typeof setTimeout>;
+      },
+      clearTimeout: () => undefined,
+      signal: new AbortController().signal,
+    });
+
+    callback?.([
+      {
+        isIntersecting: false,
+        intersectionRatio: 0,
+        target: elements[0],
+      },
+      {
+        isIntersecting: true,
+        target: elements[1],
+      },
+    ]);
+    finishObservation?.();
+
+    expect(await visible).toEqual(new Set(["telemetry"]));
+    expect(observed).toEqual(["status", "telemetry"]);
+    expect(disconnected).toBe(true);
+  });
+
+  test("waits for requestIdleCallback when available", async () => {
+    let idleCallback: (() => void) | undefined;
+    let cancelledIdle: number | undefined;
+    const wait = waitForDashboardHydrationIdle({
+      cancelIdleCallback: (handle) => {
+        cancelledIdle = handle;
+      },
+      requestIdleCallback: (callback) => {
+        idleCallback = callback;
+        return 7;
+      },
+      signal: new AbortController().signal,
+    });
+
+    expect(cancelledIdle).toBeUndefined();
+    idleCallback?.();
+    await wait;
+    expect(cancelledIdle).toBe(7);
+  });
+
+  test("jitters refresh delays and slows repeated failures", () => {
+    const delay = createDashboardRefreshDelay({
+      jitterRatio: 0.1,
+      random: () => 1,
+    });
+
+    expect(delay.nextDelayMs(1_000)).toBe(1_100);
+    delay.recordFailure();
+    expect(delay.nextDelayMs(1_000)).toBe(2_200);
+    delay.recordFailure();
+    expect(delay.nextDelayMs(1_000)).toBe(4_400);
+    delay.recordSuccess();
+    expect(delay.nextDelayMs(1_000)).toBe(1_100);
+  });
+
+  test("marks dashboard performance milestones once per shell run", () => {
+    const marks: string[] = [];
+    const performanceMarks = createDashboardPerformanceMarks({
+      mark: (name) => marks.push(name),
+    });
+
+    performanceMarks.markShellLoad();
+    performanceMarks.markFirstTileReady();
+    performanceMarks.markFirstTileReady();
+    performanceMarks.markVisibleTilesReady();
+    performanceMarks.markAllTilesSettled();
+    performanceMarks.markShellLoad();
+    performanceMarks.markFirstTileReady();
+
+    expect(marks).toEqual([
+      dashboardPerformanceMarks.shellLoad,
+      dashboardPerformanceMarks.firstTileReady,
+      dashboardPerformanceMarks.visibleTilesReady,
+      dashboardPerformanceMarks.allTilesSettled,
+      dashboardPerformanceMarks.shellLoad,
+      dashboardPerformanceMarks.firstTileReady,
+    ]);
+  });
+
+  test("subscribes to dashboard tile events", () => {
+    const received: unknown[] = [];
+    let listener: ((event: MessageEvent<string>) => void) | undefined;
+    let closed = false;
+
+    const unsubscribe = subscribeToDashboardTileEvents({
+      createEventSource: (url) => {
+        expect(url).toBe("/api/dashboard/events");
+        return {
+          addEventListener(_type, eventListener) {
+            listener = eventListener;
+          },
+          close() {
+            closed = true;
+          },
+          onerror: null,
+        };
+      },
+      onTile: (tile) => received.push(tile),
+    });
+
+    listener?.({ data: JSON.stringify({ state: "ready" }) } as MessageEvent<string>);
+    expect(received).toEqual([{ state: "ready" }]);
+    unsubscribe();
+    expect(closed).toBe(true);
+  });
+
+  test("falls back when dashboard tile events are unavailable or fail", () => {
+    let unavailableCount = 0;
+
+    subscribeToDashboardTileEvents({
+      createEventSource: undefined,
+      onTile: () => undefined,
+      onUnavailable: () => {
+        unavailableCount += 1;
+      },
+    });
+
+    let errorHandler: (() => void) | null = null;
+    const unsubscribe = subscribeToDashboardTileEvents({
+      createEventSource: () => ({
+        addEventListener: () => undefined,
+        close: () => undefined,
+        get onerror() {
+          return errorHandler;
+        },
+        set onerror(handler) {
+          errorHandler = handler;
+        },
+      }),
+      onTile: () => undefined,
+      onUnavailable: () => {
+        unavailableCount += 1;
+      },
+    });
+
+    if (!errorHandler) throw new Error("expected error handler");
+    const triggerError = errorHandler as unknown as () => void;
+    triggerError();
+    unsubscribe();
+    expect(unavailableCount).toBe(2);
+  });
+
+  test("backs off failed tile keys and resets after success", () => {
+    const backoff = createDashboardTileBackoff();
+
+    backoff.recordFailure("telemetry:infra-ram", 1_000);
+    expect(backoff.canAttempt("telemetry:infra-ram", 15_999)).toBe(false);
+    expect(backoff.canAttempt("telemetry:infra-ram", 16_000)).toBe(true);
+
+    backoff.recordFailure("telemetry:infra-ram", 16_000);
+    expect(backoff.canAttempt("telemetry:infra-ram", 45_999)).toBe(false);
+    expect(backoff.canAttempt("telemetry:infra-ram", 46_000)).toBe(true);
+
+    backoff.recordFailure("telemetry:infra-ram", 46_000);
+    backoff.recordFailure("telemetry:infra-ram", 106_000);
+    expect(backoff.canAttempt("telemetry:infra-ram", 225_999)).toBe(false);
+    expect(backoff.canAttempt("telemetry:infra-ram", 226_000)).toBe(true);
+
+    backoff.recordSuccess("telemetry:infra-ram");
+    expect(backoff.canAttempt("telemetry:infra-ram", 107_000)).toBe(true);
+  });
+
+  test("stores only ready tile snapshots and restores them for matching revisions", () => {
+    const storage = createMemoryStorage();
+    let now = 1_000;
+    const store = createDashboardTileSnapshotStore(storage, {
+      now: () => now,
+    });
+
+    store.saveReadyTile({
+      currentRevisionId: "revision-a",
+      response: {
+        state: "ready",
+        tile: { kind: "telemetry", id: "infra-ram" },
+        item: {
+          id: "infra-ram",
+          label: "Infra RAM",
+          value: { kind: "percent", value: 42 },
+          detail: "live",
+          severity: "ok",
+        },
+      },
+      schemaVersion: "dashboard.v1",
+    });
+    store.saveTile({
+      currentRevisionId: "revision-a",
+      response: {
+        state: "not_found",
+        tile: { kind: "telemetry", id: "missing" },
+        message: "Missing",
+      },
+      schemaVersion: "dashboard.v1",
+    });
+    store.saveTile({
+      currentRevisionId: "revision-a",
+      response: {
+        state: "disabled",
+        tile: { kind: "module", id: "disabled-module" },
+        message: "Disabled",
+      },
+      schemaVersion: "dashboard.v1",
+    });
+
+    now = 61_000;
+
+    const restored = store.restore({
+      currentRevisionId: "revision-a",
+      schemaVersion: "dashboard.v1",
+    });
+
+    expect(restored).toEqual([
+      {
+        ageMs: 60_000,
+        response: {
+          state: "ready",
+          tile: { kind: "telemetry", id: "infra-ram" },
+          item: {
+            id: "infra-ram",
+            label: "Infra RAM",
+            value: { kind: "percent", value: 42 },
+            detail: "live - stale 60s",
+            severity: "stale",
+          },
+        },
+      },
+    ]);
+    expect(store.restore({
+      currentRevisionId: "revision-b",
+      schemaVersion: "dashboard.v1",
+    })).toEqual([]);
+  });
+
+  test("ignores malformed stored tile snapshots", () => {
+    const storage = createMemoryStorage();
+    storage.setItem(
+      "dimensionlab.dashboard.tiles.v1",
+      JSON.stringify({
+        currentRevisionId: "revision-a",
+        schemaVersion: "dashboard.v1",
+        tiles: [
+          {},
+          {
+            item: {
+              id: "incomplete",
+              detail: "live",
+            },
+            savedAt: 1_000,
+            tile: { kind: "telemetry", id: "incomplete" },
+          },
+          {
+            item: {
+              id: "infra-ram",
+              label: "Infra RAM",
+              value: { kind: "percent", value: 42 },
+              detail: "live",
+              severity: "ok",
+            },
+            savedAt: 1_000,
+            tile: { kind: "telemetry", id: "infra-ram" },
+          },
+          {
+            item: { id: "broken-detail", detail: 42 },
+            savedAt: 1_000,
+            tile: { kind: "telemetry", id: "broken-detail" },
+          },
+        ],
+        version: 1,
+      }),
+    );
+
+    const store = createDashboardTileSnapshotStore(storage, {
+      now: () => 16_000,
+    });
+
+    expect(store.restore({
+      currentRevisionId: "revision-a",
+      schemaVersion: "dashboard.v1",
+    })).toEqual([
+      {
+        ageMs: 15_000,
+        response: {
+          state: "ready",
+          tile: { kind: "telemetry", id: "infra-ram" },
+          item: {
+            id: "infra-ram",
+            label: "Infra RAM",
+            value: { kind: "percent", value: 42 },
+            detail: "live - stale 15s",
+            severity: "stale",
+          },
+        },
+      },
+    ]);
+  });
+
+  test("ignores restored aggregate health snapshots", () => {
+    const storage = createMemoryStorage();
+    storage.setItem(
+      "dimensionlab.dashboard.tiles.v1",
+      JSON.stringify({
+        currentRevisionId: "revision-a",
+        schemaVersion: "dashboard.v1",
+        tiles: [
+          {
+            item: {
+              id: "system-status",
+              label: "System Status",
+              value: "20 services down",
+              severity: "danger",
+            },
+            savedAt: 1_000,
+            tile: { kind: "status", stripId: "footer-status", id: "system-status" },
+          },
+          {
+            item: {
+              id: "runtime-health-summary",
+              kind: "summary",
+              title: "Runtime Health",
+              value: "20 services down",
+              detail: "0 warnings - 8 services ok",
+              severity: "danger",
+            },
+            savedAt: 1_000,
+            tile: { kind: "module", id: "runtime-health-summary" },
+          },
+          {
+            item: {
+              id: "infra-ram",
+              label: "Infra RAM",
+              value: { kind: "percent", value: 42 },
+              detail: "live",
+              severity: "ok",
+            },
+            savedAt: 1_000,
+            tile: { kind: "telemetry", id: "infra-ram" },
+          },
+        ],
+        version: 1,
+      }),
+    );
+
+    const store = createDashboardTileSnapshotStore(storage, {
+      now: () => 16_000,
+    });
+
+    expect(store.restore({
+      currentRevisionId: "revision-a",
+      schemaVersion: "dashboard.v1",
+    })).toEqual([
+      {
+        ageMs: 15_000,
+        response: {
+          state: "ready",
+          tile: { kind: "telemetry", id: "infra-ram" },
+          item: {
+            id: "infra-ram",
+            label: "Infra RAM",
+            value: { kind: "percent", value: 42 },
+            detail: "live - stale 15s",
+            severity: "stale",
+          },
+        },
+      },
+    ]);
+  });
+});
+
+async function waitFor(predicate: () => boolean) {
+  for (let attempt = 0; attempt < 20; attempt += 1) {
+    if (predicate()) return;
+    await Promise.resolve();
+  }
+
+  throw new Error("condition was not met");
+}
+
+function createMemoryStorage(): Storage {
+  const values = new Map<string, string>();
+  return {
+    get length() {
+      return values.size;
+    },
+    clear() {
+      values.clear();
+    },
+    getItem(key) {
+      return values.get(key) ?? null;
+    },
+    key(index) {
+      return [...values.keys()][index] ?? null;
+    },
+    removeItem(key) {
+      values.delete(key);
+    },
+    setItem(key, value) {
+      values.set(key, value);
+    },
+  };
+}
+
+function modelElement(modelId: string) {
+  return {
+    getAttribute(name: string) {
+      return name === "data-model-id" ? modelId : null;
+    },
+  };
+}

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

@@ -0,0 +1,886 @@
+export interface DashboardRefreshPauseState {
+  visibilityState: DocumentVisibilityState;
+  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 {
+  return state.visibilityState !== "visible" || !state.online;
+}
+
+export function createDashboardRequestAborter() {
+  let shellController: AbortController | undefined;
+  let tileController: AbortController | undefined;
+
+  function abortController(controller: AbortController | undefined) {
+    if (controller && !controller.signal.aborted) {
+      controller.abort();
+    }
+  }
+
+  return {
+    beginShellRun(): AbortSignal {
+      abortController(shellController);
+      abortController(tileController);
+      shellController = new AbortController();
+      tileController = undefined;
+      return shellController.signal;
+    },
+    beginTileRun(): AbortSignal {
+      abortController(tileController);
+      tileController = new AbortController();
+      return tileController.signal;
+    },
+    abortActiveRequests(): void {
+      abortController(shellController);
+      abortController(tileController);
+      shellController = undefined;
+      tileController = undefined;
+    },
+  };
+}
+
+type DashboardRefreshEventTarget = Pick<
+  EventTarget,
+  "addEventListener" | "removeEventListener"
+>;
+
+export interface DashboardRefreshLifecycleOptions {
+  documentTarget: DashboardRefreshEventTarget;
+  windowTarget: DashboardRefreshEventTarget;
+  loadDashboard: () => void | Promise<void>;
+  pauseRefreshes: () => void;
+  refreshPaused: () => boolean;
+}
+
+export function attachDashboardRefreshLifecycle(
+  options: DashboardRefreshLifecycleOptions,
+): () => void {
+  function handleRefreshLifecycleChange() {
+    if (options.refreshPaused()) {
+      options.pauseRefreshes();
+      return;
+    }
+
+    void options.loadDashboard();
+  }
+
+  function handlePageHide() {
+    options.pauseRefreshes();
+  }
+
+  options.documentTarget.addEventListener(
+    "visibilitychange",
+    handleRefreshLifecycleChange,
+  );
+  options.windowTarget.addEventListener("online", handleRefreshLifecycleChange);
+  options.windowTarget.addEventListener("offline", handleRefreshLifecycleChange);
+  options.windowTarget.addEventListener("pagehide", handlePageHide);
+
+  return () => {
+    options.documentTarget.removeEventListener(
+      "visibilitychange",
+      handleRefreshLifecycleChange,
+    );
+    options.windowTarget.removeEventListener("online", handleRefreshLifecycleChange);
+    options.windowTarget.removeEventListener("offline", handleRefreshLifecycleChange);
+    options.windowTarget.removeEventListener("pagehide", handlePageHide);
+  };
+}
+
+export interface DashboardHydrationQueueOptions<TItem> {
+  concurrency: number;
+  hydrate: (item: TItem) => Promise<void> | void;
+  items: TItem[];
+  signal: AbortSignal;
+}
+
+export async function runDashboardHydrationQueue<TItem>(
+  options: DashboardHydrationQueueOptions<TItem>,
+): Promise<void> {
+  const concurrency = Math.max(1, Math.floor(options.concurrency));
+  let nextIndex = 0;
+
+  async function worker() {
+    while (!options.signal.aborted) {
+      const item = options.items[nextIndex];
+      nextIndex += 1;
+      if (item === undefined) return;
+
+      await options.hydrate(item);
+    }
+  }
+
+  const workerCount = Math.min(concurrency, options.items.length);
+  await Promise.all(
+    Array.from({ length: workerCount }, () => worker()),
+  );
+}
+
+export interface DashboardViewportHydrationQueueOptions<TItem> {
+  batchSize?: number;
+  collectVisibleModelIds: () => Promise<ReadonlySet<string>>;
+  concurrency: number;
+  getModelId: (item: TItem) => string;
+  hydrate: (item: TItem) => Promise<void> | void;
+  hydrateBatch?: (items: TItem[]) => Promise<void> | void;
+  items: TItem[];
+  onAllItemsSettled?: () => void;
+  onVisibleItemsSettled?: () => void;
+  signal: AbortSignal;
+  waitForIdle: () => Promise<void>;
+}
+
+export async function runViewportAwareDashboardHydrationQueue<TItem>(
+  options: DashboardViewportHydrationQueueOptions<TItem>,
+): Promise<void> {
+  const visibleModelIds = await options.collectVisibleModelIds();
+  if (options.signal.aborted) return;
+
+  const { visible, deferred } = splitDashboardHydrationItemsByVisibility({
+    getModelId: options.getModelId,
+    items: options.items,
+    visibleModelIds,
+  });
+
+  await runDashboardHydrationItems(options, visible);
+  if (options.signal.aborted) return;
+  options.onVisibleItemsSettled?.();
+
+  if (!deferred.length) {
+    options.onAllItemsSettled?.();
+    return;
+  }
+
+  await options.waitForIdle();
+  if (options.signal.aborted) return;
+
+  await runDashboardHydrationItems(options, deferred);
+  options.onAllItemsSettled?.();
+}
+
+async function runDashboardHydrationItems<TItem>(
+  options: DashboardViewportHydrationQueueOptions<TItem>,
+  items: TItem[],
+): Promise<void> {
+  if (!options.hydrateBatch) {
+    await runDashboardHydrationQueue({
+      concurrency: options.concurrency,
+      hydrate: options.hydrate,
+      items,
+      signal: options.signal,
+    });
+    return;
+  }
+
+  await runDashboardHydrationBatchQueue({
+    batchSize: options.batchSize ?? options.concurrency,
+    hydrateBatch: options.hydrateBatch,
+    items,
+    signal: options.signal,
+  });
+}
+
+export async function runDashboardHydrationBatchQueue<TItem>(options: {
+  batchSize: number;
+  hydrateBatch: (items: TItem[]) => Promise<void> | void;
+  items: TItem[];
+  signal: AbortSignal;
+}): Promise<void> {
+  const batchSize = Math.max(1, Math.floor(options.batchSize));
+
+  for (let index = 0; index < options.items.length; index += batchSize) {
+    if (options.signal.aborted) return;
+    await options.hydrateBatch(options.items.slice(index, index + batchSize));
+  }
+}
+
+export function splitDashboardHydrationItemsByVisibility<TItem>(options: {
+  getModelId: (item: TItem) => string;
+  items: TItem[];
+  visibleModelIds: ReadonlySet<string>;
+}): {
+  deferred: TItem[];
+  visible: TItem[];
+} {
+  const visible: TItem[] = [];
+  const deferred: TItem[] = [];
+
+  for (const item of options.items) {
+    if (options.visibleModelIds.has(options.getModelId(item))) {
+      visible.push(item);
+    } else {
+      deferred.push(item);
+    }
+  }
+
+  return { visible, deferred };
+}
+
+export interface DashboardModelElement {
+  getAttribute(name: string): string | null;
+}
+
+export interface DashboardViewportElementSource {
+  querySelectorAll(selector: string): ArrayLike<DashboardModelElement>;
+}
+
+export interface DashboardIntersectionEntry {
+  intersectionRatio?: number;
+  isIntersecting: boolean;
+  target: DashboardModelElement;
+}
+
+export interface DashboardIntersectionObserver {
+  disconnect(): void;
+  observe(element: DashboardModelElement): void;
+}
+
+export type DashboardIntersectionObserverFactory = (
+  callback: (entries: DashboardIntersectionEntry[]) => void,
+) => DashboardIntersectionObserver;
+
+type DashboardTimerHandle = ReturnType<typeof setTimeout>;
+
+export interface DashboardVisibleModelIdCollectorOptions {
+  clearTimeout?: (handle: DashboardTimerHandle) => void;
+  createObserver?: DashboardIntersectionObserverFactory;
+  documentTarget: DashboardViewportElementSource;
+  modelIds: Iterable<string>;
+  setTimeout?: (callback: () => void, timeoutMs: number) => DashboardTimerHandle;
+  signal: AbortSignal;
+  timeoutMs?: number;
+}
+
+export async function collectVisibleDashboardModelIds(
+  options: DashboardVisibleModelIdCollectorOptions,
+): Promise<Set<string>> {
+  const targetIds = new Set(options.modelIds);
+  if (!targetIds.size || options.signal.aborted) return new Set();
+
+  const elements = Array.from(
+    options.documentTarget.querySelectorAll("[data-model-id]"),
+  ).filter((element) => {
+    const modelId = element.getAttribute("data-model-id");
+    return modelId ? targetIds.has(modelId) : false;
+  });
+
+  if (!elements.length) return new Set();
+  if (!options.createObserver) return targetIds;
+  const createObserver = options.createObserver;
+
+  const setTimer =
+    options.setTimeout ||
+    ((callback: () => void, timeoutMs: number) =>
+      globalThis.setTimeout(callback, timeoutMs));
+  const clearTimer =
+    options.clearTimeout ||
+    ((handle: DashboardTimerHandle) => globalThis.clearTimeout(handle));
+  const timeoutMs = options.timeoutMs ?? 80;
+
+  return new Promise((resolve) => {
+    const visibleModelIds = new Set<string>();
+    let settled = false;
+    let timeoutHandle: DashboardTimerHandle | undefined;
+    let observer: DashboardIntersectionObserver | undefined;
+
+    function cleanup() {
+      if (timeoutHandle !== undefined) {
+        clearTimer(timeoutHandle);
+      }
+      observer?.disconnect();
+      options.signal.removeEventListener("abort", finish);
+    }
+
+    function finish() {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      resolve(visibleModelIds);
+    }
+
+    observer = createObserver((entries) => {
+      for (const entry of entries) {
+        const modelId = entry.target.getAttribute("data-model-id");
+        if (
+          modelId &&
+          targetIds.has(modelId) &&
+          (entry.isIntersecting || (entry.intersectionRatio ?? 0) > 0)
+        ) {
+          visibleModelIds.add(modelId);
+        }
+      }
+    });
+
+    for (const element of elements) {
+      observer.observe(element);
+    }
+
+    options.signal.addEventListener("abort", finish, { once: true });
+    timeoutHandle = setTimer(finish, timeoutMs);
+  });
+}
+
+export interface DashboardHydrationIdleOptions {
+  cancelIdleCallback?: (handle: number) => void;
+  clearTimeout?: (handle: DashboardTimerHandle) => void;
+  requestIdleCallback?: (
+    callback: () => void,
+    options?: { timeout?: number },
+  ) => number;
+  setTimeout?: (callback: () => void, timeoutMs: number) => DashboardTimerHandle;
+  signal: AbortSignal;
+  timeoutMs?: number;
+}
+
+export async function waitForDashboardHydrationIdle(
+  options: DashboardHydrationIdleOptions,
+): Promise<void> {
+  if (options.signal.aborted) return;
+
+  const setTimer =
+    options.setTimeout ||
+    ((callback: () => void, timeoutMs: number) =>
+      globalThis.setTimeout(callback, timeoutMs));
+  const clearTimer =
+    options.clearTimeout ||
+    ((handle: DashboardTimerHandle) => globalThis.clearTimeout(handle));
+
+  await new Promise<void>((resolve) => {
+    let settled = false;
+    let idleHandle: number | undefined;
+    let timeoutHandle: DashboardTimerHandle | undefined;
+
+    function cleanup() {
+      if (idleHandle !== undefined) {
+        options.cancelIdleCallback?.(idleHandle);
+      }
+      if (timeoutHandle !== undefined) {
+        clearTimer(timeoutHandle);
+      }
+      options.signal.removeEventListener("abort", finish);
+    }
+
+    function finish() {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      resolve();
+    }
+
+    options.signal.addEventListener("abort", finish, { once: true });
+    if (options.requestIdleCallback) {
+      idleHandle = options.requestIdleCallback(finish, {
+        timeout: options.timeoutMs ?? 1_000,
+      });
+    } else {
+      timeoutHandle = setTimer(finish, 0);
+    }
+  });
+}
+
+export interface DashboardRefreshDelayOptions {
+  failureMultiplierLimit?: number;
+  jitterRatio?: number;
+  random?: () => number;
+}
+
+export function createDashboardRefreshDelay(
+  options: DashboardRefreshDelayOptions = {},
+) {
+  const random = options.random || Math.random;
+  const jitterRatio = options.jitterRatio ?? 0.1;
+  const failureMultiplierLimit = options.failureMultiplierLimit ?? 8;
+  let consecutiveFailures = 0;
+
+  return {
+    nextDelayMs(baseDelayMs: number): number {
+      const failureMultiplier = consecutiveFailures
+        ? Math.min(2 ** consecutiveFailures, failureMultiplierLimit)
+        : 1;
+      const jitterFactor = 1 + ((random() * 2) - 1) * jitterRatio;
+      return Math.max(0, Math.round(baseDelayMs * failureMultiplier * jitterFactor));
+    },
+    recordFailure(): void {
+      consecutiveFailures += 1;
+    },
+    recordSuccess(): void {
+      consecutiveFailures = 0;
+    },
+  };
+}
+
+export interface DashboardPerformanceMarkOptions {
+  mark?: (name: string) => void;
+}
+
+export const dashboardPerformanceMarks = {
+  allTilesSettled: "dashboard:all-tiles-settled",
+  firstTileReady: "dashboard:first-tile-ready",
+  shellLoad: "dashboard:shell-load",
+  visibleTilesReady: "dashboard:visible-tiles-ready",
+} as const;
+
+export function createDashboardPerformanceMarks(
+  options: DashboardPerformanceMarkOptions = {},
+) {
+  const mark = options.mark ||
+    globalThis.performance?.mark?.bind(globalThis.performance);
+  let firstTileReadyMarked = false;
+
+  function safeMark(name: string) {
+    try {
+      mark?.(name);
+    } catch {
+      // Performance marks are diagnostics only.
+    }
+  }
+
+  return {
+    markAllTilesSettled(): void {
+      safeMark(dashboardPerformanceMarks.allTilesSettled);
+    },
+    markFirstTileReady(): void {
+      if (firstTileReadyMarked) return;
+      firstTileReadyMarked = true;
+      safeMark(dashboardPerformanceMarks.firstTileReady);
+    },
+    markShellLoad(): void {
+      firstTileReadyMarked = false;
+      safeMark(dashboardPerformanceMarks.shellLoad);
+    },
+    markVisibleTilesReady(): void {
+      safeMark(dashboardPerformanceMarks.visibleTilesReady);
+    },
+  };
+}
+
+export interface DashboardTileEventSource {
+  addEventListener(
+    type: "dashboard-tile",
+    listener: (event: MessageEvent<string>) => void,
+  ): void;
+  close(): void;
+  onerror: (() => void) | null;
+}
+
+export interface DashboardTileEventSubscriptionOptions {
+  createEventSource?: (url: string) => DashboardTileEventSource;
+  onTile: (data: unknown) => void;
+  onUnavailable?: () => void;
+  url?: string;
+}
+
+export function subscribeToDashboardTileEvents(
+  options: DashboardTileEventSubscriptionOptions,
+): () => void {
+  const createEventSource = options.createEventSource ||
+    (typeof globalThis.EventSource !== "undefined"
+      ? (url: string) => new globalThis.EventSource(url)
+      : undefined);
+
+  if (!createEventSource) {
+    options.onUnavailable?.();
+    return () => undefined;
+  }
+
+  const source = createEventSource(options.url || "/api/dashboard/events");
+  source.addEventListener("dashboard-tile", (event) => {
+    try {
+      options.onTile(JSON.parse(event.data));
+    } catch {
+      // Ignore malformed diagnostics from an optional live transport.
+    }
+  });
+  source.onerror = () => {
+    source.close();
+    options.onUnavailable?.();
+  };
+
+  return () => source.close();
+}
+
+const dashboardTileBackoffDelaysMs = [15_000, 30_000, 60_000, 120_000];
+
+export function createDashboardTileBackoff() {
+  const failures = new Map<string, { attempts: number; nextAttemptAt: number }>();
+
+  return {
+    canAttempt(key: string, now = Date.now()): boolean {
+      const failure = failures.get(key);
+      return !failure || now >= failure.nextAttemptAt;
+    },
+    recordFailure(key: string, now = Date.now()): void {
+      const previousAttempts = failures.get(key)?.attempts || 0;
+      const attempts = previousAttempts + 1;
+      const delay =
+        dashboardTileBackoffDelaysMs[
+          Math.min(attempts - 1, dashboardTileBackoffDelaysMs.length - 1)
+        ];
+      failures.set(key, {
+        attempts,
+        nextAttemptAt: now + delay,
+      });
+    },
+    recordSuccess(key: string): void {
+      failures.delete(key);
+    },
+  };
+}
+
+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 {
+        currentRevisionId: payload.currentRevisionId,
+        schemaVersion: payload.schemaVersion,
+        tiles: payload.tiles
+          .filter(isDashboardTileSnapshotRecord)
+          .filter((record) => isPersistableDashboardTileSnapshot(record.tile)),
+        version: 1,
+      };
+    } 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 {
+    if (!isPersistableDashboardTileSnapshot(input.response.tile)) return;
+
+    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);
+}
+
+export function isPersistableDashboardTileSnapshot(
+  tile: DashboardTileReference,
+): boolean {
+  if (tile.kind === "status" && tile.id === "system-status") return false;
+  if (tile.kind === "module" && tile.id === "runtime-health-summary") return false;
+  return true;
+}
+
+function isDashboardTileSnapshotRecord(
+  value: unknown,
+): value is DashboardTileSnapshotRecord {
+  if (!isSnapshotRecord(value)) return false;
+
+  return (
+    typeof value.savedAt === "number" &&
+    Number.isFinite(value.savedAt) &&
+    isDashboardTileReference(value.tile) &&
+    isDashboardTileSnapshotItem(value.tile, value.item)
+  );
+}
+
+function isDashboardTileReference(
+  value: unknown,
+): value is DashboardTileReference {
+  if (!isSnapshotRecord(value) || typeof value.kind !== "string") return false;
+
+  switch (value.kind) {
+    case "telemetry":
+    case "module":
+      return typeof value.id === "string";
+    case "service":
+      return typeof value.groupId === "string" && typeof value.id === "string";
+    case "status":
+      return typeof value.stripId === "string" && typeof value.id === "string";
+    default:
+      return false;
+  }
+}
+
+function isDashboardTileSnapshotItem(
+  tile: DashboardTileReference,
+  value: unknown,
+): value is DashboardTileSnapshotItem {
+  if (!isSnapshotRecord(value) || value.id !== tile.id) return false;
+
+  switch (tile.kind) {
+    case "telemetry":
+      return (
+        typeof value.label === "string" &&
+        isMetricValue(value.value) &&
+        isSeverity(value.severity) &&
+        isOptionalString(value.detail) &&
+        isOptionalString(value.description) &&
+        isOptionalString(value.icon) &&
+        isOptionalNumberArray(value.sparkline)
+      );
+    case "service":
+      return (
+        typeof value.label === "string" &&
+        typeof value.description === "string" &&
+        isSeverity(value.severity) &&
+        isOptionalString(value.detail) &&
+        isOptionalString(value.icon) &&
+        isOptionalLink(value.link)
+      );
+    case "module":
+      return (
+        (value.kind === "summary" ||
+          value.kind === "weather" ||
+          value.kind === "custom") &&
+        isOptionalString(value.title) &&
+        isOptionalString(value.label) &&
+        isOptionalString(value.value) &&
+        isOptionalString(value.detail) &&
+        isOptionalString(value.icon) &&
+        (value.severity === undefined || isSeverity(value.severity))
+      );
+    case "status":
+      return (
+        typeof value.label === "string" &&
+        typeof value.value === "string" &&
+        isOptionalLink(value.link) &&
+        (value.severity === undefined || isSeverity(value.severity))
+      );
+  }
+}
+
+function isSnapshotRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function isMetricValue(value: unknown): boolean {
+  if (!isSnapshotRecord(value) || typeof value.kind !== "string") return false;
+
+  if (value.kind === "text") {
+    return (
+      typeof value.value === "string" &&
+      isOptionalString(value.unit)
+    );
+  }
+
+  const numericKinds = ["bytes", "latency", "number", "percent", "temperature"];
+  if (!numericKinds.includes(value.kind)) return false;
+  if (typeof value.value !== "number" || !Number.isFinite(value.value)) return false;
+  if (value.kind === "percent" && (value.value < 0 || value.value > 100)) {
+    return false;
+  }
+
+  const precision = value.precision;
+  return (
+    isOptionalString(value.unit) &&
+    (precision === undefined ||
+      (typeof precision === "number" &&
+        Number.isInteger(precision) &&
+        precision >= 0 &&
+        precision <= 4))
+  );
+}
+
+function isSeverity(value: unknown): boolean {
+  return (
+    value === "neutral" ||
+    value === "ok" ||
+    value === "warning" ||
+    value === "danger" ||
+    value === "stale" ||
+    value === "unavailable"
+  );
+}
+
+function isOptionalString(value: unknown): boolean {
+  return value === undefined || typeof value === "string";
+}
+
+function isOptionalNumberArray(value: unknown): boolean {
+  return (
+    value === undefined ||
+    (Array.isArray(value) &&
+      value.every((item) => typeof item === "number" && Number.isFinite(item)))
+  );
+}
+
+function isOptionalLink(value: unknown): boolean {
+  return (
+    value === undefined ||
+    (isSnapshotRecord(value) &&
+      typeof value.href === "string" &&
+      isOptionalString(value.label) &&
+      (value.external === undefined || typeof value.external === "boolean"))
+  );
+}
+
+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;
+}

apps/web/src/lib/dashboard-seed/dimensionlab.test.ts

@@ -128,7 +128,6 @@ const verifiedSeedIconIds = new Set([
   "mdi:pulse",
   "mdi:robot-outline",
   "mdi:router-network",
-  "mdi:text-box-search",
   "mdi:thermometer",
   "mdi:web",
   "mdi:weather-sunny",

apps/web/src/lib/dashboard-seed/dimensionlab.ts

@@ -431,14 +431,6 @@ export const dimensionLabDashboardFixture: DashboardDocument = {
         href: "https://models.dimensionlab.net",
         datasource: uptimeMonitor(7),
       }),
-      service({
-        id: "prompt-registry",
-        label: "Prompt Registry",
-        description: "Shared prompts, traces, evals",
-        icon: "mdi:text-box-search",
-        href: "https://prompts.dimensionlab.net",
-        datasource: uptimeMonitor(20),
-      }),
     ]),
     group("systems", "Systems", [
       service({

apps/web/src/lib/server/dashboard.test.ts

@@ -66,9 +66,6 @@ describe("dashboard runtime loader", () => {
     expect(runtime.document.statusStrips[0]?.items.map((item) => item.id)).toContain(
       "auto-refresh",
     );
-    expect(runtime.document.serviceGroups.flatMap((group) => group.services).map((service) => service.id)).toContain(
-      "prompt-registry",
-    );
     expect(store.listRevisions()).toHaveLength(2);
     expect(store.getActiveDashboard()?.revision.actor).toBe("initial-seed");
   });
@@ -138,13 +135,5 @@ function olderDimensionLabSeed() {
     ...strip,
     items: strip.items.filter((item) => item.id !== "auto-refresh"),
   }));
-  document.serviceGroups = document.serviceGroups.map((group) =>
-    group.id === "ai-automation"
-      ? {
-          ...group,
-          services: group.services.filter((service) => service.id !== "prompt-registry"),
-        }
-      : group,
-  );
   return document;
 }

apps/web/src/lib/server/dashboard.ts

@@ -18,6 +18,9 @@ export interface DashboardRuntimeReady {
   document: DashboardDocument;
   schemaVersion: string;
   currentRevisionId: string;
+  liveDatasourceHydration?: {
+    enabled: boolean;
+  };
 }
 
 export interface DashboardRuntimeEmpty {

apps/web/src/lib/server/datasources/dashboard-datasources.test.ts

@@ -3,7 +3,7 @@ import {
   DASHBOARD_SCHEMA_VERSION,
   type DashboardDocument,
 } from "@dimensionlab/dashboard-model";
-import { resolveDashboardDatasources } from ".";
+import { resolveDashboardDatasources, resolveDashboardTile } from ".";
 
 describe("dashboard datasource resolution", () => {
   test("hydrates telemetry, service health, weather, and summary data from live adapters", async () => {
@@ -124,6 +124,100 @@ describe("dashboard datasource resolution", () => {
     expect(resolved).not.toBe(testDocument);
     expect(testDocument.telemetry[0].value.value).toBe(1);
   });
+
+  test("shares service health snapshots across aggregate tile hydration", async () => {
+    let resolveFetch: ((response: Response) => void) | undefined;
+    const fetch = vi.fn((input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url !== "https://service.example/health") {
+        throw new Error(`Unhandled test request: ${url}`);
+      }
+
+      return new Promise<Response>((resolve) => {
+        resolveFetch = resolve;
+      });
+    });
+    const document = testDashboard();
+
+    const moduleTile = resolveDashboardTile(
+      document,
+      { kind: "module", id: "runtime-health-summary" },
+      { fetch },
+    );
+    const statusTile = resolveDashboardTile(
+      document,
+      { kind: "status", stripId: "footer", id: "system-status" },
+      { fetch },
+    );
+
+    await Promise.resolve();
+    expect(fetch).toHaveBeenCalledTimes(1);
+
+    resolveFetch?.(jsonResponse({ status: "UP", ping: 42 }));
+    expect(await moduleTile).toMatchObject({
+      state: "ready",
+      item: {
+        id: "runtime-health-summary",
+        severity: "ok",
+        value: "all systems operational",
+      },
+    });
+    expect(await statusTile).toMatchObject({
+      state: "ready",
+      item: {
+        id: "system-status",
+        severity: "ok",
+        value: "All systems operational",
+      },
+    });
+  });
+
+  test("isolates service health snapshots by datasource fetch context", async () => {
+    const firstFetch = vi.fn(async () =>
+      jsonResponse({
+        status: "UP",
+        ping: 42,
+      })
+    );
+    const secondFetch = vi.fn(async () =>
+      jsonResponse({
+        status: "DOWN",
+        ping: 0,
+      })
+    );
+    const document = testDashboard();
+    document.serviceGroups[0].services[0] = {
+      ...document.serviceGroups[0].services[0],
+      id: "api-isolated",
+      datasource: {
+        type: "external",
+        adapter: "http-status",
+        reference: "GET https://service.example/isolated",
+      },
+    };
+
+    await resolveDashboardTile(
+      document,
+      { kind: "status", stripId: "footer", id: "system-status" },
+      { fetch: firstFetch },
+    );
+    const second = await resolveDashboardTile(
+      document,
+      { kind: "status", stripId: "footer", id: "system-status" },
+      { fetch: secondFetch },
+    );
+
+    expect(firstFetch).toHaveBeenCalledTimes(1);
+    expect(secondFetch).toHaveBeenCalledTimes(1);
+    expect(second).toMatchObject({
+      state: "ready",
+      item: {
+        id: "system-status",
+        severity: "danger",
+        value: "1 service down",
+      },
+    });
+  });
 });
 
 const testDocument = testDashboard();

apps/web/src/lib/server/datasources/index.ts

@@ -10,8 +10,38 @@ import type {
   TelemetryCard,
 } from "@dimensionlab/dashboard-model";
 
+export type DashboardTileReference =
+  | { kind: "telemetry"; id: string }
+  | { kind: "service"; groupId: string; id: string }
+  | { kind: "module"; id: string }
+  | { kind: "status"; stripId: string; id: string };
+
+export type DashboardTileItem =
+  | DashboardModule
+  | ServiceEntry
+  | StatusItem
+  | TelemetryCard;
+
+export type DashboardTileResolution =
+  | {
+      state: "ready";
+      tile: DashboardTileReference;
+      item: DashboardTileItem;
+    }
+  | {
+      state: "not_found";
+      tile: DashboardTileReference;
+      message: string;
+    }
+  | {
+      state: "disabled";
+      tile: DashboardTileReference;
+      message: string;
+    };
+
 export interface DatasourceResolutionOptions {
   fetch?: DatasourceFetch;
+  now?: () => number;
   prometheusBaseUrl?: string;
   prometheusRangeSeconds?: number;
   prometheusStepSeconds?: number;
@@ -46,16 +76,90 @@ export async function resolveDashboardDatasources(
   };
 }
 
+export async function resolveDashboardTile(
+  document: DashboardDocument,
+  tile: DashboardTileReference,
+  options: DatasourceResolutionOptions = {},
+): Promise<DashboardTileResolution> {
+  const context = datasourceContext(options);
+
+  if (tile.kind === "telemetry") {
+    const card = document.telemetry.find((item) => item.id === tile.id);
+    if (!card) return missingTile(tile);
+
+    return {
+      state: "ready",
+      tile,
+      item: await resolveTelemetryCard(card, context),
+    };
+  }
+
+  if (tile.kind === "service") {
+    const service = document.serviceGroups
+      .find((group) => group.id === tile.groupId)
+      ?.services.find((item) => item.id === tile.id);
+    if (!service) return missingTile(tile);
+
+    return {
+      state: "ready",
+      tile,
+      item: await resolveService(service, context),
+    };
+  }
+
+  if (tile.kind === "module") {
+    const module = document.modules?.find((item) => item.id === tile.id);
+    if (!module) return missingTile(tile);
+
+    const item = module.id === "runtime-health-summary"
+      ? runtimeHealthSummary(
+          module,
+          await serviceGroupsSnapshot(document, context),
+        )
+      : await resolveModule(module, context);
+
+    return { state: "ready", tile, item };
+  }
+
+  const strip = document.statusStrips.find((item) => item.id === tile.stripId);
+  const statusItem = strip?.items.find((item) => item.id === tile.id);
+  if (!strip || !statusItem) return missingTile(tile);
+
+  return {
+    state: "ready",
+    tile,
+    item: await resolveStatusTile(
+      statusItem,
+      document.metadata.refreshIntervalSeconds,
+      document,
+      context,
+    ),
+  };
+}
+
 interface DatasourceContext {
   fetch: DatasourceFetch;
+  fetchIdentity: number;
+  now: () => number;
   prometheusBaseUrl: string;
   prometheusRangeSeconds: number;
   prometheusStepSeconds: number;
   requestTimeoutMs: number;
+  serviceGroupsSnapshot?: Promise<ServiceGroup[]>;
 }
 
 type DatasourceFetch = (input: string, init?: RequestInit) => Promise<Response>;
 
+interface ServiceGroupsSnapshotEntry {
+  expiresAt: number;
+  snapshot: Promise<ServiceGroup[]>;
+}
+
+const serviceGroupsSnapshotTtlMs = 30_000;
+const serviceGroupsSnapshotCache = new Map<string, ServiceGroupsSnapshotEntry>();
+const datasourceFetchIdentities = new WeakMap<DatasourceFetch, number>();
+let nextDatasourceFetchIdentity = 1;
+
 interface PrometheusVectorResult {
   metric?: Record<string, string>;
   value?: [number, string];
@@ -67,8 +171,12 @@ interface PrometheusMatrixResult {
 }
 
 function datasourceContext(options: DatasourceResolutionOptions): DatasourceContext {
+  const fetch = options.fetch || globalThis.fetch;
+
   return {
-    fetch: options.fetch || globalThis.fetch,
+    fetch,
+    fetchIdentity: datasourceFetchIdentity(fetch),
+    now: options.now || Date.now,
     prometheusBaseUrl:
       options.prometheusBaseUrl ||
       process.env.PROMETHEUS_BASE_URL ||
@@ -79,6 +187,68 @@ function datasourceContext(options: DatasourceResolutionOptions): DatasourceCont
   };
 }
 
+function datasourceFetchIdentity(fetch: DatasourceFetch): number {
+  const existing = datasourceFetchIdentities.get(fetch);
+  if (existing) return existing;
+
+  const next = nextDatasourceFetchIdentity;
+  nextDatasourceFetchIdentity += 1;
+  datasourceFetchIdentities.set(fetch, next);
+  return next;
+}
+
+function serviceGroupsSnapshot(
+  document: DashboardDocument,
+  context: DatasourceContext,
+): Promise<ServiceGroup[]> {
+  if (context.serviceGroupsSnapshot) return context.serviceGroupsSnapshot;
+
+  const key = serviceGroupsSnapshotKey(document, context);
+  const now = context.now();
+  const cached = serviceGroupsSnapshotCache.get(key);
+  if (cached && cached.expiresAt > now) {
+    context.serviceGroupsSnapshot = cached.snapshot;
+    return cached.snapshot;
+  }
+
+  const snapshot = Promise.all(
+    document.serviceGroups.map((group) => resolveServiceGroup(group, context)),
+  );
+  context.serviceGroupsSnapshot = snapshot;
+  serviceGroupsSnapshotCache.set(key, {
+    expiresAt: now + serviceGroupsSnapshotTtlMs,
+    snapshot,
+  });
+  snapshot.catch(() => {
+    if (serviceGroupsSnapshotCache.get(key)?.snapshot === snapshot) {
+      serviceGroupsSnapshotCache.delete(key);
+    }
+  });
+  return snapshot;
+}
+
+function serviceGroupsSnapshotKey(
+  document: DashboardDocument,
+  context: DatasourceContext,
+): string {
+  return JSON.stringify(
+    {
+      fetchIdentity: context.fetchIdentity,
+      prometheusBaseUrl: context.prometheusBaseUrl,
+      prometheusRangeSeconds: context.prometheusRangeSeconds,
+      prometheusStepSeconds: context.prometheusStepSeconds,
+      requestTimeoutMs: context.requestTimeoutMs,
+      serviceGroups: document.serviceGroups.map((group) => ({
+        id: group.id,
+        services: group.services.map((service) => ({
+          datasource: service.datasource,
+          id: service.id,
+        })),
+      })),
+    },
+  );
+}
+
 async function resolveTelemetryCard(
   card: TelemetryCard,
   context: DatasourceContext,
@@ -390,6 +560,66 @@ function resolveStatusItem(
   return structuredClone(item);
 }
 
+async function resolveStatusTile(
+  item: StatusItem,
+  refreshIntervalSeconds: number | undefined,
+  document: DashboardDocument,
+  context: DatasourceContext,
+): Promise<StatusItem> {
+  if (item.id === "system-status") {
+    const resolvedGroups = await serviceGroupsSnapshot(document, context);
+    const health = serviceHealthSummary(resolvedGroups);
+    return {
+      ...structuredClone(item),
+      value: health.value,
+      severity: health.severity,
+    };
+  }
+
+  if (item.id === "last-sync") {
+    return {
+      ...structuredClone(item),
+      value: "just now",
+      severity: "ok",
+    };
+  }
+
+  if (item.id === "uptime") {
+    const uptime = await prometheusScalar(
+      'time() - node_boot_time_seconds{job="node",host="linux-infra"}',
+      context,
+    ).catch(() => null);
+    return uptime === null
+      ? structuredClone(item)
+      : {
+          ...structuredClone(item),
+          value: formatDuration(uptime),
+          severity: "ok",
+        };
+  }
+
+  if (item.id === "load-avg") {
+    const loadAverage = await prometheusLoadAverage(context).catch(() => null);
+    return loadAverage
+      ? {
+          ...structuredClone(item),
+          value: loadAverage,
+          severity: "neutral",
+        }
+      : structuredClone(item);
+  }
+
+  if (item.id === "auto-refresh" && refreshIntervalSeconds) {
+    return {
+      ...structuredClone(item),
+      value: `${refreshIntervalSeconds}s`,
+      severity: "neutral",
+    };
+  }
+
+  return structuredClone(item);
+}
+
 function serviceHealthSummary(serviceGroups: ServiceGroup[]): {
   severity: Severity;
   value: string;
@@ -673,3 +903,17 @@ function formatDuration(totalSeconds: number): string {
   const minutes = Math.floor((seconds % 3_600) / 60);
   return `${days}d ${hours}h ${minutes}m`;
 }
+
+function missingTile(tile: DashboardTileReference): DashboardTileResolution {
+  return {
+    state: "not_found",
+    tile,
+    message: `Dashboard tile not found: ${tileKey(tile)}`,
+  };
+}
+
+function tileKey(tile: DashboardTileReference): string {
+  if (tile.kind === "status") return `${tile.kind}:${tile.stripId}:${tile.id}`;
+  if (tile.kind === "service") return `${tile.kind}:${tile.groupId}:${tile.id}`;
+  return `${tile.kind}:${tile.id}`;
+}

apps/web/src/lib/workspace-boundary.test.ts

@@ -1,4 +1,6 @@
-import { existsSync, readFileSync } from "node:fs";
+import { spawnSync } from "node:child_process";
+import { chmodSync, existsSync, mkdtempSync, readFileSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { describe, expect, test } from "vitest";
 
@@ -42,6 +44,8 @@ describe("workspace boundaries", () => {
       "turbo run check test:unit build @dimensionlab/ui#build-storybook @dimensionlab/web#test:e2e",
     );
     expect(webPackage.scripts).not.toHaveProperty("test:qa");
+    expect(webPackage.scripts?.test).toBe("bun --bun vitest run");
+    expect(webPackage.scripts?.["test:unit"]).toBe("bun --bun vitest run");
     expect(turboConfig.tasks).not.toHaveProperty("test:qa");
     expect(turboConfig.globalDependencies).toEqual(
       expect.arrayContaining(["bun.lock", "tsconfig.base.json"]),
@@ -74,6 +78,21 @@ describe("workspace boundaries", () => {
     );
   });
 
+  test("accounts for local env files in cacheable Vite and Storybook task hashes", () => {
+    const turboConfig = JSON.parse(
+      readFileSync(join(root, "turbo.json"), "utf8"),
+    ) as {
+      tasks?: Record<string, { inputs?: string[] }>;
+    };
+
+    for (const taskName of ["build", "build-storybook"]) {
+      expect(turboConfig.tasks?.[taskName]?.inputs).toEqual([
+        "$TURBO_DEFAULT$",
+        ".env*",
+      ]);
+    }
+  });
+
   test("keeps the website app and reusable UI library as separate packages", () => {
     const webPackage = JSON.parse(
       readFileSync(join(root, "apps/web/package.json"), "utf8"),
@@ -114,6 +133,62 @@ describe("workspace boundaries", () => {
     );
   });
 
+  test("consumes workspace packages through package exports instead of source aliases", () => {
+    const webTsconfig = JSON.parse(
+      readFileSync(join(root, "apps/web/tsconfig.json"), "utf8"),
+    ) as { compilerOptions?: { paths?: Record<string, string[]> } };
+    const modelPackage = JSON.parse(
+      readFileSync(join(root, "packages/dashboard-model/package.json"), "utf8"),
+    ) as { exports?: Record<string, WorkspacePackageExport> };
+    const uiPackage = JSON.parse(
+      readFileSync(join(root, "packages/ui/package.json"), "utf8"),
+    ) as { exports?: Record<string, WorkspacePackageExport> };
+    const viteConfig = readFileSync(join(root, "apps/web/vite.config.ts"), "utf8");
+    const turboConfig = JSON.parse(
+      readFileSync(join(root, "turbo.json"), "utf8"),
+    ) as { tasks?: Record<string, { dependsOn?: string[] }> };
+
+    expect(webTsconfig.compilerOptions?.paths).not.toHaveProperty(
+      "@dimensionlab/dashboard-model",
+    );
+    expect(webTsconfig.compilerOptions?.paths).not.toHaveProperty(
+      "@dimensionlab/dashboard-model/fixtures",
+    );
+    expect(webTsconfig.compilerOptions?.paths).not.toHaveProperty("@dimensionlab/ui");
+    expect(webTsconfig.compilerOptions?.paths).not.toHaveProperty(
+      "@dimensionlab/ui/styles.css",
+    );
+    expect(webTsconfig.compilerOptions?.paths).toEqual({
+      "$lib/*": ["src/lib/*"],
+    });
+    expect(viteConfig).not.toContain("../../packages/dashboard-model/src");
+    expect(viteConfig).not.toContain("../../packages/ui/src");
+    expect(turboConfig.tasks?.dev?.dependsOn).toEqual(["^build"]);
+    expectPackageExport(modelPackage.exports?.["."], {
+      types: "./dist/index.d.ts",
+      development: "./src/index.ts",
+      default: "./dist/index.js",
+    });
+    expectPackageExport(modelPackage.exports?.["./fixtures"], {
+      types: "./dist/fixtures/index.d.ts",
+      development: "./src/fixtures/index.ts",
+      default: "./dist/fixtures/index.js",
+    });
+    expectPackageExport(uiPackage.exports?.["."], {
+      types: "./dist/index.d.ts",
+      development: "./src/index.ts",
+      default: "./dist/index.js",
+    });
+    expectPackageExport(uiPackage.exports?.["./styles.css"], {
+      development: "./src/styles.css",
+      default: "./dist/styles.css",
+    });
+    expectPackageExport(uiPackage.exports?.["./tokens.css"], {
+      development: "./src/tokens.css",
+      default: "./dist/tokens.css",
+    });
+  });
+
   test("builds the internal container from a turbo-pruned web workspace", () => {
     const containerfile = readFileSync(
       join(root, "apps/web/Containerfile"),
@@ -124,7 +199,7 @@ describe("workspace boundaries", () => {
     const sourceCopy = "COPY --from=pruner /repo/out/full/ ./";
     const tsconfigCopy =
       "COPY --from=pruner /repo/tsconfig.base.json /repo/tsconfig.json ./";
-    const installCommand = "RUN bun install --frozen-lockfile";
+    const installCommand = "RUN bun install --frozen-lockfile --ignore-scripts";
 
     expect(containerfile).toContain("AS pruner");
     expect(containerfile).toContain(pruneCommand);
@@ -182,4 +257,322 @@ describe("workspace boundaries", () => {
       "rm -rf build && vite build && bun build src/server/index.ts --target bun --outdir build",
     );
   });
+
+  test("defines Forgejo CI and main-branch deploy automation", () => {
+    const workflow = readFileSync(
+      join(root, ".forgejo/workflows/dimensionlab-website.yml"),
+      "utf8",
+    );
+
+    expect(workflow).toContain("name: Dimension Lab website");
+    expect(workflow).toContain("pull_request:");
+    expect(workflow).toContain("push:");
+    expect(workflow).toContain("branches:");
+    expect(workflow).toContain("- main");
+    expect(workflow).toContain("runs-on: docker");
+    expect(workflow).toContain("bun install --frozen-lockfile");
+    expect(workflow).toContain("bun run check");
+    expect(workflow).toContain("bun run test");
+    expect(workflow).toContain("bun run build");
+    expect(workflow).toContain("needs: ci");
+    expect(workflow).toContain("runs-on: deploy");
+    expect(workflow).toContain("github.event_name == 'push'");
+    expect(workflow).toContain("github.ref == 'refs/heads/main'");
+    expect(workflow).toContain(
+      "git remote add origin git@git.dimensionlab.net:vince/dimensionlab-website.git",
+    );
+    expect(workflow).toContain('git fetch --force --prune --depth=1 origin "$GITHUB_SHA"');
+    expect(workflow).toContain("podman inspect dimensionlab-website");
+    expect(workflow).toContain("DEPLOY_CONTAINER_CLI: podman");
+    expect(workflow).toContain("PODMAN_SYSTEMD_UNIT");
+    expect(workflow).toContain("scripts/deploy-dimensionlab-website.sh");
+  });
+
+  test("keeps production deployment behind a guarded script", () => {
+    const deployScript = readFileSync(
+      join(root, "scripts/deploy-dimensionlab-website.sh"),
+      "utf8",
+    );
+
+    expect(deployScript).toContain("refs/heads/main");
+    expect(deployScript).toContain("dimensionlab-website.service");
+    expect(deployScript).toContain("localhost/dimensionlab-website");
+    expect(deployScript).toContain("apps/web/Containerfile");
+    expect(deployScript).toContain("rollback-");
+    expect(deployScript).toContain("https://dimensionlab.net");
+    expect(deployScript).toContain("/api/dashboard/tiles");
+    expect(deployScript).toContain("--dry-run");
+    expect(deployScript).toContain("DEPLOY_RESTART_STRATEGY");
+  });
+
+  test("rolls back the latest image when production smoke checks fail", () => {
+    const result = runDeployScriptWithFakes(
+      {
+        curl: failingCurlCommand,
+        git: fakeGitCommand,
+        podman: fakePodmanCommand("dimensionlab-website.service"),
+      },
+      {
+        DEPLOY_CONTAINER_CLI: "podman",
+        DEPLOY_EVENT_NAME: "push",
+        DEPLOY_REF: "refs/heads/main",
+        DEPLOY_RESTART_STRATEGY: "quadlet-container",
+        DEPLOY_SHA: "1234567890abcdef",
+        DEPLOY_SMOKE_TIMEOUT_SECONDS: "0",
+      },
+    );
+
+    expect(result.status).toBe(1);
+    expect(result.stderr).toContain("smoke checks failed");
+    expect(result.stderr).toContain("rolling back to localhost/dimensionlab-website:rollback-");
+    expect(result.log).toMatch(
+      /tag localhost\/dimensionlab-website:latest localhost\/dimensionlab-website:rollback-\d{14}/,
+    );
+    expect(result.log).toMatch(
+      /tag localhost\/dimensionlab-website:rollback-\d{14} localhost\/dimensionlab-website:latest/,
+    );
+    expect(result.log.match(/^stop dimensionlab-website$/gm)).toHaveLength(2);
+  });
+
+  test("rolls back the latest image when the container fails to restart", () => {
+    const result = runDeployScriptWithFakes(
+      {
+        curl: passingCurlCommand,
+        git: fakeGitCommand,
+        podman: fakePodmanCommand("dimensionlab-website.service"),
+      },
+      {
+        DEPLOY_CONTAINER_CLI: "podman",
+        DEPLOY_CONTAINER_START_TIMEOUT_SECONDS: "1",
+        DEPLOY_TEST_CONTAINER_IMAGE: "wrong",
+        DEPLOY_EVENT_NAME: "push",
+        DEPLOY_REF: "refs/heads/main",
+        DEPLOY_RESTART_STRATEGY: "quadlet-container",
+        DEPLOY_SHA: "1234567890abcdef",
+      },
+    );
+
+    expect(result.status).toBe(1);
+    expect(result.stderr).toContain("did not restart on localhost/dimensionlab-website:latest");
+    expect(result.stderr).toContain("rolling back to localhost/dimensionlab-website:rollback-");
+    expect(result.stderr).toContain("rollback image is running");
+    expect(result.log).toMatch(
+      /tag localhost\/dimensionlab-website:rollback-\d{14} localhost\/dimensionlab-website:latest/,
+    );
+    expect(result.log.match(/^stop dimensionlab-website$/gm)).toHaveLength(2);
+  });
+
+  test.each([
+    {
+      env: { DEPLOY_EVENT_NAME: "pull_request", DEPLOY_REF: "refs/heads/main" },
+      message: "production deploys only run for push",
+    },
+    {
+      env: { DEPLOY_EVENT_NAME: "push", DEPLOY_REF: "refs/heads/codex/test" },
+      message: "expected refs/heads/main",
+    },
+  ])("refuses guarded deploy contexts before host mutations", ({ env, message }) => {
+    const result = runDeployScriptWithFakes(
+      {
+        curl: passingCurlCommand,
+        git: fakeGitCommand,
+        podman: fakePodmanCommand("dimensionlab-website.service"),
+      },
+      {
+        DEPLOY_CONTAINER_CLI: "podman",
+        DEPLOY_SHA: "1234567890abcdef",
+        ...env,
+      },
+    );
+
+    expect(result.status).toBe(1);
+    expect(result.stderr).toContain(message);
+    expect(result.log).toBe("");
+  });
+
+  test("refuses stop-based deploys unless the container belongs to the expected unit", () => {
+    const result = runDeployScriptWithFakes(
+      {
+        curl: passingCurlCommand,
+        git: fakeGitCommand,
+        podman: fakePodmanCommand("other.service"),
+      },
+      {
+        DEPLOY_CONTAINER_CLI: "podman",
+        DEPLOY_EVENT_NAME: "push",
+        DEPLOY_REF: "refs/heads/main",
+        DEPLOY_RESTART_STRATEGY: "quadlet-container",
+        DEPLOY_SHA: "1234567890abcdef",
+      },
+    );
+
+    expect(result.status).toBe(1);
+    expect(result.stderr).toContain(
+      "refusing to stop dimensionlab-website; expected PODMAN_SYSTEMD_UNIT=dimensionlab-website.service",
+    );
+    expect(result.log).not.toContain("build ");
+    expect(result.log).not.toContain("stop dimensionlab-website");
+  });
+
+  test("checks the expected unit before auto falls back to stopping the container", () => {
+    const result = runDeployScriptWithFakes(
+      {
+        curl: passingCurlCommand,
+        git: fakeGitCommand,
+        podman: fakePodmanCommand("other.service"),
+        systemctl: fakeSystemctlCommand({ active: false, show: true }),
+      },
+      {
+        DEPLOY_CONTAINER_CLI: "podman",
+        DEPLOY_EVENT_NAME: "push",
+        DEPLOY_REF: "refs/heads/main",
+        DEPLOY_RESTART_STRATEGY: "auto",
+        DEPLOY_SHA: "1234567890abcdef",
+      },
+    );
+
+    expect(result.status).toBe(1);
+    expect(result.stderr).toContain(
+      "refusing to stop dimensionlab-website; expected PODMAN_SYSTEMD_UNIT=dimensionlab-website.service",
+    );
+    expect(result.log).not.toContain("stop dimensionlab-website");
+  });
 });
+
+type WorkspacePackageExport =
+  | string
+  | {
+      types?: string;
+      development?: string;
+      default?: string;
+    };
+
+function expectPackageExport(
+  actual: WorkspacePackageExport | undefined,
+  expected: Exclude<WorkspacePackageExport, string>,
+): void {
+  expect(actual).toMatchObject(expected);
+}
+
+function runDeployScriptWithFakes(
+  commands: Record<string, string>,
+  env: Record<string, string>,
+): { log: string; status: number | null; stderr: string; stdout: string } {
+  const tempDir = mkdtempSync(join(tmpdir(), "dimensionlab-deploy-test-"));
+  const logPath = join(tempDir, "commands.log");
+
+  for (const [name, source] of Object.entries(commands)) {
+    const commandPath = join(tempDir, name);
+    writeFileSync(commandPath, source);
+    chmodSync(commandPath, 0o755);
+  }
+
+  const result = spawnSync("bash", [join(root, "scripts/deploy-dimensionlab-website.sh")], {
+    cwd: root,
+    encoding: "utf8",
+    env: {
+      ...process.env,
+      ...env,
+      DEPLOY_TEST_LOG: logPath,
+      PATH: `${tempDir}:${process.env.PATH ?? ""}`,
+    },
+  });
+
+  return {
+    log: existsSync(logPath) ? readFileSync(logPath, "utf8") : "",
+    status: result.status,
+    stderr: result.stderr,
+    stdout: result.stdout,
+  };
+}
+
+const fakeGitCommand = `#!/usr/bin/env bash
+case "$1" in
+  branch)
+    echo main
+    ;;
+  rev-parse)
+    echo 1234567890abcdef
+    ;;
+  config|submodule)
+    exit 0
+    ;;
+esac
+`;
+
+function fakePodmanCommand(systemdUnit: string): string {
+  return `#!/usr/bin/env bash
+state_file="$DEPLOY_TEST_LOG.state"
+[ -f "$state_file" ] || printf 'initial' > "$state_file"
+printf '%s\\n' "$*" >> "$DEPLOY_TEST_LOG"
+if [ "$1" = "image" ] && [ "$2" = "inspect" ]; then
+  if [ "$4" = "--format" ]; then
+    case "$3" in
+      *:rollback-*)
+        echo sha256:old
+        ;;
+      *)
+        if [ "$(cat "$state_file")" = "rollback" ]; then
+          echo sha256:old
+        else
+          echo sha256:new
+        fi
+        ;;
+    esac
+  fi
+  exit 0
+fi
+if [ "$1" = "tag" ] && [ "$2" != "localhost/dimensionlab-website:latest" ]; then
+  printf 'rollback' > "$state_file"
+fi
+if [ "$1" = "inspect" ]; then
+  case "$*" in
+    *PODMAN_SYSTEMD_UNIT*)
+      echo ${systemdUnit}
+      ;;
+    *State.Running*)
+      echo true
+      ;;
+    *'.Image'*|*'{{.Image}}'*)
+      if [ "$(cat "$state_file")" = "rollback" ]; then
+        echo sha256:old
+      elif [ "\${DEPLOY_TEST_CONTAINER_IMAGE:-new}" = "wrong" ]; then
+        echo sha256:wrong
+      else
+        echo sha256:new
+      fi
+      ;;
+  esac
+fi
+`;
+}
+
+const failingCurlCommand = `#!/usr/bin/env bash
+printf 'curl %s\\n' "$*" >> "$DEPLOY_TEST_LOG"
+exit 22
+`;
+
+const passingCurlCommand = `#!/usr/bin/env bash
+printf 'curl %s\\n' "$*" >> "$DEPLOY_TEST_LOG"
+if [ "$*" = *'/api/dashboard/tiles'* ]; then
+  printf '{"state":"ready","tiles":[]}'
+fi
+`;
+
+function fakeSystemctlCommand(options: { active: boolean; show: boolean }): string {
+  const activeStatus = options.active ? 0 : 3;
+  const showStatus = options.show ? 0 : 1;
+
+  return `#!/usr/bin/env bash
+printf 'systemctl %s\\n' "$*" >> "$DEPLOY_TEST_LOG"
+if [ "$1" = "--user" ] && [ "$2" = "is-active" ]; then
+  exit ${activeStatus}
+fi
+if [ "$1" = "--user" ] && [ "$2" = "show" ]; then
+  exit ${showStatus}
+fi
+if [ "$1" = "--user" ] && [ "$2" = "restart" ]; then
+  exit 0
+fi
+`;
+}

apps/web/src/server/dev.test.ts

@@ -2,6 +2,7 @@ import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { describe, expect, test } from "vitest";
 import { createDevServerConfig } from "../../vite.config";
+import { apiServerArgs } from "./dev";
 
 describe("local development runtime", () => {
   test("starts the Bun API server together with the Vite dev server", () => {
@@ -22,4 +23,11 @@ describe("local development runtime", () => {
       changeOrigin: true,
     });
   });
+
+  test("uses development package export conditions for the Bun API server", () => {
+    expect(apiServerArgs).toEqual([
+      "--conditions=development",
+      "src/server/index.ts",
+    ]);
+  });
 });

apps/web/src/server/dev.ts

@@ -3,6 +3,10 @@ const webPort = process.env.PORT || "5173";
 const apiHost = process.env.DASHBOARD_DEV_API_HOST || "127.0.0.1";
 const apiPort = process.env.DASHBOARD_DEV_API_PORT || "5174";
 const apiTarget = `http://${apiHost}:${apiPort}`;
+export const apiServerArgs = [
+  "--conditions=development",
+  "src/server/index.ts",
+] as const;
 
 if (import.meta.main) {
   runDevServers();
@@ -51,7 +55,7 @@ export function runDevServers(): void {
   process.on("SIGINT", () => shutdown(0));
   process.on("SIGTERM", () => shutdown(0));
 
-  spawn("api server", [process.execPath, "src/server/index.ts"], {
+  spawn("api server", [process.execPath, ...apiServerArgs], {
     HOST: apiHost,
     PORT: apiPort,
   });

apps/web/src/server/index.test.ts

@@ -0,0 +1,77 @@
+import { afterAll, describe, expect, test, vi } from "vitest";
+import { handleRequest } from "./index";
+
+describe("server request routing", () => {
+  const consoleInfo = vi.spyOn(console, "info").mockImplementation(() => undefined);
+
+  afterAll(() => {
+    consoleInfo.mockRestore();
+  });
+
+  test("routes dashboard tile batch requests", async () => {
+    const response = await handleRequest(
+      new Request("https://example.test/api/dashboard/tiles", {
+        method: "POST",
+        body: JSON.stringify({
+          tiles: [
+            {
+              kind: "status",
+              stripId: "footer-status",
+              id: "auto-refresh",
+            },
+          ],
+        }),
+      }),
+    );
+
+    expect(response.status).toBe(200);
+    await expect(response.json()).resolves.toMatchObject({
+      state: "ready",
+      tiles: [
+        {
+          state: "ready",
+          tile: {
+            kind: "status",
+            stripId: "footer-status",
+            id: "auto-refresh",
+          },
+        },
+      ],
+    });
+  });
+
+  test("rejects non-post dashboard tile batch requests", async () => {
+    const response = await handleRequest(
+      new Request("https://example.test/api/dashboard/tiles", {
+        method: "GET",
+      }),
+    );
+
+    expect(response.status).toBe(405);
+    expect(response.headers.get("allow")).toBe("POST");
+  });
+
+  test("routes dashboard event stream requests", async () => {
+    const response = await handleRequest(
+      new Request("https://example.test/api/dashboard/events", {
+        method: "GET",
+      }),
+    );
+
+    expect(response.status).toBe(200);
+    expect(response.headers.get("content-type")).toBe(
+      "text/event-stream; charset=utf-8",
+    );
+  });
+
+  test("rejects non-get dashboard event stream requests", async () => {
+    const response = await handleRequest(
+      new Request("https://example.test/api/dashboard/events", {
+        method: "POST",
+      }),
+    );
+
+    expect(response.status).toBe(405);
+    expect(response.headers.get("allow")).toBe("GET");
+  });
+});

apps/web/src/server/index.ts

@@ -1,6 +1,11 @@
 import { extname, normalize } from "node:path";
 import { handleAgentDashboardRoute } from "./routes/agent-dashboard";
-import { handleDashboardRoute } from "./routes/dashboard";
+import {
+  handleDashboardEventsRoute,
+  handleDashboardRoute,
+  handleDashboardTileRoute,
+  handleDashboardTilesRoute,
+} from "./routes/dashboard";
 
 const host = process.env.HOST || "0.0.0.0";
 const port = Number(process.env.PORT || 3000);
@@ -23,6 +28,21 @@ export async function handleRequest(request: Request): Promise<Response> {
     return handleDashboardRoute();
   }
 
+  if (url.pathname === "/api/dashboard/tiles") {
+    if (request.method !== "POST") return methodNotAllowed(["POST"]);
+    return handleDashboardTilesRoute(request);
+  }
+
+  if (url.pathname === "/api/dashboard/events") {
+    if (request.method !== "GET") return methodNotAllowed(["GET"]);
+    return handleDashboardEventsRoute({ signal: request.signal });
+  }
+
+  if (url.pathname.startsWith("/api/dashboard/tile/")) {
+    if (request.method !== "GET") return methodNotAllowed(["GET"]);
+    return handleDashboardTileRoute(url.pathname);
+  }
+
   if (url.pathname === "/api/agent/dashboard") {
     if (request.method !== "POST") return methodNotAllowed(["POST"]);
     return handleAgentDashboardRoute(request);

apps/web/src/server/routes/dashboard.test.ts

@@ -1,11 +1,34 @@
-import { describe, expect, test } from "vitest";
+import { afterAll, afterEach, describe, expect, test, vi } from "vitest";
 import { dimensionLabDashboardFixture } from "$lib/dashboard-seed/dimensionlab";
-import { loadDashboardResponse } from "./dashboard";
+import {
+  createDashboardTileCache,
+  dashboardTileCacheKey,
+  handleDashboardEventsRoute,
+  handleDashboardTilesRoute,
+  handleDashboardTileRoute,
+  loadDashboardResponse,
+  loadDashboardTilesResponse,
+  loadDashboardTileResponse,
+  type DashboardTileResolutionLogEvent,
+} from "./dashboard";
 
 describe("dashboard API route", () => {
-  test("returns ready dashboard runtime state from the existing model loader", async () => {
+  const consoleInfo = vi.spyOn(console, "info").mockImplementation(() => undefined);
+
+  afterEach(() => {
+    consoleInfo.mockClear();
+  });
+
+  afterAll(() => {
+    consoleInfo.mockRestore();
+  });
+
+  test("returns the ready dashboard shell without hydrating live datasources", async () => {
+    const fetch = vi.spyOn(globalThis, "fetch").mockRejectedValue(
+      new Error("live datasource fetch should not run for the shell response"),
+    );
+
     const response = await loadDashboardResponse({
-      disableLiveDatasources: true,
       refreshSeedDocument: true,
       seedIfEmpty: true,
     });
@@ -15,5 +38,762 @@ describe("dashboard API route", () => {
     expect(response.document.metadata.title).toBe(
       dimensionLabDashboardFixture.metadata.title,
     );
+    expect(fetch).not.toHaveBeenCalled();
+
+    fetch.mockRestore();
+  });
+
+  test("reports when client-side live hydration is disabled", async () => {
+    const previous = process.env.DISABLE_LIVE_DATASOURCES;
+    process.env.DISABLE_LIVE_DATASOURCES = "1";
+
+    try {
+      const response = await loadDashboardResponse({
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+      });
+
+      expect(response.state).toBe("ready");
+      if (response.state !== "ready") throw new Error("expected ready dashboard");
+      expect(response.liveDatasourceHydration).toEqual({ enabled: false });
+    } finally {
+      if (previous === undefined) {
+        delete process.env.DISABLE_LIVE_DATASOURCES;
+      } else {
+        process.env.DISABLE_LIVE_DATASOURCES = previous;
+      }
+    }
+  });
+
+  test("hydrates a telemetry tile independently from the dashboard shell", async () => {
+    const fetch = vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+
+      if (url.startsWith("https://prometheus.example/api/v1/query_range")) {
+        return jsonResponse({
+          status: "success",
+          data: {
+            result: [
+              {
+                metric: { host: "linux-infra" },
+                values: [
+                  [1771430000, "10"],
+                  [1771430060, "20"],
+                  [1771430120, "42"],
+                ],
+              },
+            ],
+          },
+        });
+      }
+
+      if (url.startsWith("https://prometheus.example/api/v1/query")) {
+        return jsonResponse({
+          status: "success",
+          data: {
+            result: [
+              {
+                metric: { host: "linux-infra" },
+                value: [1771430400, "42"],
+              },
+            ],
+          },
+        });
+      }
+
+      throw new Error(`Unhandled test request: ${url}`);
+    });
+
+    const response = await loadDashboardTileResponse(
+      { kind: "telemetry", id: "infra-ram" },
+      {
+        fetch,
+        prometheusBaseUrl: "https://prometheus.example",
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+      },
+    );
+
+    expect(response.state).toBe("ready");
+    if (response.state !== "ready") throw new Error("expected ready tile");
+    expect(response.tile).toEqual({ kind: "telemetry", id: "infra-ram" });
+    expect(response.item).toMatchObject({
+      id: "infra-ram",
+      value: { kind: "percent", value: 42 },
+      severity: "ok",
+      detail: "linux-infra",
+      sparkline: [10, 20, 42],
+    });
+    expect(fetch).toHaveBeenCalledWith(
+      expect.stringContaining("/api/v1/query?"),
+      expect.objectContaining({ cache: "no-store" }),
+    );
+    expect(fetch).toHaveBeenCalledWith(
+      expect.stringContaining("/api/v1/query_range?"),
+      expect.objectContaining({ cache: "no-store" }),
+    );
+  });
+
+  test("hydrates a service tile with its service group identity", async () => {
+    const fetch = vi.fn(async () =>
+      jsonResponse({
+        status: "UP",
+        ping: 42,
+      }),
+    );
+
+    const response = await loadDashboardTileResponse(
+      { kind: "service", groupId: "essentials", id: "vaultwarden" },
+      {
+        fetch,
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+      },
+    );
+
+    expect(response.state).toBe("ready");
+    if (response.state !== "ready") throw new Error("expected ready tile");
+    expect(response.tile).toEqual({
+      kind: "service",
+      groupId: "essentials",
+      id: "vaultwarden",
+    });
+    expect(response.item).toMatchObject({
+      id: "vaultwarden",
+      severity: "ok",
+      detail: "42 ms",
+    });
+  });
+
+  test("caches ready tile responses until the tile ttl expires", async () => {
+    const cache = createDashboardTileCache();
+    let now = 1_000;
+    const fetch = vi.fn(async () => {
+      now += 7;
+      return jsonResponse({
+        status: "UP",
+        ping: 42,
+      });
+    });
+    const tile = { kind: "service", groupId: "essentials", id: "vaultwarden" } as const;
+
+    const first = await loadDashboardTileResponse(tile, {
+      fetch,
+      now: () => now,
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache: cache,
+    });
+    const second = await loadDashboardTileResponse(tile, {
+      fetch,
+      now: () => now + 29_999,
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache: cache,
+    });
+    now += 30_001;
+    const third = await loadDashboardTileResponse(tile, {
+      fetch,
+      now: () => now,
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache: cache,
+    });
+
+    expect(first).toEqual(second);
+    expect(third.state).toBe("ready");
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+
+  test("logs tile duration and cache hit or miss metadata", async () => {
+    let now = 1_000;
+    const logs: DashboardTileResolutionLogEvent[] = [];
+    const tile = { kind: "service", groupId: "essentials", id: "vaultwarden" } as const;
+    const service = dimensionLabDashboardFixture.serviceGroups
+      .flatMap((group) => group.services)
+      .find((item) => item.id === tile.id);
+    if (!service) throw new Error("missing service fixture");
+
+    let cacheCalls = 0;
+    const tileCache = {
+      async resolve() {
+        cacheCalls += 1;
+        if (cacheCalls === 1) now += 7;
+        const cacheState = cacheCalls === 1 ? "miss" as const : "hit" as const;
+
+        return {
+          cache: cacheState,
+          coalesced: false,
+          response: {
+            state: "ready" as const,
+            tile,
+            item: service,
+          },
+        };
+      },
+    };
+
+    await loadDashboardTileResponse(tile, {
+      logTileResolution: (event) => logs.push(event),
+      now: () => now,
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache,
+    });
+    now += 10;
+    await loadDashboardTileResponse(tile, {
+      logTileResolution: (event) => logs.push(event),
+      now: () => now,
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache,
+    });
+
+    expect(logs).toEqual([
+      expect.objectContaining({
+        cache: "miss",
+        coalesced: false,
+        durationMs: 7,
+        status: "ready",
+        tileKey: dashboardTileCacheKey(tile),
+      }),
+      expect.objectContaining({
+        cache: "hit",
+        coalesced: false,
+        durationMs: 0,
+        status: "ready",
+        tileKey: dashboardTileCacheKey(tile),
+      }),
+    ]);
+  });
+
+  test("keeps telemetry tiles cached for fifteen seconds", async () => {
+    const cache = createDashboardTileCache();
+    let now = 1_000;
+    const fetch = telemetryFetch();
+    const tile = { kind: "telemetry", id: "infra-ram" } as const;
+
+    await loadDashboardTileResponse(tile, {
+      fetch,
+      now: () => now,
+      prometheusBaseUrl: "https://prometheus.example",
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache: cache,
+    });
+    await loadDashboardTileResponse(tile, {
+      fetch,
+      now: () => now + 14_999,
+      prometheusBaseUrl: "https://prometheus.example",
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache: cache,
+    });
+    now += 15_001;
+    await loadDashboardTileResponse(tile, {
+      fetch,
+      now: () => now,
+      prometheusBaseUrl: "https://prometheus.example",
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache: cache,
+    });
+
+    expect(fetch).toHaveBeenCalledTimes(4);
+  });
+
+  test("keeps weather module tiles cached for ten minutes", async () => {
+    const cache = createDashboardTileCache();
+    let now = 1_000;
+    const fetch = vi.fn(async () =>
+      jsonResponse({
+        current: {
+          apparent_temperature: 19,
+          temperature_2m: 20,
+          weather_code: 0,
+          wind_speed_10m: 11,
+        },
+      }),
+    );
+    const tile = { kind: "module", id: "weather-amsterdam" } as const;
+
+    await loadDashboardTileResponse(tile, {
+      fetch,
+      now: () => now,
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache: cache,
+    });
+    await loadDashboardTileResponse(tile, {
+      fetch,
+      now: () => now + 599_999,
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache: cache,
+    });
+    now += 600_001;
+    await loadDashboardTileResponse(tile, {
+      fetch,
+      now: () => now,
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache: cache,
+    });
+
+    expect(fetch).toHaveBeenCalledTimes(2);
+  });
+
+  test("coalesces concurrent tile requests for the same cache key", async () => {
+    const cache = createDashboardTileCache();
+    const logs: DashboardTileResolutionLogEvent[] = [];
+    let resolveFetch: ((response: Response) => void) | undefined;
+    const fetch = vi.fn(() =>
+      new Promise<Response>((resolve) => {
+        resolveFetch = resolve;
+      })
+    );
+    const tile = { kind: "service", groupId: "essentials", id: "vaultwarden" } as const;
+
+    const first = loadDashboardTileResponse(tile, {
+      fetch,
+      logTileResolution: (event) => logs.push(event),
+      now: () => 1_000,
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache: cache,
+    });
+    const second = loadDashboardTileResponse(tile, {
+      fetch,
+      logTileResolution: (event) => logs.push(event),
+      now: () => 1_000,
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache: cache,
+    });
+
+    await Promise.resolve();
+    expect(fetch).toHaveBeenCalledTimes(1);
+
+    resolveFetch?.(jsonResponse({ status: "UP", ping: 42 }));
+    expect(await first).toEqual(await second);
+    expect(logs).toEqual([
+      expect.objectContaining({
+        cache: "miss",
+        coalesced: false,
+        status: "ready",
+        tileKey: dashboardTileCacheKey(tile),
+      }),
+      expect.objectContaining({
+        cache: "miss",
+        coalesced: true,
+        status: "ready",
+        tileKey: dashboardTileCacheKey(tile),
+      }),
+    ]);
+  });
+
+  test("logs coalesced metadata when shared tile requests fail", async () => {
+    const cache = createDashboardTileCache();
+    let rejectLoad: ((error: Error) => void) | undefined;
+    const load = vi.fn(() =>
+      new Promise<never>((_resolve, reject) => {
+        rejectLoad = reject;
+      })
+    );
+
+    const first = cache.resolve("tile-a", 30_000, 1_000, load);
+    const second = cache.resolve("tile-a", 30_000, 1_000, load);
+
+    await Promise.resolve();
+    expect(load).toHaveBeenCalledTimes(1);
+
+    rejectLoad?.(new TypeError("upstream failed"));
+    await expect(first).rejects.toThrow("upstream failed");
+    await expect(second).rejects.toMatchObject({
+      cache: "miss",
+      coalesced: true,
+      cause: expect.any(TypeError),
+    });
+  });
+
+  test("logs coalesced metadata for failed tile cache resolution", async () => {
+    const logs: DashboardTileResolutionLogEvent[] = [];
+    const tile = { kind: "service", groupId: "essentials", id: "vaultwarden" } as const;
+
+    await expect(
+      loadDashboardTileResponse(tile, {
+        logTileResolution: (event) => logs.push(event),
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+        tileCache: {
+          async resolve() {
+            throw {
+              cache: "miss",
+              cause: new TypeError("coalesced cache failed"),
+              coalesced: true,
+            };
+          },
+        },
+      }),
+    ).rejects.toThrow("coalesced cache failed");
+
+    expect(logs).toEqual([
+      expect.objectContaining({
+        cache: "miss",
+        coalesced: true,
+        errorCategory: "TypeError",
+        status: "error",
+        tileKey: dashboardTileCacheKey(tile),
+      }),
+    ]);
+  });
+
+  test("logs error categories for failed tile cache resolution", async () => {
+    const logs: DashboardTileResolutionLogEvent[] = [];
+    const tile = { kind: "service", groupId: "essentials", id: "vaultwarden" } as const;
+
+    await expect(
+      loadDashboardTileResponse(tile, {
+        logTileResolution: (event) => logs.push(event),
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+        tileCache: {
+          async resolve() {
+            throw new TypeError("cache failed");
+          },
+        },
+      }),
+    ).rejects.toThrow("cache failed");
+
+    expect(logs).toEqual([
+      expect.objectContaining({
+        cache: "miss",
+        coalesced: false,
+        errorCategory: "TypeError",
+        status: "error",
+        tileKey: dashboardTileCacheKey(tile),
+      }),
+    ]);
+  });
+
+  test("uses structured tile cache keys when identifiers contain delimiters", () => {
+    expect(
+      dashboardTileCacheKey({ kind: "service", groupId: "a:b", id: "c" }),
+    ).not.toBe(
+      dashboardTileCacheKey({ kind: "service", groupId: "a", id: "b:c" }),
+    );
+    expect(
+      dashboardTileCacheKey({ kind: "status", stripId: "a:b", id: "c" }),
+    ).not.toBe(
+      dashboardTileCacheKey({ kind: "status", stripId: "a", id: "b:c" }),
+    );
+  });
+
+  test("uses thirty-second status aggregate and five-minute static status ttl buckets", async () => {
+    const cache = createDashboardTileCache();
+    const fetch = vi.fn(async () => jsonResponse({ status: "UP", ping: 42 }));
+    const serviceCheckCount = dimensionLabDashboardFixture.serviceGroups
+      .flatMap((group) => group.services).length;
+
+    await loadDashboardTileResponse(
+      { kind: "status", stripId: "footer-status", id: "system-status" },
+      {
+        fetch,
+        now: () => 1_000,
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+        tileCache: cache,
+      },
+    );
+    await loadDashboardTileResponse(
+      { kind: "status", stripId: "footer-status", id: "system-status" },
+      {
+        fetch,
+        now: () => 31_001,
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+        tileCache: cache,
+      },
+    );
+
+    await loadDashboardTileResponse(
+      { kind: "status", stripId: "footer-status", id: "auto-refresh" },
+      {
+        fetch,
+        now: () => 1_000,
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+        tileCache: cache,
+      },
+    );
+    await loadDashboardTileResponse(
+      { kind: "status", stripId: "footer-status", id: "auto-refresh" },
+      {
+        fetch,
+        now: () => 300_999,
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+        tileCache: cache,
+      },
+    );
+    await loadDashboardTileResponse(
+      { kind: "status", stripId: "footer-status", id: "auto-refresh" },
+      {
+        fetch,
+        now: () => 301_001,
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+        tileCache: cache,
+      },
+    );
+
+    expect(fetch).toHaveBeenCalledTimes(serviceCheckCount * 2);
+  });
+
+  test("serves tile route responses with short private cache headers", async () => {
+    const response = await handleDashboardTileRoute(
+      "/api/dashboard/tile/service/essentials/vaultwarden",
+      {
+        fetch: vi.fn(async () => jsonResponse({ status: "UP", ping: 42 })),
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+        tileCache: createDashboardTileCache(),
+      },
+    );
+
+    expect(response.headers.get("cache-control")).toBe(
+      "private, max-age=5, stale-while-revalidate=30",
+    );
+  });
+
+  test("serves batch tile route responses", async () => {
+    const response = await handleDashboardTilesRoute(
+      new Request("https://example.test/api/dashboard/tiles", {
+        method: "POST",
+        body: JSON.stringify({
+          tiles: [
+            {
+              kind: "status",
+              stripId: "footer-status",
+              id: "auto-refresh",
+            },
+          ],
+        }),
+      }),
+      {
+        refreshSeedDocument: true,
+        seedIfEmpty: true,
+        tileCache: createDashboardTileCache(),
+      },
+    );
+
+    expect(response.status).toBe(200);
+    expect(response.headers.get("cache-control")).toBe(
+      "private, max-age=5, stale-while-revalidate=30",
+    );
+    await expect(response.json()).resolves.toMatchObject({
+      state: "ready",
+      tiles: [
+        {
+          state: "ready",
+          tile: {
+            kind: "status",
+            stripId: "footer-status",
+            id: "auto-refresh",
+          },
+        },
+      ],
+    });
+  });
+
+  test("streams ready dashboard tile events", async () => {
+    const controller = new AbortController();
+    const response = await handleDashboardEventsRoute({
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      signal: controller.signal,
+      tileCache: {
+        async resolve(key) {
+          controller.abort();
+          const tile = JSON.parse(key);
+
+          return {
+            cache: "miss",
+            coalesced: false,
+            response: {
+              state: "ready",
+              tile,
+              item: {
+                id: tile.id,
+                label: "Status",
+                severity: "ok",
+                value: "ok",
+              },
+            },
+          };
+        },
+      },
+    });
+
+    expect(response.headers.get("content-type")).toBe(
+      "text/event-stream; charset=utf-8",
+    );
+    expect(response.headers.get("cache-control")).toBe("no-cache");
+    const body = await response.text();
+    expect(body).toContain("event: dashboard-tile");
+    expect(body).toContain('"state":"ready"');
+    expect(body).toContain('"tile"');
+  });
+
+  test("rejects invalid batch tile requests", async () => {
+    const response = await handleDashboardTilesRoute(
+      new Request("https://example.test/api/dashboard/tiles", {
+        method: "POST",
+        body: JSON.stringify({
+          tiles: [{ kind: "service", id: "missing-group" }],
+        }),
+      }),
+    );
+
+    expect(response.status).toBe(400);
+  });
+
+  test("resolves batch tile responses with server concurrency capped at six", async () => {
+    let active = 0;
+    let maxActive = 0;
+    const started: string[] = [];
+    const releases = new Map<string, () => void>();
+    const service = dimensionLabDashboardFixture.serviceGroups
+      .flatMap((group) => group.services)[0];
+    if (!service) throw new Error("missing service fixture");
+    const tiles = Array.from({ length: 7 }, (_, index) => ({
+      kind: "service" as const,
+      groupId: "essentials",
+      id: `service-${index}`,
+    }));
+
+    const batch = loadDashboardTilesResponse(tiles, {
+      refreshSeedDocument: true,
+      seedIfEmpty: true,
+      tileCache: {
+        async resolve(key) {
+          active += 1;
+          maxActive = Math.max(maxActive, active);
+          started.push(key);
+          await new Promise<void>((resolve) => releases.set(key, resolve));
+          active -= 1;
+
+          return {
+            cache: "miss",
+            coalesced: false,
+            response: {
+              state: "ready",
+              tile: JSON.parse(key),
+              item: service,
+            },
+          };
+        },
+      },
+    });
+
+    await waitFor(() => started.length === 6);
+    expect(maxActive).toBe(6);
+    releases.get(started[0])?.();
+    await waitFor(() => started.length === 7);
+    for (const release of releases.values()) release();
+
+    await expect(batch).resolves.toMatchObject({
+      state: "ready",
+      tiles: expect.arrayContaining([
+        expect.objectContaining({
+          state: "ready",
+          tile: tiles[0],
+        }),
+      ]),
+    });
+    expect(maxActive).toBe(6);
+  });
+
+  test("does not hydrate tile routes when live datasources are disabled", async () => {
+    const previous = process.env.DISABLE_LIVE_DATASOURCES;
+    process.env.DISABLE_LIVE_DATASOURCES = "1";
+    const fetch = vi.spyOn(globalThis, "fetch").mockRejectedValue(
+      new Error("live datasource fetch should not run when disabled"),
+    );
+
+    try {
+      const response = await loadDashboardTileResponse(
+        { kind: "telemetry", id: "infra-ram" },
+        {
+          refreshSeedDocument: true,
+          seedIfEmpty: true,
+        },
+      );
+
+      expect(response.state).toBe("disabled");
+      expect(fetch).not.toHaveBeenCalled();
+    } finally {
+      fetch.mockRestore();
+      if (previous === undefined) {
+        delete process.env.DISABLE_LIVE_DATASOURCES;
+      } else {
+        process.env.DISABLE_LIVE_DATASOURCES = previous;
+      }
+    }
   });
 });
+
+function jsonResponse(payload: unknown): Response {
+  return new Response(JSON.stringify(payload), {
+    headers: { "content-type": "application/json" },
+  });
+}
+
+async function waitFor(predicate: () => boolean) {
+  for (let attempt = 0; attempt < 20; attempt += 1) {
+    if (predicate()) return;
+    await Promise.resolve();
+  }
+
+  throw new Error("condition was not met");
+}
+
+function telemetryFetch() {
+  return vi.fn(async (input: RequestInfo | URL) => {
+    const url = String(input);
+
+    if (url.startsWith("https://prometheus.example/api/v1/query_range")) {
+      return jsonResponse({
+        status: "success",
+        data: {
+          result: [
+            {
+              metric: { host: "linux-infra" },
+              values: [
+                [1771430000, "10"],
+                [1771430060, "20"],
+                [1771430120, "42"],
+              ],
+            },
+          ],
+        },
+      });
+    }
+
+    if (url.startsWith("https://prometheus.example/api/v1/query")) {
+      return jsonResponse({
+        status: "success",
+        data: {
+          result: [
+            {
+              metric: { host: "linux-infra" },
+              value: [1771430400, "42"],
+            },
+          ],
+        },
+      });
+    }
+
+    throw new Error(`Unhandled test request: ${url}`);
+  });
+}

apps/web/src/server/routes/dashboard.ts

@@ -1,21 +1,138 @@
+import type { DashboardDocument } from "@dimensionlab/dashboard-model";
 import {
   loadDashboardRuntime,
   type DashboardRuntimeOptions,
   type DashboardRuntimeState,
 } from "$lib/server/dashboard";
-import { resolveDashboardDatasources } from "$lib/server/datasources";
+import {
+  resolveDashboardDatasources,
+  resolveDashboardTile,
+  type DashboardTileReference,
+  type DashboardTileResolution,
+  type DatasourceResolutionOptions,
+} from "$lib/server/datasources";
 
 export interface LoadDashboardResponseOptions
   extends Pick<
     DashboardRuntimeOptions,
     "refreshSeedDocument" | "seedIfEmpty" | "seedDocument"
-  > {
+  >,
+    DatasourceResolutionOptions {
   disableLiveDatasources?: boolean;
+  hydrateLiveDatasources?: boolean;
+  logTileResolution?: (event: DashboardTileResolutionLogEvent) => void;
+  now?: () => number;
+  tileCache?: DashboardTileCache;
+}
+
+export interface DashboardEventsRouteOptions extends LoadDashboardResponseOptions {
+  signal?: AbortSignal;
+}
+
+interface DashboardTileCacheEntry {
+  expiresAt: number;
+  response: DashboardTileResolution;
+}
+
+export interface DashboardTileCache {
+  resolve(
+    key: string,
+    ttlMs: number,
+    now: number,
+    load: () => Promise<DashboardTileResolution>,
+  ): Promise<DashboardTileCacheResult>;
+}
+
+const dashboardTileResponseHeaders = {
+  "Cache-Control": "private, max-age=5, stale-while-revalidate=30",
+};
+
+const dashboardBatchTileConcurrency = 6;
+
+const defaultDashboardTileCache = createDashboardTileCache();
+
+interface DashboardTileCacheResult {
+  cache: "hit" | "miss";
+  coalesced: boolean;
+  response: DashboardTileResolution;
+}
+
+export interface DashboardTileResolutionLogEvent {
+  cache: "bypass" | "hit" | "miss";
+  coalesced: boolean;
+  durationMs: number;
+  errorCategory?: string;
+  status: DashboardTileResolution["state"] | "error";
+  tileKey: string;
+}
+
+export interface DashboardTilesBatchResponse {
+  state: "ready";
+  tiles: DashboardTileResolution[];
+}
+
+export function createDashboardTileCache(): DashboardTileCache {
+  const entries = new Map<string, DashboardTileCacheEntry>();
+  const inFlight = new Map<string, Promise<DashboardTileResolution>>();
+
+  return {
+    async resolve(key, ttlMs, now, load) {
+      const cached = entries.get(key);
+      if (cached && cached.expiresAt > now) {
+        return {
+          cache: "hit",
+          coalesced: false,
+          response: cached.response,
+        };
+      }
+
+      const active = inFlight.get(key);
+      if (active) {
+        return active
+          .then((response) => ({
+            cache: "miss" as const,
+            coalesced: true,
+            response,
+          }))
+          .catch((error) => {
+            throw new DashboardTileCacheResolutionError(error, {
+              cache: "miss",
+              coalesced: true,
+            });
+          });
+      }
+
+      const request = load()
+        .then((response) => {
+          if (response.state === "ready") {
+            entries.set(key, {
+              expiresAt: now + ttlMs,
+              response,
+            });
+          }
+
+          return response;
+        })
+        .finally(() => {
+          inFlight.delete(key);
+        });
+
+      inFlight.set(key, request);
+      return request.then((response) => ({
+        cache: "miss" as const,
+        coalesced: false,
+        response,
+      }));
+    },
+  };
 }
 
 export async function loadDashboardResponse(
   options: LoadDashboardResponseOptions = {},
 ): Promise<DashboardRuntimeState> {
+  const liveHydrationEnabled =
+    !options.disableLiveDatasources &&
+    process.env.DISABLE_LIVE_DATASOURCES !== "1";
   const dashboard = loadDashboardRuntime(undefined, {
     refreshSeedDocument: options.refreshSeedDocument ?? true,
     seedIfEmpty: options.seedIfEmpty ?? true,
@@ -26,16 +143,467 @@ export async function loadDashboardResponse(
     return dashboard;
   }
 
-  if (options.disableLiveDatasources || process.env.DISABLE_LIVE_DATASOURCES === "1") {
-    return dashboard;
+  if (
+    !options.hydrateLiveDatasources ||
+    options.disableLiveDatasources ||
+    process.env.DISABLE_LIVE_DATASOURCES === "1"
+  ) {
+    return {
+      ...dashboard,
+      liveDatasourceHydration: {
+        enabled: liveHydrationEnabled,
+      },
+    };
   }
 
   return {
     ...dashboard,
-    document: await resolveDashboardDatasources(dashboard.document),
+    document: await resolveDashboardDatasources(dashboard.document, options),
+    liveDatasourceHydration: {
+      enabled: false,
+    },
+  };
+}
+
+export async function loadDashboardTileResponse(
+  tile: DashboardTileReference,
+  options: LoadDashboardResponseOptions = {},
+): Promise<DashboardTileResolution> {
+  if (
+    options.disableLiveDatasources ||
+    process.env.DISABLE_LIVE_DATASOURCES === "1"
+  ) {
+    const tileKey = dashboardTileCacheKey(tile);
+    const startedAt = options.now?.() ?? Date.now();
+    const response = {
+      state: "disabled",
+      tile,
+      message: "Live datasource hydration is disabled.",
+    } satisfies DashboardTileResolution;
+    logDashboardTileResolution(options, {
+      cache: "bypass",
+      coalesced: false,
+      durationMs: elapsedDashboardTileMs(startedAt, options),
+      status: response.state,
+      tileKey,
+    });
+    return response;
+  }
+
+  const tileKey = dashboardTileCacheKey(tile);
+  const startedAt = options.now?.() ?? Date.now();
+
+  const dashboard = loadDashboardRuntime(undefined, {
+    refreshSeedDocument: options.refreshSeedDocument ?? true,
+    seedIfEmpty: options.seedIfEmpty ?? true,
+    seedDocument: options.seedDocument,
+  });
+
+  if (dashboard.state !== "ready") {
+    const response = {
+      state: "not_found",
+      tile,
+      message: `Dashboard is not ready: ${dashboard.state}`,
+    } satisfies DashboardTileResolution;
+    logDashboardTileResolution(options, {
+      cache: "bypass",
+      coalesced: false,
+      durationMs: elapsedDashboardTileMs(startedAt, options),
+      status: response.state,
+      tileKey,
+    });
+    return response;
+  }
+
+  const cache = options.tileCache || defaultDashboardTileCache;
+  const now = options.now?.() ?? Date.now();
+
+  try {
+    const result = await cache.resolve(
+      tileKey,
+      dashboardTileTtlMs(dashboard.document, tile),
+      now,
+      () => resolveDashboardTile(dashboard.document, tile, options),
+    );
+    logDashboardTileResolution(options, {
+      cache: result.cache,
+      coalesced: result.coalesced,
+      durationMs: elapsedDashboardTileMs(startedAt, options),
+      status: result.response.state,
+      tileKey,
+    });
+    return result.response;
+  } catch (error) {
+    const cacheError = dashboardTileCacheResolutionError(error);
+    logDashboardTileResolution(options, {
+      cache: cacheError?.cache ?? "miss",
+      coalesced: cacheError?.coalesced ?? false,
+      durationMs: elapsedDashboardTileMs(startedAt, options),
+      errorCategory: dashboardTileErrorCategory(cacheError?.cause ?? error),
+      status: "error",
+      tileKey,
+    });
+    throw cacheError?.cause ?? error;
+  }
+}
+
+export async function loadDashboardTilesResponse(
+  tiles: DashboardTileReference[],
+  options: LoadDashboardResponseOptions = {},
+): Promise<DashboardTilesBatchResponse> {
+  return {
+    state: "ready",
+    tiles: await resolveDashboardTilesBatch(tiles, options),
   };
 }
 
 export async function handleDashboardRoute(): Promise<Response> {
   return Response.json(await loadDashboardResponse());
 }
+
+export async function handleDashboardTileRoute(
+  pathname: string,
+  options: LoadDashboardResponseOptions = {},
+): Promise<Response> {
+  const tile = parseDashboardTilePath(pathname);
+  if (!tile) {
+    return Response.json(
+      { ok: false, message: "Invalid dashboard tile route" },
+      { status: 404 },
+    );
+  }
+
+  const response = await loadDashboardTileResponse(tile, options);
+  return Response.json(response, {
+    status: response.state === "not_found" ? 404 : 200,
+    headers: dashboardTileResponseHeaders,
+  });
+}
+
+export async function handleDashboardTilesRoute(
+  request: Request,
+  options: LoadDashboardResponseOptions = {},
+): Promise<Response> {
+  const tiles = await parseDashboardTilesBatchRequest(request);
+  if (!tiles) {
+    return Response.json(
+      { ok: false, message: "Invalid dashboard tiles request" },
+      { status: 400 },
+    );
+  }
+
+  return Response.json(await loadDashboardTilesResponse(tiles, options), {
+    headers: dashboardTileResponseHeaders,
+  });
+}
+
+export async function handleDashboardEventsRoute(
+  options: DashboardEventsRouteOptions = {},
+): Promise<Response> {
+  const stream = new ReadableStream<Uint8Array>({
+    async start(controller) {
+      const encoder = new TextEncoder();
+      const dashboard = await loadDashboardResponse({
+        ...options,
+        hydrateLiveDatasources: false,
+      });
+
+      if (dashboard.state !== "ready" || options.signal?.aborted) {
+        controller.close();
+        return;
+      }
+
+      try {
+        for (const tile of dashboardEventTiles(dashboard.document)) {
+          if (options.signal?.aborted) break;
+          const resolution = await loadDashboardTileResponse(tile, options);
+          if (resolution.state === "ready") {
+            controller.enqueue(
+              encoder.encode(dashboardTileEventChunk(resolution)),
+            );
+          }
+        }
+      } finally {
+        controller.close();
+      }
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "Cache-Control": "no-cache",
+      "Connection": "keep-alive",
+      "Content-Type": "text/event-stream; charset=utf-8",
+      "X-Accel-Buffering": "no",
+    },
+  });
+}
+
+export function dashboardTileCacheKey(tile: DashboardTileReference): string {
+  return JSON.stringify(tile);
+}
+
+function logDashboardTileResolution(
+  options: LoadDashboardResponseOptions,
+  event: DashboardTileResolutionLogEvent,
+): void {
+  if (options.logTileResolution) {
+    options.logTileResolution(event);
+    return;
+  }
+
+  console.info("dashboard.tile", event);
+}
+
+function elapsedDashboardTileMs(
+  startedAt: number,
+  options: LoadDashboardResponseOptions,
+): number {
+  const now = options.now?.() ?? Date.now();
+  return Math.max(0, now - startedAt);
+}
+
+function dashboardTileErrorCategory(error: unknown): string {
+  if (
+    typeof error === "object" &&
+    error !== null &&
+    "name" in error &&
+    typeof error.name === "string"
+  ) {
+    return error.name;
+  }
+
+  return "unknown";
+}
+
+async function resolveDashboardTilesBatch(
+  tiles: DashboardTileReference[],
+  options: LoadDashboardResponseOptions,
+): Promise<DashboardTileResolution[]> {
+  const results: DashboardTileResolution[] = new Array(tiles.length);
+  let nextIndex = 0;
+
+  async function worker() {
+    while (nextIndex < tiles.length) {
+      const index = nextIndex;
+      nextIndex += 1;
+      results[index] = await loadDashboardTileResponse(tiles[index], options);
+    }
+  }
+
+  await Promise.all(
+    Array.from(
+      { length: Math.min(dashboardBatchTileConcurrency, tiles.length) },
+      () => worker(),
+    ),
+  );
+
+  return results;
+}
+
+async function parseDashboardTilesBatchRequest(
+  request: Request,
+): Promise<DashboardTileReference[] | null> {
+  try {
+    const body = await request.json() as unknown;
+    if (
+      typeof body !== "object" ||
+      body === null ||
+      !("tiles" in body) ||
+      !Array.isArray(body.tiles)
+    ) {
+      return null;
+    }
+
+    const tiles = body.tiles.map(parseDashboardTileReference);
+    return tiles.every((tile): tile is DashboardTileReference => tile !== null)
+      ? tiles
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+function parseDashboardTileReference(value: unknown): DashboardTileReference | null {
+  if (typeof value !== "object" || value === null || !("kind" in value)) {
+    return null;
+  }
+
+  if (
+    (value.kind === "telemetry" || value.kind === "module") &&
+    "id" in value &&
+    typeof value.id === "string"
+  ) {
+    return { kind: value.kind, id: value.id };
+  }
+
+  if (
+    value.kind === "service" &&
+    "groupId" in value &&
+    typeof value.groupId === "string" &&
+    "id" in value &&
+    typeof value.id === "string"
+  ) {
+    return {
+      kind: "service",
+      groupId: value.groupId,
+      id: value.id,
+    };
+  }
+
+  if (
+    value.kind === "status" &&
+    "stripId" in value &&
+    typeof value.stripId === "string" &&
+    "id" in value &&
+    typeof value.id === "string"
+  ) {
+    return {
+      kind: "status",
+      stripId: value.stripId,
+      id: value.id,
+    };
+  }
+
+  return null;
+}
+
+function dashboardEventTiles(document: DashboardDocument): DashboardTileReference[] {
+  const status = document.statusStrips.flatMap((strip) =>
+    strip.items.map((item): DashboardTileReference => ({
+      kind: "status",
+      stripId: strip.id,
+      id: item.id,
+    })),
+  );
+  const telemetry = document.telemetry
+    .filter((card) => card.datasource?.type === "external")
+    .map((card): DashboardTileReference => ({ kind: "telemetry", id: card.id }));
+  const modules = (document.modules || [])
+    .filter((module) =>
+      module.datasource?.type === "external" ||
+      module.id === "runtime-health-summary"
+    )
+    .map((module): DashboardTileReference => ({ kind: "module", id: module.id }));
+  const services = document.serviceGroups.flatMap((group) =>
+    group.services
+      .filter((service) => service.datasource?.type === "external")
+      .map((service): DashboardTileReference => ({
+        kind: "service",
+        groupId: group.id,
+        id: service.id,
+      })),
+  );
+
+  return [...status, ...telemetry, ...modules, ...services];
+}
+
+function dashboardTileEventChunk(resolution: DashboardTileResolution): string {
+  return [
+    "event: dashboard-tile",
+    `data: ${JSON.stringify(resolution)}`,
+    "",
+    "",
+  ].join("\n");
+}
+
+class DashboardTileCacheResolutionError extends Error {
+  readonly cache: "hit" | "miss";
+  readonly coalesced: boolean;
+  override readonly cause: unknown;
+
+  constructor(
+    cause: unknown,
+    metadata: Pick<DashboardTileCacheResult, "cache" | "coalesced">,
+  ) {
+    super("Dashboard tile cache resolution failed");
+    this.name = "DashboardTileCacheResolutionError";
+    this.cause = cause;
+    this.cache = metadata.cache;
+    this.coalesced = metadata.coalesced;
+  }
+}
+
+function dashboardTileCacheResolutionError(
+  error: unknown,
+): DashboardTileCacheResolutionFailure | null {
+  if (
+    typeof error === "object" &&
+    error !== null &&
+    "cache" in error &&
+    (error.cache === "hit" || error.cache === "miss") &&
+    "coalesced" in error &&
+    typeof error.coalesced === "boolean" &&
+    "cause" in error
+  ) {
+    return {
+      cache: error.cache,
+      cause: error.cause,
+      coalesced: error.coalesced,
+    };
+  }
+
+  return null;
+}
+
+interface DashboardTileCacheResolutionFailure {
+  cache: "hit" | "miss";
+  cause: unknown;
+  coalesced: boolean;
+}
+
+function dashboardTileTtlMs(
+  document: DashboardDocument,
+  tile: DashboardTileReference,
+): number {
+  if (tile.kind === "telemetry") return 15_000;
+  if (tile.kind === "service") return 30_000;
+
+  if (tile.kind === "module") {
+    const module = document.modules?.find((item) => item.id === tile.id);
+    if (
+      module?.datasource?.type === "external" &&
+      module.datasource.adapter === "weather"
+    ) {
+      return 10 * 60_000;
+    }
+    return 30_000;
+  }
+
+  if (["system-status", "uptime", "load-avg"].includes(tile.id)) {
+    return 30_000;
+  }
+
+  return 5 * 60_000;
+}
+
+function parseDashboardTilePath(pathname: string): DashboardTileReference | null {
+  const parts = pathname.split("/").filter(Boolean);
+  const [, dashboard, tileRoot, kind, firstId, secondId] = parts;
+  if (dashboard !== "dashboard" || tileRoot !== "tile" || !kind || !firstId) {
+    return null;
+  }
+
+  const id = decodeURIComponent(firstId);
+  if (kind === "telemetry" || kind === "module") {
+    return { kind, id };
+  }
+
+  if (kind === "service" && secondId) {
+    return {
+      kind,
+      groupId: id,
+      id: decodeURIComponent(secondId),
+    };
+  }
+
+  if (kind === "status" && secondId) {
+    return {
+      kind,
+      stripId: id,
+      id: decodeURIComponent(secondId),
+    };
+  }
+
+  return null;
+}

apps/web/tests/e2e/dashboard.spec.ts

@@ -16,7 +16,6 @@ const linkedServiceIds = [
   "open-webui",
   "comfyui",
   "models",
-  "prompt-registry",
   "adminer",
   "assistant",
   "suna",
@@ -104,7 +103,7 @@ test.describe("dashboard page QA gate", () => {
     expect(metrics.runtimeBottom).toBeLessThanOrEqual(956);
     expect(metrics.footerBottom).toBeLessThanOrEqual(956);
     expect(metrics.telemetryCardCount).toBe(16);
-    expect(metrics.serviceRowCount).toBe(28);
+    expect(metrics.serviceRowCount).toBe(27);
     expect(metrics.footerCellCount).toBe(5);
     expect(metrics.clippedItems).toEqual([]);
   });

apps/web/tsconfig.json

@@ -3,12 +3,6 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@dimensionlab/dashboard-model": ["../../packages/dashboard-model/src/index.ts"],
-      "@dimensionlab/dashboard-model/fixtures": [
-        "../../packages/dashboard-model/src/fixtures/index.ts"
-      ],
-      "@dimensionlab/ui": ["../../packages/ui/src/index.ts"],
-      "@dimensionlab/ui/styles.css": ["../../packages/ui/src/styles.css"],
       "$lib/*": ["src/lib/*"]
     },
     "types": ["node", "bun-types", "react", "react-dom", "vite/client"]

apps/web/vite.config.ts

@@ -24,18 +24,6 @@ export default defineConfig({
   plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
-      "@dimensionlab/ui/styles.css": fileURLToPath(
-        new URL("../../packages/ui/src/styles.css", import.meta.url),
-      ),
-      "@dimensionlab/ui": fileURLToPath(
-        new URL("../../packages/ui/src/index.ts", import.meta.url),
-      ),
-      "@dimensionlab/dashboard-model/fixtures": fileURLToPath(
-        new URL("../../packages/dashboard-model/src/fixtures/index.ts", import.meta.url),
-      ),
-      "@dimensionlab/dashboard-model": fileURLToPath(
-        new URL("../../packages/dashboard-model/src/index.ts", import.meta.url),
-      ),
       $lib: fileURLToPath(new URL("./src/lib", import.meta.url)),
     },
   },

packages/dashboard-model/package.json

@@ -6,10 +6,12 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
       "default": "./dist/index.js"
     },
     "./fixtures": {
       "types": "./dist/fixtures/index.d.ts",
+      "development": "./src/fixtures/index.ts",
       "default": "./dist/fixtures/index.js"
     }
   },

packages/ui

@@ -0,0 +1 @@
+Subproject commit a7a472083555152b8e1a2dc018d3be5b3b10d60b

packages/ui/.storybook/main.ts

@@ -1,15 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|ts|tsx)"],
-  addons: [
-    "@storybook/addon-a11y",
-    "@storybook/addon-vitest",
-  ],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-};
-
-export default config;

packages/ui/.storybook/preview.ts

@@ -1,51 +0,0 @@
-import "../src/styles.css";
-import type { Preview } from "@storybook/react-vite";
-
-const preview: Preview = {
-  decorators: [
-    (Story, context) => {
-      const theme = context.globals.theme === "light" ? "light" : "dark";
-
-      if (typeof document !== "undefined") {
-        document.documentElement.setAttribute("data-ui-theme", theme);
-      }
-
-      return Story();
-    },
-  ],
-  globalTypes: {
-    theme: {
-      description: "Dashboard component theme",
-      defaultValue: "dark",
-      toolbar: {
-        title: "Theme",
-        icon: "circlehollow",
-        items: [
-          { value: "dark", title: "Dark" },
-          { value: "light", title: "Light" },
-        ],
-        dynamicTitle: true,
-      },
-    },
-  },
-  parameters: {
-    backgrounds: {
-      default: "canvas",
-      values: [
-        { name: "canvas", value: "#0b0f0d" },
-        { name: "raised", value: "#151d18" },
-        { name: "light canvas", value: "#eef2e7" },
-        { name: "light raised", value: "#f1f5ea" },
-      ],
-    },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    layout: "fullscreen",
-  },
-};
-
-export default preview;

packages/ui/components.json

@@ -1,25 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "radix-nova",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/styles.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "rtl": false,
-  "aliases": {
-    "components": "src/components",
-    "utils": "src/utils",
-    "ui": "src/primitives",
-    "lib": "src",
-    "hooks": "src/hooks"
-  },
-  "menuColor": "default",
-  "menuAccent": "subtle",
-  "registries": {}
-}

packages/ui/package.json

@@ -1,52 +0,0 @@
-{
-  "name": "@dimensionlab/ui",
-  "version": "0.0.1",
-  "private": true,
-  "type": "module",
-  "sideEffects": ["*.css", "**/*.css"],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./styles.css": "./dist/styles.css",
-    "./tokens.css": "./dist/tokens.css"
-  },
-  "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && mkdir -p dist/components && cp src/styles.css dist/styles.css && cp src/tokens.css dist/tokens.css && cp src/components/styles.css dist/components/styles.css",
-    "check": "tsc --noEmit",
-    "test": "vitest run",
-    "test:unit": "vitest run",
-    "storybook": "storybook dev -p 6006 --host 0.0.0.0",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@fontsource-variable/geist": "^5.2.9",
-    "@iconify/react": "^6.0.2",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.21.0",
-    "radix-ui": "^1.6.0",
-    "tailwind-merge": "^3.6.0",
-    "tw-animate-css": "^1.4.0",
-    "uplot": "^1.6.32"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "devDependencies": {
-    "@storybook/addon-a11y": "^10.4.6",
-    "@storybook/addon-vitest": "^10.4.6",
-    "@storybook/react-vite": "^10.4.6",
-    "@types/bun": "^1.3.14",
-    "@types/node": "^25.9.3",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "bun-types": "^1.3.14",
-    "storybook": "^10.4.6",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.9"
-  }
-}

packages/ui/src/components/foundation/Badge.tsx

@@ -1,11 +0,0 @@
-import type { UiSeverity } from "../../types";
-import { StatusBadge } from "./StatusBadge";
-
-export interface BadgeProps {
-  label: string;
-  severity?: UiSeverity;
-}
-
-export function Badge({ label, severity = "neutral" }: BadgeProps) {
-  return <StatusBadge label={label} severity={severity} />;
-}

packages/ui/src/components/foundation/Button.tsx

@@ -1,39 +0,0 @@
-import type { ButtonHTMLAttributes } from "react";
-import { IconGlyph } from "./IconGlyph";
-
-export interface ButtonProps
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
-  label: string;
-  variant?: "primary" | "secondary" | "danger" | "ghost";
-  size?: "default" | "compact";
-  icon?: string;
-  loading?: boolean;
-  type?: "button" | "submit" | "reset";
-}
-
-export function Button({
-  label,
-  variant = "primary",
-  size = "default",
-  icon,
-  disabled = false,
-  loading = false,
-  type = "button",
-  className = "",
-  ...buttonProps
-}: ButtonProps) {
-  return (
-    <button
-      {...buttonProps}
-      className={className ? `ui-button ${className} ` : "ui-button "}
-      data-variant={variant}
-      data-size={size}
-      data-loading={loading}
-      disabled={disabled}
-      type={type}
-    >
-      {icon ? <IconGlyph name={icon} size="sm" /> : null}
-      <span>{loading ? "Loading" : label}</span>
-    </button>
-  );
-}

packages/ui/src/components/foundation/IconButton.tsx

@@ -1,33 +0,0 @@
-import type { ButtonHTMLAttributes } from "react";
-import { IconGlyph } from "./IconGlyph";
-
-export interface IconButtonProps
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
-  icon: string;
-  label: string;
-  active?: boolean;
-  type?: "button" | "submit" | "reset";
-}
-
-export function IconButton({
-  icon,
-  label,
-  active = false,
-  disabled = false,
-  type = "button",
-  className = "",
-  ...buttonProps
-}: IconButtonProps) {
-  return (
-    <button
-      {...buttonProps}
-      className={className ? `icon-button ${className} ` : "icon-button "}
-      aria-label={label}
-      data-active={active}
-      disabled={disabled}
-      type={type}
-    >
-      <IconGlyph name={icon} size="sm" />
-    </button>
-  );
-}

packages/ui/src/components/foundation/IconGlyph.tsx

@@ -1,21 +0,0 @@
-import { Icon } from "@iconify/react";
-
-export interface IconGlyphProps {
-  name?: string;
-  label?: string;
-  size?: "sm" | "md" | "lg";
-}
-
-export function IconGlyph({ name, label, size = "md" }: IconGlyphProps) {
-  return (
-    <span
-      className="icon-glyph"
-      data-size={size}
-      data-icon-name={name}
-      aria-label={label}
-      aria-hidden={label ? undefined : "true"}
-    >
-      {name ? <Icon icon={name} /> : null}
-    </span>
-  );
-}

packages/ui/src/components/foundation/ProgressMeter.tsx

@@ -1,34 +0,0 @@
-import type { CSSProperties } from "react";
-import { clampPercent } from "../../format";
-import type { UiSeverity } from "../../types";
-
-export interface ProgressMeterProps {
-  value?: number;
-  severity?: UiSeverity;
-  label?: string;
-}
-
-export function ProgressMeter({
-  value,
-  severity = "neutral",
-  label = "Progress",
-}: ProgressMeterProps) {
-  const progress = value === undefined ? null : clampPercent(value);
-
-  return (
-    <div
-      className="progress-meter"
-      data-severity={severity}
-      role="meter"
-      aria-label={label}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-valuenow={progress ?? undefined}
-      data-empty={progress === null}
-    >
-      {progress !== null ? (
-        <span style={{ "--meter-progress": `${progress}%` } as CSSProperties} />
-      ) : null}
-    </div>
-  );
-}

packages/ui/src/components/foundation/Separator.tsx

@@ -1,19 +0,0 @@
-export interface SeparatorProps {
-  orientation?: "horizontal" | "vertical";
-  dense?: boolean;
-}
-
-export function Separator({
-  orientation = "horizontal",
-  dense = false,
-}: SeparatorProps) {
-  return (
-    <div
-      className="separator"
-      data-orientation={orientation}
-      data-dense={dense}
-      role="separator"
-      aria-orientation={orientation}
-    />
-  );
-}

packages/ui/src/components/foundation/StatusBadge.tsx

@@ -1,14 +0,0 @@
-import type { UiSeverity } from "../../types";
-
-export interface StatusBadgeProps {
-  label: string;
-  severity?: UiSeverity;
-}
-
-export function StatusBadge({ label, severity = "neutral" }: StatusBadgeProps) {
-  return (
-    <span className="status-badge" data-severity={severity}>
-      {label}
-    </span>
-  );
-}

packages/ui/src/components/foundation/ThemeToggle.tsx

@@ -1,36 +0,0 @@
-import type { UiTheme } from "../../theme";
-import { getNextUiTheme } from "../../theme";
-import { IconGlyph } from "./IconGlyph";
-
-export interface ThemeToggleProps {
-  theme: UiTheme;
-  onThemeChange: (theme: UiTheme) => void;
-}
-
-export function ThemeToggle({ theme, onThemeChange }: ThemeToggleProps) {
-  const nextTheme = getNextUiTheme(theme);
-
-  return (
-    <button
-      aria-label="Light theme"
-      aria-pressed={theme === "light"}
-      className="theme-toggle"
-      data-ui-theme-current={theme}
-      data-ui-theme-toggle="true"
-      onClick={() => onThemeChange(nextTheme)}
-      type="button"
-    >
-      <span className="theme-toggle__label">Theme</span>
-      <span className="theme-toggle__switch" aria-hidden="true">
-        <span className="theme-toggle__cell" data-active={theme === "dark"}>
-          <IconGlyph name="mdi:weather-night" size="sm" />
-          <span>Dark</span>
-        </span>
-        <span className="theme-toggle__cell" data-active={theme === "light"}>
-          <IconGlyph name="mdi:white-balance-sunny" size="sm" />
-          <span>Light</span>
-        </span>
-      </span>
-    </button>
-  );
-}

packages/ui/src/components/frames/CornerBracketFrame.tsx

@@ -1,26 +0,0 @@
-export interface CornerBracketFrameProps {
-  density?: "regular" | "tight";
-  size?: "sm" | "md" | "lg";
-  tone?: "neutral" | "accent" | "danger";
-}
-
-export function CornerBracketFrame({
-  density = "regular",
-  size = "md",
-  tone = "neutral",
-}: CornerBracketFrameProps) {
-  return (
-    <div
-      className="corner-bracket-frame"
-      data-density={density}
-      data-size={size}
-      data-tone={tone}
-      aria-hidden="true"
-    >
-      <span data-corner="top-left" />
-      <span data-corner="top-right" />
-      <span data-corner="bottom-left" />
-      <span data-corner="bottom-right" />
-    </div>
-  );
-}

packages/ui/src/components/frames/DashboardFrame.tsx

@@ -1,59 +0,0 @@
-import { useId } from "react";
-import type { ReactNode } from "react";
-import type { UiDashboardPreview } from "../../types";
-import { ModuleCard } from "./ModuleCard";
-import { ServicePanel } from "../operations/ServicePanel";
-import { StatusStrip } from "../operations/StatusStrip";
-import { TelemetryGrid } from "../telemetry/TelemetryGrid";
-
-export interface DashboardFrameProps {
-  actions?: ReactNode;
-  dashboard: UiDashboardPreview;
-  titleId?: string;
-}
-
-export function DashboardFrame({
-  actions,
-  dashboard,
-  titleId,
-}: DashboardFrameProps) {
-  const generatedTitleId = useId();
-  const resolvedTitleId = titleId || `${generatedTitleId}-title`;
-
-  return (
-    <main className="dashboard-frame" aria-labelledby={resolvedTitleId}>
-      <header className="dashboard-frame__header console-header">
-        <div className="dashboard-frame__title">
-          <div className="dashboard-frame__title-copy">
-            {dashboard.eyebrow ? <p>{dashboard.eyebrow}</p> : null}
-            <h1 id={resolvedTitleId}>{dashboard.title}</h1>
-            {dashboard.subtitle ? <span>{dashboard.subtitle}</span> : null}
-          </div>
-          {actions ? (
-            <div className="dashboard-frame__actions">{actions}</div>
-          ) : null}
-        </div>
-        {dashboard.modules.length ? (
-          <div className="dashboard-frame__modules">
-            {dashboard.modules.map((module) => (
-              <ModuleCard key={module.id} module={module} />
-            ))}
-          </div>
-        ) : null}
-      </header>
-
-      <TelemetryGrid cards={dashboard.telemetry} />
-
-      <section className="dashboard-frame__panels" aria-label="Service groups">
-        {dashboard.serviceGroups.map((group) => (
-          <ServicePanel key={group.id} group={group} />
-        ))}
-      </section>
-
-      <StatusStrip
-        id={dashboard.statusStripId}
-        items={dashboard.statusItems}
-      />
-    </main>
-  );
-}

packages/ui/src/components/frames/DashboardHeader.tsx

@@ -1,30 +0,0 @@
-import { useId } from "react";
-import type { UiModuleBlock } from "../../types";
-import { ModuleCard } from "./ModuleCard";
-
-export interface DashboardHeaderProps {
-  title: string;
-  subtitle?: string;
-  eyebrow?: string;
-  module?: UiModuleBlock;
-}
-
-export function DashboardHeader({
-  title,
-  subtitle,
-  eyebrow,
-  module,
-}: DashboardHeaderProps) {
-  const titleId = useId();
-
-  return (
-    <header className="dashboard-header" aria-labelledby={titleId}>
-      <div>
-        {eyebrow ? <p>{eyebrow}</p> : null}
-        <h1 id={titleId}>{title}</h1>
-        {subtitle ? <span>{subtitle}</span> : null}
-      </div>
-      {module ? <ModuleCard module={module} /> : null}
-    </header>
-  );
-}

packages/ui/src/components/frames/DiagonalStripeField.tsx

@@ -1,24 +0,0 @@
-export interface DiagonalStripeFieldProps {
-  density?: "open" | "regular" | "tight";
-  direction?: "forward" | "backward";
-  size?: "sm" | "md" | "lg";
-  tone?: "neutral" | "accent" | "warning" | "danger";
-}
-
-export function DiagonalStripeField({
-  density = "regular",
-  direction = "forward",
-  size = "md",
-  tone = "accent",
-}: DiagonalStripeFieldProps) {
-  return (
-    <div
-      className="diagonal-stripe-field"
-      data-density={density}
-      data-direction={direction}
-      data-size={size}
-      data-tone={tone}
-      aria-hidden="true"
-    />
-  );
-}

packages/ui/src/components/frames/FooterCell.tsx

@@ -1,42 +0,0 @@
-import type { UiStatusItem } from "../../types";
-
-export interface FooterCellProps {
-  item: UiStatusItem;
-}
-
-export function FooterCell({ item }: FooterCellProps) {
-  const target = item.link?.external ? "_blank" : undefined;
-  const rel = item.link?.external ? "noreferrer" : undefined;
-  const content = (
-    <>
-      <span>{item.label}</span>
-      <strong>{item.value}</strong>
-    </>
-  );
-
-  if (item.link) {
-    return (
-      <a
-        className="footer-cell"
-        data-severity={item.severity || "neutral"}
-        data-model-id={item.id}
-        href={item.link.href}
-        target={target}
-        rel={rel}
-        aria-label={item.link.label}
-      >
-        {content}
-      </a>
-    );
-  }
-
-  return (
-    <div
-      className="footer-cell"
-      data-severity={item.severity || "neutral"}
-      data-model-id={item.id}
-    >
-      {content}
-    </div>
-  );
-}

packages/ui/src/components/frames/FooterStatusCell.tsx

@@ -1,6 +0,0 @@
-import type { UiStatusItem } from "../../types";
-import { FooterCell } from "./FooterCell";
-
-export function FooterStatusCell({ item }: { item: UiStatusItem }) {
-  return <FooterCell item={item} />;
-}

packages/ui/src/components/frames/GridFrame.tsx

@@ -1,13 +0,0 @@
-import type { PropsWithChildren } from "react";
-
-export interface GridFrameProps extends PropsWithChildren {
-  density?: "compact" | "dense";
-}
-
-export function GridFrame({ children, density = "dense" }: GridFrameProps) {
-  return (
-    <section className="grid-frame" data-density={density}>
-      {children}
-    </section>
-  );
-}

packages/ui/src/components/frames/ModuleCard.tsx

@@ -1,32 +0,0 @@
-import { useId } from "react";
-import type { UiModuleBlock } from "../../types";
-import { IconGlyph } from "../foundation/IconGlyph";
-
-export interface ModuleCardProps {
-  module: UiModuleBlock;
-}
-
-export function ModuleCard({ module }: ModuleCardProps) {
-  const generatedId = useId();
-  const titleId = `${generatedId}-title`;
-  const ariaLabel = module.title ? undefined : module.label || module.id;
-
-  return (
-    <aside
-      className="module-card"
-      data-severity={module.severity || "neutral"}
-      data-model-id={module.id}
-      aria-labelledby={module.title ? titleId : undefined}
-      aria-label={ariaLabel}
-    >
-      <div>
-        {module.title ? <h2 id={titleId}>{module.title}</h2> : null}
-        {module.value ? <strong>{module.value}</strong> : null}
-        {module.detail || module.label ? (
-          <p>{module.detail || module.label}</p>
-        ) : null}
-      </div>
-      {module.icon ? <IconGlyph name={module.icon} size="lg" /> : null}
-    </aside>
-  );
-}

packages/ui/src/components/frames/Panel.tsx

@@ -1,19 +0,0 @@
-import type { PropsWithChildren } from "react";
-
-export interface PanelProps extends PropsWithChildren {
-  title?: string;
-  density?: "compact" | "dense";
-}
-
-export function Panel({ title, density = "dense", children }: PanelProps) {
-  return (
-    <section className="panel" data-density={density}>
-      {title ? (
-        <header className="panel__header">
-          <h2>{title}</h2>
-        </header>
-      ) : null}
-      <div className="panel__body">{children}</div>
-    </section>
-  );
-}

packages/ui/src/components/frames/ScanlineField.tsx

@@ -1,21 +0,0 @@
-export interface ScanlineFieldProps {
-  intensity?: "soft" | "medium" | "hard";
-  size?: "sm" | "md" | "lg";
-  tone?: "neutral" | "accent" | "warning";
-}
-
-export function ScanlineField({
-  intensity = "medium",
-  size = "md",
-  tone = "neutral",
-}: ScanlineFieldProps) {
-  return (
-    <div
-      className="scanline-field"
-      data-intensity={intensity}
-      data-size={size}
-      data-tone={tone}
-      aria-hidden="true"
-    />
-  );
-}

packages/ui/src/components/operations/ServiceGroupPanel.tsx

@@ -1,6 +0,0 @@
-import type { UiServiceGroup } from "../../types";
-import { ServicePanel } from "./ServicePanel";
-
-export function ServiceGroupPanel({ group }: { group: UiServiceGroup }) {
-  return <ServicePanel group={group} />;
-}

packages/ui/src/components/operations/ServicePanel.tsx

@@ -1,27 +0,0 @@
-import type { UiServiceGroup } from "../../types";
-import { Panel } from "../frames/Panel";
-import { ServiceRow } from "./ServiceRow";
-import { StatusStrip } from "./StatusStrip";
-
-export interface ServicePanelProps {
-  group: UiServiceGroup;
-}
-
-export function ServicePanel({ group }: ServicePanelProps) {
-  return (
-    <div
-      className="service-panel"
-      data-layout={group.layout || "list"}
-      data-model-id={group.id}
-    >
-      <Panel title={group.title}>
-        {group.summary?.length ? (
-          <StatusStrip id={`${group.id}:summary`} items={group.summary} compact />
-        ) : null}
-        {group.services.map((service) => (
-          <ServiceRow key={service.id} service={service} />
-        ))}
-      </Panel>
-    </div>
-  );
-}

packages/ui/src/components/operations/ServiceRow.tsx

@@ -1,56 +0,0 @@
-import type { UiServiceRow } from "../../types";
-import { IconGlyph } from "../foundation/IconGlyph";
-import { StatusBadge } from "../foundation/StatusBadge";
-
-export interface ServiceRowProps {
-  service: UiServiceRow;
-}
-
-export function ServiceRow({ service }: ServiceRowProps) {
-  const target = service.link?.external ? "_blank" : undefined;
-  const rel = service.link?.external ? "noreferrer" : undefined;
-  const content = (
-    <>
-      <span className="service-row__status" aria-hidden="true" />
-      <IconGlyph name={service.icon} />
-      <div className="service-row__main">
-        <h3>{service.label}</h3>
-        <p>{service.description}</p>
-      </div>
-      {service.detail ? (
-        <StatusBadge label={service.detail} severity={service.severity} />
-      ) : null}
-      {service.link ? (
-        <span className="service-row__launch" aria-hidden="true">
-          <IconGlyph name="mdi:open-in-new" size="sm" />
-        </span>
-      ) : null}
-    </>
-  );
-
-  if (service.link) {
-    return (
-      <a
-        className="service-row"
-        data-severity={service.severity}
-        data-model-id={service.id}
-        href={service.link.href}
-        target={target}
-        rel={rel}
-        aria-label={service.link.label}
-      >
-        {content}
-      </a>
-    );
-  }
-
-  return (
-    <article
-      className="service-row"
-      data-severity={service.severity}
-      data-model-id={service.id}
-    >
-      {content}
-    </article>
-  );
-}

packages/ui/src/components/operations/StatusStrip.tsx

@@ -1,23 +0,0 @@
-import type { UiStatusItem } from "../../types";
-import { FooterCell } from "../frames/FooterCell";
-
-export interface StatusStripProps {
-  id?: string;
-  items: UiStatusItem[];
-  compact?: boolean;
-}
-
-export function StatusStrip({ id, items, compact = false }: StatusStripProps) {
-  return (
-    <section
-      className="status-strip"
-      data-compact={compact}
-      data-model-id={id}
-      data-variant={compact ? "cluster" : "system-bus"}
-    >
-      {items.map((item) => (
-        <FooterCell key={item.id} item={item} />
-      ))}
-    </section>
-  );
-}

packages/ui/src/components/operations/SystemState.tsx

@@ -1,26 +0,0 @@
-import type { UiSeverity } from "../../types";
-import { IconGlyph } from "../foundation/IconGlyph";
-
-export interface SystemStateProps {
-  title: string;
-  detail?: string;
-  icon?: string;
-  severity?: UiSeverity;
-}
-
-export function SystemState({
-  title,
-  detail,
-  icon = "mdi:information-outline",
-  severity = "neutral",
-}: SystemStateProps) {
-  return (
-    <section className="system-state" data-severity={severity}>
-      <IconGlyph name={icon} size="lg" />
-      <div>
-        <h2>{title}</h2>
-        {detail ? <p>{detail}</p> : null}
-      </div>
-    </section>
-  );
-}

packages/ui/src/components/operations/WeatherModule.tsx

@@ -1,6 +0,0 @@
-import type { UiModuleBlock } from "../../types";
-import { ModuleCard } from "../frames/ModuleCard";
-
-export function WeatherModule({ module }: { module: UiModuleBlock }) {
-  return <ModuleCard module={module} />;
-}

packages/ui/src/components/render.test.tsx

@@ -1,204 +0,0 @@
-import { renderToString } from "react-dom/server";
-import { describe, expect, test } from "vitest";
-import {
-  Button,
-  DashboardFrame,
-  FooterCell,
-  IconButton,
-  ServiceRow,
-  StatusStrip,
-  TelemetryCard,
-  TelemetryGrid,
-  ThemeToggle,
-} from "../index";
-import { dashboardPreviewFixtures } from "../fixtures";
-
-describe("dashboard UI components", () => {
-  test("renders the primary generic dashboard fixture", () => {
-    const body = renderToString(
-      <DashboardFrame dashboard={dashboardPreviewFixtures.primary} />,
-    );
-
-    expect(body).toContain("Operations Console");
-    expect(body).toContain("Core Throughput");
-    expect(body).toContain("Queue Workers");
-    expect(body).toContain("console-header");
-    expect(body).toContain("telemetry-section");
-    expect(body).toContain("6 Metrics");
-    expect(body).toContain('data-variant="system-bus"');
-    expect(body).toContain("data-icon-name=\"mdi:server-network\"");
-    expect(body).toContain("data-severity=\"warning\"");
-    expect(body).not.toContain("dashboard-title");
-  });
-
-  test("renders another generic dashboard fixture through the same component", () => {
-    const body = renderToString(
-      <DashboardFrame dashboard={dashboardPreviewFixtures.secondary} />,
-    );
-
-    expect(body).toContain("Support Desk");
-    expect(body).toContain("Response Window");
-    expect(body).toContain("Regional Nodes");
-    expect(body).toContain("data-icon-name=\"mdi:headset\"");
-    expect(body).toContain("data-severity=\"loading\"");
-  });
-
-  test("renders optional service and status links as focusable anchors", () => {
-    const service = renderToString(
-      <ServiceRow
-        service={{
-          id: "linked-service",
-          label: "Linked Service",
-          description: "Generic linked destination",
-          severity: "ok",
-          detail: "ready",
-          link: { href: "https://example.test/service", external: true },
-        }}
-      />,
-    );
-    const footer = renderToString(
-      <FooterCell
-        item={{
-          id: "linked-status",
-          label: "Linked Status",
-          value: "open",
-          severity: "neutral",
-          link: { href: "https://example.test/status" },
-        }}
-      />,
-    );
-
-    expect(service).toContain("<a ");
-    expect(service).toContain("href=\"https://example.test/service\"");
-    expect(service).toContain("target=\"_blank\"");
-    expect(service).toContain('class="service-row__status"');
-    expect(service).toContain('class="service-row__launch"');
-    expect(footer).toContain("<a ");
-    expect(footer).toContain("href=\"https://example.test/status\"");
-  });
-
-  test("renders the status strip as a compact system bus", () => {
-    const body = renderToString(
-      <StatusStrip
-        id="dashboard-status"
-        items={[
-          { id: "system", label: "System", value: "Nominal", severity: "ok" },
-          { id: "refresh", label: "Refresh", value: "15s", severity: "neutral" },
-        ]}
-      />,
-    );
-
-    expect(body).toContain('class="status-strip"');
-    expect(body).toContain('data-variant="system-bus"');
-    expect(body).toContain("Nominal");
-  });
-
-  test("renders stable model IDs on group and status containers", () => {
-    const body = renderToString(
-      <DashboardFrame 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 = renderToString(
-      <TelemetryCard
-        card={{
-          id: "bytes",
-          label: "Bytes Metric",
-          value: { kind: "bytes", value: 2048 },
-          severity: "neutral",
-        }}
-      />,
-    );
-    const withProgress = renderToString(
-      <TelemetryCard
-        card={{
-          id: "bytes-with-progress",
-          label: "Bytes With Progress",
-          value: { kind: "bytes", value: 2048 },
-          progress: 42,
-          severity: "neutral",
-        }}
-      />,
-    );
-
-    expect(withoutProgress).not.toContain("telemetry-card__bar");
-    expect(withProgress).toContain("--metric-progress:42%");
-  });
-
-  test("renders telemetry trends through the uPlot chart surface", () => {
-    const body = renderToString(
-      <TelemetryCard
-        card={{
-          id: "trend-card",
-          label: "Trend Card",
-          value: { kind: "percent", value: 64 },
-          sparkline: [18, 24, 64],
-          severity: "ok",
-        }}
-      />,
-    );
-
-    expect(body).toContain('data-chart-library="uplot"');
-  });
-
-  test("renders telemetry as a framed instrument section with indexed cards", () => {
-    const body = renderToString(
-      <TelemetryGrid cards={dashboardPreviewFixtures.primary.telemetry.slice(0, 2)} />,
-    );
-
-    expect(body).toContain('class="telemetry-section"');
-    expect(body).toContain("Telemetry");
-    expect(body).toContain("2 Metrics");
-    expect(body).toContain('data-metric-index="01"');
-    expect(body).toContain('class="telemetry-card__index"');
-    expect(body).toContain('class="telemetry-card__source"');
-  });
-
-  test("base button controls forward native attributes", () => {
-    const button = renderToString(
-      <Button
-        label="Refresh"
-        id="refresh-action"
-        className="custom-action"
-        aria-controls="refresh-target"
-      />,
-    );
-    const iconButton = renderToString(
-      <IconButton
-        icon="mdi:refresh"
-        label="Refresh status"
-        id="refresh-icon-action"
-        className="custom-icon-action"
-        aria-expanded="false"
-      />,
-    );
-
-    expect(button).toContain("id=\"refresh-action\"");
-    expect(button).toContain("class=\"ui-button custom-action ");
-    expect(button).toContain("aria-controls=\"refresh-target\"");
-    expect(iconButton).toContain("id=\"refresh-icon-action\"");
-    expect(iconButton).toContain("class=\"icon-button custom-icon-action ");
-    expect(iconButton).toContain("aria-expanded=\"false\"");
-  });
-
-  test("renders the theme toggle as a segmented instrument control", () => {
-    const body = renderToString(
-      <ThemeToggle theme="light" onThemeChange={() => undefined} />,
-    );
-
-    expect(body).toContain('class="theme-toggle"');
-    expect(body).toContain('data-ui-theme-current="light"');
-    expect(body).toContain('aria-label="Light theme"');
-    expect(body).toContain('aria-pressed="true"');
-    expect(body).toContain('class="theme-toggle__label"');
-    expect(body).toContain('class="theme-toggle__switch"');
-    expect(body).toContain('data-active="true"');
-    expect(body).toContain("Theme");
-    expect(body).toContain("Dark");
-    expect(body).toContain("Light");
-  });
-});

packages/ui/src/components/styles.css

@@ -1,957 +0,0 @@
-.dashboard-frame {
-  display: grid;
-  box-sizing: border-box;
-  height: 100vh;
-  min-height: 100vh;
-  gap: 0.45rem;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
-  overflow: hidden;
-  padding: clamp(0.5rem, 0.72vw, 0.74rem);
-  background:
-    radial-gradient(ellipse at 50% 12%, transparent 0 44%, rgba(0, 0, 0, 0.14) 100%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 9rem),
-    var(--ui-color-frame-wash);
-  font-variant-numeric: tabular-nums;
-}
-
-.dashboard-frame__header,
-.dashboard-header {
-  display: grid;
-  gap: 0.48rem;
-  align-items: start;
-}
-
-.dashboard-frame__header {
-  grid-template-columns: minmax(28rem, 1fr) minmax(31rem, 0.92fr);
-  min-height: 4.82rem;
-  border: var(--ui-border-strong);
-  background: var(--ui-color-surface-panel);
-  box-shadow: var(--ui-shadow-inset-panel);
-  padding: 0.48rem;
-}
-
-.dashboard-frame__title {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.58rem;
-  align-items: stretch;
-  min-width: 0;
-  min-height: 3.72rem;
-  border-right: var(--ui-border);
-  padding-right: 0.48rem;
-}
-
-.dashboard-frame__title-copy {
-  display: grid;
-  align-content: start;
-  min-width: 0;
-}
-
-.dashboard-frame__actions {
-  justify-self: end;
-}
-
-.dashboard-header {
-  grid-template-columns: minmax(0, 1fr) auto;
-  padding: var(--ui-space-3);
-}
-
-.dashboard-frame__header p,
-.dashboard-frame__header span,
-.dashboard-header p,
-.dashboard-header span,
-.dashboard-frame h1,
-.dashboard-header h1 {
-  margin: 0;
-  text-transform: uppercase;
-}
-
-.dashboard-frame__header p,
-.dashboard-frame__header span,
-.dashboard-header p,
-.dashboard-header span {
-  color: var(--ui-color-muted);
-  font-size: 0.62rem;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-}
-
-.dashboard-frame h1,
-.dashboard-header h1 {
-  max-width: 100%;
-  overflow-wrap: anywhere;
-  font-family: var(--ui-font-display);
-  font-size: clamp(2.05rem, 3vw, 2.78rem);
-  font-weight: 850;
-  letter-spacing: 0;
-  line-height: 0.82;
-  white-space: nowrap;
-}
-
-.dashboard-frame__modules {
-  display: grid;
-  grid-template-columns: minmax(15rem, 0.66fr) minmax(17rem, 1fr);
-  justify-content: end;
-  gap: 0.48rem;
-}
-
-.dashboard-frame__panels {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  align-content: start;
-  gap: 0.45rem;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.dashboard-frame__panels .service-panel[data-layout="grid"] {
-  grid-column: 1 / -1;
-}
-
-.dashboard-frame__panels .service-panel[data-layout="grid"] .panel__body {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.telemetry-section {
-  display: grid;
-  min-height: 0;
-  border: var(--ui-border-strong);
-  background: var(--ui-color-surface-panel);
-  box-shadow: var(--ui-shadow-inset-panel);
-}
-
-.telemetry-section__header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  min-height: 1.48rem;
-  border-bottom: var(--ui-border);
-  padding: 0.22rem 0.5rem;
-}
-
-.telemetry-section__header p,
-.telemetry-section__header h2,
-.telemetry-section__header span {
-  margin: 0;
-  text-transform: uppercase;
-}
-
-.telemetry-section__header p {
-  color: var(--ui-color-muted);
-  font-size: 0.46rem;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-}
-
-.telemetry-section__header h2 {
-  color: var(--ui-color-text);
-  font-size: 0.68rem;
-  font-weight: 850;
-  letter-spacing: 0.04em;
-}
-
-.telemetry-section__header > span {
-  border: var(--ui-border);
-  color: var(--ui-color-text-secondary);
-  font-size: 0.5rem;
-  font-weight: 850;
-  letter-spacing: 0.06em;
-  padding: 0.18rem 0.36rem;
-}
-
-.telemetry-grid {
-  display: grid;
-  grid-template-columns: repeat(8, minmax(0, 1fr));
-  gap: 1px;
-  border: 0;
-  background: var(--ui-color-border-subtle);
-}
-
-.telemetry-card,
-.module-card,
-.panel,
-.system-state {
-  border: var(--ui-border);
-  background: var(--ui-color-surface-panel);
-  color: var(--ui-color-text);
-}
-
-.telemetry-card {
-  position: relative;
-  display: grid;
-  min-height: 4.72rem;
-  gap: 0.22rem;
-  background: linear-gradient(
-    180deg,
-    var(--ui-color-card-gradient-start),
-    var(--ui-color-card-gradient-end)
-  );
-  border-left: 2px solid var(--ui-color-ok);
-  box-shadow: var(--ui-shadow-inset-panel);
-  padding: 0.34rem 0.46rem 0.36rem;
-}
-
-.telemetry-card[data-severity="warning"] {
-  border-color: color-mix(in srgb, var(--ui-color-warning), transparent 42%);
-  border-left-color: var(--ui-color-warning);
-}
-
-.telemetry-card[data-severity="danger"] {
-  border-color: color-mix(in srgb, var(--ui-color-danger), transparent 22%);
-  border-left-color: var(--ui-color-danger);
-  color: var(--ui-color-danger);
-}
-
-.telemetry-card[data-severity="stale"],
-.telemetry-card[data-severity="unavailable"] {
-  border-left-color: var(--ui-color-stale);
-  color: var(--ui-color-stale);
-}
-
-.telemetry-card[data-severity="loading"] {
-  border-left-color: var(--ui-color-accent);
-  color: var(--ui-color-accent);
-}
-
-.telemetry-card:hover {
-  background: var(--ui-color-surface-raised);
-}
-
-.telemetry-card header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  min-width: 0;
-  align-items: start;
-  gap: 0.25rem;
-}
-
-.telemetry-card header .icon-glyph {
-  width: 1rem;
-  height: 1rem;
-  border-color: var(--ui-color-border-subtle);
-  background: transparent;
-  color: var(--ui-color-muted);
-}
-
-.telemetry-card h3,
-.telemetry-card p,
-.module-card h2,
-.module-card p,
-.service-row h3,
-.service-row p,
-.panel h2,
-.system-state h2,
-.system-state p {
-  margin: 0;
-}
-
-.telemetry-card h3,
-.service-row h3 {
-  overflow: hidden;
-  font-weight: 850;
-  letter-spacing: 0;
-  line-height: 1.05;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.telemetry-card h3 {
-  overflow-wrap: anywhere;
-  color: var(--ui-color-text-secondary);
-  font-size: 0.52rem;
-  font-weight: 850;
-  line-height: 1.02;
-  white-space: normal;
-}
-
-.telemetry-card__index {
-  display: inline-grid;
-  min-width: 1.05rem;
-  margin-bottom: 0.08rem;
-  color: var(--ui-color-muted);
-  font-size: 0.45rem;
-  font-weight: 850;
-  line-height: 1;
-}
-
-.service-row h3 {
-  font-size: 0.72rem;
-}
-
-.telemetry-card strong,
-.module-card strong {
-  display: block;
-  font-family: var(--ui-font-display);
-  font-size: clamp(1.45rem, 2.25vw, 2.05rem);
-  font-weight: 800;
-  letter-spacing: 0;
-  line-height: 0.78;
-  white-space: nowrap;
-}
-
-.telemetry-card p,
-.module-card p,
-.service-row p {
-  overflow: hidden;
-  color: var(--ui-color-muted);
-  line-height: 1.08;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.telemetry-card p,
-.telemetry-card__source {
-  font-size: 0.49rem;
-  line-height: 1.05;
-}
-
-.module-card p,
-.service-row p {
-  font-size: 0.56rem;
-}
-
-.telemetry-card__bar,
-.progress-meter {
-  height: 0.2rem;
-  border: var(--ui-border);
-  background: var(--ui-color-surface-inset);
-}
-
-.telemetry-card__bar span,
-.progress-meter span {
-  display: block;
-  width: var(--metric-progress, var(--meter-progress));
-  height: 100%;
-  background: currentColor;
-}
-
-.telemetry-card[data-severity="loading"] .telemetry-card__bar span {
-  min-width: 1.25rem;
-}
-
-.line-chart {
-  position: relative;
-  min-width: 0;
-  height: 0.86rem;
-  color: var(--ui-color-accent);
-}
-
-.line-chart::before {
-  position: absolute;
-  inset: 50% 0 auto;
-  height: 1px;
-  background: var(--ui-color-border-subtle);
-  content: "";
-}
-
-.line-chart[data-severity="warning"] {
-  color: var(--ui-color-warning);
-}
-
-.line-chart[data-severity="danger"] {
-  color: var(--ui-color-danger);
-}
-
-.line-chart[data-severity="stale"],
-.line-chart[data-severity="unavailable"] {
-  color: var(--ui-color-stale);
-}
-
-.line-chart__canvas {
-  width: 100%;
-  height: 100%;
-}
-
-.line-chart__canvas .uplot {
-  width: 100% !important;
-  height: 100% !important;
-  background: transparent;
-  font-family: var(--ui-font-mono);
-}
-
-.line-chart__canvas .u-over,
-.line-chart__canvas .u-under {
-  overflow: visible;
-}
-
-.module-card {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.45rem;
-  align-items: start;
-  min-width: 0;
-  min-height: 3.72rem;
-  border: var(--ui-border);
-  background: var(--ui-color-surface-module);
-  box-shadow: var(--ui-shadow-inset-panel);
-  padding: 0.42rem 0.48rem;
-}
-
-.module-card h2 {
-  color: var(--ui-color-muted);
-  font-size: 0.48rem;
-  font-weight: 850;
-  letter-spacing: 0.08em;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.module-card strong {
-  margin-top: 0.12rem;
-  font-size: clamp(1.1rem, 1.55vw, 1.56rem);
-  line-height: 0.82;
-  overflow-wrap: anywhere;
-}
-
-.module-card p {
-  margin-top: 0.18rem;
-  color: var(--ui-color-muted);
-  font-size: 0.45rem;
-  line-height: 1.05;
-}
-
-.module-card[data-severity="ok"] .icon-glyph {
-  border-color: color-mix(in srgb, var(--ui-color-ok), transparent 44%);
-  background: var(--ui-color-accent-soft);
-  color: var(--ui-color-ok);
-}
-
-.module-card[data-severity="warning"] {
-  border-color: color-mix(in srgb, var(--ui-color-warning), transparent 42%);
-  color: var(--ui-color-warning);
-}
-
-.module-card[data-severity="danger"] {
-  border-color: color-mix(in srgb, var(--ui-color-danger), transparent 32%);
-  color: var(--ui-color-danger);
-}
-
-.module-card[data-severity="stale"],
-.module-card[data-severity="unavailable"] {
-  color: var(--ui-color-stale);
-}
-
-.module-card[data-severity="loading"] {
-  color: var(--ui-color-accent);
-}
-
-.service-row {
-  display: grid;
-  grid-template-columns: 0.28rem auto minmax(0, 1fr) auto auto;
-  gap: 0.24rem;
-  align-items: center;
-  min-height: 2.08rem;
-  border: 0;
-  border-bottom: var(--ui-border);
-  background: transparent;
-  color: inherit;
-  padding: 0.14rem 0;
-  text-decoration: none;
-}
-
-.service-row__status {
-  width: 0.26rem;
-  height: 0.72rem;
-  background: var(--ui-color-muted);
-}
-
-.service-row[data-severity="ok"] .service-row__status {
-  background: var(--ui-color-ok);
-}
-
-.service-row[data-severity="warning"] {
-  border-bottom-color: color-mix(in srgb, var(--ui-color-warning), transparent 54%);
-}
-
-.service-row[data-severity="warning"] .service-row__status {
-  background: var(--ui-color-warning);
-}
-
-.service-row[data-severity="danger"],
-.service-row[data-severity="unavailable"] {
-  border-bottom-color: color-mix(in srgb, var(--ui-color-danger), transparent 50%);
-}
-
-.service-row[data-severity="danger"] .service-row__status,
-.service-row[data-severity="unavailable"] .service-row__status {
-  background: var(--ui-color-danger);
-}
-
-.service-row[data-severity="loading"] {
-  border-bottom-color: color-mix(in srgb, var(--ui-color-accent), transparent 56%);
-}
-
-.service-row[data-severity="loading"] .service-row__status {
-  background: var(--ui-color-accent);
-}
-
-.service-row:where(a):hover {
-  border-bottom-color: var(--ui-color-accent);
-  background: var(--ui-color-hover);
-}
-
-.service-row__main {
-  min-width: 0;
-}
-
-.service-row__launch {
-  display: inline-grid;
-  place-items: center;
-  color: var(--ui-color-muted);
-}
-
-.service-row__launch .icon-glyph {
-  width: 1rem;
-  height: 1rem;
-  border-color: var(--ui-color-border-subtle);
-  background: transparent;
-}
-
-.status-badge {
-  display: inline-grid;
-  min-height: 1.12rem;
-  align-items: center;
-  border: var(--ui-border);
-  background: var(--ui-color-surface-inset);
-  padding: 0 0.32rem;
-  color: var(--ui-color-muted);
-  font-size: 0.5rem;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.status-badge[data-severity="ok"] {
-  border-color: color-mix(in srgb, var(--ui-color-ok), transparent 42%);
-  color: var(--ui-color-ok);
-}
-
-.status-badge[data-severity="warning"] {
-  border-color: color-mix(in srgb, var(--ui-color-warning), transparent 35%);
-  color: var(--ui-color-warning);
-}
-
-.status-badge[data-severity="danger"] {
-  border-color: color-mix(in srgb, var(--ui-color-danger), transparent 30%);
-  color: var(--ui-color-danger);
-}
-
-.status-badge[data-severity="stale"],
-.status-badge[data-severity="unavailable"] {
-  color: var(--ui-color-stale);
-}
-
-.status-badge[data-severity="loading"] {
-  color: var(--ui-color-accent);
-}
-
-.footer-cell {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  min-height: 1.72rem;
-  align-items: center;
-  background: var(--ui-color-surface-footer);
-  color: inherit;
-  text-decoration: none;
-}
-
-.footer-cell span,
-.footer-cell strong {
-  min-width: 0;
-  padding: 0.29rem 0.52rem;
-  overflow-wrap: anywhere;
-  text-transform: uppercase;
-}
-
-.footer-cell span {
-  height: 100%;
-  border-right: var(--ui-border);
-  color: var(--ui-color-muted);
-  font-size: 0.48rem;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-}
-
-.footer-cell strong {
-  color: var(--ui-color-text);
-  font-size: 0.54rem;
-  font-weight: 850;
-}
-
-.footer-cell[data-severity="ok"] strong {
-  color: var(--ui-color-ok);
-}
-
-.footer-cell[data-severity="warning"] strong {
-  color: var(--ui-color-warning);
-}
-
-.footer-cell[data-severity="danger"] strong {
-  color: var(--ui-color-danger);
-}
-
-.footer-cell[data-severity="stale"] strong,
-.footer-cell[data-severity="unavailable"] strong {
-  color: var(--ui-color-stale);
-}
-
-.footer-cell[data-severity="loading"] strong {
-  color: var(--ui-color-accent);
-}
-
-.footer-cell:where(a):hover strong {
-  color: var(--ui-color-accent);
-}
-
-.status-strip {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-  gap: 1px;
-  border: var(--ui-border-strong);
-  background: var(--ui-color-border);
-  box-shadow: var(--ui-shadow-inset-panel);
-}
-
-.status-strip[data-compact="true"] {
-  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
-}
-
-.panel {
-  position: relative;
-  min-width: 0;
-  background: var(--ui-color-surface-panel);
-  box-shadow: var(--ui-shadow-inset-panel);
-}
-
-.panel::before,
-.panel::after {
-  position: absolute;
-  width: 0.55rem;
-  height: 0.55rem;
-  border-color: var(--ui-color-line-strong);
-  content: "";
-}
-
-.panel::before {
-  top: 0.2rem;
-  right: 0.2rem;
-  border-top: 1px solid;
-  border-right: 1px solid;
-}
-
-.panel::after {
-  right: 0.2rem;
-  bottom: 0.2rem;
-  border-right: 1px solid;
-  border-bottom: 1px solid;
-}
-
-.panel__header {
-  border-bottom: var(--ui-border);
-  padding: 0.38rem 0.55rem 0.3rem;
-}
-
-.panel h2 {
-  font-family: var(--ui-font-display);
-  font-size: clamp(1.1rem, 1.62vw, 1.55rem);
-  font-weight: 800;
-  line-height: 0.9;
-  text-transform: uppercase;
-}
-
-.panel__body {
-  display: grid;
-  gap: 0.25rem;
-  padding: 0.42rem 0.55rem 0.55rem;
-}
-
-.service-panel .panel__body {
-  gap: 0;
-  padding-block: 0.18rem 0.32rem;
-}
-
-.service-panel[data-layout="grid"] .service-row {
-  min-height: 1.95rem;
-}
-
-.ui-button,
-.icon-button {
-  display: inline-grid;
-  align-items: center;
-  justify-content: center;
-  border: var(--ui-border);
-  cursor: pointer;
-}
-
-.ui-button {
-  grid-auto-flow: column;
-  gap: var(--ui-space-2);
-  min-height: 2.5rem;
-  background: var(--ui-color-accent);
-  color: var(--ui-color-canvas);
-  font-size: 0.76rem;
-  font-weight: 850;
-  padding: 0 var(--ui-space-4);
-  text-transform: uppercase;
-}
-
-.icon-button {
-  width: 2.5rem;
-  height: 2.5rem;
-  place-items: center;
-  background: var(--ui-color-surface-footer);
-  color: var(--ui-color-muted);
-  padding: 0;
-}
-
-.theme-toggle {
-  display: grid;
-  grid-template-columns: 2.72rem minmax(0, 1fr);
-  align-items: center;
-  width: 9.75rem;
-  min-width: 0;
-  min-height: 2.18rem;
-  border: var(--ui-border-strong);
-  background: var(--ui-color-surface-module);
-  color: var(--ui-color-text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.55rem;
-  font-weight: 850;
-  letter-spacing: 0;
-  padding: 0.13rem;
-  text-transform: uppercase;
-  box-shadow: var(--ui-shadow-inset-panel);
-}
-
-.theme-toggle:hover {
-  border-color: var(--ui-color-accent);
-  background: var(--ui-color-surface-raised);
-}
-
-.theme-toggle:active {
-  background: var(--ui-color-surface-inset);
-}
-
-.theme-toggle__label {
-  display: grid;
-  align-self: stretch;
-  place-items: center;
-  border-right: var(--ui-border);
-  color: var(--ui-color-muted);
-  font-size: 0.48rem;
-  font-weight: 800;
-  line-height: 1;
-}
-
-.theme-toggle__switch {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.1rem;
-  min-width: 0;
-  padding-left: 0.1rem;
-}
-
-.theme-toggle__cell {
-  display: grid;
-  grid-template-columns: auto auto;
-  gap: 0.2rem;
-  align-items: center;
-  justify-content: center;
-  min-height: 1.68rem;
-  border: 1px solid transparent;
-  color: var(--ui-color-muted);
-  line-height: 1;
-  padding: 0 0.22rem;
-  white-space: nowrap;
-}
-
-.theme-toggle__cell[data-active="true"] {
-  border-color: var(--ui-color-accent);
-  background: var(--ui-color-accent-soft);
-  color: var(--ui-color-accent);
-}
-
-.theme-toggle__cell > span {
-  color: currentColor;
-}
-
-.theme-toggle:hover .theme-toggle__cell[data-active="false"] {
-  border-color: var(--ui-color-line);
-  color: var(--ui-color-text);
-}
-
-.theme-toggle .icon-glyph {
-  width: 0.82rem;
-  height: 0.82rem;
-  border: 0;
-  background: transparent;
-  color: currentColor;
-}
-
-.theme-toggle .icon-glyph svg {
-  width: 0.78rem;
-  height: 0.78rem;
-}
-
-.icon-glyph {
-  display: inline-grid;
-  width: 1.55rem;
-  height: 1.55rem;
-  place-items: center;
-  border: var(--ui-border);
-  background: var(--ui-color-surface-icon);
-  color: currentColor;
-  line-height: 1;
-}
-
-.icon-glyph svg {
-  width: 0.95rem;
-  height: 0.95rem;
-}
-
-.icon-glyph[data-size="sm"] {
-  width: 1.1rem;
-  height: 1.1rem;
-}
-
-.icon-glyph[data-size="lg"] {
-  width: 2.35rem;
-  height: 2.35rem;
-}
-
-.system-state {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: var(--ui-space-3);
-  align-items: center;
-  padding: var(--ui-space-4);
-}
-
-.grid-frame {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
-  gap: var(--ui-space-3);
-  padding: var(--ui-space-3);
-}
-
-.separator {
-  background: var(--ui-color-line);
-}
-
-.separator[data-orientation="horizontal"] {
-  width: 100%;
-  height: 1px;
-  margin-block: var(--ui-space-3);
-}
-
-.corner-bracket-frame,
-.diagonal-stripe-field,
-.scanline-field,
-.signal-trace {
-  display: block;
-  min-height: 3rem;
-}
-
-@media (max-width: 1100px) {
-  .telemetry-grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 1180px), (max-height: 840px) {
-  .dashboard-frame {
-    grid-template-rows: auto auto auto auto;
-    height: auto;
-    min-height: 100vh;
-    overflow: visible;
-  }
-
-  .dashboard-frame__panels {
-    overflow: visible;
-  }
-}
-
-@media (max-width: 1180px) {
-  .dashboard-frame__header {
-    grid-template-columns: 1fr;
-  }
-
-  .dashboard-frame__panels {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .dashboard-frame__panels .service-panel[data-layout="grid"] .panel__body {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 780px) {
-  .dashboard-frame__header,
-  .dashboard-frame__title,
-  .dashboard-header,
-  .dashboard-frame__modules,
-  .dashboard-frame__panels {
-    grid-template-columns: 1fr;
-  }
-
-  .dashboard-frame__header {
-    min-height: 0;
-  }
-
-  .dashboard-frame__title {
-    border-right: 0;
-    border-bottom: var(--ui-border);
-    padding-right: 0;
-    padding-bottom: 0.48rem;
-  }
-
-  .dashboard-frame h1,
-  .dashboard-header h1 {
-    white-space: normal;
-  }
-
-  .dashboard-frame__panels {
-    overflow: visible;
-  }
-
-  .dashboard-frame__panels .service-panel[data-layout="grid"] .panel__body {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 700px) {
-  .telemetry-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 580px) {
-  .service-row {
-    grid-template-columns: 0.28rem auto minmax(0, 1fr) auto;
-    min-height: 2.75rem;
-  }
-
-  .service-row .status-badge {
-    grid-column: 3;
-    justify-self: start;
-  }
-
-  .service-row__launch {
-    grid-column: 4;
-    grid-row: 1;
-  }
-
-  .status-strip {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 420px) {
-  .status-strip {
-    grid-template-columns: 1fr;
-  }
-}

packages/ui/src/components/telemetry/LineChart.tsx

@@ -1,114 +0,0 @@
-import "uplot/dist/uPlot.min.css";
-import { useEffect, useRef } from "react";
-import type { UiSeverity } from "../../types";
-
-export interface LineChartProps {
-  values?: number[];
-  severity?: UiSeverity;
-  label?: string;
-}
-
-export function LineChart({
-  values = [],
-  severity = "neutral",
-  label = "Telemetry trend",
-}: LineChartProps) {
-  const chartElementRef = useRef<HTMLDivElement>(null);
-  const valuesKey = values.join(",");
-
-  useEffect(() => {
-    const chartElement = chartElementRef.current;
-    if (!chartElement) return;
-
-    let chart: ChartInstance | null = null;
-    let resizeObserver: ResizeObserver | null = null;
-    let disposed = false;
-
-    void import("uplot").then((module) => {
-      if (disposed || !chartElementRef.current) return;
-
-      const element = chartElementRef.current;
-      chart = new module.default(chartOptions(element, severity), chartData(values), element);
-
-      if (typeof ResizeObserver !== "undefined") {
-        resizeObserver = new ResizeObserver(() => {
-          chart?.setSize(chartSize(element));
-        });
-        resizeObserver.observe(element);
-      }
-    });
-
-    return () => {
-      disposed = true;
-      resizeObserver?.disconnect();
-      chart?.destroy();
-    };
-  }, [severity, valuesKey, values]);
-
-  return (
-    <div
-      className="line-chart"
-      data-chart-library="uplot"
-      data-severity={severity}
-      data-values={values.join(",")}
-      role="img"
-      aria-label={label}
-    >
-      <div ref={chartElementRef} className="line-chart__canvas" aria-hidden="true" />
-    </div>
-  );
-}
-
-type ChartInstance = {
-  destroy(): void;
-  setSize(size: { width: number; height: number }): void;
-};
-
-function chartData(values: number[]): import("uplot").AlignedData {
-  const normalized = values.length ? values : [0, 0];
-  return [
-    normalized.map((_, index) => index),
-    normalized.map((value) => Math.max(0, Number(value) || 0)),
-  ];
-}
-
-function chartOptions(
-  element: HTMLElement,
-  severity: UiSeverity,
-): import("uplot").Options {
-  return {
-    ...chartSize(element),
-    cursor: { show: false },
-    legend: { show: false },
-    padding: [2, 0, 2, 0],
-    scales: {
-      x: { time: false },
-      y: { auto: true },
-    },
-    axes: [{ show: false }, { show: false }],
-    series: [
-      {},
-      {
-        stroke: chartStroke(element, severity),
-        width: 2,
-        points: { show: false },
-      },
-    ],
-  };
-}
-
-function chartSize(element?: HTMLElement): { width: number; height: number } {
-  return {
-    width: Math.max(80, Math.round(element?.clientWidth || 120)),
-    height: Math.max(20, Math.round(element?.clientHeight || 24)),
-  };
-}
-
-function chartStroke(element: HTMLElement, severity: UiSeverity): string {
-  const styles = window.getComputedStyle(element.closest(".line-chart") || element);
-  const currentColor = styles.color;
-  if (currentColor) return currentColor;
-  if (severity === "danger") return "#ff1744";
-  if (severity === "warning") return "#ffb020";
-  return "#d7ff00";
-}

packages/ui/src/components/telemetry/SignalTrace.tsx

@@ -1,26 +0,0 @@
-export interface SignalTraceProps {
-  density?: "regular" | "tight";
-  orientation?: "horizontal" | "vertical";
-  tone?: "neutral" | "accent" | "warning";
-}
-
-export function SignalTrace({
-  density = "regular",
-  orientation = "horizontal",
-  tone = "accent",
-}: SignalTraceProps) {
-  return (
-    <div
-      className="signal-trace"
-      data-density={density}
-      data-orientation={orientation}
-      data-tone={tone}
-      aria-hidden="true"
-    >
-      <span className="signal-trace__rail" />
-      <span className="signal-trace__node" data-node="start" />
-      <span className="signal-trace__node" data-node="middle" />
-      <span className="signal-trace__node" data-node="end" />
-    </div>
-  );
-}

packages/ui/src/components/telemetry/Sparkline.tsx

@@ -1,37 +0,0 @@
-import type { UiSeverity } from "../../types";
-
-export interface SparklineProps {
-  values?: number[];
-  severity?: UiSeverity;
-}
-
-export function Sparkline({
-  values = [],
-  severity = "neutral",
-}: SparklineProps) {
-  const points = toPoints(values);
-
-  return (
-    <svg
-      className="sparkline"
-      data-severity={severity}
-      viewBox="0 0 100 24"
-      aria-hidden="true"
-    >
-      {points ? <polyline points={points} /> : null}
-    </svg>
-  );
-}
-
-function toPoints(values: number[]): string {
-  if (values.length === 0) return "";
-  const max = Math.max(...values, 1);
-  const step = values.length > 1 ? 100 / (values.length - 1) : 100;
-  return values
-    .map((value, index) => {
-      const x = index * step;
-      const y = 24 - (Math.max(0, value) / max) * 22;
-      return `${x.toFixed(2)},${y.toFixed(2)}`;
-    })
-    .join(" ");
-}

packages/ui/src/components/telemetry/TelemetryCard.tsx

@@ -1,59 +0,0 @@
-import type { CSSProperties } from "react";
-import { clampPercent, formatMetricValue } from "../../format";
-import type { UiTelemetryCard } from "../../types";
-import { IconGlyph } from "../foundation/IconGlyph";
-import { LineChart } from "./LineChart";
-
-export interface TelemetryCardProps {
-  card: UiTelemetryCard;
-  index?: number;
-}
-
-export function TelemetryCard({ card, index }: TelemetryCardProps) {
-  const progress = resolveProgress(card);
-  const value = formatMetricValue(card.value);
-  const metricIndex = index ? String(index).padStart(2, "0") : undefined;
-
-  return (
-    <article
-      className="telemetry-card"
-      data-severity={card.severity}
-      data-model-id={card.id}
-      data-metric-index={metricIndex}
-    >
-      <header>
-        <div>
-          {metricIndex ? (
-            <span className="telemetry-card__index">{metricIndex}</span>
-          ) : null}
-          <h3>{card.label}</h3>
-        </div>
-        {card.icon ? <IconGlyph name={card.icon} size="sm" /> : null}
-      </header>
-      <strong>{value}</strong>
-      {progress !== null ? (
-        <div className="telemetry-card__bar" aria-hidden="true">
-          <span style={{ "--metric-progress": `${progress}%` } as CSSProperties} />
-        </div>
-      ) : null}
-      {card.sparkline?.length ? (
-        <LineChart
-          values={card.sparkline}
-          severity={card.severity}
-          label={`${card.label} trend`}
-        />
-      ) : null}
-      {card.detail || card.description ? (
-        <p className="telemetry-card__source">{card.detail || card.description}</p>
-      ) : null}
-    </article>
-  );
-}
-
-function resolveProgress(card: UiTelemetryCard): number | null {
-  if (typeof card.progress === "number") return clampPercent(card.progress);
-  if (card.value.kind !== "percent") return null;
-
-  const progress = Number(card.value.value);
-  return Number.isFinite(progress) ? clampPercent(progress) : null;
-}

packages/ui/src/components/telemetry/TelemetryGrid.tsx

@@ -1,29 +0,0 @@
-import { useId } from "react";
-import type { UiTelemetryCard } from "../../types";
-import { TelemetryCard } from "./TelemetryCard";
-
-export interface TelemetryGridProps {
-  cards: UiTelemetryCard[];
-}
-
-export function TelemetryGrid({ cards }: TelemetryGridProps) {
-  const headingId = useId();
-  const metricCount = `${cards.length} ${cards.length === 1 ? "Metric" : "Metrics"}`;
-
-  return (
-    <section className="telemetry-section" aria-labelledby={headingId}>
-      <header className="telemetry-section__header">
-        <div>
-          <p>Signal Matrix</p>
-          <h2 id={headingId}>Telemetry</h2>
-        </div>
-        <span>{metricCount}</span>
-      </header>
-      <div className="telemetry-grid">
-        {cards.map((card, index) => (
-          <TelemetryCard key={card.id} card={card} index={index + 1} />
-        ))}
-      </div>
-    </section>
-  );
-}

packages/ui/src/components/telemetry/TelemetryStrip.tsx

@@ -1,6 +0,0 @@
-import type { UiTelemetryCard } from "../../types";
-import { TelemetryGrid } from "./TelemetryGrid";
-
-export function TelemetryStrip({ cards }: { cards: UiTelemetryCard[] }) {
-  return <TelemetryGrid cards={cards} />;
-}

packages/ui/src/content-boundary.test.ts

@@ -1,87 +0,0 @@
-import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
-import { join } from "node:path";
-import { describe, expect, test } from "vitest";
-
-const root = process.cwd();
-const uiSourceRoot = existsSync(join(root, "packages/ui/src"))
-  ? join(root, "packages/ui/src")
-  : join(root, "src");
-
-const forbiddenTerms = [
-  "dimensionlab",
-  "dimension lab",
-  "vaultwarden",
-  "forgejo",
-  "grafana",
-  "uptime kuma",
-  "prometheus",
-  "backrest",
-  "open webui",
-  "comfyui",
-  "adminer",
-  "cockpit",
-  "ollama",
-];
-
-describe("UI package content boundary", () => {
-  test("contains the reusable dashboard component inventory", () => {
-    expect(existsSync(join(uiSourceRoot, "index.ts"))).toBe(true);
-    expect(
-      existsSync(join(uiSourceRoot, "components/frames/DashboardFrame.tsx")),
-    ).toBe(true);
-    expect(
-      existsSync(join(uiSourceRoot, "components/foundation/ThemeToggle.tsx")),
-    ).toBe(true);
-    expect(existsSync(join(uiSourceRoot, "styles.css"))).toBe(true);
-  });
-
-  test("keeps UI components grouped by domain instead of a flat bucket", () => {
-    const domainFolders = ["foundation", "frames", "operations", "telemetry"];
-
-    for (const folder of domainFolders) {
-      expect(existsSync(join(uiSourceRoot, "components", folder))).toBe(true);
-    }
-
-    const flatComponentFiles = readdirSync(join(uiSourceRoot, "components"))
-      .filter((entry) => entry.endsWith(".tsx") && !entry.endsWith(".test.tsx"))
-      .sort();
-    expect(flatComponentFiles).toEqual([]);
-  });
-
-  test("keeps environment-specific content out of reusable UI source", () => {
-    const source = readUiSource(uiSourceRoot).toLowerCase();
-
-    expect(forbiddenTerms.filter((term) => source.includes(term))).toEqual([]);
-  });
-
-  test("does not import website runtime modules", () => {
-    const source = readUiSource(uiSourceRoot);
-
-    expect(source).not.toMatch(
-      /from ["'](?:apps\/web|\$lib\/server|\$lib\/model)/,
-    );
-    expect(source).not.toContain("../web/");
-  });
-
-  test("keeps icon rendering driven by icon identifiers", () => {
-    const source = readUiSource(uiSourceRoot);
-
-    expect(source).not.toContain("@iconify-json/");
-    expect(source).not.toContain("/icons/");
-  });
-});
-
-function readUiSource(path: string): string {
-  if (!existsSync(path)) return "";
-
-  const stats = statSync(path);
-  if (stats.isFile()) {
-    if (path.endsWith(".test.ts") || path.endsWith(".test.tsx")) return "";
-    if (!/\.(tsx|ts|css)$/.test(path)) return "";
-    return readFileSync(path, "utf8");
-  }
-
-  return readdirSync(path)
-    .map((entry) => readUiSource(join(path, entry)))
-    .join("\n");
-}

packages/ui/src/css.d.ts

@@ -1 +0,0 @@
-declare module "*.css";

packages/ui/src/fixtures.ts

@@ -1,132 +0,0 @@
-import type { UiDashboardPreview } from "./types";
-
-export const dashboardPreviewFixtures: Record<string, UiDashboardPreview> = {
-  primary: {
-    eyebrow: "Command Surface",
-    title: "Operations Console",
-    subtitle: "Capacity, latency, and queue health",
-    telemetry: [
-      metric("core-throughput", "Core Throughput", "mdi:server-network", 82, "ok"),
-      metric("edge-cache", "Edge Cache", "mdi:database-clock", 67, "neutral"),
-      metric("queue-depth", "Queue Depth", "mdi:tray-full", 74, "warning"),
-      metric("error-budget", "Error Budget", "mdi:chart-timeline-variant", 18, "danger"),
-      metric("build-latency", "Build Latency", "mdi:timer-sand", 23, "stale"),
-      metric("worker-load", "Worker Load", "mdi:cpu-64-bit", 55, "ok"),
-    ],
-    modules: [
-      {
-        id: "ambient-conditions",
-        title: "Local Node",
-        value: "21.4 C",
-        detail: "clear window",
-        icon: "mdi:weather-partly-cloudy",
-        severity: "ok",
-      },
-    ],
-    serviceGroups: [
-      {
-        id: "queue-workers",
-        title: "Queue Workers",
-        services: [
-          service("ingest", "Ingest", "Event intake pipeline", "mdi:arrow-collapse-down", "ok", "1.252 ms"),
-          service("scheduler", "Scheduler", "Timed job coordinator", "mdi:calendar-clock", "warning", "1.487 ms"),
-          service("archive", "Archive", "Cold storage transfer", "mdi:archive-arrow-down", "ok", "1.301 ms"),
-        ],
-      },
-      {
-        id: "regional-nodes",
-        title: "Regional Nodes",
-        services: [
-          service("north", "North", "Primary traffic cell", "mdi:access-point", "ok", "899 ms"),
-          service("west", "West", "Replica traffic cell", "mdi:access-point-network", "neutral", "1.118 ms"),
-          service("south", "South", "Maintenance window", "mdi:wrench-clock", "stale", "paused"),
-        ],
-      },
-      {
-        id: "control-plane",
-        title: "Control Plane",
-        services: [
-          service("identity", "Identity", "Access token exchange", "mdi:account-key", "ok", "721 ms"),
-          service("policy", "Policy", "Rules evaluation", "mdi:shield-check", "ok", "812 ms"),
-          service("audit", "Audit", "Event ledger writer", "mdi:text-box-search", "warning", "1.442 ms"),
-        ],
-      },
-    ],
-    statusItems: [
-      { id: "system", label: "System", value: "Nominal", severity: "ok" },
-      { id: "sync", label: "Last Sync", value: "2 minutes ago", severity: "stale" },
-      { id: "uptime", label: "Uptime", value: "14d 08h", severity: "neutral" },
-      { id: "refresh", label: "Refresh", value: "15s", severity: "neutral" },
-    ],
-    statusStripId: "dashboard-status",
-  },
-  secondary: {
-    eyebrow: "Support Surface",
-    title: "Support Desk",
-    subtitle: "Response, routing, and regional health",
-    telemetry: [
-      metric("response-window", "Response Window", "mdi:headset", 41, "ok"),
-      metric("ticket-load", "Ticket Load", "mdi:ticket-confirmation", 68, "warning"),
-      metric("handoff-drift", "Handoff Drift", "mdi:swap-horizontal", 11, "neutral"),
-      metric("coverage-gap", "Coverage Gap", "mdi:map-marker-alert", 7, "danger"),
-      metric("routing-warmup", "Routing Warmup", "mdi:progress-clock", 0, "loading"),
-    ],
-    modules: [
-      {
-        id: "shift-state",
-        title: "Shift State",
-        value: "covered",
-        detail: "static fixture",
-        icon: "mdi:clipboard-check-outline",
-        severity: "ok",
-      },
-    ],
-    serviceGroups: [
-      {
-        id: "regional-nodes",
-        title: "Regional Nodes",
-        services: [
-          service("desk-a", "Desk A", "Frontline queue", "mdi:monitor-dashboard", "ok", "843 ms"),
-          service("desk-b", "Desk B", "Escalation queue", "mdi:monitor-star", "warning", "1.204 ms"),
-          service("desk-c", "Desk C", "Overflow queue", "mdi:monitor-off", "unavailable", "offline"),
-        ],
-      },
-    ],
-    statusItems: [
-      { id: "desk", label: "Desk", value: "Covered", severity: "ok" },
-      { id: "handoff", label: "Handoff", value: "Pending", severity: "warning" },
-      { id: "routing", label: "Routing", value: "Manual", severity: "neutral" },
-    ],
-    statusStripId: "support-status",
-  },
-};
-
-function metric(
-  id: string,
-  label: string,
-  icon: string,
-  progress: number,
-  severity: UiDashboardPreview["telemetry"][number]["severity"],
-) {
-  return {
-    id,
-    label,
-    icon,
-    progress,
-    severity,
-    value: { kind: "percent" as const, value: progress },
-    detail: "static fixture",
-    sparkline: [12, 18, 15, 28, 24, progress],
-  };
-}
-
-function service(
-  id: string,
-  label: string,
-  description: string,
-  icon: string,
-  severity: UiDashboardPreview["serviceGroups"][number]["services"][number]["severity"],
-  detail: string,
-) {
-  return { id, label, description, icon, severity, detail };
-}

packages/ui/src/format.ts

@@ -1,43 +0,0 @@
-import type { UiMetricValue } from "./types";
-
-const byteUnits = ["B", "KB", "MB", "GB", "TB"];
-
-export function formatMetricValue(metric: UiMetricValue): string {
-  if (metric.kind === "text") return String(metric.value);
-
-  const value = typeof metric.value === "number" ? metric.value : Number(metric.value);
-  const precision = metric.precision ?? inferPrecision(value);
-  const unit = metric.unit ?? defaultUnit(metric.kind);
-
-  if (metric.kind === "bytes") return formatBytes(value, precision);
-  if (metric.kind === "percent") return `${value.toFixed(precision)}%`;
-  if (metric.kind === "temperature") return `${value.toFixed(precision)}°C`;
-  return `${value.toFixed(precision)}${unit ? ` ${unit}` : ""}`;
-}
-
-export function clampPercent(value = 0): number {
-  if (!Number.isFinite(value)) return 0;
-  return Math.max(0, Math.min(100, value));
-}
-
-function defaultUnit(kind: UiMetricValue["kind"]): string {
-  if (kind === "percent") return "%";
-  if (kind === "temperature") return "C";
-  if (kind === "latency") return "ms";
-  return "";
-}
-
-function inferPrecision(value: number): number {
-  return Number.isInteger(value) ? 0 : 1;
-}
-
-function formatBytes(value: number, precision: number): string {
-  let size = value;
-  let index = 0;
-  while (size >= 1024 && index < byteUnits.length - 1) {
-    size /= 1024;
-    index += 1;
-  }
-
-  return `${size.toFixed(precision)} ${byteUnits[index]}`;
-}

packages/ui/src/index.ts

@@ -1,50 +0,0 @@
-export { Badge } from "./components/foundation/Badge";
-export { Button } from "./components/foundation/Button";
-export { IconGlyph } from "./components/foundation/IconGlyph";
-export { IconButton } from "./components/foundation/IconButton";
-export { ProgressMeter } from "./components/foundation/ProgressMeter";
-export { Separator } from "./components/foundation/Separator";
-export { StatusBadge } from "./components/foundation/StatusBadge";
-export { ThemeToggle } from "./components/foundation/ThemeToggle";
-export { CornerBracketFrame } from "./components/frames/CornerBracketFrame";
-export { DashboardHeader } from "./components/frames/DashboardHeader";
-export { DashboardFrame } from "./components/frames/DashboardFrame";
-export { DiagonalStripeField } from "./components/frames/DiagonalStripeField";
-export { FooterCell } from "./components/frames/FooterCell";
-export { FooterStatusCell } from "./components/frames/FooterStatusCell";
-export { GridFrame } from "./components/frames/GridFrame";
-export { ModuleCard } from "./components/frames/ModuleCard";
-export { Panel } from "./components/frames/Panel";
-export { ScanlineField } from "./components/frames/ScanlineField";
-export { ServiceGroupPanel } from "./components/operations/ServiceGroupPanel";
-export { ServicePanel } from "./components/operations/ServicePanel";
-export { ServiceRow } from "./components/operations/ServiceRow";
-export { StatusStrip } from "./components/operations/StatusStrip";
-export { SystemState } from "./components/operations/SystemState";
-export { WeatherModule } from "./components/operations/WeatherModule";
-export { LineChart } from "./components/telemetry/LineChart";
-export { SignalTrace } from "./components/telemetry/SignalTrace";
-export { Sparkline } from "./components/telemetry/Sparkline";
-export { TelemetryCard } from "./components/telemetry/TelemetryCard";
-export { TelemetryGrid } from "./components/telemetry/TelemetryGrid";
-export { TelemetryStrip } from "./components/telemetry/TelemetryStrip";
-export { dashboardPreviewFixtures } from "./fixtures";
-export {
-  getNextUiTheme,
-  isUiTheme,
-  persistUiTheme,
-  resolveInitialUiTheme,
-  UI_THEME_STORAGE_KEY,
-} from "./theme";
-export type {
-  UiDashboardPreview,
-  UiLink,
-  UiMetricValue,
-  UiModuleBlock,
-  UiServiceGroup,
-  UiServiceRow,
-  UiSeverity,
-  UiStatusItem,
-  UiTelemetryCard,
-} from "./types";
-export type { UiTheme } from "./theme";

packages/ui/src/primitives/alert.tsx

@@ -1,76 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../utils"
-
-const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-action"
-      className={cn("absolute top-2 right-2", className)}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertTitle, AlertDescription, AlertAction }

packages/ui/src/primitives/badge.tsx

@@ -1,49 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-import { cn } from "../utils"
-
-const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }

packages/ui/src/primitives/button.tsx

@@ -1,67 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-import { cn } from "../utils"
-
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default:
-          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        icon: "size-8",
-        "icon-xs":
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot.Root : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }

packages/ui/src/primitives/card.tsx

@@ -1,103 +0,0 @@
-import * as React from "react"
-
-import { cn } from "../utils"
-
-function Card({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
-  return (
-    <div
-      data-slot="card"
-      data-size={size}
-      className={cn(
-        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn(
-        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-(--card-spacing)", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn(
-        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

packages/ui/src/primitives/progress.tsx

@@ -1,29 +0,0 @@
-import * as React from "react"
-import { Progress as ProgressPrimitive } from "radix-ui"
-
-import { cn } from "../utils"
-
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
-        className
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="size-full flex-1 bg-primary transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  )
-}
-
-export { Progress }

packages/ui/src/primitives/separator.tsx

@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Separator as SeparatorPrimitive } from "radix-ui"
-
-import { cn } from "../utils"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }

packages/ui/src/primitives/skeleton.tsx

@@ -1,13 +0,0 @@
-import { cn } from "../utils"
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }

packages/ui/src/stories/Badge.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Badge } from "../index";
-
-const meta = {
-  title: "UI/Badge",
-  component: Badge,
-  args: {
-    label: "Ready",
-    severity: "ok",
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

packages/ui/src/stories/Button.stories.tsx

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Button } from "../index";
-
-const meta = {
-  title: "UI/Button",
-  component: Button,
-  args: {
-    label: "Refresh",
-    icon: "mdi:refresh",
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {};
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-  },
-};

packages/ui/src/stories/CornerBracketFrame.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { CornerBracketFrame } from "../index";
-
-const meta = {
-  title: "UI/CornerBracketFrame",
-  component: CornerBracketFrame,
-  args: {
-    tone: "accent",
-    size: "md",
-  },
-} satisfies Meta<typeof CornerBracketFrame>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

packages/ui/src/stories/DashboardFrame.stories.tsx

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { DashboardFrame } from "../index";
-import { fullCompositionDashboard, secondaryDashboard } from "./story-data";
-
-const meta = {
-  title: "UI/DashboardFrame",
-  component: DashboardFrame,
-  args: {
-    dashboard: fullCompositionDashboard,
-  },
-} satisfies Meta<typeof DashboardFrame>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const FullComposition: Story = {};
-export const Secondary: Story = {
-  args: {
-    dashboard: secondaryDashboard,
-  },
-};

packages/ui/src/stories/DashboardHeader.stories.tsx

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { DashboardHeader } from "../index";
-import { moduleBlocks } from "./story-data";
-
-const meta = {
-  title: "UI/DashboardHeader",
-  component: DashboardHeader,
-  args: {
-    eyebrow: "Preview Surface",
-    title: "Operations Console",
-    subtitle: "Generic dashboard header",
-    module: moduleBlocks.compact,
-  },
-} satisfies Meta<typeof DashboardHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const WithModule: Story = {};

packages/ui/src/stories/DashboardOnePager.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { DashboardFrame } from "../index";
-import { fullCompositionDashboard } from "./story-data";
-
-const meta = {
-  title: "UI/DashboardOnePager",
-  component: DashboardFrame,
-  args: {
-    dashboard: fullCompositionDashboard,
-  },
-} satisfies Meta<typeof DashboardFrame>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const OnePager: Story = {};

packages/ui/src/stories/DiagonalStripeField.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { DiagonalStripeField } from "../index";
-
-const meta = {
-  title: "UI/DiagonalStripeField",
-  component: DiagonalStripeField,
-  args: {
-    tone: "accent",
-    density: "regular",
-  },
-} satisfies Meta<typeof DiagonalStripeField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

packages/ui/src/stories/FooterCell.stories.tsx

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { FooterCell } from "../index";
-import { statusItems } from "./story-data";
-
-const meta = {
-  title: "UI/FooterCell",
-  component: FooterCell,
-  args: {
-    item: statusItems.ok,
-  },
-} satisfies Meta<typeof FooterCell>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Operational: Story = {};
-export const Linked: Story = {
-  args: {
-    item: statusItems.action,
-  },
-};

packages/ui/src/stories/FooterStatusCell.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { FooterStatusCell } from "../index";
-import { statusItems } from "./story-data";
-
-const meta = {
-  title: "UI/FooterStatusCell",
-  component: FooterStatusCell,
-  args: {
-    item: statusItems.degraded,
-  },
-} satisfies Meta<typeof FooterStatusCell>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Warning: Story = {};

packages/ui/src/stories/GridFrame.stories.tsx

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { GridFrame, ModuleCard } from "../index";
-import { moduleBlocks } from "./story-data";
-
-const meta = {
-  title: "UI/GridFrame",
-  component: GridFrame,
-  render: (args) => (
-    <GridFrame {...args}>
-      <ModuleCard module={moduleBlocks.compact} />
-      <ModuleCard module={moduleBlocks.unavailable} />
-      <ModuleCard module={moduleBlocks.long} />
-    </GridFrame>
-  ),
-} satisfies Meta<typeof GridFrame>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Dense: Story = {
-  args: {
-    density: "dense",
-  },
-};

packages/ui/src/stories/IconButton.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { IconButton } from "../index";
-
-const meta = {
-  title: "UI/IconButton",
-  component: IconButton,
-  args: {
-    icon: "mdi:refresh",
-    label: "Refresh status",
-  },
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

packages/ui/src/stories/IconGlyph.stories.tsx

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { IconGlyph } from "../index";
-
-const meta = {
-  title: "UI/IconGlyph",
-  component: IconGlyph,
-  args: {
-    name: "mdi:server-network",
-    label: "Generic service",
-    size: "md",
-  },
-} satisfies Meta<typeof IconGlyph>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

packages/ui/src/stories/LineChart.stories.tsx

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { LineChart } from "../index";
-
-const meta = {
-  title: "UI/LineChart",
-  component: LineChart,
-  args: {
-    values: [12, 18, 24, 20, 36, 44],
-    severity: "ok",
-    label: "Generic trend",
-  },
-} satisfies Meta<typeof LineChart>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Trend: Story = {};

packages/ui/src/stories/ModuleCard.stories.tsx

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ModuleCard } from "../index";
-import { moduleBlocks } from "./story-data";
-
-const meta = {
-  title: "UI/ModuleCard",
-  component: ModuleCard,
-  args: {
-    module: moduleBlocks.compact,
-  },
-} satisfies Meta<typeof ModuleCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Compact: Story = {};
-export const Long: Story = {
-  args: {
-    module: moduleBlocks.long,
-  },
-};

packages/ui/src/stories/Panel.stories.tsx

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Panel, ServiceRow } from "../index";
-import { serviceRows } from "./story-data";
-
-const meta = {
-  title: "UI/Panel",
-  component: Panel,
-  render: (args) => (
-    <Panel {...args}>
-      <ServiceRow service={serviceRows.normal} />
-      <ServiceRow service={serviceRows.degraded} />
-    </Panel>
-  ),
-  args: {
-    title: "Generic Panel",
-  },
-} satisfies Meta<typeof Panel>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Dense: Story = {};

packages/ui/src/stories/ProgressMeter.stories.tsx

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ProgressMeter } from "../index";
-
-const meta = {
-  title: "UI/ProgressMeter",
-  component: ProgressMeter,
-  args: {
-    value: 72,
-    severity: "ok",
-    label: "Capacity",
-  },
-} satisfies Meta<typeof ProgressMeter>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Filled: Story = {};

packages/ui/src/stories/ScanlineField.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ScanlineField } from "../index";
-
-const meta = {
-  title: "UI/ScanlineField",
-  component: ScanlineField,
-  args: {
-    tone: "accent",
-    intensity: "medium",
-  },
-} satisfies Meta<typeof ScanlineField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

packages/ui/src/stories/Separator.stories.tsx

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Separator } from "../index";
-
-const meta = {
-  title: "UI/Separator",
-  component: Separator,
-  args: {
-    orientation: "horizontal",
-  },
-} satisfies Meta<typeof Separator>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Horizontal: Story = {};

packages/ui/src/stories/ServiceGroupPanel.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ServiceGroupPanel } from "../index";
-import { serviceGroups } from "./story-data";
-
-const meta = {
-  title: "UI/ServiceGroupPanel",
-  component: ServiceGroupPanel,
-  args: {
-    group: serviceGroups.mixed,
-  },
-} satisfies Meta<typeof ServiceGroupPanel>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Mixed: Story = {};

packages/ui/src/stories/ServicePanel.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ServicePanel } from "../index";
-import { serviceGroups } from "./story-data";
-
-const meta = {
-  title: "UI/ServicePanel",
-  component: ServicePanel,
-  args: {
-    group: serviceGroups.long,
-  },
-} satisfies Meta<typeof ServicePanel>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const LongList: Story = {};

packages/ui/src/stories/ServiceRow.stories.tsx

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ServiceRow } from "../index";
-import { serviceRows } from "./story-data";
-
-const meta = {
-  title: "UI/ServiceRow",
-  component: ServiceRow,
-  args: {
-    service: serviceRows.normal,
-  },
-} satisfies Meta<typeof ServiceRow>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Normal: Story = {};
-export const Warning: Story = {
-  args: {
-    service: serviceRows.degraded,
-  },
-};

packages/ui/src/stories/SignalTrace.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { SignalTrace } from "../index";
-
-const meta = {
-  title: "UI/SignalTrace",
-  component: SignalTrace,
-  args: {
-    tone: "accent",
-    orientation: "horizontal",
-  },
-} satisfies Meta<typeof SignalTrace>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Horizontal: Story = {};