@marimo-team/frontend 0.23.16-dev5 → 0.23.16-dev51

package/src/components/slides/__tests__/cell-output-block.test.tsx

@@ -0,0 +1,40 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { CellOutputId } from "@/core/cells/ids";
+import { createCell, createCellRuntimeState } from "@/core/cells/types";
+import { CellOutputBlock } from "../reveal-component";
+
+describe("CellOutputBlock", () => {
+  it("renders the cell's data-cell-id and data-cell-name so it can be targeted by custom CSS", () => {
+    const id = cellId("test");
+    const cell = {
+      ...createCell({ id, name: "title" }),
+      ...createCellRuntimeState({
+        output: {
+          channel: "output",
+          mimetype: "text/plain",
+          data: "hello",
+          timestamp: 0,
+        },
+      }),
+    };
+
+    const { container } = render(
+      <TooltipProvider>
+        <CellOutputBlock cell={cell} />
+      </TooltipProvider>,
+    );
+
+    const cellElement = container.querySelector(`[data-cell-id="${id}"]`);
+    expect(cellElement).toBeTruthy();
+    expect(cellElement?.getAttribute("data-cell-name")).toBe("title");
+
+    // The wrapper's `data-cell-id` must coexist with the output's own
+    // `CellOutputId`-derived id, without colliding.
+    expect(document.getElementById(CellOutputId.create(id))).toBeTruthy();
+  });
+});

package/src/components/slides/__tests__/slide-cell-view.test.tsx

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { beforeAll, describe, expect, it } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { createCell, createCellRuntimeState } from "@/core/cells/types";
+import { SlideCellReadOnlyView } from "../slide-cell-view";
+
+beforeAll(() => {
+  SetupMocks.resizeObserver();
+});
+
+describe("SlideCellReadOnlyView", () => {
+  it("renders the cell's data-cell-id and data-cell-name so it can be targeted by custom CSS", () => {
+    const id = cellId("test");
+    const cell = {
+      ...createCell({ id, name: "title", code: "x = 1" }),
+      ...createCellRuntimeState(),
+    };
+
+    const { container } = render(
+      <TooltipProvider>
+        <SlideCellReadOnlyView cell={cell} />
+      </TooltipProvider>,
+    );
+
+    const cellElement = container.querySelector(`[data-cell-id="${id}"]`);
+    expect(cellElement).toBeTruthy();
+    expect(cellElement?.getAttribute("data-cell-name")).toBe("title");
+  });
+});

package/src/components/slides/__tests__/slide-scroll-hint.test.tsx

@@ -0,0 +1,198 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  shouldShowScrollHint,
+  SlideScrollContainer,
+} from "../slide-scroll-hint";
+
+describe("shouldShowScrollHint", () => {
+  it("shows when content overflows and scroll is at the top", () => {
+    expect(
+      shouldShowScrollHint({
+        scrollHeight: 800,
+        clientHeight: 400,
+        scrollTop: 0,
+      }),
+    ).toBe(true);
+  });
+
+  it("hides when content fits", () => {
+    expect(
+      shouldShowScrollHint({
+        scrollHeight: 300,
+        clientHeight: 400,
+        scrollTop: 0,
+      }),
+    ).toBe(false);
+  });
+
+  it("hides after the user scrolls down", () => {
+    expect(
+      shouldShowScrollHint({
+        scrollHeight: 800,
+        clientHeight: 400,
+        scrollTop: 40,
+      }),
+    ).toBe(false);
+  });
+
+  it("ignores sub-pixel overflow", () => {
+    expect(
+      shouldShowScrollHint({
+        scrollHeight: 401,
+        clientHeight: 400,
+        scrollTop: 0,
+      }),
+    ).toBe(false);
+  });
+
+  it("still shows within the top threshold", () => {
+    expect(
+      shouldShowScrollHint({
+        scrollHeight: 800,
+        clientHeight: 400,
+        scrollTop: 8,
+      }),
+    ).toBe(true);
+  });
+});
+
+describe("SlideScrollContainer", () => {
+  const resizeObservers: Array<{
+    callback: ResizeObserverCallback;
+    observe: ReturnType<typeof vi.fn>;
+    disconnect: ReturnType<typeof vi.fn>;
+  }> = [];
+
+  beforeEach(() => {
+    resizeObservers.length = 0;
+    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+      cb(0);
+      return 0;
+    });
+    vi.stubGlobal("cancelAnimationFrame", vi.fn());
+    vi.stubGlobal(
+      "ResizeObserver",
+      class MockResizeObserver {
+        callback: ResizeObserverCallback;
+        observe = vi.fn();
+        unobserve = vi.fn();
+        disconnect = vi.fn();
+
+        constructor(callback: ResizeObserverCallback) {
+          this.callback = callback;
+          resizeObservers.push(this);
+        }
+      },
+    );
+    vi.stubGlobal(
+      "MutationObserver",
+      class MockMutationObserver {
+        observe = vi.fn();
+        disconnect = vi.fn();
+        takeRecords = vi.fn(() => []);
+      },
+    );
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  function stubOverflow(
+    el: HTMLElement,
+    metrics: {
+      scrollHeight: number;
+      clientHeight: number;
+      scrollTop?: number;
+    },
+  ) {
+    Object.defineProperty(el, "scrollHeight", {
+      configurable: true,
+      get: () => metrics.scrollHeight,
+    });
+    Object.defineProperty(el, "clientHeight", {
+      configurable: true,
+      get: () => metrics.clientHeight,
+    });
+    Object.defineProperty(el, "scrollTop", {
+      configurable: true,
+      get: () => metrics.scrollTop ?? 0,
+      set: (value: number) => {
+        metrics.scrollTop = value;
+      },
+    });
+  }
+
+  it("renders a scroll hint when content overflows", () => {
+    render(
+      <SlideScrollContainer>
+        <div>tall content</div>
+      </SlideScrollContainer>,
+    );
+
+    const container = screen.getByTestId("slide-scroll-container");
+    stubOverflow(container, { scrollHeight: 900, clientHeight: 400 });
+
+    act(() => {
+      for (const observer of resizeObservers) {
+        observer.callback([], observer as unknown as ResizeObserver);
+      }
+    });
+
+    expect(screen.getByTestId("slide-scroll-hint")).toBeTruthy();
+    expect(screen.getByText("Scroll for more")).toBeTruthy();
+  });
+
+  it("hides the hint after scrolling", () => {
+    const metrics = {
+      scrollHeight: 900,
+      clientHeight: 400,
+      scrollTop: 0,
+    };
+
+    render(
+      <SlideScrollContainer>
+        <div>tall content</div>
+      </SlideScrollContainer>,
+    );
+
+    const container = screen.getByTestId("slide-scroll-container");
+    stubOverflow(container, metrics);
+
+    act(() => {
+      for (const observer of resizeObservers) {
+        observer.callback([], observer as unknown as ResizeObserver);
+      }
+    });
+    expect(screen.getByTestId("slide-scroll-hint")).toBeTruthy();
+
+    act(() => {
+      metrics.scrollTop = 50;
+      container.dispatchEvent(new Event("scroll"));
+    });
+
+    expect(screen.queryByTestId("slide-scroll-hint")).toBeNull();
+  });
+
+  it("does not show a hint when content fits", () => {
+    render(
+      <SlideScrollContainer>
+        <div>short content</div>
+      </SlideScrollContainer>,
+    );
+
+    const container = screen.getByTestId("slide-scroll-container");
+    stubOverflow(container, { scrollHeight: 200, clientHeight: 400 });
+
+    act(() => {
+      for (const observer of resizeObservers) {
+        observer.callback([], observer as unknown as ResizeObserver);
+      }
+    });
+
+    expect(screen.queryByTestId("slide-scroll-hint")).toBeNull();
+  });
+});

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

@@ -13,7 +13,9 @@ import useEvent from "react-use-event-hook";
 import { CodeIcon, ExpandIcon, EyeOffIcon } from "lucide-react";
 import { Deck, Fragment, Slide, Stack } from "@revealjs/react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { cellDomProps } from "@/components/editor/common";
 import { Slide as CellOutputSlide } from "@/components/slides/slide";
+import { SlideScrollContainer } from "@/components/slides/slide-scroll-hint";
 import { Button } from "@/components/ui/button";
 import { useFullScreenElement } from "@/components/ui/fullscreen";
 import { Tooltip } from "@/components/ui/tooltip";
@@ -303,6 +305,25 @@ function resolveSlideContentStyle(
   }
 }
 
+/**
+ * Renders a cell's output wrapped in a `data-cell-id`/`data-cell-name` div
+ * (see `cellDomProps`), so it can be targeted by custom CSS in the slides
+ * view just like it can in the vertical layout. The wrapper is required
+ * because `CellOutputSlide` sets its own `id` from `CellOutputId` (a
+ * different scheme than `HTMLCellId`) and its inner `OutputArea` uses
+ * `display: contents`, which can't be targeted for background/border styling.
+ */
+export const CellOutputBlock = ({ cell }: { cell: RuntimeCell }) => (
+  <div className="flex flex-col" {...cellDomProps(cell.id, cell.name)}>
+    <CellOutputSlide
+      cellId={cell.id}
+      status={cell.status}
+      output={cell.output}
+      stale={outputIsStale(cell, false)}
+    />
+  </div>
+);
+
 const SubslideView = ({
   subslide,
   resolveShowCode,
@@ -327,7 +348,7 @@ const SubslideView = ({
 
   return (
     <Slide>
-      <div className="h-full w-full overflow-auto flex">
+      <SlideScrollContainer>
         <div
           className={
             anyCodeShown
@@ -339,15 +360,7 @@ const SubslideView = ({
           {subslide.blocks.map((block, i) => {
             const rendered = block.cells.map((cell) => {
               if (!resolveShowCode(cell.id)) {
-                return (
-                  <CellOutputSlide
-                    key={cell.id}
-                    cellId={cell.id}
-                    status={cell.status}
-                    output={cell.output}
-                    stale={outputIsStale(cell, false)}
-                  />
-                );
+                return <CellOutputBlock key={cell.id} cell={cell} />;
               }
               return isEditable ? (
                 <SlideCellView key={cell.id} cell={cell} />
@@ -367,7 +380,7 @@ const SubslideView = ({
             return <ReactFragment key={i}>{rendered}</ReactFragment>;
           })}
         </div>
-      </div>
+      </SlideScrollContainer>
       {/* Outside any `.fragment`: shown only before any fragment is revealed. */}
       {slideLevel && <NotesAside text={slideLevel} />}
     </Slide>
@@ -405,14 +418,7 @@ const ParkedPreviewContent = ({
       <SlideCellReadOnlyView cell={cell} />
     );
   }
-  return (
-    <CellOutputSlide
-      cellId={cell.id}
-      status={cell.status}
-      output={cell.output}
-      stale={outputIsStale(cell, false)}
-    />
-  );
+  return <CellOutputBlock cell={cell} />;
 };
 
 // There is an upstream react bug in dev mode (https://github.com/facebook/react/issues/34840)

package/src/components/slides/slide-cell-view.tsx

@@ -202,7 +202,7 @@ export const SlideCellReadOnlyView = ({ cell }: { cell: RuntimeCell }) => {
   );
 
   const editor = (
-    <div className="marimo-cell">
+    <div className="marimo-cell" {...cellDomProps(cell.id, cell.name)}>
       <ReadonlyCode
         code={display.code}
         language={display.language}

package/src/components/slides/slide-scroll-hint.tsx

@@ -0,0 +1,161 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { ChevronDownIcon } from "lucide-react";
+import {
+  type ReactNode,
+  type RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "@/utils/cn";
+
+/** Pixels of scroll before the hint is considered dismissed. */
+const TOP_THRESHOLD_PX = 8;
+/** Ignore sub-pixel overflow from rounding / borders. */
+const OVERFLOW_TOLERANCE_PX = 1;
+
+/**
+ * Whether a scroll container should show a "more content below" affordance.
+ * Visible only when content overflows and the viewport is still near the top.
+ */
+export function shouldShowScrollHint(options: {
+  scrollHeight: number;
+  clientHeight: number;
+  scrollTop: number;
+}): boolean {
+  const { scrollHeight, clientHeight, scrollTop } = options;
+  const overflowing = scrollHeight > clientHeight + OVERFLOW_TOLERANCE_PX;
+  const atTop = scrollTop <= TOP_THRESHOLD_PX;
+  return overflowing && atTop;
+}
+
+/**
+ * Measure only up to the first unrevealed fragment so
+ * the hint reflects currently revealed content, not future fragment steps.
+ */
+function measureRevealedHeight(el: HTMLElement): number {
+  const firstUnrevealed = el.querySelector<HTMLElement>(
+    ".fragment:not(.visible)",
+  );
+  if (!firstUnrevealed) {
+    return el.scrollHeight;
+  }
+  const fragmentTop = firstUnrevealed.getBoundingClientRect().top;
+  return fragmentTop - el.getBoundingClientRect().top + el.scrollTop;
+}
+
+/**
+ * Tracks whether a scroll container is overflowing at the top, so we can
+ * surface a scroll affordance.
+ */
+function useScrollHint(
+  scrollRef: RefObject<HTMLElement | null>,
+  contentRef: RefObject<HTMLElement | null>,
+): boolean {
+  const [showHint, setShowHint] = useState(false);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    const content = contentRef.current;
+    if (!el || !content) {
+      return;
+    }
+
+    let frame = 0;
+    const update = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        setShowHint(
+          shouldShowScrollHint({
+            scrollHeight: measureRevealedHeight(el),
+            clientHeight: el.clientHeight,
+            scrollTop: el.scrollTop,
+          }),
+        );
+      });
+    };
+
+    update();
+
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(el);
+    resizeObserver.observe(content);
+
+    // Fragments reveal via class changes (opacity/visibility, no layout shift),
+    // which the ResizeObserver can't see, so re-check on class mutations. Only
+    // attach on slides that have fragments to avoid reacting to unrelated class
+    // churn (e.g. animating widgets) on the common non-fragment slide.
+    const fragmentObserver = content.querySelector(".fragment")
+      ? new MutationObserver(update)
+      : null;
+    fragmentObserver?.observe(content, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    el.addEventListener("scroll", update, { passive: true });
+
+    return () => {
+      cancelAnimationFrame(frame);
+      resizeObserver.disconnect();
+      fragmentObserver?.disconnect();
+      el.removeEventListener("scroll", update);
+    };
+  }, [scrollRef, contentRef]);
+
+  return showHint;
+}
+
+const ScrollHintOverlay = ({ className }: { className?: string }) => {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-x-0 bottom-0 z-10 flex flex-col items-center",
+        "animate-in fade-in-0 duration-200",
+        className,
+      )}
+      data-testid="slide-scroll-hint"
+      aria-hidden={true}
+    >
+      <div className="h-16 w-full bg-linear-to-t from-background via-background/80 to-transparent" />
+      <div className="absolute bottom-3 flex items-center gap-1 rounded-full border border-border/60 bg-background/90 px-2.5 py-1 text-xs text-muted-foreground shadow-sm backdrop-blur-sm">
+        <ChevronDownIcon className="h-3.5 w-3.5" />
+        <span>Scroll for more</span>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Full-height scroll container for a slide. Shows a dismissible "Scroll for
+ * more" cue when content overflows the frame (easy to miss in fullscreen when
+ * OS overlay scrollbars are hidden).
+ */
+export const SlideScrollContainer = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const showHint = useScrollHint(scrollRef, contentRef);
+
+  return (
+    <div className={cn("relative h-full w-full", className)}>
+      <div
+        ref={scrollRef}
+        className="h-full w-full overflow-auto"
+        data-testid="slide-scroll-container"
+      >
+        <div ref={contentRef} className="flex w-full min-h-full">
+          {children}
+        </div>
+      </div>
+      {showHint && <ScrollHintOverlay />}
+    </div>
+  );
+};

package/src/components/slides/slides.css

@@ -15,8 +15,10 @@
     width: unset;
   }
 
-  /* If the first output is the only child, make it flex 1 */
-  > *:only-child > .output:only-child {
+  /* If the first output is the only child, make it flex 1. Cells are wrapped
+     in a `data-cell-id`/`data-cell-name` div (see `cellDomProps`), so `.output`
+     is a grandchild rather than a direct child here. */
+  > *:only-child:has(> .output:only-child, > * > .output:only-child) {
     flex: 1;
   }
 

package/src/components/static-html/share-modal.tsx

@@ -40,7 +40,7 @@ export const ShareStaticNotebookModal: React.FC<{
           e.preventDefault();
 
           onClose();
-          const html = await exportAsHTML({
+          const { contents: html } = await exportAsHTML({
             download: false,
             includeCode: true,
             files: VirtualFileTracker.INSTANCE.filenames(),

package/src/components/ui/input.tsx

@@ -195,7 +195,7 @@ export const OnBlurredInput = React.forwardRef<
       onChange={(event) => setInternalValue(event.target.value)}
       onBlur={() => setValue(internalValue || "")}
       onKeyDown={(event) => {
-        if (event.key !== "Enter") {
+        if (event.key !== "Enter" || event.shiftKey) {
           return;
         }
         setValue(internalValue || "");

package/src/core/ai/context/providers/file.ts

@@ -10,8 +10,7 @@ import {
 import { toast } from "@/components/ui/use-toast";
 import { contextCallbacks } from "@/core/codemirror/ai/state";
 import type { EditRequests, FileInfo, RunRequests } from "@/core/network/types";
-import { deserializeBlob } from "@/utils/blob";
-import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
+import { fileDetailsToBlob } from "@/utils/blob";
 import { Logger } from "@/utils/Logger";
 import { type AIContextItem, AIContextProvider } from "../registry";
 import { contextToXml } from "../utils";
@@ -219,33 +218,13 @@ export class FileContextProvider extends AIContextProvider<FileContextItem> {
 
         const mimeType = fileDetails.mimeType || "text/plain";
 
-        // Handle binary vs text files
-        let blob: Blob;
-        if (
-          mimeType.startsWith("text/") ||
-          mimeType.includes("json") ||
-          mimeType.includes("xml")
-        ) {
-          // Text files - create blob directly from contents
-          blob = new Blob([fileDetails.contents || ""], { type: mimeType });
-        } else {
-          // Binary files - use blob utility to decode base64
-          if (fileDetails.contents) {
-            try {
-              // Create data URL using utility and deserialize blob
-              const dataURL = base64ToDataURL(
-                fileDetails.contents as Base64String,
-                mimeType,
-              );
-              blob = deserializeBlob(dataURL);
-            } catch {
-              // Fallback to treating as text
-              blob = new Blob([fileDetails.contents], { type: mimeType });
-            }
-          } else {
-            blob = new Blob([""], { type: mimeType });
-          }
-        }
+        // The backend's `isBase64` flag authoritatively distinguishes binary
+        // (base64-encoded) from UTF-8 text contents.
+        const blob = fileDetailsToBlob({
+          contents: fileDetails.contents ?? "",
+          mimeType,
+          isBase64: fileDetails.isBase64 ?? false,
+        });
 
         const file = new File([blob], name, { type: mimeType });
         addAttachment(file);

package/src/core/cells/__tests__/cells.test.ts

@@ -1870,8 +1870,18 @@ describe("cell reducer", () => {
 
   it("can clear logs", () => {
     state.cellLogs = [
-      { level: "stderr", message: "log1", timestamp: 0, cellId: firstCellId },
-      { level: "stderr", message: "log1", timestamp: 0, cellId: firstCellId },
+      {
+        level: "stderr",
+        message: "log1",
+        timestamp: 0,
+        source: { type: "cell", cellId: firstCellId },
+      },
+      {
+        level: "stderr",
+        message: "log1",
+        timestamp: 0,
+        source: { type: "cell", cellId: firstCellId },
+      },
     ];
     actions.clearLogs();
     expect(state.cellLogs).toEqual([]);

package/src/core/cells/__tests__/logs.test.ts

@@ -46,7 +46,7 @@ describe("getCellLogsForMessage", () => {
       timestamp: 1_234_567_890,
       level: "stdout",
       message: "Hello, World!",
-      cellId: "cell-1",
+      source: { type: "cell", cellId: "cell-1" },
     });
   });
 
@@ -74,7 +74,7 @@ describe("getCellLogsForMessage", () => {
       timestamp: 1_234_567_890,
       level: "stderr",
       message: "Error occurred",
-      cellId: "cell-2",
+      source: { type: "cell", cellId: "cell-2" },
     });
   });
 
@@ -102,7 +102,7 @@ describe("getCellLogsForMessage", () => {
       timestamp: 1_234_567_890,
       level: "stdout",
       message: "Error: Something went wrong",
-      cellId: "cell-3",
+      source: { type: "cell", cellId: "cell-3" },
     });
   });
 
@@ -130,7 +130,7 @@ describe("getCellLogsForMessage", () => {
       timestamp: 1_234_567_890,
       level: "stderr",
       message: "Critical Error: System failure",
-      cellId: "cell-4",
+      source: { type: "cell", cellId: "cell-4" },
     });
   });
 
@@ -157,7 +157,7 @@ describe("getCellLogsForMessage", () => {
     expect(logs[0].level).toBe("stderr"); // marimo-error should be treated as stderr
     expect(logs[0].message).toContain("Traceback (most recent call last):");
     expect(logs[0].message).toContain('File "test.py", line 1');
-    expect(logs[0].cellId).toBe("cell-5");
+    expect(logs[0].source).toEqual({ type: "cell", cellId: "cell-5" });
   });
 
   test("handles multiple console outputs with different MIME types", () => {