@marimo-team/islands 0.23.9-dev8 → 0.23.9

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";
@@ -49,15 +51,17 @@ import {
   FRONTEND_TOOL_REGISTRY,
 } from "@/core/ai/tools/registry";
 import { useCellActions } from "@/core/cells/cells";
-import { aiAtom, aiEnabledAtom } from "@/core/config/config";
+import { aiAtom, aiModelConfiguredAtom } 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,8 +421,28 @@ 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 aiConfigured = useAtomValue(aiModelConfiguredAtom);
   const { handleClick } = useOpenSettingsToTab();
 
   if (!aiConfigured) {
@@ -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

@@ -13,7 +13,7 @@ import {
 } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { Button } from "../ui/button";
 import { toast } from "../ui/use-toast";
-import { getUserColumnVisibilityCounts } from "./hooks/use-column-visibility";
+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";
@@ -147,15 +147,12 @@ export const TableBottomBar = <TData,>({
       );
     }
 
-    const counts = getUserColumnVisibilityCounts(table);
-    // When columns are clipped, the table instance only has the rendered
-    // subset, so the visible/hidden math must use that subset's total. The
-    // dataset-wide `totalColumns` prop is only correct for the no-hidden
-    // "N columns" label.
+    const { totalColumns: effectiveTotalColumns, hiddenColumns } =
+      getColumnCountForDisplay(table, totalColumns);
     const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
       numRows: table.getRowCount(),
-      totalColumns: counts.hidden > 0 ? counts.total : totalColumns,
-      hiddenColumns: counts.hidden,
+      totalColumns: effectiveTotalColumns,
+      hiddenColumns,
       locale,
     });
 

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