Input vs Output
0 ? `${(inputTokens / total) * 100}%` : '0%' }}
/>
0 ? `${(outputTokens / total) * 100}%` : '0%' }}
/>
Input
Output
{cacheRead > 0 && (
Cache Read: {cacheRead.toLocaleString()}
Cache Write: {cacheWrite.toLocaleString()}
)}
);
}
```
- [ ] **Step 2: 커밋**
```bash
git add src/pages/agent-office/components/TokenTab.jsx
git commit -m "feat(agent-office): add TokenTab with usage stats and cache hit rate"
```
---
### Task 15: LogTab 컴포넌트
**Files:**
- Create: `src/pages/agent-office/components/LogTab.jsx`
- [ ] **Step 1: LogTab 작성**
```jsx
// src/pages/agent-office/components/LogTab.jsx
import { useState, useEffect, useRef } from 'react';
import { getAgentLogs } from '../../../api';
const LEVEL_STYLE = {
info: { color: '#60a5fa' },
warning: { color: '#fbbf24' },
error: { color: '#ef4444' }
};
export default function LogTab({ agentId, refreshTrigger }) {
const [logs, setLogs] = useState([]);
const scrollRef = useRef(null);
useEffect(() => {
let cancelled = false;
getAgentLogs(agentId, 50).then(data => {
if (!cancelled) setLogs(data || []);
});
return () => { cancelled = true; };
}, [agentId, refreshTrigger]);
useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
}, [logs]);
return (
{logs.length === 0 &&
No logs yet
}
{logs.map((log, i) => {
const style = LEVEL_STYLE[log.level] || LEVEL_STYLE.info;
const time = new Date(log.created_at).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
return (
{time}
[{log.level}]
{log.message}
);
})}
);
}
```
- [ ] **Step 2: 커밋**
```bash
git add src/pages/agent-office/components/LogTab.jsx
git commit -m "feat(agent-office): add LogTab with auto-scroll and level coloring"
```
---
### Task 16: SidePanel 컨테이너 (4탭 통합)
**Files:**
- Create: `src/pages/agent-office/components/SidePanel.jsx`
- [ ] **Step 1: SidePanel 작성**
```jsx
// src/pages/agent-office/components/SidePanel.jsx
import { useState } from 'react';
import CommandTab from './CommandTab.jsx';
import TaskTab from './TaskTab.jsx';
import TokenTab from './TokenTab.jsx';
import LogTab from './LogTab.jsx';
const AGENT_META = {
stock: { displayName: '주식 트레이더', emoji: '📈', color: '#4488cc' },
music: { displayName: '음악 프로듀서', emoji: '🎵', color: '#44aa88' },
blog: { displayName: '블로그 마케터', emoji: '✍️', color: '#d97706' },
realestate: { displayName: '청약 애널리스트', emoji: '🏢', color: '#c026d3' },
lotto: { displayName: '로또 큐레이터', emoji: '🎱', color: '#ef4444' }
};
const TABS = ['Commands', 'Tasks', 'Tokens', 'Logs'];
export default function SidePanel({ agentId, agentState, pendingTask, onClose, refreshTrigger }) {
const [activeTab, setActiveTab] = useState('Commands');
const meta = AGENT_META[agentId];
if (!meta) return null;
const stateText = agentState?.detail
? `${agentState.state} - ${agentState.detail}`
: agentState?.state || 'unknown';
return (
{/* Header */}
{meta.emoji}
{meta.displayName}
● {stateText}
{/* Tabs */}
{TABS.map(tab => (
))}
{/* Tab Content */}
{activeTab === 'Commands' && (
)}
{activeTab === 'Tasks' && (
)}
{activeTab === 'Tokens' && (
)}
{activeTab === 'Logs' && (
)}
);
}
```
- [ ] **Step 2: 커밋**
```bash
git add src/pages/agent-office/components/SidePanel.jsx
git commit -m "feat(agent-office): add SidePanel container with 4-tab layout"
```
---
## Phase 5: 페이지 통합
### Task 17: useAgentManager 확장
**Files:**
- Modify: `src/pages/agent-office/hooks/useAgentManager.js`
- [ ] **Step 1: lotto 에이전트 추가 + 상태 구조 개선**
기존 `useAgentManager.js` 전체를 다음으로 교체:
```javascript
// src/pages/agent-office/hooks/useAgentManager.js
import { useState, useEffect, useRef, useCallback } from 'react';
const WS_RECONNECT_DELAY = 3000;
export function useAgentManager() {
const [agents, setAgents] = useState({}); // { agentId: { state, detail, task_id } }
const [pendingTasks, setPendingTasks] = useState([]); // [{id, agent_id, task_type, input_data}]
const [notifications, setNotifications] = useState({}); // { agentId: count }
const [connected, setConnected] = useState(false);
const [refreshTrigger, setRefreshTrigger] = useState(0); // 탭 데이터 리프레시용
const wsRef = useRef(null);
const reconnectRef = useRef(null);
const connect = useCallback(() => {
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
const ws = new WebSocket(`${protocol}://${window.location.host}/api/agent-office/ws`);
wsRef.current = ws;
ws.onopen = () => setConnected(true);
ws.onmessage = (e) => {
const msg = JSON.parse(e.data);
switch (msg.type) {
case 'init':
// 에이전트 초기 상태 세팅
const agentMap = {};
for (const a of msg.agents) {
agentMap[a.agent_id] = { state: a.state, detail: a.detail || '', task_id: a.task_id };
}
setAgents(agentMap);
setPendingTasks(msg.pending || []);
break;
case 'agent_state':
setAgents(prev => ({
...prev,
[msg.agent]: { state: msg.state, detail: msg.detail || '', task_id: msg.task_id }
}));
// idle 전환 시 데이터 리프레시
if (msg.state === 'idle') {
setRefreshTrigger(n => n + 1);
}
break;
case 'task_complete':
setRefreshTrigger(n => n + 1);
break;
case 'notification':
setNotifications(prev => ({
...prev,
[msg.agent]: (prev[msg.agent] || 0) + 1
}));
break;
case 'command_result':
// 사이드 패널에서 처리
break;
}
};
ws.onclose = () => {
setConnected(false);
reconnectRef.current = setTimeout(connect, WS_RECONNECT_DELAY);
};
ws.onerror = () => ws.close();
}, []);
useEffect(() => {
connect();
return () => {
if (wsRef.current) wsRef.current.close();
if (reconnectRef.current) clearTimeout(reconnectRef.current);
};
}, [connect]);
const sendCommand = useCallback((agent, action, params = {}) => {
if (wsRef.current?.readyState === WebSocket.OPEN) {
wsRef.current.send(JSON.stringify({ type: 'command', agent, action, params }));
}
}, []);
const sendApproval = useCallback((agent, taskId, approved) => {
if (wsRef.current?.readyState === WebSocket.OPEN) {
wsRef.current.send(JSON.stringify({ type: 'approval', agent, task_id: taskId, approved }));
}
}, []);
const clearNotifications = useCallback((agentId) => {
setNotifications(prev => ({ ...prev, [agentId]: 0 }));
}, []);
return {
agents,
pendingTasks,
notifications,
connected,
refreshTrigger,
sendCommand,
sendApproval,
clearNotifications
};
}
```
- [ ] **Step 2: 커밋**
```bash
git add src/pages/agent-office/hooks/useAgentManager.js
git commit -m "refactor(agent-office): extend useAgentManager with lotto agent and refresh triggers"
```
---
### Task 18: useOfficeCanvas 재작성
**Files:**
- Rewrite: `src/pages/agent-office/hooks/useOfficeCanvas.js`
- [ ] **Step 1: useOfficeCanvas 재작성**
```javascript
// src/pages/agent-office/hooks/useOfficeCanvas.js
import { useRef, useEffect, useCallback } from 'react';
import { OfficeRenderer } from '../canvas/OfficeRenderer.js';
export function useOfficeCanvas() {
const canvasRef = useRef(null);
const rendererRef = useRef(null);
useEffect(() => {
if (!canvasRef.current) return;
const renderer = new OfficeRenderer(canvasRef.current);
rendererRef.current = renderer;
renderer.start();
const handleResize = () => renderer.resize();
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
renderer.destroy();
rendererRef.current = null;
};
}, []);
const updateAgentState = useCallback((agentId, state, detail) => {
rendererRef.current?.updateAgentState(agentId, state, detail);
}, []);
const setAgentNotification = useCallback((agentId, count) => {
rendererRef.current?.setAgentNotification(agentId, count);
}, []);
const setTheme = useCallback((themeName) => {
rendererRef.current?.setTheme(themeName);
}, []);
const setZoom = useCallback((level) => {
rendererRef.current?.setZoom(level);
}, []);
const hitTest = useCallback((clientX, clientY) => {
return rendererRef.current?.hitTest(clientX, clientY) || { type: 'empty' };
}, []);
const getZoom = useCallback(() => {
return rendererRef.current?.zoom || 2;
}, []);
return {
canvasRef,
updateAgentState,
setAgentNotification,
setTheme,
setZoom,
hitTest,
getZoom
};
}
```
- [ ] **Step 2: 커밋**
```bash
git add src/pages/agent-office/hooks/useOfficeCanvas.js
git commit -m "refactor(agent-office): rewrite useOfficeCanvas hook for new renderer API"
```
---
### Task 19: AgentOffice.jsx 재작성 (전체 화면 캔버스 + 사이드 패널)
**Files:**
- Rewrite: `src/pages/agent-office/AgentOffice.jsx`
- [ ] **Step 1: AgentOffice 전체 재작성**
```jsx
// src/pages/agent-office/AgentOffice.jsx
import { useState, useEffect, useCallback } from 'react';
import { useAgentManager } from './hooks/useAgentManager.js';
import { useOfficeCanvas } from './hooks/useOfficeCanvas.js';
import TopBar from './components/TopBar.jsx';
import SidePanel from './components/SidePanel.jsx';
import './AgentOffice.css';
export default function AgentOffice() {
const {
agents, pendingTasks, notifications, connected,
refreshTrigger, clearNotifications
} = useAgentManager();
const {
canvasRef, updateAgentState, setAgentNotification,
setTheme, setZoom, hitTest, getZoom
} = useOfficeCanvas();
const [selectedAgent, setSelectedAgent] = useState(null);
const [theme, setThemeState] = useState(localStorage.getItem('agent-office-theme') || 'modern');
const [zoom, setZoomState] = useState(2);
// WebSocket 상태 → 캔버스 동기화
useEffect(() => {
for (const [id, agentState] of Object.entries(agents)) {
updateAgentState(id, agentState.state, agentState.detail);
}
}, [agents, updateAgentState]);
// 알림 → 캔버스 동기화
useEffect(() => {
for (const [id, count] of Object.entries(notifications)) {
setAgentNotification(id, count);
}
}, [notifications, setAgentNotification]);
// 캔버스 클릭 핸들러
const handleCanvasClick = useCallback((e) => {
const result = hitTest(e.clientX, e.clientY);
if (result.type === 'agent') {
setSelectedAgent(result.id);
clearNotifications(result.id);
setAgentNotification(result.id, 0);
} else {
setSelectedAgent(null);
}
}, [hitTest, clearNotifications, setAgentNotification]);
// 테마 변경
const handleThemeChange = useCallback((name) => {
setThemeState(name);
setTheme(name);
}, [setTheme]);
// 줌 변경
const handleZoomChange = useCallback((level) => {
setZoomState(level);
setZoom(level);
}, [setZoom]);
// 선택된 에이전트의 pending task
const pendingTask = selectedAgent
? pendingTasks.find(t => t.agent_id === selectedAgent)
: null;
return (
{selectedAgent && (
setSelectedAgent(null)}
refreshTrigger={refreshTrigger}
/>
)}
);
}
```
- [ ] **Step 2: 커밋**
```bash
git add src/pages/agent-office/AgentOffice.jsx
git commit -m "refactor(agent-office): rewrite AgentOffice with full-screen canvas and side panel"
```
---
### Task 20: CSS 전체 재작성
**Files:**
- Rewrite: `src/pages/agent-office/AgentOffice.css`
- [ ] **Step 1: CSS 재작성**
```css
/* src/pages/agent-office/AgentOffice.css */
/* ===== Root Layout ===== */
.ao-root {
display: flex;
flex-direction: column;
height: 100vh;
background: #0d0d1a;
color: #ffffff;
font-family: 'Courier New', monospace;
overflow: hidden;
}
/* ===== Top Bar ===== */
.ao-topbar {
display: flex;
align-items: center;
justify-content: space-between;
height: 44px;
padding: 0 16px;
background: #1a1a2e;
border-bottom: 1px solid #333;
flex-shrink: 0;
}
.ao-topbar-left {
display: flex;
align-items: center;
gap: 12px;
}
.ao-topbar-title {
font-weight: bold;
font-size: 15px;
color: #8b5cf6;
}
.ao-topbar-status {
font-size: 11px;
}
.ao-topbar-status.connected { color: #22c55e; }
.ao-topbar-status.disconnected { color: #ef4444; }
.ao-topbar-right {
display: flex;
align-items: center;
gap: 10px;
}
.ao-topbar-select {
background: #2a2a3e;
color: #aaa;
border: 1px solid #444;
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
font-family: inherit;
}
.ao-topbar-zoom {
display: flex;
align-items: center;
gap: 4px;
}
.ao-topbar-zoom button {
background: #2a2a3e;
color: #aaa;
border: 1px solid #444;
width: 24px;
height: 24px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.ao-topbar-zoom button:disabled {
opacity: 0.3;
cursor: default;
}
.ao-topbar-zoom span {
color: #888;
font-size: 12px;
min-width: 28px;
text-align: center;
}
/* ===== Main Area ===== */
.ao-main {
flex: 1;
display: flex;
position: relative;
overflow: hidden;
}
.ao-canvas {
flex: 1;
cursor: grab;
display: block;
}
.ao-canvas:active {
cursor: grabbing;
}
/* ===== Side Panel ===== */
.ao-sidepanel {
width: 320px;
background: #111;
border-left: 1px solid #333;
display: flex;
flex-direction: column;
flex-shrink: 0;
animation: slideIn 0.2s ease-out;
}
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.ao-sidepanel-header {
padding: 12px;
border-bottom: 1px solid #333;
display: flex;
align-items: center;
justify-content: space-between;
}
.ao-sidepanel-agent {
display: flex;
align-items: center;
gap: 10px;
}
.ao-sidepanel-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.ao-sidepanel-name {
font-weight: bold;
font-size: 14px;
}
.ao-sidepanel-state {
font-size: 11px;
color: #22c55e;
}
.ao-sidepanel-close {
background: none;
border: none;
color: #666;
font-size: 24px;
cursor: pointer;
padding: 0 4px;
}
.ao-sidepanel-close:hover {
color: #fff;
}
/* Tabs */
.ao-sidepanel-tabs {
display: flex;
border-bottom: 1px solid #333;
}
.ao-sidepanel-tab {
flex: 1;
padding: 8px 4px;
text-align: center;
font-size: 12px;
font-family: inherit;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: #666;
cursor: pointer;
}
.ao-sidepanel-tab.active {
color: #8b5cf6;
border-bottom-color: #8b5cf6;
font-weight: bold;
}
.ao-sidepanel-tab:hover {
color: #aaa;
}
.ao-sidepanel-content {
flex: 1;
overflow-y: auto;
padding: 12px;
}
/* ===== Command Tab ===== */
.ao-command-tab { display: flex; flex-direction: column; gap: 12px; }
.ao-section { margin-bottom: 4px; }
.ao-section-label {
color: #888;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.ao-quick-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ao-btn-quick {
background: #2a2a4e;
color: #8b5cf6;
border: 1px solid #4c1d95;
padding: 5px 12px;
border-radius: 4px;
font-size: 11px;
font-family: inherit;
cursor: pointer;
}
.ao-btn-quick:hover { background: #3a3a5e; }
.ao-btn-quick:disabled { opacity: 0.4; }
.ao-param-row {
display: flex;
gap: 6px;
}
.ao-input {
flex: 1;
background: #1a1a2e;
border: 1px solid #333;
color: #fff;
padding: 7px 10px;
border-radius: 4px;
font-size: 12px;
font-family: inherit;
}
.ao-input::placeholder { color: #555; }
.ao-btn-send {
background: #4c1d95;
color: #fff;
border: none;
padding: 7px 14px;
border-radius: 4px;
font-size: 12px;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
}
.ao-btn-send:hover { background: #5b21b6; }
.ao-btn-send:disabled { opacity: 0.4; }
/* Approval */
.ao-approval-card {
background: rgba(146,64,14,0.15);
border: 1px solid #92400e;
border-radius: 6px;
padding: 10px;
}
.ao-approval-title {
color: #fbbf24;
font-size: 12px;
font-weight: bold;
margin-bottom: 4px;
}
.ao-approval-desc {
color: #ddd;
font-size: 11px;
margin-bottom: 8px;
word-break: break-all;
}
.ao-approval-actions {
display: flex;
gap: 6px;
}
.ao-btn-approve {
flex: 1;
background: #065f46;
color: #fff;
border: none;
padding: 7px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.ao-btn-reject {
flex: 1;
background: #7f1d1d;
color: #fff;
border: none;
padding: 7px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
/* ===== Task Tab ===== */
.ao-task-tab { display: flex; flex-direction: column; gap: 4px; }
.ao-task-item {
background: #1a1a2e;
border-radius: 4px;
padding: 8px;
cursor: pointer;
}
.ao-task-item:hover { background: #222240; }
.ao-task-header {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
}
.ao-task-type { color: #ccc; font-weight: bold; flex: 1; }
.ao-task-badge {
padding: 1px 6px;
border-radius: 3px;
font-size: 10px;
}
.ao-task-time { color: #666; font-size: 10px; }
.ao-task-result {
margin-top: 6px;
background: #0d0d1a;
padding: 6px;
border-radius: 3px;
font-size: 10px;
color: #aaa;
max-height: 200px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-all;
}
/* ===== Token Tab ===== */
.ao-token-tab { display: flex; flex-direction: column; gap: 12px; }
.ao-token-period {
display: flex;
gap: 4px;
}
.ao-btn-period {
flex: 1;
background: #1a1a2e;
color: #888;
border: 1px solid #333;
padding: 5px;
border-radius: 4px;
font-size: 11px;
font-family: inherit;
cursor: pointer;
}
.ao-btn-period.active {
background: #4c1d95;
color: #fff;
border-color: #4c1d95;
}
.ao-token-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.ao-token-card {
background: #1a1a2e;
border-radius: 6px;
padding: 10px;
text-align: center;
}
.ao-token-label {
font-size: 10px;
color: #888;
text-transform: uppercase;
margin-bottom: 4px;
}
.ao-token-value {
font-size: 18px;
font-weight: bold;
color: #fff;
}
.ao-token-bar { margin-top: 4px; }
.ao-token-bar-label { font-size: 10px; color: #888; margin-bottom: 4px; }
.ao-token-bar-track {
display: flex;
height: 8px;
border-radius: 4px;
overflow: hidden;
background: #1a1a2e;
}
.ao-token-bar-fill.input { background: #3b82f6; }
.ao-token-bar-fill.output { background: #8b5cf6; }
.ao-token-bar-legend {
display: flex;
gap: 12px;
font-size: 10px;
color: #888;
margin-top: 4px;
}
.ao-token-bar-legend .dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 4px;
}
.ao-token-bar-legend .dot.input { background: #3b82f6; }
.ao-token-bar-legend .dot.output { background: #8b5cf6; }
.ao-token-detail {
display: flex;
justify-content: space-between;
font-size: 10px;
color: #666;
}
/* ===== Log Tab ===== */
.ao-log-tab {
max-height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.ao-log-item {
display: flex;
gap: 6px;
font-size: 11px;
padding: 3px 0;
border-bottom: 1px solid #1a1a2e;
}
.ao-log-time { color: #555; min-width: 60px; }
.ao-log-level { min-width: 48px; font-weight: bold; }
.ao-log-msg { color: #ccc; word-break: break-all; }
/* ===== Common ===== */
.ao-empty {
color: #555;
text-align: center;
padding: 24px;
font-size: 13px;
}
/* ===== Mobile (< 768px) ===== */
@media (max-width: 768px) {
.ao-topbar-right { gap: 6px; }
.ao-topbar-select { font-size: 11px; padding: 2px 6px; }
.ao-main {
flex-direction: column;
}
.ao-canvas {
flex: 1;
}
/* Side panel → bottom sheet */
.ao-sidepanel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-height: 55vh;
border-left: none;
border-top: 1px solid #333;
border-radius: 16px 16px 0 0;
animation: slideUp 0.25s ease-out;
z-index: 100;
}
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.ao-sidepanel-header {
padding: 8px 12px;
}
.ao-sidepanel-header::before {
content: '';
display: block;
width: 32px;
height: 4px;
background: #555;
border-radius: 2px;
margin: 0 auto 8px;
}
.ao-sidepanel-tab {
font-size: 11px;
padding: 6px 2px;
}
.ao-sidepanel-content {
padding: 8px 12px;
padding-bottom: env(safe-area-inset-bottom, 16px);
}
}
```
- [ ] **Step 2: 커밋**
```bash
git add src/pages/agent-office/AgentOffice.css
git commit -m "refactor(agent-office): rewrite CSS for full-screen canvas layout with mobile bottom sheet"
```
---
### Task 21: 레거시 파일 정리
**Files:**
- Delete: `src/pages/agent-office/components/AgentColumn.jsx`
- Delete: `src/pages/agent-office/components/CommandColumn.jsx`
- Delete: `src/pages/agent-office/components/ChatPanel.jsx`
- Delete: `src/pages/agent-office/components/DocumentPanel.jsx`
- Delete: `src/pages/agent-office/canvas/SpriteSheet.js`
- [ ] **Step 1: 레거시 파일 삭제**
```bash
rm src/pages/agent-office/components/AgentColumn.jsx
rm src/pages/agent-office/components/CommandColumn.jsx
rm src/pages/agent-office/components/ChatPanel.jsx
rm src/pages/agent-office/components/DocumentPanel.jsx
rm src/pages/agent-office/canvas/SpriteSheet.js
```
- [ ] **Step 2: 빌드 확인**
```bash
npm run build
```
Expected: 빌드 성공 (삭제된 파일을 import하는 곳이 없어야 함)
- [ ] **Step 3: 커밋**
```bash
git add -A
git commit -m "chore(agent-office): remove legacy dashboard components replaced by v2 UI"
```
---
### Task 22: 통합 테스트 (브라우저 수동)
- [ ] **Step 1: 개발 서버 시작**
```bash
npm run dev
```
- [ ] **Step 2: 브라우저에서 http://localhost:3007/agent-office 접속 후 확인 항목**
1. 전체 화면에 픽셀 오피스 캔버스가 표시되는가
2. 5명의 에이전트(stock, music, blog, realestate, lotto)가 맵에 있는가
3. 마우스 휠로 줌 인/아웃이 되는가 (1x~4x)
4. 드래그로 패닝이 되는가
5. 에이전트 클릭 시 사이드 패널이 열리는가
6. 사이드 패널 4탭 (Commands, Tasks, Tokens, Logs)이 전환되는가
7. Quick Action 버튼이 에이전트별로 다른가
8. 빈 공간 클릭 시 사이드 패널이 닫히는가
9. 테마 드롭다운으로 Modern/Retro/Minimal 전환이 되는가
10. 상단 바에 연결 상태가 표시되는가
- [ ] **Step 3: 모바일 확인 (DevTools → 모바일 뷰)**
1. 캔버스가 전체 화면을 차지하는가
2. 에이전트 탭 시 바텀 시트가 올라오는가
3. 바텀 시트 닫기가 동작하는가
- [ ] **Step 4: 문제 수정 후 커밋**
```bash
git add -A
git commit -m "fix(agent-office): address integration issues from manual testing"
```
---
## Phase 6: 최종 검증
### Task 23: 백엔드 agent_move 메시지 확인
**Files:**
- Check: `web-backend/agent-office/app/agents/base.py`
- Check: `web-backend/agent-office/app/websocket_manager.py`
- [ ] **Step 1: base.py의 transition 메서드에서 break 상태 시 agent_move 전송 확인**
`base.py`의 `transition()` 메서드를 읽고, `break` 상태 전환 시 `agent_move` WebSocket 메시지가 broadcast되는지 확인.
만약 누락되어 있다면 `transition()` 내부에 다음을 추가:
```python
# break 전환 시 프론트엔드에 이동 알림
if new_state == "break":
await self._ws_manager.broadcast_move(self.agent_id, "break_room")
elif new_state in ("working", "reporting", "waiting"):
await self._ws_manager.broadcast_move(self.agent_id, "desk")
```
단, 현재 프론트엔드는 `agent_state` 메시지만으로 이동을 처리하도록 설계했으므로 (`AgentSprite.onStateChange`가 상태에 따라 자동 이동), `agent_move`는 선택적. 프론트엔드가 `agent_state`만 사용하여 정상 동작하면 백엔드 수정 불필요.
- [ ] **Step 2: 확인 결과에 따라 커밋 (변경 있을 때만)**
---
### Task 24: CLAUDE.md 업데이트
**Files:**
- Modify: `web-ui` 저장소의 CLAUDE.md (해당사항 있으면)
- [ ] **Step 1: 프론트엔드 파일 구조 변경 반영**
Agent Office 섹션이 있다면, v2 파일 구조 (canvas/, components/, hooks/) 반영.
- [ ] **Step 2: 커밋**
```bash
git add CLAUDE.md
git commit -m "docs: update CLAUDE.md with Agent Office v2 file structure"
```
---
## Summary
| Phase | Tasks | 설명 |
|-------|-------|------|
| 1. 캔버스 엔진 | 1-6 | 테마, 맵, BFS, 타일맵, 가구, 게임루프 |
| 2. 에이전트 시스템 | 7-9 | 프로시저럴 스프라이트, AgentSprite, SpriteLoader |
| 3. 오버레이 | 10 | 이름, 배지, 말풍선, 알림 |
| 4. 사이드 패널 | 11-16 | TopBar, CommandTab, TaskTab, TokenTab, LogTab, SidePanel |
| 5. 페이지 통합 | 17-22 | Hook 재작성, AgentOffice 재작성, CSS, 레거시 정리, 테스트 |
| 6. 최종 검증 | 23-24 | 백엔드 확인, 문서 업데이트 |