genshin-assistant/design-qa.md

# Design QA

## Evidence Recorded At Validation Time

The image files listed below were ephemeral local test outputs. They were
intentionally removed during the 2026-07-11 workspace cleanup; the viewport,
runtime, interaction coverage, and findings documented here are the retained
durable record.

- Source visual truth: `outputs/packaged-live/streaming-ui-20-results-view.png`
- Rendered implementation: `outputs/ui-qa/packaged-live-stream20-results-ui-redesign.png`
- Full-view comparison: `outputs/ui-qa/comparison-scanner-live-before-after.png`
- Focused scanner comparison: `outputs/ui-qa/comparison-scanner-live-focus.png`
- Inventory modal post-fix evidence: `outputs/ui-qa/responsive-inventory-tech-1104-fixed.png`
- Remaining rendered views: `outputs/ui-qa/final-inventory.png`, `final-triage.png`, `final-builds.png`, `final-overlay.png`, and `final-diagnose.png`
- Viewport: 1304x821 CSS pixels for the matched live scanner comparison; additional reflow checks at 1104x681 and 652x410.
- State: both scanner comparison images show a completed, non-persisting 20-Artifact run with 20 parsed results and zero Review/errors. The revised implementation was captured from the packaged elevated runtime after live run `20260710-214406`.

## Primary Interactions Checked

- Scanner navigation and fresh empty result state.
- Scanoptionen open/close, initial focus, focus loop, scope selection, Artifact/row unit selection, and stepper controls.
- Inventory list roving focus, technical modal open/close and focus loop.
- Review deep-link into the filtered Inventory.
- Overlay open action and toast feedback.
- Diagnostics disclosures.
- Fresh packaged Settings-UI streaming run with result insertion motion, independent evaluation progress, 20 result rows, and no store writes.
- Renderer exception, `console.error`, and error-log checks on Scanner, Inventory, and Overlay: zero errors.

## Findings

No actionable P0, P1, or P2 findings remain.

- The Scanner result surface is now the dominant work region: approximately 634 px wide at the accepted desktop viewport versus approximately 388 px for the guide/capture surface.
- Readiness checks are compact inline status chips, the advanced disclosure no longer consumes a layout row, and Scanoptionen opens in a focus-trapped modal.
- Evaluation status is a flat progress strip rather than a nested card, leaving the result rail visibly primary during and after scanning.
- Collection-level technical evidence and GOOD interop no longer compete with core browsing or diagnostics status.

## Required Fidelity Surfaces

- Fonts and typography: the existing Inter/system sans stack, optical weights, heading hierarchy, line heights, truncation, and dense 12 px metadata treatment remain consistent. No clipped primary label was found in the accepted desktop or reflow screenshots.
- Spacing and layout rhythm: the 0.76/1.24 scanner split, compact readiness row, flat status strips, and modalized secondary controls create a clearer large-to-small hierarchy. Document dimensions matched the viewport for every accepted case.
- Colors and visual tokens: the implementation stays on the existing Galaxy tokens for void/nebula surfaces, violet/cyan accents, mint success, amber warning, borders, focus, shadows, and motion.
- Image quality and asset fidelity: existing Lucide icons and real Artifact crop previews are retained. No placeholder artwork, handcrafted SVG, emoji, or replacement asset was introduced.
- Copy and content: Scanner, Review, Builds, and safety language remain Artifact-first, read-only, and explicit about Review versus roll efficiency versus future Build-Fit.

## Comparison History

### Iteration 1

- P1: at 1104x681 the Inventory technical modal could render under the sidebar because it lived inside the animated view stacking context.
- Fix: render the modal through a `document.body` portal while retaining the shared focus trap and Galaxy modal styling.
- Post-fix evidence: `outputs/ui-qa/responsive-inventory-tech-1104-fixed.png`; the entire 934 px dialog is visible, centered, focus-contained, and within the viewport.
- P2: six pipeline stages in one row truncated useful technical descriptions even after moving them into the modal.
- Fix: use a three-column/two-row modal grid with two-line descriptions.
- Post-fix evidence: the same post-fix modal screenshot shows all six stages without accidental horizontal clipping.

### Iteration 2

- The matched live 20-result comparison found no remaining P0/P1/P2 hierarchy, clipping, density, or affordance issue.
- The packaged runner observed live capture/evaluation overlap, result slide-in motion, up to 9 visible result rows and 12 evaluated results while capture was still running, then reconciled 20/20 final rows.
- Focused regions were required because the readiness controls, evaluation strip, row density, and panel-width change are too small to judge reliably from a reduced full-app image alone.

## Residual Test Gaps

- A complete full-owned-inventory soak and non-16:9/Genshin-language profiles remain scanner-scope acceptance work, not design mismatches in this QA.
- The live runner records the mid-capture overlap and motion metrics, while the durable screenshot captures the matched completed state rather than a transient frame.

final result: passed