1. src/components/Sidebar.jsx

라인	코드	설명
1–21	import	lucide 아이콘, useAppStore
22–146	Sidebar 컴포넌트	프로젝트 로고·타이틀, API 키 입력, 모델 선택 드롭다운(gemini-2.5-flash/pro 등), 폴더 선택, 파일 트리 렌더
148	FileTreeNode	재귀 트리 컴포넌트 — 폴더 펼침/접기
158	FileTreeItem	단일 파일 항목 — 클릭 → openProjectFile()

2. src/components/HomeScreen.jsx

라인	코드	설명
1–38	import + 상수	아이콘, useAppStore, 모드 카드 정의
39–161	HomeScreen	Create/Update/Reverse 3가지 모드 카드 UI, 프로젝트 설명 textarea, 실행 버튼 → startAnalysis()

3. src/components/ChatPanel.jsx

라인	코드	설명
1–11	import	아이콘, useAppStore
12–131	ChatPanel	Chat/Apply 토글, 메시지 히스토리(사용자 파란/어시스턴트 회색 말풍선), 자동 스크롤, 텍스트 입력 + 전송 → sendIdeaChat()
133–164	ChatMessage	개별 메시지 렌더링 서브 컴포넌트

4. src/components/Workspace.jsx

라인	코드	설명
1–32	import + 상수	탭 컴포넌트들, useAppStore, 탭 ID 정의
33–233	Workspace	2-tier 탭(상단: 코드 파일 탭, 하단: 출력 탭), PM/SA 드롭다운 메뉴, activeTabId 기반 뷰포트 라우팅, 파이프라인 진행 상태에 따라 HomeScreen/PipelineProgress/결과 뷰 전환

5. src/components/PipelineProgress.jsx

라인	코드	설명
1–19	import + 상수	아이콘, useAppStore
20–66	파이프라인 단계 정의	CREATE 11단계, UPDATE 14단계, REVERSE 9단계, analysis(PM only) 5단계, revision 1단계, idea_chat 1단계
67–138	PipelineProgress	진행 표시(대기/진행중/완료/에러 아이콘+라벨), Thinking 로그 실시간 스트림
139–169	StepItem	개별 단계 렌더링 서브 컴포넌트

6. src/components/ResultViewer.jsx

라인	코드	설명
1–32	import	12개 서브 탭 컴포넌트
33–38	ResultViewer	tabId 기반 탭 라우터 — Overview/RTM/Context/Topology/SA* 탭 분기

7. src/components/StatusBar.jsx

라인	코드	설명
1–9	import	useAppStore
10–71	StatusBar	WS 연결 , 파이프라인 상태, 모델명, 백엔드 포트

8. src/components/CodeViewer.jsx

라인	코드	설명
1–10	import	@monaco-editor/react, useAppStore
11–57	CodeViewer	Monaco 에디터 래퍼, 언어 자동 감지(확장자 기반), 다크 테마, 편집 가능(readOnly: false), onChange → updateOpenFileContent()

9. src/components/SessionPanel.jsx

라인	코드	설명
1–4	import	useAppStore, 아이콘
5–62	SessionPanel	세션 목록 렌더링(타임스탬프·이름), loadSession(), deleteSession() 버튼