@marimo-team/frontend 0.19.8-dev0 → 0.19.8-dev10

package/src/components/pages/gallery-page.tsx

@@ -0,0 +1,158 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { SearchIcon } from "lucide-react";
+import type React from "react";
+import { Suspense, useMemo, useState } from "react";
+import { ErrorBoundary } from "@/components/editor/boundary/ErrorBoundary";
+import { Spinner } from "@/components/icons/spinner";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { getSessionId } from "@/core/kernel/session";
+import { useRequestClient } from "@/core/network/requests";
+import { useAsyncData } from "@/hooks/useAsyncData";
+import { Banner } from "@/plugins/impl/common/error-banner";
+import { prettyError } from "@/utils/errors";
+import { PathBuilder, Paths } from "@/utils/paths";
+import { asURL } from "@/utils/url";
+
+const capitalize = (word: string): string => {
+  return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+};
+
+const titleCase = (path: string): string => {
+  const delimiter = PathBuilder.guessDeliminator(path).deliminator;
+  return path
+    .replace(/\.[^./]+$/, "")
+    .split(delimiter)
+    .filter(Boolean)
+    .map((part) => part.split(/[_-]/).map(capitalize).join(" "))
+    .join(" > ");
+};
+
+const tabTarget = (path: string): string => {
+  return `${getSessionId()}-${encodeURIComponent(path)}`;
+};
+
+const SEARCH_THRESHOLD = 10;
+
+const GalleryPage: React.FC = () => {
+  const { getWorkspaceFiles } = useRequestClient();
+  const [searchQuery, setSearchQuery] = useState("");
+  const response = useAsyncData(
+    () => getWorkspaceFiles({ includeMarkdown: false }),
+    [],
+  );
+  const workspace = response.data;
+  const files = workspace?.files ?? [];
+  const root = workspace?.root ?? "";
+
+  const formattedFiles = useMemo(() => {
+    return files
+      .filter((file) => !file.isDirectory)
+      .map((file) => {
+        const relativePath =
+          root && Paths.isAbsolute(file.path) && file.path.startsWith(root)
+            ? Paths.rest(file.path, root)
+            : file.path;
+        const title = titleCase(Paths.basename(relativePath));
+        const subtitle = titleCase(Paths.dirname(relativePath));
+        return {
+          ...file,
+          relativePath,
+          title,
+          subtitle,
+        };
+      })
+      .sort((a, b) => a.relativePath.localeCompare(b.relativePath));
+  }, [files, root]);
+
+  const filteredFiles = useMemo(() => {
+    if (!searchQuery) {
+      return formattedFiles;
+    }
+    const query = searchQuery.toLowerCase();
+    return formattedFiles.filter((file) =>
+      file.title.toLowerCase().includes(query),
+    );
+  }, [formattedFiles, searchQuery]);
+
+  if (response.isPending) {
+    return <Spinner centered={true} size="xlarge" className="mt-6" />;
+  }
+
+  if (response.error) {
+    return (
+      <Banner kind="danger" className="rounded p-4">
+        {prettyError(response.error)}
+      </Banner>
+    );
+  }
+
+  if (!workspace) {
+    return <Spinner centered={true} size="xlarge" className="mt-6" />;
+  }
+
+  return (
+    <Suspense>
+      <div className="flex flex-col gap-6 max-w-6xl container pt-5 pb-20 z-10">
+        <img src="logo.png" alt="marimo logo" className="w-48 mb-2" />
+        <ErrorBoundary>
+          <div className="flex flex-col gap-2">
+            {workspace.hasMore && (
+              <Banner kind="warn" className="rounded p-4">
+                Showing first {workspace.fileCount} files. Your workspace has
+                more files.
+              </Banner>
+            )}
+            {formattedFiles.length > SEARCH_THRESHOLD && (
+              <Input
+                id="search"
+                value={searchQuery}
+                icon={<SearchIcon className="h-4 w-4" />}
+                onChange={(event) => setSearchQuery(event.target.value)}
+                placeholder="Search"
+                rootClassName="mb-3"
+                className="mb-0 border-border"
+              />
+            )}
+            {filteredFiles.length === 0 ? (
+              <Banner kind="warn" className="rounded p-4">
+                No marimo apps found.
+              </Banner>
+            ) : (
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                {filteredFiles.map((file) => (
+                  <a
+                    key={file.path}
+                    href={asURL(
+                      `?file=${encodeURIComponent(file.relativePath)}`,
+                    ).toString()}
+                    target={tabTarget(file.path)}
+                    className="no-underline"
+                  >
+                    <Card className="h-full hover:bg-accent/20 transition-colors">
+                      <CardContent className="p-6">
+                        <div className="flex flex-col gap-1">
+                          {file.subtitle && (
+                            <div className="text-sm font-semibold text-muted-foreground">
+                              {file.subtitle}
+                            </div>
+                          )}
+                          <div className="text-lg font-medium">
+                            {file.title}
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+        </ErrorBoundary>
+      </div>
+    </Suspense>
+  );
+};
+
+export default GalleryPage;

package/src/core/MarimoApp.tsx

@@ -34,14 +34,23 @@ const LazyRunPage = reactLazyWithPreload(
 const LazyEditPage = reactLazyWithPreload(
   () => import("@/components/pages/edit-page"),
 );
+const LazyGalleryPage = reactLazyWithPreload(
+  () => import("@/components/pages/gallery-page"),
+);
 
 export function preloadPage(mode: string) {
-  if (mode === "home") {
-    LazyHomePage.preload();
-  } else if (mode === "read") {
-    LazyRunPage.preload();
-  } else {
-    LazyEditPage.preload();
+  switch (mode) {
+    case "home":
+      LazyHomePage.preload();
+      break;
+    case "gallery":
+      LazyGalleryPage.preload();
+      break;
+    case "read":
+      LazyRunPage.preload();
+      break;
+    default:
+      LazyEditPage.preload();
   }
 }
 
@@ -58,6 +67,9 @@ export const MarimoApp: React.FC = memo(() => {
     if (initialMode === "home") {
       return <LazyHomePage.Component />;
     }
+    if (initialMode === "gallery") {
+      return <LazyGalleryPage.Component />;
+    }
     if (initialMode === "read") {
       return <LazyRunPage.Component appConfig={appConfig} />;
     }

package/src/core/islands/__tests__/bridge.test.ts

@@ -0,0 +1,241 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock browser APIs before any imports
+vi.stubGlobal(
+  "Worker",
+  vi.fn(() => ({
+    addEventListener: vi.fn(),
+    postMessage: vi.fn(),
+    terminate: vi.fn(),
+  })),
+);
+
+// Create a mock URL class that works as a constructor
+class MockURL {
+  href: string;
+  constructor(url: string, base?: string | URL) {
+    this.href = base ? `${base}/${url}` : url;
+  }
+  static createObjectURL = vi.fn(() => "blob:mock-url");
+  static revokeObjectURL = vi.fn();
+}
+vi.stubGlobal("URL", MockURL);
+
+// Mock the worker RPC before importing the bridge
+const mockBridge = vi.fn();
+const mockLoadPackages = vi.fn();
+
+vi.mock("@/core/wasm/rpc", () => ({
+  getWorkerRPC: () => ({
+    proxy: {
+      request: {
+        bridge: mockBridge,
+        loadPackages: mockLoadPackages,
+        startSession: vi.fn(),
+      },
+      send: {
+        consumerReady: vi.fn(),
+      },
+    },
+    addMessageListener: vi.fn(),
+  }),
+}));
+
+// Mock the parse module to avoid DOM dependencies
+vi.mock("../parse", () => ({
+  parseMarimoIslandApps: () => [],
+  createMarimoFile: vi.fn(),
+}));
+
+// Mock uuid to have predictable tokens
+vi.mock("@/utils/uuid", () => ({
+  generateUUID: () => "test-uuid-12345",
+}));
+
+// Mock getMarimoVersion
+vi.mock("@/core/meta/globals", () => ({
+  getMarimoVersion: () => "0.0.0-test",
+}));
+
+// Mock the jotai store
+vi.mock("@/core/state/jotai", () => ({
+  store: {
+    set: vi.fn(),
+  },
+}));
+
+// Now import the bridge class
+import { IslandsPyodideBridge } from "../bridge";
+
+describe("IslandsPyodideBridge", () => {
+  let bridge: IslandsPyodideBridge;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset the singleton by clearing the window property
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (window as any)._marimo_private_IslandsPyodideBridge;
+    // Access the singleton - creates a fresh instance
+    bridge = IslandsPyodideBridge.INSTANCE;
+  });
+
+  afterEach(() => {
+    // Clean up singleton
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (window as any)._marimo_private_IslandsPyodideBridge;
+  });
+
+  describe("sendComponentValues", () => {
+    it("should include type field and token in control request", async () => {
+      const request = {
+        objectIds: ["Hbol-0"],
+        values: [58],
+      };
+
+      await bridge.sendComponentValues(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: {
+          type: "update-ui-element",
+          objectIds: ["Hbol-0"],
+          values: [58],
+          token: "test-uuid-12345",
+        },
+      });
+    });
+
+    it("should preserve all request properties", async () => {
+      const request = {
+        objectIds: ["slider-1", "slider-2"],
+        values: [10, 20],
+      };
+
+      await bridge.sendComponentValues(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: expect.objectContaining({
+          type: "update-ui-element",
+          objectIds: ["slider-1", "slider-2"],
+          values: [10, 20],
+        }),
+      });
+    });
+  });
+
+  describe("sendFunctionRequest", () => {
+    it("should include type field in control request", async () => {
+      const request = {
+        functionCallId: "call-123",
+        namespace: "test_namespace",
+        functionName: "my_function",
+        args: { x: 1, y: 2 },
+      };
+
+      await bridge.sendFunctionRequest(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: {
+          type: "invoke-function",
+          functionCallId: "call-123",
+          namespace: "test_namespace",
+          functionName: "my_function",
+          args: { x: 1, y: 2 },
+        },
+      });
+    });
+  });
+
+  describe("sendRun", () => {
+    it("should include type field in control request", async () => {
+      const request = {
+        cellIds: ["cell-1", "cell-2"],
+        codes: ["print('hello')", "print('world')"],
+      };
+
+      await bridge.sendRun(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: {
+          type: "execute-cells",
+          cellIds: ["cell-1", "cell-2"],
+          codes: ["print('hello')", "print('world')"],
+        },
+      });
+    });
+
+    it("should call loadPackages before putControlRequest", async () => {
+      const request = {
+        cellIds: ["cell-1"],
+        codes: ["import pandas"],
+      };
+
+      await bridge.sendRun(request);
+
+      // Verify loadPackages was called with joined codes
+      expect(mockLoadPackages).toHaveBeenCalledWith("import pandas");
+
+      // Verify order: loadPackages should be called before bridge
+      const loadPackagesCallOrder =
+        mockLoadPackages.mock.invocationCallOrder[0];
+      const bridgeCallOrder = mockBridge.mock.invocationCallOrder[0];
+      expect(loadPackagesCallOrder).toBeLessThan(bridgeCallOrder);
+    });
+  });
+
+  describe("sendModelValue", () => {
+    it("should include type field in control request", async () => {
+      const request = {
+        modelId: "widget-1",
+        message: {
+          state: { value: 42 },
+          bufferPaths: [],
+        },
+      };
+
+      await bridge.sendModelValue(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: {
+          type: "update-widget-model",
+          modelId: "widget-1",
+          message: {
+            state: { value: 42 },
+            bufferPaths: [],
+          },
+        },
+      });
+    });
+  });
+
+  describe("control request message format", () => {
+    it("should always include the type field required by msgspec", async () => {
+      // Test all methods to ensure they include the type field
+      await bridge.sendComponentValues({ objectIds: [], values: [] });
+      await bridge.sendFunctionRequest({
+        functionCallId: "",
+        namespace: "",
+        functionName: "",
+        args: {},
+      });
+      await bridge.sendRun({ cellIds: [], codes: [] });
+      await bridge.sendModelValue({
+        modelId: "",
+        message: { state: {}, bufferPaths: [] },
+      });
+
+      // All calls should have the type field
+      const allCalls = mockBridge.mock.calls;
+      for (const call of allCalls) {
+        const payload = call[0].payload;
+        expect(payload).toHaveProperty("type");
+        expect(typeof payload.type).toBe("string");
+      }
+    });
+  });
+});

package/src/core/islands/bridge.ts

@@ -6,7 +6,8 @@ import { Deferred } from "@/utils/Deferred";
 import { throwNotImplemented } from "@/utils/functions";
 import type { JsonString } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
-import type { NotificationPayload } from "../kernel/messages";
+import { generateUUID } from "@/utils/uuid";
+import type { CommandMessage, NotificationPayload } from "../kernel/messages";
 import { getMarimoVersion } from "../meta/globals";
 import type { EditRequests, RunRequests } from "../network/types";
 import { store } from "../state/jotai";
@@ -104,7 +105,11 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   sendComponentValues: RunRequests["sendComponentValues"] = async (
     request,
   ): Promise<null> => {
-    await this.putControlRequest(request);
+    await this.putControlRequest({
+      type: "update-ui-element",
+      ...request,
+      token: generateUUID(),
+    });
     return null;
   };
 
@@ -117,18 +122,27 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   sendFunctionRequest: RunRequests["sendFunctionRequest"] = async (
     request,
   ): Promise<null> => {
-    await this.putControlRequest(request);
+    await this.putControlRequest({
+      type: "invoke-function",
+      ...request,
+    });
     return null;
   };
 
   sendRun: EditRequests["sendRun"] = async (request): Promise<null> => {
     await this.rpc.proxy.request.loadPackages(request.codes.join("\n"));
-    await this.putControlRequest(request);
+    await this.putControlRequest({
+      type: "execute-cells",
+      ...request,
+    });
     return null;
   };
 
   sendModelValue: RunRequests["sendModelValue"] = async (request) => {
-    await this.putControlRequest(request);
+    await this.putControlRequest({
+      type: "update-widget-model",
+      ...request,
+    });
     return null;
   };
 
@@ -187,7 +201,9 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   clearCache = throwNotImplemented;
   getCacheInfo = throwNotImplemented;
 
-  private async putControlRequest(operation: object) {
+  // The kernel uses msgspec to parse control requests, which requires a 'type'
+  // field for discriminated union deserialization.
+  private async putControlRequest(operation: CommandMessage) {
     await this.rpc.proxy.request.bridge({
       functionName: "put_control_request",
       payload: operation,

package/src/core/mode.ts

@@ -13,8 +13,9 @@ import { store } from "./state/jotai";
  * - `edit`: A user is editing the notebook. Can switch to present mode.
  * - `present`: A user is presenting the notebook, it looks like read mode but with some editing features. Cannot switch to present mode.
  * - `home`: A user is in the home page.
+ * - `gallery`: A user is in the gallery page.
  */
-export type AppMode = "read" | "edit" | "present" | "home";
+export type AppMode = "read" | "edit" | "present" | "home" | "gallery";
 
 export function getInitialAppMode(): Exclude<AppMode, "present"> {
   const initialMode = store.get(initialModeAtom);
@@ -28,8 +29,8 @@ export function getInitialAppMode(): Exclude<AppMode, "present"> {
 
 export function toggleAppMode(mode: AppMode): AppMode {
   // Can't switch to present mode.
-  if (mode === "read") {
-    return "read";
+  if (mode === "read" || mode === "home" || mode === "gallery") {
+    return mode;
   }
 
   return mode === "edit" ? "present" : "edit";

package/src/core/run-app.tsx

@@ -1,11 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
+import { ArrowLeftIcon } from "lucide-react";
 import { useEffect } from "react";
 import { AppContainer } from "@/components/editor/app-container";
 import { AppHeader } from "@/components/editor/header/app-header";
 import { Spinner } from "@/components/icons/spinner";
+import { buttonVariants } from "@/components/ui/button";
 import { DelayMount } from "@/components/utils/delay-mount";
+import { cn } from "@/utils/cn";
 import { CellsRenderer } from "../components/editor/renderers/cells-renderer";
 import { notebookIsRunningAtom, useCellActions } from "./cells/cells";
 import type { AppConfig } from "./config/config-schema";
@@ -56,13 +59,42 @@ export const RunApp: React.FC<AppProps> = ({ appConfig }) => {
     return <CellsRenderer appConfig={appConfig} mode="read" />;
   };
 
+  const galleryHref = (() => {
+    if (typeof window === "undefined") {
+      return null;
+    }
+    const url = new URL(window.location.href);
+    if (!url.searchParams.has("file")) {
+      return null;
+    }
+    url.searchParams.delete("file");
+    const search = url.searchParams.toString();
+    return search ? `${url.pathname}?${search}` : url.pathname;
+  })();
+
   return (
     <AppContainer
       connection={connection}
       isRunning={isRunning}
       width={appConfig.width}
     >
-      <AppHeader connection={connection} className={"sm:pt-8"} />
+      <AppHeader connection={connection} className="sm:pt-8">
+        {galleryHref && (
+          <div className="flex items-center px-6 pt-4 sm:-mt-8">
+            <a
+              href={galleryHref}
+              aria-label="Back to gallery"
+              className={cn(
+                buttonVariants({ variant: "text", size: "sm" }),
+                "gap-2 px-0 text-muted-foreground hover:text-foreground",
+              )}
+            >
+              <ArrowLeftIcon className="size-4" aria-hidden={true} />
+              <span>Back</span>
+            </a>
+          </div>
+        )}
+      </AppHeader>
       {renderCells()}
     </AppContainer>
   );

package/src/mount.tsx

@@ -153,14 +153,16 @@ const mountOptionsSchema = z.object({
     .nullish()
     .transform((val) => val ?? "unknown"),
   /**
-   * 'edit' or 'read'/'run' or 'home'
+   * 'edit' or 'read'/'run' or 'home' or 'gallery'
    */
-  mode: z.enum(["edit", "read", "home", "run"]).transform((val): AppMode => {
-    if (val === "run") {
-      return "read";
-    }
-    return val;
-  }),
+  mode: z
+    .enum(["edit", "read", "home", "run", "gallery"])
+    .transform((val): AppMode => {
+      if (val === "run") {
+        return "read";
+      }
+      return val;
+    }),
   /**
    * marimo config
    */

package/src/plugins/core/registerReactComponent.tsx

@@ -101,10 +101,17 @@ function PluginSlotInternal<T>(
     return plugin.validator.safeParse(parseDataset(hostElement));
   });
 
+  // Incremented on each reset to invalidate memoized function references.
+  // This ensures that plugin functions (e.g., search) are re-created when
+  // the underlying UI element instance changes (new object-id), even if
+  // the element's data attributes haven't changed.
+  const [resetNonce, setResetNonce] = useState(0);
+
   useImperativeHandle(ref, () => ({
     reset: () => {
       setValue(getInitialValue());
       setParsedResult(plugin.validator.safeParse(parseDataset(hostElement)));
+      setResetNonce((n) => n + 1);
     },
     setChildren: (children) => {
       setChildNodes(children);
@@ -224,7 +231,8 @@ function PluginSlotInternal<T>(
     }
 
     return methods;
-  }, [plugin.functions, hostElement]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [plugin.functions, hostElement, resetNonce]);
 
   // If we failed to parse the initial value, render an error
   if (!parsedResult.success) {