Case ExplorerCase 02

Reconstruct a local image-compression comparison tool

Evidence and provenance

Frozen evidence (5)

evidence capture: desktop-loaded — **E01** desktop-loaded

evidence capture: desktop-quality-50 — **E02** desktop-quality-50

evidence capture: landing-desktop — **E03** landing-desktop

evidence capture: landing-mobile — **E04** landing-mobile

evidence capture: mobile-loaded — **E05** mobile-loaded

012026-08-30official source github.com
022026-08-30live squoosh.app
032026-08-30reference-capture

Evaluation matrix

Score composition

Submission contract, install/build and policy are gates. Contract v2 preserves the full score vector instead of hiding functional checks, visual regions, responsive behavior, workflows and preservation in one value.

global 0.50 · regions 0.00 · functional 0.10 · responsive 0.10
workflow 0.30 · preservation 0.00 · floor 0.33

Active score weights are divided by their total. 1.00

Visual checkpoints (2)

reference capture for desktop — Fig. 01desktop1440×900 · viewport · motion reduce

reference capture for mobile — Fig. 02mobile390×844 · viewport · motion reduce

Contract v2 evidence

2 workflows · 6 ordered steps · 0 weighted regions

Evidence	Contract	Weight
image-compression-desktop	upload-source upload ×2.0 → loaded-editor screenshot ×0.3 → quality-50 click ×1.5 → quality-result screenshot ×0.3	2.0
image-compression-mobile	upload-source-mobile upload ×2.0 → mobile-loaded screenshot ×0.3	1.0

Deterministic checks (5, total weight 3.0)

Check	Kind	Dimension	Target	Weight
source-upload-desktop	selector	functional	desktop	0.5
source-upload-mobile	selector	functional	mobile	0.5
squoosh-home	selector	functional	desktop	0.5
mobile-no-overflow	no_horizontal_overflow	responsive	mobile	1.0
mobile-samples	selector	responsive	mobile	0.5

Development diagnostics · 6 recorded attempts

5 / 6completed attempts

0infrastructure failures

0timeouts

23.2–96.6observed overall range

Most repeated deterministic miss: source-upload-desktop failed in 1 recorded grade.

case idmodelmodel requestedmodel resolution statusruntimestatusstatus

Date	Agent	Variant	Status	Visual	Func.	Overall	Time	Cost
2026-08-30	codex/unverified · high	requested-recovery-after-build-failure	completed	87.9	100.0	91.0	11m 02s	—
2026-08-30	claude_code/claude-opus-5 · high	oauth-recovered	completed	95.5	100.0	96.6	43m 58s	$19.38
2026-08-30	codex/unverified · high	—	completed	37.1	100.0	23.2	7m 46s	—
2026-08-30	codex/unverified · high	—	completed	88.6	33.3	84.9	9m 49s	—
2026-08-30	claude_code/claude-sonnet-5 · high	—	completed	70.9	100.0	78.4	16m 25s	$4.12
2026-08-30	codex/unverified · high	—	candidate failure	—	—	—	12m 07s	—

Candidate protocol preview

Access-restricted Pilot

The rendered Candidate prompt is published for inspection. The downloadable starter workspace, injected Skill files and executable Harness remain restricted, so this page does not claim that an external reader can reproduce a graded run.

Skills declared design-case-implementer

Rendered Candidate prompt

Runtime-agnostic prompt record.

Use the ReconBench candidate skills `design-case-implementer` in that order. Read those skill files if your workspace provides them, and otherwise follow the same process with your own tools.

You are the candidate in ReconBench task `squoosh-image-compression` (Reconstruct a local image-compression comparison tool).

Read `task/brief.md` and every other file under `task/` before changing code.
Implement the result only under `submission/`. The starter may be replaced when the task allows it.
Do not inspect parent directories, benchmark harness files, grader code, reference images, or any oracle material.
Do not call write endpoints belonging to a reference site. Keep forms, counters, and similar behavior local.

Dependencies install offline from a vendored cache that matches the starter lockfile.
Do not add dependencies; the install will fail and the network is not yours to use.

`tools/screenshot.mjs` renders your work in the browser build the evaluator uses:

node tools/screenshot.mjs --url http://127.0.0.1:4173/ --out shots/desktop.png \
--width 1440 --height 900 --full-page

Before finishing:
1. Run the requested build command.
2. Start the app and capture every target viewport in the task with that tool, then read the captures back.
3. Exercise the required interactions and inspect the console errors and blocked requests it reports.
4. Write `submission/submission.json` using the contract in the implementer skill.

The harness will evaluate the filesystem after this process exits. Do not leave a dev server running.

Prompt rendered by the Harness for Codex CLI.

Use $design-case-implementer.

You are the candidate in ReconBench task `squoosh-image-compression` (Reconstruct a local image-compression comparison tool).

Read `task/brief.md` and every other file under `task/` before changing code.
Implement the result only under `submission/`. The starter may be replaced when the task allows it.
Do not inspect parent directories, benchmark harness files, grader code, reference images, or any oracle material.
Do not call write endpoints belonging to a reference site. Keep forms, counters, and similar behavior local.

Dependencies install offline from a vendored cache that matches the starter lockfile.
Do not add dependencies; the install will fail and the network is not yours to use.

`tools/screenshot.mjs` renders your work in the browser build the evaluator uses:

    node tools/screenshot.mjs --url http://127.0.0.1:4173/ --out shots/desktop.png \
      --width 1440 --height 900 --full-page

Before finishing:
1. Run the requested build command.
2. Start the app and capture every target viewport in the task with that tool, then read the captures back.
3. Exercise the required interactions and inspect the console errors and blocked requests it reports.
4. Write `submission/submission.json` using the contract in the implementer skill.

The harness will evaluate the filesystem after this process exits. Do not leave a dev server running.

Prompt rendered by the Harness for Claude Code.

/design-case-implementer

You are the candidate in ReconBench task `squoosh-image-compression` (Reconstruct a local image-compression comparison tool).

Read `task/brief.md` and every other file under `task/` before changing code.
Implement the result only under `submission/`. The starter may be replaced when the task allows it.
Do not inspect parent directories, benchmark harness files, grader code, reference images, or any oracle material.
Do not call write endpoints belonging to a reference site. Keep forms, counters, and similar behavior local.

Dependencies install offline from a vendored cache that matches the starter lockfile.
Do not add dependencies; the install will fail and the network is not yours to use.

`tools/screenshot.mjs` renders your work in the browser build the evaluator uses:

    node tools/screenshot.mjs --url http://127.0.0.1:4173/ --out shots/desktop.png \
      --width 1440 --height 900 --full-page

Before finishing:
1. Run the requested build command.
2. Start the app and capture every target viewport in the task with that tool, then read the captures back.
3. Exercise the required interactions and inspect the console errors and blocked requests it reports.
4. Write `submission/submission.json` using the contract in the implementer skill.

The harness will evaluate the filesystem after this process exits. Do not leave a dev server running.

Not publicly reproducible in this Pilot

Starter workspace: access restricted
Injected Skills: access restricted
Harness command: withheld until a runnable public bundle is released
Sealed evaluator: never Candidate-visible

Appendix ATask brief — exactly what the candidate agent receives

Squoosh image compression

Reconstruct the frozen local image-compression experience shown in the supplied evidence. This is an image tool, not a marketing page. Match the upload landing at 1440x900 and 390x844, then reproduce the loaded comparison editor for the supplied fixture/reconbench-poster.png.

The landing combines the Squoosh mark, a large pink drop target, a blue lower band, and circular sample choices. The loaded desktop editor is a full-canvas before/after comparison with a central divider, floating zoom controls, an original summary at lower left, a compression panel at lower right, and round download controls. On phone the image fills the viewport while zoom controls move to the top and the original/compressed summaries become stacked bottom rails.

Implement these observable workflows entirely in the browser:

Upload fixture/reconbench-poster.png. The original summary reads 21.4 kB; the default compressed side is MozJPEG, quality 75, 8.61 kB, and 60% smaller. Match evidence/desktop-loaded.png and evidence/mobile-loaded.png.
On desktop, clicking the center of the quality range changes its value to 50; the compressed summary becomes 7.33 kB and 66% smaller. Match evidence/desktop-quality-50.png.

Expose a file input named Source image, its visible trigger as Image upload, the brand surface as Squoosh home, the landing choices as Sample images, the two loaded rails as Original summary and Compressed summary, the codec select as Compression method, and the quality range as Quality. Keep the file input usable even when the input itself is visually hidden. The compression method value is mozjpeg.

Keep every behavior local. Do not embed Squoosh, copy its source, use a screenshot as the implementation, call production APIs, load runtime assets from the network, or make a real download necessary for acceptance. You may use the supplied original fixture in the rendered comparison.

Run npm run build, then write submission/submission.json according to the supplied contract.