@marimo-team/frontend 0.23.9-dev3 → 0.23.9-dev32

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-panel.tsx

@@ -15,11 +15,13 @@ import { useAtom, useAtomValue, useSetAtom, useStore } from "jotai";
 import {
   BotMessageSquareIcon,
   HatGlasses,
+  ArrowRightIcon,
   Loader2,
   type LucideIcon,
   MessageCircleIcon,
   NotebookText,
   PlusIcon,
+  SparklesIcon,
   SettingsIcon,
 } from "lucide-react";
 import { memo, useEffect, useRef, useState } from "react";
@@ -53,11 +55,13 @@ import { aiAtom, aiEnabledAtom } from "@/core/config/config";
 import { DEFAULT_AI_MODEL } from "@/core/config/config-schema";
 import { useRequestClient } from "@/core/network/requests";
 import { useRuntimeManager } from "@/core/runtime/config";
+import { isWasm } from "@/core/wasm/utils";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
 import { AIModelDropdown } from "../ai/ai-model-dropdown";
 import { useOpenSettingsToTab } from "../app-config/state";
+import { PairWithAgentModal } from "../editor/actions/pair-with-agent-modal";
 import { PromptInput } from "../editor/ai/add-cell-with-ai";
 import {
   addContextCompletion,
@@ -65,6 +69,7 @@ import {
 } from "../editor/ai/completion-utils";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
 import { CopyClipboardIcon } from "../icons/copy-icon";
+import { useImperativeModal } from "../modal/ImperativeModal";
 import { MCPStatusIndicator } from "../mcp/mcp-status-indicator";
 import { Tooltip, TooltipProvider } from "../ui/tooltip";
 import {
@@ -416,6 +421,26 @@ const ChatInput: React.FC<ChatInputProps> = memo(
 
 ChatInput.displayName = "ChatInput";
 
+const PairWithAgentCallout: React.FC<{
+  onPairWithAgent: () => void;
+}> = ({ onPairWithAgent }) => {
+  if (isWasm()) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="text"
+      className="gap-1.5 text-sm text-link hover:underline"
+      onClick={onPairWithAgent}
+    >
+      <SparklesIcon className="h-3.5 w-3.5 shrink-0" />
+      <span>Work on this notebook with your own agent</span>
+      <ArrowRightIcon className="h-3 w-3 shrink-0" />
+    </Button>
+  );
+};
+
 const ChatPanel = () => {
   const aiConfigured = useAtomValue(aiEnabledAtom);
   const { handleClick } = useOpenSettingsToTab();
@@ -455,6 +480,7 @@ const ChatPanelBody = () => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const runtimeManager = useRuntimeManager();
   const { invokeAiTool, sendRun } = useRequestClient();
+  const { openModal, closeModal } = useImperativeModal();
 
   const activeChatId = activeChat?.id;
   const store = useStore();
@@ -614,6 +640,10 @@ const ChatPanelBody = () => {
     clearFiles();
   });
 
+  const handlePairWithAgent = useEvent(() => {
+    openModal(<PairWithAgentModal onClose={closeModal} />);
+  });
+
   const handleMessageEdit = useEvent((index: number, newValue: string) => {
     const editedMessage = messages[index];
     const fileParts = editedMessage.parts?.filter((p) => p.type === "file");
@@ -724,9 +754,12 @@ const ChatPanelBody = () => {
         ref={scrollContainerRef}
       >
         {isNewThread && (
-          <div className="rounded-md border bg-background">
-            {filesPills}
-            {chatInput}
+          <div className="flex flex-col gap-2">
+            <div className="rounded-md border bg-background">
+              {filesPills}
+              {chatInput}
+            </div>
+            <PairWithAgentCallout onPairWithAgent={handlePairWithAgent} />
           </div>
         )}
 

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