런타임 계약과 학습자 흐름 보강

docs/ops/dark-ui-refresh-implementation-plan-2026-06-28.md

@@ -108,6 +108,47 @@
 
 1. `P1 라이브 상담 세션`만 먼저 구현한다.
 2. 현재 `03-session-active-*` 캡처와 v2 이미지를 나란히 비교해 CSS delta를 최소화한다.
-3. `Session.tsx` 구조 변경은 피하고, 가능한 한 `session.css`에서 surface/density/responsive만 조정한다.
+3. 1차 CSS 보정만으로 v2 근접도가 부족하면 `Session.tsx` 구조도 실제 기능 데이터 범위 안에서 조정한다.
 4. 검증 통과 후 새 full-page 캡처를 남기고 SSOT를 DONE/VERIFY 상태로 갱신한다.
 5. 그 다음 `P2 회기 리뷰`, `P3 학습자 홈` 순서로 반복한다.
+
+## 5. P1 실행 기록
+
+2026-06-29 1차 적용:
+
+- `Session.tsx` stage에 내담자 이름/현재 발화 영역을 추가하고, 좌측에는 실제 경과·권장 시간·저장 발화 수 기반 `세션 진행` 패널을 추가했다.
+- 우측 rail은 `라이브 신호`를 파형/상태 행/최근 흐름으로 재구성하고, `안전 점검`은 정상 상태에서도 보이는 체크 패널로 바꿨다.
+- `session.css` active 화면 전용 dark token을 추가해 beige/off-white surface 혼입을 막고, stage/transcript/input/controlbar의 표면 명도와 focus-visible 상태를 v2 방향으로 정리했다.
+- 갱신 캡처: `docs/design-verification/full-pages/03-session-active-desktop.png`, `03-session-active-tablet.png`, `03-session-active-mobile.png`.
+- 검증: `npm run typecheck`, `npm run build`, `npx playwright test e2e/session-layout.spec.ts --project=chromium-desktop --project=chromium-mobile --workers=1` 8 passed, `npx playwright test e2e/layout-visual-gate.spec.ts --project=chromium-single-run --workers=1` 9 passed.
+
+## 6. P2 실행 기록
+
+2026-06-29 2차 적용:
+
+- `session-review.css`의 learner filled review를 2열에서 3열 workbench로 바꿔, 왼쪽 요약/차트/흐름, 중앙 축어록, 오른쪽 평가/인사이트, 하단 워크시트 구조로 재배치했다.
+- `layout-visual-gate.spec.ts`의 기존 2열 가정을 3열 workbench 검증으로 갱신하고, empty review는 계속 sparse third column 없이 2열 이하로 접히게 유지했다.
+- 4차 QA에서 dark surface 계층을 overview/worksheet/rubric/prepost별로 다시 분리하고, chip/evidence/timestamp 버튼의 `focus-visible` 상태를 보강했다.
+- 갱신 캡처: `docs/design-verification/full-pages/04-session-review-desktop.png`, `04-session-review-tablet.png`, `04-session-review-mobile.png`.
+- empty 상태 증거 캡처: `04-session-review-empty-desktop.png`, `04-session-review-empty-tablet.png`, `04-session-review-empty-mobile.png`.
+- 검증: `npm run typecheck`, `npm run build`, `npx playwright test e2e/session-review.spec.ts --project=chromium-desktop --workers=1` 3 passed, `npx playwright test e2e/layout-visual-gate.spec.ts --project=chromium-single-run --workers=1` 9 passed.
+
+## 7. P3 실행 기록
+
+2026-06-29 3차 적용:
+
+- `LearnerHome.tsx` dashboard view를 재구성해 대시보드의 연습 대상 레일을 제거했다. 내담자 선택은 `/learn/practice`의 역할로 분리하고, `/learn`은 학습 상태와 오늘 이어갈 회기 판단에 집중한다.
+- 진행 회기/리뷰 대기/최근 평가/라포 흐름은 상단 CTA 바 `lh-dashboard-status`로 올렸다. 핵심 지표는 오늘 회기 카드의 부속 정보가 아니라 대시보드 진입 직후 확인하는 상태 요약이다.
+- 오늘 이어갈 회기, AI 코치, 다음 연습 추천, 최근 피드백은 `lh-work-cluster` 안에서 같은 작업 묶음으로 보이게 했다. 데스크톱에서는 회기와 코치가 같은 row에 놓이고, 추천/피드백은 그 아래 row로 묶인다.
+- 오른쪽 레일은 최근 기록, 리뷰 대기, 반복 대상만 남겨 학습 이력과 후속 행동을 담당하게 했다.
+- visual gate의 learner-home 준비 조건은 상단 지표 CTA, 작업 클러스터, 실제 최근 기록 row가 보이는 상태로 강화했다.
+- 4차 QA에서 `학습 현황` ARIA label strict 충돌을 제거하고, persona name/summary clamp와 주요 버튼의 `focus-visible` 상태를 보강했다.
+- 갱신 캡처: `docs/design-verification/full-pages/02-learner-home-desktop.png`, `02-learner-home-tablet.png`, `02-learner-home-mobile.png`.
+- 검증: `npm run typecheck`, `npm run build`, `npx playwright test e2e/layout-visual-gate.spec.ts --project=chromium-single-run --workers=1` 9 passed.
+
+## 8. 완료 상태
+
+- P1/P2/P3 모두 실제 React/CSS 화면에 적용했고, 생성 PNG는 레이아웃·밀도·톤 기준으로만 사용했다.
+- 이번 라운드는 API response shape를 바꾸지 않았으므로 `npm run check:api-types`는 추가하지 않았다.
+- `layout-visual-gate.spec.ts`는 4차 QA부터 각 캡처가 dark UI surface인지 `html[data-theme="dark"]`로 단언한다.
+- 전체 DONE 근거는 최신 full-page 캡처와 `typecheck/build/layout-gate` 검증이다.