Skip to content

HTML Challenge UX polish, UI scale, preview hardening#43

Merged
cryptopoly merged 10 commits into
stagingfrom
feature/html-challenge
May 9, 2026
Merged

HTML Challenge UX polish, UI scale, preview hardening#43
cryptopoly merged 10 commits into
stagingfrom
feature/html-challenge

Conversation

@cryptopoly
Copy link
Copy Markdown
Owner

@cryptopoly cryptopoly commented May 9, 2026

Summary

  • Replace fixed 1280x720 preview stage with a flexible shell so pages reflow at the actual rendered viewport like a resized browser; inject CSS reset + body-bg detection + zoom-to-fit + storage shim inside each iframe.
  • Add UI scale (85/90/95/100%) via zoom on .app-shell with viewport-fill compensation and a child-zoom cancel on the preview shell so iframes stay pixel-aligned.
  • Slot card: model name + badges share a single ellipsised row, Thinking is now a select inline with Temp / Seed / Randomize at a standard 110x32 size; per-slot Change Model on every manifested slot auto-retries to keep manifest + filename + rendered HTML consistent.
  • History dropdown: per-row trash icon (hover-reveal) replaces the standalone Delete button; deletes soft-move into a sibling .trash/ so folders are restorable from disk.
  • Setup panel: dropped duplicate "HTML Challenge" header + folder-path subtitle; Run / Cancel / Use Prompt + New Challenge + history search collapse into a single top action row, with the search input doubled in width.
  • Stream pane: fixed-height clamp(280px, 38vh, 520px) box that auto-scrolls when at tail; manual scroll up pauses tracking.
  • Backend: apply mx.random.seed above DFLASH / DDTree branches so seeds aren't silently dropped under speculative decoding; unlink previous filename on slot rerun when the model slug differs (path-traversal guarded) so folders don't accumulate orphan HTML.

Test plan

  • npx tsc --noEmit
  • npm test (1001/1001)
  • pytest tests/test_backend_service.py (79/79)
  • Manual: run a Pacman + Solar System challenge; verify preview fits without white strips at 85/90/95/100% scale, spacebar/enter route into iframe, Change Model on completed slot rebuilds the slot, deleted challenges land in <datadir>/html-challenges/.trash/.

🤖 Generated with Claude Code

cryptopoly added 10 commits May 5, 2026 19:53
Frontend
- Drop fixed 1280x720 preview stage; iframe fills frame-shell directly so
  pages reflow at the actual rendered viewport like a resized browser.
- Inject in-iframe scripts: localStorage/sessionStorage shim (so sandboxed
  pages that read storage on init don't abort), CSS reset with
  zero-specificity :where() rules, scrollbar styling, body/html bg
  detector that posts the computed colour back so the frame shell can
  match the page theme, and a content-bounds zoom-to-fit helper for
  pages with overflow:hidden bodies and oversized canvases.
- Add UI scale (85/90/95/100%) via CSS `zoom` on `.app-shell`, with
  matching layout-box oversize so the app keeps filling the viewport at
  scale<1 and a `zoom: 1/scale` cancellation on the preview shell so
  iframes stay pixel-aligned.
- Slot card: name + meta badges share a single row with ellipsis on long
  names, Thinking becomes a select that lives in the same row as Temp /
  Seed / Randomize, all controls share a 110x32 footprint.
- Stream pane: fixed-height clamp(280px, 38vh, 520px) so streaming
  output scrolls inside its own box; auto-scrolls when at tail.
- Setup panel: dropped duplicate "HTML Challenge" header + folder-path
  subtitle, moved Run / Cancel / Use Prompt and New Challenge + history
  search into a single top action row, search input wider.
- History dropdown: per-row trash icon (fades in on hover) replaces
  standalone Delete button. Confirms via window.confirm.
- Per-slot Change Model button on every manifested slot. Confirming the
  picker auto-retries the slot with an explicit override payload so
  manifest filename + metadata + rendered HTML stay consistent.
- Random seed per slot (`int32` range), Randomize button on each card.

Backend
- Apply `mx.random.seed` before DFLASH/DDTree branches so seeds aren't
  silently dropped under speculative decoding.
- Soft-delete challenges into a sibling `.trash/` directory instead of
  `shutil.rmtree`; restorable from disk, no third-party trash dep.
- After a slot rerun, unlink the previous filename when the new model
  slug differs (path-traversal guarded) so folders don't accumulate
  orphan HTML files keyed to old model names.

Tests
- Updated `test_html_challenge_accepts_per_model_thinking_settings` for
  the slimmed payload (kept `seed`, dropped `topP` / `diversityStyle` /
  `diversityMode` which were UI-only and removed).
@cryptopoly cryptopoly merged commit 1402737 into staging May 9, 2026
1 check passed
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