@runtypelabs/persona 4.21.1 → 4.22.1

package/src/ui.ts

@@ -1,3 +1,4 @@
+import { usesSessionVoice } from "./utils/voice-support";
 import { escapeHtml, createMarkdownProcessorFromConfig } from "./postprocessors";
 import { resolveSanitizer } from "./utils/sanitize";
 import { stabilizeStreamingTables } from "./utils/streaming-table";
@@ -61,7 +62,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 +284,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";
@@ -3271,7 +3273,7 @@ export const createAgentExperience = (
 
     removeAskUserQuestionSheet(askUserOverlay, toolCallId);
 
-    // Branch: LOCAL-tool pause (step_await) resumes via /resume with structured
+    // Branch: LOCAL-tool pause (await) resumes via /resume with structured
     // toolOutputs; legacy path sends as a plain user message.
     const sourceMessage = sessionRef.current
       .getMessages()
@@ -5244,7 +5246,7 @@ export const createAgentExperience = (
       setTimeout(() => {
         if (!voiceState.active) {
           voiceState.manuallyDeactivated = false;
-          if (config.voiceRecognition?.provider?.type === 'runtype') {
+          if (usesSessionVoice(config.voiceRecognition?.provider)) {
             session.toggleVoice().then(() => {
               voiceState.active = session.isVoiceActive();
               emitVoiceState("restore");
@@ -6297,18 +6299,44 @@ 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;
+    };
 
-    messages.forEach((message) => {
+    // `toolCallDisplay.completedVisibility: "removed"`: same mechanism as
+    // reasoning removal, no threshold variant.
+    const dropCompletedToolCalls =
+      config.features?.toolCallDisplay?.completedVisibility === "removed";
+    /** A finished reasoning/tool row that `completedVisibility` removes from the transcript. */
+    const isDroppedCompletedRow = (message: AgentWidgetMessage): boolean => {
       if (
-        dropCompletedReasoning &&
         message.variant === "reasoning" &&
         message.reasoning?.status === "complete"
       ) {
+        return dropReasoningRow(message.reasoning);
+      }
+      return (
+        dropCompletedToolCalls &&
+        message.variant === "tool" &&
+        message.toolCall?.status === "complete"
+      );
+    };
+
+    messages.forEach((message) => {
+      if (isDroppedCompletedRow(message)) {
         return;
       }
       activeMessageIds.add(message.id);
@@ -6384,11 +6412,11 @@ export const createAgentExperience = (
       if (cachedWrapper) {
         tempContainer.appendChild(cachedWrapper.cloneNode(true));
         // Keep the overlay sheet alive only while the server is actively
-        // waiting on the user (awaitingLocalTool === true). Before step_await
+        // waiting on the user (awaitingLocalTool === true). Before await
         // fires, or after the answer resumes the flow, omit from
         // liveAskToolIds so the prune loop below removes any stale DOM sheet.
         // Guards against lingering skeleton sheets from tool_start events
-        // that never get a matching step_await (e.g. LLM-hallucinated trailing
+        // that never get a matching await (e.g. LLM-hallucinated trailing
         // ask_user_question calls at end-of-turn).
         if (
           isAskUserQuestionMessage(message) &&
@@ -6862,6 +6890,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 +6905,8 @@ export const createAgentExperience = (
         if (
           message.variant === "reasoning" &&
           (!showReasoning ||
-            (dropCompletedReasoning && message.reasoning?.status === "complete"))
+            (message.reasoning?.status === "complete" &&
+              dropReasoningRow(message.reasoning)))
         ) {
           return;
         }
@@ -6971,16 +7006,40 @@ export const createAgentExperience = (
     // Add standalone typing indicator only if streaming but no assistant message is streaming yet
     // (This shows while waiting for the stream to start)
     // Check for ANY streaming assistant message, even if empty (to avoid duplicate bubbles)
+    //
+    // Tool and reasoning rows hidden by `features.showToolCalls: false` /
+    // `features.showReasoning: false`, or removed once complete by their
+    // `completedVisibility` setting, never render, so they must not count as
+    // "the assistant is already visibly responding": otherwise the transcript
+    // goes blank for the whole tool phase. When those rows are shown, their own
+    // bubble carries the loading animation and the standalone dots stay hidden.
+    const isHiddenActivityRow = (msg: AgentWidgetMessage): boolean =>
+      (msg.variant === "tool" && !showToolCalls) ||
+      (msg.variant === "reasoning" && !showReasoning) ||
+      isDroppedCompletedRow(msg);
     const hasStreamingAssistantMessage = messages.some(
-      (msg) => msg.role === "assistant" && msg.streaming
+      (msg) => msg.role === "assistant" && msg.streaming && !isHiddenActivityRow(msg)
     );
 
     // Also check if there's a recently completed assistant message (streaming just ended)
     // This prevents flicker when the message completes but isStreaming hasn't updated yet
     // Approval-variant messages are UI controls, not content: exclude them so the typing
-    // indicator still shows while the agent resumes after approval
-    const lastMessage = messages[messages.length - 1];
-    const hasRecentAssistantResponse = lastMessage?.role === "assistant" && !lastMessage.streaming && lastMessage.variant !== "approval";
+    // indicator still shows while the agent resumes after approval. Hidden tool/reasoning
+    // rows are skipped for the same reason (the gap between a tool finishing and the
+    // model's next text would otherwise show nothing), and a hidden row *after* the
+    // last visible message means the agent has moved on to more work, so that visible
+    // message is not the turn's final response.
+    let lastVisibleIndex = messages.length - 1;
+    while (lastVisibleIndex >= 0 && isHiddenActivityRow(messages[lastVisibleIndex])) {
+      lastVisibleIndex--;
+    }
+    const lastMessage = lastVisibleIndex >= 0 ? messages[lastVisibleIndex] : undefined;
+    const hasHiddenActivityAfterLastVisible = lastVisibleIndex < messages.length - 1;
+    const hasRecentAssistantResponse =
+      lastMessage?.role === "assistant" &&
+      !lastMessage.streaming &&
+      lastMessage.variant !== "approval" &&
+      !hasHiddenActivityAfterLastVisible;
 
     if (isStreaming && messages.some((msg) => msg.role === "user") && !hasStreamingAssistantMessage && !hasRecentAssistantResponse) {
       // Get loading indicator using priority chain: plugin -> config -> default
@@ -7894,6 +7953,10 @@ export const createAgentExperience = (
   };
 
   const isComposerInputDisabled = (): boolean => composerLock.inputDisabled;
+  const isActiveSessionVoice = (): boolean =>
+    usesSessionVoice(config.voiceRecognition?.provider) &&
+    !!session && (session.isBargeInActive() ||
+      ["listening", "processing", "speaking"].includes(session.getVoiceStatus()));
   /** Any submission path is blocked; stop is not a submission. */
   const isComposerSendBlocked = (): boolean =>
     composerLock.inputDisabled || composerLock.sendDisabled;
@@ -8002,7 +8065,7 @@ export const createAgentExperience = (
         button.disabled = locked;
       });
     }
-    if (micButton) micButton.disabled = blocked;
+    if (micButton) micButton.disabled = locked || (streaming && !isActiveSessionVoice());
 
     suggestionManagers.forEach((manager) => {
       manager.elements.forEach((element) => {
@@ -8829,7 +8892,7 @@ export const createAgentExperience = (
       // per-state UI (e.g. a listening/speaking status dock). Fires for every
       // provider; the mic-button styling below is runtype-specific.
       eventBus.emit("voice:status", { status, timestamp: Date.now() });
-      if (config.voiceRecognition?.provider?.type !== 'runtype') return;
+      if (status !== 'disconnected' && !usesSessionVoice(config.voiceRecognition?.provider)) return;
 
       switch (status) {
         case 'listening':
@@ -8952,7 +9015,7 @@ export const createAgentExperience = (
   scrollSendSeeded = true;
 
   // Setup Runtype voice provider when configured (connects WebSocket for server-side STT)
-  if (config.voiceRecognition?.provider?.type === 'runtype') {
+  if (config.voiceRecognition?.enabled === true && usesSessionVoice(config.voiceRecognition.provider)) {
     try {
       session.setupVoice();
     } catch (err) {
@@ -12591,7 +12654,7 @@ export const createAgentExperience = (
     // Dictation is composition: a locked input takes none of it.
     if (isComposerInputDisabled()) return;
     // Runtype provider: use session.toggleVoice() (WebSocket-based STT)
-    if (config.voiceRecognition?.provider?.type === 'runtype') {
+    if (usesSessionVoice(config.voiceRecognition?.provider)) {
       const voiceStatus = session.getVoiceStatus();
       const interruptionMode = session.getVoiceInterruptionMode();
 
@@ -12662,7 +12725,7 @@ export const createAgentExperience = (
     // The click listener itself is registered by `wireComposerSurface`, so a
     // composer rebuild unwires it with the rest of the surface.
     destroyCallbacks.push(() => {
-      if (config.voiceRecognition?.provider?.type === 'runtype') {
+      if (usesSessionVoice(config.voiceRecognition?.provider)) {
         if (session.isVoiceActive()) session.toggleVoice();
         removeRuntypeMicStateStyles();
       } else {
@@ -12691,7 +12754,7 @@ export const createAgentExperience = (
     }
     setTimeout(() => {
       if (!voiceState.active && !voiceState.manuallyDeactivated) {
-        if (config.voiceRecognition?.provider?.type === 'runtype') {
+        if (usesSessionVoice(config.voiceRecognition?.provider)) {
           session.toggleVoice().then(() => {
             voiceState.active = session.isVoiceActive();
             emitVoiceState("auto");
@@ -14277,9 +14340,9 @@ export const createAgentExperience = (
         typeof window !== 'undefined' &&
         (typeof (window as any).webkitSpeechRecognition !== 'undefined' ||
          typeof (window as any).SpeechRecognition !== 'undefined');
-      const hasRuntypeProvider =
-        config.voiceRecognition?.provider?.type === 'runtype';
-      const hasVoiceInput = hasSpeechRecognition || hasRuntypeProvider;
+      const hasSessionProvider =
+        usesSessionVoice(config.voiceRecognition?.provider);
+      const hasVoiceInput = hasSpeechRecognition || hasSessionProvider;
 
       if (voiceRecognitionEnabled && hasVoiceInput) {
         // Create or update mic button
@@ -14312,7 +14375,7 @@ export const createAgentExperience = (
             );
 
             // Set disabled state
-            micButton.disabled = session.isStreaming();
+            micButton.disabled = isComposerInputDisabled() || (session.isStreaming() && !isActiveSessionVoice());
           }
         } else {
           // Update existing mic button with new config
@@ -14408,14 +14471,14 @@ export const createAgentExperience = (
 
           // Show and update disabled state
           micButtonWrapper.style.display = "";
-          micButton.disabled = session.isStreaming();
+          micButton.disabled = isComposerInputDisabled() || (session.isStreaming() && !isActiveSessionVoice());
         }
       } else {
         // Hide mic button
         if (micButton && micButtonWrapper) {
           micButtonWrapper.style.display = "none";
           // Stop any active recording if disabling
-          if (config.voiceRecognition?.provider?.type === 'runtype') {
+          if (usesSessionVoice(config.voiceRecognition?.provider)) {
             if (session.isVoiceActive()) session.toggleVoice();
           } else if (isRecording) {
             stopVoiceRecognition();
@@ -14984,8 +15047,8 @@ export const createAgentExperience = (
     },
     startVoiceRecognition(): boolean {
       if (session.isStreaming()) return false;
-      if (config.voiceRecognition?.provider?.type === 'runtype') {
-        if (session.isVoiceActive()) return true;
+      if (usesSessionVoice(config.voiceRecognition?.provider)) {
+        if (session.isVoiceActive() || session.isBargeInActive()) return true;
         if (!open && isPanelToggleable()) setOpenState(true, "system");
         voiceState.manuallyDeactivated = false;
         persistVoiceMetadata();
@@ -15006,9 +15069,12 @@ export const createAgentExperience = (
       return true;
     },
     stopVoiceRecognition(): boolean {
-      if (config.voiceRecognition?.provider?.type === 'runtype') {
-        if (!session.isVoiceActive()) return false;
-        session.toggleVoice().then(() => {
+      if (usesSessionVoice(config.voiceRecognition?.provider)) {
+        if (!session.isVoiceActive() && !session.isBargeInActive()) return false;
+        const stop = session.isBargeInActive()
+          ? session.deactivateBargeIn()
+          : session.toggleVoice();
+        stop.then(() => {
           voiceState.active = false;
           voiceState.manuallyDeactivated = true;
           persistVoiceMetadata();

package/src/ui.typing-indicator.test.ts

@@ -133,3 +133,219 @@ describe("standalone typing indicator bubble", () => {
     destroy();
   });
 });
+
+/**
+ * Regression coverage for hidden tool/reasoning rows. With
+ * `features.showToolCalls: false` the tool row never renders, so it must not
+ * count as "the assistant is already responding" and hide the standalone dots
+ * for the whole tool phase.
+ */
+describe("standalone typing indicator with hidden activity rows", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    if (typeof localStorage !== "undefined") localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  const mountStreaming = async (config: Record<string, unknown>) => {
+    global.fetch = vi.fn().mockImplementation(
+      () => new Promise(() => {})
+    ) as unknown as typeof fetch;
+
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      ...config,
+    } as unknown as Parameters<typeof createAgentExperience>[1]);
+
+    controller.submitMessage("hello");
+    await Promise.resolve();
+    await Promise.resolve();
+    return { mount, controller };
+  };
+
+  // The session orders by createdAt first, then by its Date.now()-based
+  // sequence, so injected rows need both stamped in the future to sort after
+  // the user message the way real stream rows do.
+  const seq = (n: number) => Date.now() + 60_000 + n;
+  const at = (n: number) => new Date(seq(n)).toISOString();
+
+  const injectTool = (
+    controller: ReturnType<typeof createAgentExperience>,
+    id: string,
+    status: "running" | "complete",
+    sequence: number
+  ) => {
+    controller.injectTestMessage({
+      type: "message",
+      message: {
+        id,
+        role: "assistant",
+        content: "",
+        createdAt: new Date(sequence).toISOString(),
+        sequence,
+        streaming: status !== "complete",
+        variant: "tool",
+        toolCall: { id, name: "lookup", status },
+      },
+    });
+  };
+
+  const injectReasoning = (
+    controller: ReturnType<typeof createAgentExperience>,
+    id: string,
+    status: "streaming" | "complete",
+    sequence: number
+  ) => {
+    controller.injectTestMessage({
+      type: "message",
+      message: {
+        id,
+        role: "assistant",
+        content: "",
+        createdAt: new Date(sequence).toISOString(),
+        sequence,
+        streaming: status !== "complete",
+        variant: "reasoning",
+        reasoning: { id, status, chunks: ["thinking"] },
+      },
+    });
+  };
+
+  const typingIndicator = (mount: HTMLElement) =>
+    mount.querySelector<HTMLElement>('[data-typing-indicator="true"]');
+
+
+  it("keeps the dots while a hidden tool call is running", async () => {
+    const { mount, controller } = await mountStreaming({
+      features: { showToolCalls: false },
+    });
+    expect(typingIndicator(mount)).not.toBeNull();
+
+    injectTool(controller, "tool-1", "running", seq(1));
+    expect(mount.querySelector(".persona-tool-bubble")).toBeNull();
+    expect(typingIndicator(mount)).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("keeps the dots after a hidden tool call completes, before the next text", async () => {
+    const { mount, controller } = await mountStreaming({
+      features: { showToolCalls: false },
+    });
+
+    injectTool(controller, "tool-1", "running", seq(1));
+    injectTool(controller, "tool-1", "complete", seq(1));
+    expect(mount.querySelector(".persona-tool-bubble")).toBeNull();
+    expect(typingIndicator(mount)).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("keeps the dots when a hidden tool call follows an intermediate assistant text", async () => {
+    const { mount, controller } = await mountStreaming({
+      features: { showToolCalls: false },
+    });
+
+    controller.injectTestMessage({
+      type: "message",
+      message: {
+        id: "text-1",
+        role: "assistant",
+        content: "Let me look that up.",
+        createdAt: at(1),
+        sequence: seq(1),
+        streaming: false,
+      },
+    });
+    injectTool(controller, "tool-1", "complete", seq(2));
+    expect(typingIndicator(mount)).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("still hides the dots while a visible tool call renders its own bubble", async () => {
+    const { mount, controller } = await mountStreaming({
+      features: { showToolCalls: true },
+    });
+
+    injectTool(controller, "tool-1", "running", seq(1));
+    expect(mount.querySelector(".persona-tool-bubble")).not.toBeNull();
+    expect(typingIndicator(mount)).toBeNull();
+
+    controller.destroy();
+  });
+
+  it("keeps the dots while hidden reasoning streams", async () => {
+    const { mount, controller } = await mountStreaming({
+      features: { showReasoning: false },
+    });
+
+    injectReasoning(controller, "reason-1", "streaming", seq(1));
+    expect(typingIndicator(mount)).not.toBeNull();
+
+    injectReasoning(controller, "reason-1", "complete", seq(1));
+    expect(typingIndicator(mount)).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("keeps the dots after a visible tool call is removed by completedVisibility", async () => {
+    const { mount, controller } = await mountStreaming({
+      features: {
+        showToolCalls: true,
+        toolCallDisplay: { completedVisibility: "removed" },
+      },
+    });
+
+    injectTool(controller, "tool-1", "running", seq(1));
+    expect(mount.querySelector(".persona-tool-bubble")).not.toBeNull();
+    expect(typingIndicator(mount)).toBeNull();
+
+    injectTool(controller, "tool-1", "complete", seq(1));
+    expect(mount.querySelector(".persona-tool-bubble")).toBeNull();
+    expect(typingIndicator(mount)).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("keeps the dots after visible reasoning is removed by completedVisibility", async () => {
+    const { mount, controller } = await mountStreaming({
+      features: {
+        showReasoning: true,
+        reasoningDisplay: { completedVisibility: "removed" },
+      },
+    });
+
+    injectReasoning(controller, "reason-1", "streaming", seq(1));
+    expect(typingIndicator(mount)).toBeNull();
+
+    injectReasoning(controller, "reason-1", "complete", seq(1));
+    expect(typingIndicator(mount)).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("hides the dots once a real assistant message is streaming", async () => {
+    const { mount, controller } = await mountStreaming({
+      features: { showToolCalls: false },
+    });
+
+    injectTool(controller, "tool-1", "complete", seq(1));
+    controller.injectTestMessage({
+      type: "message",
+      message: {
+        id: "text-1",
+        role: "assistant",
+        content: "Here you go",
+        createdAt: at(2),
+        sequence: seq(2),
+        streaming: true,
+      },
+    });
+    expect(typingIndicator(mount)).toBeNull();
+
+    controller.destroy();
+  });
+});