@marimo-team/islands 0.25.3-dev31 → 0.25.3-dev311

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

@@ -28,6 +28,7 @@ import { viewStateAtom } from "@/core/mode";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { splitMangledLocals } from "@/utils/local-variables";
 import type { MarimoError } from "../../../core/kernel/messages";
+import type { CellError, HostDiagnostic } from "@/core/executions";
 import { cn } from "../../../utils/cn";
 import { Alert, AlertTitle } from "../../ui/alert";
 import { openPackageManager } from "../chrome/panels/packages-utils";
@@ -95,7 +96,7 @@ const Tip = (props: {
 
 interface Props {
   cellId: CellId | undefined;
-  errors: MarimoError[];
+  errors: readonly CellError[];
   code?: string;
   className?: string;
 }
@@ -207,7 +208,8 @@ export const MarimoErrorOutput = ({
       e.type === "ancestor-stopped",
   );
   const syntaxErrors = errors.filter(
-    (e): e is Extract<MarimoError, { type: "syntax" }> => e.type === "syntax",
+    (e): e is Extract<MarimoError, { type: "syntax" | "lazy-import" }> =>
+      e.type === "syntax" || e.type === "lazy-import",
   );
   const unknownErrors = errors.filter(
     (e): e is Extract<MarimoError, { type: "unknown" }> => e.type === "unknown",
@@ -216,6 +218,13 @@ export const MarimoErrorOutput = ({
     (e): e is Extract<MarimoError, { type: "sql-error" }> =>
       e.type === "sql-error",
   );
+  const diagnostics = errors.filter(
+    (e): e is HostDiagnostic => e.type === "diagnostic",
+  );
+  // The report describes kernel errors; a host diagnostic is already prose.
+  const kernelErrors = errors.filter(
+    (e): e is MarimoError => e.type !== "diagnostic",
+  );
   const openScratchpad = () => {
     chromeActions.openApplication("scratchpad");
   };
@@ -277,6 +286,32 @@ export const MarimoErrorOutput = ({
       );
     }
 
+    if (diagnostics.length > 0) {
+      messages.push(
+        <div key="diagnostics">
+          {diagnostics.map((diagnostic) => (
+            <div key={`${diagnostic.kind}:${diagnostic.msg}`}>
+              <p className="text-muted-foreground font-medium">
+                {diagnostic.msg}
+              </p>
+              {diagnostic.related.length > 0 && (
+                <ul className="list-disc">
+                  {diagnostic.related.map((cell) => (
+                    <li
+                      className={liStyle}
+                      key={`${cell.cell_id}:${cell.message}`}
+                    >
+                      <CellLinkError cellId={cell.cell_id} /> {cell.message}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          ))}
+        </div>,
+      );
+    }
+
     if (setupErrors.length > 0) {
       messages.push(
         <div key="setup-refs">
@@ -739,9 +774,11 @@ export const MarimoErrorOutput = ({
     >
       {title}
       <div className="flex flex-col gap-4">{renderMessages()}</div>
-      {cellId && errors.length > 0 && (
+      {cellId && kernelErrors.length > 0 && (
         <SendErrorReportButton
-          getContent={() => buildErrorReport(cellId, { code, errors })}
+          getContent={() =>
+            buildErrorReport(cellId, { code, errors: kernelErrors })
+          }
         />
       )}
     </Alert>

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

@@ -248,21 +248,22 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
             <Tooltip content={tooltipContent}>
               <button
                 type="button"
-                className="ml-1 p-1 rounded-sm hover:bg-muted transition-all inline"
+                aria-label={
+                  debuggerEnabled ? "Toggle breakpoint" : "Insert breakpoint"
+                }
+                className="ml-1 p-1 rounded-sm hover:bg-muted transition-colors inline"
+                onClick={() => {
+                  if (debuggerEnabled && !isStaticNotebook()) {
+                    toggleBreakpoint(info.cellId, info.lineNumber);
+                    return;
+                  }
+                  const view = getCellEditorView(info.cellId);
+                  if (view) {
+                    insertDebuggerAtLine(view, info.lineNumber);
+                  }
+                }}
               >
-                <BugPlayIcon
-                  onClick={() => {
-                    if (debuggerEnabled && !isStaticNotebook()) {
-                      toggleBreakpoint(info.cellId, info.lineNumber);
-                      return;
-                    }
-                    const view = getCellEditorView(info.cellId);
-                    if (view) {
-                      insertDebuggerAtLine(view, info.lineNumber);
-                    }
-                  }}
-                  className="h-3 w-3"
-                />
+                <BugPlayIcon className="h-3 w-3" />
               </button>
             </Tooltip>
           )}
@@ -272,9 +273,10 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
   }
   if (info?.kind === "file") {
     return (
-      <div
+      <button
+        type="button"
         className="inline-block cursor-pointer text-destructive hover:underline"
-        onClick={(_) => {
+        onClick={() => {
           getRequestClient().openFile({
             path: info.filePath,
             lineNumber: info.lineNumber,
@@ -282,7 +284,7 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
         }}
       >
         <span className="nb">"{info.filePath}"</span>
-      </div>
+      </button>
     );
   }
 };

package/src/components/editor/output/Outputs.css

@@ -24,6 +24,14 @@
   max-width: 100%;
 }
 
+.output audio,
+.output-area audio,
+.media audio {
+  width: 100%;
+  max-width: 100%;
+  transform: translateZ(0);
+}
+
 .output {
   position: relative;
 

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

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { JSX } from "react";
+import { useSanitizeHtml } from "@/plugins/core/sanitize";
 
 interface Props {
   src: string;
@@ -7,5 +8,10 @@ interface Props {
 }
 
 export const VideoOutput = ({ src, className }: Props): JSX.Element => {
+  const shouldSanitize = useSanitizeHtml();
+  if (shouldSanitize) {
+    return <video className={className} src={src} controls={true} />;
+  }
+  // oxlint-disable-next-line react/iframe-missing-sandbox, react-doctor/iframe-missing-sandbox -- Trusted notebook output can include active documents.
   return <iframe className={className} src={src} title="Video output" />;
 };

package/src/components/editor/output/__tests__/VideoOutput.test.tsx

@@ -0,0 +1,131 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, render } from "@testing-library/react";
+import { Provider } from "jotai";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { hasRunAnyCellAtom } from "@/components/editor/cell/useRunCells";
+import { OutputRenderer } from "@/components/editor/Output";
+import { configOverridesAtom } from "@/core/config/config";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import { VideoOutput } from "../VideoOutput";
+
+function snapshotTrustState() {
+  return {
+    hasRunAnyCell: store.get(hasRunAnyCellAtom),
+    overrides: store.get(configOverridesAtom),
+    mode: store.get(initialModeAtom),
+    exportContext: window.__MARIMO_EXPORT_CONTEXT__,
+  };
+}
+
+describe("VideoOutput", () => {
+  let previous: ReturnType<typeof snapshotTrustState>;
+
+  beforeEach(() => {
+    previous = snapshotTrustState();
+    store.set(hasRunAnyCellAtom, false);
+    store.set(configOverridesAtom, { runtime: { auto_instantiate: false } });
+    store.set(initialModeAtom, "edit");
+    delete window.__MARIMO_EXPORT_CONTEXT__;
+  });
+
+  afterEach(() => {
+    store.set(hasRunAnyCellAtom, previous.hasRunAnyCell);
+    store.set(configOverridesAtom, previous.overrides);
+    store.set(initialModeAtom, previous.mode);
+    if (previous.exportContext) {
+      window.__MARIMO_EXPORT_CONTEXT__ = previous.exportContext;
+    } else {
+      delete window.__MARIMO_EXPORT_CONTEXT__;
+    }
+  });
+
+  function renderVideo(src = "https://example.com/video.mp4") {
+    return render(
+      <Provider store={store}>
+        <VideoOutput src={src} className="output" />
+      </Provider>,
+    );
+  }
+
+  it.each([
+    "https://example.com/video.mp4",
+    "data:video/mp4;base64,AAAA",
+    "./@file/123-video.mp4",
+  ])("preserves the media source and controls before execution: %s", (src) => {
+    const { container } = renderVideo(src);
+    const video = container.querySelector("video");
+    expect(video).toHaveAttribute("src", src);
+    expect(video).toHaveAttribute("controls");
+    expect(video).toHaveClass("output");
+    expect(container.querySelector("iframe")).toBeNull();
+  });
+
+  it("keeps direct and JSON video outputs out of frames before execution", () => {
+    const src = `data:text/html,${encodeURIComponent("<script>parent.postMessage('cached-video', '*')</script>")}`;
+    const { container } = render(
+      <Provider store={store}>
+        <OutputRenderer
+          message={{ channel: "output", mimetype: "video/mp4", data: src }}
+        />
+        <OutputRenderer
+          message={{
+            channel: "output",
+            mimetype: "application/json",
+            data: { video: `video/mp4:${src}` },
+          }}
+        />
+      </Provider>,
+    );
+    expect(container.querySelector("iframe")).toBeNull();
+    const videos = container.querySelectorAll("video");
+    expect(videos).toHaveLength(2);
+    for (const video of videos) {
+      expect(video).toHaveAttribute("src", src);
+    }
+  });
+
+  it("updates an existing output after the user runs a cell", () => {
+    const { container } = renderVideo();
+    expect(container.querySelector("video")).not.toBeNull();
+    act(() => store.set(hasRunAnyCellAtom, true));
+    expect(container.querySelector("video")).toBeNull();
+    expect(container.querySelector("iframe")).toHaveAttribute(
+      "src",
+      "https://example.com/video.mp4",
+    );
+  });
+
+  it.each(["app", "auto-instantiate", "export"] as const)(
+    "preserves iframe output in a trusted %s context",
+    (context) => {
+      switch (context) {
+        case "app":
+          store.set(initialModeAtom, "read");
+          break;
+        case "auto-instantiate":
+          store.set(configOverridesAtom, {
+            runtime: { auto_instantiate: true },
+          });
+          break;
+        case "export":
+          window.__MARIMO_EXPORT_CONTEXT__ = { trusted: true };
+          break;
+      }
+      const { container } = renderVideo();
+      expect(container.querySelector("video")).toBeNull();
+      expect(container.querySelector("iframe")).toHaveAttribute(
+        "title",
+        "Video output",
+      );
+      expect(container.querySelector("iframe")).toHaveClass("output");
+    },
+  );
+
+  it("uses native video before the app mode is initialized", () => {
+    store.set(initialModeAtom, undefined);
+    const { container } = renderVideo();
+    expect(container.querySelector("video")).not.toBeNull();
+    expect(container.querySelector("iframe")).toBeNull();
+  });
+});

package/src/components/editor/output/__tests__/traceback.test.tsx

@@ -1,11 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { Tracebacks } from "@/__mocks__/tracebacks";
 import { cellId } from "@/__tests__/branded";
+import { toggleBreakpoint } from "@/core/codemirror/cells/debugger-state";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { initialModeAtom } from "@/core/mode";
 import { requestClientAtom } from "@/core/network/requests";
@@ -19,7 +20,32 @@ import {
 
 const cid = cellId("1");
 
+vi.mock("@/core/config/feature-flag", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/core/config/feature-flag")>()),
+  getFeatureFlag: (flag: string) => flag === "debugger",
+}));
+vi.mock("@/core/codemirror/cells/debugger-state", async (importOriginal) => ({
+  ...(await importOriginal<
+    typeof import("@/core/codemirror/cells/debugger-state")
+  >()),
+  toggleBreakpoint: vi.fn(),
+}));
+
 describe("traceback component", () => {
+  test("activates the breakpoint from the named button itself", () => {
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cid} />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const buttons = screen.getAllByRole("button", {
+      name: "Toggle breakpoint",
+    });
+    fireEvent.click(buttons[0]);
+    expect(toggleBreakpoint).toHaveBeenCalledOnce();
+  });
   beforeEach(() => {
     vi.resetAllMocks();
     store.set(initialModeAtom, "edit");

package/src/components/editor/output/ansi-reduce.ts

@@ -358,6 +358,7 @@ export class AnsiReducer {
 
 export type StringOutputMessage = Omit<OutputMessage, "data"> & {
   data: string;
+  id?: number;
 };
 
 /**
@@ -369,6 +370,9 @@ export class StatefulOutputMessage implements OutputMessage {
   public readonly channel: OutputMessage["channel"];
   public readonly timestamp: OutputMessage["timestamp"];
   public readonly code: OutputMessage["code"];
+  public readonly id: StringOutputMessage["id"];
+  /** The prompt this entry is, when it asks for input. A reply names it. */
+  public readonly input_id: OutputMessage["input_id"];
   private ansiReducer = new AnsiReducer();
   private _data: string;
 
@@ -379,39 +383,55 @@ export class StatefulOutputMessage implements OutputMessage {
   public static create(message: StringOutputMessage): StatefulOutputMessage {
     const ansiReducer = new AnsiReducer();
     ansiReducer.append(message.data);
-    return new StatefulOutputMessage(
-      message.mimetype,
-      message.channel,
-      message.timestamp,
+    return new StatefulOutputMessage({
+      mimetype: message.mimetype,
+      channel: message.channel,
+      timestamp: message.timestamp,
       ansiReducer,
-      message.code,
-    );
+      code: message.code,
+      id: message.id,
+      input_id: message.input_id,
+    });
   }
 
-  private constructor(
-    mimetype: OutputMessage["mimetype"],
-    channel: OutputMessage["channel"],
-    timestamp: OutputMessage["timestamp"],
-    ansiReducer: AnsiReducer,
-    code: OutputMessage["code"],
-  ) {
+  private constructor({
+    mimetype,
+    channel,
+    timestamp,
+    ansiReducer,
+    code,
+    id,
+    input_id,
+  }: {
+    mimetype: OutputMessage["mimetype"];
+    channel: OutputMessage["channel"];
+    timestamp: OutputMessage["timestamp"];
+    ansiReducer: AnsiReducer;
+    code: OutputMessage["code"];
+    id: StringOutputMessage["id"];
+    input_id: OutputMessage["input_id"];
+  }) {
     this.mimetype = mimetype;
     this.channel = channel;
     this.timestamp = timestamp;
     this.code = code;
+    this.id = id;
+    this.input_id = input_id;
     this.ansiReducer = ansiReducer;
     this._data = this.ansiReducer.render();
   }
 
   public appendData(chunk: string): StatefulOutputMessage {
     this.ansiReducer.append(chunk);
-    return new StatefulOutputMessage(
-      this.mimetype,
-      this.channel,
-      this.timestamp,
-      this.ansiReducer,
-      this.code,
-    );
+    return new StatefulOutputMessage({
+      mimetype: this.mimetype,
+      channel: this.channel,
+      timestamp: this.timestamp,
+      ansiReducer: this.ansiReducer,
+      code: this.code,
+      id: this.id,
+      input_id: this.input_id,
+    });
   }
 
   public toJSON(): StringOutputMessage {

package/src/components/editor/output/console/ConsoleOutput.tsx

@@ -6,7 +6,7 @@ import {
   ChevronsUpDownIcon,
   WrapTextIcon,
 } from "lucide-react";
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
 import { ToggleButton } from "react-aria-components";
 import { DebuggerControls } from "@/components/debugger/debugger-code";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
@@ -16,8 +16,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
 import { isInternalCellName } from "@/core/cells/names";
 import { useExpandedConsoleOutput } from "@/core/cells/outputs";
-import type { WithResponse } from "@/core/cells/types";
-import type { OutputMessage } from "@/core/kernel/messages";
+import type { ConsoleOutputMessage } from "@/core/cells/types";
 import {
   type UseInputHistoryReturn,
   useInputHistory,
@@ -49,31 +48,21 @@ export const CONSOLE_CLEAR_DEBOUNCE_MS = 200;
  */
 function useDebouncedConsoleOutputs<T>(outputs: T[]): T[] {
   const [debouncedOutputs, setDebouncedOutputs] = useState(outputs);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Non-empty outputs: apply immediately and cancel any pending clear
+  // Non-empty outputs: apply immediately. Effect cleanup cancels pending clears.
   if (outputs.length > 0 && debouncedOutputs !== outputs) {
-    if (timerRef.current !== null) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
     setDebouncedOutputs(outputs);
   }
 
   // Empty outputs: delay the clear so new outputs can arrive first
   useEffect(() => {
-    if (outputs.length === 0 && timerRef.current === null) {
-      timerRef.current = setTimeout(() => {
-        timerRef.current = null;
-        setDebouncedOutputs([]);
-      }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    if (outputs.length > 0) {
+      return;
     }
-    return () => {
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-    };
+    const timer = setTimeout(() => {
+      setDebouncedOutputs([]);
+    }, CONSOLE_CLEAR_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
   }, [outputs]);
 
   return debouncedOutputs;
@@ -83,7 +72,7 @@ interface Props {
   cellId: CellId;
   cellName: string;
   className?: string;
-  consoleOutputs: WithResponse<OutputMessage>[];
+  consoleOutputs: ConsoleOutputMessage[];
   stale: boolean;
   interrupted: boolean;
   debuggerActive: boolean;
@@ -251,19 +240,24 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
             return null;
           }
 
+          const originalIdx = consoleOutputs.length - idx - 1;
+          // Outputs render in reverse, so the reversed index shifts on every
+          // new line. The assigned id survives collapse and truncation. The
+          // original position is the fallback for outputs without one.
+          const key = output.id ?? `position-${originalIdx}`;
+
           if (output.channel === "stdin") {
             invariant(
               typeof output.data === "string",
               "Expected data to be a string",
             );
 
-            const originalIdx = consoleOutputs.length - idx - 1;
             const isPassword = output.mimetype === "text/password";
 
             if (output.response == null && lastStdInputIdx === idx) {
               return (
                 <StdInput
-                  key={idx}
+                  key={key}
                   output={output.data}
                   isPdb={isPdb}
                   isPassword={isPassword}
@@ -278,7 +272,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
 
             return (
               <StdInputWithResponse
-                key={idx}
+                key={key}
                 output={output.data}
                 response={output.response}
                 isPassword={isPassword}
@@ -288,7 +282,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
           }
 
           return (
-            <React.Fragment key={idx}>
+            <React.Fragment key={key}>
               <OutputRenderer
                 cellId={cellId}
                 onRefactorWithAI={onRefactorWithAI}