fix: align dashboard qa fallback and visibility filter

.plans/OVERVIEW.md

@@ -4,19 +4,6 @@
 - 4자매 운영 상태를 실시간으로 보여준다
 - 프로젝트/Sprint/Hotfix/QA/Deploy 흐름을 시각화한다
 - `main`이 항상 배포 가능 상태라는 원칙을 UI와 운영에 함께 반영한다
-- 오피스 화면과 운영 패널이 분리되지 않고 하나의 관제 경험으로 이어지게 만든다
-
-## 저장소 / Git 기준
-- Repo: `hanarang-dashboard`
-- Git URL: `https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard`
-- 기본 브랜치: `main`
-- 현재 오피스 구현 기준 경로:
-  - `frontend/app/office/page.tsx`
-  - `frontend/components/office/OfficeScene.tsx`
-  - `frontend/components/office/ContextPanel.tsx`
-  - `frontend/components/office/ChatWorkspace.tsx`
-  - `frontend/components/office/PipelinePanel.tsx`
-  - `frontend/components/office/ServerHealthPanel.tsx`
 
 ## 현재 표준 구조
 - 루트: `README.md`, `ARCHITECTURE.md`
@@ -28,37 +15,28 @@
   - `deploy/`
 - 장기 문서: `docs/`
 
-## 현재 상태
+## 활성 작업
-- **SPRINT-016**: `/office` 화면과 핵심 컴포넌트가 `main`에 반영됨
+- **SPRINT-015**: Master Dashboard v3 정보 구조 리디자인
-- **다음 활성 작업**: **SPRINT-017** 오피스 대시보드 운영 안정화와 모바일 완성
+- **HOTFIX-007**: 프로젝트/자매 상세/메인 운영면 보정
 
-## SPRINT-017 핵심 요구사항
+## 이번 Sprint 핵심 요구사항
-1. `/office` 화면을 Desktop, Tablet, Mobile에서 같은 운영 의미로 읽히게 만든다
+1. 메인 대시보드를 4자매 운영 관제의 대표 화면으로 재정의
-2. `live / snapshot / fallback` 상태 구분을 UI와 API 문서에서 같은 규칙으로 고정한다
+2. 현행 미니멀 터미널 UI를 유지한 채 레퍼런스의 강한 정보 구조를 흡수
-3. direct chat, pipeline, server health 패널의 실패/빈 상태/권한 상태를 문서화하고 정리한다
+3. 상단 global status bar / 4자매 상태 카드 / `ACTIVE PIPELINE` 중심 구조 도입
-4. WebSocket + polling reconciliation 규칙을 운영 기준으로 확정한다
+4. `ACTIVITY FEED`, `SPRINT METRICS`, `INFRASTRUCTURE OVERVIEW`, `MISTAKE LOG & HARNESS`를 운영 문맥으로 재배치
-5. QA와 deploy preflight가 재현 가능한 체크리스트로 이어지게 만든다
+5. 데스크톱 우선 설계 후 모바일 세로 흐름까지 함께 정리
 
 ## 이행 전략
-- 코드에서는 이미 반영된 `/office` 구현을 기준으로 안정화 Sprint를 잡는다
+- 코드에서는 구 구조와 신 구조를 일정 기간 동시 지원
-- 문서는 실제 `main` 구현 경로를 기준으로만 갱신한다
+- 문서는 신 구조를 기준으로 선반영
 - 신규 QA 문서는 `.plans/qa/` 기준
 - 신규 Hotfix 문서는 `.plans/hotfix/` 기준
-- SPRINT-017 문서는 SPRINT-016의 비전 문서를 덮어쓰지 않고, 운영 안정화 기준을 덧붙이는 방식으로 간다
 
 ## 문서 맵
 - 구조 기준: `../ARCHITECTURE.md`
-- 제품 PRD: `../docs/product-specs/openclaw-office-dashboard-prd.md`
 - 디자인 인덱스: `./design/index.md`
-- Sprint 016 비전: `./sprints/SPRINT-016.md`
+- Sprint 계획: `./sprints/SPRINT-015.md`
-- Sprint 017 실행 계획: `./sprints/SPRINT-017.md`
+- Sprint handoff: `./sprints/SPRINT-015-NARANG-HANDOFF.md`
-- API / 실시간 모델: `./design/api-design.md`
+- Hotfix 계획: `./hotfix/HOTFIX-007.md`
-- 오피스 씬 UI 기준: `./design/ui/office-dashboard-design.md`
+- Hotfix handoff: `./hotfix/HOTFIX-007-NARANG-HANDOFF.md`
-- 오피스 채팅 UI 기준: `./design/ui/office-chat-design.md`
 - 배포 플로우: `./deploy/main-release-flow.md`
-
-## 교차 참조 규칙
-- Sprint 문서는 반드시 관련 design 문서를 링크한다
-- design 문서는 실제 Git 구현 경로를 함께 적는다
-- QA / deploy 문서는 대상 Sprint 문서와 구현 commit을 함께 남긴다
-- 여기까지가 SPRINT-017 기준 scope야.

.plans/deploy/deploy-plan.md

@@ -20,13 +20,10 @@
 
 ## PM2 설정
 ```
-backend:  pm2 start backend/dist/src/main.js --name hanarang-api --cwd /path/to/hanarang-dashboard --env production
+backend:  pm2 start dist/main.js --name hanarang-api --env production
-frontend: pm2 start npm --name hanarang-web --cwd /path/to/hanarang-dashboard/frontend -- start -- -p 3004
+frontend: pm2 start npm --name hanarang-web -- start -- -p 3004
 ```
 
-- backend 엔트리포인트는 실제 Nest 빌드 산출물 기준 `backend/dist/src/main.js`를 사용해.
-- repo 루트에서 실행하면 `--cwd`를 명시해서 PM2가 올바른 작업 디렉터리를 잡도록 해.
-
 ## SSH 키 배포
 - Dev 서버(10.10.10.169)에서 4자매 서버로 SSH 접속할 수 있도록 키 배포 필요
 - 이랑이가 SSH 키 생성 + 각 자매 서버에 authorized_keys 추가

.plans/design/api-design.md

@@ -3,137 +3,36 @@
 ## 공통 규칙
 - Base URL: `https://hanarang-api.nabomhalang.co.kr`
 - 응답 형식: JSON
-- WS Namespace: `/ws`
+- 인증: MVP에서는 인증 없음 (내부망 전용). 추후 JWT 추가 가능.
-- 기본 에러 형식: `{ "statusCode": 400, "message": "...", "error": "Bad Request" }`
+- 에러 형식: `{ "statusCode": 400, "message": "...", "error": "Bad Request" }`
-- SPRINT-017 기준으로 오피스 화면은 `REST snapshot + WebSocket push` 혼합 모델을 사용한다.
 
-## 인증 규칙
+## Sisters (자매 상태)
-- 읽기 전용 상태 조회 API는 현재 공개 조회가 가능한 엔드포인트가 섞여 있어.
-- direct chat (`POST /api/sisters/:name/chat`) 은 JWT 필수야.
-- WebSocket 연결도 JWT 필수야. 토큰이 없거나 잘못되면 서버가 연결을 끊어.
-- 그래서 `/office`는 **읽기와 쓰기의 권한 상태를 분리해서** 다뤄야 해.
 
-## 오피스 대시보드 핵심 소스
+| Method | Endpoint | 설명 |
-- Git 구현 기준:
+|--------|----------|------|
-  - `frontend/app/office/page.tsx`
+| GET | `/api/sisters` | 4자매 상태 목록 (SSH로 실시간 조회) |
-  - `backend/src/sisters/sisters.controller.ts`
+| GET | `/api/sisters/:name` | 자매 상세 (설정 + 상태) |
-  - `backend/src/events/events.gateway.ts`
+| GET | `/api/sisters/:name/config` | openclaw.json 내용 |
-  - `backend/src/events/events.scheduler.ts`
+| GET | `/api/sisters/:name/sessions` | 최근 세션 목록 |
-- 관련 Sprint: `../sprints/SPRINT-017.md`
+| GET | `/api/sisters/:name/subagents` | 서브에이전트 사용 현황 |
-- 관련 UI 문서:
+| POST | `/api/sisters/:name/restart` | Gateway 재시작 (관리자) |
-  - `./ui/office-dashboard-design.md`
+| POST | `/api/sisters/:name/reset` | 세션 리셋 (관리자) |
-  - `./ui/office-chat-design.md`
 
-## 상태 모델
+### GET `/api/sisters`
-### Data Mode
-| mode | 의미 | UI 원칙 |
-|---|---|---|
-| `live` | WebSocket 또는 최신 runtime 기준으로 실시간성이 유지되는 상태 | 가장 신뢰도 높은 상태로 표시 |
-| `snapshot` | REST polling 기준 최신 스냅샷 | live보다 약한 상태로 표시 |
-| `fallback` | runtime 또는 status 조회 실패 시 보여주는 보정 데이터 | 추정치임을 숨기지 않음 |
-
-### Agent State
-| state | 의미 |
-|---|---|
-| `idle` | 대기 중 |
-| `thinking` | 작업 준비 / 추론 중 |
-| `tool_calling` | 외부 작업/도구 호출 중 |
-| `speaking` | 응답 생성 또는 대화 중 |
-| `error` | 연결 또는 런타임 이상 |
-
-## Sisters (오피스 화면 기준)
-
-| Method | Endpoint | 인증 | 설명 |
-|--------|----------|------|------|
-| GET | `/api/sisters` | 없음 | 4자매 상태 목록 |
-| GET | `/api/sisters/runtime` | 없음 | 4자매 runtime 스냅샷 |
-| GET | `/api/sisters/:name/runtime` | 없음 | 개별 자매 runtime |
-| GET | `/api/sisters/:name/system` | 없음 | 개별 자매 시스템 정보 |
-| GET | `/api/sisters/:name/avatar` | 없음 | 자매 아바타 이미지 |
-| GET | `/api/sisters/:name/config` | 없음 | openclaw 설정 조회 |
-| GET | `/api/sisters/:name/sessions` | 없음 | 최근 세션 목록 |
-| GET | `/api/sisters/:name/subagents` | 없음 | 서브에이전트 목록/현황 |
-| GET | `/api/sisters/:name/activity` | 없음 | 최근 활동 로그 |
-| POST | `/api/sisters/:name/chat` | JWT 필요 | direct chat 전송 |
-
-### GET `/api/sisters/runtime`
-오피스 메인 화면의 상단 상태와 최근 메시지, 서브에이전트 상태를 구성하는 runtime source야.
-
-예시 필드:
 ```json
+// Response 200
 [
   {
     "name": "harang",
-    "gatewayConnected": true,
+    "displayName": "하랑이",
-    "mainState": "thinking",
+    "ip": "10.10.10.112",
-    "currentTask": "SPRINT-017 scope 잠금",
+    "status": "online",
-    "activeSessionLabel": "main",
+    "lastSeen": "2026-04-04T01:45:00Z",
-    "activeSessionUpdatedAt": 1775640000000,
+    "role": "Orchestrator"
-    "controlSessionKey": "agent:harang:main",
-    "recentMessages": [
-      {
-        "id": "msg_1",
-        "role": "assistant",
-        "content": "scope 정리 중",
-        "ts": "2026-04-08T09:20:00Z"
-      }
-    ],
-    "subagents": [
-      {
-        "name": "prd-writer",
-        "state": "tool_calling",
-        "updatedAt": 1775640000000,
-        "currentTask": "SPRINT-017 작성",
-        "sessionLabel": "main"
-      }
-    ]
   }
 ]
 ```
 
-### POST `/api/sisters/:name/chat`
-```json
-// Request
-{ "message": "SPRINT-017 scope 확인해" }
-```
-
-```json
-// Response 200 example
-{
-  "ok": true,
-  "queued": true,
-  "sessionKey": "agent:harang:main"
-}
-```
-
-### Chat 실패 처리 원칙
-- JWT 없음 → 입력창 비활성화 또는 전송 실패 이유 명시
-- timeout → 전송은 재시도 가능 상태로 남김
-- 최근 메시지 없음 → empty state 문구 사용
-- tool 메시지와 assistant 메시지는 같은 bubble로 합치지 않음
-
-## WebSocket
-
-### 연결
-- Namespace: `/ws`
-- 인증 방식:
-  - `handshake.auth.token`
-  - 또는 `Authorization: Bearer <token>`
-- 토큰 없음/검증 실패 시 disconnect
-
-### 서버 이벤트
-| Event | Payload | 설명 |
-|---|---|---|
-| `pong` | `{ ts }` | ping 응답 |
-| `sisters:update` | `{ sisters, ts }` | 4자매 상태 push |
-| `activity:new` | `{ item, ts }` | 새 활동 로그 push |
-
-### 운영 규칙
-- WS는 가장 강한 source야.
-- WS가 끊겨도 마지막 성공 시각을 보존해 stale 여부를 판단해야 해.
-- scheduler polling 값이 더 오래된 경우 live 값을 덮어쓰면 안 돼.
-- SPRINT-017에서는 reconnect / stale / snapshot downgrade 규칙을 문서와 QA 기준으로 잠근다.
-
 ## Projects (프로젝트)
 
 | Method | Endpoint | 설명 |
@@ -170,9 +69,3 @@
 | Method | Endpoint | 설명 |
 |--------|----------|------|
 | GET | `/health` | 서버 상태 확인 |
-
-## SPRINT-017 문서 기준 정리
-- 오피스 화면은 읽기 API와 쓰기 API 권한을 분리해서 다룬다
-- `live / snapshot / fallback`은 API 문서, UI 문서, QA 문서에서 같은 의미로 쓴다
-- direct chat, WS disconnect, stale 상태는 정상 흐름만큼 중요하게 검증한다
-- 여기까지가 API 기준 scope야.

.plans/design/architecture.md

@@ -44,5 +44,5 @@ Backend가 SSH로 각 자매 서버에서 수집:
 ## 배포
 - **Dev 서버:** 10.10.10.169
 - **프로세스 관리:** PM2
-- **FE:** `pm2 start npm --name hanarang-web --cwd /path/to/hanarang-dashboard/frontend -- start -- -p 3004`
+- **FE:** pm2 start npm --name hanarang-web -- start (포트 3004)
-- **BE:** `pm2 start backend/dist/src/main.js --name hanarang-api --cwd /path/to/hanarang-dashboard` (포트 3005)
+- **BE:** pm2 start dist/main.js --name hanarang-api (포트 3005)

.plans/design/index.md

@@ -8,8 +8,6 @@
 
 ## 페이지별 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`
@@ -21,20 +19,8 @@
 ## 레퍼런스
 - `references/07-master-dashboard-v3-reference.md`
 
-## 현재 우선 문서
+## Sprint 015에서 반드시 반영할 화면
-- Sprint 실행 기준: `../sprints/SPRINT-017.md`
+- 대시보드 메인: Master Dashboard v3 구조 반영
-- 제품 비전: `../../docs/product-specs/openclaw-office-dashboard-prd.md`
+- 핵심 섹션: Global Status Bar / 4자매 상태 카드 / `ACTIVE PIPELINE`
-- 실행 개요: `../OVERVIEW.md`
+- 운영 패널: `ACTIVITY FEED`, `SPRINT METRICS`, `INFRASTRUCTURE OVERVIEW`, `MISTAKE LOG & HARNESS`
-
+- 모바일: 데스크톱 구조를 억지로 축소하지 말고 세로 읽기 흐름으로 재배열
-## SPRINT-017에서 반드시 잠글 것
-- 오피스 메인: Desktop / Tablet / Mobile 정보 우선순위
-- 오피스 채팅: JWT 필요, 전송 실패, empty state 처리
-- 운영 패널: active workflow / sprint / review loop / deploy gate / server health 상태 톤 통일
-- 실시간 모델: `live / snapshot / fallback` 판정 규칙
-- WS + polling reconciliation: stale / reconnect / downgrade 기준
-
-## Git 기준 확인 경로
-- `/office` entry: `frontend/app/office/page.tsx`
-- scene: `frontend/components/office/OfficeScene.tsx`
-- chat: `frontend/components/office/ChatWorkspace.tsx`
-- ws gateway: `backend/src/events/events.gateway.ts`

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

@@ -1,30 +0,0 @@
-# 오피스 채팅 워크스페이스 — 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

@@ -1,63 +0,0 @@
-# 오피스 대시보드 메인 (`/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-007-NARANG-HANDOFF.md

@@ -0,0 +1,35 @@
+# HOTFIX-007 Narang Handoff
+
+## repo / branch
+- repo: `https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard`
+- branch: `feature/hotfix-007-projects-sisters-surface-fixes`
+
+## 읽을 문서
+1. `.plans/hotfix/HOTFIX-007.md`
+2. `.plans/design/ui/projects-page-design.md`
+3. `.plans/design/ui/project-detail-design.md`
+4. 필요하면 `.plans/sprints/SPRINT-014.md`
+
+## 이번 수정 핵심
+자기야가 바로 짚은 실제 사용감 문제를 고쳐.
+
+- `/projects`에 `전체 | public | private` 필터 추가
+- 프로젝트 상세 진행 상황 박스 배치 보정
+- `ASSIGNED NODES`를 4자매 기준으로 복구
+- `.plans/qa`, `.plans/hotfix`, 구 구조 fallback 다시 점검
+- 메인 우측 나랑이 단독 박스 제거 또는 실제 operator 기준으로 교체
+- `/sisters/[name]` 개요 / 세션 / 활동 / 로그 복구
+
+## 절대 기준
+- 보여주기용 고정값 넣지 마
+- 문서 구조가 바뀌었으면 새 구조 우선 + 구 구조 fallback 유지
+- 자매 상세에서 데이터 없음과 조회 실패를 섞지 마
+- `ASSIGNED NODES`가 다시 나랑이 하나처럼 보이면 실패야
+- 메인 우측 박스는 더 이상 단일 프로필 카드처럼 보이면 안 돼
+
+## QA 전 필수
+- `frontend npm run build`
+- `backend npm run lint`
+- `backend npm test -- --runInBand`
+- `backend npm run build`
+- 실브라우저 기준 `/`, `/projects`, `/projects/[id]`, `/sisters/[name]` 확인 포인트 정리

.plans/hotfix/HOTFIX-007.md

@@ -0,0 +1,137 @@
+# HOTFIX-007: 프로젝트/자매 상세/메인 운영면 보정
+
+## 목표
+자기야가 바로 짚은 실제 사용감 문제를 한 번에 정리한다.
+
+- 프로젝트 목록에 `전체 | public | private` 필터 추가
+- 프로젝트 상세 진행 상황 박스 배치 보정
+- `ASSIGNED NODES` / 에이전트 노드 구성이 `나랑이만 있는 것처럼` 보이는 문제 수정
+- 바뀐 파일 구조 기준으로 QA / Hotfix 문서 탐색 경로 재점검
+- 메인 대시보드 우측 오퍼레이터 박스 정리 (`나랑이 사진만 보이는 박스` 제거 또는 실제 operator 기준 반영)
+- 자매 상세의 `개요 / 세션 / 활동 / 로그`가 비거나 조회되지 않는 문제 복구
+
+## 왜 이걸 고치나
+지금 상태는 일부 화면이 기능은 있지만 운영 판단에는 어색하거나, 아예 실데이터가 안 뜨는 구간이 있어.
+
+특히 이건 실제 사용성 문제야.
+1. `/projects`에서 프로젝트 구분 필터가 부족함
+2. `/projects/[id]` 진행 현황 박스 배치가 어색함
+3. `ASSIGNED NODES`가 실제 4자매 구조를 못 보여줌
+4. `.plans/qa`, `.plans/hotfix` 구조 변경 이후 문서 탐색 누락 가능성이 남아 있음
+5. 메인 우측 operator 영역이 지금은 나랑이 사진만 보이는 식으로 오해를 줌
+6. `/sisters/[name]`의 overview / sessions / activity / logs가 비면 대시보드 핵심 기능이 무너짐
+
+## 범위
+- 프로젝트 목록 페이지
+- 프로젝트 상세 페이지
+- 메인 대시보드 우측 operator 영역
+- backend project detail / dashboard / sisters / logs / sessions 관련 서비스
+- 문서 탐색 fallback (`.plans/qa`, `.plans/hotfix`, 구 구조 fallback) 재검증
+
+## 태스크
+
+### TASK-084: 프로젝트 목록 visibility 필터 추가
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `frontend/app/projects/page.tsx`
+  - 필요 시 `backend/src/projects/projects.service.ts`
+- **설명:** `/projects` 상단에 `전체 | public | private` 필터를 추가한다.
+- **구현 메모:**
+  - 현재 데이터 모델에 public/private 구분 필드가 있으면 그걸 그대로 사용
+  - 없으면 우선 source-of-truth 확인 후 안전한 derived rule을 쓰되, 임시 추론이면 문서에 남길 것
+- **완료 기준:**
+  - 사용자가 프로젝트 목록을 visibility 기준으로 바로 걸러 볼 수 있음
+  - 필터 상태가 UI에서 분명히 보임
+
+### TASK-085: 프로젝트 상세 진행 현황 박스 레이아웃 보정
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `frontend/app/projects/[id]/page.tsx`
+  - 관련 공통 컴포넌트
+- **설명:** 진행 상황 / QA / Deploy / Sprint / Hotfix 박스 배치가 더 자연스럽게 읽히도록 재배치한다.
+- **완료 기준:**
+  - 정보 블록 간 위계가 자연스러움
+  - 데스크톱/모바일에서 박스가 어색하게 끊기거나 밀리지 않음
+  - `DELIVERY FLOW → QA STATUS → DEPLOY STATUS → SPRINT/HOTFIX` 읽기 흐름이 더 선명함
+
+### TASK-086: `ASSIGNED NODES` 4자매 기준 복구
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `backend/src/projects/projects.service.ts`
+  - `frontend/app/projects/[id]/page.tsx`
+  - 필요 시 관련 타입/DTO
+- **설명:** 프로젝트 상세의 노드/에이전트 구성이 나랑이만 있는 것처럼 보이지 않게 실제 4자매 역할 기준으로 복구한다.
+- **구현 메모:**
+  - 최소한 하랑/나랑/다랑/이랑 역할이 모두 보이게 할 것
+  - 실할당 데이터가 있으면 우선 사용, 없으면 역할 기반 기본 노드라도 4개가 보여야 함
+- **완료 기준:**
+  - `ASSIGNED NODES`가 4자매 구조를 제대로 보여줌
+  - 단일 나랑 노드처럼 오해되지 않음
+
+### TASK-087: QA / Hotfix 문서 탐색 경로 재점검
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `backend/src/projects/projects.service.ts`
+  - `backend/src/projects/sprint-sync.service.ts`
+  - 관련 문서 탐색 유틸
+- **설명:** 파일 구조가 조금 바뀐 현재 기준으로 `.plans/qa`, `.plans/hotfix`, 구 구조 fallback이 실제로 다 읽히는지 다시 확인하고 보정한다.
+- **완료 기준:**
+  - 새 구조 문서가 우선 반영됨
+  - 구 구조 fallback도 깨지지 않음
+  - QA / Hotfix history가 누락 없이 노출됨
+
+### TASK-088: 메인 우측 operator 영역 정리
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `frontend/app/page.tsx`
+- **설명:** 메인 우측 상자에서 나랑이 사진만 떠 있는 어색한 구성을 제거한다.
+- **선택지:**
+  1. 박스 자체 제거
+  2. 실제 current operator/focus owner 기준으로 표시
+  3. 단일 프로필 대신 운영 메타 카드로 교체
+- **완료 기준:**
+  - 우측 상자가 더 이상 특정 자매 단독 프로필처럼 오해되지 않음
+  - 메인 화면 정보 위계가 더 깔끔함
+
+### TASK-089: 자매 상세 `개요 / 세션 / 활동 / 로그` 데이터 복구
+- **담당:** 나랑이
+- **상태:** pending
+- **주요 파일:**
+  - `frontend/app/sisters/[name]/page.tsx`
+  - `backend/src/sisters/sister-detail.service.ts`
+  - `backend/src/sisters/sisters.service.ts`
+  - `backend/src/admin/admin.service.ts`
+  - 관련 controller / DTO / 경로 탐색 유틸
+- **설명:** 자매 상세 페이지에서 개요/세션/활동이 비고 로그 조회가 안 되는 문제를 실제 데이터 기준으로 복구한다.
+- **구현 메모:**
+  - Hermes 우선 + `.openclaw` fallback 경로 다시 확인
+  - sessions / logs 경로 변경 이후 깨진 지점 점검
+  - empty state와 진짜 조회 실패를 구분
+- **완료 기준:**
+  - `/sisters/[name]`에서 overview / sessions / activity / logs가 실제 데이터로 노출됨
+  - 데이터가 없을 때와 조회 실패일 때 UI가 다르게 보임
+
+### TASK-090: 실브라우저 기준 확인 포인트 정리
+- **담당:** 나랑이 → 다랑이
+- **상태:** pending
+- **설명:** 이번 hotfix는 화면/구조/실데이터가 섞여 있으니 실브라우저 확인 포인트를 함께 남긴다.
+- **완료 기준:**
+  - `/projects`
+  - `/projects/[id]`
+  - `/sisters/[name]`
+  - 메인 `/`
+  이 네 화면의 확인 포인트가 QA에 전달됨
+
+## QA 핵심 체크
+- `/projects`에서 `전체 | public | private` 필터 동작
+- 프로젝트 상세 박스 배치 개선 확인
+- `ASSIGNED NODES`가 4자매 구조로 보임
+- QA / Hotfix 문서 구조 변경 이후도 history 누락 없음
+- 메인 우측 상자 어색함 해소
+- `/sisters/[name]` overview / sessions / activity / logs 복구
+- 외부 URL + 모바일 포함 확인 필수

.plans/qa/SPRINT-016-release-preflight.md

@@ -1,93 +0,0 @@
-# SPRINT-016 Release Preflight
-
-- 검증 대상 repo: `https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard`
-- 검증 대상 branch: `main`
-- 검증 대상 commit: `a9e1e677b0f129cc2f45e4f2624020d9d4626159` (`feat: merge SPRINT-016 isometric office dashboard`)
-- 기준 문서:
-  - `.plans/sprints/SPRINT-016.md`
-  - `.plans/design/ui/office-dashboard-design.md`
-  - `.plans/design/ui/office-chat-design.md`
-  - `docs/product-specs/openclaw-office-dashboard-prd.md`
-  - `.plans/deploy/deploy-plan.md`
-- 검증자: 하랑
-- 검증일시: `2026-04-07 13:55 KST`
-- 결과: `✅ PASSED`
-- 재검증 필요 여부: `아니야. 다만 배포 직전 운영 env / WS 프록시 확인은 필요해.`
-
-## 1. 이번 문서 보강 이유
-이번 `/office` 변경분은 코드 자체 preflight는 통과했는데, 배포 직전 확인 과정에서 아래 두 가지가 배포 게이트로 걸렸어.
-
-1. PM2 backend 실행 경로 문서가 실제 산출물과 달랐어.
-2. `/office` 변경에 대한 배포 전 검증 근거 문서가 `.plans/qa/`에 없었어.
-
-그래서 이번 문서는 **다랑이의 별도 브라우저 QA 보고서 대체가 아니라**, 현재 `main` 기준 배포 판단에 필요한 **release preflight 근거**를 남기는 용도야.
-
-## 2. 실행 결과
-- [x] `frontend npm run lint` — 성공 (`0 errors`, `20 warnings`, 전부 기존 unused-var 경고)
-- [x] `frontend npm run build` — 성공
-- [x] `backend npm run build` — 성공
-- [x] `backend npm test -- --runInBand` — 성공 (`9 suites`, `26 tests` passed)
-- [x] `backend/dist/src/main.js` 실제 산출물 존재 확인
-- [x] Next build 결과에 `/office` route 포함 확인
-
-## 3. 확인한 핵심 근거
-### 배포 문서/산출물 정합성
-- 기존 문서의 backend PM2 경로 `dist/main.js`는 실제 빌드 결과와 달랐어.
-- 실제 Nest 진입 파일은 `backend/dist/src/main.js`였고, 배포 문서와 아키텍처 문서를 이 기준으로 수정했어.
-
-### `/office` 변경분 상태
-- 오피스 대시보드 관련 파일이 `main`에 반영돼 있어.
-  - `frontend/app/office/page.tsx`
-  - `frontend/components/office/OfficeScene.tsx`
-  - `frontend/components/office/ContextPanel.tsx`
-  - `frontend/components/office/ChatWorkspace.tsx`
-  - `frontend/components/office/PipelinePanel.tsx`
-  - `frontend/components/office/ServerHealthPanel.tsx`
-- Next production build 산출물에서 `/office`가 정적 라우트로 생성되는 것까지 확인했어.
-
-### 코드 preflight
-- frontend는 lint/build 모두 통과했어.
-- backend는 build/test 모두 통과했어.
-- 현재 `main` 헤드는 `a9e1e67`로 고정 확인했어.
-
-## 4. 배포 전 운영 체크
-이건 코드 blocker는 아니고, 이랑이가 배포 직전에 확인하면 돼.
-
-- Dev 서버 env
-  - `DATABASE_URL`
-  - `JWT_SECRET`
-  - `SSH_KEY_PATH`
-  - `GITEA_BASE_URL`
-  - `GITEA_TOKEN`
-  - `CORS_ORIGINS`
-- Frontend env
-  - `NEXT_PUBLIC_API_URL`
-  - 필요 시 `NEXT_PUBLIC_WS_URL`
-- Nginx websocket 프록시 또는 WS URL 설정
-
-## 5. 최종 판정
-- **배포 문서 경로 오류 수정 완료**
-- **`/office` 변경분 release preflight 근거 문서화 완료**
-- **현재 기준 코드/빌드/테스트 blocker 없음**
-
-## 6. 최종 JSON
-```json
-{
-  "type": "release_preflight",
-  "from": "harang",
-  "task_id": "SPRINT-016-RELEASE-PREFLIGHT",
-  "repo": "https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard",
-  "branch": "main",
-  "commit": "a9e1e677b0f129cc2f45e4f2624020d9d4626159",
-  "passed": true,
-  "errors": [],
-  "notes": [
-    "PM2 backend entry corrected to backend/dist/src/main.js",
-    "frontend lint/build passed",
-    "backend build/test passed",
-    "office route present in production build output",
-    "deploy-time env and websocket proxy checks remain operational checks only"
-  ],
-  "suggestion": "Safe to proceed with deploy after environment and websocket configuration checks."
-}
-```

.plans/sprints/SPRINT-016.md

@@ -1,218 +0,0 @@
-# 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/`에 정리됨

.plans/sprints/SPRINT-017.md

@@ -1,178 +0,0 @@
-# SPRINT-017: 오피스 대시보드 운영 안정화와 모바일 완성
-
-## 목표
-`/office`를 데모 화면이 아니라 운영자가 실제로 믿고 쓰는 관제 화면으로 고정한다. 이번 Sprint의 중심은 새 기능 추가가 아니라, 이미 `main`에 들어온 오피스 대시보드를 **실시간성, 반응형, 실패 처리, QA 기준**까지 포함해 운영 가능 상태로 만드는 거야.
-
-## 배경
-SPRINT-016에서 아래는 이미 확보됐어.
-- 오피스 PRD와 핵심 IA
-- `frontend/app/office/page.tsx` 진입 경로
-- `OfficeScene`, `ContextPanel`, `ChatWorkspace`, `PipelinePanel`, `ServerHealthPanel` 구현
-- release preflight 문서와 기본 빌드 통과 근거
-
-하지만 여기서 멈추면 안 돼.
-- live 데이터가 약해질 때 무엇을 보여줄지
-- 모바일에서 어떤 정보만 남기고 무엇을 접을지
-- direct chat이 권한/JWT/오류 상황에서 어떻게 반응할지
-- WebSocket과 polling snapshot이 충돌할 때 어떤 값이 우선인지
-이 기준이 문서와 QA에서 아직 완전히 잠기지 않았어.
-
-## 참고 문서
-- PRD: `docs/product-specs/openclaw-office-dashboard-prd.md`
-- 실행 개요: `.plans/OVERVIEW.md`
-- 이전 Sprint: `.plans/sprints/SPRINT-016.md`
-- UI 기준: `.plans/design/ui/office-dashboard-design.md`
-- 채팅 기준: `.plans/design/ui/office-chat-design.md`
-- API 기준: `.plans/design/api-design.md`
-- 배포/검증: `.plans/qa/SPRINT-016-release-preflight.md`
-
-## Git 링크
-- Repo: https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard
-- `/office` entry: https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard/src/branch/main/frontend/app/office/page.tsx
-- office components: https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard/src/branch/main/frontend/components/office
-- sisters controller: https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard/src/branch/main/backend/src/sisters/sisters.controller.ts
-- websocket gateway: https://git.nabomhalang.co.kr/hanarang/hanarang-dashboard/src/branch/main/backend/src/events/events.gateway.ts
-
-## Sprint 범위
-- `/office` 운영 안정화
-- Desktop / Tablet / Mobile 정보 우선순위 재정리
-- live / snapshot / fallback 판정 규칙 고정
-- direct chat 실패/권한/빈 상태 처리 강화
-- WebSocket reconnect / polling reconciliation 기준 문서화
-- QA 재현 기준과 deploy gate 정리
-
-## 이번 Sprint에서 하지 않는 것
-- 새로운 오피스 씬 세계관 추가
-- 3D 전환
-- 음성/영상 채널 추가
-- 별도 모바일 앱 설계
-- Gateway 프로토콜 자체 신규 설계
-
-## 완료 기준
-- Desktop / Tablet / Mobile에서 `/office` 핵심 판단 정보가 모두 남아 있음
-- `live / snapshot / fallback` 판정이 UI와 API 문서에서 같은 의미로 쓰임
-- direct chat, pipeline, health 패널의 오류/권한/빈 상태가 정의되고 QA 가능함
-- WS 끊김, JWT 없음, 데이터 지연 상황에서 운영자가 왜 이런 화면이 보이는지 설명 가능함
-- QA 체크와 deploy preflight가 SPRINT-017 기준으로 이어짐
-
-## 태스크
-
-### TASK-100: SPRINT-017 scope 확정과 문서 교차 참조 정리
-- **담당:** 하랑이
-- **상태:** pending
-- **산출물:**
-  - `.plans/OVERVIEW.md` 갱신
-  - `.plans/sprints/SPRINT-017.md`
-  - `.plans/design/api-design.md` 갱신
-- **설명:** SPRINT-016 비전 문서와 실제 `main` 구현 사이의 차이를 정리하고, 이번 Sprint의 안정화 scope를 문서 레벨에서 잠근다.
-- **done_when:**
-  - SPRINT-017 문서가 실제 Git 구현 경로를 링크함
-  - 관련 문서 간 교차 참조가 누락 없이 연결됨
-  - active sprint가 OVERVIEW에서 SPRINT-017로 표시됨
-
-### TASK-101: live / snapshot / fallback 상태 모델 고정
-- **담당:** 나랑이
-- **상태:** pending
-- **주요 파일:**
-  - `frontend/app/office/page.tsx`
-  - `frontend/components/office/OfficeScene.tsx`
-  - `backend/src/sisters/sisters.controller.ts`
-  - `backend/src/events/events.gateway.ts`
-- **설명:** 오피스 화면이 어떤 데이터 출처를 보고 있는지 명확히 드러내고, WS 데이터와 REST snapshot이 섞일 때 우선순위를 고정한다.
-- **done_when:**
-  - 화면 상에서 현재 데이터 모드가 `live`, `snapshot`, `fallback` 중 하나로 읽힘
-  - WS 끊김 후 snapshot으로 내려가는 기준 시간이 정리됨
-  - fallback 진입 조건이 문서와 코드 주석/상수 기준으로 일치함
-
-### TASK-102: Office Scene 반응형 정보 우선순위 재정의
-- **담당:** 나랑이
-- **상태:** pending
-- **주요 파일:**
-  - `frontend/app/office/page.tsx`
-  - `frontend/components/office/OfficeScene.tsx`
-  - `frontend/components/office/ContextPanel.tsx`
-  - `frontend/components/office/PipelinePanel.tsx`
-  - `frontend/components/office/ServerHealthPanel.tsx`
-- **설명:** 모바일에서는 전체 씬을 그대로 축소하지 말고, 운영 의미가 유지되는 최소 단위로 재배치한다.
-- **done_when:**
-  - Desktop(≥1280), Tablet(768~1279), Mobile(<768) 기준 레이아웃이 정의됨
-  - Mobile에서 4자매 상태, 현재 focus, health summary가 첫 화면 안에 들어옴
-  - 고정 높이/overflow 때문에 주요 패널이 잘리지 않음
-
-### TASK-103: direct chat 권한/오류/빈 상태 정리
-- **담당:** 나랑이
-- **상태:** pending
-- **주요 파일:**
-  - `frontend/components/office/ChatWorkspace.tsx`
-  - `backend/src/sisters/sisters.controller.ts`
-- **설명:** JWT 없음, 전송 실패, 응답 지연, 최근 메시지 없음 같은 운영 상황을 조용히 숨기지 않고 정직하게 보여준다.
-- **done_when:**
-  - JWT 없음 상태에서 전송 불가 이유가 사용자에게 표시됨
-  - 전송 실패/timeout 시 재시도 또는 안내 문구가 있음
-  - 최근 대화가 없을 때 빈 상태 문구가 존재함
-  - tool 메시지와 assistant 메시지가 구분돼 보임
-
-### TASK-104: WebSocket reconnect와 polling reconciliation 운영 규칙 정리
-- **담당:** 나랑이
-- **상태:** pending
-- **주요 파일:**
-  - `backend/src/events/events.gateway.ts`
-  - `backend/src/events/events.scheduler.ts`
-  - `frontend/lib/useSocket.ts`
-  - `frontend/app/office/page.tsx`
-- **설명:** 지금 구조는 WS broadcast와 주기적 snapshot이 함께 가고 있어. 이 둘의 충돌/지연 시 동작 원리를 문서와 구현에서 함께 잠가야 해.
-- **done_when:**
-  - reconnect backoff 또는 재연결 전략이 문서화됨
-  - 마지막 성공 수신 시각을 기준으로 stale 상태를 표시할 수 있음
-  - snapshot이 WS보다 오래된 데이터를 덮어쓰지 않게 기준이 정리됨
-
-### TASK-105: 오피스 패널 loading / empty / stale UX 통일
-- **담당:** 나랑이
-- **상태:** pending
-- **주요 파일:**
-  - `frontend/app/office/page.tsx`
-  - `frontend/components/office/*`
-- **설명:** 씬, 채팅, 파이프라인, 서버 헬스가 각자 다른 실패 톤으로 반응하면 운영자가 혼란스러워져. 상태 톤을 하나로 맞춘다.
-- **done_when:**
-  - loading, empty, stale, error 네 상태가 전 패널에서 같은 규칙으로 보임
-  - fallback 데이터 사용 시 라벨 또는 보조 문구가 있음
-  - 데이터 없음과 오류를 같은 문구로 처리하지 않음
-
-### TASK-106: QA 매트릭스 작성 및 실브라우저 검증
-- **담당:** 다랑이
-- **상태:** pending
-- **산출물:**
-  - `.plans/qa/SPRINT-017-review-1.md`
-  - 필요 시 `.plans/qa/SPRINT-017-review-2.md`
-- **설명:** 이번 Sprint의 QA는 단순 UI 확인이 아니라 운영 실패 시나리오까지 포함해야 해.
-- **done_when:**
-  - Desktop / Tablet / Mobile 실브라우저 검증 기록이 있음
-  - WS disconnect, JWT 없음, 데이터 없음, 긴 task 텍스트 케이스가 포함됨
-  - blocker / warning / follow-up이 분리 기록됨
-
-### TASK-107: 배포 전 운영 준비사항 잠금
-- **담당:** 이랑이
-- **상태:** pending
-- **산출물:**
-  - `.plans/qa/SPRINT-017-release-preflight.md`
-  - 필요 시 `.plans/deploy/deploy-plan.md` 보강
-- **설명:** `/office`는 WS와 env 의존성이 있어서 코드만 통과해도 운영 배포에서 무너질 수 있어. 배포 전 체크를 문서로 잠근다.
-- **done_when:**
-  - `NEXT_PUBLIC_API_URL`, 필요 시 `NEXT_PUBLIC_WS_URL`, `JWT_SECRET`, `CORS_ORIGINS`, WS proxy 체크가 문서화됨
-  - build/test/lint 외 운영 env 검증 항목이 분리됨
-  - deploy gate 통과 조건이 문서에 명시됨
-
-## 검증 시나리오
-1. 브라우저 첫 진입 시 `/office`에서 4자매 상태와 현재 focus를 5초 안에 설명할 수 있어야 해.
-2. WS 연결이 끊겨도 snapshot 또는 fallback 전환이 조용히 숨겨지지 않아야 해.
-3. 모바일에서 씬, pipeline, health, chat 중 무엇이 우선인지 일관돼야 해.
-4. direct chat이 실패했을 때 무응답처럼 보이지 않아야 해.
-5. QA 문서와 deploy preflight가 같은 기준 용어를 써야 해.
-
-## 핸드오프 메모
-- 하랑이는 용어와 상태 모델을 잠그는 역할이야.
-- 나랑이는 `/office`를 운영 화면으로 만드는 역할이야.
-- 다랑이는 브라우저와 실패 시나리오를 실제로 깨보는 역할이야.
-- 이랑이는 env, WS proxy, deploy gate를 잠그는 역할이야.
-
-여기까지가 scope야.

backend/package-lock.json

@@ -12,7 +12,6 @@
         "@nestjs/common": "^11.0.1",
         "@nestjs/config": "^4.0.3",
         "@nestjs/core": "^11.0.1",
-        "@nestjs/event-emitter": "^3.0.1",
         "@nestjs/jwt": "^11.0.2",
         "@nestjs/passport": "^11.0.5",
         "@nestjs/platform-express": "^11.0.1",
@@ -2295,19 +2294,6 @@
         }
       }
     },
-    "node_modules/@nestjs/event-emitter": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@nestjs/event-emitter/-/event-emitter-3.0.1.tgz",
-      "integrity": "sha512-0Ln/x+7xkU6AJFOcQI9tIhUMXVF7D5itiaQGOyJbXtlAfAIt8gzDdJm+Im7cFzKoWkiW5nCXCPh6GSvdQd/3Dw==",
-      "license": "MIT",
-      "dependencies": {
-        "eventemitter2": "6.4.9"
-      },
-      "peerDependencies": {
-        "@nestjs/common": "^10.0.0 || ^11.0.0",
-        "@nestjs/core": "^10.0.0 || ^11.0.0"
-      }
-    },
     "node_modules/@nestjs/jwt": {
       "version": "11.0.2",
       "resolved": "https://registry.npmjs.org/@nestjs/jwt/-/jwt-11.0.2.tgz",
@@ -6218,12 +6204,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/eventemitter2": {
-      "version": "6.4.9",
-      "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.9.tgz",
-      "integrity": "sha512-JEPTiaOt9f04oa6NOkc4aH+nVp5I3wEjpHbIPqfgCdD5v5bUzy7xQqwcVO2aDQgOWhI28da57HksMrzK9HlRxg==",
-      "license": "MIT"
-    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",

backend/package.json

@@ -27,7 +27,6 @@
     "@nestjs/common": "^11.0.1",
     "@nestjs/config": "^4.0.3",
     "@nestjs/core": "^11.0.1",
-    "@nestjs/event-emitter": "^3.0.1",
     "@nestjs/jwt": "^11.0.2",
     "@nestjs/passport": "^11.0.5",
     "@nestjs/platform-express": "^11.0.1",

backend/src/activity/activity.module.ts

@@ -2,9 +2,10 @@ import { Module } from '@nestjs/common';
 import { ActivityController } from './activity.controller';
 import { ActivityService } from './activity.service';
 import { PrismaModule } from '../prisma/prisma.module';
+import { EventsModule } from '../events/events.module';
 
 @Module({
-  imports: [PrismaModule],
+  imports: [PrismaModule, EventsModule],
   controllers: [ActivityController],
   providers: [ActivityService],
   exports: [ActivityService],

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

@@ -1,5 +1,4 @@
 import { Test, TestingModule } from '@nestjs/testing';
-import { EventEmitter2 } from '@nestjs/event-emitter';
 import { ActivityService } from './activity.service';
 import { PrismaService } from '../prisma/prisma.service';
 
@@ -21,7 +20,6 @@ describe('ActivityService', () => {
       providers: [
         ActivityService,
         { provide: PrismaService, useValue: mockPrisma },
-        EventEmitter2,
       ],
     }).compile();
 

backend/src/activity/activity.service.ts

@@ -1,6 +1,6 @@
-import { Injectable } from '@nestjs/common';
+import { Injectable, Optional } from '@nestjs/common';
-import { EventEmitter2 } from '@nestjs/event-emitter';
 import { PrismaService } from '../prisma/prisma.service';
+import { EventsGateway } from '../events/events.gateway';
 
 export interface LogActivityDto {
   sisterId?: number;
@@ -34,7 +34,7 @@ function sanitizeActivityDetail(detail?: string | null): string | undefined {
 export class ActivityService {
   constructor(
     private readonly prisma: PrismaService,
-    private readonly eventEmitter: EventEmitter2,
+    @Optional() private readonly events?: EventsGateway,
   ) {}
 
   async log(dto: LogActivityDto) {
@@ -49,7 +49,9 @@ export class ActivityService {
       },
     });
 
-    this.eventEmitter.emit('activity.logged', record);
+    if (this.events) {
+      this.events.broadcastActivity(record);
+    }
 
     return record;
   }

backend/src/app.module.ts

@@ -1,6 +1,5 @@
 import { Module } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
-import { EventEmitterModule } from '@nestjs/event-emitter';
 import { ThrottlerModule } from '@nestjs/throttler';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
@@ -23,7 +22,6 @@ import { DashboardModule } from './dashboard/dashboard.module';
 @Module({
   imports: [
     ConfigModule.forRoot({ isGlobal: true }),
-    EventEmitterModule.forRoot(),
     ThrottlerModule.forRoot([{ ttl: 60000, limit: 100 }]),
     PrismaModule,
     SistersModule,

backend/src/auth/auth-cookies.ts

@@ -1,128 +0,0 @@
-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,30 +1,17 @@
 import {
-  BadRequestException,
-  Body,
   Controller,
-  Get,
-  HttpCode,
   Post,
-  Req,
+  Get,
-  Res,
+  Body,
-  UnauthorizedException,
+  Headers,
   UseGuards,
   Request,
+  BadRequestException,
 } from '@nestjs/common';
-import type {
+import type { Request as ExpressRequest } from 'express';
-  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';
+import { Throttle, ThrottlerGuard } from '@nestjs/throttler';
 
 interface AuthenticatedRequest extends ExpressRequest {
   user: { userId: number };
@@ -34,58 +21,17 @@ interface AuthenticatedRequest extends ExpressRequest {
 export class AuthController {
   constructor(private readonly authService: AuthService) {}
 
-  @HttpCode(200)
   @UseGuards(ThrottlerGuard)
   @Throttle({ default: { limit: 5, ttl: 60000 } })
   @Post('login')
-  async login(
+  login(@Body() dto: LoginDto) {
-    @Body() dto: LoginDto,
+    return this.authService.login(dto);
-    @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')
-  async refresh(
+  refresh(@Headers('x-refresh-token') token: string) {
-    @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');
-    if (cookieToken && !hasValidCsrfToken(req)) {
+    return this.authService.refresh(token);
-      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)

backend/src/auth/jwt.strategy.ts

@@ -1,9 +1,7 @@
 import { Injectable, UnauthorizedException } from '@nestjs/common';
-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';
+import { ConfigService } from '@nestjs/config';
 
 export interface JwtPayload {
   sub: number;
@@ -11,21 +9,13 @@ 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.fromExtractors([
+      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
-        cookieTokenExtractor,
-        ExtractJwt.fromAuthHeaderAsBearerToken(),
-      ]),
       ignoreExpiration: false,
       secretOrKey: secret,
     });

backend/src/dashboard/dashboard.service.ts

@@ -30,7 +30,7 @@ interface FreshnessMeta {
   qaDocLatestAt: string | null;
 }
 
-const QA_PATH_CANDIDATES = ['.plans/qa/', '.qa/'];
+const QA_PATH_CANDIDATES = ['.plans/qa/', '.qa/', 'qa/'];
 const SISTER_ROLES: Record<string, string> = {
   harang: 'Plan & Assign',
   narang: 'Implement',
@@ -69,23 +69,13 @@ function nodeStateFromEvidence(params: {
   return 'idle';
 }
 
-function sanitizeSummary(text?: string | null) {
-  const raw = text?.trim();
-  if (!raw) return null;
-  if (/stderr:/i.test(raw) || /command not found/i.test(raw) || /bash:\s*line/i.test(raw)) {
-    return '내부 작업 중 오류가 발생했어. 자세한 시스템 로그는 관리자 로그에서 확인해.';
-  }
-  if (/^ssh failed/i.test(raw) || /ssh connection failed/i.test(raw)) {
-    return '원격 노드 연결에 실패했어.';
-  }
-  return raw;
-}
-
 function summarizeActivity(
   activity?: ActivityRecord | null,
   fallback = 'NO EVENT',
 ) {
-  return sanitizeSummary(activity?.detail) || activity?.action?.replace(/_/g, ' ') || fallback;
+  return (
+    activity?.detail?.trim() || activity?.action?.replace(/_/g, ' ') || fallback
+  );
 }
 
 function parseQaSummary(content: string): string {

backend/src/events/events.gateway.ts

@@ -10,8 +10,6 @@ import { Server, Socket } from 'socket.io';
 import { Logger } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
 import { ConfigService } from '@nestjs/config';
-import { OnEvent } from '@nestjs/event-emitter';
-import { ACCESS_TOKEN_COOKIE, parseCookieHeader } from '../auth/auth-cookies';
 
 interface SocketUserPayload {
   username?: string;
@@ -51,17 +49,12 @@ export class EventsGateway
 
   handleConnection(client: SocketWithUser) {
     // JWT 인증 필수 — 토큰 없거나 유효하지 않으면 disconnect
-    const authHeader = client.handshake.headers.authorization;
-    const tokenFromHeader = Array.isArray(authHeader)
-      ? authHeader[0]?.replace('Bearer ', '')
-      : authHeader?.replace('Bearer ', '');
-    const tokenFromCookie = parseCookieHeader(client.handshake.headers.cookie)[
-      ACCESS_TOKEN_COOKIE
-    ];
     const token =
-      (client.handshake.auth?.token as string | undefined) ??
+      (client.handshake.auth?.token as string) ??
-      tokenFromHeader ??
+      (client.handshake.headers.authorization as string)?.replace(
-      tokenFromCookie;
+        'Bearer ',
+        '',
+      );
 
     if (!token) {
       this.logger.debug(`WS rejected (no token): ${client.id}`);
@@ -108,12 +101,6 @@ export class EventsGateway
     this.server.emit('activity:new', { item, ts: Date.now() });
   }
 
-  /** EventEmitter2에서 activity.logged 수신 → WebSocket 브로드캐스트 */
-  @OnEvent('activity.logged')
-  handleActivityLogged(record: unknown) {
-    this.broadcastActivity(record);
-  }
-
   /** 연결된 클라이언트 수 */
   getClientCount(): number {
     return this.server?.sockets?.sockets?.size ?? 0;

backend/src/gitea/gitea.service.ts

@@ -12,6 +12,7 @@ export interface GiteaRepo {
   open_issues_count: number;
   open_pr_counter: number;
   updated_at: string;
+  private?: boolean;
 }
 
 export interface GiteaPR {

backend/src/main.ts

@@ -1,14 +1,7 @@
 import { NestFactory } from '@nestjs/core';
 import { Logger, ValidationPipe } from '@nestjs/common';
-import type { NextFunction, Request, Response } from 'express';
-import helmet from 'helmet';
 import { AppModule } from './app.module';
-import {
+import helmet from 'helmet';
-  ACCESS_TOKEN_COOKIE,
-  REFRESH_TOKEN_COOKIE,
-  getCookieValue,
-  hasValidCsrfToken,
-} from './auth/auth-cookies';
 
 function getAllowedOrigins() {
   return (process.env.CORS_ORIGINS ?? 'http://localhost:3004')
@@ -17,40 +10,10 @@ function getAllowedOrigins() {
     .filter((origin): origin is string => origin.length > 0);
 }
 
-function shouldBypassCsrf(req: Request): boolean {
-  if (['GET', 'HEAD', 'OPTIONS'].includes(req.method.toUpperCase())) {
-    return true;
-  }
-
-  if (req.path === '/api/auth/login') {
-    return true;
-  }
-
-  const hasAuthorizationHeader = Boolean(req.headers.authorization);
-  if (hasAuthorizationHeader) {
-    return true;
-  }
-
-  const hasAuthCookie = Boolean(
-    getCookieValue(req, ACCESS_TOKEN_COOKIE) ||
-      getCookieValue(req, REFRESH_TOKEN_COOKIE),
-  );
-
-  return !hasAuthCookie;
-}
-
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
 
   app.use(helmet());
-  app.use((req: Request, res: Response, next: NextFunction) => {
-    if (shouldBypassCsrf(req) || hasValidCsrfToken(req)) {
-      next();
-      return;
-    }
-
-    res.status(403).json({ message: 'Invalid CSRF token' });
-  });
 
   const allowedOrigins = getAllowedOrigins();
 
@@ -66,12 +29,6 @@ async function bootstrap() {
       }
     },
     methods: ['GET', 'POST', 'PATCH', 'PUT', 'DELETE', 'OPTIONS'],
-    allowedHeaders: [
-      'Content-Type',
-      'Authorization',
-      'X-CSRF-Token',
-      'X-Refresh-Token',
-    ],
     credentials: true,
   });
 

backend/src/projects/projects.controller.ts

@@ -20,8 +20,8 @@ export class ProjectsController {
   ) {}
 
   @Get()
-  getProjects() {
+  getProjects(@Query('visibility') visibility?: 'public' | 'private') {
-    return this.projectsService.getProjects();
+    return this.projectsService.getProjects(visibility);
   }
 
   @Get(':id')

backend/src/projects/projects.service.ts

@@ -3,6 +3,7 @@ import { PrismaService } from '../prisma/prisma.service';
 import { GiteaService } from '../gitea/gitea.service';
 
 type QaStatus = 'passed' | 'failed' | 'unknown';
+type ProjectVisibility = 'public' | 'private';
 type ProjectPhase =
   | 'PLANNING'
   | 'IMPLEMENT'
@@ -33,9 +34,14 @@ interface ProjectMetaSummary {
   latestDeployAt: string | null;
 }
 
-const QA_PATH_CANDIDATES = ['.plans/qa/', '.qa/'];
+const QA_PATH_CANDIDATES = ['.plans/qa/', '.qa/', 'qa/'];
-const HOTFIX_PATH_CANDIDATES = ['.plans/hotfix/', '.plans/sprints/'];
+const HOTFIX_PATH_CANDIDATES = [
-const SPRINT_PATH = '.plans/sprints/';
+  '.plans/hotfix/',
+  '.hotfix/',
+  '.plans/sprints/',
+];
+const SPRINT_PATH_CANDIDATES = ['.plans/sprints/', 'sprints/'];
+const ASSIGNED_NODE_ORDER = ['harang', 'narang', 'darang', 'erang'] as const;
 
 function normalizeRepoName(repoUrl: string): string {
   return repoUrl.replace(/\/+$/, '').split('/').pop() ?? '';
@@ -187,82 +193,95 @@ export class ProjectsService {
     private readonly gitea: GiteaService,
   ) {}
 
-  async getProjects() {
+  async getProjects(visibilityFilter?: ProjectVisibility) {
     const dbProjects = await this.prisma.project.findMany({
       include: { sprints: { include: { tasks: true } } },
       orderBy: { updatedAt: 'desc' },
     });
 
-    const [repoMetaMap, repoDocsMap] = await Promise.all([
+    const [{ repoMetaMap, sourceAvailable }, repoDocsMap] = await Promise.all([
       this.getRepoMetaMap(),
       this.getRepoDocumentMap(
         dbProjects.map((project) => normalizeRepoName(project.repoUrl)),
       ),
     ]);
 
-    return dbProjects.map((project) => {
+    return dbProjects
-      const totalSprints = project.sprints.length;
+      .map((project) => {
-      const doneSprints = project.sprints.filter(
+        const totalSprints = project.sprints.length;
-        (sprint) => sprint.status === 'done',
+        const doneSprints = project.sprints.filter(
-      ).length;
+          (sprint) => sprint.status === 'done',
-      const inProgressSprint = project.sprints.find(
+        ).length;
-        (sprint) => sprint.status === 'in_progress',
+        const inProgressSprint = project.sprints.find(
-      );
+          (sprint) => sprint.status === 'in_progress',
-      const ownerSister =
+        );
-        project.sprints
+        const ownerSister =
-          .flatMap((sprint) => sprint.tasks)
+          project.sprints
-          .find((task) => task.assignee)?.assignee ?? 'narang';
+            .flatMap((sprint) => sprint.tasks)
-      const progress =
+            .find((task) => task.assignee)?.assignee ?? 'narang';
-        totalSprints > 0 ? Math.round((doneSprints / totalSprints) * 100) : 0;
+        const progress =
-      const repoMeta = repoMetaMap[project.giteaId];
+          totalSprints > 0 ? Math.round((doneSprints / totalSprints) * 100) : 0;
-      const docs = repoDocsMap.get(normalizeRepoName(project.repoUrl)) ?? {
+        const repoMeta = repoMetaMap[project.giteaId];
-        hotfixes: [],
+        const docs = repoDocsMap.get(normalizeRepoName(project.repoUrl)) ?? {
-        qas: [],
+          hotfixes: [],
-      };
+          qas: [],
-      const latestHotfix = docs.hotfixes.at(-1) ?? null;
+        };
-      const latestQa = docs.qas.at(-1) ?? null;
+        const latestHotfix = docs.hotfixes.at(-1) ?? null;
-      const meta = buildProjectMeta({
+        const latestQa = docs.qas.at(-1) ?? null;
-        totalSprints,
+        const meta = buildProjectMeta({
-        doneSprints,
+          totalSprints,
-        hasActiveSprint: Boolean(inProgressSprint),
+          doneSprints,
-        openPRs: repoMeta?.openPRs ?? 0,
+          hasActiveSprint: Boolean(inProgressSprint),
-        latestHotfix: latestHotfix?.label ?? null,
+          openPRs: repoMeta?.openPRs ?? 0,
-        latestQaLabel: latestQa?.label ?? null,
+          latestHotfix: latestHotfix?.label ?? null,
-        latestQaStatus: latestQa?.qaStatus ?? 'unknown',
+          latestQaLabel: latestQa?.label ?? null,
-        blockerCount: latestQa?.blockerCount ?? 0,
+          latestQaStatus: latestQa?.qaStatus ?? 'unknown',
-        updatedAt: repoMeta?.updatedAt ?? project.updatedAt.toISOString(),
+          blockerCount: latestQa?.blockerCount ?? 0,
-      });
+          updatedAt: repoMeta?.updatedAt ?? project.updatedAt.toISOString(),
+        });
 
-      return {
+        if (visibilityFilter) {
-        id: project.id,
+          if (!sourceAvailable || !repoMeta?.visibility) {
-        giteaId: project.giteaId,
+            return null;
-        name: project.name,
+          }
-        repoUrl: project.repoUrl,
+          if (repoMeta.visibility !== visibilityFilter) {
-        description: project.description,
+            return null;
-        status: project.status,
+          }
-        progress,
+        }
-        totalSprints,
+
-        doneSprints,
+        return {
-        sprintCount: totalSprints,
+          id: project.id,
-        currentSprint:
+          giteaId: project.giteaId,
-          inProgressSprint?.name ??
+          name: project.name,
-          (doneSprints === totalSprints && totalSprints > 0
+          repoUrl: project.repoUrl,
-            ? 'COMPLETED'
+          description: project.description,
-            : null),
+          status: project.status,
-        ownerSister,
+          progress,
-        openPRs: repoMeta?.openPRs ?? 0,
+          totalSprints,
-        updatedAt: repoMeta?.updatedAt ?? project.updatedAt.toISOString(),
+          doneSprints,
-        latestHotfix: meta.latestHotfix,
+          sprintCount: totalSprints,
-        latestQaLabel: meta.latestQaLabel,
+          currentSprint:
-        latestQaStatus: meta.latestQaStatus,
+            inProgressSprint?.name ??
-        blockerCount: meta.blockerCount,
+            (doneSprints === totalSprints && totalSprints > 0
-        phase: meta.phase,
+              ? 'COMPLETED'
-        deployStatus: meta.deployStatus,
+              : null),
-        deployBranch: meta.deployBranch,
+          ownerSister,
-        redeployRequired: meta.redeployRequired,
+          openPRs: repoMeta?.openPRs ?? 0,
-        latestDeployAt: meta.latestDeployAt,
+          updatedAt: repoMeta?.updatedAt ?? project.updatedAt.toISOString(),
-      };
+          latestHotfix: meta.latestHotfix,
-    });
+          latestQaLabel: meta.latestQaLabel,
+          latestQaStatus: meta.latestQaStatus,
+          blockerCount: meta.blockerCount,
+          phase: meta.phase,
+          deployStatus: meta.deployStatus,
+          deployBranch: meta.deployBranch,
+          redeployRequired: meta.redeployRequired,
+          latestDeployAt: meta.latestDeployAt,
+        };
+      })
+      .filter(
+        (project): project is NonNullable<typeof project> => project !== null,
+      );
   }
 
   async getProjectById(id: number) {
@@ -327,6 +346,15 @@ export class ProjectsService {
         note: 'ERANG: LATEST MAIN REDEPLOY ONLY',
       },
       latestHotfix: docs.hotfixes.at(-1) ?? null,
+      assignedNodes: ASSIGNED_NODE_ORDER.map((name) => ({
+        name,
+        role: name,
+        assigned:
+          activeSprint?.tasks.some((task) => task.assignee === name) ??
+          project.sprints.some((sprint) =>
+            sprint.tasks.some((task) => task.assignee === name),
+          ),
+      })),
     };
   }
 
@@ -350,7 +378,7 @@ export class ProjectsService {
     const repoName = normalizeRepoName(project.repoUrl);
     const docs = await this.collectRepoDocuments(repoName);
 
-    return [...docs.sprints, ...docs.hotfixes]
+    return [...docs.sprints, ...docs.hotfixes, ...docs.qas]
       .filter(isRepoDocumentMeta)
       .sort((a, b) => a.order - b.order);
   }
@@ -365,20 +393,27 @@ export class ProjectsService {
   }
 
   private async getRepoMetaMap() {
-    const repoMetaMap: Record<number, { openPRs: number; updatedAt: string }> =
+    const repoMetaMap: Record<
-      {};
+      number,
+      { openPRs: number; updatedAt: string; visibility: ProjectVisibility }
+    > = {};
+    let sourceAvailable = false;
+
     try {
       const repos = await this.gitea.getOrgRepos();
+      sourceAvailable = repos.length > 0;
       for (const repo of repos) {
         repoMetaMap[repo.id] = {
           openPRs: repo.open_pr_counter,
           updatedAt: repo.updated_at,
+          visibility: repo.private ? 'private' : 'public',
         };
       }
     } catch {
       this.logger.warn('Gitea unavailable, using DB data only');
     }
-    return repoMetaMap;
+
+    return { repoMetaMap, sourceAvailable };
   }
 
   private async getRepoDocumentMap(repoNames: string[]) {
@@ -393,22 +428,29 @@ export class ProjectsService {
   }
 
   private async collectRepoDocuments(repoName: string) {
-    const [sprintPaths, hotfixPathGroups, qaPathGroups] = await Promise.all([
+    const [sprintPathGroups, hotfixPathGroups, qaPathGroups] =
-      this.gitea.getRepoTree(repoName, SPRINT_PATH),
+      await Promise.all([
-      Promise.all(
+        Promise.all(
-        HOTFIX_PATH_CANDIDATES.map((path) =>
+          SPRINT_PATH_CANDIDATES.map((path) =>
-          this.gitea.getRepoTree(repoName, path),
+            this.gitea.getRepoTree(repoName, path),
+          ),
         ),
-      ),
+        Promise.all(
-      Promise.all(
+          HOTFIX_PATH_CANDIDATES.map((path) =>
-        QA_PATH_CANDIDATES.map((path) =>
+            this.gitea.getRepoTree(repoName, path),
-          this.gitea.getRepoTree(repoName, path),
+          ),
         ),
-      ),
+        Promise.all(
-    ]);
+          QA_PATH_CANDIDATES.map((path) =>
+            this.gitea.getRepoTree(repoName, path),
+          ),
+        ),
+      ]);
 
-    const sprintFiles = sprintPaths.filter((path) =>
+    const sprintFiles = Array.from(
-      /SPRINT-\d+\.md$/i.test(path),
+      new Set(
+        sprintPathGroups.flat().filter((path) => /SPRINT-\d+\.md$/i.test(path)),
+      ),
     );
     const hotfixFiles = Array.from(
       new Set(

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

@@ -61,7 +61,7 @@ describe('SisterDetailService', () => {
 
     expect(result.name).toBe('narang');
     expect(result.role).toBe('Generator');
-    expect(result.raw).toContain('SSH 연결 불가');
+    expect(result.configAvailable).toBe(false);
   });
 
   it('getSisterConfig: sister 없으면 NotFoundException', async () => {

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

@@ -1,7 +1,7 @@
 import { Injectable, Logger, NotFoundException } from '@nestjs/common';
-import { ConfigService } from '@nestjs/config';
 import { PrismaService } from '../prisma/prisma.service';
 import { SshService } from './ssh.service';
+import { ConfigService } from '@nestjs/config';
 
 type SisterName = 'harang' | 'narang' | 'darang' | 'erang';
 
@@ -20,15 +20,6 @@ const SISTER_DESCRIPTIONS: Record<SisterName, string> = {
   erang: '인프라와 배포. 서버 관리, merge, 프로덕션 배포를 담당한다.',
 };
 
-function summarizeText(value?: string | null, maxLength = 120): string | null {
-  if (!value) return null;
-
-  const compact = value.replace(/\s+/g, ' ').trim();
-  if (!compact) return null;
-  if (compact.length <= maxLength) return compact;
-  return `${compact.slice(0, maxLength - 1)}…`;
-}
-
 @Injectable()
 export class SisterDetailService {
   private readonly logger = new Logger(SisterDetailService.name);
@@ -48,36 +39,21 @@ export class SisterDetailService {
         sister.ip,
         sister.user,
         sshKeyPath,
-        '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',
+        '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',
       );
 
-      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],
-        files,
+        configAvailable: Boolean(result.stdout.trim()),
-        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],
-        files: [],
+        configAvailable: false,
-        summary: '(SSH 연결 불가)',
       };
     }
   }
@@ -91,37 +67,23 @@ export class SisterDetailService {
         sister.ip,
         sister.user,
         sshKeyPath,
-        'SESSION_DIR=~/.hermes/agents/main/sessions; [ -d "$SESSION_DIR" ] || SESSION_DIR=~/.openclaw/agents/main/sessions; ls -lt "$SESSION_DIR"/ 2>/dev/null | head -20 || echo ""',
+        'SESSION_DIR=~/.hermes/sessions; [ -d "$SESSION_DIR" ] || SESSION_DIR=~/.openclaw/sessions; find "$SESSION_DIR" -maxdepth 1 -type f -printf "%TY-%Tm-%Td %TH:%TM|%s|%f\n" 2>/dev/null | sort -r | head -20 || echo ""',
       );
 
-      const sessions = result.stdout
+      const lines = result.stdout.split('\n').filter((line) => line.trim());
-        .split('\n')
+      return lines
-        .filter((line) => line && !line.startsWith('total'))
         .map((line) => {
-          const parts = line.trim().split(/\s+/);
+          const [modified = '', size = '0', file = ''] = line.split('|');
-          const label = parts[parts.length - 1] ?? '';
-          const modified = parts.slice(5, 8).join(' ');
-          const size = parts[4] ?? '0';
-
           return {
-            id: label,
+            id: file,
-            label,
+            label: file,
-            status: [modified, size !== '0' ? `${size}B` : null]
+            title: file,
-              .filter((part): part is string => Boolean(part))
+            status: `${size}B · ${modified}`,
-              .join(' · '),
           };
         })
-        .filter((session) => session.label.length > 0);
+        .filter((session) => session.id && session.id !== '');
-
-      return {
-        sessions,
-        total: sessions.length,
-      };
     } catch {
-      return {
+      return [];
-        sessions: [],
-        total: 0,
-      };
     }
   }
 
@@ -137,25 +99,15 @@ export class SisterDetailService {
         'AGENT_DIR=~/.hermes/workspace/agents; [ -d "$AGENT_DIR" ] || AGENT_DIR=~/.openclaw/workspace/agents; ls "$AGENT_DIR"/ 2>/dev/null || echo ""',
       );
 
-      const items = result.stdout
+      const agents = result.stdout
         .split('\n')
-        .map((line) => line.trim())
+        .filter((l) => l.trim().endsWith('.md'));
-        .filter((line) => line.endsWith('.md'))
+      return agents.map((a) => ({
-        .map((file) => ({
+        name: a.trim().replace('.md', ''),
-          id: file.replace('.md', ''),
+        file: a.trim(),
-          label: file.replace('.md', ''),
+      }));
-          file,
-        }));
-
-      return {
-        items,
-        total: items.length,
-      };
     } catch {
-      return {
+      return [];
-        items: [],
-        total: 0,
-      };
     }
   }
 
@@ -169,16 +121,34 @@ export class SisterDetailService {
       }),
       this.prisma.activityLog.count({ where: { sisterId: sister.id } }),
     ]);
+    return { items: logs, total };
+  }
 
-    return {
+  async getSisterLogs(name: SisterName, lines = 100) {
-      items: logs.map((log) => ({
+    const sister = await this.getSisterRecord(name);
-        id: log.id,
+    const sshKeyPath = this.getKeyPath();
-        action: log.action,
+
-        detail: summarizeText(log.detail),
+    try {
-        createdAt: log.createdAt,
+      const result = await this.ssh.executeCommand(
-      })),
+        sister.ip,
-      total,
+        sister.user,
-    };
+        sshKeyPath,
+        `journalctl --user -u hermes-agent --no-pager -n ${lines} 2>/dev/null || journalctl --user -u hermes-gateway --no-pager -n ${lines} 2>/dev/null || journalctl --user -u openclaw-gateway --no-pager -n ${lines} 2>/dev/null || tail -n ${lines} ~/.hermes/logs/gateway.log 2>/dev/null || tail -n ${lines} ~/.openclaw/logs/gateway.log 2>/dev/null || echo "(로그 없음)"`,
+      );
+
+      const output = result.stdout
+        .split('\n')
+        .map((line) => line.trimEnd())
+        .filter((line) => line.length > 0);
+
+      return {
+        name,
+        lines: output.length > 0 ? output : ['(로그 없음)'],
+        total: output.length > 0 ? output.length : 1,
+      };
+    } catch {
+      return { name, lines: ['(로그 조회 실패)'], total: 1 };
+    }
   }
 
   async getOrgData() {
@@ -213,8 +183,8 @@ export class SisterDetailService {
   }
 
   private getKeyPath(): string {
-    const path = this.config.get<string>('SSH_KEY_PATH');
+    const p = this.config.get<string>('SSH_KEY_PATH');
-    if (!path) throw new Error('SSH_KEY_PATH is not set');
+    if (!p) throw new Error('SSH_KEY_PATH is not set');
-    return path;
+    return p;
   }
 }

backend/src/sisters/sisters.controller.ts

@@ -1,24 +1,12 @@
-import {
+import { Controller, Get, Param, Res } from '@nestjs/common';
-  Body,
-  Controller,
-  Get,
-  Param,
-  Post,
-  Res,
-  UseGuards,
-} from '@nestjs/common';
 import type { Response } from 'express';
-import { JwtGuard } from '../auth/jwt.guard';
+import { SistersService } from './sisters.service';
-import { RoleGuard, Roles } from '../auth/role.guard';
+import { SisterDetailService } from './sister-detail.service';
 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,
@@ -26,51 +14,14 @@ export class SistersController {
     private readonly avatarService: AvatarService,
   ) {}
 
-  @Get('runtime')
-  async getSistersRuntime() {
-    return this.sistersService.getAllSistersRuntime();
-  }
-
   @Get()
   async getSistersStatus() {
-    const sisters = await this.sistersService.getAllSistersStatus();
+    return this.sistersService.getAllSistersStatus();
-
-    return sisters.map(({ id, name, lxcId, role, status, lastSeen, currentTask }) => ({
-      id,
-      name,
-      lxcId,
-      role,
-      status,
-      lastSeen,
-      currentTask,
-    }));
-  }
-
-  @Get(':name/runtime')
-  async getSisterRuntime(@Param('name', SisterNamePipe) name: SisterName) {
-    return this.sistersService.getSisterRuntime(name);
-  }
-
-  @UseGuards(JwtGuard)
-  @Post(':name/chat')
-  async chatWithSister(
-    @Param('name', SisterNamePipe) name: SisterName,
-    @Body('message') message: string,
-  ) {
-    return this.sistersService.sendChatMessage(name, message);
   }
 
   @Get(':name/system')
   async getSystemInfo(@Param('name', SisterNamePipe) name: SisterName) {
-    const system = await this.sistersService.getSystemInfo(name);
+    return this.sistersService.getSystemInfo(name);
-    if (!system) return null;
-
-    return {
-      uptime: system.uptime,
-      cpu: system.cpu,
-      memory: system.memory,
-      disk: system.disk,
-    };
   }
 
   @Get(':name/avatar')
@@ -85,29 +36,25 @@ export class SistersController {
 
     const avatar = await this.avatarService.getAvatar(sister);
     res.setHeader('Content-Type', avatar.contentType);
-    res.setHeader('Cache-Control', 'private, max-age=300');
+    res.setHeader('Cache-Control', 'public, max-age=300');
     return res.send(avatar.data);
   }
 
-  @Roles('admin')
   @Get(':name/config')
   async getSisterConfig(@Param('name', SisterNamePipe) name: SisterName) {
     return this.sisterDetail.getSisterConfig(name);
   }
 
-  @Roles('admin')
   @Get(':name/sessions')
   async getSisterSessions(@Param('name', SisterNamePipe) name: SisterName) {
     return this.sisterDetail.getSisterSessions(name);
   }
 
-  @Roles('admin')
   @Get(':name/subagents')
   async getSisterSubagents(@Param('name', SisterNamePipe) name: SisterName) {
     return this.sisterDetail.getSisterSubagents(name);
   }
 
-  @Roles('admin')
   @Get(':name/activity')
   async getSisterActivity(@Param('name', SisterNamePipe) name: SisterName) {
     return this.sisterDetail.getSisterActivityLog(name);

backend/src/sisters/sisters.module.ts

@@ -1,17 +1,16 @@
 import { Module } from '@nestjs/common';
 import { SistersController } from './sisters.controller';
 import { SistersService } from './sisters.service';
+import { SisterDetailService } from './sister-detail.service';
 import { SshService } from './ssh.service';
 import { PrismaModule } from '../prisma/prisma.module';
-import { SisterDetailService } from './sister-detail.service';
+import { ConfigModule } from '@nestjs/config';
 import { AvatarService } from './avatar.service';
-import { ActivityModule } from '../activity/activity.module';
-import { AuthModule } from '../auth/auth.module';
 
 @Module({
-  imports: [PrismaModule, ActivityModule, AuthModule],
+  imports: [PrismaModule, ConfigModule],
   controllers: [SistersController],
-  providers: [SistersService, SshService, SisterDetailService, AvatarService],
+  providers: [SistersService, SisterDetailService, SshService, AvatarService],
-  exports: [SistersService, SshService, SisterDetailService, AvatarService],
+  exports: [SistersService, SisterDetailService, SshService, AvatarService],
 })
 export class SistersModule {}

backend/src/sisters/sisters.service.ts

@@ -1,48 +1,9 @@
-import {
+import { Injectable, Logger, Optional } from '@nestjs/common';
-  BadRequestException,
-  Injectable,
-  Logger,
-  Optional,
-} from '@nestjs/common';
 import { PrismaService } from '../prisma/prisma.service';
 import { SshService } from './ssh.service';
 import { ConfigService } from '@nestjs/config';
 import { ActivityService } from '../activity/activity.service';
 
-export type RuntimeState =
-  | 'idle'
-  | 'thinking'
-  | 'tool_calling'
-  | 'speaking'
-  | 'error';
-
-export interface RuntimeMessage {
-  id: string;
-  role: 'user' | 'assistant' | 'tool';
-  content: string;
-  ts: string | null;
-}
-
-export interface RuntimeSubagent {
-  name: string;
-  state: RuntimeState;
-  updatedAt: number | null;
-  currentTask: string | null;
-  sessionLabel: string | null;
-}
-
-export interface SisterRuntimeSnapshot {
-  name: string;
-  gatewayConnected: boolean;
-  mainState: RuntimeState;
-  currentTask: string | null;
-  activeSessionLabel: string | null;
-  activeSessionUpdatedAt: number | null;
-  controlSessionKey: string | null;
-  recentMessages: RuntimeMessage[];
-  subagents: RuntimeSubagent[];
-}
-
 export interface SisterStatus {
   id: number;
   name: string;
@@ -52,28 +13,6 @@ export interface SisterStatus {
   status: 'online' | 'offline' | 'working' | 'unknown';
   lastSeen: Date | null;
   currentTask: string | null;
-  liveState: RuntimeState;
-  activeSessionLabel: string | null;
-  gatewayConnected: boolean;
-  subagents: RuntimeSubagent[];
-}
-
-interface RuntimeProbeResult {
-  gatewayConnected?: boolean;
-  mainState?: RuntimeState;
-  currentTask?: string | null;
-  activeSessionLabel?: string | null;
-  activeSessionUpdatedAt?: number | null;
-  controlSessionKey?: string | null;
-  recentMessages?: RuntimeMessage[];
-  subagents?: RuntimeSubagent[];
-}
-
-interface ChatSendResult {
-  ok: boolean;
-  status: string;
-  reply: string;
-  raw?: string;
 }
 
 const SISTER_ROLES: Record<string, string> = {
@@ -83,17 +22,6 @@ const SISTER_ROLES: Record<string, string> = {
   erang: 'Infra Manager',
 };
 
-function runtimeStateToStatus(
-  state: RuntimeState,
-  connected: boolean,
-): 'online' | 'offline' | 'working' {
-  if (!connected || state === 'error') return 'offline';
-  if (state === 'thinking' || state === 'tool_calling' || state === 'speaking') {
-    return 'working';
-  }
-  return 'online';
-}
-
 @Injectable()
 export class SistersService {
   private readonly logger = new Logger(SistersService.name);
@@ -106,7 +34,7 @@ export class SistersService {
   ) {}
 
   async getAllSistersStatus(): Promise<SisterStatus[]> {
-    const sisters = await this.prisma.sisterConfig.findMany({ orderBy: { id: 'asc' } });
+    const sisters = await this.prisma.sisterConfig.findMany();
     const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
     if (!sshKeyPath) {
       throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
@@ -121,85 +49,19 @@ export class SistersService {
         return result.value;
       }
       const sister = sisters[index];
-      return this.buildOfflineStatus(sister);
+      return {
+        id: sister.id,
+        name: sister.name,
+        user: sister.user,
+        lxcId: sister.lxcId,
+        role: SISTER_ROLES[sister.name] ?? 'Unknown',
+        status: 'offline' as const,
+        lastSeen: sister.lastSeen,
+        currentTask: null,
+      };
     });
   }
 
-  async getAllSistersRuntime(): Promise<SisterRuntimeSnapshot[]> {
-    const sisters = await this.prisma.sisterConfig.findMany({ orderBy: { id: 'asc' } });
-    const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
-    if (!sshKeyPath) {
-      throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
-    }
-
-    const results = await Promise.allSettled(
-      sisters.map(async (sister) => {
-        const runtime = await this.probeRuntime(sister, sshKeyPath, true);
-        return this.withRuntimeName(sister.name, runtime);
-      }),
-    );
-
-    return results.map((result, index) => {
-      if (result.status === 'fulfilled') return result.value;
-      return this.buildRuntimeFallback(sisters[index].name);
-    });
-  }
-
-  async getSisterRuntime(name: string): Promise<SisterRuntimeSnapshot> {
-    const sister = await this.findByName(name);
-    if (!sister) throw new Error(`Sister ${name} not found`);
-
-    const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
-    if (!sshKeyPath) {
-      throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
-    }
-
-    try {
-      const runtime = await this.probeRuntime(sister, sshKeyPath, true);
-      return this.withRuntimeName(sister.name, runtime);
-    } catch {
-      return this.buildRuntimeFallback(sister.name);
-    }
-  }
-
-  async sendChatMessage(name: string, message: string) {
-    const trimmed = message.trim();
-    if (!trimmed) {
-      throw new BadRequestException('message is required');
-    }
-
-    const sister = await this.findByName(name);
-    if (!sister) throw new Error(`Sister ${name} not found`);
-
-    const sshKeyPath = this.config.get<string>('SSH_KEY_PATH');
-    if (!sshKeyPath) {
-      throw new Error('SSH_KEY_PATH is not set. Check your .env file.');
-    }
-
-    const sendResult = await this.ssh.executeCommand(
-      sister.ip,
-      sister.user,
-      sshKeyPath,
-      this.buildAgentSendCommand(trimmed),
-    );
-
-    const parsed = this.parseRemoteJson<ChatSendResult>(sendResult.stdout);
-    if (!parsed?.ok) {
-      throw new Error(parsed?.raw || 'Failed to send message to sister runtime');
-    }
-
-    const runtime = await this.getSisterRuntime(name).catch(() =>
-      this.buildRuntimeFallback(name),
-    );
-
-    return {
-      ok: true,
-      reply: parsed.reply,
-      status: parsed.status,
-      runtime,
-    };
-  }
-
   async findByName(name: string) {
     return this.prisma.sisterConfig.findUnique({ where: { name } });
   }
@@ -276,17 +138,21 @@ export class SistersService {
     sshKeyPath: string,
   ): Promise<SisterStatus> {
     try {
-      const runtime = await this.probeRuntime(sister, sshKeyPath, false);
+      const result = await this.ssh.executeCommand(
-      const gatewayConnected = Boolean(runtime.gatewayConnected);
+        sister.ip,
-      const liveState = runtime.mainState ?? (gatewayConnected ? 'idle' : 'error');
+        sister.user,
-      const status = runtimeStateToStatus(liveState, gatewayConnected);
+        sshKeyPath,
+        'if systemctl --user is-active hermes-agent >/dev/null 2>&1; then echo active; elif systemctl --user is-active hermes-gateway >/dev/null 2>&1; then echo active; elif pgrep -f "hermes.*gateway|hermes.*agent" >/dev/null 2>&1; then echo active; elif systemctl --user is-active openclaw-gateway >/dev/null 2>&1; then echo active; else echo inactive; fi',
+      );
+
+      const isActive = result.stdout.trim() === 'active';
+      const status: 'online' | 'offline' = isActive ? 'online' : 'offline';
       const prevStatus = sister.status;
       const now = new Date();
-      const lastSeen = gatewayConnected ? now : sister.lastSeen;
 
       await this.prisma.sisterConfig.update({
         where: { id: sister.id },
-        data: { lastSeen, status },
+        data: { lastSeen: isActive ? now : sister.lastSeen, status },
       });
 
       if (prevStatus !== status && this.activity) {
@@ -306,448 +172,22 @@ export class SistersService {
         lxcId: sister.lxcId,
         role: SISTER_ROLES[sister.name] ?? 'Unknown',
         status,
-        lastSeen,
+        lastSeen: isActive ? now : sister.lastSeen,
-        currentTask: runtime.currentTask ?? null,
+        currentTask: null,
-        liveState,
-        activeSessionLabel: runtime.activeSessionLabel ?? null,
-        gatewayConnected,
-        subagents: runtime.subagents ?? [],
       };
     } catch {
       this.logger.warn(`Failed to check status for ${sister.name}`);
-      return this.buildOfflineStatus(sister);
-    }
-  }
-
-  private async probeRuntime(
-    sister: { name: string; ip: string; user: string },
-    sshKeyPath: string,
-    includeMessages: boolean,
-  ): Promise<RuntimeProbeResult> {
-    const result = await this.ssh.executeCommand(
-      sister.ip,
-      sister.user,
-      sshKeyPath,
-      this.buildRuntimeProbeCommand(includeMessages),
-    );
-
-    const parsed = this.parseRemoteJson<RuntimeProbeResult>(result.stdout);
-    if (parsed) {
-      return parsed;
-    }
-
-    const legacy = this.parseLegacyRuntimeResult(result.stdout);
-    if (legacy) {
-      return legacy;
-    }
-
-    throw new Error(`Runtime probe returned invalid JSON for ${sister.name}`);
-  }
-
-  private withRuntimeName(
-    name: string,
-    runtime: RuntimeProbeResult,
-  ): SisterRuntimeSnapshot {
-    return {
-      name,
-      gatewayConnected: Boolean(runtime.gatewayConnected),
-      mainState: runtime.mainState ?? 'error',
-      currentTask: runtime.currentTask ?? null,
-      activeSessionLabel: runtime.activeSessionLabel ?? null,
-      activeSessionUpdatedAt: runtime.activeSessionUpdatedAt ?? null,
-      controlSessionKey: runtime.controlSessionKey ?? null,
-      recentMessages: runtime.recentMessages ?? [],
-      subagents: runtime.subagents ?? [],
-    };
-  }
-
-  private buildOfflineStatus(sister: {
-    id: number;
-    name: string;
-    user: string;
-    lxcId: number;
-    lastSeen: Date | null;
-  }): SisterStatus {
-    return {
-      id: sister.id,
-      name: sister.name,
-      user: sister.user,
-      lxcId: sister.lxcId,
-      role: SISTER_ROLES[sister.name] ?? 'Unknown',
-      status: 'offline',
-      lastSeen: sister.lastSeen,
-      currentTask: null,
-      liveState: 'error',
-      activeSessionLabel: null,
-      gatewayConnected: false,
-      subagents: [],
-    };
-  }
-
-  private buildRuntimeFallback(name: string): SisterRuntimeSnapshot {
-    return {
-      name,
-      gatewayConnected: false,
-      mainState: 'error',
-      currentTask: null,
-      activeSessionLabel: null,
-      activeSessionUpdatedAt: null,
-      controlSessionKey: null,
-      recentMessages: [],
-      subagents: [],
-    };
-  }
-
-  private parseRemoteJson<T>(stdout: string): T | null {
-    const trimmed = stdout.trim();
-    const start = trimmed.indexOf('{');
-    const end = trimmed.lastIndexOf('}');
-    if (start === -1 || end === -1 || end <= start) return null;
-
-    try {
-      return JSON.parse(trimmed.slice(start, end + 1)) as T;
-    } catch {
-      return null;
-    }
-  }
-
-  private parseLegacyRuntimeResult(stdout: string): RuntimeProbeResult | null {
-    const trimmed = stdout.trim();
-    if (trimmed === 'active') {
       return {
-        gatewayConnected: true,
+        id: sister.id,
-        mainState: 'idle',
+        name: sister.name,
+        user: sister.user,
+        lxcId: sister.lxcId,
+        role: SISTER_ROLES[sister.name] ?? 'Unknown',
+        status: 'offline',
+        lastSeen: sister.lastSeen,
         currentTask: null,
-        activeSessionLabel: null,
-        activeSessionUpdatedAt: null,
-        controlSessionKey: null,
-        recentMessages: [],
-        subagents: [],
       };
     }
-
-    if (trimmed === 'inactive') {
-      return {
-        gatewayConnected: false,
-        mainState: 'error',
-        currentTask: null,
-        activeSessionLabel: null,
-        activeSessionUpdatedAt: null,
-        controlSessionKey: null,
-        recentMessages: [],
-        subagents: [],
-      };
-    }
-
-    return null;
-  }
-
-  private buildRuntimeProbeCommand(includeMessages: boolean): string {
-    return `
-GATEWAY_CONNECTED=0
-if systemctl --user is-active hermes-agent >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
-elif systemctl --user is-active hermes-gateway >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
-elif pgrep -f "hermes.*gateway|hermes.*agent" >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
-elif systemctl --user is-active openclaw-gateway >/dev/null 2>&1; then GATEWAY_CONNECTED=1; \
-elif pgrep -f "openclaw.*gateway|openclaw.*agent" >/dev/null 2>&1; then GATEWAY_CONNECTED=1; fi
-export GATEWAY_CONNECTED
-if command -v python3 >/dev/null 2>&1; then
-python3 - <<'PY'
-import json
-import os
-from pathlib import Path
-
-INCLUDE_MESSAGES = ${includeMessages ? 'True' : 'False'}
-MESSAGE_LIMIT = ${includeMessages ? '12' : '0'}
-
-
-def pick_base():
-    for name in ('.hermes', '.openclaw'):
-        candidate = Path.home() / name
-        if candidate.exists():
-            return candidate
-    return None
-
-
-def load_json(path: Path):
-    if not path.exists():
-        return {}
-    try:
-        return json.loads(path.read_text(errors='ignore'))
-    except Exception:
-        return {}
-
-
-def normalize_role(role):
-    if role in ('user', 'assistant'):
-        return role
-    if role in ('tool', 'toolResult'):
-        return 'tool'
-    return None
-
-
-def extract_text(content):
-    if isinstance(content, str):
-        return content.strip()
-    parts = []
-    if isinstance(content, list):
-        for item in content:
-            if not isinstance(item, dict):
-                continue
-            item_type = item.get('type')
-            text = item.get('text') or item.get('input') or item.get('content') or ''
-            if item_type in ('text', 'input_text', 'output_text') and text:
-                parts.append(str(text).strip())
-            elif item_type == 'tool_call':
-                tool_name = item.get('name') or item.get('toolName') or 'tool'
-                parts.append(f'[{tool_name}]')
-    return ' '.join(part for part in parts if part).strip()
-
-
-def compact(text, limit=160):
-    normalized = ' '.join((text or '').split())
-    if not normalized:
-        return ''
-    if normalized.startswith('A new session was started via /new or /reset.'):
-        return ''
-    if len(normalized) <= limit:
-        return normalized
-    return normalized[: limit - 1] + '…'
-
-
-def read_recent_messages(session_file, limit):
-    if not session_file or limit <= 0:
-        return []
-    path = Path(session_file)
-    if not path.exists():
-        return []
-
-    out = []
-    try:
-        lines = path.read_text(errors='ignore').splitlines()
-    except Exception:
-        return []
-
-    for line in reversed(lines):
-        try:
-            payload = json.loads(line)
-        except Exception:
-            continue
-        if payload.get('type') != 'message':
-            continue
-        message = payload.get('message') or {}
-        role = normalize_role(message.get('role'))
-        if not role:
-            continue
-        content = compact(extract_text(message.get('content')))
-        if not content:
-            continue
-        out.append(
-            {
-                'id': str(payload.get('id') or ''),
-                'role': role,
-                'content': content,
-                'ts': payload.get('timestamp') or message.get('timestamp'),
-            }
-        )
-        if len(out) >= limit:
-            break
-
-    out.reverse()
-    return out
-
-
-def pick_session(index, prefer_key=None):
-    if not isinstance(index, dict) or not index:
-        return None, None
-    if prefer_key and prefer_key in index:
-        return prefer_key, index.get(prefer_key)
-    items = sorted(index.items(), key=lambda item: item[1].get('updatedAt') or 0, reverse=True)
-    return items[0]
-
-
-def get_label(entry):
-    if not isinstance(entry, dict):
-        return None
-    return entry.get('displayName') or (entry.get('origin') or {}).get('label') or entry.get('lastTo')
-
-
-def latest_user_text(messages):
-    for item in reversed(messages):
-        if item.get('role') == 'user':
-            return item.get('content')
-    return None
-
-
-def age_minutes(updated_at):
-    if not updated_at:
-        return 10 ** 9
-    return max(0, (int(__import__('time').time() * 1000) - int(updated_at)) // 60000)
-
-
-def state_from(entry, messages, connected):
-    if not connected:
-        return 'error'
-    if not isinstance(entry, dict):
-        return 'idle'
-
-    status = entry.get('status') or ''
-    last_role = messages[-1]['role'] if messages else None
-    age_min = age_minutes(entry.get('updatedAt'))
-
-    if status == 'running':
-        if last_role == 'tool':
-            return 'tool_calling'
-        if last_role == 'assistant':
-            return 'speaking'
-        return 'thinking'
-
-    if age_min <= 2:
-        if last_role == 'assistant':
-            return 'speaking'
-        if last_role == 'tool':
-            return 'tool_calling'
-        if last_role == 'user':
-            return 'thinking'
-
-    if age_min <= 15 and last_role == 'assistant':
-        return 'speaking'
-
-    return 'idle'
-
-
-payload = {
-    'gatewayConnected': os.environ.get('GATEWAY_CONNECTED') == '1',
-    'mainState': 'error',
-    'currentTask': None,
-    'activeSessionLabel': None,
-    'activeSessionUpdatedAt': None,
-    'controlSessionKey': None,
-    'recentMessages': [],
-    'subagents': [],
-}
-
-base = pick_base()
-if not base:
-    print(json.dumps(payload, ensure_ascii=False))
-    raise SystemExit
-
-agents_root = base / 'agents'
-main_index = load_json(agents_root / 'main' / 'sessions' / 'sessions.json')
-active_key, active_entry = pick_session(main_index)
-control_key, control_entry = pick_session(main_index, 'agent:main:main')
-active_messages = read_recent_messages((active_entry or {}).get('sessionFile'), 8)
-control_messages = read_recent_messages(
-    (control_entry or active_entry or {}).get('sessionFile'),
-    MESSAGE_LIMIT if INCLUDE_MESSAGES else 0,
-)
-
-payload['mainState'] = state_from(active_entry, active_messages, payload['gatewayConnected'])
-payload['currentTask'] = latest_user_text(active_messages) or get_label(active_entry)
-payload['activeSessionLabel'] = get_label(active_entry)
-payload['activeSessionUpdatedAt'] = (active_entry or {}).get('updatedAt')
-payload['controlSessionKey'] = control_key or active_key
-payload['recentMessages'] = control_messages
-
-subagent_names = set()
-workspace_agents = base / 'workspace' / 'agents'
-if workspace_agents.exists():
-    subagent_names.update(path.stem for path in workspace_agents.glob('*.md'))
-if agents_root.exists():
-    subagent_names.update(
-        path.name for path in agents_root.iterdir() if path.is_dir() and path.name != 'main'
-    )
-
-for subagent in sorted(subagent_names):
-    sub_index = load_json(agents_root / subagent / 'sessions' / 'sessions.json')
-    _, sub_entry = pick_session(sub_index)
-    sub_messages = read_recent_messages((sub_entry or {}).get('sessionFile'), 4)
-    payload['subagents'].append(
-        {
-            'name': subagent,
-            'state': state_from(sub_entry, sub_messages, payload['gatewayConnected']),
-            'updatedAt': (sub_entry or {}).get('updatedAt'),
-            'currentTask': latest_user_text(sub_messages) or get_label(sub_entry),
-            'sessionLabel': get_label(sub_entry),
-        }
-    )
-
-print(json.dumps(payload, ensure_ascii=False))
-PY
-else
-printf '%s' '{"gatewayConnected":false,"mainState":"error","currentTask":null,"activeSessionLabel":null,"activeSessionUpdatedAt":null,"controlSessionKey":null,"recentMessages":[],"subagents":[]}'
-fi`.trim();
-  }
-
-  private buildAgentSendCommand(message: string): string {
-    const messageB64 = Buffer.from(message, 'utf8').toString('base64');
-
-    return `
-export MSG_B64='${messageB64}'
-if command -v python3 >/dev/null 2>&1 && command -v openclaw >/dev/null 2>&1; then
-python3 - <<'PY'
-import base64
-import json
-import os
-import subprocess
-
-message = base64.b64decode(os.environ['MSG_B64']).decode('utf-8')
-proc = subprocess.run(
-    [
-        'openclaw',
-        'agent',
-        '--agent',
-        'main',
-        '--message',
-        message,
-        '--json',
-        '--timeout',
-        '120',
-    ],
-    stdout=subprocess.PIPE,
-    stderr=subprocess.STDOUT,
-    text=True,
-)
-out = proc.stdout or ''
-
-start = out.find('{')
-end = out.rfind('}')
-payload = {}
-if start != -1 and end != -1 and end > start:
-    try:
-        payload = json.loads(out[start : end + 1])
-    except Exception:
-        payload = {}
-
-result = payload.get('result') if isinstance(payload.get('result'), dict) else {}
-payloads = result.get('payloads') if isinstance(result.get('payloads'), list) else []
-texts = []
-for item in payloads:
-    if not isinstance(item, dict):
-        continue
-    text = item.get('text') or item.get('message') or item.get('content')
-    if isinstance(text, str) and text.strip():
-        texts.append(text.strip())
-
-reply = '\n\n'.join(texts).strip()
-if not reply and proc.returncode == 0:
-    reply = str(payload.get('summary') or '응답 완료').strip()
-
-print(
-    json.dumps(
-        {
-            'ok': proc.returncode == 0,
-            'status': payload.get('status') or ('completed' if proc.returncode == 0 else 'failed'),
-            'reply': reply,
-            'raw': out[-4000:],
-        },
-        ensure_ascii=False,
-    )
-)
-PY
-else
-printf '%s' '{"ok":false,"status":"failed","reply":"","raw":"openclaw runtime unavailable"}'
-fi`.trim();
   }
 
   private parseUptime(stdout: string) {

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

@@ -1,115 +0,0 @@
-# 하나랑 오피스 대시보드 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

@@ -1,504 +0,0 @@
-'use client';
-
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
-import { API_URL, POLL_INTERVAL_MS } from '@/lib/config';
-import { useSocket } from '@/lib/useSocket';
-import OfficeScene, {
-  type AgentState,
-  type SisterName,
-  type SisterNode,
-  type SubAgent,
-  type SelectedAgent,
-} from '@/components/office/OfficeScene';
-import ContextPanel from '@/components/office/ContextPanel';
-import ChatWorkspace from '@/components/office/ChatWorkspace';
-import PipelinePanel from '@/components/office/PipelinePanel';
-import ServerHealthPanel, { type ServerEntry } from '@/components/office/ServerHealthPanel';
-import type { PipelineNode } from '@/components/dashboard/ActivePipeline';
-
-interface RuntimeSubagentItem {
-  name: string;
-  state: AgentState;
-  updatedAt: number | null;
-  currentTask: string | null;
-  sessionLabel: string | null;
-}
-
-interface SisterRuntimeItem {
-  name: SisterName;
-  gatewayConnected: boolean;
-  mainState: AgentState;
-  currentTask: string | null;
-  activeSessionLabel: string | null;
-  activeSessionUpdatedAt: number | null;
-  controlSessionKey: string | null;
-  recentMessages: Array<{
-    id: string;
-    role: 'user' | 'assistant' | 'tool';
-    content: string;
-    ts: string | null;
-  }>;
-  subagents: RuntimeSubagentItem[];
-}
-
-interface SisterApiItem {
-  id?: number;
-  name: SisterName;
-  status: 'online' | 'offline' | 'working' | 'unknown';
-  role?: string;
-  currentTask?: string | null;
-  lastSeen?: string | null;
-  cpu?: number;
-  memory?: { used?: number; total?: number };
-  liveState?: AgentState;
-  activeSessionLabel?: string | null;
-  gatewayConnected?: boolean;
-  subagents?: RuntimeSubagentItem[];
-}
-
-interface DashboardOpsData {
-  focusProject: {
-    name: string;
-    phase: string;
-    progress: number;
-    deployStatus: string;
-    currentSprint?: string | null;
-    ownerSister?: string | null;
-  } | null;
-  pipeline: {
-    activeTask: string;
-    focus: string;
-    reviewLoopCount: number;
-    escalationCount: number;
-    deployState: string;
-    nodes: PipelineNode[];
-  };
-  freshness: {
-    generatedAt: string;
-    activityLatestAt: string | null;
-    sistersLatestAt: string | null;
-    qaDocLatestAt: string | null;
-  };
-}
-
-const SUBAGENT_DEFS: Record<SisterName, { id: string; name: string; label: string }[]> = {
-  harang: [
-    { id: 'harang-planner', name: 'planner', label: 'planner' },
-    { id: 'harang-task-tracker', name: 'task-tracker', label: 'task-tracker' },
-    { id: 'harang-prd-writer', name: 'prd-writer', label: 'prd-writer' },
-  ],
-  narang: [
-    { id: 'narang-worker', name: 'worker', label: 'worker' },
-    { id: 'narang-db-designer', name: 'db-designer', label: 'db-designer' },
-    { id: 'narang-test-writer', name: 'test-writer', label: 'test-writer' },
-    { id: 'narang-refactorer', name: 'refactorer', label: 'refactorer' },
-  ],
-  darang: [
-    { id: 'darang-reviewer', name: 'reviewer', label: 'reviewer' },
-    { id: 'darang-code-reviewer', name: 'code-reviewer', label: 'code-reviewer' },
-    { id: 'darang-qa-tester', name: 'qa-tester', label: 'qa-tester' },
-    { id: 'darang-security-auditor', name: 'security-auditor', label: 'security-auditor' },
-    { id: 'darang-ux-reviewer', name: 'ux-reviewer', label: 'ux-reviewer' },
-  ],
-  erang: [
-    { id: 'erang-deploy-manager', name: 'deploy-manager', label: 'deploy-manager' },
-    { id: 'erang-db-manager', name: 'db-manager', label: 'db-manager' },
-    { id: 'erang-nginx-manager', name: 'nginx-manager', label: 'nginx-manager' },
-    { id: 'erang-monitoring', name: 'monitoring', label: 'monitoring' },
-    { id: 'erang-dns-manager', name: 'dns-manager', label: 'dns-manager' },
-  ],
-};
-
-const SISTER_DISPLAY: Record<SisterName, string> = {
-  harang: '하랑이',
-  narang: '나랑이',
-  darang: '다랑이',
-  erang: '이랑이',
-};
-
-const SISTER_ROLES: Record<SisterName, string> = {
-  harang: 'Planning & Orchestration',
-  narang: 'Development',
-  darang: 'QA & Review',
-  erang: 'Infra & Deploy',
-};
-
-const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
-const SUBAGENT_COUNT = Object.values(SUBAGENT_DEFS).reduce((total, defs) => total + defs.length, 0);
-
-const FALLBACK_SISTERS: SisterApiItem[] = [
-  { name: 'harang', status: 'working', role: SISTER_ROLES.harang, currentTask: 'runtime snapshot 확인 중' },
-  { name: 'narang', status: 'working', role: SISTER_ROLES.narang, currentTask: '개발 세션 상태 동기화 중' },
-  { name: 'darang', status: 'online', role: SISTER_ROLES.darang, currentTask: '검증 상태 확인 중' },
-  { name: 'erang', status: 'online', role: SISTER_ROLES.erang, currentTask: '배포 런타임 확인 중' },
-];
-
-function statusToAgentState(status: SisterApiItem['status'], hasTask: boolean): AgentState {
-  if (status === 'offline') return 'error';
-  if (status === 'working') return hasTask ? 'tool_calling' : 'thinking';
-  if (status === 'online') return hasTask ? 'speaking' : 'idle';
-  return 'idle';
-}
-
-function derivedSubagentState(parentState: AgentState, index: number): AgentState {
-  if (parentState === 'error') return 'idle';
-  if (parentState === 'tool_calling' && index === 0) return 'thinking';
-  if (parentState === 'speaking' && index <= 1) return 'thinking';
-  return 'idle';
-}
-
-function normalizeSubagentState(state?: AgentState): AgentState {
-  if (state === 'thinking' || state === 'tool_calling' || state === 'speaking' || state === 'error') {
-    return state;
-  }
-  return 'idle';
-}
-
-function mergeSisterData(
-  statuses: SisterApiItem[],
-  runtime: SisterRuntimeItem[],
-  previous: SisterApiItem[] = [],
-): SisterApiItem[] {
-  const previousMap = new Map(previous.map((item) => [item.name, item]));
-  const statusMap = new Map(statuses.map((item) => [item.name, item]));
-  const runtimeMap = new Map(runtime.map((item) => [item.name, item]));
-
-  return SISTER_ORDER.map((name) => {
-    const prev = previousMap.get(name);
-    const status = statusMap.get(name) ?? prev ?? FALLBACK_SISTERS.find((item) => item.name === name)!;
-    const live = runtimeMap.get(name);
-
-    return {
-      ...prev,
-      ...status,
-      name,
-      role: status.role ?? prev?.role ?? SISTER_ROLES[name],
-      currentTask: live?.currentTask ?? status.currentTask ?? prev?.currentTask ?? null,
-      liveState: live?.mainState ?? prev?.liveState,
-      activeSessionLabel: live?.activeSessionLabel ?? prev?.activeSessionLabel ?? null,
-      gatewayConnected: live?.gatewayConnected ?? prev?.gatewayConnected ?? false,
-      subagents: live?.subagents ?? prev?.subagents ?? [],
-    };
-  });
-}
-
-function buildSisterNodes(sisters: SisterApiItem[]): SisterNode[] {
-  return SISTER_ORDER.map((name) => {
-    const item = sisters.find((s) => s.name === name);
-    const fallbackState = statusToAgentState(item?.status ?? 'unknown', Boolean(item?.currentTask));
-    const state = item?.gatewayConnected ? item.liveState ?? fallbackState : fallbackState;
-
-    const runtimeSubagents = item?.subagents ?? [];
-    const runtimeMap = new Map(runtimeSubagents.map((sub) => [sub.name, sub]));
-
-    const subagents: SubAgent[] = SUBAGENT_DEFS[name].map((def, index) => {
-      const runtime = runtimeMap.get(def.name);
-      return {
-        id: def.id,
-        name: def.name,
-        label: def.label,
-        sister: name,
-        state: runtime ? normalizeSubagentState(runtime.state) : derivedSubagentState(state, index),
-        currentTask: runtime?.currentTask ?? null,
-        updatedAt: runtime?.updatedAt ?? null,
-        sessionLabel: runtime?.sessionLabel ?? null,
-      };
-    });
-
-    return {
-      name,
-      displayName: SISTER_DISPLAY[name],
-      role: item?.role ?? SISTER_ROLES[name],
-      state,
-      currentTask: item?.currentTask ?? null,
-      activeSessionLabel: item?.activeSessionLabel ?? null,
-      subagents,
-    };
-  });
-}
-
-function buildServerEntries(sisters: SisterApiItem[], sisterSource: 'live' | 'snapshot' | 'fallback'): ServerEntry[] {
-  const sisterEntries: ServerEntry[] = SISTER_ORDER.map((name) => {
-    const sister = sisters.find((item) => item.name === name);
-    return {
-      id: `server-${name}`,
-      label: SISTER_DISPLAY[name],
-      type: 'sister' as const,
-      status: sister?.status ?? 'unknown',
-      detail: sister?.currentTask ?? sister?.activeSessionLabel ?? null,
-      source: sister ? sisterSource : 'fallback',
-    };
-  });
-
-  const extraEntries: ServerEntry[] = [
-    { id: 'server-dev', label: 'Dev Server', type: 'dev', status: 'unknown', detail: null, source: 'fallback' },
-    { id: 'server-docker', label: 'Docker / Infra', type: 'docker', status: 'unknown', detail: null, source: 'fallback' },
-  ];
-
-  return [...sisterEntries, ...extraEntries];
-}
-
-function formatGeneratedAt(ts: string): string {
-  try {
-    return new Date(ts).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
-  } catch {
-    return ts;
-  }
-}
-
-const Shell = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
-  min-height: 0;
-`;
-
-const PageHeader = styled.div`
-  display: flex;
-  align-items: baseline;
-  gap: var(--space-lg);
-  flex-wrap: wrap;
-`;
-
-const PageTitle = styled.h1`
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--text-primary);
-  letter-spacing: -0.01em;
-`;
-
-const PageMeta = styled.div`
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-`;
-
-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' : '#777')};
-  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;
-`;
-
-export default function OfficePage() {
-  const [sisters, setSisters] = useState<SisterApiItem[]>([]);
-  const [opsData, setOpsData] = useState<DashboardOpsData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [selected, setSelected] = useState<SelectedAgent | null>(null);
-  const [chatSister, setChatSister] = useState<SisterName | null>(null);
-
-  const { connected } = useSocket<SisterApiItem>({
-    onSistersUpdate: (updated) => {
-      setSisters((prev) => mergeSisterData(updated, [], prev));
-    },
-  });
-
-  const fetchAll = useCallback(async () => {
-    const [sistersRes, opsRes, runtimeRes] = await Promise.allSettled([
-      fetch(`${API_URL}/api/sisters`).then((r) => r.json()),
-      fetch(`${API_URL}/api/dashboard/ops`).then((r) => r.json()),
-      fetch(`${API_URL}/api/sisters/runtime`).then((r) => r.json()),
-    ]);
-
-    setSisters((prev) => {
-      const base = sistersRes.status === 'fulfilled' && Array.isArray(sistersRes.value) ? sistersRes.value as SisterApiItem[] : prev;
-      const runtime = runtimeRes.status === 'fulfilled' && Array.isArray(runtimeRes.value) ? runtimeRes.value as SisterRuntimeItem[] : [];
-      return mergeSisterData(base, runtime, prev);
-    });
-
-    if (opsRes.status === 'fulfilled') {
-      setOpsData(opsRes.value as DashboardOpsData);
-    }
-  }, []);
-
-  useEffect(() => {
-    const boot = async () => {
-      try {
-        await fetchAll();
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    void boot();
-
-    // Polling fallback — only when socket is disconnected
-    // Socket handles live updates; polling is a disconnected fallback
-    return () => {};
-  }, [fetchAll]);
-
-  useEffect(() => {
-    if (connected) return; // socket is live, no polling needed
-
-    const interval = setInterval(() => {
-      void fetchAll();
-    }, POLL_INTERVAL_MS);
-
-    return () => clearInterval(interval);
-  }, [connected, fetchAll]);
-
-  const hasSisterSnapshot = sisters.length > 0;
-  const sisterDataMode: 'live' | 'snapshot' | 'fallback' = connected ? 'live' : hasSisterSnapshot ? 'snapshot' : 'fallback';
-  const effectiveSisters = hasSisterSnapshot ? sisters : FALLBACK_SISTERS;
-  const sisterNodes = useMemo(() => buildSisterNodes(effectiveSisters), [effectiveSisters]);
-  const serverEntries = useMemo(() => buildServerEntries(effectiveSisters, sisterDataMode), [effectiveSisters, sisterDataMode]);
-
-  const subagentMode: 'live' | 'fallback' = useMemo(() => {
-    return effectiveSisters.some((item) => (item.subagents?.length ?? 0) > 0) ? 'live' : 'fallback';
-  }, [effectiveSisters]);
-
-  const handleSelectSister = useCallback((name: SisterName) => {
-    setSelected({ type: 'sister', name });
-    setChatSister(null);
-  }, []);
-
-  const handleSelectSubagent = useCallback((id: string, sister: SisterName) => {
-    setSelected({ type: 'subagent', id, sister });
-    setChatSister(null);
-  }, []);
-
-  const handleOpenChat = useCallback((sisterName: SisterName) => {
-    setChatSister(sisterName);
-  }, []);
-
-  const pipeline = opsData?.pipeline ?? {
-    activeTask: 'SPRINT-016',
-    focus: 'Office runtime sync',
-    reviewLoopCount: 0,
-    escalationCount: 0,
-    deployState: '—',
-    nodes: [],
-  };
-
-  const freshness = opsData?.freshness ?? {
-    generatedAt: new Date().toISOString(),
-    activityLatestAt: null,
-    sistersLatestAt: null,
-    qaDocLatestAt: null,
-  };
-
-  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={subagentMode === 'live' ? 'live' : 'fallback'}>
-            서브에이전트: {subagentMode === 'live' ? 'live · runtime' : 'fallback'}
-          </FreshnessBadge>
-          <FreshnessBadge $type="snapshot">pipeline: snapshot</FreshnessBadge>
-        </FreshnessBar>
-      </PageHeader>
-
-      <MainArea>
-        <SceneColumn>
-          <OfficeScene
-            sisters={sisterNodes}
-            selected={selected}
-            onSelectSister={handleSelectSister}
-            onSelectSubagent={handleSelectSubagent}
-            dataMode={sisterDataMode}
-            subagentMode={subagentMode}
-          />
-
-          {chatSister && (
-            <ChatArea>
-              <ChatWorkspace initialSister={chatSister} onClose={() => setChatSister(null)} />
-            </ChatArea>
-          )}
-        </SceneColumn>
-
-        <ContextPanel
-          selected={selected}
-          sisters={sisterNodes}
-          onOpenChat={handleOpenChat}
-          onClear={() => setSelected(null)}
-        />
-      </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/app/page.tsx

@@ -273,21 +273,22 @@ const ConnectionDot = styled.span<{ $connected: boolean }>`
   flex-shrink: 0;
 `;
 
-const OperatorRow = styled.div`
+const OperatorGrid = styled.div`
-  display: flex;
+  display: grid;
-  align-items: center;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
+  gap: 10px;
 `;
 
-const OperatorText = styled.div`
+const OperatorCard = styled.div`
+  border: 1px solid var(--border-color);
+  padding: 12px;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
-  min-width: 0;
 `;
 
-const OperatorName = styled.div`
+const OperatorValue = styled.div`
-  font-size: 15px;
+  font-size: 14px;
   color: var(--text-primary);
   font-weight: 600;
 `;
@@ -1006,15 +1007,28 @@ export default function DashboardPage() {
             <LabelMeta><span>SYNC:</span>{formatSyncLabel(derived.freshness.activityLatestAt)}</LabelMeta>
           </ConnectionCard>
 
-          <OperatorRow>
+          <OperatorGrid>
-            <SisterAvatar name={derived.activeProject?.ownerSister ?? 'narang'} size={44} />
+            <OperatorCard>
-            <OperatorText>
+              <MetaLabel>focus owner</MetaLabel>
-              <OperatorName>{SISTER_META[derived.activeProject?.ownerSister ?? 'narang']?.label ?? '나랑이'}</OperatorName>
+              <OperatorValue>{derived.activeProject?.ownerSister ? (SISTER_META[derived.activeProject.ownerSister]?.label ?? derived.activeProject.ownerSister) : 'UNASSIGNED'}</OperatorValue>
-              <OperatorMeta>
+              <OperatorMeta>SNAPSHOT OWNER</OperatorMeta>
-                {SISTER_META[derived.activeProject?.ownerSister ?? 'narang']?.role ?? 'Implementation'} / SNAPSHOT OWNER
+            </OperatorCard>
-              </OperatorMeta>
+            <OperatorCard>
-            </OperatorText>
+              <MetaLabel>runtime lag</MetaLabel>
-          </OperatorRow>
+              <OperatorValue>{formatSyncLabel(derived.freshness.sistersLatestAt)}</OperatorValue>
+              <OperatorMeta>RUNTIME SNAPSHOT</OperatorMeta>
+            </OperatorCard>
+            <OperatorCard>
+              <MetaLabel>activity lag</MetaLabel>
+              <OperatorValue>{formatSyncLabel(derived.freshness.activityLatestAt)}</OperatorValue>
+              <OperatorMeta>EVENT MIRROR</OperatorMeta>
+            </OperatorCard>
+            <OperatorCard>
+              <MetaLabel>qa doc lag</MetaLabel>
+              <OperatorValue>{formatSyncLabel(derived.freshness.qaDocLatestAt)}</OperatorValue>
+              <OperatorMeta>DOC-DERIVED</OperatorMeta>
+            </OperatorCard>
+          </OperatorGrid>
 
           <QuickLinks>
             <QuickLink href="/projects">

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

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

frontend/app/projects/page.tsx

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

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

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

frontend/components/common/Sidebar.tsx

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

frontend/components/common/SisterAvatar.tsx

@@ -46,10 +46,10 @@ interface SisterAvatarProps {
 }
 
 export default function SisterAvatar({ name, size = 32, className, style }: SisterAvatarProps) {
-  const [failedFor, setFailedFor] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
   const initial = SISTER_INITIALS[name] ?? name.slice(0, 1).toUpperCase();
 
-  if (failedFor === name) {
+  if (failed) {
     return <Fallback $size={size} className={className} style={style}>{initial}</Fallback>;
   }
 
@@ -60,7 +60,7 @@ export default function SisterAvatar({ name, size = 32, className, style }: Sist
       alt={name}
       className={className}
       style={style}
-      onError={() => setFailedFor(name)}
+      onError={() => setFailed(true)}
     />
   );
 }

frontend/components/office/ChatWorkspace.tsx

@@ -1,658 +0,0 @@
-'use client';
-
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import styled, { keyframes } from 'styled-components';
-import SisterAvatar from '@/components/common/SisterAvatar';
-import { API_URL } from '@/lib/config';
-import type { SisterName, AgentState } from './OfficeScene';
-
-interface RuntimeMessage {
-  id: string;
-  role: 'user' | 'assistant' | 'tool';
-  content: string;
-  ts: string | null;
-}
-
-interface RuntimeSnapshot {
-  name: SisterName;
-  gatewayConnected: boolean;
-  mainState: AgentState;
-  currentTask: string | null;
-  activeSessionLabel: string | null;
-  recentMessages: RuntimeMessage[];
-}
-
-interface ChatMessage {
-  id: string;
-  role: 'user' | 'assistant' | 'tool';
-  content: string;
-  toolName?: string;
-  ts: string;
-}
-
-interface ChatWorkspaceProps {
-  initialSister: SisterName;
-  onClose: () => void;
-}
-
-const SISTER_DISPLAY: Record<SisterName, string> = {
-  harang: '하랑이',
-  narang: '나랑이',
-  darang: '다랑이',
-  erang: '이랑이',
-};
-
-const SISTER_ROLES: Record<SisterName, string> = {
-  harang: 'Planning & Orchestration',
-  narang: 'Development & Implementation',
-  darang: 'QA & Review',
-  erang: 'Infra & Deploy',
-};
-
-const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
-
-const fadeIn = keyframes`
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-`;
-
-const Workspace = styled.div`
-  display: flex;
-  height: 100%;
-  border: 1px solid var(--border-color);
-  background: var(--bg-surface);
-  overflow: hidden;
-
-  @media (max-width: 767px) {
-    flex-direction: column;
-  }
-`;
-
-const SisterTabs = styled.nav`
-  width: 200px;
-  flex-shrink: 0;
-  border-right: 1px solid var(--border-color);
-  display: flex;
-  flex-direction: column;
-  padding: var(--space-md) 0;
-
-  @media (max-width: 767px) {
-    width: 100%;
-    flex-direction: row;
-    padding: 0;
-    overflow-x: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--border-color);
-  }
-`;
-
-const SisterTabHeader = styled.div`
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 0 var(--space-md) var(--space-md);
-
-  @media (max-width: 767px) {
-    display: none;
-  }
-`;
-
-const SisterTab = styled.button<{ $active: boolean }>`
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-md);
-  background: ${({ $active }) => ($active ? 'rgba(255,255,255,0.04)' : 'transparent')};
-  border: none;
-  border-left: 2px solid ${({ $active }) => ($active ? 'var(--text-primary)' : 'transparent')};
-  color: ${({ $active }) => ($active ? 'var(--text-primary)' : 'var(--text-secondary)')};
-  cursor: pointer;
-  text-align: left;
-  width: 100%;
-  transition: all 0.15s;
-  font-family: inherit;
-
-  &:hover {
-    color: var(--text-primary);
-    background: rgba(255,255,255,0.03);
-  }
-
-  @media (max-width: 767px) {
-    border-left: none;
-    border-bottom: 2px solid ${({ $active }) => ($active ? 'var(--text-primary)' : 'transparent')};
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
-`;
-
-const TabMeta = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`;
-
-const TabName = styled.div`
-  font-size: 13px;
-  font-weight: 600;
-`;
-
-const TabRole = styled.div`
-  font-size: 10px;
-  color: var(--text-secondary);
-
-  @media (max-width: 767px) {
-    display: none;
-  }
-`;
-
-const MessageArea = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-`;
-
-const MessageHeader = styled.div`
-  padding: var(--space-md) var(--space-lg);
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  flex-shrink: 0;
-`;
-
-const HeaderMeta = styled.div`
-  flex: 1;
-`;
-
-const HeaderName = styled.div`
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-`;
-
-const HeaderRole = styled.div`
-  font-size: 11px;
-  color: var(--text-secondary);
-`;
-
-const HeaderBadge = styled.div<{ $ok: boolean }>`
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: ${({ $ok }) => ($ok ? '#00BFA5' : 'var(--text-secondary)')};
-  border: 1px solid currentColor;
-  padding: 2px var(--space-sm);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-`;
-
-const Timeline = styled.div`
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-lg);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-`;
-
-const MessageBubble = styled.div<{ $role: ChatMessage['role'] }>`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: ${({ $role }) => ($role === 'user' ? 'flex-end' : 'flex-start')};
-  animation: ${fadeIn} 0.2s ease;
-`;
-
-const BubbleContent = styled.div<{ $role: ChatMessage['role'] }>`
-  max-width: 75%;
-  padding: var(--space-sm) var(--space-md);
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--text-primary);
-  background: ${({ $role }) =>
-    $role === 'user'
-      ? 'rgba(255,255,255,0.06)'
-      : $role === 'tool'
-        ? 'rgba(255, 152, 0, 0.06)'
-        : 'rgba(255,255,255,0.02)'};
-  border: 1px solid ${({ $role }) =>
-    $role === 'user'
-      ? 'rgba(255,255,255,0.12)'
-      : $role === 'tool'
-        ? 'rgba(255,152,0,0.2)'
-        : 'rgba(255,255,255,0.06)'};
-  font-family: ${({ $role }) => ($role === 'tool' ? 'var(--font-mono)' : 'inherit')};
-`;
-
-const BubbleMeta = styled.div`
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-secondary);
-  opacity: 0.6;
-`;
-
-const EmptyTimeline = styled.div`
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: var(--space-md);
-  color: var(--text-secondary);
-  font-size: 13px;
-  text-align: center;
-`;
-
-const RuntimeNotice = styled.div`
-  border: 1px solid var(--border-color);
-  padding: var(--space-md);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  line-height: 1.7;
-  max-width: 320px;
-  text-align: center;
-`;
-
-const InputArea = styled.div`
-  padding: var(--space-md) var(--space-lg);
-  border-top: 1px solid var(--border-color);
-  display: flex;
-  gap: var(--space-sm);
-  align-items: flex-end;
-  flex-shrink: 0;
-`;
-
-const MessageInput = styled.textarea`
-  flex: 1;
-  background: var(--bg-input, #1a1a1a);
-  border: 1px solid var(--border-color);
-  color: var(--text-primary);
-  font-family: inherit;
-  font-size: 13px;
-  padding: var(--space-sm) var(--space-md);
-  resize: none;
-  min-height: 40px;
-  max-height: 120px;
-  line-height: 1.5;
-
-  &:focus {
-    outline: none;
-    border-color: var(--border-hover);
-  }
-
-  &::placeholder {
-    color: var(--text-secondary);
-    opacity: 0.5;
-  }
-`;
-
-const SendBtn = styled.button`
-  border: 1px solid var(--border-color);
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  padding: var(--space-sm) var(--space-md);
-  cursor: pointer;
-  font-family: var(--font-mono);
-  transition: all 0.15s;
-  white-space: nowrap;
-  align-self: flex-end;
-
-  &:hover:not(:disabled) {
-    border-color: var(--border-hover);
-    color: var(--text-primary);
-  }
-
-  &:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-`;
-
-const InputMeta = styled.div`
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-secondary);
-  opacity: 0.6;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  text-align: center;
-`;
-
-const SisterContext = styled.aside`
-  width: 220px;
-  flex-shrink: 0;
-  border-left: 1px solid var(--border-color);
-  padding: var(--space-lg);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
-  overflow-y: auto;
-
-  @media (max-width: 1199px) {
-    display: none;
-  }
-`;
-
-const ContextSection = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-`;
-
-const CtxLabel = styled.div`
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: 4px;
-`;
-
-const CtxValue = styled.div`
-  font-size: 12px;
-  color: var(--text-primary);
-  line-height: 1.5;
-`;
-
-const CtxMono = styled.div`
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text-secondary);
-`;
-
-const CloseBtn = styled.button`
-  border: 1px solid var(--border-color);
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  padding: var(--space-xs) var(--space-sm);
-  cursor: pointer;
-  font-family: var(--font-mono);
-
-  &:hover {
-    border-color: var(--border-hover);
-    color: var(--text-primary);
-  }
-`;
-
-function formatTs(ts: string): string {
-  const date = new Date(ts);
-  const diff = Date.now() - date.getTime();
-  const min = Math.floor(diff / 60000);
-  if (min < 1) return '방금';
-  if (min < 60) return `${min}분 전`;
-  const hr = Math.floor(min / 60);
-  if (hr < 24) return `${hr}시간 전`;
-  return `${Math.floor(hr / 24)}일 전`;
-}
-
-function runtimeStateLabel(state: AgentState): string {
-  if (state === 'thinking') return 'thinking';
-  if (state === 'tool_calling') return 'tool_calling';
-  if (state === 'speaking') return 'speaking';
-  if (state === 'error') return 'error';
-  return 'idle';
-}
-
-function getToken(): string {
-  if (typeof window === 'undefined') return '';
-  return localStorage.getItem('hanarang_access_token') ?? '';
-}
-
-function mergeMessages(prev: ChatMessage[], incoming: ChatMessage[]) {
-  const map = new Map<string, ChatMessage>();
-  [...prev, ...incoming].forEach((item) => {
-    map.set(item.id, item);
-  });
-  return Array.from(map.values()).sort((a, b) => new Date(a.ts).getTime() - new Date(b.ts).getTime());
-}
-
-function mapRuntimeMessages(items: RuntimeMessage[]): ChatMessage[] {
-  return items.map((item, index) => ({
-    id: item.id || `${item.role}-${item.ts ?? 'none'}-${index}`,
-    role: item.role,
-    content: item.content,
-    ts: item.ts ?? new Date().toISOString(),
-  }));
-}
-
-export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceProps) {
-  const [activeSister, setActiveSister] = useState<SisterName>(initialSister);
-  const [allMessages, setAllMessages] = useState<Partial<Record<SisterName, ChatMessage[]>>>({});
-  const [runtimeBySister, setRuntimeBySister] = useState<Partial<Record<SisterName, RuntimeSnapshot>>>({});
-  // Per-sister draft — prevents input leaking across tabs
-  const [drafts, setDrafts] = useState<Partial<Record<SisterName, string>>>({});
-  const input = drafts[activeSister] ?? '';
-  const [sending, setSending] = useState(false);
-  const timelineRef = useRef<HTMLDivElement>(null);
-
-  const messages = useMemo(() => allMessages[activeSister] ?? [], [allMessages, activeSister]);
-  const runtime = runtimeBySister[activeSister] ?? null;
-  const hasToken = Boolean(getToken());
-
-  useEffect(() => {
-    setActiveSister(initialSister);
-  }, [initialSister]);
-
-  useEffect(() => {
-    if (timelineRef.current) {
-      timelineRef.current.scrollTop = timelineRef.current.scrollHeight;
-    }
-  }, [messages]);
-
-  const setMessages = useCallback((sister: SisterName, updater: (prev: ChatMessage[]) => ChatMessage[]) => {
-    setAllMessages((prev) => ({
-      ...prev,
-      [sister]: updater(prev[sister] ?? []),
-    }));
-  }, []);
-
-  const loadRuntime = useCallback(async (sister: SisterName) => {
-    try {
-      const res = await fetch(`${API_URL}/api/sisters/${sister}/runtime`);
-      if (!res.ok) return;
-      const data = (await res.json()) as RuntimeSnapshot;
-      setRuntimeBySister((prev) => ({ ...prev, [sister]: data }));
-      const runtimeMessages = mapRuntimeMessages(data.recentMessages ?? []);
-      if (runtimeMessages.length > 0) {
-        setMessages(sister, (prev) => mergeMessages(prev, runtimeMessages));
-      }
-    } catch {
-      // ignore runtime refresh failures
-    }
-  }, [setMessages]);
-
-  useEffect(() => {
-    void loadRuntime(activeSister);
-    const interval = setInterval(() => {
-      void loadRuntime(activeSister);
-    }, 8000);
-    return () => clearInterval(interval);
-  }, [activeSister, loadRuntime]);
-
-  const handleSend = useCallback(async () => {
-    const text = input.trim();
-    if (!text || sending) return;
-
-    const token = getToken();
-    if (!token) {
-      setMessages(activeSister, (prev) => mergeMessages(prev, [{
-        id: `sys-${crypto.randomUUID()}`,
-        role: 'assistant',
-        content: '로그인이 풀린 것 같아. 다시 로그인한 뒤 시도해줘.',
-        ts: new Date().toISOString(),
-      }]));
-      return;
-    }
-
-    const userMessage: ChatMessage = {
-      id: `user-${crypto.randomUUID()}`,
-      role: 'user',
-      content: text,
-      ts: new Date().toISOString(),
-    };
-
-    setMessages(activeSister, (prev) => mergeMessages(prev, [userMessage]));
-    setDrafts((prev) => ({ ...prev, [activeSister]: '' }));
-    setSending(true);
-
-    try {
-      const res = await fetch(`${API_URL}/api/sisters/${activeSister}/chat`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({ message: text }),
-      });
-
-      const data = await res.json();
-      if (!res.ok) {
-        throw new Error(data?.message || '채팅 전송 실패');
-      }
-
-      if (data?.runtime) {
-        setRuntimeBySister((prev) => ({ ...prev, [activeSister]: data.runtime as RuntimeSnapshot }));
-      }
-
-      const reply = String(data?.reply || '').trim();
-      if (reply) {
-        setMessages(activeSister, (prev) => mergeMessages(prev, [{
-          id: `assistant-${crypto.randomUUID()}`,
-          role: 'assistant',
-          content: reply,
-          ts: new Date().toISOString(),
-        }]));
-      }
-
-      void loadRuntime(activeSister);
-    } catch (error) {
-      const message = error instanceof Error ? error.message : '채팅 전송 중 오류가 발생했어.';
-      setMessages(activeSister, (prev) => mergeMessages(prev, [{
-        id: `error-${crypto.randomUUID()}`,
-        role: 'assistant',
-        content: `전송 실패: ${message}`,
-        ts: new Date().toISOString(),
-      }]));
-    } finally {
-      setSending(false);
-    }
-  }, [activeSister, input, loadRuntime, sending, setMessages]);
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      void handleSend();
-    }
-  };
-
-  return (
-    <Workspace>
-      <SisterTabs>
-        <SisterTabHeader>direct chat</SisterTabHeader>
-        {SISTER_ORDER.map((name) => (
-          <SisterTab key={name} $active={activeSister === name} onClick={() => setActiveSister(name)}>
-            <SisterAvatar name={name} size={22} />
-            <TabMeta>
-              <TabName>{SISTER_DISPLAY[name]}</TabName>
-              <TabRole>{SISTER_ROLES[name].split(' ')[0]}</TabRole>
-            </TabMeta>
-          </SisterTab>
-        ))}
-      </SisterTabs>
-
-      <MessageArea>
-        <MessageHeader>
-          <SisterAvatar name={activeSister} size={28} />
-          <HeaderMeta>
-            <HeaderName>{SISTER_DISPLAY[activeSister]}</HeaderName>
-            <HeaderRole>{SISTER_ROLES[activeSister]}</HeaderRole>
-          </HeaderMeta>
-          <HeaderBadge $ok={Boolean(runtime?.gatewayConnected)}>
-            {runtime?.gatewayConnected ? 'Runtime 연결됨' : 'Runtime 확인 중'}
-          </HeaderBadge>
-          <CloseBtn onClick={onClose}>✕ 닫기</CloseBtn>
-        </MessageHeader>
-
-        <Timeline ref={timelineRef}>
-          {messages.length === 0 ? (
-            <EmptyTimeline>
-              <SisterAvatar name={activeSister} size={32} />
-              <div>{SISTER_DISPLAY[activeSister]}에게 메시지를 보내봐.</div>
-              <RuntimeNotice>
-                {runtime?.gatewayConnected
-                  ? '직접 채팅이 자매 runtime으로 연결돼 있어. 입력하면 바로 전달돼.'
-                  : 'runtime 상태를 확인 중이야. 연결이 느려도 메시지는 다시 시도할 수 있어.'}
-              </RuntimeNotice>
-            </EmptyTimeline>
-          ) : (
-            messages.map((msg) => (
-              <MessageBubble key={msg.id} $role={msg.role}>
-                <BubbleContent $role={msg.role}>{msg.content}</BubbleContent>
-                <BubbleMeta>{formatTs(msg.ts)}</BubbleMeta>
-              </MessageBubble>
-            ))
-          )}
-        </Timeline>
-
-        <InputMeta>
-          shift+enter = 줄바꿈 · enter = 전송 · runtime: {runtime ? runtimeStateLabel(runtime.mainState) : 'loading'}
-        </InputMeta>
-
-        <InputArea>
-          <MessageInput
-            placeholder={`${SISTER_DISPLAY[activeSister]}에게 지시해...`}
-            value={input}
-            onChange={(e) => setDrafts((prev) => ({ ...prev, [activeSister]: e.target.value }))}
-            onKeyDown={handleKeyDown}
-            rows={1}
-          />
-          <SendBtn onClick={() => void handleSend()} disabled={!input.trim() || sending || !hasToken}>
-            {sending ? '전송 중' : '전송'}
-          </SendBtn>
-        </InputArea>
-      </MessageArea>
-
-      <SisterContext>
-        <ContextSection>
-          <CtxLabel>agent</CtxLabel>
-          <CtxValue>{SISTER_DISPLAY[activeSister]}</CtxValue>
-          <CtxMono>{SISTER_ROLES[activeSister]}</CtxMono>
-        </ContextSection>
-
-        <ContextSection>
-          <CtxLabel>채팅 상태</CtxLabel>
-          <CtxValue>{runtime?.gatewayConnected ? 'Runtime 연결됨' : 'Runtime 확인 중'}</CtxValue>
-          <CtxMono>{runtime ? runtimeStateLabel(runtime.mainState) : 'loading'}</CtxMono>
-        </ContextSection>
-
-        <ContextSection>
-          <CtxLabel>data source</CtxLabel>
-          <CtxMono>
-            control: ssh → openclaw agent
-            <br />
-            activity: runtime session snapshot
-          </CtxMono>
-        </ContextSection>
-
-        <ContextSection>
-          <CtxLabel>current task</CtxLabel>
-          <CtxValue>{runtime?.currentTask ?? runtime?.activeSessionLabel ?? '작업 정보 없음'}</CtxValue>
-        </ContextSection>
-      </SisterContext>
-    </Workspace>
-  );
-}

frontend/components/office/ContextPanel.tsx

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

frontend/components/office/OfficeScene.tsx

@@ -1,496 +0,0 @@
-'use client';
-
-import React, { useCallback } from 'react';
-import styled from 'styled-components';
-import { API_URL } from '@/lib/config';
-
-export type AgentState = 'idle' | 'thinking' | 'tool_calling' | 'speaking' | 'error';
-export type SisterName = 'harang' | 'narang' | 'darang' | 'erang';
-
-export interface SubAgent {
-  id: string;
-  name: string;
-  label: string;
-  sister: SisterName;
-  state: AgentState;
-  currentTask?: string | null;
-  updatedAt?: number | null;
-  sessionLabel?: string | null;
-}
-
-export interface SisterNode {
-  name: SisterName;
-  displayName: string;
-  role: string;
-  state: AgentState;
-  currentTask: string | null;
-  activeSessionLabel?: string | null;
-  subagents: SubAgent[];
-}
-
-export type SelectedAgent =
-  | { type: 'sister'; name: SisterName }
-  | { type: 'subagent'; id: string; sister: SisterName };
-
-interface OfficeSceneProps {
-  sisters: SisterNode[];
-  selected: SelectedAgent | null;
-  onSelectSister: (name: SisterName) => void;
-  onSelectSubagent: (id: string, sister: SisterName) => void;
-  dataMode: 'live' | 'snapshot' | 'fallback';
-  subagentMode: 'live' | 'fallback';
-}
-
-const SceneWrapper = styled.div`
-  position: relative;
-  width: 100%;
-  aspect-ratio: 800 / 460;
-  max-height: 60vh;
-  border: 1px solid var(--border-color);
-  background: var(--bg-surface);
-  overflow: hidden;
-  user-select: none;
-`;
-
-const FreshnessLabel = styled.div`
-  position: absolute;
-  top: 8px;
-  right: 12px;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  pointer-events: none;
-`;
-
-const WsDot = styled.span<{ $connected: boolean }>`
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: ${({ $connected }) => ($connected ? '#00FF00' : '#666')};
-  margin-right: 5px;
-  vertical-align: middle;
-`;
-
-const VB_W = 800;
-const VB_H = 460;
-type Point = [number, number];
-
-const ZONES = {
-  harang: [5, 5, 345, 200] as const,
-  darang: [450, 5, 345, 200] as const,
-  narang: [5, 260, 345, 195] as const,
-  erang: [450, 260, 345, 195] as const,
-};
-
-const SISTER_POS: Record<SisterName, [number, number]> = {
-  harang: [75, 105],
-  darang: [725, 105],
-  narang: [75, 358],
-  erang: [725, 358],
-};
-
-const CONF = { cx: 400, cy: 232, rx: 55, ry: 30 };
-
-const SUBAGENT_POSITIONS: Record<SisterName, Point[]> = {
-  harang: [[175, 65], [270, 65], [220, 160]],
-  darang: [[460, 65], [560, 65], [660, 65], [460, 160], [560, 160]],
-  narang: [[175, 295], [270, 295], [175, 395], [270, 395]],
-  erang: [[460, 295], [555, 295], [650, 295], [460, 395], [555, 395]],
-};
-
-const SUBAGENT_TARGETS: Record<SisterName, Point[]> = {
-  harang: [[295, 112], [338, 148], [365, 190]],
-  darang: [[505, 94], [560, 112], [462, 148], [438, 188], [520, 196]],
-  narang: [[292, 332], [330, 302], [362, 276], [344, 374]],
-  erang: [[618, 322], [664, 298], [702, 286], [610, 388], [664, 380]],
-};
-
-const ZONE_COLORS: Record<SisterName, string> = {
-  harang: 'rgba(41, 121, 255, 0.06)',
-  narang: 'rgba(0, 191, 165, 0.06)',
-  darang: 'rgba(255, 64, 129, 0.06)',
-  erang: 'rgba(255, 109, 0, 0.06)',
-};
-
-const ZONE_BORDER: Record<SisterName, string> = {
-  harang: 'rgba(41, 121, 255, 0.25)',
-  narang: 'rgba(0, 191, 165, 0.25)',
-  darang: 'rgba(255, 64, 129, 0.25)',
-  erang: 'rgba(255, 109, 0, 0.25)',
-};
-
-const STATE_COLORS: Record<AgentState, string> = {
-  idle: '#444444',
-  thinking: '#2979FF',
-  tool_calling: '#FF9800',
-  speaking: '#00BFA5',
-  error: '#FF1744',
-};
-
-const STATE_PROGRESS: Record<AgentState, number> = {
-  idle: 0,
-  error: 0,
-  thinking: 0.48,
-  tool_calling: 0.88,
-  speaking: 0.66,
-};
-
-function lerpPoint(from: Point, to: Point, progress: number): Point {
-  return [
-    from[0] + (to[0] - from[0]) * progress,
-    from[1] + (to[1] - from[1]) * progress,
-  ];
-}
-
-function getSubagentPosition(sister: SisterName, index: number, state: AgentState): Point {
-  const from = SUBAGENT_POSITIONS[sister][index] ?? SUBAGENT_POSITIONS[sister][0];
-  const to = SUBAGENT_TARGETS[sister][index] ?? from;
-  return lerpPoint(from, to, STATE_PROGRESS[state]);
-}
-
-function getSubagentMotion(state: AgentState, index: number): { dx: number; dy: number; dur: string } | null {
-  const phase = index % 2 === 0 ? 1 : -1;
-
-  if (state === 'thinking') return { dx: 5 * phase, dy: -6, dur: '3.6s' };
-  if (state === 'tool_calling') return { dx: 10 * phase, dy: -14, dur: '2s' };
-  if (state === 'speaking') return { dx: 6 * phase, dy: -4, dur: '2.8s' };
-  return null;
-}
-
-function SisterCircle({
-  cx,
-  cy,
-  r,
-  state,
-  name,
-  selected,
-  onClick,
-}: {
-  cx: number;
-  cy: number;
-  r: number;
-  state: AgentState;
-  name: SisterName;
-  selected: boolean;
-  onClick: () => void;
-}) {
-  const color = STATE_COLORS[state];
-  const clipId = `avatar-clip-${name}`;
-
-  return (
-    <g
-      role="button"
-      tabIndex={0}
-      aria-label={`${name} — state: ${state}`}
-      onClick={onClick}
-      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } }}
-      style={{ cursor: 'pointer', outline: 'none' }}
-    >
-      {selected && (
-        <circle
-          cx={cx}
-          cy={cy}
-          r={r + 8}
-          fill="none"
-          stroke="var(--text-primary)"
-          strokeWidth={1}
-          strokeDasharray="4 3"
-          opacity={0.6}
-        />
-      )}
-      <circle
-        cx={cx}
-        cy={cy}
-        r={r + 4}
-        fill="none"
-        stroke={color}
-        strokeWidth={state === 'error' ? 2.5 : 1.5}
-        opacity={state === 'idle' ? 0.4 : 1}
-      >
-        {state === 'thinking' && (
-          <animate attributeName="opacity" values="0.45;1;0.45" dur="1.8s" repeatCount="indefinite" />
-        )}
-        {state === 'tool_calling' && (
-          <animate attributeName="stroke-opacity" values="1;0.2;1" dur="0.9s" repeatCount="indefinite" />
-        )}
-      </circle>
-      <circle cx={cx} cy={cy} r={r} fill="#1e1e1e" stroke={color} strokeWidth={1} />
-      <defs>
-        <clipPath id={clipId}>
-          <circle cx={cx} cy={cy} r={r - 2} />
-        </clipPath>
-      </defs>
-      <image
-        href={`${API_URL}/api/sisters/${name}/avatar`}
-        x={cx - r + 2}
-        y={cy - r + 2}
-        width={(r - 2) * 2}
-        height={(r - 2) * 2}
-        preserveAspectRatio="xMidYMid slice"
-        clipPath={`url(#${clipId})`}
-      />
-      <text
-        x={cx}
-        y={cy + r + 16}
-        textAnchor="middle"
-        fontSize={9}
-        fontFamily="var(--font-mono)"
-        fill={color}
-        style={{ textTransform: 'uppercase', letterSpacing: '0.06em', userSelect: 'none', pointerEvents: 'none' }}
-      >
-        {state}
-      </text>
-    </g>
-  );
-}
-
-function SubagentCircle({
-  cx,
-  cy,
-  r,
-  state,
-  label,
-  selected,
-  motion,
-  motionBegin,
-  onClick,
-}: {
-  cx: number;
-  cy: number;
-  r: number;
-  state: AgentState;
-  label: string;
-  selected: boolean;
-  motion: { dx: number; dy: number; dur: string } | null;
-  motionBegin: string;
-  onClick: () => void;
-}) {
-  const color = STATE_COLORS[state];
-
-  return (
-    <g
-      role="button"
-      tabIndex={0}
-      aria-label={`subagent ${label} — state: ${state}`}
-      onClick={onClick}
-      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } }}
-      style={{ cursor: 'pointer', outline: 'none' }}
-    >
-      {motion && (
-        <animateTransform
-          attributeName="transform"
-          type="translate"
-          values={`0 0; ${motion.dx} ${motion.dy}; 0 0`}
-          dur={motion.dur}
-          begin={motionBegin}
-          repeatCount="indefinite"
-        />
-      )}
-      {selected && (
-        <circle cx={cx} cy={cy} r={r + 5} fill="none" stroke="var(--text-primary)" strokeWidth={1} opacity={0.5} />
-      )}
-      <circle cx={cx} cy={cy} r={r + 2} fill="none" stroke={color} strokeWidth={1} opacity={state === 'idle' ? 0.3 : 0.8}>
-        {state === 'thinking' && (
-          <animate attributeName="opacity" values="0.35;0.95;0.35" dur="2s" repeatCount="indefinite" />
-        )}
-      </circle>
-      <circle cx={cx} cy={cy} r={r} fill="#1a1a1a" stroke={color} strokeWidth={0.8} />
-      <text
-        x={cx}
-        y={cy + 4}
-        textAnchor="middle"
-        fontSize={8}
-        fontFamily="var(--font-mono)"
-        fill={color}
-        opacity={0.9}
-        style={{ userSelect: 'none', pointerEvents: 'none' }}
-      >
-        {label.length > 8 ? `${label.slice(0, 7)}…` : label}
-      </text>
-    </g>
-  );
-}
-
-function ConnectorLine({ x1, y1, x2, y2, active }: { x1: number; y1: number; x2: number; y2: number; active: boolean }) {
-  return (
-    <line
-      x1={x1}
-      y1={y1}
-      x2={x2}
-      y2={y2}
-      stroke={active ? 'rgba(245,245,245,0.35)' : 'rgba(255,255,255,0.08)'}
-      strokeWidth={active ? 1.5 : 1}
-      strokeDasharray={active ? '6 4' : '3 4'}
-      strokeDashoffset={active ? 40 : 0}
-    >
-      {active && <animate attributeName="stroke-dashoffset" values="40;0" dur="1.4s" repeatCount="indefinite" />}
-    </line>
-  );
-}
-
-function PathConnector({ d, active }: { d: string; active: boolean }) {
-  return (
-    <path
-      d={d}
-      fill="none"
-      stroke={active ? 'rgba(245,245,245,0.3)' : 'rgba(255,255,255,0.06)'}
-      strokeWidth={active ? 1.5 : 1}
-      strokeDasharray={active ? '6 4' : '3 4'}
-      strokeDashoffset={active ? 40 : 0}
-    >
-      {active && <animate attributeName="stroke-dashoffset" values="40;0" dur="1.8s" repeatCount="indefinite" />}
-    </path>
-  );
-}
-
-const SISTER_ORDER: SisterName[] = ['harang', 'narang', 'darang', 'erang'];
-
-export default function OfficeScene({
-  sisters,
-  selected,
-  onSelectSister,
-  onSelectSubagent,
-  dataMode,
-  subagentMode,
-}: OfficeSceneProps) {
-  const getSister = useCallback(
-    (name: SisterName) => sisters.find((s) => s.name === name),
-    [sisters],
-  );
-
-  const isActive = useCallback(
-    (name: SisterName) => {
-      const sister = getSister(name);
-      return sister?.state === 'thinking' || sister?.state === 'tool_calling' || sister?.state === 'speaking';
-    },
-    [getSister],
-  );
-
-  const isSisterSelected = (name: SisterName) => selected?.type === 'sister' && selected.name === name;
-  const isSubSelected = (id: string) => selected?.type === 'subagent' && selected.id === id;
-
-  const harangActive = isActive('harang');
-  const narangActive = isActive('narang');
-  const darangActive = isActive('darang');
-  const erangActive = isActive('erang');
-
-  return (
-    <SceneWrapper>
-      <FreshnessLabel>
-        <WsDot $connected={dataMode === 'live'} />
-        {dataMode === 'live' ? 'live · ws' : dataMode === 'snapshot' ? 'snapshot · poll' : 'fallback · doc-derived'}
-        {subagentMode === 'live' ? ' · subagents: live · runtime' : ' · subagents: fallback'}
-      </FreshnessLabel>
-
-      <svg viewBox={`0 0 ${VB_W} ${VB_H}`} width="100%" height="100%" style={{ display: 'block' }}>
-        {SISTER_ORDER.map((name) => {
-          const [zx, zy, zw, zh] = ZONES[name];
-          return (
-            <rect
-              key={`zone-${name}`}
-              x={zx}
-              y={zy}
-              width={zw}
-              height={zh}
-              rx={4}
-              fill={ZONE_COLORS[name]}
-              stroke={ZONE_BORDER[name]}
-              strokeWidth={1}
-            />
-          );
-        })}
-
-        <rect x={358} y={5} width={84} height={450} rx={2} fill="#111111" stroke="rgba(255,255,255,0.04)" strokeWidth={1} />
-        <rect x={5} y={205} width={790} height={50} rx={2} fill="#111111" stroke="rgba(255,255,255,0.04)" strokeWidth={1} />
-
-        <ellipse cx={CONF.cx} cy={CONF.cy} rx={CONF.rx} ry={CONF.ry} fill="#1a1a1a" stroke="rgba(255,255,255,0.15)" strokeWidth={1} />
-        <text x={CONF.cx} y={CONF.cy + 4} textAnchor="middle" fontSize={9} fontFamily="var(--font-mono)" fill="rgba(255,255,255,0.4)">
-          회의실
-        </text>
-
-        <ConnectorLine x1={SISTER_POS.harang[0]} y1={SISTER_POS.harang[1] + 30} x2={SISTER_POS.narang[0]} y2={SISTER_POS.narang[1] - 30} active={harangActive || narangActive} />
-        <ConnectorLine x1={SISTER_POS.darang[0]} y1={SISTER_POS.darang[1] + 30} x2={SISTER_POS.erang[0]} y2={SISTER_POS.erang[1] - 30} active={darangActive || erangActive} />
-        <ConnectorLine x1={SISTER_POS.harang[0] + 30} y1={SISTER_POS.harang[1]} x2={SISTER_POS.darang[0] - 30} y2={SISTER_POS.darang[1]} active={harangActive || darangActive} />
-        <ConnectorLine x1={SISTER_POS.narang[0] + 30} y1={SISTER_POS.narang[1]} x2={SISTER_POS.erang[0] - 30} y2={SISTER_POS.erang[1]} active={narangActive || erangActive} />
-        <PathConnector d={`M${SISTER_POS.narang[0] + 20},${SISTER_POS.narang[1] - 20} Q${CONF.cx},${CONF.cy} ${SISTER_POS.darang[0] - 20},${SISTER_POS.darang[1] + 20}`} active={narangActive && darangActive} />
-
-        {([
-          ['harang', 18, 22, '하랑이 · Planning'] as const,
-          ['darang', 463, 22, '다랑이 · QA'] as const,
-          ['narang', 18, 272, '나랑이 · Dev'] as const,
-          ['erang', 463, 272, '이랑이 · Infra'] as const,
-        ] as const).map(([name, lx, ly, text]) => (
-          <text key={`label-${name}`} x={lx} y={ly} fontSize={10} fontFamily="var(--font-mono)" fill={ZONE_BORDER[name]}>
-            {text}
-          </text>
-        ))}
-
-        {SISTER_ORDER.map((name) => {
-          const sister = getSister(name);
-          const state: AgentState = sister?.state ?? 'idle';
-          const [cx, cy] = SISTER_POS[name];
-          return (
-            <SisterCircle
-              key={`sister-${name}`}
-              cx={cx}
-              cy={cy}
-              r={28}
-              state={state}
-              name={name}
-              selected={isSisterSelected(name)}
-              onClick={() => onSelectSister(name)}
-            />
-          );
-        })}
-
-        {SISTER_ORDER.map((sisterName) => {
-          const sister = getSister(sisterName);
-          const subagents = sister?.subagents ?? [];
-          return subagents.map((sub, i) => {
-            const pos = getSubagentPosition(sisterName, i, sub.state);
-            const motion = getSubagentMotion(sub.state, i);
-            return (
-              <SubagentCircle
-                key={sub.id}
-                cx={pos[0]}
-                cy={pos[1]}
-                r={14}
-                state={sub.state}
-                label={sub.name}
-                selected={isSubSelected(sub.id)}
-                motion={motion}
-                motionBegin={`${i * 0.22}s`}
-                onClick={() => onSelectSubagent(sub.id, sisterName)}
-              />
-            );
-          });
-        })}
-
-        {SISTER_ORDER.map((sisterName) => {
-          const sister = getSister(sisterName);
-          const subagents = sister?.subagents ?? [];
-          const [sx, sy] = SISTER_POS[sisterName];
-          return subagents.map((sub, i) => {
-            const pos = getSubagentPosition(sisterName, i, sub.state);
-            const active = sub.state !== 'idle' && sub.state !== 'error';
-            return (
-              <line
-                key={`conn-${sub.id}`}
-                x1={sx}
-                y1={sy}
-                x2={pos[0]}
-                y2={pos[1]}
-                stroke={active ? ZONE_BORDER[sisterName] : 'rgba(255,255,255,0.05)'}
-                strokeWidth={active ? 0.8 : 0.5}
-                strokeDasharray="2 3"
-              />
-            );
-          });
-        })}
-      </svg>
-    </SceneWrapper>
-  );
-}

frontend/components/office/PipelinePanel.tsx

@@ -1,254 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled, { css, keyframes } from 'styled-components';
-import type { PipelineNode } from '@/components/dashboard/ActivePipeline';
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-interface PipelinePanelProps {
-  activeTask: string;
-  focus: string;
-  reviewLoopCount: number;
-  escalationCount: number;
-  deployState: string;
-  nodes: PipelineNode[];
-  freshness: string;
-}
-
-// ─── Animations ──────────────────────────────────────────────────────────────
-
-const flowAnim = keyframes`
-  0%   { transform: translateX(-100%); opacity: 0; }
-  40%  { opacity: 0.8; }
-  100% { transform: translateX(100%); opacity: 0; }
-`;
-
-// ─── Styled Components ────────────────────────────────────────────────────────
-
-const Panel = styled.section`
-  border: 1px solid var(--border-color);
-  background: var(--bg-surface);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-  padding: var(--space-lg);
-`;
-
-const PanelHeader = styled.div`
-  display: flex;
-  align-items: baseline;
-  gap: var(--space-lg);
-  justify-content: space-between;
-  flex-wrap: wrap;
-`;
-
-const TitleGroup = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-
-const Eyebrow = styled.div`
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-`;
-
-const Title = styled.h3`
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text-primary);
-  letter-spacing: -0.01em;
-  margin: 0;
-`;
-
-const Focus = styled.div`
-  font-size: 11px;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  max-width: 500px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-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 ? css`${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

@@ -1,185 +0,0 @@
-'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,7 +3,6 @@
 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;
@@ -32,20 +31,38 @@ 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`, withSessionRequest());
+      const res = await fetch(`${API_URL}/api/auth/me`, {
+        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 expired → try refresh via cookie
+        // access token 만료 → refresh 시도
-        try {
+        const refreshToken = localStorage.getItem('hanarang_refresh_token');
-          const rRes = await fetch(`${API_URL}/api/auth/refresh`, withSessionRequest({ method: 'POST' }, { csrf: true }));
+        if (refreshToken) {
-          if (rRes.ok) {
+          try {
-            const d = await rRes.json();
+            const rRes = await fetch(`${API_URL}/api/auth/refresh`, {
-            setUser({ userId: 0, username: d.username, role: d.role });
+              method: 'POST',
-          }
+              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
@@ -57,11 +74,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`, withSessionRequest({
+    const res = await fetch(`${API_URL}/api/auth/login`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ username, password }),
-    }, { csrf: true }));
+    });
 
     if (!res.ok) {
       const d = await res.json();
@@ -69,23 +86,27 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     }
 
     const d = await res.json();
-    // Tokens are set as HttpOnly cookies by the server
+    localStorage.setItem('hanarang_access_token', d.accessToken);
-    setUser({ userId: 0, username: d.username, role: d.role });
+    if (d.refreshToken) {
-
+      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`, withSessionRequest());
+      const meRes = await fetch(`${API_URL}/api/auth/me`, {
+        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 — already set basic info */ }
+    } catch { /* fallback */ }
+    setUser({ userId: 0, username: d.username, role: d.role });
   };
 
-  const logout = async () => {
+  const logout = () => {
-    try {
+    localStorage.removeItem('hanarang_access_token');
-      await fetch(`${API_URL}/api/auth/logout`, withSessionRequest({ method: 'POST' }, { csrf: true }));
+    localStorage.removeItem('hanarang_refresh_token');
-    } catch { /* silent */ }
     setUser(null);
   };
 

frontend/lib/csrf.ts

@@ -1,46 +0,0 @@
-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),
-  };
-}