@marimo-team/frontend 0.23.9-dev8 → 0.23.9

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,12 +48,13 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
 
   const slides = (
     <LazySlidesComponent
-      cellsWithOutput={cellsWithOutput}
+      slideCells={slideCells}
       layout={layout}
       setLayout={setLayout}
+      noOutputIds={noOutputIds}
       activeIndex={resolvedIndex}
       onSlideChange={handleSlideChange}
-      configWidth={300}
+      configWidth={280}
       mode={isReading ? "read" : mode}
       isEditable={!isReading}
     />
@@ -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>
+  );
+};

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 {