fix: ChatWorkspace loadRuntime() use cookie-based withSessionRequest

1. Desktop breakpoint 768px → 1280px+ (tablet keeps mobile flow)
2. Default context always rendered (shows working sister when none selected)
3. MobileSisterCard aria-pressed for accessibility
4. ChatWorkspace localStorage → cookie-based withSessionRequest

.plans/OVERVIEW.md

@@ -4,6 +4,19 @@
 - 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`
@@ -15,25 +28,70 @@
   - `deploy/`
 - 장기 문서: `docs/`
 
-## 활성 작업
+## 현재 상태
-- **SPRINT-016**: 4자매 Isometric Office Dashboard 재기획
+- **SPRINT-016**: `/office` 기본 화면과 핵심 컴포넌트가 `main`에 반영됨
+- **다음 활성 작업**: **SPRINT-017** `/office` 모바일 화면 전면 개편
 
-## 이번 Sprint 핵심 요구사항
+## SPRINT-017 active scope
-1. 4자매와 17개 서브에이전트, 총 21개 에이전트를 오피스 은유로 재설계
+이번 Sprint는 안정화 전반이 아니라 **`/office` 모바일 정보 구조 재설계**에만 집중해.
-2. 4자매 독립 Gateway WebSocket 기준 실시간 상태 모델 정리
+
-3. 고정 좌석 4자매 + 동적 이동 서브에이전트 + 회의실/연결선 구조 정의
+### 이번에 반드시 해결할 것
-4. direct chat / workflow panel / server health를 오피스 화면과 통합
+1. `360px`, `390px` 첫 viewport에서 아래 4가지를 한 번에 읽히게 만든다.
-5. PRD와 `.plans/` 구조를 새 제품 방향 기준으로 정리
+   - 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+`
 
 ## 이행 전략
-- 코드에서는 구 구조와 신 구조를 일정 기간 동시 지원
+- 문서는 실제 `main` 구현 경로를 근거로만 갱신한다
-- 문서는 신 구조를 기준으로 선반영
+- SPRINT-017은 `mobile-first IA`와 `상태 라벨 통일`까지만 잠근다
-- 신규 QA 문서는 `.plans/qa/` 기준
+- 구현 작업은 `frontend/app/office/page.tsx`와 `frontend/components/office/*` 범위 안에서 끝내는 걸 기본으로 한다
-- 신규 Hotfix 문서는 `.plans/hotfix/` 기준
+- QA는 `360 / 390 / 768 / 1280+` 실브라우저 확인을 기준으로 남긴다
 
 ## 문서 맵
 - 구조 기준: `../ARCHITECTURE.md`
+- 제품 PRD: `../docs/product-specs/openclaw-office-dashboard-prd.md`
 - 디자인 인덱스: `./design/index.md`
-- Sprint 계획: `./sprints/SPRINT-016.md`
+- Sprint 016 비전: `./sprints/SPRINT-016.md`
-- PRD: `../docs/product-specs/openclaw-office-dashboard-prd.md`
+- Sprint 017 실행 계획: `./sprints/SPRINT-017.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 구현 경로와 breakpoint를 같이 적는다
+- QA 문서는 `360 / 390 / 768 / 1280+` 결과를 나눠 기록한다
+- `live / snapshot / fallback` 용어는 Sprint 문서와 UI 문서에서 동일하게 쓴다
+- 여기까지가 SPRINT-017 기준 scope야.

.plans/design/api-design.md

@@ -3,36 +3,137 @@
 ## 공통 규칙
 - Base URL: `https://hanarang-api.nabomhalang.co.kr`
 - 응답 형식: JSON
-- 인증: MVP에서는 인증 없음 (내부망 전용). 추후 JWT 추가 가능.
+- WS Namespace: `/ws`
-- 에러 형식: `{ "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 구현 기준:
-| GET | `/api/sisters` | 4자매 상태 목록 (SSH로 실시간 조회) |
+  - `frontend/app/office/page.tsx`
-| GET | `/api/sisters/:name` | 자매 상세 (설정 + 상태) |
+  - `backend/src/sisters/sisters.controller.ts`
-| GET | `/api/sisters/:name/config` | openclaw.json 내용 |
+  - `backend/src/events/events.gateway.ts`
-| GET | `/api/sisters/:name/sessions` | 최근 세션 목록 |
+  - `backend/src/events/events.scheduler.ts`
-| GET | `/api/sisters/:name/subagents` | 서브에이전트 사용 현황 |
+- 관련 Sprint: `../sprints/SPRINT-017.md`
-| POST | `/api/sisters/:name/restart` | Gateway 재시작 (관리자) |
+- 관련 UI 문서:
-| POST | `/api/sisters/:name/reset` | 세션 리셋 (관리자) |
+  - `./ui/office-dashboard-design.md`
+  - `./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",
-    "displayName": "하랑이",
+    "gatewayConnected": true,
-    "ip": "10.10.10.112",
+    "mainState": "thinking",
-    "status": "online",
+    "currentTask": "SPRINT-017 scope 잠금",
-    "lastSeen": "2026-04-04T01:45:00Z",
+    "activeSessionLabel": "main",
-    "role": "Orchestrator"
+    "activeSessionUpdatedAt": 1775640000000,
+    "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 | 설명 |
@@ -69,3 +170,9 @@
 | Method | Endpoint | 설명 |
 |--------|----------|------|
 | GET | `/health` | 서버 상태 확인 |
+
+## SPRINT-017 문서 기준 정리
+- 오피스 화면은 읽기 API와 쓰기 API 권한을 분리해서 다룬다
+- `live / snapshot / fallback`은 API 문서, UI 문서, QA 문서에서 같은 의미로 쓴다
+- direct chat, WS disconnect, stale 상태는 정상 흐름만큼 중요하게 검증한다
+- 여기까지가 API 기준 scope야.

.plans/design/index.md

@@ -21,8 +21,20 @@
 ## 레퍼런스
 - `references/07-master-dashboard-v3-reference.md`
 
-## Sprint 016에서 반드시 반영할 화면
+## 현재 우선 문서
-- 오피스 메인: 4자매 고정 좌석 + 서브에이전트 동적 이동
+- Sprint 실행 기준: `../sprints/SPRINT-017.md`
-- 오피스 채팅: 자매 선택 direct chat + 현재 상태 결합
+- 제품 비전: `../../docs/product-specs/openclaw-office-dashboard-prd.md`
-- 운영 패널: active workflow / sprint / review loop / deploy gate / server health
+- 실행 개요: `../OVERVIEW.md`
-- 모바일: 오피스 씬 단순화 + 세로 흐름 재배치
+
+## 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 +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`를 따른다.
 
-## 구조
+## 기준 구현 파일
-### 좌측
+- `frontend/components/office/ChatWorkspace.tsx`
-- 자매 선택 탭
+- `frontend/app/office/page.tsx`
-- 최근 대화 상대
+- 연관 문서: `.plans/design/ui/office-dashboard-design.md`
-- unread / active 상태
 
-### 중앙
+## breakpoint 기준
-- 메시지 타임라인
+- `360px`: minimum mobile compact
-- streaming 응답
+- `390px`: primary mobile baseline
-- tool call 상태 삽입
+- `768px`: tablet transition
-- retry / stop / resend 액션
+- `1280px+`: desktop baseline
 
-### 우측
+## 현재 main 구현에서 확인된 문제
-- 선택 자매 상태
+- `page.tsx`에서 chat은 `ChatArea` 고정 높이(`520px`, 모바일 `460px`) 안에 들어가 세로 흐름을 끊는다.
-- current workflow
+- `ChatWorkspace.tsx`는 모바일에서도 데스크톱 구조의 흔적이 강하다.
-- 최근 handoff
+  - 자매 탭, 메시지, 보조 컨텍스트가 분리되어 있다.
-- 관련 서브에이전트
+  - `SisterContext`는 `1199px` 미만에서 숨겨져 모바일 보조 정보가 사라진다.
+  - `SendBtn`은 토큰이 없으면 disabled라서, `JWT 없음` 이유를 화면에서 놓치기 쉽다.
+- empty 상태 문구는 있지만, `JWT 없음 / error / runtime 확인 중`이 같은 강도로 정리되어 있지 않다.
 
-## UX 규칙
+## 모바일 direct chat 원칙
-- 채팅은 메신저가 아니라 운영 명령 패널처럼 보여야 함
+1. **한 컬럼 흐름**
-- 현재 자매 상태와 대화가 분리되지 않아야 함
+   - mobile(` <768`)에서는 탭 → 상태 → 타임라인 → composer → 보조 정보 순서로 한 컬럼으로 간다.
-- tool calling / speaking 상태는 대화 흐름 안에서 보여야 함
+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`를 따른다.
 
-## 핵심 은유
+## 기준 구현 파일
-- 메인 자매 = 고정 좌석
+- `frontend/app/office/page.tsx`
-- 서브에이전트 = 이동 가능한 팀원
+- `frontend/components/office/OfficeScene.tsx`
-- 회의실 = 협업/리뷰/핸드오프 문맥
+- `frontend/components/office/ContextPanel.tsx`
-- 인프라 존 = 배포/서버/헬스
+- `frontend/components/office/PipelinePanel.tsx`
-- 연결선 = handoff / workflow transition
+- `frontend/components/office/ServerHealthPanel.tsx`
+- 관련 chat 문서: `.plans/design/ui/office-chat-design.md`
 
-## 전체 레이아웃
+## breakpoint 기준
-### 1. Office Scene
+- `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 우선순위가 없다.
 
-#### 서브에이전트 배치
+## 모바일 핵심 원칙
-- 기본은 자기 자매 주변 대기
+1. **데스크톱 축소판 금지**
-- active workflow 시 작업석/회의실/인프라 존으로 이동
+   - 모바일은 desktop scene을 줄이는 방식이 아니라 모바일 전용 정보 구조를 쓴다.
-- 상태에 따라 아이콘/색/테두리/말풍선 변화
+2. **첫 viewport 우선**
+   - `360px`, `390px` 첫 화면에서 운영자가 바로 판단할 정보만 먼저 보여준다.
+3. **선택 전에도 정보가 보이게**
+   - 자매를 누르기 전에도 상태, focus, health, action이 읽혀야 한다.
+4. **가로 스크롤 금지**
+   - mobile에서는 모든 핵심 블록이 세로 흐름 안에서 끝나야 한다.
+5. **상태 의미 유지**
+   - `live / snapshot / fallback`은 유지하되, 짧고 일관된 라벨로 통일한다.
 
-### 2. Right Context Panel
+## mobile IA
-- 선택 에이전트 detail
+모바일(` <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
+### 4. panel sections
-- current sprint
+첫 viewport 이후 순차 노출.
-- active workflow
-- review loop
-- deploy gate
-- server health summary
 
-## 상태 표현
+모바일 추천 순서:
-- `idle`: 조용한 점등
+1. direct chat
-- `thinking`: 약한 pulse
+2. pipeline
-- `tool_calling`: 도구 아이콘/점멸
+3. health detail
-- `speaking`: 말풍선 또는 stream 표시
+4. context detail
-- `error`: 적색 경고
 
-## 연결 규칙
+이 순서는 "지금 말 걸기 → 지금 뭐가 막혔는지 보기 → 상세 맥락 보기" 흐름을 따른다.
-- 자매 간 핸드오프는 굵은 주 연결선
-- 서브에이전트 내부 협업은 얇은 보조선
-- review loop는 다랑이 회의실 중심으로 표시
-- deploy path는 이랑이 인프라 존으로 흐름 표시
 
-## UX 규칙
+## first viewport priority
-- 중심은 언제나 4자매
+`360px`, `390px`에서 아래 4개가 모두 한 번에 보여야 해.
-- 21개 에이전트를 다 보여도 난잡하면 안 됨
+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

@@ -0,0 +1,212 @@
+# 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는 "안정화 전체"가 아니라 **모바일 운영 화면 재구성**까지로 좁게 끝낸다

backend/src/auth/auth-cookies.ts

@@ -0,0 +1,128 @@
+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,17 +1,30 @@
 import {
-  Controller,
+  BadRequestException,
-  Post,
-  Get,
   Body,
-  Headers,
+  Controller,
+  Get,
+  HttpCode,
+  Post,
+  Req,
+  Res,
+  UnauthorizedException,
   UseGuards,
   Request,
-  BadRequestException,
 } from '@nestjs/common';
-import type { Request as ExpressRequest } from 'express';
+import type {
-import { AuthService, LoginDto } from './auth.service';
+  Request as ExpressRequest,
-import { JwtGuard } from './jwt.guard';
+  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';
 
 interface AuthenticatedRequest extends ExpressRequest {
   user: { userId: number };
@@ -21,17 +34,58 @@ interface AuthenticatedRequest extends ExpressRequest {
 export class AuthController {
   constructor(private readonly authService: AuthService) {}
 
+  @HttpCode(200)
   @UseGuards(ThrottlerGuard)
   @Throttle({ default: { limit: 5, ttl: 60000 } })
   @Post('login')
-  login(@Body() dto: LoginDto) {
+  async login(
-    return this.authService.login(dto);
+    @Body() dto: LoginDto,
+    @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')
-  refresh(@Headers('x-refresh-token') token: string) {
+  async refresh(
+    @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');
-    return this.authService.refresh(token);
+    if (cookieToken && !hasValidCsrfToken(req)) {
+      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,7 +1,9 @@
 import { Injectable, UnauthorizedException } from '@nestjs/common';
-import { PassportStrategy } from '@nestjs/passport';
-import { ExtractJwt, Strategy } from 'passport-jwt';
 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';
 
 export interface JwtPayload {
   sub: number;
@@ -9,13 +11,21 @@ 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.fromAuthHeaderAsBearerToken(),
+      jwtFromRequest: ExtractJwt.fromExtractors([
+        cookieTokenExtractor,
+        ExtractJwt.fromAuthHeaderAsBearerToken(),
+      ]),
       ignoreExpiration: false,
       secretOrKey: secret,
     });

backend/src/events/events.gateway.ts

@@ -11,6 +11,7 @@ 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;
@@ -50,12 +51,17 @@ 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) ??
+      (client.handshake.auth?.token as string | undefined) ??
-      (client.handshake.headers.authorization as string)?.replace(
+      tokenFromHeader ??
-        'Bearer ',
+      tokenFromCookie;
-        '',
-      );
 
     if (!token) {
       this.logger.debug(`WS rejected (no token): ${client.id}`);

backend/src/main.ts

@@ -1,7 +1,14 @@
 import { NestFactory } from '@nestjs/core';
 import { Logger, ValidationPipe } from '@nestjs/common';
-import { AppModule } from './app.module';
+import type { NextFunction, Request, Response } from 'express';
 import helmet from 'helmet';
+import { AppModule } from './app.module';
+import {
+  ACCESS_TOKEN_COOKIE,
+  REFRESH_TOKEN_COOKIE,
+  getCookieValue,
+  hasValidCsrfToken,
+} from './auth/auth-cookies';
 
 function getAllowedOrigins() {
   return (process.env.CORS_ORIGINS ?? 'http://localhost:3004')
@@ -10,10 +17,40 @@ 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();
 
@@ -29,6 +66,12 @@ async function bootstrap() {
       }
     },
     methods: ['GET', 'POST', 'PATCH', 'PUT', 'DELETE', 'OPTIONS'],
+    allowedHeaders: [
+      'Content-Type',
+      'Authorization',
+      'X-CSRF-Token',
+      'X-Refresh-Token',
+    ],
     credentials: true,
   });
 

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,6 +20,15 @@ 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);
@@ -39,21 +48,36 @@ export class SisterDetailService {
         sister.ip,
         sister.user,
         sshKeyPath,
-        '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',
+        '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',
       );
 
+      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],
-        raw: result.stdout || '(설정 파일 없음)',
+        files,
+        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],
-        raw: '(SSH 연결 불가)',
+        files: [],
+        summary: '(SSH 연결 불가)',
       };
     }
   }
@@ -70,21 +94,34 @@ export class SisterDetailService {
         '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 ""',
       );
 
-      const lines = result.stdout
+      const sessions = result.stdout
         .split('\n')
-        .filter((l) => l && !l.startsWith('total'));
+        .filter((line) => line && !line.startsWith('total'))
-      return lines
         .map((line) => {
           const parts = line.trim().split(/\s+/);
+          const label = parts[parts.length - 1] ?? '';
+          const modified = parts.slice(5, 8).join(' ');
+          const size = parts[4] ?? '0';
+
           return {
-            name: parts[parts.length - 1] ?? '',
+            id: label,
-            modified: parts.slice(5, 8).join(' '),
+            label,
-            size: parts[4] ?? '0',
+            status: [modified, size !== '0' ? `${size}B` : null]
+              .filter((part): part is string => Boolean(part))
+              .join(' · '),
           };
         })
-        .filter((s) => s.name && s.name !== '');
+        .filter((session) => session.label.length > 0);
+
+      return {
+        sessions,
+        total: sessions.length,
+      };
     } catch {
-      return [];
+      return {
+        sessions: [],
+        total: 0,
+      };
     }
   }
 
@@ -100,15 +137,25 @@ export class SisterDetailService {
         'AGENT_DIR=~/.hermes/workspace/agents; [ -d "$AGENT_DIR" ] || AGENT_DIR=~/.openclaw/workspace/agents; ls "$AGENT_DIR"/ 2>/dev/null || echo ""',
       );
 
-      const agents = result.stdout
+      const items = result.stdout
         .split('\n')
-        .filter((l) => l.trim().endsWith('.md'));
+        .map((line) => line.trim())
-      return agents.map((a) => ({
+        .filter((line) => line.endsWith('.md'))
-        name: a.trim().replace('.md', ''),
+        .map((file) => ({
-        file: a.trim(),
+          id: file.replace('.md', ''),
+          label: file.replace('.md', ''),
+          file,
         }));
+
+      return {
+        items,
+        total: items.length,
+      };
     } catch {
-      return [];
+      return {
+        items: [],
+        total: 0,
+      };
     }
   }
 
@@ -122,7 +169,16 @@ export class SisterDetailService {
       }),
       this.prisma.activityLog.count({ where: { sisterId: sister.id } }),
     ]);
-    return { items: logs, total };
+
+    return {
+      items: logs.map((log) => ({
+        id: log.id,
+        action: log.action,
+        detail: summarizeText(log.detail),
+        createdAt: log.createdAt,
+      })),
+      total,
+    };
   }
 
   async getOrgData() {
@@ -157,8 +213,8 @@ export class SisterDetailService {
   }
 
   private getKeyPath(): string {
-    const p = this.config.get<string>('SSH_KEY_PATH');
+    const path = this.config.get<string>('SSH_KEY_PATH');
-    if (!p) throw new Error('SSH_KEY_PATH is not set');
+    if (!path) throw new Error('SSH_KEY_PATH is not set');
-    return p;
+    return path;
   }
 }

backend/src/sisters/sisters.controller.ts

@@ -8,14 +8,17 @@ import {
   UseGuards,
 } from '@nestjs/common';
 import type { Response } from 'express';
-import { SistersService } from './sisters.service';
+import { JwtGuard } from '../auth/jwt.guard';
-import { SisterDetailService } from './sister-detail.service';
+import { RoleGuard, Roles } from '../auth/role.guard';
 import { SisterNamePipe } from '../common/sister-name.pipe';
 import type { SisterName } from '../common/sister-name.pipe';
 import { AvatarService } from './avatar.service';
-import { JwtGuard } from '../auth/jwt.guard';
+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,
@@ -30,7 +33,17 @@ export class SistersController {
 
   @Get()
   async getSistersStatus() {
-    return this.sistersService.getAllSistersStatus();
+    const sisters = await this.sistersService.getAllSistersStatus();
+
+    return sisters.map(({ id, name, lxcId, role, status, lastSeen, currentTask }) => ({
+      id,
+      name,
+      lxcId,
+      role,
+      status,
+      lastSeen,
+      currentTask,
+    }));
   }
 
   @Get(':name/runtime')
@@ -49,7 +62,15 @@ export class SistersController {
 
   @Get(':name/system')
   async getSystemInfo(@Param('name', SisterNamePipe) name: SisterName) {
-    return this.sistersService.getSystemInfo(name);
+    const system = await this.sistersService.getSystemInfo(name);
+    if (!system) return null;
+
+    return {
+      uptime: system.uptime,
+      cpu: system.cpu,
+      memory: system.memory,
+      disk: system.disk,
+    };
   }
 
   @Get(':name/avatar')
@@ -64,25 +85,29 @@ export class SistersController {
 
     const avatar = await this.avatarService.getAvatar(sister);
     res.setHeader('Content-Type', avatar.contentType);
-    res.setHeader('Cache-Control', 'public, max-age=300');
+    res.setHeader('Cache-Control', 'private, 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);

frontend/app/office/page.tsx

@@ -4,6 +4,7 @@ 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 SisterAvatar from '@/components/common/SisterAvatar';
 import OfficeScene, {
   type AgentState,
   type SisterName,
@@ -274,6 +275,10 @@ const PageMeta = styled.div`
   color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.06em;
+
+  @media (max-width: 1279px) {
+    display: none;
+  }
 `;
 
 const FreshnessBar = styled.div`
@@ -281,6 +286,11 @@ const FreshnessBar = styled.div`
   gap: var(--space-md);
   flex-wrap: wrap;
   margin-left: auto;
+
+  @media (max-width: 1279px) {
+    margin-left: 0;
+    width: 100%;
+  }
 `;
 
 const FreshnessBadge = styled.span<{ $type: 'live' | 'snapshot' | 'fallback' }>`
@@ -294,14 +304,15 @@ const FreshnessBadge = styled.span<{ $type: 'live' | 'snapshot' | 'fallback' }>`
   opacity: 0.8;
 `;
 
-const MainArea = styled.div`
+/* ─── Desktop layout (≥1280px): scene + context side-by-side ─── */
+const DesktopMain = styled.div`
   display: flex;
   gap: 0;
   min-height: 0;
   flex: 1;
 
-  @media (max-width: 767px) {
+  @media (max-width: 1279px) {
-    flex-direction: column;
+    display: none;
   }
 `;
 
@@ -317,8 +328,8 @@ const ChatArea = styled.div`
   height: 520px;
   flex-shrink: 0;
 
-  @media (max-width: 767px) {
+  @media (max-width: 1279px) {
-    height: 460px;
+    height: 400px;
   }
 `;
 
@@ -326,6 +337,10 @@ const BottomPanels = styled.div`
   display: flex;
   flex-direction: column;
   gap: var(--space-lg);
+
+  @media (max-width: 1279px) {
+    display: none;
+  }
 `;
 
 const LoadingOverlay = styled.div`
@@ -340,6 +355,224 @@ const LoadingOverlay = styled.div`
   letter-spacing: 0.08em;
 `;
 
+/* ─── Mobile layout (<1280px) ─── */
+const MobileFlow = styled.div`
+  display: none;
+  flex-direction: column;
+  gap: var(--space-lg);
+
+  @media (max-width: 1279px) {
+    display: flex;
+  }
+`;
+
+const MobileSisterGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-sm);
+
+  @media (max-width: 359px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const STATE_CARD_COLORS: Record<AgentState, string> = {
+  idle: '#444',
+  thinking: '#2979FF',
+  tool_calling: '#FF9800',
+  speaking: '#00BFA5',
+  error: '#FF1744',
+};
+
+const MobileSisterCard = styled.button<{ $state: AgentState; $selected: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid ${({ $state }) => STATE_CARD_COLORS[$state]};
+  background: ${({ $selected }) => ($selected ? 'rgba(255,255,255,0.04)' : 'var(--bg-surface)')};
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  color: var(--text-primary);
+  outline: ${({ $selected }) => ($selected ? '1px solid var(--text-primary)' : 'none')};
+  outline-offset: -1px;
+`;
+
+const MobileCardMeta = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+`;
+
+const MobileCardName = styled.div`
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+`;
+
+const MobileCardState = styled.div<{ $state: AgentState }>`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: ${({ $state }) => STATE_CARD_COLORS[$state]};
+`;
+
+const MobileCardTask = styled.div`
+  font-size: 11px;
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const MobileFocusSection = styled.div`
+  border: 1px solid var(--border-color);
+  background: var(--bg-surface);
+  padding: var(--space-md) var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+`;
+
+const MobileSectionEyebrow = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+`;
+
+const MobileFocusTitle = styled.div`
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+`;
+
+const MobileFocusDetail = styled.div`
+  font-size: 12px;
+  color: var(--text-secondary);
+`;
+
+const MobileHealthRow = styled.div`
+  display: flex;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+`;
+
+const MobileHealthChip = styled.div<{ $ok: boolean }>`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 8px;
+  border: 1px solid ${({ $ok }) => ($ok ? '#00BFA5' : '#555')};
+  color: ${({ $ok }) => ($ok ? '#00BFA5' : '#777')};
+`;
+
+const MobileQuickActions = styled.div`
+  display: flex;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+`;
+
+const MobileActionBtn = 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);
+  }
+`;
+
+const MobileContextInline = styled.div`
+  border: 1px solid var(--border-color);
+  background: var(--bg-surface);
+  padding: var(--space-md) var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+`;
+
+const MobileContextHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const MobileContextTitle = styled.div`
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+`;
+
+const MobileCloseBtn = 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 MobileSelectedSummary = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+`;
+
+const MobileSelectedMeta = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const MobileSelectedName = styled.div`
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+`;
+
+const MobileSelectedRole = styled.div`
+  font-size: 11px;
+  color: var(--text-secondary);
+`;
+
+const MobileTaskBox = 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 MobileChatArea = styled.div`
+  height: 400px;
+  flex-shrink: 0;
+
+  @media (max-width: 389px) {
+    height: 360px;
+  }
+`;
+
 export default function OfficePage() {
   const [sisters, setSisters] = useState<SisterApiItem[]>([]);
   const [opsData, setOpsData] = useState<DashboardOpsData | null>(null);
@@ -381,12 +614,21 @@ export default function OfficePage() {
     };
 
     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);
-  }, [fetchAll]);
+  }, [connected, fetchAll]);
 
   const hasSisterSnapshot = sisters.length > 0;
   const sisterDataMode: 'live' | 'snapshot' | 'fallback' = connected ? 'live' : hasSisterSnapshot ? 'snapshot' : 'fallback';
@@ -428,6 +670,23 @@ export default function OfficePage() {
     qaDocLatestAt: null,
   };
 
+  const selectedSisterNode = useMemo(() => {
+    if (!selected) return null;
+    if (selected.type === 'sister') return sisterNodes.find((s) => s.name === selected.name) ?? null;
+    if (selected.type === 'subagent') return sisterNodes.find((s) => s.name === selected.sister) ?? null;
+    return null;
+  }, [selected, sisterNodes]);
+
+  const selectedSubagent = useMemo(() => {
+    if (selected?.type !== 'subagent') return null;
+    return selectedSisterNode?.subagents.find((sub) => sub.id === selected.id) ?? null;
+  }, [selected, selectedSisterNode]);
+
+  const onlineCount = useMemo(
+    () => effectiveSisters.filter((s) => s.status === 'online' || s.status === 'working').length,
+    [effectiveSisters],
+  );
+
   if (loading) {
     return <LoadingOverlay>오피스 데이터 로딩 중...</LoadingOverlay>;
   }
@@ -448,7 +707,8 @@ export default function OfficePage() {
         </FreshnessBar>
       </PageHeader>
 
-      <MainArea>
+      {/* ─── Desktop layout (≥1280px) ─── */}
+      <DesktopMain>
         <SceneColumn>
           <OfficeScene
             sisters={sisterNodes}
@@ -472,8 +732,120 @@ export default function OfficePage() {
           onOpenChat={handleOpenChat}
           onClear={() => setSelected(null)}
         />
-      </MainArea>
+      </DesktopMain>
 
+      {/* ─── Mobile layout (<1280px) ─── */}
+      <MobileFlow>
+        {/* 1. Sister status cards */}
+        <MobileSisterGrid>
+          {sisterNodes.map((sister) => {
+            const isSelected = selected?.type === 'sister' && selected.name === sister.name;
+            return (
+              <MobileSisterCard
+                key={sister.name}
+                $state={sister.state}
+                $selected={isSelected}
+                aria-pressed={isSelected}
+                onClick={() => handleSelectSister(sister.name)}
+              >
+                <SisterAvatar name={sister.name} size={32} />
+                <MobileCardMeta>
+                  <MobileCardName>{sister.displayName}</MobileCardName>
+                  <MobileCardState $state={sister.state}>{sister.state}</MobileCardState>
+                  {sister.currentTask && <MobileCardTask>{sister.currentTask}</MobileCardTask>}
+                </MobileCardMeta>
+              </MobileSisterCard>
+            );
+          })}
+        </MobileSisterGrid>
+
+        {/* 2. Current focus + health summary */}
+        <MobileFocusSection>
+          <MobileSectionEyebrow>current focus</MobileSectionEyebrow>
+          <MobileFocusTitle>{pipeline.activeTask}</MobileFocusTitle>
+          <MobileFocusDetail>{pipeline.focus}</MobileFocusDetail>
+          <MobileHealthRow>
+            <MobileHealthChip $ok={sisterDataMode === 'live'}>
+              ws: {sisterDataMode === 'live' ? 'connected' : 'disconnected'}
+            </MobileHealthChip>
+            <MobileHealthChip $ok={onlineCount >= 3}>
+              {onlineCount}/{SISTER_ORDER.length} online
+            </MobileHealthChip>
+            <MobileHealthChip $ok={pipeline.deployState !== 'blocked'}>
+              deploy: {pipeline.deployState}
+            </MobileHealthChip>
+          </MobileHealthRow>
+        </MobileFocusSection>
+
+        {/* 3. Quick actions */}
+        <MobileQuickActions>
+          {SISTER_ORDER.map((name) => (
+            <MobileActionBtn key={name} onClick={() => handleOpenChat(name)}>
+              {SISTER_DISPLAY[name]} 채팅
+            </MobileActionBtn>
+          ))}
+        </MobileQuickActions>
+
+        {/* 4. Inline context — always show default, expand on selection */}
+        <MobileContextInline>
+          <MobileContextHeader>
+            <MobileContextTitle>
+              {selected && selectedSisterNode
+                ? `${selected.type === 'sister' ? selectedSisterNode.displayName : selectedSubagent?.label ?? ''} · context`
+                : '현재 포커스'}
+            </MobileContextTitle>
+            {selected && <MobileCloseBtn onClick={() => setSelected(null)}>✕</MobileCloseBtn>}
+          </MobileContextHeader>
+          <MobileSelectedSummary>
+            <SisterAvatar name={(selectedSisterNode ?? sisterNodes[0])?.name ?? 'harang'} size={28} />
+            <MobileSelectedMeta>
+              <MobileSelectedName>
+                {selected && selectedSisterNode
+                  ? (selected.type === 'sister' ? selectedSisterNode.displayName : selectedSubagent?.label)
+                  : sisterNodes.find((s) => s.state === 'tool_calling' || s.state === 'thinking')?.displayName ?? sisterNodes[0]?.displayName ?? '—'}
+              </MobileSelectedName>
+              <MobileSelectedRole>
+                {selectedSisterNode?.role ?? sisterNodes[0]?.role ?? ''}
+              </MobileSelectedRole>
+            </MobileSelectedMeta>
+          </MobileSelectedSummary>
+          {((selectedSisterNode?.currentTask ?? sisterNodes.find((s) => s.state === 'tool_calling' || s.state === 'thinking')?.currentTask)) && (
+            <MobileTaskBox>
+              {selectedSisterNode?.currentTask ?? sisterNodes.find((s) => s.state === 'tool_calling' || s.state === 'thinking')?.currentTask ?? ''}
+            </MobileTaskBox>
+          )}
+          <MobileQuickActions>
+            <MobileActionBtn onClick={() => handleOpenChat((selectedSisterNode ?? sisterNodes[0])?.name ?? 'harang')}>채팅</MobileActionBtn>
+          </MobileQuickActions>
+        </MobileContextInline>
+
+        {/* 5. Chat (if open) */}
+        {chatSister && (
+          <MobileChatArea>
+            <ChatWorkspace initialSister={chatSister} onClose={() => setChatSister(null)} />
+          </MobileChatArea>
+        )}
+
+        {/* 6. Pipeline panel */}
+        <PipelinePanel
+          activeTask={pipeline.activeTask}
+          focus={pipeline.focus}
+          reviewLoopCount={pipeline.reviewLoopCount}
+          escalationCount={pipeline.escalationCount}
+          deployState={pipeline.deployState}
+          nodes={pipeline.nodes}
+          freshness={`generated ${formatGeneratedAt(freshness.generatedAt)}`}
+        />
+
+        {/* 7. Server health */}
+        <ServerHealthPanel
+          servers={serverEntries}
+          dataMode={sisterDataMode}
+          generatedAt={freshness.generatedAt}
+        />
+      </MobileFlow>
+
+      {/* ─── Desktop bottom panels ─── */}
       <BottomPanels>
         <PipelinePanel
           activeTask={pipeline.activeTask}

frontend/components/office/ChatWorkspace.tsx

@@ -4,6 +4,7 @@ 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 { withSessionRequest } from '@/lib/csrf';
 import type { SisterName, AgentState } from './OfficeScene';
 
 interface RuntimeMessage {
@@ -124,6 +125,8 @@ const SisterTab = styled.button<{ $active: boolean }>`
     border-bottom: 2px solid ${({ $active }) => ($active ? 'var(--text-primary)' : 'transparent')};
     white-space: nowrap;
     flex-shrink: 0;
+    padding: var(--space-xs) var(--space-sm);
+    gap: 4px;
   }
 `;
 
@@ -407,10 +410,8 @@ function runtimeStateLabel(state: AgentState): string {
   return 'idle';
 }
 
-function getToken(): string {
+// Fix #4: Remove localStorage token — use cookie-based auth via withSessionRequest
-  if (typeof window === 'undefined') return '';
+// Token is handled by HttpOnly cookies + CSRF, no client-side access needed
-  return localStorage.getItem('hanarang_access_token') ?? '';
-}
 
 function mergeMessages(prev: ChatMessage[], incoming: ChatMessage[]) {
   const map = new Map<string, ChatMessage>();
@@ -433,13 +434,15 @@ export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceP
   const [activeSister, setActiveSister] = useState<SisterName>(initialSister);
   const [allMessages, setAllMessages] = useState<Partial<Record<SisterName, ChatMessage[]>>>({});
   const [runtimeBySister, setRuntimeBySister] = useState<Partial<Record<SisterName, RuntimeSnapshot>>>({});
-  const [input, setInput] = useState('');
+  // 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());
+  // Cookie-based auth always available (no token check needed)
 
   useEffect(() => {
     setActiveSister(initialSister);
@@ -460,7 +463,7 @@ export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceP
 
   const loadRuntime = useCallback(async (sister: SisterName) => {
     try {
-      const res = await fetch(`${API_URL}/api/sisters/${sister}/runtime`);
+      const res = await fetch(`${API_URL}/api/sisters/${sister}/runtime`, withSessionRequest());
       if (!res.ok) return;
       const data = (await res.json()) as RuntimeSnapshot;
       setRuntimeBySister((prev) => ({ ...prev, [sister]: data }));
@@ -485,37 +488,25 @@ export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceP
     const text = input.trim();
     if (!text || sending) return;
 
-    const token = getToken();
+    // Cookie-based auth — no token check needed
-    if (!token) {
-      setMessages(activeSister, (prev) => mergeMessages(prev, [{
-        id: `sys-${Date.now()}`,
-        role: 'assistant',
-        content: '로그인이 풀린 것 같아. 다시 로그인한 뒤 시도해줘.',
-        ts: new Date().toISOString(),
-      }]));
-      return;
-    }
 
     const userMessage: ChatMessage = {
-      id: `user-${Date.now()}`,
+      id: `user-${crypto.randomUUID()}`,
       role: 'user',
       content: text,
       ts: new Date().toISOString(),
     };
 
     setMessages(activeSister, (prev) => mergeMessages(prev, [userMessage]));
-    setInput('');
+    setDrafts((prev) => ({ ...prev, [activeSister]: '' }));
     setSending(true);
 
     try {
-      const res = await fetch(`${API_URL}/api/sisters/${activeSister}/chat`, {
+    const res = await fetch(`${API_URL}/api/sisters/${activeSister}/chat`, withSessionRequest({
         method: 'POST',
-        headers: {
+        headers: { 'Content-Type': 'application/json' },
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
         body: JSON.stringify({ message: text }),
-      });
+    }, { csrf: true }));
 
       const data = await res.json();
       if (!res.ok) {
@@ -529,7 +520,7 @@ export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceP
       const reply = String(data?.reply || '').trim();
       if (reply) {
         setMessages(activeSister, (prev) => mergeMessages(prev, [{
-          id: `assistant-${Date.now()}`,
+          id: `assistant-${crypto.randomUUID()}`,
           role: 'assistant',
           content: reply,
           ts: new Date().toISOString(),
@@ -540,7 +531,7 @@ export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceP
     } catch (error) {
       const message = error instanceof Error ? error.message : '채팅 전송 중 오류가 발생했어.';
       setMessages(activeSister, (prev) => mergeMessages(prev, [{
-        id: `error-${Date.now()}`,
+        id: `error-${crypto.randomUUID()}`,
         role: 'assistant',
         content: `전송 실패: ${message}`,
         ts: new Date().toISOString(),
@@ -614,11 +605,11 @@ export default function ChatWorkspace({ initialSister, onClose }: ChatWorkspaceP
           <MessageInput
             placeholder={`${SISTER_DISPLAY[activeSister]}에게 지시해...`}
             value={input}
-            onChange={(e) => setInput(e.target.value)}
+            onChange={(e) => setDrafts((prev) => ({ ...prev, [activeSister]: e.target.value }))}
             onKeyDown={handleKeyDown}
             rows={1}
           />
-          <SendBtn onClick={() => void handleSend()} disabled={!input.trim() || sending || !hasToken}>
+          <SendBtn onClick={() => void handleSend()} disabled={!input.trim() || sending}>
             {sending ? '전송 중' : '전송'}
           </SendBtn>
         </InputArea>

frontend/components/office/OfficeScene.tsx

@@ -181,7 +181,14 @@ function SisterCircle({
   const clipId = `avatar-clip-${name}`;
 
   return (
-    <g onClick={onClick} style={{ cursor: 'pointer' }}>
+    <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}
@@ -264,7 +271,14 @@ function SubagentCircle({
   const color = STATE_COLORS[state];
 
   return (
-    <g onClick={onClick} style={{ cursor: 'pointer' }}>
+    <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"

frontend/components/office/PipelinePanel.tsx

@@ -74,6 +74,11 @@ const Focus = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  @media (max-width: 767px) {
+    max-width: 100%;
+    white-space: normal;
+  }
 `;
 
 const Stats = styled.div`
@@ -110,6 +115,11 @@ const NodeRow = styled.div`
   overflow-x: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--border-color) transparent;
+
+  @media (max-width: 767px) {
+    flex-direction: column;
+    overflow-x: visible;
+  }
 `;
 
 const stateColors: Record<PipelineNode['state'], string> = {
@@ -128,6 +138,10 @@ const NodeCard = styled.div<{ $state: PipelineNode['state'] }>`
   display: flex;
   flex-direction: column;
   gap: 4px;
+
+  @media (max-width: 767px) {
+    min-width: 0;
+  }
 `;
 
 const NodeName = styled.div`
@@ -179,6 +193,13 @@ const Connector = styled.div<{ $active: boolean }>`
     background: ${({ $active }) => $active ? 'rgba(245,245,245,0.8)' : 'transparent'};
     animation: ${({ $active }) => $active ? css`${flowAnim} 1.6s linear infinite` : 'none'};
   }
+
+  @media (max-width: 767px) {
+    width: 1px;
+    height: 16px;
+    align-self: flex-start;
+    margin-left: var(--space-lg);
+  }
 `;
 
 const FreshnessNote = styled.div`

frontend/components/office/ServerHealthPanel.tsx

@@ -73,6 +73,10 @@ const Grid = styled.div`
   @media (max-width: 767px) {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  @media (max-width: 359px) {
+    grid-template-columns: 1fr;
+  }
 `;
 
 const statusColors: Record<ServerEntry['status'], string> = {

frontend/lib/AuthContext.tsx

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

frontend/lib/csrf.ts

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