@runtypelabs/persona 3.9.1 → 3.10.0

package/src/client.ts

@@ -3,6 +3,7 @@ import {
   AgentWidgetMessage,
   AgentWidgetEvent,
   AgentWidgetStreamParser,
+  AgentWidgetStreamParserResult,
   AgentWidgetContextProvider,
   AgentWidgetRequestMiddleware,
   AgentWidgetRequestPayload,
@@ -85,6 +86,40 @@ function getParserFromType(parserType?: "plain" | "json" | "regex-json" | "xml")
 
 export type SSEEventCallback = (eventType: string, payload: unknown) => void;
 
+const looksStructured = (value: string) =>
+  value.startsWith("{") || value.startsWith("[") || value.startsWith("<");
+
+/**
+ * Choose the best content source for sealed-segment reconciliation.
+ * Prefers the final structured payload from step_complete when the raw
+ * buffer is only a partial/unparseable prefix of the same structured format.
+ */
+export function preferFinalStructuredContent(
+  rawBuffer: string | undefined,
+  finalString: string
+): string {
+  if (!rawBuffer) return finalString;
+
+  const rawTrimmed = rawBuffer.trim();
+  const finalTrimmed = finalString.trim();
+  if (rawTrimmed.length === 0) return finalString;
+  if (finalTrimmed.length === 0) return rawBuffer;
+
+  const rawLooksStructured = looksStructured(rawTrimmed);
+  const finalLooksStructured = looksStructured(finalTrimmed);
+
+  if (!finalLooksStructured) return rawBuffer;
+  if (!rawLooksStructured) return finalString;
+  if (finalTrimmed === rawTrimmed) return finalString;
+  if (finalTrimmed.startsWith(rawTrimmed)) return finalString;
+
+  const rawJsonText = extractTextFromJson(rawBuffer);
+  const finalJsonText = extractTextFromJson(finalString);
+  if (finalJsonText !== null && rawJsonText === null) return finalString;
+
+  return rawBuffer;
+}
+
 export class AgentWidgetClient {
   private readonly apiUrl: string;
   private readonly headers: Record<string, string>;
@@ -1260,6 +1295,136 @@ export class AgentWidgetClient {
     const streamParsers = new Map<string, AgentWidgetStreamParser>();
     // Track accumulated raw content for structured formats (JSON, XML, etc.)
     const rawContentBuffers = new Map<string, string>();
+    // Reorder buffer for out-of-order step_delta chunks (keyed by assistant message id)
+    const seqChunkBuffers = new Map<string, Array<{ seq: number; text: string }>>();
+    // Reorder buffer for out-of-order reason_delta chunks (keyed by reasoning id)
+    const reasonSeqBuffers = new Map<string, Array<{ seq: number; text: string }>>();
+
+    /**
+     * Insert a chunk into a sequence-ordered buffer and return
+     * the full accumulated text in correct sequence order.
+     */
+    function insertSeqChunk(
+      bufferMap: Map<string, Array<{ seq: number; text: string }>>,
+      key: string,
+      seq: number,
+      text: string
+    ): string {
+      let buf = bufferMap.get(key);
+      if (!buf) {
+        buf = [];
+        bufferMap.set(key, buf);
+      }
+      // Binary-search insert to keep sorted by seq
+      let lo = 0, hi = buf.length;
+      while (lo < hi) {
+        const mid = (lo + hi) >>> 1;
+        if (buf[mid].seq < seq) lo = mid + 1;
+        else hi = mid;
+      }
+      buf.splice(lo, 0, { seq, text });
+      // Join all chunks in seq order
+      let result = "";
+      for (let i = 0; i < buf.length; i++) result += buf[i].text;
+      return result;
+    }
+
+    // Only the most-recently sealed segment is reconciled with step_complete's
+    // final response. Earlier segments rely on their own async parser microtasks
+    // resolving via the closure-captured `assistant` variable.
+    let lastSealedTextSegment: AgentWidgetMessage | null = null;
+
+    /**
+     * After text_end + didSplitByPartId, merge the authoritative final response into the
+     * sealed message when streaming left content short (e.g. async parser lag).
+     */
+    const reconcileSealedAssistantWithFinalResponse = (
+      msg: AgentWidgetMessage,
+      finalContent: unknown
+    ) => {
+      const finalString = ensureStringContent(finalContent);
+      const rawBuffer = rawContentBuffers.get(msg.id);
+      const contentToProcess = preferFinalStructuredContent(rawBuffer, finalString);
+      msg.rawContent = contentToProcess;
+      const parser = streamParsers.get(msg.id);
+
+      const mergeIfBetter = (mergedDisplay: string) => {
+        const cur = msg.content ?? "";
+        if (mergedDisplay.trim() === "") return;
+        // Only replace when empty, or when the stream left a strict prefix of the
+        // authoritative final (truncation). Do not use length alone — multi-segment
+        // flows can have a short last bubble whose content is not a prefix of the
+        // full step response.
+        if (
+          cur.trim().length === 0 ||
+          mergedDisplay.startsWith(cur) ||
+          mergedDisplay.trimStart().startsWith(cur.trim())
+        ) {
+          msg.content = mergedDisplay;
+        }
+      };
+
+      const finalizeCleanup = () => {
+        if (parser) {
+          const closeResult = parser.close?.();
+          if (closeResult instanceof Promise) closeResult.catch(() => {});
+        }
+        streamParsers.delete(msg.id);
+        rawContentBuffers.delete(msg.id);
+        msg.streaming = false;
+        emitMessage(msg);
+      };
+
+      if (!parser) {
+        mergeIfBetter(finalString);
+        finalizeCleanup();
+        return;
+      }
+
+      // Prefer JSON fast path when the final payload is JSON-shaped
+      const extractedFromJson = extractTextFromJson(contentToProcess);
+      if (extractedFromJson !== null && extractedFromJson.trim() !== "") {
+        mergeIfBetter(extractedFromJson);
+        finalizeCleanup();
+        return;
+      }
+
+      const bestDisplayText = (
+        result: AgentWidgetStreamParserResult | string | null
+      ): string => {
+        const text =
+          typeof result === "string" ? result : result?.text ?? null;
+        if (text !== null && text.trim() !== "") return text;
+        const extracted = parser.getExtractedText();
+        if (extracted !== null && extracted.trim() !== "") return extracted;
+        return finalString;
+      };
+
+      let parsedResult: ReturnType<typeof parser.processChunk>;
+      try {
+        parsedResult = parser.processChunk(contentToProcess);
+      } catch {
+        mergeIfBetter(finalString);
+        finalizeCleanup();
+        return;
+      }
+
+      if (parsedResult instanceof Promise) {
+        parsedResult
+          .then((result) => {
+            mergeIfBetter(bestDisplayText(result));
+            finalizeCleanup();
+          })
+          .catch(() => {
+            mergeIfBetter(finalString);
+            finalizeCleanup();
+          });
+        return;
+      }
+
+      mergeIfBetter(bestDisplayText(parsedResult));
+      finalizeCleanup();
+    };
 
     // Agent execution state tracking
     let agentExecution: AgentExecutionState | null = null;
@@ -1366,7 +1531,16 @@ export class AgentWidgetClient {
             payload.delta ??
             "";
           if (chunk && payload.hidden !== true) {
-            reasoningMessage.reasoning.chunks.push(String(chunk));
+            const reasonSeq = typeof payload.sequenceIndex === 'number' ? payload.sequenceIndex : undefined;
+            if (reasonSeq !== undefined) {
+              // Use reorder buffer so out-of-order chunks are assembled correctly
+              const ordered = insertSeqChunk(reasonSeqBuffers, reasoningId, reasonSeq, String(chunk));
+              // Rebuild the chunks array from the ordered concatenation.
+              // We store a single joined string to avoid duplicated / mis-ordered entries.
+              reasoningMessage.reasoning.chunks = [ordered];
+            } else {
+              reasoningMessage.reasoning.chunks.push(String(chunk));
+            }
           }
           reasoningMessage.reasoning.status = payload.done ? "complete" : "streaming";
           if (payload.done) {
@@ -1378,6 +1552,7 @@ export class AgentWidgetClient {
               0,
               (reasoningMessage.reasoning.completedAt ?? Date.now()) - start
             );
+            reasonSeqBuffers.delete(reasoningId);
           }
           reasoningMessage.streaming = reasoningMessage.reasoning.status !== "complete";
           emitMessage(reasoningMessage);
@@ -1398,6 +1573,7 @@ export class AgentWidgetClient {
               (reasoningMessage.reasoning.completedAt ?? Date.now()) - start
             );
             reasoningMessage.streaming = false;
+            reasonSeqBuffers.delete(reasoningId);
             emitMessage(reasoningMessage);
           }
           const stepKey = getStepKey(payload);
@@ -1527,6 +1703,7 @@ export class AgentWidgetClient {
             if (prev) {
               prev.streaming = false;
               emitMessage(prev);
+              lastSealedTextSegment = prev;
               assistantMessage = null;
               didSplitByPartId = true;
             }
@@ -1541,6 +1718,7 @@ export class AgentWidgetClient {
           if (prev) {
             prev.streaming = false;
             emitMessage(prev);
+            lastSealedTextSegment = prev;
             assistantMessage = null;
             didSplitByPartId = true;
           }
@@ -1561,6 +1739,7 @@ export class AgentWidgetClient {
             if (prev) {
               prev.streaming = false;
               emitMessage(prev);
+              lastSealedTextSegment = prev;
               assistantMessage = null;
               didSplitByPartId = true;
             }
@@ -1576,9 +1755,19 @@ export class AgentWidgetClient {
           // Support various field names: text, delta, content, chunk (Runtype uses 'chunk')
           const chunk = payload.text ?? payload.delta ?? payload.content ?? payload.chunk ?? "";
           if (chunk) {
-            // Accumulate raw content for structured format parsing
-            const rawBuffer = rawContentBuffers.get(assistant.id) ?? "";
-            const accumulatedRaw = rawBuffer + chunk;
+            // Check if the event carries a sequence number for reordering
+            const chunkSeq = typeof payload.seq === 'number' ? payload.seq : undefined;
+
+            // Accumulate raw content for structured format parsing.
+            // When seq is present, use the reorder buffer so out-of-order
+            // chunks are assembled in the correct server-intended order.
+            let accumulatedRaw: string;
+            if (chunkSeq !== undefined) {
+              accumulatedRaw = insertSeqChunk(seqChunkBuffers, assistant.id, chunkSeq, chunk);
+            } else {
+              const rawBuffer = rawContentBuffers.get(assistant.id) ?? "";
+              accumulatedRaw = rawBuffer + chunk;
+            }
             // Store raw content for action parsing, but NEVER set assistant.content to raw JSON
             assistant.rawContent = accumulatedRaw;
             
@@ -1601,7 +1790,13 @@ export class AgentWidgetClient {
             
             // If plain text parser, just append the chunk directly
             if (isPlainTextParser) {
-              assistant.content += chunk;
+              // When seq-ordered, rebuild from the reorder buffer;
+              // otherwise fall back to simple append.
+              if (chunkSeq !== undefined) {
+                assistant.content = accumulatedRaw;
+              } else {
+                assistant.content += chunk;
+              }
               // Clear any raw buffer/parser since we're in plain text mode
               rawContentBuffers.delete(assistant.id);
               streamParsers.delete(assistant.id);
@@ -1620,18 +1815,19 @@ export class AgentWidgetClient {
                 const text = typeof result === 'string' ? result : result?.text ?? null;
                 
                 if (text !== null && text.trim() !== "") {
-                  // Parser successfully extracted text
-                  // Update the message content with extracted text
-                  const currentAssistant = assistantMessage;
-                  if (currentAssistant && currentAssistant.id === assistant.id) {
-                    currentAssistant.content = text;
-                    emitMessage(currentAssistant);
-                  }
+                  // Parser successfully extracted text — update the chunk's assistant
+                  // (not assistantMessage; text_end may have cleared that ref before microtasks run)
+                  assistant.content = text;
+                  emitMessage(assistant);
                 } else if (!looksLikeJson && !accumulatedRaw.trim().startsWith('<')) {
                   // Not a structured format - show as plain text
                   const currentAssistant = assistantMessage;
                   if (currentAssistant && currentAssistant.id === assistant.id) {
-                    currentAssistant.content += chunk;
+                    if (chunkSeq !== undefined) {
+                      currentAssistant.content = accumulatedRaw;
+                    } else {
+                      currentAssistant.content += chunk;
+                    }
                     rawContentBuffers.delete(currentAssistant.id);
                     streamParsers.delete(currentAssistant.id);
                     currentAssistant.rawContent = undefined;
@@ -1642,7 +1838,11 @@ export class AgentWidgetClient {
                 // Don't emit message if parser hasn't extracted text yet
               }).catch(() => {
                 // On error, treat as plain text
-                assistant.content += chunk;
+                if (chunkSeq !== undefined) {
+                  assistant.content = accumulatedRaw;
+                } else {
+                  assistant.content += chunk;
+                }
                 rawContentBuffers.delete(assistant.id);
                 streamParsers.delete(assistant.id);
                 assistant.rawContent = undefined;
@@ -1660,7 +1860,11 @@ export class AgentWidgetClient {
                 emitMessage(assistant);
               } else if (!looksLikeJson && !accumulatedRaw.trim().startsWith('<')) {
                 // Not a structured format - show as plain text
-                assistant.content += chunk;
+                if (chunkSeq !== undefined) {
+                  assistant.content = accumulatedRaw;
+                } else {
+                  assistant.content += chunk;
+                }
                 // Clear any raw buffer/parser if we were in structured format mode
                 rawContentBuffers.delete(assistant.id);
                 streamParsers.delete(assistant.id);
@@ -1713,6 +1917,7 @@ export class AgentWidgetClient {
                           // Clean up
                           streamParsers.delete(currentAssistant.id);
                           rawContentBuffers.delete(currentAssistant.id);
+                          seqChunkBuffers.delete(currentAssistant.id);
                           emitMessage(currentAssistant);
                         }
                       }
@@ -1744,6 +1949,7 @@ export class AgentWidgetClient {
                   streamParsers.delete(assistant.id);
                 }
                 rawContentBuffers.delete(assistant.id);
+                seqChunkBuffers.delete(assistant.id);
                 assistant.streaming = false;
                 emitMessage(assistant);
               }
@@ -1758,17 +1964,29 @@ export class AgentWidgetClient {
             continue;
           }
           if (didSplitByPartId) {
-            // text_end already sealed the assistant message(s) — don't recreate
-            // one from step_complete's full response (would cause duplication)
+            // Sealed segment(s) — do not create a second bubble from step_complete.
+            // Merge authoritative final response into the last sealed segment (fixes async lag).
             if (assistantMessage !== null) {
               const msg: AgentWidgetMessage = assistantMessage;
               streamParsers.delete(msg.id);
               rawContentBuffers.delete(msg.id);
+              seqChunkBuffers.delete(msg.id);
               if (msg.streaming !== false) {
                 msg.streaming = false;
                 emitMessage(msg);
               }
             }
+            const splitFinalContent = payload.result?.response;
+            const sealedForReconcile = lastSealedTextSegment;
+            if (sealedForReconcile) {
+              if (splitFinalContent !== undefined && splitFinalContent !== null) {
+                reconcileSealedAssistantWithFinalResponse(sealedForReconcile, splitFinalContent);
+              } else {
+                streamParsers.delete(sealedForReconcile.id);
+                rawContentBuffers.delete(sealedForReconcile.id);
+              }
+            }
+            lastSealedTextSegment = null;
             continue;
           }
           const finalContent = payload.result?.response;
@@ -1817,6 +2035,7 @@ export class AgentWidgetClient {
                           // Clean up
                           streamParsers.delete(currentAssistant.id);
                           rawContentBuffers.delete(currentAssistant.id);
+                          seqChunkBuffers.delete(currentAssistant.id);
                           emitMessage(currentAssistant);
                         }
                       } else {
@@ -1834,6 +2053,7 @@ export class AgentWidgetClient {
                           // Clean up
                           streamParsers.delete(currentAssistant.id);
                           rawContentBuffers.delete(currentAssistant.id);
+                          seqChunkBuffers.delete(currentAssistant.id);
                           emitMessage(currentAssistant);
                         }
                       }
@@ -1881,6 +2101,7 @@ export class AgentWidgetClient {
               }
               streamParsers.delete(assistant.id);
               rawContentBuffers.delete(assistant.id);
+              seqChunkBuffers.delete(assistant.id);
               assistant.streaming = false;
               emitMessage(assistant);
             }
@@ -1888,6 +2109,7 @@ export class AgentWidgetClient {
             // No final content, just mark as complete and clean up
             streamParsers.delete(assistant.id);
             rawContentBuffers.delete(assistant.id);
+            seqChunkBuffers.delete(assistant.id);
             assistant.streaming = false;
             emitMessage(assistant);
           }
@@ -1900,6 +2122,7 @@ export class AgentWidgetClient {
               const msg: AgentWidgetMessage = assistantMessage;
               streamParsers.delete(msg.id);
               rawContentBuffers.delete(msg.id);
+              seqChunkBuffers.delete(msg.id);
               if (msg.streaming !== false) {
                 msg.streaming = false;
                 emitMessage(msg);
@@ -1926,12 +2149,9 @@ export class AgentWidgetClient {
                     // Extract text from result (could be string or object)
                     const text = typeof result === 'string' ? result : result?.text ?? null;
                     if (text !== null) {
-                      const currentAssistant = assistantMessage;
-                      if (currentAssistant && currentAssistant.id === assistant.id) {
-                        currentAssistant.content = text;
-                        currentAssistant.streaming = false;
-                        emitMessage(currentAssistant);
-                      }
+                      assistant.content = text;
+                      assistant.streaming = false;
+                      emitMessage(assistant);
                     }
                   });
                 }
@@ -1944,7 +2164,8 @@ export class AgentWidgetClient {
             // Clean up parser and buffer
             streamParsers.delete(assistant.id);
             rawContentBuffers.delete(assistant.id);
-            
+            seqChunkBuffers.delete(assistant.id);
+
             // Only emit if something actually changed to avoid flicker
             const contentChanged = displayContent !== assistant.content;
             const streamingChanged = assistant.streaming !== false;
@@ -1966,6 +2187,7 @@ export class AgentWidgetClient {
               const msg: AgentWidgetMessage = assistantMessage;
               streamParsers.delete(msg.id);
               rawContentBuffers.delete(msg.id);
+              seqChunkBuffers.delete(msg.id);
               
               // Only emit if streaming state changed
               if (msg.streaming !== false) {
@@ -2369,6 +2591,7 @@ export class AgentWidgetClient {
           assistantMessageRef.current = null;
           streamParsers.delete(id);
           rawContentBuffers.delete(id);
+          seqChunkBuffers.delete(id);
         } else if (payloadType === "error" && payload.error) {
           onEvent({
             type: "error",

package/src/components/messages.ts

@@ -21,7 +21,7 @@ export const renderMessages = (
     let bubble: HTMLElement;
     if (message.variant === "reasoning" && message.reasoning) {
       if (!showReasoning) return;
-      bubble = createReasoningBubble(message);
+      bubble = createReasoningBubble(message, config);
     } else if (message.variant === "tool" && message.toolCall) {
       if (!showToolCalls) return;
       bubble = createToolBubble(message, config);

package/src/components/reasoning-bubble.ts

@@ -1,16 +1,41 @@
 import { createElement } from "../utils/dom";
-import { AgentWidgetMessage } from "../types";
+import { AgentWidgetConfig, AgentWidgetMessage } from "../types";
 import { describeReasonStatus } from "../utils/formatting";
 import { renderLucideIcon } from "../utils/icons";
 
 // Expansion state per widget instance
 export const reasoningExpansionState = new Set<string>();
 
+const appendRenderedValue = (
+  container: HTMLElement,
+  value: HTMLElement | string | null | undefined
+): boolean => {
+  if (value == null) return false;
+  if (typeof value === "string") {
+    container.textContent = value;
+    return true;
+  }
+  container.appendChild(value);
+  return true;
+};
+
+const getReasoningPreviewText = (message: AgentWidgetMessage, maxLines: number): string => {
+  const text = message.reasoning?.chunks.join("").trim() ?? "";
+  if (!text) return "";
+  return text
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .slice(0, maxLines)
+    .join("\n");
+};
+
 // Helper function to update reasoning bubble UI after expansion state changes
 export const updateReasoningBubbleUI = (messageId: string, bubble: HTMLElement): void => {
   const expanded = reasoningExpansionState.has(messageId);
   const header = bubble.querySelector('button[data-expand-header="true"]') as HTMLElement;
   const content = bubble.querySelector('.persona-border-t') as HTMLElement;
+  const preview = bubble.querySelector('[data-persona-collapsed-preview="reasoning"]') as HTMLElement | null;
   
   if (!header || !content) return;
   
@@ -31,9 +56,14 @@ export const updateReasoningBubbleUI = (messageId: string, bubble: HTMLElement):
   }
   
   content.style.display = expanded ? "" : "none";
+  if (preview) {
+    preview.style.display = expanded
+      ? "none"
+      : ((preview.textContent || preview.childNodes.length) ? "" : "none");
+  }
 };
 
-export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement => {
+export const createReasoningBubble = (message: AgentWidgetMessage, config?: AgentWidgetConfig): HTMLElement => {
   const reasoning = message.reasoning;
   const bubble = createElement(
     "div",
@@ -61,20 +91,44 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
     return bubble;
   }
 
-  let expanded = reasoningExpansionState.has(message.id);
+  const reasoningDisplayConfig = config?.features?.reasoningDisplay ?? {};
+  const expandable = reasoningDisplayConfig.expandable !== false;
+  let expanded = expandable && reasoningExpansionState.has(message.id);
+  const isActive = reasoning.status !== "complete";
+  const previewText = getReasoningPreviewText(message, reasoningDisplayConfig.previewMaxLines ?? 3);
   const header = createElement(
     "button",
-    "persona-flex persona-w-full persona-items-center persona-justify-between persona-gap-3 persona-bg-transparent persona-px-4 persona-py-3 persona-text-left persona-cursor-pointer persona-border-none"
+    expandable
+      ? "persona-flex persona-w-full persona-items-center persona-justify-between persona-gap-3 persona-bg-transparent persona-px-4 persona-py-3 persona-text-left persona-cursor-pointer persona-border-none"
+      : "persona-flex persona-w-full persona-items-center persona-justify-between persona-gap-3 persona-bg-transparent persona-px-4 persona-py-3 persona-text-left persona-cursor-default persona-border-none"
   ) as HTMLButtonElement;
   header.type = "button";
-  header.setAttribute("aria-expanded", expanded ? "true" : "false");
-  header.setAttribute("data-expand-header", "true");
+  if (expandable) {
+    header.setAttribute("aria-expanded", expanded ? "true" : "false");
+    header.setAttribute("data-expand-header", "true");
+  }
   header.setAttribute("data-bubble-type", "reasoning");
 
   const headerContent = createElement("div", "persona-flex persona-flex-col persona-text-left");
   const title = createElement("span", "persona-text-xs persona-text-persona-primary");
-  title.textContent = "Thinking...";
-  headerContent.appendChild(title);
+  const defaultSummary = "Thinking...";
+  const customSummary = config?.reasoning?.renderCollapsedSummary?.({
+    message,
+    reasoning,
+    defaultSummary,
+    previewText,
+    isActive,
+    config: config ?? {},
+  });
+  if (typeof customSummary === "string" && customSummary.trim()) {
+    title.textContent = customSummary;
+    headerContent.appendChild(title);
+  } else if (customSummary instanceof HTMLElement) {
+    headerContent.appendChild(customSummary);
+  } else {
+    title.textContent = defaultSummary;
+    headerContent.appendChild(title);
+  }
 
   const status = createElement("span", "persona-text-xs persona-text-persona-primary");
   status.textContent = describeReasonStatus(reasoning);
@@ -86,20 +140,54 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
     title.style.display = "";
   }
 
-  const toggleIcon = createElement("div", "persona-flex persona-items-center");
-  const iconColor = "currentColor";
-  const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
-  if (chevronIcon) {
-    toggleIcon.appendChild(chevronIcon);
+  let toggleIcon: HTMLElement | null = null;
+  if (expandable) {
+    toggleIcon = createElement("div", "persona-flex persona-items-center");
+    const iconColor = "currentColor";
+    const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+    if (chevronIcon) {
+      toggleIcon.appendChild(chevronIcon);
+    } else {
+      toggleIcon.textContent = expanded ? "Hide" : "Show";
+    }
+
+    const headerMeta = createElement("div", "persona-flex persona-items-center persona-ml-auto");
+    headerMeta.append(toggleIcon);
+    header.append(headerContent, headerMeta);
   } else {
-    // Fallback to text if icon fails
-    toggleIcon.textContent = expanded ? "Hide" : "Show";
+    header.append(headerContent);
   }
 
-  const headerMeta = createElement("div", "persona-flex persona-items-center persona-ml-auto");
-  headerMeta.append(toggleIcon);
+  const collapsedPreview = createElement(
+    "div",
+    "persona-px-4 persona-py-3 persona-text-xs persona-leading-snug persona-text-persona-muted"
+  );
+  collapsedPreview.setAttribute("data-persona-collapsed-preview", "reasoning");
+  collapsedPreview.style.display = "none";
+  collapsedPreview.style.whiteSpace = "pre-wrap";
+
+  if (!expanded && isActive && reasoningDisplayConfig.activePreview && previewText) {
+    const renderedPreview = config?.reasoning?.renderCollapsedPreview?.({
+      message,
+      reasoning,
+      defaultPreview: previewText,
+      isActive,
+      config: config ?? {},
+    });
+    if (!appendRenderedValue(collapsedPreview, renderedPreview)) {
+      collapsedPreview.textContent = previewText;
+    }
+    collapsedPreview.style.display = "";
+  }
 
-  header.append(headerContent, headerMeta);
+  if (!expanded && isActive && reasoningDisplayConfig.activeMinHeight) {
+    bubble.style.minHeight = reasoningDisplayConfig.activeMinHeight;
+  }
+
+  if (!expandable) {
+    bubble.append(header, collapsedPreview);
+    return bubble;
+  }
 
   const content = createElement(
     "div",
@@ -121,22 +209,23 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
 
   const applyExpansionState = () => {
     header.setAttribute("aria-expanded", expanded ? "true" : "false");
-    // Update chevron icon
-    toggleIcon.innerHTML = "";
-    const iconColor = "currentColor";
-    const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
-    if (chevronIcon) {
-      toggleIcon.appendChild(chevronIcon);
-    } else {
-      // Fallback to text if icon fails
-      toggleIcon.textContent = expanded ? "Hide" : "Show";
+    if (toggleIcon) {
+      toggleIcon.innerHTML = "";
+      const iconColor = "currentColor";
+      const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+      if (chevronIcon) {
+        toggleIcon.appendChild(chevronIcon);
+      } else {
+        toggleIcon.textContent = expanded ? "Hide" : "Show";
+      }
     }
     content.style.display = expanded ? "" : "none";
+    collapsedPreview.style.display = expanded ? "none" : ((collapsedPreview.textContent || collapsedPreview.childNodes.length) ? "" : "none");
   };
 
   applyExpansionState();
 
-  bubble.append(header, content);
+  bubble.append(header, collapsedPreview, content);
   return bubble;
 };