feat: Multi-agent ClawHub management

- Agent selector (Horus, Amun, Cleo)
- Install/delete skills per agent
- Status bar showing installed skills per agent
- Popular refresh button
- Skills synced to agents-skills repo

app/mission-control/clawhub/page.tsx

@@ -8,35 +8,36 @@ interface Skill {
   name: string;
   score: number;
   description?: string;
-  version?: string;
-  author?: string;
-  downloads?: number;
 }
 
+const AGENTS = ["horus", "amun", "cleo"] as const;
+const AGENT_LABELS: Record<string, string> = {
+  horus: "🦅 Horus (Local)",
+  amun: "🤖 Amun",
+  cleo: "👑 Cleo",
+};
+
 export default function ClawHubMarketplace() {
   const [skills, setSkills] = useState<Skill[]>([]);
   const [search, setSearch] = useState("");
   const [loading, setLoading] = useState(false);
   const [selectedSkill, setSelectedSkill] = useState<Skill | null>(null);
-  const [action, setAction] = useState<"install" | "analyze" | "clone" | null>(null);
+  const [selectedAgents, setSelectedAgents] = useState<string[]>(["horus"]);
+  const [action, setAction] = useState<"install" | "delete" | null>(null);
   const [output, setOutput] = useState("");
-  const [installing, setInstalling] = useState(false);
+  const [installedSkills, setInstalledSkills] = useState<Record<string, string[]>>({});
+
+  const fetchInstalled = useCallback(async () => {
+    try {
+      const res = await fetch("/api/clawhub?action=list");
+      const data = await res.json();
+      setInstalledSkills(data.installed || {});
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
 
   const searchSkills = useCallback(async (query: string) => {
-    if (!query.trim()) {
-      // Load popular skills
-      setLoading(true);
-      try {
-        const res = await fetch(`/api/clawhub?action=popular`);
-        const data = await res.json();
-        setSkills(data.skills || []);
-      } catch (e) {
-        console.error(e);
-      }
-      setLoading(false);
-      return;
-    }
-
     setLoading(true);
     try {
       const res = await fetch(`/api/clawhub?action=search&q=${encodeURIComponent(query)}`);
@@ -48,76 +49,81 @@ export default function ClawHubMarketplace() {
     setLoading(false);
   }, []);
 
-  useEffect(() => {
-    searchSkills("");
-  }, [searchSkills]);
-
-  const getSkillDetails = async (slug: string) => {
+  const refreshPopular = useCallback(async () => {
     setLoading(true);
     try {
-      const res = await fetch(`/api/clawhub?action=info&slug=${encodeURIComponent(slug)}`);
+      const res = await fetch("/api/clawhub?action=popular");
       const data = await res.json();
-      setSelectedSkill({ ...data, slug });
+      setSkills(data.skills || []);
     } catch (e) {
       console.error(e);
     }
     setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    refreshPopular();
+    fetchInstalled();
+  }, [refreshPopular, fetchInstalled]);
+
+  const toggleAgent = (agent: string) => {
+    setSelectedAgents((prev) =>
+      prev.includes(agent) ? prev.filter((a) => a !== agent) : [...prev, agent]
+    );
   };
 
+  const selectAll = () => setSelectedAgents([...AGENTS]);
+
   const handleInstall = async () => {
-    if (!selectedSkill) return;
-    setInstalling(true);
+    if (!selectedSkill || selectedAgents.length === 0) return;
+    setAction("install");
     setOutput("Installing...\n");
     try {
-      const res = await fetch(`/api/clawhub`, {
+      const res = await fetch("/api/clawhub", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ action: "install", slug: selectedSkill.slug }),
+        body: JSON.stringify({
+          action: "install",
+          slug: selectedSkill.slug,
+          agents: selectedAgents,
+        }),
       });
       const data = await res.json();
       setOutput(data.output || data.error || "Done");
-    } catch (e) {
-      setOutput("Error: " + String(e));
-    }
-    setInstalling(false);
-  };
-
-  const handleAnalyze = async () => {
-    if (!selectedSkill) return;
-    setAction("analyze");
-    setOutput("Analyzing skill code...\n");
-    try {
-      const res = await fetch(`/api/clawhub`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ action: "analyze", slug: selectedSkill.slug }),
-      });
-      const data = await res.json();
-      setOutput(data.output || data.error || "Analysis complete");
+      fetchInstalled();
     } catch (e) {
       setOutput("Error: " + String(e));
     }
     setAction(null);
   };
 
-  const handleClone = async () => {
-    if (!selectedSkill) return;
-    setAction("clone");
-    setOutput("Creating custom version...\n");
+  const handleDelete = async () => {
+    if (!selectedSkill || selectedAgents.length === 0) return;
+    setAction("delete");
+    setOutput("Removing...\n");
     try {
-      const res = await fetch(`/api/clawhub`, {
+      const res = await fetch("/api/clawhub", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ action: "clone", slug: selectedSkill.slug, name: selectedSkill.name }),
+        body: JSON.stringify({
+          action: "delete",
+          slug: selectedSkill.slug,
+          agents: selectedAgents,
+        }),
       });
       const data = await res.json();
-      setOutput(data.output || data.error || "Clone complete");
+      setOutput(data.output || data.error || "Done");
+      fetchInstalled();
     } catch (e) {
       setOutput("Error: " + String(e));
     }
     setAction(null);
   };
 
+  const isInstalled = (slug: string) => {
+    return AGENTS.some((agent) => installedSkills[agent]?.includes(slug));
+  };
+
   return (
     <div className="min-h-screen bg-slate-950 text-white">
       <BackToMC />
@@ -125,9 +131,37 @@ export default function ClawHubMarketplace() {
       <div className="p-6">
         <div className="mb-6">
           <h1 className="text-3xl font-bold text-white mb-2">🛒 ClawHub Marketplace</h1>
-          <p className="text-slate-400">Search, install, analyze, and customize skills from ClawHub</p>
+          <p className="text-slate-400">Search, install, and manage skills across all agents</p>
         </div>
 
+        {/* Agent Status Bar */}
+        <div className="bg-slate-800 rounded-xl p-4 mb-6 border border-slate-700">
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="font-semibold text-lg">Agent Skills Status</h2>
+            <button
+              onClick={fetchInstalled}
+              className="text-sm bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded transition"
+            >
+              🔄 Refresh
+            </button>
+          </div>
+          <div className="grid grid-cols-3 gap-4">
+            {AGENTS.map((agent) => (
+              <div key={agent} className="bg-slate-700 rounded-lg p-3">
+                <div className="font-medium mb-2">{AGENT_LABELS[agent]}</div>
+                <div className="text-xs text-slate-400">
+                  {installedSkills[agent]?.length || 0} skills installed
+                </div>
+                <div className="text-xs text-slate-500 mt-1">
+                  {installedSkills[agent]?.slice(0, 3).join(", ") || "None"}
+                  {installedSkills[agent]?.length > 3 && "..."}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Search */}
         <div className="flex gap-4 mb-6">
           <input
             type="text"
@@ -144,10 +178,10 @@ export default function ClawHubMarketplace() {
             Search
           </button>
           <button
-            onClick={() => { setSearch(""); searchSkills(""); }}
+            onClick={refreshPopular}
             className="bg-slate-700 hover:bg-slate-600 px-6 py-2 rounded-lg font-medium transition"
           >
-            Popular
+            🔥 Popular
           </button>
         </div>
 
@@ -158,29 +192,41 @@ export default function ClawHubMarketplace() {
               <h2 className="font-semibold text-lg">Available Skills</h2>
               <p className="text-sm text-slate-400">{skills.length} skills found</p>
             </div>
-            <div className="max-h-[600px] overflow-y-auto">
+            <div className="max-h-[500px] overflow-y-auto">
               {loading ? (
                 <div className="p-8 text-center text-slate-400">Loading...</div>
               ) : skills.length === 0 ? (
                 <div className="p-8 text-center text-slate-400">No skills found</div>
               ) : (
-                skills.map((skill) => (
-                  <button
-                    key={skill.slug}
-                    onClick={() => getSkillDetails(skill.slug)}
-                    className={`w-full text-left p-4 border-b border-slate-700 hover:bg-slate-700 transition ${
-                      selectedSkill?.slug === skill.slug ? "bg-slate-700" : ""
-                    }`}
-                  >
-                    <div className="font-medium text-white">{skill.name}</div>
-                    <div className="text-sm text-slate-400 mt-1">@{skill.slug}</div>
-                    <div className="flex items-center gap-2 mt-2">
-                      <span className="text-xs bg-slate-600 px-2 py-0.5 rounded">
-                        Score: {skill.score?.toFixed(3)}
-                      </span>
-                    </div>
-                  </button>
-                ))
+                skills.map((skill) => {
+                  const installed = isInstalled(skill.slug);
+                  return (
+                    <button
+                      key={skill.slug}
+                      onClick={() => setSelectedSkill(skill)}
+                      className={`w-full text-left p-4 border-b border-slate-700 hover:bg-slate-700 transition ${
+                        selectedSkill?.slug === skill.slug ? "bg-slate-700" : ""
+                      } ${installed ? "border-l-4 border-l-green-500" : ""}`}
+                    >
+                      <div className="flex items-start justify-between">
+                        <div>
+                          <div className="font-medium text-white">{skill.name}</div>
+                          <div className="text-sm text-slate-400 mt-1">@{skill.slug}</div>
+                        </div>
+                        <div className="flex flex-col items-end gap-1">
+                          <span className="text-xs bg-slate-600 px-2 py-0.5 rounded">
+                            {skill.score?.toFixed(3)}
+                          </span>
+                          {installed && (
+                            <span className="text-xs bg-green-600 px-2 py-0.5 rounded">
+                              ✓ Installed
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </button>
+                  );
+                })
               )}
             </div>
           </div>
@@ -202,53 +248,47 @@ export default function ClawHubMarketplace() {
               </div>
             ) : (
               <div className="p-4">
-                {selectedSkill.description && (
-                  <div className="mb-4">
-                    <h3 className="text-sm font-semibold text-slate-300 mb-1">Description</h3>
-                    <p className="text-slate-400 text-sm">{selectedSkill.description}</p>
+                {/* Agent Selector */}
+                <div className="mb-4">
+                  <h3 className="text-sm font-semibold text-slate-300 mb-2">Install On:</h3>
+                  <div className="flex flex-wrap gap-2 mb-2">
+                    {AGENTS.map((agent) => (
+                      <button
+                        key={agent}
+                        onClick={() => toggleAgent(agent)}
+                        className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${
+                          selectedAgents.includes(agent)
+                            ? "bg-blue-600 text-white"
+                            : "bg-slate-700 text-slate-300 hover:bg-slate-600"
+                        }`}
+                      >
+                        {AGENT_LABELS[agent]}
+                      </button>
+                    ))}
                   </div>
-                )}
-
-                <div className="flex flex-wrap gap-2 mb-4">
-                  {selectedSkill.version && (
-                    <span className="text-xs bg-green-600 px-2 py-1 rounded">
-                      v{selectedSkill.version}
-                    </span>
-                  )}
-                  {selectedSkill.author && (
-                    <span className="text-xs bg-purple-600 px-2 py-1 rounded">
-                      by {selectedSkill.author}
-                    </span>
-                  )}
-                  {selectedSkill.downloads !== undefined && (
-                    <span className="text-xs bg-blue-600 px-2 py-1 rounded">
-                      {selectedSkill.downloads} downloads
-                    </span>
-                  )}
+                  <button
+                    onClick={selectAll}
+                    className="text-xs text-slate-400 hover:text-white transition"
+                  >
+                    Select All
+                  </button>
                 </div>
 
                 {/* Action Buttons */}
                 <div className="flex flex-col gap-2 mb-4">
                   <button
                     onClick={handleInstall}
-                    disabled={installing}
-                    className="bg-green-600 hover:bg-green-700 disabled:bg-green-800 px-4 py-2 rounded-lg font-medium transition flex items-center justify-center gap-2"
+                    disabled={action !== null || selectedAgents.length === 0}
+                    className="bg-green-600 hover:bg-green-700 disabled:bg-green-800 disabled:cursor-not-allowed px-4 py-2 rounded-lg font-medium transition flex items-center justify-center gap-2"
                   >
-                    {installing ? "⏳ Installing..." : "✅ Install Skill"}
+                    {action === "install" ? "⏳ Installing..." : `✅ Install on ${selectedAgents.length} agent(s)`}
                   </button>
                   <button
-                    onClick={handleAnalyze}
-                    disabled={action !== null}
-                    className="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-800 px-4 py-2 rounded-lg font-medium transition flex items-center justify-center gap-2"
+                    onClick={handleDelete}
+                    disabled={action !== null || selectedAgents.length === 0 || !isInstalled(selectedSkill.slug)}
+                    className="bg-red-600 hover:bg-red-700 disabled:bg-red-800 disabled:cursor-not-allowed px-4 py-2 rounded-lg font-medium transition flex items-center justify-center gap-2"
                   >
-                    {action === "analyze" ? "🔍 Analyzing..." : "🔍 Analyze Skill"}
-                  </button>
-                  <button
-                    onClick={handleClone}
-                    disabled={action !== null}
-                    className="bg-purple-600 hover:bg-purple-700 disabled:bg-purple-800 px-4 py-2 rounded-lg font-medium transition flex items-center justify-center gap-2"
-                  >
-                    {action === "clone" ? "🧬 Creating..." : "🧬 Make My Version"}
+                    {action === "delete" ? "⏳ Removing..." : `🗑️ Remove from ${selectedAgents.length} agent(s)`}
                   </button>
                 </div>
 
@@ -256,7 +296,7 @@ export default function ClawHubMarketplace() {
                 {output && (
                   <div className="bg-slate-900 rounded-lg p-4 border border-slate-600">
                     <h3 className="text-xs font-semibold text-slate-300 mb-2">Output</h3>
-                    <pre className="text-xs text-slate-300 whitespace-pre-wrap font-mono overflow-auto max-h-64">
+                    <pre className="text-xs text-slate-300 whitespace-pre-wrap font-mono overflow-auto max-h-48">
                       {output}
                     </pre>
                   </div>