Merge pull request Stack-Cairn#8 from yyg-max/main

feat(skills): support deleting user skills

Author: su-fen

crates/agent-gateway/web/src/lib/skills/index.ts

@@ -134,6 +134,10 @@ type SystemManageSkillResponse = {
     target: string;
     archive: string;
   } | null;
+  deleted?: {
+    name: string;
+    target: string;
+  } | null;
   seeded?: SystemBuiltinSkillSeedResponse[] | null;
   installJob?: SkillInstallJobSnapshot | null;
   clawhubResults?: ClawHubSkillCard[] | null;
@@ -645,6 +649,7 @@ export async function manageSkill(params: Record<string, unknown>): Promise<Syst
   if (
     action === "install" ||
     action === "create" ||
+    action === "delete" ||
     action === "clawhub_install" ||
     (action === "install_status" && response.installJob?.phase === "done")
   ) {
@@ -699,7 +704,7 @@ export function buildSkillsSystemPrompt(params: {
     "- Only when you determine that a metadata Skill is genuinely needed should you call SkillsManager with action=read to read the full Skill file and then follow its workflow exactly.",
     "- SkillsManager.path uses the skillFile below. It is relative to the fixed Skills root directory and may point to SKILL.md, skill.md, skill.json, or README.md.",
     '- For files referenced inside an enabled Skill, use file tools with root="skills" and a path relative to the fixed Skills root, for example Read(root="skills", path="<baseDir>/references/guide.md"), List, Glob, Grep, Write, Edit, or Delete.',
-    "- You may update files inside enabled Skills when the user asks you to optimize or maintain them. Create, install, search/install from ClawHub, validate, or package Skills through SkillsManager actions.",
+    "- You may update files inside enabled Skills when the user asks you to optimize or maintain them. Create, install, search/install from ClawHub, validate, package, or delete user Skills through SkillsManager actions.",
     "- Never expand the fixed Skills root into an absolute local path in any tool call. If a path belongs to a Skill, keep it root-relative and set root=\"skills\".",
     "- If Skill content contains absolute local paths, home-directory paths, drive-letter paths, or shell snippets that read Skill files with cat/ls/find/grep, treat those path fragments as non-portable examples and convert them to root=\"skills\" file-tool calls.",
     "- Do not guess a Skill's exact instructions or script paths before reading the Skill file.",

crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx

@@ -14,16 +14,19 @@ import {
   RefreshCw,
   Search,
   Sparkles,
+  Trash2,
   X,
 } from "../../components/icons";
 import { GlassPanel, HubBackdrop, HubHeader } from "../../components/hub/HubChrome";
 import { Button } from "../../components/ui/button";
+import { ConfirmDeletePopover } from "../../components/ui/confirm-action-popover";
 import { useLocale } from "../../i18n";
 import {
   discoverSkills,
   getSkillInstallJobStatus,
   isAlwaysEnabledSkillName,
   isUserSelectableSkill,
+  manageSkill,
   mergeAlwaysEnabledSkillNames,
   notifySkillsDiscoveryUpdated,
   startSkillInstallJob,
@@ -138,6 +141,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
   const [storeError, setStoreError] = useState<string | null>(null);
   const [installJobs, setInstallJobs] = useState<Record<string, SkillInstallJobSnapshot>>({});
   const [installingBySlug, setInstallingBySlug] = useState<Record<string, string>>({});
+  const [deletingSkillName, setDeletingSkillName] = useState<string | null>(null);
   const discoverySignatureRef = useRef(
     buildSkillDiscoverySignature(initialRootDir ?? "", initialSkills ?? []),
   );
@@ -419,6 +423,50 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
     }
   }
 
+  async function deleteSkill(skill: SkillSummary) {
+    if (lockedByChatMode || isAlwaysEnabledSkillName(skill.name) || deletingSkillName) return;
+    const skillName = skill.name;
+    const sourceSlug =
+      skill.source?.registry === "clawhub" ? skill.source.slug?.trim() || "" : "";
+    setLoadError(null);
+    setDeletingSkillName(skillName);
+    try {
+      await manageSkill({ action: "delete", name: skillName });
+      setSettings((prev) =>
+        updateSkills(prev, {
+          selected: prev.skills.selected.filter((name) => name !== skillName),
+        }),
+      );
+      setSkills((prev) => prev.filter((item) => item.name !== skillName));
+      if (sourceSlug) {
+        setInstallingBySlug((prev) => {
+          if (!(sourceSlug in prev)) return prev;
+          const next = { ...prev };
+          delete next[sourceSlug];
+          return next;
+        });
+        setInstallJobs((prev) => {
+          let changed = false;
+          const next = { ...prev };
+          for (const [jobId, job] of Object.entries(prev)) {
+            if (job.slug?.trim() === sourceSlug) {
+              delete next[jobId];
+              changed = true;
+            }
+          }
+          return changed ? next : prev;
+        });
+      }
+      notifySkillsDiscoveryUpdated();
+      await refresh({ silent: true });
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setLoadError(msg || "Failed to delete Skill");
+    } finally {
+      setDeletingSkillName(null);
+    }
+  }
+
   function toggleSkill(name: string, on: boolean) {
     if (isAlwaysEnabledSkillName(name)) return;
     const next = new Set(settings.skills.selected);
@@ -721,6 +769,8 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                     {filtered.map((skill) => {
                       const alwaysEnabled = isAlwaysEnabledSkillName(skill.name);
                       const checked = alwaysEnabled || selected.has(skill.name);
+                      const deleting = deletingSkillName === skill.name;
+                      const deleteDisabled = deletingSkillName !== null;
                       const card = (
                         <>
                           <div className="flex items-start justify-between gap-2">
@@ -745,14 +795,47 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                               </div>
                             ) : (
                               <div
-                                className={cn(
-                                  "flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-all",
-                                  checked
-                                    ? "border-foreground/80 bg-foreground/85 text-background shadow-[0_2px_6px_-2px_rgba(15,23,42,0.35)]"
-                                    : "border-border bg-background group-hover:border-foreground/40",
-                                )}
+                                className="flex shrink-0 items-center gap-1.5"
+                                onClick={(event) => event.stopPropagation()}
+                                onKeyDown={(event) => event.stopPropagation()}
                               >
-                                {checked ? <Check className="h-3 w-3" /> : null}
+                                <ConfirmDeletePopover
+                                  name={skill.name}
+                                  onConfirm={() => void deleteSkill(skill)}
+                                >
+                                  {(open) => (
+                                    <button
+                                      type="button"
+                                      disabled={deleteDisabled}
+                                      onClick={(event) => {
+                                        event.stopPropagation();
+                                        open();
+                                      }}
+                                      className={cn(
+                                        "flex h-6 w-6 items-center justify-center rounded-md border border-border/35 bg-background/65 text-muted-foreground transition-all",
+                                        "hover:border-destructive/40 hover:bg-destructive/10 hover:text-destructive",
+                                        "disabled:cursor-not-allowed disabled:opacity-60",
+                                      )}
+                                      title="删除 Skill"
+                                    >
+                                      {deleting ? (
+                                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                      ) : (
+                                        <Trash2 className="h-3.5 w-3.5" />
+                                      )}
+                                    </button>
+                                  )}
+                                </ConfirmDeletePopover>
+                                <div
+                                  className={cn(
+                                    "flex h-5 w-5 items-center justify-center rounded-md border transition-all",
+                                    checked
+                                      ? "border-foreground/80 bg-foreground/85 text-background shadow-[0_2px_6px_-2px_rgba(15,23,42,0.35)]"
+                                      : "border-border bg-background group-hover:border-foreground/40",
+                                  )}
+                                >
+                                  {checked ? <Check className="h-3 w-3" /> : null}
+                                </div>
                               </div>
                             )}
                           </div>
@@ -788,20 +871,26 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                       }
 
                       return (
-                        <button
+                        <div
                           key={key}
-                          type="button"
+                          role="button"
+                          tabIndex={0}
                           onClick={() => toggleSkill(skill.name, !checked)}
+                          onKeyDown={(event) => {
+                            if (event.key !== "Enter" && event.key !== " ") return;
+                            event.preventDefault();
+                            toggleSkill(skill.name, !checked);
+                          }}
                           className={cn(
                             "hub-skill-card skill-card-enter group flex h-full w-full flex-col rounded-2xl border p-3.5 text-left transition-all",
-                            "backdrop-blur-xl",
+                            "cursor-pointer backdrop-blur-xl focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/15",
                             checked
                               ? "border-border/55 bg-background/80 shadow-[0_1px_0_rgba(255,255,255,0.6)_inset,0_4px_18px_-12px_rgba(15,23,42,0.18)]"
                               : "border-border/35 bg-background/55 hover:-translate-y-0.5 hover:border-border/55 hover:bg-background/70 hover:shadow-[0_4px_16px_-10px_rgba(15,23,42,0.18)]",
                           )}
                         >
                           {card}
-                        </button>
+                        </div>
                       );
                     })}
                   </div>