# Combined UX and Accessibility Audit

## Audit Scope

Surface: protected v-harness GLM v1 (`v2.3.2`) workbench at the supplied Quick
Tunnel, pinned to commit `249c2bceedaf3c04f76ae3a899d91acbf8dc2641`.

Flow: authenticate; understand Gallery/config; select cases and concurrency;
inspect Database; compare target/render; inspect HTML/image/strategy debug;
inspect epoch Pipeline; inspect empty/error and narrow states.

No valid model run, upload, stop or deletion was performed in this audit. Those
operations are source-confirmed and supported by the prior isolated case9
canary.

## User Goal and Accessibility Target

Primary user goal: manage visual-reproduction cases and understand exactly what
one run and each epoch did, produced and failed on.

Accessibility target: the same flow should be discoverable and operable by
pointer, keyboard, zoom/reflow and assistive technology, with state changes
announced and modal context controlled. This audit identifies visible/DOM risks;
it does not claim WCAG conformance.

## Strengths

1. **Clear protected entry.** The login explicitly explains compute/artifact
   sensitivity before access (step 1), and wrong credentials have a local error
   state (step 2).
2. **Strong desktop task split.** Run inputs, live trajectory and current visual
   comparison occupy stable columns (step 3).
3. **Fast batch manipulation.** Selected cards, count and ×2 mode are visible in
   one compact strip (step 4).
4. **Version-preserving archive.** Database keeps repeated completed runs rather
   than replacing a single case output (step 5).
5. **Excellent same-run visual comparison.** Equal panes and synchronized scroll
   support high-resolution inspection (step 6).
6. **Evidence is not reduced to a score.** Debug distinguishes rendered DOM,
   image grounding and construction strategy (steps 7–9).
7. **Epoch verdicts retain their causes.** Pipeline keeps snapshot, tool groups,
   spatial issues and full visual questions (steps 10–11).
8. **Core page reflows without document overflow.** The three primary columns
   stack at 390 px (step 12).
9. **Explicit empty/error copy exists.** Invalid case and no-epoch states do not
   silently spin forever (steps 15 and 18).

## UX Risks

### Structural — highest impact

1. **Run identity is inconsistent across detail surfaces.** An archive card's
   comparison uses archive URLs, while its Debug/Pipeline actions use the base
   case and therefore newest live workspace. With multiple runs, the user can
   see evidence from a different run without warning.
2. **Single-case detail is fragmented.** Gallery starts a new run; Database opens
   only comparison; Debug and Pipeline are separate overlays; raw logs have no
   UI. There is no stable run dossier or deep link.
3. **“Comparison” means only target ↔ reproduction.** There is no run ↔ run,
   case ↔ case or epoch ↔ epoch comparison set despite the archive and epoch
   data already existing.
4. **Pipeline is a storyboard, not a process replay.** It cannot play, pause,
   step, scrub, filter or explain the connection between 361 events and 63
   frames.
5. **Execution and selection compete on one card.** A broad card click starts an
   expensive run; a small corner target selects it. Opening existing detail is
   not an option.
6. **Data management lacks operational context.** Database omits source version,
   model, timestamps, artifact health, batch, duration and error state.

### Interaction and feedback

7. **Zero-selection batch controls remain visible.** `.batchbar` explicitly sets
   `display:flex`, overriding its `hidden` attribute (steps 3 and 15).
8. **Hover hides critical actions.** Pipeline, Debug and destructive Delete are
   invisible until Database card hover (step 16).
9. **Escape closes more context than expected.** Independent listeners can close
   Debug+Database or Comparison+Pipeline in one key press.
10. **Initial comparison looks broken.** Empty images render broken alt content
    inside white panels before a case is active (steps 3, 12 and 15).
11. **Errors are dead ends.** The invalid-case state has no retry, back, detail or
    error classification (step 15). Missing-debug artifact leaves a broken image
    and empty panels (step 19).
12. **No visible logout.** A secure route exists, but users cannot discover it
    from the authenticated workbench.
13. **“Config” overpromises.** It is a read-only description, not a configurable
    picker.
14. **Derived-stat provenance is hidden.** Debug visibly corrects backend crop
    and position counts in the client, but the user only sees `accurate`, not a
    formal derived-data source/version.
15. **Partial-data states are underspecified.** During audit, `case1` carried a
    rejected result without a render; the Gallery can mark rejection while the
    detail surface has no artifact.

## Accessibility Risks

1. **Primary case actions are pointer-only.** Case cards and selection targets
   are non-focusable `div` elements with no role or accessible name. Keyboard
   users cannot start or select cases.
2. **Database cards are pointer-only.** The card has no tab stop; its action
   buttons use `display:none` until hover, so keyboard users cannot reach
   compare, Pipeline, Debug or Delete.
3. **Overlay semantics are absent.** Comparison, Database, Debug and Pipeline
   have no dialog role, modal state or labelled relationship.
4. **Focus management is absent.** Focus stays on Database behind its overlay,
   is not trapped, and has no explicit restoration when overlays close.
5. **Dynamic state is not announced.** Status, timer, tool-call count, event
   stream and gate changes have no `aria-live`/status/log semantics.
6. **Narrow Debug is functionally unusable.** At 390 px the evidence canvas is
   9 px wide and the toolbar clips from a 700 px intrinsic width (step 13).
7. **Header reflow damages hierarchy.** At 390 px brand badge, description and
   timer interleave visually (step 12).
8. **Icon-only hover actions are ambiguous.** Emoji text plus short `title`
   attributes are not robust action labels, particularly for Delete.
9. **Color carries state.** Tool groups, verdicts and issue types use color. Some
   also have text labels, which helps, but contrast and non-color redundancy
   were not comprehensively tested.
10. **Nested scroll regions multiply keyboard effort.** Gallery, event stream,
    comparison panes, Debug canvas/list, Pipeline strip and epoch detail each
    scroll independently without skip/navigation aids.
11. **Raw input is truncated.** Tool input is clipped to 220 characters in the
    live stream; the full log route is not discoverable from the UI.

## Opportunity Areas

### Structural opportunities

- Establish immutable source/case/run/epoch/event identities before combining
  screens.
- Add a stable run dossier that links overview, trajectory, verification,
  strategy, artifacts and logs.
- Make saved comparison sets first-class and declare their alignment mode.
- Split epoch summary from selected-epoch detail and event replay.
- Implement replay as deterministic HTML indexed over raw evidence, never as a
  replacement for it.

### Polish opportunities

- Hide batch controls when no selection exists or show a disabled state with
  explanation.
- Replace empty image elements with designed placeholders.
- Add visible Logout, explicit Open details and descriptive action labels.
- Manage overlays/focus as one stack; only the top layer should handle Escape.
- Add actionable error/empty states and maintain the user's prior context.
- Add responsive Debug modes: switch Canvas/List tabs or stack them at narrow
  widths rather than collapsing the canvas.

## Evidence Limits and Verification Gaps

- Screenshots cannot prove semantic reading order, screen-reader output,
  contrast ratios, motion preferences or full zoom behavior.
- No live running screenshot was captured because starting another model run
  solely for research was outside scope.
- Delete confirmation was observed in source but never accepted.
- Database empty copy was source-confirmed but not reached, because reaching it
  required deleting the only archived run.
- Quick Tunnel behavior reflects this deployment and timestamp, not a permanent
  hosting guarantee.

## Recommendations for a Later Merge Project

1. Freeze a normalized run/epoch/event schema and prototype against multiple
   versions of the same case plus multiple cases.
2. Prototype a single run dossier before porting individual overlays.
3. Reuse the strongest primitives—target/render comparison, dual Debug modes,
   strategy evidence and gate question bank—behind immutable run identity.
4. Prototype case/run comparison as a saved object, not a transient modal.
5. Prototype HTML replay with real mismatched counts (361 events, 63 frames, 143
   calls) so grouping and frame alignment are honest.
6. Make keyboard, focus, dialog and narrow-layout behavior acceptance criteria
   from the first prototype, not a cleanup pass.