UX Catalogue¶

Every component below is rendered from real Dazzle DSL through the real render pipeline — the same code that produces a running app's HTML. Each card shows the live component and the DSL that produced it.

List¶

The workhorse table. Here it carries the outlier_on decorator — the latency_ms cell flags the statistical outlier (⚠ high) vs the displayed rows.

Name	Team	Status	Latency Ms	Error Rate	Target Ms
alpha	platform	healthy	42	0.1	50
bravo	platform	healthy	38	0.2	50
charlie	payments	degraded	44	1.4	50
delta	payments	healthy	40	0.3	50
echo	growth	healthy	46	0.2	50
foxtrot	data	critical	380⚠ high	7.2	50

cat_list:
  source: Box
  display: list
  sort: name asc
  outlier_on: latency_ms
  outlier_method: iqr
  empty: "No boxes"

Metrics¶

KPI tiles — scalar aggregates over the scoped set.

Total

42

Critical

7

Avg Latency

41

cat_metrics:
  source: Box
  display: metrics
  aggregate:
    total: count(Box)
    critical: count(Box where status = critical)
    avg_latency: avg(latency_ms)

Bar Chart¶

Distribution by a category — one bar per group. One scope-aware GROUP BY.

Platform

8

Payments

8

Growth

8

Data

8

cat_bar_chart:
  source: Box
  display: bar_chart
  group_by: team
  aggregate:
    count: count(Box)
  empty: "No boxes"

Comparison¶

Ranked league — rows ranked by a metric with inline bars + automatic outlier flag.

1. platform

12

2. payments

11

3. growth

10

4. data

9

5. infra

9

6. ml

1

6 rows0–12

cat_comparison:
  source: Box
  display: comparison
  group_by: team
  aggregate:
    total: count(Box)
  rank_by: total
  order: desc
  outlier_method: iqr
  empty: "No boxes"

Pivot Table¶

Cross-tab — counts across two dimensions (team × status).

Team	Status	Count
Platform	Healthy	8
Platform	Critical	1
Payments	Healthy	6
Payments	Degraded	2

4 rows

cat_pivot:
  source: Box
  display: pivot_table
  group_by: [team, status]
  aggregate:
    count: count(Box)
  empty: "No boxes"

Kanban¶

Board view — boxes grouped into status columns.

Healthy4

alpha

Team: platform

Latency Ms: 42

Error Rate: 0.1

Target Ms: 50

bravo

Team: platform

Latency Ms: 38

Error Rate: 0.2

Target Ms: 50

delta

Team: payments

Latency Ms: 40

Error Rate: 0.3

Target Ms: 50

echo

Team: growth

Latency Ms: 46

Error Rate: 0.2

Target Ms: 50

Degraded1

charlie

Team: payments

Latency Ms: 44

Error Rate: 1.4

Target Ms: 50

Critical1

foxtrot

Team: data

Latency Ms: 380

Error Rate: 7.2

Target Ms: 50

cat_kanban:
  source: Box
  display: kanban
  group_by: status
  empty: "No boxes"

Insight Summary¶

A grounded, deterministic narrative — scale + leader + outlier — over a grouped aggregate, with the underlying values cited so every claim is verifiable. No LLM (that's Slice 2).

Alert volume is concentrated in Platform, with ML unusually quiet — worth checking whether ML's pipeline is reporting.Based on: platform 20 · payments 19 · growth 18 · data 17 · infra 16 · ml 1confidence: mediumacross all teams · as of 2026-06-25 14:00 UTC

cat_insight:
  source: Box
  display: insight_summary
  group_by: team
  aggregate:
    count: count(Box)

List¶

Fixed-band RAG decorator — error_rate cells are coloured green/amber/red against author thresholds (WCAG-safe tone + icon + label). The deterministic sibling of the outlier decorator.

Name	Team	Status	Latency Ms	Error Rate	Target Ms
alpha	platform	healthy	42	0.1● good	50
bravo	platform	healthy	38	0.2● good	50
charlie	payments	degraded	44	1.4● watch	50
delta	payments	healthy	40	0.3● good	50
echo	growth	healthy	46	0.2● good	50
foxtrot	data	critical	380	7.2● critical	50

cat_rag:
  source: Box
  display: list
  rag_on: error_rate
  tone_bands:
    - at: 5
      tone: destructive
    - at: 1
      tone: warning
    - at: 0
      tone: positive

Line Chart¶

Time series — daily box volume. One date_trunc('day') GROUP BY.

5 buckets · peak 8

cat_line:
  source: Box
  display: line_chart
  group_by: bucket(opened_at, day)
  aggregate:
    count: count(Box)
  empty: "No boxes"

Radar¶

Polar profile — one spoke per team, value = box count for that team.

4 spokes · 1 series · peak 12

cat_radar:
  source: Box
  display: radar
  group_by: team
  aggregate:
    count: count(Box)
  empty: "No boxes"