@openhands/agent-canvas 1.12.0 → 1.13.0

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

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

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 { 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":"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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 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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"}

package/dist/components/features/conversation/metrics-modal/cost-section.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("../../conversation-panel/budget-display.cjs");let r=require("react/jsx-runtime");function i({cost:i,maxBudgetPerTask:a}){let{t:o}=e.useTranslation(`openhands`);return i===null?null:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(`div`,{className:`flex justify-between items-center pb-2`,children:[(0,r.jsx)(`span`,{className:`text-lg font-semibold`,children:o(t.I18nKey.CONVERSATION$TOTAL_COST)}),(0,r.jsxs)(`span`,{className:`font-semibold`,children:[`$`,i.toFixed(4)]})]}),(0,r.jsx)(n.BudgetDisplay,{cost:i,maxBudgetPerTask:a})]})}exports.CostSection=i;
+require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../../i18n/declaration.cjs"),n=require("../../conversation-panel/budget-display.cjs");let r=require("react/jsx-runtime");function i({cost:i,maxBudgetPerTask:a}){let{t:o}=e.useTranslation(`openhands`);return i===null?null:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.BudgetDisplay,{cost:i,maxBudgetPerTask:a}),(0,r.jsxs)(`div`,{className:`flex justify-between items-center border-t border-[var(--oh-border-subtle)] pt-2`,children:[(0,r.jsx)(`span`,{className:`font-semibold`,children:o(t.I18nKey.CONVERSATION$TOTAL_COST)}),(0,r.jsxs)(`span`,{className:`font-semibold`,children:[`$`,i.toFixed(4)]})]})]})}exports.CostSection=i;
 //# sourceMappingURL=cost-section.cjs.map

package/dist/components/features/conversation/metrics-modal/cost-section.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"cost-section.cjs","names":[],"sources":["../../../../../src/components/features/conversation/metrics-modal/cost-section.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { BudgetDisplay } from \"../../conversation-panel/budget-display\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface CostSectionProps {\n  cost: number | null;\n  maxBudgetPerTask: number | null;\n}\n\nexport function CostSection({ cost, maxBudgetPerTask }: CostSectionProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (cost === null) {\n    return null;\n  }\n\n  return (\n    <>\n      <div className=\"flex justify-between items-center pb-2\">\n        <span className=\"text-lg font-semibold\">\n          {t(I18nKey.CONVERSATION$TOTAL_COST)}\n        </span>\n        <span className=\"font-semibold\">${cost.toFixed(4)}</span>\n      </div>\n      <BudgetDisplay cost={cost} maxBudgetPerTask={maxBudgetPerTask} />\n    </>\n  );\n}\n"],"mappings":"qRASA,SAAgB,EAAY,CAAE,OAAM,oBAAsC,CACxE,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAMxC,OAJI,IAAS,KACJ,MAIP,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kDAAf,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,iCACb,EAAE,EAAA,QAAQ,uBAAuB,CAC9B,CAAA,GACN,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,yBAAhB,CAAgC,IAAE,EAAK,QAAQ,CAAC,CAAQ,GACrD,KACL,EAAA,EAAA,KAAC,EAAA,cAAD,CAAqB,OAAwB,kBAAmB,CAAA,CAChE,CAAA,CAAA,CAEN"}
+{"version":3,"file":"cost-section.cjs","names":[],"sources":["../../../../../src/components/features/conversation/metrics-modal/cost-section.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { BudgetDisplay } from \"../../conversation-panel/budget-display\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface CostSectionProps {\n  cost: number | null;\n  maxBudgetPerTask: number | null;\n}\n\nexport function CostSection({ cost, maxBudgetPerTask }: CostSectionProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (cost === null) {\n    return null;\n  }\n\n  return (\n    <>\n      <BudgetDisplay cost={cost} maxBudgetPerTask={maxBudgetPerTask} />\n      <div className=\"flex justify-between items-center border-t border-[var(--oh-border-subtle)] pt-2\">\n        <span className=\"font-semibold\">\n          {t(I18nKey.CONVERSATION$TOTAL_COST)}\n        </span>\n        <span className=\"font-semibold\">${cost.toFixed(4)}</span>\n      </div>\n    </>\n  );\n}\n"],"mappings":"qRASA,SAAgB,EAAY,CAAE,OAAM,oBAAsC,CACxE,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAMxC,OAJI,IAAS,KACJ,MAIP,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAAqB,OAAwB,kBAAmB,CAAA,GAChE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,4FAAf,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,yBACb,EAAE,EAAA,QAAQ,uBAAuB,CAC9B,CAAA,GACN,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,yBAAhB,CAAgC,IAAE,EAAK,QAAQ,CAAC,CAAQ,GACrD,GACL,CAAA,CAAA,CAEN"}

package/dist/components/features/conversation/metrics-modal/cost-section.js

@@ -5,18 +5,18 @@ import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/features/conversation/metrics-modal/cost-section.tsx
 function o({ cost: o, maxBudgetPerTask: s }) {
 	let { t: c } = e("openhands");
-	return o === null ? null : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("div", {
-		className: "flex justify-between items-center pb-2",
+	return o === null ? null : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(n, {
+		cost: o,
+		maxBudgetPerTask: s
+	}), /* @__PURE__ */ a("div", {
+		className: "flex justify-between items-center border-t border-[var(--oh-border-subtle)] pt-2",
 		children: [/* @__PURE__ */ i("span", {
-			className: "text-lg font-semibold",
+			className: "font-semibold",
 			children: c(t.CONVERSATION$TOTAL_COST)
 		}), /* @__PURE__ */ a("span", {
 			className: "font-semibold",
 			children: ["$", o.toFixed(4)]
 		})]
-	}), /* @__PURE__ */ i(n, {
-		cost: o,
-		maxBudgetPerTask: s
 	})] });
 }
 //#endregion

package/dist/components/features/conversation/metrics-modal/cost-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"cost-section.js","names":[],"sources":["../../../../../src/components/features/conversation/metrics-modal/cost-section.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { BudgetDisplay } from \"../../conversation-panel/budget-display\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface CostSectionProps {\n  cost: number | null;\n  maxBudgetPerTask: number | null;\n}\n\nexport function CostSection({ cost, maxBudgetPerTask }: CostSectionProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (cost === null) {\n    return null;\n  }\n\n  return (\n    <>\n      <div className=\"flex justify-between items-center pb-2\">\n        <span className=\"text-lg font-semibold\">\n          {t(I18nKey.CONVERSATION$TOTAL_COST)}\n        </span>\n        <span className=\"font-semibold\">${cost.toFixed(4)}</span>\n      </div>\n      <BudgetDisplay cost={cost} maxBudgetPerTask={maxBudgetPerTask} />\n    </>\n  );\n}\n"],"mappings":";;;;;AASA,SAAgB,EAAY,EAAE,SAAM,uBAAsC;CACxE,IAAM,EAAE,SAAM,EAAe,WAAW;CAMxC,OAJI,MAAS,OACJ,OAIP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,QAAD;GAAM,WAAU;aACb,EAAE,EAAQ,uBAAuB;EAC9B,CAAA,GACN,kBAAC,QAAD;GAAM,WAAU;aAAhB,CAAgC,KAAE,EAAK,QAAQ,CAAC,CAAQ;IACrD;KACL,kBAAC,GAAD;EAAqB;EAAwB;CAAmB,CAAA,CAChE,EAAA,CAAA;AAEN"}
+{"version":3,"file":"cost-section.js","names":[],"sources":["../../../../../src/components/features/conversation/metrics-modal/cost-section.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { BudgetDisplay } from \"../../conversation-panel/budget-display\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface CostSectionProps {\n  cost: number | null;\n  maxBudgetPerTask: number | null;\n}\n\nexport function CostSection({ cost, maxBudgetPerTask }: CostSectionProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (cost === null) {\n    return null;\n  }\n\n  return (\n    <>\n      <BudgetDisplay cost={cost} maxBudgetPerTask={maxBudgetPerTask} />\n      <div className=\"flex justify-between items-center border-t border-[var(--oh-border-subtle)] pt-2\">\n        <span className=\"font-semibold\">\n          {t(I18nKey.CONVERSATION$TOTAL_COST)}\n        </span>\n        <span className=\"font-semibold\">${cost.toFixed(4)}</span>\n      </div>\n    </>\n  );\n}\n"],"mappings":";;;;;AASA,SAAgB,EAAY,EAAE,SAAM,uBAAsC;CACxE,IAAM,EAAE,SAAM,EAAe,WAAW;CAMxC,OAJI,MAAS,OACJ,OAIP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAqB;EAAwB;CAAmB,CAAA,GAChE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,QAAD;GAAM,WAAU;aACb,EAAE,EAAQ,uBAAuB;EAC9B,CAAA,GACN,kBAAC,QAAD;GAAM,WAAU;aAAhB,CAAgC,KAAE,EAAK,QAAQ,CAAC,CAAQ;IACrD;GACL,EAAA,CAAA;AAEN"}

package/dist/components/features/conversation/metrics-modal/metric-row.cjs

@@ -1,2 +1,2 @@
-require("../../../../_virtual/_rolldown/runtime.cjs");let e=require("react/jsx-runtime");function t({label:t,value:n,labelClassName:r=``,valueClassName:i=`font-semibold`}){return(0,e.jsxs)(`div`,{className:`flex justify-between items-center border-b border-[var(--oh-border-subtle)] pb-2`,children:[(0,e.jsx)(`span`,{className:r,children:t}),(0,e.jsx)(`span`,{className:i,children:n})]})}exports.MetricRow=t;
+require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../utils/utils.cjs");let t=require("react/jsx-runtime");function n({label:n,value:r,labelClassName:i=``,valueClassName:a=`font-semibold`,showBorder:o=!0}){return(0,t.jsxs)(`div`,{className:e.cn(`flex justify-between items-center pb-2`,o&&`border-b border-[var(--oh-border-subtle)]`),children:[(0,t.jsx)(`span`,{className:i,children:n}),(0,t.jsx)(`span`,{className:a,children:r})]})}exports.MetricRow=n;
 //# sourceMappingURL=metric-row.cjs.map

package/dist/components/features/conversation/metrics-modal/metric-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"metric-row.cjs","names":[],"sources":["../../../../../src/components/features/conversation/metrics-modal/metric-row.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\n\ninterface MetricRowProps {\n  label: ReactNode;\n  value: ReactNode;\n  labelClassName?: string;\n  valueClassName?: string;\n}\n\nexport function MetricRow({\n  label,\n  value,\n  labelClassName = \"\",\n  valueClassName = \"font-semibold\",\n}: MetricRowProps) {\n  return (\n    <div className=\"flex justify-between items-center border-b border-[var(--oh-border-subtle)] pb-2\">\n      <span className={labelClassName}>{label}</span>\n      <span className={valueClassName}>{value}</span>\n    </div>\n  );\n}\n"],"mappings":"yFASA,SAAgB,EAAU,CACxB,QACA,QACA,iBAAiB,GACjB,iBAAiB,iBACA,CACjB,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,4FAAf,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,WAAiB,CAAY,CAAA,GAC9C,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,WAAiB,CAAY,CAAA,CAC3C,GAET"}
+{"version":3,"file":"metric-row.cjs","names":[],"sources":["../../../../../src/components/features/conversation/metrics-modal/metric-row.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface MetricRowProps {\n  label: ReactNode;\n  value: ReactNode;\n  labelClassName?: string;\n  valueClassName?: string;\n  showBorder?: boolean;\n}\n\nexport function MetricRow({\n  label,\n  value,\n  labelClassName = \"\",\n  valueClassName = \"font-semibold\",\n  showBorder = true,\n}: MetricRowProps) {\n  return (\n    <div\n      className={cn(\n        \"flex justify-between items-center pb-2\",\n        showBorder && \"border-b border-[var(--oh-border-subtle)]\",\n      )}\n    >\n      <span className={labelClassName}>{label}</span>\n      <span className={valueClassName}>{value}</span>\n    </div>\n  );\n}\n"],"mappings":"wIAWA,SAAgB,EAAU,CACxB,QACA,QACA,iBAAiB,GACjB,iBAAiB,gBACjB,aAAa,IACI,CACjB,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,yCACA,GAAc,2CAChB,WAJF,EAME,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,WAAiB,CAAY,CAAA,GAC9C,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,WAAiB,CAAY,CAAA,CAC3C,GAET"}

package/dist/components/features/conversation/metrics-modal/metric-row.d.ts

@@ -4,6 +4,7 @@ interface MetricRowProps {
     value: ReactNode;
     labelClassName?: string;
     valueClassName?: string;
+    showBorder?: boolean;
 }
-export declare function MetricRow({ label, value, labelClassName, valueClassName, }: MetricRowProps): import("react").JSX.Element;
+export declare function MetricRow({ label, value, labelClassName, valueClassName, showBorder, }: MetricRowProps): import("react").JSX.Element;
 export {};

package/dist/components/features/conversation/metrics-modal/metric-row.js

@@ -1,18 +1,19 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { cn as e } from "../../../../utils/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/features/conversation/metrics-modal/metric-row.tsx
-function n({ label: n, value: r, labelClassName: i = "", valueClassName: a = "font-semibold" }) {
-	return /* @__PURE__ */ t("div", {
-		className: "flex justify-between items-center border-b border-[var(--oh-border-subtle)] pb-2",
-		children: [/* @__PURE__ */ e("span", {
-			className: i,
-			children: n
-		}), /* @__PURE__ */ e("span", {
+function r({ label: r, value: i, labelClassName: a = "", valueClassName: o = "font-semibold", showBorder: s = !0 }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("flex justify-between items-center pb-2", s && "border-b border-[var(--oh-border-subtle)]"),
+		children: [/* @__PURE__ */ t("span", {
 			className: a,
 			children: r
+		}), /* @__PURE__ */ t("span", {
+			className: o,
+			children: i
 		})]
 	});
 }
 //#endregion
-export { n as MetricRow };
+export { r as MetricRow };
 
 //# sourceMappingURL=metric-row.js.map

package/dist/components/features/conversation/metrics-modal/metric-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"metric-row.js","names":[],"sources":["../../../../../src/components/features/conversation/metrics-modal/metric-row.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\n\ninterface MetricRowProps {\n  label: ReactNode;\n  value: ReactNode;\n  labelClassName?: string;\n  valueClassName?: string;\n}\n\nexport function MetricRow({\n  label,\n  value,\n  labelClassName = \"\",\n  valueClassName = \"font-semibold\",\n}: MetricRowProps) {\n  return (\n    <div className=\"flex justify-between items-center border-b border-[var(--oh-border-subtle)] pb-2\">\n      <span className={labelClassName}>{label}</span>\n      <span className={valueClassName}>{value}</span>\n    </div>\n  );\n}\n"],"mappings":";;AASA,SAAgB,EAAU,EACxB,UACA,UACA,oBAAiB,IACjB,oBAAiB,mBACA;CACjB,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,QAAD;GAAM,WAAW;aAAiB;EAAY,CAAA,GAC9C,kBAAC,QAAD;GAAM,WAAW;aAAiB;EAAY,CAAA,CAC3C;;AAET"}
+{"version":3,"file":"metric-row.js","names":[],"sources":["../../../../../src/components/features/conversation/metrics-modal/metric-row.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface MetricRowProps {\n  label: ReactNode;\n  value: ReactNode;\n  labelClassName?: string;\n  valueClassName?: string;\n  showBorder?: boolean;\n}\n\nexport function MetricRow({\n  label,\n  value,\n  labelClassName = \"\",\n  valueClassName = \"font-semibold\",\n  showBorder = true,\n}: MetricRowProps) {\n  return (\n    <div\n      className={cn(\n        \"flex justify-between items-center pb-2\",\n        showBorder && \"border-b border-[var(--oh-border-subtle)]\",\n      )}\n    >\n      <span className={labelClassName}>{label}</span>\n      <span className={valueClassName}>{value}</span>\n    </div>\n  );\n}\n"],"mappings":";;;AAWA,SAAgB,EAAU,EACxB,UACA,UACA,oBAAiB,IACjB,oBAAiB,iBACjB,gBAAa,MACI;CACjB,OACE,kBAAC,OAAD;EACE,WAAW,EACT,0CACA,KAAc,2CAChB;YAJF,CAME,kBAAC,QAAD;GAAM,WAAW;aAAiB;EAAY,CAAA,GAC9C,kBAAC,QAAD;GAAM,WAAW;aAAiB;EAAY,CAAA,CAC3C;;AAET"}

package/dist/components/features/conversation/metrics-modal/usage-section.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("./metric-row.cjs");let r=require("react/jsx-runtime");function i({usage:i}){let{t:a}=e.useTranslation(`openhands`);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.MetricRow,{label:a(t.I18nKey.CONVERSATION$INPUT),value:i.prompt_tokens.toLocaleString()}),(0,r.jsxs)(`div`,{className:`grid grid-cols-2 gap-2 pl-4 text-sm`,children:[(0,r.jsx)(`span`,{className:`text-[var(--oh-muted)]`,children:a(t.I18nKey.CONVERSATION$CACHE_HIT)}),(0,r.jsx)(`span`,{className:`text-right`,children:i.cache_read_tokens.toLocaleString()}),(0,r.jsx)(`span`,{className:`text-[var(--oh-muted)]`,children:a(t.I18nKey.CONVERSATION$CACHE_WRITE)}),(0,r.jsx)(`span`,{className:`text-right`,children:i.cache_write_tokens.toLocaleString()})]}),(0,r.jsx)(n.MetricRow,{label:a(t.I18nKey.CONVERSATION$OUTPUT),value:i.completion_tokens.toLocaleString()}),(0,r.jsx)(n.MetricRow,{label:a(t.I18nKey.CONVERSATION$TOTAL),value:(i.prompt_tokens+i.completion_tokens).toLocaleString(),labelClassName:`font-semibold`,valueClassName:`font-bold`})]})}exports.UsageSection=i;
+require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../../i18n/declaration.cjs"),n=require("./metric-row.cjs");let r=require("react/jsx-runtime");function i({usage:i}){let{t:a}=e.useTranslation(`openhands`);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.MetricRow,{label:a(t.I18nKey.CONVERSATION$INPUT),value:i.prompt_tokens.toLocaleString()}),(0,r.jsxs)(`div`,{className:`grid grid-cols-2 gap-2 pl-4 text-sm`,children:[(0,r.jsx)(`span`,{className:`text-[var(--oh-muted)]`,children:a(t.I18nKey.CONVERSATION$CACHE_HIT)}),(0,r.jsx)(`span`,{className:`text-right`,children:i.cache_read_tokens.toLocaleString()}),(0,r.jsx)(`span`,{className:`text-[var(--oh-muted)]`,children:a(t.I18nKey.CONVERSATION$CACHE_WRITE)}),(0,r.jsx)(`span`,{className:`text-right`,children:i.cache_write_tokens.toLocaleString()})]}),(0,r.jsx)(n.MetricRow,{label:a(t.I18nKey.CONVERSATION$OUTPUT),value:i.completion_tokens.toLocaleString()}),(0,r.jsx)(n.MetricRow,{label:a(t.I18nKey.CONVERSATION$TOTAL),value:(i.prompt_tokens+i.completion_tokens).toLocaleString(),labelClassName:`font-semibold`,valueClassName:`font-bold`,showBorder:!1})]})}exports.UsageSection=i;
 //# sourceMappingURL=usage-section.cjs.map

package/dist/components/features/conversation/metrics-modal/usage-section.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"usage-section.cjs","names":[],"sources":["../../../../../src/components/features/conversation/metrics-modal/usage-section.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { MetricRow } from \"./metric-row\";\n\ninterface UsageSectionProps {\n  usage: {\n    prompt_tokens: number;\n    completion_tokens: number;\n    cache_read_tokens: number;\n    cache_write_tokens: number;\n  };\n}\n\nexport function UsageSection({ usage }: UsageSectionProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <>\n      <MetricRow\n        label={t(I18nKey.CONVERSATION$INPUT)}\n        value={usage.prompt_tokens.toLocaleString()}\n      />\n\n      <div className=\"grid grid-cols-2 gap-2 pl-4 text-sm\">\n        <span className=\"text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$CACHE_HIT)}\n        </span>\n        <span className=\"text-right\">\n          {usage.cache_read_tokens.toLocaleString()}\n        </span>\n        <span className=\"text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$CACHE_WRITE)}\n        </span>\n        <span className=\"text-right\">\n          {usage.cache_write_tokens.toLocaleString()}\n        </span>\n      </div>\n\n      <MetricRow\n        label={t(I18nKey.CONVERSATION$OUTPUT)}\n        value={usage.completion_tokens.toLocaleString()}\n      />\n\n      <MetricRow\n        label={t(I18nKey.CONVERSATION$TOTAL)}\n        value={(usage.prompt_tokens + usage.completion_tokens).toLocaleString()}\n        labelClassName=\"font-semibold\"\n        valueClassName=\"font-bold\"\n      />\n    </>\n  );\n}\n"],"mappings":"0PAaA,SAAgB,EAAa,CAAE,SAA4B,CACzD,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAExC,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,MAAO,EAAE,EAAA,QAAQ,kBAAkB,EACnC,MAAO,EAAM,cAAc,eAAe,CAC3C,CAAA,GAED,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+CAAf,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,kCACb,EAAE,EAAA,QAAQ,sBAAsB,CAC7B,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sBACb,EAAM,kBAAkB,eAAe,CACpC,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,kCACb,EAAE,EAAA,QAAQ,wBAAwB,CAC/B,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sBACb,EAAM,mBAAmB,eAAe,CACrC,CAAA,CACH,KAEL,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,MAAO,EAAE,EAAA,QAAQ,mBAAmB,EACpC,MAAO,EAAM,kBAAkB,eAAe,CAC/C,CAAA,GAED,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,MAAO,EAAE,EAAA,QAAQ,kBAAkB,EACnC,OAAQ,EAAM,cAAgB,EAAM,mBAAmB,eAAe,EACtE,eAAe,gBACf,eAAe,WAChB,CAAA,CACD,CAAA,CAAA,CAEN"}
+{"version":3,"file":"usage-section.cjs","names":[],"sources":["../../../../../src/components/features/conversation/metrics-modal/usage-section.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { MetricRow } from \"./metric-row\";\n\ninterface UsageSectionProps {\n  usage: {\n    prompt_tokens: number;\n    completion_tokens: number;\n    cache_read_tokens: number;\n    cache_write_tokens: number;\n  };\n}\n\nexport function UsageSection({ usage }: UsageSectionProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <>\n      <MetricRow\n        label={t(I18nKey.CONVERSATION$INPUT)}\n        value={usage.prompt_tokens.toLocaleString()}\n      />\n\n      <div className=\"grid grid-cols-2 gap-2 pl-4 text-sm\">\n        <span className=\"text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$CACHE_HIT)}\n        </span>\n        <span className=\"text-right\">\n          {usage.cache_read_tokens.toLocaleString()}\n        </span>\n        <span className=\"text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$CACHE_WRITE)}\n        </span>\n        <span className=\"text-right\">\n          {usage.cache_write_tokens.toLocaleString()}\n        </span>\n      </div>\n\n      <MetricRow\n        label={t(I18nKey.CONVERSATION$OUTPUT)}\n        value={usage.completion_tokens.toLocaleString()}\n      />\n\n      <MetricRow\n        label={t(I18nKey.CONVERSATION$TOTAL)}\n        value={(usage.prompt_tokens + usage.completion_tokens).toLocaleString()}\n        labelClassName=\"font-semibold\"\n        valueClassName=\"font-bold\"\n        showBorder={false}\n      />\n    </>\n  );\n}\n"],"mappings":"0PAaA,SAAgB,EAAa,CAAE,SAA4B,CACzD,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAExC,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,MAAO,EAAE,EAAA,QAAQ,kBAAkB,EACnC,MAAO,EAAM,cAAc,eAAe,CAC3C,CAAA,GAED,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+CAAf,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,kCACb,EAAE,EAAA,QAAQ,sBAAsB,CAC7B,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sBACb,EAAM,kBAAkB,eAAe,CACpC,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,kCACb,EAAE,EAAA,QAAQ,wBAAwB,CAC/B,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sBACb,EAAM,mBAAmB,eAAe,CACrC,CAAA,CACH,KAEL,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,MAAO,EAAE,EAAA,QAAQ,mBAAmB,EACpC,MAAO,EAAM,kBAAkB,eAAe,CAC/C,CAAA,GAED,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,MAAO,EAAE,EAAA,QAAQ,kBAAkB,EACnC,OAAQ,EAAM,cAAgB,EAAM,mBAAmB,eAAe,EACtE,eAAe,gBACf,eAAe,YACf,WAAY,EACb,CAAA,CACD,CAAA,CAAA,CAEN"}

package/dist/components/features/conversation/metrics-modal/usage-section.js

@@ -39,7 +39,8 @@ function o({ usage: o }) {
 			label: s(t.CONVERSATION$TOTAL),
 			value: (o.prompt_tokens + o.completion_tokens).toLocaleString(),
 			labelClassName: "font-semibold",
-			valueClassName: "font-bold"
+			valueClassName: "font-bold",
+			showBorder: !1
 		})
 	] });
 }

package/dist/components/features/conversation/metrics-modal/usage-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"usage-section.js","names":[],"sources":["../../../../../src/components/features/conversation/metrics-modal/usage-section.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { MetricRow } from \"./metric-row\";\n\ninterface UsageSectionProps {\n  usage: {\n    prompt_tokens: number;\n    completion_tokens: number;\n    cache_read_tokens: number;\n    cache_write_tokens: number;\n  };\n}\n\nexport function UsageSection({ usage }: UsageSectionProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <>\n      <MetricRow\n        label={t(I18nKey.CONVERSATION$INPUT)}\n        value={usage.prompt_tokens.toLocaleString()}\n      />\n\n      <div className=\"grid grid-cols-2 gap-2 pl-4 text-sm\">\n        <span className=\"text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$CACHE_HIT)}\n        </span>\n        <span className=\"text-right\">\n          {usage.cache_read_tokens.toLocaleString()}\n        </span>\n        <span className=\"text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$CACHE_WRITE)}\n        </span>\n        <span className=\"text-right\">\n          {usage.cache_write_tokens.toLocaleString()}\n        </span>\n      </div>\n\n      <MetricRow\n        label={t(I18nKey.CONVERSATION$OUTPUT)}\n        value={usage.completion_tokens.toLocaleString()}\n      />\n\n      <MetricRow\n        label={t(I18nKey.CONVERSATION$TOTAL)}\n        value={(usage.prompt_tokens + usage.completion_tokens).toLocaleString()}\n        labelClassName=\"font-semibold\"\n        valueClassName=\"font-bold\"\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;AAaA,SAAgB,EAAa,EAAE,YAA4B;CACzD,IAAM,EAAE,SAAM,EAAe,WAAW;CAExC,OACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GACE,OAAO,EAAE,EAAQ,kBAAkB;GACnC,OAAO,EAAM,cAAc,eAAe;EAC3C,CAAA;EAED,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAE,EAAQ,sBAAsB;IAC7B,CAAA;IACN,kBAAC,QAAD;KAAM,WAAU;eACb,EAAM,kBAAkB,eAAe;IACpC,CAAA;IACN,kBAAC,QAAD;KAAM,WAAU;eACb,EAAE,EAAQ,wBAAwB;IAC/B,CAAA;IACN,kBAAC,QAAD;KAAM,WAAU;eACb,EAAM,mBAAmB,eAAe;IACrC,CAAA;GACH;;EAEL,kBAAC,GAAD;GACE,OAAO,EAAE,EAAQ,mBAAmB;GACpC,OAAO,EAAM,kBAAkB,eAAe;EAC/C,CAAA;EAED,kBAAC,GAAD;GACE,OAAO,EAAE,EAAQ,kBAAkB;GACnC,QAAQ,EAAM,gBAAgB,EAAM,mBAAmB,eAAe;GACtE,gBAAe;GACf,gBAAe;EAChB,CAAA;CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"usage-section.js","names":[],"sources":["../../../../../src/components/features/conversation/metrics-modal/usage-section.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { MetricRow } from \"./metric-row\";\n\ninterface UsageSectionProps {\n  usage: {\n    prompt_tokens: number;\n    completion_tokens: number;\n    cache_read_tokens: number;\n    cache_write_tokens: number;\n  };\n}\n\nexport function UsageSection({ usage }: UsageSectionProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <>\n      <MetricRow\n        label={t(I18nKey.CONVERSATION$INPUT)}\n        value={usage.prompt_tokens.toLocaleString()}\n      />\n\n      <div className=\"grid grid-cols-2 gap-2 pl-4 text-sm\">\n        <span className=\"text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$CACHE_HIT)}\n        </span>\n        <span className=\"text-right\">\n          {usage.cache_read_tokens.toLocaleString()}\n        </span>\n        <span className=\"text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$CACHE_WRITE)}\n        </span>\n        <span className=\"text-right\">\n          {usage.cache_write_tokens.toLocaleString()}\n        </span>\n      </div>\n\n      <MetricRow\n        label={t(I18nKey.CONVERSATION$OUTPUT)}\n        value={usage.completion_tokens.toLocaleString()}\n      />\n\n      <MetricRow\n        label={t(I18nKey.CONVERSATION$TOTAL)}\n        value={(usage.prompt_tokens + usage.completion_tokens).toLocaleString()}\n        labelClassName=\"font-semibold\"\n        valueClassName=\"font-bold\"\n        showBorder={false}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;AAaA,SAAgB,EAAa,EAAE,YAA4B;CACzD,IAAM,EAAE,SAAM,EAAe,WAAW;CAExC,OACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GACE,OAAO,EAAE,EAAQ,kBAAkB;GACnC,OAAO,EAAM,cAAc,eAAe;EAC3C,CAAA;EAED,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAE,EAAQ,sBAAsB;IAC7B,CAAA;IACN,kBAAC,QAAD;KAAM,WAAU;eACb,EAAM,kBAAkB,eAAe;IACpC,CAAA;IACN,kBAAC,QAAD;KAAM,WAAU;eACb,EAAE,EAAQ,wBAAwB;IAC/B,CAAA;IACN,kBAAC,QAAD;KAAM,WAAU;eACb,EAAM,mBAAmB,eAAe;IACrC,CAAA;GACH;;EAEL,kBAAC,GAAD;GACE,OAAO,EAAE,EAAQ,mBAAmB;GACpC,OAAO,EAAM,kBAAkB,eAAe;EAC/C,CAAA;EAED,kBAAC,GAAD;GACE,OAAO,EAAE,EAAQ,kBAAkB;GACnC,QAAQ,EAAM,gBAAgB,EAAM,mBAAmB,eAAe;GACtE,gBAAe;GACf,gBAAe;GACf,YAAY;EACb,CAAA;CACD,EAAA,CAAA;AAEN"}

package/dist/components/features/conversation/usage-panel/compact-context-button.cjs

@@ -0,0 +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/info.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/loader-circle.cjs"),i=require("../../../../node_modules/lucide-react/dist/esm/icons/minimize.cjs"),a=require("../../../shared/buttons/styled-tooltip.cjs"),o=require("../../../../hooks/use-compact-context-action.cjs");require("./context-meter.cjs");const s=require("../../settings/brand-button.cjs");let c=require("react/jsx-runtime");function l({fillPercent:l,perTurnToken:u=0}){let{t:d}=e.useTranslation(`openhands`),{handleCompact:f,isCompacting:p,isDisabled:m,description:h}=o.useCompactContextAction(u),g=l>70;return(0,c.jsxs)(`div`,{"data-testid":`compact-context-section`,className:`flex flex-col gap-2 border-t border-[var(--oh-border-subtle)] pt-3`,children:[g&&(0,c.jsx)(`span`,{className:`text-xs text-amber-500`,children:d(t.I18nKey.CONVERSATION$CONTEXT_FILLING_UP)}),(0,c.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,c.jsx)(s.BrandButton,{testId:`compact-context-button`,type:`button`,variant:g?`primary`:`secondary`,isDisabled:m,"aria-busy":p,onClick:f,startContent:p?(0,c.jsx)(r.LoaderCircle,{className:`h-4 w-4 animate-spin`,"aria-hidden":!0}):(0,c.jsx)(i.Minimize,{className:`h-4 w-4`,"aria-hidden":!0}),className:`w-fit`,children:d(t.I18nKey.CONVERSATION$COMPACT_CONTEXT)}),(0,c.jsx)(a.StyledTooltip,{content:h,placement:`top`,tooltipClassName:`max-w-[220px] text-xs font-normal leading-relaxed whitespace-normal`,children:(0,c.jsx)(`button`,{type:`button`,"data-testid":`compact-context-info`,"aria-label":h,className:`flex size-5 shrink-0 items-center justify-center rounded-full text-[var(--oh-muted)] hover:text-[var(--oh-foreground)] transition-colors cursor-help`,children:(0,c.jsx)(n.Info,{className:`size-3.5`,"aria-hidden":!0})})})]})]})}exports.CompactContextButton=l;
+//# sourceMappingURL=compact-context-button.cjs.map

package/dist/components/features/conversation/usage-panel/compact-context-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"compact-context-button.cjs","names":[],"sources":["../../../../../src/components/features/conversation/usage-panel/compact-context-button.tsx"],"sourcesContent":["import { Info, Loader2, Minimize } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useCompactContextAction } from \"#/hooks/use-compact-context-action\";\nimport { CONTEXT_FILL_WARNING_PERCENT } from \"./context-meter\";\n\ninterface CompactContextButtonProps {\n  /** Current context fill percentage; past the warning threshold the button becomes a prominent CTA. */\n  fillPercent: number;\n  /** Optional live per-turn token count used as a fallback snapshot before compaction. */\n  perTurnToken?: number;\n}\n\n/**\n * \"Compact context\" action: POSTs `/api/conversations/{id}/condense` with a\n * spinner while in flight and toasts for start, completion (with tokens\n * freed), and failure. Disabled while the agent is actively running (the\n * server would race the active step) and promoted to a primary\n * call-to-action once the context fill passes\n * {@link CONTEXT_FILL_WARNING_PERCENT}.\n */\nexport function CompactContextButton({\n  fillPercent,\n  perTurnToken = 0,\n}: CompactContextButtonProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { handleCompact, isCompacting, isDisabled, description } =\n    useCompactContextAction(perTurnToken);\n  const isHighFill = fillPercent > CONTEXT_FILL_WARNING_PERCENT;\n\n  return (\n    <div\n      data-testid=\"compact-context-section\"\n      className=\"flex flex-col gap-2 border-t border-[var(--oh-border-subtle)] pt-3\"\n    >\n      {isHighFill && (\n        <span className=\"text-xs text-amber-500\">\n          {t(I18nKey.CONVERSATION$CONTEXT_FILLING_UP)}\n        </span>\n      )}\n      <div className=\"flex items-center gap-2\">\n        <BrandButton\n          testId=\"compact-context-button\"\n          type=\"button\"\n          variant={isHighFill ? \"primary\" : \"secondary\"}\n          isDisabled={isDisabled}\n          aria-busy={isCompacting}\n          onClick={handleCompact}\n          startContent={\n            isCompacting ? (\n              <Loader2 className=\"h-4 w-4 animate-spin\" aria-hidden />\n            ) : (\n              <Minimize className=\"h-4 w-4\" aria-hidden />\n            )\n          }\n          className=\"w-fit\"\n        >\n          {t(I18nKey.CONVERSATION$COMPACT_CONTEXT)}\n        </BrandButton>\n        <StyledTooltip\n          content={description}\n          placement=\"top\"\n          tooltipClassName=\"max-w-[220px] text-xs font-normal leading-relaxed whitespace-normal\"\n        >\n          <button\n            type=\"button\"\n            data-testid=\"compact-context-info\"\n            aria-label={description}\n            className=\"flex size-5 shrink-0 items-center justify-center rounded-full text-[var(--oh-muted)] hover:text-[var(--oh-foreground)] transition-colors cursor-help\"\n          >\n            <Info className=\"size-3.5\" aria-hidden />\n          </button>\n        </StyledTooltip>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"kpBAuBA,SAAgB,EAAqB,CACnC,cACA,eAAe,GACa,CAC5B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAE,gBAAe,eAAc,aAAY,eAC/C,EAAA,wBAAwB,CAAY,EAChC,EAAa,EAAA,GAEnB,OACE,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,0BACZ,UAAU,8EAFZ,CAIG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,kCACb,EAAE,EAAA,QAAQ,+BAA+B,CACtC,CAAA,GAER,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,mCAAf,EACE,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,OAAO,yBACP,KAAK,SACL,QAAS,EAAa,UAAY,YACtB,aACZ,YAAW,EACX,QAAS,EACT,aACE,GACE,EAAA,EAAA,KAAC,EAAA,aAAD,CAAS,UAAU,uBAAuB,cAAA,EAAa,CAAA,GAEvD,EAAA,EAAA,KAAC,EAAA,SAAD,CAAU,UAAU,UAAU,cAAA,EAAa,CAAA,EAG/C,UAAU,iBAET,EAAE,EAAA,QAAQ,4BAA4B,CAC5B,CAAA,GACb,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,QAAS,EACT,UAAU,MACV,iBAAiB,gFAEjB,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAY,uBACZ,aAAY,EACZ,UAAU,iKAEV,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,UAAU,WAAW,cAAA,EAAa,CAAA,CAClC,CAAA,CACK,CAAA,CACZ,GACF,GAET"}

package/dist/components/features/conversation/usage-panel/compact-context-button.d.ts

@@ -0,0 +1,16 @@
+interface CompactContextButtonProps {
+    /** Current context fill percentage; past the warning threshold the button becomes a prominent CTA. */
+    fillPercent: number;
+    /** Optional live per-turn token count used as a fallback snapshot before compaction. */
+    perTurnToken?: number;
+}
+/**
+ * "Compact context" action: POSTs `/api/conversations/{id}/condense` with a
+ * spinner while in flight and toasts for start, completion (with tokens
+ * freed), and failure. Disabled while the agent is actively running (the
+ * server would race the active step) and promoted to a primary
+ * call-to-action once the context fill passes
+ * {@link CONTEXT_FILL_WARNING_PERCENT}.
+ */
+export declare function CompactContextButton({ fillPercent, perTurnToken, }: CompactContextButtonProps): import("react").JSX.Element;
+export {};