2.4 KiB
2.4 KiB
Phase 07 — Story: Responsive, Polished, Accessible UI
Story: .agent/user_stories/responsive-polish.md
Context: .agent/PLAN.md §7 (the whole UI/UX strategy)
Goal
The final visual + accessibility audit pass across chat and Sources. No new features — enforce PLAN §7 end-to-end and fix every deviation.
Implementation steps
- Viewport sweep (360 / 375 / 768 / 1280 / 1600) on both pages: fix overflow, pinched columns, dead whitespace. Chat column stays ≤46rem centered; Sources table full-width with horizontal scroll <640px.
- A11y sweep (both pages): landmarks, skip link, labels on every input,
aria-labelon every icon-only control,:focus-visibleoutline on every focusable,aria-liveregions intact, no contrast <4.5:1 (compute, don't eyeball — use the E2E helper). - Reduced-motion + long-content pass (60-char paths, long answers).
- No-CDN re-verification on both pages (extend the integration test
to
/sources.htmlif it only covers/). - Final README polish pass: screenshots section (optional), quickstart sanity, "Update your documents" workflow prominent.
UI Verification
This phase IS the verification: the E2E below is the acceptance test. Additionally, manual screenshot pass at 1280px + 375px for both pages, reviewed against PLAN §7.1–7.4 before committing.
Testing & Quality
- Integration: no-CDN check extended to Sources page; health unchanged.
- Coverage: >90% on
app/(final state of the whole app). - Whole suite green:
uv run pytest(unit+integration) — the entire repo must be green at this phase.
Playwright Execution Phase
Run ONLY this story's suite:
uv run pytest tests/e2e/test_responsive_polish.py -v --no-cov
Implements the story mapping: no horizontal overflow at 5 viewports (both pages); chat column capped + centered at 1600px; Sources table ≥80% container at 1280px; landmarks/labels/skip-link sweep; WCAG contrast pairs ≥4.5:1 (computed); reduced-motion honored.
Success criteria
- all six mapping tests pass at every viewport
- zero known a11y deviations against PLAN §7.2
- whole pytest suite green + coverage >90%
- README polished
- committed (this commit marks v1.0 feature-complete)
Commit
git add -A && git commit --no-gpg-sign -m "feat(ui): responsive + WCAG AA polish pass across chat and sources — v1 feature complete"