@marimo-team/frontend 0.25.3-dev10 → 0.25.3-dev100

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/__tests__/table-list.test.tsx

@@ -0,0 +1,118 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
+import type React from "react";
+import { describe, expect, it } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import type { SQLTableContext } from "@/core/datasets/data-source-connections";
+import { PreviewSQLTableList } from "@/core/datasets/request-registry";
+import type { SQLTableListPreview } from "@/core/kernel/messages";
+import type { RequestId } from "@/core/network/DeferredRequestRegistry";
+import { requestClientAtom } from "@/core/network/requests";
+import { store } from "@/core/state/jotai";
+import { TableList } from "../datasources";
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <Provider store={store}>{children}</Provider>
+);
+
+const sqlTableContext: SQLTableContext = {
+  engine: "my_engine",
+  database: "my_db",
+  schema: "public",
+  dialect: "postgres",
+  schemaPath: ["public"],
+};
+
+// The kernel answers table-list requests over the websocket, so the mock
+// settles the deferred request instead of returning the response directly.
+function renderDeferredTableList(settle?: (requestId: RequestId) => void) {
+  const client = MockRequestClient.create();
+  client.previewSQLTableList.mockImplementation(async ({ requestId }) => {
+    settle?.(requestId);
+    return null;
+  });
+  store.set(requestClientAtom, client);
+  render(
+    <TableList
+      tables={[]}
+      tablesResolved={false}
+      sqlTableContext={sqlTableContext}
+    />,
+    { wrapper },
+  );
+  return client;
+}
+
+describe("TableList deferred discovery", () => {
+  it("shows the error when the request rejects", async () => {
+    renderDeferredTableList((requestId) =>
+      PreviewSQLTableList.reject(requestId, new Error("engine offline")),
+    );
+
+    expect(screen.getByText("Loading tables...")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByText("engine offline")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("Loading tables...")).toBeNull();
+  });
+
+  it("shows the error when the response has no tables field", async () => {
+    renderDeferredTableList((requestId) =>
+      PreviewSQLTableList.resolve(requestId, {} as SQLTableListPreview),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("No tables available")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("Loading tables...")).toBeNull();
+  });
+
+  it("shows the empty state for an empty table list", async () => {
+    renderDeferredTableList((requestId) =>
+      PreviewSQLTableList.resolve(requestId, {
+        tables: [],
+      } as unknown as SQLTableListPreview),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("No tables found")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("Loading tables...")).toBeNull();
+  });
+
+  it("requests the table list with the table context and waits for the kernel", async () => {
+    let pendingRequestId: RequestId | undefined;
+    const client = renderDeferredTableList((requestId) => {
+      pendingRequestId = requestId;
+    });
+
+    await waitFor(() => {
+      expect(client.previewSQLTableList).toHaveBeenCalledTimes(1);
+    });
+    expect(client.previewSQLTableList).toHaveBeenCalledWith(
+      expect.objectContaining({
+        engine: "my_engine",
+        database: "my_db",
+        schema: "public",
+        schemaPath: ["public"],
+      }),
+    );
+    expect(screen.getByText("Loading tables...")).toBeInTheDocument();
+
+    // Settle the request so the process-wide registry does not keep the entry.
+    expect(pendingRequestId).toBeDefined();
+    PreviewSQLTableList.resolve(
+      pendingRequestId as RequestId,
+      {
+        tables: [],
+      } as unknown as SQLTableListPreview,
+    );
+    await waitFor(() => {
+      expect(screen.queryByText("Loading tables...")).toBeNull();
+    });
+    expect(PreviewSQLTableList.requests.size).toBe(0);
+  });
+});

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"

package/src/components/datasources/datasources.tsx

@@ -13,7 +13,7 @@ import {
   VisibilityToggleButton,
 } from "@/components/editor/file-tree/tree-actions";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
 import { Tooltip } from "@/components/ui/tooltip";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
@@ -702,7 +702,40 @@ const SchemaNode: React.FC<SchemaNodeProps> = (props) => {
   );
 };
 
-const TableList: React.FC<{
+// Kept outside the component because the React Compiler does not yet
+// support try/finally inside component bodies.
+async function loadTableList(
+  sqlTableContext: SQLTableContext,
+  addTableList: ReturnType<typeof useDataSourceActions>["addTableList"],
+  setLoading: (loading: boolean) => void,
+) {
+  setLoading(true);
+  try {
+    const { engine, database, schema, schemaPath } = sqlTableContext;
+    const previewTableList = await PreviewSQLTableList.request({
+      engine: engine,
+      database: database,
+      schema: schema,
+      schemaPath: schemaPath ?? [],
+    });
+
+    if (!previewTableList?.tables) {
+      throw new Error("No tables available");
+    }
+
+    addTableList({
+      tables: previewTableList.tables,
+      sqlTableContext: sqlTableContext,
+    });
+  } finally {
+    setLoading(false);
+  }
+}
+
+/**
+ * This is exported for testing purposes only.
+ */
+export const TableList: React.FC<{
   tables: DataTable[];
   sqlTableContext?: SQLTableContext;
   searchValue?: string;
@@ -731,26 +764,7 @@ const TableList: React.FC<{
   // resets tablesResolved to false).
   const { isPending, error } = useAsyncData(async () => {
     if (!tablesResolved && sqlTableContext) {
-      setTablesLoading(true);
-
-      const { engine, database, schema, schemaPath } = sqlTableContext;
-      const previewTableList = await PreviewSQLTableList.request({
-        engine: engine,
-        database: database,
-        schema: schema,
-        schemaPath: schemaPath ?? [],
-      });
-
-      if (!previewTableList?.tables) {
-        setTablesLoading(false);
-        throw new Error("No tables available");
-      }
-
-      addTableList({
-        tables: previewTableList.tables,
-        sqlTableContext: sqlTableContext,
-      });
-      setTablesLoading(false);
+      await loadTableList(sqlTableContext, addTableList, setTablesLoading);
     }
   }, [tablesResolved, sqlTableContext]);
 
@@ -964,6 +978,7 @@ const DatasetTableItem: React.FC<{
         {renderRowsByColumns()}
         <Tooltip content="Add table to notebook" delayDuration={400}>
           <Button
+            aria-label={`Add table ${table.name} to notebook`}
             className="group-hover:inline-flex hidden"
             variant="text"
             size="icon"
@@ -1054,19 +1069,16 @@ const DatasetColumnItem: React.FC<{
           {isIndexed &&
             renderItemSubtext({ tooltipContent: "Indexed", content: "IDX" })}
         </div>
-        <Tooltip content="Copy column name" delayDuration={400}>
-          <Button
-            variant="text"
-            size="icon"
-            className="group-hover:opacity-100 opacity-0 hover:bg-muted text-muted-foreground hover:text-foreground"
-          >
-            <CopyClipboardIcon
-              tooltip={false}
-              value={column.name}
-              className="h-3 w-3"
-            />
-          </Button>
-        </Tooltip>
+        <CopyClipboardIcon
+          tooltip="Copy column name"
+          value={column.name}
+          ariaLabel={`Copy column name ${column.name}`}
+          className="h-3 w-3"
+          buttonClassName={cn(
+            buttonVariants({ variant: "text", size: "icon" }),
+            "group-hover:opacity-100 opacity-0 hover:bg-muted text-muted-foreground hover:text-foreground",
+          )}
+        />
         <span className="text-xs text-muted-foreground">
           {column.external_type}
         </span>

package/src/components/debugger/debugger-code.tsx

@@ -162,6 +162,7 @@ export const DebuggerControls: React.FC<{
     <div className="flex">
       <Tooltip content="Next line">
         <Button
+          aria-label="Next line"
           variant="text"
           size="icon"
           data-testid="debugger-next-button"
@@ -173,6 +174,7 @@ export const DebuggerControls: React.FC<{
       </Tooltip>
       <Tooltip content="Continue execution">
         <Button
+          aria-label="Continue execution"
           variant="text"
           size="icon"
           data-testid="debugger-continue-button"
@@ -187,6 +189,7 @@ export const DebuggerControls: React.FC<{
       </Tooltip>
       <Tooltip content="Print stack trace">
         <Button
+          aria-label="Print stack trace"
           variant="text"
           size="icon"
           data-testid="debugger-stack-button"
@@ -198,6 +201,7 @@ export const DebuggerControls: React.FC<{
       </Tooltip>
       <Tooltip content="Help">
         <Button
+          aria-label="Debugger help"
           variant="text"
           size="icon"
           data-testid="debugger-help-button"
@@ -210,6 +214,7 @@ export const DebuggerControls: React.FC<{
       {onClear && (
         <Tooltip content="Quit and clear">
           <Button
+            aria-label="Quit and clear debugger"
             variant="text"
             size="icon"
             data-testid="debugger-clear-button"

package/src/components/dependency-graph/panels.tsx

@@ -216,11 +216,12 @@ export const GraphSelectionPanel: React.FC<{
               </Button>
             </Tooltip>
             <ConnectionCellActionsDropdown cellId={selection.id}>
-              <Button variant="ghost" size="icon">
+              <Button aria-label="Cell actions" variant="ghost" size="icon">
                 <MoreVerticalIcon className="w-4 h-4" />
               </Button>
             </ConnectionCellActionsDropdown>
             <Button
+              aria-label="Close cell details"
               variant="text"
               size="icon"
               onClick={() => {

package/src/components/editor/SortableCell.tsx

@@ -71,7 +71,6 @@ export const SortableCell = React.forwardRef(
     return (
       <SortableCellInternal
         ref={ref}
-        cellId={cellId}
         canMoveX={canMoveX}
         {...props}
         attributes={attributes}
@@ -86,7 +85,7 @@ export const SortableCell = React.forwardRef(
 );
 SortableCell.displayName = "SortableCell";
 
-interface SortableCellInternalProps extends Props {
+interface SortableCellInternalProps extends Omit<Props, "cellId"> {
   children: React.ReactNode;
   attributes: DraggableAttributes;
   listeners: SyntheticListenerMap | undefined;
@@ -99,7 +98,6 @@ interface SortableCellInternalProps extends Props {
 const SortableCellInternal = React.forwardRef(
   (
     {
-      cellId,
       canMoveX,
       children,
       attributes,

package/src/components/editor/__tests__/dynamic-favicon.test.tsx

@@ -1,17 +1,41 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render, waitFor } from "@testing-library/react";
+import {
+  act,
+  render as renderComponent,
+  waitFor,
+} from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { useCellErrors } from "@/core/cells/cells";
+import { Provider, createStore } from "jotai";
+import type { ReactNode } from "react";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { cellId } from "@/__tests__/branded";
+import { notebookAtom } from "@/core/cells/cells";
 import { DynamicFavicon } from "../dynamic-favicon";
 
-// Mock useCellErrors hook
-vi.mock("@/core/cells/cells", () => ({
-  useCellErrors: vi.fn(),
-}));
-
 describe("DynamicFavicon", () => {
   let favicon: HTMLLinkElement;
+  let store: ReturnType<typeof createStore>;
+  const id = cellId("cell");
+
+  function render(ui: ReactNode) {
+    return renderComponent(ui, {
+      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+    });
+  }
+
+  function setErrors() {
+    store.set(
+      notebookAtom,
+      MockNotebook.notebookStateWithErrors([
+        {
+          cellId: id,
+          cellName: "cell",
+          errorData: [MockNotebook.errors.syntax("Invalid syntax")],
+        },
+      ]),
+    );
+  }
 
   beforeEach(() => {
     document
@@ -27,15 +51,20 @@ describe("DynamicFavicon", () => {
     // Mock document.hasFocus
     vi.spyOn(document, "hasFocus").mockReturnValue(true);
 
-    // Mock useCellErrors to return no errors by default
-    (useCellErrors as ReturnType<typeof vi.fn>).mockReturnValue([]);
+    store = createStore();
+    store.set(
+      notebookAtom,
+      MockNotebook.notebookState({
+        cellData: { [id]: { code: "x = 1" } },
+      }),
+    );
   });
 
   afterEach(() => {
     document
       .querySelectorAll("link[rel~='icon']")
       .forEach((element) => element.remove());
-    vi.clearAllMocks();
+    vi.restoreAllMocks();
     vi.useRealTimers();
   });
 
@@ -67,9 +96,7 @@ describe("DynamicFavicon", () => {
   });
 
   it("should show error favicon when run completes with errors", async () => {
-    (useCellErrors as ReturnType<typeof vi.fn>).mockReturnValue([
-      { error: "mock error" },
-    ]);
+    setErrors();
 
     const { rerender } = render(<DynamicFavicon isRunning={true} />);
 
@@ -147,6 +174,72 @@ describe("DynamicFavicon", () => {
     });
   });
 
+  it("does not look up or rewrite the favicon when code changes", async () => {
+    const { rerender } = render(<DynamicFavicon isRunning={true} />);
+    await waitFor(() => expect(favicon.href).toContain("circle-play.ico"));
+    rerender(<DynamicFavicon isRunning={false} />);
+    await waitFor(() => expect(favicon.href).toContain("circle-check.ico"));
+    const lookup = vi.spyOn(document, "querySelector");
+    const write = vi.spyOn(favicon, "href", "set");
+
+    await act(async () => {
+      store.set(notebookAtom, (state) => ({
+        ...state,
+        cellData: {
+          ...state.cellData,
+          [id]: { ...state.cellData[id], code: "x = 2" },
+        },
+      }));
+    });
+
+    expect(
+      lookup.mock.calls.filter(
+        ([selector]) => selector === "link[rel~='icon']",
+      ),
+    ).toEqual([]);
+    expect(write).not.toHaveBeenCalled();
+    lookup.mockRestore();
+    write.mockRestore();
+  });
+
+  it("updates the favicon when the error count changes", async () => {
+    const { rerender } = render(<DynamicFavicon isRunning={true} />);
+    await waitFor(() => expect(favicon.href).toContain("circle-play.ico"));
+    rerender(<DynamicFavicon isRunning={false} />);
+    await waitFor(() => expect(favicon.href).toContain("circle-check.ico"));
+
+    act(() => setErrors());
+    await waitFor(() => expect(favicon.href).toContain("circle-x.ico"));
+
+    act(() =>
+      store.set(
+        notebookAtom,
+        MockNotebook.notebookState({ cellData: { [id]: {} } }),
+      ),
+    );
+    await waitFor(() => expect(favicon.href).toContain("circle-check.ico"));
+  });
+
+  it("keeps the completion icon until its own reset timer expires", async () => {
+    vi.useFakeTimers();
+    const { rerender } = render(<DynamicFavicon isRunning={true} />);
+    await act(() => vi.advanceTimersByTimeAsync(1000));
+    rerender(<DynamicFavicon isRunning={false} />);
+    await act(() => vi.advanceTimersByTimeAsync(2000));
+    expect(favicon.href).toContain("circle-check.ico");
+    await act(() => vi.advanceTimersByTimeAsync(1000));
+    expect(favicon.href).toContain("favicon.ico");
+  });
+
+  it("cancels the reset timer when unmounted", async () => {
+    vi.useFakeTimers();
+    const { unmount } = render(<DynamicFavicon isRunning={true} />);
+    await act(() => vi.advanceTimersByTimeAsync(0));
+    expect(vi.getTimerCount()).toBe(1);
+    unmount();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
   describe("notifications", () => {
     beforeEach(() => {
       vi.spyOn(document, "visibilityState", "get").mockReturnValue("hidden");
@@ -156,7 +249,7 @@ describe("DynamicFavicon", () => {
       global.Notification.permission = "granted";
     });
 
-    it("should send success notification when run completes without errors", () => {
+    it("should send success notification when run completes without errors", async () => {
       // @ts-expect-error ok in tests
       global.Notification = vi
         .fn()
@@ -172,12 +265,11 @@ describe("DynamicFavicon", () => {
 
       const { rerender } = render(<DynamicFavicon isRunning={true} />);
       rerender(<DynamicFavicon isRunning={false} />);
+      await waitFor(() => expect(Notification).toHaveBeenCalledOnce());
     });
 
-    it("should send error notification when run completes with errors", () => {
-      (useCellErrors as ReturnType<typeof vi.fn>).mockReturnValue([
-        { error: "mock error" },
-      ]);
+    it("should send error notification when run completes with errors", async () => {
+      setErrors();
 
       // @ts-expect-error ok in tests
       global.Notification = vi
@@ -194,6 +286,7 @@ describe("DynamicFavicon", () => {
 
       const { rerender } = render(<DynamicFavicon isRunning={true} />);
       rerender(<DynamicFavicon isRunning={false} />);
+      await waitFor(() => expect(Notification).toHaveBeenCalledOnce());
     });
 
     it("should not send notification when document is visible", () => {

package/src/components/editor/actions/__tests__/pair-with-agent-modal.test.tsx

@@ -314,6 +314,30 @@ describe("PairWithAgentModal", () => {
     expect(screen.getByRole("tabpanel")).not.toHaveTextContent("--notebook");
   });
 
+  it("reverifies the target when host mode is enabled again for the same Session", async () => {
+    await act(async () => {
+      render(<PairWithAgentModal onClose={vi.fn()} />, { wrapper });
+    });
+    expect(screen.getByRole("tabpanel")).toHaveTextContent(NOTEBOOK_ID);
+    act(() =>
+      store.set(pairConfigAtom, { ...PAIR_CONFIG, hostEnabled: false }),
+    );
+
+    const pending = new Deferred<Response>();
+    vi.mocked(fetch).mockImplementation((url) =>
+      String(url).endsWith("/api/sessions")
+        ? pending.promise
+        : responseFor(url),
+    );
+    act(() => store.set(pairConfigAtom, PAIR_CONFIG));
+    expect(screen.getByRole("button", { name: "Copy command" })).toBeDisabled();
+    expect(screen.getByRole("tabpanel")).not.toHaveTextContent(NOTEBOOK_ID);
+
+    await act(async () => pending.resolve(await responseFor("/api/sessions")));
+    expect(screen.getByRole("button", { name: "Copy command" })).toBeEnabled();
+    expect(screen.getByRole("tabpanel")).toHaveTextContent(NOTEBOOK_ID);
+  });
+
   it("keeps copying disabled when Notebook verification fails", async () => {
     vi.mocked(fetch).mockImplementation((url) =>
       String(url).endsWith("/api/sessions")