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,163 @@
|
||||
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 path from "path";
|
||||
|
||||
const execAsync = promisify(exec);
|
||||
|
||||
const SKILLS_DIR = "/root/.openclaw/workspace/skills";
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
const { searchParams } = new URL(req.url);
|
||||
const action = searchParams.get("action");
|
||||
const q = searchParams.get("q") || "";
|
||||
const slug = searchParams.get("slug") || "";
|
||||
|
||||
try {
|
||||
if (action === "search") {
|
||||
const { stdout } = await execAsync(`clawhub search "${q}" 2>&1`);
|
||||
const lines = stdout.trim().split("\n");
|
||||
const skills = lines
|
||||
.filter((line) => line.includes("("))
|
||||
.map((line) => {
|
||||
const match = line.trim().match(/^([^\s]+)\s+([^\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 NextResponse.json({ skills });
|
||||
}
|
||||
|
||||
if (action === "popular") {
|
||||
// Get featured/popular - show top skills sorted by score
|
||||
const { stdout } = await execAsync(`clawhub search "" 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,
|
||||
};
|
||||
})
|
||||
.sort((a, b) => b.score - a.score)
|
||||
.slice(0, 20);
|
||||
return NextResponse.json({ skills });
|
||||
}
|
||||
|
||||
if (action === "info") {
|
||||
// Get skill info using inspect
|
||||
const { stdout } = await execAsync(`clawhub 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 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
const body = await req.json();
|
||||
const { action, slug, name } = body;
|
||||
|
||||
if (action === "install") {
|
||||
const { stdout, stderr } = await execAsync(
|
||||
`cd /root/.openclaw/workspace && clawhub install ${slug} 2>&1`
|
||||
);
|
||||
return NextResponse.json({ output: stdout || stderr || "Installed successfully" });
|
||||
}
|
||||
|
||||
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 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`;
|
||||
}
|
||||
|
||||
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 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"));
|
||||
}
|
||||
}
|
||||
|
||||
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 });
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -4,16 +4,16 @@ import BackToMC from "@/components/mission-control/BackToMC";
|
||||
|
||||
export default function CouncilPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-white">
|
||||
<div className="min-h-screen bg-slate-950">
|
||||
<BackToMC />
|
||||
<div className="p-6">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold text-white mb-2">🏛️ Council Chat</h1>
|
||||
<p className="text-slate-400">Loading...</p>
|
||||
</div>
|
||||
<div className="bg-slate-800 rounded-xl p-8 border border-slate-700">
|
||||
<p className="text-slate-400">Loading...</p>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<h1 className="text-2xl font-bold text-white mb-4">🏛️ Council</h1>
|
||||
<iframe
|
||||
src="/council/office"
|
||||
className="w-full h-[calc(100vh-200px)] rounded-xl border border-slate-700"
|
||||
title="Claw3D Office"
|
||||
allow="clipboard-write; socket wss:;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user