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

@openhands/agent-canvas 1.14.0 → 1.15.0

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

Files changed (1590) hide show

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, { useLayoutEffect, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\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 { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport PillIcon from \"#/icons/pill.svg?react\";\nimport PillFillIcon from \"#/icons/pill-fill.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 { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\nimport { ArchivedDisabledTooltip } from \"../../context-menu/archived-disabled-tooltip\";\nimport { cn } from \"#/utils/utils\";\nimport {\n dropdownInstantColorClassName,\n dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface ConversationTabsContextMenuProps {\n isOpen: boolean;\n onClose: () => void;\n ignoreOutsideClickRef?: React.RefObject<HTMLElement \| null>;\n /** Portal anchor so the menu is not clipped by drawer overflow. */\n anchorRef?: React.RefObject<HTMLElement \| null>;\n}\n\nexport function ConversationTabsContextMenu({\n isOpen,\n onClose,\n ignoreOutsideClickRef,\n anchorRef,\n}: ConversationTabsContextMenuProps) {\n const ref = useClickOutsideElement<HTMLUListElement>(\n onClose,\n ignoreOutsideClickRef,\n );\n const [portalStyle, setPortalStyle] = useState<React.CSSProperties>();\n\n useLayoutEffect(() => {\n if (!isOpen \|\| !anchorRef?.current) {\n setPortalStyle(undefined);\n return undefined;\n }\n\n const updatePosition = () => {\n const rect = anchorRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n const gap = 8;\n setPortalStyle({\n position: \"fixed\",\n zIndex: 9999,\n top: rect.bottom + gap,\n left: rect.left,\n });\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }, [isOpen, anchorRef]);\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 const isArchivedConversation = useIsArchivedConversation();\n\n const tabConfig = [\n {\n tab: \"planner\",\n icon: ListTodo,\n i18nKey: I18nKey.COMMON$PLANNER,\n },\n { tab: \"files\", icon: DocumentIcon, i18nKey: I18nKey.COMMON$FILES },\n {\n tab: \"terminal\",\n icon: SquareChevronRight,\n i18nKey: I18nKey.COMMON$TERMINAL,\n },\n { tab: \"browser\", icon: Globe, i18nKey: I18nKey.COMMON$BROWSER },\n { tab: \"usage\", icon: Gauge, i18nKey: I18nKey.COMMON$USAGE },\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 !== \"planner\" \|\| backend.kind === \"cloud\",\n );\n\n const handleOpenTab = (tab: string) => {\n if (isArchivedConversation) {\n return;\n }\n navigateToTab(tab as ConversationTab);\n onClose();\n };\n\n const handlePinToggle = (tab: string, e: React.MouseEvent) => {\n if (isArchivedConversation) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\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 if (!isOpen) return null;\n\n const isPortaled = Boolean(anchorRef?.current && portalStyle);\n\n const menu = (\n <ContextMenu\n ref={ref}\n theme={isPortaled ? \"popover\" : \"default\"}\n position={isPortaled ? \"none\" : \"bottom\"}\n alignment={isPortaled ? \"none\" : \"left\"}\n spacing={isPortaled ? \"none\" : \"default\"}\n className={cn(\"z-[9999] w-fit\", isPortaled ? \"mt-0\" : \"mt-2\")}\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 <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n <div\n className={cn(\n \"group flex h-[30px] w-full min-w-0 items-stretch rounded\",\n !isArchivedConversation &&\n \"hover:bg-[var(--oh-interactive-hover)]\",\n isArchivedConversation && \"opacity-50\",\n )}\n >\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-open-${tab}`}\n disabled={isArchivedConversation}\n className={cn(\n \"flex min-w-0 flex-1 items-center gap-2 rounded-l p-2 text-start text-white\",\n dropdownInstantColorClassName,\n isArchivedConversation\n ? \"cursor-not-allowed\"\n : \"cursor-pointer\",\n )}\n onClick={() => handleOpenTab(tab)}\n >\n <span\n className={dropdownMenuRowIconWrapperClassName}\n aria-hidden\n >\n <Icon className=\"h-4 w-4\" />\n </span>\n <span className=\"text-sm\">{t(i18nKey)}</span>\n </button>\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-pin-${tab}`}\n disabled={isArchivedConversation}\n className={cn(\n \"flex shrink-0 items-center justify-center rounded-r px-2 text-white\",\n dropdownInstantColorClassName,\n isArchivedConversation\n ? \"cursor-not-allowed\"\n : \"cursor-pointer hover:bg-white/10\",\n )}\n aria-pressed={pinned}\n aria-label={\n pinned\n ? t(I18nKey.CONVERSATION$UNPIN_TAB)\n : t(I18nKey.CONVERSATION$PIN_TAB)\n }\n onClick={(e) => handlePinToggle(tab, e)}\n >\n {pinned ? (\n <span\n className={cn(\n \"-mr-[5px] ml-auto\",\n dropdownMenuRowIconWrapperClassName,\n )}\n aria-hidden\n >\n <PillFillIcon className=\"h-7 w-7\" />\n </span>\n ) : (\n <span\n className={cn(\n \"ml-auto\",\n dropdownMenuRowIconWrapperClassName,\n )}\n aria-hidden\n >\n <PillIcon className=\"h-4.5 w-4.5\" />\n </span>\n )}\n </button>\n </div>\n </ArchivedDisabledTooltip>\n </li>\n );\n })}\n </ContextMenu>\n );\n\n if (isPortaled && portalStyle && typeof document !== \"undefined\") {\n return ReactDOM.createPortal(\n <div style={portalStyle}>{menu}</div>,\n document.body,\n );\n }\n\n return menu;\n}\n"],"mappings":"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"}
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, { useLayoutEffect, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\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 { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport { LuFileDiff } from \"react-icons/lu\";\nimport DocumentIcon from \"#/icons/document.svg?react\";\nimport PillIcon from \"#/icons/pill.svg?react\";\nimport PillFillIcon from \"#/icons/pill-fill.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 { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\nimport { ArchivedDisabledTooltip } from \"../../context-menu/archived-disabled-tooltip\";\nimport { cn } from \"#/utils/utils\";\nimport {\n dropdownInstantColorClassName,\n dropdownMenuRowIconWrapperClassName,\n} from \"#/utils/dropdown-classes\";\n\ninterface ConversationTabsContextMenuProps {\n isOpen: boolean;\n onClose: () => void;\n ignoreOutsideClickRef?: React.RefObject<HTMLElement \| null>;\n /** Portal anchor so the menu is not clipped by drawer overflow. */\n anchorRef?: React.RefObject<HTMLElement \| null>;\n}\n\nexport function ConversationTabsContextMenu({\n isOpen,\n onClose,\n ignoreOutsideClickRef,\n anchorRef,\n}: ConversationTabsContextMenuProps) {\n const ref = useClickOutsideElement<HTMLUListElement>(\n onClose,\n ignoreOutsideClickRef,\n );\n const [portalStyle, setPortalStyle] = useState<React.CSSProperties>();\n\n useLayoutEffect(() => {\n if (!isOpen \|\| !anchorRef?.current) {\n setPortalStyle(undefined);\n return undefined;\n }\n\n const updatePosition = () => {\n const rect = anchorRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n const gap = 8;\n setPortalStyle({\n position: \"fixed\",\n zIndex: 9999,\n top: rect.bottom + gap,\n left: rect.left,\n });\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }, [isOpen, anchorRef]);\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 const isArchivedConversation = useIsArchivedConversation();\n\n const tabConfig = [\n {\n tab: \"planner\",\n icon: ListTodo,\n i18nKey: I18nKey.COMMON$PLANNER,\n },\n { tab: \"files\", icon: DocumentIcon, i18nKey: I18nKey.COMMON$FILES },\n {\n tab: \"commits\",\n icon: LuFileDiff,\n i18nKey: I18nKey.DIFF_VIEWER$COMMITS,\n },\n {\n tab: \"terminal\",\n icon: SquareChevronRight,\n i18nKey: I18nKey.COMMON$TERMINAL,\n },\n { tab: \"browser\", icon: Globe, i18nKey: I18nKey.COMMON$BROWSER },\n { tab: \"usage\", icon: Gauge, i18nKey: I18nKey.COMMON$USAGE },\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 !== \"planner\" \|\| backend.kind === \"cloud\",\n );\n\n const handleOpenTab = (tab: string) => {\n if (isArchivedConversation) {\n return;\n }\n navigateToTab(tab as ConversationTab);\n onClose();\n };\n\n const handlePinToggle = (tab: string, e: React.MouseEvent) => {\n if (isArchivedConversation) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\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 if (!isOpen) return null;\n\n const isPortaled = Boolean(anchorRef?.current && portalStyle);\n\n const menu = (\n <ContextMenu\n ref={ref}\n theme={isPortaled ? \"popover\" : \"default\"}\n position={isPortaled ? \"none\" : \"bottom\"}\n alignment={isPortaled ? \"none\" : \"left\"}\n spacing={isPortaled ? \"none\" : \"default\"}\n className={cn(\"z-[9999] w-fit\", isPortaled ? \"mt-0\" : \"mt-2\")}\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 <ArchivedDisabledTooltip isDisabled={isArchivedConversation}>\n <div\n className={cn(\n \"group flex h-[30px] w-full min-w-0 items-stretch rounded\",\n !isArchivedConversation &&\n \"hover:bg-[var(--oh-interactive-hover)]\",\n isArchivedConversation && \"opacity-50\",\n )}\n >\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-open-${tab}`}\n disabled={isArchivedConversation}\n className={cn(\n \"flex min-w-0 flex-1 items-center gap-2 rounded-l p-2 text-start text-white\",\n dropdownInstantColorClassName,\n isArchivedConversation\n ? \"cursor-not-allowed\"\n : \"cursor-pointer\",\n )}\n onClick={() => handleOpenTab(tab)}\n >\n <span\n className={dropdownMenuRowIconWrapperClassName}\n aria-hidden\n >\n <Icon className=\"h-4 w-4\" />\n </span>\n <span className=\"text-sm\">{t(i18nKey)}</span>\n </button>\n <button\n type=\"button\"\n data-testid={`conversation-tabs-menu-pin-${tab}`}\n disabled={isArchivedConversation}\n className={cn(\n \"flex shrink-0 items-center justify-center rounded-r px-2 text-white\",\n dropdownInstantColorClassName,\n isArchivedConversation\n ? \"cursor-not-allowed\"\n : \"cursor-pointer hover:bg-white/10\",\n )}\n aria-pressed={pinned}\n aria-label={\n pinned\n ? t(I18nKey.CONVERSATION$UNPIN_TAB)\n : t(I18nKey.CONVERSATION$PIN_TAB)\n }\n onClick={(e) => handlePinToggle(tab, e)}\n >\n {pinned ? (\n <span\n className={cn(\n \"-mr-[5px] ml-auto\",\n dropdownMenuRowIconWrapperClassName,\n )}\n aria-hidden\n >\n <PillFillIcon className=\"h-7 w-7\" />\n </span>\n ) : (\n <span\n className={cn(\n \"ml-auto\",\n dropdownMenuRowIconWrapperClassName,\n )}\n aria-hidden\n >\n <PillIcon className=\"h-4.5 w-4.5\" />\n </span>\n )}\n </button>\n </div>\n </ArchivedDisabledTooltip>\n </li>\n );\n })}\n </ContextMenu>\n );\n\n if (isPortaled && portalStyle && typeof document !== \"undefined\") {\n return ReactDOM.createPortal(\n <div style={portalStyle}>{menu}</div>,\n document.body,\n );\n }\n\n return menu;\n}\n"],"mappings":"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"}

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("../../../../node_modules/lucide-react/dist/esm/icons/gauge.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/globe.cjs"),i=require("../../../../node_modules/lucide-react/dist/esm/icons/list-todo.cjs"),a=require("../../../../node_modules/lucide-react/dist/esm/icons/square-chevron-right.cjs"),o=require("../../../../types/agent-state.cjs"),s=require("../../../../utils/utils.cjs"),c=require("../../../../hooks/use-conversation-id.cjs"),l=require("../../../../utils/conversation-local-storage.cjs"),u=require("../../../../stores/conversation-store.cjs"),d=require("../../../../contexts/active-backend-context.cjs"),f=require("../../../../hooks/use-agent-state.cjs"),p=require("../../../../node_modules/framer-motion/dist/es/components/LayoutGroup/index.cjs"),m=require("../../../../ui/typography.cjs"),ee=require("../../../../hooks/use-select-conversation-tab.cjs"),h=require("../../../../icons/document.cjs"),g=require("../../../../hooks/use-handle-build-plan-click.cjs"),_=require("../../conversation-panel/ellipsis-button.cjs"),v=require("../../../../utils/mobile-top-bar-icon-button-classes.cjs"),y=require("../../chat/chat-action-tooltip.cjs"),b=require("../../../../icons/double-check.cjs"),x=require("./conversation-tab-nav.cjs"),S=require("./drawer-vscode-link.cjs"),te=require("../../../../hooks/use-task-list.cjs"),ne=require("./conversation-tabs-context-menu.cjs");let C=require("react"),w=require("react/jsx-runtime");function T({variant:T=`default`,isPanelResizing:E=!1}){let{conversationId:D}=c.useConversationId(),{setSelectedTab:O,planContent:k}=u.useConversationStore(),[A,j]=(0,C.useState)(!1),{state:M}=l.useConversationLocalStorageState(D),{hasTaskList:N}=te.useTaskList(),{backend:P}=d.useActiveBackend(),{handleBuildPlanClick:F}=g.useHandleBuildPlanClick(),{curAgentState:I}=f.useAgentState(),{selectTab:L,isTabActive:R,onTabChange:z,selectedTab:B,isRightPanelShown:V}=ee.useSelectConversationTab();(0,C.useEffect)(()=>{O(M.selectedTab)},[O,M.selectedTab]),(0,C.useEffect)(()=>{V&&(B||z(`files`))},[V,B,z]);let{t:H,i18n:U}=e.useTranslation(`openhands`),W=[{tabValue:`files`,isActive:R(`files`),icon:h.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:i.ListTodo,onClick:()=>L(`planner`),tooltipContent:H(t.I18nKey.COMMON$PLANNER),tooltipAriaLabel:H(t.I18nKey.COMMON$PLANNER),label:H(t.I18nKey.COMMON$PLANNER)},{tabValue:`terminal`,isActive:R(`terminal`),icon:a.SquareChevronRight,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:r.Globe,onClick:()=>L(`browser`),tooltipContent:H(t.I18nKey.COMMON$BROWSER),tooltipAriaLabel:H(t.I18nKey.COMMON$BROWSER),label:H(t.I18nKey.COMMON$BROWSER)},{tabValue:`usage`,isActive:R(`usage`),icon:n.Gauge,onClick:()=>L(`usage`),tooltipContent:H(t.I18nKey.COMMON$USAGE),tooltipAriaLabel:H(t.I18nKey.COMMON$USAGE),label:H(t.I18nKey.COMMON$USAGE)}];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===`planner`&&P.kind!==`cloud`?!1:M.unpinnedTabs.includes(e.tabValue)?B===e.tabValue:!0),K=M.unpinnedTabs.join(`,`),q=I===o.AgentState.RUNNING||I===o.AgentState.LOADING||!k,J=(0,C.useRef)(null),Y=(0,C.useRef)(null),X=(0,C.useRef)(null),Z=(0,C.useRef)(null),Q=(0,C.useRef)(null),[re,$]=(0,C.useState)(G.length);(0,C.useLayoutEffect)(()=>{let e=J.current,t=Y.current,n=X.current,r=Z.current;if(!e||!t||!n||!r)return;let i=()=>{let i=t.querySelectorAll(`[data-tab-measure="true"]`),a=i.length,o=e.getBoundingClientRect().width;if(o===0){$(a);return}let s=Array.from(i).map(e=>e.getBoundingClientRect().width);if(s.length!==a||a===0){$(Math.max(0,a));return}let c=n.getBoundingClientRect().width,l=r.getBoundingClientRect().width,u=getComputedStyle(e).columnGap||getComputedStyle(e).gap,d=parseFloat(u)||6,f=0;for(let e=a;e>=0;--e){let t=c+l;for(let n=0;n<e;n+=1)t+=s[n]??0;if(e>0&&(t+=e*d),t<=o+.5){f=e;break}}$(e=>e===f?e:f)};if(i(),typeof ResizeObserver>`u`)return;let a=new ResizeObserver(i);return a.observe(e),()=>a.disconnect()},[K,G.length,N,P.kind,B,V,U.language]);let ie=Math.min(re,G.length);return(0,w.jsxs)(w.Fragment,{children:[(0,w.jsxs)(`div`,{className:s.cn(`relative w-full min-w-0`,T===`compact`?`flex h-full min-h-0 items-center py-0 pl-0 pr-1`:`min-h-10 p-1`),children:[(0,w.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:r,tooltipAriaLabel:i,label:a,className:o},c)=>(0,w.jsx)(y.ChatActionTooltip,{tooltip:r,ariaLabel:i,children:(0,w.jsx)(x.ConversationTabNav,{tabValue:e,icon:t,onClick:()=>{},isActive:n,label:a,className:s.cn(o,`shrink-0`),measureOnly:!0})},`measure-${e}-${c}`))}),(0,w.jsxs)(`div`,{ref:J,className:`flex w-full min-w-0 flex-nowrap items-center justify-start`,children:[(0,w.jsx)(`div`,{className:`flex min-w-0 flex-1 items-center justify-start overflow-hidden`,children:(0,w.jsxs)(`div`,{className:`flex w-fit max-w-full min-w-0 items-center gap-1.5`,children:[(0,w.jsx)(p.LayoutGroup,{id:`conversation-drawer-tabs`,children:(0,w.jsx)(`div`,{className:`flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5 overflow-x-hidden`,children:G.slice(0,ie).map(({tabValue:e,icon:t,onClick:n,isActive:r,tooltipContent:i,tooltipAriaLabel:a,label:o,className:c},l)=>(0,w.jsx)(y.ChatActionTooltip,{tooltip:i,ariaLabel:a,children:(0,w.jsx)(x.ConversationTabNav,{tabValue:e,icon:t,onClick:n,isActive:r,label:o,className:s.cn(c,`shrink-0`),suppressLayoutAnimation:E})},`${e}-${l}`))})}),(0,w.jsxs)(`div`,{ref:X,className:`relative shrink-0`,children:[(0,w.jsx)(_.EllipsisButton,{ref:Q,onClick:()=>j(!A),ariaLabel:H(t.I18nKey.COMMON$MORE_OPTIONS),iconClassName:T===`compact`?v.mobileTopBarIconClassName:void 0}),(0,w.jsx)(ne.ConversationTabsContextMenu,{isOpen:A,onClose:()=>j(!1),ignoreOutsideClickRef:Q,anchorRef:Q})]})]})}),(0,w.jsx)(`div`,{ref:Z,className:s.cn(`ml-auto shrink-0`,P.kind===`cloud`&&`pr-1`),children:P.kind===`cloud`&&(0,w.jsx)(S.DrawerVSCodeLink,{})})]})]}),R(`planner`)&&(0,w.jsx)(`div`,{className:s.cn(`flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1`),children:(0,w.jsx)(`button`,{type:`button`,onClick:F,disabled:q,className:s.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,w.jsxs)(m.Typography.Text,{className:`text-[11px] font-normal leading-5 text-black`,children:[H(t.I18nKey.COMMON$BUILD),` ⌘↩`]})})})]})}exports.ConversationTabs=T;
+require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../../i18n/declaration.cjs"),n=require("../../../../node_modules/lucide-react/dist/esm/icons/gauge.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/globe.cjs"),i=require("../../../../node_modules/lucide-react/dist/esm/icons/list-todo.cjs"),a=require("../../../../node_modules/lucide-react/dist/esm/icons/square-chevron-right.cjs"),o=require("../../../../types/agent-state.cjs"),s=require("../../../../utils/utils.cjs"),c=require("../../../../hooks/use-conversation-id.cjs"),l=require("../../../../utils/conversation-local-storage.cjs"),u=require("../../../../stores/conversation-store.cjs"),d=require("../../../../contexts/active-backend-context.cjs"),f=require("../../../../hooks/use-agent-state.cjs"),p=require("../../../../node_modules/framer-motion/dist/es/components/LayoutGroup/index.cjs"),m=require("../../../../ui/typography.cjs"),h=require("../../../../hooks/use-select-conversation-tab.cjs"),g=require("../../../../icons/document.cjs"),_=require("../../../../hooks/use-handle-build-plan-click.cjs"),v=require("../../../../node_modules/react-icons/lu/index.cjs"),y=require("../../conversation-panel/ellipsis-button.cjs"),b=require("../../chat/chat-action-tooltip.cjs"),x=require("../../../../utils/mobile-top-bar-icon-button-classes.cjs"),S=require("../../../../icons/double-check.cjs"),C=require("./conversation-tab-nav.cjs"),ee=require("./drawer-vscode-link.cjs"),te=require("../../../../hooks/use-task-list.cjs"),w=require("./conversation-tabs-context-menu.cjs");let T=require("react"),E=require("react/jsx-runtime");function D({variant:D=`default`,isPanelResizing:O=!1}){let{conversationId:k}=c.useConversationId(),{setSelectedTab:A,planContent:ne}=u.useConversationStore(),[j,M]=(0,T.useState)(!1),{state:N}=l.useConversationLocalStorageState(k),{hasTaskList:P}=te.useTaskList(),{backend:F}=d.useActiveBackend(),{handleBuildPlanClick:re}=_.useHandleBuildPlanClick(),{curAgentState:I}=f.useAgentState(),{selectTab:L,isTabActive:R,onTabChange:z,selectedTab:B,isRightPanelShown:V}=h.useSelectConversationTab();(0,T.useEffect)(()=>{A(N.selectedTab)},[A,N.selectedTab]),(0,T.useEffect)(()=>{V&&(B||z(`files`))},[V,B,z]);let{t:H,i18n:U}=e.useTranslation(`openhands`),W=[{tabValue:`files`,isActive:R(`files`),icon:g.default,onClick:()=>L(`files`),tooltipContent:H(t.I18nKey.COMMON$FILES),tooltipAriaLabel:H(t.I18nKey.COMMON$FILES),label:H(t.I18nKey.COMMON$FILES)},{tabValue:`commits`,isActive:R(`commits`),icon:v.LuFileDiff,onClick:()=>L(`commits`),tooltipContent:H(t.I18nKey.DIFF_VIEWER$COMMITS),tooltipAriaLabel:H(t.I18nKey.DIFF_VIEWER$COMMITS),label:H(t.I18nKey.DIFF_VIEWER$COMMITS)},{tabValue:`planner`,isActive:R(`planner`),icon:i.ListTodo,onClick:()=>L(`planner`),tooltipContent:H(t.I18nKey.COMMON$PLANNER),tooltipAriaLabel:H(t.I18nKey.COMMON$PLANNER),label:H(t.I18nKey.COMMON$PLANNER)},{tabValue:`terminal`,isActive:R(`terminal`),icon:a.SquareChevronRight,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:r.Globe,onClick:()=>L(`browser`),tooltipContent:H(t.I18nKey.COMMON$BROWSER),tooltipAriaLabel:H(t.I18nKey.COMMON$BROWSER),label:H(t.I18nKey.COMMON$BROWSER)},{tabValue:`usage`,isActive:R(`usage`),icon:n.Gauge,onClick:()=>L(`usage`),tooltipContent:H(t.I18nKey.COMMON$USAGE),tooltipAriaLabel:H(t.I18nKey.COMMON$USAGE),label:H(t.I18nKey.COMMON$USAGE)}];P&&W.splice(2,0,{tabValue:`tasklist`,isActive:R(`tasklist`),icon:S.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===`planner`&&F.kind!==`cloud`?!1:N.unpinnedTabs.includes(e.tabValue)?B===e.tabValue:!0),K=N.unpinnedTabs.join(`,`),q=I===o.AgentState.RUNNING||I===o.AgentState.LOADING||!ne,J=(0,T.useRef)(null),Y=(0,T.useRef)(null),X=(0,T.useRef)(null),Z=(0,T.useRef)(null),Q=(0,T.useRef)(null),[ie,$]=(0,T.useState)(G.length);(0,T.useLayoutEffect)(()=>{let e=J.current,t=Y.current,n=X.current,r=Z.current;if(!e||!t||!n||!r)return;let i=()=>{let i=t.querySelectorAll(`[data-tab-measure="true"]`),a=i.length,o=e.getBoundingClientRect().width;if(o===0){$(a);return}let s=Array.from(i).map(e=>e.getBoundingClientRect().width);if(s.length!==a||a===0){$(Math.max(0,a));return}let c=n.getBoundingClientRect().width,l=r.getBoundingClientRect().width,u=getComputedStyle(e).columnGap||getComputedStyle(e).gap,d=parseFloat(u)||6,f=0;for(let e=a;e>=0;--e){let t=c+l;for(let n=0;n<e;n+=1)t+=s[n]??0;if(e>0&&(t+=e*d),t<=o+.5){f=e;break}}$(e=>e===f?e:f)};if(i(),typeof ResizeObserver>`u`)return;let a=new ResizeObserver(i);return a.observe(e),()=>a.disconnect()},[K,G.length,P,F.kind,B,V,U.language]);let ae=Math.min(ie,G.length);return(0,E.jsxs)(E.Fragment,{children:[(0,E.jsxs)(`div`,{className:s.cn(`relative w-full min-w-0`,D===`compact`?`flex h-full min-h-0 items-center py-0 pl-0 pr-1`:`min-h-10 p-1`),children:[(0,E.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:r,tooltipAriaLabel:i,label:a,className:o},c)=>(0,E.jsx)(b.ChatActionTooltip,{tooltip:r,ariaLabel:i,children:(0,E.jsx)(C.ConversationTabNav,{tabValue:e,icon:t,onClick:()=>{},isActive:n,label:a,className:s.cn(o,`shrink-0`),measureOnly:!0})},`measure-${e}-${c}`))}),(0,E.jsxs)(`div`,{ref:J,className:`flex w-full min-w-0 flex-nowrap items-center justify-start`,children:[(0,E.jsx)(`div`,{className:`flex min-w-0 flex-1 items-center justify-start overflow-hidden`,children:(0,E.jsxs)(`div`,{className:`flex w-fit max-w-full min-w-0 items-center gap-1.5`,children:[(0,E.jsx)(p.LayoutGroup,{id:`conversation-drawer-tabs`,children:(0,E.jsx)(`div`,{className:`flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5 overflow-x-hidden`,children:G.slice(0,ae).map(({tabValue:e,icon:t,onClick:n,isActive:r,tooltipContent:i,tooltipAriaLabel:a,label:o,className:c},l)=>(0,E.jsx)(b.ChatActionTooltip,{tooltip:i,ariaLabel:a,children:(0,E.jsx)(C.ConversationTabNav,{tabValue:e,icon:t,onClick:n,isActive:r,label:o,className:s.cn(c,`shrink-0`),suppressLayoutAnimation:O})},`${e}-${l}`))})}),(0,E.jsxs)(`div`,{ref:X,className:`relative shrink-0`,children:[(0,E.jsx)(y.EllipsisButton,{ref:Q,onClick:()=>M(!j),ariaLabel:H(t.I18nKey.COMMON$MORE_OPTIONS),iconClassName:D===`compact`?x.mobileTopBarIconClassName:void 0}),(0,E.jsx)(w.ConversationTabsContextMenu,{isOpen:j,onClose:()=>M(!1),ignoreOutsideClickRef:Q,anchorRef:Q})]})]})}),(0,E.jsx)(`div`,{ref:Z,className:s.cn(`ml-auto shrink-0`,F.kind===`cloud`&&`pr-1`),children:F.kind===`cloud`&&(0,E.jsx)(ee.DrawerVSCodeLink,{})})]})]}),R(`planner`)&&(0,E.jsx)(`div`,{className:s.cn(`flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1`),children:(0,E.jsx)(`button`,{type:`button`,onClick:re,disabled:q,className:s.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,E.jsxs)(m.Typography.Text,{className:`text-[11px] font-normal leading-5 text-black`,children:[H(t.I18nKey.COMMON$BUILD),` ⌘↩`]})})})]})}exports.ConversationTabs=D;
 //# 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 { LayoutGroup } from \"framer-motion\";\nimport { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport DocumentIcon from \"#/icons/document.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 { DrawerVSCodeLink } from \"./drawer-vscode-link\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\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 isPanelResizing = false,\n}: {\n variant?: \"default\" \| \"compact\";\n /** True while the desktop drawer gripper is being dragged. /\n isPanelResizing?: boolean;\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: ListTodo,\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: \"terminal\",\n isActive: isTabActive(\"terminal\"),\n icon: SquareChevronRight,\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: Globe,\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 tabValue: \"usage\",\n isActive: isTabActive(\"usage\"),\n icon: Gauge,\n onClick: () => selectTab(\"usage\"),\n tooltipContent: t(I18nKey.COMMON$USAGE),\n tooltipAriaLabel: t(I18nKey.COMMON$USAGE),\n label: t(I18nKey.COMMON$USAGE),\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 Planner on local backends — the planning\n // agent isn't supported locally.\n const visibleTabs = tabs.filter((tab) => {\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 vscodeButtonRef = 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 const vscodeEl = vscodeButtonRef.current;\n if (!rowInner \|\| !measureRow \|\| !menuEl \|\| !vscodeEl) 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 vscodeWidth = vscodeEl.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 + vscodeWidth;\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 min-w-0 flex-1 items-center justify-start overflow-hidden\">\n <div className=\"flex w-fit max-w-full min-w-0 items-center gap-1.5\">\n <LayoutGroup id=\"conversation-drawer-tabs\">\n <div className=\"flex w-fit max-w-full min-w-0 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 suppressLayoutAnimation={isPanelResizing}\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n </LayoutGroup>\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\"\n ? mobileTopBarIconClassName\n : undefined\n }\n />\n <ConversationTabsContextMenu\n isOpen={isMenuOpen}\n onClose={() => setIsMenuOpen(false)}\n ignoreOutsideClickRef={anchorRef}\n anchorRef={anchorRef}\n />\n </div>\n </div>\n </div>\n {/* Keep the ref'd wrapper mounted on local backends too — the\n overflow measurement effect above bails if it's missing. /}\n <div\n ref={vscodeButtonRef}\n className={cn(\n \"ml-auto shrink-0\",\n backend.kind === \"cloud\" && \"pr-1\",\n )}\n >\n {backend.kind === \"cloud\" && <DrawerVSCodeLink />}\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 { LayoutGroup } from \"framer-motion\";\nimport { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport { LuFileDiff } from \"react-icons/lu\";\nimport DocumentIcon from \"#/icons/document.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 { DrawerVSCodeLink } from \"./drawer-vscode-link\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\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 isPanelResizing = false,\n}: {\n variant?: \"default\" \| \"compact\";\n /** True while the desktop drawer gripper is being dragged. /\n isPanelResizing?: boolean;\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: \"commits\",\n isActive: isTabActive(\"commits\"),\n icon: LuFileDiff,\n onClick: () => selectTab(\"commits\"),\n tooltipContent: t(I18nKey.DIFF_VIEWER$COMMITS),\n tooltipAriaLabel: t(I18nKey.DIFF_VIEWER$COMMITS),\n label: t(I18nKey.DIFF_VIEWER$COMMITS),\n },\n {\n tabValue: \"planner\",\n isActive: isTabActive(\"planner\"),\n icon: ListTodo,\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: \"terminal\",\n isActive: isTabActive(\"terminal\"),\n icon: SquareChevronRight,\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: Globe,\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 tabValue: \"usage\",\n isActive: isTabActive(\"usage\"),\n icon: Gauge,\n onClick: () => selectTab(\"usage\"),\n tooltipContent: t(I18nKey.COMMON$USAGE),\n tooltipAriaLabel: t(I18nKey.COMMON$USAGE),\n label: t(I18nKey.COMMON$USAGE),\n },\n ];\n\n if (hasTaskList) {\n // Insert after the file-related tabs.\n tabs.splice(2, 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 Planner on local backends — the planning\n // agent isn't supported locally.\n const visibleTabs = tabs.filter((tab) => {\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 vscodeButtonRef = 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 const vscodeEl = vscodeButtonRef.current;\n if (!rowInner \|\| !measureRow \|\| !menuEl \|\| !vscodeEl) 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 vscodeWidth = vscodeEl.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 + vscodeWidth;\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 min-w-0 flex-1 items-center justify-start overflow-hidden\">\n <div className=\"flex w-fit max-w-full min-w-0 items-center gap-1.5\">\n <LayoutGroup id=\"conversation-drawer-tabs\">\n <div className=\"flex w-fit max-w-full min-w-0 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 suppressLayoutAnimation={isPanelResizing}\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n </LayoutGroup>\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\"\n ? mobileTopBarIconClassName\n : undefined\n }\n />\n <ConversationTabsContextMenu\n isOpen={isMenuOpen}\n onClose={() => setIsMenuOpen(false)}\n ignoreOutsideClickRef={anchorRef}\n anchorRef={anchorRef}\n />\n </div>\n </div>\n </div>\n {/* Keep the ref'd wrapper mounted on local backends too — the\n overflow measurement effect above bails if it's missing. /}\n <div\n ref={vscodeButtonRef}\n className={cn(\n \"ml-auto shrink-0\",\n backend.kind === \"cloud\" && \"pr-1\",\n )}\n >\n {backend.kind === \"cloud\" && <DrawerVSCodeLink />}\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

@@ -11,92 +11,102 @@ import { useConversationLocalStorageState as l } from "../../../../utils/convers
 import { useConversationStore as u } from "../../../../stores/conversation-store.js";
 import { useActiveBackend as d } from "../../../../contexts/active-backend-context.js";
 import { useAgentState as f } from "../../../../hooks/use-agent-state.js";
-import { LayoutGroup as p } from "../../../../node_modules/framer-motion/dist/es/components/LayoutGroup/index.js";
-import { Typography as m } from "../../../../ui/typography.js";
-import { useSelectConversationTab as ee } from "../../../../hooks/use-select-conversation-tab.js";
-import te from "../../../../icons/document.js";
-import { useHandleBuildPlanClick as h } from "../../../../hooks/use-handle-build-plan-click.js";
-import { EllipsisButton as g } from "../../conversation-panel/ellipsis-button.js";
+import { LayoutGroup as ee } from "../../../../node_modules/framer-motion/dist/es/components/LayoutGroup/index.js";
+import { Typography as te } from "../../../../ui/typography.js";
+import { useSelectConversationTab as ne } from "../../../../hooks/use-select-conversation-tab.js";
+import re from "../../../../icons/document.js";
+import { useHandleBuildPlanClick as p } from "../../../../hooks/use-handle-build-plan-click.js";
+import { LuFileDiff as m } from "../../../../node_modules/react-icons/lu/index.js";
+import { EllipsisButton as h } from "../../conversation-panel/ellipsis-button.js";
+import { ChatActionTooltip as g } from "../../chat/chat-action-tooltip.js";
 import { mobileTopBarIconClassName as _ } from "../../../../utils/mobile-top-bar-icon-button-classes.js";
-import { ChatActionTooltip as v } from "../../chat/chat-action-tooltip.js";
-import y from "../../../../icons/double-check.js";
-import { ConversationTabNav as b } from "./conversation-tab-nav.js";
-import { DrawerVSCodeLink as ne } from "./drawer-vscode-link.js";
-import { useTaskList as re } from "../../../../hooks/use-task-list.js";
-import { ConversationTabsContextMenu as ie } from "./conversation-tabs-context-menu.js";
-import { useEffect as x, useLayoutEffect as S, useRef as C, useState as w } from "react";
-import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import v from "../../../../icons/double-check.js";
+import { ConversationTabNav as y } from "./conversation-tab-nav.js";
+import { DrawerVSCodeLink as ie } from "./drawer-vscode-link.js";
+import { useTaskList as ae } from "../../../../hooks/use-task-list.js";
+import { ConversationTabsContextMenu as oe } from "./conversation-tabs-context-menu.js";
+import { useEffect as b, useLayoutEffect as se, useRef as x, useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-tabs/conversation-tabs.tsx
-function O({ variant: O = "default", isPanelResizing: ae = !1 }) {
-	let { conversationId: oe } = c(), { setSelectedTab: k, planContent: A } = u(), [j, M] = w(!1), { state: N } = l(oe), { hasTaskList: P } = re(), { backend: F } = d(), { handleBuildPlanClick: se } = h(), { curAgentState: I } = f(), { selectTab: L, isTabActive: R, onTabChange: z, selectedTab: B, isRightPanelShown: V } = ee();
-	x(() => {
+function E({ variant: E = "default", isPanelResizing: D = !1 }) {
+	let { conversationId: O } = c(), { setSelectedTab: k, planContent: A } = u(), [j, M] = S(!1), { state: N } = l(O), { hasTaskList: P } = ae(), { backend: F } = d(), { handleBuildPlanClick: I } = p(), { curAgentState: L } = f(), { selectTab: R, isTabActive: z, onTabChange: B, selectedTab: V, isRightPanelShown: H } = ne();
+	b(() => {
 		k(N.selectedTab);
-	}, [k, N.selectedTab]), x(() => {
-		V && (B || z("files"));
+	}, [k, N.selectedTab]), b(() => {
+		H && (V || B("files"));
 	}, [
+		H,
 		V,
-		B,
-		z
+		B
 	]);
-	let { t: H, i18n: U } = e("openhands"), W = [
+	let { t: U, i18n: W } = e("openhands"), G = [
 		{
 			tabValue: "files",
-			isActive: R("files"),
-			icon: te,
-			onClick: () => L("files"),
-			tooltipContent: H(t.COMMON$FILES),
-			tooltipAriaLabel: H(t.COMMON$FILES),
-			label: H(t.COMMON$FILES)
+			isActive: z("files"),
+			icon: re,
+			onClick: () => R("files"),
+			tooltipContent: U(t.COMMON$FILES),
+			tooltipAriaLabel: U(t.COMMON$FILES),
+			label: U(t.COMMON$FILES)
+		},
+		{
+			tabValue: "commits",
+			isActive: z("commits"),
+			icon: m,
+			onClick: () => R("commits"),
+			tooltipContent: U(t.DIFF_VIEWER$COMMITS),
+			tooltipAriaLabel: U(t.DIFF_VIEWER$COMMITS),
+			label: U(t.DIFF_VIEWER$COMMITS)
 		},
 		{
 			tabValue: "planner",
-			isActive: R("planner"),
+			isActive: z("planner"),
 			icon: i,
-			onClick: () => L("planner"),
-			tooltipContent: H(t.COMMON$PLANNER),
-			tooltipAriaLabel: H(t.COMMON$PLANNER),
-			label: H(t.COMMON$PLANNER)
+			onClick: () => R("planner"),
+			tooltipContent: U(t.COMMON$PLANNER),
+			tooltipAriaLabel: U(t.COMMON$PLANNER),
+			label: U(t.COMMON$PLANNER)
 		},
 		{
 			tabValue: "terminal",
-			isActive: R("terminal"),
+			isActive: z("terminal"),
 			icon: a,
-			onClick: () => L("terminal"),
-			tooltipContent: H(t.COMMON$TERMINAL),
-			tooltipAriaLabel: H(t.COMMON$TERMINAL),
-			label: H(t.COMMON$TERMINAL),
+			onClick: () => R("terminal"),
+			tooltipContent: U(t.COMMON$TERMINAL),
+			tooltipAriaLabel: U(t.COMMON$TERMINAL),
+			label: U(t.COMMON$TERMINAL),
 			className: "pl-2"
 		},
 		{
 			tabValue: "browser",
-			isActive: R("browser"),
+			isActive: z("browser"),
 			icon: r,
-			onClick: () => L("browser"),
-			tooltipContent: H(t.COMMON$BROWSER),
-			tooltipAriaLabel: H(t.COMMON$BROWSER),
-			label: H(t.COMMON$BROWSER)
+			onClick: () => R("browser"),
+			tooltipContent: U(t.COMMON$BROWSER),
+			tooltipAriaLabel: U(t.COMMON$BROWSER),
+			label: U(t.COMMON$BROWSER)
 		},
 		{
 			tabValue: "usage",
-			isActive: R("usage"),
+			isActive: z("usage"),
 			icon: n,
-			onClick: () => L("usage"),
-			tooltipContent: H(t.COMMON$USAGE),
-			tooltipAriaLabel: H(t.COMMON$USAGE),
-			label: H(t.COMMON$USAGE)
+			onClick: () => R("usage"),
+			tooltipContent: U(t.COMMON$USAGE),
+			tooltipAriaLabel: U(t.COMMON$USAGE),
+			label: U(t.COMMON$USAGE)
 		}
 	];
-	P && W.splice(1, 0, {
+	P && G.splice(2, 0, {
 		tabValue: "tasklist",
-		isActive: R("tasklist"),
-		icon: y,
-		onClick: () => L("tasklist"),
-		tooltipContent: H(t.COMMON$TASK_LIST),
-		tooltipAriaLabel: H(t.COMMON$TASK_LIST),
-		label: H(t.COMMON$TASK_LIST)
+		isActive: z("tasklist"),
+		icon: v,
+		onClick: () => R("tasklist"),
+		tooltipContent: U(t.COMMON$TASK_LIST),
+		tooltipAriaLabel: U(t.COMMON$TASK_LIST),
+		label: U(t.COMMON$TASK_LIST)
 	});
-	let G = W.filter((e) => e.tabValue === "planner" && F.kind !== "cloud" ? !1 : N.unpinnedTabs.includes(e.tabValue) ? B === e.tabValue : !0), K = N.unpinnedTabs.join(","), q = I === o.RUNNING || I === o.LOADING || !A, J = C(null), Y = C(null), X = C(null), Z = C(null), Q = C(null), [ce, $] = w(G.length);
-	S(() => {
+	let K = G.filter((e) => e.tabValue === "planner" && F.kind !== "cloud" ? !1 : N.unpinnedTabs.includes(e.tabValue) ? V === e.tabValue : !0), ce = N.unpinnedTabs.join(","), q = L === o.RUNNING || L === o.LOADING || !A, J = x(null), Y = x(null), X = x(null), Z = x(null), Q = x(null), [le, $] = S(K.length);
+	se(() => {
 		let e = J.current, t = Y.current, n = X.current, r = Z.current;
 		if (!e || !t || !n || !r) return;
 		let i = () => {
@@ -125,25 +135,25 @@ function O({ variant: O = "default", isPanelResizing: ae = !1 }) {
 		let a = new ResizeObserver(i);
 		return a.observe(e), () => a.disconnect();
 	}, [
-		K,
-		G.length,
+		ce,
+		K.length,
 		P,
 		F.kind,
-		B,
 		V,
-		U.language
+		H,
+		W.language
 	]);
-	let le = Math.min(ce, G.length);
-	return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ D("div", {
-		className: s("relative w-full min-w-0", O === "compact" ? "flex h-full min-h-0 items-center py-0 pl-0 pr-1" : "min-h-10 p-1"),
-		children: [/* @__PURE__ */ E("div", {
+	let ue = Math.min(le, K.length);
+	return /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ T("div", {
+		className: s("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: [/* @__PURE__ */ w("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: r, tooltipAriaLabel: i, label: a, className: o }, c) => /* @__PURE__ */ E(v, {
+			children: K.map(({ tabValue: e, icon: t, isActive: n, tooltipContent: r, tooltipAriaLabel: i, label: a, className: o }, c) => /* @__PURE__ */ w(g, {
 				tooltip: r,
 				ariaLabel: i,
-				children: /* @__PURE__ */ E(b, {
+				children: /* @__PURE__ */ w(y, {
 					tabValue: e,
 					icon: t,
 					onClick: () => {},
@@ -153,40 +163,40 @@ function O({ variant: O = "default", isPanelResizing: ae = !1 }) {
 					measureOnly: !0
 				})
 			}, `measure-${e}-${c}`))
-		}), /* @__PURE__ */ D("div", {
+		}), /* @__PURE__ */ T("div", {
 			ref: J,
 			className: "flex w-full min-w-0 flex-nowrap items-center justify-start",
-			children: [/* @__PURE__ */ E("div", {
+			children: [/* @__PURE__ */ w("div", {
 				className: "flex min-w-0 flex-1 items-center justify-start overflow-hidden",
-				children: /* @__PURE__ */ D("div", {
+				children: /* @__PURE__ */ T("div", {
 					className: "flex w-fit max-w-full min-w-0 items-center gap-1.5",
-					children: [/* @__PURE__ */ E(p, {
+					children: [/* @__PURE__ */ w(ee, {
 						id: "conversation-drawer-tabs",
-						children: /* @__PURE__ */ E("div", {
+						children: /* @__PURE__ */ w("div", {
 							className: "flex w-fit max-w-full min-w-0 flex-nowrap items-center gap-1.5 overflow-x-hidden",
-							children: G.slice(0, le).map(({ tabValue: e, icon: t, onClick: n, isActive: r, tooltipContent: i, tooltipAriaLabel: a, label: o, className: c }, l) => /* @__PURE__ */ E(v, {
+							children: K.slice(0, ue).map(({ tabValue: e, icon: t, onClick: n, isActive: r, tooltipContent: i, tooltipAriaLabel: a, label: o, className: c }, l) => /* @__PURE__ */ w(g, {
 								tooltip: i,
 								ariaLabel: a,
-								children: /* @__PURE__ */ E(b, {
+								children: /* @__PURE__ */ w(y, {
 									tabValue: e,
 									icon: t,
 									onClick: n,
 									isActive: r,
 									label: o,
 									className: s(c, "shrink-0"),
-									suppressLayoutAnimation: ae
+									suppressLayoutAnimation: D
 								})
 							}, `${e}-${l}`))
 						})
-					}), /* @__PURE__ */ D("div", {
+					}), /* @__PURE__ */ T("div", {
 						ref: X,
 						className: "relative shrink-0",
-						children: [/* @__PURE__ */ E(g, {
+						children: [/* @__PURE__ */ w(h, {
 							ref: Q,
 							onClick: () => M(!j),
-							ariaLabel: H(t.COMMON$MORE_OPTIONS),
-							iconClassName: O === "compact" ? _ : void 0
-						}), /* @__PURE__ */ E(ie, {
+							ariaLabel: U(t.COMMON$MORE_OPTIONS),
+							iconClassName: E === "compact" ? _ : void 0
+						}), /* @__PURE__ */ w(oe, {
 							isOpen: j,
 							onClose: () => M(!1),
 							ignoreOutsideClickRef: Q,
@@ -194,28 +204,28 @@ function O({ variant: O = "default", isPanelResizing: ae = !1 }) {
 						})]
 					})]
 				})
-			}), /* @__PURE__ */ E("div", {
+			}), /* @__PURE__ */ w("div", {
 				ref: Z,
 				className: s("ml-auto shrink-0", F.kind === "cloud" && "pr-1"),
-				children: F.kind === "cloud" && /* @__PURE__ */ E(ne, {})
+				children: F.kind === "cloud" && /* @__PURE__ */ w(ie, {})
 			})]
 		})]
-	}), R("planner") && /* @__PURE__ */ E("div", {
+	}), z("planner") && /* @__PURE__ */ w("div", {
 		className: s("flex h-10 min-h-10 shrink-0 items-center border-t border-[var(--oh-border)] pl-[10px] pr-1"),
-		children: /* @__PURE__ */ E("button", {
+		children: /* @__PURE__ */ w("button", {
 			type: "button",
-			onClick: se,
+			onClick: I,
 			disabled: q,
 			className: s("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: /* @__PURE__ */ D(m.Text, {
+			children: /* @__PURE__ */ T(te.Text, {
 				className: "text-[11px] font-normal leading-5 text-black",
-				children: [H(t.COMMON$BUILD), " ⌘↩"]
+				children: [U(t.COMMON$BUILD), " ⌘↩"]
 			})
 		})
 	})] });
 }
 //#endregion
-export { O as ConversationTabs };
+export { E as ConversationTabs };
 //# sourceMappingURL=conversation-tabs.js.map

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 { LayoutGroup } from \"framer-motion\";\nimport { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport DocumentIcon from \"#/icons/document.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 { DrawerVSCodeLink } from \"./drawer-vscode-link\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\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 isPanelResizing = false,\n}: {\n variant?: \"default\" \| \"compact\";\n /** True while the desktop drawer gripper is being dragged. /\n isPanelResizing?: boolean;\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: ListTodo,\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: \"terminal\",\n isActive: isTabActive(\"terminal\"),\n icon: SquareChevronRight,\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: Globe,\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 tabValue: \"usage\",\n isActive: isTabActive(\"usage\"),\n icon: Gauge,\n onClick: () => selectTab(\"usage\"),\n tooltipContent: t(I18nKey.COMMON$USAGE),\n tooltipAriaLabel: t(I18nKey.COMMON$USAGE),\n label: t(I18nKey.COMMON$USAGE),\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 Planner on local backends — the planning\n // agent isn't supported locally.\n const visibleTabs = tabs.filter((tab) => {\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 vscodeButtonRef = 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 const vscodeEl = vscodeButtonRef.current;\n if (!rowInner \|\| !measureRow \|\| !menuEl \|\| !vscodeEl) 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 vscodeWidth = vscodeEl.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 + vscodeWidth;\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 min-w-0 flex-1 items-center justify-start overflow-hidden\">\n <div className=\"flex w-fit max-w-full min-w-0 items-center gap-1.5\">\n <LayoutGroup id=\"conversation-drawer-tabs\">\n <div className=\"flex w-fit max-w-full min-w-0 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 suppressLayoutAnimation={isPanelResizing}\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n </LayoutGroup>\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\"\n ? mobileTopBarIconClassName\n : undefined\n }\n />\n <ConversationTabsContextMenu\n isOpen={isMenuOpen}\n onClose={() => setIsMenuOpen(false)}\n ignoreOutsideClickRef={anchorRef}\n anchorRef={anchorRef}\n />\n </div>\n </div>\n </div>\n {/* Keep the ref'd wrapper mounted on local backends too — the\n overflow measurement effect above bails if it's missing. /}\n <div\n ref={vscodeButtonRef}\n className={cn(\n \"ml-auto shrink-0\",\n backend.kind === \"cloud\" && \"pr-1\",\n )}\n >\n {backend.kind === \"cloud\" && <DrawerVSCodeLink />}\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 { LayoutGroup } from \"framer-motion\";\nimport { Gauge, Globe, ListTodo, SquareChevronRight } from \"lucide-react\";\nimport { LuFileDiff } from \"react-icons/lu\";\nimport DocumentIcon from \"#/icons/document.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 { DrawerVSCodeLink } from \"./drawer-vscode-link\";\nimport { ChatActionTooltip } from \"../../chat/chat-action-tooltip\";\nimport { I18nKey } from \"#/i18n/declaration\";\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 isPanelResizing = false,\n}: {\n variant?: \"default\" \| \"compact\";\n /** True while the desktop drawer gripper is being dragged. /\n isPanelResizing?: boolean;\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: \"commits\",\n isActive: isTabActive(\"commits\"),\n icon: LuFileDiff,\n onClick: () => selectTab(\"commits\"),\n tooltipContent: t(I18nKey.DIFF_VIEWER$COMMITS),\n tooltipAriaLabel: t(I18nKey.DIFF_VIEWER$COMMITS),\n label: t(I18nKey.DIFF_VIEWER$COMMITS),\n },\n {\n tabValue: \"planner\",\n isActive: isTabActive(\"planner\"),\n icon: ListTodo,\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: \"terminal\",\n isActive: isTabActive(\"terminal\"),\n icon: SquareChevronRight,\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: Globe,\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 tabValue: \"usage\",\n isActive: isTabActive(\"usage\"),\n icon: Gauge,\n onClick: () => selectTab(\"usage\"),\n tooltipContent: t(I18nKey.COMMON$USAGE),\n tooltipAriaLabel: t(I18nKey.COMMON$USAGE),\n label: t(I18nKey.COMMON$USAGE),\n },\n ];\n\n if (hasTaskList) {\n // Insert after the file-related tabs.\n tabs.splice(2, 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 Planner on local backends — the planning\n // agent isn't supported locally.\n const visibleTabs = tabs.filter((tab) => {\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 vscodeButtonRef = 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 const vscodeEl = vscodeButtonRef.current;\n if (!rowInner \|\| !measureRow \|\| !menuEl \|\| !vscodeEl) 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 vscodeWidth = vscodeEl.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 + vscodeWidth;\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 min-w-0 flex-1 items-center justify-start overflow-hidden\">\n <div className=\"flex w-fit max-w-full min-w-0 items-center gap-1.5\">\n <LayoutGroup id=\"conversation-drawer-tabs\">\n <div className=\"flex w-fit max-w-full min-w-0 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 suppressLayoutAnimation={isPanelResizing}\n />\n </ChatActionTooltip>\n ),\n )}\n </div>\n </LayoutGroup>\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\"\n ? mobileTopBarIconClassName\n : undefined\n }\n />\n <ConversationTabsContextMenu\n isOpen={isMenuOpen}\n onClose={() => setIsMenuOpen(false)}\n ignoreOutsideClickRef={anchorRef}\n anchorRef={anchorRef}\n />\n </div>\n </div>\n </div>\n {/* Keep the ref'd wrapper mounted on local backends too — the\n overflow measurement effect above bails if it's missing. /}\n <div\n ref={vscodeButtonRef}\n className={cn(\n \"ml-auto shrink-0\",\n backend.kind === \"cloud\" && \"pr-1\",\n )}\n >\n {backend.kind === \"cloud\" && <DrawerVSCodeLink />}\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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"}