@marimo-team/islands 0.25.3-dev2 → 0.25.3-dev200

package/src/components/editor/notebook-cell.tsx

@@ -16,7 +16,6 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
-  useMemo,
   useRef,
   useState,
 } from "react";
@@ -43,13 +42,15 @@ import { useResizeObserver } from "@/hooks/useResizeObserver";
 import { cn } from "@/utils/cn";
 import type { Milliseconds, Seconds } from "@/utils/time";
 import {
-  type CellActions,
-  createUntouchedCellAtom,
-  useCellActions,
   useCellData,
   useCellHandle,
   useCellRuntime,
 } from "../../core/cells/cells";
+import { type CellActions, useCellActions } from "../../core/cells/actions";
+import {
+  showHiddenCodeAtom,
+  useShowsHiddenCode,
+} from "../../core/cells/editor";
 import { type CellId, SETUP_CELL_ID } from "../../core/cells/ids";
 import {
   cellNeedsRun,
@@ -59,7 +60,7 @@ import {
   shouldHidePublishedCell,
 } from "../../core/cells/utils";
 import type { UserConfig } from "../../core/config/config-schema";
-import { isAppInteractionDisabled } from "../../core/websocket/connection-utils";
+import { isAppInteractionDisabled } from "../../core/session/connection-utils";
 import { useCellRenderCount } from "../../hooks/useCellRenderCount";
 import type { Theme } from "../../theme/useTheme";
 import { Functions } from "../../utils/functions";
@@ -86,10 +87,6 @@ import { useRunCell } from "./cell/useRunCells";
 import { cellDomProps } from "./common";
 import { SqlValidationErrorBanner } from "./errors/sql-validation-errors";
 import { useCellNavigationProps } from "./navigation/navigation";
-import {
-  useTemporarilyShownCode,
-  useTemporarilyShownCodeActions,
-} from "./navigation/state";
 import { type OnRefactorWithAI, OutputArea } from "./Output";
 import { ConsoleOutput } from "./output/console/ConsoleOutput";
 import { CellDragHandle, SortableCell } from "./SortableCell";
@@ -168,15 +165,12 @@ function useCellHiddenLogic({
   editorView: React.RefObject<EditorView | null>;
   editorViewParentRef: React.RefObject<HTMLDivElement | null>;
 }) {
-  const temporarilyVisible = useTemporarilyShownCode(cellId);
-  const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
-  const isUntouched = useAtomValue(
-    useMemo(() => createUntouchedCellAtom(cellId), [cellId]),
-  );
+  const showsHiddenCode = useShowsHiddenCode(cellId);
+  const showHiddenCodeNow = useSetAtom(showHiddenCodeAtom);
 
-  // The cell code is shown if the cell is not configured to be hidden or if the code is temporarily visible (i.e. when focused).
-  const isCellCodeShown =
-    !cellConfig.hide_code || temporarilyVisible || isUntouched;
+  // The code is shown unless the cell hides it, and then still while it is
+  // being edited or was just created.
+  const isCellCodeShown = !cellConfig.hide_code || showsHiddenCode;
   const isMarkdown = languageAdapter === "markdown";
   const isMarkdownCodeHidden = isMarkdown && !isCellCodeShown;
 
@@ -189,7 +183,7 @@ function useCellHiddenLogic({
 
     // Default to true
     const focus = opts?.focus ?? true;
-    temporarilyShownCodeActions.add(cellId);
+    showHiddenCodeNow({ cellId });
 
     if (focus) {
       editorView.current?.focus();
@@ -216,14 +210,10 @@ function useCellHiddenLogic({
 export type CellComponentActions = Pick<
   CellActions,
   | "updateCellCode"
-  | "createNewCell"
   | "focusCell"
   | "moveCell"
   | "collapseCell"
   | "expandCell"
-  | "moveToNextCell"
-  | "updateCellConfig"
-  | "clearSerializedEditorState"
   | "setStdinResponse"
   | "clearCellConsoleOutput"
   | "sendToBottom"
@@ -525,13 +515,22 @@ const EditableCellComponent = ({
     isMarkdownCodeHidden &&
     isEmptyMarkdownContent &&
     !needsRun && (
+      // Preserve pointer double-click editing; keyboard and assistive clicks activate directly.
+      // react-doctor-disable-next-line react-doctor/prefer-tag-over-role
       <div
+        // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
         role="button"
-        aria-label="Double-click to edit markdown"
+        aria-label="Edit markdown"
         className="relative cursor-pointer px-3 py-2"
         onDoubleClick={showHiddenCodeIfMarkdown}
+        onClick={(e) => {
+          if (e.detail === 0) {
+            showHiddenCodeIfMarkdown();
+          }
+        }}
         onKeyDown={(e) => {
-          if (e.key === "Enter") {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
             showHiddenCodeIfMarkdown();
           }
         }}
@@ -699,7 +698,6 @@ const EditableCellComponent = ({
                 code={cellData.code}
                 config={cellData.config}
                 status={cellRuntime.status}
-                serializedEditorState={cellData.serializedEditorState}
                 runCell={runCell}
                 setEditorView={setEditorView}
                 userConfig={userConfig}
@@ -919,15 +917,16 @@ const CellLeftSideActions = memo(
     actions: CellComponentActions;
   }) => {
     const connection = useAtomValue(connectionAtom);
-    const { className, actions, cellId } = props;
+    const { className, cellId } = props;
+    const { createCell } = useCellActions();
 
     const createBelow = useEvent(
-      (opts: { code?: string; hideCode?: boolean } = {}) =>
-        actions.createNewCell({ cellId, before: false, ...opts }),
+      ({ code, hideCode }: { code?: string; hideCode?: boolean } = {}) =>
+        createCell({ after: cellId, code, config: { hide_code: hideCode } }),
     );
     const createAbove = useEvent(
-      (opts: { code?: string; hideCode?: boolean } = {}) =>
-        actions.createNewCell({ cellId, before: true, ...opts }),
+      ({ code, hideCode }: { code?: string; hideCode?: boolean } = {}) =>
+        createCell({ before: cellId, code, config: { hide_code: hideCode } }),
     );
 
     const oneClickShortcut = "mod";
@@ -1227,7 +1226,6 @@ const SetupCellComponent = ({
                 code={cellData.code}
                 config={cellData.config}
                 status={cellRuntime.status}
-                serializedEditorState={cellData.serializedEditorState}
                 runCell={runCell}
                 setEditorView={setEditorView}
                 userConfig={userConfig}

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

@@ -21,8 +21,10 @@ import { Button } from "@/components/ui/button";
 import { Kbd } from "@/components/ui/kbd";
 import { ExternalLink } from "@/components/ui/links";
 import { Tooltip } from "@/components/ui/tooltip";
+import { buildErrorReport } from "@/core/cells/error-report";
 import type { CellId } from "@/core/cells/ids";
 import { resolvedMarimoConfigAtom } from "@/core/config/config";
+import { viewStateAtom } from "@/core/mode";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { splitMangledLocals } from "@/utils/local-variables";
 import type { MarimoError } from "../../../core/kernel/messages";
@@ -32,6 +34,7 @@ import { openPackageManager } from "../chrome/panels/packages-utils";
 import { useChromeActions } from "../chrome/state";
 import { AutoFixButton } from "../errors/auto-fix";
 import { MangledSegments } from "../errors/mangled-local-chip";
+import { SendErrorReportButton } from "../errors/send-error-report-button";
 import { CellLinkError } from "../links/cell-link";
 import { processTextForUrls } from "./console/text-rendering";
 
@@ -93,6 +96,7 @@ const Tip = (props: {
 interface Props {
   cellId: CellId | undefined;
   errors: MarimoError[];
+  code?: string;
   className?: string;
 }
 
@@ -102,6 +106,7 @@ interface Props {
 export const MarimoErrorOutput = ({
   errors,
   cellId,
+  code,
   className,
 }: Props): JSX.Element => {
   const chromeActions = useChromeActions();
@@ -111,6 +116,9 @@ export const MarimoErrorOutput = ({
   // only helpful when outputs are displayed above the editor.
   const showConsoleHint =
     useAtomValue(resolvedMarimoConfigAtom).display.cell_output === "above";
+  // The editor shows tracebacks in the console area, so the inline copy is
+  // for views without a console: published apps and present mode.
+  const showInlineTraceback = useAtomValue(viewStateAtom).mode !== "edit";
 
   let titleContents: string | null =
     "This cell wasn't run because it has errors";
@@ -199,7 +207,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",
@@ -208,7 +217,6 @@ export const MarimoErrorOutput = ({
     (e): e is Extract<MarimoError, { type: "sql-error" }> =>
       e.type === "sql-error",
   );
-
   const openScratchpad = () => {
     chromeActions.openApplication("scratchpad");
   };
@@ -558,7 +566,9 @@ export const MarimoErrorOutput = ({
                     <p className="text-muted-foreground">
                       {processTextForUrls(error.msg, `exception-${idx}`)}
                     </p>
-                    {"traceback" in error && error.traceback ? (
+                    {showInlineTraceback &&
+                    "traceback" in error &&
+                    error.traceback ? (
                       <CollapsibleTraceback traceback={error.traceback} />
                     ) : (
                       showConsoleHint && (
@@ -572,9 +582,11 @@ export const MarimoErrorOutput = ({
                   <div>
                     {processTextForUrls(error.msg, `exception-${idx}`)}
                     <CellLinkError cellId={error.raising_cell} />
-                    {"traceback" in error && error.traceback && (
-                      <CollapsibleTraceback traceback={error.traceback} />
-                    )}
+                    {showInlineTraceback &&
+                      "traceback" in error &&
+                      error.traceback && (
+                        <CollapsibleTraceback traceback={error.traceback} />
+                      )}
                   </div>
                 )}
               </li>
@@ -728,6 +740,11 @@ export const MarimoErrorOutput = ({
     >
       {title}
       <div className="flex flex-col gap-4">{renderMessages()}</div>
+      {cellId && errors.length > 0 && (
+        <SendErrorReportButton
+          getContent={() => buildErrorReport(cellId, { code, errors })}
+        />
+      )}
     </Alert>
   );
 };

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

@@ -22,6 +22,7 @@ import {
 import { Kbd } from "@/components/ui/kbd";
 import { Tooltip } from "@/components/ui/tooltip";
 import { getCellEditorView } from "@/core/cells/cells";
+import { buildErrorReport } from "@/core/cells/error-report";
 import type { CellId } from "@/core/cells/ids";
 import { SCRATCH_CELL_ID } from "@/core/cells/ids";
 import { toggleBreakpoint } from "@/core/codemirror/cells/debugger-state";
@@ -34,6 +35,7 @@ import { isWasm } from "@/core/wasm/utils";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { sanitizeHtml } from "@/plugins/core/sanitize-html";
 import { copyToClipboard } from "@/utils/copy";
+import { parseHtmlContent } from "@/utils/dom";
 import {
   containsMangledLocal,
   splitMangledLocals,
@@ -46,33 +48,45 @@ import {
 import { useOpenAiAssistant } from "../chrome/wrapper/useOpenAiAssistant";
 import { AIFixButton, buildFixInChatPrompt } from "../errors/auto-fix";
 import { MangledSegments } from "../errors/mangled-local-chip";
+import { SendErrorReportButton } from "../errors/send-error-report-button";
 import { CellLinkTraceback } from "../links/cell-link";
 import type { OnRefactorWithAI } from "../Output";
 
 interface Props {
   cellId: CellId | undefined;
   traceback: string;
+  tracebackFormat?: "html" | "text";
+  code?: string;
   onRefactorWithAI?: OnRefactorWithAI;
 }
 
-/**
- * List of errors due to violations of Marimo semantics.
- */
+/** Render a traceback and actions for its captured execution. */
 export const MarimoTracebackOutput = ({
   onRefactorWithAI,
   traceback,
+  tracebackFormat = "html",
   cellId,
+  code,
 }: Props): JSX.Element => {
-  const htmlTraceback = renderHTML({
-    html: traceback,
-    additionalReplacements: [
-      replaceTracebackFilenames,
-      replaceTracebackPrefix,
-      replaceMangledLocal,
-    ],
-  });
+  const htmlTraceback =
+    tracebackFormat === "text" ? (
+      <pre>{traceback}</pre>
+    ) : (
+      renderHTML({
+        html: traceback,
+        additionalReplacements: [
+          replaceTracebackFilenames,
+          replaceTracebackPrefix,
+          replaceMangledLocal,
+        ],
+      })
+    );
 
-  const lastTracebackLine = lastLine(traceback);
+  const textTraceback =
+    tracebackFormat === "html"
+      ? parseHtmlContent(sanitizeHtml(traceback))
+      : traceback;
+  const lastTracebackLine = lastLine(textTraceback);
   const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
   const openAiAssistant = useOpenAiAssistant();
 
@@ -131,6 +145,13 @@ export const MarimoTracebackOutput = ({
         </div>
       )}
       <div className="flex gap-2">
+        {cellId && lastTracebackLine && (
+          <SendErrorReportButton
+            getContent={() =>
+              buildErrorReport(cellId, { code, traceback, tracebackFormat })
+            }
+          />
+        )}
         {showAIFix && (
           <AIFixButton
             tooltip="Fix with AI"
@@ -186,11 +207,7 @@ export const MarimoTracebackOutput = ({
               </DropdownMenuItem>
               <DropdownMenuItem
                 onClick={() => {
-                  // Strip HTML from the traceback (sanitize first to prevent XSS)
-                  const div = document.createElement("div");
-                  div.innerHTML = sanitizeHtml(traceback);
-                  const textContent = div.textContent || "";
-                  copyToClipboard(textContent);
+                  copyToClipboard(textTraceback);
                 }}
               >
                 <CopyIcon className="h-4 w-4 mr-2" />
@@ -205,9 +222,7 @@ export const MarimoTracebackOutput = ({
 };
 
 function lastLine(text: string): string {
-  const el = document.createElement("div");
-  el.innerHTML = sanitizeHtml(text);
-  const lines = el.textContent?.split("\n").filter(Boolean);
+  const lines = text.split("\n").filter(Boolean);
   return lines?.at(-1) || "";
 }
 
@@ -233,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>
           )}
@@ -257,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,
@@ -267,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/__tests__/ansi-reduce.test.ts

@@ -7,6 +7,24 @@ import {
   TerminalBuffer,
 } from "../ansi-reduce";
 
+test("preserves source evidence through stateful output and serialization", () => {
+  const output = StatefulOutputMessage.create({
+    channel: "stderr",
+    mimetype: "application/vnd.marimo+traceback",
+    timestamp: 1,
+    data: "<pre>ValueError:",
+    code: "raise ValueError('failed code')",
+  }).appendData(" failed code</pre>");
+  expect(output.code).toBe("raise ValueError('failed code')");
+  expect(output.toJSON()).toEqual({
+    channel: "stderr",
+    mimetype: "application/vnd.marimo+traceback",
+    timestamp: 1,
+    data: "<pre>ValueError: failed code</pre>",
+    code: "raise ValueError('failed code')",
+  });
+});
+
 describe("TerminalBuffer", () => {
   test("writeChar writes single character", () => {
     const buffer = new TerminalBuffer();

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;
 };
 
 /**
@@ -368,6 +369,8 @@ export class StatefulOutputMessage implements OutputMessage {
   public readonly mimetype: OutputMessage["mimetype"];
   public readonly channel: OutputMessage["channel"];
   public readonly timestamp: OutputMessage["timestamp"];
+  public readonly code: OutputMessage["code"];
+  public readonly id: StringOutputMessage["id"];
   private ansiReducer = new AnsiReducer();
   private _data: string;
 
@@ -378,35 +381,50 @@ 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,
-    );
+      code: message.code,
+      id: message.id,
+    });
   }
 
-  private constructor(
-    mimetype: OutputMessage["mimetype"],
-    channel: OutputMessage["channel"],
-    timestamp: OutputMessage["timestamp"],
-    ansiReducer: AnsiReducer,
-  ) {
+  private constructor({
+    mimetype,
+    channel,
+    timestamp,
+    ansiReducer,
+    code,
+    id,
+  }: {
+    mimetype: OutputMessage["mimetype"];
+    channel: OutputMessage["channel"];
+    timestamp: OutputMessage["timestamp"];
+    ansiReducer: AnsiReducer;
+    code: OutputMessage["code"];
+    id: StringOutputMessage["id"];
+  }) {
     this.mimetype = mimetype;
     this.channel = channel;
     this.timestamp = timestamp;
+    this.code = code;
+    this.id = 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,
-    );
+    return new StatefulOutputMessage({
+      mimetype: this.mimetype,
+      channel: this.channel,
+      timestamp: this.timestamp,
+      ansiReducer: this.ansiReducer,
+      code: this.code,
+      id: this.id,
+    });
   }
 
   public toJSON(): StringOutputMessage {
@@ -415,6 +433,7 @@ export class StatefulOutputMessage implements OutputMessage {
       channel: this.channel,
       timestamp: this.timestamp,
       data: this.data,
+      ...(this.code === undefined ? {} : { code: this.code }),
     };
   }
 }