feat: SPRINT-018 dashboard truth redesign implementation

- /office: Replace 4-box mobile decomposition with group mental model (Planning/Delivery/Review/Deploy blocks). Fallback seed no longer injects "working" state. Show operational summary on first load. Add truthful state labels (connected idle/active working/snapshot only/fallback/offline). Fix 360/390 mobile overflow. - / dashboard: Separate socket connection from freshness badges. "EVENT STREAM OFF" is neutral, not error-like. Remove owner fallback to narang — show "NO ACTIVE OWNER" when null. Add consistent source labels (MIRRORED EVENT/SNAPSHOT/DOC-DERIVED) to all sections. - /projects/[id]: Replace "ASSIGNED NODES" with truthful participant model. Separate CURRENT OWNERS, PARTICIPANTS (with whyVisible badges), and TASK ASSIGNEES into distinct sections. Fix 나랑이-only display by showing reason/source so it doesn't read as confirmed participation. - /org: Complete redesign from hardcoded sister tree to company org chart. HQ → functional teams → members structure with status/source/ freshness. Independent agents section. Data-driven from /api/org, not hardcoded harang→children tree. Mobile-friendly card layout. - Backend sisters.service.ts: Add truth contract fields — connection (gateway/runtime), activity (state/label/lastActiveAt), working (state/confidence/reason/label), source, freshness. States: connected idle, active working, snapshot only, fallback, offline. Fallback seeds never inject "working" directly. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
docs: plan sprint 018 dashboard truth redesign
2026-04-09 13:00:30 +09:00 · 2026-04-09 10:39:10 +09:00 · 2026-04-09 10:08:02 +09:00 · 2026-04-09 09:59:27 +09:00 · 2026-04-09 09:51:12 +09:00 · 2026-04-09 09:40:22 +09:00
45 changed files with 6692 additions and 824 deletions
--- a/.plans/OVERVIEW.md
+++ b/.plans/OVERVIEW.md
@@ -1,42 +1,86 @@
 # 하나랑 대시보드 — 실행 개요
 ## 프로젝트 목표
- 4자매 운영 상태를 실시간으로 보여준다
+- 4자매 운영 상태를 실제 source-of-truth 기준으로 보여준다
- 프로젝트/Sprint/Hotfix/QA/Deploy 흐름을 시각화한다
+- 프로젝트, Sprint, Hotfix, QA, Deploy 흐름을 한 운영 정보 구조로 연결한다
- `main`이 항상 배포 가능 상태라는 원칙을 UI와 운영에 함께 반영한다
+- `main`이 항상 배포 가능 상태라는 원칙을 UI와 운영 문서에 같이 반영한다
 - `/office`, `/`, `/projects/[id]`, `/org`가 서로 다른 역할을 가지되 같은 상태 계약을 공유하게 만든다
-## 현재 표준 구조
+## 저장소 / Git 기준
- 루트: `README.md`, `ARCHITECTURE.md`
+- Repo: `hanarang-dashboard`
- 실행 문서: `.plans/`
+- Git URL: `https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard`
-  - `design/`
+- 기본 브랜치: `main`
-  - `sprints/`
+- 현재 구현 기준 경로:
-  - `hotfix/`
+  - `frontend/app/office/page.tsx`
-  - `qa/`
+  - `frontend/app/page.tsx`
-  - `deploy/`
+  - `frontend/app/projects/[id]/page.tsx`
- 장기 문서: `docs/`
+  - `frontend/app/org/page.tsx`
  - `backend/src/sisters/sisters.service.ts`
  - `backend/src/sisters/sister-detail.service.ts`
  - `backend/src/dashboard/dashboard.service.ts`
-## 활성 작업
+## 현재 상태
- **SPRINT-015**: Master Dashboard v3 정보 구조 리디자인
+- **SPRINT-016**: `/office` 기본 화면과 핵심 컴포넌트가 `main`에 반영됨
- **HOTFIX-006**: 대시보드 문구 절제 + 실시간성 정합성 보정
+- **SPRINT-017**: `/office` 모바일 IA와 direct chat 중심 재배치 범위를 문서로 잠금
 - **HOTFIX-006**: 메인 대시보드 문구 절제와 source/freshness 정합성 보정 범위를 잠금
 - **다음 활성 작업**: **SPRINT-018** 대시보드 truth redesign
-## 이번 Sprint 핵심 요구사항
+## SPRINT-018 active scope
-1. 메인 대시보드를 4자매 운영 관제의 대표 화면으로 재정의
+이번 Sprint는 단순 모바일 정리가 아니라, `/office`, `/`, `/projects/[id]`, `/org`를 **같은 운영 사실 계약**으로 다시 잠그는 작업이야.
 2. 현행 미니멀 터미널 UI를 유지한 채 레퍼런스의 강한 정보 구조를 흡수
 3. 상단 global status bar / 4자매 상태 카드 / `ACTIVE PIPELINE` 중심 구조 도입
 4. `ACTIVITY FEED`, `SPRINT METRICS`, `INFRASTRUCTURE OVERVIEW`, `MISTAKE LOG & HARNESS`를 운영 문맥으로 재배치
 5. 데스크톱 우선 설계 후 모바일 세로 흐름까지 함께 정리
-## 이행 전략
+### 이번에 반드시 해결할 것
- 코드에서는 구 구조와 신 구조를 일정 기간 동시 지원
+1. 페이지 역할을 고정한다.
- 문서는 신 구조를 기준으로 선반영
+   - `/office`: live operations workspace
- 신규 QA 문서는 `.plans/qa/` 기준
+   - `/`: executive snapshot
- 신규 Hotfix 문서는 `.plans/hotfix/` 기준
+   - `/projects/[id]`: delivery detail
   - `/org`: company org map
 2. 공통 용어를 고정한다.
   - `connection`, `activity`, `working`, `owner`, `participant`, `assignee`, `freshness`, `source`
 3. `working`, `owner`, `participant`를 추정치와 확정치를 섞지 않게 다시 정의한다.
 4. `fallback`, `snapshot`, `live`가 같은 사실처럼 보이지 않게 규칙을 문서화한다.
 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 자체 구조 변경
 - WebSocket 프로토콜 재설계
 - 별도 모바일 앱 설계
 - 실제 배포 자동화 플로우 재작성
 - 조직도용 신규 비주얼 엔진 도입
 ## truth redesign 원칙
 - `360px`, `390px`에서 카드와 badge는 줄바꿈되어야 하고 horizontal scroll이 없어야 한다
 - websocket 연결 여부와 데이터 최신성은 같은 뜻으로 쓰지 않는다
 - `working`은 단순 `thinking/tool_calling/speaking + gatewayConnected`의 프론트 추정치로 고정하지 않는다
 - `owner`, `participant`, `assignee`는 같은 사람 목록으로 재사용하지 않는다
 - fallback seed는 확정 owner, working, participant를 주입하지 않는다
 - null/empty 상태도 사실대로 보여준다
 ## breakpoint 기준
 - **Mobile compact:** `360px`
 - **Mobile default:** `390px`
 - **Tablet:** `768px`
 - **Desktop:** `1280px+`
 ## 문서 맵
 - 구조 기준: `../ARCHITECTURE.md`
- 디자인 인덱스: `./design/index.md`
+- 제품 PRD: `../docs/product-specs/openclaw-office-dashboard-prd.md`
- Sprint 계획: `./sprints/SPRINT-015.md`
+- Sprint 017: `./sprints/SPRINT-017.md`
- Sprint handoff: `./sprints/SPRINT-015-NARANG-HANDOFF.md`
+- Sprint 018: `./sprints/SPRINT-018.md`
- Hotfix 계획: `./hotfix/HOTFIX-006.md`
+- HOTFIX-006: `./hotfix/HOTFIX-006.md`
- Hotfix handoff: `./hotfix/HOTFIX-006-NARANG-HANDOFF.md`
+- API / truth contract: `./design/api-design.md`
- 배포 플로우: `./deploy/main-release-flow.md`
+- `/office` UI: `./design/ui/office-dashboard-design.md`
 - `/office` chat 기준: `./design/ui/office-chat-design.md`
 - `/` UI: `./design/ui/dashboard-design.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 문서를 반드시 링크한다
 - design 문서는 실제 구현 파일 경로와 breakpoint를 함께 적는다
 - API, UI, QA 문서에서 `working / owner / participant / source / freshness` 의미를 동일하게 쓴다
 - `live / mirrored event / snapshot / doc-derived / fallback` source 라벨은 페이지 간 동일하게 쓴다
 - 여기까지가 SPRINT-018 기준 scope야.
--- a/.plans/deploy/deploy-plan.md
+++ b/.plans/deploy/deploy-plan.md
@@ -20,10 +20,13 @@
 ## PM2 설정
 ```
-backend:  pm2 start dist/main.js --name hanarang-api --env production
+backend:  pm2 start backend/dist/src/main.js --name hanarang-api --cwd /path/to/hanarang-dashboard --env production
-frontend: pm2 start npm --name hanarang-web -- start -- -p 3004
+frontend: pm2 start npm --name hanarang-web --cwd /path/to/hanarang-dashboard/frontend -- start -- -p 3004
 ```
 - backend 엔트리포인트는 실제 Nest 빌드 산출물 기준 `backend/dist/src/main.js`를 사용해.
 - repo 루트에서 실행하면 `--cwd`를 명시해서 PM2가 올바른 작업 디렉터리를 잡도록 해.
 ## SSH 키 배포
 - Dev 서버(10.10.10.169)에서 4자매 서버로 SSH 접속할 수 있도록 키 배포 필요
 - 이랑이가 SSH 키 생성 + 각 자매 서버에 authorized_keys 추가
--- a/.plans/design/api-design.md
+++ b/.plans/design/api-design.md
@@ -1,71 +1,280 @@
-# API 설계
+# API 설계 — SPRINT-018 truth contract
 ## 목적
 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
- 인증: MVP에서는 인증 없음 (내부망 전용). 추후 JWT 추가 가능.
+- WS Namespace: `/ws`
- 에러 형식: `{ "statusCode": 400, "message": "...", "error": "Bad Request" }`
+- 기본 에러 형식: `{ "statusCode": 400, "message": "...", "error": "Bad Request" }`
 - 읽기 API와 쓰기 API 권한은 분리해서 다룬다
-## Sisters (자매 상태)
+## source taxonomy
 | source | 의미 | UI 규칙 |
 |---|---|---|
 | `live` | runtime 또는 websocket 기준 최신 상태 | 가장 강한 source |
 | `mirrored_event` | event stream을 dashboard용으로 미러링한 상태 | live처럼 과장하지 않음 |
 | `snapshot` | polling / REST 스냅샷 | 최신 시각과 같이 표시 |
 | `doc_derived` | QA/HOTFIX/문서에서 파생한 값 | 운영 기록으로 표시 |
 | `fallback` | 원본 없음, seed/default/보정 데이터 | 추정치임을 숨기지 않음 |
-| Method | Endpoint | 설명 |
+## 용어 계약
-|--------|----------|------|
+| 필드 | 의미 | 비고 |
-| GET | `/api/sisters` | 4자매 상태 목록 (SSH로 실시간 조회) |
+|---|---|---|
-| GET | `/api/sisters/:name` | 자매 상세 (설정 + 상태) |
+| `connection` | 연결 상태 | socket/gateway/runtime 가능 여부 |
-| GET | `/api/sisters/:name/config` | openclaw.json 내용 |
+| `activity` | 최근 활동 상태 | event/session/task evidence |
-| GET | `/api/sisters/:name/sessions` | 최근 세션 목록 |
+| `working` | 명시적 운영 상태 | 추정치와 확정치를 분리 |
-| GET | `/api/sisters/:name/subagents` | 서브에이전트 사용 현황 |
+| `freshness` | 생성/동기화 시각 | source와 별도 필드 |
-| POST | `/api/sisters/:name/restart` | Gateway 재시작 (관리자) |
+| `source` | 값의 출처 | field-level 또는 section-level |
-| POST | `/api/sisters/:name/reset` | 세션 리셋 (관리자) |
+
 ## 공통 view-model 규칙
 ### 1. 연결과 활동을 분리한다
 - `connection.connected=true`여도 `activity.state='idle'`일 수 있다
 - `connection.connected=false`여도 마지막 `snapshot`은 남아 있을 수 있다
 ### 2. `working`은 별도 필드다
 `working`은 단순히 `thinking/tool_calling/speaking + gatewayConnected` 조합으로 확정하지 않는다.
 권장 형태:
 ```json
 {
  "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
 // Response 200
 [
  {
    "name": "harang",
-    "displayName": "하랑이",
+    "role": "Orchestrator",
-    "ip": "10.10.10.112",
+    "connection": {
-    "status": "online",
+      "gateway": "connected",
-    "lastSeen": "2026-04-04T01:45:00Z",
+      "runtime": "connected"
-    "role": "Orchestrator"
+    },
    "activity": {
      "state": "idle",
      "label": "No recent operator event",
      "lastActiveAt": "2026-04-09T01:20:00.000Z"
    },
    "working": {
      "state": "idle",
      "confidence": "confirmed",
      "reason": null,
      "label": null
    },
    "source": "snapshot",
    "freshness": {
      "lastSnapshotAt": "2026-04-09T01:20:10.000Z"
    }
  }
 ]
 ```
-## Projects (프로젝트)
+### GET `/api/sisters/runtime`
 runtime 세부 source다.
-| Method | Endpoint | 설명 |
+최소 필드:
-|--------|----------|------|
+- `gatewayConnected`
-| GET | `/api/projects` | 프로젝트 목록 (Gitea API 연동) |
+- `mainState`
-| GET | `/api/projects/:id` | 프로젝트 상세 + Sprint + Task |
+- `currentTask`
-| GET | `/api/projects/:id/tasks` | Task Ledger |
+- `activeSessionLabel`
-| GET | `/api/projects/:id/activity` | 활동 로그 |
+- `activeSessionUpdatedAt`
 - `recentMessages`
 - `subagents`
 - `source`
 - `freshness`
-## Activity (활동 피드)
+### 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 |
-| Method | Endpoint | 설명 |
+## Dashboard ops contract
 |--------|----------|------|
 | GET | `/api/activity` | 전체 최근 활동 피드 (limit, offset) |
-## Org (조직도)
+### GET `/api/dashboard/ops`
 `/`와 `/office` 상단 summary가 같이 보는 executive contract다.
-| Method | Endpoint | 설명 |
+최소 필드:
-|--------|----------|------|
+```json
-| GET | `/api/org` | 조직도 데이터 (자매 + 서브에이전트 트리) |
+{
  "focusProject": {
    "name": "hanarang-dashboard",
    "phase": "IMPLEMENT",
    "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"
  }
 }
 ```
-## Admin (관리자)
+### dashboard 계약 규칙
 - `socket on/off`는 connection badge로만 쓴다
 - `freshness` badge는 별도로 보여준다
 - `owner`가 없으면 `null` 유지, fallback sister 고정 노출 금지
 - `focus`가 recent activity 기반 추정이면 `source='mirrored_event'` 또는 `snapshot`으로 표기한다
-| Method | Endpoint | 설명 |
+## Project detail contract
 |--------|----------|------|
 | 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
+### GET `/api/projects/:id`
 프로젝트 상세 응답은 participant와 assignee를 분리한다.
-| Method | Endpoint | 설명 |
+권장 shape:
-|--------|----------|------|
+```json
-| GET | `/health` | 서버 상태 확인 |
+{
  "id": 18,
  "name": "hanarang-dashboard",
  "phase": "QA",
  "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 없는 항목을 허용하지 않는다
 - `currentOwners`와 `taskAssigneeAggregate`는 별도 섹션으로 쓴다
 - 참여자 없음은 정상 상태다. `null`/empty를 숨기지 않는다
 ## Org contract
 ### GET `/api/org`
 단순 sister tree 대신 회사형 데이터 구조를 준다.
 권장 shape:
 ```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 계약 규칙
 - `independentAgents`와 `sisterOwnedAgents`를 구분한다
 - 특정 자매를 항상 root로 하드코딩하지 않는다
 - org 화면에서도 `status / source / freshness` 필드를 재사용한다
 ## 인증 규칙
 - 읽기 API는 현재 공개 조회와 관리자 조회가 섞여 있으므로 endpoint별로 명시한다
 - direct chat (`POST /api/sisters/:name/chat`) 은 JWT 필수
 - WebSocket 연결은 JWT 필수
 - JWT 없음 상태는 프론트에서 `send disabled reason`까지 표시해야 한다
 ## QA 체크 포인트
 - `working`이 fallback seed에서 주입되지 않는지
 - `socket`과 `freshness`가 같은 label로 뭉치지 않는지
 - `owner`, `participant`, `assignee`가 서로 다른 필드로 내려오는지
 - `/api/org`가 independent agents를 누락하지 않는지
 - `360px`, `390px` UI에서 긴 source 문구가 줄바꿈되는지
 ## out-of-scope
 - 실제 DTO 구현 상세
 - activity evidence 저장소 개선
 - org 편집 API
--- a/.plans/design/architecture.md
+++ b/.plans/design/architecture.md
@@ -44,5 +44,5 @@ Backend가 SSH로 각 자매 서버에서 수집:
 ## 배포
 - **Dev 서버:** 10.10.10.169
 - **프로세스 관리:** PM2
- **FE:** pm2 start npm --name hanarang-web -- start (포트 3004)
+- **FE:** `pm2 start npm --name hanarang-web --cwd /path/to/hanarang-dashboard/frontend -- start -- -p 3004`
- **BE:** pm2 start dist/main.js --name hanarang-api (포트 3005)
+- **BE:** `pm2 start backend/dist/src/main.js --name hanarang-api --cwd /path/to/hanarang-dashboard` (포트 3005)
--- a/.plans/design/index.md
+++ b/.plans/design/index.md
@@ -8,6 +8,8 @@
 ## 페이지별 UI
 - `ui/dashboard-design.md`
 - `ui/office-dashboard-design.md`
 - `ui/office-chat-design.md`
 - `ui/projects-page-design.md`
 - `ui/project-detail-design.md`
 - `ui/sister-detail-design.md`
@@ -19,8 +21,20 @@
 ## 레퍼런스
 - `references/07-master-dashboard-v3-reference.md`
-## Sprint 015에서 반드시 반영할 화면
+## 현재 우선 문서
- 대시보드 메인: Master Dashboard v3 구조 반영
+- Sprint 실행 기준: `../sprints/SPRINT-017.md`
- 핵심 섹션: Global Status Bar / 4자매 상태 카드 / `ACTIVE PIPELINE`
+- 제품 비전: `../../docs/product-specs/openclaw-office-dashboard-prd.md`
- 운영 패널: `ACTIVITY FEED`, `SPRINT METRICS`, `INFRASTRUCTURE OVERVIEW`, `MISTAKE LOG & HARNESS`
+- 실행 개요: `../OVERVIEW.md`
- 모바일: 데스크톱 구조를 억지로 축소하지 말고 세로 읽기 흐름으로 재배열
+
 ## SPRINT-017에서 반드시 잠글 것
 - 오피스 메인: Desktop / Tablet / Mobile 정보 우선순위
 - 오피스 채팅: JWT 필요, 전송 실패, empty state 처리
 - 운영 패널: active workflow / sprint / review loop / deploy gate / server health 상태 톤 통일
 - 실시간 모델: `live / snapshot / fallback` 판정 규칙
 - WS + polling reconciliation: stale / reconnect / downgrade 기준
 ## Git 기준 확인 경로
 - `/office` entry: `frontend/app/office/page.tsx`
 - scene: `frontend/components/office/OfficeScene.tsx`
 - chat: `frontend/components/office/ChatWorkspace.tsx`
 - ws gateway: `backend/src/events/events.gateway.ts`
--- a/.plans/design/ui/dashboard-design.md
+++ b/.plans/design/ui/dashboard-design.md
@@ -1,239 +1,122 @@
-# 대시보드 메인 (`/`) — Sprint 015 Master Dashboard v3
+# `/` UI 기준 — SPRINT-018 executive snapshot
-## 목적
+## 문서 목적
-대시보드 메인은 단순 요약 화면이 아니라, 자기야가 들어오자마자 `지금 4자매 파이프라인이 어디까지 와 있는지` 즉시 판단할 수 있는 대표 운영 화면이어야 해.
+메인 대시보드(`/`)를 가장 중요한 운영 변화만 짧게 읽는 **executive snapshot**으로 다시 잠근다. HOTFIX-006의 문구 절제와 source 정합성 보정을 포함하고, 이번 Sprint에서는 `socket`, `freshness`, `owner`, `source`를 오해 없이 분리한다.
-이번 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`
- 짙은 배경 + 얇은 border + mono 보조 텍스트
+- `backend/src/dashboard/dashboard.service.ts`
- 4자매 중심 세계관/역할 구분
+- `backend/src/sisters/sisters.service.ts`
 - 모바일 하단 탭바와 기존 페이지 동선
-## 강하게 가져올 것
+## 페이지 역할
- 상단 global status bar 구조
+`/`는 live intervention 화면이 아니야. 여기서는 운영자가 아래를 빠르게 판단해야 한다.
- 4자매 카드 1행 배치
+- 지금 focus가 어디 있나
- `ACTIVE PIPELINE` 중심 운영 다이어그램
+- 최근 event는 언제 있었나
- `ACTIVITY FEED` + `SPRINT METRICS` 병렬 구조
+- active owner가 있나 없나
- `INFRASTRUCTURE OVERVIEW` + `MISTAKE LOG & HARNESS` 하단 운영 패널 구조
+- 어떤 섹션이 live / mirrored event / snapshot / doc-derived / fallback 인가
-## 줄일 것
+## 핵심 문제
- 과한 glow
+현재 구현에서 바로 고쳐야 하는 점:
- 장식성 애니메이션 남발
+- `socket off`가 전체 오류처럼 읽힌다
- 의미 없이 많은 뱃지/배경 장식
+- snapshot freshness와 socket 연결 여부가 같은 줄에서 섞인다
- mock 대시보드처럼 보이는 가짜 숫자 강조
+- owner가 없을 때 fallback sister가 고정 노출된다
 - focus summary와 panel copy가 길고 설명형이다
---
+## top bar 규칙
 ### 좌측
 - `MASTER DASHBOARD` 또는 동급 짧은 label
 - focus headline 1개
-## 전체 레이아웃
+### 중앙
-### 1. Top Global Status Bar
+- current project / current sprint / deploy state
 한 줄 또는 반응형 2단 구조.
-#### 좌측
+### 우측
- 브랜드/제품명
+- connection badge
- 현재 페이지 정체성 (`Master Dashboard`)
+- freshness badge
 - active owner 또는 `NO ACTIVE OWNER`
-#### 중앙
+## connection / freshness 분리 규칙
- 현재 Sprint / Day / focus summary
+| badge | 의미 | 예시 |
- 진행률 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` |
-#### 우측
+### 금지
- Discord/Runtime 연결 상태
+- `socket off` 하나만 보고 오류처럼 보이게 만들기
- 알림 진입점
+- connection badge를 source badge 대신 쓰기
- operator/avatar 요약
+- freshness 없는 `LIVE` 라벨 단독 사용
-#### UX 기준
+## owner 표현 규칙
- 상단에서 현재 운영 국면을 짧게 읽을 수 있어야 함
+- active owner는 source와 why-visible이 있을 때만 강하게 노출
- 모바일에서는 좌/중/우를 무리하게 한 줄에 우겨넣지 말고 2단으로 자연스럽게 접기
+- owner가 없으면 `NO ACTIVE OWNER` 또는 `UNASSIGNED`로 표시
 - 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 Cards Row
+### 2. sister status row
-4자매 카드는 1행 핵심 상태 영역.
+카드는 짧고 운영형으로 유지한다.
-#### 공통 정보
+각 카드 최소 정보:
- 이름
+- name
- 역할
+- role
- 상태 (`IDLE`, `WORKING`, `REVIEWING`, `OFFLINE`, `DEPLOYING` 등)
+- truthful state (`active working`, `connected idle`, `snapshot only`, `offline`)
- CPU / RAM 또는 대응 리소스 지표
+- short summary 1줄
- 현재 작업 한 줄 요약
+- source/freshness meta
-#### 역할별 색 기준
+### 3. active pipeline
- Harang: amber
+- 실제 event mirrored인지, snapshot inference인지 표시
- Narang: sky
+- `NO ACTIVE HANDOFF`, `NO CONFIRMED REVIEW LOOP` 같은 neutral empty state 허용
- Darang: pink
+- 추정치 문장을 확정 사실처럼 쓰지 않는다
 - Irang: violet
-#### 상태 표현 규칙
+### 4. activity feed / metrics
- 색은 역할 + 현재 상태를 같이 전달해야 함
+- activity feed는 근거
- working/reviewing처럼 active 상태일 때만 강한 강조
+- metrics는 요약
- idle은 조용하게
+- source가 다른 값은 같은 카드 안에서 섞지 않는다
 - offline은 회색/경고 계열로 분명히 구분
-#### 카드 UX 기준
+### 5. infra / board
- 네 카드의 높이/구조는 최대한 동일
+- infra: runtime/snapshot 상태
- 긴 텍스트는 1줄 또는 2줄 clamp
+- board: harness/qa 같은 doc-derived 또는 activity-derived 기록
- CPU/RAM은 숫자와 bar를 함께 보여줘도 되지만 과장하지 말 것
+- 각 카드에 source badge를 유지한다
 - 아바타/아이콘은 보조 요소고, 상태 텍스트가 주인공이어야 함
---
+## copy rules
 - 짧은 운영형 문장 우선
 - 설명문, 감상문, 구현 메타 문장 금지
 - `~정리했어`, `~보여준다` 같은 자기설명 금지
 - owner/focus/fallback 문구는 neutral tone 사용
-### 3. `ACTIVE PIPELINE`
+권장 예시:
-이번 v3의 대표 섹션.
+- `EVENT STREAM OFF`
 - `SNAPSHOT 58s AGO`
 - `NO ACTIVE OWNER`
 - `DOC-DERIVED`
 - `NO RECENT QA`
 - `MIRRORED EVENT`
-#### 목적
+## mobile 360 / 390 rules
-User → Harang → Narang → Darang → Irang 흐름과, maker-checker loop, escalation 조건을 한눈에 보여준다.
+- top bar chip은 wrap 허용
 - owner 영역은 avatar + label 고정폭 금지
 - focus summary는 1~2문장 대신 짧은 label + short detail 사용
 - sister card, pipeline card, board card, git/meta row에서 horizontal scroll 금지
-#### 기본 노드
+## acceptance
- User
+- socket 연결 여부와 freshness가 별도 라벨로 보인다
- Harang (`Plan & Assign`)
+- `socket off`가 오류처럼 읽히지 않는다
- Narang (`Implement` or active task id)
+- owner가 없을 때 fallback owner 고정 노출이 사라진다
- Darang (`Review / QA`)
+- 카드 문구가 짧은 운영형 문장으로 정리된다
- Irang (`Deploy / Idle`)
+- 주요 섹션이 `live / mirrored event / snapshot / doc-derived / fallback` 중 무엇인지 일관되게 보인다
-#### 보여줄 정보
+## rollout note
- 현재 active task 또는 ticket id
+- HOTFIX-006에서 잠근 source/freshness 원칙을 홈 전체 IA에 확대 적용한다
- Narang ↔ Darang review loop
+- `/office`와 달리 `/`는 intervention CTA보다 snapshot readability를 우선한다
 - 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-chat-design.md
+++ b/.plans/design/ui/office-chat-design.md
@@ -0,0 +1,150 @@
 # 오피스 direct chat UI 기준 — SPRINT-017 모바일 개편
 ## 문서 목적
 `ChatWorkspace.tsx`를 모바일 direct chat 기준으로 다시 정리하기 위한 문서야. 기준 Sprint는 `.plans/sprints/SPRINT-017.md`이고, 메인 IA와 first viewport 원칙은 `.plans/design/ui/office-dashboard-design.md`를 따른다.
 ## 기준 구현 파일
 - `frontend/components/office/ChatWorkspace.tsx`
 - `frontend/app/office/page.tsx`
 - 연관 문서: `.plans/design/ui/office-dashboard-design.md`
 ## breakpoint 기준
 - `360px`: minimum mobile compact
 - `390px`: primary mobile baseline
 - `768px`: tablet transition
 - `1280px+`: desktop baseline
 ## 현재 main 구현에서 확인된 문제
 - `page.tsx`에서 chat은 `ChatArea` 고정 높이(`520px`, 모바일 `460px`) 안에 들어가 세로 흐름을 끊는다.
 - `ChatWorkspace.tsx`는 모바일에서도 데스크톱 구조의 흔적이 강하다.
  - 자매 탭, 메시지, 보조 컨텍스트가 분리되어 있다.
  - `SisterContext`는 `1199px` 미만에서 숨겨져 모바일 보조 정보가 사라진다.
  - `SendBtn`은 토큰이 없으면 disabled라서, `JWT 없음` 이유를 화면에서 놓치기 쉽다.
 - empty 상태 문구는 있지만, `JWT 없음 / error / runtime 확인 중`이 같은 강도로 정리되어 있지 않다.
 ## 모바일 direct chat 원칙
 1. **한 컬럼 흐름**
   - mobile(` <768`)에서는 탭 → 상태 → 타임라인 → composer → 보조 정보 순서로 한 컬럼으로 간다.
 2. **전송 가능 여부를 숨기지 않기**
   - `JWT 없음`이면 입력 근처에서 바로 이유를 보여준다.
 3. **상태는 상단에 짧게**
   - runtime/source 상태는 header 또는 composer 상단에서 한 번에 읽히게 한다.
 4. **메시지가 우선**
   - 보조 컨텍스트보다 타임라인과 입력창이 우선이다.
 5. **고정 높이 최소화**
   - 460px 박스 안에 억지로 채우지 않는다.
 ## mobile layout
 모바일 기본 순서는 아래야.
 ### 1. sister switcher
 - 4자매 전환을 상단 compact tab 또는 segmented control로 둔다
 - 이름과 active 상태만 짧게 보여준다
 - role 전체 문구는 모바일에서 숨기거나 축약한다
 ### 2. runtime / source badge row
 상단 배지 영역에서 아래를 보여준다.
 - runtime 상태: `연결됨`, `확인 중`, `stale`, `error`
 - source badge: `live`, `snapshot`, `fallback`
 - 필요 시 현재 자매 상태(`thinking`, `tool_calling`, `speaking`, `idle`)
 ### 3. timeline
 - 메시지 타임라인은 화면에서 가장 큰 비중을 차지한다
 - `user / assistant / tool` 구분은 유지한다
 - tool 메시지는 mono 또는 강조 배경 유지
 - 버블 최대 폭은 모바일에서 너무 좁아지지 않게 조정한다
 ### 4. composer
 - 입력창과 전송 버튼은 타임라인 바로 아래
 - `Enter = 전송`, `Shift+Enter = 줄바꿈` 힌트는 짧게 유지
 - 전송 불가 상태면 버튼만 막지 말고 이유를 붙인다
 ### 5. support state block
 모바일에서는 숨기지 말고 composer 아래 또는 접이식 블록으로 둔다.
 - current task
 - active session label
 - data source 설명 한 줄
 ## 상태 배지 규칙
 ### source badge
 - `live`: runtime 연결 또는 최신 상태 반영 중
 - `snapshot`: 마지막 조회 스냅샷 표시 중
 - `fallback`: 기본값 또는 보조 데이터 기준
 ### runtime badge
 - `연결됨`: gatewayConnected = true
 - `확인 중`: 아직 runtime snapshot 수신 전
 - `stale`: 최근 업데이트가 늦음
 - `오류`: 전송 또는 조회 실패
 ### 배지 위치
 - header 오른쪽 또는 바로 아래 1줄
 - 모바일에서는 긴 설명 대신 짧은 라벨 + 보조 문구 1개만 둔다
 ## empty / error / JWT 없음 UX
 ### empty
 조건:
 - 메시지 없음
 - 최근 runtime 메시지도 없음
 표현:
 - "아직 대화가 없어"
 - 바로 보낼 수 있는 예시 액션 1개 또는 placeholder
 - runtime 상태 보조 문구
 ### JWT 없음
 조건:
 - `localStorage` 토큰 없음
 - 또는 인증이 풀려 전송 불가
 표현:
 - 입력 근처에 즉시 보이는 경고 문구
 - 예: `로그인이 풀려서 지금은 전송할 수 없어. 다시 로그인해.`
 - 전송 버튼 disabled만 두고 끝내지 않는다
 ### 전송 실패
 조건:
 - `/api/sisters/:name/chat` 실패
 표현:
 - 타임라인 내 실패 메시지 유지
 - composer 근처에 `다시 시도` 또는 실패 이유 보조 문구
 - 실패와 empty를 같은 문구로 합치지 않는다
 ### runtime 확인 중
 조건:
 - runtime snapshot 미수신 또는 gateway 미연결
 표현:
 - header 배지 또는 상태 줄에 표시
 - 메시지 전송 가능 여부와 별개인지 함께 설명
 ## 메시지 규칙
 - `user`: 우측 또는 구분되는 배경
 - `assistant`: 기본 응답 버블
 - `tool`: mono 스타일과 별도 톤 유지
 - timestamp는 보조 정보로만 노출
 - 모바일에서 버블 폭이 지나치게 좁아 읽기 어렵지 않게 한다
 ## mobile에서 숨기면 안 되는 정보
 - active sister
 - runtime/source 상태
 - current task 또는 active session 중 하나
 - JWT 없음 / 전송 실패 이유
 ## desktop / tablet 유지 규칙
 ### desktop (`1280px+`)
 - 현재 3열 느낌을 유지해도 돼
 - 다만 source/runtime 라벨과 상태 문구는 모바일 기준과 통일해
 ### tablet (`768px`)
 - 좌측 자매 전환 + 중앙 타임라인 구조 유지 가능
 - 우측 보조 패널이 사라져도 핵심 상태는 상단에서 읽혀야 해
 ## QA 체크 포인트
 - `360px`, `390px`에서 탭, 타임라인, 입력창이 겹치지 않는지
 - 입력창이 키보드 노출 시 잘리지 않는지
 - `JWT 없음` 상태가 버튼 disabled 외에 문구로도 보이는지
 - `empty`, `runtime 확인 중`, `전송 실패`가 서로 다른 문구로 보이는지
 - `user / assistant / tool` 구분이 모바일에서도 유지되는지
 - source badge와 runtime badge가 다른 의미로 명확히 읽히는지
--- a/.plans/design/ui/office-dashboard-design.md
+++ b/.plans/design/ui/office-dashboard-design.md
@@ -0,0 +1,172 @@
 # `/office` UI 기준 — SPRINT-018 live operations workspace
 ## 문서 목적
 `/office`를 4개 긴 박스 조합이 아니라 **group mental model 중심 live operations workspace**로 다시 잠그는 문서야. SPRINT-017의 mobile-first IA를 유지하되, 이번 Sprint에서는 `working`, `source`, `freshness`, `default context` 의미를 더 엄격하게 정의한다.
 ## 참고 문서
 - 실행 개요: `.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`
 ## 페이지 역할
 `/office`는 executive summary가 아니라 **바로 개입하는 운영 화면**이야.
 핵심 질문:
 1. 누가 연결돼 있나
 2. 누가 실제로 working 중인가
 3. 어떤 group이 막혀 있나
 4. 지금 어디에 말 걸면 되나
 ## 정보 구조 원칙
 1. **group mental model 유지**
   - 자매를 개별 카드 나열로만 보지 않고 `planning / delivery / review / deploy` group 흐름으로 묶는다
 2. **scene은 운영 지도여야 함**
   - 데스크톱 scene은 decorative office가 아니라 group 상태와 선택을 보여주는 요약 지도여야 한다
 3. **빈 context 금지**
   - 첫 진입 시 `선택하세요` 대신 기본 운영 summary를 보여준다
 4. **truthful status**
   - `connected idle`, `active working`, `snapshot only`, `fallback`, `offline`을 구분한다
 5. **mobile overflow 금지**
   - `360px`, `390px` 기준 긴 badge, 긴 detail, 긴 source 문구는 wrap되고 horizontal scroll이 없어야 한다
 ## source / status 라벨
 | 라벨 | 의미 | 금지 |
 |---|---|---|
 | `live` | runtime 또는 ws 기반 최신 상태 | snapshot과 같은 톤으로 보이게 하기 |
 | `snapshot` | polling 기준 마지막 스냅샷 | live처럼 pulse 주기 |
 | `fallback` | 보정 데이터 | working으로 읽히는 색 주기 |
 | `connected idle` | 연결됨, 최근 작업 없음 | working 색 재사용 |
 | `active working` | 명시적 작업 중 | 단순 task string 존재만으로 확정하기 |
 | `offline` | 연결 불가 | stale snapshot과 같은 카드 처리 |
 ## desktop IA (`1280px+`)
 ### 레이아웃
 `summary rail + group scene + context rail + bottom detail panels`
 ### 1. summary rail
 - 현재 focus
 - connection summary
 - 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 최소 정보:
 - group label
 - connected count / working count
 - primary blocker 또는 `all clear`
 - 대표 source badge
 ### 3. context rail
 선택 상태와 무관하게 기본 summary가 먼저 보인다.
 기본 summary 우선순위:
 1. current focus
 2. current blocker
 3. active working group
 4. quick actions
 선택 후 context는 아래로 바뀐다.
 - selected sister summary
 - recent session / task evidence
 - why this looks active
 - open chat CTA
 ### 4. bottom detail panels
 순서:
 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
 - active working summary
 - quick action
 ### 2. group blocks
 - 4자매 individual card보다 group block 우선
 - 각 block 안에서 대표 sister와 상태를 요약
 - 선택 시 inline expand 또는 accordion으로 detail 표시
 ### 3. detail flow
 모바일에서는 `800x460` scene 축소판을 사용하지 않는다.
 세부 흐름 순서:
 1. chat
 2. pipeline
 3. health
 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 반영 규칙
 - JWT 없음, runtime 확인 중, empty, error, send disabled reason을 상단 또는 입력부 근처에 즉시 노출
 - chat이 열리지 않은 기본 상태에서도 요약 CTA는 보여야 한다
 - mobile에서 고정 높이 중심 설계 금지
 ## PipelinePanel 반영 규칙
 - 가로 카드열 금지
 - 세로 단계 흐름 또는 responsive stack 사용
 - `focus`, `review loop`, `deploy state`, `source/freshness`를 상단 요약으로 먼저 보여준다
 ## ServerHealthPanel 반영 규칙
 - 상단에는 health summary만 먼저 노출
 - 긴 detail/source 문구는 wrap되어야 한다
 - `connected idle`, `snapshot only`, `fallback`, `offline`을 다른 상태로 읽히게 한다
 ## 상태 표현 규칙
 | 상태 | 문구 예시 |
 |---|---|
 | loading | `데이터 확인 중` |
 | empty | `표시할 운영 항목 없음` |
 | error | `가져오지 못함` |
 | stale | `마지막 확인값 표시 중` |
 | jwt_missing | `JWT 없음, 전송 불가` |
 `empty`와 `error`는 절대 같은 문구를 쓰지 않는다.
 ## 360 / 390 responsive rules
 - 카드 title, badge, meta는 2줄까지 wrap 허용
 - source label은 short token 우선 (`live`, `snapshot`, `fallback`)
 - `generated 10:31:02` 같은 긴 freshness 문구는 한 줄 고정 금지
 - 전체 페이지와 하위 패널에서 horizontal scroll 금지
 ## acceptance
 - `/office` desktop이 4개 긴 박스 분해형이 아니라 group/scene 중심으로 재구성된다
 - mobile에서 scene 축소판이 사라지고 `summary → group blocks → detail flow`가 된다
 - 첫 진입 시 빈 context가 아니라 기본 운영 summary가 보인다
 - selected / unselected 상태 모두 `360px`, `390px`에서 overflow 없이 읽힌다
 - `working`은 source-of-truth 기준으로만 강조된다
 ## rollout note
 - SPRINT-017의 모바일 정보 순서는 유지한다
 - 이번 Sprint에서 바꾸는 건 scene semantics, default context, truthful state labels다
--- a/.plans/design/ui/org-design.md
+++ b/.plans/design/ui/org-design.md
@@ -1,97 +1,121 @@
-# 조직도 (`/org`) — 디자인 v2
+# `/org` UI 기준 — SPRINT-018 company org map
-> 참조: 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`
-│ 64px│  SYS_TYPE: CORE_ROOT_01        2023.10.27_14:42     │
+- `backend/src/sisters/sister-detail.service.ts`
 │     │  ──────────────────────────────────────────────────  │
 │     │                                                      │
 │ 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  │
 └─────┴──────────────────────────────────────────────────────┘
 ```
-## 사이드바 (조직도 전용)
+## 현재 문제
- **64px 너비** (다른 페이지의 240px과 다름)
+- 현재 화면은 하랑이 root 고정형 terminal tree다
- 세로 텍스트: `writing-mode: vertical-rl`
+- 자매 외 조직 단위가 없다
- 아이콘 모드: DASH / PROJ / ORG_TREE / CONF
+- independent agents가 표현되지 않는다
- 로고: 세로 배치 (circle-full 위, circle-half 아래)
+- mobile에서는 tree 한 벌이 사실상 읽기 어렵다
 - source / freshness / status가 다른 페이지와 같은 의미로 보이지 않는다
-## 메인 뷰포트
+## 페이지 역할
- 배경: dot grid pattern — `radial-gradient(circle, #1a1a1a 1px, transparent 1px)` / 30px 30px
+핵심 질문:
- `overflow: auto` (스크롤 가능)
+1. 회사 조직 단위는 어떻게 나뉘어 있나
- padding: 40px, 중앙 정렬
+2. 각 unit lead와 member는 누구인가
 3. independent agents는 어느 영역에 속하지 않는가
 4. 현재 status / source / freshness는 무엇인가
-## 헤더
+## 정보 구조
- 좌: `SYS_TYPE: CORE_ROOT_01` (mono, 값은 흰색)
+### 1. org summary header
- 우: `TIMESTAMP: 2023.10.27_14:42` (mono secondary)
+- org generated time
- border-bottom 1px
+- source badge
 - total units
 - total members
 - independent agents count
-## 트리 구조
+### 2. HQ section
 - HQ card
 - lead
 - 핵심 responsibility
 - direct reports summary
-### Terminal Card
+### 3. functional teams
- 200px 너비, padding 12px
+예시:
- `border: 1px solid var(--border-color)`
+- Planning / Program
- **border-left: 3px solid** (레벨별 색상)
+- Delivery
-  - high (`#f43f5e`): HQ
+- QA / Review
-  - mid (`#3b82f6`): R&D, Core Engine, Infrastructure
+- Infra / Deploy
  - 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 최소 정보:
- `−` / `+` 아이콘, 16x16px
+- team name
- 카드 하단 중앙 absolute 배치
+- lead
- bg: card bg, border 1px
+- member chips
 - active status summary
 - source/freshness
-### 연결선
+### 4. independent agents
- 세로선: `width: 1px; background: var(--border-color)`
+조직도 하단 또는 병렬 rail에 별도 배치한다.
 - 가로선 (형제 연결): children `::before` — 상단 -40px
-### 트리 구조
+각 항목 최소 정보:
-```
+- name
-하나랑 글로벌 (HQ, high)
+- type (`independent` / `sister-owned`)
-├── 기술연구소 (R&D, mid)
+- owner sister 또는 `none`
-│   ├── Core Engine (mid)
+- role / purpose
-│   └── Infrastructure (mid)
+- status / source / freshness
 ├── 운영지원팀 (OPS, low)
 │   └── Monitoring (low)
 └── 외부 협력사 (EXT, low)
    └── Security Audit (low)
 ```
-## 푸터
+### 5. reporting lines
- `margin-top: auto; border-top: 1px solid`
+desktop에서는 라인/connector를 써도 되지만, line이 없어도 hierarchy를 읽을 수 있어야 한다. mobile은 connector보다 section order와 labels를 우선한다.
 - 좌: `TOTAL_NODES: 07`
 - 우: `STATUS: SYNC_COMPLETE`
 - mono 10px secondary
-## 모바일 반응형
+## data contract rules
- 사이드바: 하단 탭바로 전환
+- `orgUnits`, `members`, `reportingLines`, `independentAgents`로 렌더링 가능해야 한다
- 트리: 수평 스크롤 컨테이너 + 핀치 줌
+- hard-coded `harang -> narang/darang/erang` 구조 금지
- terminal-card: 너비 160px으로 축소
+- member status는 다른 페이지와 같은 vocabulary를 사용한다
- badge 폰트: 8px
+  - `active working`
- dot grid: 20px 간격으로 축소
+  - `connected idle`
  - `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,43 +1,129 @@
-# 프로젝트 상세 (`/projects/[id]`) — Sprint 014 리뉴얼
+# `/projects/[id]` UI 기준 — SPRINT-018 delivery detail
-## 목적
+## 문서 목적
-프로젝트 상세는 Sprint 이력만 보여주는 화면이 아니라, 계획 → 구현 → QA → 배포 흐름이 실제로 어디까지 왔는지 판단하는 운영 화면이어야 해.
+프로젝트 상세는 delivery flow를 읽는 화면이지, unique assignee 목록을 현재 참여자처럼 보여주는 화면이 아니야. 이번 Sprint에서는 `participants`, `current owners`, `task assignees`를 truthfully 분리한다.
-## 상단 헤더
+## 참고 문서
- breadcrumb 유지
+- 실행 개요: `.plans/OVERVIEW.md`
- 제목 우측 메타:
+- Sprint: `.plans/sprints/SPRINT-018.md`
-  - project status
+- API 설계: `.plans/design/api-design.md`
 ## 기준 구현 파일
 - `frontend/app/projects/[id]/page.tsx`
 - `backend/src/projects/*`
 ## 현재 문제
 - `ASSIGNED NODES`가 실제 participant와 task assignee를 섞어 읽히게 한다
 - 나랑이 단독 노출이 실제 active participant 확정처럼 보일 수 있다
 - 상단 overview, QA, deploy, flow, participant 시선 흐름이 답답하다
 - mobile `360px`, `390px`에서 flow/meta/git row가 쉽게 넘친다
 ## 페이지 역할
 핵심 질문:
 1. 이 프로젝트는 delivery flow 어디에 있나
 2. QA와 deploy 준비 상태는 어떤가
 3. 지금 왜 이 사람이 participant로 보이나
 4. task assignee 집계와 current owner는 누구인가
 ## 정보 구조
 ### 상단 overview
 - project title
 - phase
 - current sprint
-  - latest deploy state (`MAIN DEPLOYED` / `READY FOR REDEPLOY` 등)
+- deploy status
- repo 링크 유지
+- repo link
-## 본문 구조
+### 본문 1열 우선 순서
-### 좌측 메인
+1. delivery overview
-1. `DELIVERY FLOW`
+2. QA status
-   - Planning
+3. deploy status
-   - Implement
+4. participants / current owners
-   - QA
+5. sprint ledger
-   - Merge to Main
+6. hotfix history
-   - Redeploy
+7. git tabs
 2. `SPRINT LEDGER`
   - Sprint 번호 / 이름 / 진행률 / task 수 / 완료 수
 3. `HOTFIX HISTORY`
   - Hotfix 번호 / 한 줄 요약 / 반영 상태
-### 우측 보조
+desktop에서는 2열 배치를 허용하지만, participant 의미가 사이드카드 하나로 축소되면 안 된다.
 1. `QA STATUS`
   - latest passed/failed
   - blocker 수
   - latest QA 문서 식별자
 2. `DEPLOY STATUS`
   - 현재 배포 기준 브랜치 (`main` 고정)
   - last deploy time
   - redeploy pending 여부
 3. `ASSIGNED NODES`
   - 하랑/나랑/다랑/이랑 각 역할 표기
-## UX 규칙
+## participant model
- Sprint와 Hotfix는 분리해서 보여주되, 흐름상 연결감은 유지
+### section naming
- "보정/수정 이력" 같은 모호한 문구 대신 실제 요약 노출
+- `CURRENT OWNERS`
- 모바일에서는 `DELIVERY FLOW → QA STATUS → DEPLOY STATUS → SPRINT/HOTFIX` 순으로 재배치
+- `PARTICIPANTS`
- `NodeDot`는 실제 상태 기반으로 색이 바뀌어야 하며, 무조건 초록 고정이면 안 돼
+- `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-016-release-preflight.md
+++ b/.plans/qa/SPRINT-016-release-preflight.md
@@ -0,0 +1,93 @@
 # SPRINT-016 Release Preflight
 - 검증 대상 repo: `https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard`
 - 검증 대상 branch: `main`
 - 검증 대상 commit: `a9e1e677b0f129cc2f45e4f2624020d9d4626159` (`feat: merge SPRINT-016 isometric office dashboard`)
 - 기준 문서:
  - `.plans/sprints/SPRINT-016.md`
  - `.plans/design/ui/office-dashboard-design.md`
  - `.plans/design/ui/office-chat-design.md`
  - `docs/product-specs/openclaw-office-dashboard-prd.md`
  - `.plans/deploy/deploy-plan.md`
 - 검증자: 하랑
 - 검증일시: `2026-04-07 13:55 KST`
 - 결과: `✅ PASSED`
 - 재검증 필요 여부: `아니야. 다만 배포 직전 운영 env / WS 프록시 확인은 필요해.`
 ## 1. 이번 문서 보강 이유
 이번 `/office` 변경분은 코드 자체 preflight는 통과했는데, 배포 직전 확인 과정에서 아래 두 가지가 배포 게이트로 걸렸어.
 1. PM2 backend 실행 경로 문서가 실제 산출물과 달랐어.
 2. `/office` 변경에 대한 배포 전 검증 근거 문서가 `.plans/qa/`에 없었어.
 그래서 이번 문서는 **다랑이의 별도 브라우저 QA 보고서 대체가 아니라**, 현재 `main` 기준 배포 판단에 필요한 **release preflight 근거**를 남기는 용도야.
 ## 2. 실행 결과
 - [x] `frontend npm run lint` — 성공 (`0 errors`, `20 warnings`, 전부 기존 unused-var 경고)
 - [x] `frontend npm run build` — 성공
 - [x] `backend npm run build` — 성공
 - [x] `backend npm test -- --runInBand` — 성공 (`9 suites`, `26 tests` passed)
 - [x] `backend/dist/src/main.js` 실제 산출물 존재 확인
 - [x] Next build 결과에 `/office` route 포함 확인
 ## 3. 확인한 핵심 근거
 ### 배포 문서/산출물 정합성
 - 기존 문서의 backend PM2 경로 `dist/main.js`는 실제 빌드 결과와 달랐어.
 - 실제 Nest 진입 파일은 `backend/dist/src/main.js`였고, 배포 문서와 아키텍처 문서를 이 기준으로 수정했어.
 ### `/office` 변경분 상태
 - 오피스 대시보드 관련 파일이 `main`에 반영돼 있어.
  - `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`
 - Next production build 산출물에서 `/office`가 정적 라우트로 생성되는 것까지 확인했어.
 ### 코드 preflight
 - frontend는 lint/build 모두 통과했어.
 - backend는 build/test 모두 통과했어.
 - 현재 `main` 헤드는 `a9e1e67`로 고정 확인했어.
 ## 4. 배포 전 운영 체크
 이건 코드 blocker는 아니고, 이랑이가 배포 직전에 확인하면 돼.
 - Dev 서버 env
  - `DATABASE_URL`
  - `JWT_SECRET`
  - `SSH_KEY_PATH`
  - `GITEA_BASE_URL`
  - `GITEA_TOKEN`
  - `CORS_ORIGINS`
 - Frontend env
  - `NEXT_PUBLIC_API_URL`
  - 필요 시 `NEXT_PUBLIC_WS_URL`
 - Nginx websocket 프록시 또는 WS URL 설정
 ## 5. 최종 판정
 - **배포 문서 경로 오류 수정 완료**
 - **`/office` 변경분 release preflight 근거 문서화 완료**
 - **현재 기준 코드/빌드/테스트 blocker 없음**
 ## 6. 최종 JSON
 ```json
 {
  "type": "release_preflight",
  "from": "harang",
  "task_id": "SPRINT-016-RELEASE-PREFLIGHT",
  "repo": "https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard",
  "branch": "main",
  "commit": "a9e1e677b0f129cc2f45e4f2624020d9d4626159",
  "passed": true,
  "errors": [],
  "notes": [
    "PM2 backend entry corrected to backend/dist/src/main.js",
    "frontend lint/build passed",
    "backend build/test passed",
    "office route present in production build output",
    "deploy-time env and websocket proxy checks remain operational checks only"
  ],
  "suggestion": "Safe to proceed with deploy after environment and websocket configuration checks."
 }
 ```
--- a/.plans/qa/SPRINT-018-review-1.md
+++ b/.plans/qa/SPRINT-018-review-1.md
@@ -0,0 +1,92 @@
 # 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-016.md
+++ b/.plans/sprints/SPRINT-016.md
@@ -0,0 +1,218 @@
 # SPRINT-016: 4자매 Isometric Office Dashboard 재기획
 ## 목표
 기존 하나랑 대시보드를 `운영 패널 중심 UI`에서 한 단계 확장해, 4자매 메인 에이전트와 17개 서브에이전트가 실제로 협업하는 흐름을 **2D 등축 투영 오피스**로 시각화하는 차세대 관제 화면으로 재기획한다.
 핵심은 이거야.
 - 4자매의 고정 좌석과 역할이 한눈에 보여야 해
 - 서브에이전트가 어떤 워크플로우 안에서 움직이는지 보여야 해
 - 단순 예쁜 씬이 아니라 실시간 상태/협업/채팅/서버 헬스를 같이 판단할 수 있어야 해
 - OpenClaw Gateway WebSocket을 기준으로 실제 상태를 반영해야 해
 ## 참고 레퍼런스
 - 참고 프로젝트: `https://github.com/WW-AI-Lab/openclaw-office`
 - 채택 포인트:
  - 2D 등축 투영 오피스
  - 고정 좌석 + 동적 이동
  - 상태 애니메이션 / 연결선 / 회의실 은유
  - Chat 작업공간과 관리 패널 결합
 - 그대로 복제하지 않고, 하나랑 4자매 구조와 Lobster/Discord handoff 흐름에 맞게 번역한다.
 ## 운영 구조
 ### 메인 에이전트 (고정 데스크 / 독립 OpenClaw 인스턴스)
 - 하랑이 (Planning)
 - 나랑이 (Dev)
 - 다랑이 (QA)
 - 이랑이 (Infra)
 ### 서브에이전트
 - 하랑이: `planner`, `task-tracker`, `prd-writer`
 - 나랑이: `worker`, `db-designer`, `test-writer`, `refactorer`
 - 다랑이: `reviewer`, `code-reviewer`, `qa-tester`, `security-auditor`, `ux-reviewer`
 - 이랑이: `deploy-manager`, `db-manager`, `nginx-manager`, `monitoring`, `dns-manager`
 총 21개 에이전트 (main 4 + sub 17)
 ## 파이프라인 모델
 ### 자매 내부
 - Lobster 워크플로우 기반 순차 실행
 - 예:
  - `plan-sprint.lobster`
  - `implement-sprint.lobster`
  - `review-sprint.lobster`
  - `deploy-check.lobster`
 ### 자매 간
 - Discord 멘션 기반 자연어 핸드오프
 - `자기야 → 하랑이 → 나랑이 → 다랑이 → 이랑이`
 - 실패 시 `다랑이 → 나랑이` 되돌림 루프 지원
 ## 제품 목표
 1. 4자매와 서브에이전트 협업 구조를 직관적으로 보여준다
 2. OpenClaw Gateway WebSocket 기반 실시간 상태 모니터링을 제공한다
 3. 자매 선택 직접 채팅과 운영 관제를 한 제품 안에 통합한다
 4. Lobster 워크플로우 / 스프린트 / QA / 배포 흐름을 하나의 모델로 묶는다
 5. 서버 헬스와 에이전트 헬스를 같은 맥락에서 본다
 ## 범위
 - 메인 오피스 대시보드 (`/` 또는 신규 workspace landing)
 - 에이전트 상태 시각화
 - 회의실/협업 연결선/동적 이동 규칙
 - 자매 선택 직접 채팅 인터페이스
 - 파이프라인 현황 패널
 - 서버 상태 패널
 - 모바일/태블릿 대응 전략
 - 데이터 소스 / WebSocket 이벤트 / 폴링 보정 전략 문서화
 ## 제외 범위
 - 이번 Sprint에서 실제 Gateway 프로토콜을 새로 정의하지 않음
 - 3D 전환 안 함
 - 음성/영상 통화 기능 없음
 - 에이전트 생성/삭제 전체 관리 콘솔을 이번 Sprint 핵심으로 두지 않음
 ## 정보 구조
 ### 1. Office Scene
 - 4자매 고정 좌석
 - 각 자매 주변에 자기 서브에이전트 풀 배치
 - 상태에 따라 idle / thinking / tool_calling / speaking / error 시각화
 - 회의실 / 작업대 / 대기 구역 / 인프라 구역 구분
 ### 2. Agent Detail Layer
 - 선택한 자매/서브에이전트 상세
 - 현재 세션 / 최근 메시지 / tool call / 리소스 지표
 - 최근 handoff / 현재 워크플로우 단계
 ### 3. Chat Workspace
 - 자매 선택 direct chat
 - 최근 대화 히스토리
 - 작업 지시 / 응답 / 툴 호출 상태 확인
 ### 4. Pipeline Panel
 - 현재 Sprint
 - active Lobster workflow
 - cycle / retry / review loop
 - handoff 상태
 - deploy gate / approval 상태
 ### 5. Server Health Panel
 - 4자매 서버 헬스
 - Dev 서버
 - Docker/infra 상태
 - heartbeat / websocket / reconnect 상태
 ## 디자인 원칙
 1. **은유는 강하게, 판단은 더 강하게**
   - 오피스는 분위기용이 아니라 상태 판단용이야.
 2. **실시간 우선, 추정은 정직하게**
   - live / snapshot / doc-derived / fallback 구분 유지
 3. **고정 좌석 + 동적 이동**
   - 메인 자매는 늘 같은 자리에 있어야 함
   - 서브에이전트만 워크플로우에 따라 이동/연결
 4. **4자매 중심성 유지**
   - 21개 전체를 보여도 중심은 언제나 하랑/나랑/다랑/이랑이야
 5. **운영 패널과 오피스 뷰 결합**
   - 보기 좋은 씬만 있고 운영 판단이 안 되면 실패
 ## 기술 방향
 - Frontend: 기존 Next.js + styled-components 유지
 - Backend: 기존 Nest.js + Prisma 유지
 - 실시간: OpenClaw Gateway WebSocket 중심
 - 보조 동기화: low-frequency polling snapshot 허용
 - 렌더링: SVG + CSS animation 또는 canvas-lite 검토 가능
 - 상태 저장: 기존 구조 유지하되 office scene 전용 store 계층 검토
 ## 데이터 소스 기준
 | 대상 | 우선 소스 |
 |---|---|
 | 메인 에이전트 상태 | 4자매 Gateway WebSocket |
 | 서브에이전트 상태 | 각 자매 runtime/agent event + workflow 상태 |
 | 협업 연결선 | handoff / workflow transition / event stream |
 | 채팅 인터페이스 | session/chat API |
 | 파이프라인 현황 | Lobster workflow state + activity log |
 | 서버 헬스 | admin/system/health 계열 API |
 ## 태스크
 ### TASK-091: 제품 PRD 및 IA 재정의
 - **담당:** 하랑이
 - **상태:** pending
 - **산출물:**
  - `docs/product-specs/openclaw-office-dashboard-prd.md`
  - `.plans/OVERVIEW.md` 갱신
 - **완료 기준:**
  - 오피스 대시보드 비전/핵심 사용자/핵심 흐름/핵심 화면이 문서화됨
 ### TASK-092: 오피스 씬 레이아웃 설계
 - **담당:** 하랑이 → 나랑이
 - **상태:** pending
 - **산출물:**
  - `.plans/design/ui/office-dashboard-design.md`
 - **완료 기준:**
  - 4자매 좌석 / 서브에이전트 위치 / 회의실 / 인프라 구역 구조가 정의됨
 ### TASK-093: 채팅 워크스페이스 설계
 - **담당:** 하랑이 → 나랑이
 - **상태:** pending
 - **산출물:**
  - `.plans/design/ui/office-chat-design.md`
 - **완료 기준:**
  - 자매 선택 direct chat 구조와 패널 관계가 정의됨
 ### TASK-094: Gateway/WebSocket 실시간 모델 정의
 - **담당:** 나랑이
 - **상태:** pending
 - **주요 범위:**
  - 4개 Gateway 연결 전략
  - presence / health / workflow / agent event 정리
  - reconnect / reconciliation 규칙
 - **완료 기준:**
  - live / snapshot / fallback 구분이 문서와 코드 양쪽에서 유지됨
 ### TASK-095: 메인 오피스 씬 구현
 - **담당:** 나랑이
 - **상태:** pending
 - **완료 기준:**
  - 4자매 고정 좌석과 서브에이전트 동적 이동이 구현됨
  - 상태별 시각 표현이 동작함
 ### TASK-096: 협업 시각화 + 회의실 이동 구현
 - **담당:** 나랑이
 - **상태:** pending
 - **완료 기준:**
  - handoff 연결선
  - 회의실 이동 상태
  - review/deploy loop 표현이 동작함
 ### TASK-097: 직접 채팅 인터페이스 구현
 - **담당:** 나랑이
 - **상태:** pending
 - **완료 기준:**
  - 자매 선택 direct chat 가능
  - 최근 대화/응답/상태가 확인됨
 ### TASK-098: 서버 헬스 패널 구현
 - **담당:** 나랑이
 - **상태:** pending
 - **완료 기준:**
  - 4자매 + Dev + Docker 서버 상태가 함께 보임
 ### TASK-099: QA / 모바일 / 실브라우저 검증
 - **담당:** 다랑이
 - **상태:** pending
 - **완료 기준:**
  - Desktop / Tablet / Mobile 실브라우저 기준 확인
  - live/snapshot 구분 검증
  - 성능/가독성/blocker 확인
 ## 권장 구현 순서
 1. PRD / IA / 오피스 씬 문서화
 2. Gateway 실시간 모델 정리
 3. 메인 오피스 씬 구현
 4. 연결선 / 회의실 / 채팅 / 패널 구현
 5. QA + 모바일 검증
 ## 완료 기준
 - 4자매와 서브에이전트 구조가 오피스 화면에서 한눈에 보임
 - 실시간 상태와 파이프라인이 실제 운영 흐름과 맞음
 - 채팅/헬스/파이프라인이 오피스 뷰와 분리되지 않고 자연스럽게 이어짐
 - 문서, 설계, 구현 기준이 `.plans/`에 정리됨
--- a/.plans/sprints/SPRINT-017.md
+++ b/.plans/sprints/SPRINT-017.md
@@ -0,0 +1,212 @@
 # SPRINT-017: `/office` 모바일 화면 전면 개편
 ## 목표
 `/office`를 데스크톱 축소판이 아니라 **모바일 전용 운영 화면**으로 다시 정리해. 이번 Sprint의 성공 기준은 단순 반응형이 아니야. `360px`, `390px` 첫 화면에서 운영자가 바로 읽어야 할 정보가 세로 흐름으로 보이고, direct chat, pipeline, health, context가 모바일 기준으로 다시 배치되어야 해.
 ## 이번 Sprint의 한 줄 정의
 `main`에 이미 있는 `/office` 구현을 기준으로, **새 API 없이** `frontend/app/office/page.tsx`와 `frontend/components/office/*`의 모바일 IA와 상태 표현을 다시 잠근다.
 ## 배경
 현재 `main` 구현은 데스크톱 기준 구조가 먼저 잡혀 있어.
 ### 현재 구현에서 확인된 문제
 1. `frontend/components/office/OfficeScene.tsx`
   - `aspect-ratio: 800 / 460` 고정 씬이라 `mobile(<768)`에서 데스크톱 축소판처럼 보인다.
 2. `frontend/app/office/page.tsx`
   - 헤더 아래에 모바일 전용 summary hero가 없다.
   - `ChatArea`가 `520px`, 모바일에서 `460px` 고정 높이라 세로 흐름을 끊는다.
   - 핵심 정보가 `OfficeScene`, `ContextPanel`, 하단 패널로 흩어져 첫 viewport 우선순위가 없다.
 3. `frontend/components/office/ContextPanel.tsx`
   - 선택 전에는 "에이전트를 선택하면 상세 정보가 표시됩니다"만 보여서 첫 진입 정보가 비어 있다.
 4. `frontend/components/office/PipelinePanel.tsx`
   - `overflow-x: auto`와 `min-width` 카드에 기대고 있어 모바일에서 가로 스크롤이 전제된다.
 5. `frontend/components/office/ChatWorkspace.tsx`
   - direct chat이 모바일 세로 흐름보다 데스크톱 3열 구조에 가깝다.
   - `JWT 없음`, `runtime 확인 중`, `empty`, `전송 실패`가 모바일에서 즉시 읽히는 구조가 아니다.
 ## 참고 문서
 - 실행 개요: `.plans/OVERVIEW.md`
 - 이전 Sprint: `.plans/sprints/SPRINT-016.md`
 - 오피스 모바일 IA: `.plans/design/ui/office-dashboard-design.md`
 - 오피스 direct chat 모바일 기준: `.plans/design/ui/office-chat-design.md`
 - API 참고: `.plans/design/api-design.md`
 - 제품 PRD: `docs/product-specs/openclaw-office-dashboard-prd.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`
 ## breakpoint 기준
 - **360px:** 최소 지원 모바일 폭, 첫 viewport 가독성 기준
 - **390px:** 기본 모바일 기준 폭
 - **768px:** tablet 전환 시작점
 - **1280px+:** desktop 기존 구조 유지 기준
 ## Sprint 범위
 ### 포함
 - `mobile(<768)` 전용 상단 summary view-model 정의
 - 첫 viewport 정보 우선순위 재설계
 - compact sister status 블록 도입
 - focus / health / quick action 블록 도입
 - 모바일에서 office scene을 compact sister stack 또는 selectable status cards로 대체
 - direct chat 모바일 1열 레이아웃 재정의
 - pipeline / health 패널의 모바일 카드 흐름 재정의
 - `live / snapshot / fallback` 및 `loading / empty / error / stale` 표현 통일
 - `360 / 390 / 768 / 1280+` QA 기준 작성
 ### 제외
 - 신규 백엔드 API
 - WebSocket reconnect 정책 재설계
 - 새 도메인 데이터 모델 추가
 - 별도 모바일 앱
 - 데스크톱 오피스 씬 컨셉 리뉴얼
 ## mobile first success criteria
 ### 첫 viewport 필수 정보 (`360px`, `390px`)
 첫 화면 안에서 아래가 모두 보여야 해.
 1. 4자매 상태 요약
 2. current focus
 3. health summary
 4. quick actions
 ### 금지 사항
 - 가로 스크롤
 - 데스크톱 씬 축소판 유지
 - 선택 전 빈 상태로 시작하는 context 구조
 - 채팅 타임라인/입력창 잘림
 ### 유지 사항
 - `live / snapshot / fallback` 의미 자체는 바꾸지 않는다
 - desktop(`1280px+`)에서는 기존 scene + side panel 구조를 기능적으로 유지한다
 - 기존 fetch 결과만 재조합하고 새 API는 추가하지 않는다
 ## 실행 계획
 ### T1. scope와 mobile IA 잠금
 **대상 문서**
 - `.plans/OVERVIEW.md`
 - `.plans/sprints/SPRINT-017.md`
 - `.plans/design/ui/office-dashboard-design.md`
 - `.plans/design/ui/office-chat-design.md`
 **done when**
 - 첫 viewport 필수 정보가 문서에 명시된다
 - 금지 사항과 유지 사항이 문서에 명시된다
 - 실제 구현 파일 경로가 교차 참조된다
 ### T2. 모바일 상단 summary view-model 정의
 **대상 파일**
 - `frontend/app/office/page.tsx`
 **작업**
 - 기존 sisters / ops / server 데이터를 재조합해 모바일 summary에 필요한 값을 만든다
 - 선택 전에도 빈 화면이 아니라 기본 summary 콘텐츠가 먼저 보이게 한다
 **done when**
 - sister status 집계가 계산된다
 - current focus가 상단에서 바로 보인다
 - health summary와 quick action 대상이 함께 계산된다
 ### T3. `/office` 레이아웃을 mobile-first 세로 스택으로 재배치
 **대상 파일**
 - `frontend/app/office/page.tsx`
 **작업**
 - 모바일에서는 `summary hero → compact sister status → focus/health/action block → panel sections` 순서로 재구성한다
 - desktop(`1280px+`)에서만 기존 scene + context + bottom panels 구조를 유지한다
 **done when**
 - `360px`, `390px` 첫 viewport에서 핵심 정보 4종이 읽힌다
 - 페이지 전체에 가로 스크롤이 없다
 - desktop 구조가 기능적으로 유지된다
 ### T4. scene / context 모바일 대체
 **대상 파일**
 - `frontend/components/office/OfficeScene.tsx`
 - `frontend/components/office/ContextPanel.tsx`
 **작업**
 - 모바일에서는 `800x460` 씬을 그대로 축소하지 않는다
 - compact sister stack 또는 selectable status cards로 바꾼다
 - context는 별도 우측 패널이 아니라 인라인 상세, accordion, sheet 중 하나로 흡수한다
 **done when**
 - 선택 없이도 기본 context가 보인다
 - sister 선택과 상세 확인이 세로 흐름 안에서 끝난다
 - 모바일에서 scene은 상징이 아니라 정보 전달 수단이 된다
 ### T5. direct chat 모바일 1열 재정렬
 **대상 파일**
 - `frontend/components/office/ChatWorkspace.tsx`
 **작업**
 - 자매 전환, runtime badge, 타임라인, composer, 보조 상태를 한 컬럼 흐름으로 재배치한다
 - 고정 높이 의존을 줄인다
 - `JWT 없음`, `empty`, `전송 실패`, `runtime 확인 중` 상태를 상단 또는 입력 근처에서 즉시 읽히게 한다
 **done when**
 - `360px`, `390px`에서 메시지, 입력창, 상태 라벨이 겹치지 않는다
 - send disabled 이유가 숨겨지지 않는다
 - `user / assistant / tool` 메시지 구분이 유지된다
 ### T6. pipeline / health 모바일 카드화
 **대상 파일**
 - `frontend/components/office/PipelinePanel.tsx`
 - `frontend/components/office/ServerHealthPanel.tsx`
 **작업**
 - pipeline은 가로 노드열 대신 세로 단계 카드로 재배치한다
 - health는 summary 우선, 상세는 확장 또는 후순위 카드로 정리한다
 **done when**
 - 모바일에서 가로 스크롤이 없다
 - active task, focus, review loop, deploy state가 1~2스크린 안에 파악된다
 - online count와 source badge가 유지된다
 ### T7. 상태 라벨 통일
 **대상 파일**
 - `frontend/app/office/page.tsx`
 - `frontend/components/office/OfficeScene.tsx`
 - `frontend/components/office/ChatWorkspace.tsx`
 - `frontend/components/office/PipelinePanel.tsx`
 - `frontend/components/office/ServerHealthPanel.tsx`
 **작업**
 - `live / snapshot / fallback` 라벨을 모바일 기준으로 짧게 통일한다
 - `loading / empty / error / stale` 표현을 패널 간 같은 톤으로 맞춘다
 **done when**
 - source 의미가 첫 화면과 각 패널에서 같은 단어로 보인다
 - `empty`와 `error`가 다른 문구로 표현된다
 - `fallback` 의미가 사라지지 않는다
 ### T8. breakpoint QA
 **산출물**
 - `.plans/qa/SPRINT-017-review-1.md` 이상
 **작업**
 - `360 / 390 / 768 / 1280+` 실브라우저 체크
 - 첫 viewport 정보 충족 여부와 horizontal scroll 부재 확인
 **done when**
 - breakpoint별 결과가 분리 기록된다
 - blocker / warning / follow-up이 분리된다
 - direct chat, pipeline, health, context 재배치 검증이 남는다
 ## 완료 기준
 - `360px`, `390px` 첫 화면에서 4자매 상태, current focus, health summary, quick actions를 모두 읽을 수 있다
 - `mobile(<768)`에서 데스크톱 축소판이 사라진다
 - `ContextPanel` 선택 의존 구조가 모바일 기본 흐름 안으로 흡수된다
 - `PipelinePanel`과 `ServerHealthPanel`이 가로 스크롤 없이 읽힌다
 - `ChatWorkspace`가 모바일 direct chat로 동작하고, `JWT 없음 / empty / error / runtime 확인 중` 상태가 즉시 읽힌다
 - `live / snapshot / fallback` 의미가 유지된 채 문구가 통일된다
 ## 핸드오프 메모
 - 하랑이는 scope와 우선순위를 잠근다
 - 나랑이는 `page.tsx`와 `office/*` 모바일 IA를 구현한다
 - 다랑이는 `360 / 390 / 768 / 1280+` 기준으로 실브라우저 QA를 남긴다
 - 이번 Sprint는 "안정화 전체"가 아니라 **모바일 운영 화면 재구성**까지로 좁게 끝낸다
--- a/.plans/sprints/SPRINT-018.md
+++ b/.plans/sprints/SPRINT-018.md
@@ -0,0 +1,202 @@
 # 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/package-lock.json
+++ b/backend/package-lock.json
@@ -12,6 +12,7 @@
        "@nestjs/common": "^11.0.1",
        "@nestjs/config": "^4.0.3",
        "@nestjs/core": "^11.0.1",
        "@nestjs/event-emitter": "^3.0.1",
        "@nestjs/jwt": "^11.0.2",
        "@nestjs/passport": "^11.0.5",
        "@nestjs/platform-express": "^11.0.1",
@@ -2294,6 +2295,19 @@
        }
      }
    },
    "node_modules/@nestjs/event-emitter": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/@nestjs/event-emitter/-/event-emitter-3.0.1.tgz",
      "integrity": "sha512-0Ln/x+7xkU6AJFOcQI9tIhUMXVF7D5itiaQGOyJbXtlAfAIt8gzDdJm+Im7cFzKoWkiW5nCXCPh6GSvdQd/3Dw==",
      "license": "MIT",
      "dependencies": {
        "eventemitter2": "6.4.9"
      },
      "peerDependencies": {
        "@nestjs/common": "^10.0.0 || ^11.0.0",
        "@nestjs/core": "^10.0.0 || ^11.0.0"
      }
    },
    "node_modules/@nestjs/jwt": {
      "version": "11.0.2",
      "resolved": "https://registry.npmjs.org/@nestjs/jwt/-/jwt-11.0.2.tgz",
@@ -6204,6 +6218,12 @@
        "node": ">= 0.6"
      }
    },
    "node_modules/eventemitter2": {
      "version": "6.4.9",
      "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.9.tgz",
      "integrity": "sha512-JEPTiaOt9f04oa6NOkc4aH+nVp5I3wEjpHbIPqfgCdD5v5bUzy7xQqwcVO2aDQgOWhI28da57HksMrzK9HlRxg==",
      "license": "MIT"
    },
    "node_modules/events": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
--- a/backend/package.json
+++ b/backend/package.json
@@ -27,6 +27,7 @@
    "@nestjs/common": "^11.0.1",
    "@nestjs/config": "^4.0.3",
    "@nestjs/core": "^11.0.1",
    "@nestjs/event-emitter": "^3.0.1",
    "@nestjs/jwt": "^11.0.2",
    "@nestjs/passport": "^11.0.5",
    "@nestjs/platform-express": "^11.0.1",
--- a/backend/src/activity/activity.module.ts
+++ b/backend/src/activity/activity.module.ts
@@ -2,10 +2,9 @@ import { Module } from '@nestjs/common';
 import { ActivityController } from './activity.controller';
 import { ActivityService } from './activity.service';
 import { PrismaModule } from '../prisma/prisma.module';
 import { EventsModule } from '../events/events.module';
@Module({
-  imports: [PrismaModule, EventsModule],
+  imports: [PrismaModule],
  controllers: [ActivityController],
  providers: [ActivityService],
  exports: [ActivityService],
--- a/backend/src/activity/activity.service.spec.ts
+++ b/backend/src/activity/activity.service.spec.ts
@@ -1,4 +1,5 @@
 import { Test, TestingModule } from '@nestjs/testing';
 import { EventEmitter2 } from '@nestjs/event-emitter';
 import { ActivityService } from './activity.service';
 import { PrismaService } from '../prisma/prisma.service';
@@ -20,6 +21,7 @@ describe('ActivityService', () => {
      providers: [
        ActivityService,
        { provide: PrismaService, useValue: mockPrisma },
        EventEmitter2,
      ],
    }).compile();
--- a/backend/src/activity/activity.service.ts
+++ b/backend/src/activity/activity.service.ts
@@ -1,6 +1,6 @@
-import { Injectable, Optional } from '@nestjs/common';
+import { Injectable } from '@nestjs/common';
 import { EventEmitter2 } from '@nestjs/event-emitter';
 import { PrismaService } from '../prisma/prisma.service';
 import { EventsGateway } from '../events/events.gateway';
 export interface LogActivityDto {
  sisterId?: number;
@@ -34,7 +34,7 @@ function sanitizeActivityDetail(detail?: string | null): string | undefined {
 export class ActivityService {
  constructor(
    private readonly prisma: PrismaService,
-    @Optional() private readonly events?: EventsGateway,
+    private readonly eventEmitter: EventEmitter2,
  ) {}
  async log(dto: LogActivityDto) {
@@ -49,9 +49,7 @@ export class ActivityService {
      },
    });
-    if (this.events) {
+    this.eventEmitter.emit('activity.logged', record);
      this.events.broadcastActivity(record);
    }
    return record;
  }
--- a/backend/src/app.module.ts
+++ b/backend/src/app.module.ts
@@ -1,5 +1,6 @@
 import { Module } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
 import { EventEmitterModule } from '@nestjs/event-emitter';
 import { ThrottlerModule } from '@nestjs/throttler';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
@@ -22,6 +23,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
@Module({
  imports: [
    ConfigModule.forRoot({ isGlobal: true }),
    EventEmitterModule.forRoot(),
    ThrottlerModule.forRoot([{ ttl: 60000, limit: 100 }]),
    PrismaModule,
    SistersModule,
--- a/backend/src/auth/auth-cookies.ts
+++ b/backend/src/auth/auth-cookies.ts
@@ -0,0 +1,128 @@
 import { randomBytes, timingSafeEqual } from 'crypto';
 import type { CookieOptions, Request, Response } from 'express';
 export const ACCESS_TOKEN_COOKIE = 'hanarang_access_token';
 export const REFRESH_TOKEN_COOKIE = 'hanarang_refresh_token';
 export const CSRF_TOKEN_COOKIE = 'hanarang_csrf_token';
 const ACCESS_TOKEN_MAX_AGE_MS = 15 * 60 * 1000;
 const REFRESH_TOKEN_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;
 function isHttpsRequest(req?: Request): boolean {
  const forwardedProto = req?.headers['x-forwarded-proto'];
  const protocol = Array.isArray(forwardedProto)
    ? forwardedProto[0]
    : forwardedProto;
  return (
    process.env.NODE_ENV === 'production' ||
    req?.secure === true ||
    protocol === 'https'
  );
 }
 function baseCookieOptions(req?: Request): CookieOptions {
  return {
    path: '/',
    secure: isHttpsRequest(req),
  };
 }
 export function parseCookieHeader(
  header?: string | string[],
 ): Record<string, string> {
  const raw = Array.isArray(header) ? header.join(';') : header;
  if (!raw) return {};
  return raw
    .split(';')
    .map((part) => part.trim())
    .filter((part) => part.length > 0)
    .reduce<Record<string, string>>((cookies, part) => {
      const eqIndex = part.indexOf('=');
      if (eqIndex === -1) return cookies;
      const key = decodeURIComponent(part.slice(0, eqIndex).trim());
      const value = decodeURIComponent(part.slice(eqIndex + 1).trim());
      cookies[key] = value;
      return cookies;
    }, {});
 }
 export function getCookieValue(
  req: Pick<Request, 'headers'>,
  name: string,
 ): string | undefined {
  return parseCookieHeader(req.headers.cookie)[name];
 }
 export function generateCsrfToken(): string {
  return randomBytes(32).toString('hex');
 }
 export function hasValidCsrfToken(req: Request): boolean {
  const cookieToken = getCookieValue(req, CSRF_TOKEN_COOKIE);
  const headerToken = req.headers['x-csrf-token'];
  const requestToken = Array.isArray(headerToken) ? headerToken[0] : headerToken;
  if (!cookieToken || !requestToken) return false;
  const cookieBuffer = Buffer.from(cookieToken);
  const requestBuffer = Buffer.from(requestToken);
  if (cookieBuffer.length !== requestBuffer.length) return false;
  try {
    return timingSafeEqual(cookieBuffer, requestBuffer);
  } catch {
    return false;
  }
 }
 export function setAuthCookies(
  res: Response,
  req: Request,
  tokens: { accessToken: string; refreshToken: string },
  csrfToken = generateCsrfToken(),
 ) {
  res.cookie(ACCESS_TOKEN_COOKIE, tokens.accessToken, {
    ...baseCookieOptions(req),
    httpOnly: true,
    sameSite: 'lax',
    maxAge: ACCESS_TOKEN_MAX_AGE_MS,
  });
  res.cookie(REFRESH_TOKEN_COOKIE, tokens.refreshToken, {
    ...baseCookieOptions(req),
    httpOnly: true,
    sameSite: 'strict',
    maxAge: REFRESH_TOKEN_MAX_AGE_MS,
  });
  res.cookie(CSRF_TOKEN_COOKIE, csrfToken, {
    ...baseCookieOptions(req),
    httpOnly: false,
    sameSite: 'strict',
    maxAge: REFRESH_TOKEN_MAX_AGE_MS,
  });
  return csrfToken;
 }
 export function clearAuthCookies(res: Response, req?: Request) {
  res.clearCookie(ACCESS_TOKEN_COOKIE, {
    ...baseCookieOptions(req),
    httpOnly: true,
    sameSite: 'lax',
  });
  res.clearCookie(REFRESH_TOKEN_COOKIE, {
    ...baseCookieOptions(req),
    httpOnly: true,
    sameSite: 'strict',
  });
  res.clearCookie(CSRF_TOKEN_COOKIE, {
    ...baseCookieOptions(req),
    httpOnly: false,
    sameSite: 'strict',
  });
 }
--- a/backend/src/auth/auth.controller.ts
+++ b/backend/src/auth/auth.controller.ts
@@ -1,17 +1,30 @@
 import {
-  Controller,
+  BadRequestException,
  Post,
  Get,
  Body,
-  Headers,
+  Controller,
  Get,
  HttpCode,
  Post,
  Req,
  Res,
  UnauthorizedException,
  UseGuards,
  Request,
  BadRequestException,
 } from '@nestjs/common';
-import type { Request as ExpressRequest } from 'express';
+import type {
-import { AuthService, LoginDto } from './auth.service';
+  Request as ExpressRequest,
-import { JwtGuard } from './jwt.guard';
+  Response as ExpressResponse,
 } from 'express';
 import { Throttle, ThrottlerGuard } from '@nestjs/throttler';
 import { AuthService, LoginDto } from './auth.service';
 import {
  getCookieValue,
  hasValidCsrfToken,
  setAuthCookies,
  clearAuthCookies,
  REFRESH_TOKEN_COOKIE,
 } from './auth-cookies';
 import { JwtGuard } from './jwt.guard';
 interface AuthenticatedRequest extends ExpressRequest {
  user: { userId: number };
@@ -21,17 +34,58 @@ interface AuthenticatedRequest extends ExpressRequest {
 export class AuthController {
  constructor(private readonly authService: AuthService) {}
  @HttpCode(200)
  @UseGuards(ThrottlerGuard)
  @Throttle({ default: { limit: 5, ttl: 60000 } })
  @Post('login')
-  login(@Body() dto: LoginDto) {
+  async login(
-    return this.authService.login(dto);
+    @Body() dto: LoginDto,
    @Req() req: ExpressRequest,
    @Res({ passthrough: true }) res: ExpressResponse,
  ) {
    const tokens = await this.authService.login(dto);
    setAuthCookies(res, req, tokens);
    return {
      username: tokens.username,
      role: tokens.role,
    };
  }
  @HttpCode(200)
  @UseGuards(ThrottlerGuard)
  @Throttle({ default: { limit: 3, ttl: 60000 } })
  @Post('refresh')
-  refresh(@Headers('x-refresh-token') token: string) {
+  async refresh(
    @Req() req: ExpressRequest,
    @Res({ passthrough: true }) res: ExpressResponse,
  ) {
    const cookieToken = getCookieValue(req, REFRESH_TOKEN_COOKIE);
    const headerToken = req.headers['x-refresh-token'];
    const token = cookieToken ?? (Array.isArray(headerToken) ? headerToken[0] : headerToken);
    if (!token) throw new BadRequestException('Refresh token required');
-    return this.authService.refresh(token);
+    if (cookieToken && !hasValidCsrfToken(req)) {
      throw new UnauthorizedException('Invalid CSRF token');
    }
    const tokens = await this.authService.refresh(token);
    setAuthCookies(res, req, tokens);
    return {
      username: tokens.username,
      role: tokens.role,
    };
  }
  @HttpCode(200)
  @Post('logout')
  logout(
    @Req() req: ExpressRequest,
    @Res({ passthrough: true }) res: ExpressResponse,
  ) {
    clearAuthCookies(res, req);
    return { ok: true };
  }
  @UseGuards(JwtGuard)
--- a/backend/src/auth/jwt.strategy.ts
+++ b/backend/src/auth/jwt.strategy.ts
@@ -1,7 +1,9 @@
 import { Injectable, UnauthorizedException } from '@nestjs/common';
 import { PassportStrategy } from '@nestjs/passport';
 import { ExtractJwt, Strategy } from 'passport-jwt';
 import { ConfigService } from '@nestjs/config';
 import { PassportStrategy } from '@nestjs/passport';
 import type { Request } from 'express';
 import { ExtractJwt, Strategy } from 'passport-jwt';
 import { ACCESS_TOKEN_COOKIE, getCookieValue } from './auth-cookies';
 export interface JwtPayload {
  sub: number;
@@ -9,13 +11,21 @@ export interface JwtPayload {
  role: string;
 }
 function cookieTokenExtractor(req?: Request): string | null {
  if (!req) return null;
  return getCookieValue(req, ACCESS_TOKEN_COOKIE) ?? null;
 }
@Injectable()
 export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
  constructor(config: ConfigService) {
    const secret = config.get<string>('JWT_SECRET');
    if (!secret) throw new Error('JWT_SECRET not set');
    super({
-      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+      jwtFromRequest: ExtractJwt.fromExtractors([
        cookieTokenExtractor,
        ExtractJwt.fromAuthHeaderAsBearerToken(),
      ]),
      ignoreExpiration: false,
      secretOrKey: secret,
    });
--- a/backend/src/dashboard/dashboard.service.ts
+++ b/backend/src/dashboard/dashboard.service.ts
@@ -69,13 +69,23 @@ function nodeStateFromEvidence(params: {
  return 'idle';
 }
 function sanitizeSummary(text?: string | null) {
  const raw = text?.trim();
  if (!raw) return null;
  if (/stderr:/i.test(raw) || /command not found/i.test(raw) || /bash:\s*line/i.test(raw)) {
    return '내부 작업 중 오류가 발생했어. 자세한 시스템 로그는 관리자 로그에서 확인해.';
  }
  if (/^ssh failed/i.test(raw) || /ssh connection failed/i.test(raw)) {
    return '원격 노드 연결에 실패했어.';
  }
  return raw;
 }
 function summarizeActivity(
  activity?: ActivityRecord | null,
  fallback = 'NO EVENT',
 ) {
-  return (
+  return sanitizeSummary(activity?.detail) || activity?.action?.replace(/_/g, ' ') || fallback;
    activity?.detail?.trim() || activity?.action?.replace(/_/g, ' ') || fallback
  );
 }
 function parseQaSummary(content: string): string {
--- a/backend/src/events/events.gateway.ts
+++ b/backend/src/events/events.gateway.ts
@@ -10,6 +10,8 @@ import { Server, Socket } from 'socket.io';
 import { Logger } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
 import { ConfigService } from '@nestjs/config';
 import { OnEvent } from '@nestjs/event-emitter';
 import { ACCESS_TOKEN_COOKIE, parseCookieHeader } from '../auth/auth-cookies';
 interface SocketUserPayload {
  username?: string;
@@ -49,12 +51,17 @@ export class EventsGateway
  handleConnection(client: SocketWithUser) {
    // JWT 인증 필수 — 토큰 없거나 유효하지 않으면 disconnect
    const authHeader = client.handshake.headers.authorization;
    const tokenFromHeader = Array.isArray(authHeader)
      ? authHeader[0]?.replace('Bearer ', '')
      : authHeader?.replace('Bearer ', '');
    const tokenFromCookie = parseCookieHeader(client.handshake.headers.cookie)[
      ACCESS_TOKEN_COOKIE
    ];
    const token =
-      (client.handshake.auth?.token as string) ??
+      (client.handshake.auth?.token as string | undefined) ??
-      (client.handshake.headers.authorization as string)?.replace(
+      tokenFromHeader ??
-        'Bearer ',
+      tokenFromCookie;
        '',
      );
    if (!token) {
      this.logger.debug(`WS rejected (no token): ${client.id}`);
@@ -101,6 +108,12 @@ export class EventsGateway
    this.server.emit('activity:new', { item, ts: Date.now() });
  }
  /** EventEmitter2에서 activity.logged 수신 → WebSocket 브로드캐스트 */
  @OnEvent('activity.logged')
  handleActivityLogged(record: unknown) {
    this.broadcastActivity(record);
  }
  /** 연결된 클라이언트 수 */
  getClientCount(): number {
    return this.server?.sockets?.sockets?.size ?? 0;
--- a/backend/src/main.ts
+++ b/backend/src/main.ts
@@ -1,7 +1,14 @@
 import { NestFactory } from '@nestjs/core';
 import { Logger, ValidationPipe } from '@nestjs/common';
-import { AppModule } from './app.module';
+import type { NextFunction, Request, Response } from 'express';
 import helmet from 'helmet';
 import { AppModule } from './app.module';
 import {
  ACCESS_TOKEN_COOKIE,
  REFRESH_TOKEN_COOKIE,
  getCookieValue,
  hasValidCsrfToken,
 } from './auth/auth-cookies';
 function getAllowedOrigins() {
  return (process.env.CORS_ORIGINS ?? 'http://localhost:3004')
@@ -10,10 +17,40 @@ function getAllowedOrigins() {
    .filter((origin): origin is string => origin.length > 0);
 }
 function shouldBypassCsrf(req: Request): boolean {
  if (['GET', 'HEAD', 'OPTIONS'].includes(req.method.toUpperCase())) {
    return true;
  }
  if (req.path === '/api/auth/login') {
    return true;
  }
  const hasAuthorizationHeader = Boolean(req.headers.authorization);
  if (hasAuthorizationHeader) {
    return true;
  }
  const hasAuthCookie = Boolean(
    getCookieValue(req, ACCESS_TOKEN_COOKIE) ||
      getCookieValue(req, REFRESH_TOKEN_COOKIE),
  );
  return !hasAuthCookie;
 }
 async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use(helmet());
  app.use((req: Request, res: Response, next: NextFunction) => {
    if (shouldBypassCsrf(req) || hasValidCsrfToken(req)) {
      next();
      return;
    }
    res.status(403).json({ message: 'Invalid CSRF token' });
  });
  const allowedOrigins = getAllowedOrigins();
@@ -29,6 +66,12 @@ async function bootstrap() {
      }
    },
    methods: ['GET', 'POST', 'PATCH', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: [
      'Content-Type',
      'Authorization',
      'X-CSRF-Token',
      'X-Refresh-Token',
    ],
    credentials: true,
  });
--- a/backend/src/sisters/sister-detail.service.ts
+++ b/backend/src/sisters/sister-detail.service.ts
@@ -1,7 +1,7 @@
 import { Injectable, Logger, NotFoundException } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { PrismaService } from '../prisma/prisma.service';
 import { SshService } from './ssh.service';
 import { ConfigService } from '@nestjs/config';
 type SisterName = 'harang' | 'narang' | 'darang' | 'erang';
@@ -20,6 +20,15 @@ const SISTER_DESCRIPTIONS: Record<SisterName, string> = {
  erang: '인프라와 배포. 서버 관리, merge, 프로덕션 배포를 담당한다.',
 };
 function summarizeText(value?: string | null, maxLength = 120): string | null {
  if (!value) return null;
  const compact = value.replace(/\s+/g, ' ').trim();
  if (!compact) return null;
  if (compact.length <= maxLength) return compact;
  return `${compact.slice(0, maxLength - 1)}…`;
 }
@Injectable()
 export class SisterDetailService {
  private readonly logger = new Logger(SisterDetailService.name);
@@ -39,21 +48,36 @@ export class SisterDetailService {
        sister.ip,
        sister.user,
        sshKeyPath,
-        'WORKSPACE=~/.hermes/workspace; [ -d "$WORKSPACE" ] || WORKSPACE=~/.openclaw/workspace; cat "$WORKSPACE"/SOUL.md 2>/dev/null | head -60; echo "---AGENTS---"; cat "$WORKSPACE"/AGENTS.md 2>/dev/null | head -40',
+        'WORKSPACE=~/.hermes/workspace; [ -d "$WORKSPACE" ] || WORKSPACE=~/.openclaw/workspace; for FILE in SOUL.md AGENTS.md; do if [ -f "$WORKSPACE/$FILE" ]; then printf "%s|present|%s\n" "$FILE" "$(wc -l < "$WORKSPACE/$FILE" 2>/dev/null || echo 0)"; else printf "%s|missing|0\n" "$FILE"; fi; done',
      );
      const files = result.stdout
        .split('\n')
        .map((line) => line.trim())
        .filter((line) => line.length > 0)
        .map((line) => {
          const [file, status, lineCount] = line.split('|');
          return {
            file,
            status,
            lineCount: Number.parseInt(lineCount ?? '0', 10) || 0,
          };
        });
      return {
        name,
        role: SISTER_ROLES[name],
        description: SISTER_DESCRIPTIONS[name],
-        raw: result.stdout || '(설정 파일 없음)',
+        files,
        summary: `${files.filter((file) => file.status === 'present').length}/${files.length} protected config files detected`,
      };
    } catch {
      return {
        name,
        role: SISTER_ROLES[name],
        description: SISTER_DESCRIPTIONS[name],
-        raw: '(SSH 연결 불가)',
+        files: [],
        summary: '(SSH 연결 불가)',
      };
    }
  }
@@ -67,24 +91,37 @@ export class SisterDetailService {
        sister.ip,
        sister.user,
        sshKeyPath,
-        'SESSION_DIR=~/.hermes/sessions; [ -d "$SESSION_DIR" ] || SESSION_DIR=~/.openclaw/sessions; ls -lt "$SESSION_DIR"/ 2>/dev/null | head -20 || echo ""',
+        'SESSION_DIR=~/.hermes/agents/main/sessions; [ -d "$SESSION_DIR" ] || SESSION_DIR=~/.openclaw/agents/main/sessions; ls -lt "$SESSION_DIR"/ 2>/dev/null | head -20 || echo ""',
      );
-      const lines = result.stdout
+      const sessions = result.stdout
        .split('\n')
-        .filter((l) => l && !l.startsWith('total'));
+        .filter((line) => line && !line.startsWith('total'))
      return lines
        .map((line) => {
          const parts = line.trim().split(/\s+/);
          const label = parts[parts.length - 1] ?? '';
          const modified = parts.slice(5, 8).join(' ');
          const size = parts[4] ?? '0';
          return {
-            name: parts[parts.length - 1] ?? '',
+            id: label,
-            modified: parts.slice(5, 8).join(' '),
+            label,
-            size: parts[4] ?? '0',
+            status: [modified, size !== '0' ? `${size}B` : null]
              .filter((part): part is string => Boolean(part))
              .join(' · '),
          };
        })
-        .filter((s) => s.name && s.name !== '');
+        .filter((session) => session.label.length > 0);
      return {
        sessions,
        total: sessions.length,
      };
    } catch {
-      return [];
+      return {
        sessions: [],
        total: 0,
      };
    }
  }
@@ -100,15 +137,25 @@ export class SisterDetailService {
        'AGENT_DIR=~/.hermes/workspace/agents; [ -d "$AGENT_DIR" ] || AGENT_DIR=~/.openclaw/workspace/agents; ls "$AGENT_DIR"/ 2>/dev/null || echo ""',
      );
-      const agents = result.stdout
+      const items = result.stdout
        .split('\n')
-        .filter((l) => l.trim().endsWith('.md'));
+        .map((line) => line.trim())
-      return agents.map((a) => ({
+        .filter((line) => line.endsWith('.md'))
-        name: a.trim().replace('.md', ''),
+        .map((file) => ({
-        file: a.trim(),
+          id: file.replace('.md', ''),
          label: file.replace('.md', ''),
          file,
        }));
      return {
        items,
        total: items.length,
      };
    } catch {
-      return [];
+      return {
        items: [],
        total: 0,
      };
    }
  }
@@ -122,7 +169,16 @@ export class SisterDetailService {
      }),
      this.prisma.activityLog.count({ where: { sisterId: sister.id } }),
    ]);
-    return { items: logs, total };
+
    return {
      items: logs.map((log) => ({
        id: log.id,
        action: log.action,
        detail: summarizeText(log.detail),
        createdAt: log.createdAt,
      })),
      total,
    };
  }
  async getOrgData() {
@@ -157,8 +213,8 @@ export class SisterDetailService {
  }
  private getKeyPath(): string {
-    const p = this.config.get<string>('SSH_KEY_PATH');
+    const path = this.config.get<string>('SSH_KEY_PATH');
-    if (!p) throw new Error('SSH_KEY_PATH is not set');
+    if (!path) throw new Error('SSH_KEY_PATH is not set');
-    return p;
+    return path;
  }
 }
--- a/backend/src/sisters/sisters.controller.ts
+++ b/backend/src/sisters/sisters.controller.ts
@@ -1,12 +1,24 @@
-import { Controller, Get, Param, Res } from '@nestjs/common';
+import {
  Body,
  Controller,
  Get,
  Param,
  Post,
  Res,
  UseGuards,
 } from '@nestjs/common';
 import type { Response } from 'express';
-import { SistersService } from './sisters.service';
+import { JwtGuard } from '../auth/jwt.guard';
-import { SisterDetailService } from './sister-detail.service';
+import { RoleGuard, Roles } from '../auth/role.guard';
 import { SisterNamePipe } from '../common/sister-name.pipe';
 import type { SisterName } from '../common/sister-name.pipe';
 import { AvatarService } from './avatar.service';
 import { SisterDetailService } from './sister-detail.service';
 import { SistersService } from './sisters.service';
@Controller('api/sisters')
@UseGuards(JwtGuard, RoleGuard)
@Roles('admin', 'viewer')
 export class SistersController {
  constructor(
    private readonly sistersService: SistersService,
@@ -14,14 +26,51 @@ export class SistersController {
    private readonly avatarService: AvatarService,
  ) {}
  @Get('runtime')
  async getSistersRuntime() {
    return this.sistersService.getAllSistersRuntime();
  }
  @Get()
  async getSistersStatus() {
-    return this.sistersService.getAllSistersStatus();
+    const sisters = await this.sistersService.getAllSistersStatus();
    return sisters.map(({ id, name, lxcId, role, status, lastSeen, currentTask }) => ({
      id,
      name,
      lxcId,
      role,
      status,
      lastSeen,
      currentTask,
    }));
  }
  @Get(':name/runtime')
  async getSisterRuntime(@Param('name', SisterNamePipe) name: SisterName) {
    return this.sistersService.getSisterRuntime(name);
  }
  @UseGuards(JwtGuard)
  @Post(':name/chat')
  async chatWithSister(
    @Param('name', SisterNamePipe) name: SisterName,
    @Body('message') message: string,
  ) {
    return this.sistersService.sendChatMessage(name, message);
  }
  @Get(':name/system')
  async getSystemInfo(@Param('name', SisterNamePipe) name: SisterName) {
-    return this.sistersService.getSystemInfo(name);
+    const system = await this.sistersService.getSystemInfo(name);
    if (!system) return null;
    return {
      uptime: system.uptime,
      cpu: system.cpu,
      memory: system.memory,
      disk: system.disk,
    };
  }
  @Get(':name/avatar')
@@ -36,25 +85,29 @@ export class SistersController {
    const avatar = await this.avatarService.getAvatar(sister);
    res.setHeader('Content-Type', avatar.contentType);
-    res.setHeader('Cache-Control', 'public, max-age=300');
+    res.setHeader('Cache-Control', 'private, max-age=300');
    return res.send(avatar.data);
  }
  @Roles('admin')
  @Get(':name/config')
  async getSisterConfig(@Param('name', SisterNamePipe) name: SisterName) {
    return this.sisterDetail.getSisterConfig(name);
  }
  @Roles('admin')
  @Get(':name/sessions')
  async getSisterSessions(@Param('name', SisterNamePipe) name: SisterName) {
    return this.sisterDetail.getSisterSessions(name);
  }
  @Roles('admin')
  @Get(':name/subagents')
  async getSisterSubagents(@Param('name', SisterNamePipe) name: SisterName) {
    return this.sisterDetail.getSisterSubagents(name);
  }
  @Roles('admin')
  @Get(':name/activity')
  async getSisterActivity(@Param('name', SisterNamePipe) name: SisterName) {
    return this.sisterDetail.getSisterActivityLog(name);
--- a/backend/src/sisters/sisters.module.ts
+++ b/backend/src/sisters/sisters.module.ts
@@ -1,16 +1,17 @@
 import { Module } from '@nestjs/common';
 import { SistersController } from './sisters.controller';
 import { SistersService } from './sisters.service';
 import { SisterDetailService } from './sister-detail.service';
 import { SshService } from './ssh.service';
 import { PrismaModule } from '../prisma/prisma.module';
-import { ConfigModule } from '@nestjs/config';
+import { SisterDetailService } from './sister-detail.service';
 import { AvatarService } from './avatar.service';
 import { ActivityModule } from '../activity/activity.module';
 import { AuthModule } from '../auth/auth.module';
@Module({
-  imports: [PrismaModule, ConfigModule],
+  imports: [PrismaModule, ActivityModule, AuthModule],
  controllers: [SistersController],
-  providers: [SistersService, SisterDetailService, SshService, AvatarService],
+  providers: [SistersService, SshService, SisterDetailService, AvatarService],
-  exports: [SistersService, SisterDetailService, SshService, AvatarService],
+  exports: [SistersService, SshService, SisterDetailService, AvatarService],
 })
 export class SistersModule {}
--- a/backend/src/sisters/sisters.service.ts
+++ b/backend/src/sisters/sisters.service.ts
@@ -1,9 +1,72 @@
-import { Injectable, Logger, Optional } from '@nestjs/common';
+import {
  BadRequestException,
  Injectable,
  Logger,
  Optional,
 } from '@nestjs/common';
 import { PrismaService } from '../prisma/prisma.service';
 import { SshService } from './ssh.service';
 import { ConfigService } from '@nestjs/config';
 import { ActivityService } from '../activity/activity.service';
 export type RuntimeState =
  | 'idle'
  | 'thinking'
  | 'tool_calling'
  | 'speaking'
  | 'error';
 export interface RuntimeMessage {
  id: string;
  role: 'user' | 'assistant' | 'tool';
  content: string;
  ts: string | null;
 }
 export interface RuntimeSubagent {
  name: string;
  state: RuntimeState;
  updatedAt: number | null;
  currentTask: string | null;
  sessionLabel: string | null;
 }
 export interface SisterRuntimeSnapshot {
  name: string;
  gatewayConnected: boolean;
  mainState: RuntimeState;
  currentTask: string | null;
  activeSessionLabel: string | null;
  activeSessionUpdatedAt: number | null;
  controlSessionKey: string | null;
  recentMessages: RuntimeMessage[];
  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;
@@ -13,6 +76,33 @@ export interface SisterStatus {
  status: 'online' | 'offline' | 'working' | 'unknown';
  lastSeen: Date | null;
  currentTask: string | null;
  liveState: RuntimeState;
  activeSessionLabel: string | null;
  gatewayConnected: boolean;
  subagents: RuntimeSubagent[];
  connection: SisterConnectionState;
  activity: SisterActivityState;
  working: SisterWorkingState;
  source: SisterSource;
  freshness: SisterFreshness;
 }
 interface RuntimeProbeResult {
  gatewayConnected?: boolean;
  mainState?: RuntimeState;
  currentTask?: string | null;
  activeSessionLabel?: string | null;
  activeSessionUpdatedAt?: number | null;
  controlSessionKey?: string | null;
  recentMessages?: RuntimeMessage[];
  subagents?: RuntimeSubagent[];
 }
 interface ChatSendResult {
  ok: boolean;
  status: string;
  reply: string;
  raw?: string;
 }
 const SISTER_ROLES: Record<string, string> = {
@@ -22,6 +112,17 @@ const SISTER_ROLES: Record<string, string> = {
  erang: 'Infra Manager',
 };
 function runtimeStateToStatus(
  state: RuntimeState,
  connected: boolean,
 ): 'online' | 'offline' | 'working' {
  if (!connected || state === 'error') return 'offline';
  if (state === 'thinking' || state === 'tool_calling' || state === 'speaking') {
    return 'working';
  }
  return 'online';
 }
@Injectable()
 export class SistersService {
  private readonly logger = new Logger(SistersService.name);
@@ -34,7 +135,7 @@ export class SistersService {
  ) {}
  async getAllSistersStatus(): Promise<SisterStatus[]> {
-    const sisters = await this.prisma.sisterConfig.findMany();
+    const sisters = await this.prisma.sisterConfig.findMany({ orderBy: { id: 'asc' } });
    const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
    if (!sshKeyPath) {
      throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
@@ -49,19 +150,85 @@ export class SistersService {
        return result.value;
      }
      const sister = sisters[index];
-      return {
+      return this.buildOfflineStatus(sister);
        id: sister.id,
        name: sister.name,
        user: sister.user,
        lxcId: sister.lxcId,
        role: SISTER_ROLES[sister.name] ?? 'Unknown',
        status: 'offline' as const,
        lastSeen: sister.lastSeen,
        currentTask: null,
      };
    });
  }
  async getAllSistersRuntime(): Promise<SisterRuntimeSnapshot[]> {
    const sisters = await this.prisma.sisterConfig.findMany({ orderBy: { id: 'asc' } });
    const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
    if (!sshKeyPath) {
      throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
    }
    const results = await Promise.allSettled(
      sisters.map(async (sister) => {
        const runtime = await this.probeRuntime(sister, sshKeyPath, true);
        return this.withRuntimeName(sister.name, runtime);
      }),
    );
    return results.map((result, index) => {
      if (result.status === 'fulfilled') return result.value;
      return this.buildRuntimeFallback(sisters[index].name);
    });
  }
  async getSisterRuntime(name: string): Promise<SisterRuntimeSnapshot> {
    const sister = await this.findByName(name);
    if (!sister) throw new Error(`Sister ${name} not found`);
    const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
    if (!sshKeyPath) {
      throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
    }
    try {
      const runtime = await this.probeRuntime(sister, sshKeyPath, true);
      return this.withRuntimeName(sister.name, runtime);
    } catch {
      return this.buildRuntimeFallback(sister.name);
    }
  }
  async sendChatMessage(name: string, message: string) {
    const trimmed = message.trim();
    if (!trimmed) {
      throw new BadRequestException('message is required');
    }
    const sister = await this.findByName(name);
    if (!sister) throw new Error(`Sister ${name} not found`);
    const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
    if (!sshKeyPath) {
      throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
    }
    const sendResult = await this.ssh.executeCommand(
      sister.ip,
      sister.user,
      sshKeyPath,
      this.buildAgentSendCommand(trimmed),
    );
    const parsed = this.parseRemoteJson<ChatSendResult>(sendResult.stdout);
    if (!parsed?.ok) {
      throw new Error(parsed?.raw || 'Failed to send message to sister runtime');
    }
    const runtime = await this.getSisterRuntime(name).catch(() =>
      this.buildRuntimeFallback(name),
    );
    return {
      ok: true,
      reply: parsed.reply,
      status: parsed.status,
      runtime,
    };
  }
  async findByName(name: string) {
    return this.prisma.sisterConfig.findUnique({ where: { name } });
  }
@@ -138,21 +305,17 @@ export class SistersService {
    sshKeyPath: string,
  ): Promise<SisterStatus> {
    try {
-      const result = await this.ssh.executeCommand(
+      const runtime = await this.probeRuntime(sister, sshKeyPath, false);
-        sister.ip,
+      const gatewayConnected = Boolean(runtime.gatewayConnected);
-        sister.user,
+      const liveState = runtime.mainState ?? (gatewayConnected ? 'idle' : 'error');
-        sshKeyPath,
+      const status = runtimeStateToStatus(liveState, gatewayConnected);
        'if systemctl --user is-active hermes-agent >/dev/null 2>&1; then echo active; elif systemctl --user is-active hermes-gateway >/dev/null 2>&1; then echo active; elif pgrep -f "hermes.*gateway|hermes.*agent" >/dev/null 2>&1; then echo active; elif systemctl --user is-active openclaw-gateway >/dev/null 2>&1; then echo active; else echo inactive; fi',
      );
      const isActive = result.stdout.trim() === 'active';
      const status: 'online' | 'offline' = isActive ? 'online' : 'offline';
      const prevStatus = sister.status;
      const now = new Date();
      const lastSeen = gatewayConnected ? now : sister.lastSeen;
      await this.prisma.sisterConfig.update({
        where: { id: sister.id },
-        data: { lastSeen: isActive ? now : sister.lastSeen, status },
+        data: { lastSeen, status },
      });
      if (prevStatus !== status && this.activity) {
@@ -165,6 +328,8 @@ export class SistersService {
          .catch(() => {});
      }
      const isActive = liveState === 'thinking' || liveState === 'tool_calling' || liveState === 'speaking';
      return {
        id: sister.id,
        name: sister.name,
@@ -172,11 +337,87 @@ export class SistersService {
        lxcId: sister.lxcId,
        role: SISTER_ROLES[sister.name] ?? 'Unknown',
        status,
-        lastSeen: isActive ? now : sister.lastSeen,
+        lastSeen,
-        currentTask: null,
+        currentTask: runtime.currentTask ?? null,
        liveState,
        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}`);
      return this.buildOfflineStatus(sister);
    }
  }
  private async probeRuntime(
    sister: { name: string; ip: string; user: string },
    sshKeyPath: string,
    includeMessages: boolean,
  ): Promise<RuntimeProbeResult> {
    const result = await this.ssh.executeCommand(
      sister.ip,
      sister.user,
      sshKeyPath,
      this.buildRuntimeProbeCommand(includeMessages),
    );
    const parsed = this.parseRemoteJson<RuntimeProbeResult>(result.stdout);
    if (parsed) {
      return parsed;
    }
    const legacy = this.parseLegacyRuntimeResult(result.stdout);
    if (legacy) {
      return legacy;
    }
    throw new Error(`Runtime probe returned invalid JSON for ${sister.name}`);
  }
  private withRuntimeName(
    name: string,
    runtime: RuntimeProbeResult,
  ): SisterRuntimeSnapshot {
    return {
      name,
      gatewayConnected: Boolean(runtime.gatewayConnected),
      mainState: runtime.mainState ?? 'error',
      currentTask: runtime.currentTask ?? null,
      activeSessionLabel: runtime.activeSessionLabel ?? null,
      activeSessionUpdatedAt: runtime.activeSessionUpdatedAt ?? null,
      controlSessionKey: runtime.controlSessionKey ?? null,
      recentMessages: runtime.recentMessages ?? [],
      subagents: runtime.subagents ?? [],
    };
  }
  private buildOfflineStatus(sister: {
    id: number;
    name: string;
    user: string;
    lxcId: number;
    lastSeen: Date | null;
  }): SisterStatus {
    return {
      id: sister.id,
      name: sister.name,
@@ -186,8 +427,396 @@ export class SistersService {
      status: 'offline',
      lastSeen: sister.lastSeen,
      currentTask: null,
      liveState: 'error',
      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,
      },
    };
  }
  private buildRuntimeFallback(name: string): SisterRuntimeSnapshot {
    return {
      name,
      gatewayConnected: false,
      mainState: 'error',
      currentTask: null,
      activeSessionLabel: null,
      activeSessionUpdatedAt: null,
      controlSessionKey: null,
      recentMessages: [],
      subagents: [],
    };
  }
  private parseRemoteJson<T>(stdout: string): T | null {
    const trimmed = stdout.trim();
    const start = trimmed.indexOf('{');
    const end = trimmed.lastIndexOf('}');
    if (start === -1 || end === -1 || end <= start) return null;
    try {
      return JSON.parse(trimmed.slice(start, end + 1)) as T;
    } catch {
      return null;
    }
  }
  private parseLegacyRuntimeResult(stdout: string): RuntimeProbeResult | null {
    const trimmed = stdout.trim();
    if (trimmed === 'active') {
      return {
        gatewayConnected: true,
        mainState: 'idle',
        currentTask: null,
        activeSessionLabel: null,
        activeSessionUpdatedAt: null,
        controlSessionKey: null,
        recentMessages: [],
        subagents: [],
      };
    }
    if (trimmed === 'inactive') {
      return {
        gatewayConnected: false,
        mainState: 'error',
        currentTask: null,
        activeSessionLabel: null,
        activeSessionUpdatedAt: null,
        controlSessionKey: null,
        recentMessages: [],
        subagents: [],
      };
    }
    return null;
  }
  private buildRuntimeProbeCommand(includeMessages: boolean): string {
    return `
 GATEWAY_CONNECTED=0
 if systemctl --user is-active hermes-agent >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
 elif systemctl --user is-active hermes-gateway >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
 elif pgrep -f "hermes.*gateway|hermes.*agent" >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
 elif systemctl --user is-active openclaw-gateway >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
 elif pgrep -f "openclaw.*gateway|openclaw.*agent" >/dev/null 2>&1; then GATEWAY_CONNECTED=1; fi
 export GATEWAY_CONNECTED
 if command -v python3 >/dev/null 2>&1; then
 python3 - <<'PY'
 import json
 import os
 from pathlib import Path
 INCLUDE_MESSAGES = ${includeMessages ? 'True' : 'False'}
 MESSAGE_LIMIT = ${includeMessages ? '12' : '0'}
 def pick_base():
    for name in ('.hermes', '.openclaw'):
        candidate = Path.home() / name
        if candidate.exists():
            return candidate
    return None
 def load_json(path: Path):
    if not path.exists():
        return {}
    try:
        return json.loads(path.read_text(errors='ignore'))
    except Exception:
        return {}
 def normalize_role(role):
    if role in ('user', 'assistant'):
        return role
    if role in ('tool', 'toolResult'):
        return 'tool'
    return None
 def extract_text(content):
    if isinstance(content, str):
        return content.strip()
    parts = []
    if isinstance(content, list):
        for item in content:
            if not isinstance(item, dict):
                continue
            item_type = item.get('type')
            text = item.get('text') or item.get('input') or item.get('content') or ''
            if item_type in ('text', 'input_text', 'output_text') and text:
                parts.append(str(text).strip())
            elif item_type == 'tool_call':
                tool_name = item.get('name') or item.get('toolName') or 'tool'
                parts.append(f'[{tool_name}]')
    return ' '.join(part for part in parts if part).strip()
 def compact(text, limit=160):
    normalized = ' '.join((text or '').split())
    if not normalized:
        return ''
    if normalized.startswith('A new session was started via /new or /reset.'):
        return ''
    if len(normalized) <= limit:
        return normalized
    return normalized[: limit - 1] + '…'
 def read_recent_messages(session_file, limit):
    if not session_file or limit <= 0:
        return []
    path = Path(session_file)
    if not path.exists():
        return []
    out = []
    try:
        lines = path.read_text(errors='ignore').splitlines()
    except Exception:
        return []
    for line in reversed(lines):
        try:
            payload = json.loads(line)
        except Exception:
            continue
        if payload.get('type') != 'message':
            continue
        message = payload.get('message') or {}
        role = normalize_role(message.get('role'))
        if not role:
            continue
        content = compact(extract_text(message.get('content')))
        if not content:
            continue
        out.append(
            {
                'id': str(payload.get('id') or ''),
                'role': role,
                'content': content,
                'ts': payload.get('timestamp') or message.get('timestamp'),
            }
        )
        if len(out) >= limit:
            break
    out.reverse()
    return out
 def pick_session(index, prefer_key=None):
    if not isinstance(index, dict) or not index:
        return None, None
    if prefer_key and prefer_key in index:
        return prefer_key, index.get(prefer_key)
    items = sorted(index.items(), key=lambda item: item[1].get('updatedAt') or 0, reverse=True)
    return items[0]
 def get_label(entry):
    if not isinstance(entry, dict):
        return None
    return entry.get('displayName') or (entry.get('origin') or {}).get('label') or entry.get('lastTo')
 def latest_user_text(messages):
    for item in reversed(messages):
        if item.get('role') == 'user':
            return item.get('content')
    return None
 def age_minutes(updated_at):
    if not updated_at:
        return 10 ** 9
    return max(0, (int(__import__('time').time() * 1000) - int(updated_at)) // 60000)
 def state_from(entry, messages, connected):
    if not connected:
        return 'error'
    if not isinstance(entry, dict):
        return 'idle'
    status = entry.get('status') or ''
    last_role = messages[-1]['role'] if messages else None
    age_min = age_minutes(entry.get('updatedAt'))
    if status == 'running':
        if last_role == 'tool':
            return 'tool_calling'
        if last_role == 'assistant':
            return 'speaking'
        return 'thinking'
    if age_min <= 2:
        if last_role == 'assistant':
            return 'speaking'
        if last_role == 'tool':
            return 'tool_calling'
        if last_role == 'user':
            return 'thinking'
    if age_min <= 15 and last_role == 'assistant':
        return 'speaking'
    return 'idle'
 payload = {
    'gatewayConnected': os.environ.get('GATEWAY_CONNECTED') == '1',
    'mainState': 'error',
    'currentTask': None,
    'activeSessionLabel': None,
    'activeSessionUpdatedAt': None,
    'controlSessionKey': None,
    'recentMessages': [],
    'subagents': [],
 }
 base = pick_base()
 if not base:
    print(json.dumps(payload, ensure_ascii=False))
    raise SystemExit
 agents_root = base / 'agents'
 main_index = load_json(agents_root / 'main' / 'sessions' / 'sessions.json')
 active_key, active_entry = pick_session(main_index)
 control_key, control_entry = pick_session(main_index, 'agent:main:main')
 active_messages = read_recent_messages((active_entry or {}).get('sessionFile'), 8)
 control_messages = read_recent_messages(
    (control_entry or active_entry or {}).get('sessionFile'),
    MESSAGE_LIMIT if INCLUDE_MESSAGES else 0,
 )
 payload['mainState'] = state_from(active_entry, active_messages, payload['gatewayConnected'])
 payload['currentTask'] = latest_user_text(active_messages) or get_label(active_entry)
 payload['activeSessionLabel'] = get_label(active_entry)
 payload['activeSessionUpdatedAt'] = (active_entry or {}).get('updatedAt')
 payload['controlSessionKey'] = control_key or active_key
 payload['recentMessages'] = control_messages
 subagent_names = set()
 workspace_agents = base / 'workspace' / 'agents'
 if workspace_agents.exists():
    subagent_names.update(path.stem for path in workspace_agents.glob('*.md'))
 if agents_root.exists():
    subagent_names.update(
        path.name for path in agents_root.iterdir() if path.is_dir() and path.name != 'main'
    )
 for subagent in sorted(subagent_names):
    sub_index = load_json(agents_root / subagent / 'sessions' / 'sessions.json')
    _, sub_entry = pick_session(sub_index)
    sub_messages = read_recent_messages((sub_entry or {}).get('sessionFile'), 4)
    payload['subagents'].append(
        {
            'name': subagent,
            'state': state_from(sub_entry, sub_messages, payload['gatewayConnected']),
            'updatedAt': (sub_entry or {}).get('updatedAt'),
            'currentTask': latest_user_text(sub_messages) or get_label(sub_entry),
            'sessionLabel': get_label(sub_entry),
        }
    )
 print(json.dumps(payload, ensure_ascii=False))
 PY
 else
 printf '%s' '{"gatewayConnected":false,"mainState":"error","currentTask":null,"activeSessionLabel":null,"activeSessionUpdatedAt":null,"controlSessionKey":null,"recentMessages":[],"subagents":[]}'
 fi`.trim();
  }
  private buildAgentSendCommand(message: string): string {
    const messageB64 = Buffer.from(message, 'utf8').toString('base64');
    return `
 export MSG_B64='${messageB64}'
 if command -v python3 >/dev/null 2>&1 && command -v openclaw >/dev/null 2>&1; then
 python3 - <<'PY'
 import base64
 import json
 import os
 import subprocess
 message = base64.b64decode(os.environ['MSG_B64']).decode('utf-8')
 proc = subprocess.run(
    [
        'openclaw',
        'agent',
        '--agent',
        'main',
        '--message',
        message,
        '--json',
        '--timeout',
        '120',
    ],
    stdout=subprocess.PIPE,
    stderr=subprocess.STDOUT,
    text=True,
 )
 out = proc.stdout or ''
 start = out.find('{')
 end = out.rfind('}')
 payload = {}
 if start != -1 and end != -1 and end > start:
    try:
        payload = json.loads(out[start : end + 1])
    except Exception:
        payload = {}
 result = payload.get('result') if isinstance(payload.get('result'), dict) else {}
 payloads = result.get('payloads') if isinstance(result.get('payloads'), list) else []
 texts = []
 for item in payloads:
    if not isinstance(item, dict):
        continue
    text = item.get('text') or item.get('message') or item.get('content')
    if isinstance(text, str) and text.strip():
        texts.append(text.strip())
 reply = '\n\n'.join(texts).strip()
 if not reply and proc.returncode == 0:
    reply = str(payload.get('summary') or '응답 완료').strip()
 print(
    json.dumps(
        {
            'ok': proc.returncode == 0,
            'status': payload.get('status') or ('completed' if proc.returncode == 0 else 'failed'),
            'reply': reply,
            'raw': out[-4000:],
        },
        ensure_ascii=False,
    )
 )
 PY
 else
 printf '%s' '{"ok":false,"status":"failed","reply":"","raw":"openclaw runtime unavailable"}'
 fi`.trim();
  }
  private parseUptime(stdout: string) {
--- a/docs/product-specs/openclaw-office-dashboard-prd.md
+++ b/docs/product-specs/openclaw-office-dashboard-prd.md
@@ -0,0 +1,115 @@
 # 하나랑 오피스 대시보드 PRD
 ## 제품명
 하나랑 오피스 대시보드
 ## 한 줄 정의
 OpenClaw 4자매와 서브에이전트 협업을 2D 등축 투영 오피스로 시각화하고, 채팅/파이프라인/서버 헬스를 함께 운영하는 멀티에이전트 관제 프론트엔드.
 ## 배경
 기존 하나랑 대시보드는 운영 정보는 잘 보여주지만, 4자매와 서브에이전트가 실제로 어떻게 협업하는지 한눈에 느끼기엔 한계가 있어.
 자기야가 원하는 건 단순 상태 카드가 아니라:
 - 누가 자기 자리에서 대기 중인지
 - 누가 회의실로 이동했는지
 - 어떤 서브에이전트가 어떤 워크플로우에서 일하고 있는지
 - 지금 QA 루프인지 배포 직전인지
 를 `오피스`라는 직관적인 은유로 읽는 화면이야.
 ## 제품 목표
 1. 4자매 메인 에이전트와 17개 서브에이전트, 총 21개 에이전트를 하나의 세계관 안에서 시각화한다.
 2. 4자매 독립 Gateway WebSocket을 통해 실시간 상태를 반영한다.
 3. Lobster 워크플로우와 Discord handoff를 자연스럽게 한 화면에 묶는다.
 4. 직접 채팅, 파이프라인 현황, 서버 헬스까지 운영 도구를 통합한다.
 ## 핵심 사용자
 - 자기야: 전체 파이프라인 운영 책임자
 - 하랑이: Planning / handoff orchestration
 - 나랑이: 구현 상태 추적
 - 다랑이: QA 루프 / blocker 판단
 - 이랑이: 배포 / 인프라 점검
 ## 핵심 시나리오
 ### 시나리오 1: 현재 누가 일하고 있는지 한눈에 보기
 자기야가 메인 화면에 들어오면, 하랑/나랑/다랑/이랑 좌석과 주변 서브에이전트 상태를 보고 즉시 현재 국면을 판단한다.
 ### 시나리오 2: 구현 → QA → 배포 흐름 확인
 나랑이 쪽 서브에이전트가 활발히 움직이다가, 다랑이 회의실로 연결선이 넘어가고, 승인되면 이랑이 인프라 영역으로 흐름이 넘어가는 걸 본다.
 ### 시나리오 3: 특정 자매와 직접 대화
 자기야가 하랑이나 나랑이를 선택해서 direct chat을 열고 작업을 지시한다.
 ### 시나리오 4: 서버/헬스 이상 감지
 대시보드 한쪽 패널에서 Gateway 연결, Dev 서버, Docker 상태 이상을 바로 감지한다.
 ## 기능 요구사항
 ### 필수
 1. 4자매 Gateway WebSocket 연결
 2. 2D 등축 투영 오피스 메인 화면
 3. 메인 에이전트 4명 고정 좌석
 4. 서브에이전트 동적 이동/상태 표시
 5. 상태: `idle`, `thinking`, `tool_calling`, `speaking`, `error`
 6. 협업 연결선 / 회의실 이동 시각화
 7. 자매 선택 직접 채팅 인터페이스
 8. Lobster 워크플로우 / 스프린트 / 사이클 패널
 9. 서버 상태 패널 (4자매 + Dev + Docker)
 ### 중요
 10. live / snapshot / fallback 구분
 11. 실브라우저/모바일 대응
 12. 기존 하나랑 대시보드 운영 패널과의 연속성 유지
 ## 정보 구조
 ### 메인 오피스 화면
 - 좌측 또는 중앙: 오피스 씬
 - 우측: 선택 에이전트 detail / chat / workflow
 - 하단 또는 보조 패널: 서버 헬스 / 최근 handoff / sprint state
 ### 오피스 씬 요소
 - 하랑이 데스크
 - 나랑이 데스크
 - 다랑이 데스크
 - 이랑이 데스크
 - 회의실
 - 임시 작업석
 - 인프라/서버 존
 - 서브에이전트 이동 경로
 ### 채팅
 - 자매 선택 탭
 - 메시지 히스토리
 - 입력창
 - tool call 상태 / streaming 표시
 ### 운영 패널
 - active workflow
 - current sprint
 - review loop
 - deploy gate
 - server health
 ## 데이터 소스
 - 4자매 Gateway WebSocket
 - activity log
 - workflow state
 - session/chat API
 - admin/system/health API
 ## 기술 원칙
 - 기존 Next.js + styled-components 유지
 - Backend는 기존 Nest.js + Prisma 유지
 - WebSocket은 OpenClaw Gateway 기준
 - 필요 시 polling reconciliation 허용
 - fake 데이터 하드코딩 금지
 ## 비기능 요구사항
 - 첫 화면에서 현재 협업 구조 이해 가능
 - 과한 애니메이션 금지
 - 모바일에서도 핵심 흐름 유지
 - 데이터 소스 구분이 명확해야 함
 ## 성공 기준
 - 자기야가 메인 화면만 보고 현재 상태를 설명할 수 있음
 - 4자매/서브에이전트 구조가 카드보다 더 직관적으로 읽힘
 - 채팅/워크플로우/서버 패널이 따로 놀지 않음
 - live / snapshot / fallback 구분이 사용자에게 정직하게 보임
--- a/frontend/app/office/page.tsx
+++ b/frontend/app/office/page.tsx
@@ -0,0 +1,954 @@
 'use client';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { API_URL, POLL_INTERVAL_MS } from '@/lib/config';
 import { useSocket } from '@/lib/useSocket';
 import SisterAvatar from '@/components/common/SisterAvatar';
 import OfficeScene, {
  type AgentState,
  type SisterName,
  type SisterNode,
  type SubAgent,
  type SelectedAgent,
 } from '@/components/office/OfficeScene';
 import ContextPanel from '@/components/office/ContextPanel';
 import ChatWorkspace from '@/components/office/ChatWorkspace';
 import PipelinePanel from '@/components/office/PipelinePanel';
 import ServerHealthPanel, { type ServerEntry } from '@/components/office/ServerHealthPanel';
 import type { PipelineNode } from '@/components/dashboard/ActivePipeline';
 interface RuntimeSubagentItem {
  name: string;
  state: AgentState;
  updatedAt: number | null;
  currentTask: string | null;
  sessionLabel: string | null;
 }
 interface SisterRuntimeItem {
  name: SisterName;
  gatewayConnected: boolean;
  mainState: AgentState;
  currentTask: string | null;
  activeSessionLabel: string | null;
  activeSessionUpdatedAt: number | null;
  controlSessionKey: string | null;
  recentMessages: Array<{
    id: string;
    role: 'user' | 'assistant' | 'tool';
    content: string;
    ts: string | null;
  }>;
  subagents: RuntimeSubagentItem[];
 }
 interface SisterApiItem {
  id?: number;
  name: SisterName;
  status: 'online' | 'offline' | 'working' | 'unknown';
  role?: string;
  currentTask?: string | null;
  lastSeen?: string | null;
  cpu?: number;
  memory?: { used?: number; total?: number };
  liveState?: AgentState;
  activeSessionLabel?: string | null;
  gatewayConnected?: boolean;
  subagents?: RuntimeSubagentItem[];
 }
 interface DashboardOpsData {
  focusProject: {
    name: string;
    phase: string;
    progress: number;
    deployStatus: string;
    currentSprint?: string | null;
    ownerSister?: string | null;
  } | null;
  pipeline: {
    activeTask: string;
    focus: string;
    reviewLoopCount: number;
    escalationCount: number;
    deployState: string;
    nodes: PipelineNode[];
  };
  freshness: {
    generatedAt: string;
    activityLatestAt: string | null;
    sistersLatestAt: string | null;
    qaDocLatestAt: string | null;
  };
 }
 const SUBAGENT_DEFS: Record<SisterName, { id: string; name: string; label: string }[]> = {
  harang: [
    { id: 'harang-planner', name: 'planner', label: 'planner' },
    { id: 'harang-task-tracker', name: 'task-tracker', label: 'task-tracker' },
    { id: 'harang-prd-writer', name: 'prd-writer', label: 'prd-writer' },
  ],
  narang: [
    { id: 'narang-worker', name: 'worker', label: 'worker' },
    { id: 'narang-db-designer', name: 'db-designer', label: 'db-designer' },
    { id: 'narang-test-writer', name: 'test-writer', label: 'test-writer' },
    { id: 'narang-refactorer', name: 'refactorer', label: 'refactorer' },
  ],
  darang: [
    { id: 'darang-reviewer', name: 'reviewer', label: 'reviewer' },
    { id: 'darang-code-reviewer', name: 'code-reviewer', label: 'code-reviewer' },
    { id: 'darang-qa-tester', name: 'qa-tester', label: 'qa-tester' },
    { id: 'darang-security-auditor', name: 'security-auditor', label: 'security-auditor' },
    { id: 'darang-ux-reviewer', name: 'ux-reviewer', label: 'ux-reviewer' },
  ],
  erang: [
    { id: 'erang-deploy-manager', name: 'deploy-manager', label: 'deploy-manager' },
    { id: 'erang-db-manager', name: 'db-manager', label: 'db-manager' },
    { id: 'erang-nginx-manager', name: 'nginx-manager', label: 'nginx-manager' },
    { id: 'erang-monitoring', name: 'monitoring', label: 'monitoring' },
    { id: 'erang-dns-manager', name: 'dns-manager', label: 'dns-manager' },
  ],
 };
 const SISTER_DISPLAY: Record<SisterName, string> = {
  harang: '하랑이',
  narang: '나랑이',
  darang: '다랑이',
  erang: '이랑이',
 };
 const SISTER_ROLES: Record<SisterName, string> = {
  harang: 'Planning & Orchestration',
  narang: 'Development',
  darang: 'QA & Review',
  erang: 'Infra & Deploy',
 };
 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: 'narang', status: 'unknown', role: SISTER_ROLES.narang, currentTask: null },
  { name: 'darang', status: 'unknown', role: SISTER_ROLES.darang, currentTask: null },
  { name: 'erang', status: 'unknown', role: SISTER_ROLES.erang, currentTask: null },
 ];
 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';
  if (status === 'online') return hasTask ? 'speaking' : 'idle';
  return 'idle';
 }
 function derivedSubagentState(parentState: AgentState, index: number): AgentState {
  if (parentState === 'error') return 'idle';
  if (parentState === 'tool_calling' && index === 0) return 'thinking';
  if (parentState === 'speaking' && index <= 1) return 'thinking';
  return 'idle';
 }
 function normalizeSubagentState(state?: AgentState): AgentState {
  if (state === 'thinking' || state === 'tool_calling' || state === 'speaking' || state === 'error') {
    return state;
  }
  return 'idle';
 }
 function mergeSisterData(
  statuses: SisterApiItem[],
  runtime: SisterRuntimeItem[],
  previous: SisterApiItem[] = [],
 ): SisterApiItem[] {
  const previousMap = new Map(previous.map((item) => [item.name, item]));
  const statusMap = new Map(statuses.map((item) => [item.name, item]));
  const runtimeMap = new Map(runtime.map((item) => [item.name, item]));
  return SISTER_ORDER.map((name) => {
    const prev = previousMap.get(name);
    const status = statusMap.get(name) ?? prev;
    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,
      name,
      role: status.role ?? prev?.role ?? SISTER_ROLES[name],
      currentTask: live?.currentTask ?? status.currentTask ?? prev?.currentTask ?? null,
      liveState: live?.mainState ?? prev?.liveState,
      activeSessionLabel: live?.activeSessionLabel ?? prev?.activeSessionLabel ?? null,
      gatewayConnected: live?.gatewayConnected ?? prev?.gatewayConnected ?? false,
      subagents: live?.subagents ?? prev?.subagents ?? [],
    };
  });
 }
 function buildSisterNodes(sisters: SisterApiItem[]): SisterNode[] {
  return SISTER_ORDER.map((name) => {
    const item = sisters.find((s) => s.name === name);
    const fallbackState = statusToAgentState(item?.status ?? 'unknown', Boolean(item?.currentTask));
    const state = item?.gatewayConnected ? item.liveState ?? fallbackState : fallbackState;
    const runtimeSubagents = item?.subagents ?? [];
    const runtimeMap = new Map(runtimeSubagents.map((sub) => [sub.name, sub]));
    const subagents: SubAgent[] = SUBAGENT_DEFS[name].map((def, index) => {
      const runtime = runtimeMap.get(def.name);
      return {
        id: def.id,
        name: def.name,
        label: def.label,
        sister: name,
        state: runtime ? normalizeSubagentState(runtime.state) : derivedSubagentState(state, index),
        currentTask: runtime?.currentTask ?? null,
        updatedAt: runtime?.updatedAt ?? null,
        sessionLabel: runtime?.sessionLabel ?? null,
      };
    });
    return {
      name,
      displayName: SISTER_DISPLAY[name],
      role: item?.role ?? SISTER_ROLES[name],
      state,
      currentTask: item?.currentTask ?? null,
      activeSessionLabel: item?.activeSessionLabel ?? null,
      subagents,
    };
  });
 }
 function buildServerEntries(sisters: SisterApiItem[], sisterSource: 'live' | 'snapshot' | 'fallback'): ServerEntry[] {
  const sisterEntries: ServerEntry[] = SISTER_ORDER.map((name) => {
    const sister = sisters.find((item) => item.name === name);
    return {
      id: `server-${name}`,
      label: SISTER_DISPLAY[name],
      type: 'sister' as const,
      status: sister?.status ?? 'unknown',
      detail: sister?.currentTask ?? sister?.activeSessionLabel ?? null,
      source: sister ? sisterSource : 'fallback',
    };
  });
  const extraEntries: ServerEntry[] = [
    { id: 'server-dev', label: 'Dev Server', type: 'dev', status: 'unknown', detail: null, source: 'fallback' },
    { id: 'server-docker', label: 'Docker / Infra', type: 'docker', status: 'unknown', detail: null, source: 'fallback' },
  ];
  return [...sisterEntries, ...extraEntries];
 }
 function formatGeneratedAt(ts: string): string {
  try {
    return new Date(ts).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
  } catch {
    return ts;
  }
 }
 const Shell = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-height: 0;
 `;
 const PageHeader = styled.div`
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  flex-wrap: wrap;
 `;
 const PageTitle = styled.h1`
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
 `;
 const PageMeta = styled.div`
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  @media (max-width: 1279px) {
    display: none;
  }
 `;
 const FreshnessBar = styled.div`
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-left: auto;
  @media (max-width: 1279px) {
    margin-left: 0;
    width: 100%;
  }
 `;
 const FreshnessBadge = styled.span<{ $type: 'live' | 'snapshot' | 'fallback' }>`
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: ${({ $type }) => ($type === 'live' ? '#00BFA5' : $type === 'snapshot' ? '#FF9800' : '#777')};
  border: 1px solid currentColor;
  padding: 2px 6px;
  opacity: 0.8;
 `;
 /* ─── Desktop layout (≥1280px): scene + context side-by-side ─── */
 const DesktopMain = styled.div`
  display: flex;
  gap: 0;
  min-height: 0;
  flex: 1;
  @media (max-width: 1279px) {
    display: none;
  }
 `;
 const SceneColumn = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
 `;
 const ChatArea = styled.div`
  height: 520px;
  flex-shrink: 0;
  @media (max-width: 1279px) {
    height: 400px;
  }
 `;
 const BottomPanels = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  @media (max-width: 1279px) {
    display: none;
  }
 `;
 const LoadingOverlay = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
 `;
 /* ─── Mobile layout (<1280px) ─── */
 const MobileFlow = styled.div`
  display: none;
  flex-direction: column;
  gap: var(--space-lg);
  @media (max-width: 1279px) {
    display: flex;
  }
 `;
 const MobileSisterGrid = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
 `;
 const STATE_CARD_COLORS: Record<AgentState, string> = {
  idle: '#444',
  thinking: '#2979FF',
  tool_calling: '#FF9800',
  speaking: '#00BFA5',
  error: '#FF1744',
 };
 const MobileSisterCard = styled.button<{ $state: AgentState; $selected: boolean }>`
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid ${({ $state }) => STATE_CARD_COLORS[$state]};
  background: ${({ $selected }) => ($selected ? 'rgba(255,255,255,0.04)' : 'var(--bg-surface)')};
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-primary);
  outline: ${({ $selected }) => ($selected ? '1px solid var(--text-primary)' : 'none')};
  outline-offset: -1px;
 `;
 const MobileCardMeta = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
 `;
 const MobileCardName = styled.div`
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
 `;
 const MobileCardState = styled.div<{ $state: AgentState }>`
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: ${({ $state }) => STATE_CARD_COLORS[$state]};
 `;
 const MobileCardTask = styled.div`
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 `;
 const MobileFocusSection = styled.div`
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
 `;
 const MobileSectionEyebrow = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
 `;
 const MobileFocusTitle = styled.div`
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
 `;
 const MobileFocusDetail = styled.div`
  font-size: 12px;
  color: var(--text-secondary);
 `;
 const MobileHealthRow = styled.div`
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
 `;
 const MobileHealthChip = styled.div<{ $ok: boolean }>`
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border: 1px solid ${({ $ok }) => ($ok ? '#00BFA5' : '#555')};
  color: ${({ $ok }) => ($ok ? '#00BFA5' : '#777')};
 `;
 const MobileQuickActions = styled.div`
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
 `;
 const MobileActionBtn = styled.button`
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  font-family: var(--font-mono);
  &:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
  }
 `;
 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);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
 `;
 const MobileContextHeader = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
 `;
 const MobileContextTitle = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
 `;
 const MobileCloseBtn = styled.button`
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  &:hover { color: var(--text-primary); }
 `;
 const MobileSelectedSummary = styled.div`
  display: flex;
  align-items: center;
  gap: var(--space-sm);
 `;
 const MobileSelectedMeta = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2px;
 `;
 const MobileSelectedName = styled.div`
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
 `;
 const MobileSelectedRole = styled.div`
  font-size: 11px;
  color: var(--text-secondary);
 `;
 const MobileTaskBox = styled.div`
  font-size: 12px;
  color: #58A6FF;
  padding: var(--space-sm) var(--space-md);
  background: rgba(88, 166, 255, 0.06);
  border-left: 2px solid #58A6FF;
  line-height: 1.5;
 `;
 const MobileChatArea = styled.div`
  height: 400px;
  flex-shrink: 0;
  @media (max-width: 389px) {
    height: 360px;
  }
 `;
 export default function OfficePage() {
  const [sisters, setSisters] = useState<SisterApiItem[]>([]);
  const [opsData, setOpsData] = useState<DashboardOpsData | null>(null);
  const [loading, setLoading] = useState(true);
  const [selected, setSelected] = useState<SelectedAgent | null>(null);
  const [chatSister, setChatSister] = useState<SisterName | null>(null);
  const { connected } = useSocket<SisterApiItem>({
    onSistersUpdate: (updated) => {
      setSisters((prev) => mergeSisterData(updated, [], prev));
    },
  });
  const fetchAll = useCallback(async () => {
    const [sistersRes, opsRes, runtimeRes] = await Promise.allSettled([
      fetch(`${API_URL}/api/sisters`).then((r) => r.json()),
      fetch(`${API_URL}/api/dashboard/ops`).then((r) => r.json()),
      fetch(`${API_URL}/api/sisters/runtime`).then((r) => r.json()),
    ]);
    setSisters((prev) => {
      const base = sistersRes.status === 'fulfilled' && Array.isArray(sistersRes.value) ? sistersRes.value as SisterApiItem[] : prev;
      const runtime = runtimeRes.status === 'fulfilled' && Array.isArray(runtimeRes.value) ? runtimeRes.value as SisterRuntimeItem[] : [];
      return mergeSisterData(base, runtime, prev);
    });
    if (opsRes.status === 'fulfilled') {
      setOpsData(opsRes.value as DashboardOpsData);
    }
  }, []);
  useEffect(() => {
    const boot = async () => {
      try {
        await fetchAll();
      } finally {
        setLoading(false);
      }
    };
    void boot();
    // Polling fallback — only when socket is disconnected
    // Socket handles live updates; polling is a disconnected fallback
    return () => {};
  }, [fetchAll]);
  useEffect(() => {
    if (connected) return; // socket is live, no polling needed
    const interval = setInterval(() => {
      void fetchAll();
    }, POLL_INTERVAL_MS);
    return () => clearInterval(interval);
  }, [connected, fetchAll]);
  const hasSisterSnapshot = sisters.length > 0;
  const sisterDataMode: 'live' | 'snapshot' | 'fallback' = connected ? 'live' : hasSisterSnapshot ? 'snapshot' : 'fallback';
  const effectiveSisters = hasSisterSnapshot ? sisters : FALLBACK_SISTERS;
  const sisterNodes = useMemo(() => buildSisterNodes(effectiveSisters), [effectiveSisters]);
  const serverEntries = useMemo(() => buildServerEntries(effectiveSisters, sisterDataMode), [effectiveSisters, sisterDataMode]);
  const subagentMode: 'live' | 'fallback' = useMemo(() => {
    return effectiveSisters.some((item) => (item.subagents?.length ?? 0) > 0) ? 'live' : 'fallback';
  }, [effectiveSisters]);
  const handleSelectSister = useCallback((name: SisterName) => {
    setSelected({ type: 'sister', name });
    setChatSister(null);
  }, []);
  const handleSelectSubagent = useCallback((id: string, sister: SisterName) => {
    setSelected({ type: 'subagent', id, sister });
    setChatSister(null);
  }, []);
  const handleOpenChat = useCallback((sisterName: SisterName) => {
    setChatSister(sisterName);
  }, []);
  const pipeline = opsData?.pipeline ?? {
    activeTask: 'SPRINT-016',
    focus: 'Office runtime sync',
    reviewLoopCount: 0,
    escalationCount: 0,
    deployState: '—',
    nodes: [],
  };
  const freshness = opsData?.freshness ?? {
    generatedAt: new Date().toISOString(),
    activityLatestAt: null,
    sistersLatestAt: null,
    qaDocLatestAt: null,
  };
  const selectedSisterNode = useMemo(() => {
    if (!selected) return null;
    if (selected.type === 'sister') return sisterNodes.find((s) => s.name === selected.name) ?? null;
    if (selected.type === 'subagent') return sisterNodes.find((s) => s.name === selected.sister) ?? null;
    return null;
  }, [selected, sisterNodes]);
  const selectedSubagent = useMemo(() => {
    if (selected?.type !== 'subagent') return null;
    return selectedSisterNode?.subagents.find((sub) => sub.id === selected.id) ?? null;
  }, [selected, selectedSisterNode]);
  const onlineCount = useMemo(
    () => effectiveSisters.filter((s) => s.status === 'online' || s.status === 'working').length,
    [effectiveSisters],
  );
  if (loading) {
    return <LoadingOverlay>오피스 데이터 로딩 중...</LoadingOverlay>;
  }
  return (
    <Shell>
      <PageHeader>
        <PageTitle>🏢 오피스 대시보드</PageTitle>
        <PageMeta>4자매 · {SUBAGENT_COUNT} 서브에이전트 · 협업 관제</PageMeta>
        <FreshnessBar>
          <FreshnessBadge $type={sisterDataMode}>
            source: {sisterDataMode}
          </FreshnessBadge>
          <FreshnessBadge $type={subagentMode === 'live' ? 'live' : 'fallback'}>
            agents: {subagentMode}
          </FreshnessBadge>
          <FreshnessBadge $type="snapshot">pipeline: snapshot</FreshnessBadge>
        </FreshnessBar>
      </PageHeader>
      {/* ─── Desktop layout (≥1280px) ─── */}
      <DesktopMain>
        <SceneColumn>
          <OfficeScene
            sisters={sisterNodes}
            selected={selected}
            onSelectSister={handleSelectSister}
            onSelectSubagent={handleSelectSubagent}
            dataMode={sisterDataMode}
            subagentMode={subagentMode}
          />
          {chatSister && (
            <ChatArea>
              <ChatWorkspace initialSister={chatSister} onClose={() => setChatSister(null)} />
            </ChatArea>
          )}
        </SceneColumn>
        <ContextPanel
          selected={selected}
          sisters={sisterNodes}
          onOpenChat={handleOpenChat}
          onClear={() => setSelected(null)}
        />
      </DesktopMain>
      {/* ─── Mobile layout (<1280px) ─── */}
      <MobileFlow>
        {/* 1. Operational summary — always first */}
        <MobileOpsSummary>
          <MobileSectionEyebrow>운영 요약</MobileSectionEyebrow>
          <MobileFocusTitle>{pipeline.activeTask}</MobileFocusTitle>
          <MobileFocusDetail>{pipeline.focus}</MobileFocusDetail>
          <MobileHealthRow>
            <MobileHealthChip $ok={sisterDataMode === 'live'}>
              {sisterDataMode === 'live' ? 'live' : sisterDataMode === 'snapshot' ? 'snapshot' : 'fallback'}
            </MobileHealthChip>
            <MobileHealthChip $ok={onlineCount >= 3}>
              {onlineCount}/{SISTER_ORDER.length} connected
            </MobileHealthChip>
            <MobileHealthChip $ok={pipeline.deployState !== 'blocked'}>
              deploy: {pipeline.deployState}
            </MobileHealthChip>
          </MobileHealthRow>
          <MobileQuickActions>
            {SISTER_ORDER.map((name) => (
              <MobileActionBtn key={name} onClick={() => handleOpenChat(name)}>
                {SISTER_DISPLAY[name]}
              </MobileActionBtn>
            ))}
          </MobileQuickActions>
        </MobileOpsSummary>
        {/* 2. Group blocks — group mental model, not 4 individual cards */}
        <MobileSisterGrid>
          {GROUP_DEFS.map((group) => {
            const groupSisters = group.members.map((m) => sisterNodes.find((s) => s.name === m)).filter(Boolean) as typeof sisterNodes;
            const hasActive = groupSisters.some((s) => s.state === 'tool_calling' || s.state === 'thinking' || s.state === 'speaking');
            const workingCount = groupSisters.filter((s) => s.state === 'tool_calling' || s.state === 'thinking' || s.state === 'speaking').length;
            const connectedCount = groupSisters.filter((s) => s.state !== 'error').length;
            const isExpanded = selected?.type === 'sister' && group.members.includes(selected.name);
            const groupState = truthfulStateLabel(
              groupSisters[0]?.state ?? 'idle',
              sisterDataMode,
            );
            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>
                          <MobileSelectedRole>
                            {truthfulStateLabel(sister.state, sisterDataMode)}
                            {sister.currentTask ? ` · ${sister.currentTask}` : ''}
                          </MobileSelectedRole>
                        </MobileSelectedMeta>
                      </MobileSelectedSummary>
                    ))}
                    <MobileQuickActions>
                      <MobileActionBtn onClick={(e) => { e.stopPropagation(); handleOpenChat(group.members[0]); }}>채팅</MobileActionBtn>
                    </MobileQuickActions>
                  </MobileGroupDetail>
                )}
              </MobileGroupBlock>
            );
          })}
        </MobileSisterGrid>
        {/* 3. Chat (if open) */}
        {chatSister && (
          <MobileChatArea>
            <ChatWorkspace initialSister={chatSister} onClose={() => setChatSister(null)} />
          </MobileChatArea>
        )}
        {/* 4. Pipeline panel */}
        <PipelinePanel
          activeTask={pipeline.activeTask}
          focus={pipeline.focus}
          reviewLoopCount={pipeline.reviewLoopCount}
          escalationCount={pipeline.escalationCount}
          deployState={pipeline.deployState}
          nodes={pipeline.nodes}
          freshness={`generated ${formatGeneratedAt(freshness.generatedAt)}`}
        />
        {/* 5. Server health */}
        <ServerHealthPanel
          servers={serverEntries}
          dataMode={sisterDataMode}
          generatedAt={freshness.generatedAt}
        />
      </MobileFlow>
      {/* ─── Desktop bottom panels ─── */}
      <BottomPanels>
        <PipelinePanel
          activeTask={pipeline.activeTask}
          focus={pipeline.focus}
          reviewLoopCount={pipeline.reviewLoopCount}
          escalationCount={pipeline.escalationCount}
          deployState={pipeline.deployState}
          nodes={pipeline.nodes}
          freshness={`generated ${formatGeneratedAt(freshness.generatedAt)}`}
        />
        <ServerHealthPanel
          servers={serverEntries}
          dataMode={sisterDataMode}
          generatedAt={freshness.generatedAt}
        />
      </BottomPanels>
    </Shell>
  );
 }
--- a/frontend/app/org/page.tsx
+++ b/frontend/app/org/page.tsx
@@ -3,278 +3,506 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { API_URL } from '@/lib/config';
 import SisterAvatar from '@/components/common/SisterAvatar';
-// ─── Styled ───
+// ─── Types ───
-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 HeaderInfo = styled.div`
+const OrgHeader = styled.div`
  display: flex;
-  gap: var(--space-xl);
+  justify-content: space-between;
-  font-family: var(--font-mono);
+  align-items: baseline;
-  font-size: 11px;
+  gap: var(--space-lg);
-  color: var(--text-secondary);
+  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--space-md);
  span { color: var(--text-primary); }
 `;
-const TreeContainer = styled.div`
+const OrgTitle = styled.h1`
-  display: flex;
+  font-size: 20px;
  flex-direction: column;
  align-items: center;
  overflow-x: auto;
  padding: var(--space-xl) 0;
  @media (max-width: 767px) {
    align-items: flex-start;
  }
 `;
 const NodeGroup = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
 `;
 const TerminalCard = styled.div<{ $level: 'high' | 'mid' | 'low' | 'none' }>`
  border: 1px solid ${({ $level }) => ({
    high: '#f43f5e',
    mid: '#3b82f6',
    low: '#10b981',
    none: '#525252',
  })[$level]};
  border-left-width: 3px;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-main);
  min-width: 200px;
  max-width: 260px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
  cursor: default;
  &:hover {
    box-shadow: 0 12px 36px rgba(0,0,0,0.7);
  }
 `;
 const NodeLabel = styled.div`
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
-  margin-bottom: var(--space-sm);
+  letter-spacing: -0.01em;
  span {
    color: var(--text-secondary);
    margin-right: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 11px;
  }
 `;
-const BadgeRow = styled.div`
+const OrgMeta = styled.div`
  display: flex;
-  gap: var(--space-xs);
+  gap: var(--space-md);
  flex-wrap: wrap;
 `;
-const Badge = styled.div`
+const OrgBadge = styled.span<{ $tone: 'default' | 'active' | 'fallback' }>`
  background: #1a1a1a;
  border: 1px solid var(--border-color);
  padding: 2px 6px;
  font-size: 9px;
  font-family: var(--font-mono);
-  font-weight: 700;
+  font-size: 10px;
  text-transform: uppercase;
-  letter-spacing: 0.04em;
+  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;
-  b { color: var(--text-primary); font-weight: normal; }
+  letter-spacing: 0.08em;
  margin: 0;
 `;
-const TreeConnector = styled.div`
+const HQCard = styled.div`
-  width: 1px;
+  border: 1px solid var(--border-color);
-  height: 24px;
+  border-left-width: 3px;
-  background: var(--border-color);
+  border-left-color: #f6b26b;
-  margin: 0 auto;
+  padding: var(--space-lg);
-`;
+  background: var(--bg-surface);
 const TreeBranch = styled.div`
  display: flex;
  flex-direction: column;
-  align-items: center;
+  gap: var(--space-md);
 `;
-const TreeChildren = styled.div`
+const TeamGrid = styled.div`
-  display: flex;
+  display: grid;
-  gap: var(--space-xl);
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  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; }
+  @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`
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
 `;
 const AgentMeta = styled.div`
  font-size: 11px;
  color: var(--text-secondary);
 `;
 const EmptyState = 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 PageFooter = styled.footer`
  margin-top: auto;
  width: 100%;
  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;
 `;
-type Level = 'high' | 'mid' | 'low' | 'none';
+// ─── Component ───
 interface OrgData {
  owner: { name: string; role: string };
  sisters: Array<{
    name: string;
    role: string;
    description?: string;
    status?: string;
    lxcId?: number;
  }>;
  pipeline: Array<{ from: string; to: string; label: string }>;
 }
 const LEVEL_MAP: Record<string, Level> = {
  Orchestrator: 'high',
  Generator: 'mid',
  Evaluator: 'mid',
  'Infra Manager': 'low',
 };
 const ROLE_TAG: Record<string, string> = {
  Orchestrator: 'ORCH',
  Generator: 'GEN',
  Evaluator: 'EVAL',
  'Infra Manager': 'INFRA',
 };
 const LXC_ID: Record<string, number> = {
  harang: 104,
  narang: 105,
  darang: 106,
  erang: 107,
 };
 export default function OrgPage() {
-  const [orgData, setOrgData] = useState<OrgData | null>(null);
+  const [orgData, setOrgData] = useState<OrgApiData | null>(null);
-  const ts = new Date().toLocaleDateString('ko-KR').replace(/\. /g, '.').replace('.', '') + '_' +
+  const [dataSource, setDataSource] = useState<'live' | 'snapshot' | 'fallback'>('fallback');
    new Date().toLocaleTimeString('ko-KR', { hour12: false, hour: '2-digit', minute: '2-digit' });
  useEffect(() => {
    fetch(`${API_URL}/api/org`)
      .then((r) => r.json())
-      .then(setOrgData)
+      .then((data) => {
-      .catch(() => {});
+        setOrgData(data);
        setDataSource(data.orgUnits ? 'snapshot' : data.sisters?.length > 0 ? 'snapshot' : 'fallback');
      })
      .catch(() => {
        setDataSource('fallback');
      });
  }, []);
-  const sisters = orgData?.sisters ?? [];
+  const { orgUnits, members, independentAgents } = orgData
    ? 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 (
-    <MainViewport>
+    <Shell>
-      <HeaderInfo>
+      <OrgHeader>
-        <div>SYS_TYPE: <span>CORE_ROOT_01</span></div>
+        <OrgTitle>조직도</OrgTitle>
-        <div>TIMESTAMP: <span style={{ color: 'var(--text-secondary)' }}>{ts}</span></div>
+        <OrgMeta>
-      </HeaderInfo>
+          <OrgBadge $tone={dataSource === 'fallback' ? 'fallback' : 'default'}>
            source: {dataSource}
          </OrgBadge>
          <OrgBadge $tone="default">{totalUnits} units</OrgBadge>
          <OrgBadge $tone="default">{totalMembers} members</OrgBadge>
          <OrgBadge $tone="default">{independentAgents.length} agents</OrgBadge>
        </OrgMeta>
      </OrgHeader>
-      <TreeContainer>
+      {/* HQ Section */}
-        <NodeGroup>
+      {hqUnit && (
-          {/* HQ */}
+        <>
-          <TerminalCard $level="high">
+          <SectionLabel>HQ</SectionLabel>
-            <NodeLabel><span>[HQ]</span> 하나랑 글로벌</NodeLabel>
+          <HQCard>
-            <BadgeRow>
+            <TeamTitle>{hqUnit.name}</TeamTitle>
-              <Badge>MEM: <b>{sisters.length + 1}</b></Badge>
+            <TeamLead>
-              <Badge>S_ADMIN</Badge>
+              {hqUnit.lead
-              <Badge>LV_09</Badge>
+                ? `LEAD: ${MEMBER_DISPLAY[hqUnit.lead] ?? hqUnit.lead}`
-            </BadgeRow>
+                : 'LEAD 미정'}
-          </TerminalCard>
+            </TeamLead>
-          <TreeConnector />
+            <MemberChipRow>
-
+              {hqUnit.memberIds.map((id) => {
-          {/* 자매 레벨 */}
+                const member = memberMap.get(id);
-          <TreeBranch>
+                const tone = member ? statusTone(member.status) : 'unknown';
-            <TreeChildren>
+                return (
-              {/* 하랑이 (Orchestrator) */}
+                  <MemberChip key={id} $tone={tone}>
-              {sisters.filter((s) => s.role === 'Orchestrator').map((s) => (
+                    <SisterAvatar name={id} size={20} />
-                <NodeGroup key={s.name}>
+                    <StatusDot $tone={tone} />
-                  <TerminalCard $level={LEVEL_MAP[s.role] ?? 'none'}>
+                    {MEMBER_DISPLAY[id] ?? id}
-                    <NodeLabel>
+                  </MemberChip>
-                      <span>[{ROLE_TAG[s.role] ?? s.role}]</span>
+                );
-                      {s.name === 'harang' ? '하랑이' : s.name}
+              })}
-                    </NodeLabel>
+            </MemberChipRow>
-                    <BadgeRow>
+            <MetaRow>
-                      <Badge>LXC: <b>{LXC_ID[s.name] ?? '---'}</b></Badge>
+              {hqUnit.memberIds.map((id) => {
-                      <Badge>{ROLE_TAG[s.role] ?? s.role}</Badge>
+                const member = memberMap.get(id);
-                      <Badge>{s.status === 'online' ? 'ACTIVE' : s.status === 'offline' ? 'STBY' : 'RUN'}</Badge>
+                return (
-                    </BadgeRow>
+                  <span key={id}>
-                  </TerminalCard>
+                    {MEMBER_DISPLAY[id] ?? id}: {member ? statusLabel(member.status) : 'unknown'}
-                  <TreeConnector />
+                    {LXC_ID[id] ? ` · LXC ${LXC_ID[id]}` : ''}
-                  <TreeBranch>
+                  </span>
-                    <TreeChildren>
+                );
-                      {/* 나랑/다랑/이랑 */}
+              })}
-                      {sisters.filter((s2) => s2.role !== 'Orchestrator').map((s2) => (
+            </MetaRow>
-                        <NodeGroup key={s2.name}>
+          </HQCard>
-                          <TerminalCard $level={LEVEL_MAP[s2.role] ?? 'none'}>
+        </>
                            <NodeLabel>
                              {s2.name === 'narang' ? '나랑이' : s2.name === 'darang' ? '다랑이' : '이랑이'}
                            </NodeLabel>
                            <BadgeRow>
                              <Badge>LXC: <b>{LXC_ID[s2.name] ?? '---'}</b></Badge>
                              <Badge>{ROLE_TAG[s2.role] ?? s2.role}</Badge>
                              <Badge>{s2.status === 'online' ? 'ON' : s2.status === 'offline' ? '--' : 'RUN'}</Badge>
                            </BadgeRow>
                          </TerminalCard>
                        </NodeGroup>
                      ))}
                    </TreeChildren>
                  </TreeBranch>
                </NodeGroup>
              ))}
              {/* Orchestrator 없을 때 fallback */}
              {sisters.filter((s) => s.role === 'Orchestrator').length === 0 && (
                <NodeGroup>
                  <TerminalCard $level="none">
                    <NodeLabel>데이터 없음</NodeLabel>
                    <BadgeRow><Badge>N/A</Badge></BadgeRow>
                  </TerminalCard>
                </NodeGroup>
      )}
-            </TreeChildren>
+
-          </TreeBranch>
+      {/* Functional Teams */}
-        </NodeGroup>
+      <SectionLabel>FUNCTIONAL TEAMS</SectionLabel>
-      </TreeContainer>
+      <TeamGrid>
        {functionalTeams.map((team) => (
          <TeamCard key={team.id}>
            <TeamTitle>{team.name}</TeamTitle>
            <TeamLead>
              {team.lead
                ? `LEAD: ${MEMBER_DISPLAY[team.lead] ?? team.lead}`
                : 'LEAD 미정'}
            </TeamLead>
            <MemberChipRow>
              {team.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>
              {team.memberIds.map((id) => {
                const member = memberMap.get(id);
                return (
                  <span key={id}>
                    {member?.role ?? 'unknown'}
                    {member ? ` · ${statusLabel(member.status)}` : ''}
                    {member ? ` · ${member.source}` : ''}
                  </span>
                );
              })}
              <span>freshness: {formatFreshness(
                team.memberIds
                  .map((id) => memberMap.get(id)?.freshness.lastSnapshotAt)
                  .filter(Boolean)
                  .sort()
                  .at(-1) ?? null
              )}</span>
            </MetaRow>
          </TeamCard>
        ))}
      </TeamGrid>
      {/* Independent Agents */}
      <SectionLabel>INDEPENDENT AGENTS</SectionLabel>
      <AgentSection>
        {independentAgents.length === 0 ? (
          <EmptyState>INDEPENDENT AGENTS 없음</EmptyState>
        ) : (
          independentAgents.map((agent) => (
            <AgentCard key={agent.id}>
              <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>
      <PageFooter>
-        <div>TOTAL_NODES: {String(sisters.length + 1).padStart(2, '0')}</div>
+        <div>UNITS: {String(totalUnits).padStart(2, '0')}</div>
-        <div>STATUS: SYNC_COMPLETE</div>
+        <div>MEMBERS: {String(totalMembers).padStart(2, '0')}</div>
        <div>AGENTS: {String(independentAgents.length).padStart(2, '0')}</div>
        <div>SOURCE: {dataSource.toUpperCase()}</div>
      </PageFooter>
-    </MainViewport>
+    </Shell>
  );
 }
--- 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' : '#ff8d7a')};
+  background: ${({ $connected }) => ($connected ? '#8dffb2' : '#888')};
  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' : 'muted'}>{connected ? 'socket on' : 'socket off'}</Chip>
+            <Chip $tone={connected ? 'active' : 'default'}>{connected ? 'EVENT STREAM ON' : 'EVENT STREAM OFF'}</Chip>
-            <Chip $tone="default">snapshot {formatSyncLabel(derived.freshness.generatedAt)}</Chip>
+            <Chip $tone="default">{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,21 +999,33 @@ export default function DashboardPage() {
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
              <ConnectionDot $connected={connected} />
              <div>
-                <Eyebrow>Event stream</Eyebrow>
+                <Eyebrow>Connection</Eyebrow>
-                <div style={{ fontSize: 14, color: 'var(--text-primary)', marginTop: 4 }}>{connected ? 'SOCKET ON / EVENT MIRRORED' : 'SOCKET OFF / POLLING'}</div>
+                <div style={{ fontSize: 14, color: 'var(--text-primary)', marginTop: 4 }}>{connected ? 'EVENT STREAM ON' : 'EVENT STREAM OFF'}</div>
              </div>
            </div>
-            <LabelMeta><span>SYNC:</span>{formatSyncLabel(derived.freshness.activityLatestAt)}</LabelMeta>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
              <LabelMeta><span>FRESHNESS:</span>{formatSyncLabel(derived.freshness.activityLatestAt)}</LabelMeta>
              <LabelMeta><span>SOURCE:</span>{connected ? 'MIRRORED EVENT' : 'SNAPSHOT'}</LabelMeta>
            </div>
          </ConnectionCard>
          <OperatorRow>
-            <SisterAvatar name={derived.activeProject?.ownerSister ?? 'narang'} size={44} />
+            {derived.activeProject?.ownerSister ? (
              <>
                <SisterAvatar name={derived.activeProject.ownerSister} size={44} />
                <OperatorText>
-              <OperatorName>{SISTER_META[derived.activeProject?.ownerSister ?? 'narang']?.label ?? '나랑이'}</OperatorName>
+                  <OperatorName>{SISTER_META[derived.activeProject.ownerSister]?.label ?? derived.activeProject.ownerSister}</OperatorName>
                  <OperatorMeta>
-                {SISTER_META[derived.activeProject?.ownerSister ?? 'narang']?.role ?? 'Implementation'} / SNAPSHOT OWNER
+                    {SISTER_META[derived.activeProject.ownerSister]?.role ?? 'unknown'} / SNAPSHOT OWNER
                  </OperatorMeta>
                </OperatorText>
              </>
            ) : (
              <OperatorText>
                <OperatorName>NO ACTIVE OWNER</OperatorName>
                <OperatorMeta>UNASSIGNED</OperatorMeta>
              </OperatorText>
            )}
          </OperatorRow>
          <QuickLinks>
@@ -1104,7 +1116,7 @@ export default function DashboardPage() {
            <PanelTitleBlock>
              <Eyebrow>Activity feed</Eyebrow>
              <PanelTitle>EVENT MIRROR</PanelTitle>
-              <PanelDesc>WEBSOCKET + POLLING SNAPSHOT</PanelDesc>
+              <PanelDesc>{connected ? 'SOURCE: MIRRORED EVENT' : 'SOURCE: SNAPSHOT'}</PanelDesc>
            </PanelTitleBlock>
            <LabelMeta><span>EVENT:</span>{String(activityItems.length).padStart(2, '0')}</LabelMeta>
          </PanelHeader>
@@ -1141,7 +1153,7 @@ export default function DashboardPage() {
            <PanelTitleBlock>
              <Eyebrow>Sprint metrics</Eyebrow>
              <PanelTitle>SPRINT METRICS</PanelTitle>
-              <PanelDesc>POLLING SNAPSHOT</PanelDesc>
+              <PanelDesc>SOURCE: SNAPSHOT</PanelDesc>
            </PanelTitleBlock>
            <LabelMeta><span>SPRINT:</span>{String(derived.totalSprints).padStart(2, '0')}</LabelMeta>
          </PanelHeader>
@@ -1187,7 +1199,7 @@ export default function DashboardPage() {
            <PanelTitleBlock>
              <Eyebrow>Infrastructure overview</Eyebrow>
              <PanelTitle>RUNTIME SURFACE</PanelTitle>
-              <PanelDesc>LIVE / SNAPSHOT / DOC-DERIVED</PanelDesc>
+              <PanelDesc>SOURCE: {connected ? 'LIVE' : 'SNAPSHOT'} / DOC-DERIVED</PanelDesc>
            </PanelTitleBlock>
            <LabelMeta><span>NODE:</span>{String(sisters.length).padStart(2, '0')}</LabelMeta>
          </PanelHeader>
@@ -1208,7 +1220,7 @@ export default function DashboardPage() {
            <PanelTitleBlock>
              <Eyebrow>Mistake log & harness</Eyebrow>
              <PanelTitle>RULE / LOG BOARD</PanelTitle>
-              <PanelDesc>DOC-DERIVED / ACTIVITY</PanelDesc>
+              <PanelDesc>SOURCE: 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,6 +46,13 @@ 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: '이랑' };
@@ -87,12 +94,37 @@ export default function ProjectDetailPage() {
  }, [tab, id, commits.length, branches.length, pulls.length]);
  const allTasks = useMemo(() => tasks.flatMap((sprint) => sprint.tasks ?? []), [tasks]);
-  const assignedNodes = useMemo(() => {
+  const participantModel = useMemo(() => {
-    const names = Array.from(new Set(allTasks.map((task) => task.assignee).filter(Boolean)));
+    const taskAssigneeNames = Array.from(new Set(allTasks.map((task) => task.assignee).filter(Boolean)));
-    return (names.length > 0 ? names : ['harang', 'narang', 'darang', 'erang']).map((name) => ({
+    const taskCountByAssignee: Record<string, number> = {};
    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,
-      status: sisters.find((sister) => sister.name === name)?.status ?? 'offline',
+        whyVisible: reasons.length > 0 ? reasons : ['task_assignee'],
-    }));
+        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(() => {
@@ -198,21 +230,72 @@ export default function ProjectDetailPage() {
          </Panel>
          <Panel $column="side" $mobileOrder={6}>
-            <SectionTitle><span>ASSIGNED NODES</span><LabelMeta>LIVE STATUS</LabelMeta></SectionTitle>
+            <SectionTitle><span>CURRENT OWNERS</span><LabelMeta>SNAPSHOT</LabelMeta></SectionTitle>
-            <NodeStack>
+            <ParticipantSection>
-              {assignedNodes.map((node) => (
+              {participantModel.currentOwners.length === 0 ? (
-                <NodeMiniCard key={node.name}>
+                <EmptyParticipant>NO ACTIVE OWNER</EmptyParticipant>
              ) : (
                participantModel.currentOwners.map((owner) => (
                  <NodeMiniCard key={owner.name}>
                    <NodeInfo>
-                    <SisterAvatar name={node.name} size={28} />
+                      <SisterAvatar name={owner.name} size={28} />
                      <div>
-                      <div style={{ fontSize: '13px', color: 'var(--text-primary)', fontWeight: 600 }}>{ROLE_NAME[node.name] ?? node.name}</div>
+                        <div style={{ fontSize: '13px', color: 'var(--text-primary)', fontWeight: 600 }}>{ROLE_NAME[owner.name] ?? owner.name}</div>
-                      <Meta>{ROLE_LABEL[node.name] ?? 'NODE'}</Meta>
+                        <Meta>{ROLE_LABEL[owner.name] ?? 'OWNER'}</Meta>
                      </div>
                    </NodeInfo>
-                  <NodeDot $status={node.status} />
+                    <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) => (
                    <NodeMiniCard key={a.name}>
                      <NodeInfo>
                        <SisterAvatar name={a.name} size={28} />
                        <div>
                          <div style={{ fontSize: '13px', color: 'var(--text-primary)', fontWeight: 600 }}>{ROLE_NAME[a.name] ?? a.name}</div>
                          <Meta>{a.taskCount} TASKS</Meta>
                        </div>
                      </NodeInfo>
                      <SourceBadge>snapshot</SourceBadge>
                    </NodeMiniCard>
                  ))}
                </NodeStack>
              )}
            </ParticipantSection>
          </Panel>
        </ProjectGrid>
      )}
--- 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: '/office', label: '오피스' },
  { href: '/projects', label: '프로' },
  { href: '/activities', label: '활동' },
  { href: '/sisters', label: '자매' },
--- a/frontend/components/common/SisterAvatar.tsx
+++ b/frontend/components/common/SisterAvatar.tsx
@@ -46,10 +46,10 @@ interface SisterAvatarProps {
 }
 export default function SisterAvatar({ name, size = 32, className, style }: SisterAvatarProps) {
-  const [failed, setFailed] = useState(false);
+  const [failedFor, setFailedFor] = useState<string | null>(null);
  const initial = SISTER_INITIALS[name] ?? name.slice(0, 1).toUpperCase();
-  if (failed) {
+  if (failedFor === name) {
    return <Fallback $size={size} className={className} style={style}>{initial}</Fallback>;
  }
@@ -60,7 +60,7 @@ export default function SisterAvatar({ name, size = 32, className, style }: Sist
      alt={name}
      className={className}
      style={style}
-      onError={() => setFailed(true)}
+      onError={() => setFailedFor(name)}
    />
  );
 }
--- a/frontend/components/office/ChatWorkspace.tsx
+++ b/frontend/components/office/ChatWorkspace.tsx
@@ -0,0 +1,647 @@
 'use client';
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import styled, { keyframes } from 'styled-components';
 import SisterAvatar from '@/components/common/SisterAvatar';
 import { API_URL } from '@/lib/config';
 import { withSessionRequest } from '@/lib/csrf';
 import type { SisterName, AgentState } from './OfficeScene';
 interface RuntimeMessage {
  id: string;
  role: 'user' | 'assistant' | 'tool';
  content: string;
  ts: string | null;
 }
 interface RuntimeSnapshot {
  name: SisterName;
  gatewayConnected: boolean;
  mainState: AgentState;
  currentTask: string | null;
  activeSessionLabel: string | null;
  recentMessages: RuntimeMessage[];
 }
 interface ChatMessage {
  id: string;
  role: 'user' | 'assistant' | 'tool';
  content: string;
  toolName?: string;
  ts: string;
 }
 interface ChatWorkspaceProps {
  initialSister: SisterName;
  onClose: () => void;
 }
 const SISTER_DISPLAY: Record<SisterName, string> = {
  harang: '하랑이',
  narang: '나랑이',
  darang: '다랑이',
  erang: '이랑이',
 };
 const SISTER_ROLES: Record<SisterName, string> = {
  harang: 'Planning & Orchestration',
  narang: 'Development & Implementation',
  darang: 'QA & Review',
  erang: 'Infra & Deploy',
 };
 const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
 const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
 `;
 const Workspace = styled.div`
  display: flex;
  height: 100%;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  overflow: hidden;
  @media (max-width: 767px) {
    flex-direction: column;
  }
 `;
 const SisterTabs = styled.nav`
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: var(--space-md) 0;
  @media (max-width: 767px) {
    width: 100%;
    flex-direction: row;
    padding: 0;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
 `;
 const SisterTabHeader = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 var(--space-md) var(--space-md);
  @media (max-width: 767px) {
    display: none;
  }
 `;
 const SisterTab = styled.button<{ $active: boolean }>`
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: ${({ $active }) => ($active ? 'rgba(255,255,255,0.04)' : 'transparent')};
  border: none;
  border-left: 2px solid ${({ $active }) => ($active ? 'var(--text-primary)' : 'transparent')};
  color: ${({ $active }) => ($active ? 'var(--text-primary)' : 'var(--text-secondary)')};
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.15s;
  font-family: inherit;
  &:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.03);
  }
  @media (max-width: 767px) {
    border-left: none;
    border-bottom: 2px solid ${({ $active }) => ($active ? 'var(--text-primary)' : 'transparent')};
    white-space: nowrap;
    flex-shrink: 0;
    padding: var(--space-xs) var(--space-sm);
    gap: 4px;
  }
 `;
 const TabMeta = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2px;
 `;
 const TabName = styled.div`
  font-size: 13px;
  font-weight: 600;
 `;
 const TabRole = styled.div`
  font-size: 10px;
  color: var(--text-secondary);
  @media (max-width: 767px) {
    display: none;
  }
 `;
 const MessageArea = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
 `;
 const MessageHeader = styled.div`
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
 `;
 const HeaderMeta = styled.div`
  flex: 1;
 `;
 const HeaderName = styled.div`
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
 `;
 const HeaderRole = styled.div`
  font-size: 11px;
  color: var(--text-secondary);
 `;
 const HeaderBadge = styled.div<{ $ok: boolean }>`
  font-family: var(--font-mono);
  font-size: 10px;
  color: ${({ $ok }) => ($ok ? '#00BFA5' : 'var(--text-secondary)')};
  border: 1px solid currentColor;
  padding: 2px var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
 const Timeline = styled.div`
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
 `;
 const MessageBubble = styled.div<{ $role: ChatMessage['role'] }>`
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: ${({ $role }) => ($role === 'user' ? 'flex-end' : 'flex-start')};
  animation: ${fadeIn} 0.2s ease;
 `;
 const BubbleContent = styled.div<{ $role: ChatMessage['role'] }>`
  max-width: 75%;
  padding: var(--space-sm) var(--space-md);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  background: ${({ $role }) =>
    $role === 'user'
      ? 'rgba(255,255,255,0.06)'
      : $role === 'tool'
        ? 'rgba(255, 152, 0, 0.06)'
        : 'rgba(255,255,255,0.02)'};
  border: 1px solid ${({ $role }) =>
    $role === 'user'
      ? 'rgba(255,255,255,0.12)'
      : $role === 'tool'
        ? 'rgba(255,152,0,0.2)'
        : 'rgba(255,255,255,0.06)'};
  font-family: ${({ $role }) => ($role === 'tool' ? 'var(--font-mono)' : 'inherit')};
 `;
 const BubbleMeta = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.6;
 `;
 const EmptyTimeline = styled.div`
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
 `;
 const RuntimeNotice = styled.div`
  border: 1px solid var(--border-color);
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.7;
  max-width: 320px;
  text-align: center;
 `;
 const InputArea = styled.div`
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
  flex-shrink: 0;
 `;
 const MessageInput = styled.textarea`
  flex: 1;
  background: var(--bg-input, #1a1a1a);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: var(--space-sm) var(--space-md);
  resize: none;
  min-height: 40px;
  max-height: 120px;
  line-height: 1.5;
  &:focus {
    outline: none;
    border-color: var(--border-hover);
  }
  &::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
  }
 `;
 const SendBtn = styled.button`
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 0.15s;
  white-space: nowrap;
  align-self: flex-end;
  &:hover:not(:disabled) {
    border-color: var(--border-hover);
    color: var(--text-primary);
  }
  &:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
 `;
 const InputMeta = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
 `;
 const SisterContext = styled.aside`
  width: 220px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-color);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  overflow-y: auto;
  @media (max-width: 1199px) {
    display: none;
  }
 `;
 const ContextSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
 `;
 const CtxLabel = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4px;
 `;
 const CtxValue = styled.div`
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
 `;
 const CtxMono = styled.div`
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
 `;
 const CloseBtn = styled.button`
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  font-family: var(--font-mono);
  &:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
  }
 `;
 function formatTs(ts: string): string {
  const date = new Date(ts);
  const diff = Date.now() - date.getTime();
  const min = Math.floor(diff / 60000);
  if (min < 1) return '방금';
  if (min < 60) return `${min}분 전`;
  const hr = Math.floor(min / 60);
  if (hr < 24) return `${hr}시간 전`;
  return `${Math.floor(hr / 24)}일 전`;
 }
 function runtimeStateLabel(state: AgentState): string {
  if (state === 'thinking') return 'thinking';
  if (state === 'tool_calling') return 'tool_calling';
  if (state === 'speaking') return 'speaking';
  if (state === 'error') return 'error';
  return 'idle';
 }
 // Fix #4: Remove localStorage token — use cookie-based auth via withSessionRequest
 // Token is handled by HttpOnly cookies + CSRF, no client-side access needed
 function mergeMessages(prev: ChatMessage[], incoming: ChatMessage[]) {
  const map = new Map<string, ChatMessage>();
  [...prev, ...incoming].forEach((item) => {
    map.set(item.id, item);
  });
  return Array.from(map.values()).sort((a, b) => new Date(a.ts).getTime() - new Date(b.ts).getTime());
 }
 function mapRuntimeMessages(items: RuntimeMessage[]): ChatMessage[] {
  return items.map((item, index) => ({
    id: item.id || `${item.role}-${item.ts ?? 'none'}-${index}`,
    role: item.role,
    content: item.content,
    ts: item.ts ?? new Date().toISOString(),
  }));
 }
 export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceProps) {
  const [activeSister, setActiveSister] = useState<SisterName>(initialSister);
  const [allMessages, setAllMessages] = useState<Partial<Record<SisterName, ChatMessage[]>>>({});
  const [runtimeBySister, setRuntimeBySister] = useState<Partial<Record<SisterName, RuntimeSnapshot>>>({});
  // Per-sister draft — prevents input leaking across tabs
  const [drafts, setDrafts] = useState<Partial<Record<SisterName, string>>>({});
  const input = drafts[activeSister] ?? '';
  const [sending, setSending] = useState(false);
  const timelineRef = useRef<HTMLDivElement>(null);
  const messages = useMemo(() => allMessages[activeSister] ?? [], [allMessages, activeSister]);
  const runtime = runtimeBySister[activeSister] ?? null;
  // Cookie-based auth always available (no token check needed)
  useEffect(() => {
    setActiveSister(initialSister);
  }, [initialSister]);
  useEffect(() => {
    if (timelineRef.current) {
      timelineRef.current.scrollTop = timelineRef.current.scrollHeight;
    }
  }, [messages]);
  const setMessages = useCallback((sister: SisterName, updater: (prev: ChatMessage[]) => ChatMessage[]) => {
    setAllMessages((prev) => ({
      ...prev,
      [sister]: updater(prev[sister] ?? []),
    }));
  }, []);
  const loadRuntime = useCallback(async (sister: SisterName) => {
    try {
      const res = await fetch(`${API_URL}/api/sisters/${sister}/runtime`, withSessionRequest());
      if (!res.ok) return;
      const data = (await res.json()) as RuntimeSnapshot;
      setRuntimeBySister((prev) => ({ ...prev, [sister]: data }));
      const runtimeMessages = mapRuntimeMessages(data.recentMessages ?? []);
      if (runtimeMessages.length > 0) {
        setMessages(sister, (prev) => mergeMessages(prev, runtimeMessages));
      }
    } catch {
      // ignore runtime refresh failures
    }
  }, [setMessages]);
  useEffect(() => {
    void loadRuntime(activeSister);
    const interval = setInterval(() => {
      void loadRuntime(activeSister);
    }, 8000);
    return () => clearInterval(interval);
  }, [activeSister, loadRuntime]);
  const handleSend = useCallback(async () => {
    const text = input.trim();
    if (!text || sending) return;
    // Cookie-based auth — no token check needed
    const userMessage: ChatMessage = {
      id: `user-${crypto.randomUUID()}`,
      role: 'user',
      content: text,
      ts: new Date().toISOString(),
    };
    setMessages(activeSister, (prev) => mergeMessages(prev, [userMessage]));
    setDrafts((prev) => ({ ...prev, [activeSister]: '' }));
    setSending(true);
    try {
    const res = await fetch(`${API_URL}/api/sisters/${activeSister}/chat`, withSessionRequest({
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: text }),
    }, { csrf: true }));
      const data = await res.json();
      if (!res.ok) {
        throw new Error(data?.message || '채팅 전송 실패');
      }
      if (data?.runtime) {
        setRuntimeBySister((prev) => ({ ...prev, [activeSister]: data.runtime as RuntimeSnapshot }));
      }
      const reply = String(data?.reply || '').trim();
      if (reply) {
        setMessages(activeSister, (prev) => mergeMessages(prev, [{
          id: `assistant-${crypto.randomUUID()}`,
          role: 'assistant',
          content: reply,
          ts: new Date().toISOString(),
        }]));
      }
      void loadRuntime(activeSister);
    } catch (error) {
      const message = error instanceof Error ? error.message : '채팅 전송 중 오류가 발생했어.';
      setMessages(activeSister, (prev) => mergeMessages(prev, [{
        id: `error-${crypto.randomUUID()}`,
        role: 'assistant',
        content: `전송 실패: ${message}`,
        ts: new Date().toISOString(),
      }]));
    } finally {
      setSending(false);
    }
  }, [activeSister, input, loadRuntime, sending, setMessages]);
  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      void handleSend();
    }
  };
  return (
    <Workspace>
      <SisterTabs>
        <SisterTabHeader>direct chat</SisterTabHeader>
        {SISTER_ORDER.map((name) => (
          <SisterTab key={name} $active={activeSister === name} onClick={() => setActiveSister(name)}>
            <SisterAvatar name={name} size={22} />
            <TabMeta>
              <TabName>{SISTER_DISPLAY[name]}</TabName>
              <TabRole>{SISTER_ROLES[name].split(' ')[0]}</TabRole>
            </TabMeta>
          </SisterTab>
        ))}
      </SisterTabs>
      <MessageArea>
        <MessageHeader>
          <SisterAvatar name={activeSister} size={28} />
          <HeaderMeta>
            <HeaderName>{SISTER_DISPLAY[activeSister]}</HeaderName>
            <HeaderRole>{SISTER_ROLES[activeSister]}</HeaderRole>
          </HeaderMeta>
          <HeaderBadge $ok={Boolean(runtime?.gatewayConnected)}>
            {runtime?.gatewayConnected ? 'Runtime 연결됨' : 'Runtime 확인 중'}
          </HeaderBadge>
          <CloseBtn onClick={onClose}>✕ 닫기</CloseBtn>
        </MessageHeader>
        <Timeline ref={timelineRef}>
          {messages.length === 0 ? (
            <EmptyTimeline>
              <SisterAvatar name={activeSister} size={32} />
              <div>{SISTER_DISPLAY[activeSister]}에게 메시지를 보내봐.</div>
              <RuntimeNotice>
                {runtime?.gatewayConnected
                  ? '직접 채팅이 자매 runtime으로 연결돼 있어. 입력하면 바로 전달돼.'
                  : 'runtime 상태를 확인 중이야. 연결이 느려도 메시지는 다시 시도할 수 있어.'}
              </RuntimeNotice>
            </EmptyTimeline>
          ) : (
            messages.map((msg) => (
              <MessageBubble key={msg.id} $role={msg.role}>
                <BubbleContent $role={msg.role}>{msg.content}</BubbleContent>
                <BubbleMeta>{formatTs(msg.ts)}</BubbleMeta>
              </MessageBubble>
            ))
          )}
        </Timeline>
        <InputMeta>
          shift+enter = 줄바꿈 · enter = 전송 · runtime: {runtime ? runtimeStateLabel(runtime.mainState) : 'loading'}
        </InputMeta>
        <InputArea>
          <MessageInput
            placeholder={`${SISTER_DISPLAY[activeSister]}에게 지시해...`}
            value={input}
            onChange={(e) => setDrafts((prev) => ({ ...prev, [activeSister]: e.target.value }))}
            onKeyDown={handleKeyDown}
            rows={1}
          />
          <SendBtn onClick={() => void handleSend()} disabled={!input.trim() || sending}>
            {sending ? '전송 중' : '전송'}
          </SendBtn>
        </InputArea>
      </MessageArea>
      <SisterContext>
        <ContextSection>
          <CtxLabel>agent</CtxLabel>
          <CtxValue>{SISTER_DISPLAY[activeSister]}</CtxValue>
          <CtxMono>{SISTER_ROLES[activeSister]}</CtxMono>
        </ContextSection>
        <ContextSection>
          <CtxLabel>채팅 상태</CtxLabel>
          <CtxValue>{runtime?.gatewayConnected ? 'Runtime 연결됨' : 'Runtime 확인 중'}</CtxValue>
          <CtxMono>{runtime ? runtimeStateLabel(runtime.mainState) : 'loading'}</CtxMono>
        </ContextSection>
        <ContextSection>
          <CtxLabel>data source</CtxLabel>
          <CtxMono>
            control: ssh → openclaw agent
            <br />
            activity: runtime session snapshot
          </CtxMono>
        </ContextSection>
        <ContextSection>
          <CtxLabel>current task</CtxLabel>
          <CtxValue>{runtime?.currentTask ?? runtime?.activeSessionLabel ?? '작업 정보 없음'}</CtxValue>
        </ContextSection>
      </SisterContext>
    </Workspace>
  );
 }
--- a/frontend/components/office/ContextPanel.tsx
+++ b/frontend/components/office/ContextPanel.tsx
@@ -0,0 +1,422 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
 import Link from 'next/link';
 import SisterAvatar from '@/components/common/SisterAvatar';
 import type { SisterNode, SubAgent, SisterName, AgentState, SelectedAgent } from './OfficeScene';
 interface ContextPanelProps {
  selected: SelectedAgent | null;
  sisters: SisterNode[];
  onOpenChat: (sisterName: SisterName) => void;
  onClear: () => void;
 }
 const Panel = styled.aside`
  width: 300px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-color);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  @media (max-width: 1199px) {
    width: 260px;
  }
  @media (max-width: 767px) {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-color);
    max-height: 260px;
  }
 `;
 const PanelHeader = styled.div`
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
 `;
 const PanelTitle = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
 `;
 const ClearBtn = styled.button`
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  &:hover {
    color: var(--text-primary);
  }
 `;
 const PanelBody = styled.div`
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
 `;
 const EmptyState = styled.div`
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  padding: var(--space-xl) 0;
 `;
 const AgentHeader = styled.div`
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
 `;
 const AgentAvatarWrap = styled.div`
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
 `;
 const AgentMeta = styled.div`
  display: flex;
  flex-direction: column;
  gap: 4px;
 `;
 const AgentName = styled.div`
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
 `;
 const AgentRole = styled.div`
  font-size: 12px;
  color: var(--text-secondary);
 `;
 const AgentType = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
 const StateRow = styled.div`
  display: flex;
  align-items: center;
  gap: var(--space-sm);
 `;
 const StateDot = styled.span<{ $state: AgentState }>`
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: ${({ $state }) => {
    const colors: Record<AgentState, string> = {
      idle: '#444',
      thinking: '#2979FF',
      tool_calling: '#FF9800',
      speaking: '#00BFA5',
      error: '#FF1744',
    };
    return colors[$state];
  }};
 `;
 const StateLabel = styled.span<{ $state: AgentState }>`
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: ${({ $state }) => {
    const colors: Record<AgentState, string> = {
      idle: 'var(--text-secondary)',
      thinking: '#2979FF',
      tool_calling: '#FF9800',
      speaking: '#00BFA5',
      error: '#FF1744',
    };
    return colors[$state];
  }};
 `;
 const Section = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
 `;
 const SectionLabel = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4px;
 `;
 const SectionValue = styled.div`
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
 `;
 const CurrentTaskBox = styled.div`
  font-size: 12px;
  color: #58A6FF;
  padding: var(--space-sm) var(--space-md);
  background: rgba(88, 166, 255, 0.06);
  border-left: 2px solid #58A6FF;
  line-height: 1.5;
 `;
 const SubagentGrid = styled.div`
  display: flex;
  flex-direction: column;
  gap: 4px;
 `;
 const SubagentRow = styled.div`
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 12px;
  color: var(--text-primary);
 `;
 const SubDot = styled.span<{ $state: AgentState }>`
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: ${({ $state }) => {
    const colors: Record<AgentState, string> = {
      idle: '#444',
      thinking: '#2979FF',
      tool_calling: '#FF9800',
      speaking: '#00BFA5',
      error: '#FF1744',
    };
    return colors[$state];
  }};
 `;
 const SubName = styled.span`
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font-mono);
 `;
 const ActionRow = styled.div`
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
 `;
 const ActionBtn = styled.button`
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 0.15s;
  &:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
  }
 `;
 const ActionLink = styled(Link)`
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
  font-family: var(--font-mono);
  transition: all 0.15s;
  display: inline-block;
  &:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
  }
 `;
 const FallbackNote = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
 const SISTER_DISPLAY: Record<SisterName, string> = {
  harang: '하랑이',
  narang: '나랑이',
  darang: '다랑이',
  erang: '이랑이',
 };
 function SisterDetail({ sister, onOpenChat }: { sister: SisterNode; onOpenChat: (name: SisterName) => void }) {
  const hasLiveSubagentState = sister.subagents.some((item) => item.sessionLabel || item.currentTask || item.updatedAt);
  return (
    <>
      <AgentHeader>
        <AgentAvatarWrap>
          <SisterAvatar name={sister.name} size={40} />
        </AgentAvatarWrap>
        <AgentMeta>
          <AgentName>{SISTER_DISPLAY[sister.name]}</AgentName>
          <AgentRole>{sister.role}</AgentRole>
          <AgentType>main agent</AgentType>
        </AgentMeta>
      </AgentHeader>
      <StateRow>
        <StateDot $state={sister.state} />
        <StateLabel $state={sister.state}>{sister.state}</StateLabel>
      </StateRow>
      {(sister.currentTask || sister.activeSessionLabel) && (
        <Section>
          <SectionLabel>current task</SectionLabel>
          <CurrentTaskBox>{sister.currentTask ?? sister.activeSessionLabel ?? '작업 정보 없음'}</CurrentTaskBox>
        </Section>
      )}
      <Section>
        <SectionLabel>subagents ({sister.subagents.length})</SectionLabel>
        <SubagentGrid>
          {sister.subagents.map((sub) => (
            <SubagentRow key={sub.id}>
              <SubDot $state={sub.state} />
              <span>{sub.label}</span>
              <SubName>· {sub.state}</SubName>
            </SubagentRow>
          ))}
        </SubagentGrid>
        <FallbackNote>{hasLiveSubagentState ? 'subagent state: live runtime' : 'subagent state: fallback'}</FallbackNote>
      </Section>
      <ActionRow>
        <ActionBtn onClick={() => onOpenChat(sister.name)}>채팅</ActionBtn>
        <ActionLink href={`/sisters/${sister.name}`}>상세</ActionLink>
      </ActionRow>
    </>
  );
 }
 function SubagentDetail({
  sub,
  sister,
  onOpenChat,
 }: {
  sub: SubAgent;
  sister: SisterNode;
  onOpenChat: (name: SisterName) => void;
 }) {
  const liveNote = sub.sessionLabel || sub.currentTask || sub.updatedAt;
  return (
    <>
      <AgentHeader>
        <AgentAvatarWrap>
          <SisterAvatar name={sister.name} size={40} />
        </AgentAvatarWrap>
        <AgentMeta>
          <AgentName>{sub.label}</AgentName>
          <AgentRole>{sub.name}</AgentRole>
          <AgentType>subagent · {SISTER_DISPLAY[sister.name]} 소속</AgentType>
        </AgentMeta>
      </AgentHeader>
      <StateRow>
        <StateDot $state={sub.state} />
        <StateLabel $state={sub.state}>{sub.state}</StateLabel>
      </StateRow>
      <Section>
        <SectionLabel>parent</SectionLabel>
        <SectionValue>{SISTER_DISPLAY[sister.name]} · {sister.role}</SectionValue>
      </Section>
      {(sub.currentTask || sub.sessionLabel) && (
        <Section>
          <SectionLabel>current task</SectionLabel>
          <CurrentTaskBox>{sub.currentTask ?? sub.sessionLabel ?? '작업 정보 없음'}</CurrentTaskBox>
        </Section>
      )}
      <FallbackNote>{liveNote ? 'subagent state: live runtime' : 'subagent state: fallback · no direct api'}</FallbackNote>
      <ActionRow>
        <ActionBtn onClick={() => onOpenChat(sister.name)}>{SISTER_DISPLAY[sister.name]} 채팅</ActionBtn>
        <ActionLink href={`/sisters/${sister.name}`}>자매 상세</ActionLink>
      </ActionRow>
    </>
  );
 }
 export default function ContextPanel({ selected, sisters, onOpenChat, onClear }: ContextPanelProps) {
  const getSister = (name: SisterName) => sisters.find((s) => s.name === name);
  let content: React.ReactNode = (
    <EmptyState>
      에이전트를 선택하면
      <br />
      상세 정보가 표시됩니다.
    </EmptyState>
  );
  if (selected?.type === 'sister') {
    const sister = getSister(selected.name);
    if (sister) content = <SisterDetail sister={sister} onOpenChat={onOpenChat} />;
  } else if (selected?.type === 'subagent') {
    const sister = getSister(selected.sister);
    const sub = sister?.subagents.find((item) => item.id === selected.id);
    if (sister && sub) content = <SubagentDetail sub={sub} sister={sister} onOpenChat={onOpenChat} />;
  }
  return (
    <Panel>
      <PanelHeader>
        <PanelTitle>context panel</PanelTitle>
        {selected && <ClearBtn onClick={onClear}>✕</ClearBtn>}
      </PanelHeader>
      <PanelBody>{content}</PanelBody>
    </Panel>
  );
 }
--- a/frontend/components/office/OfficeScene.tsx
+++ b/frontend/components/office/OfficeScene.tsx
@@ -0,0 +1,496 @@
 'use client';
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 import { API_URL } from '@/lib/config';
 export type AgentState = 'idle' | 'thinking' | 'tool_calling' | 'speaking' | 'error';
 export type SisterName = 'harang' | 'narang' | 'darang' | 'erang';
 export interface SubAgent {
  id: string;
  name: string;
  label: string;
  sister: SisterName;
  state: AgentState;
  currentTask?: string | null;
  updatedAt?: number | null;
  sessionLabel?: string | null;
 }
 export interface SisterNode {
  name: SisterName;
  displayName: string;
  role: string;
  state: AgentState;
  currentTask: string | null;
  activeSessionLabel?: string | null;
  subagents: SubAgent[];
 }
 export type SelectedAgent =
  | { type: 'sister'; name: SisterName }
  | { type: 'subagent'; id: string; sister: SisterName };
 interface OfficeSceneProps {
  sisters: SisterNode[];
  selected: SelectedAgent | null;
  onSelectSister: (name: SisterName) => void;
  onSelectSubagent: (id: string, sister: SisterName) => void;
  dataMode: 'live' | 'snapshot' | 'fallback';
  subagentMode: 'live' | 'fallback';
 }
 const SceneWrapper = styled.div`
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 460;
  max-height: 60vh;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  overflow: hidden;
  user-select: none;
 `;
 const FreshnessLabel = styled.div`
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: none;
 `;
 const WsDot = styled.span<{ $connected: boolean }>`
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: ${({ $connected }) => ($connected ? '#00FF00' : '#666')};
  margin-right: 5px;
  vertical-align: middle;
 `;
 const VB_W = 800;
 const VB_H = 460;
 type Point = [number, number];
 const ZONES = {
  harang: [5, 5, 345, 200] as const,
  darang: [450, 5, 345, 200] as const,
  narang: [5, 260, 345, 195] as const,
  erang: [450, 260, 345, 195] as const,
 };
 const SISTER_POS: Record<SisterName, [number, number]> = {
  harang: [75, 105],
  darang: [725, 105],
  narang: [75, 358],
  erang: [725, 358],
 };
 const CONF = { cx: 400, cy: 232, rx: 55, ry: 30 };
 const SUBAGENT_POSITIONS: Record<SisterName, Point[]> = {
  harang: [[175, 65], [270, 65], [220, 160]],
  darang: [[460, 65], [560, 65], [660, 65], [460, 160], [560, 160]],
  narang: [[175, 295], [270, 295], [175, 395], [270, 395]],
  erang: [[460, 295], [555, 295], [650, 295], [460, 395], [555, 395]],
 };
 const SUBAGENT_TARGETS: Record<SisterName, Point[]> = {
  harang: [[295, 112], [338, 148], [365, 190]],
  darang: [[505, 94], [560, 112], [462, 148], [438, 188], [520, 196]],
  narang: [[292, 332], [330, 302], [362, 276], [344, 374]],
  erang: [[618, 322], [664, 298], [702, 286], [610, 388], [664, 380]],
 };
 const ZONE_COLORS: Record<SisterName, string> = {
  harang: 'rgba(41, 121, 255, 0.06)',
  narang: 'rgba(0, 191, 165, 0.06)',
  darang: 'rgba(255, 64, 129, 0.06)',
  erang: 'rgba(255, 109, 0, 0.06)',
 };
 const ZONE_BORDER: Record<SisterName, string> = {
  harang: 'rgba(41, 121, 255, 0.25)',
  narang: 'rgba(0, 191, 165, 0.25)',
  darang: 'rgba(255, 64, 129, 0.25)',
  erang: 'rgba(255, 109, 0, 0.25)',
 };
 const STATE_COLORS: Record<AgentState, string> = {
  idle: '#444444',
  thinking: '#2979FF',
  tool_calling: '#FF9800',
  speaking: '#00BFA5',
  error: '#FF1744',
 };
 const STATE_PROGRESS: Record<AgentState, number> = {
  idle: 0,
  error: 0,
  thinking: 0.48,
  tool_calling: 0.88,
  speaking: 0.66,
 };
 function lerpPoint(from: Point, to: Point, progress: number): Point {
  return [
    from[0] + (to[0] - from[0]) * progress,
    from[1] + (to[1] - from[1]) * progress,
  ];
 }
 function getSubagentPosition(sister: SisterName, index: number, state: AgentState): Point {
  const from = SUBAGENT_POSITIONS[sister][index] ?? SUBAGENT_POSITIONS[sister][0];
  const to = SUBAGENT_TARGETS[sister][index] ?? from;
  return lerpPoint(from, to, STATE_PROGRESS[state]);
 }
 function getSubagentMotion(state: AgentState, index: number): { dx: number; dy: number; dur: string } | null {
  const phase = index % 2 === 0 ? 1 : -1;
  if (state === 'thinking') return { dx: 5 * phase, dy: -6, dur: '3.6s' };
  if (state === 'tool_calling') return { dx: 10 * phase, dy: -14, dur: '2s' };
  if (state === 'speaking') return { dx: 6 * phase, dy: -4, dur: '2.8s' };
  return null;
 }
 function SisterCircle({
  cx,
  cy,
  r,
  state,
  name,
  selected,
  onClick,
 }: {
  cx: number;
  cy: number;
  r: number;
  state: AgentState;
  name: SisterName;
  selected: boolean;
  onClick: () => void;
 }) {
  const color = STATE_COLORS[state];
  const clipId = `avatar-clip-${name}`;
  return (
    <g
      role="button"
      tabIndex={0}
      aria-label={`${name} — state: ${state}`}
      onClick={onClick}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } }}
      style={{ cursor: 'pointer', outline: 'none' }}
    >
      {selected && (
        <circle
          cx={cx}
          cy={cy}
          r={r + 8}
          fill="none"
          stroke="var(--text-primary)"
          strokeWidth={1}
          strokeDasharray="4 3"
          opacity={0.6}
        />
      )}
      <circle
        cx={cx}
        cy={cy}
        r={r + 4}
        fill="none"
        stroke={color}
        strokeWidth={state === 'error' ? 2.5 : 1.5}
        opacity={state === 'idle' ? 0.4 : 1}
      >
        {state === 'thinking' && (
          <animate attributeName="opacity" values="0.45;1;0.45" dur="1.8s" repeatCount="indefinite" />
        )}
        {state === 'tool_calling' && (
          <animate attributeName="stroke-opacity" values="1;0.2;1" dur="0.9s" repeatCount="indefinite" />
        )}
      </circle>
      <circle cx={cx} cy={cy} r={r} fill="#1e1e1e" stroke={color} strokeWidth={1} />
      <defs>
        <clipPath id={clipId}>
          <circle cx={cx} cy={cy} r={r - 2} />
        </clipPath>
      </defs>
      <image
        href={`${API_URL}/api/sisters/${name}/avatar`}
        x={cx - r + 2}
        y={cy - r + 2}
        width={(r - 2) * 2}
        height={(r - 2) * 2}
        preserveAspectRatio="xMidYMid slice"
        clipPath={`url(#${clipId})`}
      />
      <text
        x={cx}
        y={cy + r + 16}
        textAnchor="middle"
        fontSize={9}
        fontFamily="var(--font-mono)"
        fill={color}
        style={{ textTransform: 'uppercase', letterSpacing: '0.06em', userSelect: 'none', pointerEvents: 'none' }}
      >
        {state}
      </text>
    </g>
  );
 }
 function SubagentCircle({
  cx,
  cy,
  r,
  state,
  label,
  selected,
  motion,
  motionBegin,
  onClick,
 }: {
  cx: number;
  cy: number;
  r: number;
  state: AgentState;
  label: string;
  selected: boolean;
  motion: { dx: number; dy: number; dur: string } | null;
  motionBegin: string;
  onClick: () => void;
 }) {
  const color = STATE_COLORS[state];
  return (
    <g
      role="button"
      tabIndex={0}
      aria-label={`subagent ${label} — state: ${state}`}
      onClick={onClick}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } }}
      style={{ cursor: 'pointer', outline: 'none' }}
    >
      {motion && (
        <animateTransform
          attributeName="transform"
          type="translate"
          values={`0 0; ${motion.dx} ${motion.dy}; 0 0`}
          dur={motion.dur}
          begin={motionBegin}
          repeatCount="indefinite"
        />
      )}
      {selected && (
        <circle cx={cx} cy={cy} r={r + 5} fill="none" stroke="var(--text-primary)" strokeWidth={1} opacity={0.5} />
      )}
      <circle cx={cx} cy={cy} r={r + 2} fill="none" stroke={color} strokeWidth={1} opacity={state === 'idle' ? 0.3 : 0.8}>
        {state === 'thinking' && (
          <animate attributeName="opacity" values="0.35;0.95;0.35" dur="2s" repeatCount="indefinite" />
        )}
      </circle>
      <circle cx={cx} cy={cy} r={r} fill="#1a1a1a" stroke={color} strokeWidth={0.8} />
      <text
        x={cx}
        y={cy + 4}
        textAnchor="middle"
        fontSize={8}
        fontFamily="var(--font-mono)"
        fill={color}
        opacity={0.9}
        style={{ userSelect: 'none', pointerEvents: 'none' }}
      >
        {label.length > 8 ? `${label.slice(0, 7)}…` : label}
      </text>
    </g>
  );
 }
 function ConnectorLine({ x1, y1, x2, y2, active }: { x1: number; y1: number; x2: number; y2: number; active: boolean }) {
  return (
    <line
      x1={x1}
      y1={y1}
      x2={x2}
      y2={y2}
      stroke={active ? 'rgba(245,245,245,0.35)' : 'rgba(255,255,255,0.08)'}
      strokeWidth={active ? 1.5 : 1}
      strokeDasharray={active ? '6 4' : '3 4'}
      strokeDashoffset={active ? 40 : 0}
    >
      {active && <animate attributeName="stroke-dashoffset" values="40;0" dur="1.4s" repeatCount="indefinite" />}
    </line>
  );
 }
 function PathConnector({ d, active }: { d: string; active: boolean }) {
  return (
    <path
      d={d}
      fill="none"
      stroke={active ? 'rgba(245,245,245,0.3)' : 'rgba(255,255,255,0.06)'}
      strokeWidth={active ? 1.5 : 1}
      strokeDasharray={active ? '6 4' : '3 4'}
      strokeDashoffset={active ? 40 : 0}
    >
      {active && <animate attributeName="stroke-dashoffset" values="40;0" dur="1.8s" repeatCount="indefinite" />}
    </path>
  );
 }
 const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
 export default function OfficeScene({
  sisters,
  selected,
  onSelectSister,
  onSelectSubagent,
  dataMode,
  subagentMode,
 }: OfficeSceneProps) {
  const getSister = useCallback(
    (name: SisterName) => sisters.find((s) => s.name === name),
    [sisters],
  );
  const isActive = useCallback(
    (name: SisterName) => {
      const sister = getSister(name);
      return sister?.state === 'thinking' || sister?.state === 'tool_calling' || sister?.state === 'speaking';
    },
    [getSister],
  );
  const isSisterSelected = (name: SisterName) => selected?.type === 'sister' && selected.name === name;
  const isSubSelected = (id: string) => selected?.type === 'subagent' && selected.id === id;
  const harangActive = isActive('harang');
  const narangActive = isActive('narang');
  const darangActive = isActive('darang');
  const erangActive = isActive('erang');
  return (
    <SceneWrapper>
      <FreshnessLabel>
        <WsDot $connected={dataMode === 'live'} />
        {dataMode === 'live' ? 'live · ws' : dataMode === 'snapshot' ? 'snapshot · poll' : 'fallback · doc-derived'}
        {subagentMode === 'live' ? ' · subagents: live · runtime' : ' · subagents: fallback'}
      </FreshnessLabel>
      <svg viewBox={`0 0 ${VB_W} ${VB_H}`} width="100%" height="100%" style={{ display: 'block' }}>
        {SISTER_ORDER.map((name) => {
          const [zx, zy, zw, zh] = ZONES[name];
          return (
            <rect
              key={`zone-${name}`}
              x={zx}
              y={zy}
              width={zw}
              height={zh}
              rx={4}
              fill={ZONE_COLORS[name]}
              stroke={ZONE_BORDER[name]}
              strokeWidth={1}
            />
          );
        })}
        <rect x={358} y={5} width={84} height={450} rx={2} fill="#111111" stroke="rgba(255,255,255,0.04)" strokeWidth={1} />
        <rect x={5} y={205} width={790} height={50} rx={2} fill="#111111" stroke="rgba(255,255,255,0.04)" strokeWidth={1} />
        <ellipse cx={CONF.cx} cy={CONF.cy} rx={CONF.rx} ry={CONF.ry} fill="#1a1a1a" stroke="rgba(255,255,255,0.15)" strokeWidth={1} />
        <text x={CONF.cx} y={CONF.cy + 4} textAnchor="middle" fontSize={9} fontFamily="var(--font-mono)" fill="rgba(255,255,255,0.4)">
          회의실
        </text>
        <ConnectorLine x1={SISTER_POS.harang[0]} y1={SISTER_POS.harang[1] + 30} x2={SISTER_POS.narang[0]} y2={SISTER_POS.narang[1] - 30} active={harangActive || narangActive} />
        <ConnectorLine x1={SISTER_POS.darang[0]} y1={SISTER_POS.darang[1] + 30} x2={SISTER_POS.erang[0]} y2={SISTER_POS.erang[1] - 30} active={darangActive || erangActive} />
        <ConnectorLine x1={SISTER_POS.harang[0] + 30} y1={SISTER_POS.harang[1]} x2={SISTER_POS.darang[0] - 30} y2={SISTER_POS.darang[1]} active={harangActive || darangActive} />
        <ConnectorLine x1={SISTER_POS.narang[0] + 30} y1={SISTER_POS.narang[1]} x2={SISTER_POS.erang[0] - 30} y2={SISTER_POS.erang[1]} active={narangActive || erangActive} />
        <PathConnector d={`M${SISTER_POS.narang[0] + 20},${SISTER_POS.narang[1] - 20} Q${CONF.cx},${CONF.cy} ${SISTER_POS.darang[0] - 20},${SISTER_POS.darang[1] + 20}`} active={narangActive && darangActive} />
        {([
          ['harang', 18, 22, '하랑이 · Planning'] as const,
          ['darang', 463, 22, '다랑이 · QA'] as const,
          ['narang', 18, 272, '나랑이 · Dev'] as const,
          ['erang', 463, 272, '이랑이 · Infra'] as const,
        ] as const).map(([name, lx, ly, text]) => (
          <text key={`label-${name}`} x={lx} y={ly} fontSize={10} fontFamily="var(--font-mono)" fill={ZONE_BORDER[name]}>
            {text}
          </text>
        ))}
        {SISTER_ORDER.map((name) => {
          const sister = getSister(name);
          const state: AgentState = sister?.state ?? 'idle';
          const [cx, cy] = SISTER_POS[name];
          return (
            <SisterCircle
              key={`sister-${name}`}
              cx={cx}
              cy={cy}
              r={28}
              state={state}
              name={name}
              selected={isSisterSelected(name)}
              onClick={() => onSelectSister(name)}
            />
          );
        })}
        {SISTER_ORDER.map((sisterName) => {
          const sister = getSister(sisterName);
          const subagents = sister?.subagents ?? [];
          return subagents.map((sub, i) => {
            const pos = getSubagentPosition(sisterName, i, sub.state);
            const motion = getSubagentMotion(sub.state, i);
            return (
              <SubagentCircle
                key={sub.id}
                cx={pos[0]}
                cy={pos[1]}
                r={14}
                state={sub.state}
                label={sub.name}
                selected={isSubSelected(sub.id)}
                motion={motion}
                motionBegin={`${i * 0.22}s`}
                onClick={() => onSelectSubagent(sub.id, sisterName)}
              />
            );
          });
        })}
        {SISTER_ORDER.map((sisterName) => {
          const sister = getSister(sisterName);
          const subagents = sister?.subagents ?? [];
          const [sx, sy] = SISTER_POS[sisterName];
          return subagents.map((sub, i) => {
            const pos = getSubagentPosition(sisterName, i, sub.state);
            const active = sub.state !== 'idle' && sub.state !== 'error';
            return (
              <line
                key={`conn-${sub.id}`}
                x1={sx}
                y1={sy}
                x2={pos[0]}
                y2={pos[1]}
                stroke={active ? ZONE_BORDER[sisterName] : 'rgba(255,255,255,0.05)'}
                strokeWidth={active ? 0.8 : 0.5}
                strokeDasharray="2 3"
              />
            );
          });
        })}
      </svg>
    </SceneWrapper>
  );
 }
--- a/frontend/components/office/PipelinePanel.tsx
+++ b/frontend/components/office/PipelinePanel.tsx
@@ -0,0 +1,275 @@
 'use client';
 import React from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import type { PipelineNode } from '@/components/dashboard/ActivePipeline';
 // ─── Types ───────────────────────────────────────────────────────────────────
 interface PipelinePanelProps {
  activeTask: string;
  focus: string;
  reviewLoopCount: number;
  escalationCount: number;
  deployState: string;
  nodes: PipelineNode[];
  freshness: string;
 }
 // ─── Animations ──────────────────────────────────────────────────────────────
 const flowAnim = keyframes`
  0%   { transform: translateX(-100%); opacity: 0; }
  40%  { opacity: 0.8; }
  100% { transform: translateX(100%); opacity: 0; }
 `;
 // ─── Styled Components ────────────────────────────────────────────────────────
 const Panel = styled.section`
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
 `;
 const PanelHeader = styled.div`
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  justify-content: space-between;
  flex-wrap: wrap;
 `;
 const TitleGroup = styled.div`
  display: flex;
  flex-direction: column;
  gap: 4px;
 `;
 const Eyebrow = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
 `;
 const Title = styled.h3`
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
 `;
 const Focus = styled.div`
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  @media (max-width: 767px) {
    max-width: 100%;
    white-space: normal;
  }
 `;
 const Stats = styled.div`
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
 `;
 const Stat = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
 `;
 const StatLabel = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
 const StatValue = styled.div`
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
 `;
 const NodeRow = styled.div`
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
  @media (max-width: 767px) {
    flex-direction: column;
    overflow-x: visible;
  }
 `;
 const stateColors: Record<PipelineNode['state'], string> = {
  idle: 'var(--border-color)',
  active: '#6fc3ff',
  review: '#ff7ac6',
  blocked: '#ff8d7a',
  ready: '#8dffb2',
 };
 const NodeCard = styled.div<{ $state: PipelineNode['state'] }>`
  border: 1px solid ${({ $state }) => stateColors[$state]};
  padding: var(--space-sm) var(--space-md);
  min-width: 140px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  @media (max-width: 767px) {
    min-width: 0;
  }
 `;
 const NodeName = styled.div`
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
 `;
 const NodeRole = styled.div`
  font-size: 10px;
  color: var(--text-secondary);
 `;
 const NodeState = styled.div<{ $state: PipelineNode['state'] }>`
  font-family: var(--font-mono);
  font-size: 10px;
  color: ${({ $state }) => stateColors[$state]};
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
 const NodeDetail = styled.div`
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
 `;
 const Connector = styled.div<{ $active: boolean }>`
  width: 24px;
  flex-shrink: 0;
  height: 1px;
  background: ${({ $active }) => $active ? 'rgba(245,245,245,0.4)' : 'var(--border-color)'};
  position: relative;
  overflow: hidden;
  align-self: center;
  &::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 5px;
    background: ${({ $active }) => $active ? 'rgba(245,245,245,0.8)' : 'transparent'};
    animation: ${({ $active }) => $active ? css`${flowAnim} 1.6s linear infinite` : 'none'};
  }
  @media (max-width: 767px) {
    width: 1px;
    height: 16px;
    align-self: flex-start;
    margin-left: var(--space-lg);
  }
 `;
 const FreshnessNote = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
 // ─── Component ────────────────────────────────────────────────────────────────
 export default function PipelinePanel({
  activeTask,
  focus,
  reviewLoopCount,
  escalationCount,
  deployState,
  nodes,
  freshness,
 }: PipelinePanelProps) {
  return (
    <Panel>
      <PanelHeader>
        <TitleGroup>
          <Eyebrow>pipeline panel · snapshot</Eyebrow>
          <Title>{activeTask}</Title>
          <Focus>{focus}</Focus>
        </TitleGroup>
        <Stats>
          <Stat>
            <StatLabel>review loop</StatLabel>
            <StatValue>{reviewLoopCount}x</StatValue>
          </Stat>
          <Stat>
            <StatLabel>escalations</StatLabel>
            <StatValue>{escalationCount}</StatValue>
          </Stat>
          <Stat>
            <StatLabel>deploy state</StatLabel>
            <StatValue>{deployState}</StatValue>
          </Stat>
        </Stats>
      </PanelHeader>
      {nodes.length > 0 ? (
        <NodeRow>
          {nodes.map((node, i) => {
            const active = node.state === 'active' || node.state === 'review' || node.state === 'ready';
            return (
              <React.Fragment key={node.id}>
                <NodeCard $state={node.state}>
                  <NodeName>{node.label}</NodeName>
                  <NodeRole>{node.role}</NodeRole>
                  <NodeState $state={node.state}>{node.state}</NodeState>
                  <NodeDetail>{node.detail}</NodeDetail>
                </NodeCard>
                {i < nodes.length - 1 && <Connector $active={active} />}
              </React.Fragment>
            );
          })}
        </NodeRow>
      ) : (
        <NodeRole style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>
          파이프라인 데이터 없음
        </NodeRole>
      )}
      <FreshnessNote>snapshot · {freshness}</FreshnessNote>
    </Panel>
  );
 }
--- a/frontend/components/office/ServerHealthPanel.tsx
+++ b/frontend/components/office/ServerHealthPanel.tsx
@@ -0,0 +1,189 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
 // ─── Types ───────────────────────────────────────────────────────────────────
 export interface ServerEntry {
  id: string;
  label: string;
  type: 'sister' | 'dev' | 'docker';
  status: 'online' | 'offline' | 'working' | 'unknown';
  detail?: string | null;
  source: 'live' | 'snapshot' | 'fallback';
 }
 interface ServerHealthPanelProps {
  servers: ServerEntry[];
  dataMode: 'live' | 'snapshot' | 'fallback';
  generatedAt: string;
 }
 // ─── Styled Components ────────────────────────────────────────────────────────
 const Panel = styled.section`
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
 `;
 const PanelHeader = styled.div`
  display: flex;
  align-items: center;
  gap: var(--space-md);
  justify-content: space-between;
 `;
 const Eyebrow = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
 `;
 const WsDot = styled.span<{ $connected: boolean }>`
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: ${({ $connected }) => ($connected ? '#00FF00' : '#555')};
  margin-right: 4px;
  vertical-align: middle;
 `;
 const FreshnessNote = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
 const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
  @media (max-width: 767px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 359px) {
    grid-template-columns: 1fr;
  }
 `;
 const statusColors: Record<ServerEntry['status'], string> = {
  online:  '#00FF00',
  offline: '#FF1744',
  working: '#2979FF',
  unknown: '#555555',
 };
 const ServerCard = styled.div<{ $status: ServerEntry['status'] }>`
  border: 1px solid var(--border-color);
  border-left: 2px solid ${({ $status }) => statusColors[$status]};
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
 `;
 const CardLabel = styled.div`
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
 `;
 const StatusDot = styled.span<{ $status: ServerEntry['status'] }>`
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: ${({ $status }) => statusColors[$status]};
 `;
 const CardStatus = styled.div<{ $status: ServerEntry['status'] }>`
  font-family: var(--font-mono);
  font-size: 10px;
  color: ${({ $status }) => statusColors[$status]};
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
 const CardDetail = styled.div`
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 `;
 const SourceBadge = styled.span`
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
 // ─── Component ────────────────────────────────────────────────────────────────
 function formatGeneratedAt(ts: string): string {
  try {
    const date = new Date(ts);
    const diff = Date.now() - date.getTime();
    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`;
  } catch {
    return ts;
  }
 }
 export default function ServerHealthPanel({
  servers,
  dataMode,
  generatedAt,
 }: ServerHealthPanelProps) {
  const onlineCount = servers.filter((s) => s.status === 'online' || s.status === 'working').length;
  return (
    <Panel>
      <PanelHeader>
        <Eyebrow>
          <WsDot $connected={dataMode === 'live'} />
          server health · {dataMode}
          {' · '}{onlineCount}/{servers.length} online
        </Eyebrow>
        <FreshnessNote>refreshed {formatGeneratedAt(generatedAt)}</FreshnessNote>
      </PanelHeader>
      <Grid>
        {servers.map((server) => (
          <ServerCard key={server.id} $status={server.status}>
            <CardLabel>
              <StatusDot $status={server.status} />
              {server.label}
            </CardLabel>
            <CardStatus $status={server.status}>{server.status}</CardStatus>
            {server.detail && <CardDetail>{server.detail}</CardDetail>}
            <SourceBadge>{server.source}</SourceBadge>
          </ServerCard>
        ))}
      </Grid>
    </Panel>
  );
 }
--- a/frontend/lib/AuthContext.tsx
+++ b/frontend/lib/AuthContext.tsx
@@ -3,6 +3,7 @@
 import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { API_URL } from './config';
 import { withSessionRequest } from './csrf';
 interface AuthUser {
  userId: number;
@@ -31,38 +32,20 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [loading, setLoading] = useState(true);
  const loadUser = useCallback(async () => {
    const token = localStorage.getItem('hanarang_access_token');
    if (!token) { setLoading(false); return; }
    try {
-      const res = await fetch(`${API_URL}/api/auth/me`, {
+      const res = await fetch(`${API_URL}/api/auth/me`, withSessionRequest());
        headers: { Authorization: `Bearer ${token}` },
      });
      if (res.ok) {
        const data = await res.json();
        setUser({ userId: data.id, username: data.username, role: data.role });
      } else if (res.status === 401) {
-        // access token 만료 → refresh 시도
+        // access token expired → try refresh via cookie
        const refreshToken = localStorage.getItem('hanarang_refresh_token');
        if (refreshToken) {
        try {
-            const rRes = await fetch(`${API_URL}/api/auth/refresh`, {
+          const rRes = await fetch(`${API_URL}/api/auth/refresh`, withSessionRequest({ method: 'POST' }, { csrf: true }));
              method: 'POST',
              headers: { 'x-refresh-token': refreshToken },
            });
          if (rRes.ok) {
            const d = await rRes.json();
              localStorage.setItem('hanarang_access_token', d.accessToken);
              if (d.refreshToken) localStorage.setItem('hanarang_refresh_token', d.refreshToken);
            setUser({ userId: 0, username: d.username, role: d.role });
            } else {
              localStorage.removeItem('hanarang_access_token');
              localStorage.removeItem('hanarang_refresh_token');
          }
        } catch { /* silent */ }
        } else {
          localStorage.removeItem('hanarang_access_token');
        }
      }
    } catch {
      // silent
@@ -74,11 +57,11 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => { loadUser(); }, [loadUser]);
  const login = async (username: string, password: string) => {
-    const res = await fetch(`${API_URL}/api/auth/login`, {
+    const res = await fetch(`${API_URL}/api/auth/login`, withSessionRequest({
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password }),
-    });
+    }, { csrf: true }));
    if (!res.ok) {
      const d = await res.json();
@@ -86,27 +69,23 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
    }
    const d = await res.json();
-    localStorage.setItem('hanarang_access_token', d.accessToken);
+    // Tokens are set as HttpOnly cookies by the server
-    if (d.refreshToken) {
+    setUser({ userId: 0, username: d.username, role: d.role });
-      localStorage.setItem('hanarang_refresh_token', d.refreshToken);
+
-    }
+    // Fetch actual userId from /me
    // me API로 실제 userId 가져오기
    try {
-      const meRes = await fetch(`${API_URL}/api/auth/me`, {
+      const meRes = await fetch(`${API_URL}/api/auth/me`, withSessionRequest());
        headers: { Authorization: `Bearer ${d.accessToken}` },
      });
      if (meRes.ok) {
        const me = await meRes.json();
        setUser({ userId: me.id, username: me.username, role: me.role });
        return;
      }
-    } catch { /* fallback */ }
+    } catch { /* fallback — already set basic info */ }
    setUser({ userId: 0, username: d.username, role: d.role });
  };
-  const logout = () => {
+  const logout = async () => {
-    localStorage.removeItem('hanarang_access_token');
+    try {
-    localStorage.removeItem('hanarang_refresh_token');
+      await fetch(`${API_URL}/api/auth/logout`, withSessionRequest({ method: 'POST' }, { csrf: true }));
    } catch { /* silent */ }
    setUser(null);
  };
--- a/frontend/lib/csrf.ts
+++ b/frontend/lib/csrf.ts
@@ -0,0 +1,46 @@
 export const CSRF_COOKIE_NAME = 'hanarang_csrf_token';
 export function getCookieValue(name: string): string {
  if (typeof document === 'undefined') return '';
  const match = document.cookie
    .split('; ')
    .find((item) => item.startsWith(`${encodeURIComponent(name)}=`));
  if (!match) return '';
  return decodeURIComponent(match.split('=').slice(1).join('='));
 }
 export function getCsrfToken(): string {
  return getCookieValue(CSRF_COOKIE_NAME);
 }
 export function needsCsrf(method?: string): boolean {
  const normalized = (method ?? 'GET').toUpperCase();
  return !['GET', 'HEAD', 'OPTIONS'].includes(normalized);
 }
 export function withCsrfHeaders(headers?: HeadersInit): Headers {
  const nextHeaders = new Headers(headers);
  const csrfToken = getCsrfToken();
  if (csrfToken) {
    nextHeaders.set('x-csrf-token', csrfToken);
  }
  return nextHeaders;
 }
 export function withSessionRequest(
  init: RequestInit = {},
  options: { csrf?: boolean } = {},
 ): RequestInit {
  const useCsrf = options.csrf ?? needsCsrf(init.method);
  return {
    ...init,
    credentials: 'include',
    headers: useCsrf ? withCsrfHeaders(init.headers) : new Headers(init.headers),
  };
 }
Author	SHA1	Message	Date
나랑이	16270e2661	feat: SPRINT-018 dashboard truth redesign implementation - /office: Replace 4-box mobile decomposition with group mental model (Planning/Delivery/Review/Deploy blocks). Fallback seed no longer injects "working" state. Show operational summary on first load. Add truthful state labels (connected idle/active working/snapshot only/fallback/offline). Fix 360/390 mobile overflow. - / dashboard: Separate socket connection from freshness badges. "EVENT STREAM OFF" is neutral, not error-like. Remove owner fallback to narang — show "NO ACTIVE OWNER" when null. Add consistent source labels (MIRRORED EVENT/SNAPSHOT/DOC-DERIVED) to all sections. - /projects/[id]: Replace "ASSIGNED NODES" with truthful participant model. Separate CURRENT OWNERS, PARTICIPANTS (with whyVisible badges), and TASK ASSIGNEES into distinct sections. Fix 나랑이-only display by showing reason/source so it doesn't read as confirmed participation. - /org: Complete redesign from hardcoded sister tree to company org chart. HQ → functional teams → members structure with status/source/ freshness. Independent agents section. Data-driven from /api/org, not hardcoded harang→children tree. Mobile-friendly card layout. - Backend sisters.service.ts: Add truth contract fields — connection (gateway/runtime), activity (state/label/lastActiveAt), working (state/confidence/reason/label), source, freshness. States: connected idle, active working, snapshot only, fallback, offline. Fallback seeds never inject "working" directly. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-09 13:00:30 +09:00
하랑이	92b33035b0	docs: plan sprint 018 dashboard truth redesign	2026-04-09 10:39:10 +09:00
나랑이	bec8df64ec	fix: ChatWorkspace loadRuntime() use cookie-based withSessionRequest	2026-04-09 10:08:02 +09:00
이랑이	2d01f520c4	Merge PR: SPRINT-017 office mobile plan	2026-04-09 09:59:27 +09:00
나랑이	622eac3a10	fix: SPRINT-017 review fixes 1. Desktop breakpoint 768px → 1280px+ (tablet keeps mobile flow) 2. Default context always rendered (shows working sister when none selected) 3. MobileSisterCard aria-pressed for accessibility 4. ChatWorkspace localStorage → cookie-based withSessionRequest	2026-04-09 09:51:12 +09:00
나랑이	4434e75a12	feat: SPRINT-017 mobile-first office dashboard overhaul - Mobile summary view with sister cards, focus, health, quick actions - Compact card flow replaces OfficeScene on mobile (no shrink) - ContextPanel absorbed inline on mobile - PipelinePanel vertical stack on mobile - ServerHealthPanel 2-col mobile, 1-col below 360px - ChatWorkspace tab padding optimized for narrow screens - Desktop 1280+ layout preserved as-is - Breakpoints: 360 / 390 / 768 / 1280+	2026-04-09 09:40:22 +09:00
하랑이	ba800ea8e3	docs: sharpen sprint 017 office mobile plan	2026-04-09 09:20:30 +09:00
이랑이	c25e05f685	Merge PR #14 : SPRINT-016 office dashboard hotfix	2026-04-09 08:59:16 +09:00
나랑이	54535e7b5e	fix: resolve 8 review/security issues (SPRINT-016 hotfix) Security: - JwtGuard + RoleGuard on all sisters endpoints - Admin-only access for config/sessions/subagents/activity - ThrottlerGuard on /auth/refresh - HttpOnly SameSite cookies + CSRF (replaces localStorage) Code Quality: - Per-sister draft input (Record<SisterName, string>) - crypto.randomUUID for optimistic message ids (dedupe ready) - Polling disabled while WebSocket connected - SVG keyboard accessibility (role/tabIndex/onKeyDown)	2026-04-09 08:51:28 +09:00
하랑이	bc6904d348	docs: add sprint 017 office stabilization plan	2026-04-08 18:51:17 +09:00
erang	fc0d831f57	merge: fix circular dependency Events↔Sisters↔Activity + restore WebSocket broadcast	2026-04-08 05:50:07 +00:00
나랑이	58843db298	fix: wire activity.logged event to WebSocket broadcast Add @OnEvent('activity.logged') listener in EventsGateway to bridge EventEmitter2 → WebSocket activity:new broadcast. Restores real-time activity push without reintroducing circular dependency.	2026-04-08 14:14:01 +09:00
나랑이	d8f2818e59	fix: break circular dependency between Events↔Sisters↔Activity - Replace EventsGateway direct dependency in ActivityService with EventEmitter2 - ActivityModule no longer imports EventsModule (cycle broken) - Register EventEmitterModule in AppModule - Update activity.service.spec.ts to provide EventEmitter2 - SistersModule safely imports ActivityModule without creating a cycle Dependency graph after fix: EventsModule → SistersModule → ActivityModule (leaf, no back-edge)	2026-04-08 14:07:19 +09:00
하랑이	88547e9464	fix: wire office dashboard to runtime state	2026-04-08 13:49:26 +09:00
erang	bb36380c92	fix: wrap office pipeline keyframes with css helper	2026-04-07 05:09:05 +00:00
하랑이	1ccc1e6830	docs: add sprint-016 release preflight	2026-04-07 13:56:45 +09:00
하랑이	a9e1e677b0	feat: merge SPRINT-016 isometric office dashboard	2026-04-07 13:36:58 +09:00
나랑이	658d5e7af7	docs: restore code-reviewer in sprint 016 spec	2026-04-07 13:01:44 +09:00
나랑이	3bdd24a3a5	fix: restore 17 subagents in office dashboard	2026-04-07 12:57:43 +09:00
나랑이	f920318138	fix: align office dashboard subagent count	2026-04-07 12:51:55 +09:00
나랑이	a731ecee4b	fix: stabilize office dashboard demo states and motion	2026-04-07 12:12:11 +09:00
나랑이	6e0583efeb	feat: implement SPRINT-016 isometric office dashboard Build the 4자매 office dashboard with SVG scene, agent state visualization, context panel, direct chat workspace, pipeline panel, and server health panel. - frontend/app/office/page.tsx: Main office page (sisters + ops data, WS live + polling fallback, selected agent state, chat toggle) - frontend/components/office/OfficeScene.tsx: SVG 2D office floor plan with 4 fixed sister desks, 17 subagent nodes, handoff connector lines, conference room, and per-state animations (idle/thinking/tool_calling/ speaking/error) - frontend/components/office/ContextPanel.tsx: Right context panel showing selected sister or subagent detail, current task, subagent list, chat/detail links - frontend/components/office/ChatWorkspace.tsx: Direct chat workspace with sister tabs, message timeline, streaming-ready layout; Gateway connection pending notice (honest fallback labeling) - frontend/components/office/PipelinePanel.tsx: Bottom pipeline panel with sprint/workflow nodes and flow animations - frontend/components/office/ServerHealthPanel.tsx: Server health grid for 4 sisters + Dev + Docker with live/snapshot/fallback labels - frontend/components/common/Sidebar.tsx: Add /office nav item Data labeling: sisters live via WS (snapshot fallback), subagent states derived/fallback, pipeline snapshot, chat gateway-pending. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-07 11:49:23 +09:00
하랑이	3ba765b430	docs: plan sprint-016 office dashboard	2026-04-07 11:29:59 +09:00