npm - @openhands/agent-canvas - Versions diffs - 1.11.0 → 1.13.0 - Mend

@openhands/agent-canvas 1.11.0 → 1.13.0

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

Files changed (766) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conversation-tabs.js","names":[],"sources":["../../../../../src/components/features/conversation/conversation-tabs/conversation-tabs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { LayoutGroup } from \"framer-motion\";\nimport { 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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"}
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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"}

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

@@ -1,2 +1,2 @@
-require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../../i18n/declaration.cjs"),n=require("../../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 CHANGED Viewed

	@@ -1 +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"}
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 <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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 <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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -1,2 +1,2 @@
-require("../../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../../i18n/declaration.cjs"),n=require("./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 CHANGED Viewed

	@@ -1 +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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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 ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 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;
2	+ //# sourceMappingURL=compact-context-button.cjs.map

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

@@ -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 ADDED Viewed

@@ -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 {};