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

package/dist/{swimlanes-42K2YHIH-Cjveh9OM.js → swimlanes-42K2YHIH-21kCq6l8.js}

@@ -9,7 +9,7 @@ import "./chunk-4HAMMTFA-D4eFPyFh.js";
 import "./chunk-GVQU2GXP-Cwbt-lF0.js";
 import "./chunk-L3NEJ4N5-n-zgIVSy.js";
 import { o as n } from "./chunk-OSK3NFVY-DXa-Cxbn.js";
-import { c as r } from "./mermaid-DFYN_PXd.js";
+import { c as r } from "./mermaid-B-jKSwGt.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/swimlanes-42K2YHIH.mjs
 var i = 5, a = 1e-5, o = 1e-6;
 function s(e) {

package/dist/{swimlanesDiagram-VR7AAH4N-Bdr7Ev_2.js → swimlanesDiagram-VR7AAH4N-BpRJP6KU.js}

@@ -9,11 +9,11 @@ import "./chunk-4HAMMTFA-D4eFPyFh.js";
 import "./chunk-GVQU2GXP-Cwbt-lF0.js";
 import "./chunk-L3NEJ4N5-n-zgIVSy.js";
 import "./chunk-OSK3NFVY-DXa-Cxbn.js";
-import "./mermaid-DFYN_PXd.js";
+import "./mermaid-B-jKSwGt.js";
 import "./chunk-F27PBJKO-ufseIn5y.js";
 import "./chunk-XXDRQBXY-Dnl5VBqG.js";
 import "./chunk-POPQ4Y6H-hYOXbYH_.js";
-import { r as t, t as n } from "./chunk-SHT3W25Y-I8ZFP5L1.js";
+import { r as t, t as n } from "./chunk-SHT3W25Y-BRfADrzD.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/swimlanesDiagram-VR7AAH4N.mjs
 var r = n({
 	defaultLayout: "swimlane",

package/dist/{timeline-definition-24CTP7MA-KIuDcefn.js → timeline-definition-24CTP7MA-Ckgh4lS4.js}

@@ -3,7 +3,7 @@ import { p as t } from "./chunk-75Z2AOVW-D7gxIs2Q.js";
 import { n, t as r } from "./src-CA_m4ONl.js";
 import { n as i, t as a } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { $ as o, J as s, a as c, b as l, et as u, nt as d, o as f, x as p } from "./chunk-DU6HZSFF-BwiyaNpg.js";
-import { p as m } from "./mermaid-DFYN_PXd.js";
+import { p as m } from "./mermaid-B-jKSwGt.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/timeline-definition-24CTP7MA.mjs
 var h = (function() {
 	var e = /* @__PURE__ */ i(function(e, t, n, r) {

package/dist/{toast-CY1_Qv41.js → toast-DpczUryP.js}

@@ -405,7 +405,7 @@ var $ = a(), ve = I, ye = S.forwardRef((e, n) => {
 ye.displayName = V.displayName;
 var be = {
 	default: "bg-background border forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
-	danger: "group destructive text-error border-destructive bg-(--red-1) shadow-md-solid shadow-error forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]"
+	danger: "group destructive text-(--red-11) border-destructive bg-(--red-1) shadow-md-solid shadow-error forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]"
 }, xe = r("data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-start justify-between gap-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full forced-color-adjust-none", {
 	variants: { variant: be },
 	defaultVariants: { variant: "default" }

package/dist/{vega-component-C-lqjV0q.js → vega-component-CF9kI6C4.js}

@@ -5,7 +5,7 @@ import { t as o } from "./compiler-runtime-CldRdSsv.js";
 import { t as s } from "./tooltip-BfcDQd2j.js";
 import { l as c, t as l } from "./config-CmeG_Pb6.js";
 import { t as u } from "./jsx-runtime-3BD1kT0s.js";
-import { n as d } from "./error-banner-DbRFOd2O.js";
+import { n as d } from "./error-banner-DPc9eIw5.js";
 import { t as f } from "./debounce-DrhhziJv.js";
 import { n as p } from "./useTheme-BZ2GGLgm.js";
 import { D as ee } from "./utils-DXkj82sK.js";

package/dist/{vennDiagram-4TSXK5OY-DrIOUHfb.js → vennDiagram-4TSXK5OY-CDei2Bt3.js}

@@ -3,7 +3,7 @@ import { t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { $ as r, H as i, K as a, U as o, a as s, b as c, c as l, et as u, f as d, nt as f, tt as p, v as m, w as h, y as g } from "./chunk-DU6HZSFF-BwiyaNpg.js";
 import { t as _ } from "./rough.esm-CtV9AnV1.js";
-import { p as v } from "./mermaid-DFYN_PXd.js";
+import { p as v } from "./mermaid-B-jKSwGt.js";
 //#region ../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/transparentize.js
 var y = (e, t) => p(e, "a", -t), b = 1e-10;
 function x(e, t) {

package/dist/{wardleyDiagram-VM6X3IG4-CJNjf4OH.js → wardleyDiagram-VM6X3IG4-CXavT601.js}

@@ -2,7 +2,7 @@ import { i as e } from "./chunk-75Z2AOVW-D7gxIs2Q.js";
 import { n as t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as r, H as i, K as a, U as o, a as s, b as c, c as l, v as u, w as d, x as f, y as p } from "./chunk-DU6HZSFF-BwiyaNpg.js";
-import { p as m } from "./mermaid-DFYN_PXd.js";
+import { p as m } from "./mermaid-B-jKSwGt.js";
 import { n as h } from "./mermaid-parser.core-DxuSfYwJ.js";
 import { t as g } from "./chunk-JWPE2WC7-DJvv1t8U.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/wardleyDiagram-VM6X3IG4.mjs

package/dist/{xychartDiagram-S5SC5T6Z-DEshFho-.js → xychartDiagram-S5SC5T6Z-CvJhcZri.js}

@@ -9,7 +9,7 @@ import { n as s } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as c, H as l, K as u, U as d, a as f, b as p, c as m, f as h, v as g, w as _, y as v, z as y } from "./chunk-DU6HZSFF-BwiyaNpg.js";
 import "./chunk-PWAF6VOD-CQw5qATZ.js";
 import { t as b } from "./chunk-GMAD6QVW-BhaJx0X3.js";
-import { p as x } from "./mermaid-DFYN_PXd.js";
+import { p as x } from "./mermaid-B-jKSwGt.js";
 //#region ../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/band.js
 function S() {
 	var e = t().unknown(void 0), r = e.domain, i = e.range, o = 0, s = 1, c, l, u = !1, d = 0, f = 0, p = .5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.3-dev266",
+  "version": "0.25.3-dev267",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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}