@xinghunm/ai-chat 0.2.1 → 0.3.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/ai-chat/index.tsx
-import styled18 from "@emotion/styled";
+import styled17 from "@emotion/styled";
 import { ConfigProvider } from "@xinghunm/compass-ui";
 
 // src/components/ai-chat-provider/index.tsx
@@ -16,6 +16,7 @@ import { createStore } from "zustand/vanilla";
 // src/types/index.ts
 var CHAT_AGENT_MODES = ["ask", "plan", "agent"];
 var DEFAULT_CHAT_AGENT_MODE = "agent";
+var CHAT_MESSAGE_RENDER_ORDERS = ["blocks-first", "timeline"];
 var DEFAULT_AI_CHAT_LABELS = {
   sendButton: "Send",
   stopButton: "Stop",
@@ -517,7 +518,14 @@ var createDefaultChatTransport = ({
 // src/components/ai-chat-provider/index.tsx
 import { jsx } from "@emotion/react/jsx-runtime";
 var AiChatProvider = (props) => {
-  const { defaultMode, labels, renderMessageBlock, enableImageAttachments = true, children } = props;
+  const {
+    defaultMode,
+    labels,
+    renderMessageBlock,
+    messageRenderOrder,
+    enableImageAttachments = true,
+    children
+  } = props;
   const [store] = useState(
     () => createChatStore(defaultMode ? { preferredMode: defaultMode } : void 0)
   );
@@ -569,6 +577,7 @@ var AiChatProvider = (props) => {
       sendRef,
       retryRef,
       renderMessageBlock,
+      messageRenderOrder,
       transformStreamPacket: defaultTransformStreamPacket,
       enableImageAttachments
     }),
@@ -579,6 +588,7 @@ var AiChatProvider = (props) => {
       defaultTransformStreamPacket,
       enableImageAttachments,
       labels,
+      messageRenderOrder,
       renderMessageBlock,
       sendRef,
       retryRef,
@@ -590,8 +600,8 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-import { useCallback as useCallback2, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
-import styled10 from "@emotion/styled";
+import { useCallback as useCallback2, useLayoutEffect, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
+import styled9 from "@emotion/styled";
 
 // src/context/use-chat-context.ts
 import { useContext } from "react";
@@ -609,25 +619,9 @@ var useChatStore = (selector) => {
 
 // src/components/chat-thread/lib/chat-thread.ts
 var CHAT_THREAD_SCROLL_TOP_GAP = 16;
-var findLatestUserMessageId = (historyMessages) => {
-  for (let index = historyMessages.length - 1; index >= 0; index -= 1) {
-    if (historyMessages[index]?.role === "user") {
-      return historyMessages[index]?.id;
-    }
-  }
-  return void 0;
-};
-var calculateChatThreadScrollSpacerHeight = ({
-  containerClientHeight,
-  containerScrollHeight,
-  targetOffsetTop
-}) => Math.max(
-  0,
-  targetOffsetTop - CHAT_THREAD_SCROLL_TOP_GAP - (containerScrollHeight - containerClientHeight)
-);
 
 // src/components/chat-thread/components/chat-message-item.tsx
-import { Fragment, memo, useState as useState3 } from "react";
+import { Fragment, memo, useState as useState4 } from "react";
 import styled7 from "@emotion/styled";
 import { keyframes } from "@emotion/react";
 import ReactMarkdown from "react-markdown";
@@ -856,11 +850,319 @@ var useChatMessageReveal = (message) => {
   }, [batchedTargetUnitCount, displayedUnitCount, isAssistantStreaming, message.role]);
   const settledContent = isFreshBlockActive ? contentBlocks.slice(0, -1).join("\n\n") : displayedContent;
   const freshContent = isFreshBlockActive ? contentBlocks[contentBlocks.length - 1] ?? "" : "";
+  const displayedBlocks = isAssistantStreaming && contentBlocks.length > 1 ? contentBlocks.map((content, index) => ({
+    content,
+    tone: isFreshBlockActive && index === contentBlocks.length - 1 ? "fresh" : "settled"
+  })) : [
+    {
+      content: displayedContent,
+      tone: "settled"
+    }
+  ];
   return {
     isAssistantStreaming,
+    isFreshBlockActive,
     displayedContent,
     settledContent,
-    freshContent
+    freshContent,
+    displayedBlocks
+  };
+};
+
+// src/components/chat-thread/hooks/use-timeline-block-anchors.ts
+import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef3, useState as useState2 } from "react";
+
+// src/components/chat-thread/lib/chat-message-timeline.ts
+var stringifyTimelineKeyPart = (value) => {
+  if (value === null || value === void 0) {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return `[${value.map((item) => stringifyTimelineKeyPart(item)).join(",")}]`;
+  }
+  if (typeof value === "object") {
+    return `{${Object.entries(value).sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey)).map(([key, nestedValue]) => `${key}:${stringifyTimelineKeyPart(nestedValue)}`).join(",")}}`;
+  }
+  return String(value);
+};
+var getTimelineBlockKey = (block, index) => {
+  switch (block.type) {
+    case "markdown":
+      return null;
+    case "notice":
+      return `${index}:notice:${block.tone}:${block.text}`;
+    case "parameter_summary":
+      return `${index}:parameter_summary:${block.items.map((item) => `${item.label}:${item.value}:${item.fieldPath ?? ""}`).join("|")}`;
+    case "confirmation_card":
+      return `${index}:confirmation_card:${block.proposal.proposalId}`;
+    case "result_summary":
+      return `${index}:result_summary:${block.summary.taskId}:${block.summary.status}`;
+    case "questionnaire":
+      return `${index}:questionnaire:${block.questionnaire.questionnaireId}`;
+    case "custom":
+      return `${index}:custom:${block.kind}:${stringifyTimelineKeyPart(block.data)}`;
+    default:
+      return null;
+  }
+};
+var getTimelineConsumedText = (blocks) => blocks.filter(
+  (block) => block.type === "markdown"
+).map((block) => block.text).join("\n\n");
+var getTimelineTextStream = (content, blocks) => {
+  const consumedText = getTimelineConsumedText(blocks);
+  if (consumedText.length > 0 && content.startsWith(consumedText)) {
+    return content.slice(consumedText.length);
+  }
+  return content;
+};
+var buildTimelineTextDisplay = (content, isAssistantStreaming, isFreshBlockActive = isAssistantStreaming) => {
+  const contentBlocks = splitMarkdownBlocks(content);
+  const settledContent = isAssistantStreaming && isFreshBlockActive && contentBlocks.length > 1 ? contentBlocks.slice(0, -1).join("\n\n") : content;
+  const freshContent = isAssistantStreaming && isFreshBlockActive && contentBlocks.length > 1 ? contentBlocks[contentBlocks.length - 1] ?? "" : "";
+  const displayedBlocks = contentBlocks.length > 1 ? contentBlocks.map((blockContent, index) => ({
+    content: blockContent,
+    tone: isAssistantStreaming && isFreshBlockActive && freshContent && index === contentBlocks.length - 1 ? "fresh" : "settled"
+  })) : [{ content, tone: "settled" }];
+  return {
+    settledContent,
+    freshContent,
+    displayedBlocks
+  };
+};
+var getTimelineDisplayUnitCount = (content) => splitMarkdownBlocks(content).reduce((count, block) => count + Array.from(block).length, 0);
+var buildAnchoredTimelineSegments = ({
+  blocks,
+  timelineBlockAnchors,
+  timelineDisplayedBlocks,
+  visibleTimelineBlockKeys
+}) => {
+  const orderedTimelineSegments = [];
+  const totalTimelineUnits = timelineDisplayedBlocks.reduce(
+    (count, block) => count + Array.from(block.content).length,
+    0
+  );
+  let textCursor = 0;
+  const buildTextSegment = (start, end, options) => {
+    if (end <= start) {
+      return null;
+    }
+    const displayedBlocks = [];
+    let blockCursor = 0;
+    for (const block of timelineDisplayedBlocks) {
+      const blockUnits = Array.from(block.content);
+      const blockStart = blockCursor;
+      const blockEnd = blockCursor + blockUnits.length;
+      if (blockEnd <= start) {
+        blockCursor = blockEnd;
+        continue;
+      }
+      if (blockStart >= end) {
+        break;
+      }
+      const sliceStart = Math.max(0, start - blockStart);
+      const sliceEnd = Math.min(blockUnits.length, end - blockStart);
+      const slicedContent = blockUnits.slice(sliceStart, sliceEnd).join("");
+      if (slicedContent) {
+        displayedBlocks.push({
+          content: slicedContent,
+          tone: options?.forceSettled ? "settled" : block.tone
+        });
+      }
+      blockCursor = blockEnd;
+    }
+    const content = displayedBlocks.map((block) => block.content).join("\n\n");
+    if (!content) {
+      return null;
+    }
+    return {
+      type: "text",
+      content,
+      displayedBlocks,
+      useTimelineSegmentation: true
+    };
+  };
+  let trailingCutoff = totalTimelineUnits;
+  for (const [index, block] of blocks.entries()) {
+    if (block.type === "markdown") {
+      orderedTimelineSegments.push({
+        type: "markdown",
+        content: block.text
+      });
+      continue;
+    }
+    const blockKey = getTimelineBlockKey(block, index);
+    const anchor = blockKey !== null ? timelineBlockAnchors[blockKey] ?? totalTimelineUnits : totalTimelineUnits;
+    const isBlockVisible = blockKey !== null && visibleTimelineBlockKeys?.[blockKey] ? true : anchor <= totalTimelineUnits;
+    if (anchor > textCursor) {
+      const textSegment = buildTextSegment(textCursor, Math.min(anchor, totalTimelineUnits), {
+        forceSettled: isBlockVisible
+      });
+      if (textSegment) {
+        orderedTimelineSegments.push(textSegment);
+      }
+    }
+    if (!isBlockVisible) {
+      textCursor = Math.min(anchor, totalTimelineUnits);
+      trailingCutoff = Math.min(trailingCutoff, textCursor);
+      continue;
+    }
+    trailingCutoff = totalTimelineUnits;
+    orderedTimelineSegments.push({
+      type: "block",
+      block,
+      index
+    });
+    textCursor = Math.max(textCursor, anchor);
+  }
+  const trailingTextSegment = buildTextSegment(textCursor, trailingCutoff);
+  if (trailingTextSegment) {
+    orderedTimelineSegments.push(trailingTextSegment);
+  }
+  return orderedTimelineSegments;
+};
+
+// src/components/chat-thread/hooks/use-timeline-block-anchors.ts
+var useTimelineBlockAnchors = ({
+  blocks,
+  displayedTimelineTextLength,
+  isAssistantStreaming,
+  message,
+  messageRenderOrder
+}) => {
+  const [timelineBlockAnchors, setTimelineBlockAnchors] = useState2({});
+  const [visibleTimelineBlockKeys, setVisibleTimelineBlockKeys] = useState2({});
+  const currentTimelineBlockKeys = useMemo3(
+    () => blocks.map((block, index) => getTimelineBlockKey(block, index)).filter((blockKey) => Boolean(blockKey)),
+    [blocks]
+  );
+  const timelineTextStreamLength = useMemo3(
+    () => getTimelineDisplayUnitCount(getTimelineTextStream(message.content, blocks)),
+    [blocks, message.content]
+  );
+  const previousTimelineStateRef = useRef3({
+    messageId: message.id,
+    blockKeys: currentTimelineBlockKeys,
+    textLength: timelineTextStreamLength
+  });
+  const effectiveTimelineBlockAnchors = useMemo3(() => {
+    if (messageRenderOrder !== "timeline" || !isAssistantStreaming) {
+      return timelineBlockAnchors;
+    }
+    const previousTimelineState = previousTimelineStateRef.current;
+    const previousBlockKeys = new Set(previousTimelineState.blockKeys);
+    return currentTimelineBlockKeys.reduce(
+      (acc, blockKey) => {
+        const existingAnchor = timelineBlockAnchors[blockKey];
+        if (existingAnchor !== void 0) {
+          acc[blockKey] = existingAnchor;
+          return acc;
+        }
+        if (!previousBlockKeys.has(blockKey)) {
+          acc[blockKey] = timelineTextStreamLength;
+        }
+        return acc;
+      },
+      { ...timelineBlockAnchors }
+    );
+  }, [
+    currentTimelineBlockKeys,
+    isAssistantStreaming,
+    messageRenderOrder,
+    timelineBlockAnchors,
+    timelineTextStreamLength
+  ]);
+  useEffect2(() => {
+    const previousTimelineState = previousTimelineStateRef.current;
+    if (previousTimelineState.messageId !== message.id) {
+      if (Object.keys(timelineBlockAnchors).length > 0) {
+        setTimelineBlockAnchors({});
+      }
+      if (Object.keys(visibleTimelineBlockKeys).length > 0) {
+        setVisibleTimelineBlockKeys({});
+      }
+      previousTimelineStateRef.current = {
+        messageId: message.id,
+        blockKeys: currentTimelineBlockKeys,
+        textLength: timelineTextStreamLength
+      };
+      return;
+    }
+    if (messageRenderOrder === "timeline" && isAssistantStreaming) {
+      const previousBlockKeys = new Set(previousTimelineState.blockKeys);
+      const nextAnchors = currentTimelineBlockKeys.reduce(
+        (acc, blockKey) => {
+          const existingAnchor = timelineBlockAnchors[blockKey];
+          if (existingAnchor !== void 0) {
+            acc[blockKey] = existingAnchor;
+            return acc;
+          }
+          if (!previousBlockKeys.has(blockKey)) {
+            acc[blockKey] = timelineTextStreamLength;
+          }
+          return acc;
+        },
+        {}
+      );
+      const hasAnchorChanged = Object.keys(nextAnchors).length !== Object.keys(timelineBlockAnchors).length || Object.entries(nextAnchors).some(
+        ([blockKey, anchor]) => timelineBlockAnchors[blockKey] !== anchor
+      );
+      if (hasAnchorChanged) {
+        setTimelineBlockAnchors(nextAnchors);
+      }
+    } else if (messageRenderOrder !== "timeline" && Object.keys(timelineBlockAnchors).length > 0) {
+      setTimelineBlockAnchors({});
+    }
+    previousTimelineStateRef.current = {
+      messageId: message.id,
+      blockKeys: currentTimelineBlockKeys,
+      textLength: timelineTextStreamLength
+    };
+  }, [
+    currentTimelineBlockKeys,
+    isAssistantStreaming,
+    message.id,
+    message.content,
+    messageRenderOrder,
+    timelineBlockAnchors,
+    timelineTextStreamLength,
+    visibleTimelineBlockKeys
+  ]);
+  useEffect2(() => {
+    if (messageRenderOrder !== "timeline") {
+      if (Object.keys(visibleTimelineBlockKeys).length > 0) {
+        setVisibleTimelineBlockKeys({});
+      }
+      return;
+    }
+    const nextVisibleBlockKeys = currentTimelineBlockKeys.reduce(
+      (acc, blockKey) => {
+        if (visibleTimelineBlockKeys[blockKey]) {
+          acc[blockKey] = true;
+          return acc;
+        }
+        const anchor = effectiveTimelineBlockAnchors[blockKey];
+        if (anchor !== void 0 && anchor <= displayedTimelineTextLength) {
+          acc[blockKey] = true;
+        }
+        return acc;
+      },
+      {}
+    );
+    const hasVisibleBlockChanged = Object.keys(nextVisibleBlockKeys).length !== Object.keys(visibleTimelineBlockKeys).length || Object.keys(nextVisibleBlockKeys).some((blockKey) => !visibleTimelineBlockKeys[blockKey]);
+    if (hasVisibleBlockChanged) {
+      setVisibleTimelineBlockKeys(nextVisibleBlockKeys);
+    }
+  }, [
+    currentTimelineBlockKeys,
+    displayedTimelineTextLength,
+    effectiveTimelineBlockAnchors,
+    messageRenderOrder,
+    timelineBlockAnchors,
+    visibleTimelineBlockKeys
+  ]);
+  return {
+    timelineBlockAnchors: effectiveTimelineBlockAnchors,
+    visibleTimelineBlockKeys
   };
 };
 
@@ -1074,7 +1376,7 @@ var Value = styled3.span`
 `;
 
 // src/components/chat-thread/components/pde-ai-questionnaire-card.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import styled4 from "@emotion/styled";
 import { jsx as jsx5, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var OTHER_OPTION_VALUE = "__other__";
@@ -1176,10 +1478,10 @@ var PDEAIQuestionnaireCardInner = ({
   interactive = false,
   onSubmit
 }) => {
-  const [answers, setAnswers] = useState2(
+  const [answers, setAnswers] = useState3(
     () => createInitialAnswers(questionnaire)
   );
-  const [errorMessage, setErrorMessage] = useState2(null);
+  const [errorMessage, setErrorMessage] = useState3(null);
   const handleSubmit = () => {
     const missingQuestions = questionnaire.questions.filter(
       (question) => question.required && isMissingRequiredAnswer(question, answers)
@@ -1615,7 +1917,7 @@ var Detail = styled5.li`
 
 // src/components/chat-thread/components/image-viewer.tsx
 import styled6 from "@emotion/styled";
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
 import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
 var Overlay = styled6.div`
   position: fixed;
@@ -1634,8 +1936,8 @@ var Img = styled6.img`
   border-radius: 4px;
 `;
 var ImageViewer = ({ src, alt, onClose }) => {
-  const overlayRef = useRef3(null);
-  useEffect2(() => {
+  const overlayRef = useRef4(null);
+  useEffect3(() => {
     const handleKey = (e) => {
       if (e.key === "Escape")
         onClose();
@@ -1643,7 +1945,7 @@ var ImageViewer = ({ src, alt, onClose }) => {
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [onClose]);
-  useEffect2(() => {
+  useEffect3(() => {
     overlayRef.current?.focus();
   }, []);
   const stopPropagation = (e) => e.stopPropagation();
@@ -1806,9 +2108,16 @@ var ChatMessageItemView = ({
   onQuestionnaireSubmit,
   renderMessageBlock
 }) => {
-  const { labels } = useChatContext();
-  const [activeImage, setActiveImage] = useState3(void 0);
-  const { displayedContent, freshContent, isAssistantStreaming, settledContent } = useChatMessageReveal(message);
+  const { labels, messageRenderOrder = "blocks-first" } = useChatContext();
+  const [activeImage, setActiveImage] = useState4(void 0);
+  const {
+    displayedBlocks,
+    displayedContent,
+    freshContent,
+    isAssistantStreaming,
+    isFreshBlockActive,
+    settledContent
+  } = useChatMessageReveal(message);
   const isStoppedAssistant = message.role === "assistant" && message.status === "stopped";
   const attachments = message.attachments ?? [];
   const blocks = message.blocks ?? [];
@@ -1820,6 +2129,22 @@ var ChatMessageItemView = ({
   const canSubmitConfirmation = isPlanMode && typeof onConfirmationSubmit === "function";
   const canSubmitQuestionnaire = isPlanMode && typeof onQuestionnaireSubmit === "function";
   const shouldShowStreamingCaret = isAssistantStreaming && (!shouldRenderStructuredBlocks || hasTextContent);
+  const timelineConsumedText = messageRenderOrder === "timeline" ? getTimelineConsumedText(blocks) : "";
+  const hasConsumedTimelineText = timelineConsumedText.length > 0 && displayedContent.startsWith(timelineConsumedText);
+  const timelineDisplayedContent = hasConsumedTimelineText ? displayedContent.slice(timelineConsumedText.length) : displayedContent;
+  const timelineTextDisplay = buildTimelineTextDisplay(
+    timelineDisplayedContent,
+    isAssistantStreaming,
+    isFreshBlockActive
+  );
+  const displayedTimelineTextLength = getTimelineDisplayUnitCount(timelineDisplayedContent);
+  const { timelineBlockAnchors, visibleTimelineBlockKeys } = useTimelineBlockAnchors({
+    blocks,
+    displayedTimelineTextLength,
+    isAssistantStreaming,
+    message,
+    messageRenderOrder
+  });
   const renderChatMessageBlock = (block, index) => {
     switch (block.type) {
       case "markdown":
@@ -1876,11 +2201,69 @@ var ChatMessageItemView = ({
         return null;
     }
   };
-  const renderTextContent = () => /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    settledContent ? /* @__PURE__ */ jsx8(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(settledContent) }) : null,
-    freshContent ? /* @__PURE__ */ jsx8(ContentBlock, { "data-testid": "chat-message-fresh-block", "data-block-tone": "fresh", children: renderMarkdownContent(freshContent) }) : null,
-    !settledContent && !freshContent && hasTextContent ? /* @__PURE__ */ jsx8(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(displayedContent) }) : null
-  ] });
+  const renderTextContent = (options) => {
+    const textContent = options?.content ?? displayedContent;
+    const localTimelineTextDisplay = options?.displayedBlocks ? void 0 : options?.useTimelineSegmentation && options.content !== void 0 ? buildTimelineTextDisplay(options.content, isAssistantStreaming, isFreshBlockActive) : void 0;
+    const textBlocks = options?.displayedBlocks ?? localTimelineTextDisplay?.displayedBlocks ?? displayedBlocks;
+    const settledText = localTimelineTextDisplay?.settledContent ?? settledContent;
+    const freshText = localTimelineTextDisplay?.freshContent ?? freshContent;
+    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      textBlocks.filter((block) => block.content).map((block, index) => /* @__PURE__ */ jsx8(
+        ContentBlock,
+        {
+          "data-testid": block.tone === "fresh" ? "chat-message-fresh-block" : "chat-message-settled-block",
+          "data-block-tone": block.tone,
+          "data-block-index": index,
+          children: renderMarkdownContent(block.content)
+        },
+        `${block.tone}-${index}`
+      )),
+      !textBlocks.some((block) => block.content) && !settledText && !freshText && Boolean(textContent) ? /* @__PURE__ */ jsx8(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(textContent) }) : null
+    ] });
+  };
+  const renderStaticTextSegment = (content) => /* @__PURE__ */ jsx8(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(content) });
+  const bodySegments = (() => {
+    if (!shouldRenderStructuredBlocks && hasTextContent) {
+      return [{ type: "text" }];
+    }
+    if (!shouldRenderStructuredBlocks) {
+      return [];
+    }
+    if (messageRenderOrder === "timeline" && hasTextContent) {
+      const hasAnchoredStructuredBlocks = blocks.some((block, index) => {
+        const blockKey = getTimelineBlockKey(block, index);
+        return blockKey ? timelineBlockAnchors[blockKey] !== void 0 : false;
+      });
+      if (hasAnchoredStructuredBlocks) {
+        return buildAnchoredTimelineSegments({
+          blocks,
+          timelineBlockAnchors,
+          timelineDisplayedBlocks: timelineTextDisplay.displayedBlocks,
+          visibleTimelineBlockKeys
+        });
+      }
+      const orderedTimelineSegments = blocks.map(
+        (block, index) => block.type === "markdown" ? {
+          type: "markdown",
+          content: block.text
+        } : {
+          type: "block",
+          block,
+          index
+        }
+      );
+      if (!timelineConsumedText) {
+        return displayedContent ? [{ type: "text", content: displayedContent }, ...orderedTimelineSegments] : orderedTimelineSegments;
+      }
+      return timelineDisplayedContent ? [...orderedTimelineSegments, { type: "text", content: timelineDisplayedContent }] : orderedTimelineSegments;
+    }
+    const orderedBlocks = blocks.map((block, index) => ({
+      type: "block",
+      block,
+      index
+    }));
+    return hasTextContent ? [...orderedBlocks, { type: "text" }] : orderedBlocks;
+  })();
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsxs5(Bubble, { "data-role": message.role, "data-status": message.status ?? "done", children: [
       /* @__PURE__ */ jsxs5(Header2, { children: [
@@ -1899,17 +2282,18 @@ var ChatMessageItemView = ({
         isStoppedAssistant ? /* @__PURE__ */ jsx8(StatusTag, { "data-testid": "chat-message-stopped-tag", children: labels.stoppedResponse }) : null
       ] }),
       /* @__PURE__ */ jsxs5(Content, { "data-testid": "chat-message-content", children: [
-        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ jsxs5(ContentStack, { "data-testid": "chat-message-body-stack", children: [
-          shouldRenderStructuredBlocks ? blocks.map((block, index) => /* @__PURE__ */ jsx8(
-            ContentSegment,
-            {
-              "data-testid": "chat-message-content-segment",
-              children: renderChatMessageBlock(block, index)
-            },
-            `${block.type}-${index}`
-          )) : null,
-          hasTextContent ? /* @__PURE__ */ jsx8(ContentSegment, { "data-testid": "chat-message-content-segment", children: renderTextContent() }) : null
-        ] }) : null,
+        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ jsx8(ContentStack, { "data-testid": "chat-message-body-stack", children: bodySegments.map((segment, index) => /* @__PURE__ */ jsx8(
+          ContentSegment,
+          {
+            "data-testid": "chat-message-content-segment",
+            children: segment.type === "block" ? renderChatMessageBlock(segment.block, segment.index) : segment.type === "text" ? segment.content !== void 0 ? segment.useTimelineSegmentation ? renderTextContent({
+              content: segment.content,
+              displayedBlocks: segment.displayedBlocks,
+              useTimelineSegmentation: true
+            }) : renderStaticTextSegment(segment.content) : renderTextContent() : renderStaticTextSegment(segment.content)
+          },
+          segment.type === "text" ? `text-${index}` : segment.type === "markdown" ? `markdown-${index}` : `${segment.block.type}-${segment.index}`
+        )) }) : null,
         attachments.length ? /* @__PURE__ */ jsx8(AttachmentGrid, { "data-testid": "chat-message-attachment-grid", children: attachments.map((attachment) => /* @__PURE__ */ jsx8(
           AttachmentButton,
           {
@@ -2143,65 +2527,21 @@ var StreamingCaret = styled7.span`
   animation: ${caretBlink} 0.9s steps(1) infinite;
 `;
 
-// src/components/chat-thread/components/chat-thread-history-list.tsx
-import { memo as memo2 } from "react";
-import styled8 from "@emotion/styled";
-import { jsx as jsx9 } from "@emotion/react/jsx-runtime";
-var ChatThreadHistoryList = memo2(
-  ({
-    mode,
-    historyMessages,
-    latestUserMessageId,
-    latestUserMessageRef,
-    onConfirmationSubmit,
-    onQuestionnaireSubmit,
-    renderMessageBlock
-  }) => /* @__PURE__ */ jsx9(HistoryGroup, { "data-testid": "chat-thread-history", children: historyMessages.map((message) => /* @__PURE__ */ jsx9(
-    MessageSlot,
-    {
-      ref: message.id === latestUserMessageId ? latestUserMessageRef : null,
-      "data-testid": message.id === latestUserMessageId ? "chat-latest-user-anchor" : void 0,
-      style: message.id === latestUserMessageId ? {
-        scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px`
-      } : void 0,
-      children: /* @__PURE__ */ jsx9(
-        ChatMessageItem,
-        {
-          mode,
-          message,
-          onConfirmationSubmit,
-          onQuestionnaireSubmit,
-          renderMessageBlock
-        }
-      )
-    },
-    message.id
-  )) })
-);
-ChatThreadHistoryList.displayName = "ChatThreadHistoryList";
-var HistoryGroup = styled8.div`
-  display: contents;
-`;
-var MessageSlot = styled8.div`
-  display: flex;
-  align-items: flex-start;
-`;
-
 // src/components/chat-thread/components/chat-thread-empty-state.tsx
-import styled9 from "@emotion/styled";
-import { jsx as jsx10, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+import styled8 from "@emotion/styled";
+import { jsx as jsx9, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
 var ChatThreadEmptyState = () => {
   const { labels } = useChatContext();
   return /* @__PURE__ */ jsxs6(EmptyShell, { "data-testid": "chat-empty-hero", children: [
     /* @__PURE__ */ jsxs6(HeroMark, { children: [
-      /* @__PURE__ */ jsx10(HeroOrbit, {}),
-      /* @__PURE__ */ jsx10(HeroCore, { children: "AI" })
+      /* @__PURE__ */ jsx9(HeroOrbit, {}),
+      /* @__PURE__ */ jsx9(HeroCore, { children: "AI" })
     ] }),
-    /* @__PURE__ */ jsx10(HeroTitle, { children: labels.emptyStateTitle }),
-    /* @__PURE__ */ jsx10(HeroSubtitle, { children: labels.emptyStateSubtitle })
+    /* @__PURE__ */ jsx9(HeroTitle, { children: labels.emptyStateTitle }),
+    /* @__PURE__ */ jsx9(HeroSubtitle, { children: labels.emptyStateSubtitle })
   ] });
 };
-var EmptyShell = styled9.div`
+var EmptyShell = styled8.div`
   flex: 1;
   min-height: 0;
   display: flex;
@@ -2211,7 +2551,7 @@ var EmptyShell = styled9.div`
   gap: 16px;
   padding: 48px 24px 24px;
 `;
-var HeroMark = styled9.div`
+var HeroMark = styled8.div`
   position: relative;
   width: 108px;
   height: 108px;
@@ -2219,7 +2559,7 @@ var HeroMark = styled9.div`
   display: grid;
   place-items: center;
 `;
-var HeroOrbit = styled9.div`
+var HeroOrbit = styled8.div`
   position: absolute;
   inset: 20px;
   border-radius: 50%;
@@ -2242,7 +2582,7 @@ var HeroOrbit = styled9.div`
     transform: rotate(-22deg);
   }
 `;
-var HeroCore = styled9.div`
+var HeroCore = styled8.div`
   position: relative;
   z-index: 1;
   font-size: 28px;
@@ -2252,13 +2592,13 @@ var HeroCore = styled9.div`
   color: rgba(242, 244, 255, 0.96);
   text-shadow: 0 0 16px rgba(98, 116, 255, 0.65);
 `;
-var HeroTitle = styled9.p`
+var HeroTitle = styled8.p`
   margin: 0;
   color: rgba(255, 255, 255, 0.88);
   font-size: 16px;
   line-height: 24px;
 `;
-var HeroSubtitle = styled9.p`
+var HeroSubtitle = styled8.p`
   margin: 0;
   color: rgba(255, 255, 255, 0.72);
   font-size: 14px;
@@ -2266,7 +2606,74 @@ var HeroSubtitle = styled9.p`
 `;
 
 // src/components/chat-thread/index.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+var renderChatMessage = ({
+  message,
+  mode,
+  onConfirmationSubmit,
+  onQuestionnaireSubmit,
+  renderMessageBlock
+}) => /* @__PURE__ */ jsx10(
+  ChatMessageItem,
+  {
+    mode,
+    message,
+    onConfirmationSubmit,
+    onQuestionnaireSubmit,
+    renderMessageBlock
+  }
+);
+var renderErrorState = ({
+  error,
+  onRetry,
+  retryButtonLabel
+}) => /* @__PURE__ */ jsxs7(ErrorState, { "data-testid": "chat-thread-error-state", children: [
+  /* @__PURE__ */ jsx10(ErrorText, { children: error }),
+  onRetry ? /* @__PURE__ */ jsx10(ErrorActions, { children: /* @__PURE__ */ jsx10(RetryButton, { type: "button", "data-testid": "chat-thread-retry", onClick: onRetry, children: retryButtonLabel }) }) : null
+] });
+var groupConversationTurns = (historyMessages, streamingMessage) => {
+  const turns = [];
+  let currentTurn = null;
+  historyMessages.forEach((message) => {
+    if (message.role === "user") {
+      currentTurn = {
+        id: message.id,
+        userMessage: message,
+        responseMessages: []
+      };
+      turns.push(currentTurn);
+      return;
+    }
+    if (!currentTurn) {
+      currentTurn = {
+        id: `assistant-turn-${message.id}`,
+        responseMessages: [message]
+      };
+      turns.push(currentTurn);
+      return;
+    }
+    currentTurn.responseMessages.push(message);
+  });
+  if (!streamingMessage) {
+    return turns;
+  }
+  const lastTurn = turns[turns.length - 1];
+  if (lastTurn) {
+    return [
+      ...turns.slice(0, -1),
+      {
+        ...lastTurn,
+        responseMessages: [...lastTurn.responseMessages, streamingMessage]
+      }
+    ];
+  }
+  return [
+    {
+      id: `assistant-turn-${streamingMessage.id}`,
+      responseMessages: [streamingMessage]
+    }
+  ];
+};
 var ChatThreadView = ({
   activeSessionMode = DEFAULT_CHAT_AGENT_MODE,
   historyMessages,
@@ -2278,32 +2685,46 @@ var ChatThreadView = ({
   onQuestionnaireSubmit,
   renderMessageBlock
 }) => {
-  const containerRef = useRef4(null);
-  const latestUserMessageId = useMemo3(
-    () => findLatestUserMessageId(historyMessages),
-    [historyMessages]
+  const containerRef = useRef5(null);
+  const conversationTurns = useMemo4(
+    () => groupConversationTurns(historyMessages, streamingMessage),
+    [historyMessages, streamingMessage]
   );
-  const latestUserMessageRef = useRef4(null);
-  const pendingScrollUserMessageIdRef = useRef4(void 0);
-  const reservedSpaceFrameRef = useRef4(null);
-  const [latestUserMessageReservedSpace, setLatestUserMessageReservedSpace] = useState4({ messageId: void 0, value: 0 });
-  const reservedPaddingBottom = 24 + (latestUserMessageReservedSpace.messageId === latestUserMessageId ? latestUserMessageReservedSpace.value : 0);
-  const measureLatestUserMessageReservedSpace = useCallback2((messageId) => {
+  const latestTurn = conversationTurns[conversationTurns.length - 1];
+  const previousTurns = conversationTurns.slice(0, -1);
+  const latestUserMessageId = latestTurn?.userMessage?.id;
+  const latestUserMessageRef = useRef5(null);
+  const reservedSpaceFrameRef = useRef5(null);
+  const [latestTurnMinHeight, setLatestTurnMinHeight] = useState5(0);
+  const measureLatestTurnMinHeight = useCallback2(() => {
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const computedStyle = window.getComputedStyle(container);
+    const paddingTop = Number.parseFloat(computedStyle.paddingTop || "0") || 0;
+    const paddingBottom = Number.parseFloat(computedStyle.paddingBottom || "0") || 0;
+    const nextMinHeight = Math.max(0, container.clientHeight - paddingTop - paddingBottom);
+    setLatestTurnMinHeight((current) => current === nextMinHeight ? current : nextMinHeight);
+  }, []);
+  const scrollLatestUserMessageToTop = useCallback2(() => {
     const container = containerRef.current;
     const target = latestUserMessageRef.current;
     if (!container || !target)
       return;
-    const reservedHeight = calculateChatThreadScrollSpacerHeight({
-      containerClientHeight: container.clientHeight,
-      containerScrollHeight: container.scrollHeight,
-      targetOffsetTop: target.offsetTop
-    });
-    setLatestUserMessageReservedSpace((current) => {
-      const next = reservedHeight > 0 ? reservedHeight : 0;
-      if (current.messageId === messageId && current.value === next)
-        return current;
-      return { messageId, value: next };
-    });
+    const containerRect = container.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    const nextScrollTop = Math.max(
+      0,
+      container.scrollTop + (targetRect.top - containerRect.top) - CHAT_THREAD_SCROLL_TOP_GAP
+    );
+    if (typeof container.scrollTo === "function") {
+      container.scrollTo({
+        top: nextScrollTop,
+        behavior: "auto"
+      });
+      return;
+    }
+    container.scrollTop = nextScrollTop;
   }, []);
   useLayoutEffect(() => {
     if (reservedSpaceFrameRef.current !== null) {
@@ -2311,12 +2732,9 @@ var ChatThreadView = ({
       reservedSpaceFrameRef.current = null;
     }
     if (!latestUserMessageId) {
-      pendingScrollUserMessageIdRef.current = void 0;
       reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
         reservedSpaceFrameRef.current = null;
-        setLatestUserMessageReservedSpace(
-          (current) => current.messageId === void 0 && current.value === 0 ? current : { messageId: void 0, value: 0 }
-        );
+        setLatestTurnMinHeight((current) => current === 0 ? current : 0);
       });
       return () => {
         if (reservedSpaceFrameRef.current !== null) {
@@ -2325,10 +2743,10 @@ var ChatThreadView = ({
         }
       };
     }
-    pendingScrollUserMessageIdRef.current = latestUserMessageId;
     reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
       reservedSpaceFrameRef.current = null;
-      measureLatestUserMessageReservedSpace(latestUserMessageId);
+      measureLatestTurnMinHeight();
+      scrollLatestUserMessageToTop();
     });
     return () => {
       if (reservedSpaceFrameRef.current !== null) {
@@ -2336,51 +2754,79 @@ var ChatThreadView = ({
         reservedSpaceFrameRef.current = null;
       }
     };
-  }, [latestUserMessageId, measureLatestUserMessageReservedSpace]);
+  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
   useLayoutEffect(() => {
-    if (!latestUserMessageId || pendingScrollUserMessageIdRef.current !== latestUserMessageId)
-      return;
-    if (latestUserMessageReservedSpace.messageId !== latestUserMessageId)
+    if (!latestUserMessageId)
       return;
-    latestUserMessageRef.current?.scrollIntoView({ block: "start", behavior: "smooth" });
-    pendingScrollUserMessageIdRef.current = void 0;
-  }, [latestUserMessageId, latestUserMessageReservedSpace]);
-  return /* @__PURE__ */ jsxs7(
-    Container,
-    {
-      ref: containerRef,
-      "data-testid": "chat-thread",
-      style: { paddingBottom: `${reservedPaddingBottom}px` },
-      children: [
-        /* @__PURE__ */ jsx11(
-          ChatThreadHistoryList,
-          {
-            mode: activeSessionMode,
-            historyMessages,
-            latestUserMessageId,
-            latestUserMessageRef,
-            onConfirmationSubmit,
-            onQuestionnaireSubmit,
-            renderMessageBlock
-          }
-        ),
-        streamingMessage ? /* @__PURE__ */ jsx11(StreamingGroup, { "data-testid": "chat-thread-streaming", children: /* @__PURE__ */ jsx11(MessageSlot2, { children: /* @__PURE__ */ jsx11(
-          ChatMessageItem,
-          {
+    const handleResize = () => {
+      measureLatestTurnMinHeight();
+      scrollLatestUserMessageToTop();
+    };
+    const container = containerRef.current;
+    let resizeObserver = null;
+    if (container && typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        handleResize();
+      });
+      resizeObserver.observe(container);
+    }
+    window.addEventListener("resize", handleResize);
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
+  return /* @__PURE__ */ jsxs7(Container, { ref: containerRef, "data-testid": "chat-thread", children: [
+    previousTurns.map((turn) => /* @__PURE__ */ jsxs7(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
+      turn.userMessage ? /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
+        message: turn.userMessage,
+        mode: activeSessionMode,
+        onConfirmationSubmit,
+        onQuestionnaireSubmit,
+        renderMessageBlock
+      }) }) : null,
+      turn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
+        message,
+        mode: activeSessionMode,
+        onConfirmationSubmit,
+        onQuestionnaireSubmit,
+        renderMessageBlock
+      }) }, message.id))
+    ] }, turn.id)),
+    latestTurn ? /* @__PURE__ */ jsxs7(
+      ConversationTurn,
+      {
+        "data-testid": "chat-thread-latest-turn",
+        style: latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
+        children: [
+          latestTurn.userMessage ? /* @__PURE__ */ jsx10(
+            MessageSlot,
+            {
+              ref: latestUserMessageRef,
+              "data-testid": "chat-latest-user-anchor",
+              style: { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` },
+              children: renderChatMessage({
+                message: latestTurn.userMessage,
+                mode: activeSessionMode,
+                onConfirmationSubmit,
+                onQuestionnaireSubmit,
+                renderMessageBlock
+              })
+            }
+          ) : null,
+          latestTurn.responseMessages.map((message) => /* @__PURE__ */ jsx10(MessageSlot, { children: renderChatMessage({
+            message,
             mode: activeSessionMode,
-            message: streamingMessage,
             onConfirmationSubmit,
             onQuestionnaireSubmit,
             renderMessageBlock
-          }
-        ) }) }) : null,
-        error ? /* @__PURE__ */ jsxs7(ErrorState, { "data-testid": "chat-thread-error-state", children: [
-          /* @__PURE__ */ jsx11(ErrorText, { children: error }),
-          onRetry ? /* @__PURE__ */ jsx11(ErrorActions, { children: /* @__PURE__ */ jsx11(RetryButton, { type: "button", "data-testid": "chat-thread-retry", onClick: onRetry, children: retryButtonLabel }) }) : null
-        ] }) : null
-      ]
-    }
-  );
+          }) }, message.id)),
+          error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+        ]
+      }
+    ) : null,
+    !latestTurn && error ? renderErrorState({ error, onRetry, retryButtonLabel }) : null
+  ] });
 };
 var EMPTY_MESSAGES = [];
 var ChatThread = () => {
@@ -2424,9 +2870,9 @@ var ChatThread = () => {
     [sendRef]
   );
   if (!hasSessions || messages.length === 0 && !streamingMessage) {
-    return /* @__PURE__ */ jsx11(ChatThreadEmptyState, {});
+    return /* @__PURE__ */ jsx10(ChatThreadEmptyState, {});
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10(
     ChatThreadView,
     {
       activeSessionMode,
@@ -2441,7 +2887,7 @@ var ChatThread = () => {
     }
   );
 };
-var Container = styled10.div`
+var Container = styled9.div`
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -2464,27 +2910,29 @@ var Container = styled10.div`
     background: transparent;
   }
 `;
-var MessageSlot2 = styled10.div`
+var MessageSlot = styled9.div`
   display: flex;
 `;
-var StreamingGroup = styled10.div`
-  display: contents;
+var ConversationTurn = styled9.div`
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 `;
-var ErrorText = styled10.div`
+var ErrorText = styled9.div`
   color: #ff7b72;
   font-size: 14px;
 `;
-var ErrorState = styled10.div`
+var ErrorState = styled9.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
 `;
-var ErrorActions = styled10.div`
+var ErrorActions = styled9.div`
   display: flex;
   align-items: center;
 `;
-var RetryButton = styled10.button`
+var RetryButton = styled9.button`
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.04);
@@ -2500,8 +2948,8 @@ var RetryButton = styled10.button`
 `;
 
 // src/components/chat-composer/index.tsx
-import { useEffect as useEffect5, useRef as useRef7 } from "react";
-import styled15 from "@emotion/styled";
+import { useEffect as useEffect6, useRef as useRef8 } from "react";
+import styled14 from "@emotion/styled";
 
 // src/components/chat-composer/lib/chat-composer.ts
 var DRAFT_CHAT_SESSION_ID_PREFIX = "draft-session-";
@@ -2612,10 +3060,10 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef7, useState as useState7 } from "react";
 
 // src/components/chat-composer/hooks/use-composer-attachments.ts
-import { useEffect as useEffect3, useRef as useRef5, useState as useState5 } from "react";
+import { useEffect as useEffect4, useRef as useRef6, useState as useState6 } from "react";
 var SUPPORTED_IMAGE_MIME_TYPES = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/webp"]);
 var MAX_COMPOSER_ATTACHMENTS = 10;
 var createObjectUrl = (file) => typeof URL !== "undefined" && typeof URL.createObjectURL === "function" ? URL.createObjectURL(file) : "";
@@ -2629,12 +3077,12 @@ var releaseComposerAttachments = (attachments) => {
   attachments.forEach((attachment) => revokeObjectUrl(attachment.previewUrl));
 };
 var useComposerAttachments = () => {
-  const [attachments, setAttachments] = useState5([]);
-  const attachmentsRef = useRef5([]);
-  useEffect3(() => {
+  const [attachments, setAttachments] = useState6([]);
+  const attachmentsRef = useRef6([]);
+  useEffect4(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
-  useEffect3(
+  useEffect4(
     () => () => {
       releaseComposerAttachments(attachmentsRef.current);
     },
@@ -2747,9 +3195,9 @@ var useChatComposer = () => {
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const setPreferredMode = useChatStore((s) => s.setPreferredMode);
   const setSessionMode = useChatStore((s) => s.setSessionMode);
-  const [availableModels, setAvailableModels] = useState6([]);
-  const [isModelsLoading, setIsModelsLoading] = useState6(true);
-  const [isModelsError, setIsModelsError] = useState6(false);
+  const [availableModels, setAvailableModels] = useState7([]);
+  const [isModelsLoading, setIsModelsLoading] = useState7(true);
+  const [isModelsError, setIsModelsError] = useState7(false);
   const fetchModels = useCallback3(async () => {
     setIsModelsLoading(true);
     setIsModelsError(false);
@@ -2762,31 +3210,31 @@ var useChatComposer = () => {
       setIsModelsLoading(false);
     }
   }, [transport]);
-  useEffect4(() => {
+  useEffect5(() => {
     void fetchModels();
   }, [fetchModels]);
   const hasModels = availableModels.length > 0;
-  const [value, setValue] = useState6("");
-  const [selectedModel, setSelectedModel] = useState6("");
-  const [selectedMode, setSelectedModeLocal] = useState6(DEFAULT_CHAT_AGENT_MODE);
-  const [attachmentNotice, setAttachmentNotice] = useState6(null);
+  const [value, setValue] = useState7("");
+  const [selectedModel, setSelectedModel] = useState7("");
+  const [selectedMode, setSelectedModeLocal] = useState7(DEFAULT_CHAT_AGENT_MODE);
+  const [attachmentNotice, setAttachmentNotice] = useState7(null);
   const { attachments, appendFiles, removeAttachment, takeMessageAttachments } = useComposerAttachments();
-  const abortControllerRef = useRef6(null);
-  const stopRequestRef = useRef6(null);
-  const lastRequestRef = useRef6(null);
-  useEffect4(() => {
+  const abortControllerRef = useRef7(null);
+  const stopRequestRef = useRef7(null);
+  const lastRequestRef = useRef7(null);
+  useEffect5(() => {
     setSelectedModel(
       (current) => resolveSelectedChatModel({ currentModel: current, availableModels, isModelsLoading })
     );
   }, [availableModels, isModelsLoading]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (activeSession) {
       setSelectedModeLocal(activeSession.mode ?? DEFAULT_CHAT_AGENT_MODE);
       return;
     }
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
   }, [activeSession, preferredMode]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!attachmentNotice)
       return;
     const timeoutId = window.setTimeout(
@@ -3065,29 +3513,29 @@ var useChatComposer = () => {
 };
 
 // src/components/chat-composer/components/chat-composer-attachment-list.tsx
-import { useState as useState7 } from "react";
-import styled11 from "@emotion/styled";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
+import { useState as useState8 } from "react";
+import styled10 from "@emotion/styled";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var ChatComposerAttachmentList = ({
   attachments,
   onRemoveAttachment
 }) => {
-  const [activeImage, setActiveImage] = useState7(null);
+  const [activeImage, setActiveImage] = useState8(null);
   if (!attachments.length) {
     return null;
   }
   return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    /* @__PURE__ */ jsx12(AttachmentList, { "data-testid": "chat-composer-attachment-list", children: attachments.map((attachment) => /* @__PURE__ */ jsxs8(AttachmentCard, { children: [
-      /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx11(AttachmentList, { "data-testid": "chat-composer-attachment-list", children: attachments.map((attachment) => /* @__PURE__ */ jsxs8(AttachmentCard, { children: [
+      /* @__PURE__ */ jsx11(
         AttachmentPreviewButton,
         {
           type: "button",
           "aria-label": `${attachment.name} preview`,
           onClick: () => setActiveImage(attachment),
-          children: /* @__PURE__ */ jsx12(AttachmentThumb, { src: attachment.previewUrl, alt: attachment.name })
+          children: /* @__PURE__ */ jsx11(AttachmentThumb, { src: attachment.previewUrl, alt: attachment.name })
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx11(
         AttachmentRemoveButton,
         {
           type: "button",
@@ -3096,11 +3544,11 @@ var ChatComposerAttachmentList = ({
             event.stopPropagation();
             onRemoveAttachment(attachment.id);
           },
-          children: /* @__PURE__ */ jsx12(CloseGlyph, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx11(CloseGlyph, { "aria-hidden": "true" })
         }
       )
     ] }, attachment.id)) }),
-    activeImage ? /* @__PURE__ */ jsx12(
+    activeImage ? /* @__PURE__ */ jsx11(
       ImageViewer,
       {
         src: activeImage.previewUrl,
@@ -3110,7 +3558,7 @@ var ChatComposerAttachmentList = ({
     ) : null
   ] });
 };
-var AttachmentList = styled11.div`
+var AttachmentList = styled10.div`
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
@@ -3132,7 +3580,7 @@ var AttachmentList = styled11.div`
     background: transparent;
   }
 `;
-var AttachmentCard = styled11.div`
+var AttachmentCard = styled10.div`
   position: relative;
   width: 108px;
   height: 72px;
@@ -3141,7 +3589,7 @@ var AttachmentCard = styled11.div`
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.04);
 `;
-var AttachmentPreviewButton = styled11.button`
+var AttachmentPreviewButton = styled10.button`
   width: 100%;
   height: 100%;
   padding: 0;
@@ -3149,13 +3597,13 @@ var AttachmentPreviewButton = styled11.button`
   background: transparent;
   cursor: zoom-in;
 `;
-var AttachmentThumb = styled11.img`
+var AttachmentThumb = styled10.img`
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 `;
-var AttachmentRemoveButton = styled11.button`
+var AttachmentRemoveButton = styled10.button`
   position: absolute;
   top: 6px;
   right: 6px;
@@ -3193,7 +3641,7 @@ var AttachmentRemoveButton = styled11.button`
     background: rgba(30, 30, 35, 0.98);
   }
 `;
-var CloseGlyph = styled11.span`
+var CloseGlyph = styled10.span`
   position: relative;
   width: 11px;
   height: 11px;
@@ -3222,9 +3670,9 @@ var CloseGlyph = styled11.span`
 `;
 
 // src/components/chat-composer/components/chat-model-control.tsx
-import styled12 from "@emotion/styled";
+import styled11 from "@emotion/styled";
 import { Select } from "@xinghunm/compass-ui";
-import { jsx as jsx13, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
 var ChatModelControl = ({
   selectedModel,
   availableModels,
@@ -3243,7 +3691,7 @@ var ChatModelControl = ({
         "aria-label": "Reload",
         onClick: onReloadModels,
         children: [
-          /* @__PURE__ */ jsx13("span", { children: "Failed to load models" }),
+          /* @__PURE__ */ jsx12("span", { children: "Failed to load models" }),
           /* @__PURE__ */ jsxs9(
             ReloadIcon,
             {
@@ -3255,8 +3703,8 @@ var ChatModelControl = ({
               fill: "currentColor",
               xmlns: "http://www.w3.org/2000/svg",
               children: [
-                /* @__PURE__ */ jsx13("path", { d: "M895.469672 511.745197c0-146.498562-82.099856-273.805016-202.788589-338.470805l22.072715-46.630017c-4.50664-12.609179-18.382673-19.176758-30.991852-14.670118l-92.436272 33.040511c-12.609179 4.50664-19.176758 18.382673-14.670118 30.991852l33.040511 92.436272c4.50664 12.609179 18.382673 19.176758 30.991852 14.670118l24.581861-51.92972c99.069343 54.335513 166.240185 159.596881 166.240185 280.561907 0 165.56685-125.817544 301.747415-287.057855 318.14692l0 0.022513c-17.730826 0-32.105209 14.374382-32.105209 32.105209 0 17.730826 14.374382 32.105209 32.105209 32.105209 2.098801 0 4.149507-0.207731 6.135744-0.592494C744.270041 874.039593 895.469672 710.564381 895.469672 511.745197z" }),
-                /* @__PURE__ */ jsx13("path", { d: "M480.616222 129.23948c-0.041956 0-0.082888 0.00307-0.124843 0.00307l0-0.00307c-0.01535 0.001023-0.031722 0.00307-0.047072 0.004093-1.892093 0.010233-3.744277 0.189312-5.545296 0.5137-194.674794 18.529005-346.957083 182.459588-346.957083 381.987924 0 147.431817 83.146699 275.42798 205.097168 339.700819l-24.814152 52.419883c4.50664 12.609179 18.382673 19.176758 30.991852 14.670118l92.436272-33.040511c12.609179-4.50664 19.176758-18.382673 14.670118-30.991852l-33.040511-92.436272c-4.50664-12.609179-18.382673-19.176758-30.991852-14.670118l-21.853727 46.167482c-100.326986-53.964052-168.535461-159.920246-168.535461-281.81955 0-166.089759 126.616746-302.591643 288.588721-318.284043l0-0.014326c0.041956 0 0.082888 0.00307 0.124843 0.00307 17.730826 0 32.105209-14.374382 32.105209-32.105209C512.721431 143.613862 498.347049 129.23948 480.616222 129.23948z" })
+                /* @__PURE__ */ jsx12("path", { d: "M895.469672 511.745197c0-146.498562-82.099856-273.805016-202.788589-338.470805l22.072715-46.630017c-4.50664-12.609179-18.382673-19.176758-30.991852-14.670118l-92.436272 33.040511c-12.609179 4.50664-19.176758 18.382673-14.670118 30.991852l33.040511 92.436272c4.50664 12.609179 18.382673 19.176758 30.991852 14.670118l24.581861-51.92972c99.069343 54.335513 166.240185 159.596881 166.240185 280.561907 0 165.56685-125.817544 301.747415-287.057855 318.14692l0 0.022513c-17.730826 0-32.105209 14.374382-32.105209 32.105209 0 17.730826 14.374382 32.105209 32.105209 32.105209 2.098801 0 4.149507-0.207731 6.135744-0.592494C744.270041 874.039593 895.469672 710.564381 895.469672 511.745197z" }),
+                /* @__PURE__ */ jsx12("path", { d: "M480.616222 129.23948c-0.041956 0-0.082888 0.00307-0.124843 0.00307l0-0.00307c-0.01535 0.001023-0.031722 0.00307-0.047072 0.004093-1.892093 0.010233-3.744277 0.189312-5.545296 0.5137-194.674794 18.529005-346.957083 182.459588-346.957083 381.987924 0 147.431817 83.146699 275.42798 205.097168 339.700819l-24.814152 52.419883c4.50664 12.609179 18.382673 19.176758 30.991852 14.670118l92.436272-33.040511c12.609179-4.50664 19.176758-18.382673 14.670118-30.991852l-33.040511-92.436272c-4.50664-12.609179-18.382673-19.176758-30.991852-14.670118l-21.853727 46.167482c-100.326986-53.964052-168.535461-159.920246-168.535461-281.81955 0-166.089759 126.616746-302.591643 288.588721-318.284043l0-0.014326c0.041956 0 0.082888 0.00307 0.124843 0.00307 17.730826 0 32.105209-14.374382 32.105209-32.105209C512.721431 143.613862 498.347049 129.23948 480.616222 129.23948z" })
               ]
             }
           )
@@ -3265,11 +3713,11 @@ var ChatModelControl = ({
     );
   }
   if (isModelsLoading) {
-    return /* @__PURE__ */ jsx13(ModelBadge, { children: "Loading models..." });
+    return /* @__PURE__ */ jsx12(ModelBadge, { children: "Loading models..." });
   }
   if (hasModels && selectedModel) {
     if (availableModels.length > 1) {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx12(
         ModelSelect,
         {
           "data-testid": "chat-model-select",
@@ -3283,11 +3731,11 @@ var ChatModelControl = ({
         }
       );
     }
-    return /* @__PURE__ */ jsx13(ModelBadge, { children: selectedModel });
+    return /* @__PURE__ */ jsx12(ModelBadge, { children: selectedModel });
   }
-  return /* @__PURE__ */ jsx13(ModelBadge, { children: "No model available" });
+  return /* @__PURE__ */ jsx12(ModelBadge, { children: "No model available" });
 };
-var ModelBadge = styled12.span`
+var ModelBadge = styled11.span`
   border-radius: 999px;
   border: 1px solid var(--border-hover);
   padding: 5px 12px;
@@ -3296,7 +3744,7 @@ var ModelBadge = styled12.span`
   color: var(--text-secondary);
   line-height: 12px;
 `;
-var ModelReloadButton = styled12.button`
+var ModelReloadButton = styled11.button`
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -3321,10 +3769,10 @@ var ModelReloadButton = styled12.button`
     color: rgba(255, 255, 255, 0.88);
   }
 `;
-var ReloadIcon = styled12.svg`
+var ReloadIcon = styled11.svg`
   flex-shrink: 0;
 `;
-var ModelSelect = styled12(Select)`
+var ModelSelect = styled11(Select)`
   && {
     width: auto;
     min-width: 0;
@@ -3344,16 +3792,16 @@ var ModelSelect = styled12(Select)`
 `;
 
 // src/components/chat-composer/components/chat-mode-control.tsx
-import styled13 from "@emotion/styled";
+import styled12 from "@emotion/styled";
 import { Select as Select2 } from "@xinghunm/compass-ui";
-import { jsx as jsx14 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx13 } from "@emotion/react/jsx-runtime";
 var ChatModeControl = ({
   value,
   disabled = false,
   labels,
   onChange
 }) => {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx13(
     ModeSelect,
     {
       "data-testid": "chat-mode-select",
@@ -3368,7 +3816,7 @@ var ChatModeControl = ({
     }
   );
 };
-var ModeSelect = styled13(Select2)`
+var ModeSelect = styled12(Select2)`
   && {
     flex: 0 1 auto;
     width: auto;
@@ -3389,10 +3837,10 @@ var ModeSelect = styled13(Select2)`
 `;
 
 // src/components/chat-composer/components/chat-send-actions.tsx
-import styled14 from "@emotion/styled";
+import styled13 from "@emotion/styled";
 import { Button } from "@xinghunm/compass-ui";
-import { Fragment as Fragment4, jsx as jsx15 } from "@emotion/react/jsx-runtime";
-var ArrowUpIcon = () => /* @__PURE__ */ jsx15(
+import { Fragment as Fragment4, jsx as jsx14 } from "@emotion/react/jsx-runtime";
+var ArrowUpIcon = () => /* @__PURE__ */ jsx14(
   "svg",
   {
     "aria-hidden": "true",
@@ -3401,7 +3849,7 @@ var ArrowUpIcon = () => /* @__PURE__ */ jsx15(
     viewBox: "0 0 12 12",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx15(
+    children: /* @__PURE__ */ jsx14(
       "path",
       {
         d: "M6 10V2M6 2L2 6M6 2L10 6",
@@ -3419,7 +3867,7 @@ var ChatSendActions = ({
   isStopping,
   onStop,
   onSend
-}) => /* @__PURE__ */ jsx15(Fragment4, { children: isStreaming ? /* @__PURE__ */ jsx15(
+}) => /* @__PURE__ */ jsx14(Fragment4, { children: isStreaming ? /* @__PURE__ */ jsx14(
   StopButton,
   {
     type: "button",
@@ -3429,14 +3877,14 @@ var ChatSendActions = ({
     disabled: isStopping,
     shape: "circle",
     onClick: () => void onStop(),
-    children: /* @__PURE__ */ jsx15(StopGlyph, { "aria-hidden": "true" })
+    children: isStopping ? /* @__PURE__ */ jsx14(StopSpinner, { "aria-hidden": "true", "data-testid": "chat-composer-stop-spinner" }) : /* @__PURE__ */ jsx14(StopGlyph, { "aria-hidden": "true", "data-testid": "chat-composer-stop-glyph" })
   }
-) : /* @__PURE__ */ jsx15(
+) : /* @__PURE__ */ jsx14(
   PrimaryButton,
   {
     $canSend: canSend,
     type: "button",
-    icon: /* @__PURE__ */ jsx15(ArrowUpIcon, {}),
+    icon: /* @__PURE__ */ jsx14(ArrowUpIcon, {}),
     "aria-label": "Send",
     "data-testid": "chat-composer-send",
     disabled: !canSend,
@@ -3444,7 +3892,7 @@ var ChatSendActions = ({
     onClick: () => void onSend()
   }
 ) });
-var PrimaryButton = styled14(Button)`
+var PrimaryButton = styled13(Button)`
   && {
     min-width: 24px;
     width: 24px;
@@ -3470,7 +3918,7 @@ var PrimaryButton = styled14(Button)`
     }
   }
 `;
-var StopButton = styled14(Button)`
+var StopButton = styled13(Button)`
   && {
     min-width: 24px;
     width: 24px;
@@ -3498,17 +3946,35 @@ var StopButton = styled14(Button)`
     }
   }
 `;
-var StopGlyph = styled14.span`
+var StopGlyph = styled13.span`
   width: 8px;
   height: 8px;
   border-radius: 2px;
   background: #1b1b1b;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
 `;
+var StopSpinner = styled13.span`
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  border: 1.5px solid rgba(27, 27, 27, 0.2);
+  border-top-color: #1b1b1b;
+  animation: chat-composer-stop-spin 0.7s linear infinite;
+
+  @keyframes chat-composer-stop-spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
 
 // src/components/chat-composer/index.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
-var PlusIcon = () => /* @__PURE__ */ jsx16(
+import { jsx as jsx15, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+var PlusIcon = () => /* @__PURE__ */ jsx15(
   "svg",
   {
     "aria-hidden": "true",
@@ -3517,7 +3983,7 @@ var PlusIcon = () => /* @__PURE__ */ jsx16(
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx16("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
+    children: /* @__PURE__ */ jsx15("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
   }
 );
 var ChatComposerView = ({
@@ -3546,7 +4012,7 @@ var ChatComposerView = ({
   onStop,
   onSend
 }) => {
-  const imageInputRef = useRef7(null);
+  const imageInputRef = useRef8(null);
   const canSend = canSendChatMessage({
     value,
     attachmentCount: attachments.length,
@@ -3577,8 +4043,8 @@ var ChatComposerView = ({
     event.preventDefault();
     onPasteImages(imageFiles);
   };
-  return /* @__PURE__ */ jsx16(Container2, { children: /* @__PURE__ */ jsxs10(Surface, { "data-testid": "chat-composer-surface", children: [
-    enableImageAttachments ? /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx15(Container2, { children: /* @__PURE__ */ jsxs10(Surface, { "data-testid": "chat-composer-surface", children: [
+    enableImageAttachments ? /* @__PURE__ */ jsx15(
       "input",
       {
         ref: imageInputRef,
@@ -3590,15 +4056,15 @@ var ChatComposerView = ({
         onChange: handlePickImages
       }
     ) : null,
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx15(
       ChatComposerAttachmentList,
       {
         attachments,
         onRemoveAttachment
       }
     ),
-    attachmentNotice === "limit_reached" ? /* @__PURE__ */ jsx16(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
-    /* @__PURE__ */ jsx16(
+    attachmentNotice === "limit_reached" ? /* @__PURE__ */ jsx15(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
+    /* @__PURE__ */ jsx15(
       Input,
       {
         "data-testid": "chat-composer-input",
@@ -3609,18 +4075,18 @@ var ChatComposerView = ({
         placeholder
       }
     ),
-    /* @__PURE__ */ jsx16(Footer, { children: /* @__PURE__ */ jsxs10(Actions2, { "data-testid": "chat-composer-actions", children: [
-      enableImageAttachments ? /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx15(Footer, { children: /* @__PURE__ */ jsxs10(Actions2, { "data-testid": "chat-composer-actions", children: [
+      enableImageAttachments ? /* @__PURE__ */ jsx15(
         AttachButton,
         {
           type: "button",
           "data-testid": "chat-composer-attach-image",
           "aria-label": "Attach image",
           onClick: () => imageInputRef.current?.click(),
-          children: /* @__PURE__ */ jsx16(PlusIcon, {})
+          children: /* @__PURE__ */ jsx15(PlusIcon, {})
         }
       ) : null,
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx15(
         ChatModeControl,
         {
           value: selectedMode,
@@ -3629,7 +4095,7 @@ var ChatComposerView = ({
           onChange: onSelectedModeChange
         }
       ),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx15(
         ChatModelControl,
         {
           selectedModel,
@@ -3641,7 +4107,7 @@ var ChatComposerView = ({
           onReloadModels
         }
       ),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx15(
         ChatSendActions,
         {
           canSend,
@@ -3658,7 +4124,7 @@ var ChatComposer = () => {
   const { labels, sendRef, retryRef, enableImageAttachments } = useChatContext();
   const { state, actions } = useChatComposer();
   const { send, retry } = actions;
-  useEffect5(() => {
+  useEffect6(() => {
     sendRef.current = send;
     retryRef.current = async () => {
       retry();
@@ -3669,7 +4135,7 @@ var ChatComposer = () => {
     plan: labels.modeLabelPlan,
     agent: labels.modeLabelAgent
   };
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx15(
     ChatComposerView,
     {
       value: state.value,
@@ -3699,10 +4165,10 @@ var ChatComposer = () => {
     }
   );
 };
-var Container2 = styled15.div`
+var Container2 = styled14.div`
   padding: 0 16px 16px;
 `;
-var Surface = styled15.div`
+var Surface = styled14.div`
   background: var(--border-color);
   border-radius: 20px;
   border: 1px solid var(--border-hover);
@@ -3711,7 +4177,7 @@ var Surface = styled15.div`
     0 12px 36px rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(10px);
 `;
-var AttachmentNotice = styled15.div`
+var AttachmentNotice = styled14.div`
   margin: 10px 12px 0;
   padding: 8px 10px;
   border-radius: 10px;
@@ -3721,7 +4187,7 @@ var AttachmentNotice = styled15.div`
   font-size: 12px;
   line-height: 1.4;
 `;
-var Input = styled15.textarea`
+var Input = styled14.textarea`
   width: 100%;
   min-height: 96px;
   resize: none;
@@ -3743,14 +4209,14 @@ var Input = styled15.textarea`
     display: none;
   }
 `;
-var Footer = styled15.div`
+var Footer = styled14.div`
   display: flex;
   align-items: flex-end;
   justify-content: stretch;
   gap: 16px;
   padding: 0 14px 14px;
 `;
-var Actions2 = styled15.div`
+var Actions2 = styled14.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -3759,7 +4225,7 @@ var Actions2 = styled15.div`
   justify-content: flex-end;
   gap: 8px;
 `;
-var AttachButton = styled15.button`
+var AttachButton = styled14.button`
   width: 28px;
   height: 28px;
   display: grid;
@@ -3776,42 +4242,42 @@ var AttachButton = styled15.button`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-import styled17 from "@emotion/styled";
+import styled16 from "@emotion/styled";
 
 // src/components/chat-conversation-list/components/chat-session-item.tsx
-import { memo as memo3 } from "react";
-import styled16 from "@emotion/styled";
-import { jsx as jsx17, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
-var ChatSessionItem = memo3(
+import { memo as memo2 } from "react";
+import styled15 from "@emotion/styled";
+import { jsx as jsx16, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
+var ChatSessionItem = memo2(
   ({ session, isActive, modeLabel, onClick }) => {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx16(
       SessionButton,
       {
         type: "button",
         "data-active": isActive,
         onClick: () => onClick(session.sessionId),
         children: /* @__PURE__ */ jsxs11(SessionMeta, { children: [
-          /* @__PURE__ */ jsx17(SessionTitle, { children: session.title }),
-          /* @__PURE__ */ jsx17(ModeBadge, { children: modeLabel })
+          /* @__PURE__ */ jsx16(SessionTitle, { children: session.title }),
+          /* @__PURE__ */ jsx16(ModeBadge, { children: modeLabel })
         ] })
       }
     );
   }
 );
 ChatSessionItem.displayName = "ChatSessionItem";
-var SessionMeta = styled16.div`
+var SessionMeta = styled15.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
 `;
-var SessionTitle = styled16.span`
+var SessionTitle = styled15.span`
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var SessionButton = styled16.button`
+var SessionButton = styled15.button`
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 12px;
@@ -3825,7 +4291,7 @@ var SessionButton = styled16.button`
     background: rgba(255, 255, 255, 0.08);
   }
 `;
-var ModeBadge = styled16.span`
+var ModeBadge = styled15.span`
   flex-shrink: 0;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -3837,7 +4303,7 @@ var ModeBadge = styled16.span`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
 var ChatConversationList = () => {
   const { labels } = useChatContext();
   const sessions = useChatStore((s) => s.sessions);
@@ -3862,10 +4328,10 @@ var ChatConversationList = () => {
   };
   return /* @__PURE__ */ jsxs12(Container3, { children: [
     /* @__PURE__ */ jsxs12(Toolbar, { children: [
-      /* @__PURE__ */ jsx18(Title4, { children: "Sessions" }),
-      /* @__PURE__ */ jsx18(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: handleCreateSession, children: labels.newChat })
+      /* @__PURE__ */ jsx17(Title4, { children: "Sessions" }),
+      /* @__PURE__ */ jsx17(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: handleCreateSession, children: labels.newChat })
     ] }),
-    /* @__PURE__ */ jsx18(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx17(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ jsx17(
       ChatSessionItem,
       {
         session,
@@ -3877,7 +4343,7 @@ var ChatConversationList = () => {
     )) })
   ] });
 };
-var Container3 = styled17.aside`
+var Container3 = styled16.aside`
   width: 280px;
   min-width: 280px;
   border-right: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
@@ -3885,18 +4351,18 @@ var Container3 = styled17.aside`
   flex-direction: column;
   background: rgba(255, 255, 255, 0.02);
 `;
-var Toolbar = styled17.div`
+var Toolbar = styled16.div`
   padding: 20px 16px 12px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 `;
-var Title4 = styled17.h2`
+var Title4 = styled16.h2`
   margin: 0;
   font-size: 14px;
   color: var(--text-secondary);
 `;
-var CreateButton = styled17.button`
+var CreateButton = styled16.button`
   border: none;
   border-radius: 12px;
   padding: 12px 14px;
@@ -3905,7 +4371,7 @@ var CreateButton = styled17.button`
   text-align: left;
   cursor: pointer;
 `;
-var List2 = styled17.div`
+var List2 = styled16.div`
   padding: 0 12px 16px;
   display: flex;
   flex-direction: column;
@@ -3914,8 +4380,8 @@ var List2 = styled17.div`
 `;
 
 // src/components/ai-chat/index.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
-var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE__ */ jsx19(
+import { jsx as jsx18, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE__ */ jsx18(
   ConfigProvider,
   {
     theme: {
@@ -3950,23 +4416,23 @@ var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE_
         }
       }
     },
-    children: /* @__PURE__ */ jsx19(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ jsxs13(Root, { "data-testid": "ai-chat", children: [
-      showConversationList ? /* @__PURE__ */ jsx19(ChatConversationList, {}) : null,
+    children: /* @__PURE__ */ jsx18(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ jsxs13(Root, { "data-testid": "ai-chat", children: [
+      showConversationList ? /* @__PURE__ */ jsx18(ChatConversationList, {}) : null,
       /* @__PURE__ */ jsxs13(Workspace, { children: [
-        /* @__PURE__ */ jsx19(ChatThread, {}),
-        /* @__PURE__ */ jsx19(ChatComposer, {})
+        /* @__PURE__ */ jsx18(ChatThread, {}),
+        /* @__PURE__ */ jsx18(ChatComposer, {})
       ] })
     ] }) })
   }
 );
-var Root = styled18.div`
+var Root = styled17.div`
   display: flex;
   width: 100%;
   height: 100%;
   min-height: 0;
   overflow: hidden;
 `;
-var Workspace = styled18.section`
+var Workspace = styled17.section`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -3977,6 +4443,7 @@ export {
   AiChat,
   AiChatProvider,
   CHAT_AGENT_MODES,
+  CHAT_MESSAGE_RENDER_ORDERS,
   ChatComposer,
   ChatConversationList,
   ChatThread,