@marimo-team/islands 0.25.3-dev29 → 0.25.3-dev290

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/__tests__/session-tabs.test.tsx

@@ -0,0 +1,43 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { SessionTabs } from "../session-tabs";
+import { addSession, agentSessionStateAtom } from "../state";
+
+vi.mock("../agent-selector", () => ({ AgentSelector: () => null }));
+
+it("keeps session selection and close as separate named buttons", () => {
+  const first = addSession(
+    { sessions: [], activeTabId: null },
+    { agentId: "claude", firstMessage: "First" },
+  ).sessions[0];
+  const second = addSession(
+    { sessions: [], activeTabId: null },
+    { agentId: "codex", firstMessage: "Second" },
+  ).sessions[0];
+  const store = createStore();
+  store.set(agentSessionStateAtom, {
+    sessions: [first, second],
+    activeTabId: first.tabId,
+  });
+  render(
+    <Provider store={store}>
+      <SessionTabs />
+    </Provider>,
+  );
+  const select = screen.getByRole("button", {
+    name: /Second$/,
+    pressed: false,
+  });
+  select.focus();
+  expect(select).toHaveFocus();
+  fireEvent.click(select);
+  expect(select).toHaveAttribute("aria-pressed", "true");
+  fireEvent.click(screen.getByRole("button", { name: "Close First" }));
+  expect(store.get(agentSessionStateAtom).activeTabId).toBe(second.tabId);
+  expect(
+    store.get(agentSessionStateAtom).sessions.map((session) => session.title),
+  ).toEqual(["Second"]);
+});

package/src/components/chat/acp/__tests__/state.test.ts

@@ -74,7 +74,7 @@ describe("state utility functions", () => {
       const newState = addSession(initialState, session);
 
       // Remove the dynamic tabId for snapshot comparison
-      const { tabId, ...sessionWithoutId } = newState.sessions[0];
+      const { tabId: _tabId, ...sessionWithoutId } = newState.sessions[0];
       expect({
         ...newState,
         sessions: [sessionWithoutId],
@@ -116,7 +116,7 @@ describe("state utility functions", () => {
       const newState = addSession(initialState, newSession);
 
       // Remove dynamic tabId for snapshot
-      const { tabId, ...sessionWithoutId } = newState.sessions[0];
+      const { tabId: _tabId, ...sessionWithoutId } = newState.sessions[0];
       expect({
         ...newState,
         sessions: [sessionWithoutId],

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

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { PendingAICells } from "@/components/editor/chrome/wrapper/pending-ai-cells";
 import { useAtom } from "jotai";
 import {
   BotMessageSquareIcon,
@@ -16,7 +17,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 +40,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 +443,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>
@@ -1245,6 +1247,7 @@ const AgentPanel: React.FC = () => {
           </div>
         )}
 
+        {!isLoading && <PendingAICells />}
         <PromptArea
           isLoading={isLoading}
           activeSessionId={activeSessionId}
@@ -1266,7 +1269,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{" "}
@@ -328,15 +328,16 @@ export const PlansBlock = (props: { data: PlanNotificationEvent[] }) => {
         </span>
       </div>
       <ul className="flex flex-col gap-1">
-        {plans.map((item, index) => (
+        {plans.map((item) => (
           <li
-            key={`${item.status}-${index}`}
+            key={item.content}
             className={`
               flex items-center gap-2 px-2 py-1 rounded
             `}
           >
             <input
               type="checkbox"
+              aria-label={item.content}
               checked={item.status === "completed"}
               readOnly={true}
               className="accent-primary h-4 w-4 rounded border border-muted-foreground/30"
@@ -344,7 +345,7 @@ export const PlansBlock = (props: { data: PlanNotificationEvent[] }) => {
             />
             <span
               className={cn(
-                "text-xs",
+                "text-sm",
                 item.status === "completed" &&
                   "line-through text-muted-foreground",
               )}
@@ -360,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/acp/session-tabs.tsx

@@ -32,17 +32,22 @@ const SessionTab: React.FC<SessionTabProps> = memo(
           "flex items-center gap-1 px-2 py-1 text-xs border-r border-border bg-muted/30 hover:bg-muted/50 cursor-pointer min-w-0",
           isActive && "bg-background border-b-0 relative z-1",
         )}
-        onClick={() => onSelect(session.tabId)}
       >
-        <div className="flex items-center gap-1 min-w-0 flex-1">
+        <button
+          type="button"
+          aria-pressed={isActive}
+          onClick={() => onSelect(session.tabId)}
+          className="flex items-center gap-1 min-w-0 flex-1 text-left focus-visible:outline focus-visible:outline-ring"
+        >
           <span className="text-muted-foreground text-[10px] font-medium">
             <AiProviderIcon provider={session.agentId} className="h-3 w-3" />
           </span>
           <span className="truncate" title={session.title}>
             {session.title}
           </span>
-        </div>
+        </button>
         <Button
+          aria-label={`Close ${session.title}`}
           variant="ghost"
           size="sm"
           className="h-4 w-4 p-0 hover:bg-destructive/20 hover:text-destructive shrink-0"

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

@@ -0,0 +1,132 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { ChevronRightIcon } from "lucide-react";
+import React from "react";
+import { cn } from "@/utils/cn";
+import { formatDuration, type TurnTiming } from "./turn-timing";
+
+interface AgentActivityProps {
+  running: boolean;
+  thinking?: boolean;
+  interrupted?: boolean;
+  defaultOpen?: boolean;
+  timing?: TurnTiming;
+  toolCount?: number;
+  failedCount?: number;
+  steps?: React.ReactNode[];
+}
+
+export const AgentActivity: React.FC<AgentActivityProps> = ({
+  running,
+  thinking = false,
+  interrupted = false,
+  defaultOpen = false,
+  timing,
+  toolCount = 0,
+  failedCount = 0,
+  steps = NO_STEPS,
+}) => {
+  const [userOpen, setUserOpen] = React.useState<boolean>();
+  const open = userOpen ?? (running || defaultOpen);
+  const now = useNow(running);
+  const hasSteps = steps.length > 0;
+
+  const header = running ? (
+    <>
+      <output className={SHIMMER_CLASS}>
+        {thinking ? "Thinking…" : "Working…"}
+      </output>
+      {timing && (
+        <span className="tabular-nums">
+          {formatDuration(now - timing.startedAt)}
+        </span>
+      )}
+    </>
+  ) : (
+    <>
+      <span>{doneLabel({ interrupted, timing, toolCount })}</span>
+      {failedCount > 0 && (
+        <span className="text-(--red-11)">· {failedCount} failed</span>
+      )}
+    </>
+  );
+
+  return (
+    <div className="my-1 w-full">
+      {hasSteps ? (
+        <button
+          type="button"
+          onClick={() => setUserOpen(!open)}
+          aria-expanded={open}
+          className="group/activity -mx-1.5 flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-foreground/6 hover:text-foreground focus-visible:outline-1 focus-visible:outline-(--slate-8)"
+        >
+          {header}
+          <ChevronRightIcon
+            aria-hidden={true}
+            className={cn(
+              "size-3 shrink-0 opacity-60 transition-transform group-hover/activity:opacity-100",
+              open && "rotate-90",
+            )}
+          />
+        </button>
+      ) : (
+        <div className="flex items-center gap-1.5 py-0.5 text-xs text-muted-foreground">
+          {header}
+        </div>
+      )}
+      {open && hasSteps && (
+        <div className="mt-1 mb-2 ml-1.5 flex flex-col gap-1 border-l border-foreground/15 pl-3">
+          {steps}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const NO_STEPS: React.ReactNode[] = [];
+
+const SHIMMER_CLASS =
+  "animate-shimmer bg-[linear-gradient(90deg,var(--muted-foreground)_35%,var(--foreground)_50%,var(--muted-foreground)_65%)] bg-size-[200%_100%] bg-clip-text text-transparent motion-reduce:animate-none";
+
+function doneLabel({
+  interrupted,
+  timing,
+  toolCount,
+}: {
+  interrupted: boolean;
+  timing?: TurnTiming;
+  toolCount: number;
+}): string {
+  const duration =
+    timing?.finishedAt == null
+      ? undefined
+      : formatDuration(timing.finishedAt - timing.startedAt);
+  if (interrupted) {
+    return duration ? `Stopped after ${duration}` : "Stopped";
+  }
+  if (toolCount === 0) {
+    return duration ? `Thought for ${duration}` : "Thought process";
+  }
+  if (duration) {
+    return `Worked for ${duration}`;
+  }
+  return `Worked through ${toolCount} ${toolCount === 1 ? "step" : "steps"}`;
+}
+
+function useNow(ticking: boolean): number {
+  const [now, setNow] = React.useState(() => Date.now());
+  React.useEffect(() => {
+    if (!ticking) {
+      return;
+    }
+    const tick = () => setNow(Date.now());
+    // Catch up at once when resuming, e.g. after a tool approval.
+    const frame = requestAnimationFrame(tick);
+    const id = setInterval(tick, 1000);
+    return () => {
+      cancelAnimationFrame(frame);
+      clearInterval(id);
+    };
+  }, [ticking]);
+  return now;
+}

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

@@ -9,10 +9,8 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { ExternalLink } from "@/components/ui/links";
 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);
@@ -29,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>
@@ -46,10 +40,7 @@ export const CapabilitiesPopover: React.FC = () => {
           <div className="flex flex-col gap-0.5">
             <span className="text-sm font-semibold">Web search</span>
             <span className="text-xs text-muted-foreground">
-              Search the web when the model supports it.{" "}
-              <ExternalLink href="https://docs.marimo.io/guides/editor_features/tools#web-search-and-fetch">
-                Learn more
-              </ExternalLink>
+              Search the web when the model supports it.
             </span>
           </div>
           <Switch

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,8 @@ export const AddContextButton = ({
   return (
     <Tooltip content="Add context">
       <Button
+        className="chat-control"
+        aria-label="Add context"
         variant="text"
         size="icon"
         onClick={handleAddContext}
@@ -148,6 +151,8 @@ export const AttachFileButton = ({
     <>
       <Tooltip content="Attach a file">
         <Button
+          className="chat-control"
+          aria-label="Attach a file"
           variant="text"
           size="icon"
           onClick={() => fileInputRef.current?.click()}