@marimo-team/islands 0.25.3-dev250 → 0.25.3-dev251

package/src/__tests__/fixtures/pair-config.ts

@@ -6,7 +6,7 @@ import { pairConfigSchema } from "@/core/config/pair";
 
 // Read the Python-owned resource only in tests to check the shared contract.
 export const PAIR_CONFIG = pairConfigSchema.parse({
-  command: "uvx marimo@latest",
+  command: "marimo",
   hostEnabled: true,
   templates: JSON.parse(
     readFileSync(

package/src/components/app-config/__tests__/state.test.tsx

@@ -0,0 +1,50 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ConfigButton } from "../app-config-button";
+import { aiSettingsSubTabAtom, useOpenSettingsToTab } from "../state";
+import { activeUserConfigCategoryAtom } from "../user-config-form";
+
+vi.mock("../user-config-form", async () => {
+  const { atom } = await import("jotai");
+  return {
+    activeUserConfigCategoryAtom: atom("editor"),
+    UserConfigForm: () => <div>Settings form</div>,
+  };
+});
+vi.mock("../app-config-form", () => ({
+  AppConfigForm: () => null,
+}));
+
+function OpenAiSettings() {
+  const { handleClick } = useOpenSettingsToTab();
+  return (
+    <button type="button" onClick={() => handleClick("ai")}>
+      AI Settings
+    </button>
+  );
+}
+
+describe("useOpenSettingsToTab", () => {
+  it("opens the settings dialog on the AI category from an external button", () => {
+    const store = createStore();
+    store.set(aiSettingsSubTabAtom, "ai-providers");
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <OpenAiSettings />
+          <ConfigButton />
+        </TooltipProvider>
+      </Provider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "AI Settings" }));
+
+    expect(screen.getByRole("dialog", { name: "User settings" })).toBeVisible();
+    expect(store.get(activeUserConfigCategoryAtom)).toBe("ai");
+    expect(store.get(aiSettingsSubTabAtom)).toBe("ai-features");
+  });
+});

package/src/components/app-config/ai-config.tsx

@@ -1351,7 +1351,7 @@ export const AiAssistConfig: React.FC<AiConfigProps> = ({
         description={
           <span>
             Model to use for code editing with the{" "}
-            <Kbd className="inline">Generate with AI</Kbd> button.
+            <Kbd className="inline">Edit with AI</Kbd> action.
           </span>
         }
         forRole="edit"

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,125 @@
+/* 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 { 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 done = (name = "edit_notebook_tool"): ToolUIPart => ({
+  type: `tool-${name}`,
+  toolCallId: crypto.randomUUID(),
+  state: "output-available",
+  input: {},
+  output: {},
+});
+
+function show(parts: UIMessage["parts"], isActive = false) {
+  return render(
+    renderUIMessage({
+      message: { id: "message", role: "assistant", parts },
+      isStreamingReasoning: false,
+      isLast: true,
+      isActive,
+    }),
+  );
+}
+
+describe("chat tool activity", () => {
+  it("collapses consecutive edits across SDK step boundaries and exposes details on demand", () => {
+    show([done(), { type: "step-start" }, done(), done(), done()]);
+    const summary = screen.getByRole("button", {
+      name: "Edited notebook · 4 operations",
+    });
+    expect(summary.getAttribute("aria-expanded")).toBe("false");
+    expect(screen.queryByText("tool-edit_notebook_tool")).toBeNull();
+    fireEvent.click(summary);
+    expect(screen.getAllByText("tool-edit_notebook_tool")).toHaveLength(4);
+  });
+
+  it("starts a new group after prose and summarizes mixed tool calls", () => {
+    show([
+      done(),
+      { type: "text", text: "Checking the result." },
+      done("lint_notebook"),
+      {
+        type: "dynamic-tool",
+        toolName: "get_lightweight_cell_map",
+        toolCallId: "dynamic",
+        state: "output-available",
+        input: {},
+        output: {},
+      },
+    ]);
+    expect(screen.getByText("Checking the result.")).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "Edited notebook · 1 operation" }),
+    ).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "Completed 2 steps" }),
+    ).toBeTruthy();
+  });
+
+  it("keeps errors, denials, and approval requests outside collapsed groups", () => {
+    show([
+      done(),
+      {
+        type: "tool-failed",
+        toolCallId: "error",
+        state: "output-error",
+        input: {},
+        errorText: "Failed",
+      },
+      {
+        type: "tool-approval",
+        toolCallId: "approval",
+        state: "approval-requested",
+        input: {},
+        approval: { id: "approval" },
+      },
+      {
+        type: "tool-denied",
+        toolCallId: "denied",
+        state: "output-denied",
+        input: {},
+        approval: { id: "denied", approved: false },
+      },
+      done(),
+    ]);
+    expect(screen.getByText("tool-failed")).toBeTruthy();
+    expect(screen.getByText("tool-approval")).toBeTruthy();
+    expect(screen.getByText("tool-denied")).toBeTruthy();
+    expect(
+      screen.getAllByRole("button", { name: "Edited notebook · 1 operation" }),
+    ).toHaveLength(2);
+  });
+
+  it("distinguishes running edits from interrupted activity", () => {
+    const parts: UIMessage["parts"] = [
+      done(),
+      {
+        type: "tool-edit_notebook_tool",
+        toolCallId: "pending",
+        state: "input-available",
+        input: {},
+      },
+    ];
+    const view = show(parts, true);
+    expect(
+      screen.getByRole("button", { name: "Editing notebook…" }),
+    ).toBeTruthy();
+    view.unmount();
+    show(parts);
+    expect(
+      screen.getByRole("button", {
+        name: "Stopped before completing all steps",
+      }),
+    ).toBeTruthy();
+  });
+});

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,8 +1,11 @@
 /* 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,
@@ -510,3 +513,50 @@ 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();
+      }
+    },
+  );
+});

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

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

@@ -12,7 +12,7 @@ import type { ComponentProps } from "react";
 import { JsonRpcError } from "use-acp";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
-import type { PromptInput } from "@/components/editor/ai/add-cell-with-ai";
+import type { PromptInput } from "@/components/editor/ai/prompt-input";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { pendingAiPromptAtom } from "@/core/ai/state";
@@ -54,7 +54,7 @@ vi.mock("use-acp", async (importOriginal) => ({
   useAcpClient: () => client,
 }));
 
-vi.mock("@/components/editor/ai/add-cell-with-ai", () => ({
+vi.mock("@/components/editor/ai/prompt-input", () => ({
   PromptInput: ({
     value,
     onChange,
@@ -254,19 +254,24 @@ describe("AgentPanel prompt submission", () => {
     });
   });
 
-  it("clears busy state when a cancelled prompt settles", async () => {
-    const response = Promise.withResolvers<{ stopReason: string }>();
-    agent.prompt.mockReturnValueOnce(response.promise);
-    await renderPanel();
-    submitPrompt();
-    await waitFor(() => expect(agent.prompt).toHaveBeenCalledOnce());
-    expect(screen.getByText("Agent is working...")).toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button", { name: "Stop" }));
-    await act(async () => response.resolve({ stopReason: "cancelled" }));
-    expect(agent.cancel).toHaveBeenCalledWith({ sessionId: "session-1" });
-    expect(screen.queryByText("Agent is working...")).not.toBeInTheDocument();
-    expect(
-      screen.queryByRole("button", { name: "Dismiss" }),
-    ).not.toBeInTheDocument();
-  });
+  it.each([0, 1])(
+    "clears busy state after cancellation through Stop button %i",
+    async (buttonIndex) => {
+      const response = Promise.withResolvers<{ stopReason: string }>();
+      agent.prompt.mockReturnValueOnce(response.promise);
+      await renderPanel();
+      submitPrompt();
+      await waitFor(() => expect(agent.prompt).toHaveBeenCalledOnce());
+      expect(screen.getByText("Agent is working...")).toBeInTheDocument();
+      const stopButtons = screen.getAllByRole("button", { name: "Stop" });
+      expect(stopButtons).toHaveLength(2);
+      fireEvent.click(stopButtons[buttonIndex]);
+      await act(async () => response.resolve({ stopReason: "cancelled" }));
+      expect(agent.cancel).toHaveBeenCalledWith({ sessionId: "session-1" });
+      expect(screen.queryByText("Agent is working...")).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Dismiss" }),
+      ).not.toBeInTheDocument();
+    },
+  );
 });

package/src/components/chat/acp/agent-panel.tsx

@@ -16,7 +16,7 @@ import {
 import {
   type AdditionalCompletions,
   PromptInput,
-} from "@/components/editor/ai/add-cell-with-ai";
+} from "@/components/editor/ai/prompt-input";
 import { PanelEmptyState } from "@/components/editor/chrome/panels/empty-state";
 import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
@@ -39,6 +39,7 @@ import {
 } from "./state";
 import { AgentThread } from "./thread";
 import "./agent-panel.css";
+import "../chat-typography.css";
 import type { Completion } from "@codemirror/autocomplete";
 import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import type {
@@ -441,7 +442,7 @@ const ModeSelector = memo<ModeSelectorProps>(
 
     return (
       <Select value={currentModeId} onValueChange={onModeChange}>
-        <SelectTrigger className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1 capitalize">
+        <SelectTrigger className="chat-control chat-selector h-6 text-xs border-border py-0 px-2 gap-1 capitalize">
           {currentMode?.label ?? currentModeId}
         </SelectTrigger>
         <SelectContent>
@@ -1266,7 +1267,7 @@ const AgentPanel: React.FC = () => {
   };
 
   return (
-    <div className="flex flex-col flex-1 overflow-hidden mo-agent-panel">
+    <div className="mo-ai-panel flex flex-col flex-1 overflow-hidden mo-agent-panel font-prose text-sm leading-6">
       <AgentPanelHeader
         connectionState={connectionState}
         currentAgentId={selectedTab?.agentId}

package/src/components/chat/acp/blocks.tsx

@@ -167,11 +167,11 @@ export const ReadyToChatBlock = () => {
   return (
     <div className="flex-1 flex items-center justify-center h-full min-h-[200px] flex-col">
       <div className="text-center space-y-3">
-        <div className="w-12 h-12 mx-auto rounded-full bg-(--blue-3) flex items-center justify-center">
-          <BotMessageSquareIcon className="h-6 w-6 text-(--blue-10)" />
+        <div className="w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center">
+          <BotMessageSquareIcon className="h-6 w-6 text-muted-foreground" />
         </div>
         <div>
-          <h3 className="text-lg font-medium text-foreground mb-1">
+          <h3 className="text-base font-semibold text-foreground mb-1">
             Agent is connected
           </h3>
           <p className="text-sm text-muted-foreground">
@@ -203,10 +203,10 @@ export const ConnectionChangeBlock = (props: {
           icon: <WifiIcon className="h-4 w-4" />,
           title: "Connected to Agent",
           message: "Successfully established connection with the AI agent",
-          bgColor: "bg-(--blue-2)",
-          borderColor: "border-(--blue-6)",
-          textColor: "text-(--blue-11)",
-          iconColor: "text-(--blue-10)",
+          bgColor: "bg-transparent",
+          borderColor: "border-border",
+          textColor: "text-muted-foreground",
+          iconColor: "text-muted-foreground",
         };
       case "disconnected":
         return {
@@ -318,7 +318,7 @@ export const PlansBlock = (props: { data: PlanNotificationEvent[] }) => {
   plans = uniqueByTakeLast(plans, (item) => item.content);
 
   return (
-    <div className="rounded-lg border bg-background p-2 text-xs">
+    <div className="rounded-lg border bg-background p-2 text-sm">
       <div className="flex items-center justify-between mb-2">
         <span className="font-medium text-muted-foreground">
           To-dos{" "}
@@ -345,7 +345,7 @@ export const PlansBlock = (props: { data: PlanNotificationEvent[] }) => {
             />
             <span
               className={cn(
-                "text-xs",
+                "text-sm",
                 item.status === "completed" &&
                   "line-through text-muted-foreground",
               )}
@@ -361,7 +361,7 @@ export const PlansBlock = (props: { data: PlanNotificationEvent[] }) => {
 
 export const UserMessagesBlock = (props: { data: UserNotificationEvent[] }) => {
   return (
-    <div className="flex flex-col gap-2 text-muted-foreground border p-2 bg-background rounded wrap-break-word overflow-x-hidden">
+    <div className="flex flex-col gap-2 text-foreground border p-2 bg-background rounded wrap-break-word overflow-x-hidden">
       <ContentBlocks data={props.data.map((item) => item.content)} />
     </div>
   );

package/src/components/chat/acp/common.tsx

@@ -45,7 +45,7 @@ export const SimpleAccordion: React.FC<SimpleAccordionProps> = ({
       case "error":
         return <XCircleIcon className="h-3 w-3 text-destructive" />;
       case "success":
-        return <CheckCircleIcon className="h-3 w-3 text-(--blue-9)" />;
+        return null;
       default:
         return defaultIcon;
     }
@@ -61,9 +61,8 @@ export const SimpleAccordion: React.FC<SimpleAccordionProps> = ({
       <AccordionItem value="tool-call" className="border-0">
         <AccordionTrigger
           className={cn(
-            "py-1 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180",
+            "h-auto pl-0 pr-2 py-1 gap-2 rounded text-xs font-normal text-muted-foreground hover:bg-(--slate-2) hover:text-foreground hover:no-underline",
             status === "error" && "text-destructive/80",
-            status === "success" && "text-(--blue-8)",
           )}
         >
           <span className="flex items-center gap-1">
@@ -104,8 +103,8 @@ export const ConnectionStatus: React.FC<ConnectionStatusProps> = memo(
           return {
             icon: <WifiIcon className="h-3 w-3" />,
             label: "Connected",
-            variant: "default" as const,
-            className: "bg-(--blue-3) text-(--blue-11) border-(--blue-5)",
+            variant: "outline" as const,
+            className: "bg-transparent text-muted-foreground border-border",
           };
         case "connecting":
           return {

package/src/components/chat/acp/model-selector.tsx

@@ -35,7 +35,7 @@ export const ModelSelector = memo<ModelSelectorProps>(
         onValueChange={onModelChange}
         disabled={disabled}
       >
-        <SelectTrigger className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1">
+        <SelectTrigger className="chat-control chat-selector h-6 text-xs border-border py-0 px-2 gap-1">
           {displayName}
         </SelectTrigger>
         <SelectContent>

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

@@ -11,7 +11,6 @@ import {
 } from "@/components/ui/popover";
 import { Switch } from "@/components/ui/switch";
 import { chatOptionsAtom } from "@/core/ai/state";
-import { cn } from "@/utils/cn";
 
 export const CapabilitiesPopover: React.FC = () => {
   const [chatOptions, setChatOptions] = useAtom(chatOptionsAtom);
@@ -28,11 +27,7 @@ export const CapabilitiesPopover: React.FC = () => {
           data-active={webSearchOn || undefined}
           variant="text"
           size="icon"
-          className={cn(
-            "h-6 w-6 shrink-0 bg-muted hover:bg-muted/30",
-            webSearchOn &&
-              "bg-primary/15 text-primary ring-1 ring-primary/30 opacity-100 hover:bg-primary/20",
-          )}
+          className="chat-control h-6 w-6 shrink-0"
         >
           <SlidersHorizontalIcon className="h-3.5 w-3.5" />
         </Button>

package/src/components/chat/chat-components.tsx

@@ -8,7 +8,7 @@ import {
   ImageIcon,
   PaperclipIcon,
   SendHorizontalIcon,
-  StopCircleIcon,
+  SquareIcon,
   XIcon,
 } from "lucide-react";
 import { useState } from "react";
@@ -88,19 +88,20 @@ export const SendButton = ({
 }) => {
   const loadingContent = showStopLabel ? (
     <div className="flex flex-row items-center gap-1 px-1.5">
-      <span className="text-xs text-error">Stop</span>
+      <span className="text-xs">Stop</span>
       <Spinner size="small" />
     </div>
   ) : (
-    <StopCircleIcon className="size-4 text-error" />
+    <SquareIcon className="size-3.5" aria-hidden={true} />
   );
 
   return (
     <Tooltip content={isLoading ? "Stop" : "Submit"}>
       <Button
+        aria-label={isLoading ? "Stop" : "Submit"}
         variant="text"
         size="sm"
-        className="h-6 min-w-6 p-0 hover:bg-muted/30 cursor-pointer"
+        className="chat-control h-6 min-w-6 p-0 hover:bg-muted/30 cursor-pointer"
         onClick={isLoading ? onStop : onSendClick}
         disabled={isLoading ? false : isEmpty}
       >
@@ -124,6 +125,7 @@ export const AddContextButton = ({
   return (
     <Tooltip content="Add context">
       <Button
+        className="chat-control"
         aria-label="Add context"
         variant="text"
         size="icon"
@@ -149,6 +151,7 @@ export const AttachFileButton = ({
     <>
       <Tooltip content="Attach a file">
         <Button
+          className="chat-control"
           aria-label="Attach a file"
           variant="text"
           size="icon"