@marimo-team/islands 0.23.10-dev42 → 0.23.10-dev44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.10-dev42",
+  "version": "0.23.10-dev44",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -141,6 +141,7 @@
     "react-vega": "^8.0.0",
     "react-virtuoso": "^4.18.1",
     "reactflow": "^11.11.4",
+    "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "reveal.js": "^6.0.0",
     "rpc-anywhere": "^1.7.0",

package/src/components/chat/chat-display.tsx

@@ -60,8 +60,8 @@ export const renderUIMessage = ({
 
     switch (part.type) {
       case "text":
-        // Streamdown sanitizes the HTML which strips out marimo elements
-        // So instead, we render the HTML with our custom renderer.
+        // Streamdown strips marimo elements, so render them with our own HTML
+        // renderer. Other markdown (incl. mo.md HTML) goes through Streamdown.
         if (part.text.includes("<marimo-")) {
           return (
             <React.Fragment key={index}>

package/src/components/markdown/__tests__/markdown-renderer.test.tsx

@@ -0,0 +1,43 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { MarkdownRenderer } from "../markdown-renderer";
+
+describe("MarkdownRenderer", () => {
+  // Regression test for https://github.com/marimo-team/marimo/issues/9847
+  it("preserves class names on raw HTML (e.g. marimo admonitions)", async () => {
+    const { container } = render(
+      <MarkdownRenderer
+        content={
+          '<div class="admonition error">' +
+          '<p class="admonition-title">Error</p>' +
+          "<p>Nope!</p>" +
+          "</div>"
+        }
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Nope!")).toBeInTheDocument();
+    });
+
+    const admonition = container.querySelector(".admonition.error");
+    expect(admonition).toBeInTheDocument();
+    expect(container.querySelector(".admonition-title")).toBeInTheDocument();
+  });
+
+  it("strips unsafe tags while keeping class names", async () => {
+    const { container } = render(
+      <MarkdownRenderer
+        content={'<div class="safe"><script>alert(1)</script>hello</div>'}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("hello")).toBeInTheDocument();
+    });
+
+    expect(container.querySelector(".safe")).toBeInTheDocument();
+    expect(container.querySelector("script")).not.toBeInTheDocument();
+  });
+});

package/src/components/markdown/markdown-renderer.tsx

@@ -4,7 +4,12 @@ import { EditorView } from "@codemirror/view";
 import { useAtomValue } from "jotai";
 import { BetweenHorizontalStartIcon } from "lucide-react";
 import { memo, Suspense, useState } from "react";
-import { Streamdown, type StreamdownProps } from "streamdown";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+import {
+  defaultRehypePlugins,
+  Streamdown,
+  type StreamdownProps,
+} from "streamdown";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
@@ -148,6 +153,23 @@ const CopyButton: React.FC<ButtonProps> = ({ onClick, ...props }) => {
   );
 };
 
+// Allow `className` on every element; the default GitHub schema strips it,
+// which drops the styling on marimo HTML like `mo.md(...)` admonitions.
+const sanitizeSchema = {
+  ...defaultSchema,
+  attributes: {
+    ...defaultSchema.attributes,
+    "*": [...(defaultSchema.attributes?.["*"] ?? []), "className"],
+  },
+};
+
+// Keep Streamdown's other rehype plugins (raw, harden) so scripts and unsafe
+// URLs are still sanitized.
+const REHYPE_PLUGINS: StreamdownProps["rehypePlugins"] = Object.values({
+  ...defaultRehypePlugins,
+  sanitize: [rehypeSanitize, sanitizeSchema],
+});
+
 type Components = StreamdownProps["components"];
 
 const COMPONENTS: Components = {
@@ -187,6 +209,7 @@ export const MarkdownRenderer = memo(({ content }: { content: string }) => {
     <Streamdown
       components={COMPONENTS}
       plugins={plugins}
+      rehypePlugins={REHYPE_PLUGINS}
       className="mo-markdown-renderer"
     >
       {content}

package/src/components/storage/storage-inspector.tsx

@@ -153,6 +153,33 @@ function filterEntries(
   return entries.filter((entry) => entryMatchesSearch(entry, context));
 }
 
+const LoadMoreStorageEntries: React.FC<{
+  depth: number;
+  isLoading: boolean;
+  error?: Error;
+  onLoadMore: () => void;
+}> = ({ depth, isLoading, error, onLoadMore }) => {
+  return (
+    <div className="py-px text-xs" style={indentStyle(depth)}>
+      <Button
+        variant="text"
+        size="xs"
+        className="h-6 px-0 hover:text-blue-600"
+        disabled={isLoading}
+        onClick={onLoadMore}
+      >
+        {isLoading && <LoaderCircle className="h-3 w-3 mr-1 animate-spin" />}
+        {isLoading ? "Loading..." : "Load more"}
+      </Button>
+      {error && (
+        <span className="ml-2 text-destructive">
+          Failed to load: {error.message}
+        </span>
+      )}
+    </div>
+  );
+};
+
 /**
  * Lazily loaded children of a directory entry.
  * Caches fetched entries in the Jotai store so re-expanding doesn't re-fetch.
@@ -183,6 +210,10 @@ const StorageEntryChildren: React.FC<{
     entries: children,
     isPending,
     error,
+    hasMore,
+    loadMore,
+    isLoadingMore,
+    loadMoreError,
   } = useStorageEntries(namespace, prefix);
 
   if (isPending) {
@@ -242,6 +273,14 @@ const StorageEntryChildren: React.FC<{
           />
         );
       })}
+      {hasMore && (
+        <LoadMoreStorageEntries
+          depth={depth}
+          isLoading={isLoadingMore}
+          error={loadMoreError}
+          onLoadMore={loadMore}
+        />
+      )}
     </>
   );
 };
@@ -461,6 +500,10 @@ const StorageNamespaceSection: React.FC<{
     entries: fetchedEntries,
     isPending,
     error,
+    hasMore,
+    loadMore,
+    isLoadingMore,
+    loadMoreError,
     refetch,
   } = useStorageEntries(namespaceName);
 
@@ -559,6 +602,14 @@ const StorageNamespaceSection: React.FC<{
               />
             );
           })}
+          {hasMore && (
+            <LoadMoreStorageEntries
+              depth={1}
+              isLoading={isLoadingMore}
+              error={loadMoreError}
+              onLoadMore={loadMore}
+            />
+          )}
         </>
       )}
     </>

package/src/core/storage/__tests__/state.test.ts

@@ -48,6 +48,7 @@ describe("storage state", () => {
       expect(state).toEqual({
         namespaces: [],
         entriesByPath: new Map(),
+        pageMetadataByPath: new Map(),
       });
     });
   });
@@ -134,6 +135,49 @@ describe("storage state", () => {
       expect(state.entriesByPath.get("my_s3::data/")).toEqual(entries);
     });
 
+    it("should store next page tokens keyed by namespace and prefix", () => {
+      const entries = [makeEntry({ path: "a.txt" })];
+
+      actions.setEntries({
+        namespace: "my_s3",
+        prefix: "data/",
+        entries,
+        nextPageToken: "150",
+      });
+
+      expect(state.entriesByPath.get("my_s3::data/")).toEqual(entries);
+      expect(state.pageMetadataByPath.get("my_s3::data/")?.nextPageToken).toBe(
+        "150",
+      );
+    });
+
+    it("should append entries when requested", () => {
+      const firstPage = [makeEntry({ path: "a.txt" })];
+      const secondPage = [makeEntry({ path: "b.txt" })];
+
+      actions.setEntries({
+        namespace: "my_s3",
+        prefix: "data/",
+        entries: firstPage,
+        nextPageToken: "150",
+      });
+      actions.setEntries({
+        namespace: "my_s3",
+        prefix: "data/",
+        entries: secondPage,
+        nextPageToken: null,
+        append: true,
+      });
+
+      expect(state.entriesByPath.get("my_s3::data/")).toEqual([
+        ...firstPage,
+        ...secondPage,
+      ]);
+      expect(
+        state.pageMetadataByPath.get("my_s3::data/")?.nextPageToken,
+      ).toBeNull();
+    });
+
     it("should use empty string for null prefix", () => {
       const entries = [makeEntry({ path: "root.txt" })];
 
@@ -251,6 +295,11 @@ describe("storage state", () => {
       expect(state.entriesByPath.get("my_s3::")).toBeUndefined();
       expect(state.entriesByPath.get("my_s3::data/")).toBeUndefined();
       expect(state.entriesByPath.get("my_s3::data/nested/")).toBeUndefined();
+      expect(state.pageMetadataByPath.get("my_s3::")).toBeUndefined();
+      expect(state.pageMetadataByPath.get("my_s3::data/")).toBeUndefined();
+      expect(
+        state.pageMetadataByPath.get("my_s3::data/nested/"),
+      ).toBeUndefined();
     });
 
     it("should not affect entries from other namespaces", () => {

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,