@openhands/agent-canvas 1.15.0 → 1.17.0

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

@@ -9,9 +9,9 @@ import { MODAL_MAX_WIDTH_VIEWPORT as s, modalWidthClassName as c } from "../../s
 import { modalTitleLgClassName as l } from "../../../utils/modal-classes.js";
 import { ModalCloseButton as u } from "../../shared/modals/modal-close-button.js";
 import { BrandButton as d } from "../settings/brand-button.js";
-import { ConfirmationModal as f } from "../../shared/modals/confirmation-modal.js";
-import { useAllCloudOrganizations as p } from "../../../hooks/query/use-cloud-organizations.js";
-import { useCloudCurrentUserId as m } from "../../../hooks/query/use-cloud-current-user-id.js";
+import { useAllCloudOrganizations as f } from "../../../hooks/query/use-cloud-organizations.js";
+import { useCloudCurrentUserId as p } from "../../../hooks/query/use-cloud-current-user-id.js";
+import { ConfirmationModal as m } from "../../shared/modals/confirmation-modal.js";
 import { useBackendsHealth as h } from "../../../hooks/query/use-backends-health.js";
 import { DeviceFlowAuth as g } from "./device-flow-auth.js";
 import { BackendFormModal as _ } from "./backend-form-modal.js";
@@ -27,26 +27,26 @@ function C(e, t, n, r) {
 	return i.orgs.map((e) => a && a === e.id ? r : e.name).join(", ");
 }
 function w({ onClose: w, recoveryMode: T = !1 }) {
-	let { t: E } = e("openhands"), { backends: D, active: O, removeBackend: k, setActive: A, updateBackend: j } = a(), M = h(D, { probeDisabledOnce: !0 }), N = p(), P = m(), F = E(t.BACKEND$PERSONAL_WORKSPACE), I = i(), L = I !== null, R = L && O.backend.kind === "cloud" ? O.backend : null, z = I ?? R?.host ?? "", B = E(L ? t.BACKEND$RECONNECT_CLOUD_TITLE : t.BACKEND$MANAGE_TITLE), [V, H] = y.useState(null), [U, W] = y.useState(null), [G, K] = y.useState(!1), q = () => {
-		V && (k(V.id), H(null));
-	}, J = y.useCallback((e) => {
+	let { t: E } = e("openhands"), { backends: D, active: O, removeBackend: k, setActive: A, updateBackend: j } = a(), M = h(D, { probeDisabledOnce: !0 }), N = f(), P = p(), F = E(t.BACKEND$PERSONAL_WORKSPACE), I = i(), L = I !== null, R = O.backend.authMode === "cookie", z = L && !R && O.backend.kind === "cloud" ? O.backend : null, B = I ?? z?.host ?? "", V = E(L && !R ? t.BACKEND$RECONNECT_CLOUD_TITLE : t.BACKEND$MANAGE_TITLE), [H, U] = y.useState(null), [W, G] = y.useState(null), [K, q] = y.useState(!1), J = () => {
+		H && (k(H.id), U(null));
+	}, Y = y.useCallback((e) => {
 		(O.backend.id !== e.id || O.orgId !== null) && A(e.id), w();
 	}, [
 		O.backend.id,
 		O.orgId,
 		w,
 		A
-	]), Y = y.useCallback((e, t) => {
+	]), X = y.useCallback((e, t) => {
 		j(e.id, { apiKey: t });
-	}, [j]), X = y.useCallback((e) => {
-		R && j(R.id, { apiKey: e });
-	}, [R, j]);
+	}, [j]), Z = y.useCallback((e) => {
+		z && j(z.id, { apiKey: e });
+	}, [z, j]);
 	return /* @__PURE__ */ S(b, { children: [
 		/* @__PURE__ */ x(o, {
 			onClose: T ? void 0 : w,
 			closeOnEscape: !T,
 			closeOnBackdropClick: !T,
-			"aria-label": B,
+			"aria-label": V,
 			children: /* @__PURE__ */ S("div", {
 				"data-testid": "manage-backends-modal",
 				className: r("relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl", c("lg"), s, "max-h-[70vh]"),
@@ -59,7 +59,7 @@ function w({ onClose: w, recoveryMode: T = !1 }) {
 						className: r("p-5", !T && "pr-12"),
 						children: /* @__PURE__ */ x("h2", {
 							className: l,
-							children: B
+							children: V
 						})
 					}),
 					/* @__PURE__ */ x("div", {
@@ -76,22 +76,22 @@ function w({ onClose: w, recoveryMode: T = !1 }) {
 									backend: e,
 									health: M[e.id],
 									orgLabel: C(e, N, P, F),
-									onSelect: () => J(e),
-									onEdit: () => W(e),
-									onRemove: () => H({
+									onSelect: () => Y(e),
+									onEdit: () => G(e),
+									onRemove: () => U({
 										id: e.id,
 										name: e.name
 									}),
-									onLogin: (t) => Y(e, t)
+									onLogin: e.authMode === "cookie" ? void 0 : (t) => X(e, t)
 								}, e.id))
 							})
 						})
 					}),
 					/* @__PURE__ */ S("div", {
 						className: "flex justify-end gap-2 p-5",
-						children: [L ? R ? /* @__PURE__ */ x(g, {
-							host: z,
-							onSuccess: X,
+						children: [L ? z ? /* @__PURE__ */ x(g, {
+							host: B,
+							onSuccess: Z,
 							testIdRoot: "manage-backends-reconnect-cloud",
 							idleButtonLabel: E(t.BACKEND$RECONNECT_CLOUD),
 							className: "w-full sm:w-auto",
@@ -100,7 +100,7 @@ function w({ onClose: w, recoveryMode: T = !1 }) {
 						}) : null : /* @__PURE__ */ x(d, {
 							type: "button",
 							variant: T ? "primary" : "secondary",
-							onClick: () => K(!0),
+							onClick: () => q(!0),
 							testId: "manage-backends-add",
 							startContent: /* @__PURE__ */ x(n, {
 								width: 14,
@@ -118,20 +118,20 @@ function w({ onClose: w, recoveryMode: T = !1 }) {
 				]
 			})
 		}),
-		G ? /* @__PURE__ */ x(_, {
+		K ? /* @__PURE__ */ x(_, {
 			mode: "add",
 			source: "manage_backends_modal",
-			onClose: () => K(!1)
+			onClose: () => q(!1)
 		}) : null,
-		U ? /* @__PURE__ */ x(_, {
+		W ? /* @__PURE__ */ x(_, {
 			mode: "edit",
-			backend: U,
-			onClose: () => W(null)
+			backend: W,
+			onClose: () => G(null)
 		}) : null,
-		V ? /* @__PURE__ */ x(f, {
-			text: E(t.BACKEND$REMOVE_CONFIRMATION, { name: V.name }),
-			onConfirm: q,
-			onCancel: () => H(null)
+		H ? /* @__PURE__ */ x(m, {
+			text: E(t.BACKEND$REMOVE_CONFIRMATION, { name: H.name }),
+			onConfirm: J,
+			onCancel: () => U(null)
 		}) : null
 	] });
 }

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=\"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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"}
+{"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  // Cookie-auth (OHE-hosted) backends have no API key to refresh — re-auth is\n  // the main-app login, so the device-flow reconnect controls don't apply.\n  const isCookieAuthBackend = active.backend.authMode === \"cookie\";\n  const lockedCloudBackend =\n    isLockedToCloud && !isCookieAuthBackend && active.backend.kind === \"cloud\"\n      ? active.backend\n      : null;\n  const lockedCloudReconnectHost =\n    lockedCloudHost ?? lockedCloudBackend?.host ?? \"\";\n  const modalTitle =\n    isLockedToCloud && !isCookieAuthBackend\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={\n                        backend.authMode === \"cookie\"\n                          ? undefined\n                          : (apiKey) => handleCloudLogin(backend, apiKey)\n                      }\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/canvas-extensions/add-canvas-extension-modal.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface AddCanvasExtensionModalProps {
+    onClose: () => void;
+}
+export declare function AddCanvasExtensionModal({ onClose, }: AddCanvasExtensionModalProps): React.JSX.Element;
+export {};

package/dist/components/features/canvas-extensions/canvas-extension-card.d.ts

@@ -0,0 +1,9 @@
+import type { InstalledCanvasExtensionInfo } from "#/types/canvas-extension";
+interface CanvasExtensionCardProps {
+    extension: InstalledCanvasExtensionInfo;
+    isBusy: boolean;
+    onToggle: () => void;
+    onUninstall: () => void;
+}
+export declare function CanvasExtensionCard({ extension, isBusy, onToggle, onUninstall, }: CanvasExtensionCardProps): import("react").JSX.Element;
+export {};

package/dist/components/features/canvas-extensions/canvas-extensions-runtime.cjs

@@ -0,0 +1,2 @@
+const e=require("../../../_virtual/_rolldown/runtime.cjs");require("../../../contexts/active-backend-context.cjs"),require("../../../api/canvas-extensions-service.cjs"),require("../../../hooks/query/use-canvas-extensions.cjs");let t=require("react");t=e.__toESM(t,1),require("react/jsx-runtime"),require("react-router");var n={pages:[],activating:!1,errors:new Map},r=t.default.createContext(n);function i(){return t.default.useContext(r)}exports.useCanvasExtensionsRuntime=i;
+//# sourceMappingURL=canvas-extensions-runtime.cjs.map

package/dist/components/features/canvas-extensions/canvas-extensions-runtime.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-extensions-runtime.cjs","names":[],"sources":["../../../../src/components/features/canvas-extensions/canvas-extensions-runtime.tsx"],"sourcesContent":["import React from \"react\";\nimport { useNavigate } from \"react-router\";\nimport CanvasExtensionsService from \"#/api/canvas-extensions-service\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { loadCanvasExtensionModule } from \"#/extensions/canvas-extension-module-loader\";\nimport { useCanvasExtensions } from \"#/hooks/query/use-canvas-extensions\";\nimport {\n  CANVAS_EXTENSION_HOST_API_VERSION,\n  type CanvasExtensionDispose,\n  type CanvasExtensionHost,\n  type CanvasExtensionModule,\n  type CanvasExtensionPageContribution,\n  type CanvasExtensionPageMount,\n  type InstalledCanvasExtensionInfo,\n} from \"#/types/canvas-extension\";\n\nexport interface RegisteredCanvasExtensionPage {\n  extension: InstalledCanvasExtensionInfo;\n  contribution: CanvasExtensionPageContribution;\n  mount: CanvasExtensionPageMount;\n  href: string;\n}\n\ninterface CanvasExtensionsRuntimeValue {\n  pages: RegisteredCanvasExtensionPage[];\n  activating: boolean;\n  errors: ReadonlyMap<string, string>;\n}\n\nconst EMPTY_RUNTIME: CanvasExtensionsRuntimeValue = {\n  pages: [],\n  activating: false,\n  errors: new Map(),\n};\n\nconst CanvasExtensionsRuntimeContext =\n  React.createContext<CanvasExtensionsRuntimeValue>(EMPTY_RUNTIME);\n\nexport function useCanvasExtensionsRuntime(): CanvasExtensionsRuntimeValue {\n  return React.useContext(CanvasExtensionsRuntimeContext);\n}\n\nfunction isValidSegment(value: string): boolean {\n  return /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(value);\n}\n\nexport function buildCanvasExtensionPageHref(\n  extensionName: string,\n  contributionPath: string,\n): string {\n  return `/extensions/${encodeURIComponent(extensionName)}/${contributionPath\n    .split(\"/\")\n    .map(encodeURIComponent)\n    .join(\"/\")}`;\n}\n\nfunction getDeclaredPage(\n  extension: InstalledCanvasExtensionInfo,\n  contributionId: string,\n): CanvasExtensionPageContribution {\n  const contribution = extension.manifest?.contributes?.pages?.find(\n    (page) => page.id === contributionId,\n  );\n  if (!contribution) {\n    throw new Error(\n      `Extension ${extension.name} registered undeclared page \"${contributionId}\".`,\n    );\n  }\n  // The backend declares page paths as absolute routes (e.g. \"/dashboard\");\n  // normalize to the relative form used for hrefs and route matching.\n  const normalizedPath = contribution.path.replace(/^\\/+/, \"\");\n  if (\n    !isValidSegment(extension.name) ||\n    !isValidSegment(contribution.id) ||\n    !normalizedPath.split(\"/\").every(isValidSegment)\n  ) {\n    throw new Error(\n      `Extension ${extension.name} has an invalid page name, id, or path.`,\n    );\n  }\n  return { ...contribution, path: normalizedPath };\n}\n\ntype CanvasExtensionModuleLoader = (\n  source: string,\n) => Promise<CanvasExtensionModule>;\n\ninterface CanvasExtensionsRuntimeProviderProps {\n  children: React.ReactNode;\n  /** Test seam for environments that cannot import browser Blob URLs. */\n  moduleLoader?: CanvasExtensionModuleLoader;\n}\n\nexport function CanvasExtensionsRuntimeProvider({\n  children,\n  moduleLoader = loadCanvasExtensionModule,\n}: CanvasExtensionsRuntimeProviderProps) {\n  const active = useActiveBackend();\n  const navigate = useNavigate();\n  const query = useCanvasExtensions();\n  const [pages, setPages] = React.useState<RegisteredCanvasExtensionPage[]>([]);\n  const [errors, setErrors] = React.useState<ReadonlyMap<string, string>>(\n    new Map(),\n  );\n  const [activating, setActivating] = React.useState(false);\n\n  const enabledExtensions = React.useMemo(\n    () => (query.data ?? []).filter((extension) => extension.enabled),\n    [query.data],\n  );\n\n  // `useActiveBackend` can synthesize a fresh `backend` object on every render\n  // (e.g. when mounted without an <ActiveBackendProvider>), and refetches\n  // produce new extension arrays with identical content. The activation effect\n  // therefore keys on this value signature — backend identity plus the enabled\n  // inventory — and reads the current objects from refs, so referential churn\n  // never tears down and re-activates extensions.\n  const activationSignature = React.useMemo(\n    () =>\n      JSON.stringify({\n        backendId: active.backend.id,\n        backendKind: active.backend.kind,\n        connectionRevision: active.backend.connectionRevision ?? 0,\n        orgId: active.orgId,\n        extensions: enabledExtensions.map((extension) => ({\n          name: extension.name,\n          version: extension.version,\n          resolvedRef: extension.resolved_ref ?? null,\n          pages: extension.manifest?.contributes?.pages ?? [],\n        })),\n      }),\n    [\n      active.backend.id,\n      active.backend.kind,\n      active.backend.connectionRevision,\n      active.orgId,\n      enabledExtensions,\n    ],\n  );\n  const activeRef = React.useRef(active);\n  activeRef.current = active;\n  const enabledExtensionsRef = React.useRef(enabledExtensions);\n  enabledExtensionsRef.current = enabledExtensions;\n\n  React.useEffect(() => {\n    let cancelled = false;\n    const disposers: CanvasExtensionDispose[] = [];\n    const { backend, orgId } = activeRef.current;\n    const extensionsToActivate = enabledExtensionsRef.current;\n    setPages([]);\n    setErrors(new Map());\n    setActivating(extensionsToActivate.length > 0);\n\n    const activateExtension = async (\n      extension: InstalledCanvasExtensionInfo,\n    ) => {\n      const registeredPages = new Map<string, RegisteredCanvasExtensionPage>();\n      const registrationDisposers: CanvasExtensionDispose[] = [];\n      try {\n        const source = await CanvasExtensionsService.fetchBundle(\n          extension.name,\n          backend,\n        );\n        if (cancelled) return;\n        const extensionModule = await moduleLoader(source);\n        if (cancelled) return;\n\n        const host: CanvasExtensionHost = {\n          apiVersion: CANVAS_EXTENSION_HOST_API_VERSION,\n          extension: Object.freeze({\n            name: extension.name,\n            version: extension.version,\n            resolvedRef: extension.resolved_ref ?? null,\n          }),\n          backend: Object.freeze({\n            id: backend.id,\n            kind: backend.kind,\n            orgId,\n          }),\n          registerPage: (contributionId, mount) => {\n            if (registeredPages.has(contributionId)) {\n              throw new Error(\n                `Extension ${extension.name} registered page \"${contributionId}\" more than once.`,\n              );\n            }\n            const contribution = getDeclaredPage(extension, contributionId);\n            const page: RegisteredCanvasExtensionPage = {\n              extension,\n              contribution,\n              mount,\n              href: buildCanvasExtensionPageHref(\n                extension.name,\n                contribution.path,\n              ),\n            };\n            registeredPages.set(contributionId, page);\n            const unregister = () => registeredPages.delete(contributionId);\n            registrationDisposers.push(unregister);\n            return unregister;\n          },\n          navigate: (path) => navigate(path),\n          agentServer: {\n            request: (request) =>\n              CanvasExtensionsService.requestAgentServer(request, backend),\n          },\n        };\n\n        const disposeActivation = await extensionModule.activate(host);\n        if (cancelled) {\n          if (typeof disposeActivation === \"function\") disposeActivation();\n          return;\n        }\n        if (typeof disposeActivation === \"function\") {\n          disposers.push(disposeActivation);\n        }\n        disposers.push(...registrationDisposers);\n        setPages((current) => [\n          ...current.filter((page) => page.extension.name !== extension.name),\n          ...registeredPages.values(),\n        ]);\n      } catch (error) {\n        registrationDisposers.forEach((dispose) => dispose());\n        if (cancelled) return;\n        const message =\n          error instanceof Error\n            ? error.message\n            : \"Extension activation failed.\";\n        setErrors((current) => {\n          const next = new Map(current);\n          next.set(extension.name, message);\n          return next;\n        });\n      }\n    };\n\n    void Promise.all(extensionsToActivate.map(activateExtension)).finally(\n      () => {\n        if (!cancelled) setActivating(false);\n      },\n    );\n\n    return () => {\n      cancelled = true;\n      setPages([]);\n      for (const dispose of disposers.reverse()) {\n        try {\n          dispose();\n        } catch (error) {\n          console.error(\"Canvas Extension cleanup failed\", error);\n        }\n      }\n    };\n  }, [activationSignature, moduleLoader, navigate]);\n\n  const value = React.useMemo(\n    () => ({ pages, activating, errors }),\n    [pages, activating, errors],\n  );\n\n  return (\n    <CanvasExtensionsRuntimeContext.Provider value={value}>\n      {children}\n    </CanvasExtensionsRuntimeContext.Provider>\n  );\n}\n"],"mappings":"gUA6BA,IAAM,EAA8C,CAClD,MAAO,CAAC,EACR,WAAY,GACZ,OAAQ,IAAI,GACd,EAEM,EACJ,EAAA,QAAM,cAA4C,CAAa,EAEjE,SAAgB,GAA2D,CACzE,OAAO,EAAA,QAAM,WAAW,CAA8B,CACxD"}

package/dist/components/features/canvas-extensions/canvas-extensions-runtime.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { type CanvasExtensionModule, type CanvasExtensionPageContribution, type CanvasExtensionPageMount, type InstalledCanvasExtensionInfo } from "#/types/canvas-extension";
+export interface RegisteredCanvasExtensionPage {
+    extension: InstalledCanvasExtensionInfo;
+    contribution: CanvasExtensionPageContribution;
+    mount: CanvasExtensionPageMount;
+    href: string;
+}
+interface CanvasExtensionsRuntimeValue {
+    pages: RegisteredCanvasExtensionPage[];
+    activating: boolean;
+    errors: ReadonlyMap<string, string>;
+}
+export declare function useCanvasExtensionsRuntime(): CanvasExtensionsRuntimeValue;
+export declare function buildCanvasExtensionPageHref(extensionName: string, contributionPath: string): string;
+type CanvasExtensionModuleLoader = (source: string) => Promise<CanvasExtensionModule>;
+interface CanvasExtensionsRuntimeProviderProps {
+    children: React.ReactNode;
+    /** Test seam for environments that cannot import browser Blob URLs. */
+    moduleLoader?: CanvasExtensionModuleLoader;
+}
+export declare function CanvasExtensionsRuntimeProvider({ children, moduleLoader, }: CanvasExtensionsRuntimeProviderProps): React.JSX.Element;
+export {};

package/dist/components/features/canvas-extensions/canvas-extensions-runtime.js

@@ -0,0 +1,19 @@
+import "../../../contexts/active-backend-context.js";
+import "../../../api/canvas-extensions-service.js";
+import "../../../hooks/query/use-canvas-extensions.js";
+import e from "react";
+import "react/jsx-runtime";
+import "react-router";
+//#region src/components/features/canvas-extensions/canvas-extensions-runtime.tsx
+var t = {
+	pages: [],
+	activating: !1,
+	errors: /* @__PURE__ */ new Map()
+}, n = e.createContext(t);
+function r() {
+	return e.useContext(n);
+}
+//#endregion
+export { r as useCanvasExtensionsRuntime };
+
+//# sourceMappingURL=canvas-extensions-runtime.js.map

package/dist/components/features/canvas-extensions/canvas-extensions-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-extensions-runtime.js","names":[],"sources":["../../../../src/components/features/canvas-extensions/canvas-extensions-runtime.tsx"],"sourcesContent":["import React from \"react\";\nimport { useNavigate } from \"react-router\";\nimport CanvasExtensionsService from \"#/api/canvas-extensions-service\";\nimport { useActiveBackend } from \"#/contexts/active-backend-context\";\nimport { loadCanvasExtensionModule } from \"#/extensions/canvas-extension-module-loader\";\nimport { useCanvasExtensions } from \"#/hooks/query/use-canvas-extensions\";\nimport {\n  CANVAS_EXTENSION_HOST_API_VERSION,\n  type CanvasExtensionDispose,\n  type CanvasExtensionHost,\n  type CanvasExtensionModule,\n  type CanvasExtensionPageContribution,\n  type CanvasExtensionPageMount,\n  type InstalledCanvasExtensionInfo,\n} from \"#/types/canvas-extension\";\n\nexport interface RegisteredCanvasExtensionPage {\n  extension: InstalledCanvasExtensionInfo;\n  contribution: CanvasExtensionPageContribution;\n  mount: CanvasExtensionPageMount;\n  href: string;\n}\n\ninterface CanvasExtensionsRuntimeValue {\n  pages: RegisteredCanvasExtensionPage[];\n  activating: boolean;\n  errors: ReadonlyMap<string, string>;\n}\n\nconst EMPTY_RUNTIME: CanvasExtensionsRuntimeValue = {\n  pages: [],\n  activating: false,\n  errors: new Map(),\n};\n\nconst CanvasExtensionsRuntimeContext =\n  React.createContext<CanvasExtensionsRuntimeValue>(EMPTY_RUNTIME);\n\nexport function useCanvasExtensionsRuntime(): CanvasExtensionsRuntimeValue {\n  return React.useContext(CanvasExtensionsRuntimeContext);\n}\n\nfunction isValidSegment(value: string): boolean {\n  return /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(value);\n}\n\nexport function buildCanvasExtensionPageHref(\n  extensionName: string,\n  contributionPath: string,\n): string {\n  return `/extensions/${encodeURIComponent(extensionName)}/${contributionPath\n    .split(\"/\")\n    .map(encodeURIComponent)\n    .join(\"/\")}`;\n}\n\nfunction getDeclaredPage(\n  extension: InstalledCanvasExtensionInfo,\n  contributionId: string,\n): CanvasExtensionPageContribution {\n  const contribution = extension.manifest?.contributes?.pages?.find(\n    (page) => page.id === contributionId,\n  );\n  if (!contribution) {\n    throw new Error(\n      `Extension ${extension.name} registered undeclared page \"${contributionId}\".`,\n    );\n  }\n  // The backend declares page paths as absolute routes (e.g. \"/dashboard\");\n  // normalize to the relative form used for hrefs and route matching.\n  const normalizedPath = contribution.path.replace(/^\\/+/, \"\");\n  if (\n    !isValidSegment(extension.name) ||\n    !isValidSegment(contribution.id) ||\n    !normalizedPath.split(\"/\").every(isValidSegment)\n  ) {\n    throw new Error(\n      `Extension ${extension.name} has an invalid page name, id, or path.`,\n    );\n  }\n  return { ...contribution, path: normalizedPath };\n}\n\ntype CanvasExtensionModuleLoader = (\n  source: string,\n) => Promise<CanvasExtensionModule>;\n\ninterface CanvasExtensionsRuntimeProviderProps {\n  children: React.ReactNode;\n  /** Test seam for environments that cannot import browser Blob URLs. */\n  moduleLoader?: CanvasExtensionModuleLoader;\n}\n\nexport function CanvasExtensionsRuntimeProvider({\n  children,\n  moduleLoader = loadCanvasExtensionModule,\n}: CanvasExtensionsRuntimeProviderProps) {\n  const active = useActiveBackend();\n  const navigate = useNavigate();\n  const query = useCanvasExtensions();\n  const [pages, setPages] = React.useState<RegisteredCanvasExtensionPage[]>([]);\n  const [errors, setErrors] = React.useState<ReadonlyMap<string, string>>(\n    new Map(),\n  );\n  const [activating, setActivating] = React.useState(false);\n\n  const enabledExtensions = React.useMemo(\n    () => (query.data ?? []).filter((extension) => extension.enabled),\n    [query.data],\n  );\n\n  // `useActiveBackend` can synthesize a fresh `backend` object on every render\n  // (e.g. when mounted without an <ActiveBackendProvider>), and refetches\n  // produce new extension arrays with identical content. The activation effect\n  // therefore keys on this value signature — backend identity plus the enabled\n  // inventory — and reads the current objects from refs, so referential churn\n  // never tears down and re-activates extensions.\n  const activationSignature = React.useMemo(\n    () =>\n      JSON.stringify({\n        backendId: active.backend.id,\n        backendKind: active.backend.kind,\n        connectionRevision: active.backend.connectionRevision ?? 0,\n        orgId: active.orgId,\n        extensions: enabledExtensions.map((extension) => ({\n          name: extension.name,\n          version: extension.version,\n          resolvedRef: extension.resolved_ref ?? null,\n          pages: extension.manifest?.contributes?.pages ?? [],\n        })),\n      }),\n    [\n      active.backend.id,\n      active.backend.kind,\n      active.backend.connectionRevision,\n      active.orgId,\n      enabledExtensions,\n    ],\n  );\n  const activeRef = React.useRef(active);\n  activeRef.current = active;\n  const enabledExtensionsRef = React.useRef(enabledExtensions);\n  enabledExtensionsRef.current = enabledExtensions;\n\n  React.useEffect(() => {\n    let cancelled = false;\n    const disposers: CanvasExtensionDispose[] = [];\n    const { backend, orgId } = activeRef.current;\n    const extensionsToActivate = enabledExtensionsRef.current;\n    setPages([]);\n    setErrors(new Map());\n    setActivating(extensionsToActivate.length > 0);\n\n    const activateExtension = async (\n      extension: InstalledCanvasExtensionInfo,\n    ) => {\n      const registeredPages = new Map<string, RegisteredCanvasExtensionPage>();\n      const registrationDisposers: CanvasExtensionDispose[] = [];\n      try {\n        const source = await CanvasExtensionsService.fetchBundle(\n          extension.name,\n          backend,\n        );\n        if (cancelled) return;\n        const extensionModule = await moduleLoader(source);\n        if (cancelled) return;\n\n        const host: CanvasExtensionHost = {\n          apiVersion: CANVAS_EXTENSION_HOST_API_VERSION,\n          extension: Object.freeze({\n            name: extension.name,\n            version: extension.version,\n            resolvedRef: extension.resolved_ref ?? null,\n          }),\n          backend: Object.freeze({\n            id: backend.id,\n            kind: backend.kind,\n            orgId,\n          }),\n          registerPage: (contributionId, mount) => {\n            if (registeredPages.has(contributionId)) {\n              throw new Error(\n                `Extension ${extension.name} registered page \"${contributionId}\" more than once.`,\n              );\n            }\n            const contribution = getDeclaredPage(extension, contributionId);\n            const page: RegisteredCanvasExtensionPage = {\n              extension,\n              contribution,\n              mount,\n              href: buildCanvasExtensionPageHref(\n                extension.name,\n                contribution.path,\n              ),\n            };\n            registeredPages.set(contributionId, page);\n            const unregister = () => registeredPages.delete(contributionId);\n            registrationDisposers.push(unregister);\n            return unregister;\n          },\n          navigate: (path) => navigate(path),\n          agentServer: {\n            request: (request) =>\n              CanvasExtensionsService.requestAgentServer(request, backend),\n          },\n        };\n\n        const disposeActivation = await extensionModule.activate(host);\n        if (cancelled) {\n          if (typeof disposeActivation === \"function\") disposeActivation();\n          return;\n        }\n        if (typeof disposeActivation === \"function\") {\n          disposers.push(disposeActivation);\n        }\n        disposers.push(...registrationDisposers);\n        setPages((current) => [\n          ...current.filter((page) => page.extension.name !== extension.name),\n          ...registeredPages.values(),\n        ]);\n      } catch (error) {\n        registrationDisposers.forEach((dispose) => dispose());\n        if (cancelled) return;\n        const message =\n          error instanceof Error\n            ? error.message\n            : \"Extension activation failed.\";\n        setErrors((current) => {\n          const next = new Map(current);\n          next.set(extension.name, message);\n          return next;\n        });\n      }\n    };\n\n    void Promise.all(extensionsToActivate.map(activateExtension)).finally(\n      () => {\n        if (!cancelled) setActivating(false);\n      },\n    );\n\n    return () => {\n      cancelled = true;\n      setPages([]);\n      for (const dispose of disposers.reverse()) {\n        try {\n          dispose();\n        } catch (error) {\n          console.error(\"Canvas Extension cleanup failed\", error);\n        }\n      }\n    };\n  }, [activationSignature, moduleLoader, navigate]);\n\n  const value = React.useMemo(\n    () => ({ pages, activating, errors }),\n    [pages, activating, errors],\n  );\n\n  return (\n    <CanvasExtensionsRuntimeContext.Provider value={value}>\n      {children}\n    </CanvasExtensionsRuntimeContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;AA6BA,IAAM,IAA8C;CAClD,OAAO,CAAC;CACR,YAAY;CACZ,wBAAQ,IAAI,IAAI;AAClB,GAEM,IACJ,EAAM,cAA4C,CAAa;AAEjE,SAAgB,IAA2D;CACzE,OAAO,EAAM,WAAW,CAA8B;AACxD"}

package/dist/components/features/chat/change-agent-button.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("../../../types/agent-state.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../hooks/use-conversation-id.cjs"),o=require("../../../stores/conversation-store.cjs"),s=require("../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs"),c=require("../../../hooks/query/use-active-conversation.cjs"),l=require("../../../hooks/use-agent-state.cjs"),u=require("../../../utils/form-control-classes.cjs"),d=require("../../shared/buttons/styled-tooltip.cjs"),f=require("../../../hooks/use-unified-websocket-status.cjs"),p=require("../../../hooks/query/use-sub-conversation-task-polling.cjs"),m=require("../../../ui/typography.cjs"),h=require("../../../ui/combobox-caret.cjs"),g=require("../../../icons/lesson-plan.cjs"),_=require("../../../icons/code-pill.cjs"),v=require("./change-agent-context-menu.cjs"),y=require("../../../hooks/use-handle-plan-click.cjs");let b=require("react");b=e.__toESM(b,1);let x=require("react/jsx-runtime");function S(){let[e,S]=(0,b.useState)(!1),{conversationMode:C,setConversationMode:w,subConversationTaskId:T}=o.useConversationStore(),{conversationId:E}=a.useOptionalConversationId(),D=!E,O=f.useUnifiedWebSocketStatus()===`OPEN`,{curAgentState:k}=l.useAgentState(),{t:A}=t.useTranslation(`openhands`),j=k===r.AgentState.RUNNING,{data:M}=c.useActiveConversation(),N=s.useQueryClient(),P=(0,b.useRef)(null),{taskStatus:F,subConversationId:I}=p.useSubConversationTaskPolling(T,M?.id||null);(0,b.useEffect)(()=>{F===`READY`&&I&&M?.id&&T&&P.current!==T&&(P.current=T,N.invalidateQueries({queryKey:[`user`,`conversation`,M.id]}))},[F,I,M?.id,T,N]);let{handlePlanClick:L,isCreatingConversation:R}=y.useHandlePlanClick();(0,b.useEffect)(()=>{(j||!O)&&e&&S(!1)},[j,e,O]);let z=D||j||R||!O;(0,b.useEffect)(()=>{if(z)return;let e=e=>{if(e.shiftKey&&e.key===`Tab`){e.preventDefault(),e.stopPropagation();let t=C===`code`?`plan`:`code`;t===`plan`?L(e):w(t)}};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[z,C,w,L]);let B=t=>{t.preventDefault(),t.stopPropagation(),S(!e)},V=e=>{e.preventDefault(),e.stopPropagation(),w(`code`)},H=C===`code`,U=(0,b.useMemo)(()=>A(H?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),[H,A]),W=(0,b.useMemo)(()=>H?(0,x.jsx)(_.CodePillIcon,{className:`h-[11px] w-[11px] shrink-0`}):(0,x.jsx)(g.default,{width:18,height:18,color:`currentColor`}),[H]),G=(0,x.jsxs)(`div`,{className:`relative`,children:[(0,x.jsxs)(`button`,{type:`button`,onClick:B,disabled:z,className:i.cn(`flex items-center rounded-[100px]`,u.formControlTransitionClassName,H?`border border-transparent text-[var(--oh-muted)]`:`border border-[#597FF4] bg-[#4A67BD]`,!z&&H&&i.cn(`cursor-pointer`,`hover:text-white hover:bg-white/10`),!z&&!H&&`cursor-pointer text-white hover:bg-[#597FF4]`,z&&i.cn(`opacity-50 cursor-not-allowed`,H&&`border-transparent`)),children:[(0,x.jsxs)(`div`,{className:`flex items-center gap-1 pl-1.5`,children:[W,(0,x.jsx)(m.Typography.Text,{className:`text-2.75 not-italic font-normal leading-5`,children:U})]}),(0,x.jsx)(h.ComboboxCaretInline,{isOpen:e})]}),e&&(0,x.jsx)(v.ChangeAgentContextMenu,{activeMode:C,onClose:()=>S(!1),onCodeClick:V,onPlanClick:L})]});return D?(0,x.jsx)(d.StyledTooltip,{content:A(n.I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),placement:`top`,children:G}):G}exports.ChangeAgentButton=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("../../../types/agent-state.cjs"),i=require("../../../utils/utils.cjs"),a=require("../../../hooks/use-conversation-id.cjs"),o=require("../../../stores/conversation-store.cjs"),s=require("../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs"),c=require("../../../hooks/query/use-active-conversation.cjs"),l=require("../../../hooks/use-agent-state.cjs"),u=require("../../shared/buttons/styled-tooltip.cjs"),d=require("../../../utils/form-control-classes.cjs"),f=require("../../../hooks/use-unified-websocket-status.cjs"),p=require("../../../hooks/query/use-sub-conversation-task-polling.cjs"),m=require("../../../ui/typography.cjs"),h=require("../../../ui/combobox-caret.cjs"),g=require("../../../icons/lesson-plan.cjs"),_=require("../../../icons/code-pill.cjs"),v=require("./change-agent-context-menu.cjs"),y=require("../../../hooks/use-handle-plan-click.cjs");let b=require("react");b=e.__toESM(b,1);let x=require("react/jsx-runtime");function S(){let[e,S]=(0,b.useState)(!1),{conversationMode:C,setConversationMode:w,subConversationTaskId:T}=o.useConversationStore(),{conversationId:E}=a.useOptionalConversationId(),D=!E,O=f.useUnifiedWebSocketStatus()===`OPEN`,{curAgentState:k}=l.useAgentState(),{t:A}=t.useTranslation(`openhands`),j=k===r.AgentState.RUNNING,{data:M}=c.useActiveConversation(),N=s.useQueryClient(),P=(0,b.useRef)(null),{taskStatus:F,subConversationId:I}=p.useSubConversationTaskPolling(T,M?.id||null);(0,b.useEffect)(()=>{F===`READY`&&I&&M?.id&&T&&P.current!==T&&(P.current=T,N.invalidateQueries({queryKey:[`user`,`conversation`,M.id]}))},[F,I,M?.id,T,N]);let{handlePlanClick:L,isCreatingConversation:R}=y.useHandlePlanClick();(0,b.useEffect)(()=>{(j||!O)&&e&&S(!1)},[j,e,O]);let z=D||j||R||!O;(0,b.useEffect)(()=>{if(z)return;let e=e=>{if(e.shiftKey&&e.key===`Tab`){e.preventDefault(),e.stopPropagation();let t=C===`code`?`plan`:`code`;t===`plan`?L(e):w(t)}};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[z,C,w,L]);let B=t=>{t.preventDefault(),t.stopPropagation(),S(!e)},V=e=>{e.preventDefault(),e.stopPropagation(),w(`code`)},H=C===`code`,U=(0,b.useMemo)(()=>A(H?n.I18nKey.COMMON$CODE:n.I18nKey.COMMON$PLAN),[H,A]),W=(0,b.useMemo)(()=>H?(0,x.jsx)(_.CodePillIcon,{className:`h-[11px] w-[11px] shrink-0`}):(0,x.jsx)(g.default,{width:18,height:18,color:`currentColor`}),[H]),G=(0,x.jsxs)(`div`,{className:`relative`,children:[(0,x.jsxs)(`button`,{type:`button`,onClick:B,disabled:z,className:i.cn(`flex items-center rounded-[100px]`,d.formControlTransitionClassName,H?`border border-transparent text-[var(--oh-muted)]`:`border border-[#597FF4] bg-[#4A67BD]`,!z&&H&&i.cn(`cursor-pointer`,`hover:text-white hover:bg-white/10`),!z&&!H&&`cursor-pointer text-white hover:bg-[#597FF4]`,z&&i.cn(`opacity-50 cursor-not-allowed`,H&&`border-transparent`)),children:[(0,x.jsxs)(`div`,{className:`flex items-center gap-1 pl-1.5`,children:[W,(0,x.jsx)(m.Typography.Text,{className:`text-2.75 not-italic font-normal leading-5`,children:U})]}),(0,x.jsx)(h.ComboboxCaretInline,{isOpen:e})]}),e&&(0,x.jsx)(v.ChangeAgentContextMenu,{activeMode:C,onClose:()=>S(!1),onCodeClick:V,onPlanClick:L})]});return D?(0,x.jsx)(u.StyledTooltip,{content:A(n.I18nKey.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),placement:`top`,children:G}):G}exports.ChangeAgentButton=S;
 //# sourceMappingURL=change-agent-button.cjs.map

package/dist/components/features/chat/change-agent-button.js

@@ -7,8 +7,8 @@ import { useConversationStore as a } from "../../../stores/conversation-store.js
 import { useQueryClient as o } from "../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js";
 import { useActiveConversation as s } from "../../../hooks/query/use-active-conversation.js";
 import { useAgentState as c } from "../../../hooks/use-agent-state.js";
-import { formControlTransitionClassName as l } from "../../../utils/form-control-classes.js";
-import { StyledTooltip as u } from "../../shared/buttons/styled-tooltip.js";
+import { StyledTooltip as l } from "../../shared/buttons/styled-tooltip.js";
+import { formControlTransitionClassName as u } from "../../../utils/form-control-classes.js";
 import { useUnifiedWebSocketStatus as d } from "../../../hooks/use-unified-websocket-status.js";
 import { useSubConversationTaskPolling as f } from "../../../hooks/query/use-sub-conversation-task-polling.js";
 import { Typography as p } from "../../../ui/typography.js";
@@ -76,7 +76,7 @@ function T() {
 			type: "button",
 			onClick: W,
 			disabled: U,
-			className: r("flex items-center rounded-[100px]", l, K ? "border border-transparent text-[var(--oh-muted)]" : "border border-[#597FF4] bg-[#4A67BD]", !U && K && r("cursor-pointer", "hover:text-white hover:bg-white/10"), !U && !K && "cursor-pointer text-white hover:bg-[#597FF4]", U && r("opacity-50 cursor-not-allowed", K && "border-transparent")),
+			className: r("flex items-center rounded-[100px]", u, K ? "border border-transparent text-[var(--oh-muted)]" : "border border-[#597FF4] bg-[#4A67BD]", !U && K && r("cursor-pointer", "hover:text-white hover:bg-white/10"), !U && !K && "cursor-pointer text-white hover:bg-[#597FF4]", U && r("opacity-50 cursor-not-allowed", K && "border-transparent")),
 			children: [/* @__PURE__ */ w("div", {
 				className: "flex items-center gap-1 pl-1.5",
 				children: [J, /* @__PURE__ */ C(p.Text, {
@@ -91,7 +91,7 @@ function T() {
 			onPlanClick: V
 		})]
 	});
-	return j ? /* @__PURE__ */ C(u, {
+	return j ? /* @__PURE__ */ C(l, {
 		content: P(t.CHANGE_AGENT$SWITCH_AFTER_CONVERSATION),
 		placement: "top",
 		children: Y

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