@marimo-team/frontend 0.20.1 → 0.20.3-dev76

package/src/core/cells/__tests__/cells.test.ts

@@ -279,6 +279,36 @@ describe("cell reducer", () => {
     `);
   });
 
+  it("undo delete restores cell config (hide_code, disabled)", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+      code: "x = 1",
+    });
+    const newCellId = state.cellIds.getColumns()[0].atOrThrow(1);
+
+    // Set config to hidden and disabled
+    actions.updateCellConfig({
+      cellId: newCellId,
+      config: { hide_code: true, disabled: true },
+    });
+    expect(state.cellData[newCellId].config.hide_code).toBe(true);
+    expect(state.cellData[newCellId].config.disabled).toBe(true);
+
+    // Delete the cell
+    actions.deleteCell({ cellId: newCellId });
+    expect(state.cellIds.inOrderIds).not.toContain(newCellId);
+
+    // Undo delete
+    actions.undoDeleteCell();
+    const restoredCellId =
+      state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+
+    // Config should be preserved
+    expect(state.cellData[restoredCellId].config.hide_code).toBe(true);
+    expect(state.cellData[restoredCellId].config.disabled).toBe(true);
+  });
+
   it("can update a cell", () => {
     actions.updateCellCode({
       cellId: firstCellId,

package/src/core/cells/cells.ts

@@ -84,6 +84,7 @@ export interface NotebookState {
     column: CellColumnId;
     index: CellIndex;
     isSetupCell: boolean;
+    config: CellConfig;
   }[];
   /**
    * Key of cell to scroll to; typically set by actions that re-order the cell
@@ -590,17 +591,19 @@ const {
 
     // release the granular atom(s) created for this cell
     releaseCellAtoms(cellId);
+    const prevData = state.cellData[cellId];
     return {
       ...state,
       cellIds: state.cellIds.deleteById(cellId),
       history: [
         ...state.history,
         {
-          name: state.cellData[cellId].name,
+          name: prevData.name,
           serializedEditorState: serializedEditorState,
           column: column.id,
           index: cellIndex,
           isSetupCell: cellId === SETUP_CELL_ID,
+          config: prevData.config,
         },
       ],
       scrollKey: scrollKey,
@@ -619,6 +622,7 @@ const {
       column,
       index,
       isSetupCell,
+      config,
     } = mostRecentlyDeleted;
 
     const cellId = isSetupCell ? SETUP_CELL_ID : CellId.create();
@@ -628,6 +632,7 @@ const {
       code: serializedEditorState.doc,
       edited: serializedEditorState.doc.trim().length > 0,
       serializedEditorState,
+      config,
     });
 
     return {

package/src/core/cells/outline.ts

@@ -5,9 +5,15 @@
  */
 export interface OutlineItem {
   /**
-   * The human-readable heading name.
+   * The human-readable heading name (plain text).
    */
   name: string;
+  /**
+   * The heading's inner HTML, preserving rich content like LaTeX.
+   * When present and different from `name`, the outline should
+   * render this instead of the plain-text `name`.
+   */
+  html?: string;
   /**
    * Locator of the item.
    *

package/src/core/cells/outputs.ts

@@ -1,22 +1,34 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { OutputMessage } from "../kernel/messages";
 import type { CellId } from "./ids";
 
 // This does not need to be overcomplicated. We can just store the expanded
 // state in a global map instead of Jotai since state is not shared between cells.
 const expandedOutputs: Record<CellId, boolean> = {};
+const expandedConsoleOutputs: Record<CellId, boolean> = {};
 
 export function useExpandedOutput(cellId: CellId) {
   const [state, setState] = useState(expandedOutputs[cellId] ?? false);
-  return [
-    state,
-    (expanded: boolean) => {
-      setState(expanded);
-      expandedOutputs[cellId] = expanded;
-    },
-  ] as const;
+
+  // Sync state to external storage
+  useEffect(() => {
+    expandedOutputs[cellId] = state;
+  }, [cellId, state]);
+
+  return [state, setState] as const;
+}
+
+export function useExpandedConsoleOutput(cellId: CellId) {
+  const [state, setState] = useState(expandedConsoleOutputs[cellId] ?? false);
+
+  // Sync state to external storage
+  useEffect(() => {
+    expandedConsoleOutputs[cellId] = state;
+  }, [cellId, state]);
+
+  return [state, setState] as const;
 }
 
 export function isOutputEmpty(

package/src/core/codemirror/language/languages/sql/sql.ts

@@ -5,7 +5,12 @@ import { insertTab } from "@codemirror/commands";
 import { type SQLDialect, type SQLNamespace, sql } from "@codemirror/lang-sql";
 import type { EditorState, Extension } from "@codemirror/state";
 import { Compartment } from "@codemirror/state";
-import { EditorView, keymap } from "@codemirror/view";
+import {
+  EditorView,
+  keymap,
+  ViewPlugin,
+  type ViewUpdate,
+} from "@codemirror/view";
 import {
   defaultSqlHoverTheme,
   NodeSqlParser,
@@ -421,76 +426,85 @@ const SQL_VALIDATION_DEBOUNCE_MS = 300;
  * Custom extension to run SQL queries in EXPLAIN mode on keypress.
  */
 function sqlValidationExtension(): Extension {
-  let debounceTimeout: number | undefined;
-  let lastValidationRequest: string | null = null;
-
-  return EditorView.updateListener.of((update) => {
-    // Only run validation if the document has changed
-    // The extension only runs on keypress, so we don't need to check for focus
-    // This lets AI completions / external calls trigger validation
-    if (!update.docChanged) {
-      return;
-    }
+  return ViewPlugin.define((view) => {
+    let debounceTimeout: number | undefined;
+    let lastValidationRequest: string | null = null;
+    const cellId = view.state.facet(cellIdState);
 
-    const sqlMode = getSQLMode();
-    if (sqlMode === "default") {
-      return;
-    }
+    return {
+      update(update: ViewUpdate) {
+        // Only run validation if the document has changed
+        // The extension only runs on keypress, so we don't need to check for focus
+        // This lets AI completions / external calls trigger validation
+        if (!update.docChanged) {
+          return;
+        }
 
-    const metadata = getSQLMetadata(update.state);
-    const connectionName = metadata.engine;
+        const sqlMode = getSQLMode();
+        if (sqlMode === "default") {
+          return;
+        }
 
-    // Currently only DuckDB is supported
-    if (!INTERNAL_SQL_ENGINES.has(connectionName)) {
-      return;
-    }
+        const metadata = getSQLMetadata(update.state);
+        const connectionName = metadata.engine;
 
-    const doc = update.state.doc;
-    const sqlContent = doc.toString();
+        // Currently only DuckDB is supported
+        if (!INTERNAL_SQL_ENGINES.has(connectionName)) {
+          return;
+        }
 
-    // Clear existing timeout
-    if (debounceTimeout) {
-      window.clearTimeout(debounceTimeout);
-    }
+        const sqlContent = update.state.doc.toString();
 
-    // Debounce the validation call
-    debounceTimeout = window.setTimeout(async () => {
-      // Skip if content hasn't changed since last validation
-      if (lastValidationRequest === sqlContent) {
-        return;
-      }
+        if (debounceTimeout) {
+          window.clearTimeout(debounceTimeout);
+        }
+
+        debounceTimeout = window.setTimeout(async () => {
+          // Skip if the SQL content has not changed
+          if (lastValidationRequest === sqlContent) {
+            return;
+          }
 
-      lastValidationRequest = sqlContent;
-      const cellId = update.view.state.facet(cellIdState);
+          lastValidationRequest = sqlContent;
 
-      if (sqlContent === "") {
-        clearSqlValidationError(cellId);
-        return;
-      }
-
-      try {
-        const dialect = connectionNameToParserDialect(connectionName);
-        const result = await validateSQL(
-          sqlContent,
-          connectionName,
-          dialect,
-          sqlMode,
-        );
-        const validateResult = result.validate_result;
-
-        if (validateResult?.error_message) {
-          setSqlValidationError({
-            cellId,
-            errorMessage: validateResult.error_message,
-            dialect,
-          });
-        } else {
-          clearSqlValidationError(cellId);
+          if (sqlContent === "") {
+            clearSqlValidationError(cellId);
+            return;
+          }
+
+          try {
+            const dialect = connectionNameToParserDialect(connectionName);
+            const result = await validateSQL(
+              sqlContent,
+              connectionName,
+              dialect,
+              sqlMode,
+            );
+            const validateResult = result.validate_result;
+
+            if (validateResult?.error_message) {
+              setSqlValidationError({
+                cellId,
+                errorMessage: validateResult.error_message,
+                dialect,
+              });
+            } else {
+              clearSqlValidationError(cellId);
+            }
+          } catch (error) {
+            Logger.error("Failed to validate SQL", { error });
+          }
+        }, SQL_VALIDATION_DEBOUNCE_MS);
+      },
+
+      // Remove side-effects on plugin removal
+      destroy() {
+        if (debounceTimeout) {
+          window.clearTimeout(debounceTimeout);
         }
-      } catch (error) {
-        Logger.error("Failed to validate SQL", { error });
-      }
-    }, SQL_VALIDATION_DEBOUNCE_MS);
+        clearSqlValidationError(cellId);
+      },
+    };
   });
 }
 

package/src/core/codemirror/language/panel/sql.tsx

@@ -5,7 +5,7 @@ import { useAtomValue } from "jotai";
 import {
   AlertCircle,
   CircleHelpIcon,
-  DatabaseBackup,
+  DatabaseZap,
   SearchCheck,
 } from "lucide-react";
 import { getCellForDomProps } from "@/components/data-table/cell-utils";
@@ -160,7 +160,7 @@ export const SQLModeSelect: React.FC = () => {
     return mode === "validate" ? (
       <SearchCheck className="h-3 w-3" />
     ) : (
-      <DatabaseBackup className="h-3 w-3" />
+      <DatabaseZap className="h-3 w-3" />
     );
   };
 
@@ -176,7 +176,7 @@ export const SQLModeSelect: React.FC = () => {
     ) : (
       <div className="text-xs">
         <div className="font-semibold mb-1 flex flex-row items-center gap-1">
-          <DatabaseBackup className="h-3 w-3" />
+          <DatabaseZap className="h-3 w-3" />
           Default Mode
         </div>
         <p>Standard editing</p>

package/src/core/codemirror/lsp/__tests__/normalize-markdown-math.test.ts

@@ -0,0 +1,123 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import {
+  normalizeLspDocumentation,
+  normalizeMarkdownMath,
+} from "../normalize-markdown-math";
+
+describe("normalizeMarkdownMath", () => {
+  it("converts rst math directives to marimo-tex display math", () => {
+    const markdown = `
+For t > 0:
+
+.. math::
+
+    m_t = \\beta_1 \\cdot m_{t-1}
+`.trim();
+
+    const normalized = normalizeMarkdownMath(markdown);
+    expect(normalized).not.toContain(".. math::");
+    expect(normalized).toContain("<marimo-tex");
+    expect(normalized).toContain("||[m_t = \\beta_1 \\cdot m_{t-1}||]");
+  });
+
+  it("converts :math: roles and latex delimiters", () => {
+    const markdown =
+      "Inline :math:`x^2`, \\(y^2\\), \\[z^2\\], $a^2$, and $$b^2$$.";
+
+    const normalized = normalizeMarkdownMath(markdown);
+    expect(normalized).not.toContain(":math:`");
+    expect(normalized).not.toContain("\\(");
+    expect(normalized).not.toContain("\\[");
+    expect(normalized).toContain("<marimo-tex");
+    expect(normalized).toContain("||(x^2||)");
+    expect(normalized).toContain("||(y^2||)");
+    expect(normalized).toContain("||[z^2||]");
+    expect(normalized).toContain("||(a^2||)");
+    expect(normalized).toContain("||[b^2||]");
+  });
+
+  it("converts rst math directives with same-line latex", () => {
+    const markdown =
+      ".. math::\\begin{align*} m_t &= \\beta_1 g_t \\\\ v_t &= \\beta_2 g_t^2 \\end{align*}";
+
+    const normalized = normalizeMarkdownMath(markdown);
+    expect(normalized).not.toContain(".. math::");
+    expect(normalized).toContain("<marimo-tex");
+    expect(normalized).toContain(
+      "||[\\begin{align*} m_t &= \\beta_1 g_t \\\\ v_t &= \\beta_2 g_t^2 \\end{align*}||]",
+    );
+  });
+
+  it("converts rst math directives followed by unindented latex blocks", () => {
+    const markdown = `
+.. math::
+
+\\begin{align*}
+m_t &= \\beta_1 g_t \\\\
+v_t &= \\beta_2 g_t^2
+\\end{align*}
+`.trim();
+
+    const normalized = normalizeMarkdownMath(markdown);
+    expect(normalized).not.toContain(".. math::");
+    expect(normalized).toContain("<marimo-tex");
+    expect(normalized).toContain(
+      "||[\\begin{align*}\nm_t &= \\beta_1 g_t \\\\\nv_t &= \\beta_2 g_t^2\n\\end{align*}||]",
+    );
+  });
+
+  it("does not transform fenced code blocks or inline code spans", () => {
+    const markdown = `
+\`\`\`python
+formula = ":math:\`x\`"
+directive = """
+.. math::
+
+    x^2
+"""
+\`\`\`
+
+Use \`:math:\` as text and :math:\`z\` as math.
+`.trim();
+
+    const normalized = normalizeMarkdownMath(markdown);
+
+    expect(normalized).toContain('formula = ":math:`x`"');
+    expect(normalized).toContain(".. math::");
+    expect(normalized).toContain("`:math:` as text");
+    expect(normalized).not.toContain(":math:`z`");
+    expect(normalized).toContain("||(z||)");
+  });
+});
+
+describe("normalizeLspDocumentation", () => {
+  it("normalizes markdown and plaintext math markup content", () => {
+    const markdownDoc = normalizeLspDocumentation({
+      kind: "markdown",
+      value: "Compute :math:`x^2`",
+    });
+    const plaintextMathDoc = normalizeLspDocumentation({
+      kind: "plaintext",
+      value: "Compute :math:`x^2`",
+    });
+    const plaintextDoc = normalizeLspDocumentation({
+      kind: "plaintext",
+      value: "Price is $5 today",
+    });
+
+    expect(markdownDoc).toEqual({
+      kind: "markdown",
+      value: 'Compute <marimo-tex class="arithmatex">||(x^2||)</marimo-tex>',
+    });
+    expect(plaintextMathDoc).toEqual({
+      kind: "markdown",
+      value: 'Compute <marimo-tex class="arithmatex">||(x^2||)</marimo-tex>',
+    });
+    expect(plaintextDoc).toEqual({
+      kind: "plaintext",
+      value: "Price is $5 today",
+    });
+  });
+});

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

@@ -329,6 +329,40 @@ describe("NotebookLanguageServerClient", () => {
       });
     });
 
+    it("should normalize math content in hover markdown", async () => {
+      const hoverParams: LSP.HoverParams = {
+        textDocument: { uri: "file:///cell1.py" },
+        position: { line: 0, character: 1 },
+      };
+
+      const mockHoverResponse: LSP.Hover = {
+        contents: {
+          kind: "markdown",
+          value:
+            "For t > 0:\n\n.. math::\n\n\\begin{align*}\nm_t &= \\beta_1 \\cdot g_t\n\\end{align*}",
+        },
+      };
+
+      mockClient.textDocumentHover.mockResolvedValue(mockHoverResponse);
+
+      await notebookClient.textDocumentDidOpen({
+        textDocument: {
+          uri: "file:///cell1.py",
+          languageId: "python",
+          version: 1,
+          text: "value = 1",
+        },
+      });
+
+      const result = await notebookClient.textDocumentHover(hoverParams);
+      const contents = result?.contents as LSP.MarkupContent;
+
+      expect(contents.kind).toBe("markdown");
+      expect(contents.value).toContain("<marimo-tex");
+      expect(contents.value).not.toContain(".. math::");
+      expect(contents.value).toContain("\\begin{align*}");
+    });
+
     it("should return null for empty hover contents", async () => {
       const hoverParams: LSP.HoverParams = {
         textDocument: { uri: "file:///cell1.py" },
@@ -390,6 +424,168 @@ describe("NotebookLanguageServerClient", () => {
         }),
       );
     });
+
+    it("should normalize completion item markdown documentation", async () => {
+      const completionParams: LSP.CompletionParams = {
+        textDocument: { uri: "file:///cell1.py" },
+        position: { line: 0, character: 4 },
+      };
+
+      const mockCompletionResponse: LSP.CompletionList = {
+        isIncomplete: false,
+        items: [
+          {
+            label: "math_completion",
+            kind: LSP.CompletionItemKind.Function,
+            documentation: {
+              kind: "markdown",
+              value: "Compute :math:`x^2`",
+            },
+          },
+        ],
+      };
+
+      mockClient.textDocumentCompletion.mockResolvedValue(
+        mockCompletionResponse,
+      );
+
+      await notebookClient.textDocumentDidOpen({
+        textDocument: {
+          uri: "file:///cell1.py",
+          languageId: "python",
+          version: 1,
+          text: "math",
+        },
+      });
+
+      const result =
+        await notebookClient.textDocumentCompletion(completionParams);
+      const completion = (result as LSP.CompletionList).items[0];
+      const documentation = completion?.documentation as LSP.MarkupContent;
+
+      expect(documentation.kind).toBe("markdown");
+      expect(documentation.value).toContain("<marimo-tex");
+      expect(documentation.value).not.toContain(":math:`");
+    });
+
+    it("should normalize completion item plaintext math documentation", async () => {
+      const completionParams: LSP.CompletionParams = {
+        textDocument: { uri: "file:///cell1.py" },
+        position: { line: 0, character: 4 },
+      };
+
+      const mockCompletionResponse: LSP.CompletionList = {
+        isIncomplete: false,
+        items: [
+          {
+            label: "math_completion_plain",
+            kind: LSP.CompletionItemKind.Function,
+            documentation: {
+              kind: "plaintext",
+              value: "For t > 0:\n\n.. math::\n\n    m_t = \\beta_1 \\cdot g_t",
+            },
+          },
+        ],
+      };
+
+      mockClient.textDocumentCompletion.mockResolvedValue(
+        mockCompletionResponse,
+      );
+
+      await notebookClient.textDocumentDidOpen({
+        textDocument: {
+          uri: "file:///cell1.py",
+          languageId: "python",
+          version: 1,
+          text: "math",
+        },
+      });
+
+      const result =
+        await notebookClient.textDocumentCompletion(completionParams);
+      const completion = (result as LSP.CompletionList).items[0];
+      const documentation = completion?.documentation as LSP.MarkupContent;
+
+      expect(documentation.kind).toBe("markdown");
+      expect(documentation.value).toContain("<marimo-tex");
+      expect(documentation.value).not.toContain(".. math::");
+    });
+  });
+
+  describe("completionItemResolve", () => {
+    it("should normalize resolved completion markdown documentation", async () => {
+      const unresolvedItem: LSP.CompletionItem = { label: "test" };
+      const resolvedItem: LSP.CompletionItem = {
+        label: "test",
+        documentation: {
+          kind: "markdown",
+          value: "For t > 0:\n\n.. math::\n\n    m_t = \\beta_1 \\cdot g_t",
+        },
+      };
+
+      mockClient.completionItemResolve.mockResolvedValue(resolvedItem);
+
+      const result = await notebookClient.completionItemResolve(unresolvedItem);
+      const documentation = result.documentation as LSP.MarkupContent;
+
+      expect(documentation.kind).toBe("markdown");
+      expect(documentation.value).toContain("<marimo-tex");
+      expect(documentation.value).not.toContain(".. math::");
+    });
+  });
+
+  describe("textDocumentSignatureHelp", () => {
+    it("should normalize signature and parameter markdown documentation", async () => {
+      const signatureHelpParams: LSP.SignatureHelpParams = {
+        textDocument: { uri: "file:///cell1.py" },
+        position: { line: 0, character: 3 },
+      };
+
+      const mockSignatureHelp: LSP.SignatureHelp = {
+        signatures: [
+          {
+            label: "foo(x)",
+            documentation: {
+              kind: "markdown",
+              value: "Compute :math:`x^2`",
+            },
+            parameters: [
+              {
+                label: "x",
+                documentation: {
+                  kind: "markdown",
+                  value:
+                    "For t > 0:\n\n.. math::\n\n    m_t = \\beta_1 \\cdot g_t",
+                },
+              },
+            ],
+          },
+        ],
+      };
+
+      mockClient.textDocumentSignatureHelp.mockResolvedValue(mockSignatureHelp);
+
+      await notebookClient.textDocumentDidOpen({
+        textDocument: {
+          uri: "file:///cell1.py",
+          languageId: "python",
+          version: 1,
+          text: "foo(",
+        },
+      });
+
+      const result =
+        await notebookClient.textDocumentSignatureHelp(signatureHelpParams);
+      const signature = result?.signatures[0];
+      const signatureDoc = signature?.documentation as LSP.MarkupContent;
+      const parameterDoc = signature?.parameters?.[0]
+        ?.documentation as LSP.MarkupContent;
+
+      expect(signatureDoc.value).toContain("<marimo-tex");
+      expect(signatureDoc.value).not.toContain(":math:`");
+      expect(parameterDoc.value).toContain("<marimo-tex");
+      expect(parameterDoc.value).not.toContain(".. math::");
+    });
   });
 
   describe("textDocumentRename", () => {