@marimo-team/islands 0.23.17-dev43 → 0.23.17-dev45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.17-dev43",
+  "version": "0.23.17-dev45",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -9,7 +9,7 @@ import {
   CircleHelpIcon,
 } from "lucide-react";
 import React from "react";
-import { type SupportedRole, useModelChange } from "@/core/ai/config";
+import { type SupportedRole, useAIConfigActions } from "@/core/ai/config";
 import {
   AiModelId,
   isKnownAIProvider,
@@ -64,7 +64,7 @@ export const AIModelDropdown = ({
 
   const ai = useAtomValue(aiAtom);
   const completion = useAtomValue(completionAtom);
-  const { saveModelChange } = useModelChange();
+  const { saveModelChange } = useAIConfigActions();
   const { handleClick } = useOpenSettingsToTab();
 
   // Only include autocompleteModel if copilot is set to "custom"

package/src/components/chat/__tests__/capabilities-popover.test.tsx

@@ -0,0 +1,38 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it } from "vitest";
+import { chatOptionsAtom } from "@/core/ai/state";
+import { CapabilitiesPopover } from "../capabilities-popover";
+
+describe("CapabilitiesPopover", () => {
+  it("updates ephemeral chat options", () => {
+    const store = createStore();
+
+    render(
+      <Provider store={store}>
+        <CapabilitiesPopover />
+      </Provider>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Capabilities" });
+    expect(trigger).not.toHaveAttribute("data-active");
+
+    fireEvent.click(trigger);
+    const webSearch = screen.getByRole("switch", { name: "Web search" });
+    expect(webSearch).not.toBeChecked();
+
+    fireEvent.click(webSearch);
+
+    expect(webSearch).toBeChecked();
+    expect(trigger).toHaveAttribute("data-active", "true");
+    expect(trigger).toHaveClass("bg-primary/15", "text-primary", "ring-1");
+    expect(trigger).toHaveAttribute(
+      "title",
+      "Capabilities (web search enabled)",
+    );
+    expect(store.get(chatOptionsAtom)).toEqual({ webSearch: true });
+    expect(createStore().get(chatOptionsAtom)).toEqual({ webSearch: false });
+  });
+});

package/src/components/chat/capabilities-popover.tsx

@@ -0,0 +1,68 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtom } from "jotai";
+import { SlidersHorizontalIcon } from "lucide-react";
+import type React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { ExternalLink } from "@/components/ui/links";
+import { Switch } from "@/components/ui/switch";
+import { chatOptionsAtom } from "@/core/ai/state";
+import { cn } from "@/utils/cn";
+
+export const CapabilitiesPopover: React.FC = () => {
+  const [chatOptions, setChatOptions] = useAtom(chatOptionsAtom);
+  const webSearchOn = chatOptions.webSearch;
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild={true}>
+        <Button
+          aria-label="Capabilities"
+          title={
+            webSearchOn ? "Capabilities (web search enabled)" : "Capabilities"
+          }
+          data-active={webSearchOn || undefined}
+          variant="text"
+          size="icon"
+          className={cn(
+            "h-6 w-6 shrink-0 bg-muted hover:bg-muted/30",
+            webSearchOn &&
+              "bg-primary/15 text-primary ring-1 ring-primary/30 opacity-100 hover:bg-primary/20",
+          )}
+        >
+          <SlidersHorizontalIcon className="h-3.5 w-3.5" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-76 p-3" align="start" side="top">
+        <label
+          htmlFor="web-search-toggle"
+          className="flex items-start justify-between gap-3 cursor-pointer"
+        >
+          <div className="flex flex-col gap-0.5">
+            <span className="text-sm font-semibold">Web search</span>
+            <span className="text-xs text-muted-foreground">
+              Search the web when the model supports it.{" "}
+              <ExternalLink href="https://docs.marimo.io/guides/editor_features/tools#web-search-and-fetch">
+                Learn more
+              </ExternalLink>
+            </span>
+          </div>
+          <Switch
+            id="web-search-toggle"
+            aria-label="Web search"
+            size="sm"
+            checked={webSearchOn}
+            onCheckedChange={(webSearch) =>
+              setChatOptions((options) => ({ ...options, webSearch }))
+            }
+          />
+        </label>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/chat/chat-panel.tsx

@@ -36,7 +36,7 @@ import {
   SelectTrigger,
 } from "@/components/ui/select";
 import { replaceMessagesInChat } from "@/core/ai/chat-utils";
-import { useModelChange } from "@/core/ai/config";
+import { useAIConfigActions } from "@/core/ai/config";
 import { AI_SDK_UI_THROTTLE_MS } from "@/core/ai/constants";
 import { AiModelId } from "@/core/ai/ids/ids";
 import { useStagedAICellsActions } from "@/core/ai/staged-cells";
@@ -44,6 +44,7 @@ import {
   activeChatAtom,
   type Chat,
   type ChatId,
+  chatOptionsAtom,
   chatStateAtom,
   pendingAiPromptAtom,
 } from "@/core/ai/state";
@@ -91,6 +92,7 @@ import {
 } from "./chat-abort";
 import { renderUIMessage } from "./chat-display";
 import { ChatHistoryPopover } from "./chat-history-popover";
+import { CapabilitiesPopover } from "./capabilities-popover";
 import {
   type ChatMessagePart,
   convertToFileUIPart,
@@ -298,7 +300,7 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
     const currentModel = ai?.models?.chat_model || DEFAULT_AI_MODEL;
     const currentProvider = AiModelId.parse(currentModel).providerId;
 
-    const { saveModeChange } = useModelChange();
+    const { saveModeChange } = useAIConfigActions();
 
     const modeOptions: {
       value: CopilotMode;
@@ -326,8 +328,9 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
       },
       {
         value: "code_mode",
-        label: "Code Mode (experimental)",
-        subtitle: "AI with access to the notebook's kernel. Use with caution.",
+        label: "Code Mode",
+        subtitle:
+          "AI with access to the notebook's kernel. Can overwrite changes.",
         Icon: CodeIcon,
       },
     ];
@@ -341,12 +344,12 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
 
     return (
       <TooltipProvider>
-        <div className="px-3 py-2 border-t border-border/20 flex flex-row flex-wrap items-center justify-between gap-1">
-          <div className="flex items-center gap-2">
+        <div className="px-3 py-2 border-t border-border/20 flex flex-wrap items-center gap-1">
+          <div className="flex flex-wrap items-center gap-1">
             <Select value={currentMode} onValueChange={saveModeChange}>
-              <SelectTrigger className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1.5">
+              <SelectTrigger className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1.5 shrink-0">
                 {CurrentModeIcon && <CurrentModeIcon className="h-3 w-3" />}
-                <span>{CurrentModeLabel}</span>
+                <span className="text-nowrap">{CurrentModeLabel}</span>
               </SelectTrigger>
               <SelectContent>
                 <SelectGroup>
@@ -377,13 +380,14 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
             </Select>
             <AIModelDropdown
               placeholder="Model"
-              triggerClassName="h-6 text-xs shadow-none! ring-0! bg-muted hover:bg-muted/30 rounded-sm"
+              triggerClassName="h-6 text-xs shadow-none! ring-0! bg-muted hover:bg-muted/30 rounded-sm max-w-[200px]"
               iconSize="small"
               showAddCustomModelDocs={true}
               forRole="chat"
             />
+            <CapabilitiesPopover />
           </div>
-          <div className="flex flex-row">
+          <div className="flex flex-row ml-auto">
             <AddContextButton
               handleAddContext={onAddContext}
               isLoading={isLoading}
@@ -445,8 +449,8 @@ const ChatInput: React.FC<ChatInputProps> = memo(
     });
 
     return (
-      <div className="relative shrink-0 min-h-[80px] flex flex-col border-t">
-        <div className={cn("px-2 py-3 flex-1", inputClassName)}>
+      <div className="relative shrink-0 flex flex-col border-t">
+        <div className={cn("px-2 py-1.5", inputClassName)}>
           <PromptInput
             className="max-h-[400px]"
             inputRef={inputRef}
@@ -598,6 +602,7 @@ const ChatPanelBody = () => {
           const completionBody = {
             uiMessages: options.messages,
             includeOtherCode: getCodes(""),
+            options: store.get(chatOptionsAtom),
           };
 
           // Call this here to ensure the value is not stale

package/src/components/editor/chrome/wrapper/useOpenAiAssistant.ts

@@ -4,7 +4,7 @@ import { useSetAtom, useStore } from "jotai";
 import useEvent from "react-use-event-hook";
 import { agentSessionStateAtom } from "@/components/chat/acp/state";
 import { toast } from "@/components/ui/use-toast";
-import { useModelChange } from "@/core/ai/config";
+import { useAIConfigActions } from "@/core/ai/config";
 import { pendingAiPromptAtom } from "@/core/ai/state";
 import type { CopilotMode } from "@/core/ai/tools/registry";
 import { aiModelConfiguredAtom } from "@/core/config/config";
@@ -43,7 +43,7 @@ export function resolveAiPanelTab(
 export function useOpenAiAssistant() {
   const { openApplication } = useChromeActions();
   const { setAiPanelTab } = useAiPanelTab();
-  const { saveModeChange } = useModelChange();
+  const { saveModeChange } = useAIConfigActions();
   const setPendingPrompt = useSetAtom(pendingAiPromptAtom);
   const store = useStore();
 

package/src/core/ai/__tests__/config.test.tsx

@@ -0,0 +1,96 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import type { ReactNode } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { userConfigAtom } from "@/core/config/config";
+import { defaultUserConfig } from "@/core/config/config-schema";
+import { requestClientAtom } from "@/core/network/requests";
+import type { EditRequests, RunRequests } from "@/core/network/types";
+import { AiModelId } from "../ids/ids";
+import { useAIConfigActions } from "../config";
+
+describe("useAIConfigActions", () => {
+  it("persists a model change without overwriting newer AI config", async () => {
+    const store = createStore();
+    const saveUserConfig = vi.fn().mockResolvedValue(null);
+    store.set(userConfigAtom, defaultUserConfig());
+    store.set(requestClientAtom, {
+      saveUserConfig,
+    } as unknown as EditRequests & RunRequests);
+
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <Provider store={store}>{children}</Provider>
+    );
+    const { result } = renderHook(() => useAIConfigActions(), { wrapper });
+
+    store.set(userConfigAtom, (config) => ({
+      ...config,
+      ai: {
+        ...config.ai,
+        mode: "agent",
+      },
+    }));
+
+    await act(async () => {
+      await result.current.saveModelChange(
+        AiModelId.parse("openai/gpt-4o").id,
+        "chat",
+      );
+    });
+
+    expect(saveUserConfig).toHaveBeenCalledWith({
+      config: { ai: { models: { chat_model: "openai/gpt-4o" } } },
+    });
+    expect(store.get(userConfigAtom).ai).toMatchObject({
+      mode: "agent",
+      models: { chat_model: "openai/gpt-4o" },
+    });
+  });
+
+  it("preserves concurrent AI changes when saves resolve out of order", async () => {
+    const store = createStore();
+    const resolvers: Array<() => void> = [];
+    const saveUserConfig = vi.fn(
+      () =>
+        new Promise<null>((resolve) => {
+          resolvers.push(() => resolve(null));
+        }),
+    );
+    store.set(userConfigAtom, defaultUserConfig());
+    store.set(requestClientAtom, {
+      saveUserConfig,
+    } as unknown as EditRequests & RunRequests);
+
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <Provider store={store}>{children}</Provider>
+    );
+    const { result } = renderHook(() => useAIConfigActions(), { wrapper });
+
+    const modelChange = result.current.saveModelChange(
+      AiModelId.parse("openai/gpt-4o").id,
+      "chat",
+    );
+    const modeChange = result.current.saveModeChange("agent");
+
+    expect(saveUserConfig).toHaveBeenNthCalledWith(1, {
+      config: { ai: { models: { chat_model: "openai/gpt-4o" } } },
+    });
+    expect(saveUserConfig).toHaveBeenNthCalledWith(2, {
+      config: { ai: { mode: "agent" } },
+    });
+
+    await act(async () => {
+      resolvers[1]();
+      await modeChange;
+      resolvers[0]();
+      await modelChange;
+    });
+
+    expect(store.get(userConfigAtom).ai).toMatchObject({
+      mode: "agent",
+      models: { chat_model: "openai/gpt-4o" },
+    });
+  });
+});

package/src/core/ai/config.ts

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { Role } from "@marimo-team/llm-info";
-import { useAtom } from "jotai";
+import { useSetAtom } from "jotai";
+import { merge } from "lodash-es";
 import type { QualifiedModelId } from "@/core/ai/ids/ids";
 import { userConfigAtom } from "@/core/config/config";
 import type {
@@ -14,6 +15,11 @@ import { useRequestClient } from "@/core/network/requests";
 // Extract only the supported roles from the Role type
 export type SupportedRole = Extract<Role, "chat" | "autocomplete" | "edit">;
 
+interface AiConfigPatch {
+  mode?: CopilotMode;
+  models?: Partial<NonNullable<NonNullable<UserConfig["ai"]>["models"]>>;
+}
+
 const getModelKeyForRole = (forRole: SupportedRole): AIModelKey | null => {
   switch (forRole) {
     case "chat":
@@ -26,15 +32,16 @@ const getModelKeyForRole = (forRole: SupportedRole): AIModelKey | null => {
 };
 
 /**
- * Hook for saving model and mode changes.
+ * Hook for saving AI config changes
  */
-export const useModelChange = () => {
-  const [userConfig, setUserConfig] = useAtom(userConfigAtom);
+export const useAIConfigActions = () => {
+  const setUserConfig = useSetAtom(userConfigAtom);
   const { saveUserConfig } = useRequestClient();
 
-  const saveConfig = async (newConfig: Partial<UserConfig>) => {
+  const saveConfig = async (aiConfig: AiConfigPatch) => {
+    const newConfig = { ai: aiConfig };
     await saveUserConfig({ config: newConfig }).then(() => {
-      setUserConfig((prev) => ({ ...prev, ...newConfig }));
+      setUserConfig((prev) => merge({}, prev, newConfig));
     });
   };
 
@@ -48,28 +55,15 @@ export const useModelChange = () => {
       return;
     }
 
-    const newConfig: Partial<UserConfig> = {
-      ai: {
-        ...userConfig.ai,
-        models: {
-          custom_models: userConfig.ai?.models?.custom_models ?? [],
-          displayed_models: userConfig.ai?.models?.displayed_models ?? [],
-          ...userConfig.ai?.models,
-          [modelKey]: model,
-        },
-      },
+    const newConfig: AiConfigPatch = {
+      models: { [modelKey]: model },
     };
 
     await saveConfig(newConfig);
   };
 
   const saveModeChange = async (newMode: CopilotMode) => {
-    const newConfig: Partial<UserConfig> = {
-      ai: {
-        ...userConfig.ai,
-        mode: newMode,
-      },
-    };
+    const newConfig: AiConfigPatch = { mode: newMode };
 
     await saveConfig(newConfig);
   };

package/src/core/ai/state.ts

@@ -8,6 +8,7 @@ import { uniqueBy } from "@/utils/arrays";
 import { adaptForLocalStorage, jotaiJsonStorage } from "@/utils/storage/jotai";
 import type { TypedString } from "@/utils/typed";
 import type { CellId } from "../cells/ids";
+import type { ChatOptions } from "../network/types";
 
 const KEY = "marimo:ai:chatState:v5";
 
@@ -32,6 +33,15 @@ export interface PendingAiPrompt {
 
 export const pendingAiPromptAtom = atom<PendingAiPrompt | null>(null);
 
+const CHAT_OPTIONS_KEY = "marimo:ai:chatOptions";
+export const chatOptionsAtom = atomWithStorage<Required<ChatOptions>>(
+  CHAT_OPTIONS_KEY,
+  {
+    webSearch: false,
+  },
+  jotaiJsonStorage,
+);
+
 const INCLUDE_OTHER_CELLS_KEY = "marimo:ai:includeOtherCells";
 export const includeOtherCellsAtom = atomWithStorage<boolean>(
   INCLUDE_OTHER_CELLS_KEY,

package/src/core/network/types.ts

@@ -131,6 +131,7 @@ export type OpenTutorialRequest = schemas["OpenTutorialRequest"];
 export type TutorialId = OpenTutorialRequest["tutorialId"];
 export type InvokeAiToolRequest = schemas["InvokeAiToolRequest"];
 export type InvokeAiToolResponse = schemas["InvokeAiToolResponse"];
+export type ChatOptions = schemas["ChatOptions"];
 export type ClearCacheRequest = schemas["ClearCacheRequest"];
 export type GetCacheInfoRequest = schemas["GetCacheInfoRequest"];
 export type LspHealthResponse = schemas["LspHealthResponse"];