@marimo-team/frontend 0.25.2-dev66 → 0.25.2-dev89

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -84,7 +84,7 @@ import { isWasm } from "../wasm/utils";
 import {
   type ConnectionStatus,
   WebSocketClosedReason,
-  WebSocketState,
+  ConnectionState,
 } from "./types";
 
 const SUPPORTS_LAZY_KERNELS = true;
@@ -116,7 +116,7 @@ export function classifyCloseEvent(event: { reason?: string }): CloseDecision {
       return {
         kind: "gave-up",
         status: {
-          state: WebSocketState.CLOSED,
+          state: ConnectionState.CLOSED,
           code: WebSocketClosedReason.KERNEL_DISCONNECTED,
           reason: "kernel not found",
         },
@@ -128,7 +128,7 @@ export function classifyCloseEvent(event: { reason?: string }): CloseDecision {
       return {
         kind: "terminal",
         status: {
-          state: WebSocketState.CLOSED,
+          state: ConnectionState.CLOSED,
           code: WebSocketClosedReason.KERNEL_DISCONNECTED,
           reason: "kernel not found",
         },
@@ -138,7 +138,7 @@ export function classifyCloseEvent(event: { reason?: string }): CloseDecision {
       return {
         kind: "terminal",
         status: {
-          state: WebSocketState.CLOSED,
+          state: ConnectionState.CLOSED,
           code: WebSocketClosedReason.KERNEL_DISCONNECTED,
           reason: "not authorized",
         },
@@ -148,7 +148,7 @@ export function classifyCloseEvent(event: { reason?: string }): CloseDecision {
       return {
         kind: "terminal",
         status: {
-          state: WebSocketState.CLOSED,
+          state: ConnectionState.CLOSED,
           code: WebSocketClosedReason.KERNEL_DISCONNECTED,
           reason: "kiosk mode is not available for this session",
         },
@@ -158,7 +158,7 @@ export function classifyCloseEvent(event: { reason?: string }): CloseDecision {
       return {
         kind: "terminal",
         status: {
-          state: WebSocketState.CLOSED,
+          state: ConnectionState.CLOSED,
           code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
           reason: "Failed to start kernel sandbox",
         },
@@ -175,7 +175,7 @@ export function classifyCloseEvent(event: { reason?: string }): CloseDecision {
 
   return {
     kind: "retry",
-    status: { state: WebSocketState.CONNECTING },
+    status: { state: ConnectionState.CONNECTING },
   };
 }
 
@@ -256,17 +256,17 @@ export function useMarimoKernelConnection(opts: {
         const { phase } = msg.data;
         updateStartupProgress(msg.data);
         setConnection((previous) =>
-          previous.state === WebSocketState.OPEN ||
-          (previous.state === WebSocketState.CONNECTING &&
+          previous.state === ConnectionState.OPEN ||
+          (previous.state === ConnectionState.CONNECTING &&
             previous.phase === phase)
             ? previous
-            : { state: WebSocketState.CONNECTING, phase },
+            : { state: ConnectionState.CONNECTING, phase },
         );
         return;
       }
       case "kernel-ready": {
         setKernelStartupError(null);
-        setConnection({ state: WebSocketState.OPEN });
+        setConnection({ state: ConnectionState.OPEN });
         setInitialRunCompleted(
           Boolean(msg.data.resumed || msg.data.auto_instantiated),
         );
@@ -481,7 +481,7 @@ export function useMarimoKernelConnection(opts: {
 
       case "reconnected":
         setKernelStartupError(null);
-        setConnection({ state: WebSocketState.OPEN });
+        setConnection({ state: ConnectionState.OPEN });
         return;
 
       case "focus-cell":
@@ -526,12 +526,12 @@ export function useMarimoKernelConnection(opts: {
     }
     shouldTryReconnecting.current = true;
     setKernelStartupError(null);
-    setConnection({ state: WebSocketState.CONNECTING });
+    setConnection({ state: ConnectionState.CONNECTING });
     const healthy = await runtimeManager.reconcileFromHealth();
     if (!healthy) {
       shouldTryReconnecting.current = false;
       setConnection({
-        state: WebSocketState.CLOSED,
+        state: ConnectionState.CLOSED,
         code: WebSocketClosedReason.KERNEL_DISCONNECTED,
         reason: "kernel not found",
       });
@@ -607,17 +607,17 @@ export function useMarimoKernelConnection(opts: {
       setConnection((previous) => {
         const status = decision.status;
         if (
-          status.state === WebSocketState.CLOSED &&
+          status.state === ConnectionState.CLOSED &&
           status.code === WebSocketClosedReason.KERNEL_STARTUP_ERROR &&
-          (previous.state === WebSocketState.CONNECTING ||
-            previous.state === WebSocketState.CLOSED)
+          (previous.state === ConnectionState.CONNECTING ||
+            previous.state === ConnectionState.CLOSED)
         ) {
           return { ...status, phase: previous.phase };
         }
         if (
-          status.state === WebSocketState.CONNECTING &&
-          (previous.state === WebSocketState.OPEN ||
-            (previous.state === WebSocketState.CONNECTING &&
+          status.state === ConnectionState.CONNECTING &&
+          (previous.state === ConnectionState.OPEN ||
+            (previous.state === ConnectionState.CONNECTING &&
               previous.phase === "reconnecting"))
         ) {
           return { ...status, phase: "reconnecting" };
@@ -642,7 +642,7 @@ export function useMarimoKernelConnection(opts: {
     onError: (e) => {
       Logger.warn("WebSocket error", e);
       setConnection({
-        state: WebSocketState.CLOSED,
+        state: ConnectionState.CLOSED,
         code: WebSocketClosedReason.KERNEL_DISCONNECTED,
         reason: "kernel not found",
       });

package/src/mount.tsx

@@ -62,7 +62,7 @@ import {
 import { maybeRegisterVSCodeBindings } from "./core/vscode/vscode-bindings";
 import type { FileStore } from "./core/wasm/store";
 import { notebookFileStore } from "./core/wasm/store";
-import { WebSocketState } from "./core/websocket/types";
+import { ConnectionState } from "./core/websocket/types";
 import {
   handleWidgetMessage,
   WIDGET_REGISTRY,
@@ -359,7 +359,7 @@ function initStore(options: unknown) {
     });
     // If the remote runtime is not lazy, start it in CONNECTING
     if (!firstRuntimeConfig.lazy && !isStaticNotebook()) {
-      store.set(connectionAtom, { state: WebSocketState.CONNECTING });
+      store.set(connectionAtom, { state: ConnectionState.CONNECTING });
     }
   } else {
     store.set(runtimeConfigAtom, {

package/src/plugins/core/__test__/registerReactComponent.test.ts

@@ -32,6 +32,61 @@ function makePlugin(tagName: string) {
   };
 }
 
+describe("stylesheet copying", () => {
+  afterEach(() => {
+    delete (Document.prototype as Partial<Document>).adoptedStyleSheets;
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  test.each([
+    {
+      name: "linked stylesheet",
+      href: "http://localhost/assets/index.css",
+      title: "marimo-linked-test",
+      expectedBaseURL: "http://localhost/assets/index.css",
+    },
+    {
+      name: "inline stylesheet",
+      href: null,
+      title: "marimo-inline-test",
+      expectedBaseURL: document.baseURI,
+    },
+  ])(
+    "preserves the base URL of a $name",
+    ({ href, title, expectedBaseURL }) => {
+      const constructedStyleSheet = {
+        replaceSync: vi.fn(),
+      } as unknown as CSSStyleSheet;
+      const constructor = vi.fn(function () {
+        return constructedStyleSheet;
+      });
+      constructor.prototype.replace = vi.fn();
+      vi.stubGlobal("CSSStyleSheet", constructor);
+      Object.defineProperty(Document.prototype, "adoptedStyleSheets", {
+        configurable: true,
+        value: [],
+      });
+
+      const source = {
+        cssRules: [],
+        href,
+        ownerNode: null,
+        title,
+      } as unknown as CSSStyleSheet;
+      vi.spyOn(document, "styleSheets", "get").mockReturnValue([
+        source,
+      ] as unknown as StyleSheetList);
+
+      const tag = uniqueTag("stylesheet-base-url");
+      registerReactComponent(makePlugin(tag));
+      document.createElement(tag);
+
+      expect(constructor).toHaveBeenCalledWith({ baseURL: expectedBaseURL });
+    },
+  );
+});
+
 describe("isCustomMarimoElement", () => {
   test("returns false for null", () => {
     expect(isCustomMarimoElement(null)).toBe(false);

package/src/plugins/core/registerReactComponent.tsx

@@ -519,7 +519,9 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
         if (!styleSheetCache.has(sheetUniqueKey)) {
           // We need to create a new stylesheet because we can't use the same
           // stylesheet otherwise the browser will throw an error.
-          const newSheet = new CSSStyleSheet();
+          const newSheet = new CSSStyleSheet({
+            baseURL: sheet.href ?? document.baseURI,
+          });
           try {
             newSheet.replaceSync(
               Array.from(sheet.cssRules)

package/src/stories/cell.stories.tsx

@@ -14,7 +14,7 @@ import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { resolveRequestClient } from "@/core/network/resolve";
 import type { CellConfig } from "@/core/network/types";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import { MultiColumn } from "@/utils/id-tree";
 import type { Milliseconds, Seconds } from "@/utils/time";
 import { Cell as EditorCell } from "../components/editor/notebook-cell";
@@ -84,7 +84,7 @@ const Cell: React.FC<{
 
   const store = createStore();
   store.set(notebookAtom, notebook);
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(requestClientAtom, resolveRequestClient());
   return (
     <Provider store={store}>

package/src/stories/layout/vertical/one-column.stories.tsx

@@ -11,7 +11,7 @@ import { showCodeInRunModeAtom } from "@/core/meta/state";
 import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { resolveRequestClient } from "@/core/network/resolve";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import { MultiColumn } from "@/utils/id-tree";
 import type { Milliseconds, Seconds } from "@/utils/time";
 import { CellArray } from "../../../components/editor/renderers/cell-array";
@@ -105,7 +105,7 @@ const EditModeCodeShown = () => {
 
   const store = createStore();
   store.set(notebookAtom, notebook);
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(requestClientAtom, resolveRequestClient());
   store.set(showCodeInRunModeAtom, true);
 
@@ -130,7 +130,7 @@ const EditModeCodeHidden = () => {
 
   const store = createStore();
   store.set(notebookAtom, notebook);
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(requestClientAtom, resolveRequestClient());
   store.set(showCodeInRunModeAtom, true);
 
@@ -155,7 +155,7 @@ const ReadModeCodeShown = () => {
 
   const store = createStore();
   store.set(notebookAtom, notebook);
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(requestClientAtom, resolveRequestClient());
   store.set(showCodeInRunModeAtom, true);
 
@@ -174,7 +174,7 @@ const ReadModeCodeHidden = () => {
 
   const store = createStore();
   store.set(notebookAtom, notebook);
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(requestClientAtom, resolveRequestClient());
   store.set(showCodeInRunModeAtom, true);
 

package/src/stories/progress-stages.stories.tsx

@@ -0,0 +1,62 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ProgressStages,
+  type ProgressState,
+} from "@/components/ui/progress-stages";
+
+function ProgressStagesStory({
+  state,
+  completedStage,
+}: {
+  state: ProgressState;
+  completedStage: boolean;
+}) {
+  return (
+    <div className="w-80 space-y-6">
+      <p className="text-sm text-muted-foreground">
+        Isolated stage styling. For the actual notebook and sidebar, use the
+        walkthroughs under Runtime.
+      </p>
+      <ProgressStages
+        label="Example stages"
+        stages={[
+          ...(completedStage
+            ? [
+                {
+                  id: "previous",
+                  state: "succeeded" as const,
+                  title: "Previous stage",
+                  description: "This stage has finished.",
+                },
+              ]
+            : []),
+          {
+            id: "current",
+            state,
+            title: "Current stage",
+            description: "Change the state using the Storybook controls.",
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+const meta = {
+  title: "UI Primitives/ProgressStages",
+  component: ProgressStagesStory,
+  parameters: { layout: "centered" },
+  args: { state: "running", completedStage: true },
+  argTypes: {
+    state: {
+      control: "radio",
+      options: ["waiting", "running", "succeeded", "failed"],
+    },
+  },
+} satisfies Meta<typeof ProgressStagesStory>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const MultipleStages: Story = {};
+export const SingleStage: Story = { args: { completedStage: false } };

package/src/stories/runtime-existing.stories.tsx

@@ -0,0 +1,44 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { type RuntimeStory, runtimeStoryMeta } from "./runtime-story";
+
+const meta = {
+  ...runtimeStoryMeta,
+  title: "Runtime/Existing environment",
+  args: { ...runtimeStoryMeta.args, backend: null, phase: "starting" },
+} satisfies Meta<typeof RuntimeStory>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Walkthrough: Story = {
+  name: "Walkthrough",
+  args: { manual: true, detailsOpen: true },
+};
+export const NotebookConnecting: Story = {
+  name: "Notebook — connecting",
+  args: {},
+};
+export const NotebookFailed: Story = {
+  name: "Notebook — failure and retry",
+  args: { phase: "failed" },
+};
+export const EmptyNotebook: Story = {
+  name: "Empty notebook — connecting",
+  args: { existingCells: false },
+};
+export const DetailsConnecting: Story = {
+  name: "Sidebar — connecting",
+  args: { surface: "packages" },
+};
+export const DetailsFailed: Story = {
+  name: "Sidebar — failure details",
+  args: { surface: "packages", phase: "failed" },
+};
+export const Ready: Story = {
+  name: "Sidebar — ready",
+  args: { surface: "packages", phase: "ready" },
+};
+export const Completion: Story = {
+  name: "Automatic completion",
+  args: { interactive: true },
+};

package/src/stories/runtime-maintenance.stories.tsx

@@ -0,0 +1,40 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { type RuntimeStory, runtimeStoryMeta } from "./runtime-story";
+
+const meta = {
+  ...runtimeStoryMeta,
+  title: "Runtime/Sandbox maintenance",
+  args: { ...runtimeStoryMeta.args, backend: "uv", surface: "packages" },
+} satisfies Meta<typeof RuntimeStory>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Syncing: Story = {
+  name: "Sync — in progress",
+  args: { phase: "syncing" },
+};
+export const SyncFailed: Story = {
+  name: "Sync — failed",
+  args: { phase: "sync-failed" },
+};
+export const Synced: Story = {
+  name: "Sync — completed",
+  args: { phase: "synced" },
+};
+export const RestartRequired: Story = {
+  name: "Sync — restart required",
+  args: { phase: "restart-required" },
+};
+export const ManifestEditor: Story = {
+  name: "Manifest — edit",
+  args: { surface: "manifest", phase: "failed" },
+};
+export const ManifestSyncFailed: Story = {
+  name: "Manifest — sync failed",
+  args: { surface: "manifest", phase: "failed", saveResult: "failure" },
+};
+export const ManifestChanged: Story = {
+  name: "Manifest — changed on disk",
+  args: { surface: "manifest", phase: "failed", saveResult: "stale" },
+};

package/src/stories/runtime-pixi.stories.tsx

@@ -0,0 +1,28 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { type RuntimeStory, runtimeStoryMeta } from "./runtime-story";
+
+const meta = {
+  ...runtimeStoryMeta,
+  title: "Runtime/pixi sandbox",
+  args: { ...runtimeStoryMeta.args, backend: "pixi" },
+} satisfies Meta<typeof RuntimeStory>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Walkthrough: Story = {
+  name: "Walkthrough",
+  args: { manual: true, detailsOpen: true },
+};
+export const Ready: Story = {
+  name: "Sidebar — ready",
+  args: { surface: "packages", phase: "ready" },
+};
+export const Completion: Story = {
+  name: "Notebook — automatic completion",
+  args: { interactive: true },
+};
+export const EmptyCompletion: Story = {
+  name: "Empty notebook — automatic completion",
+  args: { interactive: true, existingCells: false },
+};