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)
docs: add sprint 017 office stabilization plan
2026-04-09 08:51:28 +09:00 · 2026-04-08 18:51:17 +09:00 · 2026-04-08 05:50:07 +00:00 · 2026-04-08 14:14:01 +09:00 · 2026-04-08 14:07:19 +09:00 · 2026-04-08 13:49:26 +09:00
25 changed files with 1666 additions and 686 deletions
--- a/.plans/OVERVIEW.md
+++ b/.plans/OVERVIEW.md
@@ -4,6 +4,19 @@
 - 4자매 운영 상태를 실시간으로 보여준다
 - 프로젝트/Sprint/Hotfix/QA/Deploy 흐름을 시각화한다
 - `main`이 항상 배포 가능 상태라는 원칙을 UI와 운영에 함께 반영한다
 - 오피스 화면과 운영 패널이 분리되지 않고 하나의 관제 경험으로 이어지게 만든다
 ## 저장소 / Git 기준
 - Repo: `hanarang-dashboard`
 - Git URL: `https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard`
 - 기본 브랜치: `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`
 ## 현재 표준 구조
 - 루트: `README.md`, `ARCHITECTURE.md`
@@ -15,25 +28,37 @@
  - `deploy/`
 - 장기 문서: `docs/`
-## 활성 작업
+## 현재 상태
- **SPRINT-016**: 4자매 Isometric Office Dashboard 재기획
+- **SPRINT-016**: `/office` 화면과 핵심 컴포넌트가 `main`에 반영됨
 - **다음 활성 작업**: **SPRINT-017** 오피스 대시보드 운영 안정화와 모바일 완성
-## 이번 Sprint 핵심 요구사항
+## SPRINT-017 핵심 요구사항
-1. 4자매와 17개 서브에이전트, 총 21개 에이전트를 오피스 은유로 재설계
+1. `/office` 화면을 Desktop, Tablet, Mobile에서 같은 운영 의미로 읽히게 만든다
-2. 4자매 독립 Gateway WebSocket 기준 실시간 상태 모델 정리
+2. `live / snapshot / fallback` 상태 구분을 UI와 API 문서에서 같은 규칙으로 고정한다
-3. 고정 좌석 4자매 + 동적 이동 서브에이전트 + 회의실/연결선 구조 정의
+3. direct chat, pipeline, server health 패널의 실패/빈 상태/권한 상태를 문서화하고 정리한다
-4. direct chat / workflow panel / server health를 오피스 화면과 통합
+4. WebSocket + polling reconciliation 규칙을 운영 기준으로 확정한다
-5. PRD와 `.plans/` 구조를 새 제품 방향 기준으로 정리
+5. QA와 deploy preflight가 재현 가능한 체크리스트로 이어지게 만든다
 ## 이행 전략
- 코드에서는 구 구조와 신 구조를 일정 기간 동시 지원
+- 코드에서는 이미 반영된 `/office` 구현을 기준으로 안정화 Sprint를 잡는다
- 문서는 신 구조를 기준으로 선반영
+- 문서는 실제 `main` 구현 경로를 기준으로만 갱신한다
 - 신규 QA 문서는 `.plans/qa/` 기준
 - 신규 Hotfix 문서는 `.plans/hotfix/` 기준
 - SPRINT-017 문서는 SPRINT-016의 비전 문서를 덮어쓰지 않고, 운영 안정화 기준을 덧붙이는 방식으로 간다
 ## 문서 맵
 - 구조 기준: `../ARCHITECTURE.md`
 - 제품 PRD: `../docs/product-specs/openclaw-office-dashboard-prd.md`
 - 디자인 인덱스: `./design/index.md`
- Sprint 계획: `./sprints/SPRINT-016.md`
+- Sprint 016 비전: `./sprints/SPRINT-016.md`
- PRD: `../docs/product-specs/openclaw-office-dashboard-prd.md`
+- Sprint 017 실행 계획: `./sprints/SPRINT-017.md`
 - API / 실시간 모델: `./design/api-design.md`
 - 오피스 씬 UI 기준: `./design/ui/office-dashboard-design.md`
 - 오피스 채팅 UI 기준: `./design/ui/office-chat-design.md`
 - 배포 플로우: `./deploy/main-release-flow.md`
 ## 교차 참조 규칙
 - Sprint 문서는 반드시 관련 design 문서를 링크한다
 - design 문서는 실제 Git 구현 경로를 함께 적는다
 - QA / deploy 문서는 대상 Sprint 문서와 구현 commit을 함께 남긴다
 - 여기까지가 SPRINT-017 기준 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
@@ -3,36 +3,137 @@
 ## 공통 규칙
 - 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" }`
 - SPRINT-017 기준으로 오피스 화면은 `REST snapshot + WebSocket push` 혼합 모델을 사용한다.
-## Sisters (자매 상태)
+## 인증 규칙
 - 읽기 전용 상태 조회 API는 현재 공개 조회가 가능한 엔드포인트가 섞여 있어.
 - direct chat (`POST /api/sisters/:name/chat`) 은 JWT 필수야.
 - WebSocket 연결도 JWT 필수야. 토큰이 없거나 잘못되면 서버가 연결을 끊어.
 - 그래서 `/office`는 **읽기와 쓰기의 권한 상태를 분리해서** 다뤄야 해.
-| Method | Endpoint | 설명 |
+## 오피스 대시보드 핵심 소스
-|--------|----------|------|
+- Git 구현 기준:
-| GET | `/api/sisters` | 4자매 상태 목록 (SSH로 실시간 조회) |
+  - `frontend/app/office/page.tsx`
-| GET | `/api/sisters/:name` | 자매 상세 (설정 + 상태) |
+  - `backend/src/sisters/sisters.controller.ts`
-| GET | `/api/sisters/:name/config` | openclaw.json 내용 |
+  - `backend/src/events/events.gateway.ts`
-| GET | `/api/sisters/:name/sessions` | 최근 세션 목록 |
+  - `backend/src/events/events.scheduler.ts`
-| GET | `/api/sisters/:name/subagents` | 서브에이전트 사용 현황 |
+- 관련 Sprint: `../sprints/SPRINT-017.md`
-| POST | `/api/sisters/:name/restart` | Gateway 재시작 (관리자) |
+- 관련 UI 문서:
-| POST | `/api/sisters/:name/reset` | 세션 리셋 (관리자) |
+  - `./ui/office-dashboard-design.md`
  - `./ui/office-chat-design.md`
-### GET `/api/sisters`
+## 상태 모델
 ### Data Mode
 | mode | 의미 | UI 원칙 |
 |---|---|---|
 | `live` | WebSocket 또는 최신 runtime 기준으로 실시간성이 유지되는 상태 | 가장 신뢰도 높은 상태로 표시 |
 | `snapshot` | REST polling 기준 최신 스냅샷 | live보다 약한 상태로 표시 |
 | `fallback` | runtime 또는 status 조회 실패 시 보여주는 보정 데이터 | 추정치임을 숨기지 않음 |
 ### Agent State
 | state | 의미 |
 |---|---|
 | `idle` | 대기 중 |
 | `thinking` | 작업 준비 / 추론 중 |
 | `tool_calling` | 외부 작업/도구 호출 중 |
 | `speaking` | 응답 생성 또는 대화 중 |
 | `error` | 연결 또는 런타임 이상 |
 ## Sisters (오피스 화면 기준)
 | Method | Endpoint | 인증 | 설명 |
 |--------|----------|------|------|
 | GET | `/api/sisters` | 없음 | 4자매 상태 목록 |
 | GET | `/api/sisters/runtime` | 없음 | 4자매 runtime 스냅샷 |
 | GET | `/api/sisters/:name/runtime` | 없음 | 개별 자매 runtime |
 | GET | `/api/sisters/:name/system` | 없음 | 개별 자매 시스템 정보 |
 | GET | `/api/sisters/:name/avatar` | 없음 | 자매 아바타 이미지 |
 | GET | `/api/sisters/:name/config` | 없음 | openclaw 설정 조회 |
 | GET | `/api/sisters/:name/sessions` | 없음 | 최근 세션 목록 |
 | GET | `/api/sisters/:name/subagents` | 없음 | 서브에이전트 목록/현황 |
 | GET | `/api/sisters/:name/activity` | 없음 | 최근 활동 로그 |
 | POST | `/api/sisters/:name/chat` | JWT 필요 | direct chat 전송 |
 ### GET `/api/sisters/runtime`
 오피스 메인 화면의 상단 상태와 최근 메시지, 서브에이전트 상태를 구성하는 runtime source야.
 예시 필드:
 ```json
 // Response 200
 [
  {
    "name": "harang",
-    "displayName": "하랑이",
+    "gatewayConnected": true,
-    "ip": "10.10.10.112",
+    "mainState": "thinking",
-    "status": "online",
+    "currentTask": "SPRINT-017 scope 잠금",
-    "lastSeen": "2026-04-04T01:45:00Z",
+    "activeSessionLabel": "main",
-    "role": "Orchestrator"
+    "activeSessionUpdatedAt": 1775640000000,
    "controlSessionKey": "agent:harang:main",
    "recentMessages": [
      {
        "id": "msg_1",
        "role": "assistant",
        "content": "scope 정리 중",
        "ts": "2026-04-08T09:20:00Z"
      }
    ],
    "subagents": [
      {
        "name": "prd-writer",
        "state": "tool_calling",
        "updatedAt": 1775640000000,
        "currentTask": "SPRINT-017 작성",
        "sessionLabel": "main"
      }
    ]
  }
 ]
 ```
 ### POST `/api/sisters/:name/chat`
 ```json
 // Request
 { "message": "SPRINT-017 scope 확인해" }
 ```
 ```json
 // Response 200 example
 {
  "ok": true,
  "queued": true,
  "sessionKey": "agent:harang:main"
 }
 ```
 ### Chat 실패 처리 원칙
 - JWT 없음 → 입력창 비활성화 또는 전송 실패 이유 명시
 - timeout → 전송은 재시도 가능 상태로 남김
 - 최근 메시지 없음 → empty state 문구 사용
 - tool 메시지와 assistant 메시지는 같은 bubble로 합치지 않음
 ## WebSocket
 ### 연결
 - Namespace: `/ws`
 - 인증 방식:
  - `handshake.auth.token`
  - 또는 `Authorization: Bearer <token>`
 - 토큰 없음/검증 실패 시 disconnect
 ### 서버 이벤트
 | Event | Payload | 설명 |
 |---|---|---|
 | `pong` | `{ ts }` | ping 응답 |
 | `sisters:update` | `{ sisters, ts }` | 4자매 상태 push |
 | `activity:new` | `{ item, ts }` | 새 활동 로그 push |
 ### 운영 규칙
 - WS는 가장 강한 source야.
 - WS가 끊겨도 마지막 성공 시각을 보존해 stale 여부를 판단해야 해.
 - scheduler polling 값이 더 오래된 경우 live 값을 덮어쓰면 안 돼.
 - SPRINT-017에서는 reconnect / stale / snapshot downgrade 규칙을 문서와 QA 기준으로 잠근다.
 ## Projects (프로젝트)
 | Method | Endpoint | 설명 |
@@ -69,3 +170,9 @@
 | Method | Endpoint | 설명 |
 |--------|----------|------|
 | GET | `/health` | 서버 상태 확인 |
 ## SPRINT-017 문서 기준 정리
 - 오피스 화면은 읽기 API와 쓰기 API 권한을 분리해서 다룬다
 - `live / snapshot / fallback`은 API 문서, UI 문서, QA 문서에서 같은 의미로 쓴다
 - direct chat, WS disconnect, stale 상태는 정상 흐름만큼 중요하게 검증한다
 - 여기까지가 API 기준 scope야.
--- 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
@@ -21,8 +21,20 @@
 ## 레퍼런스
 - `references/07-master-dashboard-v3-reference.md`
-## Sprint 016에서 반드시 반영할 화면
+## 현재 우선 문서
- 오피스 메인: 4자매 고정 좌석 + 서브에이전트 동적 이동
+- Sprint 실행 기준: `../sprints/SPRINT-017.md`
- 오피스 채팅: 자매 선택 direct chat + 현재 상태 결합
+- 제품 비전: `../../docs/product-specs/openclaw-office-dashboard-prd.md`
- 운영 패널: active workflow / sprint / review loop / deploy gate / server health
+- 실행 개요: `../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/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/sprints/SPRINT-017.md
+++ b/.plans/sprints/SPRINT-017.md
@@ -0,0 +1,178 @@
 # SPRINT-017: 오피스 대시보드 운영 안정화와 모바일 완성
 ## 목표
 `/office`를 데모 화면이 아니라 운영자가 실제로 믿고 쓰는 관제 화면으로 고정한다. 이번 Sprint의 중심은 새 기능 추가가 아니라, 이미 `main`에 들어온 오피스 대시보드를 **실시간성, 반응형, 실패 처리, QA 기준**까지 포함해 운영 가능 상태로 만드는 거야.
 ## 배경
 SPRINT-016에서 아래는 이미 확보됐어.
 - 오피스 PRD와 핵심 IA
 - `frontend/app/office/page.tsx` 진입 경로
 - `OfficeScene`, `ContextPanel`, `ChatWorkspace`, `PipelinePanel`, `ServerHealthPanel` 구현
 - release preflight 문서와 기본 빌드 통과 근거
 하지만 여기서 멈추면 안 돼.
 - live 데이터가 약해질 때 무엇을 보여줄지
 - 모바일에서 어떤 정보만 남기고 무엇을 접을지
 - direct chat이 권한/JWT/오류 상황에서 어떻게 반응할지
 - WebSocket과 polling snapshot이 충돌할 때 어떤 값이 우선인지
 이 기준이 문서와 QA에서 아직 완전히 잠기지 않았어.
 ## 참고 문서
 - PRD: `docs/product-specs/openclaw-office-dashboard-prd.md`
 - 실행 개요: `.plans/OVERVIEW.md`
 - 이전 Sprint: `.plans/sprints/SPRINT-016.md`
 - UI 기준: `.plans/design/ui/office-dashboard-design.md`
 - 채팅 기준: `.plans/design/ui/office-chat-design.md`
 - API 기준: `.plans/design/api-design.md`
 - 배포/검증: `.plans/qa/SPRINT-016-release-preflight.md`
 ## Git 링크
 - Repo: https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard
 - `/office` entry: https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard/src/branch/main/frontend/app/office/page.tsx
 - office components: https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard/src/branch/main/frontend/components/office
 - sisters controller: https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard/src/branch/main/backend/src/sisters/sisters.controller.ts
 - websocket gateway: https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard/src/branch/main/backend/src/events/events.gateway.ts
 ## Sprint 범위
 - `/office` 운영 안정화
 - Desktop / Tablet / Mobile 정보 우선순위 재정리
 - live / snapshot / fallback 판정 규칙 고정
 - direct chat 실패/권한/빈 상태 처리 강화
 - WebSocket reconnect / polling reconciliation 기준 문서화
 - QA 재현 기준과 deploy gate 정리
 ## 이번 Sprint에서 하지 않는 것
 - 새로운 오피스 씬 세계관 추가
 - 3D 전환
 - 음성/영상 채널 추가
 - 별도 모바일 앱 설계
 - Gateway 프로토콜 자체 신규 설계
 ## 완료 기준
 - Desktop / Tablet / Mobile에서 `/office` 핵심 판단 정보가 모두 남아 있음
 - `live / snapshot / fallback` 판정이 UI와 API 문서에서 같은 의미로 쓰임
 - direct chat, pipeline, health 패널의 오류/권한/빈 상태가 정의되고 QA 가능함
 - WS 끊김, JWT 없음, 데이터 지연 상황에서 운영자가 왜 이런 화면이 보이는지 설명 가능함
 - QA 체크와 deploy preflight가 SPRINT-017 기준으로 이어짐
 ## 태스크
 ### TASK-100: SPRINT-017 scope 확정과 문서 교차 참조 정리
 - **담당:** 하랑이
 - **상태:** pending
 - **산출물:**
  - `.plans/OVERVIEW.md` 갱신
  - `.plans/sprints/SPRINT-017.md`
  - `.plans/design/api-design.md` 갱신
 - **설명:** SPRINT-016 비전 문서와 실제 `main` 구현 사이의 차이를 정리하고, 이번 Sprint의 안정화 scope를 문서 레벨에서 잠근다.
 - **done_when:**
  - SPRINT-017 문서가 실제 Git 구현 경로를 링크함
  - 관련 문서 간 교차 참조가 누락 없이 연결됨
  - active sprint가 OVERVIEW에서 SPRINT-017로 표시됨
 ### TASK-101: live / snapshot / fallback 상태 모델 고정
 - **담당:** 나랑이
 - **상태:** pending
 - **주요 파일:**
  - `frontend/app/office/page.tsx`
  - `frontend/components/office/OfficeScene.tsx`
  - `backend/src/sisters/sisters.controller.ts`
  - `backend/src/events/events.gateway.ts`
 - **설명:** 오피스 화면이 어떤 데이터 출처를 보고 있는지 명확히 드러내고, WS 데이터와 REST snapshot이 섞일 때 우선순위를 고정한다.
 - **done_when:**
  - 화면 상에서 현재 데이터 모드가 `live`, `snapshot`, `fallback` 중 하나로 읽힘
  - WS 끊김 후 snapshot으로 내려가는 기준 시간이 정리됨
  - fallback 진입 조건이 문서와 코드 주석/상수 기준으로 일치함
 ### TASK-102: Office Scene 반응형 정보 우선순위 재정의
 - **담당:** 나랑이
 - **상태:** pending
 - **주요 파일:**
  - `frontend/app/office/page.tsx`
  - `frontend/components/office/OfficeScene.tsx`
  - `frontend/components/office/ContextPanel.tsx`
  - `frontend/components/office/PipelinePanel.tsx`
  - `frontend/components/office/ServerHealthPanel.tsx`
 - **설명:** 모바일에서는 전체 씬을 그대로 축소하지 말고, 운영 의미가 유지되는 최소 단위로 재배치한다.
 - **done_when:**
  - Desktop(≥1280), Tablet(768~1279), Mobile(<768) 기준 레이아웃이 정의됨
  - Mobile에서 4자매 상태, 현재 focus, health summary가 첫 화면 안에 들어옴
  - 고정 높이/overflow 때문에 주요 패널이 잘리지 않음
 ### TASK-103: direct chat 권한/오류/빈 상태 정리
 - **담당:** 나랑이
 - **상태:** pending
 - **주요 파일:**
  - `frontend/components/office/ChatWorkspace.tsx`
  - `backend/src/sisters/sisters.controller.ts`
 - **설명:** JWT 없음, 전송 실패, 응답 지연, 최근 메시지 없음 같은 운영 상황을 조용히 숨기지 않고 정직하게 보여준다.
 - **done_when:**
  - JWT 없음 상태에서 전송 불가 이유가 사용자에게 표시됨
  - 전송 실패/timeout 시 재시도 또는 안내 문구가 있음
  - 최근 대화가 없을 때 빈 상태 문구가 존재함
  - tool 메시지와 assistant 메시지가 구분돼 보임
 ### TASK-104: WebSocket reconnect와 polling reconciliation 운영 규칙 정리
 - **담당:** 나랑이
 - **상태:** pending
 - **주요 파일:**
  - `backend/src/events/events.gateway.ts`
  - `backend/src/events/events.scheduler.ts`
  - `frontend/lib/useSocket.ts`
  - `frontend/app/office/page.tsx`
 - **설명:** 지금 구조는 WS broadcast와 주기적 snapshot이 함께 가고 있어. 이 둘의 충돌/지연 시 동작 원리를 문서와 구현에서 함께 잠가야 해.
 - **done_when:**
  - reconnect backoff 또는 재연결 전략이 문서화됨
  - 마지막 성공 수신 시각을 기준으로 stale 상태를 표시할 수 있음
  - snapshot이 WS보다 오래된 데이터를 덮어쓰지 않게 기준이 정리됨
 ### TASK-105: 오피스 패널 loading / empty / stale UX 통일
 - **담당:** 나랑이
 - **상태:** pending
 - **주요 파일:**
  - `frontend/app/office/page.tsx`
  - `frontend/components/office/*`
 - **설명:** 씬, 채팅, 파이프라인, 서버 헬스가 각자 다른 실패 톤으로 반응하면 운영자가 혼란스러워져. 상태 톤을 하나로 맞춘다.
 - **done_when:**
  - loading, empty, stale, error 네 상태가 전 패널에서 같은 규칙으로 보임
  - fallback 데이터 사용 시 라벨 또는 보조 문구가 있음
  - 데이터 없음과 오류를 같은 문구로 처리하지 않음
 ### TASK-106: QA 매트릭스 작성 및 실브라우저 검증
 - **담당:** 다랑이
 - **상태:** pending
 - **산출물:**
  - `.plans/qa/SPRINT-017-review-1.md`
  - 필요 시 `.plans/qa/SPRINT-017-review-2.md`
 - **설명:** 이번 Sprint의 QA는 단순 UI 확인이 아니라 운영 실패 시나리오까지 포함해야 해.
 - **done_when:**
  - Desktop / Tablet / Mobile 실브라우저 검증 기록이 있음
  - WS disconnect, JWT 없음, 데이터 없음, 긴 task 텍스트 케이스가 포함됨
  - blocker / warning / follow-up이 분리 기록됨
 ### TASK-107: 배포 전 운영 준비사항 잠금
 - **담당:** 이랑이
 - **상태:** pending
 - **산출물:**
  - `.plans/qa/SPRINT-017-release-preflight.md`
  - 필요 시 `.plans/deploy/deploy-plan.md` 보강
 - **설명:** `/office`는 WS와 env 의존성이 있어서 코드만 통과해도 운영 배포에서 무너질 수 있어. 배포 전 체크를 문서로 잠근다.
 - **done_when:**
  - `NEXT_PUBLIC_API_URL`, 필요 시 `NEXT_PUBLIC_WS_URL`, `JWT_SECRET`, `CORS_ORIGINS`, WS proxy 체크가 문서화됨
  - build/test/lint 외 운영 env 검증 항목이 분리됨
  - deploy gate 통과 조건이 문서에 명시됨
 ## 검증 시나리오
 1. 브라우저 첫 진입 시 `/office`에서 4자매 상태와 현재 focus를 5초 안에 설명할 수 있어야 해.
 2. WS 연결이 끊겨도 snapshot 또는 fallback 전환이 조용히 숨겨지지 않아야 해.
 3. 모바일에서 씬, pipeline, health, chat 중 무엇이 우선인지 일관돼야 해.
 4. direct chat이 실패했을 때 무응답처럼 보이지 않아야 해.
 5. QA 문서와 deploy preflight가 같은 기준 용어를 써야 해.
 ## 핸드오프 메모
 - 하랑이는 용어와 상태 모델을 잠그는 역할이야.
 - 나랑이는 `/office`를 운영 화면으로 만드는 역할이야.
 - 다랑이는 브라우저와 실패 시나리오를 실제로 깨보는 역할이야.
 - 이랑이는 env, WS proxy, deploy gate를 잠그는 역할이야.
 여기까지가 scope야.
--- 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/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,7 @@ 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 {
@@ -107,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/sisters/sister-detail.service.ts
+++ b/backend/src/sisters/sister-detail.service.ts
@@ -91,7 +91,7 @@ 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 sessions = result.stdout
--- a/backend/src/sisters/sisters.controller.ts
+++ b/backend/src/sisters/sisters.controller.ts
@@ -1,4 +1,12 @@
-import { Controller, Get, Param, Res, UseGuards } from '@nestjs/common';
+import {
  Body,
  Controller,
  Get,
  Param,
  Post,
  Res,
  UseGuards,
 } from '@nestjs/common';
 import type { Response } from 'express';
 import { JwtGuard } from '../auth/jwt.guard';
 import { RoleGuard, Roles } from '../auth/role.guard';
@@ -18,6 +26,11 @@ export class SistersController {
    private readonly avatarService: AvatarService,
  ) {}
  @Get('runtime')
  async getSistersRuntime() {
    return this.sistersService.getAllSistersRuntime();
  }
  @Get()
  async getSistersStatus() {
    const sisters = await this.sistersService.getAllSistersStatus();
@@ -33,6 +46,20 @@ export class SistersController {
    }));
  }
  @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) {
    const system = await this.sistersService.getSystemInfo(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,48 @@
-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 SisterStatus {
  id: number;
  name: string;
@@ -13,6 +52,28 @@ export interface SisterStatus {
  status: 'online' | 'offline' | 'working' | 'unknown';
  lastSeen: Date | null;
  currentTask: string | null;
  liveState: RuntimeState;
  activeSessionLabel: string | null;
  gatewayConnected: boolean;
  subagents: RuntimeSubagent[];
 }
 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 +83,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 +106,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 +121,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 +276,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) {
@@ -172,22 +306,448 @@ 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 ?? [],
      };
    } 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,
      user: sister.user,
      lxcId: sister.lxcId,
      role: SISTER_ROLES[sister.name] ?? 'Unknown',
      status: 'offline',
      lastSeen: sister.lastSeen,
      currentTask: null,
      liveState: 'error',
      activeSessionLabel: null,
      gatewayConnected: false,
      subagents: [],
    };
  }
  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 {
-        id: sister.id,
+        gatewayConnected: true,
-        name: sister.name,
+        mainState: 'idle',
        user: sister.user,
        lxcId: sister.lxcId,
        role: SISTER_ROLES[sister.name] ?? 'Unknown',
        status: 'offline',
        lastSeen: sister.lastSeen,
        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/frontend/app/office/page.tsx
+++ b/frontend/app/office/page.tsx
@@ -1,6 +1,6 @@
 'use client';
-import React, { useCallback, useEffect, useState } from 'react';
+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';
@@ -17,17 +17,44 @@ import PipelinePanel from '@/components/office/PipelinePanel';
 import ServerHealthPanel, { type ServerEntry } from '@/components/office/ServerHealthPanel';
 import type { PipelineNode } from '@/components/dashboard/ActivePipeline';
-// ─── Types ───────────────────────────────────────────────────────────────────
+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: string;
+  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 {
@@ -55,33 +82,31 @@ interface DashboardOpsData {
  };
 }
 // ─── Static subagent definitions ─────────────────────────────────────────────
 const SUBAGENT_DEFS: Record<SisterName, { id: string; name: string; label: string }[]> = {
  harang: [
-    { id: 'harang-planner',      name: 'planner',      label: 'planner' },
+    { 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' },
+    { id: 'harang-prd-writer', name: 'prd-writer', label: 'prd-writer' },
  ],
  narang: [
-    { id: 'narang-worker',       name: 'worker',       label: 'worker' },
+    { id: 'narang-worker', name: 'worker', label: 'worker' },
-    { id: 'narang-db-designer',  name: 'db-designer',  label: 'db-designer' },
+    { id: 'narang-db-designer', name: 'db-designer', label: 'db-designer' },
-    { id: 'narang-test-writer',  name: 'test-writer',  label: 'test-writer' },
+    { id: 'narang-test-writer', name: 'test-writer', label: 'test-writer' },
-    { id: 'narang-refactorer',   name: 'refactorer',   label: 'refactorer' },
+    { id: 'narang-refactorer', name: 'refactorer', label: 'refactorer' },
  ],
  darang: [
-    { id: 'darang-reviewer',         name: 'reviewer',         label: 'reviewer' },
+    { id: 'darang-reviewer', name: 'reviewer', label: 'reviewer' },
-    { id: 'darang-code-reviewer',    name: 'code-reviewer',    label: 'code-rvw' },
+    { id: 'darang-code-reviewer', name: 'code-reviewer', label: 'code-reviewer' },
-    { id: 'darang-qa-tester',        name: 'qa-tester',        label: 'qa-tester' },
+    { id: 'darang-qa-tester', name: 'qa-tester', label: 'qa-tester' },
-    { id: 'darang-security-auditor', name: 'security-auditor', label: 'security' },
+    { id: 'darang-security-auditor', name: 'security-auditor', label: 'security-auditor' },
-    { id: 'darang-ux-reviewer',      name: 'ux-reviewer',      label: 'ux-reviewer' },
+    { id: 'darang-ux-reviewer', name: 'ux-reviewer', label: 'ux-reviewer' },
  ],
  erang: [
-    { id: 'erang-deploy-manager', name: 'deploy-manager', label: 'deploy' },
+    { id: 'erang-deploy-manager', name: 'deploy-manager', label: 'deploy-manager' },
-    { id: 'erang-db-manager',     name: 'db-manager',     label: 'db-mgr' },
+    { id: 'erang-db-manager', name: 'db-manager', label: 'db-manager' },
-    { id: 'erang-nginx-manager',  name: 'nginx-manager',  label: 'nginx' },
+    { id: 'erang-nginx-manager', name: 'nginx-manager', label: 'nginx-manager' },
-    { id: 'erang-monitoring',     name: 'monitoring',     label: 'monitor' },
+    { id: 'erang-monitoring', name: 'monitoring', label: 'monitoring' },
-    { id: 'erang-dns-manager',    name: 'dns-manager',    label: 'dns' },
+    { id: 'erang-dns-manager', name: 'dns-manager', label: 'dns-manager' },
  ],
 };
@@ -89,48 +114,26 @@ const SISTER_DISPLAY: Record<SisterName, string> = {
  harang: '하랑이',
  narang: '나랑이',
  darang: '다랑이',
-  erang:  '이랑이',
+  erang: '이랑이',
 };
 const SISTER_ROLES: Record<SisterName, string> = {
  harang: 'Planning & Orchestration',
  narang: 'Development',
  darang: 'QA & Review',
-  erang:  'Infra & Deploy',
+  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 FALLBACK_SISTERS: SisterApiItem[] = [
-  {
+  { name: 'harang', status: 'working', role: SISTER_ROLES.harang, currentTask: 'runtime snapshot 확인 중' },
-    name: 'harang',
+  { name: 'narang', status: 'working', role: SISTER_ROLES.narang, currentTask: '개발 세션 상태 동기화 중' },
-    status: 'working',
+  { name: 'darang', status: 'online', role: SISTER_ROLES.darang, currentTask: '검증 상태 확인 중' },
-    role: SISTER_ROLES.harang,
+  { name: 'erang', status: 'online', role: SISTER_ROLES.erang, currentTask: '배포 런타임 확인 중' },
    currentTask: 'SPRINT-016 scope lock',
  },
  {
    name: 'narang',
    status: 'working',
    role: SISTER_ROLES.narang,
    currentTask: 'Office scene dynamic movement',
  },
  {
    name: 'darang',
    status: 'online',
    role: SISTER_ROLES.darang,
    currentTask: 'Review loop standby',
  },
  {
    name: 'erang',
    status: 'online',
    role: SISTER_ROLES.erang,
    currentTask: 'Gateway health watch',
  },
 ];
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 function statusToAgentState(status: SisterApiItem['status'], hasTask: boolean): AgentState {
  if (status === 'offline') return 'error';
  if (status === 'working') return hasTask ? 'tool_calling' : 'thinking';
@@ -139,34 +142,77 @@ function statusToAgentState(status: SisterApiItem['status'], hasTask: boolean):
 }
 function derivedSubagentState(parentState: AgentState, index: number): AgentState {
-  // Derive subagent state from parent with some variety
+  if (parentState === 'error') return 'idle';
  if (parentState === 'error') return 'idle'; // subagents idle when parent is offline
  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 ?? FALLBACK_SISTERS.find((item) => item.name === name)!;
    const live = runtimeMap.get(name);
    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 apiItem = sisters.find((s) => s.name === name);
+    const item = sisters.find((s) => s.name === name);
-    const status = apiItem?.status ?? 'unknown';
+    const fallbackState = statusToAgentState(item?.status ?? 'unknown', Boolean(item?.currentTask));
-    const hasTask = Boolean(apiItem?.currentTask);
+    const state = item?.gatewayConnected ? item.liveState ?? fallbackState : fallbackState;
    const parentState = statusToAgentState(status, hasTask);
-    const subDefs = SUBAGENT_DEFS[name];
+    const runtimeSubagents = item?.subagents ?? [];
-    const subagents: SubAgent[] = subDefs.map((def, i) => ({
+    const runtimeMap = new Map(runtimeSubagents.map((sub) => [sub.name, sub]));
-      ...def,
+
-      sister: name,
+    const subagents: SubAgent[] = SUBAGENT_DEFS[name].map((def, index) => {
-      state: derivedSubagentState(parentState, i),
+      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: apiItem?.role ?? SISTER_ROLES[name],
+      role: item?.role ?? SISTER_ROLES[name],
-      emoji: name === 'harang' || name === 'narang' ? '🦊' : name === 'darang' ? '🐱' : '🐺',
+      state,
-      state: parentState,
+      currentTask: item?.currentTask ?? null,
-      currentTask: apiItem?.currentTask ?? null,
+      activeSessionLabel: item?.activeSessionLabel ?? null,
      subagents,
    };
  });
@@ -174,35 +220,20 @@ function buildSisterNodes(sisters: SisterApiItem[]): SisterNode[] {
 function buildServerEntries(sisters: SisterApiItem[], sisterSource: 'live' | 'snapshot' | 'fallback'): ServerEntry[] {
  const sisterEntries: ServerEntry[] = SISTER_ORDER.map((name) => {
-    const s = sisters.find((x) => x.name === name);
+    const sister = sisters.find((item) => item.name === name);
    return {
      id: `server-${name}`,
      label: SISTER_DISPLAY[name],
      type: 'sister' as const,
-      status: s?.status ?? 'unknown',
+      status: sister?.status ?? 'unknown',
-      detail: s?.currentTask ?? null,
+      detail: sister?.currentTask ?? sister?.activeSessionLabel ?? null,
-      source: s ? sisterSource : 'fallback',
+      source: sister ? sisterSource : 'fallback',
    };
  });
  // Dev server and Docker are fallback (no direct API yet)
  const extraEntries: ServerEntry[] = [
-    {
+    { id: 'server-dev', label: 'Dev Server', type: 'dev', status: 'unknown', detail: null, source: 'fallback' },
-      id: 'server-dev',
+    { id: 'server-docker', label: 'Docker / Infra', type: 'docker', status: 'unknown', detail: null, source: 'fallback' },
      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];
@@ -216,8 +247,6 @@ function formatGeneratedAt(ts: string): string {
  }
 }
 // ─── Styled Components ────────────────────────────────────────────────────────
 const Shell = styled.div`
  display: flex;
  flex-direction: column;
@@ -259,10 +288,7 @@ const FreshnessBadge = styled.span<{ $type: 'live' | 'snapshot' | 'fallback' }>`
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
-  color: ${({ $type }) =>
+  color: ${({ $type }) => ($type === 'live' ? '#00BFA5' : $type === 'snapshot' ? '#FF9800' : '#777')};
    $type === 'live'     ? '#00BFA5'
    : $type === 'snapshot' ? '#FF9800'
    : '#555'};
  border: 1px solid currentColor;
  padding: 2px 6px;
  opacity: 0.8;
@@ -314,76 +340,72 @@ const LoadingOverlay = styled.div`
  letter-spacing: 0.08em;
 `;
 // ─── Main Component ───────────────────────────────────────────────────────────
 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);
  // Live WebSocket connection
  const { connected } = useSocket<SisterApiItem>({
-    onSistersUpdate: (updatedSisters) => {
+    onSistersUpdate: (updated) => {
-      setSisters(updatedSisters);
+      setSisters((prev) => mergeSisterData(updated, [], prev));
    },
  });
-  // Initial data fetch
+  const fetchAll = useCallback(async () => {
-  useEffect(() => {
+    const [sistersRes, opsRes, runtimeRes] = await Promise.allSettled([
-    const fetchAll = async () => {
+      fetch(`${API_URL}/api/sisters`).then((r) => r.json()),
-      try {
+      fetch(`${API_URL}/api/dashboard/ops`).then((r) => r.json()),
-        const [sistersRes, opsRes] = await Promise.allSettled([
+      fetch(`${API_URL}/api/sisters/runtime`).then((r) => r.json()),
-          fetch(`${API_URL}/api/sisters`).then((r) => r.json()),
+    ]);
          fetch(`${API_URL}/api/dashboard/ops`).then((r) => r.json()),
        ]);
-        if (sistersRes.status === 'fulfilled') {
+    setSisters((prev) => {
-          setSisters(Array.isArray(sistersRes.value) ? sistersRes.value : []);
+      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[] : [];
-        if (opsRes.status === 'fulfilled') {
+      return mergeSisterData(base, runtime, prev);
-          setOpsData(opsRes.value);
+    });
-        }
+
    if (opsRes.status === 'fulfilled') {
      setOpsData(opsRes.value as DashboardOpsData);
    }
  }, []);
  useEffect(() => {
    const boot = async () => {
      try {
        await fetchAll();
      } finally {
        setLoading(false);
      }
    };
-    void fetchAll();
+    void boot();
-    // Fix #3: Polling only when socket is not connected
+    // Polling fallback — only when socket is disconnected
    // Socket handles live updates; polling is a disconnected fallback
    return () => {};
-  }, []);
+  }, [fetchAll]);
  // Polling fallback — only when socket is disconnected
  useEffect(() => {
    if (connected) return; // socket is live, no polling needed
    const interval = setInterval(() => {
-      fetch(`${API_URL}/api/sisters`)
+      void fetchAll();
        .then((r) => r.json())
        .then((data: SisterApiItem[]) => {
          if (Array.isArray(data)) setSisters(data);
        })
        .catch(() => {/* ignore polling errors */});
    }, POLL_INTERVAL_MS);
    return () => clearInterval(interval);
-  }, [connected]);
+  }, [connected, fetchAll]);
  const hasSisterSnapshot = sisters.length > 0;
-  const sisterDataMode: 'live' | 'snapshot' | 'fallback' = connected
+  const sisterDataMode: 'live' | 'snapshot' | 'fallback' = connected ? 'live' : hasSisterSnapshot ? 'snapshot' : 'fallback';
    ? '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 sisterNodes = buildSisterNodes(effectiveSisters);
+  const subagentMode: 'live' | 'fallback' = useMemo(() => {
-  const serverEntries = buildServerEntries(effectiveSisters, sisterDataMode);
+    return effectiveSisters.some((item) => (item.subagents?.length ?? 0) > 0) ? 'live' : 'fallback';
  }, [effectiveSisters]);
  const handleSelectSister = useCallback((name: SisterName) => {
    setSelected({ type: 'sister', name });
@@ -399,17 +421,9 @@ export default function OfficePage() {
    setChatSister(sisterName);
  }, []);
  const handleCloseChat = useCallback(() => {
    setChatSister(null);
  }, []);
  const handleClearSelection = useCallback(() => {
    setSelected(null);
  }, []);
  const pipeline = opsData?.pipeline ?? {
    activeTask: 'SPRINT-016',
-    focus: 'Isometric Office Dashboard',
+    focus: 'Office runtime sync',
    reviewLoopCount: 0,
    escalationCount: 0,
    deployState: '—',
@@ -436,12 +450,10 @@ export default function OfficePage() {
          <FreshnessBadge $type={sisterDataMode}>
            자매: {sisterDataMode === 'live' ? 'live · ws' : sisterDataMode === 'snapshot' ? 'snapshot · poll' : 'fallback · doc'}
          </FreshnessBadge>
-          <FreshnessBadge $type="fallback">
+          <FreshnessBadge $type={subagentMode === 'live' ? 'live' : 'fallback'}>
-            서브에이전트: fallback
+            서브에이전트: {subagentMode === 'live' ? 'live · runtime' : 'fallback'}
          </FreshnessBadge>
          <FreshnessBadge $type="snapshot">
            pipeline: snapshot
          </FreshnessBadge>
          <FreshnessBadge $type="snapshot">pipeline: snapshot</FreshnessBadge>
        </FreshnessBar>
      </PageHeader>
@@ -453,14 +465,12 @@ export default function OfficePage() {
            onSelectSister={handleSelectSister}
            onSelectSubagent={handleSelectSubagent}
            dataMode={sisterDataMode}
            subagentMode={subagentMode}
          />
          {chatSister && (
            <ChatArea>
-              <ChatWorkspace
+              <ChatWorkspace initialSister={chatSister} onClose={() => setChatSister(null)} />
                initialSister={chatSister}
                onClose={handleCloseChat}
              />
            </ChatArea>
          )}
        </SceneColumn>
@@ -469,7 +479,7 @@ export default function OfficePage() {
          selected={selected}
          sisters={sisterNodes}
          onOpenChat={handleOpenChat}
-          onClear={handleClearSelection}
+          onClear={() => setSelected(null)}
        />
      </MainArea>
--- 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
@@ -2,9 +2,25 @@
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import styled, { keyframes } from 'styled-components';
-import type { SisterName } from './OfficeScene';
+import SisterAvatar from '@/components/common/SisterAvatar';
 import { API_URL } from '@/lib/config';
 import type { SisterName, AgentState } from './OfficeScene';
-// ─── Types ───────────────────────────────────────────────────────────────────
+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;
@@ -19,40 +35,27 @@ interface ChatWorkspaceProps {
  onClose: () => void;
 }
 // ─── Static data ──────────────────────────────────────────────────────────────
 const SISTER_DISPLAY: Record<SisterName, string> = {
  harang: '하랑이',
  narang: '나랑이',
  darang: '다랑이',
-  erang:  '이랑이',
+  erang: '이랑이',
 };
 const SISTER_EMOJIS: 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',
+  erang: 'Infra & Deploy',
 };
 const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
 // ─── Animations ──────────────────────────────────────────────────────────────
 const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(4px); }
-  to   { opacity: 1; transform: translateY(0); }
+  to { opacity: 1; transform: translateY(0); }
 `;
 // ─── Styled Components ────────────────────────────────────────────────────────
 const Workspace = styled.div`
  display: flex;
  height: 100%;
@@ -65,7 +68,6 @@ const Workspace = styled.div`
  }
 `;
 // Left sidebar - sister tabs
 const SisterTabs = styled.nav`
  width: 200px;
  flex-shrink: 0;
@@ -125,11 +127,6 @@ const SisterTab = styled.button<{ $active: boolean }>`
  }
 `;
 const TabEmoji = styled.span`
  font-size: 16px;
  line-height: 1;
 `;
 const TabMeta = styled.div`
  display: flex;
  flex-direction: column;
@@ -150,7 +147,6 @@ const TabRole = styled.div`
  }
 `;
 // Center - message timeline
 const MessageArea = styled.div`
  flex: 1;
  display: flex;
@@ -167,10 +163,6 @@ const MessageHeader = styled.div`
  flex-shrink: 0;
 `;
 const HeaderEmoji = styled.span`
  font-size: 20px;
 `;
 const HeaderMeta = styled.div`
  flex: 1;
 `;
@@ -186,11 +178,11 @@ const HeaderRole = styled.div`
  color: var(--text-secondary);
 `;
-const HeaderBadge = styled.div`
+const HeaderBadge = styled.div<{ $ok: boolean }>`
  font-family: var(--font-mono);
  font-size: 10px;
-  color: var(--text-secondary);
+  color: ${({ $ok }) => ($ok ? '#00BFA5' : 'var(--text-secondary)')};
-  border: 1px solid var(--border-color);
+  border: 1px solid currentColor;
  padding: 2px var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
@@ -209,7 +201,7 @@ const MessageBubble = styled.div<{ $role: ChatMessage['role'] }>`
  display: flex;
  flex-direction: column;
  gap: 4px;
-  align-items: ${({ $role }) => $role === 'user' ? 'flex-end' : 'flex-start'};
+  align-items: ${({ $role }) => ($role === 'user' ? 'flex-end' : 'flex-start')};
  animation: ${fadeIn} 0.2s ease;
 `;
@@ -223,15 +215,15 @@ const BubbleContent = styled.div<{ $role: ChatMessage['role'] }>`
    $role === 'user'
      ? 'rgba(255,255,255,0.06)'
      : $role === 'tool'
-      ? 'rgba(255, 152, 0, 0.06)'
+        ? 'rgba(255, 152, 0, 0.06)'
-      : 'rgba(255,255,255,0.02)'};
+        : '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,152,0,0.2)'
-      : 'rgba(255,255,255,0.06)'};
+        : 'rgba(255,255,255,0.06)'};
-  font-family: ${({ $role }) => $role === 'tool' ? 'var(--font-mono)' : 'inherit'};
+  font-family: ${({ $role }) => ($role === 'tool' ? 'var(--font-mono)' : 'inherit')};
 `;
 const BubbleMeta = styled.div`
@@ -241,16 +233,6 @@ const BubbleMeta = styled.div`
  opacity: 0.6;
 `;
 const ToolCallBadge = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #FF9800;
  margin-bottom: 2px;
 `;
 const EmptyTimeline = styled.div`
  flex: 1;
  display: flex;
@@ -263,7 +245,7 @@ const EmptyTimeline = styled.div`
  text-align: center;
 `;
-const GatewayNotice = styled.div`
+const RuntimeNotice = styled.div`
  border: 1px solid var(--border-color);
  padding: var(--space-md);
  font-family: var(--font-mono);
@@ -272,11 +254,10 @@ const GatewayNotice = styled.div`
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.7;
-  max-width: 280px;
+  max-width: 320px;
  text-align: center;
 `;
 // Input area
 const InputArea = styled.div`
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-color);
@@ -298,7 +279,6 @@ const MessageInput = styled.textarea`
  min-height: 40px;
  max-height: 120px;
  line-height: 1.5;
  transition: border-color 0.15s;
  &:focus {
    outline: none;
@@ -341,13 +321,12 @@ const InputMeta = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
-  opacity: 0.5;
+  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
 `;
 // Right - sister context
 const SisterContext = styled.aside`
  width: 220px;
  flex-shrink: 0;
@@ -391,7 +370,6 @@ const CtxMono = styled.div`
  color: var(--text-secondary);
 `;
 // Close button
 const CloseBtn = styled.button`
  border: 1px solid var(--border-color);
  background: transparent;
@@ -403,7 +381,6 @@ const CloseBtn = styled.button`
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 0.15s;
  &:hover {
    border-color: var(--border-hover);
@@ -411,8 +388,6 @@ const CloseBtn = styled.button`
  }
 `;
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 function formatTs(ts: string): string {
  const date = new Date(ts);
  const diff = Date.now() - date.getTime();
@@ -424,84 +399,173 @@ function formatTs(ts: string): string {
  return `${Math.floor(hr / 24)}일 전`;
 }
-// ─── Component ────────────────────────────────────────────────────────────────
+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';
 }
 function getToken(): string {
  if (typeof window === 'undefined') return '';
  return localStorage.getItem('hanarang_access_token') ?? '';
 }
 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);
  // Per-sister message maps avoid setState-in-effect for clearing on switch
  const [allMessages, setAllMessages] = useState<Partial<Record<SisterName, ChatMessage[]>>>({});
-  // Fix #2: Per-sister draft — prevents input leaking across tabs
+  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;
  const hasToken = Boolean(getToken());
-  const setMessages = useCallback(
+  useEffect(() => {
-    (updater: (prev: ChatMessage[]) => ChatMessage[]) => {
+    setActiveSister(initialSister);
-      setAllMessages((prev) => ({
+  }, [initialSister]);
        ...prev,
        [activeSister]: updater(prev[activeSister] ?? []),
      }));
    },
    [activeSister],
  );
  // Scroll to bottom on new messages
  useEffect(() => {
    if (timelineRef.current) {
      timelineRef.current.scrollTop = timelineRef.current.scrollHeight;
    }
  }, [messages]);
-  // Fix #1: Use crypto.randomUUID for optimistic ids; reconcile with server id later
+  const setMessages = useCallback((sister: SisterName, updater: (prev: ChatMessage[]) => ChatMessage[]) => {
-  // Fix #2: Clear only the active sister's draft
+    setAllMessages((prev) => ({
-  const handleSend = useCallback(() => {
+      ...prev,
-    const text = input.trim();
+      [sister]: updater(prev[sister] ?? []),
-    if (!text) return;
+    }));
  }, []);
-    const optimisticId = `opt-${crypto.randomUUID()}`;
+  const loadRuntime = useCallback(async (sister: SisterName) => {
-    const userMsg: ChatMessage = {
+    try {
-      id: optimisticId,
+      const res = await fetch(`${API_URL}/api/sisters/${sister}/runtime`);
      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;
    const token = getToken();
    if (!token) {
      setMessages(activeSister, (prev) => mergeMessages(prev, [{
        id: `sys-${crypto.randomUUID()}`,
        role: 'assistant',
        content: '로그인이 풀린 것 같아. 다시 로그인한 뒤 시도해줘.',
        ts: new Date().toISOString(),
      }]));
      return;
    }
    const userMessage: ChatMessage = {
      id: `user-${crypto.randomUUID()}`,
      role: 'user',
      content: text,
      ts: new Date().toISOString(),
    };
-    setMessages((prev) => [...prev, userMsg]);
+    setMessages(activeSister, (prev) => mergeMessages(prev, [userMessage]));
    setDrafts((prev) => ({ ...prev, [activeSister]: '' }));
    setSending(true);
-    // Gateway connection pending — show system notice
+    try {
-    setTimeout(() => {
+      const res = await fetch(`${API_URL}/api/sisters/${activeSister}/chat`, {
-      const sysMsg: ChatMessage = {
+        method: 'POST',
-        id: `sys-${crypto.randomUUID()}`,
+        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({ message: text }),
      });
      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: `[Gateway 연결 대기] ${SISTER_DISPLAY[activeSister]} OpenClaw Gateway가 아직 연결되지 않았습니다. 직접 채팅 기능은 Gateway WebSocket 연결 후 활성화됩니다.`,
+        content: `전송 실패: ${message}`,
        ts: new Date().toISOString(),
-      };
+      }]));
-      setMessages((prev) => [...prev, sysMsg]);
+    } finally {
-    }, 400);
+      setSending(false);
-  }, [activeSister, input, setMessages]);
+    }
  }, [activeSister, input, loadRuntime, sending, setMessages]);
  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
-      handleSend();
+      void handleSend();
    }
  };
  return (
    <Workspace>
      {/* Left: sister tabs */}
      <SisterTabs>
        <SisterTabHeader>direct chat</SisterTabHeader>
        {SISTER_ORDER.map((name) => (
-          <SisterTab
+          <SisterTab key={name} $active={activeSister === name} onClick={() => setActiveSister(name)}>
-            key={name}
+            <SisterAvatar name={name} size={22} />
            $active={activeSister === name}
            onClick={() => setActiveSister(name)}
          >
            <TabEmoji>{SISTER_EMOJIS[name]}</TabEmoji>
            <TabMeta>
              <TabName>{SISTER_DISPLAY[name]}</TabName>
              <TabRole>{SISTER_ROLES[name].split(' ')[0]}</TabRole>
@@ -510,35 +574,33 @@ export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceP
        ))}
      </SisterTabs>
      {/* Center: message timeline */}
      <MessageArea>
        <MessageHeader>
-          <HeaderEmoji>{SISTER_EMOJIS[activeSister]}</HeaderEmoji>
+          <SisterAvatar name={activeSister} size={28} />
          <HeaderMeta>
            <HeaderName>{SISTER_DISPLAY[activeSister]}</HeaderName>
            <HeaderRole>{SISTER_ROLES[activeSister]}</HeaderRole>
          </HeaderMeta>
-          <HeaderBadge>Gateway 대기</HeaderBadge>
+          <HeaderBadge $ok={Boolean(runtime?.gatewayConnected)}>
            {runtime?.gatewayConnected ? 'Runtime 연결됨' : 'Runtime 확인 중'}
          </HeaderBadge>
          <CloseBtn onClick={onClose}>✕ 닫기</CloseBtn>
        </MessageHeader>
        <Timeline ref={timelineRef}>
          {messages.length === 0 ? (
            <EmptyTimeline>
-              <div>{SISTER_EMOJIS[activeSister]}</div>
+              <SisterAvatar name={activeSister} size={32} />
-              <div>{SISTER_DISPLAY[activeSister]}에게 메시지를 보내세요.</div>
+              <div>{SISTER_DISPLAY[activeSister]}에게 메시지를 보내봐.</div>
-              <GatewayNotice>
+              <RuntimeNotice>
-                openclaw gateway 연결 대기 중<br />
+                {runtime?.gatewayConnected
-                메시지 입력은 가능하나<br />
+                  ? '직접 채팅이 자매 runtime으로 연결돼 있어. 입력하면 바로 전달돼.'
-                실시간 응답은 gateway 연결 후 활성화
+                  : 'runtime 상태를 확인 중이야. 연결이 느려도 메시지는 다시 시도할 수 있어.'}
-              </GatewayNotice>
+              </RuntimeNotice>
            </EmptyTimeline>
          ) : (
            messages.map((msg) => (
              <MessageBubble key={msg.id} $role={msg.role}>
                {msg.role === 'tool' && (
                  <ToolCallBadge>🔧 tool · {msg.toolName}</ToolCallBadge>
                )}
                <BubbleContent $role={msg.role}>{msg.content}</BubbleContent>
                <BubbleMeta>{formatTs(msg.ts)}</BubbleMeta>
              </MessageBubble>
@@ -547,61 +609,48 @@ export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceP
        </Timeline>
        <InputMeta>
-          shift+enter = 줄바꿈 · enter = 전송 · gateway: 연결 대기
+          shift+enter = 줄바꿈 · enter = 전송 · runtime: {runtime ? runtimeStateLabel(runtime.mainState) : 'loading'}
        </InputMeta>
        <InputArea>
          <MessageInput
-            placeholder={`${SISTER_DISPLAY[activeSister]}에게 지시하세요...`}
+            placeholder={`${SISTER_DISPLAY[activeSister]}에게 지시해...`}
            value={input}
            onChange={(e) => setDrafts((prev) => ({ ...prev, [activeSister]: e.target.value }))}
            onKeyDown={handleKeyDown}
            rows={1}
          />
-          <SendBtn onClick={handleSend} disabled={!input.trim()}>
+          <SendBtn onClick={() => void handleSend()} disabled={!input.trim() || sending || !hasToken}>
-            전송
+            {sending ? '전송 중' : '전송'}
          </SendBtn>
        </InputArea>
      </MessageArea>
      {/* Right: sister context */}
      <SisterContext>
        <ContextSection>
          <CtxLabel>agent</CtxLabel>
-          <CtxValue>
+          <CtxValue>{SISTER_DISPLAY[activeSister]}</CtxValue>
            {SISTER_EMOJIS[activeSister]} {SISTER_DISPLAY[activeSister]}
          </CtxValue>
          <CtxMono>{SISTER_ROLES[activeSister]}</CtxMono>
        </ContextSection>
        <ContextSection>
          <CtxLabel>채팅 상태</CtxLabel>
-          <CtxValue>Gateway 연결 대기</CtxValue>
+          <CtxValue>{runtime?.gatewayConnected ? 'Runtime 연결됨' : 'Runtime 확인 중'}</CtxValue>
-          <CtxMono>openclaw websocket</CtxMono>
+          <CtxMono>{runtime ? runtimeStateLabel(runtime.mainState) : 'loading'}</CtxMono>
        </ContextSection>
        <ContextSection>
          <CtxLabel>data source</CtxLabel>
          <CtxMono>
-            live: ws (pending)<br />
+            control: ssh → openclaw agent
-            fallback: ui-only
+            <br />
            activity: runtime session snapshot
          </CtxMono>
        </ContextSection>
        <ContextSection>
-          <CtxLabel>상세</CtxLabel>
+          <CtxLabel>current task</CtxLabel>
-          <CtxValue>
+          <CtxValue>{runtime?.currentTask ?? runtime?.activeSessionLabel ?? '작업 정보 없음'}</CtxValue>
            <a
              href={`/sisters/${activeSister}`}
              style={{
                color: 'var(--text-secondary)',
                textDecoration: 'none',
                fontSize: '12px',
              }}
            >
              → 자매 상세 보기
            </a>
          </CtxValue>
        </ContextSection>
      </SisterContext>
    </Workspace>
--- a/frontend/components/office/ContextPanel.tsx
+++ b/frontend/components/office/ContextPanel.tsx
@@ -3,10 +3,9 @@
 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';
 // ─── Types ───────────────────────────────────────────────────────────────────
 interface ContextPanelProps {
  selected: SelectedAgent | null;
  sisters: SisterNode[];
@@ -14,8 +13,6 @@ interface ContextPanelProps {
  onClear: () => void;
 }
 // ─── Styled Components ────────────────────────────────────────────────────────
 const Panel = styled.aside`
  width: 300px;
  flex-shrink: 0;
@@ -33,7 +30,7 @@ const Panel = styled.aside`
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border-color);
-    max-height: 220px;
+    max-height: 260px;
  }
 `;
@@ -91,10 +88,11 @@ const AgentHeader = styled.div`
  gap: var(--space-md);
 `;
-const AgentEmoji = styled.div`
+const AgentAvatarWrap = styled.div`
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
 `;
 const AgentMeta = styled.div`
@@ -279,40 +277,27 @@ const FallbackNote = styled.div`
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
-  opacity: 0.5;
+  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
 `;
 // ─── Sister display data ──────────────────────────────────────────────────────
 const SISTER_EMOJIS: Record<SisterName, string> = {
  harang: '🦊',
  narang: '🦊',
  darang: '🐱',
  erang:  '🐺',
 };
 const SISTER_DISPLAY: Record<SisterName, string> = {
  harang: '하랑이',
  narang: '나랑이',
  darang: '다랑이',
-  erang:  '이랑이',
+  erang: '이랑이',
 };
-// ─── Component ────────────────────────────────────────────────────────────────
+function SisterDetail({ sister, onOpenChat }: { sister: SisterNode; onOpenChat: (name: SisterName) => void }) {
  const hasLiveSubagentState = sister.subagents.some((item) => item.sessionLabel || item.currentTask || item.updatedAt);
 function SisterDetail({
  sister,
  onOpenChat,
 }: {
  sister: SisterNode;
  onOpenChat: (name: SisterName) => void;
 }) {
  return (
    <>
      <AgentHeader>
-        <AgentEmoji>{SISTER_EMOJIS[sister.name]}</AgentEmoji>
+        <AgentAvatarWrap>
          <SisterAvatar name={sister.name} size={40} />
        </AgentAvatarWrap>
        <AgentMeta>
          <AgentName>{SISTER_DISPLAY[sister.name]}</AgentName>
          <AgentRole>{sister.role}</AgentRole>
@@ -325,10 +310,10 @@ function SisterDetail({
        <StateLabel $state={sister.state}>{sister.state}</StateLabel>
      </StateRow>
-      {sister.currentTask && (
+      {(sister.currentTask || sister.activeSessionLabel) && (
        <Section>
          <SectionLabel>current task</SectionLabel>
-          <CurrentTaskBox>{sister.currentTask}</CurrentTaskBox>
+          <CurrentTaskBox>{sister.currentTask ?? sister.activeSessionLabel ?? '작업 정보 없음'}</CurrentTaskBox>
        </Section>
      )}
@@ -343,16 +328,12 @@ function SisterDetail({
            </SubagentRow>
          ))}
        </SubagentGrid>
-        <FallbackNote>subagent state: fallback</FallbackNote>
+        <FallbackNote>{hasLiveSubagentState ? 'subagent state: live runtime' : 'subagent state: fallback'}</FallbackNote>
      </Section>
      <ActionRow>
-        <ActionBtn onClick={() => onOpenChat(sister.name)}>
+        <ActionBtn onClick={() => onOpenChat(sister.name)}>채팅</ActionBtn>
-          채팅
+        <ActionLink href={`/sisters/${sister.name}`}>상세</ActionLink>
        </ActionBtn>
        <ActionLink href={`/sisters/${sister.name}`}>
          상세
        </ActionLink>
      </ActionRow>
    </>
  );
@@ -367,10 +348,14 @@ function SubagentDetail({
  sister: SisterNode;
  onOpenChat: (name: SisterName) => void;
 }) {
  const liveNote = sub.sessionLabel || sub.currentTask || sub.updatedAt;
  return (
    <>
      <AgentHeader>
-        <AgentEmoji>🤖</AgentEmoji>
+        <AgentAvatarWrap>
          <SisterAvatar name={sister.name} size={40} />
        </AgentAvatarWrap>
        <AgentMeta>
          <AgentName>{sub.label}</AgentName>
          <AgentRole>{sub.name}</AgentRole>
@@ -385,62 +370,44 @@ function SubagentDetail({
      <Section>
        <SectionLabel>parent</SectionLabel>
-        <SectionValue>
+        <SectionValue>{SISTER_DISPLAY[sister.name]} · {sister.role}</SectionValue>
          {SISTER_EMOJIS[sister.name]} {SISTER_DISPLAY[sister.name]} · {sister.role}
        </SectionValue>
      </Section>
-      <FallbackNote>subagent state: fallback · no direct api</FallbackNote>
+      {(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)}>
+        <ActionBtn onClick={() => onOpenChat(sister.name)}>{SISTER_DISPLAY[sister.name]} 채팅</ActionBtn>
-          {SISTER_DISPLAY[sister.name]} 채팅
+        <ActionLink href={`/sisters/${sister.name}`}>자매 상세</ActionLink>
        </ActionBtn>
        <ActionLink href={`/sisters/${sister.name}`}>
          자매 상세
        </ActionLink>
      </ActionRow>
    </>
  );
 }
-export default function ContextPanel({
+export default function ContextPanel({ selected, sisters, onOpenChat, onClear }: ContextPanelProps) {
  selected,
  sisters,
  onOpenChat,
  onClear,
 }: ContextPanelProps) {
  const getSister = (name: SisterName) => sisters.find((s) => s.name === name);
  let content: React.ReactNode = (
    <EmptyState>
-      에이전트를 선택하면<br />
+      에이전트를 선택하면
      <br />
      상세 정보가 표시됩니다.
    </EmptyState>
  );
  if (selected?.type === 'sister') {
-    const sisterData = getSister(selected.name);
+    const sister = getSister(selected.name);
-    if (sisterData) {
+    if (sister) content = <SisterDetail sister={sister} onOpenChat={onOpenChat} />;
      content = (
        <SisterDetail
          sister={sisterData}
          onOpenChat={onOpenChat}
        />
      );
    }
  } else if (selected?.type === 'subagent') {
-    const sisterData = getSister(selected.sister);
+    const sister = getSister(selected.sister);
-    const subData = sisterData?.subagents.find((s) => s.id === selected.id);
+    const sub = sister?.subagents.find((item) => item.id === selected.id);
-    if (sisterData && subData) {
+    if (sister && sub) content = <SubagentDetail sub={sub} sister={sister} onOpenChat={onOpenChat} />;
      content = (
        <SubagentDetail
          sub={subData}
          sister={sisterData}
          onOpenChat={onOpenChat}
        />
      );
    }
  }
  return (
--- a/frontend/components/office/OfficeScene.tsx
+++ b/frontend/components/office/OfficeScene.tsx
@@ -2,8 +2,7 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
-
+import { API_URL } from '@/lib/config';
 // ─── Types ───────────────────────────────────────────────────────────────────
 export type AgentState = 'idle' | 'thinking' | 'tool_calling' | 'speaking' | 'error';
 export type SisterName = 'harang' | 'narang' | 'darang' | 'erang';
@@ -14,15 +13,18 @@ export interface SubAgent {
  label: string;
  sister: SisterName;
  state: AgentState;
  currentTask?: string | null;
  updatedAt?: number | null;
  sessionLabel?: string | null;
 }
 export interface SisterNode {
  name: SisterName;
  displayName: string;
  role: string;
  emoji: string;
  state: AgentState;
  currentTask: string | null;
  activeSessionLabel?: string | null;
  subagents: SubAgent[];
 }
@@ -36,10 +38,9 @@ interface OfficeSceneProps {
  onSelectSister: (name: SisterName) => void;
  onSelectSubagent: (id: string, sister: SisterName) => void;
  dataMode: 'live' | 'snapshot' | 'fallback';
  subagentMode: 'live' | 'fallback';
 }
 // ─── Styled wrappers ──────────────────────────────────────────────────────────
 const SceneWrapper = styled.div`
  position: relative;
  width: 100%;
@@ -73,68 +74,60 @@ const WsDot = styled.span<{ $connected: boolean }>`
  vertical-align: middle;
 `;
 // ─── SVG constants ────────────────────────────────────────────────────────────
 const VB_W = 800;
 const VB_H = 460;
 type Point = [number, number];
 // Zone rects [x, y, w, h]
 const ZONES = {
-  harang: [5,   5,   345, 200] as const,
+  harang: [5, 5, 345, 200] as const,
-  darang: [450, 5,   345, 200] as const,
+  darang: [450, 5, 345, 200] as const,
-  narang: [5,   260, 345, 195] as const,
+  narang: [5, 260, 345, 195] as const,
-  erang:  [450, 260, 345, 195] as const,
+  erang: [450, 260, 345, 195] as const,
 };
 // Sister desk center positions
 const SISTER_POS: Record<SisterName, [number, number]> = {
-  harang: [75,  105],
+  harang: [75, 105],
  darang: [725, 105],
-  narang: [75,  358],
+  narang: [75, 358],
-  erang:  [725, 358],
+  erang: [725, 358],
 };
 // Conference room
 const CONF = { cx: 400, cy: 232, rx: 55, ry: 30 };
 // Subagent grid positions (cx, cy) per sister
 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]],
+  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]],
+  erang: [[618, 322], [664, 298], [702, 286], [610, 388], [664, 380]],
 };
 // Zone accent colors
 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)',
+  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)',
+  erang: 'rgba(255, 109, 0, 0.25)',
 };
 // State ring colors
 const STATE_COLORS: Record<AgentState, string> = {
-  idle:        '#444444',
+  idle: '#444444',
-  thinking:    '#2979FF',
+  thinking: '#2979FF',
-  tool_calling:'#FF9800',
+  tool_calling: '#FF9800',
-  speaking:    '#00BFA5',
+  speaking: '#00BFA5',
-  error:       '#FF1744',
+  error: '#FF1744',
 };
 const STATE_PROGRESS: Record<AgentState, number> = {
@@ -161,44 +154,46 @@ function getSubagentPosition(sister: SisterName, index: number, state: AgentStat
 function getSubagentMotion(state: AgentState, index: number): { dx: number; dy: number; dur: string } | null {
  const phase = index % 2 === 0 ? 1 : -1;
-  if (state === 'thinking') {
+  if (state === 'thinking') return { dx: 5 * phase, dy: -6, dur: '3.6s' };
-    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' };
  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;
 }
 // ─── Helper: AgentCircle (rendered as SVG group) ──────────────────────────────
 function SisterCircle({
-  cx, cy, r, state, emoji, selected, onClick,
+  cx,
  cy,
  r,
  state,
  name,
  selected,
  onClick,
 }: {
-  cx: number; cy: number; r: number;
+  cx: number;
-  state: AgentState; emoji: string; selected: boolean;
+  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={`${emoji} sister — state: ${state}`}
+      aria-label={`${name} — state: ${state}`}
      onClick={onClick}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } }}
      style={{ cursor: 'pointer', outline: 'none' }}
    >
      {/* Outer selection ring */}
      {selected && (
        <circle
-          cx={cx} cy={cy} r={r + 8}
+          cx={cx}
          cy={cy}
          r={r + 8}
          fill="none"
          stroke="var(--text-primary)"
          strokeWidth={1}
@@ -206,45 +201,40 @@ function SisterCircle({
          opacity={0.6}
        />
      )}
      {/* State ring */}
      <circle
-        cx={cx} cy={cy} r={r + 4}
+        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
+          <animate attributeName="opacity" values="0.45;1;0.45" dur="1.8s" repeatCount="indefinite" />
            attributeName="opacity"
            values="0.45;1;0.45"
            dur="1.8s"
            repeatCount="indefinite"
          />
        )}
        {state === 'tool_calling' && (
-          <animate
+          <animate attributeName="stroke-opacity" values="1;0.2;1" dur="0.9s" repeatCount="indefinite" />
            attributeName="stroke-opacity"
            values="1;0.2;1"
            dur="0.9s"
            repeatCount="indefinite"
          />
        )}
      </circle>
      {/* Body */}
      <circle cx={cx} cy={cy} r={r} fill="#1e1e1e" stroke={color} strokeWidth={1} />
-      {/* Emoji */}
+      <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 + 7}
+        x={cx}
-        textAnchor="middle"
+        y={cy + r + 16}
        fontSize={r * 0.9}
        style={{ userSelect: 'none', pointerEvents: 'none' }}
      >
        {emoji}
      </text>
      {/* State label below */}
      <text
        x={cx} y={cy + r + 16}
        textAnchor="middle"
        fontSize={9}
        fontFamily="var(--font-mono)"
@@ -258,15 +248,28 @@ function SisterCircle({
 }
 function SubagentCircle({
-  cx, cy, r, state, label, selected, motion, motionBegin, onClick,
+  cx,
  cy,
  r,
  state,
  label,
  selected,
  motion,
  motionBegin,
  onClick,
 }: {
-  cx: number; cy: number; r: number;
+  cx: number;
-  state: AgentState; label: string; selected: boolean;
+  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"
@@ -289,23 +292,15 @@ function SubagentCircle({
      {selected && (
        <circle cx={cx} cy={cy} r={r + 5} fill="none" stroke="var(--text-primary)" strokeWidth={1} opacity={0.5} />
      )}
-      <circle
+      <circle cx={cx} cy={cy} r={r + 2} fill="none" stroke={color} strokeWidth={1} opacity={state === 'idle' ? 0.3 : 0.8}>
        cx={cx} cy={cy} r={r + 2}
        fill="none" stroke={color} strokeWidth={1}
        opacity={state === 'idle' ? 0.3 : 0.8}
      >
        {state === 'thinking' && (
-          <animate
+          <animate attributeName="opacity" values="0.35;0.95;0.35" dur="2s" repeatCount="indefinite" />
            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}
+        x={cx}
        y={cy + 4}
        textAnchor="middle"
        fontSize={8}
        fontFamily="var(--font-mono)"
@@ -313,42 +308,30 @@ function SubagentCircle({
        opacity={0.9}
        style={{ userSelect: 'none', pointerEvents: 'none' }}
      >
-        {label.length > 8 ? label.slice(0, 7) + '…' : label}
+        {label.length > 8 ? `${label.slice(0, 7)}…` : label}
      </text>
    </g>
  );
 }
-function ConnectorLine({
+function ConnectorLine({ x1, y1, x2, y2, active }: { x1: number; y1: number; x2: number; y2: number; active: boolean }) {
  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}
+      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 && (
+      {active && <animate attributeName="stroke-dashoffset" values="40;0" dur="1.4s" repeatCount="indefinite" />}
        <animate
          attributeName="stroke-dashoffset"
          values="40;0"
          dur="1.4s"
          repeatCount="indefinite"
        />
      )}
    </line>
  );
 }
-function PathConnector({
+function PathConnector({ d, active }: { d: string; active: boolean }) {
  d, active,
 }: {
  d: string; active: boolean;
 }) {
  return (
    <path
      d={d}
@@ -358,27 +341,11 @@ function PathConnector({
      strokeDasharray={active ? '6 4' : '3 4'}
      strokeDashoffset={active ? 40 : 0}
    >
-      {active && (
+      {active && <animate attributeName="stroke-dashoffset" values="40;0" dur="1.8s" repeatCount="indefinite" />}
        <animate
          attributeName="stroke-dashoffset"
          values="40;0"
          dur="1.8s"
          repeatCount="indefinite"
        />
      )}
    </path>
  );
 }
 // ─── Main Component ───────────────────────────────────────────────────────────
 const SISTER_EMOJIS: Record<SisterName, string> = {
  harang: '🦊',
  narang: '🦊',
  darang: '🐱',
  erang:  '🐺',
 };
 const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
 export default function OfficeScene({
@@ -387,6 +354,7 @@ export default function OfficeScene({
  onSelectSister,
  onSelectSubagent,
  dataMode,
  subagentMode,
 }: OfficeSceneProps) {
  const getSister = useCallback(
    (name: SisterName) => sisters.find((s) => s.name === name),
@@ -395,161 +363,101 @@ export default function OfficeScene({
  const isActive = useCallback(
    (name: SisterName) => {
-      const s = getSister(name);
+      const sister = getSister(name);
-      return s?.state === 'thinking' || s?.state === 'tool_calling' || s?.state === 'speaking';
+      return sister?.state === 'thinking' || sister?.state === 'tool_calling' || sister?.state === 'speaking';
    },
    [getSister],
  );
-  const isSisterSelected = (name: SisterName) =>
+  const isSisterSelected = (name: SisterName) => selected?.type === 'sister' && selected.name === name;
-    selected?.type === 'sister' && selected.name === name;
+  const isSubSelected = (id: string) => selected?.type === 'subagent' && selected.id === id;
  const isSubSelected = (id: string) =>
    selected?.type === 'subagent' && selected.id === id;
  // Derive active handoff lines from sister states
  const harangActive = isActive('harang');
  const narangActive = isActive('narang');
  const darangActive = isActive('darang');
-  const erangActive  = isActive('erang');
+  const erangActive = isActive('erang');
  return (
    <SceneWrapper>
      <FreshnessLabel>
        <WsDot $connected={dataMode === 'live'} />
        {dataMode === 'live' ? 'live · ws' : dataMode === 'snapshot' ? 'snapshot · poll' : 'fallback · doc-derived'}
-        {' · subagents: fallback'}
+        {subagentMode === 'live' ? ' · subagents: live · runtime' : ' · subagents: fallback'}
      </FreshnessLabel>
-      <svg
+      <svg viewBox={`0 0 ${VB_W} ${VB_H}`} width="100%" height="100%" style={{ display: 'block' }}>
        viewBox={`0 0 ${VB_W} ${VB_H}`}
        width="100%"
        height="100%"
        style={{ display: 'block' }}
      >
        {/* ── Zone backgrounds ── */}
        {SISTER_ORDER.map((name) => {
          const [zx, zy, zw, zh] = ZONES[name];
          return (
-            <g key={`zone-${name}`}>
+            <rect
-              <rect
+              key={`zone-${name}`}
-                x={zx} y={zy} width={zw} height={zh}
+              x={zx}
-                rx={4}
+              y={zy}
-                fill={ZONE_COLORS[name]}
+              width={zw}
-                stroke={ZONE_BORDER[name]}
+              height={zh}
-                strokeWidth={1}
+              rx={4}
-              />
+              fill={ZONE_COLORS[name]}
-            </g>
+              stroke={ZONE_BORDER[name]}
              strokeWidth={1}
            />
          );
        })}
        {/* ── Center corridor (vertical) ── */}
        <rect x={358} y={5} width={84} height={450} rx={2} fill="#111111" stroke="rgba(255,255,255,0.04)" strokeWidth={1} />
        {/* ── Center corridor (horizontal) ── */}
        <rect x={5} y={205} width={790} height={50} rx={2} fill="#111111" stroke="rgba(255,255,255,0.04)" strokeWidth={1} />
-        {/* ── Conference room ── */}
+        <ellipse cx={CONF.cx} cy={CONF.cy} rx={CONF.rx} ry={CONF.ry} fill="#1a1a1a" stroke="rgba(255,255,255,0.15)" strokeWidth={1} />
-        <ellipse
+        <text x={CONF.cx} y={CONF.cy + 4} textAnchor="middle" fontSize={9} fontFamily="var(--font-mono)" fill="rgba(255,255,255,0.4)">
          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)"
          style={{ textTransform: 'uppercase', letterSpacing: '0.08em' }}
        >
          회의실
        </text>
-        {/* ── Connectors ── */}
+        <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 ↔ narang (left vertical through corridor) */}
        <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}
        />
        {/* darang ↔ erang (right vertical through corridor) */}
        <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}
        />
        {/* harang ↔ darang (through conference, horizontal top) */}
        <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}
        />
        {/* narang ↔ erang (horizontal bottom) */}
        <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}
        />
        {/* narang → darang (review path through conference, curved) */}
        <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}
        />
        {/* ── Zone labels ── */}
        {([
-          ['harang', 18,  22,  '하랑이 · Planning'] as const,
+          ['harang', 18, 22, '하랑이 · Planning'] as const,
-          ['darang', 463, 22,  '다랑이 · QA'] as const,
+          ['darang', 463, 22, '다랑이 · QA'] as const,
-          ['narang', 18,  272, '나랑이 · Dev'] as const,
+          ['narang', 18, 272, '나랑이 · Dev'] as const,
-          ['erang',  463, 272, '이랑이 · Infra'] as const,
+          ['erang', 463, 272, '이랑이 · Infra'] as const,
        ] as const).map(([name, lx, ly, text]) => (
-          <text
+          <text key={`label-${name}`} x={lx} y={ly} fontSize={10} fontFamily="var(--font-mono)" fill={ZONE_BORDER[name]}>
            key={`label-${name}`}
            x={lx} y={ly}
            fontSize={10}
            fontFamily="var(--font-mono)"
            fill={ZONE_BORDER[name]}
            style={{ textTransform: 'uppercase', letterSpacing: '0.08em' }}
          >
            {text}
          </text>
        ))}
        {/* ── Sister nodes ── */}
        {SISTER_ORDER.map((name) => {
-          const sisterData = getSister(name);
+          const sister = getSister(name);
-          const state: AgentState = sisterData?.state ?? 'idle';
+          const state: AgentState = sister?.state ?? 'idle';
          const [cx, cy] = SISTER_POS[name];
          return (
            <SisterCircle
              key={`sister-${name}`}
-              cx={cx} cy={cy} r={28}
+              cx={cx}
              cy={cy}
              r={28}
              state={state}
-              emoji={SISTER_EMOJIS[name]}
+              name={name}
              selected={isSisterSelected(name)}
              onClick={() => onSelectSister(name)}
            />
          );
        })}
        {/* ── Subagent nodes ── */}
        {SISTER_ORDER.map((sisterName) => {
-          const sisterData = getSister(sisterName);
+          const sister = getSister(sisterName);
-          const subagents = sisterData?.subagents ?? [];
+          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}
+                cx={pos[0]}
                cy={pos[1]}
                r={14}
                state={sub.state}
                label={sub.name}
                selected={isSubSelected(sub.id)}
@@ -561,10 +469,9 @@ export default function OfficeScene({
          });
        })}
        {/* ── Subagent → Sister connector lines (thin) ── */}
        {SISTER_ORDER.map((sisterName) => {
-          const sisterData = getSister(sisterName);
+          const sister = getSister(sisterName);
-          const subagents = sisterData?.subagents ?? [];
+          const subagents = sister?.subagents ?? [];
          const [sx, sy] = SISTER_POS[sisterName];
          return subagents.map((sub, i) => {
            const pos = getSubagentPosition(sisterName, i, sub.state);
@@ -572,8 +479,10 @@ export default function OfficeScene({
            return (
              <line
                key={`conn-${sub.id}`}
-                x1={sx} y1={sy}
+                x1={sx}
-                x2={pos[0]} y2={pos[1]}
+                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"
--- a/frontend/components/office/PipelinePanel.tsx
+++ b/frontend/components/office/PipelinePanel.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
-import styled, { keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import type { PipelineNode } from '@/components/dashboard/ActivePipeline';
 // ─── Types ───────────────────────────────────────────────────────────────────
@@ -177,7 +177,7 @@ const Connector = styled.div<{ $active: boolean }>`
    width: 100%;
    height: 5px;
    background: ${({ $active }) => $active ? 'rgba(245,245,245,0.8)' : 'transparent'};
-    animation: ${({ $active }) => $active ? `${flowAnim} 1.6s linear infinite` : 'none'};
+    animation: ${({ $active }) => $active ? css`${flowAnim} 1.6s linear infinite` : 'none'};
  }
 `;
Author	SHA1	Message	Date
나랑이	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