feat: Enhanced analyze - shows overview, scripts, sections, better project matching

- Analyze shows skill description and preview
- Make My Version creates custom skill without installing from ClawHub

.clawhub/lock.json

@@ -0,0 +1,25 @@
+{
+  "version": 1,
+  "skills": {
+    "automation-workflows": {
+      "version": "0.1.0",
+      "installedAt": 1774375118226
+    },
+    "competitive-intelligence-market-research": {
+      "version": "1.0.0",
+      "installedAt": 1774374441221
+    },
+    "cbo": {
+      "version": "1.0.0",
+      "installedAt": 1774374479849
+    },
+    "n8n-workflow-automation": {
+      "version": "1.0.0",
+      "installedAt": 1774374686820
+    },
+    "agentic-workflow-automation": {
+      "version": "0.1.0",
+      "installedAt": 1774385419847
+    }
+  }
+}

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 { existsSync } from "fs";
+import { readFile, writeFile, readdir } from "fs/promises";
 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);
@@ -23,143 +23,271 @@ export async function GET(req: NextRequest) {
       const skills = lines
         .filter((line) => line.includes("("))
         .map((line) => {
-          const match = line.trim().match(/^([^\s]+)\s+([^\s]+)\s+\(([0-9.]+)\)$/);
+          const match = line.trim().match(/^(.+?)\s+(.+?)\s+\(([0-9.]+)\)$/);
           if (match) {
             return { slug: match[1], name: match[2], score: parseFloat(match[3]) };
           }
-          const parts = line.trim().split(/\s+/);
-          return {
-            slug: parts[0] || "",
-            name: parts[1] || parts[0] || "",
-            score: parseFloat(parts[parts.length - 1]?.replace(/[()]/g, "") || "0") || 0,
-          };
-        });
+          return null;
+        })
+        .filter(Boolean);
       return NextResponse.json({ skills });
     }
 
     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
         .filter((line) => line.includes("("))
         .map((line) => {
-          const parts = line.trim().split(/\s+/);
-          return {
-            slug: parts[0] || "",
-            name: parts[1] || parts[0] || "",
-            score: parseFloat(parts[parts.length - 1]?.replace(/[()]/g, "") || "0") || 0,
-          };
+          const match = line.trim().match(/^(.+?)\s+(.+?)\s+\(([0-9.]+)\)$/);
+          if (match) {
+            return { slug: match[1], name: match[2], score: parseFloat(match[3]) };
+          }
+          return null;
         })
-        .sort((a, b) => b.score - a.score)
-        .slice(0, 20);
+        .filter(Boolean)
+        .sort((a: any, b: any) => b.score - a.score)
+        .slice(0, 30);
       return NextResponse.json({ skills });
     }
 
+    if (action === "list") {
+      // Sync Horus repo first
+      try {
+        await execAsync(`cd ${SKILLS_BASE} && git pull origin main 2>&1`);
+      } catch {}
+
+      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 { stdout } = await execAsync(`ls -1 ${agentPath} 2>/dev/null`);
+            installed[agent] = stdout.trim().split("\n").filter(Boolean);
+          } 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 };
-    return NextResponse.json({
-      error: error.message || "Failed",
-      details: error.stdout || "",
-    }, { status: 500 });
+  } catch (e: any) {
+    return NextResponse.json({ error: e.message || "Failed" }, { status: 500 });
   }
 }
 
 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);
+        
+        try { await execAsync(`mkdir -p ${agentDir}`); } catch {}
+        
+        const tempPath = `/tmp/clawhub-install-${slug}-${Date.now()}`;
+        try {
+          await execAsync(`${CLAWHUB_BIN} install ${slug} --dir ${tempPath} 2>&1`);
+          await execAsync(`mv ${tempPath} ${agentPath} 2>/dev/null || mv ${tempPath}/${slug} ${agentPath} 2>/dev/null`);
+          results.push(`✓ ${agent}: installed ${slug}`);
+        } catch (e: any) {
+          results.push(`✗ ${agent}: failed - ${e.message}`);
+        }
+      }
+      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 execAsync(`rm -rf ${agentPath}`);
+          results.push(`✓ ${agent}: removed ${slug}`);
+        } else {
+          results.push(`- ${agent}: ${slug} not found`);
+        }
+      }
+      return NextResponse.json({ output: results.join("\n") });
     }
 
     if (action === "analyze") {
-      // Download and analyze skill code
-      const skillPath = path.join(SKILLS_DIR, slug);
-      
-      // 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`;
-      } else {
-        analysis = `Could not analyze ${slug} - skill structure not found`;
+      const tempPath = `/tmp/clawhub-analyze-${slug}-${Date.now()}`;
+      try {
+        await execAsync(`rm -rf ${tempPath} 2>/dev/null; ${CLAWHUB_BIN} install ${slug} --dir ${tempPath} 2>&1`);
+        
+        // Find SKILL.md
+        const skillMdPath = path.join(tempPath, slug, "SKILL.md");
+        let content = "";
+        if (existsSync(skillMdPath)) {
+          content = await readFile(skillMdPath, "utf-8");
+        } else {
+          const altPath = path.join(tempPath, "SKILL.md");
+          if (existsSync(altPath)) content = await readFile(altPath, "utf-8");
+        }
+        
+        // Extract description from frontmatter
+        const descMatch = content.match(/description:\s*([^\n]+)/i);
+        const desc = descMatch ? descMatch[1].trim() : "No description available";
+        
+        // Extract triggers
+        const triggerMatch = content.match(/triggers?:\s*([^\n]+)/i);
+        const triggers = triggerMatch ? triggerMatch[1].trim() : "General use";
+        
+        // Extract overview section (everything after first ---)
+        const overviewMatch = content.match(/---\n([\s\S]+?)(?=\n##|\n#|$)/i);
+        let overview = "";
+        if (overviewMatch) {
+          overview = overviewMatch[1].trim();
+          // Clean up frontmatter keys
+          overview = overview.replace(/^[a-z]+:/gim, "").trim();
+        }
+        
+        // Extract all ## sections
+        const sections: Record<string, string> = {};
+        const sectionMatches = content.matchAll(/##\s+(.+?)\n([\s\S]*?)(?=##\s+|$)/gi);
+        for (const match of sectionMatches) {
+          const title = match[1].trim();
+          const body = match[2].trim();
+          if (title.toLowerCase() !== "overview" && body) {
+            sections[title] = body.substring(0, 500);
+          }
+        }
+        
+        // Get scripts info
+        const scriptsDir = path.join(tempPath, slug, "scripts");
+        let scripts: string[] = [];
+        if (existsSync(scriptsDir)) {
+          try {
+            const files = await readdir(scriptsDir);
+            scripts = files.filter(f => !f.startsWith("."));
+          } catch {}
+        }
+        
+        await execAsync(`rm -rf ${tempPath} 2>/dev/null`);
+        
+        // Project matching - more thorough analysis
+        const projectsDir = "/root/.openclaw/workspace/projects";
+        const projectMatches: Array<{name: string; relevance: string; why: string}> = [];
+        
+        try {
+          const entries = await readdir(projectsDir, { withFileTypes: true });
+          for (const entry of entries) {
+            if (entry.isFile() && entry.name.endsWith(".md")) {
+              const projectPath = path.join(projectsDir, entry.name);
+              const projectContent = await readFile(projectPath, "utf-8");
+              const projectName = entry.name.replace(/\.md$/, "");
+              
+              // Check purpose/goals
+              const purposeMatch = projectContent.match(/purpose:?\s*([^\n]+)/i);
+              const purpose = purposeMatch ? purposeMatch[1].trim() : "";
+              
+              // Find keyword matches with skill content
+              const skillContent = (desc + " " + triggers + " " + overview).toLowerCase();
+              const projectKeywords = projectContent.toLowerCase();
+              
+              // Look for specific relevance
+              const relevantKeywords: string[] = [];
+              const keywordsToCheck = ["automation", "workflow", "ai", "agent", "service", "client", "sales", "marketing", "content", "data", "email", "task", "report", "integration", "api", "web", "voice", "chat"];
+              
+              for (const kw of keywordsToCheck) {
+                if (skillContent.includes(kw) && projectKeywords.includes(kw)) {
+                  relevantKeywords.push(kw);
+                }
+              }
+              
+              if (relevantKeywords.length >= 2 || (purpose && relevantKeywords.length >= 1)) {
+                const why = relevantKeywords.slice(0, 4).join(", ");
+                projectMatches.push({
+                  name: projectName,
+                  relevance: `${relevantKeywords.length} keyword matches`,
+                  why: `Useful for: ${why}`
+                });
+              }
+            }
+          }
+        } catch {}
+        
+        return NextResponse.json({ 
+          description: desc, 
+          triggers: triggers, 
+          overview: overview.substring(0, 1000),
+          sections,
+          scripts,
+          projectMatches 
+        });
+      } catch (e: any) {
+        return NextResponse.json({ error: e.message, description: "Could not analyze skill" });
       }
-      
-      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"));
+      const tempPath = `/tmp/clawhub-clone-${slug}-${Date.now()}`;
+      try {
+        await execAsync(`rm -rf ${tempPath} 2>/dev/null; ${CLAWHUB_BIN} install ${slug} --dir ${tempPath} 2>&1`);
+        
+        const entries = await readdir(tempPath);
+        const skillFolder = entries.find((e: string) => e.includes(slug.replace(/-/g, "")));
+        const sourcePath = path.join(tempPath, skillFolder || slug);
+        
+        const customSlug = `${slug}-custom`;
+        const destPath = path.join(SKILLS_BASE, "horus", customSlug);
+        
+        await execAsync(`cp -r ${sourcePath} ${destPath} 2>&1`);
+        
+        const skillMdPath = path.join(destPath, "SKILL.md");
+        if (existsSync(skillMdPath)) {
+          let content = await readFile(skillMdPath, "utf-8");
+          content = content
+            .replace(/name:\s*([^\n]+)/i, `name: $1 (Custom)`)
+            .replace(/description:\s*([^\n]+)/i, `description: Custom version for Haitham's workflow`);
+          await writeFile(skillMdPath, content);
         }
+        
+        await execAsync(`rm -rf ${tempPath} 2>/dev/null`);
+        
+        return NextResponse.json({ output: `Created custom skill: ${customSlug}\nPath: ${destPath}\n\nEdit SKILL.md to customize further!` });
+      } catch (e: any) {
+        return NextResponse.json({ error: e.message });
+      }
+    }
+
+    if (action === "sync") {
+      try {
+        const { stdout, stderr } = await execAsync(`cd ${SKILLS_BASE} && git pull origin main 2>&1`);
+        return NextResponse.json({ output: stdout || "Already up to date", error: stderr });
+      } catch (e: any) {
+        return NextResponse.json({ output: "Sync failed", error: e.message });
+      }
+    }
+
+    if (action === "push") {
+      try {
+        const { stdout, stderr } = await execAsync(`cd ${SKILLS_BASE} && git add -A && git commit -m "Update skills" && git push origin main 2>&1`);
+        return NextResponse.json({ output: stdout || "Pushed", error: stderr });
+      } catch (e: any) {
+        return NextResponse.json({ output: "Push failed", error: e.message });
       }
-      
-      return NextResponse.json({ 
-        output: `Created custom skill at: ${newPath}\nSlug: ${newSlug}\n\nEdit the SKILL.md to customize further!` 
-      });
     }
 
     return NextResponse.json({ error: "Unknown action" }, { status: 400 });
-  } catch (e: unknown) {
-    const error = e as Error & { stdout?: string; stderr?: string };
-    return NextResponse.json({
-      error: error.message || "Failed",
-      details: error.stdout || error.stderr || "",
-    }, { status: 500 });
+  } catch (e: any) {
+    return NextResponse.json({ error: e.message || "Failed" }, { status: 500 });
   }
 }

app/mission-control/clawhub/page.tsx

@@ -7,36 +7,65 @@ interface Skill {
   slug: string;
   name: string;
   score: number;
+  category?: string;
   description?: string;
-  version?: string;
-  author?: string;
-  downloads?: number;
+  triggers?: string;
 }
 
+const AGENTS = ["horus", "amun", "cleo"] as const;
+const AGENT_LABELS: Record<string, string> = {
+  horus: "🦅 Horus (Local)",
+  amun: "🤖 Amun",
+  cleo: "👑 Cleo",
+};
+
+const CATEGORIES = [
+  { id: "productivity", name: "⚡ Productivity", icon: "⚡" },
+  { id: "automation", name: "🤖 Automation", icon: "🤖" },
+  { id: "ai", name: "🧠 AI", icon: "🧠" },
+  { id: "writing", name: "✍️ Writing", icon: "✍️" },
+  { id: "research", name: "🔬 Research", icon: "🔬" },
+  { id: "coding", name: "💻 Coding", icon: "💻" },
+  { id: "business", name: "💼 Business", icon: "💼" },
+];
+
+const CATEGORY_QUERIES: Record<string, string> = {
+  productivity: "productivity focus work",
+  automation: "automation workflow",
+  ai: "artificial intelligence machine learning",
+  writing: "writing content copy",
+  research: "research data analysis",
+  coding: "code programming developer",
+  business: "business sales marketing",
+};
+
 export default function ClawHubMarketplace() {
   const [skills, setSkills] = useState<Skill[]>([]);
+  const [categorySkills, setCategorySkills] = useState<Record<string, 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 [skillDetails, setSkillDetails] = useState<{description?: string; triggers?: string} | null>(null);
+  const [selectedAgents, setSelectedAgents] = useState<string[]>(["horus"]);
+  const [view, setView] = useState<"popular" | "categories" | "search">("popular");
+  const [categoryView, setCategoryView] = useState<string | null>(null);
+  const [action, setAction] = useState<"install" | "delete" | "sync" | "push" | null>(null);
   const [output, setOutput] = useState("");
-  const [installing, setInstalling] = useState(false);
+  const [installedSkills, setInstalledSkills] = useState<Record<string, string[]>>({});
+  const [syncing, setSyncing] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+
+  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,52 +77,184 @@ export default function ClawHubMarketplace() {
     setLoading(false);
   }, []);
 
-  useEffect(() => {
-    searchSkills("");
-  }, [searchSkills]);
-
-  const getSkillDetails = async (slug: string) => {
+  const fetchAllCategories = useCallback(async () => {
     setLoading(true);
-    try {
-      const res = await fetch(`/api/clawhub?action=info&slug=${encodeURIComponent(slug)}`);
-      const data = await res.json();
-      setSelectedSkill({ ...data, slug });
-    } catch (e) {
-      console.error(e);
+    const results: Record<string, Skill[]> = {};
+    
+    for (const cat of CATEGORIES) {
+      try {
+        const res = await fetch(`/api/clawhub?action=search&q=${encodeURIComponent(CATEGORY_QUERIES[cat.id])}`);
+        const data = await res.json();
+        results[cat.id] = (data.skills || []).slice(0, 5); // Top 5 per category
+      } catch (e) {
+        results[cat.id] = [];
+      }
     }
+    
+    setCategorySkills(results);
     setLoading(false);
+  }, []);
+
+  const refreshPopular = useCallback(async () => {
+    setLoading(true);
+    setView("popular");
+    // Get top skills from all categories combined
+    const allSkills: Skill[] = [];
+    const seen = new Set<string>();
+    
+    for (const cat of CATEGORIES) {
+      try {
+        const res = await fetch(`/api/clawhub?action=search&q=${encodeURIComponent(CATEGORY_QUERIES[cat.id])}`);
+        const data = await res.json();
+        for (const skill of data.skills || []) {
+          if (!seen.has(skill.slug)) {
+            seen.add(skill.slug);
+            allSkills.push({ ...skill, category: cat.id });
+          }
+        }
+      } catch {}
+    }
+    
+    // Sort by score and take top 30
+    allSkills.sort((a, b) => b.score - a.score);
+    setSkills(allSkills.slice(0, 30));
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    if (view === "popular") {
+      refreshPopular();
+    } else if (view === "categories") {
+      fetchAllCategories();
+    }
+    fetchInstalled();
+  }, [view, refreshPopular, fetchAllCategories, 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");
+      fetchInstalled();
     } catch (e) {
       setOutput("Error: " + String(e));
     }
-    setInstalling(false);
+    setAction(null);
+  };
+
+  const handleDelete = async () => {
+    if (!selectedSkill || selectedAgents.length === 0) return;
+    setAction("delete");
+    setOutput("Removing...\n");
+    try {
+      const res = await fetch("/api/clawhub", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "delete",
+          slug: selectedSkill.slug,
+          agents: selectedAgents,
+        }),
+      });
+      const data = await res.json();
+      setOutput(data.output || data.error || "Done");
+      fetchInstalled();
+    } catch (e) {
+      setOutput("Error: " + String(e));
+    }
+    setAction(null);
+  };
+
+  const handleSync = async () => {
+    setSyncing(true);
+    setAction("sync");
+    setOutput("Syncing with GitHub...\n");
+    try {
+      const res = await fetch("/api/clawhub", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "sync" }),
+      });
+      const data = await res.json();
+      setOutput(data.output || data.error || "Sync complete");
+      fetchInstalled();
+    } catch (e) {
+      setOutput("Error: " + String(e));
+    }
+    setAction(null);
+    setSyncing(false);
   };
 
   const handleAnalyze = async () => {
     if (!selectedSkill) return;
     setAction("analyze");
-    setOutput("Analyzing skill code...\n");
+    setOutput("Analyzing skill...\n");
     try {
-      const res = await fetch(`/api/clawhub`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ action: "analyze", slug: selectedSkill.slug }),
-      });
+      const res = await fetch(`/api/clawhub?action=analyze&slug=${encodeURIComponent(selectedSkill.slug)}`);
       const data = await res.json();
-      setOutput(data.output || data.error || "Analysis complete");
+      setSkillDetails({
+        description: data.description,
+        triggers: data.triggers
+      });
+      
+      let output = `📋 ${selectedSkill.name}\n`;
+      output += `${"─".repeat(40)}\n\n`;
+      output += `💬 ${data.description || "N/A"}\n\n`;
+      output += `🎯 Triggers: ${data.triggers || "N/A"}\n\n`;
+      
+      if (data.overview) {
+        output += `📝 Overview:\n${data.overview.substring(0, 500)}${data.overview.length > 500 ? "..." : ""}\n\n`;
+      }
+      
+      if (data.scripts && data.scripts.length > 0) {
+        output += `🛠️ Scripts: ${data.scripts.join(", ")}\n\n`;
+      }
+      
+      if (data.sections) {
+        const relevantSections = Object.entries(data.sections).filter(([k]) => 
+          !["overview", "triggers", "description", "guardrails"].includes(k.toLowerCase())
+        );
+        if (relevantSections.length > 0) {
+          output += `📚 Sections:\n`;
+          relevantSections.forEach(([title, body]) => {
+            output += `  ▸ ${title}\n`;
+          });
+          output += `\n`;
+        }
+      }
+      
+      if (data.projectMatches && data.projectMatches.length > 0) {
+        output += `🎯 Project Matches:\n`;
+        output += `${"─".repeat(40)}\n`;
+        data.projectMatches.forEach((m: {name: string; relevance: string; why: string}) => {
+          output += `\n  📦 ${m.name.toUpperCase()}\n`;
+          output += `     ${m.why}\n`;
+        });
+        output += `\n`;
+      } else {
+        output += `❌ No direct project matches found\n`;
+      }
+      
+      setOutput(output);
     } catch (e) {
       setOutput("Error: " + String(e));
     }
@@ -105,19 +266,45 @@ export default function ClawHubMarketplace() {
     setAction("clone");
     setOutput("Creating custom version...\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: "clone", slug: selectedSkill.slug }),
       });
       const data = await res.json();
-      setOutput(data.output || data.error || "Clone complete");
+      setOutput(data.output || data.error || "Clone complete!");
+      fetchInstalled();
     } catch (e) {
       setOutput("Error: " + String(e));
     }
     setAction(null);
   };
 
+  const handlePush = async () => {
+    setAction("push");
+    setOutput("Pushing to GitHub...\n");
+    try {
+      const res = await fetch("/api/clawhub", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "push" }),
+      });
+      const data = await res.json();
+      setOutput(data.output || data.error || "Push complete");
+    } catch (e) {
+      setOutput("Error: " + String(e));
+    }
+    setAction(null);
+  };
+
+  const isInstalled = (slug: string) => {
+    return AGENTS.some((agent) => installedSkills[agent]?.includes(slug));
+  };
+
+  const getCategoryName = (catId: string) => {
+    return CATEGORIES.find((c) => c.id === catId)?.name || catId;
+  };
+
   return (
     <div className="min-h-screen bg-slate-950 text-white">
       <BackToMC />
@@ -125,146 +312,272 @@ 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>
+            <div className="flex gap-2">
+              <button
+                onClick={handleSync}
+                disabled={syncing}
+                className="text-sm bg-blue-700 hover:bg-blue-600 disabled:bg-blue-800 px-3 py-1 rounded transition flex items-center gap-1"
+              >
+                {syncing ? "⏳" : "🔄"} Sync
+              </button>
+              <button
+                onClick={handlePush}
+                className="text-sm bg-green-700 hover:bg-green-600 px-3 py-1 rounded transition"
+              >
+                ⬆️ Push
+              </button>
+              <button
+                onClick={fetchInstalled}
+                className="text-sm bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded transition"
+              >
+                ↻ Refresh
+              </button>
+            </div>
+          </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>
+
+        {/* View Toggle */}
+        <div className="flex gap-2 mb-4">
+          <button
+            onClick={refreshPopular}
+            className={`px-4 py-2 rounded-lg font-medium transition ${
+              view === "popular" ? "bg-orange-600" : "bg-slate-700 hover:bg-slate-600"
+            }`}
+          >
+            🔥 Popular
+          </button>
+          <button
+            onClick={() => { setView("categories"); }}
+            className={`px-4 py-2 rounded-lg font-medium transition ${
+              view === "categories" ? "bg-orange-600" : "bg-slate-700 hover:bg-slate-600"
+            }`}
+          >
+            📂 Categories
+          </button>
+        </div>
+
+        {/* Search */}
         <div className="flex gap-4 mb-6">
           <input
             type="text"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && searchSkills(search)}
+            onKeyDown={(e) => { if (e.key === "Enter") { searchSkills(search); setView("search"); } }}
             placeholder="Search skills..."
             className="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-white placeholder-slate-400 focus:outline-none focus:border-blue-500"
           />
           <button
-            onClick={() => searchSkills(search)}
+            onClick={() => { searchSkills(search); setView("search"); }}
             className="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium transition"
           >
             Search
           </button>
-          <button
-            onClick={() => { setSearch(""); searchSkills(""); }}
-            className="bg-slate-700 hover:bg-slate-600 px-6 py-2 rounded-lg font-medium transition"
-          >
-            Popular
-          </button>
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          {/* Skills List */}
-          <div className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
-            <div className="p-4 border-b border-slate-700 bg-slate-800">
-              <h2 className="font-semibold text-lg">Available Skills</h2>
-              <p className="text-sm text-slate-400">{skills.length} skills found</p>
+        {/* Categories View */}
+        {view === "categories" && !categoryView && (
+          <div className="mb-6">
+            <div className="flex flex-wrap gap-3">
+              {CATEGORIES.map((cat) => (
+                <button
+                  key={cat.id}
+                  onClick={() => {
+                    setCategoryView(cat.id);
+                    setSkills(categorySkills[cat.id] || []);
+                  }}
+                  className="bg-slate-800 hover:bg-slate-700 border border-slate-700 hover:border-slate-600 rounded-xl px-6 py-4 flex flex-col items-center gap-2 transition min-w-[140px]"
+                >
+                  <span className="text-2xl">{cat.icon}</span>
+                  <span className="font-medium text-white">{cat.name}</span>
+                  <span className="text-xs text-slate-400">{categorySkills[cat.id]?.length || 0} skills</span>
+                </button>
+              ))}
             </div>
-            <div className="max-h-[600px] 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>
+          </div>
+        )}
+
+        {view === "categories" && categoryView && (
+          <div className="mb-4">
+            <button
+              onClick={() => setCategoryView(null)}
+              className="text-slate-400 hover:text-white flex items-center gap-2 mb-4"
+            >
+              ← Back to Categories
+            </button>
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">{CATEGORIES.find(c => c.id === categoryView)?.icon}</span>
+              <h2 className="text-xl font-bold">{CATEGORIES.find(c => c.id === categoryView)?.name}</h2>
+            </div>
+          </div>
+        )}
+
+        {/* Popular/Search/Category View */}
+        {(view === "popular" || view === "search" || (view === "categories" && categoryView)) && (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Skills List */}
+            <div className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
+              <div className="p-4 border-b border-slate-700 bg-slate-800">
+                <h2 className="font-semibold text-lg">
+                  {view === "popular" ? "🔥 Popular Skills" : view === "categories" ? CATEGORIES.find(c => c.id === categoryView)?.name || "Category" : "Search Results"}
+                </h2>
+                <p className="text-sm text-slate-400">{skills.length} skills found</p>
+              </div>
+              <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) => {
+                    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>
+                            {skill.category && view === "popular" && (
+                              <span className="text-xs bg-slate-600 px-2 py-0.5 rounded mt-1 inline-block">
+                                {getCategoryName(skill.category)}
+                              </span>
+                            )}
+                          </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">
+                                ✓
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      </button>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+
+            {/* Detail Panel */}
+            <div className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
+              <div className="p-4 border-b border-slate-700 bg-slate-800">
+                <h2 className="font-semibold text-lg">
+                  {selectedSkill ? selectedSkill.name : "Select a Skill"}
+                </h2>
+                {selectedSkill && (
+                  <p className="text-sm text-slate-400">@{selectedSkill.slug}</p>
+                )}
+              </div>
+
+              {!selectedSkill ? (
+                <div className="p-8 text-center text-slate-400">
+                  Click a skill to see details
+                </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>
-                ))
-              )}
-            </div>
-          </div>
-
-          {/* Detail Panel */}
-          <div className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
-            <div className="p-4 border-b border-slate-700 bg-slate-800">
-              <h2 className="font-semibold text-lg">
-                {selectedSkill ? selectedSkill.name : "Select a Skill"}
-              </h2>
-              {selectedSkill && (
-                <p className="text-sm text-slate-400">@{selectedSkill.slug}</p>
-              )}
-            </div>
-
-            {!selectedSkill ? (
-              <div className="p-8 text-center text-slate-400">
-                Click a skill to see details
-              </div>
-            ) : (
-              <div className="p-4">
-                {selectedSkill.description && (
+                <div className="p-4">
+                  {/* 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>
+                    <button
+                      onClick={selectAll}
+                      className="text-xs text-slate-400 hover:text-white transition"
+                    >
+                      Select All
+                    </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>
+                  {/* Action Buttons */}
+                  <div className="flex flex-col gap-2 mb-4">
+                    <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"
+                    >
+                      {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"}
+                    </button>
+                    <div className="border-t border-slate-600 pt-2 mt-2">
+                      <button
+                        onClick={handleInstall}
+                        disabled={action !== null || selectedAgents.length === 0}
+                        className="w-full 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"
+                      >
+                        {action === "install" ? "⏳ Installing..." : `✅ Install on ${selectedAgents.length} agent(s)`}
+                      </button>
+                      <button
+                        onClick={handleDelete}
+                        disabled={action !== null || selectedAgents.length === 0 || !isInstalled(selectedSkill.slug)}
+                        className="w-full 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 mt-2"
+                      >
+                        {action === "delete" ? "⏳ Removing..." : `🗑️ Remove from ${selectedAgents.length} agent(s)`}
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Output */}
+                  {output && (
+                    <div className="bg-slate-900 rounded-lg p-4 border border-slate-600">
+                      <h3 className="text-sm font-semibold text-slate-300 mb-2">Output</h3>
+                      <pre className="text-sm text-slate-200 whitespace-pre-wrap font-mono overflow-auto max-h-64 leading-relaxed">
+                        {output}
+                      </pre>
+                    </div>
                   )}
                 </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"
-                  >
-                    {installing ? "⏳ Installing..." : "✅ Install Skill"}
-                  </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"
-                  >
-                    {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"}
-                  </button>
-                </div>
-
-                {/* Output */}
-                {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">
-                      {output}
-                    </pre>
-                  </div>
-                )}
-              </div>
-            )}
+              )}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );

data/eod_briefs.json

@@ -1,4 +1,16 @@
 [
+  {
+    "id": "eod-1774382402686",
+    "date": "2026-03-24",
+    "completed": [
+      "See Mission Control for details",
+      "🛡️ SECURITY: 10 advisories found today! Check MC."
+    ],
+    "progress": {},
+    "council": {},
+    "tomorrow": [],
+    "created_at": "2026-03-24T20:00:02.686Z"
+  },
   {
     "id": "eod-1774296002482",
     "date": "2026-03-23",