hanarang-dashboard/.plans/sprints/SPRINT-017.md

# SPRINT-017: `/office` 모바일 화면 전면 개편

## 목표
`/office`를 데스크톱 축소판이 아니라 **모바일 전용 운영 화면**으로 다시 정리해. 이번 Sprint의 성공 기준은 단순 반응형이 아니야. `360px`, `390px` 첫 화면에서 운영자가 바로 읽어야 할 정보가 세로 흐름으로 보이고, direct chat, pipeline, health, context가 모바일 기준으로 다시 배치되어야 해.

## 이번 Sprint의 한 줄 정의
`main`에 이미 있는 `/office` 구현을 기준으로, **새 API 없이** `frontend/app/office/page.tsx`와 `frontend/components/office/*`의 모바일 IA와 상태 표현을 다시 잠근다.

## 배경
현재 `main` 구현은 데스크톱 기준 구조가 먼저 잡혀 있어.

### 현재 구현에서 확인된 문제
1. `frontend/components/office/OfficeScene.tsx`
   - `aspect-ratio: 800 / 460` 고정 씬이라 `mobile(<768)`에서 데스크톱 축소판처럼 보인다.
2. `frontend/app/office/page.tsx`
   - 헤더 아래에 모바일 전용 summary hero가 없다.
   - `ChatArea`가 `520px`, 모바일에서 `460px` 고정 높이라 세로 흐름을 끊는다.
   - 핵심 정보가 `OfficeScene`, `ContextPanel`, 하단 패널로 흩어져 첫 viewport 우선순위가 없다.
3. `frontend/components/office/ContextPanel.tsx`
   - 선택 전에는 "에이전트를 선택하면 상세 정보가 표시됩니다"만 보여서 첫 진입 정보가 비어 있다.
4. `frontend/components/office/PipelinePanel.tsx`
   - `overflow-x: auto`와 `min-width` 카드에 기대고 있어 모바일에서 가로 스크롤이 전제된다.
5. `frontend/components/office/ChatWorkspace.tsx`
   - direct chat이 모바일 세로 흐름보다 데스크톱 3열 구조에 가깝다.
   - `JWT 없음`, `runtime 확인 중`, `empty`, `전송 실패`가 모바일에서 즉시 읽히는 구조가 아니다.

## 참고 문서
- 실행 개요: `.plans/OVERVIEW.md`
- 이전 Sprint: `.plans/sprints/SPRINT-016.md`
- 오피스 모바일 IA: `.plans/design/ui/office-dashboard-design.md`
- 오피스 direct chat 모바일 기준: `.plans/design/ui/office-chat-design.md`
- API 참고: `.plans/design/api-design.md`
- 제품 PRD: `docs/product-specs/openclaw-office-dashboard-prd.md`

## 기준 구현 경로
- `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`

## breakpoint 기준
- **360px:** 최소 지원 모바일 폭, 첫 viewport 가독성 기준
- **390px:** 기본 모바일 기준 폭
- **768px:** tablet 전환 시작점
- **1280px+:** desktop 기존 구조 유지 기준

## Sprint 범위
### 포함
- `mobile(<768)` 전용 상단 summary view-model 정의
- 첫 viewport 정보 우선순위 재설계
- compact sister status 블록 도입
- focus / health / quick action 블록 도입
- 모바일에서 office scene을 compact sister stack 또는 selectable status cards로 대체
- direct chat 모바일 1열 레이아웃 재정의
- pipeline / health 패널의 모바일 카드 흐름 재정의
- `live / snapshot / fallback` 및 `loading / empty / error / stale` 표현 통일
- `360 / 390 / 768 / 1280+` QA 기준 작성

### 제외
- 신규 백엔드 API
- WebSocket reconnect 정책 재설계
- 새 도메인 데이터 모델 추가
- 별도 모바일 앱
- 데스크톱 오피스 씬 컨셉 리뉴얼

## mobile first success criteria
### 첫 viewport 필수 정보 (`360px`, `390px`)
첫 화면 안에서 아래가 모두 보여야 해.
1. 4자매 상태 요약
2. current focus
3. health summary
4. quick actions

### 금지 사항
- 가로 스크롤
- 데스크톱 씬 축소판 유지
- 선택 전 빈 상태로 시작하는 context 구조
- 채팅 타임라인/입력창 잘림

### 유지 사항
- `live / snapshot / fallback` 의미 자체는 바꾸지 않는다
- desktop(`1280px+`)에서는 기존 scene + side panel 구조를 기능적으로 유지한다
- 기존 fetch 결과만 재조합하고 새 API는 추가하지 않는다

## 실행 계획

### T1. scope와 mobile IA 잠금
**대상 문서**
- `.plans/OVERVIEW.md`
- `.plans/sprints/SPRINT-017.md`
- `.plans/design/ui/office-dashboard-design.md`
- `.plans/design/ui/office-chat-design.md`

**done when**
- 첫 viewport 필수 정보가 문서에 명시된다
- 금지 사항과 유지 사항이 문서에 명시된다
- 실제 구현 파일 경로가 교차 참조된다

### T2. 모바일 상단 summary view-model 정의
**대상 파일**
- `frontend/app/office/page.tsx`

**작업**
- 기존 sisters / ops / server 데이터를 재조합해 모바일 summary에 필요한 값을 만든다
- 선택 전에도 빈 화면이 아니라 기본 summary 콘텐츠가 먼저 보이게 한다

**done when**
- sister status 집계가 계산된다
- current focus가 상단에서 바로 보인다
- health summary와 quick action 대상이 함께 계산된다

### T3. `/office` 레이아웃을 mobile-first 세로 스택으로 재배치
**대상 파일**
- `frontend/app/office/page.tsx`

**작업**
- 모바일에서는 `summary hero → compact sister status → focus/health/action block → panel sections` 순서로 재구성한다
- desktop(`1280px+`)에서만 기존 scene + context + bottom panels 구조를 유지한다

**done when**
- `360px`, `390px` 첫 viewport에서 핵심 정보 4종이 읽힌다
- 페이지 전체에 가로 스크롤이 없다
- desktop 구조가 기능적으로 유지된다

### T4. scene / context 모바일 대체
**대상 파일**
- `frontend/components/office/OfficeScene.tsx`
- `frontend/components/office/ContextPanel.tsx`

**작업**
- 모바일에서는 `800x460` 씬을 그대로 축소하지 않는다
- compact sister stack 또는 selectable status cards로 바꾼다
- context는 별도 우측 패널이 아니라 인라인 상세, accordion, sheet 중 하나로 흡수한다

**done when**
- 선택 없이도 기본 context가 보인다
- sister 선택과 상세 확인이 세로 흐름 안에서 끝난다
- 모바일에서 scene은 상징이 아니라 정보 전달 수단이 된다

### T5. direct chat 모바일 1열 재정렬
**대상 파일**
- `frontend/components/office/ChatWorkspace.tsx`

**작업**
- 자매 전환, runtime badge, 타임라인, composer, 보조 상태를 한 컬럼 흐름으로 재배치한다
- 고정 높이 의존을 줄인다
- `JWT 없음`, `empty`, `전송 실패`, `runtime 확인 중` 상태를 상단 또는 입력 근처에서 즉시 읽히게 한다

**done when**
- `360px`, `390px`에서 메시지, 입력창, 상태 라벨이 겹치지 않는다
- send disabled 이유가 숨겨지지 않는다
- `user / assistant / tool` 메시지 구분이 유지된다

### T6. pipeline / health 모바일 카드화
**대상 파일**
- `frontend/components/office/PipelinePanel.tsx`
- `frontend/components/office/ServerHealthPanel.tsx`

**작업**
- pipeline은 가로 노드열 대신 세로 단계 카드로 재배치한다
- health는 summary 우선, 상세는 확장 또는 후순위 카드로 정리한다

**done when**
- 모바일에서 가로 스크롤이 없다
- active task, focus, review loop, deploy state가 1~2스크린 안에 파악된다
- online count와 source badge가 유지된다

### T7. 상태 라벨 통일
**대상 파일**
- `frontend/app/office/page.tsx`
- `frontend/components/office/OfficeScene.tsx`
- `frontend/components/office/ChatWorkspace.tsx`
- `frontend/components/office/PipelinePanel.tsx`
- `frontend/components/office/ServerHealthPanel.tsx`

**작업**
- `live / snapshot / fallback` 라벨을 모바일 기준으로 짧게 통일한다
- `loading / empty / error / stale` 표현을 패널 간 같은 톤으로 맞춘다

**done when**
- source 의미가 첫 화면과 각 패널에서 같은 단어로 보인다
- `empty`와 `error`가 다른 문구로 표현된다
- `fallback` 의미가 사라지지 않는다

### T8. breakpoint QA
**산출물**
- `.plans/qa/SPRINT-017-review-1.md` 이상

**작업**
- `360 / 390 / 768 / 1280+` 실브라우저 체크
- 첫 viewport 정보 충족 여부와 horizontal scroll 부재 확인

**done when**
- breakpoint별 결과가 분리 기록된다
- blocker / warning / follow-up이 분리된다
- direct chat, pipeline, health, context 재배치 검증이 남는다

## 완료 기준
- `360px`, `390px` 첫 화면에서 4자매 상태, current focus, health summary, quick actions를 모두 읽을 수 있다
- `mobile(<768)`에서 데스크톱 축소판이 사라진다
- `ContextPanel` 선택 의존 구조가 모바일 기본 흐름 안으로 흡수된다
- `PipelinePanel`과 `ServerHealthPanel`이 가로 스크롤 없이 읽힌다
- `ChatWorkspace`가 모바일 direct chat로 동작하고, `JWT 없음 / empty / error / runtime 확인 중` 상태가 즉시 읽힌다
- `live / snapshot / fallback` 의미가 유지된 채 문구가 통일된다

## 핸드오프 메모
- 하랑이는 scope와 우선순위를 잠근다
- 나랑이는 `page.tsx`와 `office/*` 모바일 IA를 구현한다
- 다랑이는 `360 / 390 / 768 / 1280+` 기준으로 실브라우저 QA를 남긴다
- 이번 Sprint는 "안정화 전체"가 아니라 **모바일 운영 화면 재구성**까지로 좁게 끝낸다