@openhands/agent-canvas 1.11.0 → 1.13.0

package/dist/components/features/chat/components/chat-input-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input-actions.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-actions.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { Cpu } from \"lucide-react\";\nimport { AgentStatus } from \"#/components/features/controls/agent-status\";\nimport { ChangeAgentButton } from \"../change-agent-button\";\nimport { ChatInputModel, ChatInputModelMenuContent } from \"./chat-input-model\";\nimport {\n  ChatInputLlmProfilePicker,\n  ChatInputLlmProfileMenuContent,\n} from \"./chat-input-llm-profile-picker\";\nimport { resolvePickerKind } from \"./resolve-picker-kind\";\nimport { ChatAddFileButton } from \"../chat-add-file-button\";\nimport { ChatSendButton } from \"../chat-send-button\";\nimport CarretRightFillIcon from \"#/icons/carret-right-fill.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport ThreeDotsVerticalIcon from \"#/icons/three-dots-vertical.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { usePauseConversation } from \"#/hooks/mutation/use-pause-conversation\";\nimport { useResumeConversation } from \"#/hooks/mutation/use-resume-conversation\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useAgentProfiles } from \"#/hooks/query/use-agent-profiles\";\nimport { useChatInputModelState } from \"#/hooks/use-chat-input-model-state\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ToolsContextMenuIconText } from \"../../controls/tools-context-menu-icon-text\";\nimport { ContextMenuListItem } from \"../../context-menu/context-menu-list-item\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  chatInputIconButtonClassName,\n  formControlTransitionClassName,\n} from \"#/utils/form-control-classes\";\n\ninterface ChatInputActionsProps {\n  disabled: boolean;\n  canSubmit?: boolean;\n  hasStartedConversation?: boolean;\n  onAddFileClick?: () => void;\n  showButton?: boolean;\n  buttonClassName?: string;\n  handleSubmit?: () => void;\n}\n\nexport function ChatInputActions({\n  disabled,\n  canSubmit = true,\n  hasStartedConversation,\n  onAddFileClick = () => {},\n  showButton = true,\n  buttonClassName = \"\",\n  handleSubmit = () => {},\n}: ChatInputActionsProps) {\n  const { t } = useTranslation(\"openhands\");\n  const unifiedPauseMutation = useUnifiedPauseConversation();\n  const pauseConversationMutation = usePauseConversation();\n  const resumeConversationMutation = useResumeConversation();\n  const { conversationId } = useOptionalConversationId();\n  const { backend } = useActiveBackend();\n  const isCloud = backend.kind === \"cloud\";\n  const modelState = useChatInputModelState();\n  // Agent-profile switching lives in the \"+\" tools menu while the conversation\n  // hasn't started (OSS-5735) — the pill itself is always an LLM selector. The\n  // gate is computed here (not in the menu) so ToolsContextMenu only mounts the\n  // profile submenu when it can actually be used: pre-start, not on a task\n  // route, and only when the backend has profiles (#1571 fallback). Fetch is\n  // limited to the pre-start window.\n  const isPreStart = !conversationId || hasStartedConversation === false;\n  const agentProfilesForStart = useAgentProfiles({ enabled: isPreStart });\n  const showAgentProfileSwitch =\n    isPreStart &&\n    !(conversationId?.startsWith(\"task-\") ?? false) &&\n    (agentProfilesForStart.data?.profiles?.length ?? 0) > 0;\n  // Code/Plan mode switching is a cloud OpenHands feature — it doesn't apply\n  // to ACP conversations (which have no \"plan\" mode), so hide it when ACP.\n  const showChangeAgentButton = isCloud && !modelState.isAcpContext;\n  const webSocketStatus = useUnifiedWebSocketStatus();\n  const { curAgentState } = useAgentState();\n  const { conversationMode, setConversationMode } = useConversationStore();\n  const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n  const actionsRowRef = React.useRef<HTMLDivElement>(null);\n  const rightSectionRef = React.useRef<HTMLDivElement>(null);\n  const addFileRef = React.useRef<HTMLDivElement>(null);\n  const codeRef = React.useRef<HTMLDivElement>(null);\n  const modelRef = React.useRef<HTMLDivElement>(null);\n  const overflowTriggerRef = React.useRef<HTMLButtonElement>(null);\n  const [actionsRowWidth, setActionsRowWidth] = React.useState<number>(\n    Number.POSITIVE_INFINITY,\n  );\n  const [rightSectionWidth, setRightSectionWidth] = React.useState(0);\n  const [addFileWidth, setAddFileWidth] = React.useState(32);\n  const [codeWidth, setCodeWidth] = React.useState(96);\n  const [modelWidth, setModelWidth] = React.useState(120);\n  const [isOverflowOpen, setIsOverflowOpen] = React.useState(false);\n  const [activeSubmenu, setActiveSubmenu] = React.useState<\n    \"agent\" | \"model\" | null\n  >(null);\n  const [overflowPortalStyle, setOverflowPortalStyle] =\n    React.useState<React.CSSProperties>();\n\n  React.useEffect(() => {\n    const rowEl = actionsRowRef.current;\n    const rightEl = rightSectionRef.current;\n    const addEl = addFileRef.current;\n    const codeEl = codeRef.current;\n    const modelEl = modelRef.current;\n\n    if (\n      !rowEl ||\n      !rightEl ||\n      !addEl ||\n      !modelEl ||\n      (showChangeAgentButton && !codeEl) ||\n      typeof ResizeObserver === \"undefined\"\n    ) {\n      return;\n    }\n\n    const syncWidths = () => {\n      const nextRowWidth = rowEl.getBoundingClientRect().width;\n      const nextRightWidth = rightEl.getBoundingClientRect().width;\n      const nextAddWidth = addEl.getBoundingClientRect().width;\n      const nextModelWidth = modelEl.getBoundingClientRect().width;\n\n      if (nextRowWidth > 0) setActionsRowWidth(nextRowWidth);\n      if (nextRightWidth > 0) setRightSectionWidth(nextRightWidth);\n      if (nextAddWidth > 0) setAddFileWidth(nextAddWidth);\n      if (nextModelWidth > 0) setModelWidth(nextModelWidth);\n\n      if (codeEl) {\n        const nextCodeWidth = codeEl.getBoundingClientRect().width;\n        if (nextCodeWidth > 0) setCodeWidth(nextCodeWidth);\n      }\n    };\n\n    const observer = new ResizeObserver(() => {\n      syncWidths();\n    });\n\n    observer.observe(rowEl);\n    observer.observe(rightEl);\n    observer.observe(addEl);\n    observer.observe(modelEl);\n    if (codeEl) {\n      observer.observe(codeEl);\n    }\n\n    syncWidths();\n\n    return () => observer.disconnect();\n  }, [showChangeAgentButton]);\n\n  const handlePauseAgent = () => {\n    if (!conversationId) return;\n    pauseConversationMutation.mutate({ conversationId });\n  };\n\n  const handleResumeAgentClick = () => {\n    if (!conversationId) return;\n    resumeConversationMutation.mutate({ conversationId });\n  };\n\n  const isPausing =\n    unifiedPauseMutation.isPending || pauseConversationMutation.isPending;\n\n  const OVERFLOW_BUTTON_WIDTH = 28;\n  const INLINE_GAP = 12;\n  const ROOT_GAP = 8;\n\n  const fitOptionalItems = React.useCallback(\n    (availableWidth: number) => {\n      let remaining = availableWidth;\n      const next = {\n        showCodeInline: false,\n        showModelInline: false,\n      };\n\n      if (showChangeAgentButton && remaining >= codeWidth) {\n        next.showCodeInline = true;\n        remaining -= codeWidth + INLINE_GAP;\n      }\n\n      if (remaining >= modelWidth) {\n        next.showModelInline = true;\n      }\n\n      return next;\n    },\n    [showChangeAgentButton, codeWidth, modelWidth],\n  );\n\n  const leftBaseWidth =\n    actionsRowWidth - rightSectionWidth - ROOT_GAP - addFileWidth - INLINE_GAP;\n\n  const fitWithoutOverflow = fitOptionalItems(leftBaseWidth);\n  const allOptionalFit =\n    (!showChangeAgentButton || fitWithoutOverflow.showCodeInline) &&\n    fitWithoutOverflow.showModelInline;\n\n  const fitWithOverflow = allOptionalFit\n    ? fitWithoutOverflow\n    : fitOptionalItems(leftBaseWidth - OVERFLOW_BUTTON_WIDTH - INLINE_GAP);\n\n  const showCodeInline = !showChangeAgentButton\n    ? false\n    : fitWithOverflow.showCodeInline;\n  const showModelInline = fitWithOverflow.showModelInline;\n  const showAddFileInline = true;\n  const showAgentStatusInline = actionsRowWidth >= 360;\n\n  const hasOverflowItems =\n    !showAddFileInline ||\n    (showChangeAgentButton && !showCodeInline) ||\n    !showModelInline;\n\n  React.useEffect(() => {\n    if (!hasOverflowItems) {\n      setIsOverflowOpen(false);\n      setActiveSubmenu(null);\n    }\n  }, [hasOverflowItems]);\n\n  const overflowMenuRef = useClickOutsideElement<HTMLUListElement>(() => {\n    setIsOverflowOpen(false);\n    setActiveSubmenu(null);\n  });\n\n  const isAgentSwitcherDisabled =\n    curAgentState === AgentState.RUNNING ||\n    isCreatingConversation ||\n    webSocketStatus !== \"OPEN\";\n\n  const closeOverflowMenus = () => {\n    setActiveSubmenu(null);\n    setIsOverflowOpen(false);\n  };\n\n  // Which chat-input LLM picker to show — the constrained ACP model picker or\n  // the LLM-profile picker (unit-tested in `resolve-picker-kind.test.ts`).\n  const pickerKind = resolvePickerKind({ isAcp: modelState.isAcpContext });\n\n  // Shared styling for the settings link inside the overflow submenu content.\n  const overflowSettingsLinkClassName = cn(\n    \"group\",\n    formControlTransitionClassName,\n  );\n  const overflowSettingsIconClassName = cn(\n    \"text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]\",\n    formControlTransitionClassName,\n  );\n\n  React.useLayoutEffect(() => {\n    if (!isOverflowOpen || !overflowTriggerRef.current) {\n      return;\n    }\n\n    const trigger = overflowTriggerRef.current;\n\n    const updatePosition = () => {\n      const rect = trigger.getBoundingClientRect();\n      const GAP = 8;\n      setOverflowPortalStyle({\n        position: \"fixed\",\n        top: rect.top - GAP,\n        left: rect.left,\n        transform: \"translateY(-100%)\",\n        zIndex: 9999,\n      });\n    };\n\n    updatePosition();\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [isOverflowOpen]);\n\n  const overflowMenu = (\n    <ContextMenu\n      ref={overflowMenuRef}\n      testId=\"chat-input-overflow-menu\"\n      position=\"top\"\n      alignment=\"left\"\n      className=\"!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]\"\n    >\n      {showChangeAgentButton && !showCodeInline && (\n        <div className=\"relative group/overflow-agent\">\n          <ContextMenuListItem\n            testId=\"overflow-agent-button\"\n            onClick={() =>\n              setActiveSubmenu((current) =>\n                current === \"agent\" ? null : \"agent\",\n              )\n            }\n            isDisabled={isAgentSwitcherDisabled}\n          >\n            <ToolsContextMenuIconText\n              icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n              text={\n                conversationMode === \"code\"\n                  ? t(I18nKey.COMMON$CODE)\n                  : t(I18nKey.COMMON$PLAN)\n              }\n              rightIcon={<CarretRightFillIcon width={10} height={10} />}\n            />\n          </ContextMenuListItem>\n          {!isAgentSwitcherDisabled && (\n            <div\n              className={cn(\n                \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n                \"group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto\",\n                \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n                activeSubmenu === \"agent\" &&\n                  \"opacity-100 visible pointer-events-auto\",\n              )}\n            >\n              <ContextMenu\n                testId=\"overflow-agent-submenu\"\n                className=\"overflow-visible min-w-[195px]\"\n              >\n                <ContextMenuListItem\n                  testId=\"overflow-agent-code\"\n                  onClick={(event) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setConversationMode(\"code\");\n                    closeOverflowMenus();\n                  }}\n                >\n                  <ToolsContextMenuIconText\n                    icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n                    text={t(I18nKey.COMMON$CODE)}\n                  />\n                </ContextMenuListItem>\n                <ContextMenuListItem\n                  testId=\"overflow-agent-plan\"\n                  onClick={(event) => {\n                    handlePlanClick(event);\n                    closeOverflowMenus();\n                  }}\n                >\n                  <ToolsContextMenuIconText\n                    icon={\n                      <LessonPlanIcon\n                        width={16}\n                        height={16}\n                        color=\"currentColor\"\n                      />\n                    }\n                    text={t(I18nKey.COMMON$PLAN)}\n                  />\n                </ContextMenuListItem>\n              </ContextMenu>\n            </div>\n          )}\n        </div>\n      )}\n      {!showModelInline && (\n        <div className=\"relative group/overflow-model\">\n          <ContextMenuListItem\n            testId=\"overflow-model-button\"\n            onClick={() =>\n              setActiveSubmenu((current) =>\n                current === \"model\" ? null : \"model\",\n              )\n            }\n          >\n            <ToolsContextMenuIconText\n              icon={<Cpu width={16} height={16} strokeWidth={2} aria-hidden />}\n              text={t(I18nKey.SETTINGS$AGENT_MODEL)}\n              rightIcon={<CarretRightFillIcon width={10} height={10} />}\n            />\n          </ContextMenuListItem>\n          <div\n            className={cn(\n              \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n              \"group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto\",\n              \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n              activeSubmenu === \"model\" &&\n                \"opacity-100 visible pointer-events-auto\",\n            )}\n          >\n            {/* overflow-y-auto (not overflow-visible) so a long ACP model list\n                scrolls within the menu instead of overflowing the viewport.\n                Safe because this menu has no floating children (tooltips /\n                nested popovers) that would be clipped — only a flat model list\n                + Settings link. Revisit if floating children are added here. */}\n            <ContextMenu\n              testId=\"overflow-model-submenu\"\n              className=\"min-w-[220px] max-w-[320px] max-h-[60vh] overflow-y-auto gap-0\"\n            >\n              {pickerKind === \"model\" ? (\n                <ChatInputModelMenuContent\n                  model={modelState}\n                  onClose={closeOverflowMenus}\n                  dividerInset=\"menu\"\n                  settingsLinkClassName={overflowSettingsLinkClassName}\n                  settingsIconClassName={overflowSettingsIconClassName}\n                />\n              ) : (\n                <ChatInputLlmProfileMenuContent\n                  onClose={closeOverflowMenus}\n                  dividerInset=\"menu\"\n                  settingsLinkClassName={overflowSettingsLinkClassName}\n                  settingsIconClassName={overflowSettingsIconClassName}\n                />\n              )}\n            </ContextMenu>\n          </div>\n        </div>\n      )}\n    </ContextMenu>\n  );\n\n  return (\n    <div\n      ref={actionsRowRef}\n      className=\"w-full min-w-0 flex items-center justify-between gap-2\"\n    >\n      <div className=\"flex min-w-0 items-center gap-1\">\n        <div className=\"flex min-w-0 items-center gap-3\">\n          <div ref={addFileRef} className={cn(!showAddFileInline && \"hidden\")}>\n            <ChatAddFileButton\n              disabled={disabled}\n              handleFileIconClick={onAddFileClick}\n              showAgentProfileSwitch={showAgentProfileSwitch}\n            />\n          </div>\n          {showChangeAgentButton && (\n            <div ref={codeRef} className={cn(!showCodeInline && \"hidden\")}>\n              <ChangeAgentButton />\n            </div>\n          )}\n          <div ref={modelRef} className={cn(!showModelInline && \"hidden\")}>\n            {/* Picker depends on backend + ACP context; see the `pickerKind`\n                cases above. */}\n            {pickerKind === \"model\" ? (\n              <ChatInputModel />\n            ) : (\n              <ChatInputLlmProfilePicker />\n            )}\n          </div>\n\n          {hasOverflowItems && (\n            <div className=\"relative shrink-0\">\n              <button\n                ref={overflowTriggerRef}\n                type=\"button\"\n                className={cn(chatInputIconButtonClassName, \"size-6\")}\n                aria-label={t(I18nKey.CHAT_INTERFACE$MORE_INPUT_ACTIONS)}\n                aria-expanded={isOverflowOpen}\n                aria-haspopup=\"menu\"\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  setIsOverflowOpen((open) => !open);\n                }}\n              >\n                <ThreeDotsVerticalIcon\n                  width={16}\n                  height={16}\n                  color=\"currentColor\"\n                />\n              </button>\n\n              {isOverflowOpen &&\n                typeof document !== \"undefined\" &&\n                overflowPortalStyle &&\n                ReactDOM.createPortal(\n                  <div style={overflowPortalStyle}>{overflowMenu}</div>,\n                  document.body,\n                )}\n            </div>\n          )}\n        </div>\n      </div>\n      <div\n        ref={rightSectionRef}\n        className=\"ml-auto flex shrink-0 items-center gap-2\"\n      >\n        {showAgentStatusInline && conversationId && (\n          <AgentStatus\n            handleStop={handlePauseAgent}\n            handleResumeAgent={handleResumeAgentClick}\n            disabled={disabled}\n            isPausing={isPausing}\n          />\n        )}\n        {showButton && (\n          <ChatSendButton\n            buttonClassName={buttonClassName}\n            handleSubmit={handleSubmit}\n            disabled={disabled || !canSubmit}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"chat-input-actions.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-actions.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport { Cpu } from \"lucide-react\";\nimport { AgentStatus } from \"#/components/features/controls/agent-status\";\nimport { ChangeAgentButton } from \"../change-agent-button\";\nimport { ChatInputModel, ChatInputModelMenuContent } from \"./chat-input-model\";\nimport {\n  ChatInputLlmProfilePicker,\n  ChatInputLlmProfileMenuContent,\n} from \"./chat-input-llm-profile-picker\";\nimport { resolvePickerKind } from \"./resolve-picker-kind\";\nimport { ChatAddFileButton } from \"../chat-add-file-button\";\nimport { ChatSendButton } from \"../chat-send-button\";\nimport { ContextWindowMeter } from \"./context-window-meter\";\nimport CarretRightFillIcon from \"#/icons/carret-right-fill.svg?react\";\nimport LessonPlanIcon from \"#/icons/lesson-plan.svg?react\";\nimport ThreeDotsVerticalIcon from \"#/icons/three-dots-vertical.svg?react\";\nimport { CodePillIcon } from \"#/icons/code-pill\";\nimport { useUnifiedPauseConversation } from \"#/hooks/mutation/use-unified-stop-conversation\";\nimport { useOptionalConversationId } from \"#/hooks/use-conversation-id\";\nimport { usePauseConversation } from \"#/hooks/mutation/use-pause-conversation\";\nimport { useResumeConversation } from \"#/hooks/mutation/use-resume-conversation\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { useAgentProfiles } from \"#/hooks/query/use-agent-profiles\";\nimport { useChatInputModelState } from \"#/hooks/use-chat-input-model-state\";\nimport { useConversationStore } from \"#/stores/conversation-store\";\nimport { useAgentState } from \"#/hooks/use-agent-state\";\nimport { AgentState } from \"#/types/agent-state\";\nimport { useUnifiedWebSocketStatus } from \"#/hooks/use-unified-websocket-status\";\nimport { useHandlePlanClick } from \"#/hooks/use-handle-plan-click\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { ToolsContextMenuIconText } from \"../../controls/tools-context-menu-icon-text\";\nimport { ContextMenuListItem } from \"../../context-menu/context-menu-list-item\";\nimport { ContextMenu } from \"#/ui/context-menu\";\nimport { useClickOutsideElement } from \"#/hooks/use-click-outside-element\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  chatInputIconButtonClassName,\n  formControlTransitionClassName,\n} from \"#/utils/form-control-classes\";\n\ninterface ChatInputActionsProps {\n  disabled: boolean;\n  canSubmit?: boolean;\n  hasStartedConversation?: boolean;\n  onAddFileClick?: () => void;\n  showButton?: boolean;\n  buttonClassName?: string;\n  handleSubmit?: () => void;\n}\n\nexport function ChatInputActions({\n  disabled,\n  canSubmit = true,\n  hasStartedConversation,\n  onAddFileClick = () => {},\n  showButton = true,\n  buttonClassName = \"\",\n  handleSubmit = () => {},\n}: ChatInputActionsProps) {\n  const { t } = useTranslation(\"openhands\");\n  const unifiedPauseMutation = useUnifiedPauseConversation();\n  const pauseConversationMutation = usePauseConversation();\n  const resumeConversationMutation = useResumeConversation();\n  const { conversationId } = useOptionalConversationId();\n  const { backend } = useActiveBackend();\n  const isCloud = backend.kind === \"cloud\";\n  const modelState = useChatInputModelState();\n  // Agent-profile switching lives in the \"+\" tools menu while the conversation\n  // hasn't started (OSS-5735) — the pill itself is always an LLM selector. The\n  // gate is computed here (not in the menu) so ToolsContextMenu only mounts the\n  // profile submenu when it can actually be used: pre-start, not on a task\n  // route, and only when the backend has profiles (#1571 fallback). Fetch is\n  // limited to the pre-start window.\n  const isPreStart = !conversationId || hasStartedConversation === false;\n  const agentProfilesForStart = useAgentProfiles({ enabled: isPreStart });\n  const showAgentProfileSwitch =\n    isPreStart &&\n    !(conversationId?.startsWith(\"task-\") ?? false) &&\n    (agentProfilesForStart.data?.profiles?.length ?? 0) > 0;\n  // Code/Plan mode switching is a cloud OpenHands feature — it doesn't apply\n  // to ACP conversations (which have no \"plan\" mode), so hide it when ACP.\n  const showChangeAgentButton = isCloud && !modelState.isAcpContext;\n  const webSocketStatus = useUnifiedWebSocketStatus();\n  const { curAgentState } = useAgentState();\n  const { conversationMode, setConversationMode } = useConversationStore();\n  const { handlePlanClick, isCreatingConversation } = useHandlePlanClick();\n\n  const actionsRowRef = React.useRef<HTMLDivElement>(null);\n  const rightSectionRef = React.useRef<HTMLDivElement>(null);\n  const addFileRef = React.useRef<HTMLDivElement>(null);\n  const codeRef = React.useRef<HTMLDivElement>(null);\n  const modelRef = React.useRef<HTMLDivElement>(null);\n  const overflowTriggerRef = React.useRef<HTMLButtonElement>(null);\n  const [actionsRowWidth, setActionsRowWidth] = React.useState<number>(\n    Number.POSITIVE_INFINITY,\n  );\n  const [rightSectionWidth, setRightSectionWidth] = React.useState(0);\n  const [addFileWidth, setAddFileWidth] = React.useState(32);\n  const [codeWidth, setCodeWidth] = React.useState(96);\n  const [modelWidth, setModelWidth] = React.useState(120);\n  const [isOverflowOpen, setIsOverflowOpen] = React.useState(false);\n  const [activeSubmenu, setActiveSubmenu] = React.useState<\n    \"agent\" | \"model\" | null\n  >(null);\n  const [overflowPortalStyle, setOverflowPortalStyle] =\n    React.useState<React.CSSProperties>();\n\n  React.useEffect(() => {\n    const rowEl = actionsRowRef.current;\n    const rightEl = rightSectionRef.current;\n    const addEl = addFileRef.current;\n    const codeEl = codeRef.current;\n    const modelEl = modelRef.current;\n\n    if (\n      !rowEl ||\n      !rightEl ||\n      !addEl ||\n      !modelEl ||\n      (showChangeAgentButton && !codeEl) ||\n      typeof ResizeObserver === \"undefined\"\n    ) {\n      return;\n    }\n\n    const syncWidths = () => {\n      const nextRowWidth = rowEl.getBoundingClientRect().width;\n      const nextRightWidth = rightEl.getBoundingClientRect().width;\n      const nextAddWidth = addEl.getBoundingClientRect().width;\n      const nextModelWidth = modelEl.getBoundingClientRect().width;\n\n      if (nextRowWidth > 0) setActionsRowWidth(nextRowWidth);\n      if (nextRightWidth > 0) setRightSectionWidth(nextRightWidth);\n      if (nextAddWidth > 0) setAddFileWidth(nextAddWidth);\n      if (nextModelWidth > 0) setModelWidth(nextModelWidth);\n\n      if (codeEl) {\n        const nextCodeWidth = codeEl.getBoundingClientRect().width;\n        if (nextCodeWidth > 0) setCodeWidth(nextCodeWidth);\n      }\n    };\n\n    const observer = new ResizeObserver(() => {\n      syncWidths();\n    });\n\n    observer.observe(rowEl);\n    observer.observe(rightEl);\n    observer.observe(addEl);\n    observer.observe(modelEl);\n    if (codeEl) {\n      observer.observe(codeEl);\n    }\n\n    syncWidths();\n\n    return () => observer.disconnect();\n  }, [showChangeAgentButton]);\n\n  const handlePauseAgent = () => {\n    if (!conversationId) return;\n    pauseConversationMutation.mutate({ conversationId });\n  };\n\n  const handleResumeAgentClick = () => {\n    if (!conversationId) return;\n    resumeConversationMutation.mutate({ conversationId });\n  };\n\n  const isPausing =\n    unifiedPauseMutation.isPending || pauseConversationMutation.isPending;\n\n  const OVERFLOW_BUTTON_WIDTH = 28;\n  const INLINE_GAP = 12;\n  const ROOT_GAP = 8;\n\n  const fitOptionalItems = React.useCallback(\n    (availableWidth: number) => {\n      let remaining = availableWidth;\n      const next = {\n        showCodeInline: false,\n        showModelInline: false,\n      };\n\n      if (showChangeAgentButton && remaining >= codeWidth) {\n        next.showCodeInline = true;\n        remaining -= codeWidth + INLINE_GAP;\n      }\n\n      if (remaining >= modelWidth) {\n        next.showModelInline = true;\n      }\n\n      return next;\n    },\n    [showChangeAgentButton, codeWidth, modelWidth],\n  );\n\n  const leftBaseWidth =\n    actionsRowWidth - rightSectionWidth - ROOT_GAP - addFileWidth - INLINE_GAP;\n\n  const fitWithoutOverflow = fitOptionalItems(leftBaseWidth);\n  const allOptionalFit =\n    (!showChangeAgentButton || fitWithoutOverflow.showCodeInline) &&\n    fitWithoutOverflow.showModelInline;\n\n  const fitWithOverflow = allOptionalFit\n    ? fitWithoutOverflow\n    : fitOptionalItems(leftBaseWidth - OVERFLOW_BUTTON_WIDTH - INLINE_GAP);\n\n  const showCodeInline = !showChangeAgentButton\n    ? false\n    : fitWithOverflow.showCodeInline;\n  const showModelInline = fitWithOverflow.showModelInline;\n  const showAddFileInline = true;\n  const showAgentStatusInline = actionsRowWidth >= 360;\n\n  const hasOverflowItems =\n    !showAddFileInline ||\n    (showChangeAgentButton && !showCodeInline) ||\n    !showModelInline;\n\n  React.useEffect(() => {\n    if (!hasOverflowItems) {\n      setIsOverflowOpen(false);\n      setActiveSubmenu(null);\n    }\n  }, [hasOverflowItems]);\n\n  const overflowMenuRef = useClickOutsideElement<HTMLUListElement>(() => {\n    setIsOverflowOpen(false);\n    setActiveSubmenu(null);\n  });\n\n  const isAgentSwitcherDisabled =\n    curAgentState === AgentState.RUNNING ||\n    isCreatingConversation ||\n    webSocketStatus !== \"OPEN\";\n\n  const closeOverflowMenus = () => {\n    setActiveSubmenu(null);\n    setIsOverflowOpen(false);\n  };\n\n  // Which chat-input LLM picker to show — the constrained ACP model picker or\n  // the LLM-profile picker (unit-tested in `resolve-picker-kind.test.ts`).\n  const pickerKind = resolvePickerKind({ isAcp: modelState.isAcpContext });\n\n  // Shared styling for the settings link inside the overflow submenu content.\n  const overflowSettingsLinkClassName = cn(\n    \"group\",\n    formControlTransitionClassName,\n  );\n  const overflowSettingsIconClassName = cn(\n    \"text-[var(--oh-muted)] group-hover:text-[var(--oh-foreground)]\",\n    formControlTransitionClassName,\n  );\n\n  React.useLayoutEffect(() => {\n    if (!isOverflowOpen || !overflowTriggerRef.current) {\n      return;\n    }\n\n    const trigger = overflowTriggerRef.current;\n\n    const updatePosition = () => {\n      const rect = trigger.getBoundingClientRect();\n      const GAP = 8;\n      setOverflowPortalStyle({\n        position: \"fixed\",\n        top: rect.top - GAP,\n        left: rect.left,\n        transform: \"translateY(-100%)\",\n        zIndex: 9999,\n      });\n    };\n\n    updatePosition();\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [isOverflowOpen]);\n\n  const overflowMenu = (\n    <ContextMenu\n      ref={overflowMenuRef}\n      testId=\"chat-input-overflow-menu\"\n      position=\"top\"\n      alignment=\"left\"\n      className=\"!static !top-auto !bottom-auto !left-auto !right-auto !mt-0 overflow-visible min-w-[200px]\"\n    >\n      {showChangeAgentButton && !showCodeInline && (\n        <div className=\"relative group/overflow-agent\">\n          <ContextMenuListItem\n            testId=\"overflow-agent-button\"\n            onClick={() =>\n              setActiveSubmenu((current) =>\n                current === \"agent\" ? null : \"agent\",\n              )\n            }\n            isDisabled={isAgentSwitcherDisabled}\n          >\n            <ToolsContextMenuIconText\n              icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n              text={\n                conversationMode === \"code\"\n                  ? t(I18nKey.COMMON$CODE)\n                  : t(I18nKey.COMMON$PLAN)\n              }\n              rightIcon={<CarretRightFillIcon width={10} height={10} />}\n            />\n          </ContextMenuListItem>\n          {!isAgentSwitcherDisabled && (\n            <div\n              className={cn(\n                \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n                \"group-hover/overflow-agent:opacity-100 group-hover/overflow-agent:visible group-hover/overflow-agent:pointer-events-auto\",\n                \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n                activeSubmenu === \"agent\" &&\n                  \"opacity-100 visible pointer-events-auto\",\n              )}\n            >\n              <ContextMenu\n                testId=\"overflow-agent-submenu\"\n                className=\"overflow-visible min-w-[195px]\"\n              >\n                <ContextMenuListItem\n                  testId=\"overflow-agent-code\"\n                  onClick={(event) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setConversationMode(\"code\");\n                    closeOverflowMenus();\n                  }}\n                >\n                  <ToolsContextMenuIconText\n                    icon={<CodePillIcon className=\"h-[11px] w-[11px]\" />}\n                    text={t(I18nKey.COMMON$CODE)}\n                  />\n                </ContextMenuListItem>\n                <ContextMenuListItem\n                  testId=\"overflow-agent-plan\"\n                  onClick={(event) => {\n                    handlePlanClick(event);\n                    closeOverflowMenus();\n                  }}\n                >\n                  <ToolsContextMenuIconText\n                    icon={\n                      <LessonPlanIcon\n                        width={16}\n                        height={16}\n                        color=\"currentColor\"\n                      />\n                    }\n                    text={t(I18nKey.COMMON$PLAN)}\n                  />\n                </ContextMenuListItem>\n              </ContextMenu>\n            </div>\n          )}\n        </div>\n      )}\n      {!showModelInline && (\n        <div className=\"relative group/overflow-model\">\n          <ContextMenuListItem\n            testId=\"overflow-model-button\"\n            onClick={() =>\n              setActiveSubmenu((current) =>\n                current === \"model\" ? null : \"model\",\n              )\n            }\n          >\n            <ToolsContextMenuIconText\n              icon={<Cpu width={16} height={16} strokeWidth={2} aria-hidden />}\n              text={t(I18nKey.SETTINGS$AGENT_MODEL)}\n              rightIcon={<CarretRightFillIcon width={10} height={10} />}\n            />\n          </ContextMenuListItem>\n          <div\n            className={cn(\n              \"absolute left-full top-[-4px] z-60 opacity-0 invisible pointer-events-none transition-all duration-200 ml-[1px]\",\n              \"group-hover/overflow-model:opacity-100 group-hover/overflow-model:visible group-hover/overflow-model:pointer-events-auto\",\n              \"hover:opacity-100 hover:visible hover:pointer-events-auto\",\n              activeSubmenu === \"model\" &&\n                \"opacity-100 visible pointer-events-auto\",\n            )}\n          >\n            {/* overflow-y-auto (not overflow-visible) so a long ACP model list\n                scrolls within the menu instead of overflowing the viewport.\n                Safe because this menu has no floating children (tooltips /\n                nested popovers) that would be clipped — only a flat model list\n                + Settings link. Revisit if floating children are added here. */}\n            <ContextMenu\n              testId=\"overflow-model-submenu\"\n              className=\"min-w-[220px] max-w-[320px] max-h-[60vh] overflow-y-auto gap-0\"\n            >\n              {pickerKind === \"model\" ? (\n                <ChatInputModelMenuContent\n                  model={modelState}\n                  onClose={closeOverflowMenus}\n                  dividerInset=\"menu\"\n                  settingsLinkClassName={overflowSettingsLinkClassName}\n                  settingsIconClassName={overflowSettingsIconClassName}\n                />\n              ) : (\n                <ChatInputLlmProfileMenuContent\n                  onClose={closeOverflowMenus}\n                  dividerInset=\"menu\"\n                  settingsLinkClassName={overflowSettingsLinkClassName}\n                  settingsIconClassName={overflowSettingsIconClassName}\n                />\n              )}\n            </ContextMenu>\n          </div>\n        </div>\n      )}\n    </ContextMenu>\n  );\n\n  return (\n    <div\n      ref={actionsRowRef}\n      className=\"w-full min-w-0 flex items-center justify-between gap-2\"\n    >\n      <div className=\"flex min-w-0 items-center gap-1\">\n        <div className=\"flex min-w-0 items-center gap-3\">\n          <div ref={addFileRef} className={cn(!showAddFileInline && \"hidden\")}>\n            <ChatAddFileButton\n              disabled={disabled}\n              handleFileIconClick={onAddFileClick}\n              showAgentProfileSwitch={showAgentProfileSwitch}\n            />\n          </div>\n          {showChangeAgentButton && (\n            <div ref={codeRef} className={cn(!showCodeInline && \"hidden\")}>\n              <ChangeAgentButton />\n            </div>\n          )}\n          <div ref={modelRef} className={cn(!showModelInline && \"hidden\")}>\n            {/* Picker depends on backend + ACP context; see the `pickerKind`\n                cases above. */}\n            {pickerKind === \"model\" ? (\n              <ChatInputModel />\n            ) : (\n              <ChatInputLlmProfilePicker />\n            )}\n          </div>\n\n          {hasOverflowItems && (\n            <div className=\"relative shrink-0\">\n              <button\n                ref={overflowTriggerRef}\n                type=\"button\"\n                className={cn(chatInputIconButtonClassName, \"size-6\")}\n                aria-label={t(I18nKey.CHAT_INTERFACE$MORE_INPUT_ACTIONS)}\n                aria-expanded={isOverflowOpen}\n                aria-haspopup=\"menu\"\n                onClick={(event) => {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  setIsOverflowOpen((open) => !open);\n                }}\n              >\n                <ThreeDotsVerticalIcon\n                  width={16}\n                  height={16}\n                  color=\"currentColor\"\n                />\n              </button>\n\n              {isOverflowOpen &&\n                typeof document !== \"undefined\" &&\n                overflowPortalStyle &&\n                ReactDOM.createPortal(\n                  <div style={overflowPortalStyle}>{overflowMenu}</div>,\n                  document.body,\n                )}\n            </div>\n          )}\n        </div>\n      </div>\n      <div\n        ref={rightSectionRef}\n        className=\"ml-auto flex shrink-0 items-center gap-2\"\n      >\n        {showAgentStatusInline && conversationId && (\n          <AgentStatus\n            handleStop={handlePauseAgent}\n            handleResumeAgent={handleResumeAgentClick}\n            disabled={disabled}\n            isPausing={isPausing}\n          />\n        )}\n        <ContextWindowMeter />\n        {showButton && (\n          <ChatSendButton\n            buttonClassName={buttonClassName}\n            handleSubmit={handleSubmit}\n            disabled={disabled || !canSubmit}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/components/chat-input-grip.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../utils/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({gripRef:e,isGripVisible:n,isGripDragging:i,handleTopEdgeClick:a,handleGripMouseDown:o,handleGripTouchStart:s}){return(0,r.jsxs)(`div`,{className:`absolute top-0 left-0 w-full h-3 z-20 group`,id:`resize-grip`,onClick:a,children:[(0,r.jsx)(`div`,{className:`absolute inset-0 z-[1] cursor-ns-resize select-none`,onMouseDown:o,onTouchStart:s,"aria-hidden":!0}),(0,r.jsx)(`div`,{ref:e,className:t.cn(`pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200`,n||i?`opacity-100`:`opacity-0 group-hover:opacity-100`)})]})}exports.ChatInputGrip=i;
+const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../utils/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({gripRef:e,isGripVisible:n,isGripDragging:i,canResize:a,handleTopEdgeClick:o,handleGripMouseDown:s,handleGripTouchStart:c}){return(0,r.jsxs)(`div`,{className:t.cn(`absolute top-0 left-0 w-full h-3 z-20 group`,!a&&`pointer-events-none`),id:`resize-grip`,onClick:a?o:void 0,children:[a&&(0,r.jsx)(`div`,{className:`absolute inset-0 z-[1] cursor-ns-resize select-none`,onMouseDown:s,onTouchStart:c,"aria-hidden":!0}),(0,r.jsx)(`div`,{ref:e,className:t.cn(`pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200`,!a&&`opacity-0`,a&&(n||i?`opacity-100`:`opacity-0 group-hover:opacity-100`))})]})}exports.ChatInputGrip=i;
 //# sourceMappingURL=chat-input-grip.cjs.map

package/dist/components/features/chat/components/chat-input-grip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input-grip.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-grip.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ChatInputGripProps {\n  gripRef: React.RefObject<HTMLDivElement | null>;\n  isGripVisible: boolean;\n  isGripDragging: boolean;\n  handleTopEdgeClick: (e: React.MouseEvent) => void;\n  handleGripMouseDown: (e: React.MouseEvent) => void;\n  handleGripTouchStart: (e: React.TouchEvent) => void;\n}\n\nexport function ChatInputGrip({\n  gripRef,\n  isGripVisible,\n  isGripDragging,\n  handleTopEdgeClick,\n  handleGripMouseDown,\n  handleGripTouchStart,\n}: ChatInputGripProps) {\n  return (\n    <div\n      className=\"absolute top-0 left-0 w-full h-3 z-20 group\"\n      id=\"resize-grip\"\n      onClick={handleTopEdgeClick}\n    >\n      {/* Resize hit target; 1px line is drawn at top-0 (flush with chat input box) */}\n      <div\n        className=\"absolute inset-0 z-[1] cursor-ns-resize select-none\"\n        onMouseDown={handleGripMouseDown}\n        onTouchStart={handleGripTouchStart}\n        aria-hidden\n      />\n      <div\n        ref={gripRef}\n        className={cn(\n          \"pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200\",\n          isGripVisible || isGripDragging\n            ? \"opacity-100\"\n            : \"opacity-0 group-hover:opacity-100\",\n        )}\n      />\n    </div>\n  );\n}\n"],"mappings":"kLAYA,SAAgB,EAAc,CAC5B,UACA,gBACA,iBACA,qBACA,sBACA,wBACqB,CACrB,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,8CACV,GAAG,cACH,QAAS,WAHX,EAME,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,sDACV,YAAa,EACb,aAAc,EACd,cAAA,EACD,CAAA,GACD,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAA,GACT,uGACA,GAAiB,EACb,cACA,mCACN,CACD,CAAA,CACE,GAET"}
+{"version":3,"file":"chat-input-grip.cjs","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-grip.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ChatInputGripProps {\n  gripRef: React.RefObject<HTMLDivElement | null>;\n  isGripVisible: boolean;\n  isGripDragging: boolean;\n  canResize: boolean;\n  handleTopEdgeClick: (e: React.MouseEvent) => void;\n  handleGripMouseDown: (e: React.MouseEvent) => void;\n  handleGripTouchStart: (e: React.TouchEvent) => void;\n}\n\nexport function ChatInputGrip({\n  gripRef,\n  isGripVisible,\n  isGripDragging,\n  canResize,\n  handleTopEdgeClick,\n  handleGripMouseDown,\n  handleGripTouchStart,\n}: ChatInputGripProps) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-0 left-0 w-full h-3 z-20 group\",\n        !canResize && \"pointer-events-none\",\n      )}\n      id=\"resize-grip\"\n      onClick={canResize ? handleTopEdgeClick : undefined}\n    >\n      {/* Resize hit target; 1px line is drawn at top-0 (flush with chat input box) */}\n      {canResize && (\n        <div\n          className=\"absolute inset-0 z-[1] cursor-ns-resize select-none\"\n          onMouseDown={handleGripMouseDown}\n          onTouchStart={handleGripTouchStart}\n          aria-hidden\n        />\n      )}\n      <div\n        ref={gripRef}\n        className={cn(\n          \"pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200\",\n          !canResize && \"opacity-0\",\n          canResize &&\n            (isGripVisible || isGripDragging\n              ? \"opacity-100\"\n              : \"opacity-0 group-hover:opacity-100\"),\n        )}\n      />\n    </div>\n  );\n}\n"],"mappings":"kLAaA,SAAgB,EAAc,CAC5B,UACA,gBACA,iBACA,YACA,qBACA,sBACA,wBACqB,CACrB,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,8CACA,CAAC,GAAa,qBAChB,EACA,GAAG,cACH,QAAS,EAAY,EAAqB,IAAA,YAN5C,CASG,IACC,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,sDACV,YAAa,EACb,aAAc,EACd,cAAA,EACD,CAAA,GAEH,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAA,GACT,uGACA,CAAC,GAAa,YACd,IACG,GAAiB,EACd,cACA,oCACR,CACD,CAAA,CACE,GAET"}

package/dist/components/features/chat/components/chat-input-grip.d.ts

@@ -3,9 +3,10 @@ interface ChatInputGripProps {
     gripRef: React.RefObject<HTMLDivElement | null>;
     isGripVisible: boolean;
     isGripDragging: boolean;
+    canResize: boolean;
     handleTopEdgeClick: (e: React.MouseEvent) => void;
     handleGripMouseDown: (e: React.MouseEvent) => void;
     handleGripTouchStart: (e: React.TouchEvent) => void;
 }
-export declare function ChatInputGrip({ gripRef, isGripVisible, isGripDragging, handleTopEdgeClick, handleGripMouseDown, handleGripTouchStart, }: ChatInputGripProps): React.JSX.Element;
+export declare function ChatInputGrip({ gripRef, isGripVisible, isGripDragging, canResize, handleTopEdgeClick, handleGripMouseDown, handleGripTouchStart, }: ChatInputGripProps): React.JSX.Element;
 export {};

package/dist/components/features/chat/components/chat-input-grip.js

@@ -2,19 +2,19 @@ import { cn as e } from "../../../../utils/utils.js";
 import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/features/chat/components/chat-input-grip.tsx
-function r({ gripRef: r, isGripVisible: i, isGripDragging: a, handleTopEdgeClick: o, handleGripMouseDown: s, handleGripTouchStart: c }) {
+function r({ gripRef: r, isGripVisible: i, isGripDragging: a, canResize: o, handleTopEdgeClick: s, handleGripMouseDown: c, handleGripTouchStart: l }) {
 	return /* @__PURE__ */ n("div", {
-		className: "absolute top-0 left-0 w-full h-3 z-20 group",
+		className: e("absolute top-0 left-0 w-full h-3 z-20 group", !o && "pointer-events-none"),
 		id: "resize-grip",
-		onClick: o,
-		children: [/* @__PURE__ */ t("div", {
+		onClick: o ? s : void 0,
+		children: [o && /* @__PURE__ */ t("div", {
 			className: "absolute inset-0 z-[1] cursor-ns-resize select-none",
-			onMouseDown: s,
-			onTouchStart: c,
+			onMouseDown: c,
+			onTouchStart: l,
 			"aria-hidden": !0
 		}), /* @__PURE__ */ t("div", {
 			ref: r,
-			className: e("pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200", i || a ? "opacity-100" : "opacity-0 group-hover:opacity-100")
+			className: e("pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200", !o && "opacity-0", o && (i || a ? "opacity-100" : "opacity-0 group-hover:opacity-100"))
 		})]
 	});
 }

package/dist/components/features/chat/components/chat-input-grip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input-grip.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-grip.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ChatInputGripProps {\n  gripRef: React.RefObject<HTMLDivElement | null>;\n  isGripVisible: boolean;\n  isGripDragging: boolean;\n  handleTopEdgeClick: (e: React.MouseEvent) => void;\n  handleGripMouseDown: (e: React.MouseEvent) => void;\n  handleGripTouchStart: (e: React.TouchEvent) => void;\n}\n\nexport function ChatInputGrip({\n  gripRef,\n  isGripVisible,\n  isGripDragging,\n  handleTopEdgeClick,\n  handleGripMouseDown,\n  handleGripTouchStart,\n}: ChatInputGripProps) {\n  return (\n    <div\n      className=\"absolute top-0 left-0 w-full h-3 z-20 group\"\n      id=\"resize-grip\"\n      onClick={handleTopEdgeClick}\n    >\n      {/* Resize hit target; 1px line is drawn at top-0 (flush with chat input box) */}\n      <div\n        className=\"absolute inset-0 z-[1] cursor-ns-resize select-none\"\n        onMouseDown={handleGripMouseDown}\n        onTouchStart={handleGripTouchStart}\n        aria-hidden\n      />\n      <div\n        ref={gripRef}\n        className={cn(\n          \"pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200\",\n          isGripVisible || isGripDragging\n            ? \"opacity-100\"\n            : \"opacity-0 group-hover:opacity-100\",\n        )}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;AAYA,SAAgB,EAAc,EAC5B,YACA,kBACA,mBACA,uBACA,wBACA,2BACqB;CACrB,OACE,kBAAC,OAAD;EACE,WAAU;EACV,IAAG;EACH,SAAS;YAHX,CAME,kBAAC,OAAD;GACE,WAAU;GACV,aAAa;GACb,cAAc;GACd,eAAA;EACD,CAAA,GACD,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,EACT,wGACA,KAAiB,IACb,gBACA,mCACN;EACD,CAAA,CACE;;AAET"}
+{"version":3,"file":"chat-input-grip.js","names":[],"sources":["../../../../../src/components/features/chat/components/chat-input-grip.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"#/utils/utils\";\n\ninterface ChatInputGripProps {\n  gripRef: React.RefObject<HTMLDivElement | null>;\n  isGripVisible: boolean;\n  isGripDragging: boolean;\n  canResize: boolean;\n  handleTopEdgeClick: (e: React.MouseEvent) => void;\n  handleGripMouseDown: (e: React.MouseEvent) => void;\n  handleGripTouchStart: (e: React.TouchEvent) => void;\n}\n\nexport function ChatInputGrip({\n  gripRef,\n  isGripVisible,\n  isGripDragging,\n  canResize,\n  handleTopEdgeClick,\n  handleGripMouseDown,\n  handleGripTouchStart,\n}: ChatInputGripProps) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-0 left-0 w-full h-3 z-20 group\",\n        !canResize && \"pointer-events-none\",\n      )}\n      id=\"resize-grip\"\n      onClick={canResize ? handleTopEdgeClick : undefined}\n    >\n      {/* Resize hit target; 1px line is drawn at top-0 (flush with chat input box) */}\n      {canResize && (\n        <div\n          className=\"absolute inset-0 z-[1] cursor-ns-resize select-none\"\n          onMouseDown={handleGripMouseDown}\n          onTouchStart={handleGripTouchStart}\n          aria-hidden\n        />\n      )}\n      <div\n        ref={gripRef}\n        className={cn(\n          \"pointer-events-none absolute top-0 left-0 w-full h-px bg-white z-[2] transition-opacity duration-200\",\n          !canResize && \"opacity-0\",\n          canResize &&\n            (isGripVisible || isGripDragging\n              ? \"opacity-100\"\n              : \"opacity-0 group-hover:opacity-100\"),\n        )}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;AAaA,SAAgB,EAAc,EAC5B,YACA,kBACA,mBACA,cACA,uBACA,wBACA,2BACqB;CACrB,OACE,kBAAC,OAAD;EACE,WAAW,EACT,+CACA,CAAC,KAAa,qBAChB;EACA,IAAG;EACH,SAAS,IAAY,IAAqB,KAAA;YAN5C,CASG,KACC,kBAAC,OAAD;GACE,WAAU;GACV,aAAa;GACb,cAAc;GACd,eAAA;EACD,CAAA,GAEH,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,EACT,wGACA,CAAC,KAAa,aACd,MACG,KAAiB,IACd,gBACA,oCACR;EACD,CAAA,CACE;;AAET"}

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

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

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

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

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

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

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

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

package/dist/components/features/chat/components/context-window-meter.cjs

@@ -0,0 +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("../../../../node_modules/lucide-react/dist/esm/icons/gauge.cjs"),i=require("../../../../node_modules/lucide-react/dist/esm/icons/loader-circle.cjs"),a=require("../../../../node_modules/lucide-react/dist/esm/icons/minimize.cjs"),o=require("../../../../utils/utils.cjs"),s=require("../../../../utils/form-control-classes.cjs"),c=require("../../../shared/buttons/styled-tooltip.cjs"),l=require("../../context-menu/context-menu-list-item.cjs"),u=require("../../../../hooks/use-click-outside-element.cjs"),d=require("../../../../ui/divider.cjs"),f=require("../../../../hooks/use-select-conversation-tab.cjs"),p=require("../../../../hooks/use-context-window-usage.cjs"),m=require("../../../../utils/format-token-count.cjs"),h=require("../../../../hooks/use-compact-context-action.cjs"),g=require("../../conversation/conversation-name-context-menu-icon-text.cjs"),_=require("../../conversation/usage-panel/context-meter.cjs"),v=require("./context-window-ring.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");var x={neutral:`bg-foreground`,warning:`bg-amber-500`,danger:`bg-red-500`},S={neutral:`text-[var(--oh-muted)]`,warning:`text-amber-500`,danger:`text-red-500`};function C(){let{t:e}=t.useTranslation(`openhands`),C=p.useContextWindowUsage(),{navigateToTab:w}=f.useSelectConversationTab(),[T,E]=y.default.useState(!1),D=y.default.useRef(null),O=u.useClickOutsideElement(()=>E(!1),D),{handleCompact:k,isCompacting:A,isDisabled:j}=h.useCompactContextAction(C?.perTurnToken??0);if(!C)return null;let M=m.getContextWindowUsagePercentage(C.perTurnToken,C.contextWindow),N=Math.round(M),P=Math.max(0,100-N),F=`${N}% ${e(n.I18nKey.CONVERSATION$USED)} (${P}% ${e(n.I18nKey.CONVERSATION$LEFT)})`,I=`${m.formatCompactTokenCount(C.perTurnToken)} / ${m.formatCompactTokenCount(C.contextWindow)}`,L=_.getContextFillTone(M),R=()=>{E(!1),w(`usage`)};return(0,b.jsxs)(`div`,{className:`relative shrink-0`,children:[(0,b.jsx)(c.StyledTooltip,{content:e(n.I18nKey.CHAT_INTERFACE$SHOW_CONTEXT),placement:`top`,children:(0,b.jsx)(`button`,{ref:D,type:`button`,className:o.cn(s.chatInputIconButtonClassName,`size-8`),"aria-label":`${e(n.I18nKey.CHAT_INTERFACE$CONTEXT_WINDOW_METER_LABEL)}: ${F}`,"aria-expanded":T,"aria-haspopup":`dialog`,"data-testid":`context-window-meter`,onClick:e=>{e.preventDefault(),e.stopPropagation(),E(e=>!e)},children:(0,b.jsx)(v.ContextWindowRing,{percentage:M})})}),T&&(0,b.jsxs)(`div`,{ref:O,"data-testid":`context-window-meter-popover`,className:o.cn(`absolute bottom-full right-0 z-[60] mb-2 w-[280px]`,`flex flex-col gap-0.5 rounded-md border border-[var(--oh-border-subtle)] bg-tertiary px-1 py-1 shadow-lg`),children:[(0,b.jsxs)(`div`,{className:`flex flex-col gap-2 px-2 py-1.5`,children:[(0,b.jsxs)(`div`,{className:`flex items-center justify-between gap-2 text-sm`,children:[(0,b.jsx)(`span`,{className:`font-semibold text-[var(--oh-foreground)]`,children:e(n.I18nKey.CONVERSATION$CONTEXT_WINDOW)}),(0,b.jsx)(`span`,{className:o.cn(`shrink-0 text-xs`,S[L]),children:F})]}),(0,b.jsx)(`button`,{type:`button`,"data-testid":`context-window-meter-bar-button`,className:`relative h-1.5 w-full rounded-full cursor-pointer`,style:{backgroundColor:v.CONTEXT_WINDOW_TRACK_COLOR},"aria-label":e(n.I18nKey.COMMON$USAGE),onClick:e=>{e.preventDefault(),e.stopPropagation(),R()},children:(0,b.jsx)(`span`,{className:o.cn(`absolute inset-y-0 left-0 rounded-full transition-all duration-300`,x[L]),style:{width:`${Math.min(100,M)}%`}})}),(0,b.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,b.jsxs)(`button`,{type:`button`,"data-testid":`context-window-compact-button`,disabled:j,"aria-busy":A,"aria-label":e(n.I18nKey.CONVERSATION$COMPACT_CONTEXT),className:o.cn(`inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs`,`text-[var(--oh-muted)] hover:bg-[var(--oh-interactive-hover)] hover:text-[var(--oh-foreground)]`,`transition-colors disabled:cursor-not-allowed disabled:opacity-50`),onClick:e=>{e.preventDefault(),e.stopPropagation(),k()},children:[A?(0,b.jsx)(i.LoaderCircle,{className:`size-3 animate-spin`,"aria-hidden":!0}):(0,b.jsx)(a.Minimize,{className:`size-3`,"aria-hidden":!0}),(0,b.jsx)(`span`,{children:e(n.I18nKey.CONVERSATION$COMPACT_CONTEXT)})]}),(0,b.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)]`,children:I})]})]}),(0,b.jsx)(d.Divider,{inset:`menu`}),(0,b.jsx)(l.ContextMenuListItem,{testId:`context-window-plan-usage`,onClick:e=>{e.preventDefault(),e.stopPropagation(),R()},children:(0,b.jsx)(g.ConversationNameContextMenuIconText,{icon:(0,b.jsx)(r.Gauge,{size:16}),text:e(n.I18nKey.COMMON$USAGE)})})]})]})}exports.ContextWindowMeter=C;
+//# sourceMappingURL=context-window-meter.cjs.map