Skip to content

feat(viewer): drawer-based run page — compact layout, click-to-inspect#21

Merged
aktasbatuhan merged 1 commit into
mainfrom
feat/viewer-ux-drawer
Jun 4, 2026
Merged

feat(viewer): drawer-based run page — compact layout, click-to-inspect#21
aktasbatuhan merged 1 commit into
mainfrom
feat/viewer-ux-drawer

Conversation

@aktasbatuhan

Copy link
Copy Markdown
Member

A UX pass on the run page, addressing concrete bothers with the old layout (modeled on AlphaEvolve's denser, more intuitive view).

What changed

  • Chart + summary header. The trajectory chart now sits beside a compact summary panel (best score / steps / cost / AI calls / models), instead of spanning full width with dead space to its right. (fixes "too much empty space next to the graph")
  • Full-width step table, no dead column. The old fixed two-column [step list | detail] left a tall empty gap on the left whenever the detail ran longer than the list. The step list is now a single full-width table. (fixes "empty space on the left after the table ends")
  • Click-to-inspect side drawer. Clicking any step row slides in a right-side drawer with that step's notes + code diff + interactive solution viz, coupled in one view — no separate "see the solution" click. The viz loads in an inner <iframe> (so its <script>/document.currentScript and styles stay isolated) and height-syncs to the parent via postMessage. (the AlphaEvolve-style compact view; couples diff + viz)
  • Programs browser rows open the same drawer.
  • Back button at the top of every drilled-in page.
  • Task description in the run header, pulled from the task's initial_program.py module docstring (e.g. "auto — First autocorrelation inequality").

Implementation

  • New endpoints: …/step/{n}/detail (drawer HTML fragment) and …/step/{n}/viz (standalone per-step viz page for the inner iframe).
  • solution.py gains render_step (renders an arbitrary step's stored code in the sandboxed subprocess, cached under .viz_cache/step_{n}.html) and task_blurb.
  • Legacy …/step/{n} URL now 307-redirects to the run page at #step={n}, which the drawer auto-opens (deep links keep working).
  • All drawer JS is dependency-free, lives in the base template (so run + programs pages share it).

Deferred from this pass (flagged for later): viewing/editing evaluators, prompts, and human-steer .md files through the viewer.

Verification

  • Full suite green (337 tests). Tests updated for the fragment endpoints + drawer markup; added per-step render + task-blurb coverage.
  • Verified live: chart+summary header, full-width table, row→drawer with notes/diff/viz (iframe auto-sized to 681px), programs-page drawer, ✕/Esc close, back button, blurb, legacy redirect.

🤖 Generated with Claude Code

Restructures the run page for a denser, more intuitive experience
(AlphaEvolve-style), fixing the wasted space and clunky navigation:

- Chart now sits beside a compact summary panel (best score / steps /
  cost / calls / models) instead of spanning full width with dead space
  to its right.
- The step list is a single full-width table — no more tall empty column
  where the old fixed 2-column detail left a gap.
- Clicking any step row opens a right-side **drawer** with that step's
  notes + code diff + the interactive solution viz, coupled in one view
  (no separate "see the solution" click). The viz loads in an inner iframe
  (so its script/styles stay isolated) and height-syncs via postMessage.
- The programs browser rows open the same drawer.
- A back button sits at the top of every drilled-in page.
- The run header shows a one-line task description, pulled from the task's
  initial_program.py module docstring.

New endpoints: /step/{n}/detail (drawer fragment) and /step/{n}/viz
(standalone per-step viz page). solution.py gains render_step (renders an
arbitrary step's stored code, cached under .viz_cache/) and task_blurb.
The legacy /step/{n} URL now 307s to the run page at #step={n}, which the
drawer auto-opens.

Tests updated for the fragment endpoints + drawer markup; added per-step
render + task_blurb coverage. Full suite green (337 tests).
@aktasbatuhan aktasbatuhan merged commit b5f114e into main Jun 4, 2026
1 check passed
@aktasbatuhan aktasbatuhan deleted the feat/viewer-ux-drawer branch June 4, 2026 08:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant