design qa - ShaoClean/Alune GitHub Wiki

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

  • 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.

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.

⚠️ **GitHub.com Fallback** ⚠️