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);
-    try {
+    setView("popular");
-      const res = await fetch("/api/clawhub?action=popular");
+    // Get top skills from all categories combined
-      const data = await res.json();
+    const allSkills: Skill[] = [];
-      setSkills(data.skills || []);
+    const seen = new Set<string>();
-    } catch (e) {
+    
-      console.error(e);
+    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(() => {
-    refreshPopular();
+    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,150 +277,212 @@ 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>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Categories View */}
-          {/* Skills List */}
+        {view === "categories" && (
-          <div className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
+          <div className="space-y-6">
-            <div className="p-4 border-b border-slate-700 bg-slate-800">
+            {CATEGORIES.map((cat) => (
-              <h2 className="font-semibold text-lg">Available Skills</h2>
+              <div key={cat.id} className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
-              <p className="text-sm text-slate-400">{skills.length} skills found</p>
+                <div className="p-4 border-b border-slate-700 bg-slate-700/50">
-            </div>
+                  <h3 className="font-semibold text-lg">{cat.name}</h3>
-            <div className="max-h-[500px] overflow-y-auto">
+                  <p className="text-sm text-slate-400">{categorySkills[cat.id]?.length || 0} skills</p>
-              {loading ? (
+                </div>
-                <div className="p-8 text-center text-slate-400">Loading...</div>
+                <div className="max-h-48 overflow-y-auto">
-              ) : skills.length === 0 ? (
+                  {(categorySkills[cat.id] || []).map((skill) => {
-                <div className="p-8 text-center text-slate-400">No skills found</div>
+                    const installed = isInstalled(skill.slug);
-              ) : (
+                    return (
-                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>
-
-          {/* 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">
-                {/* 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}
+                        key={skill.slug}
-                        onClick={() => toggleAgent(agent)}
+                        onClick={() => setSelectedSkill(skill)}
-                        className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${
+                        className={`w-full text-left p-3 border-b border-slate-700 hover:bg-slate-700 transition ${
-                          selectedAgents.includes(agent)
+                          selectedSkill?.slug === skill.slug ? "bg-slate-700" : ""
-                            ? "bg-blue-600 text-white"
+                        } ${installed ? "border-l-4 border-l-green-500" : ""}`}
-                            : "bg-slate-700 text-slate-300 hover:bg-slate-600"
-                        }`}
                       >
-                        {AGENT_LABELS[agent]}
+                        <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>
+                  })}
-                  <button
-                    onClick={selectAll}
-                    className="text-xs text-slate-400 hover:text-white transition"
-                  >
-                    Select All
-                  </button>
                 </div>
+              </div>
+            ))}
+          </div>
+        )}
 
-                {/* Action Buttons */}
+        {/* Popular/Search View */}
-                <div className="flex flex-col gap-2 mb-4">
+        {(view === "popular" || view === "search") && (
-                  <button
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                    onClick={handleInstall}
+            {/* Skills List */}
-                    disabled={action !== null || selectedAgents.length === 0}
+            <div className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
-                    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"
+              <div className="p-4 border-b border-slate-700 bg-slate-800">
-                  >
+                <h2 className="font-semibold text-lg">
-                    {action === "install" ? "⏳ Installing..." : `✅ Install on ${selectedAgents.length} agent(s)`}
+                  {view === "popular" ? "🔥 Popular Skills" : "Search Results"}
-                  </button>
+                </h2>
-                  <button
+                <p className="text-sm text-slate-400">{skills.length} skills found</p>
-                    onClick={handleDelete}
+              </div>
-                    disabled={action !== null || selectedAgents.length === 0 || !isInstalled(selectedSkill.slug)}
+              <div className="max-h-[500px] overflow-y-auto">
-                    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"
+                {loading ? (
-                  >
+                  <div className="p-8 text-center text-slate-400">Loading...</div>
-                    {action === "delete" ? "⏳ Removing..." : `🗑️ Remove from ${selectedAgents.length} agent(s)`}
+                ) : skills.length === 0 ? (
-                  </button>
+                  <div className="p-8 text-center text-slate-400">No skills found</div>
-                </div>
+                ) : (
-
+                  skills.map((skill) => {
-                {/* Output */}
+                    const installed = isInstalled(skill.slug);
-                {output && (
+                    return (
-                  <div className="bg-slate-900 rounded-lg p-4 border border-slate-600">
+                      <button
-                    <h3 className="text-xs font-semibold text-slate-300 mb-2">Output</h3>
+                        key={skill.slug}
-                    <pre className="text-xs text-slate-300 whitespace-pre-wrap font-mono overflow-auto max-h-48">
+                        onClick={() => setSelectedSkill(skill)}
-                      {output}
+                        className={`w-full text-left p-4 border-b border-slate-700 hover:bg-slate-700 transition ${
-                    </pre>
+                          selectedSkill?.slug === skill.slug ? "bg-slate-700" : ""
-                  </div>
+                        } ${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>
+              ) : (
+                <div className="p-4">
+                  {/* 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>
+                    <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={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"
+                    >
+                      {action === "install" ? "⏳ Installing..." : `✅ Install on ${selectedAgents.length} agent(s)`}
+                    </button>
+                    <button
+                      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 === "delete" ? "⏳ Removing..." : `🗑️ Remove from ${selectedAgents.length} agent(s)`}
+                    </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-48">
+                        {output}
+                      </pre>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );