@marimo-team/islands 0.25.3-dev266 → 0.25.3-dev268

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

@@ -3,7 +3,7 @@
 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";
+import { getAnswerText, renderUIMessage } from "../chat-display";
 
 vi.mock("../tool-call/tool-call-view", () => ({
   ToolCallView: ({ toolName }: { toolName: string }) => <div>{toolName}</div>,
@@ -12,114 +12,185 @@ 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: {},
+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) {
+function show(
+  parts: UIMessage["parts"],
+  {
+    isActive = false,
+    metadata,
+  }: { isActive?: boolean; metadata?: Record<string, number | boolean> } = {},
+) {
   return render(
-    renderUIMessage({
-      message: { id: "message", role: "assistant", parts },
-      isStreamingReasoning: false,
-      isLast: true,
-      isActive,
-    }),
+    <div>
+      {renderUIMessage({
+        message: { id: "message", role: "assistant", parts, metadata },
+        isLast: true,
+        isActive,
+      })}
+    </div>,
   );
 }
 
-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()]);
+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: "Edited notebook · 4 operations",
+      name: "Worked through 2 steps",
     });
     expect(summary.getAttribute("aria-expanded")).toBe("false");
-    expect(screen.queryByText("tool-edit_notebook_tool")).toBeNull();
+    expect(screen.getByText("Added `fib`.")).toBeTruthy();
+    expect(screen.queryByText("Plan the cells")).toBeNull();
+
     fireEvent.click(summary);
-    expect(screen.getAllByText("tool-edit_notebook_tool")).toHaveLength(4);
+    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("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();
+  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: "Edited notebook · 1 operation" }),
+      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: "Completed 2 steps" }),
+      screen.getByRole("button", { name: "Stopped after 3s" }),
     ).toBeTruthy();
   });
 
-  it("keeps errors, denials, and approval requests outside collapsed groups", () => {
+  it("flags failed steps in the summary", () => {
     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(),
+      tool("lint_notebook", "output-error"),
+      { type: "text", text: "Hm." },
     ]);
-    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);
+    expect(screen.getByRole("button", { name: /1 failed/ })).toBeTruthy();
   });
 
-  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);
+  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: "Stopped before completing all steps",
-      }),
+      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-utils.test.ts

@@ -9,6 +9,7 @@ import {
   hasPendingToolCalls,
   hasUnresolvedToolCalls,
   shouldFlushQueue,
+  willAutoContinue,
 } from "../chat-utils";
 
 /**
@@ -560,3 +561,44 @@ describe("handleToolCall", () => {
     },
   );
 });
+
+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__/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/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,
@@ -1246,6 +1247,7 @@ const AgentPanel: React.FC = () => {
           </div>
         )}
 
+        {!isLoading && <PendingAICells />}
         <PromptArea
           isLoading={isLoading}
           activeSessionId={activeSessionId}

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