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
parent 25715a2198
commit deb285695a
11 changed files with 459 additions and 96 deletions
--- a/src/pages/agent-office/AgentOffice.css
+++ b/src/pages/agent-office/AgentOffice.css
@@ -310,22 +310,110 @@
  margin: 4px 0 0;
 }

-.ao-toolbar {
+/* Document Panel (CEO desk) */
+.ao-doc-panel {
+  position: absolute;
+  left: 16px;
+  top: 60px;
+  width: 400px;
+  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);
  display: flex;
-  gap: 8px;
-  padding: 8px 20px;
-  background: #1a1a2e;
-  border-top: 1px solid #2a2a4a;
+  flex-direction: column;
 }

-.ao-tool-btn {
-  padding: 6px 14px;
+.ao-doc-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #2a2a4a;
+}
+
+.ao-doc-title {
+  font-weight: bold;
+  font-size: 1rem;
+  color: #e0e0e0;
+}
+
+.ao-doc-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 8px 16px;
+  border-bottom: 1px solid #2a2a4a;
+}
+
+.ao-doc-tab {
+  padding: 4px 12px;
  border: 1px solid #333;
-  border-radius: 6px;
+  border-radius: 8px;
  background: transparent;
-  color: #aaa;
+  color: #888;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
 }
-.ao-tool-btn:hover { border-color: #8b5cf6; color: #e0e0e0; }
+.ao-doc-tab:hover { color: #ccc; border-color: #555; }
+.ao-doc-tab--active { background: rgba(139, 92, 246, 0.2); border-color: #8b5cf6; color: #c4b5fd; }
+
+.ao-doc-feed { padding: 4px 8px; }
+.ao-doc-feed-toolbar { padding: 4px 8px; display: flex; justify-content: flex-end; }
+
+.ao-doc-feed-item {
+  padding: 8px 10px;
+  border-bottom: 1px solid #1a1a2e;
+}
+.ao-doc-feed-item:last-child { border-bottom: none; }
+
+.ao-doc-feed-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ao-doc-agent-tag {
+  font-size: 0.7rem;
+  padding: 1px 6px;
+  border-radius: 4px;
+  color: #fff;
+}
+.ao-doc-agent-tag--stock { background: #2563eb; }
+.ao-doc-agent-tag--music { background: #059669; }
+
+.ao-doc-feed-msg {
+  font-size: 0.8rem;
+  color: #ccc;
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ao-doc-feed-time {
+  font-size: 0.7rem;
+  color: #555;
+  margin-top: 2px;
+}
+
+.ao-doc-tg-status {
+  font-size: 0.7rem;
+  margin-left: 4px;
+}
+
+.ao-doc-detail { padding: 0; }
+.ao-doc-agent-select { display: flex; gap: 4px; padding: 8px 16px; }
+.ao-doc-detail-tabs { display: flex; gap: 4px; padding: 4px 16px; border-bottom: 1px solid #2a2a4a; }
+
+.ao-doc-log-item {
+  display: flex;
+  gap: 6px;
+  padding: 4px 12px;
+  font-size: 0.75rem;
+  border-bottom: 1px solid rgba(255,255,255,0.03);
+}
+.ao-doc-log-level { font-weight: bold; white-space: nowrap; }
+.ao-doc-log-msg { color: #aaa; flex: 1; word-break: break-all; }
--- a/src/pages/agent-office/AgentOffice.jsx
+++ b/src/pages/agent-office/AgentOffice.jsx
@@ -2,21 +2,26 @@ 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 DocumentPanel from './components/DocumentPanel';
 import './AgentOffice.css';

 export function Component() {
  const canvasContainerRef = useRef(null);
  const [selectedAgent, setSelectedAgent] = useState(null);
-  const [showHistory, setShowHistory] = useState(null);
+  const [showDocument, setShowDocument] = useState(false);

-  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 handleCeoClick = useCallback(() => {
+    setShowDocument(prev => !prev);
  }, []);

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

  useEffect(() => {
    for (const [id, info] of Object.entries(agents)) {
@@ -24,6 +29,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">
@@ -46,7 +65,9 @@ export function Component() {
            >
              <span className={`ao-chip-dot ao-chip-dot--${info.state}`} />
              {id}
-              {info.state === 'waiting' && <span className="ao-chip-badge">!</span>}
+              {notifications[id] > 0 && (
+                <span className="ao-chip-badge">{notifications[id]}</span>
+              )}
            </button>
          ))}
          {pendingTasks.length > 0 && (
@@ -64,22 +85,10 @@ export function Component() {
          />
        )}

-        {showHistory && (
-          <TaskHistory
-            agentId={showHistory}
-            onClose={() => setShowHistory(null)}
-          />
+        {showDocument && (
+          <DocumentPanel onClose={() => setShowDocument(false)} />
        )}
      </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>
    </div>
  );
 }
--- 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,6 +19,8 @@ export class OfficeRenderer {
    this.agents = {};
    this._animId = null;
    this._onClick = null;
+    this._onCeoClick = null;
+    this._ceoDocBadge = 0;

    const agentIds = ['stock', 'music'];
    for (const id of agentIds) {
@@ -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
@@ -87,3 +87,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/ChatPanel.jsx
+++ b/src/pages/agent-office/components/ChatPanel.jsx
@@ -4,6 +4,7 @@ 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 },
--- a/src/pages/agent-office/components/DocumentPanel.jsx
+++ b/src/pages/agent-office/components/DocumentPanel.jsx
@@ -0,0 +1,190 @@
+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">
+            {['stock', 'music'].map(id => (
+              <button key={id}
+                className={`ao-doc-tab ${selectedAgent === id ? 'ao-doc-tab--active' : ''}`}
+                onClick={() => setSelectedAgent(id)}
+              >{id === 'stock' ? '주식 트레이더' : '음악 프로듀서'}</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 };
 }