@marimo-team/islands 0.25.3-dev29 → 0.25.3-dev291

package/src/core/islands/components/__tests__/web-components.test.tsx

@@ -9,6 +9,7 @@ import {
   describe,
   expect,
   it,
+  vi,
 } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import { MockNotebook } from "@/__mocks__/notebook";
@@ -22,6 +23,7 @@ import {
 import { islandsPendingInitialRunsAtom } from "@/core/islands/state";
 import { requestClientAtom } from "@/core/network/requests";
 import { store } from "@/core/state/jotai";
+import { buildIslandHTML } from "../../__tests__/test-utils";
 import { parseMarimoIslandApps } from "../../parse";
 import { MarimoIslandElement } from "../web-components";
 
@@ -45,9 +47,55 @@ beforeEach(() => {
 afterEach(async () => {
   await actAndFlush(() => document.body.replaceChildren());
   store.set(requestClientAtom, null);
+  document.body.removeAttribute("style");
+  vi.unstubAllEnvs();
 });
 
 describe("MarimoIslandElement lifecycle", () => {
+  it.each([true, false])(
+    "synchronizes the theme of a reactive=%s island across reconnects",
+    async (reactive) => {
+      vi.stubEnv("VITE_MARIMO_ISLANDS", "true");
+      if (reactive) {
+        setNotebook("runtime-cell", "runtime output");
+      }
+      const { container, island } = createThemeIsland(reactive);
+      document.body.style.colorScheme = "dark";
+      await actAndFlush(() => document.body.append(container));
+      expect(island).toHaveClass("marimo", "dark");
+      await actAndFlush(() => {
+        document.body.style.colorScheme = "light";
+      });
+      expect(island).toHaveClass("marimo", "light");
+      expect(island).not.toHaveClass("dark");
+      await actAndFlush(() => island.remove());
+      await actAndFlush(() => {
+        document.body.style.colorScheme = "dark";
+      });
+      expect(island).toHaveClass("light");
+      await actAndFlush(() => container.append(island));
+      expect(island).toHaveClass("dark");
+    },
+  );
+
+  it("can disconnect before its scheduled render and reconnect with the current theme", async () => {
+    vi.stubEnv("VITE_MARIMO_ISLANDS", "true");
+    const { container, island } = createThemeIsland(false);
+    document.body.style.colorScheme = "dark";
+    await actAndFlush(() => {
+      document.body.append(container);
+      island.remove();
+    });
+    expect(island.querySelector("marimo-cell-output")).not.toBeNull();
+    await actAndFlush(() => {
+      document.body.style.colorScheme = "light";
+    });
+    expect(island).toHaveClass("dark");
+    await actAndFlush(() => container.append(island));
+    expect(island).toHaveClass("light");
+    expect(island.textContent).toContain("static output");
+  });
+
   it("keeps static output until the initial run completes", async () => {
     store.set(islandsPendingInitialRunsAtom, new Set([1]));
     setNotebook("runtime-cell", "runtime output");
@@ -182,6 +230,21 @@ describe("MarimoIslandElement lifecycle", () => {
   });
 });
 
+function createThemeIsland(reactive: boolean) {
+  const container = document.createElement("div");
+  container.innerHTML = buildIslandHTML([
+    {
+      appId: "app-1",
+      cellId: "runtime-cell",
+      reactive,
+      code: "x = 1",
+      output: "<pre>static output</pre>",
+    },
+  ]);
+  const island = container.querySelector<HTMLElement>(ISLAND_TAG_NAMES.ISLAND)!;
+  return { container, island };
+}
+
 function setNotebook(id: string, output?: string): void {
   const runtimeCellId = cellId(id);
   store.set(

package/src/core/islands/components/output-wrapper.tsx

@@ -13,7 +13,7 @@ import { OutputRenderer } from "@/components/editor/Output";
 import { type NotebookState, notebookAtom } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import { isOutputEmpty } from "@/core/cells/outputs";
-import type { CellRuntimeState } from "@/core/cells/types";
+import { type CellRunStatus, useCellExecution } from "@/core/executions";
 import { ISLAND_TAG_NAMES } from "../constants";
 import { islandsHydratedAtom } from "../state";
 import { IslandControls } from "./IslandControls";
@@ -69,7 +69,7 @@ export const MarimoOutputWrapper: React.FC<MarimoOutputWrapperProps> = ({
 
   // Sync cell status to the host <marimo-island> element as a data attribute
   // so downstream consumers can style based on status (e.g. [data-status="running"])
-  const status = runtime?.status ?? "idle";
+  const { status } = useCellExecution(cellId);
   useSyncStatusToIsland(wrapperRef, status);
 
   // If no runtime yet, show static content
@@ -90,7 +90,7 @@ export const MarimoOutputWrapper: React.FC<MarimoOutputWrapperProps> = ({
   return (
     <div ref={wrapperRef} className="relative min-h-6">
       <OutputRenderer message={runtime.output} />
-      <RunningIndicator state={runtime} />
+      <RunningIndicator status={status} />
       <IslandControls
         cellId={cellId}
         codeCallback={codeCallback}
@@ -118,8 +118,8 @@ function useSyncStatusToIsland(
 /**
  * Shows a spinning indicator when the cell is running
  */
-const RunningIndicator: React.FC<{ state: CellRuntimeState }> = ({ state }) => {
-  if (state.status === "running") {
+const RunningIndicator: React.FC<{ status: CellRunStatus }> = ({ status }) => {
+  if (status === "running") {
     return (
       <DelayRender>
         <div className="absolute top-1 right-1">

package/src/core/islands/components/web-components.tsx

@@ -10,6 +10,7 @@ import { OBJECT_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { UI_ELEMENT_REGISTRY } from "@/core/dom/uiregistry";
 import { LocaleProvider } from "@/core/i18n/locale-provider";
 import { renderHTML } from "@/plugins/core/RenderHTML";
+import { resolvedThemeAtom } from "@/theme/useTheme";
 import { invariant } from "@/utils/invariant";
 import type { CellId, UIElementId } from "../../cells/ids";
 import { store } from "../../state/jotai";
@@ -44,6 +45,7 @@ export class MarimoIslandElement extends HTMLElement {
   private runtimeAppId?: string;
   private runtimeCellId?: CellId;
   private unsubscribeCellIds?: () => void;
+  private unsubscribeTheme?: () => void;
 
   public static readonly tagName = ISLAND_TAG_NAMES.ISLAND;
   public static readonly outputTagName = ISLAND_TAG_NAMES.CELL_OUTPUT;
@@ -104,7 +106,7 @@ export class MarimoIslandElement extends HTMLElement {
    */
   private getCellIdFromIndex(idx: number): CellId | undefined {
     const { cellIds } = store.get(notebookAtom);
-    return cellIds.inOrderIds.at(idx);
+    return cellIds.at(idx);
   }
 
   /**
@@ -132,6 +134,13 @@ export class MarimoIslandElement extends HTMLElement {
       ? this.cellId
       : undefined;
     this.syncCellIdsSubscription();
+    const syncTheme = () => {
+      const theme = store.get(resolvedThemeAtom);
+      this.classList.toggle("dark", theme === "dark");
+      this.classList.toggle("light", theme === "light");
+    };
+    this.unsubscribeTheme = store.sub(resolvedThemeAtom, syncTheme);
+    syncTheme();
     queueMicrotask(() => {
       // Guard against disconnect between connectedCallback and microtask
       if (
@@ -297,6 +306,8 @@ export class MarimoIslandElement extends HTMLElement {
    * Cleanup when element is removed from DOM
    */
   public disconnectedCallback(): void {
+    this.unsubscribeTheme?.();
+    this.unsubscribeTheme = undefined;
     this.removeEventListener(
       ISLAND_SOURCE_CHANGED_EVENT,
       this.handleSourceChanged,

package/src/core/islands/worker/__tests__/controller.test.ts

@@ -2,6 +2,7 @@
 
 import type { PyodideInterface } from "pyodide";
 import { describe, expect, it, vi } from "vitest";
+import { Deferred } from "@/utils/Deferred";
 import { ReadonlyWasmController } from "../controller";
 
 class TestController extends ReadonlyWasmController {
@@ -50,15 +51,71 @@ function createPyodideStub(
   };
 }
 
-function startSession(controller: TestController, code: string) {
-  return controller.startSession({
+function prepareSession(controller: TestController, code: string) {
+  return controller.prepareSession({
     code,
     filename: `${code}.py`,
-    onMessage: vi.fn(),
   });
 }
 
+async function startSession(controller: TestController, code: string) {
+  const session = await prepareSession(controller, code);
+  void session.start();
+  return session;
+}
+
 describe("WASM controller session lifecycle", () => {
+  it("releases a prepared session and ignores start after stop", async () => {
+    const { init, pyodide } = createPyodideStub();
+    const controller = new TestController();
+    controller.setPyodide(pyodide);
+
+    const session = await prepareSession(controller, "current");
+    await session.stop();
+    expect(init.destroy).toHaveBeenCalledOnce();
+    await session.start();
+    expect(init).not.toHaveBeenCalled();
+  });
+
+  it.each(["resolve", "reject"] as const)(
+    "releases a stopped session before its dependencies %s",
+    async (outcome) => {
+      const dependencies = new Deferred<void>();
+      const { init, loadPackagesFromImports, pyodide, bridge, stop } =
+        createPyodideStub();
+      loadPackagesFromImports.mockReturnValue(dependencies.promise);
+      const controller = new TestController();
+      controller.setPyodide(pyodide);
+      const session = await prepareSession(controller, "current");
+      const starting = session.start();
+      expect(init).not.toHaveBeenCalled();
+      await session.stop();
+      expect(init.destroy).toHaveBeenCalledOnce();
+      expect(bridge.destroy).toHaveBeenCalledOnce();
+      if (outcome === "resolve") {
+        dependencies.resolve();
+      } else {
+        dependencies.reject(new Error("Loading failed after stop"));
+      }
+      await starting;
+      await session.stop();
+      expect(stop).toHaveBeenCalledOnce();
+      expect(init).not.toHaveBeenCalled();
+    },
+  );
+
+  it("reports dependency failures when starting an active session", async () => {
+    const { init, loadPackagesFromImports, pyodide } = createPyodideStub();
+    loadPackagesFromImports.mockRejectedValue(new Error("Dependency failed"));
+    const controller = new TestController();
+    controller.setPyodide(pyodide);
+    const session = await prepareSession(controller, "current");
+    await expect(session.start()).rejects.toThrow("Dependency failed");
+    expect(init).not.toHaveBeenCalled();
+    expect(init.destroy).toHaveBeenCalledOnce();
+    await session.stop();
+  });
+
   it("stops and releases the active session", async () => {
     const { init, packages, pyodide, sessionResources, stop } =
       createPyodideStub();
@@ -116,7 +173,6 @@ describe("WASM controller session lifecycle", () => {
 
     await startSession(controller, "first");
     await startSession(controller, "second");
-    second.bridge.destroy();
 
     expect(first.stop.destroy).not.toHaveBeenCalled();
 
@@ -126,6 +182,8 @@ describe("WASM controller session lifecycle", () => {
     expect(second.stop).toHaveBeenCalledOnce();
     expect(first.stop.destroy).toHaveBeenCalledOnce();
     expect(second.stop.destroy).toHaveBeenCalledOnce();
+    expect(first.bridge.destroy).toHaveBeenCalledOnce();
+    expect(second.bridge.destroy).toHaveBeenCalledOnce();
   });
 
   it("continues stopping sessions after one stop fails", async () => {

package/src/core/islands/worker/controller.ts

@@ -1,11 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { PyodideInterface } from "pyodide";
 import { defaultUserConfig } from "@/core/config/config-schema";
-import type { NotificationPayload } from "@/core/kernel/messages";
 import { DefaultWasmController } from "@/core/wasm/worker/bootstrap";
 import { WasmFileSystem } from "@/core/wasm/worker/fs";
-import type { SerializedBridge } from "@/core/wasm/worker/types";
-import type { JsonString } from "@/utils/json/base64";
+import type { WasmSession } from "@/core/wasm/worker/types";
 import { Logger } from "../../../utils/Logger";
 
 export class ReadonlyWasmController extends DefaultWasmController {
@@ -37,19 +35,15 @@ export class ReadonlyWasmController extends DefaultWasmController {
     return { code, filename };
   }
 
-  public override async startSession(opts: {
+  public override async prepareSession(opts: {
     code: string;
     filename: string | null;
-    onMessage: (message: JsonString<NotificationPayload>) => void;
-  }): Promise<SerializedBridge> {
-    const bridge = super.startSession({
+  }): Promise<WasmSession> {
+    return super.prepareSession({
       queryParameters: {},
       code: opts.code,
       filename: opts.filename,
-      onMessage: opts.onMessage,
       userConfig: defaultUserConfig(),
     });
-
-    return bridge;
   }
 }

package/src/core/islands/worker/worker.tsx

@@ -1,21 +1,17 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { PyodideInterface } from "pyodide";
-import type { PyProxy } from "pyodide/ffi";
 import {
   createRPC,
   createRPCRequestHandler,
   createWorkerParentTransport,
   type RPCSchema,
 } from "rpc-anywhere";
-import type { NotificationPayload } from "@/core/kernel/messages";
 import type { ParentSchema } from "@/core/wasm/rpc";
 import { shouldLoadDuckDBPackages } from "@/core/wasm/utils";
 import { TRANSPORT_ID } from "@/core/wasm/worker/constants";
 import { getPyodideVersion } from "@/core/wasm/worker/getPyodideVersion";
-import { MessageBuffer } from "@/core/wasm/worker/message-buffer";
 import type { RawBridge, SerializedBridge } from "@/core/wasm/worker/types";
-import type { JsonString } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 import { prettyError } from "../../../utils/errors";
 import { invariant } from "../../../utils/invariant";
@@ -45,14 +41,11 @@ async function loadPyodideAndPackages() {
 }
 
 const pyodideReadyPromise = loadPyodideAndPackages();
-export interface IslandsKernelMessage {
-  message: JsonString<NotificationPayload>;
+/** An event of one session's notebook stream. */
+export interface IslandsNotebookEvent {
+  event: string;
   sessionGeneration: number;
 }
-
-const messageBuffer = new MessageBuffer<IslandsKernelMessage>((payload) => {
-  rpc.send.kernelMessage(payload);
-});
 interface SessionRequest {
   code: string;
   appId: string;
@@ -79,21 +72,22 @@ async function startSession(
       code: opts.code,
       filename: `app-${opts.appId}.py`,
     });
-    const nextBridge = await self.controller.startSession({
-      ...notebook,
-      onMessage: (message) => {
-        messageBuffer.push({
-          message,
-          sessionGeneration: opts.sessionGeneration,
-        });
-      },
+    const session = await self.controller.prepareSession(notebook);
+    // Follow before the session instantiates. Each subscription begins with
+    // its own kernel-ready and the session's retained notifications.
+    try {
+      await follow(session.bridge, opts.sessionGeneration);
+    } catch (error) {
+      await session.stop();
+      throw error;
+    }
+    void session.start().catch((error: unknown) => {
+      rpc.send.initializedError({ error: prettyError(error) });
     });
-    if (activeSession) {
-      (nextBridge as unknown as PyProxy).destroy();
-    } else {
+    if (!activeSession) {
       activeSession = {
         appId: opts.appId,
-        bridge: nextBridge,
+        bridge: session.bridge,
         sessionGeneration: opts.sessionGeneration,
       };
     }
@@ -107,10 +101,23 @@ async function startSession(
 }
 
 async function stopActiveSession(): Promise<void> {
-  const session = activeSession;
+  // Stopping closes every session and its notebook subscriptions.
   await self.controller.stopSession();
   activeSession = undefined;
-  (session?.bridge as unknown as PyProxy | undefined)?.destroy();
+}
+
+async function follow(
+  bridge: SerializedBridge,
+  sessionGeneration: number,
+): Promise<void> {
+  const notebook = bridge.notebook;
+  try {
+    await notebook.subscribe(`island-${sessionGeneration}`, null, (event) => {
+      rpc.send.notebookEvent({ event, sessionGeneration });
+    });
+  } finally {
+    notebook.destroy();
+  }
 }
 
 function enqueueSession<T>(operation: () => Promise<T>): Promise<T> {
@@ -243,8 +250,8 @@ export type WorkerSchema = RPCSchema<
     messages: {
       // Emitted when the worker is ready
       ready: {};
-      // Emitted when the kernel sends a message
-      kernelMessage: IslandsKernelMessage;
+      // Emitted for each event of a session's notebook stream
+      notebookEvent: IslandsNotebookEvent;
       // Emitted when the Pyodide is initialized
       initialized: {};
       // Emitted when the Pyodide fails to initialize
@@ -263,13 +270,6 @@ const rpc = createRPC<WorkerSchema, ParentSchema>({
 
 rpc.send("ready", {});
 
-/// Listeners
-// When the consumer is ready, start the message buffer
-rpc.addMessageListener("consumerReady", async () => {
-  await pyodideReadyPromise; // Make sure loading is done
-  messageBuffer.start();
-});
-
 function getMarimoVersion() {
   return self.name; // We store the version in the worker name
 }

package/src/core/kernel/__tests__/RuntimeState.test.ts

@@ -25,7 +25,7 @@ describe("RuntimeState", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    mockSendComponentValues = vi.fn((args) => Promise.resolve(null));
+    mockSendComponentValues = vi.fn(() => Promise.resolve(null));
     uiElementRegistry = UIElementRegistry.INSTANCE;
     uiElementRegistry.entries.clear();
 

package/src/core/kernel/__tests__/handlers.test.ts

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it, vi } from "vitest";
 import { cellId } from "@/__tests__/branded";
-import { buildCellData, buildLayoutState } from "../handlers";
+import { createCell } from "@/core/cells/types";
+import { buildLayoutState } from "../handlers";
 import type { NotificationMessageData } from "../messages";
 import { queryParamHandlers } from "../queryParamHandlers";
 
@@ -63,157 +64,12 @@ describe("queryParamHandlers", () => {
   });
 });
 
-describe("buildCellData", () => {
-  it("should build cell data from kernel-ready data", () => {
-    const kernelReadyData: NotificationMessageData<"kernel-ready"> = {
-      cell_ids: [cellId("cell1"), cellId("cell2")],
-      codes: ["x = 1", "y = 2"],
-      names: ["__", "__"],
-      configs: [
-        { disabled: false, hide_code: false },
-        { disabled: false, hide_code: false },
-      ],
-      layout: null,
-      resumed: false,
-      ui_values: {},
-      last_executed_code: {},
-      last_execution_time: {},
-      app_config: {
-        width: "normal",
-        app_title: null,
-        layout_file: null,
-        css_file: null,
-        auto_download: [],
-      },
-      kiosk: false,
-      capabilities: {
-        terminal: false,
-      },
-      auto_instantiated: false,
-      consumer_capabilities: { edit: true, interact: true },
-    };
-
-    const cells = buildCellData(kernelReadyData);
-
-    expect(cells).toMatchInlineSnapshot(`
-      [
-        {
-          "code": "x = 1",
-          "config": {
-            "disabled": false,
-            "hide_code": false,
-          },
-          "edited": false,
-          "id": "cell1",
-          "lastCodeRun": null,
-          "lastExecutionTime": null,
-          "name": "__",
-          "serializedEditorState": null,
-        },
-        {
-          "code": "y = 2",
-          "config": {
-            "disabled": false,
-            "hide_code": false,
-          },
-          "edited": false,
-          "id": "cell2",
-          "lastCodeRun": null,
-          "lastExecutionTime": null,
-          "name": "__",
-          "serializedEditorState": null,
-        },
-      ]
-    `);
-  });
-
-  it("should mark cells as edited when code differs from last executed code", () => {
-    const kernelReadyData: NotificationMessageData<"kernel-ready"> = {
-      cell_ids: [cellId("cell1"), cellId("cell2")],
-      codes: ["x = 1", "y = 3"],
-      names: ["__", "__"],
-      configs: [
-        { disabled: false, hide_code: false },
-        { disabled: false, hide_code: false },
-      ],
-      layout: null,
-      resumed: false,
-      ui_values: {},
-      last_executed_code: {
-        cell1: "x = 1",
-        cell2: "y = 2",
-      },
-      last_execution_time: {
-        cell1: 1_234_567_890,
-        cell2: 1_234_567_891,
-      },
-      app_config: {
-        width: "normal",
-        app_title: null,
-        layout_file: null,
-        css_file: null,
-        auto_download: [],
-      },
-      kiosk: false,
-      capabilities: {
-        terminal: false,
-      },
-      auto_instantiated: false,
-      consumer_capabilities: { edit: true, interact: true },
-    };
-
-    const cells = buildCellData(kernelReadyData);
-
-    expect(cells[0].edited).toBe(false);
-    expect(cells[1].edited).toBe(true);
-    expect(cells[0].lastCodeRun).toBe("x = 1");
-    expect(cells[1].lastCodeRun).toBe("y = 2");
-  });
-
-  it("should handle empty cell data", () => {
-    const kernelReadyData: NotificationMessageData<"kernel-ready"> = {
-      cell_ids: [],
-      codes: [],
-      names: [],
-      configs: [],
-      layout: null,
-      resumed: false,
-      ui_values: {},
-      last_executed_code: {},
-      last_execution_time: {},
-      app_config: {
-        width: "normal",
-        app_title: null,
-        layout_file: null,
-        css_file: null,
-        auto_download: [],
-      },
-      kiosk: false,
-      capabilities: {
-        terminal: false,
-      },
-      auto_instantiated: false,
-      consumer_capabilities: { edit: true, interact: true },
-    };
-
-    const cells = buildCellData(kernelReadyData);
-
-    expect(cells).toMatchInlineSnapshot("[]");
-  });
-});
-
 describe("buildLayoutState", () => {
   it("should build default layout state when no layout is provided", () => {
     const kernelReadyData: NotificationMessageData<"kernel-ready"> = {
-      cell_ids: [cellId("cell1")],
-      codes: ["x = 1"],
-      names: ["__"],
-      configs: [{ disabled: false, hide_code: false }],
       layout: null,
       resumed: false,
       ui_values: {},
-      last_executed_code: {},
-      last_execution_time: {},
       app_config: {
         width: "normal",
         app_title: null,
@@ -229,7 +85,7 @@ describe("buildLayoutState", () => {
       consumer_capabilities: { edit: true, interact: true },
     };
 
-    const cells = buildCellData(kernelReadyData);
+    const cells = [createCell({ id: cellId("cell1") })];
     const mockSetLayoutData = vi.fn();
     const layoutState = buildLayoutState(
       kernelReadyData,
@@ -248,21 +104,12 @@ describe("buildLayoutState", () => {
 
   it("should build layout state with vertical layout", () => {
     const kernelReadyData: NotificationMessageData<"kernel-ready"> = {
-      cell_ids: [cellId("cell1"), cellId("cell2")],
-      codes: ["x = 1", "y = 2"],
-      names: ["__", "__"],
-      configs: [
-        { disabled: false, hide_code: false },
-        { disabled: false, hide_code: false },
-      ],
       layout: {
         type: "vertical",
         data: [],
       },
       resumed: false,
       ui_values: {},
-      last_executed_code: {},
-      last_execution_time: {},
       app_config: {
         width: "normal",
         app_title: null,
@@ -278,7 +125,10 @@ describe("buildLayoutState", () => {
       consumer_capabilities: { edit: true, interact: true },
     };
 
-    const cells = buildCellData(kernelReadyData);
+    const cells = [
+      createCell({ id: cellId("cell1") }),
+      createCell({ id: cellId("cell2") }),
+    ];
     const mockSetLayoutData = vi.fn();
     const layoutState = buildLayoutState(
       kernelReadyData,