npm - @openhands/agent-canvas - Versions diffs - 1.13.0 → 1.15.0 - Mend

@openhands/agent-canvas 1.13.0 → 1.15.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 (1688) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sdk-section-page.js","names":[],"sources":["../../../../../src/components/features/settings/sdk-settings/sdk-section-page.tsx"],"sourcesContent":["import React from \"react\";\nimport { AxiosError } from \"axios\";\nimport { useTranslation } from \"react-i18next\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { LlmSettingsInputsSkeleton } from \"#/components/features/settings/llm-settings/llm-settings-inputs-skeleton\";\nimport { useSaveSettings } from \"#/hooks/mutation/use-save-settings\";\nimport {\n useAgentSettingsSchema,\n useConversationSettingsSchema,\n} from \"#/hooks/query/use-agent-settings-schema\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Settings, SettingsSchema, SettingsScope } from \"#/types/settings\";\nimport { extensionModuleEmptyStateClassName } from \"#/utils/extension-module-card-classes\";\nimport {\n displayErrorToast,\n displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport {\n buildInitialSettingsFormValues,\n buildSdkSettingsPayload,\n buildSdkSettingsPayloadForView,\n getVisibleSettingsSections,\n hasAdvancedSettings,\n hasCriticalSettings,\n hasMinorSettings,\n inferInitialView,\n isValidSettingsSchema,\n SettingsDirtyState,\n SettingsFormValues,\n type SettingsValueSource,\n type SettingsView,\n} from \"#/utils/sdk-settings-schema\";\nimport { FIELD_FULL_WIDTH_KEYS, SchemaField } from \"./schema-field\";\nimport { ViewToggle } from \"./view-toggle\";\n\nconst EMPTY_EXCLUDE_KEYS = new Set<string>();\n\nconst VIEW_ORDER: Record<SettingsView, number> = {\n basic: 0,\n advanced: 1,\n all: 2,\n};\n\nconst getLessDetailedView = (\n currentView: SettingsView,\n nextView: SettingsView,\n): SettingsView =>\n VIEW_ORDER[nextView] < VIEW_ORDER[currentView] ? nextView : currentView;\n\nconst getMoreDetailedView = (\n currentView: SettingsView,\n nextView: SettingsView,\n): SettingsView =>\n VIEW_ORDER[nextView] > VIEW_ORDER[currentView] ? nextView : currentView;\n\nconst normalizeView = (\n view: SettingsView,\n {\n showBasic,\n showAdvanced,\n showAll,\n }: {\n showBasic: boolean;\n showAdvanced: boolean;\n showAll: boolean;\n },\n): SettingsView => {\n if (view === \"all\") {\n if (showAll) {\n return \"all\";\n }\n\n return showAdvanced ? \"advanced\" : \"basic\";\n }\n\n if (view === \"advanced\") {\n if (showAdvanced) {\n return \"advanced\";\n }\n\n return showAll ? \"all\" : \"basic\";\n }\n\n // A critical-less page has nothing to render in the basic tier; bump up.\n if (!showBasic) {\n if (showAdvanced) return \"advanced\";\n if (showAll) return \"all\";\n }\n return \"basic\";\n};\n\nconst PAYLOAD_DIFF_KEY: Record<SettingsValueSource, string> = {\n agent_settings: \"agent_settings_diff\",\n conversation_settings: \"conversation_settings_diff\",\n};\n\nconst getSchemaUnavailableMessage = (\n error: unknown,\n fallbackMessage: string,\n): string => {\n if (!(error instanceof AxiosError)) {\n return fallbackMessage;\n }\n\n if (error.response?.status === 401) {\n return `${fallbackMessage} 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.`;\n }\n\n if (error.response?.status === 404) {\n return `${fallbackMessage} This backend does not expose /api/settings/* schema endpoints. Upgrade to a recent openhands-agent-server release.`;\n }\n\n return fallbackMessage;\n};\n\nexport interface SettingsSourceConfig {\n /** Which schema/values bucket on `settings` this source pulls from. /\n settingsSource: SettingsValueSource;\n /* Section keys (e.g. [\"llm\"]) within that schema to render. /\n sectionKeys: string[];\n /* Field keys to skip (rendered elsewhere by the caller). /\n excludeKeys?: Set<string>;\n}\n\nexport interface SdkSectionHeaderProps {\n values: SettingsFormValues;\n isDisabled: boolean;\n view: SettingsView;\n onChange: (key: string, value: string \| boolean) => void;\n}\n\ninterface ResolvedSource extends SettingsSourceConfig {\n filteredSchema: SettingsSchema \| null;\n}\n\n/\n Snapshot of the page's save state, surfaced to the parent so it can\n * render its own Save/Next button (e.g. in onboarding) when\n * {@link SdkSectionPage}'s built-in button is hidden via\n * `hideSaveButton`.\n /\nexport interface SdkSectionSaveControl {\n /* Trigger a save of the currently-dirty fields. No-op while `isSaving` or `!isDirty`. /\n save: () => void;\n /* A save mutation is in flight. /\n isSaving: boolean;\n /* At least one field is dirty (or `extraDirty` was passed in). /\n isDirty: boolean;\n /* Current form values (for custom save flows). /\n values: SettingsFormValues;\n /* The active view tier (basic/advanced/all) the form is rendering. /\n view: SettingsView;\n /\n Returns the coerced, dirty-only payload as a nested object\n * (e.g. `{ llm: { temperature: 0.7 } }`). Lets a custom save flow persist\n * exactly the fields the user changed, with proper types, without\n * re-implementing schema-driven coercion. Throws if a field fails coercion.\n /\n getDirtyPayload: () => Record<string, unknown>;\n}\n\n/\n A generic SDK-schema-driven settings page that renders fields from one or\n * more schema sections.\n \n The `settingsSources` array specifies which schema(s)/section(s) the page\n * owns. The page tracks values/dirty state per source, renders sections from\n * each source in order (filtered by the schema's `prominence` field for the\n * selected view), and emits a combined save payload like\n * `{ conversation_settings_diff: {...}, agent_settings_diff: {...} }` ---\n * including only the keys for sources that actually have dirty changes.\n \n @param settingsSources one or more schemas to render fields from\n * @param header render prop above the fields (receives unified state)\n * @param buildPayload customize the save payload before submission\n * @param testId data-testid on the page wrapper\n /\nexport function SdkSectionPage({\n settingsSources,\n scope = \"personal\",\n header,\n extraDirty = false,\n buildPayload,\n onSaveSuccess,\n getInitialView,\n forceShowAdvancedView = false,\n allowAllView = true,\n initialValueOverrides,\n embedded = false,\n hideSaveButton = false,\n suppressSuccessToast = false,\n onSaveControlChange,\n testId = \"sdk-section-settings-screen\",\n}: {\n settingsSources: SettingsSourceConfig[];\n scope?: SettingsScope;\n\n header?: (props: SdkSectionHeaderProps) => React.ReactNode;\n extraDirty?: boolean;\n /\n Customize the save payload. Receives the wrapped default payload (e.g.\n * `{ agent_settings_diff: { llm: { model: \"gpt-4\" } } }`) plus the unified\n * form context. Return the payload to actually send.\n /\n buildPayload?: (\n defaultPayload: Record<string, unknown>,\n context: {\n values: SettingsFormValues;\n dirty: SettingsDirtyState;\n view: SettingsView;\n },\n ) => Record<string, unknown>;\n onSaveSuccess?: () => void;\n getInitialView?: (\n settings: Settings,\n filteredSchema: SettingsSchema,\n ) => SettingsView;\n forceShowAdvancedView?: boolean;\n allowAllView?: boolean;\n /\n Per-field initial value overrides that win over the values\n * derived from `useSettings`. The keys of each override are also\n * marked dirty on hydration so the user can save the form without\n * having to touch the prefilled fields. Useful when the page is\n * embedded in a flow that wants to nudge brand-new users toward a\n * particular default (e.g. onboarding pre-filling OpenHands/Opus).\n /\n initialValueOverrides?: SettingsFormValues;\n embedded?: boolean;\n hideSaveButton?: boolean;\n /* Suppress the default success toast after save completes. /\n suppressSuccessToast?: boolean;\n /\n Fires whenever the save state changes (a mutation starts/finishes,\n * dirty status flips). Provides a stable `save()` callback the\n * parent can wire to its own button. Useful when the form is\n * embedded in a custom flow and the built-in Save button is hidden.\n */\n onSaveControlChange?: (control: SdkSectionSaveControl) => void;\n testId?: string;\n}) {\n const { t } = useTranslation(\"openhands\");\n const { mutate: saveSettings, isPending } = useSaveSettings(scope);\n const { data: settings, isLoading, isFetching } = useSettings(scope);\n const agentSchemaQuery = useAgentSettingsSchema(\n settings?.agent_settings_schema,\n );\n const conversationSchemaQuery = useConversationSettingsSchema(\n settings?.conversation_settings_schema,\n );\n const isReadOnly = false;\n\n const sourcesSignature = React.useMemo(\n () =>\n JSON.stringify(\n settingsSources.map((s) => ({\n source: s.settingsSource,\n sectionKeys: s.sectionKeys,\n excludeKeys: s.excludeKeys ? Array.from(s.excludeKeys).sort() : null,\n })),\n ),\n [settingsSources],\n );\n\n const resolvedSourceConfigs = React.useMemo<SettingsSourceConfig[]>(() => {\n const parsed = JSON.parse(sourcesSignature) as Array<{\n source: SettingsValueSource;\n sectionKeys: string[];\n excludeKeys: string[] \| null;\n }>;\n return parsed.map((p) => ({\n settingsSource: p.source,\n sectionKeys: p.sectionKeys,\n excludeKeys: p.excludeKeys ? new Set(p.excludeKeys) : undefined,\n }));\n }, [sourcesSignature]);\n\n const getSchemaForSource = React.useCallback(\n (source: SettingsValueSource) =>\n source === \"conversation_settings\"\n ? conversationSchemaQuery.data\n : agentSchemaQuery.data,\n [agentSchemaQuery.data, conversationSchemaQuery.data],\n );\n\n const isSchemaLoading = resolvedSourceConfigs.some((src) =>\n src.settingsSource === \"conversation_settings\"\n ? conversationSchemaQuery.isLoading\n : agentSchemaQuery.isLoading,\n );\n\n const resolvedSources = React.useMemo<ResolvedSource[]>(\n () =>\n resolvedSourceConfigs.map((src) => {\n const schema = getSchemaForSource(src.settingsSource);\n if (!isValidSettingsSchema(schema)) {\n return { ...src, filteredSchema: null };\n }\n const sectionSet = new Set(src.sectionKeys);\n // The agent schema can carry more than one section per key — e.g. the\n // combined AgentSettings schema emits an \"llm\" section for both the\n // \"openhands\" and \"acp\" variants. Only the first (openhands) is used,\n // so keep the first section per key; otherwise every field renders\n // twice and React sees duplicate section keys.\n const seenKeys = new Set<string>();\n const filteredSchema: SettingsSchema = {\n ...schema,\n sections: schema.sections.filter((s) => {\n if (!sectionSet.has(s.key) \|\| seenKeys.has(s.key)) return false;\n seenKeys.add(s.key);\n return true;\n }),\n };\n return { ...src, filteredSchema };\n }),\n [resolvedSourceConfigs, getSchemaForSource],\n );\n\n // The basic tier only exists when some field renders in it; a critical-less\n // page (e.g. Memory, whose only field is major) hides the Basic tab and\n // floors its view at \"advanced\".\n const showBasic = resolvedSources.some((src) =>\n hasCriticalSettings(src.filteredSchema),\n );\n const showAdvanced =\n forceShowAdvancedView \|\|\n resolvedSources.some((src) => hasAdvancedSettings(src.filteredSchema));\n const showAll =\n allowAllView &&\n resolvedSources.some((src) => hasMinorSettings(src.filteredSchema));\n\n const schemaUnavailableMessage = React.useMemo(() => {\n const firstError = resolvedSourceConfigs.reduce<unknown>(\n (err, src) =>\n err ??\n (src.settingsSource === \"conversation_settings\"\n ? conversationSchemaQuery.error\n : agentSchemaQuery.error),\n null,\n );\n return getSchemaUnavailableMessage(\n firstError,\n t(I18nKey.SETTINGS$SDK_SCHEMA_UNAVAILABLE),\n );\n }, [\n resolvedSourceConfigs,\n agentSchemaQuery.error,\n conversationSchemaQuery.error,\n t,\n ]);\n\n const overridesSignature = React.useMemo(\n () => (initialValueOverrides ? JSON.stringify(initialValueOverrides) : \"\"),\n [initialValueOverrides],\n );\n\n const [view, setView] = React.useState<SettingsView>(\"basic\");\n const [valuesBySource, setValuesBySource] = React.useState<\n Partial<Record<SettingsValueSource, SettingsFormValues>>\n >({});\n const [dirtyBySource, setDirtyBySource] = React.useState<\n Partial<Record<SettingsValueSource, SettingsDirtyState>>\n >({});\n const hasHydratedViewRef = React.useRef(false);\n\n const initialValuesBySource = React.useMemo<Partial<\n Record<SettingsValueSource, SettingsFormValues>\n > \| null>(() => {\n if (!settings) return null;\n const result: Partial<Record<SettingsValueSource, SettingsFormValues>> = {};\n for (const src of resolvedSources) {\n if (!src.filteredSchema) return null;\n result[src.settingsSource] = {\n ...(result[src.settingsSource] ?? {}),\n ...buildInitialSettingsFormValues(\n settings,\n src.filteredSchema,\n src.settingsSource,\n ),\n };\n }\n if (initialValueOverrides) {\n const firstSource = resolvedSources[0]?.settingsSource;\n if (firstSource && result[firstSource]) {\n result[firstSource] = {\n ...result[firstSource],\n ...initialValueOverrides,\n };\n }\n }\n return result;\n }, [settings, resolvedSources, overridesSignature]);\n\n const initialView = React.useMemo(() => {\n if (!settings) return null;\n let result: SettingsView \| null = null;\n for (const src of resolvedSources) {\n if (!src.filteredSchema) return null;\n const perSource = getInitialView\n ? getInitialView(settings, src.filteredSchema)\n : inferInitialView(settings, src.filteredSchema, src.settingsSource);\n result = result ? getMoreDetailedView(result, perSource) : perSource;\n }\n if (!result) return null;\n return normalizeView(result, { showBasic, showAdvanced, showAll });\n }, [\n settings,\n resolvedSources,\n getInitialView,\n showBasic,\n showAdvanced,\n showAll,\n ]);\n\n React.useEffect(() => {\n hasHydratedViewRef.current = false;\n setView(\"basic\");\n setValuesBySource({});\n setDirtyBySource({});\n }, [scope, sourcesSignature]);\n\n React.useEffect(() => {\n if (!initialValuesBySource \|\| !initialView) return;\n\n setValuesBySource(initialValuesBySource);\n if (initialValueOverrides) {\n const firstSource = resolvedSources[0]?.settingsSource;\n if (firstSource) {\n const overrideDirty: SettingsDirtyState = Object.fromEntries(\n Object.keys(initialValueOverrides).map((key) => [key, true]),\n );\n setDirtyBySource({ [firstSource]: overrideDirty });\n } else {\n setDirtyBySource({});\n }\n } else {\n setDirtyBySource({});\n }\n // The ref flip stays outside the updater: React double-invokes state\n // updaters in StrictMode, so mutating it in there makes the second\n // (kept) call take the already-hydrated branch and pin the view.\n if (!hasHydratedViewRef.current) {\n hasHydratedViewRef.current = true;\n setView(initialView);\n } else {\n setView((currentView) => getLessDetailedView(currentView, initialView));\n }\n }, [initialValuesBySource, initialView]);\n\n const fieldKeyToSource = React.useMemo(() => {\n const map = new Map<string, SettingsValueSource>();\n for (const src of resolvedSources) {\n if (src.filteredSchema) {\n for (const section of src.filteredSchema.sections) {\n for (const field of section.fields) {\n if (!map.has(field.key)) {\n map.set(field.key, src.settingsSource);\n }\n }\n }\n }\n }\n return map;\n }, [resolvedSources]);\n\n const flatValues = React.useMemo<SettingsFormValues>(() => {\n const merged: SettingsFormValues = {};\n for (const src of resolvedSources) {\n Object.assign(merged, valuesBySource[src.settingsSource] ?? {});\n }\n return merged;\n }, [resolvedSources, valuesBySource]);\n\n const flatDirty = React.useMemo<SettingsDirtyState>(() => {\n const merged: SettingsDirtyState = {};\n for (const src of resolvedSources) {\n Object.assign(merged, dirtyBySource[src.settingsSource] ?? {});\n }\n return merged;\n }, [resolvedSources, dirtyBySource]);\n\n const handleFieldChange = React.useCallback(\n (fieldKey: string, nextValue: string \| boolean) => {\n const sourceKey = fieldKeyToSource.get(fieldKey);\n if (!sourceKey) return;\n setValuesBySource((prev) => ({\n ...prev,\n [sourceKey]: {\n ...(prev[sourceKey] ?? {}),\n [fieldKey]: nextValue,\n },\n }));\n setDirtyBySource((prev) => ({\n ...prev,\n [sourceKey]: {\n ...(prev[sourceKey] ?? {}),\n [fieldKey]: true,\n },\n }));\n },\n [fieldKeyToSource],\n );\n\n const handleError = React.useCallback(\n (error: AxiosError) => {\n const msg = retrieveAxiosErrorMessage(error);\n displayErrorToast(msg \|\| t(I18nKey.ERROR$GENERIC));\n },\n [t],\n );\n\n const handleSaveRef = React.useRef<() => void>(() => {});\n const stableSave = React.useCallback(() => {\n handleSaveRef.current();\n }, []);\n\n // Stable accessor for the coerced, dirty-only payload. Mirrors the\n // `handleSaveRef` pattern so the exposed function reference stays stable\n // across renders while always reading the latest closure at call time.\n const buildDirtyPayloadRef = React.useRef<() => Record<string, unknown>>(\n () => ({}),\n );\n const stableGetDirtyPayload = React.useCallback(\n () => buildDirtyPayloadRef.current(),\n [],\n );\n\n const handleSave = () => {\n if (isReadOnly) return;\n if (resolvedSources.some((src) => !src.filteredSchema)) return;\n\n let payload: Record<string, unknown>;\n try {\n const defaultPayload: Record<string, unknown> = {};\n for (const src of resolvedSources) {\n const schema = src.filteredSchema!;\n const sourceValues = valuesBySource[src.settingsSource] ?? {};\n const sourceDirty = dirtyBySource[src.settingsSource] ?? {};\n const diff = buildSdkSettingsPayloadForView(\n schema,\n sourceValues,\n sourceDirty,\n view,\n );\n if (Object.keys(diff).length > 0) {\n const diffKey = PAYLOAD_DIFF_KEY[src.settingsSource];\n defaultPayload[diffKey] = {\n ...((defaultPayload[diffKey] as\n \| Record<string, unknown>\n \| undefined) ?? {}),\n ...diff,\n };\n }\n }\n\n payload = buildPayload\n ? buildPayload(defaultPayload, {\n values: flatValues,\n dirty: flatDirty,\n view,\n })\n : defaultPayload;\n } catch (error) {\n displayErrorToast(\n error instanceof Error ? error.message : t(I18nKey.ERROR$GENERIC),\n );\n return;\n }\n\n if (Object.keys(payload).length === 0) return;\n\n saveSettings(payload, {\n onError: handleError,\n onSuccess: () => {\n if (!suppressSuccessToast) {\n displaySuccessToast(t(I18nKey.SETTINGS$SAVED_WARNING));\n }\n setDirtyBySource({});\n onSaveSuccess?.();\n },\n });\n };\n\n handleSaveRef.current = handleSave;\n // Dirty-only (NOT view-filtered): we must never inject defaults for\n // non-visible fields here, or a custom save flow would reset fields the\n // user never touched. `buildSdkSettingsPayloadForView` is reserved for the\n // built-in full-replace save above. With multiple sources, we merge each\n // source's nested payload at the top level so single-source consumers\n // (e.g. `LlmSettingsLocalView`) keep reading `.llm` etc. unchanged.\n buildDirtyPayloadRef.current = () => {\n const merged: Record<string, unknown> = {};\n for (const src of resolvedSources) {\n if (!src.filteredSchema) continue;\n const sourceValues = valuesBySource[src.settingsSource] ?? {};\n const sourceDirty = dirtyBySource[src.settingsSource] ?? {};\n Object.assign(\n merged,\n buildSdkSettingsPayload(src.filteredSchema, sourceValues, sourceDirty),\n );\n }\n return merged;\n };\n\n const isDirty = Object.keys(flatDirty).length > 0;\n const saveControlIsDirty = isDirty \|\| extraDirty;\n React.useEffect(() => {\n if (!onSaveControlChange) return;\n onSaveControlChange({\n save: stableSave,\n isSaving: isPending,\n isDirty: saveControlIsDirty,\n values: flatValues,\n view,\n getDirtyPayload: stableGetDirtyPayload,\n });\n }, [isPending, saveControlIsDirty, flatValues, view]);\n\n // Keep existing form content visible during background refetches to avoid\n // flashing the full skeleton (notably during onboarding Next transitions).\n const isInitialSettingsLoad = (isLoading \|\| isFetching) && !settings;\n if (isInitialSettingsLoad \|\| isSchemaLoading) {\n return <LlmSettingsInputsSkeleton />;\n }\n\n const hasAnyVisibleSection = resolvedSources.some(\n (src) => src.filteredSchema && src.filteredSchema.sections.length > 0,\n );\n\n if (!hasAnyVisibleSection) {\n return (\n <div\n data-testid=\"sdk-schema-unavailable\"\n className={extensionModuleEmptyStateClassName}\n >\n <p className=\"text-sm text-[var(--oh-muted)]\">\n {schemaUnavailableMessage}\n </p>\n </div>\n );\n }\n\n if (Object.keys(flatValues).length === 0) {\n return <LlmSettingsInputsSkeleton />;\n }\n\n // Scrolling is owned by the settings shell (or onboarding wrapper), not a\n // nested scroll region. Save actions are inline after the last field.\n const bodyClassName = \"flex flex-col gap-8\";\n\n return (\n <div\n data-testid={testId}\n className={\n embedded\n ? \"relative flex min-h-0 w-full flex-1 flex-col\"\n : \"relative w-full min-h-0\"\n }\n >\n <ViewToggle\n view={view}\n setView={setView}\n showBasic={showBasic}\n showAdvanced={showAdvanced}\n showAll={showAll}\n isDisabled={isReadOnly}\n />\n\n <div className={bodyClassName}>\n {header?.({\n values: flatValues,\n isDisabled: isReadOnly,\n view,\n onChange: handleFieldChange,\n })}\n\n {resolvedSources.map((src) => {\n if (!src.filteredSchema) return null;\n const sourceValues = valuesBySource[src.settingsSource] ?? {};\n const visibleSections = getVisibleSettingsSections(\n src.filteredSchema,\n { ...flatValues, ...sourceValues },\n view,\n src.excludeKeys ?? EMPTY_EXCLUDE_KEYS,\n );\n return visibleSections.map((section) => (\n <section\n key={`${src.settingsSource}:${section.key}`}\n className=\"flex flex-col gap-4\"\n >\n <div className=\"grid gap-4 xl:grid-cols-2\">\n {section.fields.map((field) => (\n <div\n key={field.key}\n className={\n FIELD_FULL_WIDTH_KEYS.has(field.key)\n ? \"xl:col-span-2\"\n : undefined\n }\n >\n <SchemaField\n field={field}\n value={sourceValues[field.key]}\n isDisabled={isReadOnly}\n onChange={(nextValue) =>\n handleFieldChange(field.key, nextValue)\n }\n />\n </div>\n ))}\n </div>\n </section>\n ));\n })}\n\n {!isReadOnly && !hideSaveButton ? (\n <div className=\"flex justify-start pt-2\">\n <BrandButton\n testId=\"save-button\"\n type=\"button\"\n variant=\"primary\"\n isDisabled={isPending \|\| (!isDirty && !extraDirty)}\n onClick={handleSave}\n >\n {isPending\n ? t(I18nKey.SETTINGS$SAVING)\n : t(I18nKey.SETTINGS$SAVE_CHANGES)}\n </BrandButton>\n </div>\n ) : null}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"sdk-section-page.js","names":[],"sources":["../../../../../src/components/features/settings/sdk-settings/sdk-section-page.tsx"],"sourcesContent":["import React from \"react\";\nimport { AxiosError } from \"axios\";\nimport { useTranslation } from \"react-i18next\";\nimport { BrandButton } from \"#/components/features/settings/brand-button\";\nimport { LlmSettingsInputsSkeleton } from \"#/components/features/settings/llm-settings/llm-settings-inputs-skeleton\";\nimport { useSaveSettings } from \"#/hooks/mutation/use-save-settings\";\nimport {\n useAgentSettingsSchema,\n useConversationSettingsSchema,\n} from \"#/hooks/query/use-agent-settings-schema\";\nimport { useSettings } from \"#/hooks/query/use-settings\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { Settings, SettingsSchema, SettingsScope } from \"#/types/settings\";\nimport { extensionModuleEmptyStateClassName } from \"#/utils/extension-module-card-classes\";\nimport {\n displayErrorToast,\n displaySuccessToast,\n} from \"#/utils/custom-toast-handlers\";\nimport { retrieveAxiosErrorMessage } from \"#/utils/retrieve-axios-error-message\";\nimport {\n buildInitialSettingsFormValues,\n buildSdkSettingsPayload,\n buildSdkSettingsPayloadForView,\n getVisibleSettingsSections,\n hasAdvancedSettings,\n hasCriticalSettings,\n hasMinorSettings,\n inferInitialView,\n isValidSettingsSchema,\n SettingsDirtyState,\n SettingsFormValues,\n type SettingsValueSource,\n type SettingsView,\n} from \"#/utils/sdk-settings-schema\";\nimport { FIELD_FULL_WIDTH_KEYS, SchemaField } from \"./schema-field\";\nimport { ViewToggle } from \"./view-toggle\";\n\nconst EMPTY_EXCLUDE_KEYS = new Set<string>();\n\nconst VIEW_ORDER: Record<SettingsView, number> = {\n basic: 0,\n advanced: 1,\n all: 2,\n};\n\nconst getLessDetailedView = (\n currentView: SettingsView,\n nextView: SettingsView,\n): SettingsView =>\n VIEW_ORDER[nextView] < VIEW_ORDER[currentView] ? nextView : currentView;\n\nconst getMoreDetailedView = (\n currentView: SettingsView,\n nextView: SettingsView,\n): SettingsView =>\n VIEW_ORDER[nextView] > VIEW_ORDER[currentView] ? nextView : currentView;\n\nconst normalizeView = (\n view: SettingsView,\n {\n showBasic,\n showAdvanced,\n showAll,\n }: {\n showBasic: boolean;\n showAdvanced: boolean;\n showAll: boolean;\n },\n): SettingsView => {\n if (view === \"all\") {\n if (showAll) {\n return \"all\";\n }\n\n return showAdvanced ? \"advanced\" : \"basic\";\n }\n\n if (view === \"advanced\") {\n if (showAdvanced) {\n return \"advanced\";\n }\n\n return showAll ? \"all\" : \"basic\";\n }\n\n // A critical-less page has nothing to render in the basic tier; bump up.\n if (!showBasic) {\n if (showAdvanced) return \"advanced\";\n if (showAll) return \"all\";\n }\n return \"basic\";\n};\n\nconst PAYLOAD_DIFF_KEY: Record<SettingsValueSource, string> = {\n agent_settings: \"agent_settings_diff\",\n conversation_settings: \"conversation_settings_diff\",\n};\n\nconst getSchemaUnavailableMessage = (\n error: unknown,\n fallbackMessage: string,\n): string => {\n if (!(error instanceof AxiosError)) {\n return fallbackMessage;\n }\n\n if (error.response?.status === 401) {\n return `${fallbackMessage} 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.`;\n }\n\n if (error.response?.status === 404) {\n return `${fallbackMessage} This backend does not expose /api/settings/* schema endpoints. Upgrade to a recent openhands-agent-server release.`;\n }\n\n return fallbackMessage;\n};\n\nexport interface SettingsSourceConfig {\n /** Which schema/values bucket on `settings` this source pulls from. /\n settingsSource: SettingsValueSource;\n /* Section keys (e.g. [\"llm\"]) within that schema to render. /\n sectionKeys: string[];\n /* Field keys to skip (rendered elsewhere by the caller). /\n excludeKeys?: Set<string>;\n}\n\nexport interface SdkSectionHeaderProps {\n values: SettingsFormValues;\n isDisabled: boolean;\n view: SettingsView;\n onChange: (key: string, value: string \| boolean) => void;\n}\n\ninterface ResolvedSource extends SettingsSourceConfig {\n filteredSchema: SettingsSchema \| null;\n}\n\n/\n Snapshot of the page's save state, surfaced to the parent so it can\n * render its own Save/Next button (e.g. in onboarding) when\n * {@link SdkSectionPage}'s built-in button is hidden via\n * `hideSaveButton`.\n /\nexport interface SdkSectionSaveControl {\n /* Trigger a save of the currently-dirty fields. No-op while `isSaving` or `!isDirty`. /\n save: () => void;\n /* A save mutation is in flight. /\n isSaving: boolean;\n /* At least one field is dirty (or `extraDirty` was passed in). /\n isDirty: boolean;\n /* Current form values (for custom save flows). /\n values: SettingsFormValues;\n /* The active view tier (basic/advanced/all) the form is rendering. /\n view: SettingsView;\n /\n Returns the coerced, dirty-only payload as a nested object\n * (e.g. `{ llm: { temperature: 0.7 } }`). Lets a custom save flow persist\n * exactly the fields the user changed, with proper types, without\n * re-implementing schema-driven coercion. Throws if a field fails coercion.\n /\n getDirtyPayload: () => Record<string, unknown>;\n}\n\n/\n A generic SDK-schema-driven settings page that renders fields from one or\n * more schema sections.\n \n The `settingsSources` array specifies which schema(s)/section(s) the page\n * owns. The page tracks values/dirty state per source, renders sections from\n * each source in order (filtered by the schema's `prominence` field for the\n * selected view), and emits a combined save payload like\n * `{ conversation_settings_diff: {...}, agent_settings_diff: {...} }` ---\n * including only the keys for sources that actually have dirty changes.\n \n @param settingsSources one or more schemas to render fields from\n * @param header render prop above the fields (receives unified state)\n * @param buildPayload customize the save payload before submission\n * @param testId data-testid on the page wrapper\n /\nexport function SdkSectionPage({\n settingsSources,\n scope = \"personal\",\n header,\n extraDirty = false,\n buildPayload,\n onSaveSuccess,\n getInitialView,\n forceShowAdvancedView = false,\n allowAllView = true,\n initialValueOverrides,\n embedded = false,\n hideSaveButton = false,\n suppressSuccessToast = false,\n onSaveControlChange,\n testId = \"sdk-section-settings-screen\",\n}: {\n settingsSources: SettingsSourceConfig[];\n scope?: SettingsScope;\n\n header?: (props: SdkSectionHeaderProps) => React.ReactNode;\n extraDirty?: boolean;\n /\n Customize the save payload. Receives the wrapped default payload (e.g.\n * `{ agent_settings_diff: { llm: { model: \"gpt-4\" } } }`) plus the unified\n * form context. Return the payload to actually send.\n /\n buildPayload?: (\n defaultPayload: Record<string, unknown>,\n context: {\n values: SettingsFormValues;\n dirty: SettingsDirtyState;\n view: SettingsView;\n },\n ) => Record<string, unknown>;\n onSaveSuccess?: () => void;\n getInitialView?: (\n settings: Settings,\n filteredSchema: SettingsSchema,\n ) => SettingsView;\n forceShowAdvancedView?: boolean;\n allowAllView?: boolean;\n /\n Per-field initial value overrides that win over the values\n * derived from `useSettings`. The keys of each override are also\n * marked dirty on hydration so the user can save the form without\n * having to touch the prefilled fields. Useful when the page is\n * embedded in a flow that wants to nudge brand-new users toward a\n * particular default (e.g. onboarding pre-filling OpenHands/Opus).\n /\n initialValueOverrides?: SettingsFormValues;\n embedded?: boolean;\n hideSaveButton?: boolean;\n /* Suppress the default success toast after save completes. /\n suppressSuccessToast?: boolean;\n /\n Fires whenever the save state changes (a mutation starts/finishes,\n * dirty status flips). Provides a stable `save()` callback the\n * parent can wire to its own button. Useful when the form is\n * embedded in a custom flow and the built-in Save button is hidden.\n */\n onSaveControlChange?: (control: SdkSectionSaveControl) => void;\n testId?: string;\n}) {\n const { t } = useTranslation(\"openhands\");\n const { mutate: saveSettings, isPending } = useSaveSettings(scope);\n const { data: settings, isLoading, isFetching } = useSettings(scope);\n const agentSchemaQuery = useAgentSettingsSchema(\n settings?.agent_settings_schema,\n );\n const conversationSchemaQuery = useConversationSettingsSchema(\n settings?.conversation_settings_schema,\n );\n const isReadOnly = false;\n\n const sourcesSignature = React.useMemo(\n () =>\n JSON.stringify(\n settingsSources.map((s) => ({\n source: s.settingsSource,\n sectionKeys: s.sectionKeys,\n excludeKeys: s.excludeKeys ? Array.from(s.excludeKeys).sort() : null,\n })),\n ),\n [settingsSources],\n );\n\n const resolvedSourceConfigs = React.useMemo<SettingsSourceConfig[]>(() => {\n const parsed = JSON.parse(sourcesSignature) as Array<{\n source: SettingsValueSource;\n sectionKeys: string[];\n excludeKeys: string[] \| null;\n }>;\n return parsed.map((p) => ({\n settingsSource: p.source,\n sectionKeys: p.sectionKeys,\n excludeKeys: p.excludeKeys ? new Set(p.excludeKeys) : undefined,\n }));\n }, [sourcesSignature]);\n\n const getSchemaForSource = React.useCallback(\n (source: SettingsValueSource) =>\n source === \"conversation_settings\"\n ? conversationSchemaQuery.data\n : agentSchemaQuery.data,\n [agentSchemaQuery.data, conversationSchemaQuery.data],\n );\n\n const isSchemaLoading = resolvedSourceConfigs.some((src) =>\n src.settingsSource === \"conversation_settings\"\n ? conversationSchemaQuery.isLoading\n : agentSchemaQuery.isLoading,\n );\n\n const resolvedSources = React.useMemo<ResolvedSource[]>(\n () =>\n resolvedSourceConfigs.map((src) => {\n const schema = getSchemaForSource(src.settingsSource);\n if (!isValidSettingsSchema(schema)) {\n return { ...src, filteredSchema: null };\n }\n const sectionSet = new Set(src.sectionKeys);\n // The agent schema can carry more than one section per key — e.g. the\n // combined AgentSettings schema emits an \"llm\" section for both the\n // \"openhands\" and \"acp\" variants. Only the first (openhands) is used,\n // so keep the first section per key; otherwise every field renders\n // twice and React sees duplicate section keys.\n const seenKeys = new Set<string>();\n const filteredSchema: SettingsSchema = {\n ...schema,\n sections: schema.sections.filter((s) => {\n if (!sectionSet.has(s.key) \|\| seenKeys.has(s.key)) return false;\n seenKeys.add(s.key);\n return true;\n }),\n };\n return { ...src, filteredSchema };\n }),\n [resolvedSourceConfigs, getSchemaForSource],\n );\n\n // The basic tier only exists when some field renders in it; a critical-less\n // page (e.g. Memory, whose only field is major) hides the Basic tab and\n // floors its view at \"advanced\".\n const showBasic = resolvedSources.some((src) =>\n hasCriticalSettings(src.filteredSchema),\n );\n const showAdvanced =\n forceShowAdvancedView \|\|\n resolvedSources.some((src) => hasAdvancedSettings(src.filteredSchema));\n const showAll =\n allowAllView &&\n resolvedSources.some((src) => hasMinorSettings(src.filteredSchema));\n\n const schemaUnavailableMessage = React.useMemo(() => {\n const firstError = resolvedSourceConfigs.reduce<unknown>(\n (err, src) =>\n err ??\n (src.settingsSource === \"conversation_settings\"\n ? conversationSchemaQuery.error\n : agentSchemaQuery.error),\n null,\n );\n return getSchemaUnavailableMessage(\n firstError,\n t(I18nKey.SETTINGS$SDK_SCHEMA_UNAVAILABLE),\n );\n }, [\n resolvedSourceConfigs,\n agentSchemaQuery.error,\n conversationSchemaQuery.error,\n t,\n ]);\n\n const overridesSignature = React.useMemo(\n () => (initialValueOverrides ? JSON.stringify(initialValueOverrides) : \"\"),\n [initialValueOverrides],\n );\n\n const [view, setView] = React.useState<SettingsView>(\"basic\");\n const [valuesBySource, setValuesBySource] = React.useState<\n Partial<Record<SettingsValueSource, SettingsFormValues>>\n >({});\n const [dirtyBySource, setDirtyBySource] = React.useState<\n Partial<Record<SettingsValueSource, SettingsDirtyState>>\n >({});\n const hasHydratedViewRef = React.useRef(false);\n\n const initialValuesBySource = React.useMemo<Partial<\n Record<SettingsValueSource, SettingsFormValues>\n > \| null>(() => {\n if (!settings) return null;\n const result: Partial<Record<SettingsValueSource, SettingsFormValues>> = {};\n for (const src of resolvedSources) {\n if (!src.filteredSchema) return null;\n result[src.settingsSource] = {\n ...(result[src.settingsSource] ?? {}),\n ...buildInitialSettingsFormValues(\n settings,\n src.filteredSchema,\n src.settingsSource,\n ),\n };\n }\n if (initialValueOverrides) {\n const firstSource = resolvedSources[0]?.settingsSource;\n if (firstSource && result[firstSource]) {\n result[firstSource] = {\n ...result[firstSource],\n ...initialValueOverrides,\n };\n }\n }\n return result;\n }, [settings, resolvedSources, overridesSignature]);\n\n const initialView = React.useMemo(() => {\n if (!settings) return null;\n let result: SettingsView \| null = null;\n for (const src of resolvedSources) {\n if (!src.filteredSchema) return null;\n const perSource = getInitialView\n ? getInitialView(settings, src.filteredSchema)\n : inferInitialView(settings, src.filteredSchema, src.settingsSource);\n result = result ? getMoreDetailedView(result, perSource) : perSource;\n }\n if (!result) return null;\n return normalizeView(result, { showBasic, showAdvanced, showAll });\n }, [\n settings,\n resolvedSources,\n getInitialView,\n showBasic,\n showAdvanced,\n showAll,\n ]);\n\n React.useEffect(() => {\n hasHydratedViewRef.current = false;\n setView(\"basic\");\n setValuesBySource({});\n setDirtyBySource({});\n }, [scope, sourcesSignature]);\n\n React.useEffect(() => {\n if (!initialValuesBySource \|\| !initialView) return;\n\n setValuesBySource(initialValuesBySource);\n if (initialValueOverrides) {\n const firstSource = resolvedSources[0]?.settingsSource;\n if (firstSource) {\n const overrideDirty: SettingsDirtyState = Object.fromEntries(\n Object.keys(initialValueOverrides).map((key) => [key, true]),\n );\n setDirtyBySource({ [firstSource]: overrideDirty });\n } else {\n setDirtyBySource({});\n }\n } else {\n setDirtyBySource({});\n }\n // The ref flip stays outside the updater: React double-invokes state\n // updaters in StrictMode, so mutating it in there makes the second\n // (kept) call take the already-hydrated branch and pin the view.\n if (!hasHydratedViewRef.current) {\n hasHydratedViewRef.current = true;\n setView(initialView);\n } else {\n setView((currentView) => getLessDetailedView(currentView, initialView));\n }\n }, [initialValuesBySource, initialView]);\n\n const fieldKeyToSource = React.useMemo(() => {\n const map = new Map<string, SettingsValueSource>();\n for (const src of resolvedSources) {\n if (src.filteredSchema) {\n for (const section of src.filteredSchema.sections) {\n for (const field of section.fields) {\n if (!map.has(field.key)) {\n map.set(field.key, src.settingsSource);\n }\n }\n }\n }\n }\n return map;\n }, [resolvedSources]);\n\n const flatValues = React.useMemo<SettingsFormValues>(() => {\n const merged: SettingsFormValues = {};\n for (const src of resolvedSources) {\n Object.assign(merged, valuesBySource[src.settingsSource] ?? {});\n }\n return merged;\n }, [resolvedSources, valuesBySource]);\n\n const flatDirty = React.useMemo<SettingsDirtyState>(() => {\n const merged: SettingsDirtyState = {};\n for (const src of resolvedSources) {\n Object.assign(merged, dirtyBySource[src.settingsSource] ?? {});\n }\n return merged;\n }, [resolvedSources, dirtyBySource]);\n\n const handleFieldChange = React.useCallback(\n (fieldKey: string, nextValue: string \| boolean) => {\n const sourceKey = fieldKeyToSource.get(fieldKey);\n if (!sourceKey) return;\n setValuesBySource((prev) => ({\n ...prev,\n [sourceKey]: {\n ...(prev[sourceKey] ?? {}),\n [fieldKey]: nextValue,\n },\n }));\n setDirtyBySource((prev) => ({\n ...prev,\n [sourceKey]: {\n ...(prev[sourceKey] ?? {}),\n [fieldKey]: true,\n },\n }));\n },\n [fieldKeyToSource],\n );\n\n const handleError = React.useCallback(\n (error: AxiosError) => {\n const msg = retrieveAxiosErrorMessage(error);\n displayErrorToast(msg \|\| t(I18nKey.ERROR$GENERIC));\n },\n [t],\n );\n\n const handleSaveRef = React.useRef<() => void>(() => {});\n const stableSave = React.useCallback(() => {\n handleSaveRef.current();\n }, []);\n\n // Stable accessor for the coerced, dirty-only payload. Mirrors the\n // `handleSaveRef` pattern so the exposed function reference stays stable\n // across renders while always reading the latest closure at call time.\n const buildDirtyPayloadRef = React.useRef<() => Record<string, unknown>>(\n () => ({}),\n );\n const stableGetDirtyPayload = React.useCallback(\n () => buildDirtyPayloadRef.current(),\n [],\n );\n\n const handleSave = () => {\n if (isReadOnly) return;\n if (resolvedSources.some((src) => !src.filteredSchema)) return;\n\n let payload: Record<string, unknown>;\n try {\n const defaultPayload: Record<string, unknown> = {};\n for (const src of resolvedSources) {\n const schema = src.filteredSchema!;\n const sourceValues = valuesBySource[src.settingsSource] ?? {};\n const sourceDirty = dirtyBySource[src.settingsSource] ?? {};\n const diff = buildSdkSettingsPayloadForView(\n schema,\n sourceValues,\n sourceDirty,\n view,\n );\n if (Object.keys(diff).length > 0) {\n const diffKey = PAYLOAD_DIFF_KEY[src.settingsSource];\n defaultPayload[diffKey] = {\n ...((defaultPayload[diffKey] as\n \| Record<string, unknown>\n \| undefined) ?? {}),\n ...diff,\n };\n }\n }\n\n payload = buildPayload\n ? buildPayload(defaultPayload, {\n values: flatValues,\n dirty: flatDirty,\n view,\n })\n : defaultPayload;\n } catch (error) {\n displayErrorToast(\n error instanceof Error ? error.message : t(I18nKey.ERROR$GENERIC),\n );\n return;\n }\n\n if (Object.keys(payload).length === 0) return;\n\n saveSettings(payload, {\n onError: handleError,\n onSuccess: () => {\n if (!suppressSuccessToast) {\n displaySuccessToast(t(I18nKey.SETTINGS$SAVED_WARNING));\n }\n setDirtyBySource({});\n onSaveSuccess?.();\n },\n });\n };\n\n handleSaveRef.current = handleSave;\n // Dirty-only (NOT view-filtered): we must never inject defaults for\n // non-visible fields here, or a custom save flow would reset fields the\n // user never touched. `buildSdkSettingsPayloadForView` is reserved for the\n // built-in full-replace save above. With multiple sources, we merge each\n // source's nested payload at the top level so single-source consumers\n // (e.g. `LlmSettingsLocalView`) keep reading `.llm` etc. unchanged.\n buildDirtyPayloadRef.current = () => {\n const merged: Record<string, unknown> = {};\n for (const src of resolvedSources) {\n if (!src.filteredSchema) continue;\n const sourceValues = valuesBySource[src.settingsSource] ?? {};\n const sourceDirty = dirtyBySource[src.settingsSource] ?? {};\n Object.assign(\n merged,\n buildSdkSettingsPayload(src.filteredSchema, sourceValues, sourceDirty),\n );\n }\n return merged;\n };\n\n const isDirty = Object.keys(flatDirty).length > 0;\n const saveControlIsDirty = isDirty \|\| extraDirty;\n React.useEffect(() => {\n if (!onSaveControlChange) return;\n onSaveControlChange({\n save: stableSave,\n isSaving: isPending,\n isDirty: saveControlIsDirty,\n values: flatValues,\n view,\n getDirtyPayload: stableGetDirtyPayload,\n });\n }, [isPending, saveControlIsDirty, flatValues, view]);\n\n // Keep existing form content visible during background refetches to avoid\n // flashing the full skeleton (notably during onboarding Next transitions).\n const isInitialSettingsLoad = (isLoading \|\| isFetching) && !settings;\n if (isInitialSettingsLoad \|\| isSchemaLoading) {\n return <LlmSettingsInputsSkeleton />;\n }\n\n const hasAnyVisibleSection = resolvedSources.some(\n (src) => src.filteredSchema && src.filteredSchema.sections.length > 0,\n );\n\n if (!hasAnyVisibleSection) {\n return (\n <div\n data-testid=\"sdk-schema-unavailable\"\n className={extensionModuleEmptyStateClassName}\n >\n <p className=\"text-sm text-[var(--oh-muted)]\">\n {schemaUnavailableMessage}\n </p>\n </div>\n );\n }\n\n if (Object.keys(flatValues).length === 0) {\n return <LlmSettingsInputsSkeleton />;\n }\n\n // Scrolling is owned by the settings shell (or onboarding wrapper), not a\n // nested scroll region. Save actions are inline after the last field.\n const bodyClassName = \"flex flex-col gap-8\";\n\n return (\n <div\n data-testid={testId}\n className={\n embedded\n ? \"relative flex min-h-0 w-full flex-1 flex-col\"\n : \"relative w-full min-h-0\"\n }\n >\n <ViewToggle\n view={view}\n setView={setView}\n showBasic={showBasic}\n showAdvanced={showAdvanced}\n showAll={showAll}\n isDisabled={isReadOnly}\n />\n\n <div className={bodyClassName}>\n {header?.({\n values: flatValues,\n isDisabled: isReadOnly,\n view,\n onChange: handleFieldChange,\n })}\n\n {resolvedSources.map((src) => {\n if (!src.filteredSchema) return null;\n const sourceValues = valuesBySource[src.settingsSource] ?? {};\n const visibleSections = getVisibleSettingsSections(\n src.filteredSchema,\n { ...flatValues, ...sourceValues },\n view,\n src.excludeKeys ?? EMPTY_EXCLUDE_KEYS,\n );\n return visibleSections.map((section) => (\n <section\n key={`${src.settingsSource}:${section.key}`}\n className=\"flex flex-col gap-4\"\n >\n <div className=\"grid gap-4 xl:grid-cols-2\">\n {section.fields.map((field) => (\n <div\n key={field.key}\n className={\n FIELD_FULL_WIDTH_KEYS.has(field.key)\n ? \"xl:col-span-2\"\n : undefined\n }\n >\n <SchemaField\n field={field}\n value={sourceValues[field.key]}\n isDisabled={isReadOnly}\n onChange={(nextValue) =>\n handleFieldChange(field.key, nextValue)\n }\n />\n </div>\n ))}\n </div>\n </section>\n ));\n })}\n\n {!isReadOnly && !hideSaveButton ? (\n <div className=\"flex justify-start pt-2\">\n <BrandButton\n testId=\"save-button\"\n type=\"button\"\n variant=\"primary\"\n isDisabled={isPending \|\| (!isDirty && !extraDirty)}\n onClick={handleSave}\n >\n {isPending\n ? t(I18nKey.SETTINGS$SAVING)\n : t(I18nKey.SETTINGS$SAVE_CHANGES)}\n </BrandButton>\n </div>\n ) : null}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

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-onboarding-checklist-item-icon.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/lucide-react/dist/esm/icons/plus.cjs"),t=require("../../../utils/utils.cjs"),n=require("../../../icons/clock.cjs"),r=require("../../../icons/slack.cjs"),i=require("../../../icons/server-process.cjs"),a=require("../../../icons/key.cjs");let o=require("react/jsx-runtime");var s=18;function c(){return(0,o.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,width:s,height:s,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:[(0,o.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,o.jsx)(`path`,{d:`m7 16.5-4.74-2.85`}),(0,o.jsx)(`path`,{d:`m7 16.5 5-3`}),(0,o.jsx)(`path`,{d:`M7 16.5v5.17`}),(0,o.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,o.jsx)(`path`,{d:`m17 16.5-5-3`}),(0,o.jsx)(`path`,{d:`m17 16.5 4.74-2.85`}),(0,o.jsx)(`path`,{d:`m17 16.5v5.17`}),(0,o.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,o.jsx)(`path`,{d:`M12 8 7.26 5.15`}),(0,o.jsx)(`path`,{d:`m12 8 4.74-2.85`}),(0,o.jsx)(`path`,{d:`M12 13.5V8`})]})}function l({id:l,className:u}){let d=t.cn(`shrink-0 text-white`,u),f=`sidebar-onboarding-checklist-icon-${l}`;switch(l){case`configure-llm`:return(0,o.jsx)(`span`,{"data-testid":f,className:`inline-flex shrink-0`,children:(0,o.jsx)(a.default,{width:s,height:s,className:d,"aria-hidden":!0})});case`start-conversation`:return(0,o.jsx)(`span`,{"data-testid":f,className:`inline-flex shrink-0`,children:(0,o.jsx)(e.Plus,{size:s,strokeWidth:2,className:d,"aria-hidden":!0})});case`schedule-task`:return(0,o.jsx)(`span`,{"data-testid":f,className:`inline-flex shrink-0`,children:(0,o.jsx)(n.default,{width:s,height:s,className:d,"aria-hidden":!0})});case`customize-agent`:return(0,o.jsx)(`span`,{"data-testid":f,className:t.cn(`inline-flex shrink-0`,d),children:(0,o.jsx)(c,{})});case`connect-mcp`:return(0,o.jsx)(`span`,{"data-testid":f,className:`inline-flex shrink-0`,children:(0,o.jsx)(i.default,{width:s,height:s,className:d,"aria-hidden":!0})});case`join-slack`:return(0,o.jsx)(`span`,{"data-testid":f,className:`inline-flex shrink-0`,children:(0,o.jsx)(r.default,{width:s,height:s,className:d,"aria-hidden":!0})});default:return l}}exports.SidebarOnboardingChecklistItemIcon=l;
2	+ //# sourceMappingURL=sidebar-onboarding-checklist-item-icon.cjs.map

package/dist/components/features/sidebar/sidebar-onboarding-checklist-item-icon.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sidebar-onboarding-checklist-item-icon.cjs","names":[],"sources":["../../../../src/components/features/sidebar/sidebar-onboarding-checklist-item-icon.tsx"],"sourcesContent":["import { Plus } from \"lucide-react\";\nimport ClockIcon from \"#/icons/clock.svg?react\";\nimport KeyIcon from \"#/icons/key.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport SlackIcon from \"#/icons/slack.svg?react\";\nimport { cn } from \"#/utils/utils\";\nimport type { SidebarOnboardingChecklistItemId } from \"./sidebar-onboarding-checklist.constants\";\n\nconst PREVIEW_ICON_SIZE = 18;\n\nfunction CustomizeAgentIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={PREVIEW_ICON_SIZE}\n height={PREVIEW_ICON_SIZE}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <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\" />\n <path d=\"m7 16.5-4.74-2.85\" />\n <path d=\"m7 16.5 5-3\" />\n <path d=\"M7 16.5v5.17\" />\n <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\" />\n <path d=\"m17 16.5-5-3\" />\n <path d=\"m17 16.5 4.74-2.85\" />\n <path d=\"m17 16.5v5.17\" />\n <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\" />\n <path d=\"M12 8 7.26 5.15\" />\n <path d=\"m12 8 4.74-2.85\" />\n <path d=\"M12 13.5V8\" />\n </svg>\n );\n}\n\ninterface SidebarOnboardingChecklistItemIconProps {\n id: SidebarOnboardingChecklistItemId;\n className?: string;\n}\n\nexport function SidebarOnboardingChecklistItemIcon({\n id,\n className,\n}: SidebarOnboardingChecklistItemIconProps) {\n const iconClassName = cn(\"shrink-0 text-white\", className);\n const testId = `sidebar-onboarding-checklist-icon-${id}`;\n\n switch (id) {\n case \"configure-llm\":\n return (\n <span data-testid={testId} className=\"inline-flex shrink-0\">\n <KeyIcon\n width={PREVIEW_ICON_SIZE}\n height={PREVIEW_ICON_SIZE}\n className={iconClassName}\n aria-hidden\n />\n </span>\n );\n case \"start-conversation\":\n return (\n <span data-testid={testId} className=\"inline-flex shrink-0\">\n <Plus\n size={PREVIEW_ICON_SIZE}\n strokeWidth={2}\n className={iconClassName}\n aria-hidden\n />\n </span>\n );\n case \"schedule-task\":\n return (\n <span data-testid={testId} className=\"inline-flex shrink-0\">\n <ClockIcon\n width={PREVIEW_ICON_SIZE}\n height={PREVIEW_ICON_SIZE}\n className={iconClassName}\n aria-hidden\n />\n </span>\n );\n case \"customize-agent\":\n return (\n <span\n data-testid={testId}\n className={cn(\"inline-flex shrink-0\", iconClassName)}\n >\n <CustomizeAgentIcon />\n </span>\n );\n case \"connect-mcp\":\n return (\n <span data-testid={testId} className=\"inline-flex shrink-0\">\n <ServerProcessIcon\n width={PREVIEW_ICON_SIZE}\n height={PREVIEW_ICON_SIZE}\n className={iconClassName}\n aria-hidden\n />\n </span>\n );\n case \"join-slack\":\n return (\n <span data-testid={testId} className=\"inline-flex shrink-0\">\n <SlackIcon\n width={PREVIEW_ICON_SIZE}\n height={PREVIEW_ICON_SIZE}\n className={iconClassName}\n aria-hidden\n />\n </span>\n );\n default: {\n const unreachable: never = id;\n return unreachable;\n }\n }\n}\n"],"mappings":"yWAQA,IAAM,EAAoB,GAE1B,SAAS,GAAqB,CAC5B,OACE,EAAA,EAAA,MAAC,MAAD,CACE,MAAM,6BACN,MAAO,EACP,OAAQ,EACR,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,cAAY,gBAVd,EAYE,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,yGAA2G,CAAA,GACnH,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,mBAAqB,CAAA,GAC7B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,aAAe,CAAA,GACvB,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,cAAgB,CAAA,GACxB,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,wGAA0G,CAAA,GAClH,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,cAAgB,CAAA,GACxB,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,oBAAsB,CAAA,GAC9B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,eAAiB,CAAA,GACzB,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,kGAAoG,CAAA,GAC5G,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,iBAAmB,CAAA,GAC3B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,iBAAmB,CAAA,GAC3B,EAAA,EAAA,KAAC,OAAD,CAAM,EAAE,YAAc,CAAA,CACnB,GAET,CAOA,SAAgB,EAAmC,CACjD,KACA,aAC0C,CAC1C,IAAM,EAAgB,EAAA,GAAG,sBAAuB,CAAS,EACnD,EAAS,qCAAqC,IAEpD,OAAQ,EAAR,CACE,IAAK,gBACH,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,cAAa,EAAQ,UAAU,iCACnC,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,EACP,OAAQ,EACR,UAAW,EACX,cAAA,EACD,CAAA,CACG,CAAA,EAEV,IAAK,qBACH,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,cAAa,EAAQ,UAAU,iCACnC,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,KAAM,EACN,YAAa,EACb,UAAW,EACX,cAAA,EACD,CAAA,CACG,CAAA,EAEV,IAAK,gBACH,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,cAAa,EAAQ,UAAU,iCACnC,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,EACP,OAAQ,EACR,UAAW,EACX,cAAA,EACD,CAAA,CACG,CAAA,EAEV,IAAK,kBACH,OACE,EAAA,EAAA,KAAC,OAAD,CACE,cAAa,EACb,UAAW,EAAA,GAAG,uBAAwB,CAAa,YAEnD,EAAA,EAAA,KAAC,EAAD,CAAqB,CAAA,CACjB,CAAA,EAEV,IAAK,cACH,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,cAAa,EAAQ,UAAU,iCACnC,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,EACP,OAAQ,EACR,UAAW,EACX,cAAA,EACD,CAAA,CACG,CAAA,EAEV,IAAK,aACH,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,cAAa,EAAQ,UAAU,iCACnC,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,MAAO,EACP,OAAQ,EACR,UAAW,EACX,cAAA,EACD,CAAA,CACG,CAAA,EAEV,QAEE,OAAO,CAEX,CACF"}

package/dist/components/features/sidebar/sidebar-onboarding-checklist-item-icon.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { SidebarOnboardingChecklistItemId } from "./sidebar-onboarding-checklist.constants";
+interface SidebarOnboardingChecklistItemIconProps {
+    id: SidebarOnboardingChecklistItemId;
+    className?: string;
+}
+export declare function SidebarOnboardingChecklistItemIcon({ id, className, }: SidebarOnboardingChecklistItemIconProps): import("react").JSX.Element;
+export {};

package/dist/components/features/sidebar/sidebar-onboarding-checklist-item-icon.js ADDED Viewed

@@ -0,0 +1,102 @@
+import { Plus as e } from "../../../node_modules/lucide-react/dist/esm/icons/plus.js";
+import { cn as t } from "../../../utils/utils.js";
+import n from "../../../icons/clock.js";
+import r from "../../../icons/slack.js";
+import i from "../../../icons/server-process.js";
+import a from "../../../icons/key.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/features/sidebar/sidebar-onboarding-checklist-item-icon.tsx
+var c = 18;
+function l() {
+	return /* @__PURE__ */ s("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: c,
+		height: c,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ o("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" }),
+			/* @__PURE__ */ o("path", { d: "m7 16.5-4.74-2.85" }),
+			/* @__PURE__ */ o("path", { d: "m7 16.5 5-3" }),
+			/* @__PURE__ */ o("path", { d: "M7 16.5v5.17" }),
+			/* @__PURE__ */ o("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" }),
+			/* @__PURE__ */ o("path", { d: "m17 16.5-5-3" }),
+			/* @__PURE__ */ o("path", { d: "m17 16.5 4.74-2.85" }),
+			/* @__PURE__ */ o("path", { d: "m17 16.5v5.17" }),
+			/* @__PURE__ */ o("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" }),
+			/* @__PURE__ */ o("path", { d: "M12 8 7.26 5.15" }),
+			/* @__PURE__ */ o("path", { d: "m12 8 4.74-2.85" }),
+			/* @__PURE__ */ o("path", { d: "M12 13.5V8" })
+		]
+	});
+}
+function u({ id: s, className: u }) {
+	let d = t("shrink-0 text-white", u), f = `sidebar-onboarding-checklist-icon-${s}`;
+	switch (s) {
+		case "configure-llm": return /* @__PURE__ */ o("span", {
+			"data-testid": f,
+			className: "inline-flex shrink-0",
+			children: /* @__PURE__ */ o(a, {
+				width: c,
+				height: c,
+				className: d,
+				"aria-hidden": !0
+			})
+		});
+		case "start-conversation": return /* @__PURE__ */ o("span", {
+			"data-testid": f,
+			className: "inline-flex shrink-0",
+			children: /* @__PURE__ */ o(e, {
+				size: c,
+				strokeWidth: 2,
+				className: d,
+				"aria-hidden": !0
+			})
+		});
+		case "schedule-task": return /* @__PURE__ */ o("span", {
+			"data-testid": f,
+			className: "inline-flex shrink-0",
+			children: /* @__PURE__ */ o(n, {
+				width: c,
+				height: c,
+				className: d,
+				"aria-hidden": !0
+			})
+		});
+		case "customize-agent": return /* @__PURE__ */ o("span", {
+			"data-testid": f,
+			className: t("inline-flex shrink-0", d),
+			children: /* @__PURE__ */ o(l, {})
+		});
+		case "connect-mcp": return /* @__PURE__ */ o("span", {
+			"data-testid": f,
+			className: "inline-flex shrink-0",
+			children: /* @__PURE__ */ o(i, {
+				width: c,
+				height: c,
+				className: d,
+				"aria-hidden": !0
+			})
+		});
+		case "join-slack": return /* @__PURE__ */ o("span", {
+			"data-testid": f,
+			className: "inline-flex shrink-0",
+			children: /* @__PURE__ */ o(r, {
+				width: c,
+				height: c,
+				className: d,
+				"aria-hidden": !0
+			})
+		});
+		default: return s;
+	}
+}
+//#endregion
+export { u as SidebarOnboardingChecklistItemIcon };
+//# sourceMappingURL=sidebar-onboarding-checklist-item-icon.js.map

package/dist/components/features/sidebar/sidebar-onboarding-checklist-item-icon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sidebar-onboarding-checklist-item-icon.js","names":[],"sources":["../../../../src/components/features/sidebar/sidebar-onboarding-checklist-item-icon.tsx"],"sourcesContent":["import { Plus } from \"lucide-react\";\nimport ClockIcon from \"#/icons/clock.svg?react\";\nimport KeyIcon from \"#/icons/key.svg?react\";\nimport ServerProcessIcon from \"#/icons/server-process.svg?react\";\nimport SlackIcon from \"#/icons/slack.svg?react\";\nimport { cn } from \"#/utils/utils\";\nimport type { SidebarOnboardingChecklistItemId } from \"./sidebar-onboarding-checklist.constants\";\n\nconst PREVIEW_ICON_SIZE = 18;\n\nfunction CustomizeAgentIcon() {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={PREVIEW_ICON_SIZE}\n height={PREVIEW_ICON_SIZE}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <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\" />\n <path d=\"m7 16.5-4.74-2.85\" />\n <path d=\"m7 16.5 5-3\" />\n <path d=\"M7 16.5v5.17\" />\n <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\" />\n <path d=\"m17 16.5-5-3\" />\n <path d=\"m17 16.5 4.74-2.85\" />\n <path d=\"m17 16.5v5.17\" />\n <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\" />\n <path d=\"M12 8 7.26 5.15\" />\n <path d=\"m12 8 4.74-2.85\" />\n <path d=\"M12 13.5V8\" />\n </svg>\n );\n}\n\ninterface SidebarOnboardingChecklistItemIconProps {\n id: SidebarOnboardingChecklistItemId;\n className?: string;\n}\n\nexport function SidebarOnboardingChecklistItemIcon({\n id,\n className,\n}: SidebarOnboardingChecklistItemIconProps) {\n const iconClassName = cn(\"shrink-0 text-white\", className);\n const testId = `sidebar-onboarding-checklist-icon-${id}`;\n\n switch (id) {\n case \"configure-llm\":\n return (\n <span data-testid={testId} className=\"inline-flex shrink-0\">\n <KeyIcon\n width={PREVIEW_ICON_SIZE}\n height={PREVIEW_ICON_SIZE}\n className={iconClassName}\n aria-hidden\n />\n </span>\n );\n case \"start-conversation\":\n return (\n <span data-testid={testId} className=\"inline-flex shrink-0\">\n <Plus\n size={PREVIEW_ICON_SIZE}\n strokeWidth={2}\n className={iconClassName}\n aria-hidden\n />\n </span>\n );\n case \"schedule-task\":\n return (\n <span data-testid={testId} className=\"inline-flex shrink-0\">\n <ClockIcon\n width={PREVIEW_ICON_SIZE}\n height={PREVIEW_ICON_SIZE}\n className={iconClassName}\n aria-hidden\n />\n </span>\n );\n case \"customize-agent\":\n return (\n <span\n data-testid={testId}\n className={cn(\"inline-flex shrink-0\", iconClassName)}\n >\n <CustomizeAgentIcon />\n </span>\n );\n case \"connect-mcp\":\n return (\n <span data-testid={testId} className=\"inline-flex shrink-0\">\n <ServerProcessIcon\n width={PREVIEW_ICON_SIZE}\n height={PREVIEW_ICON_SIZE}\n className={iconClassName}\n aria-hidden\n />\n </span>\n );\n case \"join-slack\":\n return (\n <span data-testid={testId} className=\"inline-flex shrink-0\">\n <SlackIcon\n width={PREVIEW_ICON_SIZE}\n height={PREVIEW_ICON_SIZE}\n className={iconClassName}\n aria-hidden\n />\n </span>\n );\n default: {\n const unreachable: never = id;\n return unreachable;\n }\n }\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,IAAoB;AAE1B,SAAS,IAAqB;CAC5B,OACE,kBAAC,OAAD;EACE,OAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,eAAY;YAVd;GAYE,kBAAC,QAAD,EAAM,GAAE,0GAA2G,CAAA;GACnH,kBAAC,QAAD,EAAM,GAAE,oBAAqB,CAAA;GAC7B,kBAAC,QAAD,EAAM,GAAE,cAAe,CAAA;GACvB,kBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;GACxB,kBAAC,QAAD,EAAM,GAAE,yGAA0G,CAAA;GAClH,kBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;GACxB,kBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;GAC9B,kBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;GACzB,kBAAC,QAAD,EAAM,GAAE,mGAAoG,CAAA;GAC5G,kBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GAC3B,kBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GAC3B,kBAAC,QAAD,EAAM,GAAE,aAAc,CAAA;EACnB;;AAET;AAOA,SAAgB,EAAmC,EACjD,OACA,gBAC0C;CAC1C,IAAM,IAAgB,EAAG,uBAAuB,CAAS,GACnD,IAAS,qCAAqC;CAEpD,QAAQ,GAAR;EACE,KAAK,iBACH,OACE,kBAAC,QAAD;GAAM,eAAa;GAAQ,WAAU;aACnC,kBAAC,GAAD;IACE,OAAO;IACP,QAAQ;IACR,WAAW;IACX,eAAA;GACD,CAAA;EACG,CAAA;EAEV,KAAK,sBACH,OACE,kBAAC,QAAD;GAAM,eAAa;GAAQ,WAAU;aACnC,kBAAC,GAAD;IACE,MAAM;IACN,aAAa;IACb,WAAW;IACX,eAAA;GACD,CAAA;EACG,CAAA;EAEV,KAAK,iBACH,OACE,kBAAC,QAAD;GAAM,eAAa;GAAQ,WAAU;aACnC,kBAAC,GAAD;IACE,OAAO;IACP,QAAQ;IACR,WAAW;IACX,eAAA;GACD,CAAA;EACG,CAAA;EAEV,KAAK,mBACH,OACE,kBAAC,QAAD;GACE,eAAa;GACb,WAAW,EAAG,wBAAwB,CAAa;aAEnD,kBAAC,GAAD,CAAqB,CAAA;EACjB,CAAA;EAEV,KAAK,eACH,OACE,kBAAC,QAAD;GAAM,eAAa;GAAQ,WAAU;aACnC,kBAAC,GAAD;IACE,OAAO;IACP,QAAQ;IACR,WAAW;IACX,eAAA;GACD,CAAA;EACG,CAAA;EAEV,KAAK,cACH,OACE,kBAAC,QAAD;GAAM,eAAa;GAAQ,WAAU;aACnC,kBAAC,GAAD;IACE,OAAO;IACP,QAAQ;IACR,WAAW;IACX,eAAA;GACD,CAAA;EACG,CAAA;EAEV,SAEE,OAAO;CAEX;AACF"}

package/dist/components/features/sidebar/sidebar-onboarding-checklist-item-preview.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ require("../../../_virtual/_rolldown/runtime.cjs");const e=require("../../../node_modules/react-i18next/dist/es/useTranslation.cjs"),t=require("../../../i18n/declaration.cjs"),n=require("../../../node_modules/lucide-react/dist/esm/icons/book-open.cjs"),r=require("../../../utils/utils.cjs"),i=require("../../shared/navigation-link.cjs"),a=require("./sidebar-onboarding-checklist.constants.cjs"),o=require("./sidebar-onboarding-checklist-item-icon.cjs");let s=require("react/jsx-runtime");var c=r.cn(`inline-flex shrink-0 items-center rounded-md bg-white px-2.5 py-1`,`text-xs font-medium text-black transition-colors hover:bg-white/90`);function l({id:r,onActionClick:l,onDocsClick:u}){let{t:d}=e.useTranslation(`openhands`),f=a.SIDEBAR_ONBOARDING_CHECKLIST_I18N_KEYS[r],p=a.SIDEBAR_ONBOARDING_CHECKLIST_DESCRIPTION_I18N_KEYS[r],m=a.SIDEBAR_ONBOARDING_CHECKLIST_ACTION_I18N_KEYS[r],h=a.SIDEBAR_ONBOARDING_CHECKLIST_DOCS_URLS[r],g=a.getSidebarOnboardingChecklistHref(r);return(0,s.jsxs)(`div`,{className:`flex w-[280px] flex-col gap-2.5 p-3`,"data-testid":`sidebar-onboarding-checklist-preview-${r}`,children:[(0,s.jsxs)(`div`,{className:`flex items-start gap-2`,children:[(0,s.jsx)(`span`,{className:`mt-0.5 inline-flex shrink-0 items-center justify-center`,children:(0,s.jsx)(o.SidebarOnboardingChecklistItemIcon,{id:r})}),(0,s.jsx)(`span`,{className:`min-w-0 flex-1 text-sm font-medium text-white`,children:d(f)})]}),(0,s.jsx)(`p`,{className:`text-xs leading-relaxed text-[var(--oh-muted)]`,children:d(p)}),(0,s.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,s.jsxs)(`a`,{href:h,target:`_blank`,rel:`noreferrer`,"data-testid":`sidebar-onboarding-checklist-preview-docs-${r}`,className:`inline-flex min-w-0 items-center gap-2 text-xs text-[var(--oh-muted)] transition-colors hover:text-white hover:underline`,onClick:u,children:[(0,s.jsx)(n.BookOpen,{className:`size-3.5 shrink-0`,"aria-hidden":!0}),d(t.I18nKey.SIDEBAR$ONBOARDING_CHECKLIST_DOCS_LINK)]}),g.kind===`external`?(0,s.jsx)(`a`,{href:g.href,target:`_blank`,rel:`noreferrer`,"data-testid":`sidebar-onboarding-checklist-preview-action-${r}`,className:c,onClick:l,children:d(m)}):(0,s.jsx)(i.NavigationLink,{to:g.href,"data-testid":`sidebar-onboarding-checklist-preview-action-${r}`,className:c,onClick:l,children:d(m)})]})]})}exports.SidebarOnboardingChecklistItemPreview=l;
2	+ //# sourceMappingURL=sidebar-onboarding-checklist-item-preview.cjs.map

package/dist/components/features/sidebar/sidebar-onboarding-checklist-item-preview.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sidebar-onboarding-checklist-item-preview.cjs","names":[],"sources":["../../../../src/components/features/sidebar/sidebar-onboarding-checklist-item-preview.tsx"],"sourcesContent":["import { BookOpen } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\nimport { NavigationLink } from \"#/components/shared/navigation-link\";\nimport { I18nKey } from \"#/i18n/declaration\";\nimport { cn } from \"#/utils/utils\";\nimport {\n getSidebarOnboardingChecklistHref,\n SIDEBAR_ONBOARDING_CHECKLIST_ACTION_I18N_KEYS,\n SIDEBAR_ONBOARDING_CHECKLIST_DESCRIPTION_I18N_KEYS,\n SIDEBAR_ONBOARDING_CHECKLIST_DOCS_URLS,\n SIDEBAR_ONBOARDING_CHECKLIST_I18N_KEYS,\n type SidebarOnboardingChecklistItemId,\n} from \"./sidebar-onboarding-checklist.constants\";\nimport { SidebarOnboardingChecklistItemIcon } from \"./sidebar-onboarding-checklist-item-icon\";\n\nconst PREVIEW_ACTION_BUTTON_CLASS = cn(\n \"inline-flex shrink-0 items-center rounded-md bg-white px-2.5 py-1\",\n \"text-xs font-medium text-black transition-colors hover:bg-white/90\",\n);\n\ninterface SidebarOnboardingChecklistItemPreviewProps {\n id: SidebarOnboardingChecklistItemId;\n onActionClick?: () => void;\n onDocsClick?: () => void;\n}\n\nexport function SidebarOnboardingChecklistItemPreview({\n id,\n onActionClick,\n onDocsClick,\n}: SidebarOnboardingChecklistItemPreviewProps) {\n const { t } = useTranslation(\"openhands\");\n const titleKey = SIDEBAR_ONBOARDING_CHECKLIST_I18N_KEYS[id];\n const descriptionKey = SIDEBAR_ONBOARDING_CHECKLIST_DESCRIPTION_I18N_KEYS[id];\n const actionKey = SIDEBAR_ONBOARDING_CHECKLIST_ACTION_I18N_KEYS[id];\n const docsUrl = SIDEBAR_ONBOARDING_CHECKLIST_DOCS_URLS[id];\n const href = getSidebarOnboardingChecklistHref(id);\n\n return (\n <div\n className=\"flex w-[280px] flex-col gap-2.5 p-3\"\n data-testid={`sidebar-onboarding-checklist-preview-${id}`}\n >\n <div className=\"flex items-start gap-2\">\n <span className=\"mt-0.5 inline-flex shrink-0 items-center justify-center\">\n <SidebarOnboardingChecklistItemIcon id={id} />\n </span>\n <span className=\"min-w-0 flex-1 text-sm font-medium text-white\">\n {t(titleKey)}\n </span>\n </div>\n <p className=\"text-xs leading-relaxed text-[var(--oh-muted)]\">\n {t(descriptionKey)}\n </p>\n <div className=\"flex items-center justify-between gap-3\">\n <a\n href={docsUrl}\n target=\"_blank\"\n rel=\"noreferrer\"\n data-testid={`sidebar-onboarding-checklist-preview-docs-${id}`}\n className=\"inline-flex min-w-0 items-center gap-2 text-xs text-[var(--oh-muted)] transition-colors hover:text-white hover:underline\"\n onClick={onDocsClick}\n >\n <BookOpen className=\"size-3.5 shrink-0\" aria-hidden />\n {t(I18nKey.SIDEBAR$ONBOARDING_CHECKLIST_DOCS_LINK)}\n </a>\n {href.kind === \"external\" ? (\n <a\n href={href.href}\n target=\"_blank\"\n rel=\"noreferrer\"\n data-testid={`sidebar-onboarding-checklist-preview-action-${id}`}\n className={PREVIEW_ACTION_BUTTON_CLASS}\n onClick={onActionClick}\n >\n {t(actionKey)}\n </a>\n ) : (\n <NavigationLink\n to={href.href}\n data-testid={`sidebar-onboarding-checklist-preview-action-${id}`}\n className={PREVIEW_ACTION_BUTTON_CLASS}\n onClick={onActionClick}\n >\n {t(actionKey)}\n </NavigationLink>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"weAeA,IAAM,EAA8B,EAAA,GAClC,oEACA,oEACF,EAQA,SAAgB,EAAsC,CACpD,KACA,gBACA,eAC6C,CAC7C,GAAM,CAAE,KAAM,EAAA,eAAe,WAAW,EAClC,EAAW,EAAA,uCAAuC,GAClD,EAAiB,EAAA,mDAAmD,GACpE,EAAY,EAAA,8CAA8C,GAC1D,EAAU,EAAA,uCAAuC,GACjD,EAAO,EAAA,kCAAkC,CAAE,EAEjD,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAU,sCACV,cAAa,wCAAwC,aAFvD,EAIE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,kCAAf,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oEACd,EAAA,EAAA,KAAC,EAAA,mCAAD,CAAwC,IAAK,CAAA,CACzC,CAAA,GACN,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,yDACb,EAAE,CAAQ,CACP,CAAA,CACH,KACL,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,0DACV,EAAE,CAAc,CAChB,CAAA,GACH,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,mDAAf,EACE,EAAA,EAAA,MAAC,IAAD,CACE,KAAM,EACN,OAAO,SACP,IAAI,aACJ,cAAa,6CAA6C,IAC1D,UAAU,2HACV,QAAS,WANX,EAQE,EAAA,EAAA,KAAC,EAAA,SAAD,CAAU,UAAU,oBAAoB,cAAA,EAAa,CAAA,EACpD,EAAE,EAAA,QAAQ,sCAAsC,CAChD,IACF,EAAK,OAAS,YACb,EAAA,EAAA,KAAC,IAAD,CACE,KAAM,EAAK,KACX,OAAO,SACP,IAAI,aACJ,cAAa,+CAA+C,IAC5D,UAAW,EACX,QAAS,WAER,EAAE,CAAS,CACX,CAAA,GAEH,EAAA,EAAA,KAAC,EAAA,eAAD,CACE,GAAI,EAAK,KACT,cAAa,+CAA+C,IAC5D,UAAW,EACX,QAAS,WAER,EAAE,CAAS,CACE,CAAA,CAEf,GACF,GAET"}

package/dist/components/features/sidebar/sidebar-onboarding-checklist-item-preview.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { type SidebarOnboardingChecklistItemId } from "./sidebar-onboarding-checklist.constants";
+interface SidebarOnboardingChecklistItemPreviewProps {
+    id: SidebarOnboardingChecklistItemId;
+    onActionClick?: () => void;
+    onDocsClick?: () => void;
+}
+export declare function SidebarOnboardingChecklistItemPreview({ id, onActionClick, onDocsClick, }: SidebarOnboardingChecklistItemPreviewProps): import("react").JSX.Element;
+export {};