web-page-backend/docs/superpowers/specs/2026-04-27-agent-office-v2-design.md

# Agent Office v2 — Pixel Office UX 대규모 업데이트 설계

> 참고 프로젝트: `pixel-agents` (VS Code 확장, React 19 + Canvas 2D)
> 대상: `web-ui/src/pages/agent-office/` (프론트엔드) + `web-backend/agent-office/` (백엔드)

---

## 1. 목표

기존 대시보드 칼럼 중심 UI를 **전체 화면 픽셀 오피스** 중심으로 전환하여, "가상 오피스를 사용한다"는 몰입감을 제공한다.

### 핵심 변경

- 캔버스가 메인 화면을 차지하고, 에이전트 클릭 시 사이드 패널로 상세 정보 표시
- BFS 경로 탐색 + 풀 배회 시스템으로 에이전트에 생동감 부여
- 3가지 오피스 테마 프리셋 (Modern / Retro / Minimal)
- 캐릭터 프로시저럴 고도화 + 스프라이트 로더 설계 (점진적 전환)

### 변경하지 않는 것

- 백엔드 FSM 5상태 (`idle`, `working`, `waiting`, `reporting`, `break`)
- WebSocket 프로토콜 메시지 타입 (init, agent_state, task_complete, agent_move, notification, command_result)
- REST API 엔드포인트
- 텔레그램 봇 연동

---

## 2. 화면 구성

### 2.1 데스크톱 레이아웃

```
┌──────────────────────────────────────────────────┬──────────────┐
│ [Agent Office]  ● Connected    [Theme ▾] [Zoom]  │              │
├──────────────────────────────────────────────────┤  Side Panel  │
│                                                  │   320px      │
│                                                  │              │
│              Pixel Office Canvas                 │  [Agent hdr] │
│              (flex: 1, 전체 높이)                 │  [Tabs····]  │
│                                                  │  [Content ]  │
│              - 에이전트 클릭 → 패널 열림          │  [·········] │
│              - 빈 공간 클릭 → 패널 닫힘          │              │
│                                                  │              │
└──────────────────────────────────────────────────┴──────────────┘
```

- **상단 바**: 타이틀, WebSocket 연결 상태(●), 테마 드롭다운, 줌 컨트롤 (1x~4x)
- **캔버스**: `flex: 1`로 남은 공간 전체 차지, `imageSmoothingEnabled = false`
- **사이드 패널**: 320px 고정폭, 에이전트 클릭 시 슬라이드 인, X 버튼 또는 빈 공간 클릭으로 닫힘
- **패널 닫힘 시**: 캔버스가 전체 너비로 확장

### 2.2 모바일 레이아웃 (< 768px)

```
┌──────────────────────────┐
│ [≡] Agent Office  ● Conn │
├──────────────────────────┤
│                          │
│    Pixel Office Canvas   │
│    (전체 화면)            │
│    핀치 줌 + 패닝         │
│                          │
│                          │
├──────────────────────────┤  ← 바텀 시트 (드래그)
│  [Agent Header]          │
│  [Tabs: Cmd|Task|Tok|Log]│
│  [Content area]          │
└──────────────────────────┘
```

- 캔버스: 전체 화면, 터치 핀치 줌/패닝
- 사이드 패널 → 바텀 시트 (에이전트 탭 시 올라옴, 아래로 드래그 시 닫힘)
- 상단 바: 햄버거 메뉴로 테마/줌 접기

---

## 3. 사이드 패널 구조

### 3.1 헤더

```
┌─────────────────────────────┐
│ [🎵 32x32]  음악 프로듀서    │
│             ● working - ...  │
└─────────────────────────────┘
```

- 에이전트 아이콘 (emoji 기반, 32x32 색상 배경)
- display_name + 현재 상태 + state_detail

### 3.2 탭 구성

| 탭 | 내용 |
|----|------|
| **Commands** (기본) | Quick Action 버튼 (에이전트별 고유), Custom Command 입력, Approval UI (waiting 상태 시) |
| **Tasks** | 최근 작업 이력 (상태 배지, 타임스탬프, 결과 펼치기) |
| **Tokens** | 일간/주간 토큰 사용량 차트, 캐시 히트율 |
| **Logs** | 에이전트 로그 스트림 (level별 색상, 자동 스크롤) |

### 3.3 에이전트별 Quick Actions

| 에이전트 | 버튼 |
|---------|------|
| Stock | Fetch News, Add Alert, Test Telegram |
| Music | Compose, Check Credits |
| Blog | Research, Add Keyword, List Keywords |
| Realestate | Fetch Matches, Dashboard |
| Lotto | Curate Now, Status |

---

## 4. 캔버스 엔진

### 4.1 타일맵

- **그리드**: 32 × 20 타일 (기존 20×14에서 확장)
- **타일 크기**: 32px × 32px (기본), 줌에 따라 스케일
- **타일 타입**: VOID(0), FLOOR(1), WALL(2), FURNITURE(3)
- **렌더링 순서**: 바닥 → 벽 → 가구 → 에이전트 (Y좌표 Z-sorting) → 오버레이

### 4.2 오피스 레이아웃 (고정)

```
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW  (W=Wall)
W..............................W
W...[Stock]...[Music]..........W
W...desk+mon..desk+inst........W
W..............................W
W...[Blog]....[RE]....[Lotto]..W
W...desk+mon..desk+mon.desk+monW
W..............................W
W..............................W
W..........[Meeting]...........W
W..........table 4x2...........W
W..............................W
W..............................W
W....[Coffee]...[Sofa]........W
W....machine....couch.........W
W..............................W
W...[Plants]......[Bookshelf]..W
W..............................W
W..............................W
WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW
```

- 각 에이전트 구역에 테마별 소품 (Stock: 모니터 3대, Music: 악기, Blog: 서류 등)
- 중앙: 회의 테이블 (4x2 타일)
- 하단: 휴게실 구역 (커피 머신 + 소파)
- waypoint 정의: `desk_stock`, `desk_music`, `desk_blog`, `desk_realestate`, `desk_lotto`, `meeting`, `break_room`, `coffee`

### 4.3 줌 & 패닝

- 줌 레벨: 1x, 2x, 3x, 4x (정수 배율만, 픽셀 선명도 유지)
- 데스크톱: 마우스 휠 줌, 드래그 패닝
- 모바일: 핀치 줌, 터치 패닝
- 기본값: 캔버스 크기에 맞춰 자동 fit

### 4.4 게임 루프

```javascript
function gameLoop(timestamp) {
  const dt = (timestamp - lastTime) / 1000;
  lastTime = timestamp;

  update(dt);   // 에이전트 이동, 애니메이션 프레임 업데이트
  render();     // 타일맵 → 가구 → 에이전트(Y-sort) → 오버레이

  requestAnimationFrame(gameLoop);
}
```

- 60fps requestAnimationFrame
- `imageSmoothingEnabled = false` (픽셀 선명도)
- devicePixelRatio 반영

---

## 5. 에이전트 캐릭터 시스템

### 5.1 프로시저럴 렌더링 (Phase 1)

- 해상도: 16 × 32px (기존 8×16에서 2배 확대)
- 에이전트별 고유 색상 (기존 유지)
- 애니메이션 프레임:

| 상태 | 프레임 수 | 속도 | 설명 |
|------|----------|------|------|
| idle | 2 | 0.8s/frame | 미세 움직임 (숨쉬기) |
| walk | 4 | 0.15s/frame | 걷기 사이클 [0,1,2,1] |
| type | 2 | 0.3s/frame | 타이핑 (팔 움직임) |
| wait | 2 | 0.5s/frame | 좌우 흔들림 (wobble) |
| break | 2 | 1.0s/frame | 커피 마시기 / 졸기 |

- 4방향 스프라이트: DOWN, UP, RIGHT, LEFT (LEFT = RIGHT 좌우반전)

### 5.2 스프라이트 로더 (Phase 2 준비)

```javascript
class SpriteLoader {
  constructor() {
    this.sprites = new Map();  // agent_id → spritesheet Image
    this.fallback = 'procedural';
  }

  async load(agentId, sheetUrl) { /* PNG 로드 */ }

  draw(ctx, agentId, state, direction, frame, x, y) {
    if (this.sprites.has(agentId)) {
      // 스프라이트시트에서 프레임 추출하여 그리기
    } else {
      // 프로시저럴 폴백
      ProceduralSprite.draw(ctx, agentId, state, direction, frame, x, y);
    }
  }
}
```

- 스프라이트시트 규격: 각 프레임 16×32px, 가로로 프레임 나열
- 행: 방향 (DOWN/UP/RIGHT), 열: 상태별 프레임
- PNG 없으면 프로시저럴 폴백 → 에셋 제작 전에도 완전 동작

---

## 6. 이동 시스템

### 6.1 BFS 경로 탐색

```javascript
function findPath(grid, start, goal) {
  // 4방향 BFS (상하좌우, 대각선 없음)
  // blocked 타일(가구, 벽) 회피
  // 반환: [{col, row}, ...] 경로 배열
}
```

- 가구 footprint → `blocked[]` 배열로 타일 마킹
- 의자/책상 뒤 타일은 walkable (backgroundTiles 개념)
- 경로 없으면 제자리 유지

### 6.2 이동 파라미터

| 파라미터 | 값 | 설명 |
|---------|-----|------|
| WALK_SPEED | 48 px/sec | pixel-agents 참고 |
| moveProgress | 0~1 | 현재 타일 → 다음 타일 선형 보간 |
| direction | DOWN/UP/RIGHT/LEFT | 이동 방향 → 스프라이트 방향 결정 |

### 6.3 배회 로직 (idle 상태)

```
idle 진입
  → 3~8초 대기 (seatTimer)
  → 자리에서 일어남
  → 인접 floor 타일로 랜덤 이동
  → 3~6회 반복 (wanderCount)
  → 자리로 BFS 복귀
  → 2~20초 자리에서 휴식 (restTimer)
  → 반복
```

### 6.4 상태 전환 시 이동 시퀀스

| 전환 | 동작 |
|------|------|
| `* → working` | 배회 중단, 자기 책상으로 BFS 이동 → 도착 후 type 애니메이션 |
| `* → waiting` | 자기 책상에서 wobble 애니메이션 + 말풍선 |
| `* → reporting` | 자기 책상에서 빠른 type 애니메이션 |
| `idle (배회 중)` | 랜덤 floor 타일로 이동, wanderCount 소진 시 복귀 |
| `* → break` | 휴게실(break_room/coffee) waypoint로 BFS 이동 → break 애니메이션 |
| `break → idle` | 자기 책상으로 BFS 이동 → idle 루프 시작 |

---

## 7. 오버레이 시스템

캔버스 위에 HTML이 아닌 Canvas 2D로 직접 렌더링.

### 7.1 항상 표시

- **이름 라벨**: 에이전트 아래, 에이전트 색상 텍스트, 12px
- **상태 배지**: 이름 아래, 배경색 + 텍스트 ("working", "idle", "break")

### 7.2 조건부 표시

- **말풍선**: `waiting` 상태에서만, 에이전트 위에 "승인 대기!" 텍스트
  - 둥근 사각형 배경 (#fbbf24), 아래 삼각형 꼬리
  - 2초 페이드인, 상태 변경 시 즉시 사라짐
- **알림 배지**: 미확인 notification 있을 때, 에이전트 우상단에 빨간 원 + 숫자

### 7.3 렌더링 순서

```
1. 타일맵 (바닥 + 벽)
2. 가구 (Y-sort)
3. 에이전트 (Y-sort, 가구와 혼합)
4. 오버레이 (말풍선, 이름, 배지) — 항상 최상위
```

---

## 8. 테마 시스템

### 8.1 테마 데이터 구조

```javascript
const THEMES = {
  modern: {
    name: 'Modern',
    wall:      { color: '#1a1a2e', border: '#333', accent: '#8b5cf6' },
    floor:     { color1: '#2a2a3e', color2: '#323248' },
    furniture: { desk: '#3a3a5a', chair: '#4c1d95', monitor: '#5555aa', shelf: '#2a2a4e' },
    decor:     { plant: '#22c55e', pot: '#4a3a2a', lamp: '#fbbf24', ledStrip: '#8b5cf6' },
    lighting:  { ambient: 'rgba(139,92,246,0.05)', glow: 'rgba(139,92,246,0.15)' }
  },
  retro: {
    name: 'Retro',
    wall:      { color: '#2a1a0a', border: '#6a4a2a', accent: '#cc8844' },
    floor:     { color1: '#4a3a1a', color2: '#3a2a10' },
    furniture: { desk: '#6a4a1a', chair: '#8a5a2a', monitor: '#555555', shelf: '#5a3a1a' },
    decor:     { plant: '#44aa44', pot: '#6a4a2a', lamp: '#ffcc66', brick: '#8a5a2a' },
    lighting:  { ambient: 'rgba(255,200,100,0.05)', glow: 'rgba(255,200,100,0.2)' }
  },
  minimal: {
    name: 'Minimal',
    wall:      { color: '#fafafa', border: '#ddd', accent: '#3b82f6' },
    floor:     { color1: '#e8e8e8', color2: '#f0f0f0' },
    furniture: { desk: '#ffffff', chair: '#e0e0e0', monitor: '#333333', shelf: '#f5f5f5' },
    decor:     { plant: '#86efac', pot: '#ffffff', lamp: '#fbbf24', window: '#e0f0ff' },
    lighting:  { ambient: 'rgba(59,130,246,0.03)', glow: 'rgba(255,255,255,0.1)' }
  }
};
```

### 8.2 테마 적용 방식

- `TileMap.render(theme)` — 바닥/벽 색상을 theme에서 읽어 렌더링
- `FurnitureRenderer.draw(type, theme)` — 가구별 프로시저럴 렌더링에 theme 팔레트 적용
- 테마 전환 시 전체 캔버스 리렌더 (레이아웃 변경 없음)
- 사용자 선택은 `localStorage`에 저장, 기본값: `modern`

### 8.3 테마별 고유 데코

| 테마 | 고유 요소 |
|------|----------|
| Modern | LED 스트립 (벽 하단), 네온 글로우, 미니멀 화분 |
| Retro | 벽돌 텍스처, CRT 모니터, 책장(컬러풀 책), 탁상 램프 |
| Minimal | 창문(자연광), 다육이, 깔끔한 화이트 선반 |

---

## 9. 히트 테스팅 & 인터랙션

### 9.1 클릭 처리

```javascript
canvas.onclick = (e) => {
  const {col, row} = screenToTile(e.offsetX, e.offsetY, zoom, pan);

  // 1. 에이전트 히트 테스트 (역순, 최상위 우선)
  const agent = agents.findLast(a =>
    Math.abs(a.x - col) < 1 && Math.abs(a.y - row) < 1.5
  );

  if (agent) {
    openSidePanel(agent.id);
    return;
  }

  // 2. 빈 공간 → 패널 닫기
  closeSidePanel();
};
```

### 9.2 호버 (데스크톱만)

- 에이전트 위 호버 시 커서 `pointer`로 변경
- 툴팁 불필요 (이름+배지가 항상 표시되므로)

---

## 10. WebSocket 연동

기존 프로토콜 100% 유지. 프론트엔드에서 메시지 수신 시 캔버스 상태만 추가 업데이트.

| 메시지 타입 | 캔버스 반응 |
|------------|-----------|
| `agent_state` | 해당 에이전트 FSM 상태 전환 → 애니메이션/위치 변경 트리거 |
| `agent_move` | target에 따라 BFS 경로 계산 → 이동 시작 |
| `task_complete` | 에이전트 상태를 idle로 전환 |
| `notification` | 에이전트 위 알림 배지 카운트 증가 |
| `init` | 모든 에이전트 초기 위치/상태 설정 |

### agent_state 수신 시 이동 로직

```javascript
function onAgentState(agentId, newState) {
  const agent = agents.get(agentId);

  switch (newState) {
    case 'working':
    case 'waiting':
    case 'reporting':
      // 자리에 있지 않으면 자리로 이동
      if (!agent.isAtDesk()) agent.moveTo(agent.deskWaypoint);
      break;
    case 'break':
      agent.moveTo('break_room');
      break;
    case 'idle':
      // 배회 루프 시작
      agent.startWandering();
      break;
  }

  agent.setState(newState);
}
```

---

## 11. 파일 구조 (프론트엔드)

```
src/pages/agent-office/
├── AgentOffice.jsx              # 루트 컴포넌트 (재작성)
├── AgentOffice.css              # 스타일 (재작성)
├── hooks/
│   ├── useAgentManager.js       # WebSocket + 상태 (기존 확장)
│   └── useOfficeCanvas.js       # 캔버스 셋업 (재작성)
├── components/
│   ├── TopBar.jsx               # 상단 바 (신규)
│   ├── SidePanel.jsx            # 사이드 패널 컨테이너 (신규)
│   ├── CommandTab.jsx           # Commands 탭 (AgentColumn 리팩토링)
│   ├── TaskTab.jsx              # Tasks 탭 (AgentColumn에서 분리)
│   ├── TokenTab.jsx             # Tokens 탭 (신규)
│   ├── LogTab.jsx               # Logs 탭 (신규)
│   ├── ApprovalCard.jsx         # 승인 UI 카드 (신규)
│   └── MobileBottomSheet.jsx    # 모바일 바텀 시트 (신규)
├── canvas/
│   ├── OfficeRenderer.js        # 게임 루프 + 렌더 파이프라인 (재작성)
│   ├── TileMap.js               # 타일맵 렌더링 + 테마 적용 (재작성)
│   ├── FurnitureRenderer.js     # 가구 프로시저럴 렌더링 (신규)
│   ├── AgentSprite.js           # 에이전트 이동 + 애니메이션 (재작성)
│   ├── ProceduralSprite.js      # 프로시저럴 캐릭터 렌더링 (SpriteSheet 리팩토링)
│   ├── SpriteLoader.js          # 스프라이트시트 로더 + 폴백 (신규)
│   ├── Pathfinder.js            # BFS 경로 탐색 (신규)
│   ├── OverlayRenderer.js       # 이름, 배지, 말풍선 (신규)
│   └── themes.js                # 테마 데이터 (신규)
├── assets/
│   ├── office-map.json          # 32x20 맵 데이터 (재작성)
│   └── sprites/                 # Phase 2 스프라이트시트 PNG (빈 디렉토리)
```

### 삭제 대상

- `components/AgentColumn.jsx` → CommandTab + TaskTab으로 분리
- `components/CommandColumn.jsx` → SidePanel 내 CommandTab으로 통합
- `components/ChatPanel.jsx` → 미사용, 삭제
- `components/DocumentPanel.jsx` → LogTab으로 대체
- `canvas/SpriteSheet.js` → ProceduralSprite.js로 리팩토링

---

## 12. 백엔드 변경사항

**없음.** 기존 WebSocket 프로토콜과 REST API를 그대로 사용한다.

단, `agent_move` 메시지가 break 전환 시에도 정확히 발송되는지 확인 필요:
- `base.py`의 `check_idle_break()` → `transition('break')` → WebSocket broadcast에 `agent_move` 포함 여부 확인
- 필요 시 `transition()` 메서드에서 break 상태 전환 시 `agent_move` 메시지 추가

---

## 13. 구현 순서 (Phase 개요)

| Phase | 내용 | 의존성 |
|-------|------|--------|
| **1. 캔버스 엔진** | 게임 루프, 타일맵, 줌/팬, 테마 시스템 | 없음 |
| **2. 에이전트 시스템** | 프로시저럴 캐릭터, BFS 경로 탐색, 상태별 애니메이션, 배회 로직 | Phase 1 |
| **3. 오버레이** | 이름 라벨, 상태 배지, 말풍선, 알림 배지 | Phase 2 |
| **4. 사이드 패널** | 4탭 구성, Quick Actions, Approval UI | Phase 1 |
| **5. 페이지 통합** | AgentOffice.jsx 재작성, WebSocket 연동, 히트 테스팅 | Phase 1-4 |
| **6. 모바일 대응** | 바텀 시트, 핀치 줌, 터치 이벤트, 반응형 | Phase 5 |
| **7. 스프라이트 로더** | SpriteLoader 구현, 폴백 연결 | Phase 2 |

---

## 14. 성공 기준

- [ ] 전체 화면 캔버스에서 5명의 에이전트가 상태에 맞게 애니메이션
- [ ] idle 에이전트가 사무실을 배회하다 자리로 복귀
- [ ] break 에이전트가 휴게실로 이동하여 휴식
- [ ] 에이전트 클릭 시 사이드 패널 열림, 4탭 모두 동작
- [ ] Commands 탭에서 명령 전송 + 승인/거부 동작
- [ ] 3가지 테마 전환 동작, localStorage에 저장
- [ ] 모바일에서 바텀 시트 + 핀치 줌 동작
- [ ] 기존 WebSocket 프로토콜과 100% 호환