@circuitwall/jarela 2.4.0 → 2.5.0

package/components/agents/AgentsPanel.tsx

@@ -1,12 +1,12 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
-import { Plus, Trash2 } from "lucide-react";
+import { Bot, Plus, Trash2 } from "lucide-react";
 import type { AgentConfig, AgentConfigIn } from "@/api/types";
 import { api } from "@/api/client";
 import { useAgents } from "@/hooks/useAgents";
 import { useModels } from "@/hooks/useModels";
 import { useDeepLinkScroll } from "@/hooks/useDeepLinkScroll";
-import { Button } from "@/components/ui/Button";
+import { HeaderAction, PanelHeader } from "@/components/ui/PanelHeader";
 import { AgentEditor } from "./AgentEditor";
 import { useAppContext } from "@/contexts/AppContext";
 
@@ -100,17 +100,9 @@ export function AgentsPanel() {
   return (
     <div className="flex flex-col h-full min-h-0">
       <>
-      {/* Header */}
-      <div className="flex items-center justify-between px-3 pt-3 pb-2 shrink-0">
-        <span className="text-[11px] text-fg-faint font-medium uppercase tracking-wide">Agents</span>
-        <Button
-          onClick={() => setEditing("new")}
-          size="sm"
-          icon={<Plus size={11} />}
-        >
-          New
-        </Button>
-      </div>
+      <PanelHeader icon={<Bot size={14} />} title="Agents">
+        <HeaderAction onClick={() => setEditing("new")} icon={<Plus size={14} />} label="New" />
+      </PanelHeader>
 
       {/* List */}
       <div ref={containerRef} className="flex-1 overflow-y-auto px-2 pb-2">

package/components/chat/ChatView.tsx

@@ -17,6 +17,7 @@ import { useChatErrorReporting } from "./useChatErrorReporting";
 import { useChatQueue, type ChatQueueApi } from "./useChatQueue";
 import { useThreadCrossDeviceSync } from "./useThreadCrossDeviceSync";
 import { useThreadData } from "./useThreadData";
+import { useThreadMetadataPolling } from "./useThreadMetadataPolling";
 import { useThreadActivity } from "./useThreadActivity";
 import { useUserProfileAndAgent } from "./useUserProfileAndAgent";
 import { composerPlaceholder, finalizeRunFromServer } from "./chat-run-utils";
@@ -109,21 +110,11 @@ export function ChatView({ threadId, agentId, sessionLoading, sessionError, onMe
   const currentThreadIdRef = useRef(threadId);
   currentThreadIdRef.current = threadId;
 
-  // Auto compaction starts server-side during a run; poll so the banner shows live.
-  useEffect(() => {
-    if (!threadId || !sse.streaming) return;
-    let cancelled = false;
-    const timer = window.setInterval(() => {
-      void api.threads.get(threadId, { limit: 1 }).then((d) => {
-        if (!cancelled) applyThreadMeta(thread.metaApplier, d);
-      }).catch(() => { /* best-effort */ });
-    }, 2000);
-    return () => {
-      cancelled = true;
-      window.clearInterval(timer);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [threadId, sse.streaming]);
+  useThreadMetadataPolling(
+    threadId,
+    sse.streaming || thread.warmSummaryPending || thread.compactionPending || thread.manualCompactionPending,
+    thread.metaApplier,
+  );
 
   useThreadCrossDeviceSync({
     threadId,
@@ -262,9 +253,9 @@ export function ChatView({ threadId, agentId, sessionLoading, sessionError, onMe
         thread.metaApplier.setWarmSummaryTopics?.(parseWarmSummaryTopics(result.warm_summary_topics));
         // The compact response carries only the chat recap; channel recaps
         // (bridge, watcher, scheduled task) come with the thread metadata.
-        void api.threads.get(compactedThreadId, { limit: 1 })
+        void api.threads.metadata(compactedThreadId)
           .then((d) => { if (stillCurrent()) applyThreadMeta(thread.metaApplier, d); })
-          .catch(() => { /* best-effort */ });
+          .catch((err) => console.error("compaction metadata refresh failed", err));
       }
       notifyCompaction(result);
     } catch (err) {
@@ -296,7 +287,7 @@ export function ChatView({ threadId, agentId, sessionLoading, sessionError, onMe
   });
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex h-full min-h-0 w-full min-w-0 flex-col">
       <MessageList
         threadId={threadId}
         messages={thread.messages}

package/components/chat/InputBar.tsx

@@ -366,7 +366,7 @@ export function InputBar({ attachments, onAttachmentsChange, onSubmit, onQueue,
         )}
 
         <textarea
-          className="flex-1 resize-none bg-surface-3/60 text-fg text-sm rounded-xl px-3 py-2 border border-border/60 focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent/40 placeholder:text-fg-faint max-h-[84px] min-h-[44px] transition-colors"
+          className="flex-1 min-w-0 resize-none bg-surface-3/60 text-fg text-sm rounded-xl px-3 py-2 border border-border/60 focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent/40 placeholder:text-fg-faint max-h-[84px] min-h-[44px] transition-colors"
           ref={textareaRef}
           placeholder={placeholder ?? "Message…"}
           rows={1}

package/components/chat/MessageBubble.tsx

@@ -2040,7 +2040,7 @@ export const MessageBubble = memo(function MessageBubble({ message, attachedActi
         )}
       </div>
 
-      <div className={`flex flex-col min-w-0 ${containsImageAttachment ? "max-w-[calc(100%-2.25rem)] sm:max-w-[92%] md:max-w-[86%]" : "max-w-[88%] sm:max-w-[75%]"} ${isUser ? "items-end" : "items-start"}`}>
+      <div className={`flex flex-col min-w-0 ${!isUser ? "flex-1 items-start" : containsImageAttachment ? "max-w-[calc(100%-2.25rem)] sm:max-w-[92%] md:max-w-[86%] items-end" : "max-w-[calc(100%-2.25rem)] sm:max-w-[75%] items-end"}`}>
         {(timeLabel || messageId) && (
           <div className={`flex items-center gap-1 mb-0.5 px-1 opacity-0 group-hover:opacity-100 pointer-coarse:opacity-100 transition-opacity ${isUser ? "flex-row-reverse" : ""}`}>
             {timeLabel && (

package/components/chat/MessageList.test.tsx

@@ -4,14 +4,16 @@ import { render, screen, fireEvent, within, waitFor } from "@testing-library/rea
 import { MessageList } from "./MessageList";
 import type { Message } from "@/api/types";
 
+const renderCounts = vi.hoisted(() => new Map<string, number>());
 vi.mock("./MessageBubble", () => ({
   MessageBubble: ({ message, attachedActivity, showAvatar }: {
-    message: Pick<Message, "content">;
+    message: Pick<Message, "id" | "content">;
     attachedActivity?: { source_kind: string };
     showAvatar?: boolean;
-  }) => (
-    <div data-activity-kind={attachedActivity?.source_kind} data-show-avatar={String(showAvatar)}>{message.content}</div>
-  ),
+  }) => {
+    renderCounts.set(message.id, (renderCounts.get(message.id) ?? 0) + 1);
+    return <div data-activity-kind={attachedActivity?.source_kind} data-show-avatar={String(showAvatar)}>{message.content}</div>;
+  },
 }));
 
 vi.mock("./ToolList", () => ({
@@ -65,6 +67,45 @@ function installPointerCapture(button: HTMLButtonElement) {
 }
 
 describe("MessageList conversation focus", () => {
+  it("does not re-render historical rows as streaming tokens or thinking arrive", () => {
+    renderCounts.clear();
+    const messages = [
+      mkMessage("history1", "user", "earlier prompt", "2026-10-18T08:00:00.000Z"),
+      mkMessage("history2", "assistant", "earlier answer", "2026-10-18T08:00:01.000Z"),
+    ];
+    const { rerender } = render(
+      <MessageList messages={messages} streaming streamingContent="A" thinkingContent="thinking" />,
+    );
+    const firstCounts = messages.map((m) => renderCounts.get(m.id));
+    rerender(<MessageList messages={messages} streaming streamingContent="A longer reply" thinkingContent="more thinking" />);
+    expect(messages.map((m) => renderCounts.get(m.id))).toEqual(firstCounts);
+    expect(screen.getByText("A longer reply")).toBeTruthy();
+  });
+
+  it("updates history when a persisted message changes", () => {
+    const messages = [mkMessage("history3", "assistant", "before edit", "2026-10-18T08:00:00.000Z")];
+    const { rerender } = render(<MessageList messages={messages} />);
+    rerender(<MessageList messages={[{ ...messages[0], content: "after edit" }]} />);
+    expect(screen.getByText("after edit")).toBeTruthy();
+    expect(screen.queryByText("before edit")).toBeNull();
+  });
+
+  it("preserves historical message nodes when the context boundary moves", () => {
+    const messages = [
+      mkMessage("history4", "user", "first message", "2026-10-18T08:00:00.000Z"),
+      mkMessage("history5", "assistant", "second message", "2026-10-18T08:00:01.000Z"),
+    ];
+    const { container, rerender } = render(<MessageList messages={messages} hotSinceSeq={4} />);
+    const first = container.querySelector('[data-message-id="history4"]');
+    const second = container.querySelector('[data-message-id="history5"]');
+    rerender(<MessageList messages={messages} hotSinceSeq={5} />);
+    expect(container.querySelector('[data-message-id="history4"]')).toBe(first);
+    expect(container.querySelector('[data-message-id="history5"]')).toBe(second);
+    const boundary = container.querySelector("[data-focus-boundary='1']");
+    expect(first!.compareDocumentPosition(boundary!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(boundary!.compareDocumentPosition(second!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
   it.each([
     ["bridge", "bridge-1:chat-1", "user", "bridge", { bridge_conversation: { key: "bridge-1:chat-1" } }],
     ["scheduled_task", "task-1", "assistant", "scheduled_task", undefined],

package/components/chat/MessageList.tsx

@@ -76,8 +76,9 @@ const ALL_FILTERS_SHOWN: Record<MessageFilterKey, boolean> = Object.fromEntries(
   MESSAGE_FILTER_KEYS.map((k) => [k, true]),
 ) as Record<MessageFilterKey, boolean>;
 const NO_CHANNEL_SUMMARIES: WarmChannelSummary[] = [];
+const NOOP = () => {};
 
-export function MessageList({ threadId, messages, steeredSegments, agentConfig, userProfile, streamingContent, thinkingContent, toolEvents, hasMore, loadingMore, onLoadMore, queuedMessages, onRemoveQueued, hotSinceSeq, warmSummary, warmSummaryBeforeSeq, warmSummaryComputedAt, warmSummarySourceMessages, warmSummarySourceChars, warmSummaryTopics, warmChannelSummaries = NO_CHANNEL_SUMMARIES, warmSummaryPending = false, compactionPending = false, onSetContextPin, streaming, contextWindowTokens, onRetryMessage, filters = ALL_FILTERS_SHOWN, onToggleFilter: toggle = () => {}, onResetFilters: reset = () => {} }: Props) {
+export function MessageList({ threadId, messages, steeredSegments, agentConfig, userProfile, streamingContent, thinkingContent, toolEvents, hasMore, loadingMore, onLoadMore, queuedMessages, onRemoveQueued, hotSinceSeq, warmSummary, warmSummaryBeforeSeq, warmSummaryComputedAt, warmSummarySourceMessages, warmSummarySourceChars, warmSummaryTopics, warmChannelSummaries = NO_CHANNEL_SUMMARIES, warmSummaryPending = false, compactionPending = false, onSetContextPin, streaming, contextWindowTokens, onRetryMessage, filters = ALL_FILTERS_SHOWN, onToggleFilter: toggle = NOOP, onResetFilters: reset = NOOP }: Props) {
   const hostRef = useRef<HTMLDivElement>(null);
   const maskRegionRef = useRef<HTMLDivElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -102,7 +103,11 @@ export function MessageList({ threadId, messages, steeredSegments, agentConfig,
   const [pendingHotSinceSeq, setPendingHotSinceSeq] = useState<number | null>(null);
   const [topControlsOpen, setTopControlsOpen] = useState(false);
   const [summaryPopoverOpen, setSummaryPopoverOpen] = useState(false);
-
+  const hasStreamingContent = !!streamingContent;
+  const hasThinkingContent = !!thinkingContent;
+  const hasLiveToolEvents = !!toolEvents?.length;
+  const hidePersistedDraft = !!streaming || hasStreamingContent;
+
   const retryWorkflowStep = useMemo(
     () => onRetryMessage
       ? (request: WorkflowStepRetryRequest) => onRetryMessage(workflowStepRetryMessage(request), [])
@@ -116,7 +121,7 @@ export function MessageList({ threadId, messages, steeredSegments, agentConfig,
   // they're handled below by gating the inline ToolList / ThinkingLine.
   const visibleMessages = useMemo(() => {
     return messages.filter((m) => {
-      if (m.role === "assistant" && m.transcript_status === "in_progress" && (streaming || !!streamingContent)) return false;
+      if (m.role === "assistant" && m.transcript_status === "in_progress" && hidePersistedDraft) return false;
       const cat = m.category;
       if (!cat) return true;
       if (cat === "scheduled_task") return filters.scheduled_task;
@@ -129,7 +134,53 @@ export function MessageList({ threadId, messages, steeredSegments, agentConfig,
       // never silently drop content the server thinks should be visible.
       return true;
     });
-  }, [messages, streaming, streamingContent, filters.scheduled_task, filters.watcher, filters.bridge, filters.extension, filters.page_capture, filters.synthetic]);
+  }, [messages, hidePersistedDraft, filters.scheduled_task, filters.watcher, filters.bridge, filters.extension, filters.page_capture, filters.synthetic]);
+
+  const historyRows = useMemo(() => {
+    const attachedActivities = new Map<string, AutomationActivityMetadata>();
+    const hiddenActivityIds = new Set<string>();
+    for (let i = 0; i < visibleMessages.length - 1; i++) {
+      const activityMessage = visibleMessages[i];
+      const activity = activityMessage.metadata?.automation_activity;
+      if (!activity) continue;
+      const related = visibleMessages[i + 1];
+      const matches = !related.metadata?.automation_activity && (
+        activity.source_kind === "bridge"
+          ? related.role === "user"
+            && related.metadata?.bridge_conversation?.key === activity.source_id
+          : related.role === "assistant" && related.category === activity.source_kind
+      );
+      if (!matches) continue;
+      attachedActivities.set(related.id, activity);
+      hiddenActivityIds.add(activityMessage.id);
+    }
+    const segmentsById = new Map(steeredSegments?.map((segment) => [segment.id, segment]));
+    let previousRole: Message["role"] | null = null;
+    return visibleMessages.map((msg, i) => {
+      if (hiddenActivityIds.has(msg.id)) return null;
+      const startsTurn = previousRole == null || previousRole !== msg.role;
+      previousRole = msg.role;
+      const steeredSegment = segmentsById.get(msg.id);
+      return (
+        <HistoryRow
+          key={msg.id}
+          message={msg}
+          steeredSegment={steeredSegment}
+          segmentShowAvatar={i === 0 || visibleMessages[i - 1].role !== "assistant"}
+          attachedActivity={attachedActivities.get(msg.id)}
+          startsTurn={startsTurn}
+          separated={startsTurn && i > 0}
+          threadId={threadId ?? null}
+          agentConfig={agentConfig}
+          userProfile={userProfile}
+          showToolEvents={filters.tool_use}
+          contextWindowTokens={contextWindowTokens ?? null}
+          isLatest={i === visibleMessages.length - 1 && !hasStreamingContent}
+          onRetry={onRetryMessage}
+        />
+      );
+    });
+  }, [visibleMessages, steeredSegments, threadId, agentConfig, userProfile, filters.tool_use, contextWindowTokens, hasStreamingContent, onRetryMessage]);
 
   const hiddenCount = messages.length - visibleMessages.length;
   const effectiveHotSinceSeq = hotSinceSeq ?? null;
@@ -536,7 +587,7 @@ export function MessageList({ threadId, messages, steeredSegments, agentConfig,
   // perceive this as "chat is empty". Auto-reset once per thread snapshot so
   // content remains visible without requiring manual recovery.
   useEffect(() => {
-    if (messages.length === 0 || streamingContent) return;
+    if (messages.length === 0 || hasStreamingContent) return;
     if (visibleMessages.length > 0) return;
     if (hiddenCount !== messages.length) return;
     const lastId = messages[messages.length - 1]?.id ?? "none";
@@ -544,7 +595,7 @@ export function MessageList({ threadId, messages, steeredSegments, agentConfig,
     if (autoRecoveredRef.current === key) return;
     autoRecoveredRef.current = key;
     reset();
-  }, [threadId, messages, visibleMessages.length, hiddenCount, streamingContent, reset]);
+  }, [threadId, messages, visibleMessages.length, hiddenCount, hasStreamingContent, reset]);
 
   // Surface a category chip in the toolbar only if it can actually do
   // something useful right now: scheduled_task/bridge/synthetic chips
@@ -563,10 +614,10 @@ export function MessageList({ threadId, messages, steeredSegments, agentConfig,
       else if (m.category === "synthetic") set.add("synthetic");
       if (m.tool_events && m.tool_events.length > 0) set.add("tool_use");
     }
-    if (thinkingContent) set.add("thinking");
-    if (toolEvents && toolEvents.length > 0) set.add("tool_use");
+    if (hasThinkingContent) set.add("thinking");
+    if (hasLiveToolEvents) set.add("tool_use");
     return MESSAGE_FILTER_KEYS.filter((k) => set.has(k));
-  }, [messages, thinkingContent, toolEvents]);
+  }, [messages, hasThinkingContent, hasLiveToolEvents]);
 
   // Tracks whether the user was at the bottom on the most recent scroll event.
   // After every render, if true, we snap to bottom — which means: while the
@@ -920,30 +971,6 @@ export function MessageList({ threadId, messages, steeredSegments, agentConfig,
         // "+ N more we don't know about yet" — older pages are likely unloaded.
         const olderCountLabel = olderInVisible + (hasMore ? 1 : 0);
 
-        const attachedActivities = new Map<string, AutomationActivityMetadata>();
-        const hiddenActivityIds = new Set<string>();
-        for (let i = 0; i < visibleMessages.length - 1; i++) {
-          const activityMessage = visibleMessages[i];
-          const activity = activityMessage.metadata?.automation_activity;
-          if (!activity) continue;
-          const related = visibleMessages[i + 1];
-          const matches = !related.metadata?.automation_activity && (
-            activity.source_kind === "bridge"
-              ? related.role === "user"
-                && related.metadata?.bridge_conversation?.key === activity.source_id
-              : related.role === "assistant" && related.category === activity.source_kind
-          );
-          if (!matches) continue;
-          attachedActivities.set(related.id, activity);
-          hiddenActivityIds.add(activityMessage.id);
-        }
-        const previousVisibleRoles = new Map<string, Message["role"] | null>();
-        let previousVisibleRole: Message["role"] | null = null;
-        for (const message of visibleMessages) {
-          previousVisibleRoles.set(message.id, previousVisibleRole);
-          if (!hiddenActivityIds.has(message.id)) previousVisibleRole = message.role;
-        }
-
         const renderBoundary = (key: string) => (
           <div
             key={key}
@@ -969,54 +996,12 @@ export function MessageList({ threadId, messages, steeredSegments, agentConfig,
           </div>
         );
 
-        const nodes = visibleMessages.flatMap((msg, i) => {
-          const out = [] as React.ReactNode[];
-          if (hasBoundary && !pinAfterAll && i === boundaryIndex) {
-            out.push(renderBoundary(`boundary-${msg.id}`));
-          }
-          if (hiddenActivityIds.has(msg.id)) return out;
-          const previousRole = previousVisibleRoles.get(msg.id);
-          const startsTurn = previousRole == null || previousRole !== msg.role;
-          const steeredSegment = steeredSegments?.find((segment) => segment.id === msg.id);
-          if (steeredSegment) {
-            out.push(
-              <StreamingBubble
-                key={`steered-${steeredSegment.id}`}
-                content={steeredSegment.content}
-                threadId={threadId ?? null}
-                agentConfig={agentConfig ?? null}
-                showAvatar={i === 0 || visibleMessages[i - 1].role !== "assistant"}
-              />,
-            );
-          }
-          out.push(
-            <div
-              key={msg.id}
-              id={typeof msg.seq === "number" ? String(msg.seq) : `msg-${msg.id}`}
-              data-message-id={msg.id}
-              data-hot-candidate="1"
-              data-message-seq={msg.seq}
-              data-created-at={msg.created_at}
-              className={startsTurn && i > 0 ? "mt-3" : undefined}
-            >
-              <MessageBubble
-                message={msg}
-                attachedActivity={attachedActivities.get(msg.id)}
-                threadId={threadId ?? null}
-                agentConfig={agentConfig}
-                userProfile={userProfile}
-                showAvatar={startsTurn}
-                showToolEvents={filters.tool_use}
-                contextWindowTokens={contextWindowTokens ?? null}
-                isLatest={i === visibleMessages.length - 1 && !streamingContent}
-                onRetry={onRetryMessage}
-              />
-            </div>,
-          );
-          return out;
-        });
-        if (hasBoundary && pinAfterAll) nodes.push(renderBoundary("boundary-tail"));
-        return nodes;
+        if (!hasBoundary) return historyRows;
+        return [
+          ...historyRows.slice(0, boundaryIndex),
+          renderBoundary(pinAfterAll ? "boundary-tail" : `boundary-${visibleMessages[boundaryIndex].id}`),
+          ...historyRows.slice(boundaryIndex),
+        ];
       })()}
       <LiveTurnActivity
         thinkingContent={thinkingContent}
@@ -1225,8 +1210,8 @@ function LiveTurnActivity({
   if (!showThinking && !streamingContent && !showTools && !showDots) return null;
   return (
     <div data-testid="live-turn-activity" className="mt-1 flex w-full min-w-0 flex-col gap-1">
-      {showDots && <ThinkingDots />}
-      {showThinking && <ThinkingLine text={thinkingContent} />}
+      {showDots && <div className="min-w-0 pl-9"><ThinkingDots /></div>}
+      {showThinking && <div className="min-w-0 pl-9"><ThinkingLine text={thinkingContent} /></div>}
       {streamingContent && (
         <StreamingBubble
           content={streamingContent}
@@ -1235,16 +1220,65 @@ function LiveTurnActivity({
           showAvatar={showStreamingAvatar}
         />
       )}
-      {showTools && <ToolList events={toolEvents} />}
+      {showTools && <div className="min-w-0 pl-9"><ToolList events={toolEvents} /></div>}
     </div>
   );
 }
 
-// Streaming-bubble wrapper. Wraps the in-flight assistant bubble so the
-// `message` object passed to MessageBubble keeps a stable identity across
-// renders that don't actually change the streaming text — without this
-// the inline `{ role, content, streaming: true }` literal in the parent
-// JSX would defeat MessageBubble's React.memo on every parent re-render.
+const HistoryRow = memo(function HistoryRow({
+  message, steeredSegment, segmentShowAvatar, attachedActivity, startsTurn, separated,
+  threadId, agentConfig, userProfile, showToolEvents, contextWindowTokens, isLatest, onRetry,
+}: {
+  message: Message;
+  steeredSegment?: SteeredSegment;
+  segmentShowAvatar: boolean;
+  attachedActivity?: AutomationActivityMetadata;
+  startsTurn: boolean;
+  separated: boolean;
+  threadId: string | null;
+  agentConfig?: AgentConfig | null;
+  userProfile?: UserProfile | null;
+  showToolEvents: boolean;
+  contextWindowTokens: number | null;
+  isLatest: boolean;
+  onRetry?: Props["onRetryMessage"];
+}) {
+  return (
+    <>
+      {steeredSegment && (
+        <StreamingBubble
+          content={steeredSegment.content}
+          threadId={threadId}
+          agentConfig={agentConfig ?? null}
+          showAvatar={segmentShowAvatar}
+        />
+      )}
+      <div
+        id={typeof message.seq === "number" ? String(message.seq) : `msg-${message.id}`}
+        data-message-id={message.id}
+        data-hot-candidate="1"
+        data-message-seq={message.seq}
+        data-created-at={message.created_at}
+        className={separated ? "mt-3" : undefined}
+      >
+        <MessageBubble
+          message={message}
+          attachedActivity={attachedActivity}
+          threadId={threadId}
+          agentConfig={agentConfig}
+          userProfile={userProfile}
+          showAvatar={startsTurn}
+          showToolEvents={showToolEvents}
+          contextWindowTokens={contextWindowTokens}
+          isLatest={isLatest}
+          onRetry={onRetry}
+        />
+      </div>
+    </>
+  );
+});
+
+// Keep the synthetic message identity stable when only the parent updates.
 const StreamingBubble = memo(function StreamingBubble({
   content,
   threadId,