@jiangxiaosheng/digital-agent-platform 1.0.0

package/src/components/agents/model-selector.tsx

@@ -0,0 +1,290 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Check, ChevronDown, Brain, Thermometer, Cpu, DollarSign, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import type { ProviderGroup, ModelInfo } from "@/app/api/models/route";
+
+export interface ModelCaps {
+  supportsThinking: boolean;
+  supportsTemperature: boolean;
+  thinkingLevels: string[];
+  contextWindow: number;
+  maxTokens: number;
+}
+
+interface ModelSelectorProps {
+  providerId: string;
+  modelId: string;
+  onChange: (providerId: string, modelId: string, caps: ModelCaps) => void;
+}
+
+// Eagerly resolve caps from the global model cache
+let _groupsCache: ProviderGroup[] | null = null;
+let _groupsPromise: Promise<ProviderGroup[]> | null = null;
+
+function fetchGroups(): Promise<ProviderGroup[]> {
+  if (_groupsCache) return Promise.resolve(_groupsCache);
+  if (_groupsPromise) return _groupsPromise;
+  _groupsPromise = fetch("/api/models")
+    .then((r) => r.json())
+    .then((data: ProviderGroup[]) => { _groupsCache = data; return data; });
+  return _groupsPromise;
+}
+
+function findModel(groups: ProviderGroup[], providerId: string, modelId: string): ModelInfo | undefined {
+  return groups.find((g) => g.id === providerId)?.models.find((m) => m.id === modelId);
+}
+
+function capsFromModel(m: ModelInfo): ModelCaps {
+  return {
+    supportsThinking: m.supportsThinking,
+    supportsTemperature: m.supportsTemperature,
+    thinkingLevels: m.thinkingLevels,
+    contextWindow: m.contextWindow,
+    maxTokens: m.maxTokens,
+  };
+}
+
+export function useModelCaps(providerId: string, modelId: string): ModelCaps {
+  const [caps, setCaps] = useState<ModelCaps>({
+    supportsThinking: false,
+    supportsTemperature: true,
+    thinkingLevels: [],
+    contextWindow: 200000,
+    maxTokens: 8192,
+  });
+
+  useEffect(() => {
+    if (!providerId || !modelId) return;
+    fetchGroups().then((groups) => {
+      const m = findModel(groups, providerId, modelId);
+      if (m) setCaps(capsFromModel(m));
+    });
+  }, [providerId, modelId]);
+
+  return caps;
+}
+
+export function ModelSelector({ providerId, modelId, onChange }: ModelSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const [groups, setGroups] = useState<ProviderGroup[]>(_groupsCache ?? []);
+  const [loading, setLoading] = useState(false);
+  const [search, setSearch] = useState("");
+  const [activePid, setActivePid] = useState<string>(providerId || "anthropic");
+
+  // Pre-load groups on mount
+  useEffect(() => {
+    if (_groupsCache) { setGroups(_groupsCache); return; }
+    setLoading(true);
+    fetchGroups().then((data) => setGroups(data)).finally(() => setLoading(false));
+  }, []);
+
+  // Keep active provider in sync with prop
+  useEffect(() => {
+    if (providerId) setActivePid(providerId);
+  }, [providerId]);
+
+  const handleOpen = useCallback(() => {
+    setActivePid(providerId || groups[0]?.id || "anthropic");
+    setSearch("");
+    setOpen(true);
+  }, [providerId, groups]);
+
+  // Label for trigger button
+  const currentGroup = groups.find((g) => g.id === providerId);
+  const currentModel = currentGroup?.models.find((m) => m.id === modelId);
+  const triggerLabel = currentModel
+    ? `${currentGroup?.name} / ${currentModel.name}`
+    : providerId && modelId
+    ? `${providerId} / ${modelId}`
+    : "选择模型…";
+
+  const activeGroup = groups.find((g) => g.id === activePid);
+  const visibleModels = (activeGroup?.models ?? []).filter((m) => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    return m.id.toLowerCase().includes(q) || m.name.toLowerCase().includes(q);
+  });
+
+  const handleSelect = (m: ModelInfo) => {
+    onChange(m.providerId, m.id, capsFromModel(m));
+    setOpen(false);
+    setSearch("");
+  };
+
+  return (
+    <>
+      {/* Trigger */}
+      <Button
+        type="button"
+        variant="outline"
+        onClick={handleOpen}
+        className="w-full justify-between font-normal h-10"
+      >
+        <span className="truncate text-sm">{triggerLabel}</span>
+        <ChevronDown className="ml-2 h-4 w-4 flex-shrink-0 opacity-50" />
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-2xl p-0 gap-0 overflow-hidden">
+          <DialogHeader className="px-4 pt-4 pb-3 border-b shrink-0">
+            <DialogTitle className="text-base">选择模型</DialogTitle>
+          </DialogHeader>
+
+          <div className="flex" style={{ height: 520 }}>
+            {/* Left: provider list */}
+            <div className="w-48 shrink-0 border-r flex flex-col">
+              <div className="px-2 py-1.5 border-b">
+                <p className="text-xs font-medium text-muted-foreground px-1">提供商</p>
+              </div>
+              <ScrollArea className="flex-1">
+                <div className="p-1.5 space-y-0.5">
+                  {loading && !groups.length && (
+                    <p className="text-xs text-muted-foreground text-center py-6">加载中…</p>
+                  )}
+                  {groups.map((g) => {
+                    const isActive = g.id === activePid;
+                    const isSelected = g.id === providerId;
+                    return (
+                      <button
+                        key={g.id}
+                        type="button"
+                        onClick={() => { setActivePid(g.id); setSearch(""); }}
+                        className={cn(
+                          "w-full text-left rounded-md px-2.5 py-2 transition-colors",
+                          isActive ? "bg-secondary" : "hover:bg-secondary/40",
+                        )}
+                      >
+                        <div className="flex items-center gap-1.5">
+                          {isSelected && <Check className="h-3 w-3 text-primary shrink-0" />}
+                          <span className={cn("text-sm truncate", !isActive && "text-muted-foreground")}>
+                            {g.name}
+                          </span>
+                        </div>
+                        <span className="text-[11px] text-muted-foreground pl-0">
+                          {g.models.length} 个模型
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </ScrollArea>
+            </div>
+
+            {/* Right: model list */}
+            <div className="flex-1 flex flex-col min-w-0">
+              <div className="px-2 py-1.5 border-b shrink-0">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+                  <Input
+                    placeholder="搜索模型名称或 ID…"
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    className="pl-8 h-8 text-sm"
+                    autoFocus
+                  />
+                </div>
+              </div>
+              <ScrollArea className="flex-1">
+                <div className="p-2 space-y-1">
+                  {visibleModels.length === 0 && (
+                    <p className="text-sm text-muted-foreground text-center py-10">
+                      {search ? "无匹配模型" : "该提供商暂无模型"}
+                    </p>
+                  )}
+                  {visibleModels.map((m) => {
+                    const isSelected = m.providerId === providerId && m.id === modelId;
+                    return (
+                      <button
+                        key={m.id}
+                        type="button"
+                        onClick={() => handleSelect(m)}
+                        className={cn(
+                          "w-full text-left rounded-lg px-3 py-2.5 border transition-colors",
+                          isSelected
+                            ? "border-primary/50 bg-primary/5 dark:bg-primary/10"
+                            : "border-transparent hover:border-border hover:bg-secondary/40",
+                        )}
+                      >
+                        {/* Row 1: name + price */}
+                        <div className="flex items-start justify-between gap-2">
+                          <div className="min-w-0 flex-1">
+                            <div className="flex items-center gap-1.5">
+                              <span className="text-sm font-medium leading-tight">{m.name}</span>
+                              {isSelected && (
+                                <Check className="h-3.5 w-3.5 text-primary shrink-0" />
+                              )}
+                            </div>
+                            <p className="text-[11px] text-muted-foreground font-mono truncate mt-0.5">
+                              {m.id}
+                            </p>
+                          </div>
+                          {m.costInput !== undefined && (
+                            <span className="text-[11px] text-muted-foreground flex items-center gap-0.5 shrink-0 mt-0.5">
+                              <DollarSign className="h-2.5 w-2.5" />
+                              {m.costInput}/{m.costOutput}/M
+                            </span>
+                          )}
+                        </div>
+
+                        {/* Row 2: capability tags */}
+                        <div className="flex flex-wrap gap-1 mt-2">
+                          <CapTag icon={<Cpu className="h-2.5 w-2.5" />} label={fmtCtx(m.contextWindow)} />
+                          {m.supportsThinking && (
+                            <CapTag
+                              icon={<Brain className="h-2.5 w-2.5" />}
+                              label={m.thinkingLevels.length > 0
+                                ? `Thinking (${m.thinkingLevels.join("/")})`
+                                : "Thinking"}
+                              className="text-purple-600 dark:text-purple-400 border-purple-300 dark:border-purple-700"
+                            />
+                          )}
+                          {!m.supportsTemperature && (
+                            <CapTag
+                              icon={<Thermometer className="h-2.5 w-2.5" />}
+                              label="无 Temp"
+                              className="text-amber-600 dark:text-amber-400 border-amber-300 dark:border-amber-700"
+                            />
+                          )}
+                          {m.inputTypes.includes("image") && (
+                            <CapTag label="👁 Vision" />
+                          )}
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </ScrollArea>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+function CapTag({
+  icon, label, className,
+}: { icon?: React.ReactNode; label: string; className?: string }) {
+  return (
+    <span className={cn(
+      "inline-flex items-center gap-0.5 rounded border px-1.5 py-0.5 text-[10px] leading-none text-muted-foreground",
+      className,
+    )}>
+      {icon}{label}
+    </span>
+  );
+}
+
+function fmtCtx(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(0)}M ctx`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}K ctx`;
+  return `${n} ctx`;
+}

package/src/components/agents/skills-manager.tsx

@@ -0,0 +1,347 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import {
+  Search, Trash2, Check, Loader2, Download,
+  Plus, ChevronDown, XCircle, ExternalLink, RefreshCw,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+export interface SkillInfo {
+  name: string;
+  description: string;
+  filePath: string;
+  source: string;
+  hasSetup: boolean;
+}
+
+interface SearchResult {
+  package: string;
+  name: string;
+  installs: number;
+  installsDisplay: string;
+  url: string;
+}
+
+// ─── Main SkillsManager (settings page) ──────────────────────────────────────
+interface SkillsManagerProps {
+  enabledSkills?: string[];
+  onChange?: (skills: string[]) => void;
+}
+
+export function SkillsManager({ enabledSkills, onChange }: SkillsManagerProps) {
+  const [installed, setInstalled] = useState<SkillInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showInstall, setShowInstall] = useState(false);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    fetch("/api/skills").then(r => r.json()).then(setInstalled).finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  const uninstall = async (name: string) => {
+    await fetch(`/api/skills/${encodeURIComponent(name)}`, { method: "DELETE" });
+    setInstalled(prev => prev.filter(s => s.name !== name));
+    if (onChange && enabledSkills) onChange(enabledSkills.filter(s => s !== name));
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Header row */}
+      <div className="flex items-center justify-between">
+        <div className="text-sm text-muted-foreground">
+          已安装 <span className="font-medium text-foreground">{installed.length}</span> 个 Skill
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="sm" onClick={load} disabled={loading} className="gap-1.5 h-8">
+            <RefreshCw className={cn("h-3.5 w-3.5", loading && "animate-spin")} />
+            刷新
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => setShowInstall(true)} className="gap-1.5 h-8">
+            <Plus className="h-3.5 w-3.5" />
+            安装 Skill
+          </Button>
+        </div>
+      </div>
+
+      {/* Installed list */}
+      {loading ? (
+        <div className="flex items-center justify-center py-10 text-muted-foreground text-sm">
+          <Loader2 className="h-4 w-4 animate-spin mr-2" />加载中…
+        </div>
+      ) : installed.length === 0 ? (
+        <div className="rounded-xl border border-dashed p-10 text-center text-sm text-muted-foreground">
+          <p className="mb-2">还没有安装任何 Skill</p>
+          <Button variant="outline" size="sm" onClick={() => setShowInstall(true)} className="gap-1.5">
+            <Plus className="h-3.5 w-3.5" />安装第一个 Skill
+          </Button>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {installed.map(skill => (
+            <div key={skill.name}
+              className="group flex items-start gap-3 rounded-xl border p-3.5 hover:bg-secondary/20 transition-colors">
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="font-mono text-sm font-medium">{skill.name}</span>
+                  {skill.hasSetup && (
+                    <Badge variant="outline" className="text-[10px] h-4 px-1.5 font-normal">含 Setup</Badge>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{skill.description || "暂无描述"}</p>
+                <p className="text-[10px] text-muted-foreground/60 mt-0.5 font-mono truncate">{skill.filePath}</p>
+              </div>
+              <button type="button" onClick={() => uninstall(skill.name)}
+                title="卸载"
+                className="opacity-0 group-hover:opacity-100 p-1.5 rounded-lg text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-all shrink-0">
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <InstallDialog open={showInstall} onClose={() => setShowInstall(false)} onInstalled={load} installed={installed} />
+    </div>
+  );
+}
+
+// ─── InstallDialog — community search + URL + paste ──────────────────────────
+function InstallDialog({
+  open, onClose, onInstalled, installed,
+}: { open: boolean; onClose: () => void; onInstalled: () => void; installed: SkillInfo[] }) {
+  const installedNames = new Set(installed.map(s => s.name));
+  const [tab, setTab] = useState<"search" | "url" | "paste">("search");
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [searching, setSearching] = useState(false);
+  const [searchErr, setSearchErr] = useState("");
+  const [installing, setInstalling] = useState<string | null>(null);
+  const [installStatus, setInstallStatus] = useState<Record<string, "ok" | "err">>({});
+
+  // URL tab
+  const [url, setUrl] = useState("");
+  // Paste tab
+  const [content, setContent] = useState("");
+  const [name, setName] = useState("");
+  // Common install status for URL/paste
+  const [status, setStatus] = useState<"idle" | "loading" | "ok" | "err">("idle");
+  const [errMsg, setErrMsg] = useState("");
+
+  const searchTimer = useRef<NodeJS.Timeout | null>(null);
+
+  const doSearch = useCallback(async (q: string) => {
+    if (!q.trim()) { setResults([]); return; }
+    setSearching(true); setSearchErr("");
+    try {
+      const res = await fetch("/api/skills/search", {
+        method: "POST", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ query: q.trim(), limit: 30 }),
+      });
+      const data = await res.json() as { results?: SearchResult[]; error?: string };
+      if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
+      setResults(data.results ?? []);
+    } catch (e) {
+      setSearchErr(String(e));
+      setResults([]);
+    } finally { setSearching(false); }
+  }, []);
+
+  // Debounced search
+  useEffect(() => {
+    if (tab !== "search") return;
+    if (searchTimer.current) clearTimeout(searchTimer.current);
+    searchTimer.current = setTimeout(() => doSearch(query), 400);
+    return () => { if (searchTimer.current) clearTimeout(searchTimer.current); };
+  }, [query, tab, doSearch]);
+
+  const installFromRegistry = async (pkg: string) => {
+    setInstalling(pkg);
+    try {
+      const res = await fetch("/api/skills/install", {
+        method: "POST", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ package: pkg }),
+      });
+      const d = await res.json() as { success?: boolean; error?: string };
+      if (!res.ok || !d.success) throw new Error(d.error ?? "安装失败");
+      setInstallStatus(p => ({ ...p, [pkg]: "ok" }));
+      onInstalled();
+    } catch (e) {
+      setInstallStatus(p => ({ ...p, [pkg]: "err" }));
+      console.error(e);
+    } finally { setInstalling(null); }
+  };
+
+  const installManual = async () => {
+    setStatus("loading"); setErrMsg("");
+    try {
+      const body = tab === "url" ? { url: url.trim() } : { content: content.trim(), name: name.trim() };
+      const res = await fetch("/api/skills", {
+        method: "POST", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      const d = await res.json() as { error?: string };
+      if (!res.ok) throw new Error(d.error ?? "安装失败");
+      setStatus("ok"); onInstalled();
+      setTimeout(() => { onClose(); reset(); }, 1200);
+    } catch (e) { setStatus("err"); setErrMsg(String(e)); }
+  };
+
+  const reset = () => {
+    setQuery(""); setResults([]); setSearchErr("");
+    setUrl(""); setContent(""); setName("");
+    setStatus("idle"); setErrMsg(""); setInstallStatus({});
+  };
+
+  const skillName = (pkg: string) => pkg.split("@").pop() ?? pkg;
+
+  return (
+    <Dialog open={open} onOpenChange={v => { if (!v) { onClose(); reset(); } }}>
+      <DialogContent className="max-w-xl max-h-[85vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>安装 Skill</DialogTitle>
+        </DialogHeader>
+
+        <Tabs value={tab} onValueChange={v => setTab(v as typeof tab)} className="flex-1 flex flex-col min-h-0">
+          <TabsList className="shrink-0">
+            <TabsTrigger value="search">🔍 社区搜索</TabsTrigger>
+            <TabsTrigger value="url">🔗 URL 安装</TabsTrigger>
+            <TabsTrigger value="paste">📋 粘贴内容</TabsTrigger>
+          </TabsList>
+
+          {/* Community search */}
+          <TabsContent value="search" className="flex-1 flex flex-col min-h-0 space-y-3 mt-3">
+            <div className="relative shrink-0">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                value={query} onChange={e => setQuery(e.target.value)}
+                placeholder="搜索社区 Skills，例如：web search、pdf、code review…"
+                className="pl-9"
+                autoFocus
+              />
+            </div>
+
+            <div className="flex-1 overflow-y-auto min-h-0 space-y-1.5 pr-1">
+              {searching && (
+                <div className="flex items-center justify-center py-12 text-muted-foreground text-sm">
+                  <Loader2 className="h-4 w-4 animate-spin mr-2" />搜索中…
+                </div>
+              )}
+              {!searching && searchErr && (
+                <div className="py-8 text-center text-sm text-destructive">{searchErr}</div>
+              )}
+              {!searching && !searchErr && query && results.length === 0 && (
+                <div className="py-8 text-center text-sm text-muted-foreground">
+                  未找到「{query}」相关 Skill
+                </div>
+              )}
+              {!searching && !searchErr && !query && (
+                <div className="py-8 text-center text-sm text-muted-foreground">
+                  输入关键词搜索 <a href="https://skills.sh" target="_blank" rel="noopener noreferrer" className="underline">skills.sh</a> 社区 Skills
+                </div>
+              )}
+              {results.map(r => {
+                const st = installStatus[r.package];
+                const busy = installing === r.package;
+                const alreadyInstalled = installedNames.has(r.name);
+                return (
+                  <div key={r.package} className={cn(
+                    "flex items-start gap-3 rounded-xl border p-3 transition-colors",
+                    alreadyInstalled ? "bg-[#57BE6B]/5 border-[#57BE6B]/30" : "hover:bg-secondary/30",
+                  )}>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className="font-mono text-sm font-medium">{r.name}</span>
+                        {alreadyInstalled && (
+                          <Badge className="text-[10px] h-4 px-1.5 bg-[#57BE6B]/15 text-[#57BE6B] border-0 font-normal">
+                            已安装
+                          </Badge>
+                        )}
+                        {r.installs > 0 && (
+                          <span className="text-[10px] text-muted-foreground bg-secondary px-1.5 py-0.5 rounded">
+                            ↓ {r.installsDisplay}
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-[11px] font-mono text-muted-foreground/70 mt-0.5">{r.package}</p>
+                      <a href={r.url} target="_blank" rel="noopener noreferrer"
+                        className="text-[10px] text-blue-500 hover:underline flex items-center gap-0.5 mt-0.5 w-fit">
+                        <ExternalLink className="h-2.5 w-2.5" />查看详情
+                      </a>
+                    </div>
+                    {alreadyInstalled ? (
+                      <div className="flex items-center gap-1 h-7 px-2 text-xs text-[#57BE6B] shrink-0">
+                        <Check className="h-3.5 w-3.5" />已安装
+                      </div>
+                    ) : (
+                      <Button size="sm" variant={st === "ok" ? "ghost" : "outline"}
+                        className={cn("h-7 text-xs shrink-0 gap-1 min-w-[56px]",
+                          st === "ok" && "text-green-600 dark:text-green-400")}
+                        disabled={busy || st === "ok"}
+                        onClick={() => installFromRegistry(r.package)}>
+                        {busy ? <Loader2 className="h-3 w-3 animate-spin" />
+                          : st === "ok" ? <><Check className="h-3 w-3" />已装</>
+                          : st === "err" ? <><XCircle className="h-3 w-3 text-destructive" />失败</>
+                          : <><Download className="h-3 w-3" />安装</>}
+                      </Button>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </TabsContent>
+
+          {/* URL install */}
+          <TabsContent value="url" className="space-y-3 mt-3">
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">SKILL.md 的原始 URL</Label>
+              <Input value={url} onChange={e => setUrl(e.target.value)}
+                placeholder="https://raw.githubusercontent.com/user/repo/main/skill/SKILL.md"
+                className="font-mono text-sm" />
+              <p className="text-[11px] text-muted-foreground">支持 GitHub raw 链接或任意可访问的 markdown 地址</p>
+            </div>
+            {status === "ok" && <p className="text-sm text-green-600 flex items-center gap-1"><Check className="h-4 w-4" />安装成功！</p>}
+            {status === "err" && <p className="text-sm text-destructive flex items-center gap-1"><XCircle className="h-4 w-4" />{errMsg}</p>}
+            <DialogFooter>
+              <Button variant="outline" onClick={() => { onClose(); reset(); }}>取消</Button>
+              <Button onClick={installManual} disabled={status === "loading" || !url.trim()}>
+                {status === "loading" && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}安装
+              </Button>
+            </DialogFooter>
+          </TabsContent>
+
+          {/* Paste content */}
+          <TabsContent value="paste" className="space-y-3 mt-3">
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">Skill 名称（slug）</Label>
+              <Input value={name} onChange={e => setName(e.target.value)} placeholder="my-skill" className="font-mono text-sm" />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">SKILL.md 内容</Label>
+              <Textarea value={content} onChange={e => setContent(e.target.value)}
+                placeholder={"---\nname: my-skill\ndescription: 描述这个 skill 的用途\n---\n\n# My Skill\n\n..."}
+                rows={8} className="font-mono text-xs" />
+            </div>
+            {status === "ok" && <p className="text-sm text-green-600 flex items-center gap-1"><Check className="h-4 w-4" />安装成功！</p>}
+            {status === "err" && <p className="text-sm text-destructive flex items-center gap-1"><XCircle className="h-4 w-4" />{errMsg}</p>}
+            <DialogFooter>
+              <Button variant="outline" onClick={() => { onClose(); reset(); }}>取消</Button>
+              <Button onClick={installManual} disabled={status === "loading" || !content.trim()}>
+                {status === "loading" && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}安装
+              </Button>
+            </DialogFooter>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}