Skip to content

docs: add an interactive results page for the Tic Tac Toe series - #12

Merged
Frank-Reichenbach merged 8 commits into
mainfrom
feature/results-page
Oct 21, 2026
Merged

docs: add an interactive results page for the Tic Tac Toe series#12
Frank-Reichenbach merged 8 commits into
mainfrom
feature/results-page

Conversation

@Frank-Reichenbach

@Frank-Reichenbach Frank-Reichenbach commented Oct 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Summary

The README of the Tic Tac Toe series shows one fixed cut per parameter. This adds a static page next to it that reads the series' results.csv and lets the reader filter and compare the 216 runs.

Changes

  • docs/results/2026-10-21-tic-tac-toe/index.html: vanilla JS and SVG, no dependencies.
    • Chips toggle each value of model, effort, profile and prompt; "Compare by" picks the grouping; "Show" toggles the charts. Default: all runs, all charts, by model.
    • Assessment passed: share of all runs whose game reached GitHub Pages and passed the assessment.
    • Context: one upright bar per group, median start plus median growth.
    • Output tokens and API-equiv: one chart each, every run as a dot and the group median as a bar.
    • A table with runs, passed, start, growth, output, API-equiv and duration follows the same filters.
    • The view is stored in the URL fragment, so a filtered view can be linked.
  • The series README links the page.

Decisions

  • Goal and assessment are one rate: the assessment only runs after the goal is reached, so "passed of all runs" covers both. Follow-ups are left out; they only kept the automation going.
  • Start and growth are stacked because together they make the context at the last call. The chart uses the medians of the table and the README; since medians do not add up, the bar shows no total, and the tooltip gives the median context at the last call.
  • Output tokens and cost show every run, because with three runs per configuration the spread is often larger than the differences between groups.
  • Duration only in the table: up to five runs ran in parallel, so it includes waiting for GitHub.
  • Charts are drawn at their card's pixel width and redrawn on resize, so text keeps its size on phones.
  • The page fetches the CSV instead of embedding it, so the README, the CSV and the page read the same file.

Tests

Checked in headless Chrome, light and dark, at 1280 and 390 px. Clicking chips filters, regroups, hides charts and shows an empty state when one parameter has no value left; keyboard focus stays on a toggled chip; every dot shows its tooltip on hover. The table matches the README tables for model, effort, profile and prompt; passed counts match assess_ok == True in the CSV.

Assisted-by: Claude Opus 5.5 (code generation)
Assisted-by: Claude Opus 5.5 (code review)

@Frank-Reichenbach
docs: add an interactive results page for the Tic Tac Toe series
08b2567 
The README tables show one fixed cut per parameter. The page reads the
series' results.csv and lets the reader filter runs by model, effort,
profile and prompt, pick the parameter to compare by, and choose which
metrics to chart. Rates are bars with counts; token, duration and cost
metrics plot every run with the median, so the spread of three runs
per configuration stays visible. A table below follows the same
filters. The view is kept in the URL fragment, so it can be linked.

docs/.nojekyll makes GitHub Pages serve docs/ as plain files.

Assisted-by: Claude Opus 5.5 (code generation)
@Frank-Reichenbach
fix(docs): keep focus, hover and rounding of the results page right
03a698a 
- Toggling a chip rebuilt the controls and dropped keyboard focus to
  the body; focus now returns to the chip.
- The median's focus stop, bar and label covered the dots near the
  median, so those showed no tooltip; they no longer take the pointer.
- Chart focus stops get an accessible name; the chart is a group, not
  an image, so they are reachable.
- Durations round .5 to even, as Python's round() in the README tables;
  five medians differed by 1 s.
- Muted text and the selected chip meet 4.5:1 contrast in light mode.

Assisted-by: Claude Opus 5.5 (code generation)
Assisted-by: Claude Opus 5.5 (code review)
@Frank-Reichenbach
docs: reduce the results page to assessment, context and cost charts
285220f 
Follow-ups only kept the automation going, and the goal is a
precondition of the assessment, so one rate remains: runs whose game
passed the assessment, of all runs. Start context and growth are one
stacked bar per group, since start + growth is the context at the last
call; each run's end context is a dot on it. Output tokens and
API-equiv cost are one scatter per group on shared axes, so the
trade-off between them is visible without a second y-axis. Duration is
only a table column. The table names the run count "Runs".

Charts are drawn at the width of their card and redrawn on resize, so
text keeps its size on small screens.

Assisted-by: Claude Opus 5.5 (code generation)
@Frank-Reichenbach
docs: show context as upright average bars, tokens and cost apart
6eabf24 
The context chart stacks average start and average growth upright;
averages add up, so the bar's top is the average context at the last
call. Output tokens and API-equiv cost are separate charts again, each
with one dot per run and the group median.

Assisted-by: Claude Opus 5.5 (code generation)
@Frank-Reichenbach
docs: align the zero lines of charts side by side
21c51a6 
Charts sit at the bottom of their card and the assessment and context
charts have the same height, so two charts in one row share the
baseline even when one card has a legend or a longer note.

Assisted-by: Claude Opus 5.5 (code generation)
@Frank-Reichenbach
refactor(docs): drop the unused horizontal bar shape
308c39b 
The context chart is upright now, so barPath only draws upright bars.
Value charts get more room on the right for the last median label,
which reached the card border below 390 px.

Assisted-by: Claude Opus 5.5 (code generation)
Assisted-by: Claude Opus 5.5 (code review)
@Frank-Reichenbach
chore(docs): remove .nojekyll
5d40845 
Nothing in docs/ needs to bypass Jekyll: index.html and results.csv
are copied as they are, and no file holds Liquid syntax.

Assisted-by: Claude Opus 5.5 (code generation)
@Frank-Reichenbach
docs: stack median start and growth in the context chart
f06d651 
The chart shows the same values as the table and the README. Medians
of start and growth do not add up to the median at the last call, so
the bar carries no total; the tooltip gives that median separately.

Assisted-by: Claude Opus 5.5 (code generation)
@Frank-Reichenbach
Frank-Reichenbach merged commit 5601c5e into main Oct 21, 2026
4 checks passed
@Frank-Reichenbach
Frank-Reichenbach deleted the feature/results-page branch October 21, 2026 20:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Frank-Reichenbach