@marimo-team/frontend 0.19.3-dev8 → 0.19.4-dev0

package/src/components/utils/lazy-mount.tsx

@@ -1,5 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React, { type PropsWithChildren } from "react";
+import React, {
+  Activity,
+  type ActivityProps,
+  type PropsWithChildren,
+} from "react";
 
 interface Props {
   isOpen: boolean;
@@ -12,13 +16,30 @@ export const LazyMount: React.FC<PropsWithChildren<Props>> = ({
   isOpen,
   children,
 }) => {
-  const [isMounted, setIsMounted] = React.useState(false);
+  const [hasMountedBefore, setHasMountedBefore] = React.useState(false);
 
-  React.useEffect(() => {
-    if (isOpen && !isMounted) {
-      setIsMounted(true);
-    }
-  }, [isOpen, isMounted]);
+  if (isOpen && !hasMountedBefore) {
+    setHasMountedBefore(true);
+  }
 
-  return isMounted ? children : null;
+  return hasMountedBefore || isOpen ? children : null;
+};
+
+/**
+ * Wraps a component in an Activity component. It is not mounted until it is open for the first time.
+ */
+export const LazyActivity: React.FC<PropsWithChildren<ActivityProps>> = (
+  props,
+) => {
+  const [hasMountedBefore, setHasMountedBefore] = React.useState(false);
+
+  if (props.mode === "visible" && !hasMountedBefore) {
+    setHasMountedBefore(true);
+  }
+
+  if (hasMountedBefore) {
+    return <Activity {...props} />;
+  }
+
+  return null;
 };

package/src/core/ai/ids/ids.ts

@@ -2,7 +2,7 @@
 
 import type { TypedString } from "@/utils/typed";
 
-export const PROVIDERS = [
+export const KNOWN_PROVIDERS = [
   "openai",
   "anthropic",
   "google",
@@ -15,7 +15,13 @@ export const PROVIDERS = [
   "wandb",
   "marimo",
 ] as const;
-export type ProviderId = (typeof PROVIDERS)[number];
+export type KnownProviderId = (typeof KNOWN_PROVIDERS)[number];
+
+/**
+ * Provider ID can be a known provider or a custom string
+ * The (string & {}) pattern allows any string while still providing autocomplete for known providers
+ */
+export type ProviderId = KnownProviderId | (string & {});
 
 export type ShortModelId = TypedString<"ShortModelId">;
 
@@ -68,6 +74,8 @@ function guessProviderId(id: string): ProviderId {
   return "ollama";
 }
 
-export function isKnownAIProvider(providerId: ProviderId): boolean {
-  return PROVIDERS.includes(providerId);
+export function isKnownAIProvider(
+  providerId: string,
+): providerId is KnownProviderId {
+  return (KNOWN_PROVIDERS as readonly string[]).includes(providerId);
 }

package/src/core/cells/cells.ts

@@ -1594,6 +1594,8 @@ const cellDataAtoms = splitAtom(
 );
 export const useCellDataAtoms = () => useAtom(cellDataAtoms);
 
+export const cellsRuntimeAtom = atom((get) => get(notebookAtom).cellRuntime);
+
 export const notebookIsRunningAtom = atom((get) =>
   notebookIsRunning(get(notebookAtom)),
 );

package/src/core/cells/scrollCellIntoView.ts

@@ -53,8 +53,9 @@ export function focusAndScrollCellIntoView({
       Logger.warn("scrollCellIntoView: editor not found", cellId);
       return;
     }
-    // If already focused, do nothing.
-    if (editor.hasFocus) {
+    // Skip auto-focus if already focused, or if the document doesn't have
+    // focus to avoid stealing focus from outside (e.g., when embedded in an iframe)
+    if (editor.hasFocus || !document.hasFocus()) {
       return;
     }
 

package/src/core/codemirror/cm.ts

@@ -64,6 +64,7 @@ import { getCurrentLanguageAdapter } from "./language/commands";
 import { adaptiveLanguageConfiguration } from "./language/extension";
 import { dndBundle } from "./misc/dnd";
 import { pasteBundle } from "./misc/paste";
+import { stringsAutoCloseBraces } from "./misc/string-braces";
 import { reactiveReferencesBundle } from "./reactive-references/extension";
 import { darkTheme } from "./theme/dark";
 import { lightTheme } from "./theme/light";
@@ -203,6 +204,7 @@ export const basicBundle = (opts: CodeMirrorSetupOpts): Extension[] => {
     hintTooltip(lspConfig),
     copilotBundle(completionConfig),
     foldGutter(),
+    stringsAutoCloseBraces(),
     closeBrackets(),
     completionKeymap(),
     // to avoid clash with charDeleteBackward keymap

package/src/core/codemirror/lsp/__tests__/notebook-lsp.test.ts

@@ -756,6 +756,129 @@ describe("NotebookLanguageServerClient", () => {
       // Verify that the import cell was not changed
       expect(mockView1.state.doc.toString()).toBe("import marimo as mo");
     });
+
+    it("should only rename private variables in the current cell (issue #7810)", async () => {
+      const props = {
+        workspaceFolders: null,
+        capabilities: {
+          textDocument: {
+            rename: {
+              prepareSupport: true,
+            },
+          },
+        },
+        languageId: "python",
+        transport: {
+          sendData: vi.fn(),
+          subscribe: vi.fn(),
+          connect: vi.fn(),
+          transportRequestManager: {
+            send: vi.fn(),
+          },
+        } as any,
+      };
+
+      // Setup editor views - both cells have a private variable _x
+      const cell1Code = "_x = 1\nprint(_x)";
+      const cell2Code = "_x = 2\nprint(_x)";
+
+      const mockView1 = new EditorView({
+        doc: cell1Code,
+        extensions: [
+          languageAdapterState.init(() => new PythonLanguageAdapter()),
+          languageMetadataField.init(() => ({})),
+          languageServerWithClient({
+            client: mockClient as unknown as LanguageServerClient,
+            documentUri: CellDocumentUri.of(Cells.cell1),
+            ...props,
+          }),
+        ],
+      });
+
+      const mockView2 = new EditorView({
+        doc: cell2Code,
+        extensions: [
+          languageAdapterState.init(() => new PythonLanguageAdapter()),
+          languageMetadataField.init(() => ({})),
+          languageServerWithClient({
+            client: mockClient as unknown as LanguageServerClient,
+            documentUri: CellDocumentUri.of(Cells.cell2),
+            ...props,
+          }),
+        ],
+      });
+
+      (notebookClient as any).getNotebookEditors = () => ({
+        [Cells.cell1]: mockView1,
+        [Cells.cell2]: mockView2,
+      });
+
+      // Update the mock to return the correct codes
+      vi.spyOn(store, "get").mockImplementation((atom) => {
+        if (atom === topologicalCodesAtom) {
+          return {
+            cellIds: [Cells.cell1, Cells.cell2],
+            codes: {
+              [Cells.cell1]: cell1Code,
+              [Cells.cell2]: cell2Code,
+            },
+          };
+        }
+        return undefined;
+      });
+
+      // Setup rename params - renaming _x in cell1
+      const renameParams: LSP.RenameParams = {
+        textDocument: { uri: CellDocumentUri.of(Cells.cell1) },
+        position: { line: 0, character: 0 }, // position of '_x'
+        newName: "_y",
+      };
+
+      // Open a document first to set up the lens
+      await notebookClient.textDocumentDidOpen({
+        textDocument: {
+          uri: CellDocumentUri.of(Cells.cell1),
+          languageId: "python",
+          version: 1,
+          text: cell1Code,
+        },
+      });
+
+      // Mock the response from the language server
+      // The LSP server would rename _x in BOTH cells (since it sees the merged doc)
+      const mockRenameResponse: LSP.WorkspaceEdit = {
+        documentChanges: [
+          {
+            textDocument: {
+              uri: "file:///__marimo_notebook__.py",
+              version: 1,
+            },
+            edits: [
+              {
+                range: {
+                  start: { line: 0, character: 0 },
+                  end: { line: 3, character: 10 },
+                },
+                // LSP renames _x to _y in both cells
+                newText: "_y = 1\nprint(_y)\n_y = 2\nprint(_y)",
+              },
+            ],
+          },
+        ],
+      };
+
+      mockClient.textDocumentRename = vi
+        .fn()
+        .mockResolvedValue(mockRenameResponse);
+
+      // Call rename
+      await notebookClient.textDocumentRename(renameParams);
+
+      // The fix: only cell1 should be renamed, cell2 should remain unchanged
+      // because private variables are cell-local in marimo
+      expect(mockView1.state.doc.toString()).toBe("_y = 1\nprint(_y)");
+      expect(mockView2.state.doc.toString()).toBe("_x = 2\nprint(_x)");
+    });
   });
 
   describe("diagnostics handling", () => {

package/src/core/codemirror/lsp/notebook-lsp.ts

@@ -9,6 +9,7 @@ import { invariant } from "@/utils/invariant";
 import { Logger } from "@/utils/Logger";
 import { LRUCache } from "@/utils/lru";
 import { Objects } from "@/utils/objects";
+import { getPositionAtWordBounds } from "../completion/hints";
 import { topologicalCodesAtom } from "../copilot/getCodes";
 import {
   getEditorCodeAsPython,
@@ -22,6 +23,14 @@ import {
 } from "./types";
 import { getLSPDocument } from "./utils";
 
+/**
+ * Check if a variable name is private (starts with underscore but not dunder).
+ * Private variables in marimo are cell-local and should not be renamed across cells.
+ */
+function isPrivateVariable(name: string): boolean {
+  return name.startsWith("_") && !name.startsWith("__");
+}
+
 class Snapshotter {
   private documentVersion = 0;
   private readonly getNotebookCode: () => {
@@ -433,15 +442,46 @@ export class NotebookLanguageServerClient implements ILanguageServerClient {
 
     // Update the code in the plugins manually
     const editors = this.getNotebookEditors();
-    for (const [cellId, ev] of Objects.entries(editors)) {
-      const newCode = editsToNewCode.get(cellId);
+
+    // Check if this is a private variable rename (should only affect current cell)
+    // Private variables in marimo are cell-local and should not be renamed across cells
+    const originEditor = editors[cellId];
+    let isPrivateRename = false;
+    if (originEditor) {
+      // Convert LSP position (line, character) to CodeMirror position
+      const line = originEditor.state.doc.line(params.position.line + 1);
+      const cmPosition = line.from + params.position.character;
+      const { startToken, endToken } = getPositionAtWordBounds(
+        originEditor.state.doc,
+        cmPosition,
+      );
+      const originalName = originEditor.state.doc.sliceString(
+        startToken,
+        endToken,
+      );
+      isPrivateRename = isPrivateVariable(originalName);
+      if (isPrivateRename) {
+        Logger.debug(
+          "[lsp] Private variable rename detected, limiting to current cell",
+          originalName,
+        );
+      }
+    }
+
+    for (const [currentCellId, ev] of Objects.entries(editors)) {
+      // For private variable renames, only update the originating cell
+      if (isPrivateRename && currentCellId !== cellId) {
+        continue;
+      }
+
+      const newCode = editsToNewCode.get(currentCellId);
       if (newCode == null) {
-        Logger.warn("No new code for cell", cellId);
+        Logger.warn("No new code for cell", currentCellId);
         continue;
       }
 
       if (!ev) {
-        Logger.warn("No view for plugin", cellId);
+        Logger.warn("No view for plugin", currentCellId);
         continue;
       }
 

package/src/core/codemirror/misc/__tests__/string-braces.test.ts

@@ -0,0 +1,200 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { python } from "@codemirror/lang-python";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { afterEach, describe, expect, it } from "vitest";
+import { stringBraceInputHandler } from "../string-braces";
+
+function createEditor(
+  initialContent: string,
+  cursorPosition: number,
+): EditorView {
+  const state = EditorState.create({
+    doc: initialContent,
+    selection: { anchor: cursorPosition },
+    extensions: [python()],
+  });
+
+  const view = new EditorView({
+    state,
+    parent: document.body,
+  });
+
+  return view;
+}
+
+describe("string brace auto-closing", () => {
+  let view: EditorView;
+
+  afterEach(() => {
+    if (view) {
+      view.destroy();
+      if (document.body.contains(view.dom)) {
+        view.dom.remove();
+      }
+    }
+  });
+
+  it("should auto-close braces in f-strings", () => {
+    view = createEditor('f"hello ', 8);
+    const result = stringBraceInputHandler(view, 8, 8, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe('f"hello {}');
+    expect(view.state.selection.main.head).toBe(9);
+  });
+
+  it("should auto-close braces in regular double-quoted strings", () => {
+    view = createEditor('"hello ', 7);
+    const result = stringBraceInputHandler(view, 7, 7, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe('"hello {}');
+    expect(view.state.selection.main.head).toBe(8);
+  });
+
+  it("should auto-close braces in rf-strings", () => {
+    view = createEditor('rf"hello ', 9);
+    const result = stringBraceInputHandler(view, 9, 9, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe('rf"hello {}');
+    expect(view.state.selection.main.head).toBe(10);
+  });
+
+  it("should auto-close braces in fr-strings", () => {
+    view = createEditor('fr"hello ', 9);
+    const result = stringBraceInputHandler(view, 9, 9, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe('fr"hello {}');
+    expect(view.state.selection.main.head).toBe(10);
+  });
+
+  it("should auto-close braces in single-quoted strings", () => {
+    view = createEditor("'hello ", 7);
+    const result = stringBraceInputHandler(view, 7, 7, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe("'hello {}");
+    expect(view.state.selection.main.head).toBe(8);
+  });
+
+  it("should auto-close braces in uppercase F-strings", () => {
+    view = createEditor('F"hello ', 8);
+    const result = stringBraceInputHandler(view, 8, 8, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe('F"hello {}');
+    expect(view.state.selection.main.head).toBe(9);
+  });
+
+  it("should auto-close braces in raw strings without f/t", () => {
+    view = createEditor('r"hello ', 8);
+    const result = stringBraceInputHandler(view, 8, 8, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe('r"hello {}');
+    expect(view.state.selection.main.head).toBe(9);
+  });
+
+  // Handled by other CodeMirror handler(s)
+  it("should NOT auto-close braces outside strings", () => {
+    view = createEditor("x = ", 4);
+    const result = stringBraceInputHandler(view, 4, 4, "{");
+
+    expect(result).toBe(false);
+    expect(view.state.doc.toString()).toBe("x = ");
+  });
+
+  it("should NOT auto-close braces when typing other characters", () => {
+    view = createEditor('f"hello ', 8);
+    const result = stringBraceInputHandler(view, 8, 8, "a");
+
+    expect(result).toBe(false);
+    expect(view.state.doc.toString()).toBe('f"hello ');
+  });
+
+  it("should handle braces at the start of string", () => {
+    view = createEditor('f"', 2);
+    const result = stringBraceInputHandler(view, 2, 2, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe('f"{}');
+    expect(view.state.selection.main.head).toBe(3);
+  });
+
+  it("should handle braces in the middle of string content", () => {
+    view = createEditor('f"hello world ', 14);
+    const result = stringBraceInputHandler(view, 14, 14, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe('f"hello world {}');
+    expect(view.state.selection.main.head).toBe(15);
+  });
+
+  it("should handle multiple braces in string", () => {
+    view = createEditor('f"hello {} world', 16);
+    const result = stringBraceInputHandler(view, 16, 16, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe('f"hello {} world{}');
+    expect(view.state.selection.main.head).toBe(17);
+  });
+
+  it("should handle empty string", () => {
+    view = createEditor('f""', 2);
+    const result = stringBraceInputHandler(view, 2, 2, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe('f"{}"');
+    expect(view.state.selection.main.head).toBe(3);
+  });
+
+  it("should auto-close braces in triple-quoted strings", () => {
+    view = createEditor('"""hello ', 9);
+    const result = stringBraceInputHandler(view, 9, 9, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe('"""hello {}');
+    expect(view.state.selection.main.head).toBe(10);
+  });
+
+  it("should auto-close braces in triple-quoted f-strings", () => {
+    view = createEditor('f"""hello ', 10);
+    const result = stringBraceInputHandler(view, 10, 10, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe('f"""hello {}');
+    expect(view.state.selection.main.head).toBe(11);
+  });
+
+  it("should auto-close braces in triple single-quoted strings", () => {
+    view = createEditor("'''hello ", 9);
+    const result = stringBraceInputHandler(view, 9, 9, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe("'''hello {}");
+    expect(view.state.selection.main.head).toBe(10);
+  });
+
+  it("should auto-close braces in triple single-quoted f-strings", () => {
+    view = createEditor("f'''hello ", 10);
+    const result = stringBraceInputHandler(view, 10, 10, "{");
+
+    expect(result).toBe(true);
+    expect(view.state.doc.toString()).toBe("f'''hello {}");
+    expect(view.state.selection.main.head).toBe(11);
+  });
+
+  it("should NOT auto-close braces when text is selected", () => {
+    view = createEditor('f"hello world"', 8);
+    // User has selected "world" (from position 8 to 13)
+    const result = stringBraceInputHandler(view, 8, 13, "{");
+
+    expect(result).toBe(false);
+    // Document should remain unchanged since we return false
+    expect(view.state.doc.toString()).toBe('f"hello world"');
+  });
+});

package/src/core/codemirror/misc/string-braces.ts

@@ -0,0 +1,37 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { syntaxTree } from "@codemirror/language";
+import type { Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+
+export function stringBraceInputHandler(
+  view: EditorView,
+  from: number,
+  to: number,
+  text: string,
+): boolean {
+  if (text !== "{") {
+    return false;
+  }
+
+  if (from !== to) {
+    return false;
+  }
+
+  const tree = syntaxTree(view.state);
+  const node = tree.resolveInner(from, -1);
+
+  if (!node?.type.name.includes("String")) {
+    return false;
+  }
+
+  view.dispatch({
+    changes: { from, to, insert: "{}" },
+    selection: { anchor: from + 1 },
+    userEvent: "input.type",
+  });
+  return true;
+}
+
+export function stringsAutoCloseBraces(): Extension {
+  return EditorView.inputHandler.of(stringBraceInputHandler);
+}

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

@@ -45,6 +45,7 @@ test("default UserConfig - empty", () => {
   expect(defaultConfig).toMatchInlineSnapshot(`
     {
       "ai": {
+        "custom_providers": {},
         "inline_tooltip": false,
         "mode": "manual",
         "models": {
@@ -114,6 +115,7 @@ test("default UserConfig - one level", () => {
   expect(defaultConfig).toMatchInlineSnapshot(`
     {
       "ai": {
+        "custom_providers": {},
         "inline_tooltip": false,
         "mode": "manual",
         "models": {
@@ -198,6 +200,40 @@ test("default UserConfig with additional information", () => {
   );
 });
 
+test("UserConfig with custom_providers", () => {
+  const config = UserConfigSchema.parse({
+    ai: {
+      custom_providers: {
+        my_provider: {
+          api_key: "test-key",
+          base_url: "https://api.example.com/v1",
+        },
+        another_provider: {
+          base_url: "https://api.another.com/v1",
+        },
+      },
+    },
+  });
+
+  expect(config.ai?.custom_providers).toEqual({
+    my_provider: {
+      api_key: "test-key",
+      base_url: "https://api.example.com/v1",
+    },
+    another_provider: {
+      base_url: "https://api.another.com/v1",
+    },
+  });
+});
+
+test("UserConfig custom_providers defaults to empty object", () => {
+  const config = UserConfigSchema.parse({
+    ai: {},
+  });
+
+  expect(config.ai?.custom_providers).toEqual({});
+});
+
 test("resolvedMarimoConfigAtom overrides correctly and does not mutate the original array", () => {
   const initialUserConfig = {
     completion: {

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

@@ -175,6 +175,7 @@ export const UserConfigSchema = z
             aws_secret_access_key: z.string().optional(),
           })
           .optional(),
+        custom_providers: z.record(z.string(), AiConfigSchema).prefault({}),
         models: AiModelsSchema.prefault({
           displayed_models: [],
           custom_models: [],