@marimo-team/frontend 0.23.1-dev9 → 0.23.2-dev25

package/src/core/islands/bridge.ts

@@ -8,100 +8,154 @@ import type { JsonString } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 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";
-
+import { store as defaultStore } from "../state/jotai";
 import { createMarimoFile, parseMarimoIslandApps } from "./parse";
 import { islandsInitializedAtom } from "./state";
 import type { WorkerSchema } from "./worker/worker";
-import workerUrl from "./worker/worker.tsx?worker&url";
+import type { WorkerFactory } from "./worker-factory";
+import { DefaultWorkerFactory } from "./worker-factory";
 
-export class IslandsPyodideBridge implements RunRequests, EditRequests {
+/**
+ * Configuration for creating an IslandsPyodideBridge
+ */
+export interface IslandsBridgeConfig {
   /**
-   * Lazy singleton instance of the IslandsPyodideBridge.
+   * Optional worker factory for creating workers (for testing)
    */
-  static get INSTANCE(): IslandsPyodideBridge {
-    const KEY = "_marimo_private_IslandsPyodideBridge";
-    if (!window[KEY]) {
-      window[KEY] = new IslandsPyodideBridge();
-    }
-    return window[KEY] as IslandsPyodideBridge;
-  }
+  workerFactory?: WorkerFactory;
 
+  /**
+   * Optional Jotai store (for testing)
+   */
+  store?: typeof defaultStore;
+
+  /**
+   * Optional root element for parsing islands (for testing)
+   */
+  root?: Document | Element;
+
+  /**
+   * Whether to auto-start sessions on worker ready (default: true)
+   */
+  autoStartSessions?: boolean;
+}
+
+/**
+ * Bridge between the browser and Pyodide worker for islands mode.
+ *
+ * This class manages communication with a Web Worker that runs Python code
+ * via Pyodide, enabling interactive marimo islands.
+ *
+ * @example
+ * ```ts
+ * const bridge = new IslandsPyodideBridge();
+ * await bridge.initialized;
+ * bridge.consumeMessages(message => console.log(message));
+ * ```
+ */
+export class IslandsPyodideBridge implements RunRequests, EditRequests {
   private rpc: ReturnType<typeof getWorkerRPC<WorkerSchema>>;
   private messageConsumer:
     | ((message: JsonString<NotificationPayload>) => void)
     | undefined;
+  private readonly store: typeof defaultStore;
+  private readonly root: Document | Element;
+  private readonly autoStartSessions: boolean;
 
   public initialized = new Deferred<void>();
 
-  private constructor() {
-    // TODO: abstract out into a worker constructor
-
-    // . in front of workerUrl is necessary to make it a relative import
-    const url = import.meta.env.DEV
-      ? workerUrl
-      : makeRelativeWorkerUrl(workerUrl);
-    const js = `import ${JSON.stringify(new URL(url, import.meta.url))}`;
-    const blob = new Blob([js], { type: "application/javascript" });
-    const objURL = URL.createObjectURL(blob);
-    const worker = new Worker(
-      // oxlint-disable-next-line unicorn/relative-url-style
-      objURL,
-      {
-        type: "module",
-        // Pass the version to the worker
-        /* @vite-ignore */
-        name: getMarimoVersion(),
-      },
-    );
+  constructor(config: IslandsBridgeConfig = {}) {
+    this.store = config.store || defaultStore;
+    this.root = config.root || document;
+    this.autoStartSessions = config.autoStartSessions ?? true;
 
-    worker.addEventListener("error", (e) => {
-      // Fallback to cleaning up created object URL
-      URL.revokeObjectURL(objURL);
-    });
-
-    // Create the RPC
-    this.rpc = getWorkerRPC<WorkerSchema>(worker);
+    try {
+      const factory = config.workerFactory || new DefaultWorkerFactory();
+      const worker = factory.create();
+      this.rpc = getWorkerRPC<WorkerSchema>(worker);
+      this.setupMessageListeners();
+    } catch (error) {
+      Logger.error("Failed to initialize IslandsPyodideBridge:", error);
+      this.initialized.reject(error);
+      throw error;
+    }
+  }
 
-    // Listeners
-    const apps = parseMarimoIslandApps();
+  /**
+   * Sets up message listeners for worker communication
+   */
+  private setupMessageListeners(): void {
     this.rpc.addMessageListener("ready", () => {
-      for (const app of apps) {
-        Logger.debug("Starting session for app", app.id);
-        const file = createMarimoFile(app);
-        Logger.debug(file);
-        this.startSession({
-          code: file,
-          appId: app.id,
-        });
+      if (this.autoStartSessions) {
+        this.startSessionsForAllApps();
       }
     });
+
     this.rpc.addMessageListener("initialized", () => {
-      store.set(islandsInitializedAtom, true);
+      this.store.set(islandsInitializedAtom, true);
       this.initialized.resolve();
     });
-    this.rpc.addMessageListener("initializedError", ({ error }) => {
-      store.set(islandsInitializedAtom, error);
-      this.initialized.reject(new Error(error));
-    });
-    this.rpc.addMessageListener("kernelMessage", ({ message }) => {
-      this.messageConsumer?.(message);
-    });
+
+    this.rpc.addMessageListener(
+      "initializedError",
+      ({ error }: { error: string }) => {
+        Logger.error("Islands initialization error:", error);
+        this.store.set(islandsInitializedAtom, error);
+        this.initialized.reject(new Error(error));
+      },
+    );
+
+    this.rpc.addMessageListener(
+      "kernelMessage",
+      ({ message }: { message: JsonString<NotificationPayload> }) => {
+        this.messageConsumer?.(message);
+      },
+    );
   }
 
-  async startSession(opts: { code: string; appId: string }) {
+  /**
+   * Starts sessions for all apps found in the DOM
+   */
+  private startSessionsForAllApps(): void {
+    const apps = parseMarimoIslandApps(this.root);
+    Logger.debug(
+      `Starting sessions for ${apps.length} app(s):`,
+      apps.map((a) => `${a.id} (${a.cells.length} cells)`),
+    );
+    for (const app of apps) {
+      const file = createMarimoFile(app);
+      Logger.debug(`App ${app.id} marimo file:\n`, file);
+      this.startSession({
+        code: file,
+        appId: app.id,
+      }).catch((error) => {
+        Logger.error(`Failed to start session for app ${app.id}:`, error);
+      });
+    }
+  }
+
+  /**
+   * Starts a new Python session for an app
+   */
+  async startSession(opts: { code: string; appId: string }): Promise<void> {
     await this.rpc.proxy.request.startSession(opts);
   }
 
+  /**
+   * Sets up a consumer for kernel messages
+   */
   consumeMessages(
     consumer: (message: JsonString<NotificationPayload>) => void,
-  ) {
+  ): void {
     this.messageConsumer = consumer;
     this.rpc.proxy.send.consumerReady({});
   }
 
+  // ============================================================================
+  // RunRequests Implementation
+  // ============================================================================
+
   sendComponentValues: RunRequests["sendComponentValues"] = async (
     request,
   ): Promise<null> => {
@@ -113,9 +167,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
     return null;
   };
 
-  sendInstantiate: RunRequests["sendInstantiate"] = async (
-    request,
-  ): Promise<null> => {
+  sendInstantiate: RunRequests["sendInstantiate"] = async (): Promise<null> => {
     return null;
   };
 
@@ -129,23 +181,31 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
     return null;
   };
 
-  sendRun: EditRequests["sendRun"] = async (request): Promise<null> => {
-    await this.rpc.proxy.request.loadPackages(request.codes.join("\n"));
+  sendModelValue: RunRequests["sendModelValue"] = async (request) => {
     await this.putControlRequest({
-      type: "execute-cells",
+      type: "model",
       ...request,
     });
     return null;
   };
 
-  sendModelValue: RunRequests["sendModelValue"] = async (request) => {
+  // ============================================================================
+  // EditRequests Implementation
+  // ============================================================================
+
+  sendRun: EditRequests["sendRun"] = async (request): Promise<null> => {
+    await this.rpc.proxy.request.loadPackages(request.codes.join("\n"));
     await this.putControlRequest({
-      type: "model",
+      type: "execute-cells",
       ...request,
     });
     return null;
   };
 
+  // ============================================================================
+  // Not Implemented (Read-Only Mode)
+  // ============================================================================
+
   getUsageStats = throwNotImplemented;
   sendRename = throwNotImplemented;
   sendSave = throwNotImplemented;
@@ -207,18 +267,37 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
 
   // The kernel uses msgspec to parse control requests, which requires a 'type'
   // field for discriminated union deserialization.
-  private async putControlRequest(operation: CommandMessage) {
+  private async putControlRequest(operation: CommandMessage): Promise<void> {
     await this.rpc.proxy.request.bridge({
       functionName: "put_control_request",
       payload: operation,
     });
   }
+
+  /**
+   * Cleans up resources (for testing)
+   */
+  destroy(): void {
+    // Future: terminate worker if we own it
+  }
+}
+
+/**
+ * Global singleton instance.
+ * Use `new IslandsPyodideBridge(config)` in tests for better isolation.
+ */
+let globalBridgeInstance: IslandsPyodideBridge | null = null;
+
+export function getGlobalBridge(): IslandsPyodideBridge {
+  if (!globalBridgeInstance) {
+    globalBridgeInstance = new IslandsPyodideBridge();
+  }
+  return globalBridgeInstance;
 }
 
-function makeRelativeWorkerUrl(url: string) {
-  return url.startsWith("./")
-    ? url
-    : url.startsWith("/")
-      ? `.${url}`
-      : `./${url}`;
+/**
+ * Resets the global bridge instance (for testing)
+ */
+export function resetGlobalBridge(): void {
+  globalBridgeInstance = null;
 }

package/src/core/islands/components/IslandControls.tsx

@@ -0,0 +1,103 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { CopyIcon, PlayIcon } from "lucide-react";
+import type { JSX } from "react";
+import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/ui/tooltip";
+import type { CellId } from "@/core/cells/ids";
+import { useRequestClient } from "@/core/network/requests";
+import { copyToClipboard } from "@/utils/copy";
+import { Logger } from "@/utils/Logger";
+
+/**
+ * Props for IslandControls component
+ */
+export interface IslandControlsProps {
+  /**
+   * ID of the cell this control operates on
+   */
+  cellId: CellId;
+
+  /**
+   * Callback to get the current code for the cell
+   */
+  codeCallback: () => string;
+
+  /**
+   * Whether the controls should be visible
+   */
+  visible: boolean;
+}
+
+/**
+ * Props for individual control buttons
+ */
+interface IconButtonProps {
+  tooltip: string;
+  icon: JSX.Element;
+  action: () => void;
+}
+
+/**
+ * A single icon button with tooltip
+ */
+const IconButton: React.FC<IconButtonProps> = ({ tooltip, icon, action }) => (
+  <Tooltip content={tooltip} delayDuration={200}>
+    <Button
+      size="icon"
+      variant="outline"
+      className="bg-background h-5 w-5 mb-0"
+      onClick={action}
+    >
+      {icon}
+    </Button>
+  </Tooltip>
+);
+
+/**
+ * Controls for interacting with an island cell.
+ *
+ * Provides buttons to:
+ * - Copy the cell's code to clipboard
+ * - Re-run the cell
+ */
+export const IslandControls: React.FC<IslandControlsProps> = ({
+  cellId,
+  codeCallback,
+  visible,
+}) => {
+  const { sendRun } = useRequestClient();
+
+  const handleCopy = () => {
+    copyToClipboard(codeCallback());
+  };
+
+  const handleRun = async () => {
+    try {
+      await sendRun({
+        cellIds: [cellId],
+        codes: [codeCallback()],
+      });
+    } catch (error) {
+      Logger.error("Failed to run cell:", error);
+    }
+  };
+
+  return (
+    <div
+      className="absolute top-0 right-0 z-50 flex items-center justify-center gap-1"
+      style={{ display: visible ? "flex" : "none" }}
+    >
+      <IconButton
+        tooltip="Copy code"
+        icon={<CopyIcon className="size-3" />}
+        action={handleCopy}
+      />
+      <IconButton
+        tooltip="Re-run cell"
+        icon={<PlayIcon className="size-3" />}
+        action={handleRun}
+      />
+    </div>
+  );
+};

package/src/core/islands/components/__tests__/IslandControls.test.tsx

@@ -0,0 +1,185 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { CellId } from "@/core/cells/ids";
+import * as requestsModule from "@/core/network/requests";
+import * as copyModule from "@/utils/copy";
+import { IslandControls } from "../IslandControls";
+
+// Mock the dependencies
+vi.mock("@/core/network/requests", () => ({
+  useRequestClient: vi.fn(),
+}));
+
+vi.mock("@/utils/copy", () => ({
+  copyToClipboard: vi.fn(),
+}));
+
+describe("IslandControls", () => {
+  const mockSendRun = vi.fn();
+  const mockCopyToClipboard = vi.fn();
+  const mockCodeCallback = vi.fn(() => "print('test code')");
+  const cellId = "test-cell-id" as CellId;
+
+  // Helper to render with required providers
+  const renderWithProviders = (component: React.ReactElement) => {
+    return render(<TooltipProvider>{component}</TooltipProvider>);
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockSendRun.mockResolvedValue(undefined);
+
+    vi.spyOn(requestsModule, "useRequestClient").mockReturnValue({
+      sendRun: mockSendRun,
+    } as any);
+
+    vi.spyOn(copyModule, "copyToClipboard").mockImplementation(
+      mockCopyToClipboard,
+    );
+  });
+
+  it("should not display when visible is false", () => {
+    const { container } = renderWithProviders(
+      <IslandControls
+        cellId={cellId}
+        codeCallback={mockCodeCallback}
+        visible={false}
+      />,
+    );
+
+    const controlsDiv = container.firstChild as HTMLElement;
+    expect(controlsDiv).toBeDefined();
+    expect(controlsDiv.style.display).toBe("none");
+  });
+
+  it("should display when visible is true", () => {
+    const { container } = renderWithProviders(
+      <IslandControls
+        cellId={cellId}
+        codeCallback={mockCodeCallback}
+        visible={true}
+      />,
+    );
+
+    const controlsDiv = container.firstChild as HTMLElement;
+    expect(controlsDiv.style.display).toBe("flex");
+  });
+
+  it("should render copy and run buttons", () => {
+    renderWithProviders(
+      <IslandControls
+        cellId={cellId}
+        codeCallback={mockCodeCallback}
+        visible={true}
+      />,
+    );
+
+    // Should have 2 buttons (copy and run)
+    const buttons = screen.getAllByRole("button");
+    expect(buttons).toHaveLength(2);
+  });
+
+  it("should copy code to clipboard when copy button is clicked", async () => {
+    renderWithProviders(
+      <IslandControls
+        cellId={cellId}
+        codeCallback={mockCodeCallback}
+        visible={true}
+      />,
+    );
+
+    const buttons = screen.getAllByRole("button");
+    const copyButton = buttons[0]; // First button is copy
+
+    fireEvent.click(copyButton);
+
+    expect(mockCodeCallback).toHaveBeenCalled();
+    expect(mockCopyToClipboard).toHaveBeenCalledWith("print('test code')");
+  });
+
+  it("should run cell when run button is clicked", async () => {
+    renderWithProviders(
+      <IslandControls
+        cellId={cellId}
+        codeCallback={mockCodeCallback}
+        visible={true}
+      />,
+    );
+
+    const buttons = screen.getAllByRole("button");
+    const runButton = buttons[1]; // Second button is run
+
+    fireEvent.click(runButton);
+
+    // Wait for async operation
+    await vi.waitFor(() => {
+      expect(mockCodeCallback).toHaveBeenCalled();
+      expect(mockSendRun).toHaveBeenCalledWith({
+        cellIds: [cellId],
+        codes: ["print('test code')"],
+      });
+    });
+  });
+
+  it("should handle run errors gracefully", async () => {
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    mockSendRun.mockRejectedValueOnce(new Error("Run failed"));
+
+    renderWithProviders(
+      <IslandControls
+        cellId={cellId}
+        codeCallback={mockCodeCallback}
+        visible={true}
+      />,
+    );
+
+    const buttons = screen.getAllByRole("button");
+    const runButton = buttons[1];
+
+    fireEvent.click(runButton);
+
+    // Wait for error to be logged
+    await vi.waitFor(() => {
+      expect(consoleErrorSpy).toHaveBeenCalled();
+    });
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("should get fresh code on each button click", async () => {
+    let callCount = 0;
+    const dynamicCodeCallback = vi.fn(() => `code version ${++callCount}`);
+
+    renderWithProviders(
+      <IslandControls
+        cellId={cellId}
+        codeCallback={dynamicCodeCallback}
+        visible={true}
+      />,
+    );
+
+    const buttons = screen.getAllByRole("button");
+    const copyButton = buttons[0];
+    const runButton = buttons[1];
+
+    fireEvent.click(copyButton);
+    expect(mockCopyToClipboard).toHaveBeenCalledWith("code version 1");
+
+    fireEvent.click(runButton);
+    await vi.waitFor(() => {
+      expect(mockSendRun).toHaveBeenCalledWith({
+        cellIds: [cellId],
+        codes: ["code version 2"],
+      });
+    });
+
+    fireEvent.click(copyButton);
+    expect(mockCopyToClipboard).toHaveBeenCalledWith("code version 3");
+  });
+});