@marimo-team/frontend 0.23.7-dev9 → 0.23.7-dev90

package/src/core/websocket/transports/__tests__/ws.test.ts

@@ -0,0 +1,125 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MAX_RETRIES, WsTransport, TRANSPORT_EXHAUSTED_REASON } from "../ws";
+
+let innerListeners: Record<string, ((e: unknown) => void)[]>;
+
+vi.mock("partysocket/ws", () => {
+  class FakeReconnectingWebSocket {
+    retryCount = 0;
+    readyState = WebSocket.CONNECTING;
+    constructor() {
+      innerListeners = { open: [], close: [], message: [], error: [] };
+    }
+    addEventListener(event: string, cb: (e: unknown) => void) {
+      innerListeners[event].push(cb);
+    }
+    removeEventListener(event: string, cb: (e: unknown) => void) {
+      innerListeners[event] = innerListeners[event].filter((c) => c !== cb);
+    }
+    reconnect() {}
+    close() {}
+    send() {}
+  }
+  return { default: FakeReconnectingWebSocket };
+});
+
+interface FakeReconnectingWebSocket {
+  retryCount: number;
+  readyState: number;
+}
+
+function dispatchClose(reason = "") {
+  const evt = new CloseEvent("close", { reason, code: 1006 });
+  for (const cb of innerListeners.close) {
+    cb(evt);
+  }
+}
+
+describe("WsTransport", () => {
+  let transport: WsTransport;
+  let inner: FakeReconnectingWebSocket;
+
+  beforeEach(() => {
+    transport = new WsTransport(() => "ws://example.invalid/ws");
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    inner = (transport as any).inner;
+  });
+
+  describe("close event reason", () => {
+    it("forwards the original reason before retry budget is exhausted", () => {
+      const seen: CloseEvent[] = [];
+      transport.addEventListener("close", (e) => seen.push(e));
+
+      inner.retryCount = MAX_RETRIES - 1;
+      dispatchClose("");
+
+      expect(seen).toHaveLength(1);
+      expect(seen[0].reason).toBe("");
+    });
+
+    it("rewrites reason to MARIMO_TRANSPORT_EXHAUSTED on exhaustion", () => {
+      const seen: CloseEvent[] = [];
+      transport.addEventListener("close", (e) => seen.push(e));
+
+      inner.retryCount = MAX_RETRIES;
+      dispatchClose("");
+
+      expect(seen).toHaveLength(1);
+      expect(seen[0].reason).toBe(TRANSPORT_EXHAUSTED_REASON);
+    });
+
+    it("does not rewrite a server-sent reason on exhaustion", () => {
+      // If partysocket happens to deliver a real MARIMO_* reason at the same
+      // moment the retry budget exhausts, the exhausted-state rewrite still
+      // wins because the wrapper keys off retryCount, not the original reason.
+      // Document the behavior so a future change is deliberate.
+      const seen: CloseEvent[] = [];
+      transport.addEventListener("close", (e) => seen.push(e));
+
+      inner.retryCount = MAX_RETRIES;
+      dispatchClose("MARIMO_SHUTDOWN");
+
+      expect(seen[0].reason).toBe(TRANSPORT_EXHAUSTED_REASON);
+    });
+  });
+
+  describe("addEventListener dedupe", () => {
+    it("does not double-fire when the same close listener is added twice", () => {
+      const cb = vi.fn();
+      transport.addEventListener("close", cb);
+      transport.addEventListener("close", cb);
+
+      dispatchClose("");
+
+      expect(cb).toHaveBeenCalledTimes(1);
+    });
+
+    it("a single removeEventListener fully unregisters a duplicated add", () => {
+      const cb = vi.fn();
+      transport.addEventListener("close", cb);
+      transport.addEventListener("close", cb);
+      transport.removeEventListener("close", cb);
+
+      dispatchClose("");
+
+      expect(cb).not.toHaveBeenCalled();
+      // Inner socket has no orphaned wrappers left.
+      expect(innerListeners.close).toHaveLength(0);
+    });
+  });
+
+  describe("removeEventListener", () => {
+    it("unregisters the right wrapper for close listeners", () => {
+      const cb = vi.fn();
+      transport.addEventListener("close", cb);
+      transport.removeEventListener("close", cb);
+
+      inner.retryCount = MAX_RETRIES;
+      dispatchClose("");
+
+      expect(cb).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/core/websocket/transports/basic.ts

@@ -43,7 +43,7 @@ export class BasicTransport implements IConnectionTransport {
     return WebSocket.OPEN;
   }
 
-  reconnect(code?: number | undefined, reason?: string | undefined): void {
+  reconnect(_code?: number | undefined, _reason?: string | undefined): void {
     this.close();
     this.connect();
     return;

package/src/core/websocket/transports/ws.ts

@@ -0,0 +1,96 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import ReconnectingWebSocket from "partysocket/ws";
+import type {
+  ConnectionEvent,
+  ConnectionTransportCallback,
+  IConnectionTransport,
+} from "./transport";
+
+// Per-`reconnect()` retry budget. After exhaustion, partysocket stops silently;
+// the wrapper rewrites the close-event reason to surface the give-up.
+export const MAX_RETRIES = 10;
+
+export const TRANSPORT_EXHAUSTED_REASON = "MARIMO_TRANSPORT_EXHAUSTED";
+
+export class WsTransport implements IConnectionTransport {
+  private inner: ReconnectingWebSocket;
+  private closeWrappers = new WeakMap<
+    ConnectionTransportCallback<"close">,
+    ConnectionTransportCallback<"close">
+  >();
+
+  constructor(urlProvider: () => string) {
+    this.inner = new ReconnectingWebSocket(urlProvider, undefined, {
+      maxRetries: MAX_RETRIES,
+      debug: false,
+      startClosed: true,
+      // long timeout — the server can become slow when many notebooks are open.
+      connectionTimeout: 10_000,
+    });
+  }
+
+  get readyState(): WebSocket["readyState"] {
+    return this.inner.readyState as WebSocket["readyState"];
+  }
+
+  reconnect(code?: number, reason?: string): void {
+    this.inner.reconnect(code, reason);
+  }
+
+  close(): void {
+    this.inner.close();
+  }
+
+  send(data: string | ArrayBuffer | Blob | ArrayBufferView): void {
+    this.inner.send(data);
+  }
+
+  addEventListener<T extends ConnectionEvent>(
+    event: T,
+    callback: ConnectionTransportCallback<T>,
+  ): void {
+    if (event === "close") {
+      const userCb = callback as ConnectionTransportCallback<"close">;
+      // Match native EventTarget dedupe: a second addEventListener with the
+      // same listener is a no-op. Without this, repeated adds leak wrappers
+      // on the inner socket and double-fire on close.
+      if (this.closeWrappers.has(userCb)) {
+        return;
+      }
+      const wrapper: ConnectionTransportCallback<"close"> = (e) => {
+        if (this.inner.retryCount >= MAX_RETRIES) {
+          userCb(
+            new CloseEvent("close", {
+              code: e.code,
+              reason: TRANSPORT_EXHAUSTED_REASON,
+              wasClean: e.wasClean,
+            }),
+          );
+        } else {
+          userCb(e);
+        }
+      };
+      this.closeWrappers.set(userCb, wrapper);
+      this.inner.addEventListener("close", wrapper);
+      return;
+    }
+    this.inner.addEventListener(event, callback as never);
+  }
+
+  removeEventListener<T extends ConnectionEvent>(
+    event: T,
+    callback: ConnectionTransportCallback<T>,
+  ): void {
+    if (event === "close") {
+      const userCb = callback as ConnectionTransportCallback<"close">;
+      const wrapper = this.closeWrappers.get(userCb);
+      if (wrapper) {
+        this.closeWrappers.delete(userCb);
+        this.inner.removeEventListener("close", wrapper);
+      }
+      return;
+    }
+    this.inner.removeEventListener(event, callback as never);
+  }
+}

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -11,6 +11,7 @@ import type {
   NotificationMessageData,
   NotificationPayload,
 } from "@/core/kernel/messages";
+import { TRANSPORT_EXHAUSTED_REASON } from "@/core/websocket/transports/ws";
 import { useConnectionTransport } from "@/core/websocket/useWebSocket";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import {
@@ -69,10 +70,105 @@ import { useStorageActions } from "../storage/state";
 import { useVariablesActions } from "../variables/state";
 import type { VariableName } from "../variables/types";
 import { isWasm } from "../wasm/utils";
-import { WebSocketClosedReason, WebSocketState } from "./types";
+import {
+  type ConnectionStatus,
+  WebSocketClosedReason,
+  WebSocketState,
+} from "./types";
 
 const SUPPORTS_LAZY_KERNELS = true;
 
+// All MARIMO_* reasons except TRANSPORT_EXHAUSTED are emitted by the backend
+// (marimo/_server/api/endpoints/ws_endpoint.py and ws/*.py). Keep in sync with
+// the backend literals.
+export type CloseReason =
+  | "MARIMO_ALREADY_CONNECTED"
+  | "MARIMO_WRONG_KERNEL_ID"
+  | "MARIMO_NO_FILE_KEY"
+  | "MARIMO_NO_SESSION_ID"
+  | "MARIMO_NO_SESSION"
+  | "MARIMO_SHUTDOWN"
+  | "MARIMO_MALFORMED_QUERY"
+  | "MARIMO_KERNEL_STARTUP_ERROR"
+  | typeof TRANSPORT_EXHAUSTED_REASON;
+
+export type CloseDecision =
+  | { kind: "terminal"; status: ConnectionStatus; closeTransport: boolean }
+  | { kind: "gave-up"; status: ConnectionStatus }
+  | { kind: "retry"; status: ConnectionStatus };
+
+export function classifyCloseEvent(event: { reason?: string }): CloseDecision {
+  switch (event.reason as CloseReason | undefined) {
+    case "MARIMO_ALREADY_CONNECTED":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.ALREADY_RUNNING,
+          reason: "another browser tab is already connected to the kernel",
+          canTakeover: true,
+        },
+        closeTransport: true,
+      };
+    case TRANSPORT_EXHAUSTED_REASON:
+      return {
+        kind: "gave-up",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+          reason: "kernel not found",
+        },
+      };
+    case "MARIMO_WRONG_KERNEL_ID":
+    case "MARIMO_NO_FILE_KEY":
+    case "MARIMO_NO_SESSION_ID":
+    case "MARIMO_NO_SESSION":
+    case "MARIMO_SHUTDOWN":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+          reason: "kernel not found",
+        },
+        closeTransport: true,
+      };
+    case "MARIMO_MALFORMED_QUERY":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.MALFORMED_QUERY,
+          reason:
+            "the kernel did not recognize a request; please file a bug with marimo",
+        },
+        closeTransport: false,
+      };
+    case "MARIMO_KERNEL_STARTUP_ERROR":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+          reason: "Failed to start kernel sandbox",
+        },
+        closeTransport: true,
+      };
+    default:
+      // Empty/undefined reasons are normal transient closes. Anything else is
+      // an unknown server reason; warn so a new MARIMO_* reason doesn't fall
+      // silently into the retry path.
+      if (event.reason) {
+        logNever(event.reason as never);
+      }
+  }
+
+  return {
+    kind: "retry",
+    status: { state: WebSocketState.CONNECTING },
+  };
+}
+
 function getExistingCells(): CellData[] | undefined {
   if (!SUPPORTS_LAZY_KERNELS) {
     return undefined;
@@ -340,6 +436,30 @@ export function useMarimoKernelConnection(opts: {
     }
   };
 
+  // Manual reconnect. Probes /health first to fail fast when the runtime
+  // is unreachable, instead of waiting on partysocket's retry budget.
+  const reconnect = async () => {
+    if (
+      ws.readyState === WebSocket.OPEN ||
+      ws.readyState === WebSocket.CONNECTING
+    ) {
+      return;
+    }
+    shouldTryReconnecting.current = true;
+    setConnection({ state: WebSocketState.CONNECTING });
+    const healthy = await runtimeManager.reconcileFromHealth();
+    if (!healthy) {
+      shouldTryReconnecting.current = false;
+      setConnection({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+        reason: "kernel not found",
+      });
+      return;
+    }
+    ws.reconnect();
+  };
+
   const ws = useConnectionTransport({
     static: isStaticNotebook(),
     /**
@@ -399,58 +519,17 @@ export function useMarimoKernelConnection(opts: {
      */
     onClose: (e) => {
       Logger.warn("WebSocket closed", e.code, e.reason);
-      switch (e.reason) {
-        case "MARIMO_ALREADY_CONNECTED":
-          setConnection({
-            state: WebSocketState.CLOSED,
-            code: WebSocketClosedReason.ALREADY_RUNNING,
-            reason: "another browser tab is already connected to the kernel",
-            canTakeover: true,
-          });
-          ws.close(); // close to prevent reconnecting
-          return;
-
-        case "MARIMO_WRONG_KERNEL_ID":
-        case "MARIMO_NO_FILE_KEY":
-        case "MARIMO_NO_SESSION_ID":
-        case "MARIMO_NO_SESSION":
-        case "MARIMO_SHUTDOWN":
-          setConnection({
-            state: WebSocketState.CLOSED,
-            code: WebSocketClosedReason.KERNEL_DISCONNECTED,
-            reason: "kernel not found",
-          });
-          ws.close(); // close to prevent reconnecting
-          return;
-
-        case "MARIMO_MALFORMED_QUERY":
-          setConnection({
-            state: WebSocketState.CLOSED,
-            code: WebSocketClosedReason.MALFORMED_QUERY,
-            reason:
-              "the kernel did not recognize a request; please file a bug with marimo",
-          });
-          return;
-
-        default:
-          // Check for kernel startup error (full error already received via message)
-          if (e.reason === "MARIMO_KERNEL_STARTUP_ERROR") {
-            setConnection({
-              state: WebSocketState.CLOSED,
-              code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
-              reason: "Failed to start kernel sandbox",
-            });
-            ws.close(); // prevent reconnecting
-            return;
-          }
-
-          // Session should be valid
-          // - browser tab might have been closed or re-opened
-          // - computer might have just woken from sleep
-          //
-          // so try reconnecting.
-          setConnection({ state: WebSocketState.CONNECTING });
-          tryReconnecting(e.code, e.reason);
+      const decision = classifyCloseEvent(e);
+      setConnection(decision.status);
+      if (decision.kind === "terminal" && decision.closeTransport) {
+        ws.close(); // close to prevent reconnecting
+        return;
+      }
+      if (decision.kind === "retry") {
+        // Session should be valid
+        // - browser tab might have been closed or re-opened
+        // - computer might have just woken from sleep
+        tryReconnecting(e.code, e.reason);
       }
     },
 
@@ -468,5 +547,5 @@ export function useMarimoKernelConnection(opts: {
     },
   });
 
-  return { connection };
+  return { connection, reconnect };
 }

package/src/core/websocket/useWebSocket.tsx

@@ -1,11 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import ReconnectingWebSocket from "partysocket/ws";
 import { useEffect, useState } from "react";
 import { Logger } from "@/utils/Logger";
 import { createPyodideConnection } from "../wasm/bridge";
 import { isWasm } from "../wasm/utils";
 import { BasicTransport } from "./transports/basic";
+import { WsTransport } from "./transports/ws";
 import type { IConnectionTransport } from "./transports/transport";
 
 interface UseConnectionTransportOptions {
@@ -27,20 +27,8 @@ function createConnectionTransport(
   if (isWasm()) {
     return createPyodideConnection();
   }
-  // Create a connection transport using the ReconnectingWebSocket from partysocket
-  // This handles reconnecting when the connection is lost.
-  const urlProvider = options.url; // We don't call the URL provider now since it may change (i.e. if the runtime redirects)
-  // Cast needed: ReconnectingWebSocket types readyState as `number`
-  // but IConnectionTransport expects `0 | 1 | 2 | 3`
-  return new ReconnectingWebSocket(urlProvider, undefined, {
-    // We don't want Infinity retries
-    maxRetries: 10,
-    debug: false,
-    startClosed: true,
-    // long timeout -- the server can become slow when many notebooks
-    // are open.
-    connectionTimeout: 10_000,
-  }) as unknown as IConnectionTransport;
+  // urlProvider is passed lazily; it may change after a runtime redirect.
+  return new WsTransport(options.url);
 }
 
 /**

package/src/css/app/Cell.css

@@ -73,6 +73,16 @@
     }
   }
 
+  /* Styling for cells marked for cut */
+  &.pending-cut {
+    .output-area,
+    .cm-gutters,
+    .cm {
+      background-color: var(--gray-2);
+      opacity: 0.55;
+    }
+  }
+
   &:focus-within {
     z-index: 20;
   }

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

@@ -557,4 +557,34 @@ describe("sanitizeHtml", () => {
     const html = "<some-custom-element>Content</some-custom-element>";
     expect(sanitizeHtml(html)).toMatchInlineSnapshot(`"Content"`);
   });
+
+  // DOMPurify SAFE_FOR_XML strips attribute values containing `]>`, `-->`,
+  // `--!>`, or `</(style|script|...)`. `_build_attr` JSON-escapes `<`/`>`
+  // (`<`/`>`) before HTML-escaping so the parsed attribute value
+  // never matches. These tests pin that contract.
+  test("preserves data-* attribute with JSON-escaped ]> payload", () => {
+    const html =
+      "<marimo-table data-data='[{&quot;x&quot;:&quot;]&#92;u003e&quot;}]'></marimo-table>";
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<marimo-table data-data="[{&quot;x&quot;:&quot;]\\u003e&quot;}]"></marimo-table>"`,
+    );
+  });
+
+  test("preserves data-* attribute with JSON-escaped </script> payload", () => {
+    const html =
+      "<marimo-table data-data='[{&quot;x&quot;:&quot;&#92;u003c/script&#92;u003e&quot;}]'></marimo-table>";
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<marimo-table data-data="[{&quot;x&quot;:&quot;\\u003c/script\\u003e&quot;}]"></marimo-table>"`,
+    );
+  });
+
+  // Regression sentinel: confirms DOMPurify still strips an UN-escaped `]>`,
+  // which is precisely the condition `_build_attr` exists to prevent.
+  test("strips data-* attribute when raw ]> leaks through", () => {
+    const html =
+      "<marimo-table data-data='[{&quot;x&quot;:&quot;]&gt;&quot;}]'></marimo-table>";
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<marimo-table></marimo-table>"`,
+    );
+  });
 });

package/src/plugins/impl/DropdownPlugin.tsx

@@ -13,6 +13,7 @@ interface Data {
   allowSelectNone: boolean;
   fullWidth: boolean;
   searchable: boolean;
+  disabled: boolean;
 }
 
 export class DropdownPlugin implements IPlugin<string[], Data> {
@@ -25,6 +26,7 @@ export class DropdownPlugin implements IPlugin<string[], Data> {
     allowSelectNone: z.boolean(),
     fullWidth: z.boolean().default(false),
     searchable: z.boolean().default(false),
+    disabled: z.boolean().default(false),
   });
 
   render(props: IPluginProps<string[], Data>): JSX.Element {
@@ -61,7 +63,15 @@ interface DropdownProps extends Data {
 const EMPTY_VALUE = "--";
 
 const Dropdown = (props: DropdownProps): JSX.Element => {
-  const { label, options, value, setValue, allowSelectNone, fullWidth } = props;
+  const {
+    label,
+    options,
+    value,
+    setValue,
+    allowSelectNone,
+    fullWidth,
+    disabled,
+  } = props;
 
   const id = useId();
 
@@ -85,6 +95,7 @@ const Dropdown = (props: DropdownProps): JSX.Element => {
         })}
         value={singleValue}
         id={id}
+        disabled={disabled}
       >
         {allowSelectNone ? (
           <option value={EMPTY_VALUE} selected={value.length === 0}>

package/src/plugins/impl/MultiselectPlugin.tsx

@@ -14,6 +14,7 @@ interface Data {
   options: string[];
   fullWidth: boolean;
   maxSelections?: number | undefined;
+  disabled: boolean;
 }
 
 type T = string[];
@@ -27,6 +28,7 @@ export class MultiselectPlugin implements IPlugin<T, Data> {
     options: z.array(z.string()),
     fullWidth: z.boolean().default(false),
     maxSelections: z.number().optional(),
+    disabled: z.boolean().default(false),
   });
 
   render(props: IPluginProps<string[], Data>): JSX.Element {
@@ -63,6 +65,7 @@ export const Multiselect = ({
   setValue,
   fullWidth,
   maxSelections,
+  disabled,
 }: MultiselectProps): JSX.Element => {
   const id = useId();
   const [searchQuery, setSearchQuery] = useState<string>("");
@@ -199,6 +202,7 @@ export const Multiselect = ({
         shouldFilter={false}
         search={searchQuery}
         onSearchChange={setSearchQuery}
+        disabled={disabled}
       >
         {renderList()}
       </Combobox>

package/src/plugins/impl/SearchableSelect.tsx

@@ -13,12 +13,21 @@ interface SearchableSelectProps {
   label: string | null;
   allowSelectNone: boolean;
   fullWidth: boolean;
+  disabled: boolean;
 }
 
 const NONE_KEY = "__none__";
 
 export const SearchableSelect = (props: SearchableSelectProps): JSX.Element => {
-  const { options, value, setValue, label, allowSelectNone, fullWidth } = props;
+  const {
+    options,
+    value,
+    setValue,
+    label,
+    allowSelectNone,
+    fullWidth,
+    disabled,
+  } = props;
   const id = useId();
   const [searchQuery, setSearchQuery] = useState<string>("");
 
@@ -113,6 +122,7 @@ export const SearchableSelect = (props: SearchableSelectProps): JSX.Element => {
         shouldFilter={false}
         search={searchQuery}
         onSearchChange={setSearchQuery}
+        disabled={disabled}
         data-testid="marimo-plugin-searchable-dropdown"
       >
         {renderList()}