@runtypelabs/persona 4.21.0 → 4.22.0

package/src/ui.reasoning-display.test.ts

@@ -25,7 +25,8 @@ const injectReasoning = (
   controller: ReturnType<typeof createAgentExperience>,
   id: string,
   status: "streaming" | "complete",
-  chunks: string[] = ["Weighing the options"]
+  chunks: string[] = ["Weighing the options"],
+  durationMs?: number
 ) => {
   controller.injectTestMessage({
     type: "message",
@@ -36,7 +37,26 @@ const injectReasoning = (
       createdAt: new Date().toISOString(),
       streaming: status !== "complete",
       variant: "reasoning",
-      reasoning: { id, status, chunks },
+      reasoning: { id, status, chunks, durationMs },
+    },
+  });
+};
+
+const injectToolCall = (
+  controller: ReturnType<typeof createAgentExperience>,
+  id: string,
+  status: "pending" | "running" | "complete"
+) => {
+  controller.injectTestMessage({
+    type: "message",
+    message: {
+      id,
+      role: "assistant",
+      content: "",
+      createdAt: new Date().toISOString(),
+      streaming: status !== "complete",
+      variant: "tool",
+      toolCall: { id, name: "search", status, chunks: [] },
     },
   });
 };
@@ -161,4 +181,118 @@ describe("features.reasoningDisplay.completedVisibility", () => {
         ?.chunks
     ).toEqual(["Weighing the options"]);
   });
+
+  it('"removed-when-short" drops a completed trace with a short reported duration', () => {
+    const { mount, controller } = makeController({
+      features: { reasoningDisplay: { completedVisibility: "removed-when-short" } },
+    });
+    injectReasoning(controller, "r1", "complete", ["Weighing the options"], 5_000);
+    expect(rowOf(mount, "r1")).toBeNull();
+  });
+
+  it('"removed-when-short" keeps a completed trace with a long reported duration', () => {
+    const { mount, controller } = makeController({
+      features: { reasoningDisplay: { completedVisibility: "removed-when-short" } },
+    });
+    injectReasoning(controller, "r1", "complete", ["Weighing the options"], 20_000);
+    expect(rowOf(mount, "r1")).not.toBeNull();
+  });
+
+  it('"removed-when-short" drops a completed trace with no duration and few chars', () => {
+    const { mount, controller } = makeController({
+      features: { reasoningDisplay: { completedVisibility: "removed-when-short" } },
+    });
+    injectReasoning(controller, "r1", "complete", ["Short thought"]);
+    expect(rowOf(mount, "r1")).toBeNull();
+  });
+
+  it('"removed-when-short" keeps a completed trace with no duration and many chars', () => {
+    const { mount, controller } = makeController({
+      features: { reasoningDisplay: { completedVisibility: "removed-when-short" } },
+    });
+    injectReasoning(controller, "r1", "complete", ["x".repeat(1_500)]);
+    expect(rowOf(mount, "r1")).not.toBeNull();
+  });
+
+  it('"removed-when-short" honors custom duration and char thresholds', () => {
+    const { mount, controller } = makeController({
+      features: {
+        reasoningDisplay: {
+          completedVisibility: "removed-when-short",
+          shortThinkThreshold: { durationMs: 1_000, chars: 50 },
+        },
+      },
+    });
+    // 5s exceeds the custom 1s threshold, so this long-by-default trace is kept.
+    injectReasoning(controller, "r1", "complete", ["Weighing the options"], 5_000);
+    expect(rowOf(mount, "r1")).not.toBeNull();
+
+    // 60 chars exceeds the custom 50-char threshold, so this trace is kept too.
+    injectReasoning(controller, "r2", "complete", ["y".repeat(60)]);
+    expect(rowOf(mount, "r2")).not.toBeNull();
+
+    // Under both custom thresholds, so this trace is dropped.
+    injectReasoning(controller, "r3", "complete", ["z".repeat(10)], 500);
+    expect(rowOf(mount, "r3")).toBeNull();
+  });
+});
+
+describe("features.toolCallDisplay.completedVisibility", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    vi.stubGlobal("requestAnimationFrame", (cb: (time: number) => void) => {
+      cb(0);
+      return 1;
+    });
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+    window.scrollTo = vi.fn();
+  });
+
+  afterEach(() => {
+    controllers.splice(0).forEach((controller) => controller.destroy());
+    mounts.splice(0).forEach((mount) => mount.remove());
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("keeps a finished tool call row by default", () => {
+    const { mount, controller } = makeController();
+    injectToolCall(controller, "t1", "complete");
+    expect(rowOf(mount, "t1")).not.toBeNull();
+  });
+
+  it('removes the whole row under "removed", leaving no transcript gap', () => {
+    const { mount, controller } = makeController({
+      features: { toolCallDisplay: { completedVisibility: "removed" } },
+    });
+    injectToolCall(controller, "t1", "complete");
+    injectText(controller, "a1", "Here is the answer");
+
+    expect(rowOf(mount, "t1")).toBeNull();
+    const rows = mount.querySelectorAll("[data-wrapper-id]");
+    expect(Array.from(rows).map((row) => row.getAttribute("data-wrapper-id")))
+      .toEqual(["a1"]);
+  });
+
+  it('shows a running tool call under "removed" and drops it once it completes', () => {
+    const { mount, controller } = makeController({
+      features: { toolCallDisplay: { completedVisibility: "removed" } },
+    });
+    injectToolCall(controller, "t1", "running");
+    expect(rowOf(mount, "t1")).not.toBeNull();
+
+    injectToolCall(controller, "t1", "complete");
+    expect(rowOf(mount, "t1")).toBeNull();
+  });
+
+  it('keeps the tool call message in the session under "removed"', () => {
+    const { controller } = makeController({
+      features: { toolCallDisplay: { completedVisibility: "removed" } },
+    });
+    injectToolCall(controller, "t1", "complete");
+    expect(
+      controller.getMessages().find((message) => message.id === "t1")?.toolCall
+        ?.status
+    ).toEqual("complete");
+  });
 });

package/src/ui.ts

@@ -61,7 +61,8 @@ import {
   ComposerQuote,
   ComposerState,
   ComposerStreamingSubmitBehavior,
-  ComposerSubmissionSnapshot
+  ComposerSubmissionSnapshot,
+  AgentWidgetReasoning
 } from "./types";
 import { AttachmentManager, type PendingAttachment } from "./utils/attachment-manager";
 import { createComposerStore } from "./utils/composer-store";
@@ -282,7 +283,7 @@ import {
   latestAgentSuggestions,
   resolveFollowUpsFeature,
 } from "./suggest-replies-tool";
-import { formatElapsedMs } from "./utils/formatting";
+import { formatElapsedMs, isShortReasoning } from "./utils/formatting";
 import { loadApprovalUi, getApprovalUiSync, type ApprovalUiModule } from "./approval-ui-loader";
 import { getWebMcpToolDisplayTitle } from "./webmcp-bridge";
 import type { AgentWidgetPlugin } from "./plugins/types";
@@ -1054,6 +1055,8 @@ export const createAgentExperience = (
     messagePersistenceDisabled
       ? null
       : (config.storageAdapter ?? createLocalStorageAdapter());
+  const personaOwnsClientTokenRecovery =
+    Boolean(config.clientToken) && typeof config.reconnectStream !== "function";
   let persistentMetadata: Record<string, unknown> = {};
   let pendingStoredState: Promise<AgentWidgetStoredState | null> | null = null;
   // Resolves once stored state has been applied (or its load failed). Every
@@ -5313,6 +5316,17 @@ export const createAgentExperience = (
         ? getMessagesForPersistence()
         : [];
 
+    const durableHandle =
+      personaOwnsClientTokenRecovery && session?.getResumableHandle();
+    if (durableHandle) {
+      persistentMetadata = {
+        ...persistentMetadata,
+        durableResume: {
+          executionId: durableHandle.executionId,
+          after: durableHandle.lastEventId,
+        },
+      };
+    }
     const payload: AgentWidgetStoredState = {
       messages,
       metadata: persistentMetadata,
@@ -6284,17 +6298,40 @@ export const createAgentExperience = (
     /** The live editor, re-grafted into its morphed wrapper after the pass. */
     let editHydrate: { messageId: string; element: HTMLElement } | null = null;
 
-    // `reasoningDisplay.completedVisibility: "removed"`: no row for a finished
-    // trace, so the transcript gap closes with it. Checked before the row is
-    // registered, so the cached wrapper is pruned too.
-    const dropCompletedReasoning =
-      config.features?.reasoningDisplay?.completedVisibility === "removed";
+    // `reasoningDisplay.completedVisibility: "removed"` (or "removed-when-short"
+    // for a short completed trace): no row for the finished trace, so the
+    // transcript gap closes with it. Checked before the row is registered, so
+    // the cached wrapper is pruned too.
+    const reasoningCompletedVisibility =
+      config.features?.reasoningDisplay?.completedVisibility;
+    const dropReasoningRow = (reasoning: AgentWidgetReasoning): boolean => {
+      if (reasoningCompletedVisibility === "removed") return true;
+      if (reasoningCompletedVisibility === "removed-when-short") {
+        return isShortReasoning(
+          reasoning,
+          config.features?.reasoningDisplay?.shortThinkThreshold
+        );
+      }
+      return false;
+    };
+
+    // `toolCallDisplay.completedVisibility: "removed"`: same mechanism as
+    // reasoning removal, no threshold variant.
+    const dropCompletedToolCalls =
+      config.features?.toolCallDisplay?.completedVisibility === "removed";
 
     messages.forEach((message) => {
       if (
-        dropCompletedReasoning &&
         message.variant === "reasoning" &&
-        message.reasoning?.status === "complete"
+        message.reasoning?.status === "complete" &&
+        dropReasoningRow(message.reasoning)
+      ) {
+        return;
+      }
+      if (
+        dropCompletedToolCalls &&
+        message.variant === "tool" &&
+        message.toolCall?.status === "complete"
       ) {
         return;
       }
@@ -6849,6 +6886,12 @@ export const createAgentExperience = (
 
       messages.forEach((message) => {
         if (message.variant === "tool" && message.toolCall && showToolCalls) {
+          // 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") {
+            return;
+          }
           currentGroup.push(message);
           return;
         }
@@ -6858,7 +6901,8 @@ export const createAgentExperience = (
         if (
           message.variant === "reasoning" &&
           (!showReasoning ||
-            (dropCompletedReasoning && message.reasoning?.status === "complete"))
+            (message.reasoning?.status === "complete" &&
+              dropReasoningRow(message.reasoning)))
         ) {
           return;
         }
@@ -8384,8 +8428,6 @@ export const createAgentExperience = (
       ? { executionId: candidate.executionId, after: candidate.after }
       : null;
   };
-  const personaOwnsClientTokenRecovery =
-    Boolean(config.clientToken) && typeof config.reconnectStream !== "function";
   if (config.clientToken) {
     config = {
       ...config,
@@ -8498,17 +8540,11 @@ export const createAgentExperience = (
     const hostExecutionState = config.onExecutionState;
     const recoveryWindow = mount.ownerDocument.defaultView;
     let pageExitInProgress = false;
-    const markPageExit = () => {
-      pageExitInProgress = true;
-    };
-    const markPageActive = () => {
-      pageExitInProgress = false;
-    };
-    recoveryWindow?.addEventListener("beforeunload", markPageExit);
+    const markPageExit = () => (pageExitInProgress = true);
+    const markPageActive = () => (pageExitInProgress = false);
     recoveryWindow?.addEventListener("pagehide", markPageExit);
     recoveryWindow?.addEventListener("pageshow", markPageActive);
     destroyCallbacks.push(() => {
-      recoveryWindow?.removeEventListener("beforeunload", markPageExit);
       recoveryWindow?.removeEventListener("pagehide", markPageExit);
       recoveryWindow?.removeEventListener("pageshow", markPageActive);
     });
@@ -8638,6 +8674,18 @@ export const createAgentExperience = (
   let activeStreamingTextCandidate: { index: number; id: string } | null = null;
   let pendingStreamingTextMessages: AgentWidgetMessage[] | null = null;
   let streamingTextRAF: number | null = null;
+  let pendingDurablePersistenceMessages: AgentWidgetMessage[] | null = null;
+
+  const persistMessages = (messages: AgentWidgetMessage[]) => {
+    if (!personaOwnsClientTokenRecovery) return persistState(messages);
+    pendingDurablePersistenceMessages = messages;
+    queueMicrotask(() => {
+      if (pendingDurablePersistenceMessages === messages) {
+        pendingDurablePersistenceMessages = null;
+        persistState(messages);
+      }
+    });
+  };
 
   const applyMessagesChanged = (messages: AgentWidgetMessage[]) => {
     lastAppliedMessages = messages;
@@ -8698,7 +8746,7 @@ export const createAgentExperience = (
     }
 
     voiceState.lastUserMessageWasVoice = Boolean(lastUserMessage?.viaVoice);
-    persistState(messages);
+    persistMessages(messages);
     syncComposerBarPeek();
   };