yunchan/vignette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
vignette/docs/archive/ops/layout-redesign-handoff-2026-06-26.md
Yun Chan 778e8526d4 세션 평가·라이브코치·교수자 분석 라운드 마감 + 문서 정리 + 코드품질 리팩터 
- 누적 작업트리 커밋: 회기 평가 복구·durable 저장, 라이브 코치 이력/근거, 교수자 학생분석, 음성 비언어 메타, PII 마스킹, 운영 티켓/헬스 등
- 문서: 완료 기록 docs/archive/ 냉동 보관, docs/ 단일 인덱스(docs/README.md)+통합 TODO(docs/TODO.md)로 정리
- 리팩터(행위 보존): Stage enum SSOT(taxonomy 소유·state_machine re-export), store recent/masked_turns 중복 제거, speaker_ko_label 단일 헬퍼, _list_sessions N+1 제거(state/turns 배치 + 턴평가 하이드레이션 배치)
- 검증: 백엔드 pytest 352 passed, _list_sessions E2E chromium-single-run 2 passed
2026-07-02 02:50:36 +09:00

6.8 KiB
Raw Blame History

Layout Redesign Handoff

Updated: 2026-06-26 18:30 KST

Intent

The user clarified that this was not meant to be a narrow overflow audit. The layout pass was allowed to substantially redesign screens because the prior UI had protruding elements, wasteful sizing, empty gaps, weak visual quality, and layouts that were not useful enough for repeated work.

The user also explicitly asked the main thread not to implement the layout redesign directly. The main thread coordinated subagents, reviewed results, ran integration verification, and recorded this handoff.

Subagent Work Completed

First pass: containment and clipping fixes

  • Session layout: removed the tablet fixed right-panel overlap risk and added intersection checks.
    • apps/web/src/pages/session/session.css
    • apps/web/e2e/session-layout.spec.ts
  • Admin tablet layout: moved create-user containment behavior up to tablet widths and added 861/900/1024 checks.
    • apps/web/src/pages/Admin.tsx
    • apps/web/e2e/admin.spec.ts
  • Settings engine controls: made segmented controls shrink/wrap safely and added local clipping assertions.
    • apps/web/src/pages/settings/settings.css
    • apps/web/e2e/settings.spec.ts
  • Professor recent sessions: replaced mobile horizontal table dependence with responsive readable rows.
    • apps/web/src/pages/Professor.tsx
    • apps/web/e2e/teacher.spec.ts

Second pass: actual layout redesign

  • Session: rebalanced the active practice screen around transcript/input, compact client status, context-first desktop rail, and tablet/mobile case summary.
    • apps/web/src/pages/Session.tsx
    • apps/web/src/pages/session/session.css
    • apps/web/e2e/session-layout.spec.ts
  • Learner home and review: redesigned learner home as a denser practice dashboard and rebuilt review into explicit overview, feedback, evidence, coaching, and transcript regions.
    • apps/web/src/pages/LearnerHome.tsx
    • apps/web/src/pages/SessionReview.tsx
    • apps/web/src/pages/session-review/session-review.css
    • apps/web/e2e/learner.spec.ts
    • apps/web/e2e/session-review.spec.ts
  • Admin and Professor: redesigned operational screens with compact status strips, sidecar create-user form, dense service/user rows, bounded panels, and responsive recent-session/review areas.
    • apps/web/src/pages/Admin.tsx
    • apps/web/src/pages/Professor.tsx
    • apps/web/e2e/admin.spec.ts
    • apps/web/e2e/teacher.spec.ts
  • Settings: rebuilt settings as a sticky left rail plus dense main control grid, tightened panels and save footers, and kept mobile controls clipping-safe.
    • apps/web/src/pages/Settings.tsx
    • apps/web/src/pages/settings/settings.css
    • apps/web/e2e/settings.spec.ts

Verification

Commands run from D:\workspace\vignette\apps\web:

npm run typecheck
npx playwright test e2e/learner.spec.ts e2e/session-layout.spec.ts e2e/session-review.spec.ts e2e/admin.spec.ts e2e/settings.spec.ts e2e/teacher.spec.ts --project=chromium-desktop --project=chromium-mobile

Results:

  • npm run typecheck: passed.
  • First combined layout E2E: 53 passed, 1 Admin tablet test failed with a Playwright response.json body retrieval protocol error.
  • Isolated Admin tablet rerun: passed.
  • Final combined layout E2E rerun: 54 passed.

Worker-reported focused verification also passed:

  • Session layout: 8 passed.
  • Learner + review: 14 passed.
  • Admin + teacher: 20 passed.
  • Settings: 12 passed.

Remaining Review Needed

  • Human visual acceptance is still required. The automated checks prove containment, no horizontal overflow, no core overlap, mobile readability, and major control clipping coverage; they do not prove that the new design is subjectively good enough.
  • Check actual browser screenshots before calling the layout work fully done. Suggested widths:
    • 390x844
    • 720x900
    • 861x900
    • 900x900
    • 1024x768
    • 1280x800
    • 1440x900
  • Pay special attention to dense real data states: long learner names, long session ids, long persona names, many review items, and narrow mobile with sticky navigation.
  • This pass did not close external/live project gaps such as public Google OAuth /turn, live Postgres RLS DSN proof, physical microphone/public WSS proof, or production SAML XML validation.

Next Suggested Step

Start the next session by visually inspecting the changed pages in a real browser, then decide whether the new layout direction is acceptable or whether another page-specific design pass is needed. Do not mark the dashboard layout item as DONE until that human visual review is complete.

Visual Acceptance Closure (2026-06-26, follow-up session)

The visual acceptance requested above was completed and the dashboard layout item was moved to DONE.

What was added:

  • A strict, automated visual gate: apps/web/e2e/layout-visual-gate.spec.ts. It renders the 7 redesigned screens (learner home, session prestart, session active, session review, professor, admin, settings) at all 7 suggested widths (390/720/861/900/1024/1280/1440), asserts horizontal overflow 0 and zero clipped controls (hard-clip by a non-scrollable overflow ancestor, or text clipped without an ellipsis/line-clamp affordance), and writes 49 full-page screenshots to node_modules/.tmp/layout-gate/. Dense real-data states are seeded (long learner name, 3 stacked sessions, an ended-session review). Horizontal carousels and intentional ellipsis/line-clamp are excluded from the clip check to avoid false positives.

Process (parallel):

  1. A 7-agent review workflow read all 49 screenshots and reported per-screen findings.
  2. A 6-agent fix team (one per page, disjoint files) fixed the findings.
  3. Integrated re-verification: npm run typecheck OK, gate 7 passed (re-screenshot), layout focused E2E desktop/mobile 54 passed (no regression).
  4. A 7-agent adversarial verify workflow confirmed 7/7 accept, critical/major resolved, 0 regressions.

Key defects resolved:

  • Learner home 1280/1440 three-column collapse where the center preview column shrank and persona meta broke one-char-per-line (critical) — the body two-column split was raised from min-width:1180px to 1400px and word-break:keep-all added.
  • Professor raw API 404: Not Found banner — 404 now renders the normal empty state; only real failures show a tidy retry card.
  • Session review empty-state black card hierarchy inversion — strong styling is now conditional on real feedback.
  • Admin empty/loading gray boxes — shimmer skeletons and placeholder text.
  • Settings wide-desktop left dead zone — slimmer rail + centered body; engine-mode radios in a 2×2 grid.
  • Session mobile control bar — 44px touch targets, labeled "밀어서 종료", stronger primary send button.

Remaining items are cosmetic minor only (recorded as a non-blocking polish backlog in docs/dev_dashboard.html), several of which are visible only in the zero-data empty state.