yunchan/vignette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
vignette/docs/ops/layout-redesign-handoff-2026-06-26.md
Yun Chan 085460b5e0 대시보드 폴드아웃/드릴다운 정리 + 페르소나 역린·misconduct 반응 + 게이트웨이 격리·RAG 비차단 수정 
SSOT 대시보드:
- 한신대 기술분석 PDF(19쪽) 정합성 분석 + 이번 세션 발견 섹션 추가
- 섹션 폴드아웃(접기)·상단 목차(드릴다운)·모두 펼치기/접기 — 내용 보존, 레이아웃만 정리

페르소나 반응 강화('저항·반응 조절' 핵심 차별):
- PersonaCard.triggers(역린) 필드 + CCD 핵심상처 파생 역린 블록
- L0에 무례·모욕·조롱 시 현실적 동맹 균열 반응 지침

버그·성능 수정(라이브/E2E로 포착):
- 게이트웨이 페르소나 격리: --append-system-prompt를 --system-prompt(교체)로 + --exclude-dynamic-system-prompt-sections (내담자 캐릭터 붕괴·개발맥락 누출 차단)
- RAG: 임베더 동기 로드(약 7-13초)를 _warm_rag_caches 백그라운드 warm으로(세션 생성 블로킹 회귀 수정)
- voice TTS RMS 데드힌트 제거, init_state OpennessParams 파라미터객체화
- 한국어 PII(날짜·금액·주소) 마스킹 보강
- 레이아웃 시각 게이트: 폼 컨트롤 값 스크롤 오탐 제외(7/7)

검증: 백엔드 84/84, E2E 42(데스크톱 27·모바일 11·아바타 4), 시각 게이트 7/7
2026-06-27 02:30:46 +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.