🐛 fix(system-settings): resolve save detection and number input NaN issues

System settings forms that used flat dotted API keys (e.g. `performance_setting.monitor_cpu_threshold`) with React Hook Form were broken: RHF stores dotted paths as nested objects on update, while dirty checks and submit comparisons still read flat keys from defaults. Users could edit values but always saw "No changes to save". Refactor affected sections to use nested Zod schemas and default values for RHF, with explicit helpers to convert between nested form state and flat API keys. Track a normalized baseline in refs for accurate change detection and post-save resets. Add `safeNumberFieldProps` to prevent native `<input type="number">` from writing NaN into form state when cleared. NaN caused Zod validation to fail silently and made the save button appear unresponsive. The helper ignores non-finite updates so controlled inputs snap back to the last valid value, matching legacy Semi InputNumber behavior. Sections refactored for dotted-key handling: - maintenance/performance-section - models/grok-settings-card - auth/passkey-section - auth/oauth-section - auth/section-registry (pass attachment_preference raw; normalize in section) Sections migrated to safeNumberFieldProps: - maintenance/performance-section - models/grok-settings-card - integrations/monitoring-settings-section - integrations/payment-settings-section - integrations/creem-product-dialog - general/pricing-section (USD exchange rate) - general/system-behavior-section - content/dashboard-section Optional numeric fields (e.g. custom currency exchange rate) keep their existing empty-to-undefined semantics and are intentionally unchanged.
2026-05-26 15:43:56 +08:00
parent 5bc4c74813
commit 65f8afe922
16 changed files with 794 additions and 391 deletions
@@ -79,7 +79,6 @@ const sizeMap = {
  lg: 'h-6 gap-1.5 px-2 text-xs leading-none',
 } as const

-
 export interface StatusBadgeProps extends Omit<
  React.HTMLAttributes<HTMLSpanElement>,
  'children'
@@ -638,14 +638,12 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
                <Tooltip>
                  <TooltipTrigger
                    render={
-                      <span className='border-border bg-muted text-primary inline-flex h-5 w-5 items-center justify-center rounded-md border shrink-0' />
+                      <span className='border-border bg-muted text-primary inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border' />
                    }
                  >
                    <MultiKeyModeIcon className='h-3 w-3' />
                  </TooltipTrigger>
-                  <TooltipContent side='top'>
-                    {multiKeyTooltip}
-                  </TooltipContent>
+                  <TooltipContent side='top'>{multiKeyTooltip}</TooltipContent>
                </Tooltip>
              </TooltipProvider>
            )}
@@ -654,7 +652,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
              size='sm'
              copyable={false}
              showDot={false}
-              className='pl-1 gap-1'
+              className='gap-1 pl-1'
            >
              {icon}
              <span className='truncate'>{typeName}</span>
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.

 For commercial licensing, please contact support@quantumnous.com
 */
-import { useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import * as z from 'zod'
 import axios from 'axios'
 import { useForm } from 'react-hook-form'
@@ -46,129 +46,197 @@ import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useUpdateOption } from '../hooks/use-update-option'

+/**
+ * react-hook-form 7 treats dotted `name` strings as nested paths. To keep
+ * form state, schema validation, and dirty tracking aligned, the
+ * `discord.*` and `oidc.*` fields are modeled as nested objects here and
+ * flattened back to dotted server keys only when persisting.
+ */
 const oauthSchema = z.object({
  GitHubOAuthEnabled: z.boolean(),
-  GitHubClientId: z.string().optional(),
-  GitHubClientSecret: z.string().optional(),
-  'discord.enabled': z.boolean(),
-  'discord.client_id': z.string().optional(),
-  'discord.client_secret': z.string().optional(),
-  'oidc.enabled': z.boolean(),
-  'oidc.client_id': z.string().optional(),
-  'oidc.client_secret': z.string().optional(),
-  'oidc.well_known': z.string().optional(),
-  'oidc.authorization_endpoint': z.string().optional(),
-  'oidc.token_endpoint': z.string().optional(),
-  'oidc.user_info_endpoint': z.string().optional(),
+  GitHubClientId: z.string(),
+  GitHubClientSecret: z.string(),
+  discord: z.object({
+    enabled: z.boolean(),
+    client_id: z.string(),
+    client_secret: z.string(),
+  }),
+  oidc: z.object({
+    enabled: z.boolean(),
+    client_id: z.string(),
+    client_secret: z.string(),
+    well_known: z.string(),
+    authorization_endpoint: z.string(),
+    token_endpoint: z.string(),
+    user_info_endpoint: z.string(),
+  }),
  TelegramOAuthEnabled: z.boolean(),
-  TelegramBotToken: z.string().optional(),
-  TelegramBotName: z.string().optional(),
+  TelegramBotToken: z.string(),
+  TelegramBotName: z.string(),
  LinuxDOOAuthEnabled: z.boolean(),
-  LinuxDOClientId: z.string().optional(),
-  LinuxDOClientSecret: z.string().optional(),
-  LinuxDOMinimumTrustLevel: z.string().optional(),
+  LinuxDOClientId: z.string(),
+  LinuxDOClientSecret: z.string(),
+  LinuxDOMinimumTrustLevel: z.string(),
  WeChatAuthEnabled: z.boolean(),
-  WeChatServerAddress: z.string().optional(),
-  WeChatServerToken: z.string().optional(),
-  WeChatAccountQRCodeImageURL: z.string().optional(),
+  WeChatServerAddress: z.string(),
+  WeChatServerToken: z.string(),
+  WeChatAccountQRCodeImageURL: z.string(),
 })

+type OAuthFormValues = z.infer<typeof oauthSchema>
+
+type FlatOAuthDefaults = {
+  GitHubOAuthEnabled: boolean
+  GitHubClientId: string
+  GitHubClientSecret: string
+  'discord.enabled': boolean
+  'discord.client_id': string
+  'discord.client_secret': string
+  'oidc.enabled': boolean
+  'oidc.client_id': string
+  'oidc.client_secret': string
+  'oidc.well_known': string
+  'oidc.authorization_endpoint': string
+  'oidc.token_endpoint': string
+  'oidc.user_info_endpoint': string
+  TelegramOAuthEnabled: boolean
+  TelegramBotToken: string
+  TelegramBotName: string
+  LinuxDOOAuthEnabled: boolean
+  LinuxDOClientId: string
+  LinuxDOClientSecret: string
+  LinuxDOMinimumTrustLevel: string
+  WeChatAuthEnabled: boolean
+  WeChatServerAddress: string
+  WeChatServerToken: string
+  WeChatAccountQRCodeImageURL: string
+}
+
 const oauthTabContentClassName =
  'grid min-w-0 gap-x-5 gap-y-6 lg:grid-cols-2 [&>[data-slot=form-item]]:min-w-0 lg:[&>[data-slot=form-item]:has([data-slot=switch])]:col-span-2'

-type OAuthFormValues = z.infer<typeof oauthSchema>
+const buildFormDefaults = (defaults: FlatOAuthDefaults): OAuthFormValues => ({
+  GitHubOAuthEnabled: defaults.GitHubOAuthEnabled,
+  GitHubClientId: defaults.GitHubClientId ?? '',
+  GitHubClientSecret: defaults.GitHubClientSecret ?? '',
+  discord: {
+    enabled: defaults['discord.enabled'],
+    client_id: defaults['discord.client_id'] ?? '',
+    client_secret: defaults['discord.client_secret'] ?? '',
+  },
+  oidc: {
+    enabled: defaults['oidc.enabled'],
+    client_id: defaults['oidc.client_id'] ?? '',
+    client_secret: defaults['oidc.client_secret'] ?? '',
+    well_known: defaults['oidc.well_known'] ?? '',
+    authorization_endpoint: defaults['oidc.authorization_endpoint'] ?? '',
+    token_endpoint: defaults['oidc.token_endpoint'] ?? '',
+    user_info_endpoint: defaults['oidc.user_info_endpoint'] ?? '',
+  },
+  TelegramOAuthEnabled: defaults.TelegramOAuthEnabled,
+  TelegramBotToken: defaults.TelegramBotToken ?? '',
+  TelegramBotName: defaults.TelegramBotName ?? '',
+  LinuxDOOAuthEnabled: defaults.LinuxDOOAuthEnabled,
+  LinuxDOClientId: defaults.LinuxDOClientId ?? '',
+  LinuxDOClientSecret: defaults.LinuxDOClientSecret ?? '',
+  LinuxDOMinimumTrustLevel: defaults.LinuxDOMinimumTrustLevel ?? '',
+  WeChatAuthEnabled: defaults.WeChatAuthEnabled,
+  WeChatServerAddress: defaults.WeChatServerAddress ?? '',
+  WeChatServerToken: defaults.WeChatServerToken ?? '',
+  WeChatAccountQRCodeImageURL: defaults.WeChatAccountQRCodeImageURL ?? '',
+})
+
+const normalizeFormValues = (values: OAuthFormValues): FlatOAuthDefaults => ({
+  GitHubOAuthEnabled: values.GitHubOAuthEnabled,
+  GitHubClientId: values.GitHubClientId,
+  GitHubClientSecret: values.GitHubClientSecret,
+  'discord.enabled': values.discord.enabled,
+  'discord.client_id': values.discord.client_id,
+  'discord.client_secret': values.discord.client_secret,
+  'oidc.enabled': values.oidc.enabled,
+  'oidc.client_id': values.oidc.client_id,
+  'oidc.client_secret': values.oidc.client_secret,
+  'oidc.well_known': values.oidc.well_known,
+  'oidc.authorization_endpoint': values.oidc.authorization_endpoint,
+  'oidc.token_endpoint': values.oidc.token_endpoint,
+  'oidc.user_info_endpoint': values.oidc.user_info_endpoint,
+  TelegramOAuthEnabled: values.TelegramOAuthEnabled,
+  TelegramBotToken: values.TelegramBotToken,
+  TelegramBotName: values.TelegramBotName,
+  LinuxDOOAuthEnabled: values.LinuxDOOAuthEnabled,
+  LinuxDOClientId: values.LinuxDOClientId,
+  LinuxDOClientSecret: values.LinuxDOClientSecret,
+  LinuxDOMinimumTrustLevel: values.LinuxDOMinimumTrustLevel,
+  WeChatAuthEnabled: values.WeChatAuthEnabled,
+  WeChatServerAddress: values.WeChatServerAddress,
+  WeChatServerToken: values.WeChatServerToken,
+  WeChatAccountQRCodeImageURL: values.WeChatAccountQRCodeImageURL,
+})

 type OAuthSectionProps = {
-  defaultValues: OAuthFormValues
+  defaultValues: FlatOAuthDefaults
 }

-export function OAuthSection({ defaultValues }: OAuthSectionProps) {
+export function OAuthSection(props: OAuthSectionProps) {
  const { t } = useTranslation()
  const updateOption = useUpdateOption()
  const [activeTab, setActiveTab] = useState('github')

-  // Normalize empty strings for optional fields (only at mount)
-  const normalizedDefaults: OAuthFormValues = {
-    ...defaultValues,
-    GitHubClientId: defaultValues.GitHubClientId ?? '',
-    GitHubClientSecret: defaultValues.GitHubClientSecret ?? '',
-    'discord.client_id': defaultValues['discord.client_id'] ?? '',
-    'discord.client_secret': defaultValues['discord.client_secret'] ?? '',
-    'oidc.client_id': defaultValues['oidc.client_id'] ?? '',
-    'oidc.client_secret': defaultValues['oidc.client_secret'] ?? '',
-    'oidc.well_known': defaultValues['oidc.well_known'] ?? '',
-    'oidc.authorization_endpoint':
-      defaultValues['oidc.authorization_endpoint'] ?? '',
-    'oidc.token_endpoint': defaultValues['oidc.token_endpoint'] ?? '',
-    'oidc.user_info_endpoint': defaultValues['oidc.user_info_endpoint'] ?? '',
-    TelegramBotToken: defaultValues.TelegramBotToken ?? '',
-    TelegramBotName: defaultValues.TelegramBotName ?? '',
-    LinuxDOClientId: defaultValues.LinuxDOClientId ?? '',
-    LinuxDOClientSecret: defaultValues.LinuxDOClientSecret ?? '',
-    LinuxDOMinimumTrustLevel: defaultValues.LinuxDOMinimumTrustLevel ?? '',
-    WeChatServerAddress: defaultValues.WeChatServerAddress ?? '',
-    WeChatServerToken: defaultValues.WeChatServerToken ?? '',
-    WeChatAccountQRCodeImageURL:
-      defaultValues.WeChatAccountQRCodeImageURL ?? '',
-  }
+  const formDefaults = useMemo(
+    () => buildFormDefaults(props.defaultValues),
+    [props.defaultValues]
+  )

  const form = useForm<OAuthFormValues>({
    resolver: zodResolver(oauthSchema),
-    defaultValues: normalizedDefaults,
+    defaultValues: formDefaults,
  })

-  const onSubmit = async () => {
-    // Get raw form values directly
-    // React Hook Form treats "oidc.xxx" as nested paths, so we need to flatten
-    const rawData = form.getValues() as Record<string, unknown>
-
-    // Flatten nested oidc object back to dot notation keys
-    const flattenedData: Record<string, unknown> = {}
-
-    Object.entries(rawData).forEach(([key, value]) => {
-      if (
-        (key === 'oidc' || key === 'discord') &&
-        typeof value === 'object' &&
-        value !== null
-      ) {
-        // React Hook Form auto-nested these fields, flatten them back
-        Object.entries(value as Record<string, unknown>).forEach(
-          ([nestedKey, nestedValue]) => {
-            flattenedData[`${key}.${nestedKey}`] = nestedValue
-          }
+  const baselineRef = useRef<FlatOAuthDefaults>(props.defaultValues)
+  const baselineSerializedRef = useRef<string>(
+    JSON.stringify(props.defaultValues)
  )
-      } else {
-        flattenedData[key] = value
-      }
-    })

-    const finalData = flattenedData as OAuthFormValues
+  useEffect(() => {
+    const serialized = JSON.stringify(props.defaultValues)
+    if (serialized === baselineSerializedRef.current) return
+    baselineRef.current = props.defaultValues
+    baselineSerializedRef.current = serialized
+    form.reset(buildFormDefaults(props.defaultValues))
+  }, [props.defaultValues, form])

-    if (finalData['oidc.well_known'] && finalData['oidc.well_known'] !== '') {
+  const onSubmit = async (values: OAuthFormValues) => {
+    let finalValues = values
+
+    if (values.oidc.well_known && values.oidc.well_known.trim() !== '') {
+      const wellKnown = values.oidc.well_known.trim()
      if (
-        !finalData['oidc.well_known'].startsWith('http://') &&
-        !finalData['oidc.well_known'].startsWith('https://')
+        !wellKnown.startsWith('http://') &&
+        !wellKnown.startsWith('https://')
      ) {
        toast.error(t('Well-Known URL must start with http:// or https://'))
        return
      }

      try {
-        const res = await axios.create().get(finalData['oidc.well_known'])
+        const res = await axios.create().get(wellKnown)
        const authEndpoint = res.data['authorization_endpoint'] || ''
        const tokenEndpoint = res.data['token_endpoint'] || ''
        const userInfoEndpoint = res.data['userinfo_endpoint'] || ''

-        finalData['oidc.authorization_endpoint'] = authEndpoint
-        finalData['oidc.token_endpoint'] = tokenEndpoint
-        finalData['oidc.user_info_endpoint'] = userInfoEndpoint
+        finalValues = {
+          ...values,
+          oidc: {
+            ...values.oidc,
+            authorization_endpoint: authEndpoint,
+            token_endpoint: tokenEndpoint,
+            user_info_endpoint: userInfoEndpoint,
+          },
+        }

-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        form.setValue('oidc.authorization_endpoint' as any, authEndpoint)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        form.setValue('oidc.token_endpoint' as any, tokenEndpoint)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        form.setValue('oidc.user_info_endpoint' as any, userInfoEndpoint)
+        form.setValue('oidc.authorization_endpoint', authEndpoint)
+        form.setValue('oidc.token_endpoint', tokenEndpoint)
+        form.setValue('oidc.user_info_endpoint', userInfoEndpoint)

        toast.success(t('OIDC configuration fetched successfully'))
      } catch (err) {
@@ -183,73 +251,30 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
      }
    }

-    // Find changed fields by comparing to initial values
-    const updates = Object.entries(finalData).filter(
-      ([key, value]) =>
-        value !== normalizedDefaults[key as keyof OAuthFormValues]
-    )
+    const normalized = normalizeFormValues(finalValues)
+    const changedKeys = (
+      Object.keys(normalized) as Array<keyof FlatOAuthDefaults>
+    ).filter((key) => normalized[key] !== baselineRef.current[key])

-    if (updates.length === 0) {
+    if (changedKeys.length === 0) {
      toast.info(t('No changes to save'))
      return
    }

-    // Save all changed fields
-    for (const [key, value] of updates) {
-      await updateOption.mutateAsync({ key, value: value ?? '' })
+    for (const key of changedKeys) {
+      await updateOption.mutateAsync({
+        key,
+        value: normalized[key],
+      })
    }

-    // Reset form dirty state after successful save
-    form.reset(finalData)
+    baselineRef.current = normalized
+    baselineSerializedRef.current = JSON.stringify(normalized)
+    form.reset(buildFormDefaults(normalized))
  }

  const handleReset = () => {
-    // React Hook Form auto-nests 'oidc.xxx' fields into { oidc: { xxx: value } }
-    // So we need to pass the same structure when resetting
-    const currentValues = form.getValues() as Record<string, unknown>
-
-    // Create reset values matching RHF's internal structure
-    const resetValues = { ...currentValues }
-
-    // Update nested oidc fields
-    if (resetValues.oidc && typeof resetValues.oidc === 'object') {
-      Object.keys(resetValues.oidc as Record<string, unknown>).forEach(
-        (key) => {
-          const flatKey = `oidc.${key}` as keyof typeof normalizedDefaults
-          if (flatKey in normalizedDefaults) {
-            ;(resetValues.oidc as Record<string, unknown>)[key] =
-              normalizedDefaults[flatKey]
-          }
-        }
-      )
-    }
-
-    // Update nested discord fields
-    if (resetValues.discord && typeof resetValues.discord === 'object') {
-      Object.keys(resetValues.discord as Record<string, unknown>).forEach(
-        (key) => {
-          const flatKey = `discord.${key}` as keyof typeof normalizedDefaults
-          if (flatKey in normalizedDefaults) {
-            ;(resetValues.discord as Record<string, unknown>)[key] =
-              normalizedDefaults[flatKey]
-          }
-        }
-      )
-    }
-
-    // Update top-level fields
-    Object.keys(resetValues).forEach((key) => {
-      if (key !== 'oidc' && key in normalizedDefaults) {
-        resetValues[key] =
-          normalizedDefaults[key as keyof typeof normalizedDefaults]
-      }
-    })
-
-    form.reset(resetValues, {
-      keepDirty: false,
-      keepDirtyValues: false,
-      keepErrors: false,
-    })
+    form.reset(buildFormDefaults(baselineRef.current))
    toast.success(t('Form reset to saved values'))
  }

@@ -310,7 +335,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                        <Input
                          placeholder={t('Your GitHub OAuth Client ID')}
                          autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -329,7 +360,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                          type='password'
                          placeholder={t('Your GitHub OAuth Client Secret')}
                          autoComplete='new-password'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -362,8 +399,7 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {

                <FormField
                  control={form.control}
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  name={'discord.client_id' as any}
+                  name='discord.client_id'
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t('Client ID')}</FormLabel>
@@ -371,7 +407,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                        <Input
                          placeholder={t('Your Discord OAuth Client ID')}
                          autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -390,7 +432,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                          type='password'
                          placeholder={t('Your Discord OAuth Client Secret')}
                          autoComplete='new-password'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -423,8 +471,7 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {

                <FormField
                  control={form.control}
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  name={'oidc.client_id' as any}
+                  name='oidc.client_id'
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t('Client ID')}</FormLabel>
@@ -432,7 +479,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                        <Input
                          placeholder={t('OIDC Client ID')}
                          autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -451,7 +504,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                          type='password'
                          placeholder={t('OIDC Client Secret')}
                          autoComplete='new-password'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -471,7 +530,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                            'https://provider.com/.well-known/openid-configuration'
                          )}
                          autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormDescription>
@@ -494,7 +559,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                        <Input
                          placeholder={t('Override auto-discovered endpoint')}
                          autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -512,7 +583,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                        <Input
                          placeholder={t('Override auto-discovered endpoint')}
                          autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -532,7 +609,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                        <Input
                          placeholder={t('Override auto-discovered endpoint')}
                          autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -577,7 +660,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                          type='password'
                          placeholder={t('Your Telegram Bot Token')}
                          autoComplete='new-password'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -595,7 +684,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                        <Input
                          placeholder={t('Your Bot Name')}
                          autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -636,7 +731,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                        <Input
                          placeholder={t('LinuxDO Client ID')}
                          autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -655,7 +756,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                          type='password'
                          placeholder={t('LinuxDO Client Secret')}
                          autoComplete='new-password'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -670,7 +777,17 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                    <FormItem>
                      <FormLabel>{t('Minimum Trust Level')}</FormLabel>
                      <FormControl>
-                        <Input placeholder='0' autoComplete='off' {...field} />
+                        <Input
+                          placeholder='0'
+                          autoComplete='off'
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
+                        />
                      </FormControl>
                      <FormDescription>
                        {t('Minimum LinuxDO trust level required')}
@@ -713,7 +830,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                        <Input
                          placeholder={t('https://wechat-server.example.com')}
                          autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -732,7 +855,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                          type='password'
                          placeholder={t('Server Token')}
                          autoComplete='new-password'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -750,7 +879,13 @@ export function OAuthSection({ defaultValues }: OAuthSectionProps) {
                        <Input
                          placeholder={t('https://example.com/qr-code.png')}
                          autoComplete='off'
-                          {...field}
+                          value={field.value ?? ''}
+                          onChange={(event) =>
+                            field.onChange(event.target.value)
+                          }
+                          name={field.name}
+                          onBlur={field.onBlur}
+                          ref={field.ref}
                        />
                      </FormControl>
                      <FormMessage />
@@ -16,11 +16,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.

 For commercial licensing, please contact support@quantumnous.com
 */
-import { useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 import {
  Form,
  FormControl,
@@ -48,116 +49,139 @@ import {
 } from '../components/settings-form-layout'
 import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
-import { useResetForm } from '../hooks/use-reset-form'
 import { useUpdateOption } from '../hooks/use-update-option'

+type AttachmentPreference = '' | 'platform' | 'cross-platform'
+type AttachmentSelectValue = 'none' | 'platform' | 'cross-platform'
+
+/**
+ * Use a nested object so the dotted FormField `name` props line up with
+ * react-hook-form's path semantics. Flat keys with dots cause the form state
+ * to silently diverge from what zod validates on submit.
+ */
 const passkeySchema = z.object({
-  'passkey.enabled': z.boolean(),
-  'passkey.rp_display_name': z.string(),
-  'passkey.rp_id': z.string(),
-  'passkey.origins': z.string(),
-  'passkey.allow_insecure_origin': z.boolean(),
-  'passkey.user_verification': z.enum(['required', 'preferred', 'discouraged']),
-  'passkey.attachment_preference': z.enum([
-    'none',
-    'platform',
-    'cross-platform',
-  ]),
+  passkey: z.object({
+    enabled: z.boolean(),
+    rp_display_name: z.string(),
+    rp_id: z.string(),
+    origins: z.string(),
+    allow_insecure_origin: z.boolean(),
+    user_verification: z.enum(['required', 'preferred', 'discouraged']),
+    attachment_preference: z.enum(['none', 'platform', 'cross-platform']),
+  }),
 })

-type PasskeyFormValues = z.infer<typeof passkeySchema>
+type PasskeyFormInput = z.input<typeof passkeySchema>
+type PasskeyFormValues = z.output<typeof passkeySchema>

-interface PasskeySectionProps {
-  defaultValues: PasskeyFormValues
+type FlatPasskeyDefaults = {
+  'passkey.enabled': boolean
+  'passkey.rp_display_name': string
+  'passkey.rp_id': string
+  'passkey.origins': string
+  'passkey.allow_insecure_origin': boolean
+  'passkey.user_verification': 'required' | 'preferred' | 'discouraged'
+  'passkey.attachment_preference': AttachmentPreference
 }

-export function PasskeySection({ defaultValues }: PasskeySectionProps) {
+const toAttachmentSelectValue = (
+  value: AttachmentPreference
+): AttachmentSelectValue => (value === '' ? 'none' : value)
+
+const fromAttachmentSelectValue = (
+  value: AttachmentSelectValue
+): AttachmentPreference => (value === 'none' ? '' : value)
+
+const buildFormDefaults = (
+  defaults: FlatPasskeyDefaults
+): PasskeyFormInput => ({
+  passkey: {
+    enabled: defaults['passkey.enabled'],
+    rp_display_name: defaults['passkey.rp_display_name'] ?? '',
+    rp_id: defaults['passkey.rp_id'] ?? '',
+    origins: (defaults['passkey.origins'] ?? '')
+      .split(',')
+      .map((origin) => origin.trim())
+      .filter(Boolean)
+      .join('\n'),
+    allow_insecure_origin: defaults['passkey.allow_insecure_origin'],
+    user_verification: defaults['passkey.user_verification'],
+    attachment_preference: toAttachmentSelectValue(
+      defaults['passkey.attachment_preference']
+    ),
+  },
+})
+
+const normalizeFormValues = (
+  values: PasskeyFormValues
+): FlatPasskeyDefaults => ({
+  'passkey.enabled': values.passkey.enabled,
+  'passkey.rp_display_name': values.passkey.rp_display_name,
+  'passkey.rp_id': values.passkey.rp_id,
+  'passkey.origins': values.passkey.origins
+    .split('\n')
+    .map((origin) => origin.trim())
+    .filter(Boolean)
+    .join(','),
+  'passkey.allow_insecure_origin': values.passkey.allow_insecure_origin,
+  'passkey.user_verification': values.passkey.user_verification,
+  'passkey.attachment_preference': fromAttachmentSelectValue(
+    values.passkey.attachment_preference
+  ),
+})
+
+interface PasskeySectionProps {
+  defaultValues: FlatPasskeyDefaults
+}
+
+export function PasskeySection(props: PasskeySectionProps) {
  const { t } = useTranslation()
  const updateOption = useUpdateOption()

-  const formDefaults = useMemo<PasskeyFormValues>(
-    () => ({
-      ...defaultValues,
-      'passkey.origins': (defaultValues['passkey.origins'] as string)
-        .split(',')
-        .map((origin: string) => origin.trim())
-        .filter(Boolean)
-        .join('\n'),
-      'passkey.attachment_preference':
-        (defaultValues['passkey.attachment_preference'] as string) === ''
-          ? 'none'
-          : (defaultValues['passkey.attachment_preference'] as
-              | 'platform'
-              | 'cross-platform'),
-    }),
-    [defaultValues]
+  const formDefaults = useMemo(
+    () => buildFormDefaults(props.defaultValues),
+    [props.defaultValues]
  )

-  const form = useForm<PasskeyFormValues>({
+  const form = useForm<PasskeyFormInput, unknown, PasskeyFormValues>({
    resolver: zodResolver(passkeySchema),
    defaultValues: formDefaults,
  })

-  useResetForm(form, formDefaults)
-
-  const onSubmit = async () => {
-    const rawData = form.getValues() as Record<string, unknown>
-    const flattenedEntries: Array<
-      [keyof PasskeyFormValues, PasskeyFormValues[keyof PasskeyFormValues]]
-    > = []
-
-    Object.entries(rawData).forEach(([key, value]) => {
-      if (key === 'passkey' && value && typeof value === 'object') {
-        Object.entries(value as Record<string, unknown>).forEach(
-          ([nestedKey, nestedValue]) => {
-            flattenedEntries.push([
-              `passkey.${nestedKey}` as keyof PasskeyFormValues,
-              nestedValue as PasskeyFormValues[keyof PasskeyFormValues],
-            ])
-          }
+  const baselineRef = useRef<FlatPasskeyDefaults>(props.defaultValues)
+  const baselineSerializedRef = useRef<string>(
+    JSON.stringify(props.defaultValues)
  )
-      } else {
-        flattenedEntries.push([
-          key as keyof PasskeyFormValues,
-          value as PasskeyFormValues[keyof PasskeyFormValues],
-        ])
+
+  useEffect(() => {
+    const serialized = JSON.stringify(props.defaultValues)
+    if (serialized === baselineSerializedRef.current) return
+    baselineRef.current = props.defaultValues
+    baselineSerializedRef.current = serialized
+    form.reset(buildFormDefaults(props.defaultValues))
+  }, [props.defaultValues, form])
+
+  const onSubmit = async (values: PasskeyFormValues) => {
+    const normalized = normalizeFormValues(values)
+    const changedKeys = (
+      Object.keys(normalized) as Array<keyof FlatPasskeyDefaults>
+    ).filter((key) => normalized[key] !== baselineRef.current[key])
+
+    if (changedKeys.length === 0) {
+      toast.info(t('No changes to save'))
+      return
    }
+
+    for (const key of changedKeys) {
+      await updateOption.mutateAsync({
+        key,
+        value: normalized[key],
      })
+    }

-    const data = Object.fromEntries(flattenedEntries) as PasskeyFormValues
-    const updates: Array<{ key: string; value: string | boolean }> = []
-
-    Object.entries(data).forEach(([key, value]) => {
-      if (key === 'passkey.origins') {
-        const processed = (value as string)
-          .split('\n')
-          .map((origin: string) => origin.trim())
-          .filter(Boolean)
-          .join(',')
-        const currentDefault = defaultValues['passkey.origins'] as string
-        if (processed !== currentDefault) {
-          updates.push({ key, value: processed })
-        }
-      } else if (key === 'passkey.attachment_preference') {
-        const attachmentPreference =
-          value as PasskeyFormValues['passkey.attachment_preference']
-        const incoming =
-          attachmentPreference === 'none' ? '' : attachmentPreference
-        const currentDefault =
-          defaultValues['passkey.attachment_preference'] === 'none'
-            ? ''
-            : defaultValues['passkey.attachment_preference']
-        if (incoming !== currentDefault) {
-          updates.push({ key, value: incoming })
-        }
-      } else if (value !== defaultValues[key as keyof PasskeyFormValues]) {
-        updates.push({ key, value })
-      }
-    })
-
-    for (const update of updates) {
-      await updateOption.mutateAsync(update)
-    }
+    baselineRef.current = normalized
+    baselineSerializedRef.current = JSON.stringify(normalized)
+    form.reset(buildFormDefaults(normalized))
  }

  return (
@@ -200,8 +224,11 @@ export function PasskeySection({ defaultValues }: PasskeySectionProps) {
                <FormControl>
                  <Input
                    placeholder={t('e.g. New API Console')}
-                    {...field}
                    value={field.value ?? ''}
+                    onChange={(event) => field.onChange(event.target.value)}
+                    name={field.name}
+                    onBlur={field.onBlur}
+                    ref={field.ref}
                  />
                </FormControl>
                <FormDescription>
@@ -223,8 +250,11 @@ export function PasskeySection({ defaultValues }: PasskeySectionProps) {
                <FormControl>
                  <Input
                    placeholder={t('e.g. example.com')}
-                    {...field}
                    value={field.value ?? ''}
+                    onChange={(event) => field.onChange(event.target.value)}
+                    name={field.name}
+                    onBlur={field.onBlur}
+                    ref={field.ref}
                  />
                </FormControl>
                <FormDescription>
@@ -356,8 +386,11 @@ export function PasskeySection({ defaultValues }: PasskeySectionProps) {
                  <Textarea
                    rows={4}
                    placeholder={t('https://example.com')}
-                    {...field}
                    value={field.value ?? ''}
+                    onChange={(event) => field.onChange(event.target.value)}
+                    name={field.name}
+                    onBlur={field.onBlur}
+                    ref={field.ref}
                  />
                </FormControl>
                <FormDescription>
@@ -93,14 +93,8 @@ const AUTH_SECTIONS = [
            | 'required'
            | 'preferred'
            | 'discouraged',
-          'passkey.attachment_preference': (settings[
-            'passkey.attachment_preference'
-          ] === ''
-            ? 'none'
-            : settings['passkey.attachment_preference']) as
-            | 'none'
-            | 'platform'
-            | 'cross-platform',
+          'passkey.attachment_preference':
+            settings['passkey.attachment_preference'],
        }}
      />
    ),
@@ -48,6 +48,7 @@ import {
 import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'

 const dataDashboardSchema = z.object({
  DataExportEnabled: z.boolean(),
@@ -132,9 +133,8 @@ export function DashboardSection({ defaultValues }: DashboardSectionProps) {
                      min={1}
                      max={1440}
                      step={1}
+                      {...safeNumberFieldProps(field)}
                      disabled={!isEnabled}
-                      value={field.value}
-                      onChange={(e) => field.onChange(e.target.valueAsNumber)}
                    />
                  </FormControl>
                  <FormDescription>
@@ -51,6 +51,7 @@ import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useSettingsForm } from '../hooks/use-settings-form'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'

 const createPricingSchema = (t: (key: string) => string) =>
  z
@@ -243,11 +244,7 @@ export function PricingSection({ defaultValues }: PricingSectionProps) {
                      <Input
                        type='number'
                        step='0.01'
-                        value={field.value as number}
-                        onChange={(e) => field.onChange(e.target.valueAsNumber)}
-                        name={field.name}
-                        onBlur={field.onBlur}
-                        ref={field.ref}
+                        {...safeNumberFieldProps(field)}
                      />
                    </FormControl>
                    <FormDescription>
@@ -40,6 +40,7 @@ import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useResetForm } from '../hooks/use-reset-form'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'

 const behaviorSchema = z.object({
  RetryTimes: z.coerce.number().min(0).max(10),
@@ -96,11 +97,7 @@ export function SystemBehaviorSection({
                    type='number'
                    min='0'
                    max='10'
-                    value={field.value as number}
-                    onChange={(e) => field.onChange(e.target.valueAsNumber)}
-                    name={field.name}
-                    onBlur={field.onBlur}
-                    ref={field.ref}
+                    {...safeNumberFieldProps(field)}
                  />
                </FormControl>
                <FormDescription>
@@ -49,6 +49,7 @@ import {
  SelectValue,
 } from '@/components/ui/select'
 import type { CreemProduct } from '@/features/wallet/types'
+import { safeNumberFieldProps } from '../utils/numeric-field'

 const creemProductDialogSchema = z.object({
  name: z.string().min(1, 'Product name is required'),
@@ -216,8 +217,7 @@ export function CreemProductDialog({
                        step='0.01'
                        min={0.01}
                        placeholder='10.00'
-                        {...field}
-                        onChange={(e) => field.onChange(e.target.valueAsNumber)}
+                        {...safeNumberFieldProps(field)}
                      />
                    </FormControl>
                    <FormMessage />
@@ -237,8 +237,7 @@ export function CreemProductDialog({
                      type='number'
                      min={1}
                      placeholder={t('e.g., 500000')}
-                      {...field}
-                      onChange={(e) => field.onChange(e.target.valueAsNumber)}
+                      {...safeNumberFieldProps(field)}
                    />
                  </FormControl>
                  <FormDescription>
@@ -44,6 +44,7 @@ import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useResetForm } from '../hooks/use-reset-form'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'

 const numericString = z.string().refine((value) => {
  const trimmed = value.trim()
@@ -289,18 +290,7 @@ export function MonitoringSettingsSection({
                      type='number'
                      min={1}
                      step={1}
-                      value={
-                        typeof field.value === 'number' &&
-                        Number.isFinite(field.value)
-                          ? field.value
-                          : ''
-                      }
-                      onChange={(event) =>
-                        field.onChange(event.target.valueAsNumber)
-                      }
-                      name={field.name}
-                      onBlur={field.onBlur}
-                      ref={field.ref}
+                      {...safeNumberFieldProps(field)}
                    />
                  </FormControl>
                  <FormDescription>
@@ -55,6 +55,7 @@ import {
 import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'
 import { AmountDiscountVisualEditor } from './amount-discount-visual-editor'
 import { AmountOptionsVisualEditor } from './amount-options-visual-editor'
 import { CreemProductsVisualEditor } from './creem-products-visual-editor'
@@ -876,10 +877,7 @@ export function PaymentSettingsSection({
                        type='number'
                        step='0.01'
                        min={0}
-                        value={(field.value ?? 0) as number}
-                        onChange={(event) =>
-                          field.onChange(event.target.valueAsNumber)
-                        }
+                        {...safeNumberFieldProps(field)}
                      />
                    </FormControl>
                    <FormDescription>
@@ -903,10 +901,7 @@ export function PaymentSettingsSection({
                        type='number'
                        step='0.01'
                        min={0}
-                        value={(field.value ?? 0) as number}
-                        onChange={(event) =>
-                          field.onChange(event.target.valueAsNumber)
-                        }
+                        {...safeNumberFieldProps(field)}
                      />
                    </FormControl>
                    <FormDescription>
@@ -1314,10 +1309,7 @@ export function PaymentSettingsSection({
                        type='number'
                        step='0.01'
                        min={0}
-                        value={(field.value ?? 0) as number}
-                        onChange={(event) =>
-                          field.onChange(event.target.valueAsNumber)
-                        }
+                        {...safeNumberFieldProps(field)}
                      />
                    </FormControl>
                    <FormDescription>
@@ -1339,10 +1331,7 @@ export function PaymentSettingsSection({
                        type='number'
                        step='0.01'
                        min={0}
-                        value={(field.value ?? 0) as number}
-                        onChange={(event) =>
-                          field.onChange(event.target.valueAsNumber)
-                        }
+                        {...safeNumberFieldProps(field)}
                      />
                    </FormControl>
                    <FormDescription>
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.

 For commercial licensing, please contact support@quantumnous.com
 */
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -44,6 +44,7 @@ import {
  FormField,
  FormItem,
  FormLabel,
+  FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -66,31 +67,102 @@ import {
 } from '../components/settings-form-layout'
 import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
-import { useResetForm } from '../hooks/use-reset-form'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'

+/**
+ * IMPORTANT: react-hook-form 7 interprets dotted `name` strings as nested
+ * paths. If we declare the schema with literal flat keys like
+ * `'performance_setting.disk_cache_enabled'`, the form state diverges from
+ * what zod validates and saves silently turn into no-ops. So we model the
+ * form internally with proper nested objects and only flatten back to the
+ * server-side key format right before persisting.
+ */
 const perfSchema = z.object({
-  'performance_setting.disk_cache_enabled': z.boolean(),
-  'performance_setting.disk_cache_threshold_mb': z.coerce.number().min(1),
-  'performance_setting.disk_cache_max_size_mb': z.coerce.number().min(100),
-  'performance_setting.disk_cache_path': z.string().optional(),
-  'performance_setting.monitor_enabled': z.boolean(),
-  'performance_setting.monitor_cpu_threshold': z.coerce.number().min(0),
-  'performance_setting.monitor_memory_threshold': z.coerce
-    .number()
-    .min(0)
-    .max(100),
-  'performance_setting.monitor_disk_threshold': z.coerce
-    .number()
-    .min(0)
-    .max(100),
-  'perf_metrics_setting.enabled': z.boolean(),
-  'perf_metrics_setting.flush_interval': z.coerce.number().min(1),
-  'perf_metrics_setting.bucket_time': z.enum(['minute', '5min', 'hour']),
-  'perf_metrics_setting.retention_days': z.coerce.number().min(0),
+  performance_setting: z.object({
+    disk_cache_enabled: z.boolean(),
+    disk_cache_threshold_mb: z.coerce.number().min(1),
+    disk_cache_max_size_mb: z.coerce.number().min(100),
+    disk_cache_path: z.string(),
+    monitor_enabled: z.boolean(),
+    monitor_cpu_threshold: z.coerce.number().min(0),
+    monitor_memory_threshold: z.coerce.number().min(0).max(100),
+    monitor_disk_threshold: z.coerce.number().min(0).max(100),
+  }),
+  perf_metrics_setting: z.object({
+    enabled: z.boolean(),
+    flush_interval: z.coerce.number().min(1),
+    bucket_time: z.enum(['minute', '5min', 'hour']),
+    retention_days: z.coerce.number().min(0),
+  }),
 })

-type PerfFormValues = z.infer<typeof perfSchema>
+type PerfFormInput = z.input<typeof perfSchema>
+type PerfFormValues = z.output<typeof perfSchema>
+
+type FlatPerfDefaults = {
+  'performance_setting.disk_cache_enabled': boolean
+  'performance_setting.disk_cache_threshold_mb': number
+  'performance_setting.disk_cache_max_size_mb': number
+  'performance_setting.disk_cache_path': string
+  'performance_setting.monitor_enabled': boolean
+  'performance_setting.monitor_cpu_threshold': number
+  'performance_setting.monitor_memory_threshold': number
+  'performance_setting.monitor_disk_threshold': number
+  'perf_metrics_setting.enabled': boolean
+  'perf_metrics_setting.flush_interval': number
+  'perf_metrics_setting.bucket_time': 'minute' | '5min' | 'hour'
+  'perf_metrics_setting.retention_days': number
+}
+
+const buildFormDefaults = (defaults: FlatPerfDefaults): PerfFormInput => ({
+  performance_setting: {
+    disk_cache_enabled: defaults['performance_setting.disk_cache_enabled'],
+    disk_cache_threshold_mb:
+      defaults['performance_setting.disk_cache_threshold_mb'],
+    disk_cache_max_size_mb:
+      defaults['performance_setting.disk_cache_max_size_mb'],
+    disk_cache_path: defaults['performance_setting.disk_cache_path'] ?? '',
+    monitor_enabled: defaults['performance_setting.monitor_enabled'],
+    monitor_cpu_threshold:
+      defaults['performance_setting.monitor_cpu_threshold'],
+    monitor_memory_threshold:
+      defaults['performance_setting.monitor_memory_threshold'],
+    monitor_disk_threshold:
+      defaults['performance_setting.monitor_disk_threshold'],
+  },
+  perf_metrics_setting: {
+    enabled: defaults['perf_metrics_setting.enabled'],
+    flush_interval: defaults['perf_metrics_setting.flush_interval'],
+    bucket_time: defaults['perf_metrics_setting.bucket_time'],
+    retention_days: defaults['perf_metrics_setting.retention_days'],
+  },
+})
+
+const normalizeFormValues = (values: PerfFormValues): FlatPerfDefaults => ({
+  'performance_setting.disk_cache_enabled':
+    values.performance_setting.disk_cache_enabled,
+  'performance_setting.disk_cache_threshold_mb':
+    values.performance_setting.disk_cache_threshold_mb,
+  'performance_setting.disk_cache_max_size_mb':
+    values.performance_setting.disk_cache_max_size_mb,
+  'performance_setting.disk_cache_path':
+    values.performance_setting.disk_cache_path ?? '',
+  'performance_setting.monitor_enabled':
+    values.performance_setting.monitor_enabled,
+  'performance_setting.monitor_cpu_threshold':
+    values.performance_setting.monitor_cpu_threshold,
+  'performance_setting.monitor_memory_threshold':
+    values.performance_setting.monitor_memory_threshold,
+  'performance_setting.monitor_disk_threshold':
+    values.performance_setting.monitor_disk_threshold,
+  'perf_metrics_setting.enabled': values.perf_metrics_setting.enabled,
+  'perf_metrics_setting.flush_interval':
+    values.perf_metrics_setting.flush_interval,
+  'perf_metrics_setting.bucket_time': values.perf_metrics_setting.bucket_time,
+  'perf_metrics_setting.retention_days':
+    values.perf_metrics_setting.retention_days,
+})

 function formatBytes(bytes: number, decimals = 2): string {
  if (!bytes || isNaN(bytes)) return '0 Bytes'
@@ -104,7 +176,7 @@ function formatBytes(bytes: number, decimals = 2): string {
 }

 interface Props {
-  defaultValues: PerfFormValues
+  defaultValues: FlatPerfDefaults
 }

 type LogInfo = {
@@ -158,14 +230,28 @@ export function PerformanceSection(props: Props) {
  const [logCleanupValue, setLogCleanupValue] = useState(10)
  const [logCleanupLoading, setLogCleanupLoading] = useState(false)

-  const form = useForm<PerfFormValues>({
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    resolver: zodResolver(perfSchema) as any,
-    defaultValues: props.defaultValues,
+  const formDefaults = useMemo(
+    () => buildFormDefaults(props.defaultValues),
+    [props.defaultValues]
+  )
+
+  const form = useForm<PerfFormInput, unknown, PerfFormValues>({
+    resolver: zodResolver(perfSchema),
+    defaultValues: formDefaults,
  })

-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  useResetForm(form as any, props.defaultValues)
+  const baselineRef = useRef<FlatPerfDefaults>(props.defaultValues)
+  const baselineSerializedRef = useRef<string>(
+    JSON.stringify(props.defaultValues)
+  )
+
+  useEffect(() => {
+    const serialized = JSON.stringify(props.defaultValues)
+    if (serialized === baselineSerializedRef.current) return
+    baselineRef.current = props.defaultValues
+    baselineSerializedRef.current = serialized
+    form.reset(buildFormDefaults(props.defaultValues))
+  }, [props.defaultValues, form])

  const fetchStats = useCallback(async () => {
    try {
@@ -190,23 +276,27 @@ export function PerformanceSection(props: Props) {
    fetchLogInfo()
  }, [fetchStats, fetchLogInfo])

-  const onSubmit = async (data: PerfFormValues) => {
-    const entries = Object.entries(data) as [string, unknown][]
-    const updates = entries.filter(
-      ([key, value]) =>
-        value !== (props.defaultValues[key as keyof PerfFormValues] as unknown)
-    )
-    if (updates.length === 0) {
+  const onSubmit = async (values: PerfFormValues) => {
+    const normalized = normalizeFormValues(values)
+    const changedKeys = (
+      Object.keys(normalized) as Array<keyof FlatPerfDefaults>
+    ).filter((key) => normalized[key] !== baselineRef.current[key])
+
+    if (changedKeys.length === 0) {
      toast.info(t('No changes to save'))
      return
    }
-    for (const [key, value] of updates) {
+
+    for (const key of changedKeys) {
      await updateOption.mutateAsync({
        key,
-        value: value as string | number | boolean,
+        value: normalized[key],
      })
    }
-    toast.success(t('Saved successfully'))
+
+    baselineRef.current = normalized
+    baselineSerializedRef.current = JSON.stringify(normalized)
+    form.reset(buildFormDefaults(normalized))
    fetchStats()
  }

@@ -278,9 +368,13 @@ export function PerformanceSection(props: Props) {
  const diskEnabled = form.watch('performance_setting.disk_cache_enabled')
  const monitorEnabled = form.watch('performance_setting.monitor_enabled')
  const perfMetricsEnabled = form.watch('perf_metrics_setting.enabled')
-  const maxCacheSizeMb = form.watch(
+  const maxCacheSizeRaw = form.watch(
    'performance_setting.disk_cache_max_size_mb'
  )
+  const maxCacheSizeMb =
+    typeof maxCacheSizeRaw === 'number'
+      ? maxCacheSizeRaw
+      : Number(maxCacheSizeRaw) || 0

  const lowDiskSpace =
    diskEnabled &&
@@ -342,11 +436,18 @@ export function PerformanceSection(props: Props) {
                <FormItem>
                  <FormLabel>{t('Disk Cache Threshold (MB)')}</FormLabel>
                  <FormControl>
-                    <Input type='number' {...field} disabled={!diskEnabled} />
+                    <Input
+                      type='number'
+                      min={1}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
+                      disabled={!diskEnabled}
+                    />
                  </FormControl>
                  <FormDescription>
                    {t('Use disk cache when request body exceeds this size')}
                  </FormDescription>
+                  <FormMessage />
                </FormItem>
              )}
            />
@@ -357,7 +458,13 @@ export function PerformanceSection(props: Props) {
                <FormItem>
                  <FormLabel>{t('Max Disk Cache Size (MB)')}</FormLabel>
                  <FormControl>
-                    <Input type='number' {...field} disabled={!diskEnabled} />
+                    <Input
+                      type='number'
+                      min={100}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
+                      disabled={!diskEnabled}
+                    />
                  </FormControl>
                  {stats?.disk_space_info &&
                    stats.disk_space_info.total > 0 && (
@@ -368,6 +475,7 @@ export function PerformanceSection(props: Props) {
                        })}
                      </FormDescription>
                    )}
+                  <FormMessage />
                </FormItem>
              )}
            />
@@ -393,11 +501,15 @@ export function PerformanceSection(props: Props) {
                      placeholder={t(
                        'Leave empty to use system temp directory'
                      )}
-                      {...field}
                      value={field.value ?? ''}
+                      onChange={(event) => field.onChange(event.target.value)}
+                      name={field.name}
+                      onBlur={field.onBlur}
+                      ref={field.ref}
                      disabled={!diskEnabled}
                    />
                  </FormControl>
+                  <FormMessage />
                </FormItem>
              )}
            />
@@ -444,10 +556,13 @@ export function PerformanceSection(props: Props) {
                  <FormControl>
                    <Input
                      type='number'
-                      {...field}
+                      min={0}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
                      disabled={!monitorEnabled}
                    />
                  </FormControl>
+                  <FormMessage />
                </FormItem>
              )}
            />
@@ -460,10 +575,14 @@ export function PerformanceSection(props: Props) {
                  <FormControl>
                    <Input
                      type='number'
-                      {...field}
+                      min={0}
+                      max={100}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
                      disabled={!monitorEnabled}
                    />
                  </FormControl>
+                  <FormMessage />
                </FormItem>
              )}
            />
@@ -476,10 +595,14 @@ export function PerformanceSection(props: Props) {
                  <FormControl>
                    <Input
                      type='number'
-                      {...field}
+                      min={0}
+                      max={100}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
                      disabled={!monitorEnabled}
                    />
                  </FormControl>
+                  <FormMessage />
                </FormItem>
              )}
            />
@@ -526,10 +649,12 @@ export function PerformanceSection(props: Props) {
                    <Input
                      type='number'
                      min={1}
-                      {...field}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
                      disabled={!perfMetricsEnabled}
                    />
                  </FormControl>
+                  <FormMessage />
                </FormItem>
              )}
            />
@@ -562,6 +687,7 @@ export function PerformanceSection(props: Props) {
                      </SelectGroup>
                    </SelectContent>
                  </Select>
+                  <FormMessage />
                </FormItem>
              )}
            />
@@ -575,13 +701,15 @@ export function PerformanceSection(props: Props) {
                    <Input
                      type='number'
                      min={0}
-                      {...field}
+                      step={1}
+                      {...safeNumberFieldProps(field)}
                      disabled={!perfMetricsEnabled}
                    />
                  </FormControl>
                  <FormDescription>
                    {t('0 means data is kept permanently')}
                  </FormDescription>
+                  <FormMessage />
                </FormItem>
              )}
            />
@@ -16,10 +16,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.

 For commercial licensing, please contact support@quantumnous.com
 */
+import { useEffect, useMemo, useRef } from 'react'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 import {
  Form,
  FormControl,
@@ -27,6 +29,7 @@ import {
  FormField,
  FormItem,
  FormLabel,
+  FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Switch } from '@/components/ui/switch'
@@ -37,48 +40,97 @@ import {
 } from '../components/settings-form-layout'
 import { SettingsPageFormActions } from '../components/settings-page-context'
 import { SettingsSection } from '../components/settings-section'
-import { useResetForm } from '../hooks/use-reset-form'
 import { useUpdateOption } from '../hooks/use-update-option'
+import { safeNumberFieldProps } from '../utils/numeric-field'

 const XAI_VIOLATION_FEE_DOC_URL =
  'https://docs.x.ai/docs/models#usage-guidelines-violation-fee'

+/**
+ * The schema uses a nested object so the dotted FormField `name` props line
+ * up with react-hook-form's path semantics. Using flat keys like
+ * `'grok.violation_deduction_enabled'` causes RHF to silently maintain two
+ * parallel value trees and saves never see the user input.
+ */
 const grokSchema = z.object({
-  'grok.violation_deduction_enabled': z.boolean(),
-  'grok.violation_deduction_amount': z.coerce.number().min(0),
+  grok: z.object({
+    violation_deduction_enabled: z.boolean(),
+    violation_deduction_amount: z.coerce.number().min(0),
+  }),
 })

-type GrokFormValues = z.infer<typeof grokSchema>
+type GrokFormInput = z.input<typeof grokSchema>
+type GrokFormValues = z.output<typeof grokSchema>
+
+type FlatGrokDefaults = {
+  'grok.violation_deduction_enabled': boolean
+  'grok.violation_deduction_amount': number
+}
+
+const buildFormDefaults = (defaults: FlatGrokDefaults): GrokFormInput => ({
+  grok: {
+    violation_deduction_enabled: defaults['grok.violation_deduction_enabled'],
+    violation_deduction_amount: defaults['grok.violation_deduction_amount'],
+  },
+})
+
+const normalizeFormValues = (values: GrokFormValues): FlatGrokDefaults => ({
+  'grok.violation_deduction_enabled': values.grok.violation_deduction_enabled,
+  'grok.violation_deduction_amount': values.grok.violation_deduction_amount,
+})

 interface Props {
-  defaultValues: GrokFormValues
+  defaultValues: FlatGrokDefaults
 }

 export function GrokSettingsCard(props: Props) {
  const { t } = useTranslation()
  const updateOption = useUpdateOption()

-  const form = useForm<GrokFormValues>({
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    resolver: zodResolver(grokSchema) as any,
-    defaultValues: props.defaultValues,
+  const formDefaults = useMemo(
+    () => buildFormDefaults(props.defaultValues),
+    [props.defaultValues]
+  )
+
+  const form = useForm<GrokFormInput, unknown, GrokFormValues>({
+    resolver: zodResolver(grokSchema),
+    defaultValues: formDefaults,
  })

-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  useResetForm(form as any, props.defaultValues)
-
-  const onSubmit = async (data: GrokFormValues) => {
-    const entries = Object.entries(data) as [string, unknown][]
-    const updates = entries.filter(
-      ([key, value]) =>
-        value !== (props.defaultValues[key as keyof GrokFormValues] as unknown)
+  const baselineRef = useRef<FlatGrokDefaults>(props.defaultValues)
+  const baselineSerializedRef = useRef<string>(
+    JSON.stringify(props.defaultValues)
  )
-    for (const [key, value] of updates) {
+
+  useEffect(() => {
+    const serialized = JSON.stringify(props.defaultValues)
+    if (serialized === baselineSerializedRef.current) return
+    baselineRef.current = props.defaultValues
+    baselineSerializedRef.current = serialized
+    form.reset(buildFormDefaults(props.defaultValues))
+  }, [props.defaultValues, form])
+
+  const onSubmit = async (values: GrokFormValues) => {
+    const normalized = normalizeFormValues(values)
+    const changedKeys = (
+      Object.keys(normalized) as Array<keyof FlatGrokDefaults>
+    ).filter((key) => normalized[key] !== baselineRef.current[key])
+
+    if (changedKeys.length === 0) {
+      toast.info(t('No changes to save'))
+      return
+    }
+
+    for (const key of changedKeys) {
      await updateOption.mutateAsync({
        key,
-        value: value as string | number | boolean,
+        value: normalized[key],
      })
    }
+
+    baselineRef.current = normalized
+    baselineSerializedRef.current = JSON.stringify(normalized)
+    form.reset(buildFormDefaults(normalized))
  }

  const enabled = form.watch('grok.violation_deduction_enabled')
@@ -133,7 +185,7 @@ export function GrokSettingsCard(props: Props) {
                    type='number'
                    step={0.01}
                    min={0}
-                    {...field}
+                    {...safeNumberFieldProps(field)}
                    disabled={!enabled}
                  />
                </FormControl>
@@ -142,6 +194,7 @@ export function GrokSettingsCard(props: Props) {
                    'Base amount. Actual deduction = base amount × system group rate.'
                  )}
                </FormDescription>
+                <FormMessage />
              </FormItem>
            )}
          />
@@ -0,0 +1,91 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type { ChangeEvent } from 'react'
+import type {
+  ControllerRenderProps,
+  FieldPath,
+  FieldValues,
+} from 'react-hook-form'
+
+/**
+ * Props produced by {@link safeNumberFieldProps} for a native
+ * `<input type="number">`. They are intentionally narrow so consumers can
+ * spread them onto our shared `Input` component without leaking the
+ * react-hook-form internals (e.g. `disabled`) that need overriding per call.
+ */
+export type SafeNumberFieldProps = {
+  value: number | ''
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void
+  onBlur: () => void
+  name: string
+  ref: (instance: HTMLInputElement | null) => void
+}
+
+/**
+ * Adapter for binding a react-hook-form numeric field to a native
+ * `<input type="number">` without ever putting `NaN` into form state.
+ *
+ * Why this exists:
+ * - `<input type="number">` reports `valueAsNumber === NaN` whenever the field
+ *   is empty or holds an in-progress non-numeric token (e.g. just a minus
+ *   sign or a trailing dot). Forwarding `NaN` to `field.onChange` makes Zod
+ *   numeric validators (`z.number().min(...)`, `z.coerce.number()`, etc.)
+ *   fail at submit time, so `form.handleSubmit` silently refuses to call
+ *   `onSubmit` — the save button appears frozen with no toast and no error.
+ * - The legacy Semi `InputNumber` avoids this by snapping the input back to
+ *   the previous valid number. We replicate that behaviour by ignoring `NaN`
+ *   updates: React's controlled-input reconciliation will restore the last
+ *   valid value to the DOM on the next render.
+ *
+ * Display:
+ * - When the underlying state is not a finite number, the prop returns `''`
+ *   so the input visibly renders empty instead of literal "NaN".
+ *
+ * Usage:
+ * ```tsx
+ * <FormField
+ *   control={form.control}
+ *   name='performance_setting.monitor_cpu_threshold'
+ *   render={({ field }) => (
+ *     <Input type='number' min={0} {...safeNumberFieldProps(field)} />
+ *   )}
+ * />
+ * ```
+ */
+export function safeNumberFieldProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+>(field: ControllerRenderProps<TFieldValues, TName>): SafeNumberFieldProps {
+  const raw = field.value as unknown
+  const display: number | '' =
+    typeof raw === 'number' && Number.isFinite(raw) ? raw : ''
+
+  return {
+    value: display,
+    onChange: (event) => {
+      const next = event.target.valueAsNumber
+      if (Number.isFinite(next)) {
+        ;(field.onChange as (value: number) => void)(next)
+      }
+    },
+    onBlur: field.onBlur,
+    name: field.name,
+    ref: field.ref,
+  }
+}
@@ -357,7 +357,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                    )}
                  </div>
                  {log.channel_name && (
-                    <span className='text-muted-foreground/70 truncate !text-xs [font-family:var(--font-body)]'>
+                    <span className='text-muted-foreground/70 truncate [font-family:var(--font-body)] !text-xs'>
                      {channelName}
                    </span>
                  )}
@@ -502,7 +502,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
            </Tooltip>
          </TooltipProvider>
          {metaParts.length > 0 && (
-            <span className='text-muted-foreground/60 truncate !text-xs [font-family:var(--font-body)]'>
+            <span className='text-muted-foreground/60 truncate [font-family:var(--font-body)] !text-xs'>
              {metaParts.join(' · ')}
            </span>
          )}
@@ -598,8 +598,8 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                  />
                ))}
            </div>
-            <div className='flex items-center gap-1 !text-xs leading-none [font-family:var(--font-body)]'>
-              <span className='text-muted-foreground/60 !text-xs leading-none [font-family:var(--font-body)]'>
+            <div className='flex items-center gap-1 [font-family:var(--font-body)] !text-xs leading-none'>
+              <span className='text-muted-foreground/60 [font-family:var(--font-body)] !text-xs leading-none'>
                {log.is_stream ? t('Stream') : t('Non-stream')}
                {tokensPerSecond != null && (
                  <>
@@ -736,7 +736,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {

        return (
          <div className='flex flex-col gap-0.5'>
-            <span className='border-border/80 bg-muted/60 inline-flex w-fit items-center rounded-md border px-1.5 py-0.5 font-semibold tabular-nums [font-family:var(--font-body)]'>
+            <span className='border-border/80 bg-muted/60 inline-flex w-fit items-center rounded-md border px-1.5 py-0.5 [font-family:var(--font-body)] font-semibold tabular-nums'>
              {quotaStr}
            </span>
          </div>
@@ -101,12 +101,12 @@ function ModelBadgeContent(props: ModelBadgeProps) {
      showDot={!provider}
      autoColor={provider ? undefined : props.modelName}
      className={cn(
-        'border-border/60 bg-muted/30 h-auto min-h-6 gap-1.5 rounded-md border px-2 py-0.5 whitespace-normal break-all [font-family:var(--font-body)]',
+        'border-border/60 bg-muted/30 h-auto min-h-6 gap-1.5 rounded-md border px-2 py-0.5 [font-family:var(--font-body)] break-all whitespace-normal',
        provider && 'text-foreground',
        props.className
      )}
    >
-      <span className='flex items-center gap-1.5 min-w-0'>
+      <span className='flex min-w-0 items-center gap-1.5'>
        {provider && (
          <span
            className='flex size-3.5 shrink-0 items-center justify-center'