# Screen and Surface Inventory

## 1. Authentication Boundary

The deployment wrapper presents a centered dark login card before any upstream
route or asset is reachable. It names the version, explains that the service can
invoke models and expose artifacts, provides one password field and one primary
action, and identifies the H100DEV1/Quick Tunnel hosting shape.

States captured:

- Idle/focused login: screenshot 01.
- Incorrect password with cleared field: screenshot 02.
- Successful login: `303` to `/`; no visible logout control exists afterward.

## 2. Authenticated Desktop Shell

The primary page is a fixed top bar above a three-column workbench.

### Top bar

- Brand: `image2html` plus the `GLM · blind` badge.
- Runtime description: text-only GLM orchestration, perception tools, outer hard
  gate and port hint.
- Run status: timer, status badge, conditional Stop button and tool-call count.

### Left: run and data entry

- Read-only configuration rows for orchestrator, grounding and perception.
- Upload label backed by a hidden image file input.
- Test image Gallery with 45 cards in an internally scrolling, two-column grid.
- Each card has a thumbnail, case id, optional accepted/rejected mark, an entire
  card click target for starting a run and a smaller corner target for batch
  selection.
- Batch bar: count, serial/concurrency cycle, Run and Clear.
- Database entry with archived-run count.

The text `config` suggests selection, but this version displays configuration;
there is no model/config picker control.

### Center: live epoch loop

- Heading and contextual case hint.
- Conditional batch progress strip.
- Scrollable event stream.
- Idle state instructing the user to pick or upload.
- During a run, source inspection confirms epoch dividers, grounding snapshots,
  assistant text, numbered/grouped tool calls, nested tool results, hard-gate
  evidence and errors.

### Right: current comparison

- Target and reproduction figures.
- Debug, Pipeline and Fullscreen buttons, disabled until a run/render provides
  the required state.
- Conditional final card with verdict, elapsed time, epochs, tool calls,
  geometry breakages and failed visual rubrics.

At idle, both image elements exist without a source and show broken-image alt
content against white panels (screenshots 03 and 15).

## 3. Fullscreen Comparison

Screenshot 06 shows a 50/50 target ↔ reproduction workspace with sticky pane
labels. It supports:

- independent scrolling;
- default synchronized vertical scrolling;
- a Fit width toggle;
- Close/Escape.

This is an intra-run artifact comparison. It does not compare two cases or two
runs as first-class entities.

## 4. Database

Screenshots 05 and 16 show a full-viewport flat grid of completed archived runs.
Each card contains:

- archive display label such as `case9.1`;
- target/render thumbnail pair;
- accepted/rejected badge;
- whole-card comparison action;
- hover-only Pipeline, Debug and Delete actions.

There are no filters, search, sorting controls, version/source labels, timestamps,
model information, batch identity, tags, pagination or explicit detail link.
Delete has a JavaScript confirmation but no undo.

## 5. BBox Debug

The Debug overlay has a fixed toolbar and two-pane body: evidence image with box
overlay on the left, detailed list on the right.

### HTML bbox · rendered

Screenshot 07 exposes exact rendered DOM boxes, content, element kind, pixel
bounds, font/line metadata, hidden-text detection and relative/absolute
position badges. The summary seen in the audited case was 21 editable blocks,
0 hidden, 5 crops, 0 inpaint, 0 relative and 21 absolute.

### Image bbox · grounded

Screenshot 08 switches the same surface to model-estimated image grounding:
text and asset boxes, confidence/context and kind-based color.

### Strategy · hacks

Screenshot 09 maps every image used by final HTML to crop or inpaint, its bbox
and actual thumbnail. This is not a generic “debug log”; it directly explains
the reconstruction strategy visible in the artifact.

Labels can be hidden. Hovering/clicking a box highlights/scrolls to the matching
row and vice versa.

## 6. Pipeline / Per-Epoch Detail

Screenshots 10 and 11 show a horizontally ordered sequence:

1. Grounding truth card, when a grounding overlay exists.
2. One card per epoch with snapshot, PASS/REJECT, tool count, elapsed time and
   tool-group chips.
3. Scrollable spatial issue details.
4. Full visual question bank with pass/mismatch, expected answer, actual answer
   and reason.

Clicking a frame opens it against the target in the fullscreen comparison.
Screenshot 18 captures the explicit no-epoch state.

The surface is a static storyboard. It has no playback clock, play/pause,
scrubber, step navigation, speed, event-to-frame binding or narration of what
changed between adjacent frames.

## 7. Error and Partial-Data States

- Invalid case: red `ERROR` status and one text line in the stream (screenshot
  15), with no retry/back action.
- No epoch: explicit empty text in Pipeline (screenshot 18).
- Missing `code.html`: Debug shows the error in the toolbar but leaves a broken
  image and empty body (screenshot 19).
- Database empty: implemented as `No completed samples yet.` but not captured
  because deleting the sole archived run was outside the audit boundary.
- Run resume: source-confirmed through `/current`; not visible because no job or
  batch was active.

## 8. Responsive Behavior

At 390 px, the primary three columns stack without document-level horizontal
overflow (screenshot 12). The case grid remains two columns and scrolls within
the left panel. Costs:

- top-bar identity, badge and runtime description wrap awkwardly around timer;
- the full page is 2,074 px high before any live event content;
- current comparison comes after the tall event stream;
- Debug is not responsive: its right list reserves 380 px and reduces the
  evidence canvas to 9 px; its toolbar is 700 px wide and clipped (screenshot
  13);
- Pipeline intentionally becomes a 674 px horizontal strip within a 390 px
  viewport; the next card is partly visible as a cue (screenshot 14).

## 9. Surface Ownership Summary

| User question | Current surface |
| --- | --- |
| What can I run? | Gallery |
| What is running now? | Top status + live event stream + current comparison |
| What finished before? | Database |
| Does this artifact visually match its own target? | Fullscreen comparison |
| Where are DOM and grounded boxes? | Debug HTML/Image modes |
| Was the artifact built from exact pixels or reconstruction? | Debug Strategy mode |
| What did each epoch produce and why did the gate fail? | Pipeline |
| What raw logs/artifacts exist? | Backend routes only; no frontend surface |
| How do two cases/runs compare? | No first-class surface |
| How can I replay every step as an animation? | No first-class surface |