@marimo-team/frontend 0.23.16-dev6 → 0.23.16-dev62

package/src/components/forms/form.tsx

@@ -74,17 +74,24 @@ export const ZodForm = <T extends FieldValues>({
   return (
     <FormProvider {...form}>
       {children}
-      {renderZodSchema(schema, form, path, renderers)}
+      {renderZodSchema({ schema, form, path, renderers })}
     </FormProvider>
   );
 };
 
-export function renderZodSchema<T extends FieldValues, S>(
-  schema: z.ZodType<S>,
-  form: UseFormReturn<T>,
-  path: Path<T>,
-  renderers: FormRenderer<T>[],
-) {
+export interface RenderZodSchemaOptions<T extends FieldValues, S> {
+  schema: z.ZodType<S>;
+  form: UseFormReturn<T>;
+  path: Path<T>;
+  renderers: FormRenderer<T>[];
+}
+
+export function renderZodSchema<T extends FieldValues, S>({
+  schema,
+  form,
+  path,
+  renderers,
+}: RenderZodSchemaOptions<T, S>) {
   // Try custom renderers first
   for (const renderer of renderers) {
     const { isMatch, Component } = renderer;
@@ -107,7 +114,7 @@ export function renderZodSchema<T extends FieldValues, S>(
       !inner.description && schema.description
         ? inner.describe(schema.description)
         : inner;
-    return renderZodSchema(inner, form, path, renderers);
+    return renderZodSchema({ schema: inner, form, path, renderers });
   }
 
   if (schema instanceof z.ZodOptional) {
@@ -116,7 +123,7 @@ export function renderZodSchema<T extends FieldValues, S>(
       !inner.description && schema.description
         ? inner.describe(schema.description)
         : inner;
-    return renderZodSchema(inner, form, path, renderers);
+    return renderZodSchema({ schema: inner, form, path, renderers });
   }
 
   if (schema instanceof z.ZodObject) {
@@ -134,12 +141,12 @@ export function renderZodSchema<T extends FieldValues, S>(
         <FormLabel>{label}</FormLabel>
         {Objects.entries(schema.shape).map(([key, value]) => {
           const isLiteral = value instanceof z.ZodLiteral;
-          const childForm = renderZodSchema(
-            value as z.ZodType,
+          const childForm = renderZodSchema({
+            schema: value as z.ZodType,
             form,
-            joinPath(path, key),
+            path: joinPath(path, key),
             renderers,
-          );
+          });
 
           if (isLiteral) {
             return <React.Fragment key={key}>{childForm}</React.Fragment>;
@@ -189,16 +196,24 @@ export function renderZodSchema<T extends FieldValues, S>(
         name={path}
         render={({ field }) => (
           <FormItem>
-            <div className="flex flex-row items-start space-x-2">
-              <FormLabel>{label}</FormLabel>
-              <FormDescription>{description}</FormDescription>
+            <div
+              className={cn(
+                "flex flex-row gap-2",
+                description ? "items-start" : "items-center",
+              )}
+            >
               <FormControl>
                 <Checkbox
                   data-testid="marimo-plugin-data-frames-boolean-checkbox"
                   checked={field.value}
                   onCheckedChange={field.onChange}
+                  className={description ? "mt-0.5" : undefined}
                 />
               </FormControl>
+              <div className="flex flex-col gap-1">
+                <FormLabel>{label}</FormLabel>
+                <FormDescription>{description}</FormDescription>
+              </div>
             </div>
             <FormMessage />
           </FormItem>
@@ -363,13 +378,13 @@ export function renderZodSchema<T extends FieldValues, S>(
 
           return (
             <div className="flex flex-col">
-              <FormLabel>{label}</FormLabel>
-              <div className="flex border-b mb-4 -mt-2">
+              <FormLabel className="mb-2">{label}</FormLabel>
+              <div className="flex border-b mb-4">
                 {types.map((type: string) => (
                   <button
                     key={type}
                     type="button"
-                    className={`px-4 py-2 ${
+                    className={`px-4 py-2 text-sm ${
                       unionTypeValue === type
                         ? "border-b-2 border-primary font-medium"
                         : "text-muted-foreground"
@@ -389,7 +404,12 @@ export function renderZodSchema<T extends FieldValues, S>(
               </div>
               <div className="flex flex-col" key={unionTypeValue}>
                 {selectedOption &&
-                  renderZodSchema(selectedOption, form, path, renderers)}
+                  renderZodSchema({
+                    schema: selectedOption,
+                    form,
+                    path,
+                    renderers,
+                  })}
               </div>
             </div>
           );
@@ -434,7 +454,12 @@ export function renderZodSchema<T extends FieldValues, S>(
                 })}
               </NativeSelect>
               {selectedOption &&
-                renderZodSchema(selectedOption, form, path, renderers)}
+                renderZodSchema({
+                  schema: selectedOption,
+                  form,
+                  path,
+                  renderers,
+                })}
             </div>
           );
         }}
@@ -459,10 +484,15 @@ export function renderZodSchema<T extends FieldValues, S>(
   }
   if ("unwrap" in schema) {
     // Handle ZodEffects (transforms/refinements)
-    return renderZodSchema(maybeUnwrap(schema), form, path, renderers);
+    return renderZodSchema({
+      schema: maybeUnwrap(schema),
+      form,
+      path,
+      renderers,
+    });
   }
   if (isZodPipe(schema)) {
-    return renderZodSchema(schema.in, form, path, renderers);
+    return renderZodSchema({ schema: schema.in, form, path, renderers });
   }
 
   return (
@@ -512,7 +542,12 @@ const FormArray = ({
             key={field.id}
             onKeyDown={Events.onEnter((e) => e.preventDefault())}
           >
-            {renderZodSchema(schema, form, `${path}[${index}]`, renderers)}
+            {renderZodSchema({
+              schema,
+              form,
+              path: `${path}[${index}]`,
+              renderers,
+            })}
             {canRemove && (
               <Trash2Icon
                 className="w-4 h-4 ml-2 my-1 text-muted-foreground hover:text-destructive cursor-pointer absolute right-0 top-5"

package/src/components/forms/options.ts

@@ -28,7 +28,8 @@ export interface FieldOptions {
     | "date"
     | "datetime"
     | "time"
-    | "tabs";
+    | "tabs"
+    | "secret_textarea";
   /**
    * Only show options that match the regex
    */

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/reveal-component.tsx

@@ -13,6 +13,7 @@ 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";
@@ -304,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,
@@ -340,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} />
@@ -406,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/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", () => {

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}`,
     );
   },
 };

package/src/core/codemirror/cm.ts

@@ -50,6 +50,7 @@ import type { HotkeyProvider } from "../hotkeys/hotkeys";
 import { requestEditCompletion } from "./ai/request";
 import { cellBundle } from "./cells/extensions";
 import type { CodemirrorCellActions } from "./cells/state";
+import { codeLensBundle } from "./code-lens/extension";
 import { jupyterHelpExtension } from "./compat/jupyter";
 import { hintTooltip } from "./completion/hints";
 import { completionKeymap } from "./completion/keymap";
@@ -198,6 +199,8 @@ export const setupCodeMirror = (opts: CodeMirrorSetupOpts): Extension[] => {
       cellId,
       displayConfig.reference_highlighting ?? true,
     ),
+    // Inline icons linking datasources/buckets/caches to their panels
+    codeLensBundle(cellId),
   ];
 };