@openhands/agent-canvas 1.8.0 → 1.9.0

package/dist/components/conversation-events/chat/event-content-helpers/get-event-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-event-content.js","names":[],"sources":["../../../../../src/components/conversation-events/chat/event-content-helpers/get-event-content.tsx"],"sourcesContent":["import { Trans } from \"react-i18next\";\nimport React from \"react\";\nimport {\n  CANVAS_UI_CLIENT_ACTION_KIND,\n  CANVAS_UI_CLIENT_TOOL_NAME,\n} from \"#/constants/canvas-ui\";\nimport {\n  OpenHandsEvent,\n  ObservationEvent,\n  ActionEvent,\n} from \"#/types/agent-server/core\";\nimport {\n  isActionEvent,\n  isObservationEvent,\n  isACPToolCallEvent,\n  isCanvasUIActionEvent,\n} from \"#/types/agent-server/type-guards\";\nimport { MonoComponent } from \"../../../features/chat/mono-component\";\nimport { PathComponent } from \"../../../features/chat/path-component\";\nimport { getActionContent } from \"./get-action-content\";\nimport { getObservationContent } from \"./get-observation-content\";\nimport {\n  getACPToolCallContent,\n  getACPToolCallTitleKey,\n  stripRedundantTitlePrefix,\n} from \"./get-acp-tool-call-content\";\nimport { TaskTrackingObservationContent } from \"../task-tracking/task-tracking-observation-content\";\nimport { TaskTrackerObservation } from \"#/types/agent-server/core/base/observation\";\nimport { SkillReadyEvent, isSkillReadyEvent } from \"./create-skill-ready-event\";\nimport { resolveVisualizerBody } from \"../../../features/chat/tool-visualizers/dispatcher\";\nimport i18n from \"#/i18n\";\nimport { I18nKey } from \"#/i18n/declaration\";\n\nconst trimText = (text: string, maxLength: number): string => {\n  if (!text) return \"\";\n  return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;\n};\n\n// Helper function to create title from translation key\nconst createTitleFromKey = (\n  key: string,\n  values: Record<string, unknown>,\n): React.ReactNode => {\n  if (!i18n.exists(key)) {\n    return key;\n  }\n\n  return (\n    <Trans\n      ns=\"openhands\"\n      i18nKey={key}\n      values={values}\n      components={{\n        path: <PathComponent />,\n        cmd: <MonoComponent />,\n      }}\n    />\n  );\n};\n\n/**\n * Detects the agent-server's default summary fallback, which has the shape\n * `{tool_name}: {json-args}` (see `_extract_summary` in\n * `openhands/sdk/agent/agent.py`). When the LLM omits a summary the server\n * dumps the raw arguments JSON, which renders as a huge unreadable blob in\n * the chat. Treat that case as \"no summary\" so the action-kind specific\n * title (e.g. \"Editing <path>\", \"Running <cmd>\") is used instead.\n */\nconst isServerFallbackSummary = (summary: string): boolean =>\n  /^[a-z][a-z0-9_]*\\s*:\\s*[[{]/i.test(summary);\n\nconst getSummaryTitleForActionEvent = (\n  event: ActionEvent,\n): React.ReactNode | null => {\n  const summary = event.summary?.trim().replace(/\\s+/g, \" \") || \"\";\n  if (!summary || isServerFallbackSummary(summary)) {\n    return null;\n  }\n  return summary;\n};\n\nconst getNonEmptyString = (\n  value: unknown,\n  maxLength?: number,\n): string | null => {\n  if (typeof value !== \"string\") {\n    return null;\n  }\n\n  const trimmed = value.trim();\n  if (!trimmed) {\n    return null;\n  }\n\n  return maxLength ? trimText(trimmed, maxLength) : trimmed;\n};\n\nconst getVisionInspectActionTitle = (\n  event: ActionEvent,\n): React.ReactNode | null => {\n  if (event.tool_name !== \"inspect_image_with_vision\") {\n    return null;\n  }\n\n  const action = event.action as unknown as Record<string, unknown>;\n  const profileName = getNonEmptyString(action.profile_name);\n\n  return profileName\n    ? `Describing image with ${profileName}`\n    : \"Describing image with auxiliary vision LLM\";\n};\n\nconst getVisionInspectObservationTitle = (\n  event: ObservationEvent,\n  correspondingAction?: ActionEvent,\n): React.ReactNode | null => {\n  const actionToolName = correspondingAction?.tool_name;\n  const observation = event.observation as unknown as Record<string, unknown>;\n  const observationToolName = getNonEmptyString(observation.tool_name);\n\n  if (\n    actionToolName !== \"inspect_image_with_vision\" &&\n    observationToolName !== \"inspect_image_with_vision\" &&\n    String(event.observation.kind) !== \"VisionInspectObservation\"\n  ) {\n    return null;\n  }\n\n  const action = (correspondingAction?.action ?? {}) as unknown as Record<\n    string,\n    unknown\n  >;\n  const label =\n    getNonEmptyString(action.profile_name) ??\n    getNonEmptyString(observation.profile_name) ??\n    getNonEmptyString(observation.base_url, 80) ??\n    getNonEmptyString(observation.endpoint, 80) ??\n    getNonEmptyString(observation.model, 80);\n\n  return label\n    ? `Describing image with ${label}`\n    : \"Describing image with auxiliary vision LLM\";\n};\n\n// Action Event Processing\nconst getActionEventTitle = (event: OpenHandsEvent): React.ReactNode => {\n  // Early return if not an action event\n  if (!isActionEvent(event)) {\n    return \"\";\n  }\n\n  const visionInspectTitle = getVisionInspectActionTitle(event);\n  if (visionInspectTitle) {\n    return visionInspectTitle;\n  }\n\n  const summaryTitle = getSummaryTitleForActionEvent(event);\n  if (summaryTitle) {\n    return summaryTitle;\n  }\n\n  const actionType = event.action.kind;\n  let actionKey = \"\";\n  let actionValues: Record<string, unknown> = {};\n\n  switch (actionType) {\n    case \"ExecuteBashAction\":\n    case \"TerminalAction\":\n      actionKey = \"ACTION_MESSAGE$RUN\";\n      actionValues = {\n        command: trimText(event.action.command, 80),\n      };\n      break;\n    case \"FileEditorAction\":\n    case \"StrReplaceEditorAction\":\n      if (event.action.command === \"view\") {\n        actionKey = \"ACTION_MESSAGE$READ\";\n      } else if (event.action.command === \"create\") {\n        actionKey = \"ACTION_MESSAGE$WRITE\";\n      } else {\n        actionKey = \"ACTION_MESSAGE$EDIT\";\n      }\n      actionValues = {\n        path: event.action.path,\n      };\n      break;\n    case \"MCPToolAction\":\n      actionKey = \"ACTION_MESSAGE$CALL_TOOL_MCP\";\n      actionValues = {\n        mcp_tool_name: event.tool_name,\n      };\n      break;\n    case \"InvokeSkillAction\":\n      actionKey = \"ACTION_MESSAGE$INVOKE_SKILL\";\n      actionValues = {\n        name: event.action.name,\n      };\n      break;\n    case \"TaskAction\":\n      actionKey = \"ACTION_MESSAGE$TASK\";\n      actionValues = {\n        name: event.action.subagent_type,\n      };\n      break;\n    case \"ThinkAction\":\n      actionKey = \"ACTION_MESSAGE$THINK\";\n      break;\n    case \"FinishAction\":\n      actionKey = \"ACTION_MESSAGE$FINISH\";\n      break;\n    case \"TaskTrackerAction\":\n      actionKey = \"ACTION_MESSAGE$TASK_TRACKING\";\n      break;\n    case \"GrepAction\":\n      actionKey = \"ACTION_MESSAGE$GREP\";\n      actionValues = {\n        pattern:\n          \"pattern\" in event.action && event.action.pattern\n            ? trimText(String(event.action.pattern), 50)\n            : \"\",\n      };\n      break;\n    case \"GlobAction\":\n      actionKey = \"ACTION_MESSAGE$GLOB\";\n      actionValues = {\n        pattern:\n          \"pattern\" in event.action && event.action.pattern\n            ? trimText(String(event.action.pattern), 50)\n            : \"\",\n      };\n      break;\n    case \"BrowserNavigateAction\":\n    case \"BrowserClickAction\":\n    case \"BrowserTypeAction\":\n    case \"BrowserGetStateAction\":\n    case \"BrowserGetContentAction\":\n    case \"BrowserScrollAction\":\n    case \"BrowserGoBackAction\":\n    case \"BrowserListTabsAction\":\n    case \"BrowserSwitchTabAction\":\n    case \"BrowserCloseTabAction\":\n      actionKey = \"ACTION_MESSAGE$BROWSE\";\n      break;\n    case \"CanvasUIAction\":\n    case CANVAS_UI_CLIENT_ACTION_KIND:\n      return \"CANVASUI\";\n    default:\n      // For unknown actions, use the type name\n      return String(actionType).replace(\"Action\", \"\").toUpperCase();\n  }\n\n  if (actionKey) {\n    return createTitleFromKey(actionKey, actionValues);\n  }\n\n  return actionType;\n};\n\n// Observation Event Processing\nconst getObservationEventTitle = (\n  event: OpenHandsEvent,\n  correspondingAction?: ActionEvent,\n): React.ReactNode => {\n  // Early return if not an observation event\n  if (!isObservationEvent(event)) {\n    return \"\";\n  }\n\n  const visionInspectObservationTitle = getVisionInspectObservationTitle(\n    event,\n    correspondingAction,\n  );\n  if (visionInspectObservationTitle) {\n    return visionInspectObservationTitle;\n  }\n\n  if (correspondingAction) {\n    const visionInspectTitle = getVisionInspectActionTitle(correspondingAction);\n    if (visionInspectTitle) {\n      return visionInspectTitle;\n    }\n\n    const summaryTitle = getSummaryTitleForActionEvent(correspondingAction);\n    if (summaryTitle) {\n      return summaryTitle;\n    }\n  }\n\n  const observationType = event.observation.kind;\n  let observationKey = \"\";\n  let observationValues: Record<string, unknown> = {};\n\n  switch (observationType) {\n    case \"ExecuteBashObservation\":\n    case \"TerminalObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$RUN\";\n      observationValues = {\n        command: event.observation.command\n          ? trimText(event.observation.command, 80)\n          : \"\",\n      };\n      break;\n    case \"FileEditorObservation\":\n    case \"StrReplaceEditorObservation\":\n      if (event.observation.command === \"view\") {\n        observationKey = \"OBSERVATION_MESSAGE$READ\";\n      } else {\n        observationKey = \"OBSERVATION_MESSAGE$EDIT\";\n      }\n      observationValues = {\n        path: event.observation.path || \"\",\n      };\n      break;\n    case \"MCPToolObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$MCP\";\n      observationValues = {\n        mcp_tool_name: event.observation.tool_name,\n      };\n      break;\n    case \"InvokeSkillObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$INVOKE_SKILL\";\n      observationValues = {\n        name: event.observation.skill_name,\n      };\n      break;\n    case \"TaskObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$TASK\";\n      observationValues = {\n        name: event.observation.subagent,\n      };\n      break;\n    case \"CanvasUIObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$CANVAS_UI\";\n      break;\n    case \"ClientToolObservation\":\n      if (event.tool_name === CANVAS_UI_CLIENT_TOOL_NAME) {\n        observationKey = \"OBSERVATION_MESSAGE$CANVAS_UI\";\n        break;\n      }\n      return observationType.replace(\"Observation\", \"\").toUpperCase();\n    case \"SwitchLLMObservation\":\n      observationKey = event.observation.is_error\n        ? \"MODEL$SWITCH_FAILED\"\n        : \"MODEL$SWITCHED_TO_PROFILE\";\n      observationValues = {\n        name: event.observation.profile_name,\n      };\n      break;\n    case \"BrowserObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$BROWSE\";\n      break;\n    case \"TaskTrackerObservation\": {\n      const { command } = event.observation;\n      if (command === \"plan\") {\n        observationKey = \"OBSERVATION_MESSAGE$TASK_TRACKING_PLAN\";\n      } else {\n        // command === \"view\"\n        observationKey = \"OBSERVATION_MESSAGE$TASK_TRACKING_VIEW\";\n      }\n      break;\n    }\n    case \"ThinkObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$THINK\";\n      break;\n    case \"GlobObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$GLOB\";\n      observationValues = {\n        pattern: event.observation.pattern\n          ? trimText(event.observation.pattern, 50)\n          : \"\",\n      };\n      break;\n    case \"GrepObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$GREP\";\n      observationValues = {\n        pattern: event.observation.pattern\n          ? trimText(event.observation.pattern, 50)\n          : \"\",\n      };\n      break;\n    default:\n      // For unknown observations, use the type name\n      return observationType.replace(\"Observation\", \"\").toUpperCase();\n  }\n\n  if (observationKey) {\n    return createTitleFromKey(observationKey, observationValues);\n  }\n\n  return observationType;\n};\n\nconst getCanvasUIClientObservationContent = (\n  event: ObservationEvent,\n  correspondingAction?: ActionEvent,\n): string | null => {\n  if (\n    event.observation.kind !== \"ClientToolObservation\" ||\n    event.tool_name !== CANVAS_UI_CLIENT_TOOL_NAME ||\n    !correspondingAction ||\n    !isCanvasUIActionEvent(correspondingAction)\n  ) {\n    return null;\n  }\n\n  return `UI command '${correspondingAction.action.command}' dispatched to the Agent Canvas frontend.`;\n};\n\nexport const getEventContent = (\n  event: OpenHandsEvent | SkillReadyEvent,\n  correspondingAction?: ActionEvent,\n) => {\n  let title: React.ReactNode = \"\";\n  let details: string | React.ReactNode = \"\";\n\n  // Handle Skill Ready events first\n  if (isSkillReadyEvent(event)) {\n    // Use translation key if available, otherwise use \"SKILL READY\"\n    const skillReadyKey = \"OBSERVATION_MESSAGE$SKILL_READY\";\n    if (i18n.exists(skillReadyKey)) {\n      title = createTitleFromKey(skillReadyKey, {});\n    } else {\n      title = \"Skill Ready\";\n    }\n    details = event._skillReadyContent;\n  } else if (isActionEvent(event)) {\n    title = getActionEventTitle(event);\n    // Per-tool React visualizer when one is registered; markdown otherwise.\n    details = resolveVisualizerBody(event) ?? getActionContent(event);\n  } else if (isObservationEvent(event)) {\n    title = getObservationEventTitle(event, correspondingAction);\n\n    // For TaskTrackerObservation, use React component instead of markdown\n    if (event.observation.kind === \"TaskTrackerObservation\") {\n      details = (\n        <TaskTrackingObservationContent\n          event={event as ObservationEvent<TaskTrackerObservation>}\n        />\n      );\n    } else {\n      details =\n        getCanvasUIClientObservationContent(event, correspondingAction) ??\n        resolveVisualizerBody(event, correspondingAction) ??\n        getObservationContent(event);\n    }\n  } else if (isACPToolCallEvent(event)) {\n    // ACP sub-agent tool calls reuse the same card shape as observations:\n    // title is \"Running/Editing/Reading …\" via a translation key that\n    // mirrors ACTION_MESSAGE$RUN etc.; details are markdown built from\n    // raw_input + raw_output the same way getTerminalObservationContent\n    // builds \"Command: / Output:\" blocks.\n    title = createTitleFromKey(getACPToolCallTitleKey(event), {\n      // Strip a redundant verb prefix the ACP server may have inlined\n      // (Claude Code emits ``\"Read /path\"`` for a read tool; combined\n      // with the ``\"Reading <cmd>{{title}}</cmd>\"`` template that lands\n      // as ``\"Reading Read /path\"``). See ``stripRedundantTitlePrefix``.\n      title: stripRedundantTitlePrefix(event),\n    });\n    details = getACPToolCallContent(event);\n  } else if (\n    // Lenient fallback for action-like events that fail the strict isActionEvent() guard\n    // (e.g., missing tool_name or tool_call_id). Extract a title from the action kind\n    // so the UI shows something meaningful instead of \"Unknown event\".\n    event.source === \"agent\" &&\n    \"action\" in event &&\n    event.action !== null &&\n    typeof event.action === \"object\" &&\n    \"kind\" in event.action &&\n    typeof event.action.kind === \"string\"\n  ) {\n    title = String(event.action.kind).replace(\"Action\", \"\").toUpperCase();\n  }\n\n  return {\n    title: title || i18n.t(I18nKey.EVENT$UNKNOWN_EVENT),\n    details,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"file":"get-event-content.js","names":[],"sources":["../../../../../src/components/conversation-events/chat/event-content-helpers/get-event-content.tsx"],"sourcesContent":["import { Trans } from \"react-i18next\";\nimport React from \"react\";\nimport { CANVAS_UI_CLIENT_TOOL_NAME } from \"#/constants/canvas-ui\";\nimport {\n  OpenHandsEvent,\n  ObservationEvent,\n  ActionEvent,\n} from \"#/types/agent-server/core\";\nimport {\n  isActionEvent,\n  isObservationEvent,\n  isACPToolCallEvent,\n  isCanvasUIActionEvent,\n} from \"#/types/agent-server/type-guards\";\nimport { MonoComponent } from \"../../../features/chat/mono-component\";\nimport { PathComponent } from \"../../../features/chat/path-component\";\nimport { getActionContent } from \"./get-action-content\";\nimport { getObservationContent } from \"./get-observation-content\";\nimport {\n  getACPToolCallContent,\n  getACPToolCallTitleKey,\n  stripRedundantTitlePrefix,\n} from \"./get-acp-tool-call-content\";\nimport { TaskTrackingObservationContent } from \"../task-tracking/task-tracking-observation-content\";\nimport { TaskTrackerObservation } from \"#/types/agent-server/core/base/observation\";\nimport { SkillReadyEvent, isSkillReadyEvent } from \"./create-skill-ready-event\";\nimport { resolveVisualizerBody } from \"../../../features/chat/tool-visualizers/dispatcher\";\nimport i18n from \"#/i18n\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport {\n  getActionEventTitleDescriptor,\n  getActionSummaryTitle,\n  trimEventTitleText,\n  type EventTitleDescriptor,\n} from \"./get-action-event-title\";\n\n// Helper function to create title from translation key\nconst createTitleFromKey = (\n  key: string,\n  values: Readonly<Record<string, unknown>>,\n): React.ReactNode => {\n  if (!i18n.exists(key)) {\n    return key;\n  }\n\n  return (\n    <Trans\n      ns=\"openhands\"\n      i18nKey={key}\n      values={values}\n      components={{\n        path: <PathComponent />,\n        cmd: <MonoComponent />,\n      }}\n    />\n  );\n};\n\nconst renderTitleDescriptor = (\n  descriptor: EventTitleDescriptor,\n): React.ReactNode =>\n  descriptor.kind === \"text\"\n    ? descriptor.text\n    : createTitleFromKey(descriptor.key, descriptor.values);\n\nconst getNonEmptyString = (\n  value: unknown,\n  maxLength?: number,\n): string | null => {\n  if (typeof value !== \"string\") {\n    return null;\n  }\n\n  const trimmed = value.trim();\n  if (!trimmed) {\n    return null;\n  }\n\n  return maxLength ? trimEventTitleText(trimmed, maxLength) : trimmed;\n};\n\nconst getVisionInspectActionTitle = (\n  event: ActionEvent,\n): React.ReactNode | null => {\n  if (event.tool_name !== \"inspect_image_with_vision\") {\n    return null;\n  }\n\n  const action = event.action as unknown as Record<string, unknown>;\n  const profileName = getNonEmptyString(action.profile_name);\n\n  return profileName\n    ? `Describing image with ${profileName}`\n    : \"Describing image with auxiliary vision LLM\";\n};\n\nconst getVisionInspectObservationTitle = (\n  event: ObservationEvent,\n  correspondingAction?: ActionEvent,\n): React.ReactNode | null => {\n  const actionToolName = correspondingAction?.tool_name;\n  const observation = event.observation as unknown as Record<string, unknown>;\n  const observationToolName = getNonEmptyString(observation.tool_name);\n\n  if (\n    actionToolName !== \"inspect_image_with_vision\" &&\n    observationToolName !== \"inspect_image_with_vision\" &&\n    String(event.observation.kind) !== \"VisionInspectObservation\"\n  ) {\n    return null;\n  }\n\n  const action = (correspondingAction?.action ?? {}) as unknown as Record<\n    string,\n    unknown\n  >;\n  const label =\n    getNonEmptyString(action.profile_name) ??\n    getNonEmptyString(observation.profile_name) ??\n    getNonEmptyString(observation.base_url, 80) ??\n    getNonEmptyString(observation.endpoint, 80) ??\n    getNonEmptyString(observation.model, 80);\n\n  return label\n    ? `Describing image with ${label}`\n    : \"Describing image with auxiliary vision LLM\";\n};\n\n// Action Event Processing\nconst getActionEventTitle = (event: OpenHandsEvent): React.ReactNode => {\n  // Early return if not an action event\n  if (!isActionEvent(event)) {\n    return \"\";\n  }\n\n  const visionInspectTitle = getVisionInspectActionTitle(event);\n  if (visionInspectTitle) {\n    return visionInspectTitle;\n  }\n\n  return renderTitleDescriptor(getActionEventTitleDescriptor(event));\n};\n\n// Observation Event Processing\nconst getObservationEventTitle = (\n  event: OpenHandsEvent,\n  correspondingAction?: ActionEvent,\n): React.ReactNode => {\n  // Early return if not an observation event\n  if (!isObservationEvent(event)) {\n    return \"\";\n  }\n\n  const visionInspectObservationTitle = getVisionInspectObservationTitle(\n    event,\n    correspondingAction,\n  );\n  if (visionInspectObservationTitle) {\n    return visionInspectObservationTitle;\n  }\n\n  if (correspondingAction) {\n    const visionInspectTitle = getVisionInspectActionTitle(correspondingAction);\n    if (visionInspectTitle) {\n      return visionInspectTitle;\n    }\n\n    const summaryTitle = getActionSummaryTitle(correspondingAction);\n    if (summaryTitle) {\n      return summaryTitle;\n    }\n  }\n\n  const observationType = event.observation.kind;\n  let observationKey = \"\";\n  let observationValues: Record<string, unknown> = {};\n\n  switch (observationType) {\n    case \"ExecuteBashObservation\":\n    case \"TerminalObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$RUN\";\n      observationValues = {\n        command: event.observation.command\n          ? trimEventTitleText(event.observation.command, 80)\n          : \"\",\n      };\n      break;\n    case \"FileEditorObservation\":\n    case \"StrReplaceEditorObservation\":\n      if (event.observation.command === \"view\") {\n        observationKey = \"OBSERVATION_MESSAGE$READ\";\n      } else {\n        observationKey = \"OBSERVATION_MESSAGE$EDIT\";\n      }\n      observationValues = {\n        path: event.observation.path || \"\",\n      };\n      break;\n    case \"MCPToolObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$MCP\";\n      observationValues = {\n        mcp_tool_name: event.observation.tool_name,\n      };\n      break;\n    case \"InvokeSkillObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$INVOKE_SKILL\";\n      observationValues = {\n        name: event.observation.skill_name,\n      };\n      break;\n    case \"TaskObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$TASK\";\n      observationValues = {\n        name: event.observation.subagent,\n      };\n      break;\n    case \"CanvasUIObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$CANVAS_UI\";\n      break;\n    case \"ClientToolObservation\":\n      if (event.tool_name === CANVAS_UI_CLIENT_TOOL_NAME) {\n        observationKey = \"OBSERVATION_MESSAGE$CANVAS_UI\";\n        break;\n      }\n      return observationType.replace(\"Observation\", \"\").toUpperCase();\n    case \"SwitchLLMObservation\":\n      observationKey = event.observation.is_error\n        ? \"MODEL$SWITCH_FAILED\"\n        : \"MODEL$SWITCHED_TO_PROFILE\";\n      observationValues = {\n        name: event.observation.profile_name,\n      };\n      break;\n    case \"BrowserObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$BROWSE\";\n      break;\n    case \"TaskTrackerObservation\": {\n      const { command } = event.observation;\n      if (command === \"plan\") {\n        observationKey = \"OBSERVATION_MESSAGE$TASK_TRACKING_PLAN\";\n      } else {\n        // command === \"view\"\n        observationKey = \"OBSERVATION_MESSAGE$TASK_TRACKING_VIEW\";\n      }\n      break;\n    }\n    case \"ThinkObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$THINK\";\n      break;\n    case \"GlobObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$GLOB\";\n      observationValues = {\n        pattern: event.observation.pattern\n          ? trimEventTitleText(event.observation.pattern, 50)\n          : \"\",\n      };\n      break;\n    case \"GrepObservation\":\n      observationKey = \"OBSERVATION_MESSAGE$GREP\";\n      observationValues = {\n        pattern: event.observation.pattern\n          ? trimEventTitleText(event.observation.pattern, 50)\n          : \"\",\n      };\n      break;\n    default:\n      // For unknown observations, use the type name\n      return observationType.replace(\"Observation\", \"\").toUpperCase();\n  }\n\n  if (observationKey) {\n    return createTitleFromKey(observationKey, observationValues);\n  }\n\n  return observationType;\n};\n\nconst getCanvasUIClientObservationContent = (\n  event: ObservationEvent,\n  correspondingAction?: ActionEvent,\n): string | null => {\n  if (\n    event.observation.kind !== \"ClientToolObservation\" ||\n    event.tool_name !== CANVAS_UI_CLIENT_TOOL_NAME ||\n    !correspondingAction ||\n    !isCanvasUIActionEvent(correspondingAction)\n  ) {\n    return null;\n  }\n\n  return `UI command '${correspondingAction.action.command}' dispatched to the Agent Canvas frontend.`;\n};\n\nexport const getEventContent = (\n  event: OpenHandsEvent | SkillReadyEvent,\n  correspondingAction?: ActionEvent,\n) => {\n  let title: React.ReactNode = \"\";\n  let details: string | React.ReactNode = \"\";\n\n  // Handle Skill Ready events first\n  if (isSkillReadyEvent(event)) {\n    // Use translation key if available, otherwise use \"SKILL READY\"\n    const skillReadyKey = \"OBSERVATION_MESSAGE$SKILL_READY\";\n    if (i18n.exists(skillReadyKey)) {\n      title = createTitleFromKey(skillReadyKey, {});\n    } else {\n      title = \"Skill Ready\";\n    }\n    details = event._skillReadyContent;\n  } else if (isActionEvent(event)) {\n    title = getActionEventTitle(event);\n    // Per-tool React visualizer when one is registered; markdown otherwise.\n    details = resolveVisualizerBody(event) ?? getActionContent(event);\n  } else if (isObservationEvent(event)) {\n    title = getObservationEventTitle(event, correspondingAction);\n\n    // For TaskTrackerObservation, use React component instead of markdown\n    if (event.observation.kind === \"TaskTrackerObservation\") {\n      details = (\n        <TaskTrackingObservationContent\n          event={event as ObservationEvent<TaskTrackerObservation>}\n        />\n      );\n    } else {\n      details =\n        getCanvasUIClientObservationContent(event, correspondingAction) ??\n        resolveVisualizerBody(event, correspondingAction) ??\n        getObservationContent(event);\n    }\n  } else if (isACPToolCallEvent(event)) {\n    // ACP sub-agent tool calls reuse the same card shape as observations:\n    // title is \"Running/Editing/Reading …\" via a translation key that\n    // mirrors ACTION_MESSAGE$RUN etc.; details are markdown built from\n    // raw_input + raw_output the same way getTerminalObservationContent\n    // builds \"Command: / Output:\" blocks.\n    title = createTitleFromKey(getACPToolCallTitleKey(event), {\n      // Strip a redundant verb prefix the ACP server may have inlined\n      // (Claude Code emits ``\"Read /path\"`` for a read tool; combined\n      // with the ``\"Reading <cmd>{{title}}</cmd>\"`` template that lands\n      // as ``\"Reading Read /path\"``). See ``stripRedundantTitlePrefix``.\n      title: stripRedundantTitlePrefix(event),\n    });\n    details = getACPToolCallContent(event);\n  } else if (\n    // Lenient fallback for action-like events that fail the strict isActionEvent() guard\n    // (e.g., missing tool_name or tool_call_id). Extract a title from the action kind\n    // so the UI shows something meaningful instead of \"Unknown event\".\n    event.source === \"agent\" &&\n    \"action\" in event &&\n    event.action !== null &&\n    typeof event.action === \"object\" &&\n    \"kind\" in event.action &&\n    typeof event.action.kind === \"string\"\n  ) {\n    title = String(event.action.kind).replace(\"Action\", \"\").toUpperCase();\n  }\n\n  return {\n    title: title || i18n.t(I18nKey.EVENT$UNKNOWN_EVENT),\n    details,\n  };\n};\n"],"mappings":"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"}

package/dist/components/features/automations/recommended-automations-launcher.d.ts

@@ -4,12 +4,5 @@ interface RecommendedAutomationsLauncherProps {
     /** When true, only the automation card grid scrolls inside its section. */
     scrollableGrid?: boolean;
 }
-/**
- * The catalog prompt (or slash command) is passed through as-is.
- * API routing (host, auth) is discovered by the agent at runtime from
- * `<RUNTIME_SERVICES>` in the system prompt — the skills themselves
- * contain the instructions for reading that block.
- */
-export declare function buildAutomationPrompt(basePrompt: string): string;
 export declare function RecommendedAutomationsLauncher({ query, onLaunched, scrollableGrid, }: RecommendedAutomationsLauncherProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/features/automations/recommended-automations-section.d.ts

@@ -9,11 +9,5 @@ interface RecommendedAutomationsSectionProps {
     scrollableGrid?: boolean;
 }
 export declare function getAutomationsByPopularity(catalog: RecommendedAutomation[]): RecommendedAutomation[];
-/**
- * Launch allowlist — proven automations featured above the Beta group.
- * NOT derived from popularityRank (slack-standup-digest@94 outranks
- * slack-channel-monitor@92 yet is Beta). A future flag could swap this set.
- */
-export declare const PROVEN_AUTOMATION_IDS: readonly ["github-pr-reviewer", "github-repo-monitor", "slack-channel-monitor"];
 export declare function RecommendedAutomationsSection({ backendKind: _backendKind, installedServers, query, onSelect, scrollableGrid, }: RecommendedAutomationsSectionProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/features/backends/backend-form-modal.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../context/navigation-context.cjs"),a=require("../../../node_modules/@openhands/typescript-client/dist/client/server-client.cjs"),o=require("../../../node_modules/@openhands/typescript-client/dist/client/device-flow-client.cjs");require("../../../node_modules/@openhands/typescript-client/dist/clients.cjs");const s=require("../../../api/agent-server-config.cjs"),c=require("../../../utils/user-facing-error.cjs"),l=require("../../../api/agent-server-client-options.cjs"),u=require("../../../api/agent-server-compatibility.cjs"),d=require("../../../node_modules/@tanstack/react-query/build/modern/useQuery.cjs"),f=require("../../../contexts/active-backend-context.cjs"),p=require("../../../hooks/use-tracking.cjs"),m=require("../../shared/modals/modal-backdrop.cjs"),h=require("../../shared/modals/modal-body.cjs"),g=require("../../../utils/modal-classes.cjs"),_=require("../../shared/modals/modal-close-button.cjs"),v=require("../settings/brand-button.cjs"),y=require("../settings/settings-input.cjs"),b=require("../../../hooks/query/use-backends-health.cjs"),x=require("../../../assets/branding/openhands-logo-white.cjs"),S=require("../files-tab/segmented-toggle.cjs");require("../../../api/device-flow-client.cjs");const C=require("../../../icons/chevron-down-small.cjs"),w=require("./backend-status-label.cjs"),T=require("./backend-status-dot.cjs"),E=require("./device-flow-auth.cjs");let D=require("react");D=e.__toESM(D,1);let O=require("react/jsx-runtime");function k(e){return o.isOpenHandsCloudHost(e)?`cloud`:`local`}function A(e){let t=e.toLowerCase().replace(/^\[|\]$/g,``);return!!(t===`localhost`||t===`::1`||t===`::`||t===`0.0.0.0`||/^127\./.test(t)||/^::ffff:127\./i.test(t)||/^10\./.test(t)||/^192\.168\./.test(t)||/^172\.(1[6-9]|2\d|3[01])\./.test(t)||/^fe[89ab][0-9a-f]:/i.test(t)||/^f[cd][0-9a-f]{2}:/i.test(t)||t.endsWith(`.local`)||!t.includes(`.`)&&!t.includes(`:`))}function j(e){let t=e.trim().replace(/\/+$/,``);if(!t)return``;if(/^https?:\/\//i.test(t))return t;let n=t.match(/^\[([^\]]+)\]/);return`${A(n?n[1]:(t.match(/:/g)??[]).length>1?t:t.split(`:`)[0])?`http`:`https`}://${t}`}function M(e){let t=e.trim();if(!t||/\s/.test(t))return!1;let n=j(t);if(!n)return!1;try{let e=new URL(n);return(e.protocol===`http:`||e.protocol===`https:`)&&e.hostname.length>0}catch{return!1}}var N=`https://app.all-hands.dev`;function P(e,t){return e(n.I18nKey.BACKEND$CONNECTION_TEST_FAILED,{host:t,interpolation:{escapeValue:!1}})}function F(e){return c.getUserFacingConnectionErrorMessage(e)}function I(e,t){let n=F(t);return n?`${e}\n${n}`:e}async function L(e){if(e.kind!==`local`)return{agentServerVersion:null};let t=await new a.ServerClient(l.getAgentServerClientOptions({host:e.host,sessionApiKey:e.apiKey||null,timeout:5e3})).getServerInfo();return u.assertAgentServerVersionIsSupported(t),{agentServerVersion:u.getDisplayAgentServerVersion(t)}}function R({backend:e,testIdRoot:r}){let{t:i}=t.useTranslation(`openhands`),o=b.useBackendsHealth([e])[e.id],s=o?.isConnected??null,c=o?.disabled===!0,f=o?.consecutiveFailures??0,p=o?.lastError??null,{data:m}=d.useQuery({queryKey:[`backend-version`,e.host,e.apiKey],queryFn:async()=>u.getDisplayAgentServerVersion(await new a.ServerClient(l.getAgentServerClientOptions({host:e.host,sessionApiKey:e.apiKey||null,timeout:5e3})).getServerInfo()),retry:!1,staleTime:6e4,enabled:e.kind===`local`&&!c}),h=w.getBackendStatusLabel(i,e,o),g=e.kind===`cloud`?i(n.I18nKey.BACKEND$KIND_CLOUD):i(n.I18nKey.BACKEND$KIND_LOCAL);return(0,O.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,O.jsxs)(`div`,{"data-testid":`${r}-status`,className:`flex items-center gap-3 text-sm`,children:[(0,O.jsx)(T.BackendStatusDot,{isConnected:s}),(0,O.jsx)(`span`,{className:`text-white`,"data-testid":`${r}-status-label`,children:h}),(0,O.jsx)(`span`,{className:`text-tertiary-alt`,children:`·`}),(0,O.jsx)(`span`,{className:`text-[var(--oh-text-tertiary)]`,children:g}),m?(0,O.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)]`,"data-testid":`${r}-version`,children:i(n.I18nKey.BACKEND$VERSION_LABEL,{version:m})}):null]}),c?(0,O.jsxs)(`div`,{"data-testid":`${r}-status-error`,className:`flex flex-col gap-1 rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm`,children:[(0,O.jsx)(`span`,{className:`font-semibold text-red-300`,children:i(n.I18nKey.BACKEND$HEALTH_FAILED_TITLE)}),(0,O.jsx)(`span`,{className:`text-xs text-[var(--oh-text-tertiary)]`,children:i(n.I18nKey.BACKEND$HEALTH_FAILED_DETAIL,{count:f})}),p?(0,O.jsx)(`span`,{"data-testid":`${r}-status-error-message`,className:`text-xs text-red-300 whitespace-pre-wrap break-words`,children:p}):null]}):null]})}function z({initialName:e=``,initialHost:n=``,initialApiKey:r=``,onTestConnection:i,onSuccess:a,requireApiKey:o=!1,onSubmitOverride:s}){let{t:c}=t.useTranslation(`openhands`),[l,u]=D.default.useState(e),[d,f]=D.default.useState(n),[p,m]=D.default.useState(r),[h,g]=D.default.useState(null),[_,v]=D.default.useState(!1),[y,b]=D.default.useState(null),x=y??k(d),S=o||x!==`local`,C=l.trim().length>0&&M(d)&&(!S||p.trim().length>0);return{name:l,setName:u,host:d,setHost:f,apiKey:p,setApiKey:m,connectionError:h,setConnectionError:g,isSubmitting:_,kind:x,setKind:b,canSubmit:C,handleSubmit:D.default.useCallback(async e=>{if(e.preventDefault(),!C||_)return;let t={name:l.trim(),host:j(d),apiKey:p.trim(),kind:x};g(null),v(!0);try{s?await s(t):a(await i(t))}catch(e){g(I(P(c,t.host),e))}finally{v(!1)}},[C,_,l,d,p,x,i,a,o,s,c])}}function B({mode:e,backend:i,onSubmitted:a,renderActions:o,testIdRoot:s,hostReadOnly:c,requireApiKey:l,hideConfigurationFields:u=!1,onSubmitOverride:d}){let{t:p}=t.useTranslation(`openhands`),{addBackend:m,updateBackend:h}=f.useActiveBackendContext(),g=e===`edit`&&i?i.kind:null,{name:_,setName:b,host:x,setHost:S,apiKey:C,setApiKey:w,connectionError:T,setConnectionError:E,isSubmitting:k,kind:A,handleSubmit:P}=z({initialName:i?.name??``,initialHost:i?.host??``,initialApiKey:i?.apiKey??``,onTestConnection:L,onSuccess:async()=>{let t={name:_.trim(),host:j(x),apiKey:C.trim(),kind:g??A};e===`edit`&&i?h(i.id,t):m(t),a()},requireApiKey:l,onSubmitOverride:d}),[F,I]=D.default.useState(!1),[B,V]=D.default.useState(!1),H=g??A,U=s??(e===`edit`?`edit-backend`:`add-backend`),W=l||H!==`local`,G=_.trim().length>0&&M(x)&&(!W||C.trim().length>0),K=F&&!_.trim()?p(n.I18nKey.BACKEND$NAME_REQUIRED):void 0,q=B?x.trim()?M(x)?void 0:p(n.I18nKey.BACKEND$HOST_INVALID):p(n.I18nKey.BACKEND$HOST_REQUIRED):void 0;return(0,O.jsxs)(`form`,{"data-testid":`${U}-form`,onSubmit:async e=>{if(!G){I(!0),V(!0);return}await P(e)},className:`flex flex-col gap-4`,children:[(0,O.jsxs)(`div`,{"data-testid":`${U}-configuration-fields`,className:r.cn(`flex flex-col gap-4`,u&&`hidden`),children:[(0,O.jsx)(y.SettingsInput,{testId:`${U}-name`,name:`${U}-name`,type:`text`,label:p(n.I18nKey.BACKEND$NAME_LABEL),value:_,onChange:e=>{b(e),E(null)},onBlur:()=>I(!0),placeholder:`Production`,className:`w-full`,showRequiredTag:!0,error:K}),(0,O.jsx)(y.SettingsInput,{testId:`${U}-host`,name:`${U}-host`,type:`text`,label:p(n.I18nKey.BACKEND$HOST_LABEL),value:x,onChange:c?void 0:e=>{S(e),E(null)},onBlur:()=>V(!0),placeholder:N,className:`w-full`,showRequiredTag:!0,error:q,isDisabled:c}),(0,O.jsx)(y.SettingsInput,{testId:`${U}-api-key`,name:`${U}-api-key`,type:`password`,label:p(n.I18nKey.BACKEND$KEY_LABEL),value:C,onChange:e=>{w(e),E(null)},placeholder:``,className:`w-full`}),T?(0,O.jsx)(`div`,{role:`alert`,"data-testid":`${U}-error`,className:`rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words`,children:T}):null,e===`edit`&&i&&(0,O.jsx)(R,{backend:i,testIdRoot:U})]}),o?o({canSubmit:G&&!k,isSubmitting:k,testIdRoot:U}):(0,O.jsxs)(`div`,{className:`flex justify-end gap-2 mt-2 w-full`,children:[(0,O.jsx)(v.BrandButton,{type:`button`,variant:`secondary`,onClick:a,testId:`${U}-cancel`,children:p(n.I18nKey.BUTTON$CANCEL)}),(0,O.jsx)(v.BrandButton,{type:`submit`,variant:`primary`,isDisabled:!G||k,testId:`${U}-submit`,children:p(n.I18nKey.BACKEND$SAVE)})]})]})}function V(){let{currentPath:e,navigate:t}=i.useNavigation();return D.default.useCallback(()=>{/^\/automations\/[^/]+/.test(e)?t(`/automations`):/^\/conversations\/[^/]+/.test(e)&&t(`/conversations`)},[e,t])}function H({onConnected:e,testIdRoot:r=`add-backend`,initialManualBackend:i,requireManualApiKey:a=!1,manualSubmitLabel:o,manualSubmittingLabel:c,manualSubmitTestId:l,analyticsSource:u}){let{t:d}=t.useTranslation(`openhands`),f=s.getLockedCloudHost();return f?(0,O.jsx)(`div`,{"data-testid":`${r}-connection-options`,className:`flex justify-center`,children:(0,O.jsx)(`div`,{className:`w-full`,children:(0,O.jsx)(W,{onConnected:e,testIdRoot:r,lockedHost:f,analyticsSource:u})})}):(0,O.jsxs)(`div`,{"data-testid":`${r}-connection-options`,className:`flex flex-col gap-6 md:flex-row`,children:[(0,O.jsx)(`div`,{className:`flex-1 min-w-0`,children:(0,O.jsx)(U,{onConnected:e,testIdRoot:r,initialBackend:i,requireApiKey:a,submitLabel:o??d(n.I18nKey.BACKEND$CONNECT),submittingLabel:c??d(n.I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING),submitTestId:l})}),(0,O.jsx)(`div`,{className:`flex-1 min-w-0`,children:(0,O.jsx)(W,{onConnected:e,testIdRoot:r,analyticsSource:u})})]})}function U({onConnected:e,testIdRoot:r,initialBackend:i,requireApiKey:a,submitLabel:o,submittingLabel:s,submitTestId:c}){let{t:l}=t.useTranslation(`openhands`),{name:u,setName:d,host:f,setHost:p,apiKey:m,setApiKey:h,connectionError:g,setConnectionError:_,isSubmitting:b,kind:x,setKind:C,canSubmit:w,handleSubmit:T}=z({initialName:i?.name??``,initialHost:i?.host??``,initialApiKey:i?.apiKey??``,onTestConnection:L,onSuccess:t=>{e({name:u.trim(),host:j(f),apiKey:m.trim(),kind:x},`manual`,t)},requireApiKey:a});return(0,O.jsxs)(`form`,{"data-testid":`${r}-form`,onSubmit:T,className:`flex flex-col gap-4 flex-1 min-w-0`,children:[(0,O.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,O.jsx)(y.SettingsInput,{testId:`${r}-name`,name:`${r}-name`,type:`text`,label:l(n.I18nKey.BACKEND$NAME_LABEL),value:u,onChange:e=>{d(e),_(null)},placeholder:`e.g. My Server`,className:`w-full`}),(0,O.jsx)(`p`,{className:`text-xs text-[var(--oh-muted)]`,children:l(n.I18nKey.BACKEND$NAME_HELPER)})]}),(0,O.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,O.jsx)(y.SettingsInput,{testId:`${r}-host`,name:`${r}-host`,type:`text`,label:l(n.I18nKey.BACKEND$HOST_LABEL),value:f,onChange:e=>{p(e),_(null)},placeholder:`http://localhost:8000`,className:`w-full`}),(0,O.jsx)(`p`,{className:`text-xs text-[var(--oh-muted)]`,"data-testid":`${r}-host-helper`,children:l(n.I18nKey.BACKEND$HOST_HELPER)})]}),(0,O.jsxs)(`div`,{className:`flex flex-col items-start gap-2.5`,children:[(0,O.jsx)(`span`,{className:`text-sm`,children:l(n.I18nKey.BACKEND$KIND_LABEL)}),(0,O.jsx)(S.SegmentedToggle,{value:x,options:[{value:`local`,label:l(n.I18nKey.BACKEND$KIND_LOCAL)},{value:`cloud`,label:l(n.I18nKey.BACKEND$KIND_CLOUD)}],onChange:e=>C(e),ariaLabel:l(n.I18nKey.BACKEND$KIND_LABEL),testId:`${r}-kind`})]}),(0,O.jsx)(y.SettingsInput,{testId:`${r}-api-key`,name:`${r}-api-key`,type:`password`,label:l(n.I18nKey.BACKEND$KEY_LABEL),value:m,onChange:e=>{h(e),_(null)},placeholder:`sk-••••••••••`,className:`w-full`}),g?(0,O.jsx)(`div`,{role:`alert`,"data-testid":`${r}-error`,className:`rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words`,children:g}):null,(0,O.jsx)(v.BrandButton,{type:`submit`,variant:`secondary`,isDisabled:!w||b,testId:c??`${r}-submit`,className:`w-full text-center`,children:b?s:o})]})}function W({onConnected:e,testIdRoot:i,lockedHost:a,analyticsSource:o}){let{t:s}=t.useTranslation(`openhands`),[c,l]=D.default.useState(!1),[u,d]=D.default.useState(``),f=a??(u.trim()||N);return(0,O.jsxs)(`div`,{className:`flex flex-1 min-w-0 flex-col items-center gap-3 pb-8`,children:[(0,O.jsxs)(`div`,{className:`flex flex-col items-center gap-1`,children:[(0,O.jsx)(x.default,{width:56,height:56,"aria-hidden":!0}),(0,O.jsx)(`h4`,{className:g.modalTitleLgMediumClassName,"data-testid":`${i}-cloud-title`,children:s(n.I18nKey.BACKEND$CLOUD_TITLE)})]}),(0,O.jsx)(`p`,{className:`text-center text-sm leading-relaxed text-[var(--oh-muted)]`,children:s(n.I18nKey.BACKEND$CLOUD_DESCRIPTION)}),(0,O.jsx)(E.DeviceFlowAuth,{host:f,onSuccess:t=>{e({name:`OpenHands Cloud`,host:j(f),apiKey:t,kind:`cloud`},`cloud_login`)},testIdRoot:i,analyticsSource:o}),a?null:(0,O.jsxs)(`div`,{className:`w-full`,children:[(0,O.jsxs)(`button`,{type:`button`,onClick:()=>l(e=>!e),"aria-expanded":c,"data-testid":`${i}-advanced-toggle`,className:`flex w-full cursor-pointer items-center justify-center gap-1 text-center text-xs text-[var(--oh-muted)] transition-colors hover:text-content-2`,children:[(0,O.jsx)(`span`,{children:s(n.I18nKey.BACKEND$ADVANCED)}),(0,O.jsx)(C.default,{className:r.cn(`h-4 w-4 shrink-0 text-muted transition-transform`,c&&`rotate-180`),"aria-hidden":!0})]}),(0,O.jsxs)(`div`,{className:r.cn(`pt-2`,!c&&`pointer-events-none invisible`),"aria-hidden":!c,children:[(0,O.jsx)(y.SettingsInput,{testId:`${i}-cloud-host`,name:`${i}-cloud-host`,type:`text`,label:s(n.I18nKey.BACKEND$HOST_LABEL),value:u,onChange:d,placeholder:N,className:`w-full`}),(0,O.jsx)(`p`,{className:`mt-1 text-xs text-[var(--oh-muted)]`,children:s(n.I18nKey.BACKEND$LOGIN_CLOUD_HINT)})]})]})]})}function G({onClose:e,source:t}){let{addBackend:n}=f.useActiveBackendContext(),r=V(),{trackBackendAdded:i}=p.useTracking();return(0,O.jsx)(H,{onConnected:D.default.useCallback((a,o,s)=>{n(a),i({backendKind:a.kind,connectionMethod:o,hasApiKey:!!a.apiKey,source:t,agentServerVersion:s?.agentServerVersion}),r(),e()},[n,r,e,i,t]),analyticsSource:t})}function K({mode:e,backend:i,onClose:a,source:o=`add_backend_modal`,hideCloseButton:s=!1}){let{t:c}=t.useTranslation(`openhands`);if(e===`add`)return(0,O.jsx)(m.ModalBackdrop,{onClose:s?void 0:a,closeOnEscape:!1,closeOnBackdropClick:!s,"aria-label":c(n.I18nKey.BACKEND$ADD_TITLE),children:(0,O.jsxs)(`div`,{"data-testid":s?`onboarding-modal`:`add-backend-modal`,className:r.cn(`relative rounded-xl border border-[var(--oh-border)] bg-base-secondary`,h.modalWidthClassName(`xl`),h.MODAL_MAX_WIDTH_VIEWPORT),children:[s?null:(0,O.jsx)(_.ModalCloseButton,{onClose:a,testId:`add-backend-close`}),s?null:(0,O.jsx)(`div`,{className:`px-6 pt-6 pb-2 pr-12`,children:(0,O.jsx)(`h2`,{className:g.modalTitleLgClassName,children:c(n.I18nKey.BACKEND$ADD_TITLE)})}),(0,O.jsx)(`div`,{className:r.cn(`px-6 pb-6`,s?`pt-6`:`pt-2`),children:(0,O.jsx)(G,{onClose:a,source:o})})]})});let l=`edit-backend`;return(0,O.jsx)(m.ModalBackdrop,{onClose:a,closeOnEscape:!1,"aria-label":c(n.I18nKey.BACKEND$EDIT_TITLE),children:(0,O.jsxs)(`div`,{"data-testid":`${l}-modal`,className:r.cn(`relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]`,h.modalWidthClassName(`md`)),children:[(0,O.jsx)(_.ModalCloseButton,{onClose:a,testId:`${l}-close`}),(0,O.jsx)(`h2`,{className:r.cn(`pr-6`,g.modalTitleLgClassName),children:c(n.I18nKey.BACKEND$EDIT_TITLE)}),(0,O.jsx)(B,{mode:`edit`,backend:i,onSubmitted:a,testIdRoot:l})]})})}exports.BackendFormModal=K;
+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-down.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/globe.cjs"),a=require("../../../node_modules/lucide-react/dist/esm/icons/info.cjs"),o=require("../../../node_modules/lucide-react/dist/esm/icons/monitor.cjs"),s=require("../../../utils/utils.cjs"),c=require("../../../context/navigation-context.cjs"),l=require("../../../node_modules/@openhands/typescript-client/dist/client/server-client.cjs"),u=require("../../../node_modules/@openhands/typescript-client/dist/client/device-flow-client.cjs");require("../../../node_modules/@openhands/typescript-client/dist/clients.cjs");const d=require("../../../api/agent-server-config.cjs"),f=require("../../../utils/user-facing-error.cjs"),p=require("../../../api/agent-server-client-options.cjs"),m=require("../../../api/agent-server-compatibility.cjs"),h=require("../../../node_modules/@tanstack/react-query/build/modern/useQuery.cjs"),g=require("../../../contexts/active-backend-context.cjs"),_=require("../../../hooks/use-tracking.cjs"),v=require("../../shared/modals/modal-backdrop.cjs"),y=require("../../shared/modals/modal-body.cjs"),b=require("../../../utils/modal-classes.cjs"),x=require("../../shared/modals/modal-close-button.cjs"),S=require("../settings/brand-button.cjs"),C=require("../settings/settings-input.cjs"),w=require("../../../hooks/query/use-backends-health.cjs"),T=require("../../../assets/branding/openhands-logo-white.cjs"),E=require("../files-tab/segmented-toggle.cjs");require("../../../api/device-flow-client.cjs");const D=require("../../../icons/chevron-down-small.cjs"),O=require("../../../icons/external-link.cjs"),k=require("../../../icons/server.cjs"),A=require("./backend-status-label.cjs"),j=require("./backend-status-dot.cjs"),M=require("./device-flow-auth.cjs");let N=require("react");N=e.__toESM(N,1);let P=require("react/jsx-runtime");function F(e){return u.isOpenHandsCloudHost(e)?`cloud`:`local`}function I(e){let t=e.toLowerCase().replace(/^\[|\]$/g,``);return!!(t===`localhost`||t===`::1`||t===`::`||t===`0.0.0.0`||/^127\./.test(t)||/^::ffff:127\./i.test(t)||/^10\./.test(t)||/^192\.168\./.test(t)||/^172\.(1[6-9]|2\d|3[01])\./.test(t)||/^fe[89ab][0-9a-f]:/i.test(t)||/^f[cd][0-9a-f]{2}:/i.test(t)||t.endsWith(`.local`)||!t.includes(`.`)&&!t.includes(`:`))}function L(e){let t=e.trim().replace(/\/+$/,``);if(!t)return``;if(/^https?:\/\//i.test(t))return t;let n=t.match(/^\[([^\]]+)\]/);return`${I(n?n[1]:(t.match(/:/g)??[]).length>1?t:t.split(`:`)[0])?`http`:`https`}://${t}`}function R(e){let t=e.trim();if(!t||/\s/.test(t))return!1;let n=L(t);if(!n)return!1;try{let e=new URL(n);return(e.protocol===`http:`||e.protocol===`https:`)&&e.hostname.length>0}catch{return!1}}var z=`https://app.all-hands.dev`,B=`agent-canvas --backend-only --port 8001`,V=`https://github.com/OpenHands/OpenHands/blob/main/docs/DEVELOPMENT.md#alternative-development-workflows`,H=`https://github.com/OpenHands/OpenHands/blob/main/docs/SELF_HOSTING.md`,U=`https://docs.openhands.dev/overview/introduction`;function W(e,t){return e(n.I18nKey.BACKEND$CONNECTION_TEST_FAILED,{host:t,interpolation:{escapeValue:!1}})}function G(e){return f.getUserFacingConnectionErrorMessage(e)}function K(e,t){let n=G(t);return n?`${e}\n${n}`:e}async function q(e){if(e.kind!==`local`)return{agentServerVersion:null};let t=await new l.ServerClient(p.getAgentServerClientOptions({host:e.host,sessionApiKey:e.apiKey||null,timeout:5e3})).getServerInfo();return m.assertAgentServerVersionIsSupported(t),{agentServerVersion:m.getDisplayAgentServerVersion(t)}}function J({backend:e,testIdRoot:r}){let{t:i}=t.useTranslation(`openhands`),a=w.useBackendsHealth([e])[e.id],o=a?.isConnected??null,s=a?.disabled===!0,c=a?.consecutiveFailures??0,u=a?.lastError??null,{data:d}=h.useQuery({queryKey:[`backend-version`,e.host,e.apiKey],queryFn:async()=>m.getDisplayAgentServerVersion(await new l.ServerClient(p.getAgentServerClientOptions({host:e.host,sessionApiKey:e.apiKey||null,timeout:5e3})).getServerInfo()),retry:!1,staleTime:6e4,enabled:e.kind===`local`&&!s}),f=A.getBackendStatusLabel(i,e,a),g=e.kind===`cloud`?i(n.I18nKey.BACKEND$KIND_CLOUD):i(n.I18nKey.BACKEND$KIND_LOCAL);return(0,P.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,P.jsxs)(`div`,{"data-testid":`${r}-status`,className:`flex items-center gap-3 text-sm`,children:[(0,P.jsx)(j.BackendStatusDot,{isConnected:o}),(0,P.jsx)(`span`,{className:`text-white`,"data-testid":`${r}-status-label`,children:f}),(0,P.jsx)(`span`,{className:`text-tertiary-alt`,children:`·`}),(0,P.jsx)(`span`,{className:`text-[var(--oh-text-tertiary)]`,children:g}),d?(0,P.jsx)(`span`,{className:`text-xs text-[var(--oh-muted)]`,"data-testid":`${r}-version`,children:i(n.I18nKey.BACKEND$VERSION_LABEL,{version:d})}):null]}),s?(0,P.jsxs)(`div`,{"data-testid":`${r}-status-error`,className:`flex flex-col gap-1 rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm`,children:[(0,P.jsx)(`span`,{className:`font-semibold text-red-300`,children:i(n.I18nKey.BACKEND$HEALTH_FAILED_TITLE)}),(0,P.jsx)(`span`,{className:`text-xs text-[var(--oh-text-tertiary)]`,children:i(n.I18nKey.BACKEND$HEALTH_FAILED_DETAIL,{count:c})}),u?(0,P.jsx)(`span`,{"data-testid":`${r}-status-error-message`,className:`text-xs text-red-300 whitespace-pre-wrap break-words`,children:u}):null]}):null]})}function Y({initialName:e=``,initialHost:n=``,initialApiKey:r=``,onTestConnection:i,onSuccess:a,requireApiKey:o=!1,onSubmitOverride:s,fixedKind:c}){let{t:l}=t.useTranslation(`openhands`),[u,d]=N.default.useState(e),[f,p]=N.default.useState(n),[m,h]=N.default.useState(r),[g,_]=N.default.useState(null),[v,y]=N.default.useState(!1),[b,x]=N.default.useState(null),S=c??b??F(f),C=o||S!==`local`,w=u.trim().length>0&&R(f)&&(!C||m.trim().length>0);return{name:u,setName:d,host:f,setHost:p,apiKey:m,setApiKey:h,connectionError:g,setConnectionError:_,isSubmitting:v,kind:S,setKind:x,canSubmit:w,handleSubmit:N.default.useCallback(async e=>{if(e.preventDefault(),!w||v)return;let t={name:u.trim(),host:L(f),apiKey:m.trim(),kind:S};_(null),y(!0);try{s?await s(t):a(await i(t))}catch(e){_(K(W(l,t.host),e))}finally{y(!1)}},[w,v,u,f,m,S,i,a,o,s,c,l])}}function X({mode:e,backend:r,onSubmitted:i,renderActions:a,testIdRoot:o,hostReadOnly:c,requireApiKey:l,hideConfigurationFields:u=!1,onSubmitOverride:d}){let{t:f}=t.useTranslation(`openhands`),{addBackend:p,updateBackend:m}=g.useActiveBackendContext(),h=e===`edit`&&r?r.kind:null,{name:_,setName:v,host:y,setHost:b,apiKey:x,setApiKey:w,connectionError:T,setConnectionError:E,isSubmitting:D,kind:O,handleSubmit:k}=Y({initialName:r?.name??``,initialHost:r?.host??``,initialApiKey:r?.apiKey??``,onTestConnection:q,onSuccess:async()=>{let t={name:_.trim(),host:L(y),apiKey:x.trim(),kind:h??O};e===`edit`&&r?m(r.id,t):p(t),i()},requireApiKey:l,onSubmitOverride:d}),[A,j]=N.default.useState(!1),[M,F]=N.default.useState(!1),I=h??O,B=o??(e===`edit`?`edit-backend`:`add-backend`),V=l||I!==`local`,H=_.trim().length>0&&R(y)&&(!V||x.trim().length>0),U=A&&!_.trim()?f(n.I18nKey.BACKEND$NAME_REQUIRED):void 0,W=M?y.trim()?R(y)?void 0:f(n.I18nKey.BACKEND$HOST_INVALID):f(n.I18nKey.BACKEND$HOST_REQUIRED):void 0;return(0,P.jsxs)(`form`,{"data-testid":`${B}-form`,onSubmit:async e=>{if(!H){j(!0),F(!0);return}await k(e)},className:`flex flex-col gap-4`,children:[(0,P.jsxs)(`div`,{"data-testid":`${B}-configuration-fields`,className:s.cn(`flex flex-col gap-4`,u&&`hidden`),children:[(0,P.jsx)(C.SettingsInput,{testId:`${B}-name`,name:`${B}-name`,type:`text`,label:f(n.I18nKey.BACKEND$NAME_LABEL),value:_,onChange:e=>{v(e),E(null)},onBlur:()=>j(!0),placeholder:`Production`,className:`w-full`,showRequiredTag:!0,error:U}),(0,P.jsx)(C.SettingsInput,{testId:`${B}-host`,name:`${B}-host`,type:`text`,label:f(n.I18nKey.BACKEND$HOST_LABEL),value:y,onChange:c?void 0:e=>{b(e),E(null)},onBlur:()=>F(!0),placeholder:z,className:`w-full`,showRequiredTag:!0,error:W,isDisabled:c}),(0,P.jsx)(C.SettingsInput,{testId:`${B}-api-key`,name:`${B}-api-key`,type:`password`,label:f(n.I18nKey.BACKEND$KEY_LABEL),value:x,onChange:e=>{w(e),E(null)},placeholder:``,className:`w-full`}),T?(0,P.jsx)(`div`,{role:`alert`,"data-testid":`${B}-error`,className:`rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words`,children:T}):null,e===`edit`&&r&&(0,P.jsx)(J,{backend:r,testIdRoot:B})]}),a?a({canSubmit:H&&!D,isSubmitting:D,testIdRoot:B}):(0,P.jsxs)(`div`,{className:`flex justify-end gap-2 mt-2 w-full`,children:[(0,P.jsx)(S.BrandButton,{type:`button`,variant:`secondary`,onClick:i,testId:`${B}-cancel`,children:f(n.I18nKey.BUTTON$CANCEL)}),(0,P.jsx)(S.BrandButton,{type:`submit`,variant:`primary`,isDisabled:!H||D,testId:`${B}-submit`,children:f(n.I18nKey.BACKEND$SAVE)})]})]})}function Z(){let{currentPath:e,navigate:t}=c.useNavigation();return N.default.useCallback(()=>{/^\/automations\/[^/]+/.test(e)?t(`/automations`):/^\/conversations\/[^/]+/.test(e)&&t(`/conversations`)},[e,t])}function ee({onConnected:e,testIdRoot:r,initialBackend:i,requireApiKey:a,submitLabel:o,submittingLabel:s,submitTestId:c,fixedKind:l,showKindSelector:u=!0}){let{t:d}=t.useTranslation(`openhands`),{name:f,setName:p,host:m,setHost:h,apiKey:g,setApiKey:_,connectionError:v,setConnectionError:y,isSubmitting:b,kind:x,setKind:w,canSubmit:T,handleSubmit:D}=Y({initialName:i?.name??``,initialHost:i?.host??``,initialApiKey:i?.apiKey??``,onTestConnection:q,onSuccess:t=>{e({name:f.trim(),host:L(m),apiKey:g.trim(),kind:x},`manual`,t)},requireApiKey:a,fixedKind:l});return(0,P.jsxs)(`form`,{"data-testid":`${r}-form`,onSubmit:D,className:`flex flex-col gap-4 flex-1 min-w-0`,children:[(0,P.jsx)(C.SettingsInput,{testId:`${r}-name`,name:`${r}-name`,type:`text`,label:d(n.I18nKey.BACKEND$NAME_LABEL),hint:d(n.I18nKey.BACKEND$NAME_HELPER),value:f,onChange:e=>{p(e),y(null)},placeholder:`e.g. My Server`,className:`w-full`}),(0,P.jsx)(C.SettingsInput,{testId:`${r}-host`,name:`${r}-host`,type:`text`,label:d(n.I18nKey.BACKEND$HOST_LABEL),hint:d(n.I18nKey.BACKEND$HOST_HELPER),value:m,onChange:e=>{h(e),y(null)},placeholder:`http://localhost:8000`,className:`w-full`}),u?(0,P.jsxs)(`div`,{className:`flex flex-col items-start gap-2.5`,children:[(0,P.jsx)(`span`,{className:`text-sm`,children:d(n.I18nKey.BACKEND$KIND_LABEL)}),(0,P.jsx)(E.SegmentedToggle,{value:x,options:[{value:`local`,label:d(n.I18nKey.BACKEND$KIND_LOCAL)},{value:`cloud`,label:d(n.I18nKey.BACKEND$KIND_CLOUD)}],onChange:e=>w(e),ariaLabel:d(n.I18nKey.BACKEND$KIND_LABEL),testId:`${r}-kind`})]}):null,(0,P.jsx)(C.SettingsInput,{testId:`${r}-api-key`,name:`${r}-api-key`,type:`password`,label:d(n.I18nKey.BACKEND$KEY_LABEL),value:g,onChange:e=>{_(e),y(null)},placeholder:`sk-••••••••••`,className:`w-full`}),v?(0,P.jsx)(`div`,{role:`alert`,"data-testid":`${r}-error`,className:`rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words`,children:v}):null,(0,P.jsx)(S.BrandButton,{type:`submit`,variant:`secondary`,isDisabled:!T||b,testId:c??`${r}-submit`,className:`w-full text-center`,children:b?s:o})]})}function Q({onConnected:e,testIdRoot:r,lockedHost:i,analyticsSource:a,showBranding:o=!0}){let{t:c}=t.useTranslation(`openhands`),[l,u]=N.default.useState(!1),[d,f]=N.default.useState(``),p=`${r}-advanced-panel`,m=i??(d.trim()||z);return(0,P.jsxs)(`div`,{className:`flex w-full min-w-0 flex-col items-center gap-3`,children:[o?(0,P.jsxs)(`div`,{className:`flex flex-col items-center gap-1`,children:[(0,P.jsx)(T.default,{width:56,height:56,"aria-hidden":!0}),(0,P.jsx)(`h4`,{className:b.modalTitleLgMediumClassName,"data-testid":`${r}-cloud-title`,children:c(n.I18nKey.BACKEND$CLOUD_TITLE)})]}):null,(0,P.jsx)(M.DeviceFlowAuth,{host:m,onSuccess:t=>{e({name:`OpenHands Cloud`,host:L(m),apiKey:t,kind:`cloud`},`cloud_login`)},testIdRoot:r,analyticsSource:a,className:`w-full items-center`,idleDescription:(0,P.jsx)(`p`,{className:`text-center text-sm leading-relaxed text-[var(--oh-muted)]`,"data-testid":`${r}-cloud-description`,children:c(n.I18nKey.BACKEND$CLOUD_DESCRIPTION)}),idleFooter:i?null:(0,P.jsxs)(`div`,{className:`mx-auto w-full max-w-md`,children:[(0,P.jsxs)(`button`,{type:`button`,onClick:()=>u(e=>!e),"aria-expanded":l,"aria-controls":p,"data-testid":`${r}-advanced-toggle`,className:`flex w-full cursor-pointer items-center justify-center gap-1 text-center text-xs text-[var(--oh-muted)] transition-colors hover:text-content-2`,children:[(0,P.jsx)(`span`,{children:c(n.I18nKey.BACKEND$ADVANCED)}),(0,P.jsx)(D.default,{className:s.cn(`h-4 w-4 shrink-0 text-muted transition-transform duration-200 ease-out`,l&&`rotate-180`),"aria-hidden":!0})]}),(0,P.jsx)(`div`,{className:s.cn(`grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none`,l?`grid-rows-[1fr]`:`grid-rows-[0fr]`),children:(0,P.jsx)(`div`,{className:`overflow-hidden`,children:(0,P.jsxs)(`div`,{id:p,"data-testid":`${r}-advanced-panel`,"aria-hidden":!l,inert:l?void 0:!0,className:s.cn(`pt-3 transition-opacity duration-200 ease-out motion-reduce:transition-none`,l?`opacity-100`:`opacity-0`),children:[(0,P.jsx)(C.SettingsInput,{testId:`${r}-cloud-host`,name:`${r}-cloud-host`,type:`text`,label:c(n.I18nKey.BACKEND$HOST_LABEL),value:d,onChange:f,placeholder:z,className:`w-full`}),(0,P.jsx)(`p`,{className:`mt-1 text-xs text-[var(--oh-muted)]`,children:c(n.I18nKey.BACKEND$LOGIN_CLOUD_HINT)})]})})})]})})]})}function $({value:e,selectedValue:t,title:n,description:r,icon:i,onSelect:a,panelId:o,testId:c}){let l=e===t;return(0,P.jsxs)(`button`,{id:`${c}-tab`,type:`button`,role:`tab`,"aria-selected":l,"aria-controls":o,"data-testid":c,onClick:()=>a(e),className:s.cn(`relative flex min-h-16 w-full cursor-pointer items-center gap-3 px-3 py-3 text-left transition-colors`,`first:border-r first:border-r-[var(--oh-border)]`,`focus-visible:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-300`,l?`bg-[var(--oh-surface-raised)] text-white after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary`:`text-[var(--oh-muted)] hover:bg-[var(--oh-surface-raised)] hover:text-white`),children:[(0,P.jsx)(`span`,{className:`flex size-8 shrink-0 items-center justify-center`,"aria-hidden":!0,children:i}),(0,P.jsxs)(`span`,{className:`min-w-0 flex-1`,children:[(0,P.jsx)(`span`,{className:`block truncate text-sm font-medium`,children:n}),(0,P.jsx)(`span`,{className:`mt-0.5 block text-xs leading-tight text-[var(--oh-muted)]`,children:r})]})]})}function te({children:e}){let t=N.default.useRef(null),[n,r]=N.default.useState();return N.default.useLayoutEffect(()=>{let e=t.current;if(!e)return;let n=()=>{let t=e.getBoundingClientRect().height;r(t>0?t:void 0)};if(n(),typeof ResizeObserver>`u`)return;let i=new ResizeObserver(n);return i.observe(e),()=>i.disconnect()},[]),(0,P.jsx)(`div`,{"data-testid":`add-backend-panel-height`,style:n===void 0?void 0:{height:n},className:`overflow-hidden transition-[height] duration-300 ease-in-out motion-reduce:transition-none`,children:(0,P.jsx)(`div`,{ref:t,children:e})})}function ne({location:e}){let{t:i}=t.useTranslation(`openhands`),[o,c]=N.default.useState(!1),l=e===`remote`,u=i(l?n.I18nKey.BACKEND$REMOTE_SETUP_TITLE:n.I18nKey.BACKEND$BEFORE_CONNECT_TITLE),d=i(l?n.I18nKey.BACKEND$REMOTE_SETUP_DESCRIPTION:n.I18nKey.BACKEND$LOCAL_SETUP_DESCRIPTION),f=l?H:V,p=i(l?n.I18nKey.BACKEND$REMOTE_SETUP_DOCS:n.I18nKey.BACKEND$LOCAL_SETUP_DOCS),m=l?`add-backend-remote`:`add-backend-local`,h=`${m}-guidance-toggle`,g=`${m}-guidance-body`;return(0,P.jsxs)(`aside`,{"data-testid":`${m}-guidance`,className:`rounded-lg bg-[var(--oh-surface-raised)] text-sm text-[var(--oh-muted)]`,children:[(0,P.jsx)(`h4`,{className:`text-white`,children:(0,P.jsxs)(`button`,{id:h,type:`button`,onClick:()=>c(e=>!e),"aria-expanded":o,"aria-controls":g,"data-testid":h,className:s.cn(`flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2 text-left font-medium`,`transition-colors hover:bg-[var(--oh-interactive-hover)]`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-300`),children:[(0,P.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2`,children:[(0,P.jsx)(a.Info,{className:`size-4 shrink-0 text-[var(--oh-muted)]`,"aria-hidden":!0}),(0,P.jsx)(`span`,{className:`truncate`,children:u})]}),(0,P.jsx)(r.ChevronDown,{className:s.cn(`size-5 shrink-0 text-[var(--oh-muted)] transition-transform duration-200 ease-out`,o&&`rotate-180`),"aria-hidden":!0})]})}),(0,P.jsx)(`div`,{className:s.cn(`grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none`,o?`grid-rows-[1fr]`:`grid-rows-[0fr]`),children:(0,P.jsx)(`div`,{className:`overflow-hidden`,children:(0,P.jsxs)(`div`,{id:g,"data-testid":g,role:`region`,"aria-labelledby":h,"aria-hidden":!o,inert:o?void 0:!0,className:s.cn(`flex flex-col gap-2 px-3 pb-3 transition-opacity duration-200 ease-out motion-reduce:transition-none`,o?`opacity-100`:`opacity-0`),children:[(0,P.jsx)(`p`,{className:`leading-5`,children:d}),l?(0,P.jsxs)(`div`,{children:[(0,P.jsx)(`h5`,{className:`font-medium text-white`,children:i(n.I18nKey.BACKEND$REMOTE_CONNECTION_TITLE)}),(0,P.jsx)(`p`,{className:`mt-1 leading-5`,children:i(n.I18nKey.BACKEND$REMOTE_CONNECTION_DESCRIPTION)})]}):(0,P.jsx)(`code`,{className:`block break-words font-mono text-xs text-white`,children:B}),(0,P.jsxs)(`a`,{href:f,target:`_blank`,rel:`noopener noreferrer`,"data-testid":`${m}-docs-link`,tabIndex:o?void 0:-1,className:`inline-flex w-fit items-center gap-1.5 text-primary hover:underline`,children:[(0,P.jsx)(`span`,{children:p}),(0,P.jsx)(O.default,{className:`size-4 shrink-0`,"aria-hidden":!0})]})]})})})]})}function re({onConnected:e,source:r}){let{t:a}=t.useTranslation(`openhands`),[c,l]=N.default.useState(`cloud`),[u,d]=N.default.useState(`local`),f=`add-backend-selected-panel`,p=`add-backend-option-${c}-tab`,m=c===`cloud`;return(0,P.jsxs)(`div`,{"data-testid":`add-backend-chooser`,className:`flex flex-col`,children:[(0,P.jsxs)(`div`,{role:`tablist`,"aria-label":a(n.I18nKey.BACKEND$CHOOSER_TITLE),className:`grid grid-cols-2 overflow-hidden rounded-lg border border-[var(--oh-border)]`,children:[(0,P.jsx)($,{value:`cloud`,selectedValue:c,title:a(n.I18nKey.BACKEND$CLOUD_TITLE),description:a(n.I18nKey.BACKEND$CLOUD_OPTION_DESCRIPTION),icon:(0,P.jsx)(T.default,{width:32,height:32,"data-testid":`add-backend-option-cloud-logo`}),onSelect:l,panelId:f,testId:`add-backend-option-cloud`}),(0,P.jsx)($,{value:`agent-server`,selectedValue:c,title:a(n.I18nKey.BACKEND$AGENT_SERVER_TITLE),description:a(n.I18nKey.BACKEND$AGENT_SERVER_OPTION_DESCRIPTION),icon:(0,P.jsx)(k.default,{className:`size-6`}),onSelect:l,panelId:f,testId:`add-backend-option-agent-server`})]}),(0,P.jsx)(`div`,{className:`mt-6`,children:(0,P.jsx)(te,{children:(0,P.jsx)(`section`,{id:f,role:`tabpanel`,"aria-labelledby":p,className:`min-w-0`,children:m?(0,P.jsx)(`div`,{"data-testid":`add-backend-cloud-panel`,className:s.cn(`relative isolate flex min-h-[13.5rem] w-full items-center justify-center rounded-xl border border-[var(--oh-border)] px-5 py-6`,`before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-xl`,`before:bg-[radial-gradient(75%_75%_at_50%_50%,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0)_70%)]`),children:(0,P.jsx)(Q,{onConnected:e,testIdRoot:`add-backend`,analyticsSource:r,showBranding:!1})}):(0,P.jsxs)(`div`,{"data-testid":`add-backend-agent-server-panel`,className:`mx-auto w-full max-w-xl`,children:[(0,P.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,P.jsx)(`span`,{className:`h-px flex-1 bg-[var(--oh-border)]`,"aria-hidden":!0}),(0,P.jsx)(E.SegmentedToggle,{value:u,options:[{value:`local`,label:a(n.I18nKey.BACKEND$KIND_LOCAL),icon:(0,P.jsx)(o.Monitor,{"aria-hidden":!0})},{value:`remote`,label:a(n.I18nKey.BACKEND$KIND_REMOTE),icon:(0,P.jsx)(i.Globe,{"aria-hidden":!0})}],onChange:d,ariaLabel:a(n.I18nKey.BACKEND$AGENT_SERVER_LOCATION),testId:`add-backend-location`}),(0,P.jsx)(`span`,{className:`h-px flex-1 bg-[var(--oh-border)]`,"aria-hidden":!0})]}),(0,P.jsxs)(`div`,{className:`mt-4 flex flex-col gap-4`,children:[(0,P.jsx)(ne,{location:u},u),(0,P.jsx)(ee,{onConnected:e,testIdRoot:`add-backend`,requireApiKey:u===`remote`,submitLabel:a(n.I18nKey.BACKEND$CONNECT),submittingLabel:a(n.I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING),fixedKind:`local`,showKindSelector:!1})]})]})})})})]})}function ie({onClose:e,source:t}){let{addBackend:n}=g.useActiveBackendContext(),r=Z(),{trackBackendAdded:i}=_.useTracking(),a=d.getLockedCloudHost(),o=N.default.useCallback((a,o,s)=>{n(a),i({backendKind:a.kind,connectionMethod:o,hasApiKey:!!a.apiKey,source:t,agentServerVersion:s?.agentServerVersion}),r(),e()},[n,r,e,i,t]);return a?(0,P.jsx)(Q,{onConnected:o,testIdRoot:`add-backend`,lockedHost:a,analyticsSource:t}):(0,P.jsx)(re,{onConnected:o,source:t})}function ae({mode:e,backend:r,onClose:i,source:a=`add_backend_modal`,hideCloseButton:o=!1}){let{t:c}=t.useTranslation(`openhands`);if(e===`add`)return(0,P.jsx)(v.ModalBackdrop,{onClose:o?void 0:i,closeOnEscape:!1,closeOnBackdropClick:!o,"aria-label":c(n.I18nKey.BACKEND$ADD_TITLE),children:(0,P.jsxs)(`div`,{"data-testid":o?`onboarding-modal`:`add-backend-modal`,className:s.cn(`relative max-h-[92vh] w-[720px] overflow-y-auto rounded-xl border border-[var(--oh-border)] bg-base-secondary p-6`,y.MODAL_MAX_WIDTH_VIEWPORT),children:[o?null:(0,P.jsx)(x.ModalCloseButton,{onClose:i,testId:`add-backend-close`}),o?null:(0,P.jsxs)(`div`,{className:`pr-8`,children:[(0,P.jsx)(`h2`,{className:b.modalTitleLgClassName,children:c(n.I18nKey.BACKEND$CHOOSER_TITLE)}),(0,P.jsxs)(`p`,{className:`mt-2 text-sm leading-6 text-[var(--oh-muted)]`,"data-testid":`add-backend-description`,children:[c(n.I18nKey.BACKEND$CHOOSER_DESCRIPTION),` `,(0,P.jsxs)(`a`,{href:U,target:`_blank`,rel:`noopener noreferrer`,"aria-label":c(n.I18nKey.BACKEND$DEPLOYMENT_OPTIONS),"data-testid":`add-backend-deployment-options-link`,className:`text-primary hover:underline`,children:[c(n.I18nKey.CTA$LEARN_MORE),(0,P.jsx)(O.default,{className:`ml-1 inline size-3.5 align-[-0.125em]`,"aria-hidden":!0})]})]})]}),(0,P.jsx)(`div`,{className:o?void 0:`mt-5`,children:(0,P.jsx)(ie,{onClose:i,source:a})})]})});let l=`edit-backend`;return(0,P.jsx)(v.ModalBackdrop,{onClose:i,closeOnEscape:!1,"aria-label":c(n.I18nKey.BACKEND$EDIT_TITLE),children:(0,P.jsxs)(`div`,{"data-testid":`${l}-modal`,className:s.cn(`relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]`,y.modalWidthClassName(`md`)),children:[(0,P.jsx)(x.ModalCloseButton,{onClose:i,testId:`${l}-close`}),(0,P.jsx)(`h2`,{className:s.cn(`pr-6`,b.modalTitleLgClassName),children:c(n.I18nKey.BACKEND$EDIT_TITLE)}),(0,P.jsx)(X,{mode:`edit`,backend:r,onSubmitted:i,testIdRoot:l})]})})}exports.BackendFormModal=ae;
 //# sourceMappingURL=backend-form-modal.cjs.map

package/dist/components/features/backends/backend-form-modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"backend-form-modal.cjs","names":[],"sources":["../../../../src/components/features/backends/backend-form-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useTranslation } from \"react-i18next\";\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport OpenHandsLogoWhite from \"#/assets/branding/openhands-logo-white.svg?react\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n  MODAL_MAX_WIDTH_VIEWPORT,\n  modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { SettingsInput } from \"#/components/features/settings/settings-input\";\nimport { SegmentedToggle } from \"#/components/features/files-tab/segmented-toggle\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useTracking } from \"#/hooks/use-tracking\";\nimport type { CloudConnectionSource } from \"#/services/cloud-funnel-analytics\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { isOpenHandsCloudHost } from \"#/api/device-flow-client\";\nimport {\n  assertAgentServerVersionIsSupported,\n  getDisplayAgentServerVersion,\n} from \"#/api/agent-server-compatibility\";\nimport ChevronDownSmallIcon from \"#/icons/chevron-down-small.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend, BackendKind } from \"#/api/backend-registry/types\";\nimport { getUserFacingConnectionErrorMessage } from \"#/utils/user-facing-error\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  modalTitleLgClassName,\n  modalTitleLgMediumClassName,\n} from \"#/utils/modal-classes\";\nimport { getBackendStatusLabel } from \"./backend-status-label\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\nexport type BackendFormMode = \"add\" | \"edit\";\n\ninterface BackendConnectionTestMetadata {\n  agentServerVersion: string | null;\n}\n\ninterface BackendFormModalProps {\n  mode: BackendFormMode;\n  /** Required when `mode === \"edit\"`. */\n  backend?: Backend;\n  onClose: () => void;\n  /** Analytics surface for the `backend_added` event (add mode only). */\n  source?: BackendAddedSource;\n  /** Hide the close button and disable backdrop/escape dismissal. Used for locked Cloud first-run. */\n  hideCloseButton?: boolean;\n}\n\n/**\n * Seed the default backend kind from the host. Uses proper hostname-suffix\n * matching (via {@link isOpenHandsCloudHost}) rather than a substring test, so\n * a look-alike host such as `all-hands-testing.dev` isn't misread as cloud.\n *\n * This is only a *default*: a self-hosted OpenHands Cloud/Enterprise instance\n * on a truly custom domain is indistinguishable from a local agent-server by\n * host alone, so the manual add form lets the user override the kind\n * explicitly (see the Type selector in ManualConnectionColumn).\n */\nfunction inferKindFromHost(host: string): BackendKind {\n  return isOpenHandsCloudHost(host) ? \"cloud\" : \"local\";\n}\n\n/**\n * Returns true for hostnames that represent a local / private-network address.\n * Used by normalizeHost to choose http:// instead of https://.\n */\nfunction isLocalAddress(hostname: string): boolean {\n  // Strip IPv6 bracket notation: [::1] → ::1\n  const h = hostname.toLowerCase().replace(/^\\[|\\]$/g, \"\");\n  // IPv6 loopback, any-address, and named loopback\n  if (h === \"localhost\" || h === \"::1\" || h === \"::\" || h === \"0.0.0.0\")\n    return true;\n  // 127.x.x.x loopback range + IPv4-mapped loopback (::ffff:127.x.x.x)\n  if (/^127\\./.test(h) || /^::ffff:127\\./i.test(h)) return true;\n  // RFC 1918 private ranges\n  if (/^10\\./.test(h)) return true;\n  if (/^192\\.168\\./.test(h)) return true;\n  if (/^172\\.(1[6-9]|2\\d|3[01])\\./.test(h)) return true;\n  // IPv6 link-local (fe80::/10) and unique local (fc00::/7)\n  if (/^fe[89ab][0-9a-f]:/i.test(h)) return true;\n  if (/^f[cd][0-9a-f]{2}:/i.test(h)) return true;\n  // mDNS / Bonjour (.local)\n  if (h.endsWith(\".local\")) return true;\n  // Single-label hostnames (no dots, no colons) are local network names.\n  // Colons are excluded so bare IPv6 addresses don't accidentally match.\n  if (!h.includes(\".\") && !h.includes(\":\")) return true;\n  return false;\n}\n\nfunction normalizeHost(host: string): string {\n  const trimmed = host.trim().replace(/\\/+$/, \"\");\n  if (!trimmed) return \"\";\n  // Already has an explicit scheme — respect it.\n  if (/^https?:\\/\\//i.test(trimmed)) return trimmed;\n  // Extract the pure hostname for scheme selection, handling three cases:\n  //   [::1]:8080  → bracket IPv6 notation → extract ::1\n  //   ::1         → bare IPv6 (multiple colons, no bracket) → whole string\n  //   host:port   → regular host:port → part before the colon\n  const bracketMatch = trimmed.match(/^\\[([^\\]]+)\\]/);\n  const hostname = bracketMatch\n    ? bracketMatch[1]\n    : (trimmed.match(/:/g) ?? []).length > 1\n      ? trimmed\n      : trimmed.split(\":\")[0];\n  const scheme = isLocalAddress(hostname) ? \"http\" : \"https\";\n  return `${scheme}://${trimmed}`;\n}\n\n/**\n * Returns true when `host` represents a reachable backend URL.\n *\n * Rules (applied in order):\n *   1. Must be non-empty after trimming.\n *   2. Must contain no whitespace — spaces can never appear in a host/port.\n *   3. After normalisation (bare hosts get `https://` prepended), must parse\n *      as a valid http or https URL with a non-empty hostname.\n */\nfunction isValidHostUrl(host: string): boolean {\n  const trimmed = host.trim();\n  if (!trimmed) return false;\n  // Spaces anywhere in the input are an immediate rejection.\n  if (/\\s/.test(trimmed)) return false;\n  const normalized = normalizeHost(trimmed);\n  if (!normalized) return false;\n  try {\n    const url = new URL(normalized);\n    return (\n      (url.protocol === \"http:\" || url.protocol === \"https:\") &&\n      url.hostname.length > 0\n    );\n  } catch {\n    return false;\n  }\n}\n\nconst DEFAULT_OPENHANDS_CLOUD_HOST = \"https://app.all-hands.dev\";\n\nexport type BackendConnectionMethod = \"manual\" | \"cloud_login\";\n\nexport type BackendAddedSource = CloudConnectionSource;\n\nfunction getConnectionTestFailedTitle(\n  t: ReturnType<typeof useTranslation>[\"t\"],\n  host: string,\n): string {\n  return t(I18nKey.BACKEND$CONNECTION_TEST_FAILED, {\n    host,\n    interpolation: { escapeValue: false },\n  });\n}\n\nfunction getConnectionErrorDetail(error: unknown): string | null {\n  return getUserFacingConnectionErrorMessage(error);\n}\n\nfunction getConnectionTestFailedMessage(title: string, error: unknown): string {\n  const detail = getConnectionErrorDetail(error);\n  return detail ? `${title}\\n${detail}` : title;\n}\n\nasync function testBackendConnection(\n  backend: Pick<Backend, \"host\" | \"apiKey\" | \"kind\">,\n): Promise<BackendConnectionTestMetadata> {\n  // Cloud backends authenticate via OAuth; preflight GET is not applicable.\n  if (backend.kind !== \"local\") return { agentServerVersion: null };\n\n  const serverInfo = await new ServerClient(\n    getAgentServerClientOptions({\n      host: backend.host,\n      sessionApiKey: backend.apiKey || null,\n      timeout: 5000,\n    }),\n  ).getServerInfo();\n  assertAgentServerVersionIsSupported(serverInfo);\n  return { agentServerVersion: getDisplayAgentServerVersion(serverInfo) };\n}\n\n/**\n * Live status row for the edit form: shows a connection dot, a\n * \"Local\"/\"Cloud\" label, and the agent server's reported version when\n * available. Replaces the legacy local/cloud radio fieldset (kind is\n * now inferred from the host).\n */\nfunction BackendStatusBadge({\n  backend,\n  testIdRoot,\n}: {\n  backend: Backend;\n  testIdRoot: string;\n}) {\n  const { t } = useTranslation(\"openhands\");\n  const healthByBackendId = useBackendsHealth([backend]);\n  const health = healthByBackendId[backend.id];\n  const isConnected = health?.isConnected ?? null;\n  const disabled = health?.disabled === true;\n  const consecutiveFailures = health?.consecutiveFailures ?? 0;\n  const lastError = health?.lastError ?? null;\n\n  const { data: version } = useQuery({\n    queryKey: [\"backend-version\", backend.host, backend.apiKey],\n    queryFn: async () => {\n      const info = await new ServerClient(\n        getAgentServerClientOptions({\n          host: backend.host,\n          sessionApiKey: backend.apiKey || null,\n          timeout: 5000,\n        }),\n      ).getServerInfo();\n      return getDisplayAgentServerVersion(info);\n    },\n    retry: false,\n    staleTime: 60_000,\n    enabled: backend.kind === \"local\" && !disabled,\n  });\n\n  const statusLabel = getBackendStatusLabel(t, backend, health);\n\n  const kindLabel =\n    backend.kind === \"cloud\"\n      ? t(I18nKey.BACKEND$KIND_CLOUD)\n      : t(I18nKey.BACKEND$KIND_LOCAL);\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div\n        data-testid={`${testIdRoot}-status`}\n        className=\"flex items-center gap-3 text-sm\"\n      >\n        <BackendStatusDot isConnected={isConnected} />\n        <span className=\"text-white\" data-testid={`${testIdRoot}-status-label`}>\n          {statusLabel}\n        </span>\n        <span className=\"text-tertiary-alt\">·</span>\n        <span className=\"text-[var(--oh-text-tertiary)]\">{kindLabel}</span>\n        {version ? (\n          <span\n            className=\"text-xs text-[var(--oh-muted)]\"\n            data-testid={`${testIdRoot}-version`}\n          >\n            {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n          </span>\n        ) : null}\n      </div>\n\n      {disabled ? (\n        <div\n          data-testid={`${testIdRoot}-status-error`}\n          className=\"flex flex-col gap-1 rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm\"\n        >\n          <span className=\"font-semibold text-red-300\">\n            {t(I18nKey.BACKEND$HEALTH_FAILED_TITLE)}\n          </span>\n          <span className=\"text-xs text-[var(--oh-text-tertiary)]\">\n            {t(I18nKey.BACKEND$HEALTH_FAILED_DETAIL, {\n              count: consecutiveFailures,\n            })}\n          </span>\n          {lastError ? (\n            <span\n              data-testid={`${testIdRoot}-status-error-message`}\n              className=\"text-xs text-red-300 whitespace-pre-wrap break-words\"\n            >\n              {lastError}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface BackendFormSubmitPayload {\n  name: string;\n  host: string;\n  apiKey: string;\n  kind: BackendKind;\n}\n\ninterface UseBackendFormOptions {\n  initialName?: string;\n  initialHost?: string;\n  initialApiKey?: string;\n  /**\n   * Called to test the connection. The hook does NOT call\n   * `testBackendConnection` directly so callers can inject a\n   * wrapped version (e.g. with extra logging or different timeout).\n   * Should throw on failure.\n   */\n  onTestConnection: (\n    payload: BackendFormSubmitPayload,\n  ) => Promise<BackendConnectionTestMetadata>;\n  /** Called after a successful connection test and persistence. */\n  onSuccess: (metadata: BackendConnectionTestMetadata) => void;\n  /** Require a non-empty API key even when the host looks local. */\n  requireApiKey?: boolean;\n  /**\n   * When provided, completely replaces the default submit flow\n   * (onTestConnection + onSuccess). The hook still manages form state\n   * and canSubmit validation, but the caller owns error handling and\n   * success side effects. Should throw on failure.\n   */\n  onSubmitOverride?: (payload: BackendFormSubmitPayload) => Promise<void>;\n}\n\n/**\n * Shared hook for the backend-form state used by both `BackendForm`\n * (edit/add mode) and `ManualConnectionColumn` (add-mode-only column).\n * Encapsulates name / host / apiKey fields, `connectionError`,\n * `isSubmitting`, and the shared `handleSubmit` flow.\n */\nfunction useBackendForm({\n  initialName = \"\",\n  initialHost = \"\",\n  initialApiKey = \"\",\n  onTestConnection,\n  onSuccess,\n  requireApiKey = false,\n  onSubmitOverride,\n}: UseBackendFormOptions) {\n  const { t } = useTranslation(\"openhands\");\n\n  const [name, setName] = React.useState(initialName);\n  const [host, setHost] = React.useState(initialHost);\n  const [apiKey, setApiKey] = React.useState(initialApiKey);\n  const [connectionError, setConnectionError] = React.useState<string | null>(\n    null,\n  );\n  const [isSubmitting, setIsSubmitting] = React.useState(false);\n  const [kindOverride, setKindOverride] = React.useState<BackendKind | null>(\n    null,\n  );\n\n  // Kind follows host inference until the user explicitly picks a type, then\n  // respects that choice. A custom-domain OHE can't be distinguished from a\n  // custom-domain local agent-server by host alone, so ManualConnectionColumn\n  // exposes `setKind` (a Type selector) to let the user declare it.\n  const kind = kindOverride ?? inferKindFromHost(host);\n  const needsApiKey = requireApiKey || kind !== \"local\";\n  const canSubmit =\n    name.trim().length > 0 &&\n    isValidHostUrl(host) &&\n    (!needsApiKey || apiKey.trim().length > 0);\n\n  const handleSubmit = React.useCallback(\n    async (e: React.FormEvent<HTMLFormElement>) => {\n      e.preventDefault();\n      if (!canSubmit || isSubmitting) return;\n\n      const payload: BackendFormSubmitPayload = {\n        name: name.trim(),\n        host: normalizeHost(host),\n        apiKey: apiKey.trim(),\n        kind,\n      };\n\n      setConnectionError(null);\n      setIsSubmitting(true);\n\n      try {\n        // When onSubmitOverride is provided, it completely replaces the\n        // default flow (onTestConnection + onSuccess).\n        if (onSubmitOverride) {\n          await onSubmitOverride(payload);\n        } else {\n          const metadata = await onTestConnection(payload);\n          onSuccess(metadata);\n        }\n      } catch (error) {\n        setConnectionError(\n          getConnectionTestFailedMessage(\n            getConnectionTestFailedTitle(t, payload.host),\n            error,\n          ),\n        );\n      } finally {\n        setIsSubmitting(false);\n      }\n    },\n    [\n      canSubmit,\n      isSubmitting,\n      name,\n      host,\n      apiKey,\n      kind,\n      onTestConnection,\n      onSuccess,\n      requireApiKey,\n      onSubmitOverride,\n      t,\n    ],\n  );\n\n  return {\n    name,\n    setName,\n    host,\n    setHost,\n    apiKey,\n    setApiKey,\n    connectionError,\n    setConnectionError,\n    isSubmitting,\n    kind,\n    setKind: setKindOverride,\n    canSubmit,\n    handleSubmit,\n  };\n}\n\nexport interface BackendFormProps {\n  mode: BackendFormMode;\n  /** Required when `mode === \"edit\"`. */\n  backend?: Backend;\n  /**\n   * Called after the form is submitted and the backend has been\n   * persisted. Use this to dismiss a containing modal, advance an\n   * onboarding step, etc.\n   */\n  onSubmitted: () => void;\n  /**\n   * Optional render slot rendered in place of the default\n   * Save / Cancel button row, so callers (e.g. the onboarding flow)\n   * can re-skin the action area while still owning submission via the\n   * standard `<form onSubmit>` flow. Receives the form's submit-ready\n   * state.\n   */\n  renderActions?: (state: {\n    canSubmit: boolean;\n    isSubmitting: boolean;\n    testIdRoot: string;\n  }) => React.ReactNode;\n  /** Used to disambiguate test ids across the same screen. */\n  testIdRoot?: string;\n  /** When true, the host field is pre-filled and disabled. */\n  hostReadOnly?: boolean;\n  /**\n   * When true, a non-empty API key is required for submission regardless\n   * of the inferred backend kind.  The standard add form allows empty\n   * keys for local backends; the auth-gate screen needs to enforce one.\n   */\n  requireApiKey?: boolean;\n  /**\n   * When true, hides the name/host/API-key inputs (and related inline\n   * errors) while keeping the action row visible — used by onboarding\n   * after a successful connection probe.\n   */\n  hideConfigurationFields?: boolean;\n  /**\n   * Replace the default synchronous add/update-and-close submit with a\n   * custom async handler.  The form builds the payload, validates\n   * client-side, then hands it to this callback. If the callback throws,\n   * the form remains open so the caller can surface errors.\n   */\n  onSubmitOverride?: (payload: BackendFormSubmitPayload) => Promise<void>;\n}\n\n/**\n * Reusable form body for adding / editing a backend. Renders the\n * common name / host / API-key inputs plus the kind selector\n * (radio buttons in `add` mode, status badge in `edit` mode).\n *\n * Rendered as a `<form>`, so consumers should put any extra controls\n * either inside `renderActions` or as siblings inside a wrapping\n * element — but submission flows through the standard form submit so\n * Enter-to-submit still works.\n */\nexport function BackendForm({\n  mode,\n  backend,\n  onSubmitted,\n  renderActions,\n  testIdRoot: explicitTestIdRoot,\n  hostReadOnly,\n  requireApiKey,\n  hideConfigurationFields = false,\n  onSubmitOverride,\n}: BackendFormProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { addBackend, updateBackend } = useActiveBackendContext();\n\n  // In edit mode preserve the existing backend's kind so that renaming or\n  // rotating the API key on a cloud backend (e.g. an OHE/enterprise instance\n  // on a custom domain) does not silently downgrade it to \"local\" and switch\n  // the auth header from `Authorization: Bearer` to `X-Session-API-Key`.\n  // Only infer from the host when adding a new backend.\n  const fixedKind: BackendKind | null =\n    mode === \"edit\" && backend ? backend.kind : null;\n\n  const {\n    name,\n    setName,\n    host,\n    setHost,\n    apiKey,\n    setApiKey,\n    connectionError,\n    setConnectionError,\n    isSubmitting,\n    kind: inferredKind,\n    handleSubmit: runSubmit,\n  } = useBackendForm({\n    initialName: backend?.name ?? \"\",\n    initialHost: backend?.host ?? \"\",\n    initialApiKey: backend?.apiKey ?? \"\",\n    onTestConnection: testBackendConnection,\n    onSuccess: async () => {\n      const payload: BackendFormSubmitPayload = {\n        name: name.trim(),\n        host: normalizeHost(host),\n        apiKey: apiKey.trim(),\n        kind: fixedKind ?? inferredKind,\n      };\n      if (mode === \"edit\" && backend) {\n        updateBackend(backend.id, payload);\n      } else {\n        addBackend(payload);\n      }\n      onSubmitted();\n    },\n    requireApiKey,\n    onSubmitOverride,\n  });\n\n  // Inline validation: only show errors after the user has left a field.\n  const [nameTouched, setNameTouched] = React.useState(false);\n  const [hostTouched, setHostTouched] = React.useState(false);\n\n  const kind = fixedKind ?? inferredKind;\n  const testIdRoot =\n    explicitTestIdRoot ?? (mode === \"edit\" ? \"edit-backend\" : \"add-backend\");\n\n  const needsApiKey = requireApiKey || kind !== \"local\";\n  const canSubmit =\n    name.trim().length > 0 &&\n    isValidHostUrl(host) &&\n    (!needsApiKey || apiKey.trim().length > 0);\n\n  // Error messages — only surfaced after the user has blurred the field.\n  const nameError =\n    nameTouched && !name.trim() ? t(I18nKey.BACKEND$NAME_REQUIRED) : undefined;\n  const hostError = hostTouched\n    ? !host.trim()\n      ? t(I18nKey.BACKEND$HOST_REQUIRED)\n      : !isValidHostUrl(host)\n        ? t(I18nKey.BACKEND$HOST_INVALID)\n        : undefined\n    : undefined;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    if (!canSubmit) {\n      // Mark all validated fields as touched so inline errors become visible\n      // (e.g. user pressed Enter before filling required fields).\n      setNameTouched(true);\n      setHostTouched(true);\n      return;\n    }\n    await runSubmit(event);\n  };\n\n  return (\n    <form\n      data-testid={`${testIdRoot}-form`}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col gap-4\"\n    >\n      <div\n        data-testid={`${testIdRoot}-configuration-fields`}\n        className={cn(\n          \"flex flex-col gap-4\",\n          hideConfigurationFields && \"hidden\",\n        )}\n      >\n        <SettingsInput\n          testId={`${testIdRoot}-name`}\n          name={`${testIdRoot}-name`}\n          type=\"text\"\n          label={t(I18nKey.BACKEND$NAME_LABEL)}\n          value={name}\n          onChange={(value) => {\n            setName(value);\n            setConnectionError(null);\n          }}\n          onBlur={() => setNameTouched(true)}\n          // eslint-disable-next-line i18next/no-literal-string -- example placeholder, not user-facing copy\n          placeholder=\"Production\"\n          className=\"w-full\"\n          showRequiredTag\n          error={nameError}\n        />\n\n        <SettingsInput\n          testId={`${testIdRoot}-host`}\n          name={`${testIdRoot}-host`}\n          type=\"text\"\n          label={t(I18nKey.BACKEND$HOST_LABEL)}\n          value={host}\n          onChange={\n            hostReadOnly\n              ? undefined\n              : (value) => {\n                  setHost(value);\n                  setConnectionError(null);\n                }\n          }\n          onBlur={() => setHostTouched(true)}\n          placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n          className=\"w-full\"\n          showRequiredTag\n          error={hostError}\n          isDisabled={hostReadOnly}\n        />\n\n        <SettingsInput\n          testId={`${testIdRoot}-api-key`}\n          name={`${testIdRoot}-api-key`}\n          type=\"password\"\n          label={t(I18nKey.BACKEND$KEY_LABEL)}\n          value={apiKey}\n          onChange={(value) => {\n            setApiKey(value);\n            setConnectionError(null);\n          }}\n          placeholder=\"\"\n          className=\"w-full\"\n        />\n\n        {connectionError ? (\n          <div\n            role=\"alert\"\n            data-testid={`${testIdRoot}-error`}\n            className=\"rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words\"\n          >\n            {connectionError}\n          </div>\n        ) : null}\n\n        {mode === \"edit\" && backend && (\n          <BackendStatusBadge backend={backend} testIdRoot={testIdRoot} />\n        )}\n      </div>\n\n      {renderActions ? (\n        renderActions({\n          canSubmit: canSubmit && !isSubmitting,\n          isSubmitting,\n          testIdRoot,\n        })\n      ) : (\n        <div className=\"flex justify-end gap-2 mt-2 w-full\">\n          <BrandButton\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onSubmitted}\n            testId={`${testIdRoot}-cancel`}\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          <BrandButton\n            type=\"submit\"\n            variant=\"primary\"\n            isDisabled={!canSubmit || isSubmitting}\n            testId={`${testIdRoot}-submit`}\n          >\n            {t(I18nKey.BACKEND$SAVE)}\n          </BrandButton>\n        </div>\n      )}\n    </form>\n  );\n}\n\n// ── Add-mode two-column layout ──────────────────────────────────────\n\n/**\n * @spec BM-002 — Adding a backend auto-switches the active selection to it\n * (BM-001), so a backend-scoped detail page the user is viewing now belongs\n * to the previous backend. Redirect to that section's list so they never see\n * stale data, mirroring the switch-backend redirect in BackendSelector.\n */\nfunction useRedirectAfterAddBackend() {\n  const { currentPath, navigate } = useNavigation();\n  return React.useCallback(() => {\n    if (/^\\/automations\\/[^/]+/.test(currentPath)) navigate(\"/automations\");\n    else if (/^\\/conversations\\/[^/]+/.test(currentPath))\n      navigate(\"/conversations\");\n  }, [currentPath, navigate]);\n}\n\ninterface BackendConnectionOptionsProps {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  testIdRoot?: string;\n  initialManualBackend?: Partial<\n    Pick<BackendFormSubmitPayload, \"name\" | \"host\" | \"apiKey\">\n  >;\n  requireManualApiKey?: boolean;\n  manualSubmitLabel?: React.ReactNode;\n  manualSubmittingLabel?: React.ReactNode;\n  manualSubmitTestId?: string;\n  analyticsSource?: CloudConnectionSource;\n}\n\n/**\n * Manual agent-server connection plus OpenHands Cloud OAuth login.\n * Used by both the Add Backend modal and the onboarding backend step so\n * supported backend choices stay consistent across first-run and settings UI.\n */\nexport function BackendConnectionOptions({\n  onConnected,\n  testIdRoot = \"add-backend\",\n  initialManualBackend,\n  requireManualApiKey = false,\n  manualSubmitLabel,\n  manualSubmittingLabel,\n  manualSubmitTestId,\n  analyticsSource,\n}: BackendConnectionOptionsProps) {\n  const { t } = useTranslation(\"openhands\");\n  const lockedCloudHost = getLockedCloudHost();\n\n  if (lockedCloudHost) {\n    return (\n      <div\n        data-testid={`${testIdRoot}-connection-options`}\n        className=\"flex justify-center\"\n      >\n        <div className=\"w-full\">\n          <CloudLoginColumn\n            onConnected={onConnected}\n            testIdRoot={testIdRoot}\n            lockedHost={lockedCloudHost}\n            analyticsSource={analyticsSource}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-testid={`${testIdRoot}-connection-options`}\n      className=\"flex flex-col gap-6 md:flex-row\"\n    >\n      <div className=\"flex-1 min-w-0\">\n        <ManualConnectionColumn\n          onConnected={onConnected}\n          testIdRoot={testIdRoot}\n          initialBackend={initialManualBackend}\n          requireApiKey={requireManualApiKey}\n          submitLabel={manualSubmitLabel ?? t(I18nKey.BACKEND$CONNECT)}\n          submittingLabel={\n            manualSubmittingLabel ??\n            t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING)\n          }\n          submitTestId={manualSubmitTestId}\n        />\n      </div>\n\n      <div className=\"flex-1 min-w-0\">\n        <CloudLoginColumn\n          onConnected={onConnected}\n          testIdRoot={testIdRoot}\n          analyticsSource={analyticsSource}\n        />\n      </div>\n    </div>\n  );\n}\n\ninterface ManualConnectionColumnProps {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  testIdRoot: string;\n  initialBackend?: Partial<\n    Pick<BackendFormSubmitPayload, \"name\" | \"host\" | \"apiKey\">\n  >;\n  requireApiKey: boolean;\n  submitLabel: React.ReactNode;\n  submittingLabel: React.ReactNode;\n  submitTestId?: string;\n}\n\n/**\n * Manual connection via Host + API Key. Designed for self-hosted agent servers\n * and self-hosted OpenHands Cloud with API key auth.\n */\nfunction ManualConnectionColumn({\n  onConnected,\n  testIdRoot,\n  initialBackend,\n  requireApiKey,\n  submitLabel,\n  submittingLabel,\n  submitTestId,\n}: ManualConnectionColumnProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  const {\n    name,\n    setName,\n    host,\n    setHost,\n    apiKey,\n    setApiKey,\n    connectionError,\n    setConnectionError,\n    isSubmitting,\n    kind,\n    setKind,\n    canSubmit,\n    handleSubmit,\n  } = useBackendForm({\n    initialName: initialBackend?.name ?? \"\",\n    initialHost: initialBackend?.host ?? \"\",\n    initialApiKey: initialBackend?.apiKey ?? \"\",\n    onTestConnection: testBackendConnection,\n    onSuccess: (metadata) => {\n      onConnected(\n        {\n          name: name.trim(),\n          host: normalizeHost(host),\n          apiKey: apiKey.trim(),\n          kind,\n        },\n        \"manual\",\n        metadata,\n      );\n    },\n    requireApiKey,\n  });\n\n  return (\n    <form\n      data-testid={`${testIdRoot}-form`}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col gap-4 flex-1 min-w-0\"\n    >\n      <div className=\"flex flex-col gap-1\">\n        <SettingsInput\n          testId={`${testIdRoot}-name`}\n          name={`${testIdRoot}-name`}\n          type=\"text\"\n          label={t(I18nKey.BACKEND$NAME_LABEL)}\n          value={name}\n          onChange={(value) => {\n            setName(value);\n            setConnectionError(null);\n          }}\n          // eslint-disable-next-line i18next/no-literal-string -- example placeholder, not user-facing copy\n          placeholder=\"e.g. My Server\"\n          className=\"w-full\"\n        />\n        <p className=\"text-xs text-[var(--oh-muted)]\">\n          {t(I18nKey.BACKEND$NAME_HELPER)}\n        </p>\n      </div>\n\n      <div className=\"flex flex-col gap-1\">\n        <SettingsInput\n          testId={`${testIdRoot}-host`}\n          name={`${testIdRoot}-host`}\n          type=\"text\"\n          label={t(I18nKey.BACKEND$HOST_LABEL)}\n          value={host}\n          onChange={(value) => {\n            setHost(value);\n            setConnectionError(null);\n          }}\n          // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n          placeholder=\"http://localhost:8000\"\n          className=\"w-full\"\n        />\n        <p\n          className=\"text-xs text-[var(--oh-muted)]\"\n          data-testid={`${testIdRoot}-host-helper`}\n        >\n          {t(I18nKey.BACKEND$HOST_HELPER)}\n        </p>\n      </div>\n\n      <div className=\"flex flex-col items-start gap-2.5\">\n        <span className=\"text-sm\">{t(I18nKey.BACKEND$KIND_LABEL)}</span>\n        <SegmentedToggle<BackendKind>\n          value={kind}\n          options={[\n            { value: \"local\", label: t(I18nKey.BACKEND$KIND_LOCAL) },\n            { value: \"cloud\", label: t(I18nKey.BACKEND$KIND_CLOUD) },\n          ]}\n          onChange={(value) => setKind(value)}\n          ariaLabel={t(I18nKey.BACKEND$KIND_LABEL)}\n          testId={`${testIdRoot}-kind`}\n        />\n      </div>\n\n      <SettingsInput\n        testId={`${testIdRoot}-api-key`}\n        name={`${testIdRoot}-api-key`}\n        type=\"password\"\n        label={t(I18nKey.BACKEND$KEY_LABEL)}\n        value={apiKey}\n        onChange={(value) => {\n          setApiKey(value);\n          setConnectionError(null);\n        }}\n        // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n        placeholder=\"sk-••••••••••\"\n        className=\"w-full\"\n      />\n\n      {connectionError ? (\n        <div\n          role=\"alert\"\n          data-testid={`${testIdRoot}-error`}\n          className=\"rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words\"\n        >\n          {connectionError}\n        </div>\n      ) : null}\n\n      <BrandButton\n        type=\"submit\"\n        variant=\"secondary\"\n        isDisabled={!canSubmit || isSubmitting}\n        testId={submitTestId ?? `${testIdRoot}-submit`}\n        className=\"w-full text-center\"\n      >\n        {isSubmitting ? submittingLabel : submitLabel}\n      </BrandButton>\n    </form>\n  );\n}\n\ninterface CloudLoginColumnProps {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  testIdRoot: string;\n  lockedHost?: string;\n  analyticsSource?: CloudConnectionSource;\n}\n\n/**\n * One-click OAuth login with OpenHands Cloud. Includes an \"Advanced\"\n * disclosure for users who self-host OpenHands Cloud and need to override the\n * host.\n */\nfunction CloudLoginColumn({\n  onConnected,\n  testIdRoot,\n  lockedHost,\n  analyticsSource,\n}: CloudLoginColumnProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  const [advancedOpen, setAdvancedOpen] = React.useState(false);\n  const [customHost, setCustomHost] = React.useState(\"\");\n\n  const effectiveHost =\n    lockedHost ?? (customHost.trim() || DEFAULT_OPENHANDS_CLOUD_HOST);\n\n  const handleLoginSuccess = (apiKey: string) => {\n    onConnected(\n      {\n        name: \"OpenHands Cloud\",\n        host: normalizeHost(effectiveHost),\n        apiKey,\n        kind: \"cloud\",\n      },\n      \"cloud_login\",\n    );\n  };\n\n  return (\n    <div className=\"flex flex-1 min-w-0 flex-col items-center gap-3 pb-8\">\n      <div className=\"flex flex-col items-center gap-1\">\n        <OpenHandsLogoWhite width={56} height={56} aria-hidden />\n\n        <h4\n          className={modalTitleLgMediumClassName}\n          data-testid={`${testIdRoot}-cloud-title`}\n        >\n          {t(I18nKey.BACKEND$CLOUD_TITLE)}\n        </h4>\n      </div>\n\n      <p className=\"text-center text-sm leading-relaxed text-[var(--oh-muted)]\">\n        {t(I18nKey.BACKEND$CLOUD_DESCRIPTION)}\n      </p>\n\n      <DeviceFlowAuth\n        host={effectiveHost}\n        onSuccess={handleLoginSuccess}\n        testIdRoot={testIdRoot}\n        analyticsSource={analyticsSource}\n      />\n\n      {lockedHost ? null : (\n        <div className=\"w-full\">\n          <button\n            type=\"button\"\n            onClick={() => setAdvancedOpen((open) => !open)}\n            aria-expanded={advancedOpen}\n            data-testid={`${testIdRoot}-advanced-toggle`}\n            className=\"flex w-full cursor-pointer items-center justify-center gap-1 text-center text-xs text-[var(--oh-muted)] transition-colors hover:text-content-2\"\n          >\n            <span>{t(I18nKey.BACKEND$ADVANCED)}</span>\n            <ChevronDownSmallIcon\n              className={cn(\n                \"h-4 w-4 shrink-0 text-muted transition-transform\",\n                advancedOpen && \"rotate-180\",\n              )}\n              aria-hidden\n            />\n          </button>\n          <div\n            className={cn(\n              \"pt-2\",\n              !advancedOpen && \"pointer-events-none invisible\",\n            )}\n            aria-hidden={!advancedOpen}\n          >\n            <SettingsInput\n              testId={`${testIdRoot}-cloud-host`}\n              name={`${testIdRoot}-cloud-host`}\n              type=\"text\"\n              label={t(I18nKey.BACKEND$HOST_LABEL)}\n              value={customHost}\n              onChange={setCustomHost}\n              placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n              className=\"w-full\"\n            />\n            <p className=\"mt-1 text-xs text-[var(--oh-muted)]\">\n              {t(I18nKey.BACKEND$LOGIN_CLOUD_HINT)}\n            </p>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction AddBackendConnectionOptions({\n  onClose,\n  source,\n}: {\n  onClose: () => void;\n  source: BackendAddedSource;\n}) {\n  const { addBackend } = useActiveBackendContext();\n  const redirectAfterAdd = useRedirectAfterAddBackend();\n  const { trackBackendAdded } = useTracking();\n\n  const handleConnected = React.useCallback(\n    (\n      payload: BackendFormSubmitPayload,\n      connectionMethod: BackendConnectionMethod,\n      metadata?: BackendConnectionTestMetadata,\n    ) => {\n      addBackend(payload);\n      trackBackendAdded({\n        backendKind: payload.kind,\n        connectionMethod,\n        hasApiKey: Boolean(payload.apiKey),\n        source,\n        agentServerVersion: metadata?.agentServerVersion,\n      });\n      redirectAfterAdd();\n      onClose();\n    },\n    [addBackend, redirectAfterAdd, onClose, trackBackendAdded, source],\n  );\n\n  return (\n    <BackendConnectionOptions\n      onConnected={handleConnected}\n      analyticsSource={source}\n    />\n  );\n}\n\n// ── Modal wrappers ──────────────────────────────────────────────────\n\n/**\n * Modal wrapper. In **add** mode it renders a two-column layout\n * (manual connection | OR | Cloud login). In **edit** mode it wraps\n * the standard `BackendForm`.\n */\nexport function BackendFormModal({\n  mode,\n  backend,\n  onClose,\n  source = \"add_backend_modal\",\n  hideCloseButton = false,\n}: BackendFormModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (mode === \"add\") {\n    return (\n      <ModalBackdrop\n        onClose={hideCloseButton ? undefined : onClose}\n        closeOnEscape={false}\n        closeOnBackdropClick={!hideCloseButton}\n        aria-label={t(I18nKey.BACKEND$ADD_TITLE)}\n      >\n        <div\n          data-testid={\n            hideCloseButton ? \"onboarding-modal\" : \"add-backend-modal\"\n          }\n          className={cn(\n            \"relative rounded-xl border border-[var(--oh-border)] bg-base-secondary\",\n            modalWidthClassName(\"xl\"),\n            MODAL_MAX_WIDTH_VIEWPORT,\n          )}\n        >\n          {hideCloseButton ? null : (\n            <ModalCloseButton onClose={onClose} testId=\"add-backend-close\" />\n          )}\n          {/* Header - hide in locked Cloud first-run mode for cleaner UX */}\n          {hideCloseButton ? null : (\n            <div className=\"px-6 pt-6 pb-2 pr-12\">\n              <h2 className={modalTitleLgClassName}>\n                {t(I18nKey.BACKEND$ADD_TITLE)}\n              </h2>\n            </div>\n          )}\n\n          <div className={cn(\"px-6 pb-6\", hideCloseButton ? \"pt-6\" : \"pt-2\")}>\n            <AddBackendConnectionOptions onClose={onClose} source={source} />\n          </div>\n        </div>\n      </ModalBackdrop>\n    );\n  }\n\n  // Edit mode — single-column form (unchanged)\n  const testIdRoot = \"edit-backend\";\n  return (\n    <ModalBackdrop\n      onClose={onClose}\n      closeOnEscape={false}\n      aria-label={t(I18nKey.BACKEND$EDIT_TITLE)}\n    >\n      <div\n        data-testid={`${testIdRoot}-modal`}\n        className={cn(\n          \"relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]\",\n          modalWidthClassName(\"md\"),\n        )}\n      >\n        <ModalCloseButton onClose={onClose} testId={`${testIdRoot}-close`} />\n        <h2 className={cn(\"pr-6\", modalTitleLgClassName)}>\n          {t(I18nKey.BACKEND$EDIT_TITLE)}\n        </h2>\n        <BackendForm\n          mode=\"edit\"\n          backend={backend}\n          onSubmitted={onClose}\n          testIdRoot={testIdRoot}\n        />\n      </div>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"backend-form-modal.cjs","names":[],"sources":["../../../../src/components/features/backends/backend-form-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useTranslation } from \"react-i18next\";\nimport { ChevronDown, Globe, Info, Monitor } from \"lucide-react\";\nimport { ServerClient } from \"@openhands/typescript-client/clients\";\nimport OpenHandsLogoWhite from \"#/assets/branding/openhands-logo-white.svg?react\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport {\n  MODAL_MAX_WIDTH_VIEWPORT,\n  modalWidthClassName,\n} from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { SettingsInput } from \"#/components/features/settings/settings-input\";\nimport { SegmentedToggle } from \"#/components/features/files-tab/segmented-toggle\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useTracking } from \"#/hooks/use-tracking\";\nimport type { CloudConnectionSource } from \"#/services/cloud-funnel-analytics\";\nimport { getAgentServerClientOptions } from \"#/api/agent-server-client-options\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { isOpenHandsCloudHost } from \"#/api/device-flow-client\";\nimport {\n  assertAgentServerVersionIsSupported,\n  getDisplayAgentServerVersion,\n} from \"#/api/agent-server-compatibility\";\nimport ChevronDownSmallIcon from \"#/icons/chevron-down-small.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport type { Backend, BackendKind } from \"#/api/backend-registry/types\";\nimport { getUserFacingConnectionErrorMessage } from \"#/utils/user-facing-error\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  modalTitleLgClassName,\n  modalTitleLgMediumClassName,\n} from \"#/utils/modal-classes\";\nimport ExternalLinkIcon from \"#/icons/external-link.svg?react\";\nimport ServerIcon from \"#/icons/server.svg?react\";\nimport { getBackendStatusLabel } from \"./backend-status-label\";\nimport { BackendStatusDot } from \"./backend-status-dot\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\nexport type BackendFormMode = \"add\" | \"edit\";\n\ninterface BackendConnectionTestMetadata {\n  agentServerVersion: string | null;\n}\n\ninterface BackendFormModalProps {\n  mode: BackendFormMode;\n  /** Required when `mode === \"edit\"`. */\n  backend?: Backend;\n  onClose: () => void;\n  /** Analytics surface for the `backend_added` event (add mode only). */\n  source?: BackendAddedSource;\n  /** Hide the close button and disable backdrop/escape dismissal. Used for locked Cloud first-run. */\n  hideCloseButton?: boolean;\n}\n\n/**\n * Seed the default backend kind from the host. Uses proper hostname-suffix\n * matching (via {@link isOpenHandsCloudHost}) rather than a substring test, so\n * a look-alike host such as `all-hands-testing.dev` isn't misread as cloud.\n *\n * This is only a *default*: a self-hosted OpenHands Cloud/Enterprise instance\n * on a truly custom domain is indistinguishable from a local agent-server by\n * host alone, so the manual add form lets the user override the kind\n * explicitly (see the Type selector in ManualConnectionColumn).\n */\nfunction inferKindFromHost(host: string): BackendKind {\n  return isOpenHandsCloudHost(host) ? \"cloud\" : \"local\";\n}\n\n/**\n * Returns true for hostnames that represent a local / private-network address.\n * Used by normalizeHost to choose http:// instead of https://.\n */\nfunction isLocalAddress(hostname: string): boolean {\n  // Strip IPv6 bracket notation: [::1] → ::1\n  const h = hostname.toLowerCase().replace(/^\\[|\\]$/g, \"\");\n  // IPv6 loopback, any-address, and named loopback\n  if (h === \"localhost\" || h === \"::1\" || h === \"::\" || h === \"0.0.0.0\")\n    return true;\n  // 127.x.x.x loopback range + IPv4-mapped loopback (::ffff:127.x.x.x)\n  if (/^127\\./.test(h) || /^::ffff:127\\./i.test(h)) return true;\n  // RFC 1918 private ranges\n  if (/^10\\./.test(h)) return true;\n  if (/^192\\.168\\./.test(h)) return true;\n  if (/^172\\.(1[6-9]|2\\d|3[01])\\./.test(h)) return true;\n  // IPv6 link-local (fe80::/10) and unique local (fc00::/7)\n  if (/^fe[89ab][0-9a-f]:/i.test(h)) return true;\n  if (/^f[cd][0-9a-f]{2}:/i.test(h)) return true;\n  // mDNS / Bonjour (.local)\n  if (h.endsWith(\".local\")) return true;\n  // Single-label hostnames (no dots, no colons) are local network names.\n  // Colons are excluded so bare IPv6 addresses don't accidentally match.\n  if (!h.includes(\".\") && !h.includes(\":\")) return true;\n  return false;\n}\n\nfunction normalizeHost(host: string): string {\n  const trimmed = host.trim().replace(/\\/+$/, \"\");\n  if (!trimmed) return \"\";\n  // Already has an explicit scheme — respect it.\n  if (/^https?:\\/\\//i.test(trimmed)) return trimmed;\n  // Extract the pure hostname for scheme selection, handling three cases:\n  //   [::1]:8080  → bracket IPv6 notation → extract ::1\n  //   ::1         → bare IPv6 (multiple colons, no bracket) → whole string\n  //   host:port   → regular host:port → part before the colon\n  const bracketMatch = trimmed.match(/^\\[([^\\]]+)\\]/);\n  const hostname = bracketMatch\n    ? bracketMatch[1]\n    : (trimmed.match(/:/g) ?? []).length > 1\n      ? trimmed\n      : trimmed.split(\":\")[0];\n  const scheme = isLocalAddress(hostname) ? \"http\" : \"https\";\n  return `${scheme}://${trimmed}`;\n}\n\n/**\n * Returns true when `host` represents a reachable backend URL.\n *\n * Rules (applied in order):\n *   1. Must be non-empty after trimming.\n *   2. Must contain no whitespace — spaces can never appear in a host/port.\n *   3. After normalisation (bare hosts get `https://` prepended), must parse\n *      as a valid http or https URL with a non-empty hostname.\n */\nfunction isValidHostUrl(host: string): boolean {\n  const trimmed = host.trim();\n  if (!trimmed) return false;\n  // Spaces anywhere in the input are an immediate rejection.\n  if (/\\s/.test(trimmed)) return false;\n  const normalized = normalizeHost(trimmed);\n  if (!normalized) return false;\n  try {\n    const url = new URL(normalized);\n    return (\n      (url.protocol === \"http:\" || url.protocol === \"https:\") &&\n      url.hostname.length > 0\n    );\n  } catch {\n    return false;\n  }\n}\n\nconst DEFAULT_OPENHANDS_CLOUD_HOST = \"https://app.all-hands.dev\";\nconst LOCAL_BACKEND_COMMAND = \"agent-canvas --backend-only --port 8001\";\nconst LOCAL_AGENT_SERVER_DOCS_URL =\n  \"https://github.com/OpenHands/OpenHands/blob/main/docs/DEVELOPMENT.md#alternative-development-workflows\";\nconst REMOTE_AGENT_SERVER_DOCS_URL =\n  \"https://github.com/OpenHands/OpenHands/blob/main/docs/SELF_HOSTING.md\";\nconst DEPLOYMENT_OPTIONS_URL =\n  \"https://docs.openhands.dev/overview/introduction\";\nexport type BackendConnectionMethod = \"manual\" | \"cloud_login\";\n\nexport type BackendAddedSource = CloudConnectionSource;\ntype AddBackendOption = \"cloud\" | \"agent-server\";\ntype AgentServerLocation = \"local\" | \"remote\";\n\nfunction getConnectionTestFailedTitle(\n  t: ReturnType<typeof useTranslation>[\"t\"],\n  host: string,\n): string {\n  return t(I18nKey.BACKEND$CONNECTION_TEST_FAILED, {\n    host,\n    interpolation: { escapeValue: false },\n  });\n}\n\nfunction getConnectionErrorDetail(error: unknown): string | null {\n  return getUserFacingConnectionErrorMessage(error);\n}\n\nfunction getConnectionTestFailedMessage(title: string, error: unknown): string {\n  const detail = getConnectionErrorDetail(error);\n  return detail ? `${title}\\n${detail}` : title;\n}\n\nasync function testBackendConnection(\n  backend: Pick<Backend, \"host\" | \"apiKey\" | \"kind\">,\n): Promise<BackendConnectionTestMetadata> {\n  // Cloud backends authenticate via OAuth; preflight GET is not applicable.\n  if (backend.kind !== \"local\") return { agentServerVersion: null };\n\n  const serverInfo = await new ServerClient(\n    getAgentServerClientOptions({\n      host: backend.host,\n      sessionApiKey: backend.apiKey || null,\n      timeout: 5000,\n    }),\n  ).getServerInfo();\n  assertAgentServerVersionIsSupported(serverInfo);\n  return { agentServerVersion: getDisplayAgentServerVersion(serverInfo) };\n}\n\n/**\n * Live status row for the edit form: shows a connection dot, a\n * \"Local\"/\"Cloud\" label, and the agent server's reported version when\n * available. Replaces the legacy local/cloud radio fieldset (kind is\n * now inferred from the host).\n */\nfunction BackendStatusBadge({\n  backend,\n  testIdRoot,\n}: {\n  backend: Backend;\n  testIdRoot: string;\n}) {\n  const { t } = useTranslation(\"openhands\");\n  const healthByBackendId = useBackendsHealth([backend]);\n  const health = healthByBackendId[backend.id];\n  const isConnected = health?.isConnected ?? null;\n  const disabled = health?.disabled === true;\n  const consecutiveFailures = health?.consecutiveFailures ?? 0;\n  const lastError = health?.lastError ?? null;\n\n  const { data: version } = useQuery({\n    queryKey: [\"backend-version\", backend.host, backend.apiKey],\n    queryFn: async () => {\n      const info = await new ServerClient(\n        getAgentServerClientOptions({\n          host: backend.host,\n          sessionApiKey: backend.apiKey || null,\n          timeout: 5000,\n        }),\n      ).getServerInfo();\n      return getDisplayAgentServerVersion(info);\n    },\n    retry: false,\n    staleTime: 60_000,\n    enabled: backend.kind === \"local\" && !disabled,\n  });\n\n  const statusLabel = getBackendStatusLabel(t, backend, health);\n\n  const kindLabel =\n    backend.kind === \"cloud\"\n      ? t(I18nKey.BACKEND$KIND_CLOUD)\n      : t(I18nKey.BACKEND$KIND_LOCAL);\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div\n        data-testid={`${testIdRoot}-status`}\n        className=\"flex items-center gap-3 text-sm\"\n      >\n        <BackendStatusDot isConnected={isConnected} />\n        <span className=\"text-white\" data-testid={`${testIdRoot}-status-label`}>\n          {statusLabel}\n        </span>\n        <span className=\"text-tertiary-alt\">·</span>\n        <span className=\"text-[var(--oh-text-tertiary)]\">{kindLabel}</span>\n        {version ? (\n          <span\n            className=\"text-xs text-[var(--oh-muted)]\"\n            data-testid={`${testIdRoot}-version`}\n          >\n            {t(I18nKey.BACKEND$VERSION_LABEL, { version })}\n          </span>\n        ) : null}\n      </div>\n\n      {disabled ? (\n        <div\n          data-testid={`${testIdRoot}-status-error`}\n          className=\"flex flex-col gap-1 rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm\"\n        >\n          <span className=\"font-semibold text-red-300\">\n            {t(I18nKey.BACKEND$HEALTH_FAILED_TITLE)}\n          </span>\n          <span className=\"text-xs text-[var(--oh-text-tertiary)]\">\n            {t(I18nKey.BACKEND$HEALTH_FAILED_DETAIL, {\n              count: consecutiveFailures,\n            })}\n          </span>\n          {lastError ? (\n            <span\n              data-testid={`${testIdRoot}-status-error-message`}\n              className=\"text-xs text-red-300 whitespace-pre-wrap break-words\"\n            >\n              {lastError}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface BackendFormSubmitPayload {\n  name: string;\n  host: string;\n  apiKey: string;\n  kind: BackendKind;\n}\n\ninterface UseBackendFormOptions {\n  initialName?: string;\n  initialHost?: string;\n  initialApiKey?: string;\n  /**\n   * Called to test the connection. The hook does NOT call\n   * `testBackendConnection` directly so callers can inject a\n   * wrapped version (e.g. with extra logging or different timeout).\n   * Should throw on failure.\n   */\n  onTestConnection: (\n    payload: BackendFormSubmitPayload,\n  ) => Promise<BackendConnectionTestMetadata>;\n  /** Called after a successful connection test and persistence. */\n  onSuccess: (metadata: BackendConnectionTestMetadata) => void;\n  /** Require a non-empty API key even when the host looks local. */\n  requireApiKey?: boolean;\n  /**\n   * When provided, completely replaces the default submit flow\n   * (onTestConnection + onSuccess). The hook still manages form state\n   * and canSubmit validation, but the caller owns error handling and\n   * success side effects. Should throw on failure.\n   */\n  onSubmitOverride?: (payload: BackendFormSubmitPayload) => Promise<void>;\n  /** Fix the persisted backend kind instead of inferring it from the host. */\n  fixedKind?: BackendKind;\n}\n\n/**\n * Shared hook for the backend-form state used by both `BackendForm`\n * (edit/add mode) and `ManualConnectionColumn` (add-mode-only column).\n * Encapsulates name / host / apiKey fields, `connectionError`,\n * `isSubmitting`, and the shared `handleSubmit` flow.\n */\nfunction useBackendForm({\n  initialName = \"\",\n  initialHost = \"\",\n  initialApiKey = \"\",\n  onTestConnection,\n  onSuccess,\n  requireApiKey = false,\n  onSubmitOverride,\n  fixedKind,\n}: UseBackendFormOptions) {\n  const { t } = useTranslation(\"openhands\");\n\n  const [name, setName] = React.useState(initialName);\n  const [host, setHost] = React.useState(initialHost);\n  const [apiKey, setApiKey] = React.useState(initialApiKey);\n  const [connectionError, setConnectionError] = React.useState<string | null>(\n    null,\n  );\n  const [isSubmitting, setIsSubmitting] = React.useState(false);\n  const [kindOverride, setKindOverride] = React.useState<BackendKind | null>(\n    null,\n  );\n\n  // Kind follows host inference until the user explicitly picks a type, then\n  // respects that choice. A custom-domain OHE can't be distinguished from a\n  // custom-domain local agent-server by host alone, so ManualConnectionColumn\n  // exposes `setKind` (a Type selector) to let the user declare it.\n  const kind = fixedKind ?? kindOverride ?? inferKindFromHost(host);\n  const needsApiKey = requireApiKey || kind !== \"local\";\n  const canSubmit =\n    name.trim().length > 0 &&\n    isValidHostUrl(host) &&\n    (!needsApiKey || apiKey.trim().length > 0);\n\n  const handleSubmit = React.useCallback(\n    async (e: React.FormEvent<HTMLFormElement>) => {\n      e.preventDefault();\n      if (!canSubmit || isSubmitting) return;\n\n      const payload: BackendFormSubmitPayload = {\n        name: name.trim(),\n        host: normalizeHost(host),\n        apiKey: apiKey.trim(),\n        kind,\n      };\n\n      setConnectionError(null);\n      setIsSubmitting(true);\n\n      try {\n        // When onSubmitOverride is provided, it completely replaces the\n        // default flow (onTestConnection + onSuccess).\n        if (onSubmitOverride) {\n          await onSubmitOverride(payload);\n        } else {\n          const metadata = await onTestConnection(payload);\n          onSuccess(metadata);\n        }\n      } catch (error) {\n        setConnectionError(\n          getConnectionTestFailedMessage(\n            getConnectionTestFailedTitle(t, payload.host),\n            error,\n          ),\n        );\n      } finally {\n        setIsSubmitting(false);\n      }\n    },\n    [\n      canSubmit,\n      isSubmitting,\n      name,\n      host,\n      apiKey,\n      kind,\n      onTestConnection,\n      onSuccess,\n      requireApiKey,\n      onSubmitOverride,\n      fixedKind,\n      t,\n    ],\n  );\n\n  return {\n    name,\n    setName,\n    host,\n    setHost,\n    apiKey,\n    setApiKey,\n    connectionError,\n    setConnectionError,\n    isSubmitting,\n    kind,\n    setKind: setKindOverride,\n    canSubmit,\n    handleSubmit,\n  };\n}\n\nexport interface BackendFormProps {\n  mode: BackendFormMode;\n  /** Required when `mode === \"edit\"`. */\n  backend?: Backend;\n  /**\n   * Called after the form is submitted and the backend has been\n   * persisted. Use this to dismiss a containing modal, advance an\n   * onboarding step, etc.\n   */\n  onSubmitted: () => void;\n  /**\n   * Optional render slot rendered in place of the default\n   * Save / Cancel button row, so callers (e.g. the onboarding flow)\n   * can re-skin the action area while still owning submission via the\n   * standard `<form onSubmit>` flow. Receives the form's submit-ready\n   * state.\n   */\n  renderActions?: (state: {\n    canSubmit: boolean;\n    isSubmitting: boolean;\n    testIdRoot: string;\n  }) => React.ReactNode;\n  /** Used to disambiguate test ids across the same screen. */\n  testIdRoot?: string;\n  /** When true, the host field is pre-filled and disabled. */\n  hostReadOnly?: boolean;\n  /**\n   * When true, a non-empty API key is required for submission regardless\n   * of the inferred backend kind.  The standard add form allows empty\n   * keys for local backends; the auth-gate screen needs to enforce one.\n   */\n  requireApiKey?: boolean;\n  /**\n   * When true, hides the name/host/API-key inputs (and related inline\n   * errors) while keeping the action row visible — used by onboarding\n   * after a successful connection probe.\n   */\n  hideConfigurationFields?: boolean;\n  /**\n   * Replace the default synchronous add/update-and-close submit with a\n   * custom async handler.  The form builds the payload, validates\n   * client-side, then hands it to this callback. If the callback throws,\n   * the form remains open so the caller can surface errors.\n   */\n  onSubmitOverride?: (payload: BackendFormSubmitPayload) => Promise<void>;\n}\n\n/**\n * Reusable form body for adding / editing a backend. Renders the\n * common name / host / API-key inputs plus the kind selector\n * (radio buttons in `add` mode, status badge in `edit` mode).\n *\n * Rendered as a `<form>`, so consumers should put any extra controls\n * either inside `renderActions` or as siblings inside a wrapping\n * element — but submission flows through the standard form submit so\n * Enter-to-submit still works.\n */\nexport function BackendForm({\n  mode,\n  backend,\n  onSubmitted,\n  renderActions,\n  testIdRoot: explicitTestIdRoot,\n  hostReadOnly,\n  requireApiKey,\n  hideConfigurationFields = false,\n  onSubmitOverride,\n}: BackendFormProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { addBackend, updateBackend } = useActiveBackendContext();\n\n  // In edit mode preserve the existing backend's kind so that renaming or\n  // rotating the API key on a cloud backend (e.g. an OHE/enterprise instance\n  // on a custom domain) does not silently downgrade it to \"local\" and switch\n  // the auth header from `Authorization: Bearer` to `X-Session-API-Key`.\n  // Only infer from the host when adding a new backend.\n  const fixedKind: BackendKind | null =\n    mode === \"edit\" && backend ? backend.kind : null;\n\n  const {\n    name,\n    setName,\n    host,\n    setHost,\n    apiKey,\n    setApiKey,\n    connectionError,\n    setConnectionError,\n    isSubmitting,\n    kind: inferredKind,\n    handleSubmit: runSubmit,\n  } = useBackendForm({\n    initialName: backend?.name ?? \"\",\n    initialHost: backend?.host ?? \"\",\n    initialApiKey: backend?.apiKey ?? \"\",\n    onTestConnection: testBackendConnection,\n    onSuccess: async () => {\n      const payload: BackendFormSubmitPayload = {\n        name: name.trim(),\n        host: normalizeHost(host),\n        apiKey: apiKey.trim(),\n        kind: fixedKind ?? inferredKind,\n      };\n      if (mode === \"edit\" && backend) {\n        updateBackend(backend.id, payload);\n      } else {\n        addBackend(payload);\n      }\n      onSubmitted();\n    },\n    requireApiKey,\n    onSubmitOverride,\n  });\n\n  // Inline validation: only show errors after the user has left a field.\n  const [nameTouched, setNameTouched] = React.useState(false);\n  const [hostTouched, setHostTouched] = React.useState(false);\n\n  const kind = fixedKind ?? inferredKind;\n  const testIdRoot =\n    explicitTestIdRoot ?? (mode === \"edit\" ? \"edit-backend\" : \"add-backend\");\n\n  const needsApiKey = requireApiKey || kind !== \"local\";\n  const canSubmit =\n    name.trim().length > 0 &&\n    isValidHostUrl(host) &&\n    (!needsApiKey || apiKey.trim().length > 0);\n\n  // Error messages — only surfaced after the user has blurred the field.\n  const nameError =\n    nameTouched && !name.trim() ? t(I18nKey.BACKEND$NAME_REQUIRED) : undefined;\n  const hostError = hostTouched\n    ? !host.trim()\n      ? t(I18nKey.BACKEND$HOST_REQUIRED)\n      : !isValidHostUrl(host)\n        ? t(I18nKey.BACKEND$HOST_INVALID)\n        : undefined\n    : undefined;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    if (!canSubmit) {\n      // Mark all validated fields as touched so inline errors become visible\n      // (e.g. user pressed Enter before filling required fields).\n      setNameTouched(true);\n      setHostTouched(true);\n      return;\n    }\n    await runSubmit(event);\n  };\n\n  return (\n    <form\n      data-testid={`${testIdRoot}-form`}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col gap-4\"\n    >\n      <div\n        data-testid={`${testIdRoot}-configuration-fields`}\n        className={cn(\n          \"flex flex-col gap-4\",\n          hideConfigurationFields && \"hidden\",\n        )}\n      >\n        <SettingsInput\n          testId={`${testIdRoot}-name`}\n          name={`${testIdRoot}-name`}\n          type=\"text\"\n          label={t(I18nKey.BACKEND$NAME_LABEL)}\n          value={name}\n          onChange={(value) => {\n            setName(value);\n            setConnectionError(null);\n          }}\n          onBlur={() => setNameTouched(true)}\n          // eslint-disable-next-line i18next/no-literal-string -- example placeholder, not user-facing copy\n          placeholder=\"Production\"\n          className=\"w-full\"\n          showRequiredTag\n          error={nameError}\n        />\n\n        <SettingsInput\n          testId={`${testIdRoot}-host`}\n          name={`${testIdRoot}-host`}\n          type=\"text\"\n          label={t(I18nKey.BACKEND$HOST_LABEL)}\n          value={host}\n          onChange={\n            hostReadOnly\n              ? undefined\n              : (value) => {\n                  setHost(value);\n                  setConnectionError(null);\n                }\n          }\n          onBlur={() => setHostTouched(true)}\n          placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n          className=\"w-full\"\n          showRequiredTag\n          error={hostError}\n          isDisabled={hostReadOnly}\n        />\n\n        <SettingsInput\n          testId={`${testIdRoot}-api-key`}\n          name={`${testIdRoot}-api-key`}\n          type=\"password\"\n          label={t(I18nKey.BACKEND$KEY_LABEL)}\n          value={apiKey}\n          onChange={(value) => {\n            setApiKey(value);\n            setConnectionError(null);\n          }}\n          placeholder=\"\"\n          className=\"w-full\"\n        />\n\n        {connectionError ? (\n          <div\n            role=\"alert\"\n            data-testid={`${testIdRoot}-error`}\n            className=\"rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words\"\n          >\n            {connectionError}\n          </div>\n        ) : null}\n\n        {mode === \"edit\" && backend && (\n          <BackendStatusBadge backend={backend} testIdRoot={testIdRoot} />\n        )}\n      </div>\n\n      {renderActions ? (\n        renderActions({\n          canSubmit: canSubmit && !isSubmitting,\n          isSubmitting,\n          testIdRoot,\n        })\n      ) : (\n        <div className=\"flex justify-end gap-2 mt-2 w-full\">\n          <BrandButton\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={onSubmitted}\n            testId={`${testIdRoot}-cancel`}\n          >\n            {t(I18nKey.BUTTON$CANCEL)}\n          </BrandButton>\n          <BrandButton\n            type=\"submit\"\n            variant=\"primary\"\n            isDisabled={!canSubmit || isSubmitting}\n            testId={`${testIdRoot}-submit`}\n          >\n            {t(I18nKey.BACKEND$SAVE)}\n          </BrandButton>\n        </div>\n      )}\n    </form>\n  );\n}\n\n// ── Add-mode two-column layout ──────────────────────────────────────\n\n/**\n * @spec BM-002 — Adding a backend auto-switches the active selection to it\n * (BM-001), so a backend-scoped detail page the user is viewing now belongs\n * to the previous backend. Redirect to that section's list so they never see\n * stale data, mirroring the switch-backend redirect in BackendSelector.\n */\nfunction useRedirectAfterAddBackend() {\n  const { currentPath, navigate } = useNavigation();\n  return React.useCallback(() => {\n    if (/^\\/automations\\/[^/]+/.test(currentPath)) navigate(\"/automations\");\n    else if (/^\\/conversations\\/[^/]+/.test(currentPath))\n      navigate(\"/conversations\");\n  }, [currentPath, navigate]);\n}\n\ninterface BackendConnectionOptionsProps {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  testIdRoot?: string;\n  initialManualBackend?: Partial<\n    Pick<BackendFormSubmitPayload, \"name\" | \"host\" | \"apiKey\">\n  >;\n  requireManualApiKey?: boolean;\n  manualSubmitLabel?: React.ReactNode;\n  manualSubmittingLabel?: React.ReactNode;\n  manualSubmitTestId?: string;\n  analyticsSource?: CloudConnectionSource;\n}\n\n/**\n * Manual agent-server connection plus OpenHands Cloud OAuth login.\n * Used by both the Add Backend modal and the onboarding backend step so\n * supported backend choices stay consistent across first-run and settings UI.\n */\nexport function BackendConnectionOptions({\n  onConnected,\n  testIdRoot = \"add-backend\",\n  initialManualBackend,\n  requireManualApiKey = false,\n  manualSubmitLabel,\n  manualSubmittingLabel,\n  manualSubmitTestId,\n  analyticsSource,\n}: BackendConnectionOptionsProps) {\n  const { t } = useTranslation(\"openhands\");\n  const lockedCloudHost = getLockedCloudHost();\n\n  if (lockedCloudHost) {\n    return (\n      <div\n        data-testid={`${testIdRoot}-connection-options`}\n        className=\"flex justify-center\"\n      >\n        <div className=\"w-full\">\n          <CloudLoginColumn\n            onConnected={onConnected}\n            testIdRoot={testIdRoot}\n            lockedHost={lockedCloudHost}\n            analyticsSource={analyticsSource}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-testid={`${testIdRoot}-connection-options`}\n      className=\"flex flex-col gap-6 md:flex-row\"\n    >\n      <div className=\"flex-1 min-w-0\">\n        <ManualConnectionColumn\n          onConnected={onConnected}\n          testIdRoot={testIdRoot}\n          initialBackend={initialManualBackend}\n          requireApiKey={requireManualApiKey}\n          submitLabel={manualSubmitLabel ?? t(I18nKey.BACKEND$CONNECT)}\n          submittingLabel={\n            manualSubmittingLabel ??\n            t(I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING)\n          }\n          submitTestId={manualSubmitTestId}\n        />\n      </div>\n\n      <div className=\"flex-1 min-w-0\">\n        <CloudLoginColumn\n          onConnected={onConnected}\n          testIdRoot={testIdRoot}\n          analyticsSource={analyticsSource}\n        />\n      </div>\n    </div>\n  );\n}\n\ninterface ManualConnectionColumnProps {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  testIdRoot: string;\n  initialBackend?: Partial<\n    Pick<BackendFormSubmitPayload, \"name\" | \"host\" | \"apiKey\">\n  >;\n  requireApiKey: boolean;\n  submitLabel: React.ReactNode;\n  submittingLabel: React.ReactNode;\n  submitTestId?: string;\n  fixedKind?: BackendKind;\n  showKindSelector?: boolean;\n}\n\n/**\n * Manual connection via Host + API Key. Designed for self-hosted agent servers\n * and self-hosted OpenHands Cloud with API key auth.\n */\nfunction ManualConnectionColumn({\n  onConnected,\n  testIdRoot,\n  initialBackend,\n  requireApiKey,\n  submitLabel,\n  submittingLabel,\n  submitTestId,\n  fixedKind,\n  showKindSelector = true,\n}: ManualConnectionColumnProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  const {\n    name,\n    setName,\n    host,\n    setHost,\n    apiKey,\n    setApiKey,\n    connectionError,\n    setConnectionError,\n    isSubmitting,\n    kind,\n    setKind,\n    canSubmit,\n    handleSubmit,\n  } = useBackendForm({\n    initialName: initialBackend?.name ?? \"\",\n    initialHost: initialBackend?.host ?? \"\",\n    initialApiKey: initialBackend?.apiKey ?? \"\",\n    onTestConnection: testBackendConnection,\n    onSuccess: (metadata) => {\n      onConnected(\n        {\n          name: name.trim(),\n          host: normalizeHost(host),\n          apiKey: apiKey.trim(),\n          kind,\n        },\n        \"manual\",\n        metadata,\n      );\n    },\n    requireApiKey,\n    fixedKind,\n  });\n\n  return (\n    <form\n      data-testid={`${testIdRoot}-form`}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col gap-4 flex-1 min-w-0\"\n    >\n      <SettingsInput\n        testId={`${testIdRoot}-name`}\n        name={`${testIdRoot}-name`}\n        type=\"text\"\n        label={t(I18nKey.BACKEND$NAME_LABEL)}\n        hint={t(I18nKey.BACKEND$NAME_HELPER)}\n        value={name}\n        onChange={(value) => {\n          setName(value);\n          setConnectionError(null);\n        }}\n        // eslint-disable-next-line i18next/no-literal-string -- example placeholder, not user-facing copy\n        placeholder=\"e.g. My Server\"\n        className=\"w-full\"\n      />\n\n      <SettingsInput\n        testId={`${testIdRoot}-host`}\n        name={`${testIdRoot}-host`}\n        type=\"text\"\n        label={t(I18nKey.BACKEND$HOST_LABEL)}\n        hint={t(I18nKey.BACKEND$HOST_HELPER)}\n        value={host}\n        onChange={(value) => {\n          setHost(value);\n          setConnectionError(null);\n        }}\n        // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n        placeholder=\"http://localhost:8000\"\n        className=\"w-full\"\n      />\n\n      {showKindSelector ? (\n        <div className=\"flex flex-col items-start gap-2.5\">\n          <span className=\"text-sm\">{t(I18nKey.BACKEND$KIND_LABEL)}</span>\n          <SegmentedToggle<BackendKind>\n            value={kind}\n            options={[\n              { value: \"local\", label: t(I18nKey.BACKEND$KIND_LOCAL) },\n              { value: \"cloud\", label: t(I18nKey.BACKEND$KIND_CLOUD) },\n            ]}\n            onChange={(value) => setKind(value)}\n            ariaLabel={t(I18nKey.BACKEND$KIND_LABEL)}\n            testId={`${testIdRoot}-kind`}\n          />\n        </div>\n      ) : null}\n\n      <SettingsInput\n        testId={`${testIdRoot}-api-key`}\n        name={`${testIdRoot}-api-key`}\n        type=\"password\"\n        label={t(I18nKey.BACKEND$KEY_LABEL)}\n        value={apiKey}\n        onChange={(value) => {\n          setApiKey(value);\n          setConnectionError(null);\n        }}\n        // eslint-disable-next-line i18next/no-literal-string -- example value, not translatable\n        placeholder=\"sk-••••••••••\"\n        className=\"w-full\"\n      />\n\n      {connectionError ? (\n        <div\n          role=\"alert\"\n          data-testid={`${testIdRoot}-error`}\n          className=\"rounded-md border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300 whitespace-pre-wrap break-words\"\n        >\n          {connectionError}\n        </div>\n      ) : null}\n\n      <BrandButton\n        type=\"submit\"\n        variant=\"secondary\"\n        isDisabled={!canSubmit || isSubmitting}\n        testId={submitTestId ?? `${testIdRoot}-submit`}\n        className=\"w-full text-center\"\n      >\n        {isSubmitting ? submittingLabel : submitLabel}\n      </BrandButton>\n    </form>\n  );\n}\n\ninterface CloudLoginColumnProps {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  testIdRoot: string;\n  lockedHost?: string;\n  analyticsSource?: CloudConnectionSource;\n  /** Omit repeated branding when a surrounding chooser already names Cloud. */\n  showBranding?: boolean;\n}\n\n/**\n * One-click OAuth login with OpenHands Cloud. Includes an \"Advanced\"\n * disclosure for users who self-host OpenHands Cloud and need to override the\n * host.\n */\nfunction CloudLoginColumn({\n  onConnected,\n  testIdRoot,\n  lockedHost,\n  analyticsSource,\n  showBranding = true,\n}: CloudLoginColumnProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  const [advancedOpen, setAdvancedOpen] = React.useState(false);\n  const [customHost, setCustomHost] = React.useState(\"\");\n  const advancedPanelId = `${testIdRoot}-advanced-panel`;\n\n  const effectiveHost =\n    lockedHost ?? (customHost.trim() || DEFAULT_OPENHANDS_CLOUD_HOST);\n\n  const handleLoginSuccess = (apiKey: string) => {\n    onConnected(\n      {\n        name: \"OpenHands Cloud\",\n        host: normalizeHost(effectiveHost),\n        apiKey,\n        kind: \"cloud\",\n      },\n      \"cloud_login\",\n    );\n  };\n\n  return (\n    <div className=\"flex w-full min-w-0 flex-col items-center gap-3\">\n      {showBranding ? (\n        <div className=\"flex flex-col items-center gap-1\">\n          <OpenHandsLogoWhite width={56} height={56} aria-hidden />\n\n          <h4\n            className={modalTitleLgMediumClassName}\n            data-testid={`${testIdRoot}-cloud-title`}\n          >\n            {t(I18nKey.BACKEND$CLOUD_TITLE)}\n          </h4>\n        </div>\n      ) : null}\n\n      <DeviceFlowAuth\n        host={effectiveHost}\n        onSuccess={handleLoginSuccess}\n        testIdRoot={testIdRoot}\n        analyticsSource={analyticsSource}\n        className=\"w-full items-center\"\n        idleDescription={\n          <p\n            className=\"text-center text-sm leading-relaxed text-[var(--oh-muted)]\"\n            data-testid={`${testIdRoot}-cloud-description`}\n          >\n            {t(I18nKey.BACKEND$CLOUD_DESCRIPTION)}\n          </p>\n        }\n        // Host overriding only matters before the flow starts, so it rides the\n        // same idle-only slot as the description instead of sitting under the\n        // authorization status.\n        idleFooter={\n          lockedHost ? null : (\n            // Keep the Advanced disclosure at the original compact width even\n            // though the surrounding cloud panel spans the full chooser.\n            <div className=\"mx-auto w-full max-w-md\">\n              <button\n                type=\"button\"\n                onClick={() => setAdvancedOpen((open) => !open)}\n                aria-expanded={advancedOpen}\n                aria-controls={advancedPanelId}\n                data-testid={`${testIdRoot}-advanced-toggle`}\n                className=\"flex w-full cursor-pointer items-center justify-center gap-1 text-center text-xs text-[var(--oh-muted)] transition-colors hover:text-content-2\"\n              >\n                <span>{t(I18nKey.BACKEND$ADVANCED)}</span>\n                <ChevronDownSmallIcon\n                  className={cn(\n                    \"h-4 w-4 shrink-0 text-muted transition-transform duration-200 ease-out\",\n                    advancedOpen && \"rotate-180\",\n                  )}\n                  aria-hidden\n                />\n              </button>\n              {/* Height animates through `grid-template-rows` (0fr ↔ 1fr) so no\n                  max-height guess is needed; the inner clip is what makes `0fr`\n                  collapse. Content stays mounted so a typed host survives, and\n                  `inert` keeps the collapsed field out of the tab order. */}\n              <div\n                className={cn(\n                  \"grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none\",\n                  advancedOpen ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n                )}\n              >\n                <div className=\"overflow-hidden\">\n                  <div\n                    id={advancedPanelId}\n                    data-testid={`${testIdRoot}-advanced-panel`}\n                    aria-hidden={!advancedOpen}\n                    inert={!advancedOpen ? true : undefined}\n                    className={cn(\n                      \"pt-3 transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n                      advancedOpen ? \"opacity-100\" : \"opacity-0\",\n                    )}\n                  >\n                    <SettingsInput\n                      testId={`${testIdRoot}-cloud-host`}\n                      name={`${testIdRoot}-cloud-host`}\n                      type=\"text\"\n                      label={t(I18nKey.BACKEND$HOST_LABEL)}\n                      value={customHost}\n                      onChange={setCustomHost}\n                      placeholder={DEFAULT_OPENHANDS_CLOUD_HOST}\n                      className=\"w-full\"\n                    />\n                    <p className=\"mt-1 text-xs text-[var(--oh-muted)]\">\n                      {t(I18nKey.BACKEND$LOGIN_CLOUD_HINT)}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )\n        }\n      />\n    </div>\n  );\n}\n\ninterface BackendOptionTabProps {\n  value: AddBackendOption;\n  selectedValue: AddBackendOption;\n  title: string;\n  description: string;\n  icon: React.ReactNode;\n  onSelect: (value: AddBackendOption) => void;\n  panelId: string;\n  testId: string;\n}\n\n/**\n * Presents a connection-method tab: icon, title, and a one-line subtitle.\n *\n * The shared tablist owns the outer border, so these buttons meet cleanly at\n * the center. Selection uses a bottom bar instead of recoloring the full\n * outline, preserving the group as one visual control.\n */\nfunction BackendOptionTab({\n  value,\n  selectedValue,\n  title,\n  description,\n  icon,\n  onSelect,\n  panelId,\n  testId,\n}: BackendOptionTabProps) {\n  const isSelected = value === selectedValue;\n  const tabId = `${testId}-tab`;\n\n  return (\n    <button\n      id={tabId}\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={isSelected}\n      aria-controls={panelId}\n      data-testid={testId}\n      onClick={() => onSelect(value)}\n      className={cn(\n        \"relative flex min-h-16 w-full cursor-pointer items-center gap-3 px-3 py-3 text-left transition-colors\",\n        \"first:border-r first:border-r-[var(--oh-border)]\",\n        \"focus-visible:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-300\",\n        isSelected\n          ? \"bg-[var(--oh-surface-raised)] text-white after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary\"\n          : \"text-[var(--oh-muted)] hover:bg-[var(--oh-surface-raised)] hover:text-white\",\n      )}\n    >\n      <span\n        className=\"flex size-8 shrink-0 items-center justify-center\"\n        aria-hidden\n      >\n        {icon}\n      </span>\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block truncate text-sm font-medium\">{title}</span>\n        <span className=\"mt-0.5 block text-xs leading-tight text-[var(--oh-muted)]\">\n          {description}\n        </span>\n      </span>\n    </button>\n  );\n}\n\ninterface AnimatedPanelHeightProps {\n  children: React.ReactNode;\n}\n\n/**\n * Animates a panel between content-driven heights.\n *\n * A ResizeObserver keeps the wrapper synchronized as tabs or nested\n * disclosures change. The transition class remains mounted before the\n * observer publishes a new height; adding it in the same render as the height\n * would give the browser no previous painted value to interpolate from.\n */\nfunction AnimatedPanelHeight({ children }: AnimatedPanelHeightProps) {\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const [height, setHeight] = React.useState<number>();\n\n  React.useLayoutEffect(() => {\n    const content = contentRef.current;\n    if (!content) return undefined;\n\n    const measure = () => {\n      const nextHeight = content.getBoundingClientRect().height;\n      // jsdom reports zero-sized layout boxes; leaving height automatic there\n      // keeps component tests representative without changing browser behavior.\n      setHeight(nextHeight > 0 ? nextHeight : undefined);\n    };\n\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return undefined;\n\n    const observer = new ResizeObserver(measure);\n    observer.observe(content);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      data-testid=\"add-backend-panel-height\"\n      style={height === undefined ? undefined : { height }}\n      className=\"overflow-hidden transition-[height] duration-300 ease-in-out motion-reduce:transition-none\"\n    >\n      <div ref={contentRef}>{children}</div>\n    </div>\n  );\n}\n\n/**\n * Collects every setup instruction for the selected location into one\n * collapsible note.\n *\n * All of the guidance lives here — the intro, the example command (local) or\n * the host formats to use with a tunnel (remote), and the docs link — so users\n * never have to leave the modal to find out what belongs in the host field.\n * It starts collapsed so the connection form remains compact; users can\n * reveal the complete instructions without leaving the modal.\n *\n * Open/close uses a `grid-template-rows` transition (`0fr` ↔ `1fr`) so the\n * height animates without a fixed `max-height` guess. Content stays mounted\n * so the toggle does not remount the docs link on every expand.\n */\nfunction AgentServerGuidance({ location }: { location: AgentServerLocation }) {\n  const { t } = useTranslation(\"openhands\");\n  const [isExpanded, setIsExpanded] = React.useState(false);\n  const isRemote = location === \"remote\";\n  const title = isRemote\n    ? t(I18nKey.BACKEND$REMOTE_SETUP_TITLE)\n    : t(I18nKey.BACKEND$BEFORE_CONNECT_TITLE);\n  const description = isRemote\n    ? t(I18nKey.BACKEND$REMOTE_SETUP_DESCRIPTION)\n    : t(I18nKey.BACKEND$LOCAL_SETUP_DESCRIPTION);\n  const docsHref = isRemote\n    ? REMOTE_AGENT_SERVER_DOCS_URL\n    : LOCAL_AGENT_SERVER_DOCS_URL;\n  const docsLabel = isRemote\n    ? t(I18nKey.BACKEND$REMOTE_SETUP_DOCS)\n    : t(I18nKey.BACKEND$LOCAL_SETUP_DOCS);\n  const testIdRoot = isRemote ? \"add-backend-remote\" : \"add-backend-local\";\n  const toggleId = `${testIdRoot}-guidance-toggle`;\n  const bodyId = `${testIdRoot}-guidance-body`;\n\n  return (\n    <aside\n      data-testid={`${testIdRoot}-guidance`}\n      className=\"rounded-lg bg-[var(--oh-surface-raised)] text-sm text-[var(--oh-muted)]\"\n    >\n      {/* Heading wraps the button so the accordion keeps a real heading in the\n          document outline while the whole row stays clickable. */}\n      <h4 className=\"text-white\">\n        <button\n          id={toggleId}\n          type=\"button\"\n          onClick={() => setIsExpanded((expanded) => !expanded)}\n          aria-expanded={isExpanded}\n          aria-controls={bodyId}\n          data-testid={toggleId}\n          className={cn(\n            // Padding lives on the button rather than the card so the hover\n            // fill spans the full row.\n            \"flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2 text-left font-medium\",\n            \"transition-colors hover:bg-[var(--oh-interactive-hover)]\",\n            \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-300\",\n          )}\n        >\n          <span className=\"flex min-w-0 items-center gap-2\">\n            <Info\n              className=\"size-4 shrink-0 text-[var(--oh-muted)]\"\n              aria-hidden\n            />\n            <span className=\"truncate\">{title}</span>\n          </span>\n          <ChevronDown\n            className={cn(\n              \"size-5 shrink-0 text-[var(--oh-muted)] transition-transform duration-200 ease-out\",\n              isExpanded && \"rotate-180\",\n            )}\n            aria-hidden\n          />\n        </button>\n      </h4>\n\n      {/* Outer grid owns the height animation; the inner overflow clip is\n          required so `1fr` measures the content while `0fr` fully collapses. */}\n      <div\n        className={cn(\n          \"grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none\",\n          isExpanded ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n        )}\n      >\n        <div className=\"overflow-hidden\">\n          <div\n            id={bodyId}\n            data-testid={bodyId}\n            role=\"region\"\n            aria-labelledby={toggleId}\n            aria-hidden={!isExpanded}\n            inert={!isExpanded ? true : undefined}\n            className={cn(\n              \"flex flex-col gap-2 px-3 pb-3 transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n              isExpanded ? \"opacity-100\" : \"opacity-0\",\n            )}\n          >\n            <p className=\"leading-5\">{description}</p>\n\n            {isRemote ? (\n              <div>\n                <h5 className=\"font-medium text-white\">\n                  {t(I18nKey.BACKEND$REMOTE_CONNECTION_TITLE)}\n                </h5>\n                <p className=\"mt-1 leading-5\">\n                  {t(I18nKey.BACKEND$REMOTE_CONNECTION_DESCRIPTION)}\n                </p>\n              </div>\n            ) : (\n              <code className=\"block break-words font-mono text-xs text-white\">\n                {LOCAL_BACKEND_COMMAND}\n              </code>\n            )}\n\n            <a\n              href={docsHref}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              data-testid={`${testIdRoot}-docs-link`}\n              tabIndex={isExpanded ? undefined : -1}\n              className=\"inline-flex w-fit items-center gap-1.5 text-primary hover:underline\"\n            >\n              <span>{docsLabel}</span>\n              <ExternalLinkIcon className=\"size-4 shrink-0\" aria-hidden />\n            </a>\n          </div>\n        </div>\n      </div>\n    </aside>\n  );\n}\n\nfunction AddBackendChooser({\n  onConnected,\n  source,\n}: {\n  onConnected: (\n    payload: BackendFormSubmitPayload,\n    connectionMethod: BackendConnectionMethod,\n    metadata?: BackendConnectionTestMetadata,\n  ) => void;\n  source: BackendAddedSource;\n}) {\n  const { t } = useTranslation(\"openhands\");\n  const [selectedOption, setSelectedOption] =\n    React.useState<AddBackendOption>(\"cloud\");\n  const [agentServerLocation, setAgentServerLocation] =\n    React.useState<AgentServerLocation>(\"local\");\n  const panelId = \"add-backend-selected-panel\";\n  const selectedTabId = `add-backend-option-${selectedOption}-tab`;\n  const isCloudSelected = selectedOption === \"cloud\";\n\n  return (\n    <div data-testid=\"add-backend-chooser\" className=\"flex flex-col\">\n      <div\n        role=\"tablist\"\n        aria-label={t(I18nKey.BACKEND$CHOOSER_TITLE)}\n        className=\"grid grid-cols-2 overflow-hidden rounded-lg border border-[var(--oh-border)]\"\n      >\n        <BackendOptionTab\n          value=\"cloud\"\n          selectedValue={selectedOption}\n          title={t(I18nKey.BACKEND$CLOUD_TITLE)}\n          description={t(I18nKey.BACKEND$CLOUD_OPTION_DESCRIPTION)}\n          icon={\n            <OpenHandsLogoWhite\n              width={32}\n              height={32}\n              data-testid=\"add-backend-option-cloud-logo\"\n            />\n          }\n          onSelect={setSelectedOption}\n          panelId={panelId}\n          testId=\"add-backend-option-cloud\"\n        />\n        <BackendOptionTab\n          value=\"agent-server\"\n          selectedValue={selectedOption}\n          title={t(I18nKey.BACKEND$AGENT_SERVER_TITLE)}\n          description={t(I18nKey.BACKEND$AGENT_SERVER_OPTION_DESCRIPTION)}\n          icon={<ServerIcon className=\"size-6\" />}\n          onSelect={setSelectedOption}\n          panelId={panelId}\n          testId=\"add-backend-option-agent-server\"\n        />\n      </div>\n\n      <div className=\"mt-6\">\n        <AnimatedPanelHeight>\n          <section\n            id={panelId}\n            role=\"tabpanel\"\n            aria-labelledby={selectedTabId}\n            className=\"min-w-0\"\n          >\n            {isCloudSelected ? (\n              /* Padding keeps the CTA and Advanced host field from hugging the\n                 border; when Advanced expands the panel grows with the content\n                 instead of squeezing it into the reserved min-height. */\n              <div\n                data-testid=\"add-backend-cloud-panel\"\n                className={cn(\n                  \"relative isolate flex min-h-[13.5rem] w-full items-center justify-center rounded-xl border border-[var(--oh-border)] px-5 py-6\",\n                  // A soft greyscale halo sits behind the CTA; -z-10 keeps it under the\n                  // content rather than washing over it.\n                  \"before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-xl\",\n                  \"before:bg-[radial-gradient(75%_75%_at_50%_50%,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0)_70%)]\",\n                )}\n              >\n                <CloudLoginColumn\n                  onConnected={onConnected}\n                  testIdRoot=\"add-backend\"\n                  analyticsSource={source}\n                  showBranding={false}\n                />\n              </div>\n            ) : (\n              <div\n                data-testid=\"add-backend-agent-server-panel\"\n                className=\"mx-auto w-full max-w-xl\"\n              >\n                {/* Rules on either side center the toggle and read as a\n                    divider between the chooser and the connection form. */}\n                <div className=\"flex items-center gap-3\">\n                  <span\n                    className=\"h-px flex-1 bg-[var(--oh-border)]\"\n                    aria-hidden\n                  />\n                  <SegmentedToggle<AgentServerLocation>\n                    value={agentServerLocation}\n                    options={[\n                      {\n                        value: \"local\",\n                        label: t(I18nKey.BACKEND$KIND_LOCAL),\n                        icon: <Monitor aria-hidden />,\n                      },\n                      {\n                        value: \"remote\",\n                        label: t(I18nKey.BACKEND$KIND_REMOTE),\n                        icon: <Globe aria-hidden />,\n                      },\n                    ]}\n                    onChange={setAgentServerLocation}\n                    ariaLabel={t(I18nKey.BACKEND$AGENT_SERVER_LOCATION)}\n                    testId=\"add-backend-location\"\n                  />\n                  <span\n                    className=\"h-px flex-1 bg-[var(--oh-border)]\"\n                    aria-hidden\n                  />\n                </div>\n\n                <div className=\"mt-4 flex flex-col gap-4\">\n                  <AgentServerGuidance\n                    key={agentServerLocation}\n                    location={agentServerLocation}\n                  />\n                  <ManualConnectionColumn\n                    onConnected={onConnected}\n                    testIdRoot=\"add-backend\"\n                    requireApiKey={agentServerLocation === \"remote\"}\n                    submitLabel={t(I18nKey.BACKEND$CONNECT)}\n                    submittingLabel={t(\n                      I18nKey.ONBOARDING$BACKEND_STATUS_CHECKING,\n                    )}\n                    fixedKind=\"local\"\n                    showKindSelector={false}\n                  />\n                </div>\n              </div>\n            )}\n          </section>\n        </AnimatedPanelHeight>\n      </div>\n    </div>\n  );\n}\n\nfunction AddBackendConnectionOptions({\n  onClose,\n  source,\n}: {\n  onClose: () => void;\n  source: BackendAddedSource;\n}) {\n  const { addBackend } = useActiveBackendContext();\n  const redirectAfterAdd = useRedirectAfterAddBackend();\n  const { trackBackendAdded } = useTracking();\n  const lockedCloudHost = getLockedCloudHost();\n\n  const handleConnected = React.useCallback(\n    (\n      payload: BackendFormSubmitPayload,\n      connectionMethod: BackendConnectionMethod,\n      metadata?: BackendConnectionTestMetadata,\n    ) => {\n      addBackend(payload);\n      trackBackendAdded({\n        backendKind: payload.kind,\n        connectionMethod,\n        hasApiKey: Boolean(payload.apiKey),\n        source,\n        agentServerVersion: metadata?.agentServerVersion,\n      });\n      redirectAfterAdd();\n      onClose();\n    },\n    [addBackend, redirectAfterAdd, onClose, trackBackendAdded, source],\n  );\n\n  if (lockedCloudHost) {\n    return (\n      <CloudLoginColumn\n        onConnected={handleConnected}\n        testIdRoot=\"add-backend\"\n        lockedHost={lockedCloudHost}\n        analyticsSource={source}\n      />\n    );\n  }\n\n  return <AddBackendChooser onConnected={handleConnected} source={source} />;\n}\n\n// ── Modal wrappers ──────────────────────────────────────────────────\n\n/**\n * Modal wrapper. In **add** mode it renders a two-column layout\n * (manual connection | OR | Cloud login). In **edit** mode it wraps\n * the standard `BackendForm`.\n */\nexport function BackendFormModal({\n  mode,\n  backend,\n  onClose,\n  source = \"add_backend_modal\",\n  hideCloseButton = false,\n}: BackendFormModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (mode === \"add\") {\n    return (\n      <ModalBackdrop\n        onClose={hideCloseButton ? undefined : onClose}\n        closeOnEscape={false}\n        closeOnBackdropClick={!hideCloseButton}\n        aria-label={t(I18nKey.BACKEND$ADD_TITLE)}\n      >\n        <div\n          data-testid={\n            hideCloseButton ? \"onboarding-modal\" : \"add-backend-modal\"\n          }\n          className={cn(\n            \"relative max-h-[92vh] w-[720px] overflow-y-auto rounded-xl border border-[var(--oh-border)] bg-base-secondary p-6\",\n            MODAL_MAX_WIDTH_VIEWPORT,\n          )}\n        >\n          {hideCloseButton ? null : (\n            <ModalCloseButton onClose={onClose} testId=\"add-backend-close\" />\n          )}\n          {hideCloseButton ? null : (\n            <div className=\"pr-8\">\n              <h2 className={modalTitleLgClassName}>\n                {t(I18nKey.BACKEND$CHOOSER_TITLE)}\n              </h2>\n              <p\n                className=\"mt-2 text-sm leading-6 text-[var(--oh-muted)]\"\n                data-testid=\"add-backend-description\"\n              >\n                {t(I18nKey.BACKEND$CHOOSER_DESCRIPTION)}{\" \"}\n                <a\n                  href={DEPLOYMENT_OPTIONS_URL}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  aria-label={t(I18nKey.BACKEND$DEPLOYMENT_OPTIONS)}\n                  data-testid=\"add-backend-deployment-options-link\"\n                  className=\"text-primary hover:underline\"\n                >\n                  {t(I18nKey.CTA$LEARN_MORE)}\n                  <ExternalLinkIcon\n                    className=\"ml-1 inline size-3.5 align-[-0.125em]\"\n                    aria-hidden\n                  />\n                </a>\n              </p>\n            </div>\n          )}\n\n          <div className={hideCloseButton ? undefined : \"mt-5\"}>\n            <AddBackendConnectionOptions onClose={onClose} source={source} />\n          </div>\n        </div>\n      </ModalBackdrop>\n    );\n  }\n\n  // Edit mode — single-column form (unchanged)\n  const testIdRoot = \"edit-backend\";\n  return (\n    <ModalBackdrop\n      onClose={onClose}\n      closeOnEscape={false}\n      aria-label={t(I18nKey.BACKEND$EDIT_TITLE)}\n    >\n      <div\n        data-testid={`${testIdRoot}-modal`}\n        className={cn(\n          \"relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]\",\n          modalWidthClassName(\"md\"),\n        )}\n      >\n        <ModalCloseButton onClose={onClose} testId={`${testIdRoot}-close`} />\n        <h2 className={cn(\"pr-6\", modalTitleLgClassName)}>\n          {t(I18nKey.BACKEND$EDIT_TITLE)}\n        </h2>\n        <BackendForm\n          mode=\"edit\"\n          backend={backend}\n          onSubmitted={onClose}\n          testIdRoot={testIdRoot}\n        />\n      </div>\n    </ModalBackdrop>\n  );\n}\n"],"mappings":"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"}