feat(control): add live workboard v0

자기야 피드백: "픽셀 아트 안 예쁘다, profile photo 로 바꿀 수 없나?
픽셀 아트 고집 안 해도 됨." → 16x28 픽셀로는 anime 일러스트 정체성 못
살리는 게 사실. Phaser 자체도 큰 의존성이라 깔끔하게 빼고 React+CSS+SVG
로 재작성.

## 변경

### 제거
- phaser 4.0.0 의존성 (~3MB)
- frontend/components/office-rpg/ 전체 (Phaser 통합 layer + procedural
  pixel sprite factory + Office scene)

### 신설
- frontend/components/office-room/OfficeRoom.tsx
  - 2x2 grid layout: 하랑/나랑 (위), 다랑/이랑 (아래)
  - 가운데 회의실 (시각 표시만, 향후 인터랙션용)
  - 각 자매 = 책상 SVG 위에 원형 portrait card
    - 72px portrait (실제 /api/sisters/{name}/avatar)
    - 자매 시그니처 색 border (harang=blue, narang=teal, darang=red, erang=violet)
    - hover 시 위로 살짝 떠오름
    - 활성 stage 일 때 PulseRing + StatusDot 펄스
  - 자매 사이 SVG flow arrow (plan → impl → review → deploy 방향)
    활성 stage 시 화살표 hi-lighted
  - 클릭 → 우측 SisterDetailPanel slide-in
- frontend/components/office-room/SisterDetailPanel.tsx
  - 기존 office-rpg 의 detail panel 을 재사용 (PortraitLg + 자매 시그니처
    accent + 역할 설명 + 백엔드 sister info)

### app/page.tsx
- OfficeRpg → OfficeRoom 으로 교체
- 4초 polling 으로 활성 파이프라인의 currentState 추적 →
  STATE_TO_STAGE 매핑 → 해당 자매 카드 자동 펄스

.claude/sessions/.last_inbox_check

@@ -1 +1 @@
-1775812935
+1775818515

.plans/rebuild-from-scratch/PLAN.md

@@ -0,0 +1,547 @@
+# 하나랑 대시보드 Rebuild From Scratch Implementation Plan
+
+> **For Hermes:** 이 문서는 하랑이 planner role 산출물이다. 승인 전 구현/배포 금지. 승인 후 나랑이 builder 또는 Codex가 task 단위로 실행하고, 다랑이 reviewer가 spec/code quality를 검증한다.
+
+**Goal:** 기존 하나랑 대시보드를 “자기야가 4자매가 작업하는 과정을 실시간으로 보는 서비스”로 처음부터 다시 설계하고 구현한다. 메인 화면의 핵심은 이랑이/하랑이/나랑이/다랑이가 PLAN → BUILD → REVIEW → DEPLOY 흐름에서 무엇을 하고 있는지 live timeline/board/scene으로 보여주는 것이다.
+
+**Architecture:** 기존 `hanarang-dashboard` repo는 유지하되, 제품/정보구조/UI를 새로 잡는다. Frontend는 Next.js 16 + styled-components를 유지하고, Backend는 NestJS + Prisma/MariaDB + Socket.IO를 유지한다. 메인 서비스는 `4 Sisters Live Workboard`이며, v0는 mock event stream으로 “작업 과정이 보이는 화면”을 먼저 완성한다. v1에서 NestJS Socket.IO event stream과 workflow state API를 붙인다. 기존 코드는 삭제보다 `legacy` 보존/점진 교체를 우선한다.
+
+**Tech Stack:** Next.js 16, React 19, styled-components, NestJS 11, Prisma 7, MariaDB, Socket.IO, Hermes role skills, Proxmox read-only API.
+
+---
+
+## 0. 배경
+
+기존 대시보드는 다음 전제를 갖고 있었다.
+
+- 하랑/나랑/다랑/이랑이 각각 독립 gateway로 상시 동작
+- 4자매 서버 상태를 곧 agent 상태로 봄
+- OpenClaw/Lobster workflow 흔적이 UI에 남아 있음
+- 실시간 office/metaphor와 운영 패널이 섞여 있음
+
+현재 운영 방향은 바뀌었다.
+
+- 자기야의 기본 진입점은 이랑이 하나
+- 하랑=planner, 나랑=builder, 다랑=reviewer는 role skill로 호출
+- 하랑/나랑/다랑 gateway는 나중에 standby 전환 가능
+- Proxmox 서버 상태와 role runnable 상태를 분리해서 봐야 함
+- 하네스 엔지니어링 원칙: PLAN → 승인 → 구현 → QA → 배포 게이트
+
+그래서 단순 리팩토링보다 “처음부터 다시 만드는” 수준의 IA/UI 재설계가 맞다.
+
+---
+
+## 1. 제품 방향
+
+### 한 줄 정의
+
+하나랑 대시보드는 자기야가 **4자매가 작업하는 과정을 실시간으로 보는 서비스**다. 단순 관제센터가 아니라, 하랑이의 기획, 나랑이의 구현, 다랑이의 리뷰, 이랑이의 인프라/배포 판단이 어떤 순서로 흘러가는지 메인 화면에서 바로 보여준다.
+
+### 핵심 사용자
+
+- 자기야: 최종 사용자/승인자
+- 이랑이: 메인 비서, 오케스트레이터, 인프라 책임자
+- 하랑이 role: planner
+- 나랑이 role: builder
+- 다랑이 role: reviewer
+
+### 새 핵심 은유
+
+기존 “정적인 관제 카드 모음”이 아니라 **4자매 작업실을 실시간으로 보는 화면**이 메인이다.
+
+```text
+4 Sisters Live Workboard
+  ├─ Live Work Scene: 지금 누가 어떤 작업 중인지
+  ├─ Workflow Timeline: PLAN → BUILD → REVIEW → DEPLOY 이벤트 흐름
+  ├─ Active Task Focus: 현재 선택된 작업의 상세 상태
+  ├─ Sister Activity Lanes: 하랑/나랑/다랑/이랑 역할별 lane
+  └─ Infra/Approval Side Panel: 막힌 이유, 승인 필요, 인프라 위험
+```
+
+이랑이는 여전히 단일 진입점이지만, 화면의 주인공은 “이랑이 혼자”가 아니라 **4자매가 함께 일하는 과정**이다. 하랑/나랑/다랑이 gateway로 상시 떠 있지 않아도, role execution/event log를 통해 작업 과정이 보여야 한다.
+
+---
+
+## 2. Scope
+
+### 포함 — v0
+
+- 메인 화면을 `4 Sisters Live Workboard`로 설계
+- 하랑/나랑/다랑/이랑 activity lane
+- PLAN → BUILD → REVIEW → DEPLOY live timeline
+- 현재 작업 focus panel
+- approval/blocker side panel
+- mock event stream으로 실시간처럼 흐르는 UI
+- 새 AppShell/Navigation
+- 4자매 role status 카드
+- Proxmox monitoring link/panel placeholder
+- 프로젝트 list placeholder
+- mobile-first layout
+- mock/static data로 UI 완성
+- 기존 route와 충돌하지 않는 방식으로 새 route 구성
+
+### 포함 — v1
+
+- Backend API 계약 연결
+- role agent health endpoint 연결
+- Proxmox v0 live inventory 연결
+- project/workflow API 연결
+- Socket.IO live update 일부 적용
+
+### 포함 — v2
+
+- 기존 legacy 화면 정리
+- 인증/권한 흐름 재검토
+- 실제 action gate UI
+- deployment/QA report UI
+
+### 제외 — 당장 하지 않음
+
+- 기존 DB schema 삭제
+- 기존 production deploy
+- 하랑/나랑/다랑 gateway 중지
+- Proxmox write action
+- DB migration
+- 도메인/Nginx 변경
+
+---
+
+## 3. Product IA
+
+### Primary Navigation
+
+1. **Live** — 4자매 작업 과정 실시간 메인 화면
+2. **Harness** — PLAN/Build/Review/Deploy 흐름 상세
+3. **Projects** — repo/project/sprint/task
+4. **Infra** — Proxmox/server/service health
+5. **Agents** — 이랑이 + 하랑/나랑/다랑 role health
+6. **Settings** — 토큰/환경/연동 상태. secret 값 표시 금지
+
+### Live 메인 화면
+
+메인 화면은 대시보드의 핵심 서비스다.
+
+상단:
+- 현재 active workflow 이름
+- live/snapshot/mock/fallback source badge
+- 전체 phase: Planning / Building / Reviewing / Waiting Approval / Deploying
+- pending approvals / blockers
+
+중앙:
+- **4 Sisters Live Workboard**
+  - 하랑 lane: 요구사항 정리, PLAN 작성, handoff
+  - 나랑 lane: 구현 task, test/build, diff 생성
+  - 다랑 lane: spec review, code review, QA 결과
+  - 이랑 lane: 인프라 확인, 배포 게이트, 위험 차단
+- 각 lane에는 현재 상태, 마지막 이벤트, 진행 중 작업, 다음 handoff를 표시한다.
+
+우측:
+- Active Task Focus
+  - 지금 선택한 이벤트/작업 상세
+  - 관련 파일/plan/QA report 링크
+  - tool call 또는 verification command 상태
+
+하단:
+- Workflow Timeline
+  - event stream 형태
+  - PLAN_CREATED, BUILD_STARTED, TEST_PASSED, REVIEW_REQUESTED, QA_FAILED, APPROVAL_NEEDED 같은 이벤트
+- Infra/Approval compact panel
+
+### Harness 화면
+
+Live 화면보다 상세한 작업 단위 board다.
+
+- workflow list
+- stage별 task cards
+- approval gates
+- QA report links
+- build/test logs
+
+### Agents 화면
+
+agent 상태를 4축으로 표시한다.
+
+| 항목 | 의미 |
+|---|---|
+| role | erang-main, harang-planner, narang-builder, darang-reviewer |
+| mode | main, role-skill, profile, gateway |
+| runnable | 현재 호출 가능한지 |
+| gateway | active, standby, failed, unknown |
+| server | LXC running 여부 |
+
+### Infra 화면
+
+처음엔 Proxmox monitoring PLAN과 연결한다.
+
+- `/infra/proxmox`
+- live-only v0
+- DB 없음
+- write action 없음
+
+---
+
+## 4. Design Principles
+
+1. **운영 판단이 먼저**
+   - 예쁜 오피스보다 “지금 위험한가?”를 먼저 보여준다.
+2. **상태의 출처를 숨기지 않음**
+   - live / snapshot / mock / fallback 구분.
+3. **상시 gateway와 role runnable을 분리**
+   - gateway standby는 장애가 아니다.
+4. **모바일 우선**
+   - 자기야 iPhone에서 빠르게 봐야 함.
+5. **과한 애니메이션 금지**
+   - 상태 파악 방해 금지.
+6. **하네스 원칙 내장**
+   - PLAN 승인 없이는 Build가 시작되지 않는 UI.
+
+---
+
+## 5. Repo Strategy
+
+### 기본 전략
+
+기존 repo 유지:
+
+```text
+/home/erang/hanarang-dashboard
+```
+
+새 구현은 기존 route를 바로 갈아엎지 않고, feature branch에서 새 구조를 만든다.
+
+추천 branch:
+
+```bash
+git checkout -b feature/rebuild-control-center
+```
+
+### 파일 구조 제안
+
+Frontend:
+
+```text
+frontend/app/(control)/page.tsx
+frontend/app/(control)/harness/page.tsx
+frontend/app/(control)/projects/page.tsx
+frontend/app/(control)/infra/page.tsx
+frontend/app/(control)/infra/proxmox/page.tsx
+frontend/app/(control)/agents/page.tsx
+frontend/app/(control)/settings/page.tsx
+
+frontend/components/control/AppFrame.tsx
+frontend/components/control/TopStatusBar.tsx
+frontend/components/control/NavigationRail.tsx
+frontend/components/control/StatusCard.tsx
+frontend/components/control/SourceBadge.tsx
+
+frontend/components/harness/HarnessBoard.tsx
+frontend/components/harness/PipelineStageCard.tsx
+frontend/components/harness/ApprovalQueue.tsx
+
+frontend/components/agents/AgentRoleCard.tsx
+frontend/components/agents/AgentRoleMap.tsx
+
+frontend/components/infra/InfraSummaryPanel.tsx
+frontend/components/infra/ProxmoxSummaryCard.tsx
+
+frontend/lib/control/mock-data.ts
+frontend/lib/control/types.ts
+frontend/lib/control/api.ts
+```
+
+Backend v0/v1:
+
+```text
+backend/src/infra/agents/agent-role-health.controller.ts
+backend/src/infra/agents/agent-role-health.service.ts
+backend/src/infra/proxmox/*
+backend/src/control/control.controller.ts
+backend/src/control/control.service.ts
+```
+
+---
+
+## 6. Tasks
+
+### Task 1: 현재 구조 조사
+
+**Objective:** 새 대시보드를 얹을 수 있는 실제 route/component/API 구조를 확인한다.
+
+**Files:**
+- Read: `frontend/app/**`
+- Read: `frontend/components/**`
+- Read: `frontend/AGENTS.md`
+- Read: `backend/src/app.module.ts`
+- Read: `backend/src/dashboard/**`
+- Read: `backend/src/events/**`
+
+**Commands:**
+
+```bash
+cd /home/erang/hanarang-dashboard
+find frontend/app -maxdepth 4 -type f | sort
+find frontend/components -maxdepth 3 -type f | sort
+find backend/src -maxdepth 3 -type f | sort
+```
+
+**Verification:**
+- Next.js route 구조 확인
+- styled-components 사용 패턴 확인
+- 기존 API/gateway 패턴 확인
+
+---
+
+### Task 2: 새 제품 스펙 작성
+
+**Objective:** 기존 PRD를 새 운영 구조에 맞게 대체한다.
+
+**Files:**
+- Create: `.plans/rebuild-from-scratch/product-spec.md`
+- Modify: `docs/product-specs/openclaw-office-dashboard-prd.md` 또는 새 파일 생성
+
+**Acceptance criteria:**
+- 이랑이 단일 진입점 명시
+- 하랑/나랑/다랑 role agent 모델 명시
+- gateway standby != down 명시
+- Proxmox monitoring 연결 명시
+
+**Verification:**
+- 다랑이 review에서 scope ambiguity 없음
+
+---
+
+### Task 3: Design system 초안
+
+**Objective:** 새 dashboard의 UI 토큰과 컴포넌트 원칙을 정한다.
+
+**Files:**
+- Create: `.plans/rebuild-from-scratch/design-system.md`
+- Create: `frontend/components/control/README.md`
+
+**Design tokens:**
+- background: dark infra control center
+- status colors: ok/warning/critical/standby/unknown
+- density: desktop 3-column, mobile 1-column
+- source badges: live/snapshot/mock/fallback
+
+**Verification:**
+- 모든 상태가 색상만이 아니라 text label도 가짐
+
+---
+
+### Task 4: Frontend live workboard skeleton
+
+**Objective:** mock event stream만으로 4자매가 작업하는 과정이 메인 화면에서 실시간처럼 보이게 만든다.
+
+**Files:**
+- Create: `frontend/app/(control)/page.tsx`
+- Create: `frontend/components/control/AppFrame.tsx`
+- Create: `frontend/components/control/TopStatusBar.tsx`
+- Create: `frontend/components/control/NavigationRail.tsx`
+- Create: `frontend/components/live/LiveWorkboard.tsx`
+- Create: `frontend/components/live/SisterActivityLane.tsx`
+- Create: `frontend/components/live/WorkflowTimeline.tsx`
+- Create: `frontend/components/live/ActiveTaskFocus.tsx`
+- Create: `frontend/lib/control/types.ts`
+- Create: `frontend/lib/control/mock-events.ts`
+
+**Rules:**
+- 기존 `frontend/app/page.tsx`를 바로 삭제하지 않는다.
+- 새 route가 충돌하면 `/control` 아래에 먼저 만든다.
+- mock data는 `source: 'mock'`을 반드시 표시한다.
+- 메인 화면의 첫 impression은 “4자매가 일하고 있다”여야 한다. 인프라/프로젝트 카드는 보조 패널로 둔다.
+
+**Verification:**
+
+```bash
+cd frontend
+npm run lint
+npm run build
+```
+
+---
+
+### Task 5: Harness detail board UI
+
+**Objective:** 메인 Live Workboard에서 선택한 workflow를 더 자세히 보는 상세 board를 만든다.
+
+**Files:**
+- Create: `frontend/components/harness/HarnessBoard.tsx`
+- Create: `frontend/components/harness/PipelineStageCard.tsx`
+- Create: `frontend/components/harness/ApprovalQueue.tsx`
+
+**Acceptance criteria:**
+- PLAN_REQUIRED, BUILDING, REVIEWING, WAITING_APPROVAL, DEPLOY_READY 상태 표시
+- 각 단계에 responsible role 표시
+- 승인 대기 항목이 명확함
+- Live 화면의 event와 같은 workflow id로 연결됨
+
+**Verification:**
+- mock pipeline 3개 렌더링
+- 모바일 1열 전환
+
+---
+
+### Task 6: Agent role map UI
+
+**Objective:** 이랑이 중심 role agent 상태를 표시한다.
+
+**Files:**
+- Create: `frontend/components/agents/AgentRoleMap.tsx`
+- Create: `frontend/components/agents/AgentRoleCard.tsx`
+
+**Acceptance criteria:**
+- erang-main = active main
+- harang-planner/narang-builder/darang-reviewer = role-skill runnable
+- gateway active/standby/failed와 runnable 분리
+
+---
+
+### Task 7: Infra summary placeholder
+
+**Objective:** Proxmox monitoring v0와 연결될 홈 요약 영역을 만든다.
+
+**Files:**
+- Create: `frontend/components/infra/InfraSummaryPanel.tsx`
+- Create: `frontend/components/infra/ProxmoxSummaryCard.tsx`
+
+**Acceptance criteria:**
+- live/snapshot/mock source badge
+- critical 우선 정렬
+- `/infra/proxmox`로 이동 link
+
+---
+
+### Task 8: Backend live workflow summary API
+
+**Objective:** frontend mock event stream을 backend live/snapshot API 계약으로 전환할 수 있게 한다.
+
+**Files:**
+- Create: `backend/src/control/control.module.ts`
+- Create: `backend/src/control/control.controller.ts`
+- Create: `backend/src/control/control.service.ts`
+- Create: `backend/src/control/workflow-events.gateway.ts`
+- Modify: `backend/src/app.module.ts`
+
+**Endpoints:**
+
+```text
+GET /control/summary
+GET /control/workflows/active
+WS  /control/events
+```
+
+**Response:**
+
+```ts
+type ControlSummary = {
+  activeWorkflow: WorkflowSummary | null;
+  sisters: SisterActivityLaneState[];
+  events: WorkflowEvent[];
+  infra: InfraSummary;
+  approvals: ApprovalItem[];
+  source: 'live' | 'snapshot' | 'mock' | 'fallback';
+  updatedAt: string;
+};
+```
+
+**Verification:**
+
+```bash
+cd backend
+npm test -- control
+npm run build
+```
+
+---
+
+### Task 9: API client 연결
+
+**Objective:** frontend가 `/control/summary`를 읽고 실패 시 fallback mock을 쓴다.
+
+**Files:**
+- Create: `frontend/lib/control/api.ts`
+- Modify: `frontend/app/(control)/page.tsx`
+
+**Acceptance criteria:**
+- API 실패 시 fallback 표시
+- fallback임을 UI에 명확히 표시
+- loading/error/empty 상태 있음
+
+---
+
+### Task 10: QA 문서 작성
+
+**Objective:** 다랑이가 검증할 QA checklist를 만든다.
+
+**Files:**
+- Create: `.plans/rebuild-from-scratch/qa-checklist.md`
+
+**Checks:**
+- iPhone viewport
+- source badge 정확성
+- gateway standby != down
+- mock/fallback 구분
+- PLAN approval gate 표시
+- build/lint pass
+
+---
+
+## 7. Approval Gates
+
+### Gate A — Rebuild plan approval
+
+지금 단계. 자기야가 이 PLAN을 승인해야 구현 시작 가능.
+
+### Gate B — Frontend v0 implementation
+
+허용:
+- frontend route/component 추가
+- mock/static data
+- no DB migration
+- no deploy
+
+### Gate C — Backend API v0
+
+허용:
+- read-only summary endpoint
+- mock/fallback service
+- no DB migration
+
+### Gate D — Proxmox integration
+
+별도 Proxmox monitoring PLAN과 연결.
+
+### Gate E — Deploy
+
+L3. 별도 승인 필요.
+
+---
+
+## 8. Rollback Plan
+
+- feature branch에서 작업한다.
+- 기존 `main`과 production route는 건드리지 않는다.
+- 새 route가 문제면 branch 폐기 또는 route 제거.
+- 배포 전까지 기존 사이트 영향 없음.
+
+---
+
+## 9. Open Questions
+
+1. 이름을 계속 `하나랑 대시보드`로 둘지, `하나랑 Control Center`로 바꿀지
+2. 첫 화면을 `/`로 교체할지, `/control`에서 먼저 검증할지
+3. 기존 오피스/등축 UI를 완전히 버릴지, 나중에 `Agents` 화면의 보조 시각화로 남길지
+4. 로그인/권한을 유지할지, 자기야 개인망 전용으로 단순화할지
+
+## 10. 이랑이 추천
+
+- 이름: `하나랑 Live Workboard` 또는 `하나랑 Control Center`
+- 메인 서비스: 4자매 작업 과정 실시간 화면
+- 구현 시작 route: `/control` 또는 `/live`
+- 기존 `/`는 당장 유지
+- v0는 mock event stream으로 “작업 과정이 보이는 화면”부터 완성
+- 이후 backend `/control/summary`, `/control/events` 연결
+- 마지막에 `/`를 새 live 화면으로 교체
+
+이 방식이면 자기야가 원하는 “4자매가 일하는 걸 실시간으로 보는 메인 서비스”를 먼저 만들고, 인프라/프로젝트 관제는 그 옆에 붙일 수 있어.

.plans/rebuild-from-scratch/builder-report-v0.md

@@ -0,0 +1,57 @@
+# Narang Builder Report — Live Workboard v0
+
+## Scope Executed
+
+- Plan: `.plans/rebuild-from-scratch/PLAN.md`
+- Task: Frontend live workboard skeleton
+- Scope: mock event stream 기반 4자매 작업 과정 메인 화면 구현
+
+## Files Changed
+
+- `frontend/app/page.tsx`
+  - 기존 사무실 메인 화면을 Live Workboard 메인 화면으로 교체
+- `frontend/app/control/page.tsx`
+  - `/control` route에서도 같은 Live Workboard 확인 가능
+- `frontend/components/common/Sidebar.tsx`
+  - nav에 `Live`, `Control` 항목 추가
+- `frontend/components/live/LiveWorkboard.tsx`
+  - 메인 Live Workboard container
+  - phase strip, 4자매 lane, active focus, timeline, v0 scope note 구성
+- `frontend/components/live/SisterActivityLane.tsx`
+  - 하랑/나랑/다랑/이랑 activity lane card
+- `frontend/components/live/WorkflowTimeline.tsx`
+  - mock event stream timeline
+- `frontend/components/live/ActiveTaskFocus.tsx`
+  - 선택 이벤트 상세와 approval/risk panel
+- `frontend/lib/control/types.ts`
+  - Live Workboard 타입 정의
+- `frontend/lib/control/mock-events.ts`
+  - v0 mock workflow/sister/event/approval data
+
+## Verification
+
+- `npm run lint -- components/live app/control app/page.tsx lib/control components/common/Sidebar.tsx`: PASS
+- `npm run build`: PASS
+- `curl -I http://localhost:3004/`: HTTP 200 during dev server smoke test
+- Browser accessibility snapshot: `/`에 Live Workboard, 4자매 lane, Workflow Timeline, Active Task Focus 확인
+
+## Known Existing Issues
+
+- `npm run lint` 전체 실행은 기존 파일들의 React 19 lint rule 위반 때문에 FAIL.
+- 새로 추가/수정한 Live Workboard 관련 파일만 대상으로 한 lint는 PASS.
+- 기존 오류 위치 예시:
+  - `components/office-room/SisterDetailPanel.tsx`
+  - `components/rails/FileViewerModal.tsx`
+  - `components/rails/SubTaskDetailDrawer.tsx`
+  - `components/rails/TransitionsTimeline.tsx`
+
+## Risks / Notes
+
+- 현재 데이터는 `source: mock`으로 명확히 표시됨.
+- 아직 real Socket.IO event stream은 연결하지 않음.
+- production deploy는 수행하지 않음.
+- DB/Prisma/Nginx/systemd 변경 없음.
+
+## Ready for Darang Review
+
+yes

.plans/rebuild-from-scratch/darang-review-v0.md

@@ -0,0 +1,59 @@
+# Darang Review Report — Live Workboard v0
+
+## Verdict
+
+PASS WITH IMPORTANT NOTES
+
+## Spec Compliance
+
+- [x] 메인 화면의 핵심을 4자매 작업 과정 실시간 시각화로 변경했다.
+- [x] 하랑/나랑/다랑/이랑 activity lane을 구현했다.
+- [x] Workflow Timeline을 구현했다.
+- [x] Active Task Focus를 구현했다.
+- [x] Approval / Risk side panel을 구현했다.
+- [x] `source: mock · v0`를 UI에 명확히 표시했다.
+- [x] `/` 메인 화면과 `/control` route에서 Live Workboard를 볼 수 있다.
+- [x] DB migration, 배포, 인프라 변경 없이 frontend v0 범위만 수행했다.
+
+## Critical Issues
+
+없음.
+
+## Important Issues
+
+1. 전체 `npm run lint`는 기존 legacy 파일 오류 때문에 실패한다.
+   - 새 파일/수정 파일 대상 lint는 PASS.
+   - build는 PASS.
+2. 브라우저 vision 검증은 인증 상태 차이 때문에 로그인 화면을 보기도 했다.
+   - accessibility snapshot과 curl smoke에서는 `/` route가 정상 응답하고 Live Workboard 구조가 확인됐다.
+   - 실제 운영 계정 로그인 후 시각 QA가 한 번 더 필요하다.
+
+## Minor Issues
+
+- `/control`과 `/`가 같은 화면을 보여준다. v1에서 `/control`을 상세 관제 route로 분리할지 결정 필요.
+- mock event 자동 회전은 데모용이다. 실제 event stream 연결 시 선택 이벤트 유지 정책을 다시 정해야 한다.
+
+## Verification Checked
+
+- `npm run lint -- components/live app/control app/page.tsx lib/control components/common/Sidebar.tsx`: PASS
+- `npm run build`: PASS
+- `curl -I http://localhost:3004/`: PASS, HTTP 200
+- browser snapshot: PASS, Live Workboard 주요 섹션 확인
+
+## Deployment Risk
+
+Low for local/frontend code.
+
+이유:
+- frontend-only 변경
+- DB/인프라/배포 없음
+- 기존 office 컴포넌트 삭제 없음
+- production 반영은 아직 별도 승인 필요
+
+## Required Fixes Before Proceeding
+
+없음.
+
+## Recommended Next Step
+
+v1 전에 먼저 자기야가 화면 방향을 확인한다. 방향이 맞으면 다음 task는 backend event contract (`GET /control/summary`, `WS /control/events`) 설계/구현이다.

backend/src/rails/rails.controller.ts

@@ -53,6 +53,18 @@ export class RailsController {
     return detail;
   }
 
+  @Get('file-content')
+  async fileContent(@Query('url') url?: string) {
+    if (!url) {
+      throw new HttpException('url required', HttpStatus.BAD_REQUEST);
+    }
+    const content = await this.rails.fetchFileContent(url);
+    if (content === null) {
+      throw new HttpException('file not found or not allowed', HttpStatus.NOT_FOUND);
+    }
+    return { url, content };
+  }
+
   @Get('transitions')
   async transitions(
     @Query('pipelineId') pipelineId?: string,

backend/src/rails/rails.service.ts

@@ -95,6 +95,42 @@ export class RailsService {
     return data.transitions ?? [];
   }
 
+  /**
+   * Fetch raw file content from a Git host. Restricted to an allowlist
+   * of hosts for SSRF safety.
+   *
+   * Allowlist is configured via env var GIT_RAW_ALLOWED_HOSTS — comma
+   * separated. Defaults to the hanarang-internal Gitea instance.
+   */
+  async fetchFileContent(rawUrl: string): Promise<string | null> {
+    const allowedHosts = (
+      this.config.get<string>('GIT_RAW_ALLOWED_HOSTS') ??
+      'git.nabomhalang.co.kr'
+    )
+      .split(',')
+      .map((h) => h.trim())
+      .filter(Boolean);
+
+    let parsed: URL;
+    try {
+      parsed = new URL(rawUrl);
+    } catch {
+      return null;
+    }
+    if (!allowedHosts.includes(parsed.host)) return null;
+
+    try {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), 8000);
+      const res = await fetch(rawUrl, { signal: controller.signal });
+      clearTimeout(timer);
+      if (!res.ok) return null;
+      return await res.text();
+    } catch {
+      return null;
+    }
+  }
+
   async listEscalations(opts: {
     pipelineId?: string;
     resolved?: boolean;

frontend/app/activities/page.tsx

@@ -1,311 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { PageTitle, BtnToggle } from '@/components/ui/base';
-import { API_URL } from '@/lib/config';
-
-// ─── Styled ───
-const Header = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: var(--space-md);
-  margin-bottom: var(--space-md);
-`;
-
-const HeaderMeta = styled.div`
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-secondary);
-`;
-
-const LogControls = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space-lg);
-  margin-bottom: var(--space-md);
-  flex-wrap: wrap;
-`;
-
-const FilterGroup = styled.div`
-  display: flex;
-  gap: var(--space-md);
-  flex-wrap: wrap;
-`;
-
-const SearchBox = styled.div`
-  position: relative;
-  flex-grow: 1;
-  max-width: 300px;
-`;
-
-const SearchInput = styled.input`
-  width: 100%;
-  background: #1a1a1a;
-  border: 1px solid var(--border-color);
-  color: var(--text-primary);
-  padding: 8px 12px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  outline: none;
-
-  &:focus { border-color: var(--border-hover); }
-  &::placeholder { color: var(--text-secondary); }
-`;
-
-const LogContainer = styled.div`
-  border: 1px solid var(--border-color);
-  background: #0d0d0d;
-  font-family: var(--font-mono);
-  overflow-x: auto;
-`;
-
-const LogTable = styled.table`
-  width: 100%;
-  border-collapse: collapse;
-`;
-
-const Th = styled.th`
-  text-align: left;
-  padding: 10px 12px;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border-color);
-  white-space: nowrap;
-`;
-
-const Tr = styled.tr`
-  &:hover td { background: #1a1a1a; }
-  border-bottom: 1px solid #1a1a1a;
-`;
-
-const Td = styled.td`
-  padding: 10px 12px;
-  font-size: 12px;
-  color: var(--text-secondary);
-  vertical-align: top;
-`;
-
-const TdTime = styled(Td)`
-  white-space: nowrap;
-  font-size: 11px;
-`;
-
-const TdEvent = styled(Td)`
-  color: var(--text-primary);
-`;
-
-const Tag = styled.span<{ $type: string }>`
-  display: inline-block;
-  padding: 2px 6px;
-  font-size: 9px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  background: #1a1a1a;
-  border: 1px solid;
-  white-space: nowrap;
-
-  ${({ $type }) => {
-    switch ($type) {
-      case 'SECURITY': return 'color: #ff5f5f; border-color: #ff5f5f44;';
-      case 'ORG': return 'color: #5fafff; border-color: #5fafff44;';
-      case 'BACKUP': return 'color: #5fff8a; border-color: #5fff8a44;';
-      default: return 'color: #888; border-color: #44444444;';
-    }
-  }}
-`;
-
-const BracketLabel = styled.span`
-  color: var(--text-primary);
-  font-weight: 600;
-`;
-
-const Pagination = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-md);
-  border-top: 1px solid var(--border-color);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-secondary);
-`;
-
-const PaginationBtns = styled.div`
-  display: flex;
-  gap: var(--space-sm);
-`;
-
-const PageBtn = styled.button<{ $active?: boolean }>`
-  background: ${({ $active }) => $active ? 'var(--text-primary)' : 'transparent'};
-  border: 1px solid var(--border-color);
-  color: ${({ $active }) => $active ? '#000' : 'var(--text-secondary)'};
-  padding: 4px 10px;
-  font-size: 11px;
-  cursor: pointer;
-  font-family: var(--font-mono);
-  transition: all 0.15s;
-
-  &:hover {
-    border-color: var(--border-hover);
-    color: ${({ $active }) => $active ? '#000' : 'var(--text-primary)'};
-  }
-`;
-
-// ─── Tag helpers ───
-function getTagType(action: string): string {
-  if (/security|auth|key|guard|block/i.test(action)) return 'SECURITY';
-  if (/org|sister|node|role/i.test(action)) return 'ORG';
-  if (/backup|snapshot|save/i.test(action)) return 'BACKUP';
-  return 'SYSTEM';
-}
-
-function formatDetail(detail: string | null, action: string): React.ReactNode {
-  if (!detail) return action;
-  // bracket [텍스트] 하이라이트
-  const parts = detail.split(/(\[.*?\])/g);
-  return parts.map((part, i) =>
-    part.startsWith('[') ? <BracketLabel key={i}>{part}</BracketLabel> : part,
-  );
-}
-
-const PAGE_SIZE = 20;
-const ALL_TYPES = ['ALL', 'SYSTEM', 'SECURITY', 'ORG', 'BACKUP'];
-
-interface ActivityItem {
-  id: number;
-  action: string;
-  detail: string | null;
-  createdAt: string;
-  sister?: { name: string } | null;
-  project?: { name: string } | null;
-}
-
-export default function ActivitiesPage() {
-  const [items, setItems] = useState<ActivityItem[]>([]);
-  const [total, setTotal] = useState(0);
-  const [page, setPage] = useState(0);
-  const [filter, setFilter] = useState('ALL');
-  const [search, setSearch] = useState('');
-
-  useEffect(() => {
-    const load = async () => {
-      try {
-        const res = await fetch(`${API_URL}/api/activity?limit=200&offset=0`);
-        if (res.ok) {
-          const d = await res.json();
-          setItems(d.items ?? []);
-          setTotal(d.total ?? 0);
-        }
-      } catch { /* silent */ }
-    };
-    load();
-    const iv = setInterval(load, 30000);
-    return () => clearInterval(iv);
-  }, []);
-
-  const filtered = items.filter((item) => {
-    const tagType = getTagType(item.action);
-    if (filter !== 'ALL' && tagType !== filter) return false;
-    if (search) {
-      const q = search.toLowerCase();
-      const text = `${item.action} ${item.detail ?? ''} ${item.sister?.name ?? ''}`.toLowerCase();
-      if (!text.includes(q)) return false;
-    }
-    return true;
-  });
-
-  const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
-  const paged = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
-
-  const runtimeStr = (() => {
-    return `SYS_LOG_V.4.2 // ENTRIES: ${total}`;
-  })();
-
-  return (
-    <>
-      <Header>
-        <PageTitle>
-          활동 로그 <span style={{ color: 'var(--text-secondary)', fontSize: '18px' }}>/ ACTIVITY LOG</span>
-        </PageTitle>
-        <HeaderMeta>{runtimeStr}</HeaderMeta>
-      </Header>
-
-      <LogControls>
-        <FilterGroup>
-          {ALL_TYPES.map((t) => (
-            <BtnToggle key={t} $active={filter === t} onClick={() => { setFilter(t); setPage(0); }}>
-              {t}
-            </BtnToggle>
-          ))}
-        </FilterGroup>
-        <SearchBox>
-          <SearchInput
-            placeholder="SEARCH LOGS..."
-            value={search}
-            onChange={(e) => { setSearch(e.target.value); setPage(0); }}
-          />
-        </SearchBox>
-      </LogControls>
-
-      <LogContainer>
-        <LogTable>
-          <thead>
-            <tr>
-              <Th>TIME</Th>
-              <Th>TYPE</Th>
-              <Th>EVENT</Th>
-              <Th>CODE</Th>
-            </tr>
-          </thead>
-          <tbody>
-            {paged.length === 0 ? (
-              <Tr>
-                <Td colSpan={4} style={{ textAlign: 'center', padding: 'var(--space-xl)', color: 'var(--text-secondary)' }}>
-                  로그 없음
-                </Td>
-              </Tr>
-            ) : (
-              paged.map((item) => {
-                const tagType = getTagType(item.action);
-                const code = `0x${item.id.toString(16).toUpperCase().padStart(3, '0')}`;
-                return (
-                  <Tr key={item.id}>
-                    <TdTime>
-                      {new Date(item.createdAt).toLocaleString('ko-KR', {
-                        year: 'numeric', month: '2-digit', day: '2-digit',
-                        hour: '2-digit', minute: '2-digit', second: '2-digit',
-                        hour12: false,
-                      })}
-                    </TdTime>
-                    <Td><Tag $type={tagType}>{tagType}</Tag></Td>
-                    <TdEvent>{formatDetail(item.detail, item.action)}</TdEvent>
-                    <Td style={{ fontFamily: 'var(--font-mono)', fontSize: '11px' }}>{code}</Td>
-                  </Tr>
-                );
-              })
-            )}
-          </tbody>
-        </LogTable>
-        <Pagination>
-          <span>SHOWING {paged.length} / {filtered.length} ENTRIES</span>
-          <PaginationBtns>
-            <PageBtn onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0}>PREV</PageBtn>
-            {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => (
-              <PageBtn key={i} $active={page === i} onClick={() => setPage(i)}>{i + 1}</PageBtn>
-            ))}
-            {totalPages > 5 && <span>...</span>}
-            <PageBtn onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))} disabled={page >= totalPages - 1}>NEXT</PageBtn>
-          </PaginationBtns>
-        </Pagination>
-      </LogContainer>
-    </>
-  );
-}

frontend/app/admin/costs/page.tsx

@@ -1,230 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import BarChart from '@/components/admin/BarChart';
-import { adminFetch } from '@/lib/adminFetch';
-
-type Period = 'day' | 'week' | 'month';
-
-interface CostData {
-  period: string;
-  since: string;
-  summary: {
-    totalTokens: number;
-    inputTokens: number;
-    outputTokens: number;
-    estimatedUsd: number;
-    recordCount: number;
-  };
-  bySister: Array<{ name: string; totalTokens: number; estimatedUsd: number }>;
-  byModel: Array<{ model: string; totalTokens: number; estimatedUsd: number; count: number }>;
-  timeline: Array<{ date: string; totalTokens: number; estimatedUsd: number }>;
-}
-
-const Controls = styled.div`
-  display: flex;
-  gap: 8px;
-  margin-bottom: 24px;
-`;
-
-const PeriodBtn = styled.button<{ $active: boolean }>`
-  padding: 6px 16px;
-  border-radius: 7px;
-  font-size: 13px;
-  font-weight: ${({ $active }) => $active ? '600' : '400'};
-  background: ${({ $active }) => $active ? 'rgba(88,166,255,0.15)' : 'transparent'};
-  border: 1px solid ${({ $active }) => $active ? 'rgba(88,166,255,0.4)' : 'var(--border-color)'};
-  color: ${({ $active }) => $active ? '#58A6FF' : 'var(--text-secondary)'};
-  cursor: pointer;
-  transition: all 0.15s;
-  &:hover { color: #58A6FF; border-color: rgba(88,166,255,0.3); }
-`;
-
-const SummaryGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: 14px;
-  margin-bottom: 28px;
-`;
-
-const SummaryCard = styled.div`
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-  padding: 16px 18px;
-`;
-
-const SummaryLabel = styled.div`
-  font-size: 11px;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-bottom: 6px;
-`;
-
-const SummaryValue = styled.div`
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--text-primary);
-`;
-
-const SummaryUnit = styled.span`
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin-left: 4px;
-`;
-
-const ChartsGrid = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-  margin-bottom: 28px;
-
-  @media (max-width: 900px) {
-    grid-template-columns: 1fr;
-  }
-`;
-
-const Card = styled.div`
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  padding: 20px 22px;
-`;
-
-const RecordBtn = styled.button`
-  padding: 8px 16px;
-  border-radius: 7px;
-  font-size: 12px;
-  font-weight: 600;
-  background: rgba(88,166,255,0.08);
-  border: 1px solid rgba(88,166,255,0.25);
-  color: #58A6FF;
-  cursor: pointer;
-  transition: background 0.15s;
-  &:hover { background: rgba(88,166,255,0.18); }
-  &:disabled { opacity: 0.5; cursor: not-allowed; }
-`;
-
-const EmptyNote = styled.div`
-  padding: 32px;
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 13px;
-  line-height: 1.6;
-`;
-
-function formatTokens(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
-  return String(n);
-}
-
-export default function CostsPage() {
-  const [period, setPeriod] = useState<Period>('week');
-  const [data, setData] = useState<CostData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [recording, setRecording] = useState(false);
-
-  const load = async (p: Period) => {
-    setLoading(true);
-    try {
-      const res = await adminFetch(`/api/admin/costs?period=${p}`);
-      if (res.ok) setData(await res.json());
-    } catch {
-      // silent
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => { load(period); }, [period]);
-
-  const recordAll = async () => {
-    setRecording(true);
-    try {
-      await Promise.all(['harang', 'narang', 'darang', 'erang'].map((name) =>
-        adminFetch(`/api/admin/costs/record/${name}`, { method: 'POST' }),
-      ));
-      await load(period);
-    } finally {
-      setRecording(false);
-    }
-  };
-
-  const sisterChartData = data?.bySister.map((s) => ({
-    label: { harang: '하랑이', narang: '나랑이', darang: '다랑이', erang: '이랑이' }[s.name] ?? s.name,
-    value: s.estimatedUsd,
-  })) ?? [];
-
-  const modelChartData = data?.byModel.map((m) => ({
-    label: m.model.split('/').pop() ?? m.model,
-    value: m.totalTokens,
-  })) ?? [];
-
-  const timelineChartData = data?.timeline.map((t) => ({
-    label: t.date.slice(5),
-    value: t.estimatedUsd,
-  })) ?? [];
-
-  return (
-    <>
-      <Controls>
-        {(['day', 'week', 'month'] as Period[]).map((p) => (
-          <PeriodBtn key={p} $active={period === p} onClick={() => setPeriod(p)}>
-            {p === 'day' ? '오늘' : p === 'week' ? '7일' : '30일'}
-          </PeriodBtn>
-        ))}
-        <RecordBtn onClick={recordAll} disabled={recording} style={{ marginLeft: 'auto' }}>
-          {recording ? '수집 중...' : '📊 토큰 수집'}
-        </RecordBtn>
-      </Controls>
-
-      {loading ? (
-        <div style={{ color: 'var(--text-secondary)', fontSize: '14px' }}>로딩 중...</div>
-      ) : !data || data.summary.recordCount === 0 ? (
-        <EmptyNote>
-          아직 비용 데이터가 없어.<br />
-          위 &quot;토큰 수집&quot; 버튼으로 자매들의 세션 토큰을 수집해.
-        </EmptyNote>
-      ) : (
-        <>
-          <SummaryGrid>
-            <SummaryCard>
-              <SummaryLabel>총 토큰</SummaryLabel>
-              <SummaryValue>{formatTokens(data.summary.totalTokens)}<SummaryUnit>tokens</SummaryUnit></SummaryValue>
-            </SummaryCard>
-            <SummaryCard>
-              <SummaryLabel>예상 비용</SummaryLabel>
-              <SummaryValue>${data.summary.estimatedUsd.toFixed(4)}<SummaryUnit>USD</SummaryUnit></SummaryValue>
-            </SummaryCard>
-            <SummaryCard>
-              <SummaryLabel>입력 토큰</SummaryLabel>
-              <SummaryValue>{formatTokens(data.summary.inputTokens)}</SummaryValue>
-            </SummaryCard>
-            <SummaryCard>
-              <SummaryLabel>출력 토큰</SummaryLabel>
-              <SummaryValue>{formatTokens(data.summary.outputTokens)}</SummaryValue>
-            </SummaryCard>
-          </SummaryGrid>
-
-          <ChartsGrid>
-            <Card>
-              <BarChart data={sisterChartData} unit="$" title="자매별 비용 (USD)" />
-            </Card>
-            <Card>
-              <BarChart data={modelChartData} unit=" tok" title="모델별 토큰 사용량" />
-            </Card>
-          </ChartsGrid>
-
-          {timelineChartData.length > 0 && (
-            <Card>
-              <BarChart data={timelineChartData} unit="$" title="일별 비용 추이" />
-            </Card>
-          )}
-        </>
-      )}
-    </>
-  );
-}

frontend/app/admin/harness/page.tsx

@@ -1,209 +0,0 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
-import CodeEditor from '@/components/admin/CodeEditor';
-import { adminFetch } from '@/lib/adminFetch';
-
-const SISTERS = ['harang', 'narang', 'darang', 'erang'];
-const FILES = ['SOUL.md', 'AGENTS.md', 'TOOLS.md', 'PROTOCOL.md', 'HEARTBEAT.md'];
-
-const DISPLAY_NAMES: Record<string, string> = {
-  harang: '하랑이', narang: '나랑이', darang: '다랑이', erang: '이랑이',
-};
-
-const Layout = styled.div`
-  display: grid;
-  grid-template-columns: 180px 1fr;
-  gap: 20px;
-`;
-
-const FileTree = styled.div`
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-  overflow: hidden;
-`;
-
-const TreeSection = styled.div`
-  border-bottom: 1px solid var(--border-color);
-  padding: 6px;
-  &:last-child { border-bottom: none; }
-`;
-
-const TreeLabel = styled.div`
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  padding: 6px 8px 4px;
-`;
-
-const TreeItem = styled.button<{ $active: boolean }>`
-  width: 100%;
-  text-align: left;
-  padding: 6px 10px;
-  font-size: 12px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  background: ${({ $active }) => $active ? 'rgba(88,166,255,0.12)' : 'transparent'};
-  color: ${({ $active }) => $active ? '#58A6FF' : 'var(--text-secondary)'};
-  transition: background 0.15s;
-
-  &:hover { background: rgba(240,246,252,0.06); color: var(--text-primary); }
-`;
-
-const EditorPane = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-
-const Toolbar = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-
-const PathLabel = styled.span`
-  font-size: 13px;
-  color: var(--text-secondary);
-  font-family: monospace;
-  flex: 1;
-`;
-
-const Btn = styled.button<{ $primary?: boolean; $danger?: boolean }>`
-  padding: 7px 16px;
-  border-radius: 7px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  border: 1px solid;
-  transition: all 0.15s;
-  disabled: ${({ disabled }) => disabled ? 'not-allowed' : 'pointer'};
-
-  ${({ $primary }) =>
-    $primary &&
-    `background: rgba(88,166,255,0.12); border-color: rgba(88,166,255,0.4); color: #58A6FF;
-     &:hover { background: rgba(88,166,255,0.22); }`}
-  ${({ $danger }) =>
-    $danger &&
-    `background: transparent; border-color: rgba(240,246,252,0.15); color: #8B949E;
-     &:hover { color: #E6EDF3; }`}
-  ${({ $primary, $danger }) =>
-    !$primary && !$danger &&
-    `background: transparent; border-color: rgba(240,246,252,0.15); color: #8B949E;
-     &:hover { color: #E6EDF3; }`}
-`;
-
-const ResultMsg = styled.div<{ $success: boolean }>`
-  padding: 8px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-family: monospace;
-  background: ${({ $success }) => $success ? 'rgba(0,230,118,0.08)' : 'rgba(255,23,68,0.08)'};
-  color: ${({ $success }) => $success ? '#00FF00' : '#FF1744'};
-  border: 1px solid ${({ $success }) => $success ? 'rgba(0,230,118,0.3)' : 'rgba(255,23,68,0.3)'};
-`;
-
-export default function HarnessPage() {
-  const [selected, setSelected] = useState({ sister: 'narang', file: 'SOUL.md' });
-  const [content, setContent] = useState('');
-  const [saved, setSaved] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [result, setResult] = useState<{ success: boolean; msg: string } | null>(null);
-
-  useEffect(() => {
-    setContent('');
-    setSaved('');
-    setResult(null);
-    setLoading(true);
-    adminFetch(`/api/admin/harness/${selected.sister}/${selected.file}`)
-      .then((r) => r.json())
-      .then((d) => { setContent(d.content ?? ''); setSaved(d.content ?? ''); })
-      .catch(() => setContent('(로드 실패)'))
-      .finally(() => setLoading(false));
-  }, [selected.sister, selected.file]);
-
-  const handleSave = async () => {
-    setSaving(true);
-    setResult(null);
-    try {
-      const res = await adminFetch(`/api/admin/harness/${selected.sister}/${selected.file}`, {
-        method: 'PUT',
-        body: JSON.stringify({ content }),
-      });
-      if (res.status === 401) {
-        setResult({ success: false, msg: '인증 실패 — API Key 또는 JWT 토큰을 확인해' });
-        return;
-      }
-      if (!res.ok) {
-        const text = await res.text();
-        setResult({ success: false, msg: `서버 오류 ${res.status}: ${text.slice(0, 100)}` });
-        return;
-      }
-      const d = await res.json();
-      if (d.success) {
-        setSaved(content);
-        setResult({ success: true, msg: '저장 완료' });
-      } else {
-        setResult({ success: false, msg: d.error ?? '저장 실패' });
-      }
-    } catch (e) {
-      setResult({ success: false, msg: (e as Error).message });
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const isDirty = content !== saved;
-
-  return (
-    <Layout>
-      <FileTree>
-        {SISTERS.map((s) => (
-          <TreeSection key={s}>
-            <TreeLabel>{DISPLAY_NAMES[s] ?? s}</TreeLabel>
-            {FILES.map((f) => (
-              <TreeItem
-                key={f}
-                $active={selected.sister === s && selected.file === f}
-                onClick={() => setSelected({ sister: s, file: f })}
-              >
-                {f}
-              </TreeItem>
-            ))}
-          </TreeSection>
-        ))}
-      </FileTree>
-
-      <EditorPane>
-        <Toolbar>
-          <PathLabel>
-            ~/.openclaw/workspace/{selected.file} ({DISPLAY_NAMES[selected.sister]})
-          </PathLabel>
-          {isDirty && (
-            <span style={{ fontSize: '11px', color: '#FF9800' }}>● 변경됨</span>
-          )}
-          <Btn onClick={() => { setContent(saved); setResult(null); }} $danger>되돌리기</Btn>
-          <Btn $primary onClick={handleSave} disabled={!isDirty || saving}>
-            {saving ? '저장 중...' : '💾 저장'}
-          </Btn>
-        </Toolbar>
-
-        {result && <ResultMsg $success={result.success}>{result.msg}</ResultMsg>}
-
-        {loading ? (
-          <div style={{ padding: '32px', textAlign: 'center', color: 'var(--text-secondary)', fontSize: '13px' }}>
-            로딩 중...
-          </div>
-        ) : (
-          <CodeEditor value={content} onChange={setContent} />
-        )}
-      </EditorPane>
-    </Layout>
-  );
-}

frontend/app/admin/layout.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-
-const ADMIN_TABS = [
-  { href: '/admin', label: '자매 관리' },
-  { href: '/admin/logs', label: '로그 뷰어' },
-  { href: '/admin/costs', label: '비용 모니터' },
-  { href: '/admin/repos', label: '저장소' },
-];
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
-`;
-
-const AdminHeader = styled.div`
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: var(--space-md);
-`;
-
-const TabNav = styled.div`
-  display: flex;
-  gap: var(--space-lg);
-  flex-wrap: wrap;
-`;
-
-const TabLink = styled(Link)<{ $active: boolean }>`
-  font-size: 13px;
-  font-weight: 500;
-  color: ${({ $active }) => $active ? 'var(--text-primary)' : 'var(--text-secondary)'};
-  text-decoration: none;
-  padding: var(--space-sm) 0;
-  border-bottom: 1px solid ${({ $active }) => $active ? 'var(--text-primary)' : 'transparent'};
-  transition: color 0.15s, border-color 0.15s;
-  &:hover { color: var(--text-primary); }
-`;
-
-export default function AdminLayout({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname();
-
-  return (
-    <Wrapper>
-      <AdminHeader>
-        <div style={{ fontSize: '28px', fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 'var(--space-md)' }}>
-          관리자
-        </div>
-        <TabNav>
-          {ADMIN_TABS.map((tab) => (
-            <TabLink key={tab.href} href={tab.href} $active={pathname === tab.href}>
-              {tab.label}
-            </TabLink>
-          ))}
-        </TabNav>
-      </AdminHeader>
-      {children}
-    </Wrapper>
-  );
-}

frontend/app/admin/logs/page.tsx

@@ -1,115 +0,0 @@
-'use client';
-
-import React, { useState, useCallback, useEffect } from 'react';
-import styled from 'styled-components';
-import LogTerminal from '@/components/admin/LogTerminal';
-import { adminFetch } from '@/lib/adminFetch';
-
-const SISTERS = [
-  { value: 'harang', label: '하랑이' },
-  { value: 'narang', label: '나랑이' },
-  { value: 'darang', label: '다랑이' },
-  { value: 'erang', label: '이랑이' },
-];
-
-const Controls = styled.div`
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  margin-bottom: 16px;
-`;
-
-const Select = styled.select`
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-  border-radius: 7px;
-  color: var(--text-primary);
-  padding: 8px 12px;
-  font-size: 13px;
-  cursor: pointer;
-  outline: none;
-  &:focus { border-color: #58A6FF; }
-  option { background: #1a1f2a; }
-`;
-
-const LinesInput = styled.input`
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-  border-radius: 7px;
-  color: var(--text-primary);
-  padding: 8px 12px;
-  font-size: 13px;
-  width: 80px;
-  outline: none;
-  &:focus { border-color: #58A6FF; }
-`;
-
-const FetchBtn = styled.button`
-  padding: 8px 18px;
-  border-radius: 7px;
-  font-size: 13px;
-  font-weight: 600;
-  background: rgba(88,166,255,0.1);
-  border: 1px solid rgba(88,166,255,0.35);
-  color: #58A6FF;
-  cursor: pointer;
-  transition: background 0.15s;
-  &:hover { background: rgba(88,166,255,0.2); }
-  &:disabled { opacity: 0.5; cursor: not-allowed; }
-`;
-
-const Label = styled.span`
-  font-size: 12px;
-  color: var(--text-secondary);
-`;
-
-export default function LogsPage() {
-  const [sister, setSister] = useState('narang');
-  const [lines, setLines] = useState(100);
-  const [logLines, setLogLines] = useState<string[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  const fetchLogs = useCallback(async () => {
-    setLoading(true);
-    try {
-      const res = await adminFetch(`/api/admin/logs/${sister}?lines=${lines}`);
-      const d = await res.json();
-      setLogLines(d.lines ?? []);
-    } catch {
-      setLogLines(['(로그 로드 실패)']);
-    } finally {
-      setLoading(false);
-    }
-  }, [sister, lines]);
-
-  // 마운트 시 자동 로드
-  useEffect(() => {
-    fetchLogs();
-  }, [fetchLogs]);
-
-  return (
-    <>
-      <Controls>
-        <Select value={sister} onChange={(e) => setSister(e.target.value)}>
-          {SISTERS.map((s) => (
-            <option key={s.value} value={s.value}>{s.label}</option>
-          ))}
-        </Select>
-        <Label>최근</Label>
-        <LinesInput
-          type="number"
-          value={lines}
-          onChange={(e) => setLines(parseInt(e.target.value, 10) || 100)}
-          min={10}
-          max={500}
-        />
-        <Label>줄</Label>
-        <FetchBtn onClick={fetchLogs} disabled={loading}>
-          {loading ? '로딩 중...' : '📋 로그 가져오기'}
-        </FetchBtn>
-      </Controls>
-
-      <LogTerminal lines={logLines} />
-    </>
-  );
-}

frontend/app/admin/page.tsx

@@ -1,89 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import StatusBadge from '@/components/common/StatusBadge';
-import ConfirmModal from '@/components/admin/ConfirmModal';
-import { API_URL } from '@/lib/config';
-import { adminFetch } from '@/lib/adminFetch';
-import { SISTER_DISPLAY_NAMES } from '@/lib/sisters';
-import SisterAvatar from '@/components/common/SisterAvatar';
-
-type Status = 'online' | 'offline' | 'working' | 'unknown';
-
-interface ActionResult {
-  success: boolean;
-  output: string;
-  error: string | null;
-}
-
-interface SisterAdminItem {
-  id?: number;
-  name: string;
-  status: Status;
-}
-
-const Table = styled.div`display:flex;flex-direction:column;gap:8px;user-select:none;`;
-const Row = styled.div`background:var(--bg-surface);border:1px solid var(--border-color);border-radius:10px;padding:16px 20px;display:flex;align-items:center;gap:16px;`;
-const SisterInfo = styled.div`display:flex;align-items:center;gap:10px;flex:1;`;
-const Name = styled.span`font-size:15px;font-weight:600;color:var(--text-primary);min-width:70px;`;
-const Actions = styled.div`display:flex;gap:8px;`;
-const ActionBtn = styled.button<{ $danger?: boolean }>`padding:6px 14px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid;transition:all .15s;user-select:none;${({ $danger }) => $danger ? `background: rgba(255,23,68,0.08); border-color: rgba(255,23,68,0.3); color: #FF1744; &:hover { background: rgba(255,23,68,0.18); }` : `background: rgba(88,166,255,0.08); border-color: rgba(88,166,255,0.3); color: #58A6FF; &:hover { background: rgba(88,166,255,0.18); }`}`;
-const ResultBanner = styled.div<{ $success: boolean }>`margin-top:8px;padding:8px 12px;background:${({ $success }) => $success ? 'rgba(0,230,118,0.08)' : 'rgba(255,23,68,0.08)'};border:1px solid ${({ $success }) => $success ? 'rgba(0,230,118,0.3)' : 'rgba(255,23,68,0.3)'};border-radius:6px;font-size:12px;color:${({ $success }) => $success ? '#00FF00' : '#FF1744'};font-family:monospace;white-space:pre-wrap;`;
-
-export default function AdminSistersPage() {
-  const [sisters, setSisters] = useState<SisterAdminItem[]>([]);
-  const [modal, setModal] = useState<{ action: 'restart' | 'reset'; name: string } | null>(null);
-  const [results, setResults] = useState<Record<string, ActionResult>>({});
-  const [loading, setLoading] = useState<Record<string, boolean>>({});
-
-  useEffect(() => {
-    fetch(`${API_URL}/api/sisters`).then((r) => r.json()).then(setSisters).catch(() => {});
-    const iv = setInterval(() => { fetch(`${API_URL}/api/sisters`).then((r) => r.json()).then(setSisters).catch(() => {}); }, 15000);
-    return () => clearInterval(iv);
-  }, []);
-
-  const doAction = async (action: 'restart' | 'reset', name: string) => {
-    setModal(null);
-    setLoading((p) => ({ ...p, [`${action}:${name}`]: true }));
-    try {
-      const res = await adminFetch(`/api/admin/sisters/${name}/${action}`, { method: 'POST' });
-      const data: ActionResult = await res.json();
-      setResults((p) => ({ ...p, [`${action}:${name}`]: data }));
-    } catch (e) {
-      setResults((p) => ({ ...p, [`${action}:${name}`]: { success: false, output: '', error: (e as Error).message } }));
-    } finally {
-      setLoading((p) => ({ ...p, [`${action}:${name}`]: false }));
-    }
-  };
-
-  return (
-    <>
-      <Table>
-        {sisters.map((s) => {
-          const restartResult = results[`restart:${s.name}`];
-          const resetResult = results[`reset:${s.name}`];
-          return (
-            <div key={s.id}>
-              <Row>
-                <SisterInfo>
-                  <SisterAvatar name={s.name} size={28} />
-                  <Name>{SISTER_DISPLAY_NAMES[s.name] ?? s.name}</Name>
-                  <StatusBadge status={s.status as Status} />
-                </SisterInfo>
-                <Actions>
-                  <ActionBtn onClick={() => setModal({ action: 'restart', name: s.name })} disabled={loading[`restart:${s.name}`]}>{loading[`restart:${s.name}`] ? '...' : '재시작'}</ActionBtn>
-                  <ActionBtn $danger onClick={() => setModal({ action: 'reset', name: s.name })} disabled={loading[`reset:${s.name}`]}>{loading[`reset:${s.name}`] ? '...' : '리셋'}</ActionBtn>
-                </Actions>
-              </Row>
-              {restartResult && <ResultBanner $success={restartResult.success}>재시작: {restartResult.success ? '✅ 성공' : `❌ ${restartResult.error}`}{restartResult.output && `\n${restartResult.output}`}</ResultBanner>}
-              {resetResult && <ResultBanner $success={resetResult.success}>리셋: {resetResult.success ? '✅ 성공' : `❌ ${resetResult.error}`}</ResultBanner>}
-            </div>
-          );
-        })}
-      </Table>
-
-      {modal && <ConfirmModal title={modal.action === 'restart' ? '게이트웨이 재시작' : '세션 리셋'} message={`${SISTER_DISPLAY_NAMES[modal.name] ?? modal.name}의 ${modal.action === 'restart' ? 'OpenClaw Gateway를 재시작' : '메인 세션을 초기화'}하시겠어요?`} confirmLabel={modal.action === 'restart' ? '재시작' : '리셋'} danger={modal.action === 'reset'} onConfirm={() => doAction(modal.action, modal.name)} onCancel={() => setModal(null)} />}
-    </>
-  );
-}

frontend/app/admin/repos/page.tsx

@@ -1,111 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { API_URL } from '@/lib/config';
-
-const Grid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 16px;
-`;
-
-const Card = styled.a`
-  display: block;
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-  padding: 18px 20px;
-  text-decoration: none;
-  transition: transform 0.15s, border-color 0.15s;
-
-  &:hover {
-    transform: translateY(-2px);
-    border-color: rgba(88,166,255,0.3);
-  }
-`;
-
-const RepoName = styled.div`
-  font-size: 14px;
-  font-weight: 700;
-  color: #58A6FF;
-  margin-bottom: 6px;
-`;
-
-const RepoDesc = styled.div`
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin-bottom: 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const Stats = styled.div`
-  display: flex;
-  gap: 14px;
-`;
-
-const Stat = styled.span`
-  font-size: 12px;
-  color: var(--text-secondary);
-`;
-
-const PRBadge = styled.span<{ $count: number }>`
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-weight: 600;
-  background: ${({ $count }) => $count > 0 ? 'rgba(88,166,255,0.12)' : 'rgba(139,148,158,0.08)'};
-  color: ${({ $count }) => $count > 0 ? '#58A6FF' : 'var(--text-secondary)'};
-`;
-
-const NoProjects = styled.div`
-  padding: 32px;
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 13px;
-`;
-
-interface RepoProjectItem {
-  id: number;
-  name: string;
-  description: string | null;
-  repoUrl: string;
-  openPRs: number;
-  sprintCount: number;
-  progress: number;
-}
-
-export default function ReposPage() {
-  const [projects, setProjects] = useState<RepoProjectItem[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    fetch(`${API_URL}/api/projects`)
-      .then((r) => r.json())
-      .then(setProjects)
-      .catch(() => {})
-      .finally(() => setLoading(false));
-  }, []);
-
-  if (loading) return <div style={{ color: 'var(--text-secondary)', fontSize: '14px' }}>로딩 중...</div>;
-
-  if (!projects.length) return <NoProjects>등록된 프로젝트 없음</NoProjects>;
-
-  return (
-    <Grid>
-      {projects.map((p) => (
-        <Card key={p.id} href={p.repoUrl} target="_blank" rel="noopener">
-          <RepoName>📁 {p.name}</RepoName>
-          {p.description && <RepoDesc>{p.description}</RepoDesc>}
-          <Stats>
-            <PRBadge $count={p.openPRs}>PR {p.openPRs}</PRBadge>
-            <Stat>Sprint {p.sprintCount}개</Stat>
-            <Stat>진행률 {p.progress}%</Stat>
-          </Stats>
-        </Card>
-      ))}
-    </Grid>
-  );
-}

frontend/app/control/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import LiveWorkboard from '@/components/live/LiveWorkboard';
+
+export default function ControlPage() {
+  return <LiveWorkboard />;
+}

frontend/app/office/page.tsx

@@ -1,246 +0,0 @@
-'use client';
-
-import React, { useCallback, useEffect, useState, useMemo } from 'react';
-import styled from 'styled-components';
-import { API_URL } from '@/lib/config';
-import {
-  useRailsSocket,
-  type RailsPipelineSummary,
-  type RailsSubTaskNode,
-} from '@/lib/useRailsSocket';
-import OfficeFloor from '@/components/office/OfficeFloor';
-import SubTaskTree from '@/components/rails/SubTaskTree';
-import SubTaskDetailDrawer from '@/components/rails/SubTaskDetailDrawer';
-
-type SisterKey = 'harang' | 'narang' | 'darang' | 'erang';
-
-const Page = styled.main`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 24px 32px;
-  max-width: 1600px;
-  margin: 0 auto;
-  width: 100%;
-`;
-
-const Header = styled.header`
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 24px;
-  flex-wrap: wrap;
-`;
-
-const TitleBlock = styled.div``;
-
-const Title = styled.h1`
-  font-size: 28px;
-  font-weight: 700;
-  margin: 0 0 4px;
-  letter-spacing: -0.01em;
-`;
-
-const Subtitle = styled.p`
-  font-size: 13px;
-  color: var(--text-secondary);
-  margin: 0;
-`;
-
-const StatsBar = styled.div`
-  display: flex;
-  gap: 28px;
-`;
-
-const StatBlock = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`;
-
-const StatNum = styled.span`
-  font-family: var(--font-mono);
-  font-size: 24px;
-  font-weight: 700;
-`;
-
-const StatLabel = styled.span`
-  font-size: 11px;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-`;
-
-const TwoCol = styled.div`
-  display: grid;
-  grid-template-columns: 1fr minmax(360px, 460px);
-  gap: 24px;
-
-  @media (max-width: 1100px) {
-    grid-template-columns: 1fr;
-  }
-`;
-
-const Card = styled.section`
-  background: var(--bg-input);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-
-const CardTitle = styled.h2`
-  font-size: 13px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-secondary);
-  margin: 0;
-`;
-
-const Empty = styled.div`
-  padding: 60px 20px;
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 13px;
-`;
-
-export default function OfficePage() {
-  const [pipelines, setPipelines] = useState<RailsPipelineSummary[]>([]);
-  const [trees, setTrees] = useState<Map<string, RailsSubTaskNode[]>>(new Map());
-  const [selectedSister, setSelectedSister] = useState<SisterKey | null>(null);
-  const [detailNodeId, setDetailNodeId] = useState<string | null>(null);
-
-  const { connected } = useRailsSocket({
-    onPipelinesSnapshot: (next) => setPipelines(next),
-    onSubTasksUpdated: (pid, tree) => {
-      setTrees((prev) => {
-        const m = new Map(prev);
-        m.set(pid, tree);
-        return m;
-      });
-    },
-  });
-
-  // Initial fetch
-  useEffect(() => {
-    fetch(`${API_URL}/api/rails/pipelines`, { credentials: 'include' })
-      .then((r) => r.json())
-      .then(async (data: { pipelines: RailsPipelineSummary[] }) => {
-        setPipelines(data.pipelines);
-        const recent = data.pipelines.slice(0, 6);
-        const treeMap = new Map<string, RailsSubTaskNode[]>();
-        for (const p of recent) {
-          try {
-            const r = await fetch(
-              `${API_URL}/api/rails/pipelines/${p.id}/sub-tasks`,
-              { credentials: 'include' },
-            );
-            const d = (await r.json()) as { tree: RailsSubTaskNode[] };
-            treeMap.set(p.id, d.tree);
-          } catch {
-            /* ignore */
-          }
-        }
-        setTrees(treeMap);
-      })
-      .catch(() => {
-        /* ignore */
-      });
-  }, []);
-
-  const stats = useMemo(() => {
-    const active = pipelines.filter(
-      (p) => !['done', 'aborted'].includes(p.currentState),
-    );
-    const escalated = pipelines.filter((p) => p.currentState === 'escalated');
-    return {
-      total: pipelines.length,
-      active: active.length,
-      escalated: escalated.length,
-    };
-  }, [pipelines]);
-
-  const selectedSubTree = useMemo(() => {
-    if (!selectedSister) return [];
-    const out: RailsSubTaskNode[] = [];
-    for (const tree of trees.values()) {
-      const filterMine = (nodes: RailsSubTaskNode[]): RailsSubTaskNode[] =>
-        nodes
-          .filter((n) => n.agentName === selectedSister)
-          .map((n) => ({ ...n, children: filterMine(n.children) }));
-      out.push(...filterMine(tree));
-    }
-    return out;
-  }, [selectedSister, trees]);
-
-  const handleSelectSister = useCallback((key: SisterKey | null) => {
-    setSelectedSister(key);
-  }, []);
-
-  return (
-    <Page>
-      <Header>
-        <TitleBlock>
-          <Title>Digital Office</Title>
-          <Subtitle>
-            4자매 멀티에이전트 실시간 작업장{' '}
-            <span style={{ opacity: connected ? 1 : 0.4 }}>
-              {connected ? '· LIVE' : '· offline'}
-            </span>
-          </Subtitle>
-        </TitleBlock>
-
-        <StatsBar>
-          <StatBlock>
-            <StatNum>{stats.total}</StatNum>
-            <StatLabel>Total</StatLabel>
-          </StatBlock>
-          <StatBlock>
-            <StatNum style={{ color: '#22c55e' }}>{stats.active}</StatNum>
-            <StatLabel>Active</StatLabel>
-          </StatBlock>
-          <StatBlock>
-            <StatNum style={{ color: stats.escalated > 0 ? '#ef4444' : undefined }}>
-              {stats.escalated}
-            </StatNum>
-            <StatLabel>Escalated</StatLabel>
-          </StatBlock>
-        </StatsBar>
-      </Header>
-
-      <TwoCol>
-        <OfficeFloor
-          pipelines={pipelines}
-          treesByPipeline={trees}
-          selectedSister={selectedSister}
-          onSelectSister={handleSelectSister}
-        />
-
-        <Card>
-          <CardTitle>
-            {selectedSister ? `${selectedSister} 작업` : '디테일'}
-          </CardTitle>
-          {selectedSister ? (
-            selectedSubTree.length > 0 ? (
-              <SubTaskTree tree={selectedSubTree} onSelectNode={setDetailNodeId} />
-            ) : (
-              <Empty>{selectedSister}는 지금 노는 중</Empty>
-            )
-          ) : (
-            <Empty>왼쪽 자매 책상 클릭해서 작업 트리 보기</Empty>
-          )}
-        </Card>
-      </TwoCol>
-
-      {detailNodeId && (
-        <SubTaskDetailDrawer
-          subTaskId={detailNodeId}
-          onClose={() => setDetailNodeId(null)}
-        />
-      )}
-    </Page>
-  );
-}

frontend/app/org/page.tsx

@@ -1,280 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { API_URL } from '@/lib/config';
-
-// ─── Styled ───
-const MainViewport = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xl);
-  min-height: 80vh;
-`;
-
-const HeaderInfo = styled.div`
-  display: flex;
-  gap: var(--space-xl);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: var(--space-md);
-
-  span { color: var(--text-primary); }
-`;
-
-const TreeContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow-x: auto;
-  padding: var(--space-xl) 0;
-
-  @media (max-width: 767px) {
-    align-items: flex-start;
-  }
-`;
-
-const NodeGroup = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-`;
-
-const TerminalCard = styled.div<{ $level: 'high' | 'mid' | 'low' | 'none' }>`
-  border: 1px solid ${({ $level }) => ({
-    high: '#f43f5e',
-    mid: '#3b82f6',
-    low: '#10b981',
-    none: '#525252',
-  })[$level]};
-  border-left-width: 3px;
-  padding: var(--space-md) var(--space-lg);
-  background: var(--bg-main);
-  min-width: 200px;
-  max-width: 260px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-  transition: border-color 0.2s, box-shadow 0.2s;
-  position: relative;
-  cursor: default;
-
-  &:hover {
-    box-shadow: 0 12px 36px rgba(0,0,0,0.7);
-  }
-`;
-
-const NodeLabel = styled.div`
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: var(--space-sm);
-
-  span {
-    color: var(--text-secondary);
-    margin-right: var(--space-xs);
-    font-family: var(--font-mono);
-    font-size: 11px;
-  }
-`;
-
-const BadgeRow = styled.div`
-  display: flex;
-  gap: var(--space-xs);
-  flex-wrap: wrap;
-`;
-
-const Badge = styled.div`
-  background: #1a1a1a;
-  border: 1px solid var(--border-color);
-  padding: 2px 6px;
-  font-size: 9px;
-  font-family: var(--font-mono);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-secondary);
-
-  b { color: var(--text-primary); font-weight: normal; }
-`;
-
-const TreeConnector = styled.div`
-  width: 1px;
-  height: 24px;
-  background: var(--border-color);
-  margin: 0 auto;
-`;
-
-const TreeBranch = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const TreeChildren = styled.div`
-  display: flex;
-  gap: var(--space-xl);
-  align-items: flex-start;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: calc(var(--space-xl) / 2 + 100px);
-    right: calc(var(--space-xl) / 2 + 100px);
-    height: 1px;
-    background: var(--border-color);
-  }
-
-  @media (max-width: 767px) {
-    flex-direction: column;
-    gap: var(--space-lg);
-
-    &::before { display: none; }
-  }
-`;
-
-const PageFooter = styled.footer`
-  margin-top: auto;
-  width: 100%;
-  padding: var(--space-lg) 0;
-  display: flex;
-  justify-content: space-between;
-  border-top: 1px solid var(--border-color);
-  font-family: var(--font-mono);
-  color: var(--text-secondary);
-  font-size: 10px;
-`;
-
-type Level = 'high' | 'mid' | 'low' | 'none';
-
-interface OrgData {
-  owner: { name: string; role: string };
-  sisters: Array<{
-    name: string;
-    role: string;
-    description?: string;
-    status?: string;
-    lxcId?: number;
-  }>;
-  pipeline: Array<{ from: string; to: string; label: string }>;
-}
-
-const LEVEL_MAP: Record<string, Level> = {
-  Orchestrator: 'high',
-  Generator: 'mid',
-  Evaluator: 'mid',
-  'Infra Manager': 'low',
-};
-
-const ROLE_TAG: Record<string, string> = {
-  Orchestrator: 'ORCH',
-  Generator: 'GEN',
-  Evaluator: 'EVAL',
-  'Infra Manager': 'INFRA',
-};
-
-const LXC_ID: Record<string, number> = {
-  harang: 104,
-  narang: 105,
-  darang: 106,
-  erang: 107,
-};
-
-export default function OrgPage() {
-  const [orgData, setOrgData] = useState<OrgData | null>(null);
-  const ts = new Date().toLocaleDateString('ko-KR').replace(/\. /g, '.').replace('.', '') + '_' +
-    new Date().toLocaleTimeString('ko-KR', { hour12: false, hour: '2-digit', minute: '2-digit' });
-
-  useEffect(() => {
-    fetch(`${API_URL}/api/org`)
-      .then((r) => r.json())
-      .then(setOrgData)
-      .catch(() => {});
-  }, []);
-
-  const sisters = orgData?.sisters ?? [];
-
-  return (
-    <MainViewport>
-      <HeaderInfo>
-        <div>SYS_TYPE: <span>CORE_ROOT_01</span></div>
-        <div>TIMESTAMP: <span style={{ color: 'var(--text-secondary)' }}>{ts}</span></div>
-      </HeaderInfo>
-
-      <TreeContainer>
-        <NodeGroup>
-          {/* HQ */}
-          <TerminalCard $level="high">
-            <NodeLabel><span>[HQ]</span> 하나랑 글로벌</NodeLabel>
-            <BadgeRow>
-              <Badge>MEM: <b>{sisters.length + 1}</b></Badge>
-              <Badge>S_ADMIN</Badge>
-              <Badge>LV_09</Badge>
-            </BadgeRow>
-          </TerminalCard>
-          <TreeConnector />
-
-          {/* 자매 레벨 */}
-          <TreeBranch>
-            <TreeChildren>
-              {/* 하랑이 (Orchestrator) */}
-              {sisters.filter((s) => s.role === 'Orchestrator').map((s) => (
-                <NodeGroup key={s.name}>
-                  <TerminalCard $level={LEVEL_MAP[s.role] ?? 'none'}>
-                    <NodeLabel>
-                      <span>[{ROLE_TAG[s.role] ?? s.role}]</span>
-                      {s.name === 'harang' ? '하랑이' : s.name}
-                    </NodeLabel>
-                    <BadgeRow>
-                      <Badge>LXC: <b>{LXC_ID[s.name] ?? '---'}</b></Badge>
-                      <Badge>{ROLE_TAG[s.role] ?? s.role}</Badge>
-                      <Badge>{s.status === 'online' ? 'ACTIVE' : s.status === 'offline' ? 'STBY' : 'RUN'}</Badge>
-                    </BadgeRow>
-                  </TerminalCard>
-                  <TreeConnector />
-                  <TreeBranch>
-                    <TreeChildren>
-                      {/* 나랑/다랑/이랑 */}
-                      {sisters.filter((s2) => s2.role !== 'Orchestrator').map((s2) => (
-                        <NodeGroup key={s2.name}>
-                          <TerminalCard $level={LEVEL_MAP[s2.role] ?? 'none'}>
-                            <NodeLabel>
-                              {s2.name === 'narang' ? '나랑이' : s2.name === 'darang' ? '다랑이' : '이랑이'}
-                            </NodeLabel>
-                            <BadgeRow>
-                              <Badge>LXC: <b>{LXC_ID[s2.name] ?? '---'}</b></Badge>
-                              <Badge>{ROLE_TAG[s2.role] ?? s2.role}</Badge>
-                              <Badge>{s2.status === 'online' ? 'ON' : s2.status === 'offline' ? '--' : 'RUN'}</Badge>
-                            </BadgeRow>
-                          </TerminalCard>
-                        </NodeGroup>
-                      ))}
-                    </TreeChildren>
-                  </TreeBranch>
-                </NodeGroup>
-              ))}
-
-              {/* Orchestrator 없을 때 fallback */}
-              {sisters.filter((s) => s.role === 'Orchestrator').length === 0 && (
-                <NodeGroup>
-                  <TerminalCard $level="none">
-                    <NodeLabel>데이터 없음</NodeLabel>
-                    <BadgeRow><Badge>N/A</Badge></BadgeRow>
-                  </TerminalCard>
-                </NodeGroup>
-              )}
-            </TreeChildren>
-          </TreeBranch>
-        </NodeGroup>
-      </TreeContainer>
-
-      <PageFooter>
-        <div>TOTAL_NODES: {String(sisters.length + 1).padStart(2, '0')}</div>
-        <div>STATUS: SYNC_COMPLETE</div>
-      </PageFooter>
-    </MainViewport>
-  );
-}

frontend/app/projects/[id]/page.tsx

@@ -1,266 +0,0 @@
-'use client';
-
-import React, { useEffect, useMemo, useState } from 'react';
-import { useParams } from 'next/navigation';
-import styled from 'styled-components';
-import Link from 'next/link';
-import { LabelMeta, PageTitle, SectionTitle, TechBar, TechBarFill, BtnToggle } from '@/components/ui/base';
-import { API_URL } from '@/lib/config';
-import SisterAvatar from '@/components/common/SisterAvatar';
-
-interface TaskItem { id: number; taskId: string; title: string; assignee: string; status: string; }
-interface SprintItem { id: number; number: number; name: string; status: string; progress: number; tasks: TaskItem[]; }
-interface HistoryItem { label: string; kind: 'sprint' | 'hotfix'; summary?: string | null; description?: string | null; }
-interface SisterState { name: string; status: string; }
-interface CommitItem { sha?: string; html_url?: string; commit?: { message?: string; author?: { date?: string; name?: string } }; author?: { login?: string } | null; }
-interface BranchItem { name?: string; protected?: boolean; commit?: { id?: string } }
-interface PullItem { id?: number; number?: number; title?: string; html_url?: string; state?: string; merged?: boolean; user?: { login?: string }; created_at?: string; }
-interface ProjectDetail {
-  id: number;
-  name: string;
-  repoUrl: string;
-  status: string;
-  phase: string;
-  currentSprint?: string | null;
-  latestQa: { label: string | null; status: 'passed' | 'failed' | 'unknown'; blockerCount: number; summary: string | null } | null;
-  deploy: { branch: string; status: string; latestDeployAt: string | null; redeployRequired: boolean; note: string };
-}
-
-const Breadcrumb = styled.div`font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);margin-bottom:var(--space-md);a{color:var(--text-secondary);text-decoration:none;&:hover{color:var(--text-primary);}}`;
-const PageTitleRow = styled.div`display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-lg);margin-bottom:var(--space-xl);flex-wrap:wrap;`;
-const ProjectGrid = styled.div`display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-xl);align-items:start;@media (max-width:1199px){display:flex;flex-direction:column;}`;
-const Panel = styled.section<{ $column?: 'main' | 'side'; $mobileOrder?: number }>`border:1px solid var(--border-color);padding:var(--space-lg);background:var(--bg-surface);${({$column})=>$column==='side'?'grid-column:2;':'grid-column:1;'}@media (max-width:1199px){order:${({$mobileOrder=0})=>$mobileOrder};}`;
-const FlowList = styled.div`display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-sm);@media (max-width:767px){grid-template-columns:1fr;}`;
-const FlowItem = styled.div<{ $active:boolean }>`border:1px solid ${({$active})=>$active?'var(--text-primary)':'var(--border-color)'};padding:var(--space-md);background:${({$active})=>$active?'#111':'transparent'};display:flex;flex-direction:column;gap:4px;`;
-const LedgerList = styled.div`display:flex;flex-direction:column;gap:var(--space-md);`;
-const LedgerItem = styled.div`display:flex;flex-direction:column;gap:8px;border-top:1px solid #1a1a1a;padding-top:var(--space-md);&:first-child{border-top:none;padding-top:0;}`;
-const Meta = styled.div`font-size:11px;color:var(--text-secondary);font-family:var(--font-mono);`;
-const NodeStack = styled.div`display:flex;flex-direction:column;gap:var(--space-sm);`;
-const NodeMiniCard = styled.div`border:1px solid var(--border-color);padding:var(--space-sm) var(--space-md);display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);`;
-const NodeInfo = styled.div`display:flex;align-items:center;gap:var(--space-sm);`;
-const NodeDot = styled.div<{ $status:string }>`width:8px;height:8px;border-radius:50%;background:${({$status})=>$status==='online'?'#00ff88':$status==='working'?'#5fafff':'#555'};`;
-const Empty = styled.div`padding:var(--space-xl) 0;color:var(--text-secondary);font-size:13px;font-family:var(--font-mono);`;
-const TabBar = styled.div`display:flex;gap:var(--space-sm);margin-bottom:var(--space-xl);flex-wrap:wrap;`;
-const GitList = styled.div`display:flex;flex-direction:column;gap:var(--space-sm);`;
-const GitItem = styled.a`border:1px solid var(--border-color);padding:12px var(--space-lg);text-decoration:none;color:var(--text-primary);display:flex;justify-content:space-between;gap:var(--space-md);align-items:center;`;
-const GitPrimary = styled.div`display:flex;flex-direction:column;gap:4px;min-width:0;`;
-const GitTitle = styled.div`font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;`;
-
-const ROLE_LABEL: Record<string, string> = { harang: 'ORCHESTRATOR', narang: 'GENERATOR', darang: 'EVALUATOR', erang: 'INFRA' };
-const ROLE_NAME: Record<string, string> = { harang: '하랑', narang: '나랑', darang: '다랑', erang: '이랑' };
-
-function formatDate(value?: string | null): string {
-  if (!value) return '-';
-  return new Date(value).toLocaleString('ko-KR');
-}
-
-export default function ProjectDetailPage() {
-  const { id } = useParams<{ id: string }>();
-  const [project, setProject] = useState<ProjectDetail | null>(null);
-  const [tasks, setTasks] = useState<SprintItem[]>([]);
-  const [history, setHistory] = useState<HistoryItem[]>([]);
-  const [sisters, setSisters] = useState<SisterState[]>([]);
-  const [commits, setCommits] = useState<CommitItem[]>([]);
-  const [branches, setBranches] = useState<BranchItem[]>([]);
-  const [pulls, setPulls] = useState<PullItem[]>([]);
-  const [tab, setTab] = useState<'overview'|'commits'|'branches'|'prs'>('overview');
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    Promise.allSettled([
-      fetch(`${API_URL}/api/projects/${id}`),
-      fetch(`${API_URL}/api/projects/${id}/tasks`),
-      fetch(`${API_URL}/api/projects/${id}/history`),
-      fetch(`${API_URL}/api/sisters`),
-    ]).then(async ([projectRes, tasksRes, historyRes, sistersRes]) => {
-      if (projectRes.status === 'fulfilled' && projectRes.value.ok) setProject(await projectRes.value.json());
-      if (tasksRes.status === 'fulfilled' && tasksRes.value.ok) setTasks(await tasksRes.value.json());
-      if (historyRes.status === 'fulfilled' && historyRes.value.ok) setHistory(await historyRes.value.json());
-      if (sistersRes.status === 'fulfilled' && sistersRes.value.ok) setSisters(await sistersRes.value.json());
-    }).finally(() => setLoading(false));
-  }, [id]);
-
-  useEffect(() => {
-    if (tab === 'commits' && commits.length === 0) fetch(`${API_URL}/api/projects/${id}/commits?limit=20`).then((r) => r.ok ? r.json() : []).then(setCommits).catch(() => {});
-    if (tab === 'branches' && branches.length === 0) fetch(`${API_URL}/api/projects/${id}/branches`).then((r) => r.ok ? r.json() : []).then(setBranches).catch(() => {});
-    if (tab === 'prs' && pulls.length === 0) fetch(`${API_URL}/api/projects/${id}/pulls?state=all`).then((r) => r.ok ? r.json() : []).then(setPulls).catch(() => {});
-  }, [tab, id, commits.length, branches.length, pulls.length]);
-
-  const allTasks = useMemo(() => tasks.flatMap((sprint) => sprint.tasks ?? []), [tasks]);
-  const assignedNodes = useMemo(() => {
-    const names = Array.from(new Set(allTasks.map((task) => task.assignee).filter(Boolean)));
-    return (names.length > 0 ? names : ['harang', 'narang', 'darang', 'erang']).map((name) => ({
-      name,
-      status: sisters.find((sister) => sister.name === name)?.status ?? 'offline',
-    }));
-  }, [allTasks, sisters]);
-  const hotfixes = history.filter((entry) => entry.kind === 'hotfix');
-  const currentSprintMeta = useMemo(() => {
-    if (project?.currentSprint) return project.currentSprint;
-
-    const activeSprint = tasks.find((sprint) => sprint.status === 'in_progress');
-    if (activeSprint) return activeSprint.name || String(activeSprint.number).padStart(2, '0');
-
-    const latestSprint = tasks.at(-1);
-    if (latestSprint?.status === 'done') return 'COMPLETED';
-    if (latestSprint) return latestSprint.name || String(latestSprint.number).padStart(2, '0');
-
-    return 'BACKLOG';
-  }, [project, tasks]);
-
-  if (loading) return <Empty>LOADING...</Empty>;
-  if (!project) return <Empty>PROJECT NOT FOUND</Empty>;
-
-  const flowStates = [
-    { key: 'PLANNING', title: 'Planning', active: project.phase === 'PLANNING' },
-    { key: 'IMPLEMENT', title: 'Implement', active: project.phase === 'IMPLEMENT' },
-    { key: 'QA', title: 'QA', active: project.phase === 'QA' },
-    { key: 'READY FOR DEPLOY', title: 'Merge to Main', active: project.phase === 'READY FOR DEPLOY' },
-    { key: 'DEPLOYED', title: 'Redeploy', active: project.phase === 'DEPLOYED' },
-  ];
-
-  return (
-    <>
-      <Breadcrumb><Link href="/projects">PROJECTS</Link> / P-{String(project.id).padStart(3, '0')} / {project.name}</Breadcrumb>
-      <PageTitleRow>
-        <PageTitle>
-          {project.name}
-          {project.repoUrl && <a href={project.repoUrl} target="_blank" rel="noopener" style={{ fontSize: '12px', color: '#5fafff', marginLeft: 'var(--space-md)', fontWeight: 400 }}>↗ GITEA</a>}
-        </PageTitle>
-        <LabelMeta><span>STATUS:</span>{project.status?.toUpperCase()} / <span>SPRINT:</span>{currentSprintMeta} / <span>DEPLOY:</span>{project.deploy.status}</LabelMeta>
-      </PageTitleRow>
-
-      <TabBar>
-        <BtnToggle $active={tab === 'overview'} onClick={() => setTab('overview')}>Overview</BtnToggle>
-        <BtnToggle $active={tab === 'commits'} onClick={() => setTab('commits')}>Commits</BtnToggle>
-        <BtnToggle $active={tab === 'branches'} onClick={() => setTab('branches')}>Branches</BtnToggle>
-        <BtnToggle $active={tab === 'prs'} onClick={() => setTab('prs')}>Pull Requests</BtnToggle>
-      </TabBar>
-
-      {tab === 'overview' && (
-        <ProjectGrid>
-          <Panel $column="main" $mobileOrder={1}>
-            <SectionTitle><span>DELIVERY FLOW</span><LabelMeta>{project.phase}</LabelMeta></SectionTitle>
-            <FlowList>
-              {flowStates.map((item) => (
-                <FlowItem key={item.key} $active={item.active}>
-                  <LabelMeta>{item.title}</LabelMeta>
-                  <Meta>{item.key}</Meta>
-                </FlowItem>
-              ))}
-            </FlowList>
-          </Panel>
-
-          <Panel $column="side" $mobileOrder={2}>
-            <SectionTitle><span>QA STATUS</span><LabelMeta>{project.latestQa?.status ?? 'unknown'}</LabelMeta></SectionTitle>
-            <Meta>{project.latestQa?.label ?? 'QA 문서 없음'}</Meta>
-            <div style={{ marginTop: 'var(--space-md)', fontSize: '13px', color: 'var(--text-primary)' }}>{project.latestQa?.summary ?? 'latest QA 없음'}</div>
-            <Meta style={{ marginTop: 'var(--space-md)' }}>{project.latestQa?.status === 'passed' ? 'QA PASSED' : project.latestQa?.status === 'failed' ? `QA FAILED · ${project.latestQa.blockerCount} BLOCKERS` : 'QA PENDING'}</Meta>
-          </Panel>
-
-          <Panel $column="side" $mobileOrder={3}>
-            <SectionTitle><span>DEPLOY STATUS</span><LabelMeta>{project.deploy.branch}</LabelMeta></SectionTitle>
-            <Meta>{project.deploy.status}</Meta>
-            <Meta style={{ marginTop: 'var(--space-sm)' }}>{project.deploy.note}</Meta>
-            <Meta style={{ marginTop: 'var(--space-sm)' }}>{project.deploy.latestDeployAt ? formatDate(project.deploy.latestDeployAt) : 'LAST DEPLOY UNKNOWN'}</Meta>
-          </Panel>
-
-          <Panel $column="main" $mobileOrder={4}>
-            <SectionTitle><span>SPRINT LEDGER</span><LabelMeta>{tasks.length} SPRINTS</LabelMeta></SectionTitle>
-            <LedgerList>
-              {tasks.map((sprint) => (
-                <LedgerItem key={sprint.id}>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-md)', flexWrap: 'wrap' }}>
-                    <div>
-                      <div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary)' }}>SPRINT {String(sprint.number).padStart(2, '0')} · {sprint.name}</div>
-                      <Meta>{sprint.tasks?.length ?? 0} TASKS · {sprint.tasks?.filter((task) => task.status === 'done').length ?? 0} DONE</Meta>
-                    </div>
-                    <LabelMeta>{sprint.status}</LabelMeta>
-                  </div>
-                  <TechBar><TechBarFill $width={sprint.progress ?? 0} /></TechBar>
-                </LedgerItem>
-              ))}
-              {tasks.length === 0 && <Empty>NO SPRINTS</Empty>}
-            </LedgerList>
-          </Panel>
-
-          <Panel $column="main" $mobileOrder={5}>
-            <SectionTitle><span>HOTFIX HISTORY</span><LabelMeta>{hotfixes.length} ITEMS</LabelMeta></SectionTitle>
-            <LedgerList>
-              {hotfixes.map((entry) => (
-                <LedgerItem key={entry.label}>
-                  <div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary)' }}>{entry.label}</div>
-                  <Meta>{entry.summary ?? entry.description ?? 'hotfix summary 없음'}</Meta>
-                </LedgerItem>
-              ))}
-              {hotfixes.length === 0 && <Empty>NO HOTFIX HISTORY</Empty>}
-            </LedgerList>
-          </Panel>
-
-          <Panel $column="side" $mobileOrder={6}>
-            <SectionTitle><span>ASSIGNED NODES</span><LabelMeta>LIVE STATUS</LabelMeta></SectionTitle>
-            <NodeStack>
-              {assignedNodes.map((node) => (
-                <NodeMiniCard key={node.name}>
-                  <NodeInfo>
-                    <SisterAvatar name={node.name} size={28} />
-                    <div>
-                      <div style={{ fontSize: '13px', color: 'var(--text-primary)', fontWeight: 600 }}>{ROLE_NAME[node.name] ?? node.name}</div>
-                      <Meta>{ROLE_LABEL[node.name] ?? 'NODE'}</Meta>
-                    </div>
-                  </NodeInfo>
-                  <NodeDot $status={node.status} />
-                </NodeMiniCard>
-              ))}
-            </NodeStack>
-          </Panel>
-        </ProjectGrid>
-      )}
-
-      {tab === 'commits' && (
-        <GitList>
-          {commits.map((commit) => (
-            <GitItem key={commit.sha} href={commit.html_url ?? '#'} target="_blank" rel="noopener">
-              <GitPrimary>
-                <GitTitle>{commit.commit?.message?.split('\n')[0] ?? commit.sha ?? 'UNKNOWN COMMIT'}</GitTitle>
-                <Meta>{commit.commit?.author?.name ?? commit.author?.login ?? '-'}</Meta>
-              </GitPrimary>
-              <Meta>{commit.sha?.slice(0, 7) ?? '-'} · {formatDate(commit.commit?.author?.date)}</Meta>
-            </GitItem>
-          ))}
-          {commits.length === 0 && <Empty>NO COMMITS</Empty>}
-        </GitList>
-      )}
-
-      {tab === 'branches' && (
-        <GitList>
-          {branches.map((branch) => (
-            <GitItem key={branch.name} href={project.repoUrl} target="_blank" rel="noopener">
-              <GitPrimary>
-                <GitTitle>{branch.name ?? 'UNKNOWN BRANCH'}</GitTitle>
-                <Meta>{branch.protected ? 'PROTECTED' : 'ACTIVE BRANCH'}</Meta>
-              </GitPrimary>
-              <Meta>{branch.commit?.id?.slice(0, 7) ?? '-'}</Meta>
-            </GitItem>
-          ))}
-          {branches.length === 0 && <Empty>NO BRANCHES</Empty>}
-        </GitList>
-      )}
-
-      {tab === 'prs' && (
-        <GitList>
-          {pulls.map((pull) => (
-            <GitItem key={pull.id} href={pull.html_url ?? '#'} target="_blank" rel="noopener">
-              <GitPrimary>
-                <GitTitle>#{pull.number ?? '-'} {pull.title ?? 'UNKNOWN PR'}</GitTitle>
-                <Meta>{pull.user?.login ?? '-'} · {pull.merged ? 'MERGED' : pull.state?.toUpperCase() ?? 'UNKNOWN'}</Meta>
-              </GitPrimary>
-              <Meta>{formatDate(pull.created_at)}</Meta>
-            </GitItem>
-          ))}
-          {pulls.length === 0 && <Empty>NO PULL REQUESTS</Empty>}
-        </GitList>
-      )}
-    </>
-  );
-}

frontend/app/projects/page.tsx

@@ -1,113 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import Link from 'next/link';
-import { PageTitle, LabelMeta, TechBar, TechBarFill, Btn } from '@/components/ui/base';
-import { API_URL } from '@/lib/config';
-import { adminFetch } from '@/lib/adminFetch';
-
-interface ProjectListItem {
-  id: number;
-  name: string;
-  description: string | null;
-  progress: number;
-  phase: string;
-  currentSprint: string | null;
-  latestHotfix: string | null;
-  latestQaLabel: string | null;
-  latestQaStatus: 'passed' | 'failed' | 'unknown';
-  blockerCount: number;
-  deployStatus: string;
-  updatedAt: string;
-}
-
-const ProjectList = styled.div`display:flex;flex-direction:column;gap:var(--space-md);`;
-const ProjectRow = styled(Link)`display:grid;grid-template-columns:1.2fr 1fr 220px;gap:var(--space-lg);padding:var(--space-lg);border:1px solid var(--border-color);align-items:center;text-decoration:none;transition:border-color .15s, background .15s;&:hover{border-color:var(--border-hover);background:#111}@media (max-width:1199px){grid-template-columns:1fr;}`;
-const Left = styled.div`display:flex;flex-direction:column;gap:6px;min-width:0;`;
-const ProjectName = styled.div`font-size:15px;font-weight:600;color:var(--text-primary);`;
-const ProjectDesc = styled.div`font-size:12px;color:var(--text-secondary);line-height:1.5;`;
-const Middle = styled.div`display:flex;flex-direction:column;gap:10px;`;
-const Right = styled.div`display:flex;flex-direction:column;gap:8px;align-items:flex-end;@media (max-width:1199px){align-items:flex-start;}`;
-const Meta = styled.div`font-size:11px;color:var(--text-secondary);font-family:var(--font-mono);`;
-const PhaseBadge = styled.div<{ $phase:string }>`font-size:11px;font-family:var(--font-mono);padding:4px 8px;border:1px solid ${({$phase})=>$phase==='DEPLOYED'?'#5fafff44':$phase==='READY FOR DEPLOY'?'#5fff8a44':$phase==='QA'?'#ffcc6644':'var(--border-color)'};color:${({$phase})=>$phase==='DEPLOYED'?'#5fafff':$phase==='READY FOR DEPLOY'?'#5fff8a':$phase==='QA'?'#ffcc66':'var(--text-primary)'};white-space:nowrap;`;
-const EmptyState = styled.div`padding:var(--space-xl) 0;color:var(--text-secondary);font-size:13px;font-family:var(--font-mono);`;
-
-function qaLabel(project: ProjectListItem): string {
-  if (project.latestQaStatus === 'passed') return 'QA PASSED';
-  if (project.latestQaStatus === 'failed') return `QA FAILED${project.blockerCount > 0 ? ` · ${project.blockerCount} BLOCKERS` : ''}`;
-  return 'QA PENDING';
-}
-
-export default function ProjectsPage() {
-  const [projects, setProjects] = useState<ProjectListItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [syncing, setSyncing] = useState(false);
-  const [syncResult, setSyncResult] = useState<string | null>(null);
-
-  const loadProjects = () => {
-    setLoading(true);
-    fetch(`${API_URL}/api/projects`).then((r) => r.json()).then(setProjects).catch(() => {}).finally(() => setLoading(false));
-  };
-
-  const runSync = async (path: string, label: string) => {
-    setSyncing(true);
-    setSyncResult(null);
-    try {
-      const res = await adminFetch(path, { method: 'POST' });
-      const data = await res.json();
-      setSyncResult(`${label}: ${JSON.stringify(data)}`);
-      loadProjects();
-    } catch {
-      setSyncResult(`${label}: failed`);
-    } finally {
-      setSyncing(false);
-    }
-  };
-
-  useEffect(() => { loadProjects(); }, []);
-
-  return (
-    <>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-md)', flexWrap: 'wrap', marginBottom: 'var(--space-lg)' }}>
-        <PageTitle>프로젝트</PageTitle>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)', flexWrap: 'wrap' }}>
-          {syncResult && <span style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-secondary)' }}>{syncResult}</span>}
-          <LabelMeta>VOL: {String(projects.length).padStart(2, '0')}</LabelMeta>
-          <Btn onClick={() => runSync('/api/admin/gitea/sync', 'gitea sync')} disabled={syncing}>{syncing ? 'SYNCING...' : '↻ GITEA SYNC'}</Btn>
-          <Btn onClick={() => runSync('/api/projects/sync-all-sprints', 'sprint sync')} disabled={syncing}>{syncing ? '...' : '↻ SPRINT SYNC'}</Btn>
-        </div>
-      </div>
-
-      {loading ? <EmptyState>LOADING...</EmptyState> : projects.length === 0 ? <EmptyState>NO PROJECTS REGISTERED</EmptyState> : (
-        <ProjectList>
-          {projects.map((project) => (
-            <ProjectRow key={project.id} href={`/projects/${project.id}`}>
-              <Left>
-                <Meta>P-{String(project.id).padStart(3, '0')}</Meta>
-                <ProjectName>{project.name}</ProjectName>
-                <ProjectDesc>{project.description ?? '설명 없음'}</ProjectDesc>
-              </Left>
-              <Middle>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)', flexWrap: 'wrap' }}>
-                  <PhaseBadge $phase={project.phase}>{project.phase}</PhaseBadge>
-                  <Meta>{project.currentSprint ? `SPRINT ${project.currentSprint}` : 'PLANNING BACKLOG'}</Meta>
-                  {project.latestHotfix && <Meta>HOTFIX {project.latestHotfix}</Meta>}
-                </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)' }}>
-                  <TechBar style={{ flex: 1 }}><TechBarFill $width={project.progress ?? 0} /></TechBar>
-                  <LabelMeta style={{ minWidth: 44, textAlign: 'right' }}>{project.progress ?? 0}%</LabelMeta>
-                </div>
-              </Middle>
-              <Right>
-                <Meta>{qaLabel(project)}</Meta>
-                <Meta>{project.deployStatus}</Meta>
-                <Meta>{new Date(project.updatedAt).toLocaleDateString('ko-KR')} UPDATED</Meta>
-              </Right>
-            </ProjectRow>
-          ))}
-        </ProjectList>
-      )}
-    </>
-  );
-}

frontend/app/rails/escalations/page.tsx

@@ -1,284 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { API_URL } from '@/lib/config';
-
-interface Escalation {
-  id: string;
-  pipelineId: string;
-  reason: string;
-  errorCategory: string;
-  stage: string;
-  attempts: number;
-  contextSnapshot: string;
-  resolvedAt: string | null;
-  resolution: string | null;
-  createdAt: string;
-}
-
-const Page = styled.main`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 32px 36px;
-  max-width: 1400px;
-  margin: 0 auto;
-  width: 100%;
-`;
-
-const Header = styled.header`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  gap: 16px;
-`;
-
-const Title = styled.h1`
-  font-size: 28px;
-  font-weight: 700;
-  margin: 0 0 4px;
-  letter-spacing: -0.01em;
-`;
-
-const Subtitle = styled.p`
-  font-size: 13px;
-  color: var(--text-secondary);
-  margin: 0;
-`;
-
-const Filters = styled.div`
-  display: flex;
-  gap: 8px;
-`;
-
-const FilterBtn = styled.button<{ $active: boolean }>`
-  padding: 8px 16px;
-  background: ${({ $active }) => ($active ? '#5fafff' : 'transparent')};
-  color: ${({ $active }) => ($active ? '#0a0a0a' : 'var(--text-primary)')};
-  border: 1px solid ${({ $active }) => ($active ? '#5fafff' : 'var(--border-color)')};
-  border-radius: 8px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-`;
-
-const Cards = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-
-const Card = styled.div<{ $resolved: boolean }>`
-  background: var(--bg-input);
-  border: 1px solid ${({ $resolved }) => ($resolved ? 'var(--border-color)' : '#ef444460')};
-  border-left: 4px solid ${({ $resolved }) => ($resolved ? '#525252' : '#ef4444')};
-  border-radius: 12px;
-  padding: 20px 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-
-const CardHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-`;
-
-const Reason = styled.h3`
-  margin: 0;
-  font-size: 16px;
-  font-weight: 700;
-  flex: 1;
-  word-break: break-word;
-`;
-
-const Tags = styled.div`
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-`;
-
-const Tag = styled.span<{ $color: string }>`
-  display: inline-block;
-  padding: 4px 12px;
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  border-radius: 12px;
-  background: ${({ $color }) => $color}20;
-  color: ${({ $color }) => $color};
-  border: 1px solid ${({ $color }) => $color}60;
-`;
-
-const Meta = styled.div`
-  display: flex;
-  gap: 18px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-secondary);
-  flex-wrap: wrap;
-`;
-
-const Snapshot = styled.details`
-  margin-top: 4px;
-
-  summary {
-    cursor: pointer;
-    font-size: 11px;
-    color: var(--text-secondary);
-    user-select: none;
-  }
-
-  pre {
-    margin: 8px 0 0;
-    background: var(--bg-surface);
-    border: 1px solid var(--border-color);
-    padding: 12px;
-    border-radius: 8px;
-    font-size: 11px;
-    overflow-x: auto;
-  }
-`;
-
-const Empty = styled.div`
-  padding: 60px 20px;
-  text-align: center;
-  color: var(--text-secondary);
-  background: var(--bg-input);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-`;
-
-function categoryColor(c: string): string {
-  switch (c) {
-    case 'timeout':
-      return '#f97316';
-    case 'rate_limit':
-      return '#eab308';
-    case 'network':
-      return '#3b82f6';
-    case 'permission':
-      return '#ef4444';
-    case 'config':
-      return '#a855f7';
-    case 'invariant':
-      return '#ec4899';
-    default:
-      return '#6b7280';
-  }
-}
-
-function relTime(iso: string): string {
-  try {
-    const ms = Date.now() - new Date(iso).getTime();
-    const sec = Math.floor(ms / 1000);
-    if (sec < 60) return `${sec}s 전`;
-    if (sec < 3600) return `${Math.floor(sec / 60)}m 전`;
-    if (sec < 86400) return `${Math.floor(sec / 3600)}h 전`;
-    return `${Math.floor(sec / 86400)}d 전`;
-  } catch {
-    return iso;
-  }
-}
-
-export default function EscalationsPage() {
-  const [escalations, setEscalations] = useState<Escalation[]>([]);
-  const [filter, setFilter] = useState<'all' | 'unresolved' | 'resolved'>('all');
-
-  useEffect(() => {
-    const params = new URLSearchParams();
-    params.set('limit', '100');
-    if (filter === 'unresolved') params.set('resolved', 'false');
-    if (filter === 'resolved') params.set('resolved', 'true');
-
-    fetch(`${API_URL}/api/rails/escalations?${params.toString()}`, {
-      credentials: 'include',
-    })
-      .then((r) => r.json())
-      .then((data: { escalations: Escalation[] }) => setEscalations(data.escalations))
-      .catch(() => setEscalations([]));
-  }, [filter]);
-
-  return (
-    <Page>
-      <Header>
-        <div>
-          <Title>Escalations</Title>
-          <Subtitle>
-            자동 재시도 후에도 실패한 파이프라인 — 사용자 개입 대기
-          </Subtitle>
-        </div>
-        <Filters>
-          <FilterBtn $active={filter === 'all'} onClick={() => setFilter('all')}>
-            전체
-          </FilterBtn>
-          <FilterBtn
-            $active={filter === 'unresolved'}
-            onClick={() => setFilter('unresolved')}
-          >
-            미해결
-          </FilterBtn>
-          <FilterBtn
-            $active={filter === 'resolved'}
-            onClick={() => setFilter('resolved')}
-          >
-            해결됨
-          </FilterBtn>
-        </Filters>
-      </Header>
-
-      {escalations.length === 0 ? (
-        <Empty>
-          {filter === 'unresolved' ? '미해결 에스컬레이션 없음 ✓' : '에스컬레이션 없음'}
-        </Empty>
-      ) : (
-        <Cards>
-          {escalations.map((e) => (
-            <Card key={e.id} $resolved={!!e.resolvedAt}>
-              <CardHeader>
-                <Reason>{e.reason}</Reason>
-                <Tags>
-                  <Tag $color={categoryColor(e.errorCategory)}>
-                    {e.errorCategory}
-                  </Tag>
-                  {e.stage && <Tag $color="#6b7280">stage: {e.stage}</Tag>}
-                  <Tag $color="#a855f7">attempts: {e.attempts}</Tag>
-                  {e.resolvedAt ? (
-                    <Tag $color="#22c55e">{e.resolution ?? 'resolved'}</Tag>
-                  ) : (
-                    <Tag $color="#ef4444">unresolved</Tag>
-                  )}
-                </Tags>
-              </CardHeader>
-              <Meta>
-                <span>id: {e.id}</span>
-                <span>pipeline: {e.pipelineId.slice(0, 12)}...</span>
-                <span>created: {relTime(e.createdAt)}</span>
-                {e.resolvedAt && <span>resolved: {relTime(e.resolvedAt)}</span>}
-              </Meta>
-              {e.contextSnapshot && (
-                <Snapshot>
-                  <summary>Context snapshot</summary>
-                  <pre>
-                    {(() => {
-                      try {
-                        return JSON.stringify(JSON.parse(e.contextSnapshot), null, 2);
-                      } catch {
-                        return e.contextSnapshot;
-                      }
-                    })()}
-                  </pre>
-                </Snapshot>
-              )}
-            </Card>
-          ))}
-        </Cards>
-      )}
-    </Page>
-  );
-}

frontend/app/rails/log/page.tsx

@@ -1,364 +0,0 @@
-'use client';
-
-import React, { useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
-import { API_URL } from '@/lib/config';
-import { useRailsSocket } from '@/lib/useRailsSocket';
-
-interface Transition {
-  id: number;
-  pipelineId: string;
-  fromState: string;
-  toState: string;
-  eventType: string;
-  timestamp: string;
-}
-
-const Page = styled.main`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 32px 36px;
-  max-width: 1600px;
-  margin: 0 auto;
-  width: 100%;
-`;
-
-const Header = styled.header`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  gap: 24px;
-  flex-wrap: wrap;
-`;
-
-const Title = styled.h1`
-  font-size: 28px;
-  font-weight: 700;
-  margin: 0 0 4px;
-  letter-spacing: -0.01em;
-`;
-
-const Subtitle = styled.p`
-  font-size: 13px;
-  color: var(--text-secondary);
-  margin: 0;
-`;
-
-const Live = styled.span<{ $on: boolean }>`
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: ${({ $on }) => ($on ? '#22c55e' : 'var(--text-secondary)')};
-
-  &::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: ${({ $on }) => ($on ? '#22c55e' : '#525252')};
-    box-shadow: ${({ $on }) =>
-      $on ? '0 0 0 4px rgba(34, 197, 94, 0.15)' : 'none'};
-  }
-`;
-
-const Filters = styled.div`
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex-wrap: wrap;
-  background: var(--bg-input);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  padding: 14px 18px;
-`;
-
-const Input = styled.input`
-  padding: 8px 12px;
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-  color: var(--text-primary);
-  border-radius: 8px;
-  font-size: 13px;
-  font-family: var(--font-mono);
-  min-width: 280px;
-`;
-
-const Select = styled.select`
-  padding: 8px 12px;
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-  color: var(--text-primary);
-  border-radius: 8px;
-  font-size: 13px;
-`;
-
-const ClearBtn = styled.button`
-  padding: 8px 16px;
-  background: transparent;
-  color: var(--text-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 8px;
-  font-size: 12px;
-  cursor: pointer;
-
-  &:hover {
-    border-color: #5fafff;
-    color: var(--text-primary);
-  }
-`;
-
-const Counter = styled.div`
-  margin-left: auto;
-  font-size: 11px;
-  font-family: var(--font-mono);
-  color: var(--text-secondary);
-`;
-
-const LogTable = styled.div`
-  background: var(--bg-input);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  overflow: hidden;
-`;
-
-const Row = styled.div<{ $type: string }>`
-  display: grid;
-  grid-template-columns: 180px 90px 130px minmax(200px, 1fr) 130px;
-  gap: 16px;
-  padding: 12px 18px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  border-bottom: 1px solid var(--border-color);
-  align-items: center;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &:hover {
-    background: var(--bg-surface);
-  }
-`;
-
-const HeaderRow = styled(Row)`
-  background: var(--bg-surface);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  font-size: 10px;
-  color: var(--text-secondary);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-`;
-
-const Time = styled.span`
-  color: var(--text-secondary);
-`;
-
-const EventBadge = styled.span<{ $type: string }>`
-  display: inline-block;
-  padding: 3px 10px;
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  border-radius: 12px;
-  color: #fff;
-  background: ${({ $type }) => eventColor($type)};
-`;
-
-const StateChip = styled.span<{ $state: string }>`
-  display: inline-block;
-  padding: 3px 10px;
-  font-size: 10px;
-  font-weight: 600;
-  border-radius: 12px;
-  background: ${({ $state }) => stateColor($state)}30;
-  color: ${({ $state }) => stateColor($state)};
-  border: 1px solid ${({ $state }) => stateColor($state)}60;
-`;
-
-const Arrow = styled.span`
-  color: var(--text-secondary);
-  margin: 0 6px;
-`;
-
-const PidChip = styled.button`
-  background: transparent;
-  border: 1px dashed var(--border-color);
-  color: var(--text-primary);
-  padding: 3px 8px;
-  border-radius: 6px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  cursor: pointer;
-
-  &:hover {
-    border-color: #5fafff;
-    border-style: solid;
-  }
-`;
-
-const Empty = styled.div`
-  padding: 60px 20px;
-  text-align: center;
-  color: var(--text-secondary);
-`;
-
-function eventColor(type: string): string {
-  switch (type) {
-    case 'REQUEST':
-      return '#8b5cf6';
-    case 'PLAN_READY':
-    case 'IMPL_DONE':
-    case 'APPROVE':
-    case 'DEPLOY_DONE':
-      return '#22c55e';
-    case 'REQUEST_CHANGES':
-      return '#f97316';
-    case 'ERROR':
-    case 'TIMEOUT':
-      return '#ef4444';
-    case 'ABORT':
-      return '#525252';
-    case 'RESUME':
-    case 'RETRY':
-      return '#5fafff';
-    default:
-      return '#6b7280';
-  }
-}
-
-function stateColor(state: string): string {
-  switch (state) {
-    case 'idle':
-      return '#6b7280';
-    case 'planning':
-    case 'implementing':
-    case 'reviewing':
-    case 'deploying':
-      return '#f97316';
-    case 'done':
-      return '#22c55e';
-    case 'escalated':
-      return '#ef4444';
-    case 'aborted':
-      return '#525252';
-    default:
-      return '#6b7280';
-  }
-}
-
-const EVENT_TYPES = [
-  '',
-  'REQUEST',
-  'PLAN_READY',
-  'IMPL_DONE',
-  'APPROVE',
-  'REQUEST_CHANGES',
-  'DEPLOY_DONE',
-  'ERROR',
-  'TIMEOUT',
-  'ABORT',
-  'RESUME',
-];
-
-export default function RailsLogPage() {
-  const [transitions, setTransitions] = useState<Transition[]>([]);
-  const [pipelineFilter, setPipelineFilter] = useState('');
-  const [eventFilter, setEventFilter] = useState('');
-  const [tick, setTick] = useState(0);
-
-  const { connected } = useRailsSocket({
-    onPipelineUpdated: () => setTick((n) => n + 1),
-  });
-
-  useEffect(() => {
-    const params = new URLSearchParams();
-    params.set('limit', '300');
-    if (pipelineFilter) params.set('pipelineId', pipelineFilter);
-    if (eventFilter) params.set('eventType', eventFilter);
-    fetch(`${API_URL}/api/rails/transitions?${params.toString()}`, {
-      credentials: 'include',
-    })
-      .then((r) => r.json())
-      .then((data: { transitions: Transition[] }) => setTransitions(data.transitions))
-      .catch(() => setTransitions([]));
-  }, [pipelineFilter, eventFilter, tick]);
-
-  const visible = useMemo(() => transitions, [transitions]);
-
-  return (
-    <Page>
-      <Header>
-        <div>
-          <Title>SIEM Log</Title>
-          <Subtitle>Rails state transitions — 결정론적 이벤트 스트림</Subtitle>
-        </div>
-        <Live $on={connected}>{connected ? 'LIVE' : 'OFFLINE'}</Live>
-      </Header>
-
-      <Filters>
-        <Input
-          placeholder="pipeline id 필터 (ULID)"
-          value={pipelineFilter}
-          onChange={(e) => setPipelineFilter(e.target.value.trim())}
-        />
-        <Select
-          value={eventFilter}
-          onChange={(e) => setEventFilter(e.target.value)}
-        >
-          {EVENT_TYPES.map((t) => (
-            <option key={t || 'all'} value={t}>
-              {t || '— all events —'}
-            </option>
-          ))}
-        </Select>
-        {(pipelineFilter || eventFilter) && (
-          <ClearBtn
-            onClick={() => {
-              setPipelineFilter('');
-              setEventFilter('');
-            }}
-          >
-            필터 초기화
-          </ClearBtn>
-        )}
-        <Counter>{visible.length} entries</Counter>
-      </Filters>
-
-      <LogTable>
-        <HeaderRow $type="">
-          <span>Timestamp</span>
-          <span>Event</span>
-          <span>Pipeline</span>
-          <span>Transition</span>
-          <span>—</span>
-        </HeaderRow>
-        {visible.length === 0 ? (
-          <Empty>No transitions matching the filters.</Empty>
-        ) : (
-          visible.map((t) => (
-            <Row key={t.id} $type={t.eventType}>
-              <Time>{new Date(t.timestamp).toLocaleString('ko-KR')}</Time>
-              <EventBadge $type={t.eventType}>{t.eventType}</EventBadge>
-              <PidChip onClick={() => setPipelineFilter(t.pipelineId)}>
-                {t.pipelineId.slice(0, 12)}...
-              </PidChip>
-              <span>
-                <StateChip $state={t.fromState}>{t.fromState}</StateChip>
-                <Arrow>→</Arrow>
-                <StateChip $state={t.toState}>{t.toState}</StateChip>
-              </span>
-              <span />
-            </Row>
-          ))
-        )}
-      </LogTable>
-    </Page>
-  );
-}

frontend/app/rails/page.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/lib/useRailsSocket';
 import SubTaskTree from '@/components/rails/SubTaskTree';
 import SubTaskDetailDrawer from '@/components/rails/SubTaskDetailDrawer';
+import TransitionsTimeline from '@/components/rails/TransitionsTimeline';
 
 const Page = styled.main`
   display: flex;
@@ -457,6 +458,8 @@ export default function RailsPage() {
               ) : (
                 <Empty>아직 sub-task 가 생성 안 됐어.</Empty>
               )}
+
+              <TransitionsTimeline pipelineId={selected.id} />
             </>
           ) : (
             <Empty>왼쪽에서 파이프라인을 선택해.</Empty>

frontend/app/sisters/[name]/page.tsx

@@ -1,218 +0,0 @@
-'use client';
-
-import React, { useEffect, useState, useCallback } from 'react';
-import { useParams } from 'next/navigation';
-import styled from 'styled-components';
-import Link from 'next/link';
-import { LabelMeta, TechBar, TechBarFill, Timeline, TimelineItem, TimeStamp, TimelineContent, Btn } from '@/components/ui/base';
-import { API_URL } from '@/lib/config';
-import SisterAvatar from '@/components/common/SisterAvatar';
-import { SISTER_ROLES } from '@/lib/sisters';
-import { adminFetch } from '@/lib/adminFetch';
-import CodeEditor from '@/components/admin/CodeEditor';
-import LogTerminal from '@/components/admin/LogTerminal';
-
-const Breadcrumb = styled.div`font-family: var(--font-mono);font-size: 11px;color: var(--text-secondary);margin-bottom: var(--space-md);a { color: var(--text-secondary); text-decoration: none; &:hover { color: var(--text-primary); } }`;
-const Hero = styled.section`display:grid;grid-template-columns:128px 1fr;gap:var(--space-xl);align-items:center;padding:var(--space-xl);border:1px solid var(--border-color);margin-bottom:var(--space-xl);@media (max-width:767px){grid-template-columns:1fr;justify-items:start;}`;
-const HeroMeta = styled.div`display:flex;flex-direction:column;gap:var(--space-sm);`;
-const HeroName = styled.div`font-size:36px;font-weight:700;letter-spacing:-0.03em;color:var(--text-primary);`;
-const HeroRole = styled.div`font-size:14px;color:var(--text-secondary);font-family:var(--font-mono);`;
-const HeroStatus = styled.div`display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm);flex-wrap:wrap;`;
-const StatusDot = styled.div<{ $on: boolean }>`width:10px;height:10px;border-radius:50%;background:${({$on})=>$on?'#FFF':'#555'};${({$on})=>$on&&`box-shadow:0 0 8px rgba(255,255,255,0.3);`}`;
-const HeroStats = styled.div`display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-lg);@media (max-width:767px){grid-template-columns:repeat(2,minmax(0,1fr));}`;
-const StatCard = styled.div`border:1px solid var(--border-color);padding:var(--space-md);`;
-const StatLabel = styled.div`font-size:10px;color:var(--text-secondary);font-family:var(--font-mono);margin-bottom:6px;`;
-const StatValue = styled.div`font-size:18px;color:var(--text-primary);font-family:var(--font-mono);`;
-const DetailGrid = styled.div`display:grid;grid-template-columns:320px 1fr;gap:var(--space-xxl);align-items:start;@media (max-width:1199px){grid-template-columns:1fr;gap:var(--space-xl);}`;
-const MetaPanel = styled.div`display:flex;flex-direction:column;gap:var(--space-lg);`;
-const MetaCard = styled.div`border:1px solid var(--border-color);padding:var(--space-lg);`;
-const TabBar = styled.div`display:flex;gap:var(--space-lg);border-bottom:1px solid var(--border-color);margin-bottom:var(--space-lg);overflow:auto;`;
-const TabBtn = styled.button<{ $active: boolean }>`font-size:13px;font-weight:500;color:${({$active})=>$active?'var(--text-primary)':'var(--text-secondary)'};background:transparent;border:none;border-bottom:1px solid ${({$active})=>$active?'var(--text-primary)':'transparent'};padding:var(--space-sm) 0;cursor:pointer;transition:color .15s,border-color .15s;white-space:nowrap;&:hover{color:var(--text-primary);}`;
-const Toolbar = styled.div`display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;`;
-const Select = styled.select`background:var(--bg-surface);border:1px solid var(--border-color);border-radius:7px;color:var(--text-primary);padding:8px 12px;font-size:13px;cursor:pointer;outline:none;option{background:#1a1f2a;}`;
-const LinesInput = styled.input`background:var(--bg-surface);border:1px solid var(--border-color);border-radius:7px;color:var(--text-primary);padding:8px 12px;font-size:13px;width:80px;outline:none;`;
-const ResultMsg = styled.div<{ $success: boolean }>`padding:8px 12px;border-radius:6px;font-size:12px;font-family:monospace;background:${({$success})=>$success?'rgba(0,230,118,0.08)':'rgba(255,23,68,0.08)'};color:${({$success})=>$success?'#00FF00':'#FF1744'};border:1px solid ${({$success})=>$success?'rgba(0,230,118,0.3)':'rgba(255,23,68,0.3)'};margin-bottom:12px;`;
-const SessionCard = styled.div`border:1px solid var(--border-color);padding:var(--space-md);margin-bottom:var(--space-sm);`;
-const SISTER_DISPLAY: Record<string, string> = { harang: '하랑이', narang: '나랑이', darang: '다랑이', erang: '이랑이' };
-const FILES = ['SOUL.md', 'AGENTS.md', 'TOOLS.md', 'PROTOCOL.md', 'HEARTBEAT.md'];
-
-interface SisterInfo {
-  id?: number;
-  name: string;
-  status?: string;
-  lxcId?: string | number | null;
-  lastSeen?: string | null;
-  user?: string | null;
-}
-
-interface SystemInfo {
-  uptime?: string;
-  cpu?: number;
-  memory?: { used?: number; total?: number };
-  disk?: { used?: string; total?: string };
-}
-
-interface ConfigData {
-  description?: string | null;
-}
-
-interface ActivityItem {
-  id: number;
-  createdAt: string;
-  action?: string;
-  detail?: string | null;
-}
-
-interface ActivityResponse {
-  items?: ActivityItem[];
-}
-
-interface SessionItem {
-  id?: string | number;
-  title?: string;
-  label?: string;
-  status?: string;
-}
-
-interface SessionsResponse {
-  sessions?: SessionItem[];
-  items?: SessionItem[];
-}
-
-interface HarnessResponse {
-  content?: string;
-}
-
-interface SaveHarnessResponse {
-  success?: boolean;
-  error?: string;
-}
-
-interface LogResponse {
-  lines?: string[];
-}
-
-export default function SisterDetailPage() {
-  const { name } = useParams<{ name: string }>();
-  const [sisterInfo, setSisterInfo] = useState<SisterInfo | null>(null);
-  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
-  const [configData, setConfigData] = useState<ConfigData | null>(null);
-  const [activity, setActivity] = useState<ActivityItem[]>([]);
-  const [sessions, setSessions] = useState<SessionItem[]>([]);
-  const [tab, setTab] = useState('overview');
-  const [loading, setLoading] = useState(true);
-  const [logLines, setLogLines] = useState<string[]>([]);
-  const [logLoading, setLogLoading] = useState(false);
-  const [lines, setLines] = useState(100);
-  const [selectedFile, setSelectedFile] = useState('SOUL.md');
-  const [content, setContent] = useState('');
-  const [saved, setSaved] = useState('');
-  const [saveResult, setSaveResult] = useState<{ success: boolean; msg: string } | null>(null);
-
-  useEffect(() => {
-    Promise.allSettled([
-      fetch(`${API_URL}/api/sisters`),
-      fetch(`${API_URL}/api/sisters/${name}/config`),
-      fetch(`${API_URL}/api/sisters/${name}/activity`),
-      fetch(`${API_URL}/api/sisters/${name}/system`),
-      fetch(`${API_URL}/api/sisters/${name}/sessions`),
-    ]).then(([sRes, cRes, aRes, syRes, ssRes]) => {
-      if (sRes.status === 'fulfilled' && sRes.value.ok) sRes.value.json().then((d: SisterInfo[]) => setSisterInfo(d.find((s) => s.name === name) ?? null));
-      if (cRes.status === 'fulfilled' && cRes.value.ok) cRes.value.json().then((data: ConfigData) => setConfigData(data));
-      if (aRes.status === 'fulfilled' && aRes.value.ok) aRes.value.json().then((d: ActivityResponse) => setActivity(d.items ?? []));
-      if (syRes.status === 'fulfilled' && syRes.value.ok) syRes.value.json().then((data: SystemInfo) => setSystemInfo(data));
-      if (ssRes.status === 'fulfilled' && ssRes.value.ok) ssRes.value.json().then((d: SessionsResponse) => setSessions(d.sessions ?? d.items ?? []));
-    }).finally(() => setLoading(false));
-  }, [name]);
-
-  const fetchLogs = useCallback(async () => {
-    setLogLoading(true);
-    try {
-      const res = await adminFetch(`/api/admin/logs/${name}?lines=${lines}`);
-      const d: LogResponse = await res.json();
-      setLogLines(d.lines ?? []);
-    } catch {
-      setLogLines(['(로그 로드 실패)']);
-    } finally {
-      setLogLoading(false);
-    }
-  }, [name, lines]);
-
-  useEffect(() => { if (tab === 'logs') fetchLogs(); }, [tab, fetchLogs]);
-
-  useEffect(() => {
-    if (tab !== 'harness') return;
-    setSaveResult(null);
-    adminFetch(`/api/admin/harness/${name}/${selectedFile}`)
-      .then((r) => r.json())
-      .then((d: HarnessResponse) => { setContent(d.content ?? ''); setSaved(d.content ?? ''); })
-      .catch(() => setContent('(로드 실패)'));
-  }, [tab, name, selectedFile]);
-
-  const handleSave = async () => {
-    setSaveResult(null);
-    try {
-      const res = await adminFetch(`/api/admin/harness/${name}/${selectedFile}`, { method: 'PUT', body: JSON.stringify({ content }) });
-      const d: SaveHarnessResponse = await res.json();
-      if (d.success) { setSaved(content); setSaveResult({ success: true, msg: '저장 완료' }); }
-      else setSaveResult({ success: false, msg: d.error ?? '저장 실패' });
-    } catch (e) {
-      setSaveResult({ success: false, msg: (e as Error).message });
-    }
-  };
-
-  const isActive = sisterInfo?.status === 'online' || sisterInfo?.status === 'working';
-
-  return (
-    <>
-      <Breadcrumb><Link href="/sisters">자매 노드 관리</Link> / {SISTER_DISPLAY[name] ?? name}</Breadcrumb>
-      {loading ? <div style={{ color: 'var(--text-secondary)', fontSize: '13px', fontFamily: 'var(--font-mono)' }}>LOADING...</div> : <>
-        <Hero>
-          <SisterAvatar name={name} size={120} />
-          <HeroMeta>
-            <HeroName>{SISTER_DISPLAY[name] ?? name}</HeroName>
-            <HeroRole>{SISTER_ROLES[name] ?? 'UNKNOWN'}</HeroRole>
-            <HeroStatus>
-              <StatusDot $on={isActive} />
-              <LabelMeta>{isActive ? 'ACTIVE' : 'STANDBY'}</LabelMeta>
-              <LabelMeta><span>LXC:</span>{sisterInfo?.lxcId ?? '--'}</LabelMeta>
-            </HeroStatus>
-            <HeroStats>
-              <StatCard><StatLabel>UPTIME</StatLabel><StatValue>{systemInfo?.uptime ?? '--:--:--'}</StatValue></StatCard>
-              <StatCard><StatLabel>CPU</StatLabel><StatValue>{systemInfo?.cpu?.toFixed?.(1) ?? '0.0'}%</StatValue></StatCard>
-              <StatCard><StatLabel>MEM</StatLabel><StatValue>{systemInfo?.memory?.used ?? 0}/{systemInfo?.memory?.total ?? 0}MB</StatValue></StatCard>
-              <StatCard><StatLabel>DISK</StatLabel><StatValue>{systemInfo?.disk?.used ?? '0G'}/{systemInfo?.disk?.total ?? '0G'}</StatValue></StatCard>
-            </HeroStats>
-          </HeroMeta>
-        </Hero>
-
-        <DetailGrid>
-          <MetaPanel>
-            <MetaCard>
-              <LabelMeta style={{ marginBottom: 'var(--space-sm)', display: 'block' }}>SYSTEM SUMMARY</LabelMeta>
-              <div style={{ margin: 'var(--space-md) 0', fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-secondary)', lineHeight: 1.8 }}>
-                LAST_SEEN: {sisterInfo?.lastSeen ? new Date(sisterInfo.lastSeen).toLocaleString() : '--'}<br />
-                ROLE: {SISTER_ROLES[name] ?? '--'}<br />
-                STATUS: {String(sisterInfo?.status ?? 'unknown').toUpperCase()}<br />
-                HOST_USER: {sisterInfo?.user ?? '--'}
-              </div>
-              <TechBar><TechBarFill $width={isActive ? 100 : 0} /></TechBar>
-            </MetaCard>
-            {configData?.description && <MetaCard><LabelMeta style={{ marginBottom: 'var(--space-sm)', display: 'block' }}>DESC</LabelMeta><div style={{ fontSize: '12px', color: 'var(--text-secondary)', lineHeight: 1.6 }}>{configData.description}</div></MetaCard>}
-          </MetaPanel>
-          <div>
-            <TabBar>
-              {[{ id: 'overview', label: '개요' }, { id: 'sessions', label: '세션' }, { id: 'activity', label: '활동' }, { id: 'harness', label: '하네스' }, { id: 'logs', label: '로그' }].map((t) => <TabBtn key={t.id} $active={tab === t.id} onClick={() => setTab(t.id)}>{t.label}</TabBtn>)}
-            </TabBar>
-
-            {tab === 'overview' && <Timeline>{activity.slice(0, 8).map((item) => <TimelineItem key={item.id}><TimeStamp>{new Date(item.createdAt).toLocaleString('ko-KR', { hour12: false })}</TimeStamp><TimelineContent>{item.detail ?? item.action}</TimelineContent></TimelineItem>)}</Timeline>}
-            {tab === 'sessions' && <>{sessions.length === 0 ? <div style={{ color: 'var(--text-secondary)' }}>세션 없음</div> : sessions.map((session, i: number) => <SessionCard key={session.id ?? i}><div style={{ color: 'var(--text-primary)', fontSize: '13px' }}>{session.title ?? session.label ?? session.id ?? 'session'}</div><div style={{ color: 'var(--text-secondary)', fontSize: '11px', fontFamily: 'var(--font-mono)' }}>{session.status ?? ''}</div></SessionCard>)}</>}
-            {tab === 'activity' && <Timeline>{activity.map((item) => <TimelineItem key={item.id}><TimeStamp>{new Date(item.createdAt).toLocaleString('ko-KR', { hour12: false })}</TimeStamp><TimelineContent>{item.detail ?? item.action}</TimelineContent></TimelineItem>)}</Timeline>}
-            {tab === 'harness' && <><Toolbar><Select value={selectedFile} onChange={(e) => setSelectedFile(e.target.value)}>{FILES.map((f) => <option key={f} value={f}>{f}</option>)}</Select><Btn onClick={() => { setContent(saved); setSaveResult(null); }}>되돌리기</Btn><Btn onClick={handleSave}>저장</Btn></Toolbar>{saveResult && <ResultMsg $success={saveResult.success}>{saveResult.msg}</ResultMsg>}<CodeEditor value={content} onChange={setContent} /></>}
-            {tab === 'logs' && <><Toolbar><span style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>최근</span><LinesInput type="number" value={lines} onChange={(e) => setLines(parseInt(e.target.value, 10) || 100)} min={10} max={500} /><span style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>줄</span><Btn onClick={fetchLogs}>{logLoading ? '로딩 중...' : '로그 가져오기'}</Btn></Toolbar><LogTerminal lines={logLines} /></>}
-          </div>
-        </DetailGrid>
-      </>}
-    </>
-  );
-}

frontend/app/sisters/page.tsx

@@ -1,135 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import styled, { keyframes } from 'styled-components';
-import Link from 'next/link';
-import { PageTitle, LabelMeta, BtnToggle } from '@/components/ui/base';
-import { API_URL } from '@/lib/config';
-import SisterAvatar from '@/components/common/SisterAvatar';
-
-const pulse = keyframes`0%{opacity:.35}50%{opacity:.7}100%{opacity:.35}`;
-const SISTER_ROLES: Record<string, string> = { harang: 'Primary', narang: 'Secondary', darang: 'Standby', erang: 'Sync' };
-
-interface SisterListItem {
-  id?: number;
-  name: string;
-  status: string;
-  uptime?: string;
-  lastSeen?: string | null;
-  cpu?: number;
-  lxcId?: string | number | null;
-  currentTask?: string | null;
-  memory?: { used?: number; total?: number };
-  disk?: { used?: string; total?: string };
-}
-
-const NodeGrid = styled.section`display:flex;flex-direction:column;gap:var(--space-lg);`;
-const NodeEntry = styled(Link)`display:grid;grid-template-columns:220px 1fr 180px;gap:0;border:1px solid var(--border-color);transition:border-color .2s, background .15s;text-decoration:none;&:hover{border-color:var(--border-hover);background:#111}@media (max-width:1199px){grid-template-columns:200px 1fr}@media (max-width:767px){grid-template-columns:1fr}`;
-const NodeInfo = styled.div`border-right:1px solid var(--border-color);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md);@media (max-width:767px){border-right:none;border-bottom:1px solid var(--border-color)}`;
-const NodeName = styled.div`display:flex;align-items:center;gap:var(--space-sm);font-size:16px;font-weight:600;color:var(--text-primary);`;
-const StatusIndicator = styled.div<{ $active: boolean }>`width:8px;height:8px;border-radius:50%;background:${({$active})=>$active?'#FFF':'#555'};flex-shrink:0;${({$active})=>$active&&`box-shadow:0 0 8px rgba(255,255,255,.3);`}`;
-const MetaPair = styled.div`display:flex;flex-direction:column;gap:2px;`;
-const MetaVal = styled.div`font-size:13px;color:var(--text-primary);font-family:var(--font-mono);`;
-const NodeControls = styled.div`display:flex;gap:var(--space-sm);flex-wrap:wrap;`;
-const CapacitySection = styled.div`border-right:1px solid var(--border-color);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md);@media (max-width:1199px){border-right:none}@media (max-width:767px){border-bottom:1px solid var(--border-color)}`;
-const BarWrap = styled.div`display:flex;flex-direction:column;gap:8px;`;
-const BarRow = styled.div`display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);`;
-const Bar = styled.div`flex:1;height:8px;background:#151515;border:1px solid #222;overflow:hidden;`;
-const Fill = styled.div<{ $width:number }>`height:100%;width:${({$width})=>$width}%;background:var(--text-primary);min-width:${({$width})=>$width > 0 ? '2px' : '0'};`;
-const OpsMeta = styled.div`padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);@media (max-width:1199px){display:none}`;
-const MetaRow = styled.div`display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);padding:2px 0;gap:var(--space-md);`;
-const Skeleton = styled.div`height:120px;border:1px solid var(--border-color);background:#111;animation:${pulse} 1.4s ease-in-out infinite;`;
-const ErrorBox = styled.div`padding:var(--space-lg);border:1px solid #5a2a2a;color:#ff9b9b;`;
-
-function getNodeStatus(s: SisterListItem): boolean { return s.status === 'online' || s.status === 'working'; }
-function getStatusBtns(s: SisterListItem): [string, string] { if (s.status === 'offline') return ['STANDBY', 'ACTIVATE']; return ['ACTIVE', 'REBOOT']; }
-function diskPercent(disk?: SisterListItem['disk']): number {
-  if (!disk?.used || !disk?.total) return 0;
-  const parse = (v: string) => {
-    const m = String(v).match(/([0-9.]+)\s*([KMGTP]?)/i);
-    if (!m) return 0;
-    const n = parseFloat(m[1]);
-    const unit = (m[2] || 'G').toUpperCase();
-    const scale: Record<string, number> = { K: 1/1024/1024, M: 1/1024, G: 1, T: 1024, P: 1024*1024, '': 1 };
-    return n * (scale[unit] ?? 1);
-  };
-  const used = parse(disk.used);
-  const total = parse(disk.total);
-  if (!isFinite(used) || !isFinite(total) || total <= 0) return 0;
-  return Math.max(0, Math.min(100, (used / total) * 100));
-}
-
-export default function SistersPage() {
-  const [sisters, setSisters] = useState<SisterListItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let active = true;
-    const load = async () => {
-      try {
-        const base: SisterListItem[] = await fetch(`${API_URL}/api/sisters`).then((r) => r.ok ? r.json() : Promise.reject());
-        const withSystem = await Promise.all(base.map(async (s: SisterListItem) => {
-          try {
-            const system = await fetch(`${API_URL}/api/sisters/${s.name}/system`).then((r) => r.ok ? r.json() : null);
-            return { ...s, ...(system ?? {}) };
-          } catch {
-            return { ...s, uptime: '00:00:00', cpu: 0, memory: { used: 0, total: 0 }, disk: { used: '0G', total: '0G' } };
-          }
-        }));
-        if (active) { setSisters(withSystem); setError(null); }
-      } catch {
-        if (active) setError('데이터를 불러올 수 없습니다');
-      } finally {
-        if (active) setLoading(false);
-      }
-    };
-    load();
-    const iv = setInterval(load, 15000);
-    return () => { active = false; clearInterval(iv); };
-  }, []);
-
-  return (
-    <>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-lg)' }}>
-        <PageTitle>자매 노드 관리</PageTitle>
-        <LabelMeta><span>TOTAL NODES:</span> {String(sisters.length).padStart(2, '0')}</LabelMeta>
-      </div>
-      {error && <ErrorBox>{error}</ErrorBox>}
-      <NodeGrid>
-        {loading ? Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} />) : sisters.map((s) => {
-          const isActive = getNodeStatus(s);
-          const [btn1, btn2] = getStatusBtns(s);
-          return (
-            <NodeEntry key={s.id ?? s.name} href={`/sisters/${s.name}`}>
-              <NodeInfo>
-                <NodeName>
-                  <StatusIndicator $active={isActive} />
-                  <SisterAvatar name={s.name} size={28} />
-                  {s.name === 'harang' ? '하랑' : s.name === 'narang' ? '나랑' : s.name === 'darang' ? '다랑' : '이랑'} ({SISTER_ROLES[s.name] ?? s.name})
-                </NodeName>
-                <MetaPair><LabelMeta>Uptime</LabelMeta><MetaVal>{s.uptime ?? '00:00:00'}</MetaVal></MetaPair>
-                <MetaPair><LabelMeta>Last Seen</LabelMeta><MetaVal>{s.lastSeen ? new Date(s.lastSeen).toLocaleString('ko-KR') : '—'}</MetaVal></MetaPair>
-                <NodeControls><BtnToggle>{btn1}</BtnToggle><BtnToggle>{btn2}</BtnToggle></NodeControls>
-              </NodeInfo>
-              <CapacitySection>
-                <BarWrap>
-                  <BarRow><span>CPU</span><span>{s.cpu?.toFixed?.(1) ?? '0.0'}%</span><Bar><Fill $width={Math.max(0, Math.min(100, Number(s.cpu ?? 0)))} /></Bar></BarRow>
-                  <BarRow><span>MEM</span><span>{s.memory?.used ?? 0}/{s.memory?.total ?? 0}MB</span><Bar><Fill $width={s.memory?.total ? Math.max(0, Math.min(100, (((s.memory.used ?? 0) / s.memory.total) * 100))) : 0} /></Bar></BarRow>
-                  <BarRow><span>DSK</span><span>{s.disk?.used ?? '0G'}/{s.disk?.total ?? '0G'}</span><Bar><Fill $width={diskPercent(s.disk)} /></Bar></BarRow>
-                </BarWrap>
-              </CapacitySection>
-              <OpsMeta>
-                <MetaRow><span>STATUS</span><span>{String(s.status).toUpperCase()}</span></MetaRow>
-                <MetaRow><span>ROLE</span><span>{String(SISTER_ROLES[s.name] ?? s.name).toUpperCase()}</span></MetaRow>
-                <MetaRow><span>LXC ID</span><span>{s.lxcId ?? '--'}</span></MetaRow>
-                <MetaRow><span>LAST CHECK</span><span>{s.lastSeen ? 'just synced' : '--'}</span></MetaRow>
-                <MetaRow><span>CURRENT TASK</span><span>{s.currentTask ?? '-'}</span></MetaRow>
-              </OpsMeta>
-            </NodeEntry>
-          );
-        })}
-      </NodeGrid>
-    </>
-  );
-}

frontend/components/common/Sidebar.tsx

@@ -7,17 +7,10 @@ import { usePathname } from 'next/navigation';
 import { useAuth } from '@/lib/AuthContext';
 
 const NAV_ITEMS = [
-  { href: '/', label: '대시' },
-  { href: '/rails', label: '레일' },
-  { href: '/rails/log', label: '로그' },
-  { href: '/rails/escalations', label: '경보' },
-  { href: '/office', label: '오피스' },
-  { href: '/projects', label: '프로' },
-  { href: '/activities', label: '활동' },
-  { href: '/sisters', label: '자매' },
-  { href: '/org', label: '조직' },
-  { href: '/settings', label: '설정' },
-  { href: '/admin', label: '관리' },
+  { href: '/', label: '🟠 Live' },
+  { href: '/control', label: '🧭 Control' },
+  { href: '/rails', label: '🚦 레일' },
+  { href: '/settings', label: '⚙️ 설정' },
 ];
 
 const SidebarWrapper = styled.aside`

frontend/components/dashboard/ActivePipelineStrip.tsx

@@ -0,0 +1,188 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import Link from 'next/link';
+import { API_URL } from '@/lib/config';
+
+interface Pipeline {
+  id: string;
+  projectName: string;
+  currentState: string;
+  createdAt: string;
+}
+
+const Wrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+`;
+
+const Title = styled.h2`
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+`;
+
+const ViewAll = styled(Link)`
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+  text-decoration: none;
+
+  &:hover {
+    color: #5fafff;
+  }
+`;
+
+const Strip = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 10px;
+`;
+
+const Card = styled(Link)`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s;
+
+  &:hover {
+    border-color: #5fafff;
+  }
+`;
+
+const CardTop = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+`;
+
+const ProjectName = styled.span`
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const StateBadge = styled.span<{ $state: string }>`
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 2px 8px;
+  border-radius: 10px;
+  color: #fff;
+  background: ${({ $state }) => {
+    switch ($state) {
+      case 'done':
+        return '#22c55e';
+      case 'planning':
+        return '#8b5cf6';
+      case 'implementing':
+        return '#3b82f6';
+      case 'reviewing':
+        return '#f59e0b';
+      case 'deploying':
+        return '#0ea5e9';
+      case 'escalated':
+      case 'failed':
+        return '#ef4444';
+      default:
+        return '#6b7280';
+    }
+  }};
+`;
+
+const PipelineId = styled.span`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+`;
+
+const Empty = styled.div`
+  padding: 24px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  background: var(--bg-input);
+  border: 1px dashed var(--border-color);
+  border-radius: 10px;
+`;
+
+export default function ActivePipelineStrip() {
+  const [pipelines, setPipelines] = useState<Pipeline[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      try {
+        const res = await fetch(`${API_URL}/api/rails/pipelines?limit=8`, {
+          credentials: 'include',
+        });
+        if (!res.ok) {
+          if (!cancelled) setLoading(false);
+          return;
+        }
+        const data = (await res.json()) as { pipelines?: Pipeline[] };
+        if (!cancelled) {
+          setPipelines(data.pipelines ?? []);
+          setLoading(false);
+        }
+      } catch {
+        if (!cancelled) setLoading(false);
+      }
+    };
+    void load();
+    const t = setInterval(load, 5000);
+    return () => {
+      cancelled = true;
+      clearInterval(t);
+    };
+  }, []);
+
+  return (
+    <Wrapper>
+      <Header>
+        <Title>최근 파이프라인</Title>
+        <ViewAll href="/rails">전체 보기 →</ViewAll>
+      </Header>
+      {loading && pipelines.length === 0 ? (
+        <Empty>로딩 중...</Empty>
+      ) : pipelines.length === 0 ? (
+        <Empty>아직 실행된 파이프라인이 없어</Empty>
+      ) : (
+        <Strip>
+          {pipelines.map((p) => (
+            <Card key={p.id} href={`/rails?pipelineId=${p.id}`}>
+              <CardTop>
+                <ProjectName>{p.projectName}</ProjectName>
+                <StateBadge $state={p.currentState}>{p.currentState}</StateBadge>
+              </CardTop>
+              <PipelineId>{p.id.slice(0, 12)}…</PipelineId>
+            </Card>
+          ))}
+        </Strip>
+      )}
+    </Wrapper>
+  );
+}

frontend/components/live/ActiveTaskFocus.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import styled from 'styled-components';
+import type { ApprovalItem, WorkflowEvent } from '@/lib/control/types';
+
+const Panel = styled.aside`
+  display: grid;
+  gap: 14px;
+`;
+
+const Card = styled.section`
+  border: 1px solid var(--border-color);
+  border-radius: 22px;
+  padding: 18px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
+`;
+
+const Title = styled.h2`
+  margin: 0 0 12px;
+  font-size: 15px;
+`;
+
+const Eyebrow = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  margin-bottom: 6px;
+`;
+
+const EventTitle = styled.h3`
+  margin: 0;
+  font-size: 20px;
+  line-height: 1.2;
+`;
+
+const Detail = styled.p`
+  margin: 12px 0 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+`;
+
+const MetaGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-top: 16px;
+`;
+
+const Meta = styled.div`
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 14px;
+  padding: 10px;
+  background: rgba(0,0,0,0.18);
+`;
+
+const MetaValue = styled.div`
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-primary);
+  overflow-wrap: anywhere;
+`;
+
+const ApprovalList = styled.div`
+  display: grid;
+  gap: 8px;
+`;
+
+const ApprovalRow = styled.div<{ $status: ApprovalItem['status'] }>`
+  display: grid;
+  grid-template-columns: 42px 1fr auto;
+  gap: 8px;
+  align-items: center;
+  border: 1px solid ${({ $status }) => {
+    if ($status === 'blocked') return 'rgba(255, 112, 112, 0.42)';
+    if ($status === 'waiting') return 'rgba(255, 204, 102, 0.38)';
+    return 'rgba(139, 211, 255, 0.28)';
+  }};
+  border-radius: 14px;
+  padding: 10px;
+  background: rgba(0,0,0,0.14);
+  font-size: 12px;
+`;
+
+const Risk = styled.span`
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+`;
+
+const Status = styled.span`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+`;
+
+export default function ActiveTaskFocus({
+  selectedEvent,
+  approvals,
+}: {
+  selectedEvent: WorkflowEvent;
+  approvals: ApprovalItem[];
+}) {
+  return (
+    <Panel>
+      <Card>
+        <Title>Active Task Focus</Title>
+        <Eyebrow>{selectedEvent.sister} · {selectedEvent.type}</Eyebrow>
+        <EventTitle>{selectedEvent.title}</EventTitle>
+        <Detail>{selectedEvent.detail}</Detail>
+        <MetaGrid>
+          <Meta>
+            <Eyebrow>workflow</Eyebrow>
+            <MetaValue>{selectedEvent.workflowId}</MetaValue>
+          </Meta>
+          <Meta>
+            <Eyebrow>source</Eyebrow>
+            <MetaValue>{selectedEvent.source}</MetaValue>
+          </Meta>
+        </MetaGrid>
+      </Card>
+
+      <Card>
+        <Title>Approval / Risk</Title>
+        <ApprovalList>
+          {approvals.map((item) => (
+            <ApprovalRow key={item.id} $status={item.status}>
+              <Risk>{item.risk}</Risk>
+              <span>{item.title}</span>
+              <Status>{item.status}</Status>
+            </ApprovalRow>
+          ))}
+        </ApprovalList>
+      </Card>
+    </Panel>
+  );
+}

frontend/components/live/LiveWorkboard.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import SisterActivityLane from './SisterActivityLane';
+import WorkflowTimeline from './WorkflowTimeline';
+import ActiveTaskFocus from './ActiveTaskFocus';
+import { mockLiveWorkboard, rotateEvents } from '@/lib/control/mock-events';
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+`;
+
+const Hero = styled.header`
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 28px;
+  padding: 24px;
+  background:
+    radial-gradient(circle at 16% 18%, rgba(255,143,112,0.18), transparent 34%),
+    radial-gradient(circle at 82% 12%, rgba(139,211,255,0.16), transparent 28%),
+    linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.02));
+`;
+
+const HeroTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+
+  @media (max-width: 767px) {
+    flex-direction: column;
+  }
+`;
+
+const TitleBlock = styled.div`
+  display: grid;
+  gap: 8px;
+`;
+
+const Label = styled.div`
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+`;
+
+const Title = styled.h1`
+  margin: 0;
+  font-size: clamp(30px, 5vw, 58px);
+  line-height: 0.95;
+  letter-spacing: -0.055em;
+`;
+
+const Summary = styled.p`
+  margin: 0;
+  max-width: 760px;
+  color: var(--text-secondary);
+  font-size: 14px;
+`;
+
+const SourceBadge = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid rgba(255, 204, 102, 0.35);
+  border-radius: 999px;
+  padding: 8px 12px;
+  color: #ffcc66;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  white-space: nowrap;
+`;
+
+const Dot = styled.span`
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #ffcc66;
+  box-shadow: 0 0 18px rgba(255, 204, 102, 0.95);
+`;
+
+const PhaseGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 22px;
+
+  @media (max-width: 767px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const PhaseCell = styled.div<{ $active: boolean }>`
+  border: 1px solid ${({ $active }) => ($active ? 'rgba(255,255,255,0.36)' : 'rgba(255,255,255,0.09)')};
+  border-radius: 14px;
+  padding: 10px;
+  color: ${({ $active }) => ($active ? 'var(--text-primary)' : 'var(--text-secondary)')};
+  background: ${({ $active }) => ($active ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.16)')};
+  font-family: var(--font-mono);
+  font-size: 11px;
+`;
+
+const MainGrid = styled.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: var(--space-lg);
+
+  @media (max-width: 1100px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const LanesGrid = styled.section`
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-md);
+
+  @media (max-width: 900px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const BottomGrid = styled.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
+  gap: var(--space-lg);
+
+  @media (max-width: 1100px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const NoteCard = styled.section`
+  border: 1px solid var(--border-color);
+  border-radius: 22px;
+  padding: 18px;
+  background: rgba(255,255,255,0.025);
+`;
+
+const NoteTitle = styled.h2`
+  margin: 0 0 8px;
+  font-size: 15px;
+`;
+
+const NoteText = styled.p`
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+`;
+
+const phases = [
+  ['planning', 'PLAN'],
+  ['building', 'BUILD'],
+  ['reviewing', 'REVIEW'],
+  ['waiting_approval', 'APPROVAL'],
+  ['deploying', 'DEPLOY'],
+] as const;
+
+export default function LiveWorkboard() {
+  const [tick, setTick] = useState(0);
+  const [selectedId, setSelectedId] = useState(mockLiveWorkboard.events[0]?.id ?? '');
+
+  const events = useMemo(() => rotateEvents(mockLiveWorkboard.events, tick), [tick]);
+  const selected = events.find((event) => event.id === selectedId) ?? events[0];
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setTick((value) => value + 1);
+    }, 4200);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  return (
+    <Root>
+      <Hero>
+        <HeroTop>
+          <TitleBlock>
+            <Label>4 Sisters Live Workboard</Label>
+            <Title>지금 4자매가 어떻게 일하는지</Title>
+            <Summary>{mockLiveWorkboard.workflow.summary}</Summary>
+          </TitleBlock>
+          <SourceBadge aria-label="data source mock">
+            <Dot /> source: {mockLiveWorkboard.source} · v0
+          </SourceBadge>
+        </HeroTop>
+
+        <PhaseGrid>
+          {phases.map(([phase, label]) => (
+            <PhaseCell key={phase} $active={mockLiveWorkboard.workflow.phase === phase}>
+              {label}
+            </PhaseCell>
+          ))}
+        </PhaseGrid>
+      </Hero>
+
+      <MainGrid>
+        <LanesGrid>
+          {mockLiveWorkboard.sisters.map((lane) => (
+            <SisterActivityLane key={lane.id} lane={lane} />
+          ))}
+        </LanesGrid>
+        <ActiveTaskFocus selectedEvent={selected} approvals={mockLiveWorkboard.approvals} />
+      </MainGrid>
+
+      <BottomGrid>
+        <WorkflowTimeline
+          events={events}
+          selectedId={selected.id}
+          onSelect={(event) => setSelectedId(event.id)}
+        />
+        <NoteCard>
+          <NoteTitle>v0 범위</NoteTitle>
+          <NoteText>
+            이 화면은 아직 mock event stream이야. 목적은 먼저 “4자매가 작업하는 과정이 보이는 경험”을 검증하는 것. 다음 단계에서 Socket.IO live event와 `/control/summary`를 붙이면 돼.
+          </NoteText>
+        </NoteCard>
+      </BottomGrid>
+    </Root>
+  );
+}

frontend/components/live/SisterActivityLane.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import styled, { keyframes } from 'styled-components';
+import type { SisterLaneState } from '@/lib/control/types';
+
+const pulse = keyframes`
+  0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
+  50% { box-shadow: 0 0 24px rgba(255, 255, 255, 0.08); }
+`;
+
+const LaneCard = styled.article<{ $color: string; $active: boolean }>`
+  position: relative;
+  min-height: 258px;
+  border: 1px solid color-mix(in srgb, ${({ $color }) => $color} 42%, var(--border-color));
+  border-radius: 22px;
+  padding: 18px;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at top right, color-mix(in srgb, ${({ $color }) => $color} 18%, transparent), transparent 34%),
+    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
+  animation: ${({ $active }) => ($active ? pulse : 'none')} 2.8s ease-in-out infinite;
+`;
+
+const TopRow = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 18px;
+`;
+
+const Identity = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const Name = styled.h3`
+  margin: 0;
+  font-size: 18px;
+  letter-spacing: -0.02em;
+`;
+
+const Role = styled.span`
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+`;
+
+const StatusPill = styled.span<{ $color: string }>`
+  border: 1px solid color-mix(in srgb, ${({ $color }) => $color} 56%, var(--border-color));
+  color: ${({ $color }) => $color};
+  border-radius: 999px;
+  padding: 5px 9px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  background: rgba(0, 0, 0, 0.22);
+`;
+
+const TaskBlock = styled.div`
+  display: grid;
+  gap: 12px;
+`;
+
+const Label = styled.div`
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  margin-bottom: 4px;
+`;
+
+const Body = styled.p`
+  margin: 0;
+  font-size: 14px;
+  color: var(--text-primary);
+`;
+
+const Muted = styled.p`
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+`;
+
+const ProgressTrack = styled.div`
+  height: 7px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+  margin-top: 16px;
+`;
+
+const ProgressFill = styled.div<{ $progress: number; $color: string }>`
+  width: ${({ $progress }) => $progress}%;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, ${({ $color }) => $color}, color-mix(in srgb, ${({ $color }) => $color} 54%, white));
+`;
+
+const MetaRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 10px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+`;
+
+export default function SisterActivityLane({ lane }: { lane: SisterLaneState }) {
+  const active = lane.status === 'working' || lane.status === 'thinking' || lane.status === 'reviewing';
+
+  return (
+    <LaneCard $color={lane.color} $active={active}>
+      <TopRow>
+        <Identity>
+          <Name>{lane.name}</Name>
+          <Role>{lane.role} · {lane.mode}</Role>
+        </Identity>
+        <StatusPill $color={lane.color}>{lane.status}</StatusPill>
+      </TopRow>
+
+      <TaskBlock>
+        <div>
+          <Label>Current task</Label>
+          <Body>{lane.currentTask}</Body>
+        </div>
+        <div>
+          <Label>Last event</Label>
+          <Muted>{lane.lastEvent}</Muted>
+        </div>
+        <div>
+          <Label>Next handoff</Label>
+          <Muted>{lane.nextHandoff}</Muted>
+        </div>
+      </TaskBlock>
+
+      <ProgressTrack aria-label={`${lane.name} progress`}>
+        <ProgressFill $progress={lane.progress} $color={lane.color} />
+      </ProgressTrack>
+      <MetaRow>
+        <span>{lane.phase}</span>
+        <span>{lane.progress}%</span>
+      </MetaRow>
+    </LaneCard>
+  );
+}

frontend/components/live/WorkflowTimeline.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import styled from 'styled-components';
+import type { WorkflowEvent } from '@/lib/control/types';
+
+const TimelineRoot = styled.section`
+  border: 1px solid var(--border-color);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.025);
+  padding: 18px;
+`;
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 14px;
+`;
+
+const Title = styled.h2`
+  font-size: 15px;
+  margin: 0;
+`;
+
+const LiveBadge = styled.span`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: #ffcc66;
+  border: 1px solid rgba(255, 204, 102, 0.35);
+  border-radius: 999px;
+  padding: 4px 8px;
+`;
+
+const EventList = styled.ol`
+  list-style: none;
+  display: grid;
+  gap: 10px;
+`;
+
+const EventItem = styled.li<{ $selected: boolean }>`
+  display: grid;
+  grid-template-columns: 54px 1fr;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 16px;
+  border: 1px solid ${({ $selected }) => ($selected ? 'rgba(255,255,255,0.34)' : 'rgba(255,255,255,0.08)')};
+  background: ${({ $selected }) => ($selected ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.16)')};
+  cursor: pointer;
+  transition: border-color .15s ease, background .15s ease;
+
+  &:hover {
+    border-color: rgba(255,255,255,0.26);
+  }
+`;
+
+const EventTime = styled.div`
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+`;
+
+const EventBody = styled.div`
+  min-width: 0;
+`;
+
+const EventTitle = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 700;
+`;
+
+const EventDetail = styled.p`
+  margin: 5px 0 0;
+  color: var(--text-secondary);
+  font-size: 12px;
+`;
+
+const TypeBadge = styled.span`
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-secondary);
+`;
+
+export default function WorkflowTimeline({
+  events,
+  selectedId,
+  onSelect,
+}: {
+  events: WorkflowEvent[];
+  selectedId: string;
+  onSelect: (event: WorkflowEvent) => void;
+}) {
+  return (
+    <TimelineRoot>
+      <Header>
+        <Title>Workflow Timeline</Title>
+        <LiveBadge>mock stream</LiveBadge>
+      </Header>
+      <EventList>
+        {events.map((event) => (
+          <EventItem
+            key={event.id}
+            $selected={event.id === selectedId}
+            onClick={() => onSelect(event)}
+          >
+            <EventTime>{event.at}</EventTime>
+            <EventBody>
+              <EventTitle>
+                <span>{event.title}</span>
+                <TypeBadge>{event.type}</TypeBadge>
+              </EventTitle>
+              <EventDetail>{event.detail}</EventDetail>
+            </EventBody>
+          </EventItem>
+        ))}
+      </EventList>
+    </TimelineRoot>
+  );
+}

frontend/components/office-room/OfficeRoom.tsx

@@ -0,0 +1,452 @@
+'use client';
+
+import React, { useState, useMemo } from 'react';
+import styled, { keyframes } from 'styled-components';
+import { API_URL } from '@/lib/config';
+import SisterDetailPanel from './SisterDetailPanel';
+
+/**
+ * Photo-first virtual office.
+ *
+ * Pixel art proved too low-resolution to capture the actual sister
+ * illustrations. Instead the office is a stylized CSS/SVG room and each
+ * sister is a circular portrait of her real avatar (served by the
+ * backend at /api/sisters/{name}/avatar) sitting at her desk.
+ *
+ * The layout is a simple 2x2 grid:
+ *
+ *   하랑 (plan)        나랑 (implement)
+ *           ┌────────┐
+ *           │ 회의실 │
+ *           └────────┘
+ *   다랑 (review)      이랑 (deploy)
+ *
+ * Each sister card has:
+ *   - circular portrait
+ *   - korean name + role
+ *   - status dot
+ *   - active stage = glowing pulse ring
+ *   - clickable → opens detail panel
+ */
+
+interface Sister {
+  key: string;
+  nameKR: string;
+  role: string;
+  stage: 'plan' | 'implement' | 'review' | 'deploy';
+  accent: string; // sister-specific accent color (matches the actual illustration)
+}
+
+const SISTERS: Sister[] = [
+  { key: 'harang', nameKR: '하랑이', role: '기획', stage: 'plan',      accent: '#5fafff' },
+  { key: 'narang', nameKR: '나랑이', role: '구현', stage: 'implement', accent: '#37c4d4' },
+  { key: 'darang', nameKR: '다랑이', role: '검토', stage: 'review',    accent: '#e84848' },
+  { key: 'erang',  nameKR: '이랑이', role: '배포', stage: 'deploy',    accent: '#9b8df0' },
+];
+
+interface OfficeRoomProps {
+  /** Currently active stage from any running pipeline (highlights one sister). */
+  activeStage?: 'plan' | 'implement' | 'review' | 'deploy' | null;
+}
+
+export default function OfficeRoom({ activeStage }: OfficeRoomProps) {
+  const [selected, setSelected] = useState<string | null>(null);
+
+  const handleClick = (key: string) => {
+    setSelected((prev) => (prev === key ? null : key));
+  };
+
+  return (
+    <Layout>
+      <RoomCard>
+        <RoomHeader>
+          <RoomTitle>🏢 하나랑 사무실</RoomTitle>
+          <RoomSub>4 SISTERS · LIVE</RoomSub>
+        </RoomHeader>
+
+        <Floor>
+          <RoomDecor />
+
+          {SISTERS.map((s, idx) => (
+            <DeskWrap key={s.key} $position={idx}>
+              <DeskBack />
+              <SisterCard
+                $accent={s.accent}
+                $active={activeStage === s.stage}
+                $selected={selected === s.key}
+                onClick={() => handleClick(s.key)}
+              >
+                {activeStage === s.stage && <PulseRing $accent={s.accent} />}
+                <Portrait
+                  src={`${API_URL}/api/sisters/${s.key}/avatar`}
+                  alt={s.nameKR}
+                  $accent={s.accent}
+                />
+                <NameRow>
+                  <SisterName>{s.nameKR}</SisterName>
+                  <RoleTag $accent={s.accent}>{s.role}</RoleTag>
+                </NameRow>
+                <StatusDot $active={activeStage === s.stage} $accent={s.accent} />
+              </SisterCard>
+            </DeskWrap>
+          ))}
+
+          <MeetingRoom>
+            <MeetingLabel>회의실</MeetingLabel>
+          </MeetingRoom>
+
+          {/* Stage flow arrows (top→right→bottom→left, plan→impl→review→deploy) */}
+          <FlowSvg viewBox="0 0 100 100" preserveAspectRatio="none">
+            <defs>
+              <marker
+                id="arrow"
+                viewBox="0 0 10 10"
+                refX="6"
+                refY="5"
+                markerWidth="6"
+                markerHeight="6"
+                orient="auto"
+              >
+                <path d="M0,0 L10,5 L0,10 z" fill="#5fafff" opacity="0.55" />
+              </marker>
+            </defs>
+            {/* harang → narang (top horizontal) */}
+            <line
+              x1="35" y1="22" x2="65" y2="22"
+              stroke="#5fafff" strokeWidth="0.4" strokeDasharray="1.5 1.5"
+              markerEnd="url(#arrow)" opacity={activeStage === 'plan' || activeStage === 'implement' ? 0.85 : 0.25}
+            />
+            {/* narang → darang (right vertical → cross to bottom-right? we draw a curve) */}
+            <line
+              x1="78" y1="35" x2="78" y2="65"
+              stroke="#5fafff" strokeWidth="0.4" strokeDasharray="1.5 1.5"
+              markerEnd="url(#arrow)" opacity={activeStage === 'implement' || activeStage === 'review' ? 0.85 : 0.25}
+            />
+            {/* darang → erang? Actually deploy is below right; review→deploy is bottom horizontal reversed. Use bottom row left direction */}
+            <line
+              x1="65" y1="78" x2="35" y2="78"
+              stroke="#5fafff" strokeWidth="0.4" strokeDasharray="1.5 1.5"
+              markerEnd="url(#arrow)" opacity={activeStage === 'review' || activeStage === 'deploy' ? 0.85 : 0.25}
+            />
+            {/* erang → harang? Pipeline ends at deploy. Skip return arrow. */}
+          </FlowSvg>
+        </Floor>
+
+        <Hint>책상 클릭 → 자매 상세 정보 · {activeStage ? `현재 ${activeStage} 단계 진행 중` : 'idle'}</Hint>
+      </RoomCard>
+
+      <PanelCol>
+        {selected ? (
+          <SisterDetailPanel
+            name={selected}
+            onClose={() => setSelected(null)}
+          />
+        ) : (
+          <PanelEmpty>
+            👀 자매를 클릭해서<br />
+            상세 정보를 봐
+          </PanelEmpty>
+        )}
+      </PanelCol>
+    </Layout>
+  );
+}
+
+// ───────────────────────── styled ─────────────────────────
+
+const pulse = keyframes`
+  0%, 100% { transform: scale(1); opacity: 0.6; }
+  50%      { transform: scale(1.15); opacity: 0.0; }
+`;
+
+const dotPulse = keyframes`
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.4; }
+`;
+
+const Layout = styled.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 16px;
+  width: 100%;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const RoomCard = styled.section`
+  position: relative;
+  background: linear-gradient(160deg, #1a1f2e 0%, #0e1118 100%);
+  border: 1px solid var(--border-color);
+  border-radius: 18px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 620px;
+`;
+
+const RoomHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 18px 24px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+`;
+
+const RoomTitle = styled.h2`
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+`;
+
+const RoomSub = styled.span`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-secondary);
+`;
+
+const Floor = styled.div`
+  position: relative;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 0;
+  padding: 36px;
+  min-height: 520px;
+`;
+
+/**
+ * Background decoration: subtle isometric grid lines + carpet circle.
+ * Pure CSS — no images.
+ */
+const RoomDecor = styled.div`
+  position: absolute;
+  inset: 16px;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+  background-size: 32px 32px;
+  border: 1px dashed rgba(255, 255, 255, 0.06);
+  border-radius: 12px;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200px;
+    height: 200px;
+    transform: translate(-50%, -50%);
+    background: radial-gradient(circle, rgba(95, 175, 255, 0.05) 0%, transparent 70%);
+    border-radius: 50%;
+  }
+`;
+
+const FlowSvg = styled.svg`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+`;
+
+const DeskWrap = styled.div<{ $position: number }>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  gap: 8px;
+  ${({ $position }) => {
+    switch ($position) {
+      case 0: return 'justify-self: start; align-self: start; padding-top: 12px;';
+      case 1: return 'justify-self: end; align-self: start; padding-top: 12px;';
+      case 2: return 'justify-self: start; align-self: end; padding-bottom: 12px;';
+      case 3: return 'justify-self: end; align-self: end; padding-bottom: 12px;';
+      default: return '';
+    }
+  }}
+`;
+
+/** Simple "desk" silhouette under the sister card. */
+const DeskBack = styled.div`
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 130px;
+  height: 24px;
+  background: linear-gradient(180deg, #4a3520 0%, #2a1d10 100%);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  z-index: -1;
+  &::before {
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40px;
+    height: 8px;
+    background: #1a3654;
+    border: 1px solid #0a1a2c;
+    border-radius: 2px 2px 0 0;
+  }
+`;
+
+interface SisterCardProps {
+  $accent: string;
+  $active: boolean;
+  $selected: boolean;
+}
+
+const SisterCard = styled.button<SisterCardProps>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 14px 12px;
+  background: ${({ $selected }) =>
+    $selected ? 'rgba(255, 255, 255, 0.08)' : 'rgba(255, 255, 255, 0.04)'};
+  border: 1px solid
+    ${({ $accent, $selected }) => ($selected ? $accent : 'rgba(255, 255, 255, 0.1)')};
+  border-radius: 12px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: ${({ $accent }) => $accent};
+    background: rgba(255, 255, 255, 0.08);
+  }
+`;
+
+const PulseRing = styled.span<{ $accent: string }>`
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  border: 2px solid ${({ $accent }) => $accent};
+  animation: ${pulse} 1.6s ease-out infinite;
+  pointer-events: none;
+`;
+
+const Portrait = styled.img<{ $accent: string }>`
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  border: 3px solid ${({ $accent }) => $accent};
+  background: #111;
+  object-fit: cover;
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4),
+    0 4px 16px rgba(0, 0, 0, 0.5);
+`;
+
+const NameRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const SisterName = styled.span`
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-primary);
+`;
+
+const RoleTag = styled.span<{ $accent: string }>`
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 7px;
+  border-radius: 8px;
+  color: ${({ $accent }) => $accent};
+  border: 1px solid ${({ $accent }) => $accent};
+  background: rgba(0, 0, 0, 0.3);
+`;
+
+const StatusDot = styled.span<{ $active: boolean; $accent: string }>`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: ${({ $active, $accent }) => ($active ? $accent : '#3a3a44')};
+  box-shadow: ${({ $active, $accent }) =>
+    $active ? `0 0 8px ${$accent}` : 'none'};
+  animation: ${({ $active }) => ($active ? dotPulse : 'none')} 1.6s ease-in-out
+    infinite;
+`;
+
+const MeetingRoom = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 110px;
+  height: 70px;
+  background: linear-gradient(180deg, rgba(95, 175, 255, 0.08) 0%, rgba(95, 175, 255, 0.02) 100%);
+  border: 1px solid rgba(95, 175, 255, 0.25);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  pointer-events: none;
+`;
+
+const MeetingLabel = styled.span`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(95, 175, 255, 0.7);
+`;
+
+const Hint = styled.div`
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  padding: 12px 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+`;
+
+const PanelCol = styled.aside`
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 18px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 620px;
+`;
+
+const PanelEmpty = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  line-height: 1.7;
+`;

frontend/components/office-room/SisterDetailPanel.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { API_URL } from '@/lib/config';
+
+interface SisterDetailPanelProps {
+  name: string;
+  onClose: () => void;
+}
+
+interface SisterInfo {
+  name: string;
+  status?: 'online' | 'offline' | 'working' | 'unknown';
+  role?: string;
+  currentTask?: string | null;
+  lastSeen?: string | null;
+  uptime?: string;
+  cpu?: number;
+  memory?: { used?: number; total?: number };
+}
+
+const SISTER_KOREAN: Record<string, string> = {
+  harang: '하랑이',
+  narang: '나랑이',
+  darang: '다랑이',
+  erang: '이랑이',
+};
+
+const SISTER_ROLE: Record<string, string> = {
+  harang: '기획 (Planner)',
+  narang: '구현 (Developer)',
+  darang: '검토 (QA)',
+  erang: '배포 (Infra)',
+};
+
+const SISTER_DESC: Record<string, string> = {
+  harang:
+    '프로젝트 요구사항에서 MVP 범위와 통과 기준을 결정한다. rails 파이프라인의 첫 단계.',
+  narang:
+    '하랑이의 기획을 받아 코드/파일을 직접 생성하고 git push 까지 진행한다.',
+  darang:
+    'narang 의 구현물을 review. APPROVE / REQUEST_CHANGES / ABORT 중 하나를 결정.',
+  erang:
+    'darang 통과 후 산출물을 배포 검증한다. 마지막 단계, DEPLOY_DONE / DEPLOY_FAILED.',
+};
+
+const SISTER_ACCENT: Record<string, string> = {
+  harang: '#5fafff',
+  narang: '#37c4d4',
+  darang: '#e84848',
+  erang: '#9b8df0',
+};
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 14px;
+`;
+
+const PortraitLg = styled.img<{ $accent: string }>`
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  border: 3px solid ${({ $accent }) => $accent};
+  background: #111;
+  object-fit: cover;
+  flex-shrink: 0;
+`;
+
+const NameRow = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+`;
+
+const NameKR = styled.h2`
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0;
+  color: var(--text-primary);
+`;
+
+const RoleLabel = styled.span`
+  font-size: 11px;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+`;
+
+const CloseBtn = styled.button`
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:hover {
+    color: var(--text-primary);
+    border-color: var(--text-primary);
+  }
+`;
+
+const Section = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+const SectionLabel = styled.div`
+  font-size: 10px;
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
+`;
+
+const SectionBody = styled.div`
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--text-primary);
+`;
+
+const StatusDot = styled.span<{ $status: string }>`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 8px;
+  background: ${({ $status }) => {
+    switch ($status) {
+      case 'online':
+      case 'working':
+        return '#22c55e';
+      case 'offline':
+        return '#6b7280';
+      default:
+        return '#f59e0b';
+    }
+  }};
+`;
+
+export default function SisterDetailPanel({
+  name,
+  onClose,
+}: SisterDetailPanelProps) {
+  const [info, setInfo] = useState<SisterInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setInfo(null);
+    fetch(`${API_URL}/api/sisters/${name}`, { credentials: 'include' })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data: SisterInfo | null) => {
+        if (cancelled) return;
+        setInfo(data);
+        setLoading(false);
+      })
+      .catch(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [name]);
+
+  const accent = SISTER_ACCENT[name] ?? '#5fafff';
+
+  return (
+    <>
+      <Header>
+        <PortraitLg
+          src={`${API_URL}/api/sisters/${name}/avatar`}
+          alt={name}
+          $accent={accent}
+        />
+        <NameRow>
+          <NameKR>{SISTER_KOREAN[name] ?? name}</NameKR>
+          <RoleLabel>{SISTER_ROLE[name] ?? 'unknown'}</RoleLabel>
+        </NameRow>
+        <CloseBtn onClick={onClose}>닫기</CloseBtn>
+      </Header>
+
+      <Section>
+        <SectionLabel>역할</SectionLabel>
+        <SectionBody>{SISTER_DESC[name] ?? '—'}</SectionBody>
+      </Section>
+
+      <Section>
+        <SectionLabel>상태</SectionLabel>
+        <SectionBody>
+          <StatusDot $status={info?.status ?? 'unknown'} />
+          {loading ? '확인 중...' : info?.status ?? '상태 정보 없음'}
+        </SectionBody>
+      </Section>
+
+      {info?.currentTask && (
+        <Section>
+          <SectionLabel>현재 작업</SectionLabel>
+          <SectionBody>{info.currentTask}</SectionBody>
+        </Section>
+      )}
+
+      {info?.uptime && (
+        <Section>
+          <SectionLabel>업타임</SectionLabel>
+          <SectionBody style={{ fontFamily: 'var(--font-mono)' }}>
+            {info.uptime}
+          </SectionBody>
+        </Section>
+      )}
+
+      {typeof info?.cpu === 'number' && (
+        <Section>
+          <SectionLabel>CPU</SectionLabel>
+          <SectionBody style={{ fontFamily: 'var(--font-mono)' }}>
+            {info.cpu.toFixed(1)}%
+          </SectionBody>
+        </Section>
+      )}
+    </>
+  );
+}

frontend/components/rails/FileViewerModal.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import ReactMarkdown from 'react-markdown';
+import { API_URL } from '@/lib/config';
+
+const Backdrop = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+`;
+
+const Modal = styled.div`
+  width: min(920px, 96vw);
+  max-height: 86vh;
+  background: var(--bg-main);
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+`;
+
+const Header = styled.header`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 24px;
+  border-bottom: 1px solid var(--border-color);
+  gap: 16px;
+`;
+
+const TitleArea = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+
+const Label = styled.span`
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-secondary);
+`;
+
+const Path = styled.h2`
+  font-size: 14px;
+  font-family: var(--font-mono);
+  margin: 4px 0 0;
+  word-break: break-all;
+  color: var(--text-primary);
+`;
+
+const Actions = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+`;
+
+const Btn = styled.button`
+  padding: 8px 14px;
+  background: transparent;
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: 12px;
+  cursor: pointer;
+
+  &:hover {
+    border-color: #5fafff;
+  }
+`;
+
+const Body = styled.div`
+  overflow: auto;
+  padding: 24px 28px;
+  flex: 1;
+`;
+
+const Markdown = styled.div`
+  font-size: 13px;
+  line-height: 1.75;
+  color: var(--text-primary);
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 15px;
+    font-weight: 700;
+    margin: 18px 0 8px;
+  }
+  p { margin: 10px 0; }
+  ul, ol { margin: 10px 0; padding-left: 22px; }
+  li { margin: 4px 0; }
+  code {
+    background: var(--bg-input);
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: var(--font-mono);
+    color: #5fafff;
+  }
+  pre {
+    background: var(--bg-input);
+    border: 1px solid var(--border-color);
+    padding: 14px 16px;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 12px 0;
+    code { background: transparent; padding: 0; color: inherit; font-size: 12px; }
+  }
+  blockquote {
+    border-left: 3px solid var(--border-color);
+    padding-left: 12px;
+    margin: 10px 0;
+    color: var(--text-secondary);
+  }
+  hr { border: none; border-top: 1px solid var(--border-color); margin: 16px 0; }
+  a { color: #5fafff; text-decoration: none; &:hover { text-decoration: underline; } }
+  strong { font-weight: 700; }
+  table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 12px; }
+  th, td { border: 1px solid var(--border-color); padding: 8px 10px; text-align: left; }
+  th { background: var(--bg-input); }
+`;
+
+const Code = styled.pre`
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  padding: 18px 20px;
+  border-radius: 10px;
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  margin: 0;
+  white-space: pre;
+`;
+
+const Loading = styled.div`
+  padding: 60px 20px;
+  text-align: center;
+  color: var(--text-secondary);
+`;
+
+const ErrorMsg = styled.div`
+  padding: 20px;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid #ef4444;
+  border-radius: 10px;
+  color: #fca5a5;
+  font-size: 13px;
+`;
+
+function isMarkdown(path: string): boolean {
+  return /\.(md|markdown)$/i.test(path);
+}
+
+function stripFrontMatter(text: string): { body: string; meta: string } {
+  // Front matter: --- ... --- at the top
+  const match = text.match(/^---\n([\s\S]*?)\n---\n?/);
+  if (!match) return { body: text, meta: '' };
+  return { body: text.slice(match[0].length), meta: match[1] ?? '' };
+}
+
+interface Props {
+  path: string;        // display path
+  source:
+    | { type: 'llm'; text: string }           // already-loaded text (from sub-task result)
+    | { type: 'url'; url: string };           // fetch via backend proxy
+  onClose: () => void;
+}
+
+export default function FileViewerModal({ path, source, onClose }: Props) {
+  const [content, setContent] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    async function load() {
+      if (source.type === 'llm') {
+        if (!cancelled) {
+          setContent(source.text);
+          setLoading(false);
+        }
+        return;
+      }
+      try {
+        const res = await fetch(
+          `${API_URL}/api/rails/file-content?url=${encodeURIComponent(source.url)}`,
+          { credentials: 'include' },
+        );
+        if (!res.ok) {
+          if (!cancelled) {
+            setError(`HTTP ${res.status}`);
+            setLoading(false);
+          }
+          return;
+        }
+        const data = (await res.json()) as { content: string };
+        if (!cancelled) {
+          setContent(data.content ?? '');
+          setLoading(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+          setLoading(false);
+        }
+      }
+    }
+
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [source]);
+
+  const copyToClipboard = () => {
+    if (!content) return;
+    void navigator.clipboard?.writeText(content);
+  };
+
+  const renderAsMarkdown = isMarkdown(path);
+  const { body, meta } = renderAsMarkdown
+    ? stripFrontMatter(content)
+    : { body: content, meta: '' };
+
+  return (
+    <Backdrop onClick={onClose}>
+      <Modal onClick={(e) => e.stopPropagation()}>
+        <Header>
+          <TitleArea>
+            <Label>FILE</Label>
+            <Path>{path}</Path>
+          </TitleArea>
+          <Actions>
+            <Btn onClick={copyToClipboard}>복사</Btn>
+            <Btn onClick={onClose}>닫기 ESC</Btn>
+          </Actions>
+        </Header>
+        <Body>
+          {loading ? (
+            <Loading>로딩 중...</Loading>
+          ) : error ? (
+            <ErrorMsg>불러오기 실패: {error}</ErrorMsg>
+          ) : renderAsMarkdown ? (
+            <>
+              {meta && (
+                <div
+                  style={{
+                    fontSize: 10,
+                    fontFamily: 'var(--font-mono)',
+                    opacity: 0.5,
+                    marginBottom: 16,
+                    padding: 12,
+                    border: '1px solid var(--border-color)',
+                    borderRadius: 8,
+                    whiteSpace: 'pre-wrap',
+                  }}
+                >
+                  {meta}
+                </div>
+              )}
+              <Markdown>
+                <ReactMarkdown>{body}</ReactMarkdown>
+              </Markdown>
+            </>
+          ) : (
+            <Code>{content}</Code>
+          )}
+        </Body>
+      </Modal>
+    </Backdrop>
+  );
+}

frontend/components/rails/SubTaskDetailDrawer.tsx

@@ -5,9 +5,14 @@ import styled from 'styled-components';
 import ReactMarkdown from 'react-markdown';
 import { API_URL } from '@/lib/config';
 import SisterAvatar from '@/components/common/SisterAvatar';
+import FileViewerModal from './FileViewerModal';
 
 const SISTER_NAMES = new Set(['harang', 'narang', 'darang', 'erang']);
 
+type FileViewerSource =
+  | { type: 'llm'; text: string }
+  | { type: 'url'; url: string };
+
 function parseResult(
   raw: string | null,
 ): { text: string; ok: boolean; extra?: Record<string, unknown> } | null {
@@ -179,6 +184,88 @@ const SectionLabel = styled.h3`
   margin: 0;
 `;
 
+const CollapsibleHeader = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  text-align: left;
+  width: fit-content;
+
+  &:hover {
+    color: #5fafff;
+  }
+`;
+
+const ChevronIcon = styled.span<{ $open: boolean }>`
+  display: inline-block;
+  font-size: 9px;
+  width: 12px;
+  text-align: center;
+  transform: ${({ $open }) => ($open ? 'rotate(90deg)' : 'rotate(0deg)')};
+  transition: transform 0.15s ease;
+`;
+
+const SectionCount = styled.span`
+  font-size: 10px;
+  font-weight: 600;
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  padding: 1px 8px;
+  color: var(--text-primary);
+`;
+
+const ChipRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 4px;
+`;
+
+const Chip = styled.button<{ $active: boolean }>`
+  font-size: 10px;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: ${({ $active }) => ($active ? '#5fafff' : 'transparent')};
+  color: ${({ $active }) => ($active ? '#fff' : 'var(--text-secondary)')};
+  border: 1px solid ${({ $active }) => ($active ? '#5fafff' : 'var(--border-color)')};
+  cursor: pointer;
+  font-family: inherit;
+
+  &:hover {
+    border-color: #5fafff;
+    color: ${({ $active }) => ($active ? '#fff' : '#5fafff')};
+  }
+`;
+
+const ShowMoreButton = styled.button`
+  display: block;
+  margin-top: 8px;
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  font-size: 11px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-family: inherit;
+
+  &:hover {
+    border-color: #5fafff;
+    color: #5fafff;
+  }
+`;
+
 const Grid = styled.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -242,6 +329,24 @@ const LlmOutput = styled.div<{ $ok: boolean }>`
   line-height: 1.75;
   color: var(--text-primary);
 
+  /* 텍스트 드래그/복사 가능하게 강제 + 가시적 selection 색 */
+  user-select: text;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  cursor: text;
+
+  *::selection,
+  &::selection {
+    background: rgba(95, 175, 255, 0.35);
+    color: var(--text-primary);
+  }
+
+  /* 내부 button (더보기 토글) 은 다시 not-allowed 가 아니라 pointer 로 */
+  button {
+    cursor: pointer;
+    user-select: none;
+  }
+
   & > *:first-child { margin-top: 0; }
   & > *:last-child { margin-bottom: 0; }
 
@@ -380,6 +485,76 @@ const EventPayload = styled.pre`
   opacity: 0.8;
 `;
 
+const FileList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+const FileRow = styled.div<{ $clickable?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  cursor: ${({ $clickable }) => ($clickable ? 'pointer' : 'default')};
+  transition: border-color 0.15s ease, background 0.15s ease;
+
+  &:hover {
+    ${({ $clickable }) =>
+      $clickable
+        ? 'border-color: #5fafff; background: rgba(95, 175, 255, 0.06);'
+        : ''}
+  }
+`;
+
+const FileBadge = styled.span<{ $kind: string }>`
+  padding: 2px 8px;
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  border-radius: 10px;
+  color: #fff;
+  background: ${({ $kind }) => {
+    switch ($kind) {
+      case 'html':
+      case 'htm':
+        return '#f97316';
+      case 'js':
+      case 'javascript':
+      case 'jsx':
+        return '#eab308';
+      case 'ts':
+      case 'typescript':
+      case 'tsx':
+        return '#3b82f6';
+      case 'css':
+      case 'scss':
+        return '#ec4899';
+      case 'json':
+      case 'yaml':
+        return '#8b5cf6';
+      case 'md':
+      case 'markdown':
+        return '#6b7280';
+      case 'url':
+        return '#22c55e';
+      default:
+        return '#525252';
+    }
+  }};
+`;
+
+const FilePath = styled.code`
+  flex: 1;
+  word-break: break-all;
+  color: var(--text-primary);
+`;
+
 const Loading = styled.div`
   padding: 60px 20px;
   text-align: center;
@@ -451,15 +626,77 @@ interface Props {
   onClose: () => void;
 }
 
+type EventFilterMode = 'milestones' | 'all';
+
+const MILESTONE_EVENT_TYPES = new Set([
+  'spawned',
+  'completed',
+  'failed',
+  'escalated',
+]);
+
+const LLM_PREVIEW_LIMIT = 280;
+
 export default function SubTaskDetailDrawer({ subTaskId, onClose }: Props) {
   const [detail, setDetail] = useState<SubTaskDetail | null>(null);
   const [loading, setLoading] = useState(true);
+  const [fileViewer, setFileViewer] = useState<{
+    path: string;
+    source: FileViewerSource;
+  } | null>(null);
+  const [llmExpanded, setLlmExpanded] = useState(false);
+  const [eventsExpanded, setEventsExpanded] = useState(false);
+  const [childrenExpanded, setChildrenExpanded] = useState(false);
+  const [eventFilter, setEventFilter] = useState<EventFilterMode>('milestones');
+
+  // Reset transient UI state when switching to a different sub-task
+  useEffect(() => {
+    setLlmExpanded(false);
+    setEventsExpanded(false);
+    setChildrenExpanded(false);
+    setEventFilter('milestones');
+  }, [subTaskId]);
 
   const llmResult = useMemo(
     () => (detail ? parseResult(detail.resultJson) : null),
     [detail],
   );
 
+  const filteredEvents = useMemo(() => {
+    if (!detail) return [];
+    if (eventFilter === 'all') return detail.events;
+    return detail.events.filter((ev) => MILESTONE_EVENT_TYPES.has(ev.eventType));
+  }, [detail, eventFilter]);
+
+  const artifacts = useMemo(() => {
+    if (!detail)
+      return {
+        mainFile: '',
+        codeFiles: [] as Array<{ path: string; lang: string }>,
+        deployUrl: '',
+        rawUrlBase: '',
+      };
+    let mainFile = '';
+    let codeFiles: Array<{ path: string; lang: string }> = [];
+    let deployUrl = '';
+    let rawUrlBase = '';
+    for (const ev of detail.events) {
+      if (ev.eventType === 'completed' && ev.payload && typeof ev.payload === 'object') {
+        const p = ev.payload as Record<string, unknown>;
+        if (typeof p.file === 'string' && p.file) mainFile = p.file;
+        if (Array.isArray(p.extractedFiles)) {
+          codeFiles = (p.extractedFiles as Array<{ path?: string; lang?: string }>)
+            .filter((f): f is { path: string; lang: string } => !!f?.path)
+            .map((f) => ({ path: f.path, lang: f.lang ?? '' }));
+        }
+        if (typeof p.deployUrl === 'string') deployUrl = p.deployUrl;
+        if (typeof p.repoUrl === 'string' && !deployUrl) deployUrl = p.repoUrl;
+        if (typeof p.rawUrlBase === 'string') rawUrlBase = p.rawUrlBase;
+      }
+    }
+    return { mainFile, codeFiles, deployUrl, rawUrlBase };
+  }, [detail]);
+
   useEffect(() => {
     setLoading(true);
     fetch(`${API_URL}/api/rails/sub-tasks/${subTaskId}`, {
@@ -482,7 +719,26 @@ export default function SubTaskDetailDrawer({ subTaskId, onClose }: Props) {
   }, [onClose]);
 
   return (
-    <Backdrop onClick={onClose}>
+    <Backdrop
+      onMouseDown={(e) => {
+        // Only register a backdrop close if the user actually started
+        // their click ON the backdrop (not on the drawer content). This
+        // prevents the drawer from closing when a user drag-selects
+        // text inside and accidentally lifts the mouse on the backdrop.
+        if (e.target === e.currentTarget) {
+          (e.currentTarget as HTMLDivElement).dataset.backdropDown = '1';
+        }
+      }}
+      onClick={(e) => {
+        const el = e.currentTarget as HTMLDivElement;
+        if (e.target === e.currentTarget && el.dataset.backdropDown === '1') {
+          delete el.dataset.backdropDown;
+          onClose();
+        } else {
+          delete el.dataset.backdropDown;
+        }
+      }}
+    >
       <Drawer onClick={(e) => e.stopPropagation()}>
         {loading || !detail ? (
           <Loading>로딩 중...</Loading>
@@ -565,9 +821,72 @@ export default function SubTaskDetailDrawer({ subTaskId, onClose }: Props) {
                 </Section>
               )}
 
+              {(artifacts.mainFile || artifacts.codeFiles.length > 0 || artifacts.deployUrl) && (
+                <Section>
+                  <SectionLabel>산출물</SectionLabel>
+                  <FileList>
+                    {artifacts.mainFile && (
+                      <FileRow
+                        $clickable={!!llmResult?.text}
+                        onClick={() => {
+                          if (llmResult?.text) {
+                            setFileViewer({
+                              path: artifacts.mainFile,
+                              source: { type: 'llm', text: llmResult.text },
+                            });
+                          }
+                        }}
+                      >
+                        <FileBadge $kind="md">log</FileBadge>
+                        <FilePath>{artifacts.mainFile}</FilePath>
+                      </FileRow>
+                    )}
+                    {artifacts.codeFiles.map((f) => {
+                      const url = artifacts.rawUrlBase
+                        ? `${artifacts.rawUrlBase}/${detail.agentName}/files/${f.path}`
+                        : '';
+                      return (
+                        <FileRow
+                          key={f.path}
+                          $clickable={!!url}
+                          onClick={() => {
+                            if (url) {
+                              setFileViewer({
+                                path: f.path,
+                                source: { type: 'url', url },
+                              });
+                            }
+                          }}
+                        >
+                          <FileBadge $kind={f.lang || 'code'}>{f.lang || 'code'}</FileBadge>
+                          <FilePath>files/{f.path}</FilePath>
+                        </FileRow>
+                      );
+                    })}
+                    {artifacts.deployUrl && (
+                      <FileRow>
+                        <FileBadge $kind="url">url</FileBadge>
+                        <FilePath>
+                          <a href={artifacts.deployUrl} target="_blank" rel="noopener noreferrer" style={{ color: '#5fafff' }}>
+                            {artifacts.deployUrl}
+                          </a>
+                        </FilePath>
+                      </FileRow>
+                    )}
+                  </FileList>
+                </Section>
+              )}
+
               {llmResult && llmResult.text && (
                 <Section>
-                  <SectionLabel>LLM 응답</SectionLabel>
+                  <SectionLabel>
+                    LLM 응답
+                    {llmResult.text.length > LLM_PREVIEW_LIMIT && (
+                      <SectionCount style={{ marginLeft: 8 }}>
+                        {llmResult.text.length.toLocaleString()} chars
+                      </SectionCount>
+                    )}
+                  </SectionLabel>
                   <LlmOutput $ok={llmResult.ok}>
                     <OutputHeader>
                       <OutputStatusDot $ok={llmResult.ok} />
@@ -575,7 +894,16 @@ export default function SubTaskDetailDrawer({ subTaskId, onClose }: Props) {
                         {llmResult.ok ? 'success' : 'failed'} · {detail.model || 'default'}
                       </span>
                     </OutputHeader>
-                    <ReactMarkdown>{llmResult.text}</ReactMarkdown>
+                    <ReactMarkdown>
+                      {llmExpanded || llmResult.text.length <= LLM_PREVIEW_LIMIT
+                        ? llmResult.text
+                        : llmResult.text.slice(0, LLM_PREVIEW_LIMIT) + '…'}
+                    </ReactMarkdown>
+                    {llmResult.text.length > LLM_PREVIEW_LIMIT && (
+                      <ShowMoreButton onClick={() => setLlmExpanded(!llmExpanded)}>
+                        {llmExpanded ? '접기' : `더 보기 (+${(llmResult.text.length - LLM_PREVIEW_LIMIT).toLocaleString()} chars)`}
+                      </ShowMoreButton>
+                    )}
                   </LlmOutput>
                 </Section>
               )}
@@ -589,46 +917,79 @@ export default function SubTaskDetailDrawer({ subTaskId, onClose }: Props) {
 
               {detail.childrenList.length > 0 && (
                 <Section>
-                  <SectionLabel>
-                    하위 노드 ({detail.childrenList.length})
-                  </SectionLabel>
-                  <ChildList>
-                    {detail.childrenList.map((c) => (
-                      <ChildCard key={c.id}>
-                        <RoleBadge $role={c.role}>{c.role}</RoleBadge>
-                        <ChildTitle>{c.title}</ChildTitle>
-                        <StateBadge $state={c.state}>{c.state}</StateBadge>
-                        <span style={{ fontSize: 10, opacity: 0.6 }}>
-                          {duration(c.startedAt, c.completedAt)}
-                        </span>
-                      </ChildCard>
-                    ))}
-                  </ChildList>
+                  <CollapsibleHeader onClick={() => setChildrenExpanded(!childrenExpanded)}>
+                    <ChevronIcon $open={childrenExpanded}>▶</ChevronIcon>
+                    하위 노드
+                    <SectionCount>{detail.childrenList.length}</SectionCount>
+                  </CollapsibleHeader>
+                  {childrenExpanded && (
+                    <ChildList>
+                      {detail.childrenList.map((c) => (
+                        <ChildCard key={c.id}>
+                          <RoleBadge $role={c.role}>{c.role}</RoleBadge>
+                          <ChildTitle>{c.title}</ChildTitle>
+                          <StateBadge $state={c.state}>{c.state}</StateBadge>
+                          <span style={{ fontSize: 10, opacity: 0.6 }}>
+                            {duration(c.startedAt, c.completedAt)}
+                          </span>
+                        </ChildCard>
+                      ))}
+                    </ChildList>
+                  )}
                 </Section>
               )}
 
               <Section>
-                <SectionLabel>이벤트 ({detail.events.length})</SectionLabel>
-                <Events>
-                  {detail.events.map((ev) => (
-                    <EventRow key={ev.id}>
-                      <EventType $type={ev.eventType}>{ev.eventType}</EventType>
-                      <EventTime>
-                        {new Date(ev.timestamp).toLocaleTimeString('ko-KR')}
-                      </EventTime>
-                      <EventPayload>
-                        {typeof ev.payload === 'string'
-                          ? ev.payload
-                          : JSON.stringify(ev.payload)}
-                      </EventPayload>
-                    </EventRow>
-                  ))}
-                </Events>
+                <CollapsibleHeader onClick={() => setEventsExpanded(!eventsExpanded)}>
+                  <ChevronIcon $open={eventsExpanded}>▶</ChevronIcon>
+                  이벤트
+                  <SectionCount>{detail.events.length}</SectionCount>
+                </CollapsibleHeader>
+                {eventsExpanded && (
+                  <>
+                    <ChipRow>
+                      <Chip
+                        $active={eventFilter === 'milestones'}
+                        onClick={() => setEventFilter('milestones')}
+                      >
+                        milestones ({detail.events.filter((e) => MILESTONE_EVENT_TYPES.has(e.eventType)).length})
+                      </Chip>
+                      <Chip
+                        $active={eventFilter === 'all'}
+                        onClick={() => setEventFilter('all')}
+                      >
+                        all ({detail.events.length})
+                      </Chip>
+                    </ChipRow>
+                    <Events>
+                      {filteredEvents.map((ev) => (
+                        <EventRow key={ev.id}>
+                          <EventType $type={ev.eventType}>{ev.eventType}</EventType>
+                          <EventTime>
+                            {new Date(ev.timestamp).toLocaleTimeString('ko-KR')}
+                          </EventTime>
+                          <EventPayload>
+                            {typeof ev.payload === 'string'
+                              ? ev.payload
+                              : JSON.stringify(ev.payload)}
+                          </EventPayload>
+                        </EventRow>
+                      ))}
+                    </Events>
+                  </>
+                )}
               </Section>
             </Body>
           </>
         )}
       </Drawer>
+      {fileViewer && (
+        <FileViewerModal
+          path={fileViewer.path}
+          source={fileViewer.source}
+          onClose={() => setFileViewer(null)}
+        />
+      )}
     </Backdrop>
   );
 }

frontend/components/rails/TransitionsTimeline.tsx

@@ -0,0 +1,360 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { API_URL } from '@/lib/config';
+
+interface Transition {
+  id: number;
+  pipelineId: string;
+  fromState: string;
+  toState: string;
+  eventType: string;
+  timestamp: string;
+}
+
+interface Props {
+  pipelineId: string | null;
+}
+
+const Wrapper = styled.section`
+  background: var(--bg-input);
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  padding: 20px 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+`;
+
+const Title = styled.h3`
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+  margin: 0;
+`;
+
+const Stats = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+const Stat = styled.span<{ $variant?: 'replan' | 'review' | 'normal' }>`
+  font-size: 10px;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 3px 10px;
+  border-radius: 10px;
+  background: ${({ $variant }) => {
+    switch ($variant) {
+      case 'replan':
+        return 'rgba(239, 68, 68, 0.18)';
+      case 'review':
+        return 'rgba(245, 158, 11, 0.18)';
+      default:
+        return 'var(--bg-main)';
+    }
+  }};
+  color: ${({ $variant }) => {
+    switch ($variant) {
+      case 'replan':
+        return '#fca5a5';
+      case 'review':
+        return '#fcd34d';
+      default:
+        return 'var(--text-primary)';
+    }
+  }};
+  border: 1px solid
+    ${({ $variant }) => {
+      switch ($variant) {
+        case 'replan':
+          return 'rgba(239, 68, 68, 0.5)';
+        case 'review':
+          return 'rgba(245, 158, 11, 0.5)';
+        default:
+          return 'var(--border-color)';
+      }
+    }};
+`;
+
+const Track = styled.ol`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 8px;
+    top: 8px;
+    bottom: 8px;
+    width: 1px;
+    background: var(--border-color);
+  }
+`;
+
+const Row = styled.li<{ $variant?: 'replan' | 'normal' | 'escalation' }>`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  position: relative;
+  padding-left: 24px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: ${({ $variant }) => {
+      switch ($variant) {
+        case 'replan':
+          return '#ef4444';
+        case 'escalation':
+          return '#f59e0b';
+        default:
+          return '#5fafff';
+      }
+    }};
+    box-shadow: 0 0 0 2px var(--bg-input);
+  }
+`;
+
+const Time = styled.span`
+  color: var(--text-secondary);
+  white-space: nowrap;
+  flex-shrink: 0;
+  width: 64px;
+`;
+
+const Arrow = styled.span<{ $variant?: 'replan' | 'normal' | 'escalation' }>`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  color: ${({ $variant }) => {
+    switch ($variant) {
+      case 'replan':
+        return '#fca5a5';
+      case 'escalation':
+        return '#fcd34d';
+      default:
+        return 'var(--text-primary)';
+    }
+  }};
+`;
+
+const StateBadge = styled.span<{ $state: string }>`
+  padding: 1px 7px;
+  border-radius: 8px;
+  background: ${({ $state }) => stateColor($state)};
+  color: #fff;
+  font-size: 9px;
+  text-transform: uppercase;
+  font-weight: 700;
+`;
+
+const ReplanMarker = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+  padding: 1px 7px;
+  border-radius: 8px;
+  background: rgba(239, 68, 68, 0.18);
+  color: #fca5a5;
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  border: 1px solid rgba(239, 68, 68, 0.5);
+`;
+
+const Empty = styled.div`
+  padding: 18px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+`;
+
+function stateColor(state: string): string {
+  switch (state) {
+    case 'idle':
+      return '#6b7280';
+    case 'planning':
+      return '#8b5cf6';
+    case 'implementing':
+      return '#3b82f6';
+    case 'reviewing':
+      return '#f59e0b';
+    case 'deploying':
+      return '#0ea5e9';
+    case 'done':
+      return '#22c55e';
+    case 'escalated':
+    case 'failed':
+    case 'aborted':
+      return '#ef4444';
+    case 'retrying':
+      return '#a855f7';
+    default:
+      return '#525252';
+  }
+}
+
+function shortTime(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString('ko-KR', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function classifyTransition(
+  t: Transition,
+): 'replan' | 'normal' | 'escalation' {
+  if (t.fromState === 'reviewing' && t.toState === 'planning') return 'replan';
+  if (t.toState === 'escalated') return 'escalation';
+  return 'normal';
+}
+
+export default function TransitionsTimeline({ pipelineId }: Props) {
+  const [transitions, setTransitions] = useState<Transition[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!pipelineId) {
+      setTransitions([]);
+      return;
+    }
+    let cancelled = false;
+    const load = async () => {
+      setLoading(true);
+      try {
+        const res = await fetch(
+          `${API_URL}/api/rails/transitions?pipelineId=${pipelineId}&limit=200`,
+          { credentials: 'include' },
+        );
+        if (!res.ok) {
+          if (!cancelled) setLoading(false);
+          return;
+        }
+        const data = (await res.json()) as { transitions?: Transition[] };
+        if (!cancelled) {
+          // API returns DESC by timestamp — reverse to chronological
+          const rows = (data.transitions ?? []).slice().reverse();
+          setTransitions(rows);
+          setLoading(false);
+        }
+      } catch {
+        if (!cancelled) setLoading(false);
+      }
+    };
+    void load();
+    const t = setInterval(load, 4000);
+    return () => {
+      cancelled = true;
+      clearInterval(t);
+    };
+  }, [pipelineId]);
+
+  const stats = useMemo(() => {
+    const replans = transitions.filter(
+      (t) => t.fromState === 'reviewing' && t.toState === 'planning',
+    ).length;
+    const reviewLoops = transitions.filter(
+      (t) => t.fromState === 'reviewing' && t.toState === 'implementing',
+    ).length;
+    const escalations = transitions.filter(
+      (t) => t.toState === 'escalated',
+    ).length;
+    return { replans, reviewLoops, escalations, total: transitions.length };
+  }, [transitions]);
+
+  if (!pipelineId) {
+    return (
+      <Wrapper>
+        <Header>
+          <Title>전이 타임라인</Title>
+        </Header>
+        <Empty>파이프라인을 선택해</Empty>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper>
+      <Header>
+        <Title>전이 타임라인</Title>
+        <Stats>
+          <Stat>전이 {stats.total}</Stat>
+          {stats.reviewLoops > 0 && (
+            <Stat $variant="review">review loop ×{stats.reviewLoops}</Stat>
+          )}
+          {stats.replans > 0 && (
+            <Stat $variant="replan">↑ 재기획 ×{stats.replans}</Stat>
+          )}
+          {stats.escalations > 0 && (
+            <Stat $variant="replan">🚨 escalated</Stat>
+          )}
+        </Stats>
+      </Header>
+      {loading && transitions.length === 0 ? (
+        <Empty>로딩 중...</Empty>
+      ) : transitions.length === 0 ? (
+        <Empty>아직 전이가 없어</Empty>
+      ) : (
+        <Track>
+          {transitions.map((t) => {
+            const variant = classifyTransition(t);
+            return (
+              <Row key={t.id} $variant={variant}>
+                <Time>{shortTime(t.timestamp)}</Time>
+                <Arrow $variant={variant}>
+                  <StateBadge $state={t.fromState}>{t.fromState}</StateBadge>
+                  →
+                  <StateBadge $state={t.toState}>{t.toState}</StateBadge>
+                  <span style={{ color: 'var(--text-secondary)' }}>
+                    [{t.eventType}]
+                  </span>
+                  {variant === 'replan' && <ReplanMarker>↑ 재기획</ReplanMarker>}
+                  {variant === 'escalation' && (
+                    <ReplanMarker>🚨 escalated</ReplanMarker>
+                  )}
+                </Arrow>
+              </Row>
+            );
+          })}
+        </Track>
+      )}
+    </Wrapper>
+  );
+}

frontend/lib/control/mock-events.ts

@@ -0,0 +1,146 @@
+import type { LiveWorkboardState, WorkflowEvent } from './types';
+
+export const mockLiveWorkboard: LiveWorkboardState = {
+  source: 'mock',
+  workflow: {
+    id: 'wf-hanarang-live-workboard-v0',
+    title: '하나랑 Live Workboard v0',
+    phase: 'building',
+    summary: '4자매가 작업하는 과정을 메인 화면에서 실시간으로 보여주는 첫 버전',
+    planPath: '.plans/rebuild-from-scratch/PLAN.md',
+    updatedAt: '방금 전',
+    source: 'mock',
+  },
+  sisters: [
+    {
+      id: 'harang',
+      name: '하랑이',
+      role: 'Planner',
+      color: '#8bd3ff',
+      phase: 'planning',
+      status: 'waiting',
+      currentTask: 'PLAN.md 승인 범위 정리 완료',
+      lastEvent: '나랑이에게 v0 구현 handoff 전달',
+      nextHandoff: '구현 중 scope 변경 생기면 플랜 보강',
+      progress: 100,
+      mode: 'role-skill',
+    },
+    {
+      id: 'narang',
+      name: '나랑이',
+      role: 'Builder',
+      color: '#ffcc66',
+      phase: 'building',
+      status: 'working',
+      currentTask: 'Live Workboard mock UI 구현',
+      lastEvent: 'Sister activity lane 컴포넌트 생성',
+      nextHandoff: 'lint/build 결과를 다랑이에게 전달',
+      progress: 58,
+      mode: 'role-skill',
+    },
+    {
+      id: 'darang',
+      name: '다랑이',
+      role: 'Reviewer',
+      color: '#c6a5ff',
+      phase: 'reviewing',
+      status: 'idle',
+      currentTask: '구현 완료 대기',
+      lastEvent: 'QA checklist 준비',
+      nextHandoff: 'spec compliance review 시작',
+      progress: 20,
+      mode: 'role-skill',
+    },
+    {
+      id: 'erang',
+      name: '이랑이',
+      role: 'Infra / Orchestrator',
+      color: '#ff8f70',
+      phase: 'waiting_approval',
+      status: 'thinking',
+      currentTask: '승인 게이트와 배포 위험 분리',
+      lastEvent: 'DB/배포 변경 없음 확인',
+      nextHandoff: '다랑이 PASS 후 자기야에게 배포 승인 요청',
+      progress: 42,
+      mode: 'main',
+    },
+  ],
+  approvals: [
+    {
+      id: 'approval-v0-local',
+      title: 'v0 로컬 UI 구현',
+      risk: 'L2',
+      status: 'not-required',
+    },
+    {
+      id: 'approval-deploy',
+      title: 'production 배포',
+      risk: 'L3',
+      status: 'waiting',
+    },
+    {
+      id: 'approval-proxmox-write',
+      title: 'Proxmox write API / restart action',
+      risk: 'L4',
+      status: 'blocked',
+    },
+  ],
+  events: [
+    {
+      id: 'evt-001',
+      at: '13:04',
+      sister: 'harang',
+      type: 'PLAN_CREATED',
+      title: '재구축 PLAN 작성',
+      detail: '메인 서비스를 4 Sisters Live Workboard로 재정의',
+      workflowId: 'wf-hanarang-live-workboard-v0',
+      source: 'mock',
+    },
+    {
+      id: 'evt-002',
+      at: '13:09',
+      sister: 'erang',
+      type: 'APPROVAL_NEEDED',
+      title: 'Gate A 승인 확인',
+      detail: '자기야가 “그거 먼저 만들어보자”로 v0 구현 승인',
+      workflowId: 'wf-hanarang-live-workboard-v0',
+      source: 'mock',
+    },
+    {
+      id: 'evt-003',
+      at: '13:12',
+      sister: 'narang',
+      type: 'BUILD_STARTED',
+      title: 'Frontend v0 구현 시작',
+      detail: 'mock event stream 기반 lane/timeline/focus UI 생성',
+      workflowId: 'wf-hanarang-live-workboard-v0',
+      source: 'mock',
+    },
+    {
+      id: 'evt-004',
+      at: '13:15',
+      sister: 'narang',
+      type: 'FILES_CHANGED',
+      title: 'Live Workboard 컴포넌트 추가',
+      detail: 'SisterActivityLane, WorkflowTimeline, ActiveTaskFocus',
+      workflowId: 'wf-hanarang-live-workboard-v0',
+      source: 'mock',
+    },
+    {
+      id: 'evt-005',
+      at: 'next',
+      sister: 'darang',
+      type: 'REVIEW_REQUESTED',
+      title: '다랑이 리뷰 예정',
+      detail: 'lint/build 결과 확인 후 spec compliance review',
+      workflowId: 'wf-hanarang-live-workboard-v0',
+      source: 'mock',
+    },
+  ],
+};
+
+export function rotateEvents(events: WorkflowEvent[], tick: number): WorkflowEvent[] {
+  if (events.length === 0) return events;
+  const offset = tick % events.length;
+  return [...events.slice(offset), ...events.slice(0, offset)];
+}

frontend/lib/control/types.ts

@@ -0,0 +1,75 @@
+export type SourceKind = 'live' | 'snapshot' | 'mock' | 'fallback';
+
+export type SisterId = 'harang' | 'narang' | 'darang' | 'erang';
+
+export type WorkflowPhase =
+  | 'planning'
+  | 'building'
+  | 'reviewing'
+  | 'waiting_approval'
+  | 'deploying'
+  | 'blocked'
+  | 'done';
+
+export type WorkflowEventType =
+  | 'PLAN_CREATED'
+  | 'HANDOFF_SENT'
+  | 'BUILD_STARTED'
+  | 'FILES_CHANGED'
+  | 'TEST_RUNNING'
+  | 'TEST_PASSED'
+  | 'REVIEW_REQUESTED'
+  | 'QA_BLOCKED'
+  | 'APPROVAL_NEEDED'
+  | 'INFRA_CHECKED'
+  | 'DEPLOY_READY';
+
+export type SisterLaneState = {
+  id: SisterId;
+  name: string;
+  role: string;
+  color: string;
+  phase: WorkflowPhase;
+  status: 'idle' | 'thinking' | 'working' | 'reviewing' | 'blocked' | 'waiting';
+  currentTask: string;
+  lastEvent: string;
+  nextHandoff: string;
+  progress: number;
+  mode: 'main' | 'role-skill' | 'gateway' | 'standby';
+};
+
+export type WorkflowEvent = {
+  id: string;
+  at: string;
+  sister: SisterId;
+  type: WorkflowEventType;
+  title: string;
+  detail: string;
+  workflowId: string;
+  source: SourceKind;
+};
+
+export type ActiveWorkflow = {
+  id: string;
+  title: string;
+  phase: WorkflowPhase;
+  summary: string;
+  planPath: string;
+  updatedAt: string;
+  source: SourceKind;
+};
+
+export type ApprovalItem = {
+  id: string;
+  title: string;
+  risk: 'L1' | 'L2' | 'L3' | 'L4';
+  status: 'waiting' | 'not-required' | 'blocked';
+};
+
+export type LiveWorkboardState = {
+  workflow: ActiveWorkflow;
+  sisters: SisterLaneState[];
+  events: WorkflowEvent[];
+  approvals: ApprovalItem[];
+  source: SourceKind;
+};

frontend/pnpm-lock.yaml

@@ -3066,7 +3066,7 @@ snapshots:
       eslint: 9.39.4
       eslint-import-resolver-node: 0.3.10
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.58.1(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4))(eslint@9.39.4)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.58.1(eslint@9.39.4)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.58.1(eslint@9.39.4)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.58.1(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4))(eslint@9.39.4))(eslint@9.39.4)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.4)
       eslint-plugin-react: 7.37.5(eslint@9.39.4)
       eslint-plugin-react-hooks: 7.0.1(eslint@9.39.4)
@@ -3099,7 +3099,7 @@ snapshots:
       tinyglobby: 0.2.16
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.58.1(eslint@9.39.4)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.58.1(eslint@9.39.4)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.58.1(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4))(eslint@9.39.4))(eslint@9.39.4)
     transitivePeerDependencies:
       - supports-color
 
@@ -3114,7 +3114,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.58.1(eslint@9.39.4)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.4):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.58.1(eslint@9.39.4)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.58.1(eslint@9.39.4)(typescript@5.9.3))(eslint@9.39.4))(eslint@9.39.4))(eslint@9.39.4):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9