@openhands/agent-canvas 1.7.2 → 1.9.0

package/dist/components/features/settings/mcp-settings/mcp-server-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-server-form.js","names":[],"sources":["../../../../../src/components/features/settings/mcp-settings/mcp-server-form.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Trash2 } from \"lucide-react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { SettingsInput } from \"../settings-input\";\nimport { SettingsDropdownInput } from \"../settings-dropdown-input\";\nimport { BrandButton } from \"../brand-button\";\nimport { OptionalTag } from \"../optional-tag\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlMultilineFieldClassName } from \"#/utils/form-control-classes\";\nimport {\n  isValidMcpServerName,\n  MCP_SERVER_NAME_PATTERN,\n} from \"#/utils/mcp-server-name\";\nimport type {\n  MCPAuthCredential,\n  MCPAuthenticationConfig,\n  MCPOAuthClientAuthMethod,\n} from \"#/types/mcp-auth\";\nimport type { MCPServerConfig } from \"#/types/mcp-server\";\n\ntype MCPServerType = \"sse\" | \"stdio\" | \"shttp\";\ntype RemoteAuthMode = \"none\" | \"bearer\" | \"header\" | \"oauth2\";\ntype OAuthClientAuthMethodOption = \"auto\" | MCPOAuthClientAuthMethod;\n\nexport interface TestMessage {\n  ok: boolean;\n  text: string;\n}\n\ninterface MCPServerFormProps {\n  mode: \"add\" | \"edit\";\n  server?: MCPServerConfig;\n  existingServers?: MCPServerConfig[];\n  onSubmit: (server: MCPServerConfig) => void;\n  onCancel: () => void;\n  onDelete?: () => void;\n  isActionDisabled?: boolean;\n  onTest?: (server: MCPServerConfig) => void;\n  isTestPending?: boolean;\n  testMessage?: TestMessage | null;\n}\n\nexport function MCPServerForm({\n  mode,\n  server,\n  existingServers,\n  onSubmit,\n  onCancel,\n  onDelete,\n  isActionDisabled = false,\n  onTest,\n  isTestPending = false,\n  testMessage = null,\n}: MCPServerFormProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [serverType, setServerType] = React.useState<MCPServerType>(\n    server?.type || \"sse\",\n  );\n  const [authMode, setAuthMode] = React.useState<RemoteAuthMode>(() => {\n    if (server?.auth?.strategy === \"oauth2\") return \"oauth2\";\n    if (server?.auth?.strategy === \"header\") return \"header\";\n    if (\n      server?.auth?.strategy === \"bearer\" ||\n      server?.auth?.strategy === \"api_key\"\n    ) {\n      return \"bearer\";\n    }\n    return \"none\";\n  });\n  const [oauthClientAuthMethod, setOAuthClientAuthMethod] =\n    React.useState<OAuthClientAuthMethodOption>(() =>\n      server?.auth?.strategy === \"oauth2\"\n        ? (server.auth.authentication?.client_auth_method ?? \"auto\")\n        : \"auto\",\n    );\n  const [error, setError] = React.useState<string | null>(null);\n  const formRef = React.useRef<HTMLFormElement>(null);\n\n  const serverTypeOptions = [\n    { key: \"sse\", label: t(I18nKey.SETTINGS$MCP_SERVER_TYPE_SSE) },\n    { key: \"stdio\", label: t(I18nKey.SETTINGS$MCP_SERVER_TYPE_STDIO) },\n    { key: \"shttp\", label: t(I18nKey.SETTINGS$MCP_SERVER_TYPE_SHTTP) },\n  ];\n  const authModeOptions = [\n    { key: \"none\", label: t(I18nKey.SETTINGS$MCP_AUTH_MODE_NONE) },\n    { key: \"bearer\", label: t(I18nKey.SETTINGS$MCP_AUTH_MODE_BEARER) },\n    { key: \"header\", label: t(I18nKey.SETTINGS$MCP_AUTH_MODE_HEADER) },\n    { key: \"oauth2\", label: t(I18nKey.SETTINGS$MCP_AUTH_MODE_OAUTH) },\n  ];\n  const oauthClientAuthMethodOptions = [\n    { key: \"auto\", label: t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_AUTO) },\n    { key: \"none\", label: t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_NONE) },\n    {\n      key: \"client_secret_post\",\n      label: t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_SECRET_POST),\n    },\n    {\n      key: \"client_secret_basic\",\n      label: t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_SECRET_BASIC),\n    },\n    {\n      key: \"private_key_jwt\",\n      label: t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_PRIVATE_KEY_JWT),\n    },\n  ];\n\n  const validateUrl = (url: string): string | null => {\n    if (!url) return t(I18nKey.SETTINGS$MCP_ERROR_URL_REQUIRED);\n    try {\n      const urlObj = new URL(url);\n      if (![\"http:\", \"https:\"].includes(urlObj.protocol)) {\n        return t(I18nKey.SETTINGS$MCP_ERROR_URL_INVALID_PROTOCOL);\n      }\n    } catch {\n      return t(I18nKey.SETTINGS$MCP_ERROR_URL_INVALID);\n    }\n    return null;\n  };\n\n  const validateName = (name: string): string | null => {\n    if (!name) return t(I18nKey.SETTINGS$MCP_ERROR_NAME_REQUIRED);\n    if (!isValidMcpServerName(name)) {\n      return t(I18nKey.SETTINGS$MCP_ERROR_NAME_INVALID);\n    }\n    return null;\n  };\n\n  const validateNameUniqueness = (name: string): string | null => {\n    if (!existingServers) return null;\n    const shouldCheckUniqueness =\n      mode === \"add\" || (mode === \"edit\" && server?.name !== name);\n    if (!shouldCheckUniqueness) return null;\n\n    const existingStdioNames = existingServers\n      .filter((s) => s.type === \"stdio\")\n      .map((s) => s.name)\n      .filter(Boolean);\n    if (existingStdioNames.includes(name)) {\n      return t(I18nKey.SETTINGS$MCP_ERROR_NAME_DUPLICATE);\n    }\n    return null;\n  };\n\n  const validateCommand = (command: string): string | null => {\n    if (!command) return t(I18nKey.SETTINGS$MCP_ERROR_COMMAND_REQUIRED);\n    if (command.includes(\" \")) {\n      return t(I18nKey.SETTINGS$MCP_ERROR_COMMAND_NO_SPACES);\n    }\n    return null;\n  };\n\n  const validateUrlUniqueness = (url: string): string | null => {\n    if (!existingServers) return null;\n    const originalUrl = server?.url;\n    const changed = mode === \"add\" || (mode === \"edit\" && originalUrl !== url);\n    if (!changed) return null;\n    // For URL-based servers (sse/shttp), ensure URL is unique across both types\n    const exists = existingServers.some(\n      (s) => (s.type === \"sse\" || s.type === \"shttp\") && s.url === url,\n    );\n    if (exists) return t(I18nKey.SETTINGS$MCP_ERROR_URL_DUPLICATE);\n    return null;\n  };\n\n  const validateEnvFormat = (envString: string): string | null => {\n    if (!envString.trim()) return null;\n    const lines = envString.split(\"\\n\");\n    for (let i = 0; i < lines.length; i += 1) {\n      const trimmed = lines[i].trim();\n      if (trimmed) {\n        const eq = trimmed.indexOf(\"=\");\n        if (eq === -1) return t(I18nKey.SETTINGS$MCP_ERROR_ENV_INVALID_FORMAT);\n        const key = trimmed.substring(0, eq).trim();\n        if (!key) return t(I18nKey.SETTINGS$MCP_ERROR_ENV_INVALID_FORMAT);\n      }\n    }\n    return null;\n  };\n\n  const validateRemoteAuth = (formData: FormData): string | null => {\n    if (authMode === \"header\") {\n      const headerString = formData.get(\"headers\")?.toString() || \"\";\n      if (!headerString.trim())\n        return t(I18nKey.SETTINGS$MCP_ERROR_HEADER_REQUIRED);\n      return validateEnvFormat(headerString);\n    }\n    if (authMode === \"oauth2\") {\n      const clientId = formData.get(\"oauth_client_id\")?.toString().trim();\n      const clientSecret = formData\n        .get(\"oauth_client_secret\")\n        ?.toString()\n        .trim();\n      if (clientSecret && !clientId) {\n        return t(I18nKey.SETTINGS$MCP_ERROR_OAUTH_SECRET_REQUIRES_ID);\n      }\n    }\n    return null;\n  };\n\n  const validateTimeout = (timeoutStr: string): string | null => {\n    if (!timeoutStr.trim()) return null; // Optional field\n\n    const timeout = parseInt(timeoutStr.trim(), 10);\n    if (Number.isNaN(timeout)) {\n      return t(I18nKey.SETTINGS$MCP_ERROR_TIMEOUT_INVALID_NUMBER);\n    }\n    if (timeout <= 0) {\n      return t(I18nKey.SETTINGS$MCP_ERROR_TIMEOUT_POSITIVE);\n    }\n    if (timeout > 3600) {\n      return t(I18nKey.SETTINGS$MCP_ERROR_TIMEOUT_MAX_EXCEEDED);\n    }\n    return null;\n  };\n\n  const validateStdioServer = (formData: FormData): string | null => {\n    const name = formData.get(\"name\")?.toString().trim() || \"\";\n    const command = formData.get(\"command\")?.toString().trim() || \"\";\n    const envString = formData.get(\"env\")?.toString() || \"\";\n\n    const nameError = validateName(name);\n    if (nameError) return nameError;\n\n    const uniquenessError = validateNameUniqueness(name);\n    if (uniquenessError) return uniquenessError;\n\n    const commandError = validateCommand(command);\n    if (commandError) return commandError;\n\n    // Validate environment variable format\n    const envError = validateEnvFormat(envString);\n    if (envError) return envError;\n\n    return null;\n  };\n\n  const validateForm = (formData: FormData): string | null => {\n    if (serverType === \"sse\" || serverType === \"shttp\") {\n      const url = formData.get(\"url\")?.toString().trim() || \"\";\n      const urlError = validateUrl(url);\n      if (urlError) return urlError;\n      const urlDupError = validateUrlUniqueness(url);\n      if (urlDupError) return urlDupError;\n\n      // The name is optional, but when provided it becomes the mcp_config\n      // key (and the reference used in mcp_server_refs), so hold it to the\n      // same safe-identifier rule as stdio names.\n      const name = formData.get(\"name\")?.toString().trim() || \"\";\n      if (name && !isValidMcpServerName(name)) {\n        return t(I18nKey.SETTINGS$MCP_ERROR_NAME_INVALID);\n      }\n\n      // Validate timeout for SHTTP servers only\n      if (serverType === \"shttp\") {\n        const timeoutStr = formData.get(\"timeout\")?.toString() || \"\";\n        const timeoutError = validateTimeout(timeoutStr);\n        if (timeoutError) return timeoutError;\n      }\n\n      return validateRemoteAuth(formData);\n    }\n\n    if (serverType === \"stdio\") {\n      return validateStdioServer(formData);\n    }\n\n    return null;\n  };\n\n  const parseEnvironmentVariables = (\n    envString: string,\n  ): Record<string, string> => {\n    const env: Record<string, string> = {};\n    const input = envString.trim();\n    if (!input) return env;\n\n    for (const line of input.split(\"\\n\")) {\n      const trimmed = line.trim();\n      const eq = trimmed.indexOf(\"=\");\n      const key = eq >= 0 ? trimmed.substring(0, eq).trim() : \"\";\n      if (trimmed && eq !== -1 && key) {\n        env[key] = trimmed.substring(eq + 1).trim();\n      }\n    }\n    return env;\n  };\n\n  const formatEnvironmentVariables = (\n    env?: Record<string, string> | null,\n  ): string => {\n    if (!env) return \"\";\n    return Object.entries(env)\n      .map(([key, value]) => `${key}=${value}`)\n      .join(\"\\n\");\n  };\n\n  const editableAuthValue = (auth: MCPAuthCredential | undefined): string => {\n    if (auth?.strategy === \"bearer\" || auth?.strategy === \"api_key\") {\n      return auth.value ?? \"\";\n    }\n    return \"\";\n  };\n\n  const editableHeaderValue = (auth: MCPAuthCredential | undefined): string => {\n    if (auth?.strategy !== \"header\") return \"\";\n    return formatEnvironmentVariables(auth.headers);\n  };\n\n  const oauthAuthentication =\n    server?.auth?.strategy === \"oauth2\"\n      ? server.auth.authentication\n      : undefined;\n  const oauthState =\n    server?.auth?.strategy === \"oauth2\" ? server.auth.state : undefined;\n\n  const authFromFormData = (\n    formData: FormData,\n  ): MCPAuthCredential | undefined => {\n    if (authMode === \"none\") return undefined;\n    if (authMode === \"bearer\") {\n      const value = formData.get(\"api_key\")?.toString().trim();\n      if (!value) return undefined;\n      if (server?.auth?.strategy === \"api_key\") {\n        return { ...server.auth, value };\n      }\n      return { strategy: \"bearer\", value };\n    }\n    if (authMode === \"header\") {\n      const headers = parseEnvironmentVariables(\n        formData.get(\"headers\")?.toString() || \"\",\n      );\n      return { strategy: \"header\", headers };\n    }\n\n    const scopes = formData.get(\"oauth_scopes\")?.toString().trim();\n    const clientId = formData.get(\"oauth_client_id\")?.toString().trim();\n    const clientSecret = formData.get(\"oauth_client_secret\")?.toString().trim();\n    const authentication: MCPAuthenticationConfig = {\n      type: \"oauth\",\n      ...(oauthClientAuthMethod !== \"auto\" && {\n        client_auth_method: oauthClientAuthMethod,\n      }),\n      ...(scopes && { scopes }),\n      ...(clientId && { client_id: clientId }),\n      ...(clientSecret && { client_secret: clientSecret }),\n    };\n    return {\n      strategy: \"oauth2\",\n      authentication,\n      ...(oauthState && { state: oauthState }),\n    };\n  };\n\n  const buildConfig = (formData: FormData): MCPServerConfig => {\n    const baseConfig = {\n      id: server?.id || `${serverType}-${Date.now()}`,\n      type: serverType,\n    };\n\n    if (serverType === \"sse\" || serverType === \"shttp\") {\n      const name = formData.get(\"name\")?.toString().trim();\n      const url = formData.get(\"url\")?.toString().trim();\n      const timeoutStr = formData.get(\"timeout\")?.toString().trim();\n      const auth = authFromFormData(formData);\n\n      const serverConfig: MCPServerConfig = {\n        ...baseConfig,\n        ...(name && { name }),\n        url: url!,\n        ...(auth && { auth }),\n      };\n\n      // Only add timeout for SHTTP servers\n      if (serverType === \"shttp\" && timeoutStr) {\n        const timeoutValue = parseInt(timeoutStr, 10);\n        if (!Number.isNaN(timeoutValue)) {\n          serverConfig.timeout = timeoutValue;\n        }\n      }\n\n      return serverConfig;\n    }\n\n    // stdio\n    const name = formData.get(\"name\")?.toString().trim();\n    const command = formData.get(\"command\")?.toString().trim();\n    const argsString = formData.get(\"args\")?.toString().trim();\n    const envString = formData.get(\"env\")?.toString().trim();\n\n    const args = argsString\n      ? argsString\n          .split(\"\\n\")\n          .map((arg) => arg.trim())\n          .filter(Boolean)\n      : [];\n    const env = parseEnvironmentVariables(envString || \"\");\n\n    return {\n      ...baseConfig,\n      name: name!,\n      command: command!,\n      ...(args.length > 0 && { args }),\n      ...(Object.keys(env).length > 0 && { env }),\n    };\n  };\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setError(null);\n\n    const formData = new FormData(event.currentTarget);\n    const validationError = validateForm(formData);\n\n    if (validationError) {\n      setError(validationError);\n      return;\n    }\n\n    onSubmit(buildConfig(formData));\n  };\n\n  const handleTestClick = () => {\n    if (!onTest || !formRef.current) return;\n    setError(null);\n    const formData = new FormData(formRef.current);\n    const validationError = validateForm(formData);\n    if (validationError) {\n      setError(validationError);\n      return;\n    }\n    onTest(buildConfig(formData));\n  };\n\n  const formTestId =\n    mode === \"add\" ? \"add-mcp-server-form\" : \"edit-mcp-server-form\";\n\n  return (\n    <form\n      ref={formRef}\n      data-testid={formTestId}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col items-start gap-6\"\n      noValidate\n    >\n      {mode === \"add\" && (\n        <SettingsDropdownInput\n          testId=\"server-type-dropdown\"\n          name=\"server-type\"\n          label={t(I18nKey.SETTINGS$MCP_SERVER_TYPE)}\n          items={serverTypeOptions}\n          selectedKey={serverType}\n          onSelectionChange={(key) => setServerType(key as MCPServerType)}\n          onInputChange={() => {}} // Prevent input changes\n          isClearable={false}\n          allowsCustomValue={false}\n          required\n          wrapperClassName=\"w-full min-w-0\"\n        />\n      )}\n\n      {error && <p className=\"text-red-500 text-sm\">{error}</p>}\n\n      {(serverType === \"sse\" || serverType === \"shttp\") && (\n        <>\n          <SettingsInput\n            testId=\"server-name-input\"\n            name=\"name\"\n            type=\"text\"\n            label={t(I18nKey.SETTINGS$MCP_SERVER_NAME)}\n            className=\"w-full min-w-0\"\n            showOptionalTag\n            defaultValue={server?.name || \"\"}\n            // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n            placeholder=\"my_search_server\"\n            pattern={MCP_SERVER_NAME_PATTERN.source}\n          />\n\n          <SettingsInput\n            testId=\"url-input\"\n            name=\"url\"\n            type=\"url\"\n            label={t(I18nKey.SETTINGS$MCP_URL)}\n            className=\"w-full min-w-0\"\n            required\n            defaultValue={server?.url || \"\"}\n            // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n            placeholder=\"https://api.example.com\"\n          />\n\n          <SettingsDropdownInput\n            testId=\"auth-mode-dropdown\"\n            name=\"auth-mode\"\n            label={t(I18nKey.SETTINGS$MCP_AUTHENTICATION)}\n            items={authModeOptions}\n            selectedKey={authMode}\n            onSelectionChange={(key) => setAuthMode(key as RemoteAuthMode)}\n            onInputChange={() => {}}\n            isClearable={false}\n            allowsCustomValue={false}\n            wrapperClassName=\"w-full min-w-0\"\n          />\n\n          {authMode === \"bearer\" && (\n            <SettingsInput\n              testId=\"api-key-input\"\n              name=\"api_key\"\n              type=\"password\"\n              label={t(I18nKey.SETTINGS$MCP_API_KEY)}\n              className=\"w-full min-w-0\"\n              required\n              defaultValue={editableAuthValue(server?.auth)}\n              placeholder={t(I18nKey.SETTINGS$MCP_API_KEY_PLACEHOLDER)}\n            />\n          )}\n\n          {authMode === \"header\" && (\n            <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n              <span className=\"text-sm\">{t(I18nKey.SETTINGS$MCP_HEADERS)}</span>\n              <textarea\n                data-testid=\"headers-input\"\n                name=\"headers\"\n                rows={4}\n                defaultValue={editableHeaderValue(server?.auth)}\n                placeholder={t(I18nKey.SETTINGS$MCP_HEADERS_PLACEHOLDER)}\n                className={cn(\n                  formControlMultilineFieldClassName,\n                  \"resize-none placeholder:italic\",\n                  \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n                )}\n              />\n            </label>\n          )}\n\n          {authMode === \"oauth2\" && (\n            <>\n              <SettingsDropdownInput\n                testId=\"oauth-client-auth-method-dropdown\"\n                name=\"oauth_client_auth_method\"\n                label={t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH)}\n                items={oauthClientAuthMethodOptions}\n                selectedKey={oauthClientAuthMethod}\n                onSelectionChange={(key) =>\n                  setOAuthClientAuthMethod(key as OAuthClientAuthMethodOption)\n                }\n                onInputChange={() => {}}\n                isClearable={false}\n                allowsCustomValue={false}\n                wrapperClassName=\"w-full min-w-0\"\n              />\n              <SettingsInput\n                testId=\"oauth-client-id-input\"\n                name=\"oauth_client_id\"\n                type=\"text\"\n                label={t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_ID)}\n                className=\"w-full min-w-0\"\n                showOptionalTag\n                defaultValue={oauthAuthentication?.client_id || \"\"}\n                placeholder={t(\n                  I18nKey.SETTINGS$MCP_OAUTH_CLIENT_ID_PLACEHOLDER,\n                )}\n              />\n              <SettingsInput\n                testId=\"oauth-client-secret-input\"\n                name=\"oauth_client_secret\"\n                type=\"password\"\n                label={t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_SECRET)}\n                className=\"w-full min-w-0\"\n                showOptionalTag\n                defaultValue={oauthAuthentication?.client_secret || \"\"}\n                placeholder={t(\n                  I18nKey.SETTINGS$MCP_OAUTH_CLIENT_SECRET_PLACEHOLDER,\n                )}\n              />\n              <SettingsInput\n                testId=\"oauth-scopes-input\"\n                name=\"oauth_scopes\"\n                type=\"text\"\n                label={t(I18nKey.SETTINGS$MCP_OAUTH_SCOPES)}\n                className=\"w-full min-w-0\"\n                showOptionalTag\n                defaultValue={\n                  Array.isArray(oauthAuthentication?.scopes)\n                    ? oauthAuthentication.scopes.join(\" \")\n                    : oauthAuthentication?.scopes || \"\"\n                }\n                placeholder={t(I18nKey.SETTINGS$MCP_OAUTH_SCOPES_PLACEHOLDER)}\n              />\n            </>\n          )}\n\n          {serverType === \"shttp\" && (\n            <SettingsInput\n              testId=\"timeout-input\"\n              name=\"timeout\"\n              type=\"number\"\n              label={t(I18nKey.SETTINGS$MCP_TIMEOUT_LABEL)}\n              className=\"w-full min-w-0\"\n              showOptionalTag\n              defaultValue={server?.timeout?.toString() || \"\"}\n              placeholder=\"60\"\n              min={1}\n              max={3600}\n            />\n          )}\n        </>\n      )}\n\n      {serverType === \"stdio\" && (\n        <>\n          <SettingsInput\n            testId=\"name-input\"\n            name=\"name\"\n            type=\"text\"\n            label={t(I18nKey.SETTINGS$MCP_NAME)}\n            className=\"w-full min-w-0\"\n            required\n            defaultValue={server?.name || \"\"}\n            // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n            placeholder=\"my_mcp_server\"\n            pattern={MCP_SERVER_NAME_PATTERN.source}\n          />\n\n          <SettingsInput\n            testId=\"command-input\"\n            name=\"command\"\n            type=\"text\"\n            label={t(I18nKey.SETTINGS$MCP_COMMAND)}\n            className=\"w-full min-w-0\"\n            required\n            defaultValue={server?.command || \"\"}\n            // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n            placeholder=\"npx\"\n          />\n\n          <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-sm\">\n                {t(I18nKey.SETTINGS$MCP_COMMAND_ARGUMENTS)}\n              </span>\n              <OptionalTag />\n            </div>\n            <textarea\n              data-testid=\"args-input\"\n              name=\"args\"\n              rows={3}\n              defaultValue={server?.args?.join(\"\\n\") || \"\"}\n              // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n              placeholder=\"arg1&#10;arg2&#10;arg3\"\n              className={cn(\n                formControlMultilineFieldClassName,\n                \"resize-none placeholder:italic\",\n                \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n              )}\n            />\n            <p className=\"text-xs text-tertiary-alt\">\n              {t(I18nKey.SETTINGS$MCP_COMMAND_ARGUMENTS_HELP)}\n            </p>\n          </label>\n\n          <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-sm\">\n                {t(I18nKey.SETTINGS$MCP_ENVIRONMENT_VARIABLES)}\n              </span>\n              <OptionalTag />\n            </div>\n            <textarea\n              data-testid=\"env-input\"\n              name=\"env\"\n              rows={4}\n              defaultValue={formatEnvironmentVariables(server?.env)}\n              // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n              placeholder=\"KEY1=value1&#10;KEY2=value2\"\n              className={cn(\n                formControlMultilineFieldClassName,\n                \"resize-none placeholder:italic\",\n                \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n              )}\n            />\n          </label>\n        </>\n      )}\n\n      {testMessage && (\n        <p\n          data-testid=\"mcp-test-message\"\n          className={\n            testMessage.ok\n              ? \"text-sm text-green-500 whitespace-pre-wrap\"\n              : \"text-sm text-red-500 whitespace-pre-wrap\"\n          }\n        >\n          {testMessage.text}\n        </p>\n      )}\n\n      <div\n        className={cn(\n          \"flex w-full items-center gap-2\",\n          onDelete ? \"justify-between\" : \"justify-end\",\n        )}\n      >\n        {onDelete ? (\n          <BrandButton\n            testId=\"mcp-custom-editor-delete\"\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onDelete}\n            isDisabled={isActionDisabled}\n            startContent={\n              <Trash2 aria-hidden className=\"size-4\" strokeWidth={2} />\n            }\n          >\n            {t(I18nKey.BUTTON$DELETE)}\n          </BrandButton>\n        ) : null}\n        <div className=\"flex items-center gap-2\">\n          <BrandButton\n            testId=\"cancel-button\"\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onCancel}\n            isDisabled={isActionDisabled}\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          {onTest && (\n            <BrandButton\n              testId=\"mcp-test-connection\"\n              type=\"button\"\n              variant=\"secondary\"\n              onClick={handleTestClick}\n              isDisabled={isActionDisabled || isTestPending}\n            >\n              {isTestPending\n                ? t(I18nKey.MCP$VERIFYING)\n                : t(I18nKey.MCP$TEST_BUTTON)}\n            </BrandButton>\n          )}\n          <BrandButton\n            testId=\"submit-button\"\n            type=\"submit\"\n            variant=\"primary\"\n            isDisabled={isActionDisabled || isTestPending}\n          >\n            {mode === \"add\" && t(I18nKey.SETTINGS$MCP_ADD_SERVER)}\n            {mode === \"edit\" && t(I18nKey.SETTINGS$MCP_SAVE_SERVER)}\n          </BrandButton>\n        </div>\n      </div>\n    </form>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"mcp-server-form.js","names":[],"sources":["../../../../../src/components/features/settings/mcp-settings/mcp-server-form.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Trash2 } from \"lucide-react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { SettingsInput } from \"../settings-input\";\nimport { SettingsDropdownInput } from \"../settings-dropdown-input\";\nimport { BrandButton } from \"../brand-button\";\nimport { OptionalTag } from \"../optional-tag\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlMultilineFieldClassName } from \"#/utils/form-control-classes\";\nimport {\n  isValidMcpServerName,\n  MCP_SERVER_NAME_PATTERN,\n} from \"#/utils/mcp-server-name\";\nimport type {\n  MCPAuthCredential,\n  MCPAuthenticationConfig,\n  MCPOAuthClientAuthMethod,\n} from \"#/types/mcp-auth\";\nimport type { MCPServerConfig } from \"#/types/mcp-server\";\n\ntype MCPServerType = \"sse\" | \"stdio\" | \"shttp\";\ntype RemoteAuthMode = \"none\" | \"bearer\" | \"header\" | \"oauth2\";\ntype OAuthClientAuthMethodOption = \"auto\" | MCPOAuthClientAuthMethod;\n\nexport interface TestMessage {\n  ok: boolean;\n  text: string;\n}\n\ninterface MCPServerFormProps {\n  mode: \"add\" | \"edit\";\n  server?: MCPServerConfig;\n  existingServers?: MCPServerConfig[];\n  onSubmit: (server: MCPServerConfig) => void;\n  onCancel: () => void;\n  onDelete?: () => void;\n  isActionDisabled?: boolean;\n  onTest?: (server: MCPServerConfig) => void;\n  isTestPending?: boolean;\n  testMessage?: TestMessage | null;\n}\n\nexport function MCPServerForm({\n  mode,\n  server,\n  existingServers,\n  onSubmit,\n  onCancel,\n  onDelete,\n  isActionDisabled = false,\n  onTest,\n  isTestPending = false,\n  testMessage = null,\n}: MCPServerFormProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [serverType, setServerType] = React.useState<MCPServerType>(\n    server?.type || \"sse\",\n  );\n  const [authMode, setAuthMode] = React.useState<RemoteAuthMode>(() => {\n    if (server?.auth?.strategy === \"oauth2\") return \"oauth2\";\n    if (server?.auth?.strategy === \"header\") return \"header\";\n    if (\n      server?.auth?.strategy === \"bearer\" ||\n      server?.auth?.strategy === \"api_key\"\n    ) {\n      return \"bearer\";\n    }\n    return \"none\";\n  });\n  const [oauthClientAuthMethod, setOAuthClientAuthMethod] =\n    React.useState<OAuthClientAuthMethodOption>(() =>\n      server?.auth?.strategy === \"oauth2\"\n        ? (server.auth.authentication?.client_auth_method ?? \"auto\")\n        : \"auto\",\n    );\n  const [error, setError] = React.useState<string | null>(null);\n  const formRef = React.useRef<HTMLFormElement>(null);\n\n  const serverTypeOptions = [\n    { key: \"sse\", label: t(I18nKey.SETTINGS$MCP_SERVER_TYPE_SSE) },\n    { key: \"stdio\", label: t(I18nKey.SETTINGS$MCP_SERVER_TYPE_STDIO) },\n    { key: \"shttp\", label: t(I18nKey.SETTINGS$MCP_SERVER_TYPE_SHTTP) },\n  ];\n  const authModeOptions = [\n    { key: \"none\", label: t(I18nKey.SETTINGS$MCP_AUTH_MODE_NONE) },\n    { key: \"bearer\", label: t(I18nKey.SETTINGS$MCP_AUTH_MODE_BEARER) },\n    { key: \"header\", label: t(I18nKey.SETTINGS$MCP_AUTH_MODE_HEADER) },\n    { key: \"oauth2\", label: t(I18nKey.SETTINGS$MCP_AUTH_MODE_OAUTH) },\n  ];\n  const oauthClientAuthMethodOptions = [\n    { key: \"auto\", label: t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_AUTO) },\n    { key: \"none\", label: t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_NONE) },\n    {\n      key: \"client_secret_post\",\n      label: t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_SECRET_POST),\n    },\n    {\n      key: \"client_secret_basic\",\n      label: t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_SECRET_BASIC),\n    },\n    {\n      key: \"private_key_jwt\",\n      label: t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH_PRIVATE_KEY_JWT),\n    },\n  ];\n\n  const validateUrl = (url: string): string | null => {\n    if (!url) return t(I18nKey.SETTINGS$MCP_ERROR_URL_REQUIRED);\n    try {\n      const urlObj = new URL(url);\n      if (![\"http:\", \"https:\"].includes(urlObj.protocol)) {\n        return t(I18nKey.SETTINGS$MCP_ERROR_URL_INVALID_PROTOCOL);\n      }\n    } catch {\n      return t(I18nKey.SETTINGS$MCP_ERROR_URL_INVALID);\n    }\n    return null;\n  };\n\n  const validateName = (name: string): string | null => {\n    if (!name) return t(I18nKey.SETTINGS$MCP_ERROR_NAME_REQUIRED);\n    if (!isValidMcpServerName(name)) {\n      return t(I18nKey.SETTINGS$MCP_ERROR_NAME_INVALID);\n    }\n    return null;\n  };\n\n  const validateNameUniqueness = (name: string): string | null => {\n    if (!existingServers) return null;\n    const shouldCheckUniqueness =\n      mode === \"add\" || (mode === \"edit\" && server?.name !== name);\n    if (!shouldCheckUniqueness) return null;\n\n    const existingStdioNames = existingServers\n      .filter((s) => s.type === \"stdio\")\n      .map((s) => s.name)\n      .filter(Boolean);\n    if (existingStdioNames.includes(name)) {\n      return t(I18nKey.SETTINGS$MCP_ERROR_NAME_DUPLICATE);\n    }\n    return null;\n  };\n\n  const validateCommand = (command: string): string | null => {\n    if (!command) return t(I18nKey.SETTINGS$MCP_ERROR_COMMAND_REQUIRED);\n    if (command.includes(\" \")) {\n      return t(I18nKey.SETTINGS$MCP_ERROR_COMMAND_NO_SPACES);\n    }\n    return null;\n  };\n\n  const validateUrlUniqueness = (url: string): string | null => {\n    if (!existingServers) return null;\n    const originalUrl = server?.url;\n    const changed = mode === \"add\" || (mode === \"edit\" && originalUrl !== url);\n    if (!changed) return null;\n    // For URL-based servers (sse/shttp), ensure URL is unique across both types\n    const exists = existingServers.some(\n      (s) => (s.type === \"sse\" || s.type === \"shttp\") && s.url === url,\n    );\n    if (exists) return t(I18nKey.SETTINGS$MCP_ERROR_URL_DUPLICATE);\n    return null;\n  };\n\n  const validateEnvFormat = (envString: string): string | null => {\n    if (!envString.trim()) return null;\n    const lines = envString.split(\"\\n\");\n    for (let i = 0; i < lines.length; i += 1) {\n      const trimmed = lines[i].trim();\n      if (trimmed) {\n        const eq = trimmed.indexOf(\"=\");\n        if (eq === -1) return t(I18nKey.SETTINGS$MCP_ERROR_ENV_INVALID_FORMAT);\n        const key = trimmed.substring(0, eq).trim();\n        if (!key) return t(I18nKey.SETTINGS$MCP_ERROR_ENV_INVALID_FORMAT);\n      }\n    }\n    return null;\n  };\n\n  const validateRemoteAuth = (formData: FormData): string | null => {\n    if (authMode === \"header\") {\n      const headerString = formData.get(\"headers\")?.toString() || \"\";\n      if (!headerString.trim())\n        return t(I18nKey.SETTINGS$MCP_ERROR_HEADER_REQUIRED);\n      return validateEnvFormat(headerString);\n    }\n    if (authMode === \"oauth2\") {\n      const clientId = formData.get(\"oauth_client_id\")?.toString().trim();\n      const clientSecret = formData\n        .get(\"oauth_client_secret\")\n        ?.toString()\n        .trim();\n      if (clientSecret && !clientId) {\n        return t(I18nKey.SETTINGS$MCP_ERROR_OAUTH_SECRET_REQUIRES_ID);\n      }\n    }\n    return null;\n  };\n\n  const validateTimeout = (timeoutStr: string): string | null => {\n    if (!timeoutStr.trim()) return null; // Optional field\n\n    const timeout = parseInt(timeoutStr.trim(), 10);\n    if (Number.isNaN(timeout)) {\n      return t(I18nKey.SETTINGS$MCP_ERROR_TIMEOUT_INVALID_NUMBER);\n    }\n    if (timeout <= 0) {\n      return t(I18nKey.SETTINGS$MCP_ERROR_TIMEOUT_POSITIVE);\n    }\n    if (timeout > 3600) {\n      return t(I18nKey.SETTINGS$MCP_ERROR_TIMEOUT_MAX_EXCEEDED);\n    }\n    return null;\n  };\n\n  const validateStdioServer = (formData: FormData): string | null => {\n    const name = formData.get(\"name\")?.toString().trim() || \"\";\n    const command = formData.get(\"command\")?.toString().trim() || \"\";\n    const envString = formData.get(\"env\")?.toString() || \"\";\n\n    const nameError = validateName(name);\n    if (nameError) return nameError;\n\n    const uniquenessError = validateNameUniqueness(name);\n    if (uniquenessError) return uniquenessError;\n\n    const commandError = validateCommand(command);\n    if (commandError) return commandError;\n\n    // Validate environment variable format\n    const envError = validateEnvFormat(envString);\n    if (envError) return envError;\n\n    return null;\n  };\n\n  const validateForm = (formData: FormData): string | null => {\n    if (serverType === \"sse\" || serverType === \"shttp\") {\n      const url = formData.get(\"url\")?.toString().trim() || \"\";\n      const urlError = validateUrl(url);\n      if (urlError) return urlError;\n      const urlDupError = validateUrlUniqueness(url);\n      if (urlDupError) return urlDupError;\n\n      // The name is optional, but when provided it becomes the mcp_config\n      // key (and the reference used in mcp_server_refs), so hold it to the\n      // same safe-identifier rule as stdio names.\n      const name = formData.get(\"name\")?.toString().trim() || \"\";\n      if (name && !isValidMcpServerName(name)) {\n        return t(I18nKey.SETTINGS$MCP_ERROR_NAME_INVALID);\n      }\n\n      // Validate timeout for SHTTP servers only\n      if (serverType === \"shttp\") {\n        const timeoutStr = formData.get(\"timeout\")?.toString() || \"\";\n        const timeoutError = validateTimeout(timeoutStr);\n        if (timeoutError) return timeoutError;\n      }\n\n      return validateRemoteAuth(formData);\n    }\n\n    if (serverType === \"stdio\") {\n      return validateStdioServer(formData);\n    }\n\n    return null;\n  };\n\n  const parseEnvironmentVariables = (\n    envString: string,\n  ): Record<string, string> => {\n    const env: Record<string, string> = {};\n    const input = envString.trim();\n    if (!input) return env;\n\n    for (const line of input.split(\"\\n\")) {\n      const trimmed = line.trim();\n      const eq = trimmed.indexOf(\"=\");\n      const key = eq >= 0 ? trimmed.substring(0, eq).trim() : \"\";\n      if (trimmed && eq !== -1 && key) {\n        env[key] = trimmed.substring(eq + 1).trim();\n      }\n    }\n    return env;\n  };\n\n  const formatEnvironmentVariables = (\n    env?: Record<string, string> | null,\n  ): string => {\n    if (!env) return \"\";\n    return Object.entries(env)\n      .map(([key, value]) => `${key}=${value}`)\n      .join(\"\\n\");\n  };\n\n  const editableAuthValue = (auth: MCPAuthCredential | undefined): string => {\n    if (auth?.strategy === \"bearer\" || auth?.strategy === \"api_key\") {\n      return auth.value ?? \"\";\n    }\n    return \"\";\n  };\n\n  const editableHeaderValue = (auth: MCPAuthCredential | undefined): string => {\n    if (auth?.strategy !== \"header\") return \"\";\n    return formatEnvironmentVariables(auth.headers);\n  };\n\n  const oauthAuthentication =\n    server?.auth?.strategy === \"oauth2\"\n      ? server.auth.authentication\n      : undefined;\n  const oauthState =\n    server?.auth?.strategy === \"oauth2\" ? server.auth.state : undefined;\n\n  const authFromFormData = (\n    formData: FormData,\n  ): MCPAuthCredential | undefined => {\n    if (authMode === \"none\") return undefined;\n    if (authMode === \"bearer\") {\n      const value = formData.get(\"api_key\")?.toString().trim();\n      if (!value) return undefined;\n      if (server?.auth?.strategy === \"api_key\") {\n        return { ...server.auth, value };\n      }\n      return { strategy: \"bearer\", value };\n    }\n    if (authMode === \"header\") {\n      const headers = parseEnvironmentVariables(\n        formData.get(\"headers\")?.toString() || \"\",\n      );\n      return { strategy: \"header\", headers };\n    }\n\n    const scopes = formData.get(\"oauth_scopes\")?.toString().trim();\n    const clientId = formData.get(\"oauth_client_id\")?.toString().trim();\n    const clientSecret = formData.get(\"oauth_client_secret\")?.toString().trim();\n    const authentication: MCPAuthenticationConfig = {\n      type: \"oauth\",\n      ...(oauthClientAuthMethod !== \"auto\" && {\n        client_auth_method: oauthClientAuthMethod,\n      }),\n      ...(scopes && { scopes }),\n      ...(clientId && { client_id: clientId }),\n      ...(clientSecret && { client_secret: clientSecret }),\n    };\n    return {\n      strategy: \"oauth2\",\n      authentication,\n      ...(oauthState && { state: oauthState }),\n    };\n  };\n\n  const buildConfig = (formData: FormData): MCPServerConfig => {\n    const baseConfig = {\n      id: server?.id || `${serverType}-${Date.now()}`,\n      type: serverType,\n      // The form has no enable/disable control (that lives on the card), so\n      // carry the existing state forward — otherwise saving an edit to a\n      // disabled server would silently switch it back on.\n      ...(server?.enabled === false && { enabled: false }),\n    };\n\n    if (serverType === \"sse\" || serverType === \"shttp\") {\n      const name = formData.get(\"name\")?.toString().trim();\n      const url = formData.get(\"url\")?.toString().trim();\n      const timeoutStr = formData.get(\"timeout\")?.toString().trim();\n      const auth = authFromFormData(formData);\n\n      const serverConfig: MCPServerConfig = {\n        ...baseConfig,\n        ...(name && { name }),\n        url: url!,\n        ...(auth && { auth }),\n      };\n\n      // Only add timeout for SHTTP servers\n      if (serverType === \"shttp\" && timeoutStr) {\n        const timeoutValue = parseInt(timeoutStr, 10);\n        if (!Number.isNaN(timeoutValue)) {\n          serverConfig.timeout = timeoutValue;\n        }\n      }\n\n      return serverConfig;\n    }\n\n    // stdio\n    const name = formData.get(\"name\")?.toString().trim();\n    const command = formData.get(\"command\")?.toString().trim();\n    const argsString = formData.get(\"args\")?.toString().trim();\n    const envString = formData.get(\"env\")?.toString().trim();\n\n    const args = argsString\n      ? argsString\n          .split(\"\\n\")\n          .map((arg) => arg.trim())\n          .filter(Boolean)\n      : [];\n    const env = parseEnvironmentVariables(envString || \"\");\n\n    return {\n      ...baseConfig,\n      name: name!,\n      command: command!,\n      ...(args.length > 0 && { args }),\n      ...(Object.keys(env).length > 0 && { env }),\n    };\n  };\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setError(null);\n\n    const formData = new FormData(event.currentTarget);\n    const validationError = validateForm(formData);\n\n    if (validationError) {\n      setError(validationError);\n      return;\n    }\n\n    onSubmit(buildConfig(formData));\n  };\n\n  const handleTestClick = () => {\n    if (!onTest || !formRef.current) return;\n    setError(null);\n    const formData = new FormData(formRef.current);\n    const validationError = validateForm(formData);\n    if (validationError) {\n      setError(validationError);\n      return;\n    }\n    onTest(buildConfig(formData));\n  };\n\n  const formTestId =\n    mode === \"add\" ? \"add-mcp-server-form\" : \"edit-mcp-server-form\";\n\n  return (\n    <form\n      ref={formRef}\n      data-testid={formTestId}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col items-start gap-6\"\n      noValidate\n    >\n      {mode === \"add\" && (\n        <SettingsDropdownInput\n          testId=\"server-type-dropdown\"\n          name=\"server-type\"\n          label={t(I18nKey.SETTINGS$MCP_SERVER_TYPE)}\n          items={serverTypeOptions}\n          selectedKey={serverType}\n          onSelectionChange={(key) => setServerType(key as MCPServerType)}\n          onInputChange={() => {}} // Prevent input changes\n          isClearable={false}\n          allowsCustomValue={false}\n          required\n          wrapperClassName=\"w-full min-w-0\"\n        />\n      )}\n\n      {error && <p className=\"text-red-500 text-sm\">{error}</p>}\n\n      {(serverType === \"sse\" || serverType === \"shttp\") && (\n        <>\n          <SettingsInput\n            testId=\"server-name-input\"\n            name=\"name\"\n            type=\"text\"\n            label={t(I18nKey.SETTINGS$MCP_SERVER_NAME)}\n            className=\"w-full min-w-0\"\n            showOptionalTag\n            defaultValue={server?.name || \"\"}\n            // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n            placeholder=\"my_search_server\"\n            pattern={MCP_SERVER_NAME_PATTERN.source}\n          />\n\n          <SettingsInput\n            testId=\"url-input\"\n            name=\"url\"\n            type=\"url\"\n            label={t(I18nKey.SETTINGS$MCP_URL)}\n            className=\"w-full min-w-0\"\n            required\n            defaultValue={server?.url || \"\"}\n            // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n            placeholder=\"https://api.example.com\"\n          />\n\n          <SettingsDropdownInput\n            testId=\"auth-mode-dropdown\"\n            name=\"auth-mode\"\n            label={t(I18nKey.SETTINGS$MCP_AUTHENTICATION)}\n            items={authModeOptions}\n            selectedKey={authMode}\n            onSelectionChange={(key) => setAuthMode(key as RemoteAuthMode)}\n            onInputChange={() => {}}\n            isClearable={false}\n            allowsCustomValue={false}\n            wrapperClassName=\"w-full min-w-0\"\n          />\n\n          {authMode === \"bearer\" && (\n            <SettingsInput\n              testId=\"api-key-input\"\n              name=\"api_key\"\n              type=\"password\"\n              label={t(I18nKey.SETTINGS$MCP_API_KEY)}\n              className=\"w-full min-w-0\"\n              required\n              defaultValue={editableAuthValue(server?.auth)}\n              placeholder={t(I18nKey.SETTINGS$MCP_API_KEY_PLACEHOLDER)}\n            />\n          )}\n\n          {authMode === \"header\" && (\n            <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n              <span className=\"text-sm\">{t(I18nKey.SETTINGS$MCP_HEADERS)}</span>\n              <textarea\n                data-testid=\"headers-input\"\n                name=\"headers\"\n                rows={4}\n                defaultValue={editableHeaderValue(server?.auth)}\n                placeholder={t(I18nKey.SETTINGS$MCP_HEADERS_PLACEHOLDER)}\n                className={cn(\n                  formControlMultilineFieldClassName,\n                  \"resize-none placeholder:italic\",\n                  \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n                )}\n              />\n            </label>\n          )}\n\n          {authMode === \"oauth2\" && (\n            <>\n              <SettingsDropdownInput\n                testId=\"oauth-client-auth-method-dropdown\"\n                name=\"oauth_client_auth_method\"\n                label={t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_AUTH)}\n                items={oauthClientAuthMethodOptions}\n                selectedKey={oauthClientAuthMethod}\n                onSelectionChange={(key) =>\n                  setOAuthClientAuthMethod(key as OAuthClientAuthMethodOption)\n                }\n                onInputChange={() => {}}\n                isClearable={false}\n                allowsCustomValue={false}\n                wrapperClassName=\"w-full min-w-0\"\n              />\n              <SettingsInput\n                testId=\"oauth-client-id-input\"\n                name=\"oauth_client_id\"\n                type=\"text\"\n                label={t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_ID)}\n                className=\"w-full min-w-0\"\n                showOptionalTag\n                defaultValue={oauthAuthentication?.client_id || \"\"}\n                placeholder={t(\n                  I18nKey.SETTINGS$MCP_OAUTH_CLIENT_ID_PLACEHOLDER,\n                )}\n              />\n              <SettingsInput\n                testId=\"oauth-client-secret-input\"\n                name=\"oauth_client_secret\"\n                type=\"password\"\n                label={t(I18nKey.SETTINGS$MCP_OAUTH_CLIENT_SECRET)}\n                className=\"w-full min-w-0\"\n                showOptionalTag\n                defaultValue={oauthAuthentication?.client_secret || \"\"}\n                placeholder={t(\n                  I18nKey.SETTINGS$MCP_OAUTH_CLIENT_SECRET_PLACEHOLDER,\n                )}\n              />\n              <SettingsInput\n                testId=\"oauth-scopes-input\"\n                name=\"oauth_scopes\"\n                type=\"text\"\n                label={t(I18nKey.SETTINGS$MCP_OAUTH_SCOPES)}\n                className=\"w-full min-w-0\"\n                showOptionalTag\n                defaultValue={\n                  Array.isArray(oauthAuthentication?.scopes)\n                    ? oauthAuthentication.scopes.join(\" \")\n                    : oauthAuthentication?.scopes || \"\"\n                }\n                placeholder={t(I18nKey.SETTINGS$MCP_OAUTH_SCOPES_PLACEHOLDER)}\n              />\n            </>\n          )}\n\n          {serverType === \"shttp\" && (\n            <SettingsInput\n              testId=\"timeout-input\"\n              name=\"timeout\"\n              type=\"number\"\n              label={t(I18nKey.SETTINGS$MCP_TIMEOUT_LABEL)}\n              className=\"w-full min-w-0\"\n              showOptionalTag\n              defaultValue={server?.timeout?.toString() || \"\"}\n              placeholder=\"60\"\n              min={1}\n              max={3600}\n            />\n          )}\n        </>\n      )}\n\n      {serverType === \"stdio\" && (\n        <>\n          <SettingsInput\n            testId=\"name-input\"\n            name=\"name\"\n            type=\"text\"\n            label={t(I18nKey.SETTINGS$MCP_NAME)}\n            className=\"w-full min-w-0\"\n            required\n            defaultValue={server?.name || \"\"}\n            // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n            placeholder=\"my_mcp_server\"\n            pattern={MCP_SERVER_NAME_PATTERN.source}\n          />\n\n          <SettingsInput\n            testId=\"command-input\"\n            name=\"command\"\n            type=\"text\"\n            label={t(I18nKey.SETTINGS$MCP_COMMAND)}\n            className=\"w-full min-w-0\"\n            required\n            defaultValue={server?.command || \"\"}\n            // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n            placeholder=\"npx\"\n          />\n\n          <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-sm\">\n                {t(I18nKey.SETTINGS$MCP_COMMAND_ARGUMENTS)}\n              </span>\n              <OptionalTag />\n            </div>\n            <textarea\n              data-testid=\"args-input\"\n              name=\"args\"\n              rows={3}\n              defaultValue={server?.args?.join(\"\\n\") || \"\"}\n              // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n              placeholder=\"arg1&#10;arg2&#10;arg3\"\n              className={cn(\n                formControlMultilineFieldClassName,\n                \"resize-none placeholder:italic\",\n                \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n              )}\n            />\n            <p className=\"text-xs text-tertiary-alt\">\n              {t(I18nKey.SETTINGS$MCP_COMMAND_ARGUMENTS_HELP)}\n            </p>\n          </label>\n\n          <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-sm\">\n                {t(I18nKey.SETTINGS$MCP_ENVIRONMENT_VARIABLES)}\n              </span>\n              <OptionalTag />\n            </div>\n            <textarea\n              data-testid=\"env-input\"\n              name=\"env\"\n              rows={4}\n              defaultValue={formatEnvironmentVariables(server?.env)}\n              // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n              placeholder=\"KEY1=value1&#10;KEY2=value2\"\n              className={cn(\n                formControlMultilineFieldClassName,\n                \"resize-none placeholder:italic\",\n                \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n              )}\n            />\n          </label>\n        </>\n      )}\n\n      {testMessage && (\n        <p\n          data-testid=\"mcp-test-message\"\n          className={\n            testMessage.ok\n              ? \"text-sm text-green-500 whitespace-pre-wrap\"\n              : \"text-sm text-red-500 whitespace-pre-wrap\"\n          }\n        >\n          {testMessage.text}\n        </p>\n      )}\n\n      <div\n        className={cn(\n          \"flex w-full items-center gap-2\",\n          onDelete ? \"justify-between\" : \"justify-end\",\n        )}\n      >\n        {onDelete ? (\n          <BrandButton\n            testId=\"mcp-custom-editor-delete\"\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onDelete}\n            isDisabled={isActionDisabled}\n            startContent={\n              <Trash2 aria-hidden className=\"size-4\" strokeWidth={2} />\n            }\n          >\n            {t(I18nKey.BUTTON$DELETE)}\n          </BrandButton>\n        ) : null}\n        <div className=\"flex items-center gap-2\">\n          <BrandButton\n            testId=\"cancel-button\"\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onCancel}\n            isDisabled={isActionDisabled}\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          {onTest && (\n            <BrandButton\n              testId=\"mcp-test-connection\"\n              type=\"button\"\n              variant=\"secondary\"\n              onClick={handleTestClick}\n              isDisabled={isActionDisabled || isTestPending}\n            >\n              {isTestPending\n                ? t(I18nKey.MCP$VERIFYING)\n                : t(I18nKey.MCP$TEST_BUTTON)}\n            </BrandButton>\n          )}\n          <BrandButton\n            testId=\"submit-button\"\n            type=\"submit\"\n            variant=\"primary\"\n            isDisabled={isActionDisabled || isTestPending}\n          >\n            {mode === \"add\" && t(I18nKey.SETTINGS$MCP_ADD_SERVER)}\n            {mode === \"edit\" && t(I18nKey.SETTINGS$MCP_SAVE_SERVER)}\n          </BrandButton>\n        </div>\n      </div>\n    </form>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/settings/settings-input.cjs

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs"),t=require("../../../utils/form-control-classes.cjs"),n=require("./optional-tag.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(function({testId:r,name:a,label:o,type:s,defaultValue:c,value:l,placeholder:u,showOptionalTag:d,isDisabled:f,startContent:p,className:m,onChange:h,onKeyDown:g,required:_,min:v,max:y,step:b,pattern:x,title:S,labelClassName:C,ariaDescribedBy:w,ariaInvalid:T,error:E,showRequiredTag:D,onBlur:O,inputClassName:k},A){let j=E&&r?`${r}-error`:void 0;return(0,i.jsxs)(`label`,{className:e.cn(`flex flex-col gap-2.5 w-full min-w-0`,m),children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[p,(0,i.jsx)(`span`,{className:e.cn(`text-sm`,C),children:o}),D&&(0,i.jsx)(`span`,{className:`text-red-400 text-sm leading-none`,"aria-hidden":!0,children:`*`}),d&&(0,i.jsx)(n.OptionalTag,{})]}),(0,i.jsx)(`input`,{ref:A,"data-testid":r,onChange:e=>h?.(e.target.value),onKeyDown:g,onBlur:O,name:a,disabled:f,type:s,defaultValue:c,value:l,placeholder:u,min:v,max:y,step:b,required:_,pattern:x,title:S,"aria-describedby":j??w,"aria-invalid":!!E||T,className:e.cn(t.formControlSettingsFieldClassName,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]`,E&&`border-red-500`,k)}),E&&(0,i.jsx)(`p`,{id:j,role:`alert`,"data-testid":r?`${r}-error`:void 0,className:`text-xs text-red-400 -mt-1`,children:E})]})});exports.SettingsInput=a;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs"),t=require("../../../utils/form-control-classes.cjs"),n=require("./optional-tag.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(function({testId:r,name:a,label:o,type:s,defaultValue:c,value:l,placeholder:u,showOptionalTag:d,isDisabled:f,startContent:p,className:m,onChange:h,onKeyDown:g,required:_,min:v,max:y,step:b,pattern:x,title:S,labelClassName:C,ariaDescribedBy:w,ariaInvalid:T,error:E,showRequiredTag:D,hint:O,onBlur:k,inputClassName:A},j){let M=E&&r?`${r}-error`:void 0;return(0,i.jsxs)(`label`,{className:e.cn(`flex flex-col gap-2.5 w-full min-w-0`,m),children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[p,(0,i.jsx)(`span`,{className:e.cn(`text-sm`,C),children:o}),D&&(0,i.jsx)(`span`,{className:`text-red-400 text-sm leading-none`,"aria-hidden":!0,children:`*`}),d&&(0,i.jsx)(n.OptionalTag,{}),O&&(0,i.jsx)(`span`,{"data-testid":r?`${r}-hint`:void 0,className:`min-w-0 text-xs text-[var(--oh-muted)]`,children:O})]}),(0,i.jsx)(`input`,{ref:j,"data-testid":r,onChange:e=>h?.(e.target.value),onKeyDown:g,onBlur:k,name:a,disabled:f,type:s,defaultValue:c,value:l,placeholder:u,min:v,max:y,step:b,required:_,pattern:x,title:S,"aria-describedby":M??w,"aria-invalid":!!E||T,className:e.cn(t.formControlSettingsFieldClassName,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]`,E&&`border-red-500`,A)}),E&&(0,i.jsx)(`p`,{id:M,role:`alert`,"data-testid":r?`${r}-error`:void 0,className:`text-xs text-red-400 -mt-1`,children:E})]})});exports.SettingsInput=a;
 //# sourceMappingURL=settings-input.cjs.map

package/dist/components/features/settings/settings-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"settings-input.cjs","names":[],"sources":["../../../../src/components/features/settings/settings-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { OptionalTag } from \"./optional-tag\";\n\ninterface SettingsInputProps {\n  testId?: string;\n  name?: string;\n  label: string;\n  type: React.HTMLInputTypeAttribute;\n  defaultValue?: string;\n  value?: string;\n  placeholder?: string;\n  showOptionalTag?: boolean;\n  isDisabled?: boolean;\n  startContent?: React.ReactNode;\n  className?: string;\n  onChange?: (value: string) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  required?: boolean;\n  min?: number;\n  max?: number;\n  step?: number;\n  pattern?: string;\n  /** Validation message shown when pattern doesn't match */\n  title?: string;\n  labelClassName?: string;\n  /** ARIA describedby attribute for accessibility */\n  ariaDescribedBy?: string;\n  /** ARIA invalid attribute for accessibility */\n  ariaInvalid?: boolean;\n  /**\n   * Validation error message. When set, the input gets a red border and\n   * the message is rendered below it. Also sets aria-invalid automatically.\n   */\n  error?: string;\n  /** Renders a red asterisk next to the label to mark the field as required. */\n  showRequiredTag?: boolean;\n  onBlur?: () => void;\n  /** Extra classes merged onto the `<input>` element. */\n  inputClassName?: string;\n}\n\nexport const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(\n  function SettingsInput(\n    {\n      testId,\n      name,\n      label,\n      type,\n      defaultValue,\n      value,\n      placeholder,\n      showOptionalTag,\n      isDisabled,\n      startContent,\n      className,\n      onChange,\n      onKeyDown,\n      required,\n      min,\n      max,\n      step,\n      pattern,\n      title,\n      labelClassName,\n      ariaDescribedBy,\n      ariaInvalid,\n      error,\n      showRequiredTag,\n      onBlur,\n      inputClassName,\n    },\n    ref,\n  ) {\n    const errorId = error && testId ? `${testId}-error` : undefined;\n    return (\n      <label className={cn(\"flex flex-col gap-2.5 w-full min-w-0\", className)}>\n        <div className=\"flex items-center gap-2\">\n          {startContent}\n          <span className={cn(\"text-sm\", labelClassName)}>{label}</span>\n          {showRequiredTag && (\n            <span className=\"text-red-400 text-sm leading-none\" aria-hidden>\n              *\n            </span>\n          )}\n          {showOptionalTag && <OptionalTag />}\n        </div>\n        <input\n          ref={ref}\n          data-testid={testId}\n          onChange={(e) => onChange?.(e.target.value)}\n          onKeyDown={onKeyDown}\n          onBlur={onBlur}\n          name={name}\n          disabled={isDisabled}\n          type={type}\n          defaultValue={defaultValue}\n          value={value}\n          placeholder={placeholder}\n          min={min}\n          max={max}\n          step={step}\n          required={required}\n          pattern={pattern}\n          title={title}\n          aria-describedby={errorId ?? ariaDescribedBy}\n          aria-invalid={!!error || ariaInvalid}\n          className={cn(\n            formControlSettingsFieldClassName,\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n            error && \"border-red-500\",\n            inputClassName,\n          )}\n        />\n        {error && (\n          <p\n            id={errorId}\n            role=\"alert\"\n            data-testid={testId ? `${testId}-error` : undefined}\n            className=\"text-xs text-red-400 -mt-1\"\n          >\n            {error}\n          </p>\n        )}\n      </label>\n    );\n  },\n);\n"],"mappings":"0OA2CA,IAAa,GAAA,EAAA,EAAA,YACX,SACE,CACE,SACA,OACA,QACA,OACA,eACA,QACA,cACA,kBACA,aACA,eACA,YACA,WACA,YACA,WACA,MACA,MACA,OACA,UACA,QACA,iBACA,kBACA,cACA,QACA,kBACA,SACA,kBAEF,EACA,CACA,IAAM,EAAU,GAAS,EAAS,GAAG,EAAO,QAAU,IAAA,GACtD,OACE,EAAA,EAAA,MAAC,QAAD,CAAO,UAAW,EAAA,GAAG,uCAAwC,CAAS,WAAtE,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,mCAAf,CACG,GACD,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,GAAG,UAAW,CAAc,WAAI,CAAY,CAAA,EAC5D,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oCAAoC,cAAA,YAAY,GAE1D,CAAA,EAEP,IAAmB,EAAA,EAAA,KAAC,EAAA,YAAD,CAAc,CAAA,CAC/B,KACL,EAAA,EAAA,KAAC,QAAD,CACO,MACL,cAAa,EACb,SAAW,GAAM,IAAW,EAAE,OAAO,KAAK,EAC/B,YACH,SACF,OACN,SAAU,EACJ,OACQ,eACP,QACM,cACR,MACA,MACC,OACI,WACD,UACF,QACP,mBAAkB,GAAW,EAC7B,eAAc,CAAC,CAAC,GAAS,EACzB,UAAW,EAAA,GACT,EAAA,kCACA,mFACA,GAAS,iBACT,CACF,CACD,CAAA,EACA,IACC,EAAA,EAAA,KAAC,IAAD,CACE,GAAI,EACJ,KAAK,QACL,cAAa,EAAS,GAAG,EAAO,QAAU,IAAA,GAC1C,UAAU,sCAET,CACA,CAAA,CAEA,GAEX,CACF"}
+{"version":3,"file":"settings-input.cjs","names":[],"sources":["../../../../src/components/features/settings/settings-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { OptionalTag } from \"./optional-tag\";\n\ninterface SettingsInputProps {\n  testId?: string;\n  name?: string;\n  label: string;\n  type: React.HTMLInputTypeAttribute;\n  defaultValue?: string;\n  value?: string;\n  placeholder?: string;\n  showOptionalTag?: boolean;\n  isDisabled?: boolean;\n  startContent?: React.ReactNode;\n  className?: string;\n  onChange?: (value: string) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  required?: boolean;\n  min?: number;\n  max?: number;\n  step?: number;\n  pattern?: string;\n  /** Validation message shown when pattern doesn't match */\n  title?: string;\n  labelClassName?: string;\n  /** ARIA describedby attribute for accessibility */\n  ariaDescribedBy?: string;\n  /** ARIA invalid attribute for accessibility */\n  ariaInvalid?: boolean;\n  /**\n   * Validation error message. When set, the input gets a red border and\n   * the message is rendered below it. Also sets aria-invalid automatically.\n   */\n  error?: string;\n  /** Renders a red asterisk next to the label to mark the field as required. */\n  showRequiredTag?: boolean;\n  /**\n   * Short guidance rendered next to the label, above the input. It sits inside\n   * the `<label>`, so it is announced as part of the field's accessible name —\n   * keep it to a phrase that reads well after the label text.\n   */\n  hint?: string;\n  onBlur?: () => void;\n  /** Extra classes merged onto the `<input>` element. */\n  inputClassName?: string;\n}\n\nexport const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(\n  function SettingsInput(\n    {\n      testId,\n      name,\n      label,\n      type,\n      defaultValue,\n      value,\n      placeholder,\n      showOptionalTag,\n      isDisabled,\n      startContent,\n      className,\n      onChange,\n      onKeyDown,\n      required,\n      min,\n      max,\n      step,\n      pattern,\n      title,\n      labelClassName,\n      ariaDescribedBy,\n      ariaInvalid,\n      error,\n      showRequiredTag,\n      hint,\n      onBlur,\n      inputClassName,\n    },\n    ref,\n  ) {\n    const errorId = error && testId ? `${testId}-error` : undefined;\n    return (\n      <label className={cn(\"flex flex-col gap-2.5 w-full min-w-0\", className)}>\n        <div className=\"flex items-center gap-2\">\n          {startContent}\n          <span className={cn(\"text-sm\", labelClassName)}>{label}</span>\n          {showRequiredTag && (\n            <span className=\"text-red-400 text-sm leading-none\" aria-hidden>\n              *\n            </span>\n          )}\n          {showOptionalTag && <OptionalTag />}\n          {hint && (\n            <span\n              data-testid={testId ? `${testId}-hint` : undefined}\n              className=\"min-w-0 text-xs text-[var(--oh-muted)]\"\n            >\n              {hint}\n            </span>\n          )}\n        </div>\n        <input\n          ref={ref}\n          data-testid={testId}\n          onChange={(e) => onChange?.(e.target.value)}\n          onKeyDown={onKeyDown}\n          onBlur={onBlur}\n          name={name}\n          disabled={isDisabled}\n          type={type}\n          defaultValue={defaultValue}\n          value={value}\n          placeholder={placeholder}\n          min={min}\n          max={max}\n          step={step}\n          required={required}\n          pattern={pattern}\n          title={title}\n          aria-describedby={errorId ?? ariaDescribedBy}\n          aria-invalid={!!error || ariaInvalid}\n          className={cn(\n            formControlSettingsFieldClassName,\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n            error && \"border-red-500\",\n            inputClassName,\n          )}\n        />\n        {error && (\n          <p\n            id={errorId}\n            role=\"alert\"\n            data-testid={testId ? `${testId}-error` : undefined}\n            className=\"text-xs text-red-400 -mt-1\"\n          >\n            {error}\n          </p>\n        )}\n      </label>\n    );\n  },\n);\n"],"mappings":"0OAiDA,IAAa,GAAA,EAAA,EAAA,YACX,SACE,CACE,SACA,OACA,QACA,OACA,eACA,QACA,cACA,kBACA,aACA,eACA,YACA,WACA,YACA,WACA,MACA,MACA,OACA,UACA,QACA,iBACA,kBACA,cACA,QACA,kBACA,OACA,SACA,kBAEF,EACA,CACA,IAAM,EAAU,GAAS,EAAS,GAAG,EAAO,QAAU,IAAA,GACtD,OACE,EAAA,EAAA,MAAC,QAAD,CAAO,UAAW,EAAA,GAAG,uCAAwC,CAAS,WAAtE,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,mCAAf,CACG,GACD,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,GAAG,UAAW,CAAc,WAAI,CAAY,CAAA,EAC5D,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oCAAoC,cAAA,YAAY,GAE1D,CAAA,EAEP,IAAmB,EAAA,EAAA,KAAC,EAAA,YAAD,CAAc,CAAA,EACjC,IACC,EAAA,EAAA,KAAC,OAAD,CACE,cAAa,EAAS,GAAG,EAAO,OAAS,IAAA,GACzC,UAAU,kDAET,CACG,CAAA,CAEL,KACL,EAAA,EAAA,KAAC,QAAD,CACO,MACL,cAAa,EACb,SAAW,GAAM,IAAW,EAAE,OAAO,KAAK,EAC/B,YACH,SACF,OACN,SAAU,EACJ,OACQ,eACP,QACM,cACR,MACA,MACC,OACI,WACD,UACF,QACP,mBAAkB,GAAW,EAC7B,eAAc,CAAC,CAAC,GAAS,EACzB,UAAW,EAAA,GACT,EAAA,kCACA,mFACA,GAAS,iBACT,CACF,CACD,CAAA,EACA,IACC,EAAA,EAAA,KAAC,IAAD,CACE,GAAI,EACJ,KAAK,QACL,cAAa,EAAS,GAAG,EAAO,QAAU,IAAA,GAC1C,UAAU,sCAET,CACA,CAAA,CAEA,GAEX,CACF"}

package/dist/components/features/settings/settings-input.d.ts

@@ -31,6 +31,12 @@ interface SettingsInputProps {
     error?: string;
     /** Renders a red asterisk next to the label to mark the field as required. */
     showRequiredTag?: boolean;
+    /**
+     * Short guidance rendered next to the label, above the input. It sits inside
+     * the `<label>`, so it is announced as part of the field's accessible name —
+     * keep it to a phrase that reads well after the label text.
+     */
+    hint?: string;
     onBlur?: () => void;
     /** Extra classes merged onto the `<input>` element. */
     inputClassName?: string;

package/dist/components/features/settings/settings-input.js

@@ -4,8 +4,8 @@ import { OptionalTag as n } from "./optional-tag.js";
 import { forwardRef as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/features/settings/settings-input.tsx
-var o = r(function({ testId: r, name: o, label: s, type: c, defaultValue: l, value: u, placeholder: d, showOptionalTag: f, isDisabled: p, startContent: m, className: h, onChange: g, onKeyDown: _, required: v, min: y, max: b, step: x, pattern: S, title: C, labelClassName: w, ariaDescribedBy: T, ariaInvalid: E, error: D, showRequiredTag: O, onBlur: k, inputClassName: A }, j) {
-	let M = D && r ? `${r}-error` : void 0;
+var o = r(function({ testId: r, name: o, label: s, type: c, defaultValue: l, value: u, placeholder: d, showOptionalTag: f, isDisabled: p, startContent: m, className: h, onChange: g, onKeyDown: _, required: v, min: y, max: b, step: x, pattern: S, title: C, labelClassName: w, ariaDescribedBy: T, ariaInvalid: E, error: D, showRequiredTag: O, hint: k, onBlur: A, inputClassName: j }, M) {
+	let N = D && r ? `${r}-error` : void 0;
 	return /* @__PURE__ */ a("label", {
 		className: e("flex flex-col gap-2.5 w-full min-w-0", h),
 		children: [
@@ -22,15 +22,20 @@ var o = r(function({ testId: r, name: o, label: s, type: c, defaultValue: l, val
 						"aria-hidden": !0,
 						children: "*"
 					}),
-					f && /* @__PURE__ */ i(n, {})
+					f && /* @__PURE__ */ i(n, {}),
+					k && /* @__PURE__ */ i("span", {
+						"data-testid": r ? `${r}-hint` : void 0,
+						className: "min-w-0 text-xs text-[var(--oh-muted)]",
+						children: k
+					})
 				]
 			}),
 			/* @__PURE__ */ i("input", {
-				ref: j,
+				ref: M,
 				"data-testid": r,
 				onChange: (e) => g?.(e.target.value),
 				onKeyDown: _,
-				onBlur: k,
+				onBlur: A,
 				name: o,
 				disabled: p,
 				type: c,
@@ -43,12 +48,12 @@ var o = r(function({ testId: r, name: o, label: s, type: c, defaultValue: l, val
 				required: v,
 				pattern: S,
 				title: C,
-				"aria-describedby": M ?? T,
+				"aria-describedby": N ?? T,
 				"aria-invalid": !!D || E,
-				className: e(t, "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]", D && "border-red-500", A)
+				className: e(t, "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]", D && "border-red-500", j)
 			}),
 			D && /* @__PURE__ */ i("p", {
-				id: M,
+				id: N,
 				role: "alert",
 				"data-testid": r ? `${r}-error` : void 0,
 				className: "text-xs text-red-400 -mt-1",

package/dist/components/features/settings/settings-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-input.js","names":[],"sources":["../../../../src/components/features/settings/settings-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { OptionalTag } from \"./optional-tag\";\n\ninterface SettingsInputProps {\n  testId?: string;\n  name?: string;\n  label: string;\n  type: React.HTMLInputTypeAttribute;\n  defaultValue?: string;\n  value?: string;\n  placeholder?: string;\n  showOptionalTag?: boolean;\n  isDisabled?: boolean;\n  startContent?: React.ReactNode;\n  className?: string;\n  onChange?: (value: string) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  required?: boolean;\n  min?: number;\n  max?: number;\n  step?: number;\n  pattern?: string;\n  /** Validation message shown when pattern doesn't match */\n  title?: string;\n  labelClassName?: string;\n  /** ARIA describedby attribute for accessibility */\n  ariaDescribedBy?: string;\n  /** ARIA invalid attribute for accessibility */\n  ariaInvalid?: boolean;\n  /**\n   * Validation error message. When set, the input gets a red border and\n   * the message is rendered below it. Also sets aria-invalid automatically.\n   */\n  error?: string;\n  /** Renders a red asterisk next to the label to mark the field as required. */\n  showRequiredTag?: boolean;\n  onBlur?: () => void;\n  /** Extra classes merged onto the `<input>` element. */\n  inputClassName?: string;\n}\n\nexport const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(\n  function SettingsInput(\n    {\n      testId,\n      name,\n      label,\n      type,\n      defaultValue,\n      value,\n      placeholder,\n      showOptionalTag,\n      isDisabled,\n      startContent,\n      className,\n      onChange,\n      onKeyDown,\n      required,\n      min,\n      max,\n      step,\n      pattern,\n      title,\n      labelClassName,\n      ariaDescribedBy,\n      ariaInvalid,\n      error,\n      showRequiredTag,\n      onBlur,\n      inputClassName,\n    },\n    ref,\n  ) {\n    const errorId = error && testId ? `${testId}-error` : undefined;\n    return (\n      <label className={cn(\"flex flex-col gap-2.5 w-full min-w-0\", className)}>\n        <div className=\"flex items-center gap-2\">\n          {startContent}\n          <span className={cn(\"text-sm\", labelClassName)}>{label}</span>\n          {showRequiredTag && (\n            <span className=\"text-red-400 text-sm leading-none\" aria-hidden>\n              *\n            </span>\n          )}\n          {showOptionalTag && <OptionalTag />}\n        </div>\n        <input\n          ref={ref}\n          data-testid={testId}\n          onChange={(e) => onChange?.(e.target.value)}\n          onKeyDown={onKeyDown}\n          onBlur={onBlur}\n          name={name}\n          disabled={isDisabled}\n          type={type}\n          defaultValue={defaultValue}\n          value={value}\n          placeholder={placeholder}\n          min={min}\n          max={max}\n          step={step}\n          required={required}\n          pattern={pattern}\n          title={title}\n          aria-describedby={errorId ?? ariaDescribedBy}\n          aria-invalid={!!error || ariaInvalid}\n          className={cn(\n            formControlSettingsFieldClassName,\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n            error && \"border-red-500\",\n            inputClassName,\n          )}\n        />\n        {error && (\n          <p\n            id={errorId}\n            role=\"alert\"\n            data-testid={testId ? `${testId}-error` : undefined}\n            className=\"text-xs text-red-400 -mt-1\"\n          >\n            {error}\n          </p>\n        )}\n      </label>\n    );\n  },\n);\n"],"mappings":";;;;;;AA2CA,IAAa,IAAgB,EAC3B,SACE,EACE,WACA,SACA,UACA,SACA,iBACA,UACA,gBACA,oBACA,eACA,iBACA,cACA,aACA,cACA,aACA,QACA,QACA,SACA,YACA,UACA,mBACA,oBACA,gBACA,UACA,oBACA,WACA,qBAEF,GACA;CACA,IAAM,IAAU,KAAS,IAAS,GAAG,EAAO,UAAU,KAAA;CACtD,OACE,kBAAC,SAAD;EAAO,WAAW,EAAG,wCAAwC,CAAS;YAAtE;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG;KACD,kBAAC,QAAD;MAAM,WAAW,EAAG,WAAW,CAAc;gBAAI;KAAY,CAAA;KAC5D,KACC,kBAAC,QAAD;MAAM,WAAU;MAAoC,eAAA;gBAAY;KAE1D,CAAA;KAEP,KAAmB,kBAAC,GAAD,CAAc,CAAA;IAC/B;;GACL,kBAAC,SAAD;IACO;IACL,eAAa;IACb,WAAW,MAAM,IAAW,EAAE,OAAO,KAAK;IAC/B;IACH;IACF;IACN,UAAU;IACJ;IACQ;IACP;IACM;IACR;IACA;IACC;IACI;IACD;IACF;IACP,oBAAkB,KAAW;IAC7B,gBAAc,CAAC,CAAC,KAAS;IACzB,WAAW,EACT,GACA,oFACA,KAAS,kBACT,CACF;GACD,CAAA;GACA,KACC,kBAAC,KAAD;IACE,IAAI;IACJ,MAAK;IACL,eAAa,IAAS,GAAG,EAAO,UAAU,KAAA;IAC1C,WAAU;cAET;GACA,CAAA;EAEA;;AAEX,CACF"}
+{"version":3,"file":"settings-input.js","names":[],"sources":["../../../../src/components/features/settings/settings-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { OptionalTag } from \"./optional-tag\";\n\ninterface SettingsInputProps {\n  testId?: string;\n  name?: string;\n  label: string;\n  type: React.HTMLInputTypeAttribute;\n  defaultValue?: string;\n  value?: string;\n  placeholder?: string;\n  showOptionalTag?: boolean;\n  isDisabled?: boolean;\n  startContent?: React.ReactNode;\n  className?: string;\n  onChange?: (value: string) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n  required?: boolean;\n  min?: number;\n  max?: number;\n  step?: number;\n  pattern?: string;\n  /** Validation message shown when pattern doesn't match */\n  title?: string;\n  labelClassName?: string;\n  /** ARIA describedby attribute for accessibility */\n  ariaDescribedBy?: string;\n  /** ARIA invalid attribute for accessibility */\n  ariaInvalid?: boolean;\n  /**\n   * Validation error message. When set, the input gets a red border and\n   * the message is rendered below it. Also sets aria-invalid automatically.\n   */\n  error?: string;\n  /** Renders a red asterisk next to the label to mark the field as required. */\n  showRequiredTag?: boolean;\n  /**\n   * Short guidance rendered next to the label, above the input. It sits inside\n   * the `<label>`, so it is announced as part of the field's accessible name —\n   * keep it to a phrase that reads well after the label text.\n   */\n  hint?: string;\n  onBlur?: () => void;\n  /** Extra classes merged onto the `<input>` element. */\n  inputClassName?: string;\n}\n\nexport const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(\n  function SettingsInput(\n    {\n      testId,\n      name,\n      label,\n      type,\n      defaultValue,\n      value,\n      placeholder,\n      showOptionalTag,\n      isDisabled,\n      startContent,\n      className,\n      onChange,\n      onKeyDown,\n      required,\n      min,\n      max,\n      step,\n      pattern,\n      title,\n      labelClassName,\n      ariaDescribedBy,\n      ariaInvalid,\n      error,\n      showRequiredTag,\n      hint,\n      onBlur,\n      inputClassName,\n    },\n    ref,\n  ) {\n    const errorId = error && testId ? `${testId}-error` : undefined;\n    return (\n      <label className={cn(\"flex flex-col gap-2.5 w-full min-w-0\", className)}>\n        <div className=\"flex items-center gap-2\">\n          {startContent}\n          <span className={cn(\"text-sm\", labelClassName)}>{label}</span>\n          {showRequiredTag && (\n            <span className=\"text-red-400 text-sm leading-none\" aria-hidden>\n              *\n            </span>\n          )}\n          {showOptionalTag && <OptionalTag />}\n          {hint && (\n            <span\n              data-testid={testId ? `${testId}-hint` : undefined}\n              className=\"min-w-0 text-xs text-[var(--oh-muted)]\"\n            >\n              {hint}\n            </span>\n          )}\n        </div>\n        <input\n          ref={ref}\n          data-testid={testId}\n          onChange={(e) => onChange?.(e.target.value)}\n          onKeyDown={onKeyDown}\n          onBlur={onBlur}\n          name={name}\n          disabled={isDisabled}\n          type={type}\n          defaultValue={defaultValue}\n          value={value}\n          placeholder={placeholder}\n          min={min}\n          max={max}\n          step={step}\n          required={required}\n          pattern={pattern}\n          title={title}\n          aria-describedby={errorId ?? ariaDescribedBy}\n          aria-invalid={!!error || ariaInvalid}\n          className={cn(\n            formControlSettingsFieldClassName,\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n            error && \"border-red-500\",\n            inputClassName,\n          )}\n        />\n        {error && (\n          <p\n            id={errorId}\n            role=\"alert\"\n            data-testid={testId ? `${testId}-error` : undefined}\n            className=\"text-xs text-red-400 -mt-1\"\n          >\n            {error}\n          </p>\n        )}\n      </label>\n    );\n  },\n);\n"],"mappings":";;;;;;AAiDA,IAAa,IAAgB,EAC3B,SACE,EACE,WACA,SACA,UACA,SACA,iBACA,UACA,gBACA,oBACA,eACA,iBACA,cACA,aACA,cACA,aACA,QACA,QACA,SACA,YACA,UACA,mBACA,oBACA,gBACA,UACA,oBACA,SACA,WACA,qBAEF,GACA;CACA,IAAM,IAAU,KAAS,IAAS,GAAG,EAAO,UAAU,KAAA;CACtD,OACE,kBAAC,SAAD;EAAO,WAAW,EAAG,wCAAwC,CAAS;YAAtE;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG;KACD,kBAAC,QAAD;MAAM,WAAW,EAAG,WAAW,CAAc;gBAAI;KAAY,CAAA;KAC5D,KACC,kBAAC,QAAD;MAAM,WAAU;MAAoC,eAAA;gBAAY;KAE1D,CAAA;KAEP,KAAmB,kBAAC,GAAD,CAAc,CAAA;KACjC,KACC,kBAAC,QAAD;MACE,eAAa,IAAS,GAAG,EAAO,SAAS,KAAA;MACzC,WAAU;gBAET;KACG,CAAA;IAEL;;GACL,kBAAC,SAAD;IACO;IACL,eAAa;IACb,WAAW,MAAM,IAAW,EAAE,OAAO,KAAK;IAC/B;IACH;IACF;IACN,UAAU;IACJ;IACQ;IACP;IACM;IACR;IACA;IACC;IACI;IACD;IACF;IACP,oBAAkB,KAAW;IAC7B,gBAAc,CAAC,CAAC,KAAS;IACzB,WAAW,EACT,GACA,oFACA,KAAS,kBACT,CACF;GACD,CAAA;GACA,KACC,kBAAC,KAAD;IACE,IAAI;IACJ,MAAK;IACL,eAAa,IAAS,GAAG,EAAO,UAAU,KAAA;IAC1C,WAAU;cAET;GACA,CAAA;EAEA;;AAEX,CACF"}

package/dist/components/features/sidebar/sidebar-rail-body.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("../../../node_modules/lucide-react/dist/esm/icons/chevron-left.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),a=require("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),o=require("../../../node_modules/lucide-react/dist/esm/icons/server.cjs"),s=require("../../../node_modules/lucide-react/dist/esm/icons/settings.cjs"),c=require("../../../utils/utils.cjs"),l=require("../../shared/buttons/styled-tooltip.cjs"),u=require("../../shared/navigation-link.cjs"),d=require("./sidebar-layout.cjs"),f=require("./sidebar-collapsed-icon-slot.cjs"),p=require("./sidebar-nav-link.cjs"),m=require("../../shared/buttons/openhands-logo-button.cjs"),h=require("../backends/backend-status-dot.cjs"),g=require("../backends/backend-selector.cjs"),_=require("../command-menu/command-menu-trigger.cjs"),v=require("./sidebar-conversation-list.cjs"),y=require("../../../icons/automations.cjs");let b=require("react");b=e.__toESM(b,1);let x=require("react/jsx-runtime");var S=18,C=34,w=Math.round(C*30/46);function T({collapsed:e,showCollapseToggle:b,showMobileCloseButton:T=!1,onCloseMobile:E,collapseToggleLabel:D,onCollapse:O,onExpand:k,showCollapsedExpandButton:A,isExtensionsActive:j,currentPath:M,activeBackendHealth:N,collapsedBackendPopoverOpen:P,setCollapsedBackendPopoverOpen:F,collapsedBackendPopoverRef:I,collapsedBackendCloseTimer:L,onOpenAddBackend:R,onOpenManageBackends:z}){let{t:B}=t.useTranslation(`openhands`),V=L;return(0,x.jsxs)(`div`,{className:`flex min-h-0 flex-1 flex-col`,children:[(0,x.jsxs)(`div`,{className:d.sidebarHeaderRowClassName(e),children:[(0,x.jsxs)(`div`,{className:c.cn(e&&b?d.SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS:`flex min-w-0 shrink-0 items-center`),children:[(0,x.jsx)(`div`,{className:c.cn(e&&b&&`flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150`,e&&A&&`opacity-0`),children:(0,x.jsx)(m.OpenHandsLogoButton,{logoWidth:C,logoHeight:w,logoClassName:`max-w-none`,className:c.cn(d.SIDEBAR_ICON_SLOT_CLASS,`overflow-visible`)})}),e&&b?(0,x.jsx)(`button`,{type:`button`,"data-testid":`sidebar-collapse-toggle`,"aria-pressed":e,"aria-label":D,onClick:k,className:c.cn(d.SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,A?`opacity-100 pointer-events-auto`:`opacity-0 pointer-events-none`),children:(0,x.jsx)(i.ChevronRight,{width:14,height:14})}):null]}),!e&&b?(0,x.jsx)(`button`,{type:`button`,"data-testid":`sidebar-collapse-toggle`,"aria-pressed":e,"aria-label":D,onClick:O,className:c.cn(`hidden md:inline-flex ml-auto`,d.SIDEBAR_ICON_BUTTON_CLASS,`text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]`),children:(0,x.jsx)(r.ChevronLeft,{width:14,height:14})}):null,!e&&T?(0,x.jsx)(`button`,{type:`button`,"data-testid":`sidebar-mobile-drawer-close`,onClick:E,"aria-label":B(n.I18nKey.SIDEBAR$CLOSE_MENU),className:c.cn(`inline-flex ml-auto`,d.SIDEBAR_ICON_BUTTON_CLASS,`text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]`),children:(0,x.jsx)(r.ChevronLeft,{width:14,height:14})}):null]}),(0,x.jsxs)(`nav`,{className:d.sidebarNavListClassName(e),children:[(0,x.jsx)(_.CommandMenuTrigger,{collapsed:e}),(0,x.jsx)(p.SidebarNavLink,{to:`/conversations`,end:!0,label:B(n.I18nKey.SIDEBAR$NEW_CHAT),testId:`sidebar-conversations-link`,collapsed:e,icon:(0,x.jsx)(a.Plus,{width:S,height:S})}),(0,x.jsx)(p.SidebarNavLink,{to:`/customize`,label:B(n.I18nKey.NAV$CUSTOMIZE),testId:`sidebar-skills-link`,collapsed:e,forceActive:j,icon:(0,x.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:S,height:S,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:[(0,x.jsx)(`path`,{d:`M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z`}),(0,x.jsx)(`path`,{d:`m7 16.5-4.74-2.85`}),(0,x.jsx)(`path`,{d:`m7 16.5 5-3`}),(0,x.jsx)(`path`,{d:`M7 16.5v5.17`}),(0,x.jsx)(`path`,{d:`M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z`}),(0,x.jsx)(`path`,{d:`m17 16.5-5-3`}),(0,x.jsx)(`path`,{d:`m17 16.5 4.74-2.85`}),(0,x.jsx)(`path`,{d:`m17 16.5v5.17`}),(0,x.jsx)(`path`,{d:`M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z`}),(0,x.jsx)(`path`,{d:`M12 8 7.26 5.15`}),(0,x.jsx)(`path`,{d:`m12 8 4.74-2.85`}),(0,x.jsx)(`path`,{d:`M12 13.5V8`})]})}),(0,x.jsx)(p.SidebarNavLink,{to:`/automations`,label:B(n.I18nKey.SIDEBAR$AUTOMATIONS),testId:`sidebar-automations-link`,collapsed:e,icon:(0,x.jsx)(y.default,{width:S,height:S})})]}),(0,x.jsx)(v.SidebarConversationList,{collapsed:e}),e&&b?(0,x.jsxs)(`nav`,{className:c.cn(d.sidebarNavListClassName(e),`mt-auto pb-2 cursor-pointer`),children:[(0,x.jsx)(l.StyledTooltip,{content:B(n.I18nKey.SIDEBAR$SETTINGS),placement:`right`,children:(0,x.jsxs)(u.NavigationLink,{to:`/settings`,"data-testid":`collapsed-settings-link`,"aria-label":B(n.I18nKey.SIDEBAR$SETTINGS),className:d.sidebarNavRowClassName({collapsed:!0}),children:[(0,x.jsx)(f.SidebarCollapsedIconSlot,{active:M.startsWith(`/settings`),children:(0,x.jsx)(s.Settings,{width:S,height:S})}),(0,x.jsx)(`span`,{className:d.sidebarNavLabelClassName(!0),children:B(n.I18nKey.SIDEBAR$SETTINGS)})]})}),(0,x.jsxs)(`div`,{className:`relative`,ref:I,onMouseEnter:()=>{V.current&&=(clearTimeout(V.current),null),F(!0)},onMouseLeave:()=>{V.current=setTimeout(()=>F(!1),150)},children:[(0,x.jsxs)(`button`,{type:`button`,"data-testid":`collapsed-backend-selector-link`,"aria-label":B(n.I18nKey.BACKEND$MANAGE),"aria-expanded":P,onMouseDown:e=>{e.preventDefault(),e.stopPropagation()},onMouseUp:e=>e.stopPropagation(),className:c.cn(d.sidebarNavRowClassName({collapsed:!0}),`relative`),children:[(0,x.jsx)(f.SidebarCollapsedIconSlot,{active:P,children:(0,x.jsxs)(`span`,{className:`relative inline-flex size-[18px] shrink-0 items-center justify-center`,children:[(0,x.jsx)(h.BackendStatusDot,{isConnected:N?.isConnected??null,className:`absolute -left-0.5 -top-0.5 z-[1] pointer-events-none`}),(0,x.jsx)(o.Server,{width:S,height:S})]})}),(0,x.jsx)(`span`,{className:d.sidebarNavLabelClassName(!0),children:B(n.I18nKey.BACKEND$MANAGE)})]}),P?(0,x.jsx)(`div`,{className:`absolute bottom-[-4px] left-full pl-2.5 z-40 w-[272px]`,onClick:e=>e.stopPropagation(),children:(0,x.jsx)(g.BackendSelector,{sidebarCollapsed:e,hideTrigger:!0,defaultOpen:!0,openUpward:!0,onSelectOption:()=>F(!1),onOpenAddBackend:R,onOpenManageBackends:z})}):null]})]}):null,e?null:(0,x.jsx)(`div`,{className:c.cn(`flex flex-col items-stretch max-w-none box-border shrink-0`,`-ml-2.5 w-[calc(100%+0.625rem)] border-t border-[var(--oh-border)] pt-2 px-2.5`),children:(0,x.jsx)(g.BackendSelector,{sidebarCollapsed:e,openUpward:!0})})]})}exports.SidebarRailBody=T;
+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/chevron-left.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),a=require("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),o=require("../../../node_modules/lucide-react/dist/esm/icons/server.cjs"),s=require("../../../node_modules/lucide-react/dist/esm/icons/settings.cjs"),c=require("../../../utils/utils.cjs"),l=require("../../../manifests/automation-interface.cjs"),u=require("../../shared/buttons/styled-tooltip.cjs"),d=require("../../shared/navigation-link.cjs"),f=require("./sidebar-layout.cjs"),p=require("./sidebar-collapsed-icon-slot.cjs"),m=require("./sidebar-nav-link.cjs"),h=require("../../shared/buttons/openhands-logo-button.cjs"),g=require("../backends/backend-status-dot.cjs"),_=require("../backends/backend-selector.cjs"),v=require("../command-menu/command-menu-trigger.cjs"),y=require("./sidebar-conversation-list.cjs"),b=require("../../../icons/automations.cjs");let x=require("react");x=e.__toESM(x,1);let S=require("react/jsx-runtime");var C=18,w=34,T=Math.round(w*30/46);function E({collapsed:e,showCollapseToggle:x,showMobileCloseButton:E=!1,onCloseMobile:D,collapseToggleLabel:O,onCollapse:k,onExpand:A,showCollapsedExpandButton:j,isExtensionsActive:M,currentPath:N,activeBackendHealth:P,collapsedBackendPopoverOpen:F,setCollapsedBackendPopoverOpen:I,collapsedBackendPopoverRef:L,collapsedBackendCloseTimer:R,onOpenAddBackend:z,onOpenManageBackends:B}){let{t:V}=t.useTranslation(`openhands`),H=R;return(0,S.jsxs)(`div`,{className:`flex min-h-0 flex-1 flex-col`,children:[(0,S.jsxs)(`div`,{className:f.sidebarHeaderRowClassName(e),children:[(0,S.jsxs)(`div`,{className:c.cn(e&&x?f.SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS:`flex min-w-0 shrink-0 items-center`),children:[(0,S.jsx)(`div`,{className:c.cn(e&&x&&`flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150`,e&&j&&`opacity-0`),children:(0,S.jsx)(h.OpenHandsLogoButton,{logoWidth:w,logoHeight:T,logoClassName:`max-w-none`,className:c.cn(f.SIDEBAR_ICON_SLOT_CLASS,`overflow-visible`)})}),e&&x?(0,S.jsx)(`button`,{type:`button`,"data-testid":`sidebar-collapse-toggle`,"aria-pressed":e,"aria-label":O,onClick:A,className:c.cn(f.SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,j?`opacity-100 pointer-events-auto`:`opacity-0 pointer-events-none`),children:(0,S.jsx)(i.ChevronRight,{width:14,height:14})}):null]}),!e&&x?(0,S.jsx)(`button`,{type:`button`,"data-testid":`sidebar-collapse-toggle`,"aria-pressed":e,"aria-label":O,onClick:k,className:c.cn(`hidden md:inline-flex ml-auto`,f.SIDEBAR_ICON_BUTTON_CLASS,`text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]`),children:(0,S.jsx)(r.ChevronLeft,{width:14,height:14})}):null,!e&&E?(0,S.jsx)(`button`,{type:`button`,"data-testid":`sidebar-mobile-drawer-close`,onClick:D,"aria-label":V(n.I18nKey.SIDEBAR$CLOSE_MENU),className:c.cn(`inline-flex ml-auto`,f.SIDEBAR_ICON_BUTTON_CLASS,`text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]`),children:(0,S.jsx)(r.ChevronLeft,{width:14,height:14})}):null]}),(0,S.jsxs)(`nav`,{className:f.sidebarNavListClassName(e),children:[(0,S.jsx)(v.CommandMenuTrigger,{collapsed:e}),(0,S.jsx)(m.SidebarNavLink,{to:`/conversations`,end:!0,label:V(n.I18nKey.SIDEBAR$NEW_CHAT),testId:`sidebar-conversations-link`,collapsed:e,icon:(0,S.jsx)(a.Plus,{width:C,height:C})}),(0,S.jsx)(m.SidebarNavLink,{to:`/customize`,label:V(n.I18nKey.NAV$CUSTOMIZE),testId:`sidebar-skills-link`,collapsed:e,forceActive:M,icon:(0,S.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:C,height:C,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:[(0,S.jsx)(`path`,{d:`M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z`}),(0,S.jsx)(`path`,{d:`m7 16.5-4.74-2.85`}),(0,S.jsx)(`path`,{d:`m7 16.5 5-3`}),(0,S.jsx)(`path`,{d:`M7 16.5v5.17`}),(0,S.jsx)(`path`,{d:`M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z`}),(0,S.jsx)(`path`,{d:`m17 16.5-5-3`}),(0,S.jsx)(`path`,{d:`m17 16.5 4.74-2.85`}),(0,S.jsx)(`path`,{d:`m17 16.5v5.17`}),(0,S.jsx)(`path`,{d:`M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z`}),(0,S.jsx)(`path`,{d:`M12 8 7.26 5.15`}),(0,S.jsx)(`path`,{d:`m12 8 4.74-2.85`}),(0,S.jsx)(`path`,{d:`M12 13.5V8`})]})}),(0,S.jsx)(m.SidebarNavLink,{to:l.automationListPath(),label:l.getInterfaceCopy().sidebarLabel??V(n.I18nKey.SIDEBAR$AUTOMATIONS),testId:`sidebar-automations-link`,collapsed:e,icon:(0,S.jsx)(b.default,{width:C,height:C})})]}),(0,S.jsx)(y.SidebarConversationList,{collapsed:e}),e&&x?(0,S.jsxs)(`nav`,{className:c.cn(f.sidebarNavListClassName(e),`mt-auto pb-2 cursor-pointer`),children:[(0,S.jsx)(u.StyledTooltip,{content:V(n.I18nKey.SIDEBAR$SETTINGS),placement:`right`,children:(0,S.jsxs)(d.NavigationLink,{to:`/settings`,"data-testid":`collapsed-settings-link`,"aria-label":V(n.I18nKey.SIDEBAR$SETTINGS),className:f.sidebarNavRowClassName({collapsed:!0}),children:[(0,S.jsx)(p.SidebarCollapsedIconSlot,{active:N.startsWith(`/settings`),children:(0,S.jsx)(s.Settings,{width:C,height:C})}),(0,S.jsx)(`span`,{className:f.sidebarNavLabelClassName(!0),children:V(n.I18nKey.SIDEBAR$SETTINGS)})]})}),(0,S.jsxs)(`div`,{className:`relative`,ref:L,onMouseEnter:()=>{H.current&&=(clearTimeout(H.current),null),I(!0)},onMouseLeave:()=>{H.current=setTimeout(()=>I(!1),150)},children:[(0,S.jsxs)(`button`,{type:`button`,"data-testid":`collapsed-backend-selector-link`,"aria-label":V(n.I18nKey.BACKEND$MANAGE),"aria-expanded":F,onMouseDown:e=>{e.preventDefault(),e.stopPropagation()},onMouseUp:e=>e.stopPropagation(),className:c.cn(f.sidebarNavRowClassName({collapsed:!0}),`relative`),children:[(0,S.jsx)(p.SidebarCollapsedIconSlot,{active:F,children:(0,S.jsxs)(`span`,{className:`relative inline-flex size-[18px] shrink-0 items-center justify-center`,children:[(0,S.jsx)(g.BackendStatusDot,{isConnected:P?.isConnected??null,className:`absolute -left-0.5 -top-0.5 z-[1] pointer-events-none`}),(0,S.jsx)(o.Server,{width:C,height:C})]})}),(0,S.jsx)(`span`,{className:f.sidebarNavLabelClassName(!0),children:V(n.I18nKey.BACKEND$MANAGE)})]}),F?(0,S.jsx)(`div`,{className:`absolute bottom-[-4px] left-full pl-2.5 z-40 w-[272px]`,onClick:e=>e.stopPropagation(),children:(0,S.jsx)(_.BackendSelector,{sidebarCollapsed:e,hideTrigger:!0,defaultOpen:!0,openUpward:!0,onSelectOption:()=>I(!1),onOpenAddBackend:z,onOpenManageBackends:B})}):null]})]}):null,e?null:(0,S.jsx)(`div`,{className:c.cn(`flex flex-col items-stretch max-w-none box-border shrink-0`,`-ml-2.5 w-[calc(100%+0.625rem)] border-t border-[var(--oh-border)] pt-2 px-2.5`),children:(0,S.jsx)(_.BackendSelector,{sidebarCollapsed:e,openUpward:!0})})]})}exports.SidebarRailBody=E;
 //# sourceMappingURL=sidebar-rail-body.cjs.map

package/dist/components/features/sidebar/sidebar-rail-body.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-rail-body.cjs","names":[],"sources":["../../../../src/components/features/sidebar/sidebar-rail-body.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Plus,\n  Server,\n  Settings,\n} from \"lucide-react\";\nimport { OpenHandsLogoButton } from \"#/components/shared/buttons/openhands-logo-button\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { SidebarCollapsedIconSlot } from \"./sidebar-collapsed-icon-slot\";\nimport { SidebarNavLink } from \"./sidebar-nav-link\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { BackendSelector } from \"#/components/features/backends/backend-selector\";\nimport { BackendStatusDot } from \"#/components/features/backends/backend-status-dot\";\nimport { CommandMenuTrigger } from \"#/components/features/command-menu/command-menu-trigger\";\nimport { SidebarConversationList } from \"./sidebar-conversation-list\";\nimport AutomationsIcon from \"#/icons/automations.svg?react\";\nimport {\n  SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,\n  SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS,\n  SIDEBAR_ICON_BUTTON_CLASS,\n  SIDEBAR_ICON_SLOT_CLASS,\n  sidebarHeaderRowClassName,\n  sidebarNavLabelClassName,\n  sidebarNavListClassName,\n  sidebarNavRowClassName,\n} from \"./sidebar-layout\";\n\nconst ICON_SIZE = 18;\nconst SIDEBAR_LOGO_WIDTH = 34;\nconst SIDEBAR_LOGO_HEIGHT = Math.round((SIDEBAR_LOGO_WIDTH * 30) / 46);\n\nexport interface SidebarRailBodyProps {\n  collapsed: boolean;\n  showCollapseToggle: boolean;\n  showMobileCloseButton?: boolean;\n  onCloseMobile?: () => void;\n  collapseToggleLabel: string;\n  onCollapse: () => void;\n  onExpand: () => void;\n  showCollapsedExpandButton: boolean;\n  isExtensionsActive: boolean;\n  currentPath: string;\n  activeBackendHealth: { isConnected: boolean | null } | undefined;\n  collapsedBackendPopoverOpen: boolean;\n  setCollapsedBackendPopoverOpen: (open: boolean) => void;\n  collapsedBackendPopoverRef: React.RefObject<HTMLDivElement | null>;\n  collapsedBackendCloseTimer: React.MutableRefObject<ReturnType<\n    typeof setTimeout\n  > | null>;\n  onOpenAddBackend: () => void;\n  onOpenManageBackends: () => void;\n}\n\nexport function SidebarRailBody({\n  collapsed,\n  showCollapseToggle,\n  showMobileCloseButton = false,\n  onCloseMobile,\n  collapseToggleLabel,\n  onCollapse,\n  onExpand,\n  showCollapsedExpandButton,\n  isExtensionsActive,\n  currentPath,\n  activeBackendHealth,\n  collapsedBackendPopoverOpen,\n  setCollapsedBackendPopoverOpen,\n  collapsedBackendPopoverRef,\n  collapsedBackendCloseTimer,\n  onOpenAddBackend,\n  onOpenManageBackends,\n}: SidebarRailBodyProps) {\n  const { t } = useTranslation(\"openhands\");\n  const backendCloseTimerRef = collapsedBackendCloseTimer;\n\n  return (\n    <div className=\"flex min-h-0 flex-1 flex-col\">\n      <div className={sidebarHeaderRowClassName(collapsed)}>\n        <div\n          className={cn(\n            collapsed && showCollapseToggle\n              ? SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS\n              : \"flex min-w-0 shrink-0 items-center\",\n          )}\n        >\n          <div\n            className={cn(\n              collapsed &&\n                showCollapseToggle &&\n                \"flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150\",\n              collapsed && showCollapsedExpandButton && \"opacity-0\",\n            )}\n          >\n            <OpenHandsLogoButton\n              logoWidth={SIDEBAR_LOGO_WIDTH}\n              logoHeight={SIDEBAR_LOGO_HEIGHT}\n              logoClassName=\"max-w-none\"\n              className={cn(SIDEBAR_ICON_SLOT_CLASS, \"overflow-visible\")}\n            />\n          </div>\n          {collapsed && showCollapseToggle ? (\n            <button\n              type=\"button\"\n              data-testid=\"sidebar-collapse-toggle\"\n              aria-pressed={collapsed}\n              aria-label={collapseToggleLabel}\n              onClick={onExpand}\n              className={cn(\n                SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,\n                showCollapsedExpandButton\n                  ? \"opacity-100 pointer-events-auto\"\n                  : \"opacity-0 pointer-events-none\",\n              )}\n            >\n              <ChevronRight width={14} height={14} />\n            </button>\n          ) : null}\n        </div>\n        {!collapsed && showCollapseToggle ? (\n          <button\n            type=\"button\"\n            data-testid=\"sidebar-collapse-toggle\"\n            aria-pressed={collapsed}\n            aria-label={collapseToggleLabel}\n            onClick={onCollapse}\n            className={cn(\n              \"hidden md:inline-flex ml-auto\",\n              SIDEBAR_ICON_BUTTON_CLASS,\n              \"text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]\",\n            )}\n          >\n            <ChevronLeft width={14} height={14} />\n          </button>\n        ) : null}\n        {!collapsed && showMobileCloseButton ? (\n          <button\n            type=\"button\"\n            data-testid=\"sidebar-mobile-drawer-close\"\n            onClick={onCloseMobile}\n            aria-label={t(I18nKey.SIDEBAR$CLOSE_MENU)}\n            className={cn(\n              \"inline-flex ml-auto\",\n              SIDEBAR_ICON_BUTTON_CLASS,\n              \"text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]\",\n            )}\n          >\n            <ChevronLeft width={14} height={14} />\n          </button>\n        ) : null}\n      </div>\n\n      <nav className={sidebarNavListClassName(collapsed)}>\n        <CommandMenuTrigger collapsed={collapsed} />\n        <SidebarNavLink\n          to=\"/conversations\"\n          end\n          label={t(I18nKey.SIDEBAR$NEW_CHAT)}\n          testId=\"sidebar-conversations-link\"\n          collapsed={collapsed}\n          icon={<Plus width={ICON_SIZE} height={ICON_SIZE} />}\n        />\n        <SidebarNavLink\n          to=\"/customize\"\n          label={t(I18nKey.NAV$CUSTOMIZE)}\n          testId=\"sidebar-skills-link\"\n          collapsed={collapsed}\n          forceActive={isExtensionsActive}\n          icon={\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width={ICON_SIZE}\n              height={ICON_SIZE}\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z\" />\n              <path d=\"m7 16.5-4.74-2.85\" />\n              <path d=\"m7 16.5 5-3\" />\n              <path d=\"M7 16.5v5.17\" />\n              <path d=\"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z\" />\n              <path d=\"m17 16.5-5-3\" />\n              <path d=\"m17 16.5 4.74-2.85\" />\n              <path d=\"m17 16.5v5.17\" />\n              <path d=\"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z\" />\n              <path d=\"M12 8 7.26 5.15\" />\n              <path d=\"m12 8 4.74-2.85\" />\n              <path d=\"M12 13.5V8\" />\n            </svg>\n          }\n        />\n        <SidebarNavLink\n          to=\"/automations\"\n          label={t(I18nKey.SIDEBAR$AUTOMATIONS)}\n          testId=\"sidebar-automations-link\"\n          collapsed={collapsed}\n          icon={<AutomationsIcon width={ICON_SIZE} height={ICON_SIZE} />}\n        />\n      </nav>\n\n      <SidebarConversationList collapsed={collapsed} />\n\n      {collapsed && showCollapseToggle ? (\n        <nav\n          className={cn(\n            sidebarNavListClassName(collapsed),\n            \"mt-auto pb-2 cursor-pointer\",\n          )}\n        >\n          <StyledTooltip\n            content={t(I18nKey.SIDEBAR$SETTINGS)}\n            placement=\"right\"\n          >\n            <NavigationLink\n              to=\"/settings\"\n              data-testid=\"collapsed-settings-link\"\n              aria-label={t(I18nKey.SIDEBAR$SETTINGS)}\n              className={sidebarNavRowClassName({ collapsed: true })}\n            >\n              <SidebarCollapsedIconSlot\n                active={currentPath.startsWith(\"/settings\")}\n              >\n                <Settings width={ICON_SIZE} height={ICON_SIZE} />\n              </SidebarCollapsedIconSlot>\n              <span className={sidebarNavLabelClassName(true)}>\n                {t(I18nKey.SIDEBAR$SETTINGS)}\n              </span>\n            </NavigationLink>\n          </StyledTooltip>\n          <div\n            className=\"relative\"\n            ref={collapsedBackendPopoverRef}\n            onMouseEnter={() => {\n              if (backendCloseTimerRef.current) {\n                clearTimeout(backendCloseTimerRef.current);\n                backendCloseTimerRef.current = null;\n              }\n              setCollapsedBackendPopoverOpen(true);\n            }}\n            onMouseLeave={() => {\n              backendCloseTimerRef.current = setTimeout(\n                () => setCollapsedBackendPopoverOpen(false),\n                150,\n              );\n            }}\n          >\n            <button\n              type=\"button\"\n              data-testid=\"collapsed-backend-selector-link\"\n              aria-label={t(I18nKey.BACKEND$MANAGE)}\n              aria-expanded={collapsedBackendPopoverOpen}\n              onMouseDown={(event) => {\n                event.preventDefault();\n                event.stopPropagation();\n              }}\n              onMouseUp={(event) => event.stopPropagation()}\n              className={cn(\n                sidebarNavRowClassName({ collapsed: true }),\n                \"relative\",\n              )}\n            >\n              <SidebarCollapsedIconSlot active={collapsedBackendPopoverOpen}>\n                <span className=\"relative inline-flex size-[18px] shrink-0 items-center justify-center\">\n                  <BackendStatusDot\n                    isConnected={activeBackendHealth?.isConnected ?? null}\n                    className=\"absolute -left-0.5 -top-0.5 z-[1] pointer-events-none\"\n                  />\n                  <Server width={ICON_SIZE} height={ICON_SIZE} />\n                </span>\n              </SidebarCollapsedIconSlot>\n              <span className={sidebarNavLabelClassName(true)}>\n                {t(I18nKey.BACKEND$MANAGE)}\n              </span>\n            </button>\n            {collapsedBackendPopoverOpen ? (\n              <div\n                className=\"absolute bottom-[-4px] left-full pl-2.5 z-40 w-[272px]\"\n                onClick={(event) => event.stopPropagation()}\n              >\n                <BackendSelector\n                  sidebarCollapsed={collapsed}\n                  hideTrigger\n                  defaultOpen\n                  openUpward\n                  onSelectOption={() => setCollapsedBackendPopoverOpen(false)}\n                  onOpenAddBackend={onOpenAddBackend}\n                  onOpenManageBackends={onOpenManageBackends}\n                />\n              </div>\n            ) : null}\n          </div>\n        </nav>\n      ) : null}\n\n      {!collapsed ? (\n        <div\n          className={cn(\n            \"flex flex-col items-stretch max-w-none box-border shrink-0\",\n            \"-ml-2.5 w-[calc(100%+0.625rem)] border-t border-[var(--oh-border)] pt-2 px-2.5\",\n          )}\n        >\n          <BackendSelector sidebarCollapsed={collapsed} openUpward />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"sidebar-rail-body.cjs","names":[],"sources":["../../../../src/components/features/sidebar/sidebar-rail-body.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Plus,\n  Server,\n  Settings,\n} from \"lucide-react\";\nimport { OpenHandsLogoButton } from \"#/components/shared/buttons/openhands-logo-button\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport {\n  automationListPath,\n  getInterfaceCopy,\n} from \"#/manifests/automation-interface\";\nimport { SidebarCollapsedIconSlot } from \"./sidebar-collapsed-icon-slot\";\nimport { SidebarNavLink } from \"./sidebar-nav-link\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { BackendSelector } from \"#/components/features/backends/backend-selector\";\nimport { BackendStatusDot } from \"#/components/features/backends/backend-status-dot\";\nimport { CommandMenuTrigger } from \"#/components/features/command-menu/command-menu-trigger\";\nimport { SidebarConversationList } from \"./sidebar-conversation-list\";\nimport AutomationsIcon from \"#/icons/automations.svg?react\";\nimport {\n  SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,\n  SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS,\n  SIDEBAR_ICON_BUTTON_CLASS,\n  SIDEBAR_ICON_SLOT_CLASS,\n  sidebarHeaderRowClassName,\n  sidebarNavLabelClassName,\n  sidebarNavListClassName,\n  sidebarNavRowClassName,\n} from \"./sidebar-layout\";\n\nconst ICON_SIZE = 18;\nconst SIDEBAR_LOGO_WIDTH = 34;\nconst SIDEBAR_LOGO_HEIGHT = Math.round((SIDEBAR_LOGO_WIDTH * 30) / 46);\n\nexport interface SidebarRailBodyProps {\n  collapsed: boolean;\n  showCollapseToggle: boolean;\n  showMobileCloseButton?: boolean;\n  onCloseMobile?: () => void;\n  collapseToggleLabel: string;\n  onCollapse: () => void;\n  onExpand: () => void;\n  showCollapsedExpandButton: boolean;\n  isExtensionsActive: boolean;\n  currentPath: string;\n  activeBackendHealth: { isConnected: boolean | null } | undefined;\n  collapsedBackendPopoverOpen: boolean;\n  setCollapsedBackendPopoverOpen: (open: boolean) => void;\n  collapsedBackendPopoverRef: React.RefObject<HTMLDivElement | null>;\n  collapsedBackendCloseTimer: React.MutableRefObject<ReturnType<\n    typeof setTimeout\n  > | null>;\n  onOpenAddBackend: () => void;\n  onOpenManageBackends: () => void;\n}\n\nexport function SidebarRailBody({\n  collapsed,\n  showCollapseToggle,\n  showMobileCloseButton = false,\n  onCloseMobile,\n  collapseToggleLabel,\n  onCollapse,\n  onExpand,\n  showCollapsedExpandButton,\n  isExtensionsActive,\n  currentPath,\n  activeBackendHealth,\n  collapsedBackendPopoverOpen,\n  setCollapsedBackendPopoverOpen,\n  collapsedBackendPopoverRef,\n  collapsedBackendCloseTimer,\n  onOpenAddBackend,\n  onOpenManageBackends,\n}: SidebarRailBodyProps) {\n  const { t } = useTranslation(\"openhands\");\n  const backendCloseTimerRef = collapsedBackendCloseTimer;\n\n  return (\n    <div className=\"flex min-h-0 flex-1 flex-col\">\n      <div className={sidebarHeaderRowClassName(collapsed)}>\n        <div\n          className={cn(\n            collapsed && showCollapseToggle\n              ? SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS\n              : \"flex min-w-0 shrink-0 items-center\",\n          )}\n        >\n          <div\n            className={cn(\n              collapsed &&\n                showCollapseToggle &&\n                \"flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150\",\n              collapsed && showCollapsedExpandButton && \"opacity-0\",\n            )}\n          >\n            <OpenHandsLogoButton\n              logoWidth={SIDEBAR_LOGO_WIDTH}\n              logoHeight={SIDEBAR_LOGO_HEIGHT}\n              logoClassName=\"max-w-none\"\n              className={cn(SIDEBAR_ICON_SLOT_CLASS, \"overflow-visible\")}\n            />\n          </div>\n          {collapsed && showCollapseToggle ? (\n            <button\n              type=\"button\"\n              data-testid=\"sidebar-collapse-toggle\"\n              aria-pressed={collapsed}\n              aria-label={collapseToggleLabel}\n              onClick={onExpand}\n              className={cn(\n                SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,\n                showCollapsedExpandButton\n                  ? \"opacity-100 pointer-events-auto\"\n                  : \"opacity-0 pointer-events-none\",\n              )}\n            >\n              <ChevronRight width={14} height={14} />\n            </button>\n          ) : null}\n        </div>\n        {!collapsed && showCollapseToggle ? (\n          <button\n            type=\"button\"\n            data-testid=\"sidebar-collapse-toggle\"\n            aria-pressed={collapsed}\n            aria-label={collapseToggleLabel}\n            onClick={onCollapse}\n            className={cn(\n              \"hidden md:inline-flex ml-auto\",\n              SIDEBAR_ICON_BUTTON_CLASS,\n              \"text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]\",\n            )}\n          >\n            <ChevronLeft width={14} height={14} />\n          </button>\n        ) : null}\n        {!collapsed && showMobileCloseButton ? (\n          <button\n            type=\"button\"\n            data-testid=\"sidebar-mobile-drawer-close\"\n            onClick={onCloseMobile}\n            aria-label={t(I18nKey.SIDEBAR$CLOSE_MENU)}\n            className={cn(\n              \"inline-flex ml-auto\",\n              SIDEBAR_ICON_BUTTON_CLASS,\n              \"text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]\",\n            )}\n          >\n            <ChevronLeft width={14} height={14} />\n          </button>\n        ) : null}\n      </div>\n\n      <nav className={sidebarNavListClassName(collapsed)}>\n        <CommandMenuTrigger collapsed={collapsed} />\n        <SidebarNavLink\n          to=\"/conversations\"\n          end\n          label={t(I18nKey.SIDEBAR$NEW_CHAT)}\n          testId=\"sidebar-conversations-link\"\n          collapsed={collapsed}\n          icon={<Plus width={ICON_SIZE} height={ICON_SIZE} />}\n        />\n        <SidebarNavLink\n          to=\"/customize\"\n          label={t(I18nKey.NAV$CUSTOMIZE)}\n          testId=\"sidebar-skills-link\"\n          collapsed={collapsed}\n          forceActive={isExtensionsActive}\n          icon={\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width={ICON_SIZE}\n              height={ICON_SIZE}\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z\" />\n              <path d=\"m7 16.5-4.74-2.85\" />\n              <path d=\"m7 16.5 5-3\" />\n              <path d=\"M7 16.5v5.17\" />\n              <path d=\"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z\" />\n              <path d=\"m17 16.5-5-3\" />\n              <path d=\"m17 16.5 4.74-2.85\" />\n              <path d=\"m17 16.5v5.17\" />\n              <path d=\"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z\" />\n              <path d=\"M12 8 7.26 5.15\" />\n              <path d=\"m12 8 4.74-2.85\" />\n              <path d=\"M12 13.5V8\" />\n            </svg>\n          }\n        />\n        <SidebarNavLink\n          to={automationListPath()}\n          label={\n            getInterfaceCopy().sidebarLabel ?? t(I18nKey.SIDEBAR$AUTOMATIONS)\n          }\n          testId=\"sidebar-automations-link\"\n          collapsed={collapsed}\n          icon={<AutomationsIcon width={ICON_SIZE} height={ICON_SIZE} />}\n        />\n      </nav>\n\n      <SidebarConversationList collapsed={collapsed} />\n\n      {collapsed && showCollapseToggle ? (\n        <nav\n          className={cn(\n            sidebarNavListClassName(collapsed),\n            \"mt-auto pb-2 cursor-pointer\",\n          )}\n        >\n          <StyledTooltip\n            content={t(I18nKey.SIDEBAR$SETTINGS)}\n            placement=\"right\"\n          >\n            <NavigationLink\n              to=\"/settings\"\n              data-testid=\"collapsed-settings-link\"\n              aria-label={t(I18nKey.SIDEBAR$SETTINGS)}\n              className={sidebarNavRowClassName({ collapsed: true })}\n            >\n              <SidebarCollapsedIconSlot\n                active={currentPath.startsWith(\"/settings\")}\n              >\n                <Settings width={ICON_SIZE} height={ICON_SIZE} />\n              </SidebarCollapsedIconSlot>\n              <span className={sidebarNavLabelClassName(true)}>\n                {t(I18nKey.SIDEBAR$SETTINGS)}\n              </span>\n            </NavigationLink>\n          </StyledTooltip>\n          <div\n            className=\"relative\"\n            ref={collapsedBackendPopoverRef}\n            onMouseEnter={() => {\n              if (backendCloseTimerRef.current) {\n                clearTimeout(backendCloseTimerRef.current);\n                backendCloseTimerRef.current = null;\n              }\n              setCollapsedBackendPopoverOpen(true);\n            }}\n            onMouseLeave={() => {\n              backendCloseTimerRef.current = setTimeout(\n                () => setCollapsedBackendPopoverOpen(false),\n                150,\n              );\n            }}\n          >\n            <button\n              type=\"button\"\n              data-testid=\"collapsed-backend-selector-link\"\n              aria-label={t(I18nKey.BACKEND$MANAGE)}\n              aria-expanded={collapsedBackendPopoverOpen}\n              onMouseDown={(event) => {\n                event.preventDefault();\n                event.stopPropagation();\n              }}\n              onMouseUp={(event) => event.stopPropagation()}\n              className={cn(\n                sidebarNavRowClassName({ collapsed: true }),\n                \"relative\",\n              )}\n            >\n              <SidebarCollapsedIconSlot active={collapsedBackendPopoverOpen}>\n                <span className=\"relative inline-flex size-[18px] shrink-0 items-center justify-center\">\n                  <BackendStatusDot\n                    isConnected={activeBackendHealth?.isConnected ?? null}\n                    className=\"absolute -left-0.5 -top-0.5 z-[1] pointer-events-none\"\n                  />\n                  <Server width={ICON_SIZE} height={ICON_SIZE} />\n                </span>\n              </SidebarCollapsedIconSlot>\n              <span className={sidebarNavLabelClassName(true)}>\n                {t(I18nKey.BACKEND$MANAGE)}\n              </span>\n            </button>\n            {collapsedBackendPopoverOpen ? (\n              <div\n                className=\"absolute bottom-[-4px] left-full pl-2.5 z-40 w-[272px]\"\n                onClick={(event) => event.stopPropagation()}\n              >\n                <BackendSelector\n                  sidebarCollapsed={collapsed}\n                  hideTrigger\n                  defaultOpen\n                  openUpward\n                  onSelectOption={() => setCollapsedBackendPopoverOpen(false)}\n                  onOpenAddBackend={onOpenAddBackend}\n                  onOpenManageBackends={onOpenManageBackends}\n                />\n              </div>\n            ) : null}\n          </div>\n        </nav>\n      ) : null}\n\n      {!collapsed ? (\n        <div\n          className={cn(\n            \"flex flex-col items-stretch max-w-none box-border shrink-0\",\n            \"-ml-2.5 w-[calc(100%+0.625rem)] border-t border-[var(--oh-border)] pt-2 px-2.5\",\n          )}\n        >\n          <BackendSelector sidebarCollapsed={collapsed} openUpward />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"4tCAoCA,IAAM,EAAY,GACZ,EAAqB,GACrB,EAAsB,KAAK,MAAO,EAAqB,GAAM,EAAE,EAwBrE,SAAgB,EAAgB,CAC9B,YACA,qBACA,wBAAwB,GACxB,gBACA,sBACA,aACA,WACA,4BACA,qBACA,cACA,sBACA,8BACA,iCACA,6BACA,6BACA,mBACA,wBACuB,CACvB,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAuB,EAE7B,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,wCAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,0BAA0B,CAAS,WAAnD,EACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,GAAa,EACT,EAAA,qCACA,oCACN,WALF,EAOE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,GACE,GACA,uFACF,GAAa,GAA6B,WAC5C,YAEA,EAAA,EAAA,KAAC,EAAA,oBAAD,CACE,UAAW,EACX,WAAY,EACZ,cAAc,aACd,UAAW,EAAA,GAAG,EAAA,wBAAyB,kBAAkB,CAC1D,CAAA,CACE,CAAA,EACJ,GAAa,GACZ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAY,0BACZ,eAAc,EACd,aAAY,EACZ,QAAS,EACT,UAAW,EAAA,GACT,EAAA,sCACA,EACI,kCACA,+BACN,YAEA,EAAA,EAAA,KAAC,EAAA,aAAD,CAAc,MAAO,GAAI,OAAQ,EAAK,CAAA,CAChC,CAAA,EACN,IACD,IACJ,CAAC,GAAa,GACb,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAY,0BACZ,eAAc,EACd,aAAY,EACZ,QAAS,EACT,UAAW,EAAA,GACT,gCACA,EAAA,0BACA,6EACF,YAEA,EAAA,EAAA,KAAC,EAAA,YAAD,CAAa,MAAO,GAAI,OAAQ,EAAK,CAAA,CAC/B,CAAA,EACN,KACH,CAAC,GAAa,GACb,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAY,8BACZ,QAAS,EACT,aAAY,EAAE,EAAA,QAAQ,kBAAkB,EACxC,UAAW,EAAA,GACT,sBACA,EAAA,0BACA,6EACF,YAEA,EAAA,EAAA,KAAC,EAAA,YAAD,CAAa,MAAO,GAAI,OAAQ,EAAK,CAAA,CAC/B,CAAA,EACN,IACD,KAEL,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,wBAAwB,CAAS,WAAjD,EACE,EAAA,EAAA,KAAC,EAAA,mBAAD,CAA+B,WAAY,CAAA,GAC3C,EAAA,EAAA,KAAC,EAAA,eAAD,CACE,GAAG,iBACH,IAAA,GACA,MAAO,EAAE,EAAA,QAAQ,gBAAgB,EACjC,OAAO,6BACI,YACX,MAAM,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,MAAO,EAAW,OAAQ,CAAY,CAAA,CACnD,CAAA,GACD,EAAA,EAAA,KAAC,EAAA,eAAD,CACE,GAAG,aACH,MAAO,EAAE,EAAA,QAAQ,aAAa,EAC9B,OAAO,sBACI,YACX,YAAa,EACb,MACE,EAAA,EAAA,MAAC,MAAD,CACE,MAAM,6BACN,MAAO,EACP,OAAQ,EACR,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,cAAY,gBAVd,EAYE,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,yGAA2G,CAAA,GACnH,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,mBAAqB,CAAA,GAC7B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,aAAe,CAAA,GACvB,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,cAAgB,CAAA,GACxB,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,wGAA0G,CAAA,GAClH,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,cAAgB,CAAA,GACxB,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,oBAAsB,CAAA,GAC9B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,eAAiB,CAAA,GACzB,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,kGAAoG,CAAA,GAC5G,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,iBAAmB,CAAA,GAC3B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,iBAAmB,CAAA,GAC3B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,YAAc,CAAA,CACnB,GAER,CAAA,GACD,EAAA,EAAA,KAAC,EAAA,eAAD,CACE,GAAI,EAAA,mBAAmB,EACvB,MACE,EAAA,iBAAiB,EAAE,cAAgB,EAAE,EAAA,QAAQ,mBAAmB,EAElE,OAAO,2BACI,YACX,MAAM,EAAA,EAAA,KAAC,EAAA,QAAD,CAAiB,MAAO,EAAW,OAAQ,CAAY,CAAA,CAC9D,CAAA,CACE,KAEL,EAAA,EAAA,KAAC,EAAA,wBAAD,CAAoC,WAAY,CAAA,EAE/C,GAAa,GACZ,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,EAAA,GACT,EAAA,wBAAwB,CAAS,EACjC,6BACF,WAJF,EAME,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,QAAS,EAAE,EAAA,QAAQ,gBAAgB,EACnC,UAAU,kBAEV,EAAA,EAAA,MAAC,EAAA,eAAD,CACE,GAAG,YACH,cAAY,0BACZ,aAAY,EAAE,EAAA,QAAQ,gBAAgB,EACtC,UAAW,EAAA,uBAAuB,CAAE,UAAW,EAAK,CAAC,WAJvD,EAME,EAAA,EAAA,KAAC,EAAA,yBAAD,CACE,OAAQ,EAAY,WAAW,WAAW,YAE1C,EAAA,EAAA,KAAC,EAAA,SAAD,CAAU,MAAO,EAAW,OAAQ,CAAY,CAAA,CACxB,CAAA,GAC1B,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,yBAAyB,EAAI,WAC3C,EAAE,EAAA,QAAQ,gBAAgB,CACvB,CAAA,CACQ,GACH,CAAA,GACf,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,WACV,IAAK,EACL,iBAAoB,CAClB,AAEE,EAAqB,WADrB,aAAa,EAAqB,OAAO,EACV,MAEjC,EAA+B,EAAI,CACrC,EACA,iBAAoB,CAClB,EAAqB,QAAU,eACvB,EAA+B,EAAK,EAC1C,GACF,CACF,WAfF,EAiBE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,cAAY,kCACZ,aAAY,EAAE,EAAA,QAAQ,cAAc,EACpC,gBAAe,EACf,YAAc,GAAU,CACtB,EAAM,eAAe,EACrB,EAAM,gBAAgB,CACxB,EACA,UAAY,GAAU,EAAM,gBAAgB,EAC5C,UAAW,EAAA,GACT,EAAA,uBAAuB,CAAE,UAAW,EAAK,CAAC,EAC1C,UACF,WAbF,EAeE,EAAA,EAAA,KAAC,EAAA,yBAAD,CAA0B,OAAQ,YAChC,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,iFAAhB,EACE,EAAA,EAAA,KAAC,EAAA,iBAAD,CACE,YAAa,GAAqB,aAAe,KACjD,UAAU,uDACX,CAAA,GACD,EAAA,EAAA,KAAC,EAAA,OAAD,CAAQ,MAAO,EAAW,OAAQ,CAAY,CAAA,CAC1C,GACkB,CAAA,GAC1B,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,yBAAyB,EAAI,WAC3C,EAAE,EAAA,QAAQ,cAAc,CACrB,CAAA,CACA,IACP,GACC,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,yDACV,QAAU,GAAU,EAAM,gBAAgB,YAE1C,EAAA,EAAA,KAAC,EAAA,gBAAD,CACE,iBAAkB,EAClB,YAAA,GACA,YAAA,GACA,WAAA,GACA,mBAAsB,EAA+B,EAAK,EACxC,mBACI,sBACvB,CAAA,CACE,CAAA,EACH,IACD,GACF,IACH,KAEF,EASE,MARF,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,GACT,6DACA,gFACF,YAEA,EAAA,EAAA,KAAC,EAAA,gBAAD,CAAiB,iBAAkB,EAAW,WAAA,EAAY,CAAA,CACvD,CAAA,CAEJ,GAET"}