@xinghunm/ai-chat 1.4.4 → 1.6.0

package/dist/index.js

@@ -46,7 +46,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/ai-chat/index.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_styled17 = __toESM(require("@emotion/styled"));
 var import_compass_ui4 = require("@xinghunm/compass-ui");
 
@@ -96,6 +96,7 @@ var DEFAULT_AI_CHAT_LABELS = {
   questionnaireMultiSelectHint: "Multiple choice",
   questionnaireOtherOptionLabel: "Other",
   questionnaireOtherPlaceholder: "Other",
+  questionnaireExpired: "Selection expired.",
   modelLoading: "Loading models...",
   modelLoadFailed: "Failed to load models",
   modelUnavailable: "No model available",
@@ -104,7 +105,9 @@ var DEFAULT_AI_CHAT_LABELS = {
   removeSkillAriaLabel: "Remove skill",
   sessionHistoryLoading: "Loading conversations...",
   sessionHistoryLoadFailed: "Failed to load conversations",
-  sessionHistoryEmpty: "No conversations yet"
+  sessionHistoryEmpty: "No conversations yet",
+  questionnaireTitle: "Plan Options",
+  questionnaireConfirmInTime: "Please confirm within {{seconds}} seconds"
 };
 
 // src/lib/chat-session.ts
@@ -144,6 +147,42 @@ var mergeOlderHistoryMessages = (sessionId, olderMessages, currentMessages) => {
   );
   return [...uniqueOlderMessages, ...currentMessages];
 };
+var mergeLocalQuestionnaireState = (localMessages, incomingMessages) => {
+  if (!localMessages?.length)
+    return incomingMessages;
+  return incomingMessages.map((incomingMsg) => {
+    const localMsg = localMessages.find((lm) => lm.id === incomingMsg.id);
+    if (!localMsg)
+      return incomingMsg;
+    if (localMsg.blocks && !incomingMsg.blocks) {
+      return {
+        ...incomingMsg,
+        blocks: localMsg.blocks
+      };
+    }
+    if (localMsg.blocks && incomingMsg.blocks) {
+      const nextBlocks = incomingMsg.blocks.map((incomingBlock, index3) => {
+        const localBlock = localMsg.blocks?.[index3];
+        const isSameQuestionnaire = incomingBlock.type === "questionnaire" && localBlock?.type === "questionnaire" && (localBlock.questionnaire.questionnaireId === incomingBlock.questionnaire.questionnaireId || Boolean(localBlock.questionnaire.blockKey) && localBlock.questionnaire.blockKey === incomingBlock.questionnaire.blockKey);
+        if (isSameQuestionnaire) {
+          return {
+            ...incomingBlock,
+            questionnaire: {
+              ...incomingBlock.questionnaire,
+              questionnaireId: localBlock.questionnaire.questionnaireId ?? incomingBlock.questionnaire.questionnaireId,
+              answers: localBlock.questionnaire.answers ?? incomingBlock.questionnaire.answers,
+              status: localBlock.questionnaire.status ?? incomingBlock.questionnaire.status,
+              statusMessage: localBlock.questionnaire.statusMessage ?? incomingBlock.questionnaire.statusMessage
+            }
+          };
+        }
+        return incomingBlock;
+      });
+      return { ...incomingMsg, blocks: nextBlocks };
+    }
+    return incomingMsg;
+  });
+};
 var resolveSessionTitleFromMessage = (message) => {
   const trimmedContent = message.content.trim();
   if (trimmedContent) {
@@ -526,10 +565,12 @@ var createChatStore = (initialState) => (0, import_vanilla.createStore)((set, ge
   },
   hydrateHistorySessionMessages: (sessionId, messages) => {
     const state = get();
+    const localMessages = state.messagesBySession[sessionId] ?? [];
+    const nextMessages = mergeLocalQuestionnaireState(localMessages, messages);
     set({
       messagesBySession: {
         ...state.messagesBySession,
-        [sessionId]: normalizeHistoryMessages(sessionId, messages)
+        [sessionId]: normalizeHistoryMessages(sessionId, nextMessages)
       },
       sessionMessageLoadStatusBySession: {
         ...state.sessionMessageLoadStatusBySession,
@@ -547,10 +588,12 @@ var createChatStore = (initialState) => (0, import_vanilla.createStore)((set, ge
   },
   hydrateHistorySessionMessagesPage: (sessionId, page) => {
     const state = get();
+    const localMessages = state.messagesBySession[sessionId] ?? [];
+    const nextMessages = mergeLocalQuestionnaireState(localMessages, page.messages);
     set({
       messagesBySession: {
         ...state.messagesBySession,
-        [sessionId]: normalizeHistoryMessages(sessionId, page.messages)
+        [sessionId]: normalizeHistoryMessages(sessionId, nextMessages)
       },
       sessionMessageLoadStatusBySession: {
         ...state.sessionMessageLoadStatusBySession,
@@ -709,7 +752,11 @@ var createChatStore = (initialState) => (0, import_vanilla.createStore)((set, ge
         hasUpdatedBlock = true;
         return {
           ...block,
-          questionnaire: { ...block.questionnaire, answers: { ...answers } }
+          questionnaire: {
+            ...block.questionnaire,
+            answers: { ...answers },
+            status: "submitted"
+          }
         };
       });
       if (!hasUpdatedBlock)
@@ -1078,6 +1125,7 @@ var AiChatProvider = (props) => {
     onLoadMoreSessions,
     onSelectHistorySession,
     onLoadMoreHistoryMessages,
+    renderSessionItemActions,
     enableImageAttachments = true,
     children
   } = props;
@@ -1090,6 +1138,17 @@ var AiChatProvider = (props) => {
   });
   const stopRef = (0, import_react2.useRef)(async (_sessionId) => {
   });
+  const [stopSession, setStopSession] = (0, import_react2.useState)(
+    () => async (_sessionId) => {
+    }
+  );
+  const registerStopSession = (0, import_react2.useCallback)(
+    (handler) => {
+      stopRef.current = handler;
+      setStopSession(() => handler);
+    },
+    []
+  );
   const defaultApiBaseUrl = "apiBaseUrl" in props ? props.apiBaseUrl : void 0;
   const defaultAuthToken = "authToken" in props ? props.authToken : void 0;
   const defaultTransformStreamPacket = "transformStreamPacket" in props ? props.transformStreamPacket : void 0;
@@ -1149,6 +1208,8 @@ var AiChatProvider = (props) => {
       sendRef,
       retryRef,
       stopRef,
+      stopSession,
+      registerStopSession,
       renderMessageBlock,
       handleQuestionnaireSubmit,
       handleConfirmationSubmit,
@@ -1158,7 +1219,8 @@ var AiChatProvider = (props) => {
       historySessionList,
       onLoadMoreSessions,
       onSelectHistorySession,
-      onLoadMoreHistoryMessages
+      onLoadMoreHistoryMessages,
+      renderSessionItemActions
     }),
     [
       axiosInstance,
@@ -1174,10 +1236,13 @@ var AiChatProvider = (props) => {
       onLoadMoreSessions,
       onLoadMoreHistoryMessages,
       onSelectHistorySession,
+      renderSessionItemActions,
       renderMessageBlock,
       sendRef,
       retryRef,
       stopRef,
+      stopSession,
+      registerStopSession,
       store,
       transport
     ]
@@ -1186,7 +1251,7 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_styled9 = __toESM(require("@emotion/styled"));
 
 // src/context/use-chat-context.ts
@@ -1207,9 +1272,9 @@ var useChatStore = (selector) => {
 var CHAT_THREAD_SCROLL_TOP_GAP = 16;
 
 // src/components/chat-thread/components/chat-message-item.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_styled7 = __toESM(require("@emotion/styled"));
-var import_react10 = require("@emotion/react");
+var import_react11 = 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"));
@@ -1263,11 +1328,23 @@ var getNextDisplayedUnitCount = ({
 var splitMarkdownBlocks = (content) => content.split(/\n{2,}/).map((block) => block.trim()).filter(Boolean);
 
 // src/components/chat-thread/hooks/use-chat-message-reveal.ts
+var revealedStreamingMessages = /* @__PURE__ */ new Set();
+var markMessageAsRevealed = (id) => {
+  if (revealedStreamingMessages.size > 500) {
+    const firstKey = revealedStreamingMessages.keys().next().value;
+    if (firstKey !== void 0) {
+      revealedStreamingMessages.delete(firstKey);
+    }
+  }
+  revealedStreamingMessages.add(id);
+};
 var createRevealState = ({
   isAssistantStreaming,
-  targetUnitCount
+  targetUnitCount,
+  messageId
 }) => {
-  const initialDisplayedUnitCount = isAssistantStreaming ? 0 : targetUnitCount;
+  const hasBeenRevealed = revealedStreamingMessages.has(messageId);
+  const initialDisplayedUnitCount = isAssistantStreaming && !hasBeenRevealed ? 0 : targetUnitCount;
   return {
     batchedTargetUnitCount: initialDisplayedUnitCount,
     displayedUnitCount: initialDisplayedUnitCount,
@@ -1277,7 +1354,11 @@ var createRevealState = ({
 var revealReducer = (state, action) => {
   switch (action.type) {
     case "reset-message":
-      return createRevealState(action);
+      return createRevealState({
+        isAssistantStreaming: action.isAssistantStreaming,
+        targetUnitCount: action.targetUnitCount,
+        messageId: action.messageId
+      });
     case "commit-batched-target": {
       const nextDisplayedUnitCount = action.role === "assistant" ? getNextDisplayedUnitCount({
         currentUnits: state.displayedUnitCount,
@@ -1334,7 +1415,8 @@ var useChatMessageReveal = (message) => {
     revealReducer,
     {
       isAssistantStreaming,
-      targetUnitCount: targetUnits.length
+      targetUnitCount: targetUnits.length,
+      messageId: message.id
     },
     createRevealState
   );
@@ -1366,7 +1448,8 @@ var useChatMessageReveal = (message) => {
     dispatch({
       type: "reset-message",
       isAssistantStreaming,
-      targetUnitCount: targetUnits.length
+      targetUnitCount: targetUnits.length,
+      messageId: message.id
     });
   }, [isAssistantStreaming, message.id, targetUnits.length]);
   (0, import_react5.useEffect)(() => {
@@ -1445,6 +1528,11 @@ var useChatMessageReveal = (message) => {
       tone: "settled"
     }
   ];
+  (0, import_react5.useEffect)(() => {
+    if (isAssistantStreaming && displayedUnitCount > 0) {
+      markMessageAsRevealed(message.id);
+    }
+  }, [isAssistantStreaming, displayedUnitCount, message.id]);
   return {
     isAssistantStreaming,
     isFreshBlockActive,
@@ -2035,9 +2123,96 @@ var Value = import_styled3.default.span`
 `;
 
 // src/components/chat-thread/components/questionnaire-card.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_styled4 = __toESM(require("@emotion/styled"));
 
+// src/components/chat-thread/components/use-countdown-seconds.ts
+var import_react7 = require("react");
+var countdownDeadlineByKey = /* @__PURE__ */ new Map();
+var countdownCleanupTimerByKey = /* @__PURE__ */ new Map();
+var countdownMountCountByKey = /* @__PURE__ */ new Map();
+var clearCountdownEntry = (storageKey) => {
+  const cleanupTimerId = countdownCleanupTimerByKey.get(storageKey);
+  if (cleanupTimerId !== void 0) {
+    window.clearTimeout(cleanupTimerId);
+    countdownCleanupTimerByKey.delete(storageKey);
+  }
+  countdownDeadlineByKey.delete(storageKey);
+};
+var scheduleCountdownCleanup = (storageKey, deadline) => {
+  const existingCleanupTimerId = countdownCleanupTimerByKey.get(storageKey);
+  if (existingCleanupTimerId !== void 0) {
+    return;
+  }
+  const delayMs = Math.max(0, deadline - Date.now());
+  const cleanupTimerId = window.setTimeout(() => {
+    if ((countdownMountCountByKey.get(storageKey) ?? 0) > 0) {
+      countdownCleanupTimerByKey.delete(storageKey);
+      return;
+    }
+    clearCountdownEntry(storageKey);
+  }, delayMs);
+  countdownCleanupTimerByKey.set(storageKey, cleanupTimerId);
+};
+var getCountdownDeadline = (storageKey, initialSeconds) => {
+  const existingDeadline = countdownDeadlineByKey.get(storageKey);
+  if (existingDeadline !== void 0) {
+    return existingDeadline;
+  }
+  const nextDeadline = Date.now() + Math.max(0, initialSeconds) * 1e3;
+  countdownDeadlineByKey.set(storageKey, nextDeadline);
+  scheduleCountdownCleanup(storageKey, nextDeadline);
+  return nextDeadline;
+};
+var getRemainingSeconds = (deadline) => Math.max(0, Math.ceil((deadline - Date.now()) / 1e3));
+var useCountdownSeconds = ({
+  storageKey,
+  initialSeconds,
+  active
+}) => {
+  const [remainingSeconds, setRemainingSeconds] = (0, import_react7.useState)(
+    () => getRemainingSeconds(getCountdownDeadline(storageKey, initialSeconds))
+  );
+  (0, import_react7.useEffect)(() => {
+    countdownMountCountByKey.set(storageKey, (countdownMountCountByKey.get(storageKey) ?? 0) + 1);
+    return () => {
+      const nextCount = (countdownMountCountByKey.get(storageKey) ?? 1) - 1;
+      if (nextCount <= 0) {
+        countdownMountCountByKey.delete(storageKey);
+        return;
+      }
+      countdownMountCountByKey.set(storageKey, nextCount);
+    };
+  }, [storageKey]);
+  (0, import_react7.useEffect)(() => {
+    setRemainingSeconds(getRemainingSeconds(getCountdownDeadline(storageKey, initialSeconds)));
+  }, [initialSeconds, storageKey]);
+  (0, import_react7.useEffect)(() => {
+    if (active) {
+      return;
+    }
+    clearCountdownEntry(storageKey);
+  }, [active, storageKey]);
+  (0, import_react7.useEffect)(() => {
+    if (remainingSeconds > 0) {
+      return;
+    }
+    clearCountdownEntry(storageKey);
+  }, [remainingSeconds, storageKey]);
+  (0, import_react7.useEffect)(() => {
+    if (!active || remainingSeconds <= 0) {
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      setRemainingSeconds(getRemainingSeconds(getCountdownDeadline(storageKey, initialSeconds)));
+    }, 1e3);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [active, initialSeconds, remainingSeconds, storageKey]);
+  return remainingSeconds;
+};
+
 // src/components/chat-thread/components/questionnaire-card-helpers.ts
 var OTHER_OPTION_VALUE = "__other__";
 var getQuestionnaireQuestion = (questionnaire) => questionnaire.question;
@@ -2344,7 +2519,10 @@ var DEFAULT_QUESTIONNAIRE_CARD_LABELS = {
   submitFailed: "Failed to submit. Please try again.",
   multiSelectHint: "Multiple choice",
   otherOptionLabel: "Other",
-  otherPlaceholder: "Other"
+  otherPlaceholder: "Other",
+  expired: "Selection expired.",
+  questionnaireTitle: "Plan Options",
+  questionnaireConfirmInTime: "Please confirm within {{seconds}} seconds"
 };
 var stopInputClickPropagation = (event) => {
   event.stopPropagation();
@@ -2404,32 +2582,41 @@ var QuestionnaireCardInner = ({
   onSubmit,
   labels
 }) => {
-  const questionnaireRef = (0, import_react7.useRef)(questionnaire);
-  const otherInputRefs = (0, import_react7.useRef)({});
-  const [answers, setAnswers] = (0, import_react7.useState)(
+  const questionnaireRef = (0, import_react8.useRef)(questionnaire);
+  const otherInputRefs = (0, import_react8.useRef)({});
+  const [answers, setAnswers] = (0, import_react8.useState)(
     () => createInitialAnswers(questionnaire)
   );
-  const [otherDrafts, setOtherDrafts] = (0, import_react7.useState)(
+  const [otherDrafts, setOtherDrafts] = (0, import_react8.useState)(
     () => createInitialOtherDrafts(questionnaire)
   );
-  const [errorMessage, setErrorMessage] = (0, import_react7.useState)(null);
-  const [isSubmitting, setIsSubmitting] = (0, import_react7.useState)(false);
-  const [isSubmitted, setIsSubmitted] = (0, import_react7.useState)(false);
-  const [pendingFocusQuestionId, setPendingFocusQuestionId] = (0, import_react7.useState)(null);
+  const [errorMessage, setErrorMessage] = (0, import_react8.useState)(null);
+  const [isSubmitting, setIsSubmitting] = (0, import_react8.useState)(false);
+  const [isSubmitted, setIsSubmitted] = (0, import_react8.useState)(() => questionnaire.status === "submitted");
+  const [pendingFocusQuestionId, setPendingFocusQuestionId] = (0, import_react8.useState)(null);
   const resolvedLabels = {
     ...DEFAULT_QUESTIONNAIRE_CARD_LABELS,
     ...labels
   };
-  const hasExternalFailureStatus = questionnaire.status === "expired" || questionnaire.status === "failed";
+  const remainingSeconds = useCountdownSeconds({
+    storageKey: questionnaire.blockKey ?? `questionnaire:${questionnaire.questionnaireId}`,
+    initialSeconds: questionnaire.timeoutSec ?? 0,
+    active: questionnaire.timeoutSec !== void 0 && questionnaire.timeoutSec > 0 && !isSubmitted && questionnaire.status !== "expired" && questionnaire.status !== "failed" && interactive
+  });
+  const isExpired = questionnaire.status === "expired" || questionnaire.timeoutSec !== void 0 && questionnaire.timeoutSec > 0 && remainingSeconds <= 0;
+  const hasExternalFailureStatus = isExpired || questionnaire.status === "failed";
   const question = getQuestionnaireQuestion(questionnaire);
-  const visibleErrorMessage = questionnaire.statusMessage ?? errorMessage;
-  const isInteractionLocked = !interactive || isSubmitting || isSubmitted || hasExternalFailureStatus;
+  const visibleErrorMessage = questionnaire.statusMessage ?? (isExpired ? null : errorMessage);
+  const isInteractionLocked = !interactive || isSubmitting || isSubmitted || hasExternalFailureStatus || questionnaire.status === "submitted";
   questionnaireRef.current = questionnaire;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setAnswers(createInitialAnswers(questionnaireRef.current));
     setOtherDrafts(createInitialOtherDrafts(questionnaireRef.current));
-  }, [questionnaire.answers]);
-  (0, import_react7.useEffect)(() => {
+    if (questionnaireRef.current.status === "submitted") {
+      setIsSubmitted(true);
+    }
+  }, [questionnaire.answers, questionnaire.status]);
+  (0, import_react8.useEffect)(() => {
     if (!pendingFocusQuestionId || isInteractionLocked) {
       return;
     }
@@ -2679,42 +2866,69 @@ var QuestionnaireCardInner = ({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Card4, { "data-testid": "questionnaire-card", children: [
-    questionnaire.description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Description, { children: questionnaire.description }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionList, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(QuestionCard, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(QuestionLabel, { children: [
-        question.label,
-        question.required ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Required, { children: "*" }) : null
-      ] }),
-      question.kind === "multi_select" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionHint, { children: resolvedLabels.multiSelectHint }) : null,
-      renderQuestion(question)
-    ] }, question.id) }),
-    visibleErrorMessage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage, { "data-testid": "questionnaire-error", children: visibleErrorMessage }) : null,
-    isSubmitted ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SuccessMessage, { "data-testid": "questionnaire-success", children: resolvedLabels.submitted }) : interactive && !hasExternalFailureStatus ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      SubmitButton,
-      {
-        type: "button",
-        "data-testid": "questionnaire-submit",
-        disabled: isInteractionLocked,
-        onClick: () => {
-          void handleSubmit();
-        },
-        children: isSubmitting ? resolvedLabels.submitting : questionnaire.submitLabel ?? "Submit"
-      }
-    ) : null
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Header2, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Eyebrow2, { children: resolvedLabels.questionnaireTitle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Content, { children: [
+      questionnaire.description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Description, { children: questionnaire.description }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionList, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(QuestionCard, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(QuestionLabel, { children: [
+          question.label,
+          question.required ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Required, { children: "*" }) : null
+        ] }),
+        question.kind === "multi_select" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionHint, { children: resolvedLabels.multiSelectHint }) : null,
+        renderQuestion(question)
+      ] }, question.id) }),
+      visibleErrorMessage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage, { "data-testid": "questionnaire-error", children: visibleErrorMessage }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Footer, { children: isSubmitted ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SuccessMessage, { "data-testid": "questionnaire-success", children: resolvedLabels.submitted }) : isExpired ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpiredTag, { "data-testid": "questionnaire-expired", children: resolvedLabels.expired }) : interactive ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FooterActionRow, { "data-testid": "questionnaire-card-actions", children: [
+        remainingSeconds > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MetaText, { "data-testid": "questionnaire-countdown", children: resolvedLabels.questionnaireConfirmInTime?.replace(
+          "{{seconds}}",
+          String(remainingSeconds)
+        ) ?? `\u8BF7\u5728 ${remainingSeconds} \u79D2\u5185\u786E\u8BA4` }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          SubmitButton,
+          {
+            type: "button",
+            "data-testid": "questionnaire-submit",
+            disabled: isInteractionLocked,
+            onClick: () => {
+              void handleSubmit();
+            },
+            children: isSubmitting ? resolvedLabels.submitting : questionnaire.submitLabel ?? "Submit"
+          }
+        )
+      ] }) : null })
+    ] })
   ] });
 };
 var QuestionnaireCard = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(QuestionnaireCardInner, { ...props }, getQuestionnaireStateKey(props.questionnaire));
 var Card4 = import_styled4.default.section`
-  display: grid;
-  gap: 14px;
-  padding: 16px;
-  border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  overflow: hidden;
+  background: var(--bg-primary);
+  border-radius: 16px;
+  border: 1px solid var(--border-hover);
+`;
+var Header2 = import_styled4.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  padding: 22px 12px 16px;
+  border-bottom: 1px solid var(--border-hover);
+`;
+var Eyebrow2 = import_styled4.default.div`
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--text-primary);
+  line-height: 22px;
+`;
+var Content = import_styled4.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 12px;
 `;
 var Description = import_styled4.default.p`
   margin: 0;
-  color: rgba(255, 255, 255, 0.72);
+  color: var(--text-secondary);
   font-size: 13px;
 `;
 var QuestionList = import_styled4.default.div`
@@ -2725,11 +2939,11 @@ var QuestionCard = import_styled4.default.div`
   display: grid;
   gap: 10px;
   padding: 12px;
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.04);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.02);
 `;
 var QuestionLabel = import_styled4.default.div`
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   font-size: 14px;
   font-weight: 600;
 `;
@@ -2756,11 +2970,11 @@ var OptionChoiceItem = import_styled4.default.div`
   gap: 12px;
   width: 100%;
   text-align: left;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-hover);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.02);
   padding: 2px 12px;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
   cursor: pointer;
   transition:
     border-color 140ms ease,
@@ -2769,8 +2983,8 @@ var OptionChoiceItem = import_styled4.default.div`
   outline: none;
 
   &[data-selected='true'] {
-    border-color: rgba(126, 160, 255, 0.42);
-    background: linear-gradient(180deg, rgba(82, 114, 255, 0.18) 0%, rgba(82, 114, 255, 0.1) 100%);
+    border-color: rgba(51, 133, 255, 0.42);
+    background: linear-gradient(180deg, rgba(51, 133, 255, 0.18) 0%, rgba(51, 133, 255, 0.1) 100%);
     transform: translateY(-1px);
   }
 
@@ -2779,8 +2993,8 @@ var OptionChoiceItem = import_styled4.default.div`
   }
 
   &:focus-visible {
-    border-color: rgba(126, 160, 255, 0.52);
-    box-shadow: 0 0 0 1px rgba(126, 160, 255, 0.18);
+    border-color: rgba(51, 133, 255, 0.52);
+    box-shadow: 0 0 0 1px rgba(51, 133, 255, 0.18);
   }
 
   &[tabindex='-1'] {
@@ -2797,16 +3011,16 @@ var OptionChoiceMarker = import_styled4.default.span`
   width: 28px;
   height: 28px;
   border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.04);
-  color: rgba(255, 255, 255, 0.65);
+  border: 1px solid var(--border-hover);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--text-secondary);
   font-size: 12px;
   font-weight: 700;
 
   &[data-selected='true'] {
-    border-color: rgba(126, 160, 255, 0.38);
-    background: rgba(126, 160, 255, 0.2);
-    color: rgba(255, 255, 255, 0.96);
+    border-color: rgba(51, 133, 255, 0.38);
+    background: rgba(51, 133, 255, 0.2);
+    color: var(--text-primary);
   }
 `;
 var OptionChoiceContent = import_styled4.default.span`
@@ -2826,47 +3040,41 @@ var OptionChoiceLabel = import_styled4.default.span`
 `;
 var TextInput = import_styled4.default.input`
   width: 100%;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
+  border: 1px solid var(--border-hover);
+  border-radius: 8px;
   background: rgba(13, 15, 21, 0.55);
-  color: rgba(255, 255, 255, 0.92);
+  color: var(--text-primary);
   font-size: 13px;
   padding: 10px 12px;
 
   &::placeholder {
-    color: rgba(255, 255, 255, 0.34);
+    color: var(--text-secondary);
+    opacity: 0.5;
   }
 `;
 var InlineOtherInput = import_styled4.default.input`
   width: 100%;
-  margin-top: 0;
-
-  .compass-input-wrapper {
-    min-height: 30px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-    background: rgba(13, 15, 21, 0.55);
-    box-shadow: none;
-    padding: 2px 9px;
-  }
-
-  .compass-input-wrapper:hover {
-    border-color: rgba(126, 160, 255, 0.28);
-  }
+  border: 1px solid var(--border-hover);
+  border-radius: 6px;
+  background: rgba(13, 15, 21, 0.45);
+  color: var(--text-primary);
+  font-size: 13px;
+  padding: 6px 10px;
+  outline: none;
+  transition: border-color 140ms ease;
 
-  .compass-input-wrapper:focus-within {
-    border-color: rgba(126, 160, 255, 0.42);
-    box-shadow: 0 0 0 1px rgba(126, 160, 255, 0.14);
+  &:hover {
+    border-color: rgba(51, 133, 255, 0.28);
   }
 
-  .compass-input-input {
-    color: rgba(255, 255, 255, 0.92);
-    font-size: 13px;
-    line-height: 1.2;
+  &:focus {
+    border-color: rgba(51, 133, 255, 0.42);
+    box-shadow: 0 0 0 1px rgba(51, 133, 255, 0.14);
   }
 
-  .compass-input-input::placeholder {
-    color: rgba(255, 255, 255, 0.34);
+  &::placeholder {
+    color: var(--text-secondary);
+    opacity: 0.5;
   }
 `;
 var NumberInputRow = import_styled4.default.div`
@@ -2875,32 +3083,80 @@ var NumberInputRow = import_styled4.default.div`
   gap: 10px;
 `;
 var Unit = import_styled4.default.span`
-  color: rgba(255, 255, 255, 0.58);
+  color: var(--text-secondary);
   font-size: 12px;
   white-space: nowrap;
 `;
 var ErrorMessage = import_styled4.default.div`
-  color: rgba(255, 145, 145, 0.96);
+  font-size: 13px;
+  line-height: 1.5;
+  color: rgba(255, 207, 207, 0.92);
+`;
+var Footer = import_styled4.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+`;
+var FooterActionRow = import_styled4.default.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-left: auto;
+  justify-content: flex-end;
+`;
+var MetaText = import_styled4.default.span`
+  font-weight: 500;
   font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 17px;
+`;
+var ExpiredTag = import_styled4.default.span`
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(214, 224, 236, 0.9);
 `;
 var SuccessMessage = import_styled4.default.div`
-  color: rgba(164, 255, 210, 0.96);
-  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  background: rgba(190, 246, 202, 0.14);
+  border: 1px solid rgba(190, 246, 202, 0.24);
+  color: rgba(227, 255, 233, 0.94);
 `;
 var SubmitButton = import_styled4.default.button`
-  justify-self: flex-start;
-  border: none;
-  border-radius: 999px;
-  background: linear-gradient(180deg, #7ea0ff 0%, #4a6fff 100%);
-  color: #081127;
-  font-size: 12px;
-  font-weight: 700;
-  padding: 10px 14px;
+  padding: 9px 16px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  font-weight: 500;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.96);
+  background: linear-gradient(180deg, #3385ff 0%, #1f6ef2 100%);
+  line-height: 14px;
   cursor: pointer;
+  transition:
+    transform 160ms ease,
+    opacity 160ms ease;
 
   &:disabled {
-    cursor: default;
-    opacity: 0.72;
+    cursor: progress;
+    opacity: 0.68;
+    transform: none;
+  }
+
+  &:not(:disabled):hover {
+    transform: translateY(-1px);
   }
 `;
 
@@ -2908,7 +3164,7 @@ var SubmitButton = import_styled4.default.button`
 var import_styled5 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
 var ResultSummaryCard = ({ summary }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Card5, { "data-testid": "result-summary-card", "data-status": summary.status, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Eyebrow2, { children: summary.status }),
+  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Eyebrow3, { children: summary.status }),
   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Headline, { children: summary.headline }),
   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Details, { children: summary.details.map((detail) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Detail, { children: detail }, detail)) })
 ] });
@@ -2928,7 +3184,7 @@ var Card5 = import_styled5.default.section`
     border-color: rgba(255, 122, 122, 0.24);
   }
 `;
-var Eyebrow2 = import_styled5.default.span`
+var Eyebrow3 = import_styled5.default.span`
   color: rgba(255, 255, 255, 0.58);
   font-size: 11px;
   font-weight: 700;
@@ -2953,7 +3209,7 @@ var Detail = import_styled5.default.li`
 
 // src/components/chat-thread/components/image-viewer.tsx
 var import_styled6 = __toESM(require("@emotion/styled"));
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
 var Overlay = import_styled6.default.div`
   position: fixed;
@@ -2972,8 +3228,8 @@ var Img = import_styled6.default.img`
   border-radius: 4px;
 `;
 var ImageViewer = ({ src, alt, onClose }) => {
-  const overlayRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const overlayRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
     const handleKey = (e) => {
       if (e.key === "Escape")
         onClose();
@@ -2981,7 +3237,7 @@ var ImageViewer = ({ src, alt, onClose }) => {
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [onClose]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     overlayRef.current?.focus();
   }, []);
   const stopPropagation = (e) => e.stopPropagation();
@@ -3047,10 +3303,10 @@ var useUserMessageCollapse = ({
   freshContent,
   settledContent
 }) => {
-  const [isCollapsible, setIsCollapsible] = (0, import_react9.useState)(false);
-  const [isExpanded, setIsExpanded] = (0, import_react9.useState)(false);
-  const [bodyStackElement, setBodyStackElement] = (0, import_react9.useState)(null);
-  const syncCollapseState = (0, import_react9.useCallback)(
+  const [isCollapsible, setIsCollapsible] = (0, import_react10.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react10.useState)(false);
+  const [bodyStackElement, setBodyStackElement] = (0, import_react10.useState)(null);
+  const syncCollapseState = (0, import_react10.useCallback)(
     (element) => {
       const nextCollapsible = enabled && (element?.scrollHeight ?? 0) > USER_MESSAGE_COLLAPSE_HEIGHT_PX;
       setIsCollapsible(nextCollapsible);
@@ -3060,14 +3316,14 @@ var useUserMessageCollapse = ({
     },
     [enabled]
   );
-  const bodyStackRef = (0, import_react9.useCallback)(
+  const bodyStackRef = (0, import_react10.useCallback)(
     (node) => {
       setBodyStackElement(node);
       syncCollapseState(node);
     },
     [syncCollapseState]
   );
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react10.useLayoutEffect)(() => {
     if (!bodyStackElement) {
       return;
     }
@@ -3087,7 +3343,7 @@ var useUserMessageCollapse = ({
     settledContent,
     syncCollapseState
   ]);
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react10.useLayoutEffect)(() => {
     if (!bodyStackElement || !enabled || typeof ResizeObserver === "undefined") {
       return;
     }
@@ -3235,7 +3491,7 @@ var ChatMessageItemView = ({
   renderMessageBlock
 }) => {
   const { labels, messageRenderOrder = "blocks-first" } = useChatContext();
-  const [activeImage, setActiveImage] = (0, import_react9.useState)(void 0);
+  const [activeImage, setActiveImage] = (0, import_react10.useState)(void 0);
   const {
     displayedBlocks,
     displayedContent,
@@ -3252,8 +3508,9 @@ var ChatMessageItemView = ({
   const hasMarkdownOnlyBlocks = hasStructuredBlocks && blocks.every((block) => block.type === "markdown");
   const hasTextContent = Boolean(settledContent || freshContent || displayedContent);
   const shouldRenderStructuredBlocks = hasStructuredBlocks && !(isAssistantStreaming && hasMarkdownOnlyBlocks && hasTextContent);
-  const canSubmitConfirmation = typeof onConfirmationSubmit === "function";
-  const canSubmitQuestionnaire = typeof onQuestionnaireSubmit === "function";
+  const isInteractionDisabled = message.status === "stopped" || message.status === "error";
+  const canSubmitConfirmation = typeof onConfirmationSubmit === "function" && !isInteractionDisabled;
+  const canSubmitQuestionnaire = typeof onQuestionnaireSubmit === "function" && !isInteractionDisabled;
   const shouldShowStreamingCaret = isAssistantStreaming && (!shouldRenderStructuredBlocks || hasTextContent);
   const isUserMessage = message.role === "user";
   const messageRenderMode = isUserMessage ? "plain-text" : "markdown";
@@ -3303,11 +3560,11 @@ var ChatMessageItemView = ({
           `markdown-${index3}`
         );
       case "notice":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NoticeCard, { text: block.text, tone: block.tone }) }, `notice-${index3}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NoticeCard, { text: block.text, tone: block.tone }) }, `notice-${index3}`);
       case "parameter_summary":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ParameterSummaryCard, { items: block.items }) }, `parameter-summary-${index3}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ParameterSummaryCard, { items: block.items }) }, `parameter-summary-${index3}`);
       case "confirmation_card":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           ExecutionConfirmationCard,
           {
             proposal: block.proposal,
@@ -3320,9 +3577,9 @@ var ChatMessageItemView = ({
           }
         ) }, `confirmation-card-${index3}`);
       case "result_summary":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ResultSummaryCard, { summary: block.summary }) }, `result-summary-${index3}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ResultSummaryCard, { summary: block.summary }) }, `result-summary-${index3}`);
       case "questionnaire":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           QuestionnaireCard,
           {
             questionnaire: block.questionnaire,
@@ -3334,7 +3591,10 @@ var ChatMessageItemView = ({
               submitFailed: labels.questionnaireSubmitFailed,
               multiSelectHint: labels.questionnaireMultiSelectHint,
               otherOptionLabel: labels.questionnaireOtherOptionLabel,
-              otherPlaceholder: labels.questionnaireOtherPlaceholder
+              otherPlaceholder: labels.questionnaireOtherPlaceholder,
+              expired: labels.questionnaireExpired,
+              questionnaireTitle: labels.questionnaireTitle,
+              questionnaireConfirmInTime: labels.questionnaireConfirmInTime
             },
             onSubmit: canSubmitQuestionnaire ? (submission) => onQuestionnaireSubmit({
               ...submission,
@@ -3343,7 +3603,7 @@ var ChatMessageItemView = ({
           }
         ) }, block.questionnaire.blockKey ?? `questionnaire-${index3}`);
       case "custom":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: renderMessageBlock?.({
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.Fragment, { children: renderMessageBlock?.({
           block,
           index: index3,
           message,
@@ -3437,7 +3697,7 @@ var ChatMessageItemView = ({
   })();
   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: [
-      shouldRenderHeader ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Header2, { children: [
+      shouldRenderHeader ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Header3, { children: [
         isAssistantStreaming ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           StreamingIndicator,
           {
@@ -3462,7 +3722,7 @@ var ChatMessageItemView = ({
         ) : null,
         isStoppedAssistant ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StatusTag, { "data-testid": "chat-message-stopped-tag", children: labels.stoppedResponse }) : null
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Content, { "data-testid": "chat-message-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Content2, { "data-testid": "chat-message-content", children: [
         skills.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkillTagList, { "data-testid": "chat-message-skill-tags", children: skills.map((skill) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SkillTag, { children: skill }, skill)) }) : null,
         shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           ContentStack,
@@ -3510,7 +3770,7 @@ var ChatMessageItemView = ({
     ) : null
   ] });
 };
-var ChatMessageItem = (0, import_react9.memo)(
+var ChatMessageItem = (0, import_react10.memo)(
   ChatMessageItemView,
   (previousProps, nextProps) => isSameMessage(
     previousProps.message,
@@ -3542,7 +3802,7 @@ var Bubble = import_styled7.default.article`
     border-radius: 16px;
   }
 `;
-var Header2 = import_styled7.default.div`
+var Header3 = import_styled7.default.div`
   display: flex;
   align-items: center;
   gap: 10px;
@@ -3584,7 +3844,7 @@ var CollapseToggle = import_styled7.default.button`
     color: rgba(255, 255, 255, 0.92);
   }
 `;
-var Content = import_styled7.default.div`
+var Content2 = import_styled7.default.div`
   color: rgba(255, 255, 255, 0.92);
   font-size: 14px;
   line-height: 1.6;
@@ -3728,7 +3988,7 @@ var AttachmentImage = import_styled7.default.img`
 var TableWrapper = import_styled7.default.div`
   overflow-x: auto;
 `;
-var caretBlink = import_react10.keyframes`
+var caretBlink = import_react11.keyframes`
   0%, 49% {
     opacity: 1;
   }
@@ -3737,7 +3997,7 @@ var caretBlink = import_react10.keyframes`
     opacity: 0.2;
   }
 `;
-var shimmer = import_react10.keyframes`
+var shimmer = import_react11.keyframes`
   0%, 100% {
     transform: scale(0.9) rotate(0deg);
     opacity: 0.55;
@@ -3956,24 +4216,24 @@ var ChatThreadView = ({
   onQuestionnaireSubmit,
   renderMessageBlock
 }) => {
-  const containerRef = (0, import_react11.useRef)(null);
-  const conversationTurns = (0, import_react11.useMemo)(
+  const containerRef = (0, import_react12.useRef)(null);
+  const conversationTurns = (0, import_react12.useMemo)(
     () => groupConversationTurns(historyMessages, streamingMessage),
     [historyMessages, streamingMessage]
   );
   const latestTurn = conversationTurns[conversationTurns.length - 1];
   const latestUserMessageId = latestTurn?.userMessage?.id;
   const latestHistoryMessage = historyMessages[historyMessages.length - 1];
-  const latestTurnRef = (0, import_react11.useRef)(null);
-  const reservedSpaceFrameRef = (0, import_react11.useRef)(null);
-  const isLoadingPreviousRef = (0, import_react11.useRef)(false);
-  const isPinnedRef = (0, import_react11.useRef)(true);
-  const lastHistoryMessageIdRef = (0, import_react11.useRef)(latestHistoryMessage?.id);
-  const lastStreamingMessageIdRef = (0, import_react11.useRef)(streamingMessage?.id);
-  const [latestTurnMinHeight, setLatestTurnMinHeight] = (0, import_react11.useState)(0);
-  const [isDetached, setIsDetached] = (0, import_react11.useState)(false);
-  const [pendingNewMessageCount, setPendingNewMessageCount] = (0, import_react11.useState)(0);
-  const measureLatestTurnMinHeight = (0, import_react11.useCallback)(() => {
+  const latestTurnRef = (0, import_react12.useRef)(null);
+  const reservedSpaceFrameRef = (0, import_react12.useRef)(null);
+  const isLoadingPreviousRef = (0, import_react12.useRef)(false);
+  const isPinnedRef = (0, import_react12.useRef)(true);
+  const lastHistoryMessageIdRef = (0, import_react12.useRef)(latestHistoryMessage?.id);
+  const lastStreamingMessageIdRef = (0, import_react12.useRef)(streamingMessage?.id);
+  const [latestTurnMinHeight, setLatestTurnMinHeight] = (0, import_react12.useState)(0);
+  const [isDetached, setIsDetached] = (0, import_react12.useState)(false);
+  const [pendingNewMessageCount, setPendingNewMessageCount] = (0, import_react12.useState)(0);
+  const measureLatestTurnMinHeight = (0, import_react12.useCallback)(() => {
     const container = containerRef.current;
     if (!container)
       return;
@@ -3983,7 +4243,7 @@ var ChatThreadView = ({
     const nextMinHeight = Math.max(0, container.clientHeight - paddingTop - paddingBottom);
     setLatestTurnMinHeight((current) => current === nextMinHeight ? current : nextMinHeight);
   }, []);
-  const scrollToBottom = (0, import_react11.useCallback)((force = false) => {
+  const scrollToBottom = (0, import_react12.useCallback)((force = false) => {
     const container = containerRef.current;
     if (!container)
       return false;
@@ -3999,12 +4259,12 @@ var ChatThreadView = ({
     }
     return true;
   }, []);
-  const markThreadPinned = (0, import_react11.useCallback)(() => {
+  const markThreadPinned = (0, import_react12.useCallback)(() => {
     isPinnedRef.current = true;
     setIsDetached(false);
     setPendingNewMessageCount(0);
   }, []);
-  const scrollToBottomAndPin = (0, import_react11.useCallback)(
+  const scrollToBottomAndPin = (0, import_react12.useCallback)(
     (force = false) => {
       const didScroll = scrollToBottom(force);
       if (!didScroll)
@@ -4013,7 +4273,7 @@ var ChatThreadView = ({
     },
     [markThreadPinned, scrollToBottom]
   );
-  const handleLoadPreviousMessages = (0, import_react11.useCallback)(async () => {
+  const handleLoadPreviousMessages = (0, import_react12.useCallback)(async () => {
     const container = containerRef.current;
     if (!container || !onLoadPreviousMessages || isLoadingPreviousMessages) {
       return;
@@ -4038,7 +4298,7 @@ var ChatThreadView = ({
       nextContainer.scrollTop = nextContainer.scrollHeight - previousScrollHeight + previousScrollTop;
     });
   }, [isLoadingPreviousMessages, onLoadPreviousMessages]);
-  const handleContainerScroll = (0, import_react11.useCallback)(() => {
+  const handleContainerScroll = (0, import_react12.useCallback)(() => {
     const container = containerRef.current;
     if (!container)
       return;
@@ -4052,7 +4312,7 @@ var ChatThreadView = ({
       setPendingNewMessageCount(0);
     }
   }, [handleLoadPreviousMessages, onLoadPreviousMessages]);
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     const nextHistoryMessageId = latestHistoryMessage?.id;
     if (lastHistoryMessageIdRef.current === nextHistoryMessageId) {
       return;
@@ -4076,7 +4336,7 @@ var ChatThreadView = ({
       });
     }
   }, [latestHistoryMessage, markThreadPinned, scrollToBottom]);
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     const nextStreamingMessageId = streamingMessage?.id;
     if (lastStreamingMessageIdRef.current === nextStreamingMessageId) {
       return;
@@ -4091,7 +4351,7 @@ var ChatThreadView = ({
       });
     }
   }, [streamingMessage]);
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     if (reservedSpaceFrameRef.current !== null) {
       window.cancelAnimationFrame(reservedSpaceFrameRef.current);
       reservedSpaceFrameRef.current = null;
@@ -4121,7 +4381,7 @@ var ChatThreadView = ({
       }
     };
   }, [latestTurn, latestUserMessageId, error2, measureLatestTurnMinHeight, scrollToBottom]);
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     if (!latestTurn)
       return;
     const handleResize = () => {
@@ -4147,7 +4407,7 @@ var ChatThreadView = ({
       window.removeEventListener("resize", handleResize);
     };
   }, [latestTurn, latestUserMessageId, measureLatestTurnMinHeight, scrollToBottom]);
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     const latestTurnElement = latestTurnRef.current;
     if (!latestTurnElement || typeof ResizeObserver === "undefined") {
       return;
@@ -4160,7 +4420,7 @@ var ChatThreadView = ({
       observer.disconnect();
     };
   }, [latestTurn, scrollToBottom]);
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     const latestTurnElement = latestTurnRef.current;
     if (!latestTurnElement || typeof MutationObserver === "undefined") {
       return;
@@ -4267,13 +4527,13 @@ var ChatThread = () => {
     onLoadMoreHistoryMessages,
     labels
   } = useChatContext();
-  const handleRetry = (0, import_react11.useCallback)(() => {
+  const handleRetry = (0, import_react12.useCallback)(() => {
     if (!activeSessionId)
       return;
     clearSessionError(activeSessionId);
     void retryRef.current(activeSessionId);
   }, [activeSessionId, clearSessionError, retryRef]);
-  const handleQuestionnaireSubmit = (0, import_react11.useCallback)(
+  const handleQuestionnaireSubmit = (0, import_react12.useCallback)(
     async (submission) => {
       const sourceSessionId = activeSessionId;
       if (customQuestionnaireSubmit) {
@@ -4308,7 +4568,7 @@ var ChatThread = () => {
     },
     [activeSessionId, customQuestionnaireSubmit, preferredMode, sendRef, updateQA]
   );
-  const handleConfirmation = (0, import_react11.useCallback)(
+  const handleConfirmation = (0, import_react12.useCallback)(
     async (submission) => {
       const sourceSessionId = activeSessionId;
       if (customConfirmationSubmit) {
@@ -4327,7 +4587,7 @@ var ChatThread = () => {
     },
     [activeSessionId, customConfirmationSubmit, preferredMode, sendRef]
   );
-  const handleLoadPreviousMessages = (0, import_react11.useCallback)(async () => {
+  const handleLoadPreviousMessages = (0, import_react12.useCallback)(async () => {
     if (!activeSession || !onLoadMoreHistoryMessages || !historyMessagePagination?.hasMorePrevious || !historyMessagePagination.previousCursor || historyMessagePagination.isLoadingPrevious) {
       return;
     }
@@ -4366,13 +4626,14 @@ var ChatThread = () => {
   if (!hasSessions || messages.length === 0 && !streamingMessage) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatThreadEmptyState, {});
   }
+  const displayError = error2 && !(error2.toLowerCase().includes("plan option timeout") || error2.toLowerCase().includes("plan_option_timeout") || error2.toLowerCase().includes("selection expired") || labels.questionnaireExpired && error2.includes(labels.questionnaireExpired)) ? error2 : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     ChatThreadView,
     {
       activeMode: preferredMode,
       historyMessages: messages,
       streamingMessage,
-      error: error2,
+      error: displayError,
       isLoadingPreviousMessages: historyMessagePagination?.isLoadingPrevious,
       previousMessagesError: historyMessagePagination?.error,
       retryButtonLabel: labels.retryButton,
@@ -4521,7 +4782,7 @@ var ScrollToLatestBadge = import_styled9.default.span`
 `;
 
 // src/components/chat-composer/index.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_styled14 = __toESM(require("@emotion/styled"));
 
 // ../../node_modules/.pnpm/@floating-ui+react@0.27.16_react-dom@18.3.1_react@18.3.1/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
@@ -4683,7 +4944,7 @@ function getFrameElement(win) {
 
 // ../../node_modules/.pnpm/@floating-ui+react@0.27.16_react-dom@18.3.1_react@18.3.1/node_modules/@floating-ui/react/dist/floating-ui.react.utils.mjs
 var React = __toESM(require("react"), 1);
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // ../../node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var min = Math.min;
@@ -5170,7 +5431,7 @@ function getDocument(node) {
 var isClient = typeof document !== "undefined";
 var noop = function noop2() {
 };
-var index = isClient ? import_react12.useLayoutEffect : noop;
+var index = isClient ? import_react13.useLayoutEffect : noop;
 var SafeReact = {
   ...React
 };
@@ -6379,12 +6640,12 @@ var computePosition2 = (reference, floating, options) => {
 
 // ../../node_modules/.pnpm/@floating-ui+react-dom@2.1.6_react-dom@18.3.1_react@18.3.1/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
 var React2 = __toESM(require("react"), 1);
-var import_react13 = require("react");
+var import_react14 = require("react");
 var ReactDOM = __toESM(require("react-dom"), 1);
 var isClient2 = typeof document !== "undefined";
 var noop3 = function noop4() {
 };
-var index2 = isClient2 ? import_react13.useLayoutEffect : noop3;
+var index2 = isClient2 ? import_react14.useLayoutEffect : noop3;
 function deepEqual(a, b) {
   if (a === b) {
     return true;
@@ -7119,10 +7380,10 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/chat-composer/hooks/use-composer-attachments.ts
-var import_react14 = require("react");
+var import_react15 = require("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) : "";
@@ -7136,12 +7397,12 @@ var releaseComposerAttachments = (attachments) => {
   attachments.forEach((attachment) => revokeObjectUrl(attachment.previewUrl));
 };
 var useComposerAttachments = () => {
-  const [attachments, setAttachments] = (0, import_react14.useState)([]);
-  const attachmentsRef = (0, import_react14.useRef)([]);
-  (0, import_react14.useEffect)(() => {
+  const [attachments, setAttachments] = (0, import_react15.useState)([]);
+  const attachmentsRef = (0, import_react15.useRef)([]);
+  (0, import_react15.useEffect)(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
-  (0, import_react14.useEffect)(
+  (0, import_react15.useEffect)(
     () => () => {
       releaseComposerAttachments(attachmentsRef.current);
     },
@@ -7267,7 +7528,7 @@ var useChatComposer = () => {
   const { transport, enableImageAttachments, labels, store } = useChatContext();
   const modelsLoader = transport.getModels;
   const skillsLoader = transport.getSkills;
-  const activeSkillsLoaderRef = (0, import_react15.useRef)(skillsLoader);
+  const activeSkillsLoaderRef = (0, import_react16.useRef)(skillsLoader);
   const activeSessionId = useChatStore((s) => s.activeSessionId);
   const preferredMode = useChatStore((s) => s.preferredMode);
   const streamingSessionId = useChatStore(
@@ -7289,16 +7550,16 @@ var useChatComposer = () => {
   const setSessionError = useChatStore((s) => s.setSessionError);
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const setPreferredMode = useChatStore((s) => s.setPreferredMode);
-  const [availableModels, setAvailableModels] = (0, import_react15.useState)([]);
-  const [isModelsLoading, setIsModelsLoading] = (0, import_react15.useState)(true);
-  const [isModelsError, setIsModelsError] = (0, import_react15.useState)(false);
-  const [availableSkills, setAvailableSkills] = (0, import_react15.useState)(
+  const [availableModels, setAvailableModels] = (0, import_react16.useState)([]);
+  const [isModelsLoading, setIsModelsLoading] = (0, import_react16.useState)(true);
+  const [isModelsError, setIsModelsError] = (0, import_react16.useState)(false);
+  const [availableSkills, setAvailableSkills] = (0, import_react16.useState)(
     () => getCachedSkills(skillsLoader).skills
   );
-  const [isSkillsLoading, setIsSkillsLoading] = (0, import_react15.useState)(
+  const [isSkillsLoading, setIsSkillsLoading] = (0, import_react16.useState)(
     () => Boolean(skillsLoader) && !getCachedSkills(skillsLoader).resolved
   );
-  const fetchModels = (0, import_react15.useCallback)(async () => {
+  const fetchModels = (0, import_react16.useCallback)(async () => {
     setIsModelsLoading(true);
     setIsModelsError(false);
     try {
@@ -7310,16 +7571,16 @@ var useChatComposer = () => {
       setIsModelsLoading(false);
     }
   }, [modelsLoader]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     void fetchModels();
   }, [fetchModels]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     activeSkillsLoaderRef.current = skillsLoader;
     const cachedSkills = getCachedSkills(skillsLoader);
     setAvailableSkills(cachedSkills.skills);
     setIsSkillsLoading(Boolean(skillsLoader) && !cachedSkills.resolved);
   }, [skillsLoader]);
-  const fetchSkills = (0, import_react15.useCallback)(async () => {
+  const fetchSkills = (0, import_react16.useCallback)(async () => {
     if (!skillsLoader) {
       setAvailableSkills([]);
       setIsSkillsLoading(false);
@@ -7349,35 +7610,35 @@ var useChatComposer = () => {
       }
     }
   }, [skillsLoader]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     void fetchSkills();
   }, [fetchSkills]);
   const hasModels = availableModels.length > 0;
-  const [value, setValue] = (0, import_react15.useState)("");
-  const [selectedModel, setSelectedModel] = (0, import_react15.useState)("");
-  const [selectedMode, setSelectedModeLocal] = (0, import_react15.useState)(DEFAULT_CHAT_AGENT_MODE);
-  const [selectedSkills, setSelectedSkills] = (0, import_react15.useState)([]);
-  const [attachmentNotice, setAttachmentNotice] = (0, import_react15.useState)(null);
+  const [value, setValue] = (0, import_react16.useState)("");
+  const [selectedModel, setSelectedModel] = (0, import_react16.useState)("");
+  const [selectedMode, setSelectedModeLocal] = (0, import_react16.useState)(DEFAULT_CHAT_AGENT_MODE);
+  const [selectedSkills, setSelectedSkills] = (0, import_react16.useState)([]);
+  const [attachmentNotice, setAttachmentNotice] = (0, import_react16.useState)(null);
   const { attachments, appendFiles, removeAttachment, takeMessageAttachments } = useComposerAttachments();
-  const abortControllerBySessionRef = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
-  const stopRequestBySessionRef = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
-  const lastRequestBySessionRef = (0, import_react15.useRef)(/* @__PURE__ */ new Map());
-  const previousActiveSessionIdRef = (0, import_react15.useRef)(activeSessionId);
-  (0, import_react15.useEffect)(() => {
+  const abortControllerBySessionRef = (0, import_react16.useRef)(/* @__PURE__ */ new Map());
+  const stopRequestBySessionRef = (0, import_react16.useRef)(/* @__PURE__ */ new Map());
+  const lastRequestBySessionRef = (0, import_react16.useRef)(/* @__PURE__ */ new Map());
+  const previousActiveSessionIdRef = (0, import_react16.useRef)(activeSessionId);
+  (0, import_react16.useEffect)(() => {
     setSelectedModel(
       (current) => resolveSelectedChatModel({ currentModel: current, availableModels, isModelsLoading })
     );
   }, [availableModels, isModelsLoading]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
   }, [preferredMode]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (previousActiveSessionIdRef.current !== activeSessionId) {
       setSelectedSkills([]);
       previousActiveSessionIdRef.current = activeSessionId;
     }
   }, [activeSessionId]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!attachmentNotice)
       return;
     const timeoutId = window.setTimeout(
@@ -7394,11 +7655,11 @@ var useChatComposer = () => {
     window.clearTimeout(stopRequest.timeoutId);
     stopRequest.timeoutId = null;
   };
-  const clearStopRequest = (0, import_react15.useCallback)((sessionId) => {
+  const clearStopRequest = (0, import_react16.useCallback)((sessionId) => {
     clearStopTimeout(sessionId);
     stopRequestBySessionRef.current.delete(sessionId);
   }, []);
-  const moveSessionRuntimeState = (0, import_react15.useCallback)(
+  const moveSessionRuntimeState = (0, import_react16.useCallback)(
     (previousSessionId, nextSessionId) => {
       if (previousSessionId === nextSessionId) {
         return;
@@ -7416,7 +7677,7 @@ var useChatComposer = () => {
     },
     []
   );
-  const finalizeStop = (0, import_react15.useCallback)(
+  const finalizeStop = (0, import_react16.useCallback)(
     (sessionId) => {
       const stopRequest = stopRequestBySessionRef.current.get(sessionId);
       if (stopRequest) {
@@ -7433,7 +7694,7 @@ var useChatComposer = () => {
     },
     [clearStopRequest, finalizeStoppedStreamingMessage]
   );
-  const runStream = (0, import_react15.useCallback)(
+  const runStream = (0, import_react16.useCallback)(
     async ({
       localSessionId,
       sessionId,
@@ -7558,7 +7819,7 @@ var useChatComposer = () => {
       store
     ]
   );
-  const send = (0, import_react15.useCallback)(
+  const send = (0, import_react16.useCallback)(
     async (contentOverride, options) => {
       const content = (contentOverride ?? value).trim();
       const includeComposerAttachments = options?.includeComposerAttachments ?? true;
@@ -7638,7 +7899,7 @@ var useChatComposer = () => {
       store
     ]
   );
-  const openSkillPicker = (0, import_react15.useCallback)(() => {
+  const openSkillPicker = (0, import_react16.useCallback)(() => {
     setValue((current) => {
       const matchedSkillQuery = current.match(/(^|\s)\/([^\s/]*)$/);
       if (matchedSkillQuery && matchedSkillQuery.index !== void 0) {
@@ -7651,7 +7912,7 @@ var useChatComposer = () => {
       return /\s$/.test(current) ? `${current}/` : `${current} /`;
     });
   }, []);
-  const stopSession = (0, import_react15.useCallback)(
+  const stopSession = (0, import_react16.useCallback)(
     async (sessionId) => {
       const storeState = store.getState();
       const isSessionStreaming = storeState.isStreamingBySession[sessionId] ?? false;
@@ -7761,14 +8022,14 @@ var useChatComposer = () => {
 };
 
 // src/components/chat-composer/components/chat-composer-attachment-list.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_styled10 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
 var ChatComposerAttachmentList = ({
   attachments,
   onRemoveAttachment
 }) => {
-  const [activeImage, setActiveImage] = (0, import_react16.useState)(null);
+  const [activeImage, setActiveImage] = (0, import_react17.useState)(null);
   if (!attachments.length) {
     return null;
   }
@@ -8434,6 +8695,7 @@ var ChatComposerView = ({
   modelLoadingLabel,
   modelLoadFailedLabel,
   modelUnavailableLabel,
+  modeAccessory,
   onValueChange,
   onPickImages,
   onPasteImages,
@@ -8447,11 +8709,11 @@ var ChatComposerView = ({
   onStop,
   onSend
 }) => {
-  const imageInputRef = (0, import_react17.useRef)(null);
-  const inputRef = (0, import_react17.useRef)(null);
-  const [isComposerExpandable, setIsComposerExpandable] = (0, import_react17.useState)(false);
-  const [isComposerExpanded, setIsComposerExpanded] = (0, import_react17.useState)(false);
-  const [activeSkillNavigation, setActiveSkillNavigation] = (0, import_react17.useState)({
+  const imageInputRef = (0, import_react18.useRef)(null);
+  const inputRef = (0, import_react18.useRef)(null);
+  const [isComposerExpandable, setIsComposerExpandable] = (0, import_react18.useState)(false);
+  const [isComposerExpanded, setIsComposerExpanded] = (0, import_react18.useState)(false);
+  const [activeSkillNavigation, setActiveSkillNavigation] = (0, import_react18.useState)({
     queryKey: "",
     index: 0
   });
@@ -8494,20 +8756,20 @@ var ChatComposerView = ({
     ],
     whileElementsMounted: autoUpdate
   });
-  const setSkillMenuReference = (0, import_react17.useCallback)(
+  const setSkillMenuReference = (0, import_react18.useCallback)(
     (element) => {
       refs.setReference(element);
     },
     [refs]
   );
-  const setSkillMenuFloating = (0, import_react17.useCallback)(
+  const setSkillMenuFloating = (0, import_react18.useCallback)(
     (element) => {
       refs.setFloating(element);
     },
     [refs]
   );
   const activeSkillIndex = activeSkillNavigation.queryKey === activeSkillQueryKey ? activeSkillNavigation.index : 0;
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     const element = inputRef.current;
     if (!element) {
       return;
@@ -8657,7 +8919,7 @@ var ChatComposerView = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Footer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Footer2, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(LeadingActions, { "data-testid": "chat-composer-leading-actions", children: [
           enableImageAttachments ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             AttachButton,
@@ -8687,7 +8949,8 @@ var ChatComposerView = ({
               labels: modeLabels,
               onChange: onSelectedModeChange
             }
-          )
+          ),
+          modeAccessory
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(TrailingActions, { "data-testid": "chat-composer-trailing-actions", children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -8745,22 +9008,35 @@ var ChatComposerView = ({
     ) }) : null
   ] });
 };
-var ChatComposer = () => {
-  const { labels, sendRef, retryRef, stopRef, enableImageAttachments } = useChatContext();
+var ChatComposer = ({
+  renderModeAccessory
+} = {}) => {
+  const {
+    labels,
+    sendRef,
+    retryRef,
+    registerStopSession = () => {
+    },
+    enableImageAttachments
+  } = useChatContext();
   const { state, actions } = useChatComposer();
   const { send, retry } = actions;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     sendRef.current = send;
     retryRef.current = async (sessionId) => {
       retry(sessionId);
     };
-    stopRef.current = actions.stopSession;
-  }, [actions.stopSession, retry, retryRef, send, sendRef, stopRef]);
+    registerStopSession(actions.stopSession);
+  }, [actions.stopSession, registerStopSession, retry, retryRef, send, sendRef]);
   const modeLabels = {
     ask: labels.modeLabelAsk,
     plan: labels.modeLabelPlan,
     agent: labels.modeLabelAgent
   };
+  const modeAccessory = renderModeAccessory?.({
+    selectedMode: state.selectedMode,
+    disabled: state.isStreaming
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     ChatComposerView,
     {
@@ -8790,6 +9066,7 @@ var ChatComposer = () => {
       modelLoadingLabel: labels.modelLoading,
       modelLoadFailedLabel: labels.modelLoadFailed,
       modelUnavailableLabel: labels.modelUnavailable,
+      modeAccessory,
       onValueChange: actions.setValue,
       onPickImages: actions.pickImages,
       onPasteImages: actions.pasteImages,
@@ -8997,7 +9274,7 @@ var ComposerExpandButton = import_styled14.default.button`
     color: rgba(255, 255, 255, 0.92);
   }
 `;
-var Footer = import_styled14.default.div`
+var Footer2 = import_styled14.default.div`
   grid-area: footer;
   display: flex;
   align-items: center;
@@ -9078,26 +9355,37 @@ var SkillButton = import_styled14.default.button`
 `;
 
 // src/components/chat-conversation-list/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_styled16 = __toESM(require("@emotion/styled"));
 
 // src/components/chat-conversation-list/components/chat-session-item.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_styled15 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
-var ChatSessionItem = (0, import_react19.memo)(({ session, isActive, onClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    SessionButton,
-    {
-      type: "button",
-      "data-active": isActive,
-      "data-testid": `chat-session-item-${session.sessionId}`,
-      onClick: () => onClick(session.sessionId),
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SessionTitle, { children: session.title })
-    }
-  );
-});
+var ChatSessionItem = (0, import_react20.memo)(
+  ({ session, isActive, onClick, actions }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SessionRow, { "data-active": isActive, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        SessionButton,
+        {
+          type: "button",
+          "data-active": isActive,
+          "data-testid": `chat-session-item-${session.sessionId}`,
+          onClick: () => onClick(session.sessionId),
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SessionTitle, { children: session.title })
+        }
+      ),
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SessionActions, { "data-testid": `chat-session-item-actions-${session.sessionId}`, children: actions }) : null
+    ] });
+  }
+);
 ChatSessionItem.displayName = "ChatSessionItem";
+var SessionRow = import_styled15.default.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+`;
 var SessionTitle = import_styled15.default.span`
   display: block;
   min-width: 0;
@@ -9106,6 +9394,8 @@ var SessionTitle = import_styled15.default.span`
   white-space: nowrap;
 `;
 var SessionButton = import_styled15.default.button`
+  flex: 1;
+  min-width: 0;
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 12px;
@@ -9138,6 +9428,12 @@ var SessionButton = import_styled15.default.button`
     background: rgba(255, 255, 255, 0.08);
   }
 `;
+var SessionActions = import_styled15.default.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+`;
 
 // src/components/chat-conversation-list/lib/history-session-selection.ts
 var shouldLoadHistorySessionMessages = ({
@@ -9167,26 +9463,52 @@ var shouldLoadMoreSessions = ({
   threshold = SCROLL_LOAD_MORE_THRESHOLD_PX
 }) => scrollHeight - scrollTop - clientHeight <= threshold;
 var isHistorySessionMessagesPage = (value) => typeof value === "object" && value !== null && Array.isArray(value.messages);
+var matchesHydratedHistorySessions = (renderedHistorySessionIds, historySessionIds) => {
+  if (renderedHistorySessionIds.length === historySessionIds.length) {
+    return renderedHistorySessionIds.every(
+      (sessionId, index3) => sessionId === historySessionIds[index3]
+    );
+  }
+  if (renderedHistorySessionIds.length !== historySessionIds.length + 1) {
+    return false;
+  }
+  const matchesWithoutLeadingExtra = renderedHistorySessionIds.slice(1).every((sessionId, index3) => sessionId === historySessionIds[index3]);
+  if (matchesWithoutLeadingExtra) {
+    return true;
+  }
+  return renderedHistorySessionIds.slice(0, -1).every((sessionId, index3) => sessionId === historySessionIds[index3]);
+};
 var ChatConversationList = () => {
-  const { labels, historySessionList, onLoadMoreSessions, onSelectHistorySession, store } = useChatContext();
+  const {
+    labels,
+    historySessionList,
+    onLoadMoreSessions,
+    onSelectHistorySession,
+    renderSessionItemActions,
+    stopSession = async (_sessionId) => {
+    },
+    store
+  } = useChatContext();
   const localSessions = useChatStore((s) => s.sessions);
   const activeSessionId = useChatStore((s) => s.activeSessionId);
   const startNewChat = useChatStore((s) => s.startNewChat);
   const setActiveSession = useChatStore((s) => s.setActiveSession);
+  const isStreamingBySession = useChatStore((s) => s.isStreamingBySession);
   const hydrateHistorySessions = useChatStore((s) => s.hydrateHistorySessions);
   const hydrateHistorySessionMessages = useChatStore((s) => s.hydrateHistorySessionMessages);
   const hydrateHistorySessionMessagesPage = useChatStore((s) => s.hydrateHistorySessionMessagesPage);
   const setHistorySessionMessageLoadStatus = useChatStore(
     (s) => s.setHistorySessionMessageLoadStatus
   );
-  const isLoadingMoreRef = (0, import_react20.useRef)(false);
-  const hasSeenLoadingMoreRef = (0, import_react20.useRef)(false);
-  (0, import_react20.useEffect)(() => {
+  const isLoadingMoreRef = (0, import_react21.useRef)(false);
+  const hasSeenLoadingMoreRef = (0, import_react21.useRef)(false);
+  const listRef = (0, import_react21.useRef)(null);
+  (0, import_react21.useEffect)(() => {
     if (!historySessionList)
       return;
     hydrateHistorySessions(historySessionList.sessions);
   }, [historySessionList, hydrateHistorySessions]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (historySessionList?.isLoading) {
       hasSeenLoadingMoreRef.current = true;
       return;
@@ -9196,28 +9518,55 @@ var ChatConversationList = () => {
       isLoadingMoreRef.current = false;
     }
   }, [historySessionList?.isLoading]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     isLoadingMoreRef.current = false;
     hasSeenLoadingMoreRef.current = false;
   }, [historySessionList?.sessions.length, historySessionList?.hasMore]);
   const sessions = localSessions;
-  const handleSessionListScroll = (event) => {
-    if (!historySessionList?.hasMore || historySessionList.isLoading || !onLoadMoreSessions || isLoadingMoreRef.current) {
+  const hasMoreSessions = historySessionList?.hasMore ?? false;
+  const isHistorySessionListLoading = historySessionList?.isLoading ?? false;
+  const renderedHistorySessionIds = sessions.filter((session) => !isDraftChatSessionId(session.sessionId)).map((session) => session.sessionId);
+  const isHistorySessionListHydrated = !historySessionList || matchesHydratedHistorySessions(
+    renderedHistorySessionIds,
+    historySessionList.sessions.map((session) => session.sessionId)
+  );
+  const requestLoadMoreSessions = (0, import_react21.useCallback)(() => {
+    if (!hasMoreSessions || isHistorySessionListLoading || !onLoadMoreSessions || isLoadingMoreRef.current) {
       return;
     }
-    const target = event.currentTarget;
-    if (shouldLoadMoreSessions({
-      scrollTop: target.scrollTop,
-      clientHeight: target.clientHeight,
-      scrollHeight: target.scrollHeight
-    })) {
-      isLoadingMoreRef.current = true;
-      void Promise.resolve(onLoadMoreSessions()).catch(() => {
-        isLoadingMoreRef.current = false;
-        hasSeenLoadingMoreRef.current = false;
-      });
+    isLoadingMoreRef.current = true;
+    void Promise.resolve(onLoadMoreSessions()).catch(() => {
+      isLoadingMoreRef.current = false;
+      hasSeenLoadingMoreRef.current = false;
+    });
+  }, [hasMoreSessions, isHistorySessionListLoading, onLoadMoreSessions]);
+  const maybeLoadMoreSessions = (0, import_react21.useCallback)(
+    (target) => {
+      if (target.clientHeight <= 0 || target.scrollHeight <= 0) {
+        return;
+      }
+      if (shouldLoadMoreSessions({
+        scrollTop: target.scrollTop,
+        clientHeight: target.clientHeight,
+        scrollHeight: target.scrollHeight
+      })) {
+        requestLoadMoreSessions();
+      }
+    },
+    [requestLoadMoreSessions]
+  );
+  (0, import_react21.useEffect)(() => {
+    if (!listRef.current || !isHistorySessionListHydrated) {
+      return;
     }
-  };
+    maybeLoadMoreSessions(listRef.current);
+  }, [isHistorySessionListHydrated, hasMoreSessions, localSessions.length, maybeLoadMoreSessions]);
+  const handleSessionListScroll = (0, import_react21.useCallback)(
+    (event) => {
+      maybeLoadMoreSessions(event.currentTarget);
+    },
+    [maybeLoadMoreSessions]
+  );
   const handleSelectSession = async (sessionId) => {
     setActiveSession(sessionId);
     const session = sessions.find((item) => item.sessionId === sessionId);
@@ -9259,13 +9608,21 @@ var ChatConversationList = () => {
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title3, { children: labels.sessionsTitle }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CreateButton, { type: "button", "data-testid": "chat-create-session", onClick: startNewChat, children: labels.newChat })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(List2, { "data-testid": "chat-session-list", onScroll: handleSessionListScroll, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(List2, { ref: listRef, "data-testid": "chat-session-list", onScroll: handleSessionListScroll, children: [
       sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         ChatSessionItem,
         {
           session,
           isActive: activeSessionId === session.sessionId,
-          onClick: (sessionId) => void handleSelectSession(sessionId)
+          onClick: (sessionId) => void handleSelectSession(sessionId),
+          actions: isDraftChatSessionId(session.sessionId) ? void 0 : renderSessionItemActions?.({
+            session,
+            isActive: activeSessionId === session.sessionId,
+            isStreaming: isStreamingBySession[session.sessionId] ?? false,
+            selectSession: () => handleSelectSession(session.sessionId),
+            startNewChat,
+            stopSession: () => stopSession(session.sessionId)
+          })
         },
         session.sessionId
       )),
@@ -9278,6 +9635,7 @@ var ChatConversationList = () => {
 var Container3 = import_styled16.default.aside`
   width: 280px;
   min-width: 280px;
+  min-height: 0;
   border-right: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
   display: flex;
   flex-direction: column;
@@ -9323,6 +9681,8 @@ var CreateButton = import_styled16.default.button`
   }
 `;
 var List2 = import_styled16.default.div`
+  flex: 1 1 0;
+  min-height: 0;
   padding: 0 12px 16px;
   display: flex;
   flex-direction: column;
@@ -9384,7 +9744,8 @@ var AiChatWorkspaceContent = ({
   showNewChatButton,
   renderNewChatTrigger,
   showComposerOnlyBeforeFirstMessage = false,
-  onConversationStartedChange
+  onConversationStartedChange,
+  renderComposerModeAccessory
 }) => {
   const isConversationStarted = useChatStore(
     (state) => hasStartedConversation({
@@ -9395,7 +9756,7 @@ var AiChatWorkspaceContent = ({
     })
   );
   const shouldShowComposerOnly = showComposerOnlyBeforeFirstMessage && !showConversationList && !isConversationStarted;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     onConversationStartedChange?.(isConversationStarted);
   }, [isConversationStarted, onConversationStartedChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Root, { "data-testid": "ai-chat", children: [
@@ -9403,12 +9764,13 @@ var AiChatWorkspaceContent = ({
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Workspace, { children: [
       showNewChatButton && !showConversationList && !shouldShowComposerOnly ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(QuickActions, { renderNewChatTrigger }) : null,
       shouldShowComposerOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatThread, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatComposer, {})
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatComposer, { renderModeAccessory: renderComposerModeAccessory })
     ] })
   ] });
 };
 var QuickActions = ({ renderNewChatTrigger }) => {
-  const { labels, stopRef, store } = useChatContext();
+  const { labels, stopSession = async (_sessionId) => {
+  }, store } = useChatContext();
   const startNewChat = useChatStore((state) => state.startNewChat);
   const activeSessionId = useChatStore((state) => state.activeSessionId);
   const isActiveSessionStreaming = useChatStore(
@@ -9427,14 +9789,14 @@ var QuickActions = ({ renderNewChatTrigger }) => {
     if (!currentSessionId || !isCurrentSessionStreaming) {
       return;
     }
-    await stopRef.current(currentSessionId);
+    await stopSession(currentSessionId);
   };
   const handleStartNewChat = async () => {
     const currentState = store.getState();
     const currentSessionId = currentState.activeSessionId;
     const isCurrentSessionStreaming = currentSessionId ? currentState.isStreamingBySession[currentSessionId] ?? false : false;
     if (currentSessionId && isCurrentSessionStreaming) {
-      void stopRef.current(currentSessionId);
+      void stopSession(currentSessionId);
     }
     createNewSession();
   };
@@ -9478,6 +9840,7 @@ var AiChat = ({
   renderNewChatTrigger,
   showComposerOnlyBeforeFirstMessage = false,
   onConversationStartedChange,
+  renderComposerModeAccessory,
   ...providerProps
 }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   import_compass_ui4.ConfigProvider,
@@ -9521,7 +9884,8 @@ var AiChat = ({
         showNewChatButton,
         renderNewChatTrigger,
         showComposerOnlyBeforeFirstMessage,
-        onConversationStartedChange
+        onConversationStartedChange,
+        renderComposerModeAccessory
       }
     ) })
   }