@openhands/agent-canvas 1.15.0 → 1.17.0

package/dist/components/features/settings/secrets-settings/secret-form.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../../i18n/declaration.cjs"),r=require("../../../../utils/utils.cjs"),i=require("../../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs"),a=require("../../../../utils/form-control-classes.cjs"),o=require("../brand-button.cjs"),s=require("../../../../hooks/mutation/use-create-secret.cjs"),c=require("../optional-tag.cjs"),l=require("../settings-input.cjs"),u=require("../../../../hooks/query/use-get-secrets.cjs"),d=require("../../../../hooks/mutation/use-update-secret.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");function m({mode:e,selectedSecret:m,onCancel:h}){let g=i.useQueryClient(),{t:_}=t.useTranslation(`openhands`),{data:v}=u.useSearchSecrets(),{mutate:y}=s.useCreateSecret(),{mutate:b}=d.useUpdateSecret(),[x,S]=f.default.useState(null),C=e===`edit`&&m&&v?.find(e=>e.name===m)?.description?.trim()||``,w=()=>{g.invalidateQueries({queryKey:[`secrets-search`]}),g.invalidateQueries({queryKey:[`secrets`]})},T=(e,t,n)=>{y({name:e,value:t,description:n},{onSettled:h,onSuccess:w})},E=(e,t,n,r)=>{b({secretToEdit:e,name:t,description:n,value:r},{onSettled:h,onSuccess:w})};return(0,p.jsxs)(`form`,{"data-testid":e===`add`?`add-secret-form`:`edit-secret-form`,onSubmit:t=>{t.preventDefault();let r=new FormData(t.currentTarget),i=r.get(`secret-name`)?.toString(),a=r.get(`secret-value`)?.toString().trim(),o=r.get(`secret-description`)?.toString();if(i){if(S(null),v?.some(e=>e.name===i&&e.name!==m)){S(_(n.I18nKey.SECRETS$SECRET_ALREADY_EXISTS));return}if(e===`add`){if(!a){S(_(n.I18nKey.SECRETS$SECRET_VALUE_REQUIRED));return}T(i,a,o||void 0)}else e===`edit`&&m&&E(m,i,o||void 0,a||void 0)}},className:`flex flex-col items-start gap-6`,children:[(0,p.jsx)(l.SettingsInput,{testId:`name-input`,name:`secret-name`,type:`text`,label:_(n.I18nKey.SETTINGS$NAME),className:`w-full min-w-0`,required:!0,defaultValue:e===`edit`&&m?m:``,placeholder:_(n.I18nKey.SECRETS$API_KEY_EXAMPLE),pattern:`^[a-zA-Z][a-zA-Z0-9_]{0,63}$`,title:_(n.I18nKey.SETTINGS$SECRET_NAME_PATTERN_TITLE)}),x&&(0,p.jsx)(`p`,{className:`text-red-500 text-sm`,children:x}),(0,p.jsxs)(`label`,{className:`flex flex-col gap-2.5 w-full min-w-0`,children:[(0,p.jsx)(`span`,{className:`text-sm`,children:_(e===`add`?n.I18nKey.FORM$VALUE:n.I18nKey.SECRETS$SECRET_VALUE_LEAVE_BLANK)}),(0,p.jsx)(`textarea`,{"data-testid":`value-input`,name:`secret-value`,required:e===`add`,className:r.cn(`resize-none`,a.formControlMultilineFieldClassName,`placeholder:italic`,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed`),rows:8})]}),(0,p.jsxs)(`label`,{className:`flex flex-col gap-2.5 w-full min-w-0`,children:[(0,p.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,p.jsx)(`span`,{className:`text-sm`,children:_(n.I18nKey.FORM$DESCRIPTION)}),(0,p.jsx)(c.OptionalTag,{})]}),(0,p.jsx)(`input`,{"data-testid":`description-input`,name:`secret-description`,defaultValue:C,className:r.cn(a.formControlSettingsFieldClassName,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]`)})]}),(0,p.jsxs)(`div`,{className:`flex items-center gap-4`,children:[(0,p.jsx)(o.BrandButton,{testId:`cancel-button`,type:`button`,variant:`secondary`,onClick:h,children:_(n.I18nKey.BUTTON$CANCEL)}),(0,p.jsxs)(o.BrandButton,{testId:`submit-button`,type:`submit`,variant:`primary`,children:[e===`add`&&_(n.I18nKey.SECRETS$ADD_SECRET),e===`edit`&&_(n.I18nKey.SECRETS$EDIT_SECRET)]})]})]})}exports.SecretForm=m;
+const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../../i18n/declaration.cjs"),r=require("../../../../utils/utils.cjs"),i=require("../../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs"),a=require("../../../../utils/form-control-classes.cjs"),o=require("../brand-button.cjs"),s=require("../../../../hooks/mutation/use-create-secret.cjs"),c=require("../optional-tag.cjs"),l=require("../settings-input.cjs"),u=require("../../../../hooks/query/use-get-secrets.cjs"),d=require("../../../../hooks/mutation/use-update-secret.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");function m({mode:e,selectedSecret:m,onCancel:h}){let g=i.useQueryClient(),{t:_}=t.useTranslation(`openhands`),{data:v}=u.useSearchSecrets(),{mutate:y}=s.useCreateSecret(),{mutate:b}=d.useUpdateSecret(),[x,S]=f.default.useState(null),[C,w]=f.default.useState(e===`edit`&&m?m:``),[T,E]=f.default.useState(``),[D,O]=f.default.useState(``),k=e===`edit`&&m&&v?.find(e=>e.name===m)?.description?.trim()||``,A=e===`edit`&&m?m:``;f.default.useEffect(()=>{w(e===`edit`&&m?m:``),E(``),O(k),S(null)},[e,m,k]);let j=()=>{g.invalidateQueries({queryKey:[`secrets-search`]}),g.invalidateQueries({queryKey:[`secrets`]})},M=(e,t,n)=>{y({name:e,value:t,description:n},{onSettled:h,onSuccess:j})},N=(e,t,n,r)=>{b({secretToEdit:e,name:t,description:n,value:r},{onSettled:h,onSuccess:j})},P=t=>{t.preventDefault();let r=C.trim(),i=T.trim(),a=D||void 0;if(r){if(S(null),v?.some(e=>e.name===r&&e.name!==m)){S(_(n.I18nKey.SECRETS$SECRET_ALREADY_EXISTS));return}if(e===`add`){if(!i){S(_(n.I18nKey.SECRETS$SECRET_VALUE_REQUIRED));return}M(r,i,a)}else e===`edit`&&m&&N(m,r,a,i||void 0)}},F=e===`add`?`add-secret-form`:`edit-secret-form`,I=e===`edit`&&(C.trim()!==A.trim()||D!==k||T.trim()!==``),L=e===`add`?!C.trim()||!T.trim():e===`edit`?!I:!1;return(0,p.jsxs)(`form`,{"data-testid":F,onSubmit:P,className:`flex flex-col items-start gap-6`,children:[(0,p.jsx)(l.SettingsInput,{testId:`name-input`,name:`secret-name`,type:`text`,label:_(n.I18nKey.SETTINGS$NAME),className:`w-full min-w-0`,required:!0,value:C,onChange:w,placeholder:_(n.I18nKey.SECRETS$API_KEY_EXAMPLE),pattern:`^[a-zA-Z][a-zA-Z0-9_]{0,63}$`,title:_(n.I18nKey.SETTINGS$SECRET_NAME_PATTERN_TITLE)}),x&&(0,p.jsx)(`p`,{className:`text-red-500 text-sm`,children:x}),(0,p.jsxs)(`label`,{className:`flex flex-col gap-2.5 w-full min-w-0`,children:[(0,p.jsx)(`span`,{className:`text-sm`,children:_(e===`add`?n.I18nKey.FORM$VALUE:n.I18nKey.SECRETS$SECRET_VALUE_LEAVE_BLANK)}),(0,p.jsx)(`textarea`,{"data-testid":`value-input`,name:`secret-value`,required:e===`add`,value:T,onChange:e=>E(e.currentTarget.value),className:r.cn(`resize-none`,a.formControlMultilineFieldClassName,`placeholder:italic`,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed`),rows:8})]}),(0,p.jsxs)(`label`,{className:`flex flex-col gap-2.5 w-full min-w-0`,children:[(0,p.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,p.jsx)(`span`,{className:`text-sm`,children:_(n.I18nKey.FORM$DESCRIPTION)}),(0,p.jsx)(c.OptionalTag,{})]}),(0,p.jsx)(`input`,{"data-testid":`description-input`,name:`secret-description`,value:D,onChange:e=>O(e.currentTarget.value),className:r.cn(a.formControlSettingsFieldClassName,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]`)})]}),(0,p.jsxs)(`div`,{className:`flex items-center gap-4`,children:[(0,p.jsx)(o.BrandButton,{testId:`cancel-button`,type:`button`,variant:`secondary`,onClick:h,children:_(n.I18nKey.BUTTON$CANCEL)}),(0,p.jsxs)(o.BrandButton,{testId:`submit-button`,type:`submit`,variant:`primary`,isDisabled:L,children:[e===`add`&&_(n.I18nKey.SECRETS$ADD_SECRET),e===`edit`&&_(n.I18nKey.SECRETS$EDIT_SECRET)]})]})]})}exports.SecretForm=m;
 //# sourceMappingURL=secret-form.cjs.map

package/dist/components/features/settings/secrets-settings/secret-form.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"secret-form.cjs","names":[],"sources":["../../../../../src/components/features/settings/secrets-settings/secret-form.tsx"],"sourcesContent":["import { useQueryClient } from \"@tanstack/react-query\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useCreateSecret } from \"#/hooks/mutation/use-create-secret\";\nimport { useUpdateSecret } from \"#/hooks/mutation/use-update-secret\";\nimport { SettingsInput } from \"../settings-input\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  formControlMultilineFieldClassName,\n  formControlSettingsFieldClassName,\n} from \"#/utils/form-control-classes\";\nimport { BrandButton } from \"../brand-button\";\nimport { useSearchSecrets } from \"#/hooks/query/use-get-secrets\";\nimport { OptionalTag } from \"../optional-tag\";\n\ninterface SecretFormProps {\n  mode: \"add\" | \"edit\";\n  selectedSecret: string | null;\n  onCancel: () => void;\n}\n\nexport function SecretForm({\n  mode,\n  selectedSecret,\n  onCancel,\n}: SecretFormProps) {\n  const queryClient = useQueryClient();\n  const { t } = useTranslation(\"openhands\");\n\n  const { data: secrets } = useSearchSecrets();\n  const { mutate: createSecret } = useCreateSecret();\n  const { mutate: updateSecret } = useUpdateSecret();\n\n  const [error, setError] = React.useState<string | null>(null);\n\n  const secretDescription =\n    (mode === \"edit\" &&\n      selectedSecret &&\n      secrets\n        ?.find((secret) => secret.name === selectedSecret)\n        ?.description?.trim()) ||\n    \"\";\n\n  const invalidateSecrets = () => {\n    queryClient.invalidateQueries({\n      queryKey: [\"secrets-search\"],\n    });\n    queryClient.invalidateQueries({\n      queryKey: [\"secrets\"],\n    });\n  };\n\n  const handleCreateSecret = (\n    name: string,\n    value: string,\n    description?: string,\n  ) => {\n    createSecret(\n      { name, value, description },\n      {\n        onSettled: onCancel,\n        onSuccess: invalidateSecrets,\n      },\n    );\n  };\n\n  const handleEditSecret = (\n    secretToEdit: string,\n    name: string,\n    description?: string,\n    value?: string,\n  ) => {\n    updateSecret(\n      { secretToEdit, name, description, value },\n      {\n        onSettled: onCancel,\n        onSuccess: invalidateSecrets,\n      },\n    );\n  };\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const name = formData.get(\"secret-name\")?.toString();\n    const value = formData.get(\"secret-value\")?.toString().trim();\n    const description = formData.get(\"secret-description\")?.toString();\n\n    if (name) {\n      setError(null);\n\n      const isNameAlreadyUsed = secrets?.some(\n        (secret) => secret.name === name && secret.name !== selectedSecret,\n      );\n      if (isNameAlreadyUsed) {\n        setError(t(I18nKey.SECRETS$SECRET_ALREADY_EXISTS));\n        return;\n      }\n\n      if (mode === \"add\") {\n        if (!value) {\n          setError(t(I18nKey.SECRETS$SECRET_VALUE_REQUIRED));\n          return;\n        }\n\n        handleCreateSecret(name, value, description || undefined);\n      } else if (mode === \"edit\" && selectedSecret) {\n        handleEditSecret(\n          selectedSecret,\n          name,\n          description || undefined,\n          value || undefined,\n        );\n      }\n    }\n  };\n\n  const formTestId = mode === \"add\" ? \"add-secret-form\" : \"edit-secret-form\";\n\n  return (\n    <form\n      data-testid={formTestId}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col items-start gap-6\"\n    >\n      <SettingsInput\n        testId=\"name-input\"\n        name=\"secret-name\"\n        type=\"text\"\n        label={t(I18nKey.SETTINGS$NAME)}\n        className=\"w-full min-w-0\"\n        required\n        defaultValue={mode === \"edit\" && selectedSecret ? selectedSecret : \"\"}\n        placeholder={t(I18nKey.SECRETS$API_KEY_EXAMPLE)}\n        pattern=\"^[a-zA-Z][a-zA-Z0-9_]{0,63}$\"\n        title={t(I18nKey.SETTINGS$SECRET_NAME_PATTERN_TITLE)}\n      />\n      {error && <p className=\"text-red-500 text-sm\">{error}</p>}\n\n      <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n        <span className=\"text-sm\">\n          {mode === \"add\"\n            ? t(I18nKey.FORM$VALUE)\n            : t(I18nKey.SECRETS$SECRET_VALUE_LEAVE_BLANK)}\n        </span>\n        <textarea\n          data-testid=\"value-input\"\n          name=\"secret-value\"\n          required={mode === \"add\"}\n          className={cn(\n            \"resize-none\",\n            formControlMultilineFieldClassName,\n            \"placeholder:italic\",\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed\",\n          )}\n          rows={8}\n        />\n      </label>\n\n      <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-sm\">{t(I18nKey.FORM$DESCRIPTION)}</span>\n          <OptionalTag />\n        </div>\n        <input\n          data-testid=\"description-input\"\n          name=\"secret-description\"\n          defaultValue={secretDescription}\n          className={cn(\n            formControlSettingsFieldClassName,\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n          )}\n        />\n      </label>\n\n      <div className=\"flex items-center gap-4\">\n        <BrandButton\n          testId=\"cancel-button\"\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onCancel}\n        >\n          {t(I18nKey.BUTTON$CANCEL)}\n        </BrandButton>\n        <BrandButton testId=\"submit-button\" type=\"submit\" variant=\"primary\">\n          {mode === \"add\" && t(I18nKey.SECRETS$ADD_SECRET)}\n          {mode === \"edit\" && t(I18nKey.SECRETS$EDIT_SECRET)}\n        </BrandButton>\n      </div>\n    </form>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"secret-form.cjs","names":[],"sources":["../../../../../src/components/features/settings/secrets-settings/secret-form.tsx"],"sourcesContent":["import { useQueryClient } from \"@tanstack/react-query\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useCreateSecret } from \"#/hooks/mutation/use-create-secret\";\nimport { useUpdateSecret } from \"#/hooks/mutation/use-update-secret\";\nimport { SettingsInput } from \"../settings-input\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  formControlMultilineFieldClassName,\n  formControlSettingsFieldClassName,\n} from \"#/utils/form-control-classes\";\nimport { BrandButton } from \"../brand-button\";\nimport { useSearchSecrets } from \"#/hooks/query/use-get-secrets\";\nimport { OptionalTag } from \"../optional-tag\";\n\ninterface SecretFormProps {\n  mode: \"add\" | \"edit\";\n  selectedSecret: string | null;\n  onCancel: () => void;\n}\n\nexport function SecretForm({\n  mode,\n  selectedSecret,\n  onCancel,\n}: SecretFormProps) {\n  const queryClient = useQueryClient();\n  const { t } = useTranslation(\"openhands\");\n\n  const { data: secrets } = useSearchSecrets();\n  const { mutate: createSecret } = useCreateSecret();\n  const { mutate: updateSecret } = useUpdateSecret();\n\n  const [error, setError] = React.useState<string | null>(null);\n  const [name, setName] = React.useState(\n    mode === \"edit\" && selectedSecret ? selectedSecret : \"\",\n  );\n  const [value, setValue] = React.useState(\"\");\n  const [description, setDescription] = React.useState(\"\");\n\n  const secretDescription =\n    (mode === \"edit\" &&\n      selectedSecret &&\n      secrets\n        ?.find((secret) => secret.name === selectedSecret)\n        ?.description?.trim()) ||\n    \"\";\n  const initialName = mode === \"edit\" && selectedSecret ? selectedSecret : \"\";\n\n  React.useEffect(() => {\n    setName(mode === \"edit\" && selectedSecret ? selectedSecret : \"\");\n    setValue(\"\");\n    setDescription(secretDescription);\n    setError(null);\n  }, [mode, selectedSecret, secretDescription]);\n\n  const invalidateSecrets = () => {\n    queryClient.invalidateQueries({\n      queryKey: [\"secrets-search\"],\n    });\n    queryClient.invalidateQueries({\n      queryKey: [\"secrets\"],\n    });\n  };\n\n  const handleCreateSecret = (\n    name: string,\n    value: string,\n    description?: string,\n  ) => {\n    createSecret(\n      { name, value, description },\n      {\n        onSettled: onCancel,\n        onSuccess: invalidateSecrets,\n      },\n    );\n  };\n\n  const handleEditSecret = (\n    secretToEdit: string,\n    name: string,\n    description?: string,\n    value?: string,\n  ) => {\n    updateSecret(\n      { secretToEdit, name, description, value },\n      {\n        onSettled: onCancel,\n        onSuccess: invalidateSecrets,\n      },\n    );\n  };\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const trimmedName = name.trim();\n    const trimmedValue = value.trim();\n    const normalizedDescription = description || undefined;\n\n    if (trimmedName) {\n      setError(null);\n\n      const isNameAlreadyUsed = secrets?.some(\n        (secret) =>\n          secret.name === trimmedName && secret.name !== selectedSecret,\n      );\n      if (isNameAlreadyUsed) {\n        setError(t(I18nKey.SECRETS$SECRET_ALREADY_EXISTS));\n        return;\n      }\n\n      if (mode === \"add\") {\n        if (!trimmedValue) {\n          setError(t(I18nKey.SECRETS$SECRET_VALUE_REQUIRED));\n          return;\n        }\n\n        handleCreateSecret(trimmedName, trimmedValue, normalizedDescription);\n      } else if (mode === \"edit\" && selectedSecret) {\n        // Blank value means \"keep the existing secret\"; only send a value when\n        // the user typed a replacement (#16134).\n        handleEditSecret(\n          selectedSecret,\n          trimmedName,\n          normalizedDescription,\n          trimmedValue || undefined,\n        );\n      }\n    }\n  };\n\n  const formTestId = mode === \"add\" ? \"add-secret-form\" : \"edit-secret-form\";\n  const isEditDirty =\n    mode === \"edit\" &&\n    (name.trim() !== initialName.trim() ||\n      description !== secretDescription ||\n      value.trim() !== \"\");\n  const isSubmitDisabled =\n    mode === \"add\"\n      ? !name.trim() || !value.trim()\n      : mode === \"edit\"\n        ? !isEditDirty\n        : false;\n\n  return (\n    <form\n      data-testid={formTestId}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col items-start gap-6\"\n    >\n      <SettingsInput\n        testId=\"name-input\"\n        name=\"secret-name\"\n        type=\"text\"\n        label={t(I18nKey.SETTINGS$NAME)}\n        className=\"w-full min-w-0\"\n        required\n        value={name}\n        onChange={setName}\n        placeholder={t(I18nKey.SECRETS$API_KEY_EXAMPLE)}\n        pattern=\"^[a-zA-Z][a-zA-Z0-9_]{0,63}$\"\n        title={t(I18nKey.SETTINGS$SECRET_NAME_PATTERN_TITLE)}\n      />\n      {error && <p className=\"text-red-500 text-sm\">{error}</p>}\n\n      <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n        <span className=\"text-sm\">\n          {mode === \"add\"\n            ? t(I18nKey.FORM$VALUE)\n            : t(I18nKey.SECRETS$SECRET_VALUE_LEAVE_BLANK)}\n        </span>\n        <textarea\n          data-testid=\"value-input\"\n          name=\"secret-value\"\n          required={mode === \"add\"}\n          value={value}\n          onChange={(event) => setValue(event.currentTarget.value)}\n          className={cn(\n            \"resize-none\",\n            formControlMultilineFieldClassName,\n            \"placeholder:italic\",\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed\",\n          )}\n          rows={8}\n        />\n      </label>\n\n      <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-sm\">{t(I18nKey.FORM$DESCRIPTION)}</span>\n          <OptionalTag />\n        </div>\n        <input\n          data-testid=\"description-input\"\n          name=\"secret-description\"\n          value={description}\n          onChange={(event) => setDescription(event.currentTarget.value)}\n          className={cn(\n            formControlSettingsFieldClassName,\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n          )}\n        />\n      </label>\n\n      <div className=\"flex items-center gap-4\">\n        <BrandButton\n          testId=\"cancel-button\"\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onCancel}\n        >\n          {t(I18nKey.BUTTON$CANCEL)}\n        </BrandButton>\n        <BrandButton\n          testId=\"submit-button\"\n          type=\"submit\"\n          variant=\"primary\"\n          isDisabled={isSubmitDisabled}\n        >\n          {mode === \"add\" && t(I18nKey.SECRETS$ADD_SECRET)}\n          {mode === \"edit\" && t(I18nKey.SECRETS$EDIT_SECRET)}\n        </BrandButton>\n      </div>\n    </form>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/settings/secrets-settings/secret-form.js

@@ -13,18 +13,26 @@ import f from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/features/settings/secrets-settings/secret-form.tsx
 function h({ mode: h, selectedSecret: g, onCancel: _ }) {
-	let v = r(), { t: y } = e("openhands"), { data: b } = u(), { mutate: x } = s(), { mutate: S } = d(), [C, w] = f.useState(null), T = h === "edit" && g && b?.find((e) => e.name === g)?.description?.trim() || "", E = () => {
+	let v = r(), { t: y } = e("openhands"), { data: b } = u(), { mutate: x } = s(), { mutate: S } = d(), [C, w] = f.useState(null), [T, E] = f.useState(h === "edit" && g ? g : ""), [D, O] = f.useState(""), [k, A] = f.useState(""), j = h === "edit" && g && b?.find((e) => e.name === g)?.description?.trim() || "", M = h === "edit" && g ? g : "";
+	f.useEffect(() => {
+		E(h === "edit" && g ? g : ""), O(""), A(j), w(null);
+	}, [
+		h,
+		g,
+		j
+	]);
+	let N = () => {
 		v.invalidateQueries({ queryKey: ["secrets-search"] }), v.invalidateQueries({ queryKey: ["secrets"] });
-	}, D = (e, t, n) => {
+	}, P = (e, t, n) => {
 		x({
 			name: e,
 			value: t,
 			description: n
 		}, {
 			onSettled: _,
-			onSuccess: E
+			onSuccess: N
 		});
-	}, O = (e, t, n, r) => {
+	}, F = (e, t, n, r) => {
 		S({
 			secretToEdit: e,
 			name: t,
@@ -32,28 +40,28 @@ function h({ mode: h, selectedSecret: g, onCancel: _ }) {
 			value: r
 		}, {
 			onSettled: _,
-			onSuccess: E
+			onSuccess: N
 		});
-	};
-	return /* @__PURE__ */ m("form", {
-		"data-testid": h === "add" ? "add-secret-form" : "edit-secret-form",
-		onSubmit: (e) => {
-			e.preventDefault();
-			let n = new FormData(e.currentTarget), r = n.get("secret-name")?.toString(), i = n.get("secret-value")?.toString().trim(), a = n.get("secret-description")?.toString();
-			if (r) {
-				if (w(null), b?.some((e) => e.name === r && e.name !== g)) {
-					w(y(t.SECRETS$SECRET_ALREADY_EXISTS));
+	}, I = (e) => {
+		e.preventDefault();
+		let n = T.trim(), r = D.trim(), i = k || void 0;
+		if (n) {
+			if (w(null), b?.some((e) => e.name === n && e.name !== g)) {
+				w(y(t.SECRETS$SECRET_ALREADY_EXISTS));
+				return;
+			}
+			if (h === "add") {
+				if (!r) {
+					w(y(t.SECRETS$SECRET_VALUE_REQUIRED));
 					return;
 				}
-				if (h === "add") {
-					if (!i) {
-						w(y(t.SECRETS$SECRET_VALUE_REQUIRED));
-						return;
-					}
-					D(r, i, a || void 0);
-				} else h === "edit" && g && O(g, r, a || void 0, i || void 0);
-			}
-		},
+				P(n, r, i);
+			} else h === "edit" && g && F(g, n, i, r || void 0);
+		}
+	}, L = h === "add" ? "add-secret-form" : "edit-secret-form", R = h === "edit" && (T.trim() !== M.trim() || k !== j || D.trim() !== ""), z = h === "add" ? !T.trim() || !D.trim() : h === "edit" ? !R : !1;
+	return /* @__PURE__ */ m("form", {
+		"data-testid": L,
+		onSubmit: I,
 		className: "flex flex-col items-start gap-6",
 		children: [
 			/* @__PURE__ */ p(l, {
@@ -63,7 +71,8 @@ function h({ mode: h, selectedSecret: g, onCancel: _ }) {
 				label: y(t.SETTINGS$NAME),
 				className: "w-full min-w-0",
 				required: !0,
-				defaultValue: h === "edit" && g ? g : "",
+				value: T,
+				onChange: E,
 				placeholder: y(t.SECRETS$API_KEY_EXAMPLE),
 				pattern: "^[a-zA-Z][a-zA-Z0-9_]{0,63}$",
 				title: y(t.SETTINGS$SECRET_NAME_PATTERN_TITLE)
@@ -81,6 +90,8 @@ function h({ mode: h, selectedSecret: g, onCancel: _ }) {
 					"data-testid": "value-input",
 					name: "secret-value",
 					required: h === "add",
+					value: D,
+					onChange: (e) => O(e.currentTarget.value),
 					className: n("resize-none", i, "placeholder:italic", "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed"),
 					rows: 8
 				})]
@@ -96,7 +107,8 @@ function h({ mode: h, selectedSecret: g, onCancel: _ }) {
 				}), /* @__PURE__ */ p("input", {
 					"data-testid": "description-input",
 					name: "secret-description",
-					defaultValue: T,
+					value: k,
+					onChange: (e) => A(e.currentTarget.value),
 					className: n(a, "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]")
 				})]
 			}),
@@ -112,6 +124,7 @@ function h({ mode: h, selectedSecret: g, onCancel: _ }) {
 					testId: "submit-button",
 					type: "submit",
 					variant: "primary",
+					isDisabled: z,
 					children: [h === "add" && y(t.SECRETS$ADD_SECRET), h === "edit" && y(t.SECRETS$EDIT_SECRET)]
 				})]
 			})

package/dist/components/features/settings/secrets-settings/secret-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"secret-form.js","names":[],"sources":["../../../../../src/components/features/settings/secrets-settings/secret-form.tsx"],"sourcesContent":["import { useQueryClient } from \"@tanstack/react-query\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useCreateSecret } from \"#/hooks/mutation/use-create-secret\";\nimport { useUpdateSecret } from \"#/hooks/mutation/use-update-secret\";\nimport { SettingsInput } from \"../settings-input\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  formControlMultilineFieldClassName,\n  formControlSettingsFieldClassName,\n} from \"#/utils/form-control-classes\";\nimport { BrandButton } from \"../brand-button\";\nimport { useSearchSecrets } from \"#/hooks/query/use-get-secrets\";\nimport { OptionalTag } from \"../optional-tag\";\n\ninterface SecretFormProps {\n  mode: \"add\" | \"edit\";\n  selectedSecret: string | null;\n  onCancel: () => void;\n}\n\nexport function SecretForm({\n  mode,\n  selectedSecret,\n  onCancel,\n}: SecretFormProps) {\n  const queryClient = useQueryClient();\n  const { t } = useTranslation(\"openhands\");\n\n  const { data: secrets } = useSearchSecrets();\n  const { mutate: createSecret } = useCreateSecret();\n  const { mutate: updateSecret } = useUpdateSecret();\n\n  const [error, setError] = React.useState<string | null>(null);\n\n  const secretDescription =\n    (mode === \"edit\" &&\n      selectedSecret &&\n      secrets\n        ?.find((secret) => secret.name === selectedSecret)\n        ?.description?.trim()) ||\n    \"\";\n\n  const invalidateSecrets = () => {\n    queryClient.invalidateQueries({\n      queryKey: [\"secrets-search\"],\n    });\n    queryClient.invalidateQueries({\n      queryKey: [\"secrets\"],\n    });\n  };\n\n  const handleCreateSecret = (\n    name: string,\n    value: string,\n    description?: string,\n  ) => {\n    createSecret(\n      { name, value, description },\n      {\n        onSettled: onCancel,\n        onSuccess: invalidateSecrets,\n      },\n    );\n  };\n\n  const handleEditSecret = (\n    secretToEdit: string,\n    name: string,\n    description?: string,\n    value?: string,\n  ) => {\n    updateSecret(\n      { secretToEdit, name, description, value },\n      {\n        onSettled: onCancel,\n        onSuccess: invalidateSecrets,\n      },\n    );\n  };\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const name = formData.get(\"secret-name\")?.toString();\n    const value = formData.get(\"secret-value\")?.toString().trim();\n    const description = formData.get(\"secret-description\")?.toString();\n\n    if (name) {\n      setError(null);\n\n      const isNameAlreadyUsed = secrets?.some(\n        (secret) => secret.name === name && secret.name !== selectedSecret,\n      );\n      if (isNameAlreadyUsed) {\n        setError(t(I18nKey.SECRETS$SECRET_ALREADY_EXISTS));\n        return;\n      }\n\n      if (mode === \"add\") {\n        if (!value) {\n          setError(t(I18nKey.SECRETS$SECRET_VALUE_REQUIRED));\n          return;\n        }\n\n        handleCreateSecret(name, value, description || undefined);\n      } else if (mode === \"edit\" && selectedSecret) {\n        handleEditSecret(\n          selectedSecret,\n          name,\n          description || undefined,\n          value || undefined,\n        );\n      }\n    }\n  };\n\n  const formTestId = mode === \"add\" ? \"add-secret-form\" : \"edit-secret-form\";\n\n  return (\n    <form\n      data-testid={formTestId}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col items-start gap-6\"\n    >\n      <SettingsInput\n        testId=\"name-input\"\n        name=\"secret-name\"\n        type=\"text\"\n        label={t(I18nKey.SETTINGS$NAME)}\n        className=\"w-full min-w-0\"\n        required\n        defaultValue={mode === \"edit\" && selectedSecret ? selectedSecret : \"\"}\n        placeholder={t(I18nKey.SECRETS$API_KEY_EXAMPLE)}\n        pattern=\"^[a-zA-Z][a-zA-Z0-9_]{0,63}$\"\n        title={t(I18nKey.SETTINGS$SECRET_NAME_PATTERN_TITLE)}\n      />\n      {error && <p className=\"text-red-500 text-sm\">{error}</p>}\n\n      <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n        <span className=\"text-sm\">\n          {mode === \"add\"\n            ? t(I18nKey.FORM$VALUE)\n            : t(I18nKey.SECRETS$SECRET_VALUE_LEAVE_BLANK)}\n        </span>\n        <textarea\n          data-testid=\"value-input\"\n          name=\"secret-value\"\n          required={mode === \"add\"}\n          className={cn(\n            \"resize-none\",\n            formControlMultilineFieldClassName,\n            \"placeholder:italic\",\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed\",\n          )}\n          rows={8}\n        />\n      </label>\n\n      <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-sm\">{t(I18nKey.FORM$DESCRIPTION)}</span>\n          <OptionalTag />\n        </div>\n        <input\n          data-testid=\"description-input\"\n          name=\"secret-description\"\n          defaultValue={secretDescription}\n          className={cn(\n            formControlSettingsFieldClassName,\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n          )}\n        />\n      </label>\n\n      <div className=\"flex items-center gap-4\">\n        <BrandButton\n          testId=\"cancel-button\"\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onCancel}\n        >\n          {t(I18nKey.BUTTON$CANCEL)}\n        </BrandButton>\n        <BrandButton testId=\"submit-button\" type=\"submit\" variant=\"primary\">\n          {mode === \"add\" && t(I18nKey.SECRETS$ADD_SECRET)}\n          {mode === \"edit\" && t(I18nKey.SECRETS$EDIT_SECRET)}\n        </BrandButton>\n      </div>\n    </form>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"secret-form.js","names":[],"sources":["../../../../../src/components/features/settings/secrets-settings/secret-form.tsx"],"sourcesContent":["import { useQueryClient } from \"@tanstack/react-query\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { useCreateSecret } from \"#/hooks/mutation/use-create-secret\";\nimport { useUpdateSecret } from \"#/hooks/mutation/use-update-secret\";\nimport { SettingsInput } from \"../settings-input\";\nimport { cn } from \"#/utils/utils\";\nimport {\n  formControlMultilineFieldClassName,\n  formControlSettingsFieldClassName,\n} from \"#/utils/form-control-classes\";\nimport { BrandButton } from \"../brand-button\";\nimport { useSearchSecrets } from \"#/hooks/query/use-get-secrets\";\nimport { OptionalTag } from \"../optional-tag\";\n\ninterface SecretFormProps {\n  mode: \"add\" | \"edit\";\n  selectedSecret: string | null;\n  onCancel: () => void;\n}\n\nexport function SecretForm({\n  mode,\n  selectedSecret,\n  onCancel,\n}: SecretFormProps) {\n  const queryClient = useQueryClient();\n  const { t } = useTranslation(\"openhands\");\n\n  const { data: secrets } = useSearchSecrets();\n  const { mutate: createSecret } = useCreateSecret();\n  const { mutate: updateSecret } = useUpdateSecret();\n\n  const [error, setError] = React.useState<string | null>(null);\n  const [name, setName] = React.useState(\n    mode === \"edit\" && selectedSecret ? selectedSecret : \"\",\n  );\n  const [value, setValue] = React.useState(\"\");\n  const [description, setDescription] = React.useState(\"\");\n\n  const secretDescription =\n    (mode === \"edit\" &&\n      selectedSecret &&\n      secrets\n        ?.find((secret) => secret.name === selectedSecret)\n        ?.description?.trim()) ||\n    \"\";\n  const initialName = mode === \"edit\" && selectedSecret ? selectedSecret : \"\";\n\n  React.useEffect(() => {\n    setName(mode === \"edit\" && selectedSecret ? selectedSecret : \"\");\n    setValue(\"\");\n    setDescription(secretDescription);\n    setError(null);\n  }, [mode, selectedSecret, secretDescription]);\n\n  const invalidateSecrets = () => {\n    queryClient.invalidateQueries({\n      queryKey: [\"secrets-search\"],\n    });\n    queryClient.invalidateQueries({\n      queryKey: [\"secrets\"],\n    });\n  };\n\n  const handleCreateSecret = (\n    name: string,\n    value: string,\n    description?: string,\n  ) => {\n    createSecret(\n      { name, value, description },\n      {\n        onSettled: onCancel,\n        onSuccess: invalidateSecrets,\n      },\n    );\n  };\n\n  const handleEditSecret = (\n    secretToEdit: string,\n    name: string,\n    description?: string,\n    value?: string,\n  ) => {\n    updateSecret(\n      { secretToEdit, name, description, value },\n      {\n        onSettled: onCancel,\n        onSuccess: invalidateSecrets,\n      },\n    );\n  };\n\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const trimmedName = name.trim();\n    const trimmedValue = value.trim();\n    const normalizedDescription = description || undefined;\n\n    if (trimmedName) {\n      setError(null);\n\n      const isNameAlreadyUsed = secrets?.some(\n        (secret) =>\n          secret.name === trimmedName && secret.name !== selectedSecret,\n      );\n      if (isNameAlreadyUsed) {\n        setError(t(I18nKey.SECRETS$SECRET_ALREADY_EXISTS));\n        return;\n      }\n\n      if (mode === \"add\") {\n        if (!trimmedValue) {\n          setError(t(I18nKey.SECRETS$SECRET_VALUE_REQUIRED));\n          return;\n        }\n\n        handleCreateSecret(trimmedName, trimmedValue, normalizedDescription);\n      } else if (mode === \"edit\" && selectedSecret) {\n        // Blank value means \"keep the existing secret\"; only send a value when\n        // the user typed a replacement (#16134).\n        handleEditSecret(\n          selectedSecret,\n          trimmedName,\n          normalizedDescription,\n          trimmedValue || undefined,\n        );\n      }\n    }\n  };\n\n  const formTestId = mode === \"add\" ? \"add-secret-form\" : \"edit-secret-form\";\n  const isEditDirty =\n    mode === \"edit\" &&\n    (name.trim() !== initialName.trim() ||\n      description !== secretDescription ||\n      value.trim() !== \"\");\n  const isSubmitDisabled =\n    mode === \"add\"\n      ? !name.trim() || !value.trim()\n      : mode === \"edit\"\n        ? !isEditDirty\n        : false;\n\n  return (\n    <form\n      data-testid={formTestId}\n      onSubmit={handleSubmit}\n      className=\"flex flex-col items-start gap-6\"\n    >\n      <SettingsInput\n        testId=\"name-input\"\n        name=\"secret-name\"\n        type=\"text\"\n        label={t(I18nKey.SETTINGS$NAME)}\n        className=\"w-full min-w-0\"\n        required\n        value={name}\n        onChange={setName}\n        placeholder={t(I18nKey.SECRETS$API_KEY_EXAMPLE)}\n        pattern=\"^[a-zA-Z][a-zA-Z0-9_]{0,63}$\"\n        title={t(I18nKey.SETTINGS$SECRET_NAME_PATTERN_TITLE)}\n      />\n      {error && <p className=\"text-red-500 text-sm\">{error}</p>}\n\n      <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n        <span className=\"text-sm\">\n          {mode === \"add\"\n            ? t(I18nKey.FORM$VALUE)\n            : t(I18nKey.SECRETS$SECRET_VALUE_LEAVE_BLANK)}\n        </span>\n        <textarea\n          data-testid=\"value-input\"\n          name=\"secret-value\"\n          required={mode === \"add\"}\n          value={value}\n          onChange={(event) => setValue(event.currentTarget.value)}\n          className={cn(\n            \"resize-none\",\n            formControlMultilineFieldClassName,\n            \"placeholder:italic\",\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)] disabled:cursor-not-allowed\",\n          )}\n          rows={8}\n        />\n      </label>\n\n      <label className=\"flex flex-col gap-2.5 w-full min-w-0\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-sm\">{t(I18nKey.FORM$DESCRIPTION)}</span>\n          <OptionalTag />\n        </div>\n        <input\n          data-testid=\"description-input\"\n          name=\"secret-description\"\n          value={description}\n          onChange={(event) => setDescription(event.currentTarget.value)}\n          className={cn(\n            formControlSettingsFieldClassName,\n            \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n          )}\n        />\n      </label>\n\n      <div className=\"flex items-center gap-4\">\n        <BrandButton\n          testId=\"cancel-button\"\n          type=\"button\"\n          variant=\"secondary\"\n          onClick={onCancel}\n        >\n          {t(I18nKey.BUTTON$CANCEL)}\n        </BrandButton>\n        <BrandButton\n          testId=\"submit-button\"\n          type=\"submit\"\n          variant=\"primary\"\n          isDisabled={isSubmitDisabled}\n        >\n          {mode === \"add\" && t(I18nKey.SECRETS$ADD_SECRET)}\n          {mode === \"edit\" && t(I18nKey.SECRETS$EDIT_SECRET)}\n        </BrandButton>\n      </div>\n    </form>\n  );\n}\n"],"mappings":"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"}

package/dist/components/features/settings/settings-dropdown-input.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../utils/form-control-classes.cjs"),a=require("../../../node_modules/@heroui/listbox/dist/chunk-BJFJ4DRR.cjs"),o=require("../../../node_modules/@heroui/autocomplete/dist/chunk-3QKDXXDY.cjs"),s=require("../../../ui/combobox-caret.cjs"),c=require("./optional-tag.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");function d({testId:e,label:l,wrapperClassName:d,name:f,items:p,placeholder:m,showOptionalTag:h,isDisabled:g,isLoading:_,defaultSelectedKey:v,selectedKey:y,isClearable:b,allowsCustomValue:x,required:S,onSelectionChange:C,onInputChange:w,defaultFilter:T,startContent:E,inputWrapperClassName:D,inputClassName:O}){let{t:k}=t.useTranslation(`openhands`);return(0,u.jsxs)(`label`,{className:r.cn(`flex flex-col gap-2.5 w-full min-w-0`,d),children:[l&&(0,u.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,u.jsx)(`span`,{className:`text-sm`,children:l}),h&&(0,u.jsx)(c.OptionalTag,{})]}),(0,u.jsx)(o.autocomplete_default,{"aria-label":typeof l==`string`?l:f,"data-testid":e,name:f,defaultItems:p,defaultSelectedKey:v,selectedKey:y,onSelectionChange:C,onInputChange:w,isClearable:b,isDisabled:g||_,isLoading:_,placeholder:_?k(n.I18nKey.HOME$LOADING):m,allowsCustomValue:x,isRequired:S,className:`w-full`,classNames:{popoverContent:`bg-content1 rounded-xl`,selectorButton:s.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:r.cn(i.formControlSettingsFieldClassName,D),input:O}},defaultFilter:T,startContent:E||null,children:e=>(0,u.jsx)(a.listbox_item_base_default,{children:e.label},e.key)})]})}exports.SettingsDropdownInput=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../../node_modules/@heroui/listbox/dist/chunk-BJFJ4DRR.cjs"),a=require("../../../node_modules/@heroui/autocomplete/dist/chunk-3QKDXXDY.cjs"),o=require("../../../utils/form-control-classes.cjs"),s=require("../../../ui/combobox-caret.cjs"),c=require("./optional-tag.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");function d({testId:e,label:l,wrapperClassName:d,name:f,items:p,placeholder:m,showOptionalTag:h,isDisabled:g,isLoading:_,defaultSelectedKey:v,selectedKey:y,isClearable:b,allowsCustomValue:x,required:S,onSelectionChange:C,onInputChange:w,defaultFilter:T,startContent:E,inputWrapperClassName:D,inputClassName:O}){let{t:k}=t.useTranslation(`openhands`);return(0,u.jsxs)(`label`,{className:r.cn(`flex flex-col gap-2.5 w-full min-w-0`,d),children:[l&&(0,u.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,u.jsx)(`span`,{className:`text-sm`,children:l}),h&&(0,u.jsx)(c.OptionalTag,{})]}),(0,u.jsx)(a.autocomplete_default,{"aria-label":typeof l==`string`?l:f,"data-testid":e,name:f,defaultItems:p,defaultSelectedKey:v,selectedKey:y,onSelectionChange:C,onInputChange:w,isClearable:b,isDisabled:g||_,isLoading:_,placeholder:_?k(n.I18nKey.HOME$LOADING):m,allowsCustomValue:x,isRequired:S,className:`w-full`,classNames:{popoverContent:`bg-content1 rounded-xl`,selectorButton:s.heroUiAutocompleteSelectorButtonClassName},selectorButtonProps:{disableRipple:!0},inputProps:{classNames:{inputWrapper:r.cn(o.formControlSettingsFieldClassName,D),input:O}},defaultFilter:T,startContent:E||null,children:e=>(0,u.jsx)(i.listbox_item_base_default,{children:e.label},e.key)})]})}exports.SettingsDropdownInput=d;
 //# sourceMappingURL=settings-dropdown-input.cjs.map

package/dist/components/features/settings/settings-dropdown-input.js

@@ -1,9 +1,9 @@
 import { useTranslation as e } from "../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { I18nKey as t } from "../../../i18n/declaration.js";
 import { cn as n } from "../../../utils/utils.js";
-import { formControlSettingsFieldClassName as r } from "../../../utils/form-control-classes.js";
-import { listbox_item_base_default as i } from "../../../node_modules/@heroui/listbox/dist/chunk-BJFJ4DRR.js";
-import { autocomplete_default as a } from "../../../node_modules/@heroui/autocomplete/dist/chunk-3QKDXXDY.js";
+import { listbox_item_base_default as r } from "../../../node_modules/@heroui/listbox/dist/chunk-BJFJ4DRR.js";
+import { autocomplete_default as i } from "../../../node_modules/@heroui/autocomplete/dist/chunk-3QKDXXDY.js";
+import { formControlSettingsFieldClassName as a } from "../../../utils/form-control-classes.js";
 import { heroUiAutocompleteSelectorButtonClassName as o } from "../../../ui/combobox-caret.js";
 import { OptionalTag as s } from "./optional-tag.js";
 import "react";
@@ -19,7 +19,7 @@ function u({ testId: u, label: d, wrapperClassName: f, name: p, items: m, placeh
 				className: "text-sm",
 				children: d
 			}), g && /* @__PURE__ */ c(s, {})]
-		}), /* @__PURE__ */ c(a, {
+		}), /* @__PURE__ */ c(i, {
 			"aria-label": typeof d == "string" ? d : p,
 			"data-testid": u,
 			name: p,
@@ -41,12 +41,12 @@ function u({ testId: u, label: d, wrapperClassName: f, name: p, items: m, placeh
 			},
 			selectorButtonProps: { disableRipple: !0 },
 			inputProps: { classNames: {
-				inputWrapper: n(r, O),
+				inputWrapper: n(a, O),
 				input: k
 			} },
 			defaultFilter: E,
 			startContent: D || null,
-			children: (e) => /* @__PURE__ */ c(i, { children: e.label }, e.key)
+			children: (e) => /* @__PURE__ */ c(r, { children: e.label }, e.key)
 		})]
 	});
 }

package/dist/components/features/sidebar/sidebar-nav-link.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utils/utils.cjs"),n=require("../../../context/navigation-context.cjs"),r=require("../../shared/buttons/styled-tooltip.cjs"),i=require("../../shared/navigation-link.cjs"),a=require("./sidebar-layout.cjs"),o=require("./sidebar-collapsed-icon-slot.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime");function l(e,t,n){return t===`/`||n?e===t:e===t||e.startsWith(`${t}/`)}function u({to:e,label:s,end:u=!1,indent:d=!1,testId:f,disabled:p=!1,icon:m,collapsed:h=!1,hoverContent:g,forceActive:_=!1}){let{currentPath:v}=n.useNavigation(),y=_||l(v,e,u),b=(0,c.jsxs)(i.NavigationLink,{to:e,end:u,"data-testid":f,tabIndex:p?-1:0,"aria-label":h?s:void 0,"aria-disabled":p||void 0,onClick:e=>{p&&e.preventDefault()},className:t.cn(a.sidebarNavRowClassName({indent:d,collapsed:h}),!h&&(y?a.SIDEBAR_ROW_INTERACTIVE_CLASS.active:a.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),p&&`opacity-50`,p&&`pointer-events-none`),children:[m?h?(0,c.jsx)(o.SidebarCollapsedIconSlot,{active:y,children:m}):(0,c.jsx)(`span`,{className:a.SIDEBAR_ICON_SLOT_CLASS,children:m}):null,(0,c.jsx)(`span`,{className:a.sidebarNavLabelClassName(h),children:s})]});return h?(0,c.jsx)(r.StyledTooltip,{content:g??s,placement:`right`,tooltipClassName:g?`p-0 bg-tertiary text-white`:void 0,children:b}):b}exports.SidebarNavLink=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/lucide-react/dist/esm/icons/pin.cjs"),n=require("../../../utils/utils.cjs"),r=require("../../../context/navigation-context.cjs"),i=require("../../shared/buttons/styled-tooltip.cjs"),a=require("../../shared/navigation-link.cjs"),o=require("../../../utils/hover-reveal-classes.cjs"),s=require("./sidebar-layout.cjs"),c=require("./sidebar-collapsed-icon-slot.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");function d(e,t,n){return t===`/`||n?e===t:e===t||e.startsWith(`${t}/`)}function f({to:e,label:l,end:f=!1,indent:p=!1,testId:m,disabled:h=!1,icon:g,collapsed:_=!1,hoverContent:v,forceActive:y=!1,pinAction:b}){let{currentPath:x}=r.useNavigation(),S=y||d(x,e,f),C=!_&&b!=null,w=(0,u.jsxs)(a.NavigationLink,{to:e,end:f,"data-testid":m,tabIndex:h?-1:0,"aria-label":_?l:void 0,"aria-disabled":h||void 0,onClick:e=>{h&&e.preventDefault()},className:n.cn(s.sidebarNavRowClassName({indent:p,collapsed:_}),!_&&(S?s.SIDEBAR_ROW_INTERACTIVE_CLASS.active:s.SIDEBAR_ROW_INTERACTIVE_CLASS.idle),h&&`opacity-50`,h&&`pointer-events-none`,C&&`pr-9`),children:[g?_?(0,u.jsx)(c.SidebarCollapsedIconSlot,{active:S,children:g}):(0,u.jsx)(`span`,{className:s.SIDEBAR_ICON_SLOT_CLASS,children:g}):null,(0,u.jsx)(`span`,{className:s.sidebarNavLabelClassName(_),children:l})]});return _?(0,u.jsx)(i.StyledTooltip,{content:v??l,placement:`right`,tooltipClassName:v?`p-0 bg-tertiary text-white`:void 0,children:w}):b?(0,u.jsxs)(`div`,{className:`group relative`,children:[w,(0,u.jsx)(`button`,{type:`button`,"data-testid":b.testId,"aria-pressed":b.pinned,"aria-label":b.label,onClick:e=>{e.preventDefault(),e.stopPropagation(),b.onToggle()},className:n.cn(`absolute right-1.5 top-1/2 -translate-y-1/2`,`flex shrink-0 cursor-pointer items-center justify-center rounded-md p-1`,`text-[var(--oh-muted)] hover:bg-white/10 hover:text-white`,o.hoverRevealActionClassName(b.pinned)),children:(0,u.jsx)(t.Pin,{className:n.cn(`h-3.5 w-3.5`,b.pinned&&`fill-current`),"aria-hidden":!0})})]}):w}exports.SidebarNavLink=f;
 //# sourceMappingURL=sidebar-nav-link.cjs.map

package/dist/components/features/sidebar/sidebar-nav-link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-nav-link.cjs","names":[],"sources":["../../../../src/components/features/sidebar/sidebar-nav-link.tsx"],"sourcesContent":["import React from \"react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { cn } from \"#/utils/utils\";\nimport { SidebarCollapsedIconSlot } from \"./sidebar-collapsed-icon-slot\";\nimport {\n  SIDEBAR_ICON_SLOT_CLASS,\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavLabelClassName,\n  sidebarNavRowClassName,\n} from \"./sidebar-layout\";\n\nfunction isPathActive(currentPath: string, to: string, end: boolean) {\n  if (to === \"/\") {\n    return currentPath === to;\n  }\n\n  if (end) {\n    return currentPath === to;\n  }\n\n  return currentPath === to || currentPath.startsWith(`${to}/`);\n}\n\ninterface SidebarNavLinkProps {\n  to: string;\n  label: string;\n  end?: boolean;\n  indent?: boolean;\n  testId?: string;\n  disabled?: boolean;\n  icon?: React.ReactElement;\n  collapsed?: boolean;\n  hoverContent?: React.ReactNode;\n  /**\n   * When true, forces the active style regardless of the current path.\n   * Useful for links that should appear active for multiple related routes\n   * (e.g. the Extensions link being active on /mcp and /plugins too).\n   */\n  forceActive?: boolean;\n}\n\nexport function SidebarNavLink({\n  to,\n  label,\n  end = false,\n  indent = false,\n  testId,\n  disabled = false,\n  icon,\n  collapsed = false,\n  hoverContent,\n  forceActive = false,\n}: SidebarNavLinkProps) {\n  const { currentPath } = useNavigation();\n  const active = forceActive || isPathActive(currentPath, to, end);\n\n  const link = (\n    <NavigationLink\n      to={to}\n      end={end}\n      data-testid={testId}\n      tabIndex={disabled ? -1 : 0}\n      aria-label={collapsed ? label : undefined}\n      // Announce the disabled state to assistive tech. The visual disabled\n      // styling plus tabIndex=-1 + preventDefault gives sighted/keyboard users\n      // the right behaviour already; this closes the screen-reader gap so the\n      // link doesn't sound \"actionable.\"\n      aria-disabled={disabled || undefined}\n      onClick={(e) => {\n        if (disabled) {\n          e.preventDefault();\n        }\n      }}\n      className={cn(\n        sidebarNavRowClassName({ indent, collapsed }),\n        !collapsed &&\n          (active\n            ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n            : SIDEBAR_ROW_INTERACTIVE_CLASS.idle),\n        disabled && \"opacity-50\",\n        disabled && \"pointer-events-none\",\n      )}\n    >\n      {icon ? (\n        collapsed ? (\n          <SidebarCollapsedIconSlot active={active}>\n            {icon}\n          </SidebarCollapsedIconSlot>\n        ) : (\n          <span className={SIDEBAR_ICON_SLOT_CLASS}>{icon}</span>\n        )\n      ) : null}\n      <span className={sidebarNavLabelClassName(collapsed)}>{label}</span>\n    </NavigationLink>\n  );\n\n  if (!collapsed) return link;\n\n  return (\n    <StyledTooltip\n      content={hoverContent ?? label}\n      placement=\"right\"\n      tooltipClassName={hoverContent ? \"p-0 bg-tertiary text-white\" : undefined}\n    >\n      {link}\n    </StyledTooltip>\n  );\n}\n"],"mappings":"qZAaA,SAAS,EAAa,EAAqB,EAAY,EAAc,CASnE,OARI,IAAO,KAIP,EACK,IAAgB,EAGlB,IAAgB,GAAM,EAAY,WAAW,GAAG,EAAG,EAAE,CAC9D,CAoBA,SAAgB,EAAe,CAC7B,KACA,QACA,MAAM,GACN,SAAS,GACT,SACA,WAAW,GACX,OACA,YAAY,GACZ,eACA,cAAc,IACQ,CACtB,GAAM,CAAE,eAAgB,EAAA,cAAc,EAChC,EAAS,GAAe,EAAa,EAAa,EAAI,CAAG,EAEzD,GACJ,EAAA,EAAA,MAAC,EAAA,eAAD,CACM,KACC,MACL,cAAa,EACb,SAAU,EAAW,GAAK,EAC1B,aAAY,EAAY,EAAQ,IAAA,GAKhC,gBAAe,GAAY,IAAA,GAC3B,QAAU,GAAM,CACV,GACF,EAAE,eAAe,CAErB,EACA,UAAW,EAAA,GACT,EAAA,uBAAuB,CAAE,SAAQ,WAAU,CAAC,EAC5C,CAAC,IACE,EACG,EAAA,8BAA8B,OAC9B,EAAA,8BAA8B,MACpC,GAAY,aACZ,GAAY,qBACd,WAxBF,CA0BG,EACC,GACE,EAAA,EAAA,KAAC,EAAA,yBAAD,CAAkC,kBAC/B,CACuB,CAAA,GAE1B,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,iCAA0B,CAAW,CAAA,EAEtD,MACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,yBAAyB,CAAS,WAAI,CAAY,CAAA,CACrD,IAKlB,OAFK,GAGH,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,QAAS,GAAgB,EACzB,UAAU,QACV,iBAAkB,EAAe,6BAA+B,IAAA,YAE/D,CACY,CAAA,EATM,CAWzB"}
+{"version":3,"file":"sidebar-nav-link.cjs","names":[],"sources":["../../../../src/components/features/sidebar/sidebar-nav-link.tsx"],"sourcesContent":["import React from \"react\";\nimport { Pin } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { hoverRevealActionClassName } from \"#/utils/hover-reveal-classes\";\nimport { cn } from \"#/utils/utils\";\nimport { SidebarCollapsedIconSlot } from \"./sidebar-collapsed-icon-slot\";\nimport {\n  SIDEBAR_ICON_SLOT_CLASS,\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavLabelClassName,\n  sidebarNavRowClassName,\n} from \"./sidebar-layout\";\n\nfunction isPathActive(currentPath: string, to: string, end: boolean) {\n  if (to === \"/\") {\n    return currentPath === to;\n  }\n\n  if (end) {\n    return currentPath === to;\n  }\n\n  return currentPath === to || currentPath.startsWith(`${to}/`);\n}\n\nexport interface SidebarNavLinkPinAction {\n  pinned: boolean;\n  onToggle: () => void;\n  /** Localized aria-label; pin vs unpin variants resolved by the caller. */\n  label: string;\n  testId: string;\n}\n\ninterface SidebarNavLinkProps {\n  to: string;\n  label: string;\n  end?: boolean;\n  indent?: boolean;\n  testId?: string;\n  disabled?: boolean;\n  icon?: React.ReactElement;\n  collapsed?: boolean;\n  hoverContent?: React.ReactNode;\n  /**\n   * When true, forces the active style regardless of the current path.\n   * Useful for links that should appear active for multiple related routes\n   * (e.g. the Extensions link being active on /mcp and /plugins too).\n   */\n  forceActive?: boolean;\n  /** Pin-as-home toggle; rendered only when the sidebar is expanded. */\n  pinAction?: SidebarNavLinkPinAction;\n}\n\nexport function SidebarNavLink({\n  to,\n  label,\n  end = false,\n  indent = false,\n  testId,\n  disabled = false,\n  icon,\n  collapsed = false,\n  hoverContent,\n  forceActive = false,\n  pinAction,\n}: SidebarNavLinkProps) {\n  const { currentPath } = useNavigation();\n  const active = forceActive || isPathActive(currentPath, to, end);\n  const showPinAction = !collapsed && pinAction != null;\n\n  const link = (\n    <NavigationLink\n      to={to}\n      end={end}\n      data-testid={testId}\n      tabIndex={disabled ? -1 : 0}\n      aria-label={collapsed ? label : undefined}\n      // Announce the disabled state to assistive tech. The visual disabled\n      // styling plus tabIndex=-1 + preventDefault gives sighted/keyboard users\n      // the right behaviour already; this closes the screen-reader gap so the\n      // link doesn't sound \"actionable.\"\n      aria-disabled={disabled || undefined}\n      onClick={(e) => {\n        if (disabled) {\n          e.preventDefault();\n        }\n      }}\n      className={cn(\n        sidebarNavRowClassName({ indent, collapsed }),\n        !collapsed &&\n          (active\n            ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n            : SIDEBAR_ROW_INTERACTIVE_CLASS.idle),\n        disabled && \"opacity-50\",\n        disabled && \"pointer-events-none\",\n        // Constant right reserve so label truncation doesn't reflow on hover.\n        showPinAction && \"pr-9\",\n      )}\n    >\n      {icon ? (\n        collapsed ? (\n          <SidebarCollapsedIconSlot active={active}>\n            {icon}\n          </SidebarCollapsedIconSlot>\n        ) : (\n          <span className={SIDEBAR_ICON_SLOT_CLASS}>{icon}</span>\n        )\n      ) : null}\n      <span className={sidebarNavLabelClassName(collapsed)}>{label}</span>\n    </NavigationLink>\n  );\n\n  if (!collapsed) {\n    if (!pinAction) return link;\n\n    // NavigationLink renders an <a>, so the pin toggle is an absolutely\n    // positioned sibling rather than a nested button. Bare `group` is safe\n    // here: only collapsed rows use it, and this branch is expanded-only.\n    return (\n      <div className=\"group relative\">\n        {link}\n        <button\n          type=\"button\"\n          data-testid={pinAction.testId}\n          aria-pressed={pinAction.pinned}\n          aria-label={pinAction.label}\n          onClick={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            pinAction.onToggle();\n          }}\n          className={cn(\n            \"absolute right-1.5 top-1/2 -translate-y-1/2\",\n            \"flex shrink-0 cursor-pointer items-center justify-center rounded-md p-1\",\n            \"text-[var(--oh-muted)] hover:bg-white/10 hover:text-white\",\n            hoverRevealActionClassName(pinAction.pinned),\n          )}\n        >\n          <Pin\n            className={cn(\"h-3.5 w-3.5\", pinAction.pinned && \"fill-current\")}\n            aria-hidden\n          />\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <StyledTooltip\n      content={hoverContent ?? label}\n      placement=\"right\"\n      tooltipClassName={hoverContent ? \"p-0 bg-tertiary text-white\" : undefined}\n    >\n      {link}\n    </StyledTooltip>\n  );\n}\n"],"mappings":"ihBAeA,SAAS,EAAa,EAAqB,EAAY,EAAc,CASnE,OARI,IAAO,KAIP,EACK,IAAgB,EAGlB,IAAgB,GAAM,EAAY,WAAW,GAAG,EAAG,EAAE,CAC9D,CA8BA,SAAgB,EAAe,CAC7B,KACA,QACA,MAAM,GACN,SAAS,GACT,SACA,WAAW,GACX,OACA,YAAY,GACZ,eACA,cAAc,GACd,aACsB,CACtB,GAAM,CAAE,eAAgB,EAAA,cAAc,EAChC,EAAS,GAAe,EAAa,EAAa,EAAI,CAAG,EACzD,EAAgB,CAAC,GAAa,GAAa,KAE3C,GACJ,EAAA,EAAA,MAAC,EAAA,eAAD,CACM,KACC,MACL,cAAa,EACb,SAAU,EAAW,GAAK,EAC1B,aAAY,EAAY,EAAQ,IAAA,GAKhC,gBAAe,GAAY,IAAA,GAC3B,QAAU,GAAM,CACV,GACF,EAAE,eAAe,CAErB,EACA,UAAW,EAAA,GACT,EAAA,uBAAuB,CAAE,SAAQ,WAAU,CAAC,EAC5C,CAAC,IACE,EACG,EAAA,8BAA8B,OAC9B,EAAA,8BAA8B,MACpC,GAAY,aACZ,GAAY,sBAEZ,GAAiB,MACnB,WA1BF,CA4BG,EACC,GACE,EAAA,EAAA,KAAC,EAAA,yBAAD,CAAkC,kBAC/B,CACuB,CAAA,GAE1B,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,iCAA0B,CAAW,CAAA,EAEtD,MACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,yBAAyB,CAAS,WAAI,CAAY,CAAA,CACrD,IAsClB,OAnCK,GAoCH,EAAA,EAAA,KAAC,EAAA,cAAD,CACE,QAAS,GAAgB,EACzB,UAAU,QACV,iBAAkB,EAAe,6BAA+B,IAAA,YAE/D,CACY,CAAA,EAzCV,GAMH,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,0BAAf,CACG,GACD,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,cAAa,EAAU,OACvB,eAAc,EAAU,OACxB,aAAY,EAAU,MACtB,QAAU,GAAU,CAClB,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,EAAU,SAAS,CACrB,EACA,UAAW,EAAA,GACT,8CACA,0EACA,4DACA,EAAA,2BAA2B,EAAU,MAAM,CAC7C,YAEA,EAAA,EAAA,KAAC,EAAA,IAAD,CACE,UAAW,EAAA,GAAG,cAAe,EAAU,QAAU,cAAc,EAC/D,cAAA,EACD,CAAA,CACK,CAAA,CACL,IA9BgB,CA2C3B"}

package/dist/components/features/sidebar/sidebar-nav-link.d.ts

@@ -1,4 +1,11 @@
 import React from "react";
+export interface SidebarNavLinkPinAction {
+    pinned: boolean;
+    onToggle: () => void;
+    /** Localized aria-label; pin vs unpin variants resolved by the caller. */
+    label: string;
+    testId: string;
+}
 interface SidebarNavLinkProps {
     to: string;
     label: string;
@@ -15,6 +22,8 @@ interface SidebarNavLinkProps {
      * (e.g. the Extensions link being active on /mcp and /plugins too).
      */
     forceActive?: boolean;
+    /** Pin-as-home toggle; rendered only when the sidebar is expanded. */
+    pinAction?: SidebarNavLinkPinAction;
 }
-export declare function SidebarNavLink({ to, label, end, indent, testId, disabled, icon, collapsed, hoverContent, forceActive, }: SidebarNavLinkProps): React.JSX.Element;
+export declare function SidebarNavLink({ to, label, end, indent, testId, disabled, icon, collapsed, hoverContent, forceActive, pinAction, }: SidebarNavLinkProps): React.JSX.Element;
 export {};

package/dist/components/features/sidebar/sidebar-nav-link.js

@@ -1,49 +1,67 @@
-import { cn as e } from "../../../utils/utils.js";
-import { useNavigation as t } from "../../../context/navigation-context.js";
-import { StyledTooltip as n } from "../../shared/buttons/styled-tooltip.js";
-import { NavigationLink as r } from "../../shared/navigation-link.js";
-import { SIDEBAR_ICON_SLOT_CLASS as i, SIDEBAR_ROW_INTERACTIVE_CLASS as a, sidebarNavLabelClassName as o, sidebarNavRowClassName as s } from "./sidebar-layout.js";
-import { SidebarCollapsedIconSlot as c } from "./sidebar-collapsed-icon-slot.js";
+import { Pin as e } from "../../../node_modules/lucide-react/dist/esm/icons/pin.js";
+import { cn as t } from "../../../utils/utils.js";
+import { useNavigation as n } from "../../../context/navigation-context.js";
+import { StyledTooltip as r } from "../../shared/buttons/styled-tooltip.js";
+import { NavigationLink as i } from "../../shared/navigation-link.js";
+import { hoverRevealActionClassName as a } from "../../../utils/hover-reveal-classes.js";
+import { SIDEBAR_ICON_SLOT_CLASS as o, SIDEBAR_ROW_INTERACTIVE_CLASS as s, sidebarNavLabelClassName as c, sidebarNavRowClassName as l } from "./sidebar-layout.js";
+import { SidebarCollapsedIconSlot as u } from "./sidebar-collapsed-icon-slot.js";
 import "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/features/sidebar/sidebar-nav-link.tsx
-function d(e, t, n) {
+function p(e, t, n) {
 	return t === "/" || n ? e === t : e === t || e.startsWith(`${t}/`);
 }
-function f({ to: f, label: p, end: m = !1, indent: h = !1, testId: g, disabled: _ = !1, icon: v, collapsed: y = !1, hoverContent: b, forceActive: x = !1 }) {
-	let { currentPath: S } = t(), C = x || d(S, f, m), w = /* @__PURE__ */ u(r, {
-		to: f,
-		end: m,
-		"data-testid": g,
-		tabIndex: _ ? -1 : 0,
-		"aria-label": y ? p : void 0,
-		"aria-disabled": _ || void 0,
+function m({ to: m, label: h, end: g = !1, indent: _ = !1, testId: v, disabled: y = !1, icon: b, collapsed: x = !1, hoverContent: S, forceActive: C = !1, pinAction: w }) {
+	let { currentPath: T } = n(), E = C || p(T, m, g), D = !x && w != null, O = /* @__PURE__ */ f(i, {
+		to: m,
+		end: g,
+		"data-testid": v,
+		tabIndex: y ? -1 : 0,
+		"aria-label": x ? h : void 0,
+		"aria-disabled": y || void 0,
 		onClick: (e) => {
-			_ && e.preventDefault();
+			y && e.preventDefault();
 		},
-		className: e(s({
-			indent: h,
-			collapsed: y
-		}), !y && (C ? a.active : a.idle), _ && "opacity-50", _ && "pointer-events-none"),
-		children: [v ? y ? /* @__PURE__ */ l(c, {
-			active: C,
-			children: v
-		}) : /* @__PURE__ */ l("span", {
-			className: i,
-			children: v
-		}) : null, /* @__PURE__ */ l("span", {
-			className: o(y),
-			children: p
+		className: t(l({
+			indent: _,
+			collapsed: x
+		}), !x && (E ? s.active : s.idle), y && "opacity-50", y && "pointer-events-none", D && "pr-9"),
+		children: [b ? x ? /* @__PURE__ */ d(u, {
+			active: E,
+			children: b
+		}) : /* @__PURE__ */ d("span", {
+			className: o,
+			children: b
+		}) : null, /* @__PURE__ */ d("span", {
+			className: c(x),
+			children: h
 		})]
 	});
-	return y ? /* @__PURE__ */ l(n, {
-		content: b ?? p,
+	return x ? /* @__PURE__ */ d(r, {
+		content: S ?? h,
 		placement: "right",
-		tooltipClassName: b ? "p-0 bg-tertiary text-white" : void 0,
-		children: w
-	}) : w;
+		tooltipClassName: S ? "p-0 bg-tertiary text-white" : void 0,
+		children: O
+	}) : w ? /* @__PURE__ */ f("div", {
+		className: "group relative",
+		children: [O, /* @__PURE__ */ d("button", {
+			type: "button",
+			"data-testid": w.testId,
+			"aria-pressed": w.pinned,
+			"aria-label": w.label,
+			onClick: (e) => {
+				e.preventDefault(), e.stopPropagation(), w.onToggle();
+			},
+			className: t("absolute right-1.5 top-1/2 -translate-y-1/2", "flex shrink-0 cursor-pointer items-center justify-center rounded-md p-1", "text-[var(--oh-muted)] hover:bg-white/10 hover:text-white", a(w.pinned)),
+			children: /* @__PURE__ */ d(e, {
+				className: t("h-3.5 w-3.5", w.pinned && "fill-current"),
+				"aria-hidden": !0
+			})
+		})]
+	}) : O;
 }
 //#endregion
-export { f as SidebarNavLink };
+export { m as SidebarNavLink };
 
 //# sourceMappingURL=sidebar-nav-link.js.map

package/dist/components/features/sidebar/sidebar-nav-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-nav-link.js","names":[],"sources":["../../../../src/components/features/sidebar/sidebar-nav-link.tsx"],"sourcesContent":["import React from \"react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { cn } from \"#/utils/utils\";\nimport { SidebarCollapsedIconSlot } from \"./sidebar-collapsed-icon-slot\";\nimport {\n  SIDEBAR_ICON_SLOT_CLASS,\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavLabelClassName,\n  sidebarNavRowClassName,\n} from \"./sidebar-layout\";\n\nfunction isPathActive(currentPath: string, to: string, end: boolean) {\n  if (to === \"/\") {\n    return currentPath === to;\n  }\n\n  if (end) {\n    return currentPath === to;\n  }\n\n  return currentPath === to || currentPath.startsWith(`${to}/`);\n}\n\ninterface SidebarNavLinkProps {\n  to: string;\n  label: string;\n  end?: boolean;\n  indent?: boolean;\n  testId?: string;\n  disabled?: boolean;\n  icon?: React.ReactElement;\n  collapsed?: boolean;\n  hoverContent?: React.ReactNode;\n  /**\n   * When true, forces the active style regardless of the current path.\n   * Useful for links that should appear active for multiple related routes\n   * (e.g. the Extensions link being active on /mcp and /plugins too).\n   */\n  forceActive?: boolean;\n}\n\nexport function SidebarNavLink({\n  to,\n  label,\n  end = false,\n  indent = false,\n  testId,\n  disabled = false,\n  icon,\n  collapsed = false,\n  hoverContent,\n  forceActive = false,\n}: SidebarNavLinkProps) {\n  const { currentPath } = useNavigation();\n  const active = forceActive || isPathActive(currentPath, to, end);\n\n  const link = (\n    <NavigationLink\n      to={to}\n      end={end}\n      data-testid={testId}\n      tabIndex={disabled ? -1 : 0}\n      aria-label={collapsed ? label : undefined}\n      // Announce the disabled state to assistive tech. The visual disabled\n      // styling plus tabIndex=-1 + preventDefault gives sighted/keyboard users\n      // the right behaviour already; this closes the screen-reader gap so the\n      // link doesn't sound \"actionable.\"\n      aria-disabled={disabled || undefined}\n      onClick={(e) => {\n        if (disabled) {\n          e.preventDefault();\n        }\n      }}\n      className={cn(\n        sidebarNavRowClassName({ indent, collapsed }),\n        !collapsed &&\n          (active\n            ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n            : SIDEBAR_ROW_INTERACTIVE_CLASS.idle),\n        disabled && \"opacity-50\",\n        disabled && \"pointer-events-none\",\n      )}\n    >\n      {icon ? (\n        collapsed ? (\n          <SidebarCollapsedIconSlot active={active}>\n            {icon}\n          </SidebarCollapsedIconSlot>\n        ) : (\n          <span className={SIDEBAR_ICON_SLOT_CLASS}>{icon}</span>\n        )\n      ) : null}\n      <span className={sidebarNavLabelClassName(collapsed)}>{label}</span>\n    </NavigationLink>\n  );\n\n  if (!collapsed) return link;\n\n  return (\n    <StyledTooltip\n      content={hoverContent ?? label}\n      placement=\"right\"\n      tooltipClassName={hoverContent ? \"p-0 bg-tertiary text-white\" : undefined}\n    >\n      {link}\n    </StyledTooltip>\n  );\n}\n"],"mappings":";;;;;;;;;AAaA,SAAS,EAAa,GAAqB,GAAY,GAAc;CASnE,OARI,MAAO,OAIP,IACK,MAAgB,IAGlB,MAAgB,KAAM,EAAY,WAAW,GAAG,EAAG,EAAE;AAC9D;AAoBA,SAAgB,EAAe,EAC7B,OACA,UACA,SAAM,IACN,YAAS,IACT,WACA,cAAW,IACX,SACA,eAAY,IACZ,iBACA,iBAAc,MACQ;CACtB,IAAM,EAAE,mBAAgB,EAAc,GAChC,IAAS,KAAe,EAAa,GAAa,GAAI,CAAG,GAEzD,IACJ,kBAAC,GAAD;EACM;EACC;EACL,eAAa;EACb,UAAU,IAAW,KAAK;EAC1B,cAAY,IAAY,IAAQ,KAAA;EAKhC,iBAAe,KAAY,KAAA;EAC3B,UAAU,MAAM;GACd,AAAI,KACF,EAAE,eAAe;EAErB;EACA,WAAW,EACT,EAAuB;GAAE;GAAQ;EAAU,CAAC,GAC5C,CAAC,MACE,IACG,EAA8B,SAC9B,EAA8B,OACpC,KAAY,cACZ,KAAY,qBACd;YAxBF,CA0BG,IACC,IACE,kBAAC,GAAD;GAAkC;aAC/B;EACuB,CAAA,IAE1B,kBAAC,QAAD;GAAM,WAAW;aAA0B;EAAW,CAAA,IAEtD,MACJ,kBAAC,QAAD;GAAM,WAAW,EAAyB,CAAS;aAAI;EAAY,CAAA,CACrD;;CAKlB,OAFK,IAGH,kBAAC,GAAD;EACE,SAAS,KAAgB;EACzB,WAAU;EACV,kBAAkB,IAAe,+BAA+B,KAAA;YAE/D;CACY,CAAA,IATM;AAWzB"}
+{"version":3,"file":"sidebar-nav-link.js","names":[],"sources":["../../../../src/components/features/sidebar/sidebar-nav-link.tsx"],"sourcesContent":["import React from \"react\";\nimport { Pin } from \"lucide-react\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { StyledTooltip } from \"#/components/shared/buttons/styled-tooltip\";\nimport { useNavigation } from \"#/context/navigation-context\";\nimport { hoverRevealActionClassName } from \"#/utils/hover-reveal-classes\";\nimport { cn } from \"#/utils/utils\";\nimport { SidebarCollapsedIconSlot } from \"./sidebar-collapsed-icon-slot\";\nimport {\n  SIDEBAR_ICON_SLOT_CLASS,\n  SIDEBAR_ROW_INTERACTIVE_CLASS,\n  sidebarNavLabelClassName,\n  sidebarNavRowClassName,\n} from \"./sidebar-layout\";\n\nfunction isPathActive(currentPath: string, to: string, end: boolean) {\n  if (to === \"/\") {\n    return currentPath === to;\n  }\n\n  if (end) {\n    return currentPath === to;\n  }\n\n  return currentPath === to || currentPath.startsWith(`${to}/`);\n}\n\nexport interface SidebarNavLinkPinAction {\n  pinned: boolean;\n  onToggle: () => void;\n  /** Localized aria-label; pin vs unpin variants resolved by the caller. */\n  label: string;\n  testId: string;\n}\n\ninterface SidebarNavLinkProps {\n  to: string;\n  label: string;\n  end?: boolean;\n  indent?: boolean;\n  testId?: string;\n  disabled?: boolean;\n  icon?: React.ReactElement;\n  collapsed?: boolean;\n  hoverContent?: React.ReactNode;\n  /**\n   * When true, forces the active style regardless of the current path.\n   * Useful for links that should appear active for multiple related routes\n   * (e.g. the Extensions link being active on /mcp and /plugins too).\n   */\n  forceActive?: boolean;\n  /** Pin-as-home toggle; rendered only when the sidebar is expanded. */\n  pinAction?: SidebarNavLinkPinAction;\n}\n\nexport function SidebarNavLink({\n  to,\n  label,\n  end = false,\n  indent = false,\n  testId,\n  disabled = false,\n  icon,\n  collapsed = false,\n  hoverContent,\n  forceActive = false,\n  pinAction,\n}: SidebarNavLinkProps) {\n  const { currentPath } = useNavigation();\n  const active = forceActive || isPathActive(currentPath, to, end);\n  const showPinAction = !collapsed && pinAction != null;\n\n  const link = (\n    <NavigationLink\n      to={to}\n      end={end}\n      data-testid={testId}\n      tabIndex={disabled ? -1 : 0}\n      aria-label={collapsed ? label : undefined}\n      // Announce the disabled state to assistive tech. The visual disabled\n      // styling plus tabIndex=-1 + preventDefault gives sighted/keyboard users\n      // the right behaviour already; this closes the screen-reader gap so the\n      // link doesn't sound \"actionable.\"\n      aria-disabled={disabled || undefined}\n      onClick={(e) => {\n        if (disabled) {\n          e.preventDefault();\n        }\n      }}\n      className={cn(\n        sidebarNavRowClassName({ indent, collapsed }),\n        !collapsed &&\n          (active\n            ? SIDEBAR_ROW_INTERACTIVE_CLASS.active\n            : SIDEBAR_ROW_INTERACTIVE_CLASS.idle),\n        disabled && \"opacity-50\",\n        disabled && \"pointer-events-none\",\n        // Constant right reserve so label truncation doesn't reflow on hover.\n        showPinAction && \"pr-9\",\n      )}\n    >\n      {icon ? (\n        collapsed ? (\n          <SidebarCollapsedIconSlot active={active}>\n            {icon}\n          </SidebarCollapsedIconSlot>\n        ) : (\n          <span className={SIDEBAR_ICON_SLOT_CLASS}>{icon}</span>\n        )\n      ) : null}\n      <span className={sidebarNavLabelClassName(collapsed)}>{label}</span>\n    </NavigationLink>\n  );\n\n  if (!collapsed) {\n    if (!pinAction) return link;\n\n    // NavigationLink renders an <a>, so the pin toggle is an absolutely\n    // positioned sibling rather than a nested button. Bare `group` is safe\n    // here: only collapsed rows use it, and this branch is expanded-only.\n    return (\n      <div className=\"group relative\">\n        {link}\n        <button\n          type=\"button\"\n          data-testid={pinAction.testId}\n          aria-pressed={pinAction.pinned}\n          aria-label={pinAction.label}\n          onClick={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            pinAction.onToggle();\n          }}\n          className={cn(\n            \"absolute right-1.5 top-1/2 -translate-y-1/2\",\n            \"flex shrink-0 cursor-pointer items-center justify-center rounded-md p-1\",\n            \"text-[var(--oh-muted)] hover:bg-white/10 hover:text-white\",\n            hoverRevealActionClassName(pinAction.pinned),\n          )}\n        >\n          <Pin\n            className={cn(\"h-3.5 w-3.5\", pinAction.pinned && \"fill-current\")}\n            aria-hidden\n          />\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <StyledTooltip\n      content={hoverContent ?? label}\n      placement=\"right\"\n      tooltipClassName={hoverContent ? \"p-0 bg-tertiary text-white\" : undefined}\n    >\n      {link}\n    </StyledTooltip>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAeA,SAAS,EAAa,GAAqB,GAAY,GAAc;CASnE,OARI,MAAO,OAIP,IACK,MAAgB,IAGlB,MAAgB,KAAM,EAAY,WAAW,GAAG,EAAG,EAAE;AAC9D;AA8BA,SAAgB,EAAe,EAC7B,OACA,UACA,SAAM,IACN,YAAS,IACT,WACA,cAAW,IACX,SACA,eAAY,IACZ,iBACA,iBAAc,IACd,gBACsB;CACtB,IAAM,EAAE,mBAAgB,EAAc,GAChC,IAAS,KAAe,EAAa,GAAa,GAAI,CAAG,GACzD,IAAgB,CAAC,KAAa,KAAa,MAE3C,IACJ,kBAAC,GAAD;EACM;EACC;EACL,eAAa;EACb,UAAU,IAAW,KAAK;EAC1B,cAAY,IAAY,IAAQ,KAAA;EAKhC,iBAAe,KAAY,KAAA;EAC3B,UAAU,MAAM;GACd,AAAI,KACF,EAAE,eAAe;EAErB;EACA,WAAW,EACT,EAAuB;GAAE;GAAQ;EAAU,CAAC,GAC5C,CAAC,MACE,IACG,EAA8B,SAC9B,EAA8B,OACpC,KAAY,cACZ,KAAY,uBAEZ,KAAiB,MACnB;YA1BF,CA4BG,IACC,IACE,kBAAC,GAAD;GAAkC;aAC/B;EACuB,CAAA,IAE1B,kBAAC,QAAD;GAAM,WAAW;aAA0B;EAAW,CAAA,IAEtD,MACJ,kBAAC,QAAD;GAAM,WAAW,EAAyB,CAAS;aAAI;EAAY,CAAA,CACrD;;CAsClB,OAnCK,IAoCH,kBAAC,GAAD;EACE,SAAS,KAAgB;EACzB,WAAU;EACV,kBAAkB,IAAe,+BAA+B,KAAA;YAE/D;CACY,CAAA,IAzCV,IAMH,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,GACD,kBAAC,UAAD;GACE,MAAK;GACL,eAAa,EAAU;GACvB,gBAAc,EAAU;GACxB,cAAY,EAAU;GACtB,UAAU,MAAU;IAGlB,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAU,SAAS;GACrB;GACA,WAAW,EACT,+CACA,2EACA,6DACA,EAA2B,EAAU,MAAM,CAC7C;aAEA,kBAAC,GAAD;IACE,WAAW,EAAG,eAAe,EAAU,UAAU,cAAc;IAC/D,eAAA;GACD,CAAA;EACK,CAAA,CACL;MA9BgB;AA2C3B"}

package/dist/components/features/sidebar/sidebar-rail-body.cjs

@@ -1,2 +1,2 @@
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-left.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),a=require("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),o=require("../../../node_modules/lucide-react/dist/esm/icons/server.cjs"),s=require("../../../node_modules/lucide-react/dist/esm/icons/settings.cjs"),c=require("../../../utils/utils.cjs"),l=require("../../../manifests/automation-interface.cjs"),u=require("../../shared/buttons/styled-tooltip.cjs"),d=require("../../shared/navigation-link.cjs"),f=require("./sidebar-layout.cjs"),p=require("./sidebar-collapsed-icon-slot.cjs"),m=require("./sidebar-nav-link.cjs"),h=require("../../shared/buttons/openhands-logo-button.cjs"),g=require("../backends/backend-status-dot.cjs"),_=require("../backends/backend-selector.cjs"),v=require("../command-menu/command-menu-trigger.cjs"),y=require("../settings/agent-canvas-version-tile.cjs"),b=require("./sidebar-conversation-list.cjs"),x=require("./sidebar-onboarding-checklist.cjs"),S=require("../../../icons/automations.cjs");let C=require("react");C=e.__toESM(C,1);let w=require("react/jsx-runtime");var T=18,E=34,D=Math.round(E*30/46);function O({collapsed:e,showCollapseToggle:C,showMobileCloseButton:O=!1,onCloseMobile:k,collapseToggleLabel:A,onCollapse:j,onExpand:M,showCollapsedExpandButton:N,isExtensionsActive:P,currentPath:F,activeBackendHealth:I,collapsedBackendPopoverOpen:L,setCollapsedBackendPopoverOpen:R,collapsedBackendPopoverRef:z,collapsedBackendCloseTimer:B,onOpenAddBackend:V,onOpenManageBackends:H}){let{t:U}=t.useTranslation(`openhands`),W=B;return(0,w.jsxs)(`div`,{className:`flex min-h-0 flex-1 flex-col`,children:[(0,w.jsxs)(`div`,{className:f.sidebarHeaderRowClassName(e),children:[(0,w.jsxs)(`div`,{className:c.cn(e&&C?f.SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS:`flex min-w-0 shrink-0 items-center`),children:[(0,w.jsx)(`div`,{className:c.cn(e&&C&&`flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150`,e&&N&&`opacity-0`),children:(0,w.jsx)(h.OpenHandsLogoButton,{logoWidth:E,logoHeight:D,logoClassName:`max-w-none`,className:c.cn(f.SIDEBAR_ICON_SLOT_CLASS,`overflow-visible`)})}),e&&C?(0,w.jsx)(`button`,{type:`button`,"data-testid":`sidebar-collapse-toggle`,"aria-pressed":e,"aria-label":A,onClick:M,className:c.cn(f.SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,N?`opacity-100 pointer-events-auto`:`opacity-0 pointer-events-none`),children:(0,w.jsx)(i.ChevronRight,{width:14,height:14})}):null]}),!e&&C?(0,w.jsx)(`button`,{type:`button`,"data-testid":`sidebar-collapse-toggle`,"aria-pressed":e,"aria-label":A,onClick:j,className:c.cn(`hidden md:inline-flex ml-auto`,f.SIDEBAR_ICON_BUTTON_CLASS,`text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]`),children:(0,w.jsx)(r.ChevronLeft,{width:14,height:14})}):null,!e&&O?(0,w.jsx)(`button`,{type:`button`,"data-testid":`sidebar-mobile-drawer-close`,onClick:k,"aria-label":U(n.I18nKey.SIDEBAR$CLOSE_MENU),className:c.cn(`inline-flex ml-auto`,f.SIDEBAR_ICON_BUTTON_CLASS,`text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]`),children:(0,w.jsx)(r.ChevronLeft,{width:14,height:14})}):null]}),(0,w.jsxs)(`nav`,{className:f.sidebarNavListClassName(e),children:[(0,w.jsx)(v.CommandMenuTrigger,{collapsed:e}),(0,w.jsx)(m.SidebarNavLink,{to:`/conversations`,end:!0,label:U(n.I18nKey.SIDEBAR$NEW_CHAT),testId:`sidebar-conversations-link`,collapsed:e,icon:(0,w.jsx)(a.Plus,{width:T,height:T})}),(0,w.jsx)(m.SidebarNavLink,{to:`/customize`,label:U(n.I18nKey.NAV$CUSTOMIZE),testId:`sidebar-skills-link`,collapsed:e,forceActive:P,icon:(0,w.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:T,height:T,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:[(0,w.jsx)(`path`,{d:`M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z`}),(0,w.jsx)(`path`,{d:`m7 16.5-4.74-2.85`}),(0,w.jsx)(`path`,{d:`m7 16.5 5-3`}),(0,w.jsx)(`path`,{d:`M7 16.5v5.17`}),(0,w.jsx)(`path`,{d:`M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z`}),(0,w.jsx)(`path`,{d:`m17 16.5-5-3`}),(0,w.jsx)(`path`,{d:`m17 16.5 4.74-2.85`}),(0,w.jsx)(`path`,{d:`m17 16.5v5.17`}),(0,w.jsx)(`path`,{d:`M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z`}),(0,w.jsx)(`path`,{d:`M12 8 7.26 5.15`}),(0,w.jsx)(`path`,{d:`m12 8 4.74-2.85`}),(0,w.jsx)(`path`,{d:`M12 13.5V8`})]})}),l.hasAutomationInterface()&&(0,w.jsx)(m.SidebarNavLink,{to:l.automationListPath(),label:l.getInterfaceCopy().sidebarLabel,testId:`sidebar-automations-link`,collapsed:e,icon:(0,w.jsx)(S.default,{width:T,height:T})})]}),(0,w.jsx)(b.SidebarConversationList,{collapsed:e}),e&&C?(0,w.jsxs)(`nav`,{className:c.cn(f.sidebarNavListClassName(e),`mt-auto pb-2 cursor-pointer`),children:[(0,w.jsx)(u.StyledTooltip,{content:U(n.I18nKey.SIDEBAR$SETTINGS),placement:`right`,children:(0,w.jsxs)(d.NavigationLink,{to:`/settings`,"data-testid":`collapsed-settings-link`,"aria-label":U(n.I18nKey.SIDEBAR$SETTINGS),className:f.sidebarNavRowClassName({collapsed:!0}),children:[(0,w.jsx)(p.SidebarCollapsedIconSlot,{active:F.startsWith(`/settings`),children:(0,w.jsx)(s.Settings,{width:T,height:T})}),(0,w.jsx)(`span`,{className:f.sidebarNavLabelClassName(!0),children:U(n.I18nKey.SIDEBAR$SETTINGS)})]})}),(0,w.jsxs)(`div`,{className:`relative`,ref:z,onMouseEnter:()=>{W.current&&=(clearTimeout(W.current),null),R(!0)},onMouseLeave:()=>{W.current=setTimeout(()=>R(!1),150)},children:[(0,w.jsxs)(`button`,{type:`button`,"data-testid":`collapsed-backend-selector-link`,"aria-label":U(n.I18nKey.BACKEND$MANAGE),"aria-expanded":L,onMouseDown:e=>{e.preventDefault(),e.stopPropagation()},onMouseUp:e=>e.stopPropagation(),className:c.cn(f.sidebarNavRowClassName({collapsed:!0}),`relative`),children:[(0,w.jsx)(p.SidebarCollapsedIconSlot,{active:L,children:(0,w.jsxs)(`span`,{className:`relative inline-flex size-[18px] shrink-0 items-center justify-center`,children:[(0,w.jsx)(g.BackendStatusDot,{isConnected:I?.isConnected??null,className:`absolute -left-0.5 -top-0.5 z-[1] pointer-events-none`}),(0,w.jsx)(o.Server,{width:T,height:T})]})}),(0,w.jsx)(`span`,{className:f.sidebarNavLabelClassName(!0),children:U(n.I18nKey.BACKEND$MANAGE)})]}),L?(0,w.jsx)(`div`,{className:`absolute bottom-[-4px] left-full pl-2.5 z-40 w-[272px]`,onClick:e=>e.stopPropagation(),children:(0,w.jsx)(_.BackendSelector,{sidebarCollapsed:e,hideTrigger:!0,defaultOpen:!0,openUpward:!0,onSelectOption:()=>R(!1),onOpenAddBackend:V,onOpenManageBackends:H})}):null]})]}):null,e?null:(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(`div`,{className:`mb-2 shrink-0 pr-2.5`,children:(0,w.jsx)(x.SidebarOnboardingChecklist,{collapsed:e})}),(0,w.jsxs)(`div`,{className:c.cn(`flex flex-col items-stretch max-w-none box-border shrink-0 gap-2`,`-ml-2.5 w-[calc(100%+0.625rem)] border-t border-[var(--oh-border)] pt-2 px-2.5`),children:[(0,w.jsx)(y.AgentCanvasVersionTile,{hideWhenUpToDate:!0}),(0,w.jsx)(_.BackendSelector,{sidebarCollapsed:e,openUpward:!0})]})]})]})}exports.SidebarRailBody=O;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../i18n/declaration.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-left.cjs"),ee=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/panels-top-left.cjs"),a=require("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),o=require("../../../node_modules/lucide-react/dist/esm/icons/server.cjs"),s=require("../../../node_modules/lucide-react/dist/esm/icons/settings.cjs"),c=require("../../../utils/utils.cjs"),l=require("../../../manifests/automation-interface.cjs"),u=require("../../shared/buttons/styled-tooltip.cjs"),d=require("../../shared/navigation-link.cjs"),f=require("./sidebar-layout.cjs"),p=require("./sidebar-collapsed-icon-slot.cjs"),m=require("./sidebar-nav-link.cjs"),h=require("../../shared/buttons/openhands-logo-button.cjs"),g=require("../../../hooks/use-pinned-home-route.cjs"),_=require("../backends/backend-status-dot.cjs"),v=require("../backends/backend-selector.cjs"),y=require("../command-menu/command-menu-trigger.cjs"),b=require("../settings/agent-canvas-version-tile.cjs"),x=require("../../../icons/automations.cjs"),S=require("./sidebar-conversation-list.cjs"),C=require("./sidebar-onboarding-checklist.cjs"),w=require("../canvas-extensions/canvas-extensions-runtime.cjs");let T=require("react");T=e.__toESM(T,1);let E=require("react/jsx-runtime");var D=18,O=34,k=Math.round(O*30/46);function A({collapsed:e,showCollapseToggle:T,showMobileCloseButton:A=!1,onCloseMobile:j,collapseToggleLabel:M,onCollapse:N,onExpand:P,showCollapsedExpandButton:F,isExtensionsActive:I,currentPath:L,activeBackend:R,activeBackendHealth:z,collapsedBackendPopoverOpen:B,setCollapsedBackendPopoverOpen:V,collapsedBackendPopoverRef:H,collapsedBackendCloseTimer:U,onOpenAddBackend:W,onOpenManageBackends:G}){let{t:K}=t.useTranslation(`openhands`),{pages:q}=w.useCanvasExtensionsRuntime(),J=U,{isPinnedRoute:Y,togglePinnedRoute:X}=g.usePinnedHomeRoute(),Z=(e,t)=>{let r=Y(e);return{pinned:r,onToggle:()=>X(e),label:K(r?n.I18nKey.SIDEBAR$UNPIN_AS_HOME:n.I18nKey.SIDEBAR$PIN_AS_HOME),testId:t}},Q=R.kind===`cloud`,$=Q?`${R.host.replace(/\/+$/,``)}/settings`:null;return(0,E.jsxs)(`div`,{className:`flex min-h-0 flex-1 flex-col`,children:[(0,E.jsxs)(`div`,{className:f.sidebarHeaderRowClassName(e),children:[(0,E.jsxs)(`div`,{className:c.cn(e&&T?f.SIDEBAR_COLLAPSED_LOGO_WRAPPER_CLASS:`flex min-w-0 shrink-0 items-center`),children:[(0,E.jsx)(`div`,{className:c.cn(e&&T&&`flex h-full w-full items-center justify-start pl-2.5 transition-opacity duration-150`,e&&F&&`opacity-0`),children:(0,E.jsx)(h.OpenHandsLogoButton,{logoWidth:O,logoHeight:k,logoClassName:`max-w-none`,className:c.cn(f.SIDEBAR_ICON_SLOT_CLASS,`overflow-visible`)})}),e&&T?(0,E.jsx)(`button`,{type:`button`,"data-testid":`sidebar-collapse-toggle`,"aria-pressed":e,"aria-label":M,onClick:P,className:c.cn(f.SIDEBAR_COLLAPSE_TOGGLE_OVERLAY_CLASS,F?`opacity-100 pointer-events-auto`:`opacity-0 pointer-events-none`),children:(0,E.jsx)(ee.ChevronRight,{width:14,height:14})}):null]}),!e&&T?(0,E.jsx)(`button`,{type:`button`,"data-testid":`sidebar-collapse-toggle`,"aria-pressed":e,"aria-label":M,onClick:N,className:c.cn(`hidden md:inline-flex ml-auto`,f.SIDEBAR_ICON_BUTTON_CLASS,`text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]`),children:(0,E.jsx)(r.ChevronLeft,{width:14,height:14})}):null,!e&&A?(0,E.jsx)(`button`,{type:`button`,"data-testid":`sidebar-mobile-drawer-close`,onClick:j,"aria-label":K(n.I18nKey.SIDEBAR$CLOSE_MENU),className:c.cn(`inline-flex ml-auto`,f.SIDEBAR_ICON_BUTTON_CLASS,`text-[var(--oh-muted)] hover:text-white hover:bg-[var(--oh-surface-raised)]`),children:(0,E.jsx)(r.ChevronLeft,{width:14,height:14})}):null]}),(0,E.jsxs)(`nav`,{className:f.sidebarNavListClassName(e),children:[(0,E.jsx)(y.CommandMenuTrigger,{collapsed:e}),(0,E.jsx)(m.SidebarNavLink,{to:`/conversations`,end:!0,label:K(n.I18nKey.SIDEBAR$NEW_CHAT),testId:`sidebar-conversations-link`,collapsed:e,icon:(0,E.jsx)(a.Plus,{width:D,height:D})}),(0,E.jsx)(m.SidebarNavLink,{to:g.CUSTOMIZE_PATH,label:K(n.I18nKey.NAV$CUSTOMIZE),testId:`sidebar-skills-link`,collapsed:e,forceActive:I,pinAction:Z(g.CUSTOMIZE_PATH,`sidebar-pin-home-toggle-customize`),icon:(0,E.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:D,height:D,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:[(0,E.jsx)(`path`,{d:`M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z`}),(0,E.jsx)(`path`,{d:`m7 16.5-4.74-2.85`}),(0,E.jsx)(`path`,{d:`m7 16.5 5-3`}),(0,E.jsx)(`path`,{d:`M7 16.5v5.17`}),(0,E.jsx)(`path`,{d:`M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z`}),(0,E.jsx)(`path`,{d:`m17 16.5-5-3`}),(0,E.jsx)(`path`,{d:`m17 16.5 4.74-2.85`}),(0,E.jsx)(`path`,{d:`m17 16.5v5.17`}),(0,E.jsx)(`path`,{d:`M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z`}),(0,E.jsx)(`path`,{d:`M12 8 7.26 5.15`}),(0,E.jsx)(`path`,{d:`m12 8 4.74-2.85`}),(0,E.jsx)(`path`,{d:`M12 13.5V8`})]})}),l.hasAutomationInterface()&&(0,E.jsx)(m.SidebarNavLink,{to:l.automationListPath(),label:l.getInterfaceCopy().sidebarLabel,testId:`sidebar-automations-link`,collapsed:e,icon:(0,E.jsx)(x.default,{width:D,height:D}),pinAction:Z(l.automationListPath(),`sidebar-pin-home-toggle-automations`)}),q.map(t=>(0,E.jsx)(m.SidebarNavLink,{to:t.href,label:t.contribution.nav_label||t.contribution.title,testId:`sidebar-canvas-extension-${t.extension.name}-${t.contribution.id}`,collapsed:e,icon:(0,E.jsx)(i.PanelsTopLeft,{width:D,height:D})},`${t.extension.name}:${t.contribution.id}`))]}),(0,E.jsx)(S.SidebarConversationList,{collapsed:e}),e&&T?(0,E.jsxs)(`nav`,{className:c.cn(f.sidebarNavListClassName(e),`mt-auto pb-2 cursor-pointer`),children:[(0,E.jsx)(u.StyledTooltip,{content:K(n.I18nKey.SIDEBAR$SETTINGS),placement:`right`,children:Q&&$?(0,E.jsxs)(`a`,{href:$,target:`_blank`,rel:`noopener noreferrer`,"data-testid":`collapsed-settings-link`,"aria-label":K(n.I18nKey.SIDEBAR$SETTINGS),className:f.sidebarNavRowClassName({collapsed:!0}),children:[(0,E.jsx)(p.SidebarCollapsedIconSlot,{active:!1,children:(0,E.jsx)(s.Settings,{width:D,height:D})}),(0,E.jsx)(`span`,{className:f.sidebarNavLabelClassName(!0),children:K(n.I18nKey.SIDEBAR$SETTINGS)})]}):(0,E.jsxs)(d.NavigationLink,{to:`/settings`,"data-testid":`collapsed-settings-link`,"aria-label":K(n.I18nKey.SIDEBAR$SETTINGS),className:f.sidebarNavRowClassName({collapsed:!0}),children:[(0,E.jsx)(p.SidebarCollapsedIconSlot,{active:L.startsWith(`/settings`),children:(0,E.jsx)(s.Settings,{width:D,height:D})}),(0,E.jsx)(`span`,{className:f.sidebarNavLabelClassName(!0),children:K(n.I18nKey.SIDEBAR$SETTINGS)})]})}),(0,E.jsxs)(`div`,{className:`relative`,ref:H,onMouseEnter:()=>{J.current&&=(clearTimeout(J.current),null),V(!0)},onMouseLeave:()=>{J.current=setTimeout(()=>V(!1),150)},children:[(0,E.jsxs)(`button`,{type:`button`,"data-testid":`collapsed-backend-selector-link`,"aria-label":K(n.I18nKey.BACKEND$MANAGE),"aria-expanded":B,onMouseDown:e=>{e.preventDefault(),e.stopPropagation()},onMouseUp:e=>e.stopPropagation(),className:c.cn(f.sidebarNavRowClassName({collapsed:!0}),`relative`),children:[(0,E.jsx)(p.SidebarCollapsedIconSlot,{active:B,children:(0,E.jsxs)(`span`,{className:`relative inline-flex size-[18px] shrink-0 items-center justify-center`,children:[(0,E.jsx)(_.BackendStatusDot,{isConnected:z?.isConnected??null,className:`absolute -left-0.5 -top-0.5 z-[1] pointer-events-none`}),(0,E.jsx)(o.Server,{width:D,height:D})]})}),(0,E.jsx)(`span`,{className:f.sidebarNavLabelClassName(!0),children:K(n.I18nKey.BACKEND$MANAGE)})]}),B?(0,E.jsx)(`div`,{className:`absolute bottom-[-4px] left-full pl-2.5 z-40 w-[272px]`,onClick:e=>e.stopPropagation(),children:(0,E.jsx)(v.BackendSelector,{sidebarCollapsed:e,hideTrigger:!0,defaultOpen:!0,openUpward:!0,onSelectOption:()=>V(!1),onOpenAddBackend:W,onOpenManageBackends:G})}):null]})]}):null,e?null:(0,E.jsxs)(E.Fragment,{children:[(0,E.jsx)(`div`,{className:`mb-2 shrink-0 pr-2.5`,children:(0,E.jsx)(C.SidebarOnboardingChecklist,{collapsed:e})}),(0,E.jsxs)(`div`,{className:c.cn(`flex flex-col items-stretch max-w-none box-border shrink-0 gap-2`,`-ml-2.5 w-[calc(100%+0.625rem)] border-t border-[var(--oh-border)] pt-2 px-2.5`),children:[(0,E.jsx)(b.AgentCanvasVersionTile,{hideWhenUpToDate:!0}),(0,E.jsx)(v.BackendSelector,{sidebarCollapsed:e,openUpward:!0})]})]})]})}exports.SidebarRailBody=A;
 //# sourceMappingURL=sidebar-rail-body.cjs.map