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)

.plans/OVERVIEW.md

@@ -16,14 +16,14 @@
 - 장기 문서: `docs/`
 
 ## 활성 작업
-- **SPRINT-014**: Hermes 전환 + 프로젝트 IA/파일 구조 리뉴얼
+- **SPRINT-016**: 4자매 Isometric Office Dashboard 재기획
 
 ## 이번 Sprint 핵심 요구사항
-1. OpenClaw → Hermes 전환 후 자매 상태가 전부 offline으로 보이는 문제 해결
+1. 4자매와 17개 서브에이전트, 총 21개 에이전트를 오피스 은유로 재설계
-2. 자매 프로필 사진 탐색 경로/fallback 재정비
+2. 4자매 독립 Gateway WebSocket 기준 실시간 상태 모델 정리
-3. 변경된 파일 구조에 맞춘 프로젝트 진행률 / Sprint / Hotfix UI 개편
+3. 고정 좌석 4자매 + 동적 이동 서브에이전트 + 회의실/연결선 구조 정의
-4. 프로젝트를 네비게이션 두 번째 페이지로 고정
+4. direct chat / workflow panel / server health를 오피스 화면과 통합
-5. 다랑 QA 완료 후 `main`이 배포 상태가 되고, 이랑은 최신 `main`을 pull해서 재배포만 수행하도록 흐름 고정
+5. PRD와 `.plans/` 구조를 새 제품 방향 기준으로 정리
 
 ## 이행 전략
 - 코드에서는 구 구조와 신 구조를 일정 기간 동시 지원
@@ -34,5 +34,6 @@
 ## 문서 맵
 - 구조 기준: `../ARCHITECTURE.md`
 - 디자인 인덱스: `./design/index.md`
-- Sprint 계획: `./sprints/SPRINT-014.md`
+- Sprint 계획: `./sprints/SPRINT-016.md`
+- PRD: `../docs/product-specs/openclaw-office-dashboard-prd.md`
 - 배포 플로우: `./deploy/main-release-flow.md`

.plans/design/index.md

@@ -8,6 +8,8 @@
 
 ## 페이지별 UI
 - `ui/dashboard-design.md`
+- `ui/office-dashboard-design.md`
+- `ui/office-chat-design.md`
 - `ui/projects-page-design.md`
 - `ui/project-detail-design.md`
 - `ui/sister-detail-design.md`
@@ -16,8 +18,11 @@
 - `ui/settings-design.md`
 - `ui/admin-design.md`
 
-## Sprint 014에서 반드시 반영할 화면
+## 레퍼런스
-- 대시보드 메인: Hermes 상태/프로젝트 요약/두 번째 네비 반영
+- `references/07-master-dashboard-v3-reference.md`
-- 프로젝트 목록: 프로젝트를 두 번째 페이지로 이동한 기준 재배치
+
-- 프로젝트 상세: Sprint / Hotfix / QA / Deploy 분리 구조 반영
+## Sprint 016에서 반드시 반영할 화면
-- 자매 페이지: Hermes 상태 판정과 아바타 fallback 반영
+- 오피스 메인: 4자매 고정 좌석 + 서브에이전트 동적 이동
+- 오피스 채팅: 자매 선택 direct chat + 현재 상태 결합
+- 운영 패널: active workflow / sprint / review loop / deploy gate / server health
+- 모바일: 오피스 씬 단순화 + 세로 흐름 재배치

.plans/design/references/07-master-dashboard-v3-reference.md

@@ -0,0 +1,33 @@
+# Master Dashboard v3 Reference Notes
+
+## 출처
+자기야가 2026-04-06에 공유한 레퍼런스 시안.
+
+## 핵심 인상
+- 짙은 다크 배경 위에 운영 패널을 촘촘하게 배치
+- 상단 global status bar + 중앙 sprint progress + 우측 runtime connection 구조
+- 4자매 상태 카드를 1행에서 동시에 노출
+- `ACTIVE PIPELINE`을 중심으로 4자매 협업 흐름을 시각화
+- `ACTIVITY FEED` / `SPRINT METRICS` / `INFRASTRUCTURE OVERVIEW` / `MISTAKE LOG & HARNESS`를 한 화면에서 모두 판단 가능
+
+## 채택 결정
+- **채택:** 정보 구조, 섹션 구성, 운영 화면다운 밀도, Active Pipeline 개념
+- **부분 채택:** 색 강조, pulse/flow 애니메이션, 상단 진행률 표현
+- **비채택:** 과한 glow, glassmorphism 회귀, 장식 위주의 다이어그램화
+
+## 제품 적용 원칙
+- 하나랑 대시보드는 현행 미니멀 터미널 UI 톤을 유지
+- 레퍼런스는 `레이아웃/정보 위계/흐름 표현` 위주로 번역 적용
+- 비주얼 차용 비율은 대략 70% 이내로 제한
+- 실데이터 기반 운영 화면으로 느껴져야 하며 mock showcase처럼 보이면 안 됨
+
+## 특히 강한 섹션
+1. Sister Status Cards
+2. Active Pipeline
+3. Activity Feed + Metrics 병렬 비교
+4. Infra + Mistake Log 하단 운영 패널
+
+## 구현 시 주의
+- 실제 데이터 밀도에 비해 컴포넌트가 과장되면 안 됨
+- 첫 스크롤 안에 가장 중요한 판단 정보가 모여야 함
+- 모바일에서는 같은 구조를 억지로 축소하지 말고 세로 흐름으로 재배열

.plans/design/ui/dashboard-design.md

@@ -1,31 +1,239 @@
-# 대시보드 메인 (`/`) — Sprint 014 리뉴얼 포인트
+# 대시보드 메인 (`/`) — Sprint 015 Master Dashboard v3
 
-## 유지 요소
+## 목적
-- 미니멀 터미널 UI
+대시보드 메인은 단순 요약 화면이 아니라, 자기야가 들어오자마자 `지금 4자매 파이프라인이 어디까지 와 있는지` 즉시 판단할 수 있는 대표 운영 화면이어야 해.
-- 4자매 상태 카드
-- 프로젝트 요약 + 활동 피드
-- 모바일 하단 탭바
 
-## 수정 포인트
+이번 v3의 핵심은 **현행 미니멀 터미널 UI를 유지하면서, 더 강한 정보 구조와 흐름 시각화로 메인 화면을 재구성하는 것**이야.
-### 1. 자매 상태 판정
-- Hermes 런타임 기준 상태를 읽어야 함
-- OpenClaw만 보는 하드코딩 제거
-- 상태 카드가 전원 `OFFLINE`으로 고정되지 않게 실제 상태/uptime/cpu를 노출
 
-### 2. 자매 아바타
+## 유지할 것
-- 실사/프로필 이미지가 있으면 사용
+- 현재 제품의 미니멀 터미널 톤
-- 없으면 fallback SVG
+- 짙은 배경 + 얇은 border + mono 보조 텍스트
-- broken image 상태 금지
+- 4자매 중심 세계관/역할 구분
+- 모바일 하단 탭바와 기존 페이지 동선
 
-### 3. 프로젝트 요약 영역
+## 강하게 가져올 것
-- 프로젝트는 네비게이션 두 번째 페이지와 동일한 정보 구조를 축약해서 보여줌
+- 상단 global status bar 구조
-- 단순 퍼센트만이 아니라 현재 phase가 드러나야 함
+- 4자매 카드 1행 배치
+- `ACTIVE PIPELINE` 중심 운영 다이어그램
+- `ACTIVITY FEED` + `SPRINT METRICS` 병렬 구조
+- `INFRASTRUCTURE OVERVIEW` + `MISTAKE LOG & HARNESS` 하단 운영 패널 구조
 
-### 4. 네비게이션 순서
+## 줄일 것
-- `대시 → 프로 → 활동 → 자매 → 조직 → 설정 → 관리`
+- 과한 glow
-- 모바일 하단 탭바도 같은 순서 유지
+- 장식성 애니메이션 남발
+- 의미 없이 많은 뱃지/배경 장식
+- mock 대시보드처럼 보이는 가짜 숫자 강조
 
-## 모바일 기준
+---
-- 2열 상태 카드 유지
+
-- 프로젝트 요약은 phase 우선, 활동 피드는 그 아래
+## 전체 레이아웃
-- 하단 탭에서 프로젝트가 두 번째 탭으로 보여야 함
+### 1. Top Global Status Bar
+한 줄 또는 반응형 2단 구조.
+
+#### 좌측
+- 브랜드/제품명
+- 현재 페이지 정체성 (`Master Dashboard`)
+
+#### 중앙
+- 현재 Sprint / Day / focus summary
+- 진행률 bar 또는 current cycle 요약
+
+#### 우측
+- Discord/Runtime 연결 상태
+- 알림 진입점
+- operator/avatar 요약
+
+#### UX 기준
+- 상단에서 현재 운영 국면을 짧게 읽을 수 있어야 함
+- 모바일에서는 좌/중/우를 무리하게 한 줄에 우겨넣지 말고 2단으로 자연스럽게 접기
+
+---
+
+### 2. Sister Status Cards Row
+4자매 카드는 1행 핵심 상태 영역.
+
+#### 공통 정보
+- 이름
+- 역할
+- 상태 (`IDLE`, `WORKING`, `REVIEWING`, `OFFLINE`, `DEPLOYING` 등)
+- CPU / RAM 또는 대응 리소스 지표
+- 현재 작업 한 줄 요약
+
+#### 역할별 색 기준
+- Harang: amber
+- Narang: sky
+- Darang: pink
+- Irang: violet
+
+#### 상태 표현 규칙
+- 색은 역할 + 현재 상태를 같이 전달해야 함
+- working/reviewing처럼 active 상태일 때만 강한 강조
+- idle은 조용하게
+- offline은 회색/경고 계열로 분명히 구분
+
+#### 카드 UX 기준
+- 네 카드의 높이/구조는 최대한 동일
+- 긴 텍스트는 1줄 또는 2줄 clamp
+- CPU/RAM은 숫자와 bar를 함께 보여줘도 되지만 과장하지 말 것
+- 아바타/아이콘은 보조 요소고, 상태 텍스트가 주인공이어야 함
+
+---
+
+### 3. `ACTIVE PIPELINE`
+이번 v3의 대표 섹션.
+
+#### 목적
+User → Harang → Narang → Darang → Irang 흐름과, maker-checker loop, escalation 조건을 한눈에 보여준다.
+
+#### 기본 노드
+- User
+- Harang (`Plan & Assign`)
+- Narang (`Implement` or active task id)
+- Darang (`Review / QA`)
+- Irang (`Deploy / Idle`)
+
+#### 보여줄 정보
+- 현재 active task 또는 ticket id
+- Narang ↔ Darang review loop
+- escalation 조건 또는 누적 실패 횟수
+- Irang이 아직 idle인지, redeploy 대기인지
+
+#### 구현 기준
+- SVG 기반 라인/화살표 허용
+- active state가 있을 때만 제한적 pulse/flow
+- 정적인 설명보다 실제 운영 상태가 우선
+- loop / escalation은 읽히되 과하게 복잡하면 안 됨
+
+#### 금지
+- 예쁘기만 한 다이어그램
+- 현재 상태를 읽을 수 없는 장식형 선/화살표
+
+---
+
+### 4. Middle Row — `ACTIVITY FEED` + `SPRINT METRICS`
+운영 근거와 정량 판단을 나란히 배치한다.
+
+#### A. Activity Feed
+운영 이벤트 타임라인.
+
+##### 우선 정보
+- 시각
+- 주체/대상 (예: Narang → Darang)
+- 이벤트 타입 (`handoff`, `review_request`, `review_fail`, `deploy`, `hotfix` 등)
+- 관련 task/sprint/hotfix id
+- 실패/경고 시 짧은 원인
+
+##### UX 기준
+- 텍스트 로그가 아니라 읽히는 이벤트 카드여야 함
+- event type 색은 통일감 있게 관리
+- 필요하면 details/JSON 결과는 접어서 보여줌
+
+#### B. Sprint Metrics
+한 Sprint의 진행 체감치를 운영 지표로 압축.
+
+##### 포함 후보
+- total tasks
+- done / in progress / review / planning 비중
+- sister별 completed count
+- avg iterations
+- first-pass rate
+- escalation count
+
+##### UX 기준
+- 차트는 보조, 숫자 읽기가 우선
+- donut + mini bar + stat box 조합 허용
+- `활동 피드와 같은 행에서 비교`했을 때 자연스러워야 함
+
+---
+
+### 5. Bottom Row — `INFRASTRUCTURE OVERVIEW` + `MISTAKE LOG & HARNESS`
+운영 기반과 학습 자산을 하단에 둔다.
+
+#### A. Infrastructure Overview
+##### 목적
+현재 시스템이 어디서 어떻게 돌아가는지 빠르게 파악.
+
+##### 포함 요소
+- gateway
+- sisters runtime host/lxc/vm
+- deploy access path
+- health / load / uptime 요약
+
+##### 표현 방식
+- 단순 카드 나열보다 연결 관계가 보이는 가벼운 맵 구조 선호
+- 다만 실제 데이터가 빈약하면 과장된 네트워크 다이어그램으로 만들지 말 것
+
+#### B. Mistake Log & Harness
+##### 목적
+운영 중 쌓인 실수/규칙/학습 자산을 한 눈에 보여줌.
+
+##### 포함 요소
+- 최신 mistake/harness rule 몇 개
+- 작성 시점
+- 누가 추가했는지
+- category (`DB Schema`, `Frontend`, `Deployment` 등)
+- 필요하면 작은 trend visualization
+
+##### UX 기준
+- 단순 문서 링크가 아니라 운영 학습 보드처럼 보여야 함
+- `View Full` 또는 상세 문서 링크는 보조로 유지
+
+---
+
+## 데스크톱 정보 순서
+1. Top Global Status Bar
+2. Sister Status Cards
+3. Active Pipeline
+4. Activity Feed / Sprint Metrics
+5. Infrastructure Overview / Mistake Log & Harness
+
+## 모바일 정보 순서
+1. Top Status Summary
+2. Sister Status Cards (2열 또는 1열)
+3. Active Pipeline
+4. Activity Feed
+5. Sprint Metrics
+6. Infrastructure Overview
+7. Mistake Log & Harness
+
+모바일에서는 복잡한 수평 관계보다 세로 읽기 흐름이 우선이야.
+
+---
+
+## 데이터 연결 원칙
+- mock 텍스트/숫자로 고정하지 말고 실제 데이터가 들어올 자리를 먼저 설계할 것
+- 값이 없을 때는 `No recent activity`, `No active deployment`, `No harness rules yet`처럼 조용한 empty state 제공
+- offline / missing / unavailable 상태는 숨기지 말고 명확히 드러낼 것
+- websocket 연결 상태와 데이터 freshness를 같은 의미로 쓰지 말 것
+- 각 섹션은 가능하면 아래 source 중 하나로 구분할 것
+  - `runtime live`
+  - `event mirrored`
+  - `polling snapshot`
+  - `doc derived`
+  - `empty / unavailable`
+- 추정/합성값이면 사실처럼 단정하지 말고 neutral wording 사용
+
+## 카피 원칙
+- 설명문보다 라벨형 문구 우선
+- 첫 화면 문구는 짧고 건조해야 함
+- `~만들었어`, `~정리했어`, `~읽히게` 같은 메타 설명 금지
+- 보드/패널 body는 원문 요약 또는 상태 문구 위주로 짧게 유지
+
+## 인터랙션 원칙
+- hover 없어도 핵심 정보가 읽혀야 함
+- 클릭 가능한 영역은 페이지 이동 또는 상세 패널 열기처럼 의미가 분명해야 함
+- notification / details / expand는 보조 수단
+
+## 스타일 원칙
+- background는 현행 다크 톤 유지
+- border 1px 중심
+- 그림자/glow는 active state 강조용 최소치만 사용
+- 하드한 터미널 감성과 현대적 운영 패널 느낌 사이 균형 유지
+
+## 연결 페이지
+- 프로젝트 페이지는 phase/QA/deploy 세부 판단용
+- 활동 페이지는 장기 로그 열람용
+- 자매 상세는 개별 runtime/세션 분석용
+- 관리 페이지는 조작/재시작/관리용
+
+즉, 홈은 모든 걸 다 보여주는 곳이 아니라 **지금 어디를 눌러야 하는지 판단시키는 운영 출발점**이어야 해.

.plans/design/ui/office-chat-design.md

@@ -0,0 +1,30 @@
+# 오피스 채팅 워크스페이스 — Sprint 016
+
+## 목적
+자기야가 4자매 중 한 명을 선택해 직접 대화하고, 현재 작업 맥락과 tool 상태를 함께 보는 운영 채팅 인터페이스.
+
+## 구조
+### 좌측
+- 자매 선택 탭
+- 최근 대화 상대
+- unread / active 상태
+
+### 중앙
+- 메시지 타임라인
+- streaming 응답
+- tool call 상태 삽입
+- retry / stop / resend 액션
+
+### 우측
+- 선택 자매 상태
+- current workflow
+- 최근 handoff
+- 관련 서브에이전트
+
+## UX 규칙
+- 채팅은 메신저가 아니라 운영 명령 패널처럼 보여야 함
+- 현재 자매 상태와 대화가 분리되지 않아야 함
+- tool calling / speaking 상태는 대화 흐름 안에서 보여야 함
+
+## 모바일
+- 자매 탭 → 메시지 → 상태 패널 순으로 세로 전환

.plans/design/ui/office-dashboard-design.md

@@ -0,0 +1,63 @@
+# 오피스 대시보드 메인 (`/office` 또는 `/`) — Sprint 016
+
+## 목적
+4자매와 서브에이전트 협업을 `고정 좌석 + 동적 이동 + 운영 패널` 구조로 보여주는 대표 화면.
+
+## 핵심 은유
+- 메인 자매 = 고정 좌석
+- 서브에이전트 = 이동 가능한 팀원
+- 회의실 = 협업/리뷰/핸드오프 문맥
+- 인프라 존 = 배포/서버/헬스
+- 연결선 = handoff / workflow transition
+
+## 전체 레이아웃
+### 1. Office Scene
+화면 중심. 가장 큰 영역.
+
+#### 고정 좌석
+- 하랑이: 좌상단 또는 상단 중앙
+- 나랑이: 좌하단 또는 좌측 작업 구역
+- 다랑이: 우상단 또는 리뷰 구역
+- 이랑이: 우하단 또는 인프라 구역
+
+#### 서브에이전트 배치
+- 기본은 자기 자매 주변 대기
+- active workflow 시 작업석/회의실/인프라 존으로 이동
+- 상태에 따라 아이콘/색/테두리/말풍선 변화
+
+### 2. Right Context Panel
+- 선택 에이전트 detail
+- 현재 세션/상태
+- 최근 이벤트
+- direct chat 진입
+
+### 3. Bottom Ops Panel
+- current sprint
+- active workflow
+- review loop
+- deploy gate
+- server health summary
+
+## 상태 표현
+- `idle`: 조용한 점등
+- `thinking`: 약한 pulse
+- `tool_calling`: 도구 아이콘/점멸
+- `speaking`: 말풍선 또는 stream 표시
+- `error`: 적색 경고
+
+## 연결 규칙
+- 자매 간 핸드오프는 굵은 주 연결선
+- 서브에이전트 내부 협업은 얇은 보조선
+- review loop는 다랑이 회의실 중심으로 표시
+- deploy path는 이랑이 인프라 존으로 흐름 표시
+
+## UX 규칙
+- 중심은 언제나 4자매
+- 21개 에이전트를 다 보여도 난잡하면 안 됨
+- 선택 전에도 전체 상태는 읽혀야 함
+- 선택 후에만 상세 정보 밀도 증가
+
+## 모바일
+- 오피스 씬 단순화
+- 자매별 클러스터 카드 + 축소 맵 우선
+- 상세는 하단 시트 또는 탭으로 분리

.plans/hotfix/HOTFIX-006-NARANG-HANDOFF.md

@@ -0,0 +1,44 @@
+# HOTFIX-006 Narang Handoff
+
+## repo / branch
+- repo: `https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard`
+- branch: `feature/hotfix-006-dashboard-copy-live-fidelity`
+
+## 읽을 문서
+1. `.plans/hotfix/HOTFIX-006.md`
+2. `.plans/design/ui/dashboard-design.md`
+
+## 이번 수정 핵심
+자기야 피드백은 명확해.
+
+1. 문구가 너무 길고 쓸데없는 말이 많아
+2. 실시간처럼 보이는데 실제론 아닌 부분이 있어
+
+이 두 개를 바로 고쳐.
+
+## 꼭 손볼 것
+- 상단 headline / summary
+- current focus 설명문
+- operator meta
+- pipeline node detail / fallback
+- infra/meta card detail
+- board 카드 body 문구
+- `socket live`, `LIVE ON` 같은 라벨의 의미
+
+## 절대 기준
+- 설명문 쓰지 마
+- UI 자기소개하지 마
+- 실시간 아닌 걸 실시간처럼 포장하지 마
+- source-of-truth 애매하면 neutral wording으로 낮춰
+- 문구는 짧고 건조하게
+
+## 구현 목표
+- `ACTIVE PIPELINE`은 진짜 이벤트 기반이면 그렇게 보이고
+- 아니면 `SNAPSHOT`, `DOC-DERIVED`, `NO ACTIVE HANDOFF`처럼 정직하게 보여
+- `MISTAKE LOG & HARNESS`도 원문/출처/시각 중심으로 짧게 정리
+- freshness 메타를 넣어서 stale 여부를 읽을 수 있게 해
+
+## QA 전 체크
+- 자기야가 봤을 때 `주구절절하다`는 느낌이 없어야 해
+- `실시간인가? 아닌가?`가 헷갈리면 실패야
+- build 통과는 기본

.plans/hotfix/HOTFIX-006.md

@@ -0,0 +1,142 @@
+# HOTFIX-006: 대시보드 문구 절제 + 실시간성 정합성 보정
+
+## 목표
+Master Dashboard v3에서 주구절절한 설명형 문구를 운영 대시보드다운 짧은 문장으로 정리하고, `실시간처럼 보이지만 실제로는 폴링/요약/문서 기반인 정보`를 정확한 source-of-truth 기준으로 다시 맞춘다.
+
+## 왜 이걸 고치나
+현재 메인 대시보드는 레이아웃은 좋아졌는데 두 가지 문제가 남아 있어.
+
+1. **문구가 길다**
+   - 상단 Headline / Summary
+   - OperatorMeta
+   - pipeline/detail/fallback 문장
+   - harness/qa 보드 설명
+   이런 부분이 대시보드보다 설명문처럼 읽혀.
+
+2. **실시간성 표현이 과하다**
+   - `socket live`는 웹소켓 연결 상태일 뿐, 모든 카드/보드가 실시간 원본 반영이라는 뜻은 아니야.
+   - `ACTIVE PIPELINE`, `MISTAKE LOG & HARNESS`, 일부 infra/meta는 최근 activity / QA 문서 / polling snapshot을 조합해 만든 값이 섞여 있어.
+   - 따라서 `실시간 반영`처럼 보이는 문구와 라벨은 정정해야 해.
+
+## 범위
+- 대시보드 메인(`/`) 문구 전반 절제
+- source-of-truth 명시 정리
+- 실시간 / 폴링 / 문서기반 / 추정치 상태 구분
+- 필요 시 백엔드 dashboard ops 응답에 freshness/source 메타 추가
+- 프론트에서 misleading wording 제거
+
+## 태스크
+
+### TASK-078: 대시보드 카피를 운영형 짧은 문구로 전면 정리
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `frontend/app/page.tsx`
+  - `frontend/components/dashboard/ActivePipeline.tsx`
+- **설명:**
+  - 문장형 설명을 줄이고 짧은 운영 문구로 교체
+  - 섹션 제목/보조 문구/fallback/empty state를 모두 다시 본다
+- **문구 기준:**
+  - 길게 설명하지 말 것
+  - 1문장보다 라벨형/상태형 표현 우선
+  - `~읽히게 만들었어`, `~정리했어` 같은 메타 설명 금지
+- **완료 기준:**
+  - 첫 화면 문구가 대시보드 UI 문장처럼 짧고 건조함
+  - 자기소개/설계 설명 문장이 제거됨
+
+### TASK-079: source-of-truth 기준표 정리
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `backend/src/dashboard/dashboard.service.ts`
+  - 필요 시 dashboard DTO/타입 정의
+  - `.plans/design/ui/dashboard-design.md`
+- **설명:** 각 섹션 값이 어디서 왔는지 명확히 구분한다.
+- **최소 구분:**
+  - runtime live
+  - websocket event mirrored
+  - polling snapshot
+  - repo/qa doc derived
+  - fallback/empty
+- **완료 기준:**
+  - 주요 카드/보드/파이프라인 값에 원본 기준을 설명할 수 있음
+  - 합성값을 실시간 원본처럼 표시하지 않음
+
+### TASK-080: `LIVE` 표현 정합성 보정
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `frontend/app/page.tsx`
+  - `frontend/lib/useSocket.ts`
+- **설명:**
+  - 현재 `socket live`는 websocket 연결 상태만 뜻하므로 표현을 더 정확히 바꾼다.
+  - 예: `SOCKET ON`, `EVENT STREAM ON`, `SNAPSHOT`, `STALE`, `SYNCED 12s AGO` 같은 운영형 라벨로 정리
+- **완료 기준:**
+  - websocket 연결 여부와 데이터 최신성이 혼동되지 않음
+  - LIVE ON/OFF 하나만 보고 전체가 실시간이라고 오해되지 않음
+
+### TASK-081: `ACTIVE PIPELINE` 실데이터/추정치 경계 보정
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `backend/src/dashboard/dashboard.service.ts`
+  - `frontend/components/dashboard/ActivePipeline.tsx`
+- **설명:**
+  - 노드 상태/active task/focus가 최근 activity 기반 추론이면 그 사실을 숨기지 말 것
+  - 명시적 handoff/event가 없으면 억지 문장 대신 짧은 neutral fallback 사용
+- **완료 기준:**
+  - `ACTIVE PIPELINE`이 추정치를 확정 사실처럼 말하지 않음
+  - 이벤트 없음/불충분 상태가 자연스럽게 보임
+
+### TASK-082: `MISTAKE LOG & HARNESS` / 보드 카드 원문성 보강
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `backend/src/dashboard/dashboard.service.ts`
+  - `frontend/app/page.tsx`
+- **설명:**
+  - `관리자 harness 편집 로그에서 직접 가져온 기록이야.` 같은 설명형 body 제거
+  - 가능하면 원문 제목/원문 요약/출처/시각만 짧게 노출
+- **완료 기준:**
+  - 보드 카드 문구가 덜 소설 같고 더 기록물처럼 읽힘
+  - source 라벨/시각이 더 명확함
+
+### TASK-083: freshness 메타 추가 및 노출
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `backend/src/dashboard/dashboard.controller.ts`
+  - `backend/src/dashboard/dashboard.service.ts`
+  - `frontend/app/page.tsx`
+- **설명:** dashboard ops 응답에 최소 freshness 메타를 추가한다.
+- **예시:**
+  - generatedAt
+  - activityLatestAt
+  - sistersLatestAt
+  - qaDocLatestAt
+- **완료 기준:**
+  - UI에서 `last sync`, `activity lag`, `runtime lag` 같은 판단이 가능함
+  - stale 상태를 눈치채기 쉬움
+
+## 문구 톤 기준 예시
+### 금지
+- "지금 어디가 움직이고 있는지, 첫 화면에서 바로 읽히게 만들었어."
+- "장식보다 handoff 판단이 먼저 읽히게 정리했어."
+- "현재 오너 기준은 ... 최근 handoff와 phase를 같이 보고 있어."
+- "관리자 harness 편집 로그에서 직접 가져온 기록이야."
+
+### 권장
+- `MASTER DASHBOARD`
+- `CURRENT FOCUS`
+- `SOCKET ON`
+- `SNAPSHOT`
+- `NO ACTIVE HANDOFF`
+- `NO RECENT QA`
+- `LAST EVENT 2m AGO`
+- `DOC-DERIVED`
+
+## 완료 기준
+- 문구가 짧고 운영 대시보드답게 바뀜
+- 실시간/폴링/문서유도 값이 구분됨
+- misleading `live` 표현이 제거됨
+- 자기야가 봤을 때 `실시간 아닌데 실시간처럼 보인다`는 느낌이 사라짐

.plans/sprints/SPRINT-015-NARANG-HANDOFF.md

@@ -0,0 +1,49 @@
+# SPRINT-015 Narang Handoff
+
+## repo / branch
+- repo: `https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard`
+- branch: `feature/sprint-015-v3-redesign-plan`
+
+## 읽을 문서
+1. `.plans/sprints/SPRINT-015.md`
+2. `.plans/design/ui/dashboard-design.md`
+3. `.plans/design/index.md`
+4. 기존 구현 참조가 필요하면 `.plans/sprints/SPRINT-014.md`
+
+## 이번에 해야 하는 일
+대시보드 메인(`/`)을 v3 정보 구조로 재설계해.
+
+핵심은 이거야.
+- 현행 미니멀 터미널 톤 유지
+- 레퍼런스의 정보 구조 적극 채택
+- `ACTIVE PIPELINE`을 대표 섹션으로 도입
+- 4자매 상태 카드 / Activity Feed / Sprint Metrics / Infra / Mistake Log를 운영 화면답게 재배치
+- 장식은 줄이고 실데이터 연결 가능한 구조로 구현
+
+## 절대 기준
+- glassmorphism으로 회귀하지 마
+- styled-components 체계 유지
+- fake mock 느낌 강한 장식 UI로 끝내지 마
+- hover 없이도 핵심 정보 읽혀야 해
+- 데스크톱 먼저 맞추고 모바일 세로 흐름까지 꼭 정리해
+- 기존 페이지 동선 숨기지 마
+
+## 구현 우선순위
+1. 상단 Global Status Bar / Hero Summary
+2. 4자매 상태 카드 v3
+3. `ACTIVE PIPELINE`
+4. `ACTIVITY FEED` / `SPRINT METRICS`
+5. `INFRASTRUCTURE OVERVIEW` / `MISTAKE LOG & HARNESS`
+6. 반응형/빈 상태/오프라인 상태 정리
+
+## 확인 포인트
+- 첫 화면 첫 스크롤 안에서 자매 상태 + 현재 파이프라인이 읽혀야 함
+- 색은 상태 의미가 있을 때만 강하게 사용
+- Activity / Metrics / Infra / Mistake가 각각 따로 노는 패널이 아니라 운영 맥락으로 이어져야 함
+- `ACTIVE PIPELINE`은 예쁘기만 한 다이어그램이 아니라 현재 handoff / review loop / escalation을 보여줘야 함
+
+## QA 전 필수
+- `npm run build` 통과
+- 반응형 확인
+- 데이터 없을 때/길 때/오프라인일 때 레이아웃 확인
+- 외부 URL 기준으로 실제 읽기 흐름 확인

.plans/sprints/SPRINT-015.md

@@ -0,0 +1,180 @@
+# SPRINT-015: Master Dashboard v3 정보 구조 리디자인
+
+## 목표
+기존 미니멀 터미널 UI를 유지하면서, 자기야가 제안한 레퍼런스의 강한 정보 구조를 흡수해 메인 대시보드를 `4자매 운영 관제의 대표 화면`으로 재정의한다.
+
+## 핵심 방향
+- glassmorphism으로 회귀하지 않음
+- 현재 프로덕션의 미니멀 터미널 톤 유지
+- 대신 레이아웃/정보 위계/운영 흐름 표현은 새 레퍼런스를 적극 반영
+- 장식보다 운영 가독성을 우선
+- 데스크톱 우선 설계 후 모바일 세로 흐름까지 함께 정리
+
+## 디자인 원칙
+1. **정보 구조 우선**
+   - 예쁜 카드보다 `지금 무엇이 진행 중인지`가 먼저 읽혀야 함
+2. **운영 화면다운 밀도**
+   - 한 화면에서 자매 상태 / 현재 파이프라인 / 활동 / 지표 / 인프라를 함께 판단 가능해야 함
+3. **현행 톤 유지**
+   - 배경, border, mono 보조 텍스트, 브라켓/터미널 감성은 유지
+4. **애니메이션 절제**
+   - 상태 강조용 pulse/flow만 제한적으로 사용
+   - 불필요한 glow, 과한 색 번짐, 반복 뱃지는 줄임
+5. **실데이터 우선**
+   - 예시 숫자가 아니라 실제 runtime/task/project/deploy 데이터를 붙일 수 있는 구조로 설계
+
+## 범위
+- 메인 대시보드(`/`) 레이아웃 v3 개편
+- 상단 global status bar 재설계
+- 4자매 상태 카드 재배치/요약 정보 재정의
+- `ACTIVE PIPELINE` 섹션 신설
+- `ACTIVITY FEED` / `SPRINT METRICS` 병렬 구조 재정렬
+- `INFRASTRUCTURE OVERVIEW` / `MISTAKE LOG & HARNESS` 하단 운영 영역 재구성
+- 기존 프로젝트/활동/자매/관리 페이지와 연결되는 진입 동선 재정리
+
+## 제외 범위
+- 이번 Sprint에서 새 도메인 기능 추가는 하지 않음
+- 백엔드 데이터 모델을 대규모로 갈아엎지 않음
+- 기존 페이지 전체를 동시 리디자인하지 않음
+- chart 라이브러리 교체는 필요할 때만 제한적으로 수행
+
+## 태스크
+
+### TASK-070: 대시보드 v3 IA 확정 및 섹션 맵 정리
+- **담당:** 하랑이 → 나랑이
+- **상태:** pending
+- **설명:** 레퍼런스를 현행 제품에 맞게 번역한 섹션 구조/우선순위를 확정한다.
+- **산출물:**
+  - `.plans/design/ui/dashboard-design.md` 갱신
+  - 섹션별 데이터 소스 매핑 표
+- **완료 기준:**
+  - 상단바 / 자매 카드 / Active Pipeline / Activity Feed / Metrics / Infra / Mistake Log의 역할이 문서로 명확함
+
+### TASK-071: 상단 Global Status Bar + Hero Summary 개편
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `frontend/app/page.tsx`
+  - `frontend/components/**` 내 dashboard 공통 헤더/요약 관련 컴포넌트
+- **설명:**
+  - 좌측 브랜드/페이지 아이덴티티
+  - 중앙 sprint/day 또는 현재 운영 focus
+  - 우측 연결 상태/알림/관리자 프로필 요약
+  구조를 재정의한다.
+- **완료 기준:**
+  - 첫 화면 상단에서 현재 스프린트/연결 상태를 즉시 읽을 수 있음
+  - 모바일에서 세로 스택 또는 2단 구조로 무너지지 않음
+
+### TASK-072: 4자매 상태 카드 v3 재설계
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `frontend/app/page.tsx`
+  - `frontend/components/sisters/**` 또는 대시보드 상태 카드 컴포넌트
+- **설명:** 각 자매 카드에 아래 정보를 안정적으로 담는다.
+  - 이름 / 역할
+  - 현재 상태 (`IDLE`, `WORKING`, `REVIEWING`, `OFFLINE` 등)
+  - CPU / RAM 또는 대응 운영 지표
+  - 현재 작업 한 줄 요약
+- **완료 기준:**
+  - 카드 4개가 한 세트로 읽힘
+  - 색상/강조는 자매별 역할과 상태를 동시에 표현함
+  - 아바타/아이콘/텍스트 길이 차이로 카드 높이가 깨지지 않음
+
+### TASK-073: `ACTIVE PIPELINE` 시각화 도입
+- **담당:** 나랑이
+- **상태:** pending
+- **의존성:** TASK-070
+- **주요 파일:**
+  - `frontend/app/page.tsx`
+  - 새 공통 컴포넌트 생성 가능 (`frontend/components/dashboard/ActivePipeline.tsx` 등)
+- **설명:**
+  - User → Harang → Narang → Darang → Irang 흐름을 운영 그래프로 표현
+  - maker-checker loop, escalation 조건, 현재 active task를 읽을 수 있게 구성
+- **구현 메모:**
+  - SVG/HTML 혼합 구현 허용
+  - 애니메이션은 실제 active state가 있을 때만 제한적으로 사용
+  - 정적인 장식보다 상태 전달이 우선
+- **완료 기준:**
+  - 현재 누가 받고/처리하고/검토 중인지 한눈에 보임
+  - 3회 실패 escalation 같은 운영 규칙이 과하지 않게 드러남
+
+### TASK-074: `ACTIVITY FEED` / `SPRINT METRICS` 병렬 재배치
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `frontend/app/page.tsx`
+  - 기존 activity/task/metrics 컴포넌트
+- **설명:** 활동 피드와 지표를 같은 행에서 비교하는 운영 레이아웃으로 정렬한다.
+- **완료 기준:**
+  - 활동 피드는 이벤트 타입/주체/대상 task를 읽기 쉬움
+  - metrics는 total tasks, 완료율, 반복 횟수, first-pass rate, escalation 수를 빠르게 읽을 수 있음
+  - mock처럼 보이지 않도록 실제 데이터 연결 포인트가 드러남
+
+### TASK-075: `INFRASTRUCTURE OVERVIEW` / `MISTAKE LOG & HARNESS` 하단 운영 영역 구성
+- **담당:** 나랑이
+- **상태:** pending
+- **설명:** 인프라 상태 맵과 mistake/harness 규칙 영역을 하단 2열 운영 패널로 정리한다.
+- **주요 파일:**
+  - `frontend/app/page.tsx`
+  - 관련 API 데이터를 읽는 서비스/타입
+- **완료 기준:**
+  - Gateway / sisters infra / deploy access 흐름이 읽힘
+  - MISTAKE.md/하네스 규칙 로그는 운영 학습 자산처럼 보여야 함
+  - 모바일에서는 Infra → Mistake Log 순 세로 배치
+
+### TASK-076: 현행 디자인 시스템과 v3 레이아웃 정합화
+- **담당:** 나랑이
+- **상태:** pending
+- **의존성:** TASK-071 ~ TASK-075
+- **설명:** 새 레이아웃이 기존 미니멀 터미널 UI와 충돌하지 않게 색/간격/타이포/테두리 규칙을 정리한다.
+- **완료 기준:**
+  - 기존 프로젝트/활동/설정 페이지와 같은 제품군처럼 보임
+  - Tailwind 레퍼런스의 분위기를 가져오되 styled-components 기반 현행 톤과 충돌하지 않음
+
+### TASK-077: 반응형/실데이터 QA 준비
+- **담당:** 나랑이 → 다랑이
+- **상태:** pending
+- **의존성:** TASK-071 ~ TASK-076
+- **설명:** 데스크톱/태블릿/모바일 반응형과 실데이터 연결 상태를 확인하고 QA 요청 준비를 마친다.
+- **완료 기준:**
+  - Desktop / Tablet / Mobile 주요 breakpoints 확인
+  - 빈 상태 / 긴 텍스트 / offline 상태 / 데이터 없음 상태가 깨지지 않음
+  - QA 전달 시 스크린샷 또는 확인 포인트 포함
+
+## 데이터 매핑 기준
+| 섹션 | 우선 데이터 |
+|---|---|
+| Global Status Bar | current sprint, connection status, notifications, current operator |
+| Sister Cards | runtime status, role, usage metrics, current work summary |
+| Active Pipeline | latest handoff, active implementation, active review, escalation count |
+| Activity Feed | latest activities/log events/task transitions |
+| Sprint Metrics | total tasks, completion, review loops, first-pass rate, escalations |
+| Infrastructure Overview | gateway/node/server/process summary |
+| Mistake Log & Harness | latest MISTAKE/Harness rules or derived operational lessons |
+
+## UX 규칙
+- 정보 순서는 `지금 상태 → 흐름 → 근거 이벤트 → 정량 지표 → 인프라/학습 자산`
+- 카드 하나하나보다 섹션 간 관계가 더 중요함
+- hover가 없어도 중요한 정보는 보여야 함
+- 색은 상태 의미가 있을 때만 강하게 쓴다
+- `Working`, `Reviewing`, `Ready for Deploy` 같은 운영 단어는 전체 제품에서 같은 표현을 유지한다
+
+## 구현 제약
+- styled-components 구조 유지
+- 기존 공통 토큰/색 변수 최대한 재사용
+- 새 레이아웃 때문에 기존 페이지 진입 동선이 숨지면 안 됨
+- 과한 애니메이션/지속적인 repaint 유발 구현 지양
+- fake 숫자 하드코딩으로 끝내지 말고 실데이터 연결 지점을 남길 것
+
+## 검증 기준
+- 홈 화면 진입 시 `하나랑 대시보드가 무엇을 운영하는지` 즉시 이해됨
+- 4자매 상태와 현재 파이프라인이 첫 스크롤 안에서 읽힘
+- 활동/지표/인프라/학습 로그가 운영자 관점에서 자연스럽게 이어짐
+- 데스크톱/모바일 모두 정보 손실 없이 읽힘
+- 현행 미니멀 터미널 UI와 충돌하지 않음
+
+## 참고
+- 레퍼런스는 `정보 구조`를 강하게 채택
+- 비주얼은 현재 제품 톤을 유지한 상태로 70%만 차용
+- `ACTIVE PIPELINE`은 이번 v3 리디자인의 대표 섹션으로 취급

.plans/sprints/SPRINT-016.md

@@ -0,0 +1,218 @@
+# SPRINT-016: 4자매 Isometric Office Dashboard 재기획
+
+## 목표
+기존 하나랑 대시보드를 `운영 패널 중심 UI`에서 한 단계 확장해, 4자매 메인 에이전트와 17개 서브에이전트가 실제로 협업하는 흐름을 **2D 등축 투영 오피스**로 시각화하는 차세대 관제 화면으로 재기획한다.
+
+핵심은 이거야.
+- 4자매의 고정 좌석과 역할이 한눈에 보여야 해
+- 서브에이전트가 어떤 워크플로우 안에서 움직이는지 보여야 해
+- 단순 예쁜 씬이 아니라 실시간 상태/협업/채팅/서버 헬스를 같이 판단할 수 있어야 해
+- OpenClaw Gateway WebSocket을 기준으로 실제 상태를 반영해야 해
+
+## 참고 레퍼런스
+- 참고 프로젝트: `https://github.com/WW-AI-Lab/openclaw-office`
+- 채택 포인트:
+  - 2D 등축 투영 오피스
+  - 고정 좌석 + 동적 이동
+  - 상태 애니메이션 / 연결선 / 회의실 은유
+  - Chat 작업공간과 관리 패널 결합
+- 그대로 복제하지 않고, 하나랑 4자매 구조와 Lobster/Discord handoff 흐름에 맞게 번역한다.
+
+## 운영 구조
+### 메인 에이전트 (고정 데스크 / 독립 OpenClaw 인스턴스)
+- 하랑이 (Planning)
+- 나랑이 (Dev)
+- 다랑이 (QA)
+- 이랑이 (Infra)
+
+### 서브에이전트
+- 하랑이: `planner`, `task-tracker`, `prd-writer`
+- 나랑이: `worker`, `db-designer`, `test-writer`, `refactorer`
+- 다랑이: `reviewer`, `code-reviewer`, `qa-tester`, `security-auditor`, `ux-reviewer`
+- 이랑이: `deploy-manager`, `db-manager`, `nginx-manager`, `monitoring`, `dns-manager`
+
+총 21개 에이전트 (main 4 + sub 17)
+
+## 파이프라인 모델
+### 자매 내부
+- Lobster 워크플로우 기반 순차 실행
+- 예:
+  - `plan-sprint.lobster`
+  - `implement-sprint.lobster`
+  - `review-sprint.lobster`
+  - `deploy-check.lobster`
+
+### 자매 간
+- Discord 멘션 기반 자연어 핸드오프
+- `자기야 → 하랑이 → 나랑이 → 다랑이 → 이랑이`
+- 실패 시 `다랑이 → 나랑이` 되돌림 루프 지원
+
+## 제품 목표
+1. 4자매와 서브에이전트 협업 구조를 직관적으로 보여준다
+2. OpenClaw Gateway WebSocket 기반 실시간 상태 모니터링을 제공한다
+3. 자매 선택 직접 채팅과 운영 관제를 한 제품 안에 통합한다
+4. Lobster 워크플로우 / 스프린트 / QA / 배포 흐름을 하나의 모델로 묶는다
+5. 서버 헬스와 에이전트 헬스를 같은 맥락에서 본다
+
+## 범위
+- 메인 오피스 대시보드 (`/` 또는 신규 workspace landing)
+- 에이전트 상태 시각화
+- 회의실/협업 연결선/동적 이동 규칙
+- 자매 선택 직접 채팅 인터페이스
+- 파이프라인 현황 패널
+- 서버 상태 패널
+- 모바일/태블릿 대응 전략
+- 데이터 소스 / WebSocket 이벤트 / 폴링 보정 전략 문서화
+
+## 제외 범위
+- 이번 Sprint에서 실제 Gateway 프로토콜을 새로 정의하지 않음
+- 3D 전환 안 함
+- 음성/영상 통화 기능 없음
+- 에이전트 생성/삭제 전체 관리 콘솔을 이번 Sprint 핵심으로 두지 않음
+
+## 정보 구조
+### 1. Office Scene
+- 4자매 고정 좌석
+- 각 자매 주변에 자기 서브에이전트 풀 배치
+- 상태에 따라 idle / thinking / tool_calling / speaking / error 시각화
+- 회의실 / 작업대 / 대기 구역 / 인프라 구역 구분
+
+### 2. Agent Detail Layer
+- 선택한 자매/서브에이전트 상세
+- 현재 세션 / 최근 메시지 / tool call / 리소스 지표
+- 최근 handoff / 현재 워크플로우 단계
+
+### 3. Chat Workspace
+- 자매 선택 direct chat
+- 최근 대화 히스토리
+- 작업 지시 / 응답 / 툴 호출 상태 확인
+
+### 4. Pipeline Panel
+- 현재 Sprint
+- active Lobster workflow
+- cycle / retry / review loop
+- handoff 상태
+- deploy gate / approval 상태
+
+### 5. Server Health Panel
+- 4자매 서버 헬스
+- Dev 서버
+- Docker/infra 상태
+- heartbeat / websocket / reconnect 상태
+
+## 디자인 원칙
+1. **은유는 강하게, 판단은 더 강하게**
+   - 오피스는 분위기용이 아니라 상태 판단용이야.
+2. **실시간 우선, 추정은 정직하게**
+   - live / snapshot / doc-derived / fallback 구분 유지
+3. **고정 좌석 + 동적 이동**
+   - 메인 자매는 늘 같은 자리에 있어야 함
+   - 서브에이전트만 워크플로우에 따라 이동/연결
+4. **4자매 중심성 유지**
+   - 21개 전체를 보여도 중심은 언제나 하랑/나랑/다랑/이랑이야
+5. **운영 패널과 오피스 뷰 결합**
+   - 보기 좋은 씬만 있고 운영 판단이 안 되면 실패
+
+## 기술 방향
+- Frontend: 기존 Next.js + styled-components 유지
+- Backend: 기존 Nest.js + Prisma 유지
+- 실시간: OpenClaw Gateway WebSocket 중심
+- 보조 동기화: low-frequency polling snapshot 허용
+- 렌더링: SVG + CSS animation 또는 canvas-lite 검토 가능
+- 상태 저장: 기존 구조 유지하되 office scene 전용 store 계층 검토
+
+## 데이터 소스 기준
+| 대상 | 우선 소스 |
+|---|---|
+| 메인 에이전트 상태 | 4자매 Gateway WebSocket |
+| 서브에이전트 상태 | 각 자매 runtime/agent event + workflow 상태 |
+| 협업 연결선 | handoff / workflow transition / event stream |
+| 채팅 인터페이스 | session/chat API |
+| 파이프라인 현황 | Lobster workflow state + activity log |
+| 서버 헬스 | admin/system/health 계열 API |
+
+## 태스크
+
+### TASK-091: 제품 PRD 및 IA 재정의
+- **담당:** 하랑이
+- **상태:** pending
+- **산출물:**
+  - `docs/product-specs/openclaw-office-dashboard-prd.md`
+  - `.plans/OVERVIEW.md` 갱신
+- **완료 기준:**
+  - 오피스 대시보드 비전/핵심 사용자/핵심 흐름/핵심 화면이 문서화됨
+
+### TASK-092: 오피스 씬 레이아웃 설계
+- **담당:** 하랑이 → 나랑이
+- **상태:** pending
+- **산출물:**
+  - `.plans/design/ui/office-dashboard-design.md`
+- **완료 기준:**
+  - 4자매 좌석 / 서브에이전트 위치 / 회의실 / 인프라 구역 구조가 정의됨
+
+### TASK-093: 채팅 워크스페이스 설계
+- **담당:** 하랑이 → 나랑이
+- **상태:** pending
+- **산출물:**
+  - `.plans/design/ui/office-chat-design.md`
+- **완료 기준:**
+  - 자매 선택 direct chat 구조와 패널 관계가 정의됨
+
+### TASK-094: Gateway/WebSocket 실시간 모델 정의
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 범위:**
+  - 4개 Gateway 연결 전략
+  - presence / health / workflow / agent event 정리
+  - reconnect / reconciliation 규칙
+- **완료 기준:**
+  - live / snapshot / fallback 구분이 문서와 코드 양쪽에서 유지됨
+
+### TASK-095: 메인 오피스 씬 구현
+- **담당:** 나랑이
+- **상태:** pending
+- **완료 기준:**
+  - 4자매 고정 좌석과 서브에이전트 동적 이동이 구현됨
+  - 상태별 시각 표현이 동작함
+
+### TASK-096: 협업 시각화 + 회의실 이동 구현
+- **담당:** 나랑이
+- **상태:** pending
+- **완료 기준:**
+  - handoff 연결선
+  - 회의실 이동 상태
+  - review/deploy loop 표현이 동작함
+
+### TASK-097: 직접 채팅 인터페이스 구현
+- **담당:** 나랑이
+- **상태:** pending
+- **완료 기준:**
+  - 자매 선택 direct chat 가능
+  - 최근 대화/응답/상태가 확인됨
+
+### TASK-098: 서버 헬스 패널 구현
+- **담당:** 나랑이
+- **상태:** pending
+- **완료 기준:**
+  - 4자매 + Dev + Docker 서버 상태가 함께 보임
+
+### TASK-099: QA / 모바일 / 실브라우저 검증
+- **담당:** 다랑이
+- **상태:** pending
+- **완료 기준:**
+  - Desktop / Tablet / Mobile 실브라우저 기준 확인
+  - live/snapshot 구분 검증
+  - 성능/가독성/blocker 확인
+
+## 권장 구현 순서
+1. PRD / IA / 오피스 씬 문서화
+2. Gateway 실시간 모델 정리
+3. 메인 오피스 씬 구현
+4. 연결선 / 회의실 / 채팅 / 패널 구현
+5. QA + 모바일 검증
+
+## 완료 기준
+- 4자매와 서브에이전트 구조가 오피스 화면에서 한눈에 보임
+- 실시간 상태와 파이프라인이 실제 운영 흐름과 맞음
+- 채팅/헬스/파이프라인이 오피스 뷰와 분리되지 않고 자연스럽게 이어짐
+- 문서, 설계, 구현 기준이 `.plans/`에 정리됨

backend/package.json

@@ -6,6 +6,9 @@
   "private": true,
   "license": "UNLICENSED",
   "scripts": {
+    "prisma:generate": "prisma generate",
+    "prebuild": "npm run prisma:generate",
+    "pretest": "npm run prisma:generate",
     "build": "nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
     "start": "nest start",

backend/src/activity/activity.controller.ts

@@ -6,10 +6,7 @@ export class ActivityController {
   constructor(private readonly activityService: ActivityService) {}
 
   @Get('activity')
-  getFeed(
+  getFeed(@Query('limit') limit?: string, @Query('offset') offset?: string) {
-    @Query('limit') limit?: string,
-    @Query('offset') offset?: string,
-  ) {
     return this.activityService.getFeed(
       limit ? parseInt(limit, 10) : 50,
       offset ? parseInt(offset, 10) : 0,

backend/src/activity/activity.service.spec.ts

@@ -7,7 +7,9 @@ describe('ActivityService', () => {
 
   const mockPrisma = {
     activityLog: {
-      create: jest.fn().mockResolvedValue({ id: 1, action: 'test', createdAt: new Date() }),
+      create: jest
+        .fn()
+        .mockResolvedValue({ id: 1, action: 'test', createdAt: new Date() }),
       findMany: jest.fn().mockResolvedValue([]),
       count: jest.fn().mockResolvedValue(0),
     },

backend/src/activity/activity.service.ts

@@ -15,7 +15,11 @@ function sanitizeActivityDetail(detail?: string | null): string | undefined {
   const raw = detail.trim();
 
   // 내부 stderr/명령문 직접 노출 금지
-  if (/stderr:/i.test(raw) || /command not found/i.test(raw) || /bash:\s*line/i.test(raw)) {
+  if (
+    /stderr:/i.test(raw) ||
+    /command not found/i.test(raw) ||
+    /bash:\s*line/i.test(raw)
+  ) {
     return '내부 작업 중 오류가 발생했어. 자세한 시스템 로그는 관리자 로그에서 확인할 수 있어.';
   }
 
@@ -66,7 +70,10 @@ export class ActivityService {
       this.prisma.activityLog.count(),
     ]);
     return {
-      items: items.map((item) => ({ ...item, detail: sanitizeActivityDetail(item.detail) })),
+      items: items.map((item) => ({
+        ...item,
+        detail: sanitizeActivityDetail(item.detail),
+      })),
       total,
       limit,
       offset,
@@ -87,7 +94,10 @@ export class ActivityService {
       this.prisma.activityLog.count({ where: { projectId } }),
     ]);
     return {
-      items: items.map((item) => ({ ...item, detail: sanitizeActivityDetail(item.detail) })),
+      items: items.map((item) => ({
+        ...item,
+        detail: sanitizeActivityDetail(item.detail),
+      })),
       total,
       limit,
       offset,

backend/src/admin/admin.service.spec.ts

@@ -10,9 +10,16 @@ describe('AdminService', () => {
   let service: AdminService;
 
   const mockSister = {
-    id: 2, name: 'narang', ip: '10.10.10.216', user: 'narang',
+    id: 2,
-    lxcId: 105, status: 'online', lastSeen: new Date(),
+    name: 'narang',
-    sshKeyPath: null, createdAt: new Date(), updatedAt: new Date(),
+    ip: '10.10.10.216',
+    user: 'narang',
+    lxcId: 105,
+    status: 'online',
+    lastSeen: new Date(),
+    sshKeyPath: null,
+    createdAt: new Date(),
+    updatedAt: new Date(),
   };
 
   const mockPrisma = {
@@ -30,7 +37,9 @@ describe('AdminService', () => {
         { provide: ActivityService, useValue: mockActivity },
         {
           provide: ConfigService,
-          useValue: { get: jest.fn().mockReturnValue('/home/narang/.ssh/id_rsa') },
+          useValue: {
+            get: jest.fn().mockReturnValue('/home/narang/.ssh/id_rsa'),
+          },
         },
       ],
     }).compile();
@@ -41,7 +50,11 @@ describe('AdminService', () => {
   });
 
   it('restartSister: SSH 성공 시 success=true', async () => {
-    mockSsh.executeCommand.mockResolvedValue({ stdout: 'RESTART_OK', stderr: '', code: 0 });
+    mockSsh.executeCommand.mockResolvedValue({
+      stdout: 'RESTART_OK',
+      stderr: '',
+      code: 0,
+    });
 
     const result = await service.restartSister('narang');
 

backend/src/admin/admin.service.ts

@@ -5,7 +5,13 @@ import { SshService } from '../sisters/ssh.service';
 import { ActivityService } from '../activity/activity.service';
 import { SisterName } from '../common/sister-name.pipe';
 
-const ALLOWED_HARNESS_FILES = ['AGENTS.md', 'SOUL.md', 'PROTOCOL.md', 'TOOLS.md', 'HEARTBEAT.md'] as const;
+const ALLOWED_HARNESS_FILES = [
+  'AGENTS.md',
+  'SOUL.md',
+  'PROTOCOL.md',
+  'TOOLS.md',
+  'HEARTBEAT.md',
+] as const;
 type HarnessFile = (typeof ALLOWED_HARNESS_FILES)[number];
 
 @Injectable()
@@ -36,7 +42,9 @@ export class AdminService {
       await this.activity.log({
         sisterId: sister.id,
         action: 'gateway_restart',
-        detail: success ? 'Gateway restart successful' : `stderr: ${result.stderr}`,
+        detail: success
+          ? 'Gateway restart successful'
+          : `stderr: ${result.stderr}`,
       });
 
       return { success, output: result.stdout, error: result.stderr || null };
@@ -68,7 +76,9 @@ export class AdminService {
       await this.activity.log({
         sisterId: sister.id,
         action: 'session_reset',
-        detail: success ? 'Session reset successful' : `stderr: ${result.stderr}`,
+        detail: success
+          ? 'Session reset successful'
+          : `stderr: ${result.stderr}`,
       });
 
       return { success, output: result.stdout, error: result.stderr || null };
@@ -102,7 +112,7 @@ export class AdminService {
     const keyPath = this.getKeyPath();
 
     // 내용에서 위험한 셸 escape + null byte 방지
-    const escaped = content.replace(/\x00/g, '').replace(/'/g, "'\\''");
+    const escaped = content.split('\0').join('').replace(/'/g, "'\\''");
 
     try {
       const result = await this.ssh.executeCommand(
@@ -162,7 +172,9 @@ export class AdminService {
   }
 
   private async getSister(name: SisterName) {
-    const sister = await this.prisma.sisterConfig.findUnique({ where: { name } });
+    const sister = await this.prisma.sisterConfig.findUnique({
+      where: { name },
+    });
     if (!sister) throw new Error(`Sister ${name} not found`);
     return sister;
   }

backend/src/app.module.ts

@@ -17,6 +17,7 @@ import { EventsModule } from './events/events.module';
 import { CostsModule } from './costs/costs.module';
 import { GiteaSyncModule } from './gitea-sync/gitea-sync.module';
 import { SettingsModule } from './settings/settings.module';
+import { DashboardModule } from './dashboard/dashboard.module';
 
 @Module({
   imports: [
@@ -36,6 +37,7 @@ import { SettingsModule } from './settings/settings.module';
     CostsModule,
     GiteaSyncModule,
     SettingsModule,
+    DashboardModule,
   ],
   controllers: [AppController],
   providers: [AppService],

backend/src/auth/auth-cookies.ts

@@ -0,0 +1,128 @@
+import { randomBytes, timingSafeEqual } from 'crypto';
+import type { CookieOptions, Request, Response } from 'express';
+
+export const ACCESS_TOKEN_COOKIE = 'hanarang_access_token';
+export const REFRESH_TOKEN_COOKIE = 'hanarang_refresh_token';
+export const CSRF_TOKEN_COOKIE = 'hanarang_csrf_token';
+
+const ACCESS_TOKEN_MAX_AGE_MS = 15 * 60 * 1000;
+const REFRESH_TOKEN_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;
+
+function isHttpsRequest(req?: Request): boolean {
+  const forwardedProto = req?.headers['x-forwarded-proto'];
+  const protocol = Array.isArray(forwardedProto)
+    ? forwardedProto[0]
+    : forwardedProto;
+
+  return (
+    process.env.NODE_ENV === 'production' ||
+    req?.secure === true ||
+    protocol === 'https'
+  );
+}
+
+function baseCookieOptions(req?: Request): CookieOptions {
+  return {
+    path: '/',
+    secure: isHttpsRequest(req),
+  };
+}
+
+export function parseCookieHeader(
+  header?: string | string[],
+): Record<string, string> {
+  const raw = Array.isArray(header) ? header.join(';') : header;
+  if (!raw) return {};
+
+  return raw
+    .split(';')
+    .map((part) => part.trim())
+    .filter((part) => part.length > 0)
+    .reduce<Record<string, string>>((cookies, part) => {
+      const eqIndex = part.indexOf('=');
+      if (eqIndex === -1) return cookies;
+
+      const key = decodeURIComponent(part.slice(0, eqIndex).trim());
+      const value = decodeURIComponent(part.slice(eqIndex + 1).trim());
+      cookies[key] = value;
+      return cookies;
+    }, {});
+}
+
+export function getCookieValue(
+  req: Pick<Request, 'headers'>,
+  name: string,
+): string | undefined {
+  return parseCookieHeader(req.headers.cookie)[name];
+}
+
+export function generateCsrfToken(): string {
+  return randomBytes(32).toString('hex');
+}
+
+export function hasValidCsrfToken(req: Request): boolean {
+  const cookieToken = getCookieValue(req, CSRF_TOKEN_COOKIE);
+  const headerToken = req.headers['x-csrf-token'];
+  const requestToken = Array.isArray(headerToken) ? headerToken[0] : headerToken;
+
+  if (!cookieToken || !requestToken) return false;
+
+  const cookieBuffer = Buffer.from(cookieToken);
+  const requestBuffer = Buffer.from(requestToken);
+
+  if (cookieBuffer.length !== requestBuffer.length) return false;
+
+  try {
+    return timingSafeEqual(cookieBuffer, requestBuffer);
+  } catch {
+    return false;
+  }
+}
+
+export function setAuthCookies(
+  res: Response,
+  req: Request,
+  tokens: { accessToken: string; refreshToken: string },
+  csrfToken = generateCsrfToken(),
+) {
+  res.cookie(ACCESS_TOKEN_COOKIE, tokens.accessToken, {
+    ...baseCookieOptions(req),
+    httpOnly: true,
+    sameSite: 'lax',
+    maxAge: ACCESS_TOKEN_MAX_AGE_MS,
+  });
+
+  res.cookie(REFRESH_TOKEN_COOKIE, tokens.refreshToken, {
+    ...baseCookieOptions(req),
+    httpOnly: true,
+    sameSite: 'strict',
+    maxAge: REFRESH_TOKEN_MAX_AGE_MS,
+  });
+
+  res.cookie(CSRF_TOKEN_COOKIE, csrfToken, {
+    ...baseCookieOptions(req),
+    httpOnly: false,
+    sameSite: 'strict',
+    maxAge: REFRESH_TOKEN_MAX_AGE_MS,
+  });
+
+  return csrfToken;
+}
+
+export function clearAuthCookies(res: Response, req?: Request) {
+  res.clearCookie(ACCESS_TOKEN_COOKIE, {
+    ...baseCookieOptions(req),
+    httpOnly: true,
+    sameSite: 'lax',
+  });
+  res.clearCookie(REFRESH_TOKEN_COOKIE, {
+    ...baseCookieOptions(req),
+    httpOnly: true,
+    sameSite: 'strict',
+  });
+  res.clearCookie(CSRF_TOKEN_COOKIE, {
+    ...baseCookieOptions(req),
+    httpOnly: false,
+    sameSite: 'strict',
+  });
+}

backend/src/auth/auth.controller.ts

@@ -1,37 +1,96 @@
 import {
-  Controller,
+  BadRequestException,
-  Post,
-  Get,
   Body,
-  Headers,
+  Controller,
+  Get,
+  HttpCode,
+  Post,
+  Req,
+  Res,
+  UnauthorizedException,
   UseGuards,
   Request,
-  BadRequestException,
 } from '@nestjs/common';
-import { AuthService, LoginDto } from './auth.service';
+import type {
-import { JwtGuard } from './jwt.guard';
+  Request as ExpressRequest,
+  Response as ExpressResponse,
+} from 'express';
 import { Throttle, ThrottlerGuard } from '@nestjs/throttler';
+import { AuthService, LoginDto } from './auth.service';
+import {
+  getCookieValue,
+  hasValidCsrfToken,
+  setAuthCookies,
+  clearAuthCookies,
+  REFRESH_TOKEN_COOKIE,
+} from './auth-cookies';
+import { JwtGuard } from './jwt.guard';
+
+interface AuthenticatedRequest extends ExpressRequest {
+  user: { userId: number };
+}
 
 @Controller('api/auth')
 export class AuthController {
   constructor(private readonly authService: AuthService) {}
 
+  @HttpCode(200)
   @UseGuards(ThrottlerGuard)
   @Throttle({ default: { limit: 5, ttl: 60000 } })
   @Post('login')
-  login(@Body() dto: LoginDto) {
+  async login(
-    return this.authService.login(dto);
+    @Body() dto: LoginDto,
+    @Req() req: ExpressRequest,
+    @Res({ passthrough: true }) res: ExpressResponse,
+  ) {
+    const tokens = await this.authService.login(dto);
+    setAuthCookies(res, req, tokens);
+
+    return {
+      username: tokens.username,
+      role: tokens.role,
+    };
   }
 
+  @HttpCode(200)
+  @UseGuards(ThrottlerGuard)
+  @Throttle({ default: { limit: 3, ttl: 60000 } })
   @Post('refresh')
-  refresh(@Headers('x-refresh-token') token: string) {
+  async refresh(
+    @Req() req: ExpressRequest,
+    @Res({ passthrough: true }) res: ExpressResponse,
+  ) {
+    const cookieToken = getCookieValue(req, REFRESH_TOKEN_COOKIE);
+    const headerToken = req.headers['x-refresh-token'];
+    const token = cookieToken ?? (Array.isArray(headerToken) ? headerToken[0] : headerToken);
+
     if (!token) throw new BadRequestException('Refresh token required');
-    return this.authService.refresh(token);
+    if (cookieToken && !hasValidCsrfToken(req)) {
+      throw new UnauthorizedException('Invalid CSRF token');
+    }
+
+    const tokens = await this.authService.refresh(token);
+    setAuthCookies(res, req, tokens);
+
+    return {
+      username: tokens.username,
+      role: tokens.role,
+    };
+  }
+
+  @HttpCode(200)
+  @Post('logout')
+  logout(
+    @Req() req: ExpressRequest,
+    @Res({ passthrough: true }) res: ExpressResponse,
+  ) {
+    clearAuthCookies(res, req);
+    return { ok: true };
   }
 
   @UseGuards(JwtGuard)
   @Get('me')
-  getMe(@Request() req: any) {
+  getMe(@Request() req: AuthenticatedRequest) {
     return this.authService.getMe(req.user.userId);
   }
 }

backend/src/auth/auth.service.ts

@@ -6,10 +6,12 @@ import * as bcrypt from 'bcrypt';
 import { IsString, IsNotEmpty } from 'class-validator';
 
 export class LoginDto {
-  @IsString() @IsNotEmpty()
+  @IsString()
+  @IsNotEmpty()
   username!: string;
 
-  @IsString() @IsNotEmpty()
+  @IsString()
+  @IsNotEmpty()
   password!: string;
 }
 
@@ -22,7 +24,9 @@ export class AuthService {
   ) {}
 
   async login(dto: LoginDto) {
-    const user = await this.prisma.user.findUnique({ where: { username: dto.username } });
+    const user = await this.prisma.user.findUnique({
+      where: { username: dto.username },
+    });
     if (!user) throw new UnauthorizedException('Invalid credentials');
 
     const ok = await bcrypt.compare(dto.password, user.password);
@@ -33,11 +37,16 @@ export class AuthService {
 
   async refresh(refreshToken: string) {
     try {
-      const payload = this.jwt.verify<{ sub: number; username: string; role: string }>(
+      const payload = this.jwt.verify<{
-        refreshToken,
+        sub: number;
-        { secret: this.config.get<string>('JWT_SECRET') + '_refresh' },
+        username: string;
-      );
+        role: string;
-      const user = await this.prisma.user.findUnique({ where: { id: payload.sub } });
+      }>(refreshToken, {
+        secret: this.config.get<string>('JWT_SECRET') + '_refresh',
+      });
+      const user = await this.prisma.user.findUnique({
+        where: { id: payload.sub },
+      });
       if (!user) throw new UnauthorizedException();
       return this.signTokens(user.id, user.username, user.role);
     } catch {
@@ -60,7 +69,10 @@ export class AuthService {
     const payload = { sub: userId, username, role };
 
     const accessToken = this.jwt.sign(payload, { secret, expiresIn: '15m' });
-    const refreshToken = this.jwt.sign(payload, { secret: secret + '_refresh', expiresIn: '7d' });
+    const refreshToken = this.jwt.sign(payload, {
+      secret: secret + '_refresh',
+      expiresIn: '7d',
+    });
 
     return { accessToken, refreshToken, username, role };
   }

backend/src/auth/jwt.strategy.ts

@@ -1,7 +1,9 @@
 import { Injectable, UnauthorizedException } from '@nestjs/common';
-import { PassportStrategy } from '@nestjs/passport';
-import { ExtractJwt, Strategy } from 'passport-jwt';
 import { ConfigService } from '@nestjs/config';
+import { PassportStrategy } from '@nestjs/passport';
+import type { Request } from 'express';
+import { ExtractJwt, Strategy } from 'passport-jwt';
+import { ACCESS_TOKEN_COOKIE, getCookieValue } from './auth-cookies';
 
 export interface JwtPayload {
   sub: number;
@@ -9,13 +11,21 @@ export interface JwtPayload {
   role: string;
 }
 
+function cookieTokenExtractor(req?: Request): string | null {
+  if (!req) return null;
+  return getCookieValue(req, ACCESS_TOKEN_COOKIE) ?? null;
+}
+
 @Injectable()
 export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
   constructor(config: ConfigService) {
     const secret = config.get<string>('JWT_SECRET');
     if (!secret) throw new Error('JWT_SECRET not set');
     super({
-      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+      jwtFromRequest: ExtractJwt.fromExtractors([
+        cookieTokenExtractor,
+        ExtractJwt.fromAuthHeaderAsBearerToken(),
+      ]),
       ignoreExpiration: false,
       secretOrKey: secret,
     });
@@ -23,6 +33,10 @@ export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
 
   validate(payload: JwtPayload) {
     if (!payload?.sub) throw new UnauthorizedException();
-    return { userId: payload.sub, username: payload.username, role: payload.role };
+    return {
+      userId: payload.sub,
+      username: payload.username,
+      role: payload.role,
+    };
   }
 }

backend/src/auth/role.guard.ts

@@ -1,28 +1,46 @@
-import { Injectable, CanActivate, ExecutionContext, ForbiddenException, SetMetadata } from '@nestjs/common';
+import {
+  Injectable,
+  CanActivate,
+  ExecutionContext,
+  ForbiddenException,
+  SetMetadata,
+} from '@nestjs/common';
 import { Reflector } from '@nestjs/core';
+import type { Request as ExpressRequest } from 'express';
 
 export const ROLES_KEY = 'roles';
 export const Roles = (...roles: string[]) => SetMetadata(ROLES_KEY, roles);
 
+interface RoleUser {
+  role: string;
+}
+
+interface RequestWithUser extends ExpressRequest {
+  user?: RoleUser;
+}
+
 @Injectable()
 export class RoleGuard implements CanActivate {
   constructor(private readonly reflector: Reflector) {}
 
   canActivate(context: ExecutionContext): boolean {
-    const requiredRoles = this.reflector.getAllAndOverride<string[]>(ROLES_KEY, [
+    const requiredRoles = this.reflector.getAllAndOverride<string[]>(
-      context.getHandler(),
+      ROLES_KEY,
-      context.getClass(),
+      [context.getHandler(), context.getClass()],
-    ]);
+    );
 
     if (!requiredRoles || requiredRoles.length === 0) return true;
 
-    const request = context.switchToHttp().getRequest();
+    const request = context.switchToHttp().getRequest<RequestWithUser>();
     const user = request.user;
 
     if (!user) throw new ForbiddenException('Authentication required');
 
     const hasRole = requiredRoles.includes(user.role);
-    if (!hasRole) throw new ForbiddenException(`Role '${user.role}' not authorized. Required: ${requiredRoles.join(', ')}`);
+    if (!hasRole)
+      throw new ForbiddenException(
+        `Role '${user.role}' not authorized. Required: ${requiredRoles.join(', ')}`,
+      );
 
     return true;
   }

backend/src/costs/costs.controller.ts

@@ -14,7 +14,9 @@ export class CostsController {
   @Get()
   getCosts(@Query('period') period?: string) {
     const validPeriods: CostPeriod[] = ['day', 'week', 'month'];
-    const p = validPeriods.includes(period as CostPeriod) ? (period as CostPeriod) : 'week';
+    const p = validPeriods.includes(period as CostPeriod)
+      ? (period as CostPeriod)
+      : 'week';
     return this.costsService.getCosts(p);
   }
 

backend/src/costs/costs.service.ts

@@ -14,8 +14,6 @@ const MODEL_PRICING: Record<string, { input: number; output: number }> = {
   default: { input: 3.0, output: 15.0 },
 };
 
-const SISTER_NAMES: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
-
 export type CostPeriod = 'day' | 'week' | 'month';
 
 @Injectable()
@@ -38,14 +36,23 @@ export class CostsService {
       this.getTimeline(since, period),
     ]);
 
-    return { period, since: since.toISOString(), summary, bySister, byModel, timeline };
+    return {
+      period,
+      since: since.toISOString(),
+      summary,
+      bySister,
+      byModel,
+      timeline,
+    };
   }
 
   async recordCosts(sisterName: SisterName) {
     const keyPath = this.config.get<string>('SSH_KEY_PATH');
     if (!keyPath) return;
 
-    const sister = await this.prisma.sisterConfig.findUnique({ where: { name: sisterName } });
+    const sister = await this.prisma.sisterConfig.findUnique({
+      where: { name: sisterName },
+    });
     if (!sister) return;
 
     try {
@@ -99,7 +106,12 @@ export class CostsService {
   private async getSummary(since: Date) {
     const result = await this.prisma.costLog.aggregate({
       where: { recordedAt: { gte: since } },
-      _sum: { inputTokens: true, outputTokens: true, totalTokens: true, estimatedUsd: true },
+      _sum: {
+        inputTokens: true,
+        outputTokens: true,
+        totalTokens: true,
+        estimatedUsd: true,
+      },
       _count: true,
     });
 
@@ -145,14 +157,23 @@ export class CostsService {
   }
 
   private async getTimeline(since: Date, period: CostPeriod) {
+    void period;
     const logs = await this.prisma.costLog.findMany({
       where: { recordedAt: { gte: since } },
       orderBy: { recordedAt: 'asc' },
-      select: { sisterName: true, totalTokens: true, estimatedUsd: true, recordedAt: true },
+      select: {
+        sisterName: true,
+        totalTokens: true,
+        estimatedUsd: true,
+        recordedAt: true,
+      },
     });
 
     // 날짜별 집계
-    const grouped: Record<string, { date: string; totalTokens: number; estimatedUsd: number }> = {};
+    const grouped: Record<
+      string,
+      { date: string; totalTokens: number; estimatedUsd: number }
+    > = {};
 
     for (const log of logs) {
       const dateKey = log.recordedAt.toISOString().slice(0, 10);
@@ -172,9 +193,12 @@ export class CostsService {
   private getSince(period: CostPeriod): Date {
     const now = new Date();
     switch (period) {
-      case 'day': return new Date(now.getTime() - 24 * 60 * 60 * 1000);
+      case 'day':
-      case 'week': return new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+        return new Date(now.getTime() - 24 * 60 * 60 * 1000);
-      case 'month': return new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+      case 'week':
+        return new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+      case 'month':
+        return new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
     }
   }
 }

backend/src/dashboard/dashboard.controller.ts

@@ -0,0 +1,12 @@
+import { Controller, Get } from '@nestjs/common';
+import { DashboardService } from './dashboard.service';
+
+@Controller('api/dashboard')
+export class DashboardController {
+  constructor(private readonly dashboardService: DashboardService) {}
+
+  @Get('ops')
+  getOpsBoard(): Promise<any> {
+    return this.dashboardService.getOpsBoard();
+  }
+}

backend/src/dashboard/dashboard.module.ts

@@ -0,0 +1,14 @@
+import { Module } from '@nestjs/common';
+import { DashboardController } from './dashboard.controller';
+import { DashboardService } from './dashboard.service';
+import { PrismaModule } from '../prisma/prisma.module';
+import { ProjectsModule } from '../projects/projects.module';
+import { GiteaModule } from '../gitea/gitea.module';
+
+@Module({
+  imports: [PrismaModule, ProjectsModule, GiteaModule],
+  controllers: [DashboardController],
+  providers: [DashboardService],
+  exports: [DashboardService],
+})
+export class DashboardModule {}

backend/src/dashboard/dashboard.service.ts

@@ -0,0 +1,325 @@
+import { Injectable } from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
+import { ProjectsService } from '../projects/projects.service';
+import { GiteaService } from '../gitea/gitea.service';
+
+interface ActivityRecord {
+  id: number;
+  action: string;
+  detail: string | null;
+  createdAt: Date;
+  sister: { name: string } | null;
+  project: { name: string } | null;
+}
+
+interface OpsBoardItem {
+  id: string;
+  title: string;
+  body: string;
+  tone: 'default' | 'warn' | 'ok' | 'active';
+  author: string;
+  time: string;
+  category: string;
+  source: string;
+}
+
+interface FreshnessMeta {
+  generatedAt: string;
+  activityLatestAt: string | null;
+  sistersLatestAt: string | null;
+  qaDocLatestAt: string | null;
+}
+
+const QA_PATH_CANDIDATES = ['.plans/qa/', '.qa/'];
+const SISTER_ROLES: Record<string, string> = {
+  harang: 'Plan & Assign',
+  narang: 'Implement',
+  darang: 'Review / QA',
+  erang: 'Deploy / Infra',
+};
+
+function toneFromText(text: string): 'default' | 'warn' | 'ok' | 'active' {
+  const normalized = text.toLowerCase();
+  if (/(fail|error|blocker|offline|invalid|drift)/.test(normalized))
+    return 'warn';
+  if (/(passed|deploy|merged|restart_ok|write_ok|successful)/.test(normalized))
+    return 'ok';
+  if (/(review|qa|handoff|sync|update)/.test(normalized)) return 'active';
+  return 'default';
+}
+
+function nodeStateFromEvidence(params: {
+  sisterStatus?: string;
+  activity?: ActivityRecord | null;
+  name: string;
+}): 'idle' | 'active' | 'review' | 'blocked' | 'ready' {
+  const { sisterStatus, activity, name } = params;
+  const text =
+    `${activity?.action ?? ''} ${activity?.detail ?? ''}`.toLowerCase();
+
+  if (name !== 'user' && sisterStatus === 'offline') return 'blocked';
+  if (/(review|qa)/.test(text)) return 'review';
+  if (
+    name === 'erang' &&
+    /(deploy|merged|ready for deploy|deployed)/.test(text)
+  )
+    return 'ready';
+  if (sisterStatus === 'working') return 'active';
+  if (activity) return 'ready';
+  return 'idle';
+}
+
+function summarizeActivity(
+  activity?: ActivityRecord | null,
+  fallback = 'NO EVENT',
+) {
+  return (
+    activity?.detail?.trim() || activity?.action?.replace(/_/g, ' ') || fallback
+  );
+}
+
+function parseQaSummary(content: string): string {
+  const lines = content.split(/\r?\n/).map((line) => line.trim());
+  const taskLine = lines.find((line) => /^###\s+/.test(line));
+  if (taskLine) return taskLine.replace(/^###\s+/, '').trim();
+  const bullet = lines.find((line) => /^-\s+/.test(line));
+  if (bullet) return bullet.replace(/^-\s+/, '').trim();
+  return (
+    lines.find((line) => line.length > 0 && !line.startsWith('#')) ?? 'QA note'
+  );
+}
+
+function inferQaAuthor(path: string, content: string): string {
+  if (/darang/i.test(path) || /다랑/i.test(content)) return '다랑이';
+  if (/harang/i.test(path) || /하랑/i.test(content)) return '하랑이';
+  return 'QA Doc';
+}
+
+function extractRepoName(repoUrl: string): string {
+  return repoUrl.replace(/\/+$/, '').split('/').pop() ?? '';
+}
+
+@Injectable()
+export class DashboardService {
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly projectsService: ProjectsService,
+    private readonly gitea: GiteaService,
+  ) {}
+
+  async getOpsBoard() {
+    const [projects, sisters, rawActivities] = await Promise.all([
+      this.projectsService.getProjects(),
+      this.prisma.sisterConfig.findMany({ orderBy: { id: 'asc' } }),
+      this.prisma.activityLog.findMany({
+        orderBy: { createdAt: 'desc' },
+        take: 40,
+        include: {
+          sister: { select: { name: true } },
+          project: { select: { name: true } },
+        },
+      }),
+    ]);
+
+    const activities = rawActivities as ActivityRecord[];
+    const latestProjectActivity =
+      activities.find((item) => item.project?.name) ?? null;
+    const latestBySister = new Map<string, ActivityRecord>();
+    for (const item of activities) {
+      if (item.sister?.name && !latestBySister.has(item.sister.name)) {
+        latestBySister.set(item.sister.name, item);
+      }
+    }
+
+    const focusProject = latestProjectActivity?.project?.name
+      ? (projects.find(
+          (project) => project.name === latestProjectActivity.project?.name,
+        ) ?? null)
+      : (projects.find((project) =>
+          ['IMPLEMENT', 'QA', 'READY FOR DEPLOY'].includes(project.phase),
+        ) ?? null);
+
+    const reviewLoopCount = activities.filter((item) =>
+      /(review|qa)/i.test(`${item.action} ${item.detail ?? ''}`),
+    ).length;
+    const escalationCount = projects.filter(
+      (project) => (project.blockerCount ?? 0) > 0,
+    ).length;
+
+    const nodes = [
+      {
+        id: 'user',
+        label: 'User',
+        role: 'Request / Approval',
+        state: nodeStateFromEvidence({
+          name: 'user',
+          activity: latestProjectActivity,
+        }),
+        detail: latestProjectActivity
+          ? `${latestProjectActivity.project?.name ?? 'project'} · ${summarizeActivity(latestProjectActivity, 'NO EVENT')}`
+          : 'NO ACTIVE HANDOFF',
+      },
+      ...sisters.map((sister) => {
+        const activity = latestBySister.get(sister.name) ?? null;
+        return {
+          id: sister.name,
+          label:
+            sister.name === 'erang'
+              ? 'Irang'
+              : `${sister.name.slice(0, 1).toUpperCase()}${sister.name.slice(1)}`,
+          role: SISTER_ROLES[sister.name] ?? 'Unknown',
+          state: nodeStateFromEvidence({
+            name: sister.name,
+            sisterStatus: sister.status,
+            activity,
+          }),
+          detail: activity
+            ? summarizeActivity(activity)
+            : sister.status === 'offline'
+              ? 'RUNTIME OFFLINE'
+              : sister.lastSeen
+                ? 'SNAPSHOT ONLY'
+                : 'NO EVENT',
+        };
+      }),
+    ];
+
+    const harnessItems = activities
+      .filter((item) => item.action === 'harness_updated')
+      .slice(0, 4)
+      .map(
+        (item) =>
+          ({
+            id: `harness-${item.id}`,
+            title: item.detail ?? 'HARNESS UPDATED',
+            body: item.detail ?? 'HARNESS UPDATED',
+            tone: toneFromText(`${item.action} ${item.detail ?? ''}`),
+            author: item.sister?.name
+              ? this.toDisplayName(item.sister.name)
+              : 'System',
+            time: item.createdAt.toISOString(),
+            category: 'harness',
+            source: `activity:${item.action}`,
+          }) satisfies OpsBoardItem,
+      );
+
+    const qaItems = await this.getLatestQaBoardItems(
+      projects.map((project) => ({
+        name: project.name,
+        repoName: extractRepoName(project.repoUrl),
+        updatedAt: project.updatedAt,
+      })),
+    );
+
+    const board = [...harnessItems, ...qaItems]
+      .sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
+      .slice(0, 6);
+
+    const freshness: FreshnessMeta = {
+      generatedAt: new Date().toISOString(),
+      activityLatestAt: activities[0]?.createdAt?.toISOString() ?? null,
+      sistersLatestAt:
+        sisters
+          .map((sister) => sister.lastSeen)
+          .filter((value): value is Date => value instanceof Date)
+          .sort((a, b) => b.getTime() - a.getTime())[0]
+          ?.toISOString() ?? null,
+      qaDocLatestAt:
+        board
+          .filter((item) => item.category === 'DOC-DERIVED')
+          .map((item) => item.time)
+          .sort((a, b) => new Date(b).getTime() - new Date(a).getTime())[0] ??
+        null,
+    };
+
+    return {
+      focusProject: focusProject
+        ? {
+            name: focusProject.name,
+            ownerSister: focusProject.ownerSister ?? null,
+            phase: focusProject.phase,
+            currentSprint: focusProject.currentSprint ?? null,
+            progress: focusProject.progress ?? 0,
+            deployStatus: focusProject.deployStatus,
+          }
+        : null,
+      pipeline: {
+        activeTask: focusProject
+          ? `${focusProject.name} · ${focusProject.currentSprint ?? focusProject.phase}`
+          : 'NO ACTIVE PIPELINE',
+        focus: latestProjectActivity
+          ? summarizeActivity(latestProjectActivity, 'NO EVENT')
+          : 'SNAPSHOT / NO ACTIVE HANDOFF',
+        reviewLoopCount,
+        escalationCount,
+        deployState: focusProject?.deployStatus ?? 'STANDBY',
+        nodes,
+      },
+      board,
+      freshness,
+    };
+  }
+
+  private async getLatestQaBoardItems(
+    projects: { name: string; repoName: string; updatedAt: string }[],
+  ) {
+    const docs = await Promise.all(
+      projects.map(async (project) => {
+        if (!project.repoName) return [] as OpsBoardItem[];
+
+        const pathGroups = await Promise.all(
+          QA_PATH_CANDIDATES.map((path) =>
+            this.gitea.getRepoTree(project.repoName, path),
+          ),
+        );
+
+        const qaFiles = Array.from(
+          new Set(
+            pathGroups
+              .flat()
+              .filter((path) =>
+                /(?:SPRINT|HOTFIX)-\d+.*(?:review|qa).*\.md$/i.test(path),
+              ),
+          ),
+        );
+
+        const latestPath = qaFiles.sort().at(-1);
+        if (!latestPath) return [] as OpsBoardItem[];
+
+        const content = await this.gitea.getRawFile(
+          project.repoName,
+          latestPath,
+        );
+        if (!content) return [] as OpsBoardItem[];
+
+        const summary = parseQaSummary(content);
+        const label =
+          latestPath.split('/').pop()?.replace(/\.md$/i, '') ?? latestPath;
+        const tone = toneFromText(content);
+
+        return [
+          {
+            id: `qa-${project.repoName}-${label}`,
+            title: label,
+            body: summary,
+            tone,
+            author: inferQaAuthor(latestPath, content),
+            time: project.updatedAt,
+            category: 'DOC-DERIVED',
+            source: `${project.repoName}:${latestPath}`,
+          } satisfies OpsBoardItem,
+        ];
+      }),
+    );
+
+    return docs.flat();
+  }
+
+  private toDisplayName(name: string) {
+    if (name === 'harang') return '하랑이';
+    if (name === 'narang') return '나랑이';
+    if (name === 'darang') return '다랑이';
+    if (name === 'erang') return '이랑이';
+    return name;
+  }
+}

backend/src/events/events.gateway.ts

@@ -10,6 +10,17 @@ import { Server, Socket } from 'socket.io';
 import { Logger } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
 import { ConfigService } from '@nestjs/config';
+import { ACCESS_TOKEN_COOKIE, parseCookieHeader } from '../auth/auth-cookies';
+
+interface SocketUserPayload {
+  username?: string;
+  role?: string;
+  sub?: number;
+}
+
+interface SocketWithUser extends Socket {
+  user?: SocketUserPayload;
+}
 
 @WebSocketGateway({
   cors: {
@@ -37,11 +48,19 @@ export class EventsGateway
     this.logger.log('WebSocket Gateway initialized');
   }
 
-  handleConnection(client: Socket) {
+  handleConnection(client: SocketWithUser) {
     // JWT 인증 필수 — 토큰 없거나 유효하지 않으면 disconnect
+    const authHeader = client.handshake.headers.authorization;
+    const tokenFromHeader = Array.isArray(authHeader)
+      ? authHeader[0]?.replace('Bearer ', '')
+      : authHeader?.replace('Bearer ', '');
+    const tokenFromCookie = parseCookieHeader(client.handshake.headers.cookie)[
+      ACCESS_TOKEN_COOKIE
+    ];
     const token =
-      (client.handshake.auth?.token as string) ??
+      (client.handshake.auth?.token as string | undefined) ??
-      (client.handshake.headers.authorization as string)?.replace('Bearer ', '');
+      tokenFromHeader ??
+      tokenFromCookie;
 
     if (!token) {
       this.logger.debug(`WS rejected (no token): ${client.id}`);
@@ -56,9 +75,13 @@ export class EventsGateway
     }
 
     try {
-      const payload = this.jwtService.verify(token, { secret });
+      const payload = this.jwtService.verify<SocketUserPayload>(token, {
-      (client as any).user = payload;
+        secret,
-      this.logger.debug(`WS client connected: ${client.id} (${payload.username})`);
+      });
+      client.user = payload;
+      this.logger.debug(
+        `WS client connected: ${client.id} (${payload.username ?? 'unknown'})`,
+      );
     } catch {
       this.logger.debug(`WS rejected (invalid token): ${client.id}`);
       client.disconnect();

backend/src/events/events.module.ts

@@ -13,7 +13,11 @@ import { SistersModule } from '../sisters/sisters.module';
       imports: [ConfigModule],
       inject: [ConfigService],
       useFactory: (config: ConfigService) => ({
-        secret: (() => { const s = config.get<string>('JWT_SECRET'); if (!s) throw new Error('JWT_SECRET is not configured'); return s; })(),
+        secret: (() => {
+          const s = config.get<string>('JWT_SECRET');
+          if (!s) throw new Error('JWT_SECRET is not configured');
+          return s;
+        })(),
       }),
     }),
   ],

backend/src/events/events.scheduler.ts

@@ -1,4 +1,9 @@
-import { Injectable, Logger, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
+import {
+  Injectable,
+  Logger,
+  OnModuleInit,
+  OnModuleDestroy,
+} from '@nestjs/common';
 import { SistersService } from '../sisters/sisters.service';
 import { EventsGateway } from './events.gateway';
 
@@ -6,7 +11,10 @@ import { EventsGateway } from './events.gateway';
 export class EventsScheduler implements OnModuleInit, OnModuleDestroy {
   private readonly logger = new Logger(EventsScheduler.name);
   private timer: NodeJS.Timeout | null = null;
-  private readonly INTERVAL_MS = parseInt(process.env.WS_POLL_INTERVAL_MS ?? '30000', 10);
+  private readonly INTERVAL_MS = parseInt(
+    process.env.WS_POLL_INTERVAL_MS ?? '30000',
+    10,
+  );
 
   constructor(
     private readonly sistersService: SistersService,
@@ -14,8 +22,12 @@ export class EventsScheduler implements OnModuleInit, OnModuleDestroy {
   ) {}
 
   onModuleInit() {
-    this.timer = setInterval(() => this.tick(), this.INTERVAL_MS);
+    this.timer = setInterval(() => {
-    this.logger.log(`WebSocket scheduler started (interval: ${this.INTERVAL_MS}ms)`);
+      void this.tick();
+    }, this.INTERVAL_MS);
+    this.logger.log(
+      `WebSocket scheduler started (interval: ${this.INTERVAL_MS}ms)`,
+    );
   }
 
   onModuleDestroy() {

backend/src/events/sisters.scheduler.ts

@@ -14,13 +14,17 @@ export class SistersScheduler {
 
   start() {
     if (this.timer) return;
-    this.timer = setInterval(async () => {
+    this.timer = setInterval(() => {
-      try {
+      void this.broadcast();
-        const sisters = await this.sistersService.getAllSistersStatus();
-        this.eventsGateway.broadcastSisterStatus(sisters);
-      } catch {
-        this.logger.warn('Failed to broadcast sisters update');
-      }
     }, 30000);
   }
+
+  private async broadcast() {
+    try {
+      const sisters = await this.sistersService.getAllSistersStatus();
+      this.eventsGateway.broadcastSisterStatus(sisters);
+    } catch {
+      this.logger.warn('Failed to broadcast sisters update');
+    }
+  }
 }

backend/src/gitea-sync/gitea-sync.module.ts

@@ -8,7 +8,13 @@ import { AuthModule } from '../auth/auth.module';
 import { ProjectsModule } from '../projects/projects.module';
 
 @Module({
-  imports: [PrismaModule, GiteaModule, ActivityModule, AuthModule, ProjectsModule],
+  imports: [
+    PrismaModule,
+    GiteaModule,
+    ActivityModule,
+    AuthModule,
+    ProjectsModule,
+  ],
   controllers: [GiteaSyncController],
   providers: [GiteaSyncService],
   exports: [GiteaSyncService],

backend/src/gitea-sync/gitea-sync.service.ts

@@ -1,5 +1,4 @@
 import { Injectable, Logger } from '@nestjs/common';
-import { ConfigService } from '@nestjs/config';
 import { PrismaService } from '../prisma/prisma.service';
 import { GiteaService } from '../gitea/gitea.service';
 import { ActivityService } from '../activity/activity.service';
@@ -17,7 +16,11 @@ export class GiteaSyncService {
     private readonly sprintSync: SprintSyncService,
   ) {}
 
-  async syncRepos(): Promise<{ synced: number; created: number; updated: number }> {
+  async syncRepos(): Promise<{
+    synced: number;
+    created: number;
+    updated: number;
+  }> {
     const repos = await this.gitea.getOrgRepos();
 
     if (!repos.length) {
@@ -71,11 +74,14 @@ export class GiteaSyncService {
       });
     }
 
-    this.logger.log(`Gitea sync: ${repos.length} repos, ${created} new, ${updated} updated`);
+    this.logger.log(
+      `Gitea sync: ${repos.length} repos, ${created} new, ${updated} updated`,
+    );
 
     // Sprint 동기화도 함께 수행
-    await this.sprintSync.syncAllProjectSprints().catch((e) => {
+    await this.sprintSync.syncAllProjectSprints().catch((e: unknown) => {
-      this.logger.warn(`Sprint sync failed: ${e.message}`);
+      const message = e instanceof Error ? e.message : String(e);
+      this.logger.warn(`Sprint sync failed: ${message}`);
     });
 
     return { synced: repos.length, created, updated };

backend/src/gitea/gitea.service.ts

@@ -45,7 +45,7 @@ export interface GiteaBranch {
 @Injectable()
 export class GiteaService {
   private readonly logger = new Logger(GiteaService.name);
-  private readonly client: AxiosInstance;
+  private readonly client: AxiosInstance | null;
   private readonly org: string;
 
   constructor(private readonly config: ConfigService) {
@@ -54,8 +54,10 @@ export class GiteaService {
     this.org = config.get<string>('GITEA_ORG') ?? 'hanarang';
 
     if (!baseURL || !token) {
-      this.logger.warn('GITEA_BASE_URL or GITEA_TOKEN not set — Gitea features disabled');
+      this.logger.warn(
-      this.client = null as any;
+        'GITEA_BASE_URL or GITEA_TOKEN not set — Gitea features disabled',
+      );
+      this.client = null;
       return;
     }
 
@@ -66,27 +68,30 @@ export class GiteaService {
     });
   }
 
-  private isAvailable(): boolean {
-    return this.client !== null;
-  }
-
   async getOrgRepos(): Promise<GiteaRepo[]> {
-    if (!this.isAvailable()) return [];
+    const client = this.client;
+    if (!client) return [];
     try {
-      const { data } = await this.client.get<GiteaRepo[]>(`/orgs/${this.org}/repos`, {
+      const { data } = await client.get<GiteaRepo[]>(
-        params: { limit: 50 },
+        `/orgs/${this.org}/repos`,
-      });
+        {
+          params: { limit: 50 },
+        },
+      );
       return data;
-    } catch (error) {
+    } catch {
       this.logger.warn('Failed to fetch Gitea repos');
       return [];
     }
   }
 
   async getRepo(repoName: string): Promise<GiteaRepo | null> {
-    if (!this.isAvailable()) return null;
+    const client = this.client;
+    if (!client) return null;
     try {
-      const { data } = await this.client.get<GiteaRepo>(`/repos/${this.org}/${repoName}`);
+      const { data } = await client.get<GiteaRepo>(
+        `/repos/${this.org}/${repoName}`,
+      );
       return data;
     } catch {
       return null;
@@ -94,9 +99,10 @@ export class GiteaService {
   }
 
   async getOpenPRs(repoName: string): Promise<GiteaPR[]> {
-    if (!this.isAvailable()) return [];
+    const client = this.client;
+    if (!client) return [];
     try {
-      const { data } = await this.client.get<GiteaPR[]>(
+      const { data } = await client.get<GiteaPR[]>(
         `/repos/${this.org}/${repoName}/pulls`,
         { params: { state: 'open', limit: 20 } },
       );
@@ -107,9 +113,10 @@ export class GiteaService {
   }
 
   async getCommits(repoName: string, limit = 20): Promise<GiteaCommit[]> {
-    if (!this.isAvailable()) return [];
+    const client = this.client;
+    if (!client) return [];
     try {
-      const { data } = await this.client.get<GiteaCommit[]>(
+      const { data } = await client.get<GiteaCommit[]>(
         `/repos/${this.org}/${repoName}/commits`,
         { params: { limit } },
       );
@@ -121,9 +128,10 @@ export class GiteaService {
   }
 
   async getBranches(repoName: string): Promise<GiteaBranch[]> {
-    if (!this.isAvailable()) return [];
+    const client = this.client;
+    if (!client) return [];
     try {
-      const { data } = await this.client.get<GiteaBranch[]>(
+      const { data } = await client.get<GiteaBranch[]>(
         `/repos/${this.org}/${repoName}/branches`,
         { params: { limit: 50 } },
       );
@@ -133,10 +141,14 @@ export class GiteaService {
     }
   }
 
-  async getPulls(repoName: string, state: 'open' | 'closed' | 'all' = 'open'): Promise<GiteaPR[]> {
+  async getPulls(
-    if (!this.isAvailable()) return [];
+    repoName: string,
+    state: 'open' | 'closed' | 'all' = 'open',
+  ): Promise<GiteaPR[]> {
+    const client = this.client;
+    if (!client) return [];
     try {
-      const { data } = await this.client.get<GiteaPR[]>(
+      const { data } = await client.get<GiteaPR[]>(
         `/repos/${this.org}/${repoName}/pulls`,
         { params: { state, limit: 30, type: 'pulls' } },
       );
@@ -147,22 +159,27 @@ export class GiteaService {
   }
 
   async getRepoTree(repoName: string, treePath: string): Promise<string[]> {
-    if (!this.isAvailable()) return [];
+    const client = this.client;
+    if (!client) return [];
     try {
-      const { data } = await this.client.get<{ tree: { path: string; type: string }[] }>(
+      const { data } = await client.get<{
-        `/repos/${this.org}/${repoName}/git/trees/HEAD`,
+        tree: { path: string; type: string }[];
-        { params: { recursive: true } },
+      }>(`/repos/${this.org}/${repoName}/git/trees/HEAD`, {
-      );
+        params: { recursive: true },
-      return (data.tree ?? []).filter((e) => e.path.startsWith(treePath) && e.type === 'blob').map((e) => e.path);
+      });
+      return (data.tree ?? [])
+        .filter((e) => e.path.startsWith(treePath) && e.type === 'blob')
+        .map((e) => e.path);
     } catch {
       return [];
     }
   }
 
   async getRawFile(repoName: string, filePath: string): Promise<string | null> {
-    if (!this.isAvailable()) return null;
+    const client = this.client;
+    if (!client) return null;
     try {
-      const { data } = await this.client.get<string>(
+      const { data } = await client.get<string>(
         `/repos/${this.org}/${repoName}/raw/${filePath}`,
         { params: { ref: 'main' }, responseType: 'text' },
       );

backend/src/main.ts

@@ -1,20 +1,64 @@
 import { NestFactory } from '@nestjs/core';
 import { Logger, ValidationPipe } from '@nestjs/common';
-import { AppModule } from './app.module';
+import type { NextFunction, Request, Response } from 'express';
 import helmet from 'helmet';
+import { AppModule } from './app.module';
+import {
+  ACCESS_TOKEN_COOKIE,
+  REFRESH_TOKEN_COOKIE,
+  getCookieValue,
+  hasValidCsrfToken,
+} from './auth/auth-cookies';
+
+function getAllowedOrigins() {
+  return (process.env.CORS_ORIGINS ?? 'http://localhost:3004')
+    .split(',')
+    .map((origin) => origin.trim())
+    .filter((origin): origin is string => origin.length > 0);
+}
+
+function shouldBypassCsrf(req: Request): boolean {
+  if (['GET', 'HEAD', 'OPTIONS'].includes(req.method.toUpperCase())) {
+    return true;
+  }
+
+  if (req.path === '/api/auth/login') {
+    return true;
+  }
+
+  const hasAuthorizationHeader = Boolean(req.headers.authorization);
+  if (hasAuthorizationHeader) {
+    return true;
+  }
+
+  const hasAuthCookie = Boolean(
+    getCookieValue(req, ACCESS_TOKEN_COOKIE) ||
+      getCookieValue(req, REFRESH_TOKEN_COOKIE),
+  );
+
+  return !hasAuthCookie;
+}
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
 
   app.use(helmet());
+  app.use((req: Request, res: Response, next: NextFunction) => {
+    if (shouldBypassCsrf(req) || hasValidCsrfToken(req)) {
+      next();
+      return;
+    }
 
-  const allowedOrigins = (process.env.CORS_ORIGINS ?? 'http://localhost:3004')
+    res.status(403).json({ message: 'Invalid CSRF token' });
-    .split(',')
+  });
-    .map((o) => o.trim())
+
-    .filter(Boolean);
+  const allowedOrigins = getAllowedOrigins();
 
   app.enableCors({
-    origin: (origin, callback) => {
+    origin: (
+      origin: string | undefined,
+      callback: (err: Error | null, allow?: boolean) => void,
+    ) => {
       if (!origin || allowedOrigins.includes(origin)) {
         callback(null, true);
       } else {
@@ -22,13 +66,26 @@ async function bootstrap() {
       }
     },
     methods: ['GET', 'POST', 'PATCH', 'PUT', 'DELETE', 'OPTIONS'],
+    allowedHeaders: [
+      'Content-Type',
+      'Authorization',
+      'X-CSRF-Token',
+      'X-Refresh-Token',
+    ],
     credentials: true,
   });
 
-  app.useGlobalPipes(new ValidationPipe({ whitelist: true, forbidNonWhitelisted: true, transform: true }));
+  app.useGlobalPipes(
+    new ValidationPipe({
+      whitelist: true,
+      forbidNonWhitelisted: true,
+      transform: true,
+    }),
+  );
 
-  const port = process.env.BACKEND_PORT ?? 3005;
+  const port = Number(process.env.BACKEND_PORT ?? 3005);
   await app.listen(port);
   Logger.log(`🚀 Backend running on port ${port}`, 'Bootstrap');
 }
-bootstrap();
+
+void bootstrap();

backend/src/prisma/prisma.service.ts

@@ -4,7 +4,10 @@ import { PrismaClient } from '@prisma/client';
 import { PrismaMariaDb } from '@prisma/adapter-mariadb';
 
 @Injectable()
-export class PrismaService extends PrismaClient implements OnModuleInit, OnModuleDestroy {
+export class PrismaService
+  extends PrismaClient
+  implements OnModuleInit, OnModuleDestroy
+{
   constructor(config: ConfigService) {
     const dbUrl = config.get<string>('DATABASE_URL');
     if (!dbUrl) {

backend/src/projects/projects.controller.ts

@@ -1,4 +1,12 @@
-import { Controller, Get, Param, Query, ParseIntPipe, UseGuards, Post } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Param,
+  Query,
+  ParseIntPipe,
+  UseGuards,
+  Post,
+} from '@nestjs/common';
 import { ProjectsService } from './projects.service';
 import { SprintSyncService } from './sprint-sync.service';
 import { JwtGuard } from '../auth/jwt.guard';

backend/src/projects/projects.service.ts

@@ -3,7 +3,12 @@ import { PrismaService } from '../prisma/prisma.service';
 import { GiteaService } from '../gitea/gitea.service';
 
 type QaStatus = 'passed' | 'failed' | 'unknown';
-type ProjectPhase = 'PLANNING' | 'IMPLEMENT' | 'QA' | 'READY FOR DEPLOY' | 'DEPLOYED';
+type ProjectPhase =
+  | 'PLANNING'
+  | 'IMPLEMENT'
+  | 'QA'
+  | 'READY FOR DEPLOY'
+  | 'DEPLOYED';
 
 export interface RepoDocumentMeta {
   path: string;
@@ -36,7 +41,10 @@ function normalizeRepoName(repoUrl: string): string {
   return repoUrl.replace(/\/+$/, '').split('/').pop() ?? '';
 }
 
-function extractDocOrder(path: string, kind: 'sprint' | 'hotfix' | 'qa'): number {
+function extractDocOrder(
+  path: string,
+  kind: 'sprint' | 'hotfix' | 'qa',
+): number {
   const name = path.split('/').pop() ?? '';
   if (kind === 'hotfix') {
     const hotfix = name.match(/HOTFIX-(\d+)/i);
@@ -81,7 +89,8 @@ function parseTaskSummary(content: string): string | null {
 function parseQaStatus(content: string): QaStatus {
   if (/passed\s*[:=]\s*true/i.test(content)) return 'passed';
   if (/passed\s*[:=]\s*false/i.test(content)) return 'failed';
-  if (/\bPASSED\b/i.test(content) && !/\bFAILED\b/i.test(content)) return 'passed';
+  if (/\bPASSED\b/i.test(content) && !/\bFAILED\b/i.test(content))
+    return 'passed';
   if (/\bFAILED\b/i.test(content)) return 'failed';
   return 'unknown';
 }
@@ -89,19 +98,27 @@ function parseQaStatus(content: string): QaStatus {
 function parseBlockerCount(content: string): number {
   const jsonMatch = content.match(/"errors"\s*:\s*\[(.*?)\]/is);
   if (jsonMatch) {
-    const items = jsonMatch[1].split(',').map((item) => item.trim()).filter(Boolean);
+    const items = jsonMatch[1]
+      .split(',')
+      .map((item) => item.trim())
+      .filter(Boolean);
     if (items.length > 0) return items.length;
   }
 
   const errorLines = content
     .split(/\r?\n/)
     .map((line) => line.trim())
-    .filter((line) => /^[-*]\s+/.test(line) && /(error|blocker|실패|문제)/i.test(line));
+    .filter(
+      (line) =>
+        /^[-*]\s+/.test(line) && /(error|blocker|실패|문제)/i.test(line),
+    );
 
   return errorLines.length;
 }
 
-function isRepoDocumentMeta(value: RepoDocumentMeta | null): value is RepoDocumentMeta {
+function isRepoDocumentMeta(
+  value: RepoDocumentMeta | null,
+): value is RepoDocumentMeta {
   return value !== null;
 }
 
@@ -141,11 +158,12 @@ function buildProjectMeta(params: {
     phase = 'IMPLEMENT';
   }
 
-  const deployStatus = phase === 'DEPLOYED'
+  const deployStatus =
-    ? 'DEPLOYED ON MAIN'
+    phase === 'DEPLOYED'
-    : phase === 'READY FOR DEPLOY'
+      ? 'DEPLOYED ON MAIN'
-      ? 'READY FOR DEPLOY'
+      : phase === 'READY FOR DEPLOY'
-      : 'REDEPLOY REQUIRED';
+        ? 'READY FOR DEPLOY'
+        : 'REDEPLOY REQUIRED';
 
   return {
     phase,
@@ -177,17 +195,30 @@ export class ProjectsService {
 
     const [repoMetaMap, repoDocsMap] = await Promise.all([
       this.getRepoMetaMap(),
-      this.getRepoDocumentMap(dbProjects.map((project) => normalizeRepoName(project.repoUrl))),
+      this.getRepoDocumentMap(
+        dbProjects.map((project) => normalizeRepoName(project.repoUrl)),
+      ),
     ]);
 
     return dbProjects.map((project) => {
       const totalSprints = project.sprints.length;
-      const doneSprints = project.sprints.filter((sprint) => sprint.status === 'done').length;
+      const doneSprints = project.sprints.filter(
-      const inProgressSprint = project.sprints.find((sprint) => sprint.status === 'in_progress');
+        (sprint) => sprint.status === 'done',
-      const ownerSister = project.sprints.flatMap((sprint) => sprint.tasks).find((task) => task.assignee)?.assignee ?? 'narang';
+      ).length;
-      const progress = totalSprints > 0 ? Math.round((doneSprints / totalSprints) * 100) : 0;
+      const inProgressSprint = project.sprints.find(
+        (sprint) => sprint.status === 'in_progress',
+      );
+      const ownerSister =
+        project.sprints
+          .flatMap((sprint) => sprint.tasks)
+          .find((task) => task.assignee)?.assignee ?? 'narang';
+      const progress =
+        totalSprints > 0 ? Math.round((doneSprints / totalSprints) * 100) : 0;
       const repoMeta = repoMetaMap[project.giteaId];
-      const docs = repoDocsMap.get(normalizeRepoName(project.repoUrl)) ?? { hotfixes: [], qas: [] };
+      const docs = repoDocsMap.get(normalizeRepoName(project.repoUrl)) ?? {
+        hotfixes: [],
+        qas: [],
+      };
       const latestHotfix = docs.hotfixes.at(-1) ?? null;
       const latestQa = docs.qas.at(-1) ?? null;
       const meta = buildProjectMeta({
@@ -213,7 +244,11 @@ export class ProjectsService {
         totalSprints,
         doneSprints,
         sprintCount: totalSprints,
-        currentSprint: inProgressSprint?.name ?? (doneSprints === totalSprints && totalSprints > 0 ? 'COMPLETED' : null),
+        currentSprint:
+          inProgressSprint?.name ??
+          (doneSprints === totalSprints && totalSprints > 0
+            ? 'COMPLETED'
+            : null),
         ownerSister,
         openPRs: repoMeta?.openPRs ?? 0,
         updatedAt: repoMeta?.updatedAt ?? project.updatedAt.toISOString(),
@@ -253,8 +288,12 @@ export class ProjectsService {
     ]);
 
     const totalSprints = project.sprints.length;
-    const doneSprints = project.sprints.filter((sprint) => sprint.status === 'done').length;
+    const doneSprints = project.sprints.filter(
-    const activeSprint = project.sprints.find((sprint) => sprint.status === 'in_progress');
+      (sprint) => sprint.status === 'done',
+    ).length;
+    const activeSprint = project.sprints.find(
+      (sprint) => sprint.status === 'in_progress',
+    );
     const meta = buildProjectMeta({
       totalSprints,
       doneSprints,
@@ -276,7 +315,8 @@ export class ProjectsService {
             label: docs.qas.at(-1)?.label ?? null,
             status: docs.qas.at(-1)?.qaStatus ?? 'unknown',
             blockerCount: docs.qas.at(-1)?.blockerCount ?? 0,
-            summary: docs.qas.at(-1)?.summary ?? docs.qas.at(-1)?.description ?? null,
+            summary:
+              docs.qas.at(-1)?.summary ?? docs.qas.at(-1)?.description ?? null,
           }
         : null,
       deploy: {
@@ -310,17 +350,23 @@ export class ProjectsService {
     const repoName = normalizeRepoName(project.repoUrl);
     const docs = await this.collectRepoDocuments(repoName);
 
-    return [...docs.sprints, ...docs.hotfixes].filter(isRepoDocumentMeta).sort((a, b) => a.order - b.order);
+    return [...docs.sprints, ...docs.hotfixes]
+      .filter(isRepoDocumentMeta)
+      .sort((a, b) => a.order - b.order);
   }
 
   private async getProjectMeta(id: number) {
-    const project = await this.prisma.project.findUnique({ where: { id }, select: { id: true, repoUrl: true } });
+    const project = await this.prisma.project.findUnique({
+      where: { id },
+      select: { id: true, repoUrl: true },
+    });
     if (!project) throw new NotFoundException(`Project ${id} not found`);
     return project;
   }
 
   private async getRepoMetaMap() {
-    const repoMetaMap: Record<number, { openPRs: number; updatedAt: string }> = {};
+    const repoMetaMap: Record<number, { openPRs: number; updatedAt: string }> =
+      {};
     try {
       const repos = await this.gitea.getOrgRepos();
       for (const repo of repos) {
@@ -337,35 +383,80 @@ export class ProjectsService {
 
   private async getRepoDocumentMap(repoNames: string[]) {
     const uniqueRepoNames = Array.from(new Set(repoNames.filter(Boolean)));
-    const entries = await Promise.all(uniqueRepoNames.map(async (repoName) => [repoName, await this.collectRepoDocuments(repoName)] as const));
+    const entries = await Promise.all(
+      uniqueRepoNames.map(
+        async (repoName) =>
+          [repoName, await this.collectRepoDocuments(repoName)] as const,
+      ),
+    );
     return new Map(entries);
   }
 
   private async collectRepoDocuments(repoName: string) {
     const [sprintPaths, hotfixPathGroups, qaPathGroups] = await Promise.all([
       this.gitea.getRepoTree(repoName, SPRINT_PATH),
-      Promise.all(HOTFIX_PATH_CANDIDATES.map((path) => this.gitea.getRepoTree(repoName, path))),
+      Promise.all(
-      Promise.all(QA_PATH_CANDIDATES.map((path) => this.gitea.getRepoTree(repoName, path))),
+        HOTFIX_PATH_CANDIDATES.map((path) =>
+          this.gitea.getRepoTree(repoName, path),
+        ),
+      ),
+      Promise.all(
+        QA_PATH_CANDIDATES.map((path) =>
+          this.gitea.getRepoTree(repoName, path),
+        ),
+      ),
     ]);
 
-    const sprintFiles = sprintPaths.filter((path) => /SPRINT-\d+\.md$/i.test(path));
+    const sprintFiles = sprintPaths.filter((path) =>
-    const hotfixFiles = Array.from(new Set(hotfixPathGroups.flat().filter((path) => /HOTFIX-\d+\.md$/i.test(path))));
+      /SPRINT-\d+\.md$/i.test(path),
-    const qaFiles = Array.from(new Set(qaPathGroups.flat().filter((path) => /(?:SPRINT|HOTFIX)-\d+.*(?:review|qa).*\.md$/i.test(path))));
+    );
+    const hotfixFiles = Array.from(
+      new Set(
+        hotfixPathGroups.flat().filter((path) => /HOTFIX-\d+\.md$/i.test(path)),
+      ),
+    );
+    const qaFiles = Array.from(
+      new Set(
+        qaPathGroups
+          .flat()
+          .filter((path) =>
+            /(?:SPRINT|HOTFIX)-\d+.*(?:review|qa).*\.md$/i.test(path),
+          ),
+      ),
+    );
 
     const [sprints, hotfixes, qas] = await Promise.all([
-      Promise.all(sprintFiles.map((path) => this.readRepoDocument(repoName, path, 'sprint'))),
+      Promise.all(
-      Promise.all(hotfixFiles.map((path) => this.readRepoDocument(repoName, path, 'hotfix'))),
+        sprintFiles.map((path) =>
-      Promise.all(qaFiles.map((path) => this.readRepoDocument(repoName, path, 'qa'))),
+          this.readRepoDocument(repoName, path, 'sprint'),
+        ),
+      ),
+      Promise.all(
+        hotfixFiles.map((path) =>
+          this.readRepoDocument(repoName, path, 'hotfix'),
+        ),
+      ),
+      Promise.all(
+        qaFiles.map((path) => this.readRepoDocument(repoName, path, 'qa')),
+      ),
     ]);
 
     return {
-      sprints: sprints.filter(isRepoDocumentMeta).sort((a, b) => a.order - b.order),
+      sprints: sprints
-      hotfixes: hotfixes.filter(isRepoDocumentMeta).sort((a, b) => a.order - b.order),
+        .filter(isRepoDocumentMeta)
+        .sort((a, b) => a.order - b.order),
+      hotfixes: hotfixes
+        .filter(isRepoDocumentMeta)
+        .sort((a, b) => a.order - b.order),
       qas: qas.filter(isRepoDocumentMeta).sort((a, b) => a.order - b.order),
     };
   }
 
-  private async readRepoDocument(repoName: string, path: string, kind: 'sprint' | 'hotfix' | 'qa'): Promise<RepoDocumentMeta | null> {
+  private async readRepoDocument(
+    repoName: string,
+    path: string,
+    kind: 'sprint' | 'hotfix' | 'qa',
+  ): Promise<RepoDocumentMeta | null> {
     const content = await this.gitea.getRawFile(repoName, path);
     if (!content) return null;
 

backend/src/projects/sprint-sync.service.spec.ts

@@ -6,6 +6,15 @@ import { GiteaService } from '../gitea/gitea.service';
 describe('SprintSyncService', () => {
   let service: SprintSyncService;
 
+  type TaskWriteArgs = {
+    data: {
+      taskId?: string;
+      assignee: string;
+      status: string;
+    };
+    where?: { id: number };
+  };
+
   const mockPrisma = {
     project: { findUnique: jest.fn(), findMany: jest.fn() },
     sprint: { findFirst: jest.fn(), create: jest.fn(), update: jest.fn() },
@@ -29,8 +38,13 @@ describe('SprintSyncService', () => {
     service = module.get<SprintSyncService>(SprintSyncService);
     jest.clearAllMocks();
 
-    mockPrisma.project.findUnique.mockResolvedValue({ id: 1, repoUrl: 'https://gitea.example.com/hanarang/project-alpha' });
+    mockPrisma.project.findUnique.mockResolvedValue({
-    mockPrisma.project.findMany.mockResolvedValue([{ id: 1, repoUrl: 'https://gitea.example.com/hanarang/project-alpha' }]);
+      id: 1,
+      repoUrl: 'https://gitea.example.com/hanarang/project-alpha',
+    });
+    mockPrisma.project.findMany.mockResolvedValue([
+      { id: 1, repoUrl: 'https://gitea.example.com/hanarang/project-alpha' },
+    ]);
     mockPrisma.sprint.findFirst.mockResolvedValue(null);
     mockPrisma.sprint.create.mockResolvedValue({ id: 101, status: 'pending' });
     mockPrisma.sprint.update.mockResolvedValue({ id: 101, status: 'pending' });
@@ -38,65 +52,107 @@ describe('SprintSyncService', () => {
     mockPrisma.task.create.mockResolvedValue({});
     mockPrisma.task.update.mockResolvedValue({});
 
-    mockGitea.getRepoTree.mockImplementation(async (_repoName: string, path: string) => {
+    mockGitea.getRepoTree.mockImplementation(
-      if (path === '.plans/sprints/') return ['.plans/sprints/SPRINT-005.md', '.plans/sprints/HOTFIX-001.md'];
+      (_repoName: string, path: string) => {
-      if (path === '.plans/qa/') return ['.plans/qa/SPRINT-005-review-darang.md'];
+        if (path === '.plans/sprints/') {
-      if (path === '.qa/') return [];
+          return [
-      if (path === '.plans/hotfix/') return ['.plans/hotfix/HOTFIX-001.md'];
+            '.plans/sprints/SPRINT-005.md',
-      return [];
+            '.plans/sprints/HOTFIX-001.md',
-    });
+          ];
+        }
+        if (path === '.plans/qa/') {
+          return ['.plans/qa/SPRINT-005-review-darang.md'];
+        }
+        if (path === '.qa/') return [];
+        if (path === '.plans/hotfix/') return ['.plans/hotfix/HOTFIX-001.md'];
+        return [];
+      },
+    );
   });
 
   it('담당 라인을 읽어 assignee를 저장한다', async () => {
-    mockGitea.getRawFile.mockImplementation(async (_repoName: string, path: string) => {
+    mockGitea.getRawFile.mockImplementation(
-      if (path.includes('SPRINT-005.md')) {
+      (_repoName: string, path: string) => {
-        return `# SPRINT-005: Infra\n\n## 목표\n테스트\n\n## 태스크\n\n### TASK-019: 인프라 배포\n- **담당:** 이랑이\n- **설명:** deploy\n\n### TASK-020: QA 자동화\n- **담당:** darang\n- **설명:** qa\n`;
+        if (path.includes('SPRINT-005.md')) {
-      }
+          return `# SPRINT-005: Infra\n\n## 목표\n테스트\n\n## 태스크\n\n### TASK-019: 인프라 배포\n- **담당:** 이랑이\n- **설명:** deploy\n\n### TASK-020: QA 자동화\n- **담당:** darang\n- **설명:** qa\n`;
-      if (path.includes('review')) return 'passed: true';
+        }
-      return '# HOTFIX-001: sample';
+        if (path.includes('review')) return 'passed: true';
-    });
+        return '# HOTFIX-001: sample';
+      },
+    );
 
     await service.syncProjectSprints(1);
 
-    expect(mockPrisma.task.create).toHaveBeenNthCalledWith(1, expect.objectContaining({
+    const createCalls = mockPrisma.task.create.mock.calls as Array<
-      data: expect.objectContaining({ taskId: 'TASK-019', assignee: 'erang', status: 'done' }),
+      [TaskWriteArgs]
-    }));
+    >;
-    expect(mockPrisma.task.create).toHaveBeenNthCalledWith(2, expect.objectContaining({
+
-      data: expect.objectContaining({ taskId: 'TASK-020', assignee: 'darang', status: 'done' }),
+    expect(createCalls[0]?.[0]).toMatchObject({
-    }));
+      data: {
+        taskId: 'TASK-019',
+        assignee: 'erang',
+        status: 'done',
+      },
+    });
+    expect(createCalls[1]?.[0]).toMatchObject({
+      data: {
+        taskId: 'TASK-020',
+        assignee: 'darang',
+        status: 'done',
+      },
+    });
   });
 
   it('기존 task도 assignee를 갱신한다', async () => {
-    mockPrisma.task.findFirst.mockResolvedValue({ id: 500, assignee: 'narang', status: 'pending' });
+    mockPrisma.task.findFirst.mockResolvedValue({
-    mockGitea.getRawFile.mockImplementation(async (_repoName: string, path: string) => {
+      id: 500,
-      if (path.includes('SPRINT-005.md')) {
+      assignee: 'narang',
-        return `# SPRINT-005: Infra\n\n## 목표\n테스트\n\n## 태스크\n\n### TASK-019: 인프라 배포\n- **담당:** 하랑이\n`;
+      status: 'pending',
-      }
-      if (path.includes('review')) return 'passed: false';
-      return '# HOTFIX-001: sample';
     });
+    mockGitea.getRawFile.mockImplementation(
+      (_repoName: string, path: string) => {
+        if (path.includes('SPRINT-005.md')) {
+          return `# SPRINT-005: Infra\n\n## 목표\n테스트\n\n## 태스크\n\n### TASK-019: 인프라 배포\n- **담당:** 하랑이\n`;
+        }
+        if (path.includes('review')) return 'passed: false';
+        return '# HOTFIX-001: sample';
+      },
+    );
 
     await service.syncProjectSprints(1);
 
-    expect(mockPrisma.task.update).toHaveBeenCalledWith(expect.objectContaining({
+    const updateCalls = mockPrisma.task.update.mock.calls as Array<
+      [TaskWriteArgs]
+    >;
+
+    expect(updateCalls[0]?.[0]).toMatchObject({
       where: { id: 500 },
-      data: expect.objectContaining({ assignee: 'harang' }),
+      data: { assignee: 'harang' },
-    }));
+    });
   });
 
   it('담당 라인이 없으면 narang fallback', async () => {
-    mockGitea.getRawFile.mockImplementation(async (_repoName: string, path: string) => {
+    mockGitea.getRawFile.mockImplementation(
-      if (path.includes('SPRINT-005.md')) {
+      (_repoName: string, path: string) => {
-        return `# SPRINT-005: Infra\n\n## 목표\n테스트\n\n## 태스크\n\n### TASK-019: 인프라 배포\n- 설명만 있음\n`;
+        if (path.includes('SPRINT-005.md')) {
-      }
+          return `# SPRINT-005: Infra\n\n## 목표\n테스트\n\n## 태스크\n\n### TASK-019: 인프라 배포\n- 설명만 있음\n`;
-      if (path.includes('review')) return 'FAILED';
+        }
-      return '# HOTFIX-001: sample';
+        if (path.includes('review')) return 'FAILED';
-    });
+        return '# HOTFIX-001: sample';
+      },
+    );
 
     await service.syncProjectSprints(1);
 
-    expect(mockPrisma.task.create).toHaveBeenCalledWith(expect.objectContaining({
+    const createCalls = mockPrisma.task.create.mock.calls as Array<
-      data: expect.objectContaining({ assignee: 'narang', status: 'pending' }),
+      [TaskWriteArgs]
-    }));
+    >;
+
+    expect(createCalls[0]?.[0]).toMatchObject({
+      data: {
+        assignee: 'narang',
+        status: 'pending',
+      },
+    });
   });
 });

backend/src/projects/sprint-sync.service.ts

@@ -13,46 +13,64 @@ const QA_PATH_CANDIDATES = ['.plans/qa/', '.qa/'];
 const HOTFIX_PATH_CANDIDATES = ['.plans/hotfix/', '.plans/sprints/'];
 const SISTER_NAME_MAP: Record<string, string> = {
   harang: 'harang',
-  '하랑': 'harang',
+  하랑: 'harang',
-  '하랑이': 'harang',
+  하랑이: 'harang',
   narang: 'narang',
-  '나랑': 'narang',
+  나랑: 'narang',
-  '나랑이': 'narang',
+  나랑이: 'narang',
   darang: 'darang',
-  '다랑': 'darang',
+  다랑: 'darang',
-  '다랑이': 'darang',
+  다랑이: 'darang',
   erang: 'erang',
-  '이랑': 'erang',
+  이랑: 'erang',
-  '이랑이': 'erang',
+  이랑이: 'erang',
 };
 
-function parseSprintName(content: string, filename: string, number: number): string {
+function parseSprintName(
-  const headingMatch = content.match(/^#\s+(?:SPRINT-\d+|Sprint\s+\d+)[:\s—\-]+(.+)/m);
+  content: string,
+  filename: string,
+  number: number,
+): string {
+  const headingMatch = content.match(
+    /^#\s+(?:SPRINT-\d+|Sprint\s+\d+)[:\s—-]+(.+)/m,
+  );
   if (headingMatch) return headingMatch[1].trim();
-  return filename.replace('.md', '') || `SPRINT-${String(number).padStart(3, '0')}`;
+  return (
+    filename.replace('.md', '') || `SPRINT-${String(number).padStart(3, '0')}`
+  );
 }
 
 function parseTaskAssignee(taskLines: string[]): string {
   for (const rawLine of taskLines) {
     const line = rawLine.trim();
-    const match = line.match(/^-\s*(?:\*\*)?(?:담당|assignee)\s*:(?:\*\*)?\s*(.+)$/i);
+    const match = line.match(
+      /^-\s*(?:\*\*)?(?:담당|assignee)\s*:(?:\*\*)?\s*(.+)$/i,
+    );
     if (!match) continue;
 
     const assignee = match[1]
       .trim()
-      .replace(/[()\[\],]/g, ' ')
+      .replace(/[()[\],]/g, ' ')
       .split(/\s+/)
-      .find((token) => SISTER_NAME_MAP[token.toLowerCase()] ?? SISTER_NAME_MAP[token]);
+      .find(
+        (token) =>
+          SISTER_NAME_MAP[token.toLowerCase()] ?? SISTER_NAME_MAP[token],
+      );
 
     if (assignee) {
-      return SISTER_NAME_MAP[assignee.toLowerCase()] ?? SISTER_NAME_MAP[assignee];
+      return (
+        SISTER_NAME_MAP[assignee.toLowerCase()] ?? SISTER_NAME_MAP[assignee]
+      );
     }
   }
 
   return 'narang';
 }
 
-function parseTasks(content: string, sprintStatus: 'pending' | 'done'): ParsedTask[] {
+function parseTasks(
+  content: string,
+  sprintStatus: 'pending' | 'done',
+): ParsedTask[] {
   const lines = content.split(/\r?\n/);
   const tasks: ParsedTask[] = [];
   const seen = new Set<string>();
@@ -66,7 +84,9 @@ function parseTasks(content: string, sprintStatus: 'pending' | 'done'): ParsedTa
     if (match) status = sprintStatus;
 
     if (!match) {
-      match = line.match(/^-\s*\[([ xX])\]\s*(TASK-\d+[A-Z]?)\s*[:\-]?\s*(.+)$/i);
+      match = line.match(
+        /^-\s*\[([ xX])\]\s*(TASK-\d+[A-Z]?)\s*[:-]?\s*(.+)$/i,
+      );
       if (match) status = /x/i.test(match[1]) ? 'done' : 'pending';
     }
 
@@ -89,7 +109,11 @@ function parseTasks(content: string, sprintStatus: 'pending' | 'done'): ParsedTa
     const taskBlock: string[] = [];
     for (let lookahead = index + 1; lookahead < lines.length; lookahead += 1) {
       const nextLine = lines[lookahead].trim();
-      if (/^#{2,6}\s+TASK-\d+[A-Z]?\s*:/i.test(nextLine) || /^-\s*\[?[ xX]?\]?\s*TASK-\d+[A-Z]?\s*[:\-]?/i.test(nextLine) || /^TASK-\d+[A-Z]?\s*:/i.test(nextLine)) {
+      if (
+        /^#{2,6}\s+TASK-\d+[A-Z]?\s*:/i.test(nextLine) ||
+        /^-\s*\[?[ xX]?\]?\s*TASK-\d+[A-Z]?\s*[:-]?/i.test(nextLine) ||
+        /^TASK-\d+[A-Z]?\s*:/i.test(nextLine)
+      ) {
         break;
       }
       if (/^##\s+/.test(nextLine) && !/^##\s+목표/.test(nextLine)) {
@@ -126,8 +150,12 @@ export class SprintSyncService {
     private readonly gitea: GiteaService,
   ) {}
 
-  async syncProjectSprints(projectId: number): Promise<{ synced: number; created: number; updated: number }> {
+  async syncProjectSprints(
-    const project = await this.prisma.project.findUnique({ where: { id: projectId } });
+    projectId: number,
+  ): Promise<{ synced: number; created: number; updated: number }> {
+    const project = await this.prisma.project.findUnique({
+      where: { id: projectId },
+    });
     if (!project) return { synced: 0, created: 0, updated: 0 };
 
     const repoName = project.repoUrl.replace(/\/+$/, '').split('/').pop() ?? '';
@@ -135,11 +163,14 @@ export class SprintSyncService {
   }
 
   async syncAllProjectSprints(): Promise<{ projects: number; synced: number }> {
-    const projects = await this.prisma.project.findMany({ select: { id: true, repoUrl: true } });
+    const projects = await this.prisma.project.findMany({
+      select: { id: true, repoUrl: true },
+    });
     let totalSynced = 0;
 
     for (const project of projects) {
-      const repoName = project.repoUrl.replace(/\/+$/, '').split('/').pop() ?? '';
+      const repoName =
+        project.repoUrl.replace(/\/+$/, '').split('/').pop() ?? '';
       const result = await this.syncRepo(project.id, repoName);
       totalSynced += result.synced;
     }
@@ -147,16 +178,39 @@ export class SprintSyncService {
     return { projects: projects.length, synced: totalSynced };
   }
 
-  private async syncRepo(projectId: number, repoName: string): Promise<{ synced: number; created: number; updated: number }> {
+  private async syncRepo(
+    projectId: number,
+    repoName: string,
+  ): Promise<{ synced: number; created: number; updated: number }> {
     const [sprintFilePaths, qaGroups, hotfixGroups] = await Promise.all([
       this.gitea.getRepoTree(repoName, '.plans/sprints/'),
-      Promise.all(QA_PATH_CANDIDATES.map((path) => this.gitea.getRepoTree(repoName, path))),
+      Promise.all(
-      Promise.all(HOTFIX_PATH_CANDIDATES.map((path) => this.gitea.getRepoTree(repoName, path))),
+        QA_PATH_CANDIDATES.map((path) =>
+          this.gitea.getRepoTree(repoName, path),
+        ),
+      ),
+      Promise.all(
+        HOTFIX_PATH_CANDIDATES.map((path) =>
+          this.gitea.getRepoTree(repoName, path),
+        ),
+      ),
     ]);
 
-    const sprintFiles = sprintFilePaths.filter((path) => /SPRINT-\d+\.md$/i.test(path));
+    const sprintFiles = sprintFilePaths.filter((path) =>
-    const qaFiles = Array.from(new Set(qaGroups.flat().filter((path) => /SPRINT-\d+.*(?:review|qa).*\.md$/i.test(path))));
+      /SPRINT-\d+\.md$/i.test(path),
-    const hotfixFiles = Array.from(new Set(hotfixGroups.flat().filter((path) => /HOTFIX-\d+\.md$/i.test(path))));
+    );
+    const qaFiles = Array.from(
+      new Set(
+        qaGroups
+          .flat()
+          .filter((path) => /SPRINT-\d+.*(?:review|qa).*\.md$/i.test(path)),
+      ),
+    );
+    const hotfixFiles = Array.from(
+      new Set(
+        hotfixGroups.flat().filter((path) => /HOTFIX-\d+\.md$/i.test(path)),
+      ),
+    );
 
     if (!sprintFiles.length) {
       this.logger.warn(`No sprint files found in ${repoName}/.plans/sprints/`);
@@ -186,14 +240,20 @@ export class SprintSyncService {
 
       const number = parseInt(numberMatch[1], 10);
       const name = parseSprintName(content, filename, number);
-      const status: 'pending' | 'done' = passedMap.get(number) ? 'done' : 'pending';
+      const status: 'pending' | 'done' = passedMap.get(number)
+        ? 'done'
+        : 'pending';
       const parsedTasks = parseTasks(content, status);
 
-      const existingSprint = await this.prisma.sprint.findFirst({ where: { projectId, number } });
+      const existingSprint = await this.prisma.sprint.findFirst({
+        where: { projectId, number },
+      });
       let sprintId = existingSprint?.id ?? 0;
 
       if (!existingSprint) {
-        const createdSprint = await this.prisma.sprint.create({ data: { projectId, number, name, status } });
+        const createdSprint = await this.prisma.sprint.create({
+          data: { projectId, number, name, status },
+        });
         sprintId = createdSprint.id;
         created += 1;
       } else {
@@ -209,7 +269,9 @@ export class SprintSyncService {
       }
 
       for (const task of parsedTasks) {
-        const existingTask = await this.prisma.task.findFirst({ where: { sprintId, taskId: task.taskId } });
+        const existingTask = await this.prisma.task.findFirst({
+          where: { sprintId, taskId: task.taskId },
+        });
         if (!existingTask) {
           await this.prisma.task.create({
             data: {
@@ -233,7 +295,9 @@ export class SprintSyncService {
       }
     }
 
-    this.logger.log(`${repoName}: ${sprintFiles.length} sprints, ${hotfixFiles.length} hotfix docs, ${passedMap.size} QA passed → ${created} created, ${updated} updated`);
+    this.logger.log(
+      `${repoName}: ${sprintFiles.length} sprints, ${hotfixFiles.length} hotfix docs, ${passedMap.size} QA passed → ${created} created, ${updated} updated`,
+    );
     return { synced: sprintFiles.length, created, updated };
   }
 }

backend/src/settings/settings.service.ts

@@ -24,7 +24,9 @@ export class SettingsService {
   ) {}
 
   async getAll() {
-    const rows = await this.prisma.systemSettings.findMany({ orderBy: { key: 'asc' } });
+    const rows = await this.prisma.systemSettings.findMany({
+      orderBy: { key: 'asc' },
+    });
     const merged = { ...DEFAULT_SETTINGS };
     for (const row of rows) merged[row.key] = row.value;
     return merged;
@@ -33,7 +35,9 @@ export class SettingsService {
   async saveAll(payload: Record<string, string>) {
     // DEFAULT_SETTINGS에 있는 키만 허용
     const allowed = Object.keys(DEFAULT_SETTINGS);
-    const entries = Object.entries(payload).filter(([key]) => allowed.includes(key));
+    const entries = Object.entries(payload).filter(([key]) =>
+      allowed.includes(key),
+    );
     await this.prisma.$transaction(
       entries.map(([key, value]) =>
         this.prisma.systemSettings.upsert({

backend/src/sisters/sister-detail.service.spec.ts

@@ -9,9 +9,16 @@ describe('SisterDetailService', () => {
   let service: SisterDetailService;
 
   const mockSister = {
-    id: 2, name: 'narang', ip: '10.10.10.216', user: 'narang',
+    id: 2,
-    lxcId: 105, status: 'online', lastSeen: new Date(),
+    name: 'narang',
-    sshKeyPath: null, createdAt: new Date(), updatedAt: new Date(),
+    ip: '10.10.10.216',
+    user: 'narang',
+    lxcId: 105,
+    status: 'online',
+    lastSeen: new Date(),
+    sshKeyPath: null,
+    createdAt: new Date(),
+    updatedAt: new Date(),
   };
 
   const mockPrisma = {
@@ -35,7 +42,9 @@ describe('SisterDetailService', () => {
         { provide: PrismaService, useValue: mockPrisma },
         {
           provide: ConfigService,
-          useValue: { get: jest.fn().mockReturnValue('/home/narang/.ssh/id_rsa') },
+          useValue: {
+            get: jest.fn().mockReturnValue('/home/narang/.ssh/id_rsa'),
+          },
         },
       ],
     }).compile();
@@ -58,7 +67,9 @@ describe('SisterDetailService', () => {
   it('getSisterConfig: sister 없으면 NotFoundException', async () => {
     mockPrisma.sisterConfig.findUnique.mockResolvedValue(null);
 
-    await expect(service.getSisterConfig('narang')).rejects.toThrow(NotFoundException);
+    await expect(service.getSisterConfig('narang')).rejects.toThrow(
+      NotFoundException,
+    );
   });
 
   it('getSisterSessions: SSH 실패 시 빈 배열', async () => {

backend/src/sisters/sister-detail.service.ts

@@ -1,10 +1,9 @@
 import { Injectable, Logger, NotFoundException } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
 import { PrismaService } from '../prisma/prisma.service';
 import { SshService } from './ssh.service';
-import { ConfigService } from '@nestjs/config';
 
-const SISTER_NAMES = ['harang', 'narang', 'darang', 'erang'] as const;
+type SisterName = 'harang' | 'narang' | 'darang' | 'erang';
-type SisterName = (typeof SISTER_NAMES)[number];
 
 const SISTER_ROLES: Record<SisterName, string> = {
   harang: 'Orchestrator',
@@ -14,12 +13,22 @@ const SISTER_ROLES: Record<SisterName, string> = {
 };
 
 const SISTER_DESCRIPTIONS: Record<SisterName, string> = {
-  harang: '기획과 오케스트레이션. 스프린트를 설계하고 자매들에게 작업을 배분한다.',
+  harang:
+    '기획과 오케스트레이션. 스프린트를 설계하고 자매들에게 작업을 배분한다.',
   narang: '코드 생성과 개발. 스프린트를 구현하고 PR을 만든다.',
   darang: '품질 검증. 코드 리뷰와 보안 감사를 수행한다.',
   erang: '인프라와 배포. 서버 관리, merge, 프로덕션 배포를 담당한다.',
 };
 
+function summarizeText(value?: string | null, maxLength = 120): string | null {
+  if (!value) return null;
+
+  const compact = value.replace(/\s+/g, ' ').trim();
+  if (!compact) return null;
+  if (compact.length <= maxLength) return compact;
+  return `${compact.slice(0, maxLength - 1)}…`;
+}
+
 @Injectable()
 export class SisterDetailService {
   private readonly logger = new Logger(SisterDetailService.name);
@@ -39,21 +48,36 @@ export class SisterDetailService {
         sister.ip,
         sister.user,
         sshKeyPath,
-        'WORKSPACE=~/.hermes/workspace; [ -d "$WORKSPACE" ] || WORKSPACE=~/.openclaw/workspace; cat "$WORKSPACE"/SOUL.md 2>/dev/null | head -60; echo "---AGENTS---"; cat "$WORKSPACE"/AGENTS.md 2>/dev/null | head -40',
+        'WORKSPACE=~/.hermes/workspace; [ -d "$WORKSPACE" ] || WORKSPACE=~/.openclaw/workspace; for FILE in SOUL.md AGENTS.md; do if [ -f "$WORKSPACE/$FILE" ]; then printf "%s|present|%s\n" "$FILE" "$(wc -l < "$WORKSPACE/$FILE" 2>/dev/null || echo 0)"; else printf "%s|missing|0\n" "$FILE"; fi; done',
       );
 
+      const files = result.stdout
+        .split('\n')
+        .map((line) => line.trim())
+        .filter((line) => line.length > 0)
+        .map((line) => {
+          const [file, status, lineCount] = line.split('|');
+          return {
+            file,
+            status,
+            lineCount: Number.parseInt(lineCount ?? '0', 10) || 0,
+          };
+        });
+
       return {
         name,
         role: SISTER_ROLES[name],
         description: SISTER_DESCRIPTIONS[name],
-        raw: result.stdout || '(설정 파일 없음)',
+        files,
+        summary: `${files.filter((file) => file.status === 'present').length}/${files.length} protected config files detected`,
       };
     } catch {
       return {
         name,
         role: SISTER_ROLES[name],
         description: SISTER_DESCRIPTIONS[name],
-        raw: '(SSH 연결 불가)',
+        files: [],
+        summary: '(SSH 연결 불가)',
       };
     }
   }
@@ -70,17 +94,34 @@ export class SisterDetailService {
         'SESSION_DIR=~/.hermes/sessions; [ -d "$SESSION_DIR" ] || SESSION_DIR=~/.openclaw/sessions; ls -lt "$SESSION_DIR"/ 2>/dev/null | head -20 || echo ""',
       );
 
-      const lines = result.stdout.split('\n').filter((l) => l && !l.startsWith('total'));
+      const sessions = result.stdout
-      return lines.map((line) => {
+        .split('\n')
-        const parts = line.trim().split(/\s+/);
+        .filter((line) => line && !line.startsWith('total'))
-        return {
+        .map((line) => {
-          name: parts[parts.length - 1] ?? '',
+          const parts = line.trim().split(/\s+/);
-          modified: parts.slice(5, 8).join(' '),
+          const label = parts[parts.length - 1] ?? '';
-          size: parts[4] ?? '0',
+          const modified = parts.slice(5, 8).join(' ');
-        };
+          const size = parts[4] ?? '0';
-      }).filter((s) => s.name && s.name !== '');
+
+          return {
+            id: label,
+            label,
+            status: [modified, size !== '0' ? `${size}B` : null]
+              .filter((part): part is string => Boolean(part))
+              .join(' · '),
+          };
+        })
+        .filter((session) => session.label.length > 0);
+
+      return {
+        sessions,
+        total: sessions.length,
+      };
     } catch {
-      return [];
+      return {
+        sessions: [],
+        total: 0,
+      };
     }
   }
 
@@ -96,10 +137,25 @@ export class SisterDetailService {
         'AGENT_DIR=~/.hermes/workspace/agents; [ -d "$AGENT_DIR" ] || AGENT_DIR=~/.openclaw/workspace/agents; ls "$AGENT_DIR"/ 2>/dev/null || echo ""',
       );
 
-      const agents = result.stdout.split('\n').filter((l) => l.trim().endsWith('.md'));
+      const items = result.stdout
-      return agents.map((a) => ({ name: a.trim().replace('.md', ''), file: a.trim() }));
+        .split('\n')
+        .map((line) => line.trim())
+        .filter((line) => line.endsWith('.md'))
+        .map((file) => ({
+          id: file.replace('.md', ''),
+          label: file.replace('.md', ''),
+          file,
+        }));
+
+      return {
+        items,
+        total: items.length,
+      };
     } catch {
-      return [];
+      return {
+        items: [],
+        total: 0,
+      };
     }
   }
 
@@ -113,7 +169,16 @@ export class SisterDetailService {
       }),
       this.prisma.activityLog.count({ where: { sisterId: sister.id } }),
     ]);
-    return { items: logs, total };
+
+    return {
+      items: logs.map((log) => ({
+        id: log.id,
+        action: log.action,
+        detail: summarizeText(log.detail),
+        createdAt: log.createdAt,
+      })),
+      total,
+    };
   }
 
   async getOrgData() {
@@ -140,14 +205,16 @@ export class SisterDetailService {
   }
 
   private async getSisterRecord(name: SisterName) {
-    const sister = await this.prisma.sisterConfig.findUnique({ where: { name } });
+    const sister = await this.prisma.sisterConfig.findUnique({
+      where: { name },
+    });
     if (!sister) throw new NotFoundException(`Sister ${name} not found`);
     return sister;
   }
 
   private getKeyPath(): string {
-    const p = this.config.get<string>('SSH_KEY_PATH');
+    const path = this.config.get<string>('SSH_KEY_PATH');
-    if (!p) throw new Error('SSH_KEY_PATH is not set');
+    if (!path) throw new Error('SSH_KEY_PATH is not set');
-    return p;
+    return path;
   }
 }

backend/src/sisters/sisters.controller.ts

@@ -1,12 +1,16 @@
-import { Controller, Get, Param, Res } from '@nestjs/common';
+import { Controller, Get, Param, Res, UseGuards } from '@nestjs/common';
 import type { Response } from 'express';
-import { SistersService } from './sisters.service';
+import { JwtGuard } from '../auth/jwt.guard';
-import { SisterDetailService } from './sister-detail.service';
+import { RoleGuard, Roles } from '../auth/role.guard';
 import { SisterNamePipe } from '../common/sister-name.pipe';
 import type { SisterName } from '../common/sister-name.pipe';
 import { AvatarService } from './avatar.service';
+import { SisterDetailService } from './sister-detail.service';
+import { SistersService } from './sisters.service';
 
 @Controller('api/sisters')
+@UseGuards(JwtGuard, RoleGuard)
+@Roles('admin', 'viewer')
 export class SistersController {
   constructor(
     private readonly sistersService: SistersService,
@@ -16,12 +20,30 @@ export class SistersController {
 
   @Get()
   async getSistersStatus() {
-    return this.sistersService.getAllSistersStatus();
+    const sisters = await this.sistersService.getAllSistersStatus();
+
+    return sisters.map(({ id, name, lxcId, role, status, lastSeen, currentTask }) => ({
+      id,
+      name,
+      lxcId,
+      role,
+      status,
+      lastSeen,
+      currentTask,
+    }));
   }
 
   @Get(':name/system')
   async getSystemInfo(@Param('name', SisterNamePipe) name: SisterName) {
-    return this.sistersService.getSystemInfo(name as SisterName);
+    const system = await this.sistersService.getSystemInfo(name);
+    if (!system) return null;
+
+    return {
+      uptime: system.uptime,
+      cpu: system.cpu,
+      memory: system.memory,
+      disk: system.disk,
+    };
   }
 
   @Get(':name/avatar')
@@ -29,34 +51,38 @@ export class SistersController {
     @Param('name', SisterNamePipe) name: SisterName,
     @Res() res: Response,
   ) {
-    const sister = await this.sistersService.findByName(name as SisterName);
+    const sister = await this.sistersService.findByName(name);
     if (!sister) {
       return res.status(404).json({ message: 'Sister not found' });
     }
 
     const avatar = await this.avatarService.getAvatar(sister);
     res.setHeader('Content-Type', avatar.contentType);
-    res.setHeader('Cache-Control', 'public, max-age=300');
+    res.setHeader('Cache-Control', 'private, max-age=300');
     return res.send(avatar.data);
   }
 
+  @Roles('admin')
   @Get(':name/config')
   async getSisterConfig(@Param('name', SisterNamePipe) name: SisterName) {
-    return this.sisterDetail.getSisterConfig(name as SisterName);
+    return this.sisterDetail.getSisterConfig(name);
   }
 
+  @Roles('admin')
   @Get(':name/sessions')
   async getSisterSessions(@Param('name', SisterNamePipe) name: SisterName) {
-    return this.sisterDetail.getSisterSessions(name as SisterName);
+    return this.sisterDetail.getSisterSessions(name);
   }
 
+  @Roles('admin')
   @Get(':name/subagents')
   async getSisterSubagents(@Param('name', SisterNamePipe) name: SisterName) {
-    return this.sisterDetail.getSisterSubagents(name as SisterName);
+    return this.sisterDetail.getSisterSubagents(name);
   }
 
+  @Roles('admin')
   @Get(':name/activity')
   async getSisterActivity(@Param('name', SisterNamePipe) name: SisterName) {
-    return this.sisterDetail.getSisterActivityLog(name as SisterName);
+    return this.sisterDetail.getSisterActivityLog(name);
   }
 }

backend/src/sisters/sisters.service.spec.ts

@@ -7,13 +7,56 @@ import { ConfigService } from '@nestjs/config';
 describe('SistersService', () => {
   let service: SistersService;
   let sshService: jest.Mocked<SshService>;
-  let prismaService: jest.Mocked<PrismaService>;
 
   const mockSisters = [
-    { id: 1, name: 'harang', ip: '10.10.10.112', user: 'harang', lxcId: 104, sshKeyPath: null, lastSeen: null, status: 'unknown', createdAt: new Date(), updatedAt: new Date() },
+    {
-    { id: 2, name: 'narang', ip: '10.10.10.216', user: 'narang', lxcId: 105, sshKeyPath: null, lastSeen: null, status: 'unknown', createdAt: new Date(), updatedAt: new Date() },
+      id: 1,
-    { id: 3, name: 'darang', ip: '10.10.10.136', user: 'darang', lxcId: 106, sshKeyPath: null, lastSeen: null, status: 'unknown', createdAt: new Date(), updatedAt: new Date() },
+      name: 'harang',
-    { id: 4, name: 'erang', ip: '10.10.10.163', user: 'erang', lxcId: 107, sshKeyPath: null, lastSeen: null, status: 'unknown', createdAt: new Date(), updatedAt: new Date() },
+      ip: '10.10.10.112',
+      user: 'harang',
+      lxcId: 104,
+      sshKeyPath: null,
+      lastSeen: null,
+      status: 'unknown',
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+    {
+      id: 2,
+      name: 'narang',
+      ip: '10.10.10.216',
+      user: 'narang',
+      lxcId: 105,
+      sshKeyPath: null,
+      lastSeen: null,
+      status: 'unknown',
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+    {
+      id: 3,
+      name: 'darang',
+      ip: '10.10.10.136',
+      user: 'darang',
+      lxcId: 106,
+      sshKeyPath: null,
+      lastSeen: null,
+      status: 'unknown',
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
+    {
+      id: 4,
+      name: 'erang',
+      ip: '10.10.10.163',
+      user: 'erang',
+      lxcId: 107,
+      sshKeyPath: null,
+      lastSeen: null,
+      status: 'unknown',
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    },
   ];
 
   beforeEach(async () => {
@@ -35,22 +78,28 @@ describe('SistersService', () => {
         { provide: PrismaService, useValue: mockPrisma },
         {
           provide: ConfigService,
-          useValue: { get: jest.fn().mockImplementation((key: string) => {
+          useValue: {
-            if (key === 'SSH_KEY_PATH') return '/home/narang/.ssh/id_rsa';
+            get: jest.fn().mockImplementation((key: string) => {
-            if (key === 'DATABASE_URL') return 'mysql://test:test@localhost:3306/test';
+              if (key === 'SSH_KEY_PATH') return '/home/narang/.ssh/id_rsa';
-            return undefined;
+              if (key === 'DATABASE_URL')
-          }) },
+                return 'mysql://test:test@localhost:3306/test';
+              return undefined;
+            }),
+          },
         },
       ],
     }).compile();
 
     service = module.get<SistersService>(SistersService);
     sshService = module.get(SshService);
-    prismaService = module.get(PrismaService);
   });
 
   it('SSH 성공 시 online 상태 반환', async () => {
-    sshService.executeCommand.mockResolvedValue({ stdout: 'active', stderr: '', code: 0 });
+    sshService.executeCommand.mockResolvedValue({
+      stdout: 'active',
+      stderr: '',
+      code: 0,
+    });
 
     const result = await service.getAllSistersStatus();
 
@@ -58,11 +107,13 @@ describe('SistersService', () => {
     expect(result[0].status).toBe('online');
     expect(result[0].name).toBe('harang');
     expect(result[0].role).toBe('Orchestrator');
-    expect((result[0] as any).ip).toBeUndefined(); // IP 노출 제거 확인
+    expect(result[0]).not.toHaveProperty('ip'); // IP 노출 제거 확인
   });
 
   it('SSH 실패 시 offline graceful fallback', async () => {
-    sshService.executeCommand.mockRejectedValue(new Error('Connection refused'));
+    sshService.executeCommand.mockRejectedValue(
+      new Error('Connection refused'),
+    );
 
     const result = await service.getAllSistersStatus();
 
@@ -73,13 +124,13 @@ describe('SistersService', () => {
   it('일부 SSH 실패 시 실패한 자매만 offline', async () => {
     sshService.executeCommand
       .mockResolvedValueOnce({ stdout: 'active', stderr: '', code: 0 }) // harang
-      .mockRejectedValueOnce(new Error('timeout'))                       // narang
+      .mockRejectedValueOnce(new Error('timeout')) // narang
       .mockResolvedValueOnce({ stdout: 'inactive', stderr: '', code: 1 }) // darang
-      .mockRejectedValueOnce(new Error('timeout'));                       // erang
+      .mockRejectedValueOnce(new Error('timeout')); // erang
 
     const result = await service.getAllSistersStatus();
 
-    expect(result[0].status).toBe('online');  // harang
+    expect(result[0].status).toBe('online'); // harang
     expect(result[1].status).toBe('offline'); // narang (SSH 실패)
     expect(result[2].status).toBe('offline'); // darang (inactive)
     expect(result[3].status).toBe('offline'); // erang (SSH 실패)

backend/src/sisters/sisters.service.ts

@@ -67,16 +67,54 @@ export class SistersService {
   }
 
   async getSystemInfo(name: string) {
-    const sister = await this.prisma.sisterConfig.findUnique({ where: { name } });
+    const sister = await this.prisma.sisterConfig.findUnique({
+      where: { name },
+    });
     if (!sister) return null;
     const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
     if (!sshKeyPath) return null;
 
     const [uptimeRes, cpuRes, memRes, diskRes] = await Promise.all([
-      this.ssh.executeCommand(sister.ip, sister.user, sshKeyPath, 'cat /proc/uptime 2>/dev/null || echo "0 0"').catch(() => ({ stdout: '0 0', stderr: '', code: 0 })),
+      this.ssh
-      this.ssh.executeCommand(sister.ip, sister.user, sshKeyPath, "top -bn1 | grep Cpu || echo '%Cpu(s): 0.0 us, 0.0 sy, 100.0 id'").catch(() => ({ stdout: '%Cpu(s): 0.0 us, 0.0 sy, 100.0 id', stderr: '', code: 0 })),
+        .executeCommand(
-      this.ssh.executeCommand(sister.ip, sister.user, sshKeyPath, 'free -m | grep Mem || echo "Mem: 0 0 0 0 0 0"').catch(() => ({ stdout: 'Mem: 0 0 0 0 0 0', stderr: '', code: 0 })),
+          sister.ip,
-      this.ssh.executeCommand(sister.ip, sister.user, sshKeyPath, "df -h / | tail -1 || echo '/dev/root 0G 0G 0G 0% /'").catch(() => ({ stdout: '/dev/root 0G 0G 0G 0% /', stderr: '', code: 0 })),
+          sister.user,
+          sshKeyPath,
+          'cat /proc/uptime 2>/dev/null || echo "0 0"',
+        )
+        .catch(() => ({ stdout: '0 0', stderr: '', code: 0 })),
+      this.ssh
+        .executeCommand(
+          sister.ip,
+          sister.user,
+          sshKeyPath,
+          "top -bn1 | grep Cpu || echo '%Cpu(s): 0.0 us, 0.0 sy, 100.0 id'",
+        )
+        .catch(() => ({
+          stdout: '%Cpu(s): 0.0 us, 0.0 sy, 100.0 id',
+          stderr: '',
+          code: 0,
+        })),
+      this.ssh
+        .executeCommand(
+          sister.ip,
+          sister.user,
+          sshKeyPath,
+          'free -m | grep Mem || echo "Mem: 0 0 0 0 0 0"',
+        )
+        .catch(() => ({ stdout: 'Mem: 0 0 0 0 0 0', stderr: '', code: 0 })),
+      this.ssh
+        .executeCommand(
+          sister.ip,
+          sister.user,
+          sshKeyPath,
+          "df -h / | tail -1 || echo '/dev/root 0G 0G 0G 0% /'",
+        )
+        .catch(() => ({
+          stdout: '/dev/root 0G 0G 0G 0% /',
+          stderr: '',
+          code: 0,
+        })),
     ]);
 
     return {
@@ -88,7 +126,15 @@ export class SistersService {
   }
 
   private async checkSisterStatus(
-    sister: { id: number; name: string; ip: string; user: string; lxcId: number; lastSeen: Date | null; status: string },
+    sister: {
+      id: number;
+      name: string;
+      ip: string;
+      user: string;
+      lxcId: number;
+      lastSeen: Date | null;
+      status: string;
+    },
     sshKeyPath: string,
   ): Promise<SisterStatus> {
     try {
@@ -110,11 +156,13 @@ export class SistersService {
       });
 
       if (prevStatus !== status && this.activity) {
-        await this.activity.log({
+        await this.activity
-          sisterId: sister.id,
+          .log({
-          action: 'status_changed',
+            sisterId: sister.id,
-          detail: `[${sister.name}] status: ${prevStatus} → ${status}`,
+            action: 'status_changed',
-        }).catch(() => {});
+            detail: `[${sister.name}] status: ${prevStatus} → ${status}`,
+          })
+          .catch(() => {});
       }
 
       return {

backend/src/tasks/tasks.controller.ts

@@ -1,4 +1,12 @@
-import { Controller, Get, Post, Patch, Param, Body, ParseIntPipe } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Post,
+  Patch,
+  Param,
+  Body,
+  ParseIntPipe,
+} from '@nestjs/common';
 import { TasksService, CreateSprintDto, UpdateTaskDto } from './tasks.service';
 
 @Controller('api')

backend/src/tasks/tasks.service.spec.ts

@@ -8,15 +8,27 @@ describe('TasksService', () => {
   let service: TasksService;
 
   const mockTask = {
-    id: 1, taskId: 'TASK-001', title: 'Test', assignee: 'narang',
+    id: 1,
-    status: 'pending', iteration: 0, sprintId: 1,
+    taskId: 'TASK-001',
-    createdAt: new Date(), updatedAt: new Date(),
+    title: 'Test',
+    assignee: 'narang',
+    status: 'pending',
+    iteration: 0,
+    sprintId: 1,
+    createdAt: new Date(),
+    updatedAt: new Date(),
   };
 
   const mockSprint = {
-    id: 1, projectId: 1, number: 1, name: 'Sprint 001',
+    id: 1,
-    status: 'in_progress', startedAt: null, completedAt: null,
+    projectId: 1,
-    createdAt: new Date(), updatedAt: new Date(),
+    number: 1,
+    name: 'Sprint 001',
+    status: 'in_progress',
+    startedAt: null,
+    completedAt: null,
+    createdAt: new Date(),
+    updatedAt: new Date(),
     tasks: [mockTask],
   };
 
@@ -57,7 +69,9 @@ describe('TasksService', () => {
   it('getTaskLedger: sprint + task + progress 반환', async () => {
     mockPrisma.project.findUnique.mockResolvedValue({
       id: 1,
-      sprints: [{ ...mockSprint, tasks: [{ ...mockTask, status: 'done' }, mockTask] }],
+      sprints: [
+        { ...mockSprint, tasks: [{ ...mockTask, status: 'done' }, mockTask] },
+      ],
     });
 
     const result = await service.getTaskLedger(1);
@@ -67,8 +81,15 @@ describe('TasksService', () => {
   });
 
   it('updateTask: 상태 변경 시 ActivityLog 기록', async () => {
-    mockPrisma.task.findUnique.mockResolvedValue({ ...mockTask, status: 'in_progress' });
+    mockPrisma.task.findUnique.mockResolvedValue({
-    mockPrisma.task.update.mockResolvedValue({ ...mockTask, status: 'done', sprintId: 1 });
+      ...mockTask,
+      status: 'in_progress',
+    });
+    mockPrisma.task.update.mockResolvedValue({
+      ...mockTask,
+      status: 'done',
+      sprintId: 1,
+    });
 
     await service.updateTask(1, { status: 'done' });
 

backend/src/tasks/tasks.service.ts

@@ -13,7 +13,15 @@ export class CreateSprintDto {
   name!: string;
 }
 
-const VALID_STATUSES = ['pending', 'in_progress', 'review', 'done', 'failed', 'blocked', 'escalated'] as const;
+const VALID_STATUSES = [
+  'pending',
+  'in_progress',
+  'review',
+  'done',
+  'failed',
+  'blocked',
+  'escalated',
+] as const;
 
 export class UpdateTaskDto {
   @IsOptional()
@@ -58,14 +66,21 @@ export class TasksService {
       startedAt: sprint.startedAt,
       completedAt: sprint.completedAt,
       tasks: sprint.tasks,
-      progress: sprint.tasks.length > 0
+      progress:
-        ? Math.round(sprint.tasks.filter((t) => t.status === 'done').length / sprint.tasks.length * 100)
+        sprint.tasks.length > 0
-        : 0,
+          ? Math.round(
+              (sprint.tasks.filter((t) => t.status === 'done').length /
+                sprint.tasks.length) *
+                100,
+            )
+          : 0,
     }));
   }
 
   async createSprint(projectId: number, dto: CreateSprintDto) {
-    const project = await this.prisma.project.findUnique({ where: { id: projectId } });
+    const project = await this.prisma.project.findUnique({
+      where: { id: projectId },
+    });
     if (!project) throw new NotFoundException(`Project ${projectId} not found`);
 
     const sprint = await this.prisma.sprint.create({
@@ -90,9 +105,10 @@ export class TasksService {
       where: { id: taskId },
       data: {
         ...dto,
-        iteration: dto.status && dto.status !== prevStatus && prevStatus !== 'pending'
+        iteration:
-          ? { increment: 1 }
+          dto.status && dto.status !== prevStatus && prevStatus !== 'pending'
-          : undefined,
+            ? { increment: 1 }
+            : undefined,
       },
     });
 

docs/product-specs/openclaw-office-dashboard-prd.md

@@ -0,0 +1,115 @@
+# 하나랑 오피스 대시보드 PRD
+
+## 제품명
+하나랑 오피스 대시보드
+
+## 한 줄 정의
+OpenClaw 4자매와 서브에이전트 협업을 2D 등축 투영 오피스로 시각화하고, 채팅/파이프라인/서버 헬스를 함께 운영하는 멀티에이전트 관제 프론트엔드.
+
+## 배경
+기존 하나랑 대시보드는 운영 정보는 잘 보여주지만, 4자매와 서브에이전트가 실제로 어떻게 협업하는지 한눈에 느끼기엔 한계가 있어.
+
+자기야가 원하는 건 단순 상태 카드가 아니라:
+- 누가 자기 자리에서 대기 중인지
+- 누가 회의실로 이동했는지
+- 어떤 서브에이전트가 어떤 워크플로우에서 일하고 있는지
+- 지금 QA 루프인지 배포 직전인지
+를 `오피스`라는 직관적인 은유로 읽는 화면이야.
+
+## 제품 목표
+1. 4자매 메인 에이전트와 17개 서브에이전트, 총 21개 에이전트를 하나의 세계관 안에서 시각화한다.
+2. 4자매 독립 Gateway WebSocket을 통해 실시간 상태를 반영한다.
+3. Lobster 워크플로우와 Discord handoff를 자연스럽게 한 화면에 묶는다.
+4. 직접 채팅, 파이프라인 현황, 서버 헬스까지 운영 도구를 통합한다.
+
+## 핵심 사용자
+- 자기야: 전체 파이프라인 운영 책임자
+- 하랑이: Planning / handoff orchestration
+- 나랑이: 구현 상태 추적
+- 다랑이: QA 루프 / blocker 판단
+- 이랑이: 배포 / 인프라 점검
+
+## 핵심 시나리오
+### 시나리오 1: 현재 누가 일하고 있는지 한눈에 보기
+자기야가 메인 화면에 들어오면, 하랑/나랑/다랑/이랑 좌석과 주변 서브에이전트 상태를 보고 즉시 현재 국면을 판단한다.
+
+### 시나리오 2: 구현 → QA → 배포 흐름 확인
+나랑이 쪽 서브에이전트가 활발히 움직이다가, 다랑이 회의실로 연결선이 넘어가고, 승인되면 이랑이 인프라 영역으로 흐름이 넘어가는 걸 본다.
+
+### 시나리오 3: 특정 자매와 직접 대화
+자기야가 하랑이나 나랑이를 선택해서 direct chat을 열고 작업을 지시한다.
+
+### 시나리오 4: 서버/헬스 이상 감지
+대시보드 한쪽 패널에서 Gateway 연결, Dev 서버, Docker 상태 이상을 바로 감지한다.
+
+## 기능 요구사항
+### 필수
+1. 4자매 Gateway WebSocket 연결
+2. 2D 등축 투영 오피스 메인 화면
+3. 메인 에이전트 4명 고정 좌석
+4. 서브에이전트 동적 이동/상태 표시
+5. 상태: `idle`, `thinking`, `tool_calling`, `speaking`, `error`
+6. 협업 연결선 / 회의실 이동 시각화
+7. 자매 선택 직접 채팅 인터페이스
+8. Lobster 워크플로우 / 스프린트 / 사이클 패널
+9. 서버 상태 패널 (4자매 + Dev + Docker)
+
+### 중요
+10. live / snapshot / fallback 구분
+11. 실브라우저/모바일 대응
+12. 기존 하나랑 대시보드 운영 패널과의 연속성 유지
+
+## 정보 구조
+### 메인 오피스 화면
+- 좌측 또는 중앙: 오피스 씬
+- 우측: 선택 에이전트 detail / chat / workflow
+- 하단 또는 보조 패널: 서버 헬스 / 최근 handoff / sprint state
+
+### 오피스 씬 요소
+- 하랑이 데스크
+- 나랑이 데스크
+- 다랑이 데스크
+- 이랑이 데스크
+- 회의실
+- 임시 작업석
+- 인프라/서버 존
+- 서브에이전트 이동 경로
+
+### 채팅
+- 자매 선택 탭
+- 메시지 히스토리
+- 입력창
+- tool call 상태 / streaming 표시
+
+### 운영 패널
+- active workflow
+- current sprint
+- review loop
+- deploy gate
+- server health
+
+## 데이터 소스
+- 4자매 Gateway WebSocket
+- activity log
+- workflow state
+- session/chat API
+- admin/system/health API
+
+## 기술 원칙
+- 기존 Next.js + styled-components 유지
+- Backend는 기존 Nest.js + Prisma 유지
+- WebSocket은 OpenClaw Gateway 기준
+- 필요 시 polling reconciliation 허용
+- fake 데이터 하드코딩 금지
+
+## 비기능 요구사항
+- 첫 화면에서 현재 협업 구조 이해 가능
+- 과한 애니메이션 금지
+- 모바일에서도 핵심 흐름 유지
+- 데이터 소스 구분이 명확해야 함
+
+## 성공 기준
+- 자기야가 메인 화면만 보고 현재 상태를 설명할 수 있음
+- 4자매/서브에이전트 구조가 카드보다 더 직관적으로 읽힘
+- 채팅/워크플로우/서버 패널이 따로 놀지 않음
+- live / snapshot / fallback 구분이 사용자에게 정직하게 보임

frontend/app/office/page.tsx

@@ -0,0 +1,494 @@
+'use client';
+
+import React, { useCallback, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { API_URL, POLL_INTERVAL_MS } from '@/lib/config';
+import { useSocket } from '@/lib/useSocket';
+import OfficeScene, {
+  type AgentState,
+  type SisterName,
+  type SisterNode,
+  type SubAgent,
+  type SelectedAgent,
+} from '@/components/office/OfficeScene';
+import ContextPanel from '@/components/office/ContextPanel';
+import ChatWorkspace from '@/components/office/ChatWorkspace';
+import PipelinePanel from '@/components/office/PipelinePanel';
+import ServerHealthPanel, { type ServerEntry } from '@/components/office/ServerHealthPanel';
+import type { PipelineNode } from '@/components/dashboard/ActivePipeline';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface SisterApiItem {
+  id?: number;
+  name: string;
+  status: 'online' | 'offline' | 'working' | 'unknown';
+  role?: string;
+  currentTask?: string | null;
+  lastSeen?: string | null;
+  cpu?: number;
+  memory?: { used?: number; total?: number };
+}
+
+interface DashboardOpsData {
+  focusProject: {
+    name: string;
+    phase: string;
+    progress: number;
+    deployStatus: string;
+    currentSprint?: string | null;
+    ownerSister?: string | null;
+  } | null;
+  pipeline: {
+    activeTask: string;
+    focus: string;
+    reviewLoopCount: number;
+    escalationCount: number;
+    deployState: string;
+    nodes: PipelineNode[];
+  };
+  freshness: {
+    generatedAt: string;
+    activityLatestAt: string | null;
+    sistersLatestAt: string | null;
+    qaDocLatestAt: string | null;
+  };
+}
+
+// ─── Static subagent definitions ─────────────────────────────────────────────
+
+const SUBAGENT_DEFS: Record<SisterName, { id: string; name: string; label: string }[]> = {
+  harang: [
+    { id: 'harang-planner',      name: 'planner',      label: 'planner' },
+    { id: 'harang-task-tracker', name: 'task-tracker', label: 'task-tracker' },
+    { id: 'harang-prd-writer',   name: 'prd-writer',   label: 'prd-writer' },
+  ],
+  narang: [
+    { id: 'narang-worker',       name: 'worker',       label: 'worker' },
+    { id: 'narang-db-designer',  name: 'db-designer',  label: 'db-designer' },
+    { id: 'narang-test-writer',  name: 'test-writer',  label: 'test-writer' },
+    { id: 'narang-refactorer',   name: 'refactorer',   label: 'refactorer' },
+  ],
+  darang: [
+    { id: 'darang-reviewer',         name: 'reviewer',         label: 'reviewer' },
+    { id: 'darang-code-reviewer',    name: 'code-reviewer',    label: 'code-rvw' },
+    { id: 'darang-qa-tester',        name: 'qa-tester',        label: 'qa-tester' },
+    { id: 'darang-security-auditor', name: 'security-auditor', label: 'security' },
+    { id: 'darang-ux-reviewer',      name: 'ux-reviewer',      label: 'ux-reviewer' },
+  ],
+  erang: [
+    { id: 'erang-deploy-manager', name: 'deploy-manager', label: 'deploy' },
+    { id: 'erang-db-manager',     name: 'db-manager',     label: 'db-mgr' },
+    { id: 'erang-nginx-manager',  name: 'nginx-manager',  label: 'nginx' },
+    { id: 'erang-monitoring',     name: 'monitoring',     label: 'monitor' },
+    { id: 'erang-dns-manager',    name: 'dns-manager',    label: 'dns' },
+  ],
+};
+
+const SISTER_DISPLAY: Record<SisterName, string> = {
+  harang: '하랑이',
+  narang: '나랑이',
+  darang: '다랑이',
+  erang:  '이랑이',
+};
+
+const SISTER_ROLES: Record<SisterName, string> = {
+  harang: 'Planning & Orchestration',
+  narang: 'Development',
+  darang: 'QA & Review',
+  erang:  'Infra & Deploy',
+};
+
+const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
+const SUBAGENT_COUNT = Object.values(SUBAGENT_DEFS).reduce((total, defs) => total + defs.length, 0);
+
+const FALLBACK_SISTERS: SisterApiItem[] = [
+  {
+    name: 'harang',
+    status: 'working',
+    role: SISTER_ROLES.harang,
+    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';
+  if (status === 'online') return hasTask ? 'speaking' : 'idle';
+  return 'idle';
+}
+
+function derivedSubagentState(parentState: AgentState, index: number): AgentState {
+  // Derive subagent state from parent with some variety
+  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 buildSisterNodes(sisters: SisterApiItem[]): SisterNode[] {
+  return SISTER_ORDER.map((name) => {
+    const apiItem = sisters.find((s) => s.name === name);
+    const status = apiItem?.status ?? 'unknown';
+    const hasTask = Boolean(apiItem?.currentTask);
+    const parentState = statusToAgentState(status, hasTask);
+
+    const subDefs = SUBAGENT_DEFS[name];
+    const subagents: SubAgent[] = subDefs.map((def, i) => ({
+      ...def,
+      sister: name,
+      state: derivedSubagentState(parentState, i),
+    }));
+
+    return {
+      name,
+      displayName: SISTER_DISPLAY[name],
+      role: apiItem?.role ?? SISTER_ROLES[name],
+      emoji: name === 'harang' || name === 'narang' ? '🦊' : name === 'darang' ? '🐱' : '🐺',
+      state: parentState,
+      currentTask: apiItem?.currentTask ?? null,
+      subagents,
+    };
+  });
+}
+
+function buildServerEntries(sisters: SisterApiItem[], sisterSource: 'live' | 'snapshot' | 'fallback'): ServerEntry[] {
+  const sisterEntries: ServerEntry[] = SISTER_ORDER.map((name) => {
+    const s = sisters.find((x) => x.name === name);
+    return {
+      id: `server-${name}`,
+      label: SISTER_DISPLAY[name],
+      type: 'sister' as const,
+      status: s?.status ?? 'unknown',
+      detail: s?.currentTask ?? null,
+      source: s ? 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-docker',
+      label: 'Docker / Infra',
+      type: 'docker',
+      status: 'unknown',
+      detail: null,
+      source: 'fallback',
+    },
+  ];
+
+  return [...sisterEntries, ...extraEntries];
+}
+
+function formatGeneratedAt(ts: string): string {
+  try {
+    return new Date(ts).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  } catch {
+    return ts;
+  }
+}
+
+// ─── Styled Components ────────────────────────────────────────────────────────
+
+const Shell = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+  min-height: 0;
+`;
+
+const PageHeader = styled.div`
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-lg);
+  flex-wrap: wrap;
+`;
+
+const PageTitle = styled.h1`
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+`;
+
+const PageMeta = styled.div`
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+
+const FreshnessBar = styled.div`
+  display: flex;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+  margin-left: auto;
+`;
+
+const FreshnessBadge = styled.span<{ $type: 'live' | 'snapshot' | 'fallback' }>`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: ${({ $type }) =>
+    $type === 'live'     ? '#00BFA5'
+    : $type === 'snapshot' ? '#FF9800'
+    : '#555'};
+  border: 1px solid currentColor;
+  padding: 2px 6px;
+  opacity: 0.8;
+`;
+
+const MainArea = styled.div`
+  display: flex;
+  gap: 0;
+  min-height: 0;
+  flex: 1;
+
+  @media (max-width: 767px) {
+    flex-direction: column;
+  }
+`;
+
+const SceneColumn = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+  min-width: 0;
+`;
+
+const ChatArea = styled.div`
+  height: 520px;
+  flex-shrink: 0;
+
+  @media (max-width: 767px) {
+    height: 460px;
+  }
+`;
+
+const BottomPanels = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+`;
+
+const LoadingOverlay = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+`;
+
+// ─── 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) => {
+      setSisters(updatedSisters);
+    },
+  });
+
+  // Initial data fetch
+  useEffect(() => {
+    const fetchAll = async () => {
+      try {
+        const [sistersRes, opsRes] = await Promise.allSettled([
+          fetch(`${API_URL}/api/sisters`).then((r) => r.json()),
+          fetch(`${API_URL}/api/dashboard/ops`).then((r) => r.json()),
+        ]);
+
+        if (sistersRes.status === 'fulfilled') {
+          setSisters(Array.isArray(sistersRes.value) ? sistersRes.value : []);
+        }
+        if (opsRes.status === 'fulfilled') {
+          setOpsData(opsRes.value);
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void fetchAll();
+
+    // Fix #3: Polling only when socket is not connected
+    // Socket handles live updates; polling is a disconnected fallback
+    return () => {};
+  }, []);
+
+  // 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`)
+        .then((r) => r.json())
+        .then((data: SisterApiItem[]) => {
+          if (Array.isArray(data)) setSisters(data);
+        })
+        .catch(() => {/* ignore polling errors */});
+    }, POLL_INTERVAL_MS);
+
+    return () => clearInterval(interval);
+  }, [connected]);
+
+  const hasSisterSnapshot = sisters.length > 0;
+  const sisterDataMode: 'live' | 'snapshot' | 'fallback' = connected
+    ? 'live'
+    : hasSisterSnapshot
+      ? 'snapshot'
+      : 'fallback';
+  const effectiveSisters = hasSisterSnapshot ? sisters : FALLBACK_SISTERS;
+
+  const sisterNodes = buildSisterNodes(effectiveSisters);
+  const serverEntries = buildServerEntries(effectiveSisters, sisterDataMode);
+
+  const handleSelectSister = useCallback((name: SisterName) => {
+    setSelected({ type: 'sister', name });
+    setChatSister(null);
+  }, []);
+
+  const handleSelectSubagent = useCallback((id: string, sister: SisterName) => {
+    setSelected({ type: 'subagent', id, sister });
+    setChatSister(null);
+  }, []);
+
+  const handleOpenChat = useCallback((sisterName: SisterName) => {
+    setChatSister(sisterName);
+  }, []);
+
+  const handleCloseChat = useCallback(() => {
+    setChatSister(null);
+  }, []);
+
+  const handleClearSelection = useCallback(() => {
+    setSelected(null);
+  }, []);
+
+  const pipeline = opsData?.pipeline ?? {
+    activeTask: 'SPRINT-016',
+    focus: 'Isometric Office Dashboard',
+    reviewLoopCount: 0,
+    escalationCount: 0,
+    deployState: '—',
+    nodes: [],
+  };
+
+  const freshness = opsData?.freshness ?? {
+    generatedAt: new Date().toISOString(),
+    activityLatestAt: null,
+    sistersLatestAt: null,
+    qaDocLatestAt: null,
+  };
+
+  if (loading) {
+    return <LoadingOverlay>오피스 데이터 로딩 중...</LoadingOverlay>;
+  }
+
+  return (
+    <Shell>
+      <PageHeader>
+        <PageTitle>🏢 오피스 대시보드</PageTitle>
+        <PageMeta>4자매 · {SUBAGENT_COUNT} 서브에이전트 · 협업 관제</PageMeta>
+        <FreshnessBar>
+          <FreshnessBadge $type={sisterDataMode}>
+            자매: {sisterDataMode === 'live' ? 'live · ws' : sisterDataMode === 'snapshot' ? 'snapshot · poll' : 'fallback · doc'}
+          </FreshnessBadge>
+          <FreshnessBadge $type="fallback">
+            서브에이전트: fallback
+          </FreshnessBadge>
+          <FreshnessBadge $type="snapshot">
+            pipeline: snapshot
+          </FreshnessBadge>
+        </FreshnessBar>
+      </PageHeader>
+
+      <MainArea>
+        <SceneColumn>
+          <OfficeScene
+            sisters={sisterNodes}
+            selected={selected}
+            onSelectSister={handleSelectSister}
+            onSelectSubagent={handleSelectSubagent}
+            dataMode={sisterDataMode}
+          />
+
+          {chatSister && (
+            <ChatArea>
+              <ChatWorkspace
+                initialSister={chatSister}
+                onClose={handleCloseChat}
+              />
+            </ChatArea>
+          )}
+        </SceneColumn>
+
+        <ContextPanel
+          selected={selected}
+          sisters={sisterNodes}
+          onOpenChat={handleOpenChat}
+          onClear={handleClearSelection}
+        />
+      </MainArea>
+
+      <BottomPanels>
+        <PipelinePanel
+          activeTask={pipeline.activeTask}
+          focus={pipeline.focus}
+          reviewLoopCount={pipeline.reviewLoopCount}
+          escalationCount={pipeline.escalationCount}
+          deployState={pipeline.deployState}
+          nodes={pipeline.nodes}
+          freshness={`generated ${formatGeneratedAt(freshness.generatedAt)}`}
+        />
+        <ServerHealthPanel
+          servers={serverEntries}
+          dataMode={sisterDataMode}
+          generatedAt={freshness.generatedAt}
+        />
+      </BottomPanels>
+    </Shell>
+  );
+}

frontend/components/common/Sidebar.tsx

@@ -8,6 +8,7 @@ import { useAuth } from '@/lib/AuthContext';
 
 const NAV_ITEMS = [
   { href: '/', label: '대시' },
+  { href: '/office', label: '오피스' },
   { href: '/projects', label: '프로' },
   { href: '/activities', label: '활동' },
   { href: '/sisters', label: '자매' },

frontend/components/dashboard/ActivePipeline.tsx

@@ -0,0 +1,295 @@
+'use client';
+
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+export interface PipelineNode {
+  id: string;
+  label: string;
+  role: string;
+  state: 'idle' | 'active' | 'review' | 'blocked' | 'ready';
+  detail: string;
+}
+
+interface ActivePipelineProps {
+  activeTask: string;
+  focus: string;
+  reviewLoopCount: number;
+  escalationCount: number;
+  deployState: string;
+  nodes: PipelineNode[];
+}
+
+const flow = keyframes`
+  0% { transform: translateX(0); opacity: 0.15; }
+  40% { opacity: 0.8; }
+  100% { transform: translateX(20px); opacity: 0; }
+`;
+
+const PipelineCard = styled.section`
+  border: 1px solid var(--border-color);
+  background: var(--bg-surface);
+  padding: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+`;
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-md);
+  align-items: flex-start;
+  flex-wrap: wrap;
+`;
+
+const Eyebrow = styled.div`
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+`;
+
+const Title = styled.h2`
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+  margin-top: 6px;
+`;
+
+const Summary = styled.p`
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  max-width: 780px;
+  text-transform: uppercase;
+`;
+
+const HeaderStats = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, minmax(110px, 1fr));
+  gap: var(--space-sm);
+
+  @media (max-width: 767px) {
+    width: 100%;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+`;
+
+const StatBox = styled.div`
+  border: 1px solid var(--border-color);
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+`;
+
+const StatLabel = styled.span`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+`;
+
+const StatValue = styled.span`
+  font-size: 15px;
+  color: var(--text-primary);
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const FlowMap = styled.div`
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 14px;
+  align-items: stretch;
+
+  @media (max-width: 1199px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const NodeWrap = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  @media (max-width: 1199px) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+`;
+
+const Connector = styled.div<{ $active?: boolean }>`
+  flex: 1;
+  min-width: 36px;
+  height: 1px;
+  background: ${({ $active }) => ($active ? 'rgba(245,245,245,0.45)' : 'var(--border-color)')};
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -18px;
+    width: 18px;
+    height: 5px;
+    background: ${({ $active }) => ($active ? 'rgba(245,245,245,0.85)' : 'transparent')};
+    animation: ${({ $active }) => ($active ? flow : 'none')} 1.6s linear infinite;
+  }
+
+  @media (max-width: 1199px) {
+    width: 1px;
+    height: 24px;
+    min-width: 1px;
+    margin: 0 auto;
+
+    &::after {
+      top: -8px;
+      left: -2px;
+      width: 5px;
+      height: 10px;
+      animation: none;
+    }
+  }
+`;
+
+const stateBorder: Record<PipelineNode['state'], string> = {
+  idle: 'var(--border-color)',
+  active: '#6fc3ff',
+  review: '#ff7ac6',
+  blocked: '#ff8d7a',
+  ready: '#8dffb2',
+};
+
+const stateText: Record<PipelineNode['state'], string> = {
+  idle: 'IDLE',
+  active: 'ACTIVE',
+  review: 'REVIEW',
+  blocked: 'BLOCKED',
+  ready: 'READY',
+};
+
+const NodeCard = styled.div<{ $state: PipelineNode['state'] }>`
+  border: 1px solid ${({ $state }) => stateBorder[$state]};
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 148px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.015) 0%, rgba(255,255,255,0) 100%);
+`;
+
+const NodeTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-sm);
+  align-items: flex-start;
+`;
+
+const NodeLabel = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const NodeName = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+`;
+
+const NodeRole = styled.div`
+  font-size: 12px;
+  color: var(--text-secondary);
+`;
+
+const StateBadge = styled.span<{ $state: PipelineNode['state'] }>`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: ${({ $state }) => stateBorder[$state]};
+  border: 1px solid ${({ $state }) => stateBorder[$state]};
+  padding: 4px 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+`;
+
+const NodeDetail = styled.div`
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-primary);
+`;
+
+const NodeHint = styled.div`
+  margin-top: auto;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+`;
+
+export default function ActivePipeline({
+  activeTask,
+  focus,
+  reviewLoopCount,
+  escalationCount,
+  deployState,
+  nodes,
+}: ActivePipelineProps) {
+  return (
+    <PipelineCard>
+      <Header>
+        <div>
+          <Eyebrow>Active pipeline / snapshot</Eyebrow>
+          <Title>{activeTask}</Title>
+          <Summary>{focus}</Summary>
+        </div>
+        <HeaderStats>
+          <StatBox>
+            <StatLabel>review loop</StatLabel>
+            <StatValue>{reviewLoopCount}x</StatValue>
+          </StatBox>
+          <StatBox>
+            <StatLabel>escalations</StatLabel>
+            <StatValue>{escalationCount}</StatValue>
+          </StatBox>
+          <StatBox>
+            <StatLabel>deploy state</StatLabel>
+            <StatValue>{deployState}</StatValue>
+          </StatBox>
+        </HeaderStats>
+      </Header>
+
+      <FlowMap>
+        {nodes.map((node, index) => {
+          const connectorActive = node.state === 'active' || node.state === 'review' || node.state === 'ready';
+          return (
+            <NodeWrap key={node.id}>
+              <NodeCard $state={node.state}>
+                <NodeTop>
+                  <NodeLabel>
+                    <NodeName>{node.label}</NodeName>
+                    <NodeRole>{node.role}</NodeRole>
+                  </NodeLabel>
+                  <StateBadge $state={node.state}>{stateText[node.state]}</StateBadge>
+                </NodeTop>
+                <NodeDetail>{node.detail}</NodeDetail>
+                <NodeHint>snapshot {String(index + 1).padStart(2, '0')}</NodeHint>
+              </NodeCard>
+              {index < nodes.length - 1 && <Connector $active={connectorActive} />}
+            </NodeWrap>
+          );
+        })}
+      </FlowMap>
+    </PipelineCard>
+  );
+}

frontend/components/office/ChatWorkspace.tsx

@@ -0,0 +1,609 @@
+'use client';
+
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import styled, { keyframes } from 'styled-components';
+import type { SisterName } from './OfficeScene';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'tool';
+  content: string;
+  toolName?: string;
+  ts: string;
+}
+
+interface ChatWorkspaceProps {
+  initialSister: SisterName;
+  onClose: () => void;
+}
+
+// ─── Static data ──────────────────────────────────────────────────────────────
+
+const SISTER_DISPLAY: Record<SisterName, string> = {
+  harang: '하랑이',
+  narang: '나랑이',
+  darang: '다랑이',
+  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',
+};
+
+const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
+
+// ─── Animations ──────────────────────────────────────────────────────────────
+
+const fadeIn = keyframes`
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+`;
+
+// ─── Styled Components ────────────────────────────────────────────────────────
+
+const Workspace = styled.div`
+  display: flex;
+  height: 100%;
+  border: 1px solid var(--border-color);
+  background: var(--bg-surface);
+  overflow: hidden;
+
+  @media (max-width: 767px) {
+    flex-direction: column;
+  }
+`;
+
+// Left sidebar - sister tabs
+const SisterTabs = styled.nav`
+  width: 200px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-md) 0;
+
+  @media (max-width: 767px) {
+    width: 100%;
+    flex-direction: row;
+    padding: 0;
+    overflow-x: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--border-color);
+  }
+`;
+
+const SisterTabHeader = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 0 var(--space-md) var(--space-md);
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+
+const SisterTab = styled.button<{ $active: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  background: ${({ $active }) => ($active ? 'rgba(255,255,255,0.04)' : 'transparent')};
+  border: none;
+  border-left: 2px solid ${({ $active }) => ($active ? 'var(--text-primary)' : 'transparent')};
+  color: ${({ $active }) => ($active ? 'var(--text-primary)' : 'var(--text-secondary)')};
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  transition: all 0.15s;
+  font-family: inherit;
+
+  &:hover {
+    color: var(--text-primary);
+    background: rgba(255,255,255,0.03);
+  }
+
+  @media (max-width: 767px) {
+    border-left: none;
+    border-bottom: 2px solid ${({ $active }) => ($active ? 'var(--text-primary)' : 'transparent')};
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+`;
+
+const TabEmoji = styled.span`
+  font-size: 16px;
+  line-height: 1;
+`;
+
+const TabMeta = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const TabName = styled.div`
+  font-size: 13px;
+  font-weight: 600;
+`;
+
+const TabRole = styled.div`
+  font-size: 10px;
+  color: var(--text-secondary);
+
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+
+// Center - message timeline
+const MessageArea = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+`;
+
+const MessageHeader = styled.div`
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex-shrink: 0;
+`;
+
+const HeaderEmoji = styled.span`
+  font-size: 20px;
+`;
+
+const HeaderMeta = styled.div`
+  flex: 1;
+`;
+
+const HeaderName = styled.div`
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+`;
+
+const HeaderRole = styled.div`
+  font-size: 11px;
+  color: var(--text-secondary);
+`;
+
+const HeaderBadge = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+  padding: 2px var(--space-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+
+const Timeline = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+`;
+
+const MessageBubble = styled.div<{ $role: ChatMessage['role'] }>`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: ${({ $role }) => $role === 'user' ? 'flex-end' : 'flex-start'};
+  animation: ${fadeIn} 0.2s ease;
+`;
+
+const BubbleContent = styled.div<{ $role: ChatMessage['role'] }>`
+  max-width: 75%;
+  padding: var(--space-sm) var(--space-md);
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  background: ${({ $role }) =>
+    $role === 'user'
+      ? 'rgba(255,255,255,0.06)'
+      : $role === 'tool'
+      ? 'rgba(255, 152, 0, 0.06)'
+      : 'rgba(255,255,255,0.02)'};
+  border: 1px solid ${({ $role }) =>
+    $role === 'user'
+      ? 'rgba(255,255,255,0.12)'
+      : $role === 'tool'
+      ? 'rgba(255,152,0,0.2)'
+      : 'rgba(255,255,255,0.06)'};
+  font-family: ${({ $role }) => $role === 'tool' ? 'var(--font-mono)' : 'inherit'};
+`;
+
+const BubbleMeta = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  opacity: 0.6;
+`;
+
+const 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;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--space-md);
+  color: var(--text-secondary);
+  font-size: 13px;
+  text-align: center;
+`;
+
+const GatewayNotice = styled.div`
+  border: 1px solid var(--border-color);
+  padding: var(--space-md);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  line-height: 1.7;
+  max-width: 280px;
+  text-align: center;
+`;
+
+// Input area
+const InputArea = styled.div`
+  padding: var(--space-md) var(--space-lg);
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  gap: var(--space-sm);
+  align-items: flex-end;
+  flex-shrink: 0;
+`;
+
+const MessageInput = styled.textarea`
+  flex: 1;
+  background: var(--bg-input, #1a1a1a);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 13px;
+  padding: var(--space-sm) var(--space-md);
+  resize: none;
+  min-height: 40px;
+  max-height: 120px;
+  line-height: 1.5;
+  transition: border-color 0.15s;
+
+  &:focus {
+    outline: none;
+    border-color: var(--border-hover);
+  }
+
+  &::placeholder {
+    color: var(--text-secondary);
+    opacity: 0.5;
+  }
+`;
+
+const SendBtn = styled.button`
+  border: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: var(--space-sm) var(--space-md);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  transition: all 0.15s;
+  white-space: nowrap;
+  align-self: flex-end;
+
+  &:hover:not(:disabled) {
+    border-color: var(--border-hover);
+    color: var(--text-primary);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+`;
+
+const InputMeta = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  opacity: 0.5;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  text-align: center;
+`;
+
+// Right - sister context
+const SisterContext = styled.aside`
+  width: 220px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--border-color);
+  padding: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+  overflow-y: auto;
+
+  @media (max-width: 1199px) {
+    display: none;
+  }
+`;
+
+const ContextSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+`;
+
+const CtxLabel = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 4px;
+`;
+
+const CtxValue = styled.div`
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.5;
+`;
+
+const CtxMono = styled.div`
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+`;
+
+// Close button
+const CloseBtn = styled.button`
+  border: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: var(--space-xs) var(--space-sm);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  transition: all 0.15s;
+
+  &:hover {
+    border-color: var(--border-hover);
+    color: var(--text-primary);
+  }
+`;
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatTs(ts: string): string {
+  const date = new Date(ts);
+  const diff = Date.now() - date.getTime();
+  const min = Math.floor(diff / 60000);
+  if (min < 1) return '방금';
+  if (min < 60) return `${min}분 전`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}시간 전`;
+  return `${Math.floor(hr / 24)}일 전`;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+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 [drafts, setDrafts] = useState<Partial<Record<SisterName, string>>>({});
+  const input = drafts[activeSister] ?? '';
+  const timelineRef = useRef<HTMLDivElement>(null);
+
+  const messages = useMemo(() => allMessages[activeSister] ?? [], [allMessages, activeSister]);
+
+  const setMessages = useCallback(
+    (updater: (prev: ChatMessage[]) => ChatMessage[]) => {
+      setAllMessages((prev) => ({
+        ...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
+  // Fix #2: Clear only the active sister's draft
+  const handleSend = useCallback(() => {
+    const text = input.trim();
+    if (!text) return;
+
+    const optimisticId = `opt-${crypto.randomUUID()}`;
+    const userMsg: ChatMessage = {
+      id: optimisticId,
+      role: 'user',
+      content: text,
+      ts: new Date().toISOString(),
+    };
+
+    setMessages((prev) => [...prev, userMsg]);
+    setDrafts((prev) => ({ ...prev, [activeSister]: '' }));
+
+    // Gateway connection pending — show system notice
+    setTimeout(() => {
+      const sysMsg: ChatMessage = {
+        id: `sys-${crypto.randomUUID()}`,
+        role: 'assistant',
+        content: `[Gateway 연결 대기] ${SISTER_DISPLAY[activeSister]} OpenClaw Gateway가 아직 연결되지 않았습니다. 직접 채팅 기능은 Gateway WebSocket 연결 후 활성화됩니다.`,
+        ts: new Date().toISOString(),
+      };
+      setMessages((prev) => [...prev, sysMsg]);
+    }, 400);
+  }, [activeSister, input, setMessages]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <Workspace>
+      {/* Left: sister tabs */}
+      <SisterTabs>
+        <SisterTabHeader>direct chat</SisterTabHeader>
+        {SISTER_ORDER.map((name) => (
+          <SisterTab
+            key={name}
+            $active={activeSister === name}
+            onClick={() => setActiveSister(name)}
+          >
+            <TabEmoji>{SISTER_EMOJIS[name]}</TabEmoji>
+            <TabMeta>
+              <TabName>{SISTER_DISPLAY[name]}</TabName>
+              <TabRole>{SISTER_ROLES[name].split(' ')[0]}</TabRole>
+            </TabMeta>
+          </SisterTab>
+        ))}
+      </SisterTabs>
+
+      {/* Center: message timeline */}
+      <MessageArea>
+        <MessageHeader>
+          <HeaderEmoji>{SISTER_EMOJIS[activeSister]}</HeaderEmoji>
+          <HeaderMeta>
+            <HeaderName>{SISTER_DISPLAY[activeSister]}</HeaderName>
+            <HeaderRole>{SISTER_ROLES[activeSister]}</HeaderRole>
+          </HeaderMeta>
+          <HeaderBadge>Gateway 대기</HeaderBadge>
+          <CloseBtn onClick={onClose}>✕ 닫기</CloseBtn>
+        </MessageHeader>
+
+        <Timeline ref={timelineRef}>
+          {messages.length === 0 ? (
+            <EmptyTimeline>
+              <div>{SISTER_EMOJIS[activeSister]}</div>
+              <div>{SISTER_DISPLAY[activeSister]}에게 메시지를 보내세요.</div>
+              <GatewayNotice>
+                openclaw gateway 연결 대기 중<br />
+                메시지 입력은 가능하나<br />
+                실시간 응답은 gateway 연결 후 활성화
+              </GatewayNotice>
+            </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>
+            ))
+          )}
+        </Timeline>
+
+        <InputMeta>
+          shift+enter = 줄바꿈 · enter = 전송 · gateway: 연결 대기
+        </InputMeta>
+
+        <InputArea>
+          <MessageInput
+            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>
+        </InputArea>
+      </MessageArea>
+
+      {/* Right: sister context */}
+      <SisterContext>
+        <ContextSection>
+          <CtxLabel>agent</CtxLabel>
+          <CtxValue>
+            {SISTER_EMOJIS[activeSister]} {SISTER_DISPLAY[activeSister]}
+          </CtxValue>
+          <CtxMono>{SISTER_ROLES[activeSister]}</CtxMono>
+        </ContextSection>
+
+        <ContextSection>
+          <CtxLabel>채팅 상태</CtxLabel>
+          <CtxValue>Gateway 연결 대기</CtxValue>
+          <CtxMono>openclaw websocket</CtxMono>
+        </ContextSection>
+
+        <ContextSection>
+          <CtxLabel>data source</CtxLabel>
+          <CtxMono>
+            live: ws (pending)<br />
+            fallback: ui-only
+          </CtxMono>
+        </ContextSection>
+
+        <ContextSection>
+          <CtxLabel>상세</CtxLabel>
+          <CtxValue>
+            <a
+              href={`/sisters/${activeSister}`}
+              style={{
+                color: 'var(--text-secondary)',
+                textDecoration: 'none',
+                fontSize: '12px',
+              }}
+            >
+              → 자매 상세 보기
+            </a>
+          </CtxValue>
+        </ContextSection>
+      </SisterContext>
+    </Workspace>
+  );
+}

frontend/components/office/ContextPanel.tsx

@@ -0,0 +1,455 @@
+'use client';
+
+import React from 'react';
+import styled from 'styled-components';
+import Link from 'next/link';
+import type { SisterNode, SubAgent, SisterName, AgentState, SelectedAgent } from './OfficeScene';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface ContextPanelProps {
+  selected: SelectedAgent | null;
+  sisters: SisterNode[];
+  onOpenChat: (sisterName: SisterName) => void;
+  onClear: () => void;
+}
+
+// ─── Styled Components ────────────────────────────────────────────────────────
+
+const Panel = styled.aside`
+  width: 300px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--border-color);
+  background: var(--bg-surface);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+
+  @media (max-width: 1199px) {
+    width: 260px;
+  }
+
+  @media (max-width: 767px) {
+    width: 100%;
+    border-left: none;
+    border-top: 1px solid var(--border-color);
+    max-height: 220px;
+  }
+`;
+
+const PanelHeader = styled.div`
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+`;
+
+const PanelTitle = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+`;
+
+const ClearBtn = styled.button`
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+`;
+
+const PanelBody = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+`;
+
+const EmptyState = styled.div`
+  color: var(--text-secondary);
+  font-size: 13px;
+  line-height: 1.6;
+  text-align: center;
+  padding: var(--space-xl) 0;
+`;
+
+const AgentHeader = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-md);
+`;
+
+const AgentEmoji = styled.div`
+  font-size: 28px;
+  line-height: 1;
+  flex-shrink: 0;
+`;
+
+const AgentMeta = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const AgentName = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+`;
+
+const AgentRole = styled.div`
+  font-size: 12px;
+  color: var(--text-secondary);
+`;
+
+const AgentType = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+
+const StateRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+`;
+
+const StateDot = styled.span<{ $state: AgentState }>`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: ${({ $state }) => {
+    const colors: Record<AgentState, string> = {
+      idle: '#444',
+      thinking: '#2979FF',
+      tool_calling: '#FF9800',
+      speaking: '#00BFA5',
+      error: '#FF1744',
+    };
+    return colors[$state];
+  }};
+`;
+
+const StateLabel = styled.span<{ $state: AgentState }>`
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: ${({ $state }) => {
+    const colors: Record<AgentState, string> = {
+      idle: 'var(--text-secondary)',
+      thinking: '#2979FF',
+      tool_calling: '#FF9800',
+      speaking: '#00BFA5',
+      error: '#FF1744',
+    };
+    return colors[$state];
+  }};
+`;
+
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+`;
+
+const SectionLabel = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 4px;
+`;
+
+const SectionValue = styled.div`
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.5;
+`;
+
+const CurrentTaskBox = styled.div`
+  font-size: 12px;
+  color: #58A6FF;
+  padding: var(--space-sm) var(--space-md);
+  background: rgba(88, 166, 255, 0.06);
+  border-left: 2px solid #58A6FF;
+  line-height: 1.5;
+`;
+
+const SubagentGrid = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const SubagentRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  font-size: 12px;
+  color: var(--text-primary);
+`;
+
+const SubDot = styled.span<{ $state: AgentState }>`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: ${({ $state }) => {
+    const colors: Record<AgentState, string> = {
+      idle: '#444',
+      thinking: '#2979FF',
+      tool_calling: '#FF9800',
+      speaking: '#00BFA5',
+      error: '#FF1744',
+    };
+    return colors[$state];
+  }};
+`;
+
+const SubName = styled.span`
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-family: var(--font-mono);
+`;
+
+const ActionRow = styled.div`
+  display: flex;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+`;
+
+const ActionBtn = styled.button`
+  border: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: var(--space-xs) var(--space-sm);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  transition: all 0.15s;
+
+  &:hover {
+    border-color: var(--border-hover);
+    color: var(--text-primary);
+  }
+`;
+
+const ActionLink = styled(Link)`
+  border: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: var(--space-xs) var(--space-sm);
+  text-decoration: none;
+  font-family: var(--font-mono);
+  transition: all 0.15s;
+  display: inline-block;
+
+  &:hover {
+    border-color: var(--border-hover);
+    color: var(--text-primary);
+  }
+`;
+
+const FallbackNote = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  opacity: 0.5;
+  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:  '이랑이',
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+function SisterDetail({
+  sister,
+  onOpenChat,
+}: {
+  sister: SisterNode;
+  onOpenChat: (name: SisterName) => void;
+}) {
+  return (
+    <>
+      <AgentHeader>
+        <AgentEmoji>{SISTER_EMOJIS[sister.name]}</AgentEmoji>
+        <AgentMeta>
+          <AgentName>{SISTER_DISPLAY[sister.name]}</AgentName>
+          <AgentRole>{sister.role}</AgentRole>
+          <AgentType>main agent</AgentType>
+        </AgentMeta>
+      </AgentHeader>
+
+      <StateRow>
+        <StateDot $state={sister.state} />
+        <StateLabel $state={sister.state}>{sister.state}</StateLabel>
+      </StateRow>
+
+      {sister.currentTask && (
+        <Section>
+          <SectionLabel>current task</SectionLabel>
+          <CurrentTaskBox>{sister.currentTask}</CurrentTaskBox>
+        </Section>
+      )}
+
+      <Section>
+        <SectionLabel>subagents ({sister.subagents.length})</SectionLabel>
+        <SubagentGrid>
+          {sister.subagents.map((sub) => (
+            <SubagentRow key={sub.id}>
+              <SubDot $state={sub.state} />
+              <span>{sub.label}</span>
+              <SubName>· {sub.state}</SubName>
+            </SubagentRow>
+          ))}
+        </SubagentGrid>
+        <FallbackNote>subagent state: fallback</FallbackNote>
+      </Section>
+
+      <ActionRow>
+        <ActionBtn onClick={() => onOpenChat(sister.name)}>
+          채팅
+        </ActionBtn>
+        <ActionLink href={`/sisters/${sister.name}`}>
+          상세
+        </ActionLink>
+      </ActionRow>
+    </>
+  );
+}
+
+function SubagentDetail({
+  sub,
+  sister,
+  onOpenChat,
+}: {
+  sub: SubAgent;
+  sister: SisterNode;
+  onOpenChat: (name: SisterName) => void;
+}) {
+  return (
+    <>
+      <AgentHeader>
+        <AgentEmoji>🤖</AgentEmoji>
+        <AgentMeta>
+          <AgentName>{sub.label}</AgentName>
+          <AgentRole>{sub.name}</AgentRole>
+          <AgentType>subagent · {SISTER_DISPLAY[sister.name]} 소속</AgentType>
+        </AgentMeta>
+      </AgentHeader>
+
+      <StateRow>
+        <StateDot $state={sub.state} />
+        <StateLabel $state={sub.state}>{sub.state}</StateLabel>
+      </StateRow>
+
+      <Section>
+        <SectionLabel>parent</SectionLabel>
+        <SectionValue>
+          {SISTER_EMOJIS[sister.name]} {SISTER_DISPLAY[sister.name]} · {sister.role}
+        </SectionValue>
+      </Section>
+
+      <FallbackNote>subagent state: fallback · no direct api</FallbackNote>
+
+      <ActionRow>
+        <ActionBtn onClick={() => onOpenChat(sister.name)}>
+          {SISTER_DISPLAY[sister.name]} 채팅
+        </ActionBtn>
+        <ActionLink href={`/sisters/${sister.name}`}>
+          자매 상세
+        </ActionLink>
+      </ActionRow>
+    </>
+  );
+}
+
+export default function ContextPanel({
+  selected,
+  sisters,
+  onOpenChat,
+  onClear,
+}: ContextPanelProps) {
+  const getSister = (name: SisterName) => sisters.find((s) => s.name === name);
+
+  let content: React.ReactNode = (
+    <EmptyState>
+      에이전트를 선택하면<br />
+      상세 정보가 표시됩니다.
+    </EmptyState>
+  );
+
+  if (selected?.type === 'sister') {
+    const sisterData = getSister(selected.name);
+    if (sisterData) {
+      content = (
+        <SisterDetail
+          sister={sisterData}
+          onOpenChat={onOpenChat}
+        />
+      );
+    }
+  } else if (selected?.type === 'subagent') {
+    const sisterData = getSister(selected.sister);
+    const subData = sisterData?.subagents.find((s) => s.id === selected.id);
+    if (sisterData && subData) {
+      content = (
+        <SubagentDetail
+          sub={subData}
+          sister={sisterData}
+          onOpenChat={onOpenChat}
+        />
+      );
+    }
+  }
+
+  return (
+    <Panel>
+      <PanelHeader>
+        <PanelTitle>context panel</PanelTitle>
+        {selected && <ClearBtn onClick={onClear}>✕</ClearBtn>}
+      </PanelHeader>
+      <PanelBody>{content}</PanelBody>
+    </Panel>
+  );
+}

frontend/components/office/OfficeScene.tsx

@@ -0,0 +1,587 @@
+'use client';
+
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export type AgentState = 'idle' | 'thinking' | 'tool_calling' | 'speaking' | 'error';
+export type SisterName = 'harang' | 'narang' | 'darang' | 'erang';
+
+export interface SubAgent {
+  id: string;
+  name: string;
+  label: string;
+  sister: SisterName;
+  state: AgentState;
+}
+
+export interface SisterNode {
+  name: SisterName;
+  displayName: string;
+  role: string;
+  emoji: string;
+  state: AgentState;
+  currentTask: string | null;
+  subagents: SubAgent[];
+}
+
+export type SelectedAgent =
+  | { type: 'sister'; name: SisterName }
+  | { type: 'subagent'; id: string; sister: SisterName };
+
+interface OfficeSceneProps {
+  sisters: SisterNode[];
+  selected: SelectedAgent | null;
+  onSelectSister: (name: SisterName) => void;
+  onSelectSubagent: (id: string, sister: SisterName) => void;
+  dataMode: 'live' | 'snapshot' | 'fallback';
+}
+
+// ─── Styled wrappers ──────────────────────────────────────────────────────────
+
+const SceneWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  aspect-ratio: 800 / 460;
+  max-height: 60vh;
+  border: 1px solid var(--border-color);
+  background: var(--bg-surface);
+  overflow: hidden;
+  user-select: none;
+`;
+
+const FreshnessLabel = styled.div`
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  pointer-events: none;
+`;
+
+const WsDot = styled.span<{ $connected: boolean }>`
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: ${({ $connected }) => ($connected ? '#00FF00' : '#666')};
+  margin-right: 5px;
+  vertical-align: middle;
+`;
+
+// ─── 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,
+  darang: [450, 5,   345, 200] as const,
+  narang: [5,   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],
+  darang: [725, 105],
+  narang: [75,  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]],
+};
+
+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]],
+};
+
+// 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)',
+};
+
+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)',
+};
+
+// State ring colors
+const STATE_COLORS: Record<AgentState, string> = {
+  idle:        '#444444',
+  thinking:    '#2979FF',
+  tool_calling:'#FF9800',
+  speaking:    '#00BFA5',
+  error:       '#FF1744',
+};
+
+const STATE_PROGRESS: Record<AgentState, number> = {
+  idle: 0,
+  error: 0,
+  thinking: 0.48,
+  tool_calling: 0.88,
+  speaking: 0.66,
+};
+
+function lerpPoint(from: Point, to: Point, progress: number): Point {
+  return [
+    from[0] + (to[0] - from[0]) * progress,
+    from[1] + (to[1] - from[1]) * progress,
+  ];
+}
+
+function getSubagentPosition(sister: SisterName, index: number, state: AgentState): Point {
+  const from = SUBAGENT_POSITIONS[sister][index] ?? SUBAGENT_POSITIONS[sister][0];
+  const to = SUBAGENT_TARGETS[sister][index] ?? from;
+  return lerpPoint(from, to, STATE_PROGRESS[state]);
+}
+
+function getSubagentMotion(state: AgentState, index: number): { dx: number; dy: number; dur: string } | null {
+  const phase = index % 2 === 0 ? 1 : -1;
+
+  if (state === 'thinking') {
+    return { dx: 5 * phase, dy: -6, dur: '3.6s' };
+  }
+
+  if (state === 'tool_calling') {
+    return { dx: 10 * phase, dy: -14, dur: '2s' };
+  }
+
+  if (state === 'speaking') {
+    return { dx: 6 * phase, dy: -4, dur: '2.8s' };
+  }
+
+  return null;
+}
+
+// ─── Helper: AgentCircle (rendered as SVG group) ──────────────────────────────
+
+function SisterCircle({
+  cx, cy, r, state, emoji, selected, onClick,
+}: {
+  cx: number; cy: number; r: number;
+  state: AgentState; emoji: string; selected: boolean;
+  onClick: () => void;
+}) {
+  const color = STATE_COLORS[state];
+  return (
+    <g
+      role="button"
+      tabIndex={0}
+      aria-label={`${emoji} sister — 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}
+          fill="none"
+          stroke="var(--text-primary)"
+          strokeWidth={1}
+          strokeDasharray="4 3"
+          opacity={0.6}
+        />
+      )}
+      {/* State ring */}
+      <circle
+        cx={cx} cy={cy} r={r + 4}
+        fill="none"
+        stroke={color}
+        strokeWidth={state === 'error' ? 2.5 : 1.5}
+        opacity={state === 'idle' ? 0.4 : 1}
+      >
+        {state === 'thinking' && (
+          <animate
+            attributeName="opacity"
+            values="0.45;1;0.45"
+            dur="1.8s"
+            repeatCount="indefinite"
+          />
+        )}
+        {state === 'tool_calling' && (
+          <animate
+            attributeName="stroke-opacity"
+            values="1;0.2;1"
+            dur="0.9s"
+            repeatCount="indefinite"
+          />
+        )}
+      </circle>
+      {/* Body */}
+      <circle cx={cx} cy={cy} r={r} fill="#1e1e1e" stroke={color} strokeWidth={1} />
+      {/* Emoji */}
+      <text
+        x={cx} y={cy + 7}
+        textAnchor="middle"
+        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)"
+        fill={color}
+        style={{ textTransform: 'uppercase', letterSpacing: '0.06em', userSelect: 'none', pointerEvents: 'none' }}
+      >
+        {state}
+      </text>
+    </g>
+  );
+}
+
+function SubagentCircle({
+  cx, cy, r, state, label, selected, motion, motionBegin, onClick,
+}: {
+  cx: number; cy: number; r: number;
+  state: AgentState; label: string; selected: boolean;
+  motion: { dx: number; dy: number; dur: string } | null;
+  motionBegin: string;
+  onClick: () => void;
+}) {
+  const color = STATE_COLORS[state];
+  return (
+    <g
+      role="button"
+      tabIndex={0}
+      aria-label={`subagent ${label} — state: ${state}`}
+      onClick={onClick}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } }}
+      style={{ cursor: 'pointer', outline: 'none' }}
+    >
+      {motion && (
+        <animateTransform
+          attributeName="transform"
+          type="translate"
+          values={`0 0; ${motion.dx} ${motion.dy}; 0 0`}
+          dur={motion.dur}
+          begin={motionBegin}
+          repeatCount="indefinite"
+        />
+      )}
+      {selected && (
+        <circle cx={cx} cy={cy} r={r + 5} fill="none" stroke="var(--text-primary)" strokeWidth={1} opacity={0.5} />
+      )}
+      <circle
+        cx={cx} cy={cy} r={r + 2}
+        fill="none" stroke={color} strokeWidth={1}
+        opacity={state === 'idle' ? 0.3 : 0.8}
+      >
+        {state === 'thinking' && (
+          <animate
+            attributeName="opacity"
+            values="0.35;0.95;0.35"
+            dur="2s"
+            repeatCount="indefinite"
+          />
+        )}
+      </circle>
+      <circle cx={cx} cy={cy} r={r} fill="#1a1a1a" stroke={color} strokeWidth={0.8} />
+      <text
+        x={cx} y={cy + 4}
+        textAnchor="middle"
+        fontSize={8}
+        fontFamily="var(--font-mono)"
+        fill={color}
+        opacity={0.9}
+        style={{ userSelect: 'none', pointerEvents: 'none' }}
+      >
+        {label.length > 8 ? label.slice(0, 7) + '…' : label}
+      </text>
+    </g>
+  );
+}
+
+function ConnectorLine({
+  x1, y1, x2, y2, active,
+}: {
+  x1: number; y1: number; x2: number; y2: number; active: boolean;
+}) {
+  return (
+    <line
+      x1={x1} y1={y1} x2={x2} y2={y2}
+      stroke={active ? 'rgba(245,245,245,0.35)' : 'rgba(255,255,255,0.08)'}
+      strokeWidth={active ? 1.5 : 1}
+      strokeDasharray={active ? '6 4' : '3 4'}
+      strokeDashoffset={active ? 40 : 0}
+    >
+      {active && (
+        <animate
+          attributeName="stroke-dashoffset"
+          values="40;0"
+          dur="1.4s"
+          repeatCount="indefinite"
+        />
+      )}
+    </line>
+  );
+}
+
+function PathConnector({
+  d, active,
+}: {
+  d: string; active: boolean;
+}) {
+  return (
+    <path
+      d={d}
+      fill="none"
+      stroke={active ? 'rgba(245,245,245,0.3)' : 'rgba(255,255,255,0.06)'}
+      strokeWidth={active ? 1.5 : 1}
+      strokeDasharray={active ? '6 4' : '3 4'}
+      strokeDashoffset={active ? 40 : 0}
+    >
+      {active && (
+        <animate
+          attributeName="stroke-dashoffset"
+          values="40;0"
+          dur="1.8s"
+          repeatCount="indefinite"
+        />
+      )}
+    </path>
+  );
+}
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+const SISTER_EMOJIS: Record<SisterName, string> = {
+  harang: '🦊',
+  narang: '🦊',
+  darang: '🐱',
+  erang:  '🐺',
+};
+
+const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
+
+export default function OfficeScene({
+  sisters,
+  selected,
+  onSelectSister,
+  onSelectSubagent,
+  dataMode,
+}: OfficeSceneProps) {
+  const getSister = useCallback(
+    (name: SisterName) => sisters.find((s) => s.name === name),
+    [sisters],
+  );
+
+  const isActive = useCallback(
+    (name: SisterName) => {
+      const s = getSister(name);
+      return s?.state === 'thinking' || s?.state === 'tool_calling' || s?.state === 'speaking';
+    },
+    [getSister],
+  );
+
+  const isSisterSelected = (name: SisterName) =>
+    selected?.type === 'sister' && selected.name === name;
+
+  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');
+
+  return (
+    <SceneWrapper>
+      <FreshnessLabel>
+        <WsDot $connected={dataMode === 'live'} />
+        {dataMode === 'live' ? 'live · ws' : dataMode === 'snapshot' ? 'snapshot · poll' : 'fallback · doc-derived'}
+        {' · subagents: fallback'}
+      </FreshnessLabel>
+
+      <svg
+        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
+                x={zx} y={zy} width={zw} height={zh}
+                rx={4}
+                fill={ZONE_COLORS[name]}
+                stroke={ZONE_BORDER[name]}
+                strokeWidth={1}
+              />
+            </g>
+          );
+        })}
+
+        {/* ── 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}
+        />
+        <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 ── */}
+
+        {/* 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,
+          ['darang', 463, 22,  '다랑이 · QA'] as const,
+          ['narang', 18,  272, '나랑이 · Dev'] as const,
+          ['erang',  463, 272, '이랑이 · Infra'] as const,
+        ] as const).map(([name, lx, ly, text]) => (
+          <text
+            key={`label-${name}`}
+            x={lx} y={ly}
+            fontSize={10}
+            fontFamily="var(--font-mono)"
+            fill={ZONE_BORDER[name]}
+            style={{ textTransform: 'uppercase', letterSpacing: '0.08em' }}
+          >
+            {text}
+          </text>
+        ))}
+
+        {/* ── Sister nodes ── */}
+        {SISTER_ORDER.map((name) => {
+          const sisterData = getSister(name);
+          const state: AgentState = sisterData?.state ?? 'idle';
+          const [cx, cy] = SISTER_POS[name];
+          return (
+            <SisterCircle
+              key={`sister-${name}`}
+              cx={cx} cy={cy} r={28}
+              state={state}
+              emoji={SISTER_EMOJIS[name]}
+              selected={isSisterSelected(name)}
+              onClick={() => onSelectSister(name)}
+            />
+          );
+        })}
+
+        {/* ── Subagent nodes ── */}
+        {SISTER_ORDER.map((sisterName) => {
+          const sisterData = getSister(sisterName);
+          const subagents = sisterData?.subagents ?? [];
+          return subagents.map((sub, i) => {
+            const pos = getSubagentPosition(sisterName, i, sub.state);
+            const motion = getSubagentMotion(sub.state, i);
+            return (
+              <SubagentCircle
+                key={sub.id}
+                cx={pos[0]} cy={pos[1]} r={14}
+                state={sub.state}
+                label={sub.name}
+                selected={isSubSelected(sub.id)}
+                motion={motion}
+                motionBegin={`${i * 0.22}s`}
+                onClick={() => onSelectSubagent(sub.id, sisterName)}
+              />
+            );
+          });
+        })}
+
+        {/* ── Subagent → Sister connector lines (thin) ── */}
+        {SISTER_ORDER.map((sisterName) => {
+          const sisterData = getSister(sisterName);
+          const subagents = sisterData?.subagents ?? [];
+          const [sx, sy] = SISTER_POS[sisterName];
+          return subagents.map((sub, i) => {
+            const pos = getSubagentPosition(sisterName, i, sub.state);
+            const active = sub.state !== 'idle' && sub.state !== 'error';
+            return (
+              <line
+                key={`conn-${sub.id}`}
+                x1={sx} y1={sy}
+                x2={pos[0]} y2={pos[1]}
+                stroke={active ? ZONE_BORDER[sisterName] : 'rgba(255,255,255,0.05)'}
+                strokeWidth={active ? 0.8 : 0.5}
+                strokeDasharray="2 3"
+              />
+            );
+          });
+        })}
+      </svg>
+    </SceneWrapper>
+  );
+}

frontend/components/office/PipelinePanel.tsx

@@ -0,0 +1,254 @@
+'use client';
+
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import type { PipelineNode } from '@/components/dashboard/ActivePipeline';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface PipelinePanelProps {
+  activeTask: string;
+  focus: string;
+  reviewLoopCount: number;
+  escalationCount: number;
+  deployState: string;
+  nodes: PipelineNode[];
+  freshness: string;
+}
+
+// ─── Animations ──────────────────────────────────────────────────────────────
+
+const flowAnim = keyframes`
+  0%   { transform: translateX(-100%); opacity: 0; }
+  40%  { opacity: 0.8; }
+  100% { transform: translateX(100%); opacity: 0; }
+`;
+
+// ─── Styled Components ────────────────────────────────────────────────────────
+
+const Panel = styled.section`
+  border: 1px solid var(--border-color);
+  background: var(--bg-surface);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+`;
+
+const PanelHeader = styled.div`
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-lg);
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+const TitleGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const Eyebrow = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+`;
+
+const Title = styled.h3`
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+  margin: 0;
+`;
+
+const Focus = styled.div`
+  font-size: 11px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  max-width: 500px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const Stats = styled.div`
+  display: flex;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+`;
+
+const Stat = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 80px;
+`;
+
+const StatLabel = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+
+const StatValue = styled.div`
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+`;
+
+const NodeRow = styled.div`
+  display: flex;
+  gap: var(--space-sm);
+  align-items: stretch;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-color) transparent;
+`;
+
+const stateColors: Record<PipelineNode['state'], string> = {
+  idle: 'var(--border-color)',
+  active: '#6fc3ff',
+  review: '#ff7ac6',
+  blocked: '#ff8d7a',
+  ready: '#8dffb2',
+};
+
+const NodeCard = styled.div<{ $state: PipelineNode['state'] }>`
+  border: 1px solid ${({ $state }) => stateColors[$state]};
+  padding: var(--space-sm) var(--space-md);
+  min-width: 140px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const NodeName = styled.div`
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+`;
+
+const NodeRole = styled.div`
+  font-size: 10px;
+  color: var(--text-secondary);
+`;
+
+const NodeState = styled.div<{ $state: PipelineNode['state'] }>`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: ${({ $state }) => stateColors[$state]};
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+
+const NodeDetail = styled.div`
+  font-size: 11px;
+  color: var(--text-secondary);
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+`;
+
+const Connector = styled.div<{ $active: boolean }>`
+  width: 24px;
+  flex-shrink: 0;
+  height: 1px;
+  background: ${({ $active }) => $active ? 'rgba(245,245,245,0.4)' : 'var(--border-color)'};
+  position: relative;
+  overflow: hidden;
+  align-self: center;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    background: ${({ $active }) => $active ? 'rgba(245,245,245,0.8)' : 'transparent'};
+    animation: ${({ $active }) => $active ? `${flowAnim} 1.6s linear infinite` : 'none'};
+  }
+`;
+
+const FreshnessNote = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  opacity: 0.6;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export default function PipelinePanel({
+  activeTask,
+  focus,
+  reviewLoopCount,
+  escalationCount,
+  deployState,
+  nodes,
+  freshness,
+}: PipelinePanelProps) {
+  return (
+    <Panel>
+      <PanelHeader>
+        <TitleGroup>
+          <Eyebrow>pipeline panel · snapshot</Eyebrow>
+          <Title>{activeTask}</Title>
+          <Focus>{focus}</Focus>
+        </TitleGroup>
+        <Stats>
+          <Stat>
+            <StatLabel>review loop</StatLabel>
+            <StatValue>{reviewLoopCount}x</StatValue>
+          </Stat>
+          <Stat>
+            <StatLabel>escalations</StatLabel>
+            <StatValue>{escalationCount}</StatValue>
+          </Stat>
+          <Stat>
+            <StatLabel>deploy state</StatLabel>
+            <StatValue>{deployState}</StatValue>
+          </Stat>
+        </Stats>
+      </PanelHeader>
+
+      {nodes.length > 0 ? (
+        <NodeRow>
+          {nodes.map((node, i) => {
+            const active = node.state === 'active' || node.state === 'review' || node.state === 'ready';
+            return (
+              <React.Fragment key={node.id}>
+                <NodeCard $state={node.state}>
+                  <NodeName>{node.label}</NodeName>
+                  <NodeRole>{node.role}</NodeRole>
+                  <NodeState $state={node.state}>{node.state}</NodeState>
+                  <NodeDetail>{node.detail}</NodeDetail>
+                </NodeCard>
+                {i < nodes.length - 1 && <Connector $active={active} />}
+              </React.Fragment>
+            );
+          })}
+        </NodeRow>
+      ) : (
+        <NodeRole style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>
+          파이프라인 데이터 없음
+        </NodeRole>
+      )}
+
+      <FreshnessNote>snapshot · {freshness}</FreshnessNote>
+    </Panel>
+  );
+}

frontend/components/office/ServerHealthPanel.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import React from 'react';
+import styled from 'styled-components';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export interface ServerEntry {
+  id: string;
+  label: string;
+  type: 'sister' | 'dev' | 'docker';
+  status: 'online' | 'offline' | 'working' | 'unknown';
+  detail?: string | null;
+  source: 'live' | 'snapshot' | 'fallback';
+}
+
+interface ServerHealthPanelProps {
+  servers: ServerEntry[];
+  dataMode: 'live' | 'snapshot' | 'fallback';
+  generatedAt: string;
+}
+
+// ─── Styled Components ────────────────────────────────────────────────────────
+
+const Panel = styled.section`
+  border: 1px solid var(--border-color);
+  background: var(--bg-surface);
+  padding: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+`;
+
+const PanelHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  justify-content: space-between;
+`;
+
+const Eyebrow = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+`;
+
+const WsDot = styled.span<{ $connected: boolean }>`
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: ${({ $connected }) => ($connected ? '#00FF00' : '#555')};
+  margin-right: 4px;
+  vertical-align: middle;
+`;
+
+const FreshnessNote = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  opacity: 0.5;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: var(--space-sm);
+
+  @media (max-width: 767px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+`;
+
+const statusColors: Record<ServerEntry['status'], string> = {
+  online:  '#00FF00',
+  offline: '#FF1744',
+  working: '#2979FF',
+  unknown: '#555555',
+};
+
+const ServerCard = styled.div<{ $status: ServerEntry['status'] }>`
+  border: 1px solid var(--border-color);
+  border-left: 2px solid ${({ $status }) => statusColors[$status]};
+  padding: var(--space-sm) var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const CardLabel = styled.div`
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const StatusDot = styled.span<{ $status: ServerEntry['status'] }>`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: ${({ $status }) => statusColors[$status]};
+`;
+
+const CardStatus = styled.div<{ $status: ServerEntry['status'] }>`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: ${({ $status }) => statusColors[$status]};
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+
+const CardDetail = styled.div`
+  font-size: 11px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const SourceBadge = styled.span`
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-secondary);
+  opacity: 0.5;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+function formatGeneratedAt(ts: string): string {
+  try {
+    const date = new Date(ts);
+    const diff = Date.now() - date.getTime();
+    const sec = Math.floor(diff / 1000);
+    if (sec < 60) return `${sec}s ago`;
+    const min = Math.floor(sec / 60);
+    if (min < 60) return `${min}m ago`;
+    return `${Math.floor(min / 60)}h ago`;
+  } catch {
+    return ts;
+  }
+}
+
+export default function ServerHealthPanel({
+  servers,
+  dataMode,
+  generatedAt,
+}: ServerHealthPanelProps) {
+  const onlineCount = servers.filter((s) => s.status === 'online' || s.status === 'working').length;
+
+  return (
+    <Panel>
+      <PanelHeader>
+        <Eyebrow>
+          <WsDot $connected={dataMode === 'live'} />
+          server health · {dataMode}
+          {' · '}{onlineCount}/{servers.length} online
+        </Eyebrow>
+        <FreshnessNote>refreshed {formatGeneratedAt(generatedAt)}</FreshnessNote>
+      </PanelHeader>
+
+      <Grid>
+        {servers.map((server) => (
+          <ServerCard key={server.id} $status={server.status}>
+            <CardLabel>
+              <StatusDot $status={server.status} />
+              {server.label}
+            </CardLabel>
+            <CardStatus $status={server.status}>{server.status}</CardStatus>
+            {server.detail && <CardDetail>{server.detail}</CardDetail>}
+            <SourceBadge>{server.source}</SourceBadge>
+          </ServerCard>
+        ))}
+      </Grid>
+    </Panel>
+  );
+}

frontend/lib/AuthContext.tsx

@@ -3,6 +3,7 @@
 import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { API_URL } from './config';
+import { withSessionRequest } from './csrf';
 
 interface AuthUser {
   userId: number;
@@ -31,38 +32,20 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [loading, setLoading] = useState(true);
 
   const loadUser = useCallback(async () => {
-    const token = localStorage.getItem('hanarang_access_token');
-    if (!token) { setLoading(false); return; }
-
     try {
-      const res = await fetch(`${API_URL}/api/auth/me`, {
+      const res = await fetch(`${API_URL}/api/auth/me`, withSessionRequest());
-        headers: { Authorization: `Bearer ${token}` },
-      });
       if (res.ok) {
         const data = await res.json();
         setUser({ userId: data.id, username: data.username, role: data.role });
       } else if (res.status === 401) {
-        // access token 만료 → refresh 시도
+        // access token expired → try refresh via cookie
-        const refreshToken = localStorage.getItem('hanarang_refresh_token');
+        try {
-        if (refreshToken) {
+          const rRes = await fetch(`${API_URL}/api/auth/refresh`, withSessionRequest({ method: 'POST' }, { csrf: true }));
-          try {
+          if (rRes.ok) {
-            const rRes = await fetch(`${API_URL}/api/auth/refresh`, {
+            const d = await rRes.json();
-              method: 'POST',
+            setUser({ userId: 0, username: d.username, role: d.role });
-              headers: { 'x-refresh-token': refreshToken },
+          }
-            });
+        } catch { /* silent */ }
-            if (rRes.ok) {
-              const d = await rRes.json();
-              localStorage.setItem('hanarang_access_token', d.accessToken);
-              if (d.refreshToken) localStorage.setItem('hanarang_refresh_token', d.refreshToken);
-              setUser({ userId: 0, username: d.username, role: d.role });
-            } else {
-              localStorage.removeItem('hanarang_access_token');
-              localStorage.removeItem('hanarang_refresh_token');
-            }
-          } catch { /* silent */ }
-        } else {
-          localStorage.removeItem('hanarang_access_token');
-        }
       }
     } catch {
       // silent
@@ -74,11 +57,11 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => { loadUser(); }, [loadUser]);
 
   const login = async (username: string, password: string) => {
-    const res = await fetch(`${API_URL}/api/auth/login`, {
+    const res = await fetch(`${API_URL}/api/auth/login`, withSessionRequest({
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ username, password }),
-    });
+    }, { csrf: true }));
 
     if (!res.ok) {
       const d = await res.json();
@@ -86,27 +69,23 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     }
 
     const d = await res.json();
-    localStorage.setItem('hanarang_access_token', d.accessToken);
+    // Tokens are set as HttpOnly cookies by the server
-    if (d.refreshToken) {
+    setUser({ userId: 0, username: d.username, role: d.role });
-      localStorage.setItem('hanarang_refresh_token', d.refreshToken);
+
-    }
+    // Fetch actual userId from /me
-    // me API로 실제 userId 가져오기
     try {
-      const meRes = await fetch(`${API_URL}/api/auth/me`, {
+      const meRes = await fetch(`${API_URL}/api/auth/me`, withSessionRequest());
-        headers: { Authorization: `Bearer ${d.accessToken}` },
-      });
       if (meRes.ok) {
         const me = await meRes.json();
         setUser({ userId: me.id, username: me.username, role: me.role });
-        return;
       }
-    } catch { /* fallback */ }
+    } catch { /* fallback — already set basic info */ }
-    setUser({ userId: 0, username: d.username, role: d.role });
   };
 
-  const logout = () => {
+  const logout = async () => {
-    localStorage.removeItem('hanarang_access_token');
+    try {
-    localStorage.removeItem('hanarang_refresh_token');
+      await fetch(`${API_URL}/api/auth/logout`, withSessionRequest({ method: 'POST' }, { csrf: true }));
+    } catch { /* silent */ }
     setUser(null);
   };
 

frontend/lib/csrf.ts

@@ -0,0 +1,46 @@
+export const CSRF_COOKIE_NAME = 'hanarang_csrf_token';
+
+export function getCookieValue(name: string): string {
+  if (typeof document === 'undefined') return '';
+
+  const match = document.cookie
+    .split('; ')
+    .find((item) => item.startsWith(`${encodeURIComponent(name)}=`));
+
+  if (!match) return '';
+
+  return decodeURIComponent(match.split('=').slice(1).join('='));
+}
+
+export function getCsrfToken(): string {
+  return getCookieValue(CSRF_COOKIE_NAME);
+}
+
+export function needsCsrf(method?: string): boolean {
+  const normalized = (method ?? 'GET').toUpperCase();
+  return !['GET', 'HEAD', 'OPTIONS'].includes(normalized);
+}
+
+export function withCsrfHeaders(headers?: HeadersInit): Headers {
+  const nextHeaders = new Headers(headers);
+  const csrfToken = getCsrfToken();
+
+  if (csrfToken) {
+    nextHeaders.set('x-csrf-token', csrfToken);
+  }
+
+  return nextHeaders;
+}
+
+export function withSessionRequest(
+  init: RequestInit = {},
+  options: { csrf?: boolean } = {},
+): RequestInit {
+  const useCsrf = options.csrf ?? needsCsrf(init.method);
+
+  return {
+    ...init,
+    credentials: 'include',
+    headers: useCsrf ? withCsrfHeaders(init.headers) : new Headers(init.headers),
+  };
+}

qa/test-plan.md

@@ -0,0 +1,8 @@
+# QA Test Plan
+
+실제 기준 문서는 `.plans/qa/test-plan.md`야.
+
+이 파일은 QA 도구/사람이 루트 `qa/test-plan.md`를 찾을 때 바로 보이게 둔 미러 엔트리야.
+
+- canonical: `../.plans/qa/test-plan.md`
+- purpose: QA lookup compatibility