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

package/src/components/storage/storage-snippets.ts

@@ -0,0 +1,67 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { LucideIcon } from "lucide-react";
+import { BookOpenIcon, LinkIcon } from "lucide-react";
+import type { StorageEntry, StorageNamespace } from "@/core/storage/types";
+
+type BackendType = StorageNamespace["backendType"];
+
+export interface StorageSnippetContext {
+  variableName: string;
+  protocol: string;
+  entry: StorageEntry;
+  backendType: BackendType;
+}
+
+export interface StorageSnippet {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+  /** Return the code string, or null to hide the snippet for this context. */
+  getCode: (ctx: StorageSnippetContext) => string | null;
+}
+
+const NOT_SIGNABLE_PROTOCOLS = new Set(["http", "file", "in-memory"]);
+
+function escapeForPythonString(value: string): string {
+  return JSON.stringify(value).slice(1, -1);
+}
+
+export const STORAGE_SNIPPETS: StorageSnippet[] = [
+  {
+    id: "read-file",
+    label: "Insert read snippet",
+    icon: BookOpenIcon,
+    getCode: (ctx) => {
+      if (ctx.entry.kind === "directory") {
+        return null;
+      }
+      const path = escapeForPythonString(ctx.entry.path);
+      if (ctx.backendType === "obstore") {
+        return `_data = ${ctx.variableName}.get("${path}").bytes()\n_data`;
+      }
+      return `_data = ${ctx.variableName}.cat_file("${path}")\n_data`;
+    },
+  },
+  {
+    id: "download-file",
+    label: "Insert download snippet",
+    icon: LinkIcon,
+    getCode: (ctx) => {
+      if (ctx.entry.kind === "directory") {
+        return null;
+      }
+      const path = escapeForPythonString(ctx.entry.path);
+      if (ctx.backendType === "obstore") {
+        if (NOT_SIGNABLE_PROTOCOLS.has(ctx.protocol)) {
+          return null;
+        }
+        return `from datetime import timedelta\nfrom obstore import sign\n\nsigned_url = sign(\n    ${ctx.variableName}, "GET", "${path}",\n    expires_in=timedelta(hours=1),\n)\nsigned_url`;
+      }
+      const filename = escapeForPythonString(
+        ctx.entry.path.split("/").pop() || "download",
+      );
+      return `${ctx.variableName}.get("${path}", "${filename}")`;
+    },
+  },
+];

package/src/components/ui/command.tsx

@@ -7,6 +7,7 @@ import { Search } from "lucide-react";
 import * as React from "react";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { cn } from "@/utils/cn";
+import { smartMatchFilter } from "@/utils/smartMatch";
 import { Strings } from "@/utils/strings";
 import {
   MENU_ITEM_DISABLED,
@@ -21,6 +22,7 @@ const Command = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive
     ref={ref}
+    filter={smartMatchFilter}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
       className,

package/src/components/ui/links.tsx

@@ -8,6 +8,7 @@ export const ExternalLink = ({
     | `https://console.anthropic.com/${string}`
     | `https://aistudio.google.com/${string}`
     | `https://github.com/${string}`
+    | `https://docs.github.com/${string}`
     | `https://openrouter.ai/${string}`
     | `https://docs.marimo.io/${string}`
     | `https://docs.python.org/${string}`

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

@@ -411,6 +411,212 @@ describe("RunStaleCellsTool", () => {
     });
   });
 
+  describe("output truncation", () => {
+    it("should summarize text/html output instead of dumping raw content", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "fig.show()", edited: true },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      vi.mocked(runCells).mockImplementation(async () => {
+        const updatedNotebook = store.get(notebookAtom);
+        updatedNotebook.cellRuntime[cellId1] = {
+          ...updatedNotebook.cellRuntime[cellId1],
+          status: "idle",
+        };
+        store.set(notebookAtom, updatedNotebook);
+      });
+
+      const largeHtml = `<div>${"x".repeat(2_000_000)}</div>`;
+      vi.mocked(getCellContextData).mockReturnValue({
+        cellOutput: {
+          outputType: "text",
+          processedContent: null,
+          imageUrl: null,
+          output: { mimetype: "text/html", data: largeHtml },
+        },
+        consoleOutputs: null,
+        cellName: "cell1",
+      } as never);
+
+      const result = await tool.handler({}, toolContext as never);
+
+      expect(result.status).toBe("success");
+      const output = result.cellsToOutput?.[cellId1]?.cellOutput ?? "";
+      expect(output).toContain("HTML Output:");
+      expect(output).toContain("text/html");
+      expect(output.length).toBeLessThan(200);
+      expect(output).not.toContain(largeHtml);
+    });
+
+    it("should truncate large text output to MAX_TEXT_OUTPUT_CHARS", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "print(big_string)", edited: true },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      vi.mocked(runCells).mockImplementation(async () => {
+        const updatedNotebook = store.get(notebookAtom);
+        updatedNotebook.cellRuntime[cellId1] = {
+          ...updatedNotebook.cellRuntime[cellId1],
+          status: "idle",
+        };
+        store.set(notebookAtom, updatedNotebook);
+      });
+
+      const largeText = "a".repeat(10_000);
+      vi.mocked(getCellContextData).mockReturnValue({
+        cellOutput: {
+          outputType: "text",
+          processedContent: largeText,
+          imageUrl: null,
+          output: { mimetype: "text/plain", data: largeText },
+        },
+        consoleOutputs: null,
+        cellName: "cell1",
+      } as never);
+
+      const result = await tool.handler({}, toolContext as never);
+
+      const output = result.cellsToOutput?.[cellId1]?.cellOutput ?? "";
+      expect(output).toContain("[TRUNCATED:");
+      expect(output).toContain("Full output visible in the notebook UI.");
+      // Output should be capped (2000 chars content + "Output:\n" prefix + truncation message)
+      expect(output.length).toBeLessThan(2200);
+    });
+
+    it("should omit output for cells that exceed total output budget", async () => {
+      const cellIds = Array.from(
+        { length: 25 },
+        (_, i) => `budget-cell-${i}` as CellId,
+      );
+      const cellData: Record<string, { code: string; edited: boolean }> = {};
+      for (const id of cellIds) {
+        cellData[id] = { code: "x = 1", edited: true };
+      }
+
+      const notebook = MockNotebook.notebookState({ cellData });
+      store.set(notebookAtom, notebook);
+
+      vi.mocked(runCells).mockImplementation(async () => {
+        const updatedNotebook = store.get(notebookAtom);
+        for (const id of cellIds) {
+          updatedNotebook.cellRuntime[id] = {
+            ...updatedNotebook.cellRuntime[id],
+            status: "idle",
+          };
+        }
+        store.set(notebookAtom, updatedNotebook);
+      });
+
+      // Each cell produces ~2008 chars of formatted output ("Output:\n" + 2000 chars).
+      // After 20 cells the running total exceeds MAX_TOOL_OUTPUT_CHARS (40,000).
+      const content = "a".repeat(2000);
+      vi.mocked(getCellContextData).mockReturnValue({
+        cellOutput: {
+          outputType: "text",
+          processedContent: content,
+          imageUrl: null,
+          output: { mimetype: "text/plain", data: content },
+        },
+        consoleOutputs: null,
+        cellName: "cell",
+      } as never);
+
+      const result = await tool.handler({}, toolContext as never);
+
+      expect(result.cellsToOutput?.[cellIds[0]]?.cellOutput).toContain(
+        "Output:",
+      );
+      expect(result.cellsToOutput?.[cellIds[24]]?.cellOutput).toBe(
+        "Cell executed (output omitted due to context limits).",
+      );
+    });
+
+    it("should use higher truncation limit for error outputs", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: "raise Exception()", edited: true },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      vi.mocked(runCells).mockImplementation(async () => {
+        const updatedNotebook = store.get(notebookAtom);
+        updatedNotebook.cellRuntime[cellId1] = {
+          ...updatedNotebook.cellRuntime[cellId1],
+          status: "idle",
+        };
+        store.set(notebookAtom, updatedNotebook);
+      });
+
+      // 2500 chars sits between MAX_TEXT_OUTPUT_CHARS (2000) and MAX_ERROR_OUTPUT_CHARS (3000)
+      const errorContent = "E".repeat(2500);
+      vi.mocked(getCellContextData).mockReturnValue({
+        cellOutput: {
+          outputType: "text",
+          processedContent: errorContent,
+          imageUrl: null,
+          output: {
+            mimetype: "application/vnd.marimo+error",
+            data: errorContent,
+          },
+        },
+        consoleOutputs: null,
+        cellName: "cell1",
+      } as never);
+
+      const result = await tool.handler({}, toolContext as never);
+
+      const output = result.cellsToOutput?.[cellId1]?.cellOutput ?? "";
+      expect(output).not.toContain("[TRUNCATED:");
+      expect(output).toContain(errorContent);
+    });
+
+    it("should truncate large console output", async () => {
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cellId1]: { code: 'print("x" * 10000)', edited: true },
+        },
+      });
+      store.set(notebookAtom, notebook);
+
+      vi.mocked(runCells).mockImplementation(async () => {
+        const updatedNotebook = store.get(notebookAtom);
+        updatedNotebook.cellRuntime[cellId1] = {
+          ...updatedNotebook.cellRuntime[cellId1],
+          status: "idle",
+        };
+        store.set(notebookAtom, updatedNotebook);
+      });
+
+      const largeConsoleText = "x".repeat(10_000);
+      vi.mocked(getCellContextData).mockReturnValue({
+        cellOutput: null,
+        consoleOutputs: [
+          {
+            outputType: "text",
+            processedContent: largeConsoleText,
+            imageUrl: null,
+            output: { mimetype: "text/plain", data: largeConsoleText },
+          },
+        ],
+        cellName: "cell1",
+      } as never);
+
+      const result = await tool.handler({}, toolContext as never);
+
+      const consoleOutput =
+        result.cellsToOutput?.[cellId1]?.consoleOutput ?? "";
+      expect(consoleOutput).toContain("[TRUNCATED:");
+      expect(consoleOutput.length).toBeLessThan(2200);
+    });
+  });
+
   describe("cell execution completion", () => {
     it("should complete immediately if cells are already idle", async () => {
       const notebook = MockNotebook.notebookState({

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