@openhands/agent-canvas 1.8.0 → 1.9.0

package/dist/components/features/backends/device-flow-auth.js

@@ -15,35 +15,35 @@ function u(e) {
 		return !1;
 	}
 }
-function d({ host: d, onSuccess: p, testIdRoot: m, isDisabled: h = !1, idleButtonLabel: g, idleButtonContent: _, className: v, buttonClassName: y, buttonVariant: b = "primary", statusDisplay: x = "inline", analyticsSource: S }) {
-	let { t: C } = e("openhands"), w = o(), T = s.useRef(null);
+function d({ host: d, onSuccess: p, testIdRoot: m, isDisabled: h = !1, idleButtonLabel: g, idleButtonContent: _, idleDescription: v, idleFooter: y, className: b, buttonClassName: x, buttonVariant: S = "primary", statusDisplay: C = "inline", analyticsSource: w }) {
+	let { t: T } = e("openhands"), E = o(), D = s.useRef(null);
 	s.useEffect(() => () => {
-		T.current?.close();
+		D.current?.close();
 	}, []), s.useEffect(() => {
-		if (w.status === "awaiting_authorization" && w.verificationUrl && T.current && !T.current.closed) {
-			if (!u(w.verificationUrl)) {
+		if (E.status === "awaiting_authorization" && E.verificationUrl && D.current && !D.current.closed) {
+			if (!u(E.verificationUrl)) {
 				console.error("Invalid verification URL protocol");
 				return;
 			}
 			try {
-				T.current.location.href = w.verificationUrl;
+				D.current.location.href = E.verificationUrl;
 			} catch {
-				T.current = window.open(w.verificationUrl, "_blank", "noopener,noreferrer");
+				D.current = window.open(E.verificationUrl, "_blank", "noopener,noreferrer");
 			}
 		}
-	}, [w.status, w.verificationUrl]), s.useEffect(() => {
-		if (w.status === "success" && w.apiKey) try {
-			p(w.apiKey);
+	}, [E.status, E.verificationUrl]), s.useEffect(() => {
+		if (E.status === "success" && E.apiKey) try {
+			p(E.apiKey);
 		} finally {
-			w.reset(), T.current?.close();
+			E.reset(), D.current?.close();
 		}
 	}, [
-		w.status,
-		w.apiKey,
-		w.reset,
+		E.status,
+		E.apiKey,
+		E.reset,
 		p
 	]);
-	let E = () => {
+	let O = () => {
 		let e = d.trim().replace(/\/+$/, ""), t = /^https?:\/\//i.test(e) ? e : `https://${e}`;
 		try {
 			let e = new URL(t);
@@ -51,50 +51,52 @@ function d({ host: d, onSuccess: p, testIdRoot: m, isDisabled: h = !1, idleButto
 		} catch {
 			return;
 		}
-		T.current = window.open("about:blank", "_blank"), T.current || console.warn("Popup blocked - user will need to use manual link"), w.start(t, S);
-	}, D = () => {
-		w.cancel(), T.current?.close();
-	}, O = /* @__PURE__ */ c(f, {
-		status: w.status,
-		error: w.error,
-		verificationUrl: w.verificationUrl,
+		D.current = window.open("about:blank", "_blank"), D.current || console.warn("Popup blocked - user will need to use manual link"), E.start(t, w);
+	}, k = () => {
+		E.cancel(), D.current?.close();
+	}, A = /* @__PURE__ */ c(f, {
+		status: E.status,
+		error: E.error,
+		verificationUrl: E.verificationUrl,
 		testIdRoot: m,
-		onCancel: D,
-		onRetry: E
-	}), k = x === "modal" && w.status !== "idle", A = g ?? C(t.BACKEND$LOGIN_WITH_OPENHANDS);
+		onCancel: k,
+		onRetry: O
+	}), j = C === "modal" && E.status !== "idle", M = g ?? T(t.BACKEND$LOGIN_WITH_OPENHANDS);
 	return /* @__PURE__ */ l("div", {
 		"data-testid": `${m}-device-flow`,
-		className: n("flex flex-col gap-3", v),
+		className: n("flex flex-col gap-3", b),
 		children: [
-			w.status === "idle" && b === "unstyled" && /* @__PURE__ */ c("button", {
+			E.status === "idle" ? v : null,
+			E.status === "idle" && S === "unstyled" && /* @__PURE__ */ c("button", {
 				type: "button",
-				onClick: E,
+				onClick: O,
 				"data-testid": `${m}-login-button`,
-				className: y,
+				className: x,
 				disabled: h,
-				"aria-label": _ ? A : void 0,
-				children: _ ?? A
+				"aria-label": _ ? M : void 0,
+				children: _ ?? M
 			}),
-			w.status === "idle" && b !== "unstyled" && /* @__PURE__ */ c(a, {
+			E.status === "idle" && S !== "unstyled" && /* @__PURE__ */ c(a, {
 				type: "button",
-				variant: b,
-				onClick: E,
+				variant: S,
+				onClick: O,
 				testId: `${m}-login-button`,
-				className: n("w-full", y),
+				className: x,
 				isDisabled: h,
-				ariaLabel: _ ? A : void 0,
-				children: _ ?? A
+				ariaLabel: _ ? M : void 0,
+				children: _ ?? M
 			}),
-			x === "inline" ? O : null,
-			k ? /* @__PURE__ */ c(r, {
-				onClose: D,
-				"aria-label": C(t.BACKEND$LOGIN_WITH_OPENHANDS),
+			E.status === "idle" ? y : null,
+			C === "inline" ? A : null,
+			j ? /* @__PURE__ */ c(r, {
+				onClose: k,
+				"aria-label": T(t.BACKEND$LOGIN_WITH_OPENHANDS),
 				closeOnBackdropClick: !1,
 				children: /* @__PURE__ */ c(i, {
 					testID: `${m}-auth-modal`,
 					width: "sm",
 					className: "items-stretch border border-[var(--oh-border)]",
-					children: O
+					children: A
 				})
 			}) : null
 		]
@@ -104,7 +106,7 @@ function f({ status: n, error: r, verificationUrl: i, testIdRoot: o, onCancel: s
 	let { t: f } = e("openhands");
 	if (n === "idle" || n === "success") return null;
 	if (n === "starting") return /* @__PURE__ */ l("div", {
-		className: "flex items-center gap-2 rounded-lg bg-base-tertiary p-3",
+		className: "flex items-center justify-center gap-2",
 		"data-testid": `${o}-auth-starting`,
 		role: "status",
 		"aria-live": "polite",
@@ -116,32 +118,31 @@ function f({ status: n, error: r, verificationUrl: i, testIdRoot: o, onCancel: s
 	if (n === "awaiting_authorization") {
 		let e = i && u(i) ? i : null;
 		return /* @__PURE__ */ l("div", {
-			className: "flex flex-col gap-4 rounded-lg bg-base-tertiary p-4",
+			className: "flex flex-col gap-4",
 			"data-testid": `${o}-auth-awaiting`,
 			role: "status",
 			"aria-live": "polite",
 			children: [
 				/* @__PURE__ */ l("div", {
-					className: "flex items-center gap-2",
+					className: "flex items-center justify-center gap-2",
 					children: [/* @__PURE__ */ c(p, {}), /* @__PURE__ */ c("span", {
 						className: "text-sm font-medium text-white",
 						children: f(t.BACKEND$AUTH_AWAITING)
 					})]
 				}),
-				/* @__PURE__ */ c("p", {
-					className: "text-sm leading-5 text-[var(--oh-text-tertiary)]",
-					children: f(t.BACKEND$AUTH_BROWSER_OPENED)
-				}),
-				e ? /* @__PURE__ */ l("div", {
-					className: "flex flex-col gap-1 rounded-md border border-[var(--oh-border)] bg-[var(--oh-surface)] p-3 text-xs text-[var(--oh-muted)]",
-					children: [/* @__PURE__ */ c("p", { children: f(t.BACKEND$AUTH_OPEN_MANUALLY) }), /* @__PURE__ */ c("a", {
+				/* @__PURE__ */ l("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ c("p", {
+						className: "text-center text-sm leading-5 text-[var(--oh-text-tertiary)]",
+						children: e ? `${f(t.BACKEND$AUTH_BROWSER_OPENED)} ${f(t.BACKEND$AUTH_OPEN_MANUALLY)}` : f(t.BACKEND$AUTH_BROWSER_OPENED)
+					}), e ? /* @__PURE__ */ c("a", {
 						href: e,
 						target: "_blank",
 						rel: "noopener noreferrer",
-						className: "max-h-16 overflow-auto break-all text-blue-400 hover:underline",
+						className: "max-h-16 overflow-auto break-all text-center text-xs text-blue-400 hover:underline",
 						children: e
-					})]
-				}) : null,
+					}) : null]
+				}),
 				/* @__PURE__ */ c(a, {
 					type: "button",
 					variant: "secondary",

package/dist/components/features/backends/device-flow-auth.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-flow-auth.js","names":[],"sources":["../../../../src/components/features/backends/device-flow-auth.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { useDeviceFlow, type DeviceFlowStatus } from \"#/hooks/use-device-flow\";\nimport type { CloudConnectionSource } from \"#/services/cloud-funnel-analytics\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ntype DeviceFlowButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"unstyled\";\ntype DeviceFlowStatusDisplay = \"inline\" | \"modal\";\n\ninterface DeviceFlowAuthProps {\n  /** The host URL for the cloud backend */\n  host: string;\n  /** Callback when authentication succeeds with the API key */\n  onSuccess: (apiKey: string) => void;\n  /** Test ID prefix for the component */\n  testIdRoot: string;\n  /** Whether the login button should be disabled (e.g., when no host is entered) */\n  isDisabled?: boolean;\n  /** Override for the idle button label and icon-only accessible name. */\n  idleButtonLabel?: string;\n  /** Optional visible content for the idle button. Defaults to the idle label. */\n  idleButtonContent?: React.ReactNode;\n  /** Optional classes for the root wrapper. */\n  className?: string;\n  /** Optional classes for the idle button. */\n  buttonClassName?: string;\n  /** Visual variant for the idle button. */\n  buttonVariant?: DeviceFlowButtonVariant;\n  /** Whether in-progress auth content should render inline or in a modal. */\n  statusDisplay?: DeviceFlowStatusDisplay;\n  /** Product surface that initiated this authorization attempt. */\n  analyticsSource?: CloudConnectionSource;\n}\n\n/**\n * Device Flow authentication UI component.\n *\n * Shows a \"Login with OpenHands Cloud\" button that initiates OAuth 2.0 Device Flow\n * authentication. Displays status during the auth process and auto-opens\n * the browser for user authorization.\n */\n/**\n * Validate that a URL is safe to open in a popup.\n * Prevents XSS via javascript: URLs or other malicious schemes.\n */\nfunction isValidVerificationUrl(url: string): boolean {\n  try {\n    const parsed = new URL(url);\n    return parsed.protocol === \"https:\";\n  } catch {\n    return false;\n  }\n}\n\nexport function DeviceFlowAuth({\n  host,\n  onSuccess,\n  testIdRoot,\n  isDisabled = false,\n  idleButtonLabel,\n  idleButtonContent,\n  className,\n  buttonClassName,\n  buttonVariant = \"primary\",\n  statusDisplay = \"inline\",\n  analyticsSource,\n}: DeviceFlowAuthProps) {\n  const { t } = useTranslation(\"openhands\");\n  const deviceFlow = useDeviceFlow();\n  const popupRef = React.useRef<Window | null>(null);\n\n  // Close popup on unmount or when auth completes/errors\n  React.useEffect(() => {\n    return () => {\n      popupRef.current?.close();\n    };\n  }, []);\n\n  // Update popup URL when verification URL becomes available\n  React.useEffect(() => {\n    if (\n      deviceFlow.status === \"awaiting_authorization\" &&\n      deviceFlow.verificationUrl &&\n      popupRef.current &&\n      !popupRef.current.closed\n    ) {\n      // Validate URL before assigning to prevent XSS\n      if (!isValidVerificationUrl(deviceFlow.verificationUrl)) {\n        console.error(\"Invalid verification URL protocol\");\n        return;\n      }\n      try {\n        popupRef.current.location.href = deviceFlow.verificationUrl;\n      } catch {\n        // Cross-origin error - popup was navigated away\n        // Open a new one as fallback\n        popupRef.current = window.open(\n          deviceFlow.verificationUrl,\n          \"_blank\",\n          \"noopener,noreferrer\",\n        );\n      }\n    }\n  }, [deviceFlow.status, deviceFlow.verificationUrl]);\n\n  // Call onSuccess when authentication completes\n  React.useEffect(() => {\n    if (deviceFlow.status === \"success\" && deviceFlow.apiKey) {\n      try {\n        onSuccess(deviceFlow.apiKey);\n      } finally {\n        deviceFlow.reset();\n        popupRef.current?.close();\n      }\n    }\n  }, [deviceFlow.status, deviceFlow.apiKey, deviceFlow.reset, onSuccess]);\n\n  const handleStartAuth = () => {\n    // Normalize and validate the host URL\n    const normalizedHost = host.trim().replace(/\\/+$/, \"\");\n    const fullHost = /^https?:\\/\\//i.test(normalizedHost)\n      ? normalizedHost\n      : `https://${normalizedHost}`;\n\n    // Validate URL before proceeding\n    try {\n      const url = new URL(fullHost);\n      // Check for URL manipulation attacks\n      if (url.username || url.password) {\n        throw new Error(\"Invalid URL format\");\n      }\n    } catch {\n      return; // Invalid URL, don't proceed\n    }\n\n    // Open popup immediately on user click to avoid popup blocker\n    // Start with about:blank and update URL once we have verification URL\n    // Note: We intentionally don't use \"noopener\" here because we need to\n    // maintain a reference to update the popup's location when the\n    // verification URL becomes available\n    popupRef.current = window.open(\"about:blank\", \"_blank\");\n\n    if (!popupRef.current) {\n      // Popup was blocked - flow will still work, user can click manual link\n      console.warn(\"Popup blocked - user will need to use manual link\");\n    }\n\n    deviceFlow.start(fullHost, analyticsSource);\n  };\n\n  const handleCancel = () => {\n    deviceFlow.cancel();\n    popupRef.current?.close();\n  };\n\n  const statusContent = (\n    <DeviceFlowStatusContent\n      status={deviceFlow.status}\n      error={deviceFlow.error}\n      verificationUrl={deviceFlow.verificationUrl}\n      testIdRoot={testIdRoot}\n      onCancel={handleCancel}\n      onRetry={handleStartAuth}\n    />\n  );\n  const showStatusModal =\n    statusDisplay === \"modal\" && deviceFlow.status !== \"idle\";\n  const idleLabel = idleButtonLabel ?? t(I18nKey.BACKEND$LOGIN_WITH_OPENHANDS);\n\n  return (\n    <div\n      data-testid={`${testIdRoot}-device-flow`}\n      className={cn(\"flex flex-col gap-3\", className)}\n    >\n      {deviceFlow.status === \"idle\" && buttonVariant === \"unstyled\" && (\n        <button\n          type=\"button\"\n          onClick={handleStartAuth}\n          data-testid={`${testIdRoot}-login-button`}\n          className={buttonClassName}\n          disabled={isDisabled}\n          aria-label={idleButtonContent ? idleLabel : undefined}\n        >\n          {idleButtonContent ?? idleLabel}\n        </button>\n      )}\n\n      {deviceFlow.status === \"idle\" && buttonVariant !== \"unstyled\" && (\n        <BrandButton\n          type=\"button\"\n          variant={buttonVariant}\n          onClick={handleStartAuth}\n          testId={`${testIdRoot}-login-button`}\n          className={cn(\"w-full\", buttonClassName)}\n          isDisabled={isDisabled}\n          ariaLabel={idleButtonContent ? idleLabel : undefined}\n        >\n          {idleButtonContent ?? idleLabel}\n        </BrandButton>\n      )}\n\n      {statusDisplay === \"inline\" ? statusContent : null}\n\n      {showStatusModal ? (\n        <ModalBackdrop\n          onClose={handleCancel}\n          aria-label={t(I18nKey.BACKEND$LOGIN_WITH_OPENHANDS)}\n          closeOnBackdropClick={false}\n        >\n          <ModalBody\n            testID={`${testIdRoot}-auth-modal`}\n            width=\"sm\"\n            className=\"items-stretch border border-[var(--oh-border)]\"\n          >\n            {statusContent}\n          </ModalBody>\n        </ModalBackdrop>\n      ) : null}\n    </div>\n  );\n}\n\ninterface DeviceFlowStatusContentProps {\n  status: DeviceFlowStatus;\n  error: string | null;\n  verificationUrl: string | null;\n  testIdRoot: string;\n  onCancel: () => void;\n  onRetry: () => void;\n}\n\nfunction DeviceFlowStatusContent({\n  status,\n  error,\n  verificationUrl,\n  testIdRoot,\n  onCancel,\n  onRetry,\n}: DeviceFlowStatusContentProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (status === \"idle\" || status === \"success\") return null;\n\n  if (status === \"starting\") {\n    return (\n      <div\n        className=\"flex items-center gap-2 rounded-lg bg-base-tertiary p-3\"\n        data-testid={`${testIdRoot}-auth-starting`}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <LoadingSpinner />\n        <span className=\"text-sm text-[var(--oh-text-tertiary)]\">\n          {t(I18nKey.BACKEND$AUTH_STARTING)}\n        </span>\n      </div>\n    );\n  }\n\n  if (status === \"awaiting_authorization\") {\n    const validVerificationUrl =\n      verificationUrl && isValidVerificationUrl(verificationUrl)\n        ? verificationUrl\n        : null;\n\n    return (\n      <div\n        className=\"flex flex-col gap-4 rounded-lg bg-base-tertiary p-4\"\n        data-testid={`${testIdRoot}-auth-awaiting`}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <div className=\"flex items-center gap-2\">\n          <LoadingSpinner />\n          <span className=\"text-sm font-medium text-white\">\n            {t(I18nKey.BACKEND$AUTH_AWAITING)}\n          </span>\n        </div>\n        <p className=\"text-sm leading-5 text-[var(--oh-text-tertiary)]\">\n          {t(I18nKey.BACKEND$AUTH_BROWSER_OPENED)}\n        </p>\n        {validVerificationUrl ? (\n          <div className=\"flex flex-col gap-1 rounded-md border border-[var(--oh-border)] bg-[var(--oh-surface)] p-3 text-xs text-[var(--oh-muted)]\">\n            <p>{t(I18nKey.BACKEND$AUTH_OPEN_MANUALLY)}</p>\n            <a\n              href={validVerificationUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"max-h-16 overflow-auto break-all text-blue-400 hover:underline\"\n            >\n              {validVerificationUrl}\n            </a>\n          </div>\n        ) : null}\n        <BrandButton\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onCancel}\n          testId={`${testIdRoot}-auth-cancel`}\n          className=\"w-full\"\n        >\n          {t(I18nKey.BACKEND$AUTH_CANCEL)}\n        </BrandButton>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lg border border-red-700 bg-red-900/20 p-4\"\n      data-testid={`${testIdRoot}-auth-error`}\n      role=\"alert\"\n    >\n      <p className=\"text-sm text-red-400\">{error}</p>\n      <BrandButton\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={onRetry}\n        testId={`${testIdRoot}-auth-retry`}\n        className=\"w-full\"\n      >\n        {t(I18nKey.BACKEND$AUTH_RETRY)}\n      </BrandButton>\n    </div>\n  );\n}\n\nfunction LoadingSpinner() {\n  return (\n    <svg\n      className=\"animate-spin h-4 w-4 text-white\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      />\n    </svg>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"device-flow-auth.js","names":[],"sources":["../../../../src/components/features/backends/device-flow-auth.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { useDeviceFlow, type DeviceFlowStatus } from \"#/hooks/use-device-flow\";\nimport type { CloudConnectionSource } from \"#/services/cloud-funnel-analytics\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\ntype DeviceFlowButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"unstyled\";\ntype DeviceFlowStatusDisplay = \"inline\" | \"modal\";\n\ninterface DeviceFlowAuthProps {\n  /** The host URL for the cloud backend */\n  host: string;\n  /** Callback when authentication succeeds with the API key */\n  onSuccess: (apiKey: string) => void;\n  /** Test ID prefix for the component */\n  testIdRoot: string;\n  /** Whether the login button should be disabled (e.g., when no host is entered) */\n  isDisabled?: boolean;\n  /** Override for the idle button label and icon-only accessible name. */\n  idleButtonLabel?: string;\n  /** Optional visible content for the idle button. Defaults to the idle label. */\n  idleButtonContent?: React.ReactNode;\n  /** Optional content shown only before authentication starts. */\n  idleDescription?: React.ReactNode;\n  /**\n   * Optional content rendered under the idle button and, like\n   * `idleDescription`, only before authentication starts — so secondary\n   * controls step aside once the flow takes over the surface.\n   */\n  idleFooter?: React.ReactNode;\n  /** Optional classes for the root wrapper. */\n  className?: string;\n  /** Optional classes for the idle button. */\n  buttonClassName?: string;\n  /** Visual variant for the idle button. */\n  buttonVariant?: DeviceFlowButtonVariant;\n  /** Whether in-progress auth content should render inline or in a modal. */\n  statusDisplay?: DeviceFlowStatusDisplay;\n  /** Product surface that initiated this authorization attempt. */\n  analyticsSource?: CloudConnectionSource;\n}\n\n/**\n * Device Flow authentication UI component.\n *\n * Shows a \"Connect to OpenHands\" button that initiates OAuth 2.0 Device Flow\n * authentication. Displays status during the auth process and auto-opens\n * the browser for user authorization.\n */\n/**\n * Validate that a URL is safe to open in a popup.\n * Prevents XSS via javascript: URLs or other malicious schemes.\n */\nfunction isValidVerificationUrl(url: string): boolean {\n  try {\n    const parsed = new URL(url);\n    return parsed.protocol === \"https:\";\n  } catch {\n    return false;\n  }\n}\n\nexport function DeviceFlowAuth({\n  host,\n  onSuccess,\n  testIdRoot,\n  isDisabled = false,\n  idleButtonLabel,\n  idleButtonContent,\n  idleDescription,\n  idleFooter,\n  className,\n  buttonClassName,\n  buttonVariant = \"primary\",\n  statusDisplay = \"inline\",\n  analyticsSource,\n}: DeviceFlowAuthProps) {\n  const { t } = useTranslation(\"openhands\");\n  const deviceFlow = useDeviceFlow();\n  const popupRef = React.useRef<Window | null>(null);\n\n  // Close popup on unmount or when auth completes/errors\n  React.useEffect(() => {\n    return () => {\n      popupRef.current?.close();\n    };\n  }, []);\n\n  // Update popup URL when verification URL becomes available\n  React.useEffect(() => {\n    if (\n      deviceFlow.status === \"awaiting_authorization\" &&\n      deviceFlow.verificationUrl &&\n      popupRef.current &&\n      !popupRef.current.closed\n    ) {\n      // Validate URL before assigning to prevent XSS\n      if (!isValidVerificationUrl(deviceFlow.verificationUrl)) {\n        console.error(\"Invalid verification URL protocol\");\n        return;\n      }\n      try {\n        popupRef.current.location.href = deviceFlow.verificationUrl;\n      } catch {\n        // Cross-origin error - popup was navigated away\n        // Open a new one as fallback\n        popupRef.current = window.open(\n          deviceFlow.verificationUrl,\n          \"_blank\",\n          \"noopener,noreferrer\",\n        );\n      }\n    }\n  }, [deviceFlow.status, deviceFlow.verificationUrl]);\n\n  // Call onSuccess when authentication completes\n  React.useEffect(() => {\n    if (deviceFlow.status === \"success\" && deviceFlow.apiKey) {\n      try {\n        onSuccess(deviceFlow.apiKey);\n      } finally {\n        deviceFlow.reset();\n        popupRef.current?.close();\n      }\n    }\n  }, [deviceFlow.status, deviceFlow.apiKey, deviceFlow.reset, onSuccess]);\n\n  const handleStartAuth = () => {\n    // Normalize and validate the host URL\n    const normalizedHost = host.trim().replace(/\\/+$/, \"\");\n    const fullHost = /^https?:\\/\\//i.test(normalizedHost)\n      ? normalizedHost\n      : `https://${normalizedHost}`;\n\n    // Validate URL before proceeding\n    try {\n      const url = new URL(fullHost);\n      // Check for URL manipulation attacks\n      if (url.username || url.password) {\n        throw new Error(\"Invalid URL format\");\n      }\n    } catch {\n      return; // Invalid URL, don't proceed\n    }\n\n    // Open popup immediately on user click to avoid popup blocker\n    // Start with about:blank and update URL once we have verification URL\n    // Note: We intentionally don't use \"noopener\" here because we need to\n    // maintain a reference to update the popup's location when the\n    // verification URL becomes available\n    popupRef.current = window.open(\"about:blank\", \"_blank\");\n\n    if (!popupRef.current) {\n      // Popup was blocked - flow will still work, user can click manual link\n      console.warn(\"Popup blocked - user will need to use manual link\");\n    }\n\n    deviceFlow.start(fullHost, analyticsSource);\n  };\n\n  const handleCancel = () => {\n    deviceFlow.cancel();\n    popupRef.current?.close();\n  };\n\n  const statusContent = (\n    <DeviceFlowStatusContent\n      status={deviceFlow.status}\n      error={deviceFlow.error}\n      verificationUrl={deviceFlow.verificationUrl}\n      testIdRoot={testIdRoot}\n      onCancel={handleCancel}\n      onRetry={handleStartAuth}\n    />\n  );\n  const showStatusModal =\n    statusDisplay === \"modal\" && deviceFlow.status !== \"idle\";\n  const idleLabel = idleButtonLabel ?? t(I18nKey.BACKEND$LOGIN_WITH_OPENHANDS);\n\n  return (\n    <div\n      data-testid={`${testIdRoot}-device-flow`}\n      className={cn(\"flex flex-col gap-3\", className)}\n    >\n      {deviceFlow.status === \"idle\" ? idleDescription : null}\n\n      {deviceFlow.status === \"idle\" && buttonVariant === \"unstyled\" && (\n        <button\n          type=\"button\"\n          onClick={handleStartAuth}\n          data-testid={`${testIdRoot}-login-button`}\n          className={buttonClassName}\n          disabled={isDisabled}\n          aria-label={idleButtonContent ? idleLabel : undefined}\n        >\n          {idleButtonContent ?? idleLabel}\n        </button>\n      )}\n\n      {deviceFlow.status === \"idle\" && buttonVariant !== \"unstyled\" && (\n        <BrandButton\n          type=\"button\"\n          variant={buttonVariant}\n          onClick={handleStartAuth}\n          testId={`${testIdRoot}-login-button`}\n          className={buttonClassName}\n          isDisabled={isDisabled}\n          ariaLabel={idleButtonContent ? idleLabel : undefined}\n        >\n          {idleButtonContent ?? idleLabel}\n        </BrandButton>\n      )}\n\n      {deviceFlow.status === \"idle\" ? idleFooter : null}\n\n      {statusDisplay === \"inline\" ? statusContent : null}\n\n      {showStatusModal ? (\n        <ModalBackdrop\n          onClose={handleCancel}\n          aria-label={t(I18nKey.BACKEND$LOGIN_WITH_OPENHANDS)}\n          closeOnBackdropClick={false}\n        >\n          <ModalBody\n            testID={`${testIdRoot}-auth-modal`}\n            width=\"sm\"\n            className=\"items-stretch border border-[var(--oh-border)]\"\n          >\n            {statusContent}\n          </ModalBody>\n        </ModalBackdrop>\n      ) : null}\n    </div>\n  );\n}\n\ninterface DeviceFlowStatusContentProps {\n  status: DeviceFlowStatus;\n  error: string | null;\n  verificationUrl: string | null;\n  testIdRoot: string;\n  onCancel: () => void;\n  onRetry: () => void;\n}\n\nfunction DeviceFlowStatusContent({\n  status,\n  error,\n  verificationUrl,\n  testIdRoot,\n  onCancel,\n  onRetry,\n}: DeviceFlowStatusContentProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  if (status === \"idle\" || status === \"success\") return null;\n\n  if (status === \"starting\") {\n    return (\n      <div\n        className=\"flex items-center justify-center gap-2\"\n        data-testid={`${testIdRoot}-auth-starting`}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <LoadingSpinner />\n        <span className=\"text-sm text-[var(--oh-text-tertiary)]\">\n          {t(I18nKey.BACKEND$AUTH_STARTING)}\n        </span>\n      </div>\n    );\n  }\n\n  if (status === \"awaiting_authorization\") {\n    const validVerificationUrl =\n      verificationUrl && isValidVerificationUrl(verificationUrl)\n        ? verificationUrl\n        : null;\n\n    return (\n      <div\n        className=\"flex flex-col gap-4\"\n        data-testid={`${testIdRoot}-auth-awaiting`}\n        role=\"status\"\n        aria-live=\"polite\"\n      >\n        <div className=\"flex items-center justify-center gap-2\">\n          <LoadingSpinner />\n          <span className=\"text-sm font-medium text-white\">\n            {t(I18nKey.BACKEND$AUTH_AWAITING)}\n          </span>\n        </div>\n        <div className=\"flex flex-col gap-1\">\n          <p className=\"text-center text-sm leading-5 text-[var(--oh-text-tertiary)]\">\n            {validVerificationUrl\n              ? `${t(I18nKey.BACKEND$AUTH_BROWSER_OPENED)} ${t(I18nKey.BACKEND$AUTH_OPEN_MANUALLY)}`\n              : t(I18nKey.BACKEND$AUTH_BROWSER_OPENED)}\n          </p>\n          {validVerificationUrl ? (\n            <a\n              href={validVerificationUrl}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"max-h-16 overflow-auto break-all text-center text-xs text-blue-400 hover:underline\"\n            >\n              {validVerificationUrl}\n            </a>\n          ) : null}\n        </div>\n        <BrandButton\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onCancel}\n          testId={`${testIdRoot}-auth-cancel`}\n          className=\"w-full\"\n        >\n          {t(I18nKey.BACKEND$AUTH_CANCEL)}\n        </BrandButton>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lg border border-red-700 bg-red-900/20 p-4\"\n      data-testid={`${testIdRoot}-auth-error`}\n      role=\"alert\"\n    >\n      <p className=\"text-sm text-red-400\">{error}</p>\n      <BrandButton\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={onRetry}\n        testId={`${testIdRoot}-auth-retry`}\n        className=\"w-full\"\n      >\n        {t(I18nKey.BACKEND$AUTH_RETRY)}\n      </BrandButton>\n    </div>\n  );\n}\n\nfunction LoadingSpinner() {\n  return (\n    <svg\n      className=\"animate-spin h-4 w-4 text-white\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        className=\"opacity-75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      />\n    </svg>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/backends/manage-backends-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("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../api/agent-server-config.cjs"),o=require("../../../contexts/active-backend-context.cjs"),s=require("../../shared/modals/modal-backdrop.cjs"),c=require("../../shared/modals/modal-body.cjs"),l=require("../../../utils/modal-classes.cjs"),u=require("../../shared/modals/modal-close-button.cjs"),d=require("../settings/brand-button.cjs"),f=require("../../../hooks/query/use-cloud-organizations.cjs"),p=require("../../../hooks/query/use-cloud-current-user-id.cjs"),m=require("../../shared/modals/confirmation-modal.cjs"),h=require("../../../hooks/query/use-backends-health.cjs"),g=require("./device-flow-auth.cjs"),_=require("./backend-form-modal.cjs"),v=require("./backend-row.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");function x(e,t,n,r){if(e.kind!==`cloud`)return;let i=t[e.id];if(!i||i.orgs.length===0)return;let a=n[e.id]?.userId??null;return i.orgs.map(e=>a&&a===e.id?r:e.name).join(`, `)}function S({onClose:e,recoveryMode:S=!1}){let{t:C}=t.useTranslation(`openhands`),{backends:w,active:T,removeBackend:E,setActive:D,updateBackend:O}=o.useActiveBackendContext(),k=h.useBackendsHealth(w,{probeDisabledOnce:!0}),A=f.useAllCloudOrganizations(),j=p.useCloudCurrentUserId(),M=C(n.I18nKey.BACKEND$PERSONAL_WORKSPACE),N=a.getLockedCloudHost(),P=N!==null,F=P&&T.backend.kind===`cloud`?T.backend:null,I=N??F?.host??``,L=C(P?n.I18nKey.BACKEND$RECONNECT_CLOUD_TITLE:n.I18nKey.BACKEND$MANAGE_TITLE),[R,z]=y.default.useState(null),[B,V]=y.default.useState(null),[H,U]=y.default.useState(!1),W=()=>{R&&(E(R.id),z(null))},G=y.default.useCallback(t=>{(T.backend.id!==t.id||T.orgId!==null)&&D(t.id),e()},[T.backend.id,T.orgId,e,D]),K=y.default.useCallback((e,t)=>{O(e.id,{apiKey:t})},[O]),q=y.default.useCallback(e=>{F&&O(F.id,{apiKey:e})},[F,O]);return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(s.ModalBackdrop,{onClose:S?void 0:e,closeOnEscape:!S,closeOnBackdropClick:!S,"aria-label":L,children:(0,b.jsxs)(`div`,{"data-testid":`manage-backends-modal`,className:i.cn(`relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl`,c.modalWidthClassName(`lg`),c.MODAL_MAX_WIDTH_VIEWPORT,`max-h-[70vh]`),children:[S?null:(0,b.jsx)(u.ModalCloseButton,{onClose:e,testId:`close-manage-backends-modal`}),(0,b.jsx)(`div`,{className:i.cn(`p-5`,!S&&`pr-12`),children:(0,b.jsx)(`h2`,{className:l.modalTitleLgClassName,children:L})}),(0,b.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col px-5`,children:(0,b.jsx)(`div`,{className:`flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always`,"data-testid":`manage-backends-list`,children:w.length===0?(0,b.jsx)(`p`,{className:`px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]`,children:C(n.I18nKey.BACKEND$MANAGE_EMPTY)}):(0,b.jsx)(`ul`,{className:`divide-y divide-[var(--oh-border)]`,children:w.map(e=>(0,b.jsx)(v.BackendRow,{backend:e,health:k[e.id],orgLabel:x(e,A,j,M),onSelect:()=>G(e),onEdit:()=>V(e),onRemove:()=>z({id:e.id,name:e.name}),onLogin:t=>K(e,t)},e.id))})})}),(0,b.jsxs)(`div`,{className:`flex justify-end gap-2 p-5`,children:[P?F?(0,b.jsx)(g.DeviceFlowAuth,{host:I,onSuccess:q,testIdRoot:`manage-backends-reconnect-cloud`,idleButtonLabel:C(n.I18nKey.BACKEND$RECONNECT_CLOUD),className:`w-full sm:w-auto`,buttonClassName:`sm:w-auto`,statusDisplay:`modal`}):null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:S?`primary`:`secondary`,onClick:()=>U(!0),testId:`manage-backends-add`,startContent:(0,b.jsx)(r.Plus,{width:14,height:14}),children:C(n.I18nKey.BACKEND$ADD)}),S?null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`manage-backends-done`,children:C(n.I18nKey.HOME$DONE)})]})]})}),H?(0,b.jsx)(_.BackendFormModal,{mode:`add`,source:`manage_backends_modal`,onClose:()=>U(!1)}):null,B?(0,b.jsx)(_.BackendFormModal,{mode:`edit`,backend:B,onClose:()=>V(null)}):null,R?(0,b.jsx)(m.ConfirmationModal,{text:C(n.I18nKey.BACKEND$REMOVE_CONFIRMATION,{name:R.name}),onConfirm:W,onCancel:()=>z(null)}):null]})}exports.ManageBackendsModal=S;
+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/plus.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../api/agent-server-config.cjs"),o=require("../../../contexts/active-backend-context.cjs"),s=require("../../shared/modals/modal-backdrop.cjs"),c=require("../../shared/modals/modal-body.cjs"),l=require("../../../utils/modal-classes.cjs"),u=require("../../shared/modals/modal-close-button.cjs"),d=require("../settings/brand-button.cjs"),f=require("../../../hooks/query/use-cloud-organizations.cjs"),p=require("../../../hooks/query/use-cloud-current-user-id.cjs"),m=require("../../shared/modals/confirmation-modal.cjs"),h=require("../../../hooks/query/use-backends-health.cjs"),g=require("./device-flow-auth.cjs"),_=require("./backend-form-modal.cjs"),v=require("./backend-row.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");function x(e,t,n,r){if(e.kind!==`cloud`)return;let i=t[e.id];if(!i||i.orgs.length===0)return;let a=n[e.id]?.userId??null;return i.orgs.map(e=>a&&a===e.id?r:e.name).join(`, `)}function S({onClose:e,recoveryMode:S=!1}){let{t:C}=t.useTranslation(`openhands`),{backends:w,active:T,removeBackend:E,setActive:D,updateBackend:O}=o.useActiveBackendContext(),k=h.useBackendsHealth(w,{probeDisabledOnce:!0}),A=f.useAllCloudOrganizations(),j=p.useCloudCurrentUserId(),M=C(n.I18nKey.BACKEND$PERSONAL_WORKSPACE),N=a.getLockedCloudHost(),P=N!==null,F=P&&T.backend.kind===`cloud`?T.backend:null,I=N??F?.host??``,L=C(P?n.I18nKey.BACKEND$RECONNECT_CLOUD_TITLE:n.I18nKey.BACKEND$MANAGE_TITLE),[R,z]=y.default.useState(null),[B,V]=y.default.useState(null),[H,U]=y.default.useState(!1),W=()=>{R&&(E(R.id),z(null))},G=y.default.useCallback(t=>{(T.backend.id!==t.id||T.orgId!==null)&&D(t.id),e()},[T.backend.id,T.orgId,e,D]),K=y.default.useCallback((e,t)=>{O(e.id,{apiKey:t})},[O]),q=y.default.useCallback(e=>{F&&O(F.id,{apiKey:e})},[F,O]);return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(s.ModalBackdrop,{onClose:S?void 0:e,closeOnEscape:!S,closeOnBackdropClick:!S,"aria-label":L,children:(0,b.jsxs)(`div`,{"data-testid":`manage-backends-modal`,className:i.cn(`relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl`,c.modalWidthClassName(`lg`),c.MODAL_MAX_WIDTH_VIEWPORT,`max-h-[70vh]`),children:[S?null:(0,b.jsx)(u.ModalCloseButton,{onClose:e,testId:`close-manage-backends-modal`}),(0,b.jsx)(`div`,{className:i.cn(`p-5`,!S&&`pr-12`),children:(0,b.jsx)(`h2`,{className:l.modalTitleLgClassName,children:L})}),(0,b.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col px-5`,children:(0,b.jsx)(`div`,{className:`flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always`,"data-testid":`manage-backends-list`,children:w.length===0?(0,b.jsx)(`p`,{className:`px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]`,children:C(n.I18nKey.BACKEND$MANAGE_EMPTY)}):(0,b.jsx)(`ul`,{className:`divide-y divide-[var(--oh-border)]`,children:w.map(e=>(0,b.jsx)(v.BackendRow,{backend:e,health:k[e.id],orgLabel:x(e,A,j,M),onSelect:()=>G(e),onEdit:()=>V(e),onRemove:()=>z({id:e.id,name:e.name}),onLogin:t=>K(e,t)},e.id))})})}),(0,b.jsxs)(`div`,{className:`flex justify-end gap-2 p-5`,children:[P?F?(0,b.jsx)(g.DeviceFlowAuth,{host:I,onSuccess:q,testIdRoot:`manage-backends-reconnect-cloud`,idleButtonLabel:C(n.I18nKey.BACKEND$RECONNECT_CLOUD),className:`w-full sm:w-auto`,buttonClassName:`w-full sm:w-auto`,statusDisplay:`modal`}):null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:S?`primary`:`secondary`,onClick:()=>U(!0),testId:`manage-backends-add`,startContent:(0,b.jsx)(r.Plus,{width:14,height:14}),children:C(n.I18nKey.BACKEND$ADD)}),S?null:(0,b.jsx)(d.BrandButton,{type:`button`,variant:`primary`,onClick:e,testId:`manage-backends-done`,children:C(n.I18nKey.HOME$DONE)})]})]})}),H?(0,b.jsx)(_.BackendFormModal,{mode:`add`,source:`manage_backends_modal`,onClose:()=>U(!1)}):null,B?(0,b.jsx)(_.BackendFormModal,{mode:`edit`,backend:B,onClose:()=>V(null)}):null,R?(0,b.jsx)(m.ConfirmationModal,{text:C(n.I18nKey.BACKEND$REMOVE_CONFIRMATION,{name:R.name}),onConfirm:W,onCancel:()=>z(null)}):null]})}exports.ManageBackendsModal=S;
 //# sourceMappingURL=manage-backends-modal.cjs.map

package/dist/components/features/backends/manage-backends-modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"manage-backends-modal.cjs","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Plus } from \"lucide-react\";\n\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\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 { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\ninterface ManageBackendsModalProps {\n  onClose: () => void;\n  /**\n   * Recovery mode is used by the root unavailable-backend gate. There is no\n   * app shell behind the modal, so dismiss controls would be misleading.\n   */\n  recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n  id: string;\n  name: string;\n}\n\n/**\n * Resolve the connected organization label for a backend row, mirroring the\n * per-org labelling used by the backend selector. Cloud API keys are bound to\n * a single org (legacy keys may expose several, joined here); local backends\n * and unresolved/errored lookups yield no label.\n */\nfunction resolveBackendOrgLabel(\n  backend: Backend,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  personalWorkspaceLabel: string,\n): string | undefined {\n  if (backend.kind !== \"cloud\") return undefined;\n  const entry = cloudOrgs[backend.id];\n  if (!entry || entry.orgs.length === 0) return undefined;\n  const userId = currentUserIds[backend.id]?.userId ?? null;\n  return entry.orgs\n    .map((org) =>\n      !!userId && userId === org.id ? personalWorkspaceLabel : org.name,\n    )\n    .join(\", \");\n}\n\nexport function ManageBackendsModal({\n  onClose,\n  recoveryMode = false,\n}: ManageBackendsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, removeBackend, setActive, updateBackend } =\n    useActiveBackendContext();\n  const healthByBackendId = useBackendsHealth(backends, {\n    probeDisabledOnce: true,\n  });\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n  const lockedCloudHost = getLockedCloudHost();\n  const isLockedToCloud = lockedCloudHost !== null;\n  const lockedCloudBackend =\n    isLockedToCloud && active.backend.kind === \"cloud\" ? active.backend : null;\n  const lockedCloudReconnectHost =\n    lockedCloudHost ?? lockedCloudBackend?.host ?? \"\";\n  const modalTitle = isLockedToCloud\n    ? t(I18nKey.BACKEND$RECONNECT_CLOUD_TITLE)\n    : t(I18nKey.BACKEND$MANAGE_TITLE);\n  const [pendingRemoval, setPendingRemoval] =\n    React.useState<PendingRemoval | null>(null);\n  const [editingBackend, setEditingBackend] = React.useState<Backend | null>(\n    null,\n  );\n  const [showAddForm, setShowAddForm] = React.useState(false);\n\n  const handleConfirmRemoval = () => {\n    if (!pendingRemoval) return;\n    removeBackend(pendingRemoval.id);\n    setPendingRemoval(null);\n  };\n\n  const handleSelectBackend = React.useCallback(\n    (backend: Backend) => {\n      if (active.backend.id !== backend.id || active.orgId !== null) {\n        setActive(backend.id);\n      }\n      onClose();\n    },\n    [active.backend.id, active.orgId, onClose, setActive],\n  );\n\n  const handleCloudLogin = React.useCallback(\n    (backend: Backend, apiKey: string) => {\n      updateBackend(backend.id, { apiKey });\n    },\n    [updateBackend],\n  );\n\n  const handleLockedCloudReconnect = React.useCallback(\n    (apiKey: string) => {\n      if (!lockedCloudBackend) return;\n      updateBackend(lockedCloudBackend.id, { apiKey });\n    },\n    [lockedCloudBackend, updateBackend],\n  );\n\n  return (\n    <>\n      <ModalBackdrop\n        onClose={recoveryMode ? undefined : onClose}\n        closeOnEscape={!recoveryMode}\n        closeOnBackdropClick={!recoveryMode}\n        aria-label={modalTitle}\n      >\n        <div\n          data-testid=\"manage-backends-modal\"\n          className={cn(\n            \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n            modalWidthClassName(\"lg\"),\n            MODAL_MAX_WIDTH_VIEWPORT,\n            \"max-h-[70vh]\",\n          )}\n        >\n          {recoveryMode ? null : (\n            <ModalCloseButton\n              onClose={onClose}\n              testId=\"close-manage-backends-modal\"\n            />\n          )}\n          <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n            <h2 className={modalTitleLgClassName}>{modalTitle}</h2>\n          </div>\n\n          <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n            <div\n              className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n              data-testid=\"manage-backends-list\"\n            >\n              {backends.length === 0 ? (\n                <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n                  {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n                </p>\n              ) : (\n                <ul className=\"divide-y divide-[var(--oh-border)]\">\n                  {backends.map((backend) => (\n                    <BackendRow\n                      key={backend.id}\n                      backend={backend}\n                      health={healthByBackendId[backend.id]}\n                      orgLabel={resolveBackendOrgLabel(\n                        backend,\n                        cloudOrgs,\n                        currentUserIds,\n                        personalWorkspaceLabel,\n                      )}\n                      onSelect={() => handleSelectBackend(backend)}\n                      onEdit={() => setEditingBackend(backend)}\n                      onRemove={() =>\n                        setPendingRemoval({\n                          id: backend.id,\n                          name: backend.name,\n                        })\n                      }\n                      onLogin={(apiKey) => handleCloudLogin(backend, apiKey)}\n                    />\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-2 p-5\">\n            {isLockedToCloud ? (\n              lockedCloudBackend ? (\n                <DeviceFlowAuth\n                  host={lockedCloudReconnectHost}\n                  onSuccess={handleLockedCloudReconnect}\n                  testIdRoot=\"manage-backends-reconnect-cloud\"\n                  idleButtonLabel={t(I18nKey.BACKEND$RECONNECT_CLOUD)}\n                  className=\"w-full sm:w-auto\"\n                  buttonClassName=\"sm:w-auto\"\n                  statusDisplay=\"modal\"\n                />\n              ) : null\n            ) : (\n              <BrandButton\n                type=\"button\"\n                variant={recoveryMode ? \"primary\" : \"secondary\"}\n                onClick={() => setShowAddForm(true)}\n                testId=\"manage-backends-add\"\n                startContent={<Plus width={14} height={14} />}\n              >\n                {t(I18nKey.BACKEND$ADD)}\n              </BrandButton>\n            )}\n            {recoveryMode ? null : (\n              <BrandButton\n                type=\"button\"\n                variant=\"primary\"\n                onClick={onClose}\n                testId=\"manage-backends-done\"\n              >\n                {t(I18nKey.HOME$DONE)}\n              </BrandButton>\n            )}\n          </div>\n        </div>\n      </ModalBackdrop>\n\n      {showAddForm ? (\n        <BackendFormModal\n          mode=\"add\"\n          source=\"manage_backends_modal\"\n          onClose={() => setShowAddForm(false)}\n        />\n      ) : null}\n\n      {editingBackend ? (\n        <BackendFormModal\n          mode=\"edit\"\n          backend={editingBackend}\n          onClose={() => setEditingBackend(null)}\n        />\n      ) : null}\n\n      {pendingRemoval ? (\n        <ConfirmationModal\n          text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n            name: pendingRemoval.name,\n          })}\n          onConfirm={handleConfirmRemoval}\n          onCancel={() => setPendingRemoval(null)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"manage-backends-modal.cjs","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Plus } from \"lucide-react\";\n\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\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 { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\ninterface ManageBackendsModalProps {\n  onClose: () => void;\n  /**\n   * Recovery mode is used by the root unavailable-backend gate. There is no\n   * app shell behind the modal, so dismiss controls would be misleading.\n   */\n  recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n  id: string;\n  name: string;\n}\n\n/**\n * Resolve the connected organization label for a backend row, mirroring the\n * per-org labelling used by the backend selector. Cloud API keys are bound to\n * a single org (legacy keys may expose several, joined here); local backends\n * and unresolved/errored lookups yield no label.\n */\nfunction resolveBackendOrgLabel(\n  backend: Backend,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  personalWorkspaceLabel: string,\n): string | undefined {\n  if (backend.kind !== \"cloud\") return undefined;\n  const entry = cloudOrgs[backend.id];\n  if (!entry || entry.orgs.length === 0) return undefined;\n  const userId = currentUserIds[backend.id]?.userId ?? null;\n  return entry.orgs\n    .map((org) =>\n      !!userId && userId === org.id ? personalWorkspaceLabel : org.name,\n    )\n    .join(\", \");\n}\n\nexport function ManageBackendsModal({\n  onClose,\n  recoveryMode = false,\n}: ManageBackendsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, removeBackend, setActive, updateBackend } =\n    useActiveBackendContext();\n  const healthByBackendId = useBackendsHealth(backends, {\n    probeDisabledOnce: true,\n  });\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n  const lockedCloudHost = getLockedCloudHost();\n  const isLockedToCloud = lockedCloudHost !== null;\n  const lockedCloudBackend =\n    isLockedToCloud && active.backend.kind === \"cloud\" ? active.backend : null;\n  const lockedCloudReconnectHost =\n    lockedCloudHost ?? lockedCloudBackend?.host ?? \"\";\n  const modalTitle = isLockedToCloud\n    ? t(I18nKey.BACKEND$RECONNECT_CLOUD_TITLE)\n    : t(I18nKey.BACKEND$MANAGE_TITLE);\n  const [pendingRemoval, setPendingRemoval] =\n    React.useState<PendingRemoval | null>(null);\n  const [editingBackend, setEditingBackend] = React.useState<Backend | null>(\n    null,\n  );\n  const [showAddForm, setShowAddForm] = React.useState(false);\n\n  const handleConfirmRemoval = () => {\n    if (!pendingRemoval) return;\n    removeBackend(pendingRemoval.id);\n    setPendingRemoval(null);\n  };\n\n  const handleSelectBackend = React.useCallback(\n    (backend: Backend) => {\n      if (active.backend.id !== backend.id || active.orgId !== null) {\n        setActive(backend.id);\n      }\n      onClose();\n    },\n    [active.backend.id, active.orgId, onClose, setActive],\n  );\n\n  const handleCloudLogin = React.useCallback(\n    (backend: Backend, apiKey: string) => {\n      updateBackend(backend.id, { apiKey });\n    },\n    [updateBackend],\n  );\n\n  const handleLockedCloudReconnect = React.useCallback(\n    (apiKey: string) => {\n      if (!lockedCloudBackend) return;\n      updateBackend(lockedCloudBackend.id, { apiKey });\n    },\n    [lockedCloudBackend, updateBackend],\n  );\n\n  return (\n    <>\n      <ModalBackdrop\n        onClose={recoveryMode ? undefined : onClose}\n        closeOnEscape={!recoveryMode}\n        closeOnBackdropClick={!recoveryMode}\n        aria-label={modalTitle}\n      >\n        <div\n          data-testid=\"manage-backends-modal\"\n          className={cn(\n            \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n            modalWidthClassName(\"lg\"),\n            MODAL_MAX_WIDTH_VIEWPORT,\n            \"max-h-[70vh]\",\n          )}\n        >\n          {recoveryMode ? null : (\n            <ModalCloseButton\n              onClose={onClose}\n              testId=\"close-manage-backends-modal\"\n            />\n          )}\n          <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n            <h2 className={modalTitleLgClassName}>{modalTitle}</h2>\n          </div>\n\n          <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n            <div\n              className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n              data-testid=\"manage-backends-list\"\n            >\n              {backends.length === 0 ? (\n                <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n                  {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n                </p>\n              ) : (\n                <ul className=\"divide-y divide-[var(--oh-border)]\">\n                  {backends.map((backend) => (\n                    <BackendRow\n                      key={backend.id}\n                      backend={backend}\n                      health={healthByBackendId[backend.id]}\n                      orgLabel={resolveBackendOrgLabel(\n                        backend,\n                        cloudOrgs,\n                        currentUserIds,\n                        personalWorkspaceLabel,\n                      )}\n                      onSelect={() => handleSelectBackend(backend)}\n                      onEdit={() => setEditingBackend(backend)}\n                      onRemove={() =>\n                        setPendingRemoval({\n                          id: backend.id,\n                          name: backend.name,\n                        })\n                      }\n                      onLogin={(apiKey) => handleCloudLogin(backend, apiKey)}\n                    />\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-2 p-5\">\n            {isLockedToCloud ? (\n              lockedCloudBackend ? (\n                <DeviceFlowAuth\n                  host={lockedCloudReconnectHost}\n                  onSuccess={handleLockedCloudReconnect}\n                  testIdRoot=\"manage-backends-reconnect-cloud\"\n                  idleButtonLabel={t(I18nKey.BACKEND$RECONNECT_CLOUD)}\n                  className=\"w-full sm:w-auto\"\n                  buttonClassName=\"w-full sm:w-auto\"\n                  statusDisplay=\"modal\"\n                />\n              ) : null\n            ) : (\n              <BrandButton\n                type=\"button\"\n                variant={recoveryMode ? \"primary\" : \"secondary\"}\n                onClick={() => setShowAddForm(true)}\n                testId=\"manage-backends-add\"\n                startContent={<Plus width={14} height={14} />}\n              >\n                {t(I18nKey.BACKEND$ADD)}\n              </BrandButton>\n            )}\n            {recoveryMode ? null : (\n              <BrandButton\n                type=\"button\"\n                variant=\"primary\"\n                onClick={onClose}\n                testId=\"manage-backends-done\"\n              >\n                {t(I18nKey.HOME$DONE)}\n              </BrandButton>\n            )}\n          </div>\n        </div>\n      </ModalBackdrop>\n\n      {showAddForm ? (\n        <BackendFormModal\n          mode=\"add\"\n          source=\"manage_backends_modal\"\n          onClose={() => setShowAddForm(false)}\n        />\n      ) : null}\n\n      {editingBackend ? (\n        <BackendFormModal\n          mode=\"edit\"\n          backend={editingBackend}\n          onClose={() => setEditingBackend(null)}\n        />\n      ) : null}\n\n      {pendingRemoval ? (\n        <ConfirmationModal\n          text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n            name: pendingRemoval.name,\n          })}\n          onConfirm={handleConfirmRemoval}\n          onCancel={() => setPendingRemoval(null)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/backends/manage-backends-modal.js

@@ -95,7 +95,7 @@ function w({ onClose: w, recoveryMode: T = !1 }) {
 							testIdRoot: "manage-backends-reconnect-cloud",
 							idleButtonLabel: E(t.BACKEND$RECONNECT_CLOUD),
 							className: "w-full sm:w-auto",
-							buttonClassName: "sm:w-auto",
+							buttonClassName: "w-full sm:w-auto",
 							statusDisplay: "modal"
 						}) : null : /* @__PURE__ */ x(d, {
 							type: "button",

package/dist/components/features/backends/manage-backends-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"manage-backends-modal.js","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Plus } from \"lucide-react\";\n\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\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 { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\ninterface ManageBackendsModalProps {\n  onClose: () => void;\n  /**\n   * Recovery mode is used by the root unavailable-backend gate. There is no\n   * app shell behind the modal, so dismiss controls would be misleading.\n   */\n  recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n  id: string;\n  name: string;\n}\n\n/**\n * Resolve the connected organization label for a backend row, mirroring the\n * per-org labelling used by the backend selector. Cloud API keys are bound to\n * a single org (legacy keys may expose several, joined here); local backends\n * and unresolved/errored lookups yield no label.\n */\nfunction resolveBackendOrgLabel(\n  backend: Backend,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  personalWorkspaceLabel: string,\n): string | undefined {\n  if (backend.kind !== \"cloud\") return undefined;\n  const entry = cloudOrgs[backend.id];\n  if (!entry || entry.orgs.length === 0) return undefined;\n  const userId = currentUserIds[backend.id]?.userId ?? null;\n  return entry.orgs\n    .map((org) =>\n      !!userId && userId === org.id ? personalWorkspaceLabel : org.name,\n    )\n    .join(\", \");\n}\n\nexport function ManageBackendsModal({\n  onClose,\n  recoveryMode = false,\n}: ManageBackendsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, removeBackend, setActive, updateBackend } =\n    useActiveBackendContext();\n  const healthByBackendId = useBackendsHealth(backends, {\n    probeDisabledOnce: true,\n  });\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n  const lockedCloudHost = getLockedCloudHost();\n  const isLockedToCloud = lockedCloudHost !== null;\n  const lockedCloudBackend =\n    isLockedToCloud && active.backend.kind === \"cloud\" ? active.backend : null;\n  const lockedCloudReconnectHost =\n    lockedCloudHost ?? lockedCloudBackend?.host ?? \"\";\n  const modalTitle = isLockedToCloud\n    ? t(I18nKey.BACKEND$RECONNECT_CLOUD_TITLE)\n    : t(I18nKey.BACKEND$MANAGE_TITLE);\n  const [pendingRemoval, setPendingRemoval] =\n    React.useState<PendingRemoval | null>(null);\n  const [editingBackend, setEditingBackend] = React.useState<Backend | null>(\n    null,\n  );\n  const [showAddForm, setShowAddForm] = React.useState(false);\n\n  const handleConfirmRemoval = () => {\n    if (!pendingRemoval) return;\n    removeBackend(pendingRemoval.id);\n    setPendingRemoval(null);\n  };\n\n  const handleSelectBackend = React.useCallback(\n    (backend: Backend) => {\n      if (active.backend.id !== backend.id || active.orgId !== null) {\n        setActive(backend.id);\n      }\n      onClose();\n    },\n    [active.backend.id, active.orgId, onClose, setActive],\n  );\n\n  const handleCloudLogin = React.useCallback(\n    (backend: Backend, apiKey: string) => {\n      updateBackend(backend.id, { apiKey });\n    },\n    [updateBackend],\n  );\n\n  const handleLockedCloudReconnect = React.useCallback(\n    (apiKey: string) => {\n      if (!lockedCloudBackend) return;\n      updateBackend(lockedCloudBackend.id, { apiKey });\n    },\n    [lockedCloudBackend, updateBackend],\n  );\n\n  return (\n    <>\n      <ModalBackdrop\n        onClose={recoveryMode ? undefined : onClose}\n        closeOnEscape={!recoveryMode}\n        closeOnBackdropClick={!recoveryMode}\n        aria-label={modalTitle}\n      >\n        <div\n          data-testid=\"manage-backends-modal\"\n          className={cn(\n            \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n            modalWidthClassName(\"lg\"),\n            MODAL_MAX_WIDTH_VIEWPORT,\n            \"max-h-[70vh]\",\n          )}\n        >\n          {recoveryMode ? null : (\n            <ModalCloseButton\n              onClose={onClose}\n              testId=\"close-manage-backends-modal\"\n            />\n          )}\n          <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n            <h2 className={modalTitleLgClassName}>{modalTitle}</h2>\n          </div>\n\n          <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n            <div\n              className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n              data-testid=\"manage-backends-list\"\n            >\n              {backends.length === 0 ? (\n                <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n                  {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n                </p>\n              ) : (\n                <ul className=\"divide-y divide-[var(--oh-border)]\">\n                  {backends.map((backend) => (\n                    <BackendRow\n                      key={backend.id}\n                      backend={backend}\n                      health={healthByBackendId[backend.id]}\n                      orgLabel={resolveBackendOrgLabel(\n                        backend,\n                        cloudOrgs,\n                        currentUserIds,\n                        personalWorkspaceLabel,\n                      )}\n                      onSelect={() => handleSelectBackend(backend)}\n                      onEdit={() => setEditingBackend(backend)}\n                      onRemove={() =>\n                        setPendingRemoval({\n                          id: backend.id,\n                          name: backend.name,\n                        })\n                      }\n                      onLogin={(apiKey) => handleCloudLogin(backend, apiKey)}\n                    />\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-2 p-5\">\n            {isLockedToCloud ? (\n              lockedCloudBackend ? (\n                <DeviceFlowAuth\n                  host={lockedCloudReconnectHost}\n                  onSuccess={handleLockedCloudReconnect}\n                  testIdRoot=\"manage-backends-reconnect-cloud\"\n                  idleButtonLabel={t(I18nKey.BACKEND$RECONNECT_CLOUD)}\n                  className=\"w-full sm:w-auto\"\n                  buttonClassName=\"sm:w-auto\"\n                  statusDisplay=\"modal\"\n                />\n              ) : null\n            ) : (\n              <BrandButton\n                type=\"button\"\n                variant={recoveryMode ? \"primary\" : \"secondary\"}\n                onClick={() => setShowAddForm(true)}\n                testId=\"manage-backends-add\"\n                startContent={<Plus width={14} height={14} />}\n              >\n                {t(I18nKey.BACKEND$ADD)}\n              </BrandButton>\n            )}\n            {recoveryMode ? null : (\n              <BrandButton\n                type=\"button\"\n                variant=\"primary\"\n                onClick={onClose}\n                testId=\"manage-backends-done\"\n              >\n                {t(I18nKey.HOME$DONE)}\n              </BrandButton>\n            )}\n          </div>\n        </div>\n      </ModalBackdrop>\n\n      {showAddForm ? (\n        <BackendFormModal\n          mode=\"add\"\n          source=\"manage_backends_modal\"\n          onClose={() => setShowAddForm(false)}\n        />\n      ) : null}\n\n      {editingBackend ? (\n        <BackendFormModal\n          mode=\"edit\"\n          backend={editingBackend}\n          onClose={() => setEditingBackend(null)}\n        />\n      ) : null}\n\n      {pendingRemoval ? (\n        <ConfirmationModal\n          text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n            name: pendingRemoval.name,\n          })}\n          onConfirm={handleConfirmRemoval}\n          onCancel={() => setPendingRemoval(null)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"manage-backends-modal.js","names":[],"sources":["../../../../src/components/features/backends/manage-backends-modal.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Plus } from \"lucide-react\";\n\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { type Backend } from \"#/api/backend-registry/types\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { ConfirmationModal } from \"#/components/shared/modals/confirmation-modal\";\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 { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { useBackendsHealth } from \"#/hooks/query/use-backends-health\";\nimport { useAllCloudOrganizations } from \"#/hooks/query/use-cloud-organizations\";\nimport { useCloudCurrentUserId } from \"#/hooks/query/use-cloud-current-user-id\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport { modalTitleLgClassName } from \"#/utils/modal-classes\";\nimport { BackendFormModal } from \"./backend-form-modal\";\nimport { BackendRow } from \"./backend-row\";\nimport { DeviceFlowAuth } from \"./device-flow-auth\";\n\ninterface ManageBackendsModalProps {\n  onClose: () => void;\n  /**\n   * Recovery mode is used by the root unavailable-backend gate. There is no\n   * app shell behind the modal, so dismiss controls would be misleading.\n   */\n  recoveryMode?: boolean;\n}\n\ninterface PendingRemoval {\n  id: string;\n  name: string;\n}\n\n/**\n * Resolve the connected organization label for a backend row, mirroring the\n * per-org labelling used by the backend selector. Cloud API keys are bound to\n * a single org (legacy keys may expose several, joined here); local backends\n * and unresolved/errored lookups yield no label.\n */\nfunction resolveBackendOrgLabel(\n  backend: Backend,\n  cloudOrgs: ReturnType<typeof useAllCloudOrganizations>,\n  currentUserIds: ReturnType<typeof useCloudCurrentUserId>,\n  personalWorkspaceLabel: string,\n): string | undefined {\n  if (backend.kind !== \"cloud\") return undefined;\n  const entry = cloudOrgs[backend.id];\n  if (!entry || entry.orgs.length === 0) return undefined;\n  const userId = currentUserIds[backend.id]?.userId ?? null;\n  return entry.orgs\n    .map((org) =>\n      !!userId && userId === org.id ? personalWorkspaceLabel : org.name,\n    )\n    .join(\", \");\n}\n\nexport function ManageBackendsModal({\n  onClose,\n  recoveryMode = false,\n}: ManageBackendsModalProps) {\n  const { t } = useTranslation(\"openhands\");\n  const { backends, active, removeBackend, setActive, updateBackend } =\n    useActiveBackendContext();\n  const healthByBackendId = useBackendsHealth(backends, {\n    probeDisabledOnce: true,\n  });\n  const cloudOrgs = useAllCloudOrganizations();\n  const currentUserIds = useCloudCurrentUserId();\n  const personalWorkspaceLabel = t(I18nKey.BACKEND$PERSONAL_WORKSPACE);\n  const lockedCloudHost = getLockedCloudHost();\n  const isLockedToCloud = lockedCloudHost !== null;\n  const lockedCloudBackend =\n    isLockedToCloud && active.backend.kind === \"cloud\" ? active.backend : null;\n  const lockedCloudReconnectHost =\n    lockedCloudHost ?? lockedCloudBackend?.host ?? \"\";\n  const modalTitle = isLockedToCloud\n    ? t(I18nKey.BACKEND$RECONNECT_CLOUD_TITLE)\n    : t(I18nKey.BACKEND$MANAGE_TITLE);\n  const [pendingRemoval, setPendingRemoval] =\n    React.useState<PendingRemoval | null>(null);\n  const [editingBackend, setEditingBackend] = React.useState<Backend | null>(\n    null,\n  );\n  const [showAddForm, setShowAddForm] = React.useState(false);\n\n  const handleConfirmRemoval = () => {\n    if (!pendingRemoval) return;\n    removeBackend(pendingRemoval.id);\n    setPendingRemoval(null);\n  };\n\n  const handleSelectBackend = React.useCallback(\n    (backend: Backend) => {\n      if (active.backend.id !== backend.id || active.orgId !== null) {\n        setActive(backend.id);\n      }\n      onClose();\n    },\n    [active.backend.id, active.orgId, onClose, setActive],\n  );\n\n  const handleCloudLogin = React.useCallback(\n    (backend: Backend, apiKey: string) => {\n      updateBackend(backend.id, { apiKey });\n    },\n    [updateBackend],\n  );\n\n  const handleLockedCloudReconnect = React.useCallback(\n    (apiKey: string) => {\n      if (!lockedCloudBackend) return;\n      updateBackend(lockedCloudBackend.id, { apiKey });\n    },\n    [lockedCloudBackend, updateBackend],\n  );\n\n  return (\n    <>\n      <ModalBackdrop\n        onClose={recoveryMode ? undefined : onClose}\n        closeOnEscape={!recoveryMode}\n        closeOnBackdropClick={!recoveryMode}\n        aria-label={modalTitle}\n      >\n        <div\n          data-testid=\"manage-backends-modal\"\n          className={cn(\n            \"relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl\",\n            modalWidthClassName(\"lg\"),\n            MODAL_MAX_WIDTH_VIEWPORT,\n            \"max-h-[70vh]\",\n          )}\n        >\n          {recoveryMode ? null : (\n            <ModalCloseButton\n              onClose={onClose}\n              testId=\"close-manage-backends-modal\"\n            />\n          )}\n          <div className={cn(\"p-5\", !recoveryMode && \"pr-12\")}>\n            <h2 className={modalTitleLgClassName}>{modalTitle}</h2>\n          </div>\n\n          <div className=\"flex min-h-0 flex-1 flex-col px-5\">\n            <div\n              className=\"flex-1 overflow-auto rounded-md border border-[var(--oh-border)] bg-surface-raised custom-scrollbar-always\"\n              data-testid=\"manage-backends-list\"\n            >\n              {backends.length === 0 ? (\n                <p className=\"px-3 py-6 text-center text-sm text-[var(--oh-text-secondary)]\">\n                  {t(I18nKey.BACKEND$MANAGE_EMPTY)}\n                </p>\n              ) : (\n                <ul className=\"divide-y divide-[var(--oh-border)]\">\n                  {backends.map((backend) => (\n                    <BackendRow\n                      key={backend.id}\n                      backend={backend}\n                      health={healthByBackendId[backend.id]}\n                      orgLabel={resolveBackendOrgLabel(\n                        backend,\n                        cloudOrgs,\n                        currentUserIds,\n                        personalWorkspaceLabel,\n                      )}\n                      onSelect={() => handleSelectBackend(backend)}\n                      onEdit={() => setEditingBackend(backend)}\n                      onRemove={() =>\n                        setPendingRemoval({\n                          id: backend.id,\n                          name: backend.name,\n                        })\n                      }\n                      onLogin={(apiKey) => handleCloudLogin(backend, apiKey)}\n                    />\n                  ))}\n                </ul>\n              )}\n            </div>\n          </div>\n\n          <div className=\"flex justify-end gap-2 p-5\">\n            {isLockedToCloud ? (\n              lockedCloudBackend ? (\n                <DeviceFlowAuth\n                  host={lockedCloudReconnectHost}\n                  onSuccess={handleLockedCloudReconnect}\n                  testIdRoot=\"manage-backends-reconnect-cloud\"\n                  idleButtonLabel={t(I18nKey.BACKEND$RECONNECT_CLOUD)}\n                  className=\"w-full sm:w-auto\"\n                  buttonClassName=\"w-full sm:w-auto\"\n                  statusDisplay=\"modal\"\n                />\n              ) : null\n            ) : (\n              <BrandButton\n                type=\"button\"\n                variant={recoveryMode ? \"primary\" : \"secondary\"}\n                onClick={() => setShowAddForm(true)}\n                testId=\"manage-backends-add\"\n                startContent={<Plus width={14} height={14} />}\n              >\n                {t(I18nKey.BACKEND$ADD)}\n              </BrandButton>\n            )}\n            {recoveryMode ? null : (\n              <BrandButton\n                type=\"button\"\n                variant=\"primary\"\n                onClick={onClose}\n                testId=\"manage-backends-done\"\n              >\n                {t(I18nKey.HOME$DONE)}\n              </BrandButton>\n            )}\n          </div>\n        </div>\n      </ModalBackdrop>\n\n      {showAddForm ? (\n        <BackendFormModal\n          mode=\"add\"\n          source=\"manage_backends_modal\"\n          onClose={() => setShowAddForm(false)}\n        />\n      ) : null}\n\n      {editingBackend ? (\n        <BackendFormModal\n          mode=\"edit\"\n          backend={editingBackend}\n          onClose={() => setEditingBackend(null)}\n        />\n      ) : null}\n\n      {pendingRemoval ? (\n        <ConfirmationModal\n          text={t(I18nKey.BACKEND$REMOVE_CONFIRMATION, {\n            name: pendingRemoval.name,\n          })}\n          onConfirm={handleConfirmRemoval}\n          onCancel={() => setPendingRemoval(null)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/chat/chat-interface.cjs

@@ -1,4 +1,4 @@
 const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../types/agent-state.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../hooks/use-conversation-id.cjs"),o=require("../../../stores/conversation-store.cjs"),s=require("../../../utils/custom-toast-handlers.cjs");require("../../../constants/server-connection-error.cjs");const c=require("../../../stores/error-message-store.cjs"),l=require("../../../stores/optimistic-user-message-store.cjs"),u=require("../../../stores/goal-store.cjs"),d=require("../../../stores/model-store.cjs"),ee=require("../../../contexts/conversation-websocket-context.cjs"),f=require("../../../hooks/use-send-message.cjs"),te=require("../../../hooks/query/use-active-conversation.cjs"),p=require("../../../hooks/use-agent-state.cjs"),ne=require("../../../utils/convert-image-to-base-64.cjs"),re=require("../../../utils/file-validation.cjs"),m=require("../../../utils/pending-task-message-link.cjs"),ie=require("../../../hooks/query/use-task-polling.cjs"),ae=require("../../../hooks/use-tracking.cjs"),oe=require("../../../utils/acp-error-codes.cjs"),se=require("../../../services/chat-service.cjs"),ce=require("./btw-messages.cjs"),le=require("./goal-status-banner.cjs"),ue=require("./model-messages.cjs"),de=require("./components/resolve-picker-kind.cjs"),fe=require("../../../hooks/use-is-archived-conversation.cjs"),h=require("../../shared/loading-spinner.cjs"),pe=require("../../../hooks/use-scroll-to-bottom.cjs"),me=require("../../../context/scroll-context.cjs"),he=require("./interactive-chat-box.cjs"),ge=require("../../../hooks/use-filtered-events.cjs"),_e=require("../../../hooks/use-load-older-events.cjs"),ve=require("./typing-indicator.cjs"),ye=require("./chat-suggestions.cjs"),be=require("../../../stores/initial-query-store.cjs"),xe=require("../../../hooks/use-handle-build-plan-click.cjs"),Se=require("../../shared/buttons/scroll-to-bottom-button.cjs"),Ce=require("./chat-messages-skeleton.cjs"),we=require("./error-message-banner.cjs"),Te=require("./skill-install-restart-banner.cjs"),Ee=require("../../../hooks/use-llm-configured.cjs"),De=require("../home/llm-not-configured-banner.cjs"),Oe=require("../../conversation-events/chat/messages.cjs"),ke=require("./pending-user-messages.cjs"),Ae=require("../../../hooks/mutation/use-unified-upload-files.cjs"),je=require("./confirmation-mode-enabled.cjs"),Me=require("./chat-status-indicator.cjs"),Ne=require("../../../hooks/mutation/use-new-conversation-command.cjs");let g=require("react");g=e.__toESM(g,1);let _=require("react/jsx-runtime"),Pe=require("react-router");function Fe(e,t){return e?`github`:t?`replay`:`direct`}function v(){let{trackInitialQuerySubmitted:e,trackUserMessageSent:v}=ae.useTracking(),{setMessageToSend:y}=o.useConversationStore(),{errorMessage:b,errorCode:x,removeErrorMessage:Ie,setErrorMessage:S}=c.useErrorMessageStore(),Le=(0,Pe.useNavigate)(),{isTask:C,taskStatus:w,taskDetail:Re}=ie.useTaskPolling(),T=C,E=ee.useConversationWebSocket(),{send:ze}=f.useSendMessage(),{renderableEvents:D,allConversationEvents:O,totalEvents:k,hasSubstantiveAgentActions:A,userEventsExist:j}=ge.useFilteredEvents(),Be=l.useOptimisticUserMessageStore(e=>e.enqueuePendingMessage),Ve=l.useOptimisticUserMessageStore(e=>e.markPendingMessageError),M=l.useOptimisticUserMessageStore(e=>e.pendingMessages),{t:N}=t.useTranslation(`openhands`),P=g.default.useRef(null),{scrollDomToBottom:F,onChatBodyScroll:I,hitBottom:L,autoScroll:R,setAutoScroll:He,setHitBottom:Ue}=pe.useScrollToBottom(P),{mutate:We,isPending:z}=Ne.useNewConversationCommand(),{curAgentState:B}=p.useAgentState(),{handleBuildPlanClick:V}=xe.useHandleBuildPlanClick(),{data:Ge}=te.useActiveConversation(),H=Ge?.sandbox_status??null,U=fe.useIsArchivedConversation(),{isConfigured:Ke,isLoading:qe}=Ee.useLlmConfigured(),W=!qe&&!Ke,Je=B===r.AgentState.RUNNING||B===r.AgentState.LOADING;g.default.useEffect(()=>{if(Je)return;let e=e=>{(e.metaKey||e.ctrlKey)&&e.key===`Enter`&&(e.preventDefault(),e.stopPropagation(),V(e),F())};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[Je,V,F]);let{selectedRepository:Ye,replayJson:Xe}=be.useInitialQueryStore(),{conversationId:G}=a.useOptionalConversationId(),Ze=u.useGoalStore(e=>{let t=G?e.statusByConversation[G]:void 0;return t?.active?`${t.iteration}:${t.status}`:null}),{mutateAsync:Qe}=Ae.useUnifiedUploadFiles(),{isLoading:K,hasMore:q,loadOlder:$e}=_e.useLoadOlderEvents(G),J=g.default.useRef(null),Y=g.default.useCallback(e=>{if(T||K||!q)return;let t=e.scrollTop<=80,r=e.scrollHeight<=e.clientHeight+80;!t&&!r||(J.current={scrollHeight:e.scrollHeight,scrollTop:e.scrollTop},$e().catch(e=>{J.current=null,S(e instanceof Error&&e.message?e.message:N(n.I18nKey.ERROR$GENERIC))}))},[q,K,T,$e,S,N]),et=g.default.useCallback(e=>{e.deltaY<0&&e.currentTarget.scrollTop<=0&&Y(e.currentTarget)},[Y]),X=g.default.useMemo(()=>G?M.some(e=>m.matchesPendingConversationId(G,e.conversationId)):!1,[M,G]),tt=d.useModelStore(e=>G?(e.entriesByConversation[G]?.length??0)>0:!1),nt=de.hasConversationStarted({isLoadingHistory:E?.isLoadingHistory===!0,hasUserEvents:j,hasPendingUserMessages:X,hasSubstantiveAgentActions:A,hasModelEntries:tt}),rt=O.length>0||X||!E?.isLoadingHistory,it=!!G,Z=!rt&&!C,at=async(t,r,i)=>{if(t.trim()===`/new`){if(!G){s.displayErrorToast(N(n.I18nKey.CONVERSATION$CLEAR_NO_ID));return}if(k===0){s.displayErrorToast(N(n.I18nKey.CONVERSATION$CLEAR_EMPTY));return}if(z)return;We();return}let a=[...r],o=[...i];k===0?e({entryPoint:Fe(Ye!==null,Xe!==null),queryCharacterLength:t.length,replayJsonSize:Xe?.length}):v({sessionMessageCount:k,currentMessageLength:t.length});let c=re.validateFiles([...a,...o]);if(!c.isValid){s.displayErrorToast(`Error: ${c.errorMessage}`);return}let l=a.map(e=>ne.convertImageToBase64(e)),u=await Promise.all(l),d=new Date().toISOString(),{skipped_files:ee,uploaded_files:f}=o.length>0?await Qe({conversationId:G,files:o}):{skipped_files:[],uploaded_files:[]};ee.forEach(e=>s.displayErrorToast(e.reason));let te=`${N(n.I18nKey.CHAT_INTERFACE$AUGMENTED_PROMPT_FILES_TITLE)}: ${f.join(`
 
-`)}`,p=f.length>0?`${t}\n\n${te}`:t,m=Be({conversationId:G,text:t,content:p,imageUrls:u,fileUrls:f,timestamp:d});F(),y(``);try{await ze(se.createChatMessage(p,u,f,d))}catch(e){Ve(m,e instanceof Error?e.message:N(n.I18nKey.CHAT_INTERFACE$FAILED_TO_SEND_MESSAGE))}};g.default.useEffect(()=>{if(J.current&&P.current){let{scrollHeight:e,scrollTop:t}=J.current,n=P.current,r=n.scrollHeight-e;r>0&&(n.scrollTop=t+r),J.current=null;return}R&&F()},[D.length,X,Ze,F]);let ot=g.default.useRef(Y);g.default.useEffect(()=>{ot.current=Y}),g.default.useEffect(()=>{let e=P.current;e&&ot.current(e)},[D.length,q]);let st={scrollRef:P,autoScroll:R,setAutoScroll:He,scrollDomToBottom:F,hitBottom:L,setHitBottom:Ue,onChatBodyScroll:I},Q=B===r.AgentState.LOADING||B===r.AgentState.INIT,ct=B===r.AgentState.STOPPED,$=B===r.AgentState.PAUSED,lt=i.getStatusColor({isPausing:$,isTask:C,taskStatus:w,isStartingStatus:Q,isStopStatus:ct,curAgentState:B}),ut=i.getStatusText({isPausing:$,isTask:C,taskStatus:w,taskDetail:Re,isStartingStatus:Q,isStopStatus:ct,curAgentState:B,errorMessage:b,t:N});return(0,_.jsx)(me.ScrollProvider,{value:st,children:(0,_.jsxs)(`div`,{className:`relative flex h-full flex-col justify-between px-4`,"data-testid":`chat-interface`,children:[!A&&!X&&!j&&!tt&&!Z&&!T&&k===0&&!U&&!W&&(0,_.jsx)(ye.ChatSuggestions,{onSuggestionsClick:e=>y(e)}),(0,_.jsxs)(`div`,{ref:P,"data-testid":`chat-scroll-container`,onScroll:e=>{I(e.currentTarget),Y(e.currentTarget)},onWheel:et,className:`custom-scrollbar-always flex min-h-0 grow flex-col gap-2 overflow-x-hidden overflow-y-auto px-0 pt-4 pb-8 md:px-4`,children:[Z&&it&&(0,_.jsx)(Ce.ChatMessagesSkeleton,{}),Z&&!it&&(0,_.jsx)(`div`,{className:`flex justify-center`,"data-testid":`loading-spinner`,children:(0,_.jsx)(h.LoadingSpinner,{size:`small`})}),K&&(0,_.jsxs)(`div`,{className:`flex items-center justify-center gap-2 py-3 text-sm text-neutral-400`,"data-testid":`loading-older-events`,children:[(0,_.jsx)(h.LoadingSpinner,{size:`small`}),(0,_.jsx)(`span`,{children:N(n.I18nKey.CHAT_INTERFACE$FETCHING_OLDER_MESSAGES)})]}),(0,_.jsx)(ue.ModelMessages,{conversationId:G,anchorEventId:null}),rt&&D.length>0&&(0,_.jsx)(Oe.Messages,{messages:D,allEvents:O}),(0,_.jsx)(ke.PendingUserMessages,{}),(0,_.jsx)(le.GoalStatusBanner,{conversationId:G})]}),(0,_.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-[6px] pb-4`,children:[(0,_.jsx)(Te.SkillInstallRestartBanner,{conversationId:G}),(0,_.jsx)(ce.BtwMessages,{conversationId:G}),b&&(0,_.jsx)(we.ErrorMessageBanner,{message:b,code:x,onDismiss:Ie,onRetry:b===`Unable to connect to server`?()=>E?.reconnect():void 0,onReauth:oe.isAcpAuthErrorCode(x)?()=>Le(`/settings/agents`):void 0}),W&&!U&&(0,_.jsx)(De.LlmNotConfiguredBanner,{}),U?(0,_.jsxs)(`div`,{"data-testid":`archived-conversation-banner`,className:`mx-1 px-4 py-3 rounded-lg bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)]`,children:[(0,_.jsx)(`p`,{className:`text-xs font-semibold text-[var(--oh-foreground)]`,children:N(H===`ERROR`?n.I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_TITLE:n.I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_TITLE)}),(0,_.jsx)(`p`,{className:`text-xs text-[var(--oh-muted)] mt-0.5`,children:N(H===`ERROR`?n.I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_DESCRIPTION:n.I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_DESCRIPTION)})]}):(0,_.jsxs)(`div`,{className:`relative`,children:[(0,_.jsx)(`div`,{className:`pointer-events-none absolute inset-x-0 bottom-full mb-1 z-20`,children:(0,_.jsxs)(`div`,{className:`flex justify-between relative`,children:[(0,_.jsxs)(`div`,{className:`flex items-end gap-1 pointer-events-auto`,children:[(0,_.jsx)(je.default,{}),Q&&(0,_.jsx)(Me.default,{statusColor:lt,status:ut})]}),L?B===r.AgentState.RUNNING&&(0,_.jsx)(`div`,{className:`absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto`,children:(0,_.jsx)(ve.TypingIndicator,{})}):(0,_.jsx)(`div`,{className:`absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto`,children:(0,_.jsx)(Se.ScrollToBottomButton,{onClick:F})})]})}),(0,_.jsx)(he.InteractiveChatBox,{onSubmit:at,disabled:z||W,hasStartedConversation:nt})]})]})]})})}exports.ChatInterface=v;
+`)}`,p=f.length>0?`${t}\n\n${te}`:t,m=Be({conversationId:G,text:t,content:p,imageUrls:u,fileUrls:f,timestamp:d});F(),y(``);try{await ze(se.createChatMessage(p,u,f,d))}catch(e){Ve(m,e instanceof Error?e.message:N(n.I18nKey.CHAT_INTERFACE$FAILED_TO_SEND_MESSAGE))}};g.default.useEffect(()=>{if(J.current&&P.current){let{scrollHeight:e,scrollTop:t}=J.current,n=P.current,r=n.scrollHeight-e;r>0&&(n.scrollTop=t+r),J.current=null;return}R&&F()},[D.length,X,Ze,F]);let ot=g.default.useRef(Y);g.default.useEffect(()=>{ot.current=Y}),g.default.useEffect(()=>{let e=P.current;e&&ot.current(e)},[D.length,q]);let st={scrollRef:P,autoScroll:R,setAutoScroll:He,scrollDomToBottom:F,hitBottom:L,setHitBottom:Ue,onChatBodyScroll:I},Q=B===r.AgentState.LOADING||B===r.AgentState.INIT,ct=B===r.AgentState.STOPPED,$=B===r.AgentState.PAUSED,lt=i.getStatusColor({isPausing:$,isTask:C,taskStatus:w,isStartingStatus:Q,isStopStatus:ct,curAgentState:B}),ut=i.getStatusText({isPausing:$,isTask:C,taskStatus:w,taskDetail:Re,isStartingStatus:Q,isStopStatus:ct,curAgentState:B,errorMessage:b,t:N});return(0,_.jsx)(me.ScrollProvider,{value:st,children:(0,_.jsxs)(`div`,{className:`relative flex h-full flex-col justify-between px-4`,"data-testid":`chat-interface`,children:[!A&&!X&&!j&&!tt&&!Z&&!T&&k===0&&!U&&!W&&(0,_.jsx)(ye.ChatSuggestions,{onSuggestionsClick:e=>y(e)}),(0,_.jsxs)(`div`,{ref:P,"data-testid":`chat-scroll-container`,onScroll:e=>{I(e.currentTarget),Y(e.currentTarget)},onWheel:et,className:`custom-scrollbar-always flex min-h-0 grow flex-col gap-2 overflow-x-hidden overflow-y-auto px-0 pt-4 pb-8 md:px-4`,children:[Z&&it&&(0,_.jsx)(Ce.ChatMessagesSkeleton,{}),Z&&!it&&(0,_.jsx)(`div`,{className:`flex justify-center`,"data-testid":`loading-spinner`,children:(0,_.jsx)(h.LoadingSpinner,{size:`small`})}),K&&(0,_.jsxs)(`div`,{className:`flex items-center justify-center gap-2 py-3 text-sm text-neutral-400`,"data-testid":`loading-older-events`,children:[(0,_.jsx)(h.LoadingSpinner,{size:`small`}),(0,_.jsx)(`span`,{children:N(n.I18nKey.CHAT_INTERFACE$FETCHING_OLDER_MESSAGES)})]}),(0,_.jsx)(ue.ModelMessages,{conversationId:G,anchorEventId:null}),rt&&D.length>0&&(0,_.jsx)(Oe.Messages,{messages:D,allEvents:O}),(0,_.jsx)(ke.PendingUserMessages,{}),(0,_.jsx)(le.GoalStatusBanner,{conversationId:G})]}),(0,_.jsxs)(`div`,{className:`flex shrink-0 flex-col gap-[6px] pb-4`,children:[(0,_.jsx)(Te.SkillInstallRestartBanner,{conversationId:G}),(0,_.jsx)(ce.BtwMessages,{conversationId:G}),b&&(0,_.jsx)(we.ErrorMessageBanner,{message:b,code:x,onDismiss:Ie,onRetry:b===`Unable to connect to server`?()=>E?.reconnect():void 0,onReauth:oe.isAcpAuthErrorCode(x)?()=>Le(`/settings/agents`):void 0}),W&&!U&&(0,_.jsx)(De.LlmNotConfiguredBanner,{}),U?(0,_.jsxs)(`div`,{"data-testid":`archived-conversation-banner`,className:`mx-1 px-4 py-3 rounded-lg bg-[var(--oh-surface)] border border-[var(--oh-border-subtle)]`,children:[(0,_.jsx)(`p`,{className:`text-xs font-semibold text-[var(--oh-foreground)]`,children:N(H===`ERROR`?n.I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_TITLE:n.I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_TITLE)}),(0,_.jsx)(`p`,{className:`text-xs text-[var(--oh-muted)] mt-0.5`,children:N(H===`ERROR`?n.I18nKey.CHAT_INTERFACE$ERROR_SANDBOX_DESCRIPTION:n.I18nKey.CHAT_INTERFACE$ARCHIVED_SANDBOX_DESCRIPTION)})]}):(0,_.jsxs)(`div`,{className:`relative`,children:[(0,_.jsx)(`div`,{className:`pointer-events-none absolute inset-x-0 bottom-full mb-1 z-20`,children:(0,_.jsxs)(`div`,{className:`flex justify-between relative`,children:[(0,_.jsxs)(`div`,{className:`flex items-end gap-1 pointer-events-auto`,children:[(0,_.jsx)(je.default,{}),Q&&(0,_.jsx)(Me.default,{statusColor:lt,status:ut})]}),L?B===r.AgentState.RUNNING&&(0,_.jsx)(`div`,{className:`pointer-events-none absolute inset-x-9 bottom-0 flex justify-center`,children:(0,_.jsx)(ve.TypingIndicator,{events:O})}):(0,_.jsx)(`div`,{className:`absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-auto`,children:(0,_.jsx)(Se.ScrollToBottomButton,{onClick:F})})]})}),(0,_.jsx)(he.InteractiveChatBox,{onSubmit:at,disabled:z||W,hasStartedConversation:nt})]})]})]})})}exports.ChatInterface=v;
 //# sourceMappingURL=chat-interface.cjs.map