@marimo-team/frontend 0.25.2 → 0.25.3-dev100

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

@@ -789,6 +789,58 @@ describe("cell reducer", () => {
     `);
   });
 
+  it("keeps error evidence after an edit and a new queued run", () => {
+    const code = "raise ValueError('old failure')";
+    const output: OutputMessage = {
+      channel: "marimo-error",
+      mimetype: "application/vnd.marimo+error",
+      data: [
+        {
+          type: "exception",
+          msg: "old failure",
+          exception_type: "ValueError",
+          raising_cell: null,
+          traceback: "<pre>ValueError: old failure</pre>",
+        },
+      ],
+      code,
+      timestamp: 1,
+    };
+    actions.handleCellMessage({
+      cell_id: firstCellId,
+      output,
+      console: {
+        channel: "stderr",
+        mimetype: "application/vnd.marimo+traceback",
+        data: "<pre>ValueError: old failure</pre>",
+        code,
+        timestamp: 1,
+      },
+      status: "idle",
+      stale_inputs: null,
+      timestamp: 1,
+    });
+    actions.updateCellCode({
+      cellId: firstCellId,
+      code: "print('new code')",
+      formattingChange: false,
+    });
+    actions.prepareForRun({ cellId: firstCellId });
+    actions.handleCellMessage({
+      cell_id: firstCellId,
+      output: null,
+      console: null,
+      status: "queued",
+      stale_inputs: null,
+      timestamp: 2,
+    });
+    const runtime = state.cellRuntime[firstCellId];
+    expect(state.cellData[firstCellId].lastCodeRun).toBe("print('new code')");
+    expect(runtime.output).toEqual(output);
+    expect(runtime.consoleOutputs[0].code).toBe(code);
+    expect(runtime.consoleOutputs[0].data).toContain("old failure");
+  });
+
   it("can run cell and receive cell messages", () => {
     // HAPPY PATH
     /////////////////
@@ -1527,7 +1579,9 @@ describe("cell reducer", () => {
       response: secret,
     });
 
-    expect(cells[0].consoleOutputs).toEqual([{ ...prompt, response: "" }]);
+    expect(cells[0].consoleOutputs).toEqual([
+      { ...prompt, id: 1, response: "" },
+    ]);
     expect(JSON.stringify(cells[0].consoleOutputs)).not.toContain(secret);
   });
 

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

@@ -2,6 +2,7 @@
 
 import { describe, expect, it } from "vitest";
 import { StatefulOutputMessage } from "@/components/editor/output/ansi-reduce";
+import type { ConsoleOutputMessage } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
 import {
   collapseConsoleOutputs,
@@ -279,6 +280,59 @@ describe("collapseConsoleOutputs", () => {
     expect(result[0].data).toContain("Streaming output truncated");
   });
 
+  it("keeps the first id when collapsing outputs", () => {
+    const consoleOutputs = [
+      {
+        mimetype: "text/plain",
+        channel: "output",
+        data: "Hello ",
+        timestamp: 0,
+        id: 7,
+      },
+      {
+        mimetype: "text/plain",
+        channel: "output",
+        data: "World",
+        timestamp: 0,
+        id: 8,
+      },
+    ] satisfies ConsoleOutputMessage[];
+    const result = collapseConsoleOutputs(consoleOutputs);
+    expect(result).toHaveLength(1);
+    expect(result[0].data).toBe("Hello World");
+    expect((result[0] as ConsoleOutputMessage).id).toBe(7);
+  });
+
+  it("keeps ids on outputs that survive truncation", () => {
+    const consoleOutputs = [
+      {
+        mimetype: "text/plain",
+        channel: "output",
+        data: "one\ntwo",
+        timestamp: 0,
+        id: 1,
+      },
+      {
+        mimetype: "text/plain",
+        channel: "stderr",
+        data: "three\nfour",
+        timestamp: 0,
+        id: 2,
+      },
+      {
+        mimetype: "text/plain",
+        channel: "output",
+        data: "five",
+        timestamp: 0,
+        id: 3,
+      },
+    ] satisfies ConsoleOutputMessage[];
+    const result = collapseConsoleOutputs(consoleOutputs, 3);
+    const ids = result.map((output) => (output as ConsoleOutputMessage).id);
+    expect(result[0].data).toContain("Streaming output truncated");
+    expect(ids).toEqual([undefined, 2, 3]);
+  });
+
   describe("ANSI escape sequences", () => {
     it("should handle cursor movement with collapse", () => {
       const consoleOutputs: OutputMessage[] = [

package/src/core/cells/__tests__/error-report.test.ts

@@ -0,0 +1,139 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import type { MarimoError } from "@/core/kernel/messages";
+import { buildErrorReport, ERROR_MESSAGE_INSTRUCTIONS } from "../error-report";
+
+const CELL_ID = cellId("failed-cell");
+
+describe("buildErrorReport", () => {
+  it("preserves plain traceback text without treating angle brackets as HTML", () => {
+    const traceback =
+      '  File "<cell>", line 1\nValueError: expected <value> & got <other>';
+    expect(
+      buildErrorReport(CELL_ID, { traceback, tracebackFormat: "text" }).output,
+    ).toEqual({
+      type: "error",
+      instructions: ERROR_MESSAGE_INSTRUCTIONS,
+      message: "ValueError: expected <value> & got <other>",
+      traceback,
+    });
+  });
+  it("owns the instruction to repair the live notebook", () => {
+    const report = buildErrorReport(CELL_ID, {
+      errors: [{ type: "syntax", msg: "invalid code" }],
+    });
+    expect(report.output.instructions).toEqual("Fix this notebook error.");
+  });
+
+  it("keeps repair intent visible before oversized evidence", () => {
+    const report = buildErrorReport(CELL_ID, {
+      code: "# long code\n".repeat(10_000),
+      errors: [
+        {
+          type: "exception",
+          exception_type: "ValueError",
+          msg: "long error ".repeat(10_000),
+          raising_cell: null,
+          traceback: `<pre>Traceback\n${"long frame\n".repeat(10_000)}</pre>`,
+        },
+      ],
+    });
+    const serialized = JSON.stringify(report);
+
+    expect(serialized.length).toBeGreaterThan(8192);
+    expect(serialized.slice(0, 256)).toContain(
+      '"instructions":"Fix this notebook error."',
+    );
+  });
+
+  it("retains every message and complete traceback without display limits", () => {
+    const traceback = `Traceback\n${"long frame\n".repeat(10_000)}ValueError: bad <value>`;
+    const errors: MarimoError[] = [
+      {
+        type: "exception",
+        msg: "bad <value>",
+        exception_type: "ValueError",
+        raising_cell: null,
+        traceback: `<pre>${traceback.replaceAll("<", "&lt;").replaceAll(">", "&gt;")}</pre>`,
+      },
+      { type: "syntax", msg: "another error" },
+    ];
+    expect(buildErrorReport(CELL_ID, { code: "failed()", errors })).toEqual({
+      type: "cell-output",
+      cell_id: CELL_ID,
+      code: "failed()",
+      output: {
+        type: "error",
+        instructions: ERROR_MESSAGE_INSTRUCTIONS,
+        message: "bad <value>\nanother error",
+        traceback,
+      },
+    });
+  });
+
+  it("leaves source unknown for a restored legacy exception", () => {
+    expect(
+      buildErrorReport(CELL_ID, {
+        errors: [
+          {
+            type: "exception",
+            exception_type: "exception",
+            msg: "legacy error",
+            raising_cell: null,
+            traceback: null,
+          },
+        ],
+      }),
+    ).toEqual({
+      type: "cell-output",
+      cell_id: CELL_ID,
+      output: {
+        type: "error",
+        instructions: ERROR_MESSAGE_INSTRUCTIONS,
+        message: "legacy error",
+      },
+    });
+  });
+
+  it("preserves empty captured code", () => {
+    expect(
+      buildErrorReport(CELL_ID, {
+        code: "",
+        errors: [{ type: "syntax", msg: "invalid code" }],
+      }),
+    ).toEqual({
+      type: "cell-output",
+      cell_id: CELL_ID,
+      code: "",
+      output: {
+        type: "error",
+        instructions: ERROR_MESSAGE_INSTRUCTIONS,
+        message: "invalid code",
+      },
+    });
+  });
+
+  it("keeps separate structured tracebacks in order", () => {
+    const errors: MarimoError[] = ["first", "second"].map((message) => ({
+      type: "exception",
+      exception_type: "ValueError",
+      raising_cell: null,
+      msg: message,
+      traceback: `<pre>Traceback\nValueError: ${message}</pre>`,
+    }));
+    expect(buildErrorReport(CELL_ID, { errors })).toEqual({
+      type: "cell-output",
+      cell_id: CELL_ID,
+      output: {
+        type: "error",
+        instructions: ERROR_MESSAGE_INSTRUCTIONS,
+        message: "first\nsecond",
+        traceback:
+          "Traceback\nValueError: first\n\nTraceback\nValueError: second",
+      },
+    });
+  });
+});

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

@@ -174,8 +174,11 @@ describe("notebookStateFromSession", () => {
         channel: "marimo-error",
         data: [
           {
-            type: "unknown",
+            type: "exception",
+            exception_type: "ValueError",
             msg: "Something went wrong",
+            raising_cell: null,
+            traceback: "Traceback line 1",
           },
         ],
         mimetype: "application/vnd.marimo+error",
@@ -183,6 +186,52 @@ describe("notebookStateFromSession", () => {
       });
     });
 
+    it("restores matching code from the session", () => {
+      const code = "raise ValueError('cached failure')";
+      const session = createSession([
+        createSessionCell(
+          "cell-1",
+          [
+            {
+              type: "error",
+              ename: "ValueError",
+              evalue: "cached failure",
+              traceback: ["Traceback\n", "ValueError: cached failure"],
+              code,
+            },
+          ],
+          [
+            {
+              type: "stream",
+              name: "stderr",
+              text: "ValueError: cached <failure>",
+              mimetype: "application/vnd.marimo+traceback",
+              traceback_format: "text",
+              code,
+            },
+          ],
+        ),
+      ]);
+      const state = notebookStateFromSession(session, null);
+      invariant(state, "state is null");
+      expect(state.cellRuntime[CELL_1].output).toMatchObject({
+        code,
+        data: [
+          {
+            type: "exception",
+            exception_type: "ValueError",
+            msg: "cached failure",
+            traceback: "Traceback\nValueError: cached failure",
+          },
+        ],
+      });
+      expect(state.cellRuntime[CELL_1].consoleOutputs[0].code).toBe(code);
+      expect(state.cellRuntime[CELL_1].consoleOutputs[0]).toMatchObject({
+        traceback_format: "text",
+        data: "ValueError: cached <failure>",
+      });
+    });
+
     it("handles data output in session cell", () => {
       const dataOutput = {
         type: "data" as const,

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/error-report.ts

@@ -0,0 +1,63 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describeError } from "@/core/errors/error-entries";
+import type { MarimoError } from "@/core/kernel/messages";
+import { sanitizeHtml } from "@/plugins/core/sanitize-html";
+import { parseHtmlContent } from "@/utils/dom";
+import type { CellId } from "./ids";
+
+export interface CellOutputMessage<Output> {
+  type: "cell-output";
+  cell_id: CellId;
+  code?: string;
+  output: Output;
+}
+
+export interface ErrorMessageOutput {
+  type: "error";
+  instructions: string;
+  message: string;
+  traceback?: string;
+}
+
+export const ERROR_MESSAGE_INSTRUCTIONS = "Fix this notebook error.";
+
+export function buildErrorReport(
+  cellId: CellId,
+  evidence: { code?: string } & (
+    | { errors: MarimoError[] }
+    | { traceback: string; tracebackFormat: "html" | "text" }
+  ),
+): CellOutputMessage<ErrorMessageOutput> {
+  let message: string;
+  let traceback: string;
+  if ("errors" in evidence) {
+    message = evidence.errors.map(describeError).join("\n");
+    traceback = evidence.errors
+      .flatMap((error) =>
+        "traceback" in error && error.traceback
+          ? [parseHtmlContent(sanitizeHtml(error.traceback))]
+          : [],
+      )
+      .join("\n\n");
+  } else {
+    traceback =
+      evidence.tracebackFormat === "html"
+        ? parseHtmlContent(sanitizeHtml(evidence.traceback))
+        : evidence.traceback;
+    message = traceback.split("\n").findLast((line) => line.length > 0) ?? "";
+  }
+
+  // Put repair intent before evidence so it survives prefix truncation.
+  return {
+    type: "cell-output",
+    cell_id: cellId,
+    output: {
+      type: "error",
+      instructions: ERROR_MESSAGE_INSTRUCTIONS,
+      message,
+      ...(traceback ? { traceback } : {}),
+    },
+    ...(evidence.code === undefined ? {} : { code: evidence.code }),
+  };
+}

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(
@@ -206,8 +206,20 @@ function createCellRuntimeFromSession(
         channel: "marimo-error",
         data: [
           {
-            type: "unknown",
+            type: "exception",
+            exception_type: primaryOutput.ename,
             msg: primaryOutput.evalue,
+            raising_cell: null,
+            traceback:
+              primaryOutput.traceback.length === 0
+                ? null
+                : primaryOutput.traceback
+                    .map((line, index, lines) =>
+                      index < lines.length - 1 && !line.endsWith("\n")
+                        ? `${line}\n`
+                        : line,
+                    )
+                    .join(""),
           },
         ],
         mimetype: "application/vnd.marimo+error",
@@ -223,6 +235,9 @@ function createCellRuntimeFromSession(
         timestamp: DEFAULT_TIMESTAMP,
       };
     }
+    if (runtimeState.output && primaryOutput.code !== undefined) {
+      runtimeState.output.code = primaryOutput.code;
+    }
   }
 
   const consoleOutputs = sessionCell.console || [];
@@ -237,7 +252,13 @@ function createCellRuntimeFromSession(
           channel: "media",
           data: consoleOutput.data,
           mimetype: consoleOutput.mimetype,
+          ...(consoleOutput.traceback_format === undefined
+            ? {}
+            : { traceback_format: consoleOutput.traceback_format }),
           timestamp: DEFAULT_TIMESTAMP,
+          ...(consoleOutput.code === undefined
+            ? {}
+            : { code: consoleOutput.code }),
         };
       }
       // Handle StreamOutput (type: "stream")
@@ -245,7 +266,13 @@ function createCellRuntimeFromSession(
         channel: consoleOutput.name === "stderr" ? "stderr" : "stdout",
         data: consoleOutput.text,
         mimetype: consoleOutput.mimetype ?? "text/plain",
+        ...(consoleOutput.traceback_format === undefined
+          ? {}
+          : { traceback_format: consoleOutput.traceback_format }),
         timestamp: DEFAULT_TIMESTAMP,
+        ...(consoleOutput.code === undefined
+          ? {}
+          : { code: consoleOutput.code }),
       };
     }),
   };

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;
 }