feat(frontend): chat UI phase 4 — todo block & approval card styling

[tendtoyj]

Summary

• write_todos 렌더링을 기존 Queue 컴포넌트에서 Collapsible step-row 패턴으로 마이그레이션하여 다른 tool step과 시각적 일관성 확보
• Approval 카드 스타일을 rounded-2xl, 넉넉한 패딩, active:scale 피드백 등으로 리뉴얼
• TodoCheckbox 컴포넌트 신규 추가 (pending/in_progress/completed 3단계 상태)
• any 타입 제거 및 QueueTodo 타입 디커플링으로 타입 안전성 강화

Changes

• ToolRenderer.tsx: write_todos 분기를 Queue → Collapsible + StepDot + TodoCheckbox 조합으로 교체, extractContent/getFirstMeaningfulItem의 any 타입을 unknown으로 변경, default 렌더링 조건을 명시적 null 체크로 강화
• todo-checkbox.tsx / todoCheckboxModel.ts: 상태별 스타일 매핑을 순수 함수로 분리한 TodoCheckbox 컴포넌트 신규 추가
• toolTodoViewModel.ts: tool todo의 StepDot phase, chevron 표시 여부, 텍스트 클래스를 결정하는 뷰모델 신규 추가
• toolTodoParser.ts: QueueTodo import를 제거하고 ToolTodo 독립 타입으로 재정의, todoCheckboxModel에서 상태 타입 import
• ApprovalRenderer.tsx: 카드 모서리(rounded-2xl), 패딩(px-5 py-4), 버튼 크기/모션(active:scale), 폰트 사이즈 조정
• globals.css: cardIn 애니메이션 추가 + prefers-reduced-motion 접근성 대응
• chatItemPadding.ts: approval 아이템 상단 패딩 pt-2 → pt-3 조정
• assistantActionsPolicy.ts: phase-5 의존 코멘트를 삭제 조건 명시 코멘트로 교체

Test plan

• todoCheckboxModel.test.ts — completed 상태의 border-0 확인, in_progress 상태의 border + glyph 확인
• toolTodoViewModel.test.ts — tool state → step phase 매핑, chevron 표시 조건, 상태별 텍스트 클래스 확인
• chatItemPadding.test.ts — approval 패딩 pt-3 동기화 확인
• 9건 전체 테스트 통과 확인: node --test frontend/.../renderers/__tests__/*.test.ts
• write_todos 렌더링이 Collapsible step-row로 정상 표시되는지 수동 확인
• Approval 카드의 버튼 hover/active 피드백 수동 확인

🤖 Generated with Claude Code

[tendtoyj]

Code Review — Phase 4: Todo Block & Approval Card

✅ Looks Good

• 모델/뷰모델 분리: todoCheckboxModel.ts, toolTodoViewModel.ts를 순수 함수로 분리하고 각각 단위 테스트 작성 — 테스트 9건 모두 통과
• memo 적용: TodoCheckbox와 ToolRenderer 모두 memo 래핑됨, 불필요한 리렌더 방지
• 접근성: cardIn 애니메이션에 prefers-reduced-motion: reduce 미디어 쿼리 추가
• console.log 없음: 변경된 12개 파일에 디버그 로그 없음
• 보안 우려 없음: 순수 UI/프레젠테이션 변경, 사용자 입력 처리 없음
• 기존 패턴 준수: Collapsible + StepDot 패턴은 다른 step-row 렌더러와 일관성 유지
• 테스트 동기화: chatItemPadding.test.ts의 approval 패딩 expected 값도 pt-2 → pt-3으로 반영됨

⚠️ Issues Found (모두 fix commit에서 해결됨)

Severity	File	Issue	Status
MEDIUM	ToolRenderer.tsx:103	extractContent, getFirstMeaningfulItem에 any 타입 잔존	✅ unknown + type narrowing으로 변경
LOW	ToolRenderer.tsx:178	chevron 없을 때 빈 <span className="ml-auto" /> spacer 불필요	✅ : null로 제거
LOW	toolTodoParser.ts:1	QueueTodo 타입을 queue.tsx에서 import — 불필요한 커플링	✅ ToolTodo 독립 타입으로 재정의, todoCheckboxModel에서 상태 타입 import
LOW	assistantActionsPolicy.ts:36	phase-5 의존적 코멘트, 삭제 시점 불분명	✅ 삭제 조건을 명시하는 코멘트로 교체

📊 Summary

• Files reviewed: 12
• Critical issues: 0
• Medium issues: 1 → fix commit에서 해결
• Low issues: 3 → fix commit에서 해결
• Tests: 9/9 pass

🤖 Reviewed with Claude Code

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 59b89a111e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Restore height cap for write_todos list content

The migrated write_todos view renders todos inside a plain <div> without any max-height/scroll container, so large todo batches (or very long titles) now expand the tool row indefinitely and can push the rest of the chat off-screen; this is a regression from the previous QueueList behavior that constrained height. Because this branch also disables collapsing while pending, users cannot mitigate oversized pending updates.

Useful? React with 👍 / 👎.