@openhands/agent-canvas 1.11.0 → 1.13.0

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

@@ -1,38 +1,39 @@
 import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../../i18n/declaration.js";
-import { Globe as n } from "../../../../node_modules/lucide-react/dist/esm/icons/globe.js";
-import { ListTodo as r } from "../../../../node_modules/lucide-react/dist/esm/icons/list-todo.js";
-import { SquareChevronRight as i } from "../../../../node_modules/lucide-react/dist/esm/icons/square-chevron-right.js";
-import { cn as a } from "../../../../utils/utils.js";
-import { useConversationId as o } from "../../../../hooks/use-conversation-id.js";
-import { useConversationLocalStorageState as s } from "../../../../utils/conversation-local-storage.js";
-import { useConversationStore as c } from "../../../../stores/conversation-store.js";
-import { useActiveBackend as l } from "../../../../contexts/active-backend-context.js";
-import { dropdownInstantColorClassName as u, dropdownMenuRowIconWrapperClassName as d } from "../../../../utils/dropdown-classes.js";
-import { ContextMenu as f } from "../../../../ui/context-menu.js";
-import { useClickOutsideElement as p } from "../../../../hooks/use-click-outside-element.js";
-import m from "../../../../icons/document.js";
-import { ArchivedDisabledTooltip as h } from "../../context-menu/archived-disabled-tooltip.js";
-import { useIsArchivedConversation as g } from "../../../../hooks/use-is-archived-conversation.js";
-import { useSelectConversationTab as _ } from "../../../../hooks/use-select-conversation-tab.js";
-import v from "../../../../icons/double-check.js";
-import y from "../../../../icons/pill.js";
-import b from "../../../../icons/pill-fill.js";
-import { useTaskList as x } from "../../../../hooks/use-task-list.js";
-import { useLayoutEffect as S, useState as C } from "react";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
-import E from "react-dom";
+import { Gauge as n } from "../../../../node_modules/lucide-react/dist/esm/icons/gauge.js";
+import { Globe as r } from "../../../../node_modules/lucide-react/dist/esm/icons/globe.js";
+import { ListTodo as i } from "../../../../node_modules/lucide-react/dist/esm/icons/list-todo.js";
+import { SquareChevronRight as a } from "../../../../node_modules/lucide-react/dist/esm/icons/square-chevron-right.js";
+import { cn as o } from "../../../../utils/utils.js";
+import { useConversationId as s } from "../../../../hooks/use-conversation-id.js";
+import { useConversationLocalStorageState as c } from "../../../../utils/conversation-local-storage.js";
+import { useConversationStore as l } from "../../../../stores/conversation-store.js";
+import { useActiveBackend as u } from "../../../../contexts/active-backend-context.js";
+import { dropdownInstantColorClassName as d, dropdownMenuRowIconWrapperClassName as f } from "../../../../utils/dropdown-classes.js";
+import { ContextMenu as p } from "../../../../ui/context-menu.js";
+import { useClickOutsideElement as m } from "../../../../hooks/use-click-outside-element.js";
+import { useSelectConversationTab as h } from "../../../../hooks/use-select-conversation-tab.js";
+import g from "../../../../icons/document.js";
+import { ArchivedDisabledTooltip as _ } from "../../context-menu/archived-disabled-tooltip.js";
+import { useIsArchivedConversation as v } from "../../../../hooks/use-is-archived-conversation.js";
+import y from "../../../../icons/double-check.js";
+import b from "../../../../icons/pill.js";
+import x from "../../../../icons/pill-fill.js";
+import { useTaskList as S } from "../../../../hooks/use-task-list.js";
+import { useLayoutEffect as C, useState as w } from "react";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import D from "react-dom";
 //#region src/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.tsx
-function D({ isOpen: D, onClose: O, ignoreOutsideClickRef: k, anchorRef: A }) {
-	let j = p(O, k), [M, N] = C();
-	S(() => {
-		if (!D || !A?.current) {
-			N(void 0);
+function O({ isOpen: O, onClose: k, ignoreOutsideClickRef: A, anchorRef: j }) {
+	let M = m(k, A), [N, P] = w();
+	C(() => {
+		if (!O || !j?.current) {
+			P(void 0);
 			return;
 		}
 		let e = () => {
-			let e = A.current?.getBoundingClientRect();
-			e && N({
+			let e = j.current?.getBoundingClientRect();
+			e && P({
 				position: "fixed",
 				zIndex: 9999,
 				top: e.bottom + 8,
@@ -42,96 +43,101 @@ function D({ isOpen: D, onClose: O, ignoreOutsideClickRef: k, anchorRef: A }) {
 		return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
 			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
 		};
-	}, [D, A]);
-	let { t: P } = e("openhands"), { conversationId: F } = o(), { state: I, setUnpinnedTabs: L, setSelectedTab: R } = s(F), { selectedTab: z, isRightPanelShown: B, setSelectedTab: V } = c(), { navigateToTab: H } = _(), { hasTaskList: U } = x(), { backend: W } = l(), G = g(), K = [
+	}, [O, j]);
+	let { t: F } = e("openhands"), { conversationId: I } = s(), { state: L, setUnpinnedTabs: R, setSelectedTab: z } = c(I), { selectedTab: B, isRightPanelShown: V, setSelectedTab: H } = l(), { navigateToTab: U } = h(), { hasTaskList: W } = S(), { backend: G } = u(), K = v(), q = [
 		{
 			tab: "planner",
-			icon: r,
+			icon: i,
 			i18nKey: t.COMMON$PLANNER
 		},
 		{
 			tab: "files",
-			icon: m,
+			icon: g,
 			i18nKey: t.COMMON$FILES
 		},
 		{
 			tab: "terminal",
-			icon: i,
+			icon: a,
 			i18nKey: t.COMMON$TERMINAL
 		},
 		{
 			tab: "browser",
-			icon: n,
+			icon: r,
 			i18nKey: t.COMMON$BROWSER
+		},
+		{
+			tab: "usage",
+			icon: n,
+			i18nKey: t.COMMON$USAGE
 		}
 	];
-	U && K.unshift({
+	W && q.unshift({
 		tab: "tasklist",
-		icon: v,
+		icon: y,
 		i18nKey: t.COMMON$TASK_LIST
 	});
-	let q = K.filter(({ tab: e }) => e !== "planner" || W.kind === "cloud"), J = (e) => {
-		G || (H(e), O());
-	}, Y = (e, t) => {
-		if (G) {
+	let J = q.filter(({ tab: e }) => e !== "planner" || G.kind === "cloud"), Y = (e) => {
+		K || (U(e), k());
+	}, X = (e, t) => {
+		if (K) {
 			t.preventDefault(), t.stopPropagation();
 			return;
 		}
-		if (t.preventDefault(), t.stopPropagation(), I.unpinnedTabs.includes(e)) L(I.unpinnedTabs.filter((t) => t !== e));
+		if (t.preventDefault(), t.stopPropagation(), L.unpinnedTabs.includes(e)) R(L.unpinnedTabs.filter((t) => t !== e));
 		else {
-			let t = [...I.unpinnedTabs, e];
-			if (L(t), z === e && B) {
-				let n = q.find(({ tab: n }) => n !== e && !t.includes(n));
-				n && (V(n.tab), R(n.tab));
+			let t = [...L.unpinnedTabs, e];
+			if (R(t), B === e && V) {
+				let n = J.find(({ tab: n }) => n !== e && !t.includes(n));
+				n && (H(n.tab), z(n.tab));
 			}
 		}
 	};
-	if (!D) return null;
-	let X = !!(A?.current && M), Z = /* @__PURE__ */ w(f, {
-		ref: j,
-		theme: X ? "popover" : "default",
-		position: X ? "none" : "bottom",
-		alignment: X ? "none" : "left",
-		spacing: X ? "none" : "default",
-		className: a("z-[9999] w-fit", X ? "mt-0" : "mt-2"),
-		children: q.map(({ tab: e, icon: n, i18nKey: r }) => {
-			let i = !I.unpinnedTabs.includes(e);
-			return /* @__PURE__ */ w("li", {
+	if (!O) return null;
+	let Z = !!(j?.current && N), Q = /* @__PURE__ */ T(p, {
+		ref: M,
+		theme: Z ? "popover" : "default",
+		position: Z ? "none" : "bottom",
+		alignment: Z ? "none" : "left",
+		spacing: Z ? "none" : "default",
+		className: o("z-[9999] w-fit", Z ? "mt-0" : "mt-2"),
+		children: J.map(({ tab: e, icon: n, i18nKey: r }) => {
+			let i = !L.unpinnedTabs.includes(e);
+			return /* @__PURE__ */ T("li", {
 				className: "list-none",
-				children: /* @__PURE__ */ w(h, {
-					isDisabled: G,
-					children: /* @__PURE__ */ T("div", {
-						className: a("group flex h-[30px] w-full min-w-0 items-stretch rounded", !G && "hover:bg-[var(--oh-interactive-hover)]", G && "opacity-50"),
-						children: [/* @__PURE__ */ T("button", {
+				children: /* @__PURE__ */ T(_, {
+					isDisabled: K,
+					children: /* @__PURE__ */ E("div", {
+						className: o("group flex h-[30px] w-full min-w-0 items-stretch rounded", !K && "hover:bg-[var(--oh-interactive-hover)]", K && "opacity-50"),
+						children: [/* @__PURE__ */ E("button", {
 							type: "button",
 							"data-testid": `conversation-tabs-menu-open-${e}`,
-							disabled: G,
-							className: a("flex min-w-0 flex-1 items-center gap-2 rounded-l p-2 text-start text-white", u, G ? "cursor-not-allowed" : "cursor-pointer"),
-							onClick: () => J(e),
-							children: [/* @__PURE__ */ w("span", {
-								className: d,
+							disabled: K,
+							className: o("flex min-w-0 flex-1 items-center gap-2 rounded-l p-2 text-start text-white", d, K ? "cursor-not-allowed" : "cursor-pointer"),
+							onClick: () => Y(e),
+							children: [/* @__PURE__ */ T("span", {
+								className: f,
 								"aria-hidden": !0,
-								children: /* @__PURE__ */ w(n, { className: "h-4 w-4" })
-							}), /* @__PURE__ */ w("span", {
+								children: /* @__PURE__ */ T(n, { className: "h-4 w-4" })
+							}), /* @__PURE__ */ T("span", {
 								className: "text-sm",
-								children: P(r)
+								children: F(r)
 							})]
-						}), /* @__PURE__ */ w("button", {
+						}), /* @__PURE__ */ T("button", {
 							type: "button",
 							"data-testid": `conversation-tabs-menu-pin-${e}`,
-							disabled: G,
-							className: a("flex shrink-0 items-center justify-center rounded-r px-2 text-white", u, G ? "cursor-not-allowed" : "cursor-pointer hover:bg-white/10"),
+							disabled: K,
+							className: o("flex shrink-0 items-center justify-center rounded-r px-2 text-white", d, K ? "cursor-not-allowed" : "cursor-pointer hover:bg-white/10"),
 							"aria-pressed": i,
-							"aria-label": P(i ? t.CONVERSATION$UNPIN_TAB : t.CONVERSATION$PIN_TAB),
-							onClick: (t) => Y(e, t),
-							children: i ? /* @__PURE__ */ w("span", {
-								className: a("-mr-[5px] ml-auto", d),
+							"aria-label": F(i ? t.CONVERSATION$UNPIN_TAB : t.CONVERSATION$PIN_TAB),
+							onClick: (t) => X(e, t),
+							children: i ? /* @__PURE__ */ T("span", {
+								className: o("-mr-[5px] ml-auto", f),
 								"aria-hidden": !0,
-								children: /* @__PURE__ */ w(b, { className: "h-7 w-7" })
-							}) : /* @__PURE__ */ w("span", {
-								className: a("ml-auto", d),
+								children: /* @__PURE__ */ T(x, { className: "h-7 w-7" })
+							}) : /* @__PURE__ */ T("span", {
+								className: o("ml-auto", f),
 								"aria-hidden": !0,
-								children: /* @__PURE__ */ w(y, { className: "h-4.5 w-4.5" })
+								children: /* @__PURE__ */ T(b, { className: "h-4.5 w-4.5" })
 							})
 						})]
 					})
@@ -139,12 +145,12 @@ function D({ isOpen: D, onClose: O, ignoreOutsideClickRef: k, anchorRef: A }) {
 			}, e);
 		})
 	});
-	return X && M && typeof document < "u" ? E.createPortal(/* @__PURE__ */ w("div", {
-		style: M,
-		children: Z
-	}), document.body) : Z;
+	return Z && N && typeof document < "u" ? D.createPortal(/* @__PURE__ */ T("div", {
+		style: N,
+		children: Q
+	}), document.body) : Q;
 }
 //#endregion
-export { D as ConversationTabsContextMenu };
+export { O as ConversationTabsContextMenu };
 
 //# sourceMappingURL=conversation-tabs-context-menu.js.map

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

@@ -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 { 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  ];\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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"}
+{"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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"}

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

@@ -1,2 +1,2 @@
-require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../../i18n/declaration.cjs"),n=require("../../../../node_modules/lucide-react/dist/esm/icons/globe.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/list-todo.cjs"),i=require("../../../../node_modules/lucide-react/dist/esm/icons/square-chevron-right.cjs"),a=require("../../../../types/agent-state.cjs"),o=require("../../../../utils/utils.cjs"),s=require("../../../../hooks/use-conversation-id.cjs"),c=require("../../../../utils/conversation-local-storage.cjs"),l=require("../../../../stores/conversation-store.cjs"),u=require("../../../../contexts/active-backend-context.cjs"),d=require("../../../../hooks/use-agent-state.cjs"),f=require("../../../../node_modules/framer-motion/dist/es/components/LayoutGroup/index.cjs"),p=require("../../../../ui/typography.cjs"),m=require("../../../../icons/document.cjs"),h=require("../../../../hooks/use-handle-build-plan-click.cjs"),g=require("../../../../hooks/use-select-conversation-tab.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"),ee=require("../../../../hooks/use-task-list.cjs"),te=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}=s.useConversationId(),{setSelectedTab:O,planContent:k}=l.useConversationStore(),[A,j]=(0,C.useState)(!1),{state:M}=c.useConversationLocalStorageState(D),{hasTaskList:N}=ee.useTaskList(),{backend:P}=u.useActiveBackend(),{handleBuildPlanClick:F}=h.useHandleBuildPlanClick(),{curAgentState:I}=d.useAgentState(),{selectTab:L,isTabActive:R,onTabChange:z,selectedTab:B,isRightPanelShown:V}=g.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:m.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:r.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:i.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:n.Globe,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===`planner`&&P.kind!==`cloud`?!1:M.unpinnedTabs.includes(e.tabValue)?B===e.tabValue:!0),K=M.unpinnedTabs.join(`,`),q=I===a.AgentState.RUNNING||I===a.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),[ne,$]=(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 re=Math.min(ne,G.length);return(0,w.jsxs)(w.Fragment,{children:[(0,w.jsxs)(`div`,{className:o.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:s},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:o.cn(s,`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)(f.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,re).map(({tabValue:e,icon:t,onClick:n,isActive:r,tooltipContent:i,tooltipAriaLabel:a,label:s,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:s,className:o.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)(te.ConversationTabsContextMenu,{isOpen:A,onClose:()=>j(!1),ignoreOutsideClickRef:Q,anchorRef:Q})]})]})}),(0,w.jsx)(`div`,{ref:Z,className:o.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:o.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:o.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)(p.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"),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;
 //# sourceMappingURL=conversation-tabs.cjs.map

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

@@ -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 { 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\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":"+hDAyBA,SAAgB,EAAiB,CAC/B,UAAU,UACV,kBAAkB,IAKjB,CACD,GAAM,CAAE,kBAAmB,EAAA,kBAAkB,EACvC,CAAE,iBAAgB,eAAgB,EAAA,qBAAqB,EAEvD,CAAC,EAAY,IAAA,EAAA,EAAA,UAA0B,EAAK,EAE5C,CAAE,MAAO,GACb,EAAA,iCAAiC,CAAc,EAE3C,CAAE,eAAgB,GAAA,YAAY,EAC9B,CAAE,WAAY,EAAA,iBAAiB,EAE/B,CAAE,wBAAyB,EAAA,wBAAwB,EACnD,CAAE,iBAAkB,EAAA,cAAc,EAElC,CACJ,YACA,cACA,cACA,cACA,qBACE,EAAA,yBAAyB,GAS7B,EAAA,EAAA,eAAgB,CACd,EAAe,EAAe,WAAW,CAC3C,EAAG,CAAC,EAAgB,EAAe,WAAW,CAAC,GAE/C,EAAA,EAAA,eAAgB,CAER,IAEG,GACH,EAAY,OAAO,EAM3B,EAAG,CAAC,EAAmB,EAAa,CAAW,CAAC,EAEhD,GAAM,CAAE,IAAG,QAAS,EAAA,eAAe,WAAW,EAIxC,EAAO,CACX,CACE,SAAU,QACV,SAAU,EAAY,OAAO,EAC7B,KAAM,EAAA,QACN,YAAe,EAAU,OAAO,EAChC,eAAgB,EAAE,EAAA,QAAQ,YAAY,EACtC,iBAAkB,EAAE,EAAA,QAAQ,YAAY,EACxC,MAAO,EAAE,EAAA,QAAQ,YAAY,CAC/B,EACA,CACE,SAAU,UACV,SAAU,EAAY,SAAS,EAC/B,KAAM,EAAA,SACN,YAAe,EAAU,SAAS,EAClC,eAAgB,EAAE,EAAA,QAAQ,cAAc,EACxC,iBAAkB,EAAE,EAAA,QAAQ,cAAc,EAC1C,MAAO,EAAE,EAAA,QAAQ,cAAc,CACjC,EACA,CACE,SAAU,WACV,SAAU,EAAY,UAAU,EAChC,KAAM,EAAA,mBACN,YAAe,EAAU,UAAU,EACnC,eAAgB,EAAE,EAAA,QAAQ,eAAe,EACzC,iBAAkB,EAAE,EAAA,QAAQ,eAAe,EAC3C,MAAO,EAAE,EAAA,QAAQ,eAAe,EAChC,UAAW,MACb,EACA,CACE,SAAU,UACV,SAAU,EAAY,SAAS,EAC/B,KAAM,EAAA,MACN,YAAe,EAAU,SAAS,EAClC,eAAgB,EAAE,EAAA,QAAQ,cAAc,EACxC,iBAAkB,EAAE,EAAA,QAAQ,cAAc,EAC1C,MAAO,EAAE,EAAA,QAAQ,cAAc,CACjC,CACF,EAEI,GAEF,EAAK,OAAO,EAAG,EAAG,CAChB,SAAU,WACV,SAAU,EAAY,UAAU,EAChC,KAAM,EAAA,QACN,YAAe,EAAU,UAAU,EACnC,eAAgB,EAAE,EAAA,QAAQ,gBAAgB,EAC1C,iBAAkB,EAAE,EAAA,QAAQ,gBAAgB,EAC5C,MAAO,EAAE,EAAA,QAAQ,gBAAgB,CACnC,CAAC,EAOH,IAAM,EAAc,EAAK,OAAQ,GAC3B,EAAI,WAAa,WAAa,EAAQ,OAAS,QAAgB,GAC9D,EAAe,aAAa,SAAS,EAAI,QAAQ,EAC/C,IAAgB,EAAI,SADqC,EAEjE,EAEK,EAAoB,EAAe,aAAa,KAAK,GAAG,EAKxD,EAFJ,IAAkB,EAAA,WAAW,SAC7B,IAAkB,EAAA,WAAW,SACW,CAAC,EAErC,GAAA,EAAA,EAAA,QAAyC,IAAI,EAC7C,GAAA,EAAA,EAAA,QAAuC,IAAI,EAC3C,GAAA,EAAA,EAAA,QAAiC,IAAI,EACrC,GAAA,EAAA,EAAA,QAAyC,IAAI,EAC7C,GAAA,EAAA,EAAA,QAAsC,IAAI,EAC1C,CAAC,GAAgB,IAAA,EAAA,EAAA,UAA8B,EAAY,MAAM,GAEvE,EAAA,EAAA,qBAAsB,CACpB,IAAM,EAAW,EAAgB,QAC3B,EAAa,EAAc,QAC3B,EAAS,EAAQ,QACjB,EAAW,EAAgB,QACjC,GAAI,CAAC,GAAY,CAAC,GAAc,CAAC,GAAU,CAAC,EAAU,OAEtD,IAAM,MAAgB,CACpB,IAAM,EAAiB,EAAW,iBAChC,2BACF,EACM,EAAW,EAAe,OAE1B,EAAW,EAAS,sBAAsB,EAAE,MAClD,GAAI,IAAa,EAAG,CAClB,EAAkB,CAAQ,EAC1B,MACF,CAEA,IAAM,EAAS,MAAM,KAAK,CAAc,EAAE,IACvC,GAAW,EAAO,sBAAsB,EAAE,KAC7C,EAEA,GAAI,EAAO,SAAW,GAAY,IAAa,EAAG,CAChD,EAAkB,KAAK,IAAI,EAAG,CAAQ,CAAC,EACvC,MACF,CAEA,IAAM,EAAY,EAAO,sBAAsB,EAAE,MAC3C,EAAc,EAAS,sBAAsB,EAAE,MAC/C,EACJ,iBAAiB,CAAQ,EAAE,WAAa,iBAAiB,CAAQ,EAAE,IAC/D,EAAQ,WAAW,CAAM,GAAK,EAEhC,EAAY,EAChB,IAAK,IAAI,EAAI,EAAU,GAAK,EAAG,IAAQ,CACrC,IAAI,EAAQ,EAAY,EACxB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAG,GAAK,EAC1B,GAAS,EAAO,IAAM,EAKxB,GAHI,EAAI,IACN,GAAS,EAAI,GAEX,GAAS,EAAW,GAAK,CAC3B,EAAY,EACZ,KACF,CACF,CAEA,EAAmB,GAAU,IAAS,EAAY,EAAO,CAAU,CACrE,EAGA,GADA,EAAQ,EACJ,OAAO,eAAmB,IAAa,OAC3C,IAAM,EAAK,IAAI,eAAe,CAAO,EAErC,OADA,EAAG,QAAQ,CAAQ,MACN,EAAG,WAAW,CAC7B,EAAG,CACD,EACA,EAAY,OACZ,EACA,EAAQ,KACR,EACA,EACA,EAAK,QACP,CAAC,EAED,IAAM,GAAqB,KAAK,IAAI,GAAgB,EAAY,MAAM,EAEtE,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,0BACA,IAAY,UACR,kDACA,cACN,WANF,EAQE,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,cAAA,GACA,UAAU,oGAET,EAAY,KAET,CACE,WACA,OACA,WACA,iBACA,mBACA,QACA,UAAW,GAEb,KAEA,EAAA,EAAA,KAAC,EAAA,kBAAD,CAEE,QAAS,EACT,UAAW,YAEX,EAAA,EAAA,KAAC,EAAA,mBAAD,CACY,WACJ,OACN,YAAe,CAAC,EACN,WACH,QACP,UAAW,EAAA,GAAG,EAAc,UAAU,EACtC,YAAA,EACD,CAAA,CACgB,EAbZ,WAAW,EAAS,GAAG,GAaX,CAEvB,CACG,CAAA,GACL,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAU,sEAFZ,EAIE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,2EACb,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,8DAAf,EACE,EAAA,EAAA,KAAC,EAAA,YAAD,CAAa,GAAG,qCACd,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,4FACZ,EACE,MAAM,EAAG,EAAkB,EAC3B,KAEG,CACE,WACA,OACA,UACA,WACA,iBACA,mBACA,QACA,UAAW,GAEb,KAEA,EAAA,EAAA,KAAC,EAAA,kBAAD,CAEE,QAAS,EACT,UAAW,YAEX,EAAA,EAAA,KAAC,EAAA,mBAAD,CACY,WACJ,OACG,UACC,WACH,QACP,UAAW,EAAA,GAAG,EAAc,UAAU,EACtC,wBAAyB,CAC1B,CAAA,CACgB,EAbZ,GAAG,EAAS,GAAG,GAaH,CAEvB,CACC,CAAA,CACM,CAAA,GACb,EAAA,EAAA,MAAC,MAAD,CAAK,IAAK,EAAS,UAAU,6BAA7B,EACE,EAAA,EAAA,KAAC,EAAA,eAAD,CACE,IAAK,EACL,YAAe,EAAc,CAAC,CAAU,EACxC,UAAW,EAAE,EAAA,QAAQ,mBAAmB,EACxC,cACE,IAAY,UACR,EAAA,0BACA,IAAA,EAEP,CAAA,GACD,EAAA,EAAA,KAAC,GAAA,4BAAD,CACE,OAAQ,EACR,YAAe,EAAc,EAAK,EAClC,sBAAuB,EACZ,WACZ,CAAA,CACE,GACF,GACF,CAAA,GAGL,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAA,GACT,mBACA,EAAQ,OAAS,SAAW,MAC9B,WAEC,EAAQ,OAAS,UAAW,EAAA,EAAA,KAAC,EAAA,iBAAD,CAAmB,CAAA,CAC7C,CAAA,CACF,GACF,IACJ,EAAY,SAAS,IACpB,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,4FACF,YAEA,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,SAAU,EACV,UAAW,EAAA,GACT,yFACA,EACI,gCACA,iCACN,EACA,cAAY,qCAEZ,EAAA,EAAA,MAAC,EAAA,WAAW,KAAZ,CAAiB,UAAU,wDAA3B,CAEG,EAAE,EAAA,QAAQ,YAAY,EAAE,KACV,GACX,CAAA,CACL,CAAA,CAEP,CAAA,CAAA,CAEN"}
+{"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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"}