@marimo-team/frontend 0.21.2-dev6 → 0.21.2-dev62

package/src/plugins/impl/DataTablePlugin.tsx

@@ -53,6 +53,7 @@ import {
 } from "@/components/data-table/types";
 import {
   getPageIndexForRow,
+  loadTableAndRawData,
   loadTableData,
 } from "@/components/data-table/utils";
 import { ErrorBoundary } from "@/components/editor/boundary/ErrorBoundary";
@@ -174,6 +175,7 @@ const valueCounts: z.ZodType<ValueCounts> = z.array(
 interface Data<T> {
   label: string | null;
   data: TableData<T>;
+  rawData?: TableData<T> | null;
   totalRows: number | TooManyRows;
   pagination: boolean;
   pageSize: number;
@@ -221,6 +223,7 @@ type DataTableFunctions = {
     total_rows: number | TooManyRows;
     cell_styles?: CellStyleState | null;
     cell_hover_texts?: Record<string, Record<string, string | null>> | null;
+    raw_data?: TableData<T> | null;
   }>;
   get_data_url?: GetDataUrl;
   get_row_ids?: GetRowIds;
@@ -243,6 +246,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       ]),
       label: z.string().nullable(),
       data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+      rawData: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
       totalRows: z.union([z.number(), z.literal(TOO_MANY_ROWS)]),
       pagination: z.boolean().default(false),
       pageSize: z.number().default(10),
@@ -327,6 +331,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             )
             .nullable(),
           cell_hover_texts: cellHoverTextSchema.nullable(),
+          raw_data: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
         }),
       ),
     get_row_ids: rpc.input(z.object({}).passthrough()).output(
@@ -529,17 +534,23 @@ export const LoadingDataTableComponent = memo(
     // Data loading
     const { data, error, isPending, isFetching } = useAsyncData<{
       rows: T[];
+      rawRows?: T[];
       totalRows: number | TooManyRows;
       cellStyles: CellStyleState | undefined | null;
       cellHoverTexts?: Record<string, Record<string, string | null>> | null;
     }>(async () => {
       // If there is no data, return an empty array
       if (props.totalRows === 0) {
-        return { rows: Arrays.EMPTY, totalRows: 0, cellStyles: {} };
+        return {
+          rows: Arrays.EMPTY,
+          totalRows: 0,
+          cellStyles: {},
+        };
       }
 
       // Table data is a url string or an array of objects
       let tableData = props.data;
+      let rawTableData: TableData<T> | undefined | null = props.rawData;
       let totalRows = props.totalRows;
       let cellStyles = props.cellStyles;
       let cellHoverTexts = props.cellHoverTexts;
@@ -587,13 +598,19 @@ export const LoadingDataTableComponent = memo(
       } else {
         const searchResults = await searchResultsPromise;
         tableData = searchResults.data;
+        rawTableData = searchResults.raw_data;
         totalRows = searchResults.total_rows;
         cellStyles = searchResults.cell_styles || {};
         cellHoverTexts = searchResults.cell_hover_texts || {};
       }
-      tableData = await loadTableData(tableData);
+      const [data, rawData] = await loadTableAndRawData(
+        tableData,
+        rawTableData,
+      );
+      tableData = data;
       return {
         rows: tableData,
+        rawRows: rawData,
         totalRows: totalRows,
         cellStyles,
         cellHoverTexts,
@@ -715,6 +732,7 @@ export const LoadingDataTableComponent = memo(
       <DataTableComponent
         {...props}
         data={data?.rows ?? Arrays.EMPTY}
+        rawData={data?.rawRows}
         columnSummaries={columnSummaries}
         sorting={sorting}
         setSorting={setSorting}
@@ -766,6 +784,7 @@ LoadingDataTableComponent.displayName = "LoadingDataTableComponent";
 const DataTableComponent = ({
   label,
   data,
+  rawData,
   totalRows,
   maxColumns,
   pagination,
@@ -814,6 +833,7 @@ const DataTableComponent = ({
 }: DataTableProps<unknown> &
   DataTableSearchProps & {
     data: unknown[];
+    rawData?: unknown[];
     columnSummaries?: ColumnSummaries;
     getRow: (rowIdx: number) => Promise<GetRowResult>;
   }): JSX.Element => {
@@ -1015,6 +1035,7 @@ const DataTableComponent = ({
         <Labeled label={label} align="top" fullWidth={true}>
           <DataTable
             data={data}
+            rawData={rawData}
             columns={columns}
             className={className}
             maxHeight={maxHeight}

package/src/plugins/impl/SliderPlugin.tsx

@@ -152,9 +152,7 @@ const SliderComponent = ({
                 nextValue = Number(start);
               }
               setInternalValue(nextValue);
-              if (!debounce) {
-                setValue(nextValue);
-              }
+              setValue(nextValue);
             }}
             minValue={start}
             maxValue={stop}

package/src/plugins/impl/__tests__/SliderPlugin.test.tsx

@@ -0,0 +1,120 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { z } from "zod";
+import { SetupMocks } from "@/__mocks__/common";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import type { IPluginProps } from "../../types";
+import { SliderPlugin } from "../SliderPlugin";
+
+SetupMocks.resizeObserver();
+
+describe("SliderPlugin", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    store.set(initialModeAtom, "edit");
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const createProps = (
+    debounce: boolean,
+    includeInput: boolean,
+    setValue: ReturnType<typeof vi.fn>,
+  ): IPluginProps<number, z.infer<typeof SliderPlugin.prototype.validator>> => {
+    return {
+      host: document.createElement("div"),
+      value: 5,
+      setValue,
+      data: {
+        initialValue: 5,
+        start: 0,
+        stop: 10,
+        step: 1,
+        label: "Test Slider",
+        debounce,
+        orientation: "horizontal" as const,
+        showValue: false,
+        fullWidth: false,
+        includeInput,
+        steps: null,
+      },
+      functions: {},
+    };
+  };
+
+  it("slider triggers setValue immediately when debounce is false", () => {
+    const plugin = new SliderPlugin();
+    const setValue = vi.fn();
+    const props = createProps(false, false, setValue);
+    const { container } = render(plugin.render(props));
+
+    act(() => {
+      vi.advanceTimersByTime(0);
+    });
+
+    const thumb = container.querySelector('[role="slider"]');
+    expect(thumb).toBeTruthy();
+
+    // Radix UI Slider updates on keyboard ArrowRight/ArrowLeft
+    act(() => {
+      (thumb as HTMLElement)?.focus();
+      fireEvent.keyDown(thumb!, { key: "ArrowRight" });
+    });
+
+    expect(setValue).toHaveBeenCalledWith(6);
+  });
+
+  it("slider does not trigger setValue immediately when debounce is true", () => {
+    const plugin = new SliderPlugin();
+    const setValue = vi.fn();
+    const props = createProps(true, false, setValue);
+    const { container } = render(plugin.render(props));
+
+    act(() => {
+      vi.advanceTimersByTime(0);
+    });
+
+    const thumb = container.querySelector('[role="slider"]');
+
+    act(() => {
+      (thumb as HTMLElement)?.focus();
+      // Simulate just a programmatic change that Radix would trigger via pointer move
+      // which fires onValueChange but not onValueCommit yet
+      // Because we can't easily separated Radix's internal pointer events in jsdom, we
+      // test the main issue: editable input. We can trust Radix's onValueChange vs onValueCommit.
+    });
+
+    // We verified above that NumberField works when debounce=true
+    expect(setValue).not.toHaveBeenCalled();
+  });
+
+  it("editable input triggers setValue immediately even when slider debounce is true", () => {
+    const plugin = new SliderPlugin();
+    const setValue = vi.fn();
+    const props = createProps(true, true, setValue);
+    const { getByRole } = render(plugin.render(props));
+
+    act(() => {
+      vi.advanceTimersByTime(0);
+    });
+
+    // The react-aria NumberField renders an input textbox.
+    const numericInput = getByRole("textbox");
+
+    act(() => {
+      // Simulate typing a new value and pressing enter
+      // With React-Aria NumberField, onChange fires on blur or enter
+      fireEvent.change(numericInput, { target: { value: "9" } });
+      fireEvent.blur(numericInput);
+    });
+
+    // Because the user explicitly typed 9 in the editable input,
+    // setValue should be called immediately regardless of debounce=true.
+    expect(setValue).toHaveBeenCalledWith(9);
+  });
+});

package/src/plugins/impl/anywidget/model.ts

@@ -323,8 +323,7 @@ export async function handleWidgetMessage(
   const msg = notification.message;
 
   // Decode base64 buffers to DataViews (present in open/update/custom messages)
-  const base64Buffers: Base64String[] =
-    "buffers" in msg ? (msg.buffers as Base64String[]) : [];
+  const base64Buffers: Base64String[] = "buffers" in msg ? msg.buffers : [];
   const buffers = base64Buffers.map(base64ToDataView);
 
   switch (msg.method) {

package/src/stories/cell.stories.tsx

@@ -3,6 +3,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { createStore, Provider } from "jotai";
 import { createRef } from "react";
+import { cellId } from "@/__tests__/branded";
 import { type NotebookState, notebookAtom } from "@/core/cells/cells";
 import {
   type CellRuntimeState,
@@ -18,7 +19,6 @@ import { MultiColumn } from "@/utils/id-tree";
 import type { Milliseconds, Seconds } from "@/utils/time";
 import { Cell as EditorCell } from "../components/editor/notebook-cell";
 import { TooltipProvider } from "../components/ui/tooltip";
-import type { CellId } from "../core/cells/ids";
 
 type Story = StoryObj<typeof Cell>;
 
@@ -34,11 +34,11 @@ const Cell: React.FC<{
     config?: CellConfig;
   };
 }> = ({ overrides = {} }) => {
-  const cellId = "1" as CellId;
+  const cid = cellId("1");
   const notebook: NotebookState = {
     cellData: {
-      [cellId]: {
-        id: cellId,
+      [cid]: {
+        id: cid,
         name: "cell_1",
         code: "import marimo as mo",
         edited: overrides.edited ?? false,
@@ -52,9 +52,9 @@ const Cell: React.FC<{
         lastExecutionTime: null,
       },
     },
-    cellIds: MultiColumn.from([[cellId]]),
+    cellIds: MultiColumn.from([[cid]]),
     cellRuntime: {
-      [cellId]: createCellRuntimeState({
+      [cid]: createCellRuntimeState({
         output: overrides.output ?? null,
         runElapsedTimeMs: overrides.runElapsedTimeMs ?? (10 as Milliseconds),
         status: overrides.status ?? "idle",
@@ -70,7 +70,7 @@ const Cell: React.FC<{
       }),
     },
     cellHandles: {
-      [cellId]: createRef(),
+      [cid]: createRef(),
     },
     cellLogs: [],
     history: [],
@@ -86,7 +86,7 @@ const Cell: React.FC<{
     <Provider store={store}>
       <TooltipProvider>
         <EditorCell
-          cellId={cellId}
+          cellId={cid}
           theme={"light"}
           showPlaceholder={false}
           mode={"edit"}

package/src/stories/layout/vertical/one-column.stories.tsx

@@ -3,6 +3,7 @@
 import type { Meta } from "@storybook/react-vite";
 import { createStore, Provider } from "jotai";
 import { createRef } from "react";
+import { cellId } from "@/__tests__/branded";
 import { type NotebookState, notebookAtom } from "@/core/cells/cells";
 import { createCellRuntimeState } from "@/core/cells/types";
 import { defaultUserConfig, parseAppConfig } from "@/core/config/config-schema";
@@ -99,8 +100,8 @@ export default {
 type W = Window & { __MARIMO_STATIC__?: { files: Record<string, unknown> } };
 
 const EditModeCodeShown = () => {
-  const cellId = "Hbol" as CellId;
-  const notebook = createLongReprNotebook(cellId);
+  const cid = cellId("Hbol");
+  const notebook = createLongReprNotebook(cid);
 
   const store = createStore();
   store.set(notebookAtom, notebook);
@@ -124,8 +125,8 @@ const EditModeCodeShown = () => {
 };
 
 const EditModeCodeHidden = () => {
-  const cellId = "Hbol" as CellId;
-  const notebook = createLongReprNotebook(cellId, true);
+  const cid = cellId("Hbol");
+  const notebook = createLongReprNotebook(cid, true);
 
   const store = createStore();
   store.set(notebookAtom, notebook);
@@ -149,8 +150,8 @@ const EditModeCodeHidden = () => {
 };
 
 const ReadModeCodeShown = () => {
-  const cellId = "Hbol" as CellId;
-  const notebook = createLongReprNotebook(cellId);
+  const cid = cellId("Hbol");
+  const notebook = createLongReprNotebook(cid);
 
   const store = createStore();
   store.set(notebookAtom, notebook);
@@ -168,8 +169,8 @@ const ReadModeCodeShown = () => {
 };
 
 const ReadModeCodeHidden = () => {
-  const cellId = "Hbol" as CellId;
-  const notebook = createLongReprNotebook(cellId);
+  const cid = cellId("Hbol");
+  const notebook = createLongReprNotebook(cid);
 
   const store = createStore();
   store.set(notebookAtom, notebook);

package/src/stories/log-viewer.stories.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { cellId } from "@/__tests__/branded";
 import { LogViewer } from "@/components/editor/chrome/panels/logs-panel";
-import type { CellId } from "@/core/cells/ids";
 import { Dialog } from "../components/ui/dialog";
 import { TooltipProvider } from "../components/ui/tooltip";
 
@@ -23,37 +23,37 @@ export const Primary: Story = {
             {
               timestamp: Date.now(),
               level: "stdout",
-              cellId: "cell1" as CellId,
+              cellId: cellId("cell1"),
               message: "Hello world!",
             },
             {
               timestamp: Date.now(),
               level: "stdout",
-              cellId: "cell1" as CellId,
+              cellId: cellId("cell1"),
               message: "Running cell...",
             },
             {
               timestamp: Date.now(),
               level: "stdout",
-              cellId: "cell1" as CellId,
+              cellId: cellId("cell1"),
               message: "Done!",
             },
             {
               timestamp: Date.now(),
               level: "stderr",
-              cellId: "cell2" as CellId,
+              cellId: cellId("cell2"),
               message: "Output is too large!",
             },
             {
               timestamp: Date.now(),
               level: "stderr",
-              cellId: "cell2" as CellId,
+              cellId: cellId("cell2"),
               message: "String length is too short.".repeat(100),
             },
-            ...Array.from({ length: 100 }).map((_, index) => ({
+            ...Array.from({ length: 100 }).map(() => ({
               timestamp: Date.now(),
               level: "stdout" as const,
-              cellId: "cell1" as CellId,
+              cellId: cellId("cell1"),
               message: "Running cell...",
             })),
           ]}

package/src/stories/variables.stories.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { cellId } from "@/__tests__/branded";
 import { VariableTable } from "@/components/variables/variables-table";
-import type { CellId } from "@/core/cells/ids";
 
 const meta: Meta<typeof VariableTable> = {
   title: "VariableTable",
@@ -51,7 +51,7 @@ export const Primary: Story = {
     <div className="max-w-4xl">
       <VariableTable
         variables={variables}
-        cellIds={["2", "1", "3"] as CellId[]}
+        cellIds={[cellId("2"), cellId("1"), cellId("3")]}
       />
     </div>
   ),

package/src/utils/__tests__/download.test.tsx

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Mocks } from "@/__mocks__/common";
-import type { CellId } from "@/core/cells/ids";
+import { cellId } from "@/__tests__/branded";
 import { CellOutputId } from "@/core/cells/ids";
 import {
   downloadAsPDF,
@@ -218,7 +219,7 @@ describe("getImageDataUrlForCell", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockElement = document.createElement("div");
-    mockElement.id = CellOutputId.create("cell-1" as CellId);
+    mockElement.id = CellOutputId.create(cellId("cell-1"));
     document.body.append(mockElement);
   });
 
@@ -227,7 +228,7 @@ describe("getImageDataUrlForCell", () => {
   });
 
   it("should return undefined if element is not found", async () => {
-    const result = await getImageDataUrlForCell("nonexistent" as CellId);
+    const result = await getImageDataUrlForCell(cellId("nonexistent"));
 
     expect(result).toBeUndefined();
     expect(Logger.error).toHaveBeenCalledWith(
@@ -238,7 +239,7 @@ describe("getImageDataUrlForCell", () => {
   it("should capture screenshot and return data URL", async () => {
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    const result = await getImageDataUrlForCell("cell-1" as CellId);
+    const result = await getImageDataUrlForCell(cellId("cell-1"));
 
     expect(result).toBe(mockDataUrl);
     expect(toPng).toHaveBeenCalledWith(
@@ -253,7 +254,7 @@ describe("getImageDataUrlForCell", () => {
   it("should pass style options to prevent clipping", async () => {
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    await getImageDataUrlForCell("cell-1" as CellId);
+    await getImageDataUrlForCell(cellId("cell-1"));
 
     expect(toPng).toHaveBeenCalledWith(
       mockElement,
@@ -274,7 +275,7 @@ describe("getImageDataUrlForCell", () => {
     });
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    await getImageDataUrlForCell("cell-1" as CellId);
+    await getImageDataUrlForCell(cellId("cell-1"));
 
     expect(toPng).toHaveBeenCalledWith(
       mockElement,
@@ -287,7 +288,7 @@ describe("getImageDataUrlForCell", () => {
   it("should pass scrollbar hiding styles via extraStyleContent", async () => {
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    await getImageDataUrlForCell("cell-1" as CellId);
+    await getImageDataUrlForCell(cellId("cell-1"));
 
     expect(toPng).toHaveBeenCalledWith(
       mockElement,
@@ -302,7 +303,7 @@ describe("getImageDataUrlForCell", () => {
     mockElement.style.maxHeight = "100px";
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    await getImageDataUrlForCell("cell-1" as CellId);
+    await getImageDataUrlForCell(cellId("cell-1"));
 
     // DOM should remain unchanged
     expect(mockElement.style.overflow).toBe("hidden");
@@ -312,7 +313,7 @@ describe("getImageDataUrlForCell", () => {
   it("should throw error on failure", async () => {
     vi.mocked(toPng).mockRejectedValue(new Error("Capture failed"));
 
-    await expect(getImageDataUrlForCell("cell-1" as CellId)).rejects.toThrow(
+    await expect(getImageDataUrlForCell(cellId("cell-1"))).rejects.toThrow(
       "Capture failed",
     );
   });
@@ -320,13 +321,13 @@ describe("getImageDataUrlForCell", () => {
   it("should handle concurrent captures correctly", async () => {
     // Create a second element
     const mockElement2 = document.createElement("div");
-    mockElement2.id = CellOutputId.create("cell-2" as CellId);
+    mockElement2.id = CellOutputId.create(cellId("cell-2"));
     document.body.append(mockElement2);
 
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    const capture1 = getImageDataUrlForCell("cell-1" as CellId);
-    const capture2 = getImageDataUrlForCell("cell-2" as CellId);
+    const capture1 = getImageDataUrlForCell(cellId("cell-1"));
+    const capture2 = getImageDataUrlForCell(cellId("cell-2"));
 
     await Promise.all([capture1, capture2]);
 
@@ -437,8 +438,8 @@ describe("downloadHTMLAsImage", () => {
     await downloadHTMLAsImage({ element: mockElement, filename: "test" });
 
     expect(toast).toHaveBeenCalledWith({
-      title: "Error",
-      description: "Failed to download as PNG.",
+      title: "Failed to download as PNG",
+      description: "Failed",
       variant: "danger",
     });
   });
@@ -461,7 +462,7 @@ describe("downloadCellOutputAsImage", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockElement = document.createElement("div");
-    mockElement.id = CellOutputId.create("cell-1" as CellId);
+    mockElement.id = CellOutputId.create(cellId("cell-1"));
     mockAppEl = document.createElement("div");
     mockAppEl.id = "App";
     // Mock scrollTo since jsdom doesn't implement it
@@ -486,7 +487,7 @@ describe("downloadCellOutputAsImage", () => {
   });
 
   it("should show error toast if element not found", async () => {
-    await downloadCellOutputAsImage("nonexistent" as CellId, "test");
+    await downloadCellOutputAsImage(cellId("nonexistent"), "test");
 
     expect(toPng).not.toHaveBeenCalled();
     expect(Logger.error).toHaveBeenCalledWith(
@@ -502,7 +503,7 @@ describe("downloadCellOutputAsImage", () => {
   it("should show error toast if toPng fails", async () => {
     vi.mocked(toPng).mockRejectedValue(new Error("Screenshot failed"));
 
-    await downloadCellOutputAsImage("cell-1" as CellId, "result");
+    await downloadCellOutputAsImage(cellId("cell-1"), "result");
 
     expect(toast).toHaveBeenCalledWith({
       title: "Failed to download PNG",
@@ -514,7 +515,7 @@ describe("downloadCellOutputAsImage", () => {
   it("should download cell output as image", async () => {
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    await downloadCellOutputAsImage("cell-1" as CellId, "result");
+    await downloadCellOutputAsImage(cellId("cell-1"), "result");
 
     expect(toPng).toHaveBeenCalledWith(
       mockElement,
@@ -529,7 +530,7 @@ describe("downloadCellOutputAsImage", () => {
   it("should pass style options to toPng for full content capture", async () => {
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    await downloadCellOutputAsImage("cell-1" as CellId, "result");
+    await downloadCellOutputAsImage(cellId("cell-1"), "result");
 
     expect(toPng).toHaveBeenCalledWith(
       mockElement,
@@ -547,7 +548,7 @@ describe("downloadCellOutputAsImage", () => {
     mockElement.style.maxHeight = "100px";
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    await downloadCellOutputAsImage("cell-1" as CellId, "result");
+    await downloadCellOutputAsImage(cellId("cell-1"), "result");
 
     // DOM should remain unchanged
     expect(mockElement.style.overflow).toBe("hidden");

package/src/utils/copy.ts

@@ -2,21 +2,34 @@
 import { Logger } from "./Logger";
 
 /**
- * Tries to copy text to the clipboard using the navigator.clipboard API.
- * If that fails, it falls back to prompting the user to copy.
+ * Copy text to the clipboard. When `html` is provided, writes both
+ * text/html and text/plain so rich content (e.g. hyperlinks) is
+ * preserved when pasting into apps like Excel or Google Sheets.
  *
  * As of 2024-10-29, Safari does not support navigator.clipboard.writeText
  * when running localhost http.
  */
-export async function copyToClipboard(text: string) {
+export async function copyToClipboard(text: string, html?: string) {
   if (navigator.clipboard === undefined) {
     Logger.warn("navigator.clipboard is not supported");
     window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
     return;
   }
 
-  await navigator.clipboard.writeText(text).catch(async () => {
-    // Fallback to prompt
+  if (html && navigator.clipboard.write) {
+    try {
+      const item = new ClipboardItem({
+        "text/html": new Blob([html], { type: "text/html" }),
+        "text/plain": new Blob([text], { type: "text/plain" }),
+      });
+      await navigator.clipboard.write([item]);
+      return;
+    } catch {
+      Logger.warn("Failed to write rich text, falling back to plain text");
+    }
+  }
+
+  await navigator.clipboard.writeText(text).catch(() => {
     Logger.warn("Failed to copy to clipboard using navigator.clipboard");
     window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
   });