@marimo-team/islands 0.23.11-dev13 → 0.23.11-dev18

package/dist/{toDate-d8RCRrRd.js → toDate-B4-pUFYh.js}

@@ -6,7 +6,7 @@ import { _ as Logger } from "./button-C5K9fIPF.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { u as createLucideIcon } from "./dist-Dk6PV_d3.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-BPeFKs1Q.js";
 import { t as invariant } from "./invariant-wRzNXIsJ.js";
 var CircleQuestionMark = createLucideIcon("circle-question-mark", [
   ["circle", {

package/dist/{useAsyncData-PonK__yh.js → useAsyncData-B3PfqrwD.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-BPeFKs1Q.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/{useDeepCompareMemoize-D3NGWke6.js → useDeepCompareMemoize-YInAvJP3.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-BPeFKs1Q.js";
 var import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function useDeepCompareMemoize(e) {
   let i = import_react.useRef(e);

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

@@ -4,7 +4,7 @@ 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 { 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-BPeFKs1Q.js";
 var Calendar = createLucideIcon("calendar", [
   ["path", {
     d: "M8 2v4",

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

@@ -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-CMicMpWX.js}

@@ -2,23 +2,23 @@ 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 { 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-B4-pUFYh.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 { 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-BPeFKs1Q.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-BOYEeoL_.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 { 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-B3PfqrwD.js";
+import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-YInAvJP3.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.11-dev13",
+  "version": "0.23.11-dev18",
   "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";
 
@@ -123,7 +127,6 @@ interface ApiKeyProps {
 
 export const ApiKey: React.FC<ApiKeyProps> = ({
   form,
-  config,
   name,
   placeholder,
   testId,
@@ -131,10 +134,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 +149,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 +161,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 +195,6 @@ function asStringOrEmpty<T>(value: T): string {
 
 export const BaseUrl: React.FC<BaseUrlProps> = ({
   form,
-  config,
   name,
   placeholder,
   testId,
@@ -200,10 +203,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 +217,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 +226,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 +248,6 @@ interface ModelSelectorProps {
 
 export const ModelSelector: React.FC<ModelSelectorProps> = ({
   form,
-  config,
   name,
   placeholder,
   description,
@@ -254,11 +256,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 +277,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                 value={value}
                 placeholder={placeholder}
                 onSelect={selectModel}
+                disabled={overridden}
                 triggerClassName="text-sm"
                 customDropdownContent={
                   <>
@@ -289,7 +293,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 +316,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 +337,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 +361,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 +378,7 @@ export const ProviderSelect: React.FC<ProviderSelectProps> = ({
               </NativeSelect>
             </FormControl>
             <FormMessage />
-            <IsOverridden userConfig={config} name={name} />
+            <IsOverridden override={override} />
           </FormItem>
         </div>
       )}
@@ -386,12 +390,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 +540,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 +565,7 @@ export const AiCodeCompletionConfig: React.FC<AiConfigProps> = ({
         testId="copilot-select"
       />
 
-      {renderCopilotProvider({ form, config, onSubmit })}
+      {renderCopilotProvider({ form, config, onSubmit, copilot })}
     </SettingGroup>
   );
 };
@@ -1134,11 +1148,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 +1161,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 +1176,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 +1185,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 +1200,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 +1389,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 +1402,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 +1859,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 +1900,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"