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

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

@@ -146,7 +146,9 @@ export async function handleToolCall({
       addToolOutput({
         tool: toolCall.toolName,
         toolCallId: toolCall.toolCallId,
-        output: response.result || response.error,
+        ...(response.error
+          ? { state: "output-error", errorText: response.error }
+          : { output: response.result }),
       });
     } else {
       // Invoke the backend/mcp tool
@@ -157,7 +159,9 @@ export async function handleToolCall({
       addToolOutput({
         tool: toolCall.toolName,
         toolCallId: toolCall.toolCallId,
-        output: response.result || response.error,
+        ...(response.error
+          ? { state: "output-error", errorText: response.error }
+          : { output: response.result }),
       });
     }
   } catch (error) {
@@ -165,7 +169,8 @@ export async function handleToolCall({
     addToolOutput({
       tool: toolCall.toolName,
       toolCallId: toolCall.toolCallId,
-      output: `Error: ${error instanceof Error ? error.message : String(error)}`,
+      state: "output-error",
+      errorText: error instanceof Error ? error.message : String(error),
     });
   }
 }

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

@@ -64,7 +64,7 @@ export const NotebookAccessSelector = ({
       <SelectTrigger
         aria-label={`Notebook access: ${selected.label}`}
         title={`Notebook access: ${selected.description}`}
-        className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1.5 shrink-0"
+        className="chat-control chat-selector h-6 text-xs border-border py-0 px-2 gap-1.5 shrink-0"
       >
         <selected.Icon className="h-3 w-3" />
         <span className="text-nowrap">{selected.label}</span>

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

@@ -2,7 +2,7 @@
 
 import { BotMessageSquareIcon } from "lucide-react";
 import React from "react";
-import { MarkdownRenderer } from "@/components/markdown/markdown-renderer";
+import { ChatMarkdown } from "./chat-markdown";
 import {
   Accordion,
   AccordionContent,
@@ -49,9 +49,9 @@ export const ReasoningAccordion: React.FC<ReasoningAccordionProps> = ({
           </span>
         </AccordionTrigger>
         <AccordionContent className="pb-2 px-2">
-          <div className="bg-muted/30 border border-muted/50 rounded-md p-3 italic text-muted-foreground/90 relative">
+          <div className="bg-muted/30 border border-muted/50 rounded-md p-3 text-muted-foreground relative">
             <div className="pr-6">
-              <MarkdownRenderer content={reasoning} />
+              <ChatMarkdown content={reasoning} />
             </div>
           </div>
         </AccordionContent>

package/src/components/chat/tool-call/tool-activity-group.tsx

@@ -0,0 +1,49 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { PropsWithChildren } from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { formatToolName, type ToolState } from "./shared";
+
+interface ToolActivity {
+  toolName: string;
+  state: ToolState;
+}
+
+export function ToolActivityGroup({
+  tools,
+  isActive,
+  children,
+}: PropsWithChildren<{ tools: ToolActivity[]; isActive: boolean }>) {
+  const pending = tools.some((tool) => tool.state !== "output-available");
+  const editing = tools.every(
+    (tool) => formatToolName(tool.toolName) === "edit_notebook_tool",
+  );
+  const count = tools.length;
+  const label = pending
+    ? isActive
+      ? editing
+        ? "Editing notebook…"
+        : "Working…"
+      : "Stopped before completing all steps"
+    : editing
+      ? `Edited notebook · ${count} ${count === 1 ? "operation" : "operations"}`
+      : `Completed ${count} ${count === 1 ? "step" : "steps"}`;
+
+  return (
+    <Accordion type="single" collapsible={true} className="my-1 w-full">
+      <AccordionItem value="activity" className="border-0">
+        <AccordionTrigger className="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">
+          {label}
+        </AccordionTrigger>
+        <AccordionContent className="pb-2 pl-3 border-l border-border">
+          {children}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

package/src/components/chat/tool-call/tool-history-row.tsx

@@ -1,12 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import {
-  BanIcon,
-  CheckCircleIcon,
-  CircleSlashIcon,
-  Loader2,
-  WrenchIcon,
-} from "lucide-react";
+import { BanIcon, CircleSlashIcon, Loader2, WrenchIcon } from "lucide-react";
 import React from "react";
 import {
   Accordion,
@@ -54,7 +48,7 @@ const StatusIcon: React.FC<{ state: HistoryState; interrupted: boolean }> = ({
     case "approval-responded":
       return <Loader2 className="h-3 w-3 animate-spin" />;
     case "output-available":
-      return <CheckCircleIcon className="h-3 w-3 text-(--grass-11)" />;
+      return null;
     case "output-denied":
       return <BanIcon className="h-3 w-3 text-muted-foreground" />;
     default:
@@ -63,22 +57,6 @@ const StatusIcon: React.FC<{ state: HistoryState; interrupted: boolean }> = ({
   }
 };
 
-function getTriggerToneClass(state: HistoryState): string {
-  switch (state) {
-    case "output-available":
-      return "text-(--grass-11)/80";
-    case "output-denied":
-      return "text-muted-foreground";
-    case "input-streaming":
-    case "input-available":
-    case "approval-responded":
-      return "";
-    default:
-      logNever(state);
-      return "";
-  }
-}
-
 interface ToolHistoryRowProps {
   toolName: string;
   state: HistoryState;
@@ -109,12 +87,7 @@ export const ToolHistoryRow: React.FC<ToolHistoryRowProps> = ({
       className={cn("w-full", className)}
     >
       <AccordionItem value="tool-call" className="border-0">
-        <AccordionTrigger
-          className={cn(
-            "h-6 text-xs border-border shadow-none! ring-0! bg-muted/60 hover:bg-muted py-0 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180 hover:no-underline",
-            interrupted ? "text-muted-foreground" : getTriggerToneClass(state),
-          )}
-        >
+        <AccordionTrigger className="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">
           <span className="flex items-center gap-1">
             <StatusIcon state={state} interrupted={interrupted} />
             {interrupted ? "Interrupted" : STATUS_LABEL[state]}:

package/src/components/chat/tool-call/tool-result.tsx

@@ -47,7 +47,7 @@ const PrettySuccessResult: React.FC<{ data: SuccessResult }> = ({ data }) => {
           Tool Result
         </h3>
         <div className="flex items-center gap-2">
-          <span className="text-xs px-2 py-0.5 bg-(--grass-2) text-(--grass-11) rounded-full font-medium capitalize">
+          <span className="text-xs text-muted-foreground capitalize">
             {status}
           </span>
           {auth_required && (

package/src/components/chat/use-chat-generation.ts

@@ -0,0 +1,19 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { ChatStatus } from "ai";
+import { useSetAtom } from "jotai";
+import { useEffect } from "react";
+import { chatGenerationInProgressAtom } from "@/core/ai/state";
+
+export function useChatGeneration(status: ChatStatus) {
+  const setGenerating = useSetAtom(chatGenerationInProgressAtom);
+  const isGenerating = status === "submitted" || status === "streaming";
+
+  useEffect(() => {
+    setGenerating(isGenerating);
+    // useChat stops its request when the panel unmounts or becomes hidden.
+    return () => setGenerating(false);
+  }, [isGenerating, setGenerating]);
+
+  return isGenerating;
+}

package/src/components/editor/actions/__tests__/pair-with-agent-commands.test.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { PAIR_CONFIG } from "@/__tests__/fixtures/pair-config";
 import { shellQuote } from "@/utils/shell";
 import {
@@ -44,18 +44,6 @@ describe("shellQuote", () => {
   });
 });
 
-describe("getMarimoCommand", () => {
-  afterEach(() => vi.unstubAllEnvs());
-  it("uses the checkout command in development", () => {
-    vi.stubEnv("DEV", true);
-    expect(getMarimoCommand()).toBe("uv run marimo");
-  });
-  it("uses uvx outside development", () => {
-    vi.stubEnv("DEV", false);
-    expect(getMarimoCommand()).toBe("uvx marimo@latest");
-  });
-});
-
 describe("getTerminalCommand", () => {
   it.each([
     ["claude", "claude"],
@@ -63,7 +51,7 @@ describe("getTerminalCommand", () => {
     ["opencode", "opencode --prompt"],
   ] as const)("launches %s through the public CLI", (agent, cli) => {
     expect(getTerminalCommand(agent, CONNECTION, true, PAIR_CONFIG)).toBe(
-      `${cli} "$(uvx marimo@latest pair prompt \\\n  --url http://localhost:8000 \\\n  --notebook nb-one \\\n  --with-token)"`,
+      `${cli} "$(marimo pair prompt \\\n  --url http://localhost:8000 \\\n  --notebook nb-one \\\n  --with-token)"`,
     );
   });
   it("uses a stable Session ID for editor execution", () => {
@@ -89,20 +77,15 @@ describe("getTerminalCommand", () => {
     expect(command).not.toContain("--with-token");
   });
   it("uses the CLI without injected configuration", () => {
-    vi.stubEnv("DEV", true);
-    try {
-      const command = getTerminalCommand(
-        "claude",
-        CONNECTION_WITHOUT_TARGET,
-        false,
-      );
-      expect(command).toContain("uv run marimo pair prompt");
-      expect(command).not.toMatch(
-        /--claude|MARIMO_PAIR_NEXT|--file|--session|--notebook/,
-      );
-    } finally {
-      vi.unstubAllEnvs();
-    }
+    const command = getTerminalCommand(
+      "claude",
+      CONNECTION_WITHOUT_TARGET,
+      false,
+    );
+    expect(command).toContain(`${getMarimoCommand()} pair prompt`);
+    expect(command).not.toMatch(
+      /--claude|MARIMO_PAIR_NEXT|--file|--session|--notebook/,
+    );
   });
 });
 
@@ -133,21 +116,19 @@ describe("getRawPrompt", () => {
       "Session: stable-one\n",
     ],
   ])("renders the shared CLI prompt for %j", (connection, target) => {
-    const expected = `Pair with me on this running marimo notebook.\n\nURL: http://localhost:8000\n${target}\nRun \`uvx marimo@latest pair --help\` first.\nUse \`uvx marimo@latest\` for all marimo commands.`;
+    const expected = `Pair with me on this running marimo notebook.\n\nURL: http://localhost:8000\n${target}\nRun \`marimo pair --help\` first.\nUse \`marimo\` for all marimo commands.`;
     expect(getRawPrompt(connection, null, PAIR_CONFIG)).toBe(expected);
     expect(
       getRawPrompt(connection, null, { ...PAIR_CONFIG, hostEnabled: false }),
     ).toBe(expected);
   });
   it("matches the shared prompt without injected templates", () => {
-    vi.stubEnv("DEV", false);
-    try {
-      expect(getRawPrompt(CONNECTION, "secret-token")).toBe(
-        getRawPrompt(CONNECTION, "secret-token", PAIR_CONFIG),
-      );
-    } finally {
-      vi.unstubAllEnvs();
-    }
+    expect(getRawPrompt(CONNECTION, "secret-token")).toBe(
+      getRawPrompt(CONNECTION, "secret-token", {
+        ...PAIR_CONFIG,
+        command: getMarimoCommand(),
+      }),
+    );
   });
 });
 

package/src/components/editor/actions/__tests__/pair-with-agent-modal.test.tsx

@@ -99,14 +99,11 @@ describe("PairWithAgentModal", () => {
       expect(panel).not.toHaveTextContent("--file");
       expect(panel).not.toHaveTextContent("File:");
       expect(panel).not.toHaveTextContent("notebook.py");
-      expect(
-        panel.textContent?.includes("Agent connections require OpenCode 2.x"),
-      ).toBe(tab === "OpenCode");
       expect(
         within(panel).getByText(
           tab === "Other Agents"
-            ? "Copy this prompt into your agent"
-            : "Run in your terminal",
+            ? "Paste this prompt into your coding agent:"
+            : "Run this command in your terminal:",
           { exact: true },
         ),
       ).toBeInTheDocument();
@@ -367,15 +364,15 @@ describe("PairWithAgentModal", () => {
     });
 
     const panel = screen.getByRole("tabpanel");
-    expect(panel).toHaveTextContent("1. Run in your terminal");
-    expect(panel).toHaveTextContent("2. Paste when prompted for a token");
+    expect(panel).toHaveTextContent("1. Run this command in your terminal:");
+    expect(panel).toHaveTextContent("2. When prompted, paste this token:");
     expect(panel).not.toHaveTextContent("secret-token");
     fireEvent.click(
       within(panel).getByRole("button", { name: "Copy command" }),
     );
     await waitFor(() =>
       expect(copyToClipboard).toHaveBeenCalledWith(
-        String.raw`claude "$(uvx marimo@latest pair prompt \
+        String.raw`claude "$(marimo pair prompt \
   --url http://localhost:8000/ \
   --notebook ${NOTEBOOK_ID} \
   --with-token)"`,

package/src/components/editor/actions/__tests__/pair-with-agent.test.tsx

@@ -7,7 +7,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { ModalProvider } from "@/components/modal/ImperativeModal";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { store } from "@/core/state/jotai";
-import { PairWithAgentBanner, PairWithAgentButton } from "../pair-with-agent";
+import { PairWithAgentBanner } from "../pair-with-agent";
 
 const mocks = vi.hoisted(() => ({
   isWasm: vi.fn(() => false),
@@ -75,29 +75,15 @@ describe("PairWithAgent", () => {
       }),
     );
 
-    expect(screen.getByRole("dialog", { name: "Pair an agent" })).toBeVisible();
-  });
-
-  it("opens the pairing dialog and preserves a passed click handler", () => {
-    const onClick = vi.fn();
-    stubTokenFetch();
-    render(<PairWithAgentButton onClick={onClick} />, { wrapper });
-
-    fireEvent.click(screen.getByRole("button", { name: "Pair your agent" }));
-
-    expect(onClick).toHaveBeenCalledOnce();
-    expect(screen.getByRole("dialog", { name: "Pair an agent" })).toBeVisible();
+    expect(
+      screen.getByRole("dialog", { name: "Pair an agent to this notebook" }),
+    ).toBeVisible();
   });
 
   it("hides pairing controls in WASM", () => {
     mocks.isWasm.mockReturnValue(true);
 
-    const { container, rerender } = render(<PairWithAgentButton />, {
-      wrapper,
-    });
-    expect(container).toBeEmptyDOMElement();
-
-    rerender(<PairWithAgentBanner />);
+    const { container } = render(<PairWithAgentBanner />, { wrapper });
     expect(container).toBeEmptyDOMElement();
   });
 });

package/src/components/editor/actions/pair-with-agent-commands.ts

@@ -17,7 +17,6 @@ export const AGENT_LABELS: Record<AgentTab, string> = {
   prompt: "Other Agents",
 };
 
-/** How to invoke marimo: from the local checkout in dev, else via uvx. */
 export function getMarimoCommand(): string {
   return import.meta.env.DEV ? "uv run marimo" : "uvx marimo@latest";
 }

package/src/components/editor/actions/pair-with-agent-modal.tsx

@@ -116,11 +116,12 @@ export const PairWithAgentModal: React.FC<{
   return (
     <DialogContent className="sm:max-w-2xl">
       <DialogHeader>
-        <DialogTitle>Pair an agent</DialogTitle>
+        <DialogTitle>Pair an agent to this notebook</DialogTitle>
         <DialogDescription>
-          Use an AI coding agent to pair program on this notebook.{" "}
+          Choose your coding agent, then follow the instructions below to
+          connect it to this notebook using marimo pair.{" "}
           <a
-            href="https://links.marimo.app/marimo-pair"
+            href="https://links.marimo.app/docs-marimo-pair"
             target="_blank"
             rel="noopener noreferrer"
             className="underline"
@@ -160,12 +161,7 @@ export const PairWithAgentModal: React.FC<{
             >
               <Step
                 index={hasToken ? 1 : undefined}
-                title="Run in your terminal"
-                hint={
-                  hostEnabled && tab === "opencode"
-                    ? "Agent connections require OpenCode 2.x."
-                    : undefined
-                }
+                title="Run this command in your terminal:"
               >
                 <CommandBlock
                   command={getTerminalCommand(
@@ -178,7 +174,7 @@ export const PairWithAgentModal: React.FC<{
                 />
               </Step>
               {hasToken && authToken && (
-                <Step index={2} title="Paste when prompted for a token">
+                <Step index={2} title="When prompted, paste this token:">
                   <CommandBlock
                     command={authToken}
                     display={maskToken(authToken)}
@@ -191,7 +187,7 @@ export const PairWithAgentModal: React.FC<{
 
           <TabsContent value="prompt" className="mt-4 flex flex-col gap-4">
             <Step
-              title="Copy this prompt into your agent"
+              title="Paste this prompt into your coding agent:"
               hint={
                 hasToken
                   ? "Includes your auth token — keep it private."

package/src/components/editor/actions/pair-with-agent.tsx

@@ -4,7 +4,7 @@ import { ArrowUpRightIcon, BotIcon } from "lucide-react";
 import React from "react";
 import { AiProviderIcon } from "@/components/ai/ai-provider-icon";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
-import { Button, type ButtonProps } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import { isWasm } from "@/core/wasm/utils";
 import { cn } from "@/utils/cn";
 import { PairWithAgentModal } from "./pair-with-agent-modal";
@@ -31,38 +31,10 @@ export const usePairWithAgentModal = () => {
   );
 };
 
-export const PairWithAgentButton: React.FC<
-  ButtonProps & { label?: string }
-> = ({ className, label = "Pair your agent", onClick, ...props }) => {
-  const openPairWithAgentModal = usePairWithAgentModal();
-
-  if (isWasm()) {
-    return null;
-  }
-
-  return (
-    <Button
-      type="button"
-      variant="link"
-      size="xs"
-      className={cn("h-auto gap-1 px-0", className)}
-      onClick={(event) => {
-        onClick?.(event);
-        if (!event.defaultPrevented) {
-          openPairWithAgentModal();
-        }
-      }}
-      {...props}
-    >
-      {label}
-    </Button>
-  );
-};
-
 export const PairWithAgentBanner: React.FC<{
   label?: string;
   className?: string;
-}> = ({ label = "Pair your agent", className }) => {
+}> = ({ label = "Pair your coding agent", className }) => {
   const openPairWithAgentModal = usePairWithAgentModal();
 
   if (isWasm()) {
@@ -76,7 +48,7 @@ export const PairWithAgentBanner: React.FC<{
         className,
       )}
     >
-      <div className="flex items-center gap-2 text-sm font-semibold">
+      <div className="flex flex-wrap items-center gap-2 text-sm font-semibold">
         {label}
         <fieldset
           className="m-0 flex min-w-0 -space-x-1.5 border-0 p-0 mb-0.5"

package/src/components/editor/actions/useCellActionButton.tsx

@@ -159,7 +159,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
       },
       {
         icon: <SparklesIcon size={13} strokeWidth={1.5} />,
-        label: "Refactor with AI",
+        label: "Refactor cell",
         hidden: !aiFeaturesEnabled,
         handle: () => {
           setAiCompletionCell((current) =>

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -45,7 +45,7 @@ import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
 import { prettyError } from "@/utils/errors";
 import { retryWithTimeout } from "@/utils/timeout";
-import { PromptInput } from "./add-cell-with-ai";
+import { PromptInput } from "./prompt-input";
 import {
   AcceptCompletionButton,
   AI_EDIT_ACTION_LABELS,