@mastra/playground-ui 60.2.0 → 61.0.0-alpha.1

package/dist/domains/workspace/components/workspace-add-skill-dialog.cjs.js

@@ -0,0 +1,282 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const useDebounce = require('use-debounce');
+const domains_workspace_hooks_useSkillsSh = require('../hooks/use-skills-sh.cjs.js');
+const dialog = require('../../../dialog-d_AK1NQD.cjs');
+const field = require('../../../field-BkeKcz_6.cjs');
+require('../../../field-control-aria-WzMGs0A4.cjs');
+const markdownRenderer = require('../../../markdown-renderer-DRo-Hcuu.cjs');
+const scrollArea = require('../../../scroll-area-CEuf7Omb.cjs');
+const searchInput = require('../../../search-input-CBhT3N4z.cjs');
+const select = require('../../../select-KV77JIvp.cjs');
+const Txt = require('../../../Txt-DNnvlrBo.cjs');
+const icons_GithubIcon = require('../../../icons/GithubIcon.cjs.js');
+const icons_SkillIcon = require('../../../icons/SkillIcon.cjs.js');
+const primitives_raisedSurface = require('../../../primitives/raised-surface.cjs.js');
+const primitives_transitions = require('../../../primitives/transitions.cjs.js');
+const primitives_typography = require('../../../primitives/typography.cjs.js');
+const utils_cn = require('../../../cn-DG0X1KEP.cjs');
+const dialogAction = require('../../../dialog-action-C3Tc7ZKI.cjs');
+
+function getSkillUniqueId(skill) {
+  return `${skill.topSource}/${skill.name}`;
+}
+function getInstalledSkillId(skill) {
+  const parsed = domains_workspace_hooks_useSkillsSh.parseSkillSource(skill.topSource, skill.name);
+  if (!parsed) return null;
+  return `${parsed.owner}/${parsed.repo}/${skill.name}`;
+}
+function WorkspaceAddSkillDialog({
+  open,
+  onOpenChange,
+  workspaceId,
+  onInstall,
+  isInstalling,
+  installedSkillIds = [],
+  installedSkillNames = [],
+  writableMounts,
+  installedSkillPaths
+}) {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [selectedSkill, setSelectedSkill] = React.useState(null);
+  const [selectedMount, setSelectedMount] = React.useState();
+  const installMount = writableMounts?.some((mount) => mount.path === selectedMount) ? selectedMount : writableMounts?.[0]?.path;
+  const { data: popularData, isLoading: isLoadingPopular } = domains_workspace_hooks_useSkillsSh.usePopularSkillsSh(workspaceId);
+  const searchMutation = domains_workspace_hooks_useSkillsSh.useSearchSkillsSh(workspaceId);
+  const parsedSource = React.useMemo(() => {
+    if (!selectedSkill?.topSource) return null;
+    return domains_workspace_hooks_useSkillsSh.parseSkillSource(selectedSkill.topSource, selectedSkill.name);
+  }, [selectedSkill]);
+  const skillsUrl = React.useMemo(() => {
+    if (!parsedSource || !selectedSkill) return null;
+    return `https://skills.sh/${parsedSource.owner}/${parsedSource.repo}/${selectedSkill.name}`;
+  }, [parsedSource, selectedSkill]);
+  const { data: previewContent, isLoading: isLoadingPreview } = domains_workspace_hooks_useSkillsSh.useSkillPreview(
+    workspaceId,
+    parsedSource?.owner,
+    parsedSource?.repo,
+    selectedSkill?.name,
+    { enabled: !!parsedSource && !!selectedSkill }
+  );
+  const debouncedSearch = useDebounce.useDebouncedCallback((query) => {
+    if (query.trim().length >= 2) {
+      searchMutation.mutate(query);
+    }
+  }, 300);
+  const handleSearch = React.useCallback(
+    (query) => {
+      setSearchQuery(query);
+      debouncedSearch(query);
+    },
+    [debouncedSearch]
+  );
+  const displaySkills = React.useMemo(() => {
+    if (searchQuery.trim().length >= 2) {
+      return searchMutation.data?.skills ?? [];
+    }
+    return popularData?.skills ?? [];
+  }, [searchQuery, searchMutation.data, popularData]);
+  const isSearching = searchMutation.isPending;
+  const hasSearchResults = searchQuery.trim().length >= 2;
+  const isSelectedSkillInstalled = React.useMemo(() => {
+    if (!selectedSkill) return false;
+    const installedId = getInstalledSkillId(selectedSkill);
+    if (installedId && installedSkillIds.includes(installedId)) {
+      return true;
+    }
+    if (installedSkillNames.includes(selectedSkill.name)) {
+      return true;
+    }
+    return false;
+  }, [selectedSkill, installedSkillIds, installedSkillNames]);
+  const handleInstall = React.useCallback(() => {
+    if (!selectedSkill || !parsedSource) return;
+    onInstall({
+      repository: `${parsedSource.owner}/${parsedSource.repo}`,
+      skillName: selectedSkill.name,
+      mount: writableMounts && writableMounts.length > 1 ? installMount : void 0
+    });
+  }, [selectedSkill, parsedSource, onInstall, writableMounts, installMount]);
+  const handleOpenChange = React.useCallback(
+    (newOpen) => {
+      if (!newOpen) {
+        setSearchQuery("");
+        setSelectedSkill(null);
+        setSelectedMount(void 0);
+      }
+      onOpenChange(newOpen);
+    },
+    [onOpenChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open, onOpenChange: handleOpenChange, pending: isInstalling, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { size: "xl", className: "h-[80vh]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Add Skill" }),
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Search and install skills from the community registry" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogBody, { layout: "fill", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        searchInput.SearchInput,
+        {
+          label: "Search skills",
+          placeholder: "Search skills...",
+          value: searchQuery,
+          onValueChange: handleSearch
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 w-1/2 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-column tracking-wide text-muted-foreground uppercase", children: hasSearchResults ? "Search Results" : "Popular Skills" }),
+          /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "flex-1 rounded-lg border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+            scrollArea.ScrollAreaViewport,
+            {
+              className: !isLoadingPopular && !isSearching && displaySkills.length === 0 ? "flex flex-col [&>div]:flex [&>div]:flex-1 [&>div]:flex-col" : void 0,
+              children: isLoadingPopular || isSearching ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-5", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-6 animate-spin text-muted-foreground" }) }) : displaySkills.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center-safe justify-center-safe py-5 text-muted-foreground", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleSlashIcon, { className: "mb-2 size-8" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { children: hasSearchResults ? "No skills found" : "No skills available" })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 p-2", children: displaySkills.map((skill) => {
+                const skillUniqueId = getSkillUniqueId(skill);
+                const installedId = getInstalledSkillId(skill);
+                const isInstalled = installedId && installedSkillIds.includes(installedId) || installedSkillNames.includes(skill.name);
+                const selectedSkillUniqueId = selectedSkill ? getSkillUniqueId(selectedSkill) : null;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => setSelectedSkill(skill),
+                    className: utils_cn.cn(
+                      "w-full rounded-md px-3 py-2 text-left",
+                      "hover:bg-fill-subtle",
+                      selectedSkillUniqueId === skillUniqueId && "border border-border-strong bg-fill-hover"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "span", variant: "subheading", tone: "ink", className: "truncate", children: skill.name }),
+                          isInstalled && /* @__PURE__ */ jsxRuntime.jsxs(
+                            Txt.Txt,
+                            {
+                              as: "span",
+                              variant: "meta",
+                              className: "inline-flex items-center gap-1 rounded bg-info-subtle px-1.5 py-0.5 text-info-subtle-foreground",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-2.5" }),
+                                "Installed"
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-caption text-muted-foreground", children: skill.topSource })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1 text-caption text-muted-foreground", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "size-3" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: skill.installs.toLocaleString() })
+                      ] })
+                    ] })
+                  },
+                  skillUniqueId
+                );
+              }) })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 w-1/2 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-column tracking-wide text-muted-foreground uppercase", children: "Preview" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col overflow-hidden rounded-lg border border-border", children: !selectedSkill ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, { className: "mb-2 size-8" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { children: "Select a skill to preview" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border bg-card p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted p-2", children: /* @__PURE__ */ jsxRuntime.jsx(icons_SkillIcon.SkillIcon, { className: "size-5 text-muted-foreground" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "h3", variant: "subheading", tone: "ink", className: "truncate", children: selectedSkill.name }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center gap-3 text-caption text-muted-foreground", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(icons_GithubIcon.GithubIcon, { className: "size-3" }),
+                    selectedSkill.topSource
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "size-3" }),
+                    selectedSkill.installs.toLocaleString(),
+                    " installs"
+                  ] })
+                ] })
+              ] }),
+              parsedSource && /* @__PURE__ */ jsxRuntime.jsx(
+                "a",
+                {
+                  href: `https://github.com/${parsedSource.owner}/${parsedSource.repo}`,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: utils_cn.cn(primitives_typography.quietTextHover, primitives_transitions.controlStateColorTransition),
+                  title: "View on GitHub",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "size-4" })
+                }
+              )
+            ] }) }),
+            isLoadingPreview ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-6 animate-spin text-muted-foreground" }) }) : previewContent ? /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(markdownRenderer.MarkdownRenderer, { children: previewContent }) }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Package, { className: "mb-2 size-8" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { children: "Preview unavailable" }),
+              skillsUrl && /* @__PURE__ */ jsxRuntime.jsxs(
+                "a",
+                {
+                  href: skillsUrl,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "mt-2 flex items-center gap-1 text-caption text-info-indicator hover:underline",
+                  children: [
+                    "View on skills.sh ",
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "size-3" })
+                  ]
+                }
+              )
+            ] })
+          ] }) })
+        ] })
+      ] }),
+      selectedSkill && writableMounts && writableMounts.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(field.Field, { orientation: "horizontal", className: utils_cn.cn(primitives_raisedSurface.raisedSurfaceStyle, "gap-3 rounded-lg p-3"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { className: "size-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldLabel, { className: "whitespace-nowrap", children: "Install to" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value: installMount, onValueChange: setSelectedMount, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: writableMounts.map((m) => {
+            const name = m.displayName ?? m.name ?? m.provider ?? "unknown";
+            return /* @__PURE__ */ jsxRuntime.jsxs(select.SelectItem, { value: m.path, children: [
+              name,
+              " (",
+              m.path,
+              ")"
+            ] }, m.path);
+          }) })
+        ] })
+      ] })
+    ] }),
+    selectedSkill && /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogFooter, { children: [
+      isSelectedSkillInstalled && writableMounts && writableMounts.length > 1 && (() => {
+        const skillPath = installedSkillPaths?.[selectedSkill.name];
+        if (!skillPath) return null;
+        const mount = writableMounts.find((m) => skillPath.startsWith(m.path + "/") || skillPath === m.path);
+        return mount ? /* @__PURE__ */ jsxRuntime.jsxs(Txt.Txt, { as: "span", variant: "caption", tone: "muted", className: "mr-auto", children: [
+          "Installed at ",
+          mount.path
+        ] }) : null;
+      })(),
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogCancel, { children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        dialogAction.DialogAction,
+        {
+          onConfirm: handleInstall,
+          disabled: !parsedSource || isSelectedSkillInstalled,
+          "data-testid": "install-skill-button",
+          children: isInstalling ? "Installing..." : isSelectedSkillInstalled ? "Already Installed" : "Install"
+        }
+      )
+    ] })
+  ] }) });
+}
+
+exports.WorkspaceAddSkillDialog = WorkspaceAddSkillDialog;
+//# sourceMappingURL=workspace-add-skill-dialog.cjs.js.map

package/dist/domains/workspace/components/workspace-add-skill-dialog.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-add-skill-dialog.cjs.js","sources":["../../../../src/domains/workspace/components/workspace-add-skill-dialog.tsx"],"sourcesContent":["import { Download, ExternalLink, Loader2, CircleSlashIcon, Package, Check, Folder } from 'lucide-react';\nimport { useState, useCallback, useMemo } from 'react';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { useSearchSkillsSh, usePopularSkillsSh, useSkillPreview, parseSkillSource } from '../hooks/use-skills-sh';\nimport type { SkillsShSkill } from '../hooks/use-skills-sh';\nimport {\n  Dialog,\n  DialogAction,\n  DialogBody,\n  DialogCancel,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport { Field, FieldLabel } from '@/ds/components/Field';\nimport { MarkdownRenderer } from '@/ds/components/MarkdownRenderer';\nimport { ScrollArea, ScrollAreaViewport } from '@/ds/components/ScrollArea';\nimport { SearchInput } from '@/ds/components/SearchInput';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ds/components/Select';\nimport { Txt } from '@/ds/components/Txt';\nimport { GithubIcon } from '@/ds/icons/GithubIcon';\nimport { SkillIcon } from '@/ds/icons/SkillIcon';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { quietTextHover } from '@/ds/primitives/typography';\nimport { cn } from '@/lib/utils';\n\nexport interface WritableMount {\n  path: string;\n  displayName?: string;\n  icon?: string;\n  provider?: string;\n  name?: string;\n}\n\nexport interface AddSkillDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  workspaceId: string;\n  onInstall: (params: { repository: string; skillName: string; mount?: string }) => void;\n  isInstalling?: boolean;\n  /**\n   * Unique IDs of skills installed via skills.sh (format: \"owner/repo/skillName\").\n   * Used for precise matching - only the exact source/skill combo shows as installed.\n   */\n  installedSkillIds?: string[];\n  /**\n   * Names of skills that are already installed (fallback when source info unavailable).\n   * Skills matching by name only will show as installed regardless of source.\n   */\n  installedSkillNames?: string[];\n  /**\n   * Writable mounts available for skill installation (for CompositeFilesystem).\n   * When more than one is provided, a dropdown is shown to pick the mount.\n   */\n  writableMounts?: WritableMount[];\n  /**\n   * Map of skill name to its installed path (for showing mount location on \"Installed\" badge).\n   * Only needed when multiple mounts exist.\n   */\n  installedSkillPaths?: Record<string, string>;\n}\n\n/**\n * Generate a unique identifier for a skills.sh skill (for selection tracking).\n * Uses topSource + name since a repo can only have one skill with a given name.\n */\nfunction getSkillUniqueId(skill: SkillsShSkill): string {\n  return `${skill.topSource}/${skill.name}`;\n}\n\n/**\n * Generate an installed skill ID from a skills.sh skill.\n * Format: \"owner/repo/skillName\" - matches what we build from workspace skills with skillsShSource.\n */\nfunction getInstalledSkillId(skill: SkillsShSkill): string | null {\n  const parsed = parseSkillSource(skill.topSource, skill.name);\n  if (!parsed) return null;\n  return `${parsed.owner}/${parsed.repo}/${skill.name}`;\n}\n\nexport function WorkspaceAddSkillDialog({\n  open,\n  onOpenChange,\n  workspaceId,\n  onInstall,\n  isInstalling,\n  installedSkillIds = [],\n  installedSkillNames = [],\n  writableMounts,\n  installedSkillPaths,\n}: AddSkillDialogProps) {\n  const [searchQuery, setSearchQuery] = useState('');\n  const [selectedSkill, setSelectedSkill] = useState<SkillsShSkill | null>(null);\n  const [selectedMount, setSelectedMount] = useState<string>();\n  const installMount = writableMounts?.some(mount => mount.path === selectedMount)\n    ? selectedMount\n    : writableMounts?.[0]?.path;\n\n  const { data: popularData, isLoading: isLoadingPopular } = usePopularSkillsSh(workspaceId);\n\n  const searchMutation = useSearchSkillsSh(workspaceId);\n\n  const parsedSource = useMemo(() => {\n    if (!selectedSkill?.topSource) return null;\n    return parseSkillSource(selectedSkill.topSource, selectedSkill.name);\n  }, [selectedSkill]);\n\n  const skillsUrl = useMemo(() => {\n    if (!parsedSource || !selectedSkill) return null;\n    return `https://skills.sh/${parsedSource.owner}/${parsedSource.repo}/${selectedSkill.name}`;\n  }, [parsedSource, selectedSkill]);\n\n  const { data: previewContent, isLoading: isLoadingPreview } = useSkillPreview(\n    workspaceId,\n    parsedSource?.owner,\n    parsedSource?.repo,\n    selectedSkill?.name,\n    { enabled: !!parsedSource && !!selectedSkill },\n  );\n\n  const debouncedSearch = useDebouncedCallback((query: string) => {\n    if (query.trim().length >= 2) {\n      searchMutation.mutate(query);\n    }\n  }, 300);\n\n  const handleSearch = useCallback(\n    (query: string) => {\n      setSearchQuery(query);\n      debouncedSearch(query);\n    },\n    [debouncedSearch],\n  );\n\n  const displaySkills = useMemo(() => {\n    if (searchQuery.trim().length >= 2) {\n      return searchMutation.data?.skills ?? [];\n    }\n    return popularData?.skills ?? [];\n  }, [searchQuery, searchMutation.data, popularData]);\n\n  const isSearching = searchMutation.isPending;\n  const hasSearchResults = searchQuery.trim().length >= 2;\n\n  const isSelectedSkillInstalled = useMemo(() => {\n    if (!selectedSkill) return false;\n\n    const installedId = getInstalledSkillId(selectedSkill);\n    if (installedId && installedSkillIds.includes(installedId)) {\n      return true;\n    }\n\n    if (installedSkillNames.includes(selectedSkill.name)) {\n      return true;\n    }\n\n    return false;\n  }, [selectedSkill, installedSkillIds, installedSkillNames]);\n\n  const handleInstall = useCallback(() => {\n    if (!selectedSkill || !parsedSource) return;\n\n    onInstall({\n      repository: `${parsedSource.owner}/${parsedSource.repo}`,\n      skillName: selectedSkill.name,\n      mount: writableMounts && writableMounts.length > 1 ? installMount : undefined,\n    });\n  }, [selectedSkill, parsedSource, onInstall, writableMounts, installMount]);\n\n  const handleOpenChange = useCallback(\n    (newOpen: boolean) => {\n      if (!newOpen) {\n        setSearchQuery('');\n        setSelectedSkill(null);\n        setSelectedMount(undefined);\n      }\n      onOpenChange(newOpen);\n    },\n    [onOpenChange],\n  );\n\n  return (\n    <Dialog open={open} onOpenChange={handleOpenChange} pending={isInstalling}>\n      <DialogContent size=\"xl\" className=\"h-[80vh]\">\n        <DialogHeader>\n          <DialogTitle>Add Skill</DialogTitle>\n          <DialogDescription>Search and install skills from the community registry</DialogDescription>\n        </DialogHeader>\n\n        <DialogBody layout=\"fill\">\n          <SearchInput\n            label=\"Search skills\"\n            placeholder=\"Search skills...\"\n            value={searchQuery}\n            onValueChange={handleSearch}\n          />\n\n          <div className=\"flex min-h-0 flex-1 gap-4\">\n            <div className=\"flex min-h-0 w-1/2 flex-col\">\n              <div className=\"mb-2 text-column tracking-wide text-muted-foreground uppercase\">\n                {hasSearchResults ? 'Search Results' : 'Popular Skills'}\n              </div>\n              <ScrollArea className=\"flex-1 rounded-lg border border-border\">\n                <ScrollAreaViewport\n                  className={\n                    !isLoadingPopular && !isSearching && displaySkills.length === 0\n                      ? 'flex flex-col [&>div]:flex [&>div]:flex-1 [&>div]:flex-col'\n                      : undefined\n                  }\n                >\n                  {isLoadingPopular || isSearching ? (\n                    <div className=\"flex items-center justify-center py-5\">\n                      <Loader2 className=\"size-6 animate-spin text-muted-foreground\" />\n                    </div>\n                  ) : displaySkills.length === 0 ? (\n                    <div className=\"flex flex-1 flex-col items-center-safe justify-center-safe py-5 text-muted-foreground\">\n                      <CircleSlashIcon className=\"mb-2 size-8\" />\n                      <Txt>{hasSearchResults ? 'No skills found' : 'No skills available'}</Txt>\n                    </div>\n                  ) : (\n                    <div className=\"space-y-1 p-2\">\n                      {displaySkills.map(skill => {\n                        const skillUniqueId = getSkillUniqueId(skill);\n                        const installedId = getInstalledSkillId(skill);\n                        const isInstalled =\n                          (installedId && installedSkillIds.includes(installedId)) ||\n                          installedSkillNames.includes(skill.name);\n                        const selectedSkillUniqueId = selectedSkill ? getSkillUniqueId(selectedSkill) : null;\n                        return (\n                          <button\n                            key={skillUniqueId}\n                            onClick={() => setSelectedSkill(skill)}\n                            className={cn(\n                              'w-full rounded-md px-3 py-2 text-left',\n                              'hover:bg-fill-subtle',\n                              selectedSkillUniqueId === skillUniqueId && 'border border-border-strong bg-fill-hover',\n                            )}\n                          >\n                            <div className=\"flex items-start justify-between gap-2\">\n                              <div className=\"min-w-0 flex-1\">\n                                <div className=\"flex items-center gap-2\">\n                                  <Txt as=\"span\" variant=\"subheading\" tone=\"ink\" className=\"truncate\">\n                                    {skill.name}\n                                  </Txt>\n                                  {isInstalled && (\n                                    <Txt\n                                      as=\"span\"\n                                      variant=\"meta\"\n                                      className=\"inline-flex items-center gap-1 rounded bg-info-subtle px-1.5 py-0.5 text-info-subtle-foreground\"\n                                    >\n                                      <Check className=\"size-2.5\" />\n                                      Installed\n                                    </Txt>\n                                  )}\n                                </div>\n                                <div className=\"truncate text-caption text-muted-foreground\">{skill.topSource}</div>\n                              </div>\n                              <div className=\"flex shrink-0 items-center gap-1 text-caption text-muted-foreground\">\n                                <Download className=\"size-3\" />\n                                <span>{skill.installs.toLocaleString()}</span>\n                              </div>\n                            </div>\n                          </button>\n                        );\n                      })}\n                    </div>\n                  )}\n                </ScrollAreaViewport>\n              </ScrollArea>\n            </div>\n\n            <div className=\"flex min-h-0 w-1/2 flex-col\">\n              <div className=\"mb-2 text-column tracking-wide text-muted-foreground uppercase\">Preview</div>\n              <div className=\"flex flex-1 flex-col overflow-hidden rounded-lg border border-border\">\n                {!selectedSkill ? (\n                  <div className=\"flex h-full flex-col items-center justify-center text-muted-foreground\">\n                    <Package className=\"mb-2 size-8\" />\n                    <Txt>Select a skill to preview</Txt>\n                  </div>\n                ) : (\n                  <>\n                    <div className=\"border-b border-border bg-card p-4\">\n                      <div className=\"flex items-start gap-3\">\n                        <div className=\"rounded-lg bg-muted p-2\">\n                          <SkillIcon className=\"size-5 text-muted-foreground\" />\n                        </div>\n                        <div className=\"min-w-0 flex-1\">\n                          <Txt as=\"h3\" variant=\"subheading\" tone=\"ink\" className=\"truncate\">\n                            {selectedSkill.name}\n                          </Txt>\n                          <div className=\"mt-1 flex items-center gap-3 text-caption text-muted-foreground\">\n                            <span className=\"flex items-center gap-1\">\n                              <GithubIcon className=\"size-3\" />\n                              {selectedSkill.topSource}\n                            </span>\n                            <span className=\"flex items-center gap-1\">\n                              <Download className=\"size-3\" />\n                              {selectedSkill.installs.toLocaleString()} installs\n                            </span>\n                          </div>\n                        </div>\n                        {parsedSource && (\n                          <a\n                            href={`https://github.com/${parsedSource.owner}/${parsedSource.repo}`}\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            className={cn(quietTextHover, controlStateColorTransition)}\n                            title=\"View on GitHub\"\n                          >\n                            <ExternalLink className=\"size-4\" />\n                          </a>\n                        )}\n                      </div>\n                    </div>\n\n                    {isLoadingPreview ? (\n                      <div className=\"flex flex-1 items-center justify-center\">\n                        <Loader2 className=\"size-6 animate-spin text-muted-foreground\" />\n                      </div>\n                    ) : previewContent ? (\n                      <ScrollArea className=\"flex-1\">\n                        <div className=\"p-4\">\n                          <MarkdownRenderer>{previewContent}</MarkdownRenderer>\n                        </div>\n                      </ScrollArea>\n                    ) : (\n                      <div className=\"flex flex-1 flex-col items-center justify-center text-muted-foreground\">\n                        <Package className=\"mb-2 size-8\" />\n                        <Txt>Preview unavailable</Txt>\n                        {skillsUrl && (\n                          <a\n                            href={skillsUrl}\n                            target=\"_blank\"\n                            rel=\"noopener noreferrer\"\n                            className=\"mt-2 flex items-center gap-1 text-caption text-info-indicator hover:underline\"\n                          >\n                            View on skills.sh <ExternalLink className=\"size-3\" />\n                          </a>\n                        )}\n                      </div>\n                    )}\n                  </>\n                )}\n              </div>\n            </div>\n          </div>\n\n          {selectedSkill && writableMounts && writableMounts.length > 1 && (\n            <Field orientation=\"horizontal\" className={cn(raisedSurfaceStyle, 'gap-3 rounded-lg p-3')}>\n              <Folder className=\"size-4 shrink-0 text-muted-foreground\" />\n              <FieldLabel className=\"whitespace-nowrap\">Install to</FieldLabel>\n              <Select value={installMount} onValueChange={setSelectedMount}>\n                <SelectTrigger className=\"flex-1\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  {writableMounts.map(m => {\n                    const name = m.displayName ?? m.name ?? m.provider ?? 'unknown';\n                    return (\n                      <SelectItem key={m.path} value={m.path}>\n                        {name} ({m.path})\n                      </SelectItem>\n                    );\n                  })}\n                </SelectContent>\n              </Select>\n            </Field>\n          )}\n        </DialogBody>\n\n        {selectedSkill && (\n          <DialogFooter>\n            {isSelectedSkillInstalled &&\n              writableMounts &&\n              writableMounts.length > 1 &&\n              (() => {\n                const skillPath = installedSkillPaths?.[selectedSkill.name];\n                if (!skillPath) return null;\n                const mount = writableMounts.find(m => skillPath.startsWith(m.path + '/') || skillPath === m.path);\n                return mount ? (\n                  <Txt as=\"span\" variant=\"caption\" tone=\"muted\" className=\"mr-auto\">\n                    Installed at {mount.path}\n                  </Txt>\n                ) : null;\n              })()}\n            <DialogCancel>Cancel</DialogCancel>\n            <DialogAction\n              onConfirm={handleInstall}\n              disabled={!parsedSource || isSelectedSkillInstalled}\n              data-testid=\"install-skill-button\"\n            >\n              {isInstalling ? 'Installing...' : isSelectedSkillInstalled ? 'Already Installed' : 'Install'}\n            </DialogAction>\n          </DialogFooter>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"names":["parseSkillSource","useState","usePopularSkillsSh","useSearchSkillsSh","useMemo","useSkillPreview","useDebouncedCallback","useCallback","jsx","Dialog","jsxs","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogBody","SearchInput","ScrollArea","ScrollAreaViewport","Loader2","CircleSlashIcon","Txt","cn","Check","Download","Package","Fragment","SkillIcon","GithubIcon","quietTextHover","controlStateColorTransition","ExternalLink","MarkdownRenderer","Field","raisedSurfaceStyle","Folder","FieldLabel","Select","SelectTrigger","SelectValue","SelectContent","SelectItem","DialogFooter","DialogCancel","DialogAction"],"mappings":"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"}

package/dist/domains/workspace/components/workspace-add-skill-dialog.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/workspace/components/workspace-add-skill-dialog'
+export {}

package/dist/domains/workspace/components/workspace-add-skill-dialog.es.js

@@ -0,0 +1,278 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Loader2, CircleSlashIcon, Check, Download, Package, ExternalLink, Folder } from 'lucide-react';
+import { useState, useMemo, useCallback } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { usePopularSkillsSh, useSearchSkillsSh, parseSkillSource, useSkillPreview } from '../hooks/use-skills-sh.es.js';
+import { D as Dialog, d as DialogContent, g as DialogHeader, j as DialogTitle, e as DialogDescription, a as DialogBody, f as DialogFooter, b as DialogCancel } from '../../../dialog-Dt5kASkl.js';
+import { F as Field, e as FieldLabel } from '../../../field-BiMIiq2Y.js';
+import '../../../field-control-aria-DB6y41tQ.js';
+import { M as MarkdownRenderer } from '../../../markdown-renderer-XfWPF-B7.js';
+import { S as ScrollArea, a as ScrollAreaViewport } from '../../../scroll-area-Ds-fJn5M.js';
+import { S as SearchInput } from '../../../search-input-63Y1_wgA.js';
+import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from '../../../select-CWxcmE3F.js';
+import { T as Txt } from '../../../Txt-C3cYJgKU.js';
+import { GithubIcon } from '../../../icons/GithubIcon.es.js';
+import { SkillIcon } from '../../../icons/SkillIcon.es.js';
+import { raisedSurfaceStyle } from '../../../primitives/raised-surface.es.js';
+import { controlStateColorTransition } from '../../../primitives/transitions.es.js';
+import { quietTextHover } from '../../../primitives/typography.es.js';
+import { c as cn } from '../../../cn-65Adrsfj.js';
+import { D as DialogAction } from '../../../dialog-action-CB3h9Z2J.js';
+
+function getSkillUniqueId(skill) {
+  return `${skill.topSource}/${skill.name}`;
+}
+function getInstalledSkillId(skill) {
+  const parsed = parseSkillSource(skill.topSource, skill.name);
+  if (!parsed) return null;
+  return `${parsed.owner}/${parsed.repo}/${skill.name}`;
+}
+function WorkspaceAddSkillDialog({
+  open,
+  onOpenChange,
+  workspaceId,
+  onInstall,
+  isInstalling,
+  installedSkillIds = [],
+  installedSkillNames = [],
+  writableMounts,
+  installedSkillPaths
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedSkill, setSelectedSkill] = useState(null);
+  const [selectedMount, setSelectedMount] = useState();
+  const installMount = writableMounts?.some((mount) => mount.path === selectedMount) ? selectedMount : writableMounts?.[0]?.path;
+  const { data: popularData, isLoading: isLoadingPopular } = usePopularSkillsSh(workspaceId);
+  const searchMutation = useSearchSkillsSh(workspaceId);
+  const parsedSource = useMemo(() => {
+    if (!selectedSkill?.topSource) return null;
+    return parseSkillSource(selectedSkill.topSource, selectedSkill.name);
+  }, [selectedSkill]);
+  const skillsUrl = useMemo(() => {
+    if (!parsedSource || !selectedSkill) return null;
+    return `https://skills.sh/${parsedSource.owner}/${parsedSource.repo}/${selectedSkill.name}`;
+  }, [parsedSource, selectedSkill]);
+  const { data: previewContent, isLoading: isLoadingPreview } = useSkillPreview(
+    workspaceId,
+    parsedSource?.owner,
+    parsedSource?.repo,
+    selectedSkill?.name,
+    { enabled: !!parsedSource && !!selectedSkill }
+  );
+  const debouncedSearch = useDebouncedCallback((query) => {
+    if (query.trim().length >= 2) {
+      searchMutation.mutate(query);
+    }
+  }, 300);
+  const handleSearch = useCallback(
+    (query) => {
+      setSearchQuery(query);
+      debouncedSearch(query);
+    },
+    [debouncedSearch]
+  );
+  const displaySkills = useMemo(() => {
+    if (searchQuery.trim().length >= 2) {
+      return searchMutation.data?.skills ?? [];
+    }
+    return popularData?.skills ?? [];
+  }, [searchQuery, searchMutation.data, popularData]);
+  const isSearching = searchMutation.isPending;
+  const hasSearchResults = searchQuery.trim().length >= 2;
+  const isSelectedSkillInstalled = useMemo(() => {
+    if (!selectedSkill) return false;
+    const installedId = getInstalledSkillId(selectedSkill);
+    if (installedId && installedSkillIds.includes(installedId)) {
+      return true;
+    }
+    if (installedSkillNames.includes(selectedSkill.name)) {
+      return true;
+    }
+    return false;
+  }, [selectedSkill, installedSkillIds, installedSkillNames]);
+  const handleInstall = useCallback(() => {
+    if (!selectedSkill || !parsedSource) return;
+    onInstall({
+      repository: `${parsedSource.owner}/${parsedSource.repo}`,
+      skillName: selectedSkill.name,
+      mount: writableMounts && writableMounts.length > 1 ? installMount : void 0
+    });
+  }, [selectedSkill, parsedSource, onInstall, writableMounts, installMount]);
+  const handleOpenChange = useCallback(
+    (newOpen) => {
+      if (!newOpen) {
+        setSearchQuery("");
+        setSelectedSkill(null);
+        setSelectedMount(void 0);
+      }
+      onOpenChange(newOpen);
+    },
+    [onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, pending: isInstalling, children: /* @__PURE__ */ jsxs(DialogContent, { size: "xl", className: "h-[80vh]", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Add Skill" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Search and install skills from the community registry" })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogBody, { layout: "fill", children: [
+      /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          label: "Search skills",
+          placeholder: "Search skills...",
+          value: searchQuery,
+          onValueChange: handleSearch
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 w-1/2 flex-col", children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-2 text-column tracking-wide text-muted-foreground uppercase", children: hasSearchResults ? "Search Results" : "Popular Skills" }),
+          /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 rounded-lg border border-border", children: /* @__PURE__ */ jsx(
+            ScrollAreaViewport,
+            {
+              className: !isLoadingPopular && !isSearching && displaySkills.length === 0 ? "flex flex-col [&>div]:flex [&>div]:flex-1 [&>div]:flex-col" : void 0,
+              children: isLoadingPopular || isSearching ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-5", children: /* @__PURE__ */ jsx(Loader2, { className: "size-6 animate-spin text-muted-foreground" }) }) : displaySkills.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center-safe justify-center-safe py-5 text-muted-foreground", children: [
+                /* @__PURE__ */ jsx(CircleSlashIcon, { className: "mb-2 size-8" }),
+                /* @__PURE__ */ jsx(Txt, { children: hasSearchResults ? "No skills found" : "No skills available" })
+              ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-1 p-2", children: displaySkills.map((skill) => {
+                const skillUniqueId = getSkillUniqueId(skill);
+                const installedId = getInstalledSkillId(skill);
+                const isInstalled = installedId && installedSkillIds.includes(installedId) || installedSkillNames.includes(skill.name);
+                const selectedSkillUniqueId = selectedSkill ? getSkillUniqueId(selectedSkill) : null;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setSelectedSkill(skill),
+                    className: cn(
+                      "w-full rounded-md px-3 py-2 text-left",
+                      "hover:bg-fill-subtle",
+                      selectedSkillUniqueId === skillUniqueId && "border border-border-strong bg-fill-hover"
+                    ),
+                    children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx(Txt, { as: "span", variant: "subheading", tone: "ink", className: "truncate", children: skill.name }),
+                          isInstalled && /* @__PURE__ */ jsxs(
+                            Txt,
+                            {
+                              as: "span",
+                              variant: "meta",
+                              className: "inline-flex items-center gap-1 rounded bg-info-subtle px-1.5 py-0.5 text-info-subtle-foreground",
+                              children: [
+                                /* @__PURE__ */ jsx(Check, { className: "size-2.5" }),
+                                "Installed"
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx("div", { className: "truncate text-caption text-muted-foreground", children: skill.topSource })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 text-caption text-muted-foreground", children: [
+                        /* @__PURE__ */ jsx(Download, { className: "size-3" }),
+                        /* @__PURE__ */ jsx("span", { children: skill.installs.toLocaleString() })
+                      ] })
+                    ] })
+                  },
+                  skillUniqueId
+                );
+              }) })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 w-1/2 flex-col", children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-2 text-column tracking-wide text-muted-foreground uppercase", children: "Preview" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col overflow-hidden rounded-lg border border-border", children: !selectedSkill ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Package, { className: "mb-2 size-8" }),
+            /* @__PURE__ */ jsx(Txt, { children: "Select a skill to preview" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "border-b border-border bg-card p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted p-2", children: /* @__PURE__ */ jsx(SkillIcon, { className: "size-5 text-muted-foreground" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx(Txt, { as: "h3", variant: "subheading", tone: "ink", className: "truncate", children: selectedSkill.name }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-3 text-caption text-muted-foreground", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx(GithubIcon, { className: "size-3" }),
+                    selectedSkill.topSource
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx(Download, { className: "size-3" }),
+                    selectedSkill.installs.toLocaleString(),
+                    " installs"
+                  ] })
+                ] })
+              ] }),
+              parsedSource && /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: `https://github.com/${parsedSource.owner}/${parsedSource.repo}`,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: cn(quietTextHover, controlStateColorTransition),
+                  title: "View on GitHub",
+                  children: /* @__PURE__ */ jsx(ExternalLink, { className: "size-4" })
+                }
+              )
+            ] }) }),
+            isLoadingPreview ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "size-6 animate-spin text-muted-foreground" }) }) : previewContent ? /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(MarkdownRenderer, { children: previewContent }) }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Package, { className: "mb-2 size-8" }),
+              /* @__PURE__ */ jsx(Txt, { children: "Preview unavailable" }),
+              skillsUrl && /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: skillsUrl,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "mt-2 flex items-center gap-1 text-caption text-info-indicator hover:underline",
+                  children: [
+                    "View on skills.sh ",
+                    /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" })
+                  ]
+                }
+              )
+            ] })
+          ] }) })
+        ] })
+      ] }),
+      selectedSkill && writableMounts && writableMounts.length > 1 && /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", className: cn(raisedSurfaceStyle, "gap-3 rounded-lg p-3"), children: [
+        /* @__PURE__ */ jsx(Folder, { className: "size-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(FieldLabel, { className: "whitespace-nowrap", children: "Install to" }),
+        /* @__PURE__ */ jsxs(Select, { value: installMount, onValueChange: setSelectedMount, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "flex-1", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: writableMounts.map((m) => {
+            const name = m.displayName ?? m.name ?? m.provider ?? "unknown";
+            return /* @__PURE__ */ jsxs(SelectItem, { value: m.path, children: [
+              name,
+              " (",
+              m.path,
+              ")"
+            ] }, m.path);
+          }) })
+        ] })
+      ] })
+    ] }),
+    selectedSkill && /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      isSelectedSkillInstalled && writableMounts && writableMounts.length > 1 && (() => {
+        const skillPath = installedSkillPaths?.[selectedSkill.name];
+        if (!skillPath) return null;
+        const mount = writableMounts.find((m) => skillPath.startsWith(m.path + "/") || skillPath === m.path);
+        return mount ? /* @__PURE__ */ jsxs(Txt, { as: "span", variant: "caption", tone: "muted", className: "mr-auto", children: [
+          "Installed at ",
+          mount.path
+        ] }) : null;
+      })(),
+      /* @__PURE__ */ jsx(DialogCancel, { children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        DialogAction,
+        {
+          onConfirm: handleInstall,
+          disabled: !parsedSource || isSelectedSkillInstalled,
+          "data-testid": "install-skill-button",
+          children: isInstalling ? "Installing..." : isSelectedSkillInstalled ? "Already Installed" : "Install"
+        }
+      )
+    ] })
+  ] }) });
+}
+
+export { WorkspaceAddSkillDialog };
+//# sourceMappingURL=workspace-add-skill-dialog.es.js.map