@marimo-team/frontend 0.23.16-dev4 → 0.23.16-dev41

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/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", () => {

package/src/core/cells/cells.ts

@@ -28,7 +28,7 @@ import { findCollapseRange, mergeOutlines } from "../dom/outline";
 import type { CellMessage } from "../kernel/messages";
 import { isErrorMime } from "../mime";
 import type { CellConfig } from "../network/types";
-import { isRtcEnabled } from "../rtc/state";
+import { canUseRtc, isRtcEnabled } from "../rtc/state";
 import { createDeepEqualAtom, store } from "../state/jotai";
 import { isWasm } from "../wasm/utils";
 import { prepareCellForExecution, transitionCell } from "./cell";
@@ -927,6 +927,12 @@ const {
       cellLogs: [...nextState.cellLogs, ...getCellLogsForMessage(message)],
     };
   },
+  addLogs: (state, action: { logs: CellLog[] }) => {
+    return {
+      ...state,
+      cellLogs: [...state.cellLogs, ...action.logs],
+    };
+  },
   setCellIds: (state, action: { cellIds: CellId[] }) => {
     const isTheSame = isEqual(state.cellIds.inOrderIds, action.cellIds);
     if (isTheSame) {
@@ -1037,9 +1043,9 @@ const {
         };
       }
 
-      // Update codemirror if mounted
-      // If RTC is enabled, the editor view will already be updated, so we don't need to do this
-      if (!isRtcEnabled()) {
+      // Update codemirror if mounted. RTC-backed cells sync via Loro; others
+      // (e.g. scratchpad) still need an explicit editor update.
+      if (!isRtcEnabled() || !canUseRtc(cellId)) {
         const cellHandle = nextState.cellHandles[cellId].current;
         if (cellHandle?.editorViewOrNull) {
           updateEditorCodeFromPython(cellHandle.editorViewOrNull, code);
@@ -1698,6 +1704,13 @@ export {
   notebookAtom,
 };
 
+/** Actions for dispatching outside of React. */
+const imperativeActions = createActions((action) => {
+  store.set(notebookAtom, (state) => reducer(state, action));
+});
+
+export const addLogs = imperativeActions.addLogs;
+
 /// ATOMS
 
 export const cellIdsAtom = atom((get) => get(notebookAtom).cellIds);

package/src/core/cells/document-changes.ts

@@ -369,6 +369,7 @@ export function toDocumentChanges(
     case "clearCellConsoleOutput":
     case "clearAllCellOutputs":
     case "clearLogs":
+    case "addLogs":
       return [];
 
     // Editor UI state — no document changes.

package/src/core/cells/logs.ts

@@ -13,11 +13,21 @@ import { tracebackModalAtom } from "../errors/traceback-atom";
 import React from "react";
 import { ToastAction } from "@/components/ui/toast";
 
+/** Logs come from a cell, or from a language server, which has no cell. */
+export type LogSource =
+  | { type: "cell"; cellId: CellId }
+  | { type: "lsp"; name: string };
+
 export interface CellLog {
+  /** Unix timestamp, in seconds. */
   timestamp: number;
   level: "stdout" | "stderr";
   message: string;
-  cellId: CellId;
+  source: LogSource;
+}
+
+export function logSourceLabel(source: LogSource): string {
+  return source.type === "cell" ? source.cellId : `lsp:${source.name}`;
 }
 
 let didAlreadyToastError = false;
@@ -48,7 +58,7 @@ export function getCellLogsForMessage(cell: CellMessage): CellLog[] {
             timestamp: output.timestamp || Date.now(),
             level: isError ? "stderr" : "stdout",
             message: message,
-            cellId: cell.cell_id,
+            source: { type: "cell", cellId: cell.cell_id },
           });
           break;
         }
@@ -71,7 +81,7 @@ export function getCellLogsForMessage(cell: CellMessage): CellLog[] {
     cell.output.data.forEach((error) => {
       CellLogLogger.log({
         level: "stderr",
-        cellId: cell.cell_id,
+        source: { type: "cell", cellId: cell.cell_id },
         timestamp: cell.timestamp ?? 0,
         message: JSON.stringify(error),
       });
@@ -150,7 +160,7 @@ const CellLogLogger = {
       `%c[${status}]`,
       `color:${color}; padding:2px 0; border-radius:2px; font-weight:bold`,
       `[${formatLogTimestamp(payload.timestamp)}]`,
-      `(${payload.cellId}) ${payload.message}`,
+      `(${logSourceLabel(payload.source)}) ${payload.message}`,
     );
   },
 };