@marimo-team/frontend 0.19.3-dev3 → 0.19.3-dev30

package/src/components/editor/chrome/wrapper/footer-items/runtime-settings.tsx

@@ -2,6 +2,8 @@
 
 import {
   ChevronDownIcon,
+  ExternalLinkIcon,
+  InfoIcon,
   PowerOffIcon,
   ZapIcon,
   ZapOffIcon,
@@ -15,7 +17,9 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { ExternalLink } from "@/components/ui/links";
 import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
 import { isWasm } from "@/core/wasm/utils";
@@ -99,117 +103,167 @@ export const RuntimeSettings: React.FC<RuntimeSettingsProps> = ({
         </FooterItem>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-64">
-        <DropdownMenuLabel>Runtime reactivity</DropdownMenuLabel>
+        <DropdownMenuLabel>
+          <div className="flex items-center justify-between w-full">
+            <span>Runtime reactivity</span>
+            <ExternalLink href="https://links.marimo.app/runtime-configuration">
+              <span className="text-xs font-normal flex items-center gap-1">
+                Docs
+                <ExternalLinkIcon className="w-3 h-3" />
+              </span>
+            </ExternalLink>
+          </div>
+        </DropdownMenuLabel>
         <DropdownMenuSeparator />
 
-        {/* On startup toggle */}
-        <DisableIfOverridden name="runtime.auto_instantiate">
-          <div className="flex items-center justify-between px-2 py-2">
-            <div className="flex items-center space-x-2">
-              {config.runtime.auto_instantiate ? (
-                <ZapIcon size={14} className="text-amber-500" />
-              ) : (
-                <ZapOffIcon size={14} className="text-muted-foreground" />
-              )}
-              <div>
-                <div className="text-sm font-medium">On startup</div>
-                <div className="text-xs text-muted-foreground">
-                  {config.runtime.auto_instantiate ? "autorun" : "lazy"}
+        <TooltipProvider>
+          {/* On startup toggle */}
+          <DisableIfOverridden name="runtime.auto_instantiate">
+            <div className="flex items-center justify-between px-2 py-2">
+              <div className="flex items-center space-x-2">
+                {config.runtime.auto_instantiate ? (
+                  <ZapIcon size={14} className="text-amber-500" />
+                ) : (
+                  <ZapOffIcon size={14} className="text-muted-foreground" />
+                )}
+                <div>
+                  <div className="text-sm font-medium flex items-center gap-1">
+                    On startup
+                    <Tooltip
+                      content={
+                        <div className="max-w-[200px]">
+                          Whether to automatically run the notebook on startup
+                        </div>
+                      }
+                    >
+                      <InfoIcon className="w-3 h-3" />
+                    </Tooltip>
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {config.runtime.auto_instantiate ? "autorun" : "lazy"}
+                  </div>
                 </div>
               </div>
+              <Switch
+                checked={config.runtime.auto_instantiate}
+                onCheckedChange={handleStartupToggle}
+                size="sm"
+              />
             </div>
-            <Switch
-              checked={config.runtime.auto_instantiate}
-              onCheckedChange={handleStartupToggle}
-              size="sm"
-            />
-          </div>
-        </DisableIfOverridden>
+          </DisableIfOverridden>
 
-        <DropdownMenuSeparator />
+          <DropdownMenuSeparator />
 
-        {/* On cell change toggle */}
-        <DisableIfOverridden name="runtime.on_cell_change">
-          <div className="flex items-center justify-between px-2 py-2">
-            <div className="flex items-center space-x-2">
-              {config.runtime.on_cell_change === "autorun" ? (
-                <ZapIcon size={14} className="text-amber-500" />
-              ) : (
-                <ZapOffIcon size={14} className="text-muted-foreground" />
-              )}
-              <div>
-                <div className="text-sm font-medium">On cell change</div>
-                <div className="text-xs text-muted-foreground">
-                  {config.runtime.on_cell_change}
+          {/* On cell change toggle */}
+          <DisableIfOverridden name="runtime.on_cell_change">
+            <div className="flex items-center justify-between px-2 py-2">
+              <div className="flex items-center space-x-2">
+                {config.runtime.on_cell_change === "autorun" ? (
+                  <ZapIcon size={14} className="text-amber-500" />
+                ) : (
+                  <ZapOffIcon size={14} className="text-muted-foreground" />
+                )}
+                <div>
+                  <div className="text-sm font-medium flex items-center gap-1">
+                    On cell change
+                    <Tooltip
+                      content={
+                        <div className="max-w-[300px]">
+                          Whether to automatically run dependent cells after
+                          running a cell
+                        </div>
+                      }
+                    >
+                      <InfoIcon className="w-3 h-3" />
+                    </Tooltip>
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {config.runtime.on_cell_change}
+                  </div>
                 </div>
               </div>
+              <Switch
+                checked={config.runtime.on_cell_change === "autorun"}
+                onCheckedChange={handleCellChangeToggle}
+                size="sm"
+              />
             </div>
-            <Switch
-              checked={config.runtime.on_cell_change === "autorun"}
-              onCheckedChange={handleCellChangeToggle}
-              size="sm"
-            />
-          </div>
-        </DisableIfOverridden>
+          </DisableIfOverridden>
 
-        {!isWasm() && (
-          <>
-            <DropdownMenuSeparator />
+          {!isWasm() && (
+            <>
+              <DropdownMenuSeparator />
 
-            {/* On module change dropdown */}
-            <DisableIfOverridden name="runtime.auto_reload">
-              <div className="px-2 py-1">
-                <div className="flex items-center space-x-2 mb-2">
-                  {config.runtime.auto_reload === "off" && (
-                    <PowerOffIcon size={14} className="text-muted-foreground" />
-                  )}
-                  {config.runtime.auto_reload === "lazy" && (
-                    <ZapOffIcon size={14} className="text-muted-foreground" />
-                  )}
-                  {config.runtime.auto_reload === "autorun" && (
-                    <ZapIcon size={14} className="text-amber-500" />
-                  )}
-                  <div>
-                    <div className="text-sm font-medium">On module change</div>
-                    <div className="text-xs text-muted-foreground">
-                      {config.runtime.auto_reload}
+              {/* On module change dropdown */}
+              <DisableIfOverridden name="runtime.auto_reload">
+                <div className="px-2 py-1">
+                  <div className="flex items-center space-x-2 mb-2">
+                    {config.runtime.auto_reload === "off" && (
+                      <PowerOffIcon
+                        size={14}
+                        className="text-muted-foreground"
+                      />
+                    )}
+                    {config.runtime.auto_reload === "lazy" && (
+                      <ZapOffIcon size={14} className="text-muted-foreground" />
+                    )}
+                    {config.runtime.auto_reload === "autorun" && (
+                      <ZapIcon size={14} className="text-amber-500" />
+                    )}
+                    <div>
+                      <div className="text-sm font-medium flex items-center gap-1">
+                        On module change
+                        <Tooltip
+                          content={
+                            <div className="max-w-[300px]">
+                              Whether to run affected cells, mark them as stale,
+                              or do nothing when an external module is updated
+                            </div>
+                          }
+                        >
+                          <InfoIcon className="w-3 h-3" />
+                        </Tooltip>
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {config.runtime.auto_reload}
+                      </div>
                     </div>
                   </div>
+                  <div className="space-y-1">
+                    {["off", "lazy", "autorun"].map((option) => (
+                      <button
+                        key={option}
+                        onClick={() =>
+                          handleModuleReloadChange(
+                            option as "off" | "lazy" | "autorun",
+                          )
+                        }
+                        className={cn(
+                          "w-full flex items-center px-2 py-1 text-sm rounded hover:bg-accent",
+                          option === config.runtime.auto_reload && "bg-accent",
+                        )}
+                      >
+                        {option === "off" && (
+                          <PowerOffIcon size={12} className="mr-2" />
+                        )}
+                        {option === "lazy" && (
+                          <ZapOffIcon size={12} className="mr-2" />
+                        )}
+                        {option === "autorun" && (
+                          <ZapIcon size={12} className="mr-2" />
+                        )}
+                        <span className="capitalize">{option}</span>
+                        {option === config.runtime.auto_reload && (
+                          <span className="ml-auto">✓</span>
+                        )}
+                      </button>
+                    ))}
+                  </div>
                 </div>
-                <div className="space-y-1">
-                  {["off", "lazy", "autorun"].map((option) => (
-                    <button
-                      key={option}
-                      onClick={() =>
-                        handleModuleReloadChange(
-                          option as "off" | "lazy" | "autorun",
-                        )
-                      }
-                      className={cn(
-                        "w-full flex items-center px-2 py-1 text-sm rounded hover:bg-accent",
-                        option === config.runtime.auto_reload && "bg-accent",
-                      )}
-                    >
-                      {option === "off" && (
-                        <PowerOffIcon size={12} className="mr-2" />
-                      )}
-                      {option === "lazy" && (
-                        <ZapOffIcon size={12} className="mr-2" />
-                      )}
-                      {option === "autorun" && (
-                        <ZapIcon size={12} className="mr-2" />
-                      )}
-                      <span className="capitalize">{option}</span>
-                      {option === config.runtime.auto_reload && (
-                        <span className="ml-auto">✓</span>
-                      )}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            </DisableIfOverridden>
-          </>
-        )}
+              </DisableIfOverridden>
+            </>
+          )}
+        </TooltipProvider>
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/src/components/editor/notebook-cell.tsx

@@ -585,7 +585,7 @@ const EditableCellComponent = ({
             className={cn(
               className,
               navigationProps.className,
-              "focus:ring-1 focus:ring-(--slate-7) focus:ring-offset-2",
+              "focus:ring-1 focus:ring-(--slate-8) focus:ring-offset-2",
             )}
             ref={cellContainerRef}
             {...cellDomProps(cellId, cellData.name)}
@@ -1032,16 +1032,12 @@ const SetupCellComponent = ({
   const hasConsoleOutput = cellRuntime.consoleOutputs.length > 0;
   const isErrorOutput = isErrorMime(cellRuntime.output?.mimetype);
 
-  const className = clsx(
-    "marimo-cell",
-    "hover-actions-parent z-10 border shadow-sm",
-    "border-(--blue-5)! rounded-sm!",
-    {
-      "needs-run": needsRun,
-      "has-error": cellRuntime.errored,
-      stopped: cellRuntime.stopped,
-    },
-  );
+  const className = clsx("marimo-cell", "hover-actions-parent z-10", {
+    interactive: true,
+    "needs-run": needsRun,
+    "has-error": cellRuntime.errored,
+    stopped: cellRuntime.stopped,
+  });
 
   const handleRefactorWithAI: OnRefactorWithAI = useEvent(
     (opts: { prompt: string; triggerImmediately: boolean }) => {
@@ -1076,7 +1072,7 @@ const SetupCellComponent = ({
             {...mergeProps(navigationProps, {
               className: cn(
                 className,
-                "focus:ring-1 focus:ring-(--blue-7) focus:ring-offset-0",
+                "focus:ring-1 focus:ring-(--slate-8) focus:ring-offset-2",
               ),
               onBlur: closeCompletionHandler,
               onKeyDown: resumeCompletionHandler,
@@ -1086,7 +1082,11 @@ const SetupCellComponent = ({
             tabIndex={-1}
             data-setup-cell={true}
           >
-            <div className={cn("tray")} data-hidden={!isCellCodeShown}>
+            <div
+              className={cn("tray")}
+              data-has-output-above={false}
+              data-hidden={!isCellCodeShown}
+            >
               <StagedAICellBackground
                 cellId={cellId}
                 className="mo-ai-setup-cell"

package/src/components/editor/renderers/vertical-layout/__tests__/useFocusFirstEditor.test.ts

@@ -12,6 +12,8 @@ describe("useFocusFirstEditor", () => {
       cb(0);
       return 0;
     });
+    // Mock document.hasFocus() to return true so focus logic runs
+    vi.spyOn(document, "hasFocus").mockReturnValue(true);
   });
 
   afterEach(() => {
@@ -120,4 +122,29 @@ describe("useFocusFirstEditor", () => {
       writable: true,
     });
   });
+
+  it("should not focus when document does not have focus", () => {
+    // Mock document.hasFocus() to return false (e.g., when embedded in iframe)
+    vi.spyOn(document, "hasFocus").mockReturnValue(false);
+
+    const mockEditor = { focus: vi.fn() };
+    vi.spyOn(cellsModule, "getNotebook").mockReturnValue({
+      cellIds: { iterateTopLevelIds: ["cell-1"] },
+      cellData: {
+        "cell-1": { config: { hide_code: false } },
+      },
+      cellHandles: {
+        "cell-1": { current: { editorView: mockEditor } },
+      },
+    } as unknown as cellsModule.NotebookState);
+
+    renderHook(() => useFocusFirstEditor());
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    // Focus should NOT be called when document doesn't have focus
+    expect(mockEditor.focus).not.toHaveBeenCalled();
+  });
 });

package/src/components/editor/renderers/vertical-layout/useFocusFirstEditor.ts

@@ -19,6 +19,12 @@ export function useFocusFirstEditor() {
     const timeout = setTimeout(() => {
       // Let the DOM render
       requestAnimationFrame(() => {
+        // Skip auto-focus if the document doesn't have focus to avoid
+        // stealing focus from outside (e.g., when embedded in an iframe)
+        if (!document.hasFocus()) {
+          return;
+        }
+
         // Check if the URL contains a scrollTo parameter
         const hash = window.location.hash;
         const cellName = extractCellNameFromHash(hash);

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/MarimoApp.tsx

@@ -12,6 +12,7 @@ import { getInitialAppMode } from "@/core/mode";
 import { CssVariables } from "@/theme/ThemeProvider";
 import { reactLazyWithPreload } from "@/utils/lazy";
 import { ErrorBoundary } from "../components/editor/boundary/ErrorBoundary";
+import { KernelStartupErrorModal } from "../components/editor/KernelStartupErrorModal";
 import { ModalProvider } from "../components/modal/ImperativeModal";
 import { Toaster } from "../components/ui/toaster";
 import { TooltipProvider } from "../components/ui/tooltip";
@@ -91,6 +92,7 @@ const Providers = memo(({ children }: PropsWithChildren) => {
                 {children}
                 <Toaster />
                 <TailwindIndicator />
+                <KernelStartupErrorModal />
               </ModalProvider>
             </LocaleProvider>
           </SlotzProvider>

package/src/core/cells/cells.ts

@@ -1325,10 +1325,7 @@ const {
     };
   },
   addSetupCellIfDoesntExist: (state, action: { code?: string }) => {
-    let { code } = action;
-    if (code == null) {
-      code = "# Initialization code that runs before all other cells";
-    }
+    const { code } = action;
 
     if (state.cellIds.setupCellExists()) {
       // Just focus on the existing setup cell

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", () => {