docs: sharpen sprint 017 office mobile plan

.plans/OVERVIEW.md

@@ -29,22 +29,54 @@
 - 장기 문서: `docs/`
 
 ## 현재 상태
-- **SPRINT-016**: `/office` 화면과 핵심 컴포넌트가 `main`에 반영됨
-- **다음 활성 작업**: **SPRINT-017** 오피스 대시보드 운영 안정화와 모바일 완성
+- **SPRINT-016**: `/office` 기본 화면과 핵심 컴포넌트가 `main`에 반영됨
+- **다음 활성 작업**: **SPRINT-017** `/office` 모바일 화면 전면 개편
 
-## SPRINT-017 핵심 요구사항
-1. `/office` 화면을 Desktop, Tablet, Mobile에서 같은 운영 의미로 읽히게 만든다
-2. `live / snapshot / fallback` 상태 구분을 UI와 API 문서에서 같은 규칙으로 고정한다
-3. direct chat, pipeline, server health 패널의 실패/빈 상태/권한 상태를 문서화하고 정리한다
-4. WebSocket + polling reconciliation 규칙을 운영 기준으로 확정한다
-5. QA와 deploy preflight가 재현 가능한 체크리스트로 이어지게 만든다
+## SPRINT-017 active scope
+이번 Sprint는 안정화 전반이 아니라 **`/office` 모바일 정보 구조 재설계**에만 집중해.
+
+### 이번에 반드시 해결할 것
+1. `360px`, `390px` 첫 viewport에서 아래 4가지를 한 번에 읽히게 만든다.
+   - 4자매 상태
+   - current focus
+   - health summary
+   - quick actions
+2. `mobile(<768)`에서는 데스크톱 씬 축소판을 금지하고, 모바일 전용 세로 흐름 IA로 바꾼다.
+3. `PipelinePanel`과 `ServerHealthPanel`을 가로 스크롤 없이 읽히는 카드 흐름으로 바꾼다.
+4. `ChatWorkspace`를 모바일 direct chat 기준으로 다시 정리하고, `JWT 없음 / empty / error / runtime 확인 중` 상태를 즉시 읽히게 만든다.
+5. `live / snapshot / fallback` 의미는 유지하되, 모바일에서 더 짧고 일관된 라벨로 통일한다.
+
+### 이번에 하지 않을 것
+- 새로운 백엔드 API 추가
+- WebSocket 프로토콜 재설계
+- 별도 모바일 앱 설계
+- 3D/고해상도 오피스 씬 확장
+- 데스크톱 전체 IA 재작성
+
+## 현재 main 구현에서 확인된 모바일 문제
+- `frontend/components/office/OfficeScene.tsx`
+  - `aspect-ratio: 800 / 460` 고정 씬이라 모바일에서 데스크톱 축소판처럼 보임
+- `frontend/app/office/page.tsx`
+  - 모바일 전용 summary hero가 없고, `ChatArea`가 `460px` 고정 높이에 의존함
+  - 선택 전에는 `ContextPanel`과 chat이 핵심 정보 대신 빈 상태에 가까움
+- `frontend/components/office/ContextPanel.tsx`
+  - 선택 의존 구조라 첫 진입 시 상세 정보가 비어 있음
+- `frontend/components/office/PipelinePanel.tsx`
+  - `overflow-x: auto` 기반이라 모바일에서 가로 스크롤 전제가 생김
+- `frontend/components/office/ChatWorkspace.tsx`
+  - 모바일에서 direct chat 맥락이 탭, 타임라인, composer, 상태 패널로 분산되고 보조 정보가 숨겨짐
+
+## breakpoint 기준
+- **Mobile compact:** `360px`
+- **Mobile default:** `390px`
+- **Tablet:** `768px`
+- **Desktop:** `1280px+`
 
 ## 이행 전략
-- 코드에서는 이미 반영된 `/office` 구현을 기준으로 안정화 Sprint를 잡는다
-- 문서는 실제 `main` 구현 경로를 기준으로만 갱신한다
-- 신규 QA 문서는 `.plans/qa/` 기준
-- 신규 Hotfix 문서는 `.plans/hotfix/` 기준
-- SPRINT-017 문서는 SPRINT-016의 비전 문서를 덮어쓰지 않고, 운영 안정화 기준을 덧붙이는 방식으로 간다
+- 문서는 실제 `main` 구현 경로를 근거로만 갱신한다
+- SPRINT-017은 `mobile-first IA`와 `상태 라벨 통일`까지만 잠근다
+- 구현 작업은 `frontend/app/office/page.tsx`와 `frontend/components/office/*` 범위 안에서 끝내는 걸 기본으로 한다
+- QA는 `360 / 390 / 768 / 1280+` 실브라우저 확인을 기준으로 남긴다
 
 ## 문서 맵
 - 구조 기준: `../ARCHITECTURE.md`
@@ -52,13 +84,14 @@
 - 디자인 인덱스: `./design/index.md`
 - Sprint 016 비전: `./sprints/SPRINT-016.md`
 - Sprint 017 실행 계획: `./sprints/SPRINT-017.md`
-- API / 실시간 모델: `./design/api-design.md`
-- 오피스 씬 UI 기준: `./design/ui/office-dashboard-design.md`
-- 오피스 채팅 UI 기준: `./design/ui/office-chat-design.md`
+- 오피스 모바일 IA: `./design/ui/office-dashboard-design.md`
+- 오피스 direct chat 모바일 기준: `./design/ui/office-chat-design.md`
+- API / 실시간 모델 참고: `./design/api-design.md`
 - 배포 플로우: `./deploy/main-release-flow.md`
 
 ## 교차 참조 규칙
-- Sprint 문서는 반드시 관련 design 문서를 링크한다
-- design 문서는 실제 Git 구현 경로를 함께 적는다
-- QA / deploy 문서는 대상 Sprint 문서와 구현 commit을 함께 남긴다
+- Sprint 문서는 관련 design 문서를 반드시 링크한다
+- design 문서는 실제 Git 구현 경로와 breakpoint를 같이 적는다
+- QA 문서는 `360 / 390 / 768 / 1280+` 결과를 나눠 기록한다
+- `live / snapshot / fallback` 용어는 Sprint 문서와 UI 문서에서 동일하게 쓴다
 - 여기까지가 SPRINT-017 기준 scope야.

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

@@ -1,30 +1,150 @@
-# 오피스 채팅 워크스페이스 — Sprint 016
+# 오피스 direct chat UI 기준 — SPRINT-017 모바일 개편
 
-## 목적
-자기야가 4자매 중 한 명을 선택해 직접 대화하고, 현재 작업 맥락과 tool 상태를 함께 보는 운영 채팅 인터페이스.
+## 문서 목적
+`ChatWorkspace.tsx`를 모바일 direct chat 기준으로 다시 정리하기 위한 문서야. 기준 Sprint는 `.plans/sprints/SPRINT-017.md`이고, 메인 IA와 first viewport 원칙은 `.plans/design/ui/office-dashboard-design.md`를 따른다.
 
-## 구조
-### 좌측
-- 자매 선택 탭
-- 최근 대화 상대
-- unread / active 상태
+## 기준 구현 파일
+- `frontend/components/office/ChatWorkspace.tsx`
+- `frontend/app/office/page.tsx`
+- 연관 문서: `.plans/design/ui/office-dashboard-design.md`
 
-### 중앙
-- 메시지 타임라인
-- streaming 응답
-- tool call 상태 삽입
-- retry / stop / resend 액션
+## breakpoint 기준
+- `360px`: minimum mobile compact
+- `390px`: primary mobile baseline
+- `768px`: tablet transition
+- `1280px+`: desktop baseline
 
-### 우측
-- 선택 자매 상태
-- current workflow
-- 최근 handoff
-- 관련 서브에이전트
+## 현재 main 구현에서 확인된 문제
+- `page.tsx`에서 chat은 `ChatArea` 고정 높이(`520px`, 모바일 `460px`) 안에 들어가 세로 흐름을 끊는다.
+- `ChatWorkspace.tsx`는 모바일에서도 데스크톱 구조의 흔적이 강하다.
+  - 자매 탭, 메시지, 보조 컨텍스트가 분리되어 있다.
+  - `SisterContext`는 `1199px` 미만에서 숨겨져 모바일 보조 정보가 사라진다.
+  - `SendBtn`은 토큰이 없으면 disabled라서, `JWT 없음` 이유를 화면에서 놓치기 쉽다.
+- empty 상태 문구는 있지만, `JWT 없음 / error / runtime 확인 중`이 같은 강도로 정리되어 있지 않다.
 
-## UX 규칙
-- 채팅은 메신저가 아니라 운영 명령 패널처럼 보여야 함
-- 현재 자매 상태와 대화가 분리되지 않아야 함
-- tool calling / speaking 상태는 대화 흐름 안에서 보여야 함
+## 모바일 direct chat 원칙
+1. **한 컬럼 흐름**
+   - mobile(` <768`)에서는 탭 → 상태 → 타임라인 → composer → 보조 정보 순서로 한 컬럼으로 간다.
+2. **전송 가능 여부를 숨기지 않기**
+   - `JWT 없음`이면 입력 근처에서 바로 이유를 보여준다.
+3. **상태는 상단에 짧게**
+   - runtime/source 상태는 header 또는 composer 상단에서 한 번에 읽히게 한다.
+4. **메시지가 우선**
+   - 보조 컨텍스트보다 타임라인과 입력창이 우선이다.
+5. **고정 높이 최소화**
+   - 460px 박스 안에 억지로 채우지 않는다.
 
-## 모바일
-- 자매 탭 → 메시지 → 상태 패널 순으로 세로 전환
+## mobile layout
+모바일 기본 순서는 아래야.
+
+### 1. sister switcher
+- 4자매 전환을 상단 compact tab 또는 segmented control로 둔다
+- 이름과 active 상태만 짧게 보여준다
+- role 전체 문구는 모바일에서 숨기거나 축약한다
+
+### 2. runtime / source badge row
+상단 배지 영역에서 아래를 보여준다.
+- runtime 상태: `연결됨`, `확인 중`, `stale`, `error`
+- source badge: `live`, `snapshot`, `fallback`
+- 필요 시 현재 자매 상태(`thinking`, `tool_calling`, `speaking`, `idle`)
+
+### 3. timeline
+- 메시지 타임라인은 화면에서 가장 큰 비중을 차지한다
+- `user / assistant / tool` 구분은 유지한다
+- tool 메시지는 mono 또는 강조 배경 유지
+- 버블 최대 폭은 모바일에서 너무 좁아지지 않게 조정한다
+
+### 4. composer
+- 입력창과 전송 버튼은 타임라인 바로 아래
+- `Enter = 전송`, `Shift+Enter = 줄바꿈` 힌트는 짧게 유지
+- 전송 불가 상태면 버튼만 막지 말고 이유를 붙인다
+
+### 5. support state block
+모바일에서는 숨기지 말고 composer 아래 또는 접이식 블록으로 둔다.
+- current task
+- active session label
+- data source 설명 한 줄
+
+## 상태 배지 규칙
+### source badge
+- `live`: runtime 연결 또는 최신 상태 반영 중
+- `snapshot`: 마지막 조회 스냅샷 표시 중
+- `fallback`: 기본값 또는 보조 데이터 기준
+
+### runtime badge
+- `연결됨`: gatewayConnected = true
+- `확인 중`: 아직 runtime snapshot 수신 전
+- `stale`: 최근 업데이트가 늦음
+- `오류`: 전송 또는 조회 실패
+
+### 배지 위치
+- header 오른쪽 또는 바로 아래 1줄
+- 모바일에서는 긴 설명 대신 짧은 라벨 + 보조 문구 1개만 둔다
+
+## empty / error / JWT 없음 UX
+### empty
+조건:
+- 메시지 없음
+- 최근 runtime 메시지도 없음
+
+표현:
+- "아직 대화가 없어"
+- 바로 보낼 수 있는 예시 액션 1개 또는 placeholder
+- runtime 상태 보조 문구
+
+### JWT 없음
+조건:
+- `localStorage` 토큰 없음
+- 또는 인증이 풀려 전송 불가
+
+표현:
+- 입력 근처에 즉시 보이는 경고 문구
+- 예: `로그인이 풀려서 지금은 전송할 수 없어. 다시 로그인해.`
+- 전송 버튼 disabled만 두고 끝내지 않는다
+
+### 전송 실패
+조건:
+- `/api/sisters/:name/chat` 실패
+
+표현:
+- 타임라인 내 실패 메시지 유지
+- composer 근처에 `다시 시도` 또는 실패 이유 보조 문구
+- 실패와 empty를 같은 문구로 합치지 않는다
+
+### runtime 확인 중
+조건:
+- runtime snapshot 미수신 또는 gateway 미연결
+
+표현:
+- header 배지 또는 상태 줄에 표시
+- 메시지 전송 가능 여부와 별개인지 함께 설명
+
+## 메시지 규칙
+- `user`: 우측 또는 구분되는 배경
+- `assistant`: 기본 응답 버블
+- `tool`: mono 스타일과 별도 톤 유지
+- timestamp는 보조 정보로만 노출
+- 모바일에서 버블 폭이 지나치게 좁아 읽기 어렵지 않게 한다
+
+## mobile에서 숨기면 안 되는 정보
+- active sister
+- runtime/source 상태
+- current task 또는 active session 중 하나
+- JWT 없음 / 전송 실패 이유
+
+## desktop / tablet 유지 규칙
+### desktop (`1280px+`)
+- 현재 3열 느낌을 유지해도 돼
+- 다만 source/runtime 라벨과 상태 문구는 모바일 기준과 통일해
+
+### tablet (`768px`)
+- 좌측 자매 전환 + 중앙 타임라인 구조 유지 가능
+- 우측 보조 패널이 사라져도 핵심 상태는 상단에서 읽혀야 해
+
+## QA 체크 포인트
+- `360px`, `390px`에서 탭, 타임라인, 입력창이 겹치지 않는지
+- 입력창이 키보드 노출 시 잘리지 않는지
+- `JWT 없음` 상태가 버튼 disabled 외에 문구로도 보이는지
+- `empty`, `runtime 확인 중`, `전송 실패`가 서로 다른 문구로 보이는지
+- `user / assistant / tool` 구분이 모바일에서도 유지되는지
+- source badge와 runtime badge가 다른 의미로 명확히 읽히는지

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

@@ -1,63 +1,207 @@
-# 오피스 대시보드 메인 (`/office` 또는 `/`) — Sprint 016
+# 오피스 대시보드 UI 기준 — SPRINT-017 모바일 개편
 
-## 목적
-4자매와 서브에이전트 협업을 `고정 좌석 + 동적 이동 + 운영 패널` 구조로 보여주는 대표 화면.
+## 문서 목적
+`/office` 메인 화면의 모바일 IA와 우선순위를 잠그는 문서야. 기준 Sprint는 `.plans/sprints/SPRINT-017.md`이고, active scope는 `.plans/OVERVIEW.md`를 따른다.
 
-## 핵심 은유
-- 메인 자매 = 고정 좌석
-- 서브에이전트 = 이동 가능한 팀원
-- 회의실 = 협업/리뷰/핸드오프 문맥
-- 인프라 존 = 배포/서버/헬스
-- 연결선 = handoff / workflow transition
+## 기준 구현 파일
+- `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`
+- 관련 chat 문서: `.plans/design/ui/office-chat-design.md`
 
-## 전체 레이아웃
-### 1. Office Scene
-화면 중심. 가장 큰 영역.
+## breakpoint 기준
+- `360px`: minimum mobile compact
+- `390px`: primary mobile baseline
+- `768px`: tablet transition
+- `1280px+`: desktop baseline
 
-#### 고정 좌석
-- 하랑이: 좌상단 또는 상단 중앙
-- 나랑이: 좌하단 또는 좌측 작업 구역
-- 다랑이: 우상단 또는 리뷰 구역
-- 이랑이: 우하단 또는 인프라 구역
+## 현재 main 구현에서 바꿔야 하는 점
+- `OfficeScene.tsx`는 `800 / 460` 비율 SVG 씬을 전제로 해서 모바일에서 정보보다 축소 그림이 먼저 보인다.
+- `page.tsx`는 모바일 전용 상단 summary가 없어서 첫 화면에서 핵심 운영 정보가 바로 안 잡힌다.
+- `ContextPanel.tsx`는 선택 전 빈 상태라 모바일 첫 진입에 불리하다.
+- `PipelinePanel.tsx`는 `overflow-x: auto`가 들어가 있어 모바일에서 읽기보다 옆으로 밀게 된다.
+- `ServerHealthPanel.tsx`는 카드 그리드는 있지만 상단 health summary 우선순위가 없다.
 
-#### 서브에이전트 배치
-- 기본은 자기 자매 주변 대기
-- active workflow 시 작업석/회의실/인프라 존으로 이동
-- 상태에 따라 아이콘/색/테두리/말풍선 변화
+## 모바일 핵심 원칙
+1. **데스크톱 축소판 금지**
+   - 모바일은 desktop scene을 줄이는 방식이 아니라 모바일 전용 정보 구조를 쓴다.
+2. **첫 viewport 우선**
+   - `360px`, `390px` 첫 화면에서 운영자가 바로 판단할 정보만 먼저 보여준다.
+3. **선택 전에도 정보가 보이게**
+   - 자매를 누르기 전에도 상태, focus, health, action이 읽혀야 한다.
+4. **가로 스크롤 금지**
+   - mobile에서는 모든 핵심 블록이 세로 흐름 안에서 끝나야 한다.
+5. **상태 의미 유지**
+   - `live / snapshot / fallback`은 유지하되, 짧고 일관된 라벨로 통일한다.
 
-### 2. Right Context Panel
-- 선택 에이전트 detail
-- 현재 세션/상태
-- 최근 이벤트
+## mobile IA
+모바일(` <768`) 기본 순서는 아래로 고정해.
+
+### 1. summary hero
+가장 위. 첫 진입 핵심 문장 1개와 source badge 1개를 보여준다.
+
+**포함 정보**
+- 현재 focus project 또는 active task
+- data source badge (`live`, `snapshot`, `fallback`)
+- 보조 문구 한 줄
+
+**하지 않을 것**
+- 긴 설명문
+- 데스크톱용 메타 정보 여러 줄
+
+### 2. compact sister status
+4자매 상태를 2x2 또는 1열 compact card로 보여준다.
+
+**각 카드 최소 정보**
+- 자매 이름
+- 상태색과 상태 라벨
+- current task 또는 active session 한 줄
+- runtime/source 힌트 한 줄
+
+**행동**
+- 탭 또는 카드 선택 가능
+- 선택 시 인라인 상세가 펼쳐져도 첫 카드 밀도를 깨지 않게 유지
+
+### 3. focus / health / quick action block
+첫 viewport 안에 반드시 들어와야 하는 운영 블록이야.
+
+**focus block**
+- current focus
+- sprint / deploy state 중 하나의 핵심 값
+
+**health block**
+- online count
+- 문제 있는 sister/server 요약
+- source badge
+
+**quick action block**
 - direct chat 진입
+- 상세 보기 또는 관련 패널 점프
 
-### 3. Bottom Ops Panel
-- current sprint
-- active workflow
-- review loop
-- deploy gate
-- server health summary
+### 4. panel sections
+첫 viewport 이후 순차 노출.
 
-## 상태 표현
-- `idle`: 조용한 점등
-- `thinking`: 약한 pulse
-- `tool_calling`: 도구 아이콘/점멸
-- `speaking`: 말풍선 또는 stream 표시
-- `error`: 적색 경고
+모바일 추천 순서:
+1. direct chat
+2. pipeline
+3. health detail
+4. context detail
 
-## 연결 규칙
-- 자매 간 핸드오프는 굵은 주 연결선
-- 서브에이전트 내부 협업은 얇은 보조선
-- review loop는 다랑이 회의실 중심으로 표시
-- deploy path는 이랑이 인프라 존으로 흐름 표시
+이 순서는 "지금 말 걸기 → 지금 뭐가 막혔는지 보기 → 상세 맥락 보기" 흐름을 따른다.
 
-## UX 규칙
-- 중심은 언제나 4자매
-- 21개 에이전트를 다 보여도 난잡하면 안 됨
-- 선택 전에도 전체 상태는 읽혀야 함
-- 선택 후에만 상세 정보 밀도 증가
+## first viewport priority
+`360px`, `390px`에서 아래 4개가 모두 한 번에 보여야 해.
+1. 4자매 상태
+2. current focus
+3. health summary
+4. quick actions
 
-## 모바일
-- 오피스 씬 단순화
-- 자매별 클러스터 카드 + 축소 맵 우선
-- 상세는 하단 시트 또는 탭으로 분리
+### 우선순위 이유
+- 자매 상태가 먼저 안 보이면 운영 화면이 아니라 decorative scene이 된다.
+- focus가 없으면 무엇을 관제 중인지 설명이 안 된다.
+- health summary가 없으면 online/offline 판단이 늦어진다.
+- quick actions가 없으면 direct chat 진입이 숨는다.
+
+## compact sister status 설계
+### desktop와 다르게 볼 것
+- desktop(`1280px+`)은 scene 중심
+- tablet(`768px`)은 scene 축소 유지 가능하되 summary 보강 필요
+- mobile(` <768`)은 scene 대신 status card 중심
+
+### 카드 규칙
+- 카드 높이는 task 한 줄, 상태 한 줄 기준으로 짧게 유지
+- 자매 4명을 한 화면 안에서 비교 가능해야 함
+- 선택된 자매는 인라인 확장이나 하단 sheet로 상세를 보여줄 수 있음
+- subagent 수나 role은 보조 정보로만 노출
+
+## scene 대체 전략
+### mobile에서 scene을 이렇게 바꿔
+`OfficeScene.tsx` 모바일 분기는 아래 둘 중 하나를 기준으로 구현해.
+
+#### 옵션 A. compact sister stack
+- 세로 카드 4개
+- 각 카드에서 상태, current task, quick action 제공
+- 선택 시 아래에 context summary 노출
+
+#### 옵션 B. selectable status cards
+- 2x2 grid 또는 가로 2열 카드
+- 선택 카드만 확장
+- 확장 영역에서 subagent / recent context / chat action 제공
+
+### 반드시 지킬 것
+- `800x460` SVG를 그대로 줄여서 넣지 않는다
+- 회의실/존 은유는 모바일에서 필수 요소가 아니다
+- mobile에서 중요한 건 공간 은유보다 운영 정보의 순서다
+
+## context 흡수 전략
+`ContextPanel.tsx` 내용은 mobile에서 별도 우측 패널이 아니라 아래 중 하나로 흡수해.
+- selected sister 카드 안 인라인 상세
+- accordion section
+- bottom sheet
+
+### mobile 기본 상태
+- 아무 것도 선택되지 않아도 default context summary가 있어야 한다
+- 예: "현재 focus", "현재 제일 바쁜 자매", "바로 채팅할 자매"
+
+## health block 기준
+`ServerHealthPanel.tsx` 전체를 첫 화면에 다 넣지 말고, 상단에는 summary만 먼저 둬.
+
+**상단 summary 최소 정보**
+- `online x/y`
+- 문제 상태 1건 요약 또는 `all clear`
+- source badge (`live`, `snapshot`, `fallback`)
+
+**상세 패널에서 보여줄 것**
+- 자매/서버 카드 리스트
+- detail 문구
+- refreshed/generated 시각
+
+## pipeline block 기준
+`PipelinePanel.tsx` 전체를 모바일 첫 viewport에 다 넣지 않는다.
+
+**상단 summary 최소 정보**
+- active task
+- focus
+- review loop count 또는 deploy state
+
+**상세 패널에서 보여줄 것**
+- 세로 단계 카드
+- node role / state / detail
+- snapshot freshness
+
+## source badge 규칙
+모바일에서는 source 표현을 아래처럼 통일해.
+- `live`: 현재 runtime 또는 ws 기반 최신 상태
+- `snapshot`: polling 또는 마지막 스냅샷 기준 상태
+- `fallback`: 문서/기본값/보조 데이터 기준 상태
+
+### 라벨 톤
+- 라벨은 짧게
+- 설명은 보조 문구 한 줄
+- 첫 화면과 하위 패널에서 같은 단어 사용
+
+## 상태 문구 규칙
+- `loading`: 불러오는 중
+- `empty`: 아직 표시할 데이터 없음
+- `error`: 가져오지 못함 또는 전송 실패
+- `stale`: 최신 연결이 약해 마지막 확인값 표시 중
+
+`empty`와 `error`는 절대 같은 문구로 처리하지 않아.
+
+## desktop / tablet 유지 규칙
+### desktop (`1280px+`)
+- 기존 scene + context panel + bottom panels 구조 유지
+- 단, source badge와 상태 라벨은 새 기준으로 통일
+
+### tablet (`768px`)
+- 데스크톱 구조를 유지해도 되지만 summary 우선순위를 보강해야 함
+- 첫 화면에서 핵심 정보가 씬 아래로 밀리면 안 됨
+
+## QA 체크 포인트
+- `360px`, `390px`에서 첫 viewport에 핵심 정보 4종이 모두 보이는지
+- horizontal scroll이 없는지
+- 선택 전에도 default context가 읽히는지
+- sister 선택 후 상세 확인이 같은 세로 흐름 안에서 끝나는지
+- `live / snapshot / fallback` 라벨이 첫 화면과 패널에서 같은지

.plans/sprints/SPRINT-017.md

@@ -1,178 +1,212 @@
-# SPRINT-017: 오피스 대시보드 운영 안정화와 모바일 완성
+# SPRINT-017: `/office` 모바일 화면 전면 개편
 
 ## 목표
-`/office`를 데모 화면이 아니라 운영자가 실제로 믿고 쓰는 관제 화면으로 고정한다. 이번 Sprint의 중심은 새 기능 추가가 아니라, 이미 `main`에 들어온 오피스 대시보드를 **실시간성, 반응형, 실패 처리, QA 기준**까지 포함해 운영 가능 상태로 만드는 거야.
+`/office`를 데스크톱 축소판이 아니라 **모바일 전용 운영 화면**으로 다시 정리해. 이번 Sprint의 성공 기준은 단순 반응형이 아니야. `360px`, `390px` 첫 화면에서 운영자가 바로 읽어야 할 정보가 세로 흐름으로 보이고, direct chat, pipeline, health, context가 모바일 기준으로 다시 배치되어야 해.
+
+## 이번 Sprint의 한 줄 정의
+`main`에 이미 있는 `/office` 구현을 기준으로, **새 API 없이** `frontend/app/office/page.tsx`와 `frontend/components/office/*`의 모바일 IA와 상태 표현을 다시 잠근다.
 
 ## 배경
-SPRINT-016에서 아래는 이미 확보됐어.
-- 오피스 PRD와 핵심 IA
-- `frontend/app/office/page.tsx` 진입 경로
-- `OfficeScene`, `ContextPanel`, `ChatWorkspace`, `PipelinePanel`, `ServerHealthPanel` 구현
-- release preflight 문서와 기본 빌드 통과 근거
+현재 `main` 구현은 데스크톱 기준 구조가 먼저 잡혀 있어.
 
-하지만 여기서 멈추면 안 돼.
-- live 데이터가 약해질 때 무엇을 보여줄지
-- 모바일에서 어떤 정보만 남기고 무엇을 접을지
-- direct chat이 권한/JWT/오류 상황에서 어떻게 반응할지
-- WebSocket과 polling snapshot이 충돌할 때 어떤 값이 우선인지
-이 기준이 문서와 QA에서 아직 완전히 잠기지 않았어.
+### 현재 구현에서 확인된 문제
+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`, `전송 실패`가 모바일에서 즉시 읽히는 구조가 아니다.
 
 ## 참고 문서
-- 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`
+- 오피스 모바일 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`
 
-## 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
+## 기준 구현 경로
+- `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 범위
-- `/office` 운영 안정화
-- Desktop / Tablet / Mobile 정보 우선순위 재정리
-- live / snapshot / fallback 판정 규칙 고정
-- direct chat 실패/권한/빈 상태 처리 강화
-- WebSocket reconnect / polling reconciliation 기준 문서화
-- QA 재현 기준과 deploy gate 정리
+### 포함
+- `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 기준 작성
 
-## 이번 Sprint에서 하지 않는 것
-- 새로운 오피스 씬 세계관 추가
-- 3D 전환
-- 음성/영상 채널 추가
-- 별도 모바일 앱 설계
-- Gateway 프로토콜 자체 신규 설계
+### 제외
+- 신규 백엔드 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 재배치 검증이 남는다
 
 ## 완료 기준
-- 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가 같은 기준 용어를 써야 해.
+- `360px`, `390px` 첫 화면에서 4자매 상태, current focus, health summary, quick actions를 모두 읽을 수 있다
+- `mobile(<768)`에서 데스크톱 축소판이 사라진다
+- `ContextPanel` 선택 의존 구조가 모바일 기본 흐름 안으로 흡수된다
+- `PipelinePanel`과 `ServerHealthPanel`이 가로 스크롤 없이 읽힌다
+- `ChatWorkspace`가 모바일 direct chat로 동작하고, `JWT 없음 / empty / error / runtime 확인 중` 상태가 즉시 읽힌다
+- `live / snapshot / fallback` 의미가 유지된 채 문구가 통일된다
 
 ## 핸드오프 메모
-- 하랑이는 용어와 상태 모델을 잠그는 역할이야.
-- 나랑이는 `/office`를 운영 화면으로 만드는 역할이야.
-- 다랑이는 브라우저와 실패 시나리오를 실제로 깨보는 역할이야.
-- 이랑이는 env, WS proxy, deploy gate를 잠그는 역할이야.
-
-여기까지가 scope야.
+- 하랑이는 scope와 우선순위를 잠근다
+- 나랑이는 `page.tsx`와 `office/*` 모바일 IA를 구현한다
+- 다랑이는 `360 / 390 / 768 / 1280+` 기준으로 실브라우저 QA를 남긴다
+- 이번 Sprint는 "안정화 전체"가 아니라 **모바일 운영 화면 재구성**까지로 좁게 끝낸다