feat(stock): 증권사별 보유 현황에 총 매입 금액 추가 표기

종목수 · 총 매입 · 평가 · 손익 · 예수금 순으로 노출. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
fix(stock): 브로커 총 매입 금액을 매입가 단순 합계로 수정
2026-04-15 02:17:32 +09:00 · 2026-04-15 02:10:17 +09:00 · 2026-04-15 01:58:10 +09:00 · 2026-04-15 00:19:32 +09:00 · 2026-04-13 04:14:50 +09:00 · 2026-04-13 03:06:19 +09:00
18 changed files with 1124 additions and 380 deletions
--- a/src/api.js
+++ b/src/api.js
@@ -598,4 +598,6 @@ export const getPendingTasks   = ()           => apiGet('/api/agent-office/tasks
 export const sendAgentCommand  = (agent, action, params={}) => apiPost('/api/agent-office/command', { agent, action, params });
 export const approveAgentTask  = (agent, task_id, approved, feedback='') => apiPost('/api/agent-office/approve', { agent, task_id, approved, feedback });
 export const getAgentStates    = ()           => apiGet('/api/agent-office/states');
+export const getActivityFeed   = (limit=50, offset=0) => apiGet(`/api/agent-office/activity?limit=${limit}&offset=${offset}`);
+export const getAgentTokenUsage = (id, days=1) => apiGet(`/api/agent-office/agents/${id}/token-usage?days=${days}`);

--- a/src/pages/agent-office/AgentOffice.css
+++ b/src/pages/agent-office/AgentOffice.css
@@ -11,13 +11,14 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 12px 20px;
+  padding: 8px 20px;
  background: #1a1a2e;
  border-bottom: 1px solid #2a2a4a;
+  flex-shrink: 0;
 }

 .ao-title {
-  font-size: 1.4rem;
+  font-size: 1.2rem;
  color: #8b5cf6;
  margin: 0;
  letter-spacing: 2px;
@@ -27,7 +28,7 @@
  display: flex;
  align-items: center;
  gap: 8px;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
  color: #888;
 }

@@ -39,152 +40,245 @@
 .ao-dot--on { background: #34d399; }
 .ao-dot--off { background: #f87171; }

-.ao-workspace {
+/* Dashboard */
+.ao-dashboard {
+  display: flex;
+  gap: 1px;
+  background: #2a2a4a;
  flex: 1;
-  position: relative;
+  min-height: 0;
  overflow: hidden;
 }

+/* Agent Column */
+.ao-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #0d0d1a;
+  min-width: 0;
+  overflow-y: auto;
+}
+
+.ao-col-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 3px solid;
+  background: #1a1a2e;
+  flex-shrink: 0;
+}
+
+.ao-col-chevron {
+  display: none;
+  color: #666;
+  font-size: 0.8rem;
+  margin-left: 4px;
+}
+
+.ao-col-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ao-col-name {
+  font-weight: bold;
+  font-size: 0.9rem;
+}
+
+.ao-col-state {
+  font-size: 0.7rem;
+  padding: 2px 8px;
+  border-radius: 8px;
+  text-transform: uppercase;
+  margin-left: auto;
+}
+.ao-col-state--idle { background: #333; color: #888; }
+.ao-col-state--working { background: #3730a3; color: #a5b4fc; }
+.ao-col-state--waiting { background: #92400e; color: #fbbf24; }
+.ao-col-state--reporting { background: #065f46; color: #34d399; }
+.ao-col-state--break { background: #4c1d95; color: #c4b5fd; }
+.ao-col-state--offline { background: #1f1f1f; color: #555; }
+
+.ao-col-tokens {
+  font-size: 0.7rem;
+  color: #8b5cf6;
+  background: rgba(139, 92, 246, 0.12);
+  padding: 2px 8px;
+  border-radius: 8px;
+  margin-left: 6px;
+  cursor: help;
+  font-family: 'Courier New', monospace;
+  white-space: nowrap;
+}
+
+.ao-col-badge {
+  background: #f43f5e;
+  color: #fff;
+  font-size: 0.65rem;
+  padding: 1px 5px;
+  border-radius: 6px;
+  font-weight: bold;
+}
+
+.ao-col-detail {
+  padding: 6px 12px;
+  font-size: 0.8rem;
+  color: #a78bfa;
+  background: rgba(139, 92, 246, 0.05);
+  border-bottom: 1px solid #2a2a4a;
+  flex-shrink: 0;
+}
+
+.ao-col-approval {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(251, 191, 36, 0.08);
+  border-bottom: 1px solid #2a2a4a;
+  font-size: 0.8rem;
+  color: #fbbf24;
+  flex-shrink: 0;
+}
+
+.ao-col-commands {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 8px 12px;
+  border-bottom: 1px solid #1a1a2e;
+  flex-shrink: 0;
+}
+
+.ao-col-input {
+  display: flex;
+  gap: 6px;
+  padding: 6px 12px;
+  border-bottom: 1px solid #1a1a2e;
+  flex-shrink: 0;
+}
+
+.ao-col-tasks {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.ao-col-tasks-title {
+  padding: 4px 12px;
+  font-size: 0.7rem;
+  color: #555;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.ao-col-empty {
+  padding: 12px;
+  text-align: center;
+  color: #444;
+  font-size: 0.8rem;
+}
+
+.ao-col-task {
+  padding: 6px 12px;
+  border-bottom: 1px solid rgba(255,255,255,0.03);
+}
+
+.ao-col-task-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ao-col-task-type {
+  font-size: 0.8rem;
+  color: #ccc;
+}
+
+.ao-col-task-badge {
+  font-size: 0.65rem;
+  padding: 1px 6px;
+  border-radius: 4px;
+  color: #fff;
+}
+
+.ao-col-task-time {
+  font-size: 0.7rem;
+  color: #555;
+  margin-top: 2px;
+}
+
+.ao-col-task-detail {
+  margin-top: 4px;
+  font-size: 0.7rem;
+}
+.ao-col-task-detail summary {
+  cursor: pointer;
+  color: #8b5cf6;
+}
+.ao-col-task-detail pre {
+  color: #888;
+  white-space: pre-wrap;
+  margin: 4px 0 0;
+  max-height: 120px;
+  overflow-y: auto;
+}
+
+/* Command Column */
+.ao-cmd-form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 12px;
+  border-bottom: 1px solid #1a1a2e;
+  flex-shrink: 0;
+}
+
+.ao-cmd-row {
+  display: flex;
+  gap: 6px;
+}
+
+.ao-cmd-select {
+  flex: 1;
+  padding: 6px 8px;
+  background: #111;
+  border: 1px solid #333;
+  border-radius: 6px;
+  color: #e0e0e0;
+  font-size: 0.8rem;
+  font-family: inherit;
+}
+.ao-cmd-select:focus { border-color: #8b5cf6; outline: none; }
+
+.ao-cmd-send {
+  width: 100%;
+}
+
+/* Office Section */
+.ao-office-section {
+  height: 280px;
+  flex-shrink: 0;
+  border-top: 2px solid #2a2a4a;
+  position: relative;
+}
+
 .ao-canvas-container {
  width: 100%;
  height: 100%;
 }

-.ao-agent-bar {
-  position: absolute;
-  top: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 8px;
-  padding: 6px 12px;
-  background: rgba(0, 0, 0, 0.6);
-  border-radius: 20px;
-  backdrop-filter: blur(8px);
-}
-
-.ao-agent-chip {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
-  border: 1px solid #333;
-  border-radius: 12px;
-  background: transparent;
-  color: #ccc;
-  font-size: 0.8rem;
-  cursor: pointer;
-  font-family: inherit;
-}
-.ao-agent-chip:hover { border-color: #8b5cf6; }
-.ao-agent-chip--selected { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.15); }
-.ao-agent-chip--alert { animation: ao-pulse 1s infinite; }
-
-@keyframes ao-pulse {
-  0%, 100% { border-color: #fbbf24; }
-  50% { border-color: #f59e0b; box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
-}
-
-.ao-chip-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-.ao-chip-dot--idle { background: #666; }
-.ao-chip-dot--working { background: #818cf8; }
-.ao-chip-dot--waiting { background: #fbbf24; }
-.ao-chip-dot--reporting { background: #34d399; }
-.ao-chip-dot--break { background: #a78bfa; }
-
-.ao-chip-badge {
-  background: #f87171;
-  color: #fff;
-  font-size: 0.65rem;
-  padding: 0 4px;
-  border-radius: 4px;
-  font-weight: bold;
-}
-
-.ao-pending-count {
-  color: #fbbf24;
-  font-size: 0.75rem;
-  align-self: center;
-}
-
-.ao-chat-panel {
-  position: absolute;
-  right: 16px;
-  top: 60px;
-  width: 340px;
-  max-height: calc(100% - 80px);
-  background: rgba(26, 26, 46, 0.95);
-  border: 1px solid #333;
-  border-radius: 12px;
-  overflow-y: auto;
-  backdrop-filter: blur(12px);
-}
-
-.ao-chat-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border-bottom: 1px solid #2a2a4a;
-}
-
-.ao-chat-title {
-  flex: 1;
-  font-weight: bold;
-  color: #e0e0e0;
-}
-
-.ao-chat-state {
-  font-size: 0.75rem;
-  padding: 2px 8px;
-  border-radius: 8px;
-  text-transform: uppercase;
-}
-.ao-chat-state--idle { background: #333; }
-.ao-chat-state--working { background: #3730a3; }
-.ao-chat-state--waiting { background: #92400e; }
-.ao-chat-state--break { background: #4c1d95; }
-
-.ao-chat-close {
-  background: none;
-  border: none;
-  color: #888;
-  font-size: 1.2rem;
-  cursor: pointer;
-}
-.ao-chat-close:hover { color: #fff; }
-
-.ao-chat-detail {
-  padding: 8px 16px;
-  color: #aaa;
-  font-size: 0.85rem;
-}
-
-.ao-chat-approval {
-  padding: 12px 16px;
-  background: rgba(251, 191, 36, 0.1);
-  border-top: 1px solid #2a2a4a;
-  border-bottom: 1px solid #2a2a4a;
-}
-.ao-chat-approval p {
-  margin: 0 0 8px;
-  color: #fbbf24;
-  font-size: 0.85rem;
-}
-.ao-chat-approval-btns {
-  display: flex;
-  gap: 8px;
-}
-
+/* Shared */
 .ao-btn {
-  padding: 6px 16px;
+  padding: 4px 12px;
  border: none;
  border-radius: 6px;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
 }
@@ -195,137 +289,100 @@
 .ao-btn--send { background: #4c1d95; color: #c4b5fd; }
 .ao-btn--send:hover { background: #5b21b6; }

-.ao-chat-commands {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 12px 16px;
-}
-
 .ao-cmd-btn {
-  padding: 6px 12px;
+  padding: 4px 10px;
  border: 1px solid #333;
-  border-radius: 8px;
+  border-radius: 6px;
  background: transparent;
  color: #ccc;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
 }
 .ao-cmd-btn:hover { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.1); }

-.ao-chat-input-area {
-  display: flex;
-  gap: 8px;
-  padding: 8px 16px 12px;
-}
 .ao-chat-input {
  flex: 1;
-  padding: 8px 12px;
+  padding: 6px 10px;
  background: #111;
  border: 1px solid #333;
  border-radius: 6px;
  color: #e0e0e0;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
  font-family: inherit;
+  min-width: 0;
 }
 .ao-chat-input:focus { border-color: #8b5cf6; outline: none; }

-.ao-chat-result {
-  padding: 8px 16px;
-  border-top: 1px solid #2a2a4a;
-}
-.ao-chat-result h4 {
-  margin: 0 0 8px;
-  font-size: 0.8rem;
-  color: #888;
-}
-.ao-chat-result pre {
-  font-size: 0.75rem;
-  color: #aaa;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  margin: 0;
-}
-
-.ao-history-panel {
-  position: absolute;
-  left: 16px;
-  top: 60px;
-  width: 340px;
-  max-height: calc(100% - 80px);
-  background: rgba(26, 26, 46, 0.95);
-  border: 1px solid #333;
-  border-radius: 12px;
-  overflow-y: auto;
-  backdrop-filter: blur(12px);
-}
-
-.ao-history-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid #2a2a4a;
-  font-weight: bold;
-}
-
-.ao-history-list { padding: 8px; }
-.ao-history-empty { text-align: center; color: #666; padding: 20px; }
-
-.ao-history-item {
-  padding: 10px 12px;
-  border-bottom: 1px solid #1a1a2e;
-}
-.ao-history-item:last-child { border-bottom: none; }
-
-.ao-history-item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.ao-history-type { font-size: 0.85rem; color: #ccc; }
-.ao-history-badge {
+.ao-doc-tg-status {
  font-size: 0.7rem;
-  padding: 2px 8px;
-  border-radius: 4px;
-  color: #fff;
-}
-.ao-history-time {
-  font-size: 0.75rem;
-  color: #666;
-  margin-top: 4px;
-}
-.ao-history-detail {
-  margin-top: 6px;
-  font-size: 0.75rem;
-}
-.ao-history-detail summary {
-  cursor: pointer;
-  color: #8b5cf6;
-}
-.ao-history-detail pre {
-  color: #aaa;
-  white-space: pre-wrap;
-  margin: 4px 0 0;
+  margin-left: 4px;
 }

-.ao-toolbar {
-  display: flex;
-  gap: 8px;
-  padding: 8px 20px;
-  background: #1a1a2e;
-  border-top: 1px solid #2a2a4a;
-}
+/* Mobile: vertical stack + accordion */
+@media (max-width: 768px) {
+  .ao-page {
+    height: auto;
+    min-height: 100vh;
+  }

-.ao-tool-btn {
-  padding: 6px 14px;
-  border: 1px solid #333;
-  border-radius: 6px;
-  background: transparent;
-  color: #aaa;
-  font-size: 0.8rem;
-  cursor: pointer;
-  font-family: inherit;
+  .ao-dashboard {
+    flex-direction: column;
+    gap: 1px;
+    overflow: visible;
+    flex: none;
+  }
+
+  .ao-col {
+    flex: none;
+    overflow: visible;
+  }
+
+  .ao-col-header {
+    cursor: pointer;
+    user-select: none;
+    padding: 12px 14px;
+  }
+
+  .ao-col-chevron {
+    display: inline;
+  }
+
+  .ao-col--collapsed .ao-col-body {
+    display: none;
+  }
+
+  .ao-col--attention {
+    box-shadow: inset 3px 0 0 #fbbf24;
+  }
+
+  .ao-col-tasks {
+    max-height: 260px;
+  }
+
+  .ao-office-section {
+    height: 140px;
+    order: -1;
+    border-top: none;
+    border-bottom: 2px solid #2a2a4a;
+  }
+
+  .ao-title {
+    font-size: 1rem;
+    letter-spacing: 1px;
+  }
+
+  .ao-header {
+    padding: 8px 12px;
+  }
+
+  .ao-col-commands {
+    gap: 6px;
+  }
+
+  .ao-cmd-btn,
+  .ao-btn {
+    padding: 6px 12px;
+    font-size: 0.8rem;
+  }
 }
-.ao-tool-btn:hover { border-color: #8b5cf6; color: #e0e0e0; }
--- a/src/pages/agent-office/AgentOffice.jsx
+++ b/src/pages/agent-office/AgentOffice.jsx
@@ -1,22 +1,31 @@
 import React, { useRef, useState, useCallback, useEffect } from 'react';
 import { useAgentManager } from './hooks/useAgentManager';
 import { useOfficeCanvas } from './hooks/useOfficeCanvas';
-import ChatPanel from './components/ChatPanel';
-import TaskHistory from './components/TaskHistory';
+import AgentColumn from './components/AgentColumn';
+import CommandColumn from './components/CommandColumn';
 import './AgentOffice.css';

+const AGENT_META = {
+  stock: { name: '주식 트레이더', color: '#4488cc' },
+  music: { name: '음악 프로듀서', color: '#44aa88' },
+  blog: { name: '블로그 마케터', color: '#d97706' },
+  realestate: { name: '청약 애널리스트', color: '#c026d3' },
+};
+
+const AGENT_IDS = ['stock', 'music', 'blog', 'realestate'];
+
 export function Component() {
  const canvasContainerRef = useRef(null);
-  const [selectedAgent, setSelectedAgent] = useState(null);
-  const [showHistory, setShowHistory] = useState(null);

-  const { agents, pendingTasks, connected, sendCommand, sendApproval } = useAgentManager();
+  const { agents, pendingTasks, connected, notifications, sendCommand, sendApproval, clearNotifications } = useAgentManager();

  const handleAgentClick = useCallback((agentId) => {
-    setSelectedAgent(prev => prev === agentId ? null : agentId);
-  }, []);
+    clearNotifications(agentId);
+  }, [clearNotifications]);

-  const { updateAgentState, moveAgent } = useOfficeCanvas(canvasContainerRef, handleAgentClick);
+  const handleCeoClick = useCallback(() => {}, []);
+
+  const { updateAgentState, setAgentNotification, setCeoDocBadge } = useOfficeCanvas(canvasContainerRef, handleAgentClick, handleCeoClick);

  useEffect(() => {
    for (const [id, info] of Object.entries(agents)) {
@@ -24,6 +33,20 @@ export function Component() {
    }
  }, [agents, updateAgentState]);

+  useEffect(() => {
+    for (const [id, count] of Object.entries(notifications)) {
+      setAgentNotification(id, count);
+    }
+    for (const id of Object.keys(agents)) {
+      if (!notifications[id]) setAgentNotification(id, 0);
+    }
+  }, [notifications, agents, setAgentNotification]);
+
+  useEffect(() => {
+    const total = Object.values(notifications).reduce((s, n) => s + n, 0);
+    setCeoDocBadge(total);
+  }, [notifications, setCeoDocBadge]);
+
  return (
    <div className="ao-page">
      <div className="ao-header">
@@ -34,51 +57,27 @@ export function Component() {
        </div>
      </div>

-      <div className="ao-workspace">
-        <div className="ao-canvas-container" ref={canvasContainerRef} />
-
-        <div className="ao-agent-bar">
-          {Object.entries(agents).map(([id, info]) => (
-            <button
-              key={id}
-              className={`ao-agent-chip ${info.state === 'waiting' ? 'ao-agent-chip--alert' : ''} ${selectedAgent === id ? 'ao-agent-chip--selected' : ''}`}
-              onClick={() => handleAgentClick(id)}
-            >
-              <span className={`ao-chip-dot ao-chip-dot--${info.state}`} />
-              {id}
-              {info.state === 'waiting' && <span className="ao-chip-badge">!</span>}
-            </button>
-          ))}
-          {pendingTasks.length > 0 && (
-            <span className="ao-pending-count">{pendingTasks.length} pending</span>
-          )}
-        </div>
-
-        {selectedAgent && (
-          <ChatPanel
-            agentId={selectedAgent}
-            agentState={agents[selectedAgent]}
+      <div className="ao-dashboard">
+        {AGENT_IDS.map(id => (
+          <AgentColumn
+            key={id}
+            agentId={id}
+            meta={AGENT_META[id]}
+            agentState={agents[id]}
+            notification={notifications[id] || 0}
            onCommand={sendCommand}
            onApproval={sendApproval}
-            onClose={() => setSelectedAgent(null)}
+            onClearNotification={() => clearNotifications(id)}
          />
-        )}
-
-        {showHistory && (
-          <TaskHistory
-            agentId={showHistory}
-            onClose={() => setShowHistory(null)}
-          />
-        )}
+        ))}
+        <CommandColumn
+          agents={agents}
+          onCommand={sendCommand}
+        />
      </div>

-      <div className="ao-toolbar">
-        {Object.keys(agents).map(id => (
-          <button key={id} className="ao-tool-btn"
-            onClick={() => setShowHistory(prev => prev === id ? null : id)}>
-            📋 {id} 이력
-          </button>
-        ))}
+      <div className="ao-office-section">
+        <div className="ao-canvas-container" ref={canvasContainerRef} />
      </div>
    </div>
  );
--- a/src/pages/agent-office/assets/office-map.json
+++ b/src/pages/agent-office/assets/office-map.json
@@ -23,8 +23,8 @@
  "furniture": [
    {"type": "desk", "x": 2, "y": 1, "label": "Stock"},
    {"type": "desk", "x": 7, "y": 1, "label": "Music"},
-    {"type": "desk", "x": 12, "y": 1, "label": "Claude"},
-    {"type": "desk", "x": 17, "y": 1, "label": "(빈)"},
+    {"type": "desk", "x": 12, "y": 1, "label": "Blog"},
+    {"type": "desk", "x": 17, "y": 1, "label": "Realestate"},
    {"type": "table", "x": 8, "y": 6, "w": 4, "h": 2, "label": "회의 테이블"},
    {"type": "sofa", "x": 1, "y": 10, "label": "휴게실"},
    {"type": "coffee", "x": 3, "y": 10, "label": "☕"},
@@ -33,7 +33,8 @@
  "waypoints": {
    "stock_desk": {"x": 2, "y": 2},
    "music_desk": {"x": 7, "y": 2},
-    "claude_desk": {"x": 12, "y": 2},
+    "blog_desk": {"x": 12, "y": 2},
+    "realestate_desk": {"x": 17, "y": 2},
    "meeting_table": {"x": 9, "y": 7},
    "break_room": {"x": 2, "y": 11},
    "ceo_desk": {"x": 16, "y": 11}
--- a/src/pages/agent-office/canvas/AgentSprite.js
+++ b/src/pages/agent-office/canvas/AgentSprite.js
@@ -6,6 +6,7 @@ export class AgentSprite {
    this.waypoints = waypoints;
    this.state = 'idle';
    this.detail = '';
+    this.notificationCount = 0;

    const deskKey = `${agentId}_desk`;
    const desk = waypoints[deskKey] || { x: 5, y: 3 };
@@ -20,6 +21,10 @@ export class AgentSprite {
    this._moveSpeed = 0.05;
  }

+  setNotification(count) {
+    this.notificationCount = count;
+  }
+
  setState(newState, detail = '') {
    this.state = newState;
    this.detail = detail;
--- a/src/pages/agent-office/canvas/OfficeRenderer.js
+++ b/src/pages/agent-office/canvas/OfficeRenderer.js
@@ -1,6 +1,6 @@
 import { drawTileMap } from './TileMap';
 import { AgentSprite } from './AgentSprite';
-import { getCharLabel } from './SpriteSheet';
+import { getCharLabel, drawNotificationBadge } from './SpriteSheet';

 const STATUS_ICONS = {
  idle: null,
@@ -19,8 +19,10 @@ export class OfficeRenderer {
    this.agents = {};
    this._animId = null;
    this._onClick = null;
+    this._onCeoClick = null;
+    this._ceoDocBadge = 0;

-    const agentIds = ['stock', 'music'];
+    const agentIds = ['stock', 'music', 'blog', 'realestate'];
    for (const id of agentIds) {
      this.agents[id] = new AgentSprite(id, mapData.waypoints);
    }
@@ -56,6 +58,21 @@ export class OfficeRenderer {
        return id;
      }
    }
+    // CEO desk click detection
+    const ceo = this.mapData.waypoints.ceo_desk;
+    if (ceo) {
+      const { scale, offsetX, offsetY, tileSize } = this.renderInfo;
+      const cx = offsetX + ceo.x * tileSize * scale;
+      const cy = offsetY + ceo.y * tileSize * scale;
+      const hitW = 5 * tileSize * scale;
+      const hitH = 2 * tileSize * scale;
+      if (canvasX >= cx - tileSize * scale && canvasY >= cy - tileSize * scale &&
+          canvasX <= cx + hitW && canvasY <= cy + hitH) {
+        if (this._onCeoClick) this._onCeoClick();
+        return 'ceo_desk';
+      }
+    }
+
    return null;
  }

@@ -76,6 +93,19 @@ export class OfficeRenderer {
    }
  }

+  setOnCeoClick(handler) {
+    this._onCeoClick = handler;
+  }
+
+  setCeoDocBadge(count) {
+    this._ceoDocBadge = count;
+  }
+
+  setAgentNotification(agentId, count) {
+    const sprite = this.agents[agentId];
+    if (sprite) sprite.setNotification(count);
+  }
+
  _loop(timestamp) {
    const { ctx, canvas, mapData } = this;

@@ -95,6 +125,9 @@ export class OfficeRenderer {
      this._drawOverlay(ctx, sprite, id);
    }

+    // CEO desk document icon
+    this._drawCeoDoc(ctx);
+
    this._animId = requestAnimationFrame(this._loop);
  }

@@ -111,6 +144,11 @@ export class OfficeRenderer {
      ctx.fillText(icon, cx, cy - 15 * scale);
    }

+    // Notification badge (separate from status icon)
+    if (sprite.notificationCount > 0) {
+      drawNotificationBadge(ctx, cx, cy - 15 * scale, sprite.notificationCount, scale * 1.5);
+    }
+
    ctx.fillStyle = 'rgba(255,255,255,0.7)';
    ctx.font = `${8 * scale}px monospace`;
    ctx.textAlign = 'center';
@@ -126,4 +164,48 @@ export class OfficeRenderer {
      ctx.fillText(sprite.detail, cx, bubbleY);
    }
  }
+
+  _drawCeoDoc(ctx) {
+    if (!this.renderInfo) return;
+    const ceo = this.mapData.waypoints.ceo_desk;
+    if (!ceo) return;
+
+    const { scale, offsetX, offsetY, tileSize } = this.renderInfo;
+    const dx = offsetX + (ceo.x - 1) * tileSize * scale;
+    const dy = offsetY + (ceo.y - 1) * tileSize * scale;
+    const docW = 12 * scale;
+    const docH = 16 * scale;
+
+    // Paper
+    ctx.fillStyle = '#e8e0d0';
+    ctx.fillRect(dx, dy, docW, docH);
+    // Lines on paper
+    ctx.fillStyle = '#bbb';
+    for (let i = 0; i < 4; i++) {
+      ctx.fillRect(dx + 2 * scale, dy + (3 + i * 3) * scale, 8 * scale, 1);
+    }
+    // Folded corner
+    ctx.fillStyle = '#d0c8b8';
+    ctx.beginPath();
+    ctx.moveTo(dx + docW - 3 * scale, dy);
+    ctx.lineTo(dx + docW, dy + 3 * scale);
+    ctx.lineTo(dx + docW - 3 * scale, dy + 3 * scale);
+    ctx.fill();
+
+    // Badge on document
+    if (this._ceoDocBadge > 0) {
+      const bx = dx + docW;
+      const by = dy;
+      const r = 4 * scale;
+      ctx.beginPath();
+      ctx.arc(bx, by, r, 0, Math.PI * 2);
+      ctx.fillStyle = '#f43f5e';
+      ctx.fill();
+      ctx.fillStyle = '#fff';
+      ctx.font = `bold ${5 * scale}px monospace`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(this._ceoDocBadge > 9 ? '9+' : String(this._ceoDocBadge), bx, by);
+    }
+  }
 }
--- a/src/pages/agent-office/canvas/SpriteSheet.js
+++ b/src/pages/agent-office/canvas/SpriteSheet.js
@@ -1,6 +1,8 @@
 const PIXEL_CHARS = {
  stock: { body: '#4488cc', accent: '#cc4444', label: '주식', hair: '#332222' },
  music: { body: '#44aa88', accent: '#ffaa00', label: '음악', hair: '#443322' },
+  blog: { body: '#d97706', accent: '#fde68a', label: '블로그', hair: '#3b2a1a' },
+  realestate: { body: '#c026d3', accent: '#86efac', label: '청약', hair: '#2a2a3a' },
  claude: { body: '#8855cc', accent: '#cc88ff', label: 'Claude', hair: '#554466' },
 };

@@ -57,6 +59,14 @@ export function drawAgent(ctx, agentId, x, y, state, frameIndex, scale = 2) {
    ctx.fillRect(-4 * s, -4 * s, 1 * s, 4 * s);
    ctx.fillRect(3 * s, -4 * s, 1 * s, 4 * s);
    ctx.fillRect(-4 * s, -5 * s, 8 * s, 1 * s);
+  } else if (agentId === 'blog') {
+    // 노트북 액센트 (무릎 위)
+    ctx.fillRect(-3 * s, 6 * s, 6 * s, 1 * s);
+    ctx.fillRect(-3 * s, 7 * s, 6 * s, 2 * s);
+  } else if (agentId === 'realestate') {
+    // 서류 가방 액센트 (손 옆)
+    ctx.fillRect(3 * s, 4 * s, 2 * s, 3 * s);
+    ctx.fillRect(3 * s, 3 * s, 2 * s, 1 * s);
  } else if (agentId === 'claude') {
    ctx.globalAlpha = 0.3 + 0.2 * Math.sin(Date.now() / 500);
    ctx.fillRect(-4 * s, -6 * s, 8 * s, 1 * s);
@@ -87,3 +97,25 @@ export function getAnimSpeed(state) {
 export function getCharLabel(agentId) {
  return (PIXEL_CHARS[agentId] || {}).label || agentId;
 }
+
+export function drawNotificationBadge(ctx, x, y, count, scale = 2) {
+  const s = scale;
+  const badgeX = x + 5 * s;
+  const badgeY = y - 8 * s;
+  const radius = 5 * s;
+
+  ctx.beginPath();
+  ctx.arc(badgeX, badgeY, radius, 0, Math.PI * 2);
+  ctx.fillStyle = '#f43f5e';
+  ctx.fill();
+
+  ctx.strokeStyle = '#fff';
+  ctx.lineWidth = 1;
+  ctx.stroke();
+
+  ctx.fillStyle = '#fff';
+  ctx.font = `bold ${7 * s}px monospace`;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText('!', badgeX, badgeY);
+}
--- a/src/pages/agent-office/components/AgentColumn.jsx
+++ b/src/pages/agent-office/components/AgentColumn.jsx
@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from 'react';
+import { getAgentTasks, getAgentTokenUsage } from '../../../api';
+
+const STATUS_BADGE = {
+  pending: { label: '대기', bg: '#92400e' },
+  approved: { label: '승인됨', bg: '#1e40af' },
+  working: { label: '진행중', bg: '#3730a3' },
+  succeeded: { label: '완료', bg: '#065f46' },
+  failed: { label: '실패', bg: '#7f1d1d' },
+  rejected: { label: '거절됨', bg: '#9a3412' },
+};
+
+const AGENT_COMMANDS = {
+  stock: [
+    { action: 'fetch_news', label: '뉴스 수집', icon: '📰' },
+    { action: 'list_alerts', label: '알람 목록', icon: '🔔' },
+    { action: 'test_telegram', label: 'TG 테스트', icon: '📨' },
+  ],
+  music: [
+    { action: 'compose', label: '작곡 시작', icon: '🎵', needsInput: true },
+    { action: 'credits', label: '크레딧', icon: '💳' },
+  ],
+  blog: [
+    { action: 'research', label: '키워드 리서치', icon: '🔍', needsInput: true },
+    { action: 'list_trend_keywords', label: '트렌드 목록', icon: '📋' },
+  ],
+  realestate: [
+    { action: 'fetch_matches', label: '매칭 리포트', icon: '🏢' },
+    { action: 'dashboard', label: '대시보드', icon: '📊' },
+  ],
+};
+
+const AgentColumn = ({ agentId, meta, agentState, notification, onCommand, onApproval, onClearNotification }) => {
+  const [tasks, setTasks] = useState([]);
+  const [input, setInput] = useState('');
+  const [activeCommand, setActiveCommand] = useState(null);
+  const [tokenUsage, setTokenUsage] = useState(null);
+  const [expanded, setExpanded] = useState(false);
+
+  const state = agentState || { state: 'offline' };
+  const commands = AGENT_COMMANDS[agentId] || [];
+  const needsAttention = state.state === 'waiting' || notification > 0;
+  const isOpen = expanded || needsAttention;
+
+  useEffect(() => {
+    getAgentTasks(agentId, 10)
+      .then(d => setTasks(d.tasks || []))
+      .catch(() => setTasks([]));
+  }, [agentId]);
+
+  // Refresh tasks when state changes to idle (task likely completed)
+  useEffect(() => {
+    if (state.state === 'idle' && state.detail) {
+      getAgentTasks(agentId, 10)
+        .then(d => setTasks(d.tasks || []))
+        .catch(() => {});
+    }
+  }, [agentId, state.state, state.detail]);
+
+  // 오늘자 AI 토큰 사용량 폴링 (30초 간격 + 작업 완료 시 즉시 갱신)
+  useEffect(() => {
+    let cancelled = false;
+    const fetchUsage = () => {
+      getAgentTokenUsage(agentId, 1)
+        .then(d => { if (!cancelled) setTokenUsage(d); })
+        .catch(() => {});
+    };
+    fetchUsage();
+    const interval = setInterval(fetchUsage, 30000);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [agentId, state.state, state.detail]);
+
+  const handleQuickAction = (cmd) => {
+    if (cmd.needsInput) {
+      setActiveCommand(cmd.action);
+    } else {
+      onCommand(agentId, cmd.action, {});
+    }
+    onClearNotification();
+  };
+
+  const handleSend = () => {
+    if (!input.trim() || !activeCommand) return;
+    const params = activeCommand === 'compose' ? { prompt: input }
+      : activeCommand === 'research' ? { keyword: input }
+      : { message: input };
+    onCommand(agentId, activeCommand, params);
+    setInput('');
+    setActiveCommand(null);
+  };
+
+  const formatTaskTime = (task) => {
+    const iso = task.completed_at || task.created_at;
+    if (!iso) return '';
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) return '';
+    const now = new Date();
+    const pad = (n) => String(n).padStart(2, '0');
+    const hm = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    const sameDay = d.toDateString() === now.toDateString();
+    const yesterday = new Date(now); yesterday.setDate(now.getDate() - 1);
+    const isYesterday = d.toDateString() === yesterday.toDateString();
+    if (sameDay) return `오늘 ${hm}`;
+    if (isYesterday) return `어제 ${hm}`;
+    return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`;
+  };
+
+  const handleHeaderClick = (e) => {
+    e.stopPropagation();
+    setExpanded(v => !v);
+    onClearNotification();
+  };
+
+  return (
+    <div className={`ao-col ${isOpen ? 'ao-col--open' : 'ao-col--collapsed'} ${needsAttention ? 'ao-col--attention' : ''}`} onClick={onClearNotification}>
+      <div className="ao-col-header" style={{ borderColor: meta.color }} onClick={handleHeaderClick}>
+        <span className="ao-col-name" style={{ color: meta.color }}>{meta.name}</span>
+        {tokenUsage && tokenUsage.total_tokens > 0 && (
+          <span
+            className="ao-col-tokens"
+            title={`오늘 ${tokenUsage.task_count}건 작업 · ${tokenUsage.total_tokens.toLocaleString()} 토큰`}
+          >
+            🧮 {tokenUsage.total_tokens.toLocaleString()}
+          </span>
+        )}
+        <span className={`ao-col-state ao-col-state--${state.state}`}>{state.state}</span>
+        {notification > 0 && <span className="ao-col-badge">{notification}</span>}
+        <span className="ao-col-chevron" aria-hidden="true">{isOpen ? '▾' : '▸'}</span>
+      </div>
+
+      <div className="ao-col-body">
+
+
+      {state.detail && (
+        <div className="ao-col-detail">{state.detail}</div>
+      )}
+
+      {state.state === 'waiting' && state.taskId && (
+        <div className="ao-col-approval">
+          <span>승인 대기</span>
+          <button className="ao-btn ao-btn--approve" onClick={() => onApproval(agentId, state.taskId, true)}>승인</button>
+          <button className="ao-btn ao-btn--reject" onClick={() => onApproval(agentId, state.taskId, false)}>거절</button>
+        </div>
+      )}
+
+      <div className="ao-col-commands">
+        {commands.map(cmd => (
+          <button key={cmd.action} className="ao-cmd-btn" onClick={() => handleQuickAction(cmd)}>
+            {cmd.icon} {cmd.label}
+          </button>
+        ))}
+      </div>
+
+      {activeCommand && (
+        <div className="ao-col-input">
+          <input
+            className="ao-chat-input"
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && handleSend()}
+            placeholder="입력..."
+            autoFocus
+          />
+          <button className="ao-btn ao-btn--send" onClick={handleSend}>전송</button>
+        </div>
+      )}
+
+      <div className="ao-col-tasks">
+        <div className="ao-col-tasks-title">최근 작업</div>
+        {tasks.length === 0 && <div className="ao-col-empty">이력 없음</div>}
+        {tasks.map(task => {
+          const badge = STATUS_BADGE[task.status] || STATUS_BADGE.pending;
+          return (
+            <div key={task.id} className="ao-col-task">
+              <div className="ao-col-task-row">
+                <span className="ao-col-task-type">{task.task_type}</span>
+                <span className="ao-col-task-badge" style={{ background: badge.bg }}>{badge.label}</span>
+              </div>
+              <div className="ao-col-task-time">
+                {formatTaskTime(task)}
+                {task.result_data?.telegram_sent !== undefined && (
+                  <span className="ao-doc-tg-status">{task.result_data.telegram_sent ? ' TG OK' : ' TG Fail'}</span>
+                )}
+              </div>
+              {task.result_data && (
+                <details className="ao-col-task-detail">
+                  <summary>결과</summary>
+                  <pre>{JSON.stringify(task.result_data, null, 2)}</pre>
+                </details>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      </div>
+    </div>
+  );
+};
+
+export default AgentColumn;
--- a/src/pages/agent-office/components/ChatPanel.jsx
+++ b/src/pages/agent-office/components/ChatPanel.jsx
@@ -4,11 +4,27 @@ const AGENT_COMMANDS = {
  stock: [
    { action: 'fetch_news', label: '뉴스 수집', icon: '📰' },
    { action: 'list_alerts', label: '알람 목록', icon: '🔔' },
+    { action: 'test_telegram', label: '텔레그램 테스트', icon: '📨' },
  ],
  music: [
    { action: 'compose', label: '작곡 시작', icon: '🎵', needsInput: true },
    { action: 'credits', label: '크레딧 확인', icon: '💳' },
  ],
+  blog: [
+    { action: 'research', label: '키워드 리서치', icon: '🔍', needsInput: true },
+    { action: 'list_trend_keywords', label: '트렌드 목록', icon: '📋' },
+  ],
+  realestate: [
+    { action: 'fetch_matches', label: '매칭 리포트', icon: '🏢' },
+    { action: 'dashboard', label: '대시보드', icon: '📊' },
+  ],
+};
+
+const AGENT_NAMES = {
+  stock: '주식 트레이더',
+  music: '음악 프로듀서',
+  blog: '블로그 마케터',
+  realestate: '청약 애널리스트',
 };

 const ChatPanel = ({ agentId, agentState, onCommand, onApproval, onClose }) => {
@@ -20,8 +36,8 @@ const ChatPanel = ({ agentId, agentState, onCommand, onApproval, onClose }) => {

  const handleSend = () => {
    if (!input.trim() || !activeCommand) return;
-    const params = activeCommand === 'compose'
-      ? { prompt: input }
+    const params = activeCommand === 'compose' ? { prompt: input }
+      : activeCommand === 'research' ? { keyword: input }
      : { message: input };
    onCommand(agentId, activeCommand, params);
    setInput('');
@@ -40,8 +56,7 @@ const ChatPanel = ({ agentId, agentState, onCommand, onApproval, onClose }) => {
    <div className="ao-chat-panel">
      <div className="ao-chat-header">
        <span className="ao-chat-title">
-          {agentId === 'stock' ? '주식 트레이더' :
-           agentId === 'music' ? '음악 프로듀서' : agentId}
+          {AGENT_NAMES[agentId] || agentId}
        </span>
        <span className={`ao-chat-state ao-chat-state--${state.state || 'idle'}`}>
          {state.state || 'idle'}
@@ -86,7 +101,11 @@ const ChatPanel = ({ agentId, agentState, onCommand, onApproval, onClose }) => {
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && handleSend()}
-            placeholder={activeCommand === 'compose' ? '프롬프트 입력...' : '메시지 입력...'}
+            placeholder={
+              activeCommand === 'compose' ? '프롬프트 입력...'
+              : activeCommand === 'research' ? '키워드 입력...'
+              : '메시지 입력...'
+            }
            autoFocus
          />
          <button className="ao-btn ao-btn--send" onClick={handleSend}>전송</button>
--- a/src/pages/agent-office/components/CommandColumn.jsx
+++ b/src/pages/agent-office/components/CommandColumn.jsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+
+const TARGETS = [
+  { id: 'stock', name: '주식 트레이더' },
+  { id: 'music', name: '음악 프로듀서' },
+  { id: 'blog', name: '블로그 마케터' },
+  { id: 'realestate', name: '청약 애널리스트' },
+];
+
+const TARGET_ICONS = {
+  stock: '📈',
+  music: '🎵',
+  blog: '✍️',
+  realestate: '🏢',
+};
+
+const QUICK_COMMANDS = [
+  { target: 'stock', action: 'fetch_news', label: '뉴스 수집' },
+  { target: 'stock', action: 'test_telegram', label: 'TG 테스트' },
+  { target: 'music', action: 'credits', label: '크레딧 확인' },
+  { target: 'blog', action: 'list_trend_keywords', label: '트렌드 목록' },
+  { target: 'realestate', action: 'fetch_matches', label: '매칭 리포트' },
+  { target: 'realestate', action: 'dashboard', label: '청약 대시보드' },
+];
+
+const CommandColumn = ({ agents, onCommand }) => {
+  const [target, setTarget] = useState('stock');
+  const [action, setAction] = useState('');
+  const [params, setParams] = useState('');
+  const [history, setHistory] = useState([]);
+
+  const handleSend = () => {
+    if (!action.trim()) return;
+    let parsedParams = {};
+    if (params.trim()) {
+      try { parsedParams = JSON.parse(params); }
+      catch { parsedParams = { message: params }; }
+    }
+    onCommand(target, action, parsedParams);
+    setHistory(prev => [{
+      time: new Date().toLocaleTimeString(),
+      target,
+      action,
+      params: parsedParams,
+    }, ...prev].slice(0, 20));
+    setAction('');
+    setParams('');
+  };
+
+  const handleQuick = (cmd) => {
+    onCommand(cmd.target, cmd.action, {});
+    setHistory(prev => [{
+      time: new Date().toLocaleTimeString(),
+      target: cmd.target,
+      action: cmd.action,
+      params: {},
+    }, ...prev].slice(0, 20));
+  };
+
+  return (
+    <div className="ao-col ao-col--command">
+      <div className="ao-col-header" style={{ borderColor: '#8b5cf6' }}>
+        <span className="ao-col-name" style={{ color: '#8b5cf6' }}>CEO 명령</span>
+      </div>
+
+      <div className="ao-cmd-form">
+        <div className="ao-cmd-row">
+          <select className="ao-cmd-select" value={target} onChange={e => setTarget(e.target.value)}>
+            {TARGETS.map(t => (
+              <option key={t.id} value={t.id}>{t.name}</option>
+            ))}
+          </select>
+        </div>
+        <input
+          className="ao-chat-input"
+          value={action}
+          onChange={e => setAction(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSend()}
+          placeholder="명령어 (fetch_news, compose...)"
+        />
+        <input
+          className="ao-chat-input"
+          value={params}
+          onChange={e => setParams(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSend()}
+          placeholder="파라미터 (JSON 또는 텍스트)"
+        />
+        <button className="ao-btn ao-btn--send ao-cmd-send" onClick={handleSend}>전송</button>
+      </div>
+
+      <div className="ao-col-commands">
+        {QUICK_COMMANDS.map((cmd, i) => (
+          <button key={i} className="ao-cmd-btn" onClick={() => handleQuick(cmd)}>
+            {TARGET_ICONS[cmd.target] || '🤖'} {cmd.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="ao-col-tasks">
+        <div className="ao-col-tasks-title">명령 이력</div>
+        {history.length === 0 && <div className="ao-col-empty">이력 없음</div>}
+        {history.map((h, i) => (
+          <div key={i} className="ao-col-task">
+            <div className="ao-col-task-row">
+              <span className="ao-col-task-type">{h.target}.{h.action}</span>
+              <span className="ao-col-task-time">{h.time}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CommandColumn;
--- a/src/pages/agent-office/components/DocumentPanel.jsx
+++ b/src/pages/agent-office/components/DocumentPanel.jsx
@@ -0,0 +1,195 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { getActivityFeed, getAgentTasks, getAgentLogs } from '../../../api';
+
+const STATUS_BADGE = {
+  pending: { label: '대기', color: '#fbbf24' },
+  approved: { label: '승인됨', color: '#60a5fa' },
+  working: { label: '진행중', color: '#818cf8' },
+  succeeded: { label: '완료', color: '#34d399' },
+  failed: { label: '실패', color: '#f87171' },
+  rejected: { label: '거절됨', color: '#fb923c' },
+};
+
+const LOG_LEVEL_COLOR = {
+  info: '#60a5fa',
+  warning: '#fbbf24',
+  error: '#f87171',
+};
+
+const DocumentPanel = ({ onClose }) => {
+  const [tab, setTab] = useState('feed');
+  const [feed, setFeed] = useState([]);
+  const [feedLoading, setFeedLoading] = useState(false);
+
+  const [selectedAgent, setSelectedAgent] = useState('stock');
+  const [detailTab, setDetailTab] = useState('tasks');
+  const [tasks, setTasks] = useState([]);
+  const [logs, setLogs] = useState([]);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  const loadFeed = useCallback(() => {
+    setFeedLoading(true);
+    getActivityFeed(80)
+      .then(data => setFeed(data.items || []))
+      .catch(() => setFeed([]))
+      .finally(() => setFeedLoading(false));
+  }, []);
+
+  const loadDetail = useCallback(() => {
+    setDetailLoading(true);
+    Promise.all([
+      getAgentTasks(selectedAgent, 30).then(d => d.tasks || []).catch(() => []),
+      getAgentLogs(selectedAgent, 50).then(d => d.logs || []).catch(() => []),
+    ]).then(([t, l]) => {
+      setTasks(t);
+      setLogs(l);
+    }).finally(() => setDetailLoading(false));
+  }, [selectedAgent]);
+
+  useEffect(() => {
+    if (tab === 'feed') loadFeed();
+    else loadDetail();
+  }, [tab, loadFeed, loadDetail]);
+
+  const formatTime = (t) => t ? t.replace('T', ' ').slice(0, 19) : '';
+
+  return (
+    <div className="ao-doc-panel">
+      <div className="ao-doc-header">
+        <span className="ao-doc-title">CEO 보고서</span>
+        <button className="ao-chat-close" onClick={onClose}>&times;</button>
+      </div>
+
+      <div className="ao-doc-tabs">
+        <button
+          className={`ao-doc-tab ${tab === 'feed' ? 'ao-doc-tab--active' : ''}`}
+          onClick={() => setTab('feed')}
+        >활동 피드</button>
+        <button
+          className={`ao-doc-tab ${tab === 'detail' ? 'ao-doc-tab--active' : ''}`}
+          onClick={() => setTab('detail')}
+        >에이전트별</button>
+      </div>
+
+      {tab === 'feed' && (
+        <div className="ao-doc-feed">
+          <div className="ao-doc-feed-toolbar">
+            <button className="ao-cmd-btn" onClick={loadFeed}>새로고침</button>
+          </div>
+          {feedLoading && <p className="ao-history-empty">로딩 중...</p>}
+          {!feedLoading && feed.length === 0 && <p className="ao-history-empty">활동 없음</p>}
+          {feed.map((item, i) => (
+            <div key={i} className="ao-doc-feed-item">
+              <div className="ao-doc-feed-row">
+                <span className={`ao-doc-agent-tag ao-doc-agent-tag--${item.agent_id}`}>
+                  {item.agent_id}
+                </span>
+                {item.type === 'task' ? (
+                  <span className="ao-history-badge" style={{ background: (STATUS_BADGE[item.status] || STATUS_BADGE.pending).color }}>
+                    {(STATUS_BADGE[item.status] || STATUS_BADGE.pending).label}
+                  </span>
+                ) : (
+                  <span className="ao-doc-log-level" style={{ color: LOG_LEVEL_COLOR[item.level] || '#888' }}>
+                    [{item.level}]
+                  </span>
+                )}
+                {item.telegram_sent !== undefined && (
+                  <span className="ao-doc-tg-status">{item.telegram_sent ? 'TG OK' : 'TG Fail'}</span>
+                )}
+              </div>
+              <div className="ao-doc-feed-msg">{item.message}</div>
+              <div className="ao-doc-feed-time">
+                {formatTime(item.created_at)}
+                {item.duration_seconds != null && ` · ${item.duration_seconds}s`}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {tab === 'detail' && (
+        <div className="ao-doc-detail">
+          <div className="ao-doc-agent-select">
+            {[
+              { id: 'stock', name: '주식 트레이더' },
+              { id: 'music', name: '음악 프로듀서' },
+              { id: 'blog', name: '블로그 마케터' },
+              { id: 'realestate', name: '청약 애널리스트' },
+            ].map(a => (
+              <button key={a.id}
+                className={`ao-doc-tab ${selectedAgent === a.id ? 'ao-doc-tab--active' : ''}`}
+                onClick={() => setSelectedAgent(a.id)}
+              >{a.name}</button>
+            ))}
+          </div>
+          <div className="ao-doc-detail-tabs">
+            <button
+              className={`ao-doc-tab ${detailTab === 'tasks' ? 'ao-doc-tab--active' : ''}`}
+              onClick={() => setDetailTab('tasks')}
+            >작업 ({tasks.length})</button>
+            <button
+              className={`ao-doc-tab ${detailTab === 'logs' ? 'ao-doc-tab--active' : ''}`}
+              onClick={() => setDetailTab('logs')}
+            >로그 ({logs.length})</button>
+            <button className="ao-cmd-btn" onClick={loadDetail} style={{marginLeft:'auto'}}>새로고침</button>
+          </div>
+
+          {detailLoading && <p className="ao-history-empty">로딩 중...</p>}
+
+          {!detailLoading && detailTab === 'tasks' && (
+            <div className="ao-history-list">
+              {tasks.length === 0 && <p className="ao-history-empty">이력 없음</p>}
+              {tasks.map(task => {
+                const badge = STATUS_BADGE[task.status] || STATUS_BADGE.pending;
+                return (
+                  <div key={task.id} className="ao-history-item">
+                    <div className="ao-history-item-header">
+                      <span className="ao-history-type">{task.task_type}</span>
+                      <span className="ao-history-badge" style={{ background: badge.color }}>
+                        {badge.label}
+                      </span>
+                    </div>
+                    <div className="ao-history-time">
+                      {formatTime(task.created_at)}
+                      {task.completed_at && ` → ${formatTime(task.completed_at)}`}
+                    </div>
+                    {task.result_data && (
+                      <details className="ao-history-detail">
+                        <summary>
+                          결과 보기
+                          {task.result_data.telegram_sent !== undefined && (
+                            <span className="ao-doc-tg-status">
+                              {task.result_data.telegram_sent ? ' TG OK' : ' TG Fail'}
+                            </span>
+                          )}
+                        </summary>
+                        <pre>{JSON.stringify(task.result_data, null, 2)}</pre>
+                      </details>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {!detailLoading && detailTab === 'logs' && (
+            <div className="ao-history-list">
+              {logs.length === 0 && <p className="ao-history-empty">로그 없음</p>}
+              {logs.map(log => (
+                <div key={log.id} className="ao-doc-log-item">
+                  <span className="ao-doc-log-level" style={{ color: LOG_LEVEL_COLOR[log.level] || '#888' }}>
+                    [{log.level}]
+                  </span>
+                  <span className="ao-doc-log-msg">{log.message}</span>
+                  <span className="ao-doc-feed-time">{formatTime(log.created_at)}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DocumentPanel;
--- a/src/pages/agent-office/components/TaskHistory.jsx
+++ b/src/pages/agent-office/components/TaskHistory.jsx
@@ -1,62 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { getAgentTasks } from '../../../api';
-
-const STATUS_BADGE = {
-  pending: { label: '대기', color: '#fbbf24' },
-  approved: { label: '승인됨', color: '#60a5fa' },
-  working: { label: '진행중', color: '#818cf8' },
-  succeeded: { label: '완료', color: '#34d399' },
-  failed: { label: '실패', color: '#f87171' },
-  rejected: { label: '거절됨', color: '#fb923c' },
-};
-
-const TaskHistory = ({ agentId, onClose }) => {
-  const [tasks, setTasks] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    if (!agentId) return;
-    setLoading(true);
-    getAgentTasks(agentId, 30)
-      .then(data => setTasks(data.tasks || []))
-      .catch(() => setTasks([]))
-      .finally(() => setLoading(false));
-  }, [agentId]);
-
-  return (
-    <div className="ao-history-panel">
-      <div className="ao-history-header">
-        <span>작업 이력 — {agentId}</span>
-        <button className="ao-chat-close" onClick={onClose}>&times;</button>
-      </div>
-      <div className="ao-history-list">
-        {loading && <p className="ao-history-empty">로딩 중...</p>}
-        {!loading && tasks.length === 0 && <p className="ao-history-empty">이력 없음</p>}
-        {tasks.map(task => {
-          const badge = STATUS_BADGE[task.status] || STATUS_BADGE.pending;
-          return (
-            <div key={task.id} className="ao-history-item">
-              <div className="ao-history-item-header">
-                <span className="ao-history-type">{task.task_type}</span>
-                <span className="ao-history-badge" style={{ background: badge.color }}>
-                  {badge.label}
-                </span>
-              </div>
-              <div className="ao-history-time">
-                {task.created_at?.replace('T', ' ').slice(0, 19)}
-              </div>
-              {task.result_data && (
-                <details className="ao-history-detail">
-                  <summary>결과 보기</summary>
-                  <pre>{JSON.stringify(task.result_data, null, 2)}</pre>
-                </details>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default TaskHistory;
--- a/src/pages/agent-office/hooks/useAgentManager.js
+++ b/src/pages/agent-office/hooks/useAgentManager.js
@@ -4,6 +4,7 @@ export function useAgentManager() {
  const [agents, setAgents] = useState({});
  const [pendingTasks, setPendingTasks] = useState([]);
  const [connected, setConnected] = useState(false);
+  const [notifications, setNotifications] = useState({});
  const wsRef = useRef(null);
  const reconnectTimer = useRef(null);

@@ -58,6 +59,12 @@ export function useAgentManager() {
            [msg.agent]: { ...prev[msg.agent], lastCommand: msg.result },
          }));
          break;
+        case 'notification':
+          setNotifications(prev => ({
+            ...prev,
+            [msg.agent]: (prev[msg.agent] || 0) + 1,
+          }));
+          break;
        default:
          break;
      }
@@ -84,5 +91,13 @@ export function useAgentManager() {
    }
  }, []);

-  return { agents, pendingTasks, connected, sendCommand, sendApproval };
+  const clearNotifications = useCallback((agentId) => {
+    setNotifications(prev => {
+      const next = { ...prev };
+      delete next[agentId];
+      return next;
+    });
+  }, []);
+
+  return { agents, pendingTasks, connected, notifications, sendCommand, sendApproval, clearNotifications };
 }
--- a/src/pages/agent-office/hooks/useOfficeCanvas.js
+++ b/src/pages/agent-office/hooks/useOfficeCanvas.js
@@ -2,7 +2,7 @@ import { useRef, useEffect, useCallback } from 'react';
 import { OfficeRenderer } from '../canvas/OfficeRenderer';
 import officeMap from '../assets/office-map.json';

-export function useOfficeCanvas(containerRef, onAgentClick) {
+export function useOfficeCanvas(containerRef, onAgentClick, onCeoClick) {
  const rendererRef = useRef(null);

  useEffect(() => {
@@ -30,6 +30,10 @@ export function useOfficeCanvas(containerRef, onAgentClick) {
      if (onAgentClick) onAgentClick(agentId);
    });

+    renderer.setOnCeoClick(() => {
+      if (onCeoClick) onCeoClick();
+    });
+
    const handleClick = (e) => {
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
@@ -48,7 +52,7 @@ export function useOfficeCanvas(containerRef, onAgentClick) {
        containerRef.current.removeChild(canvas);
      }
    };
-  }, [containerRef, onAgentClick]);
+  }, [containerRef, onAgentClick, onCeoClick]);

  const updateAgentState = useCallback((agentId, state, detail) => {
    rendererRef.current?.updateAgentState(agentId, state, detail);
@@ -58,5 +62,13 @@ export function useOfficeCanvas(containerRef, onAgentClick) {
    rendererRef.current?.moveAgent(agentId, target);
  }, []);

-  return { updateAgentState, moveAgent };
+  const setAgentNotification = useCallback((agentId, count) => {
+    rendererRef.current?.setAgentNotification(agentId, count);
+  }, []);
+
+  const setCeoDocBadge = useCallback((count) => {
+    rendererRef.current?.setCeoDocBadge(count);
+  }, []);
+
+  return { updateAgentState, moveAgent, setAgentNotification, setCeoDocBadge };
 }
--- a/src/pages/stock/components/PortfolioTab.jsx
+++ b/src/pages/stock/components/PortfolioTab.jsx
@@ -96,7 +96,7 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                        />
                    </label>
                    <label>
-                        평균 매입가 (원)
+                        평균단가 (원)
                        <input
                            type="number"
                            min={0}
@@ -108,6 +108,19 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                            required
                        />
                    </label>
+                    <label>
+                        매입가 (원)
+                        <input
+                            type="number"
+                            min={0}
+                            step={1}
+                            value={pf.addForm.purchase_price}
+                            onChange={(e) =>
+                                pf.setAddForm((p) => ({ ...p, purchase_price: e.target.value }))
+                            }
+                            placeholder="미입력 시 평균단가로 자동 설정"
+                        />
+                    </label>
                    <button
                        className="button primary"
                        type="submit"
@@ -386,7 +399,8 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                            </p>
                            <h3>{broker} 보유 현황</h3>
                            <p className="stock-panel__sub">
-                                {items.length}종목 · 평가{' '}
+                                {items.length}종목 · 총 매입{' '}
+                                {formatNumber(bSummary.totalBuy)} · 평가{' '}
                                {formatNumber(bSummary.totalEval)} · 손익{' '}
                                <span className={`stock-profit ${profitColorClass(bSummary.totalProfit)}`}>
                                    {formatNumber(bSummary.totalProfit)} (
@@ -435,7 +449,7 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                                                    />
                                                </label>
                                                <label>
-                                                    평균매입가
+                                                    평균단가
                                                    <input
                                                        type="number"
                                                        min={0}
@@ -448,6 +462,20 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                                                        }
                                                    />
                                                </label>
+                                                <label>
+                                                    매입가
+                                                    <input
+                                                        type="number"
+                                                        min={0}
+                                                        value={pf.editForm.purchase_price ?? ''}
+                                                        onChange={(e) =>
+                                                            pf.setEditForm((p) => ({
+                                                                ...p,
+                                                                purchase_price: Number(e.target.value),
+                                                            }))
+                                                        }
+                                                    />
+                                                </label>
                                            </div>
                                            <div className="pf-edit-actions">
                                                <button
@@ -480,9 +508,13 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => (
                                                <strong>{formatNumber(item.quantity)}</strong>
                                            </div>
                                            <div className="stock-holdings__metric">
-                                                <span>매입가</span>
+                                                <span>평균단가</span>
                                                <strong>{formatNumber(item.avg_price)}</strong>
                                            </div>
+                                            <div className="stock-holdings__metric">
+                                                <span>매입가</span>
+                                                <strong>{formatNumber(item.purchase_price ?? item.avg_price)}</strong>
+                                            </div>
                                            <div className="stock-holdings__metric">
                                                <span>현재가</span>
                                                <strong className={item.current_price == null ? 'pf-null-price' : ''}>
--- a/src/pages/stock/hooks/usePortfolio.js
+++ b/src/pages/stock/hooks/usePortfolio.js
@@ -70,14 +70,20 @@ export default function usePortfolio() {
    }, [brokerGroups]);

    const getBrokerSummary = (items) => {
-        let totalBuy = 0, totalEvalAmt = 0, hasNullPrice = false;
+        // totalBuy: 요약 표시용 (매입가 purchase_price 기준)
+        // totalCostBasis: 손익 계산용 (평균단가 avg_price 기준)
+        let totalBuy = 0, totalCostBasis = 0, totalEvalAmt = 0, hasNullPrice = false;
        for (const item of items) {
-            totalBuy += (item.avg_price ?? 0) * (item.quantity ?? 0);
+            const qty = item.quantity ?? 0;
+            const purchase = item.purchase_price ?? item.avg_price ?? 0;
+            // 총 매입 = 종목별 매입가의 단순 합 (수량 미곱산)
+            totalBuy += purchase;
+            totalCostBasis += (item.avg_price ?? 0) * qty;
            if (item.eval_amount != null) totalEvalAmt += item.eval_amount;
            else hasNullPrice = true;
        }
-        const totalProfit = totalEvalAmt - totalBuy;
-        const totalProfitRate = totalBuy > 0 ? (totalProfit / totalBuy) * 100 : 0;
+        const totalProfit = totalEvalAmt - totalCostBasis;
+        const totalProfitRate = totalCostBasis > 0 ? (totalProfit / totalCostBasis) * 100 : 0;
        return { totalBuy, totalEval: totalEvalAmt, totalProfit, totalProfitRate, hasNullPrice };
    };

@@ -108,6 +114,9 @@ export default function usePortfolio() {
                name: addForm.name.trim(),
                quantity: Number(addForm.quantity),
                avg_price: Number(addForm.avg_price),
+                purchase_price: addForm.purchase_price === '' || addForm.purchase_price == null
+                    ? Number(addForm.avg_price)
+                    : Number(addForm.purchase_price),
            });
            setAddForm({ ...emptyPortfolioForm });
            setAddFormOpen(false);
@@ -121,7 +130,13 @@ export default function usePortfolio() {

    const handleEditStart = (item) => {
        setEditingId(item.id);
-        const data = { quantity: item.quantity, avg_price: item.avg_price, broker: item.broker, name: item.name };
+        const data = {
+            quantity: item.quantity,
+            avg_price: item.avg_price,
+            purchase_price: item.purchase_price ?? item.avg_price,
+            broker: item.broker,
+            name: item.name,
+        };
        setEditForm(data);
        editOrigRef.current = { ...data };
    };
--- a/src/pages/stock/stockUtils.js
+++ b/src/pages/stock/stockUtils.js
@@ -95,6 +95,7 @@ export const emptyPortfolioForm = {
    name: '',
    quantity: '',
    avg_price: '',
+    purchase_price: '',
 };

 /* ── empty sell-history form ─────────────────────────────────────── */
--- a/src/pages/subscription/Subscription.jsx
+++ b/src/pages/subscription/Subscription.jsx
@@ -636,6 +636,19 @@ function AnnouncementsTab() {
        }
    };

+    const handleDeleteClosed = async () => {
+        if (!confirm('종료된(완료) 청약 공고를 모두 삭제할까요?')) return;
+        try {
+            const res = await apiDelete('/api/realestate/announcements/closed');
+            alert(`${res.deleted || 0}건 삭제되었습니다.`);
+            setPage(1);
+            load();
+        } catch (e) {
+            console.error('Delete closed error:', e);
+            alert('삭제 실패');
+        }
+    };
+
    const handleBookmark = async (id) => {
        try {
            const updated = await apiPatch(`/api/realestate/announcements/${id}/bookmark`);
@@ -680,6 +693,14 @@ function AnnouncementsTab() {
                        onChange={(e) => { setRegionFilter(e.target.value); setPage(1); }}
                        style={{ width: 160, padding: '6px 12px', fontSize: 12 }}
                    />
+                    <button
+                        className="sub-filter-btn"
+                        onClick={handleDeleteClosed}
+                        style={{ fontSize: 12, color: '#f87171' }}
+                        title="status='완료' 공고 일괄 삭제"
+                    >
+                        🗑 종료 청약 삭제
+                    </button>
                </div>
            </div>
Author	SHA1	Message	Date
gahusb	2840ad7df6	feat(stock): 증권사별 보유 현황에 총 매입 금액 추가 표기 종목수 · 총 매입 · 평가 · 손익 · 예수금 순으로 노출. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-15 02:17:32 +09:00
gahusb	ad0a123d0f	fix(stock): 브로커 총 매입 금액을 매입가 단순 합계로 수정 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-15 02:10:17 +09:00
gahusb	18d2cd5a51	feat(stock): 포트폴리오 매입가/평균단가 분리 + 총 매입 금액 반영 - 기존 카드의 "매입가" → "평균단가" (avg_price) 로 라벨 변경 - 신규 "매입가" (purchase_price) 컬럼 추가. 추가/수정 폼에 입력 필드 노출 (미입력 시 평균단가 값으로 자동 설정) - 브로커별 총 매입 금액은 purchase_price × quantity 합계 기준 - 손익/수익률은 평균단가(avg_price) 기준 유지 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-15 01:58:10 +09:00
gahusb	104a34912f	feat(agent-office): 모바일 반응형 세로 스택 + 작업 시간 표기 개선 - 768px 이하에서 대시보드 세로 스택 + 에이전트 카드 아코디언 토글 - waiting/알림 있을 때 자동 펼침 및 좌측 강조 바 - 픽셀 오피스 캔버스 모바일 높이 140px로 축소 후 상단 배치 - 최근 작업 시간: completed_at 우선 + 오늘/어제/MM-DD HH:MM 포맷 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-15 00:19:32 +09:00
gahusb	be46da0a1f	feat(subscription): 종료 청약 일괄 삭제 버튼 추가 AnnouncementsTab 툴바에 '🗑 종료 청약 삭제' 버튼 추가. 확인 다이얼로그 → DELETE /api/realestate/announcements/closed 호출 → 삭제 건수 알림 후 목록 새로고침. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-13 04:14:50 +09:00
gahusb	6728b2269e	feat(agent-office): Blog + Realestate 에이전트 UI 추가 - AGENT_META/IDS에 blog/realestate 추가 (4 컬럼 대시보드) - SpriteSheet: 블로그(노트북 액센트)/청약(서류가방 액센트) 픽셀 캐릭터 - office-map: 사무실 책상 4개로 확장, blog_desk/realestate_desk waypoint 추가 - AgentColumn/ChatPanel: 에이전트별 퀵 명령 버튼 (키워드 리서치, 매칭 리포트 등) - CommandColumn: 타겟 선택지 4명, 빠른 명령 6개, 아이콘 맵핑 - DocumentPanel: 에이전트별 탭 4개 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-13 03:06:19 +09:00
gahusb	cfc45fc43f	feat(agent-office): AI 토큰 사용량 뱃지 표시 - api.js: getAgentTokenUsage 헬퍼 추가 - AgentColumn: 헤더에 오늘 토큰 사용량 뱃지 (🧮 N,NNN) - 30초 폴링 + state 변경 시 즉시 갱신 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-13 01:44:37 +09:00
gahusb	a165d6271f	refactor(agent-office): dashboard layout with agent columns + CEO command panel - Restructure layout: dashboard (top, 3 columns) + office canvas (bottom, 280px) - AgentColumn: per-agent status, quick commands, approval UI, task history - CommandColumn: CEO command input with agent selector, quick shortcuts, history - Remove overlay panels (ChatPanel/DocumentPanel) - integrated into dashboard - Office canvas shrunk to compact strip at bottom Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-11 15:32:07 +09:00
gahusb	deb285695a	feat(agent-office): notification badges + CEO desk document panel + telegram test - Add notification state management with badge counts in useAgentManager - Render exclamation badge on agent sprites (separate from status icons) - Add CEO desk document icon with click-to-open activity panel - Create DocumentPanel with unified activity feed + per-agent detail tabs - Add telegram test button to stock agent ChatPanel - Remove TaskHistory + bottom toolbar (replaced by DocumentPanel) - Add getActivityFeed API helper Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-11 15:19:14 +09:00
gahusb	25715a2198	feat: Agent Office — AI 에이전트 가상 오피스 (#2 ) ## Summary - Canvas 2D 픽셀아트 오피스 렌더링 (SpriteSheet + TileMap + AgentSprite) - WebSocket 실시간 에이전트 상태 동기화 (useAgentManager) - ChatPanel (명령/승인) + TaskHistory (작업 이력) UI - 다크 테마 + glassmorphism 패널 ## Changes (7 commits) - API helpers + route + Lab entry - Canvas engine: SpriteSheet, TileMap, AgentSprite, OfficeRenderer - React hooks: useAgentManager, useOfficeCanvas - Components: ChatPanel, TaskHistory - Main page + CSS - Code review fixes: claude agent 참조 제거, rejected 배지 추가 Reviewed-on: #2	2026-04-11 13:35:35 +09:00