+
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 | 백엔드 확인, 문서 업데이트 |