@openhands/agent-canvas 1.17.0 → 1.18.0

package/dist/components/features/chat/components/chat-input-llm-profile-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input-llm-profile-picker.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-llm-profile-picker.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useChatInputLlmProfileState } from \"#/hooks/use-chat-input-llm-profile-state\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputPillButtonClassName } from \"#/utils/form-control-classes\";\nimport { formatModelNameForDisplay } from \"#/utils/format-model-name\";\n\nconst PROFILE_LABEL_MAX_CHARS = 18;\n\nfunction truncateLabel(label: string): string {\n  return label.length <= PROFILE_LABEL_MAX_CHARS\n    ? label\n    : `${label.slice(0, PROFILE_LABEL_MAX_CHARS)}…`;\n}\n\ninterface ChatInputLlmProfileMenuContentProps {\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\n/**\n * The in-conversation OpenHands LLM-profile switcher list. Selecting a profile\n * live-swaps the running conversation's LLM via `/switch_profile` (the ACP\n * analog is {@link ChatInputModelMenuContent}). Shared by the inline pill and\n * the chat-input overflow submenu.\n */\nexport function ChatInputLlmProfileMenuContent({\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputLlmProfileMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const {\n    profiles,\n    currentProfileName,\n    currentProfileModel,\n    canSwitchProfile,\n    selectProfile,\n  } = useChatInputLlmProfileState();\n  // Read-only surfaces (a cloud member on the home page, or a start-task route)\n  // still name the active profile — the same shape ChatInputModelMenuContent\n  // uses when the ACP picker is gated off.\n  const showProfileList = canSwitchProfile && profiles.length > 0;\n  const readOnlyProfileName = canSwitchProfile ? null : currentProfileName;\n\n  const handleSelect = (profileName: string) => {\n    selectProfile(profileName);\n    onClose();\n  };\n\n  return (\n    <>\n      {showProfileList && (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the label as a menu item. */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.SETTINGS$AVAILABLE_PROFILES)}\n            </Typography.Text>\n          </li>\n          {profiles.map((profile) => {\n            const isCurrent = profile.name === currentProfileName;\n            const displayModel = formatModelNameForDisplay(profile.model);\n            return (\n              <ContextMenuListItem\n                key={profile.name}\n                testId={`chat-input-llm-profile-option-${profile.name}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  if (isCurrent) {\n                    onClose();\n                    return;\n                  }\n                  handleSelect(profile.name);\n                }}\n                className={cn(\n                  \"flex flex-col items-stretch gap-0.5\",\n                  isCurrent && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span className=\"flex items-center gap-2\">\n                  <span\n                    className=\"flex-1 truncate text-sm leading-5\"\n                    title={profile.model ?? profile.name}\n                  >\n                    {profile.name}\n                  </span>\n                  {isCurrent && (\n                    <CheckIcon\n                      width={14}\n                      height={14}\n                      className=\"shrink-0\"\n                      aria-hidden\n                    />\n                  )}\n                </span>\n                {displayModel && (\n                  <span className=\"block truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                    {displayModel}\n                  </span>\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      )}\n      {readOnlyProfileName && (\n        <li className=\"text-sm\" data-testid=\"chat-input-llm-profile-current\">\n          <div className=\"flex flex-col gap-0.5 p-2 leading-5 text-[var(--oh-foreground)]\">\n            <span className=\"truncate\" title={readOnlyProfileName}>\n              {readOnlyProfileName}\n            </span>\n            {currentProfileModel && (\n              <span className=\"truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                {formatModelNameForDisplay(currentProfileModel)}\n              </span>\n            )}\n          </div>\n        </li>\n      )}\n      {(showProfileList || readOnlyProfileName) && (\n        <Divider inset={dividerInset} />\n      )}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to=\"/settings/llm\"\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{t(I18nKey.SETTINGS$LLM_PROFILES)}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputLlmProfilePicker() {\n  const { t } = useTranslation(\"openhands\");\n  const { profiles, currentProfileName, isLoading, isSwitching } =\n    useChatInputLlmProfileState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  // No LLM profiles yet (or the agent-server lacks the surface): stay out of\n  // the way, exactly like the ACP/AgentProfile pickers.\n  if (isLoading || profiles.length === 0) {\n    return null;\n  }\n\n  const label = currentProfileName ?? t(I18nKey.LLM$SELECT_MODEL_PLACEHOLDER);\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={cn(chatInputPillButtonClassName, \"max-w-[200px]\")}\n        title={currentProfileName ?? undefined}\n        data-testid=\"chat-input-llm-profile\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        // Disabled mid-switch so re-opening can't fire a second /switch_profile.\n        disabled={isSwitching}\n        aria-busy={isSwitching}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span className=\"truncate\">{truncateLabel(label)}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-llm-profile-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputLlmProfileMenuContent\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"chat-input-llm-profile-picker.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-llm-profile-picker.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useChatInputLlmProfileState } from \"#/hooks/use-chat-input-llm-profile-state\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputPillButtonClassName } from \"#/utils/form-control-classes\";\nimport { useFreeModels } from \"#/hooks/query/use-free-models\";\nimport { formatModelPillLabel } from \"#/utils/format-model-name\";\n\nconst PROFILE_LABEL_MAX_CHARS = 18;\n\nfunction truncateLabel(label: string): string {\n  return label.length <= PROFILE_LABEL_MAX_CHARS\n    ? label\n    : `${label.slice(0, PROFILE_LABEL_MAX_CHARS)}…`;\n}\n\ninterface ChatInputLlmProfileMenuContentProps {\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\n/**\n * The in-conversation OpenHands LLM-profile switcher list. Selecting a profile\n * live-swaps the running conversation's LLM via `/switch_profile` (the ACP\n * analog is {@link ChatInputModelMenuContent}). Shared by the inline pill and\n * the chat-input overflow submenu.\n */\nexport function ChatInputLlmProfileMenuContent({\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputLlmProfileMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const freeModels = useFreeModels();\n  const {\n    profiles,\n    currentProfileName,\n    currentProfileModel,\n    canSwitchProfile,\n    selectProfile,\n  } = useChatInputLlmProfileState();\n  // Read-only surfaces (a cloud member on the home page, or a start-task route)\n  // still name the active profile — the same shape ChatInputModelMenuContent\n  // uses when the ACP picker is gated off.\n  const showProfileList = canSwitchProfile && profiles.length > 0;\n  const readOnlyProfileName = canSwitchProfile ? null : currentProfileName;\n\n  const handleSelect = (profileName: string) => {\n    selectProfile(profileName);\n    onClose();\n  };\n\n  return (\n    <>\n      {showProfileList && (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the label as a menu item. */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.SETTINGS$AVAILABLE_PROFILES)}\n            </Typography.Text>\n          </li>\n          {profiles.map((profile) => {\n            const isCurrent = profile.name === currentProfileName;\n            const displayModel = formatModelPillLabel(\n              profile.model,\n              freeModels,\n            );\n            return (\n              <ContextMenuListItem\n                key={profile.name}\n                testId={`chat-input-llm-profile-option-${profile.name}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  if (isCurrent) {\n                    onClose();\n                    return;\n                  }\n                  handleSelect(profile.name);\n                }}\n                className={cn(\n                  \"flex flex-col items-stretch gap-0.5\",\n                  isCurrent && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span className=\"flex items-center gap-2\">\n                  <span\n                    className=\"flex-1 truncate text-sm leading-5\"\n                    title={profile.model ?? profile.name}\n                  >\n                    {profile.name}\n                  </span>\n                  {isCurrent && (\n                    <CheckIcon\n                      width={14}\n                      height={14}\n                      className=\"shrink-0\"\n                      aria-hidden\n                    />\n                  )}\n                </span>\n                {displayModel && (\n                  <span className=\"block truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                    {displayModel}\n                  </span>\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      )}\n      {readOnlyProfileName && (\n        <li className=\"text-sm\" data-testid=\"chat-input-llm-profile-current\">\n          <div className=\"flex flex-col gap-0.5 p-2 leading-5 text-[var(--oh-foreground)]\">\n            <span className=\"truncate\" title={readOnlyProfileName}>\n              {readOnlyProfileName}\n            </span>\n            {currentProfileModel && (\n              <span className=\"truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                {formatModelPillLabel(currentProfileModel, freeModels)}\n              </span>\n            )}\n          </div>\n        </li>\n      )}\n      {(showProfileList || readOnlyProfileName) && (\n        <Divider inset={dividerInset} />\n      )}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to=\"/settings/llm\"\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{t(I18nKey.SETTINGS$LLM_PROFILES)}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputLlmProfilePicker() {\n  const { t } = useTranslation(\"openhands\");\n  const { profiles, currentProfileName, isLoading, isSwitching } =\n    useChatInputLlmProfileState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  // No LLM profiles yet (or the agent-server lacks the surface): stay out of\n  // the way, exactly like the ACP/AgentProfile pickers.\n  if (isLoading || profiles.length === 0) {\n    return null;\n  }\n\n  const label = currentProfileName ?? t(I18nKey.LLM$SELECT_MODEL_PLACEHOLDER);\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={cn(chatInputPillButtonClassName, \"max-w-[200px]\")}\n        title={currentProfileName ?? undefined}\n        data-testid=\"chat-input-llm-profile\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        // Disabled mid-switch so re-opening can't fire a second /switch_profile.\n        disabled={isSwitching}\n        aria-busy={isSwitching}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span className=\"truncate\">{truncateLabel(label)}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-llm-profile-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputLlmProfileMenuContent\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/components/chat-input-llm-profile-picker.js

@@ -3,132 +3,133 @@ import { I18nKey as t } from "../../../../i18n/declaration.js";
 import { cn as n } from "../../../../utils/utils.js";
 import r from "../../../../icons/checkmark.js";
 import { chatInputPillButtonClassName as i } from "../../../../utils/form-control-classes.js";
-import { formatModelNameForDisplay as a } from "../../../../utils/format-model-name.js";
-import { Typography as o } from "../../../../ui/typography.js";
-import { ComboboxCaretInline as s } from "../../../../ui/combobox-caret.js";
-import { ContextMenu as c } from "../../../../ui/context-menu.js";
-import { ContextMenuListItem as l } from "../../context-menu/context-menu-list-item.js";
-import { useClickOutsideElement as u } from "../../../../hooks/use-click-outside-element.js";
-import d from "../../../../icons/settings-gear.js";
-import { NavigationLink as f } from "../../../shared/navigation-link.js";
-import { Divider as p } from "../../../../ui/divider.js";
-import { useChatInputLlmProfileState as m } from "../../../../hooks/use-chat-input-llm-profile-state.js";
-import h from "react";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useFreeModels as a } from "../../../../hooks/query/use-free-models.js";
+import { formatModelPillLabel as o } from "../../../../utils/format-model-name.js";
+import { Typography as s } from "../../../../ui/typography.js";
+import { ComboboxCaretInline as c } from "../../../../ui/combobox-caret.js";
+import { ContextMenu as l } from "../../../../ui/context-menu.js";
+import { ContextMenuListItem as u } from "../../context-menu/context-menu-list-item.js";
+import { useClickOutsideElement as d } from "../../../../hooks/use-click-outside-element.js";
+import f from "../../../../icons/settings-gear.js";
+import { NavigationLink as p } from "../../../shared/navigation-link.js";
+import { Divider as m } from "../../../../ui/divider.js";
+import { useChatInputLlmProfileState as h } from "../../../../hooks/use-chat-input-llm-profile-state.js";
+import g from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/features/chat/components/chat-input-llm-profile-picker.tsx
-var y = 18;
-function b(e) {
-	return e.length <= y ? e : `${e.slice(0, y)}…`;
+var b = 18;
+function x(e) {
+	return e.length <= b ? e : `${e.slice(0, b)}…`;
 }
-function x({ onClose: i, dividerInset: s, settingsLinkClassName: c, settingsIconClassName: u }) {
-	let { t: h } = e("openhands"), { profiles: y, currentProfileName: b, currentProfileModel: x, canSwitchProfile: S, selectProfile: C } = m(), w = S && y.length > 0, T = S ? null : b, E = (e) => {
-		C(e), i();
+function S({ onClose: i, dividerInset: c, settingsLinkClassName: l, settingsIconClassName: d }) {
+	let { t: g } = e("openhands"), b = a(), { profiles: x, currentProfileName: S, currentProfileModel: C, canSwitchProfile: w, selectProfile: T } = h(), E = w && x.length > 0, D = w ? null : S, O = (e) => {
+		T(e), i();
 	};
-	return /* @__PURE__ */ v(g, { children: [
-		w && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("li", {
+	return /* @__PURE__ */ y(_, { children: [
+		E && /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("li", {
 			role: "presentation",
 			className: "px-2 pt-1 pb-0.5",
-			children: /* @__PURE__ */ _(o.Text, {
+			children: /* @__PURE__ */ v(s.Text, {
 				className: "text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4",
-				children: h(t.SETTINGS$AVAILABLE_PROFILES)
+				children: g(t.SETTINGS$AVAILABLE_PROFILES)
 			})
-		}), y.map((e) => {
-			let t = e.name === b, o = a(e.model);
-			return /* @__PURE__ */ v(l, {
+		}), x.map((e) => {
+			let t = e.name === S, a = o(e.model, b);
+			return /* @__PURE__ */ y(u, {
 				testId: `chat-input-llm-profile-option-${e.name}`,
 				onClick: (n) => {
 					if (n.preventDefault(), n.stopPropagation(), t) {
 						i();
 						return;
 					}
-					E(e.name);
+					O(e.name);
 				},
 				className: n("flex flex-col items-stretch gap-0.5", t && "bg-[var(--oh-interactive-hover)]"),
-				children: [/* @__PURE__ */ v("span", {
+				children: [/* @__PURE__ */ y("span", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ _("span", {
+					children: [/* @__PURE__ */ v("span", {
 						className: "flex-1 truncate text-sm leading-5",
 						title: e.model ?? e.name,
 						children: e.name
-					}), t && /* @__PURE__ */ _(r, {
+					}), t && /* @__PURE__ */ v(r, {
 						width: 14,
 						height: 14,
 						className: "shrink-0",
 						"aria-hidden": !0
 					})]
-				}), o && /* @__PURE__ */ _("span", {
+				}), a && /* @__PURE__ */ v("span", {
 					className: "block truncate text-xs leading-4 text-[var(--oh-muted)]",
-					children: o
+					children: a
 				})]
 			}, e.name);
 		})] }),
-		T && /* @__PURE__ */ _("li", {
+		D && /* @__PURE__ */ v("li", {
 			className: "text-sm",
 			"data-testid": "chat-input-llm-profile-current",
-			children: /* @__PURE__ */ v("div", {
+			children: /* @__PURE__ */ y("div", {
 				className: "flex flex-col gap-0.5 p-2 leading-5 text-[var(--oh-foreground)]",
-				children: [/* @__PURE__ */ _("span", {
+				children: [/* @__PURE__ */ v("span", {
 					className: "truncate",
-					title: T,
-					children: T
-				}), x && /* @__PURE__ */ _("span", {
+					title: D,
+					children: D
+				}), C && /* @__PURE__ */ v("span", {
 					className: "truncate text-xs leading-4 text-[var(--oh-muted)]",
-					children: a(x)
+					children: o(C, b)
 				})]
 			})
 		}),
-		(w || T) && /* @__PURE__ */ _(p, { inset: s }),
-		/* @__PURE__ */ _("li", {
+		(E || D) && /* @__PURE__ */ v(m, { inset: c }),
+		/* @__PURE__ */ v("li", {
 			className: "text-sm",
-			children: /* @__PURE__ */ v(f, {
+			children: /* @__PURE__ */ y(p, {
 				to: "/settings/llm",
 				onClick: i,
-				className: n("flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors", c),
-				children: [/* @__PURE__ */ _(d, {
+				className: n("flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors", l),
+				children: [/* @__PURE__ */ v(f, {
 					width: 16,
 					height: 16,
-					className: n("shrink-0", u),
+					className: n("shrink-0", d),
 					"aria-hidden": !0
-				}), /* @__PURE__ */ _("span", { children: h(t.SETTINGS$LLM_PROFILES) })]
+				}), /* @__PURE__ */ v("span", { children: g(t.SETTINGS$LLM_PROFILES) })]
 			})
 		})
 	] });
 }
-function S() {
-	let { t: r } = e("openhands"), { profiles: a, currentProfileName: o, isLoading: l, isSwitching: d } = m(), [f, p] = h.useState(!1), g = h.useRef(null), y = u(() => p(!1), g);
-	if (l || a.length === 0) return null;
-	let S = o ?? r(t.LLM$SELECT_MODEL_PLACEHOLDER);
-	return /* @__PURE__ */ v("div", {
+function C() {
+	let { t: r } = e("openhands"), { profiles: a, currentProfileName: o, isLoading: s, isSwitching: u } = h(), [f, p] = g.useState(!1), m = g.useRef(null), _ = d(() => p(!1), m);
+	if (s || a.length === 0) return null;
+	let b = o ?? r(t.LLM$SELECT_MODEL_PLACEHOLDER);
+	return /* @__PURE__ */ y("div", {
 		className: "relative min-w-0",
-		children: [/* @__PURE__ */ v("button", {
-			ref: g,
+		children: [/* @__PURE__ */ y("button", {
+			ref: m,
 			type: "button",
 			className: n(i, "max-w-[200px]"),
 			title: o ?? void 0,
 			"data-testid": "chat-input-llm-profile",
 			"aria-expanded": f,
 			"aria-haspopup": "dialog",
-			disabled: d,
-			"aria-busy": d,
+			disabled: u,
+			"aria-busy": u,
 			onClick: (e) => {
 				e.preventDefault(), e.stopPropagation(), p((e) => !e);
 			},
-			children: [/* @__PURE__ */ _("span", {
+			children: [/* @__PURE__ */ v("span", {
 				className: "truncate",
-				children: b(S)
-			}), /* @__PURE__ */ _(s, { isOpen: f })]
-		}), f && /* @__PURE__ */ _(c, {
-			ref: y,
+				children: x(b)
+			}), /* @__PURE__ */ v(c, { isOpen: f })]
+		}), f && /* @__PURE__ */ v(l, {
+			ref: _,
 			testId: "chat-input-llm-profile-popover",
 			position: "top",
 			alignment: "left",
 			spacing: "none",
 			className: "z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto",
-			children: /* @__PURE__ */ _(x, { onClose: () => p(!1) })
+			children: /* @__PURE__ */ v(S, { onClose: () => p(!1) })
 		})]
 	});
 }
 //#endregion
-export { x as ChatInputLlmProfileMenuContent, S as ChatInputLlmProfilePicker };
+export { S as ChatInputLlmProfileMenuContent, C as ChatInputLlmProfilePicker };
 
 //# sourceMappingURL=chat-input-llm-profile-picker.js.map

package/dist/components/features/chat/components/chat-input-llm-profile-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input-llm-profile-picker.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-llm-profile-picker.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useChatInputLlmProfileState } from \"#/hooks/use-chat-input-llm-profile-state\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputPillButtonClassName } from \"#/utils/form-control-classes\";\nimport { formatModelNameForDisplay } from \"#/utils/format-model-name\";\n\nconst PROFILE_LABEL_MAX_CHARS = 18;\n\nfunction truncateLabel(label: string): string {\n  return label.length <= PROFILE_LABEL_MAX_CHARS\n    ? label\n    : `${label.slice(0, PROFILE_LABEL_MAX_CHARS)}…`;\n}\n\ninterface ChatInputLlmProfileMenuContentProps {\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\n/**\n * The in-conversation OpenHands LLM-profile switcher list. Selecting a profile\n * live-swaps the running conversation's LLM via `/switch_profile` (the ACP\n * analog is {@link ChatInputModelMenuContent}). Shared by the inline pill and\n * the chat-input overflow submenu.\n */\nexport function ChatInputLlmProfileMenuContent({\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputLlmProfileMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const {\n    profiles,\n    currentProfileName,\n    currentProfileModel,\n    canSwitchProfile,\n    selectProfile,\n  } = useChatInputLlmProfileState();\n  // Read-only surfaces (a cloud member on the home page, or a start-task route)\n  // still name the active profile — the same shape ChatInputModelMenuContent\n  // uses when the ACP picker is gated off.\n  const showProfileList = canSwitchProfile && profiles.length > 0;\n  const readOnlyProfileName = canSwitchProfile ? null : currentProfileName;\n\n  const handleSelect = (profileName: string) => {\n    selectProfile(profileName);\n    onClose();\n  };\n\n  return (\n    <>\n      {showProfileList && (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the label as a menu item. */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.SETTINGS$AVAILABLE_PROFILES)}\n            </Typography.Text>\n          </li>\n          {profiles.map((profile) => {\n            const isCurrent = profile.name === currentProfileName;\n            const displayModel = formatModelNameForDisplay(profile.model);\n            return (\n              <ContextMenuListItem\n                key={profile.name}\n                testId={`chat-input-llm-profile-option-${profile.name}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  if (isCurrent) {\n                    onClose();\n                    return;\n                  }\n                  handleSelect(profile.name);\n                }}\n                className={cn(\n                  \"flex flex-col items-stretch gap-0.5\",\n                  isCurrent && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span className=\"flex items-center gap-2\">\n                  <span\n                    className=\"flex-1 truncate text-sm leading-5\"\n                    title={profile.model ?? profile.name}\n                  >\n                    {profile.name}\n                  </span>\n                  {isCurrent && (\n                    <CheckIcon\n                      width={14}\n                      height={14}\n                      className=\"shrink-0\"\n                      aria-hidden\n                    />\n                  )}\n                </span>\n                {displayModel && (\n                  <span className=\"block truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                    {displayModel}\n                  </span>\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      )}\n      {readOnlyProfileName && (\n        <li className=\"text-sm\" data-testid=\"chat-input-llm-profile-current\">\n          <div className=\"flex flex-col gap-0.5 p-2 leading-5 text-[var(--oh-foreground)]\">\n            <span className=\"truncate\" title={readOnlyProfileName}>\n              {readOnlyProfileName}\n            </span>\n            {currentProfileModel && (\n              <span className=\"truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                {formatModelNameForDisplay(currentProfileModel)}\n              </span>\n            )}\n          </div>\n        </li>\n      )}\n      {(showProfileList || readOnlyProfileName) && (\n        <Divider inset={dividerInset} />\n      )}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to=\"/settings/llm\"\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{t(I18nKey.SETTINGS$LLM_PROFILES)}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputLlmProfilePicker() {\n  const { t } = useTranslation(\"openhands\");\n  const { profiles, currentProfileName, isLoading, isSwitching } =\n    useChatInputLlmProfileState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  // No LLM profiles yet (or the agent-server lacks the surface): stay out of\n  // the way, exactly like the ACP/AgentProfile pickers.\n  if (isLoading || profiles.length === 0) {\n    return null;\n  }\n\n  const label = currentProfileName ?? t(I18nKey.LLM$SELECT_MODEL_PLACEHOLDER);\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={cn(chatInputPillButtonClassName, \"max-w-[200px]\")}\n        title={currentProfileName ?? undefined}\n        data-testid=\"chat-input-llm-profile\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        // Disabled mid-switch so re-opening can't fire a second /switch_profile.\n        disabled={isSwitching}\n        aria-busy={isSwitching}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span className=\"truncate\">{truncateLabel(label)}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-llm-profile-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputLlmProfileMenuContent\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"chat-input-llm-profile-picker.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-llm-profile-picker.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useChatInputLlmProfileState } from \"#/hooks/use-chat-input-llm-profile-state\";\nimport { ComboboxCaretInline } from \"#/ui/combobox-caret\";\nimport SettingsGearIcon from \"#/icons/settings-gear.svg?react\";\nimport CheckIcon from \"#/icons/checkmark.svg?react\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { ContextMenuListItem } from \"#/components/features/context-menu/context-menu-list-item\";\nimport { Divider } from \"#/ui/divider\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { chatInputPillButtonClassName } from \"#/utils/form-control-classes\";\nimport { useFreeModels } from \"#/hooks/query/use-free-models\";\nimport { formatModelPillLabel } from \"#/utils/format-model-name\";\n\nconst PROFILE_LABEL_MAX_CHARS = 18;\n\nfunction truncateLabel(label: string): string {\n  return label.length <= PROFILE_LABEL_MAX_CHARS\n    ? label\n    : `${label.slice(0, PROFILE_LABEL_MAX_CHARS)}…`;\n}\n\ninterface ChatInputLlmProfileMenuContentProps {\n  onClose: () => void;\n  dividerInset?: \"menu\";\n  settingsLinkClassName?: string;\n  settingsIconClassName?: string;\n}\n\n/**\n * The in-conversation OpenHands LLM-profile switcher list. Selecting a profile\n * live-swaps the running conversation's LLM via `/switch_profile` (the ACP\n * analog is {@link ChatInputModelMenuContent}). Shared by the inline pill and\n * the chat-input overflow submenu.\n */\nexport function ChatInputLlmProfileMenuContent({\n  onClose,\n  dividerInset,\n  settingsLinkClassName,\n  settingsIconClassName,\n}: ChatInputLlmProfileMenuContentProps) {\n  const { t } = useTranslation(\"openhands\");\n  const freeModels = useFreeModels();\n  const {\n    profiles,\n    currentProfileName,\n    currentProfileModel,\n    canSwitchProfile,\n    selectProfile,\n  } = useChatInputLlmProfileState();\n  // Read-only surfaces (a cloud member on the home page, or a start-task route)\n  // still name the active profile — the same shape ChatInputModelMenuContent\n  // uses when the ACP picker is gated off.\n  const showProfileList = canSwitchProfile && profiles.length > 0;\n  const readOnlyProfileName = canSwitchProfile ? null : currentProfileName;\n\n  const handleSelect = (profileName: string) => {\n    selectProfile(profileName);\n    onClose();\n  };\n\n  return (\n    <>\n      {showProfileList && (\n        <>\n          {/* role=\"presentation\" keeps this a valid <li> child of the\n              ContextMenu <ul> without exposing the label as a menu item. */}\n          <li role=\"presentation\" className=\"px-2 pt-1 pb-0.5\">\n            <Typography.Text className=\"text-[11px] font-medium text-[var(--oh-text-dim)] uppercase tracking-wide leading-4\">\n              {t(I18nKey.SETTINGS$AVAILABLE_PROFILES)}\n            </Typography.Text>\n          </li>\n          {profiles.map((profile) => {\n            const isCurrent = profile.name === currentProfileName;\n            const displayModel = formatModelPillLabel(\n              profile.model,\n              freeModels,\n            );\n            return (\n              <ContextMenuListItem\n                key={profile.name}\n                testId={`chat-input-llm-profile-option-${profile.name}`}\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  if (isCurrent) {\n                    onClose();\n                    return;\n                  }\n                  handleSelect(profile.name);\n                }}\n                className={cn(\n                  \"flex flex-col items-stretch gap-0.5\",\n                  isCurrent && \"bg-[var(--oh-interactive-hover)]\",\n                )}\n              >\n                <span className=\"flex items-center gap-2\">\n                  <span\n                    className=\"flex-1 truncate text-sm leading-5\"\n                    title={profile.model ?? profile.name}\n                  >\n                    {profile.name}\n                  </span>\n                  {isCurrent && (\n                    <CheckIcon\n                      width={14}\n                      height={14}\n                      className=\"shrink-0\"\n                      aria-hidden\n                    />\n                  )}\n                </span>\n                {displayModel && (\n                  <span className=\"block truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                    {displayModel}\n                  </span>\n                )}\n              </ContextMenuListItem>\n            );\n          })}\n        </>\n      )}\n      {readOnlyProfileName && (\n        <li className=\"text-sm\" data-testid=\"chat-input-llm-profile-current\">\n          <div className=\"flex flex-col gap-0.5 p-2 leading-5 text-[var(--oh-foreground)]\">\n            <span className=\"truncate\" title={readOnlyProfileName}>\n              {readOnlyProfileName}\n            </span>\n            {currentProfileModel && (\n              <span className=\"truncate text-xs leading-4 text-[var(--oh-muted)]\">\n                {formatModelPillLabel(currentProfileModel, freeModels)}\n              </span>\n            )}\n          </div>\n        </li>\n      )}\n      {(showProfileList || readOnlyProfileName) && (\n        <Divider inset={dividerInset} />\n      )}\n      <li className=\"text-sm\">\n        <NavigationLink\n          to=\"/settings/llm\"\n          onClick={onClose}\n          className={cn(\n            \"flex h-[30px] items-center gap-2 rounded p-2 leading-5 text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)] transition-colors\",\n            settingsLinkClassName,\n          )}\n        >\n          <SettingsGearIcon\n            width={16}\n            height={16}\n            className={cn(\"shrink-0\", settingsIconClassName)}\n            aria-hidden\n          />\n          <span>{t(I18nKey.SETTINGS$LLM_PROFILES)}</span>\n        </NavigationLink>\n      </li>\n    </>\n  );\n}\n\nexport function ChatInputLlmProfilePicker() {\n  const { t } = useTranslation(\"openhands\");\n  const { profiles, currentProfileName, isLoading, isSwitching } =\n    useChatInputLlmProfileState();\n  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const popoverRef = useClickOutsideElement<HTMLUListElement>(\n    () => setIsPopoverOpen(false),\n    triggerRef,\n  );\n\n  // No LLM profiles yet (or the agent-server lacks the surface): stay out of\n  // the way, exactly like the ACP/AgentProfile pickers.\n  if (isLoading || profiles.length === 0) {\n    return null;\n  }\n\n  const label = currentProfileName ?? t(I18nKey.LLM$SELECT_MODEL_PLACEHOLDER);\n\n  return (\n    <div className=\"relative min-w-0\">\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={cn(chatInputPillButtonClassName, \"max-w-[200px]\")}\n        title={currentProfileName ?? undefined}\n        data-testid=\"chat-input-llm-profile\"\n        aria-expanded={isPopoverOpen}\n        aria-haspopup=\"dialog\"\n        // Disabled mid-switch so re-opening can't fire a second /switch_profile.\n        disabled={isSwitching}\n        aria-busy={isSwitching}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setIsPopoverOpen((open) => !open);\n        }}\n      >\n        <span className=\"truncate\">{truncateLabel(label)}</span>\n        <ComboboxCaretInline isOpen={isPopoverOpen} />\n      </button>\n\n      {isPopoverOpen && (\n        <ContextMenu\n          ref={popoverRef}\n          testId=\"chat-input-llm-profile-popover\"\n          position=\"top\"\n          alignment=\"left\"\n          spacing=\"none\"\n          className=\"z-[60] mb-2 min-w-[200px] max-w-[320px] max-h-[60vh] overflow-y-auto\"\n        >\n          <ChatInputLlmProfileMenuContent\n            onClose={() => setIsPopoverOpen(false)}\n          />\n        </ContextMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/model-messages.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/Trans.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),a=require("../../../stores/model-store.cjs"),o=require("./generic-event-message.cjs"),s=require("../../../icons/info-circle.cjs"),c=require("../../../utils/format-model-name.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");function d({profile:e}){let[t,n]=l.default.useState(!1),a=c.formatModelNameForDisplay(e.model);return(0,u.jsxs)(`div`,{className:`border border-neutral-700 rounded-md overflow-hidden`,children:[(0,u.jsxs)(`button`,{type:`button`,onClick:()=>n(e=>!e),"aria-expanded":t,"aria-label":`Toggle details for ${e.name}`,className:`w-full py-1.5 px-2 text-left flex items-center gap-2 hover:bg-neutral-700 transition-colors cursor-pointer`,children:[(0,u.jsx)(`span`,{className:`text-neutral-300`,children:t?(0,u.jsx)(r.ChevronDown,{size:14}):(0,u.jsx)(i.ChevronRight,{size:14})}),(0,u.jsx)(`span`,{className:`font-normal text-neutral-200 text-sm`,children:e.name})]}),t&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`hr`,{className:`border-neutral-700`}),(0,u.jsx)(`div`,{className:`px-3 py-2 text-xs text-neutral-300 font-mono whitespace-pre-wrap`,children:`model:    ${a??`—`}\nbase_url: ${e.base_url??`—`}\napi_key:  ${e.api_key_set?`set`:`not set`}`})]})]})}function f({conversationId:e,anchorEventId:r}){let i=a.useModelStore(e=>e.entriesByConversation),c=(e?i[e]??[]:[]).filter(e=>e.anchorEventId===r);return!e||c.length===0?null:(0,u.jsx)(`div`,{"data-testid":`model-messages`,className:`flex flex-col w-full`,children:c.map(e=>{if(e.switchedTo)return(0,u.jsx)(o.GenericEventMessage,{title:(0,u.jsxs)(`span`,{className:`inline-flex items-center gap-1.5`,children:[(0,u.jsx)(s.default,{width:14,height:14,className:`shrink-0 text-neutral-400`,"aria-hidden":!0}),(0,u.jsx)(t.Trans,{i18nKey:n.I18nKey.MODEL$SWITCHED_TO_PROFILE,values:{name:e.switchedTo},components:{cmd:(0,u.jsx)(`span`,{className:`font-mono text-neutral-200 bg-neutral-800 px-1 rounded`})}})]}),details:``},e.id);let r=e.profiles.length===0;return(0,u.jsx)(o.GenericEventMessage,{title:(0,u.jsx)(`span`,{children:r?(0,u.jsx)(t.Trans,{i18nKey:n.I18nKey.MODEL$NO_SAVED_PROFILES}):(0,u.jsx)(t.Trans,{i18nKey:n.I18nKey.MODEL$AVAILABLE_PROFILES,values:{count:e.profiles.length}})}),details:r?(0,u.jsx)(`span`,{className:`text-neutral-300 text-sm px-2 py-1 block`,children:(0,u.jsx)(t.Trans,{i18nKey:n.I18nKey.MODEL$NO_PROFILES_HINT})}):(0,u.jsx)(`div`,{className:`flex flex-col gap-1 mt-1`,children:e.profiles.map(e=>(0,u.jsx)(d,{profile:e},e.name))}),initiallyExpanded:r},e.id)})})}exports.ModelMessages=f;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/Trans.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),a=require("../../../stores/model-store.cjs"),o=require("./generic-event-message.cjs"),s=require("../../../icons/info-circle.cjs"),c=require("../../../hooks/query/use-free-models.cjs"),l=require("../../../utils/format-model-name.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");function f({profile:e}){let[t,n]=u.default.useState(!1),a=c.useFreeModels(),o=l.formatModelNameForDisplay(e.model,a);return(0,d.jsxs)(`div`,{className:`border border-neutral-700 rounded-md overflow-hidden`,children:[(0,d.jsxs)(`button`,{type:`button`,onClick:()=>n(e=>!e),"aria-expanded":t,"aria-label":`Toggle details for ${e.name}`,className:`w-full py-1.5 px-2 text-left flex items-center gap-2 hover:bg-neutral-700 transition-colors cursor-pointer`,children:[(0,d.jsx)(`span`,{className:`text-neutral-300`,children:t?(0,d.jsx)(r.ChevronDown,{size:14}):(0,d.jsx)(i.ChevronRight,{size:14})}),(0,d.jsx)(`span`,{className:`font-normal text-neutral-200 text-sm`,children:e.name})]}),t&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(`hr`,{className:`border-neutral-700`}),(0,d.jsx)(`div`,{className:`px-3 py-2 text-xs text-neutral-300 font-mono whitespace-pre-wrap`,children:`model:    ${o??`—`}\nbase_url: ${e.base_url??`—`}\napi_key:  ${e.api_key_set?`set`:`not set`}`})]})]})}function p({conversationId:e,anchorEventId:r}){let i=a.useModelStore(e=>e.entriesByConversation),c=(e?i[e]??[]:[]).filter(e=>e.anchorEventId===r);return!e||c.length===0?null:(0,d.jsx)(`div`,{"data-testid":`model-messages`,className:`flex flex-col w-full`,children:c.map(e=>{if(e.switchedTo)return(0,d.jsx)(o.GenericEventMessage,{title:(0,d.jsxs)(`span`,{className:`inline-flex items-center gap-1.5`,children:[(0,d.jsx)(s.default,{width:14,height:14,className:`shrink-0 text-neutral-400`,"aria-hidden":!0}),(0,d.jsx)(t.Trans,{i18nKey:n.I18nKey.MODEL$SWITCHED_TO_PROFILE,values:{name:e.switchedTo},components:{cmd:(0,d.jsx)(`span`,{className:`font-mono text-neutral-200 bg-neutral-800 px-1 rounded`})}})]}),details:``},e.id);let r=e.profiles.length===0;return(0,d.jsx)(o.GenericEventMessage,{title:(0,d.jsx)(`span`,{children:r?(0,d.jsx)(t.Trans,{i18nKey:n.I18nKey.MODEL$NO_SAVED_PROFILES}):(0,d.jsx)(t.Trans,{i18nKey:n.I18nKey.MODEL$AVAILABLE_PROFILES,values:{count:e.profiles.length}})}),details:r?(0,d.jsx)(`span`,{className:`text-neutral-300 text-sm px-2 py-1 block`,children:(0,d.jsx)(t.Trans,{i18nKey:n.I18nKey.MODEL$NO_PROFILES_HINT})}):(0,d.jsx)(`div`,{className:`flex flex-col gap-1 mt-1`,children:e.profiles.map(e=>(0,d.jsx)(f,{profile:e},e.name))}),initiallyExpanded:r},e.id)})})}exports.ModelMessages=p;
 //# sourceMappingURL=model-messages.cjs.map

package/dist/components/features/chat/model-messages.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"model-messages.cjs","names":[],"sources":["../../../../src/components/features/chat/model-messages.tsx"],"sourcesContent":["import React from \"react\";\nimport { Trans } from \"react-i18next\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\nimport { useModelStore } from \"#/stores/model-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport InfoCircleIcon from \"#/icons/info-circle.svg?react\";\nimport type { ProfileInfo } from \"#/api/profiles-service/profiles-service.api\";\nimport { formatModelNameForDisplay } from \"#/utils/format-model-name\";\nimport { GenericEventMessage } from \"./generic-event-message\";\n\ninterface ProfileRowProps {\n  profile: ProfileInfo;\n}\n\nfunction ProfileRow({ profile }: ProfileRowProps) {\n  const [expanded, setExpanded] = React.useState(false);\n  const displayModel = formatModelNameForDisplay(profile.model);\n\n  return (\n    <div className=\"border border-neutral-700 rounded-md overflow-hidden\">\n      <button\n        type=\"button\"\n        onClick={() => setExpanded((v) => !v)}\n        aria-expanded={expanded}\n        aria-label={`Toggle details for ${profile.name}`}\n        className=\"w-full py-1.5 px-2 text-left flex items-center gap-2 hover:bg-neutral-700 transition-colors cursor-pointer\"\n      >\n        <span className=\"text-neutral-300\">\n          {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}\n        </span>\n        <span className=\"font-normal text-neutral-200 text-sm\">\n          {profile.name}\n        </span>\n      </button>\n      {expanded && (\n        <>\n          <hr className=\"border-neutral-700\" />\n          <div className=\"px-3 py-2 text-xs text-neutral-300 font-mono whitespace-pre-wrap\">\n            {`model:    ${displayModel ?? \"—\"}\\n` +\n              `base_url: ${profile.base_url ?? \"—\"}\\n` +\n              // eslint-disable-next-line i18next/no-literal-string -- diagnostic readout; field labels are intentionally untranslated\n              `api_key:  ${profile.api_key_set ? \"set\" : \"not set\"}`}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport interface ModelMessagesProps {\n  conversationId: string | null | undefined;\n  /**\n   * Render only entries anchored to this event id. Use `null` to render the\n   * \"no events at the time of /model\" entries (top of the chat history).\n   */\n  anchorEventId: string | null;\n}\n\nexport function ModelMessages({\n  conversationId,\n  anchorEventId,\n}: ModelMessagesProps) {\n  const entriesById = useModelStore((s) => s.entriesByConversation);\n  const allEntries = conversationId ? (entriesById[conversationId] ?? []) : [];\n  const entries = allEntries.filter((e) => e.anchorEventId === anchorEventId);\n\n  if (!conversationId || entries.length === 0) return null;\n\n  return (\n    <div data-testid=\"model-messages\" className=\"flex flex-col w-full\">\n      {entries.map((entry) => {\n        if (entry.switchedTo) {\n          return (\n            <GenericEventMessage\n              key={entry.id}\n              title={\n                <span className=\"inline-flex items-center gap-1.5\">\n                  <InfoCircleIcon\n                    width={14}\n                    height={14}\n                    className=\"shrink-0 text-neutral-400\"\n                    aria-hidden\n                  />\n                  <Trans\n                    i18nKey={I18nKey.MODEL$SWITCHED_TO_PROFILE}\n                    values={{ name: entry.switchedTo }}\n                    components={{\n                      cmd: (\n                        <span className=\"font-mono text-neutral-200 bg-neutral-800 px-1 rounded\" />\n                      ),\n                    }}\n                  />\n                </span>\n              }\n              details=\"\"\n            />\n          );\n        }\n\n        const isEmpty = entry.profiles.length === 0;\n        return (\n          <GenericEventMessage\n            key={entry.id}\n            title={\n              <span>\n                {isEmpty ? (\n                  <Trans i18nKey={I18nKey.MODEL$NO_SAVED_PROFILES} />\n                ) : (\n                  <Trans\n                    i18nKey={I18nKey.MODEL$AVAILABLE_PROFILES}\n                    values={{ count: entry.profiles.length }}\n                  />\n                )}\n              </span>\n            }\n            details={\n              isEmpty ? (\n                <span className=\"text-neutral-300 text-sm px-2 py-1 block\">\n                  <Trans i18nKey={I18nKey.MODEL$NO_PROFILES_HINT} />\n                </span>\n              ) : (\n                <div className=\"flex flex-col gap-1 mt-1\">\n                  {entry.profiles.map((p) => (\n                    <ProfileRow key={p.name} profile={p} />\n                  ))}\n                </div>\n              )\n            }\n            initiallyExpanded={isEmpty}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"ykBAcA,SAAS,EAAW,CAAE,WAA4B,CAChD,GAAM,CAAC,EAAU,GAAe,EAAA,QAAM,SAAS,EAAK,EAC9C,EAAe,EAAA,0BAA0B,EAAQ,KAAK,EAE5D,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,gEAAf,EACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,YAAe,EAAa,GAAM,CAAC,CAAC,EACpC,gBAAe,EACf,aAAY,sBAAsB,EAAQ,OAC1C,UAAU,sHALZ,EAOE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,4BACb,GAAW,EAAA,EAAA,KAAC,EAAA,YAAD,CAAa,KAAM,EAAK,CAAA,GAAI,EAAA,EAAA,KAAC,EAAA,aAAD,CAAc,KAAM,EAAK,CAAA,CAC7D,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,gDACb,EAAQ,IACL,CAAA,CACA,IACP,IACC,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,oBAAsB,CAAA,GACpC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,4EACZ,aAAa,GAAgB,IAAI,cACnB,EAAQ,UAAY,IAAI,cAExB,EAAQ,YAAc,MAAQ,WAC1C,CAAA,CACL,CAAA,CAAA,CAED,GAET,CAWA,SAAgB,EAAc,CAC5B,iBACA,iBACqB,CACrB,IAAM,EAAc,EAAA,cAAe,GAAM,EAAE,qBAAqB,EAE1D,GADa,EAAkB,EAAY,IAAmB,CAAC,EAAK,CAAC,GAChD,OAAQ,GAAM,EAAE,gBAAkB,CAAa,EAI1E,MAFI,CAAC,GAAkB,EAAQ,SAAW,EAAU,MAGlD,EAAA,EAAA,KAAC,MAAD,CAAK,cAAY,iBAAiB,UAAU,gCACzC,EAAQ,IAAK,GAAU,CACtB,GAAI,EAAM,WACR,OACE,EAAA,EAAA,KAAC,EAAA,oBAAD,CAEE,OACE,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,4CAAhB,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,GACP,OAAQ,GACR,UAAU,4BACV,cAAA,EACD,CAAA,GACD,EAAA,EAAA,KAAC,EAAA,MAAD,CACE,QAAS,EAAA,QAAQ,0BACjB,OAAQ,CAAE,KAAM,EAAM,UAAW,EACjC,WAAY,CACV,KACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,wDAA0D,CAAA,CAE9E,CACD,CAAA,CACG,IAER,QAAQ,EACT,EArBM,EAAM,EAqBZ,EAIL,IAAM,EAAU,EAAM,SAAS,SAAW,EAC1C,OACE,EAAA,EAAA,KAAC,EAAA,oBAAD,CAEE,OACE,EAAA,EAAA,KAAC,OAAD,CAAA,SACG,GACC,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,QAAS,EAAA,QAAQ,uBAA0B,CAAA,GAElD,EAAA,EAAA,KAAC,EAAA,MAAD,CACE,QAAS,EAAA,QAAQ,yBACjB,OAAQ,CAAE,MAAO,EAAM,SAAS,MAAO,CACxC,CAAA,CAEC,CAAA,EAER,QACE,GACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qDACd,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,QAAS,EAAA,QAAQ,sBAAyB,CAAA,CAC7C,CAAA,GAEN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,oCACZ,EAAM,SAAS,IAAK,IACnB,EAAA,EAAA,KAAC,EAAD,CAAyB,QAAS,CAAI,EAArB,EAAE,IAAmB,CACvC,CACE,CAAA,EAGT,kBAAmB,CACpB,EA3BM,EAAM,EA2BZ,CAEL,CAAC,CACE,CAAA,CAET"}
+{"version":3,"file":"model-messages.cjs","names":[],"sources":["../../../../src/components/features/chat/model-messages.tsx"],"sourcesContent":["import React from \"react\";\nimport { Trans } from \"react-i18next\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\nimport { useModelStore } from \"#/stores/model-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport InfoCircleIcon from \"#/icons/info-circle.svg?react\";\nimport type { ProfileInfo } from \"#/api/profiles-service/profiles-service.api\";\nimport { useFreeModels } from \"#/hooks/query/use-free-models\";\nimport { formatModelNameForDisplay } from \"#/utils/format-model-name\";\nimport { GenericEventMessage } from \"./generic-event-message\";\n\ninterface ProfileRowProps {\n  profile: ProfileInfo;\n}\n\nfunction ProfileRow({ profile }: ProfileRowProps) {\n  const [expanded, setExpanded] = React.useState(false);\n  const freeModels = useFreeModels();\n  const displayModel = formatModelNameForDisplay(profile.model, freeModels);\n\n  return (\n    <div className=\"border border-neutral-700 rounded-md overflow-hidden\">\n      <button\n        type=\"button\"\n        onClick={() => setExpanded((v) => !v)}\n        aria-expanded={expanded}\n        aria-label={`Toggle details for ${profile.name}`}\n        className=\"w-full py-1.5 px-2 text-left flex items-center gap-2 hover:bg-neutral-700 transition-colors cursor-pointer\"\n      >\n        <span className=\"text-neutral-300\">\n          {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}\n        </span>\n        <span className=\"font-normal text-neutral-200 text-sm\">\n          {profile.name}\n        </span>\n      </button>\n      {expanded && (\n        <>\n          <hr className=\"border-neutral-700\" />\n          <div className=\"px-3 py-2 text-xs text-neutral-300 font-mono whitespace-pre-wrap\">\n            {`model:    ${displayModel ?? \"—\"}\\n` +\n              `base_url: ${profile.base_url ?? \"—\"}\\n` +\n              // eslint-disable-next-line i18next/no-literal-string -- diagnostic readout; field labels are intentionally untranslated\n              `api_key:  ${profile.api_key_set ? \"set\" : \"not set\"}`}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport interface ModelMessagesProps {\n  conversationId: string | null | undefined;\n  /**\n   * Render only entries anchored to this event id. Use `null` to render the\n   * \"no events at the time of /model\" entries (top of the chat history).\n   */\n  anchorEventId: string | null;\n}\n\nexport function ModelMessages({\n  conversationId,\n  anchorEventId,\n}: ModelMessagesProps) {\n  const entriesById = useModelStore((s) => s.entriesByConversation);\n  const allEntries = conversationId ? (entriesById[conversationId] ?? []) : [];\n  const entries = allEntries.filter((e) => e.anchorEventId === anchorEventId);\n\n  if (!conversationId || entries.length === 0) return null;\n\n  return (\n    <div data-testid=\"model-messages\" className=\"flex flex-col w-full\">\n      {entries.map((entry) => {\n        if (entry.switchedTo) {\n          return (\n            <GenericEventMessage\n              key={entry.id}\n              title={\n                <span className=\"inline-flex items-center gap-1.5\">\n                  <InfoCircleIcon\n                    width={14}\n                    height={14}\n                    className=\"shrink-0 text-neutral-400\"\n                    aria-hidden\n                  />\n                  <Trans\n                    i18nKey={I18nKey.MODEL$SWITCHED_TO_PROFILE}\n                    values={{ name: entry.switchedTo }}\n                    components={{\n                      cmd: (\n                        <span className=\"font-mono text-neutral-200 bg-neutral-800 px-1 rounded\" />\n                      ),\n                    }}\n                  />\n                </span>\n              }\n              details=\"\"\n            />\n          );\n        }\n\n        const isEmpty = entry.profiles.length === 0;\n        return (\n          <GenericEventMessage\n            key={entry.id}\n            title={\n              <span>\n                {isEmpty ? (\n                  <Trans i18nKey={I18nKey.MODEL$NO_SAVED_PROFILES} />\n                ) : (\n                  <Trans\n                    i18nKey={I18nKey.MODEL$AVAILABLE_PROFILES}\n                    values={{ count: entry.profiles.length }}\n                  />\n                )}\n              </span>\n            }\n            details={\n              isEmpty ? (\n                <span className=\"text-neutral-300 text-sm px-2 py-1 block\">\n                  <Trans i18nKey={I18nKey.MODEL$NO_PROFILES_HINT} />\n                </span>\n              ) : (\n                <div className=\"flex flex-col gap-1 mt-1\">\n                  {entry.profiles.map((p) => (\n                    <ProfileRow key={p.name} profile={p} />\n                  ))}\n                </div>\n              )\n            }\n            initiallyExpanded={isEmpty}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"+nBAeA,SAAS,EAAW,CAAE,WAA4B,CAChD,GAAM,CAAC,EAAU,GAAe,EAAA,QAAM,SAAS,EAAK,EAC9C,EAAa,EAAA,cAAc,EAC3B,EAAe,EAAA,0BAA0B,EAAQ,MAAO,CAAU,EAExE,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,gEAAf,EACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,YAAe,EAAa,GAAM,CAAC,CAAC,EACpC,gBAAe,EACf,aAAY,sBAAsB,EAAQ,OAC1C,UAAU,sHALZ,EAOE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,4BACb,GAAW,EAAA,EAAA,KAAC,EAAA,YAAD,CAAa,KAAM,EAAK,CAAA,GAAI,EAAA,EAAA,KAAC,EAAA,aAAD,CAAc,KAAM,EAAK,CAAA,CAC7D,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,gDACb,EAAQ,IACL,CAAA,CACA,IACP,IACC,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAU,oBAAsB,CAAA,GACpC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,4EACZ,aAAa,GAAgB,IAAI,cACnB,EAAQ,UAAY,IAAI,cAExB,EAAQ,YAAc,MAAQ,WAC1C,CAAA,CACL,CAAA,CAAA,CAED,GAET,CAWA,SAAgB,EAAc,CAC5B,iBACA,iBACqB,CACrB,IAAM,EAAc,EAAA,cAAe,GAAM,EAAE,qBAAqB,EAE1D,GADa,EAAkB,EAAY,IAAmB,CAAC,EAAK,CAAC,GAChD,OAAQ,GAAM,EAAE,gBAAkB,CAAa,EAI1E,MAFI,CAAC,GAAkB,EAAQ,SAAW,EAAU,MAGlD,EAAA,EAAA,KAAC,MAAD,CAAK,cAAY,iBAAiB,UAAU,gCACzC,EAAQ,IAAK,GAAU,CACtB,GAAI,EAAM,WACR,OACE,EAAA,EAAA,KAAC,EAAA,oBAAD,CAEE,OACE,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,4CAAhB,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,GACP,OAAQ,GACR,UAAU,4BACV,cAAA,EACD,CAAA,GACD,EAAA,EAAA,KAAC,EAAA,MAAD,CACE,QAAS,EAAA,QAAQ,0BACjB,OAAQ,CAAE,KAAM,EAAM,UAAW,EACjC,WAAY,CACV,KACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,wDAA0D,CAAA,CAE9E,CACD,CAAA,CACG,IAER,QAAQ,EACT,EArBM,EAAM,EAqBZ,EAIL,IAAM,EAAU,EAAM,SAAS,SAAW,EAC1C,OACE,EAAA,EAAA,KAAC,EAAA,oBAAD,CAEE,OACE,EAAA,EAAA,KAAC,OAAD,CAAA,SACG,GACC,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,QAAS,EAAA,QAAQ,uBAA0B,CAAA,GAElD,EAAA,EAAA,KAAC,EAAA,MAAD,CACE,QAAS,EAAA,QAAQ,yBACjB,OAAQ,CAAE,MAAO,EAAM,SAAS,MAAO,CACxC,CAAA,CAEC,CAAA,EAER,QACE,GACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,qDACd,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,QAAS,EAAA,QAAQ,sBAAyB,CAAA,CAC7C,CAAA,GAEN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,oCACZ,EAAM,SAAS,IAAK,IACnB,EAAA,EAAA,KAAC,EAAD,CAAyB,QAAS,CAAI,EAArB,EAAE,IAAmB,CACvC,CACE,CAAA,EAGT,kBAAmB,CACpB,EA3BM,EAAM,EA2BZ,CAEL,CAAC,CACE,CAAA,CAET"}

package/dist/components/features/chat/model-messages.js

@@ -5,67 +5,68 @@ import { ChevronRight as r } from "../../../node_modules/lucide-react/dist/esm/i
 import { useModelStore as i } from "../../../stores/model-store.js";
 import { GenericEventMessage as a } from "./generic-event-message.js";
 import o from "../../../icons/info-circle.js";
-import { formatModelNameForDisplay as s } from "../../../utils/format-model-name.js";
-import c from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useFreeModels as s } from "../../../hooks/query/use-free-models.js";
+import { formatModelNameForDisplay as c } from "../../../utils/format-model-name.js";
+import l from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/features/chat/model-messages.tsx
-function f({ profile: e }) {
-	let [t, i] = c.useState(!1), a = s(e.model);
-	return /* @__PURE__ */ d("div", {
+function p({ profile: e }) {
+	let [t, i] = l.useState(!1), a = s(), o = c(e.model, a);
+	return /* @__PURE__ */ f("div", {
 		className: "border border-neutral-700 rounded-md overflow-hidden",
-		children: [/* @__PURE__ */ d("button", {
+		children: [/* @__PURE__ */ f("button", {
 			type: "button",
 			onClick: () => i((e) => !e),
 			"aria-expanded": t,
 			"aria-label": `Toggle details for ${e.name}`,
 			className: "w-full py-1.5 px-2 text-left flex items-center gap-2 hover:bg-neutral-700 transition-colors cursor-pointer",
-			children: [/* @__PURE__ */ u("span", {
+			children: [/* @__PURE__ */ d("span", {
 				className: "text-neutral-300",
-				children: u(t ? n : r, { size: 14 })
-			}), /* @__PURE__ */ u("span", {
+				children: d(t ? n : r, { size: 14 })
+			}), /* @__PURE__ */ d("span", {
 				className: "font-normal text-neutral-200 text-sm",
 				children: e.name
 			})]
-		}), t && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("hr", { className: "border-neutral-700" }), /* @__PURE__ */ u("div", {
+		}), t && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("hr", { className: "border-neutral-700" }), /* @__PURE__ */ d("div", {
 			className: "px-3 py-2 text-xs text-neutral-300 font-mono whitespace-pre-wrap",
-			children: `model:    ${a ?? "—"}\nbase_url: ${e.base_url ?? "—"}\napi_key:  ${e.api_key_set ? "set" : "not set"}`
+			children: `model:    ${o ?? "—"}\nbase_url: ${e.base_url ?? "—"}\napi_key:  ${e.api_key_set ? "set" : "not set"}`
 		})] })]
 	});
 }
-function p({ conversationId: n, anchorEventId: r }) {
+function m({ conversationId: n, anchorEventId: r }) {
 	let s = i((e) => e.entriesByConversation), c = (n ? s[n] ?? [] : []).filter((e) => e.anchorEventId === r);
-	return !n || c.length === 0 ? null : /* @__PURE__ */ u("div", {
+	return !n || c.length === 0 ? null : /* @__PURE__ */ d("div", {
 		"data-testid": "model-messages",
 		className: "flex flex-col w-full",
 		children: c.map((n) => {
-			if (n.switchedTo) return /* @__PURE__ */ u(a, {
-				title: /* @__PURE__ */ d("span", {
+			if (n.switchedTo) return /* @__PURE__ */ d(a, {
+				title: /* @__PURE__ */ f("span", {
 					className: "inline-flex items-center gap-1.5",
-					children: [/* @__PURE__ */ u(o, {
+					children: [/* @__PURE__ */ d(o, {
 						width: 14,
 						height: 14,
 						className: "shrink-0 text-neutral-400",
 						"aria-hidden": !0
-					}), /* @__PURE__ */ u(e, {
+					}), /* @__PURE__ */ d(e, {
 						i18nKey: t.MODEL$SWITCHED_TO_PROFILE,
 						values: { name: n.switchedTo },
-						components: { cmd: /* @__PURE__ */ u("span", { className: "font-mono text-neutral-200 bg-neutral-800 px-1 rounded" }) }
+						components: { cmd: /* @__PURE__ */ d("span", { className: "font-mono text-neutral-200 bg-neutral-800 px-1 rounded" }) }
 					})]
 				}),
 				details: ""
 			}, n.id);
 			let r = n.profiles.length === 0;
-			return /* @__PURE__ */ u(a, {
-				title: /* @__PURE__ */ u("span", { children: r ? /* @__PURE__ */ u(e, { i18nKey: t.MODEL$NO_SAVED_PROFILES }) : /* @__PURE__ */ u(e, {
+			return /* @__PURE__ */ d(a, {
+				title: /* @__PURE__ */ d("span", { children: r ? /* @__PURE__ */ d(e, { i18nKey: t.MODEL$NO_SAVED_PROFILES }) : /* @__PURE__ */ d(e, {
 					i18nKey: t.MODEL$AVAILABLE_PROFILES,
 					values: { count: n.profiles.length }
 				}) }),
-				details: r ? /* @__PURE__ */ u("span", {
+				details: r ? /* @__PURE__ */ d("span", {
 					className: "text-neutral-300 text-sm px-2 py-1 block",
-					children: /* @__PURE__ */ u(e, { i18nKey: t.MODEL$NO_PROFILES_HINT })
-				}) : /* @__PURE__ */ u("div", {
+					children: /* @__PURE__ */ d(e, { i18nKey: t.MODEL$NO_PROFILES_HINT })
+				}) : /* @__PURE__ */ d("div", {
 					className: "flex flex-col gap-1 mt-1",
-					children: n.profiles.map((e) => /* @__PURE__ */ u(f, { profile: e }, e.name))
+					children: n.profiles.map((e) => /* @__PURE__ */ d(p, { profile: e }, e.name))
 				}),
 				initiallyExpanded: r
 			}, n.id);
@@ -73,6 +74,6 @@ function p({ conversationId: n, anchorEventId: r }) {
 	});
 }
 //#endregion
-export { p as ModelMessages };
+export { m as ModelMessages };
 
 //# sourceMappingURL=model-messages.js.map

package/dist/components/features/chat/model-messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"model-messages.js","names":[],"sources":["../../../../src/components/features/chat/model-messages.tsx"],"sourcesContent":["import React from \"react\";\nimport { Trans } from \"react-i18next\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\nimport { useModelStore } from \"#/stores/model-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport InfoCircleIcon from \"#/icons/info-circle.svg?react\";\nimport type { ProfileInfo } from \"#/api/profiles-service/profiles-service.api\";\nimport { formatModelNameForDisplay } from \"#/utils/format-model-name\";\nimport { GenericEventMessage } from \"./generic-event-message\";\n\ninterface ProfileRowProps {\n  profile: ProfileInfo;\n}\n\nfunction ProfileRow({ profile }: ProfileRowProps) {\n  const [expanded, setExpanded] = React.useState(false);\n  const displayModel = formatModelNameForDisplay(profile.model);\n\n  return (\n    <div className=\"border border-neutral-700 rounded-md overflow-hidden\">\n      <button\n        type=\"button\"\n        onClick={() => setExpanded((v) => !v)}\n        aria-expanded={expanded}\n        aria-label={`Toggle details for ${profile.name}`}\n        className=\"w-full py-1.5 px-2 text-left flex items-center gap-2 hover:bg-neutral-700 transition-colors cursor-pointer\"\n      >\n        <span className=\"text-neutral-300\">\n          {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}\n        </span>\n        <span className=\"font-normal text-neutral-200 text-sm\">\n          {profile.name}\n        </span>\n      </button>\n      {expanded && (\n        <>\n          <hr className=\"border-neutral-700\" />\n          <div className=\"px-3 py-2 text-xs text-neutral-300 font-mono whitespace-pre-wrap\">\n            {`model:    ${displayModel ?? \"—\"}\\n` +\n              `base_url: ${profile.base_url ?? \"—\"}\\n` +\n              // eslint-disable-next-line i18next/no-literal-string -- diagnostic readout; field labels are intentionally untranslated\n              `api_key:  ${profile.api_key_set ? \"set\" : \"not set\"}`}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport interface ModelMessagesProps {\n  conversationId: string | null | undefined;\n  /**\n   * Render only entries anchored to this event id. Use `null` to render the\n   * \"no events at the time of /model\" entries (top of the chat history).\n   */\n  anchorEventId: string | null;\n}\n\nexport function ModelMessages({\n  conversationId,\n  anchorEventId,\n}: ModelMessagesProps) {\n  const entriesById = useModelStore((s) => s.entriesByConversation);\n  const allEntries = conversationId ? (entriesById[conversationId] ?? []) : [];\n  const entries = allEntries.filter((e) => e.anchorEventId === anchorEventId);\n\n  if (!conversationId || entries.length === 0) return null;\n\n  return (\n    <div data-testid=\"model-messages\" className=\"flex flex-col w-full\">\n      {entries.map((entry) => {\n        if (entry.switchedTo) {\n          return (\n            <GenericEventMessage\n              key={entry.id}\n              title={\n                <span className=\"inline-flex items-center gap-1.5\">\n                  <InfoCircleIcon\n                    width={14}\n                    height={14}\n                    className=\"shrink-0 text-neutral-400\"\n                    aria-hidden\n                  />\n                  <Trans\n                    i18nKey={I18nKey.MODEL$SWITCHED_TO_PROFILE}\n                    values={{ name: entry.switchedTo }}\n                    components={{\n                      cmd: (\n                        <span className=\"font-mono text-neutral-200 bg-neutral-800 px-1 rounded\" />\n                      ),\n                    }}\n                  />\n                </span>\n              }\n              details=\"\"\n            />\n          );\n        }\n\n        const isEmpty = entry.profiles.length === 0;\n        return (\n          <GenericEventMessage\n            key={entry.id}\n            title={\n              <span>\n                {isEmpty ? (\n                  <Trans i18nKey={I18nKey.MODEL$NO_SAVED_PROFILES} />\n                ) : (\n                  <Trans\n                    i18nKey={I18nKey.MODEL$AVAILABLE_PROFILES}\n                    values={{ count: entry.profiles.length }}\n                  />\n                )}\n              </span>\n            }\n            details={\n              isEmpty ? (\n                <span className=\"text-neutral-300 text-sm px-2 py-1 block\">\n                  <Trans i18nKey={I18nKey.MODEL$NO_PROFILES_HINT} />\n                </span>\n              ) : (\n                <div className=\"flex flex-col gap-1 mt-1\">\n                  {entry.profiles.map((p) => (\n                    <ProfileRow key={p.name} profile={p} />\n                  ))}\n                </div>\n              )\n            }\n            initiallyExpanded={isEmpty}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAcA,SAAS,EAAW,EAAE,cAA4B;CAChD,IAAM,CAAC,GAAU,KAAe,EAAM,SAAS,EAAK,GAC9C,IAAe,EAA0B,EAAQ,KAAK;CAE5D,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,GAAa,MAAM,CAAC,CAAC;GACpC,iBAAe;GACf,cAAY,sBAAsB,EAAQ;GAC1C,WAAU;aALZ,CAOE,kBAAC,QAAD;IAAM,WAAU;cACF,EAAX,IAAY,IAA4B,GAA7B,EAAa,MAAM,GAAK,CAA6B;GAC7D,CAAA,GACN,kBAAC,QAAD;IAAM,WAAU;cACb,EAAQ;GACL,CAAA,CACA;MACP,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,MAAD,EAAI,WAAU,qBAAsB,CAAA,GACpC,kBAAC,OAAD;GAAK,WAAU;aACZ,aAAa,KAAgB,IAAI,cACnB,EAAQ,YAAY,IAAI,cAExB,EAAQ,cAAc,QAAQ;EAC1C,CAAA,CACL,EAAA,CAAA,CAED;;AAET;AAWA,SAAgB,EAAc,EAC5B,mBACA,oBACqB;CACrB,IAAM,IAAc,GAAe,MAAM,EAAE,qBAAqB,GAE1D,KADa,IAAkB,EAAY,MAAmB,CAAC,IAAK,CAAC,GAChD,QAAQ,MAAM,EAAE,kBAAkB,CAAa;CAI1E,OAFI,CAAC,KAAkB,EAAQ,WAAW,IAAU,OAGlD,kBAAC,OAAD;EAAK,eAAY;EAAiB,WAAU;YACzC,EAAQ,KAAK,MAAU;GACtB,IAAI,EAAM,YACR,OACE,kBAAC,GAAD;IAEE,OACE,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,kBAAC,GAAD;MACE,OAAO;MACP,QAAQ;MACR,WAAU;MACV,eAAA;KACD,CAAA,GACD,kBAAC,GAAD;MACE,SAAS,EAAQ;MACjB,QAAQ,EAAE,MAAM,EAAM,WAAW;MACjC,YAAY,EACV,KACE,kBAAC,QAAD,EAAM,WAAU,yDAA0D,CAAA,EAE9E;KACD,CAAA,CACG;;IAER,SAAQ;GACT,GArBM,EAAM,EAqBZ;GAIL,IAAM,IAAU,EAAM,SAAS,WAAW;GAC1C,OACE,kBAAC,GAAD;IAEE,OACE,kBAAC,QAAD,EAAA,UACG,IACC,kBAAC,GAAD,EAAO,SAAS,EAAQ,wBAA0B,CAAA,IAElD,kBAAC,GAAD;KACE,SAAS,EAAQ;KACjB,QAAQ,EAAE,OAAO,EAAM,SAAS,OAAO;IACxC,CAAA,EAEC,CAAA;IAER,SACE,IACE,kBAAC,QAAD;KAAM,WAAU;eACd,kBAAC,GAAD,EAAO,SAAS,EAAQ,uBAAyB,CAAA;IAC7C,CAAA,IAEN,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAM,SAAS,KAAK,MACnB,kBAAC,GAAD,EAAyB,SAAS,EAAI,GAArB,EAAE,IAAmB,CACvC;IACE,CAAA;IAGT,mBAAmB;GACpB,GA3BM,EAAM,EA2BZ;EAEL,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"model-messages.js","names":[],"sources":["../../../../src/components/features/chat/model-messages.tsx"],"sourcesContent":["import React from \"react\";\nimport { Trans } from \"react-i18next\";\nimport { ChevronDown, ChevronRight } from \"lucide-react\";\nimport { useModelStore } from \"#/stores/model-store\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport InfoCircleIcon from \"#/icons/info-circle.svg?react\";\nimport type { ProfileInfo } from \"#/api/profiles-service/profiles-service.api\";\nimport { useFreeModels } from \"#/hooks/query/use-free-models\";\nimport { formatModelNameForDisplay } from \"#/utils/format-model-name\";\nimport { GenericEventMessage } from \"./generic-event-message\";\n\ninterface ProfileRowProps {\n  profile: ProfileInfo;\n}\n\nfunction ProfileRow({ profile }: ProfileRowProps) {\n  const [expanded, setExpanded] = React.useState(false);\n  const freeModels = useFreeModels();\n  const displayModel = formatModelNameForDisplay(profile.model, freeModels);\n\n  return (\n    <div className=\"border border-neutral-700 rounded-md overflow-hidden\">\n      <button\n        type=\"button\"\n        onClick={() => setExpanded((v) => !v)}\n        aria-expanded={expanded}\n        aria-label={`Toggle details for ${profile.name}`}\n        className=\"w-full py-1.5 px-2 text-left flex items-center gap-2 hover:bg-neutral-700 transition-colors cursor-pointer\"\n      >\n        <span className=\"text-neutral-300\">\n          {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}\n        </span>\n        <span className=\"font-normal text-neutral-200 text-sm\">\n          {profile.name}\n        </span>\n      </button>\n      {expanded && (\n        <>\n          <hr className=\"border-neutral-700\" />\n          <div className=\"px-3 py-2 text-xs text-neutral-300 font-mono whitespace-pre-wrap\">\n            {`model:    ${displayModel ?? \"—\"}\\n` +\n              `base_url: ${profile.base_url ?? \"—\"}\\n` +\n              // eslint-disable-next-line i18next/no-literal-string -- diagnostic readout; field labels are intentionally untranslated\n              `api_key:  ${profile.api_key_set ? \"set\" : \"not set\"}`}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport interface ModelMessagesProps {\n  conversationId: string | null | undefined;\n  /**\n   * Render only entries anchored to this event id. Use `null` to render the\n   * \"no events at the time of /model\" entries (top of the chat history).\n   */\n  anchorEventId: string | null;\n}\n\nexport function ModelMessages({\n  conversationId,\n  anchorEventId,\n}: ModelMessagesProps) {\n  const entriesById = useModelStore((s) => s.entriesByConversation);\n  const allEntries = conversationId ? (entriesById[conversationId] ?? []) : [];\n  const entries = allEntries.filter((e) => e.anchorEventId === anchorEventId);\n\n  if (!conversationId || entries.length === 0) return null;\n\n  return (\n    <div data-testid=\"model-messages\" className=\"flex flex-col w-full\">\n      {entries.map((entry) => {\n        if (entry.switchedTo) {\n          return (\n            <GenericEventMessage\n              key={entry.id}\n              title={\n                <span className=\"inline-flex items-center gap-1.5\">\n                  <InfoCircleIcon\n                    width={14}\n                    height={14}\n                    className=\"shrink-0 text-neutral-400\"\n                    aria-hidden\n                  />\n                  <Trans\n                    i18nKey={I18nKey.MODEL$SWITCHED_TO_PROFILE}\n                    values={{ name: entry.switchedTo }}\n                    components={{\n                      cmd: (\n                        <span className=\"font-mono text-neutral-200 bg-neutral-800 px-1 rounded\" />\n                      ),\n                    }}\n                  />\n                </span>\n              }\n              details=\"\"\n            />\n          );\n        }\n\n        const isEmpty = entry.profiles.length === 0;\n        return (\n          <GenericEventMessage\n            key={entry.id}\n            title={\n              <span>\n                {isEmpty ? (\n                  <Trans i18nKey={I18nKey.MODEL$NO_SAVED_PROFILES} />\n                ) : (\n                  <Trans\n                    i18nKey={I18nKey.MODEL$AVAILABLE_PROFILES}\n                    values={{ count: entry.profiles.length }}\n                  />\n                )}\n              </span>\n            }\n            details={\n              isEmpty ? (\n                <span className=\"text-neutral-300 text-sm px-2 py-1 block\">\n                  <Trans i18nKey={I18nKey.MODEL$NO_PROFILES_HINT} />\n                </span>\n              ) : (\n                <div className=\"flex flex-col gap-1 mt-1\">\n                  {entry.profiles.map((p) => (\n                    <ProfileRow key={p.name} profile={p} />\n                  ))}\n                </div>\n              )\n            }\n            initiallyExpanded={isEmpty}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAeA,SAAS,EAAW,EAAE,cAA4B;CAChD,IAAM,CAAC,GAAU,KAAe,EAAM,SAAS,EAAK,GAC9C,IAAa,EAAc,GAC3B,IAAe,EAA0B,EAAQ,OAAO,CAAU;CAExE,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,GAAa,MAAM,CAAC,CAAC;GACpC,iBAAe;GACf,cAAY,sBAAsB,EAAQ;GAC1C,WAAU;aALZ,CAOE,kBAAC,QAAD;IAAM,WAAU;cACF,EAAX,IAAY,IAA4B,GAA7B,EAAa,MAAM,GAAK,CAA6B;GAC7D,CAAA,GACN,kBAAC,QAAD;IAAM,WAAU;cACb,EAAQ;GACL,CAAA,CACA;MACP,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,MAAD,EAAI,WAAU,qBAAsB,CAAA,GACpC,kBAAC,OAAD;GAAK,WAAU;aACZ,aAAa,KAAgB,IAAI,cACnB,EAAQ,YAAY,IAAI,cAExB,EAAQ,cAAc,QAAQ;EAC1C,CAAA,CACL,EAAA,CAAA,CAED;;AAET;AAWA,SAAgB,EAAc,EAC5B,mBACA,oBACqB;CACrB,IAAM,IAAc,GAAe,MAAM,EAAE,qBAAqB,GAE1D,KADa,IAAkB,EAAY,MAAmB,CAAC,IAAK,CAAC,GAChD,QAAQ,MAAM,EAAE,kBAAkB,CAAa;CAI1E,OAFI,CAAC,KAAkB,EAAQ,WAAW,IAAU,OAGlD,kBAAC,OAAD;EAAK,eAAY;EAAiB,WAAU;YACzC,EAAQ,KAAK,MAAU;GACtB,IAAI,EAAM,YACR,OACE,kBAAC,GAAD;IAEE,OACE,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,kBAAC,GAAD;MACE,OAAO;MACP,QAAQ;MACR,WAAU;MACV,eAAA;KACD,CAAA,GACD,kBAAC,GAAD;MACE,SAAS,EAAQ;MACjB,QAAQ,EAAE,MAAM,EAAM,WAAW;MACjC,YAAY,EACV,KACE,kBAAC,QAAD,EAAM,WAAU,yDAA0D,CAAA,EAE9E;KACD,CAAA,CACG;;IAER,SAAQ;GACT,GArBM,EAAM,EAqBZ;GAIL,IAAM,IAAU,EAAM,SAAS,WAAW;GAC1C,OACE,kBAAC,GAAD;IAEE,OACE,kBAAC,QAAD,EAAA,UACG,IACC,kBAAC,GAAD,EAAO,SAAS,EAAQ,wBAA0B,CAAA,IAElD,kBAAC,GAAD;KACE,SAAS,EAAQ;KACjB,QAAQ,EAAE,OAAO,EAAM,SAAS,OAAO;IACxC,CAAA,EAEC,CAAA;IAER,SACE,IACE,kBAAC,QAAD;KAAM,WAAU;eACd,kBAAC,GAAD,EAAO,SAAS,EAAQ,uBAAyB,CAAA;IAC7C,CAAA,IAEN,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAM,SAAS,KAAK,MACnB,kBAAC,GAAD,EAAyB,SAAS,EAAI,GAArB,EAAE,IAAmB,CACvC;IACE,CAAA;IAGT,mBAAmB;GACpB,GA3BM,EAAM,EA2BZ;EAEL,CAAC;CACE,CAAA;AAET"}

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`,{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;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("./budget-progress-bar.cjs"),t=require("./budget-usage-text.cjs");let n=require("react/jsx-runtime");function r({cost:r,maxBudgetPerTask:i}){return r===null||i===null||i<=0?null:(0,n.jsxs)(`div`,{children:[(0,n.jsx)(e.BudgetProgressBar,{currentCost:r,maxBudget:i}),(0,n.jsx)(t.BudgetUsageText,{currentCost:r,maxBudget:i})]})}exports.BudgetDisplay=r;
 //# 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>\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"}
+{"version":3,"file":"budget-display.cjs","names":[],"sources":["../../../../src/components/features/conversation-panel/budget-display.tsx"],"sourcesContent":["import { 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  // Only render the cap/progress UI when a real per-conversation budget cap\n  // exists. There is currently no way for a user to set max_budget_per_task,\n  // so showing a \"No budget limit\" line is misleading — omit it entirely\n  // and let the surrounding cost/usage rows speak for themselves.\n  if (cost === null || maxBudgetPerTask === null || maxBudgetPerTask <= 0) {\n    return null;\n  }\n\n  return (\n    <div>\n      <BudgetProgressBar currentCost={cost} maxBudget={maxBudgetPerTask} />\n      <BudgetUsageText currentCost={cost} maxBudget={maxBudgetPerTask} />\n    </div>\n  );\n}\n"],"mappings":"wKAQA,SAAgB,EAAc,CAAE,OAAM,oBAAwC,CAS5E,OAJI,IAAS,MAAQ,IAAqB,MAAQ,GAAoB,EAC7D,MAIP,EAAA,EAAA,MAAC,MAAD,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,CAC/D,CAAA,CAAA,CAET"}

package/dist/components/features/conversation-panel/budget-display.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 interface BudgetDisplayProps {
     cost: number | null;
     maxBudgetPerTask: number | null;
 }
-export declare function BudgetDisplay({ cost, maxBudgetPerTask }: BudgetDisplayProps): React.JSX.Element | null;
+export declare function BudgetDisplay({ cost, maxBudgetPerTask }: BudgetDisplayProps): import("react").JSX.Element | null;
 export {};

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

@@ -1,24 +1,17 @@
-import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
-import { I18nKey as t } from "../../../i18n/declaration.js";
-import { BudgetProgressBar as n } from "./budget-progress-bar.js";
-import { BudgetUsageText as r } from "./budget-usage-text.js";
-import "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { BudgetProgressBar as e } from "./budget-progress-bar.js";
+import { BudgetUsageText as t } from "./budget-usage-text.js";
+import { jsx as n, jsxs as r } 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", { 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)
-	}) });
+function i({ cost: i, maxBudgetPerTask: a }) {
+	return i === null || a === null || a <= 0 ? null : /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n(e, {
+		currentCost: i,
+		maxBudget: a
+	}), /* @__PURE__ */ n(t, {
+		currentCost: i,
+		maxBudget: a
+	})] });
 }
 //#endregion
-export { s as BudgetDisplay };
+export { i as BudgetDisplay };
 
 //# sourceMappingURL=budget-display.js.map

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>\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"}
+{"version":3,"file":"budget-display.js","names":[],"sources":["../../../../src/components/features/conversation-panel/budget-display.tsx"],"sourcesContent":["import { 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  // Only render the cap/progress UI when a real per-conversation budget cap\n  // exists. There is currently no way for a user to set max_budget_per_task,\n  // so showing a \"No budget limit\" line is misleading — omit it entirely\n  // and let the surrounding cost/usage rows speak for themselves.\n  if (cost === null || maxBudgetPerTask === null || maxBudgetPerTask <= 0) {\n    return null;\n  }\n\n  return (\n    <div>\n      <BudgetProgressBar currentCost={cost} maxBudget={maxBudgetPerTask} />\n      <BudgetUsageText currentCost={cost} maxBudget={maxBudgetPerTask} />\n    </div>\n  );\n}\n"],"mappings":";;;;AAQA,SAAgB,EAAc,EAAE,SAAM,uBAAwC;CAS5E,OAJI,MAAS,QAAQ,MAAqB,QAAQ,KAAoB,IAC7D,OAIP,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAmB,aAAa;EAAM,WAAW;CAAmB,CAAA,GACpE,kBAAC,GAAD;EAAiB,aAAa;EAAM,WAAW;CAAmB,CAAA,CAC/D,EAAA,CAAA;AAET"}