diff --git a/src/pages/agent-office/components/EmptyDetailPanel.jsx b/src/pages/agent-office/components/EmptyDetailPanel.jsx
new file mode 100644
index 0000000..906cf42
--- /dev/null
+++ b/src/pages/agent-office/components/EmptyDetailPanel.jsx
@@ -0,0 +1,41 @@
+// src/pages/agent-office/components/EmptyDetailPanel.jsx
+import { PLACEHOLDER_IMAGE } from '../constants.js';
+
+export default function EmptyDetailPanel({ variant = 'initial', onClose }) {
+  if (variant === 'placeholder') {
+    return (
+      <div className="ao-sidepanel">
+        <div className="ao-sidepanel-header">
+          <div className="ao-sidepanel-agent">
+            <div className="ao-sidepanel-icon">
+              <img src={PLACEHOLDER_IMAGE} alt="준비 중" />
+            </div>
+            <div className="ao-sidepanel-info">
+              <div className="ao-sidepanel-name">준비 중</div>
+              <div className="ao-sidepanel-state">● 미고용 슬롯</div>
+            </div>
+          </div>
+          <button className="ao-sidepanel-close" onClick={onClose}>×</button>
+        </div>
+        <div className="ao-sidepanel-content">
+          <p className="ao-empty">
+            이 자리는 아직 비어 있어요.<br />
+            준비 중인 에이전트입니다.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // variant === 'initial'
+  return (
+    <div className="ao-sidepanel ao-sidepanel-initial">
+      <div className="ao-sidepanel-content">
+        <p className="ao-empty">
+          왼쪽 그리드에서<br />
+          에이전트를 선택하세요.
+        </p>
+      </div>
+    </div>
+  );
+}