@runtypelabs/persona 3.21.0 → 3.21.2

package/src/client.ts

@@ -1125,6 +1125,11 @@ export class AgentWidgetClient {
     };
 
     let assistantMessage: AgentWidgetMessage | null = null;
+    // Tracks the most recently touched assistant text message for the
+    // current agent turn so `agent_turn_complete.stopReason` can attach
+    // to the final visible text segment even after `assistantMessage`
+    // has been finalized at a tool-call boundary within the turn.
+    let lastAssistantInTurn: AgentWidgetMessage | null = null;
     // Reference to track assistant message for custom event handler
     const assistantMessageRef = { current: null as AgentWidgetMessage | null };
     // Track current partId for message segmentation at tool boundaries
@@ -2464,7 +2469,11 @@ export class AgentWidgetClient {
             }
           }
         } else if (payloadType === "agent_turn_start") {
-          // Nothing to do - turn tracking is handled by deltas
+          // Reset the per-turn assistant tracker. lastAssistantInTurn is
+          // used by agent_turn_complete to attach stopReason to the final
+          // text segment of the turn even if that segment was sealed by an
+          // intervening tool-call boundary.
+          lastAssistantInTurn = null;
         } else if (payloadType === "agent_turn_delta") {
           if (payload.contentType === 'text') {
             // Stream text to assistant message
@@ -2476,6 +2485,7 @@ export class AgentWidgetClient {
               turnId: payload.turnId,
               agentName: agentExecution?.agentName
             };
+            lastAssistantInTurn = assistant;
             emitMessage(assistant);
           } else if (payload.contentType === 'thinking') {
             // Stream thinking content to a reasoning message
@@ -2526,19 +2536,33 @@ export class AgentWidgetClient {
           // Attach the turn-level stopReason to the assistant message
           // produced by this turn. Only overwrite the current message —
           // prior turns already sealed their own stopReason via step_complete.
+          // Falls back to lastAssistantInTurn when the current bubble was
+          // sealed at a tool-call boundary mid-turn, so the notice still
+          // attaches to the final visible text segment.
           const turnStopReason = (payload as any).stopReason as
             | StopReasonKind
             | undefined;
-          if (turnStopReason && assistantMessage !== null) {
+          const stopReasonTarget = assistantMessage ?? lastAssistantInTurn;
+          if (turnStopReason && stopReasonTarget !== null) {
             const turnId = payload.turnId;
             const matchesTurn =
-              !turnId || assistantMessage.agentMetadata?.turnId === turnId;
+              !turnId || stopReasonTarget.agentMetadata?.turnId === turnId;
             if (matchesTurn) {
-              assistantMessage.stopReason = turnStopReason;
-              emitMessage(assistantMessage);
+              stopReasonTarget.stopReason = turnStopReason;
+              emitMessage(stopReasonTarget);
             }
           }
         } else if (payloadType === "agent_tool_start") {
+          // Finalize any in-flight assistant text bubble so subsequent text
+          // deltas in this turn create a NEW bubble. Without this, text
+          // emitted before AND after a tool call accumulates into one
+          // message that renders below all the tool bubbles, losing the
+          // chronological text→tool→text→tool interleaving.
+          if (assistantMessage) {
+            assistantMessage.streaming = false;
+            emitMessage(assistantMessage);
+            assistantMessage = null;
+          }
           const toolId = payload.toolCallId ?? `agent-tool-${nextSequence()}`;
           trackToolId(getToolCallKey(payload), toolId);
           const toolMessage = ensureToolMessage(toolId);

package/src/session.test.ts

@@ -642,4 +642,155 @@ describe('AgentWidgetSession.resolveAskUserQuestion', () => {
     expect(errors.length).toBe(1);
     expect(errors[0].message).toMatch(/executionId/);
   });
+
+  it('flips streaming=true BEFORE the resumeFlow fetch resolves (so the typing indicator shows during the silent gap)', async () => {
+    const awaiting = makeAwaitingMessage();
+
+    // Defer fetch resolution so we can observe state mid-await.
+    let resolveFetch!: (value: unknown) => void;
+    const fetchPromise = new Promise((res) => { resolveFetch = res; });
+    global.fetch = vi.fn().mockImplementation(() => fetchPromise);
+
+    const streamingEvents: boolean[] = [];
+    const session = new AgentWidgetSession(
+      {
+        apiUrl: 'http://localhost:43111/api/chat/dispatch',
+        initialMessages: [awaiting],
+      },
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: (s) => { streamingEvents.push(s); },
+      }
+    );
+
+    vi.spyOn(session, 'connectStream').mockResolvedValue(undefined);
+
+    // Kick off — don't await.
+    const resolvePromise = session.resolveAskUserQuestion(awaiting, 'Hobbyists');
+
+    // Yield a microtask so synchronous setup (markResolved → setStreaming(true)
+    // → message injection) runs before we observe.
+    await Promise.resolve();
+
+    expect(session.isStreaming()).toBe(true);
+    expect(streamingEvents).toEqual([true]);
+
+    // Now resolve the fetch with a body so the rest of the flow runs.
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+      start(controller) {
+        controller.enqueue(encoder.encode('data: {"type":"flow_complete","success":true}\n\n'));
+        controller.close();
+      },
+    });
+    resolveFetch({ ok: true, body: stream });
+
+    await resolvePromise;
+  });
+
+  it('flips streaming=false on the error path when resume rejects', async () => {
+    const awaiting = makeAwaitingMessage();
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 500,
+      json: async () => ({ error: 'boom' }),
+    });
+
+    const streamingEvents: boolean[] = [];
+    const errors: Error[] = [];
+    const session = new AgentWidgetSession(
+      {
+        apiUrl: 'http://localhost:43111/api/chat/dispatch',
+        initialMessages: [awaiting],
+      },
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: (s) => { streamingEvents.push(s); },
+        onError: (e) => errors.push(e),
+      }
+    );
+
+    await session.resolveAskUserQuestion(awaiting, 'Hobbyists');
+
+    expect(streamingEvents[0]).toBe(true);
+    expect(streamingEvents[streamingEvents.length - 1]).toBe(false);
+    expect(session.isStreaming()).toBe(false);
+    expect(errors.length).toBe(1);
+  });
+});
+
+describe('AgentWidgetSession.resolveApproval', () => {
+  const makeApproval = () => ({
+    id: 'approval-1',
+    status: 'pending' as const,
+    agentId: 'agent_abc',
+    executionId: 'exec_abc',
+    toolName: 'send_email',
+    description: 'Send an email',
+  });
+
+  it('flips streaming=true BEFORE the approval fetch resolves', async () => {
+    let resolveFetch!: (value: unknown) => void;
+    const fetchPromise = new Promise((res) => { resolveFetch = res; });
+    global.fetch = vi.fn().mockImplementation(() => fetchPromise);
+
+    const streamingEvents: boolean[] = [];
+    const session = new AgentWidgetSession(
+      { apiUrl: 'http://localhost:43111/api/chat/dispatch' },
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: (s) => { streamingEvents.push(s); },
+      }
+    );
+
+    vi.spyOn(session, 'connectStream').mockResolvedValue(undefined);
+
+    const resolvePromise = session.resolveApproval(makeApproval(), 'approved');
+
+    await Promise.resolve();
+
+    expect(session.isStreaming()).toBe(true);
+    expect(streamingEvents).toEqual([true]);
+
+    // Resolve with a body so the rest of the flow runs through connectStream.
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+      start(controller) {
+        controller.enqueue(encoder.encode('data: {"type":"flow_complete","success":true}\n\n'));
+        controller.close();
+      },
+    });
+    resolveFetch({ ok: true, body: stream });
+
+    await resolvePromise;
+  });
+
+  it('flips streaming=false on the error path when approval rejects', async () => {
+    // The approval response goes through `instanceof Response` checks, so
+    // a non-Response mock that "errors" needs to be modeled as a thrown fetch.
+    global.fetch = vi.fn().mockRejectedValue(new Error('network boom'));
+
+    const streamingEvents: boolean[] = [];
+    const errors: Error[] = [];
+    const session = new AgentWidgetSession(
+      { apiUrl: 'http://localhost:43111/api/chat/dispatch' },
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: (s) => { streamingEvents.push(s); },
+        onError: (e) => errors.push(e),
+      }
+    );
+
+    await session.resolveApproval(makeApproval(), 'approved');
+
+    expect(streamingEvents[0]).toBe(true);
+    expect(streamingEvents[streamingEvents.length - 1]).toBe(false);
+    expect(session.isStreaming()).toBe(false);
+    expect(errors.length).toBe(1);
+  });
 });

package/src/session.ts

@@ -908,10 +908,12 @@ export class AgentWidgetSession {
    */
   public async connectStream(
     stream: ReadableStream<Uint8Array>,
-    options?: { assistantMessageId?: string }
+    options?: { assistantMessageId?: string; allowReentry?: boolean }
   ): Promise<void> {
-    if (this.streaming) return;
-    this.abortController?.abort();
+    if (this.streaming && !options?.allowReentry) return;
+    if (!options?.allowReentry) {
+      this.abortController?.abort();
+    }
 
     // Finalize any stale streaming messages from the previous stream
     // (e.g., tool messages interrupted by approval pause)
@@ -971,6 +973,13 @@ export class AgentWidgetSession {
     };
     this.upsertMessage(updatedMessage);
 
+    // Show the standalone typing indicator immediately while we wait for the
+    // approval round-trip. Install an abortController so cancel() works during
+    // the silent gap. See `resolveAskUserQuestion` for the same pattern.
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    this.setStreaming(true);
+
     // 2. Call onDecision callback if provided, otherwise use client.resolveApproval()
     const approvalConfig = this.config.approval;
     const onDecision = approvalConfig && typeof approvalConfig === 'object' ? approvalConfig.onDecision : undefined;
@@ -1015,23 +1024,44 @@ export class AgentWidgetSession {
         }
 
         if (stream) {
-          await this.connectStream(stream);
-        } else if (decision === 'denied') {
-          // No stream body for denied — inject a denial message
-          this.appendMessage({
-            id: `denial-${approval.id}`,
-            role: "assistant",
-            content: "Tool execution was denied by user.",
-            createdAt: new Date().toISOString(),
-            streaming: false,
-            sequence: this.nextSequence(),
-          });
+          await this.connectStream(stream, { allowReentry: true });
+        } else {
+          if (decision === 'denied') {
+            // No stream body for denied — inject a denial message
+            this.appendMessage({
+              id: `denial-${approval.id}`,
+              role: "assistant",
+              content: "Tool execution was denied by user.",
+              createdAt: new Date().toISOString(),
+              streaming: false,
+              sequence: this.nextSequence(),
+            });
+          }
+          // No body to pipe — drop the pre-set streaming flag so the indicator
+          // doesn't linger forever.
+          this.setStreaming(false);
+          this.abortController = null;
         }
+      } else {
+        // onDecision returned void / no response — drop the pre-set flag.
+        this.setStreaming(false);
+        this.abortController = null;
       }
     } catch (error) {
-      this.callbacks.onError?.(
-        error instanceof Error ? error : new Error(String(error))
-      );
+      const isAbortError =
+        error instanceof Error &&
+        (error.name === 'AbortError' ||
+         error.message.includes('aborted') ||
+         error.message.includes('abort'));
+
+      this.setStreaming(false);
+      this.abortController = null;
+
+      if (!isAbortError) {
+        this.callbacks.onError?.(
+          error instanceof Error ? error : new Error(String(error))
+        );
+      }
     }
   }
 
@@ -1143,6 +1173,15 @@ export class AgentWidgetSession {
     }
     this.markAskUserQuestionResolved(toolMessage, structuredAnswers);
 
+    // Show the standalone typing indicator immediately — the network round-trip
+    // to /resume is otherwise silent, which reads as broken. The render
+    // condition in ui.ts already shows the indicator once streaming flips true
+    // and the last message is a user bubble (the answer we inject below).
+    // Install an abortController so cancel() works during this silent gap.
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    this.setStreaming(true);
+
     // Inject Q→A pair messages — one assistant bubble per question, one user
     // bubble per answer — so the transcript reads like a normal conversation.
     // The original ask_user_question tool message is suppressed by the
@@ -1214,12 +1253,30 @@ export class AgentWidgetSession {
       }
 
       if (response.body) {
-        await this.connectStream(response.body);
+        await this.connectStream(response.body, { allowReentry: true });
+      } else {
+        // No body to pipe — drop the pre-set streaming flag so the indicator
+        // doesn't linger forever.
+        this.setStreaming(false);
+        this.abortController = null;
       }
     } catch (error) {
-      this.callbacks.onError?.(
-        error instanceof Error ? error : new Error(String(error))
-      );
+      // Mirror sendMessage: a cancel() during the await aborts the controller
+      // and surfaces an AbortError — don't treat that as a real failure.
+      const isAbortError =
+        error instanceof Error &&
+        (error.name === 'AbortError' ||
+         error.message.includes('aborted') ||
+         error.message.includes('abort'));
+
+      this.setStreaming(false);
+      this.abortController = null;
+
+      if (!isAbortError) {
+        this.callbacks.onError?.(
+          error instanceof Error ? error : new Error(String(error))
+        );
+      }
     }
   }
 

package/src/ui.ask-user-question-plugin.test.ts

@@ -598,6 +598,48 @@ describe("renderAskUserQuestion plugin hook", () => {
     controller.destroy();
   });
 
+  it("shows the standalone typing indicator immediately after picking an option (resumeFlow pending)", async () => {
+    // Defer the fetch response so we observe the DOM during the silent gap
+    // between the user's pick and the next streamed token.
+    let resolveFetch!: (value: unknown) => void;
+    const fetchPromise = new Promise((res) => { resolveFetch = res; });
+    global.fetch = vi.fn().mockImplementation(() => fetchPromise) as unknown as typeof fetch;
+
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+    } as unknown as Parameters<typeof createAgentExperience>[1]);
+
+    injectAskUserQuestion(controller);
+
+    // Pre-condition: no typing indicator before the user picks.
+    expect(mount.querySelector('[data-typing-indicator="true"]')).toBeNull();
+
+    const sheet = mount.querySelector<HTMLElement>("[data-persona-ask-sheet-for]")!;
+    (sheet.querySelector('[data-option-label="Hobbyists"]') as HTMLElement).click();
+
+    // Let the synchronous setStreaming(true) + injectMessage path run through.
+    await Promise.resolve();
+    await Promise.resolve();
+
+    // The typing indicator should be visible while resumeFlow is pending.
+    expect(mount.querySelector('[data-typing-indicator="true"]')).not.toBeNull();
+
+    // Drain the pending fetch so the test doesn't leak.
+    resolveFetch({
+      ok: true,
+      body: new ReadableStream({
+        start(c) {
+          c.enqueue(new TextEncoder().encode('data: {"type":"flow_complete","success":true}\n\n'));
+          c.close();
+        },
+      }),
+    });
+
+    controller.destroy();
+  });
+
   it("wires resolve(answer) to session.resolveAskUserQuestion via /resume", async () => {
     const fetchMock = vi.fn().mockResolvedValue({
       ok: true,