@openhands/agent-canvas 1.10.0 → 1.12.0

package/dist/components/features/skills/extensions-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"extensions-navigation.js","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { ExternalLink } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\n\n/** Only the Skills item points to a cloud-hosted page today. */\nconst CLOUD_LINKED_EXTENSION_PATH = \"/skills\";\n/** Plugins are not available on Cloud backends, so this item is hidden there. */\nconst CLOUD_HIDDEN_EXTENSION_PATH = \"/plugins\";\n\ninterface ExtensionNavItem {\n  to: string;\n  label: string;\n  icon: React.ReactElement;\n  end?: boolean;\n  comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n  {\n    to: \"/skills\",\n    label: \"Skills\",\n    icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n    end: true,\n  },\n  {\n    to: \"/mcp\",\n    label: \"MCP Servers\",\n    icon: <ServerProcessIcon width={16} height={16} />,\n    end: true,\n  },\n  {\n    to: \"/plugins\",\n    label: \"Plugins\",\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        width={16}\n        height={16}\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n        <path d=\"m3.3 7 8.7 5 8.7-5\" />\n        <path d=\"M12 22V12\" />\n      </svg>\n    ),\n    end: true,\n  },\n];\n\nexport function ExtensionsNavigation() {\n  const { t } = useTranslation(\"openhands\");\n  const { active } = useActiveBackendContext();\n  const { backend } = active;\n  const isCloudBackend = !isNoBackend(backend) && backend.kind === \"cloud\";\n\n  return (\n    <aside\n      data-testid=\"extensions-navbar-desktop\"\n      className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n    >\n      <span className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.NAV$CUSTOMIZE)}\n      </span>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {EXTENSIONS_NAV_ITEMS.filter(\n          (item) =>\n            !(item.to === CLOUD_HIDDEN_EXTENSION_PATH && isCloudBackend),\n        ).map((item) => {\n          const isCloudSkillsLink =\n            item.to === CLOUD_LINKED_EXTENSION_PATH && isCloudBackend;\n          const baseRow = (\n            <span className=\"shrink-0 flex items-center justify-center\">\n              {item.icon}\n            </span>\n          );\n          const label = (\n            <span className=\"truncate\">\n              {isCloudSkillsLink\n                ? t(I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK)\n                : item.label}\n            </span>\n          );\n          const comingSoonBadge = item.comingSoon && (\n            <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n              {t(I18nKey.NAV$COMING_SOON)}\n            </span>\n          );\n\n          if (isCloudSkillsLink) {\n            const cloudSkillsUrl = `${backend.host.replace(/\\/+$/, \"\")}/settings/skills`;\n            return (\n              <a\n                key={item.to}\n                data-testid={`sidebar-extensions-${item.to}`}\n                href={cloudSkillsUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className={cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )}\n              >\n                {baseRow}\n                {label}\n                <ExternalLink\n                  className=\"ml-auto size-4 shrink-0 text-[var(--oh-muted)]\"\n                  aria-hidden\n                />\n              </a>\n            );\n          }\n\n          return (\n            <NavigationLink\n              key={item.to}\n              to={item.to}\n              end={item.end}\n              data-testid={`sidebar-extensions-${item.to}`}\n              className={({ isActive }) =>\n                cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  isActive\n                    ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n                    : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )\n              }\n            >\n              {baseRow}\n              {label}\n              {comingSoonBadge}\n            </NavigationLink>\n          );\n        })}\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,IAA8B,WAE9B,IAA8B,YAUvB,IAA2C;CACtD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAY,OAAO;GAAI,QAAQ;GAAI,eAAY;EAAQ,CAAA;EAC7D,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAmB,OAAO;GAAI,QAAQ;EAAK,CAAA;EACjD,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MACE,kBAAC,OAAD;GACE,OAAM;GACN,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,OAAO;GACP,QAAQ;GACR,eAAY;aAVd;IAYE,kBAAC,QAAD,EAAM,GAAE,yHAA0H,CAAA;IAClI,kBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;IAC9B,kBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GAClB;;EAEP,KAAK;CACP;AACF;AAEA,SAAgB,IAAuB;CACrC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,cAAW,EAAwB,GACrC,EAAE,eAAY,GACd,IAAiB,CAAC,EAAY,CAAO,KAAK,EAAQ,SAAS;CAEjE,OACE,kBAAC,SAAD;EACE,eAAY;EACZ,WAAU;YAFZ;GAIE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,EAAQ,aAAa;GACpB,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAqB,QACnB,MACC,EAAE,EAAK,OAAO,KAA+B,EACjD,EAAE,KAAK,MAAS;KACd,IAAM,IACJ,EAAK,OAAO,KAA+B,GACvC,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;KACF,CAAA,GAEF,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,IACG,EAAE,EAAQ,qCAAqC,IAC/C,EAAK;KACL,CAAA,GAEF,IAAkB,EAAK,cAC3B,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAQ,eAAe;KACtB,CAAA;KAGR,IAAI,GAAmB;MACrB,IAAM,IAAiB,GAAG,EAAQ,KAAK,QAAQ,QAAQ,EAAE,EAAE;MAC3D,OACE,kBAAC,KAAD;OAEE,eAAa,sBAAsB,EAAK;OACxC,MAAM;OACN,QAAO;OACP,KAAI;OACJ,WAAW,EACT,EAAuB,GACvB,YACA,EAA8B,IAChC;iBAVF;QAYG;QACA;QACD,kBAAC,GAAD;SACE,WAAU;SACV,eAAA;QACD,CAAA;OACA;SAjBI,EAAK,EAiBT;KAEP;KAEA,OACE,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,KAAK,EAAK;MACV,eAAa,sBAAsB,EAAK;MACxC,YAAY,EAAE,kBACZ,EACE,EAAuB,GACvB,YACA,IACI,EAA8B,SAC9B,EAA8B,IACpC;gBAZJ;OAeG;OACA;OACA;MACa;QAjBT,EAAK,EAiBI;IAEpB,CAAC;GACE,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,CAA6B,CAAA;GAC1B,CAAA;EACA;;AAEX"}
+{"version":3,"file":"extensions-navigation.js","names":[],"sources":["../../../../src/components/features/skills/extensions-navigation.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { ExternalLink } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { cn } from \"#/utils/utils\";\nimport SkillsIcon from \"#/icons/skills.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport {\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\n\n/** Only the Skills item points to a cloud-hosted page today. */\nconst CLOUD_LINKED_EXTENSION_PATH = \"/skills\";\n/** Plugins are not available on Cloud backends, so this item is hidden there. */\nconst CLOUD_HIDDEN_EXTENSION_PATH = \"/plugins\";\n\ninterface ExtensionNavItem {\n  to: string;\n  label: string;\n  icon: React.ReactElement;\n  end?: boolean;\n  comingSoon?: boolean;\n}\n\nexport const EXTENSIONS_NAV_ITEMS: ExtensionNavItem[] = [\n  {\n    to: \"/mcp\",\n    label: \"MCP Servers\",\n    icon: <ServerProcessIcon width={16} height={16} />,\n    end: true,\n  },\n  {\n    to: \"/skills\",\n    label: \"Skills\",\n    icon: <SkillsIcon width={16} height={16} aria-hidden=\"true\" />,\n    end: true,\n  },\n  {\n    to: \"/plugins\",\n    label: \"Plugins\",\n    icon: (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        width={16}\n        height={16}\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\" />\n        <path d=\"m3.3 7 8.7 5 8.7-5\" />\n        <path d=\"M12 22V12\" />\n      </svg>\n    ),\n    end: true,\n  },\n];\n\nexport function ExtensionsNavigation() {\n  const { t } = useTranslation(\"openhands\");\n  const { active } = useActiveBackendContext();\n  const { backend } = active;\n  const isCloudBackend = !isNoBackend(backend) && backend.kind === \"cloud\";\n\n  return (\n    <aside\n      data-testid=\"extensions-navbar-desktop\"\n      className=\"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2 md:sticky md:top-8 md:self-start\"\n    >\n      <span className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.NAV$CUSTOMIZE)}\n      </span>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {EXTENSIONS_NAV_ITEMS.filter(\n          (item) =>\n            !(item.to === CLOUD_HIDDEN_EXTENSION_PATH && isCloudBackend),\n        ).map((item) => {\n          const isCloudSkillsLink =\n            item.to === CLOUD_LINKED_EXTENSION_PATH && isCloudBackend;\n          const baseRow = (\n            <span className=\"shrink-0 flex items-center justify-center\">\n              {item.icon}\n            </span>\n          );\n          const label = (\n            <span className=\"truncate\">\n              {isCloudSkillsLink\n                ? t(I18nKey.SIDEBAR$SKILLS_AND_PLUGINS_CLOUD_LINK)\n                : item.label}\n            </span>\n          );\n          const comingSoonBadge = item.comingSoon && (\n            <span className=\"ml-auto shrink-0 rounded-full border border-white/20 bg-white/5 px-1.5 py-0.5 text-[10px] font-medium text-[var(--oh-text-dim)]\">\n              {t(I18nKey.NAV$COMING_SOON)}\n            </span>\n          );\n\n          if (isCloudSkillsLink) {\n            const cloudSkillsUrl = `${backend.host.replace(/\\/+$/, \"\")}/settings/skills`;\n            return (\n              <a\n                key={item.to}\n                data-testid={`sidebar-extensions-${item.to}`}\n                href={cloudSkillsUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className={cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )}\n              >\n                {baseRow}\n                {label}\n                <ExternalLink\n                  className=\"ml-auto size-4 shrink-0 text-[var(--oh-muted)]\"\n                  aria-hidden\n                />\n              </a>\n            );\n          }\n\n          return (\n            <NavigationLink\n              key={item.to}\n              to={item.to}\n              end={item.end}\n              data-testid={`sidebar-extensions-${item.to}`}\n              className={({ isActive }) =>\n                cn(\n                  sidebarNavRowClassName(),\n                  \"truncate\",\n                  isActive\n                    ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n                    : SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n                )\n              }\n            >\n              {baseRow}\n              {label}\n              {comingSoonBadge}\n            </NavigationLink>\n          );\n        })}\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,IAA8B,WAE9B,IAA8B,YAUvB,IAA2C;CACtD;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAmB,OAAO;GAAI,QAAQ;EAAK,CAAA;EACjD,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MAAM,kBAAC,GAAD;GAAY,OAAO;GAAI,QAAQ;GAAI,eAAY;EAAQ,CAAA;EAC7D,KAAK;CACP;CACA;EACE,IAAI;EACJ,OAAO;EACP,MACE,kBAAC,OAAD;GACE,OAAM;GACN,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,OAAO;GACP,QAAQ;GACR,eAAY;aAVd;IAYE,kBAAC,QAAD,EAAM,GAAE,yHAA0H,CAAA;IAClI,kBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;IAC9B,kBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GAClB;;EAEP,KAAK;CACP;AACF;AAEA,SAAgB,IAAuB;CACrC,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,EAAE,cAAW,EAAwB,GACrC,EAAE,eAAY,GACd,IAAiB,CAAC,EAAY,CAAO,KAAK,EAAQ,SAAS;CAEjE,OACE,kBAAC,SAAD;EACE,eAAY;EACZ,WAAU;YAFZ;GAIE,kBAAC,QAAD;IAAM,WAAU;cACb,EAAE,EAAQ,aAAa;GACpB,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAqB,QACnB,MACC,EAAE,EAAK,OAAO,KAA+B,EACjD,EAAE,KAAK,MAAS;KACd,IAAM,IACJ,EAAK,OAAO,KAA+B,GACvC,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAK;KACF,CAAA,GAEF,IACJ,kBAAC,QAAD;MAAM,WAAU;gBACb,IACG,EAAE,EAAQ,qCAAqC,IAC/C,EAAK;KACL,CAAA,GAEF,IAAkB,EAAK,cAC3B,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAE,EAAQ,eAAe;KACtB,CAAA;KAGR,IAAI,GAAmB;MACrB,IAAM,IAAiB,GAAG,EAAQ,KAAK,QAAQ,QAAQ,EAAE,EAAE;MAC3D,OACE,kBAAC,KAAD;OAEE,eAAa,sBAAsB,EAAK;OACxC,MAAM;OACN,QAAO;OACP,KAAI;OACJ,WAAW,EACT,EAAuB,GACvB,YACA,EAA8B,IAChC;iBAVF;QAYG;QACA;QACD,kBAAC,GAAD;SACE,WAAU;SACV,eAAA;QACD,CAAA;OACA;SAjBI,EAAK,EAiBT;KAEP;KAEA,OACE,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,KAAK,EAAK;MACV,eAAa,sBAAsB,EAAK;MACxC,YAAY,EAAE,kBACZ,EACE,EAAuB,GACvB,YACA,IACI,EAA8B,SAC9B,EAA8B,IACpC;gBAZJ;OAeG;OACA;OACA;MACa;QAjBT,EAAK,EAiBI;IAEpB,CAAC;GACE,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,CAA6B,CAAA;GAC1B,CAAA;EACA;;AAEX"}

package/dist/components/shared/modals/settings/model-selector.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/constants.cjs"),i=require("../../../../utils/utils.cjs"),a=require("../../../../utils/form-control-classes.cjs"),o=require("../../../../node_modules/@heroui/listbox/dist/chunk-BJFJ4DRR.cjs"),s=require("../../../../node_modules/@heroui/listbox/dist/chunk-ANTZPR32.cjs"),c=require("../../../../node_modules/@heroui/autocomplete/dist/chunk-3QKDXXDY.cjs"),l=require("../../../../ui/combobox-caret.cjs"),u=require("../../../../utils/map-provider.cjs"),d=require("../../../../utils/extract-model-and-provider.cjs"),f=require("../../../../ui/help-link.cjs"),p=require("../../../../hooks/query/use-search-providers.cjs"),m=require("../../../../hooks/query/use-provider-models.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");function _({isDisabled:e,currentModel:_,onChange:v,onDefaultValuesChanged:y,wrapperClassName:b,labelClassName:x}){let[,S]=h.default.useState(null),[C,w]=h.default.useState(null),[T,E]=h.default.useState(null),{data:D=[]}=p.useSearchProviders(),{data:O=[],isLoading:k,error:A}=m.useProviderModels(C),j=h.default.useMemo(()=>D.filter(e=>e.verified),[D]),M=h.default.useMemo(()=>D.filter(e=>!e.verified),[D]),N=h.default.useMemo(()=>O.filter(e=>e.verified),[O]),P=h.default.useMemo(()=>O.filter(e=>!e.verified),[O]);h.default.useEffect(()=>{if(_){let{provider:e,model:t}=d.extractModelAndProvider(_);S(_),w(e||null),E(t),y?.(e||null,t)}},[_]);let F=e=>{w(e),E(null),S(`${e}/`),v?.(e,null)},I=e=>{let t=`${C}/${e}`;C===`openai`&&(t=e),S(t),E(e),v?.(C,e)},L=()=>{w(null),S(null)},{t:R}=t.useTranslation(`openhands`);return(0,g.jsxs)(`div`,{className:i.cn(`flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]`,b),children:[(0,g.jsxs)(`fieldset`,{className:`flex flex-col gap-2.5 w-full`,children:[(0,g.jsx)(`label`,{className:i.cn(`text-sm`,x),children:R(n.I18nKey.LLM$PROVIDER)}),(0,g.jsxs)(c.autocomplete_default,{"data-testid":`llm-provider-input`,isRequired:!0,isVirtualized:!1,name:`llm-provider-input`,isDisabled:e,"aria-label":R(n.I18nKey.LLM$PROVIDER),isClearable:!1,onSelectionChange:e=>{e?.toString()&&F(e.toString())},onInputChange:e=>!e&&L(),defaultSelectedKey:C??void 0,selectedKey:C,classNames:{popoverContent:`bg-content1 rounded-xl border border-[var(--oh-border)]`,selectorButton:l.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:a.formControlSettingsFieldClassName}},children:[(0,g.jsx)(s.listbox_section_base_default,{title:R(n.I18nKey.MODEL_SELECTOR$VERIFIED),classNames:{heading:`text-[var(--oh-muted)]`},children:j.map(e=>(0,g.jsx)(o.listbox_item_base_default,{"data-testid":`provider-item-${e.name}`,children:u.mapProvider(e.name)},e.name))}),M.length>0?(0,g.jsx)(s.listbox_section_base_default,{title:R(n.I18nKey.MODEL_SELECTOR$OTHERS),classNames:{heading:`text-[var(--oh-muted)]`},children:M.map(e=>(0,g.jsx)(o.listbox_item_base_default,{children:u.mapProvider(e.name)},e.name))}):null]})]}),C===`openhands`&&(0,g.jsx)(f.HelpLink,{testId:`openhands-account-help`,text:R(n.I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT),linkText:R(n.I18nKey.SETTINGS$CLICK_HERE),href:r.PRODUCT_URL.PRODUCTION,size:`settings`,linkColor:`white`}),(0,g.jsxs)(`fieldset`,{className:`flex flex-col gap-2.5 w-full`,children:[(0,g.jsx)(`label`,{className:i.cn(`text-sm`,x),children:R(n.I18nKey.LLM$MODEL)}),(0,g.jsxs)(c.autocomplete_default,{"data-testid":`llm-model-input`,isRequired:!0,isVirtualized:!1,isLoading:k,name:`llm-model-input`,"aria-label":R(n.I18nKey.LLM$MODEL),isClearable:!1,onSelectionChange:e=>{e?.toString()&&I(e.toString())},isDisabled:e||!C,selectedKey:T,defaultSelectedKey:T??void 0,classNames:{popoverContent:`bg-content1 rounded-xl border border-[var(--oh-border)]`,selectorButton:l.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:a.formControlSettingsFieldClassName}},children:[(0,g.jsx)(s.listbox_section_base_default,{title:R(n.I18nKey.MODEL_SELECTOR$VERIFIED),classNames:{heading:`text-[var(--oh-muted)]`},children:N.map(e=>(0,g.jsx)(o.listbox_item_base_default,{children:e.name},e.name))}),P.length>0?(0,g.jsx)(s.listbox_section_base_default,{title:R(n.I18nKey.MODEL_SELECTOR$OTHERS),classNames:{heading:`text-[var(--oh-muted)]`},children:P.map(e=>(0,g.jsx)(o.listbox_item_base_default,{"data-testid":`model-item-${e.name}`,children:e.name},e.name))}):null]}),A&&(0,g.jsx)(`p`,{"data-testid":`models-error`,className:`text-danger text-xs`,children:R(n.I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)})]})]})}exports.ModelSelector=_;
+const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../../i18n/declaration.cjs"),r=require("../../../../node_modules/lucide-react/dist/esm/icons/info.cjs"),i=require("../../../../utils/constants.cjs"),a=require("../../../../utils/utils.cjs"),o=require("../../../../utils/form-control-classes.cjs"),s=require("../../../../utils/format-model-name.cjs"),c=require("../../../../node_modules/@heroui/listbox/dist/chunk-BJFJ4DRR.cjs"),l=require("../../../../node_modules/@heroui/listbox/dist/chunk-ANTZPR32.cjs"),u=require("../../../../node_modules/@heroui/autocomplete/dist/chunk-3QKDXXDY.cjs"),d=require("../../../../ui/combobox-caret.cjs"),f=require("../../../../utils/map-provider.cjs"),p=require("../../../../utils/extract-model-and-provider.cjs"),m=require("../../../../ui/help-link.cjs"),h=require("../../../../hooks/query/use-search-providers.cjs"),g=require("../../../../hooks/query/use-provider-models.cjs");let _=require("react");_=e.__toESM(_,1);let v=require("react/jsx-runtime");var y=`shrink-0 rounded-full border border-warning/40 bg-warning/10 px-1.5 py-0.5 text-[10px] leading-none text-warning`;function b(){return(0,v.jsxs)(`p`,{"data-testid":`openhands-free-models-note`,className:`flex items-start gap-2 text-xs text-warning`,children:[(0,v.jsx)(r.Info,{className:`mt-0.5 size-4 shrink-0 text-warning`,"aria-hidden":!0}),(0,v.jsx)(`span`,{children:s.FREE_OPENHANDS_MODEL_NOTE})]})}function x({isDisabled:e,currentModel:r,onChange:x,onDefaultValuesChanged:S,wrapperClassName:C,labelClassName:w}){let[,T]=_.default.useState(null),[E,D]=_.default.useState(null),[O,k]=_.default.useState(null),{data:A=[]}=h.useSearchProviders(),{data:j=[],isLoading:M,error:N}=g.useProviderModels(E),P=_.default.useMemo(()=>A.filter(e=>e.verified),[A]),F=_.default.useMemo(()=>A.filter(e=>!e.verified),[A]),I=_.default.useMemo(()=>j.filter(e=>e.verified),[j]),L=_.default.useMemo(()=>j.filter(e=>!e.verified),[j]);_.default.useEffect(()=>{if(r){let{provider:e,model:t}=p.extractModelAndProvider(r);T(r),D(e||null),k(t),S?.(e||null,t)}},[r]);let R=e=>{D(e),k(null),T(`${e}/`),x?.(e,null)},z=e=>{let t=`${E}/${e}`;E===`openai`&&(t=e),T(t),k(e),x?.(E,e)},B=()=>{D(null),T(null)},V=s.isFreeOpenHandsModel(E&&O?`${E}/${O}`:null),H=_.default.useRef(null),[U,W]=_.default.useState(0);_.default.useLayoutEffect(()=>{if(!V||!H.current){W(0);return}let e=()=>{W(Math.ceil(H.current?.getBoundingClientRect().width??0))};if(e(),typeof ResizeObserver>`u`)return;let t=new ResizeObserver(e);return t.observe(H.current),()=>t.disconnect()},[V,O]);let{t:G}=t.useTranslation(`openhands`);return(0,v.jsxs)(`div`,{className:a.cn(`flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]`,C),children:[(0,v.jsxs)(`fieldset`,{className:`flex flex-col gap-2.5 w-full`,children:[(0,v.jsx)(`label`,{className:a.cn(`text-sm`,w),children:G(n.I18nKey.LLM$PROVIDER)}),(0,v.jsxs)(u.autocomplete_default,{"data-testid":`llm-provider-input`,isRequired:!0,isVirtualized:!1,name:`llm-provider-input`,isDisabled:e,"aria-label":G(n.I18nKey.LLM$PROVIDER),isClearable:!1,onSelectionChange:e=>{e?.toString()&&R(e.toString())},onInputChange:e=>!e&&B(),defaultSelectedKey:E??void 0,selectedKey:E,classNames:{popoverContent:`bg-content1 rounded-xl border border-[var(--oh-border)]`,selectorButton:d.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:o.formControlSettingsFieldClassName}},children:[(0,v.jsx)(l.listbox_section_base_default,{title:G(n.I18nKey.MODEL_SELECTOR$VERIFIED),classNames:{heading:`text-[var(--oh-muted)]`},children:P.map(e=>(0,v.jsx)(c.listbox_item_base_default,{"data-testid":`provider-item-${e.name}`,children:f.mapProvider(e.name)},e.name))}),F.length>0?(0,v.jsx)(l.listbox_section_base_default,{title:G(n.I18nKey.MODEL_SELECTOR$OTHERS),classNames:{heading:`text-[var(--oh-muted)]`},children:F.map(e=>(0,v.jsx)(c.listbox_item_base_default,{children:f.mapProvider(e.name)},e.name))}):null]})]}),E===`openhands`&&(0,v.jsx)(`div`,{className:`flex flex-col gap-2`,children:(0,v.jsx)(m.HelpLink,{testId:`openhands-account-help`,text:G(n.I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT),linkText:G(n.I18nKey.SETTINGS$CLICK_HERE),href:i.PRODUCT_URL.PRODUCTION,size:`settings`,linkColor:`white`})}),(0,v.jsxs)(`fieldset`,{className:`flex flex-col gap-2.5 w-full`,children:[(0,v.jsx)(`label`,{className:a.cn(`text-sm`,w),children:G(n.I18nKey.LLM$MODEL)}),(0,v.jsxs)(`div`,{className:`relative`,children:[(0,v.jsxs)(u.autocomplete_default,{"data-testid":`llm-model-input`,isRequired:!0,isVirtualized:!1,isLoading:M,name:`llm-model-input`,"aria-label":G(n.I18nKey.LLM$MODEL),isClearable:!1,onSelectionChange:e=>{e?.toString()&&z(e.toString())},isDisabled:e||!E,selectedKey:O,defaultSelectedKey:O??void 0,classNames:{popoverContent:`bg-content1 rounded-xl border border-[var(--oh-border)]`,selectorButton:d.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:o.formControlSettingsFieldClassName}},children:[(0,v.jsx)(l.listbox_section_base_default,{title:G(n.I18nKey.MODEL_SELECTOR$VERIFIED),classNames:{heading:`text-[var(--oh-muted)]`},children:I.map(e=>(0,v.jsx)(c.listbox_item_base_default,{textValue:e.name,children:(0,v.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2`,children:[(0,v.jsx)(`span`,{className:`truncate`,children:e.name}),s.isFreeOpenHandsModel(`${E}/${e.name}`)?(0,v.jsx)(`span`,{className:y,children:s.FREE_MODEL_BADGE_LABEL}):null]})},e.name))}),L.length>0?(0,v.jsx)(l.listbox_section_base_default,{title:G(n.I18nKey.MODEL_SELECTOR$OTHERS),classNames:{heading:`text-[var(--oh-muted)]`},children:L.map(e=>(0,v.jsx)(c.listbox_item_base_default,{"data-testid":`model-item-${e.name}`,textValue:e.name,children:e.name},e.name))}):null]}),V&&O?(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(`span`,{ref:H,className:`pointer-events-none absolute left-3 top-1/2 whitespace-pre text-sm opacity-0`,"aria-hidden":!0,children:O}),(0,v.jsx)(`span`,{"data-testid":`selected-free-model-badge`,className:a.cn(y,`pointer-events-none absolute top-1/2 z-10 -translate-y-1/2`),style:{left:`calc(0.75rem + ${U}px + 0.5rem)`},children:s.FREE_MODEL_BADGE_LABEL})]}):null]}),N&&(0,v.jsx)(`p`,{"data-testid":`models-error`,className:`text-danger text-xs`,children:G(n.I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}),E===`openhands`?(0,v.jsx)(b,{}):null]})]})}exports.ModelSelector=x;
 //# sourceMappingURL=model-selector.cjs.map

package/dist/components/shared/modals/settings/model-selector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"model-selector.cjs","names":[],"sources":["../../../../../src/components/shared/modals/settings/model-selector.tsx"],"sourcesContent":["import {\n  Autocomplete,\n  AutocompleteItem,\n  AutocompleteSection,\n} from \"@heroui/react\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { mapProvider } from \"#/utils/map-provider\";\nimport { extractModelAndProvider } from \"#/utils/extract-model-and-provider\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { heroUiAutocompleteSelectorButtonClassName } from \"#/ui/combobox-caret\";\nimport { HelpLink } from \"#/ui/help-link\";\nimport { PRODUCT_URL } from \"#/utils/constants\";\nimport { useSearchProviders } from \"#/hooks/query/use-search-providers\";\nimport { useProviderModels } from \"#/hooks/query/use-provider-models\";\n\ninterface ModelSelectorProps {\n  isDisabled?: boolean;\n  currentModel?: string;\n  onChange?: (provider: string | null, model: string | null) => void;\n  onDefaultValuesChanged?: (\n    provider: string | null,\n    model: string | null,\n  ) => void;\n  wrapperClassName?: string;\n  labelClassName?: string;\n}\n\nexport function ModelSelector({\n  isDisabled,\n  currentModel,\n  onChange,\n  onDefaultValuesChanged,\n  wrapperClassName,\n  labelClassName,\n}: ModelSelectorProps) {\n  const [, setLitellmId] = React.useState<string | null>(null);\n  const [selectedProvider, setSelectedProvider] = React.useState<string | null>(\n    null,\n  );\n  const [selectedModel, setSelectedModel] = React.useState<string | null>(null);\n\n  const { data: providers = [] } = useSearchProviders();\n  const {\n    data: providerModels = [],\n    isLoading: isLoadingModels,\n    error: modelsError,\n  } = useProviderModels(selectedProvider);\n\n  const verifiedProviders = React.useMemo(\n    () => providers.filter((p) => p.verified),\n    [providers],\n  );\n  const unverifiedProviders = React.useMemo(\n    () => providers.filter((p) => !p.verified),\n    [providers],\n  );\n\n  const verifiedModels = React.useMemo(\n    () => providerModels.filter((m) => m.verified),\n    [providerModels],\n  );\n  const unverifiedModels = React.useMemo(\n    () => providerModels.filter((m) => !m.verified),\n    [providerModels],\n  );\n\n  React.useEffect(() => {\n    if (currentModel) {\n      const { provider, model } = extractModelAndProvider(currentModel);\n\n      setLitellmId(currentModel);\n      setSelectedProvider(provider || null);\n      setSelectedModel(model);\n      onDefaultValuesChanged?.(provider || null, model);\n    }\n  }, [currentModel]);\n\n  const handleChangeProvider = (provider: string) => {\n    setSelectedProvider(provider);\n    setSelectedModel(null);\n    setLitellmId(`${provider}/`);\n    onChange?.(provider, null);\n  };\n\n  const handleChangeModel = (model: string) => {\n    let fullModel = `${selectedProvider}/${model}`;\n    if (selectedProvider === \"openai\") {\n      fullModel = model;\n    }\n    setLitellmId(fullModel);\n    setSelectedModel(model);\n    onChange?.(selectedProvider, model);\n  };\n\n  const clear = () => {\n    setSelectedProvider(null);\n    setLitellmId(null);\n  };\n\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]\",\n        wrapperClassName,\n      )}\n    >\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$PROVIDER)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-provider-input\"\n          isRequired\n          isVirtualized={false}\n          name=\"llm-provider-input\"\n          isDisabled={isDisabled}\n          aria-label={t(I18nKey.LLM$PROVIDER)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeProvider(e.toString());\n          }}\n          onInputChange={(value) => !value && clear()}\n          defaultSelectedKey={selectedProvider ?? undefined}\n          selectedKey={selectedProvider}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedProviders.map((provider) => (\n              <AutocompleteItem\n                data-testid={`provider-item-${provider.name}`}\n                key={provider.name}\n              >\n                {mapProvider(provider.name)}\n              </AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedProviders.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedProviders.map((provider) => (\n                <AutocompleteItem key={provider.name}>\n                  {mapProvider(provider.name)}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n      </fieldset>\n\n      {selectedProvider === \"openhands\" && (\n        <HelpLink\n          testId=\"openhands-account-help\"\n          text={t(I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT)}\n          linkText={t(I18nKey.SETTINGS$CLICK_HERE)}\n          href={PRODUCT_URL.PRODUCTION}\n          size=\"settings\"\n          linkColor=\"white\"\n        />\n      )}\n\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$MODEL)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-model-input\"\n          isRequired\n          isVirtualized={false}\n          isLoading={isLoadingModels}\n          name=\"llm-model-input\"\n          aria-label={t(I18nKey.LLM$MODEL)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeModel(e.toString());\n          }}\n          isDisabled={isDisabled || !selectedProvider}\n          selectedKey={selectedModel}\n          defaultSelectedKey={selectedModel ?? undefined}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedModels.map((model) => (\n              <AutocompleteItem key={model.name}>{model.name}</AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedModels.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedModels.map((model) => (\n                <AutocompleteItem\n                  data-testid={`model-item-${model.name}`}\n                  key={model.name}\n                >\n                  {model.name}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n        {modelsError && (\n          <p data-testid=\"models-error\" className=\"text-danger text-xs\">\n            {t(I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}\n          </p>\n        )}\n      </fieldset>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"model-selector.cjs","names":[],"sources":["../../../../../src/components/shared/modals/settings/model-selector.tsx"],"sourcesContent":["import {\n  Autocomplete,\n  AutocompleteItem,\n  AutocompleteSection,\n} from \"@heroui/react\";\nimport { Info } from \"lucide-react\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { mapProvider } from \"#/utils/map-provider\";\nimport { extractModelAndProvider } from \"#/utils/extract-model-and-provider\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { heroUiAutocompleteSelectorButtonClassName } from \"#/ui/combobox-caret\";\nimport { HelpLink } from \"#/ui/help-link\";\nimport { PRODUCT_URL } from \"#/utils/constants\";\nimport { useSearchProviders } from \"#/hooks/query/use-search-providers\";\nimport { useProviderModels } from \"#/hooks/query/use-provider-models\";\nimport {\n  FREE_MODEL_BADGE_LABEL,\n  FREE_OPENHANDS_MODEL_NOTE,\n  isFreeOpenHandsModel,\n} from \"#/utils/format-model-name\";\n\nconst freeModelBadgeClassName =\n  \"shrink-0 rounded-full border border-warning/40 bg-warning/10 px-1.5 py-0.5 text-[10px] leading-none text-warning\";\n\nfunction FreeOpenHandsModelsNote() {\n  return (\n    <p\n      data-testid=\"openhands-free-models-note\"\n      className=\"flex items-start gap-2 text-xs text-warning\"\n    >\n      <Info className=\"mt-0.5 size-4 shrink-0 text-warning\" aria-hidden />\n      <span>{FREE_OPENHANDS_MODEL_NOTE}</span>\n    </p>\n  );\n}\n\ninterface ModelSelectorProps {\n  isDisabled?: boolean;\n  currentModel?: string;\n  onChange?: (provider: string | null, model: string | null) => void;\n  onDefaultValuesChanged?: (\n    provider: string | null,\n    model: string | null,\n  ) => void;\n  wrapperClassName?: string;\n  labelClassName?: string;\n}\n\nexport function ModelSelector({\n  isDisabled,\n  currentModel,\n  onChange,\n  onDefaultValuesChanged,\n  wrapperClassName,\n  labelClassName,\n}: ModelSelectorProps) {\n  const [, setLitellmId] = React.useState<string | null>(null);\n  const [selectedProvider, setSelectedProvider] = React.useState<string | null>(\n    null,\n  );\n  const [selectedModel, setSelectedModel] = React.useState<string | null>(null);\n\n  const { data: providers = [] } = useSearchProviders();\n  const {\n    data: providerModels = [],\n    isLoading: isLoadingModels,\n    error: modelsError,\n  } = useProviderModels(selectedProvider);\n\n  const verifiedProviders = React.useMemo(\n    () => providers.filter((p) => p.verified),\n    [providers],\n  );\n  const unverifiedProviders = React.useMemo(\n    () => providers.filter((p) => !p.verified),\n    [providers],\n  );\n\n  const verifiedModels = React.useMemo(\n    () => providerModels.filter((m) => m.verified),\n    [providerModels],\n  );\n  const unverifiedModels = React.useMemo(\n    () => providerModels.filter((m) => !m.verified),\n    [providerModels],\n  );\n\n  React.useEffect(() => {\n    if (currentModel) {\n      const { provider, model } = extractModelAndProvider(currentModel);\n\n      setLitellmId(currentModel);\n      setSelectedProvider(provider || null);\n      setSelectedModel(model);\n      onDefaultValuesChanged?.(provider || null, model);\n    }\n  }, [currentModel]);\n\n  const handleChangeProvider = (provider: string) => {\n    setSelectedProvider(provider);\n    setSelectedModel(null);\n    setLitellmId(`${provider}/`);\n    onChange?.(provider, null);\n  };\n\n  const handleChangeModel = (model: string) => {\n    let fullModel = `${selectedProvider}/${model}`;\n    if (selectedProvider === \"openai\") {\n      fullModel = model;\n    }\n    setLitellmId(fullModel);\n    setSelectedModel(model);\n    onChange?.(selectedProvider, model);\n  };\n\n  const clear = () => {\n    setSelectedProvider(null);\n    setLitellmId(null);\n  };\n\n  const selectedFullModel =\n    selectedProvider && selectedModel\n      ? `${selectedProvider}/${selectedModel}`\n      : null;\n  const isSelectedModelFree = isFreeOpenHandsModel(selectedFullModel);\n  const selectedModelMeasureRef = React.useRef<HTMLSpanElement>(null);\n  const [selectedModelTextWidth, setSelectedModelTextWidth] = React.useState(0);\n\n  React.useLayoutEffect(() => {\n    if (!isSelectedModelFree || !selectedModelMeasureRef.current) {\n      setSelectedModelTextWidth(0);\n      return undefined;\n    }\n\n    const measureSelectedModel = () => {\n      setSelectedModelTextWidth(\n        Math.ceil(\n          selectedModelMeasureRef.current?.getBoundingClientRect().width ?? 0,\n        ),\n      );\n    };\n    measureSelectedModel();\n\n    if (typeof ResizeObserver === \"undefined\") {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(measureSelectedModel);\n    observer.observe(selectedModelMeasureRef.current);\n    return () => observer.disconnect();\n  }, [isSelectedModelFree, selectedModel]);\n\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]\",\n        wrapperClassName,\n      )}\n    >\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$PROVIDER)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-provider-input\"\n          isRequired\n          isVirtualized={false}\n          name=\"llm-provider-input\"\n          isDisabled={isDisabled}\n          aria-label={t(I18nKey.LLM$PROVIDER)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeProvider(e.toString());\n          }}\n          onInputChange={(value) => !value && clear()}\n          defaultSelectedKey={selectedProvider ?? undefined}\n          selectedKey={selectedProvider}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedProviders.map((provider) => (\n              <AutocompleteItem\n                data-testid={`provider-item-${provider.name}`}\n                key={provider.name}\n              >\n                {mapProvider(provider.name)}\n              </AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedProviders.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedProviders.map((provider) => (\n                <AutocompleteItem key={provider.name}>\n                  {mapProvider(provider.name)}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n      </fieldset>\n\n      {selectedProvider === \"openhands\" && (\n        <div className=\"flex flex-col gap-2\">\n          <HelpLink\n            testId=\"openhands-account-help\"\n            text={t(I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT)}\n            linkText={t(I18nKey.SETTINGS$CLICK_HERE)}\n            href={PRODUCT_URL.PRODUCTION}\n            size=\"settings\"\n            linkColor=\"white\"\n          />\n        </div>\n      )}\n\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$MODEL)}\n        </label>\n        <div className=\"relative\">\n          <Autocomplete\n            data-testid=\"llm-model-input\"\n            isRequired\n            isVirtualized={false}\n            isLoading={isLoadingModels}\n            name=\"llm-model-input\"\n            aria-label={t(I18nKey.LLM$MODEL)}\n            isClearable={false}\n            onSelectionChange={(e) => {\n              if (e?.toString()) handleChangeModel(e.toString());\n            }}\n            isDisabled={isDisabled || !selectedProvider}\n            selectedKey={selectedModel}\n            defaultSelectedKey={selectedModel ?? undefined}\n            classNames={{\n              popoverContent:\n                \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n              selectorButton: heroUiAutocompleteSelectorButtonClassName,\n            }}\n            selectorButtonProps={{ disableRipple: true }}\n            inputProps={{\n              classNames: {\n                inputWrapper: formControlSettingsFieldClassName,\n              },\n            }}\n          >\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {verifiedModels.map((model) => (\n                <AutocompleteItem key={model.name} textValue={model.name}>\n                  <span className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"truncate\">{model.name}</span>\n                    {isFreeOpenHandsModel(\n                      `${selectedProvider}/${model.name}`,\n                    ) ? (\n                      <span className={freeModelBadgeClassName}>\n                        {FREE_MODEL_BADGE_LABEL}\n                      </span>\n                    ) : null}\n                  </span>\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n            {unverifiedModels.length > 0 ? (\n              <AutocompleteSection\n                title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n                classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n              >\n                {unverifiedModels.map((model) => (\n                  <AutocompleteItem\n                    data-testid={`model-item-${model.name}`}\n                    key={model.name}\n                    textValue={model.name}\n                  >\n                    {model.name}\n                  </AutocompleteItem>\n                ))}\n              </AutocompleteSection>\n            ) : null}\n          </Autocomplete>\n          {isSelectedModelFree && selectedModel ? (\n            <>\n              <span\n                ref={selectedModelMeasureRef}\n                className=\"pointer-events-none absolute left-3 top-1/2 whitespace-pre text-sm opacity-0\"\n                aria-hidden\n              >\n                {selectedModel}\n              </span>\n              <span\n                data-testid=\"selected-free-model-badge\"\n                className={cn(\n                  freeModelBadgeClassName,\n                  \"pointer-events-none absolute top-1/2 z-10 -translate-y-1/2\",\n                )}\n                style={{\n                  left: `calc(0.75rem + ${selectedModelTextWidth}px + 0.5rem)`,\n                }}\n              >\n                {FREE_MODEL_BADGE_LABEL}\n              </span>\n            </>\n          ) : null}\n        </div>\n        {modelsError && (\n          <p data-testid=\"models-error\" className=\"text-danger text-xs\">\n            {t(I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}\n          </p>\n        )}\n        {selectedProvider === \"openhands\" ? <FreeOpenHandsModelsNote /> : null}\n      </fieldset>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shared/modals/settings/model-selector.js

@@ -1,137 +1,193 @@
 import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../../i18n/declaration.js";
-import { PRODUCT_URL as n } from "../../../../utils/constants.js";
-import { cn as r } from "../../../../utils/utils.js";
-import { formControlSettingsFieldClassName as i } from "../../../../utils/form-control-classes.js";
-import { listbox_item_base_default as a } from "../../../../node_modules/@heroui/listbox/dist/chunk-BJFJ4DRR.js";
-import { listbox_section_base_default as o } from "../../../../node_modules/@heroui/listbox/dist/chunk-ANTZPR32.js";
-import { autocomplete_default as s } from "../../../../node_modules/@heroui/autocomplete/dist/chunk-3QKDXXDY.js";
-import { heroUiAutocompleteSelectorButtonClassName as c } from "../../../../ui/combobox-caret.js";
-import { mapProvider as l } from "../../../../utils/map-provider.js";
-import { extractModelAndProvider as u } from "../../../../utils/extract-model-and-provider.js";
-import { HelpLink as d } from "../../../../ui/help-link.js";
-import { useSearchProviders as f } from "../../../../hooks/query/use-search-providers.js";
-import { useProviderModels as p } from "../../../../hooks/query/use-provider-models.js";
-import m from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Info as n } from "../../../../node_modules/lucide-react/dist/esm/icons/info.js";
+import { PRODUCT_URL as r } from "../../../../utils/constants.js";
+import { cn as i } from "../../../../utils/utils.js";
+import { formControlSettingsFieldClassName as a } from "../../../../utils/form-control-classes.js";
+import { FREE_MODEL_BADGE_LABEL as o, FREE_OPENHANDS_MODEL_NOTE as s, isFreeOpenHandsModel as c } from "../../../../utils/format-model-name.js";
+import { listbox_item_base_default as l } from "../../../../node_modules/@heroui/listbox/dist/chunk-BJFJ4DRR.js";
+import { listbox_section_base_default as u } from "../../../../node_modules/@heroui/listbox/dist/chunk-ANTZPR32.js";
+import { autocomplete_default as d } from "../../../../node_modules/@heroui/autocomplete/dist/chunk-3QKDXXDY.js";
+import { heroUiAutocompleteSelectorButtonClassName as f } from "../../../../ui/combobox-caret.js";
+import { mapProvider as p } from "../../../../utils/map-provider.js";
+import { extractModelAndProvider as m } from "../../../../utils/extract-model-and-provider.js";
+import { HelpLink as h } from "../../../../ui/help-link.js";
+import { useSearchProviders as g } from "../../../../hooks/query/use-search-providers.js";
+import { useProviderModels as _ } from "../../../../hooks/query/use-provider-models.js";
+import v from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/shared/modals/settings/model-selector.tsx
-function _({ isDisabled: _, currentModel: v, onChange: y, onDefaultValuesChanged: b, wrapperClassName: x, labelClassName: S }) {
-	let [, C] = m.useState(null), [w, T] = m.useState(null), [E, D] = m.useState(null), { data: O = [] } = f(), { data: k = [], isLoading: A, error: j } = p(w), M = m.useMemo(() => O.filter((e) => e.verified), [O]), N = m.useMemo(() => O.filter((e) => !e.verified), [O]), P = m.useMemo(() => k.filter((e) => e.verified), [k]), F = m.useMemo(() => k.filter((e) => !e.verified), [k]);
-	m.useEffect(() => {
-		if (v) {
-			let { provider: e, model: t } = u(v);
-			C(v), T(e || null), D(t), b?.(e || null, t);
+var S = "shrink-0 rounded-full border border-warning/40 bg-warning/10 px-1.5 py-0.5 text-[10px] leading-none text-warning";
+function C() {
+	return /* @__PURE__ */ x("p", {
+		"data-testid": "openhands-free-models-note",
+		className: "flex items-start gap-2 text-xs text-warning",
+		children: [/* @__PURE__ */ b(n, {
+			className: "mt-0.5 size-4 shrink-0 text-warning",
+			"aria-hidden": !0
+		}), /* @__PURE__ */ b("span", { children: s })]
+	});
+}
+function w({ isDisabled: n, currentModel: s, onChange: w, onDefaultValuesChanged: T, wrapperClassName: E, labelClassName: D }) {
+	let [, O] = v.useState(null), [k, A] = v.useState(null), [j, M] = v.useState(null), { data: N = [] } = g(), { data: P = [], isLoading: F, error: I } = _(k), L = v.useMemo(() => N.filter((e) => e.verified), [N]), R = v.useMemo(() => N.filter((e) => !e.verified), [N]), z = v.useMemo(() => P.filter((e) => e.verified), [P]), B = v.useMemo(() => P.filter((e) => !e.verified), [P]);
+	v.useEffect(() => {
+		if (s) {
+			let { provider: e, model: t } = m(s);
+			O(s), A(e || null), M(t), T?.(e || null, t);
 		}
-	}, [v]);
-	let I = (e) => {
-		T(e), D(null), C(`${e}/`), y?.(e, null);
-	}, L = (e) => {
-		let t = `${w}/${e}`;
-		w === "openai" && (t = e), C(t), D(e), y?.(w, e);
-	}, R = () => {
-		T(null), C(null);
-	}, { t: z } = e("openhands");
-	return /* @__PURE__ */ g("div", {
-		className: r("flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]", x),
+	}, [s]);
+	let V = (e) => {
+		A(e), M(null), O(`${e}/`), w?.(e, null);
+	}, H = (e) => {
+		let t = `${k}/${e}`;
+		k === "openai" && (t = e), O(t), M(e), w?.(k, e);
+	}, U = () => {
+		A(null), O(null);
+	}, W = c(k && j ? `${k}/${j}` : null), G = v.useRef(null), [K, q] = v.useState(0);
+	v.useLayoutEffect(() => {
+		if (!W || !G.current) {
+			q(0);
+			return;
+		}
+		let e = () => {
+			q(Math.ceil(G.current?.getBoundingClientRect().width ?? 0));
+		};
+		if (e(), typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(e);
+		return t.observe(G.current), () => t.disconnect();
+	}, [W, j]);
+	let { t: J } = e("openhands");
+	return /* @__PURE__ */ x("div", {
+		className: i("flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]", E),
 		children: [
-			/* @__PURE__ */ g("fieldset", {
+			/* @__PURE__ */ x("fieldset", {
 				className: "flex flex-col gap-2.5 w-full",
-				children: [/* @__PURE__ */ h("label", {
-					className: r("text-sm", S),
-					children: z(t.LLM$PROVIDER)
-				}), /* @__PURE__ */ g(s, {
+				children: [/* @__PURE__ */ b("label", {
+					className: i("text-sm", D),
+					children: J(t.LLM$PROVIDER)
+				}), /* @__PURE__ */ x(d, {
 					"data-testid": "llm-provider-input",
 					isRequired: !0,
 					isVirtualized: !1,
 					name: "llm-provider-input",
-					isDisabled: _,
-					"aria-label": z(t.LLM$PROVIDER),
+					isDisabled: n,
+					"aria-label": J(t.LLM$PROVIDER),
 					isClearable: !1,
 					onSelectionChange: (e) => {
-						e?.toString() && I(e.toString());
+						e?.toString() && V(e.toString());
 					},
-					onInputChange: (e) => !e && R(),
-					defaultSelectedKey: w ?? void 0,
-					selectedKey: w,
+					onInputChange: (e) => !e && U(),
+					defaultSelectedKey: k ?? void 0,
+					selectedKey: k,
 					classNames: {
 						popoverContent: "bg-content1 rounded-xl border border-[var(--oh-border)]",
-						selectorButton: c
+						selectorButton: f
 					},
 					selectorButtonProps: { disableRipple: !0 },
-					inputProps: { classNames: { inputWrapper: i } },
-					children: [/* @__PURE__ */ h(o, {
-						title: z(t.MODEL_SELECTOR$VERIFIED),
+					inputProps: { classNames: { inputWrapper: a } },
+					children: [/* @__PURE__ */ b(u, {
+						title: J(t.MODEL_SELECTOR$VERIFIED),
 						classNames: { heading: "text-[var(--oh-muted)]" },
-						children: M.map((e) => /* @__PURE__ */ h(a, {
+						children: L.map((e) => /* @__PURE__ */ b(l, {
 							"data-testid": `provider-item-${e.name}`,
-							children: l(e.name)
+							children: p(e.name)
 						}, e.name))
-					}), N.length > 0 ? /* @__PURE__ */ h(o, {
-						title: z(t.MODEL_SELECTOR$OTHERS),
+					}), R.length > 0 ? /* @__PURE__ */ b(u, {
+						title: J(t.MODEL_SELECTOR$OTHERS),
 						classNames: { heading: "text-[var(--oh-muted)]" },
-						children: N.map((e) => /* @__PURE__ */ h(a, { children: l(e.name) }, e.name))
+						children: R.map((e) => /* @__PURE__ */ b(l, { children: p(e.name) }, e.name))
 					}) : null]
 				})]
 			}),
-			w === "openhands" && /* @__PURE__ */ h(d, {
-				testId: "openhands-account-help",
-				text: z(t.SETTINGS$NEED_OPENHANDS_ACCOUNT),
-				linkText: z(t.SETTINGS$CLICK_HERE),
-				href: n.PRODUCTION,
-				size: "settings",
-				linkColor: "white"
+			k === "openhands" && /* @__PURE__ */ b("div", {
+				className: "flex flex-col gap-2",
+				children: /* @__PURE__ */ b(h, {
+					testId: "openhands-account-help",
+					text: J(t.SETTINGS$NEED_OPENHANDS_ACCOUNT),
+					linkText: J(t.SETTINGS$CLICK_HERE),
+					href: r.PRODUCTION,
+					size: "settings",
+					linkColor: "white"
+				})
 			}),
-			/* @__PURE__ */ g("fieldset", {
+			/* @__PURE__ */ x("fieldset", {
 				className: "flex flex-col gap-2.5 w-full",
 				children: [
-					/* @__PURE__ */ h("label", {
-						className: r("text-sm", S),
-						children: z(t.LLM$MODEL)
+					/* @__PURE__ */ b("label", {
+						className: i("text-sm", D),
+						children: J(t.LLM$MODEL)
 					}),
-					/* @__PURE__ */ g(s, {
-						"data-testid": "llm-model-input",
-						isRequired: !0,
-						isVirtualized: !1,
-						isLoading: A,
-						name: "llm-model-input",
-						"aria-label": z(t.LLM$MODEL),
-						isClearable: !1,
-						onSelectionChange: (e) => {
-							e?.toString() && L(e.toString());
-						},
-						isDisabled: _ || !w,
-						selectedKey: E,
-						defaultSelectedKey: E ?? void 0,
-						classNames: {
-							popoverContent: "bg-content1 rounded-xl border border-[var(--oh-border)]",
-							selectorButton: c
-						},
-						selectorButtonProps: { disableRipple: !0 },
-						inputProps: { classNames: { inputWrapper: i } },
-						children: [/* @__PURE__ */ h(o, {
-							title: z(t.MODEL_SELECTOR$VERIFIED),
-							classNames: { heading: "text-[var(--oh-muted)]" },
-							children: P.map((e) => /* @__PURE__ */ h(a, { children: e.name }, e.name))
-						}), F.length > 0 ? /* @__PURE__ */ h(o, {
-							title: z(t.MODEL_SELECTOR$OTHERS),
-							classNames: { heading: "text-[var(--oh-muted)]" },
-							children: F.map((e) => /* @__PURE__ */ h(a, {
-								"data-testid": `model-item-${e.name}`,
-								children: e.name
-							}, e.name))
-						}) : null]
+					/* @__PURE__ */ x("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ x(d, {
+							"data-testid": "llm-model-input",
+							isRequired: !0,
+							isVirtualized: !1,
+							isLoading: F,
+							name: "llm-model-input",
+							"aria-label": J(t.LLM$MODEL),
+							isClearable: !1,
+							onSelectionChange: (e) => {
+								e?.toString() && H(e.toString());
+							},
+							isDisabled: n || !k,
+							selectedKey: j,
+							defaultSelectedKey: j ?? void 0,
+							classNames: {
+								popoverContent: "bg-content1 rounded-xl border border-[var(--oh-border)]",
+								selectorButton: f
+							},
+							selectorButtonProps: { disableRipple: !0 },
+							inputProps: { classNames: { inputWrapper: a } },
+							children: [/* @__PURE__ */ b(u, {
+								title: J(t.MODEL_SELECTOR$VERIFIED),
+								classNames: { heading: "text-[var(--oh-muted)]" },
+								children: z.map((e) => /* @__PURE__ */ b(l, {
+									textValue: e.name,
+									children: /* @__PURE__ */ x("span", {
+										className: "flex min-w-0 items-center gap-2",
+										children: [/* @__PURE__ */ b("span", {
+											className: "truncate",
+											children: e.name
+										}), c(`${k}/${e.name}`) ? /* @__PURE__ */ b("span", {
+											className: S,
+											children: o
+										}) : null]
+									})
+								}, e.name))
+							}), B.length > 0 ? /* @__PURE__ */ b(u, {
+								title: J(t.MODEL_SELECTOR$OTHERS),
+								classNames: { heading: "text-[var(--oh-muted)]" },
+								children: B.map((e) => /* @__PURE__ */ b(l, {
+									"data-testid": `model-item-${e.name}`,
+									textValue: e.name,
+									children: e.name
+								}, e.name))
+							}) : null]
+						}), W && j ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("span", {
+							ref: G,
+							className: "pointer-events-none absolute left-3 top-1/2 whitespace-pre text-sm opacity-0",
+							"aria-hidden": !0,
+							children: j
+						}), /* @__PURE__ */ b("span", {
+							"data-testid": "selected-free-model-badge",
+							className: i(S, "pointer-events-none absolute top-1/2 z-10 -translate-y-1/2"),
+							style: { left: `calc(0.75rem + ${K}px + 0.5rem)` },
+							children: o
+						})] }) : null]
 					}),
-					j && /* @__PURE__ */ h("p", {
+					I && /* @__PURE__ */ b("p", {
 						"data-testid": "models-error",
 						className: "text-danger text-xs",
-						children: z(t.CONFIGURATION$ERROR_FETCH_MODELS)
-					})
+						children: J(t.CONFIGURATION$ERROR_FETCH_MODELS)
+					}),
+					k === "openhands" ? /* @__PURE__ */ b(C, {}) : null
 				]
 			})
 		]
 	});
 }
 //#endregion
-export { _ as ModelSelector };
+export { w as ModelSelector };
 
 //# sourceMappingURL=model-selector.js.map

package/dist/components/shared/modals/settings/model-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"model-selector.js","names":[],"sources":["../../../../../src/components/shared/modals/settings/model-selector.tsx"],"sourcesContent":["import {\n  Autocomplete,\n  AutocompleteItem,\n  AutocompleteSection,\n} from \"@heroui/react\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { mapProvider } from \"#/utils/map-provider\";\nimport { extractModelAndProvider } from \"#/utils/extract-model-and-provider\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { heroUiAutocompleteSelectorButtonClassName } from \"#/ui/combobox-caret\";\nimport { HelpLink } from \"#/ui/help-link\";\nimport { PRODUCT_URL } from \"#/utils/constants\";\nimport { useSearchProviders } from \"#/hooks/query/use-search-providers\";\nimport { useProviderModels } from \"#/hooks/query/use-provider-models\";\n\ninterface ModelSelectorProps {\n  isDisabled?: boolean;\n  currentModel?: string;\n  onChange?: (provider: string | null, model: string | null) => void;\n  onDefaultValuesChanged?: (\n    provider: string | null,\n    model: string | null,\n  ) => void;\n  wrapperClassName?: string;\n  labelClassName?: string;\n}\n\nexport function ModelSelector({\n  isDisabled,\n  currentModel,\n  onChange,\n  onDefaultValuesChanged,\n  wrapperClassName,\n  labelClassName,\n}: ModelSelectorProps) {\n  const [, setLitellmId] = React.useState<string | null>(null);\n  const [selectedProvider, setSelectedProvider] = React.useState<string | null>(\n    null,\n  );\n  const [selectedModel, setSelectedModel] = React.useState<string | null>(null);\n\n  const { data: providers = [] } = useSearchProviders();\n  const {\n    data: providerModels = [],\n    isLoading: isLoadingModels,\n    error: modelsError,\n  } = useProviderModels(selectedProvider);\n\n  const verifiedProviders = React.useMemo(\n    () => providers.filter((p) => p.verified),\n    [providers],\n  );\n  const unverifiedProviders = React.useMemo(\n    () => providers.filter((p) => !p.verified),\n    [providers],\n  );\n\n  const verifiedModels = React.useMemo(\n    () => providerModels.filter((m) => m.verified),\n    [providerModels],\n  );\n  const unverifiedModels = React.useMemo(\n    () => providerModels.filter((m) => !m.verified),\n    [providerModels],\n  );\n\n  React.useEffect(() => {\n    if (currentModel) {\n      const { provider, model } = extractModelAndProvider(currentModel);\n\n      setLitellmId(currentModel);\n      setSelectedProvider(provider || null);\n      setSelectedModel(model);\n      onDefaultValuesChanged?.(provider || null, model);\n    }\n  }, [currentModel]);\n\n  const handleChangeProvider = (provider: string) => {\n    setSelectedProvider(provider);\n    setSelectedModel(null);\n    setLitellmId(`${provider}/`);\n    onChange?.(provider, null);\n  };\n\n  const handleChangeModel = (model: string) => {\n    let fullModel = `${selectedProvider}/${model}`;\n    if (selectedProvider === \"openai\") {\n      fullModel = model;\n    }\n    setLitellmId(fullModel);\n    setSelectedModel(model);\n    onChange?.(selectedProvider, model);\n  };\n\n  const clear = () => {\n    setSelectedProvider(null);\n    setLitellmId(null);\n  };\n\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]\",\n        wrapperClassName,\n      )}\n    >\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$PROVIDER)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-provider-input\"\n          isRequired\n          isVirtualized={false}\n          name=\"llm-provider-input\"\n          isDisabled={isDisabled}\n          aria-label={t(I18nKey.LLM$PROVIDER)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeProvider(e.toString());\n          }}\n          onInputChange={(value) => !value && clear()}\n          defaultSelectedKey={selectedProvider ?? undefined}\n          selectedKey={selectedProvider}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedProviders.map((provider) => (\n              <AutocompleteItem\n                data-testid={`provider-item-${provider.name}`}\n                key={provider.name}\n              >\n                {mapProvider(provider.name)}\n              </AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedProviders.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedProviders.map((provider) => (\n                <AutocompleteItem key={provider.name}>\n                  {mapProvider(provider.name)}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n      </fieldset>\n\n      {selectedProvider === \"openhands\" && (\n        <HelpLink\n          testId=\"openhands-account-help\"\n          text={t(I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT)}\n          linkText={t(I18nKey.SETTINGS$CLICK_HERE)}\n          href={PRODUCT_URL.PRODUCTION}\n          size=\"settings\"\n          linkColor=\"white\"\n        />\n      )}\n\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$MODEL)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-model-input\"\n          isRequired\n          isVirtualized={false}\n          isLoading={isLoadingModels}\n          name=\"llm-model-input\"\n          aria-label={t(I18nKey.LLM$MODEL)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeModel(e.toString());\n          }}\n          isDisabled={isDisabled || !selectedProvider}\n          selectedKey={selectedModel}\n          defaultSelectedKey={selectedModel ?? undefined}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedModels.map((model) => (\n              <AutocompleteItem key={model.name}>{model.name}</AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedModels.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedModels.map((model) => (\n                <AutocompleteItem\n                  data-testid={`model-item-${model.name}`}\n                  key={model.name}\n                >\n                  {model.name}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n        {modelsError && (\n          <p data-testid=\"models-error\" className=\"text-danger text-xs\">\n            {t(I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}\n          </p>\n        )}\n      </fieldset>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"model-selector.js","names":[],"sources":["../../../../../src/components/shared/modals/settings/model-selector.tsx"],"sourcesContent":["import {\n  Autocomplete,\n  AutocompleteItem,\n  AutocompleteSection,\n} from \"@heroui/react\";\nimport { Info } from \"lucide-react\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { mapProvider } from \"#/utils/map-provider\";\nimport { extractModelAndProvider } from \"#/utils/extract-model-and-provider\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { heroUiAutocompleteSelectorButtonClassName } from \"#/ui/combobox-caret\";\nimport { HelpLink } from \"#/ui/help-link\";\nimport { PRODUCT_URL } from \"#/utils/constants\";\nimport { useSearchProviders } from \"#/hooks/query/use-search-providers\";\nimport { useProviderModels } from \"#/hooks/query/use-provider-models\";\nimport {\n  FREE_MODEL_BADGE_LABEL,\n  FREE_OPENHANDS_MODEL_NOTE,\n  isFreeOpenHandsModel,\n} from \"#/utils/format-model-name\";\n\nconst freeModelBadgeClassName =\n  \"shrink-0 rounded-full border border-warning/40 bg-warning/10 px-1.5 py-0.5 text-[10px] leading-none text-warning\";\n\nfunction FreeOpenHandsModelsNote() {\n  return (\n    <p\n      data-testid=\"openhands-free-models-note\"\n      className=\"flex items-start gap-2 text-xs text-warning\"\n    >\n      <Info className=\"mt-0.5 size-4 shrink-0 text-warning\" aria-hidden />\n      <span>{FREE_OPENHANDS_MODEL_NOTE}</span>\n    </p>\n  );\n}\n\ninterface ModelSelectorProps {\n  isDisabled?: boolean;\n  currentModel?: string;\n  onChange?: (provider: string | null, model: string | null) => void;\n  onDefaultValuesChanged?: (\n    provider: string | null,\n    model: string | null,\n  ) => void;\n  wrapperClassName?: string;\n  labelClassName?: string;\n}\n\nexport function ModelSelector({\n  isDisabled,\n  currentModel,\n  onChange,\n  onDefaultValuesChanged,\n  wrapperClassName,\n  labelClassName,\n}: ModelSelectorProps) {\n  const [, setLitellmId] = React.useState<string | null>(null);\n  const [selectedProvider, setSelectedProvider] = React.useState<string | null>(\n    null,\n  );\n  const [selectedModel, setSelectedModel] = React.useState<string | null>(null);\n\n  const { data: providers = [] } = useSearchProviders();\n  const {\n    data: providerModels = [],\n    isLoading: isLoadingModels,\n    error: modelsError,\n  } = useProviderModels(selectedProvider);\n\n  const verifiedProviders = React.useMemo(\n    () => providers.filter((p) => p.verified),\n    [providers],\n  );\n  const unverifiedProviders = React.useMemo(\n    () => providers.filter((p) => !p.verified),\n    [providers],\n  );\n\n  const verifiedModels = React.useMemo(\n    () => providerModels.filter((m) => m.verified),\n    [providerModels],\n  );\n  const unverifiedModels = React.useMemo(\n    () => providerModels.filter((m) => !m.verified),\n    [providerModels],\n  );\n\n  React.useEffect(() => {\n    if (currentModel) {\n      const { provider, model } = extractModelAndProvider(currentModel);\n\n      setLitellmId(currentModel);\n      setSelectedProvider(provider || null);\n      setSelectedModel(model);\n      onDefaultValuesChanged?.(provider || null, model);\n    }\n  }, [currentModel]);\n\n  const handleChangeProvider = (provider: string) => {\n    setSelectedProvider(provider);\n    setSelectedModel(null);\n    setLitellmId(`${provider}/`);\n    onChange?.(provider, null);\n  };\n\n  const handleChangeModel = (model: string) => {\n    let fullModel = `${selectedProvider}/${model}`;\n    if (selectedProvider === \"openai\") {\n      fullModel = model;\n    }\n    setLitellmId(fullModel);\n    setSelectedModel(model);\n    onChange?.(selectedProvider, model);\n  };\n\n  const clear = () => {\n    setSelectedProvider(null);\n    setLitellmId(null);\n  };\n\n  const selectedFullModel =\n    selectedProvider && selectedModel\n      ? `${selectedProvider}/${selectedModel}`\n      : null;\n  const isSelectedModelFree = isFreeOpenHandsModel(selectedFullModel);\n  const selectedModelMeasureRef = React.useRef<HTMLSpanElement>(null);\n  const [selectedModelTextWidth, setSelectedModelTextWidth] = React.useState(0);\n\n  React.useLayoutEffect(() => {\n    if (!isSelectedModelFree || !selectedModelMeasureRef.current) {\n      setSelectedModelTextWidth(0);\n      return undefined;\n    }\n\n    const measureSelectedModel = () => {\n      setSelectedModelTextWidth(\n        Math.ceil(\n          selectedModelMeasureRef.current?.getBoundingClientRect().width ?? 0,\n        ),\n      );\n    };\n    measureSelectedModel();\n\n    if (typeof ResizeObserver === \"undefined\") {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(measureSelectedModel);\n    observer.observe(selectedModelMeasureRef.current);\n    return () => observer.disconnect();\n  }, [isSelectedModelFree, selectedModel]);\n\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col md:flex-row w-full min-w-0 justify-between gap-4 md:gap-[46px]\",\n        wrapperClassName,\n      )}\n    >\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$PROVIDER)}\n        </label>\n        <Autocomplete\n          data-testid=\"llm-provider-input\"\n          isRequired\n          isVirtualized={false}\n          name=\"llm-provider-input\"\n          isDisabled={isDisabled}\n          aria-label={t(I18nKey.LLM$PROVIDER)}\n          isClearable={false}\n          onSelectionChange={(e) => {\n            if (e?.toString()) handleChangeProvider(e.toString());\n          }}\n          onInputChange={(value) => !value && clear()}\n          defaultSelectedKey={selectedProvider ?? undefined}\n          selectedKey={selectedProvider}\n          classNames={{\n            popoverContent:\n              \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n            selectorButton: heroUiAutocompleteSelectorButtonClassName,\n          }}\n          selectorButtonProps={{ disableRipple: true }}\n          inputProps={{\n            classNames: {\n              inputWrapper: formControlSettingsFieldClassName,\n            },\n          }}\n        >\n          <AutocompleteSection\n            title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n            classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n          >\n            {verifiedProviders.map((provider) => (\n              <AutocompleteItem\n                data-testid={`provider-item-${provider.name}`}\n                key={provider.name}\n              >\n                {mapProvider(provider.name)}\n              </AutocompleteItem>\n            ))}\n          </AutocompleteSection>\n          {unverifiedProviders.length > 0 ? (\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {unverifiedProviders.map((provider) => (\n                <AutocompleteItem key={provider.name}>\n                  {mapProvider(provider.name)}\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n          ) : null}\n        </Autocomplete>\n      </fieldset>\n\n      {selectedProvider === \"openhands\" && (\n        <div className=\"flex flex-col gap-2\">\n          <HelpLink\n            testId=\"openhands-account-help\"\n            text={t(I18nKey.SETTINGS$NEED_OPENHANDS_ACCOUNT)}\n            linkText={t(I18nKey.SETTINGS$CLICK_HERE)}\n            href={PRODUCT_URL.PRODUCTION}\n            size=\"settings\"\n            linkColor=\"white\"\n          />\n        </div>\n      )}\n\n      <fieldset className=\"flex flex-col gap-2.5 w-full\">\n        <label className={cn(\"text-sm\", labelClassName)}>\n          {t(I18nKey.LLM$MODEL)}\n        </label>\n        <div className=\"relative\">\n          <Autocomplete\n            data-testid=\"llm-model-input\"\n            isRequired\n            isVirtualized={false}\n            isLoading={isLoadingModels}\n            name=\"llm-model-input\"\n            aria-label={t(I18nKey.LLM$MODEL)}\n            isClearable={false}\n            onSelectionChange={(e) => {\n              if (e?.toString()) handleChangeModel(e.toString());\n            }}\n            isDisabled={isDisabled || !selectedProvider}\n            selectedKey={selectedModel}\n            defaultSelectedKey={selectedModel ?? undefined}\n            classNames={{\n              popoverContent:\n                \"bg-content1 rounded-xl border border-[var(--oh-border)]\",\n              selectorButton: heroUiAutocompleteSelectorButtonClassName,\n            }}\n            selectorButtonProps={{ disableRipple: true }}\n            inputProps={{\n              classNames: {\n                inputWrapper: formControlSettingsFieldClassName,\n              },\n            }}\n          >\n            <AutocompleteSection\n              title={t(I18nKey.MODEL_SELECTOR$VERIFIED)}\n              classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n            >\n              {verifiedModels.map((model) => (\n                <AutocompleteItem key={model.name} textValue={model.name}>\n                  <span className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"truncate\">{model.name}</span>\n                    {isFreeOpenHandsModel(\n                      `${selectedProvider}/${model.name}`,\n                    ) ? (\n                      <span className={freeModelBadgeClassName}>\n                        {FREE_MODEL_BADGE_LABEL}\n                      </span>\n                    ) : null}\n                  </span>\n                </AutocompleteItem>\n              ))}\n            </AutocompleteSection>\n            {unverifiedModels.length > 0 ? (\n              <AutocompleteSection\n                title={t(I18nKey.MODEL_SELECTOR$OTHERS)}\n                classNames={{ heading: \"text-[var(--oh-muted)]\" }}\n              >\n                {unverifiedModels.map((model) => (\n                  <AutocompleteItem\n                    data-testid={`model-item-${model.name}`}\n                    key={model.name}\n                    textValue={model.name}\n                  >\n                    {model.name}\n                  </AutocompleteItem>\n                ))}\n              </AutocompleteSection>\n            ) : null}\n          </Autocomplete>\n          {isSelectedModelFree && selectedModel ? (\n            <>\n              <span\n                ref={selectedModelMeasureRef}\n                className=\"pointer-events-none absolute left-3 top-1/2 whitespace-pre text-sm opacity-0\"\n                aria-hidden\n              >\n                {selectedModel}\n              </span>\n              <span\n                data-testid=\"selected-free-model-badge\"\n                className={cn(\n                  freeModelBadgeClassName,\n                  \"pointer-events-none absolute top-1/2 z-10 -translate-y-1/2\",\n                )}\n                style={{\n                  left: `calc(0.75rem + ${selectedModelTextWidth}px + 0.5rem)`,\n                }}\n              >\n                {FREE_MODEL_BADGE_LABEL}\n              </span>\n            </>\n          ) : null}\n        </div>\n        {modelsError && (\n          <p data-testid=\"models-error\" className=\"text-danger text-xs\">\n            {t(I18nKey.CONFIGURATION$ERROR_FETCH_MODELS)}\n          </p>\n        )}\n        {selectedProvider === \"openhands\" ? <FreeOpenHandsModelsNote /> : null}\n      </fieldset>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/config/defaults.cjs

@@ -1,2 +1,2 @@
-require("../_virtual/_rolldown/runtime.cjs");var e={_comment:`Single source of truth for version pins, ports, paths, and defaults shared across the npm and Docker install paths. Read by scripts/dev-safe.mjs, scripts/dev-with-automation.mjs, docker/entrypoint.sh (via generated defaults.env), and .github/workflows/docker.yml.`,versions:{agentServer:`1.40.1`,agentCanvas:`1.10.0`,automation:`1.6.0`},compatibility:{minimumAgentServer:`1.28.0`},constraints:{_comment:`Temporary upper bound on the agent-client-protocol (acp) transitive dependency. openhands-sdk 1.35.0 requires agent-client-protocol>=0.10.1 with no upper bound, but acp 0.11.0 reordered the ACP prompt() arguments and breaks the SDK's ACP client (a PromptRequest validation error surfaces as 'ACP error: 2 validation errors for PromptRequest'). Pin acp <0.11 until a fixed openhands-sdk ships. Consumed by scripts/dev-safe.mjs (agent-server uvx install) and .github/workflows/mock-llm-e2e.yml (mock ACP server venv).`,agentClientProtocol:`agent-client-protocol<0.11`},images:{agentServer:`ghcr.io/openhands/agent-server`,agentCanvas:`ghcr.io/openhands/agent-canvas`},ports:{agentServer:18e3,automation:18001,proxy:8e3},paths:{stateSubdir:`agent-canvas`,conversations:`agent-canvas/conversations`,bashEvents:`agent-canvas/bash_events`,automationDb:`automation/automations.db`,canvasBasePath:`/canvas`},packages:{agentServer:`openhands-agent-server`,automation:`openhands-automation`,tools:`openhands-tools`,workspace:`openhands-workspace`},telemetry:{posthogApiKey:`phc_kBtz5nKmxVRRQ7HtPwr2QX9eMC5j65zE86QKocVNwb4U`,posthogHost:`https://us.i.posthog.com`}};exports.default=e;
+require("../_virtual/_rolldown/runtime.cjs");var e={_comment:`Single source of truth for version pins, ports, paths, and defaults shared across the npm and Docker install paths. Read by scripts/dev-safe.mjs, scripts/dev-with-automation.mjs, docker/entrypoint.sh (via generated defaults.env), and .github/workflows/docker.yml.`,versions:{agentServer:`1.40.1`,agentCanvas:`1.12.0`,automation:`1.6.0`},compatibility:{minimumAgentServer:`1.28.0`},constraints:{_comment:`Temporary upper bound on the agent-client-protocol (acp) transitive dependency. openhands-sdk 1.35.0 requires agent-client-protocol>=0.10.1 with no upper bound, but acp 0.11.0 reordered the ACP prompt() arguments and breaks the SDK's ACP client (a PromptRequest validation error surfaces as 'ACP error: 2 validation errors for PromptRequest'). Pin acp <0.11 until a fixed openhands-sdk ships. Consumed by scripts/dev-safe.mjs (agent-server uvx install) and .github/workflows/mock-llm-e2e.yml (mock ACP server venv).`,agentClientProtocol:`agent-client-protocol<0.11`},images:{agentServer:`ghcr.io/openhands/agent-server`,agentCanvas:`ghcr.io/openhands/agent-canvas`},ports:{agentServer:18e3,automation:18001,proxy:8e3},paths:{stateSubdir:`agent-canvas`,conversations:`agent-canvas/conversations`,bashEvents:`agent-canvas/bash_events`,automationDb:`automation/automations.db`,canvasBasePath:`/canvas`},packages:{agentServer:`openhands-agent-server`,automation:`openhands-automation`,tools:`openhands-tools`,workspace:`openhands-workspace`},telemetry:{posthogApiKey:`phc_kBtz5nKmxVRRQ7HtPwr2QX9eMC5j65zE86QKocVNwb4U`,posthogHost:`https://us.i.posthog.com`}};exports.default=e;
 //# sourceMappingURL=defaults.cjs.map

package/dist/config/defaults.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.cjs","names":[],"sources":["../../config/defaults.json"],"sourcesContent":["{\n  \"_comment\": \"Single source of truth for version pins, ports, paths, and defaults shared across the npm and Docker install paths. Read by scripts/dev-safe.mjs, scripts/dev-with-automation.mjs, docker/entrypoint.sh (via generated defaults.env), and .github/workflows/docker.yml.\",\n  \"versions\": {\n    \"agentServer\": \"1.40.1\",\n    \"agentCanvas\": \"1.10.0\",\n    \"automation\": \"1.6.0\"\n  },\n  \"compatibility\": {\n    \"minimumAgentServer\": \"1.28.0\"\n  },\n  \"constraints\": {\n    \"_comment\": \"Temporary upper bound on the agent-client-protocol (acp) transitive dependency. openhands-sdk 1.35.0 requires agent-client-protocol>=0.10.1 with no upper bound, but acp 0.11.0 reordered the ACP prompt() arguments and breaks the SDK's ACP client (a PromptRequest validation error surfaces as 'ACP error: 2 validation errors for PromptRequest'). Pin acp <0.11 until a fixed openhands-sdk ships. Consumed by scripts/dev-safe.mjs (agent-server uvx install) and .github/workflows/mock-llm-e2e.yml (mock ACP server venv).\",\n    \"agentClientProtocol\": \"agent-client-protocol<0.11\"\n  },\n  \"images\": {\n    \"agentServer\": \"ghcr.io/openhands/agent-server\",\n    \"agentCanvas\": \"ghcr.io/openhands/agent-canvas\"\n  },\n  \"ports\": {\n    \"agentServer\": 18000,\n    \"automation\": 18001,\n    \"proxy\": 8000\n  },\n  \"paths\": {\n    \"stateSubdir\": \"agent-canvas\",\n    \"conversations\": \"agent-canvas/conversations\",\n    \"bashEvents\": \"agent-canvas/bash_events\",\n    \"automationDb\": \"automation/automations.db\",\n    \"canvasBasePath\": \"/canvas\"\n  },\n  \"packages\": {\n    \"agentServer\": \"openhands-agent-server\",\n    \"automation\": \"openhands-automation\",\n    \"tools\": \"openhands-tools\",\n    \"workspace\": \"openhands-workspace\"\n  },\n  \"telemetry\": {\n    \"posthogApiKey\": \"phc_kBtz5nKmxVRRQ7HtPwr2QX9eMC5j65zE86QKocVNwb4U\",\n    \"posthogHost\": \"https://us.i.posthog.com\"\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"defaults.cjs","names":[],"sources":["../../config/defaults.json"],"sourcesContent":["{\n  \"_comment\": \"Single source of truth for version pins, ports, paths, and defaults shared across the npm and Docker install paths. Read by scripts/dev-safe.mjs, scripts/dev-with-automation.mjs, docker/entrypoint.sh (via generated defaults.env), and .github/workflows/docker.yml.\",\n  \"versions\": {\n    \"agentServer\": \"1.40.1\",\n    \"agentCanvas\": \"1.12.0\",\n    \"automation\": \"1.6.0\"\n  },\n  \"compatibility\": {\n    \"minimumAgentServer\": \"1.28.0\"\n  },\n  \"constraints\": {\n    \"_comment\": \"Temporary upper bound on the agent-client-protocol (acp) transitive dependency. openhands-sdk 1.35.0 requires agent-client-protocol>=0.10.1 with no upper bound, but acp 0.11.0 reordered the ACP prompt() arguments and breaks the SDK's ACP client (a PromptRequest validation error surfaces as 'ACP error: 2 validation errors for PromptRequest'). Pin acp <0.11 until a fixed openhands-sdk ships. Consumed by scripts/dev-safe.mjs (agent-server uvx install) and .github/workflows/mock-llm-e2e.yml (mock ACP server venv).\",\n    \"agentClientProtocol\": \"agent-client-protocol<0.11\"\n  },\n  \"images\": {\n    \"agentServer\": \"ghcr.io/openhands/agent-server\",\n    \"agentCanvas\": \"ghcr.io/openhands/agent-canvas\"\n  },\n  \"ports\": {\n    \"agentServer\": 18000,\n    \"automation\": 18001,\n    \"proxy\": 8000\n  },\n  \"paths\": {\n    \"stateSubdir\": \"agent-canvas\",\n    \"conversations\": \"agent-canvas/conversations\",\n    \"bashEvents\": \"agent-canvas/bash_events\",\n    \"automationDb\": \"automation/automations.db\",\n    \"canvasBasePath\": \"/canvas\"\n  },\n  \"packages\": {\n    \"agentServer\": \"openhands-agent-server\",\n    \"automation\": \"openhands-automation\",\n    \"tools\": \"openhands-tools\",\n    \"workspace\": \"openhands-workspace\"\n  },\n  \"telemetry\": {\n    \"posthogApiKey\": \"phc_kBtz5nKmxVRRQ7HtPwr2QX9eMC5j65zE86QKocVNwb4U\",\n    \"posthogHost\": \"https://us.i.posthog.com\"\n  }\n}\n"],"mappings":""}

package/dist/config/defaults.js

@@ -2,7 +2,7 @@ var e = {
 	_comment: "Single source of truth for version pins, ports, paths, and defaults shared across the npm and Docker install paths. Read by scripts/dev-safe.mjs, scripts/dev-with-automation.mjs, docker/entrypoint.sh (via generated defaults.env), and .github/workflows/docker.yml.",
 	versions: {
 		agentServer: "1.40.1",
-		agentCanvas: "1.10.0",
+		agentCanvas: "1.12.0",
 		automation: "1.6.0"
 	},
 	compatibility: { minimumAgentServer: "1.28.0" },

package/dist/config/defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","names":[],"sources":["../../config/defaults.json"],"sourcesContent":["{\n  \"_comment\": \"Single source of truth for version pins, ports, paths, and defaults shared across the npm and Docker install paths. Read by scripts/dev-safe.mjs, scripts/dev-with-automation.mjs, docker/entrypoint.sh (via generated defaults.env), and .github/workflows/docker.yml.\",\n  \"versions\": {\n    \"agentServer\": \"1.40.1\",\n    \"agentCanvas\": \"1.10.0\",\n    \"automation\": \"1.6.0\"\n  },\n  \"compatibility\": {\n    \"minimumAgentServer\": \"1.28.0\"\n  },\n  \"constraints\": {\n    \"_comment\": \"Temporary upper bound on the agent-client-protocol (acp) transitive dependency. openhands-sdk 1.35.0 requires agent-client-protocol>=0.10.1 with no upper bound, but acp 0.11.0 reordered the ACP prompt() arguments and breaks the SDK's ACP client (a PromptRequest validation error surfaces as 'ACP error: 2 validation errors for PromptRequest'). Pin acp <0.11 until a fixed openhands-sdk ships. Consumed by scripts/dev-safe.mjs (agent-server uvx install) and .github/workflows/mock-llm-e2e.yml (mock ACP server venv).\",\n    \"agentClientProtocol\": \"agent-client-protocol<0.11\"\n  },\n  \"images\": {\n    \"agentServer\": \"ghcr.io/openhands/agent-server\",\n    \"agentCanvas\": \"ghcr.io/openhands/agent-canvas\"\n  },\n  \"ports\": {\n    \"agentServer\": 18000,\n    \"automation\": 18001,\n    \"proxy\": 8000\n  },\n  \"paths\": {\n    \"stateSubdir\": \"agent-canvas\",\n    \"conversations\": \"agent-canvas/conversations\",\n    \"bashEvents\": \"agent-canvas/bash_events\",\n    \"automationDb\": \"automation/automations.db\",\n    \"canvasBasePath\": \"/canvas\"\n  },\n  \"packages\": {\n    \"agentServer\": \"openhands-agent-server\",\n    \"automation\": \"openhands-automation\",\n    \"tools\": \"openhands-tools\",\n    \"workspace\": \"openhands-workspace\"\n  },\n  \"telemetry\": {\n    \"posthogApiKey\": \"phc_kBtz5nKmxVRRQ7HtPwr2QX9eMC5j65zE86QKocVNwb4U\",\n    \"posthogHost\": \"https://us.i.posthog.com\"\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"defaults.js","names":[],"sources":["../../config/defaults.json"],"sourcesContent":["{\n  \"_comment\": \"Single source of truth for version pins, ports, paths, and defaults shared across the npm and Docker install paths. Read by scripts/dev-safe.mjs, scripts/dev-with-automation.mjs, docker/entrypoint.sh (via generated defaults.env), and .github/workflows/docker.yml.\",\n  \"versions\": {\n    \"agentServer\": \"1.40.1\",\n    \"agentCanvas\": \"1.12.0\",\n    \"automation\": \"1.6.0\"\n  },\n  \"compatibility\": {\n    \"minimumAgentServer\": \"1.28.0\"\n  },\n  \"constraints\": {\n    \"_comment\": \"Temporary upper bound on the agent-client-protocol (acp) transitive dependency. openhands-sdk 1.35.0 requires agent-client-protocol>=0.10.1 with no upper bound, but acp 0.11.0 reordered the ACP prompt() arguments and breaks the SDK's ACP client (a PromptRequest validation error surfaces as 'ACP error: 2 validation errors for PromptRequest'). Pin acp <0.11 until a fixed openhands-sdk ships. Consumed by scripts/dev-safe.mjs (agent-server uvx install) and .github/workflows/mock-llm-e2e.yml (mock ACP server venv).\",\n    \"agentClientProtocol\": \"agent-client-protocol<0.11\"\n  },\n  \"images\": {\n    \"agentServer\": \"ghcr.io/openhands/agent-server\",\n    \"agentCanvas\": \"ghcr.io/openhands/agent-canvas\"\n  },\n  \"ports\": {\n    \"agentServer\": 18000,\n    \"automation\": 18001,\n    \"proxy\": 8000\n  },\n  \"paths\": {\n    \"stateSubdir\": \"agent-canvas\",\n    \"conversations\": \"agent-canvas/conversations\",\n    \"bashEvents\": \"agent-canvas/bash_events\",\n    \"automationDb\": \"automation/automations.db\",\n    \"canvasBasePath\": \"/canvas\"\n  },\n  \"packages\": {\n    \"agentServer\": \"openhands-agent-server\",\n    \"automation\": \"openhands-automation\",\n    \"tools\": \"openhands-tools\",\n    \"workspace\": \"openhands-workspace\"\n  },\n  \"telemetry\": {\n    \"posthogApiKey\": \"phc_kBtz5nKmxVRRQ7HtPwr2QX9eMC5j65zE86QKocVNwb4U\",\n    \"posthogHost\": \"https://us.i.posthog.com\"\n  }\n}\n"],"mappings":""}

package/dist/constants/child-conversation.cjs

@@ -0,0 +1,2 @@
+require("../_virtual/_rolldown/runtime.cjs");var e=`launch_child_conversation`,t=`ClientAction_${e}`,n=`[child-conversation] `,r=[`local`,`cloud`],i=[`worktree`,`shared`],a=`1.37.1`;exports.CHILD_CONVERSATION_ISOLATIONS=i,exports.CHILD_CONVERSATION_RESULT_PREFIX=n,exports.CHILD_CONVERSATION_TARGETS=r,exports.LAUNCH_CHILD_CONVERSATION_ACTION_KIND=t,exports.LAUNCH_CHILD_CONVERSATION_TOOL_NAME=e,exports.MIN_AGENT_SERVER_VERSION_FOR_PARENT_LINK=a;
+//# sourceMappingURL=child-conversation.cjs.map

package/dist/constants/child-conversation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"child-conversation.cjs","names":[],"sources":["../../src/constants/child-conversation.ts"],"sourcesContent":["export const LAUNCH_CHILD_CONVERSATION_TOOL_NAME = \"launch_child_conversation\";\n\n/**\n * Action discriminator generated by the SDK for the client-defined launch tool\n * (`ClientAction_<tool-name>`). Keep the SDK naming convention contained here\n * instead of repeating its generated class name throughout the frontend.\n */\nexport const LAUNCH_CHILD_CONVERSATION_ACTION_KIND =\n  `ClientAction_${LAUNCH_CHILD_CONVERSATION_TOOL_NAME}` as const;\n\n/**\n * Prefix of the machine-generated message the frontend posts back into the\n * parent conversation after a launch. Client tools are acknowledged by the\n * agent-server before the browser has done any work, so this message is the\n * only way to hand the agent the child's id, URL and status — or corrective\n * guidance when the call was malformed. The chat hides it (see\n * `should-render-event.ts`) because the agent relays the same information in\n * its own reply.\n */\nexport const CHILD_CONVERSATION_RESULT_PREFIX = \"[child-conversation] \";\n\nexport const CHILD_CONVERSATION_TARGETS = [\"local\", \"cloud\"] as const;\nexport type ChildConversationTarget =\n  (typeof CHILD_CONVERSATION_TARGETS)[number];\n\nexport const CHILD_CONVERSATION_ISOLATIONS = [\"worktree\", \"shared\"] as const;\nexport type ChildConversationIsolation =\n  (typeof CHILD_CONVERSATION_ISOLATIONS)[number];\n\n/**\n * `parent_conversation_id` on the local start-conversation request landed in\n * software-agent-sdk#4188. Older agent-servers accept the request and drop the\n * field (the pydantic model ignores extras), so the launch still succeeds — we\n * just tell the agent the relationship was not persisted instead of letting it\n * believe in a link that does not exist.\n */\nexport const MIN_AGENT_SERVER_VERSION_FOR_PARENT_LINK = \"1.37.1\";\n"],"mappings":"6CAAA,IAAa,EAAsC,4BAOtC,EACX,gBAAgB,IAWL,EAAmC,wBAEnC,EAA6B,CAAC,QAAS,OAAO,EAI9C,EAAgC,CAAC,WAAY,QAAQ,EAWrD,EAA2C"}