Add AgentModal popup instead of separate page

components/council/Council.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
 import { Agent, AgentTeam, defaultTeams } from "@/lib/council/types";
+import AgentModal from "./AgentModal";
 
 const STORAGE_KEY = "horus:council";
 
 export default function Council() {
-  const router = useRouter();
   const [teams, setTeams] = useState<AgentTeam[]>(defaultTeams);
   const [selectedTeam, setSelectedTeam] = useState<string | null>(null);
+  const [selectedAgent, setSelectedAgent] = useState<string | null>(null);
   const [runningTask, setRunningTask] = useState<string>("");
   const [agentOutputs, setAgentOutputs] = useState<Record<string, string>>({});
 
@@ -148,7 +148,7 @@ export default function Council() {
 
                 {/* Open Agent Command Center */}
                 <button
-                  onClick={() => router.push(`/mission-control/agent/${agent.id}`)}
+                  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"
                 >
                   🧑‍💼 Open {agent.name} Command Center
@@ -193,6 +193,11 @@ export default function Council() {
           the OpenClaw sub-agent system to be configured.
         </p>
       </div>
+
+      {/* Agent Modal */}
+      {selectedAgent && (
+        <AgentModal agentId={selectedAgent} onClose={() => setSelectedAgent(null)} />
+      )}
     </div>
   );
 }