## 2026-04-16 — 세션(Session) 탭 승격 + Planner 신규 + Git 워크트리 UI + 디자인 시스템 재정비

### 배경

인터랙티브 모드는 기존엔 TODO의 실행 옵션 중 하나였지만, "자동 실행(TODO)"과 "수동 대화(세션)"의 개념을 명확히 구분하기 위해 세션을 독립 엔티티로 승격(토론과 동일한 패턴). 피쳐/태그 중심의 경량 작업 관리를 위해 Planner 탭을 신규 추가. Git 패널 사이드바에 활성 워크트리 섹션을 추가해 todo/discussion 워크트리를 Git UI에서 직접 정리할 수 있게 함. 동시에 인라인 SVG 115개를 lucide-react로 전환하고 Modal/EmptyState/Toast/Skeleton 공용 컴포넌트를 도입, AnalyticsPanel의 차트를 Recharts로 교체.

### 주요 변경

#### 1. 세션(Session) 탭 신규 — 인터랙티브 모드의 독립 엔티티화 (`798682d`, `0cd78b4`)

- **DB**: `sessions`, `session_logs` 테이블 + CRUD 쿼리 12개 함수 (`use_worktree` 포함)
- **서버**: `session-manager.ts` 신규 — `claudeManager`/`logStreamer` 래퍼 + 워크트리 생성/재사용/실패 정리
- **서버**: `routes/sessions.ts` 신규 — 8개 REST 엔드포인트 (CRUD + start/stop/cleanup)
- **WebSocket**: `session:stdin` 핸들러 + `session:status-changed`/`session:log` 이벤트
- **서버**: 서버 시작 시 stale 세션 복구 + `session_logs` 자동 정리
- **클라이언트**: `SessionList.tsx`(목록 + 인라인 터미널), `SessionForm.tsx`(생성 폼 + Git 저장소일 때만 워크트리 체크박스)
- **클라이언트**: `ProjectDetail`에 세션 탭/상태/핸들러/WebSocket 이벤트 통합
- **i18n**: 기존 "작업" → "자동 작업" 탭 이름 변경, 세션 관련 번역 키 추가

#### 2. Planner 신규 기능 — CRUD + 태그 + TODO/스케줄로 변환 (`02a08d6`, 및 20여개 WIP 커밋)

- **DB**: `planner_items`, `planner_tags` 테이블 추가
- **서버**: `routes/planner.ts` 신규 — 아이템 CRUD + 태그 관리 + convert-to-todo/convert-to-schedule 엔드포인트
- **클라이언트**: `PlannerList.tsx`, `PlannerItem.tsx`, `PlannerForm.tsx`, `PlannerConvertDialog.tsx` 신규
- **클라이언트**: `ProjectDetail`에 Planner 탭 추가 (탭 바 첫 위치)
- **기능**: 인라인 편집(클릭 시 편집 모드), 컬럼 정렬(제목/우선순위/태그), 우선순위 컬럼, 태그 자동 색상 할당(10색 순환), 태그 인라인 색상 피커, 태그 rename/삭제, 쉼표 delimiter, Enter 동작, 이미지 첨부, 삭제 시 디스크 정리, 포털 기반 액션 메뉴
- **변환**: 플래너 아이템을 CLI 도구/모델 선택하여 TODO 또는 스케줄로 변환
- **i18n**: 한/영 번역 104개 키

#### 3. Git 사이드바 워크트리 섹션 + 브랜치 컨텍스트 메뉴 (`b12755b`, `35d4512`)

- **서버**: `GET /api/projects/:id/worktrees` (메인 워크트리 제외), `POST /api/projects/:id/worktree-cleanup`
- **클라이언트**: `GitStatusPanel.RefsSidebar` — Worktrees 접이식 섹션(폴더 아이콘, 브랜치명, hover 시 삭제 버튼, confirm 다이얼로그)
- **클라이언트**: 사이드바 로컬 에러를 상위 패널의 전체 너비 배너로 이동(truncate 문제 해결)

#### 4. UI 일관성 전면 개선 — Modal/EmptyState/Toast/Skeleton 공용 컴포넌트 + Recharts (`cf1a41e`)

- **신규 컴포넌트**: `Modal`(createPortal, sm/md/lg/xl, ESC 닫기, 애니메이션), `EmptyState`(아이콘+제목+설명+CTA), `Toast` + `useToast`(progress bar, slide-in, 4가지 타입), `Skeleton`
- **신규 유틸**: `lib/cn.ts` (조건부 클래스 조합)
- **AnalyticsPanel**: 직접 구현한 div 차트를 Recharts로 교체 (BarChart 스택드, 도넛 PieChart, cost/tokens 탭 LineChart)
- **마이그레이션**: 7개 모달 → Modal 컴포넌트, 7개 빈 상태 → EmptyState 컴포넌트, 전체 `text-[10px]`→`text-2xs`, `z-[9999]`→`z-tooltip`, `z-[60]`→`z-sticky`
- **tailwind.config.js**: z-index 시맨틱 스케일(dropdown/modal/toast/tooltip), `z-overlay:30`
- **index.css**: `text-2xs` 유틸, `btn-md` 사이즈, `btn-primary` 리플 이펙트, `toastProgress` 키프레임, stagger 애니메이션(30ms 간격)

#### 5. lucide-react 아이콘 전환 + MoreMenu 포털 수정 (`378425b`, `c313760`, `125e217`, `24d34ba`, `a649eb4`)

- **의존성**: `lucide-react` 추가
- **마이그레이션**: 24개 컴포넌트의 인라인 SVG 115개를 Lucide 아이콘으로 교체 (Sidebar/Layout/StatusBadge/ProjectList/TodoItem/DiscussionList 등 대부분 컴포넌트)
- **MoreMenu 수정**: `createPortal` + `offsetWidth` 기반 뷰포트 clamp + `positioned` state로 opacity 0→1 전환 (카드 영역 overflow-hidden 클리핑, 뷰포트 이탈, 위치 점프 버그 일괄 해결)
- **i18n**: 6개 메뉴 키의 긴 설명을 라벨 + Desc 키로 분리하고 tooltip으로 이동

#### 6. UI 디자인 리프레시 (대량 커밋들)

- **홈페이지 파티클**: 파티클 배경을 홈에서 `Layout`으로 이동하여 전체 페이지에 적용 (`fbbaf4b`)
- **버튼 위계**: btn-primary를 차분한 outlined 스타일로, Run All/Stop All을 ghost 스타일로, 그라디언트 제거 플랫 복원 (`728bf64`, `64acecf`, `57ae179`)
- **색상 통일**: 뱃지/그래프 노드 중성톤 통일, 중성톤 CLI tool 뱃지, dark/light 모드 시각적 계층 강화 (`a5804f0`, `638d812`, `b8be2da`, `5330fc8`)
- **Select 다크 모드**: 모든 `<select>`에 `color-scheme` 적용 + 옵션 다크 배경/텍스트 직접 지정 (`a0b3d5d`, `230a88b`, `8942860`)
- **Hero header + segmented tabs**: 프로젝트 헤더 리디자인 + 사이드바 레이아웃 + 액션 정리 (`f20142b`, `0866c0a`)
- **Dependency rail + 사이드바 압축**: TodoItem 헤더 최소화, 확장 영역 패널화, 의존성 rail 추가 (`474bc11`, `12dace9`)
- **CMD/터미널 스타일 Todo** (`d5609e4`, `2bef9ee`): 이후 4/18에 롤백됨(롤백 기록은 4/18 엔트리 참조)

#### 7. Planner 이미지 첨부 + 태그 관리 (`8b859ae`, `caabb7a`, `a2b5835`)

- 플래너 아이템에 이미지 첨부 지원 + 삭제 시 디스크 정리
- 태그 색상 관리(색상 피커, 색상 사이클, 저장 시점에 인라인 적용), rename, 삭제 기능
- 태그 제안 개선 (색상 코딩, 항상 표시)

### 수정된 주요 파일

| 파일 | 변경 내용 |
|------|----------|
| `src/server/db/schema.ts` | `sessions`, `session_logs`, `planner_items`, `planner_tags` 테이블 추가 |
| `src/server/services/session-manager.ts` | **신규** — 인터랙티브 세션 매니저 |
| `src/server/routes/sessions.ts` | **신규** — 세션 REST API (CRUD + start/stop/cleanup) |
| `src/server/routes/planner.ts` | **신규** — Planner REST API (CRUD + tags + convert) |
| `src/server/routes/projects.ts` | 워크트리 listing/cleanup 엔드포인트 추가 |
| `src/server/index.ts` | sessions/planner 라우터 마운트, stale 세션 복구 |
| `src/server/websocket/index.ts` | `session:stdin`/`session:log`/`session:status-changed` |
| `src/client/src/components/SessionList.tsx` | **신규** — 세션 목록 + 인라인 터미널 |
| `src/client/src/components/SessionForm.tsx` | **신규** — 세션 생성 폼 |
| `src/client/src/components/PlannerList.tsx` | **신규** — Planner 목록 |
| `src/client/src/components/PlannerItem.tsx` | **신규** — Planner 아이템 (인라인 편집) |
| `src/client/src/components/PlannerForm.tsx` | **신규** — Planner 생성 폼 |
| `src/client/src/components/PlannerConvertDialog.tsx` | **신규** — TODO/스케줄 변환 |
| `src/client/src/components/Modal.tsx` | **신규** — 공용 모달 (포털) |
| `src/client/src/components/EmptyState.tsx` | **신규** — 공용 빈 상태 |
| `src/client/src/components/Toast.tsx` | **신규** — 공용 토스트 |
| `src/client/src/components/Skeleton.tsx` | **신규** — 스켈레톤 로딩 |
| `src/client/src/components/AnalyticsPanel.tsx` | Recharts 기반 재작성 |
| `src/client/src/components/GitStatusPanel.tsx` | Worktrees 사이드바 섹션, 브랜치 컨텍스트 메뉴 연동 |
| `src/client/src/hooks/useToast.ts` | **신규** — 토스트 dispatcher |
| `src/client/src/lib/cn.ts` | **신규** — 조건부 클래스 유틸 |
| `src/client/tailwind.config.js` | z-index 시맨틱 스케일 (dropdown/modal/toast/tooltip) |
| `src/client/package.json` | `lucide-react`, `recharts` 추가 |

### 아키텍처 결정

1. **세션 = 토론 패턴 복제**: 기존 토론(Discussion)이 라운드/에이전트 기반 서비스를 독립 테이블+라우트+매니저로 구성한 것과 동일하게 세션도 `sessions` 테이블 + `session-manager.ts` + `routes/sessions.ts`로 분리. TODO의 실행 모드 옵션에서 빼내어 "자동/수동" 구분을 UX 레벨에서 명확히 함
2. **Planner 경량화**: Planner는 tsup-like CRUD만 제공하고, 실제 실행은 기존 TODO/스케줄로 변환하여 위임. 별도 실행 엔진 도입 없이 기존 인프라 재활용
3. **공용 UI 컴포넌트 도입**: Modal/EmptyState/Toast/Skeleton을 컴포넌트 테이블에 등록. 각 화면에서 reinvent 되던 패턴을 일원화하여 "floating elements must render via portal" 규칙 준수도 구조적으로 강제
4. **Recharts 채택**: AnalyticsPanel은 pure CSS div 차트로 시작했지만 인터랙션(툴팁, legend toggle)과 시맨틱 축을 제공하기 어려워 Recharts 도입. 번들 사이즈는 lazy-loaded panel에 한정
5. **Git 사이드바 워크트리 = todo cleanup 재활용**: 별도 UI 패턴 만들지 않고 기존 todo cleanup의 hover 삭제 버튼 + confirm 패턴을 그대로 사용

---
