design-qa.md

Findings

• No P0/P1/P2 findings remain for the implemented Goal panel pass.

Open Questions

• The reference image shows the Goal workspace consuming the full app width. The live product surface is the OpenCode Desktop session sidebar beside the transcript, per the OpenGoal spec reconciliation. The implementation keeps that host constraint and maps the same four-zone console into the available panel.

Implementation Checklist

• Source visual truth path: C:\Users\zerop\Desktop\d282019a-975f-4401-9577-625aa18a4773.png
• Implementation screenshot path: C:\Users\zerop\Development\opencode-source\electron-goal-console-final-20260617.png
• Chain empty-state screenshot path: C:\Users\zerop\Development\opencode-source\electron-chain-builder-clean-20260617.png
• Chain row screenshot path: C:\Users\zerop\Development\opencode-source\electron-chain-builder-with-action-fit-20260617.png
• Viewport: Electron renderer at 1869x967.
• State: OpenCode Desktop dev app, dark mode, OpenGoal session, Goal tab selected.
• Full-view comparison evidence: Electron screenshot shows Last Result, Set Goal, Chain Builder, Action Library, and Action Editor zones with the reference red/blue/violet/green boundaries.
• Focused region comparison evidence: DOM/computed-style inspection verified bounded Action Library and Action Editor scroll containers, filled output status badge styling, compact 36px action-library rows, and a Chain Builder row that fits without horizontal overflow.
• Patches made since previous QA: removed fake Chain Builder dashed/drop-zone affordances, replaced them with a real execution-boundary empty state, tightened non-empty chain rows, added explicit output-card tone styles, and clamped permission approval prompts.

Follow-up Polish

• P3: If the host product later allows the Goal tab to take over the full session width, widen the four-zone console to more closely match the reference proportions.
• P3: Per-action OpenCode skill/agent selection is not exposed because the current chain engine schema does not accept a per-step skill/agent field; adding that requires a backend schema and runner change, not just UI.

final result: passed

---

Mission Control UX Audit Addendum — 2026-06-27

Current evidence

• Electron screenshot before rail fix: C:\Users\zerop\AppData\Local\Temp\opencode-electron-goal-audit-live.png
• Electron screenshot after rail fix: C:\Users\zerop\AppData\Local\Temp\opencode-electron-goal-audit-rail-bounded.png
• Electron screenshot after radius consistency fix: C:\Users\zerop\AppData\Local\Temp\opencode-electron-goal-radius-consistency.png
• Electron screenshot after category/text-fit fix: C:\Users\zerop\AppData\Local\Temp\opencode-electron-goal-category-fit-20260627.png
• Electron screenshot after help-popover affordance fix: C:\Users\zerop\AppData\Local\Temp\opencode-electron-help-popover-20260627.png
• Electron screenshot after titlebar hit-target fix: C:\Users\zerop\AppData\Local\Temp\opencode-electron-titlebar-hit-targets-20260627.png
• Electron screenshot after Goal editor control floor fix: C:\Users\zerop\Development\opencode-source\electron-goal-after-mouse-click.png
• Electron screenshot after current-step runtime context fix: C:\Users\zerop\Development\opencode-source\output\playwright\desktop-goal-current-step-runtime-20260627.png
• Root cause fixed in this pass: the right Actions rail was an unbounded grid. Electron measured goal-method-library-rail at 1151px tall in a 900px window, pushing the editor below the visible Goal workspace. The rail is now viewport-bounded at 756px in the same Electron window, with the library and editor scrolling internally.
• Visual consistency defect fixed in this pass: live Electron computed goal-method-row at 0px border radius while adjacent editor/status cells computed at 6px. Bordered Goal controls now use explicit radius tokens (rounded-sm, rounded-md, or rounded-lg) instead of the generic rounded fallback.
• Text-fit defect fixed in this pass: the Actions category strip forced eight cells in one row and clipped Custom to Cust... at 1440x900. The strip now uses auto-fit columns; Electron measured every category tab at 55px wide, 24px tall, 6px radius, and clipped: false.
• Missing-affordance defect fixed in this pass: the dev-only floating help button opened a placeholder Lorem Ipsum popover, making the control visibly unexplained. It now uses localized Mission Control help copy, a bounded 320px responsive panel, an 8px radius, a visible outline, stronger body-copy contrast, and localized close/help labels. Electron measured the panel at 307x185 inside a 1440x900 viewport with overflowsViewport: false.
• Disabled-state defect fixed in this pass: the Home Actions Open Goal button could be disabled with no visible reason. The Home surface now explains that the action appears when a session has an active goal and points the operator to start or resume a session to set one.
• Accessibility defect fixed in this pass: a live Electron control scan found unnamed V2 titlebar icon buttons for normal session-tab close controls and the Home navigation icon. The titlebar now uses localized common.closeTab labels for normal and draft tab close buttons, plus the localized Home label for the icon-only Home link.
• Target-size polish fixed in this pass: a live Electron Home scan at 1440x900 found project-row quick actions (New session, More options) rendering as 20x20 controls. These controls now use the shared IconButtonV2 large size (28x28) with consistent spacing, keeping the dense project tree readable without changing the row workflow.
• Field-label defect fixed in this pass: a live Electron Goal scan on a restored session confirmed the Goal tab opened by default, then found visible Goal inputs without direct accessible names in the chain target/verification fields and reusable action editor. Those fields now carry localized aria-labels so the visible operator labels also map cleanly to assistive technology.
• Goal action target-size polish fixed in this pass: the same live Goal scan found inline Add/Edit/Move/Remove command buttons at 22px tall, with Move also 22px wide. These now use 24x24 targets while preserving the dense Actions rail layout.
• Transcript affordance defect fixed in this pass: a live Electron scan found the floating jump-to-latest transcript control had no accessible name. It now uses the existing localized session.messages.jumpToLatest label for both aria-label and title.
• Titlebar target-size defect fixed in this pass: live Electron measured normal and draft tab close buttons at 20x20; simply changing the button size was not enough because the close-button overlay strip still compressed the normal control to 20px wide. The titlebar now uses normal V2 close buttons and a wider 36px overlay strip, and Electron measured all visible close buttons at 24x24 with no visible control below 24px on either axis.
• Goal command text-fit defect fixed in this pass: live Electron measured the reusable action editor's compact command buttons (New, Save action, Duplicate, Delete) with vertical text overflow. Those buttons now remove the extra vertical padding and use a 13px line box inside the 24px control, eliminating overflow in the measured Desktop runtime.
• Side-panel tab target-size defect fixed in this pass: live Electron measured the Review/Goal tab buttons at 22px tall because the compact review-panel wrapper was 24px but its borders left the actual trigger at 22px. The shared compact review-panel tab CSS now keeps the trigger itself at a 24px minimum, and Electron measured both tab buttons at 24px high after reload.
• Goal editor visual-floor defect fixed in this pass: live Electron measured the chain target input, standalone shell command input, master budget inputs, agent/model selects, limit inputs, and skill selector at 20px tall in the Goal editor. These controls now use a 24px visual floor, and the mounted Goal dock scan reports goalTiny: [], goalOverflow: [], missingNames: [], with all visible Goal inputs/selects measured at 24px tall.
• Default Goal restore verified in this pass: from the Electron Home surface, clicking the persisted Repo orientation session opens the session with the Goal side tab selected, goalVisible: true, and reviewVisible: false.
• Home Active Goals empty-state defect fixed in this pass: the Active Goals metric now remains clickable after goal data settles even when the count is 0. Live Electron measured the settled card as disabled: false, opened a dialog titled Active Goals, and rendered No active goals right now. Start or resume a session to set one. with no missing names, no tiny controls, and no text overflow in the dialog scan.
• Run Order row compression defect fixed in this pass: live Electron add/delete UAT found chain row move/remove buttons compressed to 19-21px wide inside the 383px Run Order pane. The row now uses a three-column base grid with wrapped metadata and non-shrinking 24px command buttons; live Electron measured every row button at 24x24, no bad controls, no row overflow, and deleting all three added rows left source:"draft", steps:[] after the poll settle window instead of rehydrating stale chain actions.
• Runtime detail-panel compression defect fixed in this pass: a live Electron active-chain fixture reproduced the smashed Steer/Handoff panels, with each input only 103px wide and Save for handoff clipped (scrollWidth 108 > clientWidth 103). The inline panels now wrap the text field in a full-width grid item and use a stable two-column action row; post-fix Electron measured Steer/Handoff inputs at 326px, wrappers at 328px, buttons at 161px, and badPanelControls: [].
• Transcript copy target-size defect fixed in this pass: live Electron measured shell-output Copy controls at 20x20 in visible transcript blocks. The shared shell-output copy action now uses the normal 24px icon-button target, and post-fix Electron measured every mounted bash copy button at 24x24 with badVisibleControls: [].
• Home metric context defect fixed in this pass: live Electron Home showed zero-count cards with active-state labels (Live Sessions 0 working now, Active Goals 0 running). The metric strip now uses count-aware detail copy; post-fix Electron measured Live Sessions 0 idle and Active Goals 0 none running, with all metric cards 193x92 and bad: [].
• Current-step runtime context defect fixed in this pass: the running-chain current-step strip previously showed the active step title and index but not the runtime route, forcing operators to infer agent/model/skills/completion rule from editor state. It now renders wrapped runtime chips inside the current-step strip. A live Electron active-chain fixture measured Agent build, Model OpenAI / GPT-5.4, Skills 2 skills, and Completion Completes when the agent reports completion inside a 291.5x40 runtime region with badVisibleControls: []; the fixture restored the original .opencode/.goal-state.json and .opencode/.goal-chain.json afterward.
• Goal radius consistency defect fixed in this pass: remaining oversized rounded-xl/rounded-2xl surfaces in the Goal shortcut overlay and recent-run history section were normalized to the same 8px-or-less console radius system. Live Electron measured the shortcut overlay at radius: 8px, 288x176, and overflowsViewport: false; the Goal panel source guard now rejects rounded-xl and rounded-2xl.
• Action editor instruction fit defect fixed in this pass: live Electron visible-control scan found the reusable-action Instruction textarea internally clipped (scrollHeight 75 > clientHeight 54). The editor prompt field now has a local 76px floor; post-fix Electron measured 102 visible Goal controls with bad: [], and the Instruction textarea at 362x76 with scrollHeight === clientHeight.

Chain stop audit evidence

• Desktop Stop/Pause path: packages/app/src/pages/session/goal-panel-actions.ts collects session.children, aborts children before parent, executes clear/pause, then aborts the tree again so late child turns cannot keep driving the parent.
• Desktop bridge path: packages/opencode/src/server/routes/instance/httpapi/handlers/experimental.ts routes clear, pause, and chain through runGoalControlStateFile; this is the deterministic bridge used by /experimental/goal/control/goal_control.
• Chain cancellation path: packages/autogoal/src/control-state.ts deletes .opencode/.goal-chain.json after a successful Desktop bridge clear, unless a matching handoff must preserve it for claim.
• Late evaluation guard: packages/autogoal/src/server.ts re-reads the goal under withStateLock and requires the same goal id plus status === "active" before marking achieved or advancing a chain.
• Chain advance guard: packages/autogoal/src/goal-chain.ts refuses to advance when the current state is cleared or no longer belongs to the chain.
• Regression coverage: packages/autogoal/test/control-state-bridge.test.mjs covers "bridge: clear cancels the active chain artifact so a stopped run cannot revive"; packages/autogoal/test/goal-chain.test.mjs covers advanceGoalChain refusing a cleared chain state.

Expanded UX punch list to keep auditing

• Missing affordances: every button/control needs an obvious purpose through label, icon, title, disabled reason, or nearby state.
• Live orchestration visibility: the running view needs clear "current step / exact state right now" context for active, paused, stalled, terminal, and child-session states.
• Operator instructions and context: screens need enough inline context to explain what the current surface does, what the next safe action is, and why blocked/busy controls are unavailable.
• Current-step prominence: the running chain view should expose the active step, model/agent target, limits/budget, child-session status, elapsed time, and last update without making the operator hunt through the transcript.
• Feature completeness: test whether an operator reasonably expects a visible control/status/history surface and whether it is missing, hidden, or only implied by code.
• Control justification: each button, menu, badge, panel, and display surface should answer "why is this here?" through visible value, clear labeling, or removal/consolidation.
• Text fit: labels, button copy, row text, select values, and helper copy must fit or truncate cleanly without overlapping adjacent controls.
• Lettering and justification: inspect text alignment, line-height, wrapping, and capitalization inside every cell, button, status badge, and dense row at desktop and narrow dock widths.
• Visual consistency: normalize panel radii, outlines, row shading, warning fills, and action colors so the Goal surface reads as one system.
• Color semantics: status, danger, warning, success, active, and muted states should use consistent tones and outlines across Home, Session, Goal, and runtime surfaces.
• Interaction consistency: verify add/edit/delete/save/start/stop/pause/restart/steer/handoff controls do not silently no-op and expose the correct disabled/busy state.
• Motion and status change communication: add restrained transitions where they make state changes easier to follow, with reduced-motion safety.
• Status/context surfaces: consider richer, compact status windows for queue state, current action, handoff/steer state, and recent orchestration events when those states are otherwise invisible.
• Accessibility checks: keyboard reachability, focus rings, target sizes, aria labels, progress/status regions, and non-color status cues.

Open UI follow-up candidates

• Audit small-height Electron geometry after the bounded rail fix to ensure the editor fields remain reachable through internal scrolling.
• Inspect remaining rounded-xl internal surfaces for whether they should be normalized to the 8px Goal console radius.
• Review dense action rows for whether icon-only add/edit controls need stronger tooltips beyond their current titles and aria labels.
• Run a live chain with an actual active step to visually confirm the Current Step strip, pause/stop/restart controls, and stalled-state copy under real runtime state.