@marimo-team/islands 0.19.8-dev3 → 0.19.8-dev31

package/src/core/config/feature-flag.tsx

@@ -9,8 +9,6 @@ export interface ExperimentalFeatures {
   markdown: boolean; // Used in playground (community cloud)
   wasm_layouts: boolean; // Used in playground (community cloud)
   rtc_v2: boolean;
-  performant_table_charts: boolean;
-  chat_modes: boolean;
   cache_panel: boolean;
   external_agents: boolean;
   server_side_pdf_export: boolean;
@@ -21,8 +19,6 @@ const defaultValues: ExperimentalFeatures = {
   markdown: true,
   wasm_layouts: false,
   rtc_v2: false,
-  performant_table_charts: false,
-  chat_modes: false,
   cache_panel: false,
   external_agents: import.meta.env.DEV,
   server_side_pdf_export: true,

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/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";
@@ -75,15 +78,19 @@ export const RunApp: React.FC<AppProps> = ({ appConfig }) => {
       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">
+          <div className="flex items-center px-6 pt-4 sm:-mt-8">
             <a
               href={galleryHref}
               aria-label="Back to gallery"
-              className="inline-flex items-center"
+              className={cn(
+                buttonVariants({ variant: "text", size: "sm" }),
+                "gap-2 px-0 text-muted-foreground hover:text-foreground",
+              )}
             >
-              <img src="logo.png" alt="marimo logo" className="h-6 w-auto" />
+              <ArrowLeftIcon className="size-4" aria-hidden={true} />
+              <span>Back</span>
             </a>
           </div>
         )}

package/src/core/static/__tests__/files.test.ts

@@ -6,7 +6,7 @@ import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
 import { createLoader } from "@/plugins/impl/vega/vega-loader";
 import { Functions } from "@/utils/functions";
 import type { DataURLString } from "@/utils/json/base64";
-import { patchFetch, patchVegaLoader } from "../files";
+import { patchFetch, patchVegaLoader, resolveVirtualFileURL } from "../files";
 
 // Start a tiny server to serve virtual files
 const server = http.createServer((request, response) => {
@@ -350,6 +350,181 @@ describe("patchVegaLoader - loader.load", () => {
   });
 });
 
+describe("resolveVirtualFileURL", () => {
+  // Mock URL.createObjectURL for jsdom environment
+  const mockBlobURLs = new Map<string, Blob>();
+  let blobCounter = 0;
+
+  beforeAll(() => {
+    URL.createObjectURL = vi.fn((blob: Blob) => {
+      const url = `blob:test-${blobCounter++}`;
+      mockBlobURLs.set(url, blob);
+      return url;
+    });
+    URL.revokeObjectURL = vi.fn((url: string) => {
+      mockBlobURLs.delete(url);
+    });
+  });
+
+  afterAll(() => {
+    mockBlobURLs.clear();
+  });
+
+  it("should return a blob URL for virtual files", () => {
+    const virtualFiles = {
+      "/@file/widget.js":
+        "data:text/javascript;base64,ZXhwb3J0IGRlZmF1bHQgeyByZW5kZXI6ICgpID0+IHt9IH0=" as DataURLString,
+    };
+
+    const result = resolveVirtualFileURL("/@file/widget.js", virtualFiles);
+
+    expect(result).toMatch(/^blob:/);
+  });
+
+  it("should return the original URL for non-virtual files", () => {
+    const virtualFiles = {};
+
+    const result = resolveVirtualFileURL(
+      "http://example.com/widget.js",
+      virtualFiles,
+    );
+
+    expect(result).toBe("http://example.com/widget.js");
+  });
+
+  it("should handle various URL formats", () => {
+    const virtualFiles = {
+      "/@file/module.js":
+        "data:text/javascript;base64,Y29uc29sZS5sb2coJ3Rlc3QnKQ==" as DataURLString,
+    };
+
+    const testUrls = [
+      "/@file/module.js",
+      "./@file/module.js",
+      "http://example.com/@file/module.js",
+    ];
+
+    for (const url of testUrls) {
+      const result = resolveVirtualFileURL(url, virtualFiles);
+      expect(result).toMatch(/^blob:/);
+    }
+  });
+
+  it("should create blob URL with correct content", async () => {
+    const jsCode = "export default { render: () => {} }";
+    const base64Code = btoa(jsCode);
+    const virtualFiles = {
+      "/@file/test-module.js":
+        `data:text/javascript;base64,${base64Code}` as DataURLString,
+    };
+
+    const blobUrl = resolveVirtualFileURL(
+      "/@file/test-module.js",
+      virtualFiles,
+    );
+
+    expect(blobUrl).toMatch(/^blob:/);
+    expect(URL.createObjectURL).toHaveBeenCalled();
+
+    // Verify blob content through the mock
+    const blob = mockBlobURLs.get(blobUrl);
+    expect(blob).toBeDefined();
+    const text = await blob!.text();
+    expect(text).toBe(jsCode);
+  });
+
+  it("should handle file:// URLs with @file/ paths", () => {
+    const virtualFiles = {
+      "/@file/local-module.js":
+        "data:text/javascript;base64,ZXhwb3J0IGRlZmF1bHQge30=" as DataURLString,
+    };
+
+    const result = resolveVirtualFileURL(
+      "file:///Users/test/@file/local-module.js",
+      virtualFiles,
+    );
+
+    expect(result).toMatch(/^blob:/);
+  });
+
+  it("should handle different MIME types", async () => {
+    const virtualFiles = {
+      "/@file/script.js":
+        "data:application/javascript;base64,Y29uc3QgeCA9IDE=" as DataURLString,
+    };
+
+    const blobUrl = resolveVirtualFileURL("/@file/script.js", virtualFiles);
+
+    // Should still be a valid blob URL
+    expect(blobUrl).toMatch(/^blob:/);
+
+    // Verify blob content through the mock
+    const blob = mockBlobURLs.get(blobUrl);
+    expect(blob).toBeDefined();
+    const text = await blob!.text();
+    expect(text).toBe("const x = 1");
+  });
+
+  it("should handle blob: base URIs correctly", () => {
+    // Mock document.baseURI to simulate blob: protocol
+    const originalBaseURI = document.baseURI;
+    Object.defineProperty(document, "baseURI", {
+      value: "blob:https://example.com/uuid",
+      configurable: true,
+    });
+
+    const virtualFiles = {
+      "/@file/blob-module.js":
+        "data:text/javascript;base64,ZXhwb3J0IGRlZmF1bHQge30=" as DataURLString,
+    };
+
+    const result = resolveVirtualFileURL("/@file/blob-module.js", virtualFiles);
+
+    expect(result).toMatch(/^blob:/);
+
+    // Restore original baseURI
+    Object.defineProperty(document, "baseURI", {
+      value: originalBaseURI,
+      configurable: true,
+    });
+  });
+
+  it("should handle data URLs with no explicit MIME type", async () => {
+    const virtualFiles = {
+      "/@file/generic.bin": "data:;base64,SGVsbG8gV29ybGQ=" as DataURLString,
+    };
+
+    const blobUrl = resolveVirtualFileURL("/@file/generic.bin", virtualFiles);
+    expect(blobUrl).toMatch(/^blob:/);
+
+    // Verify blob content through the mock
+    const blob = mockBlobURLs.get(blobUrl);
+    expect(blob).toBeDefined();
+    const text = await blob!.text();
+    expect(text).toBe("Hello World");
+  });
+
+  it("should match URLs with prefix paths before /@file/", async () => {
+    const virtualFiles = {
+      "/@file/4263-66-yUGhgQXp.js":
+        "data:application/javascript;base64,ZnVuY3Rpb24gcmVuZGVyKCkge30=" as DataURLString,
+    };
+
+    const blobUrl = resolveVirtualFileURL(
+      "https://molab.marimo.app/preview/@file/4263-66-yUGhgQXp.js",
+      virtualFiles,
+    );
+
+    expect(blobUrl).toMatch(/^blob:/);
+
+    // Verify blob content through the mock
+    const blob = mockBlobURLs.get(blobUrl);
+    expect(blob).toBeDefined();
+    const text = await blob!.text();
+    expect(text).toBe("function render() {}");
+  });
+});
+
 describe("maybeGetVirtualFile utility function", () => {
   it("should handle URLs without leading dots correctly", async () => {
     const virtualFiles = {
@@ -370,6 +545,25 @@ describe("maybeGetVirtualFile utility function", () => {
     expect(text2).toBe("test");
   });
 
+  it("should match URLs with prefix paths before /@file/", async () => {
+    const virtualFiles = {
+      "/@file/4263-66-yUGhgQXp.js":
+        "data:application/javascript;base64,ZnVuY3Rpb24gcmVuZGVyKCkge30=" as DataURLString,
+    };
+
+    const unpatch = patchFetch(virtualFiles);
+
+    // Test URL with a prefix path before /@file/
+    const response = await window.fetch(
+      "https://molab.marimo.app/preview/@file/4263-66-yUGhgQXp.js",
+    );
+    const text = await response.text();
+
+    expect(text).toBe("function render() {}");
+
+    unpatch();
+  });
+
   it("should handle complex file:// URLs with nested paths", async () => {
     const virtualFiles = {
       "/@file/nested/data.json":

package/src/core/static/files.ts

@@ -1,6 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { Loader } from "@/plugins/impl/vega/vega-loader";
+import { deserializeBlob } from "@/utils/blob";
+import type { DataURLString } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 import { getStaticVirtualFiles } from "./static-state";
 import type { StaticVirtualFiles } from "./types";
@@ -120,6 +122,24 @@ function withoutLeadingDot(path: string): string {
   return path.startsWith(".") ? path.slice(1) : path;
 }
 
+/**
+ * Resolve a URL to a blob URL if it's a virtual file, for use with dynamic import().
+ * Unlike fetch, import() can't be patched, so we need to convert data URLs to blob URLs.
+ *
+ * @returns The original URL if not a virtual file, or a blob URL if it is
+ */
+export function resolveVirtualFileURL(
+  url: string,
+  files: StaticVirtualFiles = getStaticVirtualFiles(),
+): string {
+  const vfile = maybeGetVirtualFile(url, files);
+  if (!vfile) {
+    return url;
+  }
+  const blob = deserializeBlob(vfile as DataURLString);
+  return URL.createObjectURL(blob);
+}
+
 function maybeGetVirtualFile(
   url: string,
   files: StaticVirtualFiles,
@@ -130,14 +150,11 @@ function maybeGetVirtualFile(
   }
   const pathname = new URL(url, base).pathname;
 
-  // If if the URL starts with file://, then using the document.baseURI
-  // will not work. In this case, should just chop off from /@file/...
-  if (url.startsWith("file://")) {
-    const indexOfFile = url.indexOf("/@file/");
-    if (indexOfFile !== -1) {
-      url = url.slice(indexOfFile);
-    }
-  }
+  // Extract the /@file/... suffix from the URL or pathname
+  // This handles URLs like https://example.com/prefix/@file/foo.js
+  // or file:///path/to/@file/foo.js
+  const filePathFromUrl = extractFilePath(url);
+  const filePathFromPathname = extractFilePath(pathname);
 
   // Few variations to grab the URL.
   // This can happen if a static file was open at file:// or https://
@@ -145,6 +162,19 @@ function maybeGetVirtualFile(
     files[url] ||
     files[withoutLeadingDot(url)] ||
     files[pathname] ||
-    files[withoutLeadingDot(pathname)]
+    files[withoutLeadingDot(pathname)] ||
+    (filePathFromUrl && files[filePathFromUrl]) ||
+    (filePathFromPathname && files[filePathFromPathname])
   );
 }
+
+/**
+ * Extract the /@file/... path from a URL string
+ */
+function extractFilePath(url: string): string | null {
+  const indexOfFile = url.indexOf("/@file/");
+  if (indexOfFile !== -1) {
+    return url.slice(indexOfFile);
+  }
+  return null;
+}

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