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

package/dist/{number-overlay-editor-8Y4ehcLw.js → number-overlay-editor-DYj-4eDE.js}

@@ -1,6 +1,6 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-sHtZdjeP.js";
-import { a as n } from "./glide-data-editor-D30nP9Xm.js";
+import { a as n } from "./glide-data-editor-DWkgIB7l.js";
 //#region ../node_modules/.pnpm/@glideapps+glide-data-grid@6.0.4-alpha24_lodash@4.17.21_marked@15.0.12_react-dom@19.3.0_27cffe7f1bc30287d59ac27db3240c5b/node_modules/@glideapps/glide-data-grid/dist/esm/internal/data-grid-overlay-editor/private/number-overlay-editor-style.js
 var r = /* @__PURE__ */ e(t()), i = /*#__PURE__*/ n("div")({
 	name: "NumberOverlayEditorStyle",

package/dist/{process-output-BKLVbFnU.js → process-output-DD-oSvZk.js}

@@ -1,6 +1,6 @@
-import { O as e } from "./html-to-image-DBOTlHF9.js";
+import { O as e } from "./html-to-image-CWdayGZU.js";
 import { h as t } from "./tooltip-CKO1pHJo.js";
-import { C as n, w as r } from "./error-entries-BZiemZfD.js";
+import { C as n, w as r } from "./error-entries-TAO6kEhF.js";
 import { b as i } from "./select-B0LRDH0g.js";
 import { n as a } from "./semaphore-89jsoHtS.js";
 var o = t("file", [["path", {

package/dist/{reveal-component-D8VAiQY5.js → reveal-component-pH1bfDAz.js}

@@ -3,15 +3,15 @@ import { c as t, g as n, h as r, m as i, t as a } from "./button-BxB3RDjN.js";
 import { t as o } from "./react-sHtZdjeP.js";
 import { t as s } from "./compiler-runtime-CldRdSsv.js";
 import { h as c, t as l } from "./tooltip-CKO1pHJo.js";
-import { O as u } from "./error-entries-BZiemZfD.js";
-import { Q as d, X as f, Z as p, an as m, cn as h, i as g, in as _, l as v, n as y, r as b, t as x, u as S } from "./common-BUSxx69_.js";
+import { O as u } from "./error-entries-TAO6kEhF.js";
+import { Q as d, X as f, Z as p, an as m, cn as h, i as g, in as _, l as v, n as y, r as b, t as x, u as S } from "./common-Cm_wLVIe.js";
 import { M as C } from "./select-B0LRDH0g.js";
 import { q as ee } from "./dropdown-menu-B_7xD2X4.js";
 import { _ as w } from "./toDate-DKH0_kMo.js";
 import { t as T } from "./jsx-runtime-3BD1kT0s.js";
 import { q as E } from "./use-restore-focus-DBCITLeF.js";
 import { A as D, C as O, b as k } from "./useTheme-CfeaVw5D.js";
-import { a as A, n as te, t as ne } from "./code-visibility-CLLrmROz.js";
+import { a as A, n as te, t as ne } from "./code-visibility-B72H-y9s.js";
 /* empty css                */
 var j = c("sticky-note", [["path", {
 	d: "M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z",
@@ -6516,13 +6516,13 @@ var ia = (e) => {
 		c = K, s = tr, u = m ? "mo-slide-content flex flex-col gap-3" : "mo-slide-content", d = o, f = n.blocks.map((e, t) => {
 			let n = e.cells.map((e) => r(e.id) ? i ? /* @__PURE__ */ (0, G.jsx)(cr, { cell: e }, e.id) : /* @__PURE__ */ (0, G.jsx)(lr, { cell: e }, e.id) : /* @__PURE__ */ (0, G.jsx)(ia, { cell: e }, e.id));
 			if (e.isFragment) {
-				let e = p.get(t);
+				let r = p.get(t);
 				return /* @__PURE__ */ (0, G.jsxs)(Jn, {
 					as: "div",
-					children: [n, e && /* @__PURE__ */ (0, G.jsx)(Qi, { text: e })]
-				}, t);
+					children: [n, r && /* @__PURE__ */ (0, G.jsx)(Qi, { text: r })]
+				}, e.cells[0].id);
 			}
-			return /* @__PURE__ */ (0, G.jsx)(M.Fragment, { children: n }, t);
+			return /* @__PURE__ */ (0, G.jsx)(M.Fragment, { children: n }, e.cells[0].id);
 		}), t[0] = o, t[1] = i, t[2] = r, t[3] = a, t[4] = n, t[5] = s, t[6] = c, t[7] = l, t[8] = u, t[9] = d, t[10] = f;
 	} else s = t[5], c = t[6], l = t[7], u = t[8], d = t[9], f = t[10];
 	let p;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "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);
+  });
+});

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

@@ -1,16 +1,24 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render } from "@testing-library/react";
-import { Provider } from "jotai";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
 import type React from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import type { SQLTableContext } from "@/core/datasets/data-source-connections";
 import type { DataTable, DataTableColumn } from "@/core/kernel/messages";
 import { requestClientAtom } from "@/core/network/requests";
 import { store } from "@/core/state/jotai";
 import { DatasetColumnPreview } from "../column-preview";
 
+const { createNewCell } = vi.hoisted(() => ({ createNewCell: vi.fn() }));
+
+vi.mock("@/core/cells/cells", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/core/cells/cells")>()),
+  useCellActions: () => ({ createNewCell }),
+}));
+
 const wrapper = ({ children }: { children: React.ReactNode }) => (
   <Provider store={store}>{children}</Provider>
 );
@@ -95,3 +103,56 @@ describe("DatasetColumnPreview fullyQualifiedTableName", () => {
     );
   });
 });
+
+describe("DatasetColumnPreview chart actions", () => {
+  it("identifies each column and inserts its corresponding chart", () => {
+    const store = createStore();
+    store.set(requestClientAtom, MockRequestClient.create());
+    const columns: DataTableColumn[] = [
+      {
+        name: "email",
+        type: "string",
+        external_type: "str",
+        sample_values: [],
+      },
+      { name: "age", type: "integer", external_type: "int", sample_values: [] },
+    ];
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          {columns.map((column) => (
+            <DatasetColumnPreview
+              key={column.name}
+              table={{ ...table, source_type: "local", engine: null }}
+              column={column}
+              onAddColumnChart={vi.fn()}
+              preview={{
+                table_name: table.name,
+                column_name: column.name,
+                chart_code: `chart_${column.name}`,
+                chart_spec: null,
+                error: null,
+                missing_packages: null,
+                stats: {},
+              }}
+            />
+          ))}
+        </TooltipProvider>
+      </Provider>,
+    );
+
+    for (const column of columns) {
+      fireEvent.click(
+        screen.getByRole("button", {
+          name: `Add chart to notebook for ${column.name}`,
+        }),
+      );
+      expect(createNewCell).toHaveBeenLastCalledWith({
+        code: `chart_${column.name}`,
+        before: false,
+        cellId: "__end__",
+      });
+    }
+    expect(createNewCell).toHaveBeenCalledTimes(2);
+  });
+});

package/src/components/datasources/column-preview.tsx

@@ -112,12 +112,16 @@ export const DatasetColumnPreview: React.FC<{
 
   const addDataframeChart = preview.chart_code &&
     table.source_type === "local" && (
-      <AddDataframeChart chartCode={preview.chart_code} />
+      <AddDataframeChart
+        chartCode={preview.chart_code}
+        columnName={column.name}
+      />
     );
 
   const addSQLChart = table.source_type === "duckdb" && (
     <Tooltip content="Add SQL cell" delayDuration={400}>
       <Button
+        aria-label={`Add SQL cell for ${column.name}`}
         variant="outline"
         size="icon"
         className="z-10 bg-background absolute right-1 -top-1"
@@ -238,7 +242,8 @@ export function renderChart(chartSpec: string, theme: Theme) {
 
 export const AddDataframeChart: React.FC<{
   chartCode: string;
-}> = ({ chartCode }) => {
+  columnName: string;
+}> = ({ chartCode, columnName }) => {
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
   const lastFocusedCellId = useLastFocusedCellId();
   const { createNewCell } = useCellActions();
@@ -261,6 +266,7 @@ export const AddDataframeChart: React.FC<{
   return (
     <Tooltip content="Add chart to notebook" delayDuration={400}>
       <Button
+        aria-label={`Add chart to notebook for ${columnName}`}
         variant="outline"
         size="icon"
         className="z-10 bg-background absolute right-1 -top-0.5"