@marimo-team/frontend 0.23.10-dev8 → 0.23.10

package/src/core/storage/__tests__/useStorageEntries.test.tsx

@@ -1,11 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { renderHook, waitFor } from "@testing-library/react";
+import { act, renderHook, waitFor } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import type { ReactNode } from "react";
 import * as React from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { storageAtom, useStorageEntries } from "../state";
+import {
+  storageAtom,
+  useStorageEntries,
+  useStoragePageFetcher,
+} from "../state";
 import type { StorageEntry, StorageState } from "../types";
 
 const mockRequest = vi.fn();
@@ -175,13 +179,205 @@ describe("useStorageEntries", () => {
 
   it("should store fetched entries in the atom", async () => {
     const entries = [makeEntry({ path: "new.txt" })];
-    mockRequest.mockResolvedValue({ entries });
+    mockRequest.mockResolvedValue({
+      entries,
+      next_page_token: "150",
+    });
 
     renderHook(() => useStorageEntries("ns", "sub/"), { wrapper });
 
     await waitFor(() => {
       const state = store.get(storageAtom);
       expect(state.entriesByPath.get("ns::sub/")).toEqual(entries);
+      expect(state.pageMetadataByPath.get("ns::sub/")?.nextPageToken).toBe(
+        "150",
+      );
+    });
+  });
+
+  it("should load more entries when a next page token exists", async () => {
+    const firstPage = [makeEntry({ path: "a.txt" })];
+    const secondPage = [makeEntry({ path: "b.txt" })];
+    mockRequest
+      .mockResolvedValueOnce({
+        entries: firstPage,
+        next_page_token: "150",
+      })
+      .mockResolvedValueOnce({
+        entries: secondPage,
+        next_page_token: null,
+      });
+
+    const { result } = renderHook(() => useStorageEntries("ns", "sub/"), {
+      wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current.entries).toEqual(firstPage);
+    });
+    expect(result.current.hasMore).toBe(true);
+
+    await act(async () => {
+      await result.current.loadMore();
+    });
+
+    expect(result.current.entries).toEqual([...firstPage, ...secondPage]);
+    expect(result.current.hasMore).toBe(false);
+    expect(mockRequest).toHaveBeenLastCalledWith({
+      namespace: "ns",
+      prefix: "sub/",
+      limit: 150,
+      pageToken: "150",
+    });
+  });
+
+  it("should load more entries when the next page token is an empty string", async () => {
+    const firstPage = [makeEntry({ path: "a.txt" })];
+    const secondPage = [makeEntry({ path: "b.txt" })];
+    mockRequest
+      .mockResolvedValueOnce({
+        entries: firstPage,
+        next_page_token: "",
+      })
+      .mockResolvedValueOnce({
+        entries: secondPage,
+        next_page_token: null,
+      });
+
+    const { result } = renderHook(() => useStorageEntries("ns", "sub/"), {
+      wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current.entries).toEqual(firstPage);
+    });
+    expect(result.current.hasMore).toBe(true);
+
+    await act(async () => {
+      await result.current.loadMore();
+    });
+
+    expect(result.current.entries).toEqual([...firstPage, ...secondPage]);
+    expect(result.current.hasMore).toBe(false);
+    expect(mockRequest).toHaveBeenLastCalledWith({
+      namespace: "ns",
+      prefix: "sub/",
+      limit: 150,
+      pageToken: "",
+    });
+  });
+
+  it("should ignore duplicate load more calls while a page is loading", async () => {
+    const firstPage = [makeEntry({ path: "a.txt" })];
+    const secondPage = [makeEntry({ path: "b.txt" })];
+    let resolveLoadMore!: (value: {
+      entries: StorageEntry[];
+      next_page_token: string | null;
+    }) => void;
+    const loadMorePromise = new Promise<{
+      entries: StorageEntry[];
+      next_page_token: string | null;
+    }>((resolve) => {
+      resolveLoadMore = resolve;
+    });
+    mockRequest
+      .mockResolvedValueOnce({
+        entries: firstPage,
+        next_page_token: "150",
+      })
+      .mockReturnValueOnce(loadMorePromise);
+
+    const { result } = renderHook(() => useStorageEntries("ns", "sub/"), {
+      wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current.entries).toEqual(firstPage);
+    });
+
+    await act(async () => {
+      const firstLoad = result.current.loadMore();
+      const secondLoad = result.current.loadMore();
+
+      expect(mockRequest).toHaveBeenCalledTimes(2);
+      resolveLoadMore({
+        entries: secondPage,
+        next_page_token: null,
+      });
+      await Promise.all([firstLoad, secondLoad]);
+    });
+
+    expect(result.current.entries).toEqual([...firstPage, ...secondPage]);
+    expect(mockRequest).toHaveBeenCalledTimes(2);
+  });
+
+  it("should fetch arbitrary storage pages", async () => {
+    const firstPage = [makeEntry({ path: "folder/a.txt" })];
+    const secondPage = [makeEntry({ path: "folder/b.txt" })];
+    mockRequest
+      .mockResolvedValueOnce({
+        entries: firstPage,
+        next_page_token: "150",
+      })
+      .mockResolvedValueOnce({
+        entries: secondPage,
+        next_page_token: null,
+      });
+
+    const { result } = renderHook(() => useStoragePageFetcher(), {
+      wrapper,
+    });
+
+    await act(async () => {
+      await result.current({
+        namespace: "ns",
+        prefix: "folder/",
+      });
+    });
+    await act(async () => {
+      await result.current({
+        namespace: "ns",
+        prefix: "folder/",
+        pageToken: "150",
+        append: true,
+      });
+    });
+
+    expect(store.get(storageAtom).entriesByPath.get("ns::folder/")).toEqual([
+      ...firstPage,
+      ...secondPage,
+    ]);
+    expect(mockRequest).toHaveBeenLastCalledWith({
+      namespace: "ns",
+      prefix: "folder/",
+      limit: 150,
+      pageToken: "150",
+    });
+  });
+
+  it("should forward an empty string page token", async () => {
+    mockRequest.mockResolvedValue({
+      entries: [],
+      next_page_token: null,
+    });
+
+    const { result } = renderHook(() => useStoragePageFetcher(), {
+      wrapper,
+    });
+
+    await act(async () => {
+      await result.current({
+        namespace: "ns",
+        prefix: "folder/",
+        pageToken: "",
+      });
+    });
+
+    expect(mockRequest).toHaveBeenLastCalledWith({
+      namespace: "ns",
+      prefix: "folder/",
+      limit: 150,
+      pageToken: "",
     });
   });
 });

package/src/core/storage/state.ts

@@ -1,11 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { atom, useAtomValue } from "jotai";
+import { useCallback, useRef, useState } from "react";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { createReducerAndAtoms } from "@/utils/createReducer";
 import type { NotificationMessageData } from "../kernel/messages";
 import type { VariableName } from "../variables/types";
-import { ListStorageEntries } from "./request-registry";
+import {
+  ListStorageEntries,
+  type StorageEntriesResult,
+} from "./request-registry";
 import type { StorageEntry, StorageState } from "./types";
 import {
   DEFAULT_FETCH_LIMIT,
@@ -18,6 +22,7 @@ function initialState(): StorageState {
   return {
     namespaces: [],
     entriesByPath: new Map(),
+    pageMetadataByPath: new Map(),
   };
 }
 
@@ -48,23 +53,48 @@ const {
       namespace: string;
       prefix: string | null | undefined;
       entries: StorageEntry[];
+      nextPageToken?: string | null;
+      append?: boolean;
     },
   ) => {
     const key = storagePathKey(opts.namespace, opts.prefix);
     const entriesByPath = new Map(state.entriesByPath);
-    entriesByPath.set(key, opts.entries);
-    return { ...state, entriesByPath };
+    const entries =
+      opts.append && entriesByPath.has(key)
+        ? [...(entriesByPath.get(key) ?? []), ...opts.entries]
+        : opts.entries;
+    entriesByPath.set(key, entries);
+
+    const pageMetadataByPath = new Map(state.pageMetadataByPath);
+    pageMetadataByPath.set(key, {
+      nextPageToken: opts.nextPageToken ?? null,
+    });
+    return {
+      ...state,
+      entriesByPath,
+      pageMetadataByPath,
+    };
   },
 
   clearNamespaceCache: (state, namespace: string) => {
     const entriesByPath = new Map(state.entriesByPath);
+    const pageMetadataByPath = new Map(state.pageMetadataByPath);
     const prefix = storageNamespacePrefix(namespace);
     for (const key of entriesByPath.keys()) {
       if (key.startsWith(prefix)) {
         entriesByPath.delete(key);
       }
     }
-    return { ...state, entriesByPath };
+    for (const key of pageMetadataByPath.keys()) {
+      if (key.startsWith(prefix)) {
+        pageMetadataByPath.delete(key);
+      }
+    }
+    return {
+      ...state,
+      entriesByPath,
+      pageMetadataByPath,
+    };
   },
 
   filterFromVariables: (state, variableNames: VariableName[]) => {
@@ -93,38 +123,119 @@ export function useStorageActions() {
 
 export { storageAtom };
 
+async function fetchStorageEntriesPage({
+  namespace,
+  prefix,
+  pageToken,
+  append,
+  setEntries,
+}: {
+  namespace: string;
+  prefix: string | null | undefined;
+  pageToken?: string | null;
+  append?: boolean;
+  setEntries: ReturnType<typeof useStorageActions>["setEntries"];
+}): Promise<StorageEntriesResult> {
+  const result = await ListStorageEntries.request({
+    namespace,
+    prefix: prefix ?? ROOT_PATH,
+    limit: DEFAULT_FETCH_LIMIT,
+    ...(pageToken != null ? { pageToken } : {}),
+  });
+  if (result.error) {
+    throw new Error(result.error);
+  }
+  setEntries({
+    namespace,
+    prefix,
+    entries: result.entries,
+    nextPageToken: result.next_page_token,
+    append,
+  });
+  return result;
+}
+
 /**
  * Hook that fetches and caches storage entries for a given namespace/prefix.
  * Entries are fetched on first access and cached in the store for subsequent renders.
  */
 export function useStorageEntries(namespace: string, prefix?: string) {
-  const { entriesByPath } = useStorage();
+  const { entriesByPath, pageMetadataByPath } = useStorage();
   const { setEntries } = useStorageActions();
-  const cached = entriesByPath.get(storagePathKey(namespace, prefix));
+  const key = storagePathKey(namespace, prefix);
+  const cached = entriesByPath.get(key);
+  const metadata = pageMetadataByPath.get(key);
+  const nextPageToken = metadata?.nextPageToken ?? null;
+  const isLoadingMoreRef = useRef(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [loadMoreError, setLoadMoreError] = useState<Error | undefined>();
 
   const { isPending, error, refetch } = useAsyncData(async () => {
     if (cached) {
       return;
     }
-    const result = await ListStorageEntries.request({
+    await fetchStorageEntriesPage({
       namespace,
-      prefix: prefix ?? ROOT_PATH,
-      limit: DEFAULT_FETCH_LIMIT,
+      prefix,
+      setEntries,
     });
-    if (result.error) {
-      throw new Error(result.error);
-    }
-    setEntries({ namespace, prefix, entries: result.entries });
   }, [namespace, prefix, cached === undefined]);
 
+  const loadMore = useCallback(async () => {
+    if (nextPageToken == null || isLoadingMoreRef.current) {
+      return;
+    }
+
+    isLoadingMoreRef.current = true;
+    setIsLoadingMore(true);
+    setLoadMoreError(undefined);
+    try {
+      await fetchStorageEntriesPage({
+        namespace,
+        prefix,
+        pageToken: nextPageToken,
+        append: true,
+        setEntries,
+      });
+    } catch (error) {
+      setLoadMoreError(
+        error instanceof Error ? error : new Error(String(error)),
+      );
+    } finally {
+      isLoadingMoreRef.current = false;
+      setIsLoadingMore(false);
+    }
+  }, [namespace, prefix, nextPageToken, setEntries]);
+
   return {
     entries: cached ?? [],
     isPending: isPending && !cached,
     error: cached ? undefined : error,
+    hasMore: nextPageToken !== null,
+    loadMore,
+    isLoadingMore,
+    loadMoreError,
     refetch,
   };
 }
 
+export function useStoragePageFetcher() {
+  const { setEntries } = useStorageActions();
+  return useCallback(
+    (opts: {
+      namespace: string;
+      prefix: string | null | undefined;
+      pageToken?: string | null;
+      append?: boolean;
+    }) =>
+      fetchStorageEntriesPage({
+        ...opts,
+        setEntries,
+      }),
+    [setEntries],
+  );
+}
+
 export const exportedForTesting = {
   reducer,
   createActions,

package/src/core/storage/types.ts

@@ -30,6 +30,12 @@ export interface StorageState {
   namespaces: StorageNamespace[];
   /** Lazy-loaded entries keyed by "namespace::prefix" */
   entriesByPath: ReadonlyMap<StoragePathKey, StorageEntry[]>;
+  /** Pagination metadata keyed by "namespace::prefix" */
+  pageMetadataByPath: ReadonlyMap<StoragePathKey, StoragePageMetadata>;
+}
+
+export interface StoragePageMetadata {
+  nextPageToken: string | null;
 }
 
 export function storageUrl(

package/src/core/wasm/worker/bootstrap.ts

@@ -55,6 +55,10 @@ export class DefaultWasmController implements WasmController {
     // Load pyodide and packages
     const span = t.startSpan("loadPyodide");
     try {
+      // Without this, this fails in Firefox with
+      // `Could not extract indexURL path from pyodide module`
+      // This fixes for Firefox and does not break Chrome/others
+      const indexURL = `https://cdn.jsdelivr.net/pyodide/${opts.pyodideVersion}/full/`;
       const pyodide = await loadPyodide({
         // Perf: These get loaded while pyodide is being bootstrapped
         packages: [
@@ -68,10 +72,14 @@ export class DefaultWasmController implements WasmController {
         ],
         _makeSnapshot: MAKE_SNAPSHOT,
         lockFileURL: `https://wasm.marimo.app/pyodide-lock.json?v=${opts.version}&pyodide=${opts.pyodideVersion}`,
-        // Without this, this fails in Firefox with
-        // `Could not extract indexURL path from pyodide module`
-        // This fixes for Firefox and does not break Chrome/others
-        indexURL: `https://cdn.jsdelivr.net/pyodide/${opts.pyodideVersion}/full/`,
+        indexURL,
+        // Since Pyodide 0.28.0, when lockFileURL is set, the package base URL
+        // defaults to the lockfile's URL (wasm.marimo.app) instead of indexURL.
+        // Unlike Node, browsers get no CDN fallback on a failed fetch, so we
+        // should pin packageBaseUrl back to the jsDelivr CDN  to restore
+        // the resolution akin to pre-0.28.
+        packageBaseUrl: indexURL,
+        convertNullToNone: true,
       });
       this.pyodide = pyodide;
       span.end("ok");

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

@@ -3,11 +3,20 @@
 import ReactDOM from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { z } from "zod";
+import { FUNCTIONS_REGISTRY } from "@/core/functions/FunctionRegistry";
+import type { FunctionCallResultMessage } from "@/core/kernel/messages";
+import { FunctionNotFoundError } from "@/utils/errors";
 import {
   isCustomMarimoElement,
   registerReactComponent,
 } from "../registerReactComponent";
 
+vi.mock("@/core/functions/FunctionRegistry", () => ({
+  FUNCTIONS_REGISTRY: { request: vi.fn() },
+}));
+
+const requestMock = vi.mocked(FUNCTIONS_REGISTRY.request);
+
 // Each custom element name can only be registered once per jsdom window,
 // so we use a counter to generate unique tag names across tests.
 let tagCounter = 0;
@@ -202,3 +211,90 @@ describe("connectedCallback - light DOM nesting detection", () => {
     outer.remove();
   });
 });
+
+describe("plugin function: not-found recovery", () => {
+  const NOT_FOUND: FunctionCallResultMessage = {
+    function_call_id:
+      "call-id" as FunctionCallResultMessage["function_call_id"],
+    status: { code: "error", message: "Function not found" },
+    found: false,
+    return_value: null,
+  };
+  const OK: FunctionCallResultMessage = {
+    function_call_id:
+      "call-id" as FunctionCallResultMessage["function_call_id"],
+    status: { code: "ok" },
+    found: true,
+    return_value: { ok: true },
+  };
+
+  // Mount a plugin exposing a single callable function and resolve the
+  // function map that PluginSlot hands to render(), so tests can invoke the
+  // request path directly.
+  async function mountWithFunction(): Promise<
+    (args: Record<string, unknown>) => Promise<unknown>
+  > {
+    const tag = uniqueTag("fn");
+    let captured:
+      | ((args: Record<string, unknown>) => Promise<unknown>)
+      | undefined;
+    registerReactComponent({
+      tagName: tag,
+      validator: z.any(),
+      functions: { run: { input: z.any(), output: z.any() } },
+      render: ({ functions }) => {
+        captured = (functions as Record<string, typeof captured>).run;
+        return null as never;
+      },
+    });
+
+    const wrapper = document.createElement("marimo-ui-element");
+    wrapper.setAttribute("object-id", "test-object-id");
+    const el = document.createElement(tag);
+    wrapper.append(el);
+    document.body.append(wrapper);
+
+    await vi.waitFor(() => expect(captured).toBeDefined());
+    return captured as (args: Record<string, unknown>) => Promise<unknown>;
+  }
+
+  beforeEach(() => {
+    requestMock.mockReset();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  test("retries on found:false and resolves once the function appears", async () => {
+    const run = await mountWithFunction();
+    requestMock.mockResolvedValueOnce(NOT_FOUND).mockResolvedValueOnce(OK);
+
+    await expect(run({})).resolves.toEqual({ ok: true });
+    expect(requestMock).toHaveBeenCalledTimes(2);
+  });
+
+  test("throws FunctionNotFoundError after retries are exhausted", async () => {
+    const run = await mountWithFunction();
+    requestMock.mockResolvedValue(NOT_FOUND);
+
+    await expect(run({})).rejects.toBeInstanceOf(FunctionNotFoundError);
+    // Initial attempt plus three retries.
+    expect(requestMock).toHaveBeenCalledTimes(4);
+  });
+
+  test("does not retry once the function is found (found:true)", async () => {
+    const run = await mountWithFunction();
+    requestMock.mockResolvedValue({
+      function_call_id:
+        "call-id" as FunctionCallResultMessage["function_call_id"],
+      status: { code: "error", message: "boom" },
+      found: true,
+      return_value: null,
+    });
+
+    const promise = run({});
+    await expect(promise).rejects.toThrow("boom");
+    expect(requestMock).toHaveBeenCalledTimes(1);
+  });
+});

package/src/plugins/core/registerReactComponent.tsx

@@ -40,7 +40,10 @@ import {
 } from "@/hooks/useEventListener";
 import { StyleNamespace } from "@/theme/namespace";
 import { useTheme } from "@/theme/useTheme";
-import { CellNotInitializedError } from "@/utils/errors.ts";
+import {
+  CellNotInitializedError,
+  FunctionNotFoundError,
+} from "@/utils/errors.ts";
 import { Functions } from "@/utils/functions";
 import { shallowCompare } from "@/utils/shallow-compare";
 import { defineCustomElement } from "../../core/dom/defineCustomElement";
@@ -80,6 +83,12 @@ export interface IMarimoHTMLElement extends HTMLElement {
   rerender: () => void;
 }
 
+// Bounded exponential backoff for re-issuing a request whose function the
+// kernel reported as not found. Short enough to fail fast on a genuinely
+// missing function, long enough to outlast a transient object-id desync.
+const FUNCTION_NOT_FOUND_MAX_RETRIES = 3;
+const FUNCTION_NOT_FOUND_BASE_DELAY_MS = 150;
+
 interface PluginSlotProps<T> {
   hostElement: HTMLElement;
   plugin: IPlugin<T, unknown>;
@@ -188,8 +197,6 @@ function PluginSlotInternal<T>(
           args.length <= 1,
           `Plugin functions only supports a single argument. Called ${key}`,
         );
-        const objectId = getUIElementObjectId(hostElement);
-        invariant(objectId, "Object ID should exist");
 
         const isStatic = isStaticNotebook();
 
@@ -218,16 +225,41 @@ function PluginSlotInternal<T>(
           Logger.warn(`Cell ID ${cellId} cannot be found`);
         }
 
-        const response = await FUNCTIONS_REGISTRY.request({
-          args: prettyParse(input, args[0]),
-          functionName: key,
-          namespace: objectId,
-        });
-        if (response.status.code !== "ok") {
+        // A "function not found" response means the kernel never ran the
+        // function, so re-issuing the request is side-effect-safe regardless
+        // of whether the function is idempotent. This recovers from a
+        // transient window where the frontend's object-id leads the kernel's
+        // registry. The object-id is re-read each attempt so a corrected id
+        // from a re-render is picked up. Once the function is found
+        // (found === true) the request is never retried, since the failure
+        // is unrelated to lookup and retrying would not help.
+        const parsedArgs = prettyParse(input, args[0]);
+        for (let attempt = 0; ; attempt++) {
+          const namespace = getUIElementObjectId(hostElement);
+          invariant(namespace, "Object ID should exist");
+
+          const response = await FUNCTIONS_REGISTRY.request({
+            args: parsedArgs,
+            functionName: key,
+            namespace,
+          });
+          if (response.status.code === "ok") {
+            return prettyParse(output, response.return_value);
+          }
+
+          const recoverable = response.found === false;
+          if (recoverable && attempt < FUNCTION_NOT_FOUND_MAX_RETRIES) {
+            const delay = FUNCTION_NOT_FOUND_BASE_DELAY_MS * 2 ** attempt;
+            await new Promise((resolve) => setTimeout(resolve, delay));
+            continue;
+          }
+
           Logger.error(response.status);
+          if (recoverable) {
+            throw new FunctionNotFoundError();
+          }
           throw new Error(response.status.message || "Unknown error");
         }
-        return prettyParse(output, response.return_value);
       };
     }