@openhands/agent-canvas 1.5.1 → 1.6.1

package/dist/components/features/plugins/build-plugins-view-model.d.ts

@@ -1,4 +1,4 @@
-import type { MarketplacePlugin, LocalPlugin } from "#/api/plugins-service";
+import type { MarketplacePlugin, LocalPlugin, PluginBundledSkill } from "#/api/plugins-service";
 import type { InstalledPluginInfo } from "#/api/plugins-management-service";
 export type PluginStatusFilter = "all" | "installed" | "available" | "local";
 /**
@@ -24,6 +24,15 @@ export interface PluginViewModel {
      * Read-only: it auto-loads into conversations and is not installed/managed.
      */
     isLocal: boolean;
+    /**
+     * Plugin contents (`skills` bundled in the plugin, `files` relative to
+     * `path`). The three fields travel as a unit from one server response so the
+     * file viewer never joins a base path with another copy's file list; null
+     * when the server has no local copy or predates the contents fields.
+     */
+    path: string | null;
+    skills: PluginBundledSkill[] | null;
+    files: string[] | null;
 }
 /**
  * Merge the marketplace catalog with the installed plugins into one

package/dist/components/features/plugins/plugin-files-section.d.ts

@@ -0,0 +1,13 @@
+interface PluginFilesSectionProps {
+    /** Plugin directory on the agent-server (`path`/`install_path`). */
+    basePath: string;
+    /** File paths relative to `basePath`, as reported by the agent-server. */
+    files: string[];
+}
+/**
+ * "Files" section of the plugin detail modal: the plugin's file tree with an
+ * inline viewer for the selected file. Clicking the selected file again
+ * deselects it and closes the viewer.
+ */
+export declare function PluginFilesSection({ basePath, files, }: PluginFilesSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs`),r=require(`../../../node_modules/lucide-react/dist/esm/icons/chevron-up.cjs`),i=require(`../../../node_modules/lucide-react/dist/esm/icons/circle-check.cjs`),a=require(`../../../node_modules/lucide-react/dist/esm/icons/external-link.cjs`),o=require(`../../../node_modules/lucide-react/dist/esm/icons/info.cjs`),s=require(`../../../node_modules/lucide-react/dist/esm/icons/refresh-cw.cjs`),c=require(`../../../utils/utils.cjs`),l=require(`../../../api/agent-server-config.cjs`),u=require(`../../../api/agent-server-compatibility.cjs`),d=require(`../../../api/client-source.cjs`),f=require(`../../shared/buttons/copy-to-clipboard-button.cjs`),p=require(`./brand-button.cjs`),m=require(`../../../api/agent-canvas-updates.cjs`),h=require(`../../../hooks/query/use-latest-agent-canvas-version.cjs`);let g=require(`react`),_=require(`react/jsx-runtime`);function v({command:e,testId:t}){let[n,r]=(0,g.useState)(!1);return(0,_.jsxs)(`div`,{className:`flex items-center gap-2 rounded-lg bg-[var(--oh-surface-deep)] px-2 py-1.5`,children:[(0,_.jsx)(`code`,{"data-testid":t,className:`min-w-0 flex-1 select-all break-all font-mono text-[11px] leading-4 text-white`,children:e}),(0,_.jsx)(f.CopyToClipboardButton,{isHidden:!1,isDisabled:!1,onClick:()=>{navigator.clipboard.writeText(e),r(!0),setTimeout(()=>r(!1),2e3)},mode:n?`copied`:`copy`})]})}function y(){let{t:f}=e.useTranslation(`openhands`),[y,b]=(0,g.useState)(!1),x=(0,g.useId)(),S=l.getLockedCloudHost()!==null,C=h.useLatestAgentCanvasVersion({enabled:!S});if(S)return null;let w=C.data,T=w===void 0?null:u.compareAgentServerVersions(w,d.AGENT_CANVAS_CLIENT_VERSION),E=T===1,D=T!==null&&T<=0,O=y?r.ChevronUp:n.ChevronDown;return(0,_.jsxs)(`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:[(0,_.jsxs)(`button`,{type:`button`,onClick:()=>b(e=>!e),"aria-expanded":y,"aria-controls":x,"data-testid":`agent-canvas-update-toggle`,className:`flex w-full cursor-pointer items-center gap-2 text-left`,children:[(0,_.jsx)(`span`,{className:`flex-1 truncate text-xs font-medium text-white`,children:f(t.I18nKey.SETTINGS$APP_UPDATE_CARD_TITLE)}),T!==null&&(0,_.jsx)(`span`,{"data-testid":`agent-canvas-update-badge`,className:c.cn(`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`,E?`text-warning`:`text-success`),children:f(E?t.I18nKey.SETTINGS$APP_UPDATE_BADGE_UPDATE_AVAILABLE:t.I18nKey.SETTINGS$APP_UPDATE_BADGE_UP_TO_DATE)}),(0,_.jsx)(O,{className:`size-4 shrink-0 text-[var(--oh-muted)]`,"aria-hidden":!0})]}),(0,_.jsxs)(`div`,{className:`flex items-center justify-between text-xs`,children:[(0,_.jsx)(`span`,{className:`text-[var(--oh-text-dim)]`,children:f(t.I18nKey.SETTINGS$APP_UPDATE_VERSION_LABEL)}),(0,_.jsx)(`span`,{className:`font-mono text-white`,children:d.AGENT_CANVAS_CLIENT_VERSION})]}),y&&(0,_.jsxs)(`div`,{id:x,className:`flex flex-col gap-3 pt-1`,children:[(0,_.jsx)(`div`,{"data-testid":`agent-canvas-update-status`,className:`flex items-start gap-2 text-xs`,children:C.isPending?(0,_.jsx)(`span`,{className:`text-[var(--oh-muted)]`,children:f(t.I18nKey.SETTINGS$APP_UPDATE_CHECKING)}):E?(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(o.Info,{className:`size-4 shrink-0 text-warning`,"aria-hidden":!0}),(0,_.jsx)(`span`,{className:`text-warning`,children:f(t.I18nKey.SETTINGS$APP_UPDATE_AVAILABLE_MESSAGE,{version:w})})]}):D?(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(i.CircleCheck,{className:`size-4 shrink-0 text-success`,"aria-hidden":!0}),(0,_.jsx)(`span`,{className:`text-success`,children:f(t.I18nKey.SETTINGS$APP_UPDATE_LATEST_MESSAGE)})]}):(0,_.jsx)(`span`,{className:`text-[var(--oh-muted)]`,children:f(t.I18nKey.SETTINGS$APP_UPDATE_CHECK_FAILED)})}),(0,_.jsx)(p.BrandButton,{testId:`agent-canvas-update-check-button`,type:`button`,variant:`secondary`,className:`w-full`,isDisabled:C.isFetching,"aria-busy":C.isFetching,onClick:()=>C.refetch(),startContent:(0,_.jsx)(s.RefreshCw,{className:c.cn(`size-4`,C.isFetching&&`animate-spin`),"aria-hidden":!0}),children:f(t.I18nKey.SETTINGS$APP_UPDATE_CHECK_BUTTON)}),(0,_.jsxs)(`div`,{className:`flex flex-col gap-2 rounded-lg border border-[var(--oh-border-subtle)] p-3 text-xs`,children:[(0,_.jsxs)(`div`,{className:`flex items-center gap-1.5 text-white`,children:[(0,_.jsx)(o.Info,{className:`size-4 shrink-0`,"aria-hidden":!0}),(0,_.jsx)(`span`,{className:`font-medium`,children:f(t.I18nKey.SETTINGS$APP_UPDATE_HOW_TO_UPDATE)})]}),(0,_.jsx)(`span`,{className:`text-[var(--oh-text-dim)]`,children:f(t.I18nKey.SETTINGS$APP_UPDATE_RUN_COMMANDS)}),(0,_.jsx)(v,{command:m.AGENT_CANVAS_UPDATE_COMMANDS.npm,testId:`agent-canvas-update-command-npm`}),(0,_.jsx)(`span`,{className:`text-center text-[var(--oh-text-dim)]`,children:f(t.I18nKey.SETTINGS$APP_UPDATE_OR)}),(0,_.jsx)(v,{command:m.AGENT_CANVAS_UPDATE_COMMANDS.docker,testId:`agent-canvas-update-command-docker`})]}),(0,_.jsxs)(`a`,{"data-testid":`agent-canvas-update-release-notes`,href:`https://github.com/OpenHands/agent-canvas/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.I18nKey.SETTINGS$APP_UPDATE_RELEASE_NOTES),(0,_.jsx)(a.ExternalLink,{size:12,"aria-hidden":!0})]})]})]})}exports.AgentCanvasUpdateCard=y;
+//# sourceMappingURL=agent-canvas-update-card.cjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export declare function AgentCanvasUpdateCard(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,170 @@
+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 { 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 { 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";
+//#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"
+		})]
+	});
+}
+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", {
+				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
+						}),
+						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, {
+									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__ */ b("a", {
+						"data-testid": "agent-canvas-update-release-notes",
+						href: "https://github.com/OpenHands/agent-canvas/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
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { S as AgentCanvasUpdateCard };
+
+//# sourceMappingURL=agent-canvas-update-card.js.map

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

@@ -0,0 +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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"}

package/dist/components/features/settings/integrations-settings-link.cjs

@@ -0,0 +1,2 @@
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../node_modules/lucide-react/dist/esm/icons/external-link.cjs`),r=require(`../../../node_modules/lucide-react/dist/esm/icons/puzzle.cjs`),i=require(`../../../utils/utils.cjs`),a=require(`../../../api/backend-registry/active-store.cjs`),o=require(`../../../contexts/active-backend-context.cjs`),s=require(`../sidebar/sidebar-layout.cjs`);let c=require(`react/jsx-runtime`);function l(){let{t:l}=e.useTranslation(`openhands`),{active:u}=o.useActiveBackendContext(),{backend:d}=u;return a.isNoBackend(d)||d.kind!==`cloud`?null:(0,c.jsxs)(`a`,{"data-testid":`settings-integrations-link`,href:`${d.host.replace(/\/+$/,``)}/settings/integrations`,target:`_blank`,rel:`noopener noreferrer`,className:i.cn(s.sidebarNavRowClassName({collapsed:!1}),s.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),children:[(0,c.jsx)(`span`,{className:s.SIDEBAR_ICON_SLOT_CLASS,children:(0,c.jsx)(r.Puzzle,{className:`size-4 shrink-0`,"aria-hidden":!0})}),(0,c.jsx)(`span`,{className:i.cn(s.sidebarNavLabelClassName(!1),`flex-1`),children:l(t.I18nKey.SETTINGS$INTEGRATIONS_SETTINGS_LINK)}),(0,c.jsx)(n.ExternalLink,{className:`size-4 shrink-0 text-[var(--oh-muted)]`,"aria-hidden":!0})]})}exports.IntegrationsSettingsLink=l;
+//# sourceMappingURL=integrations-settings-link.cjs.map

package/dist/components/features/settings/integrations-settings-link.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"integrations-settings-link.cjs","names":[],"sources":["../../../../src/components/features/settings/integrations-settings-link.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { ExternalLink, Puzzle } from \"lucide-react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  SIDEBAR_ICON_SLOT_CLASS,\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavLabelClassName,\n  sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\n\n/**\n * Renders only for cloud backends — local backends have no equivalent\n * hosted integrations settings page.\n */\nexport function IntegrationsSettingsLink() {\n  const { t } = useTranslation(\"openhands\");\n  const { active } = useActiveBackendContext();\n  const { backend } = active;\n\n  if (isNoBackend(backend) || backend.kind !== \"cloud\") return null;\n\n  const integrationsUrl = `${backend.host.replace(/\\/+$/, \"\")}/settings/integrations`;\n\n  return (\n    <a\n      data-testid=\"settings-integrations-link\"\n      href={integrationsUrl}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={cn(\n        sidebarNavRowClassName({ collapsed: false }),\n        SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n      )}\n    >\n      <span className={SIDEBAR_ICON_SLOT_CLASS}>\n        <Puzzle className=\"size-4 shrink-0\" aria-hidden />\n      </span>\n      <span className={cn(sidebarNavLabelClassName(false), \"flex-1\")}>\n        {t(I18nKey.SETTINGS$INTEGRATIONS_SETTINGS_LINK)}\n      </span>\n      <ExternalLink\n        className=\"size-4 shrink-0 text-[var(--oh-muted)]\"\n        aria-hidden\n      />\n    </a>\n  );\n}\n"],"mappings":"qjBAiBA,SAAgB,GAA2B,CACzC,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,CAAE,UAAW,EAAA,yBAAyB,CACtC,CAAE,WAAY,EAMpB,OAJI,EAAA,YAAY,EAAQ,EAAI,EAAQ,OAAS,QAAgB,MAK3D,EAAA,EAAA,MAAC,IAAD,CACE,cAAY,6BACZ,KAAM,GALiB,EAAQ,KAAK,QAAQ,OAAQ,GAAG,CAAC,wBAMxD,OAAO,SACP,IAAI,sBACJ,UAAW,EAAA,GACT,EAAA,uBAAuB,CAAE,UAAW,GAAO,CAAC,CAC5C,EAAA,8BAA8B,KAC/B,UARH,EAUE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,kCACf,EAAA,EAAA,KAAC,EAAA,OAAD,CAAQ,UAAU,kBAAkB,cAAA,GAAc,CAAA,CAC7C,CAAA,EACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,GAAG,EAAA,yBAAyB,GAAM,CAAE,SAAS,UAC3D,EAAE,EAAA,QAAQ,oCAAoC,CAC1C,CAAA,EACP,EAAA,EAAA,KAAC,EAAA,aAAD,CACE,UAAU,yCACV,cAAA,GACA,CAAA,CACA"}

package/dist/components/features/settings/integrations-settings-link.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Renders only for cloud backends — local backends have no equivalent
+ * hosted integrations settings page.
+ */
+export declare function IntegrationsSettingsLink(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/features/settings/integrations-settings-link.js

@@ -0,0 +1,41 @@
+import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
+import { I18nKey as t } from "../../../i18n/declaration.js";
+import { ExternalLink as n } from "../../../node_modules/lucide-react/dist/esm/icons/external-link.js";
+import { Puzzle as r } from "../../../node_modules/lucide-react/dist/esm/icons/puzzle.js";
+import { cn as i } from "../../../utils/utils.js";
+import { isNoBackend as a } from "../../../api/backend-registry/active-store.js";
+import { useActiveBackendContext as o } from "../../../contexts/active-backend-context.js";
+import { SIDEBAR_ICON_SLOT_CLASS as s, SIDEBAR_ROW_INTERACTIVE_CLASS as c, sidebarNavLabelClassName as l, sidebarNavRowClassName as u } from "../sidebar/sidebar-layout.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/features/settings/integrations-settings-link.tsx
+function p() {
+	let { t: p } = e("openhands"), { active: m } = o(), { backend: h } = m;
+	return a(h) || h.kind !== "cloud" ? null : /* @__PURE__ */ f("a", {
+		"data-testid": "settings-integrations-link",
+		href: `${h.host.replace(/\/+$/, "")}/settings/integrations`,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: i(u({ collapsed: !1 }), c.idle),
+		children: [
+			/* @__PURE__ */ d("span", {
+				className: s,
+				children: /* @__PURE__ */ d(r, {
+					className: "size-4 shrink-0",
+					"aria-hidden": !0
+				})
+			}),
+			/* @__PURE__ */ d("span", {
+				className: i(l(!1), "flex-1"),
+				children: p(t.SETTINGS$INTEGRATIONS_SETTINGS_LINK)
+			}),
+			/* @__PURE__ */ d(n, {
+				className: "size-4 shrink-0 text-[var(--oh-muted)]",
+				"aria-hidden": !0
+			})
+		]
+	});
+}
+//#endregion
+export { p as IntegrationsSettingsLink };
+
+//# sourceMappingURL=integrations-settings-link.js.map

package/dist/components/features/settings/integrations-settings-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"integrations-settings-link.js","names":[],"sources":["../../../../src/components/features/settings/integrations-settings-link.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { ExternalLink, Puzzle } from \"lucide-react\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useActiveBackendContext } from \"#/contexts/active-backend-context\";\nimport { isNoBackend } from \"#/api/backend-registry/active-store\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  SIDEBAR_ICON_SLOT_CLASS,\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavLabelClassName,\n  sidebarNavRowClassName,\n} from \"#/components/features/sidebar/sidebar-layout\";\n\n/**\n * Renders only for cloud backends — local backends have no equivalent\n * hosted integrations settings page.\n */\nexport function IntegrationsSettingsLink() {\n  const { t } = useTranslation(\"openhands\");\n  const { active } = useActiveBackendContext();\n  const { backend } = active;\n\n  if (isNoBackend(backend) || backend.kind !== \"cloud\") return null;\n\n  const integrationsUrl = `${backend.host.replace(/\\/+$/, \"\")}/settings/integrations`;\n\n  return (\n    <a\n      data-testid=\"settings-integrations-link\"\n      href={integrationsUrl}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={cn(\n        sidebarNavRowClassName({ collapsed: false }),\n        SIDEBAR_ROW_INTERACTIVE_CLASS.idle,\n      )}\n    >\n      <span className={SIDEBAR_ICON_SLOT_CLASS}>\n        <Puzzle className=\"size-4 shrink-0\" aria-hidden />\n      </span>\n      <span className={cn(sidebarNavLabelClassName(false), \"flex-1\")}>\n        {t(I18nKey.SETTINGS$INTEGRATIONS_SETTINGS_LINK)}\n      </span>\n      <ExternalLink\n        className=\"size-4 shrink-0 text-[var(--oh-muted)]\"\n        aria-hidden\n      />\n    </a>\n  );\n}\n"],"mappings":";;;;;;;;;;AAiBA,SAAgB,IAA2B;CACzC,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,EAAE,cAAW,GAAyB,EACtC,EAAE,eAAY;AAMpB,QAJI,EAAY,EAAQ,IAAI,EAAQ,SAAS,UAAgB,OAK3D,kBAAC,KAAD;EACE,eAAY;EACZ,MAAM,GALiB,EAAQ,KAAK,QAAQ,QAAQ,GAAG,CAAC;EAMxD,QAAO;EACP,KAAI;EACJ,WAAW,EACT,EAAuB,EAAE,WAAW,IAAO,CAAC,EAC5C,EAA8B,KAC/B;YARH;GAUE,kBAAC,QAAD;IAAM,WAAW;cACf,kBAAC,GAAD;KAAQ,WAAU;KAAkB,eAAA;KAAc,CAAA;IAC7C,CAAA;GACP,kBAAC,QAAD;IAAM,WAAW,EAAG,EAAyB,GAAM,EAAE,SAAS;cAC3D,EAAE,EAAQ,oCAAoC;IAC1C,CAAA;GACP,kBAAC,GAAD;IACE,WAAU;IACV,eAAA;IACA,CAAA;GACA"}

package/dist/components/features/settings/llm-profiles/llm-settings-local-view.cjs

@@ -1 +1 @@
-const e=require(`../../../../_virtual/_rolldown/runtime.cjs`);require(`../../../../utils/custom-toast-handlers.cjs`),require(`../../../../api/profiles-service/profiles-service.api.cjs`),require(`../../../../hooks/query/use-settings.cjs`),require(`../../../../hooks/query/use-llm-profiles.cjs`),require(`../../../../ui/typography.cjs`),require(`../brand-button.cjs`),require(`../../../../hooks/query/use-agent-settings-schema.cjs`),require(`./profile-name-input.cjs`),require(`../../../../hooks/mutation/use-activate-llm-profile.cjs`),require(`../../../../hooks/mutation/use-save-llm-profile.cjs`),require(`./llm-profiles-manager.cjs`),require(`../../../shared/buttons/back-nav-button.cjs`),require(`../../../../contexts/settings-section-header-context.cjs`),require(`../../../../routes/llm-settings.cjs`);let t=require(`react`);t=e.__toESM(t,1),require(`react/jsx-runtime`);
+const e=require(`../../../../_virtual/_rolldown/runtime.cjs`);require(`../../../../utils/custom-toast-handlers.cjs`),require(`../../../../api/profiles-service/profiles-service.api.cjs`),require(`../../../../hooks/query/use-llm-profiles.cjs`),require(`../../../../hooks/query/use-settings.cjs`),require(`../../../../ui/typography.cjs`),require(`../brand-button.cjs`),require(`../../../../hooks/query/use-agent-settings-schema.cjs`),require(`./profile-name-input.cjs`),require(`../../../../hooks/mutation/use-activate-llm-profile.cjs`),require(`../../../../hooks/mutation/use-save-llm-profile.cjs`),require(`./llm-profiles-manager.cjs`),require(`../../../shared/buttons/back-nav-button.cjs`),require(`../../../../contexts/settings-section-header-context.cjs`),require(`../../../../routes/llm-settings.cjs`);let t=require(`react`);t=e.__toESM(t,1),require(`react/jsx-runtime`);

package/dist/components/features/settings/llm-profiles/llm-settings-local-view.js

@@ -1,7 +1,7 @@
 import "../../../../utils/custom-toast-handlers.js";
 import "../../../../api/profiles-service/profiles-service.api.js";
-import "../../../../hooks/query/use-settings.js";
 import "../../../../hooks/query/use-llm-profiles.js";
+import "../../../../hooks/query/use-settings.js";
 import "../../../../ui/typography.js";
 import "../brand-button.js";
 import "../../../../hooks/query/use-agent-settings-schema.js";

package/dist/components/features/settings/settings-desktop-sidebar.cjs

@@ -1,2 +1,2 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../utils/utils.cjs`),r=require(`../../../ui/typography.cjs`),i=require(`../sidebar/sidebar-nav-link.cjs`),a=require(`./backend-synced-settings-badge.cjs`),o=require(`./cloud-settings-link.cjs`);let s=require(`react/jsx-runtime`);function c({navigationItems:c}){let{t:l}=e.useTranslation(`openhands`),u=c.filter(e=>e.type===`item`);return(0,s.jsxs)(`aside`,{"data-testid":`settings-navbar-desktop`,className:n.cn(`hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2`,`md:sticky md:top-8 md:self-start md:pl-8`),children:[(0,s.jsx)(r.Typography.Text,{className:`px-2 text-sm font-normal text-white`,children:l(t.I18nKey.SETTINGS$TITLE)}),(0,s.jsxs)(`div`,{className:`flex flex-col gap-0.5 pt-0.5`,children:[u.map(e=>(0,s.jsx)(i.SidebarNavLink,{to:e.item.to,label:l(e.item.text),end:!0,testId:`sidebar-settings-${e.item.to}`,icon:e.item.icon,disabled:e.disabled,disabledReason:e.disabled&&e.disabledAgentName?l(t.I18nKey.SETTINGS$AGENT_DISABLED_TOOLTIP,{agentName:e.disabledAgentName}):void 0},e.item.to)),(0,s.jsx)(o.CloudSettingsLink,{})]}),(0,s.jsx)(`div`,{className:`px-2 pt-3`,children:(0,s.jsx)(a.BackendSyncedSettingsBadge,{})})]})}exports.SettingsDesktopSidebar=c;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../utils/utils.cjs`),r=require(`../../../ui/typography.cjs`),i=require(`../sidebar/sidebar-nav-link.cjs`),a=require(`./agent-canvas-update-card.cjs`),o=require(`./backend-synced-settings-badge.cjs`),s=require(`./cloud-settings-link.cjs`),c=require(`./integrations-settings-link.cjs`);let l=require(`react/jsx-runtime`);function u({navigationItems:u}){let{t:d}=e.useTranslation(`openhands`),f=u.filter(e=>e.type===`item`);return(0,l.jsxs)(`aside`,{"data-testid":`settings-navbar-desktop`,className:n.cn(`hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2`,`md:sticky md:top-8 md:self-start md:pl-8`),children:[(0,l.jsx)(r.Typography.Text,{className:`px-2 text-sm font-normal text-white`,children:d(t.I18nKey.SETTINGS$TITLE)}),(0,l.jsxs)(`div`,{className:`flex flex-col gap-0.5 pt-0.5`,children:[f.map(e=>(0,l.jsx)(i.SidebarNavLink,{to:e.item.to,label:d(e.item.text),end:!0,testId:`sidebar-settings-${e.item.to}`,icon:e.item.icon,disabled:e.disabled,disabledReason:e.disabled&&e.disabledAgentName?d(t.I18nKey.SETTINGS$AGENT_DISABLED_TOOLTIP,{agentName:e.disabledAgentName}):void 0},e.item.to)),(0,l.jsx)(c.IntegrationsSettingsLink,{}),(0,l.jsx)(s.CloudSettingsLink,{})]}),(0,l.jsx)(`div`,{className:`px-2 pt-3`,children:(0,l.jsx)(a.AgentCanvasUpdateCard,{})}),(0,l.jsx)(`div`,{className:`px-2 pt-3`,children:(0,l.jsx)(o.BackendSyncedSettingsBadge,{})})]})}exports.SettingsDesktopSidebar=u;
 //# sourceMappingURL=settings-desktop-sidebar.cjs.map

package/dist/components/features/settings/settings-desktop-sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"settings-desktop-sidebar.cjs","names":[],"sources":["../../../../src/components/features/settings/settings-desktop-sidebar.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { SettingsNavRenderedItem } from \"#/hooks/use-settings-nav-items\";\nimport { SidebarNavLink } from \"#/components/features/sidebar/sidebar-nav-link\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport { CloudSettingsLink } from \"#/components/features/settings/cloud-settings-link\";\n\ninterface SettingsDesktopSidebarProps {\n  navigationItems: SettingsNavRenderedItem[];\n}\n\n/**\n * Desktop sidebar — sibling of the scrolling main column (same pattern as\n * {@link ExtensionsNavigation}). Mobile drawer stays `position: fixed` outside\n * this row in the layout.\n */\nexport function SettingsDesktopSidebar({\n  navigationItems,\n}: SettingsDesktopSidebarProps) {\n  const { t } = useTranslation(\"openhands\");\n  const desktopNavItems = navigationItems.filter(\n    (item): item is Extract<SettingsNavRenderedItem, { type: \"item\" }> =>\n      item.type === \"item\",\n  );\n\n  return (\n    <aside\n      data-testid=\"settings-navbar-desktop\"\n      className={cn(\n        \"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2\",\n        \"md:sticky md:top-8 md:self-start md:pl-8\",\n      )}\n    >\n      <Typography.Text className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.SETTINGS$TITLE)}\n      </Typography.Text>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {desktopNavItems.map((renderedItem) => (\n          <SidebarNavLink\n            key={renderedItem.item.to}\n            to={renderedItem.item.to}\n            label={t(renderedItem.item.text as I18nKey)}\n            end\n            testId={`sidebar-settings-${renderedItem.item.to}`}\n            icon={renderedItem.item.icon}\n            // Items marked ``disabledByAcp`` (LLM, Condenser, …) are greyed\n            // out and un-clickable while an ACP agent is active — those\n            // pages have nothing to configure while a separate sub-agent\n            // owns the LLM/condenser/MCP layers. The mobile drawer below\n            // already does this via ``SettingsNavLink``; do the same on\n            // desktop. The clientLoader-side redirect in ``routes/\n            // settings.tsx`` handles direct URL navigation.\n            disabled={renderedItem.disabled}\n            disabledReason={\n              renderedItem.disabled && renderedItem.disabledAgentName\n                ? t(I18nKey.SETTINGS$AGENT_DISABLED_TOOLTIP, {\n                    agentName: renderedItem.disabledAgentName,\n                  })\n                : undefined\n            }\n          />\n        ))}\n        <CloudSettingsLink />\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":"saAkBA,SAAgB,EAAuB,CACrC,mBAC8B,CAC9B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,EAAkB,EAAgB,OACrC,GACC,EAAK,OAAS,OACjB,CAED,OACE,EAAA,EAAA,MAAC,QAAD,CACE,cAAY,0BACZ,UAAW,EAAA,GACT,+DACA,2CACD,UALH,EAOE,EAAA,EAAA,KAAC,EAAA,WAAW,KAAZ,CAAiB,UAAU,+CACxB,EAAE,EAAA,QAAQ,eAAe,CACV,CAAA,EAClB,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,wCAAf,CACG,EAAgB,IAAK,IACpB,EAAA,EAAA,KAAC,EAAA,eAAD,CAEE,GAAI,EAAa,KAAK,GACtB,MAAO,EAAE,EAAa,KAAK,KAAgB,CAC3C,IAAA,GACA,OAAQ,oBAAoB,EAAa,KAAK,KAC9C,KAAM,EAAa,KAAK,KAQxB,SAAU,EAAa,SACvB,eACE,EAAa,UAAY,EAAa,kBAClC,EAAE,EAAA,QAAQ,gCAAiC,CACzC,UAAW,EAAa,kBACzB,CAAC,CACF,IAAA,GAEN,CArBK,EAAa,KAAK,GAqBvB,CACF,EACF,EAAA,EAAA,KAAC,EAAA,kBAAD,EAAqB,CAAA,CACjB,IACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,2BAAD,EAA8B,CAAA,CAC1B,CAAA,CACA"}
+{"version":3,"file":"settings-desktop-sidebar.cjs","names":[],"sources":["../../../../src/components/features/settings/settings-desktop-sidebar.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { SettingsNavRenderedItem } from \"#/hooks/use-settings-nav-items\";\nimport { SidebarNavLink } from \"#/components/features/sidebar/sidebar-nav-link\";\nimport { AgentCanvasUpdateCard } from \"#/components/features/settings/agent-canvas-update-card\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport { CloudSettingsLink } from \"#/components/features/settings/cloud-settings-link\";\nimport { IntegrationsSettingsLink } from \"#/components/features/settings/integrations-settings-link\";\n\ninterface SettingsDesktopSidebarProps {\n  navigationItems: SettingsNavRenderedItem[];\n}\n\n/**\n * Desktop sidebar — sibling of the scrolling main column (same pattern as\n * {@link ExtensionsNavigation}). Mobile drawer stays `position: fixed` outside\n * this row in the layout.\n */\nexport function SettingsDesktopSidebar({\n  navigationItems,\n}: SettingsDesktopSidebarProps) {\n  const { t } = useTranslation(\"openhands\");\n  const desktopNavItems = navigationItems.filter(\n    (item): item is Extract<SettingsNavRenderedItem, { type: \"item\" }> =>\n      item.type === \"item\",\n  );\n\n  return (\n    <aside\n      data-testid=\"settings-navbar-desktop\"\n      className={cn(\n        \"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2\",\n        \"md:sticky md:top-8 md:self-start md:pl-8\",\n      )}\n    >\n      <Typography.Text className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.SETTINGS$TITLE)}\n      </Typography.Text>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {desktopNavItems.map((renderedItem) => (\n          <SidebarNavLink\n            key={renderedItem.item.to}\n            to={renderedItem.item.to}\n            label={t(renderedItem.item.text as I18nKey)}\n            end\n            testId={`sidebar-settings-${renderedItem.item.to}`}\n            icon={renderedItem.item.icon}\n            // Items marked ``disabledByAcp`` (LLM, Condenser, …) are greyed\n            // out and un-clickable while an ACP agent is active — those\n            // pages have nothing to configure while a separate sub-agent\n            // owns the LLM/condenser/MCP layers. The mobile drawer below\n            // already does this via ``SettingsNavLink``; do the same on\n            // desktop. The clientLoader-side redirect in ``routes/\n            // settings.tsx`` handles direct URL navigation.\n            disabled={renderedItem.disabled}\n            disabledReason={\n              renderedItem.disabled && renderedItem.disabledAgentName\n                ? t(I18nKey.SETTINGS$AGENT_DISABLED_TOOLTIP, {\n                    agentName: renderedItem.disabledAgentName,\n                  })\n                : undefined\n            }\n          />\n        ))}\n        <IntegrationsSettingsLink />\n        <CloudSettingsLink />\n      </div>\n      <div className=\"px-2 pt-3\">\n        <AgentCanvasUpdateCard />\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":"ggBAoBA,SAAgB,EAAuB,CACrC,mBAC8B,CAC9B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CACnC,EAAkB,EAAgB,OACrC,GACC,EAAK,OAAS,OACjB,CAED,OACE,EAAA,EAAA,MAAC,QAAD,CACE,cAAY,0BACZ,UAAW,EAAA,GACT,+DACA,2CACD,UALH,EAOE,EAAA,EAAA,KAAC,EAAA,WAAW,KAAZ,CAAiB,UAAU,+CACxB,EAAE,EAAA,QAAQ,eAAe,CACV,CAAA,EAClB,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,wCAAf,CACG,EAAgB,IAAK,IACpB,EAAA,EAAA,KAAC,EAAA,eAAD,CAEE,GAAI,EAAa,KAAK,GACtB,MAAO,EAAE,EAAa,KAAK,KAAgB,CAC3C,IAAA,GACA,OAAQ,oBAAoB,EAAa,KAAK,KAC9C,KAAM,EAAa,KAAK,KAQxB,SAAU,EAAa,SACvB,eACE,EAAa,UAAY,EAAa,kBAClC,EAAE,EAAA,QAAQ,gCAAiC,CACzC,UAAW,EAAa,kBACzB,CAAC,CACF,IAAA,GAEN,CArBK,EAAa,KAAK,GAqBvB,CACF,EACF,EAAA,EAAA,KAAC,EAAA,yBAAD,EAA4B,CAAA,EAC5B,EAAA,EAAA,KAAC,EAAA,kBAAD,EAAqB,CAAA,CACjB,IACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,sBAAD,EAAyB,CAAA,CACrB,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,2BAAD,EAA8B,CAAA,CAC1B,CAAA,CACA"}

package/dist/components/features/settings/settings-desktop-sidebar.js

@@ -3,40 +3,50 @@ import { I18nKey as t } from "../../../i18n/declaration.js";
 import { cn as n } from "../../../utils/utils.js";
 import { Typography as r } from "../../../ui/typography.js";
 import { SidebarNavLink as i } from "../sidebar/sidebar-nav-link.js";
-import { BackendSyncedSettingsBadge as a } from "./backend-synced-settings-badge.js";
-import { CloudSettingsLink as o } from "./cloud-settings-link.js";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { AgentCanvasUpdateCard as a } from "./agent-canvas-update-card.js";
+import { BackendSyncedSettingsBadge as o } from "./backend-synced-settings-badge.js";
+import { CloudSettingsLink as s } from "./cloud-settings-link.js";
+import { IntegrationsSettingsLink as c } from "./integrations-settings-link.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/features/settings/settings-desktop-sidebar.tsx
-function l({ navigationItems: l }) {
-	let { t: u } = e("openhands"), d = l.filter((e) => e.type === "item");
-	return /* @__PURE__ */ c("aside", {
+function d({ navigationItems: d }) {
+	let { t: f } = e("openhands"), p = d.filter((e) => e.type === "item");
+	return /* @__PURE__ */ u("aside", {
 		"data-testid": "settings-navbar-desktop",
 		className: n("hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2", "md:sticky md:top-8 md:self-start md:pl-8"),
 		children: [
-			/* @__PURE__ */ s(r.Text, {
+			/* @__PURE__ */ l(r.Text, {
 				className: "px-2 text-sm font-normal text-white",
-				children: u(t.SETTINGS$TITLE)
+				children: f(t.SETTINGS$TITLE)
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ u("div", {
 				className: "flex flex-col gap-0.5 pt-0.5",
-				children: [d.map((e) => /* @__PURE__ */ s(i, {
-					to: e.item.to,
-					label: u(e.item.text),
-					end: !0,
-					testId: `sidebar-settings-${e.item.to}`,
-					icon: e.item.icon,
-					disabled: e.disabled,
-					disabledReason: e.disabled && e.disabledAgentName ? u(t.SETTINGS$AGENT_DISABLED_TOOLTIP, { agentName: e.disabledAgentName }) : void 0
-				}, e.item.to)), /* @__PURE__ */ s(o, {})]
+				children: [
+					p.map((e) => /* @__PURE__ */ l(i, {
+						to: e.item.to,
+						label: f(e.item.text),
+						end: !0,
+						testId: `sidebar-settings-${e.item.to}`,
+						icon: e.item.icon,
+						disabled: e.disabled,
+						disabledReason: e.disabled && e.disabledAgentName ? f(t.SETTINGS$AGENT_DISABLED_TOOLTIP, { agentName: e.disabledAgentName }) : void 0
+					}, e.item.to)),
+					/* @__PURE__ */ l(c, {}),
+					/* @__PURE__ */ l(s, {})
+				]
 			}),
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ l("div", {
 				className: "px-2 pt-3",
-				children: /* @__PURE__ */ s(a, {})
+				children: /* @__PURE__ */ l(a, {})
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "px-2 pt-3",
+				children: /* @__PURE__ */ l(o, {})
 			})
 		]
 	});
 }
 //#endregion
-export { l as SettingsDesktopSidebar };
+export { d as SettingsDesktopSidebar };
 
 //# sourceMappingURL=settings-desktop-sidebar.js.map

package/dist/components/features/settings/settings-desktop-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-desktop-sidebar.js","names":[],"sources":["../../../../src/components/features/settings/settings-desktop-sidebar.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { SettingsNavRenderedItem } from \"#/hooks/use-settings-nav-items\";\nimport { SidebarNavLink } from \"#/components/features/sidebar/sidebar-nav-link\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport { CloudSettingsLink } from \"#/components/features/settings/cloud-settings-link\";\n\ninterface SettingsDesktopSidebarProps {\n  navigationItems: SettingsNavRenderedItem[];\n}\n\n/**\n * Desktop sidebar — sibling of the scrolling main column (same pattern as\n * {@link ExtensionsNavigation}). Mobile drawer stays `position: fixed` outside\n * this row in the layout.\n */\nexport function SettingsDesktopSidebar({\n  navigationItems,\n}: SettingsDesktopSidebarProps) {\n  const { t } = useTranslation(\"openhands\");\n  const desktopNavItems = navigationItems.filter(\n    (item): item is Extract<SettingsNavRenderedItem, { type: \"item\" }> =>\n      item.type === \"item\",\n  );\n\n  return (\n    <aside\n      data-testid=\"settings-navbar-desktop\"\n      className={cn(\n        \"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2\",\n        \"md:sticky md:top-8 md:self-start md:pl-8\",\n      )}\n    >\n      <Typography.Text className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.SETTINGS$TITLE)}\n      </Typography.Text>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {desktopNavItems.map((renderedItem) => (\n          <SidebarNavLink\n            key={renderedItem.item.to}\n            to={renderedItem.item.to}\n            label={t(renderedItem.item.text as I18nKey)}\n            end\n            testId={`sidebar-settings-${renderedItem.item.to}`}\n            icon={renderedItem.item.icon}\n            // Items marked ``disabledByAcp`` (LLM, Condenser, …) are greyed\n            // out and un-clickable while an ACP agent is active — those\n            // pages have nothing to configure while a separate sub-agent\n            // owns the LLM/condenser/MCP layers. The mobile drawer below\n            // already does this via ``SettingsNavLink``; do the same on\n            // desktop. The clientLoader-side redirect in ``routes/\n            // settings.tsx`` handles direct URL navigation.\n            disabled={renderedItem.disabled}\n            disabledReason={\n              renderedItem.disabled && renderedItem.disabledAgentName\n                ? t(I18nKey.SETTINGS$AGENT_DISABLED_TOOLTIP, {\n                    agentName: renderedItem.disabledAgentName,\n                  })\n                : undefined\n            }\n          />\n        ))}\n        <CloudSettingsLink />\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAgB,EAAuB,EACrC,sBAC8B;CAC9B,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,IAAkB,EAAgB,QACrC,MACC,EAAK,SAAS,OACjB;AAED,QACE,kBAAC,SAAD;EACE,eAAY;EACZ,WAAW,EACT,gEACA,2CACD;YALH;GAOE,kBAAC,EAAW,MAAZ;IAAiB,WAAU;cACxB,EAAE,EAAQ,eAAe;IACV,CAAA;GAClB,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAgB,KAAK,MACpB,kBAAC,GAAD;KAEE,IAAI,EAAa,KAAK;KACtB,OAAO,EAAE,EAAa,KAAK,KAAgB;KAC3C,KAAA;KACA,QAAQ,oBAAoB,EAAa,KAAK;KAC9C,MAAM,EAAa,KAAK;KAQxB,UAAU,EAAa;KACvB,gBACE,EAAa,YAAY,EAAa,oBAClC,EAAE,EAAQ,iCAAiC,EACzC,WAAW,EAAa,mBACzB,CAAC,GACF,KAAA;KAEN,EArBK,EAAa,KAAK,GAqBvB,CACF,EACF,kBAAC,GAAD,EAAqB,CAAA,CACjB;;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAA8B,CAAA;IAC1B,CAAA;GACA"}
+{"version":3,"file":"settings-desktop-sidebar.js","names":[],"sources":["../../../../src/components/features/settings/settings-desktop-sidebar.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { SettingsNavRenderedItem } from \"#/hooks/use-settings-nav-items\";\nimport { SidebarNavLink } from \"#/components/features/sidebar/sidebar-nav-link\";\nimport { AgentCanvasUpdateCard } from \"#/components/features/settings/agent-canvas-update-card\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport { CloudSettingsLink } from \"#/components/features/settings/cloud-settings-link\";\nimport { IntegrationsSettingsLink } from \"#/components/features/settings/integrations-settings-link\";\n\ninterface SettingsDesktopSidebarProps {\n  navigationItems: SettingsNavRenderedItem[];\n}\n\n/**\n * Desktop sidebar — sibling of the scrolling main column (same pattern as\n * {@link ExtensionsNavigation}). Mobile drawer stays `position: fixed` outside\n * this row in the layout.\n */\nexport function SettingsDesktopSidebar({\n  navigationItems,\n}: SettingsDesktopSidebarProps) {\n  const { t } = useTranslation(\"openhands\");\n  const desktopNavItems = navigationItems.filter(\n    (item): item is Extract<SettingsNavRenderedItem, { type: \"item\" }> =>\n      item.type === \"item\",\n  );\n\n  return (\n    <aside\n      data-testid=\"settings-navbar-desktop\"\n      className={cn(\n        \"hidden md:flex md:w-[260px] md:shrink-0 md:flex-col md:gap-2\",\n        \"md:sticky md:top-8 md:self-start md:pl-8\",\n      )}\n    >\n      <Typography.Text className=\"px-2 text-sm font-normal text-white\">\n        {t(I18nKey.SETTINGS$TITLE)}\n      </Typography.Text>\n      <div className=\"flex flex-col gap-0.5 pt-0.5\">\n        {desktopNavItems.map((renderedItem) => (\n          <SidebarNavLink\n            key={renderedItem.item.to}\n            to={renderedItem.item.to}\n            label={t(renderedItem.item.text as I18nKey)}\n            end\n            testId={`sidebar-settings-${renderedItem.item.to}`}\n            icon={renderedItem.item.icon}\n            // Items marked ``disabledByAcp`` (LLM, Condenser, …) are greyed\n            // out and un-clickable while an ACP agent is active — those\n            // pages have nothing to configure while a separate sub-agent\n            // owns the LLM/condenser/MCP layers. The mobile drawer below\n            // already does this via ``SettingsNavLink``; do the same on\n            // desktop. The clientLoader-side redirect in ``routes/\n            // settings.tsx`` handles direct URL navigation.\n            disabled={renderedItem.disabled}\n            disabledReason={\n              renderedItem.disabled && renderedItem.disabledAgentName\n                ? t(I18nKey.SETTINGS$AGENT_DISABLED_TOOLTIP, {\n                    agentName: renderedItem.disabledAgentName,\n                  })\n                : undefined\n            }\n          />\n        ))}\n        <IntegrationsSettingsLink />\n        <CloudSettingsLink />\n      </div>\n      <div className=\"px-2 pt-3\">\n        <AgentCanvasUpdateCard />\n      </div>\n      <div className=\"px-2 pt-3\">\n        <BackendSyncedSettingsBadge />\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAoBA,SAAgB,EAAuB,EACrC,sBAC8B;CAC9B,IAAM,EAAE,SAAM,EAAe,YAAY,EACnC,IAAkB,EAAgB,QACrC,MACC,EAAK,SAAS,OACjB;AAED,QACE,kBAAC,SAAD;EACE,eAAY;EACZ,WAAW,EACT,gEACA,2CACD;YALH;GAOE,kBAAC,EAAW,MAAZ;IAAiB,WAAU;cACxB,EAAE,EAAQ,eAAe;IACV,CAAA;GAClB,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,EAAgB,KAAK,MACpB,kBAAC,GAAD;MAEE,IAAI,EAAa,KAAK;MACtB,OAAO,EAAE,EAAa,KAAK,KAAgB;MAC3C,KAAA;MACA,QAAQ,oBAAoB,EAAa,KAAK;MAC9C,MAAM,EAAa,KAAK;MAQxB,UAAU,EAAa;MACvB,gBACE,EAAa,YAAY,EAAa,oBAClC,EAAE,EAAQ,iCAAiC,EACzC,WAAW,EAAa,mBACzB,CAAC,GACF,KAAA;MAEN,EArBK,EAAa,KAAK,GAqBvB,CACF;KACF,kBAAC,GAAD,EAA4B,CAAA;KAC5B,kBAAC,GAAD,EAAqB,CAAA;KACjB;;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAyB,CAAA;IACrB,CAAA;GACN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAA8B,CAAA;IAC1B,CAAA;GACA"}

package/dist/components/features/settings/settings-mobile-drawer.cjs

@@ -1,2 +1,2 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../utils/utils.cjs`),r=require(`../../../ui/typography.cjs`),i=require(`../../../icons/settings-gear.cjs`),a=require(`../../../icons/close.cjs`),o=require(`../sidebar/sidebar-layout.cjs`),s=require(`./backend-synced-settings-badge.cjs`),c=require(`./cloud-settings-link.cjs`),l=require(`./settings-nav-header.cjs`),u=require(`./settings-nav-divider.cjs`),d=require(`./settings-nav-link.cjs`);let f=require(`react/jsx-runtime`);function p({isMobileMenuOpen:p,onCloseMobileMenu:m,navigationItems:h}){let{t:g}=e.useTranslation(`openhands`);return(0,f.jsxs)(f.Fragment,{children:[p&&(0,f.jsx)(`div`,{className:`fixed inset-0 z-40 bg-black bg-opacity-50 md:hidden`,onClick:m}),(0,f.jsxs)(`nav`,{"data-testid":`settings-navbar`,className:n.cn(`flex flex-col gap-6 transition-transform duration-300 ease-in-out`,`fixed inset-0 z-50 w-full bg-[var(--oh-surface-deep)] p-4 transform md:hidden`,p?`translate-x-0`:`-translate-x-full`),children:[(0,f.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,f.jsxs)(`div`,{className:`ml-1 flex items-center gap-2 sm:ml-4.5`,children:[(0,f.jsx)(i.default,{width:16,height:16}),(0,f.jsx)(r.Typography.H2,{children:g(t.I18nKey.SETTINGS$TITLE)})]}),(0,f.jsx)(`button`,{type:`button`,onClick:m,className:n.cn(`cursor-pointer rounded-md p-0.5 hover:bg-tertiary md:hidden`,o.navInteractiveTransitionClassName),"aria-label":g(t.I18nKey.SIDEBAR$CLOSE_MENU),children:(0,f.jsx)(a.default,{width:32,height:32})})]}),(0,f.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[h.map((e,t)=>e.type===`header`?(0,f.jsx)(l.SettingsNavHeader,{text:e.text},`header-${e.text}`):e.type===`divider`?(0,f.jsx)(u.SettingsNavDivider,{},`divider-${t}`):(0,f.jsx)(d.SettingsNavLink,{item:e.item,onClick:m,disabled:e.disabled,disabledAgentName:e.disabledAgentName},e.item.to)),(0,f.jsx)(c.CloudSettingsLink,{})]}),(0,f.jsx)(`div`,{className:`px-2 pt-3`,children:(0,f.jsx)(s.BackendSyncedSettingsBadge,{})})]})]})}exports.SettingsMobileDrawer=p;
+require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../node_modules/react-i18next/dist/es/useTranslation.cjs`),t=require(`../../../i18n/declaration.cjs`),n=require(`../../../utils/utils.cjs`),r=require(`../../../ui/typography.cjs`),i=require(`../../../icons/settings-gear.cjs`),a=require(`../../../icons/close.cjs`),o=require(`../sidebar/sidebar-layout.cjs`),s=require(`./agent-canvas-update-card.cjs`),c=require(`./backend-synced-settings-badge.cjs`),l=require(`./cloud-settings-link.cjs`),u=require(`./integrations-settings-link.cjs`),d=require(`./settings-nav-header.cjs`),f=require(`./settings-nav-divider.cjs`),p=require(`./settings-nav-link.cjs`);let m=require(`react/jsx-runtime`);function h({isMobileMenuOpen:h,onCloseMobileMenu:g,navigationItems:_}){let{t:v}=e.useTranslation(`openhands`);return(0,m.jsxs)(m.Fragment,{children:[h&&(0,m.jsx)(`div`,{className:`fixed inset-0 z-40 bg-black bg-opacity-50 md:hidden`,onClick:g}),(0,m.jsxs)(`nav`,{"data-testid":`settings-navbar`,className:n.cn(`flex flex-col gap-6 transition-transform duration-300 ease-in-out`,`fixed inset-0 z-50 w-full bg-[var(--oh-surface-deep)] p-4 transform md:hidden`,h?`translate-x-0`:`-translate-x-full`),children:[(0,m.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,m.jsxs)(`div`,{className:`ml-1 flex items-center gap-2 sm:ml-4.5`,children:[(0,m.jsx)(i.default,{width:16,height:16}),(0,m.jsx)(r.Typography.H2,{children:v(t.I18nKey.SETTINGS$TITLE)})]}),(0,m.jsx)(`button`,{type:`button`,onClick:g,className:n.cn(`cursor-pointer rounded-md p-0.5 hover:bg-tertiary md:hidden`,o.navInteractiveTransitionClassName),"aria-label":v(t.I18nKey.SIDEBAR$CLOSE_MENU),children:(0,m.jsx)(a.default,{width:32,height:32})})]}),(0,m.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[_.map((e,t)=>e.type===`header`?(0,m.jsx)(d.SettingsNavHeader,{text:e.text},`header-${e.text}`):e.type===`divider`?(0,m.jsx)(f.SettingsNavDivider,{},`divider-${t}`):(0,m.jsx)(p.SettingsNavLink,{item:e.item,onClick:g,disabled:e.disabled,disabledAgentName:e.disabledAgentName},e.item.to)),(0,m.jsx)(u.IntegrationsSettingsLink,{}),(0,m.jsx)(l.CloudSettingsLink,{})]}),(0,m.jsx)(`div`,{className:`px-2 pt-3`,children:(0,m.jsx)(s.AgentCanvasUpdateCard,{})}),(0,m.jsx)(`div`,{className:`px-2 pt-3`,children:(0,m.jsx)(c.BackendSyncedSettingsBadge,{})})]})]})}exports.SettingsMobileDrawer=h;
 //# sourceMappingURL=settings-mobile-drawer.cjs.map

package/dist/components/features/settings/settings-mobile-drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"settings-mobile-drawer.cjs","names":[],"sources":["../../../../src/components/features/settings/settings-mobile-drawer.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport SettingsIcon from \"#/icons/settings-gear.svg?react\";\nimport CloseIcon from \"#/icons/close.svg?react\";\nimport { SettingsNavRenderedItem } from \"#/hooks/use-settings-nav-items\";\nimport { SettingsNavHeader } from \"./settings-nav-header\";\nimport { SettingsNavDivider } from \"./settings-nav-divider\";\nimport { SettingsNavLink } from \"./settings-nav-link\";\nimport { navInteractiveTransitionClassName } from \"#/components/features/sidebar/sidebar-layout\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport { CloudSettingsLink } from \"#/components/features/settings/cloud-settings-link\";\n\ninterface SettingsMobileDrawerProps {\n  isMobileMenuOpen: boolean;\n  onCloseMobileMenu: () => void;\n  navigationItems: SettingsNavRenderedItem[];\n}\n\n/**\n * Mobile overlay + drawer. Rendered outside the scrolling flex row so `position:\n * fixed` does not interact with flex item sizing on desktop.\n */\nexport function SettingsMobileDrawer({\n  isMobileMenuOpen,\n  onCloseMobileMenu,\n  navigationItems,\n}: SettingsMobileDrawerProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <>\n      {isMobileMenuOpen && (\n        <div\n          className=\"fixed inset-0 z-40 bg-black bg-opacity-50 md:hidden\"\n          onClick={onCloseMobileMenu}\n        />\n      )}\n      <nav\n        data-testid=\"settings-navbar\"\n        className={cn(\n          \"flex flex-col gap-6 transition-transform duration-300 ease-in-out\",\n          \"fixed inset-0 z-50 w-full bg-[var(--oh-surface-deep)] p-4 transform md:hidden\",\n          isMobileMenuOpen ? \"translate-x-0\" : \"-translate-x-full\",\n        )}\n      >\n        <div className=\"flex items-center justify-between\">\n          <div className=\"ml-1 flex items-center gap-2 sm:ml-4.5\">\n            <SettingsIcon width={16} height={16} />\n            <Typography.H2>{t(I18nKey.SETTINGS$TITLE)}</Typography.H2>\n          </div>\n          <button\n            type=\"button\"\n            onClick={onCloseMobileMenu}\n            className={cn(\n              \"cursor-pointer rounded-md p-0.5 hover:bg-tertiary md:hidden\",\n              navInteractiveTransitionClassName,\n            )}\n            aria-label={t(I18nKey.SIDEBAR$CLOSE_MENU)}\n          >\n            <CloseIcon width={32} height={32} />\n          </button>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          {navigationItems.map((renderedItem, index) => {\n            if (renderedItem.type === \"header\") {\n              return (\n                <SettingsNavHeader\n                  key={`header-${renderedItem.text}`}\n                  text={renderedItem.text}\n                />\n              );\n            }\n\n            if (renderedItem.type === \"divider\") {\n              return <SettingsNavDivider key={`divider-${index}`} />;\n            }\n\n            return (\n              <SettingsNavLink\n                key={renderedItem.item.to}\n                item={renderedItem.item}\n                onClick={onCloseMobileMenu}\n                disabled={renderedItem.disabled}\n                disabledAgentName={renderedItem.disabledAgentName}\n              />\n            );\n          })}\n          <CloudSettingsLink />\n        </div>\n\n        <div className=\"px-2 pt-3\">\n          <BackendSyncedSettingsBadge />\n        </div>\n      </nav>\n    </>\n  );\n}\n"],"mappings":"4mBAwBA,SAAgB,EAAqB,CACnC,mBACA,oBACA,mBAC4B,CAC5B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CAEzC,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,IACC,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,sDACV,QAAS,EACT,CAAA,EAEJ,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,kBACZ,UAAW,EAAA,GACT,oEACA,gFACA,EAAmB,gBAAkB,oBACtC,UANH,EAQE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,6CAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kDAAf,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAc,MAAO,GAAI,OAAQ,GAAM,CAAA,EACvC,EAAA,EAAA,KAAC,EAAA,WAAW,GAAZ,CAAA,SAAgB,EAAE,EAAA,QAAQ,eAAe,CAAiB,CAAA,CACtD,IACN,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,UAAW,EAAA,GACT,8DACA,EAAA,kCACD,CACD,aAAY,EAAE,EAAA,QAAQ,mBAAmB,WAEzC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAW,MAAO,GAAI,OAAQ,GAAM,CAAA,CAC7B,CAAA,CACL,IAEN,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+BAAf,CACG,EAAgB,KAAK,EAAc,IAC9B,EAAa,OAAS,UAEtB,EAAA,EAAA,KAAC,EAAA,kBAAD,CAEE,KAAM,EAAa,KACnB,CAFK,UAAU,EAAa,OAE5B,CAIF,EAAa,OAAS,WACjB,EAAA,EAAA,KAAC,EAAA,mBAAD,EAA+C,CAAtB,WAAW,IAAW,EAItD,EAAA,EAAA,KAAC,EAAA,gBAAD,CAEE,KAAM,EAAa,KACnB,QAAS,EACT,SAAU,EAAa,SACvB,kBAAmB,EAAa,kBAChC,CALK,EAAa,KAAK,GAKvB,CAEJ,EACF,EAAA,EAAA,KAAC,EAAA,kBAAD,EAAqB,CAAA,CACjB,IAEN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,2BAAD,EAA8B,CAAA,CAC1B,CAAA,CACF,GACL,CAAA,CAAA"}
+{"version":3,"file":"settings-mobile-drawer.cjs","names":[],"sources":["../../../../src/components/features/settings/settings-mobile-drawer.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { cn } from \"#/utils/utils\";\nimport { Typography } from \"#/ui/typography\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport SettingsIcon from \"#/icons/settings-gear.svg?react\";\nimport CloseIcon from \"#/icons/close.svg?react\";\nimport { SettingsNavRenderedItem } from \"#/hooks/use-settings-nav-items\";\nimport { SettingsNavHeader } from \"./settings-nav-header\";\nimport { SettingsNavDivider } from \"./settings-nav-divider\";\nimport { SettingsNavLink } from \"./settings-nav-link\";\nimport { navInteractiveTransitionClassName } from \"#/components/features/sidebar/sidebar-layout\";\nimport { AgentCanvasUpdateCard } from \"#/components/features/settings/agent-canvas-update-card\";\nimport { BackendSyncedSettingsBadge } from \"#/components/features/settings/backend-synced-settings-badge\";\nimport { CloudSettingsLink } from \"#/components/features/settings/cloud-settings-link\";\nimport { IntegrationsSettingsLink } from \"#/components/features/settings/integrations-settings-link\";\n\ninterface SettingsMobileDrawerProps {\n  isMobileMenuOpen: boolean;\n  onCloseMobileMenu: () => void;\n  navigationItems: SettingsNavRenderedItem[];\n}\n\n/**\n * Mobile overlay + drawer. Rendered outside the scrolling flex row so `position:\n * fixed` does not interact with flex item sizing on desktop.\n */\nexport function SettingsMobileDrawer({\n  isMobileMenuOpen,\n  onCloseMobileMenu,\n  navigationItems,\n}: SettingsMobileDrawerProps) {\n  const { t } = useTranslation(\"openhands\");\n\n  return (\n    <>\n      {isMobileMenuOpen && (\n        <div\n          className=\"fixed inset-0 z-40 bg-black bg-opacity-50 md:hidden\"\n          onClick={onCloseMobileMenu}\n        />\n      )}\n      <nav\n        data-testid=\"settings-navbar\"\n        className={cn(\n          \"flex flex-col gap-6 transition-transform duration-300 ease-in-out\",\n          \"fixed inset-0 z-50 w-full bg-[var(--oh-surface-deep)] p-4 transform md:hidden\",\n          isMobileMenuOpen ? \"translate-x-0\" : \"-translate-x-full\",\n        )}\n      >\n        <div className=\"flex items-center justify-between\">\n          <div className=\"ml-1 flex items-center gap-2 sm:ml-4.5\">\n            <SettingsIcon width={16} height={16} />\n            <Typography.H2>{t(I18nKey.SETTINGS$TITLE)}</Typography.H2>\n          </div>\n          <button\n            type=\"button\"\n            onClick={onCloseMobileMenu}\n            className={cn(\n              \"cursor-pointer rounded-md p-0.5 hover:bg-tertiary md:hidden\",\n              navInteractiveTransitionClassName,\n            )}\n            aria-label={t(I18nKey.SIDEBAR$CLOSE_MENU)}\n          >\n            <CloseIcon width={32} height={32} />\n          </button>\n        </div>\n\n        <div className=\"flex flex-col gap-2\">\n          {navigationItems.map((renderedItem, index) => {\n            if (renderedItem.type === \"header\") {\n              return (\n                <SettingsNavHeader\n                  key={`header-${renderedItem.text}`}\n                  text={renderedItem.text}\n                />\n              );\n            }\n\n            if (renderedItem.type === \"divider\") {\n              return <SettingsNavDivider key={`divider-${index}`} />;\n            }\n\n            return (\n              <SettingsNavLink\n                key={renderedItem.item.to}\n                item={renderedItem.item}\n                onClick={onCloseMobileMenu}\n                disabled={renderedItem.disabled}\n                disabledAgentName={renderedItem.disabledAgentName}\n              />\n            );\n          })}\n          <IntegrationsSettingsLink />\n          <CloudSettingsLink />\n        </div>\n\n        <div className=\"px-2 pt-3\">\n          <AgentCanvasUpdateCard />\n        </div>\n\n        <div className=\"px-2 pt-3\">\n          <BackendSyncedSettingsBadge />\n        </div>\n      </nav>\n    </>\n  );\n}\n"],"mappings":"ssBA0BA,SAAgB,EAAqB,CACnC,mBACA,oBACA,mBAC4B,CAC5B,GAAM,CAAE,KAAM,EAAA,eAAe,YAAY,CAEzC,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,IACC,EAAA,EAAA,KAAC,MAAD,CACE,UAAU,sDACV,QAAS,EACT,CAAA,EAEJ,EAAA,EAAA,MAAC,MAAD,CACE,cAAY,kBACZ,UAAW,EAAA,GACT,oEACA,gFACA,EAAmB,gBAAkB,oBACtC,UANH,EAQE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,6CAAf,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kDAAf,EACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAAc,MAAO,GAAI,OAAQ,GAAM,CAAA,EACvC,EAAA,EAAA,KAAC,EAAA,WAAW,GAAZ,CAAA,SAAgB,EAAE,EAAA,QAAQ,eAAe,CAAiB,CAAA,CACtD,IACN,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,QAAS,EACT,UAAW,EAAA,GACT,8DACA,EAAA,kCACD,CACD,aAAY,EAAE,EAAA,QAAQ,mBAAmB,WAEzC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAW,MAAO,GAAI,OAAQ,GAAM,CAAA,CAC7B,CAAA,CACL,IAEN,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,+BAAf,CACG,EAAgB,KAAK,EAAc,IAC9B,EAAa,OAAS,UAEtB,EAAA,EAAA,KAAC,EAAA,kBAAD,CAEE,KAAM,EAAa,KACnB,CAFK,UAAU,EAAa,OAE5B,CAIF,EAAa,OAAS,WACjB,EAAA,EAAA,KAAC,EAAA,mBAAD,EAA+C,CAAtB,WAAW,IAAW,EAItD,EAAA,EAAA,KAAC,EAAA,gBAAD,CAEE,KAAM,EAAa,KACnB,QAAS,EACT,SAAU,EAAa,SACvB,kBAAmB,EAAa,kBAChC,CALK,EAAa,KAAK,GAKvB,CAEJ,EACF,EAAA,EAAA,KAAC,EAAA,yBAAD,EAA4B,CAAA,EAC5B,EAAA,EAAA,KAAC,EAAA,kBAAD,EAAqB,CAAA,CACjB,IAEN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,sBAAD,EAAyB,CAAA,CACrB,CAAA,EAEN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,sBACb,EAAA,EAAA,KAAC,EAAA,2BAAD,EAA8B,CAAA,CAC1B,CAAA,CACF,GACL,CAAA,CAAA"}