fix(agent-office): 코드 리뷰 이슈 수정

- 하드코딩된 claude 에이전트 참조 제거 (백엔드 에이전트 기반 동적 렌더링)
- TaskHistory에 rejected 상태 배지 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/api.js

@@ -598,6 +598,4 @@ 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}`);
 

src/pages/agent-office/AgentOffice.css

@@ -11,14 +11,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 20px;
+  padding: 12px 20px;
   background: #1a1a2e;
   border-bottom: 1px solid #2a2a4a;
-  flex-shrink: 0;
 }
 
 .ao-title {
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   color: #8b5cf6;
   margin: 0;
   letter-spacing: 2px;
@@ -28,7 +27,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 0.8rem;
+  font-size: 0.85rem;
   color: #888;
 }
 
@@ -40,217 +39,10 @@
 .ao-dot--on { background: #34d399; }
 .ao-dot--off { background: #f87171; }
 
-/* Dashboard */
+.ao-workspace {
-.ao-dashboard {
-  display: flex;
-  gap: 1px;
-  background: #2a2a4a;
   flex: 1;
-  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-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;
+  overflow: hidden;
 }
 
 .ao-canvas-container {
@@ -258,12 +50,141 @@
   height: 100%;
 }
 
-/* Shared */
+.ao-agent-bar {
-.ao-btn {
+  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;
+}
+
+.ao-btn {
+  padding: 6px 16px;
   border: none;
   border-radius: 6px;
-  font-size: 0.8rem;
+  font-size: 0.85rem;
   cursor: pointer;
   font-family: inherit;
 }
@@ -274,32 +195,137 @@
 .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: 4px 10px;
+  padding: 6px 12px;
   border: 1px solid #333;
-  border-radius: 6px;
+  border-radius: 8px;
   background: transparent;
   color: #ccc;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   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: 6px 10px;
+  padding: 8px 12px;
   background: #111;
   border: 1px solid #333;
   border-radius: 6px;
   color: #e0e0e0;
-  font-size: 0.8rem;
+  font-size: 0.85rem;
   font-family: inherit;
-  min-width: 0;
 }
 .ao-chat-input:focus { border-color: #8b5cf6; outline: none; }
 
-.ao-doc-tg-status {
+.ao-chat-result {
-  font-size: 0.7rem;
+  padding: 8px 16px;
-  margin-left: 4px;
+  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 {
+  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;
+}
+
+.ao-toolbar {
+  display: flex;
+  gap: 8px;
+  padding: 8px 20px;
+  background: #1a1a2e;
+  border-top: 1px solid #2a2a4a;
+}
+
+.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-tool-btn:hover { border-color: #8b5cf6; color: #e0e0e0; }

src/pages/agent-office/AgentOffice.jsx

@@ -1,27 +1,22 @@
 import React, { useRef, useState, useCallback, useEffect } from 'react';
 import { useAgentManager } from './hooks/useAgentManager';
 import { useOfficeCanvas } from './hooks/useOfficeCanvas';
-import AgentColumn from './components/AgentColumn';
+import ChatPanel from './components/ChatPanel';
-import CommandColumn from './components/CommandColumn';
+import TaskHistory from './components/TaskHistory';
 import './AgentOffice.css';
 
-const AGENT_META = {
-  stock: { name: '주식 트레이더', color: '#4488cc' },
-  music: { name: '음악 프로듀서', color: '#44aa88' },
-};
-
 export function Component() {
   const canvasContainerRef = useRef(null);
+  const [selectedAgent, setSelectedAgent] = useState(null);
+  const [showHistory, setShowHistory] = useState(null);
 
-  const { agents, pendingTasks, connected, notifications, sendCommand, sendApproval, clearNotifications } = useAgentManager();
+  const { agents, pendingTasks, connected, sendCommand, sendApproval } = useAgentManager();
 
   const handleAgentClick = useCallback((agentId) => {
-    clearNotifications(agentId);
+    setSelectedAgent(prev => prev === agentId ? null : agentId);
-  }, [clearNotifications]);
+  }, []);
 
-  const handleCeoClick = useCallback(() => {}, []);
+  const { updateAgentState, moveAgent } = useOfficeCanvas(canvasContainerRef, handleAgentClick);
-
-  const { updateAgentState, setAgentNotification, setCeoDocBadge } = useOfficeCanvas(canvasContainerRef, handleAgentClick, handleCeoClick);
 
   useEffect(() => {
     for (const [id, info] of Object.entries(agents)) {
@@ -29,20 +24,6 @@ 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">
@@ -53,27 +34,51 @@ export function Component() {
         </div>
       </div>
 
-      <div className="ao-dashboard">
+      <div className="ao-workspace">
-        {['stock', 'music'].map(id => (
+        <div className="ao-canvas-container" ref={canvasContainerRef} />
-          <AgentColumn
+
-            key={id}
+        <div className="ao-agent-bar">
-            agentId={id}
+          {Object.entries(agents).map(([id, info]) => (
-            meta={AGENT_META[id]}
+            <button
-            agentState={agents[id]}
+              key={id}
-            notification={notifications[id] || 0}
+              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]}
             onCommand={sendCommand}
             onApproval={sendApproval}
-            onClearNotification={() => clearNotifications(id)}
+            onClose={() => setSelectedAgent(null)}
           />
-        ))}
+        )}
-        <CommandColumn
+
-          agents={agents}
+        {showHistory && (
-          onCommand={sendCommand}
+          <TaskHistory
-        />
+            agentId={showHistory}
+            onClose={() => setShowHistory(null)}
+          />
+        )}
       </div>
 
-      <div className="ao-office-section">
+      <div className="ao-toolbar">
-        <div className="ao-canvas-container" ref={canvasContainerRef} />
+        {Object.keys(agents).map(id => (
+          <button key={id} className="ao-tool-btn"
+            onClick={() => setShowHistory(prev => prev === id ? null : id)}>
+            📋 {id} 이력
+          </button>
+        ))}
       </div>
     </div>
   );

src/pages/agent-office/canvas/AgentSprite.js

@@ -6,7 +6,6 @@ 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 };
@@ -21,10 +20,6 @@ export class AgentSprite {
     this._moveSpeed = 0.05;
   }
 
-  setNotification(count) {
-    this.notificationCount = count;
-  }
-
   setState(newState, detail = '') {
     this.state = newState;
     this.detail = detail;

src/pages/agent-office/canvas/OfficeRenderer.js

@@ -1,6 +1,6 @@
 import { drawTileMap } from './TileMap';
 import { AgentSprite } from './AgentSprite';
-import { getCharLabel, drawNotificationBadge } from './SpriteSheet';
+import { getCharLabel } from './SpriteSheet';
 
 const STATUS_ICONS = {
   idle: null,
@@ -19,8 +19,6 @@ 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) {
@@ -58,21 +56,6 @@ 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;
   }
 
@@ -93,19 +76,6 @@ 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;
 
@@ -125,9 +95,6 @@ export class OfficeRenderer {
       this._drawOverlay(ctx, sprite, id);
     }
 
-    // CEO desk document icon
-    this._drawCeoDoc(ctx);
-
     this._animId = requestAnimationFrame(this._loop);
   }
 
@@ -144,11 +111,6 @@ 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';
@@ -164,48 +126,4 @@ 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);
-    }
-  }
 }

src/pages/agent-office/canvas/SpriteSheet.js

@@ -87,25 +87,3 @@ 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);
-}

src/pages/agent-office/components/AgentColumn.jsx

@@ -1,164 +0,0 @@
-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: '💳' },
-  ],
-};
-
-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 state = agentState || { state: 'offline' };
-  const commands = AGENT_COMMANDS[agentId] || [];
-
-  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;
-    onCommand(agentId, activeCommand, activeCommand === 'compose' ? { prompt: input } : { message: input });
-    setInput('');
-    setActiveCommand(null);
-  };
-
-  const formatTime = (t) => t ? t.replace('T', ' ').slice(11, 19) : '';
-
-  return (
-    <div className="ao-col" onClick={onClearNotification}>
-      <div className="ao-col-header" style={{ borderColor: meta.color }}>
-        <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>}
-      </div>
-
-      {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">
-                {formatTime(task.created_at)}
-                {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>
-  );
-};
-
-export default AgentColumn;

src/pages/agent-office/components/ChatPanel.jsx

@@ -4,7 +4,6 @@ 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 },

src/pages/agent-office/components/CommandColumn.jsx

@@ -1,103 +0,0 @@
-import React, { useState } from 'react';
-
-const TARGETS = [
-  { id: 'stock', name: '주식 트레이더' },
-  { id: 'music', name: '음악 프로듀서' },
-];
-
-const QUICK_COMMANDS = [
-  { target: 'stock', action: 'fetch_news', label: '뉴스 수집' },
-  { target: 'stock', action: 'test_telegram', label: 'TG 테스트' },
-  { target: 'music', action: 'credits', 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)}>
-            {cmd.target === 'stock' ? '📈' : '🎵'} {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;

src/pages/agent-office/components/DocumentPanel.jsx

@@ -1,190 +0,0 @@
-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;

src/pages/agent-office/components/TaskHistory.jsx

@@ -0,0 +1,62 @@
+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;

src/pages/agent-office/hooks/useAgentManager.js

@@ -4,7 +4,6 @@ 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);
 
@@ -59,12 +58,6 @@ 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;
       }
@@ -91,13 +84,5 @@ export function useAgentManager() {
     }
   }, []);
 
-  const clearNotifications = useCallback((agentId) => {
+  return { agents, pendingTasks, connected, sendCommand, sendApproval };
-    setNotifications(prev => {
-      const next = { ...prev };
-      delete next[agentId];
-      return next;
-    });
-  }, []);
-
-  return { agents, pendingTasks, connected, notifications, sendCommand, sendApproval, clearNotifications };
 }

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, onCeoClick) {
+export function useOfficeCanvas(containerRef, onAgentClick) {
   const rendererRef = useRef(null);
 
   useEffect(() => {
@@ -30,10 +30,6 @@ export function useOfficeCanvas(containerRef, onAgentClick, onCeoClick) {
       if (onAgentClick) onAgentClick(agentId);
     });
 
-    renderer.setOnCeoClick(() => {
-      if (onCeoClick) onCeoClick();
-    });
-
     const handleClick = (e) => {
       const rect = canvas.getBoundingClientRect();
       const x = e.clientX - rect.left;
@@ -52,7 +48,7 @@ export function useOfficeCanvas(containerRef, onAgentClick, onCeoClick) {
         containerRef.current.removeChild(canvas);
       }
     };
-  }, [containerRef, onAgentClick, onCeoClick]);
+  }, [containerRef, onAgentClick]);
 
   const updateAgentState = useCallback((agentId, state, detail) => {
     rendererRef.current?.updateAgentState(agentId, state, detail);
@@ -62,13 +58,5 @@ export function useOfficeCanvas(containerRef, onAgentClick, onCeoClick) {
     rendererRef.current?.moveAgent(agentId, target);
   }, []);
 
-  const setAgentNotification = useCallback((agentId, count) => {
+  return { updateAgentState, moveAgent };
-    rendererRef.current?.setAgentNotification(agentId, count);
-  }, []);
-
-  const setCeoDocBadge = useCallback((count) => {
-    rendererRef.current?.setCeoDocBadge(count);
-  }, []);
-
-  return { updateAgentState, moveAgent, setAgentNotification, setCeoDocBadge };
 }