From e04e2b010c7d78557ea1279a1d6fc8be868ce2de Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sun, 17 May 2026 20:57:20 +0900
Subject: [PATCH] feat(agent-office): AgentGrid renders 9 slots from GRID_SLOTS

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../agent-office/components/AgentGrid.jsx     | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/pages/agent-office/components/AgentGrid.jsx

diff --git a/src/pages/agent-office/components/AgentGrid.jsx b/src/pages/agent-office/components/AgentGrid.jsx
new file mode 100644
index 0000000..6497802
--- /dev/null
+++ b/src/pages/agent-office/components/AgentGrid.jsx
@@ -0,0 +1,33 @@
+// src/pages/agent-office/components/AgentGrid.jsx
+import { GRID_SLOTS } from '../constants.js';
+import AgentCard from './AgentCard.jsx';
+import PlaceholderCard from './PlaceholderCard.jsx';
+
+export default function AgentGrid({ agents, notifications, selectedAgent, onSelectAgent, onSelectPlaceholder }) {
+  return (
+    <div className="ao-grid">
+      {GRID_SLOTS.map((slot, idx) => {
+        if (slot.agentId === null) {
+          const placeholderKey = `placeholder-${idx}`;
+          return (
+            <PlaceholderCard
+              key={placeholderKey}
+              active={selectedAgent === placeholderKey}
+              onClick={() => onSelectPlaceholder(placeholderKey)}
+            />
+          );
+        }
+        return (
+          <AgentCard
+            key={slot.agentId}
+            agentId={slot.agentId}
+            agentState={agents[slot.agentId]}
+            notificationCount={notifications[slot.agentId] || 0}
+            active={selectedAgent === slot.agentId}
+            onClick={() => onSelectAgent(slot.agentId)}
+          />
+        );
+      })}
+    </div>
+  );
+}