@marimo-team/frontend 0.21.1-dev94 → 0.21.1

package/src/components/editor/actions/useCellActionButton.tsx

@@ -41,7 +41,10 @@ import { hasOnlyOneCellAtom, useCellActions } from "@/core/cells/cells";
 import { type CellId, SETUP_CELL_ID } from "@/core/cells/ids";
 import type { CellData } from "@/core/cells/types";
 import { formatEditorViews } from "@/core/codemirror/format";
-import { toggleToLanguage } from "@/core/codemirror/language/commands";
+import {
+  getCurrentLanguageAdapter,
+  toggleToLanguage,
+} from "@/core/codemirror/language/commands";
 import { switchLanguage } from "@/core/codemirror/language/extension";
 import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import {
@@ -235,35 +238,41 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
         },
         hidden: isSetupCell,
       },
-      {
-        icon: <DatabaseIcon size={13} strokeWidth={1.5} />,
-        label: "Convert to SQL",
-        handle: () => {
-          const editorView = getEditorView();
-          if (!editorView) {
-            return;
+      // We need to check this here because the user may have toggled the language
+      getCurrentLanguageAdapter(getEditorView()) === "sql"
+        ? {
+            icon: <PythonIcon />,
+            label: "View as Python",
+            hotkey: "cell.viewAsSQL",
+            handle: () => {
+              const editorView = getEditorView();
+              if (!editorView) {
+                return;
+              }
+              toggleToLanguage(editorView, "python", { force: true });
+            },
+            hidden: isSetupCell,
           }
-          maybeAddMarimoImport({ autoInstantiate, createNewCell: createCell });
-          switchLanguage(editorView, {
-            language: "sql",
-            keepCodeAsIs: false,
-          });
-        },
-        hidden: isSetupCell,
-      },
-      {
-        icon: <PythonIcon />,
-        label: "Toggle as Python",
-        handle: () => {
-          const editorView = getEditorView();
-          if (!editorView) {
-            return;
-          }
-          maybeAddMarimoImport({ autoInstantiate, createNewCell: createCell });
-          toggleToLanguage(editorView, "python", { force: true });
-        },
-        hidden: isSetupCell,
-      },
+        : {
+            icon: <DatabaseIcon size={13} strokeWidth={1.5} />,
+            label: "Convert to SQL",
+            hotkey: "cell.viewAsSQL",
+            handle: () => {
+              const editorView = getEditorView();
+              if (!editorView) {
+                return;
+              }
+              maybeAddMarimoImport({
+                autoInstantiate,
+                createNewCell: createCell,
+              });
+              switchLanguage(editorView, {
+                language: "sql",
+                keepCodeAsIs: false,
+              });
+            },
+            hidden: isSetupCell,
+          },
     ],
 
     // Movement

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

@@ -163,6 +163,13 @@ const CellEditorInternal = ({
     }
   });
 
+  const afterToggleSQL = useEvent(() => {
+    maybeAddMarimoImport({
+      autoInstantiate,
+      createNewCell: cellActions.createNewCell,
+    });
+  });
+
   const aiEnabled = isAiEnabled(userConfig);
 
   const extensions = useMemo(() => {
@@ -173,6 +180,7 @@ const CellEditorInternal = ({
       cellActions: {
         ...cellActions,
         afterToggleMarkdown,
+        afterToggleSQL,
         onRun: handleRunCell,
         deleteCell: handleDelete,
         saveNotebook: saveOrNameNotebook,
@@ -267,6 +275,7 @@ const CellEditorInternal = ({
     handleRunCell,
     setAiCompletionCell,
     afterToggleMarkdown,
+    afterToggleSQL,
     setLanguageAdapter,
     showHiddenCode,
     saveOrNameNotebook,

package/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -5,6 +5,7 @@ import { useAtom } from "jotai";
 import { CrosshairIcon, PinIcon, PinOffIcon, XIcon } from "lucide-react";
 import type { PropsWithChildren } from "react";
 import { Panel, PanelResizeHandle } from "react-resizable-panels";
+import { raf2 } from "@/components/editor/navigation/focus-utils";
 import { Button } from "@/components/ui/button";
 import { Toggle } from "@/components/ui/toggle";
 import { Tooltip } from "@/components/ui/tooltip";
@@ -151,6 +152,11 @@ const ResizableComponent = ({ children }: ResizableComponentProps) => {
     startingWidth: 400,
     minWidth: 300,
     maxWidth: 1500,
+    onResize: () => {
+      raf2(() => {
+        window.dispatchEvent(new Event("resize"));
+      });
+    },
   });
 
   return (

package/src/components/editor/chrome/wrapper/__tests__/utils.test.ts

@@ -0,0 +1,35 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it, vi } from "vitest";
+import { handleDragging } from "../utils";
+
+describe("handleDragging", () => {
+  it("should dispatch a resize event after dragging ends", async () => {
+    const listener = vi.fn();
+    window.addEventListener("resize", listener);
+
+    handleDragging(false);
+
+    // raf2: wait two animation frames
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    window.removeEventListener("resize", listener);
+  });
+
+  it("should not dispatch a resize event while dragging", async () => {
+    const listener = vi.fn();
+    window.addEventListener("resize", listener);
+
+    handleDragging(true);
+
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+
+    expect(listener).not.toHaveBeenCalled();
+
+    window.removeEventListener("resize", listener);
+  });
+});

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -17,6 +17,7 @@ import "./app-chrome.css";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { useAtom, useAtomValue } from "jotai";
 import { XIcon } from "lucide-react";
+import useEvent from "react-use-event-hook";
 import { Button } from "@/components/ui/button";
 import { ReorderableList } from "@/components/ui/reorderable-list";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -26,6 +27,7 @@ import { capabilitiesAtom } from "@/core/config/capabilities";
 import { getFeatureFlag } from "@/core/config/feature-flag";
 import { cn } from "@/utils/cn";
 import { ErrorBoundary } from "../../boundary/ErrorBoundary";
+import { raf2 } from "../../navigation/focus-utils";
 import { ContextAwarePanel } from "../panels/context-aware-panel/context-aware-panel";
 import { PanelSectionProvider } from "../panels/panel-context";
 import { panelLayoutAtom, useChromeActions, useChromeState } from "../state";
@@ -147,6 +149,14 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     });
   }, [panelLayout.sidebar, capabilities]);
 
+  const emitResizeEvent = useEvent(() => {
+    // HACK: Unfortunately, we have to do this twice to make sure the
+    // panel is fully expanded before we dispatch the resize event
+    raf2(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+  });
+
   // sync sidebar
   useEffect(() => {
     if (!sidebarRef.current) {
@@ -162,13 +172,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     }
 
     // Dispatch a resize event so widgets know to resize
-    requestAnimationFrame(() => {
-      // HACK: Unfortunately, we have to do this twice to make sure it the
-      // panel is fully expanded before we dispatch the resize event
-      requestAnimationFrame(() => {
-        window.dispatchEvent(new Event("resize"));
-      });
-    });
+    emitResizeEvent();
   }, [isSidebarOpen]);
 
   // sync panel
@@ -186,13 +190,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     }
 
     // Dispatch a resize event so widgets know to resize
-    requestAnimationFrame(() => {
-      // HACK: Unfortunately, we have to do this twice to make sure it the
-      // panel is fully expanded before we dispatch the resize event
-      requestAnimationFrame(() => {
-        window.dispatchEvent(new Event("resize"));
-      });
-    });
+    emitResizeEvent();
   }, [isDeveloperPanelOpen]);
 
   // Auto-correct developer panel selection when the selected tab is no longer available

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

@@ -1,8 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { raf2 } from "../../navigation/focus-utils";
+
 export function handleDragging(isDragging: boolean) {
   if (!isDragging) {
     // Once the user is done dragging, dispatch a resize event
-    window.dispatchEvent(new Event("resize"));
+    raf2(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
   }
 }

package/src/components/editor/header/status.tsx

@@ -5,6 +5,7 @@ import { HourglassIcon, LockIcon, UnlinkIcon } from "lucide-react";
 import React from "react";
 import { Tooltip } from "@/components/ui/tooltip";
 import { notebookScrollToRunning } from "@/core/cells/actions";
+import { onlyScratchpadIsRunningAtom } from "@/core/cells/cells";
 import { viewStateAtom } from "@/core/mode";
 import { type ConnectionStatus, WebSocketState } from "@/core/websocket/types";
 import { cn } from "@/utils/cn";
@@ -52,17 +53,24 @@ const LockedIcon = () => (
   </Tooltip>
 );
 
-const RunningIcon = () => (
-  <Tooltip content="Jump to running cell" side="right">
-    <div
-      className={topLeftStatus}
-      data-testid="loading-indicator"
-      onClick={notebookScrollToRunning}
-    >
-      <HourglassIcon className="running-app-icon" size={30} strokeWidth={1} />
-    </div>
-  </Tooltip>
-);
+const RunningIcon = () => {
+  const scratchpadOnly = useAtomValue(onlyScratchpadIsRunningAtom);
+  const tooltip = scratchpadOnly
+    ? "Scratchpad is running"
+    : "Jump to running cell";
+
+  return (
+    <Tooltip content={tooltip} side="right">
+      <div
+        className={topLeftStatus}
+        data-testid="loading-indicator"
+        onClick={scratchpadOnly ? undefined : notebookScrollToRunning}
+      >
+        <HourglassIcon className="running-app-icon" size={30} strokeWidth={1} />
+      </div>
+    </Tooltip>
+  );
+};
 
 const NoiseBackground = () => (
   <>

package/src/components/editor/renderers/grid-layout/grid-layout.tsx

@@ -158,12 +158,19 @@ export const GridLayoutRenderer: React.FC<Props> = ({
       compactType={null}
       preventCollision={true}
       rowHeight={layout.rowHeight}
-      onLayoutChange={(cellLayouts) =>
+      onLayoutChange={(cellLayouts) => {
+        // Don't update state in read mode — the layout is static and
+        // updating triggers a re-render cycle that causes an infinite loop
+        // (React error https://react.dev/errors/185 Maximum update depth exceeded).
+        // https://github.com/marimo-team/marimo/issues/8644
+        if (isReading) {
+          return;
+        }
         setLayout({
           ...layout,
           cells: cellLayouts,
-        })
-      }
+        });
+      }}
       droppingItem={
         droppingItem
           ? {

package/src/core/cells/cells.ts

@@ -1640,6 +1640,12 @@ export const cellsRuntimeAtom = atom((get) => get(notebookAtom).cellRuntime);
 export const notebookIsRunningAtom = atom((get) =>
   notebookIsRunning(get(notebookAtom)),
 );
+export const onlyScratchpadIsRunningAtom = atom((get) => {
+  const { cellRuntime } = get(notebookAtom);
+  return Object.entries(cellRuntime).every(
+    ([id, rt]) => rt.status !== "running" || id === SCRATCH_CELL_ID,
+  );
+});
 export const notebookQueuedOrRunningCountAtom = atom((get) =>
   notebookQueueOrRunningCount(get(notebookAtom)),
 );

package/src/core/cells/utils.ts

@@ -11,6 +11,7 @@ export function notebookIsRunning(state: NotebookState) {
     (cell) => cell.status === "running",
   );
 }
+
 export function notebookQueueOrRunningCount(state: NotebookState) {
   return Object.values(state.cellRuntime).filter(
     (cell) => cell.status === "running" || cell.status === "queued",

package/src/core/codemirror/__tests__/setup.test.ts

@@ -45,6 +45,7 @@ function getOpts() {
       onRun: namedFunction("onRun"),
       deleteCell: namedFunction("deleteCell"),
       afterToggleMarkdown: namedFunction("afterToggleMarkdown"),
+      afterToggleSQL: namedFunction("afterToggleSQL"),
     } as unknown as CodemirrorCellActions,
     completionConfig: {
       activate_on_typing: false,

package/src/core/codemirror/cells/state.ts

@@ -11,6 +11,7 @@ export interface CodemirrorCellActions extends CellActions {
   onRun: () => void;
   deleteCell: () => void;
   afterToggleMarkdown: () => void;
+  afterToggleSQL: () => void;
   saveNotebook: () => void;
 }
 

package/src/core/codemirror/extensions.ts

@@ -42,6 +42,26 @@ export function formatKeymapExtension(hotkeys: HotkeyProvider) {
           actions.afterToggleMarkdown();
         }
 
+        return response !== false;
+      },
+    },
+    {
+      key: hotkeys.getHotkey("cell.viewAsSQL").key,
+      preventDefault: true,
+      run: (ev) => {
+        const currentLanguage = getCurrentLanguageAdapter(ev);
+        const destinationLanguage =
+          currentLanguage === "sql" ? "python" : "sql";
+
+        const response = toggleToLanguage(ev, destinationLanguage, {
+          force: true,
+        });
+
+        if (response === "sql") {
+          const actions = ev.state.facet(cellActionsState);
+          actions.afterToggleSQL();
+        }
+
         return response !== false;
       },
     },

package/src/core/codemirror/language/utils.ts

@@ -3,7 +3,11 @@
 import type { EditorState } from "@codemirror/state";
 import type { EditorView } from "@codemirror/view";
 import { replaceEditorContent } from "../replace-editor-content";
-import { languageAdapterState } from "./extension";
+import {
+  languageAdapterFromCode,
+  languageAdapterState,
+  switchLanguage,
+} from "./extension";
 import { languageMetadataField } from "./metadata";
 
 /**
@@ -35,6 +39,17 @@ export function updateEditorCodeFromPython(
   editor: EditorView,
   pythonCode: string,
 ): string {
+  const currentAdapter = editor.state.field(languageAdapterState);
+  const correctAdapter = languageAdapterFromCode(pythonCode);
+
+  // If the language type changed (e.g., markdown → python), switch adapters
+  if (correctAdapter.type !== currentAdapter.type) {
+    switchLanguage(editor, {
+      language: correctAdapter.type,
+      keepCodeAsIs: true,
+    });
+  }
+
   const languageAdapter = editor.state.field(languageAdapterState);
   const [code] = languageAdapter.transformIn(pythonCode);
   // Use replaceEditorContent which preserves cursor position when focused

package/src/core/codemirror/reactive-references/__tests__/analyzer.test.ts

@@ -1115,6 +1115,60 @@ class Foo:
     `);
   });
 
+  test("should not highlight attribute access matching a for-loop variable", () => {
+    // When `tool` is used as a for-loop variable, `mcp.tool` (attribute access)
+    // should NOT have `tool` highlighted — it's a property, not a variable reference.
+    expect(
+      runHighlight(
+        ["mcp", "client"],
+        `
+@mcp.tool
+def roll_dice():
+    pass
+
+async with client:
+    for tool in await client.list_tools():
+        print(tool)
+`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @mcp.tool
+       ^^^
+      def roll_dice():
+          pass
+
+      async with client:
+                 ^^^^^^
+          for tool in await client.list_tools():
+                            ^^^^^^
+              print(tool)
+      "
+    `);
+  });
+
+  test("should not highlight property name matching a global variable", () => {
+    // `tool` is a global variable, but `mcp.tool` should not highlight `tool`
+    // because it's a property access, not a variable reference.
+    expect(
+      runHighlight(
+        ["mcp", "tool"],
+        `
+@mcp.tool
+def roll_dice():
+    pass
+`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @mcp.tool
+       ^^^
+      def roll_dice():
+          pass
+      "
+    `);
+  });
+
   test("class property self-reference", () => {
     expect(
       runHighlight(

package/src/core/codemirror/reactive-references/analyzer.ts

@@ -462,6 +462,7 @@ export function findReactiveVariables(options: {
   ): boolean {
     return (
       allVariableNames.has(varName) &&
+      !isPropertyAccess(cursor) &&
       !isKeywordArgumentName(cursor) &&
       !isAssignmentTarget(cursor)
     );
@@ -529,6 +530,19 @@ function isAssignmentTarget(cursor: TreeCursor): boolean {
   return false;
 }
 
+/** Checks whether a `VariableName` is a property access (e.g. `tool` in `mcp.tool`). */
+function isPropertyAccess(cursor: TreeCursor): boolean {
+  // Check if the previous sibling is a "." node, which means this
+  // VariableName is a property access rather than a standalone variable.
+  // This handles both MemberExpression (e.g. `obj.attr`) and Decorator
+  // (e.g. `@mcp.tool`) where the parser emits flat sibling nodes.
+  const temp = cursor.node.cursor();
+  if (temp.prevSibling() && temp.name === ".") {
+    return true;
+  }
+  return false;
+}
+
 /**
  * Checks if the syntax tree contains any syntax errors.
  * If there are errors, we shouldn't show reactive variable highlighting.

package/src/core/dom/outline.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { sanitizeHtml } from "@/plugins/core/sanitize";
+import { sanitizeHtml } from "@/plugins/core/sanitize-html";
 import { invariant } from "@/utils/invariant";
 import { Logger } from "@/utils/Logger";
 import type { Outline, OutlineItem } from "../cells/outline";

package/src/core/hotkeys/hotkeys.ts

@@ -142,6 +142,14 @@ const DEFAULT_HOT_KEY = {
     group: "Editing",
     key: "Mod-Shift-m",
   },
+  "cell.viewAsSQL": {
+    name: "Toggle SQL",
+    group: "Editing",
+    key: {
+      windows: "Alt-Shift-l",
+      main: "Mod-Shift-l",
+    },
+  },
   "cell.complete": {
     name: "Code completion",
     group: "Editing",

package/src/css/md.css

@@ -41,6 +41,10 @@
   font-family: var(--heading-font);
 }
 
+.markdown hr {
+  margin-block: 0.5rem;
+}
+
 .markdown a {
   cursor: pointer;
   text-decoration: inherit;

package/src/plugins/core/sanitize-html.ts

@@ -0,0 +1,50 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import DOMPurify, { type Config } from "dompurify";
+
+// preserve target=_blank https://github.com/cure53/DOMPurify/issues/317#issuecomment-912474068
+const TEMPORARY_ATTRIBUTE = "data-temp-href-target";
+DOMPurify.addHook("beforeSanitizeAttributes", (node) => {
+  if (node.tagName === "A") {
+    if (!node.hasAttribute("target")) {
+      node.setAttribute("target", "_self");
+    }
+
+    if (node.hasAttribute("target")) {
+      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute("target") || "");
+    }
+  }
+});
+
+DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+  if (node.tagName === "A" && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+    node.setAttribute("target", node.getAttribute(TEMPORARY_ATTRIBUTE) || "");
+    node.removeAttribute(TEMPORARY_ATTRIBUTE);
+    if (node.getAttribute("target") === "_blank") {
+      node.setAttribute("rel", "noopener noreferrer");
+    }
+  }
+});
+
+/**
+ * This removes script tags, form tags, iframe tags, and other potentially dangerous tags
+ */
+export function sanitizeHtml(html: string) {
+  const sanitizationOptions: Config = {
+    // Default to permit HTML, SVG and MathML, this limits to HTML only
+    USE_PROFILES: { html: true, svg: true, mathMl: true },
+    // Allow SVG <use> elements and their href attributes, which are needed
+    // for SVGs that reference <defs> (e.g., Matplotlib SVG output).
+    ADD_TAGS: ["use"],
+    ADD_ATTR: ["href", "xlink:href"],
+    // glue elements like style, script or others to document.body and prevent unintuitive browser behavior in several edge-cases
+    FORCE_BODY: true,
+    CUSTOM_ELEMENT_HANDLING: {
+      tagNameCheck: /^(marimo-[A-Za-z][\w-]*|iconify-icon)$/,
+      attributeNameCheck: /^[A-Za-z][\w-]*$/,
+    },
+    // This flag means we should sanitize such that is it safe for XML,
+    // but this is only used for HTML content.
+    SAFE_FOR_XML: !html.includes("marimo-mermaid"),
+  };
+  return DOMPurify.sanitize(html, sanitizationOptions);
+}

package/src/plugins/core/sanitize.ts

@@ -1,10 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import DOMPurify, { type Config } from "dompurify";
 import { atom, useAtomValue } from "jotai";
 import { hasRunAnyCellAtom } from "@/components/editor/cell/useRunCells";
 import { autoInstantiateAtom } from "@/core/config/config";
 import { getInitialAppMode } from "@/core/mode";
 
+// Re-export so existing consumers don't break.
+export { sanitizeHtml } from "./sanitize-html";
+
 /**
  * Whether to sanitize the html.
  * When running as an app or with auto_instantiate enabled
@@ -42,51 +44,3 @@ const sanitizeHtmlAtom = atom<boolean>((get) => {
 export function useSanitizeHtml() {
   return useAtomValue(sanitizeHtmlAtom);
 }
-
-// preserve target=_blank https://github.com/cure53/DOMPurify/issues/317#issuecomment-912474068
-const TEMPORARY_ATTRIBUTE = "data-temp-href-target";
-DOMPurify.addHook("beforeSanitizeAttributes", (node) => {
-  if (node.tagName === "A") {
-    if (!node.hasAttribute("target")) {
-      node.setAttribute("target", "_self");
-    }
-
-    if (node.hasAttribute("target")) {
-      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute("target") || "");
-    }
-  }
-});
-
-DOMPurify.addHook("afterSanitizeAttributes", (node) => {
-  if (node.tagName === "A" && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
-    node.setAttribute("target", node.getAttribute(TEMPORARY_ATTRIBUTE) || "");
-    node.removeAttribute(TEMPORARY_ATTRIBUTE);
-    if (node.getAttribute("target") === "_blank") {
-      node.setAttribute("rel", "noopener noreferrer");
-    }
-  }
-});
-
-/**
- * This removes script tags, form tags, iframe tags, and other potentially dangerous tags
- */
-export function sanitizeHtml(html: string) {
-  const sanitizationOptions: Config = {
-    // Default to permit HTML, SVG and MathML, this limits to HTML only
-    USE_PROFILES: { html: true, svg: true, mathMl: true },
-    // Allow SVG <use> elements and their href attributes, which are needed
-    // for SVGs that reference <defs> (e.g., Matplotlib SVG output).
-    ADD_TAGS: ["use"],
-    ADD_ATTR: ["href", "xlink:href"],
-    // glue elements like style, script or others to document.body and prevent unintuitive browser behavior in several edge-cases
-    FORCE_BODY: true,
-    CUSTOM_ELEMENT_HANDLING: {
-      tagNameCheck: /^(marimo-[A-Za-z][\w-]*|iconify-icon)$/,
-      attributeNameCheck: /^[A-Za-z][\w-]*$/,
-    },
-    // This flag means we should sanitize such that is it safe for XML,
-    // but this is only used for HTML content.
-    SAFE_FOR_XML: !html.includes("marimo-mermaid"),
-  };
-  return DOMPurify.sanitize(html, sanitizationOptions);
-}