feat(web): hydrate dashboard tiles independently #42

Merged

vince merged 3 commits from codex/independent-tile-hydration into main

2026-06-20 12:38:54 +02:00

vince commented

2026-06-20 12:23:13 +02:00

Owner

Summary

Return the dashboard shell without blocking on live datasource hydration.
Add per-tile hydration routes and client-side tile loading/patching for telemetry, services, modules, and status cells.
Preserve disabled-live-datasource behavior for stable e2e screenshots and direct tile requests.

Why

The initial dashboard render was blocked by /api/dashboard resolving all Prometheus, Uptime Kuma, weather, and status datasource work before React could show the dashboard. This removes the full-screen loading gate and lets each tile own its loading state.

Changes

/api/dashboard now returns the ready shell immediately with hydration capability metadata.
New /api/dashboard/tile/... endpoint resolves individual dashboard items.
React renders the shell, marks hydratable items as loading, and patches each item as its tile response returns.
Service tile hydration is scoped by service group so duplicate service ids do not cross-update.
Status cells, including auto-refresh, hydrate as individual tiles.
Direct tile requests respect DISABLE_LIVE_DATASOURCES=1.

Testing

bun install --frozen-lockfile
bun run --cwd apps/web test src/App.test.tsx src/server/routes/dashboard.test.ts
bun run check
bun run test:unit
bun run build
bun run build-storybook
PLAYWRIGHT_PORT=4174 PLAYWRIGHT_STORYBOOK_PORT=6008 bun run --cwd apps/web test:e2e
Manual Playwright verification on http://127.0.0.1:4173: 51 delayed tile requests, no Loading Dashboard intro text, 51 tile-level loading labels during hydration, and 0 loading labels after hydration settled.
Independent sub-agent re-review: no blocking findings.

Notes

The live path intentionally starts many independent tile requests. Runtime-health summary and system-status tiles still aggregate service health server-side, which is a performance follow-up rather than a merge blocker.

## Summary - Return the dashboard shell without blocking on live datasource hydration. - Add per-tile hydration routes and client-side tile loading/patching for telemetry, services, modules, and status cells. - Preserve disabled-live-datasource behavior for stable e2e screenshots and direct tile requests. ## Why The initial dashboard render was blocked by `/api/dashboard` resolving all Prometheus, Uptime Kuma, weather, and status datasource work before React could show the dashboard. This removes the full-screen loading gate and lets each tile own its loading state. ## Changes - `/api/dashboard` now returns the ready shell immediately with hydration capability metadata. - New `/api/dashboard/tile/...` endpoint resolves individual dashboard items. - React renders the shell, marks hydratable items as loading, and patches each item as its tile response returns. - Service tile hydration is scoped by service group so duplicate service ids do not cross-update. - Status cells, including auto-refresh, hydrate as individual tiles. - Direct tile requests respect `DISABLE_LIVE_DATASOURCES=1`. ## Testing - `bun install --frozen-lockfile` - `bun run --cwd apps/web test src/App.test.tsx src/server/routes/dashboard.test.ts` - `bun run check` - `bun run test:unit` - `bun run build` - `bun run build-storybook` - `PLAYWRIGHT_PORT=4174 PLAYWRIGHT_STORYBOOK_PORT=6008 bun run --cwd apps/web test:e2e` - Manual Playwright verification on `http://127.0.0.1:4173`: 51 delayed tile requests, no `Loading Dashboard` intro text, 51 tile-level loading labels during hydration, and 0 loading labels after hydration settled. - Independent sub-agent re-review: no blocking findings. ## Notes The live path intentionally starts many independent tile requests. Runtime-health summary and system-status tiles still aggregate service health server-side, which is a performance follow-up rather than a merge blocker.

vince added 1 commit 2026-06-20 12:23:14 +02:00