@marimo-team/islands 0.19.7-dev2 → 0.19.7-dev21

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/editor/chrome/panels/dependency-graph-panel.tsx

@@ -1,30 +1,66 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type React from "react";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useCellDataAtoms, useCellIds } from "@/core/cells/cells";
 import { useVariables } from "@/core/variables/state";
 import { cn } from "@/utils/cn";
 import { DependencyGraph } from "../../../dependency-graph/dependency-graph";
 import { MinimapContent } from "../../../dependency-graph/minimap-content";
 import { useDependencyPanelTab } from "../wrapper/useDependencyPanelTab";
+import { usePanelSection } from "./panel-context";
 
 const DependencyGraphPanel: React.FC = () => {
-  const { dependencyPanelTab } = useDependencyPanelTab();
+  const { dependencyPanelTab, setDependencyPanelTab } = useDependencyPanelTab();
   const variables = useVariables();
   const cellIds = useCellIds();
   const [cells] = useCellDataAtoms();
+  const panelSection = usePanelSection();
+
+  // Show toggle inside panel when in developer panel (horizontal layout)
+  // since the sidebar has its own header with the toggle
+  const showInlineToggle = panelSection === "developer-panel";
 
   return (
-    <div className={cn("w-full h-full flex-1 mx-auto -mb-4 relative")}>
-      {dependencyPanelTab === "minimap" ? (
-        <MinimapContent />
-      ) : (
-        <DependencyGraph
-          cellAtoms={cells}
-          variables={variables}
-          cellIds={cellIds.inOrderIds}
-        />
+    <div className={cn("w-full h-full flex-1 mx-auto -mb-4 flex flex-col")}>
+      {showInlineToggle && (
+        <div className="p-2 shrink-0">
+          <Tabs
+            value={dependencyPanelTab}
+            onValueChange={(value) => {
+              if (value === "minimap" || value === "graph") {
+                setDependencyPanelTab(value);
+              }
+            }}
+          >
+            <TabsList>
+              <TabsTrigger
+                value="minimap"
+                className="py-0.5 text-xs uppercase tracking-wide font-bold"
+              >
+                Minimap
+              </TabsTrigger>
+              <TabsTrigger
+                value="graph"
+                className="py-0.5 text-xs uppercase tracking-wide font-bold"
+              >
+                Graph
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
       )}
+      <div className="flex-1 min-h-0 relative">
+        {dependencyPanelTab === "minimap" ? (
+          <MinimapContent />
+        ) : (
+          <DependencyGraph
+            cellAtoms={cells}
+            variables={variables}
+            cellIds={cellIds.inOrderIds}
+          />
+        )}
+      </div>
     </div>
   );
 };

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/ai/context/providers/cell-output.ts

@@ -2,7 +2,6 @@
 
 import type { Completion } from "@codemirror/autocomplete";
 import type { FileUIPart } from "ai";
-import { toPng } from "html-to-image";
 import { processOutput } from "@/components/editor/output/console/process-output";
 import { type NotebookState, notebookAtom } from "@/core/cells/cells";
 import { type CellId, CellOutputId } from "@/core/cells/ids";
@@ -10,6 +9,7 @@ import { displayCellName } from "@/core/cells/names";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import type { OutputMessage } from "@/core/kernel/messages";
 import type { JotaiStore } from "@/core/state/jotai";
+import { toPng } from "@/utils/html-to-image";
 import { Logger } from "@/utils/Logger";
 import { type AIContextItem, AIContextProvider } from "../registry";
 import { contextToXml } from "../utils";

package/src/core/export/__tests__/hooks.test.ts

@@ -137,7 +137,13 @@ describe("useEnrichCellOutputs", () => {
     expect(document.getElementById).toHaveBeenCalledWith(
       CellOutputId.create(cellId),
     );
-    expect(toPng).toHaveBeenCalledWith(mockElement);
+    expect(toPng).toHaveBeenCalledWith(
+      mockElement,
+      expect.objectContaining({
+        filter: expect.any(Function),
+        onImageErrorHandler: expect.any(Function),
+      }),
+    );
     expect(output).toEqual({
       [cellId]: ["image/png", mockDataUrl],
     });

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/plugins/impl/plotly/PlotlyPlugin.tsx

@@ -7,15 +7,14 @@ import { Logger } from "@/utils/Logger";
 
 import "./plotly.css";
 import "./mapbox.css";
-import { usePrevious } from "@uidotdev/usehooks";
-import { isEqual, pick, set } from "lodash-es";
-import { type JSX, lazy, memo, useEffect, useMemo, useState } from "react";
+import { pick, set } from "lodash-es";
+import { type JSX, lazy, memo, useMemo } from "react";
 import useEvent from "react-use-event-hook";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useScript } from "@/hooks/useScript";
 import { Arrays } from "@/utils/arrays";
-import { Objects } from "@/utils/objects";
 import { createParser, type PlotlyTemplateParser } from "./parse-from-template";
+import { usePlotlyLayout } from "./usePlotlyLayout";
 
 interface Data {
   figure: Figure;
@@ -80,18 +79,6 @@ export const LazyPlot = lazy(() =>
   }),
 );
 
-function initialLayout(figure: Figure): Partial<Plotly.Layout> {
-  // Enable autosize if width is not specified
-  const shouldAutoSize = figure.layout.width === undefined;
-  return {
-    autosize: shouldAutoSize,
-    dragmode: "select",
-    height: 540,
-    // Prioritize user's config
-    ...figure.layout,
-  };
-}
-
 const SUNBURST_DATA_KEYS: (keyof Plotly.SunburstPlotDatum)[] = [
   "color",
   "curveNumber",
@@ -111,38 +98,20 @@ const TREE_MAP_DATA_KEYS = SUNBURST_DATA_KEYS;
 
 export const PlotlyComponent = memo(
   ({ figure: originalFigure, value, setValue, config }: PlotlyPluginProps) => {
-    const [figure, setFigure] = useState(() => {
-      // We clone the figure since Plotly mutates the figure in place
-      return structuredClone(originalFigure);
-    });
-
     // Used for rendering LaTeX. TODO: Serve this library from Marimo
     const scriptStatus = useScript(
       "https://cdn.jsdelivr.net/npm/mathjax-full@3.2.2/es5/tex-mml-svg.min.js",
     );
     const isScriptLoaded = scriptStatus === "ready";
 
-    useEffect(() => {
-      const nextFigure = structuredClone(originalFigure);
-      setFigure(nextFigure);
-      setLayout((prev) => ({
-        ...initialLayout(nextFigure),
-        ...prev,
-      }));
-    }, [originalFigure, isScriptLoaded]);
-
-    const [layout, setLayout] = useState<Partial<Plotly.Layout>>(() => {
-      return {
-        ...initialLayout(figure),
-        // Override with persisted values (dragmode, xaxis, yaxis)
-        ...value,
-      };
+    const { figure, layout, handleReset } = usePlotlyLayout({
+      originalFigure,
+      initialValue: value,
+      isScriptLoaded,
     });
 
-    const handleReset = useEvent(() => {
-      const nextFigure = structuredClone(originalFigure);
-      setFigure(nextFigure);
-      setLayout(initialLayout(nextFigure));
+    const handleResetWithClear = useEvent(() => {
+      handleReset();
       setValue({});
     });
 
@@ -163,37 +132,13 @@ export const PlotlyComponent = memo(
                 <path d="M3 3v5h5" />
               </svg>`,
             },
-            click: handleReset,
+            click: handleResetWithClear,
           },
         ],
         // Prioritize user's config
         ...configMemo,
       };
-    }, [handleReset, configMemo]);
-
-    const prevFigure = usePrevious(figure) ?? figure;
-
-    useEffect(() => {
-      const omitKeys = new Set<keyof Plotly.Layout>([
-        "autosize",
-        "dragmode",
-        "xaxis",
-        "yaxis",
-      ]);
-
-      // If the key was updated externally (e.g. can be specifically passed in the config)
-      // then we need to update the layout
-      for (const key of omitKeys) {
-        if (!isEqual(figure.layout[key], prevFigure.layout[key])) {
-          omitKeys.delete(key);
-        }
-      }
-
-      // Update layout when figure.layout changes
-      // Omit keys that we don't want to override
-      const layout = Objects.omit(figure.layout, omitKeys);
-      setLayout((prev) => ({ ...prev, ...layout }));
-    }, [figure.layout, prevFigure.layout]);
+    }, [handleResetWithClear, configMemo]);
 
     return (
       <LazyPlot