@marimo-team/frontend 0.23.11-dev12 → 0.23.11-dev18

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

@@ -60,7 +60,11 @@ import { AiConfig } from "./ai-config";
 import { formItemClasses, SettingGroup } from "./common";
 import { DataForm } from "./data-form";
 import { applyManualInjections, getDirtyValues } from "./get-dirty-values";
-import { IsOverridden } from "./is-overridden";
+import {
+  IsOverridden,
+  OverriddenFormField,
+  useConfigOverride,
+} from "./is-overridden";
 import { OptionalFeatures } from "./optional-features";
 
 const categories = [
@@ -204,6 +208,7 @@ export const UserConfigForm: React.FC = () => {
   const onSubmit = useDebouncedCallback(onSubmitNotDebounced, FORM_DEBOUNCE);
 
   const isWasmRuntime = isWasm();
+  const getOverride = useConfigOverride();
   const htmlCheckboxId = useId();
   const ipynbCheckboxId = useId();
 
@@ -213,10 +218,10 @@ export const UserConfigForm: React.FC = () => {
         return (
           <>
             <SettingGroup title="Autosave">
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="save.autosave"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <FormItem className={formItemClasses}>
                     <FormLabel className="font-normal">
                       Autosave enabled
@@ -224,57 +229,61 @@ export const UserConfigForm: React.FC = () => {
                     <FormControl>
                       <Checkbox
                         data-testid="autosave-checkbox"
-                        checked={field.value === "after_delay"}
-                        disabled={field.disabled}
+                        checked={override.value === "after_delay"}
+                        disabled={field.disabled || override.isOverridden}
                         onCheckedChange={(checked) => {
                           field.onChange(checked ? "after_delay" : "off");
                         }}
                       />
                     </FormControl>
                     <FormMessage />
-                    <IsOverridden userConfig={config} name="save.autosave" />
+                    <IsOverridden override={override} />
                   </FormItem>
                 )}
               />
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="save.autosave_delay"
-                render={({ field }) => (
-                  <FormItem className={formItemClasses}>
-                    <FormLabel>Autosave delay (seconds)</FormLabel>
-                    <FormControl>
-                      <NumberField
-                        aria-label="Autosave delay"
-                        data-testid="autosave-delay-input"
-                        className="m-0 w-24"
-                        isDisabled={
-                          form.getValues("save.autosave") !== "after_delay"
-                        }
-                        {...field}
-                        value={field.value / 1000}
-                        minValue={1}
-                        onChange={(value) => {
-                          field.onChange(value * 1000);
-                          if (!Number.isNaN(value)) {
-                            onSubmit(form.getValues());
+                render={({ field, override }) => {
+                  const autosave = getOverride(
+                    "save.autosave",
+                    form.getValues("save.autosave"),
+                  );
+                  return (
+                    <FormItem className={formItemClasses}>
+                      <FormLabel>Autosave delay (seconds)</FormLabel>
+                      <FormControl>
+                        <NumberField
+                          aria-label="Autosave delay"
+                          data-testid="autosave-delay-input"
+                          className="m-0 w-24"
+                          isDisabled={
+                            autosave.value !== "after_delay" ||
+                            override.isOverridden
                           }
-                        }}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                    <IsOverridden
-                      userConfig={config}
-                      name="save.autosave_delay"
-                    />
-                  </FormItem>
-                )}
+                          {...field}
+                          value={override.value / 1000}
+                          minValue={1}
+                          onChange={(value) => {
+                            field.onChange(value * 1000);
+                            if (!Number.isNaN(value)) {
+                              onSubmit(form.getValues());
+                            }
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                      <IsOverridden override={override} />
+                    </FormItem>
+                  );
+                }}
               />
               {/* auto_download is a runtime setting in the backend, but it makes
                * more sense as an autosave setting. */}
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="runtime.default_auto_download"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col gap-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>Save cell outputs as</FormLabel>
@@ -284,9 +293,10 @@ export const UserConfigForm: React.FC = () => {
                             <Checkbox
                               id={htmlCheckboxId}
                               checked={
-                                Array.isArray(field.value) &&
-                                field.value.includes("html")
+                                Array.isArray(override.value) &&
+                                override.value.includes("html")
                               }
+                              disabled={override.isOverridden}
                               onCheckedChange={() => {
                                 const currentValue = Array.isArray(field.value)
                                   ? field.value
@@ -302,9 +312,10 @@ export const UserConfigForm: React.FC = () => {
                             <Checkbox
                               id={ipynbCheckboxId}
                               checked={
-                                Array.isArray(field.value) &&
-                                field.value.includes("ipynb")
+                                Array.isArray(override.value) &&
+                                override.value.includes("ipynb")
                               }
+                              disabled={override.isOverridden}
                               onCheckedChange={() => {
                                 const currentValue = Array.isArray(field.value)
                                   ? field.value
@@ -321,10 +332,7 @@ export const UserConfigForm: React.FC = () => {
                         </div>
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="runtime.default_auto_download"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
                     <FormDescription>
                       When enabled, marimo will periodically save notebooks in
@@ -337,10 +345,10 @@ export const UserConfigForm: React.FC = () => {
               />
             </SettingGroup>
             <SettingGroup title="Formatting">
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="save.format_on_save"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <FormItem className={formItemClasses}>
                     <FormLabel className="font-normal">
                       Format on save
@@ -348,25 +356,22 @@ export const UserConfigForm: React.FC = () => {
                     <FormControl>
                       <Checkbox
                         data-testid="format-on-save-checkbox"
-                        checked={field.value}
-                        disabled={field.disabled}
+                        checked={override.value}
+                        disabled={field.disabled || override.isOverridden}
                         onCheckedChange={(checked) => {
                           field.onChange(checked);
                         }}
                       />
                     </FormControl>
                     <FormMessage />
-                    <IsOverridden
-                      userConfig={config}
-                      name="save.format_on_save"
-                    />
+                    <IsOverridden override={override} />
                   </FormItem>
                 )}
               />
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="formatting.line_length"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col space-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>Line length</FormLabel>
@@ -376,7 +381,8 @@ export const UserConfigForm: React.FC = () => {
                           data-testid="line-length-input"
                           className="m-0 w-24"
                           {...field}
-                          value={field.value}
+                          value={override.value}
+                          isDisabled={override.isOverridden}
                           minValue={1}
                           maxValue={1000}
                           onChange={(value) => {
@@ -389,10 +395,7 @@ export const UserConfigForm: React.FC = () => {
                         />
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="formatting.line_length"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
 
                     <FormDescription>
@@ -403,10 +406,10 @@ export const UserConfigForm: React.FC = () => {
               />
             </SettingGroup>
             <SettingGroup title="Autocomplete">
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="completion.activate_on_typing"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col space-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel className="font-normal">
@@ -415,18 +418,15 @@ export const UserConfigForm: React.FC = () => {
                       <FormControl>
                         <Checkbox
                           data-testid="autocomplete-checkbox"
-                          checked={field.value}
-                          disabled={field.disabled}
+                          checked={override.value}
+                          disabled={field.disabled || override.isOverridden}
                           onCheckedChange={(checked) => {
                             field.onChange(Boolean(checked));
                           }}
                         />
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="completion.activate_on_typing"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
                     <FormDescription>
                       When unchecked, code completion is still available through
@@ -471,10 +471,10 @@ export const UserConfigForm: React.FC = () => {
                   suggestions.
                 </FormDescription>
               </div>
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="completion.signature_hint_on_typing"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col space-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel className="font-normal">
@@ -483,18 +483,15 @@ export const UserConfigForm: React.FC = () => {
                       <FormControl>
                         <Checkbox
                           data-testid="signature-hint-on-type-checkbox"
-                          checked={field.value ?? false}
-                          disabled={field.disabled}
+                          checked={override.value ?? false}
+                          disabled={field.disabled || override.isOverridden}
                           onCheckedChange={(checked) => {
                             field.onChange(Boolean(checked));
                           }}
                         />
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="completion.signature_hint_on_typing"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
                     <FormDescription>
                       Display signature hints while typing within function
@@ -503,10 +500,10 @@ export const UserConfigForm: React.FC = () => {
                   </div>
                 )}
               />
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="completion.auto_close_pairs"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col space-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel className="font-normal">
@@ -515,18 +512,15 @@ export const UserConfigForm: React.FC = () => {
                       <FormControl>
                         <Checkbox
                           data-testid="auto-close-pairs-checkbox"
-                          checked={field.value ?? true}
-                          disabled={field.disabled}
+                          checked={override.value ?? true}
+                          disabled={field.disabled || override.isOverridden}
                           onCheckedChange={(checked) => {
                             field.onChange(Boolean(checked));
                           }}
                         />
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="completion.auto_close_pairs"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
                     <FormDescription>
                       Automatically insert closing brackets{" "}
@@ -553,10 +547,10 @@ export const UserConfigForm: React.FC = () => {
                 different features may conflict.
               </FormDescription>
 
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="language_servers.pylsp.enabled"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col gap-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>
@@ -572,20 +566,17 @@ export const UserConfigForm: React.FC = () => {
                       <FormControl>
                         <Checkbox
                           data-testid="pylsp-checkbox"
-                          checked={field.value}
-                          disabled={field.disabled}
+                          checked={override.value}
+                          disabled={field.disabled || override.isOverridden}
                           onCheckedChange={(checked) => {
                             field.onChange(Boolean(checked));
                           }}
                         />
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="language_servers.pylsp.enabled"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
-                    {field.value && !capabilities.pylsp && (
+                    {override.value && !capabilities.pylsp && (
                       <Banner kind="danger">
                         The Python Language Server is not available in your
                         current environment. Please install{" "}
@@ -596,10 +587,10 @@ export const UserConfigForm: React.FC = () => {
                   </div>
                 )}
               />
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="language_servers.basedpyright.enabled"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col gap-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>
@@ -615,20 +606,17 @@ export const UserConfigForm: React.FC = () => {
                       <FormControl>
                         <Checkbox
                           data-testid="basedpyright-checkbox"
-                          checked={field.value}
-                          disabled={field.disabled}
+                          checked={override.value}
+                          disabled={field.disabled || override.isOverridden}
                           onCheckedChange={(checked) => {
                             field.onChange(Boolean(checked));
                           }}
                         />
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="language_servers.basedpyright.enabled"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
-                    {field.value && !capabilities.basedpyright && (
+                    {override.value && !capabilities.basedpyright && (
                       <Banner kind="danger">
                         basedpyright is not available in your current
                         environment. Please install{" "}
@@ -639,10 +627,10 @@ export const UserConfigForm: React.FC = () => {
                   </div>
                 )}
               />
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="language_servers.pyrefly.enabled"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col gap-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>
@@ -658,20 +646,17 @@ export const UserConfigForm: React.FC = () => {
                       <FormControl>
                         <Checkbox
                           data-testid="pyrefly-checkbox"
-                          checked={field.value}
-                          disabled={field.disabled}
+                          checked={override.value}
+                          disabled={field.disabled || override.isOverridden}
                           onCheckedChange={(checked) => {
                             field.onChange(Boolean(checked));
                           }}
                         />
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="language_servers.pyrefly.enabled"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
-                    {field.value && !capabilities.pyrefly && (
+                    {override.value && !capabilities.pyrefly && (
                       <Banner kind="danger">
                         Pyrefly is not available in your current environment.
                         Please install <Kbd className="inline">pyrefly</Kbd> in
@@ -681,10 +666,10 @@ export const UserConfigForm: React.FC = () => {
                   </div>
                 )}
               />
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="language_servers.ty.enabled"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col gap-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>
@@ -700,20 +685,17 @@ export const UserConfigForm: React.FC = () => {
                       <FormControl>
                         <Checkbox
                           data-testid="ty-checkbox"
-                          checked={field.value}
-                          disabled={field.disabled}
+                          checked={override.value}
+                          disabled={field.disabled || override.isOverridden}
                           onCheckedChange={(checked) => {
                             field.onChange(Boolean(checked));
                           }}
                         />
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="language_servers.ty.enabled"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
-                    {field.value && !capabilities.ty && (
+                    {override.value && !capabilities.ty && (
                       <Banner kind="danger">
                         ty is not available in your current environment. Please
                         install <Kbd className="inline">ty</Kbd> in your
@@ -723,10 +705,10 @@ export const UserConfigForm: React.FC = () => {
                   </div>
                 )}
               />
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="diagnostics.enabled"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <FormItem className={formItemClasses}>
                     <FormLabel>
                       <Badge variant="defaultOutline" className="mr-2">
@@ -737,28 +719,25 @@ export const UserConfigForm: React.FC = () => {
                     <FormControl>
                       <Checkbox
                         data-testid="diagnostics-checkbox"
-                        checked={field.value}
-                        disabled={field.disabled}
+                        checked={override.value}
+                        disabled={field.disabled || override.isOverridden}
                         onCheckedChange={(checked) => {
                           field.onChange(Boolean(checked));
                         }}
                       />
                     </FormControl>
                     <FormMessage />
-                    <IsOverridden
-                      userConfig={config}
-                      name="diagnostics.enabled"
-                    />
+                    <IsOverridden override={override} />
                   </FormItem>
                 )}
               />
             </SettingGroup>
 
             <SettingGroup title="Keymap">
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="keymap.preset"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col space-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>Keymap</FormLabel>
@@ -766,8 +745,8 @@ export const UserConfigForm: React.FC = () => {
                         <NativeSelect
                           data-testid="keymap-select"
                           onChange={(e) => field.onChange(e.target.value)}
-                          value={field.value}
-                          disabled={field.disabled}
+                          value={override.value}
+                          disabled={field.disabled || override.isOverridden}
                           className="inline-flex mr-2"
                         >
                           {KEYMAP_PRESETS.map((option) => (
@@ -778,15 +757,15 @@ export const UserConfigForm: React.FC = () => {
                         </NativeSelect>
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden userConfig={config} name="keymap.preset" />
+                      <IsOverridden override={override} />
                     </FormItem>
                   </div>
                 )}
               />
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="keymap.destructive_delete"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col space-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel className="font-normal">
@@ -795,18 +774,15 @@ export const UserConfigForm: React.FC = () => {
                       <FormControl>
                         <Checkbox
                           data-testid="destructive-delete-checkbox"
-                          checked={field.value}
-                          disabled={field.disabled}
+                          checked={override.value}
+                          disabled={field.disabled || override.isOverridden}
                           onCheckedChange={(checked) => {
                             field.onChange(Boolean(checked));
                           }}
                         />
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="keymap.destructive_delete"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
                     <FormDescription className="flex items-center gap-1">
                       Allow deleting non-empty cells
@@ -847,10 +823,10 @@ export const UserConfigForm: React.FC = () => {
         return (
           <>
             <SettingGroup title="Display">
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="display.default_width"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col space-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>Default width</FormLabel>
@@ -858,8 +834,8 @@ export const UserConfigForm: React.FC = () => {
                         <NativeSelect
                           data-testid="user-config-width-select"
                           onChange={(e) => field.onChange(e.target.value)}
-                          value={field.value}
-                          disabled={field.disabled}
+                          value={override.value}
+                          disabled={field.disabled || override.isOverridden}
                           className="inline-flex mr-2"
                         >
                           {getAppWidths().map((option) => (
@@ -870,10 +846,7 @@ export const UserConfigForm: React.FC = () => {
                         </NativeSelect>
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="display.default_width"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
 
                     <FormDescription>
@@ -883,10 +856,10 @@ export const UserConfigForm: React.FC = () => {
                   </div>
                 )}
               />
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="display.theme"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col space-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>Theme</FormLabel>
@@ -894,8 +867,8 @@ export const UserConfigForm: React.FC = () => {
                         <NativeSelect
                           data-testid="theme-select"
                           onChange={(e) => field.onChange(e.target.value)}
-                          value={field.value}
-                          disabled={field.disabled}
+                          value={override.value}
+                          disabled={field.disabled || override.isOverridden}
                           className="inline-flex mr-2"
                         >
                           {THEMES.map((option) => (
@@ -906,7 +879,7 @@ export const UserConfigForm: React.FC = () => {
                         </NativeSelect>
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden userConfig={config} name="display.theme" />
+                      <IsOverridden override={override} />
                     </FormItem>
 
                     <FormDescription>
@@ -916,10 +889,10 @@ export const UserConfigForm: React.FC = () => {
                   </div>
                 )}
               />
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="display.code_editor_font_size"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <FormItem className={formItemClasses}>
                     <FormLabel>Code editor font size (px)</FormLabel>
                     <FormControl>
@@ -929,7 +902,8 @@ export const UserConfigForm: React.FC = () => {
                           data-testid="code-editor-font-size-input"
                           className="m-0 w-24"
                           {...field}
-                          value={field.value}
+                          value={override.value}
+                          isDisabled={override.isOverridden}
                           minValue={8}
                           maxValue={32}
                           onChange={(value) => {
@@ -940,17 +914,14 @@ export const UserConfigForm: React.FC = () => {
                       </span>
                     </FormControl>
                     <FormMessage />
-                    <IsOverridden
-                      userConfig={config}
-                      name="display.code_editor_font_size"
-                    />
+                    <IsOverridden override={override} />
                   </FormItem>
                 )}
               />
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="display.locale"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col space-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>Locale</FormLabel>
@@ -964,8 +935,8 @@ export const UserConfigForm: React.FC = () => {
                               field.onChange(e.target.value);
                             }
                           }}
-                          value={field.value || LOCALE_SYSTEM_VALUE}
-                          disabled={field.disabled}
+                          value={override.value || LOCALE_SYSTEM_VALUE}
+                          disabled={field.disabled || override.isOverridden}
                           className="inline-flex mr-2"
                         >
                           <option value={LOCALE_SYSTEM_VALUE}>System</option>
@@ -977,7 +948,7 @@ export const UserConfigForm: React.FC = () => {
                         </NativeSelect>
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden userConfig={config} name="display.locale" />
+                      <IsOverridden override={override} />
                     </FormItem>
 
                     <FormDescription>
@@ -988,25 +959,23 @@ export const UserConfigForm: React.FC = () => {
                   </div>
                 )}
               />
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="display.reference_highlighting"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col space-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>Reference highlighting</FormLabel>
                       <FormControl>
                         <Checkbox
                           data-testid="reference-highlighting-checkbox"
-                          checked={field.value}
+                          checked={override.value}
+                          disabled={override.isOverridden}
                           onCheckedChange={field.onChange}
                         />
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="display.reference_highlighting"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
 
                     <FormDescription>
@@ -1018,10 +987,10 @@ export const UserConfigForm: React.FC = () => {
               />
             </SettingGroup>
             <SettingGroup title="Outputs">
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 name="display.cell_output"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col space-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>Cell output area</FormLabel>
@@ -1029,8 +998,8 @@ export const UserConfigForm: React.FC = () => {
                         <NativeSelect
                           data-testid="cell-output-select"
                           onChange={(e) => field.onChange(e.target.value)}
-                          value={field.value}
-                          disabled={field.disabled}
+                          value={override.value}
+                          disabled={field.disabled || override.isOverridden}
                           className="inline-flex mr-2"
                         >
                           {["above", "below"].map((option) => (
@@ -1041,10 +1010,7 @@ export const UserConfigForm: React.FC = () => {
                         </NativeSelect>
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="display.cell_output"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
 
                     <FormDescription>
@@ -1060,11 +1026,11 @@ export const UserConfigForm: React.FC = () => {
         return (
           <>
             <SettingGroup title="Package Management">
-              <FormField
+              <OverriddenFormField
                 control={form.control}
                 disabled={isWasmRuntime}
                 name="package_management.manager"
-                render={({ field }) => (
+                render={({ field, override }) => (
                   <div className="flex flex-col space-y-1">
                     <FormItem className={formItemClasses}>
                       <FormLabel>Manager</FormLabel>
@@ -1072,8 +1038,8 @@ export const UserConfigForm: React.FC = () => {
                         <NativeSelect
                           data-testid="package-manager-select"
                           onChange={(e) => field.onChange(e.target.value)}
-                          value={field.value}
-                          disabled={field.disabled}
+                          value={override.value}
+                          disabled={field.disabled || override.isOverridden}
                           className="inline-flex mr-2"
                         >
                           {PackageManagerNames.map((option) => (
@@ -1084,10 +1050,7 @@ export const UserConfigForm: React.FC = () => {
                         </NativeSelect>
                       </FormControl>
                       <FormMessage />
-                      <IsOverridden
-                        userConfig={config}
-                        name="package_management.manager"
-                      />
+                      <IsOverridden override={override} />
                     </FormItem>
 
                     <FormDescription>
@@ -1111,17 +1074,17 @@ export const UserConfigForm: React.FC = () => {
               />
             </SettingGroup>
             <SettingGroup title="Data">
-              <DataForm form={form} config={config} onSubmit={onSubmit} />
+              <DataForm form={form} onSubmit={onSubmit} />
             </SettingGroup>
           </>
         );
       case "runtime":
         return (
           <SettingGroup title="Runtime configuration">
-            <FormField
+            <OverriddenFormField
               control={form.control}
               name="runtime.auto_instantiate"
-              render={({ field }) => (
+              render={({ field, override }) => (
                 <div className="flex flex-col gap-y-1">
                   <FormItem className={formItemClasses}>
                     <FormLabel className="font-normal">
@@ -1130,16 +1093,13 @@ export const UserConfigForm: React.FC = () => {
                     <FormControl>
                       <Checkbox
                         data-testid="auto-instantiate-checkbox"
-                        disabled={field.disabled}
-                        checked={field.value}
+                        disabled={field.disabled || override.isOverridden}
+                        checked={override.value}
                         onCheckedChange={field.onChange}
                       />
                     </FormControl>
                     <FormMessage />
-                    <IsOverridden
-                      userConfig={config}
-                      name="runtime.auto_instantiate"
-                    />
+                    <IsOverridden override={override} />
                   </FormItem>
 
                   <FormDescription>
@@ -1148,10 +1108,10 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
-            <FormField
+            <OverriddenFormField
               control={form.control}
               name="runtime.on_cell_change"
-              render={({ field }) => (
+              render={({ field, override }) => (
                 <div className="flex flex-col gap-y-1">
                   <FormItem className={formItemClasses}>
                     <FormLabel className="font-normal">
@@ -1161,7 +1121,8 @@ export const UserConfigForm: React.FC = () => {
                       <NativeSelect
                         data-testid="on-cell-change-select"
                         onChange={(e) => field.onChange(e.target.value)}
-                        value={field.value}
+                        value={override.value}
+                        disabled={override.isOverridden}
                         className="inline-flex mr-2"
                       >
                         {["lazy", "autorun"].map((option) => (
@@ -1172,10 +1133,7 @@ export const UserConfigForm: React.FC = () => {
                       </NativeSelect>
                     </FormControl>
                     <FormMessage />
-                    <IsOverridden
-                      userConfig={config}
-                      name="runtime.on_cell_change"
-                    />
+                    <IsOverridden override={override} />
                   </FormItem>
                   <FormDescription>
                     Whether marimo should automatically run cells or just mark
@@ -1187,10 +1145,10 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
-            <FormField
+            <OverriddenFormField
               control={form.control}
               name="runtime.auto_reload"
-              render={({ field }) => (
+              render={({ field, override }) => (
                 <div className="flex flex-col gap-y-1">
                   <FormItem className={formItemClasses}>
                     <FormLabel className="font-normal">
@@ -1200,8 +1158,8 @@ export const UserConfigForm: React.FC = () => {
                       <NativeSelect
                         data-testid="auto-reload-select"
                         onChange={(e) => field.onChange(e.target.value)}
-                        value={field.value}
-                        disabled={isWasmRuntime}
+                        value={override.value}
+                        disabled={isWasmRuntime || override.isOverridden}
                         className="inline-flex mr-2"
                       >
                         {["off", "lazy", "autorun"].map((option) => (
@@ -1212,10 +1170,7 @@ export const UserConfigForm: React.FC = () => {
                       </NativeSelect>
                     </FormControl>
                     <FormMessage />
-                    <IsOverridden
-                      userConfig={config}
-                      name="runtime.auto_reload"
-                    />
+                    <IsOverridden override={override} />
                   </FormItem>
                   <FormDescription>
                     Whether marimo should automatically reload modules before
@@ -1227,10 +1182,10 @@ export const UserConfigForm: React.FC = () => {
               )}
             />
 
-            <FormField
+            <OverriddenFormField
               control={form.control}
               name="runtime.reactive_tests"
-              render={({ field }) => (
+              render={({ field, override }) => (
                 <div className="flex flex-col gap-y-1">
                   <FormItem className={formItemClasses}>
                     <FormLabel className="font-normal">
@@ -1239,15 +1194,13 @@ export const UserConfigForm: React.FC = () => {
                     <FormControl>
                       <Checkbox
                         data-testid="reactive-test-checkbox"
-                        checked={field.value}
+                        checked={override.value}
+                        disabled={override.isOverridden}
                         onCheckedChange={field.onChange}
                       />
                     </FormControl>
                   </FormItem>
-                  <IsOverridden
-                    userConfig={config}
-                    name="runtime.reactive_tests"
-                  />
+                  <IsOverridden override={override} />
                   <FormMessage />
                   <FormDescription>
                     Enable reactive pytest tests in notebook. When a cell
@@ -1305,10 +1258,10 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
-            <FormField
+            <OverriddenFormField
               control={form.control}
               name="experimental.external_agents"
-              render={({ field }) => (
+              render={({ field, override }) => (
                 <div className="flex flex-col gap-y-1">
                   <FormItem className={formItemClasses}>
                     <FormLabel className="font-normal">
@@ -1317,15 +1270,13 @@ export const UserConfigForm: React.FC = () => {
                     <FormControl>
                       <Checkbox
                         data-testid="external-agents-checkbox"
-                        checked={field.value === true}
+                        checked={override.value === true}
+                        disabled={override.isOverridden}
                         onCheckedChange={field.onChange}
                       />
                     </FormControl>
                   </FormItem>
-                  <IsOverridden
-                    userConfig={config}
-                    name="experimental.external_agents"
-                  />
+                  <IsOverridden override={override} />
                   <FormDescription>
                     Enable experimental external agents such as Claude Code and
                     Gemini CLI. Learn more in the{" "}