@marimo-team/frontend 0.24.1-dev59 → 0.24.1-dev60

package/src/components/ai/__tests__/ai-utils.test.ts

@@ -46,6 +46,13 @@ vi.mock("@marimo-team/llm-info/models.json", () => {
         description: "Ollama Llama 2 model",
       }),
     ],
+    marimo: [
+      make({
+        name: "Best for chat",
+        model: "best-for-chat",
+        description: "marimo hosted chat model",
+      }),
+    ],
   };
 
   return { models };
@@ -54,8 +61,9 @@ vi.mock("@marimo-team/llm-info/models.json", () => {
 // Must import after mock
 import {
   autoPopulateModels,
-  getConfiguredProvider,
   getRecommendedModel,
+  listConfiguredProviders,
+  listModelsForAiSettings,
 } from "../ai-utils";
 
 describe("ai-utils", () => {
@@ -63,82 +71,72 @@ describe("ai-utils", () => {
     vi.clearAllMocks();
   });
 
-  describe("getConfiguredProvider", () => {
-    it("should return undefined when no AI config", () => {
-      const config: UserConfig = {} as UserConfig;
-      expect(getConfiguredProvider(config.ai)).toBeUndefined();
-    });
-
-    it("should return undefined when AI config has no credentials", () => {
-      const config: UserConfig = {
-        ai: {},
-      } as UserConfig;
-      expect(getConfiguredProvider(config.ai)).toBeUndefined();
-    });
-
-    it("should return openai when OpenAI API key is set", () => {
-      const config: UserConfig = {
-        ai: {
+  describe("listConfiguredProviders", () => {
+    it("returns known providers with credentials, then custom providers with a base URL", () => {
+      expect(
+        listConfiguredProviders({
+          wandb: { api_key: "unused" },
           open_ai: { api_key: "sk-test" },
-        },
-      } as UserConfig;
-      expect(getConfiguredProvider(config.ai)).toBe("openai");
-    });
-
-    it("should return anthropic when Anthropic API key is set", () => {
-      const config: UserConfig = {
-        ai: {
-          anthropic: { api_key: "sk-ant-test" },
-        },
-      } as UserConfig;
-      expect(getConfiguredProvider(config.ai)).toBe("anthropic");
+          open_ai_compatible: { api_key: "unused", base_url: "https://x" },
+          custom_providers: {
+            groq: { base_url: "https://api.groq.com" },
+            empty: {},
+          },
+        }),
+      ).toEqual(["openai", "wandb", "marimo", "groq"]);
     });
 
-    it("should return google when Google API key is set", () => {
-      const config: UserConfig = {
-        ai: {
-          google: { api_key: "google-key" },
-        },
-      } as UserConfig;
-      expect(getConfiguredProvider(config.ai)).toBe("google");
+    it("treats marimo as configured when open_ai_compatible has a base URL", () => {
+      expect(
+        listConfiguredProviders({
+          open_ai_compatible: { api_key: "unused", base_url: "https://x" },
+        }),
+      ).toEqual(["marimo"]);
     });
 
-    it("should return ollama when Ollama base URL is set", () => {
-      const config: UserConfig = {
-        ai: {
-          ollama: { base_url: "http://localhost:11434" },
-        },
-      } as UserConfig;
-      expect(getConfiguredProvider(config.ai)).toBe("ollama");
+    it("omits openai-compatible as its own provider id", () => {
+      expect(
+        listConfiguredProviders({
+          open_ai: {},
+          open_ai_compatible: { api_key: "unused" },
+        }),
+      ).toEqual([]);
     });
+  });
 
-    it("should return azure only when both API key and base URL are set", () => {
-      const config: UserConfig = {
-        ai: {
-          azure: { api_key: "azure-key", base_url: "https://azure.com" },
-        },
-      } as UserConfig;
-      expect(getConfiguredProvider(config.ai)).toBe("azure");
+  describe("listModelsForAiSettings", () => {
+    const entries: [string, number][] = [
+      ["openai", 1],
+      ["anthropic", 2],
+      ["wandb", 3],
+      ["marimo", 4],
+    ];
+
+    it("returns all groups when provider config is allowed", () => {
+      expect(
+        listModelsForAiSettings(entries, {
+          allow_provider_config: true,
+          wandb: { api_key: "unused" },
+        }),
+      ).toEqual(entries);
     });
 
-    it("should return undefined for azure with only API key", () => {
-      const config: UserConfig = {
-        ai: {
-          azure: { api_key: "azure-key" },
-        },
-      } as UserConfig;
-      expect(getConfiguredProvider(config.ai)).toBeUndefined();
+    it("filters to configured providers when provider config is locked", () => {
+      expect(
+        listModelsForAiSettings(entries, {
+          allow_provider_config: false,
+          wandb: { api_key: "unused" },
+        }),
+      ).toEqual([["wandb", 3]]);
     });
 
-    it("should return custom provider when configured", () => {
-      const config = {
-        ai: {
-          custom_providers: {
-            my_provider: { base_url: "https://my-api.com" },
-          },
-        },
-      } as unknown as UserConfig;
-      expect(getConfiguredProvider(config.ai)).toBe("my_provider");
+    it("keeps marimo models when locked with an openai-compatible gateway", () => {
+      expect(
+        listModelsForAiSettings(entries, {
+          allow_provider_config: false,
+          open_ai_compatible: { base_url: "https://ai.marimo.app/molab/v1" },
+        }),
+      ).toEqual([["marimo", 4]]);
     });
   });
 

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

@@ -33,6 +33,7 @@ import {
 } from "../ui/dropdown-menu";
 import { Tooltip } from "../ui/tooltip";
 import { AiProviderIcon } from "./ai-provider-icon";
+import { listModelsForAiSettings } from "./ai-utils";
 import { getCurrentRoleTooltip, getTagColour } from "./display-helpers";
 
 interface AIModelDropdownProps {
@@ -84,7 +85,10 @@ export const AIModelDropdown = ({
     ].filter(Boolean),
     displayedModels: ai?.models?.displayed_models,
   });
-  const modelsByProvider = aiModelRegistry.getListModelsByProvider();
+  const modelsByProvider = listModelsForAiSettings(
+    aiModelRegistry.getListModelsByProvider(),
+    ai,
+  );
 
   const activeModel =
     forRole === "autocomplete"

package/src/components/ai/ai-utils.ts

@@ -24,39 +24,55 @@ const CREDENTIAL_CHECKERS: Record<KnownProviderId, CredentialChecker> = {
   "opencode-go": (ai) => Boolean(ai?.opencode_go?.api_key),
   bedrock: (ai) => Boolean(ai?.bedrock?.region_name),
   ollama: (ai) => Boolean(ai?.ollama?.base_url),
-  // These providers don't have user-configurable credentials in the UI
+  // No user-configurable credentials in the UI.
   deepseek: () => false,
-  marimo: () => false,
+  // Hosted marimo models (marimo.app / molab) route through open_ai_compatible.
+  marimo: (ai) => Boolean(ai?.open_ai_compatible?.base_url),
 };
 
 /**
- * Returns the first configured provider based on credentials.
+ * Known providers with credentials, then custom providers with a base URL.
  */
-export function getConfiguredProvider(
-  config: UserConfig["ai"],
-): ProviderId | undefined {
-  for (const provider of KNOWN_PROVIDERS) {
-    if (CREDENTIAL_CHECKERS[provider](config)) {
-      return provider;
-    }
-  }
+export function listConfiguredProviders(
+  ai: AiConfig | undefined,
+): ProviderId[] {
+  const knownProviders = KNOWN_PROVIDERS.filter((provider) =>
+    CREDENTIAL_CHECKERS[provider](ai),
+  );
+  const customProviders = Object.entries(ai?.custom_providers ?? {})
+    .filter(([, providerConfig]) => Boolean(providerConfig?.base_url))
+    .map(([name]) => name);
+  return [...knownProviders, ...customProviders];
+}
 
-  // Check custom providers
-  const customProviders = config?.custom_providers;
-  if (customProviders) {
-    const firstCustomProvider = Object.entries(customProviders).find(
-      ([_, providerConfig]) => providerConfig?.base_url,
-    );
-    if (firstCustomProvider) {
-      return firstCustomProvider[0];
-    }
+/**
+ * Keep provider groups whose provider has credentials configured.
+ */
+export function filterToConfiguredProviders<T>(
+  entries: readonly [ProviderId, T][],
+  ai: AiConfig | undefined,
+): [ProviderId, T][] {
+  const configured = new Set<string>(listConfiguredProviders(ai));
+  return entries.filter(([provider]) => configured.has(provider));
+}
+
+/**
+ * When provider setup is locked, only show models for configured providers.
+ */
+export function listModelsForAiSettings<T>(
+  entries: readonly [ProviderId, T][],
+  ai: AiConfig | undefined,
+): [ProviderId, T][] {
+  if (ai?.allow_provider_config !== false) {
+    return [...entries];
   }
+  return filterToConfiguredProviders(entries, ai);
 }
 
 export function getRecommendedModel(
   config: UserConfig["ai"],
 ): string | undefined {
-  const provider = getConfiguredProvider(config);
+  const provider = listConfiguredProviders(config)[0];
   if (!provider) {
     return undefined;
   }

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

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import {
   BotIcon,
   BrainIcon,
@@ -43,6 +43,7 @@ import {
 } from "@/core/ai/ids/ids";
 import { type AiModel, AiModelRegistry } from "@/core/ai/model-registry";
 import { CopilotConfig } from "@/core/codemirror/copilot/copilot-config";
+import { resolvedMarimoConfigAtom } from "@/core/config/config";
 import { DEFAULT_AI_MODEL, type UserConfig } from "@/core/config/config-schema";
 import { isWasm } from "@/core/wasm/utils";
 import { cn } from "@/utils/cn";
@@ -53,6 +54,10 @@ import {
   AiProviderIcon,
   type AiProviderIconProps,
 } from "../ai/ai-provider-icon";
+import {
+  listConfiguredProviders,
+  listModelsForAiSettings,
+} from "../ai/ai-utils";
 import { getTagColour } from "../ai/display-helpers";
 import {
   Accordion,
@@ -575,6 +580,11 @@ export const AiCodeCompletionConfig: React.FC<AiConfigProps> = ({
   );
 };
 
+function useAllowProviderConfig(): boolean {
+  const ai = useAtomValue(resolvedMarimoConfigAtom).ai;
+  return ai?.allow_provider_config !== false;
+}
+
 const AccordionFormItem = ({
   title,
   triggerClassName,
@@ -867,17 +877,55 @@ export const CustomProvidersConfig: React.FC<AiConfigProps> = ({
   );
 };
 
+const LockedProvidersList: React.FC = () => {
+  const resolvedAi = useAtomValue(resolvedMarimoConfigAtom).ai;
+  const providers = listConfiguredProviders(resolvedAi);
+
+  return (
+    <SettingGroup>
+      <p className="text-sm text-muted-secondary">
+        AI providers are configured for this environment. You cannot add your
+        own keys or custom providers.
+      </p>
+      {providers.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          No AI providers are configured.
+        </p>
+      ) : (
+        <div className="flex flex-col divide-y border rounded-md">
+          {providers.map((provider) => (
+            <div key={provider} className="flex items-center gap-2 px-3 py-2">
+              <AiProviderIcon provider={provider} className="h-4 w-4" />
+              <span className="text-sm font-medium">
+                {getProviderLabel(provider)}
+              </span>
+              <span className="ml-auto px-1 rounded bg-muted text-xs font-medium border">
+                Configured
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </SettingGroup>
+  );
+};
+
 export const AiProvidersConfig: React.FC<AiConfigProps> = ({
   form,
   config,
   onSubmit,
 }) => {
   const isWasmRuntime = isWasm();
+  const allowProviderConfig = useAllowProviderConfig();
 
   const hasValue = (name: FieldPath<UserConfig>) => {
     return !!form.getValues(name);
   };
 
+  if (!allowProviderConfig) {
+    return <LockedProvidersList />;
+  }
+
   return (
     <SettingGroup>
       <p className="text-sm text-muted-secondary">
@@ -1508,6 +1556,8 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
   form,
   onSubmit,
 }) => {
+  const resolvedAi = useAtomValue(resolvedMarimoConfigAtom).ai;
+
   const customModels = useWatch({
     control: form.control,
     name: "ai.models.custom_models",
@@ -1518,10 +1568,14 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
     name: "ai.custom_providers",
   }) as Record<string, CustomProviderConfig> | undefined;
 
-  const customProviderNames = useMemo(
-    () => Object.keys(customProviders || {}),
-    [customProviders],
-  );
+  const customProviderNames = useMemo(() => {
+    return [
+      ...new Set([
+        ...Object.keys(customProviders || {}),
+        ...Object.keys(resolvedAi?.custom_providers || {}),
+      ]),
+    ];
+  }, [customProviders, resolvedAi]);
 
   const aiModelRegistry = useMemo(
     () =>
@@ -1538,7 +1592,10 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
   }) as QualifiedModelId[];
   const currentDisplayedModelsSet = new Set(currentDisplayedModels);
   const modelsByProvider = aiModelRegistry.getGroupedModelsByProvider();
-  const listModelsByProvider = aiModelRegistry.getListModelsByProvider();
+  const listModelsByProvider = listModelsForAiSettings(
+    aiModelRegistry.getListModelsByProvider(),
+    resolvedAi,
+  );
 
   const toggleModelDisplay = useEvent((modelId: QualifiedModelId) => {
     const newModels = currentDisplayedModelsSet.has(modelId)
@@ -1676,6 +1733,9 @@ export const AddModelForm: React.FC<{
   };
 
   const providerClassName = "w-40 truncate";
+  const knownProviders = KNOWN_PROVIDERS.filter(
+    (p) => p !== "marimo" && !customProviderNames.includes(p),
+  );
 
   const providerSelect = (
     <div className="flex flex-col gap-2">
@@ -1718,14 +1778,14 @@ export const AddModelForm: React.FC<{
                       </div>
                     </SelectItem>
                   ))}
-                  <p className="px-2 py-1 text-xs text-muted-secondary font-medium mt-1">
-                    Built-in Providers
-                  </p>
+                  {knownProviders.length > 0 && (
+                    <p className="px-2 py-1 text-xs text-muted-secondary font-medium mt-1">
+                      Built-in Providers
+                    </p>
+                  )}
                 </>
               )}
-              {KNOWN_PROVIDERS.filter(
-                (p) => p !== "marimo" && !customProviderNames.includes(p),
-              ).map((p) => (
+              {knownProviders.map((p) => (
                 <SelectItem key={p} value={p}>
                   <div className="flex items-center gap-2">
                     <AiProviderIcon provider={p} className="h-4 w-4" />
@@ -1733,18 +1793,20 @@ export const AddModelForm: React.FC<{
                   </div>
                 </SelectItem>
               ))}
-              <p className="px-2 py-1 text-xs text-muted-secondary font-medium mt-1">
-                Other
-              </p>
-              <SelectItem value="custom">
-                <div className="flex items-center gap-2">
-                  <AiProviderIcon
-                    provider="openai-compatible"
-                    className="h-4 w-4"
-                  />
-                  <span>Enter provider name</span>
-                </div>
-              </SelectItem>
+              <>
+                <p className="px-2 py-1 text-xs text-muted-secondary font-medium mt-1">
+                  Other
+                </p>
+                <SelectItem value="custom">
+                  <div className="flex items-center gap-2">
+                    <AiProviderIcon
+                      provider="openai-compatible"
+                      className="h-4 w-4"
+                    />
+                    <span>Enter provider name</span>
+                  </div>
+                </SelectItem>
+              </>
             </SelectGroup>
           </SelectContent>
         </Select>

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

@@ -2,7 +2,6 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
-import { merge } from "lodash-es";
 import {
   AlertTriangleIcon,
   BrainIcon,
@@ -35,7 +34,7 @@ import { NumberField } from "@/components/ui/number-field";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { KEYMAP_PRESETS } from "@/core/codemirror/keymaps/keymaps";
 import { capabilitiesAtom } from "@/core/config/capabilities";
-import { useUserConfig } from "@/core/config/config";
+import { mergeConfig, useUserConfig } from "@/core/config/config";
 import {
   PackageManagerNames,
   type UserConfig,
@@ -203,7 +202,7 @@ export const UserConfigForm: React.FC = () => {
     await saveUserConfig({ config: dirtyValues });
     // Only apply the changed keys; this avoids stale request responses
     // overwriting newer config changes.
-    setConfig((prev) => merge({}, prev, dirtyValues));
+    setConfig((prev) => mergeConfig(prev, dirtyValues));
   };
   const onSubmit = useDebouncedCallback(onSubmitNotDebounced, FORM_DEBOUNCE);
 

package/src/core/ai/config.ts

@@ -2,9 +2,8 @@
 
 import type { Role } from "@marimo-team/llm-info";
 import { useSetAtom } from "jotai";
-import { merge } from "lodash-es";
 import type { QualifiedModelId } from "@/core/ai/ids/ids";
-import { userConfigAtom } from "@/core/config/config";
+import { mergeConfig, userConfigAtom } from "@/core/config/config";
 import type {
   AIModelKey,
   CopilotMode,
@@ -41,7 +40,7 @@ export const useAIConfigActions = () => {
   const saveConfig = async (aiConfig: AiConfigPatch) => {
     const newConfig = { ai: aiConfig };
     await saveUserConfig({ config: newConfig }).then(() => {
-      setUserConfig((prev) => merge({}, prev, newConfig));
+      setUserConfig((prev) => mergeConfig(prev, newConfig));
     });
   };
 

package/src/core/config/__tests__/config-schema.test.ts

@@ -5,6 +5,7 @@ import { expect, test } from "vitest";
 import {
   configOverridesAtom,
   connectionTransportTypeAtom,
+  mergeConfig,
   resolvedMarimoConfigAtom,
   userConfigAtom,
 } from "../config";
@@ -46,6 +47,7 @@ test("default UserConfig - empty", () => {
   expect(defaultConfig).toMatchInlineSnapshot(`
     {
       "ai": {
+        "allow_provider_config": true,
         "custom_providers": {},
         "enabled": true,
         "inline_tooltip": false,
@@ -120,6 +122,7 @@ test("default UserConfig - one level", () => {
   expect(defaultConfig).toMatchInlineSnapshot(`
     {
       "ai": {
+        "allow_provider_config": true,
         "custom_providers": {},
         "enabled": true,
         "inline_tooltip": false,
@@ -315,3 +318,31 @@ test("connectionTransportTypeAtom reads server.transport", () => {
   });
   expect(store.get(connectionTransportTypeAtom)).toBe("sse");
 });
+
+test("mergeConfig replaces arrays instead of merging by index", () => {
+  const prev = {
+    ai: {
+      models: {
+        displayed_models: ["wandb/a", "wandb/b", "wandb/c"],
+        custom_models: ["wandb/custom"],
+      },
+    },
+  };
+  const patch = {
+    ai: {
+      models: {
+        displayed_models: ["wandb/a"],
+        custom_models: [],
+      },
+    },
+  };
+
+  expect(mergeConfig(prev, patch)).toEqual({
+    ai: {
+      models: {
+        displayed_models: ["wandb/a"],
+        custom_models: [],
+      },
+    },
+  });
+});

package/src/core/config/config-schema.ts

@@ -169,6 +169,7 @@ export const UserConfigSchema = z
         max_tokens: z.number().int().positive().nullable().optional(),
         mode: z.enum(COPILOT_MODES).prefault("manual"),
         inline_tooltip: z.boolean().prefault(false),
+        allow_provider_config: z.boolean().prefault(true),
         open_ai: AiConfigSchema.optional(),
         anthropic: AiConfigSchema.optional(),
         google: AiConfigSchema.optional(),

package/src/core/config/config.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
-import { merge } from "lodash-es";
+import { mergeWith } from "lodash-es";
 import { OverridingHotkeyProvider } from "../hotkeys/hotkeys";
 import { type Platform, resolvePlatform } from "../hotkeys/shortcuts";
 import { store } from "../state/jotai";
@@ -11,6 +11,19 @@ import {
   type UserConfig,
 } from "./config-schema";
 
+/**
+ * Deep-merge config objects, replacing arrays instead of merging them by
+ * index. Lodash `merge` keeps leftover tail items. Python `deep_merge` replaces arrays.
+ */
+export function mergeConfig<T extends object>(...sources: object[]): T {
+  return mergeWith({}, ...sources, (_obj: unknown, src: unknown) => {
+    if (Array.isArray(src)) {
+      return [...src];
+    }
+    return undefined;
+  }) as T;
+}
+
 /**
  * Atom for storing the user config.
  */
@@ -21,7 +34,7 @@ export const configOverridesAtom = atom<{}>({});
 export const resolvedMarimoConfigAtom = atom<UserConfig>((get) => {
   const overrides = get(configOverridesAtom);
   const userConfig = get(userConfigAtom);
-  return merge({}, userConfig, overrides);
+  return mergeConfig(userConfig, overrides);
 });
 
 export const autoInstantiateAtom = atom((get) => {