Examples › Vibe Tracks › Vibe Tracks · one track
Vibe Tracks · one track
A track's own page as a dashboard. The rail's Track picker is the dashboard variable: change it and the KPI cards, their history, the check runs and the evidence tables follow, through the links. Opens on Vibe Tracks' own track (its spec runs: python, storybook, browser, clank).
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.
# One track's page as a dashboard: pick the track in the rail (a select facet is Grafana's dashboard variable), and
# its KPI cards, their history, its check runs and its child tracks follow through the links. Opens on Vibe Tracks
# itself (its own spec runs). Data: ../vibetracks-dashboard (real). Grammar: docs/peps/0004-dashboards.md.
data: ../vibetracks-dashboard/tracks.json
filters: 'title == "Vibe Tracks"'
facets:
- { property: title, as: select, dropdown: true, label: Track }
properties:
title: { displayName: Track }
label: { displayName: KPI }
t: { displayName: When }
suite: { displayName: Suite }
pass_rate: { displayName: Pass rate, digits: 3 }
datasets:
tracks: ../vibetracks-dashboard/tracks.json
kpis: ../vibetracks-dashboard/kpis.json
runs:
data: ../vibetracks-dashboard/runs.json
facets:
- suite
- { property: t, as: date, label: Run date }
links:
- { from: kpis.track, to: tracks.id }
- { from: runs.track, to: tracks.id }
layout:
panels:
- { view: The track, w: 12, h: 2, toolbar: none }
- { view: KPIs, w: 12, h: 3 }
- { view: KPI history, w: 7, h: 5 }
- { view: Pass rate by suite, w: 5, h: 5 }
- { view: Check runs, w: 7, h: 5 }
- { view: Every KPI point, w: 5, h: 5 }
views:
- type: table
name: The track
order: [title, area, parent_title, health, state, headline_kpi, headline, kpis]
- type: kpi
name: KPIs
from: kpis
groupBy: { property: label }
sort:
- { property: t, direction: ASC }
kpi:
value: { property: value }
compare: { against: previous, better: better, neutral: 0.005 }
spark: { x: t, y: value }
- type: chart
name: KPI history
from: kpis
chart:
mark: { type: line, point: true }
encoding:
x: { field: t, title: null }
y: { field: value, title: null }
facet: { field: label, columns: 2 }
resolve: { scale: { y: independent } }
hover: { title: label, fields: [value, t, sha, role] }
- type: chart
name: Pass rate by suite
from: runs
select: suite
chart:
mark: { type: line, point: true }
encoding:
x: { field: t, title: null }
y: { field: pass_rate, title: Pass rate, scale: { domain: [0, 1] } }
color: { field: suite, title: Suite }
hover: { title: run, fields: [suite, passed, checks, channel, branch] }
- type: table
name: Check runs
from: runs
order: [t, suite, channel, passed, failed, skipped, checks, pass_rate, seconds, branch, sha]
sort:
- { property: t, direction: DESC }
- type: table
name: Every KPI point
from: kpis
order: [t, label, value, role, sha]
groupBy: { property: label }
sort:
- { property: t, direction: DESC }
fold: closed
// ../vibetracks-dashboard/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 · one track
A track's own page as a dashboard. The rail's Track picker is the dashboard variable: change it and the KPI cards,
their history, the check runs and the evidence tables follow, through the links. Opens on Vibe Tracks' own track
(its spec runs: python, storybook, browser, clank).
- **App:** Vibe Tracks
- **Replaces:** the track page's Overview KPI section and its Spec tab's run list (`vibetracks~/track.js`,
`kpi-panel.js`, the PEP 0012 history view's run list), for reading.
- **Shows:** a `select` facet with `dropdown: true` as Grafana's dashboard variable (the file's `filters:` picks the
track it opens on); one KPI card per KPI of the picked track with its history; the KPI history as small multiples;
pass rate per suite over time (click a suite to narrow the runs); a two-tab evidence panel.
- **Data:** `../vibetracks-dashboard/` (real; see that case).
- **Skin:** `skin.css`, Vibe Tracks' tokens.
The original UI it replaces
the track page's Overview KPI section and its Spec tab's run list (vibetracks~/track.js, kpi-panel.js, the PEP 0012 history view's run list), for reading.
What it shows
a select facet with dropdown: true as Grafana's dashboard variable (the file's filters: picks the track it opens on); one KPI card per KPI of the picked track with its history; the KPI history as small multiples; pass rate per suite over time (click a suite to narrow the runs); a two-tab evidence panel.
Data
../vibetracks-dashboard/ (real; see that case).
Skin
skin.css, Vibe Tracks' tokens.