@marimo-team/frontend 0.23.11-dev2 → 0.23.11-dev20

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

@@ -79,7 +79,11 @@ import { Tooltip } from "../ui/tooltip";
 import { formItemClasses, SettingSubtitle } from "./common";
 import { AWS_REGIONS } from "./constants";
 import { IncorrectModelId } from "./incorrect-model-id";
-import { IsOverridden } from "./is-overridden";
+import {
+  IsOverridden,
+  OverriddenFormField,
+  useConfigOverride,
+} from "./is-overridden";
 import { MCPConfig } from "./mcp-config";
 import { aiSettingsSubTabAtom } from "./state";
 
@@ -99,6 +103,11 @@ interface CustomProviderConfig {
   base_url?: string;
 }
 
+const SUPPORTED_PROVIDERS_UI = new Set(KNOWN_PROVIDERS);
+// We use deepseek as an example of a custom provider in our docs, so we don't show it in the UI.
+// Else, we would need to wire up the UI and config for it. Consider if many users request.
+SUPPORTED_PROVIDERS_UI.delete("deepseek");
+
 export const AiProviderTitle: React.FC<AiProviderTitleProps> = ({
   provider,
   children,
@@ -123,7 +132,6 @@ interface ApiKeyProps {
 
 export const ApiKey: React.FC<ApiKeyProps> = ({
   form,
-  config,
   name,
   placeholder,
   testId,
@@ -131,10 +139,10 @@ export const ApiKey: React.FC<ApiKeyProps> = ({
   onChange,
 }) => {
   return (
-    <FormField
+    <OverriddenFormField
       control={form.control}
       name={name}
-      render={({ field }) => (
+      render={({ field, override }) => (
         <div className="flex flex-col space-y-1">
           <FormItem className={formItemClasses}>
             <FormLabel>API Key</FormLabel>
@@ -146,7 +154,8 @@ export const ApiKey: React.FC<ApiKeyProps> = ({
                 placeholder={placeholder}
                 type="password"
                 {...field}
-                value={asStringOrEmpty(field.value)}
+                value={asStringOrEmpty(override.value)}
+                disabled={override.isOverridden}
                 onChange={(e) => {
                   const value = e.target.value;
                   if (!value.includes("*")) {
@@ -157,7 +166,7 @@ export const ApiKey: React.FC<ApiKeyProps> = ({
               />
             </FormControl>
             <FormMessage />
-            <IsOverridden userConfig={config} name={name} />
+            <IsOverridden override={override} />
           </FormItem>
           {description && <FormDescription>{description}</FormDescription>}
         </div>
@@ -191,7 +200,6 @@ function asStringOrEmpty<T>(value: T): string {
 
 export const BaseUrl: React.FC<BaseUrlProps> = ({
   form,
-  config,
   name,
   placeholder,
   testId,
@@ -200,10 +208,10 @@ export const BaseUrl: React.FC<BaseUrlProps> = ({
   onChange,
 }) => {
   return (
-    <FormField
+    <OverriddenFormField
       control={form.control}
       name={name}
-      render={({ field }) => (
+      render={({ field, override }) => (
         <div className="flex flex-col space-y-1">
           <FormItem className={formItemClasses}>
             <FormLabel>Base URL</FormLabel>
@@ -214,8 +222,8 @@ export const BaseUrl: React.FC<BaseUrlProps> = ({
                 className="m-0 inline-flex h-7"
                 placeholder={placeholder}
                 {...field}
-                value={asStringOrEmpty(field.value)}
-                disabled={disabled}
+                value={asStringOrEmpty(override.value)}
+                disabled={disabled || override.isOverridden}
                 onChange={(e) => {
                   field.onChange(e.target.value);
                   onChange?.(e.target.value);
@@ -223,7 +231,7 @@ export const BaseUrl: React.FC<BaseUrlProps> = ({
               />
             </FormControl>
             <FormMessage />
-            <IsOverridden userConfig={config} name={name} />
+            <IsOverridden override={override} />
           </FormItem>
           {description && <FormDescription>{description}</FormDescription>}
         </div>
@@ -245,7 +253,6 @@ interface ModelSelectorProps {
 
 export const ModelSelector: React.FC<ModelSelectorProps> = ({
   form,
-  config,
   name,
   placeholder,
   description,
@@ -254,11 +261,12 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   onSubmit,
 }) => {
   return (
-    <FormField
+    <OverriddenFormField
       control={form.control}
       name={name}
-      render={({ field }) => {
-        const value = asStringOrEmpty(field.value);
+      render={({ field, override }) => {
+        const value = asStringOrEmpty(override.value);
+        const overridden = override.isOverridden;
 
         const selectModel = (modelId: QualifiedModelId) => {
           field.onChange(modelId);
@@ -274,6 +282,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                 value={value}
                 placeholder={placeholder}
                 onSelect={selectModel}
+                disabled={overridden}
                 triggerClassName="text-sm"
                 customDropdownContent={
                   <>
@@ -289,7 +298,8 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                         className="w-full border-border shadow-none focus-visible:shadow-xs"
                         placeholder={placeholder}
                         {...field}
-                        value={asStringOrEmpty(field.value)}
+                        value={value}
+                        disabled={overridden}
                         onKeyDown={Events.stopPropagation()}
                       />
                       {value && (
@@ -311,7 +321,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
         return (
           <div className="flex flex-col space-y-1">
             {renderFormItem()}
-            <IsOverridden userConfig={config} name={name} />
+            <IsOverridden override={override} />
             <IncorrectModelId value={value} />
             {description && <FormDescription>{description}</FormDescription>}
           </div>
@@ -332,17 +342,16 @@ interface ProviderSelectProps {
 
 export const ProviderSelect: React.FC<ProviderSelectProps> = ({
   form,
-  config,
   name,
   options,
   testId,
   disabled = false,
 }) => {
   return (
-    <FormField
+    <OverriddenFormField
       control={form.control}
       name={name}
-      render={({ field }) => (
+      render={({ field, override }) => (
         <div className="flex flex-col space-y-1">
           <FormItem className={formItemClasses}>
             <FormLabel>Provider</FormLabel>
@@ -357,13 +366,13 @@ export const ProviderSelect: React.FC<ProviderSelectProps> = ({
                   }
                 }}
                 value={asStringOrEmpty(
-                  field.value === true
+                  override.value === true
                     ? "github"
-                    : field.value === false
+                    : override.value === false
                       ? "none"
-                      : field.value,
+                      : override.value,
                 )}
-                disabled={disabled}
+                disabled={disabled || override.isOverridden}
                 className="inline-flex mr-2"
               >
                 {options.map((option) => (
@@ -374,7 +383,7 @@ export const ProviderSelect: React.FC<ProviderSelectProps> = ({
               </NativeSelect>
             </FormControl>
             <FormMessage />
-            <IsOverridden userConfig={config} name={name} />
+            <IsOverridden override={override} />
           </FormItem>
         </div>
       )}
@@ -386,12 +395,13 @@ const renderCopilotProvider = ({
   form,
   config,
   onSubmit,
+  copilot,
 }: {
   form: UseFormReturn<UserConfig>;
   config: UserConfig;
   onSubmit: (values: UserConfig) => void;
+  copilot: UserConfig["completion"]["copilot"];
 }) => {
-  const copilot = form.getValues("completion.copilot");
   if (copilot === false) {
     return null;
   }
@@ -535,6 +545,15 @@ export const AiCodeCompletionConfig: React.FC<AiConfigProps> = ({
   config,
   onSubmit,
 }) => {
+  const getOverride = useConfigOverride();
+  // Watch (not `getValues`) so the sub-form re-renders when the provider
+  // changes, then resolve the effective value so an overridden
+  // `completion.copilot` shows the matching sub-form (not the user's saved one).
+  const watchedCopilot = useWatch({
+    control: form.control,
+    name: "completion.copilot",
+  });
+  const { value: copilot } = getOverride("completion.copilot", watchedCopilot);
   return (
     <SettingGroup>
       <SettingSubtitle>Code Completion</SettingSubtitle>
@@ -551,7 +570,7 @@ export const AiCodeCompletionConfig: React.FC<AiConfigProps> = ({
         testId="copilot-select"
       />
 
-      {renderCopilotProvider({ form, config, onSubmit })}
+      {renderCopilotProvider({ form, config, onSubmit, copilot })}
     </SettingGroup>
   );
 };
@@ -608,7 +627,7 @@ export const CustomProvidersConfig: React.FC<AiConfigProps> = ({
   const normalizedName = newProviderName.toLowerCase().replaceAll(/\s+/g, "_");
   const customProviders = form.watch("ai.custom_providers");
   const isDuplicate =
-    KNOWN_PROVIDERS.includes(normalizedName as KnownProviderId) ||
+    SUPPORTED_PROVIDERS_UI.has(normalizedName as KnownProviderId) ||
     (customProviders && Object.keys(customProviders).includes(normalizedName));
   const hasInvalidChars = normalizedName.includes(".");
 
@@ -1134,11 +1153,11 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
             for more details.
           </p>
 
-          <FormField
+          <OverriddenFormField
             control={form.control}
             disabled={isWasmRuntime}
             name="ai.bedrock.region_name"
-            render={({ field }) => (
+            render={({ field, override }) => (
               <div className="flex flex-col space-y-1">
                 <FormItem className={formItemClasses}>
                   <FormLabel>AWS Region</FormLabel>
@@ -1147,11 +1166,11 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
                       data-testid="bedrock-region-select"
                       onChange={(e) => field.onChange(e.target.value)}
                       value={
-                        typeof field.value === "string"
-                          ? field.value
+                        typeof override.value === "string"
+                          ? override.value
                           : "us-east-1"
                       }
-                      disabled={field.disabled}
+                      disabled={field.disabled || override.isOverridden}
                       className="inline-flex mr-2"
                     >
                       {AWS_REGIONS.map((option) => (
@@ -1162,10 +1181,7 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
                     </NativeSelect>
                   </FormControl>
                   <FormMessage />
-                  <IsOverridden
-                    userConfig={config}
-                    name="ai.bedrock.region_name"
-                  />
+                  <IsOverridden override={override} />
                 </FormItem>
                 <FormDescription>
                   The AWS region where Bedrock service is available.
@@ -1174,11 +1190,11 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
             )}
           />
 
-          <FormField
+          <OverriddenFormField
             control={form.control}
             disabled={isWasmRuntime}
             name="ai.bedrock.profile_name"
-            render={({ field }) => (
+            render={({ field, override }) => (
               <div className="flex flex-col space-y-1">
                 <FormItem className={formItemClasses}>
                   <FormLabel>AWS Profile Name (Optional)</FormLabel>
@@ -1189,14 +1205,12 @@ export const AiProvidersConfig: React.FC<AiConfigProps> = ({
                       className="m-0 inline-flex h-7"
                       placeholder="default"
                       {...field}
-                      value={field.value || ""}
+                      value={override.value || ""}
+                      disabled={field.disabled || override.isOverridden}
                     />
                   </FormControl>
                   <FormMessage />
-                  <IsOverridden
-                    userConfig={config}
-                    name="ai.bedrock.profile_name"
-                  />
+                  <IsOverridden override={override} />
                 </FormItem>
                 <FormDescription>
                   The AWS profile name from your ~/.aws/credentials file. Leave
@@ -1380,10 +1394,10 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
         onSubmit={onSubmit}
       />
 
-      <FormField
+      <OverriddenFormField
         control={form.control}
         name="ai.rules"
-        render={({ field }) => (
+        render={({ field, override }) => (
           <div className="flex flex-col">
             <FormItem>
               <FormLabel>Custom Rules</FormLabel>
@@ -1393,11 +1407,12 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
                   className="m-0 inline-flex w-full h-32 p-2 text-sm"
                   placeholder="e.g. Always use type hints; prefer polars over pandas"
                   {...field}
-                  value={field.value}
+                  value={override.value}
+                  disabled={override.isOverridden}
                 />
               </FormControl>
               <FormMessage />
-              <IsOverridden userConfig={config} name="ai.rules" />
+              <IsOverridden override={override} />
             </FormItem>
             <FormDescription>
               Custom rules to include in all AI completion prompts.
@@ -1849,26 +1864,27 @@ export type AiSettingsSubTab =
   | "ai-models"
   | "mcp";
 
-const AiEnabledConfig: React.FC<AiConfigProps> = ({ form, config }) => {
+const AiEnabledConfig: React.FC<AiConfigProps> = ({ form }) => {
   return (
     <SettingGroup>
-      <FormField
+      <OverriddenFormField
         control={form.control}
         name="ai.enabled"
-        render={({ field }) => (
+        render={({ field, override }) => (
           <div className="flex flex-col gap-y-1">
             <FormItem className={formItemClasses}>
               <FormLabel className="font-normal">Enable AI features</FormLabel>
               <FormControl>
                 <Checkbox
                   data-testid="ai-enabled-checkbox"
-                  checked={field.value !== false}
+                  checked={override.value !== false}
+                  disabled={override.isOverridden}
                   onCheckedChange={(checked) =>
                     field.onChange(checked === true)
                   }
                 />
               </FormControl>
-              <IsOverridden userConfig={config} name="ai.enabled" />
+              <IsOverridden override={override} />
             </FormItem>
             <FormDescription>
               When disabled, AI actions and panels are hidden from the marimo
@@ -1889,10 +1905,12 @@ export const AiConfig: React.FC<AiConfigProps> = ({
   // MCP is not supported in WASM
   const wasm = isWasm();
   const [activeTab, setActiveTab] = useAtom(aiSettingsSubTabAtom);
-  const aiEnabled = useWatch({
+  const getOverride = useConfigOverride();
+  const watchedAiEnabled = useWatch({
     control: form.control,
     name: "ai.enabled",
   });
+  const { value: aiEnabled } = getOverride("ai.enabled", watchedAiEnabled);
   const activeVisibleTab =
     aiEnabled === false && activeTab !== "ai-features"
       ? "ai-features"

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

@@ -5,7 +5,6 @@ import type { FieldPath, UseFormReturn } from "react-hook-form";
 import {
   FormControl,
   FormDescription,
-  FormField,
   FormItem,
   FormLabel,
   FormMessage,
@@ -19,25 +18,23 @@ import {
   SettingGroup,
   SQL_OUTPUT_SELECT_OPTIONS,
 } from "./common";
-import { IsOverridden } from "./is-overridden";
+import { IsOverridden, OverriddenFormField } from "./is-overridden";
 
 const DISCOVERY_OPTIONS = ["auto", "true", "false"];
 
 export const DataForm = ({
   form,
-  config,
   onSubmit,
 }: {
   form: UseFormReturn<UserConfig>;
-  config: UserConfig;
   onSubmit: (values: UserConfig) => void;
 }) => {
   const renderDiscoveryForm = (name: FieldPath<UserConfig>, label: string) => {
     return (
-      <FormField
+      <OverriddenFormField
         control={form.control}
         name={name}
-        render={({ field }) => {
+        render={({ field, override }) => {
           const onChange = (e: ChangeEvent<HTMLSelectElement>) => {
             const value = e.target.value;
             field.onChange(
@@ -54,9 +51,11 @@ export const DataForm = ({
                   data-testid="auto-discover-schemas-select"
                   onChange={onChange}
                   value={
-                    field.value === undefined ? "auto" : field.value.toString()
+                    override.value === undefined
+                      ? "auto"
+                      : override.value.toString()
                   }
-                  disabled={field.disabled}
+                  disabled={field.disabled || override.isOverridden}
                   className="w-[100px]"
                 >
                   {DISCOVERY_OPTIONS.map((option) => (
@@ -66,7 +65,7 @@ export const DataForm = ({
                   ))}
                 </NativeSelect>
               </FormControl>
-              <IsOverridden userConfig={config} name={name} />
+              <IsOverridden override={override} />
             </FormItem>
           );
         }}
@@ -76,10 +75,10 @@ export const DataForm = ({
 
   return (
     <>
-      <FormField
+      <OverriddenFormField
         control={form.control}
         name="display.dataframes"
-        render={({ field }) => (
+        render={({ field, override }) => (
           <div className="flex flex-col space-y-1">
             <FormItem className={formItemClasses}>
               <FormLabel>Dataframe viewer</FormLabel>
@@ -87,8 +86,8 @@ export const DataForm = ({
                 <NativeSelect
                   data-testid="display-dataframes-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"
                 >
                   {["rich", "plain"].map((option) => (
@@ -99,7 +98,7 @@ export const DataForm = ({
                 </NativeSelect>
               </FormControl>
               <FormMessage />
-              <IsOverridden userConfig={config} name="display.dataframes" />
+              <IsOverridden override={override} />
             </FormItem>
 
             <FormDescription>
@@ -109,10 +108,10 @@ export const DataForm = ({
           </div>
         )}
       />
-      <FormField
+      <OverriddenFormField
         control={form.control}
         name="display.default_table_page_size"
-        render={({ field }) => (
+        render={({ field, override }) => (
           <div className="flex flex-col space-y-1">
             <FormItem className={formItemClasses}>
               <FormLabel>Default table page size</FormLabel>
@@ -122,7 +121,8 @@ export const DataForm = ({
                   data-testid="default-table-page-size-input"
                   className="m-0 w-24"
                   {...field}
-                  value={field.value}
+                  value={override.value}
+                  isDisabled={override.isOverridden}
                   minValue={1}
                   step={1}
                   onChange={(value) => {
@@ -134,10 +134,7 @@ export const DataForm = ({
                 />
               </FormControl>
               <FormMessage />
-              <IsOverridden
-                userConfig={config}
-                name="display.default_table_page_size"
-              />
+              <IsOverridden override={override} />
             </FormItem>
             <FormDescription>
               The default number of rows displayed in dataframes and SQL
@@ -146,10 +143,10 @@ export const DataForm = ({
           </div>
         )}
       />
-      <FormField
+      <OverriddenFormField
         control={form.control}
         name="display.default_table_max_columns"
-        render={({ field }) => (
+        render={({ field, override }) => (
           <div className="flex flex-col space-y-1">
             <FormItem className={formItemClasses}>
               <FormLabel>Default table max columns</FormLabel>
@@ -159,7 +156,8 @@ export const DataForm = ({
                   data-testid="default-table-max-columns-input"
                   className="m-0 w-24"
                   {...field}
-                  value={field.value}
+                  value={override.value}
+                  isDisabled={override.isOverridden}
                   minValue={1}
                   step={1}
                   onChange={(value) => {
@@ -171,10 +169,7 @@ export const DataForm = ({
                 />
               </FormControl>
               <FormMessage />
-              <IsOverridden
-                userConfig={config}
-                name="display.default_table_max_columns"
-              />
+              <IsOverridden override={override} />
             </FormItem>
             <FormDescription>
               The default maximum number of columns displayed in dataframes and
@@ -213,25 +208,23 @@ export const DataForm = ({
           {renderDiscoveryForm("datasources.auto_discover_columns", "Columns")}
         </div>
 
-        <FormField
+        <OverriddenFormField
           control={form.control}
           name="diagnostics.sql_linter"
-          render={({ field }) => (
+          render={({ field, override }) => (
             <div className="flex flex-col space-y-1">
               <FormItem className={formItemClasses}>
                 <FormLabel>SQL Linter</FormLabel>
                 <FormControl>
                   <Checkbox
                     data-testid="sql-linter-checkbox"
-                    checked={field.value}
+                    checked={override.value}
+                    disabled={override.isOverridden}
                     onCheckedChange={field.onChange}
                   />
                 </FormControl>
                 <FormMessage />
-                <IsOverridden
-                  userConfig={config}
-                  name="diagnostics.sql_linter"
-                />
+                <IsOverridden override={override} />
               </FormItem>
               <FormDescription>
                 Better linting and autocompletions for SQL cells.
@@ -240,10 +233,10 @@ export const DataForm = ({
           )}
         />
 
-        <FormField
+        <OverriddenFormField
           control={form.control}
           name="runtime.default_sql_output"
-          render={({ field }) => (
+          render={({ field, override }) => (
             <div className="flex flex-col space-y-1">
               <FormItem className={formItemClasses}>
                 <FormLabel>Default SQL output</FormLabel>
@@ -251,8 +244,8 @@ export const DataForm = ({
                   <NativeSelect
                     data-testid="user-config-sql-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"
                   >
                     {SQL_OUTPUT_SELECT_OPTIONS.map((option) => (
@@ -263,10 +256,7 @@ export const DataForm = ({
                   </NativeSelect>
                 </FormControl>
                 <FormMessage />
-                <IsOverridden
-                  userConfig={config}
-                  name="runtime.default_sql_output"
-                />
+                <IsOverridden override={override} />
               </FormItem>
 
               <FormDescription>