@xinghunm/ai-chat 0.3.0 → 1.0.0

package/dist/index.mjs

@@ -31,10 +31,18 @@ var DEFAULT_AI_CHAT_LABELS = {
   attachmentLimitNotice: "Images exceeded the limit. Only the first 10 images were kept.",
   userRoleLabel: "User",
   assistantRoleLabel: "Assistant",
+  expandMessageAriaLabel: "Expand message",
+  collapseMessageAriaLabel: "Collapse message",
+  expandComposerAriaLabel: "Expand composer",
+  collapseComposerAriaLabel: "Collapse composer",
   stoppedResponse: "Response stopped",
   assistantStreamingAriaLabel: "assistant streaming",
   networkError: "Network request failed. Please try again.",
-  genericError: "Something went wrong. Please try again."
+  genericError: "Something went wrong. Please try again.",
+  questionnaireSubmitting: "Submitting...",
+  questionnaireSubmitted: "Selection submitted. Waiting for the plan to continue...",
+  questionnaireValidationPrefix: "Please complete:",
+  questionnaireSubmitFailed: "Failed to submit. Please try again."
 };
 
 // src/store/chat-store.ts
@@ -50,6 +58,24 @@ var resolveSessionTitleFromMessage = (message) => {
   }
   return DEFAULT_CHAT_SESSION_TITLE;
 };
+var mergeStreamingBlocks = (existingBlocks, incomingBlocks) => {
+  const nextBlocks = [...existingBlocks ?? []];
+  incomingBlocks.forEach((incomingBlock) => {
+    if (incomingBlock.type !== "questionnaire") {
+      nextBlocks.push(incomingBlock);
+      return;
+    }
+    const existingIndex = nextBlocks.findIndex(
+      (block) => block.type === "questionnaire" && block.questionnaire.questionnaireId === incomingBlock.questionnaire.questionnaireId
+    );
+    if (existingIndex === -1) {
+      nextBlocks.push(incomingBlock);
+      return;
+    }
+    nextBlocks[existingIndex] = incomingBlock;
+  });
+  return nextBlocks;
+};
 var finalizeStreamingMessage = (state, sessionId, status, clearError = false) => {
   const message = state.streamingMessageBySession[sessionId];
   const hasRenderableMessagePayload = Boolean(
@@ -239,10 +265,15 @@ var createChatStore = (initialState) => createStore((set, get) => ({
     const target = state.streamingMessageBySession[sessionId];
     if (!target)
       return;
+    const nextBlocks = patch.blocks !== void 0 ? mergeStreamingBlocks(target.blocks, patch.blocks) : target.blocks;
     set({
       streamingMessageBySession: {
         ...state.streamingMessageBySession,
-        [sessionId]: { ...target, ...patch }
+        [sessionId]: {
+          ...target,
+          ...patch,
+          ...patch.blocks !== void 0 ? { blocks: nextBlocks } : {}
+        }
       }
     });
   },
@@ -462,9 +493,27 @@ var DEFAULT_CHAT_TRANSPORT_ENDPOINTS = {
   completions: "/chat/completions",
   terminate: "/chat/terminate"
 };
+var createToolExecutionHeaders = (policy) => {
+  if (!policy?.enabled) {
+    return {};
+  }
+  return {
+    "X-Tool-Approval-Required": String(Boolean(policy.approvalRequired)),
+    ...typeof policy.approvalTimeoutSec === "number" ? { "X-Tool-Approval-Timeout": String(policy.approvalTimeoutSec) } : {}
+  };
+};
+var createModeDefaultHeaders = (mode) => {
+  if (mode === "ask" || mode === "plan") {
+    return {
+      "X-Tool-Approval-Required": "false"
+    };
+  }
+  return {};
+};
 var createDefaultChatTransport = ({
   apiBaseUrl,
   authToken,
+  toolExecutionPolicy,
   streamHeaders,
   transformStreamPacket,
   endpoints,
@@ -475,6 +524,10 @@ var createDefaultChatTransport = ({
     ...DEFAULT_CHAT_TRANSPORT_ENDPOINTS,
     ...endpoints
   };
+  const resolvedStreamHeaders = {
+    ...createToolExecutionHeaders(toolExecutionPolicy),
+    ...streamHeaders
+  };
   return {
     getModels: () => getChatModels(client, resolvedEndpoints.models),
     startStream: async ({
@@ -488,12 +541,16 @@ var createDefaultChatTransport = ({
       onDone,
       onError
     }) => {
+      const requestHeaders = {
+        ...createModeDefaultHeaders(mode),
+        ...resolvedStreamHeaders
+      };
       await startChatStream({
         apiBaseUrl,
         endpointPath: resolvedEndpoints.completions,
         sessionId,
         authToken,
-        requestHeaders: streamHeaders,
+        requestHeaders,
         model,
         mode,
         content,
@@ -522,6 +579,8 @@ var AiChatProvider = (props) => {
     defaultMode,
     labels,
     renderMessageBlock,
+    handleQuestionnaireSubmit,
+    handleConfirmationSubmit,
     messageRenderOrder,
     enableImageAttachments = true,
     children
@@ -577,6 +636,8 @@ var AiChatProvider = (props) => {
       sendRef,
       retryRef,
       renderMessageBlock,
+      handleQuestionnaireSubmit,
+      handleConfirmationSubmit,
       messageRenderOrder,
       transformStreamPacket: defaultTransformStreamPacket,
       enableImageAttachments
@@ -587,6 +648,8 @@ var AiChatProvider = (props) => {
       defaultAuthToken,
       defaultTransformStreamPacket,
       enableImageAttachments,
+      handleConfirmationSubmit,
+      handleQuestionnaireSubmit,
       labels,
       messageRenderOrder,
       renderMessageBlock,
@@ -600,7 +663,7 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-import { useCallback as useCallback2, useLayoutEffect, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
+import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
 import styled9 from "@emotion/styled";
 
 // src/context/use-chat-context.ts
@@ -621,7 +684,7 @@ var useChatStore = (selector) => {
 var CHAT_THREAD_SCROLL_TOP_GAP = 16;
 
 // src/components/chat-thread/components/chat-message-item.tsx
-import { Fragment, memo, useState as useState4 } from "react";
+import { Fragment, memo, useCallback as useCallback2, useLayoutEffect, useState as useState3 } from "react";
 import styled7 from "@emotion/styled";
 import { keyframes } from "@emotion/react";
 import ReactMarkdown from "react-markdown";
@@ -870,7 +933,7 @@ var useChatMessageReveal = (message) => {
 };
 
 // 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";
+import { useEffect as useEffect2, useMemo as useMemo3, useReducer as useReducer2 } from "react";
 
 // src/components/chat-thread/lib/chat-message-timeline.ts
 var stringifyTimelineKeyPart = (value) => {
@@ -896,7 +959,7 @@ var getTimelineBlockKey = (block, index) => {
     case "confirmation_card":
       return `${index}:confirmation_card:${block.proposal.proposalId}`;
     case "result_summary":
-      return `${index}:result_summary:${block.summary.taskId}:${block.summary.status}`;
+      return `${index}:result_summary:${block.summary.summaryId}:${block.summary.status}`;
     case "questionnaire":
       return `${index}:questionnaire:${block.questionnaire.questionnaireId}`;
     case "custom":
@@ -1022,6 +1085,83 @@ var buildAnchoredTimelineSegments = ({
 };
 
 // src/components/chat-thread/hooks/use-timeline-block-anchors.ts
+var createTimelineAnchorState = ({
+  messageId,
+  currentBlockKeys
+}) => ({
+  messageId,
+  previousBlockKeys: currentBlockKeys,
+  timelineBlockAnchors: {},
+  visibleTimelineBlockKeys: {}
+});
+var timelineAnchorReducer = (state, action) => {
+  switch (action.type) {
+    case "reset-message":
+      if (state.messageId === action.messageId) {
+        return state;
+      }
+      return createTimelineAnchorState(action);
+    case "sync-anchors": {
+      const previousBlockKeys = new Set(state.previousBlockKeys);
+      const nextAnchors = action.currentBlockKeys.reduce(
+        (acc, blockKey) => {
+          const existingAnchor = state.timelineBlockAnchors[blockKey];
+          if (existingAnchor !== void 0) {
+            acc[blockKey] = existingAnchor;
+            return acc;
+          }
+          if (!previousBlockKeys.has(blockKey)) {
+            acc[blockKey] = action.timelineTextStreamLength;
+          }
+          return acc;
+        },
+        {}
+      );
+      const hasAnchorChanged = Object.keys(nextAnchors).length !== Object.keys(state.timelineBlockAnchors).length || Object.entries(nextAnchors).some(
+        ([blockKey, anchor]) => state.timelineBlockAnchors[blockKey] !== anchor
+      );
+      const hasPreviousKeysChanged = action.currentBlockKeys.length !== state.previousBlockKeys.length || action.currentBlockKeys.some(
+        (blockKey, index) => state.previousBlockKeys[index] !== blockKey
+      );
+      if (!hasAnchorChanged && !hasPreviousKeysChanged) {
+        return state;
+      }
+      return {
+        ...state,
+        previousBlockKeys: action.currentBlockKeys,
+        timelineBlockAnchors: hasAnchorChanged ? nextAnchors : state.timelineBlockAnchors
+      };
+    }
+    case "sync-visible": {
+      const nextVisibleBlockKeys = action.currentBlockKeys.reduce(
+        (acc, blockKey) => {
+          if (state.visibleTimelineBlockKeys[blockKey]) {
+            acc[blockKey] = true;
+            return acc;
+          }
+          const anchor = action.effectiveTimelineBlockAnchors[blockKey];
+          if (anchor !== void 0 && anchor <= action.displayedTimelineTextLength) {
+            acc[blockKey] = true;
+          }
+          return acc;
+        },
+        {}
+      );
+      const hasVisibleBlockChanged = Object.keys(nextVisibleBlockKeys).length !== Object.keys(state.visibleTimelineBlockKeys).length || Object.keys(nextVisibleBlockKeys).some(
+        (blockKey) => !state.visibleTimelineBlockKeys[blockKey]
+      );
+      if (!hasVisibleBlockChanged) {
+        return state;
+      }
+      return {
+        ...state,
+        visibleTimelineBlockKeys: nextVisibleBlockKeys
+      };
+    }
+    default:
+      return state;
+  }
+};
 var useTimelineBlockAnchors = ({
   blocks,
   displayedTimelineTextLength,
@@ -1029,8 +1169,6 @@ var useTimelineBlockAnchors = ({
   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]
@@ -1039,20 +1177,22 @@ var useTimelineBlockAnchors = ({
     () => getTimelineDisplayUnitCount(getTimelineTextStream(message.content, blocks)),
     [blocks, message.content]
   );
-  const previousTimelineStateRef = useRef3({
-    messageId: message.id,
-    blockKeys: currentTimelineBlockKeys,
-    textLength: timelineTextStreamLength
-  });
+  const [state, dispatch] = useReducer2(
+    timelineAnchorReducer,
+    {
+      messageId: message.id,
+      currentBlockKeys: currentTimelineBlockKeys
+    },
+    createTimelineAnchorState
+  );
   const effectiveTimelineBlockAnchors = useMemo3(() => {
     if (messageRenderOrder !== "timeline" || !isAssistantStreaming) {
-      return timelineBlockAnchors;
+      return state.timelineBlockAnchors;
     }
-    const previousTimelineState = previousTimelineStateRef.current;
-    const previousBlockKeys = new Set(previousTimelineState.blockKeys);
+    const previousBlockKeys = new Set(state.previousBlockKeys);
     return currentTimelineBlockKeys.reduce(
       (acc, blockKey) => {
-        const existingAnchor = timelineBlockAnchors[blockKey];
+        const existingAnchor = state.timelineBlockAnchors[blockKey];
         if (existingAnchor !== void 0) {
           acc[blockKey] = existingAnchor;
           return acc;
@@ -1062,125 +1202,70 @@ var useTimelineBlockAnchors = ({
         }
         return acc;
       },
-      { ...timelineBlockAnchors }
+      { ...state.timelineBlockAnchors }
     );
   }, [
     currentTimelineBlockKeys,
     isAssistantStreaming,
     messageRenderOrder,
-    timelineBlockAnchors,
+    state.previousBlockKeys,
+    state.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
-      };
+    dispatch({
+      type: "reset-message",
+      messageId: message.id,
+      currentBlockKeys: currentTimelineBlockKeys
+    });
+  }, [currentTimelineBlockKeys, message.id]);
+  useEffect2(() => {
+    if (messageRenderOrder !== "timeline" || !isAssistantStreaming) {
       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
-  ]);
+    dispatch({
+      type: "sync-anchors",
+      currentBlockKeys: currentTimelineBlockKeys,
+      timelineTextStreamLength
+    });
+  }, [currentTimelineBlockKeys, isAssistantStreaming, messageRenderOrder, timelineTextStreamLength]);
   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);
-    }
+    dispatch({
+      type: "sync-visible",
+      currentBlockKeys: currentTimelineBlockKeys,
+      effectiveTimelineBlockAnchors,
+      displayedTimelineTextLength
+    });
   }, [
     currentTimelineBlockKeys,
     displayedTimelineTextLength,
     effectiveTimelineBlockAnchors,
-    messageRenderOrder,
-    timelineBlockAnchors,
-    visibleTimelineBlockKeys
+    messageRenderOrder
   ]);
   return {
-    timelineBlockAnchors: effectiveTimelineBlockAnchors,
-    visibleTimelineBlockKeys
+    timelineBlockAnchors: messageRenderOrder === "timeline" ? effectiveTimelineBlockAnchors : {},
+    visibleTimelineBlockKeys: messageRenderOrder === "timeline" ? state.visibleTimelineBlockKeys : {}
   };
 };
 
-// src/components/chat-thread/components/pde-ai-execution-confirmation-card.tsx
+// src/components/chat-thread/components/execution-confirmation-card.tsx
 import styled from "@emotion/styled";
 import { jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
-var PDEAIExecutionConfirmationCard = ({
+var ExecutionConfirmationCard = ({
   proposal,
   interactive = false,
   onApply,
   onConfirm,
   onRevise
 }) => {
-  return /* @__PURE__ */ jsxs(Card, { "data-testid": "pde-ai-execution-confirmation-card", children: [
+  return /* @__PURE__ */ jsxs(Card, { "data-testid": "execution-confirmation-card", children: [
     /* @__PURE__ */ jsxs(Header, { children: [
       /* @__PURE__ */ jsx2(Eyebrow, { children: "Execution Proposal" }),
-      /* @__PURE__ */ jsx2(Title, { children: proposal.equationName }),
-      proposal.solverName ? /* @__PURE__ */ jsx2(Subtitle, { children: proposal.solverName }) : null
+      /* @__PURE__ */ jsx2(Title, { children: proposal.resourceName }),
+      proposal.executorName ? /* @__PURE__ */ jsx2(Subtitle, { children: proposal.executorName }) : null
     ] }),
     /* @__PURE__ */ jsx2(SummaryList, { children: proposal.parameterSummary.map((item) => /* @__PURE__ */ jsxs(SummaryItem, { children: [
       /* @__PURE__ */ jsx2(SummaryLabel, { children: item.label }),
@@ -1188,21 +1273,13 @@ var PDEAIExecutionConfirmationCard = ({
     ] }, `${item.fieldPath ?? item.label}-${item.value}`)) }),
     proposal.warnings?.length ? /* @__PURE__ */ jsx2(Warnings, { children: proposal.warnings.map((warning) => /* @__PURE__ */ jsx2(Warning, { children: warning }, warning)) }) : null,
     interactive ? /* @__PURE__ */ jsxs(Actions, { children: [
-      onApply && /* @__PURE__ */ jsx2(ActionButton, { type: "button", "data-testid": "pde-ai-confirmation-apply", onClick: onApply, children: "Apply to Parameters" }),
-      onConfirm && /* @__PURE__ */ jsx2(
-        ActionButton,
-        {
-          type: "button",
-          "data-testid": "pde-ai-confirmation-confirm",
-          onClick: onConfirm,
-          children: "Confirm Execution"
-        }
-      ),
+      onApply && /* @__PURE__ */ jsx2(ActionButton, { type: "button", "data-testid": "confirmation-apply", onClick: onApply, children: "Apply to Parameters" }),
+      onConfirm && /* @__PURE__ */ jsx2(ActionButton, { type: "button", "data-testid": "confirmation-confirm", onClick: onConfirm, children: "Confirm Execution" }),
       onRevise && /* @__PURE__ */ jsx2(
         SecondaryActionButton,
         {
           type: "button",
-          "data-testid": "pde-ai-confirmation-revise",
+          "data-testid": "confirmation-revise",
           onClick: onRevise,
           children: "Revise Plan"
         }
@@ -1299,10 +1376,10 @@ var SecondaryActionButton = styled(ActionButton)`
   border: 1px solid rgba(255, 255, 255, 0.14);
 `;
 
-// src/components/chat-thread/components/pde-ai-notice-card.tsx
+// src/components/chat-thread/components/notice-card.tsx
 import styled2 from "@emotion/styled";
 import { jsx as jsx3 } from "@emotion/react/jsx-runtime";
-var PDEAINoticeCard = ({ text, tone }) => /* @__PURE__ */ jsx3(Card2, { "data-testid": "pde-ai-notice-card", "data-tone": tone, children: text });
+var NoticeCard = ({ text, tone }) => /* @__PURE__ */ jsx3(Card2, { "data-testid": "notice-card", "data-tone": tone, children: text });
 var Card2 = styled2.div`
   padding: 12px 14px;
   border-radius: 16px;
@@ -1328,10 +1405,10 @@ var Card2 = styled2.div`
   }
 `;
 
-// src/components/chat-thread/components/pde-ai-parameter-summary-card.tsx
+// src/components/chat-thread/components/parameter-summary-card.tsx
 import styled3 from "@emotion/styled";
 import { jsx as jsx4, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
-var PDEAIParameterSummaryCard = ({ items }) => /* @__PURE__ */ jsxs2(Card3, { "data-testid": "pde-ai-parameter-summary-card", children: [
+var ParameterSummaryCard = ({ items }) => /* @__PURE__ */ jsxs2(Card3, { "data-testid": "parameter-summary-card", children: [
   /* @__PURE__ */ jsx4(Title2, { children: "Parameter Summary" }),
   /* @__PURE__ */ jsx4(List, { children: items.map((item) => /* @__PURE__ */ jsxs2(ListItem, { children: [
     /* @__PURE__ */ jsx4(Label, { children: item.label }),
@@ -1375,11 +1452,17 @@ var Value = styled3.span`
   text-align: right;
 `;
 
-// src/components/chat-thread/components/pde-ai-questionnaire-card.tsx
-import { useState as useState3 } from "react";
+// src/components/chat-thread/components/questionnaire-card.tsx
+import { useState as useState2 } from "react";
 import styled4 from "@emotion/styled";
 import { jsx as jsx5, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var OTHER_OPTION_VALUE = "__other__";
+var DEFAULT_QUESTIONNAIRE_CARD_LABELS = {
+  submitting: "Submitting...",
+  submitted: "Selection submitted. Waiting for the plan to continue...",
+  validationPrefix: "Please complete:",
+  submitFailed: "Failed to submit. Please try again."
+};
 var createInitialAnswers = (questionnaire) => ({
   ...questionnaire.answers ?? {}
 });
@@ -1473,26 +1556,40 @@ var normalizeQuestionAnswer = (question, answer) => {
       return answer;
   }
 };
-var PDEAIQuestionnaireCardInner = ({
+var QuestionnaireCardInner = ({
   questionnaire,
   interactive = false,
-  onSubmit
+  onSubmit,
+  labels
 }) => {
-  const [answers, setAnswers] = useState3(
+  const [answers, setAnswers] = useState2(
     () => createInitialAnswers(questionnaire)
   );
-  const [errorMessage, setErrorMessage] = useState3(null);
-  const handleSubmit = () => {
+  const [errorMessage, setErrorMessage] = useState2(null);
+  const [isSubmitting, setIsSubmitting] = useState2(false);
+  const [isSubmitted, setIsSubmitted] = useState2(false);
+  const resolvedLabels = {
+    ...DEFAULT_QUESTIONNAIRE_CARD_LABELS,
+    ...labels
+  };
+  const hasExternalFailureStatus = questionnaire.status === "expired" || questionnaire.status === "failed";
+  const visibleErrorMessage = questionnaire.statusMessage ?? errorMessage;
+  const isInteractionLocked = !interactive || isSubmitting || isSubmitted || hasExternalFailureStatus;
+  const handleSubmit = async () => {
+    if (isSubmitting || isSubmitted) {
+      return;
+    }
     const missingQuestions = questionnaire.questions.filter(
       (question) => question.required && isMissingRequiredAnswer(question, answers)
     );
     if (missingQuestions.length > 0) {
       setErrorMessage(
-        `Please complete: ${missingQuestions.map((question) => question.label).join(", ")}`
+        `${resolvedLabels.validationPrefix} ${missingQuestions.map((question) => question.label).join(", ")}`
       );
       return;
     }
     setErrorMessage(null);
+    setIsSubmitting(true);
     const normalizedAnswers = Object.fromEntries(
       questionnaire.questions.flatMap((question) => {
         const value = normalizeQuestionAnswer(question, answers[question.id]);
@@ -1509,11 +1606,18 @@ var PDEAIQuestionnaireCardInner = ({
         return [`- ${question.label}: ${formatQuestionAnswer(question, value)}`];
       })
     ];
-    onSubmit?.({
-      questionnaireId: questionnaire.questionnaireId,
-      answers: normalizedAnswers,
-      content: contentLines.join("\n")
-    });
+    try {
+      await onSubmit?.({
+        questionnaireId: questionnaire.questionnaireId,
+        answers: normalizedAnswers,
+        content: contentLines.join("\n")
+      });
+      setIsSubmitted(true);
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : resolvedLabels.submitFailed);
+    } finally {
+      setIsSubmitting(false);
+    }
   };
   const renderQuestion = (question) => {
     const renderOptionChoice = ({
@@ -1528,13 +1632,13 @@ var PDEAIQuestionnaireCardInner = ({
       OptionChoiceItem,
       {
         role: "button",
-        tabIndex: interactive ? 0 : -1,
+        tabIndex: isInteractionLocked ? -1 : 0,
         "aria-pressed": isSelected,
         "data-selected": isSelected,
         "data-tone": tone,
-        "data-testid": `pde-ai-question-option-${questionId}-${index}`,
+        "data-testid": `question-option-${questionId}-${index}`,
         onClick: (event) => {
-          if (!interactive) {
+          if (isInteractionLocked) {
             return;
           }
           if (event.target instanceof HTMLElement && event.target.closest("input")) {
@@ -1543,7 +1647,7 @@ var PDEAIQuestionnaireCardInner = ({
           onClick();
         },
         onKeyDown: (event) => {
-          if (!interactive) {
+          if (isInteractionLocked) {
             return;
           }
           if (event.key !== "Enter" && event.key !== " ") {
@@ -1602,11 +1706,11 @@ var PDEAIQuestionnaireCardInner = ({
             inlineInput: singleSelectDraft.selectedValue === OTHER_OPTION_VALUE ? /* @__PURE__ */ jsx5(
               InlineOtherInput,
               {
-                "data-testid": `pde-ai-question-input-${question.id}`,
+                "data-testid": `question-input-${question.id}`,
                 type: "text",
                 value: singleSelectDraft.otherValue,
                 placeholder: "Other",
-                readOnly: !interactive,
+                readOnly: isInteractionLocked,
                 onClick: (event) => {
                   event.stopPropagation();
                 },
@@ -1627,11 +1731,11 @@ var PDEAIQuestionnaireCardInner = ({
         return /* @__PURE__ */ jsx5(QuestionBody, { children: /* @__PURE__ */ jsx5(
           TextInput,
           {
-            "data-testid": `pde-ai-question-input-${question.id}`,
+            "data-testid": `question-input-${question.id}`,
             type: "text",
             value: getTextInputValue(answers[question.id]),
             placeholder: question.placeholder,
-            readOnly: !interactive,
+            readOnly: isInteractionLocked,
             onChange: (event) => {
               setAnswers((current) => updateAnswerValue(current, question.id, event.target.value));
             }
@@ -1642,11 +1746,11 @@ var PDEAIQuestionnaireCardInner = ({
           /* @__PURE__ */ jsx5(
             TextInput,
             {
-              "data-testid": `pde-ai-question-input-${question.id}`,
+              "data-testid": `question-input-${question.id}`,
               type: "number",
               value: getNumberInputValue(answers[question.id]),
               placeholder: question.placeholder,
-              readOnly: !interactive,
+              readOnly: isInteractionLocked,
               onChange: (event) => {
                 setAnswers(
                   (current) => updateAnswerValue(
@@ -1681,7 +1785,7 @@ var PDEAIQuestionnaireCardInner = ({
         return null;
     }
   };
-  return /* @__PURE__ */ jsxs3(Card4, { "data-testid": "pde-ai-questionnaire-card", children: [
+  return /* @__PURE__ */ jsxs3(Card4, { "data-testid": "questionnaire-card", children: [
     questionnaire.title ? /* @__PURE__ */ jsx5(Title3, { children: questionnaire.title }) : null,
     questionnaire.description ? /* @__PURE__ */ jsx5(Description, { children: questionnaire.description }) : null,
     /* @__PURE__ */ jsx5(QuestionList, { children: questionnaire.questions.map((question) => /* @__PURE__ */ jsxs3(QuestionCard, { children: [
@@ -1691,24 +1795,28 @@ var PDEAIQuestionnaireCardInner = ({
       ] }),
       renderQuestion(question)
     ] }, question.id)) }),
-    errorMessage ? /* @__PURE__ */ jsx5(ErrorMessage, { "data-testid": "pde-ai-questionnaire-error", children: errorMessage }) : null,
-    interactive ? /* @__PURE__ */ jsx5(
+    visibleErrorMessage ? /* @__PURE__ */ jsx5(ErrorMessage, { "data-testid": "questionnaire-error", children: visibleErrorMessage }) : null,
+    isSubmitted ? /* @__PURE__ */ jsx5(SuccessMessage, { "data-testid": "questionnaire-success", children: resolvedLabels.submitted }) : interactive && !hasExternalFailureStatus ? /* @__PURE__ */ jsx5(
       SubmitButton,
       {
         type: "button",
-        "data-testid": "pde-ai-questionnaire-submit",
-        onClick: handleSubmit,
-        children: questionnaire.submitLabel ?? "Submit"
+        "data-testid": "questionnaire-submit",
+        disabled: isInteractionLocked,
+        onClick: () => {
+          void handleSubmit();
+        },
+        children: isSubmitting ? resolvedLabels.submitting : questionnaire.submitLabel ?? "Submit"
       }
     ) : null
   ] });
 };
 var getQuestionnaireStateKey = (questionnaire) => JSON.stringify([
   questionnaire.questionnaireId,
-  questionnaire.answers ?? {},
-  questionnaire.questions
+  questionnaire.questions,
+  questionnaire.status,
+  questionnaire.statusMessage
 ]);
-var PDEAIQuestionnaireCard = (props) => /* @__PURE__ */ jsx5(PDEAIQuestionnaireCardInner, { ...props }, getQuestionnaireStateKey(props.questionnaire));
+var QuestionnaireCard = (props) => /* @__PURE__ */ jsx5(QuestionnaireCardInner, { ...props }, getQuestionnaireStateKey(props.questionnaire));
 var Card4 = styled4.section`
   display: grid;
   gap: 14px;
@@ -1856,6 +1964,10 @@ var ErrorMessage = styled4.div`
   color: rgba(255, 145, 145, 0.96);
   font-size: 12px;
 `;
+var SuccessMessage = styled4.div`
+  color: rgba(164, 255, 210, 0.96);
+  font-size: 12px;
+`;
 var SubmitButton = styled4.button`
   justify-self: flex-start;
   border: none;
@@ -1866,12 +1978,17 @@ var SubmitButton = styled4.button`
   font-weight: 700;
   padding: 10px 14px;
   cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.72;
+  }
 `;
 
-// src/components/chat-thread/components/pde-ai-result-summary-card.tsx
+// src/components/chat-thread/components/result-summary-card.tsx
 import styled5 from "@emotion/styled";
 import { jsx as jsx6, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
-var PDEAIResultSummaryCard = ({ summary }) => /* @__PURE__ */ jsxs4(Card5, { "data-testid": "pde-ai-result-summary-card", "data-status": summary.status, children: [
+var ResultSummaryCard = ({ summary }) => /* @__PURE__ */ jsxs4(Card5, { "data-testid": "result-summary-card", "data-status": summary.status, children: [
   /* @__PURE__ */ jsx6(Eyebrow2, { children: summary.status }),
   /* @__PURE__ */ jsx6(Headline, { children: summary.headline }),
   /* @__PURE__ */ jsx6(Details, { children: summary.details.map((detail) => /* @__PURE__ */ jsx6(Detail, { children: detail }, detail)) })
@@ -1917,7 +2034,7 @@ var Detail = styled5.li`
 
 // src/components/chat-thread/components/image-viewer.tsx
 import styled6 from "@emotion/styled";
-import { useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
 import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
 var Overlay = styled6.div`
   position: fixed;
@@ -1936,7 +2053,7 @@ var Img = styled6.img`
   border-radius: 4px;
 `;
 var ImageViewer = ({ src, alt, onClose }) => {
-  const overlayRef = useRef4(null);
+  const overlayRef = useRef3(null);
   useEffect3(() => {
     const handleKey = (e) => {
       if (e.key === "Escape")
@@ -1967,6 +2084,7 @@ var ImageViewer = ({ src, alt, onClose }) => {
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
 var MARKDOWN_REMARK_PLUGINS = [remarkGfm, remarkMath];
 var MARKDOWN_REHYPE_PLUGINS = [rehypeKatex];
+var USER_MESSAGE_COLLAPSE_HEIGHT_PX = 120;
 var MARKDOWN_COMPONENTS = {
   table: ({ node: _node, ...props }) => /* @__PURE__ */ jsx8(TableWrapper, { children: /* @__PURE__ */ jsx8("table", { ...props }) })
 };
@@ -1979,10 +2097,101 @@ var renderMarkdownContent = (content) => /* @__PURE__ */ jsx8(
     children: content
   }
 );
+var renderPlainTextContent = (content) => content;
+var CollapseIcon = ({ expanded }) => /* @__PURE__ */ jsx8(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx8(
+      "path",
+      {
+        d: "M4 6l4 4 4-4",
+        stroke: "currentColor",
+        strokeWidth: "1.6",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        transform: expanded ? "rotate(180 8 8)" : void 0
+      }
+    )
+  }
+);
+var useUserMessageCollapse = ({
+  blocks,
+  displayedBlocks,
+  displayedContent,
+  enabled,
+  freshContent,
+  settledContent
+}) => {
+  const [isCollapsible, setIsCollapsible] = useState3(false);
+  const [isExpanded, setIsExpanded] = useState3(false);
+  const [bodyStackElement, setBodyStackElement] = useState3(null);
+  const syncCollapseState = useCallback2(
+    (element) => {
+      const nextCollapsible = enabled && (element?.scrollHeight ?? 0) > USER_MESSAGE_COLLAPSE_HEIGHT_PX;
+      setIsCollapsible(nextCollapsible);
+      if (!nextCollapsible) {
+        setIsExpanded(false);
+      }
+    },
+    [enabled]
+  );
+  const bodyStackRef = useCallback2(
+    (node) => {
+      setBodyStackElement(node);
+      syncCollapseState(node);
+    },
+    [syncCollapseState]
+  );
+  useLayoutEffect(() => {
+    if (!bodyStackElement) {
+      return;
+    }
+    const frameId = requestAnimationFrame(() => {
+      syncCollapseState(bodyStackElement);
+    });
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [
+    blocks,
+    bodyStackElement,
+    displayedBlocks,
+    displayedContent,
+    enabled,
+    freshContent,
+    settledContent,
+    syncCollapseState
+  ]);
+  useLayoutEffect(() => {
+    if (!bodyStackElement || !enabled || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      syncCollapseState(bodyStackElement);
+    });
+    observer.observe(bodyStackElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [bodyStackElement, enabled, syncCollapseState]);
+  return {
+    bodyStackRef,
+    isCollapsed: isCollapsible && !isExpanded,
+    isCollapsible,
+    isExpanded,
+    toggleExpanded: () => setIsExpanded((current) => !current)
+  };
+};
 var createExecutionConfirmationContent = (proposal) => [
   "Execution confirmed",
-  `- Equation: ${proposal.equationName}`,
-  ...proposal.solverName ? [`- Solver: ${proposal.solverName}`] : [],
+  `- Equation: ${proposal.resourceName}`,
+  ...proposal.executorName ? [`- Solver: ${proposal.executorName}`] : [],
   `- Proposal ID: ${proposal.proposalId}`
 ].join("\n");
 var areChatAttachmentsEqual = (previousAttachments, nextAttachments) => {
@@ -2004,10 +2213,10 @@ var areParameterSummaryItemsEqual = (previousItems, nextItems) => previousItems.
   const nextItem = nextItems[index];
   return item.label === nextItem?.label && item.value === nextItem.value && item.fieldPath === nextItem.fieldPath;
 });
-var areExecutionProposalsEqual = (previousProposal, nextProposal) => previousProposal.proposalId === nextProposal.proposalId && previousProposal.equationKey === nextProposal.equationKey && previousProposal.equationName === nextProposal.equationName && previousProposal.solverName === nextProposal.solverName && previousProposal.requiresConfirmation === nextProposal.requiresConfirmation && areParameterSummaryItemsEqual(previousProposal.parameterSummary, nextProposal.parameterSummary) && (previousProposal.warnings ?? []).length === (nextProposal.warnings ?? []).length && (previousProposal.warnings ?? []).every(
+var areExecutionProposalsEqual = (previousProposal, nextProposal) => previousProposal.proposalId === nextProposal.proposalId && previousProposal.resourceKey === nextProposal.resourceKey && previousProposal.resourceName === nextProposal.resourceName && previousProposal.executorName === nextProposal.executorName && previousProposal.requiresConfirmation === nextProposal.requiresConfirmation && areParameterSummaryItemsEqual(previousProposal.parameterSummary, nextProposal.parameterSummary) && (previousProposal.warnings ?? []).length === (nextProposal.warnings ?? []).length && (previousProposal.warnings ?? []).every(
   (warning, index) => warning === nextProposal.warnings?.[index]
 );
-var areResultSummariesEqual = (previousSummary, nextSummary) => previousSummary.taskId === nextSummary.taskId && previousSummary.status === nextSummary.status && previousSummary.headline === nextSummary.headline && previousSummary.details.length === nextSummary.details.length && previousSummary.details.every((detail, index) => detail === nextSummary.details[index]);
+var areResultSummariesEqual = (previousSummary, nextSummary) => previousSummary.summaryId === nextSummary.summaryId && previousSummary.status === nextSummary.status && previousSummary.headline === nextSummary.headline && previousSummary.details.length === nextSummary.details.length && previousSummary.details.every((detail, index) => detail === nextSummary.details[index]);
 var areStringArraysEqual = (previousValues, nextValues) => previousValues.length === nextValues.length && previousValues.every((value, index) => value === nextValues[index]);
 var areQuestionAnswersEqual = (previousAnswer, nextAnswer) => {
   if (Array.isArray(previousAnswer) || Array.isArray(nextAnswer)) {
@@ -2048,7 +2257,7 @@ var arePlanQuestionsEqual = (previousQuestion, nextQuestion) => {
       return false;
   }
 };
-var areQuestionnairesEqual = (previousQuestionnaire, nextQuestionnaire) => previousQuestionnaire.questionnaireId === nextQuestionnaire.questionnaireId && previousQuestionnaire.title === nextQuestionnaire.title && previousQuestionnaire.description === nextQuestionnaire.description && previousQuestionnaire.submitLabel === nextQuestionnaire.submitLabel && previousQuestionnaire.questions.length === nextQuestionnaire.questions.length && previousQuestionnaire.questions.every(
+var areQuestionnairesEqual = (previousQuestionnaire, nextQuestionnaire) => previousQuestionnaire.questionnaireId === nextQuestionnaire.questionnaireId && previousQuestionnaire.title === nextQuestionnaire.title && previousQuestionnaire.description === nextQuestionnaire.description && previousQuestionnaire.submitLabel === nextQuestionnaire.submitLabel && previousQuestionnaire.status === nextQuestionnaire.status && previousQuestionnaire.statusMessage === nextQuestionnaire.statusMessage && previousQuestionnaire.questions.length === nextQuestionnaire.questions.length && previousQuestionnaire.questions.every(
   (question, index) => arePlanQuestionsEqual(question, nextQuestionnaire.questions[index])
 ) && areQuestionAnswerMapsEqual(previousQuestionnaire.answers, nextQuestionnaire.answers);
 var areMessageBlocksEqual = (previousBlocks, nextBlocks) => {
@@ -2109,7 +2318,7 @@ var ChatMessageItemView = ({
   renderMessageBlock
 }) => {
   const { labels, messageRenderOrder = "blocks-first" } = useChatContext();
-  const [activeImage, setActiveImage] = useState4(void 0);
+  const [activeImage, setActiveImage] = useState3(void 0);
   const {
     displayedBlocks,
     displayedContent,
@@ -2129,6 +2338,8 @@ var ChatMessageItemView = ({
   const canSubmitConfirmation = isPlanMode && typeof onConfirmationSubmit === "function";
   const canSubmitQuestionnaire = isPlanMode && typeof onQuestionnaireSubmit === "function";
   const shouldShowStreamingCaret = isAssistantStreaming && (!shouldRenderStructuredBlocks || hasTextContent);
+  const isUserMessage = message.role === "user";
+  const messageRenderMode = isUserMessage ? "plain-text" : "markdown";
   const timelineConsumedText = messageRenderOrder === "timeline" ? getTimelineConsumedText(blocks) : "";
   const hasConsumedTimelineText = timelineConsumedText.length > 0 && displayedContent.startsWith(timelineConsumedText);
   const timelineDisplayedContent = hasConsumedTimelineText ? displayedContent.slice(timelineConsumedText.length) : displayedContent;
@@ -2145,6 +2356,21 @@ var ChatMessageItemView = ({
     message,
     messageRenderOrder
   });
+  const {
+    bodyStackRef,
+    isCollapsed: isUserMessageCollapsed,
+    isCollapsible: isUserMessageCollapsible,
+    isExpanded: isUserMessageExpanded,
+    toggleExpanded: toggleUserMessageExpanded
+  } = useUserMessageCollapse({
+    blocks,
+    displayedBlocks,
+    displayedContent,
+    enabled: isUserMessage,
+    freshContent,
+    settledContent
+  });
+  const renderMessageContent = (content) => messageRenderMode === "plain-text" ? renderPlainTextContent(content) : renderMarkdownContent(content);
   const renderChatMessageBlock = (block, index) => {
     switch (block.type) {
       case "markdown":
@@ -2153,17 +2379,18 @@ var ChatMessageItemView = ({
           {
             "data-testid": `chat-message-block-${index}`,
             "data-block-tone": "settled",
-            children: renderMarkdownContent(block.text)
+            "data-render-mode": messageRenderMode,
+            children: renderMessageContent(block.text)
           },
           `markdown-${index}`
         );
       case "notice":
-        return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(PDEAINoticeCard, { text: block.text, tone: block.tone }) }, `notice-${index}`);
+        return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(NoticeCard, { text: block.text, tone: block.tone }) }, `notice-${index}`);
       case "parameter_summary":
-        return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(PDEAIParameterSummaryCard, { items: block.items }) }, `parameter-summary-${index}`);
+        return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(ParameterSummaryCard, { items: block.items }) }, `parameter-summary-${index}`);
       case "confirmation_card":
         return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(
-          PDEAIExecutionConfirmationCard,
+          ExecutionConfirmationCard,
           {
             proposal: block.proposal,
             interactive: isPlanMode,
@@ -2175,13 +2402,19 @@ var ChatMessageItemView = ({
           }
         ) }, `confirmation-card-${index}`);
       case "result_summary":
-        return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(PDEAIResultSummaryCard, { summary: block.summary }) }, `result-summary-${index}`);
+        return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(ResultSummaryCard, { summary: block.summary }) }, `result-summary-${index}`);
       case "questionnaire":
         return /* @__PURE__ */ jsx8(Fragment, { children: /* @__PURE__ */ jsx8(
-          PDEAIQuestionnaireCard,
+          QuestionnaireCard,
           {
             questionnaire: block.questionnaire,
             interactive: canSubmitQuestionnaire,
+            labels: {
+              submitting: labels.questionnaireSubmitting,
+              submitted: labels.questionnaireSubmitted,
+              validationPrefix: labels.questionnaireValidationPrefix,
+              submitFailed: labels.questionnaireSubmitFailed
+            },
             onSubmit: canSubmitQuestionnaire ? (submission) => onQuestionnaireSubmit({
               ...submission,
               sourceMessageId: message.id
@@ -2214,14 +2447,31 @@ var ChatMessageItemView = ({
           "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)
+          "data-render-mode": messageRenderMode,
+          children: renderMessageContent(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
+      !textBlocks.some((block) => block.content) && !settledText && !freshText && Boolean(textContent) ? /* @__PURE__ */ jsx8(
+        ContentBlock,
+        {
+          "data-testid": "chat-message-settled-block",
+          "data-block-tone": "settled",
+          "data-render-mode": messageRenderMode,
+          children: renderMessageContent(textContent)
+        }
+      ) : null
     ] });
   };
-  const renderStaticTextSegment = (content) => /* @__PURE__ */ jsx8(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(content) });
+  const renderStaticTextSegment = (content) => /* @__PURE__ */ jsx8(
+    ContentBlock,
+    {
+      "data-testid": "chat-message-settled-block",
+      "data-block-tone": "settled",
+      "data-render-mode": messageRenderMode,
+      children: renderMessageContent(content)
+    }
+  );
   const bodySegments = (() => {
     if (!shouldRenderStructuredBlocks && hasTextContent) {
       return [{ type: "text" }];
@@ -2279,21 +2529,40 @@ var ChatMessageItemView = ({
           }
         ) : null,
         /* @__PURE__ */ jsx8(Role, { children: message.role === "user" ? labels.userRoleLabel : labels.assistantRoleLabel }),
+        isUserMessageCollapsible ? /* @__PURE__ */ jsx8(
+          CollapseToggle,
+          {
+            type: "button",
+            "data-testid": "chat-message-collapse-toggle",
+            "aria-label": isUserMessageExpanded ? labels.collapseMessageAriaLabel : labels.expandMessageAriaLabel,
+            "aria-expanded": isUserMessageExpanded,
+            onClick: toggleUserMessageExpanded,
+            children: /* @__PURE__ */ jsx8(CollapseIcon, { expanded: isUserMessageExpanded })
+          }
+        ) : null,
         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__ */ jsx8(ContentStack, { "data-testid": "chat-message-body-stack", children: bodySegments.map((segment, index) => /* @__PURE__ */ jsx8(
-          ContentSegment,
+        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ jsx8(
+          ContentStack,
           {
-            "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,
+            ref: bodyStackRef,
+            "data-testid": "chat-message-body-stack",
+            "data-collapsed": isUserMessageCollapsed,
+            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,
           {
@@ -2378,6 +2647,29 @@ var StatusTag = styled7.span`
   letter-spacing: 0.02em;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 `;
+var CollapseToggle = styled7.button`
+  margin-left: auto;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.72);
+  cursor: pointer;
+  transition:
+    background 160ms ease-out,
+    border-color 160ms ease-out,
+    color 160ms ease-out;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.18);
+    color: rgba(255, 255, 255, 0.92);
+  }
+`;
 var Content = styled7.div`
   color: rgba(255, 255, 255, 0.92);
   line-height: 1.6;
@@ -2422,6 +2714,11 @@ var ContentStack = styled7.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
+
+  &[data-collapsed='true'] {
+    max-height: ${USER_MESSAGE_COLLAPSE_HEIGHT_PX}px;
+    overflow: hidden;
+  }
 `;
 var ContentSegment = styled7.div`
   min-width: 0;
@@ -2435,6 +2732,11 @@ var ContentBlock = styled7.div`
     margin-top: 16px;
   }
 
+  &[data-render-mode='plain-text'] {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
   &[data-block-tone='fresh'] {
     opacity: 0.85;
     filter: brightness(0.82) saturate(0.88);
@@ -2685,7 +2987,7 @@ var ChatThreadView = ({
   onQuestionnaireSubmit,
   renderMessageBlock
 }) => {
-  const containerRef = useRef5(null);
+  const containerRef = useRef4(null);
   const conversationTurns = useMemo4(
     () => groupConversationTurns(historyMessages, streamingMessage),
     [historyMessages, streamingMessage]
@@ -2693,10 +2995,10 @@ var ChatThreadView = ({
   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 latestUserMessageRef = useRef4(null);
+  const reservedSpaceFrameRef = useRef4(null);
+  const [latestTurnMinHeight, setLatestTurnMinHeight] = useState4(0);
+  const measureLatestTurnMinHeight = useCallback3(() => {
     const container = containerRef.current;
     if (!container)
       return;
@@ -2706,7 +3008,7 @@ var ChatThreadView = ({
     const nextMinHeight = Math.max(0, container.clientHeight - paddingTop - paddingBottom);
     setLatestTurnMinHeight((current) => current === nextMinHeight ? current : nextMinHeight);
   }, []);
-  const scrollLatestUserMessageToTop = useCallback2(() => {
+  const scrollLatestUserMessageToTop = useCallback3(() => {
     const container = containerRef.current;
     const target = latestUserMessageRef.current;
     if (!container || !target)
@@ -2726,7 +3028,7 @@ var ChatThreadView = ({
     }
     container.scrollTop = nextScrollTop;
   }, []);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (reservedSpaceFrameRef.current !== null) {
       window.cancelAnimationFrame(reservedSpaceFrameRef.current);
       reservedSpaceFrameRef.current = null;
@@ -2755,7 +3057,7 @@ var ChatThreadView = ({
       }
     };
   }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!latestUserMessageId)
       return;
     const handleResize = () => {
@@ -2842,15 +3144,40 @@ var ChatThread = () => {
   const error = useChatStore((s) => s.errorBySession[s.activeSessionId ?? ""]);
   const updateQA = useChatStore((s) => s.updateQuestionnaireAnswers);
   const clearSessionError = useChatStore((s) => s.clearSessionError);
-  const { sendRef, retryRef, renderMessageBlock, labels } = useChatContext();
-  const handleRetry = useCallback2(() => {
+  const {
+    sendRef,
+    retryRef,
+    renderMessageBlock,
+    handleQuestionnaireSubmit: customQuestionnaireSubmit,
+    handleConfirmationSubmit: customConfirmationSubmit,
+    labels
+  } = useChatContext();
+  const handleRetry = useCallback3(() => {
     if (!activeSessionId)
       return;
     clearSessionError(activeSessionId);
     void retryRef.current();
   }, [activeSessionId, clearSessionError, retryRef]);
-  const handleQuestionnaireSubmit = useCallback2(
-    (submission) => {
+  const handleQuestionnaireSubmit = useCallback3(
+    async (submission) => {
+      if (customQuestionnaireSubmit) {
+        const handled = await customQuestionnaireSubmit(submission, {
+          sessionId: activeSessionId ?? void 0,
+          mode: activeSessionMode
+        });
+        if (handled !== false) {
+          if (activeSessionId && submission.sourceMessageId) {
+            updateQA(
+              activeSessionId,
+              submission.sourceMessageId,
+              submission.questionnaireId,
+              submission.answers
+            );
+          }
+          return;
+        }
+      }
+      await sendRef.current(submission.content);
       if (activeSessionId && submission.sourceMessageId) {
         updateQA(
           activeSessionId,
@@ -2859,15 +3186,23 @@ var ChatThread = () => {
           submission.answers
         );
       }
-      void sendRef.current(submission.content);
     },
-    [activeSessionId, updateQA, sendRef]
+    [activeSessionId, activeSessionMode, updateQA, sendRef, customQuestionnaireSubmit]
   );
-  const handleConfirmationSubmit = useCallback2(
-    (submission) => {
-      void sendRef.current(submission.content);
+  const handleConfirmation = useCallback3(
+    async (submission) => {
+      if (customConfirmationSubmit) {
+        const handled = await customConfirmationSubmit(submission, {
+          sessionId: activeSessionId ?? void 0,
+          mode: activeSessionMode
+        });
+        if (handled !== false) {
+          return;
+        }
+      }
+      await sendRef.current(submission.content);
     },
-    [sendRef]
+    [activeSessionId, activeSessionMode, sendRef, customConfirmationSubmit]
   );
   if (!hasSessions || messages.length === 0 && !streamingMessage) {
     return /* @__PURE__ */ jsx10(ChatThreadEmptyState, {});
@@ -2881,7 +3216,7 @@ var ChatThread = () => {
       error,
       retryButtonLabel: labels.retryButton,
       onRetry: handleRetry,
-      onConfirmationSubmit: handleConfirmationSubmit,
+      onConfirmationSubmit: handleConfirmation,
       onQuestionnaireSubmit: handleQuestionnaireSubmit,
       renderMessageBlock
     }
@@ -2895,6 +3230,7 @@ var Container = styled9.div`
   min-height: 0;
   overflow: auto;
   padding: 24px;
+  margin-bottom: 24px;
   overscroll-behavior: contain;
 
   &::-webkit-scrollbar {
@@ -2948,7 +3284,7 @@ var RetryButton = styled9.button`
 `;
 
 // src/components/chat-composer/index.tsx
-import { useEffect as useEffect6, useRef as useRef8 } from "react";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef7, useState as useState8 } from "react";
 import styled14 from "@emotion/styled";
 
 // src/components/chat-composer/lib/chat-composer.ts
@@ -3060,10 +3396,10 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef7, useState as useState7 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
 
 // src/components/chat-composer/hooks/use-composer-attachments.ts
-import { useEffect as useEffect4, useRef as useRef6, useState as useState6 } from "react";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState5 } 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) : "";
@@ -3077,8 +3413,8 @@ var releaseComposerAttachments = (attachments) => {
   attachments.forEach((attachment) => revokeObjectUrl(attachment.previewUrl));
 };
 var useComposerAttachments = () => {
-  const [attachments, setAttachments] = useState6([]);
-  const attachmentsRef = useRef6([]);
+  const [attachments, setAttachments] = useState5([]);
+  const attachmentsRef = useRef5([]);
   useEffect4(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
@@ -3195,10 +3531,10 @@ var useChatComposer = () => {
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const setPreferredMode = useChatStore((s) => s.setPreferredMode);
   const setSessionMode = useChatStore((s) => s.setSessionMode);
-  const [availableModels, setAvailableModels] = useState7([]);
-  const [isModelsLoading, setIsModelsLoading] = useState7(true);
-  const [isModelsError, setIsModelsError] = useState7(false);
-  const fetchModels = useCallback3(async () => {
+  const [availableModels, setAvailableModels] = useState6([]);
+  const [isModelsLoading, setIsModelsLoading] = useState6(true);
+  const [isModelsError, setIsModelsError] = useState6(false);
+  const fetchModels = useCallback4(async () => {
     setIsModelsLoading(true);
     setIsModelsError(false);
     try {
@@ -3214,14 +3550,14 @@ var useChatComposer = () => {
     void fetchModels();
   }, [fetchModels]);
   const hasModels = availableModels.length > 0;
-  const [value, setValue] = useState7("");
-  const [selectedModel, setSelectedModel] = useState7("");
-  const [selectedMode, setSelectedModeLocal] = useState7(DEFAULT_CHAT_AGENT_MODE);
-  const [attachmentNotice, setAttachmentNotice] = useState7(null);
+  const [value, setValue] = useState6("");
+  const [selectedModel, setSelectedModel] = useState6("");
+  const [selectedMode, setSelectedModeLocal] = useState6(DEFAULT_CHAT_AGENT_MODE);
+  const [attachmentNotice, setAttachmentNotice] = useState6(null);
   const { attachments, appendFiles, removeAttachment, takeMessageAttachments } = useComposerAttachments();
-  const abortControllerRef = useRef7(null);
-  const stopRequestRef = useRef7(null);
-  const lastRequestRef = useRef7(null);
+  const abortControllerRef = useRef6(null);
+  const stopRequestRef = useRef6(null);
+  const lastRequestRef = useRef6(null);
   useEffect5(() => {
     setSelectedModel(
       (current) => resolveSelectedChatModel({ currentModel: current, availableModels, isModelsLoading })
@@ -3253,7 +3589,7 @@ var useChatComposer = () => {
       stopRequestRef.current.timeoutId = null;
     }
   };
-  const clearStopRequest = useCallback3((sessionId) => {
+  const clearStopRequest = useCallback4((sessionId) => {
     if (!stopRequestRef.current)
       return;
     if (sessionId && stopRequestRef.current.sessionId !== sessionId)
@@ -3261,7 +3597,7 @@ var useChatComposer = () => {
     clearStopTimeout(sessionId);
     stopRequestRef.current = null;
   }, []);
-  const finalizeStop = useCallback3(
+  const finalizeStop = useCallback4(
     (sessionId) => {
       if (stopRequestRef.current?.sessionId === sessionId) {
         if (stopRequestRef.current.finalized)
@@ -3276,7 +3612,7 @@ var useChatComposer = () => {
     },
     [clearStopRequest, finalizeStoppedStreamingMessage]
   );
-  const runStream = useCallback3(
+  const runStream = useCallback4(
     async ({
       localSessionId,
       sessionId,
@@ -3365,7 +3701,7 @@ var useChatComposer = () => {
       setSessionError
     ]
   );
-  const send = useCallback3(
+  const send = useCallback4(
     async (contentOverride) => {
       const content = (contentOverride ?? value).trim();
       const hasText = Boolean(content);
@@ -3513,14 +3849,14 @@ var useChatComposer = () => {
 };
 
 // src/components/chat-composer/components/chat-composer-attachment-list.tsx
-import { useState as useState8 } from "react";
+import { useState as useState7 } 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] = useState8(null);
+  const [activeImage, setActiveImage] = useState7(null);
   if (!attachments.length) {
     return null;
   }
@@ -3974,6 +4310,27 @@ var StopSpinner = styled13.span`
 
 // src/components/chat-composer/index.tsx
 import { jsx as jsx15, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+var CHAT_COMPOSER_LINE_HEIGHT_PX = 20;
+var CHAT_COMPOSER_MAX_ROWS = 7;
+var CHAT_COMPOSER_PADDING_TOP_PX = 8;
+var CHAT_COMPOSER_PADDING_BOTTOM_PX = 12;
+var CHAT_COMPOSER_PADDING_BLOCK_PX = CHAT_COMPOSER_PADDING_TOP_PX + CHAT_COMPOSER_PADDING_BOTTOM_PX;
+var CHAT_COMPOSER_MIN_ROWS = 4;
+var CHAT_COMPOSER_EXPANDED_MAX_ROWS = 60;
+var CHAT_COMPOSER_EXPANDED_MAX_VIEWPORT_RATIO = 0.7;
+var CHAT_COMPOSER_EXPANDED_RESERVED_SPACE_PX = 96;
+var CHAT_COMPOSER_MAX_HEIGHT_PX = CHAT_COMPOSER_MAX_ROWS * CHAT_COMPOSER_LINE_HEIGHT_PX + CHAT_COMPOSER_PADDING_BLOCK_PX;
+var CHAT_COMPOSER_EXPANDED_ROWS_HEIGHT_PX = CHAT_COMPOSER_EXPANDED_MAX_ROWS * CHAT_COMPOSER_LINE_HEIGHT_PX + CHAT_COMPOSER_PADDING_BLOCK_PX;
+var getExpandedComposerHeightPx = () => {
+  if (typeof window === "undefined") {
+    return CHAT_COMPOSER_EXPANDED_ROWS_HEIGHT_PX;
+  }
+  const viewportLimitedHeight = window.innerHeight * CHAT_COMPOSER_EXPANDED_MAX_VIEWPORT_RATIO - CHAT_COMPOSER_EXPANDED_RESERVED_SPACE_PX;
+  return Math.max(
+    CHAT_COMPOSER_MAX_HEIGHT_PX,
+    Math.floor(Math.min(CHAT_COMPOSER_EXPANDED_ROWS_HEIGHT_PX, viewportLimitedHeight))
+  );
+};
 var PlusIcon = () => /* @__PURE__ */ jsx15(
   "svg",
   {
@@ -3986,6 +4343,36 @@ var PlusIcon = () => /* @__PURE__ */ jsx15(
     children: /* @__PURE__ */ jsx15("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
   }
 );
+var ComposerExpandIcon = ({ expanded }) => /* @__PURE__ */ jsx15(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: expanded ? /* @__PURE__ */ jsx15(
+      "path",
+      {
+        d: "M14 6h-4V2M10 6l4-4M2 10h4v4M6 10l-4 4",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) : /* @__PURE__ */ jsx15(
+      "path",
+      {
+        d: "M10 2h4v4M14 2L9 7M6 14H2v-4M2 14l5-5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
 var ChatComposerView = ({
   value,
   placeholder,
@@ -4002,6 +4389,8 @@ var ChatComposerView = ({
   isStopping,
   enableImageAttachments,
   modeLabels,
+  expandComposerAriaLabel,
+  collapseComposerAriaLabel,
   onValueChange,
   onPickImages,
   onPasteImages,
@@ -4012,7 +4401,10 @@ var ChatComposerView = ({
   onStop,
   onSend
 }) => {
-  const imageInputRef = useRef8(null);
+  const imageInputRef = useRef7(null);
+  const inputRef = useRef7(null);
+  const [isComposerExpandable, setIsComposerExpandable] = useState8(false);
+  const [isComposerExpanded, setIsComposerExpanded] = useState8(false);
   const canSend = canSendChatMessage({
     value,
     attachmentCount: attachments.length,
@@ -4020,6 +4412,26 @@ var ChatComposerView = ({
     isModelsError,
     hasModels
   });
+  useLayoutEffect3(() => {
+    const element = inputRef.current;
+    if (!element) {
+      return;
+    }
+    if (!isComposerExpanded) {
+      element.style.height = "0px";
+    }
+    const scrollHeight = element.scrollHeight;
+    const nextExpandable = scrollHeight > CHAT_COMPOSER_MAX_HEIGHT_PX;
+    const expandedHeight = getExpandedComposerHeightPx();
+    const nextHeight = isComposerExpanded ? expandedHeight : Math.min(scrollHeight, CHAT_COMPOSER_MAX_HEIGHT_PX);
+    setIsComposerExpandable(nextExpandable);
+    element.style.height = `${nextHeight}px`;
+    element.style.overflowY = !isComposerExpanded && scrollHeight > CHAT_COMPOSER_MAX_HEIGHT_PX ? "auto" : "hidden";
+  }, [isComposerExpanded, value]);
+  const handleSend = async () => {
+    setIsComposerExpanded(false);
+    await onSend();
+  };
   const handleKeyDown = (event) => {
     if (shouldStopChatComposer({ key: event.key, shiftKey: event.shiftKey, isStreaming })) {
       event.preventDefault();
@@ -4029,7 +4441,7 @@ var ChatComposerView = ({
     if (!shouldSubmitChatComposer({ key: event.key, shiftKey: event.shiftKey, canSend }))
       return;
     event.preventDefault();
-    void onSend();
+    void handleSend();
   };
   const handlePickImages = (event) => {
     if (event.target.files?.length)
@@ -4064,60 +4476,77 @@ var ChatComposerView = ({
       }
     ),
     attachmentNotice === "limit_reached" ? /* @__PURE__ */ jsx15(AttachmentNotice, { "data-testid": "chat-composer-attachment-notice", children: attachmentLimitNotice }) : null,
-    /* @__PURE__ */ jsx15(
-      Input,
-      {
-        "data-testid": "chat-composer-input",
-        value,
-        onChange: (event) => onValueChange(event.target.value),
-        onKeyDown: handleKeyDown,
-        onPaste: enableImageAttachments ? handlePaste : void 0,
-        placeholder
-      }
-    ),
-    /* @__PURE__ */ jsx15(Footer, { children: /* @__PURE__ */ jsxs10(Actions2, { "data-testid": "chat-composer-actions", children: [
-      enableImageAttachments ? /* @__PURE__ */ jsx15(
-        AttachButton,
+    /* @__PURE__ */ jsxs10(InputArea, { "data-testid": "chat-composer-input-area", children: [
+      isComposerExpanded || isComposerExpandable ? /* @__PURE__ */ jsx15(
+        ComposerExpandButton,
         {
           type: "button",
-          "data-testid": "chat-composer-attach-image",
-          "aria-label": "Attach image",
-          onClick: () => imageInputRef.current?.click(),
-          children: /* @__PURE__ */ jsx15(PlusIcon, {})
+          "data-testid": "chat-composer-expand-toggle",
+          "aria-label": isComposerExpanded ? collapseComposerAriaLabel : expandComposerAriaLabel,
+          "aria-expanded": isComposerExpanded,
+          onClick: () => setIsComposerExpanded((current) => !current),
+          children: /* @__PURE__ */ jsx15(ComposerExpandIcon, { expanded: isComposerExpanded })
         }
       ) : null,
       /* @__PURE__ */ jsx15(
-        ChatModeControl,
-        {
-          value: selectedMode,
-          disabled: isStreaming,
-          labels: modeLabels,
-          onChange: onSelectedModeChange
-        }
-      ),
-      /* @__PURE__ */ jsx15(
-        ChatModelControl,
+        Input,
         {
-          selectedModel,
-          availableModels,
-          isModelsLoading,
-          isModelsError,
-          hasModels,
-          onSelectedModelChange,
-          onReloadModels
+          ref: inputRef,
+          "data-testid": "chat-composer-input",
+          "data-expanded": isComposerExpanded,
+          value,
+          onChange: (event) => onValueChange(event.target.value),
+          onKeyDown: handleKeyDown,
+          onPaste: enableImageAttachments ? handlePaste : void 0,
+          placeholder
         }
-      ),
-      /* @__PURE__ */ jsx15(
-        ChatSendActions,
+      )
+    ] }),
+    /* @__PURE__ */ jsxs10(Footer, { children: [
+      /* @__PURE__ */ jsx15(LeadingActions, { "data-testid": "chat-composer-leading-actions", children: enableImageAttachments ? /* @__PURE__ */ jsx15(
+        AttachButton,
         {
-          canSend,
-          isStreaming,
-          isStopping,
-          onStop,
-          onSend
+          type: "button",
+          "data-testid": "chat-composer-attach-image",
+          "aria-label": "Attach image",
+          onClick: () => imageInputRef.current?.click(),
+          children: /* @__PURE__ */ jsx15(PlusIcon, {})
         }
-      )
-    ] }) })
+      ) : null }),
+      /* @__PURE__ */ jsxs10(TrailingActions, { "data-testid": "chat-composer-trailing-actions", children: [
+        /* @__PURE__ */ jsx15(
+          ChatModeControl,
+          {
+            value: selectedMode,
+            disabled: isStreaming,
+            labels: modeLabels,
+            onChange: onSelectedModeChange
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          ChatModelControl,
+          {
+            selectedModel,
+            availableModels,
+            isModelsLoading,
+            isModelsError,
+            hasModels,
+            onSelectedModelChange,
+            onReloadModels
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          ChatSendActions,
+          {
+            canSend,
+            isStreaming,
+            isStopping,
+            onStop,
+            onSend: handleSend
+          }
+        )
+      ] })
+    ] })
   ] }) });
 };
 var ChatComposer = () => {
@@ -4153,6 +4582,8 @@ var ChatComposer = () => {
       isStopping: state.isStopping,
       enableImageAttachments,
       modeLabels,
+      expandComposerAriaLabel: labels.expandComposerAriaLabel,
+      collapseComposerAriaLabel: labels.collapseComposerAriaLabel,
       onValueChange: actions.setValue,
       onPickImages: actions.pickImages,
       onPasteImages: actions.pasteImages,
@@ -4169,6 +4600,16 @@ var Container2 = styled14.div`
   padding: 0 16px 16px;
 `;
 var Surface = styled14.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    'attachments'
+    'notice'
+    'input'
+    'footer';
+  width: 100%;
+  max-width: 760px;
+  margin: 0 auto;
   background: var(--border-color);
   border-radius: 20px;
   border: 1px solid var(--border-hover);
@@ -4178,6 +4619,7 @@ var Surface = styled14.div`
   backdrop-filter: blur(10px);
 `;
 var AttachmentNotice = styled14.div`
+  grid-area: notice;
   margin: 10px 12px 0;
   padding: 8px 10px;
   border-radius: 10px;
@@ -4187,19 +4629,45 @@ var AttachmentNotice = styled14.div`
   font-size: 12px;
   line-height: 1.4;
 `;
+var InputArea = styled14.div`
+  grid-area: input;
+  position: relative;
+`;
 var Input = styled14.textarea`
+  --textarea-line-height: ${CHAT_COMPOSER_LINE_HEIGHT_PX}px;
+  --textarea-min-rows: ${CHAT_COMPOSER_MIN_ROWS};
+  --textarea-max-rows: ${CHAT_COMPOSER_MAX_ROWS};
+  --textarea-expanded-max-rows: ${CHAT_COMPOSER_EXPANDED_MAX_ROWS};
+  --textarea-padding-top: ${CHAT_COMPOSER_PADDING_TOP_PX}px;
+  --textarea-padding-bottom: ${CHAT_COMPOSER_PADDING_BOTTOM_PX}px;
+  --textarea-padding-block: calc(var(--textarea-padding-top) + var(--textarea-padding-bottom));
+  --textarea-max-height: calc(
+    var(--textarea-max-rows) * var(--textarea-line-height) + var(--textarea-padding-block)
+  );
+  --textarea-expanded-max-height: min(
+    calc(
+      var(--textarea-expanded-max-rows) * var(--textarea-line-height) +
+        var(--textarea-padding-block)
+    ),
+    calc(70vh - ${CHAT_COMPOSER_EXPANDED_RESERVED_SPACE_PX}px)
+  );
   width: 100%;
-  min-height: 96px;
+  min-height: calc(
+    var(--textarea-min-rows) * var(--textarea-line-height) + var(--textarea-padding-block)
+  );
+  max-height: var(--textarea-max-height);
+  box-sizing: border-box;
   resize: none;
   appearance: none;
   border: 0;
   outline: 0;
   background: transparent;
-  padding: 8px 12px 12px 12px;
+  padding: var(--textarea-padding-top) 44px var(--textarea-padding-bottom) 12px;
   font-weight: 400;
   font-size: 14px;
   color: var(--text-primary);
-  line-height: 20px;
+  line-height: var(--textarea-line-height);
+  overflow-y: hidden;
 
   &::placeholder {
     color: var(--text-secondary);
@@ -4208,19 +4676,50 @@ var Input = styled14.textarea`
   &::-webkit-resizer {
     display: none;
   }
+
+  &[data-expanded='true'] {
+    max-height: var(--textarea-expanded-max-height);
+  }
+`;
+var ComposerExpandButton = styled14.button`
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.72);
+  cursor: pointer;
+  z-index: 1;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.92);
+  }
 `;
 var Footer = styled14.div`
-  display: flex;
+  grid-area: footer;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: flex-end;
-  justify-content: stretch;
   gap: 16px;
   padding: 0 14px 14px;
 `;
-var Actions2 = styled14.div`
+var LeadingActions = styled14.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  min-width: 0;
+`;
+var TrailingActions = styled14.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  width: 100%;
   min-width: 0;
   justify-content: flex-end;
   gap: 8px;