@marimo-team/islands 0.23.9-dev46 → 0.23.9-dev48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.9-dev46",
+  "version": "0.23.9-dev48",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/Disconnected.tsx

@@ -1,69 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { ArrowRightSquareIcon } from "lucide-react";
-import { API } from "@/core/network/api";
-import { Banner } from "@/plugins/impl/common/error-banner";
-import { prettyError } from "@/utils/errors";
-import { reloadSafe } from "@/utils/reload-safe";
-import { Button } from "../ui/button";
-import { toast } from "../ui/use-toast";
-
 interface DisconnectedProps {
   reason: string;
-  canTakeover: boolean | undefined;
 }
 
-export const Disconnected = ({
-  reason,
-  canTakeover = false,
-}: DisconnectedProps) => {
-  const handleTakeover = async () => {
-    try {
-      const searchParams = new URL(window.location.href).searchParams;
-      await API.post(`/kernel/takeover?${searchParams.toString()}`, {});
-
-      // Refresh the page to reconnect
-      reloadSafe();
-    } catch (error) {
-      toast({
-        title: "Failed to take over session",
-        description: prettyError(error),
-        variant: "danger",
-      });
-    }
-  };
-
-  if (canTakeover) {
-    return (
-      <div className="flex justify-center">
-        <Banner
-          kind="info"
-          className="mt-10 flex flex-col rounded p-3 max-w-[800px] mx-4"
-        >
-          <div className="flex justify-between">
-            <span className="font-bold text-xl flex items-center mb-2">
-              Notebook already connected
-            </span>
-          </div>
-          <div className="flex justify-between items-end text-base gap-20">
-            <span>{reason}</span>
-            {canTakeover && (
-              <Button
-                onClick={handleTakeover}
-                variant="outline"
-                data-testid="takeover-button"
-                className="shrink-0"
-              >
-                <ArrowRightSquareIcon className="w-4 h-4 mr-2" />
-                Take over session
-              </Button>
-            )}
-          </div>
-        </Banner>
-      </div>
-    );
-  }
-
+export const Disconnected = ({ reason }: DisconnectedProps) => {
   return (
     <div className="font-mono text-center text-base text-(--red-11)">
       <p>{reason}</p>

package/src/components/editor/__tests__/viewer-banner.test.tsx

@@ -0,0 +1,89 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { layoutStateAtom } from "@/core/layout/layout";
+import { kioskModeAtom, viewStateAtom } from "@/core/mode";
+import { API } from "@/core/network/api";
+import { ViewerBanner } from "../viewer-banner";
+
+describe("ViewerBanner", () => {
+  it("renders nothing when not in kiosk mode", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, false);
+    const { container } = render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders nothing for an intentional kiosk client (?kiosk=true)", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    window.history.pushState({}, "", "/?kiosk=true");
+    try {
+      const { container } = render(
+        <Provider store={store}>
+          <TooltipProvider>
+            <ViewerBanner />
+          </TooltipProvider>
+        </Provider>,
+      );
+      expect(container).toBeEmptyDOMElement();
+    } finally {
+      window.history.pushState({}, "", "/");
+    }
+  });
+
+  it("renders nothing in a non-vertical layout (grid/slides)", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    store.set(layoutStateAtom, { selectedLayout: "grid", layoutData: {} });
+    const { container } = render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders nothing in present mode", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    store.set(viewStateAtom, { mode: "present", cellAnchor: null });
+    const { container } = render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("shows take over and posts without reload when viewing", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    const post = vi.spyOn(API, "post").mockResolvedValue({} as never);
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const button = screen.getByTestId("takeover-button");
+    button.click();
+    expect(post).toHaveBeenCalledWith(
+      expect.stringContaining("/kernel/takeover"),
+      {},
+    );
+  });
+});

package/src/components/editor/header/__tests__/status.test.tsx

@@ -90,19 +90,4 @@ describe("StatusOverlay disconnect indicator", () => {
       expect(onReconnect).not.toHaveBeenCalled();
     },
   );
-
-  it("does not render the disconnect icon when another tab has taken over", () => {
-    const onReconnect = vi.fn();
-    const { queryByTestId } = renderOverlay(
-      {
-        state: WebSocketState.CLOSED,
-        code: WebSocketClosedReason.ALREADY_RUNNING,
-        reason: "another browser tab is already connected to the kernel",
-        canTakeover: true,
-      },
-      onReconnect,
-    );
-
-    expect(queryByTestId("disconnected-indicator")).toBeNull();
-  });
 });

package/src/components/editor/header/app-header.tsx

@@ -18,10 +18,7 @@ export const AppHeader: React.FC<PropsWithChildren<Props>> = ({
     <div className={className}>
       {children}
       {connection.state === WebSocketState.CLOSED && (
-        <Disconnected
-          reason={connection.reason}
-          canTakeover={connection.canTakeover}
-        />
+        <Disconnected reason={connection.reason} />
       )}
     </div>
   );

package/src/components/editor/header/status.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import { HourglassIcon, LockIcon, UnlinkIcon } from "lucide-react";
+import { HourglassIcon, UnlinkIcon } from "lucide-react";
 import React from "react";
 import { Tooltip } from "@/components/ui/tooltip";
 import { notebookScrollToRunning } from "@/core/cells/actions";
@@ -24,13 +24,13 @@ export const StatusOverlay: React.FC<{
   const isOpen = connection.state === WebSocketState.OPEN;
   // Only KERNEL_DISCONNECTED is recoverable by a retry. Other terminal
   // reasons (MALFORMED_QUERY, KERNEL_STARTUP_ERROR) would deterministically
-  // fail the same way; ALREADY_RUNNING is handled by `LockedIcon` below.
+  // fail the same way.
   const canReconnect =
     isClosed && connection.code === WebSocketClosedReason.KERNEL_DISCONNECTED;
 
   return (
     <>
-      {isClosed && !connection.canTakeover && <NoiseBackground />}
+      {isClosed && <NoiseBackground />}
       <div
         className={cn(
           "z-50 top-4 left-4",
@@ -38,12 +38,11 @@ export const StatusOverlay: React.FC<{
         )}
       >
         {isOpen && isRunning && <RunningIcon />}
-        {isClosed && !connection.canTakeover && (
+        {isClosed && (
           <DisconnectedIcon
             onReconnect={canReconnect ? onReconnect : undefined}
           />
         )}
-        {isClosed && connection.canTakeover && <LockedIcon />}
       </div>
     </>
   );
@@ -79,14 +78,6 @@ const DisconnectedIcon: React.FC<{ onReconnect?: () => void }> = ({
   );
 };
 
-const LockedIcon = () => (
-  <Tooltip content="Notebook locked">
-    <div className={topLeftStatus}>
-      <LockIcon className="w-[25px] h-[25px] text-(--blue-11)" />
-    </div>
-  </Tooltip>
-);
-
 const RunningIcon = () => {
   const scratchpadOnly = useAtomValue(onlyScratchpadIsRunningAtom);
   const tooltip = scratchpadOnly

package/src/components/editor/viewer-banner.tsx

@@ -0,0 +1,82 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai/react";
+import { ArrowRightSquareIcon, EyeIcon } from "lucide-react";
+import { KnownQueryParams } from "@/core/constants";
+import { useLayoutState } from "@/core/layout/layout";
+import { kioskModeAtom, viewStateAtom } from "@/core/mode";
+import { API } from "@/core/network/api";
+import { Banner } from "@/plugins/impl/common/error-banner";
+import { prettyError } from "@/utils/errors";
+import { Button } from "../ui/button";
+import { Tooltip } from "../ui/tooltip";
+import { toast } from "../ui/use-toast";
+
+export const ViewerBanner = () => {
+  const isViewing = useAtomValue(kioskModeAtom);
+  const { selectedLayout } = useLayoutState();
+  const { mode } = useAtomValue(viewStateAtom);
+
+  // Only a demoted editor (a second tab auto-routed to read-only) is offered
+  // takeover. A client that explicitly requested kiosk (?kiosk=true: embeds,
+  // slide previews, dashboards) is an intentional viewer and gets no banner.
+  const isIntentionalKiosk = new URL(window.location.href).searchParams.has(
+    KnownQueryParams.kiosk,
+  );
+
+  // Takeover is an editing affordance: only surface it in the default vertical
+  // reading view. Grid/slides layouts and present mode are app-style views
+  // where a floating take-over banner is out of place.
+  if (
+    !isViewing ||
+    isIntentionalKiosk ||
+    selectedLayout !== "vertical" ||
+    mode === "present"
+  ) {
+    return null;
+  }
+
+  const handleTakeover = async () => {
+    try {
+      const searchParams = new URL(window.location.href).searchParams;
+      // No reload: the server replies with consumer-capabilities
+      // (edit: true), which flips kiosk mode off and hides this banner.
+      await API.post(`/kernel/takeover?${searchParams.toString()}`, {});
+    } catch (error) {
+      toast({
+        title: "Failed to take over session",
+        description: prettyError(error),
+        variant: "danger",
+      });
+    }
+  };
+
+  return (
+    <div className="absolute top-2 left-2 z-50 w-fit print:hidden">
+      <Banner
+        kind="info"
+        className="flex items-center gap-2 rounded px-2 py-1 text-xs shadow-sm"
+      >
+        <span className="flex items-center gap-1 text-muted-foreground">
+          <EyeIcon className="w-3.5 h-3.5 shrink-0" />
+          You are currently connected as a reader.
+        </span>
+        <Tooltip
+          content="Switch editing to this tab. The current editor becomes read-only."
+          side="bottom"
+        >
+          <Button
+            onClick={handleTakeover}
+            variant="outline"
+            size="xs"
+            data-testid="takeover-button"
+            className="shrink-0"
+          >
+            <ArrowRightSquareIcon className="w-3 h-3 mr-1" />
+            Take over
+          </Button>
+        </Tooltip>
+      </Banner>
+    </div>
+  );
+};

package/src/core/edit-app.tsx

@@ -12,6 +12,7 @@ import { Controls } from "@/components/editor/controls/Controls";
 import { AppHeader } from "@/components/editor/header/app-header";
 import { FilenameForm } from "@/components/editor/header/filename-form";
 import { MultiCellActionToolbar } from "@/components/editor/navigation/multi-cell-action-toolbar";
+import { ViewerBanner } from "@/components/editor/viewer-banner";
 import { cn } from "@/utils/cn";
 import { Paths } from "@/utils/paths";
 import { AppContainer } from "../components/editor/app-container";
@@ -164,6 +165,8 @@ export const EditApp: React.FC<AppProps> = ({
           )}
         </AppHeader>
 
+        <ViewerBanner />
+
         {/* Don't render until we have a single cell */}
         {hasCells && (
           <CellsRenderer appConfig={appConfig} mode={viewState.mode}>

package/src/core/islands/bootstrap.ts

@@ -255,6 +255,8 @@ function handleMessage(
         handleWidgetMessage(MODEL_MANAGER, msg.data);
         return;
 
+      case "consumer-capabilities":
+        return;
       default:
         logNever(msg);
         return;

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

@@ -90,6 +90,7 @@ describe("buildCellData", () => {
         terminal: false,
       },
       auto_instantiated: false,
+      consumer_capabilities: { edit: true, interact: true },
     };
 
     const cells = buildCellData(kernelReadyData);
@@ -158,6 +159,7 @@ describe("buildCellData", () => {
         terminal: false,
       },
       auto_instantiated: false,
+      consumer_capabilities: { edit: true, interact: true },
     };
 
     const cells = buildCellData(kernelReadyData);
@@ -191,6 +193,7 @@ describe("buildCellData", () => {
         terminal: false,
       },
       auto_instantiated: false,
+      consumer_capabilities: { edit: true, interact: true },
     };
 
     const cells = buildCellData(kernelReadyData);
@@ -223,6 +226,7 @@ describe("buildLayoutState", () => {
         terminal: false,
       },
       auto_instantiated: false,
+      consumer_capabilities: { edit: true, interact: true },
     };
 
     const cells = buildCellData(kernelReadyData);
@@ -271,6 +275,7 @@ describe("buildLayoutState", () => {
         terminal: false,
       },
       auto_instantiated: false,
+      consumer_capabilities: { edit: true, interact: true },
     };
 
     const cells = buildCellData(kernelReadyData);

package/src/core/websocket/__tests__/useMarimoKernelConnection.test.ts

@@ -31,19 +31,6 @@ describe("classifyCloseEvent", () => {
   });
 
   describe("terminal closes (server-initiated)", () => {
-    it("MARIMO_ALREADY_CONNECTED → terminal + closeTransport, with takeover", () => {
-      const decision = classify("MARIMO_ALREADY_CONNECTED");
-      expect(decision.kind).toBe("terminal");
-      expect(decision.status).toMatchObject({
-        state: WebSocketState.CLOSED,
-        code: WebSocketClosedReason.ALREADY_RUNNING,
-        canTakeover: true,
-      });
-      if (decision.kind === "terminal") {
-        expect(decision.closeTransport).toBe(true);
-      }
-    });
-
     it.each([
       "MARIMO_WRONG_KERNEL_ID",
       "MARIMO_NO_FILE_KEY",

package/src/core/websocket/types.ts

@@ -14,7 +14,6 @@ export type WebSocketState =
 
 export const WebSocketClosedReason = {
   KERNEL_DISCONNECTED: "KERNEL_DISCONNECTED",
-  ALREADY_RUNNING: "ALREADY_RUNNING",
   MALFORMED_QUERY: "MALFORMED_QUERY",
   KERNEL_STARTUP_ERROR: "KERNEL_STARTUP_ERROR",
 } as const;
@@ -30,11 +29,6 @@ export type ConnectionStatus =
        * Human-readable reason for closing the connection.
        */
       reason: string;
-      /**
-       * Whether the current session can be taken over by another session,
-       * since we only allow single-user editing.
-       */
-      canTakeover?: boolean;
     }
   | {
       state:

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -82,7 +82,6 @@ const SUPPORTS_LAZY_KERNELS = true;
 // (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"
@@ -99,17 +98,6 @@ export type CloseDecision =
 
 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",
@@ -421,6 +409,9 @@ export function useMarimoKernelConnection(opts: {
       case "notebook-document-transaction":
         handleDocumentTransaction(msg.data.transaction);
         return;
+      case "consumer-capabilities":
+        setKioskMode(!msg.data.consumer_capabilities.edit);
+        return;
       default:
         logNever(msg.data);
     }