@marimo-team/islands 0.23.14-dev6 → 0.23.14-dev61

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtom, useSetAtom } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { useRef } from "react";
 import { useErrorBoundary } from "react-error-boundary";
 import { toast } from "@/components/ui/use-toast";
@@ -16,8 +16,8 @@ import { useConnectionTransport } from "@/core/websocket/useWebSocket";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import {
   handleWidgetMessage,
-  MODEL_MANAGER,
-} from "@/plugins/impl/anywidget/model";
+  WIDGET_REGISTRY,
+} from "@/plugins/impl/anywidget/registry";
 import { logNever } from "@/utils/assertNever";
 import { prettyError } from "@/utils/errors";
 import {
@@ -32,9 +32,13 @@ import { cacheInfoAtom } from "../cache/requests";
 import { SCRATCH_CELL_ID } from "../cells/ids";
 import { useRunsActions } from "../cells/runs";
 import { focusAndScrollCellOutputIntoView } from "../cells/scrollCellIntoView";
+import {
+  resyncBreakpoints,
+  setActiveLine,
+} from "../codemirror/cells/debugger-state";
 import type { CellData } from "../cells/types";
 import { capabilitiesAtom } from "../config/capabilities";
-import { useSetAppConfig } from "../config/config";
+import { connectionTransportTypeAtom, useSetAppConfig } from "../config/config";
 import { useDataSourceActions } from "../datasets/data-source-connections";
 import type { ConnectionName } from "../datasets/engines";
 import {
@@ -80,13 +84,18 @@ 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.
+// the backend literals. Over the SSE transport these arrive as in-band
+// `close` events rather than WebSocket close frames, so every terminal
+// reason must be classified here — an unclassified reason falls into the
+// retry path.
 export type CloseReason =
   | "MARIMO_NO_FILE_KEY"
   | "MARIMO_NO_SESSION_ID"
   | "MARIMO_NO_SESSION"
   | "MARIMO_SHUTDOWN"
   | "MARIMO_KERNEL_STARTUP_ERROR"
+  | "MARIMO_UNAUTHORIZED"
+  | "MARIMO_KIOSK_NOT_ALLOWED"
   | typeof TRANSPORT_EXHAUSTED_REASON;
 
 export type CloseDecision =
@@ -118,6 +127,26 @@ export function classifyCloseEvent(event: { reason?: string }): CloseDecision {
         },
         closeTransport: true,
       };
+    case "MARIMO_UNAUTHORIZED":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+          reason: "not authorized",
+        },
+        closeTransport: true,
+      };
+    case "MARIMO_KIOSK_NOT_ALLOWED":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+          reason: "kiosk mode is not available for this session",
+        },
+        closeTransport: true,
+      };
     case "MARIMO_KERNEL_STARTUP_ERROR":
       return {
         kind: "terminal",
@@ -194,6 +223,7 @@ export function useMarimoKernelConnection(opts: {
   const setKioskMode = useSetAtom(kioskModeAtom);
   const setCapabilities = useSetAtom(capabilitiesAtom);
   const runtimeManager = useRuntimeManager();
+  const transportType = useAtomValue(connectionTransportTypeAtom);
   const setCacheInfo = useSetAtom(cacheInfoAtom);
   const setKernelStartupError = useSetAtom(kernelStartupErrorAtom);
   const {
@@ -221,6 +251,11 @@ export function useMarimoKernelConnection(opts: {
           existingCells,
         });
         setKioskMode(msg.data.kiosk);
+        // A freshly started kernel has no breakpoints of its own; re-push
+        // the client's set so they still apply, and clear the stale
+        // highlighted line from the previous kernel instance.
+        setActiveLine(null);
+        resyncBreakpoints();
         return;
       }
 
@@ -248,7 +283,7 @@ export function useMarimoKernelConnection(opts: {
       }
 
       case "model-lifecycle":
-        handleWidgetMessage(MODEL_MANAGER, msg.data);
+        handleWidgetMessage(WIDGET_REGISTRY, msg.data);
         return;
 
       case "remove-ui-elements":
@@ -392,6 +427,13 @@ export function useMarimoKernelConnection(opts: {
       case "focus-cell":
         focusAndScrollCellOutputIntoView(msg.data.cell_id);
         return;
+      case "active-line":
+        setActiveLine(
+          msg.data.line == null
+            ? null
+            : { cellId: msg.data.cell_id, line: msg.data.line },
+        );
+        return;
       case "notebook-document-transaction":
         handleDocumentTransaction(msg.data.transaction);
         return;
@@ -439,10 +481,19 @@ export function useMarimoKernelConnection(opts: {
 
   const ws = useConnectionTransport({
     static: isStaticNotebook(),
+    transportType,
     /**
      * Unique URL for this session.
      */
-    url: () => runtimeManager.getWsURL(sessionId).toString(),
+    url: () =>
+      transportType === "sse"
+        ? runtimeManager.getSseURL(sessionId).toString()
+        : runtimeManager.getWsURL(sessionId).toString(),
+    /**
+     * Auth headers for the SSE transport. WebSockets cannot send headers
+     * and instead put the access token in the URL.
+     */
+    headers: () => runtimeManager.headers(),
 
     /**
      * Open callback. Set the connection status to open.

package/src/core/websocket/useWebSocket.tsx

@@ -5,12 +5,16 @@ import { Logger } from "@/utils/Logger";
 import { createPyodideConnection } from "../wasm/bridge";
 import { isWasm } from "../wasm/utils";
 import { BasicTransport } from "./transports/basic";
+import { SseTransport } from "./transports/sse";
 import { WsTransport } from "./transports/ws";
 import type { IConnectionTransport } from "./transports/transport";
 
 interface UseConnectionTransportOptions {
   url: () => string;
   static: boolean;
+  transportType: "websocket" | "sse";
+  /** Request headers for the SSE transport (auth); unused by WebSockets. */
+  headers: () => Record<string, string>;
   waitToConnect: () => Promise<void>;
   onOpen: (event: WebSocketEventMap["open"]) => void;
   onMessage: (event: WebSocketEventMap["message"]) => void;
@@ -18,8 +22,11 @@ interface UseConnectionTransportOptions {
   onError: (event: WebSocketEventMap["error"]) => void;
 }
 
-function createConnectionTransport(
-  options: Pick<UseConnectionTransportOptions, "url" | "static">,
+export function createConnectionTransport(
+  options: Pick<
+    UseConnectionTransportOptions,
+    "url" | "static" | "transportType" | "headers"
+  >,
 ): IConnectionTransport {
   if (options.static) {
     return BasicTransport.empty();
@@ -28,6 +35,9 @@ function createConnectionTransport(
     return createPyodideConnection();
   }
   // urlProvider is passed lazily; it may change after a runtime redirect.
+  if (options.transportType === "sse") {
+    return new SseTransport(options.url, options.headers);
+  }
   return new WsTransport(options.url);
 }
 

package/src/css/app/codemirror.css

@@ -138,3 +138,17 @@
   display: inline-block;
   padding: 2px;
 }
+
+/* Rename symbol popup (F2). The upstream popup hardcodes white inline styles;
+  override with theme tokens. */
+.cm-rename-popup {
+  background: var(--popover) !important;
+  border-color: var(--border) !important;
+  color: var(--popover-foreground) !important;
+}
+
+.cm-rename-popup input {
+  background: var(--background) !important;
+  border-color: var(--border) !important;
+  color: var(--foreground) !important;
+}

package/src/hooks/__tests__/useDelayElapsed.test.tsx

@@ -0,0 +1,55 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useDelayElapsed } from "../useDelayElapsed";
+
+describe("useDelayElapsed", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("resolves true immediately when delay <= 0", () => {
+    const { result } = renderHook(() => useDelayElapsed(0));
+    expect(result.current).toBe(true);
+  });
+
+  it("stays false until the delay elapses, then flips true", () => {
+    const { result } = renderHook(() => useDelayElapsed(2000));
+    expect(result.current).toBe(false);
+
+    act(() => vi.advanceTimersByTime(1999));
+    expect(result.current).toBe(false);
+
+    act(() => vi.advanceTimersByTime(1));
+    expect(result.current).toBe(true);
+  });
+
+  it("restarts the timer when the delay changes", () => {
+    const { result, rerender } = renderHook(
+      ({ delay }) => useDelayElapsed(delay),
+      { initialProps: { delay: 1000 } },
+    );
+
+    act(() => vi.advanceTimersByTime(1000));
+    expect(result.current).toBe(true);
+
+    rerender({ delay: 500 });
+    expect(result.current).toBe(false);
+
+    act(() => vi.advanceTimersByTime(500));
+    expect(result.current).toBe(true);
+  });
+
+  it("clears the timer on unmount", () => {
+    const { unmount } = renderHook(() => useDelayElapsed(1000));
+    expect(vi.getTimerCount()).toBe(1);
+    unmount();
+    // The pending timeout must be cleared, not left dangling.
+    expect(vi.getTimerCount()).toBe(0);
+  });
+});

package/src/hooks/useDelayElapsed.ts

@@ -0,0 +1,27 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useLayoutEffect, useState } from "react";
+
+/**
+ * Returns `false` until `delayMs` has elapsed since mount (or since `delayMs`
+ * last changed), then `true`. Resolves to `true` immediately when
+ * `delayMs <= 0`. Useful for suppressing spinner/fallback flashes.
+ */
+export function useDelayElapsed(delayMs: number): boolean {
+  const [elapsed, setElapsed] = useState(delayMs <= 0);
+
+  // Layout effect (not a plain effect) so that when `delayMs` flips from `<= 0`
+  // to `> 0` — e.g. a gate re-closing — we reset `elapsed` to `false` before
+  // the browser paints, rather than briefly flashing the fallback for a frame.
+  useLayoutEffect(() => {
+    if (delayMs <= 0) {
+      setElapsed(true);
+      return;
+    }
+    setElapsed(false);
+    const timeout = setTimeout(() => setElapsed(true), delayMs);
+    return () => clearTimeout(timeout);
+  }, [delayMs]);
+
+  return elapsed;
+}

package/src/mount.tsx

@@ -54,8 +54,8 @@ import { notebookFileStore } from "./core/wasm/store";
 import { WebSocketState } from "./core/websocket/types";
 import {
   handleWidgetMessage,
-  MODEL_MANAGER,
-} from "./plugins/impl/anywidget/model";
+  WIDGET_REGISTRY,
+} from "./plugins/impl/anywidget/registry";
 import { vegaLoader } from "./plugins/impl/vega/loader";
 import { initializePlugins } from "./plugins/plugins";
 import { ThemeProvider } from "./theme/ThemeProvider";
@@ -369,7 +369,7 @@ function hydrateStaticModels(): void {
     return;
   }
   for (const notification of notifications) {
-    handleWidgetMessage(MODEL_MANAGER, notification);
+    handleWidgetMessage(WIDGET_REGISTRY, notification);
   }
 }
 

package/src/plugins/core/RenderHTML.tsx

@@ -199,6 +199,37 @@ const keyImagesBySrc: TransformFn = (
   return cloneElement(reactNode, { key: `${src}-${index}` });
 };
 
+// Decorator: applies a checked-state-based key to task-list checkbox
+// <input> elements (e.g. GFM `- [ ]` / `- [x]` rendered by
+// pymdownx.tasklist) so they remount when their checked-ness changes.
+//
+// pymdownx.tasklist omits the `checked` HTML attribute entirely for
+// unchecked items (rather than emitting checked="false"). When markdown
+// edits shift which item lands at a given tree position (e.g. deleting
+// completed items above unchecked ones), reusing the same DOM <input>
+// across a checked -> unchecked item is a controlled -> uncontrolled prop
+// transition for React: React stops managing the DOM `checked` property in
+// that transition instead of resetting it, leaving the previous item's
+// checked state visually stuck until a full remount. Baking checked-ness
+// into the key forces a fresh node instead of reusing the stale one.
+const keyTaskListCheckboxesByChecked: TransformFn = (
+  reactNode: ReactNode,
+  domNode: DOMNode,
+  index: number,
+): JSX.Element | undefined => {
+  if (!(domNode instanceof Element) || domNode.name !== "input") {
+    return undefined;
+  }
+  if (domNode.attribs?.type !== "checkbox") {
+    return undefined;
+  }
+  if (!isValidElement(reactNode)) {
+    return undefined;
+  }
+  const checked = "checked" in domNode.attribs;
+  return cloneElement(reactNode, { key: `checkbox-${index}-${checked}` });
+};
+
 // Wrap elements with data-marimo-doc attribute in a DocHoverTarget
 const wrapDocHoverTargets: TransformFn = (
   reactNode: ReactNode,
@@ -326,7 +357,10 @@ function parseHtml({
   // and may further wrap/clone it. Used for cross-cutting concerns that
   // should apply regardless of which (if any) match-and-replace transform
   // ran above.
-  const decoratorFunctions: TransformFn[] = [keyImagesBySrc];
+  const decoratorFunctions: TransformFn[] = [
+    keyImagesBySrc,
+    keyTaskListCheckboxesByChecked,
+  ];
 
   return parse(html, {
     replace: (domNode: DOMNode, index: number) => {

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

@@ -114,6 +114,50 @@ describe("parseHtml", () => {
     expect(result.key).toBe("https://cdn.example.com/b.png-0");
   });
 
+  test("checked task-list checkbox is keyed by index and checked state", () => {
+    const html = '<li><input type="checkbox" checked disabled> item</li>';
+    const result = parseHtml({ html }) as React.ReactElement<{
+      children: React.ReactElement[];
+    }>;
+    const checkbox = result.props.children[0];
+    expect(checkbox.key).toBe("checkbox-0-true");
+  });
+
+  test("unchecked task-list checkbox is keyed by index and checked state", () => {
+    const html = '<li><input type="checkbox" disabled> item</li>';
+    const result = parseHtml({ html }) as React.ReactElement<{
+      children: React.ReactElement[];
+    }>;
+    const checkbox = result.props.children[0];
+    expect(checkbox.key).toBe("checkbox-0-false");
+  });
+
+  test("task list: item reused at same position gets a new key when checked state flips", () => {
+    // Simulates editing markdown so an unchecked item now sits where a
+    // checked item used to be (e.g. an earlier checked item was deleted).
+    const before = parseHtml({
+      html: '<ul><li><input type="checkbox" checked disabled> a</li></ul>',
+    }) as React.ReactElement<{ children: React.ReactElement }>;
+    const after = parseHtml({
+      html: '<ul><li><input type="checkbox" disabled> b</li></ul>',
+    }) as React.ReactElement<{ children: React.ReactElement }>;
+    const beforeLi = before.props.children as React.ReactElement<{
+      children: React.ReactElement[];
+    }>;
+    const afterLi = after.props.children as React.ReactElement<{
+      children: React.ReactElement[];
+    }>;
+    const beforeKey = beforeLi.props.children[0].key;
+    const afterKey = afterLi.props.children[0].key;
+    expect(beforeKey).not.toBe(afterKey);
+  });
+
+  test("non-checkbox input is left alone", () => {
+    const html = '<input type="text" value="hi">';
+    const result = parseHtml({ html }) as React.ReactElement;
+    expect(result.key).toBeNull();
+  });
+
   test("codehilite with copy button", () => {
     const html =
       '<div class="codehilite"><pre><code>console.log("Hello");</code></pre></div>';

package/src/plugins/impl/DataTablePlugin.tsx

@@ -805,6 +805,7 @@ export const LoadingDataTableComponent = memo(
             dataTable={dataTable}
             getDataUrl={props.get_data_url}
             fieldTypes={props.fieldTypes}
+            rowHeaders={props.rowHeaders}
             cellId={cellId}
           />
         ) : (