@marimo-team/islands 0.23.9-dev45 → 0.23.9-dev47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.9-dev45",
+  "version": "0.23.9-dev47",
   "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/renderers/slides-layout/__tests__/compute-slide-cells.test.ts

@@ -26,8 +26,9 @@ const layoutOf = (entries: Array<[string, SlideConfig]>): SlidesLayout => ({
 describe("computeSlideCellsInfo", () => {
   it("returns empty results for empty input", () => {
     const result = computeSlideCellsInfo([], layoutOf([]));
-    expect(result.cellsWithOutput).toEqual([]);
+    expect(result.slideCells).toEqual([]);
     expect(result.skippedIds.size).toBe(0);
+    expect(result.noOutputIds.size).toBe(0);
     expect(result.slideTypes.size).toBe(0);
     expect(result.startCellIndex).toBe(0);
   });
@@ -62,22 +63,26 @@ describe("computeSlideCellsInfo", () => {
     expect(result.startCellIndex).toBe(0);
   });
 
-  it("filters out cells with no output", () => {
+  it("keeps cells with no output for the minimap", () => {
     const result = computeSlideCellsInfo(
       [cell("a"), cell("b", null), cell("c")],
       layoutOf([]),
     );
-    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "c"]);
+    expect(result.slideCells.map((c) => c.id)).toEqual(["a", "b", "c"]);
+    expect([...result.noOutputIds]).toEqual(["b"]);
+    expect([...result.skippedIds]).toEqual(["b"]);
   });
 
-  it("filters out cells whose output data is empty string", () => {
+  it("keeps cells whose output data is empty string for the minimap", () => {
     // Mirrors the editor contract: an explicit empty-string payload means the
-    // cell rendered nothing, so it should not occupy a slide.
+    // cell rendered nothing, so it should not occupy a reveal slide.
     const result = computeSlideCellsInfo(
       [cell("a"), cell("b", { data: "" }), cell("c")],
       layoutOf([]),
     );
-    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "c"]);
+    expect(result.slideCells.map((c) => c.id)).toEqual(["a", "b", "c"]);
+    expect([...result.noOutputIds]).toEqual(["b"]);
+    expect([...result.skippedIds]).toEqual(["b"]);
   });
 
   it("keeps cells whose output data is a non-empty value (including falsy ones)", () => {
@@ -91,7 +96,8 @@ describe("computeSlideCellsInfo", () => {
       ],
       layoutOf([]),
     );
-    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "b", "c"]);
+    expect(result.slideCells.map((c) => c.id)).toEqual(["a", "b", "c"]);
+    expect(result.noOutputIds.size).toBe(0);
   });
 
   it("populates slideTypes only for cells with an explicit type", () => {
@@ -121,14 +127,12 @@ describe("computeSlideCellsInfo", () => {
     expect([...result.skippedIds]).toEqual(["b", "c"]);
     // Skipped cells are still "visible" deck cells — they just aren't rendered
     // in reveal. The minimap relies on the full list plus skippedIds.
-    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "b", "c"]);
+    expect(result.slideCells.map((c) => c.id)).toEqual(["a", "b", "c"]);
     expect(result.slideTypes.get(cellId("b"))).toBe("skip");
   });
 
-  it("ignores layout entries for cells that have no output", () => {
-    // If a cell was skipped in the layout but no longer produces output (e.g.
-    // the user deleted its code), it should drop out of both maps — otherwise
-    // the skip set would reference ghosts.
+  it("preserves configured slide types for cells that have no output", () => {
+    // The missing output is transient runtime state, not persisted slide config.
     const result = computeSlideCellsInfo(
       [cell("a"), cell("b", null)],
       layoutOf([
@@ -136,16 +140,25 @@ describe("computeSlideCellsInfo", () => {
         ["b", { type: "skip" }],
       ]),
     );
-    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a"]);
-    expect(result.skippedIds.size).toBe(0);
-    expect(result.slideTypes.has(cellId("b"))).toBe(false);
+    expect(result.slideCells.map((c) => c.id)).toEqual(["a", "b"]);
+    expect([...result.noOutputIds]).toEqual(["b"]);
+    expect([...result.skippedIds]).toEqual(["b"]);
+    expect(result.slideTypes.get(cellId("b"))).toBe("skip");
+  });
+
+  it("skips no-output cells when computing the starting cell", () => {
+    const result = computeSlideCellsInfo(
+      [cell("a", null), cell("b", { data: "" }), cell("c")],
+      layoutOf([]),
+    );
+    expect(result.startCellIndex).toBe(2);
   });
 
-  it("preserves the input order of cells in cellsWithOutput", () => {
+  it("preserves the input order of cells in slideCells", () => {
     const result = computeSlideCellsInfo(
       [cell("c"), cell("a"), cell("b")],
       layoutOf([]),
     );
-    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["c", "a", "b"]);
+    expect(result.slideCells.map((c) => c.id)).toEqual(["c", "a", "b"]);
   });
 });

package/src/components/editor/renderers/slides-layout/compute-slide-cells.ts

@@ -9,32 +9,40 @@ export interface SlideCellLike {
 }
 
 export interface SlideCellsInfo<T extends SlideCellLike> {
-  cellsWithOutput: T[];
+  slideCells: T[];
   skippedIds: Set<CellId>;
+  noOutputIds: Set<CellId>;
   slideTypes: Map<CellId, SlideType>;
-  // Index of the first cell in `cellsWithOutput` that is not skipped
+  // Index of the first cell in `slideCells` that is not effectively skipped.
   startCellIndex: number;
 }
 
+export function hasRenderableOutput(cell: SlideCellLike): boolean {
+  return cell.output != null && cell.output.data !== "";
+}
+
 export function computeSlideCellsInfo<T extends SlideCellLike>(
   cells: readonly T[],
   layout: Pick<SlidesLayout, "cells">,
 ): SlideCellsInfo<T> {
-  const cellsWithOutput = cells.filter(
-    (cell) => cell.output != null && cell.output.data !== "",
-  );
+  const slideCells = [...cells];
   const skippedIds = new Set<CellId>();
+  const noOutputIds = new Set<CellId>();
   const slideTypes = new Map<CellId, SlideType>();
 
   let startCell: T | null = null;
   let startCellIndex = 0;
 
-  for (const [index, cell] of cellsWithOutput.entries()) {
+  for (const [index, cell] of slideCells.entries()) {
     const type = layout.cells.get(cell.id)?.type;
+    const hasOutput = hasRenderableOutput(cell);
     if (type) {
       slideTypes.set(cell.id, type);
     }
-    if (type === "skip") {
+    if (!hasOutput) {
+      noOutputIds.add(cell.id);
+    }
+    if (type === "skip" || !hasOutput) {
       skippedIds.add(cell.id);
     } else if (startCell === null) {
       startCell = cell;
@@ -42,8 +50,9 @@ export function computeSlideCellsInfo<T extends SlideCellLike>(
     }
   }
   return {
-    cellsWithOutput,
+    slideCells,
     skippedIds,
+    noOutputIds,
     slideTypes,
     startCellIndex,
   };

package/src/components/editor/renderers/slides-layout/slides-layout.tsx

@@ -30,19 +30,17 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   const isMultiColumn = numColumns > 1;
   const [activeCellId, setActiveCellId] = useState<CellId | null>(null);
 
-  const { cellsWithOutput, skippedIds, slideTypes, startCellIndex } = useMemo(
-    () => computeSlideCellsInfo(cells, layout),
-    [cells, layout],
-  );
+  const { slideCells, skippedIds, noOutputIds, slideTypes, startCellIndex } =
+    useMemo(() => computeSlideCellsInfo(cells, layout), [cells, layout]);
 
   const activeSlideIndex = activeCellId
-    ? cellsWithOutput.findIndex((c) => c.id === activeCellId)
+    ? slideCells.findIndex((c) => c.id === activeCellId)
     : startCellIndex;
   const resolvedIndex =
     activeSlideIndex === -1 ? startCellIndex : activeSlideIndex;
 
   const handleSlideChange = useEvent((index: number) => {
-    const cell = cellsWithOutput[index];
+    const cell = slideCells[index];
     if (cell) {
       setActiveCellId(cell.id);
     }
@@ -50,9 +48,10 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
 
   const slides = (
     <LazySlidesComponent
-      cellsWithOutput={cellsWithOutput}
+      slideCells={slideCells}
       layout={layout}
       setLayout={setLayout}
+      noOutputIds={noOutputIds}
       activeIndex={resolvedIndex}
       onSlideChange={handleSlideChange}
       configWidth={280}
@@ -85,13 +84,12 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   return (
     <div className="flex-1 pr-18 pb-2 flex flex-row gap-2 min-h-0">
       <SlidesMinimap
-        cells={cellsWithOutput}
+        cells={slideCells}
         thumbnailWidth={220}
         canReorder={!isMultiColumn}
-        activeCellId={
-          activeCellId ?? cellsWithOutput[startCellIndex]?.id ?? null
-        }
+        activeCellId={activeCellId ?? slideCells[startCellIndex]?.id ?? null}
         skippedIds={skippedIds}
+        noOutputIds={noOutputIds}
         slideTypes={slideTypes}
         onSlideClick={handleSlideChange}
       />

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>
+  );
+};