@marimo-team/frontend 0.25.3-dev95 → 0.25.3-dev97

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-DNG4qQ-E.js"></script>
+    <script type="module" crossorigin src="./assets/index-vCxv6WVQ.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-B0Z9INg1.js">
     <link rel="modulepreload" crossorigin href="./assets/react-DVplv7_D.js">
     <link rel="modulepreload" crossorigin href="./assets/compiler-runtime-BrajqUja.js">
@@ -139,7 +139,7 @@
     <link rel="modulepreload" crossorigin href="./assets/useTheme-BAA27lh7.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-qvoPYHtx.js">
     <link rel="modulepreload" crossorigin href="./assets/purify.es--06brOip.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-yOs72eZm.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-D_11MjVB.js">
     <link rel="modulepreload" crossorigin href="./assets/coerce-DWjFeXOY.js">
     <link rel="modulepreload" crossorigin href="./assets/get-DjNf4SIX.js">
     <link rel="modulepreload" crossorigin href="./assets/_hasPath-BmRQipI0.js">
@@ -154,40 +154,40 @@
     <link rel="modulepreload" crossorigin href="./assets/copy-KlhazlhB.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-D9Dr-k4J.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-YOKDWASO-BIpRENEC.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer--CwVm4kJ.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-BWUzqkJM.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-Djr5m5ac.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-8-a5vovc.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-C_IwVJR_.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-CNDedpS4.js">
-    <link rel="modulepreload" crossorigin href="./assets/blob-DCjrjZKW.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-ByaWxoIt.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-DQvxDDNS.js">
+    <link rel="modulepreload" crossorigin href="./assets/blob-5VcB8K_t.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-pdKBv96t.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-wcDq9hYT.js">
     <link rel="modulepreload" crossorigin href="./assets/share-BZW3tzEX.js">
     <link rel="modulepreload" crossorigin href="./assets/events-CbeVJ6OD.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-BaYudep3.js">
-    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-CdGuz4a_.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-Bl9BiY_s.js">
+    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-CAEGdoFW.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-eAtVhbNZ.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-DS6umAnH.js">
     <link rel="modulepreload" crossorigin href="./assets/html-to-image-D_0rd3_B.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-CV1k4XQ4.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-dK52bLxZ.js">
     <link rel="modulepreload" crossorigin href="./assets/switch-DYjBfpNJ.js">
     <link rel="modulepreload" crossorigin href="./assets/tabs-CY8E4r9U.js">
     <link rel="modulepreload" crossorigin href="./assets/table-DG7Ap4H4.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-CxVozGAC.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-Qw1f8Jhy.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-C_KYlaSv.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-BZNTQ12N.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-63DyBLHQ.js">
     <link rel="modulepreload" crossorigin href="./assets/external-link-UrX9KO36.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-DyNE-o8o.js">
     <link rel="modulepreload" crossorigin href="./assets/message-circle-C3rKm8_a.js">
     <link rel="modulepreload" crossorigin href="./assets/hat-glasses-C8RhSVii.js">
     <link rel="modulepreload" crossorigin href="./assets/package-GSoSTiIK.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-BakEOWsf.js">
-    <link rel="modulepreload" crossorigin href="./assets/error-entries-JgrZYMbe.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-deuXnlU-.js">
+    <link rel="modulepreload" crossorigin href="./assets/error-entries-3GVk2KjS.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-DTaqCu_d.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-_1LTGJQM.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-BFbgKiRH.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-czclLlOn.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-Dv059B3A.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-C5yYyzuF.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-CgZvP0p0.js">
     <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-DA-62E-Y.js">
     <link rel="modulepreload" crossorigin href="./assets/en-US-Buu61juQ.js">
     <link rel="modulepreload" crossorigin href="./assets/isValid-q_Ad80ug.js">
@@ -207,7 +207,7 @@
     <link rel="modulepreload" crossorigin href="./assets/table-vrvqpuKJ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-Dbe0MrFr.js">
     <link rel="modulepreload" crossorigin href="./assets/useStateForKey-CGMJQT8x.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-Csbov8Fx.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-CyAKmZDD.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-C4_v6fQW.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-_W_Lo0P4.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-uCpVvaAR.js">
@@ -221,11 +221,11 @@
     <link rel="modulepreload" crossorigin href="./assets/file-icons-CdJgUy-I.js">
     <link rel="modulepreload" crossorigin href="./assets/globe-UdPdIbF7.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-CI_o7NhW.js">
-    <link rel="modulepreload" crossorigin href="./assets/useAddCell-C0J8quGE.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-DSyr-yE2.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-Cjuqk2YR.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-RFuQP50v.js">
     <link rel="modulepreload" crossorigin href="./assets/data-grid-types-DgHVN_Zz.js">
     <link rel="modulepreload" crossorigin href="./assets/glide-utils-HFqhvWHI.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-DXM8SqGY.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-xe533-Cn.js">
     <link rel="modulepreload" crossorigin href="./assets/square-BPmgQFnh.js">
     <link rel="modulepreload" crossorigin href="./assets/triangle-alert-DmIqR8sY.js">
     <link rel="modulepreload" crossorigin href="./assets/prop-types-Djf4O40e.js">
@@ -238,7 +238,7 @@
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-B2DVK2De.js">
     <link rel="modulepreload" crossorigin href="./assets/useDelayElapsed-BlsDT4TV.js">
     <link rel="modulepreload" crossorigin href="./assets/pathUtils-DPmlLd-r.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-Drd73Quo.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-ChmAuvxz.js">
     <link rel="stylesheet" crossorigin href="./assets/cells-0PFKL3SH.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DjIHoF9Z.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B0GmlMnR.css">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.25.3-dev95",
+  "version": "0.25.3-dev97",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/app-config/ai-config.tsx

@@ -502,6 +502,7 @@ const ModelListItem: React.FC<ModelListItemProps> = ({
           <ModelInfoCard model={model} />
           {model.custom && (
             <Button
+              aria-label={`Delete model ${model.name}`}
               variant="ghost"
               size="icon"
               onClick={handleDelete}

package/src/components/chat/acp/blocks.tsx

@@ -328,9 +328,9 @@ export const PlansBlock = (props: { data: PlanNotificationEvent[] }) => {
         </span>
       </div>
       <ul className="flex flex-col gap-1">
-        {plans.map((item, index) => (
+        {plans.map((item) => (
           <li
-            key={`${item.status}-${index}`}
+            key={item.content}
             className={`
               flex items-center gap-2 px-2 py-1 rounded
             `}

package/src/components/chat/chat-components.tsx

@@ -124,6 +124,7 @@ export const AddContextButton = ({
   return (
     <Tooltip content="Add context">
       <Button
+        aria-label="Add context"
         variant="text"
         size="icon"
         onClick={handleAddContext}
@@ -148,6 +149,7 @@ export const AttachFileButton = ({
     <>
       <Tooltip content="Attach a file">
         <Button
+          aria-label="Attach a file"
           variant="text"
           size="icon"
           onClick={() => fileInputRef.current?.click()}

package/src/components/chat/chat-panel.tsx

@@ -166,7 +166,12 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   return (
     <div className="flex border-b px-2 py-1 justify-between shrink-0 items-center">
       <Tooltip content="New chat">
-        <Button variant="text" size="icon" onClick={onNewChat}>
+        <Button
+          aria-label="New chat"
+          variant="text"
+          size="icon"
+          onClick={onNewChat}
+        >
           <PlusIcon className="h-4 w-4" />
         </Button>
       </Tooltip>

package/src/components/data-table/__tests__/column-explorer.test.tsx

@@ -8,6 +8,7 @@ import {
 import { fireEvent, render, screen, within } from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import type { PreviewColumn } from "@/plugins/impl/DataTablePlugin";
 import { ColumnExplorerPanel } from "../column-explorer-panel/column-explorer";
 import type { FieldTypesWithExternalType } from "../types";
 
@@ -36,11 +37,13 @@ const TEST_COLUMNS: ColumnDef<Row>[] = [
 interface HarnessProps {
   totalColumns?: number;
   initiallyHidden?: readonly string[];
+  previewColumn?: PreviewColumn;
 }
 
 function PanelHarness({
   totalColumns = 3,
   initiallyHidden = EMPTY_HIDDEN_COLUMNS,
+  previewColumn = vi.fn().mockResolvedValue({}),
 }: HarnessProps) {
   const table = useReactTable<Row>({
     data: [],
@@ -55,7 +58,7 @@ function PanelHarness({
   });
   return (
     <ColumnExplorerPanel
-      previewColumn={vi.fn().mockResolvedValue({})}
+      previewColumn={previewColumn}
       fieldTypes={FIELD_TYPES}
       totalRows={3}
       totalColumns={totalColumns}
@@ -124,6 +127,29 @@ describe("ColumnExplorerPanel search", () => {
   });
 });
 
+describe("ColumnExplorerPanel chart actions", () => {
+  it("names chart actions for each expanded column", async () => {
+    const previewColumn = vi.fn<PreviewColumn>().mockResolvedValue({
+      chart_code: "chart_code",
+      chart_spec: null,
+      error: null,
+      missing_packages: null,
+      stats: null,
+    });
+    renderPanel({ previewColumn });
+    fireEvent.click(screen.getByText("cust_age"));
+
+    for (const column of ["customer_name", "cust_age"]) {
+      expect(
+        await screen.findByRole("button", {
+          name: `Add chart to notebook for ${column}`,
+        }),
+      ).toBeInTheDocument();
+      expect(previewColumn).toHaveBeenCalledWith({ column });
+    }
+  });
+});
+
 describe("ColumnExplorerPanel header counts", () => {
   it("uses rendered-subset total when a clipped column is hidden", () => {
     // Dataset has 100 columns server-side; only 3 are rendered into the

package/src/components/data-table/charts/__tests__/chart-panel.test.tsx

@@ -10,13 +10,27 @@ import { cellId } from "@/__tests__/branded";
 import { LazyVegaEmbed } from "@/components/charts/lazy";
 import { vegaLoader } from "@/plugins/impl/vega/loader";
 import { ChartPanel, TablePanel, type TablePanelProps } from "../charts";
-import { getChartTabName, tabsStorageAtom } from "../storage";
+import { createTabId, getChartTabName, tabsStorageAtom } from "../storage";
 import { ChartType, NONE_VALUE } from "../types";
+import { TOO_MANY_ROWS } from "../../types";
 
 vi.mock("@/components/charts/lazy", () => ({
   LazyVegaEmbed: vi.fn(() => null),
 }));
 
+vi.mock("../components/chart-items", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../components/chart-items")>()),
+  ChartTypeSelect: ({
+    onValueChange,
+  }: {
+    onValueChange: (value: string) => void;
+  }) => (
+    <button type="button" onClick={() => onValueChange("line")}>
+      Change chart type
+    </button>
+  ),
+}));
+
 beforeAll(() => {
   SetupMocks.resizeObserver();
 });
@@ -38,6 +52,7 @@ describe("ChartPanel", () => {
             id,
             [
               {
+                id: createTabId(),
                 tabName,
                 chartType: ChartType.BAR,
                 config: {
@@ -283,4 +298,62 @@ describe("ChartPanel", () => {
       });
     },
   );
+  it("keeps panel state when a chart type change renames the tab", async () => {
+    const store = createStore();
+    const id = cellId("rename-keeps-state");
+    const tabName = getChartTabName(0, ChartType.BAR);
+    store.set(
+      tabsStorageAtom,
+      new Map([
+        [
+          id,
+          [
+            {
+              id: createTabId(),
+              tabName,
+              chartType: ChartType.BAR,
+              config: {
+                general: {
+                  xColumn: { field: "value", type: "number" },
+                  yColumn: {
+                    field: "value",
+                    type: "integer",
+                    aggregate: NONE_VALUE,
+                  },
+                },
+              },
+            },
+          ],
+        ],
+      ]),
+    );
+    const sample = [{ value: 1 }];
+    const props: TablePanelProps = {
+      cellId: id,
+      data: sample,
+      dataTable: <div />,
+      totalRows: TOO_MANY_ROWS,
+      columns: 1,
+      displayHeader: true,
+      fieldTypes: [["value", ["number", "float64"]]],
+    };
+    const { getByRole, findByRole, queryByRole } = render(
+      <Provider store={store}>
+        <Tooltip.Provider>
+          <TablePanel {...props} />
+        </Tooltip.Provider>
+      </Provider>,
+    );
+    fireEvent.click(getByRole("tab", { name: tabName }));
+    fireEvent.click(await findByRole("button", { name: "Proceed" }));
+    await waitFor(() => {
+      expect(queryByRole("button", { name: "Proceed" })).toBeNull();
+    });
+
+    fireEvent.click(getByRole("button", { name: "Change chart type" }));
+
+    const renamed = getChartTabName(0, ChartType.LINE);
+    await findByRole("tab", { name: renamed });
+    expect(queryByRole("button", { name: "Proceed" })).toBeNull();
+  });
 });

package/src/components/data-table/charts/__tests__/storage.test.ts

@@ -16,7 +16,7 @@ import { cellId } from "@/__tests__/branded";
 import { availableStorage } from "@/utils/storage/storage";
 import { ChartSchema } from "../schemas";
 import type { TabName } from "../storage";
-import { KEY, tabsStorageAtom } from "../storage";
+import { createTabId, KEY, tabsStorageAtom } from "../storage";
 import { ChartType } from "../types";
 
 describe("Chart Transforms Storage", () => {
@@ -39,6 +39,7 @@ describe("Chart Transforms Storage", () => {
       const store = getDefaultStore();
       const cid = cellId("cell-1");
       const tabData = {
+        id: createTabId(),
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
         config: ChartSchema.parse({
@@ -63,6 +64,7 @@ describe("Chart Transforms Storage", () => {
       const store = getDefaultStore();
       const cid = cellId("cell-1");
       const tabData1 = {
+        id: createTabId(),
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
         config: ChartSchema.parse({
@@ -73,6 +75,7 @@ describe("Chart Transforms Storage", () => {
         }),
       };
       const tabData2 = {
+        id: createTabId(),
         tabName: "Tab 2" as TabName,
         chartType: ChartType.BAR,
         config: ChartSchema.parse({

package/src/components/data-table/charts/charts.tsx

@@ -48,7 +48,12 @@ import { HeatmapForm } from "./forms/heatmap";
 import { PieForm } from "./forms/pie";
 import { LazyChart } from "./lazy-chart";
 import { ChartSchema, type ChartSchemaType, getChartDefaults } from "./schemas";
-import { getChartTabName, type TabName, tabsStorageAtom } from "./storage";
+import {
+  createTabId,
+  getChartTabName,
+  type TabName,
+  tabsStorageAtom,
+} from "./storage";
 import { ChartType } from "./types";
 
 const NEW_CHART_TYPE = "bar" as ChartType;
@@ -114,7 +119,12 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     const tabName = getChartTabName(0, NEW_CHART_TYPE);
     const newTabs = new Map(tabsMap);
     newTabs.set(cellId, [
-      { tabName, chartType: NEW_CHART_TYPE, config: getChartDefaults() },
+      {
+        id: createTabId(),
+        tabName,
+        chartType: NEW_CHART_TYPE,
+        config: getChartDefaults(),
+      },
     ]);
     saveTabsMap(newTabs);
     setTabCounter(1);
@@ -135,6 +145,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     newTabs.set(cellId, [
       ...tabs,
       {
+        id: createTabId(),
         tabName,
         chartType: NEW_CHART_TYPE,
         config: getChartDefaults(),
@@ -233,9 +244,9 @@ export const TablePanel: React.FC<TablePanelProps> = ({
         >
           Table
         </TabsTrigger>
-        {tabs.map((tab, idx) => (
+        {tabs.map((tab) => (
           <TabsTrigger
-            key={idx}
+            key={tab.id}
             className="text-xs"
             value={tab.tabName}
             onClick={() => setSelectedTab(tab.tabName)}
@@ -263,7 +274,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
       <TabsContent className="mt-1 overflow-hidden" value={DEFAULT_TAB_NAME}>
         {dataTable}
       </TabsContent>
-      {tabs.map((tab, idx) => {
+      {tabs.map((tab) => {
         const saveChart = (formValues: ChartSchemaType) => {
           saveTabChart({
             tabName: tab.tabName,
@@ -275,7 +286,11 @@ export const TablePanel: React.FC<TablePanelProps> = ({
           saveTabChartType(tab.tabName, chartType);
         };
         return (
-          <TabsContent key={idx} value={tab.tabName} className="h-[400px] mt-0">
+          <TabsContent
+            key={tab.id}
+            value={tab.tabName}
+            className="h-[400px] mt-0"
+          >
             <ChartPanel
               tableData={data}
               chartConfig={tab.config}

package/src/components/data-table/charts/storage.ts

@@ -7,13 +7,16 @@ import { Logger } from "@/utils/Logger";
 import { NotebookScopedLocalStorage } from "@/utils/storage/typed";
 import { capitalize } from "@/utils/strings";
 import type { TypedString } from "@/utils/typed";
+import { generateUUID } from "@/utils/uuid";
 import { ChartSchema, type ChartSchemaType } from "./schemas";
 import type { ChartType } from "./types";
 
 export type TabName = TypedString<"TabName">;
+export type TabId = TypedString<"TabId">;
 export const KEY = "marimo:charts:v2";
 
 interface TabStorage {
+  id: TabId;
   tabName: TabName; // unique within cell
   chartType: ChartType;
   config: ChartSchemaType;
@@ -21,11 +24,15 @@ interface TabStorage {
 
 type TabStorageMap = Map<CellId, TabStorage[]>;
 
-const TabStorageSchema = z.object({
-  tabName: z.string().transform((name) => name as TabName),
-  chartType: z.string().transform((type) => type as ChartType),
-  config: ChartSchema,
-});
+const TabStorageSchema = z
+  .object({
+    id: z.string().optional(),
+    tabName: z.string().transform((name) => name as TabName),
+    chartType: z.string().transform((type) => type as ChartType),
+    config: ChartSchema,
+  })
+  // Stored tabs without an id use their name, which is unique within a cell.
+  .transform((tab) => ({ ...tab, id: (tab.id ?? tab.tabName) as TabId }));
 const TabStorageEntriesSchema = z.array(
   z.tuple([
     z.string().transform((name) => name as CellId),
@@ -64,6 +71,10 @@ export const tabsStorageAtom = atomWithStorage<TabStorageMap>(
   mapStorage,
 );
 
+export function createTabId(): TabId {
+  return generateUUID() as TabId;
+}
+
 /**
  * Convenience function to get the tab name for a given tab number and chart type
  */

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -345,7 +345,7 @@ const ColumnPreview = ({
   const chart = chart_spec && renderChart(chart_spec, theme);
 
   const addDataframeChart = chart_code && (
-    <AddDataframeChart chartCode={chart_code} />
+    <AddDataframeChart chartCode={chart_code} columnName={columnName} />
   );
 
   return (

package/src/components/datasources/__tests__/column-actions.test.tsx

@@ -0,0 +1,97 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { Command, CommandList } from "@/components/ui/command";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { DataTable } from "@/core/kernel/messages";
+import { requestClientAtom } from "@/core/network/requests";
+import { copyToClipboard } from "@/utils/copy";
+import { TableList } from "../datasources";
+
+vi.mock("@/utils/copy", () => ({
+  copyToClipboard: vi.fn().mockResolvedValue(undefined),
+}));
+
+beforeAll(() => {
+  HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+
+const table: DataTable = {
+  name: "users",
+  columns: [
+    {
+      name: "email",
+      type: "string",
+      external_type: "VARCHAR",
+      sample_values: [],
+    },
+    {
+      name: "name",
+      type: "string",
+      external_type: "VARCHAR",
+      sample_values: [],
+    },
+  ],
+  source: "memory",
+  source_type: "local",
+  type: "table",
+  engine: null,
+  indexes: null,
+  num_columns: 2,
+  num_rows: null,
+  variable_name: null,
+  primary_keys: null,
+};
+
+describe("Column actions", () => {
+  it("copies each column through one named button without expanding its preview", async () => {
+    const store = createStore();
+    const client = MockRequestClient.create();
+    store.set(requestClientAtom, client);
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <Command>
+            <CommandList>
+              <TableList tables={[table]} />
+            </CommandList>
+          </Command>
+        </TooltipProvider>
+      </Provider>,
+    );
+
+    fireEvent.click(await screen.findByText("users"));
+
+    for (const column of table.columns) {
+      const copyButton = await screen.findByRole("button", {
+        name: `Copy column name ${column.name}`,
+      });
+      const row = screen.getByRole("option", {
+        name: `${column.name} ${column.external_type}`,
+      });
+      expect(within(row).getAllByRole("button")).toEqual([copyButton]);
+      expect(copyButton.querySelector("button")).toBeNull();
+
+      fireEvent.focus(copyButton);
+      expect(
+        await screen.findByRole("tooltip", { name: "Copy column name" }),
+      ).toBeInTheDocument();
+
+      fireEvent.click(copyButton);
+      await waitFor(() => {
+        expect(copyToClipboard).toHaveBeenLastCalledWith(column.name);
+      });
+      expect(client.previewDatasetColumn).not.toHaveBeenCalled();
+    }
+    expect(copyToClipboard).toHaveBeenCalledTimes(2);
+  });
+});