@xinghunm/ai-chat 0.2.1 → 0.3.0

package/dist/index.js

@@ -33,6 +33,7 @@ __export(src_exports, {
   AiChat: () => AiChat,
   AiChatProvider: () => AiChatProvider,
   CHAT_AGENT_MODES: () => CHAT_AGENT_MODES,
+  CHAT_MESSAGE_RENDER_ORDERS: () => CHAT_MESSAGE_RENDER_ORDERS,
   ChatComposer: () => ChatComposer,
   ChatConversationList: () => ChatConversationList,
   ChatThread: () => ChatThread,
@@ -45,7 +46,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/ai-chat/index.tsx
-var import_styled18 = __toESM(require("@emotion/styled"));
+var import_styled17 = __toESM(require("@emotion/styled"));
 var import_compass_ui4 = require("@xinghunm/compass-ui");
 
 // src/components/ai-chat-provider/index.tsx
@@ -62,6 +63,7 @@ var import_vanilla = require("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",
@@ -563,7 +565,14 @@ var createDefaultChatTransport = ({
 // src/components/ai-chat-provider/index.tsx
 var import_jsx_runtime = require("@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] = (0, import_react2.useState)(
     () => createChatStore(defaultMode ? { preferredMode: defaultMode } : void 0)
   );
@@ -615,6 +624,7 @@ var AiChatProvider = (props) => {
       sendRef,
       retryRef,
       renderMessageBlock,
+      messageRenderOrder,
       transformStreamPacket: defaultTransformStreamPacket,
       enableImageAttachments
     }),
@@ -625,6 +635,7 @@ var AiChatProvider = (props) => {
       defaultTransformStreamPacket,
       enableImageAttachments,
       labels,
+      messageRenderOrder,
       renderMessageBlock,
       sendRef,
       retryRef,
@@ -637,7 +648,7 @@ var AiChatProvider = (props) => {
 
 // src/components/chat-thread/index.tsx
 var import_react11 = require("react");
-var import_styled10 = __toESM(require("@emotion/styled"));
+var import_styled9 = __toESM(require("@emotion/styled"));
 
 // src/context/use-chat-context.ts
 var import_react3 = require("react");
@@ -655,27 +666,11 @@ 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
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_styled7 = __toESM(require("@emotion/styled"));
-var import_react9 = require("@emotion/react");
+var import_react10 = require("@emotion/react");
 var import_react_markdown = __toESM(require("react-markdown"));
 var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_remark_math = __toESM(require("remark-math"));
@@ -902,11 +897,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
+var import_react6 = require("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] = (0, import_react6.useState)({});
+  const [visibleTimelineBlockKeys, setVisibleTimelineBlockKeys] = (0, import_react6.useState)({});
+  const currentTimelineBlockKeys = (0, import_react6.useMemo)(
+    () => blocks.map((block, index) => getTimelineBlockKey(block, index)).filter((blockKey) => Boolean(blockKey)),
+    [blocks]
+  );
+  const timelineTextStreamLength = (0, import_react6.useMemo)(
+    () => getTimelineDisplayUnitCount(getTimelineTextStream(message.content, blocks)),
+    [blocks, message.content]
+  );
+  const previousTimelineStateRef = (0, import_react6.useRef)({
+    messageId: message.id,
+    blockKeys: currentTimelineBlockKeys,
+    textLength: timelineTextStreamLength
+  });
+  const effectiveTimelineBlockAnchors = (0, import_react6.useMemo)(() => {
+    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
+  ]);
+  (0, import_react6.useEffect)(() => {
+    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
+  ]);
+  (0, import_react6.useEffect)(() => {
+    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
   };
 };
 
@@ -1120,7 +1423,7 @@ var Value = import_styled3.default.span`
 `;
 
 // src/components/chat-thread/components/pde-ai-questionnaire-card.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_styled4 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
 var OTHER_OPTION_VALUE = "__other__";
@@ -1222,10 +1525,10 @@ var PDEAIQuestionnaireCardInner = ({
   interactive = false,
   onSubmit
 }) => {
-  const [answers, setAnswers] = (0, import_react6.useState)(
+  const [answers, setAnswers] = (0, import_react7.useState)(
     () => createInitialAnswers(questionnaire)
   );
-  const [errorMessage, setErrorMessage] = (0, import_react6.useState)(null);
+  const [errorMessage, setErrorMessage] = (0, import_react7.useState)(null);
   const handleSubmit = () => {
     const missingQuestions = questionnaire.questions.filter(
       (question) => question.required && isMissingRequiredAnswer(question, answers)
@@ -1661,7 +1964,7 @@ var Detail = import_styled5.default.li`
 
 // src/components/chat-thread/components/image-viewer.tsx
 var import_styled6 = __toESM(require("@emotion/styled"));
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
 var Overlay = import_styled6.default.div`
   position: fixed;
@@ -1680,8 +1983,8 @@ var Img = import_styled6.default.img`
   border-radius: 4px;
 `;
 var ImageViewer = ({ src, alt, onClose }) => {
-  const overlayRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const overlayRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     const handleKey = (e) => {
       if (e.key === "Escape")
         onClose();
@@ -1689,7 +1992,7 @@ var ImageViewer = ({ src, alt, onClose }) => {
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [onClose]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     overlayRef.current?.focus();
   }, []);
   const stopPropagation = (e) => e.stopPropagation();
@@ -1852,9 +2155,16 @@ var ChatMessageItemView = ({
   onQuestionnaireSubmit,
   renderMessageBlock
 }) => {
-  const { labels } = useChatContext();
-  const [activeImage, setActiveImage] = (0, import_react8.useState)(void 0);
-  const { displayedContent, freshContent, isAssistantStreaming, settledContent } = useChatMessageReveal(message);
+  const { labels, messageRenderOrder = "blocks-first" } = useChatContext();
+  const [activeImage, setActiveImage] = (0, import_react9.useState)(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 ?? [];
@@ -1866,6 +2176,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":
@@ -1879,11 +2205,11 @@ var ChatMessageItemView = ({
           `markdown-${index}`
         );
       case "notice":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAINoticeCard, { text: block.text, tone: block.tone }) }, `notice-${index}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAINoticeCard, { text: block.text, tone: block.tone }) }, `notice-${index}`);
       case "parameter_summary":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAIParameterSummaryCard, { items: block.items }) }, `parameter-summary-${index}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAIParameterSummaryCard, { items: block.items }) }, `parameter-summary-${index}`);
       case "confirmation_card":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           PDEAIExecutionConfirmationCard,
           {
             proposal: block.proposal,
@@ -1896,9 +2222,9 @@ var ChatMessageItemView = ({
           }
         ) }, `confirmation-card-${index}`);
       case "result_summary":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAIResultSummaryCard, { summary: block.summary }) }, `result-summary-${index}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAIResultSummaryCard, { summary: block.summary }) }, `result-summary-${index}`);
       case "questionnaire":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           PDEAIQuestionnaireCard,
           {
             questionnaire: block.questionnaire,
@@ -1910,7 +2236,7 @@ var ChatMessageItemView = ({
           }
         ) }, `questionnaire-${index}`);
       case "custom":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: renderMessageBlock?.({
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: renderMessageBlock?.({
           block,
           index,
           message,
@@ -1922,11 +2248,69 @@ var ChatMessageItemView = ({
         return null;
     }
   };
-  const renderTextContent = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    settledContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(settledContent) }) : null,
-    freshContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentBlock, { "data-testid": "chat-message-fresh-block", "data-block-tone": "fresh", children: renderMarkdownContent(freshContent) }) : null,
-    !settledContent && !freshContent && hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(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__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      textBlocks.filter((block) => block.content).map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        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__ */ (0, import_jsx_runtime8.jsx)(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(textContent) }) : null
+    ] });
+  };
+  const renderStaticTextSegment = (content) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(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__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Bubble, { "data-role": message.role, "data-status": message.status ?? "done", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Header2, { children: [
@@ -1945,17 +2329,18 @@ var ChatMessageItemView = ({
         isStoppedAssistant ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StatusTag, { "data-testid": "chat-message-stopped-tag", children: labels.stoppedResponse }) : null
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Content, { "data-testid": "chat-message-content", children: [
-        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ContentStack, { "data-testid": "chat-message-body-stack", children: [
-          shouldRenderStructuredBlocks ? blocks.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            ContentSegment,
-            {
-              "data-testid": "chat-message-content-segment",
-              children: renderChatMessageBlock(block, index)
-            },
-            `${block.type}-${index}`
-          )) : null,
-          hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentSegment, { "data-testid": "chat-message-content-segment", children: renderTextContent() }) : null
-        ] }) : null,
+        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentStack, { "data-testid": "chat-message-body-stack", children: bodySegments.map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          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__ */ (0, import_jsx_runtime8.jsx)(AttachmentGrid, { "data-testid": "chat-message-attachment-grid", children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           AttachmentButton,
           {
@@ -1982,7 +2367,7 @@ var ChatMessageItemView = ({
     ) : null
   ] });
 };
-var ChatMessageItem = (0, import_react8.memo)(
+var ChatMessageItem = (0, import_react9.memo)(
   ChatMessageItemView,
   (previousProps, nextProps) => isSameMessage(
     previousProps.message,
@@ -2127,7 +2512,7 @@ var AttachmentImage = import_styled7.default.img`
 var TableWrapper = import_styled7.default.div`
   overflow-x: auto;
 `;
-var caretBlink = import_react9.keyframes`
+var caretBlink = import_react10.keyframes`
   0%, 49% {
     opacity: 1;
   }
@@ -2136,7 +2521,7 @@ var caretBlink = import_react9.keyframes`
     opacity: 0.2;
   }
 `;
-var shimmer = import_react9.keyframes`
+var shimmer = import_react10.keyframes`
   0%, 100% {
     transform: scale(0.9) rotate(0deg);
     opacity: 0.55;
@@ -2189,65 +2574,21 @@ var StreamingCaret = import_styled7.default.span`
   animation: ${caretBlink} 0.9s steps(1) infinite;
 `;
 
-// src/components/chat-thread/components/chat-thread-history-list.tsx
-var import_react10 = require("react");
+// src/components/chat-thread/components/chat-thread-empty-state.tsx
 var import_styled8 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
-var ChatThreadHistoryList = (0, import_react10.memo)(
-  ({
-    mode,
-    historyMessages,
-    latestUserMessageId,
-    latestUserMessageRef,
-    onConfirmationSubmit,
-    onQuestionnaireSubmit,
-    renderMessageBlock
-  }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HistoryGroup, { "data-testid": "chat-thread-history", children: historyMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    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__ */ (0, import_jsx_runtime9.jsx)(
-        ChatMessageItem,
-        {
-          mode,
-          message,
-          onConfirmationSubmit,
-          onQuestionnaireSubmit,
-          renderMessageBlock
-        }
-      )
-    },
-    message.id
-  )) })
-);
-ChatThreadHistoryList.displayName = "ChatThreadHistoryList";
-var HistoryGroup = import_styled8.default.div`
-  display: contents;
-`;
-var MessageSlot = import_styled8.default.div`
-  display: flex;
-  align-items: flex-start;
-`;
-
-// src/components/chat-thread/components/chat-thread-empty-state.tsx
-var import_styled9 = __toESM(require("@emotion/styled"));
-var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
 var ChatThreadEmptyState = () => {
   const { labels } = useChatContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(EmptyShell, { "data-testid": "chat-empty-hero", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(HeroMark, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HeroOrbit, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HeroCore, { children: "AI" })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(EmptyShell, { "data-testid": "chat-empty-hero", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(HeroMark, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeroOrbit, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeroCore, { children: "AI" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HeroTitle, { children: labels.emptyStateTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HeroSubtitle, { children: labels.emptyStateSubtitle })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeroTitle, { children: labels.emptyStateTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeroSubtitle, { children: labels.emptyStateSubtitle })
   ] });
 };
-var EmptyShell = import_styled9.default.div`
+var EmptyShell = import_styled8.default.div`
   flex: 1;
   min-height: 0;
   display: flex;
@@ -2257,7 +2598,7 @@ var EmptyShell = import_styled9.default.div`
   gap: 16px;
   padding: 48px 24px 24px;
 `;
-var HeroMark = import_styled9.default.div`
+var HeroMark = import_styled8.default.div`
   position: relative;
   width: 108px;
   height: 108px;
@@ -2265,7 +2606,7 @@ var HeroMark = import_styled9.default.div`
   display: grid;
   place-items: center;
 `;
-var HeroOrbit = import_styled9.default.div`
+var HeroOrbit = import_styled8.default.div`
   position: absolute;
   inset: 20px;
   border-radius: 50%;
@@ -2288,7 +2629,7 @@ var HeroOrbit = import_styled9.default.div`
     transform: rotate(-22deg);
   }
 `;
-var HeroCore = import_styled9.default.div`
+var HeroCore = import_styled8.default.div`
   position: relative;
   z-index: 1;
   font-size: 28px;
@@ -2298,13 +2639,13 @@ var HeroCore = import_styled9.default.div`
   color: rgba(242, 244, 255, 0.96);
   text-shadow: 0 0 16px rgba(98, 116, 255, 0.65);
 `;
-var HeroTitle = import_styled9.default.p`
+var HeroTitle = import_styled8.default.p`
   margin: 0;
   color: rgba(255, 255, 255, 0.88);
   font-size: 16px;
   line-height: 24px;
 `;
-var HeroSubtitle = import_styled9.default.p`
+var HeroSubtitle = import_styled8.default.p`
   margin: 0;
   color: rgba(255, 255, 255, 0.72);
   font-size: 14px;
@@ -2312,7 +2653,74 @@ var HeroSubtitle = import_styled9.default.p`
 `;
 
 // src/components/chat-thread/index.tsx
-var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
+var renderChatMessage = ({
+  message,
+  mode,
+  onConfirmationSubmit,
+  onQuestionnaireSubmit,
+  renderMessageBlock
+}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  ChatMessageItem,
+  {
+    mode,
+    message,
+    onConfirmationSubmit,
+    onQuestionnaireSubmit,
+    renderMessageBlock
+  }
+);
+var renderErrorState = ({
+  error,
+  onRetry,
+  retryButtonLabel
+}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ErrorState, { "data-testid": "chat-thread-error-state", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ErrorText, { children: error }),
+  onRetry ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ErrorActions, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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,
@@ -2325,31 +2733,45 @@ var ChatThreadView = ({
   renderMessageBlock
 }) => {
   const containerRef = (0, import_react11.useRef)(null);
-  const latestUserMessageId = (0, import_react11.useMemo)(
-    () => findLatestUserMessageId(historyMessages),
-    [historyMessages]
+  const conversationTurns = (0, import_react11.useMemo)(
+    () => groupConversationTurns(historyMessages, streamingMessage),
+    [historyMessages, streamingMessage]
   );
+  const latestTurn = conversationTurns[conversationTurns.length - 1];
+  const previousTurns = conversationTurns.slice(0, -1);
+  const latestUserMessageId = latestTurn?.userMessage?.id;
   const latestUserMessageRef = (0, import_react11.useRef)(null);
-  const pendingScrollUserMessageIdRef = (0, import_react11.useRef)(void 0);
   const reservedSpaceFrameRef = (0, import_react11.useRef)(null);
-  const [latestUserMessageReservedSpace, setLatestUserMessageReservedSpace] = (0, import_react11.useState)({ messageId: void 0, value: 0 });
-  const reservedPaddingBottom = 24 + (latestUserMessageReservedSpace.messageId === latestUserMessageId ? latestUserMessageReservedSpace.value : 0);
-  const measureLatestUserMessageReservedSpace = (0, import_react11.useCallback)((messageId) => {
+  const [latestTurnMinHeight, setLatestTurnMinHeight] = (0, import_react11.useState)(0);
+  const measureLatestTurnMinHeight = (0, import_react11.useCallback)(() => {
+    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 = (0, import_react11.useCallback)(() => {
     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;
   }, []);
   (0, import_react11.useLayoutEffect)(() => {
     if (reservedSpaceFrameRef.current !== null) {
@@ -2357,12 +2779,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) {
@@ -2371,10 +2790,10 @@ var ChatThreadView = ({
         }
       };
     }
-    pendingScrollUserMessageIdRef.current = latestUserMessageId;
     reservedSpaceFrameRef.current = window.requestAnimationFrame(() => {
       reservedSpaceFrameRef.current = null;
-      measureLatestUserMessageReservedSpace(latestUserMessageId);
+      measureLatestTurnMinHeight();
+      scrollLatestUserMessageToTop();
     });
     return () => {
       if (reservedSpaceFrameRef.current !== null) {
@@ -2382,51 +2801,79 @@ var ChatThreadView = ({
         reservedSpaceFrameRef.current = null;
       }
     };
-  }, [latestUserMessageId, measureLatestUserMessageReservedSpace]);
+  }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
   (0, import_react11.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__ */ (0, import_jsx_runtime11.jsxs)(
-    Container,
-    {
-      ref: containerRef,
-      "data-testid": "chat-thread",
-      style: { paddingBottom: `${reservedPaddingBottom}px` },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          ChatThreadHistoryList,
-          {
-            mode: activeSessionMode,
-            historyMessages,
-            latestUserMessageId,
-            latestUserMessageRef,
-            onConfirmationSubmit,
-            onQuestionnaireSubmit,
-            renderMessageBlock
-          }
-        ),
-        streamingMessage ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StreamingGroup, { "data-testid": "chat-thread-streaming", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MessageSlot2, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          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__ */ (0, import_jsx_runtime10.jsxs)(Container, { ref: containerRef, "data-testid": "chat-thread", children: [
+    previousTurns.map((turn) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ConversationTurn, { "data-testid": "chat-thread-turn", children: [
+      turn.userMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
+        message: turn.userMessage,
+        mode: activeSessionMode,
+        onConfirmationSubmit,
+        onQuestionnaireSubmit,
+        renderMessageBlock
+      }) }) : null,
+      turn.responseMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
+        message,
+        mode: activeSessionMode,
+        onConfirmationSubmit,
+        onQuestionnaireSubmit,
+        renderMessageBlock
+      }) }, message.id))
+    ] }, turn.id)),
+    latestTurn ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      ConversationTurn,
+      {
+        "data-testid": "chat-thread-latest-turn",
+        style: latestTurnMinHeight > 0 ? { minHeight: `${latestTurnMinHeight}px` } : void 0,
+        children: [
+          latestTurn.userMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            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__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
+            message,
             mode: activeSessionMode,
-            message: streamingMessage,
             onConfirmationSubmit,
             onQuestionnaireSubmit,
             renderMessageBlock
-          }
-        ) }) }) : null,
-        error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ErrorState, { "data-testid": "chat-thread-error-state", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ErrorText, { children: error }),
-          onRetry ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ErrorActions, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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 = () => {
@@ -2470,9 +2917,9 @@ var ChatThread = () => {
     [sendRef]
   );
   if (!hasSessions || messages.length === 0 && !streamingMessage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChatThreadEmptyState, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatThreadEmptyState, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     ChatThreadView,
     {
       activeSessionMode,
@@ -2487,7 +2934,7 @@ var ChatThread = () => {
     }
   );
 };
-var Container = import_styled10.default.div`
+var Container = import_styled9.default.div`
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -2510,27 +2957,29 @@ var Container = import_styled10.default.div`
     background: transparent;
   }
 `;
-var MessageSlot2 = import_styled10.default.div`
+var MessageSlot = import_styled9.default.div`
   display: flex;
 `;
-var StreamingGroup = import_styled10.default.div`
-  display: contents;
+var ConversationTurn = import_styled9.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 `;
-var ErrorText = import_styled10.default.div`
+var ErrorText = import_styled9.default.div`
   color: #ff7b72;
   font-size: 14px;
 `;
-var ErrorState = import_styled10.default.div`
+var ErrorState = import_styled9.default.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
 `;
-var ErrorActions = import_styled10.default.div`
+var ErrorActions = import_styled9.default.div`
   display: flex;
   align-items: center;
 `;
-var RetryButton = import_styled10.default.button`
+var RetryButton = import_styled9.default.button`
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.04);
@@ -2547,7 +2996,7 @@ var RetryButton = import_styled10.default.button`
 
 // src/components/chat-composer/index.tsx
 var import_react15 = require("react");
-var import_styled15 = __toESM(require("@emotion/styled"));
+var import_styled14 = __toESM(require("@emotion/styled"));
 
 // src/components/chat-composer/lib/chat-composer.ts
 var DRAFT_CHAT_SESSION_ID_PREFIX = "draft-session-";
@@ -3112,8 +3561,8 @@ var useChatComposer = () => {
 
 // src/components/chat-composer/components/chat-composer-attachment-list.tsx
 var import_react14 = require("react");
-var import_styled11 = __toESM(require("@emotion/styled"));
-var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
+var import_styled10 = __toESM(require("@emotion/styled"));
+var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
 var ChatComposerAttachmentList = ({
   attachments,
   onRemoveAttachment
@@ -3122,18 +3571,18 @@ var ChatComposerAttachmentList = ({
   if (!attachments.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AttachmentList, { "data-testid": "chat-composer-attachment-list", children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AttachmentCard, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AttachmentList, { "data-testid": "chat-composer-attachment-list", children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(AttachmentCard, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         AttachmentPreviewButton,
         {
           type: "button",
           "aria-label": `${attachment.name} preview`,
           onClick: () => setActiveImage(attachment),
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AttachmentThumb, { src: attachment.previewUrl, alt: attachment.name })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AttachmentThumb, { src: attachment.previewUrl, alt: attachment.name })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         AttachmentRemoveButton,
         {
           type: "button",
@@ -3142,11 +3591,11 @@ var ChatComposerAttachmentList = ({
             event.stopPropagation();
             onRemoveAttachment(attachment.id);
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseGlyph, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseGlyph, { "aria-hidden": "true" })
         }
       )
     ] }, attachment.id)) }),
-    activeImage ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    activeImage ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ImageViewer,
       {
         src: activeImage.previewUrl,
@@ -3156,7 +3605,7 @@ var ChatComposerAttachmentList = ({
     ) : null
   ] });
 };
-var AttachmentList = import_styled11.default.div`
+var AttachmentList = import_styled10.default.div`
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
@@ -3178,7 +3627,7 @@ var AttachmentList = import_styled11.default.div`
     background: transparent;
   }
 `;
-var AttachmentCard = import_styled11.default.div`
+var AttachmentCard = import_styled10.default.div`
   position: relative;
   width: 108px;
   height: 72px;
@@ -3187,7 +3636,7 @@ var AttachmentCard = import_styled11.default.div`
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.04);
 `;
-var AttachmentPreviewButton = import_styled11.default.button`
+var AttachmentPreviewButton = import_styled10.default.button`
   width: 100%;
   height: 100%;
   padding: 0;
@@ -3195,13 +3644,13 @@ var AttachmentPreviewButton = import_styled11.default.button`
   background: transparent;
   cursor: zoom-in;
 `;
-var AttachmentThumb = import_styled11.default.img`
+var AttachmentThumb = import_styled10.default.img`
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 `;
-var AttachmentRemoveButton = import_styled11.default.button`
+var AttachmentRemoveButton = import_styled10.default.button`
   position: absolute;
   top: 6px;
   right: 6px;
@@ -3239,7 +3688,7 @@ var AttachmentRemoveButton = import_styled11.default.button`
     background: rgba(30, 30, 35, 0.98);
   }
 `;
-var CloseGlyph = import_styled11.default.span`
+var CloseGlyph = import_styled10.default.span`
   position: relative;
   width: 11px;
   height: 11px;
@@ -3268,9 +3717,9 @@ var CloseGlyph = import_styled11.default.span`
 `;
 
 // src/components/chat-composer/components/chat-model-control.tsx
-var import_styled12 = __toESM(require("@emotion/styled"));
+var import_styled11 = __toESM(require("@emotion/styled"));
 var import_compass_ui = require("@xinghunm/compass-ui");
-var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
 var ChatModelControl = ({
   selectedModel,
   availableModels,
@@ -3281,7 +3730,7 @@ var ChatModelControl = ({
   onReloadModels
 }) => {
   if (isModelsError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       ModelReloadButton,
       {
         type: "button",
@@ -3289,8 +3738,8 @@ var ChatModelControl = ({
         "aria-label": "Reload",
         onClick: onReloadModels,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "Failed to load models" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Failed to load models" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             ReloadIcon,
             {
               "data-testid": "chat-model-reload-icon",
@@ -3301,8 +3750,8 @@ var ChatModelControl = ({
               fill: "currentColor",
               xmlns: "http://www.w3.org/2000/svg",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("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" })
               ]
             }
           )
@@ -3311,11 +3760,11 @@ var ChatModelControl = ({
     );
   }
   if (isModelsLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: "Loading models..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModelBadge, { children: "Loading models..." });
   }
   if (hasModels && selectedModel) {
     if (availableModels.length > 1) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         ModelSelect,
         {
           "data-testid": "chat-model-select",
@@ -3329,11 +3778,11 @@ var ChatModelControl = ({
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: selectedModel });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModelBadge, { children: selectedModel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModelBadge, { children: "No model available" });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModelBadge, { children: "No model available" });
 };
-var ModelBadge = import_styled12.default.span`
+var ModelBadge = import_styled11.default.span`
   border-radius: 999px;
   border: 1px solid var(--border-hover);
   padding: 5px 12px;
@@ -3342,7 +3791,7 @@ var ModelBadge = import_styled12.default.span`
   color: var(--text-secondary);
   line-height: 12px;
 `;
-var ModelReloadButton = import_styled12.default.button`
+var ModelReloadButton = import_styled11.default.button`
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -3367,10 +3816,10 @@ var ModelReloadButton = import_styled12.default.button`
     color: rgba(255, 255, 255, 0.88);
   }
 `;
-var ReloadIcon = import_styled12.default.svg`
+var ReloadIcon = import_styled11.default.svg`
   flex-shrink: 0;
 `;
-var ModelSelect = (0, import_styled12.default)(import_compass_ui.Select)`
+var ModelSelect = (0, import_styled11.default)(import_compass_ui.Select)`
   && {
     width: auto;
     min-width: 0;
@@ -3390,16 +3839,16 @@ var ModelSelect = (0, import_styled12.default)(import_compass_ui.Select)`
 `;
 
 // src/components/chat-composer/components/chat-mode-control.tsx
-var import_styled13 = __toESM(require("@emotion/styled"));
+var import_styled12 = __toESM(require("@emotion/styled"));
 var import_compass_ui2 = require("@xinghunm/compass-ui");
-var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
 var ChatModeControl = ({
   value,
   disabled = false,
   labels,
   onChange
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     ModeSelect,
     {
       "data-testid": "chat-mode-select",
@@ -3414,7 +3863,7 @@ var ChatModeControl = ({
     }
   );
 };
-var ModeSelect = (0, import_styled13.default)(import_compass_ui2.Select)`
+var ModeSelect = (0, import_styled12.default)(import_compass_ui2.Select)`
   && {
     flex: 0 1 auto;
     width: auto;
@@ -3435,10 +3884,10 @@ var ModeSelect = (0, import_styled13.default)(import_compass_ui2.Select)`
 `;
 
 // src/components/chat-composer/components/chat-send-actions.tsx
-var import_styled14 = __toESM(require("@emotion/styled"));
+var import_styled13 = __toESM(require("@emotion/styled"));
 var import_compass_ui3 = require("@xinghunm/compass-ui");
-var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
-var ArrowUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
+var ArrowUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "svg",
   {
     "aria-hidden": "true",
@@ -3447,7 +3896,7 @@ var ArrowUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     viewBox: "0 0 12 12",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "path",
       {
         d: "M6 10V2M6 2L2 6M6 2L10 6",
@@ -3465,7 +3914,7 @@ var ChatSendActions = ({
   isStopping,
   onStop,
   onSend
-}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   StopButton,
   {
     type: "button",
@@ -3475,14 +3924,14 @@ var ChatSendActions = ({
     disabled: isStopping,
     shape: "circle",
     onClick: () => void onStop(),
-    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StopGlyph, { "aria-hidden": "true" })
+    children: isStopping ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StopSpinner, { "aria-hidden": "true", "data-testid": "chat-composer-stop-spinner" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StopGlyph, { "aria-hidden": "true", "data-testid": "chat-composer-stop-glyph" })
   }
-) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   PrimaryButton,
   {
     $canSend: canSend,
     type: "button",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrowUpIcon, {}),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ArrowUpIcon, {}),
     "aria-label": "Send",
     "data-testid": "chat-composer-send",
     disabled: !canSend,
@@ -3490,7 +3939,7 @@ var ChatSendActions = ({
     onClick: () => void onSend()
   }
 ) });
-var PrimaryButton = (0, import_styled14.default)(import_compass_ui3.Button)`
+var PrimaryButton = (0, import_styled13.default)(import_compass_ui3.Button)`
   && {
     min-width: 24px;
     width: 24px;
@@ -3516,7 +3965,7 @@ var PrimaryButton = (0, import_styled14.default)(import_compass_ui3.Button)`
     }
   }
 `;
-var StopButton = (0, import_styled14.default)(import_compass_ui3.Button)`
+var StopButton = (0, import_styled13.default)(import_compass_ui3.Button)`
   && {
     min-width: 24px;
     width: 24px;
@@ -3544,17 +3993,35 @@ var StopButton = (0, import_styled14.default)(import_compass_ui3.Button)`
     }
   }
 `;
-var StopGlyph = import_styled14.default.span`
+var StopGlyph = import_styled13.default.span`
   width: 8px;
   height: 8px;
   border-radius: 2px;
   background: #1b1b1b;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
 `;
+var StopSpinner = import_styled13.default.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
-var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
-var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
+var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "svg",
   {
     "aria-hidden": "true",
@@ -3563,7 +4030,7 @@ var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
   }
 );
 var ChatComposerView = ({
@@ -3623,8 +4090,8 @@ var ChatComposerView = ({
     event.preventDefault();
     onPasteImages(imageFiles);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Container2, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Surface, { "data-testid": "chat-composer-surface", children: [
-    enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Container2, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Surface, { "data-testid": "chat-composer-surface", children: [
+    enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "input",
       {
         ref: imageInputRef,
@@ -3636,15 +4103,15 @@ var ChatComposerView = ({
         onChange: handlePickImages
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       ChatComposerAttachmentList,
       {
         attachments,
         onRemoveAttachment
       }
     ),
-    attachmentNotice === "limit_reached" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    attachmentNotice === "limit_reached" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Input,
       {
         "data-testid": "chat-composer-input",
@@ -3655,18 +4122,18 @@ var ChatComposerView = ({
         placeholder
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Actions2, { "data-testid": "chat-composer-actions", children: [
-      enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Actions2, { "data-testid": "chat-composer-actions", children: [
+      enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         AttachButton,
         {
           type: "button",
           "data-testid": "chat-composer-attach-image",
           "aria-label": "Attach image",
           onClick: () => imageInputRef.current?.click(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PlusIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PlusIcon, {})
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         ChatModeControl,
         {
           value: selectedMode,
@@ -3675,7 +4142,7 @@ var ChatComposerView = ({
           onChange: onSelectedModeChange
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         ChatModelControl,
         {
           selectedModel,
@@ -3687,7 +4154,7 @@ var ChatComposerView = ({
           onReloadModels
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         ChatSendActions,
         {
           canSend,
@@ -3715,7 +4182,7 @@ var ChatComposer = () => {
     plan: labels.modeLabelPlan,
     agent: labels.modeLabelAgent
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     ChatComposerView,
     {
       value: state.value,
@@ -3745,10 +4212,10 @@ var ChatComposer = () => {
     }
   );
 };
-var Container2 = import_styled15.default.div`
+var Container2 = import_styled14.default.div`
   padding: 0 16px 16px;
 `;
-var Surface = import_styled15.default.div`
+var Surface = import_styled14.default.div`
   background: var(--border-color);
   border-radius: 20px;
   border: 1px solid var(--border-hover);
@@ -3757,7 +4224,7 @@ var Surface = import_styled15.default.div`
     0 12px 36px rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(10px);
 `;
-var AttachmentNotice = import_styled15.default.div`
+var AttachmentNotice = import_styled14.default.div`
   margin: 10px 12px 0;
   padding: 8px 10px;
   border-radius: 10px;
@@ -3767,7 +4234,7 @@ var AttachmentNotice = import_styled15.default.div`
   font-size: 12px;
   line-height: 1.4;
 `;
-var Input = import_styled15.default.textarea`
+var Input = import_styled14.default.textarea`
   width: 100%;
   min-height: 96px;
   resize: none;
@@ -3789,14 +4256,14 @@ var Input = import_styled15.default.textarea`
     display: none;
   }
 `;
-var Footer = import_styled15.default.div`
+var Footer = import_styled14.default.div`
   display: flex;
   align-items: flex-end;
   justify-content: stretch;
   gap: 16px;
   padding: 0 14px 14px;
 `;
-var Actions2 = import_styled15.default.div`
+var Actions2 = import_styled14.default.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -3805,7 +4272,7 @@ var Actions2 = import_styled15.default.div`
   justify-content: flex-end;
   gap: 8px;
 `;
-var AttachButton = import_styled15.default.button`
+var AttachButton = import_styled14.default.button`
   width: 28px;
   height: 28px;
   display: grid;
@@ -3822,42 +4289,42 @@ var AttachButton = import_styled15.default.button`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-var import_styled17 = __toESM(require("@emotion/styled"));
+var import_styled16 = __toESM(require("@emotion/styled"));
 
 // src/components/chat-conversation-list/components/chat-session-item.tsx
 var import_react16 = require("react");
-var import_styled16 = __toESM(require("@emotion/styled"));
-var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
+var import_styled15 = __toESM(require("@emotion/styled"));
+var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
 var ChatSessionItem = (0, import_react16.memo)(
   ({ session, isActive, modeLabel, onClick }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       SessionButton,
       {
         type: "button",
         "data-active": isActive,
         onClick: () => onClick(session.sessionId),
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SessionMeta, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SessionTitle, { children: session.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModeBadge, { children: modeLabel })
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(SessionMeta, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SessionTitle, { children: session.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ModeBadge, { children: modeLabel })
         ] })
       }
     );
   }
 );
 ChatSessionItem.displayName = "ChatSessionItem";
-var SessionMeta = import_styled16.default.div`
+var SessionMeta = import_styled15.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
 `;
-var SessionTitle = import_styled16.default.span`
+var SessionTitle = import_styled15.default.span`
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var SessionButton = import_styled16.default.button`
+var SessionButton = import_styled15.default.button`
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 12px;
@@ -3871,7 +4338,7 @@ var SessionButton = import_styled16.default.button`
     background: rgba(255, 255, 255, 0.08);
   }
 `;
-var ModeBadge = import_styled16.default.span`
+var ModeBadge = import_styled15.default.span`
   flex-shrink: 0;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -3883,7 +4350,7 @@ var ModeBadge = import_styled16.default.span`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
 var ChatConversationList = () => {
   const { labels } = useChatContext();
   const sessions = useChatStore((s) => s.sessions);
@@ -3906,12 +4373,12 @@ var ChatConversationList = () => {
     });
     createSession(session);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Container3, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Toolbar, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title4, { children: "Sessions" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: handleCreateSession, children: labels.newChat })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Container3, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Toolbar, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Title4, { children: "Sessions" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: handleCreateSession, children: labels.newChat })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       ChatSessionItem,
       {
         session,
@@ -3923,7 +4390,7 @@ var ChatConversationList = () => {
     )) })
   ] });
 };
-var Container3 = import_styled17.default.aside`
+var Container3 = import_styled16.default.aside`
   width: 280px;
   min-width: 280px;
   border-right: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
@@ -3931,18 +4398,18 @@ var Container3 = import_styled17.default.aside`
   flex-direction: column;
   background: rgba(255, 255, 255, 0.02);
 `;
-var Toolbar = import_styled17.default.div`
+var Toolbar = import_styled16.default.div`
   padding: 20px 16px 12px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 `;
-var Title4 = import_styled17.default.h2`
+var Title4 = import_styled16.default.h2`
   margin: 0;
   font-size: 14px;
   color: var(--text-secondary);
 `;
-var CreateButton = import_styled17.default.button`
+var CreateButton = import_styled16.default.button`
   border: none;
   border-radius: 12px;
   padding: 12px 14px;
@@ -3951,7 +4418,7 @@ var CreateButton = import_styled17.default.button`
   text-align: left;
   cursor: pointer;
 `;
-var List2 = import_styled17.default.div`
+var List2 = import_styled16.default.div`
   padding: 0 12px 16px;
   display: flex;
   flex-direction: column;
@@ -3960,8 +4427,8 @@ var List2 = import_styled17.default.div`
 `;
 
 // src/components/ai-chat/index.tsx
-var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
-var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
+var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   import_compass_ui4.ConfigProvider,
   {
     theme: {
@@ -3996,23 +4463,23 @@ var AiChat = ({ showConversationList = false, ...providerProps }) => /* @__PURE_
         }
       }
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Root, { "data-testid": "ai-chat", children: [
-      showConversationList ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatConversationList, {}) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Workspace, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatThread, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatComposer, {})
+    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AiChatProvider, { ...providerProps, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Root, { "data-testid": "ai-chat", children: [
+      showConversationList ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatConversationList, {}) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Workspace, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatThread, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatComposer, {})
       ] })
     ] }) })
   }
 );
-var Root = import_styled18.default.div`
+var Root = import_styled17.default.div`
   display: flex;
   width: 100%;
   height: 100%;
   min-height: 0;
   overflow: hidden;
 `;
-var Workspace = import_styled18.default.section`
+var Workspace = import_styled17.default.section`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -4024,6 +4491,7 @@ var Workspace = import_styled18.default.section`
   AiChat,
   AiChatProvider,
   CHAT_AGENT_MODES,
+  CHAT_MESSAGE_RENDER_ORDERS,
   ChatComposer,
   ChatConversationList,
   ChatThread,