diff --git a/README.md b/README.md index f688031..22847f1 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,12 @@ [中文文档](./README_CN.md) | [日本語](./README_JA.md) +### Join the Community / 加入用户群 + +WeChat Group QR Code + +Scan the QR code to join the WeChat user group for discussions, feedback, and updates. + --- ## Features diff --git a/README_CN.md b/README_CN.md index f2ff22e..11b7a20 100644 --- a/README_CN.md +++ b/README_CN.md @@ -9,6 +9,12 @@ [![Platform](https://img.shields.io/badge/platform-macOS%20%7C%20Windows%20%7C%20Linux-lightgrey)](https://github.com/op7418/CodePilot/releases) [![License](https://img.shields.io/badge/license-MIT-blue)](LICENSE) +### 加入用户群 + +微信用户群二维码 + +扫描二维码加入微信用户群，交流使用心得、反馈问题和获取最新动态。 + --- ## 功能特性 diff --git a/docs/wechat-group-qr.png b/docs/wechat-group-qr.png new file mode 100644 index 0000000..d01343f Binary files /dev/null and b/docs/wechat-group-qr.png differ diff --git a/package-lock.json b/package-lock.json index 1ee6bfb..d7dc950 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "codepilot", - "version": "0.17.8", + "version": "0.18.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "codepilot", - "version": "0.17.8", + "version": "0.18.0", "dependencies": { "@ai-sdk/anthropic": "^3.0.47", "@ai-sdk/google": "^3.0.31", diff --git a/package.json b/package.json index 8bc3828..1731999 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "codepilot", - "version": "0.17.8", + "version": "0.18.0", "private": true, "author": { "name": "op7418", diff --git a/src/app/api/skills/marketplace/install/route.ts b/src/app/api/skills/marketplace/install/route.ts new file mode 100644 index 0000000..636ec15 --- /dev/null +++ b/src/app/api/skills/marketplace/install/route.ts @@ -0,0 +1,76 @@ +import { NextResponse } from "next/server"; +import { spawn } from "child_process"; + +export async function POST(request: Request) { + try { + const body = await request.json(); + const { source, global: isGlobal } = body as { source: string; global?: boolean }; + + if (!source || typeof source !== "string") { + return NextResponse.json( + { error: "source is required" }, + { status: 400 } + ); + } + + const args = ["skills", "add", source, "-y", "--agent", "claude-code"]; + if (isGlobal !== false) { + args.splice(3, 0, "-g"); + } + + const child = spawn("npx", args, { + env: { ...process.env }, + shell: true, + }); + + const encoder = new TextEncoder(); + const stream = new ReadableStream({ + start(controller) { + const send = (event: string, data: string) => { + controller.enqueue( + encoder.encode(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`) + ); + }; + + child.stdout?.on("data", (chunk: Buffer) => { + send("output", chunk.toString()); + }); + + child.stderr?.on("data", (chunk: Buffer) => { + send("output", chunk.toString()); + }); + + child.on("close", (code) => { + if (code === 0) { + send("done", "Install completed successfully"); + } else { + send("error", `Process exited with code ${code}`); + } + controller.close(); + }); + + child.on("error", (err) => { + send("error", err.message); + controller.close(); + }); + }, + cancel() { + child.kill(); + }, + }); + + return new Response(stream, { + headers: { + "Content-Type": "text/event-stream", + "Cache-Control": "no-cache", + Connection: "keep-alive", + }, + }); + } catch (error) { + console.error("[marketplace/install] Error:", error); + return NextResponse.json( + { error: error instanceof Error ? error.message : "Install failed" }, + { status: 500 } + ); + } +} diff --git a/src/app/api/skills/marketplace/readme/route.ts b/src/app/api/skills/marketplace/readme/route.ts new file mode 100644 index 0000000..342bc92 --- /dev/null +++ b/src/app/api/skills/marketplace/readme/route.ts @@ -0,0 +1,95 @@ +import { NextRequest, NextResponse } from "next/server"; + +// In-memory cache: repo source → Map +const treeCache = new Map; ts: number }>(); +const CACHE_TTL = 5 * 60 * 1000; // 5 minutes + +/** + * Use GitHub Git Trees API to find the actual path of a SKILL.md for a given skillId. + * Repos have widely varying structures, so we can't guess the path — we scan the tree. + */ +async function findSkillPath( + source: string, + skillId: string, + signal: AbortSignal +): Promise { + const cached = treeCache.get(source); + if (cached && Date.now() - cached.ts < CACHE_TTL) { + return cached.paths.get(skillId) ?? null; + } + + // Fetch the full recursive tree for the repo's default branch + const treeUrl = `https://api.github.com/repos/${source}/git/trees/HEAD?recursive=1`; + const res = await fetch(treeUrl, { + signal, + headers: { Accept: "application/vnd.github+json" }, + }); + + if (!res.ok) return null; + + const data = await res.json(); + const tree: Array<{ path: string; type: string }> = data.tree || []; + + // Index all SKILL.md files by their parent directory name (= skillId) + const paths = new Map(); + for (const item of tree) { + if (item.type !== "blob") continue; + if (!item.path.endsWith("/SKILL.md")) continue; + // Extract the folder name right before SKILL.md + const parts = item.path.split("/"); + const folder = parts[parts.length - 2]; + if (folder) { + // If there are duplicates, prefer shorter paths (closer to root) + if (!paths.has(folder) || item.path.length < (paths.get(folder)?.length ?? Infinity)) { + paths.set(folder, item.path); + } + } + } + + treeCache.set(source, { paths, ts: Date.now() }); + return paths.get(skillId) ?? null; +} + +export async function GET(request: NextRequest) { + try { + const source = request.nextUrl.searchParams.get("source") || ""; + const skillId = request.nextUrl.searchParams.get("skillId") || ""; + + if (!source || !skillId) { + return NextResponse.json( + { error: "source and skillId are required" }, + { status: 400 } + ); + } + + const controller = new AbortController(); + const timeout = setTimeout(() => controller.abort(), 15000); + + try { + // 1. Find the actual path via tree API (cached per repo) + const skillPath = await findSkillPath(source, skillId, controller.signal); + + if (!skillPath) { + return NextResponse.json({ content: null }, { status: 200 }); + } + + // 2. Fetch the raw SKILL.md content + const rawUrl = `https://raw.githubusercontent.com/${source}/HEAD/${skillPath}`; + const res = await fetch(rawUrl, { signal: controller.signal }); + + if (!res.ok) { + return NextResponse.json({ content: null }, { status: 200 }); + } + + const content = await res.text(); + return NextResponse.json({ content }); + } finally { + clearTimeout(timeout); + } + } catch (error) { + if (error instanceof Error && error.name === "AbortError") { + return NextResponse.json({ content: null }, { status: 200 }); + } + return NextResponse.json({ content: null }, { status: 200 }); + } +} diff --git a/src/app/api/skills/marketplace/remove/route.ts b/src/app/api/skills/marketplace/remove/route.ts new file mode 100644 index 0000000..e112c8e --- /dev/null +++ b/src/app/api/skills/marketplace/remove/route.ts @@ -0,0 +1,76 @@ +import { NextResponse } from "next/server"; +import { spawn } from "child_process"; + +export async function POST(request: Request) { + try { + const body = await request.json(); + const { skill, global: isGlobal } = body as { skill: string; global?: boolean }; + + if (!skill || typeof skill !== "string") { + return NextResponse.json( + { error: "skill name is required" }, + { status: 400 } + ); + } + + const args = ["skills", "remove", skill, "-y", "--agent", "claude-code"]; + if (isGlobal !== false) { + args.splice(3, 0, "-g"); + } + + const child = spawn("npx", args, { + env: { ...process.env }, + shell: true, + }); + + const encoder = new TextEncoder(); + const stream = new ReadableStream({ + start(controller) { + const send = (event: string, data: string) => { + controller.enqueue( + encoder.encode(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`) + ); + }; + + child.stdout?.on("data", (chunk: Buffer) => { + send("output", chunk.toString()); + }); + + child.stderr?.on("data", (chunk: Buffer) => { + send("output", chunk.toString()); + }); + + child.on("close", (code) => { + if (code === 0) { + send("done", "Uninstall completed successfully"); + } else { + send("error", `Process exited with code ${code}`); + } + controller.close(); + }); + + child.on("error", (err) => { + send("error", err.message); + controller.close(); + }); + }, + cancel() { + child.kill(); + }, + }); + + return new Response(stream, { + headers: { + "Content-Type": "text/event-stream", + "Cache-Control": "no-cache", + Connection: "keep-alive", + }, + }); + } catch (error) { + console.error("[marketplace/remove] Error:", error); + return NextResponse.json( + { error: error instanceof Error ? error.message : "Remove failed" }, + { status: 500 } + ); + } +} diff --git a/src/app/api/skills/marketplace/search/route.ts b/src/app/api/skills/marketplace/search/route.ts new file mode 100644 index 0000000..7cfcb06 --- /dev/null +++ b/src/app/api/skills/marketplace/search/route.ts @@ -0,0 +1,74 @@ +import { NextRequest, NextResponse } from "next/server"; +import { readLockFile } from "@/lib/skills-lock"; +import type { MarketplaceSkill } from "@/types"; + +export async function GET(request: NextRequest) { + try { + const q = request.nextUrl.searchParams.get("q") || ""; + const limit = request.nextUrl.searchParams.get("limit") || "20"; + + // Skills.sh requires query >= 2 chars; use a popular fallback for empty/short queries + const query = q.length >= 2 ? q : "claude"; + + const url = new URL("https://skills.sh/api/search"); + url.searchParams.set("q", query); + url.searchParams.set("limit", limit); + + const controller = new AbortController(); + const timeout = setTimeout(() => controller.abort(), 10000); + + let response: Response; + try { + response = await fetch(url.toString(), { signal: controller.signal }); + } finally { + clearTimeout(timeout); + } + + if (!response.ok) { + return NextResponse.json( + { error: `Skills.sh API returned ${response.status}` }, + { status: 502 } + ); + } + + const data = await response.json(); + const results: unknown[] = Array.isArray(data) ? data : (data.results || data.skills || []); + + // Read lock file to mark installed skills + const lockFile = readLockFile(); + const installedSources = new Set( + Object.values(lockFile.skills).map((entry) => entry.source) + ); + + const skills: MarketplaceSkill[] = results.map((item: unknown) => { + const r = item as Record; + const source = String(r.source || r.slug || r.name || ""); + const installedEntry = Object.values(lockFile.skills).find( + (entry) => entry.source === source + ); + return { + id: String(r.id || r.slug || r.name || ""), + skillId: String(r.skillId || r.name || r.slug || ""), + name: String(r.name || r.slug || ""), + installs: Number(r.installs || r.downloads || 0), + source, + isInstalled: installedSources.has(source), + installedAt: installedEntry?.installedAt, + }; + }); + + return NextResponse.json({ skills }); + } catch (error) { + if (error instanceof Error && error.name === "AbortError") { + return NextResponse.json( + { error: "Skills.sh API request timed out" }, + { status: 504 } + ); + } + console.error("[marketplace/search] Error:", error); + return NextResponse.json( + { error: error instanceof Error ? error.message : "Search failed" }, + { status: 502 } + ); + } +} diff --git a/src/app/extensions/page.tsx b/src/app/extensions/page.tsx index 7beac41..c86f70e 100644 --- a/src/app/extensions/page.tsx +++ b/src/app/extensions/page.tsx @@ -1,51 +1,28 @@ "use client"; -import { Suspense, useState } from "react"; -import { useSearchParams } from "next/navigation"; -import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { HugeiconsIcon } from "@hugeicons/react"; -import { Loading02Icon } from "@hugeicons/core-free-icons"; -import { SkillsManager } from "@/components/skills/SkillsManager"; -import { McpManager } from "@/components/plugins/McpManager"; -import { useTranslation } from "@/hooks/useTranslation"; +import { useRouter, useSearchParams } from "next/navigation"; +import { useEffect, Suspense } from "react"; -type ExtTab = "skills" | "mcp"; +function ExtensionsRedirect() { + const router = useRouter(); + const searchParams = useSearchParams(); + const tab = searchParams.get("tab"); + + useEffect(() => { + if (tab === "mcp") { + router.replace("/mcp"); + } else { + router.replace("/skills"); + } + }, [router, tab]); + + return null; +} export default function ExtensionsPage() { return ( - - - - } - > - + + ); } - -function ExtensionsPageInner() { - const searchParams = useSearchParams(); - const initialTab = (searchParams.get("tab") as ExtTab) || "skills"; - const [tab, setTab] = useState(initialTab); - const { t } = useTranslation(); - - return ( -
-
-

{t('extensions.title')}

- setTab(v as ExtTab)}> - - {t('extensions.skills')} - {t('extensions.mcpServers')} - - -
-
- {tab === "skills" && } - {tab === "mcp" && } -
-
- ); -} diff --git a/src/app/mcp/page.tsx b/src/app/mcp/page.tsx new file mode 100644 index 0000000..01dd3de --- /dev/null +++ b/src/app/mcp/page.tsx @@ -0,0 +1,13 @@ +"use client"; + +import { McpManager } from "@/components/plugins/McpManager"; + +export default function McpPage() { + return ( +
+
+ +
+
+ ); +} diff --git a/src/app/plugins/mcp/page.tsx b/src/app/plugins/mcp/page.tsx index f9ebb6b..bfc4759 100644 --- a/src/app/plugins/mcp/page.tsx +++ b/src/app/plugins/mcp/page.tsx @@ -6,7 +6,7 @@ import { useRouter } from "next/navigation"; export default function McpRedirect() { const router = useRouter(); useEffect(() => { - router.replace("/extensions?tab=mcp"); + router.replace("/mcp"); }, [router]); return null; } diff --git a/src/app/plugins/page.tsx b/src/app/plugins/page.tsx index b34a740..10775c6 100644 --- a/src/app/plugins/page.tsx +++ b/src/app/plugins/page.tsx @@ -6,7 +6,7 @@ import { useRouter } from "next/navigation"; export default function PluginsRedirect() { const router = useRouter(); useEffect(() => { - router.replace("/extensions"); + router.replace("/skills"); }, [router]); return null; } diff --git a/src/app/skills/page.tsx b/src/app/skills/page.tsx new file mode 100644 index 0000000..2511292 --- /dev/null +++ b/src/app/skills/page.tsx @@ -0,0 +1,13 @@ +"use client"; + +import { SkillsManager } from "@/components/skills/SkillsManager"; + +export default function SkillsPage() { + return ( +
+
+ +
+
+ ); +} diff --git a/src/components/layout/NavRail.tsx b/src/components/layout/NavRail.tsx index 98bad19..30c471d 100644 --- a/src/components/layout/NavRail.tsx +++ b/src/components/layout/NavRail.tsx @@ -7,7 +7,8 @@ import { useCallback, useSyncExternalStore } from "react"; import { HugeiconsIcon } from "@hugeicons/react"; import { Message02Icon, - GridIcon, + ZapIcon, + Plug01Icon, Image01Icon, Settings02Icon, Moon02Icon, @@ -34,7 +35,8 @@ interface NavRailProps { const navItems = [ { href: "/chat", label: "Chats", icon: Message02Icon }, - { href: "/extensions", label: "Extensions", icon: GridIcon }, + { href: "/skills", label: "Skills", icon: ZapIcon }, + { href: "/mcp", label: "MCP", icon: Plug01Icon }, { href: "/gallery", label: "Gallery", icon: Image01Icon }, { href: "/settings", label: "Settings", icon: Settings02Icon }, ] as const; @@ -46,7 +48,8 @@ export function NavRail({ onToggleChatList, hasUpdate, readyToInstall, skipPermi const { t } = useTranslation(); const navLabelKeys: Record = { 'Chats': 'nav.chats', - 'Extensions': 'nav.extensions', + 'Skills': 'extensions.skills', + 'MCP': 'extensions.mcpServers', 'Gallery': 'gallery.title', 'Settings': 'nav.settings', }; @@ -62,9 +65,7 @@ export function NavRail({ onToggleChatList, hasUpdate, readyToInstall, skipPermi const isActive = item.href === "/chat" ? pathname === "/chat" || pathname.startsWith("/chat/") - : item.href === "/extensions" - ? pathname.startsWith("/extensions") - : pathname === item.href || pathname.startsWith(item.href + "?"); + : pathname === item.href || pathname.startsWith(item.href + "/") || pathname.startsWith(item.href + "?"); return ( diff --git a/src/components/skills/InstallProgressDialog.tsx b/src/components/skills/InstallProgressDialog.tsx new file mode 100644 index 0000000..6088dc9 --- /dev/null +++ b/src/components/skills/InstallProgressDialog.tsx @@ -0,0 +1,179 @@ +"use client"; + +import { useState, useEffect, useRef, useCallback } from "react"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogFooter, +} from "@/components/ui/dialog"; +import { Button } from "@/components/ui/button"; +import { HugeiconsIcon } from "@hugeicons/react"; +import { Loading02Icon, CheckmarkCircle02Icon, Cancel01Icon } from "@hugeicons/core-free-icons"; +import { useTranslation } from "@/hooks/useTranslation"; + +interface InstallProgressDialogProps { + open: boolean; + onOpenChange: (open: boolean) => void; + action: "install" | "uninstall"; + source: string; + skillName: string; + onComplete: () => void; +} + +type Phase = "running" | "success" | "error"; + +export function InstallProgressDialog({ + open, + onOpenChange, + action, + source, + skillName, + onComplete, +}: InstallProgressDialogProps) { + const { t } = useTranslation(); + const [phase, setPhase] = useState("running"); + const [logs, setLogs] = useState([]); + const logsEndRef = useRef(null); + const abortRef = useRef(null); + + const startProcess = useCallback(async () => { + setPhase("running"); + setLogs([]); + + const controller = new AbortController(); + abortRef.current = controller; + + try { + const endpoint = + action === "install" + ? "/api/skills/marketplace/install" + : "/api/skills/marketplace/remove"; + + const body = + action === "install" + ? { source, global: true } + : { skill: skillName, global: true }; + + const res = await fetch(endpoint, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(body), + signal: controller.signal, + }); + + if (!res.ok || !res.body) { + setPhase("error"); + setLogs((prev) => [...prev, `HTTP ${res.status}: ${res.statusText}`]); + return; + } + + const reader = res.body.getReader(); + const decoder = new TextDecoder(); + let buffer = ""; + + while (true) { + const { done, value } = await reader.read(); + if (done) break; + + buffer += decoder.decode(value, { stream: true }); + const lines = buffer.split("\n"); + buffer = lines.pop() || ""; + + let currentEvent = ""; + for (const line of lines) { + if (line.startsWith("event: ")) { + currentEvent = line.slice(7).trim(); + } else if (line.startsWith("data: ")) { + const raw = line.slice(6); + let data: string; + try { + data = JSON.parse(raw); + } catch { + data = raw; + } + + if (currentEvent === "output") { + setLogs((prev) => [...prev, data]); + } else if (currentEvent === "done") { + setPhase("success"); + } else if (currentEvent === "error") { + setPhase("error"); + setLogs((prev) => [...prev, `Error: ${data}`]); + } + } + } + } + } catch (err) { + if ((err as Error).name !== "AbortError") { + setPhase("error"); + setLogs((prev) => [...prev, (err as Error).message]); + } + } + }, [action, source, skillName]); + + useEffect(() => { + if (open) { + startProcess(); + } + return () => { + abortRef.current?.abort(); + }; + }, [open, startProcess]); + + useEffect(() => { + logsEndRef.current?.scrollIntoView({ behavior: "smooth" }); + }, [logs]); + + const handleClose = () => { + abortRef.current?.abort(); + if (phase === "success") { + onComplete(); + } + onOpenChange(false); + }; + + return ( + + + + + {phase === "running" && ( + + )} + {phase === "success" && ( + + )} + {phase === "error" && ( + + )} + {phase === "running" + ? t('skills.installing') + : phase === "success" + ? t('skills.installSuccess') + : t('skills.installFailed')} + + + +
+ {logs.length === 0 && phase === "running" && ( + {t('skills.installing')} + )} + {logs.map((line, i) => ( +
+ {line} +
+ ))} +
+
+ + + + + +
+ ); +} diff --git a/src/components/skills/MarketplaceBrowser.tsx b/src/components/skills/MarketplaceBrowser.tsx new file mode 100644 index 0000000..a586d89 --- /dev/null +++ b/src/components/skills/MarketplaceBrowser.tsx @@ -0,0 +1,138 @@ +"use client"; + +import { useState, useEffect, useCallback, useRef } from "react"; +import { Input } from "@/components/ui/input"; +import { HugeiconsIcon } from "@hugeicons/react"; +import { Search01Icon, Loading02Icon, Store01Icon } from "@hugeicons/core-free-icons"; +import { useTranslation } from "@/hooks/useTranslation"; +import { MarketplaceSkillCard } from "./MarketplaceSkillCard"; +import { MarketplaceSkillDetail } from "./MarketplaceSkillDetail"; +import type { MarketplaceSkill } from "@/types"; + +interface MarketplaceBrowserProps { + onInstalled: () => void; +} + +export function MarketplaceBrowser({ onInstalled }: MarketplaceBrowserProps) { + const { t } = useTranslation(); + const [search, setSearch] = useState(""); + const [results, setResults] = useState([]); + const [selected, setSelected] = useState(null); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + const debounceRef = useRef>(null); + + const doSearch = useCallback(async (query: string) => { + setLoading(true); + setError(null); + try { + const params = new URLSearchParams(); + if (query) params.set("q", query); + params.set("limit", "20"); + const res = await fetch(`/api/skills/marketplace/search?${params}`); + if (!res.ok) { + const data = await res.json().catch(() => ({})); + throw new Error(data.error || `HTTP ${res.status}`); + } + const data = await res.json(); + setResults(data.skills || []); + } catch (err) { + setError((err as Error).message); + setResults([]); + } finally { + setLoading(false); + } + }, []); + + // Initial load — fetch popular skills + useEffect(() => { + doSearch(""); + }, [doSearch]); + + // Debounced search + useEffect(() => { + if (debounceRef.current) clearTimeout(debounceRef.current); + debounceRef.current = setTimeout(() => { + doSearch(search); + }, 300); + return () => { + if (debounceRef.current) clearTimeout(debounceRef.current); + }; + }, [search, doSearch]); + + const handleInstallComplete = useCallback(() => { + // Refresh results to update installed status + doSearch(search); + onInstalled(); + }, [search, doSearch, onInstalled]); + + return ( +
+ {/* Left: search + results */} +
+
+
+ + setSearch(e.target.value)} + className="pl-7 h-8 text-sm" + /> +
+
+
+
+ {loading && results.length === 0 && ( +
+ +
+ )} + {error && ( +
+

{t('skills.marketplaceError')}

+

{error}

+
+ )} + {!loading && !error && results.length === 0 && ( +
+ +

{t('skills.searchNoResults')}

+
+ )} + {results.map((skill) => ( + setSelected(skill)} + /> + ))} +
+
+
+ + {/* Right: detail */} +
+ {selected ? ( + + ) : ( +
+ +
+

{t('skills.marketplaceHint')}

+

{t('skills.marketplaceHintDesc')}

+
+
+ )} +
+
+ ); +} diff --git a/src/components/skills/MarketplaceSkillCard.tsx b/src/components/skills/MarketplaceSkillCard.tsx new file mode 100644 index 0000000..4cae37c --- /dev/null +++ b/src/components/skills/MarketplaceSkillCard.tsx @@ -0,0 +1,59 @@ +"use client"; + +import { HugeiconsIcon } from "@hugeicons/react"; +import { ZapIcon, Download04Icon, CheckmarkCircle02Icon } from "@hugeicons/core-free-icons"; +import { Badge } from "@/components/ui/badge"; +import { cn } from "@/lib/utils"; +import { useTranslation } from "@/hooks/useTranslation"; +import type { MarketplaceSkill } from "@/types"; + +interface MarketplaceSkillCardProps { + skill: MarketplaceSkill; + selected: boolean; + onSelect: () => void; +} + +export function MarketplaceSkillCard({ + skill, + selected, + onSelect, +}: MarketplaceSkillCardProps) { + const { t } = useTranslation(); + + return ( +
+ +
+
+ {skill.name} + {skill.isInstalled ? ( + + + {t('skills.installed')} + + ) : null} +
+
+ {skill.source} + {skill.installs > 0 && ( + + + {skill.installs.toLocaleString()} + + )} +
+
+
+ ); +} diff --git a/src/components/skills/MarketplaceSkillDetail.tsx b/src/components/skills/MarketplaceSkillDetail.tsx new file mode 100644 index 0000000..6f19ec5 --- /dev/null +++ b/src/components/skills/MarketplaceSkillDetail.tsx @@ -0,0 +1,173 @@ +"use client"; + +import { useState, useEffect } from "react"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { HugeiconsIcon } from "@hugeicons/react"; +import { + Download04Icon, + Delete02Icon, + CheckmarkCircle02Icon, + LinkSquare01Icon, + ZapIcon, + Loading02Icon, +} from "@hugeicons/core-free-icons"; +import { useTranslation } from "@/hooks/useTranslation"; +import { InstallProgressDialog } from "./InstallProgressDialog"; +import ReactMarkdown from "react-markdown"; +import remarkGfm from "remark-gfm"; +import type { MarketplaceSkill } from "@/types"; + +interface MarketplaceSkillDetailProps { + skill: MarketplaceSkill; + onInstallComplete: () => void; +} + +export function MarketplaceSkillDetail({ + skill, + onInstallComplete, +}: MarketplaceSkillDetailProps) { + const { t } = useTranslation(); + const [showProgress, setShowProgress] = useState(false); + const [progressAction, setProgressAction] = useState<"install" | "uninstall">("install"); + const [readme, setReadme] = useState(null); + const [readmeLoading, setReadmeLoading] = useState(true); + + useEffect(() => { + let cancelled = false; + setReadme(null); + setReadmeLoading(true); + + const fetchReadme = async () => { + try { + const params = new URLSearchParams({ + source: skill.source, + skillId: skill.skillId, + }); + const res = await fetch(`/api/skills/marketplace/readme?${params}`); + if (!cancelled && res.ok) { + const data = await res.json(); + setReadme(data.content || null); + } + } catch { + // ignore + } finally { + if (!cancelled) setReadmeLoading(false); + } + }; + + fetchReadme(); + return () => { cancelled = true; }; + }, [skill.source, skill.skillId]); + + const handleInstall = () => { + setProgressAction("install"); + setShowProgress(true); + }; + + const handleUninstall = () => { + setProgressAction("uninstall"); + setShowProgress(true); + }; + + const githubUrl = skill.source.includes("/") + ? `https://github.com/${skill.source}` + : null; + + // Strip YAML front matter from readme for display + const displayContent = readme + ? readme.replace(/^---\r?\n[\s\S]*?\r?\n---\r?\n?/, "").trim() + : null; + + return ( +
+ {/* Header */} +
+
+
+ +
+
+
+

{skill.name}

+ {skill.isInstalled && ( + + + {t('skills.installed')} + + )} +
+
+ {skill.source} + {githubUrl && ( + + + + )} + {skill.installs > 0 && ( + + + {skill.installs.toLocaleString()} + + )} +
+
+
+ {skill.isInstalled ? ( + + ) : ( + + )} +
+
+
+ + {/* Body — SKILL.md content */} +
+ {readmeLoading ? ( +
+ +
+ ) : displayContent ? ( +
+ + {displayContent} + +
+ ) : ( +
+

{t('skills.noReadme')}

+
+ )} +
+ + +
+ ); +} diff --git a/src/components/skills/SkillListItem.tsx b/src/components/skills/SkillListItem.tsx index b367992..45232e4 100644 --- a/src/components/skills/SkillListItem.tsx +++ b/src/components/skills/SkillListItem.tsx @@ -68,31 +68,7 @@ export function SkillListItem({ >
-
- /{skill.name} - - {skill.source === "global" ? ( - - ) : skill.source === "installed" ? ( - - ) : ( - - )} - {skill.source === "installed" && skill.installedSource - ? `installed:${skill.installedSource}` - : skill.source} - -
+ /{skill.name}

{skill.description}

diff --git a/src/components/skills/SkillsManager.tsx b/src/components/skills/SkillsManager.tsx index 9c6462b..b2ad687 100644 --- a/src/components/skills/SkillsManager.tsx +++ b/src/components/skills/SkillsManager.tsx @@ -10,9 +10,13 @@ import { PlusSignIcon, Search01Icon, ZapIcon, Loading02Icon } from "@hugeicons/c import { SkillListItem } from "./SkillListItem"; import { SkillEditor } from "./SkillEditor"; import { CreateSkillDialog } from "./CreateSkillDialog"; +import { MarketplaceBrowser } from "./MarketplaceBrowser"; import { useTranslation } from "@/hooks/useTranslation"; +import { cn } from "@/lib/utils"; import type { SkillItem } from "./SkillListItem"; +type ViewTab = "local" | "marketplace"; + export function SkillsManager() { const { workingDirectory } = usePanel(); const { t } = useTranslation(); @@ -21,6 +25,7 @@ export function SkillsManager() { const [loading, setLoading] = useState(true); const [search, setSearch] = useState(""); const [showCreate, setShowCreate] = useState(false); + const [viewTab, setViewTab] = useState("local"); const fetchSkills = useCallback(async () => { try { @@ -150,14 +155,45 @@ export function SkillsManager() {
{/* Header */}
-

{t('extensions.skills')}

- +

{t('extensions.skills')}

+ {/* Segmented control */} +
+ + +
+
+ {viewTab === "local" && ( + + )}
{/* Main content */} + {viewTab === "marketplace" ? ( + + ) : (
{/* Left: skill list */}
@@ -288,6 +324,7 @@ export function SkillsManager() { )}
+ )} = { 'skills.splitView': '分屏视图', 'skills.deleteConfirm': '再次点击以确认', 'skills.placeholder': '用 Markdown 编写技能提示词...', + 'skills.mySkills': '我的技能', + 'skills.marketplace': '技能市场', + 'skills.marketplaceSearch': '搜索 Skills.sh...', + 'skills.install': '安装', + 'skills.installed': '已安装', + 'skills.installing': '安装中...', + 'skills.uninstall': '卸载', + 'skills.installs': '次安装', + 'skills.source': '来源', + 'skills.installedAt': '安装时间', + 'skills.installSuccess': '安装完成', + 'skills.installFailed': '安装失败', + 'skills.searchNoResults': '未找到技能', + 'skills.marketplaceError': '加载技能市场失败', + 'skills.marketplaceHint': '浏览技能市场', + 'skills.marketplaceHintDesc': '搜索并安装来自 Skills.sh 的社区技能', + 'skills.noReadme': '暂无技能描述', // ── MCP ───────────────────────────────────────────────────── 'mcp.addServer': '添加服务器', diff --git a/src/lib/skills-lock.ts b/src/lib/skills-lock.ts new file mode 100644 index 0000000..6a52df1 --- /dev/null +++ b/src/lib/skills-lock.ts @@ -0,0 +1,22 @@ +import fs from "fs"; +import path from "path"; +import os from "os"; +import type { SkillLockFile } from "@/types"; + +const LOCK_FILE_PATH = path.join(os.homedir(), ".agents", ".skill-lock.json"); + +export function readLockFile(): SkillLockFile { + try { + if (!fs.existsSync(LOCK_FILE_PATH)) { + return { version: 0, skills: {} }; + } + const raw = fs.readFileSync(LOCK_FILE_PATH, "utf-8"); + const parsed = JSON.parse(raw); + return { + version: parsed.version ?? 0, + skills: parsed.skills ?? {}, + }; + } catch { + return { version: 0, skills: {} }; + } +} diff --git a/src/types/index.ts b/src/types/index.ts index 32ec413..4bf3da4 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -232,6 +232,33 @@ export interface SkillDefinition { enabled: boolean; } +// --- Marketplace (Skills.sh) --- + +export interface MarketplaceSkill { + id: string; + skillId: string; // e.g. "git-commit" + name: string; + installs: number; + source: string; // e.g. "owner/repo" + isInstalled?: boolean; + installedAt?: string; +} + +export interface SkillLockFile { + version: number; + skills: Record; +} + +export interface SkillLockEntry { + source: string; + sourceType: string; + sourceUrl: string; + skillPath?: string; + skillFolderHash: string; + installedAt: string; + updatedAt: string; +} + export interface CreateSkillRequest { name: string; description: string;