@marimo-team/islands 0.25.3-dev267 → 0.25.3-dev269

package/src/core/executions/select.ts

@@ -0,0 +1,175 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/** Pure views over the replica's executions and results, by cell. */
+
+import type * as Protocol from "@marimo-team/client/protocol";
+import type { Execution, Executions, Results } from "@/core/notebook/replica";
+import { type Milliseconds, Time } from "@/utils/time";
+
+/** Where a cell is in its run. */
+export type CellRunStatus = "idle" | "queued" | "running";
+
+/** How a cell's last completed execution ended. */
+export type CellOutcome = "value" | "error" | "interrupted" | "skipped";
+
+export interface CellExecutionView {
+  readonly status: CellRunStatus;
+  /** Whether a cell it depends on is disabled, so it cannot run. */
+  readonly blocked: boolean;
+  /** Null until the cell completes once, and while it runs again. */
+  readonly outcome: CellOutcome | null;
+  /** When the current run started, or the last one, since the epoch. */
+  readonly startedAt: Milliseconds | null;
+  /** How long the last completed execution took, null while the cell runs again. */
+  readonly duration: Milliseconds | null;
+  /** Whether the running execution has shown a value so far. TODO(MO-8404) */
+  readonly rendered: boolean;
+}
+
+/** What a cell's view is derived from. */
+export interface CellExecutionInputs {
+  readonly executions: Executions;
+  readonly results: Results;
+  /**
+   * The execution each submitted cell had when its run was requested.
+   *
+   * A cell reads as queued until the host shows a newer execution for it.
+   */
+  readonly submissions: ReadonlyMap<
+    Protocol.CellId,
+    Protocol.ExecutionId | null
+  >;
+  /** Cells the kernel reports as blocked by a disabled ancestor. */
+  readonly blocked: ReadonlySet<Protocol.CellId>;
+}
+
+export function outcomeOf(record: Protocol.Execution): CellOutcome | null {
+  const outcome = record.outcome;
+  if (outcome === null) {
+    return null;
+  }
+  return outcome.kind;
+}
+
+function millis(iso: string | null): Milliseconds | null {
+  return iso === null ? null : Time.parse(iso).toMilliseconds();
+}
+
+function latestOf(
+  executions: Executions,
+  id: Protocol.CellId,
+): Execution | null {
+  const executionId = executions.latest.get(id);
+  return executionId === undefined
+    ? null
+    : (executions.executions.get(executionId) ?? null);
+}
+
+/**
+ * The execution a submission is measured against: the cell's latest on the
+ * stream, or its retained result once the stream has let that execution go.
+ */
+export function latestExecutionId(
+  inputs: Pick<CellExecutionInputs, "executions" | "results">,
+  id: Protocol.CellId,
+): Protocol.ExecutionId | null {
+  return inputs.executions.latest.get(id) ?? inputs.results.get(id)?.id ?? null;
+}
+
+export function cellExecutionView(
+  inputs: CellExecutionInputs,
+  id: Protocol.CellId,
+): CellExecutionView {
+  const latest = latestOf(inputs.executions, id);
+  const result = inputs.results.get(id) ?? null;
+  const submitted =
+    inputs.submissions.has(id) &&
+    inputs.submissions.get(id) === latestExecutionId(inputs, id);
+  let status: CellRunStatus = "idle";
+  let startedAt = result === null ? null : millis(result.started_at);
+  let rendered = false;
+  if (latest !== null && latest.record.status !== "completed") {
+    status = latest.record.status;
+    startedAt = millis(latest.record.started_at) ?? startedAt;
+    rendered = latest.record.outcome !== null;
+  } else if (submitted) {
+    status = "queued";
+  }
+  const settled = status === "idle";
+  const duration =
+    settled &&
+    result !== null &&
+    result.started_at !== null &&
+    result.completed_at !== null
+      ? Time.parse(result.completed_at).since(Time.parse(result.started_at))
+      : null;
+  return {
+    status,
+    blocked: inputs.blocked.has(id),
+    outcome: settled && result !== null ? outcomeOf(result) : null,
+    startedAt,
+    duration,
+    rendered,
+  };
+}
+
+/** Executions the host has not completed, cells and scratch alike. */
+function unfinished(executions: Executions): Execution[] {
+  return [...executions.executions.values()].filter(
+    (execution) => execution.record.status !== "completed",
+  );
+}
+
+export function anyRunning(executions: Executions): boolean {
+  return unfinished(executions).some(
+    (execution) => execution.record.status === "running",
+  );
+}
+
+/** Cells and scratch work queued or running, plus submissions the host has not shown yet. */
+export function queuedOrRunningCount(inputs: CellExecutionInputs): number {
+  const pending = unfinished(inputs.executions);
+  const shown = new Set(
+    pending.flatMap((execution) =>
+      execution.record.cell_id === null ? [] : [execution.record.cell_id],
+    ),
+  );
+  let awaiting = 0;
+  for (const [cellId, executionId] of inputs.submissions) {
+    if (
+      !shown.has(cellId) &&
+      executionId === latestExecutionId(inputs, cellId)
+    ) {
+      awaiting += 1;
+    }
+  }
+  return pending.length + awaiting;
+}
+
+export function onlyScratchRunning(executions: Executions): boolean {
+  return unfinished(executions).every(
+    (execution) =>
+      execution.record.status !== "running" ||
+      execution.record.cell_id === null,
+  );
+}
+
+/** Where the scratchpad's work is, from its unfinished execution if any. */
+export function scratchStatus(executions: Executions): CellRunStatus {
+  const scratch = unfinished(executions).find(
+    (execution) => execution.record.cell_id === null,
+  );
+  if (scratch === undefined || scratch.record.status === "completed") {
+    return "idle";
+  }
+  return scratch.record.status;
+}
+
+/** Cells with a running execution, in the order the host reported them. */
+export function runningCellIds(executions: Executions): Protocol.CellId[] {
+  return unfinished(executions).flatMap((execution) =>
+    execution.record.status === "running" && execution.record.cell_id !== null
+      ? [execution.record.cell_id]
+      : [],
+  );
+}

package/src/core/export/__tests__/hooks.test.ts

@@ -67,11 +67,6 @@ describe("useEnrichCellOutputs", () => {
         cellId,
         {
           output: cell.output || null,
-          status: cell.status || "idle",
-          interrupted: false,
-          errored: false,
-          runStartTimestamp: null,
-          runElapsedTimeMs: null,
           stallTime: null as unknown as number,
           ...cell,
         } as CellRuntimeState,

package/src/core/islands/bootstrap.ts

@@ -25,6 +25,7 @@ import { MarimoValueInputEvent } from "../dom/events";
 import { UI_ELEMENT_REGISTRY } from "../dom/uiregistry";
 import { FUNCTIONS_REGISTRY } from "../functions/FunctionRegistry";
 import { createNotebookReplica } from "../notebook/replica";
+import { observeCellMessage } from "../executions";
 import {
   handleCellNotificationeration,
   handleKernelReady,
@@ -35,6 +36,7 @@ import { queryParamHandlers } from "../kernel/queryParamHandlers";
 import { RuntimeState } from "../kernel/RuntimeState";
 import { initialModeAtom } from "../mode";
 import { requestClientAtom } from "../network/requests";
+import { activeNotebookReplicaAtom } from "../session/active-notebook";
 import { store as defaultStore } from "../state/jotai";
 import type { IslandsPyodideBridge } from "./bridge";
 import { MarimoIslandElement } from "./components/web-components";
@@ -131,6 +133,7 @@ export async function initializeIslands(
   // The notebook's cells follow the managed session's host document.
   const replica = createNotebookReplica(store);
   replica.connect(bridge.notebookBackend, { onNotification: Functions.NOOP });
+  store.set(activeNotebookReplicaAtom, replica);
   const documentModel = createDocumentModel({
     store,
     documentAtom: replica.documentAtom,
@@ -222,7 +225,6 @@ function handleNotification(
           resetCellRuntimes: actions.resetCellRuntimes,
           setLayoutData: Functions.NOOP,
           setCapabilities: Functions.NOOP,
-          setKernelState: Functions.NOOP,
           onError: Logger.error,
         });
         if (!window.customElements?.get(ISLAND_TAG_NAMES.ISLAND)) {
@@ -247,6 +249,7 @@ function handleNotification(
         return;
 
       case "cell-op":
+        observeCellMessage(store, msg);
         handleCellNotificationeration(msg, actions.handleCellMessage);
         return;
 

package/src/core/islands/components/output-wrapper.tsx

@@ -13,7 +13,7 @@ import { OutputRenderer } from "@/components/editor/Output";
 import { type NotebookState, notebookAtom } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import { isOutputEmpty } from "@/core/cells/outputs";
-import type { CellRuntimeState } from "@/core/cells/types";
+import { type CellRunStatus, useCellExecution } from "@/core/executions";
 import { ISLAND_TAG_NAMES } from "../constants";
 import { islandsHydratedAtom } from "../state";
 import { IslandControls } from "./IslandControls";
@@ -69,7 +69,7 @@ export const MarimoOutputWrapper: React.FC<MarimoOutputWrapperProps> = ({
 
   // Sync cell status to the host <marimo-island> element as a data attribute
   // so downstream consumers can style based on status (e.g. [data-status="running"])
-  const status = runtime?.status ?? "idle";
+  const { status } = useCellExecution(cellId);
   useSyncStatusToIsland(wrapperRef, status);
 
   // If no runtime yet, show static content
@@ -90,7 +90,7 @@ export const MarimoOutputWrapper: React.FC<MarimoOutputWrapperProps> = ({
   return (
     <div ref={wrapperRef} className="relative min-h-6">
       <OutputRenderer message={runtime.output} />
-      <RunningIndicator state={runtime} />
+      <RunningIndicator status={status} />
       <IslandControls
         cellId={cellId}
         codeCallback={codeCallback}
@@ -118,8 +118,8 @@ function useSyncStatusToIsland(
 /**
  * Shows a spinning indicator when the cell is running
  */
-const RunningIndicator: React.FC<{ state: CellRuntimeState }> = ({ state }) => {
-  if (state.status === "running") {
+const RunningIndicator: React.FC<{ status: CellRunStatus }> = ({ status }) => {
+  if (status === "running") {
     return (
       <DelayRender>
         <div className="absolute top-1 right-1">

package/src/core/kernel/handlers.ts

@@ -14,7 +14,6 @@ import type {
   CellMessage,
   NotificationMessageData,
 } from "./messages";
-import type { KernelState } from "./state";
 
 type KernelReadyData = NotificationMessageData<"kernel-ready">;
 
@@ -68,7 +67,6 @@ export function handleKernelReady(
       data: LayoutData;
     }) => void;
     setCapabilities: (capabilities: Capabilities) => void;
-    setKernelState: (state: KernelState) => void;
     onError: (error: Error) => void;
   },
 ): LayoutState {
@@ -79,16 +77,13 @@ export function handleKernelReady(
     resetCellRuntimes,
     setLayoutData,
     setCapabilities,
-    setKernelState,
     onError,
   } = opts;
   const { resumed, ui_values, capabilities, auto_instantiated } = data;
 
   resetCellRuntimes();
-  setLastRun({
-    lastCodeRun: data.last_executed_code ?? {},
-    lastExecutionTime: data.last_execution_time ?? {},
-  });
+  // TODO(MO-8403): Delete with `lastCodeRun`.
+  setLastRun({ lastCodeRun: data.last_executed_code ?? {} });
   const layoutState = buildLayoutState(data, cells, setLayoutData);
 
   setCapabilities(capabilities);
@@ -121,11 +116,7 @@ export function handleKernelReady(
       values,
       autoRun: autoInstantiate,
     })
-    .then(() => {
-      setKernelState({ isInstantiated: true, error: null });
-    })
     .catch((error) => {
-      setKernelState({ isInstantiated: false, error: error });
       onError(new Error("Failed to instantiate", { cause: error }));
     });
   return layoutState;

package/src/core/kernel/state.ts

@@ -1,19 +1,4 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { atom } from "jotai";
-import { waitFor } from "../state/jotai";
-
-export interface KernelState {
-  isInstantiated: boolean;
-  error: Error | null;
-}
-
-export const kernelStateAtom = atom<KernelState>({
-  isInstantiated: false,
-  error: null,
-});
 
 export const initialRunCompletedAtom = atom(false);
-
-export function waitForKernelToBeInstantiated(): Promise<KernelState> {
-  return waitFor(kernelStateAtom, (value) => value.isInstantiated);
-}

package/src/core/lifecycle/render-policy.ts

@@ -3,6 +3,7 @@
 import { atom } from "jotai";
 import { hasCellsAtom, notebookAtom } from "../cells/cells";
 import { isOutputEmpty } from "../cells/outputs";
+import { notebookQueuedOrRunningCountAtom } from "../executions";
 import { KnownQueryParams } from "../constants";
 import { showCodeInRunModeAtom } from "../meta/state";
 import { type AppMode, initialModeAtom } from "../mode";
@@ -74,37 +75,22 @@ function computeRenderPolicy(input: {
 }
 
 /**
- * Both cell-runtime facts the render policy needs, computed in a single pass
- * over `cellRuntime`:
- * - `hasCachedOutputs`: any cell has a non-empty output.
- * - `allCellsIdle`: every cell's status is idle — nothing queued or running.
- *   Vacuously true for an empty notebook, so `canPaint` still gates on
- *   `hasCells`.
- *
- * Fan out to two boolean selector atoms below so `renderPolicyAtom` only
- * recomputes when one of the booleans actually flips, not on every notebook
+ * Whether any cell has a non-empty output. A boolean selector so
+ * `renderPolicyAtom` only recomputes when it flips, not on every notebook
  * update.
  */
-const cellRuntimeSummaryAtom = atom((get) => {
-  let hasCachedOutputs = false;
-  let allCellsIdle = true;
-  for (const runtime of Object.values(get(notebookAtom).cellRuntime)) {
-    if (!isOutputEmpty(runtime.output)) {
-      hasCachedOutputs = true;
-    }
-    if (runtime.status !== "idle") {
-      allCellsIdle = false;
-    }
-  }
-  return { hasCachedOutputs, allCellsIdle };
-});
-
-const hasCachedOutputsAtom = atom(
-  (get) => get(cellRuntimeSummaryAtom).hasCachedOutputs,
+const hasCachedOutputsAtom = atom((get) =>
+  Object.values(get(notebookAtom).cellRuntime).some(
+    (runtime) => !isOutputEmpty(runtime.output),
+  ),
 );
 
+/**
+ * Nothing queued or running, by the host's executions. Vacuously true for an
+ * empty notebook, so `canPaint` still gates on `hasCells`.
+ */
 const allCellsIdleAtom = atom(
-  (get) => get(cellRuntimeSummaryAtom).allCellsIdle,
+  (get) => get(notebookQueuedOrRunningCountAtom) === 0,
 );
 
 export const renderPolicyAtom = atom<RenderPolicy>((get) =>

package/src/core/network/__tests__/requests-lazy.test.ts

@@ -2,7 +2,7 @@
 
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { cellId, requestId, uiElementId } from "@/__tests__/branded";
-import { waitForKernelToBeInstantiated } from "../../kernel/state";
+import { waitForRuntimeRunning } from "../../executions";
 import type { RuntimeManager } from "../../runtime/runtime";
 import { waitForConnectionOpen } from "../connection";
 import { createLazyRequests } from "../requests-lazy";
@@ -22,8 +22,8 @@ vi.mock("../connection", async () => {
 });
 
 // Mock the kernel state module
-vi.mock("../../kernel/state", () => ({
-  waitForKernelToBeInstantiated: vi.fn().mockResolvedValue(undefined),
+vi.mock("../../executions", () => ({
+  waitForRuntimeRunning: vi.fn().mockResolvedValue(undefined),
 }));
 
 describe("createLazyRequests", () => {
@@ -119,7 +119,7 @@ describe("createLazyRequests", () => {
 
     expect(mockInit).toHaveBeenCalledOnce();
     expect(waitForConnectionOpen).toHaveBeenCalledOnce();
-    expect(waitForKernelToBeInstantiated).not.toHaveBeenCalled();
+    expect(waitForRuntimeRunning).not.toHaveBeenCalled();
     expect(mockDelegate.installExportRequirements).toHaveBeenCalledWith({
       format: "pdf",
     });
@@ -139,7 +139,7 @@ describe("createLazyRequests", () => {
 
     expect(mockInit).toHaveBeenCalledOnce();
     expect(waitForConnectionOpen).toHaveBeenCalledOnce();
-    expect(waitForKernelToBeInstantiated).not.toHaveBeenCalled();
+    expect(waitForRuntimeRunning).not.toHaveBeenCalled();
     expect(mockDelegate.sendInstantiate).toHaveBeenCalledWith(request);
   });
 

package/src/core/network/requests-lazy.ts

@@ -4,7 +4,7 @@ import { NoKernelConnectedError } from "@/utils/errors";
 import { Logger } from "@/utils/Logger";
 import { Objects } from "@/utils/objects";
 import { memoizeLastValue } from "@/utils/once";
-import { waitForKernelToBeInstantiated } from "../kernel/state";
+import { waitForRuntimeRunning } from "../executions";
 import type { RuntimeManager } from "../runtime/runtime";
 import { store } from "../state/jotai";
 import { ConnectionState } from "../session/types";
@@ -192,7 +192,7 @@ export function createLazyRequests(
         case "waitForConnectionOpen":
           // Wait for connection but don't start it
           await waitForConnectionOpen();
-          await waitForKernelToBeInstantiated();
+          await waitForRuntimeRunning();
           return request(...args);
 
         case "startConnectionWithoutKernel":
@@ -201,7 +201,7 @@ export function createLazyRequests(
           await initOnce(runtimeManager);
           await waitForConnectionOpen();
           if (action === "startConnection") {
-            await waitForKernelToBeInstantiated();
+            await waitForRuntimeRunning();
           }
           return request(...args);
 

package/src/core/notebook/operations.ts

@@ -18,7 +18,7 @@ export const notebookOperationsAtom = atom((get) => {
 /**
  * Whether this client may edit the document.
  *
- * TODO(MO-8028): The host advertises the same operations to every
+ * TODO(MO-8352): The host advertises the same operations to every
  * connection of a notebook, so a kiosk connection, an interactor that may
  * not edit, narrows it here. Once the host narrows `operations` per
  * connection by consumer capability, the kiosk term goes.

package/src/core/run-app.tsx

@@ -11,7 +11,8 @@ import { Spinner } from "@/components/icons/spinner";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/utils/cn";
 import { CellsRenderer } from "../components/editor/renderers/cells-renderer";
-import { hasCellsAtom, notebookIsRunningAtom } from "./cells/cells";
+import { hasCellsAtom } from "./cells/cells";
+import { notebookIsRunningAtom } from "./executions";
 import type { AppConfig } from "./config/config-schema";
 import { DocumentProvider } from "./notebook/document";
 import { RuntimeState } from "./kernel/RuntimeState";

package/src/core/runtime/__tests__/adapter.test.ts

@@ -3,7 +3,7 @@
 import { createStore } from "jotai";
 import { describe, expect, it } from "vitest";
 import { islandsInitializedAtom } from "../../islands/state";
-import { kernelStateAtom } from "../../kernel/state";
+import { MockExecutions } from "@/__mocks__/executions";
 import { connectionAtom } from "../../network/connection";
 import { wasmInitStateAtom } from "../../wasm/state";
 import { ConnectionState } from "../../session/types";
@@ -122,13 +122,13 @@ describe("islandsAdapter", () => {
 });
 
 describe("canRunCellsAtom", () => {
-  it("is false on a remote adapter until kernel acks", () => {
+  it("is false on a remote adapter until the host reports the runtime running", () => {
     const store = createStore();
     // Default adapter in test env is remote.
     store.set(connectionAtom, { state: ConnectionState.OPEN });
     expect(store.get(canRunCellsAtom)).toBe(false);
 
-    store.set(kernelStateAtom, { isInstantiated: true, error: null });
+    MockExecutions.seed(store, [], MockExecutions.runtime("running"));
     expect(store.get(canRunCellsAtom)).toBe(true);
   });
 

package/src/core/runtime/adapter.ts

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { type Atom, atom } from "jotai";
-import { kernelStateAtom } from "../kernel/state";
+import { runtimeStatusAtom } from "../executions";
 import { islandsInitializedAtom } from "../islands/state";
 import { isIslands } from "../islands/utils";
 import { connectionAtom } from "../network/connection";
@@ -163,8 +163,8 @@ function selectAdapter(): RuntimeAdapter {
 export const runtimeAdapterAtom = atom<RuntimeAdapter>(selectAdapter());
 
 /**
- * Remote runtimes require both the WS to be open *and* the kernel to have
- * ack'd instantiation. WASM/islands have no separate kernel handshake.
+ * Remote runtimes require both the WS to be open *and* the host to report
+ * the runtime running. WASM/islands have no separate kernel handshake.
  * Static notebooks never run cells.
  */
 export const canRunCellsAtom = atom<boolean>((get) => {
@@ -176,7 +176,7 @@ export const canRunCellsAtom = atom<boolean>((get) => {
     return false;
   }
   if (adapter.kind === "remote") {
-    return get(kernelStateAtom).isInstantiated;
+    return get(runtimeStatusAtom) === "running";
   }
   return true;
 });

package/src/core/session/useNotebookSession.tsx

@@ -62,7 +62,8 @@ import {
   type StableSessionId,
   stableSessionIdAtom,
 } from "../kernel/session";
-import { initialRunCompletedAtom, kernelStateAtom } from "../kernel/state";
+import { observeCellMessage } from "../executions";
+import { initialRunCompletedAtom } from "../kernel/state";
 import { useLayoutActions } from "../layout/state";
 import { kioskModeAtom } from "../mode";
 import { connectionAtom, startupProgressAtom } from "../network/connection";
@@ -99,7 +100,6 @@ export function useNotebookSession(opts: {
   } = useReducerActions();
   const { reconcileStagedCells } = useStagedAICellsActions();
   const { addCellNotification } = useRunsActions();
-  const setKernelState = useSetAtom(kernelStateAtom);
   const setInitialRunCompleted = useSetAtom(initialRunCompletedAtom);
   const { setVariables, setMetadata } = useVariablesActions();
   const { addColumnPreview } = useDatasetsActions();
@@ -158,7 +158,6 @@ export function useNotebookSession(opts: {
           resetCellRuntimes,
           setLayoutData,
           setCapabilities,
-          setKernelState,
           onError: showBoundary,
         });
         store.set(savedLayoutAtom, layout);
@@ -222,6 +221,7 @@ export function useNotebookSession(opts: {
         FUNCTIONS_REGISTRY.resolve(msg.data.function_call_id, msg.data);
         return;
       case "cell-op": {
+        observeCellMessage(store, msg.data);
         handleCellNotificationeration(msg.data, handleCellMessage);
         const cellData = getNotebook().cellData[msg.data.cell_id];
         if (!cellData) {

package/src/core/wasm/bridge.ts

@@ -13,7 +13,7 @@ import { reloadSafe } from "@/utils/reload-safe";
 import { once } from "@/utils/once";
 import { generateUUID } from "@/utils/uuid";
 import { createModuleWorker } from "@/utils/worker";
-import { notebookIsRunningAtom } from "../cells/cells";
+import { notebookIsRunningAtom } from "../executions";
 import { activeNotebookReplicaAtom } from "../session/active-notebook";
 import { flushDocument } from "../cells/document";
 import { createWasmNotebookBackend } from "../transports/wasm";

package/src/plugins/core/RenderHTML.tsx

@@ -300,11 +300,9 @@ const CopyableCode = ({ children }: { children: ReactNode }) => {
           tooltip={false}
           className="p-1"
           value={() => {
-            const codeElement = ref.current?.firstChild;
-            if (codeElement) {
-              return codeElement.textContent || "";
-            }
-            return "";
+            const codeElement =
+              ref.current?.querySelector("pre code") ?? ref.current?.firstChild;
+            return codeElement?.textContent ?? "";
           }}
         />
       </div>

package/src/plugins/core/__test__/RenderHTML-copy.test.tsx

@@ -0,0 +1,60 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import { copyToClipboard } from "@/utils/copy";
+import { renderHTML } from "../RenderHTML";
+
+vi.mock("@/utils/copy", () => ({
+  copyToClipboard: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock("../sanitize", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../sanitize")>()),
+  useSanitizeHtml: () => true,
+}));
+
+test.each([
+  {
+    name: "syntax highlighting and whitespace",
+    html: '<div class="codehilite"><pre><span></span><code><span class="k">if</span> x &lt; 2:\n    print(&quot;hello&quot;)\n\n</code></pre></div>',
+    expected: 'if x < 2:\n    print("hello")\n\n',
+  },
+  {
+    name: "a block title",
+    html: '<div class="codehilite"><span class="filename">example.py</span><pre><span></span><code>print("hello")\n</code></pre></div>',
+    expected: 'print("hello")\n',
+  },
+  {
+    name: "line numbers in a separate column",
+    html: '<div class="codehilite"><table class="codehilitetable"><tbody><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>\n<span class="normal">2</span></pre></div></td><td class="code"><div><pre><span></span><code>print("hello")\nprint("world")\n</code></pre></div></td></tr></tbody></table></div>',
+    expected: 'print("hello")\nprint("world")\n',
+  },
+  {
+    name: "hidden fences outside the code",
+    html: '<div class="codehilite"><span hidden>~~~python\n</span><pre><code>print("hello")\n</code></pre><span hidden>~~~</span></div>',
+    expected: 'print("hello")\n',
+  },
+  {
+    name: "literal fences inside the code",
+    html: '<div class="codehilite"><pre><code>~~~python\nprint("``` and ~~~")\n~~~\n</code></pre></div>',
+    expected: '~~~python\nprint("``` and ~~~")\n~~~\n',
+  },
+  {
+    name: "an empty code element",
+    html: '<div class="codehilite"><span class="filename">empty.py</span><pre><code></code></pre></div>',
+    expected: "",
+  },
+  {
+    name: "highlighted HTML without a code element",
+    html: '<div class="codehilite"><pre><span class="nb">print</span>("hello")\n</pre></div>',
+    expected: 'print("hello")\n',
+  },
+])("copies code from $name", async ({ html, expected }) => {
+  const { getByRole } = render(renderHTML({ html }));
+
+  fireEvent.click(getByRole("button", { name: "Copy to clipboard" }));
+
+  await waitFor(() => {
+    expect(copyToClipboard).toHaveBeenCalledExactlyOnceWith(expected);
+  });
+});