@marimo-team/islands 0.23.14-dev9 → 0.23.15-dev0

package/src/components/editor/cell/CellStatus.tsx

@@ -14,7 +14,7 @@ import { Tooltip } from "../../ui/tooltip";
 
 import "./cell-status.css";
 import { formatDistanceToNow } from "date-fns";
-import { Time } from "@/utils/time";
+import { formatElapsedTime, Time } from "@/utils/time";
 
 export interface CellStatusComponentProps extends Pick<
   CellRuntimeState,
@@ -348,25 +348,6 @@ const LastRanTime = (props: { lastRanTime: number }) => {
   );
 };
 
-export function formatElapsedTime(elapsedTime: number | null) {
-  if (elapsedTime === null) {
-    return "";
-  }
-
-  const milliseconds = elapsedTime;
-  const seconds = milliseconds / 1000;
-
-  if (seconds >= 60) {
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = Math.floor(seconds % 60);
-    return `${minutes}m${remainingSeconds}s`;
-  }
-  if (seconds >= 1) {
-    return `${seconds.toFixed(2).toString()}s`;
-  }
-  return `${milliseconds.toFixed(0).toString()}ms`;
-}
-
 const CellTimer = (props: { startTime: Time }) => {
   const time = useElapsedTime(props.startTime.toMilliseconds());
   return <span>{formatElapsedTime(time)}</span>;

package/src/components/editor/cell/PendingDeleteConfirmation.tsx

@@ -3,12 +3,12 @@
 import { AlertTriangleIcon } from "lucide-react";
 import React from "react";
 import { FocusScope } from "react-aria";
-import { formatElapsedTime } from "@/components/editor/cell/CellStatus";
 import { CellLink } from "@/components/editor/links/cell-link";
 import { Button } from "@/components/ui/button";
 import type { CellId } from "@/core/cells/ids";
 import { usePendingDelete } from "@/core/cells/pending-delete-service";
 import { cn } from "@/utils/cn";
+import { formatElapsedTime } from "@/utils/time";
 
 export const PendingDeleteConfirmation: React.FC<{ cellId: CellId }> = ({
   cellId,

package/src/components/editor/cell/cell-context-menu.tsx

@@ -23,7 +23,7 @@ import { toast } from "@/components/ui/use-toast";
 import { useCellData, useCellRuntime } from "@/core/cells/cells";
 import { CellOutputId } from "@/core/cells/ids";
 import { isOutputEmpty } from "@/core/cells/outputs";
-import { goToDefinitionAtCursorPosition } from "@/core/codemirror/go-to-definition/utils";
+import { goToDefinitionWithLspFallback } from "@/core/codemirror/go-to-definition/utils";
 import { sendToPanelManager } from "@/core/vscode/vscode-bindings";
 import { copyImageToClipboard, copyToClipboard } from "@/utils/copy";
 import { getImageExtension } from "@/utils/filenames";
@@ -170,7 +170,7 @@ export const CellActionsContextMenu = ({
           // Only suppress focus restoration when we actually navigated;
           // otherwise let Radix return focus to the trigger cell.
           suppressCloseAutoFocus.current =
-            goToDefinitionAtCursorPosition(editorView);
+            goToDefinitionWithLspFallback(editorView);
         }
       },
     },

package/src/components/editor/chrome/panels/snippets-panel.tsx

@@ -31,7 +31,7 @@ import { cn } from "@/utils/cn";
 import { HideInKioskMode } from "../../kiosk-mode";
 import { ContributeSnippetButton } from "../components/contribute-snippet-button";
 import { usePanelOrientation, usePanelSection } from "./panel-context";
-import { getSnippetDisplay } from "./snippet-display";
+import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 
 const extensions = [EditorView.lineWrapping];
 
@@ -188,7 +188,7 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
             return null;
           }
 
-          const { language, value } = getSnippetDisplay(code);
+          const { language, code: displayCode } = getReadonlyCodeDisplay(code);
 
           return (
             <div
@@ -216,7 +216,7 @@ const SnippetViewer: React.FC<{ snippet: Snippet; onClose: () => void }> = ({
                   language={language}
                   className="cm border rounded overflow-hidden"
                   extensions={extensions}
-                  value={value}
+                  value={displayCode}
                   readOnly={true}
                 />
               </Suspense>

package/src/components/editor/chrome/wrapper/footer-items/pyodide-status.tsx

@@ -1,47 +1,17 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtomValue } from "jotai";
-import { AlertCircleIcon } from "lucide-react";
 import type React from "react";
-import { Spinner } from "@/components/icons/spinner";
-import { Tooltip } from "@/components/ui/tooltip";
-import { wasmInitializationAtom, wasmInitStatusAtom } from "@/core/wasm/state";
+import { RuntimeStatusBadge } from "@/components/lifecycle/RuntimeStatusBadge";
 import { isWasm } from "@/core/wasm/utils";
 
 /**
- * Footer indicator that surfaces Pyodide initialization progress. Mirrors
- * the "Kernel" indicator but tracks the WASM runtime instead of the server
- * connection. Hides itself once Pyodide is ready.
+ * Footer indicator that surfaces Pyodide initialization progress. Thin
+ * wrapper around `<RuntimeStatusBadge>` so the rest of the footer chrome
+ * doesn't need to know about adapters.
  */
 export const PyodideStatus: React.FC = () => {
-  const status = useAtomValue(wasmInitStatusAtom);
-  const message = useAtomValue(wasmInitializationAtom);
-
-  if (!isWasm() || status === "ready") {
+  if (!isWasm()) {
     return null;
   }
-
-  const icon =
-    status === "error" ? (
-      <AlertCircleIcon className="w-4 h-4 text-destructive" />
-    ) : (
-      <Spinner size="small" />
-    );
-
-  const tooltip = status === "error" ? "Pyodide failed to initialize" : message;
-
-  return (
-    <Tooltip
-      content={<div className="text-sm whitespace-pre-line">{tooltip}</div>}
-      data-testid="footer-pyodide-status"
-    >
-      <div
-        className="p-1 hover:bg-accent rounded flex items-center gap-1.5 text-xs text-muted-foreground"
-        data-testid="pyodide-status"
-      >
-        {icon}
-        <span>Pyodide</span>
-      </div>
-    </Tooltip>
-  );
+  return <RuntimeStatusBadge />;
 };

package/src/components/editor/code/__tests__/readonly-python-code.test.tsx

@@ -0,0 +1,79 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ReadonlyCode } from "../readonly-python-code";
+
+beforeAll(() => {
+  SetupMocks.resizeObserver();
+});
+
+/**
+ * The only button is the show/hide toggle: copy is disabled and the
+ * insert-cell button is off by default.
+ */
+function renderReadonly(props: { initiallyHideCode?: boolean }) {
+  return render(
+    <TooltipProvider>
+      <ReadonlyCode code="x = 1" showCopyCode={false} {...props} />
+    </TooltipProvider>,
+  );
+}
+
+function isCollapsed(root: ParentNode) {
+  return root.querySelector(".cm")?.classList.contains("opacity-20") ?? false;
+}
+
+describe("ReadonlyCode", () => {
+  it("starts collapsed when initiallyHideCode is true", () => {
+    const { container } = renderReadonly({ initiallyHideCode: true });
+    expect(isCollapsed(container)).toBe(true);
+  });
+
+  it("starts expanded when initiallyHideCode is false", () => {
+    const { container } = renderReadonly({ initiallyHideCode: false });
+    expect(isCollapsed(container)).toBe(false);
+  });
+
+  it("starts expanded when initiallyHideCode is unset", () => {
+    const { container } = renderReadonly({});
+    expect(isCollapsed(container)).toBe(false);
+  });
+
+  it("toggles visibility locally on click", () => {
+    const { container } = renderReadonly({ initiallyHideCode: true });
+    const toggle = screen.getByRole("button");
+
+    fireEvent.click(toggle);
+    expect(isCollapsed(container)).toBe(false);
+
+    fireEvent.click(toggle);
+    expect(isCollapsed(container)).toBe(true);
+  });
+
+  it("keeps each instance's visibility independent", () => {
+    const { container } = render(
+      <TooltipProvider>
+        <ReadonlyCode
+          code="a = 1"
+          showCopyCode={false}
+          initiallyHideCode={true}
+        />
+        <ReadonlyCode
+          code="b = 2"
+          showCopyCode={false}
+          initiallyHideCode={true}
+        />
+      </TooltipProvider>,
+    );
+    const [firstToggle] = screen.getAllByRole("button");
+    const [first, second] = container.querySelectorAll(".cm");
+
+    fireEvent.click(firstToggle);
+
+    expect(first.classList.contains("opacity-20")).toBe(false);
+    expect(second.classList.contains("opacity-20")).toBe(true);
+  });
+});

package/src/components/editor/code/readonly-python-code.tsx

@@ -1,17 +1,25 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { markdown } from "@codemirror/lang-markdown";
 import { sql } from "@codemirror/lang-sql";
+import {
+  defaultHighlightStyle,
+  syntaxHighlighting,
+} from "@codemirror/language";
 import CodeMirror, {
   EditorView,
   type ReactCodeMirrorProps,
 } from "@uiw/react-codemirror";
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon } from "lucide-react";
-import { memo, useState } from "react";
+import { memo, useMemo, useState } from "react";
 import { useAddCodeToNewCell } from "@/components/editor/cell/useAddCell";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
+import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import { customPythonLanguageSupport } from "@/core/codemirror/language/languages/python";
+import { darkTheme } from "@/core/codemirror/theme/dark";
+import { lightTheme } from "@/core/codemirror/theme/light";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -22,6 +30,18 @@ const pythonExtensions = [
   EditorView.lineWrapping,
 ];
 const sqlExtensions = [sql(), EditorView.lineWrapping];
+const markdownExtensions = [markdown(), EditorView.lineWrapping];
+
+function readonlyCodeExtensions(language: LanguageAdapterType) {
+  switch (language) {
+    case "sql":
+      return sqlExtensions;
+    case "markdown":
+      return markdownExtensions;
+    default:
+      return pythonExtensions;
+  }
+}
 
 /**
  * A readonly code component that can be used to display code in a readonly state.
@@ -42,7 +62,7 @@ export const ReadonlyCode = memo(
       showHideCode?: boolean;
       showCopyCode?: boolean;
       insertNewCell?: boolean;
-      language?: "python" | "sql";
+      language?: LanguageAdapterType;
     } & ReactCodeMirrorProps,
   ) => {
     const { theme } = useTheme();
@@ -56,35 +76,41 @@ export const ReadonlyCode = memo(
       language = "python",
       ...rest
     } = props;
-    const [hideCode, setHideCode] = useState(initiallyHideCode);
+    const [hideCode, setHideCode] = useState(!!initiallyHideCode);
+
+    const extensions = useMemo(
+      () => [
+        theme === "dark" ? darkTheme : lightTheme,
+        syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+        ...readonlyCodeExtensions(language),
+      ],
+      [theme, language],
+    );
 
     return (
       <div
         className={cn(
-          "relative hover-actions-parent w-full overflow-hidden",
+          "relative hover-actions-parent w-full overflow-hidden pb-1",
           className,
         )}
       >
-        {showHideCode && hideCode && (
-          <HideCodeButton
-            tooltip="Show code"
-            onClick={() => setHideCode(false)}
-          />
-        )}
         <div className="absolute top-0 right-0 my-1 mx-2 z-10 hover-action flex gap-2">
           {showCopyCode && <CopyButton text={code} />}
           {insertNewCell && <InsertNewCell code={code} />}
-          {showHideCode && !hideCode && (
-            <EyeCloseButton onClick={() => setHideCode(true)} />
+          {showHideCode && (
+            <ToggleCodeButton
+              hidden={hideCode}
+              onClick={() => setHideCode((prev) => !prev)}
+            />
           )}
         </div>
         <CodeMirror
           {...rest}
           className={cn("cm", hideCode && "opacity-20 h-8 overflow-hidden")}
-          theme={theme === "dark" ? "dark" : "light"}
+          theme="none"
           height="100%"
-          editable={!hideCode}
-          extensions={language === "python" ? pythonExtensions : sqlExtensions}
+          editable={false}
+          extensions={extensions}
           value={code}
           readOnly={true}
         />
@@ -102,42 +128,42 @@ const CopyButton = (props: { text: string }) => {
 
   return (
     <Tooltip content="Copy code" usePortal={false}>
-      <Button onClick={copy} size="xs" className="py-0" variant="secondary">
+      <Button
+        onClick={copy}
+        size="xs"
+        className="py-0"
+        variant="secondary"
+        aria-label="Copy code"
+      >
         <CopyIcon size={14} strokeWidth={1.5} />
       </Button>
     </Tooltip>
   );
 };
 
-const EyeCloseButton = (props: { onClick: () => void }) => {
+const ToggleCodeButton = (props: { hidden: boolean; onClick: () => void }) => {
   return (
-    <Tooltip content="Hide code" usePortal={false}>
+    <Tooltip
+      content={props.hidden ? "Show code" : "Hide code"}
+      usePortal={false}
+    >
       <Button
         onClick={props.onClick}
+        aria-label={props.hidden ? "Show code" : "Hide code"}
         size="xs"
         className="py-0"
         variant="secondary"
       >
-        <EyeOffIcon size={14} strokeWidth={1.5} />
+        {props.hidden ? (
+          <EyeIcon size={14} strokeWidth={1.5} />
+        ) : (
+          <EyeOffIcon size={14} strokeWidth={1.5} />
+        )}
       </Button>
     </Tooltip>
   );
 };
 
-export const HideCodeButton = (props: {
-  tooltip?: string;
-  className?: string;
-  onClick: () => void;
-}) => {
-  return (
-    <div className={props.className} onClick={props.onClick}>
-      <Tooltip usePortal={false} content={props.tooltip}>
-        <EyeIcon className="hover-action w-5 h-5 text-muted-foreground cursor-pointer absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-80 hover:opacity-100 z-20" />
-      </Tooltip>
-    </div>
-  );
-};
-
 const InsertNewCell = (props: { code: string }) => {
   const addCodeToNewCell = useAddCodeToNewCell();
 
@@ -152,6 +178,7 @@ const InsertNewCell = (props: { code: string }) => {
         size="xs"
         className="py-0"
         variant="secondary"
+        aria-label="Add code to notebook"
       >
         <PlusIcon size={14} strokeWidth={1.5} />
       </Button>

package/src/components/editor/errors/__tests__/auto-fix.test.ts

@@ -1,119 +1,23 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { cellId } from "@/__tests__/branded";
-import type { MarimoError } from "@/core/kernel/messages";
+import { buildFixInChatPrompt } from "../auto-fix";
 
-const getDatasourceContext = vi.fn<(id: unknown) => string | null>(() => null);
-
-vi.mock("@/core/ai/context/providers/datasource", () => ({
-  getDatasourceContext: (id: unknown) => getDatasourceContext(id),
-}));
-
-const { buildFixPrompt, buildFixPromptFromText } = await import("../auto-fix");
-
-describe("buildFixPromptFromText", () => {
-  beforeEach(() => {
-    getDatasourceContext.mockReset();
-    getDatasourceContext.mockReturnValue(null);
-  });
-
-  it("includes the cell id in the header when provided", () => {
-    const prompt = buildFixPromptFromText("boom", cellId("cell-1"));
-    expect(prompt).toBe(
-      "My cell (id: cell-1) produced the following error. Please fix it:\n\nboom",
-    );
-  });
-
-  it("uses a generic header when no cell id is provided", () => {
-    const prompt = buildFixPromptFromText("boom");
-    expect(prompt).toBe(
-      "My code gives the following error. Please fix it:\n\nboom",
+describe("buildFixInChatPrompt", () => {
+  it("references the per-cell error context URI", () => {
+    expect(buildFixInChatPrompt(cellId("cell-1"))).toBe(
+      "@error://cell-1\n\nPlease fix this error.",
     );
   });
 
-  it("appends datasource context when explicitly requested for the cell", () => {
-    getDatasourceContext.mockReturnValue("@datasource://my_db");
-    const prompt = buildFixPromptFromText("boom", cellId("cell-1"), {
-      includeDatasourceContext: true,
-    });
-    expect(prompt).toBe(
-      "My cell (id: cell-1) produced the following error. Please fix it:\n\nboom\n\nDatabase schema: @datasource://my_db",
+  it("falls back to inline error text when no cell id", () => {
+    expect(buildFixInChatPrompt(undefined, "ValueError: boom")).toBe(
+      "My code gives the following error. Please fix it:\n\nValueError: boom",
     );
   });
 
-  it("does not append datasource context by default", () => {
-    getDatasourceContext.mockReturnValue("@datasource://my_db");
-    const prompt = buildFixPromptFromText("boom", cellId("cell-1"));
-    expect(prompt).toBe(
-      "My cell (id: cell-1) produced the following error. Please fix it:\n\nboom",
-    );
-    expect(getDatasourceContext).not.toHaveBeenCalled();
-  });
-
-  it("does not look up datasource context without a cell id", () => {
-    buildFixPromptFromText("boom", undefined, {
-      includeDatasourceContext: true,
-    });
-    expect(getDatasourceContext).not.toHaveBeenCalled();
-  });
-});
-
-describe("buildFixPrompt", () => {
-  beforeEach(() => {
-    getDatasourceContext.mockReset();
-    getDatasourceContext.mockReturnValue(null);
-  });
-
-  it("uses the error message when present", () => {
-    const errors: MarimoError[] = [
-      { type: "sql-error", msg: "syntax error", sql_statement: "SELECT" },
-    ];
-    expect(buildFixPrompt(errors, cellId("cell-1"))).toBe(
-      "My cell (id: cell-1) produced the following error. Please fix it:\n\nsyntax error",
-    );
-  });
-
-  it("joins multiple errors with newlines", () => {
-    const errors: MarimoError[] = [
-      { type: "syntax", msg: "bad syntax" },
-      {
-        type: "exception",
-        exception_type: "ValueError",
-        msg: "bad value",
-        raising_cell: null,
-      },
-    ];
-    expect(buildFixPrompt(errors, cellId("cell-1"))).toBe(
-      "My cell (id: cell-1) produced the following error. Please fix it:\n\nbad syntax\nbad value",
-    );
-  });
-
-  it("falls back to the error type when there is no message", () => {
-    const errors: MarimoError[] = [
-      { type: "multiple-defs", name: "foo", cells: [cellId("foo")] },
-    ];
-    expect(buildFixPrompt(errors, cellId("cell-1"))).toBe(
-      "My cell (id: cell-1) produced the following error. Please fix it:\n\nmultiple-defs",
-    );
-  });
-
-  it("appends datasource context for SQL errors", () => {
-    getDatasourceContext.mockReturnValue("@datasource://my_db");
-    const errors: MarimoError[] = [
-      { type: "sql-error", msg: "syntax error", sql_statement: "SELECT" },
-    ];
-    expect(buildFixPrompt(errors, cellId("cell-1"))).toBe(
-      "My cell (id: cell-1) produced the following error. Please fix it:\n\nsyntax error\n\nDatabase schema: @datasource://my_db",
-    );
-  });
-
-  it("does not append datasource context for non-SQL errors", () => {
-    getDatasourceContext.mockReturnValue("@datasource://my_db");
-    const errors: MarimoError[] = [{ type: "syntax", msg: "bad syntax" }];
-    expect(buildFixPrompt(errors, cellId("cell-1"))).toBe(
-      "My cell (id: cell-1) produced the following error. Please fix it:\n\nbad syntax",
-    );
-    expect(getDatasourceContext).not.toHaveBeenCalled();
+  it("uses a generic prompt when no cell id and no error text", () => {
+    expect(buildFixInChatPrompt(undefined)).toBe("Please fix this error.");
   });
 });

package/src/components/editor/errors/auto-fix.tsx

@@ -21,44 +21,24 @@ import { aiCompletionCellAtom } from "@/core/ai/state";
 import { notebookAtom, useCellActions } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import { aiFeaturesEnabledAtom } from "@/core/config/config";
-import { getDatasourceContext } from "@/core/ai/context/providers/datasource";
 import { getAutoFixes } from "@/core/errors/errors";
 import type { MarimoError } from "@/core/kernel/messages";
 import { cn } from "@/utils/cn";
 import { useOpenAiAssistant } from "../chrome/wrapper/useOpenAiAssistant";
 import { type FixMode, useFixMode } from "./fix-mode";
 
-export function buildFixPromptFromText(
-  errorText: string,
-  cellId?: CellId,
-  {
-    includeDatasourceContext = false,
-  }: { includeDatasourceContext?: boolean } = {},
+export function buildFixInChatPrompt(
+  cellId: CellId | undefined,
+  fallbackErrorText?: string,
 ): string {
-  const header =
-    cellId != null
-      ? `My cell (id: ${cellId}) produced the following error. Please fix it:`
-      : "My code gives the following error. Please fix it:";
-  let prompt = `${header}\n\n${errorText}`;
-  if (cellId != null && includeDatasourceContext) {
-    const datasourceContext = getDatasourceContext(cellId);
-    if (datasourceContext) {
-      prompt += `\n\nDatabase schema: ${datasourceContext}`;
-    }
+  if (cellId != null) {
+    return `@error://${cellId}\n\nPlease fix this error.`;
   }
-  return prompt;
-}
-
-export function buildFixPrompt(errors: MarimoError[], cellId: CellId): string {
-  const errorText = errors
-    .map((error) => ("msg" in error && error.msg ? error.msg : error.type))
-    .join("\n");
-  const includeDatasourceContext = errors.some(
-    (error) => error.type === "sql-error",
-  );
-  return buildFixPromptFromText(errorText, cellId, {
-    includeDatasourceContext,
-  });
+  const errorText = fallbackErrorText?.trim();
+  if (errorText) {
+    return `My code gives the following error. Please fix it:\n\n${errorText}`;
+  }
+  return "Please fix this error.";
 }
 
 export const AutoFixButton = ({
@@ -112,7 +92,7 @@ export const AutoFixButton = ({
 
   const openAISidebar = () => {
     openAiAssistant({
-      prompt: buildFixPrompt(errors, cellId),
+      prompt: buildFixInChatPrompt(cellId),
     });
   };
 

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

@@ -29,6 +29,7 @@ import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import { useIsPendingCut } from "@/core/cells/pending-cut-service";
 import { autocompletionKeymap } from "@/core/codemirror/cm";
+import { clearCellBreakpoints } from "@/core/codemirror/cells/debugger-state";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import { CSSClasses } from "@/core/constants";
 import { canCollapseOutline } from "@/core/dom/outline";
@@ -746,6 +747,9 @@ const EditableCellComponent = ({
               onRefactorWithAI={handleRefactorWithAI}
               onClear={() => {
                 actions.clearCellConsoleOutput({ cellId });
+                // The debugger "Clear" (trashcan) also drops this cell's
+                // breakpoints; no-op when none are set.
+                clearCellBreakpoints(cellId);
               }}
               onSubmitDebugger={(text, index) => {
                 actions.setStdinResponse({
@@ -1211,6 +1215,9 @@ const SetupCellComponent = ({
               onRefactorWithAI={handleRefactorWithAI}
               onClear={() => {
                 actions.clearCellConsoleOutput({ cellId });
+                // The debugger "Clear" (trashcan) also drops this cell's
+                // breakpoints; no-op when none are set.
+                clearCellBreakpoints(cellId);
               }}
               onSubmitDebugger={(text, index) => {
                 actions.setStdinResponse({

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

@@ -17,18 +17,32 @@ export const ImageOutput = ({
   height,
   className,
 }: Props): JSX.Element => {
-  // Convert numeric values to pixel strings, pass string values (like "100%") as-is
+  // Numeric dimensions are set as HTML attributes rather than inline styles.
+  // Attributes give the browser the image's intrinsic size and aspect ratio,
+  // but can still be overridden by stylesheet rules (`max-width: 100%;
+  // height: auto` from preflight), so images shrink proportionally in
+  // width-constrained containers like mo.hstack. Inline styles would win
+  // over `height: auto` and distort the aspect ratio.
+  //
+  // String values like "100%" are only valid in CSS, so they go in the
+  // style attribute.
   const style: React.CSSProperties = {};
-  if (width !== undefined) {
-    style.width = typeof width === "number" ? `${width}px` : width;
+  if (typeof width === "string") {
+    style.width = width;
   }
-  if (height !== undefined) {
-    style.height = typeof height === "number" ? `${height}px` : height;
+  if (typeof height === "string") {
+    style.height = height;
   }
 
   return (
     <span className={className}>
-      <img src={src} alt={alt} style={style} />
+      <img
+        src={src}
+        alt={alt}
+        width={typeof width === "number" ? width : undefined}
+        height={typeof height === "number" ? height : undefined}
+        style={style}
+      />
     </span>
   );
 };