@marimo-team/islands 0.23.11-dev9 → 0.23.12-dev0

package/dist/{swiper-component-B2t5sN1q.js → swiper-component-BNa_4kh2.js}

@@ -1,9 +1,9 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { g as cn, l as useEventListener, t as Button } from "./button-C5K9fIPF.js";
+import { g as cn, l as useEventListener, t as Button } from "./button-vQhauTmO.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { t as useIframeCapabilities } from "./useIframeCapabilities-C4JTXTIh.js";
+import { t as useIframeCapabilities } from "./useIframeCapabilities-C6Ta3EyP.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function isObject$2(t2) {
   return typeof t2 == "object" && !!t2 && "constructor" in t2 && t2.constructor === Object;

package/dist/{toDate-d8RCRrRd.js → toDate-Do1xRzAo.js}

@@ -2,11 +2,11 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { t as __commonJSMin } from "./chunk-BNovOVIE.js";
-import { _ as Logger } from "./button-C5K9fIPF.js";
+import { _ as Logger } from "./button-vQhauTmO.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
+import { u as createLucideIcon } from "./dist-DYGLrbYQ.js";
 import { r as KnownQueryParams } from "./constants-T20xxyNf.js";
-import { b as atom, d as store, m as isIslands, p as waitFor } from "./useTheme-DEhDzATN.js";
+import { b as atom, d as store, m as isIslands, p as waitFor } from "./useTheme-ZhT6uIu3.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {

package/dist/{tooltip-DpcyNkQ2.js → tooltip-Bz3OAwrU.js}

@@ -1,10 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { f as createSlottable, g as cn, m as useComposedRefs } from "./button-C5K9fIPF.js";
+import { f as createSlottable, g as cn, m as useComposedRefs } from "./button-vQhauTmO.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-Dk6PV_d3.js";
+import { a as createPopperScope, i as Root2, n as Arrow, r as Content, s as Root, t as Anchor } from "./dist-DYGLrbYQ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { Q as withSmartCollisionBoundary, Z as withFullScreenAsRoot, _t as createContextScope, at as Portal, ct as DismissableLayer, dt as useId, et as StyleNamespace, ft as Presence, ht as composeEventHandlers, pt as useControllableState, vt as Primitive } from "./zod-aLSua2NL.js";
+import { Q as withSmartCollisionBoundary, Z as withFullScreenAsRoot, _t as createContextScope, at as Portal, ct as DismissableLayer, dt as useId, et as StyleNamespace, ft as Presence, ht as composeEventHandlers, pt as useControllableState, vt as Primitive } from "./zod-DXqkaI_w.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [createPopperScope]), usePopperScope = createPopperScope(), PROVIDER_NAME = "TooltipProvider", DEFAULT_DELAY_DURATION = 700, TOOLTIP_OPEN = "tooltip.open", [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME), TooltipProvider$1 = (n) => {
   let { __scopeTooltip: j, delayDuration: M = DEFAULT_DELAY_DURATION, skipDelayDuration: N = 300, disableHoverableContent: P = false, children: F } = n, I = import_react.useRef(true), L = import_react.useRef(false), R = import_react.useRef(0);
   return import_react.useEffect(() => {

package/dist/{types-ChtMFmZ2.js → types-D8gEGs4R.js}

@@ -1,4 +1,4 @@
-import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
+import { u as createLucideIcon } from "./dist-DYGLrbYQ.js";
 var Pencil = createLucideIcon("pencil", [["path", {
   d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
   key: "1a8usu"

package/dist/{useAsyncData-PonK__yh.js → useAsyncData-CL3o2p4i.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { T as useEvent_default } from "./useTheme-DEhDzATN.js";
+import { T as useEvent_default } from "./useTheme-ZhT6uIu3.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), Result = {
   error(e, s) {

package/dist/{useDateFormatter-QB-3MpYr.js → useDateFormatter-BC6iSz9g.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
-import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
-import { E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-J57tzLr3.js";
+import { u as createLucideIcon } from "./dist-DYGLrbYQ.js";
+import { E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-Cq2s9_EQ.js";
 var ChartPie = createLucideIcon("chart-pie", [["path", {
   d: "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z",
   key: "pzmjnu"

package/dist/{useDeepCompareMemoize-D3NGWke6.js → useDeepCompareMemoize-BPx2MuOK.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
-import { w as dequal } from "./useTheme-DEhDzATN.js";
+import { w as dequal } from "./useTheme-ZhT6uIu3.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function useDeepCompareMemoize(e) {
   let i = import_react.useRef(e);

package/dist/{useIframeCapabilities-C4JTXTIh.js → useIframeCapabilities-C6Ta3EyP.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { t as getIframeCapabilities } from "./capabilities-BceAxrAW.js";
+import { t as getIframeCapabilities } from "./capabilities-BEHzIS99.js";
 var import_compiler_runtime = require_compiler_runtime();
 require_react();
 function useIframeCapabilities() {

package/dist/{useLifecycle-00mO3OSS.js → useLifecycle-C3Ec71q0.js}

@@ -1,10 +1,10 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { _ as Logger, g as cn, r as cva } from "./button-C5K9fIPF.js";
+import { _ as Logger, g as cn, r as cva } from "./button-vQhauTmO.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
+import { u as createLucideIcon } from "./dist-DYGLrbYQ.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import { b as atom, v as useSetAtom } from "./useTheme-DEhDzATN.js";
+import { b as atom, v as useSetAtom } from "./useTheme-ZhT6uIu3.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

package/dist/{useTheme-DEhDzATN.js → useTheme-ZhT6uIu3.js}

@@ -1,8 +1,8 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { _ as Logger, a as OverridingHotkeyProvider, s as resolvePlatform } from "./button-C5K9fIPF.js";
+import { _ as Logger, a as OverridingHotkeyProvider, s as resolvePlatform } from "./button-vQhauTmO.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-aLSua2NL.js";
+import { A as looseObject, B as union, I as record, N as number, P as object, R as string, T as boolean, b as _enum, w as array } from "./zod-DXqkaI_w.js";
 import { t as merge_default } from "./merge-Be1CqGnU.js";
 var import_react = /* @__PURE__ */ __toESM(require_react()), useInsertionEffect = typeof window < "u" ? import_react.useInsertionEffect || import_react.useLayoutEffect : () => {
 };
@@ -539,7 +539,8 @@ var VALID_APP_WIDTHS = [
 const COPILOT_MODES = [
   "manual",
   "ask",
-  "agent"
+  "agent",
+  "code_mode"
 ];
 var AiConfigSchema = object({
   api_key: string().optional(),

package/dist/{vega-component-DGPUhbDs.js → vega-component-C3AWYGAL.js}

@@ -1,24 +1,24 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { _ as Logger, c as Objects, g as cn, h as Events } from "./button-C5K9fIPF.js";
+import { _ as Logger, c as Objects, g as cn, h as Events } from "./button-vQhauTmO.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
-import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-d8RCRrRd.js";
+import { c as asRemoteURL, v as CircleQuestionMark } from "./toDate-Do1xRzAo.js";
 import "./react-dom-BTJzcVJ9.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
-import "./zod-aLSua2NL.js";
-import { n as ErrorBanner } from "./error-banner-CJXYJ6Sb.js";
-import { t as Tooltip } from "./tooltip-DpcyNkQ2.js";
+import "./zod-DXqkaI_w.js";
+import { n as ErrorBanner } from "./error-banner-BHAkVFc2.js";
+import { t as Tooltip } from "./tooltip-Bz3OAwrU.js";
 import { i as debounce_default } from "./constants-T20xxyNf.js";
-import { T as useEvent_default, n as useTheme } from "./useTheme-DEhDzATN.js";
+import { T as useEvent_default, n as useTheme } from "./useTheme-ZhT6uIu3.js";
 import { s as uniq } from "./arrays-sEtDRoG4.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-C4wO47tk.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-BV4bOfMI.js";
 import { n as formats } from "./vega-loader.browser-CZ-J8Py3.js";
-import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-BWLPpjKK.js";
+import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-YPuQvn1Y.js";
 import { t as j } from "./react-vega-B0sAlDTL.js";
 import "./defaultLocale-u-3osm0P.js";
 import "./defaultLocale-BoHTsDG6.js";
-import { t as useAsyncData } from "./useAsyncData-PonK__yh.js";
-import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-D3NGWke6.js";
+import { t as useAsyncData } from "./useAsyncData-CL3o2p4i.js";
+import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-BPx2MuOK.js";
 import { t as Semaphore } from "./semaphore-CNDGTzkX.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function fixRelativeUrl(e) {

package/dist/{zod-aLSua2NL.js → zod-DXqkaI_w.js}

@@ -1,5 +1,5 @@
 import { r as __export, s as __toESM } from "./chunk-BNovOVIE.js";
-import { d as createSlot, l as useEventListener, m as useComposedRefs } from "./button-C5K9fIPF.js";
+import { d as createSlot, l as useEventListener, m as useComposedRefs } from "./button-vQhauTmO.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { t as require_react_dom } from "./react-dom-BTJzcVJ9.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.11-dev9",
+  "version": "0.23.12-dev0",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/ai/ai-model-dropdown.tsx

@@ -45,6 +45,7 @@ interface AIModelDropdownProps {
   showAddCustomModelDocs?: boolean;
   displayIconOnly?: boolean;
   forRole: SupportedRole;
+  disabled?: boolean;
 }
 
 export const AIModelDropdown = ({
@@ -57,6 +58,7 @@ export const AIModelDropdown = ({
   showAddCustomModelDocs = false,
   forRole,
   displayIconOnly = false,
+  disabled = false,
 }: AIModelDropdownProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
@@ -131,6 +133,9 @@ export const AIModelDropdown = ({
   };
 
   const handleSelect = (modelId: QualifiedModelId) => {
+    if (disabled) {
+      return;
+    }
     if (onSelect) {
       onSelect(modelId);
     } else {
@@ -142,6 +147,7 @@ export const AIModelDropdown = ({
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger
+        disabled={disabled}
         className={`flex items-center justify-between px-2 py-0.5 border rounded-md
             hover:bg-accent hover:text-accent-foreground ${triggerClassName}`}
       >

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"