Files
brain-of-reese/.agent/phases/todo/07_story_responsive_polish.md
T
ducoterra 022da8e2bc feat: scaffold Brain of Reese — FastAPI RAG chat over Postgres 17 + pgvector
Foundation (phase 01, verified):
- FastAPI app: /api/health, /api/suggestions, /api/chat (placeholder),
  static frontend served locally (no CDN)
- Postgres 17 + pgvector via db/Containerfile + compose.yaml
  (podman compose up -d db), Alembic initial migration (documents,
  chunks with vector(768), query_log)
- LLM client targeting https://aipi.reeseapps.com/v1 (turbo/embed);
  scripts/llm_probe.py verified models + 768-dim embeddings live
- Conditional debugpy: imported only when DEBUGPY=1 (attach on demand,
  :5678); logging config for clean single-line logs
- Frontend shell: mobile-first chat + Sources pages, tokens, a11y baselines
- Tests: 24 unit+integration (99% coverage on app/), ruff + pyright clean,
  Playwright smoke E2E (3 tests) against a deterministic mock LLM
- Planning: .agent/PLAN.md (architecture + LOCKED decisions), AGENTS.md,
  6 user stories, 7 phase files (one story / one phase / one Playwright
  suite each)
2026-08-21 13:42:21 -04:00

2.4 KiB
Raw Blame History

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

  1. 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.
  2. A11y sweep (both pages): landmarks, skip link, labels on every input, aria-label on every icon-only control, :focus-visible outline on every focusable, aria-live regions intact, no contrast <4.5:1 (compute, don't eyeball — use the E2E helper).
  3. Reduced-motion + long-content pass (60-char paths, long answers).
  4. No-CDN re-verification on both pages (extend the integration test to /sources.html if it only covers /).
  5. 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"