@openhands/agent-canvas 1.15.0 → 1.16.0

package/dist/components/features/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../../../../src/components/features/sidebar/sidebar.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { SidebarRailBody } from \"./sidebar-rail-body\";\nimport { getErrorStatus, useSettings } from \"#/hooks/query/use-settings\";\nimport { useConfig } from \"#/hooks/query/use-config\";\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { cn } from \"#/utils/utils\";\nimport { useSidebarMobileNav } from \"./sidebar-mobile-nav-context\";\nimport { useSidebarStore } from \"#/stores/sidebar-store\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\n// The LLM settings modal is only mounted when the settings query 404s and\n// LLM settings aren't hidden — keep it out of the sidebar's eager graph.\nconst SettingsModal = React.lazy(() =>\n  import(\"#/components/shared/modals/settings/settings-modal\").then((m) => ({\n    default: m.SettingsModal,\n  })),\n);\n\n// Add/Manage backend modals are lifted into the sidebar (instead of living\n// inside BackendSelector) so they survive the collapsed popover unmounting\n// when the user moves the cursor out of the popover toward the modal.\nconst AddBackendModal = React.lazy(() =>\n  import(\"#/components/features/backends/add-backend-modal\").then((m) => ({\n    default: m.AddBackendModal,\n  })),\n);\nconst ManageBackendsModal = React.lazy(() =>\n  import(\"#/components/features/backends/manage-backends-modal\").then((m) => ({\n    default: m.ManageBackendsModal,\n  })),\n);\n\nconst MOBILE_DRAWER_TRANSITION_MS = 250;\n\nexport function Sidebar() {\n  const { t } = useTranslation(\"openhands\");\n  const { currentPath } = useNavigation();\n  const { data: config } = useConfig();\n  const {\n    data: settings,\n    error: settingsError,\n    isError: settingsIsError,\n    isFetching: isFetchingSettings,\n  } = useSettings();\n  const { backends, active } = useActiveBackendContext();\n  const healthByBackendId = useBackendsHealth(backends);\n  const activeBackendHealth = healthByBackendId[active.backend.id];\n  const collapsed = useSidebarStore((state) => state.collapsed);\n  const setCollapsed = useSidebarStore((state) => state.setCollapsed);\n  const [settingsModalIsOpen, setSettingsModalIsOpen] = React.useState(false);\n  const [collapsedBackendPopoverOpen, setCollapsedBackendPopoverOpen] =\n    React.useState(false);\n  const collapsedBackendCloseTimer = React.useRef<ReturnType<\n    typeof setTimeout\n  > | null>(null);\n  // Lifted out of BackendSelector so opening these modals from the\n  // collapsed-sidebar popover doesn't lose state when the popover unmounts\n  // (cursor moving toward the modal triggers onMouseLeave -> close).\n  const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n  const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n    React.useState(false);\n  const [collapsedRailHovered, setCollapsedRailHovered] = React.useState(false);\n  const suppressCollapsedExpandRef = React.useRef(false);\n  const [, refreshCollapsedExpandGate] = React.useReducer((n) => n + 1, 0);\n  const { isOpen: isMobileNavOpen, close: closeMobileNav } =\n    useSidebarMobileNav();\n  const [mobileDrawerMounted, setMobileDrawerMounted] = React.useState(false);\n  const [mobileDrawerVisible, setMobileDrawerVisible] = React.useState(false);\n  const collapsedBackendPopoverRef = useClickOutsideElement<HTMLDivElement>(\n    () => setCollapsedBackendPopoverOpen(false),\n  );\n  const settingsErrorStatus = getErrorStatus(settingsError);\n\n  React.useEffect(() => {\n    closeMobileNav();\n  }, [currentPath, closeMobileNav]);\n\n  React.useEffect(() => {\n    if (isMobileNavOpen) {\n      setMobileDrawerMounted(true);\n      const frame = requestAnimationFrame(() => {\n        setMobileDrawerVisible(true);\n      });\n      return () => cancelAnimationFrame(frame);\n    }\n\n    setMobileDrawerVisible(false);\n    const timer = window.setTimeout(() => {\n      setMobileDrawerMounted(false);\n    }, MOBILE_DRAWER_TRANSITION_MS);\n    return () => window.clearTimeout(timer);\n  }, [isMobileNavOpen]);\n\n  React.useEffect(() => {\n    if (!isMobileNavOpen) {\n      return undefined;\n    }\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        closeMobileNav();\n      }\n    };\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => window.removeEventListener(\"keydown\", onKeyDown);\n  }, [isMobileNavOpen, closeMobileNav]);\n\n  React.useEffect(() => {\n    if (currentPath === \"/settings\") {\n      setSettingsModalIsOpen(false);\n    } else if (\n      !isFetchingSettings &&\n      settingsIsError &&\n      settingsErrorStatus !== 404\n    ) {\n      // We don't show toast errors for settings in the global error handler\n      // because we have a special case for 404 errors\n      displayErrorToast(t(I18nKey.SETTINGS$FETCH_ERROR));\n    } else if (\n      settingsErrorStatus === 404 &&\n      !config?.feature_flags?.hide_llm_settings\n    ) {\n      setSettingsModalIsOpen(true);\n    }\n  }, [\n    currentPath,\n    isFetchingSettings,\n    settingsIsError,\n    settingsErrorStatus,\n    config?.feature_flags?.hide_llm_settings,\n    t,\n  ]);\n\n  const collapseToggleLabel = t(\n    collapsed ? I18nKey.SIDEBAR$EXPAND : I18nKey.SIDEBAR$COLLAPSE,\n  );\n  const handleCollapsedRailClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      if (!collapsed) {\n        return;\n      }\n\n      const target = event.target;\n      if (!(target instanceof HTMLElement)) {\n        return;\n      }\n\n      // Keep existing behavior for explicit controls/links and only use\n      // this as a convenience hit-area for empty collapsed-rail space.\n      if (\n        target.closest(\n          \"a,button,input,textarea,select,[role='button'],[role='link']\",\n        )\n      ) {\n        return;\n      }\n\n      setCollapsed(false);\n    },\n    [collapsed, setCollapsed],\n  );\n  const handleCollapse = React.useCallback(() => {\n    setCollapsedRailHovered(false);\n    suppressCollapsedExpandRef.current = true;\n    refreshCollapsedExpandGate();\n    setCollapsed(true);\n    window.setTimeout(() => {\n      suppressCollapsedExpandRef.current = false;\n      refreshCollapsedExpandGate();\n    }, 250);\n  }, [setCollapsed]);\n  const showCollapsedExpandButton =\n    collapsed && collapsedRailHovered && !suppressCollapsedExpandRef.current;\n\n  const isExtensionsActive =\n    currentPath === \"/customize\" ||\n    currentPath.startsWith(\"/skills\") ||\n    currentPath === \"/plugins\" ||\n    currentPath === \"/mcp\";\n\n  const railBodyProps = {\n    collapseToggleLabel,\n    onCollapse: handleCollapse,\n    onExpand: () => setCollapsed(false),\n    showCollapsedExpandButton,\n    isExtensionsActive,\n    currentPath,\n    activeBackendHealth,\n    collapsedBackendPopoverOpen,\n    setCollapsedBackendPopoverOpen,\n    collapsedBackendPopoverRef,\n    collapsedBackendCloseTimer,\n    onOpenAddBackend: () => setAddBackendModalOpen(true),\n    onOpenManageBackends: () => setManageBackendsModalOpen(true),\n  };\n\n  return (\n    <>\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the aside acts as a hit-area for the collapsed rail; nested controls handle their own keyboard interactions. */}\n      <aside\n        aria-label={t(I18nKey.SIDEBAR$NAVIGATION_LABEL)}\n        data-collapsed={collapsed ? \"true\" : \"false\"}\n        onClick={handleCollapsedRailClick}\n        onMouseEnter={() => {\n          if (collapsed) {\n            setCollapsedRailHovered(true);\n          }\n        }}\n        onMouseLeave={() => {\n          setCollapsedRailHovered(false);\n        }}\n        className={cn(\n          \"max-md:hidden flex bg-base flex-col min-h-0 transition-[width,min-width] duration-200\",\n          \"md:border-r md:border-[var(--oh-border)] md:h-full\",\n          collapsed\n            ? \"md:w-[60px] md:min-w-[60px] md:px-2.5\"\n            : \"md:w-[300px] md:min-w-[300px] pb-2 md:pl-2.5 md:pr-0\",\n          currentPath === \"/\" && \"md:pb-3\",\n        )}\n      >\n        <SidebarRailBody\n          collapsed={collapsed}\n          showCollapseToggle\n          {...railBodyProps}\n        />\n      </aside>\n\n      {mobileDrawerMounted ? (\n        <>\n          <div\n            className={cn(\n              \"fixed inset-0 z-40 bg-black/50 md:hidden\",\n              \"transition-opacity ease-in-out motion-reduce:transition-none\",\n              mobileDrawerVisible\n                ? \"opacity-100\"\n                : \"pointer-events-none opacity-0\",\n            )}\n            style={{ transitionDuration: `${MOBILE_DRAWER_TRANSITION_MS}ms` }}\n            onClick={closeMobileNav}\n            aria-hidden={!mobileDrawerVisible}\n          />\n          <aside\n            aria-label={t(I18nKey.SIDEBAR$NAVIGATION_LABEL)}\n            data-testid=\"sidebar-mobile-drawer\"\n            aria-hidden={!mobileDrawerVisible}\n            className={cn(\n              \"fixed inset-y-0 left-0 z-50 flex min-h-0 w-[min(300px,85vw)] flex-col bg-base\",\n              \"border-r border-[var(--oh-border)] pb-2 pl-2.5 pr-0 md:hidden\",\n              \"transition-transform ease-in-out motion-reduce:transition-none\",\n              mobileDrawerVisible ? \"translate-x-0\" : \"-translate-x-full\",\n            )}\n            style={{ transitionDuration: `${MOBILE_DRAWER_TRANSITION_MS}ms` }}\n          >\n            <SidebarRailBody\n              collapsed={false}\n              showCollapseToggle={false}\n              showMobileCloseButton\n              onCloseMobile={closeMobileNav}\n              {...railBodyProps}\n            />\n          </aside>\n        </>\n      ) : null}\n\n      {settingsModalIsOpen && (\n        <React.Suspense fallback={null}>\n          <SettingsModal\n            settings={settings}\n            onClose={() => setSettingsModalIsOpen(false)}\n          />\n        </React.Suspense>\n      )}\n      {addBackendModalOpen && (\n        <React.Suspense fallback={null}>\n          <AddBackendModal onClose={() => setAddBackendModalOpen(false)} />\n        </React.Suspense>\n      )}\n      {manageBackendsModalOpen && (\n        <React.Suspense fallback={null}>\n          <ManageBackendsModal\n            onClose={() => setManageBackendsModalOpen(false)}\n          />\n        </React.Suspense>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../../../../src/components/features/sidebar/sidebar.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { SidebarRailBody } from \"./sidebar-rail-body\";\nimport { getErrorStatus, useSettings } from \"#/hooks/query/use-settings\";\nimport { useConfig } from \"#/hooks/query/use-config\";\nimport { displayErrorToast } from \"#/utils/custom-toast-handlers\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { cn } from \"#/utils/utils\";\nimport { useSidebarMobileNav } from \"./sidebar-mobile-nav-context\";\nimport { useSidebarStore } from \"#/stores/sidebar-store\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\n// The LLM settings modal is only mounted when the settings query 404s and\n// LLM settings aren't hidden — keep it out of the sidebar's eager graph.\nconst SettingsModal = React.lazy(() =>\n  import(\"#/components/shared/modals/settings/settings-modal\").then((m) => ({\n    default: m.SettingsModal,\n  })),\n);\n\n// Add/Manage backend modals are lifted into the sidebar (instead of living\n// inside BackendSelector) so they survive the collapsed popover unmounting\n// when the user moves the cursor out of the popover toward the modal.\nconst AddBackendModal = React.lazy(() =>\n  import(\"#/components/features/backends/add-backend-modal\").then((m) => ({\n    default: m.AddBackendModal,\n  })),\n);\nconst ManageBackendsModal = React.lazy(() =>\n  import(\"#/components/features/backends/manage-backends-modal\").then((m) => ({\n    default: m.ManageBackendsModal,\n  })),\n);\n\nconst MOBILE_DRAWER_TRANSITION_MS = 250;\n\nexport function Sidebar() {\n  const { t } = useTranslation(\"openhands\");\n  const { currentPath } = useNavigation();\n  const { data: config } = useConfig();\n  const {\n    data: settings,\n    error: settingsError,\n    isError: settingsIsError,\n    isFetching: isFetchingSettings,\n  } = useSettings();\n  const { backends, active } = useActiveBackendContext();\n  const healthByBackendId = useBackendsHealth(backends);\n  const activeBackendHealth = healthByBackendId[active.backend.id];\n  const collapsed = useSidebarStore((state) => state.collapsed);\n  const setCollapsed = useSidebarStore((state) => state.setCollapsed);\n  const [settingsModalIsOpen, setSettingsModalIsOpen] = React.useState(false);\n  const [collapsedBackendPopoverOpen, setCollapsedBackendPopoverOpen] =\n    React.useState(false);\n  const collapsedBackendCloseTimer = React.useRef<ReturnType<\n    typeof setTimeout\n  > | null>(null);\n  // Lifted out of BackendSelector so opening these modals from the\n  // collapsed-sidebar popover doesn't lose state when the popover unmounts\n  // (cursor moving toward the modal triggers onMouseLeave -> close).\n  const [addBackendModalOpen, setAddBackendModalOpen] = React.useState(false);\n  const [manageBackendsModalOpen, setManageBackendsModalOpen] =\n    React.useState(false);\n  const [collapsedRailHovered, setCollapsedRailHovered] = React.useState(false);\n  const suppressCollapsedExpandRef = React.useRef(false);\n  const [, refreshCollapsedExpandGate] = React.useReducer((n) => n + 1, 0);\n  const { isOpen: isMobileNavOpen, close: closeMobileNav } =\n    useSidebarMobileNav();\n  const [mobileDrawerMounted, setMobileDrawerMounted] = React.useState(false);\n  const [mobileDrawerVisible, setMobileDrawerVisible] = React.useState(false);\n  const collapsedBackendPopoverRef = useClickOutsideElement<HTMLDivElement>(\n    () => setCollapsedBackendPopoverOpen(false),\n  );\n  const settingsErrorStatus = getErrorStatus(settingsError);\n\n  React.useEffect(() => {\n    closeMobileNav();\n  }, [currentPath, closeMobileNav]);\n\n  React.useEffect(() => {\n    if (isMobileNavOpen) {\n      setMobileDrawerMounted(true);\n      const frame = requestAnimationFrame(() => {\n        setMobileDrawerVisible(true);\n      });\n      return () => cancelAnimationFrame(frame);\n    }\n\n    setMobileDrawerVisible(false);\n    const timer = window.setTimeout(() => {\n      setMobileDrawerMounted(false);\n    }, MOBILE_DRAWER_TRANSITION_MS);\n    return () => window.clearTimeout(timer);\n  }, [isMobileNavOpen]);\n\n  React.useEffect(() => {\n    if (!isMobileNavOpen) {\n      return undefined;\n    }\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        closeMobileNav();\n      }\n    };\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => window.removeEventListener(\"keydown\", onKeyDown);\n  }, [isMobileNavOpen, closeMobileNav]);\n\n  React.useEffect(() => {\n    if (currentPath === \"/settings\") {\n      setSettingsModalIsOpen(false);\n    } else if (\n      !isFetchingSettings &&\n      settingsIsError &&\n      settingsErrorStatus !== 404\n    ) {\n      // We don't show toast errors for settings in the global error handler\n      // because we have a special case for 404 errors\n      displayErrorToast(t(I18nKey.SETTINGS$FETCH_ERROR));\n    } else if (\n      settingsErrorStatus === 404 &&\n      !config?.feature_flags?.hide_llm_settings\n    ) {\n      setSettingsModalIsOpen(true);\n    }\n  }, [\n    currentPath,\n    isFetchingSettings,\n    settingsIsError,\n    settingsErrorStatus,\n    config?.feature_flags?.hide_llm_settings,\n    t,\n  ]);\n\n  const collapseToggleLabel = t(\n    collapsed ? I18nKey.SIDEBAR$EXPAND : I18nKey.SIDEBAR$COLLAPSE,\n  );\n  const handleCollapsedRailClick = React.useCallback(\n    (event: React.MouseEvent<HTMLElement>) => {\n      if (!collapsed) {\n        return;\n      }\n\n      const target = event.target;\n      if (!(target instanceof HTMLElement)) {\n        return;\n      }\n\n      // Keep existing behavior for explicit controls/links and only use\n      // this as a convenience hit-area for empty collapsed-rail space.\n      if (\n        target.closest(\n          \"a,button,input,textarea,select,[role='button'],[role='link']\",\n        )\n      ) {\n        return;\n      }\n\n      setCollapsed(false);\n    },\n    [collapsed, setCollapsed],\n  );\n  const handleCollapse = React.useCallback(() => {\n    setCollapsedRailHovered(false);\n    suppressCollapsedExpandRef.current = true;\n    refreshCollapsedExpandGate();\n    setCollapsed(true);\n    window.setTimeout(() => {\n      suppressCollapsedExpandRef.current = false;\n      refreshCollapsedExpandGate();\n    }, 250);\n  }, [setCollapsed]);\n  const showCollapsedExpandButton =\n    collapsed && collapsedRailHovered && !suppressCollapsedExpandRef.current;\n\n  const isExtensionsActive =\n    currentPath === \"/customize\" ||\n    currentPath.startsWith(\"/skills\") ||\n    currentPath === \"/plugins\" ||\n    currentPath === \"/extensions\" ||\n    currentPath === \"/mcp\";\n\n  const railBodyProps = {\n    collapseToggleLabel,\n    onCollapse: handleCollapse,\n    onExpand: () => setCollapsed(false),\n    showCollapsedExpandButton,\n    isExtensionsActive,\n    currentPath,\n    activeBackendHealth,\n    collapsedBackendPopoverOpen,\n    setCollapsedBackendPopoverOpen,\n    collapsedBackendPopoverRef,\n    collapsedBackendCloseTimer,\n    onOpenAddBackend: () => setAddBackendModalOpen(true),\n    onOpenManageBackends: () => setManageBackendsModalOpen(true),\n  };\n\n  return (\n    <>\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the aside acts as a hit-area for the collapsed rail; nested controls handle their own keyboard interactions. */}\n      <aside\n        aria-label={t(I18nKey.SIDEBAR$NAVIGATION_LABEL)}\n        data-collapsed={collapsed ? \"true\" : \"false\"}\n        onClick={handleCollapsedRailClick}\n        onMouseEnter={() => {\n          if (collapsed) {\n            setCollapsedRailHovered(true);\n          }\n        }}\n        onMouseLeave={() => {\n          setCollapsedRailHovered(false);\n        }}\n        className={cn(\n          \"max-md:hidden flex bg-base flex-col min-h-0 transition-[width,min-width] duration-200\",\n          \"md:border-r md:border-[var(--oh-border)] md:h-full\",\n          collapsed\n            ? \"md:w-[60px] md:min-w-[60px] md:px-2.5\"\n            : \"md:w-[300px] md:min-w-[300px] pb-2 md:pl-2.5 md:pr-0\",\n          currentPath === \"/\" && \"md:pb-3\",\n        )}\n      >\n        <SidebarRailBody\n          collapsed={collapsed}\n          showCollapseToggle\n          {...railBodyProps}\n        />\n      </aside>\n\n      {mobileDrawerMounted ? (\n        <>\n          <div\n            className={cn(\n              \"fixed inset-0 z-40 bg-black/50 md:hidden\",\n              \"transition-opacity ease-in-out motion-reduce:transition-none\",\n              mobileDrawerVisible\n                ? \"opacity-100\"\n                : \"pointer-events-none opacity-0\",\n            )}\n            style={{ transitionDuration: `${MOBILE_DRAWER_TRANSITION_MS}ms` }}\n            onClick={closeMobileNav}\n            aria-hidden={!mobileDrawerVisible}\n          />\n          <aside\n            aria-label={t(I18nKey.SIDEBAR$NAVIGATION_LABEL)}\n            data-testid=\"sidebar-mobile-drawer\"\n            aria-hidden={!mobileDrawerVisible}\n            className={cn(\n              \"fixed inset-y-0 left-0 z-50 flex min-h-0 w-[min(300px,85vw)] flex-col bg-base\",\n              \"border-r border-[var(--oh-border)] pb-2 pl-2.5 pr-0 md:hidden\",\n              \"transition-transform ease-in-out motion-reduce:transition-none\",\n              mobileDrawerVisible ? \"translate-x-0\" : \"-translate-x-full\",\n            )}\n            style={{ transitionDuration: `${MOBILE_DRAWER_TRANSITION_MS}ms` }}\n          >\n            <SidebarRailBody\n              collapsed={false}\n              showCollapseToggle={false}\n              showMobileCloseButton\n              onCloseMobile={closeMobileNav}\n              {...railBodyProps}\n            />\n          </aside>\n        </>\n      ) : null}\n\n      {settingsModalIsOpen && (\n        <React.Suspense fallback={null}>\n          <SettingsModal\n            settings={settings}\n            onClose={() => setSettingsModalIsOpen(false)}\n          />\n        </React.Suspense>\n      )}\n      {addBackendModalOpen && (\n        <React.Suspense fallback={null}>\n          <AddBackendModal onClose={() => setAddBackendModalOpen(false)} />\n        </React.Suspense>\n      )}\n      {manageBackendsModalOpen && (\n        <React.Suspense fallback={null}>\n          <ManageBackendsModal\n            onClose={() => setManageBackendsModalOpen(false)}\n          />\n        </React.Suspense>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/skills/build-skill-pills.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../utils/utils.cjs"),r=require("./skill-card-pill-row.cjs"),i=require("./skill-type-badge.cjs"),a=require("../../../utils/skill-category.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");function c(e,t,n){if(e)return`${e}-${t}-${n}`}function l(e,o,l={}){let{variant:u=`card`,testIdPrefix:d}=l,f=a.getSkillCategory(e),p=[{id:`type-${e.type}`,node:(0,s.jsx)(i.SkillTypeBadge,{type:e.type})}];if(f!==`other`&&p.push({id:`category-${f}`,node:(0,s.jsx)(`span`,{"data-testid":c(d,e.name,`category`)??`skill-category-${e.name}`,className:r.SKILL_CARD_PILL_CLASS,children:o(a.SKILL_CATEGORY_LABEL_KEYS[f])})}),e.version&&p.push({id:`version-${e.version}`,node:(0,s.jsx)(`span`,{"data-testid":c(d,e.name,`version`)??`skill-version-${e.name}`,className:r.SKILL_CARD_PILL_CLASS,children:o(t.I18nKey.SETTINGS$SKILLS_VERSION,{version:e.version})})}),u===`detail`&&e.license&&p.push({id:`license-${e.license}`,node:(0,s.jsx)(`span`,{"data-testid":c(d,e.name,`license`),className:r.SKILL_CARD_PILL_CLASS,children:e.license})}),u===`detail`&&e.compatibility&&p.push({id:`compatibility-${e.compatibility}`,node:(0,s.jsx)(`span`,{"data-testid":c(d,e.name,`compatibility`),className:r.SKILL_CARD_PILL_CLASS,children:e.compatibility})}),e.disable_model_invocation&&p.push({id:`disable-model-invocation`,node:(0,s.jsxs)(`span`,{"data-testid":c(d,e.name,`disable-model-invocation`)??`skill-disable-model-invocation-${e.name}`,className:`inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border border-[rgba(248,113,113,0.35)] bg-[rgba(248,113,113,0.12)] px-2 py-0.5 text-[11px] font-medium leading-4 text-[#fca5a5]`,children:[(0,s.jsx)(`span`,{className:`size-1.5 rounded-full bg-[#fca5a5]`}),o(t.I18nKey.SETTINGS$SKILLS_DISABLE_MODEL_INVOCATION)]})}),u===`detail`&&e.allowed_tools)for(let t of e.allowed_tools)p.push({id:`allowed-tool-${t}`,node:(0,s.jsx)(`span`,{"data-testid":c(d,e.name,`tool-${t}`),className:n.cn(r.SKILL_CARD_PILL_CLASS,`font-mono`),children:t})});if(u===`detail`&&e.metadata)for(let[t,n]of Object.entries(e.metadata))p.push({id:`metadata-${t}`,node:(0,s.jsxs)(`span`,{"data-testid":c(d,e.name,`metadata-${t}`),className:r.SKILL_CARD_PILL_CLASS,children:[(0,s.jsxs)(`span`,{className:`font-mono text-[10px] text-tertiary-light`,children:[t,`:`]}),` `,n]})});for(let t of e.triggers??[])p.push({id:`trigger-${t}`,node:(0,s.jsx)(`span`,{"data-testid":c(d,e.name,`trigger-${t}`),className:r.SKILL_CARD_PILL_CLASS,children:t})});return p}exports.buildSkillPills=l;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../utils/utils.cjs"),r=require("../../../utils/skill-enablement.cjs"),i=require("./skill-card-pill-row.cjs"),a=require("./skill-type-badge.cjs"),o=require("../../../utils/skill-category.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime");function l(e,t,n){if(e)return`${e}-${t}-${n}`}function u(e,s,u={}){let{variant:d=`card`,testIdPrefix:f}=u,p=o.getSkillCategory(e),m=[{id:`type-${e.type}`,node:(0,c.jsx)(a.SkillTypeBadge,{type:e.type})}];if(r.isRecommendedSkill(e.name)&&m.push({id:`recommended`,node:(0,c.jsx)(`span`,{"data-testid":l(f,e.name,`recommended`)??`skill-recommended-${e.name}`,className:i.SKILL_CARD_PILL_CLASS,children:s(t.I18nKey.SETTINGS$SKILLS_RECOMMENDED)})}),p!==`other`&&m.push({id:`category-${p}`,node:(0,c.jsx)(`span`,{"data-testid":l(f,e.name,`category`)??`skill-category-${e.name}`,className:i.SKILL_CARD_PILL_CLASS,children:s(o.SKILL_CATEGORY_LABEL_KEYS[p])})}),e.version&&m.push({id:`version-${e.version}`,node:(0,c.jsx)(`span`,{"data-testid":l(f,e.name,`version`)??`skill-version-${e.name}`,className:i.SKILL_CARD_PILL_CLASS,children:s(t.I18nKey.SETTINGS$SKILLS_VERSION,{version:e.version})})}),d===`detail`&&e.license&&m.push({id:`license-${e.license}`,node:(0,c.jsx)(`span`,{"data-testid":l(f,e.name,`license`),className:i.SKILL_CARD_PILL_CLASS,children:e.license})}),d===`detail`&&e.compatibility&&m.push({id:`compatibility-${e.compatibility}`,node:(0,c.jsx)(`span`,{"data-testid":l(f,e.name,`compatibility`),className:i.SKILL_CARD_PILL_CLASS,children:e.compatibility})}),e.disable_model_invocation&&m.push({id:`disable-model-invocation`,node:(0,c.jsxs)(`span`,{"data-testid":l(f,e.name,`disable-model-invocation`)??`skill-disable-model-invocation-${e.name}`,className:`inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border border-[rgba(248,113,113,0.35)] bg-[rgba(248,113,113,0.12)] px-2 py-0.5 text-[11px] font-medium leading-4 text-[#fca5a5]`,children:[(0,c.jsx)(`span`,{className:`size-1.5 rounded-full bg-[#fca5a5]`}),s(t.I18nKey.SETTINGS$SKILLS_DISABLE_MODEL_INVOCATION)]})}),d===`detail`&&e.allowed_tools)for(let t of e.allowed_tools)m.push({id:`allowed-tool-${t}`,node:(0,c.jsx)(`span`,{"data-testid":l(f,e.name,`tool-${t}`),className:n.cn(i.SKILL_CARD_PILL_CLASS,`font-mono`),children:t})});if(d===`detail`&&e.metadata)for(let[t,n]of Object.entries(e.metadata))m.push({id:`metadata-${t}`,node:(0,c.jsxs)(`span`,{"data-testid":l(f,e.name,`metadata-${t}`),className:i.SKILL_CARD_PILL_CLASS,children:[(0,c.jsxs)(`span`,{className:`font-mono text-[10px] text-tertiary-light`,children:[t,`:`]}),` `,n]})});for(let t of e.triggers??[])m.push({id:`trigger-${t}`,node:(0,c.jsx)(`span`,{"data-testid":l(f,e.name,`trigger-${t}`),className:i.SKILL_CARD_PILL_CLASS,children:t})});return m}exports.buildSkillPills=u;
 //# sourceMappingURL=build-skill-pills.cjs.map

package/dist/components/features/skills/build-skill-pills.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"build-skill-pills.cjs","names":[],"sources":["../../../../src/components/features/skills/build-skill-pills.tsx"],"sourcesContent":["import React from \"react\";\nimport type { TFunction } from \"i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillInfo } from \"#/types/settings\";\nimport { cn } from \"#/utils/utils\";\nimport { SkillTypeBadge } from \"./skill-type-badge\";\nimport {\n  SKILL_CARD_PILL_CLASS,\n  type SkillCardPill,\n} from \"./skill-card-pill-row\";\nimport {\n  getSkillCategory,\n  SKILL_CATEGORY_LABEL_KEYS,\n  UNCATEGORIZED_SKILL_CATEGORY,\n} from \"#/utils/skill-category\";\n\ntype SkillPillVariant = \"card\" | \"detail\";\n\ninterface BuildSkillPillsOptions {\n  variant?: SkillPillVariant;\n  testIdPrefix?: string;\n}\n\nfunction pillTestId(\n  prefix: string | undefined,\n  skillName: string,\n  suffix: string,\n) {\n  if (prefix) {\n    return `${prefix}-${skillName}-${suffix}`;\n  }\n  return undefined;\n}\n\nexport function buildSkillPills(\n  skill: SkillInfo,\n  translate: TFunction,\n  options: BuildSkillPillsOptions = {},\n): SkillCardPill[] {\n  const { variant = \"card\", testIdPrefix } = options;\n  const category = getSkillCategory(skill);\n  const pills: SkillCardPill[] = [\n    {\n      id: `type-${skill.type}`,\n      node: <SkillTypeBadge type={skill.type} />,\n    },\n  ];\n\n  // An \"Other\" pill says nothing, and every local skill would carry one:\n  // only the catalog assigns categories.\n  if (category !== UNCATEGORIZED_SKILL_CATEGORY) {\n    pills.push({\n      id: `category-${category}`,\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"category\") ??\n            `skill-category-${skill.name}`\n          }\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {translate(SKILL_CATEGORY_LABEL_KEYS[category])}\n        </span>\n      ),\n    });\n  }\n\n  if (skill.version) {\n    pills.push({\n      id: `version-${skill.version}`,\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"version\") ??\n            `skill-version-${skill.name}`\n          }\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {translate(I18nKey.SETTINGS$SKILLS_VERSION, {\n            version: skill.version,\n          })}\n        </span>\n      ),\n    });\n  }\n\n  if (variant === \"detail\" && skill.license) {\n    pills.push({\n      id: `license-${skill.license}`,\n      node: (\n        <span\n          data-testid={pillTestId(testIdPrefix, skill.name, \"license\")}\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {skill.license}\n        </span>\n      ),\n    });\n  }\n\n  if (variant === \"detail\" && skill.compatibility) {\n    pills.push({\n      id: `compatibility-${skill.compatibility}`,\n      node: (\n        <span\n          data-testid={pillTestId(testIdPrefix, skill.name, \"compatibility\")}\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {skill.compatibility}\n        </span>\n      ),\n    });\n  }\n\n  if (skill.disable_model_invocation) {\n    pills.push({\n      id: \"disable-model-invocation\",\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"disable-model-invocation\") ??\n            `skill-disable-model-invocation-${skill.name}`\n          }\n          className=\"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border border-[rgba(248,113,113,0.35)] bg-[rgba(248,113,113,0.12)] px-2 py-0.5 text-[11px] font-medium leading-4 text-[#fca5a5]\"\n        >\n          <span className=\"size-1.5 rounded-full bg-[#fca5a5]\" />\n          {translate(I18nKey.SETTINGS$SKILLS_DISABLE_MODEL_INVOCATION)}\n        </span>\n      ),\n    });\n  }\n\n  if (variant === \"detail\" && skill.allowed_tools) {\n    for (const tool of skill.allowed_tools) {\n      pills.push({\n        id: `allowed-tool-${tool}`,\n        node: (\n          <span\n            data-testid={pillTestId(testIdPrefix, skill.name, `tool-${tool}`)}\n            className={cn(SKILL_CARD_PILL_CLASS, \"font-mono\")}\n          >\n            {tool}\n          </span>\n        ),\n      });\n    }\n  }\n\n  if (variant === \"detail\" && skill.metadata) {\n    for (const [key, value] of Object.entries(skill.metadata)) {\n      pills.push({\n        id: `metadata-${key}`,\n        node: (\n          <span\n            data-testid={pillTestId(\n              testIdPrefix,\n              skill.name,\n              `metadata-${key}`,\n            )}\n            className={SKILL_CARD_PILL_CLASS}\n          >\n            <span className=\"font-mono text-[10px] text-tertiary-light\">\n              {key}:\n            </span>{\" \"}\n            {value}\n          </span>\n        ),\n      });\n    }\n  }\n\n  for (const trigger of skill.triggers ?? []) {\n    pills.push({\n      id: `trigger-${trigger}`,\n      node: (\n        <span\n          data-testid={pillTestId(\n            testIdPrefix,\n            skill.name,\n            `trigger-${trigger}`,\n          )}\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {trigger}\n        </span>\n      ),\n    });\n  }\n\n  return pills;\n}\n"],"mappings":"iVAuBA,SAAS,EACP,EACA,EACA,EACA,CACA,GAAI,EACF,MAAO,GAAG,EAAO,GAAG,EAAU,GAAG,GAGrC,CAEA,SAAgB,EACd,EACA,EACA,EAAkC,CAAC,EAClB,CACjB,GAAM,CAAE,UAAU,OAAQ,gBAAiB,EACrC,EAAW,EAAA,iBAAiB,CAAK,EACjC,EAAyB,CAC7B,CACE,GAAI,QAAQ,EAAM,OAClB,MAAM,EAAA,EAAA,KAAC,EAAA,eAAD,CAAgB,KAAM,EAAM,IAAO,CAAA,CAC3C,CACF,EAsFA,GAlFI,IAAA,SACF,EAAM,KAAK,CACT,GAAI,YAAY,IAChB,MACE,EAAA,EAAA,KAAC,OAAD,CACE,cACE,EAAW,EAAc,EAAM,KAAM,UAAU,GAC/C,kBAAkB,EAAM,OAE1B,UAAW,EAAA,+BAEV,EAAU,EAAA,0BAA0B,EAAS,CAC1C,CAAA,CAEV,CAAC,EAGC,EAAM,SACR,EAAM,KAAK,CACT,GAAI,WAAW,EAAM,UACrB,MACE,EAAA,EAAA,KAAC,OAAD,CACE,cACE,EAAW,EAAc,EAAM,KAAM,SAAS,GAC9C,iBAAiB,EAAM,OAEzB,UAAW,EAAA,+BAEV,EAAU,EAAA,QAAQ,wBAAyB,CAC1C,QAAS,EAAM,OACjB,CAAC,CACG,CAAA,CAEV,CAAC,EAGC,IAAY,UAAY,EAAM,SAChC,EAAM,KAAK,CACT,GAAI,WAAW,EAAM,UACrB,MACE,EAAA,EAAA,KAAC,OAAD,CACE,cAAa,EAAW,EAAc,EAAM,KAAM,SAAS,EAC3D,UAAW,EAAA,+BAEV,EAAM,OACH,CAAA,CAEV,CAAC,EAGC,IAAY,UAAY,EAAM,eAChC,EAAM,KAAK,CACT,GAAI,iBAAiB,EAAM,gBAC3B,MACE,EAAA,EAAA,KAAC,OAAD,CACE,cAAa,EAAW,EAAc,EAAM,KAAM,eAAe,EACjE,UAAW,EAAA,+BAEV,EAAM,aACH,CAAA,CAEV,CAAC,EAGC,EAAM,0BACR,EAAM,KAAK,CACT,GAAI,2BACJ,MACE,EAAA,EAAA,MAAC,OAAD,CACE,cACE,EAAW,EAAc,EAAM,KAAM,0BAA0B,GAC/D,kCAAkC,EAAM,OAE1C,UAAU,kNALZ,EAOE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oCAAsC,CAAA,EACrD,EAAU,EAAA,QAAQ,wCAAwC,CACvD,GAEV,CAAC,EAGC,IAAY,UAAY,EAAM,cAChC,IAAK,IAAM,KAAQ,EAAM,cACvB,EAAM,KAAK,CACT,GAAI,gBAAgB,IACpB,MACE,EAAA,EAAA,KAAC,OAAD,CACE,cAAa,EAAW,EAAc,EAAM,KAAM,QAAQ,GAAM,EAChE,UAAW,EAAA,GAAG,EAAA,sBAAuB,WAAW,WAE/C,CACG,CAAA,CAEV,CAAC,EAIL,GAAI,IAAY,UAAY,EAAM,SAChC,IAAK,GAAM,CAAC,EAAK,KAAU,OAAO,QAAQ,EAAM,QAAQ,EACtD,EAAM,KAAK,CACT,GAAI,YAAY,IAChB,MACE,EAAA,EAAA,MAAC,OAAD,CACE,cAAa,EACX,EACA,EAAM,KACN,YAAY,GACd,EACA,UAAW,EAAA,+BANb,EAQE,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,qDAAhB,CACG,EAAI,GACD,IAAE,IACP,CACG,GAEV,CAAC,EAIL,IAAK,IAAM,KAAW,EAAM,UAAY,CAAC,EACvC,EAAM,KAAK,CACT,GAAI,WAAW,IACf,MACE,EAAA,EAAA,KAAC,OAAD,CACE,cAAa,EACX,EACA,EAAM,KACN,WAAW,GACb,EACA,UAAW,EAAA,+BAEV,CACG,CAAA,CAEV,CAAC,EAGH,OAAO,CACT"}
+{"version":3,"file":"build-skill-pills.cjs","names":[],"sources":["../../../../src/components/features/skills/build-skill-pills.tsx"],"sourcesContent":["import React from \"react\";\nimport type { TFunction } from \"i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillInfo } from \"#/types/settings\";\nimport { cn } from \"#/utils/utils\";\nimport { SkillTypeBadge } from \"./skill-type-badge\";\nimport {\n  SKILL_CARD_PILL_CLASS,\n  type SkillCardPill,\n} from \"./skill-card-pill-row\";\nimport {\n  getSkillCategory,\n  SKILL_CATEGORY_LABEL_KEYS,\n  UNCATEGORIZED_SKILL_CATEGORY,\n} from \"#/utils/skill-category\";\nimport { isRecommendedSkill } from \"#/utils/skill-enablement\";\n\ntype SkillPillVariant = \"card\" | \"detail\";\n\ninterface BuildSkillPillsOptions {\n  variant?: SkillPillVariant;\n  testIdPrefix?: string;\n}\n\nfunction pillTestId(\n  prefix: string | undefined,\n  skillName: string,\n  suffix: string,\n) {\n  if (prefix) {\n    return `${prefix}-${skillName}-${suffix}`;\n  }\n  return undefined;\n}\n\nexport function buildSkillPills(\n  skill: SkillInfo,\n  translate: TFunction,\n  options: BuildSkillPillsOptions = {},\n): SkillCardPill[] {\n  const { variant = \"card\", testIdPrefix } = options;\n  const category = getSkillCategory(skill);\n  const pills: SkillCardPill[] = [\n    {\n      id: `type-${skill.type}`,\n      node: <SkillTypeBadge type={skill.type} />,\n    },\n  ];\n\n  if (isRecommendedSkill(skill.name)) {\n    pills.push({\n      id: \"recommended\",\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"recommended\") ??\n            `skill-recommended-${skill.name}`\n          }\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {translate(I18nKey.SETTINGS$SKILLS_RECOMMENDED)}\n        </span>\n      ),\n    });\n  }\n\n  // An \"Other\" pill says nothing, and every local skill would carry one:\n  // only the catalog assigns categories.\n  if (category !== UNCATEGORIZED_SKILL_CATEGORY) {\n    pills.push({\n      id: `category-${category}`,\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"category\") ??\n            `skill-category-${skill.name}`\n          }\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {translate(SKILL_CATEGORY_LABEL_KEYS[category])}\n        </span>\n      ),\n    });\n  }\n\n  if (skill.version) {\n    pills.push({\n      id: `version-${skill.version}`,\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"version\") ??\n            `skill-version-${skill.name}`\n          }\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {translate(I18nKey.SETTINGS$SKILLS_VERSION, {\n            version: skill.version,\n          })}\n        </span>\n      ),\n    });\n  }\n\n  if (variant === \"detail\" && skill.license) {\n    pills.push({\n      id: `license-${skill.license}`,\n      node: (\n        <span\n          data-testid={pillTestId(testIdPrefix, skill.name, \"license\")}\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {skill.license}\n        </span>\n      ),\n    });\n  }\n\n  if (variant === \"detail\" && skill.compatibility) {\n    pills.push({\n      id: `compatibility-${skill.compatibility}`,\n      node: (\n        <span\n          data-testid={pillTestId(testIdPrefix, skill.name, \"compatibility\")}\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {skill.compatibility}\n        </span>\n      ),\n    });\n  }\n\n  if (skill.disable_model_invocation) {\n    pills.push({\n      id: \"disable-model-invocation\",\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"disable-model-invocation\") ??\n            `skill-disable-model-invocation-${skill.name}`\n          }\n          className=\"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border border-[rgba(248,113,113,0.35)] bg-[rgba(248,113,113,0.12)] px-2 py-0.5 text-[11px] font-medium leading-4 text-[#fca5a5]\"\n        >\n          <span className=\"size-1.5 rounded-full bg-[#fca5a5]\" />\n          {translate(I18nKey.SETTINGS$SKILLS_DISABLE_MODEL_INVOCATION)}\n        </span>\n      ),\n    });\n  }\n\n  if (variant === \"detail\" && skill.allowed_tools) {\n    for (const tool of skill.allowed_tools) {\n      pills.push({\n        id: `allowed-tool-${tool}`,\n        node: (\n          <span\n            data-testid={pillTestId(testIdPrefix, skill.name, `tool-${tool}`)}\n            className={cn(SKILL_CARD_PILL_CLASS, \"font-mono\")}\n          >\n            {tool}\n          </span>\n        ),\n      });\n    }\n  }\n\n  if (variant === \"detail\" && skill.metadata) {\n    for (const [key, value] of Object.entries(skill.metadata)) {\n      pills.push({\n        id: `metadata-${key}`,\n        node: (\n          <span\n            data-testid={pillTestId(\n              testIdPrefix,\n              skill.name,\n              `metadata-${key}`,\n            )}\n            className={SKILL_CARD_PILL_CLASS}\n          >\n            <span className=\"font-mono text-[10px] text-tertiary-light\">\n              {key}:\n            </span>{\" \"}\n            {value}\n          </span>\n        ),\n      });\n    }\n  }\n\n  for (const trigger of skill.triggers ?? []) {\n    pills.push({\n      id: `trigger-${trigger}`,\n      node: (\n        <span\n          data-testid={pillTestId(\n            testIdPrefix,\n            skill.name,\n            `trigger-${trigger}`,\n          )}\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {trigger}\n        </span>\n      ),\n    });\n  }\n\n  return pills;\n}\n"],"mappings":"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"}

package/dist/components/features/skills/build-skill-pills.js

@@ -1,69 +1,77 @@
 import { I18nKey as e } from "../../../i18n/declaration.js";
 import { cn as t } from "../../../utils/utils.js";
-import { SKILL_CARD_PILL_CLASS as n } from "./skill-card-pill-row.js";
-import { SkillTypeBadge as r } from "./skill-type-badge.js";
-import { SKILL_CATEGORY_LABEL_KEYS as i, getSkillCategory as a } from "../../../utils/skill-category.js";
+import { isRecommendedSkill as n } from "../../../utils/skill-enablement.js";
+import { SKILL_CARD_PILL_CLASS as r } from "./skill-card-pill-row.js";
+import { SkillTypeBadge as i } from "./skill-type-badge.js";
+import { SKILL_CATEGORY_LABEL_KEYS as a, getSkillCategory as o } from "../../../utils/skill-category.js";
 import "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/features/skills/build-skill-pills.tsx
-function c(e, t, n) {
+function l(e, t, n) {
 	if (e) return `${e}-${t}-${n}`;
 }
-function l(l, u, d = {}) {
-	let { variant: f = "card", testIdPrefix: p } = d, m = a(l), h = [{
-		id: `type-${l.type}`,
-		node: /* @__PURE__ */ o(r, { type: l.type })
+function u(u, d, f = {}) {
+	let { variant: p = "card", testIdPrefix: m } = f, h = o(u), g = [{
+		id: `type-${u.type}`,
+		node: /* @__PURE__ */ s(i, { type: u.type })
 	}];
-	if (m !== "other" && h.push({
-		id: `category-${m}`,
-		node: /* @__PURE__ */ o("span", {
-			"data-testid": c(p, l.name, "category") ?? `skill-category-${l.name}`,
-			className: n,
-			children: u(i[m])
+	if (n(u.name) && g.push({
+		id: "recommended",
+		node: /* @__PURE__ */ s("span", {
+			"data-testid": l(m, u.name, "recommended") ?? `skill-recommended-${u.name}`,
+			className: r,
+			children: d(e.SETTINGS$SKILLS_RECOMMENDED)
 		})
-	}), l.version && h.push({
-		id: `version-${l.version}`,
-		node: /* @__PURE__ */ o("span", {
-			"data-testid": c(p, l.name, "version") ?? `skill-version-${l.name}`,
-			className: n,
-			children: u(e.SETTINGS$SKILLS_VERSION, { version: l.version })
+	}), h !== "other" && g.push({
+		id: `category-${h}`,
+		node: /* @__PURE__ */ s("span", {
+			"data-testid": l(m, u.name, "category") ?? `skill-category-${u.name}`,
+			className: r,
+			children: d(a[h])
 		})
-	}), f === "detail" && l.license && h.push({
-		id: `license-${l.license}`,
-		node: /* @__PURE__ */ o("span", {
-			"data-testid": c(p, l.name, "license"),
-			className: n,
-			children: l.license
+	}), u.version && g.push({
+		id: `version-${u.version}`,
+		node: /* @__PURE__ */ s("span", {
+			"data-testid": l(m, u.name, "version") ?? `skill-version-${u.name}`,
+			className: r,
+			children: d(e.SETTINGS$SKILLS_VERSION, { version: u.version })
 		})
-	}), f === "detail" && l.compatibility && h.push({
-		id: `compatibility-${l.compatibility}`,
-		node: /* @__PURE__ */ o("span", {
-			"data-testid": c(p, l.name, "compatibility"),
-			className: n,
-			children: l.compatibility
+	}), p === "detail" && u.license && g.push({
+		id: `license-${u.license}`,
+		node: /* @__PURE__ */ s("span", {
+			"data-testid": l(m, u.name, "license"),
+			className: r,
+			children: u.license
 		})
-	}), l.disable_model_invocation && h.push({
-		id: "disable-model-invocation",
+	}), p === "detail" && u.compatibility && g.push({
+		id: `compatibility-${u.compatibility}`,
 		node: /* @__PURE__ */ s("span", {
-			"data-testid": c(p, l.name, "disable-model-invocation") ?? `skill-disable-model-invocation-${l.name}`,
+			"data-testid": l(m, u.name, "compatibility"),
+			className: r,
+			children: u.compatibility
+		})
+	}), u.disable_model_invocation && g.push({
+		id: "disable-model-invocation",
+		node: /* @__PURE__ */ c("span", {
+			"data-testid": l(m, u.name, "disable-model-invocation") ?? `skill-disable-model-invocation-${u.name}`,
 			className: "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border border-[rgba(248,113,113,0.35)] bg-[rgba(248,113,113,0.12)] px-2 py-0.5 text-[11px] font-medium leading-4 text-[#fca5a5]",
-			children: [/* @__PURE__ */ o("span", { className: "size-1.5 rounded-full bg-[#fca5a5]" }), u(e.SETTINGS$SKILLS_DISABLE_MODEL_INVOCATION)]
+			children: [/* @__PURE__ */ s("span", { className: "size-1.5 rounded-full bg-[#fca5a5]" }), d(e.SETTINGS$SKILLS_DISABLE_MODEL_INVOCATION)]
 		})
-	}), f === "detail" && l.allowed_tools) for (let e of l.allowed_tools) h.push({
+	}), p === "detail" && u.allowed_tools) for (let e of u.allowed_tools) g.push({
 		id: `allowed-tool-${e}`,
-		node: /* @__PURE__ */ o("span", {
-			"data-testid": c(p, l.name, `tool-${e}`),
-			className: t(n, "font-mono"),
+		node: /* @__PURE__ */ s("span", {
+			"data-testid": l(m, u.name, `tool-${e}`),
+			className: t(r, "font-mono"),
 			children: e
 		})
 	});
-	if (f === "detail" && l.metadata) for (let [e, t] of Object.entries(l.metadata)) h.push({
+	if (p === "detail" && u.metadata) for (let [e, t] of Object.entries(u.metadata)) g.push({
 		id: `metadata-${e}`,
-		node: /* @__PURE__ */ s("span", {
-			"data-testid": c(p, l.name, `metadata-${e}`),
-			className: n,
+		node: /* @__PURE__ */ c("span", {
+			"data-testid": l(m, u.name, `metadata-${e}`),
+			className: r,
 			children: [
-				/* @__PURE__ */ s("span", {
+				/* @__PURE__ */ c("span", {
 					className: "font-mono text-[10px] text-tertiary-light",
 					children: [e, ":"]
 				}),
@@ -72,17 +80,17 @@ function l(l, u, d = {}) {
 			]
 		})
 	});
-	for (let e of l.triggers ?? []) h.push({
+	for (let e of u.triggers ?? []) g.push({
 		id: `trigger-${e}`,
-		node: /* @__PURE__ */ o("span", {
-			"data-testid": c(p, l.name, `trigger-${e}`),
-			className: n,
+		node: /* @__PURE__ */ s("span", {
+			"data-testid": l(m, u.name, `trigger-${e}`),
+			className: r,
 			children: e
 		})
 	});
-	return h;
+	return g;
 }
 //#endregion
-export { l as buildSkillPills };
+export { u as buildSkillPills };
 
 //# sourceMappingURL=build-skill-pills.js.map

package/dist/components/features/skills/build-skill-pills.js.map

@@ -1 +1 @@
-{"version":3,"file":"build-skill-pills.js","names":[],"sources":["../../../../src/components/features/skills/build-skill-pills.tsx"],"sourcesContent":["import React from \"react\";\nimport type { TFunction } from \"i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillInfo } from \"#/types/settings\";\nimport { cn } from \"#/utils/utils\";\nimport { SkillTypeBadge } from \"./skill-type-badge\";\nimport {\n  SKILL_CARD_PILL_CLASS,\n  type SkillCardPill,\n} from \"./skill-card-pill-row\";\nimport {\n  getSkillCategory,\n  SKILL_CATEGORY_LABEL_KEYS,\n  UNCATEGORIZED_SKILL_CATEGORY,\n} from \"#/utils/skill-category\";\n\ntype SkillPillVariant = \"card\" | \"detail\";\n\ninterface BuildSkillPillsOptions {\n  variant?: SkillPillVariant;\n  testIdPrefix?: string;\n}\n\nfunction pillTestId(\n  prefix: string | undefined,\n  skillName: string,\n  suffix: string,\n) {\n  if (prefix) {\n    return `${prefix}-${skillName}-${suffix}`;\n  }\n  return undefined;\n}\n\nexport function buildSkillPills(\n  skill: SkillInfo,\n  translate: TFunction,\n  options: BuildSkillPillsOptions = {},\n): SkillCardPill[] {\n  const { variant = \"card\", testIdPrefix } = options;\n  const category = getSkillCategory(skill);\n  const pills: SkillCardPill[] = [\n    {\n      id: `type-${skill.type}`,\n      node: <SkillTypeBadge type={skill.type} />,\n    },\n  ];\n\n  // An \"Other\" pill says nothing, and every local skill would carry one:\n  // only the catalog assigns categories.\n  if (category !== UNCATEGORIZED_SKILL_CATEGORY) {\n    pills.push({\n      id: `category-${category}`,\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"category\") ??\n            `skill-category-${skill.name}`\n          }\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {translate(SKILL_CATEGORY_LABEL_KEYS[category])}\n        </span>\n      ),\n    });\n  }\n\n  if (skill.version) {\n    pills.push({\n      id: `version-${skill.version}`,\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"version\") ??\n            `skill-version-${skill.name}`\n          }\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {translate(I18nKey.SETTINGS$SKILLS_VERSION, {\n            version: skill.version,\n          })}\n        </span>\n      ),\n    });\n  }\n\n  if (variant === \"detail\" && skill.license) {\n    pills.push({\n      id: `license-${skill.license}`,\n      node: (\n        <span\n          data-testid={pillTestId(testIdPrefix, skill.name, \"license\")}\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {skill.license}\n        </span>\n      ),\n    });\n  }\n\n  if (variant === \"detail\" && skill.compatibility) {\n    pills.push({\n      id: `compatibility-${skill.compatibility}`,\n      node: (\n        <span\n          data-testid={pillTestId(testIdPrefix, skill.name, \"compatibility\")}\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {skill.compatibility}\n        </span>\n      ),\n    });\n  }\n\n  if (skill.disable_model_invocation) {\n    pills.push({\n      id: \"disable-model-invocation\",\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"disable-model-invocation\") ??\n            `skill-disable-model-invocation-${skill.name}`\n          }\n          className=\"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border border-[rgba(248,113,113,0.35)] bg-[rgba(248,113,113,0.12)] px-2 py-0.5 text-[11px] font-medium leading-4 text-[#fca5a5]\"\n        >\n          <span className=\"size-1.5 rounded-full bg-[#fca5a5]\" />\n          {translate(I18nKey.SETTINGS$SKILLS_DISABLE_MODEL_INVOCATION)}\n        </span>\n      ),\n    });\n  }\n\n  if (variant === \"detail\" && skill.allowed_tools) {\n    for (const tool of skill.allowed_tools) {\n      pills.push({\n        id: `allowed-tool-${tool}`,\n        node: (\n          <span\n            data-testid={pillTestId(testIdPrefix, skill.name, `tool-${tool}`)}\n            className={cn(SKILL_CARD_PILL_CLASS, \"font-mono\")}\n          >\n            {tool}\n          </span>\n        ),\n      });\n    }\n  }\n\n  if (variant === \"detail\" && skill.metadata) {\n    for (const [key, value] of Object.entries(skill.metadata)) {\n      pills.push({\n        id: `metadata-${key}`,\n        node: (\n          <span\n            data-testid={pillTestId(\n              testIdPrefix,\n              skill.name,\n              `metadata-${key}`,\n            )}\n            className={SKILL_CARD_PILL_CLASS}\n          >\n            <span className=\"font-mono text-[10px] text-tertiary-light\">\n              {key}:\n            </span>{\" \"}\n            {value}\n          </span>\n        ),\n      });\n    }\n  }\n\n  for (const trigger of skill.triggers ?? []) {\n    pills.push({\n      id: `trigger-${trigger}`,\n      node: (\n        <span\n          data-testid={pillTestId(\n            testIdPrefix,\n            skill.name,\n            `trigger-${trigger}`,\n          )}\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {trigger}\n        </span>\n      ),\n    });\n  }\n\n  return pills;\n}\n"],"mappings":";;;;;;;;AAuBA,SAAS,EACP,GACA,GACA,GACA;CACA,IAAI,GACF,OAAO,GAAG,EAAO,GAAG,EAAU,GAAG;AAGrC;AAEA,SAAgB,EACd,GACA,GACA,IAAkC,CAAC,GAClB;CACjB,IAAM,EAAE,aAAU,QAAQ,oBAAiB,GACrC,IAAW,EAAiB,CAAK,GACjC,IAAyB,CAC7B;EACE,IAAI,QAAQ,EAAM;EAClB,MAAM,kBAAC,GAAD,EAAgB,MAAM,EAAM,KAAO,CAAA;CAC3C,CACF;CAsFA,IAlFI,MAAA,WACF,EAAM,KAAK;EACT,IAAI,YAAY;EAChB,MACE,kBAAC,QAAD;GACE,eACE,EAAW,GAAc,EAAM,MAAM,UAAU,KAC/C,kBAAkB,EAAM;GAE1B,WAAW;aAEV,EAAU,EAA0B,EAAS;EAC1C,CAAA;CAEV,CAAC,GAGC,EAAM,WACR,EAAM,KAAK;EACT,IAAI,WAAW,EAAM;EACrB,MACE,kBAAC,QAAD;GACE,eACE,EAAW,GAAc,EAAM,MAAM,SAAS,KAC9C,iBAAiB,EAAM;GAEzB,WAAW;aAEV,EAAU,EAAQ,yBAAyB,EAC1C,SAAS,EAAM,QACjB,CAAC;EACG,CAAA;CAEV,CAAC,GAGC,MAAY,YAAY,EAAM,WAChC,EAAM,KAAK;EACT,IAAI,WAAW,EAAM;EACrB,MACE,kBAAC,QAAD;GACE,eAAa,EAAW,GAAc,EAAM,MAAM,SAAS;GAC3D,WAAW;aAEV,EAAM;EACH,CAAA;CAEV,CAAC,GAGC,MAAY,YAAY,EAAM,iBAChC,EAAM,KAAK;EACT,IAAI,iBAAiB,EAAM;EAC3B,MACE,kBAAC,QAAD;GACE,eAAa,EAAW,GAAc,EAAM,MAAM,eAAe;GACjE,WAAW;aAEV,EAAM;EACH,CAAA;CAEV,CAAC,GAGC,EAAM,4BACR,EAAM,KAAK;EACT,IAAI;EACJ,MACE,kBAAC,QAAD;GACE,eACE,EAAW,GAAc,EAAM,MAAM,0BAA0B,KAC/D,kCAAkC,EAAM;GAE1C,WAAU;aALZ,CAOE,kBAAC,QAAD,EAAM,WAAU,qCAAsC,CAAA,GACrD,EAAU,EAAQ,wCAAwC,CACvD;;CAEV,CAAC,GAGC,MAAY,YAAY,EAAM,eAChC,KAAK,IAAM,KAAQ,EAAM,eACvB,EAAM,KAAK;EACT,IAAI,gBAAgB;EACpB,MACE,kBAAC,QAAD;GACE,eAAa,EAAW,GAAc,EAAM,MAAM,QAAQ,GAAM;GAChE,WAAW,EAAG,GAAuB,WAAW;aAE/C;EACG,CAAA;CAEV,CAAC;CAIL,IAAI,MAAY,YAAY,EAAM,UAChC,KAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,EAAM,QAAQ,GACtD,EAAM,KAAK;EACT,IAAI,YAAY;EAChB,MACE,kBAAC,QAAD;GACE,eAAa,EACX,GACA,EAAM,MACN,YAAY,GACd;GACA,WAAW;aANb;IAQE,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACG,GAAI,GACD;;IAAE;IACP;GACG;;CAEV,CAAC;CAIL,KAAK,IAAM,KAAW,EAAM,YAAY,CAAC,GACvC,EAAM,KAAK;EACT,IAAI,WAAW;EACf,MACE,kBAAC,QAAD;GACE,eAAa,EACX,GACA,EAAM,MACN,WAAW,GACb;GACA,WAAW;aAEV;EACG,CAAA;CAEV,CAAC;CAGH,OAAO;AACT"}
+{"version":3,"file":"build-skill-pills.js","names":[],"sources":["../../../../src/components/features/skills/build-skill-pills.tsx"],"sourcesContent":["import React from \"react\";\nimport type { TFunction } from \"i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { SkillInfo } from \"#/types/settings\";\nimport { cn } from \"#/utils/utils\";\nimport { SkillTypeBadge } from \"./skill-type-badge\";\nimport {\n  SKILL_CARD_PILL_CLASS,\n  type SkillCardPill,\n} from \"./skill-card-pill-row\";\nimport {\n  getSkillCategory,\n  SKILL_CATEGORY_LABEL_KEYS,\n  UNCATEGORIZED_SKILL_CATEGORY,\n} from \"#/utils/skill-category\";\nimport { isRecommendedSkill } from \"#/utils/skill-enablement\";\n\ntype SkillPillVariant = \"card\" | \"detail\";\n\ninterface BuildSkillPillsOptions {\n  variant?: SkillPillVariant;\n  testIdPrefix?: string;\n}\n\nfunction pillTestId(\n  prefix: string | undefined,\n  skillName: string,\n  suffix: string,\n) {\n  if (prefix) {\n    return `${prefix}-${skillName}-${suffix}`;\n  }\n  return undefined;\n}\n\nexport function buildSkillPills(\n  skill: SkillInfo,\n  translate: TFunction,\n  options: BuildSkillPillsOptions = {},\n): SkillCardPill[] {\n  const { variant = \"card\", testIdPrefix } = options;\n  const category = getSkillCategory(skill);\n  const pills: SkillCardPill[] = [\n    {\n      id: `type-${skill.type}`,\n      node: <SkillTypeBadge type={skill.type} />,\n    },\n  ];\n\n  if (isRecommendedSkill(skill.name)) {\n    pills.push({\n      id: \"recommended\",\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"recommended\") ??\n            `skill-recommended-${skill.name}`\n          }\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {translate(I18nKey.SETTINGS$SKILLS_RECOMMENDED)}\n        </span>\n      ),\n    });\n  }\n\n  // An \"Other\" pill says nothing, and every local skill would carry one:\n  // only the catalog assigns categories.\n  if (category !== UNCATEGORIZED_SKILL_CATEGORY) {\n    pills.push({\n      id: `category-${category}`,\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"category\") ??\n            `skill-category-${skill.name}`\n          }\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {translate(SKILL_CATEGORY_LABEL_KEYS[category])}\n        </span>\n      ),\n    });\n  }\n\n  if (skill.version) {\n    pills.push({\n      id: `version-${skill.version}`,\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"version\") ??\n            `skill-version-${skill.name}`\n          }\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {translate(I18nKey.SETTINGS$SKILLS_VERSION, {\n            version: skill.version,\n          })}\n        </span>\n      ),\n    });\n  }\n\n  if (variant === \"detail\" && skill.license) {\n    pills.push({\n      id: `license-${skill.license}`,\n      node: (\n        <span\n          data-testid={pillTestId(testIdPrefix, skill.name, \"license\")}\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {skill.license}\n        </span>\n      ),\n    });\n  }\n\n  if (variant === \"detail\" && skill.compatibility) {\n    pills.push({\n      id: `compatibility-${skill.compatibility}`,\n      node: (\n        <span\n          data-testid={pillTestId(testIdPrefix, skill.name, \"compatibility\")}\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {skill.compatibility}\n        </span>\n      ),\n    });\n  }\n\n  if (skill.disable_model_invocation) {\n    pills.push({\n      id: \"disable-model-invocation\",\n      node: (\n        <span\n          data-testid={\n            pillTestId(testIdPrefix, skill.name, \"disable-model-invocation\") ??\n            `skill-disable-model-invocation-${skill.name}`\n          }\n          className=\"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full border border-[rgba(248,113,113,0.35)] bg-[rgba(248,113,113,0.12)] px-2 py-0.5 text-[11px] font-medium leading-4 text-[#fca5a5]\"\n        >\n          <span className=\"size-1.5 rounded-full bg-[#fca5a5]\" />\n          {translate(I18nKey.SETTINGS$SKILLS_DISABLE_MODEL_INVOCATION)}\n        </span>\n      ),\n    });\n  }\n\n  if (variant === \"detail\" && skill.allowed_tools) {\n    for (const tool of skill.allowed_tools) {\n      pills.push({\n        id: `allowed-tool-${tool}`,\n        node: (\n          <span\n            data-testid={pillTestId(testIdPrefix, skill.name, `tool-${tool}`)}\n            className={cn(SKILL_CARD_PILL_CLASS, \"font-mono\")}\n          >\n            {tool}\n          </span>\n        ),\n      });\n    }\n  }\n\n  if (variant === \"detail\" && skill.metadata) {\n    for (const [key, value] of Object.entries(skill.metadata)) {\n      pills.push({\n        id: `metadata-${key}`,\n        node: (\n          <span\n            data-testid={pillTestId(\n              testIdPrefix,\n              skill.name,\n              `metadata-${key}`,\n            )}\n            className={SKILL_CARD_PILL_CLASS}\n          >\n            <span className=\"font-mono text-[10px] text-tertiary-light\">\n              {key}:\n            </span>{\" \"}\n            {value}\n          </span>\n        ),\n      });\n    }\n  }\n\n  for (const trigger of skill.triggers ?? []) {\n    pills.push({\n      id: `trigger-${trigger}`,\n      node: (\n        <span\n          data-testid={pillTestId(\n            testIdPrefix,\n            skill.name,\n            `trigger-${trigger}`,\n          )}\n          className={SKILL_CARD_PILL_CLASS}\n        >\n          {trigger}\n        </span>\n      ),\n    });\n  }\n\n  return pills;\n}\n"],"mappings":";;;;;;;;;AAwBA,SAAS,EACP,GACA,GACA,GACA;CACA,IAAI,GACF,OAAO,GAAG,EAAO,GAAG,EAAU,GAAG;AAGrC;AAEA,SAAgB,EACd,GACA,GACA,IAAkC,CAAC,GAClB;CACjB,IAAM,EAAE,aAAU,QAAQ,oBAAiB,GACrC,IAAW,EAAiB,CAAK,GACjC,IAAyB,CAC7B;EACE,IAAI,QAAQ,EAAM;EAClB,MAAM,kBAAC,GAAD,EAAgB,MAAM,EAAM,KAAO,CAAA;CAC3C,CACF;CAuGA,IArGI,EAAmB,EAAM,IAAI,KAC/B,EAAM,KAAK;EACT,IAAI;EACJ,MACE,kBAAC,QAAD;GACE,eACE,EAAW,GAAc,EAAM,MAAM,aAAa,KAClD,qBAAqB,EAAM;GAE7B,WAAW;aAEV,EAAU,EAAQ,2BAA2B;EAC1C,CAAA;CAEV,CAAC,GAKC,MAAA,WACF,EAAM,KAAK;EACT,IAAI,YAAY;EAChB,MACE,kBAAC,QAAD;GACE,eACE,EAAW,GAAc,EAAM,MAAM,UAAU,KAC/C,kBAAkB,EAAM;GAE1B,WAAW;aAEV,EAAU,EAA0B,EAAS;EAC1C,CAAA;CAEV,CAAC,GAGC,EAAM,WACR,EAAM,KAAK;EACT,IAAI,WAAW,EAAM;EACrB,MACE,kBAAC,QAAD;GACE,eACE,EAAW,GAAc,EAAM,MAAM,SAAS,KAC9C,iBAAiB,EAAM;GAEzB,WAAW;aAEV,EAAU,EAAQ,yBAAyB,EAC1C,SAAS,EAAM,QACjB,CAAC;EACG,CAAA;CAEV,CAAC,GAGC,MAAY,YAAY,EAAM,WAChC,EAAM,KAAK;EACT,IAAI,WAAW,EAAM;EACrB,MACE,kBAAC,QAAD;GACE,eAAa,EAAW,GAAc,EAAM,MAAM,SAAS;GAC3D,WAAW;aAEV,EAAM;EACH,CAAA;CAEV,CAAC,GAGC,MAAY,YAAY,EAAM,iBAChC,EAAM,KAAK;EACT,IAAI,iBAAiB,EAAM;EAC3B,MACE,kBAAC,QAAD;GACE,eAAa,EAAW,GAAc,EAAM,MAAM,eAAe;GACjE,WAAW;aAEV,EAAM;EACH,CAAA;CAEV,CAAC,GAGC,EAAM,4BACR,EAAM,KAAK;EACT,IAAI;EACJ,MACE,kBAAC,QAAD;GACE,eACE,EAAW,GAAc,EAAM,MAAM,0BAA0B,KAC/D,kCAAkC,EAAM;GAE1C,WAAU;aALZ,CAOE,kBAAC,QAAD,EAAM,WAAU,qCAAsC,CAAA,GACrD,EAAU,EAAQ,wCAAwC,CACvD;;CAEV,CAAC,GAGC,MAAY,YAAY,EAAM,eAChC,KAAK,IAAM,KAAQ,EAAM,eACvB,EAAM,KAAK;EACT,IAAI,gBAAgB;EACpB,MACE,kBAAC,QAAD;GACE,eAAa,EAAW,GAAc,EAAM,MAAM,QAAQ,GAAM;GAChE,WAAW,EAAG,GAAuB,WAAW;aAE/C;EACG,CAAA;CAEV,CAAC;CAIL,IAAI,MAAY,YAAY,EAAM,UAChC,KAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,EAAM,QAAQ,GACtD,EAAM,KAAK;EACT,IAAI,YAAY;EAChB,MACE,kBAAC,QAAD;GACE,eAAa,EACX,GACA,EAAM,MACN,YAAY,GACd;GACA,WAAW;aANb;IAQE,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACG,GAAI,GACD;;IAAE;IACP;GACG;;CAEV,CAAC;CAIL,KAAK,IAAM,KAAW,EAAM,YAAY,CAAC,GACvC,EAAM,KAAK;EACT,IAAI,WAAW;EACf,MACE,kBAAC,QAAD;GACE,eAAa,EACX,GACA,EAAM,MACN,WAAW,GACb;GACA,WAAW;aAEV;EACG,CAAA;CAEV,CAAC;CAGH,OAAO;AACT"}

package/dist/components/features/skills/extensions-navigation.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../node_modules/lucide-react/dist/esm/icons/external-link.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../api/backend-registry/active-store.cjs"),a=require("../../../contexts/active-backend-context.cjs"),o=require("../../shared/navigation-link.cjs"),s=require("../../../icons/skills.cjs"),c=require("../sidebar/sidebar-layout.cjs"),l=require("../settings/backend-synced-settings-badge.cjs"),u=require("../../../icons/server-process.cjs");let d=require("react/jsx-runtime");var f=`/skills`,p=`/plugins`,m=[{to:`/mcp`,label:`MCP Servers`,icon:(0,d.jsx)(u.default,{width:16,height:16}),end:!0},{to:`/skills`,label:`Skills`,icon:(0,d.jsx)(s.default,{width:16,height:16,"aria-hidden":`true`}),end:!0},{to:`/plugins`,label:`Plugins`,icon:(0,d.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,width:16,height:16,"aria-hidden":`true`,children:[(0,d.jsx)(`path`,{d:`M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z`}),(0,d.jsx)(`path`,{d:`m3.3 7 8.7 5 8.7-5`}),(0,d.jsx)(`path`,{d:`M12 22V12`})]}),end:!0}];function h(){let{t:s}=e.useTranslation(`openhands`),{active:u}=a.useActiveBackendContext(),{backend:h}=u,g=!i.isNoBackend(h)&&h.kind===`cloud`;return(0,d.jsxs)(`aside`,{"data-testid":`extensions-navbar-desktop`,className:`hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start`,children:[(0,d.jsx)(`span`,{className:`px-2 text-sm font-normal text-white`,children:s(t.I18nKey.NAV$CUSTOMIZE)}),(0,d.jsx)(`div`,{className:`flex flex-col gap-0.5 pt-0.5`,children:m.filter(e=>!(e.to===p&&g)).map(e=>{let i=e.to===f&&g,a=(0,d.jsx)(`span`,{className:`shrink-0 flex items-center justify-center`,children:e.icon}),l=(0,d.jsx)(`span`,{className:`truncate`,children:i?s(t.I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK):e.label}),u=e.comingSoon&&(0,d.jsx)(`span`,{className:`ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]`,children:s(t.I18nKey.NAV$COMING_SOON)});if(i){let t=`${h.host.replace(/\/+$/,``)}/settings/skills`;return(0,d.jsxs)(`a`,{"data-testid":`sidebar-extensions-${e.to}`,href:t,target:`_blank`,rel:`noopener noreferrer`,className:r.cn(c.sidebarNavRowClassName(),`truncate`,c.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[a,l,(0,d.jsx)(n.ExternalLink,{className:`ml-auto size-4 shrink-0 text-[var(--oh-muted)]`,"aria-hidden":!0})]},e.to)}return(0,d.jsxs)(o.NavigationLink,{to:e.to,end:e.end,"data-testid":`sidebar-extensions-${e.to}`,className:({isActive:e})=>r.cn(c.sidebarNavRowClassName(),`truncate`,e?c.SIDEBAR_ROW_INTERACTIVE_CLASS.active:c.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[a,l,u]},e.to)})}),(0,d.jsx)(`div`,{className:`px-2 pt-3`,children:(0,d.jsx)(l.BackendSyncedSettingsBadge,{})})]})}exports.ExtensionsNavigation=h;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../node_modules/lucide-react/dist/esm/icons/blocks.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/external-link.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../api/backend-registry/active-store.cjs"),o=require("../../../contexts/active-backend-context.cjs"),s=require("../../shared/navigation-link.cjs"),c=require("../../../icons/skills.cjs"),l=require("../sidebar/sidebar-layout.cjs"),u=require("../settings/backend-synced-settings-badge.cjs"),d=require("../../../icons/server-process.cjs");let f=require("react/jsx-runtime");var p=`/skills`,m=new Set([`/plugins`,`/extensions`]),h=[{to:`/mcp`,label:`MCP Servers`,icon:(0,f.jsx)(d.default,{width:16,height:16}),end:!0},{to:`/skills`,label:`Skills`,icon:(0,f.jsx)(c.default,{width:16,height:16,"aria-hidden":`true`}),end:!0},{to:`/plugins`,label:`Plugins`,icon:(0,f.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,width:16,height:16,"aria-hidden":`true`,children:[(0,f.jsx)(`path`,{d:`M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z`}),(0,f.jsx)(`path`,{d:`m3.3 7 8.7 5 8.7-5`}),(0,f.jsx)(`path`,{d:`M12 22V12`})]}),end:!0},{to:`/extensions`,label:`Extensions`,icon:(0,f.jsx)(n.Blocks,{width:16,height:16,"aria-hidden":`true`}),end:!0}];function g(){let{t:n}=e.useTranslation(`openhands`),{active:c}=o.useActiveBackendContext(),{backend:d}=c,g=!a.isNoBackend(d)&&d.kind===`cloud`;return(0,f.jsxs)(`aside`,{"data-testid":`extensions-navbar-desktop`,className:`hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start`,children:[(0,f.jsx)(`span`,{className:`px-2 text-sm font-normal text-white`,children:n(t.I18nKey.NAV$CUSTOMIZE)}),(0,f.jsx)(`div`,{className:`flex flex-col gap-0.5 pt-0.5`,children:h.filter(e=>!(m.has(e.to)&&g)).map(e=>{let a=e.to===p&&g,o=(0,f.jsx)(`span`,{className:`shrink-0 flex items-center justify-center`,children:e.icon}),c=(0,f.jsx)(`span`,{className:`truncate`,children:a?n(t.I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK):e.label}),u=e.comingSoon&&(0,f.jsx)(`span`,{className:`ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]`,children:n(t.I18nKey.NAV$COMING_SOON)});if(a){let t=`${d.host.replace(/\/+$/,``)}/settings/skills`;return(0,f.jsxs)(`a`,{"data-testid":`sidebar-extensions-${e.to}`,href:t,target:`_blank`,rel:`noopener noreferrer`,className:i.cn(l.sidebarNavRowClassName(),`truncate`,l.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[o,c,(0,f.jsx)(r.ExternalLink,{className:`ml-auto size-4 shrink-0 text-[var(--oh-muted)]`,"aria-hidden":!0})]},e.to)}return(0,f.jsxs)(s.NavigationLink,{to:e.to,end:e.end,"data-testid":`sidebar-extensions-${e.to}`,className:({isActive:e})=>i.cn(l.sidebarNavRowClassName(),`truncate`,e?l.SIDEBAR_ROW_INTERACTIVE_CLASS.active:l.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[o,c,u]},e.to)})}),(0,f.jsx)(`div`,{className:`px-2 pt-3`,children:(0,f.jsx)(u.BackendSyncedSettingsBadge,{})})]})}exports.ExtensionsNavigation=g;
 //# sourceMappingURL=extensions-navigation.cjs.map

package/dist/components/features/skills/extensions-navigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"extensions-navigation.cjs","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { ExternalLink } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\n\n/** Only the Skills item points to a cloud-hosted page today. */\nconst CLOUD_LINKED_EXTENSION_PATH = \"/skills\";\n/** Plugins are not available on Cloud backends, so this item is hidden there. */\nconst CLOUD_HIDDEN_EXTENSION_PATH = \"/plugins\";\n\ninterface ExtensionNavItem {\n  to: string;\n  label: string;\n  icon: React.ReactElement;\n  end?: boolean;\n  comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n  {\n    to: \"/mcp\",\n    label: \"MCP Servers\",\n    icon: <ServerProcessIcon width={16} height={16} />,\n    end: true,\n  },\n  {\n    to: \"/skills\",\n    label: \"Skills\",\n    icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n    end: true,\n  },\n  {\n    to: \"/plugins\",\n    label: \"Plugins\",\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        width={16}\n        height={16}\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n        <path d=\"m3.3 7 8.7 5 8.7-5\" />\n        <path d=\"M12 22V12\" />\n      </svg>\n    ),\n    end: true,\n  },\n];\n\nexport function ExtensionsNavigation() {\n  const { t } = useTranslation(\"openhands\");\n  const { active } = useActiveBackendContext();\n  const { backend } = active;\n  const isCloudBackend = !isNoBackend(backend) && backend.kind === \"cloud\";\n\n  return (\n    <aside\n      data-testid=\"extensions-navbar-desktop\"\n      className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n    >\n      <span className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.NAV$CUSTOMIZE)}\n      </span>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {EXTENSIONS_NAV_ITEMS.filter(\n          (item) =>\n            !(item.to === CLOUD_HIDDEN_EXTENSION_PATH && isCloudBackend),\n        ).map((item) => {\n          const isCloudSkillsLink =\n            item.to === CLOUD_LINKED_EXTENSION_PATH && isCloudBackend;\n          const baseRow = (\n            <span className=\"shrink-0 flex items-center justify-center\">\n              {item.icon}\n            </span>\n          );\n          const label = (\n            <span className=\"truncate\">\n              {isCloudSkillsLink\n                ? t(I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK)\n                : item.label}\n            </span>\n          );\n          const comingSoonBadge = item.comingSoon && (\n            <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n              {t(I18nKey.NAV$COMING_SOON)}\n            </span>\n          );\n\n          if (isCloudSkillsLink) {\n            const cloudSkillsUrl = `${backend.host.replace(/\\/+$/, \"\")}/settings/skills`;\n            return (\n              <a\n                key={item.to}\n                data-testid={`sidebar-extensions-${item.to}`}\n                href={cloudSkillsUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className={cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )}\n              >\n                {baseRow}\n                {label}\n                <ExternalLink\n                  className=\"ml-auto size-4 shrink-0 text-[var(--oh-muted)]\"\n                  aria-hidden\n                />\n              </a>\n            );\n          }\n\n          return (\n            <NavigationLink\n              key={item.to}\n              to={item.to}\n              end={item.end}\n              data-testid={`sidebar-extensions-${item.to}`}\n              className={({ isActive }) =>\n                cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  isActive\n                    ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n                    : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )\n              }\n            >\n              {baseRow}\n              {label}\n              {comingSoonBadge}\n            </NavigationLink>\n          );\n        })}\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":"0qBAgBA,IAAM,EAA8B,UAE9B,EAA8B,WAUvB,EAA2C,CACtD,CACE,GAAI,OACJ,MAAO,cACP,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAmB,MAAO,GAAI,OAAQ,EAAK,CAAA,EACjD,IAAK,EACP,EACA,CACE,GAAI,UACJ,MAAO,SACP,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAY,MAAO,GAAI,OAAQ,GAAI,cAAY,MAAQ,CAAA,EAC7D,IAAK,EACP,EACA,CACE,GAAI,WACJ,MAAO,UACP,MACE,EAAA,EAAA,MAAC,MAAD,CACE,MAAM,6BACN,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,MAAO,GACP,OAAQ,GACR,cAAY,gBAVd,EAYE,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,wHAA0H,CAAA,GAClI,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,oBAAsB,CAAA,GAC9B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,WAAa,CAAA,CAClB,IAEP,IAAK,EACP,CACF,EAEA,SAAgB,GAAuB,CACrC,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAE,UAAW,EAAA,wBAAwB,EACrC,CAAE,WAAY,EACd,EAAiB,CAAC,EAAA,YAAY,CAAO,GAAK,EAAQ,OAAS,QAEjE,OACE,EAAA,EAAA,MAAC,QAAD,CACE,cAAY,4BACZ,UAAU,yGAFZ,EAIE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,+CACb,EAAE,EAAA,QAAQ,aAAa,CACpB,CAAA,GACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,wCACZ,EAAqB,OACnB,GACC,EAAE,EAAK,KAAO,GAA+B,EACjD,EAAE,IAAK,GAAS,CACd,IAAM,EACJ,EAAK,KAAO,GAA+B,EACvC,GACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qDACb,EAAK,IACF,CAAA,EAEF,GACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBACb,EACG,EAAE,EAAA,QAAQ,qCAAqC,EAC/C,EAAK,KACL,CAAA,EAEF,EAAkB,EAAK,aAC3B,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,2IACb,EAAE,EAAA,QAAQ,eAAe,CACtB,CAAA,EAGR,GAAI,EAAmB,CACrB,IAAM,EAAiB,GAAG,EAAQ,KAAK,QAAQ,OAAQ,EAAE,EAAE,kBAC3D,OACE,EAAA,EAAA,MAAC,IAAD,CAEE,cAAa,sBAAsB,EAAK,KACxC,KAAM,EACN,OAAO,SACP,IAAI,sBACJ,UAAW,EAAA,GACT,EAAA,uBAAuB,EACvB,WACA,EAAA,8BAA8B,IAChC,WAVF,CAYG,EACA,GACD,EAAA,EAAA,KAAC,EAAA,aAAD,CACE,UAAU,iDACV,cAAA,EACD,CAAA,CACA,GAjBI,EAAK,EAiBT,CAEP,CAEA,OACE,EAAA,EAAA,MAAC,EAAA,eAAD,CAEE,GAAI,EAAK,GACT,IAAK,EAAK,IACV,cAAa,sBAAsB,EAAK,KACxC,WAAY,CAAE,cACZ,EAAA,GACE,EAAA,uBAAuB,EACvB,WACA,EACI,EAAA,8BAA8B,OAC9B,EAAA,8BAA8B,IACpC,WAZJ,CAeG,EACA,EACA,CACa,GAjBT,EAAK,EAiBI,CAEpB,CAAC,CACE,CAAA,GACL,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,2BAAD,CAA6B,CAAA,CAC1B,CAAA,CACA,GAEX"}
+{"version":3,"file":"extensions-navigation.cjs","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { Blocks, ExternalLink } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\n\n/** Only the Skills item points to a cloud-hosted page today. */\nconst CLOUD_LINKED_EXTENSION_PATH = \"/skills\";\n/** Backend-installed artifacts are not available on Cloud backends yet. */\nconst CLOUD_HIDDEN_EXTENSION_PATHS = new Set([\"/plugins\", \"/extensions\"]);\n\ninterface ExtensionNavItem {\n  to: string;\n  label: string;\n  icon: React.ReactElement;\n  end?: boolean;\n  comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n  {\n    to: \"/mcp\",\n    label: \"MCP Servers\",\n    icon: <ServerProcessIcon width={16} height={16} />,\n    end: true,\n  },\n  {\n    to: \"/skills\",\n    label: \"Skills\",\n    icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n    end: true,\n  },\n  {\n    to: \"/plugins\",\n    label: \"Plugins\",\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        width={16}\n        height={16}\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n        <path d=\"m3.3 7 8.7 5 8.7-5\" />\n        <path d=\"M12 22V12\" />\n      </svg>\n    ),\n    end: true,\n  },\n  {\n    to: \"/extensions\",\n    label: \"Extensions\",\n    icon: <Blocks width={16} height={16} aria-hidden=\"true\" />,\n    end: true,\n  },\n];\n\nexport function ExtensionsNavigation() {\n  const { t } = useTranslation(\"openhands\");\n  const { active } = useActiveBackendContext();\n  const { backend } = active;\n  const isCloudBackend = !isNoBackend(backend) && backend.kind === \"cloud\";\n\n  return (\n    <aside\n      data-testid=\"extensions-navbar-desktop\"\n      className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n    >\n      <span className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.NAV$CUSTOMIZE)}\n      </span>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {EXTENSIONS_NAV_ITEMS.filter(\n          (item) =>\n            !(CLOUD_HIDDEN_EXTENSION_PATHS.has(item.to) && isCloudBackend),\n        ).map((item) => {\n          const isCloudSkillsLink =\n            item.to === CLOUD_LINKED_EXTENSION_PATH && isCloudBackend;\n          const baseRow = (\n            <span className=\"shrink-0 flex items-center justify-center\">\n              {item.icon}\n            </span>\n          );\n          const label = (\n            <span className=\"truncate\">\n              {isCloudSkillsLink\n                ? t(I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK)\n                : item.label}\n            </span>\n          );\n          const comingSoonBadge = item.comingSoon && (\n            <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n              {t(I18nKey.NAV$COMING_SOON)}\n            </span>\n          );\n\n          if (isCloudSkillsLink) {\n            const cloudSkillsUrl = `${backend.host.replace(/\\/+$/, \"\")}/settings/skills`;\n            return (\n              <a\n                key={item.to}\n                data-testid={`sidebar-extensions-${item.to}`}\n                href={cloudSkillsUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className={cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )}\n              >\n                {baseRow}\n                {label}\n                <ExternalLink\n                  className=\"ml-auto size-4 shrink-0 text-[var(--oh-muted)]\"\n                  aria-hidden\n                />\n              </a>\n            );\n          }\n\n          return (\n            <NavigationLink\n              key={item.to}\n              to={item.to}\n              end={item.end}\n              data-testid={`sidebar-extensions-${item.to}`}\n              className={({ isActive }) =>\n                cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  isActive\n                    ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n                    : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )\n              }\n            >\n              {baseRow}\n              {label}\n              {comingSoonBadge}\n            </NavigationLink>\n          );\n        })}\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/skills/extensions-navigation.js

@@ -1,21 +1,22 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
-import { ExternalLink as n } from "../../../node_modules/lucide-react/dist/esm/icons/external-link.js";
-import { cn as r } from "../../../utils/utils.js";
-import { isNoBackend as i } from "../../../api/backend-registry/active-store.js";
-import { useActiveBackendContext as a } from "../../../contexts/active-backend-context.js";
-import { NavigationLink as o } from "../../shared/navigation-link.js";
-import s from "../../../icons/skills.js";
-import { SIDEBAR_ROW_INTERACTIVE_CLASS as c, sidebarNavRowClassName as l } from "../sidebar/sidebar-layout.js";
-import { BackendSyncedSettingsBadge as u } from "../settings/backend-synced-settings-badge.js";
-import d from "../../../icons/server-process.js";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Blocks as n } from "../../../node_modules/lucide-react/dist/esm/icons/blocks.js";
+import { ExternalLink as r } from "../../../node_modules/lucide-react/dist/esm/icons/external-link.js";
+import { cn as i } from "../../../utils/utils.js";
+import { isNoBackend as a } from "../../../api/backend-registry/active-store.js";
+import { useActiveBackendContext as o } from "../../../contexts/active-backend-context.js";
+import { NavigationLink as s } from "../../shared/navigation-link.js";
+import c from "../../../icons/skills.js";
+import { SIDEBAR_ROW_INTERACTIVE_CLASS as l, sidebarNavRowClassName as u } from "../sidebar/sidebar-layout.js";
+import { BackendSyncedSettingsBadge as d } from "../settings/backend-synced-settings-badge.js";
+import f from "../../../icons/server-process.js";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/features/skills/extensions-navigation.tsx
-var m = "/skills", h = "/plugins", g = [
+var h = "/skills", g = new Set(["/plugins", "/extensions"]), _ = [
 	{
 		to: "/mcp",
 		label: "MCP Servers",
-		icon: /* @__PURE__ */ f(d, {
+		icon: /* @__PURE__ */ p(f, {
 			width: 16,
 			height: 16
 		}),
@@ -24,7 +25,7 @@ var m = "/skills", h = "/plugins", g = [
 	{
 		to: "/skills",
 		label: "Skills",
-		icon: /* @__PURE__ */ f(s, {
+		icon: /* @__PURE__ */ p(c, {
 			width: 16,
 			height: 16,
 			"aria-hidden": "true"
@@ -34,7 +35,7 @@ var m = "/skills", h = "/plugins", g = [
 	{
 		to: "/plugins",
 		label: "Plugins",
-		icon: /* @__PURE__ */ p("svg", {
+		icon: /* @__PURE__ */ m("svg", {
 			xmlns: "http://www.w3.org/2000/svg",
 			viewBox: "0 0 24 24",
 			fill: "none",
@@ -46,76 +47,86 @@ var m = "/skills", h = "/plugins", g = [
 			height: 16,
 			"aria-hidden": "true",
 			children: [
-				/* @__PURE__ */ f("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
-				/* @__PURE__ */ f("path", { d: "m3.3 7 8.7 5 8.7-5" }),
-				/* @__PURE__ */ f("path", { d: "M12 22V12" })
+				/* @__PURE__ */ p("path", { d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" }),
+				/* @__PURE__ */ p("path", { d: "m3.3 7 8.7 5 8.7-5" }),
+				/* @__PURE__ */ p("path", { d: "M12 22V12" })
 			]
 		}),
 		end: !0
+	},
+	{
+		to: "/extensions",
+		label: "Extensions",
+		icon: /* @__PURE__ */ p(n, {
+			width: 16,
+			height: 16,
+			"aria-hidden": "true"
+		}),
+		end: !0
 	}
 ];
-function _() {
-	let { t: s } = e("openhands"), { active: d } = a(), { backend: _ } = d, v = !i(_) && _.kind === "cloud";
-	return /* @__PURE__ */ p("aside", {
+function v() {
+	let { t: n } = e("openhands"), { active: c } = o(), { backend: f } = c, v = !a(f) && f.kind === "cloud";
+	return /* @__PURE__ */ m("aside", {
 		"data-testid": "extensions-navbar-desktop",
 		className: "hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start",
 		children: [
-			/* @__PURE__ */ f("span", {
+			/* @__PURE__ */ p("span", {
 				className: "px-2 text-sm font-normal text-white",
-				children: s(t.NAV$CUSTOMIZE)
+				children: n(t.NAV$CUSTOMIZE)
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				className: "flex flex-col gap-0.5 pt-0.5",
-				children: g.filter((e) => !(e.to === h && v)).map((e) => {
-					let i = e.to === m && v, a = /* @__PURE__ */ f("span", {
+				children: _.filter((e) => !(g.has(e.to) && v)).map((e) => {
+					let a = e.to === h && v, o = /* @__PURE__ */ p("span", {
 						className: "shrink-0 flex items-center justify-center",
 						children: e.icon
-					}), u = /* @__PURE__ */ f("span", {
+					}), c = /* @__PURE__ */ p("span", {
 						className: "truncate",
-						children: i ? s(t.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK) : e.label
-					}), d = e.comingSoon && /* @__PURE__ */ f("span", {
+						children: a ? n(t.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK) : e.label
+					}), d = e.comingSoon && /* @__PURE__ */ p("span", {
 						className: "ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]",
-						children: s(t.NAV$COMING_SOON)
+						children: n(t.NAV$COMING_SOON)
 					});
-					if (i) {
-						let t = `${_.host.replace(/\/+$/, "")}/settings/skills`;
-						return /* @__PURE__ */ p("a", {
+					if (a) {
+						let t = `${f.host.replace(/\/+$/, "")}/settings/skills`;
+						return /* @__PURE__ */ m("a", {
 							"data-testid": `sidebar-extensions-${e.to}`,
 							href: t,
 							target: "_blank",
 							rel: "noopener noreferrer",
-							className: r(l(), "truncate", c.idle),
+							className: i(u(), "truncate", l.idle),
 							children: [
-								a,
-								u,
-								/* @__PURE__ */ f(n, {
+								o,
+								c,
+								/* @__PURE__ */ p(r, {
 									className: "ml-auto size-4 shrink-0 text-[var(--oh-muted)]",
 									"aria-hidden": !0
 								})
 							]
 						}, e.to);
 					}
-					return /* @__PURE__ */ p(o, {
+					return /* @__PURE__ */ m(s, {
 						to: e.to,
 						end: e.end,
 						"data-testid": `sidebar-extensions-${e.to}`,
-						className: ({ isActive: e }) => r(l(), "truncate", e ? c.active : c.idle),
+						className: ({ isActive: e }) => i(u(), "truncate", e ? l.active : l.idle),
 						children: [
-							a,
-							u,
+							o,
+							c,
 							d
 						]
 					}, e.to);
 				})
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				className: "px-2 pt-3",
-				children: /* @__PURE__ */ f(u, {})
+				children: /* @__PURE__ */ p(d, {})
 			})
 		]
 	});
 }
 //#endregion
-export { _ as ExtensionsNavigation };
+export { v as ExtensionsNavigation };
 
 //# sourceMappingURL=extensions-navigation.js.map

package/dist/components/features/skills/extensions-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"extensions-navigation.js","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { ExternalLink } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\n\n/** Only the Skills item points to a cloud-hosted page today. */\nconst CLOUD_LINKED_EXTENSION_PATH = \"/skills\";\n/** Plugins are not available on Cloud backends, so this item is hidden there. */\nconst CLOUD_HIDDEN_EXTENSION_PATH = \"/plugins\";\n\ninterface ExtensionNavItem {\n  to: string;\n  label: string;\n  icon: React.ReactElement;\n  end?: boolean;\n  comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n  {\n    to: \"/mcp\",\n    label: \"MCP Servers\",\n    icon: <ServerProcessIcon width={16} height={16} />,\n    end: true,\n  },\n  {\n    to: \"/skills\",\n    label: \"Skills\",\n    icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n    end: true,\n  },\n  {\n    to: \"/plugins\",\n    label: \"Plugins\",\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        width={16}\n        height={16}\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n        <path d=\"m3.3 7 8.7 5 8.7-5\" />\n        <path d=\"M12 22V12\" />\n      </svg>\n    ),\n    end: true,\n  },\n];\n\nexport function ExtensionsNavigation() {\n  const { t } = useTranslation(\"openhands\");\n  const { active } = useActiveBackendContext();\n  const { backend } = active;\n  const isCloudBackend = !isNoBackend(backend) && backend.kind === \"cloud\";\n\n  return (\n    <aside\n      data-testid=\"extensions-navbar-desktop\"\n      className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n    >\n      <span className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.NAV$CUSTOMIZE)}\n      </span>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {EXTENSIONS_NAV_ITEMS.filter(\n          (item) =>\n            !(item.to === CLOUD_HIDDEN_EXTENSION_PATH && isCloudBackend),\n        ).map((item) => {\n          const isCloudSkillsLink =\n            item.to === CLOUD_LINKED_EXTENSION_PATH && isCloudBackend;\n          const baseRow = (\n            <span className=\"shrink-0 flex items-center justify-center\">\n              {item.icon}\n            </span>\n          );\n          const label = (\n            <span className=\"truncate\">\n              {isCloudSkillsLink\n                ? t(I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK)\n                : item.label}\n            </span>\n          );\n          const comingSoonBadge = item.comingSoon && (\n            <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n              {t(I18nKey.NAV$COMING_SOON)}\n            </span>\n          );\n\n          if (isCloudSkillsLink) {\n            const cloudSkillsUrl = `${backend.host.replace(/\\/+$/, \"\")}/settings/skills`;\n            return (\n              <a\n                key={item.to}\n                data-testid={`sidebar-extensions-${item.to}`}\n                href={cloudSkillsUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className={cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )}\n              >\n                {baseRow}\n                {label}\n                <ExternalLink\n                  className=\"ml-auto size-4 shrink-0 text-[var(--oh-muted)]\"\n                  aria-hidden\n                />\n              </a>\n            );\n          }\n\n          return (\n            <NavigationLink\n              key={item.to}\n              to={item.to}\n              end={item.end}\n              data-testid={`sidebar-extensions-${item.to}`}\n              className={({ isActive }) =>\n                cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  isActive\n                    ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n                    : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )\n              }\n            >\n              {baseRow}\n              {label}\n              {comingSoonBadge}\n            </NavigationLink>\n          );\n        })}\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,IAA8B,WAE9B,IAA8B,YAUvB,IAA2C;CACtD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAmB,OAAO;GAAI,QAAQ;EAAK,CAAA;EACjD,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAY,OAAO;GAAI,QAAQ;GAAI,eAAY;EAAQ,CAAA;EAC7D,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MACE,kBAAC,OAAD;GACE,OAAM;GACN,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,OAAO;GACP,QAAQ;GACR,eAAY;aAVd;IAYE,kBAAC,QAAD,EAAM,GAAE,yHAA0H,CAAA;IAClI,kBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;IAC9B,kBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GAClB;;EAEP,KAAK;CACP;AACF;AAEA,SAAgB,IAAuB;CACrC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,cAAW,EAAwB,GACrC,EAAE,eAAY,GACd,IAAiB,CAAC,EAAY,CAAO,KAAK,EAAQ,SAAS;CAEjE,OACE,kBAAC,SAAD;EACE,eAAY;EACZ,WAAU;YAFZ;GAIE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,EAAQ,aAAa;GACpB,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAqB,QACnB,MACC,EAAE,EAAK,OAAO,KAA+B,EACjD,EAAE,KAAK,MAAS;KACd,IAAM,IACJ,EAAK,OAAO,KAA+B,GACvC,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;KACF,CAAA,GAEF,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,IACG,EAAE,EAAQ,qCAAqC,IAC/C,EAAK;KACL,CAAA,GAEF,IAAkB,EAAK,cAC3B,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAQ,eAAe;KACtB,CAAA;KAGR,IAAI,GAAmB;MACrB,IAAM,IAAiB,GAAG,EAAQ,KAAK,QAAQ,QAAQ,EAAE,EAAE;MAC3D,OACE,kBAAC,KAAD;OAEE,eAAa,sBAAsB,EAAK;OACxC,MAAM;OACN,QAAO;OACP,KAAI;OACJ,WAAW,EACT,EAAuB,GACvB,YACA,EAA8B,IAChC;iBAVF;QAYG;QACA;QACD,kBAAC,GAAD;SACE,WAAU;SACV,eAAA;QACD,CAAA;OACA;SAjBI,EAAK,EAiBT;KAEP;KAEA,OACE,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,KAAK,EAAK;MACV,eAAa,sBAAsB,EAAK;MACxC,YAAY,EAAE,kBACZ,EACE,EAAuB,GACvB,YACA,IACI,EAA8B,SAC9B,EAA8B,IACpC;gBAZJ;OAeG;OACA;OACA;MACa;QAjBT,EAAK,EAiBI;IAEpB,CAAC;GACE,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,CAA6B,CAAA;GAC1B,CAAA;EACA;;AAEX"}
+{"version":3,"file":"extensions-navigation.js","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { Blocks, ExternalLink } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\n\n/** Only the Skills item points to a cloud-hosted page today. */\nconst CLOUD_LINKED_EXTENSION_PATH = \"/skills\";\n/** Backend-installed artifacts are not available on Cloud backends yet. */\nconst CLOUD_HIDDEN_EXTENSION_PATHS = new Set([\"/plugins\", \"/extensions\"]);\n\ninterface ExtensionNavItem {\n  to: string;\n  label: string;\n  icon: React.ReactElement;\n  end?: boolean;\n  comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n  {\n    to: \"/mcp\",\n    label: \"MCP Servers\",\n    icon: <ServerProcessIcon width={16} height={16} />,\n    end: true,\n  },\n  {\n    to: \"/skills\",\n    label: \"Skills\",\n    icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n    end: true,\n  },\n  {\n    to: \"/plugins\",\n    label: \"Plugins\",\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        width={16}\n        height={16}\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n        <path d=\"m3.3 7 8.7 5 8.7-5\" />\n        <path d=\"M12 22V12\" />\n      </svg>\n    ),\n    end: true,\n  },\n  {\n    to: \"/extensions\",\n    label: \"Extensions\",\n    icon: <Blocks width={16} height={16} aria-hidden=\"true\" />,\n    end: true,\n  },\n];\n\nexport function ExtensionsNavigation() {\n  const { t } = useTranslation(\"openhands\");\n  const { active } = useActiveBackendContext();\n  const { backend } = active;\n  const isCloudBackend = !isNoBackend(backend) && backend.kind === \"cloud\";\n\n  return (\n    <aside\n      data-testid=\"extensions-navbar-desktop\"\n      className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n    >\n      <span className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.NAV$CUSTOMIZE)}\n      </span>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {EXTENSIONS_NAV_ITEMS.filter(\n          (item) =>\n            !(CLOUD_HIDDEN_EXTENSION_PATHS.has(item.to) && isCloudBackend),\n        ).map((item) => {\n          const isCloudSkillsLink =\n            item.to === CLOUD_LINKED_EXTENSION_PATH && isCloudBackend;\n          const baseRow = (\n            <span className=\"shrink-0 flex items-center justify-center\">\n              {item.icon}\n            </span>\n          );\n          const label = (\n            <span className=\"truncate\">\n              {isCloudSkillsLink\n                ? t(I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK)\n                : item.label}\n            </span>\n          );\n          const comingSoonBadge = item.comingSoon && (\n            <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n              {t(I18nKey.NAV$COMING_SOON)}\n            </span>\n          );\n\n          if (isCloudSkillsLink) {\n            const cloudSkillsUrl = `${backend.host.replace(/\\/+$/, \"\")}/settings/skills`;\n            return (\n              <a\n                key={item.to}\n                data-testid={`sidebar-extensions-${item.to}`}\n                href={cloudSkillsUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className={cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )}\n              >\n                {baseRow}\n                {label}\n                <ExternalLink\n                  className=\"ml-auto size-4 shrink-0 text-[var(--oh-muted)]\"\n                  aria-hidden\n                />\n              </a>\n            );\n          }\n\n          return (\n            <NavigationLink\n              key={item.to}\n              to={item.to}\n              end={item.end}\n              data-testid={`sidebar-extensions-${item.to}`}\n              className={({ isActive }) =>\n                cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  isActive\n                    ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n                    : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )\n              }\n            >\n              {baseRow}\n              {label}\n              {comingSoonBadge}\n            </NavigationLink>\n          );\n        })}\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,IAA8B,WAE9B,IAA+B,IAAI,IAAI,CAAC,YAAY,aAAa,CAAC,GAU3D,IAA2C;CACtD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAmB,OAAO;GAAI,QAAQ;EAAK,CAAA;EACjD,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAY,OAAO;GAAI,QAAQ;GAAI,eAAY;EAAQ,CAAA;EAC7D,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MACE,kBAAC,OAAD;GACE,OAAM;GACN,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,OAAO;GACP,QAAQ;GACR,eAAY;aAVd;IAYE,kBAAC,QAAD,EAAM,GAAE,yHAA0H,CAAA;IAClI,kBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;IAC9B,kBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GAClB;;EAEP,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAQ,OAAO;GAAI,QAAQ;GAAI,eAAY;EAAQ,CAAA;EACzD,KAAK;CACP;AACF;AAEA,SAAgB,IAAuB;CACrC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,cAAW,EAAwB,GACrC,EAAE,eAAY,GACd,IAAiB,CAAC,EAAY,CAAO,KAAK,EAAQ,SAAS;CAEjE,OACE,kBAAC,SAAD;EACE,eAAY;EACZ,WAAU;YAFZ;GAIE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,EAAQ,aAAa;GACpB,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAqB,QACnB,MACC,EAAE,EAA6B,IAAI,EAAK,EAAE,KAAK,EACnD,EAAE,KAAK,MAAS;KACd,IAAM,IACJ,EAAK,OAAO,KAA+B,GACvC,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;KACF,CAAA,GAEF,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,IACG,EAAE,EAAQ,qCAAqC,IAC/C,EAAK;KACL,CAAA,GAEF,IAAkB,EAAK,cAC3B,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAQ,eAAe;KACtB,CAAA;KAGR,IAAI,GAAmB;MACrB,IAAM,IAAiB,GAAG,EAAQ,KAAK,QAAQ,QAAQ,EAAE,EAAE;MAC3D,OACE,kBAAC,KAAD;OAEE,eAAa,sBAAsB,EAAK;OACxC,MAAM;OACN,QAAO;OACP,KAAI;OACJ,WAAW,EACT,EAAuB,GACvB,YACA,EAA8B,IAChC;iBAVF;QAYG;QACA;QACD,kBAAC,GAAD;SACE,WAAU;SACV,eAAA;QACD,CAAA;OACA;SAjBI,EAAK,EAiBT;KAEP;KAEA,OACE,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,KAAK,EAAK;MACV,eAAa,sBAAsB,EAAK;MACxC,YAAY,EAAE,kBACZ,EACE,EAAuB,GACvB,YACA,IACI,EAA8B,SAC9B,EAA8B,IACpC;gBAZJ;OAeG;OACA;OACA;MACa;QAjBT,EAAK,EAiBI;IAEpB,CAAC;GACE,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,CAA6B,CAAA;GAC1B,CAAA;EACA;;AAEX"}