@openhands/agent-canvas 1.9.0 → 1.11.0

package/dist/components/features/sidebar/sidebar-rail-body.js

@@ -16,93 +16,94 @@ import { OpenHandsLogoButton as S } from "../../shared/buttons/openhands-logo-bu
 import { BackendStatusDot as C } from "../backends/backend-status-dot.js";
 import { BackendSelector as w } from "../backends/backend-selector.js";
 import { CommandMenuTrigger as T } from "../command-menu/command-menu-trigger.js";
-import { SidebarConversationList as E } from "./sidebar-conversation-list.js";
-import D from "../../../icons/automations.js";
+import { AgentCanvasVersionTile as E } from "../settings/agent-canvas-version-tile.js";
+import { SidebarConversationList as D } from "./sidebar-conversation-list.js";
+import O from "../../../icons/automations.js";
 import "react";
-import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import { jsx as k, jsxs as A } from "react/jsx-runtime";
 //#region src/components/features/sidebar/sidebar-rail-body.tsx
-var A = 18, j = 34, M = Math.round(j * 30 / 46);
-function N({ collapsed: N, showCollapseToggle: P, showMobileCloseButton: F = !1, onCloseMobile: I, collapseToggleLabel: L, onCollapse: R, onExpand: z, showCollapsedExpandButton: B, isExtensionsActive: V, currentPath: H, activeBackendHealth: U, collapsedBackendPopoverOpen: W, setCollapsedBackendPopoverOpen: G, collapsedBackendPopoverRef: K, collapsedBackendCloseTimer: q, onOpenAddBackend: J, onOpenManageBackends: Y }) {
-	let { t: X } = e("openhands"), Z = q;
-	return /* @__PURE__ */ k("div", {
+var j = 18, M = 34, N = Math.round(M * 30 / 46);
+function P({ collapsed: P, showCollapseToggle: F, showMobileCloseButton: I = !1, onCloseMobile: L, collapseToggleLabel: R, onCollapse: z, onExpand: B, showCollapsedExpandButton: V, isExtensionsActive: H, currentPath: U, activeBackendHealth: W, collapsedBackendPopoverOpen: G, setCollapsedBackendPopoverOpen: K, collapsedBackendPopoverRef: q, collapsedBackendCloseTimer: J, onOpenAddBackend: Y, onOpenManageBackends: X }) {
+	let { t: Z } = e("openhands"), Q = J;
+	return /* @__PURE__ */ A("div", {
 		className: "flex min-h-0 flex-1 flex-col",
 		children: [
-			/* @__PURE__ */ k("div", {
-				className: g(N),
+			/* @__PURE__ */ A("div", {
+				className: g(P),
 				children: [
-					/* @__PURE__ */ k("div", {
-						className: s(N && P ? f : "flex min-w-0 shrink-0 items-center"),
-						children: [/* @__PURE__ */ O("div", {
-							className: s(N && P && "flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150", N && B && "opacity-0"),
-							children: /* @__PURE__ */ O(S, {
-								logoWidth: j,
-								logoHeight: M,
+					/* @__PURE__ */ A("div", {
+						className: s(P && F ? f : "flex min-w-0 shrink-0 items-center"),
+						children: [/* @__PURE__ */ k("div", {
+							className: s(P && F && "flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150", P && V && "opacity-0"),
+							children: /* @__PURE__ */ k(S, {
+								logoWidth: M,
+								logoHeight: N,
 								logoClassName: "max-w-none",
 								className: s(h, "overflow-visible")
 							})
-						}), N && P ? /* @__PURE__ */ O("button", {
+						}), P && F ? /* @__PURE__ */ k("button", {
 							type: "button",
 							"data-testid": "sidebar-collapse-toggle",
-							"aria-pressed": N,
-							"aria-label": L,
-							onClick: z,
-							className: s(p, B ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"),
-							children: /* @__PURE__ */ O(r, {
+							"aria-pressed": P,
+							"aria-label": R,
+							onClick: B,
+							className: s(p, V ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"),
+							children: /* @__PURE__ */ k(r, {
 								width: 14,
 								height: 14
 							})
 						}) : null]
 					}),
-					!N && P ? /* @__PURE__ */ O("button", {
+					!P && F ? /* @__PURE__ */ k("button", {
 						type: "button",
 						"data-testid": "sidebar-collapse-toggle",
-						"aria-pressed": N,
-						"aria-label": L,
-						onClick: R,
+						"aria-pressed": P,
+						"aria-label": R,
+						onClick: z,
 						className: s("hidden md:inline-flex ml-auto", m, "text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]"),
-						children: /* @__PURE__ */ O(n, {
+						children: /* @__PURE__ */ k(n, {
 							width: 14,
 							height: 14
 						})
 					}) : null,
-					!N && F ? /* @__PURE__ */ O("button", {
+					!P && I ? /* @__PURE__ */ k("button", {
 						type: "button",
 						"data-testid": "sidebar-mobile-drawer-close",
-						onClick: I,
-						"aria-label": X(t.SIDEBAR$CLOSE_MENU),
+						onClick: L,
+						"aria-label": Z(t.SIDEBAR$CLOSE_MENU),
 						className: s("inline-flex ml-auto", m, "text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]"),
-						children: /* @__PURE__ */ O(n, {
+						children: /* @__PURE__ */ k(n, {
 							width: 14,
 							height: 14
 						})
 					}) : null
 				]
 			}),
-			/* @__PURE__ */ k("nav", {
-				className: v(N),
+			/* @__PURE__ */ A("nav", {
+				className: v(P),
 				children: [
-					/* @__PURE__ */ O(T, { collapsed: N }),
-					/* @__PURE__ */ O(x, {
+					/* @__PURE__ */ k(T, { collapsed: P }),
+					/* @__PURE__ */ k(x, {
 						to: "/conversations",
 						end: !0,
-						label: X(t.SIDEBAR$NEW_CHAT),
+						label: Z(t.SIDEBAR$NEW_CHAT),
 						testId: "sidebar-conversations-link",
-						collapsed: N,
-						icon: /* @__PURE__ */ O(i, {
-							width: A,
-							height: A
+						collapsed: P,
+						icon: /* @__PURE__ */ k(i, {
+							width: j,
+							height: j
 						})
 					}),
-					/* @__PURE__ */ O(x, {
+					/* @__PURE__ */ k(x, {
 						to: "/customize",
-						label: X(t.NAV$CUSTOMIZE),
+						label: Z(t.NAV$CUSTOMIZE),
 						testId: "sidebar-skills-link",
-						collapsed: N,
-						forceActive: V,
-						icon: /* @__PURE__ */ k("svg", {
+						collapsed: P,
+						forceActive: H,
+						icon: /* @__PURE__ */ A("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
-							width: A,
-							height: A,
+							width: j,
+							height: j,
 							viewBox: "0 0 24 24",
 							fill: "none",
 							stroke: "currentColor",
@@ -111,116 +112,116 @@ function N({ collapsed: N, showCollapseToggle: P, showMobileCloseButton: F = !1,
 							strokeLinejoin: "round",
 							"aria-hidden": "true",
 							children: [
-								/* @__PURE__ */ O("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
-								/* @__PURE__ */ O("path", { d: "m7 16.5-4.74-2.85" }),
-								/* @__PURE__ */ O("path", { d: "m7 16.5 5-3" }),
-								/* @__PURE__ */ O("path", { d: "M7 16.5v5.17" }),
-								/* @__PURE__ */ O("path", { d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" }),
-								/* @__PURE__ */ O("path", { d: "m17 16.5-5-3" }),
-								/* @__PURE__ */ O("path", { d: "m17 16.5 4.74-2.85" }),
-								/* @__PURE__ */ O("path", { d: "m17 16.5v5.17" }),
-								/* @__PURE__ */ O("path", { d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" }),
-								/* @__PURE__ */ O("path", { d: "M12 8 7.26 5.15" }),
-								/* @__PURE__ */ O("path", { d: "m12 8 4.74-2.85" }),
-								/* @__PURE__ */ O("path", { d: "M12 13.5V8" })
+								/* @__PURE__ */ k("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
+								/* @__PURE__ */ k("path", { d: "m7 16.5-4.74-2.85" }),
+								/* @__PURE__ */ k("path", { d: "m7 16.5 5-3" }),
+								/* @__PURE__ */ k("path", { d: "M7 16.5v5.17" }),
+								/* @__PURE__ */ k("path", { d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" }),
+								/* @__PURE__ */ k("path", { d: "m17 16.5-5-3" }),
+								/* @__PURE__ */ k("path", { d: "m17 16.5 4.74-2.85" }),
+								/* @__PURE__ */ k("path", { d: "m17 16.5v5.17" }),
+								/* @__PURE__ */ k("path", { d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" }),
+								/* @__PURE__ */ k("path", { d: "M12 8 7.26 5.15" }),
+								/* @__PURE__ */ k("path", { d: "m12 8 4.74-2.85" }),
+								/* @__PURE__ */ k("path", { d: "M12 13.5V8" })
 							]
 						})
 					}),
-					/* @__PURE__ */ O(x, {
+					/* @__PURE__ */ k(x, {
 						to: c(),
-						label: l().sidebarLabel ?? X(t.SIDEBAR$AUTOMATIONS),
+						label: l().sidebarLabel ?? Z(t.SIDEBAR$AUTOMATIONS),
 						testId: "sidebar-automations-link",
-						collapsed: N,
-						icon: /* @__PURE__ */ O(D, {
-							width: A,
-							height: A
+						collapsed: P,
+						icon: /* @__PURE__ */ k(O, {
+							width: j,
+							height: j
 						})
 					})
 				]
 			}),
-			/* @__PURE__ */ O(E, { collapsed: N }),
-			N && P ? /* @__PURE__ */ k("nav", {
-				className: s(v(N), "mt-auto pb-2 cursor-pointer"),
-				children: [/* @__PURE__ */ O(u, {
-					content: X(t.SIDEBAR$SETTINGS),
+			/* @__PURE__ */ k(D, { collapsed: P }),
+			P && F ? /* @__PURE__ */ A("nav", {
+				className: s(v(P), "mt-auto pb-2 cursor-pointer"),
+				children: [/* @__PURE__ */ k(u, {
+					content: Z(t.SIDEBAR$SETTINGS),
 					placement: "right",
-					children: /* @__PURE__ */ k(d, {
+					children: /* @__PURE__ */ A(d, {
 						to: "/settings",
 						"data-testid": "collapsed-settings-link",
-						"aria-label": X(t.SIDEBAR$SETTINGS),
+						"aria-label": Z(t.SIDEBAR$SETTINGS),
 						className: y({ collapsed: !0 }),
-						children: [/* @__PURE__ */ O(b, {
-							active: H.startsWith("/settings"),
-							children: /* @__PURE__ */ O(o, {
-								width: A,
-								height: A
+						children: [/* @__PURE__ */ k(b, {
+							active: U.startsWith("/settings"),
+							children: /* @__PURE__ */ k(o, {
+								width: j,
+								height: j
 							})
-						}), /* @__PURE__ */ O("span", {
+						}), /* @__PURE__ */ k("span", {
 							className: _(!0),
-							children: X(t.SIDEBAR$SETTINGS)
+							children: Z(t.SIDEBAR$SETTINGS)
 						})]
 					})
-				}), /* @__PURE__ */ k("div", {
+				}), /* @__PURE__ */ A("div", {
 					className: "relative",
-					ref: K,
+					ref: q,
 					onMouseEnter: () => {
-						Z.current &&= (clearTimeout(Z.current), null), G(!0);
+						Q.current &&= (clearTimeout(Q.current), null), K(!0);
 					},
 					onMouseLeave: () => {
-						Z.current = setTimeout(() => G(!1), 150);
+						Q.current = setTimeout(() => K(!1), 150);
 					},
-					children: [/* @__PURE__ */ k("button", {
+					children: [/* @__PURE__ */ A("button", {
 						type: "button",
 						"data-testid": "collapsed-backend-selector-link",
-						"aria-label": X(t.BACKEND$MANAGE),
-						"aria-expanded": W,
+						"aria-label": Z(t.BACKEND$MANAGE),
+						"aria-expanded": G,
 						onMouseDown: (e) => {
 							e.preventDefault(), e.stopPropagation();
 						},
 						onMouseUp: (e) => e.stopPropagation(),
 						className: s(y({ collapsed: !0 }), "relative"),
-						children: [/* @__PURE__ */ O(b, {
-							active: W,
-							children: /* @__PURE__ */ k("span", {
+						children: [/* @__PURE__ */ k(b, {
+							active: G,
+							children: /* @__PURE__ */ A("span", {
 								className: "relative inline-flex size-[18px] shrink-0 items-center justify-center",
-								children: [/* @__PURE__ */ O(C, {
-									isConnected: U?.isConnected ?? null,
+								children: [/* @__PURE__ */ k(C, {
+									isConnected: W?.isConnected ?? null,
 									className: "absolute -left-0.5 -top-0.5 z-[1] pointer-events-none"
-								}), /* @__PURE__ */ O(a, {
-									width: A,
-									height: A
+								}), /* @__PURE__ */ k(a, {
+									width: j,
+									height: j
 								})]
 							})
-						}), /* @__PURE__ */ O("span", {
+						}), /* @__PURE__ */ k("span", {
 							className: _(!0),
-							children: X(t.BACKEND$MANAGE)
+							children: Z(t.BACKEND$MANAGE)
 						})]
-					}), W ? /* @__PURE__ */ O("div", {
+					}), G ? /* @__PURE__ */ k("div", {
 						className: "absolute bottom-[-4px] left-full pl-2.5 z-40 w-[272px]",
 						onClick: (e) => e.stopPropagation(),
-						children: /* @__PURE__ */ O(w, {
-							sidebarCollapsed: N,
+						children: /* @__PURE__ */ k(w, {
+							sidebarCollapsed: P,
 							hideTrigger: !0,
 							defaultOpen: !0,
 							openUpward: !0,
-							onSelectOption: () => G(!1),
-							onOpenAddBackend: J,
-							onOpenManageBackends: Y
+							onSelectOption: () => K(!1),
+							onOpenAddBackend: Y,
+							onOpenManageBackends: X
 						})
 					}) : null]
 				})]
 			}) : null,
-			N ? null : /* @__PURE__ */ O("div", {
-				className: s("flex flex-col items-stretch max-w-none box-border shrink-0", "-ml-2.5 w-[calc(100%+0.625rem)] border-t border-[var(--oh-border)] pt-2 px-2.5"),
-				children: /* @__PURE__ */ O(w, {
-					sidebarCollapsed: N,
+			P ? null : /* @__PURE__ */ A("div", {
+				className: s("flex flex-col items-stretch max-w-none box-border shrink-0 gap-2", "-ml-2.5 w-[calc(100%+0.625rem)] border-t border-[var(--oh-border)] pt-2 px-2.5"),
+				children: [/* @__PURE__ */ k(E, { hideWhenUpToDate: !0 }), /* @__PURE__ */ k(w, {
+					sidebarCollapsed: P,
 					openUpward: !0
-				})
+				})]
 			})
 		]
 	});
 }
 //#endregion
-export { N as SidebarRailBody };
+export { P as SidebarRailBody };
 
 //# sourceMappingURL=sidebar-rail-body.js.map

package/dist/components/features/sidebar/sidebar-rail-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-rail-body.js","names":[],"sources":["../../../../src/components/features/sidebar/sidebar-rail-body.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Plus,\n  Server,\n  Settings,\n} from \"lucide-react\";\nimport { OpenHandsLogoButton } from \"#/components/shared/buttons/openhands-logo-button\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport {\n  automationListPath,\n  getInterfaceCopy,\n} from \"#/manifests/automation-interface\";\nimport { SidebarCollapsedIconSlot } from \"./sidebar-collapsed-icon-slot\";\nimport { SidebarNavLink } from \"./sidebar-nav-link\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { BackendSelector } from \"#/components/features/backends/backend-selector\";\nimport { BackendStatusDot } from \"#/components/features/backends/backend-status-dot\";\nimport { CommandMenuTrigger } from \"#/components/features/command-menu/command-menu-trigger\";\nimport { SidebarConversationList } from \"./sidebar-conversation-list\";\nimport AutomationsIcon from \"#/icons/automations.svg?react\";\nimport {\n  SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,\n  SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS,\n  SIDEBAR_ICON_BUTTON_CLASS,\n  SIDEBAR_ICON_SLOT_CLASS,\n  sidebarHeaderRowClassName,\n  sidebarNavLabelClassName,\n  sidebarNavListClassName,\n  sidebarNavRowClassName,\n} from \"./sidebar-layout\";\n\nconst ICON_SIZE = 18;\nconst SIDEBAR_LOGO_WIDTH = 34;\nconst SIDEBAR_LOGO_HEIGHT = Math.round((SIDEBAR_LOGO_WIDTH * 30) / 46);\n\nexport interface SidebarRailBodyProps {\n  collapsed: boolean;\n  showCollapseToggle: boolean;\n  showMobileCloseButton?: boolean;\n  onCloseMobile?: () => void;\n  collapseToggleLabel: string;\n  onCollapse: () => void;\n  onExpand: () => void;\n  showCollapsedExpandButton: boolean;\n  isExtensionsActive: boolean;\n  currentPath: string;\n  activeBackendHealth: { isConnected: boolean | null } | undefined;\n  collapsedBackendPopoverOpen: boolean;\n  setCollapsedBackendPopoverOpen: (open: boolean) => void;\n  collapsedBackendPopoverRef: React.RefObject<HTMLDivElement | null>;\n  collapsedBackendCloseTimer: React.MutableRefObject<ReturnType<\n    typeof setTimeout\n  > | null>;\n  onOpenAddBackend: () => void;\n  onOpenManageBackends: () => void;\n}\n\nexport function SidebarRailBody({\n  collapsed,\n  showCollapseToggle,\n  showMobileCloseButton = false,\n  onCloseMobile,\n  collapseToggleLabel,\n  onCollapse,\n  onExpand,\n  showCollapsedExpandButton,\n  isExtensionsActive,\n  currentPath,\n  activeBackendHealth,\n  collapsedBackendPopoverOpen,\n  setCollapsedBackendPopoverOpen,\n  collapsedBackendPopoverRef,\n  collapsedBackendCloseTimer,\n  onOpenAddBackend,\n  onOpenManageBackends,\n}: SidebarRailBodyProps) {\n  const { t } = useTranslation(\"openhands\");\n  const backendCloseTimerRef = collapsedBackendCloseTimer;\n\n  return (\n    <div className=\"flex min-h-0 flex-1 flex-col\">\n      <div className={sidebarHeaderRowClassName(collapsed)}>\n        <div\n          className={cn(\n            collapsed && showCollapseToggle\n              ? SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS\n              : \"flex min-w-0 shrink-0 items-center\",\n          )}\n        >\n          <div\n            className={cn(\n              collapsed &&\n                showCollapseToggle &&\n                \"flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150\",\n              collapsed && showCollapsedExpandButton && \"opacity-0\",\n            )}\n          >\n            <OpenHandsLogoButton\n              logoWidth={SIDEBAR_LOGO_WIDTH}\n              logoHeight={SIDEBAR_LOGO_HEIGHT}\n              logoClassName=\"max-w-none\"\n              className={cn(SIDEBAR_ICON_SLOT_CLASS, \"overflow-visible\")}\n            />\n          </div>\n          {collapsed && showCollapseToggle ? (\n            <button\n              type=\"button\"\n              data-testid=\"sidebar-collapse-toggle\"\n              aria-pressed={collapsed}\n              aria-label={collapseToggleLabel}\n              onClick={onExpand}\n              className={cn(\n                SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,\n                showCollapsedExpandButton\n                  ? \"opacity-100 pointer-events-auto\"\n                  : \"opacity-0 pointer-events-none\",\n              )}\n            >\n              <ChevronRight width={14} height={14} />\n            </button>\n          ) : null}\n        </div>\n        {!collapsed && showCollapseToggle ? (\n          <button\n            type=\"button\"\n            data-testid=\"sidebar-collapse-toggle\"\n            aria-pressed={collapsed}\n            aria-label={collapseToggleLabel}\n            onClick={onCollapse}\n            className={cn(\n              \"hidden md:inline-flex ml-auto\",\n              SIDEBAR_ICON_BUTTON_CLASS,\n              \"text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]\",\n            )}\n          >\n            <ChevronLeft width={14} height={14} />\n          </button>\n        ) : null}\n        {!collapsed && showMobileCloseButton ? (\n          <button\n            type=\"button\"\n            data-testid=\"sidebar-mobile-drawer-close\"\n            onClick={onCloseMobile}\n            aria-label={t(I18nKey.SIDEBAR$CLOSE_MENU)}\n            className={cn(\n              \"inline-flex ml-auto\",\n              SIDEBAR_ICON_BUTTON_CLASS,\n              \"text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]\",\n            )}\n          >\n            <ChevronLeft width={14} height={14} />\n          </button>\n        ) : null}\n      </div>\n\n      <nav className={sidebarNavListClassName(collapsed)}>\n        <CommandMenuTrigger collapsed={collapsed} />\n        <SidebarNavLink\n          to=\"/conversations\"\n          end\n          label={t(I18nKey.SIDEBAR$NEW_CHAT)}\n          testId=\"sidebar-conversations-link\"\n          collapsed={collapsed}\n          icon={<Plus width={ICON_SIZE} height={ICON_SIZE} />}\n        />\n        <SidebarNavLink\n          to=\"/customize\"\n          label={t(I18nKey.NAV$CUSTOMIZE)}\n          testId=\"sidebar-skills-link\"\n          collapsed={collapsed}\n          forceActive={isExtensionsActive}\n          icon={\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width={ICON_SIZE}\n              height={ICON_SIZE}\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z\" />\n              <path d=\"m7 16.5-4.74-2.85\" />\n              <path d=\"m7 16.5 5-3\" />\n              <path d=\"M7 16.5v5.17\" />\n              <path d=\"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z\" />\n              <path d=\"m17 16.5-5-3\" />\n              <path d=\"m17 16.5 4.74-2.85\" />\n              <path d=\"m17 16.5v5.17\" />\n              <path d=\"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z\" />\n              <path d=\"M12 8 7.26 5.15\" />\n              <path d=\"m12 8 4.74-2.85\" />\n              <path d=\"M12 13.5V8\" />\n            </svg>\n          }\n        />\n        <SidebarNavLink\n          to={automationListPath()}\n          label={\n            getInterfaceCopy().sidebarLabel ?? t(I18nKey.SIDEBAR$AUTOMATIONS)\n          }\n          testId=\"sidebar-automations-link\"\n          collapsed={collapsed}\n          icon={<AutomationsIcon width={ICON_SIZE} height={ICON_SIZE} />}\n        />\n      </nav>\n\n      <SidebarConversationList collapsed={collapsed} />\n\n      {collapsed && showCollapseToggle ? (\n        <nav\n          className={cn(\n            sidebarNavListClassName(collapsed),\n            \"mt-auto pb-2 cursor-pointer\",\n          )}\n        >\n          <StyledTooltip\n            content={t(I18nKey.SIDEBAR$SETTINGS)}\n            placement=\"right\"\n          >\n            <NavigationLink\n              to=\"/settings\"\n              data-testid=\"collapsed-settings-link\"\n              aria-label={t(I18nKey.SIDEBAR$SETTINGS)}\n              className={sidebarNavRowClassName({ collapsed: true })}\n            >\n              <SidebarCollapsedIconSlot\n                active={currentPath.startsWith(\"/settings\")}\n              >\n                <Settings width={ICON_SIZE} height={ICON_SIZE} />\n              </SidebarCollapsedIconSlot>\n              <span className={sidebarNavLabelClassName(true)}>\n                {t(I18nKey.SIDEBAR$SETTINGS)}\n              </span>\n            </NavigationLink>\n          </StyledTooltip>\n          <div\n            className=\"relative\"\n            ref={collapsedBackendPopoverRef}\n            onMouseEnter={() => {\n              if (backendCloseTimerRef.current) {\n                clearTimeout(backendCloseTimerRef.current);\n                backendCloseTimerRef.current = null;\n              }\n              setCollapsedBackendPopoverOpen(true);\n            }}\n            onMouseLeave={() => {\n              backendCloseTimerRef.current = setTimeout(\n                () => setCollapsedBackendPopoverOpen(false),\n                150,\n              );\n            }}\n          >\n            <button\n              type=\"button\"\n              data-testid=\"collapsed-backend-selector-link\"\n              aria-label={t(I18nKey.BACKEND$MANAGE)}\n              aria-expanded={collapsedBackendPopoverOpen}\n              onMouseDown={(event) => {\n                event.preventDefault();\n                event.stopPropagation();\n              }}\n              onMouseUp={(event) => event.stopPropagation()}\n              className={cn(\n                sidebarNavRowClassName({ collapsed: true }),\n                \"relative\",\n              )}\n            >\n              <SidebarCollapsedIconSlot active={collapsedBackendPopoverOpen}>\n                <span className=\"relative inline-flex size-[18px] shrink-0 items-center justify-center\">\n                  <BackendStatusDot\n                    isConnected={activeBackendHealth?.isConnected ?? null}\n                    className=\"absolute -left-0.5 -top-0.5 z-[1] pointer-events-none\"\n                  />\n                  <Server width={ICON_SIZE} height={ICON_SIZE} />\n                </span>\n              </SidebarCollapsedIconSlot>\n              <span className={sidebarNavLabelClassName(true)}>\n                {t(I18nKey.BACKEND$MANAGE)}\n              </span>\n            </button>\n            {collapsedBackendPopoverOpen ? (\n              <div\n                className=\"absolute bottom-[-4px] left-full pl-2.5 z-40 w-[272px]\"\n                onClick={(event) => event.stopPropagation()}\n              >\n                <BackendSelector\n                  sidebarCollapsed={collapsed}\n                  hideTrigger\n                  defaultOpen\n                  openUpward\n                  onSelectOption={() => setCollapsedBackendPopoverOpen(false)}\n                  onOpenAddBackend={onOpenAddBackend}\n                  onOpenManageBackends={onOpenManageBackends}\n                />\n              </div>\n            ) : null}\n          </div>\n        </nav>\n      ) : null}\n\n      {!collapsed ? (\n        <div\n          className={cn(\n            \"flex flex-col items-stretch max-w-none box-border shrink-0\",\n            \"-ml-2.5 w-[calc(100%+0.625rem)] border-t border-[var(--oh-border)] pt-2 px-2.5\",\n          )}\n        >\n          <BackendSelector sidebarCollapsed={collapsed} openUpward />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"sidebar-rail-body.js","names":[],"sources":["../../../../src/components/features/sidebar/sidebar-rail-body.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Plus,\n  Server,\n  Settings,\n} from \"lucide-react\";\nimport { OpenHandsLogoButton } from \"#/components/shared/buttons/openhands-logo-button\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport {\n  automationListPath,\n  getInterfaceCopy,\n} from \"#/manifests/automation-interface\";\nimport { SidebarCollapsedIconSlot } from \"./sidebar-collapsed-icon-slot\";\nimport { SidebarNavLink } from \"./sidebar-nav-link\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { BackendSelector } from \"#/components/features/backends/backend-selector\";\nimport { BackendStatusDot } from \"#/components/features/backends/backend-status-dot\";\nimport { CommandMenuTrigger } from \"#/components/features/command-menu/command-menu-trigger\";\nimport { AgentCanvasVersionTile } from \"#/components/features/settings/agent-canvas-version-tile\";\nimport { SidebarConversationList } from \"./sidebar-conversation-list\";\nimport AutomationsIcon from \"#/icons/automations.svg?react\";\nimport {\n  SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,\n  SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS,\n  SIDEBAR_ICON_BUTTON_CLASS,\n  SIDEBAR_ICON_SLOT_CLASS,\n  sidebarHeaderRowClassName,\n  sidebarNavLabelClassName,\n  sidebarNavListClassName,\n  sidebarNavRowClassName,\n} from \"./sidebar-layout\";\n\nconst ICON_SIZE = 18;\nconst SIDEBAR_LOGO_WIDTH = 34;\nconst SIDEBAR_LOGO_HEIGHT = Math.round((SIDEBAR_LOGO_WIDTH * 30) / 46);\n\nexport interface SidebarRailBodyProps {\n  collapsed: boolean;\n  showCollapseToggle: boolean;\n  showMobileCloseButton?: boolean;\n  onCloseMobile?: () => void;\n  collapseToggleLabel: string;\n  onCollapse: () => void;\n  onExpand: () => void;\n  showCollapsedExpandButton: boolean;\n  isExtensionsActive: boolean;\n  currentPath: string;\n  activeBackendHealth: { isConnected: boolean | null } | undefined;\n  collapsedBackendPopoverOpen: boolean;\n  setCollapsedBackendPopoverOpen: (open: boolean) => void;\n  collapsedBackendPopoverRef: React.RefObject<HTMLDivElement | null>;\n  collapsedBackendCloseTimer: React.MutableRefObject<ReturnType<\n    typeof setTimeout\n  > | null>;\n  onOpenAddBackend: () => void;\n  onOpenManageBackends: () => void;\n}\n\nexport function SidebarRailBody({\n  collapsed,\n  showCollapseToggle,\n  showMobileCloseButton = false,\n  onCloseMobile,\n  collapseToggleLabel,\n  onCollapse,\n  onExpand,\n  showCollapsedExpandButton,\n  isExtensionsActive,\n  currentPath,\n  activeBackendHealth,\n  collapsedBackendPopoverOpen,\n  setCollapsedBackendPopoverOpen,\n  collapsedBackendPopoverRef,\n  collapsedBackendCloseTimer,\n  onOpenAddBackend,\n  onOpenManageBackends,\n}: SidebarRailBodyProps) {\n  const { t } = useTranslation(\"openhands\");\n  const backendCloseTimerRef = collapsedBackendCloseTimer;\n\n  return (\n    <div className=\"flex min-h-0 flex-1 flex-col\">\n      <div className={sidebarHeaderRowClassName(collapsed)}>\n        <div\n          className={cn(\n            collapsed && showCollapseToggle\n              ? SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS\n              : \"flex min-w-0 shrink-0 items-center\",\n          )}\n        >\n          <div\n            className={cn(\n              collapsed &&\n                showCollapseToggle &&\n                \"flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150\",\n              collapsed && showCollapsedExpandButton && \"opacity-0\",\n            )}\n          >\n            <OpenHandsLogoButton\n              logoWidth={SIDEBAR_LOGO_WIDTH}\n              logoHeight={SIDEBAR_LOGO_HEIGHT}\n              logoClassName=\"max-w-none\"\n              className={cn(SIDEBAR_ICON_SLOT_CLASS, \"overflow-visible\")}\n            />\n          </div>\n          {collapsed && showCollapseToggle ? (\n            <button\n              type=\"button\"\n              data-testid=\"sidebar-collapse-toggle\"\n              aria-pressed={collapsed}\n              aria-label={collapseToggleLabel}\n              onClick={onExpand}\n              className={cn(\n                SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,\n                showCollapsedExpandButton\n                  ? \"opacity-100 pointer-events-auto\"\n                  : \"opacity-0 pointer-events-none\",\n              )}\n            >\n              <ChevronRight width={14} height={14} />\n            </button>\n          ) : null}\n        </div>\n        {!collapsed && showCollapseToggle ? (\n          <button\n            type=\"button\"\n            data-testid=\"sidebar-collapse-toggle\"\n            aria-pressed={collapsed}\n            aria-label={collapseToggleLabel}\n            onClick={onCollapse}\n            className={cn(\n              \"hidden md:inline-flex ml-auto\",\n              SIDEBAR_ICON_BUTTON_CLASS,\n              \"text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]\",\n            )}\n          >\n            <ChevronLeft width={14} height={14} />\n          </button>\n        ) : null}\n        {!collapsed && showMobileCloseButton ? (\n          <button\n            type=\"button\"\n            data-testid=\"sidebar-mobile-drawer-close\"\n            onClick={onCloseMobile}\n            aria-label={t(I18nKey.SIDEBAR$CLOSE_MENU)}\n            className={cn(\n              \"inline-flex ml-auto\",\n              SIDEBAR_ICON_BUTTON_CLASS,\n              \"text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]\",\n            )}\n          >\n            <ChevronLeft width={14} height={14} />\n          </button>\n        ) : null}\n      </div>\n\n      <nav className={sidebarNavListClassName(collapsed)}>\n        <CommandMenuTrigger collapsed={collapsed} />\n        <SidebarNavLink\n          to=\"/conversations\"\n          end\n          label={t(I18nKey.SIDEBAR$NEW_CHAT)}\n          testId=\"sidebar-conversations-link\"\n          collapsed={collapsed}\n          icon={<Plus width={ICON_SIZE} height={ICON_SIZE} />}\n        />\n        <SidebarNavLink\n          to=\"/customize\"\n          label={t(I18nKey.NAV$CUSTOMIZE)}\n          testId=\"sidebar-skills-link\"\n          collapsed={collapsed}\n          forceActive={isExtensionsActive}\n          icon={\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width={ICON_SIZE}\n              height={ICON_SIZE}\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z\" />\n              <path d=\"m7 16.5-4.74-2.85\" />\n              <path d=\"m7 16.5 5-3\" />\n              <path d=\"M7 16.5v5.17\" />\n              <path d=\"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z\" />\n              <path d=\"m17 16.5-5-3\" />\n              <path d=\"m17 16.5 4.74-2.85\" />\n              <path d=\"m17 16.5v5.17\" />\n              <path d=\"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z\" />\n              <path d=\"M12 8 7.26 5.15\" />\n              <path d=\"m12 8 4.74-2.85\" />\n              <path d=\"M12 13.5V8\" />\n            </svg>\n          }\n        />\n        <SidebarNavLink\n          to={automationListPath()}\n          label={\n            getInterfaceCopy().sidebarLabel ?? t(I18nKey.SIDEBAR$AUTOMATIONS)\n          }\n          testId=\"sidebar-automations-link\"\n          collapsed={collapsed}\n          icon={<AutomationsIcon width={ICON_SIZE} height={ICON_SIZE} />}\n        />\n      </nav>\n\n      <SidebarConversationList collapsed={collapsed} />\n\n      {collapsed && showCollapseToggle ? (\n        <nav\n          className={cn(\n            sidebarNavListClassName(collapsed),\n            \"mt-auto pb-2 cursor-pointer\",\n          )}\n        >\n          <StyledTooltip\n            content={t(I18nKey.SIDEBAR$SETTINGS)}\n            placement=\"right\"\n          >\n            <NavigationLink\n              to=\"/settings\"\n              data-testid=\"collapsed-settings-link\"\n              aria-label={t(I18nKey.SIDEBAR$SETTINGS)}\n              className={sidebarNavRowClassName({ collapsed: true })}\n            >\n              <SidebarCollapsedIconSlot\n                active={currentPath.startsWith(\"/settings\")}\n              >\n                <Settings width={ICON_SIZE} height={ICON_SIZE} />\n              </SidebarCollapsedIconSlot>\n              <span className={sidebarNavLabelClassName(true)}>\n                {t(I18nKey.SIDEBAR$SETTINGS)}\n              </span>\n            </NavigationLink>\n          </StyledTooltip>\n          <div\n            className=\"relative\"\n            ref={collapsedBackendPopoverRef}\n            onMouseEnter={() => {\n              if (backendCloseTimerRef.current) {\n                clearTimeout(backendCloseTimerRef.current);\n                backendCloseTimerRef.current = null;\n              }\n              setCollapsedBackendPopoverOpen(true);\n            }}\n            onMouseLeave={() => {\n              backendCloseTimerRef.current = setTimeout(\n                () => setCollapsedBackendPopoverOpen(false),\n                150,\n              );\n            }}\n          >\n            <button\n              type=\"button\"\n              data-testid=\"collapsed-backend-selector-link\"\n              aria-label={t(I18nKey.BACKEND$MANAGE)}\n              aria-expanded={collapsedBackendPopoverOpen}\n              onMouseDown={(event) => {\n                event.preventDefault();\n                event.stopPropagation();\n              }}\n              onMouseUp={(event) => event.stopPropagation()}\n              className={cn(\n                sidebarNavRowClassName({ collapsed: true }),\n                \"relative\",\n              )}\n            >\n              <SidebarCollapsedIconSlot active={collapsedBackendPopoverOpen}>\n                <span className=\"relative inline-flex size-[18px] shrink-0 items-center justify-center\">\n                  <BackendStatusDot\n                    isConnected={activeBackendHealth?.isConnected ?? null}\n                    className=\"absolute -left-0.5 -top-0.5 z-[1] pointer-events-none\"\n                  />\n                  <Server width={ICON_SIZE} height={ICON_SIZE} />\n                </span>\n              </SidebarCollapsedIconSlot>\n              <span className={sidebarNavLabelClassName(true)}>\n                {t(I18nKey.BACKEND$MANAGE)}\n              </span>\n            </button>\n            {collapsedBackendPopoverOpen ? (\n              <div\n                className=\"absolute bottom-[-4px] left-full pl-2.5 z-40 w-[272px]\"\n                onClick={(event) => event.stopPropagation()}\n              >\n                <BackendSelector\n                  sidebarCollapsed={collapsed}\n                  hideTrigger\n                  defaultOpen\n                  openUpward\n                  onSelectOption={() => setCollapsedBackendPopoverOpen(false)}\n                  onOpenAddBackend={onOpenAddBackend}\n                  onOpenManageBackends={onOpenManageBackends}\n                />\n              </div>\n            ) : null}\n          </div>\n        </nav>\n      ) : null}\n\n      {!collapsed ? (\n        <div\n          className={cn(\n            \"flex flex-col items-stretch max-w-none box-border shrink-0 gap-2\",\n            \"-ml-2.5 w-[calc(100%+0.625rem)] border-t border-[var(--oh-border)] pt-2 px-2.5\",\n          )}\n        >\n          <AgentCanvasVersionTile hideWhenUpToDate />\n          <BackendSelector sidebarCollapsed={collapsed} openUpward />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/sidebar/sidebar.d.ts

@@ -1 +1,2 @@
-export declare function Sidebar(): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export declare function Sidebar(): React.JSX.Element;

package/dist/components/features/sidebar/user-avatar.d.ts

@@ -2,5 +2,5 @@ interface UserAvatarProps {
     avatarUrl?: string;
     isLoading?: boolean;
 }
-export declare function UserAvatar({ avatarUrl, isLoading }: UserAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function UserAvatar({ avatarUrl, isLoading }: UserAvatarProps): import("react").JSX.Element;
 export {};

package/dist/components/features/skills/add-skill-modal.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 interface AddSkillModalProps {
     onClose: () => void;
 }
-export declare function AddSkillModal({ onClose }: AddSkillModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function AddSkillModal({ onClose }: AddSkillModalProps): React.JSX.Element;
 export {};

package/dist/components/features/skills/extensions-mobile-hub.d.ts

@@ -1 +1 @@
-export declare function ExtensionsMobileHub(): import("react/jsx-runtime").JSX.Element;
+export declare function ExtensionsMobileHub(): import("react").JSX.Element;

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

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

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

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

package/dist/components/features/skills/extensions-navigation.d.ts

@@ -6,5 +6,5 @@ interface ExtensionNavItem {
     comingSoon?: boolean;
 }
 export declare const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[];
-export declare function ExtensionsNavigation(): import("react/jsx-runtime").JSX.Element;
+export declare function ExtensionsNavigation(): import("react").JSX.Element;
 export {};

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

@@ -13,21 +13,21 @@ import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/features/skills/extensions-navigation.tsx
 var m = "/skills", h = "/plugins", g = [
 	{
-		to: "/skills",
-		label: "Skills",
-		icon: /* @__PURE__ */ f(s, {
+		to: "/mcp",
+		label: "MCP Servers",
+		icon: /* @__PURE__ */ f(d, {
 			width: 16,
-			height: 16,
-			"aria-hidden": "true"
+			height: 16
 		}),
 		end: !0
 	},
 	{
-		to: "/mcp",
-		label: "MCP Servers",
-		icon: /* @__PURE__ */ f(d, {
+		to: "/skills",
+		label: "Skills",
+		icon: /* @__PURE__ */ f(s, {
 			width: 16,
-			height: 16
+			height: 16,
+			"aria-hidden": "true"
 		}),
 		end: !0
 	},

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

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

package/dist/components/features/skills/skill-card-pill-row.d.ts

@@ -9,5 +9,5 @@ interface SkillCardPillRowProps {
     pills: SkillCardPill[];
     testId: string;
 }
-export declare function SkillCardPillRow({ pills, testId }: SkillCardPillRowProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SkillCardPillRow({ pills, testId }: SkillCardPillRowProps): React.JSX.Element | null;
 export {};

package/dist/components/features/skills/skill-card.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { SkillInfo } from "#/types/settings";
 interface SkillCardProps {
     skill: SkillInfo;
@@ -5,5 +6,5 @@ interface SkillCardProps {
     onOpen: () => void;
     onToggle: (enabled: boolean) => void;
 }
-export declare function SkillCard({ skill, enabled, onOpen, onToggle, }: SkillCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkillCard({ skill, enabled, onOpen, onToggle, }: SkillCardProps): React.JSX.Element;
 export {};

package/dist/components/features/skills/skill-detail-modal.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { SkillInfo } from "#/types/settings";
 interface SkillDetailModalProps {
     skill: SkillInfo;
@@ -5,5 +6,5 @@ interface SkillDetailModalProps {
     onToggle: (enabled: boolean) => void;
     onClose: () => void;
 }
-export declare function SkillDetailModal({ skill, enabled, onToggle, onClose, }: SkillDetailModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkillDetailModal({ skill, enabled, onToggle, onClose, }: SkillDetailModalProps): React.JSX.Element;
 export {};