# 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/`에 정리됨