npm - @openhands/agent-canvas - Versions diffs - 1.14.0 → 1.16.0 - Mend

@openhands/agent-canvas 1.14.0 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1855) hide show

package/dist/components/features/settings/sdk-settings/field-help.js CHANGED Viewed

@@ -12,7 +12,7 @@ var s = {
 	},
 	"verification.critic_api_key": {
 		textKey: "SCHEMA$VERIFICATION$CRITIC_API_KEY$HELP_TEXT",
-		linkTextKey: "SETTINGS$NAV_API_KEYS",
+		linkTextKey: "SETTINGS$OPENHANDS_API_KEY_HELP_LINK",
 		suffixKey: "SCHEMA$VERIFICATION$CRITIC_API_KEY$HELP_SUFFIX",
 		href: "https://app.all-hands.dev/settings/api-keys",
 		hideDescription: !0

package/dist/components/features/settings/sdk-settings/field-help.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"field-help.js","names":[],"sources":["../../../../../src/components/features/settings/sdk-settings/field-help.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { SettingsFieldSchema } from \"#/types/settings\";\nimport { HelpLink } from \"#/ui/help-link\";\nimport { Typography } from \"#/ui/typography\";\nimport { resolveSchemaFieldDescription } from \"#/utils/sdk-settings-field-metadata\";\n\n// ---------------------------------------------------------------------------\n// Help links – UI-only mapping from field keys to user-facing guidance.\n// Keys use conventional i18n pattern: SCHEMA$<PATH>$HELP_TEXT / HELP_LINK_TEXT\n// ---------------------------------------------------------------------------\nexport const FIELD_HELP_LINKS: Record<\n string,\n {\n textKey: string;\n linkTextKey: string;\n href: string;\n /** Skip rendering the schema description separately when the help text already includes it. /\n hideDescription?: boolean;\n /* Optional trailing copy rendered after the link (e.g. \" ~~tab~~ of OpenHands Cloud.\"). */\n suffixKey?: string;\n }\n> = {\n \"llm.api_key\": {\n textKey: \"SCHEMA$LLM$API_KEY$HELP_TEXT\",\n linkTextKey: \"SCHEMA$LLM$API_KEY$HELP_LINK_TEXT\",\n href: \"https://docs.openhands.dev/usage/local-setup#getting-an-api-key\",\n },\n // Mirror the hint shown under the LLM provider's API key field when\n // OpenHands is selected as the active provider; the SDK reuses that active\n // LLM key when the critic key is empty.\n \"verification.critic_api_key\": {\n textKey: \"SCHEMA$VERIFICATION$CRITIC_API_KEY$HELP_TEXT\",\n linkTextKey: \"SETTINGS$~~NAV_API_KEYS~~\",\n suffixKey: \"SCHEMA$VERIFICATION$CRITIC_API_KEY$HELP_SUFFIX\",\n href: \"https://app.all-hands.dev/settings/api-keys\",\n hideDescription: true,\n },\n};\n\nexport function FieldHelp({ field }: { field: SettingsFieldSchema }) {\n const { t } = useTranslation(\"openhands\");\n const helpLink = FIELD_HELP_LINKS[field.key];\n const description = resolveSchemaFieldDescription(\n t,\n field.key,\n field.description,\n );\n\n return (\n <>\n {description && !helpLink?.hideDescription ? (\n <Typography.Paragraph className=\"text-tertiary-alt text-xs leading-5\">\n {description}\n </Typography.Paragraph>\n ) : null}\n {helpLink ? (\n <HelpLink\n testId={`help-link-${field.key}`}\n text={t(helpLink.textKey)}\n linkText={t(helpLink.linkTextKey)}\n href={helpLink.href}\n suffix={helpLink.suffixKey ? ` ${t(helpLink.suffixKey)}` : undefined}\n size=\"settings\"\n linkColor=\"white\"\n />\n ) : null}\n </>\n );\n}\n"],"mappings":";;;;;;AAUA,IAAa,IAWT;CACF,eAAe;EACb,SAAS;EACT,aAAa;EACb,MAAM;CACR;CAIA,+BAA+B;EAC7B,SAAS;EACT,aAAa;EACb,WAAW;EACX,MAAM;EACN,iBAAiB;CACnB;AACF;AAEA,SAAgB,EAAU,EAAE,YAAyC;CACnE,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAW,EAAiB,EAAM,MAClC,IAAc,EAClB,GACA,EAAM,KACN,EAAM,WACR;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,KAAe,CAAC,GAAU,kBACzB,kBAAC,EAAW,WAAZ;EAAsB,WAAU;YAC7B;CACmB,CAAA,IACpB,MACH,IACC,kBAAC,GAAD;EACE,QAAQ,aAAa,EAAM;EAC3B,MAAM,EAAE,EAAS,OAAO;EACxB,UAAU,EAAE,EAAS,WAAW;EAChC,MAAM,EAAS;EACf,QAAQ,EAAS,YAAY,IAAI,EAAE,EAAS,SAAS,MAAM,KAAA;EAC3D,MAAK;EACL,WAAU;CACX,CAAA,IACC,IACJ,EAAA,CAAA;AAEN"}
1	+ {"version":3,"file":"field-help.js","names":[],"sources":["../../../../../src/components/features/settings/sdk-settings/field-help.tsx"],"sourcesContent":["import { useTranslation } from \"react-i18next\";\nimport { SettingsFieldSchema } from \"#/types/settings\";\nimport { HelpLink } from \"#/ui/help-link\";\nimport { Typography } from \"#/ui/typography\";\nimport { resolveSchemaFieldDescription } from \"#/utils/sdk-settings-field-metadata\";\n\n// ---------------------------------------------------------------------------\n// Help links – UI-only mapping from field keys to user-facing guidance.\n// Keys use conventional i18n pattern: SCHEMA$<PATH>$HELP_TEXT / HELP_LINK_TEXT\n// ---------------------------------------------------------------------------\nexport const FIELD_HELP_LINKS: Record<\n string,\n {\n textKey: string;\n linkTextKey: string;\n href: string;\n /** Skip rendering the schema description separately when the help text already includes it. /\n hideDescription?: boolean;\n /* Optional trailing copy rendered after the link (e.g. \" section of OpenHands Cloud.\"). */\n suffixKey?: string;\n }\n> = {\n \"llm.api_key\": {\n textKey: \"SCHEMA$LLM$API_KEY$HELP_TEXT\",\n linkTextKey: \"SCHEMA$LLM$API_KEY$HELP_LINK_TEXT\",\n href: \"https://docs.openhands.dev/usage/local-setup#getting-an-api-key\",\n },\n // Mirror the hint shown under the LLM provider's API key field when\n // OpenHands is selected as the active provider; the SDK reuses that active\n // LLM key when the critic key is empty.\n \"verification.critic_api_key\": {\n textKey: \"SCHEMA$VERIFICATION$CRITIC_API_KEY$HELP_TEXT\",\n linkTextKey: \"SETTINGS$OPENHANDS_API_KEY_HELP_LINK\",\n suffixKey: \"SCHEMA$VERIFICATION$CRITIC_API_KEY$HELP_SUFFIX\",\n href: \"https://app.all-hands.dev/settings/api-keys\",\n hideDescription: true,\n },\n};\n\nexport function FieldHelp({ field }: { field: SettingsFieldSchema }) {\n const { t } = useTranslation(\"openhands\");\n const helpLink = FIELD_HELP_LINKS[field.key];\n const description = resolveSchemaFieldDescription(\n t,\n field.key,\n field.description,\n );\n\n return (\n <>\n {description && !helpLink?.hideDescription ? (\n <Typography.Paragraph className=\"text-tertiary-alt text-xs leading-5\">\n {description}\n </Typography.Paragraph>\n ) : null}\n {helpLink ? (\n <HelpLink\n testId={`help-link-${field.key}`}\n text={t(helpLink.textKey)}\n linkText={t(helpLink.linkTextKey)}\n href={helpLink.href}\n suffix={helpLink.suffixKey ? ` ${t(helpLink.suffixKey)}` : undefined}\n size=\"settings\"\n linkColor=\"white\"\n />\n ) : null}\n </>\n );\n}\n"],"mappings":";;;;;;AAUA,IAAa,IAWT;CACF,eAAe;EACb,SAAS;EACT,aAAa;EACb,MAAM;CACR;CAIA,+BAA+B;EAC7B,SAAS;EACT,aAAa;EACb,WAAW;EACX,MAAM;EACN,iBAAiB;CACnB;AACF;AAEA,SAAgB,EAAU,EAAE,YAAyC;CACnE,IAAM,EAAE,SAAM,EAAe,WAAW,GAClC,IAAW,EAAiB,EAAM,MAClC,IAAc,EAClB,GACA,EAAM,KACN,EAAM,WACR;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA,CACG,KAAe,CAAC,GAAU,kBACzB,kBAAC,EAAW,WAAZ;EAAsB,WAAU;YAC7B;CACmB,CAAA,IACpB,MACH,IACC,kBAAC,GAAD;EACE,QAAQ,aAAa,EAAM;EAC3B,MAAM,EAAE,EAAS,OAAO;EACxB,UAAU,EAAE,EAAS,WAAW;EAChC,MAAM,EAAS;EACf,QAAQ,EAAS,YAAY,IAAI,EAAE,EAAS,SAAS,MAAM,KAAA;EAC3D,MAAK;EACL,WAAU;CACX,CAAA,IACC,IACJ,EAAA,CAAA;AAEN"}

package/dist/components/features/settings/sdk-settings/schema-field.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../../utils/utils.cjs"),r=require("../../../../utils/form-control-classes.cjs"),i=require("../settings-switch.cjs"),a=require("../optional-tag.cjs"),o=require("../settings-input.cjs"),s=require("../settings-dropdown-input.cjs"),c=require("../../../../utils/sdk-settings-field-metadata.cjs"),l=require("./field-help.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=new Set([`verification.critic_api_key`]);function p(e){return e.choices.length>0}function m(e){return e.value_type===`boolean`&&!p(e)}function h(e){return e.value_type===`array`||e.value_type===`object`}function g(e){return e.key.endsWith(`url`)||e.key.endsWith(`_url`)}function _(e){return e.secret?`password`:e.value_type===`integer`||e.value_type===`number`?`number`:e.value_type===`string`&&g(e)?`url`:`text`}function v({field:e,value:u,isDisabled:f,onChange:g}){let{t:v}=t.useTranslation(`openhands`),y=c.resolveSchemaFieldLabel(v,e.key,e.label),b=c.getSettingsFieldConstraints(e.key);return m(e)?(0,d.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,d.jsx)(i.SettingsSwitch,{testId:`sdk-settings-${e.key}`,isToggled:!!u,isDisabled:f,onToggle:g,children:y}),(0,d.jsx)(`div`,{className:r.formControlSwitchDescriptionClassName,children:(0,d.jsx)(l.FieldHelp,{field:e})})]}):p(e)?(0,d.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,d.jsx)(s.SettingsDropdownInput,{testId:`sdk-settings-${e.key}`,name:e.key,label:y,items:e.choices.map(t=>({key:String(t.value),label:c.resolveSchemaChoiceLabel(v,e.key,t.value,t.label)})),selectedKey:u===``?void 0:String(u),isClearable:!e.required,required:e.required,showOptionalTag:!e.required,isDisabled:f,onSelectionChange:e=>g(String(e??``))}),(0,d.jsx)(l.FieldHelp,{field:e})]}):h(e)?(0,d.jsxs)(`label`,{className:`flex flex-col gap-2.5 w-full`,children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,d.jsx)(`span`,{className:`text-sm`,children:y}),e.required?null:(0,d.jsx)(a.OptionalTag,{})]}),(0,d.jsx)(`textarea`,{"data-testid":`sdk-settings-${e.key}`,name:e.key,value:String(u??``),required:e.required,disabled:f,onChange:e=>g(e.target.value),className:n.cn(r.formControlMultilineFieldClassName,`min-h-32 font-mono placeholder:italic`,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]`)}),(0,d.jsx)(l.FieldHelp,{field:e})]}):(0,d.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,d.jsx)(o.SettingsInput,{testId:`sdk-settings-${e.key}`,name:e.key,label:y,type:_(e),value:String(u??``),required:e.required,showOptionalTag:!e.required,isDisabled:f,onChange:g,className:`w-full`,min:b?.min,max:b?.max,step:b?.step}),(0,d.jsx)(l.FieldHelp,{field:e})]})}exports.FIELD_FULL_WIDTH_KEYS=f,exports.SchemaField=v;
+const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),n=require("../../../../utils/utils.cjs"),r=require("../../../../utils/form-control-classes.cjs"),i=require("../optional-tag.cjs"),a=require("../settings-input.cjs"),o=require("../settings-switch.cjs"),s=require("../settings-dropdown-input.cjs"),c=require("../../../../utils/sdk-settings-field-metadata.cjs"),l=require("./field-help.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=new Set([`verification.critic_api_key`]);function p(e){return e.choices.length>0}function m(e){return e.value_type===`boolean`&&!p(e)}function h(e){return e.value_type===`array`||e.value_type===`object`}function g(e){return e.key.endsWith(`url`)||e.key.endsWith(`_url`)}function _(e){return e.secret?`password`:e.value_type===`integer`||e.value_type===`number`?`number`:e.value_type===`string`&&g(e)?`url`:`text`}function v({field:e,value:u,isDisabled:f,onChange:g}){let{t:v}=t.useTranslation(`openhands`),y=c.resolveSchemaFieldLabel(v,e.key,e.label),b=c.getSettingsFieldConstraints(e.key);return m(e)?(0,d.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,d.jsx)(o.SettingsSwitch,{testId:`sdk-settings-${e.key}`,isToggled:!!u,isDisabled:f,onToggle:g,children:y}),(0,d.jsx)(`div`,{className:r.formControlSwitchDescriptionClassName,children:(0,d.jsx)(l.FieldHelp,{field:e})})]}):p(e)?(0,d.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,d.jsx)(s.SettingsDropdownInput,{testId:`sdk-settings-${e.key}`,name:e.key,label:y,items:e.choices.map(t=>({key:String(t.value),label:c.resolveSchemaChoiceLabel(v,e.key,t.value,t.label)})),selectedKey:u===``?void 0:String(u),isClearable:!e.required,required:e.required,showOptionalTag:!e.required,isDisabled:f,onSelectionChange:e=>g(String(e??``))}),(0,d.jsx)(l.FieldHelp,{field:e})]}):h(e)?(0,d.jsxs)(`label`,{className:`flex flex-col gap-2.5 w-full`,children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,d.jsx)(`span`,{className:`text-sm`,children:y}),e.required?null:(0,d.jsx)(i.OptionalTag,{})]}),(0,d.jsx)(`textarea`,{"data-testid":`sdk-settings-${e.key}`,name:e.key,value:String(u??``),required:e.required,disabled:f,onChange:e=>g(e.target.value),className:n.cn(r.formControlMultilineFieldClassName,`min-h-32 font-mono placeholder:italic`,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]`)}),(0,d.jsx)(l.FieldHelp,{field:e})]}):(0,d.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,d.jsx)(a.SettingsInput,{testId:`sdk-settings-${e.key}`,name:e.key,label:y,type:_(e),value:String(u??``),required:e.required,showOptionalTag:!e.required,isDisabled:f,onChange:g,className:`w-full`,min:b?.min,max:b?.max,step:b?.step}),(0,d.jsx)(l.FieldHelp,{field:e})]})}exports.FIELD_FULL_WIDTH_KEYS=f,exports.SchemaField=v;
 //# sourceMappingURL=schema-field.cjs.map

package/dist/components/features/settings/sdk-settings/schema-field.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { useTranslation as e } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
 import { cn as t } from "../../../../utils/utils.js";
 import { formControlMultilineFieldClassName as n, formControlSwitchDescriptionClassName as r } from "../../../../utils/form-control-classes.js";
-import { SettingsSwitch as i } from "../settings-switch.js";
-import { OptionalTag as a } from "../optional-tag.js";
-import { SettingsInput as o } from "../settings-input.js";
+import { OptionalTag as i } from "../optional-tag.js";
+import { SettingsInput as a } from "../settings-input.js";
+import { SettingsSwitch as o } from "../settings-switch.js";
 import { SettingsDropdownInput as s } from "../settings-dropdown-input.js";
 import { getSettingsFieldConstraints as c, resolveSchemaChoiceLabel as l, resolveSchemaFieldLabel as u } from "../../../../utils/sdk-settings-field-metadata.js";
 import { FieldHelp as d } from "./field-help.js";
@@ -30,7 +30,7 @@ function b({ field: m, value: v, isDisabled: b, onChange: x }) {
 	let { t: S } = e("openhands"), C = u(S, m.key, m.label), w = c(m.key);
 	return g(m) ? /* @__PURE__ */ p("div", {
 		className: "flex flex-col gap-1.5",
-		children: [/* @__PURE__ */ f(i, {
+		children: [/* @__PURE__ */ f(o, {
 			testId: `sdk-settings-${m.key}`,
 			isToggled: !!v,
 			isDisabled: b,
@@ -65,7 +65,7 @@ function b({ field: m, value: v, isDisabled: b, onChange: x }) {
 				children: [/* @__PURE__ */ f("span", {
 					className: "text-sm",
 					children: C
-				}), m.required ? null : /* @__PURE__ */ f(a, {})]
+				}), m.required ? null : /* @__PURE__ */ f(i, {})]
 			}),
 			/* @__PURE__ */ f("textarea", {
 				"data-testid": `sdk-settings-${m.key}`,
@@ -80,7 +80,7 @@ function b({ field: m, value: v, isDisabled: b, onChange: x }) {
 		]
 	}) : /* @__PURE__ */ p("div", {
 		className: "flex flex-col gap-1.5",
-		children: [/* @__PURE__ */ f(o, {
+		children: [/* @__PURE__ */ f(a, {
 			testId: `sdk-settings-${m.key}`,
 			name: m.key,
 			label: C,

package/dist/components/features/settings/sdk-settings/sdk-section-page.cjs CHANGED Viewed

@@ -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/axios/index.cjs"),i=require("../../../../utils/retrieve-axios-error-message.cjs"),a=require("../../../../utils/custom-toast-handlers.cjs"),ee=require("../../../../hooks/query/use-settings.cjs"),te=require("../brand-button.cjs"),ne=require("../../../../hooks/mutation/use-save-settings.cjs"),o=require("../../../../hooks/query/use-agent-settings-schema.cjs"),s=require("../llm-settings/llm-settings-inputs-skeleton.cjs"),re=require("../../../../utils/extension-module-card-classes.cjs"),c=require("../../../../utils/sdk-settings-schema.cjs"),l=require("./schema-field.cjs"),ie=require("./view-toggle.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var ae=new Set,f={basic:0,advanced:1,all:2},oe=(e,t)=>f[t]<f[e]?t:e,se=(e,t)=>f[t]>f[e]?t:e,p=(e,{showBasic:t,showAdvanced:n,showAll:r})=>{if(e===`all`)return r?`all`:n?`advanced`:`basic`;if(e===`advanced`)return n?`advanced`:r?`all`:`basic`;if(!t){if(n)return`advanced`;if(r)return`all`}return`basic`},m={agent_settings:`agent_settings_diff`,conversation_settings:`conversation_settings_diff`},ce=(e,t)=>e instanceof r.AxiosError?e.response?.status===401?`${t} This agent server requires X-Session-API-Key. Set VITE_SESSION_API_KEY in the frontend to the same value used by the backend SESSION_API_KEY or OH_SESSION_API_KEYS_0.`:e.response?.status===404?`${t} This backend does not expose /api/settings/* schema endpoints. Upgrade to a recent openhands-agent-server release.`:t:t;function h({settingsSources:e,scope:r=`personal`,header:f,extraDirty:h=!1,buildPayload:g,onSaveSuccess:le,getInitialView:_,forceShowAdvancedView:ue=!1,allowAllView:de=!0,initialValueOverrides:v,embedded:fe=!1,hideSaveButton:pe=!1,suppressSuccessToast:me=!1,onSaveControlChange:y,testId:b=`sdk-section-settings-screen`}){let{t:x}=t.useTranslation(`openhands`),{mutate:he,isPending:S}=ne.useSaveSettings(r),{data:C,isLoading:ge,isFetching:_e}=ee.useSettings(r),w=o.useAgentSettingsSchema(C?.agent_settings_schema),T=o.useConversationSettingsSchema(C?.conversation_settings_schema),E=u.default.useMemo(()=>JSON.stringify(e.map(e=>({source:e.settingsSource,sectionKeys:e.sectionKeys,excludeKeys:e.excludeKeys?Array.from(e.excludeKeys).sort():null}))),[e]),D=u.default.useMemo(()=>JSON.parse(E).map(e=>({settingsSource:e.source,sectionKeys:e.sectionKeys,excludeKeys:e.excludeKeys?new Set(e.excludeKeys):void 0})),[E]),O=u.default.useCallback(e=>e===`conversation_settings`?T.data:w.data,[w.data,T.data]),ve=D.some(e=>e.settingsSource===`conversation_settings`?T.isLoading:w.isLoading),k=u.default.useMemo(()=>D.map(e=>{let t=O(e.settingsSource);if(!c.isValidSettingsSchema(t))return{...e,filteredSchema:null};let n=new Set(e.sectionKeys),r=new Set,i={...t,sections:t.sections.filter(e=>!n.has(e.key)||r.has(e.key)?!1:(r.add(e.key),!0))};return{...e,filteredSchema:i}}),[D,O]),A=k.some(e=>c.hasCriticalSettings(e.filteredSchema)),j=ue||k.some(e=>c.hasAdvancedSettings(e.filteredSchema)),M=de&&k.some(e=>c.hasMinorSettings(e.filteredSchema)),N=u.default.useMemo(()=>ce(D.reduce((e,t)=>e??(t.settingsSource===`conversation_settings`?T.error:w.error),null),x(n.I18nKey.SETTINGS$SDK_SCHEMA_UNAVAILABLE)),[D,w.error,T.error,x]),P=u.default.useMemo(()=>v?JSON.stringify(v):``,[v]),[F,I]=u.default.useState(`basic`),[L,R]=u.default.useState({}),[z,B]=u.default.useState({}),V=u.default.useRef(!1),H=u.default.useMemo(()=>{if(!C)return null;let e={};for(let t of k){if(!t.filteredSchema)return null;e[t.settingsSource]={...e[t.settingsSource]??{},...c.buildInitialSettingsFormValues(C,t.filteredSchema,t.settingsSource)}}if(v){let t=k[0]?.settingsSource;t&&e[t]&&(e[t]={...e[t],...v})}return e},[C,k,P]),U=u.default.useMemo(()=>{if(!C)return null;let e=null;for(let t of k){if(!t.filteredSchema)return null;let n=_?_(C,t.filteredSchema):c.inferInitialView(C,t.filteredSchema,t.settingsSource);e=e?se(e,n):n}return e?p(e,{showBasic:A,showAdvanced:j,showAll:M}):null},[C,k,_,A,j,M]);u.default.useEffect(()=>{V.current=!1,I(`basic`),R({}),B({})},[r,E]),u.default.useEffect(()=>{if(!(!H||!U)){if(R(H),v){let e=k[0]?.settingsSource;if(e){let t=Object.fromEntries(Object.keys(v).map(e=>[e,!0]));B({[e]:t})}else B({})}else B({});V.current?I(e=>oe(e,U)):(V.current=!0,I(U))}},[H,U]);let W=u.default.useMemo(()=>{let e=new Map;for(let t of k)if(t.filteredSchema)for(let n of t.filteredSchema.sections)for(let r of n.fields)e.has(r.key)||e.set(r.key,t.settingsSource);return e},[k]),G=u.default.useMemo(()=>{let e={};for(let t of k)Object.assign(e,L[t.settingsSource]??{});return e},[k,L]),K=u.default.useMemo(()=>{let e={};for(let t of k)Object.assign(e,z[t.settingsSource]??{});return e},[k,z]),q=u.default.useCallback((e,t)=>{let n=W.get(e);n&&(R(r=>({...r,[n]:{...r[n]??{},[e]:t}})),B(t=>({...t,[n]:{...t[n]??{},[e]:!0}})))},[W]),ye=u.default.useCallback(e=>{a.displayErrorToast(i.retrieveAxiosErrorMessage(e)||x(n.I18nKey.ERROR$GENERIC))},[x]),J=u.default.useRef(()=>{}),Y=u.default.useCallback(()=>{J.current()},[]),X=u.default.useRef(()=>({})),be=u.default.useCallback(()=>X.current(),[]),Z=()=>{if(k.some(e=>!e.filteredSchema))return;let e;try{let t={};for(let e of k){let n=e.filteredSchema,r=c.buildSdkSettingsPayloadForView(n,L[e.settingsSource]??{},z[e.settingsSource]??{},F);if(Object.keys(r).length>0){let n=m[e.settingsSource];t[n]={...t[n]??{},...r}}}e=g?g(t,{values:G,dirty:K,view:F}):t}catch(e){a.displayErrorToast(e instanceof Error?e.message:x(n.I18nKey.ERROR$GENERIC));return}Object.keys(e).length!==0&&he(e,{onError:ye,onSuccess:()=>{me||a.displaySuccessToast(x(n.I18nKey.SETTINGS$SAVED_WARNING)),B({}),le?.()}})};J.current=Z,X.current=()=>{let e={};for(let t of k){if(!t.filteredSchema)continue;let n=L[t.settingsSource]??{},r=z[t.settingsSource]??{};Object.assign(e,c.buildSdkSettingsPayload(t.filteredSchema,n,r))}return e};let Q=Object.keys(K).length>0,$=Q||h;return u.default.useEffect(()=>{y&&y({save:Y,isSaving:S,isDirty:$,values:G,view:F,getDirtyPayload:be})},[S,$,G,F]),(ge||_e)&&!C||ve?(0,d.jsx)(s.LlmSettingsInputsSkeleton,{}):k.some(e=>e.filteredSchema&&e.filteredSchema.sections.length>0)?Object.keys(G).length===0?(0,d.jsx)(s.LlmSettingsInputsSkeleton,{}):(0,d.jsxs)(`div`,{"data-testid":b,className:fe?`relative flex min-h-0 w-full flex-1 flex-col`:`relative w-full min-h-0`,children:[(0,d.jsx)(ie.ViewToggle,{view:F,setView:I,showBasic:A,showAdvanced:j,showAll:M,isDisabled:!1}),(0,d.jsxs)(`div`,{className:`flex flex-col gap-8`,children:[f?.({values:G,isDisabled:!1,view:F,onChange:q}),k.map(e=>{if(!e.filteredSchema)return null;let t=L[e.settingsSource]??{};return c.getVisibleSettingsSections(e.filteredSchema,{...G,...t},F,e.excludeKeys??ae).map(n=>(0,d.jsx)(`section`,{className:`flex flex-col gap-4`,children:(0,d.jsx)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:n.fields.map(e=>(0,d.jsx)(`div`,{className:l.FIELD_FULL_WIDTH_KEYS.has(e.key)?`xl:col-span-2`:void 0,children:(0,d.jsx)(l.SchemaField,{field:e,value:t[e.key],isDisabled:!1,onChange:t=>q(e.key,t)})},e.key))})},`${e.settingsSource}:${n.key}`))}),pe?null:(0,d.jsx)(`div`,{className:`flex justify-start pt-2`,children:(0,d.jsx)(te.BrandButton,{testId:`save-button`,type:`button`,variant:`primary`,isDisabled:S||!Q&&!h,onClick:Z,children:x(S?n.I18nKey.SETTINGS$SAVING:n.I18nKey.SETTINGS$SAVE_CHANGES)})})]})]}):(0,d.jsx)(`div`,{"data-testid":`sdk-schema-unavailable`,className:re.extensionModuleEmptyStateClassName,children:(0,d.jsx)(`p`,{className:`text-sm text-[var(--oh-muted)]`,children:N})})}exports.SdkSectionPage=h;
+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/axios/index.cjs"),i=require("../../../../utils/retrieve-axios-error-message.cjs"),a=require("../../../../utils/custom-toast-handlers.cjs"),ee=require("../../../../hooks/query/use-settings.cjs"),te=require("../../../../hooks/mutation/use-save-settings.cjs"),ne=require("../brand-button.cjs"),re=require("../../../../utils/extension-module-card-classes.cjs"),o=require("../../../../hooks/query/use-agent-settings-schema.cjs"),s=require("../llm-settings/llm-settings-inputs-skeleton.cjs"),c=require("../../../../utils/sdk-settings-schema.cjs"),l=require("./schema-field.cjs"),ie=require("./view-toggle.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var ae=new Set,f={basic:0,advanced:1,all:2},oe=(e,t)=>f[t]<f[e]?t:e,se=(e,t)=>f[t]>f[e]?t:e,p=(e,{showBasic:t,showAdvanced:n,showAll:r})=>{if(e===`all`)return r?`all`:n?`advanced`:`basic`;if(e===`advanced`)return n?`advanced`:r?`all`:`basic`;if(!t){if(n)return`advanced`;if(r)return`all`}return`basic`},m={agent_settings:`agent_settings_diff`,conversation_settings:`conversation_settings_diff`},ce=(e,t)=>e instanceof r.AxiosError?e.response?.status===401?`${t} This agent server requires X-Session-API-Key. Set VITE_SESSION_API_KEY in the frontend to the same value used by the backend SESSION_API_KEY or OH_SESSION_API_KEYS_0.`:e.response?.status===404?`${t} This backend does not expose /api/settings/* schema endpoints. Upgrade to a recent openhands-agent-server release.`:t:t;function h({settingsSources:e,scope:r=`personal`,header:f,extraDirty:h=!1,buildPayload:g,onSaveSuccess:le,getInitialView:_,forceShowAdvancedView:ue=!1,allowAllView:de=!0,initialValueOverrides:v,embedded:fe=!1,hideSaveButton:pe=!1,suppressSuccessToast:me=!1,onSaveControlChange:y,testId:b=`sdk-section-settings-screen`}){let{t:x}=t.useTranslation(`openhands`),{mutate:he,isPending:S}=te.useSaveSettings(r),{data:C,isLoading:ge,isFetching:_e}=ee.useSettings(r),w=o.useAgentSettingsSchema(C?.agent_settings_schema),T=o.useConversationSettingsSchema(C?.conversation_settings_schema),E=u.default.useMemo(()=>JSON.stringify(e.map(e=>({source:e.settingsSource,sectionKeys:e.sectionKeys,excludeKeys:e.excludeKeys?Array.from(e.excludeKeys).sort():null}))),[e]),D=u.default.useMemo(()=>JSON.parse(E).map(e=>({settingsSource:e.source,sectionKeys:e.sectionKeys,excludeKeys:e.excludeKeys?new Set(e.excludeKeys):void 0})),[E]),O=u.default.useCallback(e=>e===`conversation_settings`?T.data:w.data,[w.data,T.data]),ve=D.some(e=>e.settingsSource===`conversation_settings`?T.isLoading:w.isLoading),k=u.default.useMemo(()=>D.map(e=>{let t=O(e.settingsSource);if(!c.isValidSettingsSchema(t))return{...e,filteredSchema:null};let n=new Set(e.sectionKeys),r=new Set,i={...t,sections:t.sections.filter(e=>!n.has(e.key)||r.has(e.key)?!1:(r.add(e.key),!0))};return{...e,filteredSchema:i}}),[D,O]),A=k.some(e=>c.hasCriticalSettings(e.filteredSchema)),j=ue||k.some(e=>c.hasAdvancedSettings(e.filteredSchema)),M=de&&k.some(e=>c.hasMinorSettings(e.filteredSchema)),N=u.default.useMemo(()=>ce(D.reduce((e,t)=>e??(t.settingsSource===`conversation_settings`?T.error:w.error),null),x(n.I18nKey.SETTINGS$SDK_SCHEMA_UNAVAILABLE)),[D,w.error,T.error,x]),P=u.default.useMemo(()=>v?JSON.stringify(v):``,[v]),[F,I]=u.default.useState(`basic`),[L,R]=u.default.useState({}),[z,B]=u.default.useState({}),V=u.default.useRef(!1),H=u.default.useMemo(()=>{if(!C)return null;let e={};for(let t of k){if(!t.filteredSchema)return null;e[t.settingsSource]={...e[t.settingsSource]??{},...c.buildInitialSettingsFormValues(C,t.filteredSchema,t.settingsSource)}}if(v){let t=k[0]?.settingsSource;t&&e[t]&&(e[t]={...e[t],...v})}return e},[C,k,P]),U=u.default.useMemo(()=>{if(!C)return null;let e=null;for(let t of k){if(!t.filteredSchema)return null;let n=_?_(C,t.filteredSchema):c.inferInitialView(C,t.filteredSchema,t.settingsSource);e=e?se(e,n):n}return e?p(e,{showBasic:A,showAdvanced:j,showAll:M}):null},[C,k,_,A,j,M]);u.default.useEffect(()=>{V.current=!1,I(`basic`),R({}),B({})},[r,E]),u.default.useEffect(()=>{if(!(!H||!U)){if(R(H),v){let e=k[0]?.settingsSource;if(e){let t=Object.fromEntries(Object.keys(v).map(e=>[e,!0]));B({[e]:t})}else B({})}else B({});V.current?I(e=>oe(e,U)):(V.current=!0,I(U))}},[H,U]);let W=u.default.useMemo(()=>{let e=new Map;for(let t of k)if(t.filteredSchema)for(let n of t.filteredSchema.sections)for(let r of n.fields)e.has(r.key)||e.set(r.key,t.settingsSource);return e},[k]),G=u.default.useMemo(()=>{let e={};for(let t of k)Object.assign(e,L[t.settingsSource]??{});return e},[k,L]),K=u.default.useMemo(()=>{let e={};for(let t of k)Object.assign(e,z[t.settingsSource]??{});return e},[k,z]),q=u.default.useCallback((e,t)=>{let n=W.get(e);n&&(R(r=>({...r,[n]:{...r[n]??{},[e]:t}})),B(t=>({...t,[n]:{...t[n]??{},[e]:!0}})))},[W]),ye=u.default.useCallback(e=>{a.displayErrorToast(i.retrieveAxiosErrorMessage(e)||x(n.I18nKey.ERROR$GENERIC))},[x]),J=u.default.useRef(()=>{}),Y=u.default.useCallback(()=>{J.current()},[]),X=u.default.useRef(()=>({})),be=u.default.useCallback(()=>X.current(),[]),Z=()=>{if(k.some(e=>!e.filteredSchema))return;let e;try{let t={};for(let e of k){let n=e.filteredSchema,r=c.buildSdkSettingsPayloadForView(n,L[e.settingsSource]??{},z[e.settingsSource]??{},F);if(Object.keys(r).length>0){let n=m[e.settingsSource];t[n]={...t[n]??{},...r}}}e=g?g(t,{values:G,dirty:K,view:F}):t}catch(e){a.displayErrorToast(e instanceof Error?e.message:x(n.I18nKey.ERROR$GENERIC));return}Object.keys(e).length!==0&&he(e,{onError:ye,onSuccess:()=>{me||a.displaySuccessToast(x(n.I18nKey.SETTINGS$SAVED_WARNING)),B({}),le?.()}})};J.current=Z,X.current=()=>{let e={};for(let t of k){if(!t.filteredSchema)continue;let n=L[t.settingsSource]??{},r=z[t.settingsSource]??{};Object.assign(e,c.buildSdkSettingsPayload(t.filteredSchema,n,r))}return e};let Q=Object.keys(K).length>0,$=Q||h;return u.default.useEffect(()=>{y&&y({save:Y,isSaving:S,isDirty:$,values:G,view:F,getDirtyPayload:be})},[S,$,G,F]),(ge||_e)&&!C||ve?(0,d.jsx)(s.LlmSettingsInputsSkeleton,{}):k.some(e=>e.filteredSchema&&e.filteredSchema.sections.length>0)?Object.keys(G).length===0?(0,d.jsx)(s.LlmSettingsInputsSkeleton,{}):(0,d.jsxs)(`div`,{"data-testid":b,className:fe?`relative flex min-h-0 w-full flex-1 flex-col`:`relative w-full min-h-0`,children:[(0,d.jsx)(ie.ViewToggle,{view:F,setView:I,showBasic:A,showAdvanced:j,showAll:M,isDisabled:!1}),(0,d.jsxs)(`div`,{className:`flex flex-col gap-8`,children:[f?.({values:G,isDisabled:!1,view:F,onChange:q}),k.map(e=>{if(!e.filteredSchema)return null;let t=L[e.settingsSource]??{};return c.getVisibleSettingsSections(e.filteredSchema,{...G,...t},F,e.excludeKeys??ae).map(n=>(0,d.jsx)(`section`,{className:`flex flex-col gap-4`,children:(0,d.jsx)(`div`,{className:`grid gap-4 xl:grid-cols-2`,children:n.fields.map(e=>(0,d.jsx)(`div`,{className:l.FIELD_FULL_WIDTH_KEYS.has(e.key)?`xl:col-span-2`:void 0,children:(0,d.jsx)(l.SchemaField,{field:e,value:t[e.key],isDisabled:!1,onChange:t=>q(e.key,t)})},e.key))})},`${e.settingsSource}:${n.key}`))}),pe?null:(0,d.jsx)(`div`,{className:`flex justify-start pt-2`,children:(0,d.jsx)(ne.BrandButton,{testId:`save-button`,type:`button`,variant:`primary`,isDisabled:S||!Q&&!h,onClick:Z,children:x(S?n.I18nKey.SETTINGS$SAVING:n.I18nKey.SETTINGS$SAVE_CHANGES)})})]})]}):(0,d.jsx)(`div`,{"data-testid":`sdk-schema-unavailable`,className:re.extensionModuleEmptyStateClassName,children:(0,d.jsx)(`p`,{className:`text-sm text-[var(--oh-muted)]`,children:N})})}exports.SdkSectionPage=h;
 //# sourceMappingURL=sdk-section-page.cjs.map

package/dist/components/features/settings/sdk-settings/sdk-section-page.js CHANGED Viewed

@@ -4,11 +4,11 @@ import { AxiosError as n } from "../../../../node_modules/axios/index.js";
 import { retrieveAxiosErrorMessage as r } from "../../../../utils/retrieve-axios-error-message.js";
 import { displayErrorToast as i, displaySuccessToast as ee } from "../../../../utils/custom-toast-handlers.js";
 import { useSettings as te } from "../../../../hooks/query/use-settings.js";
-import { BrandButton as ne } from "../brand-button.js";
-import { useSaveSettings as re } from "../../../../hooks/mutation/use-save-settings.js";
-import { useAgentSettingsSchema as a, useConversationSettingsSchema as o } from "../../../../hooks/query/use-agent-settings-schema.js";
-import { LlmSettingsInputsSkeleton as s } from "../llm-settings/llm-settings-inputs-skeleton.js";
-import { extensionModuleEmptyStateClassName as c } from "../../../../utils/extension-module-card-classes.js";
+import { useSaveSettings as ne } from "../../../../hooks/mutation/use-save-settings.js";
+import { BrandButton as re } from "../brand-button.js";
+import { extensionModuleEmptyStateClassName as a } from "../../../../utils/extension-module-card-classes.js";
+import { useAgentSettingsSchema as o, useConversationSettingsSchema as s } from "../../../../hooks/query/use-agent-settings-schema.js";
+import { LlmSettingsInputsSkeleton as c } from "../llm-settings/llm-settings-inputs-skeleton.js";
 import { buildInitialSettingsFormValues as ie, buildSdkSettingsPayload as ae, buildSdkSettingsPayloadForView as oe, getVisibleSettingsSections as se, hasAdvancedSettings as ce, hasCriticalSettings as le, hasMinorSettings as ue, inferInitialView as de, isValidSettingsSchema as fe } from "../../../../utils/sdk-settings-schema.js";
 import { FIELD_FULL_WIDTH_KEYS as pe, SchemaField as me } from "./schema-field.js";
 import { ViewToggle as he } from "./view-toggle.js";
@@ -32,7 +32,7 @@ var ge = /* @__PURE__ */ new Set(), f = {
 	conversation_settings: "conversation_settings_diff"
 }, be = (e, t) => e instanceof n ? e.response?.status === 401 ? `${t} This agent server requires X-Session-API-Key. Set VITE_SESSION_API_KEY in the frontend to the same value used by the backend SESSION_API_KEY or OH_SESSION_API_KEYS_0.` : e.response?.status === 404 ? `${t} This backend does not expose /api/settings/* schema endpoints. Upgrade to a recent openhands-agent-server release.` : t : t;
 function m({ settingsSources: n, scope: f = "personal", header: m, extraDirty: h = !1, buildPayload: g, onSaveSuccess: xe, getInitialView: _, forceShowAdvancedView: Se = !1, allowAllView: Ce = !0, initialValueOverrides: v, embedded: we = !1, hideSaveButton: Te = !1, suppressSuccessToast: Ee = !1, onSaveControlChange: y, testId: De = "sdk-section-settings-screen" }) {
-	let { t: b } = e("openhands"), { mutate: x, isPending: S } = re(f), { data: C, isLoading: w, isFetching: T } = te(f), E = a(C?.agent_settings_schema), D = o(C?.conversation_settings_schema), O = l.useMemo(() => JSON.stringify(n.map((e) => ({
+	let { t: b } = e("openhands"), { mutate: x, isPending: S } = ne(f), { data: C, isLoading: w, isFetching: T } = te(f), E = o(C?.agent_settings_schema), D = s(C?.conversation_settings_schema), O = l.useMemo(() => JSON.stringify(n.map((e) => ({
 		source: e.settingsSource,
 		sectionKeys: e.sectionKeys,
 		excludeKeys: e.excludeKeys ? Array.from(e.excludeKeys).sort() : null
@@ -202,7 +202,7 @@ function m({ settingsSources: n, scope: f = "personal", header: m, extraDirty: h
 		$,
 		K,
 		I
-	]), (w || T) && !C || j ? /* @__PURE__ */ u(s, {}) : M.some((e) => e.filteredSchema && e.filteredSchema.sections.length > 0) ? Object.keys(K).length === 0 ? /* @__PURE__ */ u(s, {}) : /* @__PURE__ */ d("div", {
+	]), (w || T) && !C || j ? /* @__PURE__ */ u(c, {}) : M.some((e) => e.filteredSchema && e.filteredSchema.sections.length > 0) ? Object.keys(K).length === 0 ? /* @__PURE__ */ u(c, {}) : /* @__PURE__ */ d("div", {
 		"data-testid": De,
 		className: we ? "relative flex min-h-0 w-full flex-1 flex-col" : "relative w-full min-h-0",
 		children: [/* @__PURE__ */ u(he, {
@@ -245,7 +245,7 @@ function m({ settingsSources: n, scope: f = "personal", header: m, extraDirty: h
 				}),
 				Te ? null : /* @__PURE__ */ u("div", {
 					className: "flex justify-start pt-2",
-					children: /* @__PURE__ */ u(ne, {
+					children: /* @__PURE__ */ u(re, {
 						testId: "save-button",
 						type: "button",
 						variant: "primary",
@@ -258,7 +258,7 @@ function m({ settingsSources: n, scope: f = "personal", header: m, extraDirty: h
 		})]
 	}) : /* @__PURE__ */ u("div", {
 		"data-testid": "sdk-schema-unavailable",
-		className: c,
+		className: a,
 		children: /* @__PURE__ */ u("p", {
 			className: "text-sm text-[var(--oh-muted)]",
 			children: Oe

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

@@ -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("../optional-tag.cjs"),c=require("../settings-input.cjs"),l=require("../../../../hooks/query/use-get-secrets.cjs"),u=require("../../../../hooks/mutation/use-create-secret.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}=l.useSearchSecrets(),{mutate:y}=u.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)(c.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)(s.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=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;
 //# sourceMappingURL=secret-form.cjs.map

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

@@ -4,16 +4,16 @@ import { cn as n } from "../../../../utils/utils.js";
 import { useQueryClient as r } from "../../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js";
 import { formControlMultilineFieldClassName as i, formControlSettingsFieldClassName as a } from "../../../../utils/form-control-classes.js";
 import { BrandButton as o } from "../brand-button.js";
-import { OptionalTag as s } from "../optional-tag.js";
-import { SettingsInput as c } from "../settings-input.js";
-import { useSearchSecrets as l } from "../../../../hooks/query/use-get-secrets.js";
-import { useCreateSecret as u } from "../../../../hooks/mutation/use-create-secret.js";
+import { useCreateSecret as s } from "../../../../hooks/mutation/use-create-secret.js";
+import { OptionalTag as c } from "../optional-tag.js";
+import { SettingsInput as l } from "../settings-input.js";
+import { useSearchSecrets as u } from "../../../../hooks/query/use-get-secrets.js";
 import { useUpdateSecret as d } from "../../../../hooks/mutation/use-update-secret.js";
 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 } = l(), { mutate: x } = u(), { 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 = h === "edit" && g && b?.find((e) => e.name === g)?.description?.trim() || "", E = () => {
 		v.invalidateQueries({ queryKey: ["secrets-search"] }), v.invalidateQueries({ queryKey: ["secrets"] });
 	}, D = (e, t, n) => {
 		x({
@@ -56,7 +56,7 @@ function h({ mode: h, selectedSecret: g, onCancel: _ }) {
 		},
 		className: "flex flex-col items-start gap-6",
 		children: [
-			/* @__PURE__ */ p(c, {
+			/* @__PURE__ */ p(l, {
 				testId: "name-input",
 				name: "secret-name",
 				type: "text",
@@ -92,7 +92,7 @@ function h({ mode: h, selectedSecret: g, onCancel: _ }) {
 					children: [/* @__PURE__ */ p("span", {
 						className: "text-sm",
 						children: y(t.FORM$DESCRIPTION)
-					}), /* @__PURE__ */ p(s, {})]
+					}), /* @__PURE__ */ p(c, {})]
 				}), /* @__PURE__ */ p("input", {
 					"data-testid": "description-input",
 					name: "secret-description",

package/dist/components/features/settings/settings-input.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs"),t=require("../../../utils/form-control-classes.cjs"),n=require("./optional-tag.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(function({testId:r,name:a,label:o,type:s,defaultValue:c,value:l,placeholder:u,showOptionalTag:d,isDisabled:f,startContent:p,className:m,onChange:h,onKeyDown:g,required:_,min:v,max:y,step:b,pattern:x,title:S,labelClassName:C,ariaDescribedBy:w,ariaInvalid:T,error:E,showRequiredTag:D,hint:O,onBlur:k,inputClassName:A},j){let M=E&&r?`${r}-error`:void 0;return(0,i.jsxs)(`label`,{className:e.cn(`flex flex-col gap-2.5 w-full min-w-0`,m),children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[p,(0,i.jsx)(`span`,{className:e.cn(`text-sm`,C),children:o}),D&&(0,i.jsx)(`span`,{className:`text-red-400 text-sm leading-none`,"aria-hidden":!0,children:`*`}),d&&(0,i.jsx)(n.OptionalTag,{}),O&&(0,i.jsx)(`span`,{"data-testid":r?`${r}-hint`:void 0,className:`min-w-0 text-xs text-[var(--oh-muted)]`,children:O})]}),(0,i.jsx)(`input`,{ref:j,"data-testid":r,onChange:e=>h?.(e.target.value),onKeyDown:g,onBlur:k,name:a,disabled:f,type:s,defaultValue:c,value:l,placeholder:u,min:v,max:y,step:b,required:_,pattern:x,title:S,"aria-describedby":M??w,"aria-invalid":!!E||T,className:e.cn(t.formControlSettingsFieldClassName,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]`,E&&`border-red-500`,A)}),E&&(0,i.jsx)(`p`,{id:M,role:`alert`,"data-testid":r?`${r}-error`:void 0,className:`text-xs text-red-400 -mt-1`,children:E})]})});exports.SettingsInput=a;
+require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../utils/utils.cjs"),t=require("../../../utils/form-control-classes.cjs"),n=require("./optional-tag.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(function({testId:r,name:a,label:o,type:s,defaultValue:c,value:l,placeholder:u,showOptionalTag:d,isDisabled:f,startContent:p,className:m,onChange:h,onKeyDown:g,required:_,min:v,max:y,step:b,pattern:x,title:S,labelClassName:C,ariaLabel:w,ariaDescribedBy:T,ariaInvalid:E,error:D,showRequiredTag:O,hint:k,onBlur:A,inputClassName:j},M){let N=D&&r?`${r}-error`:void 0;return(0,i.jsxs)(`label`,{className:e.cn(`flex flex-col gap-2.5 w-full min-w-0`,m),children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[p,(0,i.jsx)(`span`,{className:e.cn(`text-sm`,C),children:o}),O&&(0,i.jsx)(`span`,{className:`text-red-400 text-sm leading-none`,"aria-hidden":!0,children:`*`}),d&&(0,i.jsx)(n.OptionalTag,{}),k&&(0,i.jsx)(`span`,{"data-testid":r?`${r}-hint`:void 0,className:`min-w-0 text-xs text-[var(--oh-muted)]`,children:k})]}),(0,i.jsx)(`input`,{ref:M,"data-testid":r,onChange:e=>h?.(e.target.value),onKeyDown:g,onBlur:A,name:a,disabled:f,type:s,defaultValue:c,value:l,placeholder:u,min:v,max:y,step:b,required:_,pattern:x,title:S,"aria-label":w,"aria-describedby":N??T,"aria-invalid":!!D||E,className:e.cn(t.formControlSettingsFieldClassName,`disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]`,D&&`border-red-500`,j)}),D&&(0,i.jsx)(`p`,{id:N,role:`alert`,"data-testid":r?`${r}-error`:void 0,className:`text-xs text-red-400 -mt-1`,children:D})]})});exports.SettingsInput=a;
 //# sourceMappingURL=settings-input.cjs.map

package/dist/components/features/settings/settings-input.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"settings-input.cjs","names":[],"sources":["../../../../src/components/features/settings/settings-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { OptionalTag } from \"./optional-tag\";\n\ninterface SettingsInputProps {\n testId?: string;\n name?: string;\n label: string;\n type: React.HTMLInputTypeAttribute;\n defaultValue?: string;\n value?: string;\n placeholder?: string;\n showOptionalTag?: boolean;\n isDisabled?: boolean;\n startContent?: React.ReactNode;\n className?: string;\n onChange?: (value: string) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n required?: boolean;\n min?: number;\n max?: number;\n step?: number;\n pattern?: string;\n /** Validation message shown when pattern doesn't match /\n title?: string;\n labelClassName?: string;\n /* ARIA describedby attribute for accessibility /\n ariaDescribedBy?: string;\n /* ARIA invalid attribute for accessibility /\n ariaInvalid?: boolean;\n /\n Validation error message. When set, the input gets a red border and\n * the message is rendered below it. Also sets aria-invalid automatically.\n /\n error?: string;\n /* Renders a red asterisk next to the label to mark the field as required. /\n showRequiredTag?: boolean;\n /\n Short guidance rendered next to the label, above the input. It sits inside\n * the `<label>`, so it is announced as part of the field's accessible name —\n * keep it to a phrase that reads well after the label text.\n /\n hint?: string;\n onBlur?: () => void;\n /* Extra classes merged onto the `<input>` element. /\n inputClassName?: string;\n}\n\nexport const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(\n function SettingsInput(\n {\n testId,\n name,\n label,\n type,\n defaultValue,\n value,\n placeholder,\n showOptionalTag,\n isDisabled,\n startContent,\n className,\n onChange,\n onKeyDown,\n required,\n min,\n max,\n step,\n pattern,\n title,\n labelClassName,\n ariaDescribedBy,\n ariaInvalid,\n error,\n showRequiredTag,\n hint,\n onBlur,\n inputClassName,\n },\n ref,\n ) {\n const errorId = error && testId ? `${testId}-error` : undefined;\n return (\n <label className={cn(\"flex flex-col gap-2.5 w-full min-w-0\", className)}>\n <div className=\"flex items-center gap-2\">\n {startContent}\n <span className={cn(\"text-sm\", labelClassName)}>{label}</span>\n {showRequiredTag && (\n <span className=\"text-red-400 text-sm leading-none\" aria-hidden>\n \n </span>\n )}\n {showOptionalTag && <OptionalTag />}\n {hint && (\n <span\n data-testid={testId ? `${testId}-hint` : undefined}\n className=\"min-w-0 text-xs text-[var(--oh-muted)]\"\n >\n {hint}\n </span>\n )}\n </div>\n <input\n ref={ref}\n data-testid={testId}\n onChange={(e) => onChange?.(e.target.value)}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n name={name}\n disabled={isDisabled}\n type={type}\n defaultValue={defaultValue}\n value={value}\n placeholder={placeholder}\n min={min}\n max={max}\n step={step}\n required={required}\n pattern={pattern}\n title={title}\n aria-describedby={errorId ?? ariaDescribedBy}\n aria-invalid={!!error \|\| ariaInvalid}\n className={cn(\n formControlSettingsFieldClassName,\n \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n error && \"border-red-500\",\n inputClassName,\n )}\n />\n {error && (\n <p\n id={errorId}\n role=\"alert\"\n data-testid={testId ? `${testId}-error` : undefined}\n className=\"text-xs text-red-400 -mt-1\"\n >\n {error}\n </p>\n )}\n </label>\n );\n },\n);\n"],"mappings":"~~0OAiDA~~,IAAa,GAAA,EAAA,EAAA,YACX,SACE,CACE,SACA,OACA,QACA,OACA,eACA,QACA,cACA,kBACA,aACA,eACA,YACA,WACA,YACA,WACA,MACA,MACA,OACA,UACA,QACA,iBACA,kBACA,cACA,QACA,kBACA,OACA,SACA,kBAEF,EACA,CACA,IAAM,EAAU,GAAS,EAAS,GAAG,EAAO,QAAU,IAAA,GACtD,OACE,EAAA,EAAA,MAAC,QAAD,CAAO,UAAW,EAAA,GAAG,uCAAwC,CAAS,WAAtE,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,mCAAf,CACG,GACD,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,GAAG,UAAW,CAAc,WAAI,CAAY,CAAA,EAC5D,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oCAAoC,cAAA,YAAY,GAE1D,CAAA,EAEP,IAAmB,EAAA,EAAA,KAAC,EAAA,YAAD,CAAc,CAAA,EACjC,IACC,EAAA,EAAA,KAAC,OAAD,CACE,cAAa,EAAS,GAAG,EAAO,OAAS,IAAA,GACzC,UAAU,kDAET,CACG,CAAA,CAEL,KACL,EAAA,EAAA,KAAC,QAAD,CACO,MACL,cAAa,EACb,SAAW,GAAM,IAAW,EAAE,OAAO,KAAK,EAC/B,YACH,SACF,OACN,SAAU,EACJ,OACQ,eACP,QACM,cACR,MACA,MACC,OACI,WACD,UACF,QACP,mBAAkB,GAAW,EAC7B,eAAc,CAAC,CAAC,GAAS,EACzB,UAAW,EAAA,GACT,EAAA,kCACA,mFACA,GAAS,iBACT,CACF,CACD,CAAA,EACA,IACC,EAAA,EAAA,KAAC,IAAD,CACE,GAAI,EACJ,KAAK,QACL,cAAa,EAAS,GAAG,EAAO,QAAU,IAAA,GAC1C,UAAU,sCAET,CACA,CAAA,CAEA,GAEX,CACF"}
1	+ {"version":3,"file":"settings-input.cjs","names":[],"sources":["../../../../src/components/features/settings/settings-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { OptionalTag } from \"./optional-tag\";\n\ninterface SettingsInputProps {\n testId?: string;\n name?: string;\n label: string;\n type: React.HTMLInputTypeAttribute;\n defaultValue?: string;\n value?: string;\n placeholder?: string;\n showOptionalTag?: boolean;\n isDisabled?: boolean;\n startContent?: React.ReactNode;\n className?: string;\n onChange?: (value: string) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n required?: boolean;\n min?: number;\n max?: number;\n step?: number;\n pattern?: string;\n /** Validation message shown when pattern doesn't match /\n title?: string;\n labelClassName?: string;\n /\n The input's accessible name, for the caller that renders the visible label\n * itself. Only for those: a field labelled by this component reads its label,\n * and two names would disagree.\n /\n ariaLabel?: string;\n /* ARIA describedby attribute for accessibility /\n ariaDescribedBy?: string;\n /* ARIA invalid attribute for accessibility /\n ariaInvalid?: boolean;\n /\n Validation error message. When set, the input gets a red border and\n * the message is rendered below it. Also sets aria-invalid automatically.\n /\n error?: string;\n /* Renders a red asterisk next to the label to mark the field as required. /\n showRequiredTag?: boolean;\n /\n Short guidance rendered next to the label, above the input. It sits inside\n * the `<label>`, so it is announced as part of the field's accessible name —\n * keep it to a phrase that reads well after the label text.\n /\n hint?: string;\n onBlur?: () => void;\n /* Extra classes merged onto the `<input>` element. /\n inputClassName?: string;\n}\n\nexport const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(\n function SettingsInput(\n {\n testId,\n name,\n label,\n type,\n defaultValue,\n value,\n placeholder,\n showOptionalTag,\n isDisabled,\n startContent,\n className,\n onChange,\n onKeyDown,\n required,\n min,\n max,\n step,\n pattern,\n title,\n labelClassName,\n ariaLabel,\n ariaDescribedBy,\n ariaInvalid,\n error,\n showRequiredTag,\n hint,\n onBlur,\n inputClassName,\n },\n ref,\n ) {\n const errorId = error && testId ? `${testId}-error` : undefined;\n return (\n <label className={cn(\"flex flex-col gap-2.5 w-full min-w-0\", className)}>\n <div className=\"flex items-center gap-2\">\n {startContent}\n <span className={cn(\"text-sm\", labelClassName)}>{label}</span>\n {showRequiredTag && (\n <span className=\"text-red-400 text-sm leading-none\" aria-hidden>\n \n </span>\n )}\n {showOptionalTag && <OptionalTag />}\n {hint && (\n <span\n data-testid={testId ? `${testId}-hint` : undefined}\n className=\"min-w-0 text-xs text-[var(--oh-muted)]\"\n >\n {hint}\n </span>\n )}\n </div>\n <input\n ref={ref}\n data-testid={testId}\n onChange={(e) => onChange?.(e.target.value)}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n name={name}\n disabled={isDisabled}\n type={type}\n defaultValue={defaultValue}\n value={value}\n placeholder={placeholder}\n min={min}\n max={max}\n step={step}\n required={required}\n pattern={pattern}\n title={title}\n aria-label={ariaLabel}\n aria-describedby={errorId ?? ariaDescribedBy}\n aria-invalid={!!error \|\| ariaInvalid}\n className={cn(\n formControlSettingsFieldClassName,\n \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n error && \"border-red-500\",\n inputClassName,\n )}\n />\n {error && (\n <p\n id={errorId}\n role=\"alert\"\n data-testid={testId ? `${testId}-error` : undefined}\n className=\"text-xs text-red-400 -mt-1\"\n >\n {error}\n </p>\n )}\n </label>\n );\n },\n);\n"],"mappings":"0OAuDA,IAAa,GAAA,EAAA,EAAA,YACX,SACE,CACE,SACA,OACA,QACA,OACA,eACA,QACA,cACA,kBACA,aACA,eACA,YACA,WACA,YACA,WACA,MACA,MACA,OACA,UACA,QACA,iBACA,YACA,kBACA,cACA,QACA,kBACA,OACA,SACA,kBAEF,EACA,CACA,IAAM,EAAU,GAAS,EAAS,GAAG,EAAO,QAAU,IAAA,GACtD,OACE,EAAA,EAAA,MAAC,QAAD,CAAO,UAAW,EAAA,GAAG,uCAAwC,CAAS,WAAtE,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,mCAAf,CACG,GACD,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,GAAG,UAAW,CAAc,WAAI,CAAY,CAAA,EAC5D,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oCAAoC,cAAA,YAAY,GAE1D,CAAA,EAEP,IAAmB,EAAA,EAAA,KAAC,EAAA,YAAD,CAAc,CAAA,EACjC,IACC,EAAA,EAAA,KAAC,OAAD,CACE,cAAa,EAAS,GAAG,EAAO,OAAS,IAAA,GACzC,UAAU,kDAET,CACG,CAAA,CAEL,KACL,EAAA,EAAA,KAAC,QAAD,CACO,MACL,cAAa,EACb,SAAW,GAAM,IAAW,EAAE,OAAO,KAAK,EAC/B,YACH,SACF,OACN,SAAU,EACJ,OACQ,eACP,QACM,cACR,MACA,MACC,OACI,WACD,UACF,QACP,aAAY,EACZ,mBAAkB,GAAW,EAC7B,eAAc,CAAC,CAAC,GAAS,EACzB,UAAW,EAAA,GACT,EAAA,kCACA,mFACA,GAAS,iBACT,CACF,CACD,CAAA,EACA,IACC,EAAA,EAAA,KAAC,IAAD,CACE,GAAI,EACJ,KAAK,QACL,cAAa,EAAS,GAAG,EAAO,QAAU,IAAA,GAC1C,UAAU,sCAET,CACA,CAAA,CAEA,GAEX,CACF"}

package/dist/components/features/settings/settings-input.d.ts CHANGED Viewed

@@ -20,6 +20,12 @@ interface SettingsInputProps {
     /** Validation message shown when pattern doesn't match */
     title?: string;
     labelClassName?: string;
+    /**
+     * The input's accessible name, for the caller that renders the visible label
+     * itself. Only for those: a field labelled by this component reads its label,
+     * and two names would disagree.
+     */
+    ariaLabel?: string;
     /** ARIA describedby attribute for accessibility */
     ariaDescribedBy?: string;
     /** ARIA invalid attribute for accessibility */

package/dist/components/features/settings/settings-input.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { OptionalTag as n } from "./optional-tag.js";
 import { forwardRef as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/features/settings/settings-input.tsx
-var o = r(function({ testId: r, name: o, label: s, type: c, defaultValue: l, value: u, placeholder: d, showOptionalTag: f, isDisabled: p, startContent: m, className: h, onChange: g, onKeyDown: _, required: v, min: y, max: b, step: x, pattern: S, title: C, labelClassName: w, ariaDescribedBy: T, ariaInvalid: E, error: D, showRequiredTag: O, hint: k, onBlur: A, inputClassName: j }, M) {
-	let N = D && r ? `${r}-error` : void 0;
+var o = r(function({ testId: r, name: o, label: s, type: c, defaultValue: l, value: u, placeholder: d, showOptionalTag: f, isDisabled: p, startContent: m, className: h, onChange: g, onKeyDown: _, required: v, min: y, max: b, step: x, pattern: S, title: C, labelClassName: w, ariaLabel: T, ariaDescribedBy: E, ariaInvalid: D, error: O, showRequiredTag: k, hint: A, onBlur: j, inputClassName: M }, N) {
+	let P = O && r ? `${r}-error` : void 0;
 	return /* @__PURE__ */ a("label", {
 		className: e("flex flex-col gap-2.5 w-full min-w-0", h),
 		children: [
@@ -17,25 +17,25 @@ var o = r(function({ testId: r, name: o, label: s, type: c, defaultValue: l, val
 						className: e("text-sm", w),
 						children: s
 					}),
-					O && /* @__PURE__ */ i("span", {
+					k && /* @__PURE__ */ i("span", {
 						className: "text-red-400 text-sm leading-none",
 						"aria-hidden": !0,
 						children: "*"
 					}),
 					f && /* @__PURE__ */ i(n, {}),
-					k && /* @__PURE__ */ i("span", {
+					A && /* @__PURE__ */ i("span", {
 						"data-testid": r ? `${r}-hint` : void 0,
 						className: "min-w-0 text-xs text-[var(--oh-muted)]",
-						children: k
+						children: A
 					})
 				]
 			}),
 			/* @__PURE__ */ i("input", {
-				ref: M,
+				ref: N,
 				"data-testid": r,
 				onChange: (e) => g?.(e.target.value),
 				onKeyDown: _,
-				onBlur: A,
+				onBlur: j,
 				name: o,
 				disabled: p,
 				type: c,
@@ -48,16 +48,17 @@ var o = r(function({ testId: r, name: o, label: s, type: c, defaultValue: l, val
 				required: v,
 				pattern: S,
 				title: C,
-				"aria-describedby": N ?? T,
-				"aria-invalid": !!D || E,
-				className: e(t, "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]", D && "border-red-500", j)
+				"aria-label": T,
+				"aria-describedby": P ?? E,
+				"aria-invalid": !!O || D,
+				className: e(t, "disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]", O && "border-red-500", M)
 			}),
-			D && /* @__PURE__ */ i("p", {
-				id: N,
+			O && /* @__PURE__ */ i("p", {
+				id: P,
 				role: "alert",
 				"data-testid": r ? `${r}-error` : void 0,
 				className: "text-xs text-red-400 -mt-1",
-				children: D
+				children: O
 			})
 		]
 	});

package/dist/components/features/settings/settings-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"settings-input.js","names":[],"sources":["../../../../src/components/features/settings/settings-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { OptionalTag } from \"./optional-tag\";\n\ninterface SettingsInputProps {\n testId?: string;\n name?: string;\n label: string;\n type: React.HTMLInputTypeAttribute;\n defaultValue?: string;\n value?: string;\n placeholder?: string;\n showOptionalTag?: boolean;\n isDisabled?: boolean;\n startContent?: React.ReactNode;\n className?: string;\n onChange?: (value: string) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n required?: boolean;\n min?: number;\n max?: number;\n step?: number;\n pattern?: string;\n /** Validation message shown when pattern doesn't match /\n title?: string;\n labelClassName?: string;\n /* ARIA describedby attribute for accessibility /\n ariaDescribedBy?: string;\n /* ARIA invalid attribute for accessibility /\n ariaInvalid?: boolean;\n /\n Validation error message. When set, the input gets a red border and\n * the message is rendered below it. Also sets aria-invalid automatically.\n /\n error?: string;\n /* Renders a red asterisk next to the label to mark the field as required. /\n showRequiredTag?: boolean;\n /\n Short guidance rendered next to the label, above the input. It sits inside\n * the `<label>`, so it is announced as part of the field's accessible name —\n * keep it to a phrase that reads well after the label text.\n /\n hint?: string;\n onBlur?: () => void;\n /* Extra classes merged onto the `<input>` element. /\n inputClassName?: string;\n}\n\nexport const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(\n function SettingsInput(\n {\n testId,\n name,\n label,\n type,\n defaultValue,\n value,\n placeholder,\n showOptionalTag,\n isDisabled,\n startContent,\n className,\n onChange,\n onKeyDown,\n required,\n min,\n max,\n step,\n pattern,\n title,\n labelClassName,\n ariaDescribedBy,\n ariaInvalid,\n error,\n showRequiredTag,\n hint,\n onBlur,\n inputClassName,\n },\n ref,\n ) {\n const errorId = error && testId ? `${testId}-error` : undefined;\n return (\n <label className={cn(\"flex flex-col gap-2.5 w-full min-w-0\", className)}>\n <div className=\"flex items-center gap-2\">\n {startContent}\n <span className={cn(\"text-sm\", labelClassName)}>{label}</span>\n {showRequiredTag && (\n <span className=\"text-red-400 text-sm leading-none\" aria-hidden>\n \n </span>\n )}\n {showOptionalTag && <OptionalTag />}\n {hint && (\n <span\n data-testid={testId ? `${testId}-hint` : undefined}\n className=\"min-w-0 text-xs text-[var(--oh-muted)]\"\n >\n {hint}\n </span>\n )}\n </div>\n <input\n ref={ref}\n data-testid={testId}\n onChange={(e) => onChange?.(e.target.value)}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n name={name}\n disabled={isDisabled}\n type={type}\n defaultValue={defaultValue}\n value={value}\n placeholder={placeholder}\n min={min}\n max={max}\n step={step}\n required={required}\n pattern={pattern}\n title={title}\n aria-describedby={errorId ?? ariaDescribedBy}\n aria-invalid={!!error \|\| ariaInvalid}\n className={cn(\n formControlSettingsFieldClassName,\n \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n error && \"border-red-500\",\n inputClassName,\n )}\n />\n {error && (\n <p\n id={errorId}\n role=\"alert\"\n data-testid={testId ? `${testId}-error` : undefined}\n className=\"text-xs text-red-400 -mt-1\"\n >\n {error}\n </p>\n )}\n </label>\n );\n },\n);\n"],"mappings":";;;;;;~~AAiDA~~,IAAa,IAAgB,EAC3B,SACE,EACE,WACA,SACA,UACA,SACA,iBACA,UACA,gBACA,oBACA,eACA,iBACA,cACA,aACA,cACA,aACA,QACA,QACA,SACA,YACA,UACA,mBACA,oBACA,gBACA,UACA,oBACA,SACA,WACA,qBAEF,GACA;CACA,IAAM,IAAU,KAAS,IAAS,GAAG,EAAO,UAAU,KAAA;CACtD,OACE,kBAAC,SAAD;EAAO,WAAW,EAAG,wCAAwC,CAAS;YAAtE;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG;KACD,kBAAC,QAAD;MAAM,WAAW,EAAG,WAAW,CAAc;gBAAI;KAAY,CAAA;KAC5D,KACC,kBAAC,QAAD;MAAM,WAAU;MAAoC,eAAA;gBAAY;KAE1D,CAAA;KAEP,KAAmB,kBAAC,GAAD,CAAc,CAAA;KACjC,KACC,kBAAC,QAAD;MACE,eAAa,IAAS,GAAG,EAAO,SAAS,KAAA;MACzC,WAAU;gBAET;KACG,CAAA;IAEL;;GACL,kBAAC,SAAD;IACO;IACL,eAAa;IACb,WAAW,MAAM,IAAW,EAAE,OAAO,KAAK;IAC/B;IACH;IACF;IACN,UAAU;IACJ;IACQ;IACP;IACM;IACR;IACA;IACC;IACI;IACD;IACF;IACP,oBAAkB,KAAW;IAC7B,gBAAc,CAAC,CAAC,KAAS;IACzB,WAAW,EACT,GACA,oFACA,KAAS,kBACT,CACF;GACD,CAAA;GACA,KACC,kBAAC,KAAD;IACE,IAAI;IACJ,MAAK;IACL,eAAa,IAAS,GAAG,EAAO,UAAU,KAAA;IAC1C,WAAU;cAET;GACA,CAAA;EAEA;;AAEX,CACF"}
1	+ {"version":3,"file":"settings-input.js","names":[],"sources":["../../../../src/components/features/settings/settings-input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"#/utils/utils\";\nimport { formControlSettingsFieldClassName } from \"#/utils/form-control-classes\";\nimport { OptionalTag } from \"./optional-tag\";\n\ninterface SettingsInputProps {\n testId?: string;\n name?: string;\n label: string;\n type: React.HTMLInputTypeAttribute;\n defaultValue?: string;\n value?: string;\n placeholder?: string;\n showOptionalTag?: boolean;\n isDisabled?: boolean;\n startContent?: React.ReactNode;\n className?: string;\n onChange?: (value: string) => void;\n onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n required?: boolean;\n min?: number;\n max?: number;\n step?: number;\n pattern?: string;\n /** Validation message shown when pattern doesn't match /\n title?: string;\n labelClassName?: string;\n /\n The input's accessible name, for the caller that renders the visible label\n * itself. Only for those: a field labelled by this component reads its label,\n * and two names would disagree.\n /\n ariaLabel?: string;\n /* ARIA describedby attribute for accessibility /\n ariaDescribedBy?: string;\n /* ARIA invalid attribute for accessibility /\n ariaInvalid?: boolean;\n /\n Validation error message. When set, the input gets a red border and\n * the message is rendered below it. Also sets aria-invalid automatically.\n /\n error?: string;\n /* Renders a red asterisk next to the label to mark the field as required. /\n showRequiredTag?: boolean;\n /\n Short guidance rendered next to the label, above the input. It sits inside\n * the `<label>`, so it is announced as part of the field's accessible name —\n * keep it to a phrase that reads well after the label text.\n /\n hint?: string;\n onBlur?: () => void;\n /* Extra classes merged onto the `<input>` element. /\n inputClassName?: string;\n}\n\nexport const SettingsInput = forwardRef<HTMLInputElement, SettingsInputProps>(\n function SettingsInput(\n {\n testId,\n name,\n label,\n type,\n defaultValue,\n value,\n placeholder,\n showOptionalTag,\n isDisabled,\n startContent,\n className,\n onChange,\n onKeyDown,\n required,\n min,\n max,\n step,\n pattern,\n title,\n labelClassName,\n ariaLabel,\n ariaDescribedBy,\n ariaInvalid,\n error,\n showRequiredTag,\n hint,\n onBlur,\n inputClassName,\n },\n ref,\n ) {\n const errorId = error && testId ? `${testId}-error` : undefined;\n return (\n <label className={cn(\"flex flex-col gap-2.5 w-full min-w-0\", className)}>\n <div className=\"flex items-center gap-2\">\n {startContent}\n <span className={cn(\"text-sm\", labelClassName)}>{label}</span>\n {showRequiredTag && (\n <span className=\"text-red-400 text-sm leading-none\" aria-hidden>\n \n </span>\n )}\n {showOptionalTag && <OptionalTag />}\n {hint && (\n <span\n data-testid={testId ? `${testId}-hint` : undefined}\n className=\"min-w-0 text-xs text-[var(--oh-muted)]\"\n >\n {hint}\n </span>\n )}\n </div>\n <input\n ref={ref}\n data-testid={testId}\n onChange={(e) => onChange?.(e.target.value)}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n name={name}\n disabled={isDisabled}\n type={type}\n defaultValue={defaultValue}\n value={value}\n placeholder={placeholder}\n min={min}\n max={max}\n step={step}\n required={required}\n pattern={pattern}\n title={title}\n aria-label={ariaLabel}\n aria-describedby={errorId ?? ariaDescribedBy}\n aria-invalid={!!error \|\| ariaInvalid}\n className={cn(\n formControlSettingsFieldClassName,\n \"disabled:bg-[var(--oh-surface-raised)] disabled:border-[var(--oh-border-subtle)]\",\n error && \"border-red-500\",\n inputClassName,\n )}\n />\n {error && (\n <p\n id={errorId}\n role=\"alert\"\n data-testid={testId ? `${testId}-error` : undefined}\n className=\"text-xs text-red-400 -mt-1\"\n >\n {error}\n </p>\n )}\n </label>\n );\n },\n);\n"],"mappings":";;;;;;AAuDA,IAAa,IAAgB,EAC3B,SACE,EACE,WACA,SACA,UACA,SACA,iBACA,UACA,gBACA,oBACA,eACA,iBACA,cACA,aACA,cACA,aACA,QACA,QACA,SACA,YACA,UACA,mBACA,cACA,oBACA,gBACA,UACA,oBACA,SACA,WACA,qBAEF,GACA;CACA,IAAM,IAAU,KAAS,IAAS,GAAG,EAAO,UAAU,KAAA;CACtD,OACE,kBAAC,SAAD;EAAO,WAAW,EAAG,wCAAwC,CAAS;YAAtE;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG;KACD,kBAAC,QAAD;MAAM,WAAW,EAAG,WAAW,CAAc;gBAAI;KAAY,CAAA;KAC5D,KACC,kBAAC,QAAD;MAAM,WAAU;MAAoC,eAAA;gBAAY;KAE1D,CAAA;KAEP,KAAmB,kBAAC,GAAD,CAAc,CAAA;KACjC,KACC,kBAAC,QAAD;MACE,eAAa,IAAS,GAAG,EAAO,SAAS,KAAA;MACzC,WAAU;gBAET;KACG,CAAA;IAEL;;GACL,kBAAC,SAAD;IACO;IACL,eAAa;IACb,WAAW,MAAM,IAAW,EAAE,OAAO,KAAK;IAC/B;IACH;IACF;IACN,UAAU;IACJ;IACQ;IACP;IACM;IACR;IACA;IACC;IACI;IACD;IACF;IACP,cAAY;IACZ,oBAAkB,KAAW;IAC7B,gBAAc,CAAC,CAAC,KAAS;IACzB,WAAW,EACT,GACA,oFACA,KAAS,kBACT,CACF;GACD,CAAA;GACA,KACC,kBAAC,KAAD;IACE,IAAI;IACJ,MAAK;IACL,eAAa,IAAS,GAAG,EAAO,UAAU,KAAA;IAC1C,WAAU;cAET;GACA,CAAA;EAEA;;AAEX,CACF"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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