@runtypelabs/persona 4.21.1 → 4.22.0

package/src/components/event-stream-view.ts

@@ -32,17 +32,25 @@ function applyCustomClasses(el: HTMLElement, classes?: string): void {
 // Constants
 // ============================================================================
 
-const DEFAULT_BADGE_COLORS: Record<string, EventStreamBadgeColor> = {
-  flow_: { bg: "var(--persona-palette-colors-success-100, #dcfce7)", text: "var(--persona-palette-colors-success-700, #166534)" },
-  step_: { bg: "var(--persona-palette-colors-primary-100, #f5f5f5)", text: "var(--persona-palette-colors-primary-700, #0a0a0a)" },
-  reason_: { bg: "var(--persona-palette-colors-warning-100, #ffedd5)", text: "var(--persona-palette-colors-warning-700, #9a3412)" },
-  tool_: { bg: "var(--persona-palette-colors-purple-100, #f3e8ff)", text: "var(--persona-palette-colors-purple-700, #6b21a8)" },
-  agent_: { bg: "var(--persona-palette-colors-teal-100, #ccfbf1)", text: "var(--persona-palette-colors-teal-700, #115e59)" },
-  error: { bg: "var(--persona-palette-colors-error-100, #fecaca)", text: "var(--persona-palette-colors-error-700, #991b1b)" },
+// Badge families resolve through the theme pipeline: the aliases below are
+// materialized into every theme (light pairs in DEFAULT_COMPONENTS, dark pairs
+// in the built-in dark layer of createDarkTheme), so the chip follows the
+// active color scheme and re-resolves live on scheme toggles. The literal
+// fallbacks are the light pairs, for direct mounts outside a themed root.
+export const DEFAULT_BADGE_COLORS: Record<string, EventStreamBadgeColor> = {
+  flow_: { bg: "var(--persona-event-badge-flow-bg, #dcfce7)", text: "var(--persona-event-badge-flow-fg, #15803d)" },
+  step_: { bg: "var(--persona-event-badge-step-bg, #f5f5f5)", text: "var(--persona-event-badge-step-fg, #0a0a0a)" },
+  reasoning_: { bg: "var(--persona-event-badge-reasoning-bg, #fef9c3)", text: "var(--persona-event-badge-reasoning-fg, #a16207)" },
+  tool_: { bg: "var(--persona-event-badge-tool-bg, #f3e8ff)", text: "var(--persona-event-badge-tool-fg, #6b21a8)" },
+  agent_: { bg: "var(--persona-event-badge-agent-bg, #ccfbf1)", text: "var(--persona-event-badge-agent-fg, #115e59)" },
+  error: { bg: "var(--persona-event-badge-error-bg, #fee2e2)", text: "var(--persona-event-badge-error-fg, #b91c1c)" },
 };
+// The unified error event type is `error`; `execution_error` carries the same
+// severity and would otherwise fall through to the default pair.
+DEFAULT_BADGE_COLORS.execution_error = DEFAULT_BADGE_COLORS.error;
 const DEFAULT_BADGE_COLOR: EventStreamBadgeColor = {
-  bg: "var(--persona-palette-colors-gray-100, #f3f4f6)",
-  text: "var(--persona-palette-colors-gray-600, #4b5563)",
+  bg: "var(--persona-event-badge-default-bg, #f3f4f6)",
+  text: "var(--persona-event-badge-default-fg, #4b5563)",
 };
 
 const DEFAULT_DESCRIPTION_FIELDS = [
@@ -62,20 +70,42 @@ const UPDATE_THROTTLE_MS = 100;
 // Helper Functions
 // ============================================================================
 
-function getBadgeColor(
+function matchBadgeColor(
   eventType: string,
-  customColors?: Record<string, EventStreamBadgeColor>
-): EventStreamBadgeColor {
-  const allColors = { ...DEFAULT_BADGE_COLORS, ...customColors };
-  // Exact match first
-  if (allColors[eventType]) return allColors[eventType];
-  // Prefix match (keys ending with "_")
-  for (const prefix of Object.keys(allColors)) {
+  colors: Record<string, EventStreamBadgeColor>
+): EventStreamBadgeColor | undefined {
+  // Exact match first, then prefix match (keys ending with "_").
+  if (colors[eventType]) return colors[eventType];
+  for (const prefix of Object.keys(colors)) {
     if (prefix.endsWith("_") && eventType.startsWith(prefix)) {
-      return allColors[prefix];
+      return colors[prefix];
     }
   }
-  return DEFAULT_BADGE_COLOR;
+  return undefined;
+}
+
+export function getBadgeColor(
+  eventType: string,
+  customColors?: Record<string, EventStreamBadgeColor>
+): EventStreamBadgeColor {
+  // Host colors are a strictly higher tier than the defaults: a host prefix
+  // (e.g. `execution_`) must not be shadowed by the built-in exact
+  // `execution_error` entry, so the maps are never merged flat.
+  return (
+    (customColors && matchBadgeColor(eventType, customColors)) ??
+    matchBadgeColor(eventType, DEFAULT_BADGE_COLORS) ??
+    DEFAULT_BADGE_COLOR
+  );
+}
+
+// The chip border is its text color at ~31% alpha. The hex-suffix trick only
+// composes on a bare 6-digit hex; every other value (var() refs like the
+// defaults above, rgb(), named colors) needs color-mix or the declaration is
+// invalid and silently dropped.
+export function getBadgeBorderColor(text: string): string {
+  return /^#[0-9a-fA-F]{6}$/.test(text)
+    ? `${text}50`
+    : `color-mix(in srgb, ${text} 31%, transparent)`;
 }
 
 function formatRelativeTimestamp(ms: number, firstEventMs: number): string {
@@ -326,7 +356,7 @@ function renderEventRow(
     );
     badge.style.backgroundColor = badgeColor.bg;
     badge.style.color = badgeColor.text;
-    badge.style.borderColor = badgeColor.text + "50";
+    badge.style.borderColor = getBadgeBorderColor(badgeColor.text);
     badge.textContent = event.type;
 
     // 5. Description (extracted from payload)

package/src/generated/runtype-openapi-contract.ts

@@ -432,12 +432,14 @@ export type RuntypeStopReasonKind = NonNullable<
 >;
 
 export type RuntypeClientInitRequest = {
+  durableRecovery?: boolean;
   flowId?: string;
   identityProof?: string;
   token: string;
   visitorHistory?: boolean;
   visitorToken?: string;
 } | {
+  durableRecovery?: boolean;
   flowId?: string;
   identityProof?: string;
   sessionId: string;
@@ -446,6 +448,7 @@ export type RuntypeClientInitRequest = {
   visitorToken?: string;
 } | {
   conversationId: string;
+  durableRecovery?: boolean;
   flowId?: string;
   identityProof?: string;
   token: string;
@@ -453,6 +456,7 @@ export type RuntypeClientInitRequest = {
   visitorToken: string;
 } | {
   conversationId: string;
+  durableRecovery?: boolean;
   flowId?: string;
   identityProof: string;
   token: string;
@@ -471,6 +475,9 @@ export type RuntypeClientInitResponse = {
 };
   conversationId: string;
   conversationRevision: string;
+  durableRecovery?: {
+  enabled: boolean;
+};
   expiresAt: string;
   flow?: {
   description?: string | null;
@@ -538,6 +545,7 @@ export type RuntypeClientChatRequest = {
 export type RuntypeClientChatStreamEvent = RuntypeExecutionStreamEvent;
 
 export type RuntypeClientResumeRequest = {
+  after?: string;
   assistantMessageId?: string;
   clientTools?: Array<{
   description: string;

package/src/index-core.ts

@@ -1,5 +1,6 @@
 import {
   initAgentWidget as initAgentWidgetFn,
+  getAgentWidgetHandles as getAgentWidgetHandlesFn,
   type AgentWidgetInitHandle
 } from "./runtime/init";
 
@@ -326,6 +327,7 @@ export {
 } from "./suggest-replies-tool";
 
 export { initAgentWidgetFn as initAgentWidget };
+export { getAgentWidgetHandlesFn as getAgentWidgetHandles };
 export {
   createWidgetHostLayout,
   type WidgetHostLayout,

package/src/runtime/init.registry.test.ts

@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+
+/**
+ * `getAgentWidgetHandles()` registry: every `initAgentWidget()` mount is
+ * listed (oldest first) until its `destroy()`, so companions created after
+ * `persona:chat-ready` fired can still adopt a mounted widget.
+ */
+
+import { afterEach, describe, expect, it } from "vitest";
+
+import { getAgentWidgetHandles, initAgentWidget } from "./init";
+
+const mountHost = (id: string): HTMLElement => {
+  const host = document.createElement("div");
+  host.id = id;
+  document.body.appendChild(host);
+  return host;
+};
+
+const CONFIG = {
+  apiUrl: "https://api.example.com/chat",
+  launcher: { enabled: false },
+  persistState: false,
+};
+
+describe("getAgentWidgetHandles", () => {
+  afterEach(() => {
+    // Sweep any instances a failing assertion left behind.
+    for (const handle of getAgentWidgetHandles()) handle.destroy();
+    document.body.innerHTML = "";
+  });
+
+  it("lists mounted handles oldest-first and drops them on destroy", () => {
+    expect(getAgentWidgetHandles()).toEqual([]);
+
+    const first = initAgentWidget({ target: mountHost("reg-a"), config: CONFIG });
+    const second = initAgentWidget({ target: mountHost("reg-b"), config: CONFIG });
+
+    expect(getAgentWidgetHandles()).toEqual([first, second]);
+    expect(getAgentWidgetHandles().at(-1)).toBe(second);
+
+    second.destroy();
+    expect(getAgentWidgetHandles()).toEqual([first]);
+
+    first.destroy();
+    expect(getAgentWidgetHandles()).toEqual([]);
+  });
+
+  it("returns a copy, not the live registry", () => {
+    const handle = initAgentWidget({ target: mountHost("reg-c"), config: CONFIG });
+    const snapshot = getAgentWidgetHandles();
+    snapshot.length = 0;
+    expect(getAgentWidgetHandles()).toEqual([handle]);
+    handle.destroy();
+  });
+});

package/src/runtime/init.ts

@@ -46,6 +46,19 @@ const mountStyles = (root: ShadowRoot | HTMLElement, ownerDocument: Document) =>
 
 export type AgentWidgetInitHandle = AgentWidgetController & { host: HTMLElement };
 
+// Live handles for every mounted initAgentWidget() instance, oldest first.
+// `persona:chat-ready` is a one-shot broadcast and `windowKey` is opt-in, so
+// code that runs after a widget mounted previously had no way to reach it.
+// This registry closes that gap: late companions (selection toolbars, host
+// integrations) can adopt the most recent mount via
+// `getAgentWidgetHandles().at(-1)`. Handles deregister on destroy().
+const activeHandles: AgentWidgetInitHandle[] = [];
+
+/** Handles of all currently mounted widgets, oldest first. */
+export const getAgentWidgetHandles = (): AgentWidgetInitHandle[] => [
+  ...activeHandles,
+];
+
 export const initAgentWidget = (
   options: AgentWidgetInitOptions
 ): AgentWidgetInitHandle => {
@@ -154,6 +167,8 @@ export const initAgentWidget = (
     destroy() {
       destroyCurrentController();
       hostLayout.destroy();
+      const index = activeHandles.indexOf(handle);
+      if (index !== -1) activeHandles.splice(index, 1);
       if (options.windowKey && typeof window !== "undefined") {
         delete (window as any)[options.windowKey];
       }
@@ -175,6 +190,8 @@ export const initAgentWidget = (
     }
   }) as AgentWidgetInitHandle;
 
+  activeHandles.push(handle);
+
   if (options.windowKey && typeof window !== 'undefined') {
     (window as any)[options.windowKey] = handle;
   }

package/src/types/theme.ts

@@ -26,7 +26,11 @@ export interface ColorPalette {
   warning: ColorShade;
   error: ColorShade;
   info: ColorShade;
-  [key: string]: ColorShade;
+  /** Event-stream tool badge family. */
+  purple?: ColorShade;
+  /** Event-stream agent badge family. */
+  teal?: ColorShade;
+  [key: string]: ColorShade | undefined;
 }
 
 export interface SpacingScale {
@@ -628,6 +632,40 @@ export interface ReasoningBubbleTokens {
   shadow: string;
 }
 
+/** One event-stream badge chip: fill + text pair. The chip border derives
+ * from `foreground` at ~31% alpha. */
+export interface EventStreamBadgePairTokens {
+  background: TokenReference<'color'>;
+  foreground: TokenReference<'color'>;
+}
+
+/**
+ * Event-stream inspector badge chips (`features.eventStream`), one pair per
+ * unified event family. Materialized into every theme and emitted as
+ * `--persona-event-badge-<family>-{bg,fg}`, with scheme-appropriate defaults:
+ * light themes pair a 100-tone fill with a 700-tone text, the built-in dark
+ * layer flips to a 900-tone fill with a 300-tone text. `badge.default` colors
+ * event types no family matches.
+ */
+export interface EventStreamTokens {
+  badge: {
+    /** `flow_*` events. */
+    flow: EventStreamBadgePairTokens;
+    /** `step_*` events. */
+    step: EventStreamBadgePairTokens;
+    /** `reasoning_*` events. */
+    reasoning: EventStreamBadgePairTokens;
+    /** `tool_*` events. */
+    tool: EventStreamBadgePairTokens;
+    /** `agent_*` events. */
+    agent: EventStreamBadgePairTokens;
+    /** `error` / `execution_error` events. */
+    error: EventStreamBadgePairTokens;
+    /** Any event type no other family matches. */
+    default: EventStreamBadgePairTokens;
+  };
+}
+
 /** Scrollbar appearance shared by every scroller in the widget. */
 export interface ScrollbarTokens {
   /** Thumb color. @default semantic.colors.border */
@@ -994,6 +1032,8 @@ export interface ComponentTokens {
   attachment: AttachmentTokens;
   toolBubble: ToolBubbleTokens;
   reasoningBubble: ReasoningBubbleTokens;
+  /** Event-stream inspector badge chips. */
+  eventStream?: EventStreamTokens;
   composer: ComposerChromeTokens;
   /** Shared motion timing for composer chrome animation. */
   motion?: MotionTokens;

package/src/types.ts

@@ -826,6 +826,14 @@ export type ClientToolDefinition = {
     readOnlyHint?: boolean;
     untrustedContentHint?: boolean;
   };
+  /**
+   * 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.
+   */
+  untrustedContentHint?: boolean;
 };
 
 /**
@@ -2237,6 +2245,16 @@ export type AgentWidgetToolCallDisplayFeature = {
    * @default "stack"
    */
   groupedMode?: "stack" | "summary";
+  /**
+   * What happens to a tool call row once it completes.
+   *
+   * - `"kept"` (default): the finished row stays in the transcript.
+   * - `"removed"`: no row is rendered at all, so the transcript gap closes with
+   *   it. The tool call stays on the message and in `getMessages()`.
+   *
+   * @default "kept"
+   */
+  completedVisibility?: AgentWidgetToolCallCompletedVisibility;
   /**
    * When false, tool call bubbles show only the collapsed summary with no
    * expand/collapse toggle. Users see tool awareness without full details.
@@ -2255,6 +2273,9 @@ export type AgentWidgetToolCallDisplayFeature = {
   loadingAnimation?: AgentWidgetToolCallLoadingAnimation;
 };
 
+/** See `features.toolCallDisplay.completedVisibility`. */
+export type AgentWidgetToolCallCompletedVisibility = "kept" | "removed";
+
 export type AgentWidgetReasoningDisplayFeature = {
   /**
    * When true, active collapsed reasoning rows can render a lightweight preview block.
@@ -2300,14 +2321,30 @@ export type AgentWidgetReasoningDisplayFeature = {
    * - `"kept"` (default): the finished row stays in the transcript.
    * - `"removed"`: no row is rendered at all, so the transcript gap closes with
    *   it. The reasoning text stays on the message and in `getMessages()`.
+   * - `"removed-when-short"`: behaves as `"removed"` when the completed trace
+   *   is short (see `shortThinkThreshold`), and as `"kept"` otherwise.
    *
    * @default "kept"
    */
   completedVisibility?: AgentWidgetReasoningCompletedVisibility;
+  /**
+   * Thresholds used by `completedVisibility: "removed-when-short"` to decide
+   * whether a completed trace counts as short. Duration is checked first when
+   * the reasoning reports one; the character count is a fallback for traces
+   * with no reported duration.
+   * @default { durationMs: 15000, chars: 1200 }
+   */
+  shortThinkThreshold?: {
+    durationMs?: number;
+    chars?: number;
+  };
 };
 
 /** See `features.reasoningDisplay.completedVisibility`. */
-export type AgentWidgetReasoningCompletedVisibility = "kept" | "removed";
+export type AgentWidgetReasoningCompletedVisibility =
+  | "kept"
+  | "removed"
+  | "removed-when-short";
 
 /**
  * Reveal animation applied to assistant message text while it is streaming.

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";
@@ -6297,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;
       }
@@ -6862,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;
         }
@@ -6871,7 +6901,8 @@ export const createAgentExperience = (
         if (
           message.variant === "reasoning" &&
           (!showReasoning ||
-            (dropCompletedReasoning && message.reasoning?.status === "complete"))
+            (message.reasoning?.status === "complete" &&
+              dropReasoningRow(message.reasoning)))
         ) {
           return;
         }