@marimo-team/frontend 0.23.7-dev1 → 0.23.7-dev10

package/src/components/editor/file-tree/requesting-tree.tsx

@@ -11,6 +11,9 @@ import { prettyError } from "@/utils/errors";
 import { Functions } from "@/utils/functions";
 import { type FilePath, PathBuilder } from "@/utils/paths";
 import { resolvePaths } from "@/utils/pathUtils";
+import { mapWithConcurrency } from "@/utils/semaphore";
+
+const FILE_OP_CONCURRENCY = 5;
 
 /**
  * Normalized result of a file mutation: the server response when successful,
@@ -159,28 +162,26 @@ export class RequestingTree {
       ? (this.delegate.find(parentId)?.data.path ?? parentId)
       : this.rootPath;
 
-    await Promise.all(
-      fromIds.map(async (id) => {
-        const node = this.delegate.find(id);
-        if (!node) {
-          return;
-        }
-        const originalPath = node.data.path;
-        const newPath = this.path.join(
-          parentPath,
-          this.path.basename(originalPath as FilePath),
-        );
-        const result = await this.callbacks
-          .renameFileOrFolder({ path: originalPath, newPath })
-          .then(handleFileResponse);
-        if (!result) {
-          return;
-        }
+    await mapWithConcurrency(fromIds, FILE_OP_CONCURRENCY, async (id) => {
+      const node = this.delegate.find(id);
+      if (!node) {
+        return;
+      }
+      const originalPath = node.data.path;
+      const newPath = this.path.join(
+        parentPath,
+        this.path.basename(originalPath as FilePath),
+      );
+      const result = await this.callbacks
+        .renameFileOrFolder({ path: originalPath, newPath })
+        .then(handleFileResponse);
+      if (!result) {
+        return;
+      }
 
-        this.delegate.move({ id, parentId, index: 0 });
-        this.delegate.update({ id, changes: { path: newPath } });
-      }),
-    );
+      this.delegate.move({ id, parentId, index: 0 });
+      this.delegate.update({ id, changes: { path: newPath } });
+    });
 
     this.onChange(this.delegate.data);
 
@@ -262,11 +263,12 @@ export class RequestingTree {
       this.rootPath,
       ...ids.map((id) => this.delegate.find(id)?.data.path),
     ].filter(Boolean);
-    // Request all folders in parallel, and catch any errors
-    const data = await Promise.all(
-      openFolders.map((path) =>
+    // Request open folders with bounded concurrency; swallow per-folder errors.
+    const data = await mapWithConcurrency(
+      openFolders,
+      FILE_OP_CONCURRENCY,
+      (path) =>
         this.callbacks.listFiles({ path: path }).catch(() => ({ files: [] })),
-      ),
     );
 
     for (const [idx, openFolder] of openFolders.entries()) {

package/src/components/editor/file-tree/upload.tsx

@@ -3,13 +3,14 @@
 import { type DropzoneOptions, useDropzone } from "react-dropzone";
 import { toast } from "@/components/ui/use-toast";
 import { useRequestClient } from "@/core/network/requests";
-import { serializeBlob } from "@/utils/blob";
 import { withLoadingToast } from "@/utils/download";
 import { Logger } from "@/utils/Logger";
 import { type FilePath, PathBuilder } from "@/utils/paths";
+import { mapWithConcurrency } from "@/utils/semaphore";
 import { refreshRoot } from "./state";
 
 const MAX_SIZE = 1024 * 1024 * 100; // 100MB
+const UPLOAD_CONCURRENCY = 5;
 
 export function useFileExplorerUpload(options: DropzoneOptions = {}) {
   const { sendCreateFileOrFolder } = useRequestClient();
@@ -59,30 +60,28 @@ export function useFileExplorerUpload(options: DropzoneOptions = {}) {
         loadingTitle,
         async (progress) => {
           progress.addTotal(acceptedFiles.length);
-          for (const file of acceptedFiles) {
-            // We strip the leading slash since File.path can return
-            // `/path/to/file`.
-            const filePath = stripLeadingSlash(getPath(file));
-            let directoryPath = "" as FilePath;
-            if (filePath) {
-              directoryPath =
-                PathBuilder.guessDeliminator(filePath).dirname(filePath);
-            }
+          await mapWithConcurrency(
+            acceptedFiles,
+            UPLOAD_CONCURRENCY,
+            async (file) => {
+              // We strip the leading slash since File.path can return
+              // `/path/to/file`.
+              const filePath = stripLeadingSlash(getPath(file));
+              let directoryPath = "" as FilePath;
+              if (filePath) {
+                directoryPath =
+                  PathBuilder.guessDeliminator(filePath).dirname(filePath);
+              }
 
-            // File contents are sent base64-encoded to support arbitrary
-            // bytes data
-            //
-            // get the raw base64-encoded data from a string starting with
-            // data:*/*;base64,
-            const base64 = (await serializeBlob(file)).split(",")[1];
-            await sendCreateFileOrFolder({
-              path: directoryPath,
-              type: "file",
-              name: file.name,
-              contents: base64,
-            });
-            progress.increment(1);
-          }
+              await sendCreateFileOrFolder({
+                path: directoryPath,
+                type: "file",
+                name: file.name,
+                file,
+              });
+              progress.increment(1);
+            },
+          );
           await refreshRoot();
         },
         onFinish,

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

@@ -246,7 +246,7 @@ describe("insertImage", () => {
       path: "public",
       type: "file",
       name: "hello.png",
-      contents: "AQID",
+      file: expect.any(File),
     });
 
     expect(view.state.doc.toString()).toMatchInlineSnapshot(
@@ -291,7 +291,7 @@ describe("insertImage", () => {
       path: "nested/public", // store in public folder of notebook directory
       type: "file",
       name: "hello.png",
-      contents: "AQID",
+      file: expect.any(File),
     });
 
     expect(view.state.doc.toString()).toMatchInlineSnapshot(
@@ -337,7 +337,7 @@ describe("insertImage", () => {
       path: "/Users/user/Development/project/public",
       type: "file",
       name: "hello.png",
-      contents: "AQID",
+      file: expect.any(File),
     });
 
     // Should convert absolute path to relative path

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

@@ -313,7 +313,6 @@ export async function insertImage(view: EditorView, file: File) {
   // If the file is base64 encoded, we can save it locally to prevent large file strings
   try {
     if (dataUrl.startsWith("data:")) {
-      const base64 = dataUrl.split(",")[1];
       let inputFilename = prompt(
         "We can save your image as a file. Enter a filename.",
         file.name,
@@ -348,7 +347,7 @@ export async function insertImage(view: EditorView, file: File) {
           path: publicFolderPath as FilePath,
           type: "file",
           name: inputFilename,
-          contents: base64,
+          file,
         });
 
         if (createFileRes.success) {

package/src/core/network/requests-network.ts

@@ -6,6 +6,19 @@ import { API, createClientWithRuntimeManager } from "./api";
 import { waitForConnectionOpen } from "./connection";
 import type { EditRequests, RunRequests } from "./types";
 
+/**
+ * Options for POSTing FormData via openapi-fetch. openapi-fetch types
+ * request bodies from the JSON schema, so we bypass the body type and
+ * override the serializer to pass the FormData through unchanged; the
+ * browser then sets the multipart Content-Type with boundary.
+ */
+function multipartInit(formData: FormData) {
+  return {
+    body: formData as never,
+    bodySerializer: (body: unknown) => body as never,
+  };
+}
+
 const { handleResponse, handleResponseReturnNull } = API;
 
 export function createNetworkRequests(): EditRequests & RunRequests {
@@ -298,10 +311,15 @@ export function createNetworkRequests(): EditRequests & RunRequests {
     },
     sendCreateFileOrFolder: async (request) => {
       await waitForConnectionOpen();
+      const formData = new FormData();
+      formData.append("path", request.path);
+      formData.append("type", request.type);
+      formData.append("name", request.name);
+      if (request.file) {
+        formData.append("file", request.file, request.name);
+      }
       return getClient()
-        .POST("/api/files/create", {
-          body: request,
-        })
+        .POST("/api/files/create", multipartInit(formData))
         .then(handleResponse);
     },
     sendDeleteFileOrFolder: async (request) => {

package/src/core/network/types.ts

@@ -80,6 +80,17 @@ export type SaveUserConfigurationRequest =
 export interface SetCellConfigRequest {
   configs: Record<CellId, Partial<CellConfig>>;
 }
+/**
+ * Client-side shape for creating a file/directory/notebook. The HTTP
+ * transport sends this as multipart/form-data; the WASM bridge base64-encodes
+ * `file` internally and crosses the JS<->Py boundary as JSON.
+ */
+export interface FileCreateInput {
+  path: string;
+  type: "file" | "directory" | "notebook";
+  name: string;
+  file?: Blob;
+}
 export type UpdateUIElementRequest = schemas["UpdateUIElementRequest"];
 export type ModelRequest = schemas["ModelRequest"];
 export type NotebookDocumentTransactionRequest =
@@ -165,7 +176,7 @@ export interface EditRequests {
   sendListFiles: (request: FileListRequest) => Promise<FileListResponse>;
   sendSearchFiles: (request: FileSearchRequest) => Promise<FileSearchResponse>;
   sendCreateFileOrFolder: (
-    request: FileCreateRequest,
+    request: FileCreateInput,
   ) => Promise<FileCreateResponse>;
   sendDeleteFileOrFolder: (
     request: FileDeleteRequest,

package/src/core/wasm/bridge.ts

@@ -3,6 +3,7 @@
 
 import { toast } from "@/components/ui/use-toast";
 import { userConfigAtom } from "@/core/config/config";
+import { serializeBlob } from "@/utils/blob";
 import { Deferred } from "@/utils/Deferred";
 import { throwNotImplemented } from "@/utils/functions";
 import { Logger } from "@/utils/Logger";
@@ -431,9 +432,21 @@ export class PyodideBridge implements RunRequests, EditRequests {
   sendCreateFileOrFolder: EditRequests["sendCreateFileOrFolder"] = async (
     request,
   ) => {
+    // The WASM RPC boundary can only carry JSON, so we base64-encode the
+    // file bytes here. The HTTP transport uses multipart/form-data instead.
+    let contents: string | null = null;
+    if (request.file) {
+      const dataUrl = await serializeBlob(request.file);
+      contents = dataUrl.split(",")[1] ?? "";
+    }
     const response = await this.rpc.proxy.request.bridge({
       functionName: "create_file_or_directory",
-      payload: request,
+      payload: {
+        path: request.path,
+        type: request.type,
+        name: request.name,
+        contents,
+      },
     });
     return response as FileCreateResponse;
   };

package/src/plugins/core/__test__/sanitize.test.ts

@@ -145,6 +145,14 @@ describe("sanitizeHtml", () => {
     );
   });
 
+  test("preserves marimo-mermaid with theme attributes", () => {
+    const html =
+      "<marimo-mermaid data-diagram='&quot;graph TD\\nA --&gt; B&quot;' data-theme='&quot;base&quot;' data-theme_variables='{&quot;primaryColor&quot;: &quot;#E8EEF5&quot;, &quot;lineColor&quot;: &quot;#475569&quot;}'></marimo-mermaid>";
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<marimo-mermaid data-diagram="&quot;graph TD\\nA --> B&quot;" data-theme="&quot;base&quot;" data-theme_variables="{&quot;primaryColor&quot;: &quot;#E8EEF5&quot;, &quot;lineColor&quot;: &quot;#475569&quot;}"></marimo-mermaid>"`,
+    );
+  });
+
   test("keeps style tags with FORCE_BODY", () => {
     const html = "<style>body { color: red; }</style><p>Text</p>";
     expect(sanitizeHtml(html)).toMatchInlineSnapshot(

package/src/plugins/impl/DataTablePlugin.tsx

@@ -194,6 +194,7 @@ interface Data<T> {
   wrappedColumns?: string[];
   headerTooltip?: Record<string, string>;
   totalColumns: number;
+  sizeBytes?: number | null;
   maxColumns: number | "all";
   hasStableRowId: boolean;
   lazy: boolean;
@@ -220,6 +221,7 @@ type DataTableFunctions = {
     cell_styles?: CellStyleState | null;
     cell_hover_texts?: Record<string, Record<string, string | null>> | null;
     raw_data?: TableData<T> | null;
+    size_bytes?: number | null;
   }>;
   get_data_url?: GetDataUrl;
   get_row_ids?: GetRowIds;
@@ -270,6 +272,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       headerTooltip: z.record(z.string(), z.string()).optional(),
       fieldTypes: columnToFieldTypesSchema.nullish(),
       totalColumns: z.number(),
+      sizeBytes: z.number().nullish(),
       maxColumns: z.union([z.number(), z.literal("all")]).default("all"),
       hasStableRowId: z.boolean().default(false),
       maxHeight: z.number().optional(),
@@ -327,6 +330,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             .nullable(),
           cell_hover_texts: cellHoverTextSchema.nullable(),
           raw_data: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
+          size_bytes: z.number().nullish(),
         }),
       ),
     get_row_ids: rpc.input(z.object({}).passthrough()).output(
@@ -532,6 +536,7 @@ export const LoadingDataTableComponent = memo(
       rows: T[];
       rawRows?: T[];
       totalRows: number | TooManyRows;
+      sizeBytes?: number | null;
       cellStyles: CellStyleState | undefined | null;
       cellHoverTexts?: Record<string, Record<string, string | null>> | null;
     }>(async () => {
@@ -548,6 +553,7 @@ export const LoadingDataTableComponent = memo(
       let tableData = props.data;
       let rawTableData: TableData<T> | undefined | null = props.rawData;
       let totalRows = props.totalRows;
+      let sizeBytes = props.sizeBytes ?? null;
       let cellStyles = props.cellStyles;
       let cellHoverTexts = props.cellHoverTexts;
 
@@ -591,6 +597,7 @@ export const LoadingDataTableComponent = memo(
         tableData = searchResults.data;
         rawTableData = searchResults.raw_data;
         totalRows = searchResults.total_rows;
+        sizeBytes = searchResults.size_bytes ?? null;
         cellStyles = searchResults.cell_styles || {};
         cellHoverTexts = searchResults.cell_hover_texts || {};
       }
@@ -603,6 +610,7 @@ export const LoadingDataTableComponent = memo(
         rows: tableData,
         rawRows: rawData,
         totalRows: totalRows,
+        sizeBytes,
         cellStyles,
         cellHoverTexts,
       };
@@ -614,6 +622,7 @@ export const LoadingDataTableComponent = memo(
       useDeepCompareMemoize(props.fieldTypes),
       props.data,
       props.totalRows,
+      props.sizeBytes,
       props.lazy,
       props.cellHoverTexts,
       props.cellStyles,
@@ -728,6 +737,7 @@ export const LoadingDataTableComponent = memo(
         setFilters={setFilters}
         reloading={isFetching && !isPending}
         totalRows={data?.totalRows ?? props.totalRows}
+        sizeBytes={data?.sizeBytes ?? props.sizeBytes ?? null}
         paginationState={paginationState}
         setPaginationState={setPaginationState}
         cellStyles={data?.cellStyles ?? props.cellStyles}
@@ -774,6 +784,7 @@ const DataTableComponent = ({
   data,
   rawData,
   totalRows,
+  sizeBytes,
   maxColumns,
   pagination,
   selection,
@@ -1053,6 +1064,7 @@ const DataTableComponent = ({
             maxHeight={maxHeight}
             sorting={sorting}
             totalRows={totalRows}
+            sizeBytes={sizeBytes}
             totalColumns={totalColumns}
             manualSorting={true}
             setSorting={setSorting}

package/src/plugins/impl/TabsPlugin.tsx

@@ -7,6 +7,7 @@ import {
   TabsList,
   TabsTrigger,
 } from "../../components/ui/tabs";
+import { cn } from "../../utils/cn";
 import { renderHTML } from "../core/RenderHTML";
 import type { IPlugin, IPluginProps } from "../types";
 import { Labeled } from "./common/labeled";
@@ -17,6 +18,7 @@ interface Data {
    */
   tabs: string[];
   label: string | null;
+  orientation: "horizontal" | "vertical";
 }
 
 // Selected tab index
@@ -28,6 +30,7 @@ export class TabsPlugin implements IPlugin<T, Data> {
   validator = z.object({
     tabs: z.array(z.string()),
     label: z.string().nullable(),
+    orientation: z.enum(["horizontal", "vertical"]).default("horizontal"),
   });
 
   render(props: IPluginProps<T, Data>): JSX.Element {
@@ -51,6 +54,7 @@ interface TabComponentProps extends Data {
 const TabComponent = ({
   tabs,
   label,
+  orientation,
   value,
   setValue,
   children,
@@ -70,19 +74,43 @@ const TabComponent = ({
     setInternalValue(value);
   }
 
+  const isVertical = orientation === "vertical";
+  const childArray =
+    children == null ? [] : Array.isArray(children) ? children : [children];
+
   return (
-    <Labeled label={label} align="top">
-      <Tabs value={internalValue} onValueChange={handleChange}>
-        <TabsList>
+    <Labeled label={label} align="top" fullWidth={true}>
+      <Tabs
+        value={internalValue}
+        onValueChange={handleChange}
+        orientation={orientation}
+        className={cn(isVertical && "flex flex-row gap-3")}
+      >
+        <TabsList
+          className={cn(
+            "scrollbar-thin",
+            isVertical
+              ? "flex flex-col items-stretch justify-start h-auto max-h-none shrink-0 min-w-[10rem] overflow-y-auto"
+              : "max-w-full overflow-x-auto justify-start",
+          )}
+        >
           {tabs.map((tab, index) => (
-            <TabsTrigger key={index} value={index.toString()}>
+            <TabsTrigger
+              key={index}
+              value={index.toString()}
+              className={cn(isVertical && "w-full justify-start")}
+            >
               {renderHTML({ html: tab })}
             </TabsTrigger>
           ))}
         </TabsList>
-        {React.Children.map(children, (child, index) => {
-          return <TabsContent value={index.toString()}>{child}</TabsContent>;
-        })}
+        <div className={cn(isVertical && "flex-1 min-w-0")}>
+          {childArray.map((child, index) => (
+            <TabsContent key={index} value={index.toString()}>
+              {child}
+            </TabsContent>
+          ))}
+        </div>
       </Tabs>
     </Labeled>
   );

package/src/plugins/impl/__tests__/TabsPlugin.test.tsx

@@ -0,0 +1,154 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import type { z } from "zod";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import type { IPluginProps } from "../../types";
+import { TabsPlugin } from "../TabsPlugin";
+
+describe("TabsPlugin", () => {
+  beforeAll(() => {
+    store.set(initialModeAtom, "edit");
+  });
+
+  const renderPlugin = (
+    data: z.input<TabsPlugin["validator"]>,
+    initialValue = "0",
+  ) => {
+    const plugin = new TabsPlugin();
+    const host = document.createElement("div");
+    const setValue = vi.fn();
+    const children = [
+      <span key="0">Content 0</span>,
+      <span key="1">Content 1</span>,
+      <span key="2">Content 2</span>,
+    ];
+    const makeProps = (
+      value: string,
+    ): IPluginProps<string, z.infer<TabsPlugin["validator"]>> => ({
+      data: plugin.validator.parse(data),
+      value,
+      setValue,
+      host,
+      functions: {},
+      children,
+    });
+    const result = render(plugin.render(makeProps(initialValue)));
+    return {
+      ...result,
+      setValue,
+      rerenderWithValue: (newValue: string) =>
+        result.rerender(plugin.render(makeProps(newValue))),
+    };
+  };
+
+  it("renders all tab triggers", () => {
+    renderPlugin({
+      tabs: ["First", "Second", "Third"],
+      label: null,
+    });
+    expect(screen.getByRole("tab", { name: "First" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Second" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Third" })).toBeInTheDocument();
+  });
+
+  it("supports vertical orientation", () => {
+    renderPlugin({
+      tabs: ["First", "Second"],
+      label: null,
+      orientation: "vertical",
+    });
+    const tablist = screen.getByRole("tablist");
+    expect(tablist).toHaveAttribute("data-orientation", "vertical");
+    expect(tablist.className).toMatch(/flex-col/);
+    // Horizontal scroll classes should not be applied in vertical mode.
+    expect(tablist.className).not.toMatch(/overflow-x-auto/);
+  });
+
+  it("falls back to horizontal when orientation is omitted (back-compat)", () => {
+    // Older Python kernels won't send `orientation` — make sure the validator
+    // defaults it so the frontend keeps working.
+    const plugin = new TabsPlugin();
+    const parsed = plugin.validator.parse({
+      tabs: ["First"],
+      label: null,
+    });
+    expect(parsed.orientation).toBe("horizontal");
+  });
+
+  it("selects the tab matching the initial value", () => {
+    renderPlugin({ tabs: ["First", "Second", "Third"], label: null }, "1");
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("data-state", "inactive");
+    expect(tabs[1]).toHaveAttribute("data-state", "active");
+    expect(tabs[2]).toHaveAttribute("data-state", "inactive");
+  });
+
+  it("defaults to the first tab when value is empty", () => {
+    renderPlugin({ tabs: ["First", "Second"], label: null }, "");
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("data-state", "active");
+    expect(tabs[1]).toHaveAttribute("data-state", "inactive");
+  });
+
+  it("calls setValue with the clicked tab's index", () => {
+    const { setValue } = renderPlugin({
+      tabs: ["First", "Second", "Third"],
+      label: null,
+    });
+    // Radix Tabs' trigger reacts to mousedown (left button), not click —
+    // see https://github.com/radix-ui/primitives/blob/main/packages/react/tabs/src/Tabs.tsx
+    fireEvent.mouseDown(screen.getByRole("tab", { name: "Third" }), {
+      button: 0,
+    });
+    expect(setValue).toHaveBeenCalledWith("2");
+  });
+
+  it("syncs selection when value is updated externally", () => {
+    const { rerenderWithValue } = renderPlugin(
+      { tabs: ["First", "Second", "Third"], label: null },
+      "0",
+    );
+    expect(screen.getAllByRole("tab")[0]).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+
+    rerenderWithValue("2");
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("data-state", "inactive");
+    expect(tabs[2]).toHaveAttribute("data-state", "active");
+  });
+
+  it("renders HTML in tab labels via renderHTML", () => {
+    renderPlugin({
+      tabs: ["<strong>Bold</strong>", "Plain"],
+      label: null,
+    });
+    const boldTab = screen.getByRole("tab", { name: "Bold" });
+    // The label markup is preserved (not escaped as text), so the trigger
+    // contains a real <strong> element.
+    expect(boldTab.querySelector("strong")).not.toBeNull();
+  });
+
+  it("renders no tabpanels when tabs and children are empty", () => {
+    // When the Python side passes `tabs={}`, slotted HTML is empty and the
+    // resulting React children are null/undefined. We should render zero
+    // `TabsContent`s — not a stray one paired to a non-existent trigger.
+    const plugin = new TabsPlugin();
+    const host = document.createElement("div");
+    const props: IPluginProps<string, z.infer<TabsPlugin["validator"]>> = {
+      data: plugin.validator.parse({ tabs: [], label: null }),
+      value: "",
+      setValue: vi.fn(),
+      host,
+      functions: {},
+      children: null,
+    };
+    render(plugin.render(props));
+    expect(screen.queryAllByRole("tab")).toHaveLength(0);
+    expect(screen.queryAllByRole("tabpanel")).toHaveLength(0);
+  });
+});

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -64,6 +64,7 @@ type PluginFunctions = {
     column_types_per_step: FieldTypesWithExternalType[];
     python_code?: string | null;
     sql_code?: string | null;
+    size_bytes?: number | null;
   }>;
   get_column_values: (req: { column: string }) => Promise<{
     values: unknown[];
@@ -81,6 +82,7 @@ type PluginFunctions = {
   }) => Promise<{
     data: TableData<T>;
     total_rows: number;
+    size_bytes?: number | null;
   }>;
   download_as: DownloadAsArgs;
 };
@@ -118,6 +120,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
         column_types_per_step: z.array(columnToFieldTypesSchema),
         python_code: z.string().nullish(),
         sql_code: z.string().nullish(),
+        size_bytes: z.number().nullish(),
       }),
     ),
     get_column_values: rpc.input(z.object({ column: z.string() })).output(
@@ -147,6 +150,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
         z.object({
           data: z.union([z.string(), z.array(z.object({}).passthrough())]),
           total_rows: z.number(),
+          size_bytes: z.number().nullish(),
         }),
       ),
     download_as: DownloadAsSchema,
@@ -203,6 +207,7 @@ export const DataFrameComponent = memo(
       column_types_per_step,
       python_code,
       sql_code,
+      size_bytes,
     } = data || {};
 
     const totalColumns = field_types?.length;
@@ -322,6 +327,7 @@ export const DataFrameComponent = memo(
           data={url || ""}
           hasStableRowId={false}
           totalRows={total_rows ?? 0}
+          sizeBytes={size_bytes ?? null}
           totalColumns={totalColumns ?? 0}
           maxColumns="all"
           pageSize={pageSize}