@marimo-team/islands 0.19.7-dev10 → 0.19.7-dev16

package/src/components/app-config/__tests__/get-dirty-values.test.ts

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { describe, expect, test } from "vitest";
-import { getDirtyValues } from "../user-config-form";
+import type { UserConfig } from "@/core/config/config-schema";
+import { applyManualInjections, getDirtyValues } from "../user-config-form";
 
 describe("getDirtyValues", () => {
   test("extracts only dirty fields", () => {
@@ -71,4 +72,49 @@ describe("getDirtyValues", () => {
     expect(result).toEqual({ display: { theme: "dark" } });
     expect(result).not.toHaveProperty("runtime");
   });
+
+  test("applyManualInjections injects touched ai model fields", () => {
+    const values = {
+      ai: {
+        models: {
+          displayed_models: ["openai/gpt-4"],
+          custom_models: ["openai/custom-model"],
+        },
+      },
+    } as UserConfig;
+    const dirtyValues: Partial<UserConfig> = {};
+    const touchedFields = {
+      ai: { models: { displayed_models: true } },
+    };
+
+    applyManualInjections({ values, dirtyValues, touchedFields });
+
+    expect(dirtyValues).toEqual({
+      ai: {
+        models: {
+          displayed_models: ["openai/gpt-4"],
+          custom_models: ["openai/custom-model"],
+        },
+      },
+    });
+  });
+
+  test("applyManualInjections skips when field not touched", () => {
+    const values = {
+      ai: {
+        models: {
+          displayed_models: ["openai/gpt-4"],
+          custom_models: ["openai/custom-model"],
+        },
+      },
+    } as UserConfig;
+    const dirtyValues: Partial<UserConfig> = {};
+    const touchedFields = {
+      ai: { models: { displayed_models: false } },
+    };
+
+    applyManualInjections({ values, dirtyValues, touchedFields });
+
+    expect(dirtyValues).toEqual({});
+  });
 });

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

@@ -1,10 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { useAtom } from "jotai";
 import {
   BotIcon,
   BrainIcon,
   ChevronRightIcon,
-  InfoIcon,
   PlusIcon,
   Trash2Icon,
 } from "lucide-react";
@@ -61,7 +61,6 @@ import {
 } from "../ui/accordion";
 import { Button } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
-import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 import { Label } from "../ui/label";
 import { ExternalLink } from "../ui/links";
 import {
@@ -79,6 +78,7 @@ import { AWS_REGIONS } from "./constants";
 import { IncorrectModelId } from "./incorrect-model-id";
 import { IsOverridden } from "./is-overridden";
 import { MCPConfig } from "./mcp-config";
+import { aiSettingsSubTabAtom } from "./state";
 
 interface AiConfigProps {
   form: UseFormReturn<UserConfig>;
@@ -234,9 +234,7 @@ interface ModelSelectorProps {
   config: UserConfig;
   name: FieldPath<UserConfig>;
   placeholder: string;
-  testId: string;
   description?: React.ReactNode;
-  disabled?: boolean;
   label: string;
   forRole: SupportedRole;
   onSubmit: (values: UserConfig) => void;
@@ -247,9 +245,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   config,
   name,
   placeholder,
-  testId,
   description,
-  disabled = false,
   label,
   forRole,
   onSubmit,
@@ -276,34 +272,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                 placeholder={placeholder}
                 onSelect={selectModel}
                 triggerClassName="text-sm"
-                customDropdownContent={
-                  <>
-                    <DropdownMenuSeparator />
-                    <p className="px-2 py-1.5 text-sm text-muted-secondary flex items-center gap-1">
-                      Enter a custom model
-                      <Tooltip content="Models should include the provider prefix, e.g. 'openai/gpt-4o'">
-                        <InfoIcon className="h-3 w-3" />
-                      </Tooltip>
-                    </p>
-                    <div className="px-2 py-1">
-                      <Input
-                        data-testid={testId}
-                        className="w-full border-border shadow-none focus-visible:shadow-xs"
-                        placeholder={placeholder}
-                        {...field}
-                        value={asStringOrEmpty(field.value)}
-                        disabled={disabled}
-                        onKeyDown={Events.stopPropagation()}
-                      />
-                      {value && (
-                        <IncorrectModelId
-                          value={value}
-                          includeSuggestion={false}
-                        />
-                      )}
-                    </div>
-                  </>
-                }
                 forRole={forRole}
               />
             </FormControl>
@@ -432,7 +400,6 @@ const renderCopilotProvider = ({
         config={config}
         name="ai.models.autocomplete_model"
         placeholder="ollama/qwen2.5-coder:1.5b"
-        testId="custom-model-input"
         description="Model to use for code completion when using a custom provider."
         onSubmit={onSubmit}
         forRole="autocomplete"
@@ -1209,8 +1176,6 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
   config,
   onSubmit,
 }) => {
-  const isWasmRuntime = isWasm();
-
   return (
     <SettingGroup>
       <SettingSubtitle>AI Assistant</SettingSubtitle>
@@ -1244,8 +1209,6 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
         config={config}
         name="ai.models.chat_model"
         placeholder={DEFAULT_AI_MODEL}
-        testId="ai-chat-model-input"
-        disabled={isWasmRuntime}
         description={
           <span>Model to use for chat conversations in the Chat panel.</span>
         }
@@ -1258,8 +1221,6 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
         config={config}
         name="ai.models.edit_model"
         placeholder={DEFAULT_AI_MODEL}
-        testId="ai-edit-model-input"
-        disabled={isWasmRuntime}
         description={
           <span>
             Model to use for code editing with the{" "}
@@ -1270,18 +1231,6 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
         onSubmit={onSubmit}
       />
 
-      <ul className="bg-muted p-2 rounded-md list-disc space-y-1 pl-6">
-        <li className="text-xs text-muted-secondary">
-          Models should include the provider name and model name separated by a
-          slash. For example, "anthropic/claude-3-5-sonnet-latest" or
-          "google/gemini-2.0-flash-exp"
-        </li>
-        <li className="text-xs text-muted-secondary">
-          Depending on the provider, we will use the respective API key and
-          additional configuration.
-        </li>
-      </ul>
-
       <FormField
         control={form.control}
         name="ai.rules"
@@ -1434,6 +1383,7 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
 
     form.setValue("ai.models.displayed_models", newModels, {
       shouldDirty: true,
+      shouldTouch: true,
     });
     onSubmit(form.getValues());
   });
@@ -1453,6 +1403,7 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
 
       form.setValue("ai.models.displayed_models", newModels, {
         shouldDirty: true,
+        shouldTouch: true,
       });
       onSubmit(form.getValues());
     },
@@ -1466,9 +1417,11 @@ export const AiModelDisplayConfig: React.FC<AiConfigProps> = ({
     );
     form.setValue("ai.models.displayed_models", newDisplayedModels, {
       shouldDirty: true,
+      shouldTouch: true,
     });
     form.setValue("ai.models.custom_models", newModels, {
       shouldDirty: true,
+      shouldTouch: true,
     });
     onSubmit(form.getValues());
   });
@@ -1548,6 +1501,7 @@ export const AddModelForm: React.FC<{
 
     form.setValue("ai.models.custom_models", [newModel.id, ...customModels], {
       shouldDirty: true,
+      shouldTouch: true,
     });
     onSubmit(form.getValues());
     resetForm();
@@ -1740,6 +1694,12 @@ const AddButton = ({
   );
 };
 
+export type AiSettingsSubTab =
+  | "ai-features"
+  | "ai-providers"
+  | "ai-models"
+  | "mcp";
+
 export const AiConfig: React.FC<AiConfigProps> = ({
   form,
   config,
@@ -1747,8 +1707,14 @@ export const AiConfig: React.FC<AiConfigProps> = ({
 }) => {
   // MCP is not supported in WASM
   const wasm = isWasm();
+  const [activeTab, setActiveTab] = useAtom(aiSettingsSubTabAtom);
+
   return (
-    <Tabs defaultValue="ai-features" className="flex-1">
+    <Tabs
+      value={activeTab}
+      onValueChange={(value) => setActiveTab(value as AiSettingsSubTab)}
+      className="flex-1"
+    >
       <TabsList className="mb-2">
         <TabsTrigger value="ai-features">AI Features</TabsTrigger>
         <TabsTrigger value="ai-providers">AI Providers</TabsTrigger>

package/src/components/app-config/state.ts

@@ -1,17 +1,27 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { atom, useSetAtom } from "jotai";
+import type { AiSettingsSubTab } from "./ai-config";
 import {
   activeUserConfigCategoryAtom,
   type SettingCategoryId,
 } from "./user-config-form";
 
+export const aiSettingsSubTabAtom = atom<AiSettingsSubTab>("ai-features");
+
 export const settingDialogAtom = atom<boolean>(false);
 
 export function useOpenSettingsToTab() {
   const setActiveCategory = useSetAtom(activeUserConfigCategoryAtom);
   const setSettingsDialog = useSetAtom(settingDialogAtom);
-  const handleClick = (tab: SettingCategoryId) => {
+  const setAiSubTab = useSetAtom(aiSettingsSubTabAtom);
+
+  // Note: If more settings categories need sub-tabs or deep-linking is required,
+  // consider using a different strategy like query params
+  const handleClick = (tab: SettingCategoryId, subTab?: AiSettingsSubTab) => {
     setActiveCategory(tab);
+    if (tab === "ai") {
+      setAiSubTab(subTab ?? "ai-features");
+    }
     setSettingsDialog(true);
   };
   return { handleClick };

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

@@ -14,7 +14,7 @@ import {
 } from "lucide-react";
 import React, { useId, useRef } from "react";
 import { useLocale } from "react-aria";
-import type { FieldValues } from "react-hook-form";
+import type { FieldPath, FieldValues } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import type z from "zod";
 import { Button } from "@/components/ui/button";
@@ -95,6 +95,68 @@ export function getDirtyValues<T extends FieldValues>(
   return result;
 }
 
+type ManualInjector = (
+  values: UserConfig,
+  dirtyValues: Partial<UserConfig>,
+) => void;
+
+const modelsAiInjection = (
+  values: UserConfig,
+  dirtyValues: Partial<UserConfig>,
+) => {
+  dirtyValues.ai = {
+    ...dirtyValues.ai,
+    models: {
+      ...dirtyValues.ai?.models,
+      displayed_models: values.ai?.models?.displayed_models ?? [],
+      custom_models: values.ai?.models?.custom_models ?? [],
+    },
+  };
+};
+
+// Some fields (like AI model lists) have empty arrays as default values.
+// If a user explicitly clears them, RHF won't mark them dirty, so we use
+// touchedFields to force-include those values in the payload.
+const MANUAL_INJECT_ENTRIES = [
+  ["ai.models.displayed_models", modelsAiInjection],
+  ["ai.models.custom_models", modelsAiInjection],
+] as const satisfies readonly (readonly [
+  FieldPath<UserConfig>,
+  ManualInjector,
+])[];
+
+const MANUAL_INJECT_FIELDS = new Map(MANUAL_INJECT_ENTRIES);
+
+const isTouchedPath = (
+  touched: unknown,
+  path: FieldPath<UserConfig>,
+): boolean => {
+  if (!touched) {
+    return false;
+  }
+  let current: unknown = touched;
+  for (const segment of path.split(".")) {
+    if (typeof current !== "object" || current === null) {
+      return false;
+    }
+    current = (current as Record<string, unknown>)[segment];
+  }
+  return current === true;
+};
+
+export const applyManualInjections = (opts: {
+  values: UserConfig;
+  dirtyValues: Partial<UserConfig>;
+  touchedFields: unknown;
+}) => {
+  const { values, dirtyValues, touchedFields } = opts;
+  for (const [fieldPath, injector] of MANUAL_INJECT_FIELDS) {
+    if (isTouchedPath(touchedFields, fieldPath)) {
+      injector(values, dirtyValues);
+    }
+  }
+};
+
 const categories = [
   {
     id: "editor",
@@ -181,7 +243,10 @@ export const UserConfigForm: React.FC = () => {
     defaultValues: config,
   });
 
-  const setAiModels = (values: UserConfig, dirtyAiConfig: UserConfig["ai"]) => {
+  const setAiModels = (
+    values: UserConfig["ai"],
+    dirtyAiConfig: UserConfig["ai"],
+  ) => {
     const { chatModel, editModel } = autoPopulateModels(values);
     if (chatModel || editModel) {
       dirtyAiConfig = {
@@ -207,13 +272,18 @@ export const UserConfigForm: React.FC = () => {
     // Only send values that were actually changed to avoid
     // overwriting backend values the form doesn't manage
     const dirtyValues = getDirtyValues(values, form.formState.dirtyFields);
+    applyManualInjections({
+      values,
+      dirtyValues,
+      touchedFields: form.formState.touchedFields,
+    });
     if (Object.keys(dirtyValues).length === 0) {
       return; // Nothing changed
     }
 
     // Auto-populate AI models when credentials are set, makes it easier to get started
     if (dirtyValues.ai) {
-      dirtyValues.ai = setAiModels(values, dirtyValues.ai);
+      dirtyValues.ai = setAiModels(values.ai, dirtyValues.ai);
     }
 
     await saveUserConfig({ config: dirtyValues }).then(() => {

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

@@ -435,7 +435,11 @@ const ChatPanel = () => {
         title="Chat with AI"
         description="No AI provider configured or model selected"
         action={
-          <Button variant="outline" size="sm" onClick={() => handleClick("ai")}>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handleClick("ai", "ai-providers")}
+          >
             Edit AI settings
           </Button>
         }

package/src/components/markdown/markdown-renderer.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { EditorView } from "@codemirror/view";
+import { math } from "@streamdown/math";
 import { useAtomValue } from "jotai";
 import { BetweenHorizontalStartIcon } from "lucide-react";
 import { memo, Suspense, useState } from "react";
@@ -184,7 +185,11 @@ const COMPONENTS: Components = {
 
 export const MarkdownRenderer = memo(({ content }: { content: string }) => {
   return (
-    <Streamdown components={COMPONENTS} className="mo-markdown-renderer">
+    <Streamdown
+      components={COMPONENTS}
+      plugins={{ math }}
+      className="mo-markdown-renderer"
+    >
       {content}
     </Streamdown>
   );

package/src/core/export/hooks.ts

@@ -132,7 +132,7 @@ export function useEnrichCellOutputs() {
     const results = await Promise.all(
       cellsToCaptureScreenshot.map(async ([cellId]) => {
         try {
-          const dataUrl = await getImageDataUrlForCell(cellId);
+          const dataUrl = await getImageDataUrlForCell(cellId, false);
           if (!dataUrl) {
             Logger.error(`Failed to capture screenshot for cell ${cellId}`);
             return null;

package/src/utils/__tests__/download.test.tsx

@@ -158,7 +158,7 @@ describe("getImageDataUrlForCell", () => {
     expect(toPng).toHaveBeenCalledWith(mockElement);
   });
 
-  it("should add printing classes before capture", async () => {
+  it("should add printing classes before capture when enablePrintMode is true", async () => {
     vi.mocked(toPng).mockImplementation(async () => {
       // Check classes are applied during capture
       expect(mockElement.classList.contains("printing-output")).toBe(true);
@@ -167,18 +167,42 @@ describe("getImageDataUrlForCell", () => {
       return mockDataUrl;
     });
 
-    await getImageDataUrlForCell("cell-1" as CellId);
+    await getImageDataUrlForCell("cell-1" as CellId, true);
   });
 
-  it("should remove printing classes after capture", async () => {
+  it("should remove printing classes after capture when enablePrintMode is true", async () => {
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    await getImageDataUrlForCell("cell-1" as CellId);
+    await getImageDataUrlForCell("cell-1" as CellId, true);
 
     expect(mockElement.classList.contains("printing-output")).toBe(false);
     expect(document.body.classList.contains("printing")).toBe(false);
   });
 
+  it("should add printing-output but NOT body.printing when enablePrintMode is false", async () => {
+    vi.mocked(toPng).mockImplementation(async () => {
+      // printing-output should still be added to the element
+      expect(mockElement.classList.contains("printing-output")).toBe(true);
+      // but body.printing should NOT be added
+      expect(document.body.classList.contains("printing")).toBe(false);
+      expect(mockElement.style.overflow).toBe("auto");
+      return mockDataUrl;
+    });
+
+    await getImageDataUrlForCell("cell-1" as CellId, false);
+  });
+
+  it("should cleanup printing-output when enablePrintMode is false", async () => {
+    mockElement.style.overflow = "hidden";
+    vi.mocked(toPng).mockResolvedValue(mockDataUrl);
+
+    await getImageDataUrlForCell("cell-1" as CellId, false);
+
+    expect(mockElement.classList.contains("printing-output")).toBe(false);
+    expect(document.body.classList.contains("printing")).toBe(false);
+    expect(mockElement.style.overflow).toBe("hidden");
+  });
+
   it("should restore original overflow style after capture", async () => {
     mockElement.style.overflow = "hidden";
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
@@ -207,7 +231,7 @@ describe("getImageDataUrlForCell", () => {
     expect(mockElement.style.overflow).toBe("scroll");
   });
 
-  it("should maintain body.printing during concurrent captures", async () => {
+  it("should maintain body.printing during concurrent captures when enablePrintMode is true", async () => {
     // Create a second element
     const mockElement2 = document.createElement("div");
     mockElement2.id = CellOutputId.create("cell-2" as CellId);
@@ -241,9 +265,9 @@ describe("getImageDataUrlForCell", () => {
       return mockDataUrl;
     });
 
-    // Start both captures concurrently
-    const capture1 = getImageDataUrlForCell("cell-1" as CellId);
-    const capture2 = getImageDataUrlForCell("cell-2" as CellId);
+    // Start both captures concurrently with enablePrintMode = true
+    const capture1 = getImageDataUrlForCell("cell-1" as CellId, true);
+    const capture2 = getImageDataUrlForCell("cell-2" as CellId, true);
 
     // Let second capture complete first
     resolveSecond!();
@@ -264,6 +288,30 @@ describe("getImageDataUrlForCell", () => {
 
     mockElement2.remove();
   });
+
+  it("should not interfere with body.printing during concurrent captures when enablePrintMode is false", async () => {
+    // Create a second element
+    const mockElement2 = document.createElement("div");
+    mockElement2.id = CellOutputId.create("cell-2" as CellId);
+    document.body.append(mockElement2);
+
+    vi.mocked(toPng).mockImplementation(async () => {
+      // body.printing should never be added when enablePrintMode is false
+      expect(document.body.classList.contains("printing")).toBe(false);
+      return mockDataUrl;
+    });
+
+    // Start both captures concurrently with enablePrintMode = false
+    const capture1 = getImageDataUrlForCell("cell-1" as CellId, false);
+    const capture2 = getImageDataUrlForCell("cell-2" as CellId, false);
+
+    await Promise.all([capture1, capture2]);
+
+    // body.printing should still not be present
+    expect(document.body.classList.contains("printing")).toBe(false);
+
+    mockElement2.remove();
+  });
 });
 
 describe("downloadHTMLAsImage", () => {
@@ -342,7 +390,7 @@ describe("downloadHTMLAsImage", () => {
     expect(cleanup).toHaveBeenCalled();
   });
 
-  it("should not add body.printing when prepare is provided", async () => {
+  it("should delegate body.printing management to prepare function", async () => {
     let bodyPrintingDuringCapture = false;
     vi.mocked(toPng).mockImplementation(async () => {
       // Capture the state during toPng execution
@@ -350,7 +398,14 @@ describe("downloadHTMLAsImage", () => {
       return mockDataUrl;
     });
     const cleanup = vi.fn();
-    const prepare = vi.fn().mockReturnValue(cleanup);
+    // Mock prepare that adds body.printing
+    const prepare = vi.fn().mockImplementation(() => {
+      document.body.classList.add("printing");
+      return () => {
+        document.body.classList.remove("printing");
+        cleanup();
+      };
+    });
 
     await downloadHTMLAsImage({
       element: mockElement,
@@ -358,9 +413,8 @@ describe("downloadHTMLAsImage", () => {
       prepare,
     });
 
-    // body.printing should NOT be added by downloadHTMLAsImage when prepare is provided
-    // (the prepare function is responsible for managing its own classes)
-    expect(bodyPrintingDuringCapture).toBe(false);
+    // body.printing should be added by prepare function
+    expect(bodyPrintingDuringCapture).toBe(true);
     expect(document.body.classList.contains("printing")).toBe(false);
     expect(prepare).toHaveBeenCalledWith(mockElement);
     expect(cleanup).toHaveBeenCalled();

package/src/utils/download.ts

@@ -59,34 +59,51 @@ function releaseBodyPrinting() {
   }
 }
 
-/*
+/**
  * Prepare a cell element for screenshot capture.
- * Returns a cleanup function that should be called when the screenshot is complete.
+ *
+ * @param element - The cell output element to prepare
+ * @param enablePrintMode - When true, adds a 'printing' class to the body.
+ *   This can cause layout shifts that cause the page to scroll.
+ * @returns A cleanup function to restore the element's original state
  */
-function prepareCellElementForScreenshot(element: HTMLElement) {
+function prepareCellElementForScreenshot(
+  element: HTMLElement,
+  enablePrintMode: boolean,
+) {
   element.classList.add("printing-output");
-  acquireBodyPrinting();
+  if (enablePrintMode) {
+    acquireBodyPrinting();
+  }
   const originalOverflow = element.style.overflow;
   element.style.overflow = "auto";
 
   return () => {
     element.classList.remove("printing-output");
-    releaseBodyPrinting();
+    if (enablePrintMode) {
+      releaseBodyPrinting();
+    }
     element.style.overflow = originalOverflow;
   };
 }
 
 /**
  * Capture a cell output as a PNG data URL.
+ *
+ * @param cellId - The ID of the cell to capture
+ * @param enablePrintMode - When true, enables print mode which adds a 'printing' class to the body.
+ *   This can cause layout shifts that cause the page to scroll.
+ * @returns The PNG as a data URL, or undefined if the cell element wasn't found
  */
 export async function getImageDataUrlForCell(
   cellId: CellId,
+  enablePrintMode = true,
 ): Promise<string | undefined> {
   const element = findElementForCell(cellId);
   if (!element) {
     return;
   }
-  const cleanup = prepareCellElementForScreenshot(element);
+  const cleanup = prepareCellElementForScreenshot(element, enablePrintMode);
 
   try {
     return await toPng(element);
@@ -110,7 +127,7 @@ export async function downloadCellOutputAsImage(
   await downloadHTMLAsImage({
     element,
     filename,
-    prepare: prepareCellElementForScreenshot,
+    prepare: () => prepareCellElementForScreenshot(element, true),
   });
 }
 
@@ -127,7 +144,6 @@ export async function downloadHTMLAsImage(opts: {
 
   let cleanup: (() => void) | undefined;
   if (prepare) {
-    // Let the prepare function handle adding classes (e.g., body.printing)
     cleanup = prepare(element);
   } else {
     // When no prepare function is provided (e.g., downloading full notebook),