npm - @openhands/agent-canvas - Versions diffs - 1.0.0-alpha.6 → 1.0.0-alpha.8 - Mend

@openhands/agent-canvas 1.0.0-alpha.6 → 1.0.0-alpha.8

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 (728) hide show

package/dist/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-tabs-context-menu.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport {\n useConversationStore,\n type ConversationTab,\n} from \"#/stores/conversation-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport TerminalIcon from \"#/icons/terminal.svg?react\";\nimport GlobeIcon from \"#/icons/globe.svg?react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport PillIcon from \"#/icons/pill.svg?react\";\nimport PillFillIcon from \"#/icons/pill-fill.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ConversationTabsContextMenuProps {\n isOpen: boolean;\n onClose: () => void;\n ignoreOutsideClickRef?: React.RefObject<HTMLElement \| null>;\n}\n\nexport function ConversationTabsContextMenu({\n isOpen,\n onClose,\n ignoreOutsideClickRef,\n}: ConversationTabsContextMenuProps) {\n const ref = useClickOutsideElement<HTMLUListElement>(\n onClose,\n ignoreOutsideClickRef,\n );\n const { t } = useTranslation(\"openhands\");\n const { conversationId } = useConversationId();\n const {\n state,\n setUnpinnedTabs,\n setSelectedTab: setPersistedSelectedTab,\n } = useConversationLocalStorageState(conversationId);\n const { selectedTab, isRightPanelShown, setSelectedTab } =\n useConversationStore();\n\n const { navigateToTab } = useSelectConversationTab();\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n\n const tabConfig = [\n {\n tab: \"planner\",\n icon: LessonPlanIcon,\n i18nKey: I18nKey.COMMON$PLANNER,\n },\n { tab: \"files\", icon: DocumentIcon, i18nKey: I18nKey.COMMON$FILES },\n { tab: \"vscode\", icon: VSCodeIcon, i18nKey: I18nKey.COMMON$CODE },\n { tab: \"terminal\", icon: TerminalIcon, i18nKey: I18nKey.COMMON$TERMINAL },\n { tab: \"browser\", icon: GlobeIcon, i18nKey: I18nKey.COMMON$BROWSER },\n ];\n\n if (hasTaskList) {\n tabConfig.unshift({\n tab: \"tasklist\",\n icon: DoubleCheckIcon,\n i18nKey: I18nKey.COMMON$TASK_LIST,\n });\n }\n\n const visibleTabConfig = tabConfig.filter(\n ({ tab }) => tab !== \"vscode\" \|\| backend.kind === \"cloud\",\n );\n\n if (!isOpen) return null;\n\n const handleOpenTab = (tab: string) => {\n navigateToTab(tab as ConversationTab);\n onClose();\n };\n\n const handlePinToggle = (tab: string, e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n if (state.unpinnedTabs.includes(tab)) {\n setUnpinnedTabs(state.unpinnedTabs.filter((item) => item !== tab));\n } else {\n const newUnpinnedTabs = [...state.unpinnedTabs, tab];\n setUnpinnedTabs(newUnpinnedTabs);\n\n if (selectedTab === tab && isRightPanelShown) {\n const nextPinnedTab = visibleTabConfig.find(\n ({ tab: tabKey }) =>\n tabKey !== tab && !newUnpinnedTabs.includes(tabKey),\n );\n\n if (nextPinnedTab) {\n setSelectedTab(nextPinnedTab.tab as ConversationTab);\n setPersistedSelectedTab(nextPinnedTab.tab as ConversationTab);\n }\n }\n }\n };\n\n return (\n <ContextMenu\n ref={ref}\n alignment=\"right\"\n position=\"bottom\"\n className=\"z-[9999] mt-2 w-fit\"\n >\n {visibleTabConfig.map(({ tab, icon: Icon, i18nKey }) => {\n const pinned = !state.unpinnedTabs.includes(tab);\n return (\n <li key={tab} className=\"list-none\">\n <div\n className={cn(\n \"flex h-[30px] w-full min-w-0 items-stretch rounded\",\n \"hover:bg-[var(--oh-interactive-hover)]\",\n )}\n >\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-open-${tab}`}\n className={cn(\n \"flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-l p-2 text-start\",\n \"text-white transition-colors\",\n )}\n onClick={() => handleOpenTab(tab)}\n >\n <Icon className=\"h-4 w-4 shrink-0\" />\n <span className=\"text-sm\">{t(i18nKey)}</span>\n </button>\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-pin-${tab}`}\n className={cn(\n \"flex shrink-0 cursor-pointer items-center justify-center rounded-r px-2\",\n \"text-white transition-colors hover:bg-white/10\",\n )}\n aria-pressed={pinned}\n aria-label={pinned ? \"Unpin tab from bar\" : \"Pin tab to bar\"}\n onClick={(e) => handlePinToggle(tab, e)}\n >\n {pinned ? (\n <PillFillIcon className=\"-mr-[5px] ml-auto h-7 w-7\" />\n ) : (\n <PillIcon className=\"ml-auto h-4.5 w-4.5\" />\n )}\n </button>\n </div>\n </li>\n );\n })}\n </ContextMenu>\n );\n}\n"],"mappings":"ilCA8BA,SAAgB,EAA4B,CAC1C,SACA,UACA,yBACmC,CACnC,IAAM,EAAM,EAAA,uBACV,EACA,EACD,CACK,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,kBAAmB,EAAA,mBAAmB,CACxC,CACJ,QACA,kBACA,eAAgB,GACd,EAAA,iCAAiC,EAAe,CAC9C,CAAE,cAAa,oBAAmB,kBACtC,EAAA,sBAAsB,CAElB,CAAE,iBAAkB,EAAA,0BAA0B,CAE9C,CAAE,eAAgB,EAAA,aAAa,CAC/B,CAAE,WAAY,EAAA,kBAAkB,CAEhC,EAAY,CAChB,CACE,IAAK,UACL,KAAM,EAAA,QACN,QAAS,EAAA,QAAQ,eAClB,CACD,CAAE,IAAK,QAAS,KAAM,EAAA,QAAc,QAAS,EAAA,QAAQ,aAAc,CACnE,CAAE,IAAK,SAAU,KAAM,EAAA,QAAY,QAAS,EAAA,QAAQ,YAAa,CACjE,CAAE,IAAK,WAAY,KAAM,EAAA,QAAc,QAAS,EAAA,QAAQ,gBAAiB,CACzE,CAAE,IAAK,UAAW,KAAM,EAAA,QAAW,QAAS,EAAA,QAAQ,eAAgB,CACrE,CAEG,GACF,EAAU,QAAQ,CAChB,IAAK,WACL,KAAM,EAAA,QACN,QAAS,EAAA,QAAQ,iBAClB,CAAC,CAGJ,IAAM,EAAmB,EAAU,QAChC,CAAE,~~SAAU~~,IAAQ,UAAY,EAAQ,OAAS,~~QACnD~~,CAED,GAAI,CAAC,EAAQ,OAAO,KAEpB,IAAM,EAAiB,GAAgB,CACrC,EAAc,EAAuB,CACrC,GAAS,EAGL,GAAmB,EAAa,IAAwB,CAG5D,GAFA,EAAE,gBAAgB,CAClB,EAAE,iBAAiB,CACf,EAAM,aAAa,SAAS,EAAI,CAClC,EAAgB,EAAM,aAAa,OAAQ,GAAS,IAAS,EAAI,CAAC,KAC7D,CACL,IAAM,EAAkB,CAAC,GAAG,EAAM,aAAc,EAAI,CAGpD,GAFA,EAAgB,EAAgB,CAE5B,IAAgB,GAAO,EAAmB,CAC5C,IAAM,EAAgB,EAAiB,MACpC,CAAE,IAAK,KACN,IAAW,GAAO,CAAC,EAAgB,SAAS,EAAO,CACtD,CAEG,IACF,EAAe,EAAc,IAAuB,CACpD,EAAwB,EAAc,IAAuB,KAMrE,OACE,EAAA,EAAA,KAAC,EAAA,YAAD,CACO,MACL,UAAU,QACV,SAAS,SACT,UAAU,+BAET,EAAiB,KAAK,CAAE,MAAK,KAAM,EAAM,aAAc,CACtD,IAAM,EAAS,CAAC,EAAM,aAAa,SAAS,EAAI,CAChD,OACE,EAAA,EAAA,KAAC,KAAD,CAAc,UAAU,sBACtB,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,qDACA,yCACD,UAJH,EAME,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,cAAa,+BAA+B,IAC5C,UAAW,EAAA,GACT,iFACA,+BACD,CACD,YAAe,EAAc,EAAI,UAPnC,EASE,EAAA,EAAA,KAAC,EAAD,CAAM,UAAU,mBAAqB,CAAA,EACrC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,mBAAW,EAAE,EAAQ,CAAQ,CAAA,CACtC,IACT,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAa,8BAA8B,IAC3C,UAAW,EAAA,GACT,0EACA,iDACD,CACD,eAAc,EACd,aAAY,EAAS,qBAAuB,iBAC5C,QAAU,GAAM,EAAgB,EAAK,EAAE,UAEtC,GACC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAc,UAAU,4BAA8B,CAAA,EAEtD,EAAA,EAAA,KAAC,EAAA,QAAD,CAAU,UAAU,sBAAwB,CAAA,CAEvC,CAAA,CACL,GACH,CArCI,EAqCJ,EAEP,CACU,CAAA"}
1	+ {"version":3,"file":"conversation-tabs-context-menu.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport {\n useConversationStore,\n type ConversationTab,\n} from \"#/stores/conversation-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport TerminalIcon from \"#/icons/terminal.svg?react\";\nimport GlobeIcon from \"#/icons/globe.svg?react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport PillIcon from \"#/icons/pill.svg?react\";\nimport PillFillIcon from \"#/icons/pill-fill.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ConversationTabsContextMenuProps {\n isOpen: boolean;\n onClose: () => void;\n ignoreOutsideClickRef?: React.RefObject<HTMLElement \| null>;\n}\n\nexport function ConversationTabsContextMenu({\n isOpen,\n onClose,\n ignoreOutsideClickRef,\n}: ConversationTabsContextMenuProps) {\n const ref = useClickOutsideElement<HTMLUListElement>(\n onClose,\n ignoreOutsideClickRef,\n );\n const { t } = useTranslation(\"openhands\");\n const { conversationId } = useConversationId();\n const {\n state,\n setUnpinnedTabs,\n setSelectedTab: setPersistedSelectedTab,\n } = useConversationLocalStorageState(conversationId);\n const { selectedTab, isRightPanelShown, setSelectedTab } =\n useConversationStore();\n\n const { navigateToTab } = useSelectConversationTab();\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n\n const tabConfig = [\n {\n tab: \"planner\",\n icon: LessonPlanIcon,\n i18nKey: I18nKey.COMMON$PLANNER,\n },\n { tab: \"files\", icon: DocumentIcon, i18nKey: I18nKey.COMMON$FILES },\n { tab: \"vscode\", icon: VSCodeIcon, i18nKey: I18nKey.COMMON$CODE },\n { tab: \"terminal\", icon: TerminalIcon, i18nKey: I18nKey.COMMON$TERMINAL },\n { tab: \"browser\", icon: GlobeIcon, i18nKey: I18nKey.COMMON$BROWSER },\n ];\n\n if (hasTaskList) {\n tabConfig.unshift({\n tab: \"tasklist\",\n icon: DoubleCheckIcon,\n i18nKey: I18nKey.COMMON$TASK_LIST,\n });\n }\n\n const visibleTabConfig = tabConfig.filter(\n ({ tab }) =>\n (tab !== \"vscode\" && tab !== \"planner\") \|\| backend.kind === \"cloud\",\n );\n\n if (!isOpen) return null;\n\n const handleOpenTab = (tab: string) => {\n navigateToTab(tab as ConversationTab);\n onClose();\n };\n\n const handlePinToggle = (tab: string, e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n if (state.unpinnedTabs.includes(tab)) {\n setUnpinnedTabs(state.unpinnedTabs.filter((item) => item !== tab));\n } else {\n const newUnpinnedTabs = [...state.unpinnedTabs, tab];\n setUnpinnedTabs(newUnpinnedTabs);\n\n if (selectedTab === tab && isRightPanelShown) {\n const nextPinnedTab = visibleTabConfig.find(\n ({ tab: tabKey }) =>\n tabKey !== tab && !newUnpinnedTabs.includes(tabKey),\n );\n\n if (nextPinnedTab) {\n setSelectedTab(nextPinnedTab.tab as ConversationTab);\n setPersistedSelectedTab(nextPinnedTab.tab as ConversationTab);\n }\n }\n }\n };\n\n return (\n <ContextMenu\n ref={ref}\n alignment=\"right\"\n position=\"bottom\"\n className=\"z-[9999] mt-2 w-fit\"\n >\n {visibleTabConfig.map(({ tab, icon: Icon, i18nKey }) => {\n const pinned = !state.unpinnedTabs.includes(tab);\n return (\n <li key={tab} className=\"list-none\">\n <div\n className={cn(\n \"flex h-[30px] w-full min-w-0 items-stretch rounded\",\n \"hover:bg-[var(--oh-interactive-hover)]\",\n )}\n >\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-open-${tab}`}\n className={cn(\n \"flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-l p-2 text-start\",\n \"text-white transition-colors\",\n )}\n onClick={() => handleOpenTab(tab)}\n >\n <Icon className=\"h-4 w-4 shrink-0\" />\n <span className=\"text-sm\">{t(i18nKey)}</span>\n </button>\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-pin-${tab}`}\n className={cn(\n \"flex shrink-0 cursor-pointer items-center justify-center rounded-r px-2\",\n \"text-white transition-colors hover:bg-white/10\",\n )}\n aria-pressed={pinned}\n aria-label={pinned ? \"Unpin tab from bar\" : \"Pin tab to bar\"}\n onClick={(e) => handlePinToggle(tab, e)}\n >\n {pinned ? (\n <PillFillIcon className=\"-mr-[5px] ml-auto h-7 w-7\" />\n ) : (\n <PillIcon className=\"ml-auto h-4.5 w-4.5\" />\n )}\n </button>\n </div>\n </li>\n );\n })}\n </ContextMenu>\n );\n}\n"],"mappings":"ilCA8BA,SAAgB,EAA4B,CAC1C,SACA,UACA,yBACmC,CACnC,IAAM,EAAM,EAAA,uBACV,EACA,EACD,CACK,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,kBAAmB,EAAA,mBAAmB,CACxC,CACJ,QACA,kBACA,eAAgB,GACd,EAAA,iCAAiC,EAAe,CAC9C,CAAE,cAAa,oBAAmB,kBACtC,EAAA,sBAAsB,CAElB,CAAE,iBAAkB,EAAA,0BAA0B,CAE9C,CAAE,eAAgB,EAAA,aAAa,CAC/B,CAAE,WAAY,EAAA,kBAAkB,CAEhC,EAAY,CAChB,CACE,IAAK,UACL,KAAM,EAAA,QACN,QAAS,EAAA,QAAQ,eAClB,CACD,CAAE,IAAK,QAAS,KAAM,EAAA,QAAc,QAAS,EAAA,QAAQ,aAAc,CACnE,CAAE,IAAK,SAAU,KAAM,EAAA,QAAY,QAAS,EAAA,QAAQ,YAAa,CACjE,CAAE,IAAK,WAAY,KAAM,EAAA,QAAc,QAAS,EAAA,QAAQ,gBAAiB,CACzE,CAAE,IAAK,UAAW,KAAM,EAAA,QAAW,QAAS,EAAA,QAAQ,eAAgB,CACrE,CAEG,GACF,EAAU,QAAQ,CAChB,IAAK,WACL,KAAM,EAAA,QACN,QAAS,EAAA,QAAQ,iBAClB,CAAC,CAGJ,IAAM,EAAmB,EAAU,QAChC,CAAE,SACA,IAAQ,UAAY,IAAQ,WAAc,EAAQ,OAAS,QAC/D,CAED,GAAI,CAAC,EAAQ,OAAO,KAEpB,IAAM,EAAiB,GAAgB,CACrC,EAAc,EAAuB,CACrC,GAAS,EAGL,GAAmB,EAAa,IAAwB,CAG5D,GAFA,EAAE,gBAAgB,CAClB,EAAE,iBAAiB,CACf,EAAM,aAAa,SAAS,EAAI,CAClC,EAAgB,EAAM,aAAa,OAAQ,GAAS,IAAS,EAAI,CAAC,KAC7D,CACL,IAAM,EAAkB,CAAC,GAAG,EAAM,aAAc,EAAI,CAGpD,GAFA,EAAgB,EAAgB,CAE5B,IAAgB,GAAO,EAAmB,CAC5C,IAAM,EAAgB,EAAiB,MACpC,CAAE,IAAK,KACN,IAAW,GAAO,CAAC,EAAgB,SAAS,EAAO,CACtD,CAEG,IACF,EAAe,EAAc,IAAuB,CACpD,EAAwB,EAAc,IAAuB,KAMrE,OACE,EAAA,EAAA,KAAC,EAAA,YAAD,CACO,MACL,UAAU,QACV,SAAS,SACT,UAAU,+BAET,EAAiB,KAAK,CAAE,MAAK,KAAM,EAAM,aAAc,CACtD,IAAM,EAAS,CAAC,EAAM,aAAa,SAAS,EAAI,CAChD,OACE,EAAA,EAAA,KAAC,KAAD,CAAc,UAAU,sBACtB,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,qDACA,yCACD,UAJH,EAME,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,cAAa,+BAA+B,IAC5C,UAAW,EAAA,GACT,iFACA,+BACD,CACD,YAAe,EAAc,EAAI,UAPnC,EASE,EAAA,EAAA,KAAC,EAAD,CAAM,UAAU,mBAAqB,CAAA,EACrC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,mBAAW,EAAE,EAAQ,CAAQ,CAAA,CACtC,IACT,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAa,8BAA8B,IAC3C,UAAW,EAAA,GACT,0EACA,iDACD,CACD,eAAc,EACd,aAAY,EAAS,qBAAuB,iBAC5C,QAAU,GAAM,EAAgB,EAAK,EAAE,UAEtC,GACC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAc,UAAU,4BAA8B,CAAA,EAEtD,EAAA,EAAA,KAAC,EAAA,QAAD,CAAU,UAAU,sBAAwB,CAAA,CAEvC,CAAA,CACL,GACH,CArCI,EAqCJ,EAEP,CACU,CAAA"}

package/dist/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.js CHANGED Viewed

@@ -53,7 +53,7 @@ function x({ isOpen: x, onClose: S, ignoreOutsideClickRef: C }) {
 		icon: h,
 		i18nKey: t.COMMON$TASK_LIST
 	});
-	let L = I.filter(({ tab: e }) => e !== "vscode" || F.kind === "cloud");
+	let L = I.filter(({ tab: e }) => e !== "vscode" && e !== "planner" || F.kind === "cloud");
 	if (!x) return null;
 	let R = (e) => {
 		N(e), S();

package/dist/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-tabs-context-menu.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport {\n useConversationStore,\n type ConversationTab,\n} from \"#/stores/conversation-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport TerminalIcon from \"#/icons/terminal.svg?react\";\nimport GlobeIcon from \"#/icons/globe.svg?react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport PillIcon from \"#/icons/pill.svg?react\";\nimport PillFillIcon from \"#/icons/pill-fill.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ConversationTabsContextMenuProps {\n isOpen: boolean;\n onClose: () => void;\n ignoreOutsideClickRef?: React.RefObject<HTMLElement \| null>;\n}\n\nexport function ConversationTabsContextMenu({\n isOpen,\n onClose,\n ignoreOutsideClickRef,\n}: ConversationTabsContextMenuProps) {\n const ref = useClickOutsideElement<HTMLUListElement>(\n onClose,\n ignoreOutsideClickRef,\n );\n const { t } = useTranslation(\"openhands\");\n const { conversationId } = useConversationId();\n const {\n state,\n setUnpinnedTabs,\n setSelectedTab: setPersistedSelectedTab,\n } = useConversationLocalStorageState(conversationId);\n const { selectedTab, isRightPanelShown, setSelectedTab } =\n useConversationStore();\n\n const { navigateToTab } = useSelectConversationTab();\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n\n const tabConfig = [\n {\n tab: \"planner\",\n icon: LessonPlanIcon,\n i18nKey: I18nKey.COMMON$PLANNER,\n },\n { tab: \"files\", icon: DocumentIcon, i18nKey: I18nKey.COMMON$FILES },\n { tab: \"vscode\", icon: VSCodeIcon, i18nKey: I18nKey.COMMON$CODE },\n { tab: \"terminal\", icon: TerminalIcon, i18nKey: I18nKey.COMMON$TERMINAL },\n { tab: \"browser\", icon: GlobeIcon, i18nKey: I18nKey.COMMON$BROWSER },\n ];\n\n if (hasTaskList) {\n tabConfig.unshift({\n tab: \"tasklist\",\n icon: DoubleCheckIcon,\n i18nKey: I18nKey.COMMON$TASK_LIST,\n });\n }\n\n const visibleTabConfig = tabConfig.filter(\n ({ tab }) => tab !== \"vscode\" \|\| backend.kind === \"cloud\",\n );\n\n if (!isOpen) return null;\n\n const handleOpenTab = (tab: string) => {\n navigateToTab(tab as ConversationTab);\n onClose();\n };\n\n const handlePinToggle = (tab: string, e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n if (state.unpinnedTabs.includes(tab)) {\n setUnpinnedTabs(state.unpinnedTabs.filter((item) => item !== tab));\n } else {\n const newUnpinnedTabs = [...state.unpinnedTabs, tab];\n setUnpinnedTabs(newUnpinnedTabs);\n\n if (selectedTab === tab && isRightPanelShown) {\n const nextPinnedTab = visibleTabConfig.find(\n ({ tab: tabKey }) =>\n tabKey !== tab && !newUnpinnedTabs.includes(tabKey),\n );\n\n if (nextPinnedTab) {\n setSelectedTab(nextPinnedTab.tab as ConversationTab);\n setPersistedSelectedTab(nextPinnedTab.tab as ConversationTab);\n }\n }\n }\n };\n\n return (\n <ContextMenu\n ref={ref}\n alignment=\"right\"\n position=\"bottom\"\n className=\"z-[9999] mt-2 w-fit\"\n >\n {visibleTabConfig.map(({ tab, icon: Icon, i18nKey }) => {\n const pinned = !state.unpinnedTabs.includes(tab);\n return (\n <li key={tab} className=\"list-none\">\n <div\n className={cn(\n \"flex h-[30px] w-full min-w-0 items-stretch rounded\",\n \"hover:bg-[var(--oh-interactive-hover)]\",\n )}\n >\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-open-${tab}`}\n className={cn(\n \"flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-l p-2 text-start\",\n \"text-white transition-colors\",\n )}\n onClick={() => handleOpenTab(tab)}\n >\n <Icon className=\"h-4 w-4 shrink-0\" />\n <span className=\"text-sm\">{t(i18nKey)}</span>\n </button>\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-pin-${tab}`}\n className={cn(\n \"flex shrink-0 cursor-pointer items-center justify-center rounded-r px-2\",\n \"text-white transition-colors hover:bg-white/10\",\n )}\n aria-pressed={pinned}\n aria-label={pinned ? \"Unpin tab from bar\" : \"Pin tab to bar\"}\n onClick={(e) => handlePinToggle(tab, e)}\n >\n {pinned ? (\n <PillFillIcon className=\"-mr-[5px] ml-auto h-7 w-7\" />\n ) : (\n <PillIcon className=\"ml-auto h-4.5 w-4.5\" />\n )}\n </button>\n </div>\n </li>\n );\n })}\n </ContextMenu>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,EAA4B,EAC1C,WACA,YACA,4BACmC;CACnC,IAAM,IAAM,EACV,GACA,EACD,EACK,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,sBAAmB,GAAmB,EACxC,EACJ,UACA,oBACA,gBAAgB,MACd,EAAiC,EAAe,EAC9C,EAAE,gBAAa,sBAAmB,sBACtC,GAAsB,EAElB,EAAE,qBAAkB,GAA0B,EAE9C,EAAE,mBAAgB,GAAa,EAC/B,EAAE,eAAY,GAAkB,EAEhC,IAAY;EAChB;GACE,KAAK;GACL,MAAM;GACN,SAAS,EAAQ;GAClB;EACD;GAAE,KAAK;GAAS,MAAM;GAAc,SAAS,EAAQ;GAAc;EACnE;GAAE,KAAK;GAAU,MAAM;GAAY,SAAS,EAAQ;GAAa;EACjE;GAAE,KAAK;GAAY,MAAM;GAAc,SAAS,EAAQ;GAAiB;EACzE;GAAE,KAAK;GAAW,MAAM;GAAW,SAAS,EAAQ;GAAgB;EACrE;AAED,CAAI,KACF,EAAU,QAAQ;EAChB,KAAK;EACL,MAAM;EACN,SAAS,EAAQ;EAClB,CAAC;CAGJ,IAAM,IAAmB,EAAU,QAChC,EAAE,~~aAAU~~,MAAQ,YAAY,EAAQ,SAAS,~~QACnD~~;AAED,KAAI,CAAC,EAAQ,QAAO;CAEpB,IAAM,KAAiB,MAAgB;AAErC,EADA,EAAc,EAAuB,EACrC,GAAS;IAGL,KAAmB,GAAa,MAAwB;AAG5D,MAFA,EAAE,gBAAgB,EAClB,EAAE,iBAAiB,EACf,EAAM,aAAa,SAAS,EAAI,CAClC,GAAgB,EAAM,aAAa,QAAQ,MAAS,MAAS,EAAI,CAAC;OAC7D;GACL,IAAM,IAAkB,CAAC,GAAG,EAAM,cAAc,EAAI;AAGpD,OAFA,EAAgB,EAAgB,EAE5B,MAAgB,KAAO,GAAmB;IAC5C,IAAM,IAAgB,EAAiB,MACpC,EAAE,KAAK,QACN,MAAW,KAAO,CAAC,EAAgB,SAAS,EAAO,CACtD;AAED,IAAI,MACF,EAAe,EAAc,IAAuB,EACpD,EAAwB,EAAc,IAAuB;;;;AAMrE,QACE,kBAAC,GAAD;EACO;EACL,WAAU;EACV,UAAS;EACT,WAAU;YAET,EAAiB,KAAK,EAAE,QAAK,MAAM,GAAM,iBAAc;GACtD,IAAM,IAAS,CAAC,EAAM,aAAa,SAAS,EAAI;AAChD,UACE,kBAAC,MAAD;IAAc,WAAU;cACtB,kBAAC,OAAD;KACE,WAAW,EACT,sDACA,yCACD;eAJH,CAME,kBAAC,UAAD;MACE,MAAK;MACL,eAAa,+BAA+B;MAC5C,WAAW,EACT,kFACA,+BACD;MACD,eAAe,EAAc,EAAI;gBAPnC,CASE,kBAAC,GAAD,EAAM,WAAU,oBAAqB,CAAA,EACrC,kBAAC,QAAD;OAAM,WAAU;iBAAW,EAAE,EAAQ;OAAQ,CAAA,CACtC;SACT,kBAAC,UAAD;MACE,MAAK;MACL,eAAa,8BAA8B;MAC3C,WAAW,EACT,2EACA,iDACD;MACD,gBAAc;MACd,cAAY,IAAS,uBAAuB;MAC5C,UAAU,MAAM,EAAgB,GAAK,EAAE;gBAEtC,IACC,kBAAC,GAAD,EAAc,WAAU,6BAA8B,CAAA,GAEtD,kBAAC,GAAD,EAAU,WAAU,uBAAwB,CAAA;MAEvC,CAAA,CACL;;IACH,EArCI,EAqCJ;IAEP;EACU,CAAA"}
1	+ {"version":3,"file":"conversation-tabs-context-menu.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport {\n useConversationStore,\n type ConversationTab,\n} from \"#/stores/conversation-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport TerminalIcon from \"#/icons/terminal.svg?react\";\nimport GlobeIcon from \"#/icons/globe.svg?react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport PillIcon from \"#/icons/pill.svg?react\";\nimport PillFillIcon from \"#/icons/pill-fill.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ConversationTabsContextMenuProps {\n isOpen: boolean;\n onClose: () => void;\n ignoreOutsideClickRef?: React.RefObject<HTMLElement \| null>;\n}\n\nexport function ConversationTabsContextMenu({\n isOpen,\n onClose,\n ignoreOutsideClickRef,\n}: ConversationTabsContextMenuProps) {\n const ref = useClickOutsideElement<HTMLUListElement>(\n onClose,\n ignoreOutsideClickRef,\n );\n const { t } = useTranslation(\"openhands\");\n const { conversationId } = useConversationId();\n const {\n state,\n setUnpinnedTabs,\n setSelectedTab: setPersistedSelectedTab,\n } = useConversationLocalStorageState(conversationId);\n const { selectedTab, isRightPanelShown, setSelectedTab } =\n useConversationStore();\n\n const { navigateToTab } = useSelectConversationTab();\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n\n const tabConfig = [\n {\n tab: \"planner\",\n icon: LessonPlanIcon,\n i18nKey: I18nKey.COMMON$PLANNER,\n },\n { tab: \"files\", icon: DocumentIcon, i18nKey: I18nKey.COMMON$FILES },\n { tab: \"vscode\", icon: VSCodeIcon, i18nKey: I18nKey.COMMON$CODE },\n { tab: \"terminal\", icon: TerminalIcon, i18nKey: I18nKey.COMMON$TERMINAL },\n { tab: \"browser\", icon: GlobeIcon, i18nKey: I18nKey.COMMON$BROWSER },\n ];\n\n if (hasTaskList) {\n tabConfig.unshift({\n tab: \"tasklist\",\n icon: DoubleCheckIcon,\n i18nKey: I18nKey.COMMON$TASK_LIST,\n });\n }\n\n const visibleTabConfig = tabConfig.filter(\n ({ tab }) =>\n (tab !== \"vscode\" && tab !== \"planner\") \|\| backend.kind === \"cloud\",\n );\n\n if (!isOpen) return null;\n\n const handleOpenTab = (tab: string) => {\n navigateToTab(tab as ConversationTab);\n onClose();\n };\n\n const handlePinToggle = (tab: string, e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n if (state.unpinnedTabs.includes(tab)) {\n setUnpinnedTabs(state.unpinnedTabs.filter((item) => item !== tab));\n } else {\n const newUnpinnedTabs = [...state.unpinnedTabs, tab];\n setUnpinnedTabs(newUnpinnedTabs);\n\n if (selectedTab === tab && isRightPanelShown) {\n const nextPinnedTab = visibleTabConfig.find(\n ({ tab: tabKey }) =>\n tabKey !== tab && !newUnpinnedTabs.includes(tabKey),\n );\n\n if (nextPinnedTab) {\n setSelectedTab(nextPinnedTab.tab as ConversationTab);\n setPersistedSelectedTab(nextPinnedTab.tab as ConversationTab);\n }\n }\n }\n };\n\n return (\n <ContextMenu\n ref={ref}\n alignment=\"right\"\n position=\"bottom\"\n className=\"z-[9999] mt-2 w-fit\"\n >\n {visibleTabConfig.map(({ tab, icon: Icon, i18nKey }) => {\n const pinned = !state.unpinnedTabs.includes(tab);\n return (\n <li key={tab} className=\"list-none\">\n <div\n className={cn(\n \"flex h-[30px] w-full min-w-0 items-stretch rounded\",\n \"hover:bg-[var(--oh-interactive-hover)]\",\n )}\n >\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-open-${tab}`}\n className={cn(\n \"flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-l p-2 text-start\",\n \"text-white transition-colors\",\n )}\n onClick={() => handleOpenTab(tab)}\n >\n <Icon className=\"h-4 w-4 shrink-0\" />\n <span className=\"text-sm\">{t(i18nKey)}</span>\n </button>\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-pin-${tab}`}\n className={cn(\n \"flex shrink-0 cursor-pointer items-center justify-center rounded-r px-2\",\n \"text-white transition-colors hover:bg-white/10\",\n )}\n aria-pressed={pinned}\n aria-label={pinned ? \"Unpin tab from bar\" : \"Pin tab to bar\"}\n onClick={(e) => handlePinToggle(tab, e)}\n >\n {pinned ? (\n <PillFillIcon className=\"-mr-[5px] ml-auto h-7 w-7\" />\n ) : (\n <PillIcon className=\"ml-auto h-4.5 w-4.5\" />\n )}\n </button>\n </div>\n </li>\n );\n })}\n </ContextMenu>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,EAA4B,EAC1C,WACA,YACA,4BACmC;CACnC,IAAM,IAAM,EACV,GACA,EACD,EACK,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,sBAAmB,GAAmB,EACxC,EACJ,UACA,oBACA,gBAAgB,MACd,EAAiC,EAAe,EAC9C,EAAE,gBAAa,sBAAmB,sBACtC,GAAsB,EAElB,EAAE,qBAAkB,GAA0B,EAE9C,EAAE,mBAAgB,GAAa,EAC/B,EAAE,eAAY,GAAkB,EAEhC,IAAY;EAChB;GACE,KAAK;GACL,MAAM;GACN,SAAS,EAAQ;GAClB;EACD;GAAE,KAAK;GAAS,MAAM;GAAc,SAAS,EAAQ;GAAc;EACnE;GAAE,KAAK;GAAU,MAAM;GAAY,SAAS,EAAQ;GAAa;EACjE;GAAE,KAAK;GAAY,MAAM;GAAc,SAAS,EAAQ;GAAiB;EACzE;GAAE,KAAK;GAAW,MAAM;GAAW,SAAS,EAAQ;GAAgB;EACrE;AAED,CAAI,KACF,EAAU,QAAQ;EAChB,KAAK;EACL,MAAM;EACN,SAAS,EAAQ;EAClB,CAAC;CAGJ,IAAM,IAAmB,EAAU,QAChC,EAAE,aACA,MAAQ,YAAY,MAAQ,aAAc,EAAQ,SAAS,QAC/D;AAED,KAAI,CAAC,EAAQ,QAAO;CAEpB,IAAM,KAAiB,MAAgB;AAErC,EADA,EAAc,EAAuB,EACrC,GAAS;IAGL,KAAmB,GAAa,MAAwB;AAG5D,MAFA,EAAE,gBAAgB,EAClB,EAAE,iBAAiB,EACf,EAAM,aAAa,SAAS,EAAI,CAClC,GAAgB,EAAM,aAAa,QAAQ,MAAS,MAAS,EAAI,CAAC;OAC7D;GACL,IAAM,IAAkB,CAAC,GAAG,EAAM,cAAc,EAAI;AAGpD,OAFA,EAAgB,EAAgB,EAE5B,MAAgB,KAAO,GAAmB;IAC5C,IAAM,IAAgB,EAAiB,MACpC,EAAE,KAAK,QACN,MAAW,KAAO,CAAC,EAAgB,SAAS,EAAO,CACtD;AAED,IAAI,MACF,EAAe,EAAc,IAAuB,EACpD,EAAwB,EAAc,IAAuB;;;;AAMrE,QACE,kBAAC,GAAD;EACO;EACL,WAAU;EACV,UAAS;EACT,WAAU;YAET,EAAiB,KAAK,EAAE,QAAK,MAAM,GAAM,iBAAc;GACtD,IAAM,IAAS,CAAC,EAAM,aAAa,SAAS,EAAI;AAChD,UACE,kBAAC,MAAD;IAAc,WAAU;cACtB,kBAAC,OAAD;KACE,WAAW,EACT,sDACA,yCACD;eAJH,CAME,kBAAC,UAAD;MACE,MAAK;MACL,eAAa,+BAA+B;MAC5C,WAAW,EACT,kFACA,+BACD;MACD,eAAe,EAAc,EAAI;gBAPnC,CASE,kBAAC,GAAD,EAAM,WAAU,oBAAqB,CAAA,EACrC,kBAAC,QAAD;OAAM,WAAU;iBAAW,EAAE,EAAQ;OAAQ,CAAA,CACtC;SACT,kBAAC,UAAD;MACE,MAAK;MACL,eAAa,8BAA8B;MAC3C,WAAW,EACT,2EACA,iDACD;MACD,gBAAc;MACd,cAAY,IAAS,uBAAuB;MAC5C,UAAU,MAAM,EAAgB,GAAK,EAAE;gBAEtC,IACC,kBAAC,GAAD,EAAc,WAAU,6BAA8B,CAAA,GAEtD,kBAAC,GAAD,EAAU,WAAU,uBAAwB,CAAA;MAEvC,CAAA,CACL;;IACH,EArCI,EAqCJ;IAEP;EACU,CAAA"}

package/dist/components/features/conversation/conversation-tabs/conversation-tabs.cjs CHANGED Viewed

@@ -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(`../../../../types/agent-state.cjs`),r=require(`../../../../utils/utils.cjs`),i=require(`../../../../hooks/use-conversation-id.cjs`),a=require(`../../../../utils/conversation-local-storage.cjs`),o=require(`../../../../stores/conversation-store.cjs`),s=require(`../../../../contexts/active-backend-context.cjs`),c=require(`../../../../hooks/use-agent-state.cjs`),l=require(`../../../../utils/mobile-top-bar-icon-button-classes.cjs`),u=require(`../../../../ui/typography.cjs`),d=require(`../../../../icons/lesson-plan.cjs`),f=require(`../../../../icons/document.cjs`),p=require(`../../../../hooks/use-handle-build-plan-click.cjs`),m=require(`../../../../hooks/use-select-conversation-tab.cjs`),h=require(`../../conversation-panel/ellipsis-button.cjs`),g=require(`../../chat/chat-action-tooltip.cjs`),_=require(`../../../../icons/terminal.cjs`),v=require(`../../../../icons/globe.cjs`),y=require(`../../../../icons/vscode.cjs`),b=require(`../../../../icons/double-check.cjs`),x=require(`./conversation-tab-nav.cjs`),ee=require(`./vscode-tooltip-content.cjs`),S=require(`../../../../hooks/use-task-list.cjs`),C=require(`./conversation-tabs-context-menu.cjs`);let w=require(`react`),T=require(`react/jsx-runtime`);function E({variant:E=`default`}){let{conversationId:D}=i.useConversationId(),{setSelectedTab:O,planContent:k}=o.useConversationStore(),[A,j]=(0,w.useState)(!1),{state:M}=a.useConversationLocalStorageState(D),{hasTaskList:N}=S.useTaskList(),{backend:P}=s.useActiveBackend(),{handleBuildPlanClick:F}=p.useHandleBuildPlanClick(),{curAgentState:I}=c.useAgentState(),{selectTab:L,isTabActive:R,onTabChange:z,selectedTab:B,isRightPanelShown:V}=m.useSelectConversationTab();(0,w.useEffect)(()=>{O(M.selectedTab)},[O,M.selectedTab]),(0,w.useEffect)(()=>{V&&(B||z(`files`))},[V,B,z]);let{t:H,i18n:U}=e.useTranslation(`openhands`),W=[{tabValue:`files`,isActive:R(`files`),icon:f.default,onClick:()=>L(`files`),tooltipContent:H(t.I18nKey.COMMON$FILES),tooltipAriaLabel:H(t.I18nKey.COMMON$FILES),label:H(t.I18nKey.COMMON$FILES)},{tabValue:`planner`,isActive:R(`planner`),icon:d.default,onClick:()=>L(`planner`),tooltipContent:H(t.I18nKey.COMMON$PLANNER),tooltipAriaLabel:H(t.I18nKey.COMMON$PLANNER),label:H(t.I18nKey.COMMON$PLANNER)},{tabValue:`vscode`,isActive:R(`vscode`),icon:y.default,onClick:()=>L(`vscode`),tooltipContent:(0,T.jsx)(ee.VSCodeTooltipContent,{}),tooltipAriaLabel:H(t.I18nKey.COMMON$CODE),label:H(t.I18nKey.COMMON$CODE)},{tabValue:`terminal`,isActive:R(`terminal`),icon:_.default,onClick:()=>L(`terminal`),tooltipContent:H(t.I18nKey.COMMON$TERMINAL),tooltipAriaLabel:H(t.I18nKey.COMMON$TERMINAL),label:H(t.I18nKey.COMMON$TERMINAL),className:`pl-2`},{tabValue:`browser`,isActive:R(`browser`),icon:v.default,onClick:()=>L(`browser`),tooltipContent:H(t.I18nKey.COMMON$BROWSER),tooltipAriaLabel:H(t.I18nKey.COMMON$BROWSER),label:H(t.I18nKey.COMMON$BROWSER)}];N&&W.splice(1,0,{tabValue:`tasklist`,isActive:R(`tasklist`),icon:b.default,onClick:()=>L(`tasklist`),tooltipContent:H(t.I18nKey.COMMON$TASK_LIST),tooltipAriaLabel:H(t.I18nKey.COMMON$TASK_LIST),label:H(t.I18nKey.COMMON$TASK_LIST)});let G=W.filter(e=>e.tabValue===`vscode`&&P.kind!==`cloud`?!1:M.unpinnedTabs.includes(e.tabValue)?B===e.tabValue:!0),K=M.unpinnedTabs.join(`,`),q=I===n.AgentState.RUNNING||I===n.AgentState.LOADING||!k,J=(0,w.useRef)(null),Y=(0,w.useRef)(null),X=(0,w.useRef)(null),Z=(0,w.useRef)(null),[Q,$]=(0,w.useState)(G.length);(0,w.useLayoutEffect)(()=>{let e=J.current,t=Y.current,n=X.current;if(!e||!t||!n)return;let r=()=>{let r=t.querySelectorAll(`[data-tab-measure="true"]`),i=r.length,a=e.getBoundingClientRect().width;if(a===0){$(i);return}let o=Array.from(r).map(e=>e.getBoundingClientRect().width);if(o.length!==i||i===0){$(Math.max(0,i));return}let s=n.getBoundingClientRect().width,c=getComputedStyle(e).columnGap||getComputedStyle(e).gap,l=parseFloat(c)||6,u=0;for(let e=i;e>=0;--e){let t=s;for(let n=0;n<e;n+=1)t+=o[n]??0;if(e>0&&(t+=e*l),t<=a+.5){u=e;break}}$(e=>e===u?e:u)};if(r(),typeof ResizeObserver>`u`)return;let i=new ResizeObserver(r);return i.observe(e),()=>i.disconnect()},[K,G.length,N,P.kind,B,V,U.language]);let te=Math.min(Q,G.length);return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsxs)(`div`,{className:r.cn(`relative w-full min-w-0`,E===`compact`?`flex h-full min-h-0 items-center py-0 pl-0 pr-1`:`min-h-10 p-1`),children:[(0,T.jsx)(`div`,{ref:Y,"aria-hidden":!0,className:`pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5`,children:G.map(({tabValue:e,icon:t,isActive:n,tooltipContent:i,tooltipAriaLabel:a,label:o,className:s},c)=>(0,T.jsx)(g.ChatActionTooltip,{tooltip:i,ariaLabel:a,children:(0,T.jsx)(x.ConversationTabNav,{tabValue:e,icon:t,onClick:()=>{},isActive:n,label:o,className:r.cn(s,`shrink-0`),measureOnly:!0})},`measure-${e}-${c}`))}),(0,T.jsx)(`div`,{ref:J,className:`flex w-full min-w-0 flex-nowrap items-center justify-start`,children:(0,T.jsxs)(`div`,{className:`flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5`,children:[(0,T.jsx)(`div`,{className:`flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-x-hidden`,children:G.slice(0,te).map(({tabValue:e,icon:t,onClick:n,isActive:i,tooltipContent:a,tooltipAriaLabel:o,label:s,className:c},l)=>(0,T.jsx)(g.ChatActionTooltip,{tooltip:a,ariaLabel:o,children:(0,T.jsx)(x.ConversationTabNav,{tabValue:e,icon:t,onClick:n,isActive:i,label:s,className:r.cn(c,`shrink-0`)})},`${e}-${l}`))}),(0,T.jsxs)(`div`,{ref:X,className:`relative shrink-0`,children:[(0,T.jsx)(h.EllipsisButton,{ref:Z,onClick:()=>j(!A),ariaLabel:H(t.I18nKey.COMMON$MORE_OPTIONS),iconClassName:E===`compact`?l.mobileTopBarIconClassName:void 0}),(0,T.jsx)(C.ConversationTabsContextMenu,{isOpen:A,onClose:()=>j(!1),ignoreOutsideClickRef:Z})]})]})})]}),R(`planner`)&&(0,T.jsx)(`div`,{className:r.cn(`flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1`),children:(0,T.jsx)(`button`,{type:`button`,onClick:F,disabled:q,className:r.cn(`flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity`,q?`cursor-not-allowed opacity-50`:`cursor-pointer hover:opacity-90`),"data-testid":`planner-tab-build-button`,children:(0,T.jsxs)(u.Typography.Text,{className:`text-[11px] font-normal leading-5 text-black`,children:[H(t.I18nKey.COMMON$BUILD),` ⌘↩`]})})})]})}exports.ConversationTabs=E;
+require(`../../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../../i18n/declaration.cjs`),n=require(`../../../../types/agent-state.cjs`),r=require(`../../../../utils/utils.cjs`),i=require(`../../../../hooks/use-conversation-id.cjs`),a=require(`../../../../utils/conversation-local-storage.cjs`),o=require(`../../../../stores/conversation-store.cjs`),s=require(`../../../../contexts/active-backend-context.cjs`),c=require(`../../../../hooks/use-agent-state.cjs`),l=require(`../../../../utils/mobile-top-bar-icon-button-classes.cjs`),u=require(`../../../../ui/typography.cjs`),d=require(`../../../../icons/lesson-plan.cjs`),f=require(`../../../../icons/document.cjs`),p=require(`../../../../hooks/use-handle-build-plan-click.cjs`),m=require(`../../../../hooks/use-select-conversation-tab.cjs`),h=require(`../../conversation-panel/ellipsis-button.cjs`),g=require(`../../chat/chat-action-tooltip.cjs`),_=require(`../../../../icons/terminal.cjs`),v=require(`../../../../icons/globe.cjs`),y=require(`../../../../icons/vscode.cjs`),b=require(`../../../../icons/double-check.cjs`),x=require(`./conversation-tab-nav.cjs`),S=require(`./vscode-tooltip-content.cjs`),ee=require(`../../../../hooks/use-task-list.cjs`),C=require(`./conversation-tabs-context-menu.cjs`);let w=require(`react`),T=require(`react/jsx-runtime`);function E({variant:E=`default`}){let{conversationId:D}=i.useConversationId(),{setSelectedTab:O,planContent:k}=o.useConversationStore(),[A,j]=(0,w.useState)(!1),{state:M}=a.useConversationLocalStorageState(D),{hasTaskList:N}=ee.useTaskList(),{backend:P}=s.useActiveBackend(),{handleBuildPlanClick:F}=p.useHandleBuildPlanClick(),{curAgentState:I}=c.useAgentState(),{selectTab:L,isTabActive:R,onTabChange:z,selectedTab:B,isRightPanelShown:V}=m.useSelectConversationTab();(0,w.useEffect)(()=>{O(M.selectedTab)},[O,M.selectedTab]),(0,w.useEffect)(()=>{V&&(B||z(`files`))},[V,B,z]);let{t:H,i18n:U}=e.useTranslation(`openhands`),W=[{tabValue:`files`,isActive:R(`files`),icon:f.default,onClick:()=>L(`files`),tooltipContent:H(t.I18nKey.COMMON$FILES),tooltipAriaLabel:H(t.I18nKey.COMMON$FILES),label:H(t.I18nKey.COMMON$FILES)},{tabValue:`planner`,isActive:R(`planner`),icon:d.default,onClick:()=>L(`planner`),tooltipContent:H(t.I18nKey.COMMON$PLANNER),tooltipAriaLabel:H(t.I18nKey.COMMON$PLANNER),label:H(t.I18nKey.COMMON$PLANNER)},{tabValue:`vscode`,isActive:R(`vscode`),icon:y.default,onClick:()=>L(`vscode`),tooltipContent:(0,T.jsx)(S.VSCodeTooltipContent,{}),tooltipAriaLabel:H(t.I18nKey.COMMON$CODE),label:H(t.I18nKey.COMMON$CODE)},{tabValue:`terminal`,isActive:R(`terminal`),icon:_.default,onClick:()=>L(`terminal`),tooltipContent:H(t.I18nKey.COMMON$TERMINAL),tooltipAriaLabel:H(t.I18nKey.COMMON$TERMINAL),label:H(t.I18nKey.COMMON$TERMINAL),className:`pl-2`},{tabValue:`browser`,isActive:R(`browser`),icon:v.default,onClick:()=>L(`browser`),tooltipContent:H(t.I18nKey.COMMON$BROWSER),tooltipAriaLabel:H(t.I18nKey.COMMON$BROWSER),label:H(t.I18nKey.COMMON$BROWSER)}];N&&W.splice(1,0,{tabValue:`tasklist`,isActive:R(`tasklist`),icon:b.default,onClick:()=>L(`tasklist`),tooltipContent:H(t.I18nKey.COMMON$TASK_LIST),tooltipAriaLabel:H(t.I18nKey.COMMON$TASK_LIST),label:H(t.I18nKey.COMMON$TASK_LIST)});let G=W.filter(e=>e.tabValue===`vscode`&&P.kind!==`cloud`||e.tabValue===`planner`&&P.kind!==`cloud`?!1:M.unpinnedTabs.includes(e.tabValue)?B===e.tabValue:!0),K=M.unpinnedTabs.join(`,`),q=I===n.AgentState.RUNNING||I===n.AgentState.LOADING||!k,J=(0,w.useRef)(null),Y=(0,w.useRef)(null),X=(0,w.useRef)(null),Z=(0,w.useRef)(null),[Q,$]=(0,w.useState)(G.length);(0,w.useLayoutEffect)(()=>{let e=J.current,t=Y.current,n=X.current;if(!e||!t||!n)return;let r=()=>{let r=t.querySelectorAll(`[data-tab-measure="true"]`),i=r.length,a=e.getBoundingClientRect().width;if(a===0){$(i);return}let o=Array.from(r).map(e=>e.getBoundingClientRect().width);if(o.length!==i||i===0){$(Math.max(0,i));return}let s=n.getBoundingClientRect().width,c=getComputedStyle(e).columnGap||getComputedStyle(e).gap,l=parseFloat(c)||6,u=0;for(let e=i;e>=0;--e){let t=s;for(let n=0;n<e;n+=1)t+=o[n]??0;if(e>0&&(t+=e*l),t<=a+.5){u=e;break}}$(e=>e===u?e:u)};if(r(),typeof ResizeObserver>`u`)return;let i=new ResizeObserver(r);return i.observe(e),()=>i.disconnect()},[K,G.length,N,P.kind,B,V,U.language]);let te=Math.min(Q,G.length);return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsxs)(`div`,{className:r.cn(`relative w-full min-w-0`,E===`compact`?`flex h-full min-h-0 items-center py-0 pl-0 pr-1`:`min-h-10 p-1`),children:[(0,T.jsx)(`div`,{ref:Y,"aria-hidden":!0,className:`pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5`,children:G.map(({tabValue:e,icon:t,isActive:n,tooltipContent:i,tooltipAriaLabel:a,label:o,className:s},c)=>(0,T.jsx)(g.ChatActionTooltip,{tooltip:i,ariaLabel:a,children:(0,T.jsx)(x.ConversationTabNav,{tabValue:e,icon:t,onClick:()=>{},isActive:n,label:o,className:r.cn(s,`shrink-0`),measureOnly:!0})},`measure-${e}-${c}`))}),(0,T.jsx)(`div`,{ref:J,className:`flex w-full min-w-0 flex-nowrap items-center justify-start`,children:(0,T.jsxs)(`div`,{className:`flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5`,children:[(0,T.jsx)(`div`,{className:`flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-x-hidden`,children:G.slice(0,te).map(({tabValue:e,icon:t,onClick:n,isActive:i,tooltipContent:a,tooltipAriaLabel:o,label:s,className:c},l)=>(0,T.jsx)(g.ChatActionTooltip,{tooltip:a,ariaLabel:o,children:(0,T.jsx)(x.ConversationTabNav,{tabValue:e,icon:t,onClick:n,isActive:i,label:s,className:r.cn(c,`shrink-0`)})},`${e}-${l}`))}),(0,T.jsxs)(`div`,{ref:X,className:`relative shrink-0`,children:[(0,T.jsx)(h.EllipsisButton,{ref:Z,onClick:()=>j(!A),ariaLabel:H(t.I18nKey.COMMON$MORE_OPTIONS),iconClassName:E===`compact`?l.mobileTopBarIconClassName:void 0}),(0,T.jsx)(C.ConversationTabsContextMenu,{isOpen:A,onClose:()=>j(!1),ignoreOutsideClickRef:Z})]})]})})]}),R(`planner`)&&(0,T.jsx)(`div`,{className:r.cn(`flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1`),children:(0,T.jsx)(`button`,{type:`button`,onClick:F,disabled:q,className:r.cn(`flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity`,q?`cursor-not-allowed opacity-50`:`cursor-pointer hover:opacity-90`),"data-testid":`planner-tab-build-button`,children:(0,T.jsxs)(u.Typography.Text,{className:`text-[11px] font-normal leading-5 text-black`,children:[H(t.I18nKey.COMMON$BUILD),` ⌘↩`]})})})]})}exports.ConversationTabs=E;
 //# sourceMappingURL=conversation-tabs.cjs.map

package/dist/components/features/conversation/conversation-tabs/conversation-tabs.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-tabs.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport TerminalIcon from \"#/icons/terminal.svg?react\";\nimport GlobeIcon from \"#/icons/globe.svg?react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { EllipsisButton } from \"#/components/features/conversation-panel/ellipsis-button\";\nimport { cn } from \"#/utils/utils\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport { ConversationTabNav } from \"./conversation-tab-nav\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { VSCodeTooltipContent } from \"./vscode-tooltip-content\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ConversationTabsContextMenu } from \"./conversation-tabs-context-menu\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useHandleBuildPlanClick } from \"#/hooks/use-handle-build-plan-click\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { Typography } from \"#/ui/typography\";\nimport { mobileTopBarIconClassName } from \"#/utils/mobile-top-bar-icon-button-classes\";\n\nexport function ConversationTabs({\n variant = \"default\",\n}: {\n variant?: \"default\" \| \"compact\";\n}) {\n const { conversationId } = useConversationId();\n const { setSelectedTab, planContent } = useConversationStore();\n\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n const { state: persistedState } =\n useConversationLocalStorageState(conversationId);\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n\n const { handleBuildPlanClick } = useHandleBuildPlanClick();\n const { curAgentState } = useAgentState();\n\n const {\n selectTab,\n isTabActive,\n onTabChange,\n selectedTab,\n isRightPanelShown,\n } = useSelectConversationTab();\n\n // Restore the most-recently-used tab from localStorage so users don't\n // lose their tab selection across reloads.\n //\n // Note: we deliberately do NOT mirror `rightPanelShown` from\n // localStorage. The drawer's open/closed state is session-only — see\n // the comment in `useConversationStore` and the schema note in\n // `conversation-local-storage.ts` for the rationale.\n useEffect(() => {\n setSelectedTab(persistedState.selectedTab);\n }, [setSelectedTab, persistedState.selectedTab]);\n\n useEffect(() => {\n const handlePanelVisibilityChange = () => {\n if (isRightPanelShown) {\n // If no tab is selected, default to files tab\n if (!selectedTab) {\n onTabChange(\"files\");\n }\n }\n };\n\n handlePanelVisibilityChange();\n }, [isRightPanelShown, selectedTab, onTabChange]);\n\n const { t, i18n } = useTranslation(\"openhands\");\n\n // `files` is intentionally the leftmost tab — it's the primary entry\n // point for inspecting agent output (workspace files + git diff).\n const tabs = [\n {\n tabValue: \"files\",\n isActive: isTabActive(\"files\"),\n icon: DocumentIcon,\n onClick: () => selectTab(\"files\"),\n tooltipContent: t(I18nKey.COMMON$FILES),\n tooltipAriaLabel: t(I18nKey.COMMON$FILES),\n label: t(I18nKey.COMMON$FILES),\n },\n {\n tabValue: \"planner\",\n isActive: isTabActive(\"planner\"),\n icon: LessonPlanIcon,\n onClick: () => selectTab(\"planner\"),\n tooltipContent: t(I18nKey.COMMON$PLANNER),\n tooltipAriaLabel: t(I18nKey.COMMON$PLANNER),\n label: t(I18nKey.COMMON$PLANNER),\n },\n {\n tabValue: \"vscode\",\n isActive: isTabActive(\"vscode\"),\n icon: VSCodeIcon,\n onClick: () => selectTab(\"vscode\"),\n tooltipContent: <VSCodeTooltipContent />,\n tooltipAriaLabel: t(I18nKey.COMMON$CODE),\n label: t(I18nKey.COMMON$CODE),\n },\n {\n tabValue: \"terminal\",\n isActive: isTabActive(\"terminal\"),\n icon: TerminalIcon,\n onClick: () => selectTab(\"terminal\"),\n tooltipContent: t(I18nKey.COMMON$TERMINAL),\n tooltipAriaLabel: t(I18nKey.COMMON$TERMINAL),\n label: t(I18nKey.COMMON$TERMINAL),\n className: \"pl-2\",\n },\n {\n tabValue: \"browser\",\n isActive: isTabActive(\"browser\"),\n icon: GlobeIcon,\n onClick: () => selectTab(\"browser\"),\n tooltipContent: t(I18nKey.COMMON$BROWSER),\n tooltipAriaLabel: t(I18nKey.COMMON$BROWSER),\n label: t(I18nKey.COMMON$BROWSER),\n },\n ];\n\n if (hasTaskList) {\n // Insert after `files` so the leftmost slot stays Files.\n tabs.splice(1, 0, {\n tabValue: \"tasklist\",\n isActive: isTabActive(\"tasklist\"),\n icon: DoubleCheckIcon,\n onClick: () => selectTab(\"tasklist\"),\n tooltipContent: t(I18nKey.COMMON$TASK_LIST),\n tooltipAriaLabel: t(I18nKey.COMMON$TASK_LIST),\n label: t(I18nKey.COMMON$TASK_LIST),\n });\n }\n\n // Pinned tabs always show in the bar. Unpinned tabs stay hidden unless the\n // user has that tab selected — then it appears while active so the bar\n // matches the open panel. Hide VS Code on local backends (cloud-only URL).\n const visibleTabs = tabs.filter((tab) => {\n if (tab.tabValue === \"vscode\" && backend.kind !== \"cloud\") return false;\n if (!persistedState.unpinnedTabs.includes(tab.tabValue)) return true;\n return selectedTab === tab.tabValue;\n });\n\n const unpinnedSignature = persistedState.unpinnedTabs.join(\",\");\n\n const isAgentRunning =\n curAgentState === AgentState.RUNNING \|\|\n curAgentState === AgentState.LOADING;\n const isBuildDisabled = isAgentRunning \|\| !planContent;\n\n const tabsRowInnerRef = useRef<HTMLDivElement>(null);\n const measureRowRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLButtonElement>(null);\n const [inlineTabCount, setInlineTabCount] = useState(visibleTabs.length);\n\n useLayoutEffect(() => {\n const rowInner = tabsRowInnerRef.current;\n const measureRow = measureRowRef.current;\n const menuEl = menuRef.current;\n if (!rowInner \|\| !measureRow \|\| !menuEl) return undefined;\n\n const measure = () => {\n const measureButtons = measureRow.querySelectorAll<HTMLButtonElement>(\n '[data-tab-measure=\"true\"]',\n );\n const tabCount = measureButtons.length;\n\n const rowWidth = rowInner.getBoundingClientRect().width;\n if (rowWidth === 0) {\n setInlineTabCount(tabCount);\n return;\n }\n\n const widths = Array.from(measureButtons).map(\n (button) => button.getBoundingClientRect().width,\n );\n\n if (widths.length !== tabCount \|\| tabCount === 0) {\n setInlineTabCount(Math.max(0, tabCount));\n return;\n }\n\n const menuWidth = menuEl.getBoundingClientRect().width;\n const gapCss =\n getComputedStyle(rowInner).columnGap \|\| getComputedStyle(rowInner).gap;\n const gapPx = parseFloat(gapCss) \|\| 6;\n\n let nextCount = 0;\n for (let k = tabCount; k >= 0; k -= 1) {\n let total = menuWidth;\n for (let i = 0; i < k; i += 1) {\n total += widths[i] ?? 0;\n }\n if (k > 0) {\n total += k * gapPx;\n }\n if (total <= rowWidth + 0.5) {\n nextCount = k;\n break;\n }\n }\n\n setInlineTabCount((prev) => (prev === nextCount ? prev : nextCount));\n };\n\n measure();\n if (typeof ResizeObserver === \"undefined\") return undefined;\n const ro = new ResizeObserver(measure);\n ro.observe(rowInner);\n return () => ro.disconnect();\n }, [\n unpinnedSignature,\n visibleTabs.length,\n hasTaskList,\n backend.kind,\n selectedTab,\n isRightPanelShown,\n i18n.language,\n ]);\n\n const safeInlineTabCount = Math.min(inlineTabCount, visibleTabs.length);\n\n return (\n <>\n <div\n className={cn(\n \"relative w-full min-w-0\",\n variant === \"compact\"\n ? \"flex h-full min-h-0 items-center py-0 pl-0 pr-1\"\n : \"min-h-10 p-1\",\n )}\n >\n <div\n ref={measureRowRef}\n aria-hidden\n className=\"pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5\"\n >\n {visibleTabs.map(\n (\n {\n tabValue,\n icon,\n isActive,\n tooltipContent,\n tooltipAriaLabel,\n label,\n className: tabClassName,\n },\n index,\n ) => (\n <ChatActionTooltip\n key={`measure-${tabValue}-${index}`}\n tooltip={tooltipContent}\n ariaLabel={tooltipAriaLabel}\n >\n <ConversationTabNav\n tabValue={tabValue}\n icon={icon}\n onClick={() => {}}\n isActive={isActive}\n label={label}\n className={cn(tabClassName, \"shrink-0\")}\n measureOnly\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n <div\n ref={tabsRowInnerRef}\n className=\"flex w-full min-w-0 flex-nowrap items-center justify-start\"\n >\n <div className=\"flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5\">\n <div className=\"flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-x-hidden\">\n {visibleTabs\n .slice(0, safeInlineTabCount)\n .map(\n (\n {\n tabValue,\n icon,\n onClick,\n isActive,\n tooltipContent,\n tooltipAriaLabel,\n label,\n className: tabClassName,\n },\n index,\n ) => (\n <ChatActionTooltip\n key={`${tabValue}-${index}`}\n tooltip={tooltipContent}\n ariaLabel={tooltipAriaLabel}\n >\n <ConversationTabNav\n tabValue={tabValue}\n icon={icon}\n onClick={onClick}\n isActive={isActive}\n label={label}\n className={cn(tabClassName, \"shrink-0\")}\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n <div ref={menuRef} className=\"relative shrink-0\">\n <EllipsisButton\n ref={anchorRef}\n onClick={() => setIsMenuOpen(!isMenuOpen)}\n ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n iconClassName={\n variant === \"compact\" ? mobileTopBarIconClassName : undefined\n }\n />\n <ConversationTabsContextMenu\n isOpen={isMenuOpen}\n onClose={() => setIsMenuOpen(false)}\n ignoreOutsideClickRef={anchorRef}\n />\n </div>\n </div>\n </div>\n </div>\n {isTabActive(\"planner\") && (\n <div\n className={cn(\n \"flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1\",\n )}\n >\n <button\n type=\"button\"\n onClick={handleBuildPlanClick}\n disabled={isBuildDisabled}\n className={cn(\n \"flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity\",\n isBuildDisabled\n ? \"cursor-not-allowed opacity-50\"\n : \"cursor-pointer hover:opacity-90\",\n )}\n data-testid=\"planner-tab-build-button\"\n >\n <Typography.Text className=\"text-[11px] font-normal leading-5 text-black\">\n {/* eslint-disable-next-line i18next/no-literal-string */}\n {t(I18nKey.COMMON$BUILD)} ⌘↩\n </Typography.Text>\n </button>\n </div>\n )}\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"conversation-tabs.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport TerminalIcon from \"#/icons/terminal.svg?react\";\nimport GlobeIcon from \"#/icons/globe.svg?react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { EllipsisButton } from \"#/components/features/conversation-panel/ellipsis-button\";\nimport { cn } from \"#/utils/utils\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport { ConversationTabNav } from \"./conversation-tab-nav\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { VSCodeTooltipContent } from \"./vscode-tooltip-content\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ConversationTabsContextMenu } from \"./conversation-tabs-context-menu\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useHandleBuildPlanClick } from \"#/hooks/use-handle-build-plan-click\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { Typography } from \"#/ui/typography\";\nimport { mobileTopBarIconClassName } from \"#/utils/mobile-top-bar-icon-button-classes\";\n\nexport function ConversationTabs({\n variant = \"default\",\n}: {\n variant?: \"default\" \| \"compact\";\n}) {\n const { conversationId } = useConversationId();\n const { setSelectedTab, planContent } = useConversationStore();\n\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n const { state: persistedState } =\n useConversationLocalStorageState(conversationId);\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n\n const { handleBuildPlanClick } = useHandleBuildPlanClick();\n const { curAgentState } = useAgentState();\n\n const {\n selectTab,\n isTabActive,\n onTabChange,\n selectedTab,\n isRightPanelShown,\n } = useSelectConversationTab();\n\n // Restore the most-recently-used tab from localStorage so users don't\n // lose their tab selection across reloads.\n //\n // Note: we deliberately do NOT mirror `rightPanelShown` from\n // localStorage. The drawer's open/closed state is session-only — see\n // the comment in `useConversationStore` and the schema note in\n // `conversation-local-storage.ts` for the rationale.\n useEffect(() => {\n setSelectedTab(persistedState.selectedTab);\n }, [setSelectedTab, persistedState.selectedTab]);\n\n useEffect(() => {\n const handlePanelVisibilityChange = () => {\n if (isRightPanelShown) {\n // If no tab is selected, default to files tab\n if (!selectedTab) {\n onTabChange(\"files\");\n }\n }\n };\n\n handlePanelVisibilityChange();\n }, [isRightPanelShown, selectedTab, onTabChange]);\n\n const { t, i18n } = useTranslation(\"openhands\");\n\n // `files` is intentionally the leftmost tab — it's the primary entry\n // point for inspecting agent output (workspace files + git diff).\n const tabs = [\n {\n tabValue: \"files\",\n isActive: isTabActive(\"files\"),\n icon: DocumentIcon,\n onClick: () => selectTab(\"files\"),\n tooltipContent: t(I18nKey.COMMON$FILES),\n tooltipAriaLabel: t(I18nKey.COMMON$FILES),\n label: t(I18nKey.COMMON$FILES),\n },\n {\n tabValue: \"planner\",\n isActive: isTabActive(\"planner\"),\n icon: LessonPlanIcon,\n onClick: () => selectTab(\"planner\"),\n tooltipContent: t(I18nKey.COMMON$PLANNER),\n tooltipAriaLabel: t(I18nKey.COMMON$PLANNER),\n label: t(I18nKey.COMMON$PLANNER),\n },\n {\n tabValue: \"vscode\",\n isActive: isTabActive(\"vscode\"),\n icon: VSCodeIcon,\n onClick: () => selectTab(\"vscode\"),\n tooltipContent: <VSCodeTooltipContent />,\n tooltipAriaLabel: t(I18nKey.COMMON$CODE),\n label: t(I18nKey.COMMON$CODE),\n },\n {\n tabValue: \"terminal\",\n isActive: isTabActive(\"terminal\"),\n icon: TerminalIcon,\n onClick: () => selectTab(\"terminal\"),\n tooltipContent: t(I18nKey.COMMON$TERMINAL),\n tooltipAriaLabel: t(I18nKey.COMMON$TERMINAL),\n label: t(I18nKey.COMMON$TERMINAL),\n className: \"pl-2\",\n },\n {\n tabValue: \"browser\",\n isActive: isTabActive(\"browser\"),\n icon: GlobeIcon,\n onClick: () => selectTab(\"browser\"),\n tooltipContent: t(I18nKey.COMMON$BROWSER),\n tooltipAriaLabel: t(I18nKey.COMMON$BROWSER),\n label: t(I18nKey.COMMON$BROWSER),\n },\n ];\n\n if (hasTaskList) {\n // Insert after `files` so the leftmost slot stays Files.\n tabs.splice(1, 0, {\n tabValue: \"tasklist\",\n isActive: isTabActive(\"tasklist\"),\n icon: DoubleCheckIcon,\n onClick: () => selectTab(\"tasklist\"),\n tooltipContent: t(I18nKey.COMMON$TASK_LIST),\n tooltipAriaLabel: t(I18nKey.COMMON$TASK_LIST),\n label: t(I18nKey.COMMON$TASK_LIST),\n });\n }\n\n // Pinned tabs always show in the bar. Unpinned tabs stay hidden unless the\n // user has that tab selected — then it appears while active so the bar\n // matches the open panel. Hide VS Code and Planner on local backends —\n // both are cloud-only (the planning agent isn't supported locally).\n const visibleTabs = tabs.filter((tab) => {\n if (tab.tabValue === \"vscode\" && backend.kind !== \"cloud\") return false;\n if (tab.tabValue === \"planner\" && backend.kind !== \"cloud\") return false;\n if (!persistedState.unpinnedTabs.includes(tab.tabValue)) return true;\n return selectedTab === tab.tabValue;\n });\n\n const unpinnedSignature = persistedState.unpinnedTabs.join(\",\");\n\n const isAgentRunning =\n curAgentState === AgentState.RUNNING \|\|\n curAgentState === AgentState.LOADING;\n const isBuildDisabled = isAgentRunning \|\| !planContent;\n\n const tabsRowInnerRef = useRef<HTMLDivElement>(null);\n const measureRowRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLButtonElement>(null);\n const [inlineTabCount, setInlineTabCount] = useState(visibleTabs.length);\n\n useLayoutEffect(() => {\n const rowInner = tabsRowInnerRef.current;\n const measureRow = measureRowRef.current;\n const menuEl = menuRef.current;\n if (!rowInner \|\| !measureRow \|\| !menuEl) return undefined;\n\n const measure = () => {\n const measureButtons = measureRow.querySelectorAll<HTMLButtonElement>(\n '[data-tab-measure=\"true\"]',\n );\n const tabCount = measureButtons.length;\n\n const rowWidth = rowInner.getBoundingClientRect().width;\n if (rowWidth === 0) {\n setInlineTabCount(tabCount);\n return;\n }\n\n const widths = Array.from(measureButtons).map(\n (button) => button.getBoundingClientRect().width,\n );\n\n if (widths.length !== tabCount \|\| tabCount === 0) {\n setInlineTabCount(Math.max(0, tabCount));\n return;\n }\n\n const menuWidth = menuEl.getBoundingClientRect().width;\n const gapCss =\n getComputedStyle(rowInner).columnGap \|\| getComputedStyle(rowInner).gap;\n const gapPx = parseFloat(gapCss) \|\| 6;\n\n let nextCount = 0;\n for (let k = tabCount; k >= 0; k -= 1) {\n let total = menuWidth;\n for (let i = 0; i < k; i += 1) {\n total += widths[i] ?? 0;\n }\n if (k > 0) {\n total += k * gapPx;\n }\n if (total <= rowWidth + 0.5) {\n nextCount = k;\n break;\n }\n }\n\n setInlineTabCount((prev) => (prev === nextCount ? prev : nextCount));\n };\n\n measure();\n if (typeof ResizeObserver === \"undefined\") return undefined;\n const ro = new ResizeObserver(measure);\n ro.observe(rowInner);\n return () => ro.disconnect();\n }, [\n unpinnedSignature,\n visibleTabs.length,\n hasTaskList,\n backend.kind,\n selectedTab,\n isRightPanelShown,\n i18n.language,\n ]);\n\n const safeInlineTabCount = Math.min(inlineTabCount, visibleTabs.length);\n\n return (\n <>\n <div\n className={cn(\n \"relative w-full min-w-0\",\n variant === \"compact\"\n ? \"flex h-full min-h-0 items-center py-0 pl-0 pr-1\"\n : \"min-h-10 p-1\",\n )}\n >\n <div\n ref={measureRowRef}\n aria-hidden\n className=\"pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5\"\n >\n {visibleTabs.map(\n (\n {\n tabValue,\n icon,\n isActive,\n tooltipContent,\n tooltipAriaLabel,\n label,\n className: tabClassName,\n },\n index,\n ) => (\n <ChatActionTooltip\n key={`measure-${tabValue}-${index}`}\n tooltip={tooltipContent}\n ariaLabel={tooltipAriaLabel}\n >\n <ConversationTabNav\n tabValue={tabValue}\n icon={icon}\n onClick={() => {}}\n isActive={isActive}\n label={label}\n className={cn(tabClassName, \"shrink-0\")}\n measureOnly\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n <div\n ref={tabsRowInnerRef}\n className=\"flex w-full min-w-0 flex-nowrap items-center justify-start\"\n >\n <div className=\"flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5\">\n <div className=\"flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-x-hidden\">\n {visibleTabs\n .slice(0, safeInlineTabCount)\n .map(\n (\n {\n tabValue,\n icon,\n onClick,\n isActive,\n tooltipContent,\n tooltipAriaLabel,\n label,\n className: tabClassName,\n },\n index,\n ) => (\n <ChatActionTooltip\n key={`${tabValue}-${index}`}\n tooltip={tooltipContent}\n ariaLabel={tooltipAriaLabel}\n >\n <ConversationTabNav\n tabValue={tabValue}\n icon={icon}\n onClick={onClick}\n isActive={isActive}\n label={label}\n className={cn(tabClassName, \"shrink-0\")}\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n <div ref={menuRef} className=\"relative shrink-0\">\n <EllipsisButton\n ref={anchorRef}\n onClick={() => setIsMenuOpen(!isMenuOpen)}\n ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n iconClassName={\n variant === \"compact\" ? mobileTopBarIconClassName : undefined\n }\n />\n <ConversationTabsContextMenu\n isOpen={isMenuOpen}\n onClose={() => setIsMenuOpen(false)}\n ignoreOutsideClickRef={anchorRef}\n />\n </div>\n </div>\n </div>\n </div>\n {isTabActive(\"planner\") && (\n <div\n className={cn(\n \"flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1\",\n )}\n >\n <button\n type=\"button\"\n onClick={handleBuildPlanClick}\n disabled={isBuildDisabled}\n className={cn(\n \"flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity\",\n isBuildDisabled\n ? \"cursor-not-allowed opacity-50\"\n : \"cursor-pointer hover:opacity-90\",\n )}\n data-testid=\"planner-tab-build-button\"\n >\n <Typography.Text className=\"text-[11px] font-normal leading-5 text-black\">\n {/* eslint-disable-next-line i18next/no-literal-string */}\n {t(I18nKey.COMMON$BUILD)} ⌘↩\n </Typography.Text>\n </button>\n </div>\n )}\n </>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/conversation/conversation-tabs/conversation-tabs.js CHANGED Viewed

@@ -10,24 +10,24 @@ import { useAgentState as c } from "../../../../hooks/use-agent-state.js";
 import { mobileTopBarIconClassName as l } from "../../../../utils/mobile-top-bar-icon-button-classes.js";
 import { Typography as u } from "../../../../ui/typography.js";
 import d from "../../../../icons/lesson-plan.js";
-import ee from "../../../../icons/document.js";
-import { useHandleBuildPlanClick as te } from "../../../../hooks/use-handle-build-plan-click.js";
-import { useSelectConversationTab as ne } from "../../../../hooks/use-select-conversation-tab.js";
-import { EllipsisButton as f } from "../../conversation-panel/ellipsis-button.js";
-import { ChatActionTooltip as p } from "../../chat/chat-action-tooltip.js";
-import m from "../../../../icons/terminal.js";
+import f from "../../../../icons/document.js";
+import { useHandleBuildPlanClick as ee } from "../../../../hooks/use-handle-build-plan-click.js";
+import { useSelectConversationTab as te } from "../../../../hooks/use-select-conversation-tab.js";
+import { EllipsisButton as p } from "../../conversation-panel/ellipsis-button.js";
+import { ChatActionTooltip as m } from "../../chat/chat-action-tooltip.js";
+import ne from "../../../../icons/terminal.js";
 import h from "../../../../icons/globe.js";
 import g from "../../../../icons/vscode.js";
 import _ from "../../../../icons/double-check.js";
 import { ConversationTabNav as v } from "./conversation-tab-nav.js";
 import { VSCodeTooltipContent as y } from "./vscode-tooltip-content.js";
-import { useTaskList as re } from "../../../../hooks/use-task-list.js";
-import { ConversationTabsContextMenu as b } from "./conversation-tabs-context-menu.js";
+import { useTaskList as b } from "../../../../hooks/use-task-list.js";
+import { ConversationTabsContextMenu as re } from "./conversation-tabs-context-menu.js";
 import { useEffect as x, useLayoutEffect as S, useRef as C, useState as w } from "react";
 import { Fragment as ie, jsx as T, jsxs as E } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-tabs/conversation-tabs.tsx
 function D({ variant: D = "default" }) {
-	let { conversationId: O } = i(), { setSelectedTab: k, planContent: A } = o(), [j, M] = w(!1), { state: N } = a(O), { hasTaskList: P } = re(), { backend: F } = s(), { handleBuildPlanClick: I } = te(), { curAgentState: L } = c(), { selectTab: R, isTabActive: z, onTabChange: B, selectedTab: V, isRightPanelShown: H } = ne();
+	let { conversationId: O } = i(), { setSelectedTab: k, planContent: A } = o(), [j, M] = w(!1), { state: N } = a(O), { hasTaskList: P } = b(), { backend: F } = s(), { handleBuildPlanClick: I } = ee(), { curAgentState: L } = c(), { selectTab: R, isTabActive: z, onTabChange: B, selectedTab: V, isRightPanelShown: H } = te();
 	x(() => {
 		k(N.selectedTab);
 	}, [k, N.selectedTab]), x(() => {
@@ -41,7 +41,7 @@ function D({ variant: D = "default" }) {
 		{
 			tabValue: "files",
 			isActive: z("files"),
-			icon: ee,
+			icon: f,
 			onClick: () => R("files"),
 			tooltipContent: U(t.COMMON$FILES),
 			tooltipAriaLabel: U(t.COMMON$FILES),
@@ -68,7 +68,7 @@ function D({ variant: D = "default" }) {
 		{
 			tabValue: "terminal",
 			isActive: z("terminal"),
-			icon: m,
+			icon: ne,
 			onClick: () => R("terminal"),
 			tooltipContent: U(t.COMMON$TERMINAL),
 			tooltipAriaLabel: U(t.COMMON$TERMINAL),
@@ -94,7 +94,7 @@ function D({ variant: D = "default" }) {
 		tooltipAriaLabel: U(t.COMMON$TASK_LIST),
 		label: U(t.COMMON$TASK_LIST)
 	});
-	let K = G.filter((e) => e.tabValue === "vscode" && F.kind !== "cloud" ? !1 : N.unpinnedTabs.includes(e.tabValue) ? V === e.tabValue : !0), q = N.unpinnedTabs.join(","), J = L === n.RUNNING || L === n.LOADING || !A, Y = C(null), X = C(null), Z = C(null), Q = C(null), [ae, $] = w(K.length);
+	let K = G.filter((e) => e.tabValue === "vscode" && F.kind !== "cloud" || e.tabValue === "planner" && F.kind !== "cloud" ? !1 : N.unpinnedTabs.includes(e.tabValue) ? V === e.tabValue : !0), q = N.unpinnedTabs.join(","), J = L === n.RUNNING || L === n.LOADING || !A, Y = C(null), X = C(null), Z = C(null), Q = C(null), [ae, $] = w(K.length);
 	S(() => {
 		let e = Y.current, t = X.current, n = Z.current;
 		if (!e || !t || !n) return;
@@ -139,7 +139,7 @@ function D({ variant: D = "default" }) {
 			ref: X,
 			"aria-hidden": !0,
 			className: "pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5",
-			children: K.map(({ tabValue: e, icon: t, isActive: n, tooltipContent: i, tooltipAriaLabel: a, label: o, className: s }, c) => /* @__PURE__ */ T(p, {
+			children: K.map(({ tabValue: e, icon: t, isActive: n, tooltipContent: i, tooltipAriaLabel: a, label: o, className: s }, c) => /* @__PURE__ */ T(m, {
 				tooltip: i,
 				ariaLabel: a,
 				children: /* @__PURE__ */ T(v, {
@@ -159,7 +159,7 @@ function D({ variant: D = "default" }) {
 				className: "flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5",
 				children: [/* @__PURE__ */ T("div", {
 					className: "flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-x-hidden",
-					children: K.slice(0, oe).map(({ tabValue: e, icon: t, onClick: n, isActive: i, tooltipContent: a, tooltipAriaLabel: o, label: s, className: c }, l) => /* @__PURE__ */ T(p, {
+					children: K.slice(0, oe).map(({ tabValue: e, icon: t, onClick: n, isActive: i, tooltipContent: a, tooltipAriaLabel: o, label: s, className: c }, l) => /* @__PURE__ */ T(m, {
 						tooltip: a,
 						ariaLabel: o,
 						children: /* @__PURE__ */ T(v, {
@@ -174,12 +174,12 @@ function D({ variant: D = "default" }) {
 				}), /* @__PURE__ */ E("div", {
 					ref: Z,
 					className: "relative shrink-0",
-					children: [/* @__PURE__ */ T(f, {
+					children: [/* @__PURE__ */ T(p, {
 						ref: Q,
 						onClick: () => M(!j),
 						ariaLabel: U(t.COMMON$MORE_OPTIONS),
 						iconClassName: D === "compact" ? l : void 0
-					}), /* @__PURE__ */ T(b, {
+					}), /* @__PURE__ */ T(re, {
 						isOpen: j,
 						onClose: () => M(!1),
 						ignoreOutsideClickRef: Q

package/dist/components/features/conversation/conversation-tabs/conversation-tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-tabs.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport TerminalIcon from \"#/icons/terminal.svg?react\";\nimport GlobeIcon from \"#/icons/globe.svg?react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { EllipsisButton } from \"#/components/features/conversation-panel/ellipsis-button\";\nimport { cn } from \"#/utils/utils\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport { ConversationTabNav } from \"./conversation-tab-nav\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { VSCodeTooltipContent } from \"./vscode-tooltip-content\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ConversationTabsContextMenu } from \"./conversation-tabs-context-menu\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useHandleBuildPlanClick } from \"#/hooks/use-handle-build-plan-click\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { Typography } from \"#/ui/typography\";\nimport { mobileTopBarIconClassName } from \"#/utils/mobile-top-bar-icon-button-classes\";\n\nexport function ConversationTabs({\n variant = \"default\",\n}: {\n variant?: \"default\" \| \"compact\";\n}) {\n const { conversationId } = useConversationId();\n const { setSelectedTab, planContent } = useConversationStore();\n\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n const { state: persistedState } =\n useConversationLocalStorageState(conversationId);\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n\n const { handleBuildPlanClick } = useHandleBuildPlanClick();\n const { curAgentState } = useAgentState();\n\n const {\n selectTab,\n isTabActive,\n onTabChange,\n selectedTab,\n isRightPanelShown,\n } = useSelectConversationTab();\n\n // Restore the most-recently-used tab from localStorage so users don't\n // lose their tab selection across reloads.\n //\n // Note: we deliberately do NOT mirror `rightPanelShown` from\n // localStorage. The drawer's open/closed state is session-only — see\n // the comment in `useConversationStore` and the schema note in\n // `conversation-local-storage.ts` for the rationale.\n useEffect(() => {\n setSelectedTab(persistedState.selectedTab);\n }, [setSelectedTab, persistedState.selectedTab]);\n\n useEffect(() => {\n const handlePanelVisibilityChange = () => {\n if (isRightPanelShown) {\n // If no tab is selected, default to files tab\n if (!selectedTab) {\n onTabChange(\"files\");\n }\n }\n };\n\n handlePanelVisibilityChange();\n }, [isRightPanelShown, selectedTab, onTabChange]);\n\n const { t, i18n } = useTranslation(\"openhands\");\n\n // `files` is intentionally the leftmost tab — it's the primary entry\n // point for inspecting agent output (workspace files + git diff).\n const tabs = [\n {\n tabValue: \"files\",\n isActive: isTabActive(\"files\"),\n icon: DocumentIcon,\n onClick: () => selectTab(\"files\"),\n tooltipContent: t(I18nKey.COMMON$FILES),\n tooltipAriaLabel: t(I18nKey.COMMON$FILES),\n label: t(I18nKey.COMMON$FILES),\n },\n {\n tabValue: \"planner\",\n isActive: isTabActive(\"planner\"),\n icon: LessonPlanIcon,\n onClick: () => selectTab(\"planner\"),\n tooltipContent: t(I18nKey.COMMON$PLANNER),\n tooltipAriaLabel: t(I18nKey.COMMON$PLANNER),\n label: t(I18nKey.COMMON$PLANNER),\n },\n {\n tabValue: \"vscode\",\n isActive: isTabActive(\"vscode\"),\n icon: VSCodeIcon,\n onClick: () => selectTab(\"vscode\"),\n tooltipContent: <VSCodeTooltipContent />,\n tooltipAriaLabel: t(I18nKey.COMMON$CODE),\n label: t(I18nKey.COMMON$CODE),\n },\n {\n tabValue: \"terminal\",\n isActive: isTabActive(\"terminal\"),\n icon: TerminalIcon,\n onClick: () => selectTab(\"terminal\"),\n tooltipContent: t(I18nKey.COMMON$TERMINAL),\n tooltipAriaLabel: t(I18nKey.COMMON$TERMINAL),\n label: t(I18nKey.COMMON$TERMINAL),\n className: \"pl-2\",\n },\n {\n tabValue: \"browser\",\n isActive: isTabActive(\"browser\"),\n icon: GlobeIcon,\n onClick: () => selectTab(\"browser\"),\n tooltipContent: t(I18nKey.COMMON$BROWSER),\n tooltipAriaLabel: t(I18nKey.COMMON$BROWSER),\n label: t(I18nKey.COMMON$BROWSER),\n },\n ];\n\n if (hasTaskList) {\n // Insert after `files` so the leftmost slot stays Files.\n tabs.splice(1, 0, {\n tabValue: \"tasklist\",\n isActive: isTabActive(\"tasklist\"),\n icon: DoubleCheckIcon,\n onClick: () => selectTab(\"tasklist\"),\n tooltipContent: t(I18nKey.COMMON$TASK_LIST),\n tooltipAriaLabel: t(I18nKey.COMMON$TASK_LIST),\n label: t(I18nKey.COMMON$TASK_LIST),\n });\n }\n\n // Pinned tabs always show in the bar. Unpinned tabs stay hidden unless the\n // user has that tab selected — then it appears while active so the bar\n // matches the open panel. Hide VS Code on local backends (cloud-only URL).\n const visibleTabs = tabs.filter((tab) => {\n if (tab.tabValue === \"vscode\" && backend.kind !== \"cloud\") return false;\n if (!persistedState.unpinnedTabs.includes(tab.tabValue)) return true;\n return selectedTab === tab.tabValue;\n });\n\n const unpinnedSignature = persistedState.unpinnedTabs.join(\",\");\n\n const isAgentRunning =\n curAgentState === AgentState.RUNNING \|\|\n curAgentState === AgentState.LOADING;\n const isBuildDisabled = isAgentRunning \|\| !planContent;\n\n const tabsRowInnerRef = useRef<HTMLDivElement>(null);\n const measureRowRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLButtonElement>(null);\n const [inlineTabCount, setInlineTabCount] = useState(visibleTabs.length);\n\n useLayoutEffect(() => {\n const rowInner = tabsRowInnerRef.current;\n const measureRow = measureRowRef.current;\n const menuEl = menuRef.current;\n if (!rowInner \|\| !measureRow \|\| !menuEl) return undefined;\n\n const measure = () => {\n const measureButtons = measureRow.querySelectorAll<HTMLButtonElement>(\n '[data-tab-measure=\"true\"]',\n );\n const tabCount = measureButtons.length;\n\n const rowWidth = rowInner.getBoundingClientRect().width;\n if (rowWidth === 0) {\n setInlineTabCount(tabCount);\n return;\n }\n\n const widths = Array.from(measureButtons).map(\n (button) => button.getBoundingClientRect().width,\n );\n\n if (widths.length !== tabCount \|\| tabCount === 0) {\n setInlineTabCount(Math.max(0, tabCount));\n return;\n }\n\n const menuWidth = menuEl.getBoundingClientRect().width;\n const gapCss =\n getComputedStyle(rowInner).columnGap \|\| getComputedStyle(rowInner).gap;\n const gapPx = parseFloat(gapCss) \|\| 6;\n\n let nextCount = 0;\n for (let k = tabCount; k >= 0; k -= 1) {\n let total = menuWidth;\n for (let i = 0; i < k; i += 1) {\n total += widths[i] ?? 0;\n }\n if (k > 0) {\n total += k * gapPx;\n }\n if (total <= rowWidth + 0.5) {\n nextCount = k;\n break;\n }\n }\n\n setInlineTabCount((prev) => (prev === nextCount ? prev : nextCount));\n };\n\n measure();\n if (typeof ResizeObserver === \"undefined\") return undefined;\n const ro = new ResizeObserver(measure);\n ro.observe(rowInner);\n return () => ro.disconnect();\n }, [\n unpinnedSignature,\n visibleTabs.length,\n hasTaskList,\n backend.kind,\n selectedTab,\n isRightPanelShown,\n i18n.language,\n ]);\n\n const safeInlineTabCount = Math.min(inlineTabCount, visibleTabs.length);\n\n return (\n <>\n <div\n className={cn(\n \"relative w-full min-w-0\",\n variant === \"compact\"\n ? \"flex h-full min-h-0 items-center py-0 pl-0 pr-1\"\n : \"min-h-10 p-1\",\n )}\n >\n <div\n ref={measureRowRef}\n aria-hidden\n className=\"pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5\"\n >\n {visibleTabs.map(\n (\n {\n tabValue,\n icon,\n isActive,\n tooltipContent,\n tooltipAriaLabel,\n label,\n className: tabClassName,\n },\n index,\n ) => (\n <ChatActionTooltip\n key={`measure-${tabValue}-${index}`}\n tooltip={tooltipContent}\n ariaLabel={tooltipAriaLabel}\n >\n <ConversationTabNav\n tabValue={tabValue}\n icon={icon}\n onClick={() => {}}\n isActive={isActive}\n label={label}\n className={cn(tabClassName, \"shrink-0\")}\n measureOnly\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n <div\n ref={tabsRowInnerRef}\n className=\"flex w-full min-w-0 flex-nowrap items-center justify-start\"\n >\n <div className=\"flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5\">\n <div className=\"flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-x-hidden\">\n {visibleTabs\n .slice(0, safeInlineTabCount)\n .map(\n (\n {\n tabValue,\n icon,\n onClick,\n isActive,\n tooltipContent,\n tooltipAriaLabel,\n label,\n className: tabClassName,\n },\n index,\n ) => (\n <ChatActionTooltip\n key={`${tabValue}-${index}`}\n tooltip={tooltipContent}\n ariaLabel={tooltipAriaLabel}\n >\n <ConversationTabNav\n tabValue={tabValue}\n icon={icon}\n onClick={onClick}\n isActive={isActive}\n label={label}\n className={cn(tabClassName, \"shrink-0\")}\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n <div ref={menuRef} className=\"relative shrink-0\">\n <EllipsisButton\n ref={anchorRef}\n onClick={() => setIsMenuOpen(!isMenuOpen)}\n ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n iconClassName={\n variant === \"compact\" ? mobileTopBarIconClassName : undefined\n }\n />\n <ConversationTabsContextMenu\n isOpen={isMenuOpen}\n onClose={() => setIsMenuOpen(false)}\n ignoreOutsideClickRef={anchorRef}\n />\n </div>\n </div>\n </div>\n </div>\n {isTabActive(\"planner\") && (\n <div\n className={cn(\n \"flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1\",\n )}\n >\n <button\n type=\"button\"\n onClick={handleBuildPlanClick}\n disabled={isBuildDisabled}\n className={cn(\n \"flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity\",\n isBuildDisabled\n ? \"cursor-not-allowed opacity-50\"\n : \"cursor-pointer hover:opacity-90\",\n )}\n data-testid=\"planner-tab-build-button\"\n >\n <Typography.Text className=\"text-[11px] font-normal leading-5 text-black\">\n {/* eslint-disable-next-line i18next/no-literal-string */}\n {t(I18nKey.COMMON$BUILD)} ⌘↩\n </Typography.Text>\n </button>\n </div>\n )}\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"conversation-tabs.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport TerminalIcon from \"#/icons/terminal.svg?react\";\nimport GlobeIcon from \"#/icons/globe.svg?react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport DoubleCheckIcon from \"#/icons/double-check.svg?react\";\nimport { EllipsisButton } from \"#/components/features/conversation-panel/ellipsis-button\";\nimport { cn } from \"#/utils/utils\";\nimport { useConversationLocalStorageState } from \"#/utils/conversation-local-storage\";\nimport { ConversationTabNav } from \"./conversation-tab-nav\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { VSCodeTooltipContent } from \"./vscode-tooltip-content\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { ConversationTabsContextMenu } from \"./conversation-tabs-context-menu\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useSelectConversationTab } from \"#/hooks/use-select-conversation-tab\";\nimport { useTaskList } from \"#/hooks/use-task-list\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useHandleBuildPlanClick } from \"#/hooks/use-handle-build-plan-click\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { Typography } from \"#/ui/typography\";\nimport { mobileTopBarIconClassName } from \"#/utils/mobile-top-bar-icon-button-classes\";\n\nexport function ConversationTabs({\n variant = \"default\",\n}: {\n variant?: \"default\" \| \"compact\";\n}) {\n const { conversationId } = useConversationId();\n const { setSelectedTab, planContent } = useConversationStore();\n\n const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n const { state: persistedState } =\n useConversationLocalStorageState(conversationId);\n\n const { hasTaskList } = useTaskList();\n const { backend } = useActiveBackend();\n\n const { handleBuildPlanClick } = useHandleBuildPlanClick();\n const { curAgentState } = useAgentState();\n\n const {\n selectTab,\n isTabActive,\n onTabChange,\n selectedTab,\n isRightPanelShown,\n } = useSelectConversationTab();\n\n // Restore the most-recently-used tab from localStorage so users don't\n // lose their tab selection across reloads.\n //\n // Note: we deliberately do NOT mirror `rightPanelShown` from\n // localStorage. The drawer's open/closed state is session-only — see\n // the comment in `useConversationStore` and the schema note in\n // `conversation-local-storage.ts` for the rationale.\n useEffect(() => {\n setSelectedTab(persistedState.selectedTab);\n }, [setSelectedTab, persistedState.selectedTab]);\n\n useEffect(() => {\n const handlePanelVisibilityChange = () => {\n if (isRightPanelShown) {\n // If no tab is selected, default to files tab\n if (!selectedTab) {\n onTabChange(\"files\");\n }\n }\n };\n\n handlePanelVisibilityChange();\n }, [isRightPanelShown, selectedTab, onTabChange]);\n\n const { t, i18n } = useTranslation(\"openhands\");\n\n // `files` is intentionally the leftmost tab — it's the primary entry\n // point for inspecting agent output (workspace files + git diff).\n const tabs = [\n {\n tabValue: \"files\",\n isActive: isTabActive(\"files\"),\n icon: DocumentIcon,\n onClick: () => selectTab(\"files\"),\n tooltipContent: t(I18nKey.COMMON$FILES),\n tooltipAriaLabel: t(I18nKey.COMMON$FILES),\n label: t(I18nKey.COMMON$FILES),\n },\n {\n tabValue: \"planner\",\n isActive: isTabActive(\"planner\"),\n icon: LessonPlanIcon,\n onClick: () => selectTab(\"planner\"),\n tooltipContent: t(I18nKey.COMMON$PLANNER),\n tooltipAriaLabel: t(I18nKey.COMMON$PLANNER),\n label: t(I18nKey.COMMON$PLANNER),\n },\n {\n tabValue: \"vscode\",\n isActive: isTabActive(\"vscode\"),\n icon: VSCodeIcon,\n onClick: () => selectTab(\"vscode\"),\n tooltipContent: <VSCodeTooltipContent />,\n tooltipAriaLabel: t(I18nKey.COMMON$CODE),\n label: t(I18nKey.COMMON$CODE),\n },\n {\n tabValue: \"terminal\",\n isActive: isTabActive(\"terminal\"),\n icon: TerminalIcon,\n onClick: () => selectTab(\"terminal\"),\n tooltipContent: t(I18nKey.COMMON$TERMINAL),\n tooltipAriaLabel: t(I18nKey.COMMON$TERMINAL),\n label: t(I18nKey.COMMON$TERMINAL),\n className: \"pl-2\",\n },\n {\n tabValue: \"browser\",\n isActive: isTabActive(\"browser\"),\n icon: GlobeIcon,\n onClick: () => selectTab(\"browser\"),\n tooltipContent: t(I18nKey.COMMON$BROWSER),\n tooltipAriaLabel: t(I18nKey.COMMON$BROWSER),\n label: t(I18nKey.COMMON$BROWSER),\n },\n ];\n\n if (hasTaskList) {\n // Insert after `files` so the leftmost slot stays Files.\n tabs.splice(1, 0, {\n tabValue: \"tasklist\",\n isActive: isTabActive(\"tasklist\"),\n icon: DoubleCheckIcon,\n onClick: () => selectTab(\"tasklist\"),\n tooltipContent: t(I18nKey.COMMON$TASK_LIST),\n tooltipAriaLabel: t(I18nKey.COMMON$TASK_LIST),\n label: t(I18nKey.COMMON$TASK_LIST),\n });\n }\n\n // Pinned tabs always show in the bar. Unpinned tabs stay hidden unless the\n // user has that tab selected — then it appears while active so the bar\n // matches the open panel. Hide VS Code and Planner on local backends —\n // both are cloud-only (the planning agent isn't supported locally).\n const visibleTabs = tabs.filter((tab) => {\n if (tab.tabValue === \"vscode\" && backend.kind !== \"cloud\") return false;\n if (tab.tabValue === \"planner\" && backend.kind !== \"cloud\") return false;\n if (!persistedState.unpinnedTabs.includes(tab.tabValue)) return true;\n return selectedTab === tab.tabValue;\n });\n\n const unpinnedSignature = persistedState.unpinnedTabs.join(\",\");\n\n const isAgentRunning =\n curAgentState === AgentState.RUNNING \|\|\n curAgentState === AgentState.LOADING;\n const isBuildDisabled = isAgentRunning \|\| !planContent;\n\n const tabsRowInnerRef = useRef<HTMLDivElement>(null);\n const measureRowRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLButtonElement>(null);\n const [inlineTabCount, setInlineTabCount] = useState(visibleTabs.length);\n\n useLayoutEffect(() => {\n const rowInner = tabsRowInnerRef.current;\n const measureRow = measureRowRef.current;\n const menuEl = menuRef.current;\n if (!rowInner \|\| !measureRow \|\| !menuEl) return undefined;\n\n const measure = () => {\n const measureButtons = measureRow.querySelectorAll<HTMLButtonElement>(\n '[data-tab-measure=\"true\"]',\n );\n const tabCount = measureButtons.length;\n\n const rowWidth = rowInner.getBoundingClientRect().width;\n if (rowWidth === 0) {\n setInlineTabCount(tabCount);\n return;\n }\n\n const widths = Array.from(measureButtons).map(\n (button) => button.getBoundingClientRect().width,\n );\n\n if (widths.length !== tabCount \|\| tabCount === 0) {\n setInlineTabCount(Math.max(0, tabCount));\n return;\n }\n\n const menuWidth = menuEl.getBoundingClientRect().width;\n const gapCss =\n getComputedStyle(rowInner).columnGap \|\| getComputedStyle(rowInner).gap;\n const gapPx = parseFloat(gapCss) \|\| 6;\n\n let nextCount = 0;\n for (let k = tabCount; k >= 0; k -= 1) {\n let total = menuWidth;\n for (let i = 0; i < k; i += 1) {\n total += widths[i] ?? 0;\n }\n if (k > 0) {\n total += k * gapPx;\n }\n if (total <= rowWidth + 0.5) {\n nextCount = k;\n break;\n }\n }\n\n setInlineTabCount((prev) => (prev === nextCount ? prev : nextCount));\n };\n\n measure();\n if (typeof ResizeObserver === \"undefined\") return undefined;\n const ro = new ResizeObserver(measure);\n ro.observe(rowInner);\n return () => ro.disconnect();\n }, [\n unpinnedSignature,\n visibleTabs.length,\n hasTaskList,\n backend.kind,\n selectedTab,\n isRightPanelShown,\n i18n.language,\n ]);\n\n const safeInlineTabCount = Math.min(inlineTabCount, visibleTabs.length);\n\n return (\n <>\n <div\n className={cn(\n \"relative w-full min-w-0\",\n variant === \"compact\"\n ? \"flex h-full min-h-0 items-center py-0 pl-0 pr-1\"\n : \"min-h-10 p-1\",\n )}\n >\n <div\n ref={measureRowRef}\n aria-hidden\n className=\"pointer-events-none absolute top-0 left-[-10000px] flex flex-nowrap items-center gap-1.5\"\n >\n {visibleTabs.map(\n (\n {\n tabValue,\n icon,\n isActive,\n tooltipContent,\n tooltipAriaLabel,\n label,\n className: tabClassName,\n },\n index,\n ) => (\n <ChatActionTooltip\n key={`measure-${tabValue}-${index}`}\n tooltip={tooltipContent}\n ariaLabel={tooltipAriaLabel}\n >\n <ConversationTabNav\n tabValue={tabValue}\n icon={icon}\n onClick={() => {}}\n isActive={isActive}\n label={label}\n className={cn(tabClassName, \"shrink-0\")}\n measureOnly\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n <div\n ref={tabsRowInnerRef}\n className=\"flex w-full min-w-0 flex-nowrap items-center justify-start\"\n >\n <div className=\"flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5\">\n <div className=\"flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-x-hidden\">\n {visibleTabs\n .slice(0, safeInlineTabCount)\n .map(\n (\n {\n tabValue,\n icon,\n onClick,\n isActive,\n tooltipContent,\n tooltipAriaLabel,\n label,\n className: tabClassName,\n },\n index,\n ) => (\n <ChatActionTooltip\n key={`${tabValue}-${index}`}\n tooltip={tooltipContent}\n ariaLabel={tooltipAriaLabel}\n >\n <ConversationTabNav\n tabValue={tabValue}\n icon={icon}\n onClick={onClick}\n isActive={isActive}\n label={label}\n className={cn(tabClassName, \"shrink-0\")}\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n <div ref={menuRef} className=\"relative shrink-0\">\n <EllipsisButton\n ref={anchorRef}\n onClick={() => setIsMenuOpen(!isMenuOpen)}\n ariaLabel={t(I18nKey.COMMON$MORE_OPTIONS)}\n iconClassName={\n variant === \"compact\" ? mobileTopBarIconClassName : undefined\n }\n />\n <ConversationTabsContextMenu\n isOpen={isMenuOpen}\n onClose={() => setIsMenuOpen(false)}\n ignoreOutsideClickRef={anchorRef}\n />\n </div>\n </div>\n </div>\n </div>\n {isTabActive(\"planner\") && (\n <div\n className={cn(\n \"flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1\",\n )}\n >\n <button\n type=\"button\"\n onClick={handleBuildPlanClick}\n disabled={isBuildDisabled}\n className={cn(\n \"flex h-5 min-w-17 items-center justify-center rounded bg-white px-2 transition-opacity\",\n isBuildDisabled\n ? \"cursor-not-allowed opacity-50\"\n : \"cursor-pointer hover:opacity-90\",\n )}\n data-testid=\"planner-tab-build-button\"\n >\n <Typography.Text className=\"text-[11px] font-normal leading-5 text-black\">\n {/* eslint-disable-next-line i18next/no-literal-string */}\n {t(I18nKey.COMMON$BUILD)} ⌘↩\n </Typography.Text>\n </button>\n </div>\n )}\n </>\n );\n}\n"],"mappings":"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"}

package/dist/components/features/mcp-logo-badge.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-require(`../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../utils/utils.cjs`),t=require(`../../node_modules/@openhands/extensions/mcps/logos.cjs`);let n=require(`react/jsx-runtime`);var r={xs:`h-4 w-4 rounded [&>svg]:h-2.5 [&>svg]:w-2.5`,sm:`h-5 w-5 rounded-md [&>svg]:h-3 [&>svg]:w-3`,md:`h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5`};function i({entry:i,size:a=`md`,className:o,fallback:s,testId:c}){return(0,n.jsx)(`span`,{"aria-hidden":`true`,title:i?.name,"data-testid":c,className:e.cn(`inline-flex shrink-0 items-center justify-center overflow-hidden`,`border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]`,r[a],o),style:{backgroundColor:i?.iconBg??`var(--oh-color-tertiary)`,color:i?.iconColor??`#FFFFFF`},children:i?t.MCP_LOGOS[i.id]??s??t.MCP_FALLBACK_LOGO:s??t.MCP_FALLBACK_LOGO})}exports.McpLogoBadge=i;
+require(`../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../utils/utils.cjs`),t=require(`../../node_modules/@openhands/extensions/integrations/logos.cjs`);let n=require(`react/jsx-runtime`);var r={xs:`h-4 w-4 rounded [&>svg]:h-2.5 [&>svg]:w-2.5`,sm:`h-5 w-5 rounded-md [&>svg]:h-3 [&>svg]:w-3`,md:`h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5`};function i({entry:i,size:a=`md`,className:o,fallback:s,testId:c}){return(0,n.jsx)(`span`,{"aria-hidden":`true`,title:i?.name,"data-testid":c,className:e.cn(`inline-flex shrink-0 items-center justify-center overflow-hidden`,`border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]`,r[a],o),style:{backgroundColor:i?.iconBg??`var(--oh-color-tertiary)`,color:i?.iconColor??`#FFFFFF`},children:i?t.INTEGRATION_LOGOS[i.id]??s??t.INTEGRATION_FALLBACK_LOGO:s??t.INTEGRATION_FALLBACK_LOGO})}exports.McpLogoBadge=i;
 //# sourceMappingURL=mcp-logo-badge.cjs.map

package/dist/components/features/mcp-logo-badge.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mcp-logo-badge.cjs","names":[],"sources":["../../../src/components/features/mcp-logo-badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { ~~McpCatalogEntry~~ } from \"@openhands/extensions/~~mcps~~\";\nimport { ~~MCP_FALLBACK_LOGO, MCP_LOGOS~~ } from \"@openhands/extensions/~~mcps~~/logos\";\nimport { cn } from \"#/utils/utils\";\n\ntype McpLogoEntry = Pick<\n ~~McpCatalogEntry~~,\n \"id\" \| \"name\" \| \"iconBg\" \| \"iconColor\"\n>;\n\nexport type { McpLogoEntry };\n\ninterface McpLogoBadgeProps {\n entry?: McpLogoEntry \| null;\n size?: \"xs\" \| \"sm\" \| \"md\";\n className?: string;\n fallback?: ReactNode;\n testId?: string;\n}\n\nconst sizeClassNames = {\n xs: \"h-4 w-4 rounded [&>svg]:h-2.5 [&>svg]:w-2.5\",\n sm: \"h-5 w-5 rounded-md [&>svg]:h-3 [&>svg]:w-3\",\n md: \"h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5\",\n};\n\nexport function McpLogoBadge({\n entry,\n size = \"md\",\n className,\n fallback,\n testId,\n}: McpLogoBadgeProps) {\n return (\n <span\n aria-hidden=\"true\"\n title={entry?.name}\n data-testid={testId}\n className={cn(\n \"inline-flex shrink-0 items-center justify-center overflow-hidden\",\n \"border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]\",\n sizeClassNames[size],\n className,\n )}\n style={{\n backgroundColor: entry?.iconBg ?? \"var(--oh-color-tertiary)\",\n color: entry?.iconColor ?? \"#FFFFFF\",\n }}\n >\n {entry\n ? (~~MCP_LOGOS~~[entry.id] ?? fallback ?? ~~MCP_FALLBACK_LOGO~~)\n : (fallback ?? ~~MCP_FALLBACK_LOGO~~)}\n </span>\n );\n}\n"],"mappings":"~~iMAoBA~~,IAAM,EAAiB,CACrB,GAAI,8CACJ,GAAI,6CACJ,GAAI,+CACL,CAED,SAAgB,EAAa,CAC3B,QACA,OAAO,KACP,YACA,WACA,UACoB,CACpB,OACE,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,OACZ,MAAO,GAAO,KACd,cAAa,EACb,UAAW,EAAA,GACT,mEACA,uEACA,EAAe,GACf,EACD,CACD,MAAO,CACL,gBAAiB,GAAO,QAAU,2BAClC,MAAO,GAAO,WAAa,UAC5B,UAEA,EACI,EAAA,~~UAAU~~,EAAM,KAAO,GAAY,EAAA,~~kBACnC~~,GAAY,EAAA,~~kBACZ~~,CAAA"}
1	+ {"version":3,"file":"mcp-logo-badge.cjs","names":[],"sources":["../../../src/components/features/mcp-logo-badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { IntegrationCatalogEntry } from \"@openhands/extensions/integrations\";\nimport {\n INTEGRATION_FALLBACK_LOGO,\n INTEGRATION_LOGOS,\n} from \"@openhands/extensions/integrations/logos\";\nimport { cn } from \"#/utils/utils\";\n\ntype McpLogoEntry = Pick<\n IntegrationCatalogEntry,\n \"id\" \| \"name\" \| \"iconBg\" \| \"iconColor\"\n>;\n\nexport type { McpLogoEntry };\n\ninterface McpLogoBadgeProps {\n entry?: McpLogoEntry \| null;\n size?: \"xs\" \| \"sm\" \| \"md\";\n className?: string;\n fallback?: ReactNode;\n testId?: string;\n}\n\nconst sizeClassNames = {\n xs: \"h-4 w-4 rounded [&>svg]:h-2.5 [&>svg]:w-2.5\",\n sm: \"h-5 w-5 rounded-md [&>svg]:h-3 [&>svg]:w-3\",\n md: \"h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5\",\n};\n\nexport function McpLogoBadge({\n entry,\n size = \"md\",\n className,\n fallback,\n testId,\n}: McpLogoBadgeProps) {\n return (\n <span\n aria-hidden=\"true\"\n title={entry?.name}\n data-testid={testId}\n className={cn(\n \"inline-flex shrink-0 items-center justify-center overflow-hidden\",\n \"border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]\",\n sizeClassNames[size],\n className,\n )}\n style={{\n backgroundColor: entry?.iconBg ?? \"var(--oh-color-tertiary)\",\n color: entry?.iconColor ?? \"#FFFFFF\",\n }}\n >\n {entry\n ? (INTEGRATION_LOGOS[entry.id] ?? fallback ?? INTEGRATION_FALLBACK_LOGO)\n : (fallback ?? INTEGRATION_FALLBACK_LOGO)}\n </span>\n );\n}\n"],"mappings":"yMAuBA,IAAM,EAAiB,CACrB,GAAI,8CACJ,GAAI,6CACJ,GAAI,+CACL,CAED,SAAgB,EAAa,CAC3B,QACA,OAAO,KACP,YACA,WACA,UACoB,CACpB,OACE,EAAA,EAAA,KAAC,OAAD,CACE,cAAY,OACZ,MAAO,GAAO,KACd,cAAa,EACb,UAAW,EAAA,GACT,mEACA,uEACA,EAAe,GACf,EACD,CACD,MAAO,CACL,gBAAiB,GAAO,QAAU,2BAClC,MAAO,GAAO,WAAa,UAC5B,UAEA,EACI,EAAA,kBAAkB,EAAM,KAAO,GAAY,EAAA,0BAC3C,GAAY,EAAA,0BACZ,CAAA"}

package/dist/components/features/mcp-logo-badge.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
-import type { McpCatalogEntry } from "@openhands/extensions/mcps";
-type McpLogoEntry = Pick<McpCatalogEntry, "id" | "name" | "iconBg" | "iconColor">;
+import type { IntegrationCatalogEntry } from "@openhands/extensions/integrations";
+type McpLogoEntry = Pick<IntegrationCatalogEntry, "id" | "name" | "iconBg" | "iconColor">;
 export type { McpLogoEntry };
 interface McpLogoBadgeProps {
     entry?: McpLogoEntry | null;

package/dist/components/features/mcp-logo-badge.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { cn as e } from "../../utils/utils.js";
-import { MCP_FALLBACK_LOGO as t, MCP_LOGOS as n } from "../../node_modules/@openhands/extensions/mcps/logos.js";
+import { INTEGRATION_FALLBACK_LOGO as t, INTEGRATION_LOGOS as n } from "../../node_modules/@openhands/extensions/integrations/logos.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/components/features/mcp-logo-badge.tsx
 var i = {

package/dist/components/features/mcp-logo-badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mcp-logo-badge.js","names":[],"sources":["../../../src/components/features/mcp-logo-badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { ~~McpCatalogEntry~~ } from \"@openhands/extensions/~~mcps~~\";\nimport { ~~MCP_FALLBACK_LOGO, MCP_LOGOS~~ } from \"@openhands/extensions/~~mcps~~/logos\";\nimport { cn } from \"#/utils/utils\";\n\ntype McpLogoEntry = Pick<\n ~~McpCatalogEntry~~,\n \"id\" \| \"name\" \| \"iconBg\" \| \"iconColor\"\n>;\n\nexport type { McpLogoEntry };\n\ninterface McpLogoBadgeProps {\n entry?: McpLogoEntry \| null;\n size?: \"xs\" \| \"sm\" \| \"md\";\n className?: string;\n fallback?: ReactNode;\n testId?: string;\n}\n\nconst sizeClassNames = {\n xs: \"h-4 w-4 rounded [&>svg]:h-2.5 [&>svg]:w-2.5\",\n sm: \"h-5 w-5 rounded-md [&>svg]:h-3 [&>svg]:w-3\",\n md: \"h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5\",\n};\n\nexport function McpLogoBadge({\n entry,\n size = \"md\",\n className,\n fallback,\n testId,\n}: McpLogoBadgeProps) {\n return (\n <span\n aria-hidden=\"true\"\n title={entry?.name}\n data-testid={testId}\n className={cn(\n \"inline-flex shrink-0 items-center justify-center overflow-hidden\",\n \"border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]\",\n sizeClassNames[size],\n className,\n )}\n style={{\n backgroundColor: entry?.iconBg ?? \"var(--oh-color-tertiary)\",\n color: entry?.iconColor ?? \"#FFFFFF\",\n }}\n >\n {entry\n ? (~~MCP_LOGOS~~[entry.id] ?? fallback ?? ~~MCP_FALLBACK_LOGO~~)\n : (fallback ?? ~~MCP_FALLBACK_LOGO~~)}\n </span>\n );\n}\n"],"mappings":";;;;~~AAoBA~~,IAAM,IAAiB;CACrB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,SAAgB,EAAa,EAC3B,UACA,UAAO,MACP,cACA,aACA,aACoB;AACpB,QACE,kBAAC,QAAD;EACE,eAAY;EACZ,OAAO,GAAO;EACd,eAAa;EACb,WAAW,EACT,oEACA,wEACA,EAAe,IACf,EACD;EACD,OAAO;GACL,iBAAiB,GAAO,UAAU;GAClC,OAAO,GAAO,aAAa;GAC5B;YAEA,IACI,~~EAAU~~,EAAM,OAAO,KAAY,~~IACnC~~,KAAY;EACZ,CAAA"}
1	+ {"version":3,"file":"mcp-logo-badge.js","names":[],"sources":["../../../src/components/features/mcp-logo-badge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { IntegrationCatalogEntry } from \"@openhands/extensions/integrations\";\nimport {\n INTEGRATION_FALLBACK_LOGO,\n INTEGRATION_LOGOS,\n} from \"@openhands/extensions/integrations/logos\";\nimport { cn } from \"#/utils/utils\";\n\ntype McpLogoEntry = Pick<\n IntegrationCatalogEntry,\n \"id\" \| \"name\" \| \"iconBg\" \| \"iconColor\"\n>;\n\nexport type { McpLogoEntry };\n\ninterface McpLogoBadgeProps {\n entry?: McpLogoEntry \| null;\n size?: \"xs\" \| \"sm\" \| \"md\";\n className?: string;\n fallback?: ReactNode;\n testId?: string;\n}\n\nconst sizeClassNames = {\n xs: \"h-4 w-4 rounded [&>svg]:h-2.5 [&>svg]:w-2.5\",\n sm: \"h-5 w-5 rounded-md [&>svg]:h-3 [&>svg]:w-3\",\n md: \"h-10 w-10 rounded-lg [&>svg]:h-5 [&>svg]:w-5\",\n};\n\nexport function McpLogoBadge({\n entry,\n size = \"md\",\n className,\n fallback,\n testId,\n}: McpLogoBadgeProps) {\n return (\n <span\n aria-hidden=\"true\"\n title={entry?.name}\n data-testid={testId}\n className={cn(\n \"inline-flex shrink-0 items-center justify-center overflow-hidden\",\n \"border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]\",\n sizeClassNames[size],\n className,\n )}\n style={{\n backgroundColor: entry?.iconBg ?? \"var(--oh-color-tertiary)\",\n color: entry?.iconColor ?? \"#FFFFFF\",\n }}\n >\n {entry\n ? (INTEGRATION_LOGOS[entry.id] ?? fallback ?? INTEGRATION_FALLBACK_LOGO)\n : (fallback ?? INTEGRATION_FALLBACK_LOGO)}\n </span>\n );\n}\n"],"mappings":";;;;AAuBA,IAAM,IAAiB;CACrB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,SAAgB,EAAa,EAC3B,UACA,UAAO,MACP,cACA,aACA,aACoB;AACpB,QACE,kBAAC,QAAD;EACE,eAAY;EACZ,OAAO,GAAO;EACd,eAAa;EACb,WAAW,EACT,oEACA,wEACA,EAAe,IACf,EACD;EACD,OAAO;GACL,iBAAiB,GAAO,UAAU;GAClC,OAAO,GAAO,aAAa;GAC5B;YAEA,IACI,EAAkB,EAAM,OAAO,KAAY,IAC3C,KAAY;EACZ,CAAA"}

package/dist/components/features/mcp-page/custom-server-editor.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/custom-toast-handlers.cjs`),i=require(`../../shared/modals/modal-backdrop.cjs`),a=require(`../../shared/modals/modal-close-button.cjs`),o=require(`../../../utils/retrieve-axios-error-message.cjs`),s=require(`../../shared/modals/confirmation-modal.cjs`),c=require(`../../../hooks/mutation/use-delete-mcp-server.cjs`),l=require(`../../../hooks/mutation/use-add-mcp-server.cjs`),u=require(`../settings/mcp-settings/mcp-server-form.cjs`),d=require(`../../../hooks/mutation/use-update-mcp-server.cjs`);let f=require(`react`);f=e.__toESM(f,1);let p=require(`react/jsx-runtime`);function m({server:e,existingServers:m,onClose:h}){let{t:g}=t.useTranslation(`openhands`),{mutate:_,isPending:v}=l.useAddMcpServer(),{mutate:y,isPending:b}=d.useUpdateMcpServer(),{mutate:x,isPending:S}=c.useDeleteMcpServer(),[C,w]=f.default.useState(!1),T=!!e.id,E=v||b||S,D=E||C,O=e=>{r.displayErrorToast(o.retrieveAxiosErrorMessage(e)||g(n.I18nKey.ERROR$GENERIC))};return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(i.ModalBackdrop,{onClose:D?void 0:h,closeOnEscape:!D,"aria-label":g(T?n.I18nKey.MCP$EDIT_CUSTOM_TITLE:n.I18nKey.MCP$ADD_CUSTOM_TITLE),children:(0,p.jsxs)(`div`,{"data-testid":`mcp-custom-editor`,className:`relative bg-base-secondary p-6 rounded-xl border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[90vh] overflow-y-auto custom-scrollbar`,children:[(0,p.jsx)(a.ModalCloseButton,{onClose:h,testId:`mcp-custom-editor-close`,disabled:D}),(0,p.jsx)(`h2`,{className:`mb-4 pr-6 text-lg font-semibold`,children:g(T?n.I18nKey.MCP$EDIT_CUSTOM_TITLE:n.I18nKey.MCP$ADD_CUSTOM_TITLE)}),(0,p.jsx)(u.MCPServerForm,{mode:T?`edit`:`add`,server:T?e:void 0,existingServers:m,onSubmit:t=>{T?y({serverId:e.id,server:t},{onSuccess:h,onError:O}):_(t,{onSuccess:h,onError:O})},onCancel:h,onDelete:T?()=>w(!0):void 0,isActionDisabled:E})]})}),C?(0,p.jsx)(s.ConfirmationModal,{text:g(n.I18nKey.SETTINGS$MCP_CONFIRM_DELETE),onCancel:()=>w(!1),onConfirm:()=>{x(e,{onSuccess:()=>{r.displaySuccessToast(g(n.I18nKey.MCP$REMOVE_SUCCESS)),w(!1),h()},onError:e=>{O(e),w(!1)}})},isConfirming:S}):null]})}exports.CustomServerEditor=m;
+const e=require(`../../../_virtual/_rolldown/runtime.cjs`),t=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),n=require(`../../../i18n/declaration.cjs`),r=require(`../../../utils/custom-toast-handlers.cjs`),i=require(`../../shared/modals/modal-backdrop.cjs`),a=require(`../../shared/modals/modal-close-button.cjs`),o=require(`../../../utils/retrieve-axios-error-message.cjs`),s=require(`../../shared/modals/confirmation-modal.cjs`),c=require(`../../../hooks/mutation/use-delete-mcp-server.cjs`),l=require(`../../../hooks/mutation/use-add-mcp-server.cjs`),u=require(`../../../hooks/mutation/use-test-mcp-server.cjs`),d=require(`../settings/mcp-settings/mcp-server-form.cjs`),f=require(`../../../hooks/mutation/use-update-mcp-server.cjs`);let p=require(`react`);p=e.__toESM(p,1);let m=require(`react/jsx-runtime`);function h({server:e,existingServers:h,onClose:g}){let{t:_}=t.useTranslation(`openhands`),{mutate:v,isPending:y}=l.useAddMcpServer(),{mutate:b,isPending:x}=f.useUpdateMcpServer(),{mutate:S,isPending:C}=c.useDeleteMcpServer(),{mutate:w,isPending:T,data:E,reset:D}=u.useTestMcpServer(),[O,k]=p.default.useState(!1),A=!!e.id,j=y||x||C,M=j||T||O,N=e=>{switch(e.error_kind){case`timeout`:return _(n.I18nKey.MCP$TEST_ERROR_TIMEOUT);case`connection`:return _(n.I18nKey.MCP$TEST_ERROR_CONNECTION);default:return _(n.I18nKey.MCP$TEST_ERROR_UNKNOWN,{error:e.error})}},P=p.default.useMemo(()=>E?E.ok?{ok:!0,text:_(n.I18nKey.MCP$TEST_SUCCESS,{count:E.tools.length})}:{ok:!1,text:N(E)}:null,[E,_]),F=e=>{r.displayErrorToast(o.retrieveAxiosErrorMessage(e)||_(n.I18nKey.ERROR$GENERIC))};return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(i.ModalBackdrop,{onClose:M?void 0:g,closeOnEscape:!M,"aria-label":_(A?n.I18nKey.MCP$EDIT_CUSTOM_TITLE:n.I18nKey.MCP$ADD_CUSTOM_TITLE),children:(0,m.jsxs)(`div`,{"data-testid":`mcp-custom-editor`,className:`relative bg-base-secondary p-6 rounded-xl border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[90vh] overflow-y-auto custom-scrollbar`,children:[(0,m.jsx)(a.ModalCloseButton,{onClose:g,testId:`mcp-custom-editor-close`,disabled:M}),(0,m.jsx)(`h2`,{className:`mb-4 pr-6 text-lg font-semibold`,children:_(A?n.I18nKey.MCP$EDIT_CUSTOM_TITLE:n.I18nKey.MCP$ADD_CUSTOM_TITLE)}),(0,m.jsx)(d.MCPServerForm,{mode:A?`edit`:`add`,server:A?e:void 0,existingServers:h,onSubmit:t=>{D(),w(t,{onSuccess:n=>{n.ok&&(A?b({serverId:e.id,server:t},{onSuccess:g,onError:F}):v(t,{onSuccess:g,onError:F}))},onError:F})},onCancel:g,onDelete:A?()=>k(!0):void 0,isActionDisabled:j,onTest:e=>{w(e)},isTestPending:T,testMessage:P})]})}),O?(0,m.jsx)(s.ConfirmationModal,{text:_(n.I18nKey.SETTINGS$MCP_CONFIRM_DELETE),onCancel:()=>k(!1),onConfirm:()=>{S(e,{onSuccess:()=>{r.displaySuccessToast(_(n.I18nKey.MCP$REMOVE_SUCCESS)),k(!1),g()},onError:e=>{F(e),k(!1)}})},isConfirming:C}):null]})}exports.CustomServerEditor=h;
 //# sourceMappingURL=custom-server-editor.cjs.map

package/dist/components/features/mcp-page/custom-server-editor.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"custom-server-editor.cjs","names":[],"sources":["../../../../src/components/features/mcp-page/custom-server-editor.tsx"],"sourcesContent":["import React from \"react\";\nimport { AxiosError } from \"axios\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport { MCPServerForm } from \"#/components/features/settings/mcp-settings/mcp-server-form\";\nimport { useAddMcpServer } from \"#/hooks/mutation/use-add-mcp-server\";\nimport { useUpdateMcpServer } from \"#/hooks/mutation/use-update-mcp-server\";\nimport { useDeleteMcpServer } from \"#/hooks/mutation/use-delete-mcp-server\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport {\n displayErrorToast,\n displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\n\ninterface CustomServerEditorProps {\n server: MCPServerConfig;\n existingServers: MCPServerConfig[];\n onClose: () => void;\n}\n\n/*\n Modal wrapper around `MCPServerForm` so users can hand-author\n * arbitrary stdio / SSE / SHTTP entries without reaching for raw JSON.\n * An empty `server.id` means \"Add new\".\n */\nexport function CustomServerEditor({\n server,\n existingServers,\n onClose,\n}: CustomServerEditorProps) {\n const { t } = useTranslation(\"openhands\");\n const { mutate: addMcpServer, isPending: isAdding } = useAddMcpServer();\n const { mutate: updateMcpServer, isPending: isUpdating } =\n useUpdateMcpServer();\n const { mutate: deleteMcpServer, isPending: isDeleting } =\n useDeleteMcpServer();\n const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);\n\n const isEditing = !!server.id;\n const isPending = isAdding \|\| isUpdating \|\| isDeleting;\n const isDismissBlocked = isPending \|\| showDeleteConfirm;\n\n // Shared error handler so both add and update surface backend errors\n // as a toast instead of failing silently — previously these calls\n // had no `onError` and the modal closed even on a 4xx/5xx, leaving\n // the user to discover the failure on the next page load.\n const handleError = (err: unknown) => {\n const message = retrieveAxiosErrorMessage(err as AxiosError);\n displayErrorToast(message \|\| t(I18nKey.ERROR$GENERIC));\n };\n\n const handleSubmit = (payload: MCPServerConfig) => {\n if (isEditing) {\n updateMcpServer(\n { serverId: server.id, server: payload },\n { onSuccess: onClose, onError: handleError },\n );\n } else {\n addMcpServer(payload, { onSuccess: onClose, onError: handleError });\n }\n };\n\n const handleConfirmDelete = () => {\n deleteMcpServer(server, {\n onSuccess: () => {\n displaySuccessToast(t(I18nKey.MCP$REMOVE_SUCCESS));\n setShowDeleteConfirm(false);\n onClose();\n },\n onError: (err) => {\n handleError(err);\n setShowDeleteConfirm(false);\n },\n });\n };\n\n return (\n <>\n <ModalBackdrop\n // Block backdrop-click / Escape from dismissing the modal while\n // a mutation is in flight — closing mid-request would orphan\n // the request and leave the user with no error feedback.\n onClose={isDismissBlocked ? undefined : onClose}\n closeOnEscape={!isDismissBlocked}\n aria-label={\n isEditing\n ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)\n : t(I18nKey.MCP$ADD_CUSTOM_TITLE)\n }\n >\n <div\n data-testid=\"mcp-custom-editor\"\n className=\"relative bg-base-secondary p-6 rounded-xl border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[90vh] overflow-y-auto custom-scrollbar\"\n >\n <ModalCloseButton\n onClose={onClose}\n testId=\"mcp-custom-editor-close\"\n disabled={isDismissBlocked}\n />\n <h2 className=\"mb-4 pr-6 text-lg font-semibold\">\n {isEditing\n ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)\n : t(I18nKey.MCP$ADD_CUSTOM_TITLE)}\n </h2>\n <MCPServerForm\n mode={isEditing ? \"edit\" : \"add\"}\n server={isEditing ? server : undefined}\n existingServers={existingServers}\n onSubmit={handleSubmit}\n onCancel={onClose}\n onDelete={isEditing ? () => setShowDeleteConfirm(true) : undefined}\n isActionDisabled={isPending}\n />\n </div>\n </ModalBackdrop>\n\n {showDeleteConfirm ? (\n <ConfirmationModal\n text={t(I18nKey.SETTINGS$MCP_CONFIRM_DELETE)}\n onCancel={() => setShowDeleteConfirm(false)}\n onConfirm={handleConfirmDelete}\n isConfirming={isDeleting}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"~~wwBA6BA~~,SAAgB,EAAmB,CACjC,SACA,kBACA,WAC0B,CAC1B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,OAAQ,EAAc,UAAW,GAAa,EAAA,iBAAiB,CACjE,CAAE,OAAQ,EAAiB,UAAW,GAC1C,EAAA,oBAAoB,CAChB,CAAE,OAAQ,EAAiB,UAAW,GAC1C,EAAA,oBAAoB,CAChB,CAAC,EAAmB,GAAwB,EAAA,QAAM,SAAS,GAAM,CAEjE,EAAY,CAAC,CAAC,EAAO,GACrB,EAAY,GAAY,GAAc,EACtC,EAAmB,GAAa,~~EAMhC~~,EAAe,GAAiB,CAEpC,EAAA,kBADgB,EAAA,0BAA0B,EACxB,EAAW,EAAE,EAAA,QAAQ,cAAc,CAAC,~~EA4BxD~~,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAIE,QAAS,EAAmB,IAAA,GAAY,EACxC,cAAe,CAAC,EAChB,aAEM,EADJ,EACM,EAAA,QAAQ,sBACR,EAAA,QAAQ,qBAAqB,WAGrC,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,oBACZ,UAAU,2JAFZ,EAIE,EAAA,EAAA,KAAC,EAAA,iBAAD,CACW,UACT,OAAO,0BACP,SAAU,EACV,CAAA,EACF,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,2CAER,EADH,EACK,EAAA,QAAQ,sBACR,EAAA,QAAQ,qBAAqB,CAChC,CAAA,EACL,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,KAAM,EAAY,OAAS,MAC3B,OAAQ,EAAY,EAAS,IAAA,GACZ,kBACjB,~~SAzDY~~,GAA6B,~~CAC7C~~,EACF,EACE,CAAE,SAAU,EAAO,GAAI,OAAQ,EAAS,CACxC,CAAE,UAAW,EAAS,QAAS,EAAa,CAC7C,CAED,EAAa,EAAS,CAAE,UAAW,EAAS,QAAS,EAAa,CAAC,~~EAmD7D~~,SAAU,EACV,SAAU,MAAkB,EAAqB,GAAK,CAAG,IAAA,GACzD,iBAAkB,EAClB,CAAA,CACE,GACQ,CAAA,CAEf,GACC,EAAA,EAAA,KAAC,EAAA,kBAAD,CACE,KAAM,EAAE,EAAA,QAAQ,4BAA4B,CAC5C,aAAgB,EAAqB,GAAM,CAC3C,~~cA1D0B~~,CAChC,EAAgB,EAAQ,CACtB,cAAiB,CACf,EAAA,oBAAoB,EAAE,EAAA,QAAQ,mBAAmB,CAAC,CAClD,EAAqB,GAAM,CAC3B,GAAS,EAEX,QAAU,GAAQ,CAChB,EAAY,EAAI,CAChB,EAAqB,GAAM,EAE9B,CAAC,~~EAgDI~~,aAAc,EACd,CAAA,CACA,KACH,CAAA,CAAA"}
1	+ {"version":3,"file":"custom-server-editor.cjs","names":[],"sources":["../../../../src/components/features/mcp-page/custom-server-editor.tsx"],"sourcesContent":["import React from \"react\";\nimport { AxiosError } from \"axios\";\nimport { useTranslation } from \"react-i18next\";\nimport type { MCPTestFailure } from \"@openhands/typescript-client\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\nimport {\n MCPServerForm,\n type TestMessage,\n} from \"#/components/features/settings/mcp-settings/mcp-server-form\";\nimport { useAddMcpServer } from \"#/hooks/mutation/use-add-mcp-server\";\nimport { useUpdateMcpServer } from \"#/hooks/mutation/use-update-mcp-server\";\nimport { useDeleteMcpServer } from \"#/hooks/mutation/use-delete-mcp-server\";\nimport { useTestMcpServer } from \"#/hooks/mutation/use-test-mcp-server\";\nimport { MCPServerConfig } from \"#/types/mcp-server\";\nimport {\n displayErrorToast,\n displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\n\ninterface CustomServerEditorProps {\n server: MCPServerConfig;\n existingServers: MCPServerConfig[];\n onClose: () => void;\n}\n\n/*\n Modal wrapper around `MCPServerForm` so users can hand-author\n * arbitrary stdio / SSE / SHTTP entries without reaching for raw JSON.\n * An empty `server.id` means \"Add new\".\n */\nexport function CustomServerEditor({\n server,\n existingServers,\n onClose,\n}: CustomServerEditorProps) {\n const { t } = useTranslation(\"openhands\");\n const { mutate: addMcpServer, isPending: isAdding } = useAddMcpServer();\n const { mutate: updateMcpServer, isPending: isUpdating } =\n useUpdateMcpServer();\n const { mutate: deleteMcpServer, isPending: isDeleting } =\n useDeleteMcpServer();\n const {\n mutate: testServer,\n isPending: isTesting,\n data: testResult,\n reset: resetTest,\n } = useTestMcpServer();\n const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);\n\n const isEditing = !!server.id;\n const isPending = isAdding \|\| isUpdating \|\| isDeleting;\n const isDismissBlocked = isPending \|\| isTesting \|\| showDeleteConfirm;\n\n const makeTestErrorMessage = (failure: MCPTestFailure): string => {\n switch (failure.error_kind) {\n case \"timeout\":\n return t(I18nKey.MCP$TEST_ERROR_TIMEOUT);\n case \"connection\":\n return t(I18nKey.MCP$TEST_ERROR_CONNECTION);\n default:\n return t(I18nKey.MCP$TEST_ERROR_UNKNOWN, { error: failure.error });\n }\n };\n\n const testMessage: TestMessage \| null = React.useMemo(() => {\n if (!testResult) return null;\n if (testResult.ok) {\n return {\n ok: true,\n text: t(I18nKey.MCP$TEST_SUCCESS, { count: testResult.tools.length }),\n };\n }\n return { ok: false, text: makeTestErrorMessage(testResult) };\n }, [testResult, t]);\n\n // Shared error handler so both add and update surface backend errors\n // as a toast instead of failing silently — previously these calls\n // had no `onError` and the modal closed even on a 4xx/5xx, leaving\n // the user to discover the failure on the next page load.\n const handleError = (err: unknown) => {\n const message = retrieveAxiosErrorMessage(err as AxiosError);\n displayErrorToast(message \|\| t(I18nKey.ERROR$GENERIC));\n };\n\n const handleSubmit = (payload: MCPServerConfig) => {\n resetTest();\n testServer(payload, {\n onSuccess: (result) => {\n if (!result.ok) {\n // Test failed — modal stays open, error shown via testMessage.\n return;\n }\n if (isEditing) {\n updateMcpServer(\n { serverId: server.id, server: payload },\n { onSuccess: onClose, onError: handleError },\n );\n } else {\n addMcpServer(payload, { onSuccess: onClose, onError: handleError });\n }\n },\n onError: handleError,\n });\n };\n\n const handleTestClick = (payload: MCPServerConfig) => {\n testServer(payload);\n };\n\n const handleConfirmDelete = () => {\n deleteMcpServer(server, {\n onSuccess: () => {\n displaySuccessToast(t(I18nKey.MCP$REMOVE_SUCCESS));\n setShowDeleteConfirm(false);\n onClose();\n },\n onError: (err) => {\n handleError(err);\n setShowDeleteConfirm(false);\n },\n });\n };\n\n return (\n <>\n <ModalBackdrop\n // Block backdrop-click / Escape from dismissing the modal while\n // a mutation is in flight — closing mid-request would orphan\n // the request and leave the user with no error feedback.\n onClose={isDismissBlocked ? undefined : onClose}\n closeOnEscape={!isDismissBlocked}\n aria-label={\n isEditing\n ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)\n : t(I18nKey.MCP$ADD_CUSTOM_TITLE)\n }\n >\n <div\n data-testid=\"mcp-custom-editor\"\n className=\"relative bg-base-secondary p-6 rounded-xl border border-[var(--oh-border)] w-[520px] max-w-[90vw] max-h-[90vh] overflow-y-auto custom-scrollbar\"\n >\n <ModalCloseButton\n onClose={onClose}\n testId=\"mcp-custom-editor-close\"\n disabled={isDismissBlocked}\n />\n <h2 className=\"mb-4 pr-6 text-lg font-semibold\">\n {isEditing\n ? t(I18nKey.MCP$EDIT_CUSTOM_TITLE)\n : t(I18nKey.MCP$ADD_CUSTOM_TITLE)}\n </h2>\n <MCPServerForm\n mode={isEditing ? \"edit\" : \"add\"}\n server={isEditing ? server : undefined}\n existingServers={existingServers}\n onSubmit={handleSubmit}\n onCancel={onClose}\n onDelete={isEditing ? () => setShowDeleteConfirm(true) : undefined}\n isActionDisabled={isPending}\n onTest={handleTestClick}\n isTestPending={isTesting}\n testMessage={testMessage}\n />\n </div>\n </ModalBackdrop>\n\n {showDeleteConfirm ? (\n <ConfirmationModal\n text={t(I18nKey.SETTINGS$MCP_CONFIRM_DELETE)}\n onCancel={() => setShowDeleteConfirm(false)}\n onConfirm={handleConfirmDelete}\n isConfirming={isDeleting}\n />\n ) : null}\n </>\n );\n}\n"],"mappings":"q0BAkCA,SAAgB,EAAmB,CACjC,SACA,kBACA,WAC0B,CAC1B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,OAAQ,EAAc,UAAW,GAAa,EAAA,iBAAiB,CACjE,CAAE,OAAQ,EAAiB,UAAW,GAC1C,EAAA,oBAAoB,CAChB,CAAE,OAAQ,EAAiB,UAAW,GAC1C,EAAA,oBAAoB,CAChB,CACJ,OAAQ,EACR,UAAW,EACX,KAAM,EACN,MAAO,GACL,EAAA,kBAAkB,CAChB,CAAC,EAAmB,GAAwB,EAAA,QAAM,SAAS,GAAM,CAEjE,EAAY,CAAC,CAAC,EAAO,GACrB,EAAY,GAAY,GAAc,EACtC,EAAmB,GAAa,GAAa,EAE7C,EAAwB,GAAoC,CAChE,OAAQ,EAAQ,WAAhB,CACE,IAAK,UACH,OAAO,EAAE,EAAA,QAAQ,uBAAuB,CAC1C,IAAK,aACH,OAAO,EAAE,EAAA,QAAQ,0BAA0B,CAC7C,QACE,OAAO,EAAE,EAAA,QAAQ,uBAAwB,CAAE,MAAO,EAAQ,MAAO,CAAC,GAIlE,EAAkC,EAAA,QAAM,YACvC,EACD,EAAW,GACN,CACL,GAAI,GACJ,KAAM,EAAE,EAAA,QAAQ,iBAAkB,CAAE,MAAO,EAAW,MAAM,OAAQ,CAAC,CACtE,CAEI,CAAE,GAAI,GAAO,KAAM,EAAqB,EAAW,CAAE,CAPpC,KAQvB,CAAC,EAAY,EAAE,CAAC,CAMb,EAAe,GAAiB,CAEpC,EAAA,kBADgB,EAAA,0BAA0B,EACxB,EAAW,EAAE,EAAA,QAAQ,cAAc,CAAC,EA0CxD,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAIE,QAAS,EAAmB,IAAA,GAAY,EACxC,cAAe,CAAC,EAChB,aAEM,EADJ,EACM,EAAA,QAAQ,sBACR,EAAA,QAAQ,qBAAqB,WAGrC,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,oBACZ,UAAU,2JAFZ,EAIE,EAAA,EAAA,KAAC,EAAA,iBAAD,CACW,UACT,OAAO,0BACP,SAAU,EACV,CAAA,EACF,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,2CAER,EADH,EACK,EAAA,QAAQ,sBACR,EAAA,QAAQ,qBAAqB,CAChC,CAAA,EACL,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,KAAM,EAAY,OAAS,MAC3B,OAAQ,EAAY,EAAS,IAAA,GACZ,kBACjB,SAvEY,GAA6B,CACjD,GAAW,CACX,EAAW,EAAS,CAClB,UAAY,GAAW,CAChB,EAAO,KAIR,EACF,EACE,CAAE,SAAU,EAAO,GAAI,OAAQ,EAAS,CACxC,CAAE,UAAW,EAAS,QAAS,EAAa,CAC7C,CAED,EAAa,EAAS,CAAE,UAAW,EAAS,QAAS,EAAa,CAAC,GAGvE,QAAS,EACV,CAAC,EAsDM,SAAU,EACV,SAAU,MAAkB,EAAqB,GAAK,CAAG,IAAA,GACzD,iBAAkB,EAClB,OAtDe,GAA6B,CACpD,EAAW,EAAQ,EAsDX,cAAe,EACF,cACb,CAAA,CACE,GACQ,CAAA,CAEf,GACC,EAAA,EAAA,KAAC,EAAA,kBAAD,CACE,KAAM,EAAE,EAAA,QAAQ,4BAA4B,CAC5C,aAAgB,EAAqB,GAAM,CAC3C,cA7D0B,CAChC,EAAgB,EAAQ,CACtB,cAAiB,CACf,EAAA,oBAAoB,EAAE,EAAA,QAAQ,mBAAmB,CAAC,CAClD,EAAqB,GAAM,CAC3B,GAAS,EAEX,QAAU,GAAQ,CAChB,EAAY,EAAI,CAChB,EAAqB,GAAM,EAE9B,CAAC,EAmDI,aAAc,EACd,CAAA,CACA,KACH,CAAA,CAAA"}