@marimo-team/islands 0.23.9-dev8 → 0.23.9

package/src/components/editor/output/MarimoTracebackOutput.tsx

@@ -5,17 +5,13 @@ import { useAtomValue } from "jotai";
 import {
   BugPlayIcon,
   ChevronDown,
+  ChevronRight,
   CopyIcon,
   ExternalLinkIcon,
   MessageCircleIcon,
   SearchIcon,
 } from "lucide-react";
 import { type JSX, useState } from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -29,7 +25,7 @@ import { getCellEditorView } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import { SCRATCH_CELL_ID } from "@/core/cells/ids";
 import { insertDebuggerAtLine } from "@/core/codemirror/editing/debugging";
-import { aiEnabledAtom } from "@/core/config/config";
+import { aiFeaturesEnabledAtom } from "@/core/config/config";
 import { getRequestClient } from "@/core/network/requests";
 import { isStaticNotebook } from "@/core/static/static-state";
 import { isWasm } from "@/core/wasm/utils";
@@ -45,7 +41,6 @@ import {
   extractAllTracebackInfo,
   getTracebackInfo,
 } from "@/utils/traceback";
-import { cn } from "../../../utils/cn";
 import { AIFixButton } from "../errors/auto-fix";
 import { MangledSegments } from "../errors/mangled-local-chip";
 import { CellLinkTraceback } from "../links/cell-link";
@@ -57,8 +52,6 @@ interface Props {
   onRefactorWithAI?: OnRefactorWithAI;
 }
 
-const KEY = "item";
-
 /**
  * List of errors due to violations of Marimo semantics.
  */
@@ -75,10 +68,9 @@ export const MarimoTracebackOutput = ({
       replaceMangledLocal,
     ],
   });
-  const [expanded, setExpanded] = useState(true);
 
   const lastTracebackLine = lastLine(traceback);
-  const aiEnabled = useAtomValue(aiEnabledAtom);
+  const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
 
   // Get last traceback info
   const tracebackInfo = extractAllTracebackInfo(traceback)?.at(0);
@@ -91,10 +83,13 @@ export const MarimoTracebackOutput = ({
     !isStaticNotebook() &&
     cellId !== SCRATCH_CELL_ID;
 
-  const showAIFix = onRefactorWithAI && aiEnabled && !isStaticNotebook();
+  const showAIFix =
+    onRefactorWithAI && aiFeaturesEnabled && !isStaticNotebook();
 
   const showSearch = !isStaticNotebook();
 
+  const [isOpen, setIsOpen] = useState(true);
+
   const handleRefactorWithAI = (triggerImmediately: boolean) => {
     onRefactorWithAI?.({
       prompt: `My code gives the following error:\n\n${lastTracebackLine}`,
@@ -102,35 +97,29 @@ export const MarimoTracebackOutput = ({
     });
   };
 
-  const [error, errorMessage] = lastTracebackLine.split(":", 2);
-  const errorMessageSegments = errorMessage
-    ? splitMangledLocals(errorMessage)
-    : [];
-
   return (
     <div className="flex flex-col gap-2 min-w-full w-fit">
-      <Accordion type="single" collapsible={true} value={expanded ? KEY : ""}>
-        <AccordionItem value={KEY} className="border-none">
-          <div
-            className="flex gap-2 h-10 px-2 hover:bg-muted rounded-sm select-none items-center cursor-pointer transition-all"
-            onClick={() => setExpanded((prev) => !prev)}
-          >
-            <ChevronDown
-              className={cn(
-                "h-4 w-4 text-muted-foreground transition-transform duration-200 shrink-0",
-                expanded ? "rotate-180" : "rotate-0",
-              )}
-            />
-            <div className="text-sm inline font-mono">
-              <span className="text-destructive">{error || "Error"}:</span>{" "}
-              <MangledSegments segments={errorMessageSegments} />
-            </div>
-          </div>
-          <AccordionContent className="text-muted-foreground px-4 pt-2 text-xs overflow-auto">
-            {htmlTraceback}
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-label={isOpen ? "Collapse traceback" : "Expand traceback"}
+        className="self-start flex items-center gap-1 pt-2 text-muted-foreground/70 hover:text-muted-foreground transition-colors"
+      >
+        {isOpen ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+        <span className="text-[0.6875rem] uppercase tracking-wider">
+          Traceback
+        </span>
+      </button>
+      {isOpen && (
+        <div className="text-muted-foreground pr-4 text-xs overflow-auto">
+          {htmlTraceback}
+        </div>
+      )}
       <div className="flex gap-2">
         {showAIFix && (
           <AIFixButton

package/src/components/editor/renderers/cell-array.tsx

@@ -24,7 +24,7 @@ import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { SETUP_CELL_ID } from "@/core/cells/ids";
 import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
-import { aiEnabledAtom } from "@/core/config/config";
+import { aiEnabledAtom, aiFeaturesEnabledAtom } from "@/core/config/config";
 import { canInteractWithAppAtom } from "@/core/network/connection";
 import { useBoolean } from "@/hooks/useBoolean";
 import { cn } from "@/utils/cn";
@@ -261,6 +261,7 @@ const AddCellButtons: React.FC<{
   const { createNewCell } = useCellActions();
   const [isAiButtonOpen, isAiButtonOpenActions] = useBoolean(false);
   const aiEnabled = useAtomValue(aiEnabledAtom);
+  const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
   const canInteractWithApp = useAtomValue(canInteractWithAppAtom);
   const { handleClick } = useOpenSettingsToTab();
 
@@ -270,7 +271,7 @@ const AddCellButtons: React.FC<{
   );
 
   const renderBody = () => {
-    if (isAiButtonOpen) {
+    if (aiEnabled && isAiButtonOpen) {
       return <AddCellWithAI onClose={isAiButtonOpenActions.toggle} />;
     }
 
@@ -328,30 +329,32 @@ const AddCellButtons: React.FC<{
           <DatabaseIcon className="mr-2 size-4 shrink-0" />
           SQL
         </Button>
-        <Tooltip
-          content={
-            aiEnabled ? null : (
-              <span>AI provider not found or Edit model not selected</span>
-            )
-          }
-          delayDuration={100}
-          asChild={false}
-        >
-          <Button
-            className={buttonClass}
-            variant="text"
-            size="sm"
-            disabled={!canInteractWithApp}
-            onClick={
-              aiEnabled
-                ? isAiButtonOpenActions.toggle
-                : () => handleClick("ai", "ai-providers")
+        {aiEnabled && (
+          <Tooltip
+            content={
+              aiFeaturesEnabled ? null : (
+                <span>AI provider not found or Edit model not selected</span>
+              )
             }
+            delayDuration={100}
+            asChild={false}
           >
-            <SparklesIcon className="mr-2 size-4 shrink-0" />
-            Generate with AI
-          </Button>
-        </Tooltip>
+            <Button
+              className={buttonClass}
+              variant="text"
+              size="sm"
+              disabled={!canInteractWithApp}
+              onClick={
+                aiFeaturesEnabled
+                  ? isAiButtonOpenActions.toggle
+                  : () => handleClick("ai", "ai-providers")
+              }
+            >
+              <SparklesIcon className="mr-2 size-4 shrink-0" />
+              Generate with AI
+            </Button>
+          </Tooltip>
+        )}
       </>
     );
   };

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