Fix agent cards to grid layout (4 per row)

components/council/Council.tsx

@@ -127,58 +127,31 @@ export default function Council() {
             <button onClick={() => setSelectedTeam(null)} className="text-white/50 hover:text-white">✕</button>
           </div>
 
-          {/* Agents */}
-          <div className="space-y-3">
+          {/* Agents - Grid Layout */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
             {currentTeam.agents.map((agent) => (
               <div key={agent.id} className="p-4 rounded-lg border border-white/10 bg-white/5">
-                <div className="flex items-center justify-between mb-2">
-                  <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 mb-2">
                   <span className={`px-2 py-0.5 rounded text-xs font-medium ${getStatusColor(agent.status)}`}>
                     {agent.status.toUpperCase()}
                   </span>
                   <span className="font-medium">{agent.name}</span>
-                    <span className="text-white/50">— {agent.role}</span>
-                  </div>
-                  {agent.lastRun && (
-                    <span className="text-xs text-white/40">Last: {new Date(agent.lastRun).toLocaleTimeString()}</span>
-                  )}
                 </div>
                 
-                <p className="text-sm text-white/60 mb-3">{agent.description}</p>
+                <p className="text-xs text-white/60 mb-3">{agent.role}</p>
 
                 {/* Open Agent Command Center */}
                 <button
                   onClick={() => setSelectedAgent(agent.id)}
-                  className="w-full mb-3 px-3 py-2 bg-white/10 hover:bg-white/20 border border-white/20 rounded-lg text-sm text-center transition"
+                  className="w-full px-3 py-2 bg-white/10 hover:bg-white/20 border border-white/20 rounded-lg text-sm text-center transition"
                 >
-                  🧑‍💼 Open {agent.name} Command Center
+                  🧑‍💼 Open
                 </button>
-
-                {/* Task Input */}
-                <div className="flex gap-2">
-                  <input
+              </div>
+            ))}
+          </div>
                     type="text"
                     value={runningTask}
-                    onChange={(e) => setRunningTask(e.target.value)}
-                    placeholder={`Ask ${agent.name} to...`}
-                    className="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-sm placeholder:text-white/40 focus:outline-none focus:border-brand-pink"
-                    onKeyDown={(e) => e.key === "Enter" && spawnAgent(agent, runningTask)}
-                  />
-                  <button
-                    onClick={() => spawnAgent(agent, runningTask)}
-                    disabled={agent.status === "working" || !runningTask.trim()}
-                    className="px-4 py-2 bg-brand-pink rounded-lg text-sm font-medium disabled:opacity-50 hover:bg-[#ff7bc0] transition"
-                  >
-                    🚀 Run
-                  </button>
-                </div>
-
-                {/* Output */}
-                {agentOutputs[agent.id] && (
-                  <div className="mt-3 p-3 rounded-lg bg-black/30 text-sm font-mono text-white/80 whitespace-pre-wrap max-h-40 overflow-y-auto">
-                    {agentOutputs[agent.id]}
-                  </div>
-                )}
               </div>
             ))}
           </div>