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>

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,218 @@
 .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-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-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 {
+/* Shared */
-  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;
+  padding: 4px 12px;
   border: none;
   border-radius: 6px;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   cursor: pointer;
   font-family: inherit;
 }
@@ -195,225 +262,32 @@
 .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 {
-  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;
-}
-
-/* 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;
-  flex-direction: column;
-}
-
-.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: 8px;
-  background: transparent;
-  color: #888;
-  font-size: 0.8rem;
-  cursor: pointer;
-  font-family: inherit;
-}
-.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; }

src/pages/agent-office/AgentOffice.jsx

@@ -1,27 +1,27 @@
 import React, { useRef, useState, useCallback, useEffect } from 'react';
 import { useAgentManager } from './hooks/useAgentManager';
 import { useOfficeCanvas } from './hooks/useOfficeCanvas';
-import ChatPanel from './components/ChatPanel';
+import AgentColumn from './components/AgentColumn';
-import DocumentPanel from './components/DocumentPanel';
+import CommandColumn from './components/CommandColumn';
 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 [showDocument, setShowDocument] = useState(false);
 
   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(() => {
+  const handleCeoClick = useCallback(() => {}, []);
-    setShowDocument(prev => !prev);
-  }, []);
 
-  const { updateAgentState, moveAgent, setAgentNotification, setCeoDocBadge } = useOfficeCanvas(canvasContainerRef, handleAgentClick, handleCeoClick);
+  const { updateAgentState, setAgentNotification, setCeoDocBadge } = useOfficeCanvas(canvasContainerRef, handleAgentClick, handleCeoClick);
 
   useEffect(() => {
     for (const [id, info] of Object.entries(agents)) {
@@ -53,41 +53,27 @@ export function Component() {
         </div>
       </div>
 
-      <div className="ao-workspace">
+      <div className="ao-dashboard">
-        <div className="ao-canvas-container" ref={canvasContainerRef} />
+        {['stock', 'music'].map(id => (
-
+          <AgentColumn
-        <div className="ao-agent-bar">
+            key={id}
-          {Object.entries(agents).map(([id, info]) => (
+            agentId={id}
-            <button
+            meta={AGENT_META[id]}
-              key={id}
+            agentState={agents[id]}
-              className={`ao-agent-chip ${info.state === 'waiting' ? 'ao-agent-chip--alert' : ''} ${selectedAgent === id ? 'ao-agent-chip--selected' : ''}`}
+            notification={notifications[id] || 0}
-              onClick={() => handleAgentClick(id)}
-            >
-              <span className={`ao-chip-dot ao-chip-dot--${info.state}`} />
-              {id}
-              {notifications[id] > 0 && (
-                <span className="ao-chip-badge">{notifications[id]}</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}
-            onClose={() => setSelectedAgent(null)}
+            onClearNotification={() => clearNotifications(id)}
           />
-        )}
+        ))}
+        <CommandColumn
+          agents={agents}
+          onCommand={sendCommand}
+        />
+      </div>
 
-        {showDocument && (
+      <div className="ao-office-section">
-          <DocumentPanel onClose={() => setShowDocument(false)} />
+        <div className="ao-canvas-container" ref={canvasContainerRef} />
-        )}
       </div>
     </div>
   );

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

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import { getAgentTasks } 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 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]);
+
+  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>
+        <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/CommandColumn.jsx

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