@openhands/agent-canvas 1.15.0 → 1.17.0

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.cjs","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.cjs","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 === \"/apps\" ||\n    currentPath === \"/mcp\";\n\n  const railBodyProps = {\n    collapseToggleLabel,\n    onCollapse: handleCollapse,\n    onExpand: () => setCollapsed(false),\n    showCollapsedExpandButton,\n    isExtensionsActive,\n    currentPath,\n    activeBackend: active.backend,\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/sidebar/sidebar.js

@@ -7,19 +7,19 @@ import { useActiveBackendContext as a } from "../../../contexts/active-backend-c
 import { getErrorStatus as o, useSettings as s } from "../../../hooks/query/use-settings.js";
 import { useClickOutsideElement as c } from "../../../hooks/use-click-outside-element.js";
 import { useConfig as ee } from "../../../hooks/query/use-config.js";
-import { useSidebarMobileNav as l } from "./sidebar-mobile-nav-context.js";
-import { useBackendsHealth as u } from "../../../hooks/query/use-backends-health.js";
-import { SidebarRailBody as d } from "./sidebar-rail-body.js";
-import { useSidebarStore as f } from "../../../stores/sidebar-store.js";
-import p from "react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useSidebarMobileNav as te } from "./sidebar-mobile-nav-context.js";
+import { useBackendsHealth as l } from "../../../hooks/query/use-backends-health.js";
+import { SidebarRailBody as u } from "./sidebar-rail-body.js";
+import { useSidebarStore as d } from "../../../stores/sidebar-store.js";
+import f from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/features/sidebar/sidebar.tsx
-var _ = p.lazy(() => import("../../shared/modals/settings/settings-modal.js").then((e) => ({ default: e.SettingsModal }))), v = p.lazy(() => import("../backends/add-backend-modal.js").then((e) => ({ default: e.AddBackendModal }))), y = p.lazy(() => import("../backends/manage-backends-modal.js").then((e) => ({ default: e.ManageBackendsModal }))), b = 250;
-function x() {
-	let { t: x } = e("openhands"), { currentPath: S } = r(), { data: C } = ee(), { data: w, error: T, isError: E, isFetching: D } = s(), { backends: O, active: k } = a(), te = u(O)[k.backend.id], A = f((e) => e.collapsed), j = f((e) => e.setCollapsed), [M, N] = p.useState(!1), [P, F] = p.useState(!1), I = p.useRef(null), [L, R] = p.useState(!1), [z, B] = p.useState(!1), [V, H] = p.useState(!1), U = p.useRef(!1), [, W] = p.useReducer((e) => e + 1, 0), { isOpen: G, close: K } = l(), [q, J] = p.useState(!1), [Y, X] = p.useState(!1), Z = c(() => F(!1)), Q = o(T);
-	p.useEffect(() => {
+var g = f.lazy(() => import("../../shared/modals/settings/settings-modal.js").then((e) => ({ default: e.SettingsModal }))), _ = f.lazy(() => import("../backends/add-backend-modal.js").then((e) => ({ default: e.AddBackendModal }))), v = f.lazy(() => import("../backends/manage-backends-modal.js").then((e) => ({ default: e.ManageBackendsModal }))), y = 250;
+function b() {
+	let { t: b } = e("openhands"), { currentPath: x } = r(), { data: S } = ee(), { data: C, error: w, isError: T, isFetching: E } = s(), { backends: D, active: O } = a(), k = l(D)[O.backend.id], A = d((e) => e.collapsed), j = d((e) => e.setCollapsed), [M, N] = f.useState(!1), [P, F] = f.useState(!1), I = f.useRef(null), [L, R] = f.useState(!1), [z, B] = f.useState(!1), [V, H] = f.useState(!1), U = f.useRef(!1), [, W] = f.useReducer((e) => e + 1, 0), { isOpen: G, close: K } = te(), [q, J] = f.useState(!1), [Y, X] = f.useState(!1), Z = c(() => F(!1)), Q = o(w);
+	f.useEffect(() => {
 		K();
-	}, [S, K]), p.useEffect(() => {
+	}, [x, K]), f.useEffect(() => {
 		if (G) {
 			J(!0);
 			let e = requestAnimationFrame(() => {
@@ -30,40 +30,41 @@ function x() {
 		X(!1);
 		let e = window.setTimeout(() => {
 			J(!1);
-		}, b);
+		}, y);
 		return () => window.clearTimeout(e);
-	}, [G]), p.useEffect(() => {
+	}, [G]), f.useEffect(() => {
 		if (!G) return;
 		let e = (e) => {
 			e.key === "Escape" && K();
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [G, K]), p.useEffect(() => {
-		S === "/settings" ? N(!1) : !D && E && Q !== 404 ? i(x(t.SETTINGS$FETCH_ERROR)) : Q === 404 && !C?.feature_flags?.hide_llm_settings && N(!0);
+	}, [G, K]), f.useEffect(() => {
+		x === "/settings" ? N(!1) : !E && T && Q !== 404 ? i(b(t.SETTINGS$FETCH_ERROR)) : Q === 404 && !S?.feature_flags?.hide_llm_settings && N(!0);
 	}, [
-		S,
-		D,
+		x,
 		E,
+		T,
 		Q,
-		C?.feature_flags?.hide_llm_settings,
-		x
+		S?.feature_flags?.hide_llm_settings,
+		b
 	]);
-	let ne = x(A ? t.SIDEBAR$EXPAND : t.SIDEBAR$COLLAPSE), re = p.useCallback((e) => {
+	let ne = b(A ? t.SIDEBAR$EXPAND : t.SIDEBAR$COLLAPSE), re = f.useCallback((e) => {
 		if (!A) return;
 		let t = e.target;
 		t instanceof HTMLElement && (t.closest("a,button,input,textarea,select,[role='button'],[role='link']") || j(!1));
 	}, [A, j]), $ = {
 		collapseToggleLabel: ne,
-		onCollapse: p.useCallback(() => {
+		onCollapse: f.useCallback(() => {
 			H(!1), U.current = !0, W(), j(!0), window.setTimeout(() => {
 				U.current = !1, W();
 			}, 250);
 		}, [j]),
 		onExpand: () => j(!1),
 		showCollapsedExpandButton: A && V && !U.current,
-		isExtensionsActive: S === "/customize" || S.startsWith("/skills") || S === "/plugins" || S === "/mcp",
-		currentPath: S,
-		activeBackendHealth: te,
+		isExtensionsActive: x === "/customize" || x.startsWith("/skills") || x === "/plugins" || x === "/apps" || x === "/mcp",
+		currentPath: x,
+		activeBackend: O.backend,
+		activeBackendHealth: k,
 		collapsedBackendPopoverOpen: P,
 		setCollapsedBackendPopoverOpen: F,
 		collapsedBackendPopoverRef: Z,
@@ -71,9 +72,9 @@ function x() {
 		onOpenAddBackend: () => R(!0),
 		onOpenManageBackends: () => B(!0)
 	};
-	return /* @__PURE__ */ g(m, { children: [
-		/* @__PURE__ */ h("aside", {
-			"aria-label": x(t.SIDEBAR$NAVIGATION_LABEL),
+	return /* @__PURE__ */ h(p, { children: [
+		/* @__PURE__ */ m("aside", {
+			"aria-label": b(t.SIDEBAR$NAVIGATION_LABEL),
 			"data-collapsed": A ? "true" : "false",
 			onClick: re,
 			onMouseEnter: () => {
@@ -82,25 +83,25 @@ function x() {
 			onMouseLeave: () => {
 				H(!1);
 			},
-			className: n("max-md:hidden flex bg-base flex-col min-h-0 transition-[width,min-width] duration-200", "md:border-r md:border-[var(--oh-border)] md:h-full", A ? "md:w-[60px] md:min-w-[60px] md:px-2.5" : "md:w-[300px] md:min-w-[300px] pb-2 md:pl-2.5 md:pr-0", S === "/" && "md:pb-3"),
-			children: /* @__PURE__ */ h(d, {
+			className: n("max-md:hidden flex bg-base flex-col min-h-0 transition-[width,min-width] duration-200", "md:border-r md:border-[var(--oh-border)] md:h-full", A ? "md:w-[60px] md:min-w-[60px] md:px-2.5" : "md:w-[300px] md:min-w-[300px] pb-2 md:pl-2.5 md:pr-0", x === "/" && "md:pb-3"),
+			children: /* @__PURE__ */ m(u, {
 				collapsed: A,
 				showCollapseToggle: !0,
 				...$
 			})
 		}),
-		q ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
+		q ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("div", {
 			className: n("fixed inset-0 z-40 bg-black/50 md:hidden", "transition-opacity ease-in-out motion-reduce:transition-none", Y ? "opacity-100" : "pointer-events-none opacity-0"),
-			style: { transitionDuration: `${b}ms` },
+			style: { transitionDuration: `${y}ms` },
 			onClick: K,
 			"aria-hidden": !Y
-		}), /* @__PURE__ */ h("aside", {
-			"aria-label": x(t.SIDEBAR$NAVIGATION_LABEL),
+		}), /* @__PURE__ */ m("aside", {
+			"aria-label": b(t.SIDEBAR$NAVIGATION_LABEL),
 			"data-testid": "sidebar-mobile-drawer",
 			"aria-hidden": !Y,
 			className: n("fixed inset-y-0 left-0 z-50 flex min-h-0 w-[min(300px,85vw)] flex-col bg-base", "border-r border-[var(--oh-border)] pb-2 pl-2.5 pr-0 md:hidden", "transition-transform ease-in-out motion-reduce:transition-none", Y ? "translate-x-0" : "-translate-x-full"),
-			style: { transitionDuration: `${b}ms` },
-			children: /* @__PURE__ */ h(d, {
+			style: { transitionDuration: `${y}ms` },
+			children: /* @__PURE__ */ m(u, {
 				collapsed: !1,
 				showCollapseToggle: !1,
 				showMobileCloseButton: !0,
@@ -108,24 +109,24 @@ function x() {
 				...$
 			})
 		})] }) : null,
-		M && /* @__PURE__ */ h(p.Suspense, {
+		M && /* @__PURE__ */ m(f.Suspense, {
 			fallback: null,
-			children: /* @__PURE__ */ h(_, {
-				settings: w,
+			children: /* @__PURE__ */ m(g, {
+				settings: C,
 				onClose: () => N(!1)
 			})
 		}),
-		L && /* @__PURE__ */ h(p.Suspense, {
+		L && /* @__PURE__ */ m(f.Suspense, {
 			fallback: null,
-			children: /* @__PURE__ */ h(v, { onClose: () => R(!1) })
+			children: /* @__PURE__ */ m(_, { onClose: () => R(!1) })
 		}),
-		z && /* @__PURE__ */ h(p.Suspense, {
+		z && /* @__PURE__ */ m(f.Suspense, {
 			fallback: null,
-			children: /* @__PURE__ */ h(y, { onClose: () => B(!1) })
+			children: /* @__PURE__ */ m(v, { onClose: () => B(!1) })
 		})
 	] });
 }
 //#endregion
-export { x as Sidebar };
+export { b as Sidebar };
 
 //# sourceMappingURL=sidebar.js.map

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 === \"/apps\" ||\n    currentPath === \"/mcp\";\n\n  const railBodyProps = {\n    collapseToggleLabel,\n    onCollapse: handleCollapse,\n    onExpand: () => setCollapsed(false),\n    showCollapsedExpandButton,\n    isExtensionsActive,\n    currentPath,\n    activeBackend: active.backend,\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/sidebar/use-sidebar-onboarding-checklist.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../context/navigation-context.cjs"),t=require("../../../utils/mcp-config.cjs"),n=require("../../../hooks/query/use-llm-profiles.cjs"),r=require("../../../hooks/query/use-settings.cjs"),i=require("../../../hooks/use-llm-configured.cjs"),a=require("../../../hooks/query/use-automations.cjs"),o=require("../../../hooks/query/use-automation-health.cjs"),s=require("./sidebar-onboarding-checklist.constants.cjs"),c=require("./sidebar-onboarding-checklist-storage.cjs"),l=require("../../../hooks/query/use-paginated-conversations.cjs"),u=require("../onboarding/use-onboarding-completion.cjs"),d=require("./sidebar-onboarding-checklist-llm-complete.cjs");let f=require("react");function p(e){return Object.keys(t.parseMcpConfig(e)).length>0}function m(){let{isCompleted:t}=u.useOnboardingCompletion(),{currentPath:m}=e.useNavigation(),h=(0,f.useSyncExternalStore)(c.subscribeSidebarOnboardingChecklistDismissed,c.getSidebarOnboardingChecklistDismissedSnapshot,()=>!1),[g,_]=(0,f.useState)(c.readSidebarOnboardingChecklistMinimized),[v,y]=(0,f.useState)(c.readSidebarOnboardingChecklistCustomizeExplored),[b,x]=(0,f.useState)(c.readSidebarOnboardingChecklistSlackJoined),{data:S}=r.useSettings(),{isConfigured:C,isLoading:w}=i.useLlmConfigured(),{data:T,isLoading:E}=n.useLlmProfiles(),{data:D}=l.usePaginatedConversations(1),{data:O}=o.useAutomationHealth(),{data:k}=a.useAutomations({limit:1,offset:0,enabled:O?.status===`ok`});(0,f.useEffect)(()=>{s.isCustomizeChecklistPath(m)&&(v||(c.writeSidebarOnboardingChecklistCustomizeExplored(!0),y(!0)))},[m,v]);let A=(0,f.useMemo)(()=>{let e=(D?.pages[0]?.items.length??0)>0,t=(k?.total??0)>0;return{"configure-llm":d.isConfigureLlmChecklistItemComplete(S,C,w,T,E),"connect-mcp":p(S?.agent_settings?.mcp_config),"start-conversation":e,"schedule-task":t,"customize-agent":v,"join-slack":b}},[k?.total,D?.pages,v,b,C,w,E,T,S,S?.agent_settings?.mcp_config]),j=(0,f.useMemo)(()=>s.SIDEBAR_ONBOARDING_CHECKLIST_ITEM_IDS.map(e=>({id:e,isComplete:A[e]})),[A]),M=j.filter(e=>e.isComplete).length,N=M===j.length,P=t&&!h&&!N;return{items:j,completedCount:M,totalCount:j.length,isVisible:P,isMinimized:g,dismiss:()=>{c.writeSidebarOnboardingChecklistDismissed(!0)},toggleMinimized:()=>{_(e=>{let t=!e;return c.writeSidebarOnboardingChecklistMinimized(t),t})},markJoinSlackComplete:()=>{b||(c.writeSidebarOnboardingChecklistSlackJoined(!0),x(!0))}}}exports.useSidebarOnboardingChecklist=m;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../context/navigation-context.cjs"),t=require("../../../utils/mcp-config.cjs"),n=require("../../../hooks/query/use-settings.cjs"),r=require("../../../hooks/query/use-llm-profiles.cjs"),i=require("../../../hooks/use-llm-configured.cjs"),a=require("../../../hooks/query/use-automations.cjs"),o=require("../../../hooks/query/use-automation-health.cjs"),s=require("./sidebar-onboarding-checklist.constants.cjs"),c=require("./sidebar-onboarding-checklist-storage.cjs"),l=require("../../../hooks/query/use-paginated-conversations.cjs"),u=require("../onboarding/use-onboarding-completion.cjs"),d=require("./sidebar-onboarding-checklist-llm-complete.cjs");let f=require("react");function p(e){return Object.keys(t.parseMcpConfig(e)).length>0}function m(){let{isCompleted:t}=u.useOnboardingCompletion(),{currentPath:m}=e.useNavigation(),h=(0,f.useSyncExternalStore)(c.subscribeSidebarOnboardingChecklistDismissed,c.getSidebarOnboardingChecklistDismissedSnapshot,()=>!1),[g,_]=(0,f.useState)(c.readSidebarOnboardingChecklistMinimized),[v,y]=(0,f.useState)(c.readSidebarOnboardingChecklistCustomizeExplored),[b,x]=(0,f.useState)(c.readSidebarOnboardingChecklistSlackJoined),{data:S}=n.useSettings(),{isConfigured:C,isLoading:w}=i.useLlmConfigured(),{data:T,isLoading:E}=r.useLlmProfiles(),{data:D}=l.usePaginatedConversations(1),{data:O}=o.useAutomationHealth(),{data:k}=a.useAutomations({limit:1,offset:0,enabled:O?.status===`ok`});(0,f.useEffect)(()=>{s.isCustomizeChecklistPath(m)&&(v||(c.writeSidebarOnboardingChecklistCustomizeExplored(!0),y(!0)))},[m,v]);let A=(0,f.useMemo)(()=>{let e=(D?.pages[0]?.items.length??0)>0,t=(k?.total??0)>0;return{"configure-llm":d.isConfigureLlmChecklistItemComplete(S,C,w,T,E),"connect-mcp":p(S?.agent_settings?.mcp_config),"start-conversation":e,"schedule-task":t,"customize-agent":v,"join-slack":b}},[k?.total,D?.pages,v,b,C,w,E,T,S,S?.agent_settings?.mcp_config]),j=(0,f.useMemo)(()=>s.SIDEBAR_ONBOARDING_CHECKLIST_ITEM_IDS.map(e=>({id:e,isComplete:A[e]})),[A]),M=j.filter(e=>e.isComplete).length,N=M===j.length,P=t&&!h&&!N;return{items:j,completedCount:M,totalCount:j.length,isVisible:P,isMinimized:g,dismiss:()=>{c.writeSidebarOnboardingChecklistDismissed(!0)},toggleMinimized:()=>{_(e=>{let t=!e;return c.writeSidebarOnboardingChecklistMinimized(t),t})},markJoinSlackComplete:()=>{b||(c.writeSidebarOnboardingChecklistSlackJoined(!0),x(!0))}}}exports.useSidebarOnboardingChecklist=m;
 //# sourceMappingURL=use-sidebar-onboarding-checklist.cjs.map

package/dist/components/features/sidebar/use-sidebar-onboarding-checklist.js

@@ -1,7 +1,7 @@
 import { useNavigation as e } from "../../../context/navigation-context.js";
 import { parseMcpConfig as t } from "../../../utils/mcp-config.js";
-import { useLlmProfiles as n } from "../../../hooks/query/use-llm-profiles.js";
-import { useSettings as r } from "../../../hooks/query/use-settings.js";
+import { useSettings as n } from "../../../hooks/query/use-settings.js";
+import { useLlmProfiles as r } from "../../../hooks/query/use-llm-profiles.js";
 import { useLlmConfigured as i } from "../../../hooks/use-llm-configured.js";
 import { useAutomations as a } from "../../../hooks/query/use-automations.js";
 import { useAutomationHealth as o } from "../../../hooks/query/use-automation-health.js";
@@ -16,7 +16,7 @@ function T(e) {
 	return Object.keys(t(e)).length > 0;
 }
 function E() {
-	let { isCompleted: t } = y(), { currentPath: E } = e(), D = w(p, l, () => !1), [O, k] = C(d), [A, j] = C(u), [M, N] = C(f), { data: P } = r(), { isConfigured: F, isLoading: I } = i(), { data: L, isLoading: R } = n(), { data: z } = v(1), { data: B } = o(), { data: V } = a({
+	let { isCompleted: t } = y(), { currentPath: E } = e(), D = w(p, l, () => !1), [O, k] = C(d), [A, j] = C(u), [M, N] = C(f), { data: P } = n(), { isConfigured: F, isLoading: I } = i(), { data: L, isLoading: R } = r(), { data: z } = v(1), { data: B } = o(), { data: V } = a({
 		limit: 1,
 		offset: 0,
 		enabled: B?.status === "ok"

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