@openhands/agent-canvas 1.9.0 → 1.11.0

package/dist/components/features/settings/agent-canvas-update-card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"agent-canvas-update-card.cjs","names":[],"sources":["../../../../src/components/features/settings/agent-canvas-update-card.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  ChevronDown,\n  ChevronUp,\n  CircleCheck,\n  ExternalLink,\n  Info,\n  RefreshCw,\n} from \"lucide-react\";\nimport {\n  AGENT_CANVAS_RELEASE_NOTES_URL,\n  AGENT_CANVAS_UPDATE_COMMANDS,\n} from \"#/api/agent-canvas-updates\";\nimport { compareAgentServerVersions } from \"#/api/agent-server-compatibility\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { AGENT_CANVAS_CLIENT_VERSION } from \"#/api/client-source\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { CopyToClipboardButton } from \"#/components/shared/buttons/copy-to-clipboard-button\";\nimport { useLatestAgentCanvasVersion } from \"#/hooks/query/use-latest-agent-canvas-version\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\nfunction UpdateCommandRow({\n  command,\n  testId,\n}: {\n  command: string;\n  testId: string;\n}) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(command);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <div className=\"flex items-center gap-2 rounded-lg bg-[var(--oh-surface-deep)] px-2 py-1.5\">\n      <code\n        data-testid={testId}\n        className=\"min-w-0 flex-1 select-all break-all font-mono text-[11px] leading-4 text-white\"\n      >\n        {command}\n      </code>\n      <CopyToClipboardButton\n        isHidden={false}\n        isDisabled={false}\n        onClick={handleCopy}\n        mode={copied ? \"copied\" : \"copy\"}\n      />\n    </div>\n  );\n}\n\n/**\n * Information-only version/update card for the settings navigation surfaces.\n * Never blocks or toasts; check failures degrade to a quiet inline message.\n * Hidden in locked-to-Cloud deployments — the hosted canvas has no npm/docker\n * install to update.\n */\nexport function AgentCanvasUpdateCard() {\n  const { t } = useTranslation(\"openhands\");\n  const [expanded, setExpanded] = useState(false);\n  // The card is mounted on multiple settings surfaces at once; ids must not\n  // collide across instances.\n  const detailsId = useId();\n  const isLockedToCloud = getLockedCloudHost() !== null;\n  const latestVersionQuery = useLatestAgentCanvasVersion({\n    enabled: !isLockedToCloud,\n  });\n\n  if (isLockedToCloud) return null;\n\n  const latestVersion = latestVersionQuery.data;\n  const comparison =\n    latestVersion !== undefined\n      ? compareAgentServerVersions(latestVersion, AGENT_CANVAS_CLIENT_VERSION)\n      : null;\n  const updateAvailable = comparison === 1;\n  // 0 or -1: running the npm latest or newer (local dev build).\n  const upToDate = comparison !== null && comparison <= 0;\n  const ChevronIcon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <section\n      data-testid=\"agent-canvas-update-card\"\n      className=\"flex flex-col gap-2 rounded-xl border border-[var(--oh-border)] bg-[var(--oh-surface-raised)] p-3\"\n    >\n      <button\n        type=\"button\"\n        onClick={() => setExpanded((prev) => !prev)}\n        aria-expanded={expanded}\n        aria-controls={detailsId}\n        data-testid=\"agent-canvas-update-toggle\"\n        className=\"flex w-full cursor-pointer items-center gap-2 text-left\"\n      >\n        <span className=\"flex-1 truncate text-xs font-medium text-white\">\n          {t(I18nKey.SETTINGS$APP_UPDATE_CARD_TITLE)}\n        </span>\n        {comparison !== null && (\n          <span\n            data-testid=\"agent-canvas-update-badge\"\n            className={cn(\n              \"inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none\",\n              updateAvailable ? \"text-warning\" : \"text-success\",\n            )}\n          >\n            {t(\n              updateAvailable\n                ? I18nKey.SETTINGS$APP_UPDATE_BADGE_UPDATE_AVAILABLE\n                : I18nKey.SETTINGS$APP_UPDATE_BADGE_UP_TO_DATE,\n            )}\n          </span>\n        )}\n        <ChevronIcon\n          className=\"size-4 shrink-0 text-[var(--oh-muted)]\"\n          aria-hidden\n        />\n      </button>\n\n      <div className=\"flex items-center justify-between text-xs\">\n        <span className=\"text-[var(--oh-text-dim)]\">\n          {t(I18nKey.SETTINGS$APP_UPDATE_VERSION_LABEL)}\n        </span>\n        <span className=\"font-mono text-white\">\n          {AGENT_CANVAS_CLIENT_VERSION}\n        </span>\n      </div>\n\n      {expanded && (\n        <div id={detailsId} className=\"flex flex-col gap-3 pt-1\">\n          <div\n            data-testid=\"agent-canvas-update-status\"\n            className=\"flex items-start gap-2 text-xs\"\n          >\n            {latestVersionQuery.isPending ? (\n              <span className=\"text-[var(--oh-muted)]\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_CHECKING)}\n              </span>\n            ) : updateAvailable ? (\n              <>\n                <Info className=\"size-4 shrink-0 text-warning\" aria-hidden />\n                <span className=\"text-warning\">\n                  {t(I18nKey.SETTINGS$APP_UPDATE_AVAILABLE_MESSAGE, {\n                    version: latestVersion,\n                  })}\n                </span>\n              </>\n            ) : upToDate ? (\n              <>\n                <CircleCheck\n                  className=\"size-4 shrink-0 text-success\"\n                  aria-hidden\n                />\n                <span className=\"text-success\">\n                  {t(I18nKey.SETTINGS$APP_UPDATE_LATEST_MESSAGE)}\n                </span>\n              </>\n            ) : (\n              <span className=\"text-[var(--oh-muted)]\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_CHECK_FAILED)}\n              </span>\n            )}\n          </div>\n\n          <BrandButton\n            testId=\"agent-canvas-update-check-button\"\n            type=\"button\"\n            variant=\"secondary\"\n            className=\"w-full\"\n            isDisabled={latestVersionQuery.isFetching}\n            aria-busy={latestVersionQuery.isFetching}\n            onClick={() => latestVersionQuery.refetch()}\n            startContent={\n              <RefreshCw\n                className={cn(\n                  \"size-4\",\n                  latestVersionQuery.isFetching && \"animate-spin\",\n                )}\n                aria-hidden\n              />\n            }\n          >\n            {t(I18nKey.SETTINGS$APP_UPDATE_CHECK_BUTTON)}\n          </BrandButton>\n\n          <div className=\"flex flex-col gap-2 rounded-lg border border-[var(--oh-border-subtle)] p-3 text-xs\">\n            <div className=\"flex items-center gap-1.5 text-white\">\n              <Info className=\"size-4 shrink-0\" aria-hidden />\n              <span className=\"font-medium\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_HOW_TO_UPDATE)}\n              </span>\n            </div>\n            <span className=\"text-[var(--oh-text-dim)]\">\n              {t(I18nKey.SETTINGS$APP_UPDATE_RUN_COMMANDS)}\n            </span>\n            <UpdateCommandRow\n              command={AGENT_CANVAS_UPDATE_COMMANDS.npm}\n              testId=\"agent-canvas-update-command-npm\"\n            />\n            <span className=\"text-center text-[var(--oh-text-dim)]\">\n              {t(I18nKey.SETTINGS$APP_UPDATE_OR)}\n            </span>\n            <UpdateCommandRow\n              command={AGENT_CANVAS_UPDATE_COMMANDS.docker}\n              testId=\"agent-canvas-update-command-docker\"\n            />\n          </div>\n\n          <a\n            data-testid=\"agent-canvas-update-release-notes\"\n            href={AGENT_CANVAS_RELEASE_NOTES_URL}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"inline-flex items-center gap-1 self-start text-xs text-[var(--oh-accent)] underline\"\n          >\n            {t(I18nKey.SETTINGS$APP_UPDATE_RELEASE_NOTES)}\n            <ExternalLink size={12} aria-hidden />\n          </a>\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"agent-canvas-update-card.cjs","names":[],"sources":["../../../../src/components/features/settings/agent-canvas-update-card.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  ArrowUpCircle,\n  Check,\n  CircleCheck,\n  Copy,\n  ExternalLink,\n  RefreshCw,\n} from \"lucide-react\";\nimport {\n  AGENT_CANVAS_RELEASE_NOTES_URL,\n  AGENT_CANVAS_UPDATE_COMMANDS,\n} from \"#/api/agent-canvas-updates\";\nimport { compareAgentServerVersions } from \"#/api/agent-server-compatibility\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { AGENT_CANVAS_CLIENT_VERSION } from \"#/api/client-source\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { BaseModalTitle } from \"#/components/shared/modals/confirmation-modals/base-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useLatestAgentCanvasVersion } from \"#/hooks/query/use-latest-agent-canvas-version\";\nimport DockerIcon from \"#/icons/docker.svg?react\";\nimport NpmIcon from \"#/icons/npm.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\nconst COPY_FEEDBACK_MS = 2000;\n\ntype UpdateCommandTab = \"npm\" | \"docker\";\n\nconst UPDATE_COMMAND_TABS: UpdateCommandTab[] = [\"npm\", \"docker\"];\n\nfunction getUpdateCommandTabLabelKey(tab: UpdateCommandTab): I18nKey {\n  return tab === \"npm\"\n    ? I18nKey.SETTINGS$VERSION_NPM_RECOMMENDED\n    : I18nKey.SETTINGS$VERSION_DOCKER;\n}\n\nfunction UpdateCommandTabIcon({ tab }: { tab: UpdateCommandTab }) {\n  if (tab === \"npm\") {\n    return <NpmIcon className=\"size-4 shrink-0\" aria-hidden />;\n  }\n  return <DockerIcon className=\"size-5 shrink-0\" aria-hidden />;\n}\n\nfunction UpdateCommandTabs() {\n  const { t } = useTranslation(\"openhands\");\n  const [selectedTab, setSelectedTab] = useState<UpdateCommandTab>(\"npm\");\n  const [copied, setCopied] = useState(false);\n  const copiedTimeoutRef = useRef<number | null>(null);\n  const command =\n    selectedTab === \"npm\"\n      ? AGENT_CANVAS_UPDATE_COMMANDS.npm\n      : AGENT_CANVAS_UPDATE_COMMANDS.docker;\n\n  useEffect(\n    () => () => {\n      if (copiedTimeoutRef.current !== null) {\n        window.clearTimeout(copiedTimeoutRef.current);\n      }\n    },\n    [],\n  );\n\n  useEffect(() => {\n    setCopied(false);\n    if (copiedTimeoutRef.current !== null) {\n      window.clearTimeout(copiedTimeoutRef.current);\n      copiedTimeoutRef.current = null;\n    }\n  }, [selectedTab]);\n\n  const copyCommand = useCallback(() => {\n    void navigator.clipboard?.writeText(command);\n    setCopied(true);\n    if (copiedTimeoutRef.current !== null) {\n      window.clearTimeout(copiedTimeoutRef.current);\n    }\n    copiedTimeoutRef.current = window.setTimeout(() => {\n      setCopied(false);\n      copiedTimeoutRef.current = null;\n    }, COPY_FEEDBACK_MS);\n  }, [command]);\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex justify-center\">\n        {UPDATE_COMMAND_TABS.map((tab) => (\n          <button\n            key={tab}\n            type=\"button\"\n            onClick={() => setSelectedTab(tab)}\n            className={cn(\n              \"inline-flex items-center gap-1.5 px-3 pb-2 text-sm font-medium\",\n              selectedTab === tab\n                ? \"border-b border-white text-white\"\n                : \"text-[var(--oh-muted)] hover:text-white\",\n            )}\n          >\n            <UpdateCommandTabIcon tab={tab} />\n            {t(getUpdateCommandTabLabelKey(tab))}\n          </button>\n        ))}\n      </div>\n      <div className=\"flex items-center gap-3 rounded-lg border border-[var(--oh-border)] bg-[var(--oh-surface-deep)] px-4 py-3\">\n        <code\n          data-testid={\n            selectedTab === \"npm\"\n              ? \"agent-canvas-update-command-npm\"\n              : \"agent-canvas-update-command-docker\"\n          }\n          className=\"min-w-0 flex-1 overflow-visible whitespace-nowrap font-mono text-sm text-white\"\n        >\n          {command}\n        </code>\n        <button\n          type=\"button\"\n          data-testid=\"copy-to-clipboard\"\n          onClick={copyCommand}\n          aria-label={t(\n            copied\n              ? I18nKey.BUTTON$COPIED\n              : I18nKey.SETTINGS$VERSION_COPY_COMMAND,\n          )}\n          disabled={copied}\n          className=\"shrink-0 text-[var(--oh-muted)] hover:text-white disabled:hover:text-[var(--oh-muted)]\"\n        >\n          {copied ? (\n            <Check\n              className=\"size-4 text-[var(--oh-status-success)]\"\n              aria-hidden\n            />\n          ) : (\n            <Copy className=\"size-4\" aria-hidden />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n}\n\ninterface AgentCanvasUpdateModalProps {\n  onClose: () => void;\n  latestVersion: string | undefined;\n  isPending: boolean;\n  isFetching: boolean;\n  updateAvailable: boolean;\n  upToDate: boolean;\n  onCheckForUpdates: () => void;\n}\n\nfunction AgentCanvasUpdateModal({\n  onClose,\n  latestVersion,\n  isPending,\n  isFetching,\n  updateAvailable,\n  upToDate,\n  onCheckForUpdates,\n}: AgentCanvasUpdateModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <ModalBackdrop onClose={onClose}>\n      <ModalBody\n        width=\"md\"\n        className=\"relative flex max-h-[80vh] flex-col items-start overflow-auto border border-[var(--oh-border)]\"\n        testID=\"agent-canvas-update-modal\"\n      >\n        <ModalCloseButton\n          onClose={onClose}\n          testId=\"close-agent-canvas-update-modal\"\n        />\n        <div className=\"flex w-full flex-col gap-2 pr-10\">\n          <BaseModalTitle title={t(I18nKey.SETTINGS$APP_UPDATE_CARD_TITLE)} />\n          <div className=\"flex items-center gap-1.5 text-xs\">\n            <span className=\"text-[var(--oh-text-dim)]\">\n              {t(I18nKey.SETTINGS$APP_UPDATE_VERSION_LABEL)}\n            </span>\n            <span className=\"text-white\">{AGENT_CANVAS_CLIENT_VERSION}</span>\n          </div>\n        </div>\n\n        <div className=\"flex w-full flex-col gap-3\">\n          <BrandButton\n            testId=\"agent-canvas-update-check-button\"\n            type=\"button\"\n            variant=\"secondary\"\n            className=\"w-full\"\n            isDisabled={isFetching}\n            aria-busy={isFetching}\n            onClick={onCheckForUpdates}\n            startContent={\n              <RefreshCw\n                className={cn(\"size-4\", isFetching && \"animate-spin\")}\n                aria-hidden\n              />\n            }\n          >\n            {t(I18nKey.SETTINGS$APP_UPDATE_CHECK_BUTTON)}\n          </BrandButton>\n\n          <div data-testid=\"agent-canvas-update-status\" className=\"w-full\">\n            {isPending || isFetching ? (\n              <span className=\"text-xs text-[var(--oh-muted)]\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_CHECKING)}\n              </span>\n            ) : updateAvailable ? (\n              <div className=\"flex items-start gap-2 rounded-lg border border-[#3B82F6]/30 bg-[#1E3A5F] px-3 py-2 text-xs text-[#3B82F6]\">\n                <ArrowUpCircle className=\"size-4 shrink-0\" aria-hidden />\n                <span>\n                  {t(I18nKey.SETTINGS$APP_UPDATE_AVAILABLE_MESSAGE, {\n                    version: latestVersion,\n                  })}{\" \"}\n                  <a\n                    data-testid=\"agent-canvas-update-release-notes\"\n                    href={AGENT_CANVAS_RELEASE_NOTES_URL}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"inline-flex items-center gap-1.5 whitespace-nowrap font-medium text-white hover:text-[var(--oh-text)]\"\n                  >\n                    {t(I18nKey.SETTINGS$VERSION_RELEASE_NOTES)}\n                    <ExternalLink className=\"size-3.5 shrink-0\" aria-hidden />\n                  </a>\n                </span>\n              </div>\n            ) : upToDate ? (\n              <div className=\"flex items-start gap-2 rounded-lg border border-[var(--oh-status-success)]/30 bg-[var(--oh-status-success)]/10 px-3 py-2 text-xs text-[var(--oh-status-success)]\">\n                <CircleCheck className=\"size-4 shrink-0\" aria-hidden />\n                <span>\n                  {t(I18nKey.SETTINGS$APP_UPDATE_LATEST_MESSAGE)}{\" \"}\n                  <a\n                    data-testid=\"agent-canvas-update-release-notes\"\n                    href={AGENT_CANVAS_RELEASE_NOTES_URL}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"inline-flex items-center gap-1.5 whitespace-nowrap font-medium text-white hover:text-[var(--oh-text)]\"\n                  >\n                    {t(I18nKey.SETTINGS$VERSION_RELEASE_NOTES)}\n                    <ExternalLink className=\"size-3.5 shrink-0\" aria-hidden />\n                  </a>\n                </span>\n              </div>\n            ) : (\n              <span className=\"text-xs text-[var(--oh-muted)]\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_CHECK_FAILED)}\n              </span>\n            )}\n          </div>\n\n          {updateAvailable ? (\n            <div className=\"flex w-full flex-col border-t border-[var(--oh-border)] pt-3\">\n              <span className=\"text-sm font-medium text-white\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_HOW_TO_UPDATE)}\n              </span>\n              <span className=\"mt-1 mb-4 text-sm text-[var(--oh-text-dim)]\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_RUN_COMMANDS)}\n              </span>\n              <UpdateCommandTabs />\n            </div>\n          ) : null}\n        </div>\n      </ModalBody>\n    </ModalBackdrop>\n  );\n}\n\ninterface AgentCanvasUpdateCardProps {\n  /** When true, omit the card unless an update is available (main sidebar). */\n  hideWhenUpToDate?: boolean;\n}\n\n/**\n * Information-only version/update card for settings and the main sidebar.\n * Opens update details in a modal. Never blocks or toasts; check failures\n * degrade to a quiet inline message. Hidden in locked-to-Cloud deployments —\n * the hosted canvas has no npm/docker install to update.\n */\nexport function AgentCanvasUpdateCard({\n  hideWhenUpToDate = false,\n}: AgentCanvasUpdateCardProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const isLockedToCloud = getLockedCloudHost() !== null;\n  const latestVersionQuery = useLatestAgentCanvasVersion({\n    enabled: !isLockedToCloud,\n  });\n\n  if (isLockedToCloud) return null;\n\n  const latestVersion = latestVersionQuery.data;\n  const comparison =\n    latestVersion !== undefined\n      ? compareAgentServerVersions(latestVersion, AGENT_CANVAS_CLIENT_VERSION)\n      : null;\n  const updateAvailable = comparison === 1;\n  // 0 or -1: running the npm latest or newer (local dev build).\n  const upToDate = comparison !== null && comparison <= 0;\n\n  if (hideWhenUpToDate && !updateAvailable) return null;\n\n  return (\n    <>\n      <section data-testid=\"agent-canvas-update-card\">\n        <button\n          type=\"button\"\n          onClick={() => setIsModalOpen(true)}\n          aria-haspopup=\"dialog\"\n          data-testid=\"agent-canvas-update-toggle\"\n          className=\"flex w-full cursor-pointer flex-col gap-1 rounded-md border border-[var(--oh-border)] bg-base-secondary px-3 py-2 text-left hover:bg-[var(--oh-surface-raised)]\"\n        >\n          <span className=\"flex w-full items-center gap-2\">\n            <span className=\"flex-1 truncate text-sm font-semibold leading-5 text-white\">\n              {t(I18nKey.SETTINGS$APP_UPDATE_CARD_TITLE)}\n            </span>\n            {comparison !== null && (\n              <span\n                data-testid=\"agent-canvas-update-badge\"\n                className={cn(\n                  \"inline-flex shrink-0 items-center gap-1 text-[10px] font-medium leading-none\",\n                  updateAvailable\n                    ? \"rounded-full border border-transparent bg-[#1E3A5F] px-1.5 py-0.5 text-[#3B82F6]\"\n                    : \"text-success\",\n                )}\n              >\n                {updateAvailable ? (\n                  <ArrowUpCircle className=\"size-3 shrink-0\" aria-hidden />\n                ) : (\n                  <CircleCheck className=\"size-3 shrink-0\" aria-hidden />\n                )}\n                {t(\n                  updateAvailable\n                    ? I18nKey.SETTINGS$APP_UPDATE_BADGE_UPDATE_AVAILABLE\n                    : I18nKey.SETTINGS$APP_UPDATE_BADGE_UP_TO_DATE,\n                )}\n              </span>\n            )}\n          </span>\n\n          <span className=\"flex items-center gap-1.5 text-xs leading-5 text-[var(--oh-muted)]\">\n            <span>{t(I18nKey.SETTINGS$APP_UPDATE_VERSION_LABEL)}</span>\n            <span className=\"text-white\">{AGENT_CANVAS_CLIENT_VERSION}</span>\n          </span>\n        </button>\n      </section>\n\n      {isModalOpen && (\n        <AgentCanvasUpdateModal\n          onClose={() => setIsModalOpen(false)}\n          latestVersion={latestVersion}\n          isPending={latestVersionQuery.isPending}\n          isFetching={latestVersionQuery.isFetching}\n          updateAvailable={updateAvailable}\n          upToDate={upToDate}\n          onCheckForUpdates={() => latestVersionQuery.refetch()}\n        />\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/settings/agent-canvas-update-card.d.ts

@@ -1,7 +1,12 @@
+interface AgentCanvasUpdateCardProps {
+    /** When true, omit the card unless an update is available (main sidebar). */
+    hideWhenUpToDate?: boolean;
+}
 /**
- * Information-only version/update card for the settings navigation surfaces.
- * Never blocks or toasts; check failures degrade to a quiet inline message.
- * Hidden in locked-to-Cloud deployments — the hosted canvas has no npm/docker
- * install to update.
+ * Information-only version/update card for settings and the main sidebar.
+ * Opens update details in a modal. Never blocks or toasts; check failures
+ * degrade to a quiet inline message. Hidden in locked-to-Cloud deployments —
+ * the hosted canvas has no npm/docker install to update.
  */
-export declare function AgentCanvasUpdateCard(): import("react/jsx-runtime").JSX.Element | null;
+export declare function AgentCanvasUpdateCard({ hideWhenUpToDate, }: AgentCanvasUpdateCardProps): import("react").JSX.Element | null;
+export {};

package/dist/components/features/settings/agent-canvas-update-card.js

@@ -1,170 +1,244 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
-import { ChevronDown as n } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
-import { ChevronUp as r } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-up.js";
+import { Check as n } from "../../../node_modules/lucide-react/dist/esm/icons/check.js";
+import { CircleArrowUp as r } from "../../../node_modules/lucide-react/dist/esm/icons/circle-arrow-up.js";
 import { CircleCheck as i } from "../../../node_modules/lucide-react/dist/esm/icons/circle-check.js";
-import { ExternalLink as a } from "../../../node_modules/lucide-react/dist/esm/icons/external-link.js";
-import { Info as o } from "../../../node_modules/lucide-react/dist/esm/icons/info.js";
+import { Copy as a } from "../../../node_modules/lucide-react/dist/esm/icons/copy.js";
+import { ExternalLink as o } from "../../../node_modules/lucide-react/dist/esm/icons/external-link.js";
 import { RefreshCw as s } from "../../../node_modules/lucide-react/dist/esm/icons/refresh-cw.js";
 import { cn as c } from "../../../utils/utils.js";
 import { getLockedCloudHost as l } from "../../../api/agent-server-config.js";
 import { compareAgentServerVersions as u } from "../../../api/agent-server-compatibility.js";
 import { AGENT_CANVAS_CLIENT_VERSION as d } from "../../../api/client-source.js";
-import { CopyToClipboardButton as f } from "../../shared/buttons/copy-to-clipboard-button.js";
-import { BrandButton as p } from "./brand-button.js";
-import { AGENT_CANVAS_UPDATE_COMMANDS as m } from "../../../api/agent-canvas-updates.js";
-import { useLatestAgentCanvasVersion as h } from "../../../hooks/query/use-latest-agent-canvas-version.js";
-import { useId as g, useState as _ } from "react";
-import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { ModalBackdrop as f } from "../../shared/modals/modal-backdrop.js";
+import { ModalBody as p } from "../../shared/modals/modal-body.js";
+import { BaseModalTitle as m } from "../../shared/modals/confirmation-modals/base-modal.js";
+import { ModalCloseButton as h } from "../../shared/modals/modal-close-button.js";
+import { BrandButton as g } from "./brand-button.js";
+import { AGENT_CANVAS_RELEASE_NOTES_URL as _, AGENT_CANVAS_UPDATE_COMMANDS as v } from "../../../api/agent-canvas-updates.js";
+import { useLatestAgentCanvasVersion as y } from "../../../hooks/query/use-latest-agent-canvas-version.js";
+import b from "../../../icons/docker.js";
+import x from "../../../icons/npm.js";
+import { useCallback as S, useEffect as C, useRef as w, useState as T } from "react";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
 //#region src/components/features/settings/agent-canvas-update-card.tsx
-function x({ command: e, testId: t }) {
-	let [n, r] = _(!1);
-	return /* @__PURE__ */ b("div", {
-		className: "flex items-center gap-2 rounded-lg bg-[var(--oh-surface-deep)] px-2 py-1.5",
-		children: [/* @__PURE__ */ y("code", {
-			"data-testid": t,
-			className: "min-w-0 flex-1 select-all break-all font-mono text-[11px] leading-4 text-white",
-			children: e
-		}), /* @__PURE__ */ y(f, {
-			isHidden: !1,
-			isDisabled: !1,
-			onClick: () => {
-				navigator.clipboard.writeText(e), r(!0), setTimeout(() => r(!1), 2e3);
-			},
-			mode: n ? "copied" : "copy"
-		})]
+var k = 2e3, A = ["npm", "docker"];
+function j(e) {
+	return e === "npm" ? t.SETTINGS$VERSION_NPM_RECOMMENDED : t.SETTINGS$VERSION_DOCKER;
+}
+function M({ tab: e }) {
+	return e === "npm" ? /* @__PURE__ */ D(x, {
+		className: "size-4 shrink-0",
+		"aria-hidden": !0
+	}) : /* @__PURE__ */ D(b, {
+		className: "size-5 shrink-0",
+		"aria-hidden": !0
 	});
 }
-function S() {
-	let { t: f } = e("openhands"), [S, C] = _(!1), w = g(), T = l() !== null, E = h({ enabled: !T });
-	if (T) return null;
-	let D = E.data, O = D === void 0 ? null : u(D, d), k = O === 1, A = O !== null && O <= 0, j = S ? r : n;
-	return /* @__PURE__ */ b("section", {
-		"data-testid": "agent-canvas-update-card",
-		className: "flex flex-col gap-2 rounded-xl border border-[var(--oh-border)] bg-[var(--oh-surface-raised)] p-3",
-		children: [
-			/* @__PURE__ */ b("button", {
+function N() {
+	let { t: r } = e("openhands"), [i, o] = T("npm"), [s, l] = T(!1), u = w(null), d = i === "npm" ? v.npm : v.docker;
+	C(() => () => {
+		u.current !== null && window.clearTimeout(u.current);
+	}, []), C(() => {
+		l(!1), u.current !== null && (window.clearTimeout(u.current), u.current = null);
+	}, [i]);
+	let f = S(() => {
+		navigator.clipboard?.writeText(d), l(!0), u.current !== null && window.clearTimeout(u.current), u.current = window.setTimeout(() => {
+			l(!1), u.current = null;
+		}, k);
+	}, [d]);
+	return /* @__PURE__ */ O("div", {
+		className: "w-full",
+		children: [/* @__PURE__ */ D("div", {
+			className: "flex justify-center",
+			children: A.map((e) => /* @__PURE__ */ O("button", {
 				type: "button",
-				onClick: () => C((e) => !e),
-				"aria-expanded": S,
-				"aria-controls": w,
-				"data-testid": "agent-canvas-update-toggle",
-				className: "flex w-full cursor-pointer items-center gap-2 text-left",
-				children: [
-					/* @__PURE__ */ y("span", {
-						className: "flex-1 truncate text-xs font-medium text-white",
-						children: f(t.SETTINGS$APP_UPDATE_CARD_TITLE)
-					}),
-					O !== null && /* @__PURE__ */ y("span", {
-						"data-testid": "agent-canvas-update-badge",
-						className: c("inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none", k ? "text-warning" : "text-success"),
-						children: f(k ? t.SETTINGS$APP_UPDATE_BADGE_UPDATE_AVAILABLE : t.SETTINGS$APP_UPDATE_BADGE_UP_TO_DATE)
-					}),
-					/* @__PURE__ */ y(j, {
-						className: "size-4 shrink-0 text-[var(--oh-muted)]",
-						"aria-hidden": !0
-					})
-				]
-			}),
-			/* @__PURE__ */ b("div", {
-				className: "flex items-center justify-between text-xs",
-				children: [/* @__PURE__ */ y("span", {
-					className: "text-[var(--oh-text-dim)]",
-					children: f(t.SETTINGS$APP_UPDATE_VERSION_LABEL)
-				}), /* @__PURE__ */ y("span", {
-					className: "font-mono text-white",
-					children: d
-				})]
-			}),
-			S && /* @__PURE__ */ b("div", {
-				id: w,
-				className: "flex flex-col gap-3 pt-1",
-				children: [
-					/* @__PURE__ */ y("div", {
-						"data-testid": "agent-canvas-update-status",
-						className: "flex items-start gap-2 text-xs",
-						children: E.isPending ? /* @__PURE__ */ y("span", {
-							className: "text-[var(--oh-muted)]",
-							children: f(t.SETTINGS$APP_UPDATE_CHECKING)
-						}) : k ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(o, {
-							className: "size-4 shrink-0 text-warning",
-							"aria-hidden": !0
-						}), /* @__PURE__ */ y("span", {
-							className: "text-warning",
-							children: f(t.SETTINGS$APP_UPDATE_AVAILABLE_MESSAGE, { version: D })
-						})] }) : A ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(i, {
-							className: "size-4 shrink-0 text-success",
-							"aria-hidden": !0
-						}), /* @__PURE__ */ y("span", {
-							className: "text-success",
-							children: f(t.SETTINGS$APP_UPDATE_LATEST_MESSAGE)
-						})] }) : /* @__PURE__ */ y("span", {
-							className: "text-[var(--oh-muted)]",
-							children: f(t.SETTINGS$APP_UPDATE_CHECK_FAILED)
-						})
-					}),
-					/* @__PURE__ */ y(p, {
-						testId: "agent-canvas-update-check-button",
-						type: "button",
-						variant: "secondary",
-						className: "w-full",
-						isDisabled: E.isFetching,
-						"aria-busy": E.isFetching,
-						onClick: () => E.refetch(),
-						startContent: /* @__PURE__ */ y(s, {
-							className: c("size-4", E.isFetching && "animate-spin"),
-							"aria-hidden": !0
+				onClick: () => o(e),
+				className: c("inline-flex items-center gap-1.5 px-3 pb-2 text-sm font-medium", i === e ? "border-b border-white text-white" : "text-[var(--oh-muted)] hover:text-white"),
+				children: [/* @__PURE__ */ D(M, { tab: e }), r(j(e))]
+			}, e))
+		}), /* @__PURE__ */ O("div", {
+			className: "flex items-center gap-3 rounded-lg border border-[var(--oh-border)] bg-[var(--oh-surface-deep)] px-4 py-3",
+			children: [/* @__PURE__ */ D("code", {
+				"data-testid": i === "npm" ? "agent-canvas-update-command-npm" : "agent-canvas-update-command-docker",
+				className: "min-w-0 flex-1 overflow-visible whitespace-nowrap font-mono text-sm text-white",
+				children: d
+			}), /* @__PURE__ */ D("button", {
+				type: "button",
+				"data-testid": "copy-to-clipboard",
+				onClick: f,
+				"aria-label": r(s ? t.BUTTON$COPIED : t.SETTINGS$VERSION_COPY_COMMAND),
+				disabled: s,
+				className: "shrink-0 text-[var(--oh-muted)] hover:text-white disabled:hover:text-[var(--oh-muted)]",
+				children: s ? /* @__PURE__ */ D(n, {
+					className: "size-4 text-[var(--oh-status-success)]",
+					"aria-hidden": !0
+				}) : /* @__PURE__ */ D(a, {
+					className: "size-4",
+					"aria-hidden": !0
+				})
+			})]
+		})]
+	});
+}
+function P({ onClose: n, latestVersion: a, isPending: l, isFetching: u, updateAvailable: v, upToDate: y, onCheckForUpdates: b }) {
+	let { t: x } = e("openhands");
+	return /* @__PURE__ */ D(f, {
+		onClose: n,
+		children: /* @__PURE__ */ O(p, {
+			width: "md",
+			className: "relative flex max-h-[80vh] flex-col items-start overflow-auto border border-[var(--oh-border)]",
+			testID: "agent-canvas-update-modal",
+			children: [
+				/* @__PURE__ */ D(h, {
+					onClose: n,
+					testId: "close-agent-canvas-update-modal"
+				}),
+				/* @__PURE__ */ O("div", {
+					className: "flex w-full flex-col gap-2 pr-10",
+					children: [/* @__PURE__ */ D(m, { title: x(t.SETTINGS$APP_UPDATE_CARD_TITLE) }), /* @__PURE__ */ O("div", {
+						className: "flex items-center gap-1.5 text-xs",
+						children: [/* @__PURE__ */ D("span", {
+							className: "text-[var(--oh-text-dim)]",
+							children: x(t.SETTINGS$APP_UPDATE_VERSION_LABEL)
+						}), /* @__PURE__ */ D("span", {
+							className: "text-white",
+							children: d
+						})]
+					})]
+				}),
+				/* @__PURE__ */ O("div", {
+					className: "flex w-full flex-col gap-3",
+					children: [
+						/* @__PURE__ */ D(g, {
+							testId: "agent-canvas-update-check-button",
+							type: "button",
+							variant: "secondary",
+							className: "w-full",
+							isDisabled: u,
+							"aria-busy": u,
+							onClick: b,
+							startContent: /* @__PURE__ */ D(s, {
+								className: c("size-4", u && "animate-spin"),
+								"aria-hidden": !0
+							}),
+							children: x(t.SETTINGS$APP_UPDATE_CHECK_BUTTON)
 						}),
-						children: f(t.SETTINGS$APP_UPDATE_CHECK_BUTTON)
-					}),
-					/* @__PURE__ */ b("div", {
-						className: "flex flex-col gap-2 rounded-lg border border-[var(--oh-border-subtle)] p-3 text-xs",
-						children: [
-							/* @__PURE__ */ b("div", {
-								className: "flex items-center gap-1.5 text-white",
-								children: [/* @__PURE__ */ y(o, {
+						/* @__PURE__ */ D("div", {
+							"data-testid": "agent-canvas-update-status",
+							className: "w-full",
+							children: l || u ? /* @__PURE__ */ D("span", {
+								className: "text-xs text-[var(--oh-muted)]",
+								children: x(t.SETTINGS$APP_UPDATE_CHECKING)
+							}) : v ? /* @__PURE__ */ O("div", {
+								className: "flex items-start gap-2 rounded-lg border border-[#3B82F6]/30 bg-[#1E3A5F] px-3 py-2 text-xs text-[#3B82F6]",
+								children: [/* @__PURE__ */ D(r, {
 									className: "size-4 shrink-0",
 									"aria-hidden": !0
-								}), /* @__PURE__ */ y("span", {
-									className: "font-medium",
-									children: f(t.SETTINGS$APP_UPDATE_HOW_TO_UPDATE)
-								})]
-							}),
-							/* @__PURE__ */ y("span", {
-								className: "text-[var(--oh-text-dim)]",
-								children: f(t.SETTINGS$APP_UPDATE_RUN_COMMANDS)
-							}),
-							/* @__PURE__ */ y(x, {
-								command: m.npm,
-								testId: "agent-canvas-update-command-npm"
-							}),
-							/* @__PURE__ */ y("span", {
-								className: "text-center text-[var(--oh-text-dim)]",
-								children: f(t.SETTINGS$APP_UPDATE_OR)
-							}),
-							/* @__PURE__ */ y(x, {
-								command: m.docker,
-								testId: "agent-canvas-update-command-docker"
+								}), /* @__PURE__ */ O("span", { children: [
+									x(t.SETTINGS$APP_UPDATE_AVAILABLE_MESSAGE, { version: a }),
+									" ",
+									/* @__PURE__ */ O("a", {
+										"data-testid": "agent-canvas-update-release-notes",
+										href: _,
+										target: "_blank",
+										rel: "noopener noreferrer",
+										className: "inline-flex items-center gap-1.5 whitespace-nowrap font-medium text-white hover:text-[var(--oh-text)]",
+										children: [x(t.SETTINGS$VERSION_RELEASE_NOTES), /* @__PURE__ */ D(o, {
+											className: "size-3.5 shrink-0",
+											"aria-hidden": !0
+										})]
+									})
+								] })]
+							}) : y ? /* @__PURE__ */ O("div", {
+								className: "flex items-start gap-2 rounded-lg border border-[var(--oh-status-success)]/30 bg-[var(--oh-status-success)]/10 px-3 py-2 text-xs text-[var(--oh-status-success)]",
+								children: [/* @__PURE__ */ D(i, {
+									className: "size-4 shrink-0",
+									"aria-hidden": !0
+								}), /* @__PURE__ */ O("span", { children: [
+									x(t.SETTINGS$APP_UPDATE_LATEST_MESSAGE),
+									" ",
+									/* @__PURE__ */ O("a", {
+										"data-testid": "agent-canvas-update-release-notes",
+										href: _,
+										target: "_blank",
+										rel: "noopener noreferrer",
+										className: "inline-flex items-center gap-1.5 whitespace-nowrap font-medium text-white hover:text-[var(--oh-text)]",
+										children: [x(t.SETTINGS$VERSION_RELEASE_NOTES), /* @__PURE__ */ D(o, {
+											className: "size-3.5 shrink-0",
+											"aria-hidden": !0
+										})]
+									})
+								] })]
+							}) : /* @__PURE__ */ D("span", {
+								className: "text-xs text-[var(--oh-muted)]",
+								children: x(t.SETTINGS$APP_UPDATE_CHECK_FAILED)
 							})
-						]
-					}),
-					/* @__PURE__ */ b("a", {
-						"data-testid": "agent-canvas-update-release-notes",
-						href: "https://github.com/OpenHands/OpenHands/releases",
-						target: "_blank",
-						rel: "noopener noreferrer",
-						className: "inline-flex items-center gap-1 self-start text-xs text-[var(--oh-accent)] underline",
-						children: [f(t.SETTINGS$APP_UPDATE_RELEASE_NOTES), /* @__PURE__ */ y(a, {
-							size: 12,
-							"aria-hidden": !0
-						})]
-					})
-				]
-			})
-		]
+						}),
+						v ? /* @__PURE__ */ O("div", {
+							className: "flex w-full flex-col border-t border-[var(--oh-border)] pt-3",
+							children: [
+								/* @__PURE__ */ D("span", {
+									className: "text-sm font-medium text-white",
+									children: x(t.SETTINGS$APP_UPDATE_HOW_TO_UPDATE)
+								}),
+								/* @__PURE__ */ D("span", {
+									className: "mt-1 mb-4 text-sm text-[var(--oh-text-dim)]",
+									children: x(t.SETTINGS$APP_UPDATE_RUN_COMMANDS)
+								}),
+								/* @__PURE__ */ D(N, {})
+							]
+						}) : null
+					]
+				})
+			]
+		})
 	});
 }
+function F({ hideWhenUpToDate: n = !1 }) {
+	let { t: a } = e("openhands"), [o, s] = T(!1), f = l() !== null, p = y({ enabled: !f });
+	if (f) return null;
+	let m = p.data, h = m === void 0 ? null : u(m, d), g = h === 1, _ = h !== null && h <= 0;
+	return n && !g ? null : /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D("section", {
+		"data-testid": "agent-canvas-update-card",
+		children: /* @__PURE__ */ O("button", {
+			type: "button",
+			onClick: () => s(!0),
+			"aria-haspopup": "dialog",
+			"data-testid": "agent-canvas-update-toggle",
+			className: "flex w-full cursor-pointer flex-col gap-1 rounded-md border border-[var(--oh-border)] bg-base-secondary px-3 py-2 text-left hover:bg-[var(--oh-surface-raised)]",
+			children: [/* @__PURE__ */ O("span", {
+				className: "flex w-full items-center gap-2",
+				children: [/* @__PURE__ */ D("span", {
+					className: "flex-1 truncate text-sm font-semibold leading-5 text-white",
+					children: a(t.SETTINGS$APP_UPDATE_CARD_TITLE)
+				}), h !== null && /* @__PURE__ */ O("span", {
+					"data-testid": "agent-canvas-update-badge",
+					className: c("inline-flex shrink-0 items-center gap-1 text-[10px] font-medium leading-none", g ? "rounded-full border border-transparent bg-[#1E3A5F] px-1.5 py-0.5 text-[#3B82F6]" : "text-success"),
+					children: [D(g ? r : i, {
+						className: "size-3 shrink-0",
+						"aria-hidden": !0
+					}), a(g ? t.SETTINGS$APP_UPDATE_BADGE_UPDATE_AVAILABLE : t.SETTINGS$APP_UPDATE_BADGE_UP_TO_DATE)]
+				})]
+			}), /* @__PURE__ */ O("span", {
+				className: "flex items-center gap-1.5 text-xs leading-5 text-[var(--oh-muted)]",
+				children: [/* @__PURE__ */ D("span", { children: a(t.SETTINGS$APP_UPDATE_VERSION_LABEL) }), /* @__PURE__ */ D("span", {
+					className: "text-white",
+					children: d
+				})]
+			})]
+		})
+	}), o && /* @__PURE__ */ D(P, {
+		onClose: () => s(!1),
+		latestVersion: m,
+		isPending: p.isPending,
+		isFetching: p.isFetching,
+		updateAvailable: g,
+		upToDate: _,
+		onCheckForUpdates: () => p.refetch()
+	})] });
+}
 //#endregion
-export { S as AgentCanvasUpdateCard };
+export { F as AgentCanvasUpdateCard };
 
 //# sourceMappingURL=agent-canvas-update-card.js.map

package/dist/components/features/settings/agent-canvas-update-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"agent-canvas-update-card.js","names":[],"sources":["../../../../src/components/features/settings/agent-canvas-update-card.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  ChevronDown,\n  ChevronUp,\n  CircleCheck,\n  ExternalLink,\n  Info,\n  RefreshCw,\n} from \"lucide-react\";\nimport {\n  AGENT_CANVAS_RELEASE_NOTES_URL,\n  AGENT_CANVAS_UPDATE_COMMANDS,\n} from \"#/api/agent-canvas-updates\";\nimport { compareAgentServerVersions } from \"#/api/agent-server-compatibility\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { AGENT_CANVAS_CLIENT_VERSION } from \"#/api/client-source\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { CopyToClipboardButton } from \"#/components/shared/buttons/copy-to-clipboard-button\";\nimport { useLatestAgentCanvasVersion } from \"#/hooks/query/use-latest-agent-canvas-version\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\nfunction UpdateCommandRow({\n  command,\n  testId,\n}: {\n  command: string;\n  testId: string;\n}) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(command);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <div className=\"flex items-center gap-2 rounded-lg bg-[var(--oh-surface-deep)] px-2 py-1.5\">\n      <code\n        data-testid={testId}\n        className=\"min-w-0 flex-1 select-all break-all font-mono text-[11px] leading-4 text-white\"\n      >\n        {command}\n      </code>\n      <CopyToClipboardButton\n        isHidden={false}\n        isDisabled={false}\n        onClick={handleCopy}\n        mode={copied ? \"copied\" : \"copy\"}\n      />\n    </div>\n  );\n}\n\n/**\n * Information-only version/update card for the settings navigation surfaces.\n * Never blocks or toasts; check failures degrade to a quiet inline message.\n * Hidden in locked-to-Cloud deployments — the hosted canvas has no npm/docker\n * install to update.\n */\nexport function AgentCanvasUpdateCard() {\n  const { t } = useTranslation(\"openhands\");\n  const [expanded, setExpanded] = useState(false);\n  // The card is mounted on multiple settings surfaces at once; ids must not\n  // collide across instances.\n  const detailsId = useId();\n  const isLockedToCloud = getLockedCloudHost() !== null;\n  const latestVersionQuery = useLatestAgentCanvasVersion({\n    enabled: !isLockedToCloud,\n  });\n\n  if (isLockedToCloud) return null;\n\n  const latestVersion = latestVersionQuery.data;\n  const comparison =\n    latestVersion !== undefined\n      ? compareAgentServerVersions(latestVersion, AGENT_CANVAS_CLIENT_VERSION)\n      : null;\n  const updateAvailable = comparison === 1;\n  // 0 or -1: running the npm latest or newer (local dev build).\n  const upToDate = comparison !== null && comparison <= 0;\n  const ChevronIcon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <section\n      data-testid=\"agent-canvas-update-card\"\n      className=\"flex flex-col gap-2 rounded-xl border border-[var(--oh-border)] bg-[var(--oh-surface-raised)] p-3\"\n    >\n      <button\n        type=\"button\"\n        onClick={() => setExpanded((prev) => !prev)}\n        aria-expanded={expanded}\n        aria-controls={detailsId}\n        data-testid=\"agent-canvas-update-toggle\"\n        className=\"flex w-full cursor-pointer items-center gap-2 text-left\"\n      >\n        <span className=\"flex-1 truncate text-xs font-medium text-white\">\n          {t(I18nKey.SETTINGS$APP_UPDATE_CARD_TITLE)}\n        </span>\n        {comparison !== null && (\n          <span\n            data-testid=\"agent-canvas-update-badge\"\n            className={cn(\n              \"inline-flex shrink-0 items-center rounded-full border border-[var(--oh-border)] bg-[var(--oh-surface)] px-1.5 py-0.5 text-[10px] font-medium leading-none\",\n              updateAvailable ? \"text-warning\" : \"text-success\",\n            )}\n          >\n            {t(\n              updateAvailable\n                ? I18nKey.SETTINGS$APP_UPDATE_BADGE_UPDATE_AVAILABLE\n                : I18nKey.SETTINGS$APP_UPDATE_BADGE_UP_TO_DATE,\n            )}\n          </span>\n        )}\n        <ChevronIcon\n          className=\"size-4 shrink-0 text-[var(--oh-muted)]\"\n          aria-hidden\n        />\n      </button>\n\n      <div className=\"flex items-center justify-between text-xs\">\n        <span className=\"text-[var(--oh-text-dim)]\">\n          {t(I18nKey.SETTINGS$APP_UPDATE_VERSION_LABEL)}\n        </span>\n        <span className=\"font-mono text-white\">\n          {AGENT_CANVAS_CLIENT_VERSION}\n        </span>\n      </div>\n\n      {expanded && (\n        <div id={detailsId} className=\"flex flex-col gap-3 pt-1\">\n          <div\n            data-testid=\"agent-canvas-update-status\"\n            className=\"flex items-start gap-2 text-xs\"\n          >\n            {latestVersionQuery.isPending ? (\n              <span className=\"text-[var(--oh-muted)]\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_CHECKING)}\n              </span>\n            ) : updateAvailable ? (\n              <>\n                <Info className=\"size-4 shrink-0 text-warning\" aria-hidden />\n                <span className=\"text-warning\">\n                  {t(I18nKey.SETTINGS$APP_UPDATE_AVAILABLE_MESSAGE, {\n                    version: latestVersion,\n                  })}\n                </span>\n              </>\n            ) : upToDate ? (\n              <>\n                <CircleCheck\n                  className=\"size-4 shrink-0 text-success\"\n                  aria-hidden\n                />\n                <span className=\"text-success\">\n                  {t(I18nKey.SETTINGS$APP_UPDATE_LATEST_MESSAGE)}\n                </span>\n              </>\n            ) : (\n              <span className=\"text-[var(--oh-muted)]\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_CHECK_FAILED)}\n              </span>\n            )}\n          </div>\n\n          <BrandButton\n            testId=\"agent-canvas-update-check-button\"\n            type=\"button\"\n            variant=\"secondary\"\n            className=\"w-full\"\n            isDisabled={latestVersionQuery.isFetching}\n            aria-busy={latestVersionQuery.isFetching}\n            onClick={() => latestVersionQuery.refetch()}\n            startContent={\n              <RefreshCw\n                className={cn(\n                  \"size-4\",\n                  latestVersionQuery.isFetching && \"animate-spin\",\n                )}\n                aria-hidden\n              />\n            }\n          >\n            {t(I18nKey.SETTINGS$APP_UPDATE_CHECK_BUTTON)}\n          </BrandButton>\n\n          <div className=\"flex flex-col gap-2 rounded-lg border border-[var(--oh-border-subtle)] p-3 text-xs\">\n            <div className=\"flex items-center gap-1.5 text-white\">\n              <Info className=\"size-4 shrink-0\" aria-hidden />\n              <span className=\"font-medium\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_HOW_TO_UPDATE)}\n              </span>\n            </div>\n            <span className=\"text-[var(--oh-text-dim)]\">\n              {t(I18nKey.SETTINGS$APP_UPDATE_RUN_COMMANDS)}\n            </span>\n            <UpdateCommandRow\n              command={AGENT_CANVAS_UPDATE_COMMANDS.npm}\n              testId=\"agent-canvas-update-command-npm\"\n            />\n            <span className=\"text-center text-[var(--oh-text-dim)]\">\n              {t(I18nKey.SETTINGS$APP_UPDATE_OR)}\n            </span>\n            <UpdateCommandRow\n              command={AGENT_CANVAS_UPDATE_COMMANDS.docker}\n              testId=\"agent-canvas-update-command-docker\"\n            />\n          </div>\n\n          <a\n            data-testid=\"agent-canvas-update-release-notes\"\n            href={AGENT_CANVAS_RELEASE_NOTES_URL}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"inline-flex items-center gap-1 self-start text-xs text-[var(--oh-accent)] underline\"\n          >\n            {t(I18nKey.SETTINGS$APP_UPDATE_RELEASE_NOTES)}\n            <ExternalLink size={12} aria-hidden />\n          </a>\n        </div>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"agent-canvas-update-card.js","names":[],"sources":["../../../../src/components/features/settings/agent-canvas-update-card.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  ArrowUpCircle,\n  Check,\n  CircleCheck,\n  Copy,\n  ExternalLink,\n  RefreshCw,\n} from \"lucide-react\";\nimport {\n  AGENT_CANVAS_RELEASE_NOTES_URL,\n  AGENT_CANVAS_UPDATE_COMMANDS,\n} from \"#/api/agent-canvas-updates\";\nimport { compareAgentServerVersions } from \"#/api/agent-server-compatibility\";\nimport { getLockedCloudHost } from \"#/api/agent-server-config\";\nimport { AGENT_CANVAS_CLIENT_VERSION } from \"#/api/client-source\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { BaseModalTitle } from \"#/components/shared/modals/confirmation-modals/base-modal\";\nimport { ModalBackdrop } from \"#/components/shared/modals/modal-backdrop\";\nimport { ModalBody } from \"#/components/shared/modals/modal-body\";\nimport { ModalCloseButton } from \"#/components/shared/modals/modal-close-button\";\nimport { useLatestAgentCanvasVersion } from \"#/hooks/query/use-latest-agent-canvas-version\";\nimport DockerIcon from \"#/icons/docker.svg?react\";\nimport NpmIcon from \"#/icons/npm.svg?react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\n\nconst COPY_FEEDBACK_MS = 2000;\n\ntype UpdateCommandTab = \"npm\" | \"docker\";\n\nconst UPDATE_COMMAND_TABS: UpdateCommandTab[] = [\"npm\", \"docker\"];\n\nfunction getUpdateCommandTabLabelKey(tab: UpdateCommandTab): I18nKey {\n  return tab === \"npm\"\n    ? I18nKey.SETTINGS$VERSION_NPM_RECOMMENDED\n    : I18nKey.SETTINGS$VERSION_DOCKER;\n}\n\nfunction UpdateCommandTabIcon({ tab }: { tab: UpdateCommandTab }) {\n  if (tab === \"npm\") {\n    return <NpmIcon className=\"size-4 shrink-0\" aria-hidden />;\n  }\n  return <DockerIcon className=\"size-5 shrink-0\" aria-hidden />;\n}\n\nfunction UpdateCommandTabs() {\n  const { t } = useTranslation(\"openhands\");\n  const [selectedTab, setSelectedTab] = useState<UpdateCommandTab>(\"npm\");\n  const [copied, setCopied] = useState(false);\n  const copiedTimeoutRef = useRef<number | null>(null);\n  const command =\n    selectedTab === \"npm\"\n      ? AGENT_CANVAS_UPDATE_COMMANDS.npm\n      : AGENT_CANVAS_UPDATE_COMMANDS.docker;\n\n  useEffect(\n    () => () => {\n      if (copiedTimeoutRef.current !== null) {\n        window.clearTimeout(copiedTimeoutRef.current);\n      }\n    },\n    [],\n  );\n\n  useEffect(() => {\n    setCopied(false);\n    if (copiedTimeoutRef.current !== null) {\n      window.clearTimeout(copiedTimeoutRef.current);\n      copiedTimeoutRef.current = null;\n    }\n  }, [selectedTab]);\n\n  const copyCommand = useCallback(() => {\n    void navigator.clipboard?.writeText(command);\n    setCopied(true);\n    if (copiedTimeoutRef.current !== null) {\n      window.clearTimeout(copiedTimeoutRef.current);\n    }\n    copiedTimeoutRef.current = window.setTimeout(() => {\n      setCopied(false);\n      copiedTimeoutRef.current = null;\n    }, COPY_FEEDBACK_MS);\n  }, [command]);\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex justify-center\">\n        {UPDATE_COMMAND_TABS.map((tab) => (\n          <button\n            key={tab}\n            type=\"button\"\n            onClick={() => setSelectedTab(tab)}\n            className={cn(\n              \"inline-flex items-center gap-1.5 px-3 pb-2 text-sm font-medium\",\n              selectedTab === tab\n                ? \"border-b border-white text-white\"\n                : \"text-[var(--oh-muted)] hover:text-white\",\n            )}\n          >\n            <UpdateCommandTabIcon tab={tab} />\n            {t(getUpdateCommandTabLabelKey(tab))}\n          </button>\n        ))}\n      </div>\n      <div className=\"flex items-center gap-3 rounded-lg border border-[var(--oh-border)] bg-[var(--oh-surface-deep)] px-4 py-3\">\n        <code\n          data-testid={\n            selectedTab === \"npm\"\n              ? \"agent-canvas-update-command-npm\"\n              : \"agent-canvas-update-command-docker\"\n          }\n          className=\"min-w-0 flex-1 overflow-visible whitespace-nowrap font-mono text-sm text-white\"\n        >\n          {command}\n        </code>\n        <button\n          type=\"button\"\n          data-testid=\"copy-to-clipboard\"\n          onClick={copyCommand}\n          aria-label={t(\n            copied\n              ? I18nKey.BUTTON$COPIED\n              : I18nKey.SETTINGS$VERSION_COPY_COMMAND,\n          )}\n          disabled={copied}\n          className=\"shrink-0 text-[var(--oh-muted)] hover:text-white disabled:hover:text-[var(--oh-muted)]\"\n        >\n          {copied ? (\n            <Check\n              className=\"size-4 text-[var(--oh-status-success)]\"\n              aria-hidden\n            />\n          ) : (\n            <Copy className=\"size-4\" aria-hidden />\n          )}\n        </button>\n      </div>\n    </div>\n  );\n}\n\ninterface AgentCanvasUpdateModalProps {\n  onClose: () => void;\n  latestVersion: string | undefined;\n  isPending: boolean;\n  isFetching: boolean;\n  updateAvailable: boolean;\n  upToDate: boolean;\n  onCheckForUpdates: () => void;\n}\n\nfunction AgentCanvasUpdateModal({\n  onClose,\n  latestVersion,\n  isPending,\n  isFetching,\n  updateAvailable,\n  upToDate,\n  onCheckForUpdates,\n}: AgentCanvasUpdateModalProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <ModalBackdrop onClose={onClose}>\n      <ModalBody\n        width=\"md\"\n        className=\"relative flex max-h-[80vh] flex-col items-start overflow-auto border border-[var(--oh-border)]\"\n        testID=\"agent-canvas-update-modal\"\n      >\n        <ModalCloseButton\n          onClose={onClose}\n          testId=\"close-agent-canvas-update-modal\"\n        />\n        <div className=\"flex w-full flex-col gap-2 pr-10\">\n          <BaseModalTitle title={t(I18nKey.SETTINGS$APP_UPDATE_CARD_TITLE)} />\n          <div className=\"flex items-center gap-1.5 text-xs\">\n            <span className=\"text-[var(--oh-text-dim)]\">\n              {t(I18nKey.SETTINGS$APP_UPDATE_VERSION_LABEL)}\n            </span>\n            <span className=\"text-white\">{AGENT_CANVAS_CLIENT_VERSION}</span>\n          </div>\n        </div>\n\n        <div className=\"flex w-full flex-col gap-3\">\n          <BrandButton\n            testId=\"agent-canvas-update-check-button\"\n            type=\"button\"\n            variant=\"secondary\"\n            className=\"w-full\"\n            isDisabled={isFetching}\n            aria-busy={isFetching}\n            onClick={onCheckForUpdates}\n            startContent={\n              <RefreshCw\n                className={cn(\"size-4\", isFetching && \"animate-spin\")}\n                aria-hidden\n              />\n            }\n          >\n            {t(I18nKey.SETTINGS$APP_UPDATE_CHECK_BUTTON)}\n          </BrandButton>\n\n          <div data-testid=\"agent-canvas-update-status\" className=\"w-full\">\n            {isPending || isFetching ? (\n              <span className=\"text-xs text-[var(--oh-muted)]\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_CHECKING)}\n              </span>\n            ) : updateAvailable ? (\n              <div className=\"flex items-start gap-2 rounded-lg border border-[#3B82F6]/30 bg-[#1E3A5F] px-3 py-2 text-xs text-[#3B82F6]\">\n                <ArrowUpCircle className=\"size-4 shrink-0\" aria-hidden />\n                <span>\n                  {t(I18nKey.SETTINGS$APP_UPDATE_AVAILABLE_MESSAGE, {\n                    version: latestVersion,\n                  })}{\" \"}\n                  <a\n                    data-testid=\"agent-canvas-update-release-notes\"\n                    href={AGENT_CANVAS_RELEASE_NOTES_URL}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"inline-flex items-center gap-1.5 whitespace-nowrap font-medium text-white hover:text-[var(--oh-text)]\"\n                  >\n                    {t(I18nKey.SETTINGS$VERSION_RELEASE_NOTES)}\n                    <ExternalLink className=\"size-3.5 shrink-0\" aria-hidden />\n                  </a>\n                </span>\n              </div>\n            ) : upToDate ? (\n              <div className=\"flex items-start gap-2 rounded-lg border border-[var(--oh-status-success)]/30 bg-[var(--oh-status-success)]/10 px-3 py-2 text-xs text-[var(--oh-status-success)]\">\n                <CircleCheck className=\"size-4 shrink-0\" aria-hidden />\n                <span>\n                  {t(I18nKey.SETTINGS$APP_UPDATE_LATEST_MESSAGE)}{\" \"}\n                  <a\n                    data-testid=\"agent-canvas-update-release-notes\"\n                    href={AGENT_CANVAS_RELEASE_NOTES_URL}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"inline-flex items-center gap-1.5 whitespace-nowrap font-medium text-white hover:text-[var(--oh-text)]\"\n                  >\n                    {t(I18nKey.SETTINGS$VERSION_RELEASE_NOTES)}\n                    <ExternalLink className=\"size-3.5 shrink-0\" aria-hidden />\n                  </a>\n                </span>\n              </div>\n            ) : (\n              <span className=\"text-xs text-[var(--oh-muted)]\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_CHECK_FAILED)}\n              </span>\n            )}\n          </div>\n\n          {updateAvailable ? (\n            <div className=\"flex w-full flex-col border-t border-[var(--oh-border)] pt-3\">\n              <span className=\"text-sm font-medium text-white\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_HOW_TO_UPDATE)}\n              </span>\n              <span className=\"mt-1 mb-4 text-sm text-[var(--oh-text-dim)]\">\n                {t(I18nKey.SETTINGS$APP_UPDATE_RUN_COMMANDS)}\n              </span>\n              <UpdateCommandTabs />\n            </div>\n          ) : null}\n        </div>\n      </ModalBody>\n    </ModalBackdrop>\n  );\n}\n\ninterface AgentCanvasUpdateCardProps {\n  /** When true, omit the card unless an update is available (main sidebar). */\n  hideWhenUpToDate?: boolean;\n}\n\n/**\n * Information-only version/update card for settings and the main sidebar.\n * Opens update details in a modal. Never blocks or toasts; check failures\n * degrade to a quiet inline message. Hidden in locked-to-Cloud deployments —\n * the hosted canvas has no npm/docker install to update.\n */\nexport function AgentCanvasUpdateCard({\n  hideWhenUpToDate = false,\n}: AgentCanvasUpdateCardProps) {\n  const { t } = useTranslation(\"openhands\");\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const isLockedToCloud = getLockedCloudHost() !== null;\n  const latestVersionQuery = useLatestAgentCanvasVersion({\n    enabled: !isLockedToCloud,\n  });\n\n  if (isLockedToCloud) return null;\n\n  const latestVersion = latestVersionQuery.data;\n  const comparison =\n    latestVersion !== undefined\n      ? compareAgentServerVersions(latestVersion, AGENT_CANVAS_CLIENT_VERSION)\n      : null;\n  const updateAvailable = comparison === 1;\n  // 0 or -1: running the npm latest or newer (local dev build).\n  const upToDate = comparison !== null && comparison <= 0;\n\n  if (hideWhenUpToDate && !updateAvailable) return null;\n\n  return (\n    <>\n      <section data-testid=\"agent-canvas-update-card\">\n        <button\n          type=\"button\"\n          onClick={() => setIsModalOpen(true)}\n          aria-haspopup=\"dialog\"\n          data-testid=\"agent-canvas-update-toggle\"\n          className=\"flex w-full cursor-pointer flex-col gap-1 rounded-md border border-[var(--oh-border)] bg-base-secondary px-3 py-2 text-left hover:bg-[var(--oh-surface-raised)]\"\n        >\n          <span className=\"flex w-full items-center gap-2\">\n            <span className=\"flex-1 truncate text-sm font-semibold leading-5 text-white\">\n              {t(I18nKey.SETTINGS$APP_UPDATE_CARD_TITLE)}\n            </span>\n            {comparison !== null && (\n              <span\n                data-testid=\"agent-canvas-update-badge\"\n                className={cn(\n                  \"inline-flex shrink-0 items-center gap-1 text-[10px] font-medium leading-none\",\n                  updateAvailable\n                    ? \"rounded-full border border-transparent bg-[#1E3A5F] px-1.5 py-0.5 text-[#3B82F6]\"\n                    : \"text-success\",\n                )}\n              >\n                {updateAvailable ? (\n                  <ArrowUpCircle className=\"size-3 shrink-0\" aria-hidden />\n                ) : (\n                  <CircleCheck className=\"size-3 shrink-0\" aria-hidden />\n                )}\n                {t(\n                  updateAvailable\n                    ? I18nKey.SETTINGS$APP_UPDATE_BADGE_UPDATE_AVAILABLE\n                    : I18nKey.SETTINGS$APP_UPDATE_BADGE_UP_TO_DATE,\n                )}\n              </span>\n            )}\n          </span>\n\n          <span className=\"flex items-center gap-1.5 text-xs leading-5 text-[var(--oh-muted)]\">\n            <span>{t(I18nKey.SETTINGS$APP_UPDATE_VERSION_LABEL)}</span>\n            <span className=\"text-white\">{AGENT_CANVAS_CLIENT_VERSION}</span>\n          </span>\n        </button>\n      </section>\n\n      {isModalOpen && (\n        <AgentCanvasUpdateModal\n          onClose={() => setIsModalOpen(false)}\n          latestVersion={latestVersion}\n          isPending={latestVersionQuery.isPending}\n          isFetching={latestVersionQuery.isFetching}\n          updateAvailable={updateAvailable}\n          upToDate={upToDate}\n          onCheckForUpdates={() => latestVersionQuery.refetch()}\n        />\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/settings/agent-canvas-version-modal.cjs

@@ -0,0 +1,2 @@
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/check.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/circle-arrow-up.cjs"),a=require("../../../node_modules/lucide-react/dist/esm/icons/circle-check.cjs"),o=require("../../../node_modules/lucide-react/dist/esm/icons/copy.cjs"),s=require("../../../node_modules/lucide-react/dist/esm/icons/external-link.cjs"),c=require("../../../node_modules/lucide-react/dist/esm/icons/refresh-cw.cjs"),l=require("../../../utils/utils.cjs"),u=require("../../shared/modals/modal-backdrop.cjs"),d=require("../../shared/modals/modal-close-button.cjs"),f=require("../../../api/agent-canvas-updates.cjs"),p=require("../../../icons/docker.cjs"),m=require("../../../icons/npm.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");var _=2e3,v=[`npm`,`docker`];function y(e){return e===`npm`?n.I18nKey.SETTINGS$VERSION_NPM_RECOMMENDED:n.I18nKey.SETTINGS$VERSION_DOCKER}function b({tab:e}){return e===`npm`?(0,g.jsx)(m.default,{className:`size-4 shrink-0`,"aria-hidden":!0}):(0,g.jsx)(p.default,{className:`size-5 shrink-0`,"aria-hidden":!0})}function x({installedVersion:e,latestVersion:p,updateAvailable:m,isChecking:x,onCheckForUpdates:S,onClose:C}){let{t:w}=t.useTranslation(`openhands`),[T,E]=h.default.useState(`npm`),[D,O]=h.default.useState(!1),k=h.default.useRef(null),A=T===`npm`?f.AGENT_CANVAS_UPDATE_COMMANDS.npm:f.AGENT_CANVAS_UPDATE_COMMANDS.docker;h.default.useEffect(()=>()=>{k.current!==null&&window.clearTimeout(k.current)},[]),h.default.useEffect(()=>{O(!1),k.current!==null&&(window.clearTimeout(k.current),k.current=null)},[T]);let j=h.default.useCallback(()=>{navigator.clipboard?.writeText(A),O(!0),k.current!==null&&window.clearTimeout(k.current),k.current=window.setTimeout(()=>{O(!1),k.current=null},_)},[A]);return(0,g.jsx)(u.ModalBackdrop,{onClose:C,"aria-label":w(n.I18nKey.SETTINGS$VERSION_MODAL_ARIA_LABEL),children:(0,g.jsxs)(`section`,{className:`relative flex w-[520px] max-w-[90vw] flex-col gap-5 rounded-xl border border-[var(--oh-border)] bg-base-secondary p-6 shadow-xl`,children:[(0,g.jsx)(d.ModalCloseButton,{onClose:C,testId:`agent-canvas-version-modal-close`}),(0,g.jsxs)(`header`,{className:`flex items-center gap-3 pr-8`,children:[m?(0,g.jsx)(i.CircleArrowUp,{className:`size-7 shrink-0 text-[#3B82F6]`,"aria-hidden":!0}):(0,g.jsx)(a.CircleCheck,{className:`size-7 shrink-0 text-[var(--oh-status-success)]`,"aria-hidden":!0}),(0,g.jsx)(`h2`,{className:`text-base font-semibold leading-6 text-white`,children:w(m?n.I18nKey.SETTINGS$VERSION_UPDATE_AVAILABLE:n.I18nKey.SETTINGS$VERSION_UP_TO_DATE_TITLE)}),m&&p?(0,g.jsx)(`span`,{className:`rounded-full bg-[#1E3A5F] px-2 py-0.5 text-xs font-semibold text-[#3B82F6]`,children:p}):null]}),(0,g.jsx)(`div`,{className:`flex flex-col gap-1`,children:m&&p?(0,g.jsxs)(`p`,{className:`text-sm text-[var(--oh-text)]`,children:[w(n.I18nKey.SETTINGS$VERSION_UPDATE_MESSAGE,{installed:e,latest:p}),` `,(0,g.jsxs)(`a`,{href:f.AGENT_CANVAS_RELEASE_NOTES_URL,target:`_blank`,rel:`noopener noreferrer`,className:`inline-flex items-center gap-1.5 whitespace-nowrap font-medium text-white hover:text-[var(--oh-text)]`,children:[w(n.I18nKey.SETTINGS$VERSION_RELEASE_NOTES),(0,g.jsx)(s.ExternalLink,{className:`size-4 shrink-0`,"aria-hidden":!0})]})]}):(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(`p`,{className:`text-sm text-[var(--oh-text)]`,children:w(n.I18nKey.SETTINGS$VERSION_INSTALLED,{version:e})}),p?(0,g.jsxs)(`p`,{className:`whitespace-nowrap text-sm text-[var(--oh-status-success)]`,children:[w(n.I18nKey.SETTINGS$VERSION_LATEST_MESSAGE),` `,(0,g.jsxs)(`a`,{href:f.AGENT_CANVAS_RELEASE_NOTES_URL,target:`_blank`,rel:`noopener noreferrer`,className:`inline-flex items-center gap-1.5 font-medium text-white hover:text-[var(--oh-text)]`,children:[w(n.I18nKey.SETTINGS$VERSION_RELEASE_NOTES),(0,g.jsx)(s.ExternalLink,{className:`size-4 shrink-0`,"aria-hidden":!0})]})]}):(0,g.jsx)(`p`,{className:`text-sm text-[var(--oh-muted)]`,children:w(n.I18nKey.SETTINGS$VERSION_CHECK_UNAVAILABLE)})]})}),m?(0,g.jsxs)(`div`,{children:[(0,g.jsx)(`div`,{className:`flex justify-center`,children:v.map(e=>(0,g.jsxs)(`button`,{type:`button`,onClick:()=>E(e),className:l.cn(`inline-flex items-center gap-1.5 px-3 pb-2 text-sm font-medium`,T===e?`border-b border-white text-white`:`text-[var(--oh-muted)] hover:text-white`),children:[(0,g.jsx)(b,{tab:e}),w(y(e))]},e))}),(0,g.jsxs)(`div`,{className:`flex items-center gap-3 rounded-lg border border-[var(--oh-border)] bg-[var(--oh-surface-deep)] px-4 py-3`,children:[(0,g.jsx)(`code`,{className:`min-w-0 flex-1 overflow-visible whitespace-nowrap font-mono text-sm text-white`,children:A}),(0,g.jsx)(`button`,{type:`button`,onClick:j,"aria-label":w(D?n.I18nKey.BUTTON$COPIED:n.I18nKey.SETTINGS$VERSION_COPY_COMMAND),disabled:D,className:`shrink-0 text-[var(--oh-muted)] hover:text-white disabled:hover:text-[var(--oh-muted)]`,children:D?(0,g.jsx)(r.Check,{className:`size-4 text-[var(--oh-status-success)]`,"aria-hidden":!0}):(0,g.jsx)(o.Copy,{className:`size-4`,"aria-hidden":!0})})]})]}):null,m?null:(0,g.jsx)(`div`,{className:`flex flex-wrap gap-x-8 gap-y-3`,children:(0,g.jsxs)(`button`,{type:`button`,onClick:S,className:`inline-flex items-center gap-2 text-sm font-medium text-white hover:text-[var(--oh-text)] disabled:cursor-wait disabled:text-[var(--oh-muted)]`,disabled:x,children:[w(n.I18nKey.SETTINGS$VERSION_CHECK_FOR_UPDATES),(0,g.jsx)(c.RefreshCw,{className:l.cn(`size-4 shrink-0`,x&&`animate-spin`),"aria-hidden":!0})]})})]})})}exports.AgentCanvasVersionModal=x;
+//# sourceMappingURL=agent-canvas-version-modal.cjs.map