feat: ClawHub categories view with top skills per category

.clawhub/lock.json

@@ -0,0 +1,9 @@
+{
+  "version": 1,
+  "skills": {
+    "automation-workflows": {
+      "version": "0.1.0",
+      "installedAt": 1774373495681
+    }
+  }
+}

app/mission-control/clawhub/page.tsx

@@ -7,7 +7,7 @@ interface Skill {
   slug: string;
   name: string;
   score: number;
-  description?: string;
+  category?: string;
 }
 
 const AGENTS = ["horus", "amun", "cleo"] as const;
@@ -17,16 +17,39 @@ const AGENT_LABELS: Record<string, string> = {
   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 [selectedAgents, setSelectedAgents] = useState<string[]>(["horus"]);
+  const [view, setView] = useState<"popular" | "categories" | "search">("popular");
   const [action, setAction] = useState<"install" | "delete" | "sync" | "push" | null>(null);
   const [output, setOutput] = useState("");
   const [installedSkills, setInstalledSkills] = useState<Record<string, string[]>>({});
   const [syncing, setSyncing] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
   const fetchInstalled = useCallback(async () => {
     try {
@@ -50,22 +73,58 @@ export default function ClawHubMarketplace() {
     setLoading(false);
   }, []);
 
+  const fetchAllCategories = useCallback(async () => {
+    setLoading(true);
+    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=popular");
+        const res = await fetch(`/api/clawhub?action=search&q=${encodeURIComponent(CATEGORY_QUERIES[cat.id])}`);
         const data = await res.json();
-      setSkills(data.skills || []);
+        for (const skill of data.skills || []) {
-    } catch (e) {
+          if (!seen.has(skill.slug)) {
-      console.error(e);
+            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();
-  }, [refreshPopular, fetchInstalled]);
+  }, [view, refreshPopular, fetchAllCategories, fetchInstalled]);
 
   const toggleAgent = (agent: string) => {
     setSelectedAgents((prev) =>
@@ -162,6 +221,10 @@ export default function ClawHubMarketplace() {
     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 />
@@ -214,35 +277,91 @@ export default function ClawHubMarketplace() {
           </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={refreshPopular}
-            className="bg-slate-700 hover:bg-slate-600 px-6 py-2 rounded-lg font-medium transition"
-          >
-            🔥 Popular
-          </button>
         </div>
 
+        {/* Categories View */}
+        {view === "categories" && (
+          <div className="space-y-6">
+            {CATEGORIES.map((cat) => (
+              <div key={cat.id} className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
+                <div className="p-4 border-b border-slate-700 bg-slate-700/50">
+                  <h3 className="font-semibold text-lg">{cat.name}</h3>
+                  <p className="text-sm text-slate-400">{categorySkills[cat.id]?.length || 0} skills</p>
+                </div>
+                <div className="max-h-48 overflow-y-auto">
+                  {(categorySkills[cat.id] || []).map((skill) => {
+                    const installed = isInstalled(skill.slug);
+                    return (
+                      <button
+                        key={skill.slug}
+                        onClick={() => setSelectedSkill(skill)}
+                        className={`w-full text-left p-3 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-center justify-between">
+                          <div>
+                            <div className="font-medium text-white">{skill.name}</div>
+                            <div className="text-xs text-slate-400">@{skill.slug}</div>
+                          </div>
+                          <span className="text-xs bg-slate-600 px-2 py-0.5 rounded">
+                            {skill.score?.toFixed(2)}
+                          </span>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Popular/Search View */}
+        {(view === "popular" || view === "search") && (
           <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>
+                <h2 className="font-semibold text-lg">
+                  {view === "popular" ? "🔥 Popular Skills" : "Search Results"}
+                </h2>
                 <p className="text-sm text-slate-400">{skills.length} skills found</p>
               </div>
               <div className="max-h-[500px] overflow-y-auto">
@@ -265,6 +384,11 @@ export default function ClawHubMarketplace() {
                           <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">
@@ -272,7 +396,7 @@ export default function ClawHubMarketplace() {
                             </span>
                             {installed && (
                               <span className="text-xs bg-green-600 px-2 py-0.5 rounded">
-                              ✓ Installed
+                                ✓
                               </span>
                             )}
                           </div>
@@ -358,6 +482,7 @@ export default function ClawHubMarketplace() {
               )}
             </div>
           </div>
+        )}
       </div>
     </div>
   );