feat: ClawHub Marketplace in Mission Control
- /mission-control/clawhub - Search, browse skills - Install, Analyze, or Clone skills - API route at /api/clawhub - Added to Council navigation
This commit is contained in:
@@ -0,0 +1,271 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import BackToMC from "@/components/mission-control/BackToMC";
|
||||
|
||||
interface Skill {
|
||||
slug: string;
|
||||
name: string;
|
||||
score: number;
|
||||
description?: string;
|
||||
version?: string;
|
||||
author?: string;
|
||||
downloads?: number;
|
||||
}
|
||||
|
||||
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 [output, setOutput] = useState("");
|
||||
const [installing, setInstalling] = useState(false);
|
||||
|
||||
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)}`);
|
||||
const data = await res.json();
|
||||
setSkills(data.skills || []);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
searchSkills("");
|
||||
}, [searchSkills]);
|
||||
|
||||
const getSkillDetails = async (slug: string) => {
|
||||
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);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleInstall = async () => {
|
||||
if (!selectedSkill) return;
|
||||
setInstalling(true);
|
||||
setOutput("Installing...\n");
|
||||
try {
|
||||
const res = await fetch(`/api/clawhub`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action: "install", slug: selectedSkill.slug }),
|
||||
});
|
||||
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");
|
||||
} catch (e) {
|
||||
setOutput("Error: " + String(e));
|
||||
}
|
||||
setAction(null);
|
||||
};
|
||||
|
||||
const handleClone = async () => {
|
||||
if (!selectedSkill) return;
|
||||
setAction("clone");
|
||||
setOutput("Creating custom version...\n");
|
||||
try {
|
||||
const res = await fetch(`/api/clawhub`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action: "clone", slug: selectedSkill.slug, name: selectedSkill.name }),
|
||||
});
|
||||
const data = await res.json();
|
||||
setOutput(data.output || data.error || "Clone complete");
|
||||
} catch (e) {
|
||||
setOutput("Error: " + String(e));
|
||||
}
|
||||
setAction(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-white">
|
||||
<BackToMC />
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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)}
|
||||
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)}
|
||||
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>
|
||||
</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>
|
||||
) : (
|
||||
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="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>
|
||||
</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>
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user