diff --git a/src/pages/agent-office/components/SidePanel.jsx b/src/pages/agent-office/components/SidePanel.jsx
new file mode 100644
index 0000000..ffbc7e5
--- /dev/null
+++ b/src/pages/agent-office/components/SidePanel.jsx
@@ -0,0 +1,73 @@
+// src/pages/agent-office/components/SidePanel.jsx
+import { useState } from 'react';
+import CommandTab from './CommandTab.jsx';
+import TaskTab from './TaskTab.jsx';
+import TokenTab from './TokenTab.jsx';
+import LogTab from './LogTab.jsx';
+
+const AGENT_META = {
+  stock:      { displayName: '주식 트레이더', emoji: '📈', color: '#4488cc' },
+  music:      { displayName: '음악 프로듀서', emoji: '🎵', color: '#44aa88' },
+  blog:       { displayName: '블로그 마케터', emoji: '✍️', color: '#d97706' },
+  realestate: { displayName: '청약 애널리스트', emoji: '🏢', color: '#c026d3' },
+  lotto:      { displayName: '로또 큐레이터', emoji: '🎱', color: '#ef4444' }
+};
+
+const TABS = ['Commands', 'Tasks', 'Tokens', 'Logs'];
+
+export default function SidePanel({ agentId, agentState, pendingTask, onClose, refreshTrigger }) {
+  const [activeTab, setActiveTab] = useState('Commands');
+  const meta = AGENT_META[agentId];
+  if (!meta) return null;
+
+  const stateText = agentState?.detail
+    ? `${agentState.state} - ${agentState.detail}`
+    : agentState?.state || 'unknown';
+
+  return (
+    <div className="ao-sidepanel">
+      {/* Header */}
+      <div className="ao-sidepanel-header">
+        <div className="ao-sidepanel-agent">
+          <div className="ao-sidepanel-icon" style={{ background: meta.color }}>
+            {meta.emoji}
+          </div>
+          <div className="ao-sidepanel-info">
+            <div className="ao-sidepanel-name">{meta.displayName}</div>
+            <div className="ao-sidepanel-state">● {stateText}</div>
+          </div>
+        </div>
+        <button className="ao-sidepanel-close" onClick={onClose}>×</button>
+      </div>
+
+      {/* Tabs */}
+      <div className="ao-sidepanel-tabs">
+        {TABS.map(tab => (
+          <button
+            key={tab}
+            className={`ao-sidepanel-tab ${activeTab === tab ? 'active' : ''}`}
+            onClick={() => setActiveTab(tab)}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab Content */}
+      <div className="ao-sidepanel-content">
+        {activeTab === 'Commands' && (
+          <CommandTab agentId={agentId} agentState={agentState?.state} pendingTask={pendingTask} />
+        )}
+        {activeTab === 'Tasks' && (
+          <TaskTab agentId={agentId} refreshTrigger={refreshTrigger} />
+        )}
+        {activeTab === 'Tokens' && (
+          <TokenTab agentId={agentId} />
+        )}
+        {activeTab === 'Logs' && (
+          <LogTab agentId={agentId} refreshTrigger={refreshTrigger} />
+        )}
+      </div>
+    </div>
+  );
+}