# Issue #82 UI design QA

final result: passed

Scope: the interactive UI proposal, not the production local Git implementation.

## Comparison target and evidence

- Source visual truth: `baseline-workspace.png`, captured from Alune `development@f6ce4ac` after rebuilding shared and web, using the repository's isolated workspace fixture.
- Implementation: `prototype.html`; screenshots `workspace-light.png`, `workspace-dark.png`, `repositories-light.png`, and the named scenario screenshots in this directory.
- Source and primary implementation: 1280 × 720 pixels, CSS viewport 1280 × 720. Screenshots compared at equal dimensions; no density rescaling. Narrow desktop evidence: `workspace-1024.png`, 1024 × 768.
- State: light theme, changes view, selected unstaged text Diff. Content intentionally differs: the source shows SSH-only navigation and existing fixture files; the proposal adds local/SSH source identity and local Git example files. This is a product extension, not a pixel clone.
- Full comparison: `comparison.png`, both source and proposal in the same image.
- Focused comparison: `comparison-details.png`, source/proposal tab navigation and commit forms. Used because small file labels and button states were not legible enough in the full comparison alone.
- Dark theme and the open-folder, danger, Worktree, permission, empty, author and sync-error states were also rendered and captured.

## Findings and iteration history

1. Initial render: [P2] the tab strip exposed a vertical scrollbar because button minimum height plus tab padding exceeded the 44 px row. Fixed the tab button height and vertical overflow. Later captures have no tab-strip vertical scrollbar.
2. Initial comparison: [P2] disabled primary commit button retained a saturated blue fill under opacity, making it look actionable. Changed disabled primary buttons to the existing blue-soft, line and muted tokens. Re-captured the implementation; the disabled button is clearly inactive in light and dark views.
3. Context review: preserved the optional AI commit entry after noticing that the first draft had omitted it. It now explains staged-diff transmission and fills editable demonstration text only; it does not submit or call a service.
4. Post-fix comparison: no remaining actionable P0/P1/P2 visual findings in the tested desktop states. Evidence uses the final captures, not the initial screenshots.

## Required fidelity surfaces

| Surface | Result |
| --- | --- |
| Fonts and typography | System sans stack and monospace code stack retained; dense 12–13 px workspace text, larger page and modal headings. Long repository paths are available in the footer or dialog and do not cover controls. |
| Spacing and layout rhythm | Existing 236 px left navigation and 320 px change panel retained at the primary viewport. Tab, toolbar, Diff and footer hierarchy consistent. Dialogs fit inside the viewport; narrow layout keeps all six views available as labelled accessible icons. |
| Colors and tokens | Light and dark colors copied from current Moonlight theme. Added source badges use existing blue and purple tones, plus text/icon identity. Added/deleted lines use both color and explicit markers. |
| Image quality and assets | Original Alune favicon asset embedded without recoloring; Ant Design icon definitions reused from installed package. No generated or placeholder brand assets. |
| Copy and content | Local execution, SSH execution, full target path, staged/unstaged range, non-reversible deletion and cancellation semantics explicit. The review bar marks mock data; implementation details stay in design documentation rather than normal product flows. |

## Interaction verification

Browser-tested: stage and commit only staged files; preserve remaining unstaged files; first commit with no remote; safe branch switch in clean state; relative-path validation and recovery; disabled destructive confirmation until checked; Worktree opening and close-tab semantics; disabled directory-delete confirmation; push progress/cancel; same-name local and SSH draft isolation; path search and no-results state. Captured browser error/warn log was empty for these runs.

At 1024 × 768, document scroll width and client width were both 1024. Diff overflow is confined to its own scroll region. The six view buttons and branch/sync controls remain present. The temporary browser viewport was reset afterward.

## Implementation checklist

- [x] Source reference captured and inspected.
- [x] Full-view and focused comparisons created and inspected together.
- [x] Identified P2 issues fixed and screenshots replaced.
- [x] Light, dark, narrow, empty, permission and destructive states captured.
- [x] Core simulated interactions checked in the browser.
- [x] Script syntax checked with Node; browser runtime logs inspected.

## Follow-up polish and product gaps

- P3: the current draft uses generic file icons. Production should retain the existing material-icon-theme file type icons and the existing AI sparkle treatment.
- Unverified: assistive technology on native desktop, system file pickers, true OS high-contrast mode, actual Git operations, credentials, process cancellation, packaged Windows and Linux behavior.
- Native dialog focus behavior is used; manual screen-reader testing is still required for the production app.
- Existing history graph, panel resize/visibility behavior and full AI configuration are reused product capabilities, not reimplemented in this prototype.


## Production implementation comparison — 2026-09-26

The implementation is now tested separately from the original proposal. `implementation-comparison.png` contains both screens at 1280 × 720, in light theme, with an unstaged text Diff selected and one staged file. Fixture filenames/content differ; dimensions and interaction state match. Inspected the combined image, then checked the dark and 1024 px captures.

Result: passed for the tested desktop states. The three-column layout, Moonlight palette, typography, staged/unstaged grouping, source labels, path footer, and disabled commit state remain coherent. Production retains established material file icons, AI model controls, Diff focus/fullscreen, resizable panels and graph UI. The repository overview intentionally retains existing cards; list/card switching is tracked in #66. No remaining actionable P0/P1/P2 visual finding in these captures.

The real UI verifies opening, inspection failure recovery, stage/commit/history, author setup, upstream push, Worktree creation/opening/closing, explicit removal confirmation, and cancelling a real delayed Git hook. See Issue-82-Validation for commands, native smoke coverage and remaining platform limitations. The dialog-return stub in Electron does not count as an OS picker manual test.