fix setting UI config to empty for AI custom & displayed models (#7991)

Author: Light2Dark

frontend/src/components/app-config/__tests__/get-dirty-values.test.ts

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { describe, expect, test } from "vitest";
-import { getDirtyValues } from "../user-config-form";
+import type { UserConfig } from "@/core/config/config-schema";
+import { applyManualInjections, getDirtyValues } from "../user-config-form";
 
 describe("getDirtyValues", () => {
   test("extracts only dirty fields", () => {
@@ -71,4 +72,49 @@ describe("getDirtyValues", () => {
     expect(result).toEqual({ display: { theme: "dark" } });
     expect(result).not.toHaveProperty("runtime");
   });
+
+  test("applyManualInjections injects touched ai model fields", () => {
+    const values = {
+      ai: {
+        models: {
+          displayed_models: ["openai/gpt-4"],
+          custom_models: ["openai/custom-model"],
+        },
+      },
+    } as UserConfig;
+    const dirtyValues: Partial<UserConfig> = {};
+    const touchedFields = {
+      ai: { models: { displayed_models: true } },
+    };
+
+    applyManualInjections({ values, dirtyValues, touchedFields });
+
+    expect(dirtyValues).toEqual({
+      ai: {
+        models: {
+          displayed_models: ["openai/gpt-4"],
+          custom_models: ["openai/custom-model"],
+        },
+      },
+    });
+  });
+
+  test("applyManualInjections skips when field not touched", () => {
+    const values = {
+      ai: {
+        models: {
+          displayed_models: ["openai/gpt-4"],
+          custom_models: ["openai/custom-model"],
+        },
+      },
+    } as UserConfig;
+    const dirtyValues: Partial<UserConfig> = {};
+    const touchedFields = {
+      ai: { models: { displayed_models: false } },
+    };
+
+    applyManualInjections({ values, dirtyValues, touchedFields });
+
+    expect(dirtyValues).toEqual({});
+  });
 });

frontend/src/components/app-config/ai-config.tsx

@@ -1434,6 +1434,7 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
 
     form.setValue("ai.models.displayed_models", newModels, {
       shouldDirty: true,
+      shouldTouch: true,
     });
     onSubmit(form.getValues());
   });
@@ -1453,6 +1454,7 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
 
       form.setValue("ai.models.displayed_models", newModels, {
         shouldDirty: true,
+        shouldTouch: true,
       });
       onSubmit(form.getValues());
     },
@@ -1466,9 +1468,11 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
     );
     form.setValue("ai.models.displayed_models", newDisplayedModels, {
       shouldDirty: true,
+      shouldTouch: true,
     });
     form.setValue("ai.models.custom_models", newModels, {
       shouldDirty: true,
+      shouldTouch: true,
     });
     onSubmit(form.getValues());
   });
@@ -1548,6 +1552,7 @@ export const AddModelForm: React.FC<{
 
     form.setValue("ai.models.custom_models", [newModel.id, ...customModels], {
       shouldDirty: true,
+      shouldTouch: true,
     });
     onSubmit(form.getValues());
     resetForm();

frontend/src/components/app-config/user-config-form.tsx

@@ -14,7 +14,7 @@ import {
 } from "lucide-react";
 import React, { useId, useRef } from "react";
 import { useLocale } from "react-aria";
-import type { FieldValues } from "react-hook-form";
+import type { FieldPath, FieldValues } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import type z from "zod";
 import { Button } from "@/components/ui/button";
@@ -95,6 +95,68 @@ export function getDirtyValues<T extends FieldValues>(
   return result;
 }
 
+type ManualInjector = (
+  values: UserConfig,
+  dirtyValues: Partial<UserConfig>,
+) => void;
+
+const modelsAiInjection = (
+  values: UserConfig,
+  dirtyValues: Partial<UserConfig>,
+) => {
+  dirtyValues.ai = {
+    ...dirtyValues.ai,
+    models: {
+      ...dirtyValues.ai?.models,
+      displayed_models: values.ai?.models?.displayed_models ?? [],
+      custom_models: values.ai?.models?.custom_models ?? [],
+    },
+  };
+};
+
+// Some fields (like AI model lists) have empty arrays as default values.
+// If a user explicitly clears them, RHF won't mark them dirty, so we use
+// touchedFields to force-include those values in the payload.
+const MANUAL_INJECT_ENTRIES = [
+  ["ai.models.displayed_models", modelsAiInjection],
+  ["ai.models.custom_models", modelsAiInjection],
+] as const satisfies readonly (readonly [
+  FieldPath<UserConfig>,
+  ManualInjector,
+])[];
+
+const MANUAL_INJECT_FIELDS = new Map(MANUAL_INJECT_ENTRIES);
+
+const isTouchedPath = (
+  touched: unknown,
+  path: FieldPath<UserConfig>,
+): boolean => {
+  if (!touched) {
+    return false;
+  }
+  let current: unknown = touched;
+  for (const segment of path.split(".")) {
+    if (typeof current !== "object" || current === null) {
+      return false;
+    }
+    current = (current as Record<string, unknown>)[segment];
+  }
+  return current === true;
+};
+
+export const applyManualInjections = (opts: {
+  values: UserConfig;
+  dirtyValues: Partial<UserConfig>;
+  touchedFields: unknown;
+}) => {
+  const { values, dirtyValues, touchedFields } = opts;
+  for (const [fieldPath, injector] of MANUAL_INJECT_FIELDS) {
+    if (isTouchedPath(touchedFields, fieldPath)) {
+      injector(values, dirtyValues);
+    }
+  }
+};
+
 const categories = [
   {
     id: "editor",
@@ -207,6 +269,11 @@ export const UserConfigForm: React.FC = () => {
     // Only send values that were actually changed to avoid
     // overwriting backend values the form doesn't manage
     const dirtyValues = getDirtyValues(values, form.formState.dirtyFields);
+    applyManualInjections({
+      values,
+      dirtyValues,
+      touchedFields: form.formState.touchedFields,
+    });
     if (Object.keys(dirtyValues).length === 0) {
       return; // Nothing changed
     }