@marimo-team/frontend 0.25.3-dev13 → 0.25.3-dev135

package/src/core/cells/__tests__/notebook-outline.test.ts

@@ -0,0 +1,113 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { createStore } from "jotai";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { cellId } from "@/__tests__/branded";
+import {
+  createNotebookActions,
+  notebookAtom,
+  notebookOutline,
+  notebookReducer,
+} from "../cells";
+import { exportedForTesting } from "../document-changes";
+import type { Outline } from "../outline";
+
+const first = cellId("first");
+const second = cellId("second");
+const firstOutline: Outline = {
+  items: [{ name: "First", level: 1, by: { id: "first" } }],
+};
+const secondOutline: Outline = {
+  items: [{ name: "Second", level: 2, by: { id: "second" } }],
+};
+
+function setup() {
+  const store = createStore();
+  store.set(
+    notebookAtom,
+    MockNotebook.notebookState({
+      cellData: { [first]: { code: "x = 1" }, [second]: {} },
+      cellRuntime: {
+        [first]: { outline: firstOutline },
+        [second]: { outline: secondOutline },
+      },
+    }),
+  );
+  const actions = createNotebookActions((action) =>
+    store.set(notebookAtom, (state) => notebookReducer(state, action)),
+  );
+  return { store, actions };
+}
+
+afterEach(() => {
+  exportedForTesting.cancelPendingChanges();
+});
+
+describe("notebookOutline", () => {
+  it("does not notify outline subscribers when cell code changes", () => {
+    const { store, actions } = setup();
+    const initial = store.get(notebookOutline);
+    const listener = vi.fn();
+    const unsubscribe = store.sub(notebookOutline, listener);
+
+    actions.updateCellCode({
+      cellId: first,
+      code: "x = 2",
+      formattingChange: false,
+    });
+
+    expect(store.get(notebookOutline)).toBe(initial);
+    expect(listener).not.toHaveBeenCalled();
+    unsubscribe();
+  });
+
+  it("updates headings when runtime outlines change or are removed", () => {
+    const { store } = setup();
+    const updated: Outline = {
+      items: [{ name: "Updated", level: 1, by: { id: "updated" } }],
+    };
+
+    for (const outline of [updated, null]) {
+      store.set(notebookAtom, (state) => ({
+        ...state,
+        cellRuntime: {
+          ...state.cellRuntime,
+          [first]: { ...state.cellRuntime[first], outline },
+        },
+      }));
+      expect(store.get(notebookOutline)).toEqual({
+        items: [...(outline?.items ?? []), ...secondOutline.items],
+      });
+    }
+  });
+
+  it("keeps headings in cell order after moving and deleting cells", () => {
+    const { store, actions } = setup();
+    actions.moveCell({ cellId: second, before: true });
+    expect(store.get(notebookOutline)).toEqual({
+      items: [...secondOutline.items, ...firstOutline.items],
+    });
+
+    actions.deleteCell({ cellId: second });
+    expect(store.get(notebookOutline)).toEqual(firstOutline);
+  });
+
+  it("notifies subscribers when output is replaced with the same headings", () => {
+    const { store } = setup();
+    const listener = vi.fn();
+    const unsubscribe = store.sub(notebookOutline, listener);
+
+    store.set(notebookAtom, (state) => ({
+      ...state,
+      cellRuntime: {
+        ...state.cellRuntime,
+        [first]: { ...state.cellRuntime[first], outline: { ...firstOutline } },
+      },
+    }));
+
+    // Consumers must reconnect to replacement heading elements in the DOM.
+    expect(listener).toHaveBeenCalledOnce();
+    unsubscribe();
+  });
+});

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

@@ -46,10 +46,17 @@ describe("notebookStateFromSession", () => {
 
   const createNotebookCell = (
     id: string,
-    code: string | null = null,
-    name: string | null = null,
-    config: NotebookCell["config"] | null = null,
-    code_hash: string | null = null,
+    {
+      code = null,
+      name = null,
+      config = null,
+      code_hash = null,
+    }: {
+      code?: string | null;
+      name?: string | null;
+      config?: NotebookCell["config"] | null;
+      code_hash?: string | null;
+    } = {},
   ): NotebookCell => ({
     id,
     code,
@@ -87,7 +94,7 @@ describe("notebookStateFromSession", () => {
 
     it("logs error when session and notebook have different cells", () => {
       const session = createSession([createSessionCell("cell-1")]);
-      const notebook = createNotebook([createNotebookCell("cell-2")]);
+      const notebook = createNotebook([createNotebookCell("cell-2", {})]);
 
       const result = notebookStateFromSession(session, notebook);
 
@@ -328,7 +335,10 @@ describe("notebookStateFromSession", () => {
   describe("notebook only scenarios", () => {
     it("creates state from notebook with single cell", () => {
       const notebook = createNotebook([
-        createNotebookCell("cell-1", "print('hello')", "my_cell"),
+        createNotebookCell("cell-1", {
+          code: "print('hello')",
+          name: "my_cell",
+        }),
       ]);
       const result = notebookStateFromSession(null, notebook);
 
@@ -356,11 +366,15 @@ describe("notebookStateFromSession", () => {
 
     it("creates state from notebook with custom config", () => {
       const notebook = createNotebook([
-        createNotebookCell("cell-1", "code", "name", {
-          hide_code: true,
-          disabled: true,
-          column: 1,
-          expand_output: true,
+        createNotebookCell("cell-1", {
+          code: "code",
+          name: "name",
+          config: {
+            hide_code: true,
+            disabled: true,
+            column: 1,
+            expand_output: true,
+          },
         }),
       ]);
       const result = notebookStateFromSession(null, notebook);
@@ -464,7 +478,10 @@ describe("notebookStateFromSession", () => {
         ),
       ]);
       const notebook = createNotebook([
-        createNotebookCell("cell-1", "print('hello')", "my_cell"),
+        createNotebookCell("cell-1", {
+          code: "print('hello')",
+          name: "my_cell",
+        }),
       ]);
       const result = notebookStateFromSession(session, notebook);
 
@@ -495,8 +512,8 @@ describe("notebookStateFromSession", () => {
         createSessionCell("cell-2"),
       ]);
       const notebook = createNotebook([
-        createNotebookCell("cell-2"),
-        createNotebookCell("cell-1"),
+        createNotebookCell("cell-2", {}),
+        createNotebookCell("cell-1", {}),
       ]);
 
       const result = notebookStateFromSession(session, notebook);
@@ -514,8 +531,8 @@ describe("notebookStateFromSession", () => {
         createSessionCell("cell-2"),
       ]);
       const notebook = createNotebook([
-        createNotebookCell("cell-1"),
-        createNotebookCell("cell-2"),
+        createNotebookCell("cell-1", {}),
+        createNotebookCell("cell-2", {}),
       ]);
 
       const result = notebookStateFromSession(session, notebook);
@@ -669,12 +686,42 @@ describe("notebookStateFromSession", () => {
       };
       // Create notebook cells with code values 'a' through 'f'
       const notebookCells = [
-        createNotebookCell("cell-a", "a", null, null, hashes.a),
-        createNotebookCell("cell-b", "b", null, null, hashes.b),
-        createNotebookCell("cell-c", "c", null, null, hashes.c),
-        createNotebookCell("cell-d", "d", null, null, hashes.d),
-        createNotebookCell("cell-e", "e", null, null, hashes.e),
-        createNotebookCell("cell-f", "f", null, null, hashes.f),
+        createNotebookCell("cell-a", {
+          code: "a",
+          name: null,
+          config: null,
+          code_hash: hashes.a,
+        }),
+        createNotebookCell("cell-b", {
+          code: "b",
+          name: null,
+          config: null,
+          code_hash: hashes.b,
+        }),
+        createNotebookCell("cell-c", {
+          code: "c",
+          name: null,
+          config: null,
+          code_hash: hashes.c,
+        }),
+        createNotebookCell("cell-d", {
+          code: "d",
+          name: null,
+          config: null,
+          code_hash: hashes.d,
+        }),
+        createNotebookCell("cell-e", {
+          code: "e",
+          name: null,
+          config: null,
+          code_hash: hashes.e,
+        }),
+        createNotebookCell("cell-f", {
+          code: "f",
+          name: null,
+          config: null,
+          code_hash: hashes.f,
+        }),
       ];
       // Create session cells with matching code_hashes
       const sessionCells = [
@@ -787,11 +834,36 @@ describe("notebookStateFromSession", () => {
 
       // Notebook has cells with code 'a', 'c', 'z', 'e', 'g'
       const notebookCells = [
-        createNotebookCell("cell-a", "a", null, null, hashes.a),
-        createNotebookCell("cell-c", "c", null, null, hashes.c),
-        createNotebookCell("cell-z", "z", null, null, hashes.z),
-        createNotebookCell("cell-e", "e", null, null, hashes.e),
-        createNotebookCell("cell-g", "g", null, null, hashes.g),
+        createNotebookCell("cell-a", {
+          code: "a",
+          name: null,
+          config: null,
+          code_hash: hashes.a,
+        }),
+        createNotebookCell("cell-c", {
+          code: "c",
+          name: null,
+          config: null,
+          code_hash: hashes.c,
+        }),
+        createNotebookCell("cell-z", {
+          code: "z",
+          name: null,
+          config: null,
+          code_hash: hashes.z,
+        }),
+        createNotebookCell("cell-e", {
+          code: "e",
+          name: null,
+          config: null,
+          code_hash: hashes.e,
+        }),
+        createNotebookCell("cell-g", {
+          code: "g",
+          name: null,
+          config: null,
+          code_hash: hashes.g,
+        }),
       ];
 
       const session = createSession(sessionCells);
@@ -908,15 +980,24 @@ describe("notebookStateFromSession", () => {
 
       // Notebook has cells: cell-1 (1 / 0, no hash), cell-2 (mo.md("Hello"), hash=moMd), cell-3 (slider, hash=slider)
       const notebookCells = [
-        createNotebookCell("cell-1", "1 / 0", null, null, null), // no hash
-        createNotebookCell("cell-2", 'mo.md("Hello")', null, null, hashes.moMd),
-        createNotebookCell(
-          "cell-3",
-          "x = mo.ui.slider(0, 10)",
-          null,
-          null,
-          hashes.slider,
-        ),
+        createNotebookCell("cell-1", {
+          code: "1 / 0",
+          name: null,
+          config: null,
+          code_hash: null,
+        }), // no hash
+        createNotebookCell("cell-2", {
+          code: 'mo.md("Hello")',
+          name: null,
+          config: null,
+          code_hash: hashes.moMd,
+        }),
+        createNotebookCell("cell-3", {
+          code: "x = mo.ui.slider(0, 10)",
+          name: null,
+          config: null,
+          code_hash: hashes.slider,
+        }),
       ];
 
       const session = createSession(sessionCells);

package/src/core/cells/cell.ts

@@ -7,7 +7,12 @@ import { parseOutline } from "../dom/outline";
 import type { CellMessage, OutputMessage } from "../kernel/messages";
 import type { RuntimeState } from "../network/types";
 import { collapseConsoleOutputs } from "./collapseConsoleOutputs";
-import type { CellRuntimeState } from "./types";
+import type { CellRuntimeState, ConsoleOutputMessage } from "./types";
+
+// Ids increase with position, so the last output holds the maximum.
+function nextConsoleOutputId(outputs: ConsoleOutputMessage[]): number {
+  return (outputs.at(-1)?.id ?? 0) + 1;
+}
 
 export function transitionCell(
   cell: CellRuntimeState,
@@ -133,6 +138,7 @@ export function transitionCell(
           mimetype: output.mimetype,
           data: output.data,
           timestamp: output.timestamp,
+          id: output.id,
           response: output.response ?? "",
         };
       }
@@ -146,8 +152,13 @@ export function transitionCell(
     // messageConsole is an output that needs to be appended to the
     // existing console outputs.
     consoleOutputs = Array.isArray(messageConsole)
-      ? collapseConsoleOutputs(messageConsole)
-      : collapseConsoleOutputs([...consoleOutputs, messageConsole]);
+      ? collapseConsoleOutputs(
+          messageConsole.map((output, i) => ({ ...output, id: i + 1 })),
+        )
+      : collapseConsoleOutputs([
+          ...consoleOutputs,
+          { ...messageConsole, id: nextConsoleOutputId(consoleOutputs) },
+        ]);
   }
   nextCell.consoleOutputs = consoleOutputs;
   // Derive outline from output

package/src/core/cells/cells.ts

@@ -1114,6 +1114,7 @@ const {
           mimetype: stdinOutput.mimetype,
           data: stdinOutput.data,
           timestamp: stdinOutput.timestamp,
+          id: stdinOutput.id,
           // An empty response resolves the prompt without retaining the secret.
           response: stdinOutput.mimetype === "text/password" ? "" : response,
         };
@@ -1761,7 +1762,8 @@ export const cellErrorsAtom = atom((get) => {
 });
 
 export const notebookOutline = atom((get) => {
-  const { cellIds, cellRuntime } = get(notebookAtom);
+  const cellIds = get(cellIdsAtom);
+  const cellRuntime = get(cellsRuntimeAtom);
   const outlines = cellIds.inOrderIds.map(
     (cellId) => cellRuntime[cellId].outline,
   );

package/src/core/cells/pending-delete-service.ts

@@ -134,12 +134,8 @@ export function usePendingDeleteService() {
       submit({ cellIds, deleteCell, deleteManyCells, store });
     },
     clear,
-    get idle() {
-      return entries.size === 0;
-    },
-    get shouldConfirmDelete() {
-      return entries.size > 1;
-    },
+    idle: entries.size === 0,
+    shouldConfirmDelete: entries.size > 1,
   };
 }
 

package/src/core/cells/session.ts

@@ -56,7 +56,7 @@ function mergeSessionAndNotebookCells(
     return {
       cellIds,
       sessionCellData: new Map(
-        cellIds.map((id, idx) => [id, null] as [CellId, SessionCell | null]),
+        cellIds.map((id) => [id, null] as [CellId, SessionCell | null]),
       ),
       notebookCellData: new Map(
         cellIds.map(

package/src/core/cells/types.ts

@@ -95,7 +95,7 @@ export interface CellRuntimeState {
   /** TOC outline */
   outline: Outline | null;
   /** messages encoding the cell's console outputs. */
-  consoleOutputs: WithResponse<OutputMessage>[];
+  consoleOutputs: ConsoleOutputMessage[];
   /** current status of the cell */
   status: RuntimeState;
   /** whether the cell has stale inputs*/
@@ -130,3 +130,12 @@ export type WithResponse<T> = T & {
    */
   response?: string;
 };
+
+/**
+ * A console output as held by the frontend. The id is assigned when the
+ * output arrives and never changes, so it can identify the output while
+ * neighboring outputs collapse, truncate, or receive a stdin response.
+ */
+export type ConsoleOutputMessage = WithResponse<OutputMessage> & {
+  id?: number;
+};

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

@@ -100,7 +100,7 @@ function getDuplicateKeymaps(state: EditorState) {
     (keymap) => keymap,
   );
   const duplicates = Objects.fromEntries(
-    Object.entries(groupBy).filter(([key, value]) => value.length > 1),
+    Object.entries(groupBy).filter(([_key, value]) => value.length > 1),
   );
   return duplicates;
 }
@@ -198,22 +198,22 @@ test("go to definition falls through to lower-priority LSP keymap", () => {
 test("placeholder adds another extension", () => {
   const opts = getOpts();
   const withAI = new PythonLanguageAdapter()
-    .getExtension(
-      opts.cellId,
-      opts.completionConfig,
-      opts.hotkeys,
-      "marimo-import",
-      opts.lspConfig,
-    )
+    .getExtension({
+      cellId: opts.cellId,
+      completionConfig: opts.completionConfig,
+      hotkeys: opts.hotkeys,
+      placeholderType: "marimo-import",
+      lspConfig: opts.lspConfig,
+    })
     .flat();
   const withoutAI = new PythonLanguageAdapter()
-    .getExtension(
-      opts.cellId,
-      opts.completionConfig,
-      opts.hotkeys,
-      "none",
-      opts.lspConfig,
-    )
+    .getExtension({
+      cellId: opts.cellId,
+      completionConfig: opts.completionConfig,
+      hotkeys: opts.hotkeys,
+      placeholderType: "none",
+      lspConfig: opts.lspConfig,
+    })
     .flat();
   expect(withAI.length - 1).toBe(withoutAI.length);
 });
@@ -221,22 +221,22 @@ test("placeholder adds another extension", () => {
 test("ai adds more extensions", () => {
   const opts = getOpts();
   const withAI = new PythonLanguageAdapter()
-    .getExtension(
-      opts.cellId,
-      opts.completionConfig,
-      opts.hotkeys,
-      "ai",
-      opts.lspConfig,
-    )
+    .getExtension({
+      cellId: opts.cellId,
+      completionConfig: opts.completionConfig,
+      hotkeys: opts.hotkeys,
+      placeholderType: "ai",
+      lspConfig: opts.lspConfig,
+    })
     .flat();
   const withoutAI = new PythonLanguageAdapter()
-    .getExtension(
-      opts.cellId,
-      opts.completionConfig,
-      opts.hotkeys,
-      "none",
-      opts.lspConfig,
-    )
+    .getExtension({
+      cellId: opts.cellId,
+      completionConfig: opts.completionConfig,
+      hotkeys: opts.hotkeys,
+      placeholderType: "none",
+      lspConfig: opts.lspConfig,
+    })
     .flat();
   expect(withAI.length - 2).toBe(withoutAI.length);
 });

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

@@ -68,6 +68,21 @@ describe("shouldAutorunMarkdownUpdate", () => {
     ).toBe(false);
   });
 
+  it("ignores remote transactions while focused", () => {
+    const transaction = createTransaction({
+      changes: { from: 0, insert: "#" },
+      annotations: [Transaction.remote.of(true)],
+    });
+
+    expect(
+      shouldAutorunMarkdownUpdate({
+        docChanged: transaction.docChanged,
+        transactions: [transaction],
+        hasFocus: true,
+      }),
+    ).toBe(false);
+  });
+
   it("ignores programmatic doc changes without a user event", () => {
     const transaction = createTransaction({
       changes: { from: 0, insert: "#" },

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

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { closeCompletion, completionStatus } from "@codemirror/autocomplete";
-import { type Extension, Prec } from "@codemirror/state";
+import { type Extension, Prec, Transaction } from "@codemirror/state";
 import {
   EditorView,
   type KeyBinding,
@@ -382,8 +382,12 @@ function shouldAutorunMarkdownUpdate({
   }
 
   return transactions.some((tr) => {
-    // Ignore RTC sync changes to avoid duplicate runs from remote edits.
-    if (tr.annotation(loroSyncAnnotation) !== undefined) {
+    // Ignore remote changes to avoid duplicate runs. The client that made the
+    // edit runs it.
+    if (
+      tr.annotation(Transaction.remote) ||
+      tr.annotation(loroSyncAnnotation) !== undefined
+    ) {
       return false;
     }
 

package/src/core/codemirror/keymaps/vim.ts

@@ -369,7 +369,7 @@ class CodeMirrorVimSync {
       // We use onIdle to keep the focused editor snappy
       onIdle(() => {
         if (!skipBroadcast) {
-          this.broadcastModeChange(instance, e.mode, e.subMode);
+          this.broadcastModeChange(instance, e.mode);
         }
         this.isBroadcasting = false;
       });
@@ -380,11 +380,7 @@ class CodeMirrorVimSync {
     this.instances.delete(instance);
   }
 
-  public broadcastModeChange(
-    originInstance: EditorView,
-    mode: string,
-    subMode?: string,
-  ) {
+  public broadcastModeChange(originInstance: EditorView, mode: string) {
     invariant(
       "exitInsertMode" in Vim,
       "Vim does not have an exitInsertMode method",

package/src/core/codemirror/language/__tests__/sql.test.ts

@@ -42,12 +42,14 @@ const adapter = new SQLLanguageAdapter();
 const TEST_ENGINE = "test_engine" as ConnectionName;
 
 const TEST_EXTENSION_ARGS = [
-  {} as CellId,
-  {} as CompletionConfig,
-  {} as HotkeyProvider,
-  {} as PlaceholderType,
-  {} as LSPConfig & {
-    diagnostics: DiagnosticsConfig;
+  {
+    cellId: {} as CellId,
+    completionConfig: {} as CompletionConfig,
+    hotkeys: {} as HotkeyProvider,
+    placeholderType: {} as PlaceholderType,
+    lspConfig: {} as LSPConfig & {
+      diagnostics: DiagnosticsConfig;
+    },
   },
 ] as const;
 
@@ -930,15 +932,15 @@ describe("SQL analysis features", () => {
 
   it("reports semantic diagnostics as warnings", async () => {
     const adapter = new SQLLanguageAdapter();
-    const extensions = adapter.getExtension(
-      {} as CellId,
-      {} as CompletionConfig,
-      {} as HotkeyProvider,
-      {} as PlaceholderType,
-      {
+    const extensions = adapter.getExtension({
+      cellId: {} as CellId,
+      completionConfig: {} as CompletionConfig,
+      hotkeys: {} as HotkeyProvider,
+      placeholderType: {} as PlaceholderType,
+      lspConfig: {
         diagnostics: { sql_linter: true },
       } as LSPConfig & { diagnostics: DiagnosticsConfig },
-    );
+    });
     const state = EditorState.create({
       doc: "SELECT missing FROM users",
       extensions: [languageMetadataField.init(() => metadata), ...extensions],
@@ -963,15 +965,15 @@ describe("SQL analysis features", () => {
 
   it("does not report unknown tables", async () => {
     const adapter = new SQLLanguageAdapter();
-    const extensions = adapter.getExtension(
-      {} as CellId,
-      {} as CompletionConfig,
-      {} as HotkeyProvider,
-      {} as PlaceholderType,
-      {
+    const extensions = adapter.getExtension({
+      cellId: {} as CellId,
+      completionConfig: {} as CompletionConfig,
+      hotkeys: {} as HotkeyProvider,
+      placeholderType: {} as PlaceholderType,
+      lspConfig: {
         diagnostics: { sql_linter: true },
       } as LSPConfig & { diagnostics: DiagnosticsConfig },
-    );
+    });
     const state = EditorState.create({
       doc: "SELECT missing FROM users; SELECT * FROM unknown_table",
       extensions: [languageMetadataField.init(() => metadata), ...extensions],