크라우니AI 코칭 UI — 비전선언 + 아침능동카드 + 행동체크/보상/공유

개요

/Users/ef/crowny-ai/public/index.html에 코칭 UI 4종을 additive 방식으로 추가. 기존 채팅/에이전트/적성검사/eco-card 흐름은 전혀 건드리지 않음.

구현 내용

1. 아침 능동 카드 (#coachNudgeWrap)

• init 시 GET /api/coach/nudge 호출 (X-Crowny-Owner 헤더 포함)
• 응답 있으면 채팅 영역 상단(.main 내부, welcome 위)에 카드 표시
• [해볼게요] → POST /api/coach/action status=진행 후 카드 닫기
• [완료했어요] → POST /api/coach/action status=완료 + 보상 팝 애니메이션 후 닫기
• [다음에] → 페이드 아웃 dismiss
• API 실패 시 카드 미표시 (graceful degradation)

2. 비전 선언 패널 (#coachVisionContent)

• GET /api/coach/profile → vision 문자열이 있으면 골드 강조 텍스트 카드 렌더
• vision 없으면 "코치와 대화해 비전을 찾아보세요" CTA + 크라우니라이프 채팅 연결 버튼
• TOAU 장식 (::before 의사요소)

3. 행동 목록 체크리스트 (#coachActionList)

• profile.actions[] 렌더: phase(티/옴/타/음) 4상 색 구분
• 체크 클릭 → toggleAction() → 낙관적 UI 반전 + POST /api/coach/action
• 완료 시 reward 표시 + rewardPop 애니메이션
• API 실패해도 UI 상태 유지 (낙관적 업데이트)

4. 공유 버튼 (shareCoach())

• 비전 + 완료행동 텍스트 조합
• Web Share API 우선, 폴백=클립보드 복사
• 버튼 텍스트 일시 "복사됨" 피드백

디자인

• 베이지+골드(#C9A961) 강조, Pretendard 폰트, 라이트/다크 CSS 변수 대응
• eco-card 톤과 일치 (동일 변수 사용)
• 모바일 반응형: coach-panel-body → 1컬럼 (max-width:600px)
• 모든 카드 코치패널은 API 성공 시에만 표시 (style=display:none 초기값)

관련 파일

• /Users/ef/crowny-ai/public/index.html — 수정 파일 (단일)
• server.js / engine/* — 건드리지 않음

검증 결과

• curl -s http://127.0.0.1:9852/ | grep -c "비전\|코치\|해보시겠" → 20
• Python html.parser 파서 오류 0건
• graceful degradation 10개 패턴 전부 OK