docs: plan sprint-016 office dashboard

.plans/OVERVIEW.md

@@ -16,15 +16,14 @@
 - 장기 문서: `docs/`
 
 ## 활성 작업
-- **SPRINT-015**: Master Dashboard v3 정보 구조 리디자인
-- **HOTFIX-006**: 대시보드 문구 절제 + 실시간성 정합성 보정
+- **SPRINT-016**: 4자매 Isometric Office Dashboard 재기획
 
 ## 이번 Sprint 핵심 요구사항
-1. 메인 대시보드를 4자매 운영 관제의 대표 화면으로 재정의
-2. 현행 미니멀 터미널 UI를 유지한 채 레퍼런스의 강한 정보 구조를 흡수
-3. 상단 global status bar / 4자매 상태 카드 / `ACTIVE PIPELINE` 중심 구조 도입
-4. `ACTIVITY FEED`, `SPRINT METRICS`, `INFRASTRUCTURE OVERVIEW`, `MISTAKE LOG & HARNESS`를 운영 문맥으로 재배치
-5. 데스크톱 우선 설계 후 모바일 세로 흐름까지 함께 정리
+1. 4자매와 17개 서브에이전트, 총 21개 에이전트를 오피스 은유로 재설계
+2. 4자매 독립 Gateway WebSocket 기준 실시간 상태 모델 정리
+3. 고정 좌석 4자매 + 동적 이동 서브에이전트 + 회의실/연결선 구조 정의
+4. direct chat / workflow panel / server health를 오피스 화면과 통합
+5. PRD와 `.plans/` 구조를 새 제품 방향 기준으로 정리
 
 ## 이행 전략
 - 코드에서는 구 구조와 신 구조를 일정 기간 동시 지원
@@ -35,8 +34,6 @@
 ## 문서 맵
 - 구조 기준: `../ARCHITECTURE.md`
 - 디자인 인덱스: `./design/index.md`
-- Sprint 계획: `./sprints/SPRINT-015.md`
-- Sprint handoff: `./sprints/SPRINT-015-NARANG-HANDOFF.md`
-- Hotfix 계획: `./hotfix/HOTFIX-006.md`
-- Hotfix handoff: `./hotfix/HOTFIX-006-NARANG-HANDOFF.md`
+- Sprint 계획: `./sprints/SPRINT-016.md`
+- PRD: `../docs/product-specs/openclaw-office-dashboard-prd.md`
 - 배포 플로우: `./deploy/main-release-flow.md`

.plans/design/index.md

@@ -8,6 +8,8 @@
 
 ## 페이지별 UI
 - `ui/dashboard-design.md`
+- `ui/office-dashboard-design.md`
+- `ui/office-chat-design.md`
 - `ui/projects-page-design.md`
 - `ui/project-detail-design.md`
 - `ui/sister-detail-design.md`
@@ -19,8 +21,8 @@
 ## 레퍼런스
 - `references/07-master-dashboard-v3-reference.md`
 
-## Sprint 015에서 반드시 반영할 화면
-- 대시보드 메인: Master Dashboard v3 구조 반영
-- 핵심 섹션: Global Status Bar / 4자매 상태 카드 / `ACTIVE PIPELINE`
-- 운영 패널: `ACTIVITY FEED`, `SPRINT METRICS`, `INFRASTRUCTURE OVERVIEW`, `MISTAKE LOG & HARNESS`
-- 모바일: 데스크톱 구조를 억지로 축소하지 말고 세로 읽기 흐름으로 재배열
+## Sprint 016에서 반드시 반영할 화면
+- 오피스 메인: 4자매 고정 좌석 + 서브에이전트 동적 이동
+- 오피스 채팅: 자매 선택 direct chat + 현재 상태 결합
+- 운영 패널: active workflow / sprint / review loop / deploy gate / server health
+- 모바일: 오피스 씬 단순화 + 세로 흐름 재배치

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

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

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

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

.plans/sprints/SPRINT-016.md

@@ -0,0 +1,218 @@
+# SPRINT-016: 4자매 Isometric Office Dashboard 재기획
+
+## 목표
+기존 하나랑 대시보드를 `운영 패널 중심 UI`에서 한 단계 확장해, 4자매 메인 에이전트와 17개 서브에이전트가 실제로 협업하는 흐름을 **2D 등축 투영 오피스**로 시각화하는 차세대 관제 화면으로 재기획한다.
+
+핵심은 이거야.
+- 4자매의 고정 좌석과 역할이 한눈에 보여야 해
+- 서브에이전트가 어떤 워크플로우 안에서 움직이는지 보여야 해
+- 단순 예쁜 씬이 아니라 실시간 상태/협업/채팅/서버 헬스를 같이 판단할 수 있어야 해
+- OpenClaw Gateway WebSocket을 기준으로 실제 상태를 반영해야 해
+
+## 참고 레퍼런스
+- 참고 프로젝트: `https://github.com/WW-AI-Lab/openclaw-office`
+- 채택 포인트:
+  - 2D 등축 투영 오피스
+  - 고정 좌석 + 동적 이동
+  - 상태 애니메이션 / 연결선 / 회의실 은유
+  - Chat 작업공간과 관리 패널 결합
+- 그대로 복제하지 않고, 하나랑 4자매 구조와 Lobster/Discord handoff 흐름에 맞게 번역한다.
+
+## 운영 구조
+### 메인 에이전트 (고정 데스크 / 독립 OpenClaw 인스턴스)
+- 하랑이 (Planning)
+- 나랑이 (Dev)
+- 다랑이 (QA)
+- 이랑이 (Infra)
+
+### 서브에이전트
+- 하랑이: `planner`, `task-tracker`, `prd-writer`
+- 나랑이: `worker`, `db-designer`, `test-writer`, `refactorer`
+- 다랑이: `reviewer`, `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/`에 정리됨

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

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