@marimo-team/frontend 0.23.9-dev4 → 0.23.9-dev40

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();
+  });
+});

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

@@ -5,7 +5,7 @@ import type {
   RowSelectionState,
   SortingState,
 } from "@tanstack/react-table";
-import { render, screen, within } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DataTable } from "../data-table";
@@ -251,3 +251,54 @@ describe("DataTable", () => {
     expect(within(updatedRows[3]).getByText("pending")).toBeTruthy();
   });
 });
+
+describe("DataTable — all-hidden banner", () => {
+  interface Row {
+    a: number;
+    b: number;
+  }
+
+  const columns: ColumnDef<Row>[] = [
+    { accessorKey: "a", header: "A" },
+    { accessorKey: "b", header: "B" },
+  ];
+  const data: Row[] = [{ a: 1, b: 2 }];
+
+  const renderWithVisibility = (hiddenColumns: string[]) =>
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={data}
+          columns={columns}
+          selection={null}
+          totalRows={1}
+          totalColumns={2}
+          pagination={false}
+          hiddenColumns={hiddenColumns}
+        />
+      </TooltipProvider>,
+    );
+
+  it("renders banner when every user column is hidden", () => {
+    renderWithVisibility(["a", "b"]);
+    expect(screen.getByText(/All columns are hidden/i)).toBeInTheDocument();
+    expect(screen.getByText(/Unhide all/i)).toBeInTheDocument();
+  });
+
+  it("does not render the banner when at least one column is visible", () => {
+    renderWithVisibility(["a"]);
+    expect(screen.queryByText(/All columns are hidden/i)).toBeNull();
+  });
+
+  it("does not render the banner when no columns are hidden", () => {
+    renderWithVisibility([]);
+    expect(screen.queryByText(/All columns are hidden/i)).toBeNull();
+  });
+
+  it("'Unhide all' restores columns hidden via the Python kwarg", () => {
+    renderWithVisibility(["a", "b"]);
+    expect(screen.getByText(/All columns are hidden/i)).toBeInTheDocument();
+    fireEvent.click(screen.getByText(/Unhide all/i));
+    expect(screen.queryByText(/All columns are hidden/i)).toBeNull();
+  });
+});