Render dashboards from the validated model #7

New issue

Closed

opened 2026-06-18 16:12:39 +02:00 by vince · 0 comments

vince commented

2026-06-18 16:12:39 +02:00

Owner

Parent: #1

Design reference

Goal

Render the one-page dashboard entirely from the validated dashboard model, proving that content and layout data flow through the model instead of being hardcoded.

Scope

Implement the SvelteKit route load path for fetching the active dashboard model.
Map model sections, regions, telemetry cards, services, status bars, and datasource-backed values into visual components.
Use TypeScript types generated/inferred from the TypeBox model schema as the renderer contract.
Keep model-to-view mapping small and explicit; avoid global state libraries unless a concrete need appears.
Add empty, loading, and invalid-model states.
Add stable item IDs and DOM structure for testing, agent previews, and future editing tools.
Support configured ordering, grouping, density, and visibility rules from the model.
Add tests that render multiple fixture dashboards through the same components.

Acceptance criteria

The Dimension Lab fixture renders without adding Dimension Lab strings to component code.
A second fixture renders a different dashboard using the same renderer.
Missing optional content produces intentional empty states instead of broken layout.
Invalid model state is surfaced clearly and does not crash the app.
The rendered page keeps a one-page dashboard structure.
The renderer consumes typed model data and does not parse raw JSON/YAML directly.

Out of scope

Final visual polish beyond component integration.
Agent mutation endpoints.
Live datasource adapter implementation.

Parent: #1 ## Design reference ![System overview dashboard reference](https://git.dimensionlab.net/attachments/39e9396a-a4cc-4110-aadd-633bda94cd03) ## Goal Render the one-page dashboard entirely from the validated dashboard model, proving that content and layout data flow through the model instead of being hardcoded. ## Scope - Implement the SvelteKit route load path for fetching the active dashboard model. - Map model sections, regions, telemetry cards, services, status bars, and datasource-backed values into visual components. - Use TypeScript types generated/inferred from the TypeBox model schema as the renderer contract. - Keep model-to-view mapping small and explicit; avoid global state libraries unless a concrete need appears. - Add empty, loading, and invalid-model states. - Add stable item IDs and DOM structure for testing, agent previews, and future editing tools. - Support configured ordering, grouping, density, and visibility rules from the model. - Add tests that render multiple fixture dashboards through the same components. ## Acceptance criteria - The Dimension Lab fixture renders without adding Dimension Lab strings to component code. - A second fixture renders a different dashboard using the same renderer. - Missing optional content produces intentional empty states instead of broken layout. - Invalid model state is surfaced clearly and does not crash the app. - The rendered page keeps a one-page dashboard structure. - The renderer consumes typed model data and does not parse raw JSON/YAML directly. ## Out of scope - Final visual polish beyond component integration. - Agent mutation endpoints. - Live datasource adapter implementation.