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/api/clawhub/route.ts

@@ -1,14 +1,14 @@
 import { NextRequest, NextResponse } from "next/server";
 import { exec } from "child_process";
 import { promisify } from "util";
-import { readFile, writeFile, mkdir } from "fs/promises";
+import { readFile, writeFile, mkdir, rm, readdir } from "fs/promises";
 import { existsSync } from "fs";
 import path from "path";
 
 const execAsync = promisify(exec);
 
 const CLAWHUB_BIN = "/usr/bin/clawhub";
-const SKILLS_DIR = "/root/.openclaw/workspace/skills";
+const SKILLS_BASE = "/root/.openclaw/workspace/agents-skills";
 
 export async function GET(req: NextRequest) {
   const { searchParams } = new URL(req.url);
@@ -34,8 +34,6 @@ export async function GET(req: NextRequest) {
     }
 
     if (action === "popular") {
-      // Get featured/popular - show top skills sorted by score
-      // Use a common query that returns high-quality skills
       const { stdout } = await execAsync(`${CLAWHUB_BIN} search "productivity automation" 2>&1`);
       const lines = stdout.trim().split("\n");
       const skills = lines
@@ -49,19 +47,41 @@ export async function GET(req: NextRequest) {
         })
         .filter(Boolean)
         .sort((a: any, b: any) => b.score - a.score)
-        .slice(0, 20);
+        .slice(0, 30);
       return NextResponse.json({ skills });
     }
 
+    if (action === "list") {
+      // List installed skills per agent
+      const agents = ["horus", "amun", "cleo"];
+      const installed: Record<string, string[]> = {};
+      
+      for (const agent of agents) {
+        const agentPath = path.join(SKILLS_BASE, agent);
+        if (existsSync(agentPath)) {
+          try {
+            const entries = await readdir(agentPath, { withFileTypes: true });
+            installed[agent] = entries
+              .filter((d) => d.isDirectory())
+              .map((d) => d.name);
+          } catch {
+            installed[agent] = [];
+          }
+        } else {
+          installed[agent] = [];
+        }
+      }
+      return NextResponse.json({ installed });
+    }
+
     if (action === "info") {
-      // Get skill info using inspect
       const { stdout } = await execAsync(`${CLAWHUB_BIN} inspect ${slug} 2>&1`);
       return NextResponse.json({ info: stdout });
     }
 
     return NextResponse.json({ error: "Unknown action" }, { status: 400 });
   } catch (e: unknown) {
-    const error = e as Error & { stdout?: string };
+    const error = e as Error & { stdout?: string; message?: string };
     return NextResponse.json({
       error: error.message || "Failed",
       details: error.stdout || "",
@@ -72,87 +92,56 @@ export async function GET(req: NextRequest) {
 export async function POST(req: NextRequest) {
   try {
     const body = await req.json();
-    const { action, slug, name } = body;
+    const { action, slug, agents = ["horus"], name } = body;
 
     if (action === "install") {
-      const { stdout, stderr } = await execAsync(
-        `cd /root/.openclaw/workspace && ${CLAWHUB_BIN} install ${slug} 2>&1`
-      );
-      return NextResponse.json({ output: stdout || stderr || "Installed successfully" });
+      const results: string[] = [];
+      
+      for (const agent of agents) {
+        const agentPath = path.join(SKILLS_BASE, agent, slug);
+        const agentDir = path.join(SKILLS_BASE, agent);
+        
+        // Ensure agent dir exists
+        if (!existsSync(agentDir)) {
+          await mkdir(agentDir, { recursive: true });
         }
         
-    if (action === "analyze") {
-      // Download and analyze skill code
-      const skillPath = path.join(SKILLS_DIR, slug);
+        // Install to temp first
+        const tempPath = `/tmp/clawhub-install-${slug}`;
+        await execAsync(`rm -rf ${tempPath} 2>/dev/null; ${CLAWHUB_BIN} install ${slug} --dir ${tempPath} 2>&1`);
         
-      // Install to temp location for analysis
-      await execAsync(`cd /tmp && rm -rf ${slug} 2>/dev/null; ${CLAWHUB_BIN} install ${slug} --dir /tmp/${slug} 2>&1`);
-      
-      // Read the SKILL.md
-      const skillMdPath = path.join("/tmp", slug, "SKILL.md");
-      let analysis = "";
-      
-      if (existsSync(skillMdPath)) {
-        const content = await readFile(skillMdPath, "utf-8");
-        analysis = `## Skill Analysis: ${slug}\n\n`;
-        analysis += `### Purpose\n${content.split("---")[2] || "Analysis unavailable"}\n\n`;
-        analysis += `### Triggers\nWhat activates this skill?\n\n`;
-        analysis += `### Actions\nWhat does it do?\n\n`;
-        analysis += `### Recommendations for Custom Version\n`;
-        analysis += `- Keep the core trigger logic\n`;
-        analysis += `- Customize for Haitham's workflow\n`;
-        analysis += `- Add personal touch\n`;
+        // Move to agent folder
+        if (existsSync(tempPath)) {
+          await execAsync(`mv ${tempPath} ${agentPath}`);
+          results.push(`✓ ${agent}: installed ${slug}`);
         } else {
-        analysis = `Could not analyze ${slug} - skill structure not found`;
-      }
-      
-      return NextResponse.json({ output: analysis });
-    }
-
-    if (action === "clone") {
-      // Create a custom version of the skill
-      const skillPath = path.join(SKILLS_DIR, slug);
-      const newSlug = slug.replace(/[^a-z0-9-]/gi, "-") + "-custom";
-      const newPath = path.join(SKILLS_DIR, newSlug);
-      
-      // Install original
-      await execAsync(`cd /tmp && rm -rf ${slug} 2>/dev/null; ${CLAWHUB_BIN} install ${slug} --dir /tmp/${slug} 2>&1`);
-      
-      // Create new version
-      await mkdir(newPath, { recursive: true });
-      
-      const skillMdPath = path.join("/tmp", slug, "SKILL.md");
-      const skillMd = existsSync(skillMdPath) 
-        ? await readFile(skillMdPath, "utf-8") 
-        : `# ${name || slug} Custom\n\nCustom version for Haitham.\n`;
-      
-      // Create customized SKILL.md
-      const customSkillMd = skillMd.replace(
-        /name:[^\n]+\n/,
-        `name: ${name || slug} Custom\n`
-      ).replace(
-        /description:[^\n]+\n/,
-        `description: Custom version built for Haitham's workflow\n`
-      );
-      
-      await writeFile(path.join(newPath, "SKILL.md"), customSkillMd);
-      
-      // Copy other files if they exist
-      const srcFiles = ["/tmp/script.sh", "/tmp/prompts.md"];
-      for (const f of srcFiles) {
-        if (existsSync(f)) {
-          await writeFile(path.join(newPath, path.basename(f)), await readFile(f, "utf-8"));
+          results.push(`✗ ${agent}: failed to install ${slug}`);
         }
       }
       
-      return NextResponse.json({ 
-        output: `Created custom skill at: ${newPath}\nSlug: ${newSlug}\n\nEdit the SKILL.md to customize further!` 
-      });
+      return NextResponse.json({ output: results.join("\n") });
+    }
+
+    if (action === "delete") {
+      const results: string[] = [];
+      
+      for (const agent of agents) {
+        const agentPath = path.join(SKILLS_BASE, agent, slug);
+        
+        if (existsSync(agentPath)) {
+          await rm(agentPath, { recursive: true });
+          results.push(`✓ ${agent}: removed ${slug}`);
+        } else {
+          results.push(`- ${agent}: ${slug} not found`);
+        }
+      }
+      
+      return NextResponse.json({ output: results.join("\n") });
     }
 
     return NextResponse.json({ error: "Unknown action" }, { status: 400 });
   } catch (e: unknown) {
-    const error = e as Error & { stdout?: string; stderr?: string };
+    const error = e as Error & { stdout?: string; stderr?: string; message?: string };
     return NextResponse.json({
       error: error.message || "Failed",
       details: error.stdout || error.stderr || "",

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 searchSkills = useCallback(async (query: string) => {
-    if (!query.trim()) {
-      // Load popular skills
-      setLoading(true);
+  const fetchInstalled = useCallback(async () => {
     try {
-        const res = await fetch(`/api/clawhub?action=popular`);
+      const res = await fetch("/api/clawhub?action=list");
       const data = await res.json();
-        setSkills(data.skills || []);
+      setInstalledSkills(data.installed || {});
     } catch (e) {
       console.error(e);
     }
-      setLoading(false);
-      return;
-    }
+  }, []);
 
+  const searchSkills = useCallback(async (query: string) => {
     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) => (
+                skills.map((skill) => {
+                  const installed = isInstalled(skill.slug);
+                  return (
                     <button
                       key={skill.slug}
-                    onClick={() => getSkillDetails(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 className="flex items-center gap-2 mt-2">
+                        </div>
+                        <div className="flex flex-col items-end gap-1">
                           <span className="text-xs bg-slate-600 px-2 py-0.5 rounded">
-                        Score: {skill.score?.toFixed(3)}
+                            {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 && (
+                {/* Agent Selector */}
                 <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>
+                  <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>