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

package/src/components/slides/minimap.tsx

@@ -66,6 +66,7 @@ interface SlideThumbnailCardProps extends React.HTMLAttributes<HTMLDivElement> {
   isActiveDragSource?: boolean;
   isOverlay?: boolean;
   isVisible?: boolean;
+  isNoOutput?: boolean;
   slideType?: SlideType;
   ref?: React.Ref<HTMLDivElement>;
 }
@@ -77,6 +78,7 @@ interface SlideThumbnailRowProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   dropIndicator?: DropPosition | null;
   isActiveDragSource?: boolean;
   isVisible?: boolean;
+  isNoOutput?: boolean;
   slideType?: SlideType;
   ref?: React.Ref<HTMLButtonElement>;
 }
@@ -86,15 +88,23 @@ interface SlidesMinimapProps {
   thumbnailWidth: number;
   canReorder: boolean;
   activeCellId: CellId | null;
-  // Set of cell ids that are marked `skip` in the slides layout.
+  // Set of cell ids that should be visually treated like skipped entries.
   skippedIds?: ReadonlySet<CellId>;
+  // Set of cell ids that currently have no rendered output.
+  noOutputIds?: ReadonlySet<CellId>;
   slideTypes?: ReadonlyMap<CellId, SlideType>;
   onSlideClick: (index: number) => void;
 }
 
+interface ThumbnailVisual {
+  label: string;
+  description: string;
+  Icon?: LucideIcon;
+}
+
 function getSlideTypeVisual(
   slideType: SlideType | undefined,
-): { label: string; description: string; Icon: LucideIcon } | null {
+): ThumbnailVisual | null {
   if (!slideType || slideType === "slide") {
     return null;
   }
@@ -102,8 +112,13 @@ function getSlideTypeVisual(
   return { label, description, Icon };
 }
 
+const NO_OUTPUT_VISUAL: ThumbnailVisual = {
+  label: "No output",
+  description: "Hidden because this cell has no output.",
+};
+
 const SLIDE_ASPECT_RATIO = 16 / 9;
-const SLIDE_BASE_WIDTH = 960;
+const SLIDE_BASE_WIDTH = 520;
 
 function computeThumbnailDimensions(width: number): ThumbnailDimensions {
   return {
@@ -196,6 +211,7 @@ export const SlidesMinimap = ({
   canReorder,
   activeCellId,
   skippedIds,
+  noOutputIds,
   slideTypes,
   onSlideClick,
 }: SlidesMinimapProps) => {
@@ -288,6 +304,7 @@ export const SlidesMinimap = ({
             dimensions={dimensions}
             isActiveSlide={cell.id === activeCellId}
             isVisible={visibleIds.has(cell.id)}
+            isNoOutput={noOutputIds?.has(cell.id)}
             slideType={resolveSlideType({
               cellId: cell.id,
               slideTypes,
@@ -325,6 +342,7 @@ export const SlidesMinimap = ({
               isActive={activeId === cell.id}
               isActiveSlide={cell.id === activeCellId}
               isVisible={visibleIds.has(cell.id)}
+              isNoOutput={noOutputIds?.has(cell.id)}
               slideType={resolveSlideType({
                 cellId: cell.id,
                 slideTypes,
@@ -347,6 +365,7 @@ export const SlidesMinimap = ({
             dimensions={dimensions}
             isOverlay={true}
             isActiveDragSource={true}
+            isNoOutput={noOutputIds?.has(activeCell.id)}
           />
         )}
       </DragOverlay>
@@ -378,6 +397,7 @@ interface SortableSlideThumbnailProps {
   isActive: boolean;
   isActiveSlide?: boolean;
   isVisible?: boolean;
+  isNoOutput?: boolean;
   slideType?: SlideType;
   onClick?: () => void;
 }
@@ -389,6 +409,7 @@ const SortableSlideThumbnail = ({
   isActive,
   isActiveSlide,
   isVisible,
+  isNoOutput,
   slideType,
   onClick,
 }: SortableSlideThumbnailProps) => {
@@ -405,6 +426,7 @@ const SortableSlideThumbnail = ({
       isActiveDragSource={isActive}
       isActiveSlide={isActiveSlide}
       isVisible={isVisible}
+      isNoOutput={isNoOutput}
       slideType={slideType}
       onClick={onClick}
       {...attributes}
@@ -422,6 +444,7 @@ const SlideThumbnailRow = ({
   isActiveSlide = false,
   isActiveDragSource = false,
   isVisible,
+  isNoOutput,
   slideType,
   onClick,
   ref,
@@ -462,6 +485,7 @@ const SlideThumbnailRow = ({
         isActiveSlide={isActiveSlide}
         isActiveDragSource={isActiveDragSource}
         isVisible={isVisible}
+        isNoOutput={isNoOutput}
         slideType={slideType}
       />
     </button>
@@ -477,13 +501,14 @@ const SlideThumbnailCard = ({
   isActiveDragSource = false,
   isOverlay = false,
   isVisible = false,
+  isNoOutput = false,
   slideType,
   ref,
   ...props
 }: SlideThumbnailCardProps) => {
   const { width, height, scale } = dimensions;
-  const visual = getSlideTypeVisual(slideType);
-  const isSkipped = slideType === "skip";
+  const visual = isNoOutput ? NO_OUTPUT_VISUAL : getSlideTypeVisual(slideType);
+  const isSkipped = isNoOutput || slideType === "skip";
 
   const outerStyle: React.CSSProperties = {
     width,
@@ -525,16 +550,20 @@ const SlideThumbnailCard = ({
             height: height / scale,
           }}
         >
-          <Slide cellId={cell.id} status={cell.status} output={cell.output} />
+          {isNoOutput ? (
+            <MiniCodePreview code={cell.code} />
+          ) : (
+            <Slide cellId={cell.id} status={cell.status} output={cell.output} />
+          )}
         </div>
       )}
       {isSkipped && (
         <div
-          className="absolute inset-0 bg-muted/60 pointer-events-none"
+          className="absolute inset-0 bg-muted/50 pointer-events-none"
           aria-hidden={true}
         />
       )}
-      {visual && (
+      {visual?.Icon && (
         <Tooltip
           content={
             <span className="text-xs opacity-80">{visual.description}</span>
@@ -550,7 +579,6 @@ const SlideThumbnailCard = ({
             aria-label={visual.label}
           >
             <visual.Icon className="h-3.5 w-3.5" />
-            {/* <span>{visual.label}</span> */}
           </span>
         </Tooltip>
       )}
@@ -558,6 +586,14 @@ const SlideThumbnailCard = ({
   );
 };
 
+const MiniCodePreview = ({ code }: { code: string }) => {
+  return (
+    <pre className="my-auto w-full overflow-hidden whitespace-pre-wrap wrap-break-word text-lg">
+      {code}
+    </pre>
+  );
+};
+
 function projectDropTarget(
   event: DragMoveEvent | DragOverEvent,
 ): ProjectedDropTarget | null {

package/src/components/slides/reveal-component.tsx

@@ -221,22 +221,50 @@ const SubslideView = ({
   );
 };
 
+const ParkedPreviewContent = ({
+  cell,
+  isNoOutputPreview,
+  isEditable,
+  codeShown,
+}: {
+  cell: RuntimeCell;
+  isNoOutputPreview: boolean;
+  isEditable: boolean;
+  codeShown: boolean;
+}) => {
+  if (isNoOutputPreview && isEditable) {
+    return <SlideCellView cell={cell} />;
+  }
+  if (isNoOutputPreview && codeShown) {
+    return <SlideCellReadOnlyView cell={cell} />;
+  }
+  return (
+    <CellOutputSlide
+      cellId={cell.id}
+      status={cell.status}
+      output={cell.output}
+    />
+  );
+};
+
 // There is an upstream react bug in dev mode (https://github.com/facebook/react/issues/34840)
 // Uncaught SecurityError: Failed to read a named property '$$typeof' from 'Window'
 // Happens with cells containing iframes / external content
 const RevealSlidesComponent = ({
-  cellsWithOutput,
+  slideCells,
   layout,
   setLayout,
+  noOutputIds,
   activeIndex,
   onSlideChange,
   mode,
   configWidth, // px
   isEditable = false,
 }: {
-  cellsWithOutput: RuntimeCell[];
+  slideCells: RuntimeCell[];
   layout: SlidesLayout;
   setLayout: (layout: SlidesLayout) => void;
+  noOutputIds: ReadonlySet<CellId>;
   activeIndex?: number;
   onSlideChange?: (index: number) => void;
   mode: AppMode;
@@ -255,42 +283,46 @@ const RevealSlidesComponent = ({
   );
 
   const [showCode, setShowCode] = useState(false);
-  const codeAvailable = useNotebookCodeAvailable(cellsWithOutput);
+  const codeAvailable = useNotebookCodeAvailable(slideCells);
   const codeToggleEnabled = !isIslands() && codeAvailable;
   const codeShown = codeToggleEnabled && showCode;
 
-  const activeCell =
-    activeIndex != null ? cellsWithOutput[activeIndex] : undefined;
+  const activeCell = activeIndex != null ? slideCells[activeIndex] : undefined;
   // Fall back to the first cell while the deck settles on an initial slide.
   // Still `undefined` when the deck is empty (handled below).
-  const activeConfigCell = activeCell ?? cellsWithOutput.at(0);
+  const activeConfigCell = activeCell ?? slideCells.at(0);
 
   const composition = useMemo(
     () =>
       composeSlides({
-        cells: cellsWithOutput,
+        cells: slideCells,
         getType: (cell) =>
-          layout.cells.get(cell.id)?.type ?? DEFAULT_SLIDE_TYPE,
+          noOutputIds.has(cell.id)
+            ? "skip"
+            : (layout.cells.get(cell.id)?.type ?? DEFAULT_SLIDE_TYPE),
       }),
-    [cellsWithOutput, layout.cells],
+    [slideCells, noOutputIds, layout.cells],
   );
 
-  // Skip cells aren't part of the composed deck. When one is selected in the
-  // minimap we render a preview over the deck and park reveal on a neighboring
-  // real slide; keyboard nav while parked is handled below.
-  const skippedPreviewCell =
-    activeCell && layout.cells.get(activeCell.id)?.type === "skip"
-      ? activeCell
-      : null;
+  // Skipped and output-less cells aren't part of the composed deck. When one is
+  // selected in the minimap we render a preview over the deck and park reveal on
+  // a neighboring real slide; keyboard nav while parked is handled below.
+  const activeCellSlideType = activeCell
+    ? layout.cells.get(activeCell.id)?.type
+    : undefined;
+  const isNoOutputPreview =
+    activeCell != null && noOutputIds.has(activeCell.id);
+  const isParkedPreview = activeCellSlideType === "skip" || isNoOutputPreview;
+  const parkedPreviewCell = isParkedPreview ? activeCell : null;
 
   const { cellToTarget, targetToCellIndex } = useMemo(
     () =>
       buildSlideIndices({
         composition,
-        cells: cellsWithOutput,
+        cells: slideCells,
         getId: (c) => c.id,
       }),
-    [composition, cellsWithOutput],
+    [composition, slideCells],
   );
 
   const deckTransition = layout.deck?.transition ?? DEFAULT_DECK_TRANSITION;
@@ -322,7 +354,7 @@ const RevealSlidesComponent = ({
   const navigateDeckToActiveCell = useEvent((deck: RevealApi) => {
     const target = resolveDeckNavigationTarget({
       activeIndex,
-      cells: cellsWithOutput,
+      cells: slideCells,
       cellToTarget,
       getId: (cell) => cell.id,
     });
@@ -340,7 +372,7 @@ const RevealSlidesComponent = ({
       return;
     }
     navigateDeckToActiveCell(deck);
-  }, [activeIndex, cellToTarget, cellsWithOutput, navigateDeckToActiveCell]);
+  }, [activeIndex, cellToTarget, slideCells, navigateDeckToActiveCell]);
 
   // Toggling code (re)mounts a CodeMirror editor on the active slide. Defer
   // the state update so the button/keypress paints first and the heavier mount
@@ -380,12 +412,12 @@ const RevealSlidesComponent = ({
     return { h: target.h, v: target.v };
   }, [activeCell, cellToTarget]);
 
-  // Forward the deck's current cell to the parent, except while a skipped
+  // Forward the deck's current cell to the parent, except while a parked
   // preview is parked: every reveal.js event during that window is an echo
   // of the programmatic park (possibly with transient indices), so ignoring
-  // them keeps `activeCellId` pinned on the skipped cell.
+  // them keeps `activeCellId` pinned on the minimap cell.
   const reportCurrentCell = useEvent(() => {
-    if (skippedPreviewCell != null) {
+    if (parkedPreviewCell != null) {
       return;
     }
     const deck = deckRef.current;
@@ -401,10 +433,10 @@ const RevealSlidesComponent = ({
     }
   });
 
-  // While parked on a skipped preview, step through minimap order instead of
+  // While parked on a preview, step through minimap order instead of
   // letting reveal.js advance from the parked slide the user can't see.
   const handleParkedNavKey = useEvent((event: KeyboardEvent) => {
-    if (!skippedPreviewCell || activeIndex == null) {
+    if (!parkedPreviewCell || activeIndex == null) {
       return;
     }
     if (Events.fromInput(event)) {
@@ -418,7 +450,7 @@ const RevealSlidesComponent = ({
     event.preventDefault();
     event.stopPropagation();
     const nextIndex = activeIndex + direction;
-    if (nextIndex < 0 || nextIndex >= cellsWithOutput.length) {
+    if (nextIndex < 0 || nextIndex >= slideCells.length) {
       return;
     }
     onSlideChange?.(nextIndex);
@@ -431,6 +463,10 @@ const RevealSlidesComponent = ({
 
   useEventListener(document, "keydown", handleParkedNavKey, { capture: true });
 
+  const parkedPreviewLabel = isNoOutputPreview
+    ? "Hidden as there is no output"
+    : "Skipped in presentation";
+
   const slideArea = (
     <div
       ref={containerRef}
@@ -480,21 +516,30 @@ const RevealSlidesComponent = ({
             );
           })}
         </Deck>
-        {skippedPreviewCell && (
+        {parkedPreviewCell && (
           <div
+            key={parkedPreviewCell.id}
             className="absolute inset-0 z-10 border rounded bg-background flex flex-col overflow-hidden"
-            aria-label="Skipped in presentation"
+            aria-label={parkedPreviewLabel}
           >
             <div className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-muted-foreground border-b bg-muted/40">
               <EyeOffIcon className="h-3.5 w-3.5" />
-              <span>Skipped in presentation</span>
+              <span>{parkedPreviewLabel}</span>
             </div>
             <div className="flex-1 overflow-auto flex">
-              <div className="mo-slide-content" style={{ margin: "auto 20px" }}>
-                <CellOutputSlide
-                  cellId={skippedPreviewCell.id}
-                  status={skippedPreviewCell.status}
-                  output={skippedPreviewCell.output}
+              <div
+                className={
+                  isNoOutputPreview && (isEditable || codeShown)
+                    ? "mo-slide-content flex flex-col gap-3"
+                    : "mo-slide-content"
+                }
+                style={{ margin: "auto 20px" }}
+              >
+                <ParkedPreviewContent
+                  cell={parkedPreviewCell}
+                  isNoOutputPreview={isNoOutputPreview}
+                  isEditable={isEditable}
+                  codeShown={codeShown}
                 />
               </div>
             </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);
     }