@marimo-team/islands 0.25.3-dev17 → 0.25.3-dev170

package/src/components/editor/header/status.tsx

@@ -11,7 +11,7 @@ import {
   type ConnectionStatus,
   WebSocketClosedReason,
   ConnectionState,
-} from "@/core/websocket/types";
+} from "@/core/session/types";
 import { cn } from "@/utils/cn";
 
 export const StatusOverlay: React.FC<{
@@ -61,20 +61,17 @@ const DisconnectedIcon: React.FC<{ onReconnect?: () => void }> = ({
         disabled ? "App disconnected" : "App disconnected — click to reconnect"
       }
     >
-      {/* Wrapper span keeps the tooltip reachable when the button is
-          disabled — a disabled <button> swallows pointer events. */}
-      <span tabIndex={disabled ? 0 : -1}>
-        <button
-          type="button"
-          className={cn(topLeftStatus, "bg-transparent border-0 p-0")}
-          aria-label={disabled ? "App disconnected" : "Reconnect to app"}
-          data-testid="disconnected-indicator"
-          onClick={onReconnect}
-          disabled={disabled}
-        >
-          <UnlinkIcon className="w-[25px] h-[25px] text-(--red-11)" />
-        </button>
-      </span>
+      <button
+        type="button"
+        className={cn(topLeftStatus, "bg-transparent border-0 p-0")}
+        aria-label={disabled ? "App disconnected" : "Reconnect to app"}
+        data-testid="disconnected-indicator"
+        onClick={onReconnect}
+        // Keep the tooltip reachable by keyboard when reconnection is unavailable.
+        aria-disabled={disabled}
+      >
+        <UnlinkIcon className="w-[25px] h-[25px] text-(--red-11)" />
+      </button>
     </Tooltip>
   );
 };
@@ -85,15 +82,38 @@ const RunningIcon = () => {
     ? "Scratchpad is running"
     : "Jump to running cell";
 
+  const icon = (
+    <HourglassIcon className="running-app-icon" size={30} strokeWidth={1} />
+  );
+
+  if (scratchpadOnly) {
+    return (
+      <Tooltip content={tooltip} side="right">
+        <span
+          className={topLeftStatus}
+          data-testid="loading-indicator"
+          // Execution progress is advisory status, not a form result.
+          // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
+          role="status"
+          aria-label={tooltip}
+        >
+          {icon}
+        </span>
+      </Tooltip>
+    );
+  }
+
   return (
     <Tooltip content={tooltip} side="right">
-      <div
-        className={topLeftStatus}
+      <button
+        type="button"
+        aria-label={tooltip}
+        className={cn(topLeftStatus, "bg-transparent border-0 p-0")}
         data-testid="loading-indicator"
-        onClick={scratchpadOnly ? undefined : notebookScrollToRunning}
+        onClick={notebookScrollToRunning}
       >
-        <HourglassIcon className="running-app-icon" size={30} strokeWidth={1} />
-      </div>
+        {icon}
+      </button>
     </Tooltip>
   );
 };

package/src/components/editor/links/__tests__/cell-link.test.tsx

@@ -0,0 +1,146 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { HTMLCellId, SCRATCH_CELL_ID } from "@/core/cells/ids";
+import { goToCellLine } from "@/core/codemirror/go-to-definition/utils";
+import { CellLink, CellLinkTraceback } from "../cell-link";
+
+const showCellIfHidden = vi.hoisted(() => vi.fn());
+const targetId = cellId("target");
+
+vi.mock("@/core/cells/cells", () => ({
+  useCellActions: () => ({ showCellIfHidden }),
+  useCellIds: () => ({ inOrderIds: [targetId] }),
+  useCellNames: () => ({ [targetId]: "Target" }),
+}));
+vi.mock("@/core/saving/filename", () => ({ useFilename: () => "notebook.py" }));
+vi.mock("@/core/codemirror/go-to-definition/utils", () => ({
+  goToCellLine: vi.fn(),
+}));
+
+function flushNavigation() {
+  act(() => vi.advanceTimersToNextFrame());
+}
+
+describe("CellLink navigation", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+    showCellIfHidden.mockReset();
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it("focuses, scrolls, and highlights the target on keyboard activation", () => {
+    render(
+      <>
+        <CellLink cellId={targetId} />
+        <div
+          id={HTMLCellId.create(targetId)}
+          tabIndex={-1}
+          data-testid="target"
+        />
+      </>,
+    );
+    const target = screen.getByTestId("target");
+    target.scrollIntoView = vi.fn();
+    const focus = vi.spyOn(target, "focus");
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("href", `#${target.id}`);
+    link.focus();
+    // Native anchors emit a click with detail=0 when activated with Enter.
+    expect(fireEvent.click(link, { detail: 0 })).toBe(false);
+    flushNavigation();
+
+    expect(showCellIfHidden).toHaveBeenCalledExactlyOnceWith({
+      cellId: targetId,
+    });
+    expect(target).toHaveFocus();
+    expect(focus).toHaveBeenCalledWith({ preventScroll: true });
+    expect(target.scrollIntoView).toHaveBeenCalledExactlyOnceWith({
+      behavior: "smooth",
+      block: "center",
+    });
+    expect(target).toHaveClass("focus-outline");
+  });
+
+  it("reveals a hidden destination before moving focus", () => {
+    function HiddenCell() {
+      const [visible, setVisible] = useState(false);
+      showCellIfHidden.mockImplementation(() => setVisible(true));
+      return (
+        <>
+          <CellLink cellId={targetId} skipScroll={true} />
+          {visible && (
+            <div
+              id={HTMLCellId.create(targetId)}
+              tabIndex={-1}
+              data-testid="target"
+            />
+          )}
+        </>
+      );
+    }
+    render(<HiddenCell />);
+    expect(screen.queryByTestId("target")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("link"));
+    flushNavigation();
+    expect(screen.getByTestId("target")).toHaveFocus();
+  });
+
+  it.each([
+    { metaKey: true },
+    { ctrlKey: true },
+    { shiftKey: true },
+    { altKey: true },
+    { button: 1 },
+  ])("preserves browser activation for %o", (modifiers) => {
+    render(<CellLink cellId={targetId} />);
+    const link = screen.getByRole("link");
+    link.focus();
+    expect(fireEvent.click(link, modifiers)).toBe(true);
+    flushNavigation();
+    expect(showCellIfHidden).not.toHaveBeenCalled();
+    expect(link).toHaveFocus();
+  });
+
+  it("lets traceback line navigation choose the final focus", () => {
+    render(
+      <>
+        <CellLinkTraceback cellId={targetId} lineNumber={7} />
+        <div
+          id={HTMLCellId.create(targetId)}
+          tabIndex={-1}
+          data-testid="target"
+        >
+          <textarea aria-label="Editor" />
+        </div>
+      </>,
+    );
+    const target = screen.getByTestId("target");
+    target.scrollIntoView = vi.fn();
+    const editor = screen.getByRole("textbox", { name: "Editor" });
+    vi.mocked(goToCellLine).mockImplementation(() => {
+      expect(target).toHaveFocus();
+      editor.focus();
+      return true;
+    });
+    fireEvent.click(screen.getByRole("link"));
+    flushNavigation();
+    expect(goToCellLine).toHaveBeenCalledExactlyOnceWith(targetId, 7);
+    expect(editor).toHaveFocus();
+    expect(target.scrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it("keeps scratch references non-navigable", () => {
+    render(
+      <CellLink cellId={SCRATCH_CELL_ID} formatCellName={() => "scratch"} />,
+    );
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText("scratch"));
+    flushNavigation();
+    expect(showCellIfHidden).not.toHaveBeenCalled();
+  });
+});

package/src/components/editor/links/cell-link.tsx

@@ -7,7 +7,9 @@ import { displayCellName } from "@/core/cells/names";
 import { goToCellLine } from "@/core/codemirror/go-to-definition/utils";
 import { useFilename } from "@/core/saving/filename";
 import { cn } from "@/utils/cn";
+import { Events } from "@/utils/events";
 import { Logger } from "../../../utils/Logger";
+import { focusCell } from "../navigation/focus-utils";
 
 interface Props {
   cellId: CellId;
@@ -29,14 +31,20 @@ export const CellLink = (props: Props): JSX.Element => {
   const formatName = formatCellName ?? ((name: string) => name);
 
   return (
-    <div
+    // Reveal hidden cells before scrolling and focusing the destination.
+    // react-doctor-disable-next-line react-doctor/no-prevent-default
+    <a
+      href={
+        cellId === SCRATCH_CELL_ID ? undefined : `#${HTMLCellId.create(cellId)}`
+      }
       className={cn(
-        "inline-block cursor-pointer text-link hover:underline",
+        "inline-block cursor-pointer text-left text-link hover:underline focus-visible:outline focus-visible:outline-ring",
         className,
       )}
-      role="link"
-      tabIndex={-1}
       onClick={(e) => {
+        if (e.defaultPrevented || e.button !== 0 || Events.hasModifier(e)) {
+          return;
+        }
         // Scratch causes a crash since scratch is not registered like a
         // normal cell.
         if (cellId === SCRATCH_CELL_ID) {
@@ -48,13 +56,14 @@ export const CellLink = (props: Props): JSX.Element => {
         requestAnimationFrame(() => {
           const succeeded = scrollAndHighlightCell(cellId, variant, skipScroll);
           if (succeeded) {
+            focusCell(cellId, { preventScroll: true });
             onClick?.();
           }
         });
       }}
     >
       {formatName(displayCellName(cellName, cellIndex))}
-    </div>
+    </a>
   );
 };
 

package/src/components/editor/navigation/focus-utils.ts

@@ -19,10 +19,10 @@ export function focusCellEditor(
   }
 }
 
-export function focusCell(cellId: CellId): void {
+export function focusCell(cellId: CellId, options?: FocusOptions): void {
   const element = document.getElementById(HTMLCellId.create(cellId));
   if (element) {
-    tryFocus(element);
+    tryFocus(element, options);
   } else {
     Logger.warn(`[CellFocusManager] focusCell: element not found: ${cellId}`);
   }
@@ -48,9 +48,9 @@ export function isAnyCellFocused(): boolean {
   );
 }
 
-export function tryFocus(dom: HTMLElement) {
+export function tryFocus(dom: HTMLElement, options?: FocusOptions) {
   try {
-    dom.focus();
+    dom.focus(options);
   } catch {
     Logger.warn("[CellFocusManager] element may not be focusable", dom);
   }

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

@@ -41,6 +41,7 @@ export const NotebookBanner: React.FC<Props> = ({ width }) => {
               {banner.title}
             </span>
             <Button
+              aria-label={`Dismiss ${banner.title}`}
               data-testid="remove-banner-button"
               variant="text"
               size="icon"

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

@@ -59,7 +59,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";
@@ -525,13 +525,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();
           }
         }}

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

@@ -207,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",

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/__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,7 @@ 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"];
   private ansiReducer = new AnsiReducer();
   private _data: string;
 
@@ -379,39 +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,
-      message.code,
-    );
+      code: message.code,
+      id: message.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,
+  }: {
+    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,
-      this.code,
-    );
+    return new StatefulOutputMessage({
+      mimetype: this.mimetype,
+      channel: this.channel,
+      timestamp: this.timestamp,
+      ansiReducer: this.ansiReducer,
+      code: this.code,
+      id: this.id,
+    });
   }
 
   public toJSON(): StringOutputMessage {