@marimo-team/frontend 0.23.9-dev9 → 0.23.9

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

@@ -221,26 +221,54 @@ 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 = 300, // px
+  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;
-  configWidth?: number;
+  configWidth: number;
   isEditable?: boolean;
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -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}
@@ -439,7 +475,7 @@ const RevealSlidesComponent = ({
       <div className="group relative" style={{ width, height }}>
         <Deck
           deckRef={deckRef}
-          className="aspect-video w-full overflow-hidden border rounded bg-background mo-slides-theme prose-slides"
+          className="aspect-video w-full overflow-hidden border rounded bg-background mo-slides-theme prose-slides focus:outline-none focus-visible:outline-none"
           config={revealConfig}
           onReady={handleDeckReady}
           onSlideChange={handleSlideChange}
@@ -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/components/slides/slide-cell-view.tsx

@@ -3,6 +3,7 @@
 import { useMemo, useRef, useState } from "react";
 import type { EditorView } from "@codemirror/view";
 import { useAtomValue } from "jotai";
+import { cellDomProps } from "@/components/editor/common";
 import { CellEditor } from "@/components/editor/cell/code/cell-editor";
 import { CellStatusComponent } from "@/components/editor/cell/CellStatus";
 import { RunButton } from "@/components/editor/cell/RunButton";
@@ -111,7 +112,10 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
   );
 
   const editor = (
-    <div className={editorWrapperClassName}>
+    <div
+      className={editorWrapperClassName}
+      {...cellDomProps(cell.id, cell.name)}
+    >
       <CellEditor
         theme={theme}
         showPlaceholder={false}
@@ -134,7 +138,14 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
         languageAdapter={languageAdapter}
         setLanguageAdapter={setLanguageAdapter}
         showLanguageToggles={false}
+        // The reveal.js transforms in slides view break the inline AI
+        // tooltip's fixed positioning, so disable it here.
+        inlineAiTooltip={false}
         outputArea={cellOutputPosition}
+        // Parent tooltips (completions, hover, signature help) to the Reveal
+        // viewport so they stay visible when presenting fullscreen; `#App` sits
+        // outside the fullscreened subtree and would never paint.
+        tooltipParentSelector=".reveal-viewport"
       />
       {toolbar}
     </div>

package/src/components/slides/slide-form.tsx

@@ -26,15 +26,23 @@ import type {
   SlidesLayout,
   SlideType,
 } from "../editor/renderers/slides-layout/types";
-import { useState } from "react";
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 import { Tooltip } from "../ui/tooltip";
 import { Button } from "../ui/button";
 import { Kbd } from "../ui/kbd";
 import type { RuntimeCell } from "@/core/cells/types";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
 
 export const DEFAULT_SLIDE_TYPE: SlideType = "slide";
 export const DEFAULT_DECK_TRANSITION: DeckTransition = "slide";
 const COLLAPSED_CONFIG_WIDTH = 36;
+const slideConfigOpenAtom = atomWithStorage<boolean>(
+  "marimo:slides:config-open",
+  true,
+  jotaiJsonStorage,
+  { getOnInit: true },
+);
 
 export interface SlideTypeOption {
   value: SlideType;
@@ -322,7 +330,7 @@ export const SlideSidebar = ({
   setLayout: (layout: SlidesLayout) => void;
   activeConfigCell?: RuntimeCell;
 }) => {
-  const [isConfigOpen, setIsConfigOpen] = useState(false);
+  const [isConfigOpen, setIsConfigOpen] = useAtom(slideConfigOpenAtom);
 
   return (
     <aside
@@ -350,7 +358,7 @@ export const SlideSidebar = ({
             variant="ghost"
             size="icon"
             className="h-7 w-7 text-muted-foreground hover:text-foreground"
-            onClick={() => setIsConfigOpen(!isConfigOpen)}
+            onClick={() => setIsConfigOpen((open) => !open)}
             aria-expanded={isConfigOpen}
             aria-controls="slide-config-panel"
           >

package/src/components/static-html/static-banner.tsx

@@ -6,6 +6,7 @@ import { useAtomValue } from "jotai";
 import { CopyIcon, DownloadIcon } from "lucide-react";
 import type React from "react";
 import { Constants } from "@/core/constants";
+import { useResolvedMarimoConfig } from "@/core/config/config";
 import { codeAtom } from "@/core/saving/file-state";
 import { useFilename } from "@/core/saving/filename";
 import { isStaticNotebook } from "@/core/static/static-state";
@@ -66,6 +67,9 @@ const StaticBannerDialog = ({ code }: { code: string }) => {
     filename = filename.slice(lastSlash + 1);
   }
 
+  const [resolvedConfig] = useResolvedMarimoConfig();
+  const molabEnabled = resolvedConfig.sharing?.molab !== false;
+
   const href = window.location.href;
   const molabLink = createShareableLink({
     code,
@@ -118,28 +122,30 @@ const StaticBannerDialog = ({ code }: { code: string }) => {
               </div>
             )}
 
-            <div className="pt-3 border-t flex gap-2 items-center">
-              <Button
-                asChild={true}
-                variant="outline"
-                size="xs"
-                className="shrink-0"
-              >
-                <a href={molabLink} target="_blank" rel="noopener noreferrer">
-                  <MarimoPlusIcon
-                    size={12}
-                    strokeWidth={1.5}
-                    className="mr-1.5 mt-px text-(--grass-11)"
-                  />
-                  Open in molab
-                </a>
-              </Button>
-              <p className="text-sm text-(--sky-12)">
-                Run this notebook in{" "}
-                <span className="font-semibold">molab</span>, marimo's
-                cloud-hosted notebook platform.
-              </p>
-            </div>
+            {molabEnabled && (
+              <div className="pt-3 border-t flex gap-2 items-center">
+                <Button
+                  asChild={true}
+                  variant="outline"
+                  size="xs"
+                  className="shrink-0"
+                >
+                  <a href={molabLink} target="_blank" rel="noopener noreferrer">
+                    <MarimoPlusIcon
+                      size={12}
+                      strokeWidth={1.5}
+                      className="mr-1.5 mt-px text-(--grass-11)"
+                    />
+                    Open in molab
+                  </a>
+                </Button>
+                <p className="text-sm text-(--sky-12)">
+                  Run this notebook in{" "}
+                  <span className="font-semibold">molab</span>, marimo's
+                  cloud-hosted notebook platform.
+                </p>
+              </div>
+            )}
           </DialogDescription>
         </DialogHeader>
         <div className="flex gap-3 pt-2">

package/src/core/ai/__tests__/model-registry.test.ts

@@ -1,46 +1,52 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-// Mock the models.json import
 vi.mock("@marimo-team/llm-info/models.json", () => {
-  const models: AiModel[] = [
-    {
-      name: "GPT-4",
-      model: "gpt-4",
-      description: "OpenAI GPT-4 model",
-      providers: ["openai"],
-      roles: ["chat", "edit"],
-      thinking: false,
-    },
-    {
-      name: "Claude 3",
-      model: "claude-3-sonnet",
-      description: "Anthropic Claude 3 Sonnet",
-      providers: ["anthropic"],
-      roles: ["chat", "edit"],
-      thinking: false,
-    },
-    {
-      name: "Gemini Pro",
-      model: "gemini-pro",
-      description: "Google Gemini Pro model",
-      providers: ["google"],
-      roles: ["chat", "edit"],
-      thinking: false,
-    },
-    {
-      name: "Multi Provider Model",
-      model: "multi-model",
-      description: "Model available on multiple providers",
-      providers: ["openai", "anthropic"],
-      roles: ["chat", "edit"],
-      thinking: false,
-    },
-  ];
-
-  return {
-    models: models,
+  const make = (
+    overrides: Partial<AiModel> & Pick<AiModel, "name" | "model">,
+  ): AiModel => ({
+    description: "",
+    roles: ["chat", "edit"],
+    capabilities: [],
+    input_types: [],
+    output_types: [],
+    release_date: "1970-01-01",
+    ...overrides,
+  });
+
+  const multiModel = make({
+    name: "Multi Provider Model",
+    model: "multi-model",
+    description: "Model available on multiple providers",
+  });
+
+  const models: Record<string, AiModel[]> = {
+    openai: [
+      make({
+        name: "GPT-4",
+        model: "gpt-4",
+        description: "OpenAI GPT-4 model",
+      }),
+      multiModel,
+    ],
+    anthropic: [
+      make({
+        name: "Claude 3",
+        model: "claude-3-sonnet",
+        description: "Anthropic Claude 3 Sonnet",
+      }),
+      multiModel,
+    ],
+    google: [
+      make({
+        name: "Gemini Pro",
+        model: "gemini-pro",
+        description: "Google Gemini Pro model",
+      }),
+    ],
   };
+
+  return { models };
 });
 
 import type { AiModel } from "@marimo-team/llm-info";
@@ -107,14 +113,15 @@ describe("AiModelRegistry", () => {
       });
 
       const ids = [...registry.getModelsMap().keys()];
-      // Include custom and all default ones.
+      // Include custom and all default ones; iteration follows provider
+      // sections in the source data (openai → anthropic → google).
       expect(ids).toEqual([
         "openai/custom-gpt",
         "openai/gpt-4",
-        "anthropic/claude-3-sonnet",
-        "google/gemini-pro",
         "openai/multi-model",
+        "anthropic/claude-3-sonnet",
         "anthropic/multi-model",
+        "google/gemini-pro",
       ]);
     });
   });
@@ -125,9 +132,9 @@ describe("AiModelRegistry", () => {
       const openaiModels = registry.getModelsByProvider("openai");
 
       expect(openaiModels).toHaveLength(2); // gpt-4 and multi-model
-      expect(
-        openaiModels.every((model) => model.providers.includes("openai")),
-      ).toBe(true);
+      expect(openaiModels.every((model) => model.provider === "openai")).toBe(
+        true,
+      );
     });
 
     it("should return empty array for provider with no models", () => {
@@ -147,9 +154,9 @@ describe("AiModelRegistry", () => {
       expect(customModel?.name).toBe("custom-gpt");
       expect(customModel?.model).toBe("custom-gpt");
       expect(customModel?.description).toBe("Custom model");
-      expect(customModel?.providers).toEqual(["openai"]);
+      expect(customModel?.provider).toBe("openai");
       expect(customModel?.roles).toEqual([]);
-      expect(customModel?.thinking).toBe(false);
+      expect(customModel?.capabilities).toEqual([]);
     });
 
     it("should filter models based on displayed models", () => {
@@ -309,7 +316,10 @@ describe("AiModelRegistry", () => {
 
       expect(multiModelInOpenai).toBeDefined();
       expect(multiModelInAnthropic).toBeDefined();
-      expect(multiModelInOpenai).toEqual(multiModelInAnthropic);
+      // Same model id, but each entry belongs to its own provider.
+      expect(multiModelInOpenai?.provider).toBe("openai");
+      expect(multiModelInAnthropic?.provider).toBe("anthropic");
+      expect(multiModelInOpenai?.name).toBe(multiModelInAnthropic?.name);
     });
 
     it("should handle displayed models filter with non-existent models", () => {
@@ -339,20 +349,20 @@ describe("AiModelRegistry", () => {
           expect(model).toHaveProperty("name");
           expect(model).toHaveProperty("model");
           expect(model).toHaveProperty("description");
-          expect(model).toHaveProperty("providers");
+          expect(model).toHaveProperty("provider");
           expect(model).toHaveProperty("roles");
-          expect(model).toHaveProperty("thinking");
+          expect(model).toHaveProperty("capabilities");
           expect(model).toHaveProperty("custom");
 
           expect(typeof model.name).toBe("string");
           expect(typeof model.model).toBe("string");
           expect(typeof model.description).toBe("string");
-          expect(Array.isArray(model.providers)).toBe(true);
+          expect(typeof model.provider).toBe("string");
           expect(Array.isArray(model.roles)).toBe(true);
-          expect(typeof model.thinking).toBe("boolean");
+          expect(Array.isArray(model.capabilities)).toBe(true);
           expect(typeof model.custom).toBe("boolean");
 
-          expect(model.providers).toContain(provider);
+          expect(model.provider).toBe(provider);
         }
       }
     });
@@ -367,31 +377,33 @@ describe("AiModelRegistry", () => {
 
       expect(customModel).toMatchInlineSnapshot(`
         {
+          "capabilities": [],
           "custom": true,
           "description": "Custom model",
+          "input_types": [],
           "model": "custom-gpt",
           "name": "custom-gpt",
-          "providers": [
-            "openai",
-          ],
+          "output_types": [],
+          "provider": "openai",
+          "release_date": "1970-01-01",
           "roles": [],
-          "thinking": false,
         }
       `);
       expect(defaultModel).toMatchInlineSnapshot(`
         {
+          "capabilities": [],
           "custom": false,
           "description": "OpenAI GPT-4 model",
+          "input_types": [],
           "model": "gpt-4",
           "name": "GPT-4",
-          "providers": [
-            "openai",
-          ],
+          "output_types": [],
+          "provider": "openai",
+          "release_date": "1970-01-01",
           "roles": [
             "chat",
             "edit",
           ],
-          "thinking": false,
         }
       `);
     });