design qa - ShaoClean/Alune GitHub Wiki
final result: passed
Scope: the interactive UI proposal, not the production local Git implementation.
- Source visual truth:
baseline-workspace.png, captured from Alunedevelopment@f6ce4acafter rebuilding shared and web, using the repository's isolated workspace fixture. - Implementation:
prototype.html; screenshotsworkspace-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.
- 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.
- 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.
- 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.
- 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.
| 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. |
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.
- Source reference captured and inspected.
- Full-view and focused comparisons created and inspected together.
- Identified P2 issues fixed and screenshots replaced.
- Light, dark, narrow, empty, permission and destructive states captured.
- Core simulated interactions checked in the browser.
- Script syntax checked with Node; browser runtime logs inspected.
- 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.
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.