@runtypelabs/persona 4.28.2 → 4.29.1

package/src/types.ts

@@ -818,14 +818,18 @@ export type AgentWidgetAgentRequestPayload = {
 // WebMCP Types (page-discovered tools shipped per dispatch)
 // ============================================================================
 
-/**
- * Wire shape for a single client-discovered tool sent on `dispatch.clientTools[]`.
- *
- * Mirrors the SDK's `ClientToolDefinition` in `@runtypelabs/sdk`. Only the
- * JSON-serializable surface of a WebMCP tool: the `execute` function stays
- * client-side; the server merges these into the agent's tool catalog under
- * the `webmcp:` namespace.
- */
+/** Advisory WebMCP and MCP hints. These do not grant approval or safe retry. */
+export type ToolAnnotations = {
+  readOnlyHint?: boolean;
+  destructiveHint?: boolean;
+  consequentialHint?: boolean;
+  untrustedContentHint?: boolean;
+  idempotentHint?: boolean;
+  openWorldHint?: boolean;
+  debugging?: boolean;
+};
+
+/** Wire metadata for a client-side tool; its execute function stays in the browser. */
 export type ClientToolDefinition = {
   /** Bare tool name; the server prepends `webmcp:` on the wire. */
   name: string;
@@ -842,20 +846,16 @@ export type ClientToolDefinition = {
   /** Origin of the page that registered the tool: for server-side audit. */
   pageOrigin?: string;
   /**
-   * WebMCP `Tool.annotations` (spec). Not used for gating server-side; the
-   * widget reads these client-side. Forwarded so traces/dashboards can show
-   * `readOnlyHint` / `untrustedContentHint` on tool-call records.
+   * WebMCP hints and MCP compatibility hints forwarded to runtime tool metadata
+   * and confirmation callbacks. No hint skips the default confirmation gate.
    */
-  annotations?: {
-    readOnlyHint?: boolean;
-    untrustedContentHint?: boolean;
-  };
+  annotations?: ToolAnnotations;
   /**
    * Hoisted copy of `annotations.untrustedContentHint`. This is the field the
    * server actually acts on (`InlineClientToolSchema`): it spotlights the
    * tool's output before the model reads it, so instructions embedded in
    * page-provided content (reviews, comments, emails) are not treated as
-   * instructions. `annotations` itself is trace/dashboard metadata only.
+   * instructions. A nested true hint also opts into output protection.
    */
   untrustedContentHint?: boolean;
 };
@@ -875,16 +875,19 @@ export type WebMcpConfirmInfo = {
    * didn't declare one.
    */
   title?: string;
-  annotations?: {
-    readOnlyHint?: boolean;
-    untrustedContentHint?: boolean;
-  };
+  annotations?: ToolAnnotations;
   /**
    * Why the confirm was requested. Currently always `'gate'`: the default
    * confirm-by-default gate that fires before every `webmcp:*` call. Tool
    * callbacks on v6 receive an AbortSignal, not a nested confirmation API.
    */
   reason: 'gate';
+  /**
+   * Aborts when the call no longer needs an answer (its deadline passed, or it
+   * was cancelled). A confirm UI should close and resolve `false`; the tool
+   * never runs after it aborts either way.
+   */
+  signal?: AbortSignal;
 };
 
 /**
@@ -5264,6 +5267,13 @@ export type VoiceDelegationRequest = {
   userUtteranceIds: string[];
   /** The voice model's view of the conversation it delegated from. */
   messages: Array<{ role: string; content: unknown }>;
+  /**
+   * `delegation_started.input.priorToolResults` as received: page tools the
+   * server already ran for this turn, each `{ toolCallId, name, arguments,
+   * result }`. Unvalidated. The chat turn records them as completed calls and
+   * never runs them again.
+   */
+  priorToolResults?: unknown;
   /**
    * Set when the server streams delegated answers (`delegation_stream`): called
    * with each speakable piece of the turn's answer, in order, while it renders.
@@ -5355,8 +5365,126 @@ export interface VoiceSessionBridge {
    * declined too, as the approval TTL would.
    */
   dropDelegation?(delegationId: string, expired?: boolean): void;
+  /**
+   * The page tools a voice call may offer the server's fast tier
+   * (`client_tools` / `client_tool_call`). Returns `null` when WebMCP is not
+   * enabled on this widget; the provider then does not declare `client_tools`.
+   */
+  clientTools?(): VoiceClientTools | null;
+  /**
+   * The server answered a delegation itself (`delegation_completed.route ===
+   * 'direct'`): record the visitor's turn and the spoken answer in the chat,
+   * as a delegated turn would have. `assistantText` may be empty (no readout).
+   */
+  recordDirectTurn?(turn: VoiceDirectTurn): void;
+}
+
+/** A delegation the server answered on its fast tier, for the chat history. */
+export type VoiceDirectTurn = {
+  delegationId: string;
+  userText: string;
+  userUtteranceIds: string[];
+  assistantText: string;
+};
+
+/** `client_tool_result.status` (open enum on the wire). */
+export type VoiceClientToolStatus =
+  | 'completed'
+  | 'failed'
+  | 'denied'
+  | 'stale'
+  | 'timeout'
+  | (string & {});
+
+/** What running one `client_tool_call` produced. */
+export type VoiceClientToolOutcome = {
+  status: VoiceClientToolStatus;
+  /** The page tool's return value (any JSON), on `completed`. */
+  result?: unknown;
+  error?: { message: string };
+};
+
+/** The page's tool set as of now, plus its content fingerprint. */
+export type VoiceClientToolsSnapshot = {
+  /** Exactly what `/v1/client/chat` would send as `clientTools[]` (bare names). */
+  tools: ClientToolDefinition[];
+  fingerprint: string;
+};
+
+/** WebMCP access for a voice call (see {@link VoiceSessionBridge.clientTools}). */
+export interface VoiceClientTools {
+  snapshot(): Promise<VoiceClientToolsSnapshot>;
+  /** Subscribe to registry changes; returns an unsubscribe. */
+  onChange(listener: () => void): () => void;
+  /**
+   * Run a page tool. `autoConfirmReadOnly`: skip the confirm gate when the
+   * tool's registry entry has `annotations.readOnlyHint === true`.
+   */
+  execute(
+    name: string,
+    args: Record<string, unknown>,
+    options: { signal: AbortSignal; autoConfirmReadOnly: boolean },
+  ): Promise<VoiceClientToolOutcome>;
+  /**
+   * Start the call's fast-tier session (loads its lazy chunk): it sends
+   * `client_tools` through `channel` now and on every change, and answers
+   * the `client_tool_call` frames handed to it.
+   */
+  open(channel: VoiceClientToolsChannel): Promise<VoiceClientToolsSession>;
+}
+
+/** The call socket, as the fast-tier session sees it. */
+export type VoiceClientToolsChannel = {
+  /** Send a frame; `false` when the call (socket) is gone. */
+  send(frame: ClientToolsFrame | ClientToolResultFrame): boolean;
+  /** The server cancelled this delegation: its tool results are not sent. */
+  cancelled(delegationId: string): boolean;
+};
+
+/** A call's fast-tier session (see {@link VoiceClientTools.open}). */
+export interface VoiceClientToolsSession {
+  call(frame: Partial<ClientToolCallFrame>): void;
+  /** Abort running tool calls (of one delegation, or all); they send nothing. */
+  abort(delegationId?: string): void;
+  close(): void;
 }
 
+/**
+ * Client → server (`runtype-browser-v1`, `client_tools` capability): the page's
+ * tool set, after `session_config` and whenever its fingerprint changes. Names
+ * are the FULL names the server calls back with: `webmcp:` prefixed for
+ * `origin: 'webmcp'`, bare for `sdk`.
+ */
+export type ClientToolsFrame = {
+  type: 'client_tools';
+  /** The content fingerprint the chat path computes for the same `clientTools[]`. */
+  fingerprint: string;
+  tools: ClientToolDefinition[];
+};
+
+/** Server → client: the fast tier picked a page tool for this delegation. */
+export type ClientToolCallFrame = {
+  type: 'client_tool_call';
+  delegationId: string;
+  toolCallId: string;
+  /** `webmcp:<name>` or bare; the client accepts both. */
+  name: string;
+  arguments: Record<string, unknown>;
+  /** The `client_tools` fingerprint the call was chosen from. */
+  fingerprint: string;
+  timeoutMs: number;
+};
+
+/** Client → server: the answer to one {@link ClientToolCallFrame}. */
+export type ClientToolResultFrame = {
+  type: 'client_tool_result';
+  delegationId: string;
+  toolCallId: string;
+  status: VoiceClientToolStatus;
+  result?: unknown;
+  error?: { message: string };
+};
+
 /**
  * Extra context for an approval decision, surfaced to `onDecision` and to the
  * `approve`/`deny` callbacks passed to the `renderApproval` plugin hook.
@@ -6283,7 +6411,23 @@ export type ClientChatRequest = {
    * reads aloud: the server asks the agent for a speakable answer (the direct
    * answer first, in plain sentences). Not persisted into history.
    */
-  voice?: { spoken: true };
+  voice?: {
+    spoken: true;
+    /**
+     * Page tools the voice server already ran for this hand-back
+     * (`delegation_started.input.priorToolResults`), sent only when it carried
+     * some. The agent narrates their results instead of calling them again.
+     */
+    priorToolResults?: VoicePriorToolResult[];
+  };
+};
+
+/** A page tool call the voice server already ran, as `/v1/client/chat` takes it. */
+export type VoicePriorToolResult = {
+  toolCallId: string;
+  name: string;
+  arguments: Record<string, unknown>;
+  result: unknown;
 };
 
 /**
@@ -7085,7 +7229,8 @@ export type AgentWidgetPersistStateConfig = {
    */
   storage?: 'local' | 'session';
   /**
-   * Prefix for storage keys.
+   * Prefix for storage keys. Also scopes the default transcript key
+   * (`${keyPrefix}state` in localStorage) when no `storageAdapter` is given.
    * @default 'persona-'
    */
   keyPrefix?: string;
@@ -8233,6 +8378,8 @@ export type AgentWidgetReasoning = {
 export type AgentWidgetToolCall = {
   /** Optional approval state for activity-row status chrome. */
   approvalStatus?: "pending" | "approved" | "denied" | "timeout";
+  /** Terminal browser work whose callback was lost when the chat restarted. */
+  interrupted?: boolean;
   id: string;
   name?: string;
   status: "pending" | "running" | "complete";
@@ -8260,6 +8407,8 @@ export type AgentWidgetToolCall = {
 export type AgentWidgetApproval = {
   id: string;
   status: "pending" | "approved" | "denied" | "timeout";
+  /** A browser callback lost on restart. The approval expires with status `timeout`. */
+  interrupted?: boolean;
   agentId: string;
   executionId: string;
   toolName: string;
@@ -8384,6 +8533,13 @@ export type AgentWidgetMessage = {
    * model as conversation.
    */
   voiceCaption?: boolean;
+  /**
+   * Set on widget-generated failure notices (a failed dispatch, a rejected
+   * approval decision, a reconnect that gave up). The bubble renders in this
+   * browser only: it is never sent to the model as conversation history and
+   * never written to the storage adapter.
+   */
+  localOnly?: boolean;
   /**
    * Raw structured payload for this message (e.g., JSON action response).
    * Populated automatically when structured parsers run.

package/src/ui.restored-browser-tools.test.ts

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createAgentExperience } from "./ui";
+import { provideApprovalUi } from "./approval-ui-loader";
+import * as approvalUiEntry from "./approval-ui-entry";
+import type { AgentWidgetMessage, AgentWidgetStoredState } from "./types";
+import { createDemoHistoryProvider } from "./internal/demo-history-provider";
+
+provideApprovalUi(approvalUiEntry);
+let controller: ReturnType<typeof createAgentExperience> | undefined;
+afterEach(() => { controller?.destroy(); document.body.replaceChildren(); localStorage.clear(); vi.restoreAllMocks(); });
+
+const snapshot = (): AgentWidgetStoredState => ({
+  metadata: { custom: "retained" }, draft: { text: "My unsent proposal" },
+  messages: [
+    { id: "tool-1", role: "assistant", content: "", createdAt: "2026-01-01", sequence: 1, streaming: true, variant: "tool", agentMetadata: { executionId: "exec", awaitingLocalTool: true }, toolCall: { id: "call-1", name: "webmcp:purchase", status: "running", startedAt: 1, args: { quantity: 2 }, approvalStatus: "pending" } },
+    { id: "tool-2", role: "assistant", content: "", createdAt: "2026-01-01", sequence: 2, variant: "tool", toolCall: { id: "call-2", name: "webmcp:search", status: "complete", result: "Found two items", durationMs: 2000 } },
+    { id: "approval-webmcp-1", role: "assistant", content: "", createdAt: "2026-01-01", sequence: 3, variant: "approval", approval: { id: "webmcp-1", status: "pending", agentId: "", executionId: "", toolType: "webmcp", toolName: "webmcp:purchase", description: "Buy items", parameters: { quantity: 2 } } },
+  ] satisfies AgentWidgetMessage[],
+});
+
+for (const source of ["sync", "async", "initial", "hook"] as const) {
+  describe.each(["card", "row"] as const)(`${source} restoration (%s)`, variant => {
+    it("renders historical controls and activity as interrupted while preserving drafts", async () => {
+      const stored = snapshot();
+      const before = structuredClone(stored);
+      const mount = document.createElement("div"); document.body.appendChild(mount);
+      const fetchSpy = vi.spyOn(globalThis, "fetch");
+      controller = createAgentExperience(mount, {
+        apiUrl: "/test", launcher: { enabled: false }, webmcp: { enabled: true },
+        ...(source === "initial" ? { initialMessages: stored.messages, persistState: false } : source === "hook" ? { onStateLoaded: () => stored, persistState: false } : {
+          storageAdapter: { load: () => source === "async" ? Promise.resolve(stored) : stored, save: vi.fn(), clear: vi.fn() },
+        }),
+        features: { toolCallDisplay: { variant, grouped: true, groupedMode: "collapsible" } },
+        toolCall: { completeTextTemplate: "Finished {toolName} ~{duration}~" },
+      });
+      await vi.waitFor(() => expect(mount.textContent).toContain("chat restarted"));
+      expect(mount.querySelector('[data-action="allow"], [data-action="deny"], [data-approval-buttons]')).toBeNull();
+      expect(mount.querySelector('[data-tool-elapsed], [data-activity-state="running"], [data-activity-state="awaiting-approval"]')).toBeNull();
+      expect(mount.querySelector('[data-message-id="tool-1"]')?.textContent).toContain("Interrupted");
+      expect(mount.querySelector('[data-message-id="tool-1"]')?.textContent).not.toContain("Finished");
+      if (variant === "row") {
+        expect(mount.querySelector('[data-persona-tool-group]')?.getAttribute("data-activity-state")).toBe("interrupted");
+        expect(mount.textContent).toContain("2s");
+      }
+      if (source === "sync" || source === "async") expect(controller.getComposerState().text).toBe("My unsent proposal");
+      expect(stored).toEqual(before);
+      expect(fetchSpy).not.toHaveBeenCalled();
+    });
+  });
+}
+
+it("keeps a cardless interrupted tool visible when completed rows are removed", async () => {
+  const stored = snapshot();
+  const mount = document.createElement("div"); document.body.appendChild(mount);
+  controller = createAgentExperience(mount, {
+    launcher: { enabled: false }, persistState: false,
+    initialMessages: [stored.messages![0]],
+    features: { toolCallDisplay: { variant: "row", completedVisibility: "removed" } },
+    toolCall: { renderCollapsedSummary: ({ createElapsedElement }) => createElapsedElement() },
+  });
+  expect(mount.querySelector('[data-message-id="tool-1"]')).not.toBeNull();
+  expect(mount.querySelector('[data-tool-elapsed]')).toBeNull();
+  expect(mount.textContent).toContain("chat restarted");
+});
+
+it("supports a custom approval renderer that only handles the original statuses", () => {
+  const labels = { pending: "Waiting", approved: "Allowed", denied: "Denied", timeout: "Expired" };
+  const mount = document.createElement("div"); document.body.appendChild(mount);
+  const render = vi.fn(({ message }: { message: AgentWidgetMessage }) => {
+    const node = document.createElement("span");
+    node.textContent = message.approval ? labels[message.approval.status] : "";
+    return node;
+  });
+  controller = createAgentExperience(mount, {
+    launcher: { enabled: false }, persistState: false,
+    initialMessages: [snapshot().messages![2]],
+    plugins: [{ id: "existing-approval-renderer", renderApproval: render }],
+  });
+  expect(mount.textContent).toContain("Expired");
+  expect(render).toHaveBeenCalled();
+  expect(render.mock.calls[0][0].message.approval).toMatchObject({ status: "timeout", interrupted: true });
+});
+
+it.each(["card", "row"] as const)("loading earlier messages retires browser activity in %s display", async variant => {
+  const stored = snapshot();
+  const before = structuredClone(stored);
+  const provider = createDemoHistoryProvider();
+  const summary = { id: "restored", title: "Restored", targetId: null, preview: "", createdAt: "2026-01-01", updatedAt: "2026-01-02", messageCount: 4 };
+  vi.spyOn(provider, "prepareOpen").mockResolvedValue({ conversationId: summary.id, conversationRevision: "r1", commit: vi.fn(), discard: vi.fn() });
+  vi.spyOn(provider, "getPage").mockImplementation(async (_id, options) => ({
+    summary, conversationRevision: "r1", nextCursor: options?.cursor ? null : "older",
+    messages: options?.cursor ? stored.messages! : [{ id: "newer", role: "assistant", content: "Newer reply", createdAt: "2026-01-02" }],
+  }));
+  const mount = document.createElement("div"); document.body.appendChild(mount);
+  const fetchSpy = vi.spyOn(globalThis, "fetch");
+  controller = createAgentExperience(mount, {
+    apiUrl: "/test", launcher: { enabled: false }, persistState: false,
+    features: { history: { enabled: true, provider }, toolCallDisplay: { variant, grouped: true } },
+  });
+  await controller.openConversation(summary.id);
+  const earlier = mount.querySelector<HTMLButtonElement>("[data-persona-history-earlier]");
+  expect(earlier).not.toBeNull();
+  earlier!.click();
+  await vi.waitFor(() => expect(mount.textContent).toContain("chat restarted"));
+  expect(mount.querySelector('[data-action="allow"], [data-action="deny"], [data-tool-elapsed], [data-activity-state="running"], [data-activity-state="awaiting-approval"]')).toBeNull();
+  expect(mount.textContent).toContain("Interrupted");
+  expect(mount.textContent).toContain("Newer reply");
+  expect(stored).toEqual(before);
+  expect(fetchSpy).not.toHaveBeenCalled();
+});
+
+it.each(["button", "controller"] as const)("restored server WebMCP approval uses its transport via %s", async route => {
+  const message = snapshot().messages![2];
+  message.approval!.executionId = "durable-exec";
+  const onDecision = vi.fn(async () => undefined);
+  const mount = document.createElement("div"); document.body.appendChild(mount);
+  controller = createAgentExperience(mount, {
+    launcher: { enabled: false }, persistState: false, initialMessages: [message], approval: { onDecision },
+  });
+  expect(onDecision).not.toHaveBeenCalled();
+  if (route === "button") mount.querySelector<HTMLButtonElement>('[data-action="allow"]')!.click();
+  else await controller.resolveApproval(message.approval!.id, "approved");
+  await vi.waitFor(() => expect(onDecision).toHaveBeenCalledTimes(1));
+  expect(onDecision.mock.calls[0]).toEqual([{
+    approvalId: "webmcp-1", executionId: "durable-exec", agentId: "", toolName: "webmcp:purchase",
+  }, "approved", undefined]);
+});

package/src/ui.ts

@@ -1,3 +1,4 @@
+import { isBrowserLocalApproval } from "./utils/restored-browser-state";
 import { activityVariant, activityDuration, createActivityLifecycle, createActivityGroup } from "./components/activity-row";
 import { applyStatusIndicatorState, placeStatusIndicator } from "./utils/status-indicator";
 import { usesSessionVoice } from "./utils/voice-support";
@@ -331,7 +332,8 @@ import {
   defaultActionHandlers,
   defaultJsonActionParser
 } from "./utils/actions";
-import { createLocalStorageAdapter } from "./utils/storage";
+import { createLocalStorageAdapter, transcriptStorageKey } from "./utils/storage";
+import { isLocalOnlyMessage } from "./utils/local-only-message";
 import { createVisitorStore, type VisitorStore } from "./utils/visitor-store";
 import { loadHistoryView } from "./history-view-loader";
 import { getHistoryShellSync, loadHistoryShell, type HistoryShellModule } from "./history-shell-loader";
@@ -501,11 +503,13 @@ const ensureRecord = (value: unknown): Record<string, unknown> => {
   return { ...(value as Record<string, unknown>) };
 };
 
-const stripStreamingFromMessages = (messages: AgentWidgetMessage[]) =>
-  messages.map((message) => ({
-    ...message,
-    streaming: false
-  }));
+const messagesForStorage = (messages: AgentWidgetMessage[]) =>
+  messages
+    .filter((message) => !isLocalOnlyMessage(message))
+    .map((message) => ({
+      ...message,
+      streaming: false
+    }));
 
 type Controller = {
   update: (config: AgentWidgetConfigPatch) => void;
@@ -1064,7 +1068,12 @@ export const createAgentExperience = (
   const storageAdapter: AgentWidgetStorageAdapter | null =
     messagePersistenceDisabled
       ? null
-      : (config.storageAdapter ?? createLocalStorageAdapter());
+      : (config.storageAdapter ??
+        createLocalStorageAdapter(
+          transcriptStorageKey(
+            typeof config.persistState === "object" ? config.persistState.keyPrefix : undefined
+          )
+        ));
   const personaOwnsClientTokenRecovery =
     Boolean(config.clientToken) && typeof config.reconnectStream !== "function";
   let persistentMetadata: Record<string, unknown> = {};
@@ -3055,8 +3064,8 @@ export const createAgentExperience = (
 
     // WebMCP gate approvals resolve a local Promise the bridge is parked on
     // (no server round-trip); server-driven approvals call the API. The
-    // `toolType` marker set in `requestWebMcpApproval` discriminates the two.
-    if (approvalMessage.approval.toolType === "webmcp") {
+    // `toolType` marker and absent execution id identify browser-local gates.
+    if (isBrowserLocalApproval(approvalMessage.approval)) {
       session.resolveWebMcpApproval(messageId, decision);
     } else {
       session.resolveApproval(approvalMessage.approval, decision);
@@ -5159,7 +5168,7 @@ export const createAgentExperience = (
 
   const getMessagesForPersistence = () =>
     session
-      ? stripStreamingFromMessages(session.getMessages()).filter(msg => !(msg as any).__skipPersist)
+      ? messagesForStorage(session.getMessages()).filter(msg => !(msg as any).__skipPersist)
       : [];
 
   let storageMutationTail: Promise<void> | null = null;
@@ -5209,7 +5218,7 @@ export const createAgentExperience = (
 
     // Allow saving even if session doesn't exist yet (for metadata during init)
     const messages = messagesOverride
-      ? stripStreamingFromMessages(messagesOverride)
+      ? messagesForStorage(messagesOverride)
       : session
         ? getMessagesForPersistence()
         : [];
@@ -6239,7 +6248,8 @@ export const createAgentExperience = (
       return (
         dropCompletedToolCalls &&
         message.variant === "tool" &&
-        message.toolCall?.status === "complete"
+        message.toolCall?.status === "complete" &&
+        !message.toolCall.interrupted
       );
     };
 
@@ -6507,7 +6517,7 @@ export const createAgentExperience = (
               ?.getMessages()
               .find((m) => m.id === approvalMessageId);
             if (!live?.approval) return;
-            if (live.approval.toolType === "webmcp") {
+            if (isBrowserLocalApproval(live.approval)) {
               sessionRef.current?.resolveWebMcpApproval(live.id, decision);
             } else {
               sessionRef.current?.resolveApproval(live.approval, decision, options);
@@ -6801,7 +6811,7 @@ export const createAgentExperience = (
           // A tool call hidden by `completedVisibility: "removed"` does not
           // create a visible break in the transcript, so it should not split
           // an otherwise contiguous group.
-          if (dropCompletedToolCalls && message.toolCall.status === "complete") {
+          if (dropCompletedToolCalls && message.toolCall.status === "complete" && !message.toolCall.interrupted) {
             return;
           }
           currentGroup.push(message);
@@ -6859,10 +6869,12 @@ export const createAgentExperience = (
             id, name: `${group.length} tools`, status: active ? "running" : "complete",
             chunks: group.flatMap(item => item.toolCall?.chunks ?? []),
             success: !group.some(item => item.toolCall?.success === false),
+            interrupted: !active && group.some(item => item.toolCall?.interrupted),
           } };
           activityIds.add(id);
           activityLifecycle.observe(synthetic, "tool", toolExpansionState, config.features.toolCallDisplay);
-          const label = `${active ? "Using" : "Used"} ${group.length} tools`;
+          const label = synthetic.toolCall?.interrupted ? `${group.length} tools · Interrupted`
+            : `${active ? "Using" : "Used"} ${group.length} tools`;
           const custom = config.toolCall?.renderGroupedSummary?.({ messages: group, toolCalls: group.map(item => item.toolCall!), defaultSummary: label, config });
           const row = createActivityGroup(synthetic, config, toolExpansionState.has(id), custom ?? label);
           row.bubble.classList.add("persona-tool-group");
@@ -6888,7 +6900,9 @@ export const createAgentExperience = (
           "persona-tool-group-summary persona-text-xs persona-text-persona-muted";
         summary.id = `tool-group-summary-${group[0].id}`;
 
-        const defaultSummary = `Called ${group.length} ${group.length === 1 ? "tool" : "tools"}`;
+        const toolCount = `${group.length} ${group.length === 1 ? "tool" : "tools"}`;
+        const defaultSummary = group.some(item => item.toolCall?.interrupted)
+          ? `${toolCount} · Interrupted` : `Called ${toolCount}`;
         const renderedSummary = config.toolCall?.renderGroupedSummary?.({
           messages: group,
           toolCalls: group
@@ -13277,8 +13291,8 @@ export const createAgentExperience = (
       // Mirror the in-panel click handler: WebMCP gate bubbles resolve a local
       // Promise the bridge is parked on (no server round-trip and they carry an
       // empty executionId/agentId), so they must NOT hit the server approval
-      // API. Route by the `toolType` marker set in `requestWebMcpApproval`.
-      if (approvalMessage.approval.toolType === "webmcp") {
+      // API. Server-backed approvals retain their execution id and use the API.
+      if (isBrowserLocalApproval(approvalMessage.approval)) {
         session.resolveWebMcpApproval(approvalMessage.id, decision);
         return;
       }

package/src/utils/formatting.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { createJsonStreamParser, parseFormattedTemplate, computeReasoningElapsed } from "./formatting";
+import { createJsonStreamParser, parseFormattedTemplate, computeReasoningElapsed, computeToolElapsed } from "./formatting";
 
 describe("JSON Stream Parser", () => {
   it("should extract text field incrementally as JSON streams in", () => {
@@ -268,3 +268,11 @@ describe("computeReasoningElapsed", () => {
     expect(result).toBe("<0.1s");
   });
 });
+
+it("never invents an interrupted tool's duration, including elapsed render hooks", () => {
+  const tool = { id: "browser", status: "complete" as const, interrupted: true };
+  expect(computeToolElapsed(tool)).toBe("");
+  expect(computeToolElapsed({ ...tool, startedAt: 1 })).toBe("");
+  expect(computeToolElapsed({ ...tool, durationMs: 2000 })).toBe("2s");
+  expect(computeToolElapsed({ ...tool, startedAt: 1000, completedAt: 4000 })).toBe("3s");
+});

package/src/utils/formatting.ts

@@ -124,6 +124,10 @@ export const formatElapsedMs = (ms: number): string => {
  * Computes the current elapsed time string for a tool call.
  */
 export const computeToolElapsed = (tool: AgentWidgetToolCall): string => {
+  if (
+    tool.interrupted && tool.duration === undefined && tool.durationMs === undefined &&
+    (tool.startedAt === undefined || tool.completedAt === undefined)
+  ) return "";
   const durationMs =
     typeof tool.duration === "number"
       ? tool.duration

package/src/utils/local-only-message.ts

@@ -0,0 +1,15 @@
+import type { AgentWidgetMessage } from "../types";
+
+/** Id prefix of the bubble the durable reconnect loop posts when it gives up. */
+export const RECONNECT_FAILED_ID_PREFIX = "reconnect-failed-";
+
+/**
+ * A widget-generated notice that is shown in this browser only: never sent as
+ * conversation history and never written to the storage adapter. The id check
+ * covers reconnect-failure bubbles persisted before `localOnly` existed.
+ */
+export const isLocalOnlyMessage = (message: AgentWidgetMessage): boolean =>
+  message.localOnly === true ||
+  (message.role === "assistant" &&
+    typeof message.id === "string" &&
+    message.id.startsWith(RECONNECT_FAILED_ID_PREFIX));

package/src/utils/restored-browser-state.ts

@@ -0,0 +1,50 @@
+import type { AgentWidgetApproval, AgentWidgetMessage, AgentWidgetToolCall } from "../types";
+import { isWebMcpToolName } from "../webmcp-bridge";
+
+export const BROWSER_TOOL_INTERRUPTION =
+  "The chat restarted and this browser tool was interrupted. Request a fresh proposal to try again.";
+
+export function isBrowserLocalApproval(approval: AgentWidgetApproval): boolean {
+  return approval.toolType === "webmcp" && !approval.executionId;
+}
+
+/** History cannot restore a browser callback. Server continuations stay live. */
+export function restoreBrowserToolState(message: AgentWidgetMessage): AgentWidgetMessage {
+  const approval = message.approval;
+  // Server approvals can also name webmcp tools. An execution id identifies
+  // their durable continuation; native browser gates have no execution id.
+  const interruptedApproval = approval?.status === "pending" && isBrowserLocalApproval(approval);
+  let hasBrowserTool = false;
+  const settle = (tool: AgentWidgetToolCall): AgentWidgetToolCall => {
+    if (!tool.name || !isWebMcpToolName(tool.name)) return tool;
+    hasBrowserTool = true;
+    // Older await frames used complete for the wire step before the browser
+    // had executed anything. A recorded outcome, however, remains historical.
+    const unfinished = tool.status !== "complete" ||
+      (message.agentMetadata?.awaitingLocalTool === true &&
+        tool.result === undefined && tool.success === undefined);
+    if (!unfinished) return tool;
+    return {
+      ...tool,
+      status: "complete",
+      interrupted: true,
+      success: false,
+      error: BROWSER_TOOL_INTERRUPTION,
+      approvalStatus: tool.approvalStatus === "pending" ? "timeout" : tool.approvalStatus,
+      // Retain recorded durations and paired timestamps. Never fabricate an
+      // end timestamp or derive a duration from the time spent off the page.
+      startedAt: tool.completedAt === undefined ? undefined : tool.startedAt,
+    };
+  };
+  const toolCall = message.toolCall ? settle(message.toolCall) : undefined;
+  const tools = message.tools?.map(settle);
+  return {
+    ...message,
+    streaming: hasBrowserTool || interruptedApproval ? false : message.streaming,
+    ...(interruptedApproval ? { approval: { ...approval, status: "timeout" as const, interrupted: true } } : {}),
+    ...(toolCall ? { toolCall } : {}),
+    ...(tools ? { tools } : {}),
+    ...(hasBrowserTool && message.agentMetadata?.awaitingLocalTool
+      ? { agentMetadata: { ...message.agentMetadata, awaitingLocalTool: false } } : {}),
+  };
+}