Restyle the demo screen as a technical report, and serve both surfaces from one workbench - #2
Merged
Merged
Conversation
The previous pass gave it a masthead, a 29px claim, an uppercase eyebrow over a tinted answer card with a 46px number, an accent-coloured table column, 12px radius pills and 1180px of width. Measured against the tools this category actually looks at, that is the wrong genre: a generated report is a document, not a landing page, and every one of those elements is chrome competing with the numbers. This restyles to the language measured off comparable open-source evaluation reports, chiefly EvalCore's generated report (same artifact type: self-contained, no JavaScript, gates a CI eval): body 14px/1.5, page title 22px, section headings 16px, table headers 11px uppercase letterspaced, one left-aligned 992px column, zero box shadows, no cards, no tinted panels, square corners, and exactly one accent colour. Sans carries human labels; monospace carries every machine value. Status is a word in a stroked badge, never a colour alone. Depth moves into two native <details>. Four things were added after verifying the restyle against the artifact, each because a reading of the page found the chart asserting something it did not say: * The curve is flat from 0.00 to 0.69 and then steps, landing exactly on the "in use" line, which reads as a rendering fault. It is not: below that threshold no case the model handles alone sits under the line, so raising it changes nothing. The chart now says so, with the threshold taken from the curve. * A cost axis truncated at its own minimum makes a 9.8% effect look like a cliff. The caption now states the truncation and the real size of the effect, both read from the data. * The confidence strip has its own unit, so it gets its own axis label; bar heights were reading as cost levels. * "synthetic log" was the smallest, greyest text on a page whose chip row says "905 decisions in production". It is now the same ink as the body. Verified: one screen at 1440x900 in light and dark (document height 900 in a 900px viewport, no horizontal overflow), 27 SVG text nodes with zero overlaps and zero clipped labels against the SVG box, four painted text colours per scheme (ink, muted, accent, fail) with the accent line and the fail badge distinct from the ink in dark mode, contrast measured in the DOM (14.24:1 body, 6.73:1 muted) rather than eyeballed. The guard test now defends the same properties against the new markup: one <h1>, both thresholds named in words, the CI band drawn, a failing gate showing FAIL, every figure computed, byte-equality with a fresh build, no <script> and no machine paths. Not verified: a 1280x800 window, print, and engines other than Chrome.
jeval has two presentation surfaces -- the one-argument screen and the full report -- and until now
reading both meant opening two files. This adds a third artifact that contains both: one
self-contained page, generated by one script, that a person can open to see everything.
uv run python examples/make-workbench.py examples/workbench.html
The page is a kicker, an index with one line per part, the screen, and the report folded in a
<details> behind a summary line. The report is examples/report-example.html read at build time and
placed in an inline frame through srcdoc, which is the only way to put a second stylesheet inside one
document without the two colliding -- and it keeps the report as the committed file rather than a
copy that can go stale. The frame is 900px and scrolls inside itself, so the report never throws the
reader to the bottom of the page.
Nothing is typed in by hand. The screen is rendered by make-demo-dashboard.py, imported as a file and
called the way its tests call it, so a change to the screen reaches the workbench for free. That
refactor is behaviour-neutral: demo-dashboard.html rebuilds byte-identical (verified by hash), so the
screen's own guard test still pins the same bytes.
The workbench adds exactly three lines above the screen -- the kicker and a two-line index -- which
keeps the argument inside the first 1440x900 viewport (measured: the last screen element ends at
896px in both light and dark). The index is not styled to disappear: a hairline above it and the
links carrying the weight, because three lines of identical grey read as front matter rather than as
an index.
Guarded by tests/test_workbench.py: byte-equality with a fresh build, one self-contained file, no
machine paths, the report genuinely embedded (proved with a string that exists only inside the
report, absent from the screen and from the chrome), both surfaces navigable in order, and the chrome
around the screen small enough to leave the argument in the first viewport.
The README described the report and the demo screen; it now also names examples/workbench.html, the page that serves both, and the examples README is rebuilt around a table of the three surfaces with their real rebuild commands and the order they have to run in (the workbench reads the report at build time, so the report has to be current first). The design language the surfaces share is written down rather than left to the next session to re-invent: body 14px/1.5, page title 20-22px, section headings 16px, table headers 11px uppercase, one ~930-1000px left-aligned column, square corners, no cards or shadows or pills except a status badge carrying the word, sans for labels and monospace for machine values, a strict colour budget that is re-chosen for dark mode so the hues stay separable. Those numbers are measured off comparable open-source evaluation reports, chiefly EvalCore's generated report, which is the same artifact type: generated, self-contained, no JavaScript, gating a CI run.
rlaope
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
jeval had two presentation surfaces and no single place to see both. This PR carries two changes.
The demo screen was restyled from a landing page into a technical report, in the language measured off comparable open-source evaluation reports (chiefly evalcore.cc): body 14px, page title 22px, section headings 16px, one 992px left-aligned column, square corners, zero shadows, no cards or tinted panels, monospace for every machine value, status as a word in a badge rather than a colour. Four honesty fixes rode along: the flat-to-0.69 plateau now says why it is flat, the truncated cost axis states its truncation and the real 9.8% effect, the confidence strip gets its own axis label, and synthetic is no longer the greyest text on the page.
examples/workbench.html serves BOTH surfaces in one self-contained page: the screen inside the first 1440x900 viewport (measured 896px) and the full report folded in a details element behind a srcdoc frame read at build time, so the report keeps its own stylesheet and can never go stale.
Verified: 545 tests pass, ruff and mypy clean; two workbench builds byte-identical; 0 script tags, 0 external references, 0 machine paths; the report embedding is proved by a string that exists only inside the report; rendered at 1440x900 in light and dark with the argument in the first viewport and no clipped or overlapping SVG text. tests/test_workbench.py guards all of it, including a deliberate-red proof that the byte-equality assertion can fail.
Correction: an earlier revision of this description claimed 549 tests; the real count at that commit was 538.