@marimo-team/frontend 0.23.9-dev2 → 0.23.9-dev21

package/src/components/chat/__tests__/chat-utils.test.ts

@@ -0,0 +1,269 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { UIMessage } from "ai";
+import { describe, expect, it } from "vitest";
+import { hasPendingToolCalls } from "../chat-utils";
+
+/**
+ * `hasPendingToolCalls` powers `sendAutomaticallyWhen` in `mo.ui.chat`:
+ * returns true only when the last assistant message *ends* with a tool
+ * call in a ready-to-round-trip state. Any trailing non-tool part (text,
+ * file, source-*, reasoning, data-*, new step-start) means the assistant
+ * has already answered and we leave the next turn to the user. The
+ * approval flow relies on this firing for `approval-responded`.
+ */
+
+const userMessage = (text: string): UIMessage => ({
+  id: `user-${text}`,
+  role: "user",
+  parts: [{ type: "text", text }],
+});
+
+const assistantToolMessage = (
+  parts: UIMessage["parts"],
+  id = "assistant-1",
+): UIMessage => ({
+  id,
+  role: "assistant",
+  parts,
+});
+
+describe("hasPendingToolCalls", () => {
+  it("returns false when there are no messages", () => {
+    expect(hasPendingToolCalls([])).toBe(false);
+  });
+
+  it("returns false when the last message is a user message", () => {
+    expect(hasPendingToolCalls([userMessage("hi")])).toBe(false);
+  });
+
+  it("returns false when the last assistant message has no tool parts", () => {
+    expect(
+      hasPendingToolCalls([
+        userMessage("hi"),
+        assistantToolMessage([{ type: "text", text: "hello!" }]),
+      ]),
+    ).toBe(false);
+  });
+
+  it("returns false while a tool is still streaming or awaiting approval", () => {
+    expect(
+      hasPendingToolCalls([
+        userMessage("delete it"),
+        assistantToolMessage([
+          {
+            type: "tool-delete_file",
+            toolCallId: "call-1",
+            state: "approval-requested",
+            input: { path: "secrets.env" },
+            approval: { id: "approval-1" },
+          } as unknown as UIMessage["parts"][number],
+        ]),
+      ]),
+    ).toBe(false);
+  });
+
+  it("returns true when the user has responded to an approval request", () => {
+    // The chat must auto-resume as soon as Approve/Deny is clicked.
+    expect(
+      hasPendingToolCalls([
+        userMessage("delete it"),
+        assistantToolMessage([
+          {
+            type: "tool-delete_file",
+            toolCallId: "call-1",
+            state: "approval-responded",
+            input: { path: "secrets.env" },
+            approval: { id: "approval-1", approved: true },
+          } as unknown as UIMessage["parts"][number],
+        ]),
+      ]),
+    ).toBe(true);
+  });
+
+  it("returns true when a tool reached a terminal output state", () => {
+    expect(
+      hasPendingToolCalls([
+        userMessage("run it"),
+        assistantToolMessage([
+          {
+            type: "tool-run_query",
+            toolCallId: "call-1",
+            state: "output-available",
+            input: { sql: "select 1" },
+            output: 1,
+          } as unknown as UIMessage["parts"][number],
+        ]),
+      ]),
+    ).toBe(true);
+  });
+
+  it("returns false when only some tool calls are ready", () => {
+    expect(
+      hasPendingToolCalls([
+        userMessage("two things"),
+        assistantToolMessage([
+          {
+            type: "tool-first",
+            toolCallId: "call-1",
+            state: "output-available",
+            input: {},
+            output: 1,
+          } as unknown as UIMessage["parts"][number],
+          {
+            type: "tool-second",
+            toolCallId: "call-2",
+            state: "input-available",
+            input: {},
+          } as unknown as UIMessage["parts"][number],
+        ]),
+      ]),
+    ).toBe(false);
+  });
+
+  it("returns false once the assistant has appended text after the tool result", () => {
+    expect(
+      hasPendingToolCalls([
+        userMessage("run it"),
+        assistantToolMessage([
+          {
+            type: "tool-run_query",
+            toolCallId: "call-1",
+            state: "output-available",
+            input: {},
+            output: 1,
+          } as unknown as UIMessage["parts"][number],
+          { type: "text", text: "The query returned 1." },
+        ]),
+      ]),
+    ).toBe(false);
+  });
+
+  it("returns false when a file part trails the completed tool call", () => {
+    // Regression: tool → text → file used to loop because only trailing
+    // text counted as "the assistant has answered".
+    expect(
+      hasPendingToolCalls([
+        userMessage("show me Starry Night"),
+        assistantToolMessage([
+          { type: "step-start" },
+          {
+            type: "tool-search_artwork",
+            toolCallId: "call-1",
+            state: "output-available",
+            input: { artist: "Van Gogh" },
+            output: { title: "The Starry Night" },
+          } as unknown as UIMessage["parts"][number],
+          { type: "text", text: "Here is the painting:" },
+          {
+            type: "file",
+            mediaType: "image/jpeg",
+            url: "https://example.com/starry-night.jpg",
+          } as unknown as UIMessage["parts"][number],
+        ]),
+      ]),
+    ).toBe(false);
+  });
+
+  it("returns false when a source-url part trails the completed tool call", () => {
+    expect(
+      hasPendingToolCalls([
+        userMessage("cite your sources"),
+        assistantToolMessage([
+          {
+            type: "tool-web_search",
+            toolCallId: "call-1",
+            state: "output-available",
+            input: { q: "marimo notebook" },
+            output: "found",
+          } as unknown as UIMessage["parts"][number],
+          { type: "text", text: "marimo is a reactive notebook." },
+          {
+            type: "source-url",
+            sourceId: "src-1",
+            url: "https://marimo.io",
+          } as unknown as UIMessage["parts"][number],
+        ]),
+      ]),
+    ).toBe(false);
+  });
+
+  it("returns false when a reasoning part trails the completed tool call", () => {
+    expect(
+      hasPendingToolCalls([
+        userMessage("explain"),
+        assistantToolMessage([
+          {
+            type: "tool-lookup",
+            toolCallId: "call-1",
+            state: "output-available",
+            input: {},
+            output: 1,
+          } as unknown as UIMessage["parts"][number],
+          {
+            type: "reasoning",
+            text: "Now I'll summarize.",
+          } as unknown as UIMessage["parts"][number],
+        ]),
+      ]),
+    ).toBe(false);
+  });
+
+  it("returns false when a new step-start follows the completed tool call", () => {
+    expect(
+      hasPendingToolCalls([
+        userMessage("multi-step"),
+        assistantToolMessage([
+          { type: "step-start" },
+          {
+            type: "tool-run_query",
+            toolCallId: "call-1",
+            state: "output-available",
+            input: {},
+            output: 1,
+          } as unknown as UIMessage["parts"][number],
+          { type: "step-start" },
+        ]),
+      ]),
+    ).toBe(false);
+  });
+
+  it("ignores providerExecuted tools", () => {
+    // Provider-side tools are resolved by the model, not the runtime, so
+    // they must not drive an auto-resume.
+    expect(
+      hasPendingToolCalls([
+        userMessage("hi"),
+        assistantToolMessage([
+          {
+            type: "tool-web_search",
+            toolCallId: "call-1",
+            state: "output-available",
+            input: {},
+            output: 1,
+            providerExecuted: true,
+          } as unknown as UIMessage["parts"][number],
+        ]),
+      ]),
+    ).toBe(false);
+  });
+
+  it("returns true for dynamic-tool parts in a terminal state", () => {
+    // `dynamic-tool` parts must drive auto-resume alongside `tool-*`.
+    expect(
+      hasPendingToolCalls([
+        userMessage("run it"),
+        assistantToolMessage([
+          {
+            type: "dynamic-tool",
+            toolName: "run_query",
+            toolCallId: "call-1",
+            state: "output-available",
+            input: {},
+            output: 1,
+          } as unknown as UIMessage["parts"][number],
+        ]),
+      ]),
+    ).toBe(true);
+  });
+});

package/src/components/chat/chat-utils.ts

@@ -5,7 +5,8 @@ import {
   type ChatAddToolOutputFunction,
   type FileUIPart,
   isToolUIPart,
-  type ToolUIPart,
+  lastAssistantMessageIsCompleteWithApprovalResponses,
+  lastAssistantMessageIsCompleteWithToolCalls,
   type UIMessage,
 } from "ai";
 import { useState } from "react";
@@ -17,7 +18,6 @@ import type {
   InvokeAiToolRequest,
   InvokeAiToolResponse,
 } from "@/core/network/types";
-import { logNever } from "@/utils/assertNever";
 import { blobToString } from "@/utils/fileToBase64";
 import { Logger } from "@/utils/Logger";
 import { getAICompletionBodyWithAttachments } from "../editor/ai/completion-utils";
@@ -169,69 +169,25 @@ export async function handleToolCall({
 }
 
 /**
- * Returns true if a tool call is "ready to be sent back to the server" — i.e.
- * either it has reached a terminal output state, or the user has just supplied
- * an approval response that the server hasn't seen yet.
- */
-function isToolCallReadyToSend(state: ToolUIPart["state"]): boolean {
-  switch (state) {
-    case "output-available":
-    case "output-error":
-    case "output-denied":
-    case "approval-responded":
-      return true;
-    case "input-streaming":
-    case "input-available":
-    case "approval-requested":
-      return false;
-    default:
-      logNever(state);
-      return false;
-  }
-}
-
-/**
- * Checks if we should send a message automatically based on the messages.
- * We auto-send when every tool call on the last assistant message has either
- * finished (output-available/error/denied) or has just received a user
- * approval response, and the assistant hasn't replied yet.
+ * Auto-send the next turn when the last assistant message ends with a
+ * tool call ready to round-trip. Any non-tool trailing part (text, file,
+ * source-*, reasoning, data-*, new step-start) means the assistant has
+ * already answered, so we leave the next turn to the user. State checks
+ * are delegated to the SDK to stay in sync with upstream.
  */
 export function hasPendingToolCalls(messages: UIMessage[]): boolean {
-  if (messages.length === 0) {
-    return false;
-  }
-
-  const lastMessage = messages[messages.length - 1];
-  const parts = lastMessage.parts;
-
-  if (parts.length === 0) {
-    return false;
-  }
-
-  // Only auto-send if the last message is an assistant message
-  // Because assistant messages are the ones that can have tool calls
-  if (lastMessage.role !== "assistant") {
+  const lastMessage = messages.at(-1);
+  if (!lastMessage || lastMessage.role !== "assistant") {
     return false;
   }
-
-  const toolParts = parts.filter(isToolUIPart);
-
-  if (toolParts.length === 0) {
+  const lastPart = lastMessage.parts.at(-1);
+  if (!lastPart || !isToolUIPart(lastPart)) {
     return false;
   }
-
-  const allToolCallsReady = toolParts.every((part) =>
-    isToolCallReadyToSend(part.state),
+  return (
+    lastAssistantMessageIsCompleteWithToolCalls({ messages }) ||
+    lastAssistantMessageIsCompleteWithApprovalResponses({ messages })
   );
-
-  // Check if the last part has any text content
-  const lastPart = parts[parts.length - 1];
-  const hasTextContent =
-    lastPart.type === "text" && lastPart.text?.trim().length > 0;
-
-  Logger.debug("All tool calls ready to send: %s", allToolCallsReady);
-
-  return allToolCallsReady && !hasTextContent;
 }
 
 export function useFileState() {

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

@@ -7,8 +7,13 @@ import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { prettyNumber } from "@/utils/numbers";
+import {
+  PANEL_TYPES,
+  type PanelType,
+} from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { Button } from "../ui/button";
 import { toast } from "../ui/use-toast";
+import { getColumnCountForDisplay } from "./hooks/use-column-visibility";
 import { DataTablePagination, prettifyRowColumnCount } from "./pagination";
 import { CellSelectionStats } from "./range-focus/cell-selection-stats";
 import type { DataTableSelection } from "./types";
@@ -22,6 +27,7 @@ interface TableBottomBarProps<TData> {
   getRowIds?: GetRowIds;
   showPageSizeSelector?: boolean;
   tableLoading?: boolean;
+  togglePanel?: (panelType: PanelType) => void;
   part?: string;
   className?: string;
 }
@@ -35,6 +41,7 @@ export const TableBottomBar = <TData,>({
   getRowIds,
   showPageSizeSelector,
   tableLoading,
+  togglePanel,
   part,
   className,
 }: TableBottomBarProps<TData>) => {
@@ -140,13 +147,27 @@ export const TableBottomBar = <TData,>({
       );
     }
 
+    const { totalColumns: effectiveTotalColumns, hiddenColumns } =
+      getColumnCountForDisplay(table, totalColumns);
+    const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
+      numRows: table.getRowCount(),
+      totalColumns: effectiveTotalColumns,
+      hiddenColumns,
+      locale,
+    });
+
     return (
-      <span>
-        {prettifyRowColumnCount({
-          numRows: table.getRowCount(),
-          totalColumns,
-          locale,
-        })}
+      <span className="flex items-center gap-1">
+        <span>{rowsAndColumns}</span>
+        {hiddenSuffix && (
+          <button
+            type="button"
+            className="text-xs underline-offset-2 hover:underline cursor-pointer"
+            onClick={() => togglePanel?.(PANEL_TYPES.COLUMN_EXPLORER)}
+          >
+            {hiddenSuffix}
+          </button>
+        )}
       </span>
     );
   };

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

@@ -35,6 +35,7 @@ interface TableTopBarProps extends Partial<ExportActionProps> {
   togglePanel?: (panelType: PanelType) => void;
   isAnyPanelOpen?: boolean;
   sizeBytes?: number | null;
+  sizeBytesIsLoading?: boolean;
 }
 
 export const TableTopBar: React.FC<TableTopBarProps> = ({
@@ -50,6 +51,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
   isAnyPanelOpen,
   downloadAs,
   sizeBytes,
+  sizeBytesIsLoading,
 }) => {
   const [internalValue, setInternalValue] = useState(searchQuery || "");
   const debouncedSearch = useDebounce(internalValue, 500);
@@ -133,7 +135,11 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
           </Button>
         )}
         {downloadAs && (
-          <ExportMenu downloadAs={downloadAs} sizeBytes={sizeBytes} />
+          <ExportMenu
+            downloadAs={downloadAs}
+            sizeBytes={sizeBytes}
+            sizeBytesIsLoading={sizeBytesIsLoading}
+          />
         )}
       </div>
     </div>

package/src/components/data-table/__tests__/TableBottomBar.test.tsx

@@ -0,0 +1,73 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { CellSelectionProvider } from "../range-focus/provider";
+import { TableBottomBar } from "../TableBottomBar";
+
+function renderWithTable(opts: {
+  totalColumns: number;
+  hiddenColumns?: string[];
+  togglePanel?: (panelType: string) => void;
+}) {
+  const Wrapper = () => {
+    const table = useReactTable({
+      data: [] as Array<Record<string, unknown>>,
+      columns: Array.from({ length: opts.totalColumns }, (_, i) => ({
+        id: `col${i}`,
+        enableHiding: true,
+      })),
+      getCoreRowModel: getCoreRowModel(),
+      locale: "en-US",
+      state: {
+        columnVisibility: Object.fromEntries(
+          (opts.hiddenColumns ?? []).map((c) => [c, false]),
+        ),
+      },
+    });
+
+    return (
+      <TableBottomBar
+        pagination={false}
+        totalColumns={opts.totalColumns}
+        table={table}
+        togglePanel={opts.togglePanel}
+      />
+    );
+  };
+
+  return render(
+    <TooltipProvider>
+      <CellSelectionProvider>
+        <Wrapper />
+      </CellSelectionProvider>
+    </TooltipProvider>,
+  );
+}
+
+describe("TableBottomBar — hidden column count", () => {
+  it("does not render '(n hidden)' when no columns are hidden", () => {
+    renderWithTable({ totalColumns: 3 });
+    expect(screen.queryByText(/hidden/)).toBeNull();
+  });
+
+  it("renders 'X visible (n hidden)' when columns are hidden", () => {
+    renderWithTable({ totalColumns: 3, hiddenColumns: ["col1"] });
+    expect(screen.getByText(/2 visible/)).toBeInTheDocument();
+    expect(screen.getByText(/\(1 hidden\)/)).toBeInTheDocument();
+  });
+
+  it("invokes togglePanel('column-explorer') when '(n hidden)' is clicked", () => {
+    const togglePanel = vi.fn();
+    renderWithTable({
+      totalColumns: 3,
+      hiddenColumns: ["col1"],
+      togglePanel,
+    });
+    screen.getByText(/\(1 hidden\)/).click();
+    expect(togglePanel).toHaveBeenCalledWith("column-explorer");
+  });
+});

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

@@ -0,0 +1,128 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ColumnExplorerPanel } from "../column-explorer-panel/column-explorer";
+import type { FieldTypesWithExternalType } from "../types";
+
+beforeAll(() => {
+  global.HTMLElement.prototype.scrollIntoView = () => {};
+  if (!global.HTMLElement.prototype.hasPointerCapture) {
+    global.HTMLElement.prototype.hasPointerCapture = () => false;
+  }
+});
+
+const FIELD_TYPES: FieldTypesWithExternalType = [
+  ["customer_name", ["string", "str"]],
+  ["cust_age", ["integer", "int"]],
+  ["order_total", ["number", "float"]],
+];
+
+type Row = Record<string, unknown>;
+
+const TEST_COLUMNS: ColumnDef<Row>[] = [
+  { id: "customer_name", accessorKey: "customer_name" },
+  { id: "cust_age", accessorKey: "cust_age" },
+  { id: "order_total", accessorKey: "order_total" },
+];
+
+interface HarnessProps {
+  totalColumns?: number;
+  initiallyHidden?: string[];
+}
+
+function PanelHarness({
+  totalColumns = 3,
+  initiallyHidden = [],
+}: HarnessProps) {
+  const table = useReactTable<Row>({
+    data: [],
+    columns: TEST_COLUMNS,
+    getCoreRowModel: getCoreRowModel(),
+    locale: "en-US",
+    state: {
+      columnVisibility: Object.fromEntries(
+        initiallyHidden.map((id) => [id, false]),
+      ),
+    },
+  });
+  return (
+    <ColumnExplorerPanel
+      previewColumn={vi.fn().mockResolvedValue({})}
+      fieldTypes={FIELD_TYPES}
+      totalRows={3}
+      totalColumns={totalColumns}
+      tableId="t1"
+      table={table}
+    />
+  );
+}
+
+function renderPanel(props?: HarnessProps) {
+  return render(
+    <TooltipProvider>
+      <PanelHarness {...(props ?? {})} />
+    </TooltipProvider>,
+  );
+}
+
+function getSearchInput() {
+  return screen.getByPlaceholderText("Search columns...");
+}
+
+describe("ColumnExplorerPanel search", () => {
+  it("shows all columns when search is empty", () => {
+    renderPanel();
+    expect(screen.getByText("customer_name")).toBeInTheDocument();
+    expect(screen.getByText("cust_age")).toBeInTheDocument();
+    expect(screen.getByText("order_total")).toBeInTheDocument();
+  });
+
+  it("matches a word prefix against any column word", () => {
+    renderPanel();
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(screen.getByText("customer_name")).toBeInTheDocument();
+    expect(screen.getByText("cust_age")).toBeInTheDocument();
+    expect(screen.queryByText("order_total")).not.toBeInTheDocument();
+  });
+
+  it("matches multi-word queries across column words in any order", () => {
+    renderPanel();
+    fireEvent.change(getSearchInput(), { target: { value: "name cust" } });
+    expect(screen.getByText("customer_name")).toBeInTheDocument();
+    expect(screen.queryByText("cust_age")).not.toBeInTheDocument();
+    expect(screen.queryByText("order_total")).not.toBeInTheDocument();
+  });
+
+  it("filters out columns that don't match any needle word", () => {
+    renderPanel();
+    fireEvent.change(getSearchInput(), { target: { value: "xyz" } });
+    expect(screen.queryByText("customer_name")).not.toBeInTheDocument();
+    expect(screen.queryByText("cust_age")).not.toBeInTheDocument();
+    expect(screen.queryByText("order_total")).not.toBeInTheDocument();
+  });
+});
+
+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
+    // TanStack table (the clipped subset). Hiding one of the rendered columns
+    // must report "2 visible (1 hidden)", not "99 visible (1 hidden)".
+    renderPanel({ totalColumns: 100, initiallyHidden: ["cust_age"] });
+    expect(screen.getByText(/2 visible/)).toBeInTheDocument();
+    expect(screen.getByText(/\(1 hidden\)/)).toBeInTheDocument();
+    expect(screen.queryByText(/99 visible/)).not.toBeInTheDocument();
+  });
+
+  it("uses dataset-wide total when no column is hidden", () => {
+    renderPanel({ totalColumns: 100 });
+    expect(screen.getByText(/100 columns/)).toBeInTheDocument();
+    expect(screen.queryByText(/hidden/)).not.toBeInTheDocument();
+  });
+});