nexus/mockups/run-control-option-2/design-qa.md

Design QA — Run Control Option 2

Comparison contract

• Source: reference/selected-option-2.png
• Source dimensions: 1487 x 1058
• Implementation: evidence/implementation-final-1440.png
• Implementation viewport: 1440 x 1024, CSS pixels, desktop density
• State: running, Executor selected, approval pending
• Full-view comparison: evidence/comparison-final.png
• Initial comparison: evidence/comparison-initial.png
• Scope: complete desktop viewport; no mobile state exists by design

The source and implementation have the same aspect ratio to rounding. The combined comparison normalizes both views to the same rendered dimensions.

Iteration record

The initial comparison identified P2 mismatches in shell proportions, the full-width status strip, inspector hierarchy, event density, and galaxy contrast. The implementation was corrected by:

• reducing the sidebar and matching the source workspace/inspector ratio;
• constraining the status strip and removing the large canvas border;
• replacing the generic Executor agent facts with source-aligned step details;
• fitting all six authoritative event rows into the visible rail;
• strengthening the galaxy field and inspector depth;
• preserving the selected source's blue-violet hierarchy and restrained glow.

Final assessment

• P0: none
• P1: none
• P2: none
• P3: the prototype names the owner Bao rather than the generated source's placeholder identity, and Review approval intentionally opens a detail dialog before the reversible mock decision.
• Layout: no clipping or unintended horizontal overflow at 1440 x 1024.
• Typography: bundled Manrope, Space Grotesk, and JetBrains Mono load locally.
• Accessibility: controls have accessible names, modal focus is restored, Escape closes dialogs, and focus-visible states are present.
• Browser console: no warnings or errors after the complete interaction path.

Interaction proof

Passed in the in-app browser:

1. Agent node to persistent detail inspector.
2. Event row to correlation/source detail.
3. OpenClaw session and OpenAI-via-OpenClaw routing details.
4. Approval review, approve, updated Executor state, and undo.
5. Ask Iris local authored response and Escape/focus restoration.
6. Pause/resume and stop/restart recovery.

Automated proof

• npm run test:sites: 4/4 passed.
• npm run build: passed; 1807 modules transformed.

Result: passed