@agent-native/toolkit 0.221.0-same-host-mcp-20261027-20261027081850 → 0.221.0

package/src/app/agentkit/react/components.tsx

@@ -108,6 +108,7 @@ import {
   ComposerNotice,
   ComposerNoticeScope,
 } from "../../../composer/composer-notice.js";
+import { useComposerRuntimeAdapters } from "../../../composer/runtime-adapters.js";
 import { Dialog, Tooltip } from "../../../design-system/index.js";
 import { useTableColumnGlide } from "../../../table-column-glide.js";
 import { Skeleton } from "../../../ui/skeleton.js";
@@ -2263,6 +2264,7 @@ export const AgentActivityGroup = memo(function AgentActivityGroup({
   isCurrentSegment = true,
   messageId,
   foldedReasoningMessageId,
+  summarizesTurn = false,
 }: {
   runId?: RunId;
   afterSequence?: number;
@@ -2273,9 +2275,17 @@ export const AgentActivityGroup = memo(function AgentActivityGroup({
   messageId?: string;
   /** A saved reply whose reasoning before its answer joins this group. */
   foldedReasoningMessageId?: string;
+  /** This segment is its run's whole turn, so it shows a row with no work. */
+  summarizesTurn?: boolean;
 }) {
-  const { threadId, slots, registry, labels, formatWorkedForDuration } =
-    useAgentKit();
+  const {
+    threadId,
+    slots,
+    registry,
+    labels,
+    formatWorkedForDuration,
+    loadRunUsage,
+  } = useAgentKit();
   const thread = useAgentThreadSlice((previous, next) =>
     sameRunWork(previous, next, runId),
   );
@@ -2554,9 +2564,15 @@ export const AgentActivityGroup = memo(function AgentActivityGroup({
         event.type === "run.failed" ||
         event.type === "run.cancelled"),
   );
+  // A local run, such as voice chat's, never starts on the server, so it
+  // stays queued while it works; its own events show it is working.
+  const localRunWorking =
+    run?.status === "queued" && runEvents.length > 0 && !hasTerminalRunEvent;
   const activelyWorking =
     isCurrentSegment &&
-    (run ? run.status === "running" : running && !hasTerminalRunEvent);
+    (run
+      ? run.status === "running" || localRunWorking
+      : running && !hasTerminalRunEvent);
   const waitingLabel =
     isCurrentSegment && run?.status === "awaiting_approval"
       ? labels.waitingForApproval
@@ -2572,12 +2588,48 @@ export const AgentActivityGroup = memo(function AgentActivityGroup({
       (afterSequence === undefined &&
         run !== undefined &&
         ["completed", "failed", "cancelled"].includes(run.status)));
+  const formatDuration = (ms: number) =>
+    formatWorkedForDuration?.(ms) ??
+    formatAgentKitDuration(ms, {
+      hour: labels.durationHourShort,
+      minute: labels.durationMinuteShort,
+      second: labels.durationSecondShort,
+    });
   if (
     activityItems.length === 0 &&
     durableToolResults.length === 0 &&
     !activelyWorking
   ) {
-    return null;
+    const runFinished = run
+      ? ["completed", "failed", "cancelled"].includes(run.status)
+      : hasTerminalRunEvent;
+    // Untimed or under a second, a bare "Worked" would read as instant.
+    if (
+      !summarizesTurn ||
+      !runFinished ||
+      durationMs === undefined ||
+      durationMs < 1_000
+    ) {
+      return null;
+    }
+    // With no steps, the run's details (cost, model) are what it opens to, so
+    // it opens only when it can show one of them.
+    const selectedModel = selectedRunModel(thread.messages, messageId);
+    const hasRunDetails =
+      runId !== undefined &&
+      (loadRunUsage !== undefined ||
+        (selectedModel !== undefined && selectedModel !== "auto"));
+    return (
+      <AgentWorkDisclosure
+        label={workedSummaryLabel(durationMs, labels, formatDuration)}
+        icon={<IconClock aria-hidden="true" className="agentkit-icon" />}
+        expandable={hasRunDetails}
+        {...(runId === undefined ? {} : { runId })}
+        {...(messageId === undefined ? {} : { messageId })}
+      >
+        {null}
+      </AgentWorkDisclosure>
+    );
   }
   const currentActivity = activelyWorking
     ? (latestRunningUsefulActivity?.activity ??
@@ -2619,13 +2671,6 @@ export const AgentActivityGroup = memo(function AgentActivityGroup({
   });
   const steps = agentWorkSteps(workItems);
   const hasExpandableActivity = steps.length > 0;
-  const formatDuration = (ms: number) =>
-    formatWorkedForDuration?.(ms) ??
-    formatAgentKitDuration(ms, {
-      hour: labels.durationHourShort,
-      minute: labels.durationMinuteShort,
-      second: labels.durationSecondShort,
-    });
   const failedCount = steps.reduce((sum, step) => sum + step.failedCount, 0);
   const reasoningMessageIds = activityItems.flatMap((activity) => {
     const entry = reasoningEntries.get(activity.id);
@@ -3351,7 +3396,8 @@ function AgentWorkDisclosure({
     />
   ) : undefined;
   // The row stays one mounted trigger from "Thinking" through the first
-  // activity, so it never flickers; until then it is not a tab stop.
+  // activity, so it never flickers; until then it is not a tab stop. Finished
+  // work with nothing to expand is text, not a disabled button.
   const disclosure = (
     <div
       ref={handoff.inPlaceRef}
@@ -3362,6 +3408,7 @@ function AgentWorkDisclosure({
       data-handoff={handoff.leavingHeight ? "enter" : undefined}
     >
       <AgentKitDisclosureSummary
+        as={expandable || running ? "button" : "static"}
         className="agentkit-activities-summary"
         rowClassName="agentkit-activities-row"
         open={open}
@@ -4826,6 +4873,21 @@ function messageMetadataString(
   return undefined;
 }
 
+/** The model a reply, or the request before it, was sent with. */
+function selectedRunModel(
+  messages: readonly AgentMessage[],
+  messageId: string | undefined,
+): string | undefined {
+  if (!messageId) return undefined;
+  return (
+    messageMetadataString(
+      agentMessagesById(messages).get(messageId)?.message,
+      "model",
+    ) ??
+    messageMetadataString(findPreviousUserMessage(messages, messageId), "model")
+  );
+}
+
 /**
  * A finished reply's footer offers a host under its message id, and the
  * reply's work row portals into it so it shares the line with the controls.
@@ -5024,17 +5086,9 @@ function AgentRunDetails({
           toolIds.add(event.activity.id);
         }
       }
-      const reply = messageId
-        ? agentMessagesById(thread.messages).get(messageId)?.message
-        : undefined;
-      const request = messageId
-        ? findPreviousUserMessage(thread.messages, messageId)
-        : undefined;
       return {
         toolCalls: toolIds.size,
-        model:
-          messageMetadataString(reply, "model") ??
-          messageMetadataString(request, "model"),
+        model: selectedRunModel(thread.messages, messageId),
       };
     },
     (previous, next) =>
@@ -5065,10 +5119,11 @@ function AgentRunDetails({
     if (billing.incomplete) {
       return { key: labels.runCreditsUsed, value: labels.runDetailIncomplete };
     }
-    // A measured zero has nothing to tell; only a missing or failed reading
-    // still shows, so it is never mistaken for a free run.
-    if (billing.builderCredits === 0) return null;
-    if (billing.builderCredits !== null) {
+    // Zero credits give way to a provider charge, which is the real cost.
+    if (
+      billing.builderCredits !== null &&
+      (billing.builderCredits !== 0 || !billing.providerCostUsd)
+    ) {
       return {
         key: labels.runCreditsUsed,
         value: formatRunUsageAmount(
@@ -5079,9 +5134,9 @@ function AgentRunDetails({
           billing.builderCreditsSource,
           labels,
         ),
+        measuredZero: billing.builderCredits === 0,
       };
     }
-    if (billing.providerCostUsd === 0) return null;
     if (billing.providerCostUsd !== null) {
       const usd = billing.providerCostUsd;
       return {
@@ -5098,6 +5153,7 @@ function AgentRunDetails({
           billing.providerCostSource,
           labels,
         ),
+        measuredZero: usd === 0,
       };
     }
     return { key: labels.runCreditsUsed, value: labels.runDetailNotRecorded };
@@ -5110,7 +5166,6 @@ function AgentRunDetails({
     details.model;
   const model = reportedModel === "auto" ? undefined : reportedModel;
   const rows: { id: string; key: string; value: ReactNode }[] = [
-    ...(credits ? [{ id: "credits", ...credits }] : []),
     ...(details.toolCalls > 0
       ? [
           {
@@ -5130,6 +5185,12 @@ function AgentRunDetails({
         ]
       : []),
   ];
+  // A measured zero has nothing to tell beside other details; a missing or
+  // failed reading always shows, so it is never mistaken for a free run. Alone,
+  // the zero still shows, so a row that opened to its details is never empty.
+  if (credits && (!credits.measuredZero || rows.length === 0)) {
+    rows.unshift({ id: "credits", key: credits.key, value: credits.value });
+  }
   if (rows.length === 0) return null;
   return (
     <dl
@@ -5221,6 +5282,42 @@ function AgentMessageTimestamp({
   );
 }
 
+/**
+ * Names an icon-only message action on hover and keyboard focus. Below the
+ * button, so it never covers the message it acts on.
+ */
+function MessageActionButton({
+  title,
+  ...props
+}: ComponentPropsWithoutRef<typeof IconButton>) {
+  // A disabled button gets no pointer events, so only a native title can
+  // explain it; an enabled one shows the reason in its tooltip instead, so a
+  // degraded action never opens both.
+  const inactive = Boolean(props.disabled || props.pending);
+  const reason = inactive ? undefined : title;
+  return (
+    <Tooltip
+      content={
+        reason ? (
+          <>
+            {props.label}
+            <span className="block text-muted-foreground">{reason}</span>
+          </>
+        ) : (
+          props.label
+        )
+      }
+      placement="bottom"
+      trigger={
+        <IconButton
+          {...props}
+          {...(inactive && title !== undefined ? { title } : {})}
+        />
+      }
+    />
+  );
+}
+
 export const AgentMessageActions = memo(function AgentMessageActions({
   value: message,
   threadId,
@@ -5434,7 +5531,7 @@ export const AgentMessageActions = memo(function AgentMessageActions({
     regenerateAction.error;
   const placement = isAssistant ? "inline" : undefined;
   const copyButton = (
-    <IconButton
+    <MessageActionButton
       label={copied ? labels.copied : labels.copy}
       icon={
         copied ? (
@@ -5458,7 +5555,7 @@ export const AgentMessageActions = memo(function AgentMessageActions({
           .replace("{{index}}", String(branchNavigation.index))
           .replace("{{count}}", String(branchNavigation.count))}
       >
-        <IconButton
+        <MessageActionButton
           label={labels.previousBranch}
           icon={<IconChevronLeft aria-hidden="true" />}
           size="compact"
@@ -5483,7 +5580,7 @@ export const AgentMessageActions = memo(function AgentMessageActions({
             .replace("{{index}}", String(branchNavigation.index))
             .replace("{{count}}", String(branchNavigation.count))}
         </span>
-        <IconButton
+        <MessageActionButton
           label={labels.nextBranch}
           icon={<IconChevronRight aria-hidden="true" />}
           size="compact"
@@ -5543,7 +5640,7 @@ export const AgentMessageActions = memo(function AgentMessageActions({
             ? (["positive", "negative"] as const).map((value) => {
                 const chosen = feedback === value;
                 return (
-                  <IconButton
+                  <MessageActionButton
                     key={value}
                     label={
                       value === "positive"
@@ -5589,7 +5686,7 @@ export const AgentMessageActions = memo(function AgentMessageActions({
             inert={!moreActionsOpen}
           >
             {showRetry ? (
-              <IconButton
+              <MessageActionButton
                 label={labels.regenerateResponse}
                 icon={<IconRefresh aria-hidden="true" />}
                 size="compact"
@@ -5601,14 +5698,16 @@ export const AgentMessageActions = memo(function AgentMessageActions({
                   position.active ||
                   !forkingCapability.enabled
                 }
-                title={forkingCapability.reason}
+                {...(forkingCapability.reason === undefined
+                  ? {}
+                  : { title: forkingCapability.reason })}
                 onPress={() =>
                   void regenerateAction.execute().catch(() => undefined)
                 }
               />
             ) : null}
             {showFork ? (
-              <IconButton
+              <MessageActionButton
                 label={labels.forkFromHere}
                 icon={<IconArrowFork aria-hidden="true" />}
                 size="compact"
@@ -5623,7 +5722,7 @@ export const AgentMessageActions = memo(function AgentMessageActions({
               />
             ) : null}
             {requestId ? (
-              <IconButton
+              <MessageActionButton
                 label={requestIdCopied ? labels.copied : labels.copyRequestId}
                 icon={
                   requestIdCopied ? (
@@ -5645,7 +5744,7 @@ export const AgentMessageActions = memo(function AgentMessageActions({
         ) : null}
       </div>
       {hasSecondaryActions ? (
-        <IconButton
+        <MessageActionButton
           elementRef={moreToggleRef}
           label={labels.moreMessageActions}
           icon={<IconDots aria-hidden="true" />}
@@ -5696,13 +5795,15 @@ export const AgentMessageActions = memo(function AgentMessageActions({
             message.metadata?.pendingSubmission !== true &&
             forkingCapability.visible &&
             text.trim() ? (
-              <IconButton
+              <MessageActionButton
                 label={labels.editMessage}
                 icon={<IconPencil aria-hidden="true" />}
                 size="compact"
                 className="size-6"
                 disabled={position.active || !forkingCapability.enabled}
-                title={forkingCapability.reason}
+                {...(forkingCapability.reason === undefined
+                  ? {}
+                  : { title: forkingCapability.reason })}
                 aria-pressed={editContext.message?.id === message.id}
                 onPress={() => editContext.setMessage(message)}
               />
@@ -6069,6 +6170,7 @@ export interface AgentKitComposerProps extends Omit<
     | "onSlashCommand"
     | "plusMenuMode"
     | "voiceEnabled"
+    | "onVoiceChatStart"
     | "autoFocus"
     | "disabled"
     | "isReferenceTarget"
@@ -6096,6 +6198,7 @@ export interface AgentKitComposerProps extends Omit<
     | "modelStatusChecksEnabled"
     | "showMissingApiKeySetup"
     | "setupCardVisible"
+    | "onModelConnectionRequiredChange"
     | "contextUsageSlot"
     | "attachmentsEnabled"
     | "onAttachmentRequest"
@@ -6167,6 +6270,7 @@ export function AgentKitComposer({
   onSlashCommand,
   plusMenuMode,
   voiceEnabled = false,
+  onVoiceChatStart,
   autoFocus = true,
   toolbarSlot,
   disabled,
@@ -6196,6 +6300,7 @@ export function AgentKitComposer({
   requireAgentEngine = false,
   showMissingApiKeySetup,
   setupCardVisible,
+  onModelConnectionRequiredChange,
   contextUsageSlot,
   attachmentsEnabled,
   onAttachmentRequest,
@@ -6215,7 +6320,10 @@ export function AgentKitComposer({
   onRetryContextItem,
   contextMenuItems,
   attachmentAdapter,
-  inlineTextAttachments,
+  // AgentKit always uploads attached files and the server reads their text,
+  // so also pasting a text file into the message sends it twice: the copy
+  // here has only a weak truncation note and a read failure here is silent.
+  inlineTextAttachments = false,
   beforeSend,
 }: AgentKitComposerProps) {
   const {
@@ -6327,13 +6435,14 @@ export function AgentKitComposer({
     };
   }, []);
   const [attachmentError, setAttachmentError] = useState<string | null>(null);
+  const composerTranslate = useComposerRuntimeAdapters().translate;
   useEffect(() => {
     setAttachmentError(null);
     setStopError(null);
   }, [threadId]);
   const composerAttachmentAdapter = useMemo(
-    () => attachmentAdapter ?? createChatAttachmentAdapter(),
-    [attachmentAdapter],
+    () => attachmentAdapter ?? createChatAttachmentAdapter(composerTranslate),
+    [attachmentAdapter, composerTranslate],
   );
   const starting = useAgentKitSubmissionStarting(threadId);
   const active = hasActiveRuns(thread) || starting;
@@ -6423,7 +6532,7 @@ export function AgentKitComposer({
     <div
       role="group"
       aria-labelledby={editingLabelId}
-      className="agentkit-editing-row flex h-6 min-w-0 items-center gap-1.5 text-xs text-muted-foreground"
+      className="agentkit-editing-row flex h-6 min-w-0 items-center gap-2 text-xs text-muted-foreground"
       data-agentkit-editing-row="true"
     >
       <Tooltip
@@ -6432,7 +6541,7 @@ export function AgentKitComposer({
         trigger={
           <span
             tabIndex={0}
-            className="inline-flex min-w-0 items-center gap-1.5 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="inline-flex min-w-0 items-center gap-2 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
             <IconPencil aria-hidden="true" className="size-4 shrink-0" />
             <span id={editingLabelId} className="truncate">
@@ -6910,6 +7019,7 @@ export function AgentKitComposer({
             requireAgentEngine,
             showMissingApiKeySetup,
             setupCardVisible,
+            onModelConnectionRequiredChange,
             contextUsageSlot,
             layoutVariant,
             toolbarSlot,
@@ -6923,6 +7033,7 @@ export function AgentKitComposer({
             slashSkills,
             onSlashCommand,
             voiceEnabled,
+            onVoiceChatStart,
             replyPlaceholder: placeholder ?? labels.composerReplyPlaceholder,
             onEscape: editingMessage ? cancelEditing : undefined,
             initialText: composerInitialText,
@@ -8295,6 +8406,7 @@ export function AgentKitChat({
     throughSequence,
     messageId,
     foldedReasoningMessageId,
+    summarizesTurn,
   }: {
     runId: RunId;
     anchor: string;
@@ -8302,6 +8414,7 @@ export function AgentKitChat({
     throughSequence?: number | undefined;
     messageId?: string | undefined;
     foldedReasoningMessageId?: string | undefined;
+    summarizesTurn?: boolean | undefined;
   }) => {
     const key = `run-work:${threadId}:${runId}:${anchor}`;
     const resetKey = `${anchor}:${runRevision(runId)}`;
@@ -8313,6 +8426,7 @@ export function AgentKitChat({
         throughSequence,
         messageId,
         foldedReasoningMessageId,
+        summarizesTurn,
       ],
       () =>
         renderRunWorkElement({
@@ -8323,6 +8437,7 @@ export function AgentKitChat({
           throughSequence,
           messageId,
           foldedReasoningMessageId,
+          summarizesTurn,
         }),
     );
   };
@@ -8334,6 +8449,7 @@ export function AgentKitChat({
     throughSequence,
     messageId,
     foldedReasoningMessageId,
+    summarizesTurn,
   }: {
     key: string;
     resetKey: string;
@@ -8342,6 +8458,7 @@ export function AgentKitChat({
     throughSequence?: number | undefined;
     messageId?: string | undefined;
     foldedReasoningMessageId?: string | undefined;
+    summarizesTurn?: boolean | undefined;
   }) => (
     <AgentKitSurfaceBoundary key={key} surface="activity" resetKey={resetKey}>
       <AgentCollaborationFeed
@@ -8362,6 +8479,7 @@ export function AgentKitChat({
         isCurrentSegment={throughSequence === undefined}
         messageId={messageId}
         foldedReasoningMessageId={foldedReasoningMessageId}
+        summarizesTurn={summarizesTurn}
       />
     </AgentKitSurfaceBoundary>
   );
@@ -8535,10 +8653,21 @@ export function AgentKitChat({
       isAssistantBoundary && runId
         ? previousSegmentEndByRun.get(runId)
         : undefined;
+    // A turn that only answered still gets one "Worked for" row: it is the
+    // run's only reply, nothing ran after it, and it shows no reasoning row.
+    const summarizesTurn = Boolean(
+      isAssistantBoundary &&
+      runId &&
+      previousAssistant === undefined &&
+      lastAssistantMessagesByRun.get(runId)?.id === message.id &&
+      !hasRunWork(runId, sequence) &&
+      !hasVisibleReasoning(message),
+    );
     const rendersRunWork = Boolean(
       isAssistantBoundary &&
       runId &&
-      hasRunWork(runId, previousAssistant?.sequence, sequence),
+      (summarizesTurn ||
+        hasRunWork(runId, previousAssistant?.sequence, sequence)),
     );
     // A saved reply's reasoning before its answer joins the work group above
     // it, so the turn shows one disclosure; the stream did not place it there.
@@ -8556,6 +8685,7 @@ export function AgentKitChat({
           throughSequence: sequence,
           messageId: message.id,
           foldedReasoningMessageId: foldsReasoning ? message.id : undefined,
+          summarizesTurn,
         }),
       );
     }

package/src/app/agentkit/react/composer-context.spec.tsx

@@ -247,6 +247,9 @@ describe("AgentKit composer context submission", () => {
       ),
     );
     expect(capture.props?.contextMenuItems).toBe(contextMenuItems);
+    // Files are uploaded and read by the server; inlining them too would send
+    // each text file twice.
+    expect(capture.props?.inlineTextAttachments).toBe(false);
     expect(
       capture.props?.contextMenuItems?.[0].picker?.onSelect,
     ).toBeUndefined();

package/src/app/agentkit/react/disclosures.spec.tsx

@@ -904,3 +904,127 @@ describe("work before a message sent into the running turn", () => {
     ).toBeTruthy();
   });
 });
+
+describe("a turn that only answered", () => {
+  const reply: AgentMessage = {
+    ...answer([{ type: "text", text: "Answer." }]),
+    metadata: { model: "claude-sonnet-5-5" },
+  };
+  // Production runs report this before the model answers; it is not work.
+  const startingAgent = {
+    type: "activity.started" as const,
+    occurredAt: at(100),
+    activity: {
+      id: `agentkit:internal:${RUN}:starting-agent`,
+      kind: "model",
+      label: "Starting agent",
+      status: "running" as const,
+    },
+  };
+
+  function answeredAt(
+    ms: number,
+    work: Array<Omit<AgentEvent, "id" | "threadId" | "runId" | "sequence">>,
+    finished = true,
+  ): AgentEvent[] {
+    return [
+      { type: "run.started", occurredAt: at(0) },
+      ...work,
+      { type: "message.completed", occurredAt: at(ms), message: reply },
+      ...(finished
+        ? [{ type: "run.completed", occurredAt: at(ms + 500) }]
+        : []),
+    ].map(
+      (event, index) =>
+        ({
+          ...event,
+          id: `event-${index}`,
+          threadId: THREAD,
+          runId: RUN,
+          sequence: index + 1,
+        }) as AgentEvent,
+    );
+  }
+
+  it("shows a Worked for row under its reply that opens to the run details", async () => {
+    for (const work of [[startingAgent], []]) {
+      const container = await renderThread(
+        [user, reply],
+        answeredAt(4_000, work),
+      );
+      const rows = container.querySelectorAll<HTMLElement>(
+        ".agentkit-activities",
+      );
+      expect(rows).toHaveLength(1);
+      const row = rows[0]!;
+      expect(
+        row.querySelector(".agentkit-activities-summary")?.textContent,
+      ).toBe("Worked for 4s");
+      expect(row.closest(".agentkit-message-actions")).not.toBeNull();
+      const trigger = row.querySelector<HTMLElement>(
+        ".agentkit-disclosure-summary",
+      );
+      expectSharedSummary(trigger);
+      await click(trigger);
+      expect(row.dataset.open).toBe("true");
+      expect(row.querySelector(".agentkit-run-details")?.textContent).toContain(
+        "claude-sonnet-5-5",
+      );
+      expect(row.querySelector(".agentkit-work-steps")).toBeNull();
+    }
+  });
+
+  it("shows text when the run has no details to open to", async () => {
+    const unnamed: AgentMessage = { ...reply, metadata: {} };
+    const container = await renderThread(
+      [user, unnamed],
+      answeredAt(4_000, [startingAgent]).map((event) =>
+        event.type === "message.completed"
+          ? { ...event, message: unnamed }
+          : event,
+      ),
+    );
+    const row = container.querySelector<HTMLElement>(".agentkit-activities");
+    expect(row?.dataset.expandable).toBe("false");
+    expect(
+      row?.querySelector(".agentkit-activities-summary")?.textContent,
+    ).toBe("Worked for 4s");
+    expect(row?.querySelector("button")).toBeNull();
+  });
+
+  it("shows no row under a second, untimed, or still running", async () => {
+    const instant = await renderThread(
+      [user, reply],
+      answeredAt(600, [startingAgent]),
+    );
+    expect(instant.querySelector(".agentkit-activities")).toBeNull();
+
+    const streaming = await renderThread(
+      [user, { ...reply, status: "streaming" }],
+      answeredAt(4_000, [startingAgent], false),
+    );
+    expect(streaming.querySelector(".agentkit-activities")).toBeNull();
+
+    // A reloaded thread has no run timing.
+    const reloaded = await renderThread([user, reply], []);
+    expect(reloaded.querySelector(".agentkit-activities")).toBeNull();
+  });
+
+  it("keeps one expandable row for a turn with activity", async () => {
+    const container = await renderThread(
+      [user, reply],
+      answeredAt(4_000, [startingAgent, ...activityEvents(1)]),
+    );
+    const rows = container.querySelectorAll<HTMLElement>(
+      ".agentkit-activities",
+    );
+    expect(rows).toHaveLength(1);
+    expect(rows[0]!.dataset.expandable).toBe("true");
+    expectSharedSummary(
+      rows[0]!.querySelector<HTMLElement>(".agentkit-disclosure-summary"),
+    );
+    expect(
+      rows[0]!.querySelector(".agentkit-activities-summary")?.textContent,
+    ).toBe("Worked for 4s");
+  });
+});