@openhands/agent-canvas 1.12.0 → 1.14.0

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

@@ -0,0 +1,59 @@
+import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../../i18n/declaration.js";
+import { Info as n } from "../../../../node_modules/lucide-react/dist/esm/icons/info.js";
+import { LoaderCircle as r } from "../../../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+import { Minimize as i } from "../../../../node_modules/lucide-react/dist/esm/icons/minimize.js";
+import { StyledTooltip as a } from "../../../shared/buttons/styled-tooltip.js";
+import { useCompactContextAction as o } from "../../../../hooks/use-compact-context-action.js";
+import "./context-meter.js";
+import { BrandButton as s } from "../../settings/brand-button.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/features/conversation/usage-panel/compact-context-button.tsx
+function u({ fillPercent: u, perTurnToken: d = 0 }) {
+	let { t: f } = e("openhands"), { handleCompact: p, isCompacting: m, isDisabled: h, description: g } = o(d), _ = u > 70;
+	return /* @__PURE__ */ l("div", {
+		"data-testid": "compact-context-section",
+		className: "flex flex-col gap-2 border-t border-[var(--oh-border-subtle)] pt-3",
+		children: [_ && /* @__PURE__ */ c("span", {
+			className: "text-xs text-amber-500",
+			children: f(t.CONVERSATION$CONTEXT_FILLING_UP)
+		}), /* @__PURE__ */ l("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ c(s, {
+				testId: "compact-context-button",
+				type: "button",
+				variant: _ ? "primary" : "secondary",
+				isDisabled: h,
+				"aria-busy": m,
+				onClick: p,
+				startContent: m ? /* @__PURE__ */ c(r, {
+					className: "h-4 w-4 animate-spin",
+					"aria-hidden": !0
+				}) : /* @__PURE__ */ c(i, {
+					className: "h-4 w-4",
+					"aria-hidden": !0
+				}),
+				className: "w-fit",
+				children: f(t.CONVERSATION$COMPACT_CONTEXT)
+			}), /* @__PURE__ */ c(a, {
+				content: g,
+				placement: "top",
+				tooltipClassName: "max-w-[220px] text-xs font-normal leading-relaxed whitespace-normal",
+				children: /* @__PURE__ */ c("button", {
+					type: "button",
+					"data-testid": "compact-context-info",
+					"aria-label": g,
+					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: /* @__PURE__ */ c(n, {
+						className: "size-3.5",
+						"aria-hidden": !0
+					})
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { u as CompactContextButton };
+
+//# sourceMappingURL=compact-context-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"compact-context-button.js","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":";;;;;;;;;;;AAuBA,SAAgB,EAAqB,EACnC,gBACA,kBAAe,KACa;CAC5B,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,kBAAe,iBAAc,eAAY,mBAC/C,EAAwB,CAAY,GAChC,IAAa,IAAA;CAEnB,OACE,kBAAC,OAAD;EACE,eAAY;EACZ,WAAU;YAFZ,CAIG,KACC,kBAAC,QAAD;GAAM,WAAU;aACb,EAAE,EAAQ,+BAA+B;EACtC,CAAA,GAER,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IACE,QAAO;IACP,MAAK;IACL,SAAS,IAAa,YAAY;IACtB;IACZ,aAAW;IACX,SAAS;IACT,cACE,IACE,kBAAC,GAAD;KAAS,WAAU;KAAuB,eAAA;IAAa,CAAA,IAEvD,kBAAC,GAAD;KAAU,WAAU;KAAU,eAAA;IAAa,CAAA;IAG/C,WAAU;cAET,EAAE,EAAQ,4BAA4B;GAC5B,CAAA,GACb,kBAAC,GAAD;IACE,SAAS;IACT,WAAU;IACV,kBAAiB;cAEjB,kBAAC,UAAD;KACE,MAAK;KACL,eAAY;KACZ,cAAY;KACZ,WAAU;eAEV,kBAAC,GAAD;MAAM,WAAU;MAAW,eAAA;KAAa,CAAA;IAClC,CAAA;GACK,CAAA,CACZ;IACF;;AAET"}

package/dist/components/features/conversation/usage-panel/context-meter.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("../../../../utils/utils.cjs"),r=require("../../../../utils/format-token-count.cjs");let i=require("react/jsx-runtime");function a(e){return e>90?`danger`:e>70?`warning`:`neutral`}function o({perTurnToken:o,contextWindow:s}){let{t:c}=e.useTranslation(`openhands`),l=s<=0,u=r.getContextWindowUsagePercentage(o,s),d=a(u),f=d===`warning`,p=d===`danger`,m=Math.round(u),h=Math.max(0,100-m),g=l?c(t.I18nKey.CONVERSATION$CONTEXT_WINDOW_UNKNOWN):`${m}% ${c(t.I18nKey.CONVERSATION$USED)} (${h}% ${c(t.I18nKey.CONVERSATION$LEFT)})`;return(0,i.jsxs)(`div`,{"data-testid":`context-meter`,className:`flex flex-col gap-2`,children:[(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,i.jsx)(`span`,{className:`font-semibold`,children:c(t.I18nKey.CONVERSATION$CONTEXT_WINDOW)}),(0,i.jsx)(`span`,{className:n.cn(`shrink-0 text-xs`,p?`text-red-500`:f?`text-amber-500`:`text-[var(--oh-muted)]`),children:g})]}),(0,i.jsx)(`div`,{className:`relative h-1.5 w-full rounded-full bg-tertiary`,children:(0,i.jsx)(`div`,{"data-testid":`context-meter-bar`,className:n.cn(`absolute inset-y-0 left-0 rounded-full transition-all duration-300`,p?`bg-red-500`:f?`bg-amber-500`:`bg-foreground`),style:{width:`${u}%`}})}),(0,i.jsx)(`div`,{className:`flex justify-end`,children:(0,i.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)]`,children:l?o.toLocaleString():`${o.toLocaleString()} / ${s.toLocaleString()}`})})]})}exports.ContextMeter=o,exports.getContextFillTone=a;
+//# sourceMappingURL=context-meter.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context-meter.cjs","names":[],"sources":["../../../../../src/components/features/conversation/usage-panel/context-meter.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { getContextWindowUsagePercentage } from \"#/utils/format-token-count\";\n\n/** Context fill percentage above which the meter warns and the compact CTA becomes prominent. */\nexport const CONTEXT_FILL_WARNING_PERCENT = 70;\n/** Context fill percentage above which the meter signals danger. */\nexport const CONTEXT_FILL_DANGER_PERCENT = 90;\n\nexport type ContextFillTone = \"neutral\" | \"warning\" | \"danger\";\n\nexport function getContextFillTone(usagePercentage: number): ContextFillTone {\n  if (usagePercentage > CONTEXT_FILL_DANGER_PERCENT) {\n    return \"danger\";\n  }\n  if (usagePercentage > CONTEXT_FILL_WARNING_PERCENT) {\n    return \"warning\";\n  }\n  return \"neutral\";\n}\n\ninterface ContextMeterProps {\n  /** Tokens currently held in the agent's context (`per_turn_token`). */\n  perTurnToken: number;\n  /** Model context window size in tokens. */\n  contextWindow: number;\n}\n\n/**\n * Context-fill progress bar: neutral below\n * {@link CONTEXT_FILL_WARNING_PERCENT}, amber above it, red above\n * {@link CONTEXT_FILL_DANGER_PERCENT}. Shows the raw token numbers underneath.\n */\nexport function ContextMeter({\n  perTurnToken,\n  contextWindow,\n}: ContextMeterProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  // Some models (e.g. via OpenRouter) report no context window size; show the\n  // raw token count without a misleading \"x / 0\" or \"0.0% used\" readout.\n  const isWindowUnknown = contextWindow <= 0;\n\n  // Capped at 100 by getContextWindowUsagePercentage, so the bar width and\n  // the label never read above a full window.\n  const usagePercentage = getContextWindowUsagePercentage(\n    perTurnToken,\n    contextWindow,\n  );\n  const tone = getContextFillTone(usagePercentage);\n  const isWarning = tone === \"warning\";\n  const isDanger = tone === \"danger\";\n  const roundedPercentage = Math.round(usagePercentage);\n  const remainingPercentage = Math.max(0, 100 - roundedPercentage);\n  const usagePercentLabel = isWindowUnknown\n    ? t(I18nKey.CONVERSATION$CONTEXT_WINDOW_UNKNOWN)\n    : `${roundedPercentage}% ${t(I18nKey.CONVERSATION$USED)} (${remainingPercentage}% ${t(I18nKey.CONVERSATION$LEFT)})`;\n\n  return (\n    <div data-testid=\"context-meter\" className=\"flex flex-col gap-2\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <span className=\"font-semibold\">\n          {t(I18nKey.CONVERSATION$CONTEXT_WINDOW)}\n        </span>\n        <span\n          className={cn(\n            \"shrink-0 text-xs\",\n            isDanger\n              ? \"text-red-500\"\n              : isWarning\n                ? \"text-amber-500\"\n                : \"text-[var(--oh-muted)]\",\n          )}\n        >\n          {usagePercentLabel}\n        </span>\n      </div>\n      <div className=\"relative h-1.5 w-full rounded-full bg-tertiary\">\n        <div\n          data-testid=\"context-meter-bar\"\n          className={cn(\n            \"absolute inset-y-0 left-0 rounded-full transition-all duration-300\",\n            isDanger\n              ? \"bg-red-500\"\n              : isWarning\n                ? \"bg-amber-500\"\n                : \"bg-foreground\",\n          )}\n          // runtime usage-percentage width\n          style={{ width: `${usagePercentage}%` }}\n        />\n      </div>\n      <div className=\"flex justify-end\">\n        <span className=\"text-xs text-[var(--oh-muted)]\">\n          {isWindowUnknown\n            ? perTurnToken.toLocaleString()\n            : `${perTurnToken.toLocaleString()} / ${contextWindow.toLocaleString()}`}\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"2TAYA,SAAgB,EAAmB,EAA0C,CAO3E,OANI,EAAA,GACK,SAEL,EAAA,GACK,UAEF,SACT,CAcA,SAAgB,EAAa,CAC3B,eACA,iBACoB,CACpB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAIlC,EAAkB,GAAiB,EAInC,EAAkB,EAAA,gCACtB,EACA,CACF,EACM,EAAO,EAAmB,CAAe,EACzC,EAAY,IAAS,UACrB,EAAW,IAAS,SACpB,EAAoB,KAAK,MAAM,CAAe,EAC9C,EAAsB,KAAK,IAAI,EAAG,IAAM,CAAiB,EACzD,EAAoB,EACtB,EAAE,EAAA,QAAQ,mCAAmC,EAC7C,GAAG,EAAkB,IAAI,EAAE,EAAA,QAAQ,iBAAiB,EAAE,IAAI,EAAoB,IAAI,EAAE,EAAA,QAAQ,iBAAiB,EAAE,GAEnH,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,cAAY,gBAAgB,UAAU,+BAA3C,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,mDAAf,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,yBACb,EAAE,EAAA,QAAQ,2BAA2B,CAClC,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,EAAA,GACT,mBACA,EACI,eACA,EACE,iBACA,wBACR,WAEC,CACG,CAAA,CACH,KACL,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,2DACb,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,oBACZ,UAAW,EAAA,GACT,qEACA,EACI,aACA,EACE,eACA,eACR,EAEA,MAAO,CAAE,MAAO,GAAG,EAAgB,EAAG,CACvC,CAAA,CACE,CAAA,GACL,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,6BACb,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,0CACb,EACG,EAAa,eAAe,EAC5B,GAAG,EAAa,eAAe,EAAE,KAAK,EAAc,eAAe,GACnE,CAAA,CACH,CAAA,CACF,GAET"}

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

@@ -0,0 +1,19 @@
+/** Context fill percentage above which the meter warns and the compact CTA becomes prominent. */
+export declare const CONTEXT_FILL_WARNING_PERCENT = 70;
+/** Context fill percentage above which the meter signals danger. */
+export declare const CONTEXT_FILL_DANGER_PERCENT = 90;
+export type ContextFillTone = "neutral" | "warning" | "danger";
+export declare function getContextFillTone(usagePercentage: number): ContextFillTone;
+interface ContextMeterProps {
+    /** Tokens currently held in the agent's context (`per_turn_token`). */
+    perTurnToken: number;
+    /** Model context window size in tokens. */
+    contextWindow: number;
+}
+/**
+ * Context-fill progress bar: neutral below
+ * {@link CONTEXT_FILL_WARNING_PERCENT}, amber above it, red above
+ * {@link CONTEXT_FILL_DANGER_PERCENT}. Shows the raw token numbers underneath.
+ */
+export declare function ContextMeter({ perTurnToken, contextWindow, }: ContextMeterProps): import("react").JSX.Element;
+export {};

package/dist/components/features/conversation/usage-panel/context-meter.js

@@ -0,0 +1,46 @@
+import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../../i18n/declaration.js";
+import { cn as n } from "../../../../utils/utils.js";
+import { getContextWindowUsagePercentage as r } from "../../../../utils/format-token-count.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+function o(e) {
+	return e > 90 ? "danger" : e > 70 ? "warning" : "neutral";
+}
+function s({ perTurnToken: s, contextWindow: c }) {
+	let { t: l } = e("openhands"), u = c <= 0, d = r(s, c), f = o(d), p = f === "warning", m = f === "danger", h = Math.round(d), g = Math.max(0, 100 - h), _ = u ? l(t.CONVERSATION$CONTEXT_WINDOW_UNKNOWN) : `${h}% ${l(t.CONVERSATION$USED)} (${g}% ${l(t.CONVERSATION$LEFT)})`;
+	return /* @__PURE__ */ a("div", {
+		"data-testid": "context-meter",
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ i("span", {
+					className: "font-semibold",
+					children: l(t.CONVERSATION$CONTEXT_WINDOW)
+				}), /* @__PURE__ */ i("span", {
+					className: n("shrink-0 text-xs", m ? "text-red-500" : p ? "text-amber-500" : "text-[var(--oh-muted)]"),
+					children: _
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "relative h-1.5 w-full rounded-full bg-tertiary",
+				children: /* @__PURE__ */ i("div", {
+					"data-testid": "context-meter-bar",
+					className: n("absolute inset-y-0 left-0 rounded-full transition-all duration-300", m ? "bg-red-500" : p ? "bg-amber-500" : "bg-foreground"),
+					style: { width: `${d}%` }
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex justify-end",
+				children: /* @__PURE__ */ i("span", {
+					className: "text-xs text-[var(--oh-muted)]",
+					children: u ? s.toLocaleString() : `${s.toLocaleString()} / ${c.toLocaleString()}`
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { s as ContextMeter, o as getContextFillTone };
+
+//# sourceMappingURL=context-meter.js.map

package/dist/components/features/conversation/usage-panel/context-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-meter.js","names":[],"sources":["../../../../../src/components/features/conversation/usage-panel/context-meter.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { getContextWindowUsagePercentage } from \"#/utils/format-token-count\";\n\n/** Context fill percentage above which the meter warns and the compact CTA becomes prominent. */\nexport const CONTEXT_FILL_WARNING_PERCENT = 70;\n/** Context fill percentage above which the meter signals danger. */\nexport const CONTEXT_FILL_DANGER_PERCENT = 90;\n\nexport type ContextFillTone = \"neutral\" | \"warning\" | \"danger\";\n\nexport function getContextFillTone(usagePercentage: number): ContextFillTone {\n  if (usagePercentage > CONTEXT_FILL_DANGER_PERCENT) {\n    return \"danger\";\n  }\n  if (usagePercentage > CONTEXT_FILL_WARNING_PERCENT) {\n    return \"warning\";\n  }\n  return \"neutral\";\n}\n\ninterface ContextMeterProps {\n  /** Tokens currently held in the agent's context (`per_turn_token`). */\n  perTurnToken: number;\n  /** Model context window size in tokens. */\n  contextWindow: number;\n}\n\n/**\n * Context-fill progress bar: neutral below\n * {@link CONTEXT_FILL_WARNING_PERCENT}, amber above it, red above\n * {@link CONTEXT_FILL_DANGER_PERCENT}. Shows the raw token numbers underneath.\n */\nexport function ContextMeter({\n  perTurnToken,\n  contextWindow,\n}: ContextMeterProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  // Some models (e.g. via OpenRouter) report no context window size; show the\n  // raw token count without a misleading \"x / 0\" or \"0.0% used\" readout.\n  const isWindowUnknown = contextWindow <= 0;\n\n  // Capped at 100 by getContextWindowUsagePercentage, so the bar width and\n  // the label never read above a full window.\n  const usagePercentage = getContextWindowUsagePercentage(\n    perTurnToken,\n    contextWindow,\n  );\n  const tone = getContextFillTone(usagePercentage);\n  const isWarning = tone === \"warning\";\n  const isDanger = tone === \"danger\";\n  const roundedPercentage = Math.round(usagePercentage);\n  const remainingPercentage = Math.max(0, 100 - roundedPercentage);\n  const usagePercentLabel = isWindowUnknown\n    ? t(I18nKey.CONVERSATION$CONTEXT_WINDOW_UNKNOWN)\n    : `${roundedPercentage}% ${t(I18nKey.CONVERSATION$USED)} (${remainingPercentage}% ${t(I18nKey.CONVERSATION$LEFT)})`;\n\n  return (\n    <div data-testid=\"context-meter\" className=\"flex flex-col gap-2\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <span className=\"font-semibold\">\n          {t(I18nKey.CONVERSATION$CONTEXT_WINDOW)}\n        </span>\n        <span\n          className={cn(\n            \"shrink-0 text-xs\",\n            isDanger\n              ? \"text-red-500\"\n              : isWarning\n                ? \"text-amber-500\"\n                : \"text-[var(--oh-muted)]\",\n          )}\n        >\n          {usagePercentLabel}\n        </span>\n      </div>\n      <div className=\"relative h-1.5 w-full rounded-full bg-tertiary\">\n        <div\n          data-testid=\"context-meter-bar\"\n          className={cn(\n            \"absolute inset-y-0 left-0 rounded-full transition-all duration-300\",\n            isDanger\n              ? \"bg-red-500\"\n              : isWarning\n                ? \"bg-amber-500\"\n                : \"bg-foreground\",\n          )}\n          // runtime usage-percentage width\n          style={{ width: `${usagePercentage}%` }}\n        />\n      </div>\n      <div className=\"flex justify-end\">\n        <span className=\"text-xs text-[var(--oh-muted)]\">\n          {isWindowUnknown\n            ? perTurnToken.toLocaleString()\n            : `${perTurnToken.toLocaleString()} / ${contextWindow.toLocaleString()}`}\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAgB,EAAmB,GAA0C;CAO3E,OANI,IAAA,KACK,WAEL,IAAA,KACK,YAEF;AACT;AAcA,SAAgB,EAAa,EAC3B,iBACA,oBACoB;CACpB,IAAM,EAAE,SAAM,EAAe,WAAW,GAIlC,IAAkB,KAAiB,GAInC,IAAkB,EACtB,GACA,CACF,GACM,IAAO,EAAmB,CAAe,GACzC,IAAY,MAAS,WACrB,IAAW,MAAS,UACpB,IAAoB,KAAK,MAAM,CAAe,GAC9C,IAAsB,KAAK,IAAI,GAAG,MAAM,CAAiB,GACzD,IAAoB,IACtB,EAAE,EAAQ,mCAAmC,IAC7C,GAAG,EAAkB,IAAI,EAAE,EAAQ,iBAAiB,EAAE,IAAI,EAAoB,IAAI,EAAE,EAAQ,iBAAiB,EAAE;CAEnH,OACE,kBAAC,OAAD;EAAK,eAAY;EAAgB,WAAU;YAA3C;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAE,EAAQ,2BAA2B;IAClC,CAAA,GACN,kBAAC,QAAD;KACE,WAAW,EACT,oBACA,IACI,iBACA,IACE,mBACA,wBACR;eAEC;IACG,CAAA,CACH;;GACL,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KACE,eAAY;KACZ,WAAW,EACT,sEACA,IACI,eACA,IACE,iBACA,eACR;KAEA,OAAO,EAAE,OAAO,GAAG,EAAgB,GAAG;IACvC,CAAA;GACE,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,QAAD;KAAM,WAAU;eACb,IACG,EAAa,eAAe,IAC5B,GAAG,EAAa,eAAe,EAAE,KAAK,EAAc,eAAe;IACnE,CAAA;GACH,CAAA;EACF;;AAET"}

package/dist/components/features/conversation/usage-panel/provider-balance-card.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/refresh-cw.cjs"),r=require("../../../../utils/utils.cjs"),i=require("../../../../hooks/query/use-active-conversation.cjs"),a=require("../metrics-modal/metric-row.cjs"),o=require("../../../../hooks/query/use-llm-balance.cjs");let s=require("react/jsx-runtime");function c(e){return`$${e.toFixed(2)}`}function l(){let{t:l}=e.useTranslation(`openhands`),{data:u}=i.useActiveConversation(),{data:d,isError:f,isFetching:p,refetch:m}=o.useLLMBalance(u?.id);if(!d||f)return null;let h=d.limit!==null&&d.limitRemaining!==null;return(0,s.jsxs)(`div`,{"data-testid":`provider-balance-card`,className:`rounded-md border border-[var(--oh-border)] bg-surface-raised p-3`,children:[(0,s.jsxs)(`div`,{className:`flex items-center justify-between pb-2`,children:[(0,s.jsx)(`span`,{className:`font-semibold`,children:l(t.I18nKey.CONVERSATION$PROVIDER_BALANCE)}),(0,s.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,s.jsxs)(`span`,{className:`text-xs text-[var(--oh-muted)]`,children:[d.provider,d.isFreeTier?` · ${l(t.I18nKey.CONVERSATION$FREE_TIER)}`:null]}),(0,s.jsx)(`button`,{type:`button`,"data-testid":`provider-balance-refresh`,"aria-label":l(t.I18nKey.BUTTON$REFRESH),disabled:p,onClick:()=>m(),className:`cursor-pointer text-[var(--oh-muted)] hover:text-[var(--oh-foreground)] disabled:cursor-default`,children:(0,s.jsx)(n.RefreshCw,{className:r.cn(`h-3.5 w-3.5`,p&&`animate-spin`)})})]})]}),(0,s.jsxs)(`div`,{className:`grid gap-3`,children:[h?(0,s.jsx)(a.MetricRow,{label:l(t.I18nKey.CONVERSATION$CREDITS_REMAINING),value:c(d.limitRemaining??0)}):null,(0,s.jsx)(a.MetricRow,{label:l(t.I18nKey.CONVERSATION$CREDITS_USED),value:c(d.usage),valueClassName:h?``:`font-semibold`,labelClassName:h?`text-[var(--oh-muted)]`:``})]})]})}exports.ProviderBalanceCard=l;
+//# sourceMappingURL=provider-balance-card.cjs.map

package/dist/components/features/conversation/usage-panel/provider-balance-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider-balance-card.cjs","names":[],"sources":["../../../../../src/components/features/conversation/usage-panel/provider-balance-card.tsx"],"sourcesContent":["import { RefreshCw } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useLLMBalance } from \"#/hooks/query/use-llm-balance\";\nimport { MetricRow } from \"../metrics-modal/metric-row\";\nimport { cn } from \"#/utils/utils\";\n\nfunction formatCredits(amount: number): string {\n  return `$${amount.toFixed(2)}`;\n}\n\n/**\n * Remaining credits for the active LLM provider (OpenRouter). Fetched once\n * per conversation load with a manual refresh icon; hidden entirely when the\n * agent server has no `/api/llm/balance` endpoint (404) or the request\n * fails, so older servers degrade gracefully.\n */\nexport function ProviderBalanceCard() {\n  const { t } = useTranslation(\"openhands\");\n  const { data: conversation } = useActiveConversation();\n  const {\n    data: balance,\n    isError,\n    isFetching,\n    refetch,\n  } = useLLMBalance(conversation?.id);\n\n  if (!balance || isError) return null;\n\n  const hasCap = balance.limit !== null && balance.limitRemaining !== null;\n\n  return (\n    <div\n      data-testid=\"provider-balance-card\"\n      className=\"rounded-md border border-[var(--oh-border)] bg-surface-raised p-3\"\n    >\n      <div className=\"flex items-center justify-between pb-2\">\n        <span className=\"font-semibold\">\n          {t(I18nKey.CONVERSATION$PROVIDER_BALANCE)}\n        </span>\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-xs text-[var(--oh-muted)]\">\n            {balance.provider}\n            {balance.isFreeTier\n              ? ` · ${t(I18nKey.CONVERSATION$FREE_TIER)}`\n              : null}\n          </span>\n          <button\n            type=\"button\"\n            data-testid=\"provider-balance-refresh\"\n            aria-label={t(I18nKey.BUTTON$REFRESH)}\n            disabled={isFetching}\n            onClick={() => refetch()}\n            className=\"cursor-pointer text-[var(--oh-muted)] hover:text-[var(--oh-foreground)] disabled:cursor-default\"\n          >\n            <RefreshCw\n              className={cn(\"h-3.5 w-3.5\", isFetching && \"animate-spin\")}\n            />\n          </button>\n        </div>\n      </div>\n      <div className=\"grid gap-3\">\n        {hasCap ? (\n          <MetricRow\n            label={t(I18nKey.CONVERSATION$CREDITS_REMAINING)}\n            value={formatCredits(balance.limitRemaining ?? 0)}\n          />\n        ) : null}\n        <MetricRow\n          label={t(I18nKey.CONVERSATION$CREDITS_USED)}\n          value={formatCredits(balance.usage)}\n          valueClassName={hasCap ? \"\" : \"font-semibold\"}\n          labelClassName={hasCap ? \"text-[var(--oh-muted)]\" : \"\"}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"6fAQA,SAAS,EAAc,EAAwB,CAC7C,MAAO,IAAI,EAAO,QAAQ,CAAC,GAC7B,CAQA,SAAgB,GAAsB,CACpC,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,CAAE,KAAM,GAAiB,EAAA,sBAAsB,EAC/C,CACJ,KAAM,EACN,UACA,aACA,WACE,EAAA,cAAc,GAAc,EAAE,EAElC,GAAI,CAAC,GAAW,EAAS,OAAO,KAEhC,IAAM,EAAS,EAAQ,QAAU,MAAQ,EAAQ,iBAAmB,KAEpE,OACE,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,wBACZ,UAAU,6EAFZ,EAIE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kDAAf,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,yBACb,EAAE,EAAA,QAAQ,6BAA6B,CACpC,CAAA,GACN,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,mCAAf,EACE,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,0CAAhB,CACG,EAAQ,SACR,EAAQ,WACL,MAAM,EAAE,EAAA,QAAQ,sBAAsB,IACtC,IACA,KACN,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAY,2BACZ,aAAY,EAAE,EAAA,QAAQ,cAAc,EACpC,SAAU,EACV,YAAe,EAAQ,EACvB,UAAU,4GAEV,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,UAAW,EAAA,GAAG,cAAe,GAAc,cAAc,CAC1D,CAAA,CACK,CAAA,CACL,GACF,KACL,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,sBAAf,CACG,GACC,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,MAAO,EAAE,EAAA,QAAQ,8BAA8B,EAC/C,MAAO,EAAc,EAAQ,gBAAkB,CAAC,CACjD,CAAA,EACC,MACJ,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,MAAO,EAAE,EAAA,QAAQ,yBAAyB,EAC1C,MAAO,EAAc,EAAQ,KAAK,EAClC,eAAgB,EAAS,GAAK,gBAC9B,eAAgB,EAAS,yBAA2B,EACrD,CAAA,CACE,GACF,GAET"}

package/dist/components/features/conversation/usage-panel/provider-balance-card.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Remaining credits for the active LLM provider (OpenRouter). Fetched once
+ * per conversation load with a manual refresh icon; hidden entirely when the
+ * agent server has no `/api/llm/balance` endpoint (404) or the request
+ * fails, so older servers degrade gracefully.
+ */
+export declare function ProviderBalanceCard(): import("react").JSX.Element | null;

package/dist/components/features/conversation/usage-panel/provider-balance-card.js

@@ -0,0 +1,57 @@
+import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../../i18n/declaration.js";
+import { RefreshCw as n } from "../../../../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
+import { cn as r } from "../../../../utils/utils.js";
+import { useActiveConversation as i } from "../../../../hooks/query/use-active-conversation.js";
+import { MetricRow as a } from "../metrics-modal/metric-row.js";
+import { useLLMBalance as o } from "../../../../hooks/query/use-llm-balance.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/features/conversation/usage-panel/provider-balance-card.tsx
+function l(e) {
+	return `$${e.toFixed(2)}`;
+}
+function u() {
+	let { t: u } = e("openhands"), { data: d } = i(), { data: f, isError: p, isFetching: m, refetch: h } = o(d?.id);
+	if (!f || p) return null;
+	let g = f.limit !== null && f.limitRemaining !== null;
+	return /* @__PURE__ */ c("div", {
+		"data-testid": "provider-balance-card",
+		className: "rounded-md border border-[var(--oh-border)] bg-surface-raised p-3",
+		children: [/* @__PURE__ */ c("div", {
+			className: "flex items-center justify-between pb-2",
+			children: [/* @__PURE__ */ s("span", {
+				className: "font-semibold",
+				children: u(t.CONVERSATION$PROVIDER_BALANCE)
+			}), /* @__PURE__ */ c("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ c("span", {
+					className: "text-xs text-[var(--oh-muted)]",
+					children: [f.provider, f.isFreeTier ? ` · ${u(t.CONVERSATION$FREE_TIER)}` : null]
+				}), /* @__PURE__ */ s("button", {
+					type: "button",
+					"data-testid": "provider-balance-refresh",
+					"aria-label": u(t.BUTTON$REFRESH),
+					disabled: m,
+					onClick: () => h(),
+					className: "cursor-pointer text-[var(--oh-muted)] hover:text-[var(--oh-foreground)] disabled:cursor-default",
+					children: /* @__PURE__ */ s(n, { className: r("h-3.5 w-3.5", m && "animate-spin") })
+				})]
+			})]
+		}), /* @__PURE__ */ c("div", {
+			className: "grid gap-3",
+			children: [g ? /* @__PURE__ */ s(a, {
+				label: u(t.CONVERSATION$CREDITS_REMAINING),
+				value: l(f.limitRemaining ?? 0)
+			}) : null, /* @__PURE__ */ s(a, {
+				label: u(t.CONVERSATION$CREDITS_USED),
+				value: l(f.usage),
+				valueClassName: g ? "" : "font-semibold",
+				labelClassName: g ? "text-[var(--oh-muted)]" : ""
+			})]
+		})]
+	});
+}
+//#endregion
+export { u as ProviderBalanceCard };
+
+//# sourceMappingURL=provider-balance-card.js.map

package/dist/components/features/conversation/usage-panel/provider-balance-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider-balance-card.js","names":[],"sources":["../../../../../src/components/features/conversation/usage-panel/provider-balance-card.tsx"],"sourcesContent":["import { RefreshCw } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { useLLMBalance } from \"#/hooks/query/use-llm-balance\";\nimport { MetricRow } from \"../metrics-modal/metric-row\";\nimport { cn } from \"#/utils/utils\";\n\nfunction formatCredits(amount: number): string {\n  return `$${amount.toFixed(2)}`;\n}\n\n/**\n * Remaining credits for the active LLM provider (OpenRouter). Fetched once\n * per conversation load with a manual refresh icon; hidden entirely when the\n * agent server has no `/api/llm/balance` endpoint (404) or the request\n * fails, so older servers degrade gracefully.\n */\nexport function ProviderBalanceCard() {\n  const { t } = useTranslation(\"openhands\");\n  const { data: conversation } = useActiveConversation();\n  const {\n    data: balance,\n    isError,\n    isFetching,\n    refetch,\n  } = useLLMBalance(conversation?.id);\n\n  if (!balance || isError) return null;\n\n  const hasCap = balance.limit !== null && balance.limitRemaining !== null;\n\n  return (\n    <div\n      data-testid=\"provider-balance-card\"\n      className=\"rounded-md border border-[var(--oh-border)] bg-surface-raised p-3\"\n    >\n      <div className=\"flex items-center justify-between pb-2\">\n        <span className=\"font-semibold\">\n          {t(I18nKey.CONVERSATION$PROVIDER_BALANCE)}\n        </span>\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-xs text-[var(--oh-muted)]\">\n            {balance.provider}\n            {balance.isFreeTier\n              ? ` · ${t(I18nKey.CONVERSATION$FREE_TIER)}`\n              : null}\n          </span>\n          <button\n            type=\"button\"\n            data-testid=\"provider-balance-refresh\"\n            aria-label={t(I18nKey.BUTTON$REFRESH)}\n            disabled={isFetching}\n            onClick={() => refetch()}\n            className=\"cursor-pointer text-[var(--oh-muted)] hover:text-[var(--oh-foreground)] disabled:cursor-default\"\n          >\n            <RefreshCw\n              className={cn(\"h-3.5 w-3.5\", isFetching && \"animate-spin\")}\n            />\n          </button>\n        </div>\n      </div>\n      <div className=\"grid gap-3\">\n        {hasCap ? (\n          <MetricRow\n            label={t(I18nKey.CONVERSATION$CREDITS_REMAINING)}\n            value={formatCredits(balance.limitRemaining ?? 0)}\n          />\n        ) : null}\n        <MetricRow\n          label={t(I18nKey.CONVERSATION$CREDITS_USED)}\n          value={formatCredits(balance.usage)}\n          valueClassName={hasCap ? \"\" : \"font-semibold\"}\n          labelClassName={hasCap ? \"text-[var(--oh-muted)]\" : \"\"}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,SAAS,EAAc,GAAwB;CAC7C,OAAO,IAAI,EAAO,QAAQ,CAAC;AAC7B;AAQA,SAAgB,IAAsB;CACpC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,MAAM,MAAiB,EAAsB,GAC/C,EACJ,MAAM,GACN,YACA,eACA,eACE,EAAc,GAAc,EAAE;CAElC,IAAI,CAAC,KAAW,GAAS,OAAO;CAEhC,IAAM,IAAS,EAAQ,UAAU,QAAQ,EAAQ,mBAAmB;CAEpE,OACE,kBAAC,OAAD;EACE,eAAY;EACZ,WAAU;YAFZ,CAIE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,EAAQ,6BAA6B;GACpC,CAAA,GACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACG,EAAQ,UACR,EAAQ,aACL,MAAM,EAAE,EAAQ,sBAAsB,MACtC,IACA;QACN,kBAAC,UAAD;KACE,MAAK;KACL,eAAY;KACZ,cAAY,EAAE,EAAQ,cAAc;KACpC,UAAU;KACV,eAAe,EAAQ;KACvB,WAAU;eAEV,kBAAC,GAAD,EACE,WAAW,EAAG,eAAe,KAAc,cAAc,EAC1D,CAAA;IACK,CAAA,CACL;KACF;MACL,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,IACC,kBAAC,GAAD;IACE,OAAO,EAAE,EAAQ,8BAA8B;IAC/C,OAAO,EAAc,EAAQ,kBAAkB,CAAC;GACjD,CAAA,IACC,MACJ,kBAAC,GAAD;IACE,OAAO,EAAE,EAAQ,yBAAyB;IAC1C,OAAO,EAAc,EAAQ,KAAK;IAClC,gBAAgB,IAAS,KAAK;IAC9B,gBAAgB,IAAS,2BAA2B;GACrD,CAAA,CACE;IACF;;AAET"}

package/dist/components/features/conversation/usage-panel/usage-panel.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/gauge.cjs"),r=require("../conversation-tab-empty-state.cjs"),i=require("../../../../hooks/query/use-active-conversation.cjs"),a=require("../../../../utils/format-token-count.cjs"),o=require("./context-meter.cjs"),s=require("../../../../hooks/use-live-conversation-metrics.cjs"),c=require("../metrics-modal/cost-section.cjs"),l=require("../metrics-modal/usage-section.cjs"),u=require("./compact-context-button.cjs"),d=require("./provider-balance-card.cjs");let f=require("react/jsx-runtime");function p(){let{t:p}=e.useTranslation(`openhands`),m=s.useLiveConversationMetrics(),{data:h}=i.useActiveConversation(),g=h?.agent_kind===`acp`,{usage:_}=m;return m.cost!==null||_!==null?(0,f.jsxs)(`main`,{"data-testid":`usage-panel`,className:`h-full overflow-y-auto custom-scrollbar-always flex flex-col gap-3 p-3`,children:[_!==null&&(0,f.jsx)(`div`,{className:`rounded-md border border-[var(--oh-border)] bg-surface-raised p-3`,children:(0,f.jsxs)(`div`,{className:`grid gap-3`,children:[(0,f.jsx)(o.ContextMeter,{perTurnToken:_.per_turn_token,contextWindow:_.context_window}),(0,f.jsx)(u.CompactContextButton,{fillPercent:a.getContextWindowUsagePercentage(_.per_turn_token,_.context_window),perTurnToken:_.per_turn_token})]})}),(0,f.jsx)(`div`,{className:`rounded-md border border-[var(--oh-border)] bg-surface-raised p-3`,children:(0,f.jsxs)(`div`,{className:`grid gap-3`,children:[(0,f.jsx)(`div`,{className:`flex justify-between items-center pb-2`,children:(0,f.jsx)(`span`,{className:`text-lg font-semibold`,children:p(t.I18nKey.CONVERSATION$TOKEN_USAGE)})}),g&&(0,f.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)]`,children:p(t.I18nKey.CONVERSATION$PLAN_USAGE_NOTE)}),_!==null&&(0,f.jsx)(l.UsageSection,{usage:_}),(0,f.jsx)(c.CostSection,{cost:m.cost,maxBudgetPerTask:m.max_budget_per_task})]})}),(0,f.jsx)(d.ProviderBalanceCard,{})]}):(0,f.jsx)(r.ConversationTabEmptyState,{icon:(0,f.jsx)(n.Gauge,{}),children:p(t.I18nKey.CONVERSATION$NO_METRICS)})}exports.UsagePanel=p;
+//# sourceMappingURL=usage-panel.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usage-panel.cjs","names":[],"sources":["../../../../../src/components/features/conversation/usage-panel/usage-panel.tsx"],"sourcesContent":["import { Gauge } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ConversationTabEmptyState } from \"#/components/features/conversation/conversation-tab-empty-state\";\nimport { useLiveConversationMetrics } from \"#/hooks/use-live-conversation-metrics\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { CostSection } from \"../metrics-modal/cost-section\";\nimport { UsageSection } from \"../metrics-modal/usage-section\";\nimport { CompactContextButton } from \"./compact-context-button\";\nimport { ContextMeter } from \"./context-meter\";\nimport { ProviderBalanceCard } from \"./provider-balance-card\";\nimport { getContextWindowUsagePercentage } from \"#/utils/format-token-count\";\n\n/**\n * \"Usage\" right-panel tab: context-fill meter with a manual \"Compact\n * context\" action, accumulated token/cost stats, and the provider credit\n * balance (when the agent server reports one).\n *\n * Metrics come from {@link useLiveConversationMetrics}: live WebSocket\n * updates plus a 30s REST poll while the tab is mounted.\n */\nexport function UsagePanel() {\n  const { t } = useTranslation(\"openhands\");\n  const metrics = useLiveConversationMetrics();\n  const { data: conversation } = useActiveConversation();\n  // ACP conversations (e.g. Claude Code) draw on the CLI's own subscription\n  // plan; the dollar figure is an API-equivalent estimate, not a bill.\n  const isAcp = conversation?.agent_kind === \"acp\";\n\n  const { usage } = metrics;\n  const hasMetrics = metrics.cost !== null || usage !== null;\n\n  if (!hasMetrics) {\n    return (\n      <ConversationTabEmptyState icon={<Gauge />}>\n        {t(I18nKey.CONVERSATION$NO_METRICS)}\n      </ConversationTabEmptyState>\n    );\n  }\n\n  return (\n    <main\n      data-testid=\"usage-panel\"\n      className=\"h-full overflow-y-auto custom-scrollbar-always flex flex-col gap-3 p-3\"\n    >\n      {usage !== null && (\n        <div className=\"rounded-md border border-[var(--oh-border)] bg-surface-raised p-3\">\n          <div className=\"grid gap-3\">\n            <ContextMeter\n              perTurnToken={usage.per_turn_token}\n              contextWindow={usage.context_window}\n            />\n            <CompactContextButton\n              fillPercent={getContextWindowUsagePercentage(\n                usage.per_turn_token,\n                usage.context_window,\n              )}\n              perTurnToken={usage.per_turn_token}\n            />\n          </div>\n        </div>\n      )}\n\n      <div className=\"rounded-md border border-[var(--oh-border)] bg-surface-raised p-3\">\n        <div className=\"grid gap-3\">\n          <div className=\"flex justify-between items-center pb-2\">\n            <span className=\"text-lg font-semibold\">\n              {t(I18nKey.CONVERSATION$TOKEN_USAGE)}\n            </span>\n          </div>\n          {isAcp && (\n            <span className=\"text-xs text-[var(--oh-muted)]\">\n              {t(I18nKey.CONVERSATION$PLAN_USAGE_NOTE)}\n            </span>\n          )}\n          {usage !== null && <UsageSection usage={usage} />}\n          <CostSection\n            cost={metrics.cost}\n            maxBudgetPerTask={metrics.max_budget_per_task}\n          />\n        </div>\n      </div>\n\n      <ProviderBalanceCard />\n    </main>\n  );\n}\n"],"mappings":"ouBAqBA,SAAgB,GAAa,CAC3B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAU,EAAA,2BAA2B,EACrC,CAAE,KAAM,GAAiB,EAAA,sBAAsB,EAG/C,EAAQ,GAAc,aAAe,MAErC,CAAE,SAAU,EAWlB,OAVmB,EAAQ,OAAS,MAAQ,IAAU,MAWpD,EAAA,EAAA,MAAC,OAAD,CACE,cAAY,cACZ,UAAU,kFAFZ,CAIG,IAAU,OACT,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,8EACb,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,sBAAf,EACE,EAAA,EAAA,KAAC,EAAA,aAAD,CACE,aAAc,EAAM,eACpB,cAAe,EAAM,cACtB,CAAA,GACD,EAAA,EAAA,KAAC,EAAA,qBAAD,CACE,YAAa,EAAA,gCACX,EAAM,eACN,EAAM,cACR,EACA,aAAc,EAAM,cACrB,CAAA,CACE,GACF,CAAA,GAGP,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,8EACb,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,sBAAf,EACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,mDACb,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,iCACb,EAAE,EAAA,QAAQ,wBAAwB,CAC/B,CAAA,CACH,CAAA,EACJ,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,0CACb,EAAE,EAAA,QAAQ,4BAA4B,CACnC,CAAA,EAEP,IAAU,OAAQ,EAAA,EAAA,KAAC,EAAA,aAAD,CAAqB,OAAQ,CAAA,GAChD,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAM,EAAQ,KACd,iBAAkB,EAAQ,mBAC3B,CAAA,CACE,GACF,CAAA,GAEL,EAAA,EAAA,KAAC,EAAA,oBAAD,CAAsB,CAAA,CAClB,KAlDJ,EAAA,EAAA,KAAC,EAAA,0BAAD,CAA2B,MAAM,EAAA,EAAA,KAAC,EAAA,MAAD,CAAQ,CAAA,WACtC,EAAE,EAAA,QAAQ,uBAAuB,CACT,CAAA,CAkDjC"}

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

@@ -0,0 +1,9 @@
+/**
+ * "Usage" right-panel tab: context-fill meter with a manual "Compact
+ * context" action, accumulated token/cost stats, and the provider credit
+ * balance (when the agent server reports one).
+ *
+ * Metrics come from {@link useLiveConversationMetrics}: live WebSocket
+ * updates plus a 30s REST poll while the tab is mounted.
+ */
+export declare function UsagePanel(): import("react").JSX.Element;

package/dist/components/features/conversation/usage-panel/usage-panel.js

@@ -0,0 +1,68 @@
+import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../../i18n/declaration.js";
+import { Gauge as n } from "../../../../node_modules/lucide-react/dist/esm/icons/gauge.js";
+import { ConversationTabEmptyState as r } from "../conversation-tab-empty-state.js";
+import { useActiveConversation as i } from "../../../../hooks/query/use-active-conversation.js";
+import { getContextWindowUsagePercentage as a } from "../../../../utils/format-token-count.js";
+import { ContextMeter as o } from "./context-meter.js";
+import { useLiveConversationMetrics as s } from "../../../../hooks/use-live-conversation-metrics.js";
+import { CostSection as c } from "../metrics-modal/cost-section.js";
+import { UsageSection as l } from "../metrics-modal/usage-section.js";
+import { CompactContextButton as u } from "./compact-context-button.js";
+import { ProviderBalanceCard as d } from "./provider-balance-card.js";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/features/conversation/usage-panel/usage-panel.tsx
+function m() {
+	let { t: m } = e("openhands"), h = s(), { data: g } = i(), _ = g?.agent_kind === "acp", { usage: v } = h;
+	return h.cost !== null || v !== null ? /* @__PURE__ */ p("main", {
+		"data-testid": "usage-panel",
+		className: "h-full overflow-y-auto custom-scrollbar-always flex flex-col gap-3 p-3",
+		children: [
+			v !== null && /* @__PURE__ */ f("div", {
+				className: "rounded-md border border-[var(--oh-border)] bg-surface-raised p-3",
+				children: /* @__PURE__ */ p("div", {
+					className: "grid gap-3",
+					children: [/* @__PURE__ */ f(o, {
+						perTurnToken: v.per_turn_token,
+						contextWindow: v.context_window
+					}), /* @__PURE__ */ f(u, {
+						fillPercent: a(v.per_turn_token, v.context_window),
+						perTurnToken: v.per_turn_token
+					})]
+				})
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "rounded-md border border-[var(--oh-border)] bg-surface-raised p-3",
+				children: /* @__PURE__ */ p("div", {
+					className: "grid gap-3",
+					children: [
+						/* @__PURE__ */ f("div", {
+							className: "flex justify-between items-center pb-2",
+							children: /* @__PURE__ */ f("span", {
+								className: "text-lg font-semibold",
+								children: m(t.CONVERSATION$TOKEN_USAGE)
+							})
+						}),
+						_ && /* @__PURE__ */ f("span", {
+							className: "text-xs text-[var(--oh-muted)]",
+							children: m(t.CONVERSATION$PLAN_USAGE_NOTE)
+						}),
+						v !== null && /* @__PURE__ */ f(l, { usage: v }),
+						/* @__PURE__ */ f(c, {
+							cost: h.cost,
+							maxBudgetPerTask: h.max_budget_per_task
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ f(d, {})
+		]
+	}) : /* @__PURE__ */ f(r, {
+		icon: /* @__PURE__ */ f(n, {}),
+		children: m(t.CONVERSATION$NO_METRICS)
+	});
+}
+//#endregion
+export { m as UsagePanel };
+
+//# sourceMappingURL=usage-panel.js.map

package/dist/components/features/conversation/usage-panel/usage-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usage-panel.js","names":[],"sources":["../../../../../src/components/features/conversation/usage-panel/usage-panel.tsx"],"sourcesContent":["import { Gauge } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ConversationTabEmptyState } from \"#/components/features/conversation/conversation-tab-empty-state\";\nimport { useLiveConversationMetrics } from \"#/hooks/use-live-conversation-metrics\";\nimport { useActiveConversation } from \"#/hooks/query/use-active-conversation\";\nimport { CostSection } from \"../metrics-modal/cost-section\";\nimport { UsageSection } from \"../metrics-modal/usage-section\";\nimport { CompactContextButton } from \"./compact-context-button\";\nimport { ContextMeter } from \"./context-meter\";\nimport { ProviderBalanceCard } from \"./provider-balance-card\";\nimport { getContextWindowUsagePercentage } from \"#/utils/format-token-count\";\n\n/**\n * \"Usage\" right-panel tab: context-fill meter with a manual \"Compact\n * context\" action, accumulated token/cost stats, and the provider credit\n * balance (when the agent server reports one).\n *\n * Metrics come from {@link useLiveConversationMetrics}: live WebSocket\n * updates plus a 30s REST poll while the tab is mounted.\n */\nexport function UsagePanel() {\n  const { t } = useTranslation(\"openhands\");\n  const metrics = useLiveConversationMetrics();\n  const { data: conversation } = useActiveConversation();\n  // ACP conversations (e.g. Claude Code) draw on the CLI's own subscription\n  // plan; the dollar figure is an API-equivalent estimate, not a bill.\n  const isAcp = conversation?.agent_kind === \"acp\";\n\n  const { usage } = metrics;\n  const hasMetrics = metrics.cost !== null || usage !== null;\n\n  if (!hasMetrics) {\n    return (\n      <ConversationTabEmptyState icon={<Gauge />}>\n        {t(I18nKey.CONVERSATION$NO_METRICS)}\n      </ConversationTabEmptyState>\n    );\n  }\n\n  return (\n    <main\n      data-testid=\"usage-panel\"\n      className=\"h-full overflow-y-auto custom-scrollbar-always flex flex-col gap-3 p-3\"\n    >\n      {usage !== null && (\n        <div className=\"rounded-md border border-[var(--oh-border)] bg-surface-raised p-3\">\n          <div className=\"grid gap-3\">\n            <ContextMeter\n              perTurnToken={usage.per_turn_token}\n              contextWindow={usage.context_window}\n            />\n            <CompactContextButton\n              fillPercent={getContextWindowUsagePercentage(\n                usage.per_turn_token,\n                usage.context_window,\n              )}\n              perTurnToken={usage.per_turn_token}\n            />\n          </div>\n        </div>\n      )}\n\n      <div className=\"rounded-md border border-[var(--oh-border)] bg-surface-raised p-3\">\n        <div className=\"grid gap-3\">\n          <div className=\"flex justify-between items-center pb-2\">\n            <span className=\"text-lg font-semibold\">\n              {t(I18nKey.CONVERSATION$TOKEN_USAGE)}\n            </span>\n          </div>\n          {isAcp && (\n            <span className=\"text-xs text-[var(--oh-muted)]\">\n              {t(I18nKey.CONVERSATION$PLAN_USAGE_NOTE)}\n            </span>\n          )}\n          {usage !== null && <UsageSection usage={usage} />}\n          <CostSection\n            cost={metrics.cost}\n            maxBudgetPerTask={metrics.max_budget_per_task}\n          />\n        </div>\n      </div>\n\n      <ProviderBalanceCard />\n    </main>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAqBA,SAAgB,IAAa;CAC3B,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAU,EAA2B,GACrC,EAAE,MAAM,MAAiB,EAAsB,GAG/C,IAAQ,GAAc,eAAe,OAErC,EAAE,aAAU;CAWlB,OAVmB,EAAQ,SAAS,QAAQ,MAAU,OAWpD,kBAAC,QAAD;EACE,eAAY;EACZ,WAAU;YAFZ;GAIG,MAAU,QACT,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MACE,cAAc,EAAM;MACpB,eAAe,EAAM;KACtB,CAAA,GACD,kBAAC,GAAD;MACE,aAAa,EACX,EAAM,gBACN,EAAM,cACR;MACA,cAAc,EAAM;KACrB,CAAA,CACE;;GACF,CAAA;GAGP,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAE,EAAQ,wBAAwB;OAC/B,CAAA;MACH,CAAA;MACJ,KACC,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAE,EAAQ,4BAA4B;MACnC,CAAA;MAEP,MAAU,QAAQ,kBAAC,GAAD,EAAqB,SAAQ,CAAA;MAChD,kBAAC,GAAD;OACE,MAAM,EAAQ;OACd,kBAAkB,EAAQ;MAC3B,CAAA;KACE;;GACF,CAAA;GAEL,kBAAC,GAAD,CAAsB,CAAA;EAClB;MAlDJ,kBAAC,GAAD;EAA2B,MAAM,kBAAC,GAAD,CAAQ,CAAA;YACtC,EAAE,EAAQ,uBAAuB;CACT,CAAA;AAkDjC"}

package/dist/components/features/conversation-panel/budget-display.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("./budget-progress-bar.cjs"),i=require("./budget-usage-text.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");function s({cost:e,maxBudgetPerTask:a}){let{t:s}=t.useTranslation(`openhands`);return e===null?null:(0,o.jsx)(`div`,{className:`border-b border-[var(--oh-border-subtle)]`,children:a!==null&&a>0?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.BudgetProgressBar,{currentCost:e,maxBudget:a}),(0,o.jsx)(i.BudgetUsageText,{currentCost:e,maxBudget:a})]}):(0,o.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)]`,children:s(n.I18nKey.CONVERSATION$NO_BUDGET_LIMIT)})})}exports.BudgetDisplay=s;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("./budget-progress-bar.cjs"),i=require("./budget-usage-text.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");function s({cost:e,maxBudgetPerTask:a}){let{t:s}=t.useTranslation(`openhands`);return e===null?null:(0,o.jsx)(`div`,{children:a!==null&&a>0?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.BudgetProgressBar,{currentCost:e,maxBudget:a}),(0,o.jsx)(i.BudgetUsageText,{currentCost:e,maxBudget:a})]}):(0,o.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)]`,children:s(n.I18nKey.CONVERSATION$NO_BUDGET_LIMIT)})})}exports.BudgetDisplay=s;
 //# sourceMappingURL=budget-display.cjs.map

package/dist/components/features/conversation-panel/budget-display.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"budget-display.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/budget-display.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BudgetProgressBar } from \"./budget-progress-bar\";\nimport { BudgetUsageText } from \"./budget-usage-text\";\n\ninterface BudgetDisplayProps {\n  cost: number | null;\n  maxBudgetPerTask: number | null;\n}\n\nexport function BudgetDisplay({ cost, maxBudgetPerTask }: BudgetDisplayProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  // Don't render anything if cost is not available\n  if (cost === null) {\n    return null;\n  }\n\n  return (\n    <div className=\"border-b border-[var(--oh-border-subtle)]\">\n      {maxBudgetPerTask !== null && maxBudgetPerTask > 0 ? (\n        <>\n          <BudgetProgressBar currentCost={cost} maxBudget={maxBudgetPerTask} />\n          <BudgetUsageText currentCost={cost} maxBudget={maxBudgetPerTask} />\n        </>\n      ) : (\n        <span className=\"text-xs text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$NO_BUDGET_LIMIT)}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"yUAWA,SAAgB,EAAc,CAAE,OAAM,oBAAwC,CAC5E,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAOxC,OAJI,IAAS,KACJ,MAIP,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,qDACZ,IAAqB,MAAQ,EAAmB,GAC/C,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,kBAAD,CAAmB,YAAa,EAAM,UAAW,CAAmB,CAAA,GACpE,EAAA,EAAA,KAAC,EAAA,gBAAD,CAAiB,YAAa,EAAM,UAAW,CAAmB,CAAA,CAClE,CAAA,CAAA,GAEF,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,0CACb,EAAE,EAAA,QAAQ,4BAA4B,CACnC,CAAA,CAEL,CAAA,CAET"}
+{"version":3,"file":"budget-display.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/budget-display.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BudgetProgressBar } from \"./budget-progress-bar\";\nimport { BudgetUsageText } from \"./budget-usage-text\";\n\ninterface BudgetDisplayProps {\n  cost: number | null;\n  maxBudgetPerTask: number | null;\n}\n\nexport function BudgetDisplay({ cost, maxBudgetPerTask }: BudgetDisplayProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  // Don't render anything if cost is not available\n  if (cost === null) {\n    return null;\n  }\n\n  return (\n    <div>\n      {maxBudgetPerTask !== null && maxBudgetPerTask > 0 ? (\n        <>\n          <BudgetProgressBar currentCost={cost} maxBudget={maxBudgetPerTask} />\n          <BudgetUsageText currentCost={cost} maxBudget={maxBudgetPerTask} />\n        </>\n      ) : (\n        <span className=\"text-xs text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$NO_BUDGET_LIMIT)}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"yUAWA,SAAgB,EAAc,CAAE,OAAM,oBAAwC,CAC5E,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAOxC,OAJI,IAAS,KACJ,MAIP,EAAA,EAAA,KAAC,MAAD,CAAA,SACG,IAAqB,MAAQ,EAAmB,GAC/C,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,kBAAD,CAAmB,YAAa,EAAM,UAAW,CAAmB,CAAA,GACpE,EAAA,EAAA,KAAC,EAAA,gBAAD,CAAiB,YAAa,EAAM,UAAW,CAAmB,CAAA,CAClE,CAAA,CAAA,GAEF,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,0CACb,EAAE,EAAA,QAAQ,4BAA4B,CACnC,CAAA,CAEL,CAAA,CAET"}

package/dist/components/features/conversation-panel/budget-display.js

@@ -7,19 +7,16 @@ import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/features/conversation-panel/budget-display.tsx
 function s({ cost: s, maxBudgetPerTask: c }) {
 	let { t: l } = e("openhands");
-	return s === null ? null : /* @__PURE__ */ a("div", {
-		className: "border-b border-[var(--oh-border-subtle)]",
-		children: c !== null && c > 0 ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(n, {
-			currentCost: s,
-			maxBudget: c
-		}), /* @__PURE__ */ a(r, {
-			currentCost: s,
-			maxBudget: c
-		})] }) : /* @__PURE__ */ a("span", {
-			className: "text-xs text-[var(--oh-muted)]",
-			children: l(t.CONVERSATION$NO_BUDGET_LIMIT)
-		})
-	});
+	return s === null ? null : /* @__PURE__ */ a("div", { children: c !== null && c > 0 ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(n, {
+		currentCost: s,
+		maxBudget: c
+	}), /* @__PURE__ */ a(r, {
+		currentCost: s,
+		maxBudget: c
+	})] }) : /* @__PURE__ */ a("span", {
+		className: "text-xs text-[var(--oh-muted)]",
+		children: l(t.CONVERSATION$NO_BUDGET_LIMIT)
+	}) });
 }
 //#endregion
 export { s as BudgetDisplay };

package/dist/components/features/conversation-panel/budget-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"budget-display.js","names":[],"sources":["../../../../src/components/features/conversation-panel/budget-display.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BudgetProgressBar } from \"./budget-progress-bar\";\nimport { BudgetUsageText } from \"./budget-usage-text\";\n\ninterface BudgetDisplayProps {\n  cost: number | null;\n  maxBudgetPerTask: number | null;\n}\n\nexport function BudgetDisplay({ cost, maxBudgetPerTask }: BudgetDisplayProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  // Don't render anything if cost is not available\n  if (cost === null) {\n    return null;\n  }\n\n  return (\n    <div className=\"border-b border-[var(--oh-border-subtle)]\">\n      {maxBudgetPerTask !== null && maxBudgetPerTask > 0 ? (\n        <>\n          <BudgetProgressBar currentCost={cost} maxBudget={maxBudgetPerTask} />\n          <BudgetUsageText currentCost={cost} maxBudget={maxBudgetPerTask} />\n        </>\n      ) : (\n        <span className=\"text-xs text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$NO_BUDGET_LIMIT)}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAWA,SAAgB,EAAc,EAAE,SAAM,uBAAwC;CAC5E,IAAM,EAAE,SAAM,EAAe,WAAW;CAOxC,OAJI,MAAS,OACJ,OAIP,kBAAC,OAAD;EAAK,WAAU;YACZ,MAAqB,QAAQ,IAAmB,IAC/C,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAmB,aAAa;GAAM,WAAW;EAAmB,CAAA,GACpE,kBAAC,GAAD;GAAiB,aAAa;GAAM,WAAW;EAAmB,CAAA,CAClE,EAAA,CAAA,IAEF,kBAAC,QAAD;GAAM,WAAU;aACb,EAAE,EAAQ,4BAA4B;EACnC,CAAA;CAEL,CAAA;AAET"}
+{"version":3,"file":"budget-display.js","names":[],"sources":["../../../../src/components/features/conversation-panel/budget-display.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { BudgetProgressBar } from \"./budget-progress-bar\";\nimport { BudgetUsageText } from \"./budget-usage-text\";\n\ninterface BudgetDisplayProps {\n  cost: number | null;\n  maxBudgetPerTask: number | null;\n}\n\nexport function BudgetDisplay({ cost, maxBudgetPerTask }: BudgetDisplayProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  // Don't render anything if cost is not available\n  if (cost === null) {\n    return null;\n  }\n\n  return (\n    <div>\n      {maxBudgetPerTask !== null && maxBudgetPerTask > 0 ? (\n        <>\n          <BudgetProgressBar currentCost={cost} maxBudget={maxBudgetPerTask} />\n          <BudgetUsageText currentCost={cost} maxBudget={maxBudgetPerTask} />\n        </>\n      ) : (\n        <span className=\"text-xs text-[var(--oh-muted)]\">\n          {t(I18nKey.CONVERSATION$NO_BUDGET_LIMIT)}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAWA,SAAgB,EAAc,EAAE,SAAM,uBAAwC;CAC5E,IAAM,EAAE,SAAM,EAAe,WAAW;CAOxC,OAJI,MAAS,OACJ,OAIP,kBAAC,OAAD,EAAA,UACG,MAAqB,QAAQ,IAAmB,IAC/C,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EAAmB,aAAa;EAAM,WAAW;CAAmB,CAAA,GACpE,kBAAC,GAAD;EAAiB,aAAa;EAAM,WAAW;CAAmB,CAAA,CAClE,EAAA,CAAA,IAEF,kBAAC,QAAD;EAAM,WAAU;YACb,EAAE,EAAQ,4BAA4B;CACnC,CAAA,EAEL,CAAA;AAET"}

package/dist/components/features/conversation-panel/budget-progress-bar.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs");let t=require("react/jsx-runtime");function n({currentCost:n,maxBudget:r}){let i=n/r*100;return(0,t.jsx)(`div`,{className:`w-full h-1.5 bg-tertiary rounded-full overflow-hidden mt-1`,children:(0,t.jsx)(`div`,{className:e.cn(`h-full transition-all duration-300`,i>80?`bg-red-500`:`bg-blue-500`),style:{width:`${Math.min(100,i)}%`}})})}exports.BudgetProgressBar=n;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs");let t=require("react/jsx-runtime");function n({currentCost:n,maxBudget:r}){let i=n/r*100;return(0,t.jsx)(`div`,{className:`relative mt-1 h-1.5 w-full rounded-full bg-tertiary`,children:(0,t.jsx)(`div`,{className:e.cn(`absolute inset-y-0 left-0 rounded-full transition-all duration-300`,i>80?`bg-red-500`:`bg-blue-500`),style:{width:`${Math.min(100,i)}%`}})})}exports.BudgetProgressBar=n;
 //# sourceMappingURL=budget-progress-bar.cjs.map

package/dist/components/features/conversation-panel/budget-progress-bar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"budget-progress-bar.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/budget-progress-bar.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\n\ninterface BudgetProgressBarProps {\n  currentCost: number;\n  maxBudget: number;\n}\n\nexport function BudgetProgressBar({\n  currentCost,\n  maxBudget,\n}: BudgetProgressBarProps) {\n  const usagePercentage = (currentCost / maxBudget) * 100;\n  const isNearLimit = usagePercentage > 80;\n\n  return (\n    <div className=\"w-full h-1.5 bg-tertiary rounded-full overflow-hidden mt-1\">\n      <div\n        className={cn(\n          \"h-full transition-all duration-300\",\n          isNearLimit ? \"bg-red-500\" : \"bg-blue-500\",\n        )}\n        // runtime usage-percentage width\n        style={{\n          width: `${Math.min(100, usagePercentage)}%`,\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":"kIAOA,SAAgB,EAAkB,CAChC,cACA,aACyB,CACzB,IAAM,EAAmB,EAAc,EAAa,IAGpD,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,uEACb,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,qCANY,EAAkB,GAOhB,aAAe,aAC/B,EAEA,MAAO,CACL,MAAO,GAAG,KAAK,IAAI,IAAK,CAAe,EAAE,EAC3C,CACD,CAAA,CACE,CAAA,CAET"}
+{"version":3,"file":"budget-progress-bar.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/budget-progress-bar.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\n\ninterface BudgetProgressBarProps {\n  currentCost: number;\n  maxBudget: number;\n}\n\nexport function BudgetProgressBar({\n  currentCost,\n  maxBudget,\n}: BudgetProgressBarProps) {\n  const usagePercentage = (currentCost / maxBudget) * 100;\n  const isNearLimit = usagePercentage > 80;\n\n  return (\n    <div className=\"relative mt-1 h-1.5 w-full rounded-full bg-tertiary\">\n      <div\n        className={cn(\n          \"absolute inset-y-0 left-0 rounded-full transition-all duration-300\",\n          isNearLimit ? \"bg-red-500\" : \"bg-blue-500\",\n        )}\n        // runtime usage-percentage width\n        style={{\n          width: `${Math.min(100, usagePercentage)}%`,\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":"kIAOA,SAAgB,EAAkB,CAChC,cACA,aACyB,CACzB,IAAM,EAAmB,EAAc,EAAa,IAGpD,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,gEACb,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,qEANY,EAAkB,GAOhB,aAAe,aAC/B,EAEA,MAAO,CACL,MAAO,GAAG,KAAK,IAAI,IAAK,CAAe,EAAE,EAC3C,CACD,CAAA,CACE,CAAA,CAET"}

package/dist/components/features/conversation-panel/budget-progress-bar.js

@@ -4,9 +4,9 @@ import { jsx as t } from "react/jsx-runtime";
 function n({ currentCost: n, maxBudget: r }) {
 	let i = n / r * 100;
 	return /* @__PURE__ */ t("div", {
-		className: "w-full h-1.5 bg-tertiary rounded-full overflow-hidden mt-1",
+		className: "relative mt-1 h-1.5 w-full rounded-full bg-tertiary",
 		children: /* @__PURE__ */ t("div", {
-			className: e("h-full transition-all duration-300", i > 80 ? "bg-red-500" : "bg-blue-500"),
+			className: e("absolute inset-y-0 left-0 rounded-full transition-all duration-300", i > 80 ? "bg-red-500" : "bg-blue-500"),
 			style: { width: `${Math.min(100, i)}%` }
 		})
 	});

package/dist/components/features/conversation-panel/budget-progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"budget-progress-bar.js","names":[],"sources":["../../../../src/components/features/conversation-panel/budget-progress-bar.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\n\ninterface BudgetProgressBarProps {\n  currentCost: number;\n  maxBudget: number;\n}\n\nexport function BudgetProgressBar({\n  currentCost,\n  maxBudget,\n}: BudgetProgressBarProps) {\n  const usagePercentage = (currentCost / maxBudget) * 100;\n  const isNearLimit = usagePercentage > 80;\n\n  return (\n    <div className=\"w-full h-1.5 bg-tertiary rounded-full overflow-hidden mt-1\">\n      <div\n        className={cn(\n          \"h-full transition-all duration-300\",\n          isNearLimit ? \"bg-red-500\" : \"bg-blue-500\",\n        )}\n        // runtime usage-percentage width\n        style={{\n          width: `${Math.min(100, usagePercentage)}%`,\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;AAOA,SAAgB,EAAkB,EAChC,gBACA,gBACyB;CACzB,IAAM,IAAmB,IAAc,IAAa;CAGpD,OACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GACE,WAAW,EACT,sCANY,IAAkB,KAOhB,eAAe,aAC/B;GAEA,OAAO,EACL,OAAO,GAAG,KAAK,IAAI,KAAK,CAAe,EAAE,GAC3C;EACD,CAAA;CACE,CAAA;AAET"}
+{"version":3,"file":"budget-progress-bar.js","names":[],"sources":["../../../../src/components/features/conversation-panel/budget-progress-bar.tsx"],"sourcesContent":["import { cn } from \"#/utils/utils\";\n\ninterface BudgetProgressBarProps {\n  currentCost: number;\n  maxBudget: number;\n}\n\nexport function BudgetProgressBar({\n  currentCost,\n  maxBudget,\n}: BudgetProgressBarProps) {\n  const usagePercentage = (currentCost / maxBudget) * 100;\n  const isNearLimit = usagePercentage > 80;\n\n  return (\n    <div className=\"relative mt-1 h-1.5 w-full rounded-full bg-tertiary\">\n      <div\n        className={cn(\n          \"absolute inset-y-0 left-0 rounded-full transition-all duration-300\",\n          isNearLimit ? \"bg-red-500\" : \"bg-blue-500\",\n        )}\n        // runtime usage-percentage width\n        style={{\n          width: `${Math.min(100, usagePercentage)}%`,\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;AAOA,SAAgB,EAAkB,EAChC,gBACA,gBACyB;CACzB,IAAM,IAAmB,IAAc,IAAa;CAGpD,OACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GACE,WAAW,EACT,sEANY,IAAkB,KAOhB,eAAe,aAC/B;GAEA,OAAO,EACL,OAAO,GAAG,KAAK,IAAI,KAAK,CAAe,EAAE,GAC3C;EACD,CAAA;CACE,CAAA;AAET"}

package/dist/components/features/conversation-panel/compact-conversation-row.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../node_modules/@heroui/tooltip/dist/chunk-AUA5GDXN.cjs"),a=require("../../shared/navigation-link.cjs"),o=require("../../../hooks/use-backend-scoped-path.cjs"),s=require("./conversation-status-dot.cjs"),c=require("./conversation-card/conversation-card-footer.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");function d({conversationId:e,title:l,selectedRepository:d,executionStatus:f,sandboxStatus:p,lastUpdatedAt:m,createdAt:h,workspaceWorkingDir:g,isActive:_=!1,onClose:v,showRepositoryMetadata:y=!0,llmModel:b=null,showLlmProfiles:x=!1,agentKind:S=null,acpServer:C=null,tags:w=null,showTags:T=!1}){let{t:E}=t.useTranslation(`openhands`),D=o.useBackendScopedPath();return(0,u.jsx)(i.tooltip_default,{content:(0,u.jsxs)(`div`,{className:`w-[260px] p-3`,children:[(0,u.jsxs)(`div`,{className:`flex items-center gap-2 mb-1`,children:[(0,u.jsx)(s.ConversationStatusDot,{executionStatus:f,sandboxStatus:p,showTooltip:!1}),(0,u.jsx)(`span`,{className:`text-sm font-medium text-white truncate`,title:l,children:l||E(n.I18nKey.CONVERSATION$UNTITLED)})]}),(0,u.jsx)(c.ConversationCardFooter,{selectedRepository:d,lastUpdatedAt:m,createdAt:h,executionStatus:f,workspaceWorkingDir:g,showRepositoryMetadata:y,llmModel:b,showAgentChip:x,agentKind:S,acpServer:C,tags:w,showTags:T})]}),placement:`right`,closeDelay:100,className:`bg-[var(--oh-surface)] text-white border border-[var(--oh-border-subtle)] shadow-xl p-0`,disableAnimation:!1,children:(0,u.jsx)(a.NavigationLink,{to:D(`/conversations/${e}`),onClick:v,"data-testid":`compact-conversation-row`,"data-conversation-id":e,"aria-label":l||e,className:({isActive:e})=>r.cn(`flex items-center justify-center w-10 h-9 mx-auto rounded-md`,`transition-colors cursor-pointer`,e||_?`bg-tertiary`:`hover:bg-[var(--oh-surface-raised)]`),children:(0,u.jsx)(s.ConversationStatusDot,{executionStatus:f,sandboxStatus:p,showTooltip:!1})})})}exports.CompactConversationRow=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../hooks/use-backend-scoped-path.cjs"),a=require("../../../node_modules/@heroui/tooltip/dist/chunk-AUA5GDXN.cjs"),o=require("../../shared/navigation-link.cjs"),s=require("./conversation-status-dot.cjs"),c=require("./conversation-card/conversation-card-footer.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");function d({conversationId:e,title:l,selectedRepository:d,executionStatus:f,sandboxStatus:p,lastUpdatedAt:m,createdAt:h,workspaceWorkingDir:g,isActive:_=!1,onClose:v,showRepositoryMetadata:y=!0,llmModel:b=null,showLlmProfiles:x=!1,agentKind:S=null,acpServer:C=null,tags:w=null,showTags:T=!1}){let{t:E}=t.useTranslation(`openhands`),D=i.useBackendScopedPath();return(0,u.jsx)(a.tooltip_default,{content:(0,u.jsxs)(`div`,{className:`w-[260px] p-3`,children:[(0,u.jsxs)(`div`,{className:`flex items-center gap-2 mb-1`,children:[(0,u.jsx)(s.ConversationStatusDot,{executionStatus:f,sandboxStatus:p,showTooltip:!1}),(0,u.jsx)(`span`,{className:`text-sm font-medium text-white truncate`,title:l,children:l||E(n.I18nKey.CONVERSATION$UNTITLED)})]}),(0,u.jsx)(c.ConversationCardFooter,{selectedRepository:d,lastUpdatedAt:m,createdAt:h,executionStatus:f,workspaceWorkingDir:g,showRepositoryMetadata:y,llmModel:b,showAgentChip:x,agentKind:S,acpServer:C,tags:w,showTags:T})]}),placement:`right`,closeDelay:100,className:`bg-[var(--oh-surface)] text-white border border-[var(--oh-border-subtle)] shadow-xl p-0`,disableAnimation:!1,children:(0,u.jsx)(o.NavigationLink,{to:D(`/conversations/${e}`),onClick:v,"data-testid":`compact-conversation-row`,"data-conversation-id":e,"aria-label":l||e,className:({isActive:e})=>r.cn(`flex items-center justify-center w-10 h-9 mx-auto rounded-md`,`transition-colors cursor-pointer`,e||_?`bg-tertiary`:`hover:bg-[var(--oh-surface-raised)]`),children:(0,u.jsx)(s.ConversationStatusDot,{executionStatus:f,sandboxStatus:p,showTooltip:!1})})})}exports.CompactConversationRow=d;
 //# sourceMappingURL=compact-conversation-row.cjs.map

package/dist/components/features/conversation-panel/compact-conversation-row.js

@@ -1,17 +1,17 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
 import { cn as n } from "../../../utils/utils.js";
-import { tooltip_default as r } from "../../../node_modules/@heroui/tooltip/dist/chunk-AUA5GDXN.js";
-import { NavigationLink as i } from "../../shared/navigation-link.js";
-import { useBackendScopedPath as a } from "../../../hooks/use-backend-scoped-path.js";
+import { useBackendScopedPath as r } from "../../../hooks/use-backend-scoped-path.js";
+import { tooltip_default as i } from "../../../node_modules/@heroui/tooltip/dist/chunk-AUA5GDXN.js";
+import { NavigationLink as a } from "../../shared/navigation-link.js";
 import { ConversationStatusDot as o } from "./conversation-status-dot.js";
 import { ConversationCardFooter as s } from "./conversation-card/conversation-card-footer.js";
 import "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/features/conversation-panel/compact-conversation-row.tsx
 function u({ conversationId: u, title: d, selectedRepository: f, executionStatus: p, sandboxStatus: m, lastUpdatedAt: h, createdAt: g, workspaceWorkingDir: _, isActive: v = !1, onClose: y, showRepositoryMetadata: b = !0, llmModel: x = null, showLlmProfiles: S = !1, agentKind: C = null, acpServer: w = null, tags: T = null, showTags: E = !1 }) {
-	let { t: D } = e("openhands"), O = a();
-	return /* @__PURE__ */ c(r, {
+	let { t: D } = e("openhands"), O = r();
+	return /* @__PURE__ */ c(i, {
 		content: /* @__PURE__ */ l("div", {
 			className: "w-[260px] p-3",
 			children: [/* @__PURE__ */ l("div", {
@@ -44,7 +44,7 @@ function u({ conversationId: u, title: d, selectedRepository: f, executionStatus
 		closeDelay: 100,
 		className: "bg-[var(--oh-surface)] text-white border border-[var(--oh-border-subtle)] shadow-xl p-0",
 		disableAnimation: !1,
-		children: /* @__PURE__ */ c(i, {
+		children: /* @__PURE__ */ c(a, {
 			to: O(`/conversations/${u}`),
 			onClick: y,
 			"data-testid": "compact-conversation-row",

package/dist/components/features/conversation-panel/confirm-archive-modal.cjs

@@ -0,0 +1,2 @@
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/Trans.cjs"),n=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),r=require("../../../i18n/declaration.cjs"),i=require("../../shared/modals/modal-backdrop.cjs"),a=require("../../shared/modals/modal-body.cjs"),o=require("../../shared/modals/confirmation-modals/base-modal.cjs"),s=require("../settings/brand-button.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");function u({onConfirm:e,onCancel:c,conversationTitle:u}){let{t:d}=n.useTranslation(`openhands`),f=u!=null&&u!==``?(0,l.jsx)(t.Trans,{ns:`openhands`,i18nKey:r.I18nKey.CONVERSATION$ARCHIVE_WARNING_WITH_TITLE,values:{title:u},components:{title:(0,l.jsx)(`span`,{className:`text-white`})}}):d(r.I18nKey.CONVERSATION$ARCHIVE_WARNING);return(0,l.jsx)(i.ModalBackdrop,{onClose:c,children:(0,l.jsxs)(a.ModalBody,{className:`items-start border border-[var(--oh-border)]`,children:[(0,l.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,l.jsx)(o.BaseModalTitle,{title:d(r.I18nKey.CONVERSATION$CONFIRM_ARCHIVE)}),(0,l.jsx)(o.BaseModalDescription,{children:f})]}),(0,l.jsxs)(`div`,{className:`flex justify-end gap-2 w-full`,onClick:e=>e.stopPropagation(),children:[(0,l.jsx)(s.BrandButton,{type:`button`,variant:`secondary`,onClick:c,testId:`cancel-button`,children:d(r.I18nKey.BUTTON$CANCEL)}),(0,l.jsx)(s.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`confirm-button`,children:d(r.I18nKey.ACTION$CONFIRM_ARCHIVE)})]})]})})}exports.ConfirmArchiveModal=u;
+//# sourceMappingURL=confirm-archive-modal.cjs.map

package/dist/components/features/conversation-panel/confirm-archive-modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-archive-modal.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/confirm-archive-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { Trans, useTranslation } from \"react-i18next\";\nimport {\n  BaseModalDescription,\n  BaseModalTitle,\n} from \"#/components/shared/modals/confirmation-modals/base-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { BrandButton } from \"../settings/brand-button\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\ninterface ConfirmArchiveModalProps {\n  onConfirm: () => void;\n  onCancel: () => void;\n  conversationTitle?: string;\n}\n\nexport function ConfirmArchiveModal({\n  onConfirm,\n  onCancel,\n  conversationTitle,\n}: ConfirmArchiveModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  const confirmationMessage =\n    conversationTitle != null && conversationTitle !== \"\" ? (\n      <Trans\n        ns=\"openhands\"\n        i18nKey={I18nKey.CONVERSATION$ARCHIVE_WARNING_WITH_TITLE}\n        values={{ title: conversationTitle }}\n        components={{ title: <span className=\"text-white\" /> }}\n      />\n    ) : (\n      t(I18nKey.CONVERSATION$ARCHIVE_WARNING)\n    );\n\n  return (\n    <ModalBackdrop onClose={onCancel}>\n      <ModalBody className=\"items-start border border-[var(--oh-border)]\">\n        <div className=\"flex flex-col gap-2\">\n          <BaseModalTitle title={t(I18nKey.CONVERSATION$CONFIRM_ARCHIVE)} />\n          <BaseModalDescription>{confirmationMessage}</BaseModalDescription>\n        </div>\n        <div\n          className=\"flex justify-end gap-2 w-full\"\n          onClick={(event) => event.stopPropagation()}\n        >\n          <BrandButton\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onCancel}\n            testId=\"cancel-button\"\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          <BrandButton\n            type=\"button\"\n            variant=\"primary\"\n            onClick={onConfirm}\n            testId=\"confirm-button\"\n          >\n            {t(I18nKey.ACTION$CONFIRM_ARCHIVE)}\n          </BrandButton>\n        </div>\n      </ModalBody>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"khBAiBA,SAAgB,EAAoB,CAClC,YACA,WACA,qBAC2B,CAC3B,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAElC,EACJ,GAAqB,MAAQ,IAAsB,IACjD,EAAA,EAAA,KAAC,EAAA,MAAD,CACE,GAAG,YACH,QAAS,EAAA,QAAQ,wCACjB,OAAQ,CAAE,MAAO,CAAkB,EACnC,WAAY,CAAE,OAAO,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,YAAc,CAAA,CAAE,CACtD,CAAA,EAED,EAAE,EAAA,QAAQ,4BAA4B,EAG1C,OACE,EAAA,EAAA,KAAC,EAAA,cAAD,CAAe,QAAS,YACtB,EAAA,EAAA,MAAC,EAAA,UAAD,CAAW,UAAU,wDAArB,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+BAAf,EACE,EAAA,EAAA,KAAC,EAAA,eAAD,CAAgB,MAAO,EAAE,EAAA,QAAQ,4BAA4B,CAAI,CAAA,GACjE,EAAA,EAAA,KAAC,EAAA,qBAAD,CAAA,SAAuB,CAA0C,CAAA,CAC9D,KACL,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,gCACV,QAAU,GAAU,EAAM,gBAAgB,WAF5C,EAIE,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAQ,YACR,QAAS,EACT,OAAO,yBAEN,EAAE,EAAA,QAAQ,aAAa,CACb,CAAA,GACb,EAAA,EAAA,KAAC,EAAA,YAAD,CACE,KAAK,SACL,QAAQ,UACR,QAAS,EACT,OAAO,0BAEN,EAAE,EAAA,QAAQ,sBAAsB,CACtB,CAAA,CACV,GACI,GACE,CAAA,CAEnB"}

package/dist/components/features/conversation-panel/confirm-archive-modal.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ConfirmArchiveModalProps {
+    onConfirm: () => void;
+    onCancel: () => void;
+    conversationTitle?: string;
+}
+export declare function ConfirmArchiveModal({ onConfirm, onCancel, conversationTitle, }: ConfirmArchiveModalProps): React.JSX.Element;
+export {};