npm - @openhands/agent-canvas - Versions diffs - 1.14.0 → 1.16.0 - Mend

@openhands/agent-canvas 1.14.0 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1855) hide show

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

	@@ -1 +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":";;;;;;;;;;;;;;;;AAgBA,IAAM,IAAgB,EAAM,WAC1B,OAAO,kDAAsD,MAAM,OAAO,EACxE,SAAS,EAAE,cACb,EAAE,CACJ,GAKM,IAAkB,EAAM,WAC5B,OAAO,oCAAoD,MAAM,OAAO,EACtE,SAAS,EAAE,gBACb,EAAE,CACJ,GACM,IAAsB,EAAM,WAChC,OAAO,wCAAwD,MAAM,OAAO,EAC1E,SAAS,EAAE,oBACb,EAAE,CACJ,GAEM,IAA8B;AAEpC,SAAgB,IAAU;CACxB,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,mBAAgB,EAAc,GAChC,EAAE,MAAM,MAAW,GAAU,GAC7B,EACJ,MAAM,GACN,OAAO,GACP,SAAS,GACT,YAAY,MACV,EAAY,GACV,EAAE,aAAU,cAAW,EAAwB,GAE/C,KADoB,EAAkB,CAChB,EAAkB,EAAO,QAAQ,KACvD,IAAY,GAAiB,MAAU,EAAM,SAAS,GACtD,IAAe,GAAiB,MAAU,EAAM,YAAY,GAC5D,CAAC,GAAqB,KAA0B,EAAM,SAAS,EAAK,GACpE,CAAC,GAA6B,KAClC,EAAM,SAAS,EAAK,GAChB,IAA6B,EAAM,OAE/B,IAAI,GAIR,CAAC,GAAqB,KAA0B,EAAM,SAAS,EAAK,GACpE,CAAC,GAAyB,KAC9B,EAAM,SAAS,EAAK,GAChB,CAAC,GAAsB,KAA2B,EAAM,SAAS,EAAK,GACtE,IAA6B,EAAM,OAAO,EAAK,GAC/C,GAAG,KAA8B,EAAM,YAAY,MAAM,IAAI,GAAG,CAAC,GACjE,EAAE,QAAQ,GAAiB,OAAO,MACtC,EAAoB,GAChB,CAAC,GAAqB,KAA0B,EAAM,SAAS,EAAK,GACpE,CAAC,GAAqB,KAA0B,EAAM,SAAS,EAAK,GACpE,IAA6B,QAC3B,EAA+B,EAAK,CAC5C,GACM,IAAsB,EAAe,CAAa;CAqCxD,AAnCA,EAAM,gBAAgB;EACpB,EAAe;CACjB,GAAG,CAAC,GAAa,CAAc,CAAC,GAEhC,EAAM,gBAAgB;EACpB,IAAI,GAAiB;GACnB,EAAuB,EAAI;GAC3B,IAAM,IAAQ,4BAA4B;IACxC,EAAuB,EAAI;GAC7B,CAAC;GACD,aAAa,qBAAqB,CAAK;EACzC;EAEA,EAAuB,EAAK;EAC5B,IAAM,IAAQ,OAAO,iBAAiB;GACpC,EAAuB,EAAK;EAC9B,GAAG,CAA2B;EAC9B,aAAa,OAAO,aAAa,CAAK;CACxC,GAAG,CAAC,CAAe,CAAC,GAEpB,EAAM,gBAAgB;EACpB,IAAI,CAAC,GACH;EAGF,IAAM,KAAa,MAAyB;GAC1C,AAAI,EAAM,QAAQ,YAChB,EAAe;EAEnB;EAGA,OADA,OAAO,iBAAiB,WAAW,CAAS,SAC/B,OAAO,oBAAoB,WAAW,CAAS;CAC9D,GAAG,CAAC,GAAiB,CAAc,CAAC,GAEpC,EAAM,gBAAgB;EACpB,AAAI,MAAgB,cAClB,EAAuB,EAAK,IAE5B,CAAC,KACD,KACA,MAAwB,MAIxB,EAAkB,EAAE,EAAQ,oBAAoB,CAAC,IAEjD,MAAwB,OACxB,CAAC,GAAQ,eAAe,qBAExB,EAAuB,EAAI;CAE/B,GAAG;EACD;EACA;EACA;EACA;EACA,GAAQ,eAAe;EACvB;CACF,CAAC;CAED,IAAM,KAAsB,EAC1B,IAAY,EAAQ,iBAAiB,EAAQ,gBAC/C,GACM,KAA2B,EAAM,aACpC,MAAyC;EACxC,IAAI,CAAC,GACH;EAGF,IAAM,IAAS,EAAM;EACf,aAAkB,gBAOtB,EAAO,QACL,8DACF,KAKF,EAAa,EAAK;CACpB,GACA,CAAC,GAAW,CAAY,CAC1B,GAoBM,IAAgB;EACpB;EACA,YArBqB,EAAM,kBAAkB;GAK7C,AAJA,EAAwB,EAAK,GAC7B,EAA2B,UAAU,IACrC,EAA2B,GAC3B,EAAa,EAAI,GACjB,OAAO,iBAAiB;IAEtB,AADA,EAA2B,UAAU,IACrC,EAA2B;GAC7B,GAAG,GAAG;EACR,GAAG,CAAC,CAAY,CAYF;EACZ,gBAAgB,EAAa,EAAK;EAClC,2BAZA,KAAa,KAAwB,CAAC,EAA2B;EAajE,oBAVA,MAAgB,gBAChB,EAAY,WAAW,SAAS,KAChC,MAAgB,cAChB,MAAgB;EAQhB;EACA;EACA;EACA;EACA;EACA;EACA,wBAAwB,EAAuB,EAAI;EACnD,4BAA4B,EAA2B,EAAI;CAC7D;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA;EAEE,kBAAC,SAAD;GACE,cAAY,EAAE,EAAQ,wBAAwB;GAC9C,kBAAgB,IAAY,SAAS;GACrC,SAAS;GACT,oBAAoB;IAClB,AAAI,KACF,EAAwB,EAAI;GAEhC;GACA,oBAAoB;IAClB,EAAwB,EAAK;GAC/B;GACA,WAAW,EACT,yFACA,sDACA,IACI,0CACA,wDACJ,MAAgB,OAAO,SACzB;aAEA,kBAAC,GAAD;IACa;IACX,oBAAA;IACA,GAAI;GACL,CAAA;EACI,CAAA;EAEN,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;GACE,WAAW,EACT,4CACA,gEACA,IACI,gBACA,+BACN;GACA,OAAO,EAAE,oBAAoB,GAAG,EAA4B,IAAI;GAChE,SAAS;GACT,eAAa,CAAC;EACf,CAAA,GACD,kBAAC,SAAD;GACE,cAAY,EAAE,EAAQ,wBAAwB;GAC9C,eAAY;GACZ,eAAa,CAAC;GACd,WAAW,EACT,iFACA,iEACA,kEACA,IAAsB,kBAAkB,mBAC1C;GACA,OAAO,EAAE,oBAAoB,GAAG,EAA4B,IAAI;aAEhE,kBAAC,GAAD;IACE,WAAW;IACX,oBAAoB;IACpB,uBAAA;IACA,eAAe;IACf,GAAI;GACL,CAAA;EACI,CAAA,CACP,EAAA,CAAA,IACA;EAEH,KACC,kBAAC,EAAM,UAAP;GAAgB,UAAU;aACxB,kBAAC,GAAD;IACY;IACV,eAAe,EAAuB,EAAK;GAC5C,CAAA;EACa,CAAA;EAEjB,KACC,kBAAC,EAAM,UAAP;GAAgB,UAAU;aACxB,kBAAC,GAAD,EAAiB,eAAe,EAAuB,EAAK,EAAI,CAAA;EAClD,CAAA;EAEjB,KACC,kBAAC,EAAM,UAAP;GAAgB,UAAU;aACxB,kBAAC,GAAD,EACE,eAAe,EAA2B,EAAK,EAChD,CAAA;EACa,CAAA;CAElB,EAAA,CAAA;AAEN"}
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 === \"/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/sidebar/use-sidebar-onboarding-checklist-dismissed.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require("../../../_virtual/_rolldown/runtime.cjs");const e=require("./sidebar-onboarding-checklist-storage.cjs");let t=require("react");function n(){return(0,t.useSyncExternalStore)(e.subscribeSidebarOnboardingChecklistDismissed,e.getSidebarOnboardingChecklistDismissedSnapshot,()=>!1)}exports.useSidebarOnboardingChecklistDismissed=n;
2	+ //# sourceMappingURL=use-sidebar-onboarding-checklist-dismissed.cjs.map

package/dist/components/features/sidebar/use-sidebar-onboarding-checklist-dismissed.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-sidebar-onboarding-checklist-dismissed.cjs","names":[],"sources":["../../../../src/components/features/sidebar/use-sidebar-onboarding-checklist-dismissed.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport {\n getSidebarOnboardingChecklistDismissedSnapshot,\n subscribeSidebarOnboardingChecklistDismissed,\n} from \"./sidebar-onboarding-checklist-storage\";\n\nexport function useSidebarOnboardingChecklistDismissed(): boolean {\n return useSyncExternalStore(\n subscribeSidebarOnboardingChecklistDismissed,\n getSidebarOnboardingChecklistDismissedSnapshot,\n () => false,\n );\n}\n"],"mappings":"wIAMA,SAAgB,GAAkD,CAChE,OAAA,EAAA,EAAA,sBACE,EAAA,6CACA,EAAA,mDACM,EACR,CACF"}

package/dist/components/features/sidebar/use-sidebar-onboarding-checklist-dismissed.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function useSidebarOnboardingChecklistDismissed(): boolean;

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

@@ -0,0 +1,10 @@
+import { getSidebarOnboardingChecklistDismissedSnapshot as e, subscribeSidebarOnboardingChecklistDismissed as t } from "./sidebar-onboarding-checklist-storage.js";
+import { useSyncExternalStore as n } from "react";
+//#region src/components/features/sidebar/use-sidebar-onboarding-checklist-dismissed.ts
+function r() {
+	return n(t, e, () => !1);
+}
+//#endregion
+export { r as useSidebarOnboardingChecklistDismissed };
+//# sourceMappingURL=use-sidebar-onboarding-checklist-dismissed.js.map

package/dist/components/features/sidebar/use-sidebar-onboarding-checklist-dismissed.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-sidebar-onboarding-checklist-dismissed.js","names":[],"sources":["../../../../src/components/features/sidebar/use-sidebar-onboarding-checklist-dismissed.ts"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport {\n getSidebarOnboardingChecklistDismissedSnapshot,\n subscribeSidebarOnboardingChecklistDismissed,\n} from \"./sidebar-onboarding-checklist-storage\";\n\nexport function useSidebarOnboardingChecklistDismissed(): boolean {\n return useSyncExternalStore(\n subscribeSidebarOnboardingChecklistDismissed,\n getSidebarOnboardingChecklistDismissedSnapshot,\n () => false,\n );\n}\n"],"mappings":";;;AAMA,SAAgB,IAAkD;CAChE,OAAO,EACL,GACA,SACM,EACR;AACF"}

package/dist/components/features/sidebar/use-sidebar-onboarding-checklist.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 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;
2	+ //# sourceMappingURL=use-sidebar-onboarding-checklist.cjs.map

package/dist/components/features/sidebar/use-sidebar-onboarding-checklist.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-sidebar-onboarding-checklist.cjs","names":[],"sources":["../../../../src/components/features/sidebar/use-sidebar-onboarding-checklist.ts"],"sourcesContent":["import { useEffect, useMemo, useState, useSyncExternalStore } from \"react\";\nimport { useOnboardingCompletion } from \"#/components/features/onboarding/use-onboarding-completion\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useAutomations } from \"#/hooks/query/use-automations\";\nimport { useAutomationHealth } from \"#/hooks/query/use-automation-health\";\nimport { usePaginatedConversations } from \"#/hooks/query/use-paginated-conversations\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { useLlmProfiles } from \"#/hooks/query/use-llm-profiles\";\nimport { useLlmConfigured } from \"#/hooks/use-llm-configured\";\nimport { parseMcpConfig } from \"#/utils/mcp-config\";\nimport {\n isCustomizeChecklistPath,\n SIDEBAR_ONBOARDING_CHECKLIST_ITEM_IDS,\n type SidebarOnboardingChecklistItemId,\n} from \"./sidebar-onboarding-checklist.constants\";\nimport { isConfigureLlmChecklistItemComplete } from \"./sidebar-onboarding-checklist-llm-complete\";\nimport {\n readSidebarOnboardingChecklistCustomizeExplored,\n readSidebarOnboardingChecklistMinimized,\n readSidebarOnboardingChecklistSlackJoined,\n subscribeSidebarOnboardingChecklistDismissed,\n getSidebarOnboardingChecklistDismissedSnapshot,\n writeSidebarOnboardingChecklistCustomizeExplored,\n writeSidebarOnboardingChecklistDismissed,\n writeSidebarOnboardingChecklistMinimized,\n writeSidebarOnboardingChecklistSlackJoined,\n} from \"./sidebar-onboarding-checklist-storage\";\n\nexport interface SidebarOnboardingChecklistItemState {\n id: SidebarOnboardingChecklistItemId;\n isComplete: boolean;\n}\n\nfunction hasConfiguredMcpServers(mcpConfig: unknown): boolean {\n return Object.keys(parseMcpConfig(mcpConfig)).length > 0;\n}\n\nexport function useSidebarOnboardingChecklist() {\n const { isCompleted: onboardingCompleted } = useOnboardingCompletion();\n const { currentPath } = useNavigation();\n const isDismissed = useSyncExternalStore(\n subscribeSidebarOnboardingChecklistDismissed,\n getSidebarOnboardingChecklistDismissedSnapshot,\n () => false,\n );\n const [isMinimized, setIsMinimized] = useState(\n readSidebarOnboardingChecklistMinimized,\n );\n const [hasExploredCustomize, setHasExploredCustomize] = useState(\n readSidebarOnboardingChecklistCustomizeExplored,\n );\n const [hasJoinedSlack, setHasJoinedSlack] = useState(\n readSidebarOnboardingChecklistSlackJoined,\n );\n\n const { data: settings } = useSettings();\n const { isConfigured: isLlmConfigured, isLoading: isLlmConfiguredLoading } =\n useLlmConfigured();\n const { data: profilesData, isLoading: isProfilesLoading } = useLlmProfiles();\n const { data: conversationPage } = usePaginatedConversations(1);\n const { data: healthData } = useAutomationHealth();\n const isAutomationBackendHealthy = healthData?.status === \"ok\";\n const { data: automationsData } = useAutomations({\n limit: 1,\n offset: 0,\n enabled: isAutomationBackendHealthy,\n });\n\n useEffect(() => {\n if (!isCustomizeChecklistPath(currentPath)) {\n return;\n }\n\n if (hasExploredCustomize) {\n return;\n }\n\n writeSidebarOnboardingChecklistCustomizeExplored(true);\n setHasExploredCustomize(true);\n }, [currentPath, hasExploredCustomize]);\n\n const completionById = useMemo(() => {\n const hasConversation = (conversationPage?.pages[0]?.items.length ?? 0) > 0;\n const hasAutomation = (automationsData?.total ?? 0) > 0;\n\n return {\n \"configure-llm\": isConfigureLlmChecklistItemComplete(\n settings,\n isLlmConfigured,\n isLlmConfiguredLoading,\n profilesData,\n isProfilesLoading,\n ),\n \"connect-mcp\": hasConfiguredMcpServers(\n settings?.agent_settings?.mcp_config,\n ),\n \"start-conversation\": hasConversation,\n \"schedule-task\": hasAutomation,\n \"customize-agent\": hasExploredCustomize,\n \"join-slack\": hasJoinedSlack,\n } satisfies Record<SidebarOnboardingChecklistItemId, boolean>;\n }, [\n automationsData?.total,\n conversationPage?.pages,\n hasExploredCustomize,\n hasJoinedSlack,\n isLlmConfigured,\n isLlmConfiguredLoading,\n isProfilesLoading,\n profilesData,\n settings,\n settings?.agent_settings?.mcp_config,\n ]);\n\n const items = useMemo(\n (): SidebarOnboardingChecklistItemState[] =>\n SIDEBAR_ONBOARDING_CHECKLIST_ITEM_IDS.map((id) => ({\n id,\n isComplete: completionById[id],\n })),\n [completionById],\n );\n\n const completedCount = items.filter((item) => item.isComplete).length;\n const isAllComplete = completedCount === items.length;\n\n const isVisible = onboardingCompleted && !isDismissed && !isAllComplete;\n\n const dismiss = () => {\n writeSidebarOnboardingChecklistDismissed(true);\n };\n\n const toggleMinimized = () => {\n setIsMinimized((current) => {\n const next = !current;\n writeSidebarOnboardingChecklistMinimized(next);\n return next;\n });\n };\n\n const markJoinSlackComplete = () => {\n if (hasJoinedSlack) {\n return;\n }\n writeSidebarOnboardingChecklistSlackJoined(true);\n setHasJoinedSlack(true);\n };\n\n return {\n items,\n completedCount,\n totalCount: items.length,\n isVisible,\n isMinimized,\n dismiss,\n toggleMinimized,\n markJoinSlackComplete,\n };\n}\n"],"mappings":"yuBAiCA,SAAS,EAAwB,EAA6B,CAC5D,OAAO,OAAO,KAAK,EAAA,eAAe,CAAS,CAAC,EAAE,OAAS,CACzD,CAEA,SAAgB,GAAgC,CAC9C,GAAM,CAAE,YAAa,GAAwB,EAAA,wBAAwB,EAC/D,CAAE,eAAgB,EAAA,cAAc,EAChC,GAAA,EAAA,EAAA,sBACJ,EAAA,6CACA,EAAA,mDACM,EACR,EACM,CAAC,EAAa,IAAA,EAAA,EAAA,UAClB,EAAA,uCACF,EACM,CAAC,EAAsB,IAAA,EAAA,EAAA,UAC3B,EAAA,+CACF,EACM,CAAC,EAAgB,IAAA,EAAA,EAAA,UACrB,EAAA,yCACF,EAEM,CAAE,KAAM,GAAa,EAAA,YAAY,EACjC,CAAE,aAAc,EAAiB,UAAW,GAChD,EAAA,iBAAiB,EACb,CAAE,KAAM,EAAc,UAAW,GAAsB,EAAA,eAAe,EACtE,CAAE,KAAM,GAAqB,EAAA,0BAA0B,CAAC,EACxD,CAAE,KAAM,GAAe,EAAA,oBAAoB,EAE3C,CAAE,KAAM,GAAoB,EAAA,eAAe,CAC/C,MAAO,EACP,OAAQ,EACR,QAJiC,GAAY,SAAW,IAK1D,CAAC,GAED,EAAA,EAAA,eAAgB,CACT,EAAA,yBAAyB,CAAW,IAIrC,IAIJ,EAAA,iDAAiD,EAAI,EACrD,EAAwB,EAAI,GAC9B,EAAG,CAAC,EAAa,CAAoB,CAAC,EAEtC,IAAM,GAAA,EAAA,EAAA,aAA+B,CACnC,IAAM,GAAmB,GAAkB,MAAM,IAAI,MAAM,QAAU,GAAK,EACpE,GAAiB,GAAiB,OAAS,GAAK,EAEtD,MAAO,CACL,gBAAiB,EAAA,oCACf,EACA,EACA,EACA,EACA,CACF,EACA,cAAe,EACb,GAAU,gBAAgB,UAC5B,EACA,qBAAsB,EACtB,gBAAiB,EACjB,kBAAmB,EACnB,aAAc,CAChB,CACF,EAAG,CACD,GAAiB,MACjB,GAAkB,MAClB,EACA,EACA,EACA,EACA,EACA,EACA,EACA,GAAU,gBAAgB,UAC5B,CAAC,EAEK,GAAA,EAAA,EAAA,aAEF,EAAA,sCAAsC,IAAK,IAAQ,CACjD,KACA,WAAY,EAAe,EAC7B,EAAE,EACJ,CAAC,CAAc,CACjB,EAEM,EAAiB,EAAM,OAAQ,GAAS,EAAK,UAAU,EAAE,OACzD,EAAgB,IAAmB,EAAM,OAEzC,EAAY,GAAuB,CAAC,GAAe,CAAC,EAsB1D,MAAO,CACL,QACA,iBACA,WAAY,EAAM,OAClB,YACA,cACA,YA1BoB,CACpB,EAAA,yCAAyC,EAAI,CAC/C,EAyBE,oBAvB4B,CAC5B,EAAgB,GAAY,CAC1B,IAAM,EAAO,CAAC,EAEd,OADA,EAAA,yCAAyC,CAAI,EACtC,CACT,CAAC,CACH,EAkBE,0BAhBkC,CAC9B,IAGJ,EAAA,2CAA2C,EAAI,EAC/C,EAAkB,EAAI,EACxB,CAWA,CACF"}

package/dist/components/features/sidebar/use-sidebar-onboarding-checklist.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { type SidebarOnboardingChecklistItemId } from "./sidebar-onboarding-checklist.constants";
+export interface SidebarOnboardingChecklistItemState {
+    id: SidebarOnboardingChecklistItemId;
+    isComplete: boolean;
+}
+export declare function useSidebarOnboardingChecklist(): {
+    items: SidebarOnboardingChecklistItemState[];
+    completedCount: number;
+    totalCount: number;
+    isVisible: boolean;
+    isMinimized: boolean;
+    dismiss: () => void;
+    toggleMinimized: () => void;
+    markJoinSlackComplete: () => void;
+};

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

@@ -0,0 +1,75 @@
+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 { 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";
+import { SIDEBAR_ONBOARDING_CHECKLIST_ITEM_IDS as s, isCustomizeChecklistPath as c } from "./sidebar-onboarding-checklist.constants.js";
+import { getSidebarOnboardingChecklistDismissedSnapshot as l, readSidebarOnboardingChecklistCustomizeExplored as u, readSidebarOnboardingChecklistMinimized as d, readSidebarOnboardingChecklistSlackJoined as f, subscribeSidebarOnboardingChecklistDismissed as p, writeSidebarOnboardingChecklistCustomizeExplored as m, writeSidebarOnboardingChecklistDismissed as h, writeSidebarOnboardingChecklistMinimized as g, writeSidebarOnboardingChecklistSlackJoined as _ } from "./sidebar-onboarding-checklist-storage.js";
+import { usePaginatedConversations as v } from "../../../hooks/query/use-paginated-conversations.js";
+import { useOnboardingCompletion as y } from "../onboarding/use-onboarding-completion.js";
+import { isConfigureLlmChecklistItemComplete as b } from "./sidebar-onboarding-checklist-llm-complete.js";
+import { useEffect as x, useMemo as S, useState as C, useSyncExternalStore as w } from "react";
+//#region src/components/features/sidebar/use-sidebar-onboarding-checklist.ts
+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({
+		limit: 1,
+		offset: 0,
+		enabled: B?.status === "ok"
+	});
+	x(() => {
+		c(E) && (A || (m(!0), j(!0)));
+	}, [E, A]);
+	let H = S(() => {
+		let e = (z?.pages[0]?.items.length ?? 0) > 0, t = (V?.total ?? 0) > 0;
+		return {
+			"configure-llm": b(P, F, I, L, R),
+			"connect-mcp": T(P?.agent_settings?.mcp_config),
+			"start-conversation": e,
+			"schedule-task": t,
+			"customize-agent": A,
+			"join-slack": M
+		};
+	}, [
+		V?.total,
+		z?.pages,
+		A,
+		M,
+		F,
+		I,
+		R,
+		L,
+		P,
+		P?.agent_settings?.mcp_config
+	]), U = S(() => s.map((e) => ({
+		id: e,
+		isComplete: H[e]
+	})), [H]), W = U.filter((e) => e.isComplete).length, G = W === U.length, K = t && !D && !G;
+	return {
+		items: U,
+		completedCount: W,
+		totalCount: U.length,
+		isVisible: K,
+		isMinimized: O,
+		dismiss: () => {
+			h(!0);
+		},
+		toggleMinimized: () => {
+			k((e) => {
+				let t = !e;
+				return g(t), t;
+			});
+		},
+		markJoinSlackComplete: () => {
+			M || (_(!0), N(!0));
+		}
+	};
+}
+//#endregion
+export { E as useSidebarOnboardingChecklist };
+//# sourceMappingURL=use-sidebar-onboarding-checklist.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"use-sidebar-onboarding-checklist.js","names":[],"sources":["../../../../src/components/features/sidebar/use-sidebar-onboarding-checklist.ts"],"sourcesContent":["import { useEffect, useMemo, useState, useSyncExternalStore } from \"react\";\nimport { useOnboardingCompletion } from \"#/components/features/onboarding/use-onboarding-completion\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useAutomations } from \"#/hooks/query/use-automations\";\nimport { useAutomationHealth } from \"#/hooks/query/use-automation-health\";\nimport { usePaginatedConversations } from \"#/hooks/query/use-paginated-conversations\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { useLlmProfiles } from \"#/hooks/query/use-llm-profiles\";\nimport { useLlmConfigured } from \"#/hooks/use-llm-configured\";\nimport { parseMcpConfig } from \"#/utils/mcp-config\";\nimport {\n isCustomizeChecklistPath,\n SIDEBAR_ONBOARDING_CHECKLIST_ITEM_IDS,\n type SidebarOnboardingChecklistItemId,\n} from \"./sidebar-onboarding-checklist.constants\";\nimport { isConfigureLlmChecklistItemComplete } from \"./sidebar-onboarding-checklist-llm-complete\";\nimport {\n readSidebarOnboardingChecklistCustomizeExplored,\n readSidebarOnboardingChecklistMinimized,\n readSidebarOnboardingChecklistSlackJoined,\n subscribeSidebarOnboardingChecklistDismissed,\n getSidebarOnboardingChecklistDismissedSnapshot,\n writeSidebarOnboardingChecklistCustomizeExplored,\n writeSidebarOnboardingChecklistDismissed,\n writeSidebarOnboardingChecklistMinimized,\n writeSidebarOnboardingChecklistSlackJoined,\n} from \"./sidebar-onboarding-checklist-storage\";\n\nexport interface SidebarOnboardingChecklistItemState {\n id: SidebarOnboardingChecklistItemId;\n isComplete: boolean;\n}\n\nfunction hasConfiguredMcpServers(mcpConfig: unknown): boolean {\n return Object.keys(parseMcpConfig(mcpConfig)).length > 0;\n}\n\nexport function useSidebarOnboardingChecklist() {\n const { isCompleted: onboardingCompleted } = useOnboardingCompletion();\n const { currentPath } = useNavigation();\n const isDismissed = useSyncExternalStore(\n subscribeSidebarOnboardingChecklistDismissed,\n getSidebarOnboardingChecklistDismissedSnapshot,\n () => false,\n );\n const [isMinimized, setIsMinimized] = useState(\n readSidebarOnboardingChecklistMinimized,\n );\n const [hasExploredCustomize, setHasExploredCustomize] = useState(\n readSidebarOnboardingChecklistCustomizeExplored,\n );\n const [hasJoinedSlack, setHasJoinedSlack] = useState(\n readSidebarOnboardingChecklistSlackJoined,\n );\n\n const { data: settings } = useSettings();\n const { isConfigured: isLlmConfigured, isLoading: isLlmConfiguredLoading } =\n useLlmConfigured();\n const { data: profilesData, isLoading: isProfilesLoading } = useLlmProfiles();\n const { data: conversationPage } = usePaginatedConversations(1);\n const { data: healthData } = useAutomationHealth();\n const isAutomationBackendHealthy = healthData?.status === \"ok\";\n const { data: automationsData } = useAutomations({\n limit: 1,\n offset: 0,\n enabled: isAutomationBackendHealthy,\n });\n\n useEffect(() => {\n if (!isCustomizeChecklistPath(currentPath)) {\n return;\n }\n\n if (hasExploredCustomize) {\n return;\n }\n\n writeSidebarOnboardingChecklistCustomizeExplored(true);\n setHasExploredCustomize(true);\n }, [currentPath, hasExploredCustomize]);\n\n const completionById = useMemo(() => {\n const hasConversation = (conversationPage?.pages[0]?.items.length ?? 0) > 0;\n const hasAutomation = (automationsData?.total ?? 0) > 0;\n\n return {\n \"configure-llm\": isConfigureLlmChecklistItemComplete(\n settings,\n isLlmConfigured,\n isLlmConfiguredLoading,\n profilesData,\n isProfilesLoading,\n ),\n \"connect-mcp\": hasConfiguredMcpServers(\n settings?.agent_settings?.mcp_config,\n ),\n \"start-conversation\": hasConversation,\n \"schedule-task\": hasAutomation,\n \"customize-agent\": hasExploredCustomize,\n \"join-slack\": hasJoinedSlack,\n } satisfies Record<SidebarOnboardingChecklistItemId, boolean>;\n }, [\n automationsData?.total,\n conversationPage?.pages,\n hasExploredCustomize,\n hasJoinedSlack,\n isLlmConfigured,\n isLlmConfiguredLoading,\n isProfilesLoading,\n profilesData,\n settings,\n settings?.agent_settings?.mcp_config,\n ]);\n\n const items = useMemo(\n (): SidebarOnboardingChecklistItemState[] =>\n SIDEBAR_ONBOARDING_CHECKLIST_ITEM_IDS.map((id) => ({\n id,\n isComplete: completionById[id],\n })),\n [completionById],\n );\n\n const completedCount = items.filter((item) => item.isComplete).length;\n const isAllComplete = completedCount === items.length;\n\n const isVisible = onboardingCompleted && !isDismissed && !isAllComplete;\n\n const dismiss = () => {\n writeSidebarOnboardingChecklistDismissed(true);\n };\n\n const toggleMinimized = () => {\n setIsMinimized((current) => {\n const next = !current;\n writeSidebarOnboardingChecklistMinimized(next);\n return next;\n });\n };\n\n const markJoinSlackComplete = () => {\n if (hasJoinedSlack) {\n return;\n }\n writeSidebarOnboardingChecklistSlackJoined(true);\n setHasJoinedSlack(true);\n };\n\n return {\n items,\n completedCount,\n totalCount: items.length,\n isVisible,\n isMinimized,\n dismiss,\n toggleMinimized,\n markJoinSlackComplete,\n };\n}\n"],"mappings":";;;;;;;;;;;;;;AAiCA,SAAS,EAAwB,GAA6B;CAC5D,OAAO,OAAO,KAAK,EAAe,CAAS,CAAC,EAAE,SAAS;AACzD;AAEA,SAAgB,IAAgC;CAC9C,IAAM,EAAE,aAAa,MAAwB,EAAwB,GAC/D,EAAE,mBAAgB,EAAc,GAChC,IAAc,EAClB,GACA,SACM,EACR,GACM,CAAC,GAAa,KAAkB,EACpC,CACF,GACM,CAAC,GAAsB,KAA2B,EACtD,CACF,GACM,CAAC,GAAgB,KAAqB,EAC1C,CACF,GAEM,EAAE,MAAM,MAAa,EAAY,GACjC,EAAE,cAAc,GAAiB,WAAW,MAChD,EAAiB,GACb,EAAE,MAAM,GAAc,WAAW,MAAsB,EAAe,GACtE,EAAE,MAAM,MAAqB,EAA0B,CAAC,GACxD,EAAE,MAAM,MAAe,EAAoB,GAE3C,EAAE,MAAM,MAAoB,EAAe;EAC/C,OAAO;EACP,QAAQ;EACR,SAJiC,GAAY,WAAW;CAK1D,CAAC;CAED,QAAgB;EACT,EAAyB,CAAW,MAIrC,MAIJ,EAAiD,EAAI,GACrD,EAAwB,EAAI;CAC9B,GAAG,CAAC,GAAa,CAAoB,CAAC;CAEtC,IAAM,IAAiB,QAAc;EACnC,IAAM,KAAmB,GAAkB,MAAM,IAAI,MAAM,UAAU,KAAK,GACpE,KAAiB,GAAiB,SAAS,KAAK;EAEtD,OAAO;GACL,iBAAiB,EACf,GACA,GACA,GACA,GACA,CACF;GACA,eAAe,EACb,GAAU,gBAAgB,UAC5B;GACA,sBAAsB;GACtB,iBAAiB;GACjB,mBAAmB;GACnB,cAAc;EAChB;CACF,GAAG;EACD,GAAiB;EACjB,GAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAU,gBAAgB;CAC5B,CAAC,GAEK,IAAQ,QAEV,EAAsC,KAAK,OAAQ;EACjD;EACA,YAAY,EAAe;CAC7B,EAAE,GACJ,CAAC,CAAc,CACjB,GAEM,IAAiB,EAAM,QAAQ,MAAS,EAAK,UAAU,EAAE,QACzD,IAAgB,MAAmB,EAAM,QAEzC,IAAY,KAAuB,CAAC,KAAe,CAAC;CAsB1D,OAAO;EACL;EACA;EACA,YAAY,EAAM;EAClB;EACA;EACA,eA1BoB;GACpB,EAAyC,EAAI;EAC/C;EAyBE,uBAvB4B;GAC5B,GAAgB,MAAY;IAC1B,IAAM,IAAO,CAAC;IAEd,OADA,EAAyC,CAAI,GACtC;GACT,CAAC;EACH;EAkBE,6BAhBkC;GAC9B,MAGJ,EAA2C,EAAI,GAC/C,EAAkB,EAAI;EACxB;CAWA;AACF"}

package/dist/components/features/skills/add-skill-modal.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/Trans.cjs"),n=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),r=require("../../../i18n/declaration.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../icons/checkmark.cjs"),o=require("../../../icons/copy.cjs"),s=require("../../shared/modals/modal-backdrop.cjs"),c=require("../../../utils/modal-classes.cjs"),l=require("../../shared/modals/modal-close-button.cjs"),u=require("../settings/brand-button.cjs"),d=require("../../../constants/skills-docs.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=[r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_1,r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_2,r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_3,r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_4,r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_5],h={cmd:(0,p.jsx)(g,{}),path:(0,p.jsx)(g,{}),env:(0,p.jsx)(g,{})};function g({children:e}){return(0,p.jsx)(`code`,{className:i.cn(`mx-0.5 inline-block rounded-sm border border-[var(--oh-border-subtle)]`,`bg-[var(--oh-surface-raised)] px-1.5 py-0.5 align-baseline font-mono text-[11px] text-white`),children:e})}function _(){let{t:e}=n.useTranslation(`openhands`),[t,s]=f.default.useState(!1);return f.default.useEffect(()=>{if(!t)return;let e=setTimeout(()=>s(!1),2e3);return()=>clearTimeout(e)},[t]),(0,p.jsxs)(`div`,{className:`relative`,children:[(0,p.jsx)(`pre`,{"data-testid":`add-skill-modal-example`,className:i.cn(`overflow-x-auto rounded-sm border border-[var(--oh-border-subtle)]`,`bg-[var(--oh-surface-raised)] p-2 pr-10 text-xs text-white`),children:d.ADD_SKILL_EXAMPLE_COMMAND}),(0,p.jsx)(`button`,{type:`button`,"data-testid":`add-skill-modal-example-copy`,"aria-label":e(t?r.I18nKey.BUTTON$COPIED:r.I18nKey.BUTTON$COPY),disabled:t,onClick:async()=>{await navigator.clipboard.writeText(d.ADD_SKILL_EXAMPLE_COMMAND),s(!0)},className:i.cn(`absolute right-2 top-2 cursor-pointer rounded-sm border border-[var(--oh-border-subtle)]`,`bg-base-secondary p-1 text-tertiary-alt transition-colors`,`hover:bg-[var(--oh-surface)] hover:text-white disabled:cursor-default [&_path]:fill-current`),children:t?(0,p.jsx)(a.default,{width:14,height:14}):(0,p.jsx)(o.default,{width:14,height:14})})]})}function v({i18nKey:e}){return(0,p.jsx)(`p`,{className:`text-xs leading-relaxed text-tertiary-light`,children:(0,p.jsx)(t.Trans,{ns:`openhands`,i18nKey:e,components:h})})}function y({onClose:e}){let{t:a}=n.useTranslation(`openhands`);return(0,p.jsx)(s.ModalBackdrop,{onClose:e,"aria-label":a(r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_TITLE),children:(0,p.jsxs)(`div`,{"data-testid":`add-skill-modal`,className:`relative flex w-[520px] max-w-[90vw] max-h-[85vh] flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary`,children:[(0,p.jsx)(l.ModalCloseButton,{onClose:e,testId:`add-skill-modal-close`}),(0,p.jsxs)(`header`,{className:`flex-shrink-0 px-6 pb-4 pt-6`,children:[(0,p.jsx)(`h2`,{className:i.cn(`pr-6`,c.modalTitleLgClassName),children:a(r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_TITLE)}),(0,p.jsx)(`p`,{className:`mt-4 text-sm text-tertiary-light`,children:a(r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_INTRO)})]}),(0,p.jsxs)(`div`,{className:`flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-6 custom-scrollbar`,children:[(0,p.jsxs)(`section`,{className:`flex flex-col gap-2`,children:[(0,p.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:a(r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_CHAT_TITLE)}),(0,p.jsx)(v,{i18nKey:r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_CHAT_BODY}),(0,p.jsx)(`p`,{className:`text-xs text-tertiary-light`,children:a(r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_EXAMPLE_LABEL)}),(0,p.jsx)(_,{}),(0,p.jsx)(`ol`,{className:`list-decimal space-y-1 pl-4 text-xs leading-relaxed text-tertiary-light`,children:m.map(e=>(0,p.jsx)(`li`,{children:e===r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_3?(0,p.jsx)(t.Trans,{ns:`openhands`,i18nKey:e,components:h}):a(e)},e))})]}),(0,p.jsxs)(`section`,{className:`flex flex-col gap-1`,children:[(0,p.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:a(r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_URL_FORMATS_TITLE)}),(0,p.jsx)(`p`,{className:`text-xs leading-relaxed text-tertiary-light`,children:a(r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_URL_FORMATS)})]}),(0,p.jsxs)(`section`,{className:`flex flex-col gap-1`,children:[(0,p.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:a(r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_STORAGE_TITLE)}),(0,p.jsx)(v,{i18nKey:r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_STORAGE_BODY})]}),(0,p.jsx)(v,{i18nKey:r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_PRIVATE_REPOS}),(0,p.jsx)(`a`,{href:d.ADD_SKILL_DOCS_URL,target:`_blank`,rel:`noreferrer`,"data-testid":`add-skill-modal-docs-link`,className:`self-start text-xs text-[var(--oh-muted)] transition-colors hover:text-white hover:underline`,children:a(r.I18nKey.SETTINGS$SKILLS_ADD_MODAL_VIEW_DOCS)})]}),(0,p.jsx)(`footer`,{className:`flex flex-shrink-0 justify-end gap-2 px-6 pb-6 pt-4`,children:(0,p.jsx)(u.BrandButton,{type:`button`,variant:`secondary`,onClick:e,testId:`add-skill-modal-dismiss`,children:a(r.I18nKey.BUTTON$CLOSE)})})]})})}exports.AddSkillModal=y;
2	+ //# sourceMappingURL=add-skill-modal.cjs.map

package/dist/components/features/skills/add-skill-modal.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"add-skill-modal.cjs","names":[],"sources":["../../../../src/components/features/skills/add-skill-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { Trans, useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport {\n ADD_SKILL_DOCS_URL,\n ADD_SKILL_EXAMPLE_COMMAND,\n} from \"#/constants/skills-docs\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport CheckmarkIcon from \"#/icons/checkmark.svg?react\";\nimport CopyIcon from \"#/icons/copy.svg?react\";\n\ninterface AddSkillModalProps {\n onClose: () => void;\n}\n\nconst ADD_SKILL_STEP_KEYS = [\n I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_1,\n I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_2,\n I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_3,\n I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_4,\n I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_5,\n] as const;\n\nconst ADD_SKILL_INLINE_CODE_COMPONENTS = {\n cmd: <InlineCodeChip />,\n path: <InlineCodeChip />,\n env: <InlineCodeChip />,\n};\n\nfunction InlineCodeChip({ children }: { children?: React.ReactNode }) {\n return (\n <code\n className={cn(\n \"mx-0.5 inline-block rounded-sm border border-[var(--oh-border-subtle)]\",\n \"bg-[var(--oh-surface-raised)] px-1.5 py-0.5 align-baseline font-mono text-[11px] text-white\",\n )}\n >\n {children}\n </code>\n );\n}\n\nfunction AddSkillExampleBlock() {\n const { t } = useTranslation(\"openhands\");\n const [copied, setCopied] = React.useState(false);\n\n const handleCopy = async () => {\n await navigator.clipboard.writeText(ADD_SKILL_EXAMPLE_COMMAND);\n setCopied(true);\n };\n\n React.useEffect(() => {\n if (!copied) return undefined;\n const timeout = setTimeout(() => setCopied(false), 2000);\n return () => clearTimeout(timeout);\n }, [copied]);\n\n return (\n <div className=\"relative\">\n <pre\n data-testid=\"add-skill-modal-example\"\n className={cn(\n \"overflow-x-auto rounded-sm border border-[var(--oh-border-subtle)]\",\n \"bg-[var(--oh-surface-raised)] p-2 pr-10 text-xs text-white\",\n )}\n >\n {ADD_SKILL_EXAMPLE_COMMAND}\n </pre>\n <button\n type=\"button\"\n data-testid=\"add-skill-modal-example-copy\"\n aria-label={t(copied ? I18nKey.BUTTON$COPIED : I18nKey.BUTTON$COPY)}\n disabled={copied}\n onClick={handleCopy}\n className={cn(\n \"absolute right-2 top-2 cursor-pointer rounded-sm border border-[var(--oh-border-subtle)]\",\n \"bg-base-secondary p-1 text-tertiary-alt transition-colors\",\n \"hover:bg-[var(--oh-surface)] hover:text-white disabled:cursor-default [&_path]:fill-current\",\n )}\n >\n {copied ? (\n <CheckmarkIcon width={14} height={14} />\n ) : (\n <CopyIcon width={14} height={14} />\n )}\n </button>\n </div>\n );\n}\n\nfunction AddSkillTransParagraph({\n i18nKey,\n}: {\n i18nKey:\n | typeof I18nKey.SETTINGS$SKILLS_ADD_MODAL_CHAT_BODY\n | typeof I18nKey.SETTINGS$SKILLS_ADD_MODAL_STORAGE_BODY\n | typeof I18nKey.SETTINGS$SKILLS_ADD_MODAL_PRIVATE_REPOS;\n}) {\n return (\n <p className=\"text-xs leading-relaxed text-tertiary-light\">\n <Trans\n ns=\"openhands\"\n i18nKey={i18nKey}\n components={ADD_SKILL_INLINE_CODE_COMPONENTS}\n />\n </p>\n );\n}\n\nexport function AddSkillModal({ onClose }: AddSkillModalProps) {\n const { t } = useTranslation(\"openhands\");\n\n return (\n <ModalBackdrop\n onClose={onClose}\n aria-label={t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_TITLE)}\n >\n <div\n data-testid=\"add-skill-modal\"\n className=\"relative flex w-[520px] max-w-[90vw] max-h-[85vh] flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary\"\n >\n <ModalCloseButton onClose={onClose} testId=\"add-skill-modal-close\" />\n <header className=\"flex-shrink-0 px-6 pb-4 pt-6\">\n <h2 className={cn(\"pr-6\", modalTitleLgClassName)}>\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_TITLE)}\n </h2>\n <p className=\"mt-4 text-sm text-tertiary-light\">\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_INTRO)}\n </p>\n </header>\n\n <div className=\"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-6 custom-scrollbar\">\n <section className=\"flex flex-col gap-2\">\n <h3 className=\"text-sm font-semibold text-foreground\">\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_CHAT_TITLE)}\n </h3>\n <AddSkillTransParagraph\n i18nKey={I18nKey.SETTINGS$SKILLS_ADD_MODAL_CHAT_BODY}\n />\n <p className=\"text-xs text-tertiary-light\">\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_EXAMPLE_LABEL)}\n </p>\n <AddSkillExampleBlock />\n <ol className=\"list-decimal space-y-1 pl-4 text-xs leading-relaxed text-tertiary-light\">\n {ADD_SKILL_STEP_KEYS.map((key) => (\n <li key={key}>\n {key === I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_3 ? (\n <Trans\n ns=\"openhands\"\n i18nKey={key}\n components={ADD_SKILL_INLINE_CODE_COMPONENTS}\n />\n ) : (\n t(key)\n )}\n </li>\n ))}\n </ol>\n </section>\n\n <section className=\"flex flex-col gap-1\">\n <h3 className=\"text-sm font-semibold text-foreground\">\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_URL_FORMATS_TITLE)}\n </h3>\n <p className=\"text-xs leading-relaxed text-tertiary-light\">\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_URL_FORMATS)}\n </p>\n </section>\n\n <section className=\"flex flex-col gap-1\">\n <h3 className=\"text-sm font-semibold text-foreground\">\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_STORAGE_TITLE)}\n </h3>\n <AddSkillTransParagraph\n i18nKey={I18nKey.SETTINGS$SKILLS_ADD_MODAL_STORAGE_BODY}\n />\n </section>\n\n <AddSkillTransParagraph\n i18nKey={I18nKey.SETTINGS$SKILLS_ADD_MODAL_PRIVATE_REPOS}\n />\n\n <a\n href={ADD_SKILL_DOCS_URL}\n target=\"_blank\"\n rel=\"noreferrer\"\n data-testid=\"add-skill-modal-docs-link\"\n className=\"self-start text-xs text-[var(--oh-muted)] transition-colors hover:text-white hover:underline\"\n >\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_VIEW_DOCS)}\n </a>\n </div>\n\n <footer className=\"flex flex-shrink-0 justify-end gap-2 px-6 pb-6 pt-4\">\n <BrandButton\n type=\"button\"\n variant=\"secondary\"\n onClick={onClose}\n testId=\"add-skill-modal-dismiss\"\n >\n {t(I18nKey.BUTTON$CLOSE)}\n </BrandButton>\n </footer>\n </div>\n </ModalBackdrop>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/skills/add-skill-modal.js ADDED Viewed

@@ -0,0 +1,164 @@
+import { Trans as e } from "../../../node_modules/react-i18next/dist/es/Trans.js";
+import { useTranslation as t } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as n } from "../../../i18n/declaration.js";
+import { cn as r } from "../../../utils/utils.js";
+import i from "../../../icons/checkmark.js";
+import a from "../../../icons/copy.js";
+import { ModalBackdrop as o } from "../../shared/modals/modal-backdrop.js";
+import { modalTitleLgClassName as s } from "../../../utils/modal-classes.js";
+import { ModalCloseButton as c } from "../../shared/modals/modal-close-button.js";
+import { BrandButton as l } from "../settings/brand-button.js";
+import { ADD_SKILL_DOCS_URL as u, ADD_SKILL_EXAMPLE_COMMAND as d } from "../../../constants/skills-docs.js";
+import f from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/features/skills/add-skill-modal.tsx
+var h = [
+	n.SETTINGS$SKILLS_ADD_MODAL_STEP_1,
+	n.SETTINGS$SKILLS_ADD_MODAL_STEP_2,
+	n.SETTINGS$SKILLS_ADD_MODAL_STEP_3,
+	n.SETTINGS$SKILLS_ADD_MODAL_STEP_4,
+	n.SETTINGS$SKILLS_ADD_MODAL_STEP_5
+], g = {
+	cmd: /* @__PURE__ */ p(_, {}),
+	path: /* @__PURE__ */ p(_, {}),
+	env: /* @__PURE__ */ p(_, {})
+};
+function _({ children: e }) {
+	return /* @__PURE__ */ p("code", {
+		className: r("mx-0.5 inline-block rounded-sm border border-[var(--oh-border-subtle)]", "bg-[var(--oh-surface-raised)] px-1.5 py-0.5 align-baseline font-mono text-[11px] text-white"),
+		children: e
+	});
+}
+function v() {
+	let { t: e } = t("openhands"), [o, s] = f.useState(!1);
+	return f.useEffect(() => {
+		if (!o) return;
+		let e = setTimeout(() => s(!1), 2e3);
+		return () => clearTimeout(e);
+	}, [o]), /* @__PURE__ */ m("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ p("pre", {
+			"data-testid": "add-skill-modal-example",
+			className: r("overflow-x-auto rounded-sm border border-[var(--oh-border-subtle)]", "bg-[var(--oh-surface-raised)] p-2 pr-10 text-xs text-white"),
+			children: d
+		}), /* @__PURE__ */ p("button", {
+			type: "button",
+			"data-testid": "add-skill-modal-example-copy",
+			"aria-label": e(o ? n.BUTTON$COPIED : n.BUTTON$COPY),
+			disabled: o,
+			onClick: async () => {
+				await navigator.clipboard.writeText(d), s(!0);
+			},
+			className: r("absolute right-2 top-2 cursor-pointer rounded-sm border border-[var(--oh-border-subtle)]", "bg-base-secondary p-1 text-tertiary-alt transition-colors", "hover:bg-[var(--oh-surface)] hover:text-white disabled:cursor-default [&_path]:fill-current"),
+			children: p(o ? i : a, {
+				width: 14,
+				height: 14
+			})
+		})]
+	});
+}
+function y({ i18nKey: t }) {
+	return /* @__PURE__ */ p("p", {
+		className: "text-xs leading-relaxed text-tertiary-light",
+		children: /* @__PURE__ */ p(e, {
+			ns: "openhands",
+			i18nKey: t,
+			components: g
+		})
+	});
+}
+function b({ onClose: i }) {
+	let { t: a } = t("openhands");
+	return /* @__PURE__ */ p(o, {
+		onClose: i,
+		"aria-label": a(n.SETTINGS$SKILLS_ADD_MODAL_TITLE),
+		children: /* @__PURE__ */ m("div", {
+			"data-testid": "add-skill-modal",
+			className: "relative flex w-[520px] max-w-[90vw] max-h-[85vh] flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary",
+			children: [
+				/* @__PURE__ */ p(c, {
+					onClose: i,
+					testId: "add-skill-modal-close"
+				}),
+				/* @__PURE__ */ m("header", {
+					className: "flex-shrink-0 px-6 pb-4 pt-6",
+					children: [/* @__PURE__ */ p("h2", {
+						className: r("pr-6", s),
+						children: a(n.SETTINGS$SKILLS_ADD_MODAL_TITLE)
+					}), /* @__PURE__ */ p("p", {
+						className: "mt-4 text-sm text-tertiary-light",
+						children: a(n.SETTINGS$SKILLS_ADD_MODAL_INTRO)
+					})]
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-6 custom-scrollbar",
+					children: [
+						/* @__PURE__ */ m("section", {
+							className: "flex flex-col gap-2",
+							children: [
+								/* @__PURE__ */ p("h3", {
+									className: "text-sm font-semibold text-foreground",
+									children: a(n.SETTINGS$SKILLS_ADD_MODAL_CHAT_TITLE)
+								}),
+								/* @__PURE__ */ p(y, { i18nKey: n.SETTINGS$SKILLS_ADD_MODAL_CHAT_BODY }),
+								/* @__PURE__ */ p("p", {
+									className: "text-xs text-tertiary-light",
+									children: a(n.SETTINGS$SKILLS_ADD_MODAL_EXAMPLE_LABEL)
+								}),
+								/* @__PURE__ */ p(v, {}),
+								/* @__PURE__ */ p("ol", {
+									className: "list-decimal space-y-1 pl-4 text-xs leading-relaxed text-tertiary-light",
+									children: h.map((t) => /* @__PURE__ */ p("li", { children: t === n.SETTINGS$SKILLS_ADD_MODAL_STEP_3 ? /* @__PURE__ */ p(e, {
+										ns: "openhands",
+										i18nKey: t,
+										components: g
+									}) : a(t) }, t))
+								})
+							]
+						}),
+						/* @__PURE__ */ m("section", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ p("h3", {
+								className: "text-sm font-semibold text-foreground",
+								children: a(n.SETTINGS$SKILLS_ADD_MODAL_URL_FORMATS_TITLE)
+							}), /* @__PURE__ */ p("p", {
+								className: "text-xs leading-relaxed text-tertiary-light",
+								children: a(n.SETTINGS$SKILLS_ADD_MODAL_URL_FORMATS)
+							})]
+						}),
+						/* @__PURE__ */ m("section", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ p("h3", {
+								className: "text-sm font-semibold text-foreground",
+								children: a(n.SETTINGS$SKILLS_ADD_MODAL_STORAGE_TITLE)
+							}), /* @__PURE__ */ p(y, { i18nKey: n.SETTINGS$SKILLS_ADD_MODAL_STORAGE_BODY })]
+						}),
+						/* @__PURE__ */ p(y, { i18nKey: n.SETTINGS$SKILLS_ADD_MODAL_PRIVATE_REPOS }),
+						/* @__PURE__ */ p("a", {
+							href: u,
+							target: "_blank",
+							rel: "noreferrer",
+							"data-testid": "add-skill-modal-docs-link",
+							className: "self-start text-xs text-[var(--oh-muted)] transition-colors hover:text-white hover:underline",
+							children: a(n.SETTINGS$SKILLS_ADD_MODAL_VIEW_DOCS)
+						})
+					]
+				}),
+				/* @__PURE__ */ p("footer", {
+					className: "flex flex-shrink-0 justify-end gap-2 px-6 pb-6 pt-4",
+					children: /* @__PURE__ */ p(l, {
+						type: "button",
+						variant: "secondary",
+						onClick: i,
+						testId: "add-skill-modal-dismiss",
+						children: a(n.BUTTON$CLOSE)
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { b as AddSkillModal };
+//# sourceMappingURL=add-skill-modal.js.map

package/dist/components/features/skills/add-skill-modal.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"add-skill-modal.js","names":[],"sources":["../../../../src/components/features/skills/add-skill-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { Trans, useTranslation } from \"react-i18next\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport {\n ADD_SKILL_DOCS_URL,\n ADD_SKILL_EXAMPLE_COMMAND,\n} from \"#/constants/skills-docs\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport CheckmarkIcon from \"#/icons/checkmark.svg?react\";\nimport CopyIcon from \"#/icons/copy.svg?react\";\n\ninterface AddSkillModalProps {\n onClose: () => void;\n}\n\nconst ADD_SKILL_STEP_KEYS = [\n I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_1,\n I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_2,\n I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_3,\n I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_4,\n I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_5,\n] as const;\n\nconst ADD_SKILL_INLINE_CODE_COMPONENTS = {\n cmd: <InlineCodeChip />,\n path: <InlineCodeChip />,\n env: <InlineCodeChip />,\n};\n\nfunction InlineCodeChip({ children }: { children?: React.ReactNode }) {\n return (\n <code\n className={cn(\n \"mx-0.5 inline-block rounded-sm border border-[var(--oh-border-subtle)]\",\n \"bg-[var(--oh-surface-raised)] px-1.5 py-0.5 align-baseline font-mono text-[11px] text-white\",\n )}\n >\n {children}\n </code>\n );\n}\n\nfunction AddSkillExampleBlock() {\n const { t } = useTranslation(\"openhands\");\n const [copied, setCopied] = React.useState(false);\n\n const handleCopy = async () => {\n await navigator.clipboard.writeText(ADD_SKILL_EXAMPLE_COMMAND);\n setCopied(true);\n };\n\n React.useEffect(() => {\n if (!copied) return undefined;\n const timeout = setTimeout(() => setCopied(false), 2000);\n return () => clearTimeout(timeout);\n }, [copied]);\n\n return (\n <div className=\"relative\">\n <pre\n data-testid=\"add-skill-modal-example\"\n className={cn(\n \"overflow-x-auto rounded-sm border border-[var(--oh-border-subtle)]\",\n \"bg-[var(--oh-surface-raised)] p-2 pr-10 text-xs text-white\",\n )}\n >\n {ADD_SKILL_EXAMPLE_COMMAND}\n </pre>\n <button\n type=\"button\"\n data-testid=\"add-skill-modal-example-copy\"\n aria-label={t(copied ? I18nKey.BUTTON$COPIED : I18nKey.BUTTON$COPY)}\n disabled={copied}\n onClick={handleCopy}\n className={cn(\n \"absolute right-2 top-2 cursor-pointer rounded-sm border border-[var(--oh-border-subtle)]\",\n \"bg-base-secondary p-1 text-tertiary-alt transition-colors\",\n \"hover:bg-[var(--oh-surface)] hover:text-white disabled:cursor-default [&_path]:fill-current\",\n )}\n >\n {copied ? (\n <CheckmarkIcon width={14} height={14} />\n ) : (\n <CopyIcon width={14} height={14} />\n )}\n </button>\n </div>\n );\n}\n\nfunction AddSkillTransParagraph({\n i18nKey,\n}: {\n i18nKey:\n | typeof I18nKey.SETTINGS$SKILLS_ADD_MODAL_CHAT_BODY\n | typeof I18nKey.SETTINGS$SKILLS_ADD_MODAL_STORAGE_BODY\n | typeof I18nKey.SETTINGS$SKILLS_ADD_MODAL_PRIVATE_REPOS;\n}) {\n return (\n <p className=\"text-xs leading-relaxed text-tertiary-light\">\n <Trans\n ns=\"openhands\"\n i18nKey={i18nKey}\n components={ADD_SKILL_INLINE_CODE_COMPONENTS}\n />\n </p>\n );\n}\n\nexport function AddSkillModal({ onClose }: AddSkillModalProps) {\n const { t } = useTranslation(\"openhands\");\n\n return (\n <ModalBackdrop\n onClose={onClose}\n aria-label={t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_TITLE)}\n >\n <div\n data-testid=\"add-skill-modal\"\n className=\"relative flex w-[520px] max-w-[90vw] max-h-[85vh] flex-col rounded-xl border border-[var(--oh-border)] bg-base-secondary\"\n >\n <ModalCloseButton onClose={onClose} testId=\"add-skill-modal-close\" />\n <header className=\"flex-shrink-0 px-6 pb-4 pt-6\">\n <h2 className={cn(\"pr-6\", modalTitleLgClassName)}>\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_TITLE)}\n </h2>\n <p className=\"mt-4 text-sm text-tertiary-light\">\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_INTRO)}\n </p>\n </header>\n\n <div className=\"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-6 custom-scrollbar\">\n <section className=\"flex flex-col gap-2\">\n <h3 className=\"text-sm font-semibold text-foreground\">\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_CHAT_TITLE)}\n </h3>\n <AddSkillTransParagraph\n i18nKey={I18nKey.SETTINGS$SKILLS_ADD_MODAL_CHAT_BODY}\n />\n <p className=\"text-xs text-tertiary-light\">\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_EXAMPLE_LABEL)}\n </p>\n <AddSkillExampleBlock />\n <ol className=\"list-decimal space-y-1 pl-4 text-xs leading-relaxed text-tertiary-light\">\n {ADD_SKILL_STEP_KEYS.map((key) => (\n <li key={key}>\n {key === I18nKey.SETTINGS$SKILLS_ADD_MODAL_STEP_3 ? (\n <Trans\n ns=\"openhands\"\n i18nKey={key}\n components={ADD_SKILL_INLINE_CODE_COMPONENTS}\n />\n ) : (\n t(key)\n )}\n </li>\n ))}\n </ol>\n </section>\n\n <section className=\"flex flex-col gap-1\">\n <h3 className=\"text-sm font-semibold text-foreground\">\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_URL_FORMATS_TITLE)}\n </h3>\n <p className=\"text-xs leading-relaxed text-tertiary-light\">\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_URL_FORMATS)}\n </p>\n </section>\n\n <section className=\"flex flex-col gap-1\">\n <h3 className=\"text-sm font-semibold text-foreground\">\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_STORAGE_TITLE)}\n </h3>\n <AddSkillTransParagraph\n i18nKey={I18nKey.SETTINGS$SKILLS_ADD_MODAL_STORAGE_BODY}\n />\n </section>\n\n <AddSkillTransParagraph\n i18nKey={I18nKey.SETTINGS$SKILLS_ADD_MODAL_PRIVATE_REPOS}\n />\n\n <a\n href={ADD_SKILL_DOCS_URL}\n target=\"_blank\"\n rel=\"noreferrer\"\n data-testid=\"add-skill-modal-docs-link\"\n className=\"self-start text-xs text-[var(--oh-muted)] transition-colors hover:text-white hover:underline\"\n >\n {t(I18nKey.SETTINGS$SKILLS_ADD_MODAL_VIEW_DOCS)}\n </a>\n </div>\n\n <footer className=\"flex flex-shrink-0 justify-end gap-2 px-6 pb-6 pt-4\">\n <BrandButton\n type=\"button\"\n variant=\"secondary\"\n onClick={onClose}\n testId=\"add-skill-modal-dismiss\"\n >\n {t(I18nKey.BUTTON$CLOSE)}\n </BrandButton>\n </footer>\n </div>\n </ModalBackdrop>\n );\n}\n"],"mappings":"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"}

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

	@@ -0,0 +1,2 @@
1	+ 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;
2	+ //# sourceMappingURL=build-skill-pills.cjs.map

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

@@ -0,0 +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\";\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 ADDED Viewed

@@ -0,0 +1,96 @@
+import { I18nKey as e } from "../../../i18n/declaration.js";
+import { cn as t } from "../../../utils/utils.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 s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/features/skills/build-skill-pills.tsx
+function l(e, t, n) {
+	if (e) return `${e}-${t}-${n}`;
+}
+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 (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)
+		})
+	}), 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])
+		})
+	}), 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 })
+		})
+	}), 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
+		})
+	}), p === "detail" && u.compatibility && g.push({
+		id: `compatibility-${u.compatibility}`,
+		node: /* @__PURE__ */ s("span", {
+			"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__ */ s("span", { className: "size-1.5 rounded-full bg-[#fca5a5]" }), d(e.SETTINGS$SKILLS_DISABLE_MODEL_INVOCATION)]
+		})
+	}), p === "detail" && u.allowed_tools) for (let e of u.allowed_tools) g.push({
+		id: `allowed-tool-${e}`,
+		node: /* @__PURE__ */ s("span", {
+			"data-testid": l(m, u.name, `tool-${e}`),
+			className: t(r, "font-mono"),
+			children: e
+		})
+	});
+	if (p === "detail" && u.metadata) for (let [e, t] of Object.entries(u.metadata)) g.push({
+		id: `metadata-${e}`,
+		node: /* @__PURE__ */ c("span", {
+			"data-testid": l(m, u.name, `metadata-${e}`),
+			className: r,
+			children: [
+				/* @__PURE__ */ c("span", {
+					className: "font-mono text-[10px] text-tertiary-light",
+					children: [e, ":"]
+				}),
+				" ",
+				t
+			]
+		})
+	});
+	for (let e of u.triggers ?? []) g.push({
+		id: `trigger-${e}`,
+		node: /* @__PURE__ */ s("span", {
+			"data-testid": l(m, u.name, `trigger-${e}`),
+			className: r,
+			children: e
+		})
+	});
+	return g;
+}
+//#endregion
+export { u as buildSkillPills };
+//# sourceMappingURL=build-skill-pills.js.map