OSS-Singularity/zcode-dispatch-observatory
OSS-Singularity/zcode-dispatch-observatory
Watch
1
0
Fork
You've already forked zcode-dispatch-observatory
 0
Code Issues Pull requests Projects Releases 137 Packages Wiki Activity Actions

Usage over time: Pinky token graph by Brain + modal info strip (v1.19.0) #43

Merged
ClaudiuSchuster merged 1 commit from oss-oo/observatory-neon-q-nkyq20260925 into main 2026-09-25 14:57:44 +00:00
Conversation 0 Commits 1 Files changed 5 +1018 -1
ClaudiuSchuster commented 2026-09-25 14:57:13 +00:00
Owner

Round Q — the usage graph the owner sketched off ZCode's own per-model usage chart, plus the modal title-right info strip.

The graph

  • Placement: full-width <details> section at the end of the page, open by default (showcase piece).
  • Rendering: hand-rolled vanilla-JS SVG — zero new dependencies (repo rule). Series = sessions: thin (1.3 px) lines in their LINEAGE color, alpha-packed, on a log token axis (the honest spread runs 2 k → 25 M per turn; anything linear flattens it — documented in the README).
  • Grouping: ONE plot with brain-ordered series + legend-separated groups was chosen over per-brain mini-panels (10–30 series read as a coherent color wash, and only one plot lets the global count area sit behind the lines it summarizes) — choice documented.
  • Addendum 1 — Pinky count over time: active sessions per bucket (turn start/end spans, running turns extended to now) rendered as a subtly filled + glowing mint AREA behind the token lines — a normalized overlay (picked over a true secondary axis: backdrop texture with exact numbers in the tooltip, never a second scale to parse). Tooltip on the area: "🐺 N Pinkies active · HH:MM". Cyberpunk licensed and spent tastefully.
  • Addendum 2 — hue-sorted brains: brain groups AND their series order by a deterministic hue sort of the root-family colors — legend, line order and highlight read as one rainbow spectrum.
  • Interactivity: hover tooltip (session, brain, time, in/out/reasoning/total; nearest point wins, area answers elsewhere); legend chips pin-highlight a family exactly like the table rows (hover wash, click pin, second click clears); time-window toggle 24 h / 3 d / 7 d (persisted); refresh rides the existing 3 s poll — the chart re-renders only on data/grid change so hover survives polling.
  • Honesty: completed turns only; a RUNNING session renders a breathing live dot (no fake 0-token points) and fired dispatches without a session appear as dashed time-axis markers (amber ⏳ / red 💀 presumed-dead) — exactly round P's strip semantics, never fabricated data.
  • API: GET /api/usage?hours=168 — per-session turn series (started_at, computed_total_tokens, in/out/reasoning split) enriched with lineage facts (root/parent ids + titles, family color), bucketed active counts, pending dispatches. Caps: 200 turns/session in window, 60 series (quietest terminal drop first — running never drops), buckets 5/15/30 min by window; hours clamped 1..720.

The modal info strip (addendum 3)

Right of the response-modal title, one non-wrapping row: 🧠 BRAIN badge (family-color accent) / 🐺 PINKY, clickable → parent title (jumps the modal to the parent's panel), context % (the steer line's math echoed, full numbers in tooltip), turns · total tokens (12 T · 1.2M tok), age — collapsing gracefully below 1000/560 px to badge + parent, with everything surviving in tooltips.

Evidence

  • Unit tests: 7 new (tests/test_usage_payload.py — completed-only points, distinct-session bucket math incl. end-exclusive/zero-length edge cases, lineage enrichment, caps preferring running, window-filtered pending) — 18 total green.
  • Pinned super-linter (repo lane set: BASH, BASH_EXEC, MARKDOWN, PYTHON_PYLINT, PYTHON_RUFF, YAML): all green.
  • CDP DOM probes + screenshots on a synthetic fixture (6 brains / 11 pinkies / 2 live / pending + presumed-dead markers) and the REAL session DB (60 series, 42 brains): hue-sort asserted programmatically, tooltips (point + area) asserted, legend pin asserted, window toggle asserted, modal strip geometry (right of title, one row) asserted, console clean; widths 1920 / 950 / 500 px including a REAL 500 px window load. Evidence: /tmp/pinky-usage-graph-evidence/.
  • README: new "Usage over time: Pinky tokens by Brain" section with design decisions + API example + docs/usage-graph.png glamour shot; response-modal docs cover the info strip.
Round Q — the usage graph the owner sketched off ZCode's own per-model usage chart, plus the modal title-right info strip. ## The graph - **Placement:** full-width `<details>` section at the end of the page, **open by default** (showcase piece). - **Rendering:** hand-rolled vanilla-JS SVG — **zero new dependencies** (repo rule). Series = sessions: thin (1.3 px) lines in their LINEAGE color, alpha-packed, on a **log token axis** (the honest spread runs 2 k → 25 M per turn; anything linear flattens it — documented in the README). - **Grouping:** ONE plot with brain-ordered series + legend-separated groups was chosen over per-brain mini-panels (10–30 series read as a coherent color wash, and only one plot lets the global count area sit behind the lines it summarizes) — choice documented. - **Addendum 1 — Pinky count over time:** active sessions per bucket (turn start/end spans, running turns extended to now) rendered as a subtly filled + glowing mint AREA behind the token lines — a **normalized overlay** (picked over a true secondary axis: backdrop texture with exact numbers in the tooltip, never a second scale to parse). Tooltip on the area: "🐺 N Pinkies active · HH:MM". Cyberpunk licensed and spent tastefully. - **Addendum 2 — hue-sorted brains:** brain groups AND their series order by a deterministic hue sort of the root-family colors — legend, line order and highlight read as one rainbow spectrum. - **Interactivity:** hover tooltip (session, brain, time, in/out/reasoning/total; nearest point wins, area answers elsewhere); legend chips pin-highlight a family exactly like the table rows (hover wash, click pin, second click clears); time-window toggle 24 h / 3 d / 7 d (persisted); refresh rides the existing 3 s poll — the chart re-renders only on data/grid change so hover survives polling. - **Honesty:** completed turns only; a RUNNING session renders a breathing live dot (no fake 0-token points) and fired dispatches without a session appear as dashed time-axis markers (amber ⏳ / red 💀 presumed-dead) — exactly round P's strip semantics, never fabricated data. - **API:** `GET /api/usage?hours=168` — per-session turn series (started_at, computed_total_tokens, in/out/reasoning split) enriched with lineage facts (root/parent ids + titles, family color), bucketed active counts, pending dispatches. Caps: 200 turns/session in window, 60 series (quietest terminal drop first — running never drops), buckets 5/15/30 min by window; hours clamped 1..720. ## The modal info strip (addendum 3) Right of the response-modal title, one non-wrapping row: **🧠 BRAIN** badge (family-color accent) / **🐺 PINKY**, clickable **→ parent title** (jumps the modal to the parent's panel), **context %** (the steer line's math echoed, full numbers in tooltip), **turns · total tokens** (`12 T · 1.2M tok`), **age** — collapsing gracefully below 1000/560 px to badge + parent, with everything surviving in tooltips. ## Evidence - Unit tests: 7 new (`tests/test_usage_payload.py` — completed-only points, distinct-session bucket math incl. end-exclusive/zero-length edge cases, lineage enrichment, caps preferring running, window-filtered pending) — 18 total green. - Pinned super-linter (repo lane set: BASH, BASH_EXEC, MARKDOWN, PYTHON_PYLINT, PYTHON_RUFF, YAML): all green. - CDP DOM probes + screenshots on a synthetic fixture (6 brains / 11 pinkies / 2 live / pending + presumed-dead markers) and the REAL session DB (60 series, 42 brains): hue-sort asserted programmatically, tooltips (point + area) asserted, legend pin asserted, window toggle asserted, modal strip geometry (right of title, one row) asserted, console clean; widths 1920 / 950 / 500 px including a REAL 500 px window load. Evidence: /tmp/pinky-usage-graph-evidence/. - README: new "Usage over time: Pinky tokens by Brain" section with design decisions + API example + `docs/usage-graph.png` glamour shot; response-modal docs cover the info strip.
Usage over time: Pinky token graph by Brain + modal info strip
All checks were successful
Checks / Functional checks (pull_request) Successful in 14s
Details Explain this check
7017f9e29c 
Round Q. A full-width usage graph closes the page (default open): every
session's per-turn tokens as thin lines in lineage color on a log axis,
brain groups hue-sorted into a rainbow flow, and the count of active
Pinkies as a glowing mint area (normalized overlay) behind the lines —
hand-rolled SVG, zero new dependencies. Hover tooltips carry the
in/out/reasoning split; legend chips pin-highlight a family like the
table rows; the window toggles 24 h / 3 d / 7 d and refresh rides the
poll cycle (re-render only on data change, hover survives). Honesty:
completed turns only; running sessions show live dots, fired dispatches
show dashed time-axis markers — never fake data. New GET /api/usage
(hours param, capped: 200 turns/session, 60 series, running never
drops). The response modal header gains a title-right info strip:
BRAIN/PINKY badge (family color), clickable parent reference, context %,
turns+tokens, age — collapsing gracefully at narrow widths.

Verified: 7 new unit tests (18 total green), pinned super-linter repo
lane set green, CDP DOM probes + screenshots on a fixture (6 brains,
pending + presumed-dead markers) and the real DB (60 series, 42 brains)
across 1920/950/500 px incl. a real 500 px window; console clean.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
OSS-Singularity/zcode-dispatch-observatory!43
No description provided.