feat(rails): integrate hanarang-rails orchestrator into dashboard

Backend: - src/rails/rails.service.ts — HTTP client for rails API (read-only) - src/rails/rails.controller.ts — REST under /api/rails/* (JwtGuard 보호) GET /pipelines, /pipelines/:id, /pipelines/:id/sub-tasks, /health POST /pipelines/start, /pipelines/:id/abort - src/rails/rails.scheduler.ts — 2초마다 rails poll → EventEmitter2 broadcast - src/rails/rails.module.ts — module + DI - events.gateway.ts — rails.* 이벤트 핸들러 3종 (Socket.IO 'rails:*') - app.module.ts — RailsModule 등록 Frontend: - lib/useRailsSocket.ts — Socket.IO 훅 (rails:pipelines / pipeline:updated / subtasks) - components/rails/PipelineList.tsx — 좌측 파이프라인 카드 목록 - components/rails/SubTaskTree.tsx — 우측 계층 트리 뷰 role 별 색상 (manager/principal/lead/junior) state 별 dot + running pulse 애니메이션 duration / model 표시 - app/rails/page.tsx — 라이브 대시보드 페이지 좌: 파이프라인 목록 + Start 폼 우: 선택된 파이프라인의 sub-task 트리 - components/common/Sidebar.tsx — '레일' 메뉴 추가 기존 hanarang-dashboard 의 UX/테마 그대로 재사용 (CSS variables). 인증은 기존 JwtGuard 그대로 적용. 검증: backend nest build ✓ | frontend next build ✓ (turbopack) 다음: Dev 서버에 배포 + 첫 라이브 파이프라인 구동 확인. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-10 17:30:11 +09:00
30 changed files with 14292 additions and 1877 deletions
--- a/.claude/sessions/.last_inbox_check
+++ b/.claude/sessions/.last_inbox_check
@@ -0,0 +1 @@
 1775809670
--- a/.plans/OVERVIEW.md
+++ b/.plans/OVERVIEW.md
@@ -1,62 +1,70 @@
 # 하나랑 대시보드 — 실행 개요
 ## 프로젝트 목표
- 4자매 운영 상태를 실제 source-of-truth 기준으로 보여준다
+- 4자매 운영 상태를 실시간으로 보여준다
- 프로젝트, Sprint, Hotfix, QA, Deploy 흐름을 한 운영 정보 구조로 연결한다
+- 프로젝트/Sprint/Hotfix/QA/Deploy 흐름을 시각화한다
- `main`이 항상 배포 가능 상태라는 원칙을 UI와 운영 문서에 같이 반영한다
+- `main`이 항상 배포 가능 상태라는 원칙을 UI와 운영에 함께 반영한다
- `/office`, `/`, `/projects/[id]`, `/org`가 서로 다른 역할을 가지되 같은 상태 계약을 공유하게 만든다
+- 오피스 화면과 운영 패널이 분리되지 않고 하나의 관제 경험으로 이어지게 만든다
 ## 저장소 / Git 기준
 - Repo: `hanarang-dashboard`
 - Git URL: `https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard`
 - 기본 브랜치: `main`
- 현재 구현 기준 경로:
+- 현재 오피스 구현 기준 경로:
  - `frontend/app/office/page.tsx`
-  - `frontend/app/page.tsx`
+  - `frontend/components/office/OfficeScene.tsx`
-  - `frontend/app/projects/[id]/page.tsx`
+  - `frontend/components/office/ContextPanel.tsx`
-  - `frontend/app/org/page.tsx`
+  - `frontend/components/office/ChatWorkspace.tsx`
-  - `backend/src/sisters/sisters.service.ts`
+  - `frontend/components/office/PipelinePanel.tsx`
-  - `backend/src/sisters/sister-detail.service.ts`
+  - `frontend/components/office/ServerHealthPanel.tsx`
-  - `backend/src/dashboard/dashboard.service.ts`
+
 ## 현재 표준 구조
 - 루트: `README.md`, `ARCHITECTURE.md`
 - 실행 문서: `.plans/`
  - `design/`
  - `sprints/`
  - `hotfix/`
  - `qa/`
  - `deploy/`
 - 장기 문서: `docs/`
 ## 현재 상태
 - **SPRINT-016**: `/office` 기본 화면과 핵심 컴포넌트가 `main`에 반영됨
- **SPRINT-017**: `/office` 모바일 IA와 direct chat 중심 재배치 범위를 문서로 잠금
+- **다음 활성 작업**: **SPRINT-017** `/office` 모바일 화면 전면 개편
 - **HOTFIX-006**: 메인 대시보드 문구 절제와 source/freshness 정합성 보정 범위를 잠금
 - **다음 활성 작업**: **SPRINT-018** 대시보드 truth redesign
-## SPRINT-018 active scope
+## SPRINT-017 active scope
-이번 Sprint는 단순 모바일 정리가 아니라, `/office`, `/`, `/projects/[id]`, `/org`를 **같은 운영 사실 계약**으로 다시 잠그는 작업이야.
+이번 Sprint는 안정화 전반이 아니라 **`/office` 모바일 정보 구조 재설계**에만 집중해.
 ### 이번에 반드시 해결할 것
-1. 페이지 역할을 고정한다.
+1. `360px`, `390px` 첫 viewport에서 아래 4가지를 한 번에 읽히게 만든다.
-   - `/office`: live operations workspace
+   - 4자매 상태
-   - `/`: executive snapshot
+   - current focus
-   - `/projects/[id]`: delivery detail
+   - health summary
-   - `/org`: company org map
+   - quick actions
-2. 공통 용어를 고정한다.
+2. `mobile(<768)`에서는 데스크톱 씬 축소판을 금지하고, 모바일 전용 세로 흐름 IA로 바꾼다.
-   - `connection`, `activity`, `working`, `owner`, `participant`, `assignee`, `freshness`, `source`
+3. `PipelinePanel`과 `ServerHealthPanel`을 가로 스크롤 없이 읽히는 카드 흐름으로 바꾼다.
-3. `working`, `owner`, `participant`를 추정치와 확정치를 섞지 않게 다시 정의한다.
+4. `ChatWorkspace`를 모바일 direct chat 기준으로 다시 정리하고, `JWT 없음 / empty / error / runtime 확인 중` 상태를 즉시 읽히게 만든다.
-4. `fallback`, `snapshot`, `live`가 같은 사실처럼 보이지 않게 규칙을 문서화한다.
+5. `live / snapshot / fallback` 의미는 유지하되, 모바일에서 더 짧고 일관된 라벨로 통일한다.
 5. `360px`, `390px` 기준으로 긴 문장, 긴 badge, 카드 overflow, horizontal scroll을 금지한다.
 6. `/office`는 기존 office group mental model 장점을 살리되, 4개 긴 박스 분해형이 아니라 group/scene/context 중심으로 재배치한다.
 7. `/projects/[id]`의 `ASSIGNED NODES`를 truthful participant model로 교체한다.
 8. `/org`는 자매 트리 데모가 아니라 실제 회사형 조직도 + independent agents 구조로 재설계한다.
 ### 이번에 하지 않을 것
- ACP harness 자체 구조 변경
+- 새로운 백엔드 API 추가
 - WebSocket 프로토콜 재설계
 - 별도 모바일 앱 설계
- 실제 배포 자동화 플로우 재작성
+- 3D/고해상도 오피스 씬 확장
- 조직도용 신규 비주얼 엔진 도입
+- 데스크톱 전체 IA 재작성
-## truth redesign 원칙
+## 현재 main 구현에서 확인된 모바일 문제
- `360px`, `390px`에서 카드와 badge는 줄바꿈되어야 하고 horizontal scroll이 없어야 한다
+- `frontend/components/office/OfficeScene.tsx`
- websocket 연결 여부와 데이터 최신성은 같은 뜻으로 쓰지 않는다
+  - `aspect-ratio: 800 / 460` 고정 씬이라 모바일에서 데스크톱 축소판처럼 보임
- `working`은 단순 `thinking/tool_calling/speaking + gatewayConnected`의 프론트 추정치로 고정하지 않는다
+- `frontend/app/office/page.tsx`
- `owner`, `participant`, `assignee`는 같은 사람 목록으로 재사용하지 않는다
+  - 모바일 전용 summary hero가 없고, `ChatArea`가 `460px` 고정 높이에 의존함
- fallback seed는 확정 owner, working, participant를 주입하지 않는다
+  - 선택 전에는 `ContextPanel`과 chat이 핵심 정보 대신 빈 상태에 가까움
- null/empty 상태도 사실대로 보여준다
+- `frontend/components/office/ContextPanel.tsx`
  - 선택 의존 구조라 첫 진입 시 상세 정보가 비어 있음
 - `frontend/components/office/PipelinePanel.tsx`
  - `overflow-x: auto` 기반이라 모바일에서 가로 스크롤 전제가 생김
 - `frontend/components/office/ChatWorkspace.tsx`
  - 모바일에서 direct chat 맥락이 탭, 타임라인, composer, 상태 패널로 분산되고 보조 정보가 숨겨짐
 ## breakpoint 기준
 - **Mobile compact:** `360px`
@@ -64,23 +72,26 @@
 - **Tablet:** `768px`
 - **Desktop:** `1280px+`
 ## 이행 전략
 - 문서는 실제 `main` 구현 경로를 근거로만 갱신한다
 - SPRINT-017은 `mobile-first IA`와 `상태 라벨 통일`까지만 잠근다
 - 구현 작업은 `frontend/app/office/page.tsx`와 `frontend/components/office/*` 범위 안에서 끝내는 걸 기본으로 한다
 - QA는 `360 / 390 / 768 / 1280+` 실브라우저 확인을 기준으로 남긴다
 ## 문서 맵
 - 구조 기준: `../ARCHITECTURE.md`
 - 제품 PRD: `../docs/product-specs/openclaw-office-dashboard-prd.md`
- Sprint 017: `./sprints/SPRINT-017.md`
+- 디자인 인덱스: `./design/index.md`
- Sprint 018: `./sprints/SPRINT-018.md`
+- Sprint 016 비전: `./sprints/SPRINT-016.md`
- HOTFIX-006: `./hotfix/HOTFIX-006.md`
+- Sprint 017 실행 계획: `./sprints/SPRINT-017.md`
- API / truth contract: `./design/api-design.md`
+- 오피스 모바일 IA: `./design/ui/office-dashboard-design.md`
- `/office` UI: `./design/ui/office-dashboard-design.md`
+- 오피스 direct chat 모바일 기준: `./design/ui/office-chat-design.md`
- `/office` chat 기준: `./design/ui/office-chat-design.md`
+- API / 실시간 모델 참고: `./design/api-design.md`
- `/` UI: `./design/ui/dashboard-design.md`
+- 배포 플로우: `./deploy/main-release-flow.md`
 - `/projects/[id]` UI: `./design/ui/project-detail-design.md`
 - `/org` UI: `./design/ui/org-design.md`
 - QA draft: `./qa/SPRINT-018-review-1.md`
 ## 교차 참조 규칙
- Sprint 문서는 관련 design, QA, hotfix 문서를 반드시 링크한다
+- Sprint 문서는 관련 design 문서를 반드시 링크한다
- design 문서는 실제 구현 파일 경로와 breakpoint를 함께 적는다
+- design 문서는 실제 Git 구현 경로와 breakpoint를 같이 적는다
- API, UI, QA 문서에서 `working / owner / participant / source / freshness` 의미를 동일하게 쓴다
+- QA 문서는 `360 / 390 / 768 / 1280+` 결과를 나눠 기록한다
- `live / mirrored event / snapshot / doc-derived / fallback` source 라벨은 페이지 간 동일하게 쓴다
+- `live / snapshot / fallback` 용어는 Sprint 문서와 UI 문서에서 동일하게 쓴다
- 여기까지가 SPRINT-018 기준 scope야.
+- 여기까지가 SPRINT-017 기준 scope야.
--- a/.plans/design/api-design.md
+++ b/.plans/design/api-design.md
@@ -1,280 +1,178 @@
-# API 설계 — SPRINT-018 truth contract
+# API 설계
 ## 목적
 SPRINT-018 기준 API 문서는 `/office`, `/`, `/projects/[id]`, `/org`가 같은 운영 사실 계약을 공유하도록 잠그는 문서야. 기존 SPRINT-017의 `REST snapshot + WebSocket push` 모델은 유지하지만, 이번에는 `connection`, `activity`, `working`, `freshness`, `source`를 분리해서 정의한다.
 ## 참고 문서
 - 실행 개요: `../OVERVIEW.md`
 - Sprint: `../sprints/SPRINT-018.md`
 - HOTFIX-006: `../hotfix/HOTFIX-006.md`
 - UI 문서:
  - `./ui/office-dashboard-design.md`
  - `./ui/dashboard-design.md`
  - `./ui/project-detail-design.md`
  - `./ui/org-design.md`
 ## 공통 규칙
 - Base URL: `https://hanarang-api.nabomhalang.co.kr`
 - 응답 형식: JSON
 - WS Namespace: `/ws`
 - 기본 에러 형식: `{ "statusCode": 400, "message": "...", "error": "Bad Request" }`
- 읽기 API와 쓰기 API 권한은 분리해서 다룬다
+- SPRINT-017 기준으로 오피스 화면은 `REST snapshot + WebSocket push` 혼합 모델을 사용한다.
-## source taxonomy
+## 인증 규칙
-| source | 의미 | UI 규칙 |
+- 읽기 전용 상태 조회 API는 현재 공개 조회가 가능한 엔드포인트가 섞여 있어.
 - direct chat (`POST /api/sisters/:name/chat`) 은 JWT 필수야.
 - WebSocket 연결도 JWT 필수야. 토큰이 없거나 잘못되면 서버가 연결을 끊어.
 - 그래서 `/office`는 **읽기와 쓰기의 권한 상태를 분리해서** 다뤄야 해.
 ## 오피스 대시보드 핵심 소스
 - Git 구현 기준:
  - `frontend/app/office/page.tsx`
  - `backend/src/sisters/sisters.controller.ts`
  - `backend/src/events/events.gateway.ts`
  - `backend/src/events/events.scheduler.ts`
 - 관련 Sprint: `../sprints/SPRINT-017.md`
 - 관련 UI 문서:
  - `./ui/office-dashboard-design.md`
  - `./ui/office-chat-design.md`
 ## 상태 모델
 ### Data Mode
 | mode | 의미 | UI 원칙 |
 |---|---|---|
-| `live` | runtime 또는 websocket 기준 최신 상태 | 가장 강한 source |
+| `live` | WebSocket 또는 최신 runtime 기준으로 실시간성이 유지되는 상태 | 가장 신뢰도 높은 상태로 표시 |
-| `mirrored_event` | event stream을 dashboard용으로 미러링한 상태 | live처럼 과장하지 않음 |
+| `snapshot` | REST polling 기준 최신 스냅샷 | live보다 약한 상태로 표시 |
-| `snapshot` | polling / REST 스냅샷 | 최신 시각과 같이 표시 |
+| `fallback` | runtime 또는 status 조회 실패 시 보여주는 보정 데이터 | 추정치임을 숨기지 않음 |
 | `doc_derived` | QA/HOTFIX/문서에서 파생한 값 | 운영 기록으로 표시 |
 | `fallback` | 원본 없음, seed/default/보정 데이터 | 추정치임을 숨기지 않음 |
-## 용어 계약
+### Agent State
-| 필드 | 의미 | 비고 |
+| state | 의미 |
-|---|---|---|
+|---|---|
-| `connection` | 연결 상태 | socket/gateway/runtime 가능 여부 |
+| `idle` | 대기 중 |
-| `activity` | 최근 활동 상태 | event/session/task evidence |
+| `thinking` | 작업 준비 / 추론 중 |
-| `working` | 명시적 운영 상태 | 추정치와 확정치를 분리 |
+| `tool_calling` | 외부 작업/도구 호출 중 |
-| `freshness` | 생성/동기화 시각 | source와 별도 필드 |
+| `speaking` | 응답 생성 또는 대화 중 |
-| `source` | 값의 출처 | field-level 또는 section-level |
+| `error` | 연결 또는 런타임 이상 |
-## 공통 view-model 규칙
+## Sisters (오피스 화면 기준)
 ### 1. 연결과 활동을 분리한다
 - `connection.connected=true`여도 `activity.state='idle'`일 수 있다
 - `connection.connected=false`여도 마지막 `snapshot`은 남아 있을 수 있다
-### 2. `working`은 별도 필드다
+| Method | Endpoint | 인증 | 설명 |
-`working`은 단순히 `thinking/tool_calling/speaking + gatewayConnected` 조합으로 확정하지 않는다.
+|--------|----------|------|------|
 | GET | `/api/sisters` | 없음 | 4자매 상태 목록 |
 | GET | `/api/sisters/runtime` | 없음 | 4자매 runtime 스냅샷 |
 | GET | `/api/sisters/:name/runtime` | 없음 | 개별 자매 runtime |
 | GET | `/api/sisters/:name/system` | 없음 | 개별 자매 시스템 정보 |
 | GET | `/api/sisters/:name/avatar` | 없음 | 자매 아바타 이미지 |
 | GET | `/api/sisters/:name/config` | 없음 | openclaw 설정 조회 |
 | GET | `/api/sisters/:name/sessions` | 없음 | 최근 세션 목록 |
 | GET | `/api/sisters/:name/subagents` | 없음 | 서브에이전트 목록/현황 |
 | GET | `/api/sisters/:name/activity` | 없음 | 최근 활동 로그 |
 | POST | `/api/sisters/:name/chat` | JWT 필요 | direct chat 전송 |
-권장 형태:
+### GET `/api/sisters/runtime`
-```json
+오피스 메인 화면의 상단 상태와 최근 메시지, 서브에이전트 상태를 구성하는 runtime source야.
 {
  "working": {
    "state": "active",
    "confidence": "confirmed",
    "reason": "active_session",
    "label": "PR review in progress"
  }
 }
 ```
-### 3. fallback은 확정 owner/participant를 주입하지 않는다
+예시 필드:
 - fallback은 `owner: null`, `participants: []`를 허용한다
 - UI는 empty 상태를 그대로 렌더링해야 한다
 ### 4. freshness는 최소 2종 이상 준다
 - `generatedAt`
 - `lastActiveAt` 또는 `latestEventAt`
 - 필요 시 `lastSnapshotAt`, `lastDocAt`
 ## Sisters / Office contract
 ### GET `/api/sisters`
 `/office`와 `/`가 함께 쓰는 snapshot source다.
 권장 응답 shape:
 ```json
 [
  {
    "name": "harang",
-    "role": "Orchestrator",
+    "gatewayConnected": true,
-    "connection": {
+    "mainState": "thinking",
-      "gateway": "connected",
+    "currentTask": "SPRINT-017 scope 잠금",
-      "runtime": "connected"
+    "activeSessionLabel": "main",
-    },
+    "activeSessionUpdatedAt": 1775640000000,
-    "activity": {
+    "controlSessionKey": "agent:harang:main",
-      "state": "idle",
+    "recentMessages": [
-      "label": "No recent operator event",
+      {
-      "lastActiveAt": "2026-04-09T01:20:00.000Z"
+        "id": "msg_1",
-    },
+        "role": "assistant",
-    "working": {
+        "content": "scope 정리 중",
-      "state": "idle",
+        "ts": "2026-04-08T09:20:00Z"
      "confidence": "confirmed",
      "reason": null,
      "label": null
    },
    "source": "snapshot",
    "freshness": {
      "lastSnapshotAt": "2026-04-09T01:20:10.000Z"
      }
    ],
    "subagents": [
      {
        "name": "prd-writer",
        "state": "tool_calling",
        "updatedAt": 1775640000000,
        "currentTask": "SPRINT-017 작성",
        "sessionLabel": "main"
      }
    ]
  }
 ]
 ```
-### GET `/api/sisters/runtime`
+### POST `/api/sisters/:name/chat`
 runtime 세부 source다.
 최소 필드:
 - `gatewayConnected`
 - `mainState`
 - `currentTask`
 - `activeSessionLabel`
 - `activeSessionUpdatedAt`
 - `recentMessages`
 - `subagents`
 - `source`
 - `freshness`
 ### sister state mapping 규칙
 | UI 상태 | API 판단 기준 |
 |---|---|
 | `connected idle` | `connection.connected=true` + `working.state='idle'` |
 | `active working` | `working.state='active'` + reason 존재 |
 | `snapshot only` | `source='snapshot'` + live connection 없음 |
 | `fallback only` | `source='fallback'` |
 | `offline` | `connection.runtime='disconnected'` + snapshot도 stale |
 ## Dashboard ops contract
 ### GET `/api/dashboard/ops`
 `/`와 `/office` 상단 summary가 같이 보는 executive contract다.
 최소 필드:
 ```json
 // Request
 { "message": "SPRINT-017 scope 확인해" }
 ```
 ```json
 // Response 200 example
 {
-  "focusProject": {
+  "ok": true,
-    "name": "hanarang-dashboard",
+  "queued": true,
-    "phase": "IMPLEMENT",
+  "sessionKey": "agent:harang:main"
    "progress": 62,
    "deployStatus": "READY FOR DEPLOY",
    "owner": {
      "name": null,
      "source": "snapshot",
      "whyVisible": null
    }
  },
  "pipeline": {
    "activeTask": "SPRINT-018",
    "focus": "dashboard truth redesign",
    "nodes": [],
    "source": "mirrored_event",
    "freshness": {
      "generatedAt": "2026-04-09T01:20:10.000Z",
      "latestEventAt": "2026-04-09T01:18:00.000Z"
    }
  },
  "board": [],
  "freshness": {
    "generatedAt": "2026-04-09T01:20:10.000Z",
    "activityLatestAt": "2026-04-09T01:18:00.000Z",
    "sistersLatestAt": "2026-04-09T01:20:00.000Z",
    "qaDocLatestAt": "2026-04-09T00:55:00.000Z"
  }
 }
 ```
-### dashboard 계약 규칙
+### Chat 실패 처리 원칙
- `socket on/off`는 connection badge로만 쓴다
+- JWT 없음 → 입력창 비활성화 또는 전송 실패 이유 명시
- `freshness` badge는 별도로 보여준다
+- timeout → 전송은 재시도 가능 상태로 남김
- `owner`가 없으면 `null` 유지, fallback sister 고정 노출 금지
+- 최근 메시지 없음 → empty state 문구 사용
- `focus`가 recent activity 기반 추정이면 `source='mirrored_event'` 또는 `snapshot`으로 표기한다
+- tool 메시지와 assistant 메시지는 같은 bubble로 합치지 않음
-## Project detail contract
+## WebSocket
-### GET `/api/projects/:id`
+### 연결
-프로젝트 상세 응답은 participant와 assignee를 분리한다.
+- Namespace: `/ws`
 - 인증 방식:
  - `handshake.auth.token`
  - 또는 `Authorization: Bearer <token>`
 - 토큰 없음/검증 실패 시 disconnect
-권장 shape:
+### 서버 이벤트
-```json
+| Event | Payload | 설명 |
-{
+|---|---|---|
-  "id": 18,
+| `pong` | `{ ts }` | ping 응답 |
-  "name": "hanarang-dashboard",
+| `sisters:update` | `{ sisters, ts }` | 4자매 상태 push |
-  "phase": "QA",
+| `activity:new` | `{ item, ts }` | 새 활동 로그 push |
  "participantSummary": {
    "currentOwners": [],
    "participants": [
      {
        "name": "darang",
        "whyVisible": ["reviewer", "latest_qa_author"],
        "source": "snapshot",
        "freshness": { "lastActiveAt": "2026-04-09T01:10:00.000Z" }
      }
    ],
    "emptyState": "NO CONFIRMED ACTIVE PARTICIPANT"
  },
  "taskAssigneeAggregate": {
    "uniqueAssignees": ["narang", "darang"],
    "taskCountByAssignee": {
      "narang": 4,
      "darang": 1
    },
    "source": "snapshot"
  }
 }
 ```
-### project participant 규칙
+### 운영 규칙
- `participants`는 why-visible 없는 항목을 허용하지 않는다
+- WS는 가장 강한 source야.
- `currentOwners`와 `taskAssigneeAggregate`는 별도 섹션으로 쓴다
+- WS가 끊겨도 마지막 성공 시각을 보존해 stale 여부를 판단해야 해.
- 참여자 없음은 정상 상태다. `null`/empty를 숨기지 않는다
+- scheduler polling 값이 더 오래된 경우 live 값을 덮어쓰면 안 돼.
 - SPRINT-017에서는 reconnect / stale / snapshot downgrade 규칙을 문서와 QA 기준으로 잠근다.
-## Org contract
+## Projects (프로젝트)
-### GET `/api/org`
+| Method | Endpoint | 설명 |
-단순 sister tree 대신 회사형 데이터 구조를 준다.
+|--------|----------|------|
 | GET | `/api/projects` | 프로젝트 목록 (Gitea API 연동) |
 | GET | `/api/projects/:id` | 프로젝트 상세 + Sprint + Task |
 | GET | `/api/projects/:id/tasks` | Task Ledger |
 | GET | `/api/projects/:id/activity` | 활동 로그 |
-권장 shape:
+## Activity (활동 피드)
 ```json
 {
  "orgUnits": [
    {
      "id": "hq",
      "name": "하나랑 HQ",
      "kind": "hq",
      "lead": "harang",
      "memberIds": ["harang"]
    },
    {
      "id": "delivery",
      "name": "Delivery",
      "kind": "functional_team",
      "lead": "narang",
      "memberIds": ["narang", "darang"]
    }
  ],
  "members": [
    {
      "id": "harang",
      "type": "sister",
      "role": "Orchestrator",
      "status": { "connection": "connected", "working": "idle" },
      "source": "snapshot",
      "freshness": { "lastSnapshotAt": "2026-04-09T01:20:00.000Z" }
    }
  ],
  "reportingLines": [
    { "from": "hq", "to": "delivery", "kind": "manages" }
  ],
  "independentAgents": [
    {
      "id": "security-auditor",
      "name": "security-auditor",
      "ownerSister": null,
      "source": "snapshot"
    }
  ]
 }
 ```
-### org 계약 규칙
+| Method | Endpoint | 설명 |
- `independentAgents`와 `sisterOwnedAgents`를 구분한다
+|--------|----------|------|
- 특정 자매를 항상 root로 하드코딩하지 않는다
+| GET | `/api/activity` | 전체 최근 활동 피드 (limit, offset) |
 - org 화면에서도 `status / source / freshness` 필드를 재사용한다
-## 인증 규칙
+## Org (조직도)
 - 읽기 API는 현재 공개 조회와 관리자 조회가 섞여 있으므로 endpoint별로 명시한다
 - direct chat (`POST /api/sisters/:name/chat`) 은 JWT 필수
 - WebSocket 연결은 JWT 필수
 - JWT 없음 상태는 프론트에서 `send disabled reason`까지 표시해야 한다
-## QA 체크 포인트
+| Method | Endpoint | 설명 |
- `working`이 fallback seed에서 주입되지 않는지
+|--------|----------|------|
- `socket`과 `freshness`가 같은 label로 뭉치지 않는지
+| GET | `/api/org` | 조직도 데이터 (자매 + 서브에이전트 트리) |
 - `owner`, `participant`, `assignee`가 서로 다른 필드로 내려오는지
 - `/api/org`가 independent agents를 누락하지 않는지
 - `360px`, `390px` UI에서 긴 source 문구가 줄바꿈되는지
-## out-of-scope
+## Admin (관리자)
- 실제 DTO 구현 상세
+
- activity evidence 저장소 개선
+| Method | Endpoint | 설명 |
- org 편집 API
+|--------|----------|------|
 | GET | `/api/admin/harness/:sister/:file` | 하네스 파일 읽기 (AGENTS.md 등) |
 | PUT | `/api/admin/harness/:sister/:file` | 하네스 파일 수정 + SSOT push |
 | GET | `/api/admin/repos` | Gitea repo 목록 |
 | GET | `/api/admin/logs/:sister` | 세션 로그 |
 | GET | `/api/admin/costs` | 토큰 사용량/비용 |
 ## Health
 | Method | Endpoint | 설명 |
 |--------|----------|------|
 | GET | `/health` | 서버 상태 확인 |
 ## SPRINT-017 문서 기준 정리
 - 오피스 화면은 읽기 API와 쓰기 API 권한을 분리해서 다룬다
 - `live / snapshot / fallback`은 API 문서, UI 문서, QA 문서에서 같은 의미로 쓴다
 - direct chat, WS disconnect, stale 상태는 정상 흐름만큼 중요하게 검증한다
 - 여기까지가 API 기준 scope야.
--- a/.plans/design/ui/dashboard-design.md
+++ b/.plans/design/ui/dashboard-design.md
@@ -1,122 +1,239 @@
-# `/` UI 기준 — SPRINT-018 executive snapshot
+# 대시보드 메인 (`/`) — Sprint 015 Master Dashboard v3
-## 문서 목적
+## 목적
-메인 대시보드(`/`)를 가장 중요한 운영 변화만 짧게 읽는 **executive snapshot**으로 다시 잠근다. HOTFIX-006의 문구 절제와 source 정합성 보정을 포함하고, 이번 Sprint에서는 `socket`, `freshness`, `owner`, `source`를 오해 없이 분리한다.
+대시보드 메인은 단순 요약 화면이 아니라, 자기야가 들어오자마자 `지금 4자매 파이프라인이 어디까지 와 있는지` 즉시 판단할 수 있는 대표 운영 화면이어야 해.
-## 참고 문서
+이번 v3의 핵심은 **현행 미니멀 터미널 UI를 유지하면서, 더 강한 정보 구조와 흐름 시각화로 메인 화면을 재구성하는 것**이야.
 - 실행 개요: `.plans/OVERVIEW.md`
 - Sprint: `.plans/sprints/SPRINT-018.md`
 - HOTFIX-006: `.plans/hotfix/HOTFIX-006.md`
 - API 설계: `.plans/design/api-design.md`
-## 기준 구현 파일
+## 유지할 것
- `frontend/app/page.tsx`
+- 현재 제품의 미니멀 터미널 톤
- `backend/src/dashboard/dashboard.service.ts`
+- 짙은 배경 + 얇은 border + mono 보조 텍스트
- `backend/src/sisters/sisters.service.ts`
+- 4자매 중심 세계관/역할 구분
 - 모바일 하단 탭바와 기존 페이지 동선
-## 페이지 역할
+## 강하게 가져올 것
-`/`는 live intervention 화면이 아니야. 여기서는 운영자가 아래를 빠르게 판단해야 한다.
+- 상단 global status bar 구조
- 지금 focus가 어디 있나
+- 4자매 카드 1행 배치
- 최근 event는 언제 있었나
+- `ACTIVE PIPELINE` 중심 운영 다이어그램
- active owner가 있나 없나
+- `ACTIVITY FEED` + `SPRINT METRICS` 병렬 구조
- 어떤 섹션이 live / mirrored event / snapshot / doc-derived / fallback 인가
+- `INFRASTRUCTURE OVERVIEW` + `MISTAKE LOG & HARNESS` 하단 운영 패널 구조
-## 핵심 문제
+## 줄일 것
-현재 구현에서 바로 고쳐야 하는 점:
+- 과한 glow
- `socket off`가 전체 오류처럼 읽힌다
+- 장식성 애니메이션 남발
- snapshot freshness와 socket 연결 여부가 같은 줄에서 섞인다
+- 의미 없이 많은 뱃지/배경 장식
- owner가 없을 때 fallback sister가 고정 노출된다
+- mock 대시보드처럼 보이는 가짜 숫자 강조
 - focus summary와 panel copy가 길고 설명형이다
-## top bar 규칙
+---
 ### 좌측
 - `MASTER DASHBOARD` 또는 동급 짧은 label
 - focus headline 1개
-### 중앙
+## 전체 레이아웃
- current project / current sprint / deploy state
+### 1. Top Global Status Bar
 한 줄 또는 반응형 2단 구조.
-### 우측
+#### 좌측
- connection badge
+- 브랜드/제품명
- freshness badge
+- 현재 페이지 정체성 (`Master Dashboard`)
 - active owner 또는 `NO ACTIVE OWNER`
-## connection / freshness 분리 규칙
+#### 중앙
-| badge | 의미 | 예시 |
+- 현재 Sprint / Day / focus summary
-|---|---|---|
+- 진행률 bar 또는 current cycle 요약
 | connection | websocket/event stream 연결 상태 | `EVENT STREAM ON`, `EVENT STREAM OFF` |
 | freshness | 데이터 최신성 | `SYNC 18s AGO`, `SNAPSHOT 2m AGO` |
 | source | 값의 출처 | `MIRRORED EVENT`, `SNAPSHOT`, `DOC-DERIVED`, `FALLBACK` |
-### 금지
+#### 우측
- `socket off` 하나만 보고 오류처럼 보이게 만들기
+- Discord/Runtime 연결 상태
- connection badge를 source badge 대신 쓰기
+- 알림 진입점
- freshness 없는 `LIVE` 라벨 단독 사용
+- operator/avatar 요약
-## owner 표현 규칙
+#### UX 기준
- active owner는 source와 why-visible이 있을 때만 강하게 노출
+- 상단에서 현재 운영 국면을 짧게 읽을 수 있어야 함
- owner가 없으면 `NO ACTIVE OWNER` 또는 `UNASSIGNED`로 표시
+- 모바일에서는 좌/중/우를 무리하게 한 줄에 우겨넣지 말고 2단으로 자연스럽게 접기
 - fallback sister를 기본 owner로 고정 노출하지 않는다
 - snapshot owner면 `SNAPSHOT OWNER`를 badge로 분리한다
-## information architecture
+---
 ### 1. top snapshot bar
 - focus headline
 - connection / freshness / source badges
 - active owner
-### 2. sister status row
+### 2. Sister Status Cards Row
-카드는 짧고 운영형으로 유지한다.
+4자매 카드는 1행 핵심 상태 영역.
-각 카드 최소 정보:
+#### 공통 정보
- name
+- 이름
- role
+- 역할
- truthful state (`active working`, `connected idle`, `snapshot only`, `offline`)
+- 상태 (`IDLE`, `WORKING`, `REVIEWING`, `OFFLINE`, `DEPLOYING` 등)
- short summary 1줄
+- CPU / RAM 또는 대응 리소스 지표
- source/freshness meta
+- 현재 작업 한 줄 요약
-### 3. active pipeline
+#### 역할별 색 기준
- 실제 event mirrored인지, snapshot inference인지 표시
+- Harang: amber
- `NO ACTIVE HANDOFF`, `NO CONFIRMED REVIEW LOOP` 같은 neutral empty state 허용
+- Narang: sky
- 추정치 문장을 확정 사실처럼 쓰지 않는다
+- Darang: pink
 - Irang: violet
-### 4. activity feed / metrics
+#### 상태 표현 규칙
- activity feed는 근거
+- 색은 역할 + 현재 상태를 같이 전달해야 함
- metrics는 요약
+- working/reviewing처럼 active 상태일 때만 강한 강조
- source가 다른 값은 같은 카드 안에서 섞지 않는다
+- idle은 조용하게
 - offline은 회색/경고 계열로 분명히 구분
-### 5. infra / board
+#### 카드 UX 기준
- infra: runtime/snapshot 상태
+- 네 카드의 높이/구조는 최대한 동일
- board: harness/qa 같은 doc-derived 또는 activity-derived 기록
+- 긴 텍스트는 1줄 또는 2줄 clamp
- 각 카드에 source badge를 유지한다
+- CPU/RAM은 숫자와 bar를 함께 보여줘도 되지만 과장하지 말 것
 - 아바타/아이콘은 보조 요소고, 상태 텍스트가 주인공이어야 함
-## copy rules
+---
 - 짧은 운영형 문장 우선
 - 설명문, 감상문, 구현 메타 문장 금지
 - `~정리했어`, `~보여준다` 같은 자기설명 금지
 - owner/focus/fallback 문구는 neutral tone 사용
-권장 예시:
+### 3. `ACTIVE PIPELINE`
- `EVENT STREAM OFF`
+이번 v3의 대표 섹션.
 - `SNAPSHOT 58s AGO`
 - `NO ACTIVE OWNER`
 - `DOC-DERIVED`
 - `NO RECENT QA`
 - `MIRRORED EVENT`
-## mobile 360 / 390 rules
+#### 목적
- top bar chip은 wrap 허용
+User → Harang → Narang → Darang → Irang 흐름과, maker-checker loop, escalation 조건을 한눈에 보여준다.
 - owner 영역은 avatar + label 고정폭 금지
 - focus summary는 1~2문장 대신 짧은 label + short detail 사용
 - sister card, pipeline card, board card, git/meta row에서 horizontal scroll 금지
-## acceptance
+#### 기본 노드
- socket 연결 여부와 freshness가 별도 라벨로 보인다
+- User
- `socket off`가 오류처럼 읽히지 않는다
+- Harang (`Plan & Assign`)
- owner가 없을 때 fallback owner 고정 노출이 사라진다
+- Narang (`Implement` or active task id)
- 카드 문구가 짧은 운영형 문장으로 정리된다
+- Darang (`Review / QA`)
- 주요 섹션이 `live / mirrored event / snapshot / doc-derived / fallback` 중 무엇인지 일관되게 보인다
+- Irang (`Deploy / Idle`)
-## rollout note
+#### 보여줄 정보
- HOTFIX-006에서 잠근 source/freshness 원칙을 홈 전체 IA에 확대 적용한다
+- 현재 active task 또는 ticket id
- `/office`와 달리 `/`는 intervention CTA보다 snapshot readability를 우선한다
+- Narang ↔ Darang review loop
 - escalation 조건 또는 누적 실패 횟수
 - Irang이 아직 idle인지, redeploy 대기인지
 #### 구현 기준
 - SVG 기반 라인/화살표 허용
 - active state가 있을 때만 제한적 pulse/flow
 - 정적인 설명보다 실제 운영 상태가 우선
 - loop / escalation은 읽히되 과하게 복잡하면 안 됨
 #### 금지
 - 예쁘기만 한 다이어그램
 - 현재 상태를 읽을 수 없는 장식형 선/화살표
 ---
 ### 4. Middle Row — `ACTIVITY FEED` + `SPRINT METRICS`
 운영 근거와 정량 판단을 나란히 배치한다.
 #### A. Activity Feed
 운영 이벤트 타임라인.
 ##### 우선 정보
 - 시각
 - 주체/대상 (예: Narang → Darang)
 - 이벤트 타입 (`handoff`, `review_request`, `review_fail`, `deploy`, `hotfix` 등)
 - 관련 task/sprint/hotfix id
 - 실패/경고 시 짧은 원인
 ##### UX 기준
 - 텍스트 로그가 아니라 읽히는 이벤트 카드여야 함
 - event type 색은 통일감 있게 관리
 - 필요하면 details/JSON 결과는 접어서 보여줌
 #### B. Sprint Metrics
 한 Sprint의 진행 체감치를 운영 지표로 압축.
 ##### 포함 후보
 - total tasks
 - done / in progress / review / planning 비중
 - sister별 completed count
 - avg iterations
 - first-pass rate
 - escalation count
 ##### UX 기준
 - 차트는 보조, 숫자 읽기가 우선
 - donut + mini bar + stat box 조합 허용
 - `활동 피드와 같은 행에서 비교`했을 때 자연스러워야 함
 ---
 ### 5. Bottom Row — `INFRASTRUCTURE OVERVIEW` + `MISTAKE LOG & HARNESS`
 운영 기반과 학습 자산을 하단에 둔다.
 #### A. Infrastructure Overview
 ##### 목적
 현재 시스템이 어디서 어떻게 돌아가는지 빠르게 파악.
 ##### 포함 요소
 - gateway
 - sisters runtime host/lxc/vm
 - deploy access path
 - health / load / uptime 요약
 ##### 표현 방식
 - 단순 카드 나열보다 연결 관계가 보이는 가벼운 맵 구조 선호
 - 다만 실제 데이터가 빈약하면 과장된 네트워크 다이어그램으로 만들지 말 것
 #### B. Mistake Log & Harness
 ##### 목적
 운영 중 쌓인 실수/규칙/학습 자산을 한 눈에 보여줌.
 ##### 포함 요소
 - 최신 mistake/harness rule 몇 개
 - 작성 시점
 - 누가 추가했는지
 - category (`DB Schema`, `Frontend`, `Deployment` 등)
 - 필요하면 작은 trend visualization
 ##### UX 기준
 - 단순 문서 링크가 아니라 운영 학습 보드처럼 보여야 함
 - `View Full` 또는 상세 문서 링크는 보조로 유지
 ---
 ## 데스크톱 정보 순서
 1. Top Global Status Bar
 2. Sister Status Cards
 3. Active Pipeline
 4. Activity Feed / Sprint Metrics
 5. Infrastructure Overview / Mistake Log & Harness
 ## 모바일 정보 순서
 1. Top Status Summary
 2. Sister Status Cards (2열 또는 1열)
 3. Active Pipeline
 4. Activity Feed
 5. Sprint Metrics
 6. Infrastructure Overview
 7. Mistake Log & Harness
 모바일에서는 복잡한 수평 관계보다 세로 읽기 흐름이 우선이야.
 ---
 ## 데이터 연결 원칙
 - mock 텍스트/숫자로 고정하지 말고 실제 데이터가 들어올 자리를 먼저 설계할 것
 - 값이 없을 때는 `No recent activity`, `No active deployment`, `No harness rules yet`처럼 조용한 empty state 제공
 - offline / missing / unavailable 상태는 숨기지 말고 명확히 드러낼 것
 - websocket 연결 상태와 데이터 freshness를 같은 의미로 쓰지 말 것
 - 각 섹션은 가능하면 아래 source 중 하나로 구분할 것
  - `runtime live`
  - `event mirrored`
  - `polling snapshot`
  - `doc derived`
  - `empty / unavailable`
 - 추정/합성값이면 사실처럼 단정하지 말고 neutral wording 사용
 ## 카피 원칙
 - 설명문보다 라벨형 문구 우선
 - 첫 화면 문구는 짧고 건조해야 함
 - `~만들었어`, `~정리했어`, `~읽히게` 같은 메타 설명 금지
 - 보드/패널 body는 원문 요약 또는 상태 문구 위주로 짧게 유지
 ## 인터랙션 원칙
 - hover 없어도 핵심 정보가 읽혀야 함
 - 클릭 가능한 영역은 페이지 이동 또는 상세 패널 열기처럼 의미가 분명해야 함
 - notification / details / expand는 보조 수단
 ## 스타일 원칙
 - background는 현행 다크 톤 유지
 - border 1px 중심
 - 그림자/glow는 active state 강조용 최소치만 사용
 - 하드한 터미널 감성과 현대적 운영 패널 느낌 사이 균형 유지
 ## 연결 페이지
 - 프로젝트 페이지는 phase/QA/deploy 세부 판단용
 - 활동 페이지는 장기 로그 열람용
 - 자매 상세는 개별 runtime/세션 분석용
 - 관리 페이지는 조작/재시작/관리용
 즉, 홈은 모든 걸 다 보여주는 곳이 아니라 **지금 어디를 눌러야 하는지 판단시키는 운영 출발점**이어야 해.
--- a/.plans/design/ui/office-dashboard-design.md
+++ b/.plans/design/ui/office-dashboard-design.md
@@ -1,172 +1,207 @@
-# `/office` UI 기준 — SPRINT-018 live operations workspace
+# 오피스 대시보드 UI 기준 — SPRINT-017 모바일 개편
 ## 문서 목적
-`/office`를 4개 긴 박스 조합이 아니라 **group mental model 중심 live operations workspace**로 다시 잠그는 문서야. SPRINT-017의 mobile-first IA를 유지하되, 이번 Sprint에서는 `working`, `source`, `freshness`, `default context` 의미를 더 엄격하게 정의한다.
+`/office` 메인 화면의 모바일 IA와 우선순위를 잠그는 문서야. 기준 Sprint는 `.plans/sprints/SPRINT-017.md`이고, active scope는 `.plans/OVERVIEW.md`를 따른다.
 ## 참고 문서
 - 실행 개요: `.plans/OVERVIEW.md`
 - Sprint: `.plans/sprints/SPRINT-018.md`
 - API 설계: `.plans/design/api-design.md`
 - 관련 chat 문서: `.plans/design/ui/office-chat-design.md`
 ## 기준 구현 파일
 - `frontend/app/office/page.tsx`
 - `frontend/components/office/OfficeScene.tsx`
 - `frontend/components/office/ContextPanel.tsx`
 - `frontend/components/office/ChatWorkspace.tsx`
 - `frontend/components/office/PipelinePanel.tsx`
 - `frontend/components/office/ServerHealthPanel.tsx`
 - 관련 chat 문서: `.plans/design/ui/office-chat-design.md`
-## 페이지 역할
+## breakpoint 기준
-`/office`는 executive summary가 아니라 **바로 개입하는 운영 화면**이야.
+- `360px`: minimum mobile compact
 - `390px`: primary mobile baseline
 - `768px`: tablet transition
 - `1280px+`: desktop baseline
-핵심 질문:
+## 현재 main 구현에서 바꿔야 하는 점
-1. 누가 연결돼 있나
+- `OfficeScene.tsx`는 `800 / 460` 비율 SVG 씬을 전제로 해서 모바일에서 정보보다 축소 그림이 먼저 보인다.
-2. 누가 실제로 working 중인가
+- `page.tsx`는 모바일 전용 상단 summary가 없어서 첫 화면에서 핵심 운영 정보가 바로 안 잡힌다.
-3. 어떤 group이 막혀 있나
+- `ContextPanel.tsx`는 선택 전 빈 상태라 모바일 첫 진입에 불리하다.
-4. 지금 어디에 말 걸면 되나
+- `PipelinePanel.tsx`는 `overflow-x: auto`가 들어가 있어 모바일에서 읽기보다 옆으로 밀게 된다.
 - `ServerHealthPanel.tsx`는 카드 그리드는 있지만 상단 health summary 우선순위가 없다.
-## 정보 구조 원칙
+## 모바일 핵심 원칙
-1. **group mental model 유지**
+1. **데스크톱 축소판 금지**
-   - 자매를 개별 카드 나열로만 보지 않고 `planning / delivery / review / deploy` group 흐름으로 묶는다
+   - 모바일은 desktop scene을 줄이는 방식이 아니라 모바일 전용 정보 구조를 쓴다.
-2. **scene은 운영 지도여야 함**
+2. **첫 viewport 우선**
-   - 데스크톱 scene은 decorative office가 아니라 group 상태와 선택을 보여주는 요약 지도여야 한다
+   - `360px`, `390px` 첫 화면에서 운영자가 바로 판단할 정보만 먼저 보여준다.
-3. **빈 context 금지**
+3. **선택 전에도 정보가 보이게**
-   - 첫 진입 시 `선택하세요` 대신 기본 운영 summary를 보여준다
+   - 자매를 누르기 전에도 상태, focus, health, action이 읽혀야 한다.
-4. **truthful status**
+4. **가로 스크롤 금지**
-   - `connected idle`, `active working`, `snapshot only`, `fallback`, `offline`을 구분한다
+   - mobile에서는 모든 핵심 블록이 세로 흐름 안에서 끝나야 한다.
-5. **mobile overflow 금지**
+5. **상태 의미 유지**
-   - `360px`, `390px` 기준 긴 badge, 긴 detail, 긴 source 문구는 wrap되고 horizontal scroll이 없어야 한다
+   - `live / snapshot / fallback`은 유지하되, 짧고 일관된 라벨로 통일한다.
-## source / status 라벨
+## mobile IA
-| 라벨 | 의미 | 금지 |
+모바일(` <768`) 기본 순서는 아래로 고정해.
 |---|---|---|
 | `live` | runtime 또는 ws 기반 최신 상태 | snapshot과 같은 톤으로 보이게 하기 |
 | `snapshot` | polling 기준 마지막 스냅샷 | live처럼 pulse 주기 |
 | `fallback` | 보정 데이터 | working으로 읽히는 색 주기 |
 | `connected idle` | 연결됨, 최근 작업 없음 | working 색 재사용 |
 | `active working` | 명시적 작업 중 | 단순 task string 존재만으로 확정하기 |
 | `offline` | 연결 불가 | stale snapshot과 같은 카드 처리 |
-## desktop IA (`1280px+`)
+### 1. summary hero
-### 레이아웃
+가장 위. 첫 진입 핵심 문장 1개와 source badge 1개를 보여준다.
 `summary rail + group scene + context rail + bottom detail panels`
-### 1. summary rail
+**포함 정보**
- 현재 focus
+- 현재 focus project 또는 active task
- connection summary
+- data source badge (`live`, `snapshot`, `fallback`)
- active working count
+- 보조 문구 한 줄
 - source/freshness badges
-### 2. group scene
+**하지 않을 것**
-기존 4개 긴 박스 분해형 대신 아래 group block을 scene 안에 배치한다.
+- 긴 설명문
- Planning group: 하랑이 + planner/prd-writer
+- 데스크톱용 메타 정보 여러 줄
 - Delivery group: 나랑이 + implementation subagents
 - Review group: 다랑이 + reviewer/qa/security
 - Deploy group: 이랑이 + infra/deploy agents
-각 group 최소 정보:
+### 2. compact sister status
- group label
+4자매 상태를 2x2 또는 1열 compact card로 보여준다.
 - connected count / working count
 - primary blocker 또는 `all clear`
 - 대표 source badge
-### 3. context rail
+**각 카드 최소 정보**
-선택 상태와 무관하게 기본 summary가 먼저 보인다.
+- 자매 이름
 - 상태색과 상태 라벨
 - current task 또는 active session 한 줄
 - runtime/source 힌트 한 줄
-기본 summary 우선순위:
+**행동**
-1. current focus
+- 탭 또는 카드 선택 가능
-2. current blocker
+- 선택 시 인라인 상세가 펼쳐져도 첫 카드 밀도를 깨지 않게 유지
 3. active working group
 4. quick actions
-선택 후 context는 아래로 바뀐다.
+### 3. focus / health / quick action block
- selected sister summary
+첫 viewport 안에 반드시 들어와야 하는 운영 블록이야.
 - recent session / task evidence
 - why this looks active
 - open chat CTA
-### 4. bottom detail panels
+**focus block**
 순서:
 1. chat
 2. pipeline
 3. server health
 패널 역할:
 - chat: intervention
 - pipeline: delivery flow evidence
 - health: infra/runtime evidence
 ## mobile IA (`<768`)
 ### 고정 순서
 `summary → group blocks → detail flow`
 ### 1. summary
 첫 viewport 안에 아래가 모두 들어와야 한다.
 - current focus
- connection summary
+- sprint / deploy state 중 하나의 핵심 값
 - active working summary
 - quick action
-### 2. group blocks
+**health block**
- 4자매 individual card보다 group block 우선
+- online count
- 각 block 안에서 대표 sister와 상태를 요약
+- 문제 있는 sister/server 요약
- 선택 시 inline expand 또는 accordion으로 detail 표시
+- source badge
-### 3. detail flow
+**quick action block**
-모바일에서는 `800x460` scene 축소판을 사용하지 않는다.
+- direct chat 진입
-세부 흐름 순서:
+- 상세 보기 또는 관련 패널 점프
-1. chat
+
 ### 4. panel sections
 첫 viewport 이후 순차 노출.
 모바일 추천 순서:
 1. direct chat
 2. pipeline
-3. health
+3. health detail
 4. context detail
-## default context 규칙
+이 순서는 "지금 말 걸기 → 지금 뭐가 막혔는지 보기 → 상세 맥락 보기" 흐름을 따른다.
 선택 전 기본 카드 예시:
 - `현재 focus`: active task / no active focus
 - `현재 가장 바쁜 그룹`: delivery / review / none
 - `개입 권장`: direct chat target 또는 `no direct target`
 - `data note`: live/snapshot/fallback 구분
-## ChatWorkspace 반영 규칙
+## first viewport priority
- JWT 없음, runtime 확인 중, empty, error, send disabled reason을 상단 또는 입력부 근처에 즉시 노출
+`360px`, `390px`에서 아래 4개가 모두 한 번에 보여야 해.
- chat이 열리지 않은 기본 상태에서도 요약 CTA는 보여야 한다
+1. 4자매 상태
- mobile에서 고정 높이 중심 설계 금지
+2. current focus
 3. health summary
 4. quick actions
-## PipelinePanel 반영 규칙
+### 우선순위 이유
- 가로 카드열 금지
+- 자매 상태가 먼저 안 보이면 운영 화면이 아니라 decorative scene이 된다.
- 세로 단계 흐름 또는 responsive stack 사용
+- focus가 없으면 무엇을 관제 중인지 설명이 안 된다.
- `focus`, `review loop`, `deploy state`, `source/freshness`를 상단 요약으로 먼저 보여준다
+- health summary가 없으면 online/offline 판단이 늦어진다.
 - quick actions가 없으면 direct chat 진입이 숨는다.
-## ServerHealthPanel 반영 규칙
+## compact sister status 설계
- 상단에는 health summary만 먼저 노출
+### desktop와 다르게 볼 것
- 긴 detail/source 문구는 wrap되어야 한다
+- desktop(`1280px+`)은 scene 중심
- `connected idle`, `snapshot only`, `fallback`, `offline`을 다른 상태로 읽히게 한다
+- tablet(`768px`)은 scene 축소 유지 가능하되 summary 보강 필요
 - mobile(` <768`)은 scene 대신 status card 중심
-## 상태 표현 규칙
+### 카드 규칙
-| 상태 | 문구 예시 |
+- 카드 높이는 task 한 줄, 상태 한 줄 기준으로 짧게 유지
-|---|---|
+- 자매 4명을 한 화면 안에서 비교 가능해야 함
-| loading | `데이터 확인 중` |
+- 선택된 자매는 인라인 확장이나 하단 sheet로 상세를 보여줄 수 있음
-| empty | `표시할 운영 항목 없음` |
+- subagent 수나 role은 보조 정보로만 노출
 | error | `가져오지 못함` |
 | stale | `마지막 확인값 표시 중` |
 | jwt_missing | `JWT 없음, 전송 불가` |
-`empty`와 `error`는 절대 같은 문구를 쓰지 않는다.
+## scene 대체 전략
 ### mobile에서 scene을 이렇게 바꿔
 `OfficeScene.tsx` 모바일 분기는 아래 둘 중 하나를 기준으로 구현해.
-## 360 / 390 responsive rules
+#### 옵션 A. compact sister stack
- 카드 title, badge, meta는 2줄까지 wrap 허용
+- 세로 카드 4개
- source label은 short token 우선 (`live`, `snapshot`, `fallback`)
+- 각 카드에서 상태, current task, quick action 제공
- `generated 10:31:02` 같은 긴 freshness 문구는 한 줄 고정 금지
+- 선택 시 아래에 context summary 노출
 - 전체 페이지와 하위 패널에서 horizontal scroll 금지
-## acceptance
+#### 옵션 B. selectable status cards
- `/office` desktop이 4개 긴 박스 분해형이 아니라 group/scene 중심으로 재구성된다
+- 2x2 grid 또는 가로 2열 카드
- mobile에서 scene 축소판이 사라지고 `summary → group blocks → detail flow`가 된다
+- 선택 카드만 확장
- 첫 진입 시 빈 context가 아니라 기본 운영 summary가 보인다
+- 확장 영역에서 subagent / recent context / chat action 제공
 - selected / unselected 상태 모두 `360px`, `390px`에서 overflow 없이 읽힌다
 - `working`은 source-of-truth 기준으로만 강조된다
-## rollout note
+### 반드시 지킬 것
- SPRINT-017의 모바일 정보 순서는 유지한다
+- `800x460` SVG를 그대로 줄여서 넣지 않는다
- 이번 Sprint에서 바꾸는 건 scene semantics, default context, truthful state labels다
+- 회의실/존 은유는 모바일에서 필수 요소가 아니다
 - mobile에서 중요한 건 공간 은유보다 운영 정보의 순서다
 ## context 흡수 전략
 `ContextPanel.tsx` 내용은 mobile에서 별도 우측 패널이 아니라 아래 중 하나로 흡수해.
 - selected sister 카드 안 인라인 상세
 - accordion section
 - bottom sheet
 ### mobile 기본 상태
 - 아무 것도 선택되지 않아도 default context summary가 있어야 한다
 - 예: "현재 focus", "현재 제일 바쁜 자매", "바로 채팅할 자매"
 ## health block 기준
 `ServerHealthPanel.tsx` 전체를 첫 화면에 다 넣지 말고, 상단에는 summary만 먼저 둬.
 **상단 summary 최소 정보**
 - `online x/y`
 - 문제 상태 1건 요약 또는 `all clear`
 - source badge (`live`, `snapshot`, `fallback`)
 **상세 패널에서 보여줄 것**
 - 자매/서버 카드 리스트
 - detail 문구
 - refreshed/generated 시각
 ## pipeline block 기준
 `PipelinePanel.tsx` 전체를 모바일 첫 viewport에 다 넣지 않는다.
 **상단 summary 최소 정보**
 - active task
 - focus
 - review loop count 또는 deploy state
 **상세 패널에서 보여줄 것**
 - 세로 단계 카드
 - node role / state / detail
 - snapshot freshness
 ## source badge 규칙
 모바일에서는 source 표현을 아래처럼 통일해.
 - `live`: 현재 runtime 또는 ws 기반 최신 상태
 - `snapshot`: polling 또는 마지막 스냅샷 기준 상태
 - `fallback`: 문서/기본값/보조 데이터 기준 상태
 ### 라벨 톤
 - 라벨은 짧게
 - 설명은 보조 문구 한 줄
 - 첫 화면과 하위 패널에서 같은 단어 사용
 ## 상태 문구 규칙
 - `loading`: 불러오는 중
 - `empty`: 아직 표시할 데이터 없음
 - `error`: 가져오지 못함 또는 전송 실패
 - `stale`: 최신 연결이 약해 마지막 확인값 표시 중
 `empty`와 `error`는 절대 같은 문구로 처리하지 않아.
 ## desktop / tablet 유지 규칙
 ### desktop (`1280px+`)
 - 기존 scene + context panel + bottom panels 구조 유지
 - 단, source badge와 상태 라벨은 새 기준으로 통일
 ### tablet (`768px`)
 - 데스크톱 구조를 유지해도 되지만 summary 우선순위를 보강해야 함
 - 첫 화면에서 핵심 정보가 씬 아래로 밀리면 안 됨
 ## QA 체크 포인트
 - `360px`, `390px`에서 첫 viewport에 핵심 정보 4종이 모두 보이는지
 - horizontal scroll이 없는지
 - 선택 전에도 default context가 읽히는지
 - sister 선택 후 상세 확인이 같은 세로 흐름 안에서 끝나는지
 - `live / snapshot / fallback` 라벨이 첫 화면과 패널에서 같은지
--- a/.plans/design/ui/org-design.md
+++ b/.plans/design/ui/org-design.md
@@ -1,121 +1,97 @@
-# `/org` UI 기준 — SPRINT-018 company org map
+# 조직도 (`/org`) — 디자인 v2
-## 문서 목적
+> 참조: DESIGN-SYSTEM.md | 원본: 자기야 디자인 파일 #6
 `/org`를 자매 트리 데모가 아니라 **회사형 조직도 + independent agents map**으로 전면 재설계한다. 이번 문서는 하드코딩된 root tree 대신, 실제 데이터 계약으로 렌더링 가능한 org 화면 기준을 잠근다.
-## 참고 문서
+## 레이아웃
 - 실행 개요: `.plans/OVERVIEW.md`
 - Sprint: `.plans/sprints/SPRINT-018.md`
 - API 설계: `.plans/design/api-design.md`
-## 기준 구현 파일
+```
- `frontend/app/org/page.tsx`
+┌─────┬──────────────────────────────────────────────────────┐
- `backend/src/sisters/sister-detail.service.ts`
+│ 64px│  SYS_TYPE: CORE_ROOT_01        2023.10.27_14:42     │
 │     │  ──────────────────────────────────────────────────  │
 │     │                                                      │
 │ DASH│              ┌─────────────────┐                     │
 │ PROJ│              │ [HQ] 하나랑 글로벌 │                     │
 │◗ORG │              │ MEM:142 S_ADMIN  │                     │
 │ CONF│              └────────┬────────┘                     │
 │     │           ┌───────────┼───────────┐                  │
 │     │    ┌──────┴──────┐  ┌─┴────┐  ┌───┴───┐             │
 │     │    │[R&D] 기술연구│  │[OPS] │  │[EXT]  │             │
 │     │    │ MEM:48 LEAD │  │운영팀 │  │외부협력│             │
 │     │    └──────┬──────┘  └──┬───┘  └───┬───┘             │
 │     │     ┌─────┼─────┐     │           │                  │
 │     │  ┌──┴──┐ ┌┴─────┐ ┌──┴───┐  ┌───┴────┐             │
 │     │  │Core │ │Infra │ │Monitor│  │Security│             │
 │     │  │Eng. │ │struct│ │ing   │  │Audit   │             │
 │     │  └─────┘ └──────┘ └──────┘  └────────┘             │
 │     │                                                      │
 │     │  TOTAL_NODES: 07              STATUS: SYNC_COMPLETE  │
 └─────┴──────────────────────────────────────────────────────┘
 ```
-## 현재 문제
+## 사이드바 (조직도 전용)
- 현재 화면은 하랑이 root 고정형 terminal tree다
+- **64px 너비** (다른 페이지의 240px과 다름)
- 자매 외 조직 단위가 없다
+- 세로 텍스트: `writing-mode: vertical-rl`
- independent agents가 표현되지 않는다
+- 아이콘 모드: DASH / PROJ / ORG_TREE / CONF
- mobile에서는 tree 한 벌이 사실상 읽기 어렵다
+- 로고: 세로 배치 (circle-full 위, circle-half 아래)
 - source / freshness / status가 다른 페이지와 같은 의미로 보이지 않는다
-## 페이지 역할
+## 메인 뷰포트
-핵심 질문:
+- 배경: dot grid pattern — `radial-gradient(circle, #1a1a1a 1px, transparent 1px)` / 30px 30px
-1. 회사 조직 단위는 어떻게 나뉘어 있나
+- `overflow: auto` (스크롤 가능)
-2. 각 unit lead와 member는 누구인가
+- padding: 40px, 중앙 정렬
 3. independent agents는 어느 영역에 속하지 않는가
 4. 현재 status / source / freshness는 무엇인가
-## 정보 구조
+## 헤더
-### 1. org summary header
+- 좌: `SYS_TYPE: CORE_ROOT_01` (mono, 값은 흰색)
- org generated time
+- 우: `TIMESTAMP: 2023.10.27_14:42` (mono secondary)
- source badge
+- border-bottom 1px
 - total units
 - total members
 - independent agents count
-### 2. HQ section
+## 트리 구조
 - HQ card
 - lead
 - 핵심 responsibility
 - direct reports summary
-### 3. functional teams
+### Terminal Card
-예시:
+- 200px 너비, padding 12px
- Planning / Program
+- `border: 1px solid var(--border-color)`
- Delivery
+- **border-left: 3px solid** (레벨별 색상)
- QA / Review
+  - high (`#f43f5e`): HQ
- Infra / Deploy
+  - mid (`#3b82f6`): R&D, Core Engine, Infrastructure
  - low (`#10b981`): OPS, EXT, Monitoring, Security Audit
 - `box-shadow: 0 10px 30px rgba(0,0,0,0.5)`
 - node-label: mono 13px 600
  - 접두사 span: `[HQ]` `[R&D]` `[OPS]` `[EXT]` — secondary 11px
 - badge-row: flex wrap, gap 6px
  - badge: mono 9px, `#1a1a1a` bg, border 1px `#262626`
  - `MEM: 142` (값은 primary)
  - `S_ADMIN`, `LEAD`, `MGR`, `GUEST` 등
  - `LV_09`, `LV_07` 등
-각 team card 최소 정보:
+### 접기/펼치기 토글
- team name
+- `−` / `+` 아이콘, 16x16px
- lead
+- 카드 하단 중앙 absolute 배치
- member chips
+- bg: card bg, border 1px
 - active status summary
 - source/freshness
-### 4. independent agents
+### 연결선
-조직도 하단 또는 병렬 rail에 별도 배치한다.
+- 세로선: `width: 1px; background: var(--border-color)`
 - 가로선 (형제 연결): children `::before` — 상단 -40px
-각 항목 최소 정보:
+### 트리 구조
- name
+```
- type (`independent` / `sister-owned`)
+하나랑 글로벌 (HQ, high)
- owner sister 또는 `none`
+├── 기술연구소 (R&D, mid)
- role / purpose
+│   ├── Core Engine (mid)
- status / source / freshness
+│   └── Infrastructure (mid)
 ├── 운영지원팀 (OPS, low)
 │   └── Monitoring (low)
 └── 외부 협력사 (EXT, low)
    └── Security Audit (low)
 ```
-### 5. reporting lines
+## 푸터
-desktop에서는 라인/connector를 써도 되지만, line이 없어도 hierarchy를 읽을 수 있어야 한다. mobile은 connector보다 section order와 labels를 우선한다.
+- `margin-top: auto; border-top: 1px solid`
 - 좌: `TOTAL_NODES: 07`
 - 우: `STATUS: SYNC_COMPLETE`
 - mono 10px secondary
-## data contract rules
+## 모바일 반응형
- `orgUnits`, `members`, `reportingLines`, `independentAgents`로 렌더링 가능해야 한다
+- 사이드바: 하단 탭바로 전환
- hard-coded `harang -> narang/darang/erang` 구조 금지
+- 트리: 수평 스크롤 컨테이너 + 핀치 줌
- member status는 다른 페이지와 같은 vocabulary를 사용한다
+- terminal-card: 너비 160px으로 축소
-  - `active working`
+- badge 폰트: 8px
-  - `connected idle`
+- dot grid: 20px 간격으로 축소
  - `snapshot only`
  - `fallback`
  - `offline`
 ## layout rules
 ### desktop (`1280px+`)
 - `summary header`
 - `HQ + top org units`
 - `functional teams grid`
 - `independent agents rail`
 - optional reporting lines overlay
 ### tablet (`768px`)
 - 2열 card grid 허용
 - connector 최소화
 ### mobile (`360px`, `390px`)
 - section stack
 - team card 내부 member chips wrap
 - independent agents 별도 section 유지
 - horizontal scroll 금지
 ## copy rules
 - `TOTAL_NODES` 같은 데모형 문구보다 실제 조직 label 사용
 - `SYNC_COMPLETE` 같은 과장 표현 금지
 - source와 freshness를 분리해서 표기
 - 없는 조직 단위는 억지 생성하지 않는다
 ## empty states
 | 상태 | 표현 |
 |---|---|
 | no org data | `ORG DATA 없음` |
 | no independent agents | `INDEPENDENT AGENTS 없음` |
 | no lead | `LEAD 미정` |
 | fallback only | `FALLBACK ORG SNAPSHOT` |
 ## acceptance
 - `/api/org` 계약만으로 회사형 조직도를 렌더링할 수 있다
 - independent agents와 sister-owned agents를 분리해서 표현할 수 있다
 - 특정 자매 top 고정 하드코딩 없이 렌더링 가능하다
 - org 화면에서도 `status / source / freshness` 의미를 재사용한다
 - `360px`, `390px` 기준 핵심 요약과 카드가 overflow 없이 읽힌다
 ## rollout note
 - 첫 구현은 connector보다 card semantics를 우선한다
 - terminal tree 미감은 보조 요소로만 남기고, hierarchy readability를 우선한다
--- a/.plans/design/ui/project-detail-design.md
+++ b/.plans/design/ui/project-detail-design.md
@@ -1,129 +1,43 @@
-# `/projects/[id]` UI 기준 — SPRINT-018 delivery detail
+# 프로젝트 상세 (`/projects/[id]`) — Sprint 014 리뉴얼
-## 문서 목적
+## 목적
-프로젝트 상세는 delivery flow를 읽는 화면이지, unique assignee 목록을 현재 참여자처럼 보여주는 화면이 아니야. 이번 Sprint에서는 `participants`, `current owners`, `task assignees`를 truthfully 분리한다.
+프로젝트 상세는 Sprint 이력만 보여주는 화면이 아니라, 계획 → 구현 → QA → 배포 흐름이 실제로 어디까지 왔는지 판단하는 운영 화면이어야 해.
-## 참고 문서
+## 상단 헤더
- 실행 개요: `.plans/OVERVIEW.md`
+- breadcrumb 유지
- Sprint: `.plans/sprints/SPRINT-018.md`
+- 제목 우측 메타:
- API 설계: `.plans/design/api-design.md`
+  - project status
  - current sprint
  - latest deploy state (`MAIN DEPLOYED` / `READY FOR REDEPLOY` 등)
 - repo 링크 유지
-## 기준 구현 파일
+## 본문 구조
- `frontend/app/projects/[id]/page.tsx`
+### 좌측 메인
- `backend/src/projects/*`
+1. `DELIVERY FLOW`
   - Planning
   - Implement
   - QA
   - Merge to Main
   - Redeploy
 2. `SPRINT LEDGER`
   - Sprint 번호 / 이름 / 진행률 / task 수 / 완료 수
 3. `HOTFIX HISTORY`
   - Hotfix 번호 / 한 줄 요약 / 반영 상태
-## 현재 문제
+### 우측 보조
- `ASSIGNED NODES`가 실제 participant와 task assignee를 섞어 읽히게 한다
+1. `QA STATUS`
- 나랑이 단독 노출이 실제 active participant 확정처럼 보일 수 있다
+   - latest passed/failed
- 상단 overview, QA, deploy, flow, participant 시선 흐름이 답답하다
+   - blocker 수
- mobile `360px`, `390px`에서 flow/meta/git row가 쉽게 넘친다
+   - latest QA 문서 식별자
 2. `DEPLOY STATUS`
   - 현재 배포 기준 브랜치 (`main` 고정)
   - last deploy time
   - redeploy pending 여부
 3. `ASSIGNED NODES`
   - 하랑/나랑/다랑/이랑 각 역할 표기
-## 페이지 역할
+## UX 규칙
-핵심 질문:
+- Sprint와 Hotfix는 분리해서 보여주되, 흐름상 연결감은 유지
-1. 이 프로젝트는 delivery flow 어디에 있나
+- "보정/수정 이력" 같은 모호한 문구 대신 실제 요약 노출
-2. QA와 deploy 준비 상태는 어떤가
+- 모바일에서는 `DELIVERY FLOW → QA STATUS → DEPLOY STATUS → SPRINT/HOTFIX` 순으로 재배치
-3. 지금 왜 이 사람이 participant로 보이나
+- `NodeDot`는 실제 상태 기반으로 색이 바뀌어야 하며, 무조건 초록 고정이면 안 돼
 4. task assignee 집계와 current owner는 누구인가
 ## 정보 구조
 ### 상단 overview
 - project title
 - phase
 - current sprint
 - deploy status
 - repo link
 ### 본문 1열 우선 순서
 1. delivery overview
 2. QA status
 3. deploy status
 4. participants / current owners
 5. sprint ledger
 6. hotfix history
 7. git tabs
 desktop에서는 2열 배치를 허용하지만, participant 의미가 사이드카드 하나로 축소되면 안 된다.
 ## participant model
 ### section naming
 - `CURRENT OWNERS`
 - `PARTICIPANTS`
 - `TASK ASSIGNEES`
 `ASSIGNED NODES`는 사용하지 않는다.
 ### participant item 필수 정보
 - name
 - role label
 - why-visible badge
 - source badge
 - freshness or last-active label
 예시 why-visible:
 - `owner`
 - `current_implementer`
 - `reviewer`
 - `deploy_owner`
 - `task_assignee`
 - `latest_qa_author`
 ### current owner 규칙
 - 확정 owner가 없으면 `NO ACTIVE OWNER`
 - fallback sister를 owner로 주입하지 않음
 ### participant 규칙
 - why-visible 없는 participant 금지
 - participant가 0명이면 empty state 허용
 - assignee aggregate는 participant와 별도 목록 또는 metric으로 노출
 ## layout rules
 ### delivery flow
 - stage 5개를 유지해도 mobile에서는 1열 stack 사용
 - active stage만 강조
 - 긴 상태 키는 wrap 허용
 ### QA status
 - latest QA label
 - pass/fail/unknown
 - blocker count
 - short summary
 - source: `doc-derived` 또는 `snapshot`
 ### deploy status
 - branch
 - deploy state
 - latest deploy time
 - redeploy required
 ### participants area
 우선순위:
 1. current owners
 2. active participants
 3. task assignee aggregate
 참여자 카드에는 `reason/source`가 보여야 하고, 단순 live dot만으로 참여 확정처럼 보이면 안 된다.
 ## empty / null states
 | 상태 | 표현 |
 |---|---|
 | no current owner | `NO ACTIVE OWNER` |
 | no active participant | `NO CONFIRMED ACTIVE PARTICIPANT` |
 | no task assignee | `NO TASK ASSIGNEE DATA` |
 | no QA | `QA DOC 없음` |
 ## mobile 360 / 390 rules
 - flow card는 1열 stack
 - label/meta/git row는 wrap 허용
 - participant badge row는 wrap 필수
 - name, role, reason, source가 같은 줄 고정폭으로 잘리지 않게 한다
 - horizontal scroll 금지
 ## acceptance
 - `ASSIGNED NODES`가 truthful section 이름으로 교체된다
 - participant, current owner, task assignee가 다른 데이터 의미로 분리된다
 - 나랑이만 보여도 reason/source badge가 함께 붙어 확정 참여처럼 읽히지 않는다
 - `360px`, `390px`에서 flow card, meta, git row가 넘치지 않는다
 ## rollout note
 - participant summary는 backend contract를 먼저 나누고 렌더링을 맞춘다
 - 기존 `allTasks.assignee` unique set은 `TASK ASSIGNEES` 섹션으로만 후퇴시킨다
--- a/.plans/qa/SPRINT-018-review-1.md
+++ b/.plans/qa/SPRINT-018-review-1.md
@@ -1,92 +0,0 @@
 # SPRINT-018 review-1 QA draft
 ## 목적
 SPRINT-018의 truth contract가 `/office`, `/`, `/projects/[id]`, `/org` 전반에서 같은 의미로 보이는지 확인하는 QA 초안이야.
 ## 참고 문서
 - `.plans/sprints/SPRINT-018.md`
 - `.plans/design/api-design.md`
 - `.plans/design/ui/office-dashboard-design.md`
 - `.plans/design/ui/dashboard-design.md`
 - `.plans/design/ui/project-detail-design.md`
 - `.plans/design/ui/org-design.md`
 ## 공통 확인 항목
 - `working`, `owner`, `participant`, `source`, `freshness` 의미가 페이지 간 동일한가
 - `360px`, `390px`, `768px`, `1280px+`에서 horizontal scroll이 없는가
 - 긴 badge, 긴 meta, 긴 source 문구가 wrap되는가
 - null/empty 상태가 fallback 고정값으로 대체되지 않는가
 ## 상태 시나리오 매트릭스
 | 시나리오 | `/office` | `/` | `/projects/[id]` | `/org` |
 |---|---|---|---|---|
 | socket disconnected | connection off + snapshot/fallback 유지 | event stream off, freshness 유지 | 영향 없음 또는 snapshot note | 영향 없음 |
 | snapshot only | `snapshot only` 상태 구분 | `SNAPSHOT n AGO` 표기 | participant/source snapshot 표기 | org snapshot 표기 |
 | fallback only | fallback seed가 working 주입 안 함 | owner null 유지 | participant empty 유지 | fallback org snapshot 표기 |
 | connected idle | working 강조 없음 | sister row idle 표기 | participant로 과장 노출 안 함 | member idle 표기 |
 | active working | why active 근거 노출 | active focus만 짧게 표시 | current owner/participant reason 표기 | member active badge 표기 |
 | no active owner | 기본 owner 없음 | `NO ACTIVE OWNER` | `NO ACTIVE OWNER` | unit lead 미정 가능 |
 | empty chat | empty state 즉시 노출 | N/A | N/A | N/A |
 | JWT missing | send disabled reason 노출 | N/A | N/A | N/A |
 ## breakpoint 체크
 ### 360px
 #### `/office`
 - [ ] 첫 viewport에 summary, group blocks, quick action이 보인다
 - [ ] scene 축소판이 없다
 - [ ] chat/pipeline/health에서 horizontal scroll이 없다
 #### `/`
 - [ ] top chips가 wrap된다
 - [ ] owner 영역이 잘리지 않는다
 - [ ] sister/status/pipeline cards가 넘치지 않는다
 #### `/projects/[id]`
 - [ ] flow card가 1열 stack으로 보인다
 - [ ] participant reason/source badge가 wrap된다
 - [ ] git row가 넘치지 않는다
 #### `/org`
 - [ ] org summary와 team cards가 1열로 읽힌다
 - [ ] independent agents section이 누락되지 않는다
 ### 390px
 - [ ] 360px 체크를 모두 통과한다
 - [ ] 긴 한글 문장과 영문 source label이 wrap된다
 ### 768px
 - [ ] 2열 전환 시 시선 흐름이 깨지지 않는다
 - [ ] scene/context, pipeline, org units가 애매한 overflow 없이 재배치된다
 ### 1280px+
 - [ ] `/office` desktop group scene이 유지된다
 - [ ] `/` executive snapshot hierarchy가 분명하다
 - [ ] `/projects/[id]` participant 의미가 sidebar 축약으로 무너지지 않는다
 - [ ] `/org` functional teams + independent agents가 함께 읽힌다
 ## 페이지별 semantic checks
 ### `/office`
 - [ ] `working`이 fallback seed에서 나오지 않는다
 - [ ] default context가 선택 전에도 보인다
 - [ ] `connected idle`, `active working`, `snapshot only`, `fallback`, `offline`이 구분된다
 ### `/`
 - [ ] connection badge와 freshness badge가 분리된다
 - [ ] owner null 상태에서 특정 자매 fallback 고정 노출이 없다
 - [ ] source badge가 `mirrored event`, `snapshot`, `doc-derived`, `fallback` 중 하나로 읽힌다
 ### `/projects/[id]`
 - [ ] `ASSIGNED NODES`가 제거된다
 - [ ] participant와 task assignee가 분리된다
 - [ ] why-visible 없는 participant가 없다
 ### `/org`
 - [ ] hard-coded root tree 의존이 없다
 - [ ] independent agents가 별도 그룹으로 보인다
 - [ ] status/source/freshness vocabulary가 다른 페이지와 같다
 ## 남은 follow-up / scope cut
 - 실제 DTO 구현 후 field naming 최종 점검 필요
 - activity evidence가 부족한 환경에서 `working confidence` 정책 추가 검토 필요
 - independent agents data sourcing이 부족하면 v1에서는 snapshot 기반으로 제한 가능
--- a/.plans/sprints/SPRINT-018.md
+++ b/.plans/sprints/SPRINT-018.md
@@ -1,202 +0,0 @@
 # SPRINT-018: dashboard truth redesign
 ## 목표
 `/office`, `/`, `/projects/[id]`, `/org`를 하나의 운영 정보 구조로 재정렬하고, `connection`, `activity`, `participation`, `freshness`, `source`를 분리한 source-of-truth로 다시 잠근다.
 ## 한 줄 정의
 SPRINT-017의 모바일 개편 범위와 HOTFIX-006의 정합성 보정 범위를 이어서, 이번 Sprint는 **운영 의미를 다시 정의하는 문서 Sprint**다.
 ## 배경
 현재 구현은 화면마다 정보는 많지만, 운영 의미가 섞여 있다.
 - `/office`는 fallback seed가 `working`처럼 읽히는 구간이 있다
 - `/`는 `socket off`와 freshness가 분리되지 않아 전체 오류처럼 보일 수 있다
 - `/projects/[id]`는 unique assignee 목록을 실제 participant처럼 보여준다
 - `/org`는 회사형 조직도가 아니라 하드코딩된 자매 트리에 가깝다
 - 모바일 `360px`, `390px` 기준으로 긴 문장과 카드가 쉽게 넘친다
 ## 참고 문서
 - 실행 개요: `.plans/OVERVIEW.md`
 - 이전 Sprint: `.plans/sprints/SPRINT-017.md`
 - 관련 hotfix: `.plans/hotfix/HOTFIX-006.md`
 - API 설계: `.plans/design/api-design.md`
 - UI 설계:
  - `.plans/design/ui/office-dashboard-design.md`
  - `.plans/design/ui/dashboard-design.md`
  - `.plans/design/ui/project-detail-design.md`
  - `.plans/design/ui/org-design.md`
 - QA 초안: `.plans/qa/SPRINT-018-review-1.md`
 ## 페이지 역할 고정
 | 페이지 | 역할 | primary question | source priority |
 |---|---|---|---|
 | `/office` | live operations workspace | 지금 누가 연결되어 있고, 누가 실제로 일하고 있으며, 어디에 바로 개입해야 하나 | live → snapshot → fallback |
 | `/` | executive snapshot | 지금 운영 전체에서 가장 먼저 볼 변화가 무엇인가 | mirrored event + snapshot + doc-derived |
 | `/projects/[id]` | delivery detail | 이 프로젝트의 구현, QA, deploy, 참여 상태가 어디까지 왔나 | project snapshot + participant summary + task assignee aggregate |
 | `/org` | company org map | 누가 어떤 조직 단위에 속하고, independent agents는 어디에 위치하나 | org snapshot |
 ## 공통 용어 표
 | 용어 | 정의 | 금지 |
 |---|---|---|
 | `connection` | gateway/socket/runtime 연결 가능 여부 | activity와 같은 뜻으로 쓰기 |
 | `activity` | 최근 event, session, message, task evidence | connection만 보고 activity 추정 확정하기 |
 | `working` | 명시적 운영 상태. active task, current session, recent operator evidence가 있는 경우만 active 표시 | fallback seed나 단순 animated state로 주입하기 |
 | `owner` | 현재 책임자. 없으면 null 허용 | fallback 기본값으로 특정 자매 고정하기 |
 | `participant` | 현재 프로젝트/흐름에서 왜 보이는지 설명 가능한 사람 | unique assignee 목록을 그대로 participant로 표기하기 |
 | `assignee` | task 할당 기준 인원 | participant와 같은 섹션명 쓰기 |
 | `freshness` | 언제 생성, 동기화, 미러링되었는지 | socket on/off만으로 freshness 대체하기 |
 | `source` | 값이 어디서 왔는지 (`live`, `mirrored event`, `snapshot`, `doc-derived`, `fallback`) | 서로 다른 source를 같은 사실처럼 라벨링하기 |
 ## Sprint 원칙
 - `360px`, `390px` 기준 horizontal scroll 금지
 - 긴 badge, 긴 meta 문구, 긴 이유 문구는 wrap 기준으로 설계
 - fallback, snapshot, live를 같은 사실처럼 보이게 하지 않음
 - `working`, `owner`, `participant`는 추정치와 확정치를 분리해 표시
 - 페이지별 역할은 다르지만 source/freshness contract는 공유
 ## 범위
 ### 포함
 - SPRINT-018 운영 정보 구조와 용어 잠금
 - sisters/dashboard/project/org API truth contract 재설계 문서화
 - `/office`, `/`, `/projects/[id]`, `/org` UI 정보 구조 재설계
 - source badge, freshness label, empty/null 표현 기준 통일
 - 교차 페이지 QA 시나리오 초안 작성
 ### 제외
 - 실제 API 구현
 - DB schema migration
 - websocket namespace 변경
 - 새 역할 체계 추가
 - 조직도 authoring 툴 구축
 ## 실행 계획
 ### T1. 운영 정보 구조 및 source-of-truth 명세 잠금
 **대상 문서**
 - `.plans/OVERVIEW.md`
 - `.plans/sprints/SPRINT-018.md`
 - `.plans/design/api-design.md`
 - `.plans/design/ui/office-dashboard-design.md`
 - `.plans/design/ui/dashboard-design.md`
 **done when**
 - 페이지 역할이 고정된다
 - 공통 용어 표가 문서에 들어간다
 - 모바일 overflow 금지 규칙이 문서에 명시된다
 - fallback / null / empty 처리 기준이 문서에 들어간다
 ### T2. 자매 운영 상태 source-of-truth 계약 재설계
 **기준 구현 파일**
 - `backend/src/sisters/sisters.service.ts`
 - `backend/src/dashboard/dashboard.service.ts`
 - `frontend/app/office/page.tsx`
 - `frontend/app/page.tsx`
 **핵심 결정**
 - `connection`, `activity`, `working`, `lastActiveAt`, `source`, `freshness`를 분리 반환한다
 - `connected but idle`, `snapshot only`, `fallback`, `offline`을 구분 가능한 상태로 만든다
 - 프론트 fallback seed는 `working`을 직접 주입하지 않는다
 ### T3. 프로젝트 참여자 계약 분리 설계
 **기준 구현 파일**
 - `frontend/app/projects/[id]/page.tsx`
 - `backend/src/projects/*`
 **핵심 결정**
 - participant summary와 task assignee aggregate를 별도 필드로 분리한다
 - participant마다 `whyVisible`을 붙인다
 - active participant가 없으면 null/empty를 그대로 보여준다
 ### T4. 조직도 데이터 계약 재설계
 **기준 구현 파일**
 - `backend/src/sisters/sister-detail.service.ts`
 - `frontend/app/org/page.tsx`
 **핵심 결정**
 - `/api/org`는 `orgUnits`, `members`, `reportingLines`, `independentAgents`를 반환한다
 - sister-owned agents와 independent agents를 분리한다
 - 특정 자매를 하드코딩한 고정 트리에 의존하지 않는다
 ### T5. `/office` shell, scene, context 재배치
 **기준 구현 파일**
 - `frontend/app/office/page.tsx`
 - `frontend/components/office/OfficeScene.tsx`
 - `frontend/components/office/ContextPanel.tsx`
 **핵심 결정**
 - desktop은 group/scene 중심 운영 레이아웃으로 재구성한다
 - mobile(`<768`)은 `summary → group blocks → detail flow`로 바꾼다
 - 첫 진입 시 빈 context 대신 운영 summary를 보여준다
 ### T6. `/office` 하위 패널 모바일 정보 밀도 재정렬
 **기준 구현 파일**
 - `frontend/components/office/ChatWorkspace.tsx`
 - `frontend/components/office/PipelinePanel.tsx`
 - `frontend/components/office/ServerHealthPanel.tsx`
 **핵심 결정**
 - horizontal scroll을 제거한다
 - `JWT missing`, `runtime checking`, `empty`, `error`, `send disabled`를 즉시 읽히게 한다
 - 상태 라벨 톤을 패널 간 통일한다
 ### T7. 메인 대시보드 운영 의미 재정렬
 **기준 구현 파일**
 - `frontend/app/page.tsx`
 **핵심 결정**
 - socket connection과 freshness를 분리한다
 - active owner가 없을 때 fallback owner를 고정 노출하지 않는다
 - 주요 섹션에 source 라벨을 일관되게 붙인다
 ### T8. 프로젝트 상세 레이아웃과 참여자 표현 재설계
 **기준 구현 파일**
 - `frontend/app/projects/[id]/page.tsx`
 **핵심 결정**
 - `ASSIGNED NODES`를 truthful section으로 교체한다
 - participant, current owner, task assignee를 분리한다
 - 나랑이 단독 노출도 확정 참여처럼 읽히지 않게 `reason/source`를 붙인다
 ### T9. 회사형 조직도 UI 전면 재설계
 **기준 구현 파일**
 - `frontend/app/org/page.tsx`
 **핵심 결정**
 - HQ, functional teams, members, independent agents 구조로 재배치한다
 - terminal tree 한 벌이 아니라 mobile에서도 읽히는 카드형 org map을 만든다
 ### T10. 교차 페이지 QA 및 문서 마감
 **산출물**
 - `.plans/qa/SPRINT-018-review-1.md`
 - `.plans/OVERVIEW.md`
 - `.plans/sprints/SPRINT-018.md`
 **done when**
 - `/office`, `/`, `/projects/[id]`, `/org`를 `360 / 390 / 768 / 1280+`로 분리 기록한다
 - `socket disconnected`, `snapshot only`, `fallback only`, `connected idle`, `active working`, `no active owner`, `empty chat`, `JWT missing`를 검증한다
 - `working / owner / participant / source badge` 의미가 페이지 간 같게 보이는지 확인한다
 ## acceptance
 - 각 페이지 역할과 공통 용어가 문서에 고정되어 있다
 - API 문서에 `connection / activity / working / freshness / source` 분리 계약이 있다
 - `/office`, `/`, `/projects/[id]`, `/org` UI 문서가 truthful empty/null 상태를 포함한다
 - 모바일 `360px`, `390px`에서 overflow 금지 규칙이 모든 관련 문서에 반영되어 있다
 - QA 문서가 breakpoint와 상태 시나리오를 함께 다룬다
 ## rollout
 1. 문서 기준 잠금
 2. backend contract 구현
 3. `/office`와 `/` state badge 정리
 4. project detail participant model 반영
 5. org contract + UI 반영
 6. 교차 페이지 QA
 ## out-of-scope follow-up
 - activity evidence를 더 세밀하게 저장하는 schema 정리
 - participant reason 자동 생성 규칙 정교화
 - org map edit UI
 - source badge analytics
 ## handoff 메모
 - SPRINT-017 문서는 `/office` mobile IA 기준으로 유지한다. SPRINT-018은 그 위에 cross-page truth contract를 추가하는 Sprint다.
 - HOTFIX-006의 `socket / freshness / doc-derived` 문제는 이번 Sprint에서 메인 대시보드 전체 계약으로 승격한다.
 - 구현 시 문서보다 더 센 추정치 표현이 생기면 문서 기준이 우선이다.
--- a/backend/.claude/state/tool-failure-counter.txt
+++ b/backend/.claude/state/tool-failure-counter.txt
@@ -0,0 +1 @@
 1 1775809467
--- a/backend/pnpm-lock.yaml
+++ b/backend/pnpm-lock.yaml
--- a/backend/src/app.module.ts
+++ b/backend/src/app.module.ts
@@ -19,6 +19,7 @@ import { CostsModule } from './costs/costs.module';
 import { GiteaSyncModule } from './gitea-sync/gitea-sync.module';
 import { SettingsModule } from './settings/settings.module';
 import { DashboardModule } from './dashboard/dashboard.module';
 import { RailsModule } from './rails/rails.module';
@Module({
  imports: [
@@ -40,6 +41,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
    GiteaSyncModule,
    SettingsModule,
    DashboardModule,
    RailsModule,
  ],
  controllers: [AppController],
  providers: [AppService],
--- a/backend/src/events/events.gateway.ts
+++ b/backend/src/events/events.gateway.ts
@@ -114,6 +114,33 @@ export class EventsGateway
    this.broadcastActivity(record);
  }
  // ── Rails orchestrator events ──────────────────────────────────────
  @OnEvent('rails.pipelines.snapshot')
  handleRailsPipelinesSnapshot(payload: { pipelines: unknown[] }) {
    this.server.emit('rails:pipelines', {
      pipelines: payload.pipelines,
      ts: Date.now(),
    });
  }
  @OnEvent('rails.pipeline.updated')
  handleRailsPipelineUpdated(payload: { pipeline: unknown }) {
    this.server.emit('rails:pipeline:updated', {
      pipeline: payload.pipeline,
      ts: Date.now(),
    });
  }
  @OnEvent('rails.subtasks.updated')
  handleRailsSubTasksUpdated(payload: { pipelineId: string; tree: unknown }) {
    this.server.emit('rails:subtasks', {
      pipelineId: payload.pipelineId,
      tree: payload.tree,
      ts: Date.now(),
    });
  }
  /** 연결된 클라이언트 수 */
  getClientCount(): number {
    return this.server?.sockets?.sockets?.size ?? 0;
--- a/backend/src/rails/rails.controller.ts
+++ b/backend/src/rails/rails.controller.ts
@@ -0,0 +1,67 @@
 import {
  Body,
  Controller,
  Get,
  HttpException,
  HttpStatus,
  Param,
  Post,
  Query,
  UseGuards,
 } from '@nestjs/common';
 import { RailsService } from './rails.service';
 import { JwtGuard } from '../auth/jwt.guard';
@Controller('api/rails')
@UseGuards(JwtGuard)
 export class RailsController {
  constructor(private readonly rails: RailsService) {}
  @Get('health')
  health() {
    return this.rails.health();
  }
  @Get('pipelines')
  async listPipelines(@Query('limit') limit?: string) {
    const n = limit ? parseInt(limit, 10) : 20;
    const pipelines = await this.rails.listPipelines(Number.isFinite(n) ? n : 20);
    return { pipelines };
  }
  @Get('pipelines/:id')
  async pipelineDetail(@Param('id') id: string) {
    const detail = await this.rails.getPipeline(id);
    if (!detail) {
      throw new HttpException('pipeline not found', HttpStatus.NOT_FOUND);
    }
    return detail;
  }
  @Get('pipelines/:id/sub-tasks')
  async subTaskTree(@Param('id') id: string) {
    const tree = await this.rails.getSubTaskTree(id);
    return { pipelineId: id, tree };
  }
  @Post('pipelines/start')
  async start(
    @Body() body: { project: string; requirements: string },
  ) {
    if (!body?.project || typeof body.project !== 'string') {
      throw new HttpException('project required', HttpStatus.BAD_REQUEST);
    }
    return this.rails.startPipeline({
      project: body.project,
      requirements: body.requirements ?? '',
    });
  }
  @Post('pipelines/:id/abort')
  async abort(
    @Param('id') id: string,
    @Body() body: { reason?: string },
  ) {
    return this.rails.abortPipeline(id, body?.reason ?? 'aborted via dashboard');
  }
 }
--- a/backend/src/rails/rails.module.ts
+++ b/backend/src/rails/rails.module.ts
@@ -0,0 +1,14 @@
 import { Module } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
 import { RailsService } from './rails.service';
 import { RailsController } from './rails.controller';
 import { RailsScheduler } from './rails.scheduler';
 import { AuthModule } from '../auth/auth.module';
@Module({
  imports: [ConfigModule, AuthModule],
  controllers: [RailsController],
  providers: [RailsService, RailsScheduler],
  exports: [RailsService],
 })
 export class RailsModule {}
--- a/backend/src/rails/rails.scheduler.ts
+++ b/backend/src/rails/rails.scheduler.ts
@@ -0,0 +1,84 @@
 import { Injectable, Logger, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
 import { EventEmitter2 } from '@nestjs/event-emitter';
 import { RailsService, type RailsPipelineSummary } from './rails.service';
 /**
 * Polls rails every N seconds for active pipelines and emits events
 * that the EventsGateway broadcasts over Socket.IO.
 *
 * Events emitted (via EventEmitter2):
 *   rails.pipeline.updated  — single pipeline changed state
 *   rails.pipelines.snapshot — full list snapshot
 *   rails.subtasks.updated  — sub-task tree for an active pipeline
 */
@Injectable()
 export class RailsScheduler implements OnModuleInit, OnModuleDestroy {
  private readonly logger = new Logger(RailsScheduler.name);
  private readonly intervalMs = 2000;
  private timer: NodeJS.Timeout | null = null;
  private lastSnapshot = new Map<string, string>(); // id → state
  private activePipelines = new Set<string>();
  constructor(
    private readonly rails: RailsService,
    private readonly emitter: EventEmitter2,
  ) {}
  onModuleInit(): void {
    this.logger.log(`Rails poller starting (interval ${this.intervalMs}ms)`);
    this.start();
  }
  onModuleDestroy(): void {
    if (this.timer) clearInterval(this.timer);
  }
  private start(): void {
    this.timer = setInterval(() => {
      this.tick().catch((err) => {
        this.logger.warn(`poll error: ${(err as Error).message}`);
      });
    }, this.intervalMs);
  }
  private async tick(): Promise<void> {
    const pipelines = await this.rails.listPipelines(50);
    // Detect changes
    const changed: RailsPipelineSummary[] = [];
    for (const p of pipelines) {
      const last = this.lastSnapshot.get(p.id);
      if (last !== p.currentState) {
        changed.push(p);
        this.lastSnapshot.set(p.id, p.currentState);
      }
      // Track active (non-terminal)
      if (!['done', 'aborted'].includes(p.currentState)) {
        this.activePipelines.add(p.id);
      } else {
        this.activePipelines.delete(p.id);
      }
    }
    // Emit full snapshot every tick (cheap, dashboards love fresh data)
    this.emitter.emit('rails.pipelines.snapshot', { pipelines });
    // Emit per-pipeline updates for changed ones
    for (const p of changed) {
      this.emitter.emit('rails.pipeline.updated', { pipeline: p });
    }
    // Fetch sub-task trees for active pipelines (throttled)
    for (const id of this.activePipelines) {
      try {
        const tree = await this.rails.getSubTaskTree(id);
        this.emitter.emit('rails.subtasks.updated', {
          pipelineId: id,
          tree,
        });
      } catch {
        // ignore transient errors
      }
    }
  }
 }
--- a/backend/src/rails/rails.service.ts
+++ b/backend/src/rails/rails.service.ts
@@ -0,0 +1,134 @@
 import { Injectable, Logger } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 export interface RailsPipelineSummary {
  id: string;
  projectName: string;
  currentState: string;
  createdAt: string;
  updatedAt: string;
 }
 export interface RailsSubTaskNode {
  id: string;
  parentId: string | null;
  role: string;
  agentName: string;
  title: string;
  state: string;
  complexityScore: number | null;
  complexityTier: string | null;
  model: string;
  startedAt: string | null;
  completedAt: string | null;
  createdAt: string;
  children: RailsSubTaskNode[];
 }
 export interface RailsPipelineDetail {
  state: string;
  context: Record<string, unknown>;
  transitions: Array<{
    fromState: string;
    toState: string;
    eventType: string;
    timestamp: string;
  }>;
 }
 /**
 * Thin HTTP client that reads from hanarang-rails orchestrator API.
 * The dashboard is a read-only consumer — it never writes to rails DB directly.
 */
@Injectable()
 export class RailsService {
  private readonly logger = new Logger(RailsService.name);
  private readonly baseUrl: string;
  constructor(private readonly config: ConfigService) {
    this.baseUrl = this.config.get<string>('RAILS_API_URL') ?? 'http://127.0.0.1:18800';
  }
  async listPipelines(limit = 20): Promise<RailsPipelineSummary[]> {
    const data = await this.fetchJson<{ pipelines: RailsPipelineSummary[] }>(
      `/pipelines?limit=${limit}`,
    );
    return data.pipelines ?? [];
  }
  async getPipeline(id: string): Promise<RailsPipelineDetail | null> {
    try {
      return await this.fetchJson<RailsPipelineDetail>(`/pipelines/${id}`);
    } catch (err) {
      this.logger.warn(`pipeline ${id} fetch failed: ${(err as Error).message}`);
      return null;
    }
  }
  async getSubTaskTree(pipelineId: string): Promise<RailsSubTaskNode[]> {
    const data = await this.fetchJson<{ tree: RailsSubTaskNode[] }>(
      `/api/pipelines/${pipelineId}/sub-tasks`,
    );
    return data.tree ?? [];
  }
  async startPipeline(input: {
    project: string;
    requirements: string;
  }): Promise<{ pipelineId: string; finalState: string; transitions: number }> {
    return this.postJson('/pipelines/start', input);
  }
  async abortPipeline(id: string, reason: string): Promise<{ id: string; state: string }> {
    return this.postJson(`/pipelines/${id}/abort`, { reason });
  }
  async health(): Promise<{ ok: boolean; service?: string }> {
    try {
      return await this.fetchJson('/health');
    } catch {
      return { ok: false };
    }
  }
  private async fetchJson<T>(path: string): Promise<T> {
    const url = `${this.baseUrl}${path}`;
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), 8000);
    try {
      const res = await fetch(url, { signal: controller.signal });
      clearTimeout(timer);
      if (!res.ok) {
        const text = await res.text();
        throw new Error(`rails GET ${path} → ${res.status}: ${text.slice(0, 200)}`);
      }
      return (await res.json()) as T;
    } catch (err) {
      clearTimeout(timer);
      throw err;
    }
  }
  private async postJson<T>(path: string, body: unknown): Promise<T> {
    const url = `${this.baseUrl}${path}`;
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), 600_000);
    try {
      const res = await fetch(url, {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify(body),
        signal: controller.signal,
      });
      clearTimeout(timer);
      if (!res.ok) {
        const text = await res.text();
        throw new Error(`rails POST ${path} → ${res.status}: ${text.slice(0, 200)}`);
      }
      return (await res.json()) as T;
    } catch (err) {
      clearTimeout(timer);
      throw err;
    }
  }
 }
--- a/backend/src/sisters/sisters.service.ts
+++ b/backend/src/sisters/sisters.service.ts
@@ -43,30 +43,6 @@ export interface SisterRuntimeSnapshot {
  subagents: RuntimeSubagent[];
 }
 export interface SisterConnectionState {
  gateway: 'connected' | 'disconnected' | 'unknown';
  runtime: 'connected' | 'disconnected' | 'unknown';
 }
 export interface SisterActivityState {
  state: 'active' | 'idle' | 'unknown';
  label: string | null;
  lastActiveAt: string | null;
 }
 export interface SisterWorkingState {
  state: 'active' | 'idle' | 'unknown';
  confidence: 'confirmed' | 'inferred' | 'none';
  reason: string | null;
  label: string | null;
 }
 export interface SisterFreshness {
  lastSnapshotAt: string | null;
 }
 export type SisterSource = 'live' | 'snapshot' | 'fallback';
 export interface SisterStatus {
  id: number;
  name: string;
@@ -80,11 +56,6 @@ export interface SisterStatus {
  activeSessionLabel: string | null;
  gatewayConnected: boolean;
  subagents: RuntimeSubagent[];
  connection: SisterConnectionState;
  activity: SisterActivityState;
  working: SisterWorkingState;
  source: SisterSource;
  freshness: SisterFreshness;
 }
 interface RuntimeProbeResult {
@@ -328,8 +299,6 @@ export class SistersService {
          .catch(() => {});
      }
      const isActive = liveState === 'thinking' || liveState === 'tool_calling' || liveState === 'speaking';
      return {
        id: sister.id,
        name: sister.name,
@@ -343,25 +312,6 @@ export class SistersService {
        activeSessionLabel: runtime.activeSessionLabel ?? null,
        gatewayConnected,
        subagents: runtime.subagents ?? [],
        connection: {
          gateway: gatewayConnected ? 'connected' : 'disconnected',
          runtime: gatewayConnected ? 'connected' : 'disconnected',
        },
        activity: {
          state: isActive ? 'active' : 'idle',
          label: runtime.activeSessionLabel ?? (isActive ? 'Active session' : 'No recent operator event'),
          lastActiveAt: now.toISOString(),
        },
        working: {
          state: isActive ? 'active' : 'idle',
          confidence: isActive ? 'confirmed' : 'none',
          reason: isActive ? 'active_session' : null,
          label: runtime.currentTask ?? null,
        },
        source: 'live' as SisterSource,
        freshness: {
          lastSnapshotAt: now.toISOString(),
        },
      };
    } catch {
      this.logger.warn(`Failed to check status for ${sister.name}`);
@@ -431,25 +381,6 @@ export class SistersService {
      activeSessionLabel: null,
      gatewayConnected: false,
      subagents: [],
      connection: {
        gateway: 'disconnected',
        runtime: 'disconnected',
      },
      activity: {
        state: 'unknown',
        label: null,
        lastActiveAt: sister.lastSeen?.toISOString() ?? null,
      },
      working: {
        state: 'unknown',
        confidence: 'none',
        reason: null,
        label: null,
      },
      source: 'snapshot' as SisterSource,
      freshness: {
        lastSnapshotAt: sister.lastSeen?.toISOString() ?? null,
      },
    };
  }
--- a/frontend/.claude/sessions/.last_inbox_check
+++ b/frontend/.claude/sessions/.last_inbox_check
@@ -0,0 +1 @@
 1775809622
--- a/frontend/.claude/state/tool-failure-counter.txt
+++ b/frontend/.claude/state/tool-failure-counter.txt
@@ -0,0 +1 @@
 1 1775809627
--- a/frontend/app/office/page.tsx
+++ b/frontend/app/office/page.tsx
@@ -128,28 +128,13 @@ const SISTER_ROLES: Record<SisterName, string> = {
 const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
 const SUBAGENT_COUNT = Object.values(SUBAGENT_DEFS).reduce((total, defs) => total + defs.length, 0);
 const GROUP_DEFS: { id: string; label: string; members: SisterName[]; description: string }[] = [
  { id: 'planning', label: 'Planning', members: ['harang'], description: 'Orchestration & Planning' },
  { id: 'delivery', label: 'Delivery', members: ['narang'], description: 'Implementation' },
  { id: 'review', label: 'Review', members: ['darang'], description: 'QA & Review' },
  { id: 'deploy', label: 'Deploy', members: ['erang'], description: 'Infra & Deploy' },
 ];
 const FALLBACK_SISTERS: SisterApiItem[] = [
-  { name: 'harang', status: 'unknown', role: SISTER_ROLES.harang, currentTask: null },
+  { name: 'harang', status: 'working', role: SISTER_ROLES.harang, currentTask: 'runtime snapshot 확인 중' },
-  { name: 'narang', status: 'unknown', role: SISTER_ROLES.narang, currentTask: null },
+  { name: 'narang', status: 'working', role: SISTER_ROLES.narang, currentTask: '개발 세션 상태 동기화 중' },
-  { name: 'darang', status: 'unknown', role: SISTER_ROLES.darang, currentTask: null },
+  { name: 'darang', status: 'online', role: SISTER_ROLES.darang, currentTask: '검증 상태 확인 중' },
-  { name: 'erang', status: 'unknown', role: SISTER_ROLES.erang, currentTask: null },
+  { name: 'erang', status: 'online', role: SISTER_ROLES.erang, currentTask: '배포 런타임 확인 중' },
 ];
 function truthfulStateLabel(state: AgentState, source: 'live' | 'snapshot' | 'fallback'): string {
  if (source === 'fallback') return 'fallback';
  if (state === 'error') return 'offline';
  if (state === 'tool_calling' || state === 'thinking' || state === 'speaking') return 'active working';
  if (source === 'snapshot') return 'snapshot only';
  return 'connected idle';
 }
 function statusToAgentState(status: SisterApiItem['status'], hasTask: boolean): AgentState {
  if (status === 'offline') return 'error';
  if (status === 'working') return hasTask ? 'tool_calling' : 'thinking';
@@ -182,23 +167,9 @@ function mergeSisterData(
  return SISTER_ORDER.map((name) => {
    const prev = previousMap.get(name);
-    const status = statusMap.get(name) ?? prev;
+    const status = statusMap.get(name) ?? prev ?? FALLBACK_SISTERS.find((item) => item.name === name)!;
    const live = runtimeMap.get(name);
    // If we have no data at all for this sister, build a minimal honest entry
    if (!status) {
      return {
        name,
        status: 'unknown' as const,
        role: SISTER_ROLES[name],
        currentTask: live?.currentTask ?? null,
        liveState: live?.mainState,
        activeSessionLabel: live?.activeSessionLabel ?? null,
        gatewayConnected: live?.gatewayConnected ?? false,
        subagents: live?.subagents ?? [],
      };
    }
    return {
      ...prev,
      ...status,
@@ -396,9 +367,13 @@ const MobileFlow = styled.div`
 `;
 const MobileSisterGrid = styled.div`
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  @media (max-width: 359px) {
    grid-template-columns: 1fr;
  }
 `;
 const STATE_CARD_COLORS: Record<AgentState, string> = {
@@ -522,72 +497,6 @@ const MobileActionBtn = styled.button`
  }
 `;
 const MobileGroupBlock = styled.button<{ $hasActive: boolean; $expanded: boolean }>`
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid ${({ $hasActive }) => ($hasActive ? '#2979FF' : 'var(--border-color)')};
  background: ${({ $expanded }) => ($expanded ? 'rgba(255,255,255,0.04)' : 'var(--bg-surface)')};
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-primary);
  width: 100%;
 `;
 const MobileGroupHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
 `;
 const MobileGroupLabel = styled.div`
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
 const MobileGroupMeta = styled.div`
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
 `;
 const MobileGroupChip = styled.span<{ $tone: 'active' | 'idle' | 'offline' | 'fallback' }>`
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border: 1px solid ${({ $tone }) =>
    $tone === 'active' ? '#2979FF' : $tone === 'idle' ? '#00BFA5' : $tone === 'offline' ? '#FF1744' : '#555'};
  color: ${({ $tone }) =>
    $tone === 'active' ? '#2979FF' : $tone === 'idle' ? '#00BFA5' : $tone === 'offline' ? '#FF1744' : '#777'};
  white-space: nowrap;
 `;
 const MobileGroupDetail = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color);
 `;
 const MobileOpsSummary = styled.div`
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
 `;
 const MobileContextInline = styled.div`
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
@@ -789,10 +698,10 @@ export default function OfficePage() {
        <PageMeta>4자매 · {SUBAGENT_COUNT} 서브에이전트 · 협업 관제</PageMeta>
        <FreshnessBar>
          <FreshnessBadge $type={sisterDataMode}>
-            source: {sisterDataMode}
+            자매: {sisterDataMode === 'live' ? 'live · ws' : sisterDataMode === 'snapshot' ? 'snapshot · poll' : 'fallback · doc'}
          </FreshnessBadge>
          <FreshnessBadge $type={subagentMode === 'live' ? 'live' : 'fallback'}>
-            agents: {subagentMode}
+            서브에이전트: {subagentMode === 'live' ? 'live · runtime' : 'fallback'}
          </FreshnessBadge>
          <FreshnessBadge $type="snapshot">pipeline: snapshot</FreshnessBadge>
        </FreshnessBar>
@@ -827,93 +736,97 @@ export default function OfficePage() {
      {/* ─── Mobile layout (<1280px) ─── */}
      <MobileFlow>
-        {/* 1. Operational summary — always first */}
+        {/* 1. Sister status cards */}
-        <MobileOpsSummary>
+        <MobileSisterGrid>
-          <MobileSectionEyebrow>운영 요약</MobileSectionEyebrow>
+          {sisterNodes.map((sister) => {
            const isSelected = selected?.type === 'sister' && selected.name === sister.name;
            return (
              <MobileSisterCard
                key={sister.name}
                $state={sister.state}
                $selected={isSelected}
                aria-pressed={isSelected}
                onClick={() => handleSelectSister(sister.name)}
              >
                <SisterAvatar name={sister.name} size={32} />
                <MobileCardMeta>
                  <MobileCardName>{sister.displayName}</MobileCardName>
                  <MobileCardState $state={sister.state}>{sister.state}</MobileCardState>
                  {sister.currentTask && <MobileCardTask>{sister.currentTask}</MobileCardTask>}
                </MobileCardMeta>
              </MobileSisterCard>
            );
          })}
        </MobileSisterGrid>
        {/* 2. Current focus + health summary */}
        <MobileFocusSection>
          <MobileSectionEyebrow>current focus</MobileSectionEyebrow>
          <MobileFocusTitle>{pipeline.activeTask}</MobileFocusTitle>
          <MobileFocusDetail>{pipeline.focus}</MobileFocusDetail>
          <MobileHealthRow>
            <MobileHealthChip $ok={sisterDataMode === 'live'}>
-              {sisterDataMode === 'live' ? 'live' : sisterDataMode === 'snapshot' ? 'snapshot' : 'fallback'}
+              ws: {sisterDataMode === 'live' ? 'connected' : 'disconnected'}
            </MobileHealthChip>
            <MobileHealthChip $ok={onlineCount >= 3}>
-              {onlineCount}/{SISTER_ORDER.length} connected
+              {onlineCount}/{SISTER_ORDER.length} online
            </MobileHealthChip>
            <MobileHealthChip $ok={pipeline.deployState !== 'blocked'}>
              deploy: {pipeline.deployState}
            </MobileHealthChip>
          </MobileHealthRow>
        </MobileFocusSection>
        {/* 3. Quick actions */}
        <MobileQuickActions>
          {SISTER_ORDER.map((name) => (
            <MobileActionBtn key={name} onClick={() => handleOpenChat(name)}>
-                {SISTER_DISPLAY[name]}
+              {SISTER_DISPLAY[name]} 채팅
            </MobileActionBtn>
          ))}
        </MobileQuickActions>
        </MobileOpsSummary>
-        {/* 2. Group blocks — group mental model, not 4 individual cards */}
+        {/* 4. Inline context — always show default, expand on selection */}
-        <MobileSisterGrid>
+        <MobileContextInline>
-          {GROUP_DEFS.map((group) => {
+          <MobileContextHeader>
-            const groupSisters = group.members.map((m) => sisterNodes.find((s) => s.name === m)).filter(Boolean) as typeof sisterNodes;
+            <MobileContextTitle>
-            const hasActive = groupSisters.some((s) => s.state === 'tool_calling' || s.state === 'thinking' || s.state === 'speaking');
+              {selected && selectedSisterNode
-            const workingCount = groupSisters.filter((s) => s.state === 'tool_calling' || s.state === 'thinking' || s.state === 'speaking').length;
+                ? `${selected.type === 'sister' ? selectedSisterNode.displayName : selectedSubagent?.label ?? ''} · context`
-            const connectedCount = groupSisters.filter((s) => s.state !== 'error').length;
+                : '현재 포커스'}
-            const isExpanded = selected?.type === 'sister' && group.members.includes(selected.name);
+            </MobileContextTitle>
-            const groupState = truthfulStateLabel(
+            {selected && <MobileCloseBtn onClick={() => setSelected(null)}>✕</MobileCloseBtn>}
-              groupSisters[0]?.state ?? 'idle',
+          </MobileContextHeader>
-              sisterDataMode,
+          <MobileSelectedSummary>
-            );
+            <SisterAvatar name={(selectedSisterNode ?? sisterNodes[0])?.name ?? 'harang'} size={28} />
            return (
              <MobileGroupBlock
                key={group.id}
                $hasActive={hasActive}
                $expanded={isExpanded}
                onClick={() => handleSelectSister(group.members[0])}
              >
                <MobileGroupHeader>
                  <MobileGroupLabel>{group.label}</MobileGroupLabel>
                  <MobileGroupMeta>
                    <MobileGroupChip $tone={hasActive ? 'active' : connectedCount > 0 ? 'idle' : sisterDataMode === 'fallback' ? 'fallback' : 'offline'}>
                      {groupState}
                    </MobileGroupChip>
                    {workingCount > 0 && <MobileGroupChip $tone="active">{workingCount} working</MobileGroupChip>}
                  </MobileGroupMeta>
                </MobileGroupHeader>
                <MobileFocusDetail>{group.description}</MobileFocusDetail>
                {isExpanded && (
                  <MobileGroupDetail>
                    {groupSisters.map((sister) => (
                      <MobileSelectedSummary key={sister.name}>
                        <SisterAvatar name={sister.name} size={28} />
            <MobileSelectedMeta>
-                          <MobileSelectedName>{sister.displayName}</MobileSelectedName>
+              <MobileSelectedName>
                {selected && selectedSisterNode
                  ? (selected.type === 'sister' ? selectedSisterNode.displayName : selectedSubagent?.label)
                  : sisterNodes.find((s) => s.state === 'tool_calling' || s.state === 'thinking')?.displayName ?? sisterNodes[0]?.displayName ?? '—'}
              </MobileSelectedName>
              <MobileSelectedRole>
-                            {truthfulStateLabel(sister.state, sisterDataMode)}
+                {selectedSisterNode?.role ?? sisterNodes[0]?.role ?? ''}
                            {sister.currentTask ? ` · ${sister.currentTask}` : ''}
              </MobileSelectedRole>
            </MobileSelectedMeta>
          </MobileSelectedSummary>
-                    ))}
+          {((selectedSisterNode?.currentTask ?? sisterNodes.find((s) => s.state === 'tool_calling' || s.state === 'thinking')?.currentTask)) && (
-                    <MobileQuickActions>
+            <MobileTaskBox>
-                      <MobileActionBtn onClick={(e) => { e.stopPropagation(); handleOpenChat(group.members[0]); }}>채팅</MobileActionBtn>
+              {selectedSisterNode?.currentTask ?? sisterNodes.find((s) => s.state === 'tool_calling' || s.state === 'thinking')?.currentTask ?? ''}
-                    </MobileQuickActions>
+            </MobileTaskBox>
                  </MobileGroupDetail>
          )}
-              </MobileGroupBlock>
+          <MobileQuickActions>
-            );
+            <MobileActionBtn onClick={() => handleOpenChat((selectedSisterNode ?? sisterNodes[0])?.name ?? 'harang')}>채팅</MobileActionBtn>
-          })}
+          </MobileQuickActions>
-        </MobileSisterGrid>
+        </MobileContextInline>
-        {/* 3. Chat (if open) */}
+        {/* 5. Chat (if open) */}
        {chatSister && (
          <MobileChatArea>
            <ChatWorkspace initialSister={chatSister} onClose={() => setChatSister(null)} />
          </MobileChatArea>
        )}
-        {/* 4. Pipeline panel */}
+        {/* 6. Pipeline panel */}
        <PipelinePanel
          activeTask={pipeline.activeTask}
          focus={pipeline.focus}
@@ -924,7 +837,7 @@ export default function OfficePage() {
          freshness={`generated ${formatGeneratedAt(freshness.generatedAt)}`}
        />
-        {/* 5. Server health */}
+        {/* 7. Server health */}
        <ServerHealthPanel
          servers={serverEntries}
          dataMode={sisterDataMode}
--- a/frontend/app/org/page.tsx
+++ b/frontend/app/org/page.tsx
@@ -3,329 +3,137 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { API_URL } from '@/lib/config';
 import SisterAvatar from '@/components/common/SisterAvatar';
-// ─── Types ───
+// ─── Styled ───
-
+const MainViewport = styled.div`
 interface OrgUnit {
  id: string;
  name: string;
  kind: 'hq' | 'functional_team';
  lead: string | null;
  memberIds: string[];
 }
 interface OrgMember {
  id: string;
  type: 'sister' | 'agent';
  role: string;
  status: { connection: string; working: string };
  source: string;
  freshness: { lastSnapshotAt: string | null };
 }
 interface IndependentAgent {
  id: string;
  name: string;
  ownerSister: string | null;
  source: string;
 }
 interface OrgApiData {
  owner?: { name: string; role: string };
  sisters?: Array<{
    name: string;
    role: string;
    status?: string;
  }>;
  orgUnits?: OrgUnit[];
  members?: OrgMember[];
  reportingLines?: Array<{ from: string; to: string; kind: string }>;
  independentAgents?: IndependentAgent[];
 }
 // ─── Fallback org structure (data-driven, not hardcoded tree) ───
 const FALLBACK_ORG_UNITS: OrgUnit[] = [
  { id: 'hq', name: '하나랑 HQ', kind: 'hq', lead: 'harang', memberIds: ['harang'] },
  { id: 'delivery', name: 'Delivery', kind: 'functional_team', lead: 'narang', memberIds: ['narang'] },
  { id: 'review', name: 'QA / Review', kind: 'functional_team', lead: 'darang', memberIds: ['darang'] },
  { id: 'infra', name: 'Infra / Deploy', kind: 'functional_team', lead: 'erang', memberIds: ['erang'] },
 ];
 const FALLBACK_MEMBERS: OrgMember[] = [
  { id: 'harang', type: 'sister', role: 'Orchestrator', status: { connection: 'unknown', working: 'unknown' }, source: 'fallback', freshness: { lastSnapshotAt: null } },
  { id: 'narang', type: 'sister', role: 'Generator', status: { connection: 'unknown', working: 'unknown' }, source: 'fallback', freshness: { lastSnapshotAt: null } },
  { id: 'darang', type: 'sister', role: 'Evaluator', status: { connection: 'unknown', working: 'unknown' }, source: 'fallback', freshness: { lastSnapshotAt: null } },
  { id: 'erang', type: 'sister', role: 'Infra Manager', status: { connection: 'unknown', working: 'unknown' }, source: 'fallback', freshness: { lastSnapshotAt: null } },
 ];
 const FALLBACK_INDEPENDENT_AGENTS: IndependentAgent[] = [
  { id: 'security-auditor', name: 'security-auditor', ownerSister: 'darang', source: 'fallback' },
  { id: 'monitoring', name: 'monitoring', ownerSister: 'erang', source: 'fallback' },
 ];
 const MEMBER_DISPLAY: Record<string, string> = {
  harang: '하랑이', narang: '나랑이', darang: '다랑이', erang: '이랑이',
 };
 const LXC_ID: Record<string, number> = {
  harang: 104, narang: 105, darang: 106, erang: 107,
 };
 // ─── Helpers ───
 function statusLabel(status: OrgMember['status']): string {
  if (status.working === 'active') return 'active working';
  if (status.connection === 'connected') return 'connected idle';
  if (status.connection === 'unknown') return 'unknown';
  return 'offline';
 }
 function statusTone(status: OrgMember['status']): 'active' | 'idle' | 'offline' | 'unknown' {
  if (status.working === 'active') return 'active';
  if (status.connection === 'connected') return 'idle';
  if (status.connection === 'unknown') return 'unknown';
  return 'offline';
 }
 function formatFreshness(ts: string | null): string {
  if (!ts) return 'NO DATA';
  const diff = Date.now() - new Date(ts).getTime();
  if (!Number.isFinite(diff) || diff < 0) return 'UNKNOWN';
  const sec = Math.floor(diff / 1000);
  if (sec < 60) return `${sec}s AGO`;
  const min = Math.floor(sec / 60);
  if (min < 60) return `${min}m AGO`;
  return `${Math.floor(min / 60)}h AGO`;
 }
 function buildOrgFromLegacy(data: OrgApiData): {
  orgUnits: OrgUnit[];
  members: OrgMember[];
  independentAgents: IndependentAgent[];
 } {
  if (data.orgUnits && data.members) {
    return {
      orgUnits: data.orgUnits,
      members: data.members,
      independentAgents: data.independentAgents ?? FALLBACK_INDEPENDENT_AGENTS,
    };
  }
  // Transform legacy /api/org response into org chart model
  const sisters = data.sisters ?? [];
  if (sisters.length === 0) {
    return { orgUnits: FALLBACK_ORG_UNITS, members: FALLBACK_MEMBERS, independentAgents: FALLBACK_INDEPENDENT_AGENTS };
  }
  const ROLE_TO_TEAM: Record<string, string> = {
    Orchestrator: 'hq',
    Generator: 'delivery',
    Evaluator: 'review',
    'Infra Manager': 'infra',
  };
  const orgUnits: OrgUnit[] = [
    { id: 'hq', name: '하나랑 HQ', kind: 'hq', lead: null, memberIds: [] },
    { id: 'delivery', name: 'Delivery', kind: 'functional_team', lead: null, memberIds: [] },
    { id: 'review', name: 'QA / Review', kind: 'functional_team', lead: null, memberIds: [] },
    { id: 'infra', name: 'Infra / Deploy', kind: 'functional_team', lead: null, memberIds: [] },
  ];
  const members: OrgMember[] = sisters.map((s) => {
    const teamId = ROLE_TO_TEAM[s.role] ?? 'delivery';
    const unit = orgUnits.find((u) => u.id === teamId);
    if (unit) {
      unit.memberIds.push(s.name);
      if (!unit.lead) unit.lead = s.name;
    }
    return {
      id: s.name,
      type: 'sister' as const,
      role: s.role,
      status: {
        connection: s.status === 'online' || s.status === 'working' ? 'connected' : s.status === 'offline' ? 'disconnected' : 'unknown',
        working: s.status === 'working' ? 'active' : 'idle',
      },
      source: 'snapshot',
      freshness: { lastSnapshotAt: new Date().toISOString() },
    };
  });
  return { orgUnits, members, independentAgents: FALLBACK_INDEPENDENT_AGENTS };
 }
 // ─── Styled Components ───
 const Shell = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-height: 80vh;
 `;
-const OrgHeader = styled.div`
+const HeaderInfo = styled.div`
  display: flex;
-  justify-content: space-between;
+  gap: var(--space-xl);
-  align-items: baseline;
+  font-family: var(--font-mono);
-  gap: var(--space-lg);
+  font-size: 11px;
-  flex-wrap: wrap;
+  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--space-md);
  span { color: var(--text-primary); }
 `;
-const OrgTitle = styled.h1`
+const TreeContainer = styled.div`
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
 `;
 const OrgMeta = styled.div`
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
 `;
 const OrgBadge = styled.span<{ $tone: 'default' | 'active' | 'fallback' }>`
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border: 1px solid ${({ $tone }) =>
    $tone === 'active' ? '#00BFA5' : $tone === 'fallback' ? '#777' : 'var(--border-color)'};
  color: ${({ $tone }) =>
    $tone === 'active' ? '#00BFA5' : $tone === 'fallback' ? '#777' : 'var(--text-secondary)'};
 `;
 const SectionLabel = styled.h2`
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
 `;
 const HQCard = styled.div`
  border: 1px solid var(--border-color);
  border-left-width: 3px;
  border-left-color: #f6b26b;
  padding: var(--space-lg);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
-  gap: var(--space-md);
+  align-items: center;
-`;
+  overflow-x: auto;
-
+  padding: var(--space-xl) 0;
 const TeamGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
  }
 `;
 const TeamCard = styled.div`
  border: 1px solid var(--border-color);
  padding: var(--space-lg);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
 `;
 const TeamTitle = styled.div`
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
 `;
 const TeamLead = styled.div`
  font-size: 12px;
  color: var(--text-secondary);
 `;
 const MemberChipRow = styled.div`
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
 `;
 const MemberChip = styled.div<{ $tone: 'active' | 'idle' | 'offline' | 'unknown' }>`
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  border: 1px solid ${({ $tone }) =>
    $tone === 'active' ? '#2979FF' : $tone === 'idle' ? '#00BFA5' : $tone === 'offline' ? '#555' : '#444'};
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-primary);
 `;
 const StatusDot = styled.span<{ $tone: 'active' | 'idle' | 'offline' | 'unknown' }>`
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: ${({ $tone }) =>
    $tone === 'active' ? '#2979FF' : $tone === 'idle' ? '#00BFA5' : $tone === 'offline' ? '#FF1744' : '#555'};
 `;
 const MetaRow = styled.div`
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
 const AgentSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
 `;
 const AgentCard = styled.div`
  border: 1px solid var(--border-color);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  @media (max-width: 389px) {
    flex-direction: column;
    align-items: flex-start;
  }
 `;
-const AgentName = styled.div`
+const NodeGroup = styled.div`
-  font-size: 13px;
+  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);
-const AgentMeta = styled.div`
+  span {
  font-size: 11px;
    color: var(--text-secondary);
-`;
+    margin-right: var(--space-xs);
 const EmptyState = styled.div`
    font-family: var(--font-mono);
    font-size: 11px;
-  color: var(--text-secondary);
+  }
 `;
 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.06em;
+  letter-spacing: 0.04em;
-  padding: var(--space-md) 0;
+  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`
@@ -334,175 +142,139 @@ const PageFooter = styled.footer`
  padding: var(--space-lg) 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  border-top: 1px solid var(--border-color);
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
-// ─── Component ───
+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<OrgApiData | null>(null);
+  const [orgData, setOrgData] = useState<OrgData | null>(null);
-  const [dataSource, setDataSource] = useState<'live' | 'snapshot' | 'fallback'>('fallback');
+  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((data) => {
+      .then(setOrgData)
-        setOrgData(data);
+      .catch(() => {});
        setDataSource(data.orgUnits ? 'snapshot' : data.sisters?.length > 0 ? 'snapshot' : 'fallback');
      })
      .catch(() => {
        setDataSource('fallback');
      });
  }, []);
-  const { orgUnits, members, independentAgents } = orgData
+  const sisters = orgData?.sisters ?? [];
    ? buildOrgFromLegacy(orgData)
    : { orgUnits: FALLBACK_ORG_UNITS, members: FALLBACK_MEMBERS, independentAgents: FALLBACK_INDEPENDENT_AGENTS };
  const memberMap = new Map(members.map((m) => [m.id, m]));
  const hqUnit = orgUnits.find((u) => u.kind === 'hq');
  const functionalTeams = orgUnits.filter((u) => u.kind === 'functional_team');
  const totalMembers = members.length;
  const totalUnits = orgUnits.length;
  return (
-    <Shell>
+    <MainViewport>
-      <OrgHeader>
+      <HeaderInfo>
-        <OrgTitle>조직도</OrgTitle>
+        <div>SYS_TYPE: <span>CORE_ROOT_01</span></div>
-        <OrgMeta>
+        <div>TIMESTAMP: <span style={{ color: 'var(--text-secondary)' }}>{ts}</span></div>
-          <OrgBadge $tone={dataSource === 'fallback' ? 'fallback' : 'default'}>
+      </HeaderInfo>
            source: {dataSource}
          </OrgBadge>
          <OrgBadge $tone="default">{totalUnits} units</OrgBadge>
          <OrgBadge $tone="default">{totalMembers} members</OrgBadge>
          <OrgBadge $tone="default">{independentAgents.length} agents</OrgBadge>
        </OrgMeta>
      </OrgHeader>
-      {/* HQ Section */}
+      <TreeContainer>
-      {hqUnit && (
+        <NodeGroup>
-        <>
+          {/* HQ */}
-          <SectionLabel>HQ</SectionLabel>
+          <TerminalCard $level="high">
-          <HQCard>
+            <NodeLabel><span>[HQ]</span> 하나랑 글로벌</NodeLabel>
-            <TeamTitle>{hqUnit.name}</TeamTitle>
+            <BadgeRow>
-            <TeamLead>
+              <Badge>MEM: <b>{sisters.length + 1}</b></Badge>
-              {hqUnit.lead
+              <Badge>S_ADMIN</Badge>
-                ? `LEAD: ${MEMBER_DISPLAY[hqUnit.lead] ?? hqUnit.lead}`
+              <Badge>LV_09</Badge>
-                : 'LEAD 미정'}
+            </BadgeRow>
-            </TeamLead>
+          </TerminalCard>
-            <MemberChipRow>
+          <TreeConnector />
              {hqUnit.memberIds.map((id) => {
                const member = memberMap.get(id);
                const tone = member ? statusTone(member.status) : 'unknown';
                return (
                  <MemberChip key={id} $tone={tone}>
                    <SisterAvatar name={id} size={20} />
                    <StatusDot $tone={tone} />
                    {MEMBER_DISPLAY[id] ?? id}
                  </MemberChip>
                );
              })}
            </MemberChipRow>
            <MetaRow>
              {hqUnit.memberIds.map((id) => {
                const member = memberMap.get(id);
                return (
                  <span key={id}>
                    {MEMBER_DISPLAY[id] ?? id}: {member ? statusLabel(member.status) : 'unknown'}
                    {LXC_ID[id] ? ` · LXC ${LXC_ID[id]}` : ''}
                  </span>
                );
              })}
            </MetaRow>
          </HQCard>
        </>
      )}
-      {/* Functional Teams */}
+          {/* 자매 레벨 */}
-      <SectionLabel>FUNCTIONAL TEAMS</SectionLabel>
+          <TreeBranch>
-      <TeamGrid>
+            <TreeChildren>
-        {functionalTeams.map((team) => (
+              {/* 하랑이 (Orchestrator) */}
-          <TeamCard key={team.id}>
+              {sisters.filter((s) => s.role === 'Orchestrator').map((s) => (
-            <TeamTitle>{team.name}</TeamTitle>
+                <NodeGroup key={s.name}>
-            <TeamLead>
+                  <TerminalCard $level={LEVEL_MAP[s.role] ?? 'none'}>
-              {team.lead
+                    <NodeLabel>
-                ? `LEAD: ${MEMBER_DISPLAY[team.lead] ?? team.lead}`
+                      <span>[{ROLE_TAG[s.role] ?? s.role}]</span>
-                : 'LEAD 미정'}
+                      {s.name === 'harang' ? '하랑이' : s.name}
-            </TeamLead>
+                    </NodeLabel>
-            <MemberChipRow>
+                    <BadgeRow>
-              {team.memberIds.map((id) => {
+                      <Badge>LXC: <b>{LXC_ID[s.name] ?? '---'}</b></Badge>
-                const member = memberMap.get(id);
+                      <Badge>{ROLE_TAG[s.role] ?? s.role}</Badge>
-                const tone = member ? statusTone(member.status) : 'unknown';
+                      <Badge>{s.status === 'online' ? 'ACTIVE' : s.status === 'offline' ? 'STBY' : 'RUN'}</Badge>
-                return (
+                    </BadgeRow>
-                  <MemberChip key={id} $tone={tone}>
+                  </TerminalCard>
-                    <SisterAvatar name={id} size={20} />
+                  <TreeConnector />
-                    <StatusDot $tone={tone} />
+                  <TreeBranch>
-                    {MEMBER_DISPLAY[id] ?? id}
+                    <TreeChildren>
-                  </MemberChip>
+                      {/* 나랑/다랑/이랑 */}
-                );
+                      {sisters.filter((s2) => s2.role !== 'Orchestrator').map((s2) => (
-              })}
+                        <NodeGroup key={s2.name}>
-            </MemberChipRow>
+                          <TerminalCard $level={LEVEL_MAP[s2.role] ?? 'none'}>
-            <MetaRow>
+                            <NodeLabel>
-              {team.memberIds.map((id) => {
+                              {s2.name === 'narang' ? '나랑이' : s2.name === 'darang' ? '다랑이' : '이랑이'}
-                const member = memberMap.get(id);
+                            </NodeLabel>
-                return (
+                            <BadgeRow>
-                  <span key={id}>
+                              <Badge>LXC: <b>{LXC_ID[s2.name] ?? '---'}</b></Badge>
-                    {member?.role ?? 'unknown'}
+                              <Badge>{ROLE_TAG[s2.role] ?? s2.role}</Badge>
-                    {member ? ` · ${statusLabel(member.status)}` : ''}
+                              <Badge>{s2.status === 'online' ? 'ON' : s2.status === 'offline' ? '--' : 'RUN'}</Badge>
-                    {member ? ` · ${member.source}` : ''}
+                            </BadgeRow>
-                  </span>
+                          </TerminalCard>
-                );
+                        </NodeGroup>
-              })}
+                      ))}
-              <span>freshness: {formatFreshness(
+                    </TreeChildren>
-                team.memberIds
+                  </TreeBranch>
-                  .map((id) => memberMap.get(id)?.freshness.lastSnapshotAt)
+                </NodeGroup>
                  .filter(Boolean)
                  .sort()
                  .at(-1) ?? null
              )}</span>
            </MetaRow>
          </TeamCard>
              ))}
      </TeamGrid>
-      {/* Independent Agents */}
+              {/* Orchestrator 없을 때 fallback */}
-      <SectionLabel>INDEPENDENT AGENTS</SectionLabel>
+              {sisters.filter((s) => s.role === 'Orchestrator').length === 0 && (
-      <AgentSection>
+                <NodeGroup>
-        {independentAgents.length === 0 ? (
+                  <TerminalCard $level="none">
-          <EmptyState>INDEPENDENT AGENTS 없음</EmptyState>
+                    <NodeLabel>데이터 없음</NodeLabel>
-        ) : (
+                    <BadgeRow><Badge>N/A</Badge></BadgeRow>
-          independentAgents.map((agent) => (
+                  </TerminalCard>
-            <AgentCard key={agent.id}>
+                </NodeGroup>
              <div>
                <AgentName>{agent.name}</AgentName>
                <AgentMeta>
                  {agent.ownerSister
                    ? `owner: ${MEMBER_DISPLAY[agent.ownerSister] ?? agent.ownerSister}`
                    : 'independent'}
                </AgentMeta>
              </div>
              <MetaRow>
                <span>source: {agent.source}</span>
              </MetaRow>
            </AgentCard>
          ))
              )}
-      </AgentSection>
+            </TreeChildren>
          </TreeBranch>
        </NodeGroup>
      </TreeContainer>
      <PageFooter>
-        <div>UNITS: {String(totalUnits).padStart(2, '0')}</div>
+        <div>TOTAL_NODES: {String(sisters.length + 1).padStart(2, '0')}</div>
-        <div>MEMBERS: {String(totalMembers).padStart(2, '0')}</div>
+        <div>STATUS: SYNC_COMPLETE</div>
        <div>AGENTS: {String(independentAgents.length).padStart(2, '0')}</div>
        <div>SOURCE: {dataSource.toUpperCase()}</div>
      </PageFooter>
-    </Shell>
+    </MainViewport>
  );
 }
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -268,7 +268,7 @@ const ConnectionDot = styled.span<{ $connected: boolean }>`
  width: 8px;
  height: 8px;
  border-radius: 50%;
-  background: ${({ $connected }) => ($connected ? '#8dffb2' : '#888')};
+  background: ${({ $connected }) => ($connected ? '#8dffb2' : '#ff8d7a')};
  box-shadow: ${({ $connected }) => ($connected ? '0 0 8px rgba(141,255,178,0.45)' : 'none')};
  flex-shrink: 0;
 `;
@@ -958,8 +958,8 @@ export default function DashboardPage() {
          </div>
          <Summary>RUNTIME / EVENTS / DOCS</Summary>
          <InlineStats>
-            <Chip $tone={connected ? 'active' : 'default'}>{connected ? 'EVENT STREAM ON' : 'EVENT STREAM OFF'}</Chip>
+            <Chip $tone={connected ? 'active' : 'muted'}>{connected ? 'socket on' : 'socket off'}</Chip>
-            <Chip $tone="default">{formatSyncLabel(derived.freshness.generatedAt)}</Chip>
+            <Chip $tone="default">snapshot {formatSyncLabel(derived.freshness.generatedAt)}</Chip>
            <Chip $tone={derived.reviewProjects > 0 ? 'warning' : 'default'}>qa {String(derived.reviewProjects).padStart(2, '0')}</Chip>
            <Chip $tone={derived.readyDeploy > 0 ? 'active' : 'muted'}>deploy {String(derived.readyDeploy).padStart(2, '0')}</Chip>
          </InlineStats>
@@ -999,33 +999,21 @@ export default function DashboardPage() {
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
              <ConnectionDot $connected={connected} />
              <div>
-                <Eyebrow>Connection</Eyebrow>
+                <Eyebrow>Event stream</Eyebrow>
-                <div style={{ fontSize: 14, color: 'var(--text-primary)', marginTop: 4 }}>{connected ? 'EVENT STREAM ON' : 'EVENT STREAM OFF'}</div>
+                <div style={{ fontSize: 14, color: 'var(--text-primary)', marginTop: 4 }}>{connected ? 'SOCKET ON / EVENT MIRRORED' : 'SOCKET OFF / POLLING'}</div>
              </div>
            </div>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
+            <LabelMeta><span>SYNC:</span>{formatSyncLabel(derived.freshness.activityLatestAt)}</LabelMeta>
              <LabelMeta><span>FRESHNESS:</span>{formatSyncLabel(derived.freshness.activityLatestAt)}</LabelMeta>
              <LabelMeta><span>SOURCE:</span>{connected ? 'MIRRORED EVENT' : 'SNAPSHOT'}</LabelMeta>
            </div>
          </ConnectionCard>
          <OperatorRow>
-            {derived.activeProject?.ownerSister ? (
+            <SisterAvatar name={derived.activeProject?.ownerSister ?? 'narang'} size={44} />
              <>
                <SisterAvatar name={derived.activeProject.ownerSister} size={44} />
            <OperatorText>
-                  <OperatorName>{SISTER_META[derived.activeProject.ownerSister]?.label ?? derived.activeProject.ownerSister}</OperatorName>
+              <OperatorName>{SISTER_META[derived.activeProject?.ownerSister ?? 'narang']?.label ?? '나랑이'}</OperatorName>
              <OperatorMeta>
-                    {SISTER_META[derived.activeProject.ownerSister]?.role ?? 'unknown'} / SNAPSHOT OWNER
+                {SISTER_META[derived.activeProject?.ownerSister ?? 'narang']?.role ?? 'Implementation'} / SNAPSHOT OWNER
              </OperatorMeta>
            </OperatorText>
              </>
            ) : (
              <OperatorText>
                <OperatorName>NO ACTIVE OWNER</OperatorName>
                <OperatorMeta>UNASSIGNED</OperatorMeta>
              </OperatorText>
            )}
          </OperatorRow>
          <QuickLinks>
@@ -1116,7 +1104,7 @@ export default function DashboardPage() {
            <PanelTitleBlock>
              <Eyebrow>Activity feed</Eyebrow>
              <PanelTitle>EVENT MIRROR</PanelTitle>
-              <PanelDesc>{connected ? 'SOURCE: MIRRORED EVENT' : 'SOURCE: SNAPSHOT'}</PanelDesc>
+              <PanelDesc>WEBSOCKET + POLLING SNAPSHOT</PanelDesc>
            </PanelTitleBlock>
            <LabelMeta><span>EVENT:</span>{String(activityItems.length).padStart(2, '0')}</LabelMeta>
          </PanelHeader>
@@ -1153,7 +1141,7 @@ export default function DashboardPage() {
            <PanelTitleBlock>
              <Eyebrow>Sprint metrics</Eyebrow>
              <PanelTitle>SPRINT METRICS</PanelTitle>
-              <PanelDesc>SOURCE: SNAPSHOT</PanelDesc>
+              <PanelDesc>POLLING SNAPSHOT</PanelDesc>
            </PanelTitleBlock>
            <LabelMeta><span>SPRINT:</span>{String(derived.totalSprints).padStart(2, '0')}</LabelMeta>
          </PanelHeader>
@@ -1199,7 +1187,7 @@ export default function DashboardPage() {
            <PanelTitleBlock>
              <Eyebrow>Infrastructure overview</Eyebrow>
              <PanelTitle>RUNTIME SURFACE</PanelTitle>
-              <PanelDesc>SOURCE: {connected ? 'LIVE' : 'SNAPSHOT'} / DOC-DERIVED</PanelDesc>
+              <PanelDesc>LIVE / SNAPSHOT / DOC-DERIVED</PanelDesc>
            </PanelTitleBlock>
            <LabelMeta><span>NODE:</span>{String(sisters.length).padStart(2, '0')}</LabelMeta>
          </PanelHeader>
@@ -1220,7 +1208,7 @@ export default function DashboardPage() {
            <PanelTitleBlock>
              <Eyebrow>Mistake log & harness</Eyebrow>
              <PanelTitle>RULE / LOG BOARD</PanelTitle>
-              <PanelDesc>SOURCE: DOC-DERIVED / ACTIVITY</PanelDesc>
+              <PanelDesc>DOC-DERIVED / ACTIVITY</PanelDesc>
            </PanelTitleBlock>
            <LabelMeta><span>RULE:</span>{String(derived.board.length).padStart(2, '0')}</LabelMeta>
          </PanelHeader>
--- a/frontend/app/projects/[id]/page.tsx
+++ b/frontend/app/projects/[id]/page.tsx
@@ -46,13 +46,6 @@ const GitItem = styled.a`border:1px solid var(--border-color);padding:12px var(-
 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 ParticipantSection = styled.div`display:flex;flex-direction:column;gap:var(--space-md);`;
 const ParticipantCard = styled.div`border:1px solid var(--border-color);padding:var(--space-sm) var(--space-md);display:flex;flex-direction:column;gap:6px;`;
 const ParticipantBadgeRow = styled.div`display:flex;gap:var(--space-xs);flex-wrap:wrap;`;
 const WhyBadge = styled.span`font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.06em;padding:2px 6px;border:1px solid #2979FF;color:#2979FF;white-space:nowrap;`;
 const SourceBadge = styled.span`font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.06em;padding:2px 6px;border:1px solid #777;color:#777;white-space:nowrap;`;
 const EmptyParticipant = styled.div`font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.06em;padding:var(--space-md) 0;`;
 const ROLE_LABEL: Record<string, string> = { harang: 'ORCHESTRATOR', narang: 'GENERATOR', darang: 'EVALUATOR', erang: 'INFRA' };
 const ROLE_NAME: Record<string, string> = { harang: '하랑', narang: '나랑', darang: '다랑', erang: '이랑' };
@@ -94,37 +87,12 @@ export default function ProjectDetailPage() {
  }, [tab, id, commits.length, branches.length, pulls.length]);
  const allTasks = useMemo(() => tasks.flatMap((sprint) => sprint.tasks ?? []), [tasks]);
-  const participantModel = useMemo(() => {
+  const assignedNodes = useMemo(() => {
-    const taskAssigneeNames = Array.from(new Set(allTasks.map((task) => task.assignee).filter(Boolean)));
+    const names = Array.from(new Set(allTasks.map((task) => task.assignee).filter(Boolean)));
-    const taskCountByAssignee: Record<string, number> = {};
+    return (names.length > 0 ? names : ['harang', 'narang', 'darang', 'erang']).map((name) => ({
    for (const task of allTasks) {
      if (task.assignee) {
        taskCountByAssignee[task.assignee] = (taskCountByAssignee[task.assignee] ?? 0) + 1;
      }
    }
    const participants: { name: string; whyVisible: string[]; source: string; status: string }[] = [];
    for (const name of taskAssigneeNames) {
      const reasons: string[] = [];
      if (taskCountByAssignee[name]) reasons.push('task_assignee');
      const sisterStatus = sisters.find((s) => s.name === name)?.status ?? 'offline';
      if (sisterStatus === 'working' || sisterStatus === 'online') reasons.push('current_implementer');
      participants.push({
      name,
-        whyVisible: reasons.length > 0 ? reasons : ['task_assignee'],
+      status: sisters.find((sister) => sister.name === name)?.status ?? 'offline',
-        source: 'snapshot',
+    }));
        status: sisterStatus,
      });
    }
    return {
      currentOwners: [] as { name: string; source: string }[],
      participants,
      taskAssignees: taskAssigneeNames.map((name) => ({
        name,
        taskCount: taskCountByAssignee[name] ?? 0,
      })),
    };
  }, [allTasks, sisters]);
  const hotfixes = history.filter((entry) => entry.kind === 'hotfix');
  const currentSprintMeta = useMemo(() => {
@@ -230,72 +198,21 @@ export default function ProjectDetailPage() {
          </Panel>
          <Panel $column="side" $mobileOrder={6}>
-            <SectionTitle><span>CURRENT OWNERS</span><LabelMeta>SNAPSHOT</LabelMeta></SectionTitle>
+            <SectionTitle><span>ASSIGNED NODES</span><LabelMeta>LIVE STATUS</LabelMeta></SectionTitle>
            <ParticipantSection>
              {participantModel.currentOwners.length === 0 ? (
                <EmptyParticipant>NO ACTIVE OWNER</EmptyParticipant>
              ) : (
                participantModel.currentOwners.map((owner) => (
                  <NodeMiniCard key={owner.name}>
                    <NodeInfo>
                      <SisterAvatar name={owner.name} size={28} />
                      <div>
                        <div style={{ fontSize: '13px', color: 'var(--text-primary)', fontWeight: 600 }}>{ROLE_NAME[owner.name] ?? owner.name}</div>
                        <Meta>{ROLE_LABEL[owner.name] ?? 'OWNER'}</Meta>
                      </div>
                    </NodeInfo>
                    <SourceBadge>{owner.source}</SourceBadge>
                  </NodeMiniCard>
                ))
              )}
            </ParticipantSection>
            <SectionTitle style={{ marginTop: 'var(--space-lg)' }}><span>PARTICIPANTS</span><LabelMeta>SNAPSHOT</LabelMeta></SectionTitle>
            <ParticipantSection>
              {participantModel.participants.length === 0 ? (
                <EmptyParticipant>NO CONFIRMED ACTIVE PARTICIPANT</EmptyParticipant>
              ) : (
                participantModel.participants.map((p) => (
                  <ParticipantCard key={p.name}>
                    <NodeInfo>
                      <SisterAvatar name={p.name} size={28} />
                      <div>
                        <div style={{ fontSize: '13px', color: 'var(--text-primary)', fontWeight: 600 }}>{ROLE_NAME[p.name] ?? p.name}</div>
                        <Meta>{ROLE_LABEL[p.name] ?? 'PARTICIPANT'}</Meta>
                      </div>
                    </NodeInfo>
                    <ParticipantBadgeRow>
                      {p.whyVisible.map((reason) => (
                        <WhyBadge key={reason}>{reason}</WhyBadge>
                      ))}
                      <SourceBadge>{p.source}</SourceBadge>
                    </ParticipantBadgeRow>
                  </ParticipantCard>
                ))
              )}
            </ParticipantSection>
            <SectionTitle style={{ marginTop: 'var(--space-lg)' }}><span>TASK ASSIGNEES</span><LabelMeta>{participantModel.taskAssignees.length} ASSIGNEES</LabelMeta></SectionTitle>
            <ParticipantSection>
              {participantModel.taskAssignees.length === 0 ? (
                <EmptyParticipant>NO TASK ASSIGNEE DATA</EmptyParticipant>
              ) : (
            <NodeStack>
-                  {participantModel.taskAssignees.map((a) => (
+              {assignedNodes.map((node) => (
-                    <NodeMiniCard key={a.name}>
+                <NodeMiniCard key={node.name}>
                  <NodeInfo>
-                        <SisterAvatar name={a.name} size={28} />
+                    <SisterAvatar name={node.name} size={28} />
                    <div>
-                          <div style={{ fontSize: '13px', color: 'var(--text-primary)', fontWeight: 600 }}>{ROLE_NAME[a.name] ?? a.name}</div>
+                      <div style={{ fontSize: '13px', color: 'var(--text-primary)', fontWeight: 600 }}>{ROLE_NAME[node.name] ?? node.name}</div>
-                          <Meta>{a.taskCount} TASKS</Meta>
+                      <Meta>{ROLE_LABEL[node.name] ?? 'NODE'}</Meta>
                    </div>
                  </NodeInfo>
-                      <SourceBadge>snapshot</SourceBadge>
+                  <NodeDot $status={node.status} />
                </NodeMiniCard>
              ))}
            </NodeStack>
              )}
            </ParticipantSection>
          </Panel>
        </ProjectGrid>
      )}
--- a/frontend/app/rails/page.tsx
+++ b/frontend/app/rails/page.tsx
@@ -0,0 +1,243 @@
 'use client';
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { API_URL } from '@/lib/config';
 import {
  useRailsSocket,
  type RailsPipelineSummary,
  type RailsSubTaskNode,
 } from '@/lib/useRailsSocket';
 import PipelineList from '@/components/rails/PipelineList';
 import SubTaskTree from '@/components/rails/SubTaskTree';
 import { LabelMeta } from '@/components/ui/base';
 const Layout = styled.div`
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: 16px;
  padding: 16px;
  min-height: calc(100vh - 120px);
  @media (max-width: 900px) {
    grid-template-columns: 1fr;
  }
 `;
 const Pane = styled.section`
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  overflow: auto;
 `;
 const PaneHeader = styled.header`
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
 `;
 const Dot = styled.span<{ $connected: boolean }>`
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: ${({ $connected }) => ($connected ? '#22c55e' : '#6b7280')};
 `;
 const StartBar = styled.div`
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
 `;
 const Input = styled.input`
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 8px;
  font-size: 13px;
  &:focus {
    outline: none;
    border-color: #5fafff;
  }
 `;
 const Button = styled.button`
  padding: 8px 16px;
  background: #5fafff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  &:hover {
    opacity: 0.9;
  }
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
 `;
 const DetailHeader = styled.div`
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
 `;
 const Meta = styled.div`
  display: flex;
  gap: 16px;
  font-size: 12px;
  opacity: 0.7;
  margin-top: 4px;
 `;
 export default function RailsPage() {
  const [pipelines, setPipelines] = useState<RailsPipelineSummary[]>([]);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [tree, setTree] = useState<RailsSubTaskNode[]>([]);
  const [projectInput, setProjectInput] = useState('');
  const [reqInput, setReqInput] = useState('');
  const [starting, setStarting] = useState(false);
  const { connected } = useRailsSocket({
    onPipelinesSnapshot: (next) => {
      setPipelines(next);
      if (!selectedId && next.length > 0) {
        setSelectedId(next[0]!.id);
      }
    },
    onSubTasksUpdated: (pipelineId, nextTree) => {
      if (pipelineId === selectedId) {
        setTree(nextTree);
      }
    },
  });
  // Initial fetch
  useEffect(() => {
    fetch(`${API_URL}/api/rails/pipelines`, { credentials: 'include' })
      .then((r) => r.json())
      .then((data: { pipelines: RailsPipelineSummary[] }) => {
        setPipelines(data.pipelines);
        if (!selectedId && data.pipelines.length > 0) {
          setSelectedId(data.pipelines[0]!.id);
        }
      })
      .catch(() => {
        /* ignore */
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  // When selection changes, fetch tree once
  useEffect(() => {
    if (!selectedId) return;
    fetch(`${API_URL}/api/rails/pipelines/${selectedId}/sub-tasks`, {
      credentials: 'include',
    })
      .then((r) => r.json())
      .then((data: { tree: RailsSubTaskNode[] }) => setTree(data.tree))
      .catch(() => setTree([]));
  }, [selectedId]);
  const handleStart = useCallback(async () => {
    if (!projectInput.trim()) return;
    setStarting(true);
    try {
      const res = await fetch(`${API_URL}/api/rails/pipelines/start`, {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({
          project: projectInput.trim(),
          requirements: reqInput.trim(),
        }),
      });
      if (res.ok) {
        const data = (await res.json()) as { pipelineId: string };
        setSelectedId(data.pipelineId);
        setProjectInput('');
        setReqInput('');
      }
    } finally {
      setStarting(false);
    }
  }, [projectInput, reqInput]);
  const selected = pipelines.find((p) => p.id === selectedId) ?? null;
  return (
    <Layout>
      <Pane>
        <PaneHeader>
          <LabelMeta>
            <Dot $connected={connected} />
            PIPELINES
          </LabelMeta>
          <span style={{ fontSize: 11, opacity: 0.6 }}>
            {pipelines.length} total
          </span>
        </PaneHeader>
        <StartBar>
          <Input
            placeholder="project"
            value={projectInput}
            onChange={(e) => setProjectInput(e.target.value)}
          />
        </StartBar>
        <StartBar>
          <Input
            placeholder="requirements..."
            value={reqInput}
            onChange={(e) => setReqInput(e.target.value)}
          />
          <Button disabled={starting || !projectInput} onClick={handleStart}>
            Start
          </Button>
        </StartBar>
        <PipelineList
          pipelines={pipelines}
          selectedId={selectedId}
          onSelect={setSelectedId}
        />
      </Pane>
      <Pane>
        {selected ? (
          <>
            <DetailHeader>
              <LabelMeta>PIPELINE DETAIL</LabelMeta>
              <div style={{ fontWeight: 700, fontSize: 18, marginTop: 4 }}>
                {selected.projectName}
              </div>
              <Meta>
                <span>id: {selected.id}</span>
                <span>state: {selected.currentState}</span>
                <span>created: {new Date(selected.createdAt).toLocaleString()}</span>
              </Meta>
            </DetailHeader>
            <SubTaskTree tree={tree} />
          </>
        ) : (
          <div style={{ opacity: 0.6, padding: 40, textAlign: 'center' }}>
            Select a pipeline to view its sub-task tree.
          </div>
        )}
      </Pane>
    </Layout>
  );
 }
--- a/frontend/components/common/Sidebar.tsx
+++ b/frontend/components/common/Sidebar.tsx
@@ -8,6 +8,7 @@ import { useAuth } from '@/lib/AuthContext';
 const NAV_ITEMS = [
  { href: '/', label: '대시' },
  { href: '/rails', label: '레일' },
  { href: '/office', label: '오피스' },
  { href: '/projects', label: '프로' },
  { href: '/activities', label: '활동' },
--- a/frontend/components/rails/PipelineList.tsx
+++ b/frontend/components/rails/PipelineList.tsx
@@ -0,0 +1,118 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
 import type { RailsPipelineSummary } from '@/lib/useRailsSocket';
 const Wrap = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;
 `;
 const Card = styled.button<{ $active: boolean }>`
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: ${({ $active }) =>
    $active ? 'var(--bg-input)' : 'var(--bg-surface)'};
  border: 1px solid ${({ $active }) =>
    $active ? '#5fafff' : 'var(--border-color)'};
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  &:hover {
    border-color: #5fafff;
  }
 `;
 const StateBadge = styled.span<{ $state: string }>`
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 12px;
  color: #fff;
  background: ${({ $state }) => {
    switch ($state) {
      case 'done':
        return '#22c55e';
      case 'escalated':
        return '#ef4444';
      case 'aborted':
        return '#6b7280';
      case 'planning':
      case 'implementing':
      case 'reviewing':
      case 'deploying':
        return '#f97316';
      default:
        return '#6b7280';
    }
  }};
 `;
 const Id = styled.span`
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  opacity: 0.6;
 `;
 const Name = styled.span`
  font-weight: 600;
  flex: 1;
 `;
 const Time = styled.span`
  font-size: 11px;
  opacity: 0.6;
 `;
 interface Props {
  pipelines: RailsPipelineSummary[];
  selectedId: string | null;
  onSelect: (id: string) => void;
 }
 export default function PipelineList({ pipelines, selectedId, onSelect }: Props) {
  if (pipelines.length === 0) {
    return <Wrap>No pipelines yet.</Wrap>;
  }
  return (
    <Wrap>
      {pipelines.map((p) => (
        <Card
          key={p.id}
          $active={p.id === selectedId}
          onClick={() => onSelect(p.id)}
        >
          <Id>{p.id.slice(0, 8)}</Id>
          <Name>{p.projectName}</Name>
          <StateBadge $state={p.currentState}>{p.currentState}</StateBadge>
          <Time>{formatTime(p.updatedAt)}</Time>
        </Card>
      ))}
    </Wrap>
  );
 }
 function formatTime(iso: string): string {
  try {
    const d = new Date(iso);
    const now = Date.now();
    const diffMs = now - d.getTime();
    const sec = Math.floor(diffMs / 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;
  }
 }
--- a/frontend/components/rails/SubTaskTree.tsx
+++ b/frontend/components/rails/SubTaskTree.tsx
@@ -0,0 +1,156 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
 import type { RailsSubTaskNode } from '@/lib/useRailsSocket';
 const Wrap = styled.div`
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  line-height: 1.6;
 `;
 const Node = styled.div<{ $state: string }>`
  padding: 4px 8px;
  border-left: 3px solid ${({ $state }) => stateColor($state)};
  margin: 2px 0;
  background: var(--bg-surface);
  border-radius: 4px;
 `;
 const RoleBadge = styled.span<{ $role: string }>`
  display: inline-block;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 10px;
  color: #fff;
  margin-right: 8px;
  background: ${({ $role }) => roleColor($role)};
 `;
 const StateDot = styled.span<{ $state: string }>`
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  background: ${({ $state }) => stateColor($state)};
  animation: ${({ $state }) => ($state === 'running' ? 'pulse 1.2s infinite' : 'none')};
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
 `;
 const Model = styled.span`
  font-size: 10px;
  opacity: 0.6;
  margin-left: 8px;
 `;
 const Duration = styled.span`
  font-size: 10px;
  opacity: 0.6;
  margin-left: auto;
 `;
 const Row = styled.div`
  display: flex;
  align-items: center;
 `;
 const Children = styled.div`
  margin-left: 24px;
 `;
 function stateColor(state: string): string {
  switch (state) {
    case 'done':
      return '#22c55e';
    case 'running':
      return '#f97316';
    case 'failed':
      return '#ef4444';
    case 'escalated':
      return '#ef4444';
    case 'queued':
      return '#6b7280';
    default:
      return '#333333';
  }
 }
 function roleColor(role: string): string {
  switch (role) {
    case 'manager':
      return '#8b5cf6';
    case 'principal':
      return '#3b82f6';
    case 'lead':
      return '#f97316';
    case 'junior':
      return '#6b7280';
    default:
      return '#6b7280';
  }
 }
 function duration(startedAt: string | null, completedAt: string | null): string {
  if (!startedAt) return '—';
  const start = new Date(startedAt).getTime();
  const end = completedAt ? new Date(completedAt).getTime() : Date.now();
  const ms = end - start;
  if (ms < 1000) return `${ms}ms`;
  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
  return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
 }
 function NodeRow({ node }: { node: RailsSubTaskNode }) {
  return (
    <>
      <Node $state={node.state}>
        <Row>
          <StateDot $state={node.state} />
          <RoleBadge $role={node.role}>{node.role}</RoleBadge>
          <span>{node.title.slice(0, 80)}</span>
          <Model>{node.model || '—'}</Model>
          <Duration>{duration(node.startedAt, node.completedAt)}</Duration>
        </Row>
        {node.complexityTier && (
          <Row>
            <span style={{ marginLeft: 22, fontSize: 10, opacity: 0.6 }}>
              complexity: {node.complexityTier} ({node.complexityScore})
            </span>
          </Row>
        )}
      </Node>
      {node.children.length > 0 && (
        <Children>
          {node.children.map((c) => (
            <NodeRow key={c.id} node={c} />
          ))}
        </Children>
      )}
    </>
  );
 }
 interface Props {
  tree: RailsSubTaskNode[];
 }
 export default function SubTaskTree({ tree }: Props) {
  if (tree.length === 0) {
    return <Wrap>No sub-tasks yet.</Wrap>;
  }
  return (
    <Wrap>
      {tree.map((node) => (
        <NodeRow key={node.id} node={node} />
      ))}
    </Wrap>
  );
 }
--- a/frontend/lib/useRailsSocket.ts
+++ b/frontend/lib/useRailsSocket.ts
@@ -0,0 +1,93 @@
 'use client';
 import { useEffect, useRef, useState } from 'react';
 import { io, Socket } from 'socket.io-client';
 export interface RailsPipelineSummary {
  id: string;
  projectName: string;
  currentState: string;
  createdAt: string;
  updatedAt: string;
 }
 export interface RailsSubTaskNode {
  id: string;
  parentId: string | null;
  role: string;
  agentName: string;
  title: string;
  state: string;
  complexityScore: number | null;
  complexityTier: string | null;
  model: string;
  startedAt: string | null;
  completedAt: string | null;
  createdAt: string;
  children: RailsSubTaskNode[];
 }
 interface UseRailsSocketOptions {
  onPipelinesSnapshot?: (pipelines: RailsPipelineSummary[]) => void;
  onPipelineUpdated?: (pipeline: RailsPipelineSummary) => void;
  onSubTasksUpdated?: (pipelineId: string, tree: RailsSubTaskNode[]) => void;
 }
 /**
 * Listens to rails.* events emitted by the backend EventsGateway.
 * Piggybacks on the existing /ws namespace — no new socket connection.
 */
 export function useRailsSocket(options: UseRailsSocketOptions = {}) {
  const socketRef = useRef<Socket | null>(null);
  const [connected, setConnected] = useState(false);
  useEffect(() => {
    const wsUrl = process.env.NEXT_PUBLIC_WS_URL ?? window.location.origin;
    const token =
      typeof window !== 'undefined'
        ? localStorage.getItem('hanarang_access_token') ?? ''
        : '';
    const socket = io(`${wsUrl}/ws`, {
      path: '/socket.io',
      transports: ['websocket', 'polling'],
      reconnectionAttempts: 5,
      reconnectionDelay: 3000,
      auth: { token },
    });
    socket.on('connect', () => setConnected(true));
    socket.on('disconnect', () => setConnected(false));
    if (options.onPipelinesSnapshot) {
      socket.on('rails:pipelines', (payload: { pipelines: RailsPipelineSummary[] }) => {
        options.onPipelinesSnapshot?.(payload.pipelines);
      });
    }
    if (options.onPipelineUpdated) {
      socket.on('rails:pipeline:updated', (payload: { pipeline: RailsPipelineSummary }) => {
        options.onPipelineUpdated?.(payload.pipeline);
      });
    }
    if (options.onSubTasksUpdated) {
      socket.on(
        'rails:subtasks',
        (payload: { pipelineId: string; tree: RailsSubTaskNode[] }) => {
          options.onSubTasksUpdated?.(payload.pipelineId, payload.tree);
        },
      );
    }
    socketRef.current = socket;
    return () => {
      socket.disconnect();
      socketRef.current = null;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return { connected, socket: socketRef.current };
 }
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml