@marimo-team/islands 0.25.3-dev28 → 0.25.3-dev281

package/src/components/chat/__tests__/capabilities-popover.test.tsx

@@ -27,7 +27,6 @@ describe("CapabilitiesPopover", () => {
 
     expect(webSearch).toBeChecked();
     expect(trigger).toHaveAttribute("data-active", "true");
-    expect(trigger).toHaveClass("bg-primary/15", "text-primary", "ring-1");
     expect(trigger).toHaveAttribute(
       "title",
       "Capabilities (web search enabled)",

package/src/components/chat/__tests__/chat-display.test.tsx

@@ -0,0 +1,196 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import type { ToolUIPart, UIMessage } from "ai";
+import { describe, expect, it, vi } from "vitest";
+import { getAnswerText, renderUIMessage } from "../chat-display";
+
+vi.mock("../tool-call/tool-call-view", () => ({
+  ToolCallView: ({ toolName }: { toolName: string }) => <div>{toolName}</div>,
+}));
+vi.mock("../../markdown/markdown-renderer", () => ({
+  MarkdownRenderer: ({ content }: { content: string }) => <p>{content}</p>,
+}));
+
+const tool = (
+  name = "edit_notebook_tool",
+  state: ToolUIPart["state"] = "output-available",
+): ToolUIPart =>
+  ({
+    type: `tool-${name}`,
+    toolCallId: crypto.randomUUID(),
+    state,
+    input: {},
+    output: {},
+    approval: state === "approval-requested" ? { id: "approval" } : undefined,
+  }) as ToolUIPart;
+
+const reasoning = (text: string): UIMessage["parts"][number] => ({
+  type: "reasoning",
+  text,
+  state: "done",
+});
+
+function show(
+  parts: UIMessage["parts"],
+  {
+    isActive = false,
+    metadata,
+  }: { isActive?: boolean; metadata?: Record<string, number | boolean> } = {},
+) {
+  return render(
+    <div>
+      {renderUIMessage({
+        message: { id: "message", role: "assistant", parts, metadata },
+        isLast: true,
+        isActive,
+      })}
+    </div>,
+  );
+}
+
+describe("assistant turn rendering", () => {
+  it("folds interleaved reasoning, narration, and tools into one block above the answer", () => {
+    show([
+      reasoning("Plan the cells"),
+      tool("get_lightweight_cell_map"),
+      { type: "step-start" },
+      { type: "text", text: "Adding the function now." },
+      reasoning("Write fib"),
+      tool(),
+      { type: "text", text: "Added `fib`." },
+    ]);
+
+    const summary = screen.getByRole("button", {
+      name: "Worked through 2 steps",
+    });
+    expect(summary.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.getByText("Added `fib`.")).toBeTruthy();
+    expect(screen.queryByText("Plan the cells")).toBeNull();
+
+    fireEvent.click(summary);
+    expect(screen.getByText("Plan the cells")).toBeTruthy();
+    expect(screen.getByText("Adding the function now.")).toBeTruthy();
+    expect(screen.getByText("tool-get_lightweight_cell_map")).toBeTruthy();
+    expect(screen.getByText("tool-edit_notebook_tool")).toBeTruthy();
+  });
+
+  it("reports how long the turn took", () => {
+    const view = show([tool(), { type: "text", text: "Done." }], {
+      metadata: { startedAt: 0, finishedAt: 65_000 },
+    });
+    expect(
+      screen.getByRole("button", { name: "Worked for 1m 5s" }),
+    ).toBeTruthy();
+    view.unmount();
+
+    show([reasoning("Hmm"), { type: "text", text: "Hi." }], {
+      metadata: { startedAt: 0, finishedAt: 8_000 },
+    });
+    expect(screen.getByRole("button", { name: "Thought for 8s" })).toBeTruthy();
+  });
+
+  it("stays open while running and collapses once the answer is in", () => {
+    const parts: UIMessage["parts"] = [
+      reasoning("Plan"),
+      tool("edit_notebook_tool", "input-available"),
+    ];
+    const view = show(parts, { isActive: true });
+    expect(screen.getByRole("status").textContent).toBe("Working…");
+    expect(screen.getByText("tool-edit_notebook_tool")).toBeTruthy();
+
+    view.rerender(
+      <div>
+        {renderUIMessage({
+          message: {
+            id: "message",
+            role: "assistant",
+            parts: [
+              ...parts.slice(0, 1),
+              tool(),
+              { type: "text", text: "Done." },
+            ],
+          },
+          isLast: true,
+          isActive: false,
+        })}
+      </div>,
+    );
+    const summary = screen.getByRole("button", {
+      name: "Worked through 1 step",
+    });
+    expect(summary.getAttribute("aria-expanded")).toBe("false");
+  });
+
+  it("leaves a stopped turn open since there is no answer to read", () => {
+    show([reasoning("Plan"), tool("edit_notebook_tool", "input-available")]);
+    const summary = screen.getByRole("button", { name: "Stopped" });
+    expect(summary.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("labels a stopped turn even without pending tools", () => {
+    show([reasoning("Plan"), { type: "text", text: "Partial" }], {
+      metadata: { startedAt: 0, finishedAt: 3_000, stopped: true },
+    });
+    expect(
+      screen.getByRole("button", { name: "Stopped after 3s" }),
+    ).toBeTruthy();
+  });
+
+  it("flags failed steps in the summary", () => {
+    show([
+      tool("lint_notebook", "output-error"),
+      { type: "text", text: "Hm." },
+    ]);
+    expect(screen.getByRole("button", { name: /1 failed/ })).toBeTruthy();
+  });
+
+  it("shows a thinking indicator before any content arrives", () => {
+    show([reasoning("")], { isActive: true });
+    expect(screen.getByRole("status").textContent).toBe("Thinking…");
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("keeps pending approvals, and the text explaining them, outside the block", () => {
+    show([
+      reasoning("Needs approval"),
+      { type: "text", text: "I'll run a query." },
+      tool("run_query", "approval-requested"),
+    ]);
+    expect(screen.getByText("I'll run a query.")).toBeTruthy();
+    expect(screen.getByText("tool-run_query")).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "Thought process" }),
+    ).toBeTruthy();
+  });
+
+  it("renders plain answers without an activity block", () => {
+    show([{ type: "text", text: "Hello!" }]);
+    expect(screen.getByText("Hello!")).toBeTruthy();
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+});
+
+describe("getAnswerText", () => {
+  it("copies the visible answer, not the narration folded into the block", () => {
+    const message: UIMessage = {
+      id: "m",
+      role: "assistant",
+      parts: [
+        { type: "text", text: "Adding the function now." },
+        tool(),
+        { type: "text", text: "Added `fib`." },
+      ],
+    };
+    expect(getAnswerText(message)).toBe("Added `fib`.");
+  });
+
+  it("falls back to the narration when there is no answer", () => {
+    const message: UIMessage = {
+      id: "m",
+      role: "assistant",
+      parts: [{ type: "text", text: "Starting." }, tool()],
+    };
+    expect(getAnswerText(message)).toBe("Starting.");
+  });
+});

package/src/components/chat/__tests__/chat-markdown.test.tsx

@@ -0,0 +1,43 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { ChatMarkdown } from "../chat-markdown";
+
+const { aiAtom } = await vi.hoisted(async () => {
+  const { atom } = await import("jotai");
+  return {
+    aiAtom: atom<{ mode?: "ask" | "manual" | "agent" | "code_mode" }>({}),
+  };
+});
+vi.mock("@/core/config/config", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  aiAtom,
+}));
+vi.mock("@/plugins/impl/code/LazyAnyLanguageCodeMirror", () => ({
+  LazyAnyLanguageCodeMirror: ({ value }: { value: string }) => (
+    <pre>{value}</pre>
+  ),
+}));
+
+it("updates snippet actions when switching between read-only and editing modes", async () => {
+  const store = createStore();
+  render(
+    <Provider store={store}>
+      <ChatMarkdown content={"```python\nx = 1\n```"} />
+    </Provider>,
+  );
+  expect(
+    await screen.findByRole("button", { name: "Add to Notebook" }),
+  ).toBeInTheDocument();
+  for (const mode of ["agent", "code_mode", "ask", "manual"] as const) {
+    act(() => store.set(aiAtom, { mode }));
+    expect(screen.getByRole("button", { name: /^Copy$/ })).toBeInTheDocument();
+    expect(screen.getByText("x = 1")).toBeInTheDocument();
+    const insertButton = screen.queryByRole("button", {
+      name: "Add to Notebook",
+    });
+    expect(insertButton !== null).toBe(mode === "ask" || mode === "manual");
+  }
+});

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

@@ -1,11 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { UIMessage } from "ai";
-import { describe, expect, it } from "vitest";
+import { createStore } from "jotai";
+import { FRONTEND_TOOL_REGISTRY } from "@/core/ai/tools/registry";
+import { describe, expect, it, vi } from "vitest";
 import {
+  handleToolCall,
   hasPendingToolCalls,
   hasUnresolvedToolCalls,
   shouldFlushQueue,
+  willAutoContinue,
 } from "../chat-utils";
 
 /**
@@ -510,3 +514,91 @@ describe("shouldFlushQueue", () => {
     ).toBe(false);
   });
 });
+
+describe("handleToolCall", () => {
+  it.each(["frontend", "backend", "exception"])(
+    "reports %s failures as errors rather than successful output",
+    async (source) => {
+      const hasTool = vi
+        .spyOn(FRONTEND_TOOL_REGISTRY, "has")
+        .mockReturnValue(source === "frontend");
+      const response = {
+        tool_name: "test_tool",
+        result: null,
+        error: "Edit failed",
+      };
+      const invokeFrontend = vi
+        .spyOn(FRONTEND_TOOL_REGISTRY, "invoke")
+        .mockResolvedValue(response);
+      const invokeAiTool = vi.fn().mockImplementation(async () => {
+        if (source === "exception") {
+          throw new Error("Edit failed");
+        }
+        return response;
+      });
+      const addToolOutput = vi.fn();
+      try {
+        await handleToolCall({
+          invokeAiTool,
+          addToolOutput,
+          toolCall: { toolName: "test_tool", toolCallId: "call-1", input: {} },
+          toolContext: {
+            store: createStore(),
+            addStagedCell: vi.fn(),
+            createCell: vi.fn(),
+          },
+        });
+        expect(addToolOutput).toHaveBeenCalledExactlyOnceWith({
+          tool: "test_tool",
+          toolCallId: "call-1",
+          state: "output-error",
+          errorText: "Edit failed",
+        });
+      } finally {
+        hasTool.mockRestore();
+        invokeFrontend.mockRestore();
+      }
+    },
+  );
+});
+
+describe("willAutoContinue", () => {
+  const toolPart = (state: string) =>
+    ({
+      type: "tool-run_query",
+      toolCallId: "call-1",
+      state,
+      input: {},
+      output: {},
+      approval: { id: "approval-1" },
+    }) as unknown as UIMessage["parts"][number];
+
+  it.each([
+    ["input-available", true],
+    ["output-available", true],
+    ["approval-requested", false],
+    ["input-streaming", false],
+  ])("returns %s → %s", (state, expected) => {
+    expect(
+      willAutoContinue([
+        userMessage("run it"),
+        assistantToolMessage([toolPart(state)]),
+      ]),
+    ).toBe(expected);
+  });
+
+  it.each(["output-available", "input-available"])(
+    "returns false once text follows a tool that is %s",
+    (state) => {
+      expect(
+        willAutoContinue([
+          userMessage("run it"),
+          assistantToolMessage([
+            toolPart(state),
+            { type: "text", text: "Done." },
+          ]),
+        ]),
+      ).toBe(false);
+    },
+  );
+});

package/src/components/chat/__tests__/message-queue.test.tsx

@@ -77,6 +77,23 @@ describe("useMessageQueue", () => {
     expect(result.current.messages).toEqual([]);
   });
 
+  it("preserves multiple enqueues and flushes before React renders", () => {
+    const { result } = renderHook(() => useMessageQueue());
+    const send = vi.fn();
+
+    act(() => {
+      result.current.enqueue([textPart("first")]);
+      result.current.enqueue([textPart("second")]);
+      result.current.flushNext(send);
+      result.current.flushNext(send);
+    });
+
+    expect(send).toHaveBeenNthCalledWith(1, [textPart("first")]);
+    expect(send).toHaveBeenNthCalledWith(2, [textPart("second")]);
+    expect(result.current.messages).toEqual([]);
+    expect(result.current.hasQueuedRef.current).toBe(false);
+  });
+
   it("flushNext on an empty queue is a no-op", () => {
     const { result } = renderHook(() => useMessageQueue());
     const send = vi.fn();

package/src/components/chat/__tests__/notebook-access-selector.test.tsx

@@ -0,0 +1,64 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { CopilotMode } from "@/core/config/config-schema";
+import { NotebookAccessSelector } from "../notebook-access-selector";
+
+Element.prototype.scrollIntoView = vi.fn();
+
+describe("NotebookAccessSelector", () => {
+  it("shows legacy Manual as Read only and offers exactly three levels", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NotebookAccessSelector value="manual" onValueChange={onValueChange} />,
+    );
+
+    fireEvent.keyDown(
+      screen.getByRole("combobox", { name: "Notebook access: Read only" }),
+      { key: "ArrowDown" },
+    );
+    const options = await screen.findAllByRole("option");
+    expect(options.map((option) => option.getAttribute("data-state"))).toEqual([
+      "checked",
+      "unchecked",
+      "unchecked",
+    ]);
+    expect(options.map((option) => option.textContent)).toEqual([
+      "Read onlyRead notebook code, outputs, and variable previews.",
+      "Suggest editsRead the notebook and propose cell changes for review.",
+      "Full accessRead, edit, and run cells, with Python scratchpad access.",
+    ]);
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it.each<{ mode: CopilotMode; label: string }>([
+    { mode: "ask", label: "Read only" },
+    { mode: "agent", label: "Suggest edits" },
+    { mode: "code_mode", label: "Full access" },
+  ])("maps $label to the existing $mode setting", async ({ mode, label }) => {
+    const onValueChange = vi.fn();
+    const { rerender } = render(
+      <NotebookAccessSelector value={mode} onValueChange={onValueChange} />,
+    );
+
+    expect(
+      screen.getByRole("combobox", { name: `Notebook access: ${label}` }),
+    ).toHaveTextContent(label);
+    expect(onValueChange).not.toHaveBeenCalled();
+
+    rerender(
+      <NotebookAccessSelector
+        value={mode === "ask" ? "agent" : "ask"}
+        onValueChange={onValueChange}
+      />,
+    );
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: "ArrowDown" });
+    const option = await screen.findByRole("option", {
+      name: new RegExp(`^${label} `),
+    });
+    fireEvent.keyDown(option, { key: "Enter" });
+
+    expect(onValueChange).toHaveBeenCalledExactlyOnceWith(mode);
+  });
+});

package/src/components/chat/__tests__/turn-timing.test.ts

@@ -0,0 +1,84 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { UIMessage } from "ai";
+import { describe, expect, it } from "vitest";
+import { formatDuration, getTurnTiming, withTurnTiming } from "../turn-timing";
+
+const user: UIMessage = { id: "u", role: "user", parts: [] };
+const assistant = (metadata?: unknown): UIMessage => ({
+  id: "a",
+  role: "assistant",
+  parts: [],
+  metadata,
+});
+
+describe("withTurnTiming", () => {
+  it("stamps the turn start and finish on the trailing assistant message", () => {
+    const [, stamped] = withTurnTiming(
+      [user, assistant()],
+      { startedAt: 100, stopped: false },
+      500,
+    );
+    expect(getTurnTiming(stamped)).toEqual({
+      startedAt: 100,
+      finishedAt: 500,
+      stopped: false,
+    });
+  });
+
+  it("prefers the live turn's start, which moves forward after approvals", () => {
+    const first = withTurnTiming(
+      [user, assistant({ other: 1 })],
+      { startedAt: 100, stopped: false },
+      500,
+    );
+    const [, stamped] = withTurnTiming(
+      first,
+      { startedAt: 400, stopped: true },
+      900,
+    );
+    expect(stamped.metadata).toEqual({
+      other: 1,
+      startedAt: 400,
+      finishedAt: 900,
+      stopped: true,
+    });
+  });
+
+  it("keeps the stored start when no turn is live", () => {
+    const first = withTurnTiming(
+      [user, assistant()],
+      { startedAt: 100, stopped: false },
+      500,
+    );
+    const [, stamped] = withTurnTiming(
+      first,
+      { startedAt: null, stopped: false },
+      900,
+    );
+    expect(getTurnTiming(stamped)?.startedAt).toBe(100);
+  });
+
+  it("leaves messages untouched without an assistant reply or start time", () => {
+    const pending = [user];
+    const turn = { startedAt: 100, stopped: false };
+    expect(withTurnTiming(pending, turn, 500)).toBe(pending);
+    const unknownStart = [user, assistant()];
+    expect(
+      withTurnTiming(unknownStart, { ...turn, startedAt: null }, 500),
+    ).toBe(unknownStart);
+  });
+});
+
+describe("formatDuration", () => {
+  it.each([
+    [200, "1s"],
+    [8_400, "8s"],
+    [60_000, "1m"],
+    [65_000, "1m 5s"],
+    [3_600_000, "1h"],
+    [3_780_000, "1h 3m"],
+  ])("%d ms → %s", (ms, expected) => {
+    expect(formatDuration(ms)).toBe(expected);
+  });
+});

package/src/components/chat/__tests__/use-assistant-turn.test.ts

@@ -0,0 +1,95 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import type { UIMessage } from "ai";
+import { describe, expect, it } from "vitest";
+import { useAssistantTurn } from "../use-assistant-turn";
+
+const awaitingTool: UIMessage[] = [
+  { id: "u", role: "user", parts: [{ type: "text", text: "go" }] },
+  {
+    id: "a",
+    role: "assistant",
+    parts: [
+      {
+        type: "tool-lint_notebook",
+        toolCallId: "call",
+        state: "input-available",
+        input: {},
+      },
+    ],
+  },
+];
+
+function setup() {
+  return renderHook(() => useAssistantTurn());
+}
+
+const idle = { isLoading: false, hasError: false, messages: awaitingTool };
+
+describe("useAssistantTurn", () => {
+  it("stays active between requests while a tool is still running", () => {
+    const { result } = setup();
+    expect(result.current.isActive(idle)).toBe(false);
+    act(() => result.current.start());
+    expect(result.current.isActive(idle)).toBe(true);
+    expect(result.current.startedAt).toEqual(expect.any(Number));
+  });
+
+  it("ends on stop, error, or chat switch", () => {
+    const { result } = setup();
+    act(() => result.current.start());
+    act(() => {
+      result.current.finish(awaitingTool, { isAbort: true, isError: false });
+    });
+    expect(result.current.isActive(idle)).toBe(false);
+
+    act(() => result.current.start());
+    act(() => {
+      result.current.finish(awaitingTool, { isAbort: false, isError: true });
+    });
+    expect(result.current.isActive(idle)).toBe(false);
+
+    act(() => result.current.start());
+    expect(result.current.isActive({ ...idle, hasError: true })).toBe(false);
+
+    act(() => result.current.reset());
+    expect(result.current.isActive(idle)).toBe(false);
+    expect(result.current.startedAt).toBeNull();
+  });
+
+  it("stamps the turn's start on the reply", () => {
+    const { result } = setup();
+    act(() => result.current.start());
+    const [, reply] = result.current.finish(awaitingTool, {
+      isAbort: false,
+      isError: false,
+    });
+    expect(reply.metadata).toMatchObject({
+      startedAt: result.current.startedAt,
+    });
+  });
+
+  it("excludes time spent waiting on an approval", () => {
+    const reply: UIMessage = {
+      id: "a",
+      role: "assistant",
+      parts: [],
+      metadata: { startedAt: 1_000, finishedAt: 4_000 },
+    };
+    const { result } = setup();
+    act(() => result.current.resume(reply));
+    expect(Date.now() - (result.current.startedAt ?? 0)).toBeGreaterThanOrEqual(
+      3_000,
+    );
+    expect(Date.now() - (result.current.startedAt ?? 0)).toBeLessThan(4_000);
+  });
+
+  it("stops auto-continuing once the user stops the turn", () => {
+    const { result } = setup();
+    act(() => result.current.start());
+    act(() => result.current.stop());
+    expect(result.current.hasEnded).toBe(true);
+    expect(result.current.isActive(idle)).toBe(false);
+  });
+});

package/src/components/chat/__tests__/user-message.test.tsx

@@ -0,0 +1,27 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { UserMessage } from "../user-message";
+
+describe("UserMessage", () => {
+  it("shows context mentions as chips instead of raw URIs", () => {
+    render(
+      <TooltipProvider>
+        <UserMessage
+          message={{
+            id: "u",
+            role: "user",
+            parts: [{ type: "text", text: "Plot @variable://df please" }],
+          }}
+          canEdit={true}
+          onEdit={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+    const chip = screen.getByTitle("variable://df");
+    expect(chip.textContent).toBe("@df");
+    expect(screen.queryByText(/@variable:\/\//)).toBeNull();
+  });
+});

package/src/components/chat/acp/__tests__/agent-panel-initialization.test.tsx

@@ -52,7 +52,7 @@ vi.mock("use-acp", async (importOriginal) => ({
     clearNotifications: vi.fn(),
   }),
 }));
-vi.mock("@/components/editor/ai/add-cell-with-ai", () => ({
+vi.mock("@/components/editor/ai/prompt-input", () => ({
   PromptInput: () => null,
 }));
 vi.mock("../session-tabs", () => ({ SessionTabs: () => null }));