feat: Multi-agent ClawHub management
- Agent selector (Horus, Amun, Cleo) - Install/delete skills per agent - Status bar showing installed skills per agent - Popular refresh button - Skills synced to agents-skills repo
This commit is contained in:
+67
-78
@@ -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 { readFile, writeFile, mkdir, rm, readdir } from "fs/promises";
|
||||
import { existsSync } from "fs";
|
||||
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);
|
||||
@@ -34,8 +34,6 @@ export async function GET(req: NextRequest) {
|
||||
}
|
||||
|
||||
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
|
||||
@@ -49,19 +47,41 @@ export async function GET(req: NextRequest) {
|
||||
})
|
||||
.filter(Boolean)
|
||||
.sort((a: any, b: any) => b.score - a.score)
|
||||
.slice(0, 20);
|
||||
.slice(0, 30);
|
||||
return NextResponse.json({ skills });
|
||||
}
|
||||
|
||||
if (action === "list") {
|
||||
// List installed skills per agent
|
||||
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 entries = await readdir(agentPath, { withFileTypes: true });
|
||||
installed[agent] = entries
|
||||
.filter((d) => d.isDirectory())
|
||||
.map((d) => d.name);
|
||||
} 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 };
|
||||
const error = e as Error & { stdout?: string; message?: string };
|
||||
return NextResponse.json({
|
||||
error: error.message || "Failed",
|
||||
details: error.stdout || "",
|
||||
@@ -72,87 +92,56 @@ export async function GET(req: NextRequest) {
|
||||
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" });
|
||||
}
|
||||
|
||||
if (action === "analyze") {
|
||||
// Download and analyze skill code
|
||||
const skillPath = path.join(SKILLS_DIR, slug);
|
||||
const results: string[] = [];
|
||||
|
||||
// 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`;
|
||||
}
|
||||
|
||||
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"));
|
||||
for (const agent of agents) {
|
||||
const agentPath = path.join(SKILLS_BASE, agent, slug);
|
||||
const agentDir = path.join(SKILLS_BASE, agent);
|
||||
|
||||
// Ensure agent dir exists
|
||||
if (!existsSync(agentDir)) {
|
||||
await mkdir(agentDir, { recursive: true });
|
||||
}
|
||||
|
||||
// Install to temp first
|
||||
const tempPath = `/tmp/clawhub-install-${slug}`;
|
||||
await execAsync(`rm -rf ${tempPath} 2>/dev/null; ${CLAWHUB_BIN} install ${slug} --dir ${tempPath} 2>&1`);
|
||||
|
||||
// Move to agent folder
|
||||
if (existsSync(tempPath)) {
|
||||
await execAsync(`mv ${tempPath} ${agentPath}`);
|
||||
results.push(`✓ ${agent}: installed ${slug}`);
|
||||
} else {
|
||||
results.push(`✗ ${agent}: failed to install ${slug}`);
|
||||
}
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
output: `Created custom skill at: ${newPath}\nSlug: ${newSlug}\n\nEdit the SKILL.md to customize further!`
|
||||
});
|
||||
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 rm(agentPath, { recursive: true });
|
||||
results.push(`✓ ${agent}: removed ${slug}`);
|
||||
} else {
|
||||
results.push(`- ${agent}: ${slug} not found`);
|
||||
}
|
||||
}
|
||||
|
||||
return NextResponse.json({ output: results.join("\n") });
|
||||
}
|
||||
|
||||
return NextResponse.json({ error: "Unknown action" }, { status: 400 });
|
||||
} catch (e: unknown) {
|
||||
const error = e as Error & { stdout?: string; stderr?: string };
|
||||
const error = e as Error & { stdout?: string; stderr?: string; message?: string };
|
||||
return NextResponse.json({
|
||||
error: error.message || "Failed",
|
||||
details: error.stdout || error.stderr || "",
|
||||
|
||||
@@ -8,35 +8,36 @@ interface Skill {
|
||||
name: string;
|
||||
score: number;
|
||||
description?: string;
|
||||
version?: string;
|
||||
author?: string;
|
||||
downloads?: number;
|
||||
}
|
||||
|
||||
const AGENTS = ["horus", "amun", "cleo"] as const;
|
||||
const AGENT_LABELS: Record<string, string> = {
|
||||
horus: "🦅 Horus (Local)",
|
||||
amun: "🤖 Amun",
|
||||
cleo: "👑 Cleo",
|
||||
};
|
||||
|
||||
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 [selectedAgents, setSelectedAgents] = useState<string[]>(["horus"]);
|
||||
const [action, setAction] = useState<"install" | "delete" | null>(null);
|
||||
const [output, setOutput] = useState("");
|
||||
const [installing, setInstalling] = useState(false);
|
||||
const [installedSkills, setInstalledSkills] = useState<Record<string, string[]>>({});
|
||||
|
||||
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,76 +49,81 @@ export default function ClawHubMarketplace() {
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
searchSkills("");
|
||||
}, [searchSkills]);
|
||||
|
||||
const getSkillDetails = async (slug: string) => {
|
||||
const refreshPopular = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch(`/api/clawhub?action=info&slug=${encodeURIComponent(slug)}`);
|
||||
const res = await fetch("/api/clawhub?action=popular");
|
||||
const data = await res.json();
|
||||
setSelectedSkill({ ...data, slug });
|
||||
setSkills(data.skills || []);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
refreshPopular();
|
||||
fetchInstalled();
|
||||
}, [refreshPopular, 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");
|
||||
} 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");
|
||||
fetchInstalled();
|
||||
} catch (e) {
|
||||
setOutput("Error: " + String(e));
|
||||
}
|
||||
setAction(null);
|
||||
};
|
||||
|
||||
const handleClone = async () => {
|
||||
if (!selectedSkill) return;
|
||||
setAction("clone");
|
||||
setOutput("Creating custom version...\n");
|
||||
const handleDelete = async () => {
|
||||
if (!selectedSkill || selectedAgents.length === 0) return;
|
||||
setAction("delete");
|
||||
setOutput("Removing...\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: "delete",
|
||||
slug: selectedSkill.slug,
|
||||
agents: selectedAgents,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
setOutput(data.output || data.error || "Clone complete");
|
||||
setOutput(data.output || data.error || "Done");
|
||||
fetchInstalled();
|
||||
} catch (e) {
|
||||
setOutput("Error: " + String(e));
|
||||
}
|
||||
setAction(null);
|
||||
};
|
||||
|
||||
const isInstalled = (slug: string) => {
|
||||
return AGENTS.some((agent) => installedSkills[agent]?.includes(slug));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-white">
|
||||
<BackToMC />
|
||||
@@ -125,9 +131,37 @@ 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>
|
||||
<button
|
||||
onClick={fetchInstalled}
|
||||
className="text-sm bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded transition"
|
||||
>
|
||||
🔄 Refresh
|
||||
</button>
|
||||
</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>
|
||||
|
||||
{/* Search */}
|
||||
<div className="flex gap-4 mb-6">
|
||||
<input
|
||||
type="text"
|
||||
@@ -144,10 +178,10 @@ export default function ClawHubMarketplace() {
|
||||
Search
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setSearch(""); searchSkills(""); }}
|
||||
onClick={refreshPopular}
|
||||
className="bg-slate-700 hover:bg-slate-600 px-6 py-2 rounded-lg font-medium transition"
|
||||
>
|
||||
Popular
|
||||
🔥 Popular
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -158,29 +192,41 @@ export default function ClawHubMarketplace() {
|
||||
<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">
|
||||
<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) => (
|
||||
<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>
|
||||
))
|
||||
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>
|
||||
@@ -202,53 +248,47 @@ export default function ClawHubMarketplace() {
|
||||
</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>
|
||||
{/* 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>
|
||||
)}
|
||||
|
||||
<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>
|
||||
)}
|
||||
<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={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"
|
||||
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"
|
||||
>
|
||||
{installing ? "⏳ Installing..." : "✅ Install Skill"}
|
||||
{action === "install" ? "⏳ Installing..." : `✅ Install on ${selectedAgents.length} agent(s)`}
|
||||
</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"
|
||||
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 === "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"}
|
||||
{action === "delete" ? "⏳ Removing..." : `🗑️ Remove from ${selectedAgents.length} agent(s)`}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -256,7 +296,7 @@ export default function ClawHubMarketplace() {
|
||||
{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">
|
||||
<pre className="text-xs text-slate-300 whitespace-pre-wrap font-mono overflow-auto max-h-48">
|
||||
{output}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user