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.

Vibe Trackskpitablechartpivota dashboard: 5 views of 3 linked datasets

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-*.