@marimo-team/frontend 0.20.5-dev8 → 0.20.5-dev87

package/src/core/ai/tools/run-cells-tool.ts

@@ -24,6 +24,11 @@ import type { CopilotMode } from "./registry";
 const POST_EXECUTION_DELAY = 200;
 const WAIT_FOR_CELLS_TIMEOUT = 30_000;
 
+// Output size limits to prevent exceeding LLM token limits.
+const MAX_TEXT_OUTPUT_CHARS = 2000;
+const MAX_ERROR_OUTPUT_CHARS = 3000;
+const MAX_TOOL_OUTPUT_CHARS = 40_000;
+
 interface CellOutput {
   consoleOutput?: string;
   cellOutput?: string;
@@ -92,7 +97,7 @@ export class RunStaleCellsTool
 
     await runCells({
       cellIds: staleCells,
-      sendRun: sendRun,
+      sendRun,
       prepareForRun,
       notebook,
     });
@@ -116,44 +121,59 @@ export class RunStaleCellsTool
     const updatedNotebook = store.get(notebookAtom);
 
     const cellsToOutput = new Map<CellId, CellOutput | null>();
-    let resultMessage = "";
     let outputHasErrors = false;
+    let hasAnyConsoleOutput = false;
+    let totalOutputChars = 0;
 
     for (const cellId of staleCells) {
       const cellContextData = getCellContextData(cellId, updatedNotebook, {
         includeConsoleOutput: true,
       });
 
-      let cellOutputString: string | undefined;
-      let consoleOutputString: string | undefined;
-
       const cellOutput = cellContextData.cellOutput;
       const consoleOutputs = cellContextData.consoleOutputs;
       const hasConsoleOutput = consoleOutputs && consoleOutputs.length > 0;
 
+      // Track errors regardless of budget
+      if (
+        (cellOutput && this.outputHasErrors(cellOutput)) ||
+        (hasConsoleOutput &&
+          consoleOutputs.some((output) => this.outputHasErrors(output)))
+      ) {
+        outputHasErrors = true;
+      }
+
       if (!cellOutput && !hasConsoleOutput) {
-        // Set null to show no output
         cellsToOutput.set(cellId, null);
         continue;
       }
 
+      // If total budget exceeded, summarize remaining cells
+      if (totalOutputChars >= MAX_TOOL_OUTPUT_CHARS) {
+        cellsToOutput.set(cellId, {
+          cellOutput: "Cell executed (output omitted due to context limits).",
+        });
+        continue;
+      }
+
+      let cellOutputString: string | undefined;
+      let consoleOutputString: string | undefined;
+
       if (cellOutput) {
         cellOutputString = this.formatOutputString(cellOutput);
-        if (this.outputHasErrors(cellOutput)) {
-          outputHasErrors = true;
-        }
+        totalOutputChars += cellOutputString.length;
       }
 
       if (hasConsoleOutput) {
+        hasAnyConsoleOutput = true;
         consoleOutputString = consoleOutputs
           .map((output) => this.formatOutputString(output))
           .join("\n");
-        resultMessage +=
-          "Console output represents the stdout or stderr of the cell (eg. print statements).";
-
-        if (consoleOutputs.some((output) => this.outputHasErrors(output))) {
-          outputHasErrors = true;
-        }
+        consoleOutputString = this.truncateString(
+          consoleOutputString,
+          MAX_TEXT_OUTPUT_CHARS,
+        );
+        totalOutputChars += consoleOutputString.length;
       }
 
       cellsToOutput.set(cellId, {
@@ -179,43 +199,58 @@ export class RunStaleCellsTool
     return {
       status: "success",
       cellsToOutput: Object.fromEntries(cellsToOutput),
-      message: resultMessage === "" ? undefined : resultMessage,
+      message: hasAnyConsoleOutput
+        ? "Console output represents the stdout or stderr of the cell (eg. print statements)."
+        : undefined,
       next_steps: nextSteps,
     };
   };
 
   private outputHasErrors(cellOutput: BaseOutput): boolean {
-    const { output } = cellOutput;
-    if (
-      output.mimetype === "application/vnd.marimo+error" ||
-      output.mimetype === "application/vnd.marimo+traceback"
-    ) {
-      return true;
-    }
-    return false;
+    return (
+      cellOutput.output.mimetype === "application/vnd.marimo+error" ||
+      cellOutput.output.mimetype === "application/vnd.marimo+traceback"
+    );
   }
 
   private formatOutputString(cellOutput: BaseOutput): string {
-    let outputString = "";
     const { outputType, processedContent, imageUrl, output } = cellOutput;
-    if (outputType === "text") {
-      outputString += "Output:\n";
-      if (processedContent) {
-        outputString += processedContent;
-      } else if (typeof output.data === "string") {
-        outputString += output.data;
-      } else {
-        outputString += JSON.stringify(output.data);
-      }
-    } else if (outputType === "media") {
-      outputString += `Media Output: Contains ${output.mimetype} content`;
-      if (imageUrl) {
-        outputString += `\nImage URL: ${imageUrl}`;
-      }
+
+    if (outputType === "media") {
+      const base = `Media Output: Contains ${output.mimetype} content`;
+      return imageUrl ? `${base}\nImage URL: ${imageUrl}` : base;
     }
-    return outputString;
+
+    if (output.mimetype === "text/html") {
+      // text/html (e.g. plotly figures, rich dataframes) can be millions of
+      // chars and is not interpretable by LLMs — summarize instead
+      const dataLength =
+        typeof output.data === "string"
+          ? output.data.length
+          : JSON.stringify(output.data).length;
+      return `HTML Output: text/html content (${dataLength.toLocaleString()} chars). Full output visible in notebook UI.`;
+    }
+
+    const maxChars = this.outputHasErrors(cellOutput)
+      ? MAX_ERROR_OUTPUT_CHARS
+      : MAX_TEXT_OUTPUT_CHARS;
+
+    let content = processedContent;
+    if (!content) {
+      content =
+        typeof output.data === "string"
+          ? output.data
+          : JSON.stringify(output.data);
+    }
+    return `Output:\n${this.truncateString(content, maxChars)}`;
   }
 
+  private truncateString(str: string, maxLength: number): string {
+    if (str.length <= maxLength) {
+      return str;
+    }
+    return `${str.slice(0, maxLength)}\n\n[TRUNCATED: ${str.length.toLocaleString()} → ${maxLength.toLocaleString()} chars. Full output visible in the notebook UI.]`;
+  }
   /**
    * Wait for cells to finish executing (status becomes "idle")
    * Returns true if all cells finished executing, false if the timeout was reached

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

@@ -1439,6 +1439,68 @@ describe("cell reducer", () => {
     expect(state.cellData["5" as CellId]).not.toBeUndefined();
   });
 
+  it("can set cell codes with names and configs", () => {
+    const newIds = ["3", "4"] as CellId[];
+    actions.setCellIds({ cellIds: newIds });
+    actions.setCellCodes({
+      codes: ["code1", "code2"],
+      ids: newIds,
+      codeIsStale: false,
+      names: ["setup_cell", "analysis"],
+      configs: [
+        { hide_code: true, disabled: false, column: null },
+        { hide_code: false, disabled: true, column: null },
+      ],
+    });
+
+    expect(state.cellData["3" as CellId].name).toBe("setup_cell");
+    expect(state.cellData["3" as CellId].config.hide_code).toBe(true);
+    expect(state.cellData["3" as CellId].config.disabled).toBe(false);
+
+    expect(state.cellData["4" as CellId].name).toBe("analysis");
+    expect(state.cellData["4" as CellId].config.hide_code).toBe(false);
+    expect(state.cellData["4" as CellId].config.disabled).toBe(true);
+  });
+
+  it("can set cell codes without names/configs (backward compat)", () => {
+    const newIds = ["3"] as CellId[];
+    actions.setCellIds({ cellIds: newIds });
+    actions.setCellCodes({
+      codes: ["code1"],
+      ids: newIds,
+      codeIsStale: false,
+    });
+
+    // Should use defaults when names/configs not provided
+    expect(state.cellData["3" as CellId].code).toBe("code1");
+    expect(state.cellData["3" as CellId].config.hide_code).toBe(false);
+    expect(state.cellData["3" as CellId].config.disabled).toBe(false);
+  });
+
+  it("can update names and configs on existing cells via setCellCodes", () => {
+    // Set initial state
+    actions.setCellCodes({
+      codes: ["x = 1"],
+      ids: [firstCellId],
+      codeIsStale: false,
+      names: ["old_name"],
+      configs: [{ hide_code: false, disabled: false, column: null }],
+    });
+    expect(state.cellData[firstCellId].name).toBe("old_name");
+    expect(state.cellData[firstCellId].config.hide_code).toBe(false);
+
+    // Update with new name and config (same code)
+    actions.setCellCodes({
+      codes: ["x = 1"],
+      ids: [firstCellId],
+      codeIsStale: true,
+      names: ["new_name"],
+      configs: [{ hide_code: true, disabled: false, column: null }],
+    });
+    expect(state.cellData[firstCellId].name).toBe("new_name");
+    expect(state.cellData[firstCellId].config.hide_code).toBe(true);
+  });
+
   it("can fold and unfold all cells", () => {
     actions.foldAll();
     expect(foldAllBulk).toHaveBeenCalled();

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

@@ -3,6 +3,7 @@
 import type * as api from "@marimo-team/marimo-api";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Mocks } from "@/__mocks__/common";
 import { parseOutline } from "@/core/dom/outline";
 import { MultiColumn, visibleForTesting } from "@/utils/id-tree";
 import { invariant } from "@/utils/invariant";
@@ -11,13 +12,7 @@ import { type CellId, SETUP_CELL_ID } from "../ids";
 import { notebookStateFromSession } from "../session";
 
 // Mock dependencies
-vi.mock("@/utils/Logger", () => ({
-  Logger: {
-    error: vi.fn(),
-    warn: vi.fn(),
-    debug: vi.fn(),
-  },
-}));
+vi.mock("@/utils/Logger", () => ({ Logger: Mocks.quietLogger() }));
 
 vi.mock("@/core/dom/outline", () => ({
   parseOutline: vi.fn(),

package/src/core/cells/cells.ts

@@ -3,7 +3,7 @@
 import { historyField } from "@codemirror/commands";
 import { type Atom, atom, useAtom, useAtomValue } from "jotai";
 import { atomFamily, selectAtom, splitAtom } from "jotai/utils";
-import { isEqual, zip } from "lodash-es";
+import { isEqual } from "lodash-es";
 import { createRef, type ReducerWithoutAction } from "react";
 import type { CellHandle } from "@/components/editor/notebook-cell";
 import {
@@ -801,7 +801,13 @@ const {
   },
   setCellCodes: (
     state,
-    action: { codes: string[]; ids: CellId[]; codeIsStale: boolean },
+    action: {
+      codes: string[];
+      ids: CellId[];
+      codeIsStale: boolean;
+      names?: string[];
+      configs?: CellConfig[];
+    },
   ) => {
     invariant(
       action.codes.length === action.ids.length,
@@ -814,15 +820,21 @@ const {
       cell,
       code,
       cellId,
+      name,
+      config,
     }: {
       cell: CellData | undefined;
       code: string;
       cellId: CellId;
+      name?: string;
+      config?: CellConfig;
     }) => {
       if (!cell) {
         return createCell({
           id: cellId,
           code,
+          name: name,
+          config: config,
           lastCodeRun: action.codeIsStale ? null : code,
           edited: action.codeIsStale && code.trim().length > 0,
         });
@@ -843,6 +855,8 @@ const {
           code: code,
           edited,
           lastCodeRun,
+          ...(name !== undefined && { name }),
+          ...(config !== undefined && { config }),
         };
       }
 
@@ -860,13 +874,19 @@ const {
         code: code,
         edited,
         lastCodeRun,
+        ...(name !== undefined && { name }),
+        ...(config !== undefined && { config }),
       };
     };
 
-    for (const [cellId, code] of zip(action.ids, action.codes)) {
+    for (let i = 0; i < action.ids.length; i++) {
+      const cellId = action.ids[i];
+      const code = action.codes[i];
       if (cellId === undefined || code === undefined) {
         continue;
       }
+      const name = action.names?.[i];
+      const config = action.configs?.[i];
       nextState = {
         ...nextState,
         cellData: {
@@ -875,6 +895,8 @@ const {
             cell: nextState.cellData[cellId],
             code,
             cellId,
+            name,
+            config,
           }),
         },
       };

package/src/core/cells/ids.ts

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 /* eslint-disable @typescript-eslint/no-redeclare */
 
+import { OBJECT_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { invariant } from "@/utils/invariant";
 import type { TypedString } from "../../utils/typed";
 
@@ -110,7 +111,7 @@ export function findCellId(element: HTMLElement): CellId | null {
 export type UIElementId = `${CellId}-${string}`;
 export const UIElementId = {
   parse(element: Element): UIElementId | null {
-    return element.getAttribute("object-id") as UIElementId | null;
+    return element.getAttribute(OBJECT_ID_ATTR) as UIElementId | null;
   },
   parseOrThrow(element: Element): UIElementId {
     const id = UIElementId.parse(element);

package/src/core/codemirror/compat/__tests__/jupyter.test.ts

@@ -3,6 +3,7 @@
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockModules } from "@/__mocks__/common";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { toast } from "@/components/ui/use-toast";
 import { store } from "@/core/state/jotai";
@@ -16,9 +17,7 @@ vi.mock("@/core/state/jotai", () => ({
   },
 }));
 
-vi.mock("@/components/ui/use-toast", () => ({
-  toast: vi.fn(),
-}));
+vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
 // Mock the helper to get request client
 const mockRequestClient = MockRequestClient.create();

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

@@ -247,6 +247,32 @@ function applyVimCommands(vimCommands: VimCommand[]) {
   }
 }
 
+interface ExtendedVim {
+  getVimGlobalState_: () => {
+    macroModeState?: {
+      isRecording: boolean;
+      isPlaying: boolean;
+    };
+  };
+}
+
+function isExtendedVim(vim: typeof Vim): vim is typeof Vim & ExtendedVim {
+  return (
+    "getVimGlobalState_" in vim && typeof vim.getVimGlobalState_ === "function"
+  );
+}
+
+function isMacroActive() {
+  if (!isExtendedVim(Vim)) {
+    return false;
+  }
+  const macroModeState = Vim.getVimGlobalState_()?.macroModeState;
+  if (!macroModeState) {
+    return false;
+  }
+  return Boolean(macroModeState.isRecording || macroModeState.isPlaying);
+}
+
 class CodeMirrorVimSync {
   private instances = new Set<EditorView>();
   private isBroadcasting = false;
@@ -275,10 +301,13 @@ class CodeMirrorVimSync {
         return;
       }
       invariant("mode" in e, 'Expected event to have a "mode" property');
+      const skipBroadcast = isMacroActive();
       this.isBroadcasting = true;
       // We use onIdle to keep the focused editor snappy
       onIdle(() => {
-        this.broadcastModeChange(instance, e.mode, e.subMode);
+        if (!skipBroadcast) {
+          this.broadcastModeChange(instance, e.mode, e.subMode);
+        }
         this.isBroadcasting = false;
       });
     });
@@ -338,9 +367,9 @@ class CodeMirrorVimSync {
             }
             break;
           case "insert":
-            // Only enter insert mode if we're not already in it
+            // only enter insert mode if we're not already in it
             if (!vim.insertMode) {
-              Vim.handleKey(cm, "i", "");
+              Vim.handleKey(cm, "i", "mapping");
             }
             break;
           case "visual":

package/src/core/codemirror/markdown/__tests__/commands.test.ts

@@ -9,6 +9,7 @@ import {
   test,
   vi,
 } from "vitest";
+import { MockModules } from "@/__mocks__/common";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { requestClientAtom } from "@/core/network/requests";
 import { filenameAtom } from "@/core/saving/file-state";
@@ -25,9 +26,7 @@ import {
   insertUL,
 } from "../commands";
 
-vi.mock("@/components/ui/use-toast", () => ({
-  toast: vi.fn(),
-}));
+vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
 import { toast } from "@/components/ui/use-toast";
 

package/src/core/config/__tests__/config-schema.test.ts

@@ -70,7 +70,9 @@ test("default UserConfig - empty", () => {
         "reference_highlighting": true,
         "theme": "light",
       },
-      "experimental": {},
+      "experimental": {
+        "storage_inspector": true,
+      },
       "formatting": {
         "line_length": 79,
       },
@@ -140,7 +142,9 @@ test("default UserConfig - one level", () => {
         "reference_highlighting": true,
         "theme": "light",
       },
-      "experimental": {},
+      "experimental": {
+        "storage_inspector": true,
+      },
       "formatting": {
         "line_length": 79,
       },

package/src/core/config/config-schema.ts

@@ -186,6 +186,7 @@ export const UserConfigSchema = z
       .looseObject({
         markdown: z.boolean().optional(),
         rtc: z.boolean().optional(),
+        storage_inspector: z.boolean().prefault(true),
         // Add new experimental features here
       })
       // Pass through so that we don't remove any extra keys that the user has added.

package/src/core/config/feature-flag.tsx

@@ -21,7 +21,7 @@ const defaultValues: ExperimentalFeatures = {
   rtc_v2: false,
   cache_panel: false,
   external_agents: import.meta.env.DEV,
-  storage_inspector: false,
+  storage_inspector: true,
 };
 
 export function getFeatureFlag<T extends keyof ExperimentalFeatures>(

package/src/core/dom/ui-element-constants.ts

@@ -0,0 +1,15 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Stable identifier for a UI element, deterministic across re-executions
+ * of the same cell (based on cell ID + creation order).
+ * Used to synchronize multiple instances and kernel state.
+ */
+export const OBJECT_ID_ATTR = "object-id";
+
+/**
+ * Random token that changes every time a UI element is constructed
+ * (i.e., every cell execution). Used to detect stale elements and
+ * force re-renders when a cell re-runs.
+ */
+export const RANDOM_ID_ATTR = "random-id";

package/src/core/dom/ui-element.ts

@@ -8,6 +8,7 @@ import {
   MarimoValueInputEvent,
   type MarimoValueInputEventType,
 } from "./events";
+import { RANDOM_ID_ATTR } from "./ui-element-constants";
 import { UI_ELEMENT_REGISTRY } from "./uiregistry";
 
 import "./ui-element.css";
@@ -189,7 +190,7 @@ export function initializeUIElement() {
     // used like a React key. If the random-id changes, we need to unmount and
     // remount its child.
     static get observedAttributes() {
-      return ["random-id"];
+      return [RANDOM_ID_ATTR];
     }
 
     attributeChangedCallback(
@@ -199,7 +200,7 @@ export function initializeUIElement() {
     ) {
       if (this.initialized) {
         const hasChanged = oldValue !== newValue;
-        if (name === "random-id" && hasChanged) {
+        if (name === RANDOM_ID_ATTR && hasChanged) {
           // deregister/clean-up this instance
           this.disconnectedCallback();
           // remove and re-add its child to force it to re-render; note that

package/src/core/export/__tests__/hooks.test.ts

@@ -5,6 +5,7 @@ import { createStore, Provider } from "jotai";
 import type { ReactNode } from "react";
 import * as React from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockModules, Mocks } from "@/__mocks__/common";
 import type { CellId } from "@/core/cells/ids";
 import { CellOutputId } from "@/core/cells/ids";
 import type { CellRuntimeState } from "@/core/cells/types";
@@ -20,17 +21,9 @@ vi.mock("html-to-image", () => ({
   toPng: vi.fn(),
 }));
 
-// Mock Logger
-vi.mock("@/utils/Logger", () => ({
-  Logger: {
-    error: vi.fn(),
-  },
-}));
+vi.mock("@/utils/Logger", () => ({ Logger: Mocks.quietLogger() }));
 
-// Mock toast
-vi.mock("@/components/ui/use-toast", () => ({
-  toast: vi.fn(),
-}));
+vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
 // Mock cellsRuntimeAtom - must be defined inline in the factory function
 vi.mock("@/core/cells/cells", async () => {

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

@@ -1,6 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
-import { type Hotkey, type HotkeyAction, HotkeyProvider } from "../hotkeys";
+import {
+  type Hotkey,
+  type HotkeyAction,
+  HotkeyProvider,
+  normalizeKeyString,
+  OverridingHotkeyProvider,
+} from "../hotkeys";
 
 /**
  * Just a helper.
@@ -72,3 +78,60 @@ describe("HotkeyProvider platform separation", () => {
     expect(linux.getHotkey("cell.format").key).toBe("Ctrl-Shift-L");
   });
 });
+
+describe("normalizeKeyString", () => {
+  it("should capitalize multi-character base key names", () => {
+    expect(normalizeKeyString("Shift-enter")).toBe("Shift-Enter");
+    expect(normalizeKeyString("Cmd-enter")).toBe("Cmd-Enter");
+    expect(normalizeKeyString("Ctrl-backspace")).toBe("Ctrl-Backspace");
+    expect(normalizeKeyString("Alt-tab")).toBe("Alt-Tab");
+    expect(normalizeKeyString("Cmd-Shift-arrowUp")).toBe("Cmd-Shift-ArrowUp");
+  });
+
+  it("should leave already-correct key names unchanged", () => {
+    expect(normalizeKeyString("Shift-Enter")).toBe("Shift-Enter");
+    expect(normalizeKeyString("Cmd-Enter")).toBe("Cmd-Enter");
+    expect(normalizeKeyString("Mod-Shift-Enter")).toBe("Mod-Shift-Enter");
+  });
+
+  it("should leave single-character keys unchanged", () => {
+    expect(normalizeKeyString("Cmd-a")).toBe("Cmd-a");
+    expect(normalizeKeyString("Ctrl-Shift-z")).toBe("Ctrl-Shift-z");
+    expect(normalizeKeyString("a")).toBe("a");
+  });
+
+  it("should handle keys without modifiers", () => {
+    expect(normalizeKeyString("enter")).toBe("Enter");
+    expect(normalizeKeyString("Escape")).toBe("Escape");
+    expect(normalizeKeyString("F12")).toBe("F12");
+  });
+});
+
+describe("OverridingHotkeyProvider", () => {
+  it("should normalize lowercase key overrides", () => {
+    const provider = new OverridingHotkeyProvider(
+      {
+        "cell.run": "Shift-enter",
+        "cell.runAndNewBelow": "Cmd-enter",
+      },
+      { platform: "mac" },
+    );
+
+    expect(provider.getHotkey("cell.run").key).toBe("Shift-Enter");
+    expect(provider.getHotkey("cell.runAndNewBelow").key).toBe("Cmd-Enter");
+  });
+
+  it("should return defaults when no override is set", () => {
+    const provider = new OverridingHotkeyProvider({}, { platform: "mac" });
+    expect(provider.getHotkey("cell.run").key).toBe("Cmd-Enter");
+    expect(provider.getHotkey("cell.runAndNewBelow").key).toBe("Shift-Enter");
+  });
+
+  it("should pass through correctly-cased overrides unchanged", () => {
+    const provider = new OverridingHotkeyProvider(
+      { "cell.run": "Shift-Enter" },
+      { platform: "mac" },
+    );
+    expect(provider.getHotkey("cell.run").key).toBe("Shift-Enter");
+  });
+});