@openhands/agent-canvas 1.14.0 → 1.16.0

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

@@ -11,91 +11,101 @@ 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 { 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 p from "../../../../icons/document.js";
+import { useHandleBuildPlanClick as m } from "../../../../hooks/use-handle-build-plan-click.js";
+import { LuFileDiff as h } from "../../../../node_modules/react-icons/lu/index.js";
 import { EllipsisButton as g } from "../../conversation-panel/ellipsis-button.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 { ChatActionTooltip as _ } from "../../chat/chat-action-tooltip.js";
+import { mobileTopBarIconClassName as re } from "../../../../utils/mobile-top-bar-icon-button-classes.js";
+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 b } 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";
 //#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();
+function O({ variant: O = "default", isPanelResizing: oe = !1 }) {
+	let { conversationId: k } = c(), { setSelectedTab: A, planContent: j } = u(), [M, N] = w(!1), { state: P } = l(k), { hasTaskList: F } = ae(), { backend: I } = d(), { handleBuildPlanClick: se } = m(), { curAgentState: L } = f(), { selectTab: R, isTabActive: z, onTabChange: B, selectedTab: V, isRightPanelShown: H } = ne();
 	x(() => {
-		k(N.selectedTab);
-	}, [k, N.selectedTab]), x(() => {
-		V && (B || z("files"));
+		A(P.selectedTab);
+	}, [A, P.selectedTab]), x(() => {
+		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: p,
+			onClick: () => R("files"),
+			tooltipContent: U(t.COMMON$FILES),
+			tooltipAriaLabel: U(t.COMMON$FILES),
+			label: U(t.COMMON$FILES)
+		},
+		{
+			tabValue: "commits",
+			isActive: z("commits"),
+			icon: h,
+			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, {
+	F && 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);
+	let K = G.filter((e) => e.tabValue === "planner" && I.kind !== "cloud" ? !1 : P.unpinnedTabs.includes(e.tabValue) ? V === e.tabValue : !0), ce = P.unpinnedTabs.join(","), q = L === o.RUNNING || L === o.LOADING || !j, J = C(null), Y = C(null), X = C(null), Z = C(null), Q = C(null), [le, $] = w(K.length);
 	S(() => {
 		let e = J.current, t = Y.current, n = X.current, r = Z.current;
 		if (!e || !t || !n || !r) return;
@@ -123,27 +133,27 @@ function O({ variant: O = "default", isPanelResizing: ae = !1 }) {
 		};
 		if (i(), typeof ResizeObserver > "u") return;
 		let a = new ResizeObserver(i);
-		return a.observe(e), () => a.disconnect();
+		return a.observe(e), a.observe(r), () => a.disconnect();
 	}, [
-		K,
-		G.length,
-		P,
-		F.kind,
-		B,
+		ce,
+		K.length,
+		F,
+		I.kind,
 		V,
-		U.language
+		H,
+		W.language
 	]);
-	let le = Math.min(ce, G.length);
+	let ue = Math.min(le, K.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", {
 			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__ */ E(_, {
 				tooltip: r,
 				ariaLabel: i,
-				children: /* @__PURE__ */ E(b, {
+				children: /* @__PURE__ */ E(y, {
 					tabValue: e,
 					icon: t,
 					onClick: () => {},
@@ -160,21 +170,21 @@ function O({ variant: O = "default", isPanelResizing: ae = !1 }) {
 				className: "flex min-w-0 flex-1 items-center justify-start overflow-hidden",
 				children: /* @__PURE__ */ D("div", {
 					className: "flex w-fit max-w-full min-w-0 items-center gap-1.5",
-					children: [/* @__PURE__ */ E(p, {
+					children: [/* @__PURE__ */ E(ee, {
 						id: "conversation-drawer-tabs",
 						children: /* @__PURE__ */ E("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__ */ E(_, {
 								tooltip: i,
 								ariaLabel: a,
-								children: /* @__PURE__ */ E(b, {
+								children: /* @__PURE__ */ E(y, {
 									tabValue: e,
 									icon: t,
 									onClick: n,
 									isActive: r,
 									label: o,
 									className: s(c, "shrink-0"),
-									suppressLayoutAnimation: ae
+									suppressLayoutAnimation: oe
 								})
 							}, `${e}-${l}`))
 						})
@@ -183,12 +193,12 @@ function O({ variant: O = "default", isPanelResizing: ae = !1 }) {
 						className: "relative shrink-0",
 						children: [/* @__PURE__ */ E(g, {
 							ref: Q,
-							onClick: () => M(!j),
-							ariaLabel: H(t.COMMON$MORE_OPTIONS),
-							iconClassName: O === "compact" ? _ : void 0
-						}), /* @__PURE__ */ E(ie, {
-							isOpen: j,
-							onClose: () => M(!1),
+							onClick: () => N(!M),
+							ariaLabel: U(t.COMMON$MORE_OPTIONS),
+							iconClassName: O === "compact" ? re : void 0
+						}), /* @__PURE__ */ E(b, {
+							isOpen: M,
+							onClose: () => N(!1),
 							ignoreOutsideClickRef: Q,
 							anchorRef: Q
 						})]
@@ -196,11 +206,11 @@ function O({ variant: O = "default", isPanelResizing: ae = !1 }) {
 				})
 			}), /* @__PURE__ */ E("div", {
 				ref: Z,
-				className: s("ml-auto shrink-0", F.kind === "cloud" && "pr-1"),
-				children: F.kind === "cloud" && /* @__PURE__ */ E(ne, {})
+				className: "ml-auto shrink-0 pr-1",
+				children: /* @__PURE__ */ E(ie, {})
 			})]
 		})]
-	}), R("planner") && /* @__PURE__ */ E("div", {
+	}), z("planner") && /* @__PURE__ */ E("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", {
 			type: "button",
@@ -208,9 +218,9 @@ function O({ variant: O = "default", isPanelResizing: ae = !1 }) {
 			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__ */ D(te.Text, {
 				className: "text-[11px] font-normal leading-5 text-black",
-				children: [H(t.COMMON$BUILD), " ⌘↩"]
+				children: [U(t.COMMON$BUILD), " ⌘↩"]
 			})
 		})
 	})] });

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

@@ -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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"}
+{"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    // The editor button's presence is resolved asynchronously (the hook probes\n    // /api/vscode/status), and it sits inside an `ml-auto shrink-0` wrapper, so\n    // it appearing or disappearing does not change `rowInner`'s own box and\n    // would not otherwise re-measure. Its width is folded into the fit\n    // calculation above, so a stale value permanently costs an inline tab.\n    ro.observe(vscodeEl);\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          {/* The ref'd wrapper must stay mounted — the overflow measurement\n              effect above bails if it's missing. */}\n          <div ref={vscodeButtonRef} className=\"ml-auto shrink-0 pr-1\">\n            <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/drawer-vscode-link.cjs

@@ -1,2 +1,2 @@
-require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../../i18n/declaration.cjs"),n=require("../../../../node_modules/lucide-react/dist/esm/icons/external-link.cjs"),r=require("../../../../types/agent-state.cjs"),i=require("../../../../utils/utils.cjs"),a=require("../../../../hooks/use-agent-state.cjs"),o=require("../../../../icons/vscode.cjs"),s=require("../../../../hooks/query/use-unified-vscode-url.cjs");let c=require("react/jsx-runtime");function l(){let{t:l}=e.useTranslation(`openhands`),{curAgentState:u}=a.useAgentState(),{data:d,refetch:f,isLoading:p}=s.useUnifiedVSCodeUrl(),m=r.RUNTIME_STARTING_STATES.includes(u);return(0,c.jsxs)(`button`,{type:`button`,onClick:async()=>{let e=d?.url;e||=(await f()).data?.url??null,e&&window.open(e,`_blank`,`noopener,noreferrer`)},disabled:p||m,"aria-label":l(t.I18nKey.VSCODE$OPEN),title:l(t.I18nKey.VSCODE$OPEN),"data-testid":`drawer-vscode-link`,className:i.cn(`inline-flex items-center gap-1.5 rounded-[7px] border border-[var(--oh-border)] bg-base-secondary px-2 py-1 text-xs`,`text-[var(--oh-muted)] transition-colors hover:enabled:bg-surface-raised hover:enabled:text-white`,`cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed`),children:[(0,c.jsx)(o.default,{className:`h-[15px] w-[15px] shrink-0`,"aria-hidden":!0}),(0,c.jsx)(`span`,{children:l(t.I18nKey.FILES$VSCODE)}),(0,c.jsx)(n.ExternalLink,{className:`h-3.5 w-3.5 shrink-0`,"aria-hidden":!0,strokeWidth:2})]})}exports.DrawerVSCodeLink=l;
+require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../../i18n/declaration.cjs"),n=require("../../../../node_modules/lucide-react/dist/esm/icons/external-link.cjs"),r=require("../../../../types/agent-state.cjs"),i=require("../../../../utils/utils.cjs"),a=require("../../../../hooks/use-agent-state.cjs"),o=require("../../../../icons/vscode.cjs"),s=require("../../../../hooks/query/use-unified-vscode-url.cjs");let c=require("react/jsx-runtime");function l(){let{t:l}=e.useTranslation(`openhands`),{curAgentState:u}=a.useAgentState(),{data:d,refetch:f,isLoading:p,isUnavailable:m}=s.useUnifiedVSCodeUrl(),h=r.RUNTIME_STARTING_STATES.includes(u);return m?null:(0,c.jsxs)(`button`,{type:`button`,onClick:async()=>{let e=d?.url;e||=(await f()).data?.url??null,e&&window.open(e,`_blank`,`noopener,noreferrer`)},disabled:p||h,"aria-label":l(t.I18nKey.VSCODE$OPEN),title:l(t.I18nKey.VSCODE$OPEN),"data-testid":`drawer-vscode-link`,className:i.cn(`inline-flex items-center gap-1.5 rounded-[7px] border border-[var(--oh-border)] bg-base-secondary px-2 py-1 text-xs`,`text-[var(--oh-muted)] transition-colors hover:enabled:bg-surface-raised hover:enabled:text-white`,`cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed`),children:[(0,c.jsx)(o.default,{className:`h-[15px] w-[15px] shrink-0`,"aria-hidden":!0}),(0,c.jsx)(`span`,{children:l(t.I18nKey.FILES$VSCODE)}),(0,c.jsx)(n.ExternalLink,{className:`h-3.5 w-3.5 shrink-0`,"aria-hidden":!0,strokeWidth:2})]})}exports.DrawerVSCodeLink=l;
 //# sourceMappingURL=drawer-vscode-link.cjs.map

package/dist/components/features/conversation/conversation-tabs/drawer-vscode-link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-vscode-link.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/drawer-vscode-link.tsx"],"sourcesContent":["import { ExternalLink } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useUnifiedVSCodeUrl } from \"#/hooks/query/use-unified-vscode-url\";\nimport { RUNTIME_STARTING_STATES } from \"#/types/agent-state\";\nimport { cn } from \"#/utils/utils\";\n\nexport function DrawerVSCodeLink() {\n  const { t } = useTranslation(\"openhands\");\n  const { curAgentState } = useAgentState();\n  const { data, refetch, isLoading } = useUnifiedVSCodeUrl();\n  const isRuntimeStarting = RUNTIME_STARTING_STATES.includes(curAgentState);\n\n  const handleClick = async () => {\n    let vscodeUrl = data?.url;\n\n    if (!vscodeUrl) {\n      const result = await refetch();\n      vscodeUrl = result.data?.url ?? null;\n    }\n\n    if (vscodeUrl) {\n      window.open(vscodeUrl, \"_blank\", \"noopener,noreferrer\");\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={isLoading || isRuntimeStarting}\n      aria-label={t(I18nKey.VSCODE$OPEN)}\n      title={t(I18nKey.VSCODE$OPEN)}\n      data-testid=\"drawer-vscode-link\"\n      className={cn(\n        \"inline-flex items-center gap-1.5 rounded-[7px] border border-[var(--oh-border)] bg-base-secondary px-2 py-1 text-xs\",\n        \"text-[var(--oh-muted)] transition-colors hover:enabled:bg-surface-raised hover:enabled:text-white\",\n        \"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\",\n      )}\n    >\n      <VSCodeIcon className=\"h-[15px] w-[15px] shrink-0\" aria-hidden />\n      <span>{t(I18nKey.FILES$VSCODE)}</span>\n      <ExternalLink\n        className=\"h-3.5 w-3.5 shrink-0\"\n        aria-hidden\n        strokeWidth={2}\n      />\n    </button>\n  );\n}\n"],"mappings":"qiBASA,SAAgB,GAAmB,CACjC,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAE,iBAAkB,EAAA,cAAc,EAClC,CAAE,OAAM,UAAS,aAAc,EAAA,oBAAoB,EACnD,EAAoB,EAAA,wBAAwB,SAAS,CAAa,EAexE,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,QAAS,SAhBmB,CAC9B,IAAI,EAAY,GAAM,IAEtB,AAEE,KAAY,MADS,EAAQ,GACV,MAAM,KAAO,KAG9B,GACF,OAAO,KAAK,EAAW,SAAU,qBAAqB,CAE1D,EAMI,SAAU,GAAa,EACvB,aAAY,EAAE,EAAA,QAAQ,WAAW,EACjC,MAAO,EAAE,EAAA,QAAQ,WAAW,EAC5B,cAAY,qBACZ,UAAW,EAAA,GACT,sHACA,oGACA,gEACF,WAXF,EAaE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAY,UAAU,6BAA6B,cAAA,EAAa,CAAA,GAChE,EAAA,EAAA,KAAC,OAAD,CAAA,SAAO,EAAE,EAAA,QAAQ,YAAY,CAAQ,CAAA,GACrC,EAAA,EAAA,KAAC,EAAA,aAAD,CACE,UAAU,uBACV,cAAA,GACA,YAAa,CACd,CAAA,CACK,GAEZ"}
+{"version":3,"file":"drawer-vscode-link.cjs","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/drawer-vscode-link.tsx"],"sourcesContent":["import { ExternalLink } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useUnifiedVSCodeUrl } from \"#/hooks/query/use-unified-vscode-url\";\nimport { RUNTIME_STARTING_STATES } from \"#/types/agent-state\";\nimport { cn } from \"#/utils/utils\";\n\nexport function DrawerVSCodeLink() {\n  const { t } = useTranslation(\"openhands\");\n  const { curAgentState } = useAgentState();\n  const { data, refetch, isLoading, isUnavailable } = useUnifiedVSCodeUrl();\n  const isRuntimeStarting = RUNTIME_STARTING_STATES.includes(curAgentState);\n\n  const handleClick = async () => {\n    let vscodeUrl = data?.url;\n\n    if (!vscodeUrl) {\n      const result = await refetch();\n      vscodeUrl = result.data?.url ?? null;\n    }\n\n    if (vscodeUrl) {\n      window.open(vscodeUrl, \"_blank\", \"noopener,noreferrer\");\n    }\n  };\n\n  // Backends that report no editor to open — `enable_vscode: false`, a\n  // configured editor whose process is not running, or no URL reported — get\n  // no button rather than one that does nothing when clicked.\n  if (isUnavailable) {\n    return null;\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={isLoading || isRuntimeStarting}\n      aria-label={t(I18nKey.VSCODE$OPEN)}\n      title={t(I18nKey.VSCODE$OPEN)}\n      data-testid=\"drawer-vscode-link\"\n      className={cn(\n        \"inline-flex items-center gap-1.5 rounded-[7px] border border-[var(--oh-border)] bg-base-secondary px-2 py-1 text-xs\",\n        \"text-[var(--oh-muted)] transition-colors hover:enabled:bg-surface-raised hover:enabled:text-white\",\n        \"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\",\n      )}\n    >\n      <VSCodeIcon className=\"h-[15px] w-[15px] shrink-0\" aria-hidden />\n      <span>{t(I18nKey.FILES$VSCODE)}</span>\n      <ExternalLink\n        className=\"h-3.5 w-3.5 shrink-0\"\n        aria-hidden\n        strokeWidth={2}\n      />\n    </button>\n  );\n}\n"],"mappings":"qiBASA,SAAgB,GAAmB,CACjC,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAE,iBAAkB,EAAA,cAAc,EAClC,CAAE,OAAM,UAAS,YAAW,iBAAkB,EAAA,oBAAoB,EAClE,EAAoB,EAAA,wBAAwB,SAAS,CAAa,EAsBxE,OAJI,EACK,MAIP,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,QAAS,SAvBmB,CAC9B,IAAI,EAAY,GAAM,IAEtB,AAEE,KAAY,MADS,EAAQ,GACV,MAAM,KAAO,KAG9B,GACF,OAAO,KAAK,EAAW,SAAU,qBAAqB,CAE1D,EAaI,SAAU,GAAa,EACvB,aAAY,EAAE,EAAA,QAAQ,WAAW,EACjC,MAAO,EAAE,EAAA,QAAQ,WAAW,EAC5B,cAAY,qBACZ,UAAW,EAAA,GACT,sHACA,oGACA,gEACF,WAXF,EAaE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAY,UAAU,6BAA6B,cAAA,EAAa,CAAA,GAChE,EAAA,EAAA,KAAC,OAAD,CAAA,SAAO,EAAE,EAAA,QAAQ,YAAY,CAAQ,CAAA,GACrC,EAAA,EAAA,KAAC,EAAA,aAAD,CACE,UAAU,uBACV,cAAA,GACA,YAAa,CACd,CAAA,CACK,GAEZ"}

package/dist/components/features/conversation/conversation-tabs/drawer-vscode-link.d.ts

@@ -1 +1 @@
-export declare function DrawerVSCodeLink(): import("react").JSX.Element;
+export declare function DrawerVSCodeLink(): import("react").JSX.Element | null;

package/dist/components/features/conversation/conversation-tabs/drawer-vscode-link.js

@@ -9,14 +9,14 @@ import { useUnifiedVSCodeUrl as s } from "../../../../hooks/query/use-unified-vs
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/features/conversation/conversation-tabs/drawer-vscode-link.tsx
 function u() {
-	let { t: u } = e("openhands"), { curAgentState: d } = a(), { data: f, refetch: p, isLoading: m } = s(), h = r.includes(d);
-	return /* @__PURE__ */ l("button", {
+	let { t: u } = e("openhands"), { curAgentState: d } = a(), { data: f, refetch: p, isLoading: m, isUnavailable: h } = s(), g = r.includes(d);
+	return h ? null : /* @__PURE__ */ l("button", {
 		type: "button",
 		onClick: async () => {
 			let e = f?.url;
 			e ||= (await p()).data?.url ?? null, e && window.open(e, "_blank", "noopener,noreferrer");
 		},
-		disabled: m || h,
+		disabled: m || g,
 		"aria-label": u(t.VSCODE$OPEN),
 		title: u(t.VSCODE$OPEN),
 		"data-testid": "drawer-vscode-link",

package/dist/components/features/conversation/conversation-tabs/drawer-vscode-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-vscode-link.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/drawer-vscode-link.tsx"],"sourcesContent":["import { ExternalLink } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useUnifiedVSCodeUrl } from \"#/hooks/query/use-unified-vscode-url\";\nimport { RUNTIME_STARTING_STATES } from \"#/types/agent-state\";\nimport { cn } from \"#/utils/utils\";\n\nexport function DrawerVSCodeLink() {\n  const { t } = useTranslation(\"openhands\");\n  const { curAgentState } = useAgentState();\n  const { data, refetch, isLoading } = useUnifiedVSCodeUrl();\n  const isRuntimeStarting = RUNTIME_STARTING_STATES.includes(curAgentState);\n\n  const handleClick = async () => {\n    let vscodeUrl = data?.url;\n\n    if (!vscodeUrl) {\n      const result = await refetch();\n      vscodeUrl = result.data?.url ?? null;\n    }\n\n    if (vscodeUrl) {\n      window.open(vscodeUrl, \"_blank\", \"noopener,noreferrer\");\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={isLoading || isRuntimeStarting}\n      aria-label={t(I18nKey.VSCODE$OPEN)}\n      title={t(I18nKey.VSCODE$OPEN)}\n      data-testid=\"drawer-vscode-link\"\n      className={cn(\n        \"inline-flex items-center gap-1.5 rounded-[7px] border border-[var(--oh-border)] bg-base-secondary px-2 py-1 text-xs\",\n        \"text-[var(--oh-muted)] transition-colors hover:enabled:bg-surface-raised hover:enabled:text-white\",\n        \"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\",\n      )}\n    >\n      <VSCodeIcon className=\"h-[15px] w-[15px] shrink-0\" aria-hidden />\n      <span>{t(I18nKey.FILES$VSCODE)}</span>\n      <ExternalLink\n        className=\"h-3.5 w-3.5 shrink-0\"\n        aria-hidden\n        strokeWidth={2}\n      />\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,IAAmB;CACjC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,qBAAkB,EAAc,GAClC,EAAE,SAAM,YAAS,iBAAc,EAAoB,GACnD,IAAoB,EAAwB,SAAS,CAAa;CAexE,OACE,kBAAC,UAAD;EACE,MAAK;EACL,SAAS,YAhBmB;GAC9B,IAAI,IAAY,GAAM;GAOtB,AALA,AAEE,OAAY,MADS,EAAQ,GACV,MAAM,OAAO,MAG9B,KACF,OAAO,KAAK,GAAW,UAAU,qBAAqB;EAE1D;EAMI,UAAU,KAAa;EACvB,cAAY,EAAE,EAAQ,WAAW;EACjC,OAAO,EAAE,EAAQ,WAAW;EAC5B,eAAY;EACZ,WAAW,EACT,uHACA,qGACA,gEACF;YAXF;GAaE,kBAAC,GAAD;IAAY,WAAU;IAA6B,eAAA;GAAa,CAAA;GAChE,kBAAC,QAAD,EAAA,UAAO,EAAE,EAAQ,YAAY,EAAQ,CAAA;GACrC,kBAAC,GAAD;IACE,WAAU;IACV,eAAA;IACA,aAAa;GACd,CAAA;EACK;;AAEZ"}
+{"version":3,"file":"drawer-vscode-link.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/drawer-vscode-link.tsx"],"sourcesContent":["import { ExternalLink } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport VSCodeIcon from \"#/icons/vscode.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { useUnifiedVSCodeUrl } from \"#/hooks/query/use-unified-vscode-url\";\nimport { RUNTIME_STARTING_STATES } from \"#/types/agent-state\";\nimport { cn } from \"#/utils/utils\";\n\nexport function DrawerVSCodeLink() {\n  const { t } = useTranslation(\"openhands\");\n  const { curAgentState } = useAgentState();\n  const { data, refetch, isLoading, isUnavailable } = useUnifiedVSCodeUrl();\n  const isRuntimeStarting = RUNTIME_STARTING_STATES.includes(curAgentState);\n\n  const handleClick = async () => {\n    let vscodeUrl = data?.url;\n\n    if (!vscodeUrl) {\n      const result = await refetch();\n      vscodeUrl = result.data?.url ?? null;\n    }\n\n    if (vscodeUrl) {\n      window.open(vscodeUrl, \"_blank\", \"noopener,noreferrer\");\n    }\n  };\n\n  // Backends that report no editor to open — `enable_vscode: false`, a\n  // configured editor whose process is not running, or no URL reported — get\n  // no button rather than one that does nothing when clicked.\n  if (isUnavailable) {\n    return null;\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={isLoading || isRuntimeStarting}\n      aria-label={t(I18nKey.VSCODE$OPEN)}\n      title={t(I18nKey.VSCODE$OPEN)}\n      data-testid=\"drawer-vscode-link\"\n      className={cn(\n        \"inline-flex items-center gap-1.5 rounded-[7px] border border-[var(--oh-border)] bg-base-secondary px-2 py-1 text-xs\",\n        \"text-[var(--oh-muted)] transition-colors hover:enabled:bg-surface-raised hover:enabled:text-white\",\n        \"cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\",\n      )}\n    >\n      <VSCodeIcon className=\"h-[15px] w-[15px] shrink-0\" aria-hidden />\n      <span>{t(I18nKey.FILES$VSCODE)}</span>\n      <ExternalLink\n        className=\"h-3.5 w-3.5 shrink-0\"\n        aria-hidden\n        strokeWidth={2}\n      />\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,IAAmB;CACjC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,qBAAkB,EAAc,GAClC,EAAE,SAAM,YAAS,cAAW,qBAAkB,EAAoB,GAClE,IAAoB,EAAwB,SAAS,CAAa;CAsBxE,OAJI,IACK,OAIP,kBAAC,UAAD;EACE,MAAK;EACL,SAAS,YAvBmB;GAC9B,IAAI,IAAY,GAAM;GAOtB,AALA,AAEE,OAAY,MADS,EAAQ,GACV,MAAM,OAAO,MAG9B,KACF,OAAO,KAAK,GAAW,UAAU,qBAAqB;EAE1D;EAaI,UAAU,KAAa;EACvB,cAAY,EAAE,EAAQ,WAAW;EACjC,OAAO,EAAE,EAAQ,WAAW;EAC5B,eAAY;EACZ,WAAW,EACT,uHACA,qGACA,gEACF;YAXF;GAaE,kBAAC,GAAD;IAAY,WAAU;IAA6B,eAAA;GAAa,CAAA;GAChE,kBAAC,QAAD,EAAA,UAAO,EAAE,EAAQ,YAAY,EAAQ,CAAA;GACrC,kBAAC,GAAD;IACE,WAAU;IACV,eAAA;IACA,aAAa;GACd,CAAA;EACK;;AAEZ"}

package/dist/components/features/conversation/right-panel-toggle.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("../../../utils/utils.cjs"),r=require("../../../hooks/use-conversation-id.cjs"),i=require("../../../stores/conversation-store.cjs"),a=require("../../../hooks/use-is-archived-conversation.cjs"),o=require("../../../hooks/use-breakpoint.cjs"),s=require("../../../utils/mobile-top-bar-icon-button-classes.cjs"),c=require("../../../icons/block-drawer-left.cjs"),l=require("../chat/chat-action-tooltip.cjs");let u=require("react/jsx-runtime"),d=require("react-router");function f({className:f}){let{t:p}=e.useTranslation(`openhands`),m=o.useBreakpoint(),h=a.useIsArchivedConversation(),g=(0,d.useNavigate)(),{conversationId:_}=r.useConversationId(),{isRightPanelShown:v,setHasRightPanelToggled:y,setIsRightPanelShown:b,setSelectedTab:x}=i.useConversationStore(),S=()=>{if(h)return;if(m){if(!_)return;y(!0),b(!0);let{selectedTab:e}=i.useConversationStore.getState();e||x(`files`),g(`/conversations/${_}/panel`);return}let e=!v;if(y(e),b(e),e){let{selectedTab:e}=i.useConversationStore.getState();e||x(`files`)}},C=p(h?t.I18nKey.CONVERSATION$UNAVAILABLE_FOR_ARCHIVES:m?t.I18nKey.COMMON$SHOW_PANEL:v?t.I18nKey.COMMON$HIDE_PANEL:t.I18nKey.COMMON$SHOW_PANEL),w=m?!1:v;return(0,u.jsx)(l.ChatActionTooltip,{tooltip:C,ariaLabel:C,children:(0,u.jsx)(`button`,{type:`button`,onClick:S,disabled:h,className:n.cn(s.mobileTopBarIconButtonClassName,h&&`cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--oh-muted)]`,f),"aria-label":C,"aria-pressed":w,"aria-disabled":h,"data-testid":`right-panel-toggle`,children:(0,u.jsx)(c.default,{className:`w-5 h-5 -scale-x-100`})})})}exports.RightPanelToggle=f;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../utils/utils.cjs"),r=require("../../../hooks/use-conversation-id.cjs"),i=require("../../../utils/conversation-local-storage.cjs"),a=require("../../../stores/conversation-store.cjs"),o=require("../../../hooks/use-is-archived-conversation.cjs"),s=require("../../../hooks/use-breakpoint.cjs"),c=require("../chat/chat-action-tooltip.cjs"),l=require("../../../utils/mobile-top-bar-icon-button-classes.cjs"),u=require("../../../icons/block-drawer-left.cjs");let d=require("react/jsx-runtime"),f=require("react-router");function p({className:p}){let{t:m}=e.useTranslation(`openhands`),h=s.useBreakpoint(),g=o.useIsArchivedConversation(),_=(0,f.useNavigate)(),{conversationId:v}=r.useConversationId(),{isRightPanelShown:y,setHasRightPanelToggled:b,setIsRightPanelShown:x,setSelectedTab:S}=a.useConversationStore(),C=()=>{if(g)return;if(h){if(!v)return;b(!0),x(!0),i.setConversationState(v,{rightPanelShown:!0});let{selectedTab:e}=a.useConversationStore.getState();e||S(`files`),_(`/conversations/${v}/panel`);return}let e=!y;if(b(e),x(e),v&&i.setConversationState(v,{rightPanelShown:e}),e){let{selectedTab:e}=a.useConversationStore.getState();e||S(`files`)}},w=m(g?t.I18nKey.CONVERSATION$UNAVAILABLE_FOR_ARCHIVES:h?t.I18nKey.COMMON$SHOW_PANEL:y?t.I18nKey.COMMON$HIDE_PANEL:t.I18nKey.COMMON$SHOW_PANEL),T=h?!1:y;return(0,d.jsx)(c.ChatActionTooltip,{tooltip:w,ariaLabel:w,children:(0,d.jsx)(`button`,{type:`button`,onClick:C,disabled:g,className:n.cn(l.mobileTopBarIconButtonClassName,`size-7 self-center`,g&&`cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--oh-muted)]`,p),"aria-label":w,"aria-pressed":T,"aria-disabled":g,"data-testid":`right-panel-toggle`,children:(0,d.jsx)(u.default,{className:`size-5 -scale-x-100`})})})}exports.RightPanelToggle=p;
 //# sourceMappingURL=right-panel-toggle.cjs.map

package/dist/components/features/conversation/right-panel-toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"right-panel-toggle.cjs","names":[],"sources":["../../../../src/components/features/conversation/right-panel-toggle.tsx"],"sourcesContent":["import { useNavigate } from \"react-router\";\nimport { useTranslation } from \"react-i18next\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { mobileTopBarIconButtonClassName } from \"#/utils/mobile-top-bar-icon-button-classes\";\nimport BlockDrawerLeftIcon from \"#/icons/block-drawer-left.svg?react\";\nimport { ChatActionTooltip } from \"../chat/chat-action-tooltip\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\n\ninterface RightPanelToggleProps {\n  className?: string;\n}\n\n/**\n * Toggle button for showing/hiding the right panel.\n *\n * Placed in the chat header so users can always restore the panel,\n * even when it's hidden. The open/closed state lives in the in-memory\n * Zustand store and is intentionally not persisted across full reloads —\n * see the comment in `useConversationStore` for the rationale.\n */\nexport function RightPanelToggle({ className }: RightPanelToggleProps) {\n  const { t } = useTranslation(\"openhands\");\n  const isMobile = useBreakpoint();\n  const isArchivedConversation = useIsArchivedConversation();\n  const navigate = useNavigate();\n  const { conversationId } = useConversationId();\n  const {\n    isRightPanelShown,\n    setHasRightPanelToggled,\n    setIsRightPanelShown,\n    setSelectedTab,\n  } = useConversationStore();\n\n  const handleToggle = () => {\n    if (isArchivedConversation) {\n      return;\n    }\n\n    if (isMobile) {\n      if (!conversationId) return;\n      setHasRightPanelToggled(true);\n      setIsRightPanelShown(true);\n      const { selectedTab } = useConversationStore.getState();\n      if (!selectedTab) {\n        setSelectedTab(\"files\");\n      }\n      navigate(`/conversations/${conversationId}/panel`);\n      return;\n    }\n\n    const newState = !isRightPanelShown;\n    setHasRightPanelToggled(newState);\n    setIsRightPanelShown(newState);\n\n    if (newState) {\n      const { selectedTab } = useConversationStore.getState();\n      if (!selectedTab) {\n        setSelectedTab(\"files\");\n      }\n    }\n  };\n\n  const tooltipText = isArchivedConversation\n    ? t(I18nKey.CONVERSATION$UNAVAILABLE_FOR_ARCHIVES)\n    : isMobile\n      ? t(I18nKey.COMMON$SHOW_PANEL)\n      : isRightPanelShown\n        ? t(I18nKey.COMMON$HIDE_PANEL)\n        : t(I18nKey.COMMON$SHOW_PANEL);\n\n  const ariaPressed = isMobile ? false : isRightPanelShown;\n\n  return (\n    <ChatActionTooltip tooltip={tooltipText} ariaLabel={tooltipText}>\n      <button\n        type=\"button\"\n        onClick={handleToggle}\n        disabled={isArchivedConversation}\n        className={cn(\n          mobileTopBarIconButtonClassName,\n          isArchivedConversation &&\n            \"cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--oh-muted)]\",\n          className,\n        )}\n        aria-label={tooltipText}\n        aria-pressed={ariaPressed}\n        aria-disabled={isArchivedConversation}\n        data-testid=\"right-panel-toggle\"\n      >\n        <BlockDrawerLeftIcon className=\"w-5 h-5 -scale-x-100\" />\n      </button>\n    </ChatActionTooltip>\n  );\n}\n"],"mappings":"yoBAwBA,SAAgB,EAAiB,CAAE,aAAoC,CACrE,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAW,EAAA,cAAc,EACzB,EAAyB,EAAA,0BAA0B,EACnD,GAAA,EAAA,EAAA,aAAuB,EACvB,CAAE,kBAAmB,EAAA,kBAAkB,EACvC,CACJ,oBACA,0BACA,uBACA,kBACE,EAAA,qBAAqB,EAEnB,MAAqB,CACzB,GAAI,EACF,OAGF,GAAI,EAAU,CACZ,GAAI,CAAC,EAAgB,OACrB,EAAwB,EAAI,EAC5B,EAAqB,EAAI,EACzB,GAAM,CAAE,eAAgB,EAAA,qBAAqB,SAAS,EACjD,GACH,EAAe,OAAO,EAExB,EAAS,kBAAkB,EAAe,OAAO,EACjD,MACF,CAEA,IAAM,EAAW,CAAC,EAIlB,GAHA,EAAwB,CAAQ,EAChC,EAAqB,CAAQ,EAEzB,EAAU,CACZ,GAAM,CAAE,eAAgB,EAAA,qBAAqB,SAAS,EACjD,GACH,EAAe,OAAO,CAE1B,CACF,EAEM,EACF,EADgB,EACd,EAAA,QAAQ,sCACV,EACI,EAAA,QAAQ,kBACV,EACI,EAAA,QAAQ,kBACR,EAAA,QAAQ,iBAAiB,EAE7B,EAAc,EAAW,GAAQ,EAEvC,OACE,EAAA,EAAA,KAAC,EAAA,kBAAD,CAAmB,QAAS,EAAa,UAAW,YAClD,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,SAAU,EACV,UAAW,EAAA,GACT,EAAA,gCACA,GACE,kFACF,CACF,EACA,aAAY,EACZ,eAAc,EACd,gBAAe,EACf,cAAY,+BAEZ,EAAA,EAAA,KAAC,EAAA,QAAD,CAAqB,UAAU,sBAAwB,CAAA,CACjD,CAAA,CACS,CAAA,CAEvB"}
+{"version":3,"file":"right-panel-toggle.cjs","names":[],"sources":["../../../../src/components/features/conversation/right-panel-toggle.tsx"],"sourcesContent":["import { useNavigate } from \"react-router\";\nimport { useTranslation } from \"react-i18next\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { setConversationState } from \"#/utils/conversation-local-storage\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { mobileTopBarIconButtonClassName } from \"#/utils/mobile-top-bar-icon-button-classes\";\nimport BlockDrawerLeftIcon from \"#/icons/block-drawer-left.svg?react\";\nimport { ChatActionTooltip } from \"../chat/chat-action-tooltip\";\nimport { useBreakpoint } from \"#/hooks/use-breakpoint\";\nimport { useConversationId } from \"#/hooks/use-conversation-id\";\nimport { useIsArchivedConversation } from \"#/hooks/use-is-archived-conversation\";\n\ninterface RightPanelToggleProps {\n  className?: string;\n}\n\n/**\n * Toggle button for showing/hiding the right panel.\n *\n * Placed in the chat header so users can always restore the panel,\n * even when it's hidden. The open/closed state lives in the in-memory\n * Zustand store; each toggle is also mirrored into the conversation's\n * localStorage blob (`rightPanelShown`) so other drawer surfaces can\n * coordinate with it.\n */\nexport function RightPanelToggle({ className }: RightPanelToggleProps) {\n  const { t } = useTranslation(\"openhands\");\n  const isMobile = useBreakpoint();\n  const isArchivedConversation = useIsArchivedConversation();\n  const navigate = useNavigate();\n  const { conversationId } = useConversationId();\n  const {\n    isRightPanelShown,\n    setHasRightPanelToggled,\n    setIsRightPanelShown,\n    setSelectedTab,\n  } = useConversationStore();\n\n  const handleToggle = () => {\n    if (isArchivedConversation) {\n      return;\n    }\n\n    if (isMobile) {\n      if (!conversationId) return;\n      setHasRightPanelToggled(true);\n      setIsRightPanelShown(true);\n      setConversationState(conversationId, { rightPanelShown: true });\n      const { selectedTab } = useConversationStore.getState();\n      if (!selectedTab) {\n        setSelectedTab(\"files\");\n      }\n      navigate(`/conversations/${conversationId}/panel`);\n      return;\n    }\n\n    const newState = !isRightPanelShown;\n    setHasRightPanelToggled(newState);\n    setIsRightPanelShown(newState);\n    if (conversationId) {\n      setConversationState(conversationId, { rightPanelShown: newState });\n    }\n\n    if (newState) {\n      const { selectedTab } = useConversationStore.getState();\n      if (!selectedTab) {\n        setSelectedTab(\"files\");\n      }\n    }\n  };\n\n  const tooltipText = isArchivedConversation\n    ? t(I18nKey.CONVERSATION$UNAVAILABLE_FOR_ARCHIVES)\n    : isMobile\n      ? t(I18nKey.COMMON$SHOW_PANEL)\n      : isRightPanelShown\n        ? t(I18nKey.COMMON$HIDE_PANEL)\n        : t(I18nKey.COMMON$SHOW_PANEL);\n\n  const ariaPressed = isMobile ? false : isRightPanelShown;\n\n  return (\n    <ChatActionTooltip tooltip={tooltipText} ariaLabel={tooltipText}>\n      <button\n        type=\"button\"\n        onClick={handleToggle}\n        disabled={isArchivedConversation}\n        className={cn(\n          mobileTopBarIconButtonClassName,\n          \"size-7 self-center\",\n          isArchivedConversation &&\n            \"cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--oh-muted)]\",\n          className,\n        )}\n        aria-label={tooltipText}\n        aria-pressed={ariaPressed}\n        aria-disabled={isArchivedConversation}\n        data-testid=\"right-panel-toggle\"\n      >\n        <BlockDrawerLeftIcon className=\"size-5 -scale-x-100\" />\n      </button>\n    </ChatActionTooltip>\n  );\n}\n"],"mappings":"osBA0BA,SAAgB,EAAiB,CAAE,aAAoC,CACrE,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAW,EAAA,cAAc,EACzB,EAAyB,EAAA,0BAA0B,EACnD,GAAA,EAAA,EAAA,aAAuB,EACvB,CAAE,kBAAmB,EAAA,kBAAkB,EACvC,CACJ,oBACA,0BACA,uBACA,kBACE,EAAA,qBAAqB,EAEnB,MAAqB,CACzB,GAAI,EACF,OAGF,GAAI,EAAU,CACZ,GAAI,CAAC,EAAgB,OACrB,EAAwB,EAAI,EAC5B,EAAqB,EAAI,EACzB,EAAA,qBAAqB,EAAgB,CAAE,gBAAiB,EAAK,CAAC,EAC9D,GAAM,CAAE,eAAgB,EAAA,qBAAqB,SAAS,EACjD,GACH,EAAe,OAAO,EAExB,EAAS,kBAAkB,EAAe,OAAO,EACjD,MACF,CAEA,IAAM,EAAW,CAAC,EAOlB,GANA,EAAwB,CAAQ,EAChC,EAAqB,CAAQ,EACzB,GACF,EAAA,qBAAqB,EAAgB,CAAE,gBAAiB,CAAS,CAAC,EAGhE,EAAU,CACZ,GAAM,CAAE,eAAgB,EAAA,qBAAqB,SAAS,EACjD,GACH,EAAe,OAAO,CAE1B,CACF,EAEM,EACF,EADgB,EACd,EAAA,QAAQ,sCACV,EACI,EAAA,QAAQ,kBACV,EACI,EAAA,QAAQ,kBACR,EAAA,QAAQ,iBAAiB,EAE7B,EAAc,EAAW,GAAQ,EAEvC,OACE,EAAA,EAAA,KAAC,EAAA,kBAAD,CAAmB,QAAS,EAAa,UAAW,YAClD,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,SAAU,EACV,UAAW,EAAA,GACT,EAAA,gCACA,qBACA,GACE,kFACF,CACF,EACA,aAAY,EACZ,eAAc,EACd,gBAAe,EACf,cAAY,+BAEZ,EAAA,EAAA,KAAC,EAAA,QAAD,CAAqB,UAAU,qBAAuB,CAAA,CAChD,CAAA,CACS,CAAA,CAEvB"}

package/dist/components/features/conversation/right-panel-toggle.d.ts

@@ -6,8 +6,9 @@ interface RightPanelToggleProps {
  *
  * Placed in the chat header so users can always restore the panel,
  * even when it's hidden. The open/closed state lives in the in-memory
- * Zustand store and is intentionally not persisted across full reloads —
- * see the comment in `useConversationStore` for the rationale.
+ * Zustand store; each toggle is also mirrored into the conversation's
+ * localStorage blob (`rightPanelShown`) so other drawer surfaces can
+ * coordinate with it.
  */
 export declare function RightPanelToggle({ className }: RightPanelToggleProps): import("react").JSX.Element;
 export {};

package/dist/components/features/conversation/right-panel-toggle.js

@@ -2,48 +2,49 @@ import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es
 import { I18nKey as t } from "../../../i18n/declaration.js";
 import { cn as n } from "../../../utils/utils.js";
 import { useConversationId as r } from "../../../hooks/use-conversation-id.js";
-import { useConversationStore as i } from "../../../stores/conversation-store.js";
-import { useIsArchivedConversation as a } from "../../../hooks/use-is-archived-conversation.js";
-import { useBreakpoint as o } from "../../../hooks/use-breakpoint.js";
-import { mobileTopBarIconButtonClassName as s } from "../../../utils/mobile-top-bar-icon-button-classes.js";
-import c from "../../../icons/block-drawer-left.js";
-import { ChatActionTooltip as l } from "../chat/chat-action-tooltip.js";
-import { jsx as u } from "react/jsx-runtime";
-import { useNavigate as d } from "react-router";
+import { setConversationState as i } from "../../../utils/conversation-local-storage.js";
+import { useConversationStore as a } from "../../../stores/conversation-store.js";
+import { useIsArchivedConversation as o } from "../../../hooks/use-is-archived-conversation.js";
+import { useBreakpoint as s } from "../../../hooks/use-breakpoint.js";
+import { ChatActionTooltip as c } from "../chat/chat-action-tooltip.js";
+import { mobileTopBarIconButtonClassName as l } from "../../../utils/mobile-top-bar-icon-button-classes.js";
+import u from "../../../icons/block-drawer-left.js";
+import { jsx as d } from "react/jsx-runtime";
+import { useNavigate as f } from "react-router";
 //#region src/components/features/conversation/right-panel-toggle.tsx
-function f({ className: f }) {
-	let { t: p } = e("openhands"), m = o(), h = a(), g = d(), { conversationId: _ } = r(), { isRightPanelShown: v, setHasRightPanelToggled: y, setIsRightPanelShown: b, setSelectedTab: x } = i(), S = () => {
-		if (h) return;
-		if (m) {
-			if (!_) return;
-			y(!0), b(!0);
-			let { selectedTab: e } = i.getState();
-			e || x("files"), g(`/conversations/${_}/panel`);
+function p({ className: p }) {
+	let { t: m } = e("openhands"), h = s(), g = o(), _ = f(), { conversationId: v } = r(), { isRightPanelShown: y, setHasRightPanelToggled: b, setIsRightPanelShown: x, setSelectedTab: S } = a(), C = () => {
+		if (g) return;
+		if (h) {
+			if (!v) return;
+			b(!0), x(!0), i(v, { rightPanelShown: !0 });
+			let { selectedTab: e } = a.getState();
+			e || S("files"), _(`/conversations/${v}/panel`);
 			return;
 		}
-		let e = !v;
-		if (y(e), b(e), e) {
-			let { selectedTab: e } = i.getState();
-			e || x("files");
+		let e = !y;
+		if (b(e), x(e), v && i(v, { rightPanelShown: e }), e) {
+			let { selectedTab: e } = a.getState();
+			e || S("files");
 		}
-	}, C = p(h ? t.CONVERSATION$UNAVAILABLE_FOR_ARCHIVES : m ? t.COMMON$SHOW_PANEL : v ? t.COMMON$HIDE_PANEL : t.COMMON$SHOW_PANEL), w = m ? !1 : v;
-	return /* @__PURE__ */ u(l, {
-		tooltip: C,
-		ariaLabel: C,
-		children: /* @__PURE__ */ u("button", {
+	}, w = m(g ? t.CONVERSATION$UNAVAILABLE_FOR_ARCHIVES : h ? t.COMMON$SHOW_PANEL : y ? t.COMMON$HIDE_PANEL : t.COMMON$SHOW_PANEL), T = h ? !1 : y;
+	return /* @__PURE__ */ d(c, {
+		tooltip: w,
+		ariaLabel: w,
+		children: /* @__PURE__ */ d("button", {
 			type: "button",
-			onClick: S,
-			disabled: h,
-			className: n(s, h && "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--oh-muted)]", f),
-			"aria-label": C,
-			"aria-pressed": w,
-			"aria-disabled": h,
+			onClick: C,
+			disabled: g,
+			className: n(l, "size-7 self-center", g && "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--oh-muted)]", p),
+			"aria-label": w,
+			"aria-pressed": T,
+			"aria-disabled": g,
 			"data-testid": "right-panel-toggle",
-			children: /* @__PURE__ */ u(c, { className: "w-5 h-5 -scale-x-100" })
+			children: /* @__PURE__ */ d(u, { className: "size-5 -scale-x-100" })
 		})
 	});
 }
 //#endregion
-export { f as RightPanelToggle };
+export { p as RightPanelToggle };
 
 //# sourceMappingURL=right-panel-toggle.js.map