Examples › Vibe Tracks › Vibe Tracks · track overview dashboard
Vibe Tracks · track overview dashboard
Vibe Tracks' home as one dashboard: every real track with its headline KPI and history, the check runs rolled up
through child tracks, and the newest runs. Three linked datasets in one .base file; one rail for all of them; a click
on a card, a bar or a track narrows every panel.
The .base file and its data
Every tab above is one entry of this file; the views read these rows. ⋯ in the toolbar copies the current view as YAML.
# Vibe Tracks' track overview as one dashboard: every track with its headline KPI and history, the check runs rolled
# up through child tracks, and the newest runs. Three linked datasets from Zach's real owner bundle (source/build.py);
# grasping's figures stay out (SPEC §13). The grammar is docs/peps/0004-dashboards.md.
# Check it: node bin/data-ui.mjs check <this file>
data: tracks.json
facets:
- area
- health
- state
properties:
title: { displayName: Track }
parent_title: { displayName: Parent }
headline_kpi: { displayName: Headline KPI }
headline: { displayName: Headline }
checks_passed: { displayName: Passing }
checks_run: { displayName: Checks }
pass_rate: { displayName: Pass rate, digits: 3 }
value: { digits: 3 }
track_title: { displayName: Track }
label: { displayName: KPI }
t: { displayName: When }
kind: { displayName: Kind }
datasets:
tracks:
data: tracks.json
tree: { parent: parent }
rollup:
from: runs
latest: { by: t, per: suite }
values:
checks_passed: { property: passed, summary: Sum }
checks_run: { property: checks, summary: Sum }
pass_rate: { property: passed, summary: Ratio, per: checks }
kpis: kpis.json
runs:
data: runs.json
facets:
- kind
- { property: t, as: date, label: Run date }
links:
- { from: kpis.track, to: tracks.id }
- { from: runs.track, to: tracks.id }
layout:
panels:
- text: |
## Every track, computed from its runs
Headlines are each producer's own newest number, never recomputed. **Passing** and **Pass rate** are
rolled up: the newest run of each suite, summed through every child track (a parent shows its children's
checks). Click a card, a bar or a track to narrow the whole page; click a run for its details.
w: 12
- { view: Headlines, w: 12, h: 5 }
- { view: Tracks, w: 7, h: 5 }
- { view: Runs by track, w: 5, h: 5 }
- { views: [Latest runs, Pass rate by kind], title: Runs, w: 12, h: 5 }
views:
- type: kpi
name: Headlines
from: kpis
select: track
filters: 'level == 0'
groupBy: { property: track_title }
sort:
- { property: t, direction: ASC }
kpi:
value: { property: value }
compare: { against: previous, better: better, neutral: 0.005 }
spark: { x: t, y: value }
format: { digits: 3, compact: true }
- type: table
name: Tracks
select: id
tree: { parent: parent }
order: [title, health, state, headline_kpi, headline, checks_passed, checks_run, pass_rate]
- type: chart
name: Runs by track
from: runs
select: track
chart:
mark: bar
encoding:
y: { field: track_title, title: null, sort: -x }
x: { aggregate: count, title: Check runs }
color: { field: kind, title: Kind }
- type: table
name: Latest runs
from: runs
order: [t, track_title, suite, kind, passed, failed, checks, pass_rate, channel, branch, sha]
sort:
- { property: t, direction: DESC }
- type: pivot
name: Pass rate by kind
from: runs
groupBy: { property: track_title }
splitBy: [kind]
value: { property: pass_rate, summary: Average }
// tracks.json: 18 rows, 7 KB; the first 3
{
"id": "vibetracks-tracks",
"title": "Vibe Tracks tracks (real, Oct 26 2026)",
"titleProperty": "title",
"source": "Zach's Vibe Tracks owner bundle (~/.vibetracks/bundle, vt-state/1, generated 2026-10-26T21:06:09Z) and its producer folders under ~/vt/{zach,bam}/producers, read 2026-10-26; grasping's figures left out (SPEC §13)",
"properties": {
"title": {
"type": "text",
"width": 230
},
"parent": {
"type": "text",
"hidden": true
},
"parent_title": {
"type": "text",
"width": 140
},
"area": {
"type": "text",
"width": 130,
"display": "badge"
},
"children": {
"type": "number",
"width": 70,
"note": "child tracks"
},
"health": {
"type": "text",
"width": 80,
"display": "badge",
"colors": {
"green": 0,
"yellow": 4,
"red": 2
}
},
"state": {
"type": "text",
"width": 110
},
"priority": {
"type": "number",
"width": 60
},
"headline_kpi": {
"type": "text",
"width": 220,
"note": "the track's L0 KPI, as vt state names it"
},
"headline": {
"type": "number",
"width": 120,
"note": "the producer's newest headline value, never recomputed"
},
"headline_better": {
"type": "text",
"hidden": true
},
"kpis": {
"type": "number",
"width": 60,
"note": "KPIs in the track's catalogs"
}
},
"rows": [
{
"id": "kinsim",
"title": "Kinematic Sim",
"parent": "bam-robotics",
"parent_title": "BAM Robotics",
"area": "BAM Robotics",
"children": 0,
"health": "red",
"state": "Stale",
"priority": 1,
"headline_kpi": "Rungs green or done",
"headline": {
"value": 19,
"unit": "rungs",
"basis": "measured",
"asOf": "2026-10-05T02:03:09+00:00",
"source": "vt state headline · rungs_green"
},
"headline_better": "higher",
"kpis": 9
},
{
"id": "rig",
"title": "Sim to Real & Trajectory Tracking",
"parent": "bam-robotics",
"parent_title": "BAM Robotics",
"area": "BAM Robotics",
"children": 1,
"health": "yellow",
"state": "Needs you",
"priority": 2,
"headline_kpi": "Rack motors twinned",
"headline": {
"value": 0,
"unit": "stations",
"basis": "measured",
"asOf": "2026-10-26T04:24:49Z",
"source": "vt state headline · stations_twinned"
},
"headline_better": "higher",
"kpis": 39
},
{
"id": "grasping",
"title": "Grasping",
"parent": "bam-robotics",
"parent_title": "BAM Robotics",
"area": "BAM Robotics",
"children": 0,
"health": "red",
"state": "Error",
"priority": 3,
"headline_kpi": null,
"headline": {
"value": null,
"why": "private: grasping's figures stay out of the gallery (data-ui SPEC §13)"
},
"headline_better": null,
"kpis": 6
}
]
}skin.css, README.md
/* Vibe Tracks' skin: its own tokens (vibetracks~/tokens.css, Claude Desktop's, read 2026-10-25), then the
one block that maps them onto data-ui's --data-* (docs/SPEC.md §10). good / bad are its success and danger inks,
so a KPI delta reads green or red outside its neutral band, as Vibe Tracks' tiles do. */
.data-ui-skin {
--surface: #ffffff; --ink: #0b0b0b; --ink-2: #52514e; --alpha-1: rgba(11, 11, 11, .05); --line: rgba(11, 11, 11, .10);
--hover: rgba(11, 11, 11, .05); --accent: #2a78d6; --warn-ink: #734500; --success-ink: #2f7a4a; --danger-ink: #8e2626;
--font: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --radius: 6px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .data-ui-skin {
--surface: #1a1a1a; --ink: #f0efec; --ink-2: #c3c2b7; --alpha-1: rgba(255, 255, 255, .05); --line: #252525;
--hover: rgba(255, 255, 255, .06); --accent: #2a78d6; --warn-ink: #db9300; --success-ink: #6fbf8b; --danger-ink: #ec7e7e;
}
}
:root[data-theme="dark"] .data-ui-skin {
--surface: #1a1a1a; --ink: #f0efec; --ink-2: #c3c2b7; --alpha-1: rgba(255, 255, 255, .05); --line: #252525;
--hover: rgba(255, 255, 255, .06); --accent: #2a78d6; --warn-ink: #db9300; --success-ink: #6fbf8b; --danger-ink: #ec7e7e;
}
/* the mapping (SPEC §10's Vibe Tracks block, plus the KPI inks) */
.data-ui-skin {
--data-bg: var(--surface); --data-fg: var(--ink); --data-muted: var(--ink-2); --data-subtle: var(--alpha-1);
--data-border: var(--line); --data-rule: var(--alpha-1); --data-hover: var(--hover); --data-accent: var(--accent);
--data-warn: var(--warn-ink); --data-font: var(--font); --data-mono: var(--mono); --data-radius: var(--radius);
--data-good: var(--success-ink); --data-bad: var(--danger-ink);
}
# Vibe Tracks · track overview dashboard
Vibe Tracks' home as one dashboard: every real track with its headline KPI and history, the check runs rolled up
through child tracks, and the newest runs. Three linked datasets in one `.base` file; one rail for all of them; a click
on a card, a bar or a track narrows every panel.
- **App:** Vibe Tracks
- **Replaces:** the home's track rows and KPI tiles (`vibetracks~/views.js`, `cards.js`, `kpi-panel.js`)
and the hand-written roll-up in `vt state` (`rollup`), for reading; Vibe Tracks keeps computing its own state.
- **Shows:** `layout:` placing a text block, a KPI strip, a tree table, a bar chart and a tabbed runs panel; `datasets:`
and `links:` (tracks ↔ KPI points ↔ check runs) so one rail (area, health, state; run kind and date) filters all of
them; `select:` cross-filtering from the KPI cards, the tracks and the bars; a `rollup:` of each track's newest run
per suite through its children (Passing, Checks, Pass rate, drawn as derived); the drill-down peek on a run.
- **Data:** `tracks.json` (18 tracks), `kpis.json` (473 KPI points, newest 30 per L0/L1 KPI) and `runs.json` (86 check
runs: tests, checks, goldens, gates), written by `source/build.py` from Zach's Vibe Tracks owner bundle
(`~/.vibetracks/bundle`, vt-state/1) and its producer folders, read 2026-10-26. Real. Grasping keeps its row, but its
figures are left out (data-ui SPEC §13): its headline is "—" with the reason.
- **Skin:** `skin.css`, Vibe Tracks' tokens (Claude Desktop's) mapped onto `--data-*`.
The original UI it replaces
the home's track rows and KPI tiles (vibetracks~/views.js, cards.js, kpi-panel.js) and the hand-written roll-up in vt state (rollup), for reading; Vibe Tracks keeps computing its own state.
What it shows
layout: placing a text block, a KPI strip, a tree table, a bar chart and a tabbed runs panel; datasets: and links: (tracks ↔ KPI points ↔ check runs) so one rail (area, health, state; run kind and date) filters all of them; select: cross-filtering from the KPI cards, the tracks and the bars; a rollup: of each track's newest run per suite through its children (Passing, Checks, Pass rate, drawn as derived); the drill-down peek on a run.
Data
tracks.json (18 tracks), kpis.json (473 KPI points, newest 30 per L0/L1 KPI) and runs.json (86 check runs: tests, checks, goldens, gates), written by source/build.py from Zach's Vibe Tracks owner bundle (~/.vibetracks/bundle, vt-state/1) and its producer folders, read 2026-10-26. Real. Grasping keeps its row, but its figures are left out (data-ui SPEC §13): its headline is "—" with the reason.
Skin
skin.css, Vibe Tracks' tokens (Claude Desktop's) mapped onto --data-*.