@xinghunm/ai-chat 1.3.3 → 1.4.1

package/dist/index.js

@@ -46,7 +46,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/ai-chat/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_styled17 = __toESM(require("@emotion/styled"));
 var import_compass_ui4 = require("@xinghunm/compass-ui");
 
@@ -70,6 +70,7 @@ var DEFAULT_AI_CHAT_LABELS = {
   stopButton: "Stop",
   retryButton: "Retry",
   scrollToLatest: "Jump to latest",
+  sessionsTitle: "Sessions",
   placeholder: "Ask something...",
   modeLabelAsk: "Ask",
   modeLabelPlan: "Plan",
@@ -100,7 +101,10 @@ var DEFAULT_AI_CHAT_LABELS = {
   modelUnavailable: "No model available",
   skillLoading: "Loading skills...",
   skillEmpty: "No matching skills",
-  removeSkillAriaLabel: "Remove skill"
+  removeSkillAriaLabel: "Remove skill",
+  sessionHistoryLoading: "Loading conversations...",
+  sessionHistoryLoadFailed: "Failed to load conversations",
+  sessionHistoryEmpty: "No conversations yet"
 };
 
 // src/lib/chat-session.ts
@@ -110,7 +114,6 @@ var createDraftChatSessionId = () => `${DRAFT_CHAT_SESSION_ID_PREFIX}${Date.now(
 var isDraftChatSessionId = (sessionId) => Boolean(sessionId?.startsWith(DRAFT_CHAT_SESSION_ID_PREFIX));
 var createDraftChatSession = ({
   model,
-  mode = DEFAULT_CHAT_AGENT_MODE,
   nowIso: nowIso2,
   createSessionId = createDraftChatSessionId
 }) => {
@@ -120,14 +123,27 @@ var createDraftChatSession = ({
     title: "New Chat",
     createdAt: iso,
     updatedAt: iso,
-    model,
-    mode
+    model
   };
 };
 
 // src/store/chat-store.ts
 var DEFAULT_CHAT_SESSION_TITLE = "New Chat";
 var IMAGE_MESSAGE_SESSION_TITLE = "Image message";
+var createHistoryMessagePaginationState = (page) => ({
+  previousCursor: page?.previousCursor ?? null,
+  hasMorePrevious: page?.hasMorePrevious ?? Boolean(page && page.previousCursor !== null),
+  isLoadingPrevious: false,
+  error: null
+});
+var normalizeHistoryMessages = (sessionId, messages) => messages.map((message) => ({ ...message, sessionId }));
+var mergeOlderHistoryMessages = (sessionId, olderMessages, currentMessages) => {
+  const currentMessageIds = new Set(currentMessages.map((message) => message.id));
+  const uniqueOlderMessages = normalizeHistoryMessages(sessionId, olderMessages).filter(
+    (message) => !currentMessageIds.has(message.id)
+  );
+  return [...uniqueOlderMessages, ...currentMessages];
+};
 var resolveSessionTitleFromMessage = (message) => {
   const trimmedContent = message.content.trim();
   if (trimmedContent) {
@@ -230,19 +246,27 @@ var createChatStore = (initialState) => (0, import_vanilla.createStore)((set, ge
   isStreamingBySession: {},
   isStoppingBySession: {},
   errorBySession: {},
+  sessionMessageLoadStatusBySession: {},
+  sessionMessageLoadErrorBySession: {},
+  historyMessagePaginationBySession: {},
   // ---- Session management ------------------------------------------------
   createSession: (session) => {
     const state = get();
     const exists = state.sessions.some((s) => s.sessionId === session.sessionId);
-    const nextSession = {
-      ...session,
-      mode: session.mode ?? DEFAULT_CHAT_AGENT_MODE
-    };
-    const nextSessions = exists ? state.sessions : [nextSession, ...state.sessions];
+    const nextSessions = exists ? state.sessions : [session, ...state.sessions];
     const nextMessagesBySession = { ...state.messagesBySession };
     const nextErrorBySession = { ...state.errorBySession };
     const nextIsStreamingBySession = { ...state.isStreamingBySession };
     const nextIsStoppingBySession = { ...state.isStoppingBySession };
+    const nextSessionMessageLoadStatusBySession = {
+      ...state.sessionMessageLoadStatusBySession
+    };
+    const nextSessionMessageLoadErrorBySession = {
+      ...state.sessionMessageLoadErrorBySession
+    };
+    const nextHistoryMessagePaginationBySession = {
+      ...state.historyMessagePaginationBySession
+    };
     const sid = session.sessionId;
     if (nextMessagesBySession[sid] === void 0)
       nextMessagesBySession[sid] = [];
@@ -252,20 +276,30 @@ var createChatStore = (initialState) => (0, import_vanilla.createStore)((set, ge
       nextIsStreamingBySession[sid] = false;
     if (nextIsStoppingBySession[sid] === void 0)
       nextIsStoppingBySession[sid] = false;
+    if (nextSessionMessageLoadStatusBySession[sid] === void 0) {
+      nextSessionMessageLoadStatusBySession[sid] = "loaded";
+    }
+    if (nextSessionMessageLoadErrorBySession[sid] === void 0) {
+      nextSessionMessageLoadErrorBySession[sid] = null;
+    }
+    if (nextHistoryMessagePaginationBySession[sid] === void 0) {
+      nextHistoryMessagePaginationBySession[sid] = createHistoryMessagePaginationState();
+    }
     set({
       sessions: nextSessions,
       activeSessionId: sid,
       messagesBySession: nextMessagesBySession,
       errorBySession: nextErrorBySession,
       isStreamingBySession: nextIsStreamingBySession,
-      isStoppingBySession: nextIsStoppingBySession
+      isStoppingBySession: nextIsStoppingBySession,
+      sessionMessageLoadStatusBySession: nextSessionMessageLoadStatusBySession,
+      sessionMessageLoadErrorBySession: nextSessionMessageLoadErrorBySession,
+      historyMessagePaginationBySession: nextHistoryMessagePaginationBySession
     });
   },
   startNewChat: () => {
-    const state = get();
     const session = createDraftChatSession({
       model: "",
-      mode: state.preferredMode,
       nowIso: () => (/* @__PURE__ */ new Date()).toISOString()
     });
     get().createSession(session);
@@ -313,6 +347,27 @@ var createChatStore = (initialState) => (0, import_vanilla.createStore)((set, ge
       nextErrorBySession[nextSessionId] = nextErrorBySession[previousSessionId] ?? null;
       delete nextErrorBySession[previousSessionId];
     }
+    const nextSessionMessageLoadStatusBySession = {
+      ...state.sessionMessageLoadStatusBySession
+    };
+    if (previousSessionId in nextSessionMessageLoadStatusBySession) {
+      nextSessionMessageLoadStatusBySession[nextSessionId] = nextSessionMessageLoadStatusBySession[previousSessionId] ?? "idle";
+      delete nextSessionMessageLoadStatusBySession[previousSessionId];
+    }
+    const nextSessionMessageLoadErrorBySession = {
+      ...state.sessionMessageLoadErrorBySession
+    };
+    if (previousSessionId in nextSessionMessageLoadErrorBySession) {
+      nextSessionMessageLoadErrorBySession[nextSessionId] = nextSessionMessageLoadErrorBySession[previousSessionId] ?? null;
+      delete nextSessionMessageLoadErrorBySession[previousSessionId];
+    }
+    const nextHistoryMessagePaginationBySession = {
+      ...state.historyMessagePaginationBySession
+    };
+    if (previousSessionId in nextHistoryMessagePaginationBySession) {
+      nextHistoryMessagePaginationBySession[nextSessionId] = nextHistoryMessagePaginationBySession[previousSessionId] ?? createHistoryMessagePaginationState();
+      delete nextHistoryMessagePaginationBySession[previousSessionId];
+    }
     const nextActiveSessionId = state.activeSessionId === previousSessionId ? nextSessionId : state.activeSessionId;
     set({
       sessions: nextSessions,
@@ -321,18 +376,66 @@ var createChatStore = (initialState) => (0, import_vanilla.createStore)((set, ge
       isStreamingBySession: nextIsStreamingBySession,
       isStoppingBySession: nextIsStoppingBySession,
       errorBySession: nextErrorBySession,
+      sessionMessageLoadStatusBySession: nextSessionMessageLoadStatusBySession,
+      sessionMessageLoadErrorBySession: nextSessionMessageLoadErrorBySession,
+      historyMessagePaginationBySession: nextHistoryMessagePaginationBySession,
       activeSessionId: nextActiveSessionId
     });
   },
   setPreferredMode: (mode) => {
     set({ preferredMode: mode });
   },
-  setSessionMode: (sessionId, mode) => {
+  hydrateHistorySessions: (sessions) => {
     const state = get();
-    const nextSessions = state.sessions.map(
-      (s) => s.sessionId === sessionId ? { ...s, mode } : s
+    const localSessions = state.sessions.filter(
+      (session) => isDraftChatSessionId(session.sessionId)
     );
-    set({ sessions: nextSessions });
+    const localSessionIds = new Set(localSessions.map((session) => session.sessionId));
+    const nextSessions = [
+      ...localSessions,
+      ...sessions.filter((session) => !localSessionIds.has(session.sessionId))
+    ];
+    const nextMessagesBySession = { ...state.messagesBySession };
+    const nextErrorBySession = { ...state.errorBySession };
+    const nextIsStreamingBySession = { ...state.isStreamingBySession };
+    const nextIsStoppingBySession = { ...state.isStoppingBySession };
+    const nextSessionMessageLoadStatusBySession = {
+      ...state.sessionMessageLoadStatusBySession
+    };
+    const nextSessionMessageLoadErrorBySession = {
+      ...state.sessionMessageLoadErrorBySession
+    };
+    const nextHistoryMessagePaginationBySession = {
+      ...state.historyMessagePaginationBySession
+    };
+    nextSessions.forEach((session) => {
+      const sid = session.sessionId;
+      if (nextErrorBySession[sid] === void 0)
+        nextErrorBySession[sid] = null;
+      if (nextIsStreamingBySession[sid] === void 0)
+        nextIsStreamingBySession[sid] = false;
+      if (nextIsStoppingBySession[sid] === void 0)
+        nextIsStoppingBySession[sid] = false;
+      if (nextSessionMessageLoadStatusBySession[sid] === void 0) {
+        nextSessionMessageLoadStatusBySession[sid] = "idle";
+      }
+      if (nextSessionMessageLoadErrorBySession[sid] === void 0) {
+        nextSessionMessageLoadErrorBySession[sid] = null;
+      }
+      if (nextHistoryMessagePaginationBySession[sid] === void 0) {
+        nextHistoryMessagePaginationBySession[sid] = createHistoryMessagePaginationState();
+      }
+    });
+    set({
+      sessions: nextSessions,
+      messagesBySession: nextMessagesBySession,
+      errorBySession: nextErrorBySession,
+      isStreamingBySession: nextIsStreamingBySession,
+      isStoppingBySession: nextIsStoppingBySession,
+      sessionMessageLoadStatusBySession: nextSessionMessageLoadStatusBySession,
+      sessionMessageLoadErrorBySession: nextSessionMessageLoadErrorBySession,
+      historyMessagePaginationBySession: nextHistoryMessagePaginationBySession
+    });
   },
   // ---- Message operations ------------------------------------------------
   appendMessage: (sessionId, message) => {
@@ -360,6 +463,92 @@ var createChatStore = (initialState) => (0, import_vanilla.createStore)((set, ge
       isStreamingBySession: nextIsStreamingBySession
     });
   },
+  hydrateHistorySessionMessages: (sessionId, messages) => {
+    const state = get();
+    set({
+      messagesBySession: {
+        ...state.messagesBySession,
+        [sessionId]: normalizeHistoryMessages(sessionId, messages)
+      },
+      sessionMessageLoadStatusBySession: {
+        ...state.sessionMessageLoadStatusBySession,
+        [sessionId]: "loaded"
+      },
+      sessionMessageLoadErrorBySession: {
+        ...state.sessionMessageLoadErrorBySession,
+        [sessionId]: null
+      },
+      historyMessagePaginationBySession: {
+        ...state.historyMessagePaginationBySession,
+        [sessionId]: createHistoryMessagePaginationState()
+      }
+    });
+  },
+  hydrateHistorySessionMessagesPage: (sessionId, page) => {
+    const state = get();
+    set({
+      messagesBySession: {
+        ...state.messagesBySession,
+        [sessionId]: normalizeHistoryMessages(sessionId, page.messages)
+      },
+      sessionMessageLoadStatusBySession: {
+        ...state.sessionMessageLoadStatusBySession,
+        [sessionId]: "loaded"
+      },
+      sessionMessageLoadErrorBySession: {
+        ...state.sessionMessageLoadErrorBySession,
+        [sessionId]: null
+      },
+      historyMessagePaginationBySession: {
+        ...state.historyMessagePaginationBySession,
+        [sessionId]: createHistoryMessagePaginationState(page)
+      }
+    });
+  },
+  prependHistorySessionMessagesPage: (sessionId, page) => {
+    const state = get();
+    set({
+      messagesBySession: {
+        ...state.messagesBySession,
+        [sessionId]: mergeOlderHistoryMessages(
+          sessionId,
+          page.messages,
+          state.messagesBySession[sessionId] ?? []
+        )
+      },
+      historyMessagePaginationBySession: {
+        ...state.historyMessagePaginationBySession,
+        [sessionId]: createHistoryMessagePaginationState(page)
+      }
+    });
+  },
+  setHistorySessionPreviousMessagesLoadStatus: (sessionId, isLoading, error2 = null) => {
+    const state = get();
+    const current = state.historyMessagePaginationBySession[sessionId] ?? createHistoryMessagePaginationState();
+    set({
+      historyMessagePaginationBySession: {
+        ...state.historyMessagePaginationBySession,
+        [sessionId]: {
+          ...current,
+          isLoadingPrevious: isLoading,
+          error: error2
+        }
+      }
+    });
+  },
+  setHistorySessionMessageLoadStatus: (sessionId, status, error2 = null) => {
+    const state = get();
+    set({
+      sessionMessageLoadStatusBySession: {
+        ...state.sessionMessageLoadStatusBySession,
+        [sessionId]: status
+      },
+      sessionMessageLoadErrorBySession: {
+        ...state.sessionMessageLoadErrorBySession,
+        [sessionId]: error2
+      }
+    });
+  },
   startStreamingMessage: (sessionId, message) => {
     const state = get();
     set({
@@ -807,6 +996,10 @@ var AiChatProvider = (props) => {
     handleQuestionnaireSubmit,
     handleConfirmationSubmit,
     messageRenderOrder,
+    historySessionList,
+    onLoadMoreSessions,
+    onSelectHistorySession,
+    onLoadMoreHistoryMessages,
     enableImageAttachments = true,
     children
   } = props;
@@ -883,7 +1076,11 @@ var AiChatProvider = (props) => {
       handleConfirmationSubmit,
       messageRenderOrder,
       transformStreamPacket: defaultTransformStreamPacket,
-      enableImageAttachments
+      enableImageAttachments,
+      historySessionList,
+      onLoadMoreSessions,
+      onSelectHistorySession,
+      onLoadMoreHistoryMessages
     }),
     [
       axiosInstance,
@@ -893,8 +1090,12 @@ var AiChatProvider = (props) => {
       enableImageAttachments,
       handleConfirmationSubmit,
       handleQuestionnaireSubmit,
+      historySessionList,
       labels,
       messageRenderOrder,
+      onLoadMoreSessions,
+      onLoadMoreHistoryMessages,
+      onSelectHistorySession,
       renderMessageBlock,
       sendRef,
       retryRef,
@@ -2922,9 +3123,8 @@ var ChatMessageItemView = ({
   const hasMarkdownOnlyBlocks = hasStructuredBlocks && blocks.every((block) => block.type === "markdown");
   const hasTextContent = Boolean(settledContent || freshContent || displayedContent);
   const shouldRenderStructuredBlocks = hasStructuredBlocks && !(isAssistantStreaming && hasMarkdownOnlyBlocks && hasTextContent);
-  const isPlanMode = mode === "plan";
-  const canSubmitConfirmation = isPlanMode && typeof onConfirmationSubmit === "function";
-  const canSubmitQuestionnaire = isPlanMode && typeof onQuestionnaireSubmit === "function";
+  const canSubmitConfirmation = typeof onConfirmationSubmit === "function";
+  const canSubmitQuestionnaire = typeof onQuestionnaireSubmit === "function";
   const shouldShowStreamingCaret = isAssistantStreaming && (!shouldRenderStructuredBlocks || hasTextContent);
   const isUserMessage = message.role === "user";
   const messageRenderMode = isUserMessage ? "plain-text" : "markdown";
@@ -2982,7 +3182,7 @@ var ChatMessageItemView = ({
           ExecutionConfirmationCard,
           {
             proposal: block.proposal,
-            interactive: isPlanMode,
+            interactive: canSubmitConfirmation,
             onConfirm: canSubmitConfirmation ? () => onConfirmationSubmit({
               proposalId: block.proposal.proposalId,
               content: createExecutionConfirmationContent(block.proposal),
@@ -3206,15 +3406,11 @@ var Bubble = import_styled7.default.article`
 
   &[data-role='user'] {
     width: auto;
-    max-width: min(760px, 100%);
+    max-width: 100%;
     margin-left: auto;
-    padding: 14px 16px;
-    border-radius: 22px;
-    background: linear-gradient(180deg, rgba(59, 59, 63, 0.9) 0%, rgba(42, 43, 46, 0.92) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.07);
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.03),
-      0 12px 30px rgba(0, 0, 0, 0.18);
+    padding: 8px 12px;
+    background: #282825;
+    border-radius: 16px;
   }
 `;
 var Header2 = import_styled7.default.div`
@@ -3546,6 +3742,7 @@ var HeroSubtitle = import_styled8.default.p`
 // src/components/chat-thread/index.tsx
 var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
 var CHAT_THREAD_PINNED_THRESHOLD_PX = 32;
+var CHAT_THREAD_LOAD_PREVIOUS_THRESHOLD_PX = 80;
 var isThreadPinnedToBottom = (container) => container.scrollHeight - container.clientHeight - container.scrollTop <= CHAT_THREAD_PINNED_THRESHOLD_PX;
 var renderChatMessage = ({
   message,
@@ -3615,13 +3812,17 @@ var groupConversationTurns = (historyMessages, streamingMessage) => {
   ];
 };
 var ChatThreadView = ({
-  activeSessionMode = DEFAULT_CHAT_AGENT_MODE,
+  activeMode = DEFAULT_CHAT_AGENT_MODE,
   historyMessages,
   streamingMessage,
   error: error2,
+  isLoadingPreviousMessages = false,
+  previousMessagesError,
   retryButtonLabel,
   scrollToLatestLabel,
+  sessionHistoryLoadingLabel,
   onRetry,
+  onLoadPreviousMessages,
   onConfirmationSubmit,
   onQuestionnaireSubmit,
   renderMessageBlock
@@ -3636,6 +3837,7 @@ var ChatThreadView = ({
   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);
@@ -3682,17 +3884,45 @@ var ChatThreadView = ({
     },
     [markThreadPinned, scrollToBottom]
   );
+  const handleLoadPreviousMessages = (0, import_react11.useCallback)(async () => {
+    const container = containerRef.current;
+    if (!container || !onLoadPreviousMessages || isLoadingPreviousMessages) {
+      return;
+    }
+    if (isLoadingPreviousRef.current) {
+      return;
+    }
+    isLoadingPreviousRef.current = true;
+    const previousScrollHeight = container.scrollHeight;
+    const previousScrollTop = container.scrollTop;
+    try {
+      await onLoadPreviousMessages();
+    } catch {
+      return;
+    } finally {
+      isLoadingPreviousRef.current = false;
+    }
+    window.requestAnimationFrame(() => {
+      const nextContainer = containerRef.current;
+      if (!nextContainer)
+        return;
+      nextContainer.scrollTop = nextContainer.scrollHeight - previousScrollHeight + previousScrollTop;
+    });
+  }, [isLoadingPreviousMessages, onLoadPreviousMessages]);
   const handleContainerScroll = (0, import_react11.useCallback)(() => {
     const container = containerRef.current;
     if (!container)
       return;
+    if (onLoadPreviousMessages && container.scrollTop <= CHAT_THREAD_LOAD_PREVIOUS_THRESHOLD_PX) {
+      void handleLoadPreviousMessages();
+    }
     const nextPinned = isThreadPinnedToBottom(container);
     isPinnedRef.current = nextPinned;
     setIsDetached(!nextPinned);
     if (nextPinned) {
       setPendingNewMessageCount(0);
     }
-  }, []);
+  }, [handleLoadPreviousMessages, onLoadPreviousMessages]);
   (0, import_react11.useLayoutEffect)(() => {
     const nextHistoryMessageId = latestHistoryMessage?.id;
     if (lastHistoryMessageIdRef.current === nextHistoryMessageId) {
@@ -3820,6 +4050,8 @@ var ChatThreadView = ({
   }, [latestTurn, scrollToBottom]);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ThreadViewport, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Container, { ref: containerRef, "data-testid": "chat-thread", onScroll: handleContainerScroll, children: [
+      isLoadingPreviousMessages ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PreviousMessagesStateRow, { "data-testid": "chat-thread-loading-previous", children: sessionHistoryLoadingLabel }) : null,
+      previousMessagesError ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PreviousMessagesStateRow, { "data-testid": "chat-thread-load-previous-error", children: previousMessagesError }) : null,
       conversationTurns.map((turn, turnIndex) => {
         const isLatestTurn = turnIndex === conversationTurns.length - 1;
         return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -3836,7 +4068,7 @@ var ChatThreadView = ({
                   style: isLatestTurn ? { scrollMarginTop: `${CHAT_THREAD_SCROLL_TOP_GAP}px` } : void 0,
                   children: renderChatMessage({
                     message: turn.userMessage,
-                    mode: activeSessionMode,
+                    mode: activeMode,
                     onConfirmationSubmit,
                     onQuestionnaireSubmit,
                     renderMessageBlock
@@ -3845,7 +4077,7 @@ var ChatThreadView = ({
               ) : null,
               turn.responseMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSlot, { children: renderChatMessage({
                 message,
-                mode: activeSessionMode,
+                mode: activeMode,
                 onConfirmationSubmit,
                 onQuestionnaireSubmit,
                 renderMessageBlock
@@ -3876,14 +4108,25 @@ var EMPTY_MESSAGES = [];
 var ChatThread = () => {
   const activeSessionId = useChatStore((s) => s.activeSessionId);
   const hasSessions = useChatStore((s) => s.sessions.length > 0);
-  const activeSessionMode = useChatStore(
-    (s) => s.sessions.find((x) => x.sessionId === s.activeSessionId)?.mode ?? DEFAULT_CHAT_AGENT_MODE
+  const activeSession = useChatStore(
+    (s) => s.sessions.find((session) => session.sessionId === s.activeSessionId)
   );
+  const preferredMode = useChatStore((s) => s.preferredMode);
   const messages = useChatStore(
     (s) => s.messagesBySession[s.activeSessionId ?? ""] ?? EMPTY_MESSAGES
   );
+  const sessionMessageLoadStatus = useChatStore(
+    (s) => s.sessionMessageLoadStatusBySession[s.activeSessionId ?? ""]
+  );
   const streamingMessage = useChatStore((s) => s.streamingMessageBySession[s.activeSessionId ?? ""]);
   const error2 = useChatStore((s) => s.errorBySession[s.activeSessionId ?? ""]);
+  const historyMessagePagination = useChatStore(
+    (s) => s.historyMessagePaginationBySession[s.activeSessionId ?? ""]
+  );
+  const prependHistorySessionMessagesPage = useChatStore((s) => s.prependHistorySessionMessagesPage);
+  const setHistorySessionPreviousMessagesLoadStatus = useChatStore(
+    (s) => s.setHistorySessionPreviousMessagesLoadStatus
+  );
   const updateQA = useChatStore((s) => s.updateQuestionnaireAnswers);
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const {
@@ -3892,6 +4135,7 @@ var ChatThread = () => {
     renderMessageBlock,
     handleQuestionnaireSubmit: customQuestionnaireSubmit,
     handleConfirmationSubmit: customConfirmationSubmit,
+    onLoadMoreHistoryMessages,
     labels
   } = useChatContext();
   const handleRetry = (0, import_react11.useCallback)(() => {
@@ -3906,7 +4150,7 @@ var ChatThread = () => {
       if (customQuestionnaireSubmit) {
         const handled = await customQuestionnaireSubmit(submission, {
           sessionId: sourceSessionId ?? void 0,
-          mode: activeSessionMode
+          mode: preferredMode
         });
         if (handled !== false) {
           if (sourceSessionId && submission.sourceMessageId) {
@@ -3933,7 +4177,7 @@ var ChatThread = () => {
         );
       }
     },
-    [activeSessionId, activeSessionMode, updateQA, sendRef, customQuestionnaireSubmit]
+    [activeSessionId, customQuestionnaireSubmit, preferredMode, sendRef, updateQA]
   );
   const handleConfirmation = (0, import_react11.useCallback)(
     async (submission) => {
@@ -3941,7 +4185,7 @@ var ChatThread = () => {
       if (customConfirmationSubmit) {
         const handled = await customConfirmationSubmit(submission, {
           sessionId: sourceSessionId ?? void 0,
-          mode: activeSessionMode
+          mode: preferredMode
         });
         if (handled !== false) {
           return;
@@ -3952,21 +4196,61 @@ var ChatThread = () => {
         includeComposerAttachments: false
       });
     },
-    [activeSessionId, activeSessionMode, sendRef, customConfirmationSubmit]
+    [activeSessionId, customConfirmationSubmit, preferredMode, sendRef]
+  );
+  const handleLoadPreviousMessages = (0, import_react11.useCallback)(async () => {
+    if (!activeSession || !onLoadMoreHistoryMessages || !historyMessagePagination?.hasMorePrevious || !historyMessagePagination.previousCursor || historyMessagePagination.isLoadingPrevious) {
+      return;
+    }
+    setHistorySessionPreviousMessagesLoadStatus(activeSession.sessionId, true);
+    try {
+      const page = await onLoadMoreHistoryMessages({
+        session: activeSession,
+        cursor: historyMessagePagination.previousCursor
+      });
+      if (page) {
+        prependHistorySessionMessagesPage(activeSession.sessionId, page);
+        return;
+      }
+      setHistorySessionPreviousMessagesLoadStatus(activeSession.sessionId, false);
+    } catch (error3) {
+      setHistorySessionPreviousMessagesLoadStatus(
+        activeSession.sessionId,
+        false,
+        error3 instanceof Error ? error3.message : String(error3)
+      );
+      throw error3;
+    }
+  }, [
+    activeSession,
+    historyMessagePagination,
+    onLoadMoreHistoryMessages,
+    prependHistorySessionMessagesPage,
+    setHistorySessionPreviousMessagesLoadStatus
+  ]);
+  const canLoadPreviousMessages = Boolean(
+    activeSession && onLoadMoreHistoryMessages && historyMessagePagination?.hasMorePrevious && historyMessagePagination.previousCursor && !historyMessagePagination.isLoadingPrevious
   );
+  if (hasSessions && sessionMessageLoadStatus === "loading" && messages.length === 0 && !streamingMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ThreadStateViewport, { "data-testid": "chat-thread-loading-state", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ThreadStateText, { children: labels.sessionHistoryLoading }) });
+  }
   if (!hasSessions || messages.length === 0 && !streamingMessage) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatThreadEmptyState, {});
   }
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     ChatThreadView,
     {
-      activeSessionMode,
+      activeMode: preferredMode,
       historyMessages: messages,
       streamingMessage,
       error: error2,
+      isLoadingPreviousMessages: historyMessagePagination?.isLoadingPrevious,
+      previousMessagesError: historyMessagePagination?.error,
       retryButtonLabel: labels.retryButton,
       scrollToLatestLabel: labels.scrollToLatest,
+      sessionHistoryLoadingLabel: labels.sessionHistoryLoading,
       onRetry: handleRetry,
+      onLoadPreviousMessages: canLoadPreviousMessages ? handleLoadPreviousMessages : void 0,
       onConfirmationSubmit: handleConfirmation,
       onQuestionnaireSubmit: handleQuestionnaireSubmit,
       renderMessageBlock
@@ -3980,6 +4264,18 @@ var ThreadViewport = import_styled9.default.div`
   flex: 1;
   min-height: 0;
 `;
+var ThreadStateViewport = import_styled9.default.div`
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+`;
+var ThreadStateText = import_styled9.default.div`
+  color: var(--text-secondary, rgba(255, 255, 255, 0.64));
+  font-size: 14px;
+`;
 var Container = import_styled9.default.div`
   display: flex;
   flex: 1;
@@ -3987,7 +4283,7 @@ var Container = import_styled9.default.div`
   gap: 18px;
   min-height: 0;
   overflow: auto;
-  padding: 24px 24px 88px;
+  padding: 24px 16px 88px;
   overscroll-behavior: contain;
 
   &::-webkit-scrollbar {
@@ -4006,10 +4302,23 @@ var Container = import_styled9.default.div`
 var MessageSlot = import_styled9.default.div`
   display: flex;
 `;
+var PreviousMessagesStateRow = import_styled9.default.div`
+  width: 100%;
+  max-width: var(--chat-content-max-width, 48rem);
+  margin-right: auto;
+  margin-left: auto;
+  color: var(--text-secondary, rgba(255, 255, 255, 0.64));
+  font-size: 13px;
+  text-align: center;
+`;
 var ConversationTurn = import_styled9.default.div`
   display: flex;
   flex-direction: column;
   gap: 18px;
+  width: 100%;
+  max-width: var(--chat-content-max-width, 48rem);
+  margin-right: auto;
+  margin-left: auto;
 `;
 var ErrorText = import_styled9.default.div`
   color: #ff7b72;
@@ -6663,7 +6972,6 @@ var resolveSelectedChatModel = ({
 var resolveSendSession = ({
   activeSessionId,
   selectedModel,
-  selectedMode,
   nowIso: nowIso2,
   createSessionId
 }) => {
@@ -6675,7 +6983,6 @@ var resolveSendSession = ({
   }
   const session = createDraftChatSession({
     model: selectedModel,
-    mode: selectedMode ?? DEFAULT_CHAT_AGENT_MODE,
     nowIso: nowIso2,
     createSessionId
   });
@@ -6833,9 +7140,6 @@ var useChatComposer = () => {
   const skillsLoader = transport.getSkills;
   const activeSkillsLoaderRef = (0, import_react15.useRef)(skillsLoader);
   const activeSessionId = useChatStore((s) => s.activeSessionId);
-  const activeSession = useChatStore(
-    (s) => s.sessions.find((x) => x.sessionId === s.activeSessionId) ?? null
-  );
   const preferredMode = useChatStore((s) => s.preferredMode);
   const streamingSessionId = useChatStore(
     (s) => s.activeSessionId && s.isStreamingBySession[s.activeSessionId] ? s.activeSessionId : null
@@ -6856,7 +7160,6 @@ var useChatComposer = () => {
   const setSessionError = useChatStore((s) => s.setSessionError);
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const setPreferredMode = useChatStore((s) => s.setPreferredMode);
-  const setSessionMode = useChatStore((s) => s.setSessionMode);
   const [availableModels, setAvailableModels] = (0, import_react15.useState)([]);
   const [isModelsLoading, setIsModelsLoading] = (0, import_react15.useState)(true);
   const [isModelsError, setIsModelsError] = (0, import_react15.useState)(false);
@@ -6937,12 +7240,8 @@ var useChatComposer = () => {
     );
   }, [availableModels, isModelsLoading]);
   (0, import_react15.useEffect)(() => {
-    if (activeSession) {
-      setSelectedModeLocal(activeSession.mode ?? DEFAULT_CHAT_AGENT_MODE);
-      return;
-    }
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
-  }, [activeSession, preferredMode]);
+  }, [preferredMode]);
   (0, import_react15.useEffect)(() => {
     if (previousActiveSessionIdRef.current !== activeSessionId) {
       setSelectedSkills([]);
@@ -7150,7 +7449,7 @@ var useChatComposer = () => {
       const storeState = store.getState();
       const currentActiveSessionId = options?.sessionId ?? storeState.activeSessionId;
       const currentActiveSession = storeState.sessions.find((session2) => session2.sessionId === currentActiveSessionId) ?? null;
-      const currentMode = currentActiveSession?.mode ?? selectedMode;
+      const currentMode = selectedMode;
       if (!(selectedModel || currentActiveSession?.model || availableModels[0]?.id)) {
         return;
       }
@@ -7158,7 +7457,6 @@ var useChatComposer = () => {
       const { localSessionId, sessionId, session } = resolveSendSession({
         activeSessionId: currentActiveSessionId,
         selectedModel: resolvedModel,
-        selectedMode: currentMode,
         nowIso,
         createSessionId: createDraftChatSessionId
       });
@@ -7306,8 +7604,6 @@ var useChatComposer = () => {
       setSelectedMode: (mode) => {
         setSelectedModeLocal(mode);
         setPreferredMode(mode);
-        if (activeSessionId)
-          setSessionMode(activeSessionId, mode);
         if (activeSessionId) {
           const previousRequest = lastRequestBySessionRef.current.get(activeSessionId);
           if (previousRequest) {
@@ -7797,7 +8093,7 @@ var PrimaryButton = (0, import_styled13.default)(import_compass_ui3.Button)`
     min-width: 24px;
     width: 24px;
     height: 24px;
-    background: ${({ $canSend }) => $canSend ? "#fcfbf8" : "rgba(255, 255, 255, 0.3)"};
+    background: ${({ $canSend }) => $canSend ? "#fcfbf8" : "rgba(252,251,248,0.3);"};
     color: ${({ $canSend }) => $canSend ? "#5b5448" : "rgba(255, 255, 255, 0.72)"};
     border-radius: 12px;
     border: 1px solid ${({ $canSend }) => $canSend ? "rgba(198, 188, 170, 0.38)" : "transparent"};
@@ -7808,7 +8104,7 @@ var PrimaryButton = (0, import_styled13.default)(import_compass_ui3.Button)`
     }
 
     &:hover:not(:disabled) {
-      background: ${({ $canSend }) => $canSend ? "#f7f4ec" : "rgba(255, 255, 255, 0.3)"};
+      background: ${({ $canSend }) => $canSend ? "#f7f4ec" : "rgba(252,251,248,0.3);"};
       color: ${({ $canSend }) => $canSend ? "#4f493f" : "rgba(255, 255, 255, 0.72)"};
       border-color: ${({ $canSend }) => $canSend ? "rgba(198, 188, 170, 0.46)" : "transparent"};
     }
@@ -7876,7 +8172,7 @@ var StopSpinner = import_styled13.default.span`
 var import_jsx_runtime16 = require("@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_TOP_PX = 12;
 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;
@@ -8111,6 +8407,10 @@ var ChatComposerView = ({
     setActiveSkillNavigation({ queryKey: "", index: 0 });
   };
   const handleKeyDown = (event) => {
+    const isImeComposing = event.nativeEvent.isComposing || event.keyCode === 229;
+    if (event.key === "Enter" && isImeComposing) {
+      return;
+    }
     if (skillQueryMatch) {
       if (event.key === "ArrowDown" && filteredSkills.length > 0) {
         event.preventDefault();
@@ -8388,7 +8688,7 @@ var Surface = import_styled14.default.div`
     'input'
     'footer';
   width: 100%;
-  max-width: 760px;
+  max-width: var(--chat-content-max-width, 48rem);
   margin: 0 auto;
   background: var(--border-color);
   border-radius: 20px;
@@ -8649,36 +8949,28 @@ var SkillButton = import_styled14.default.button`
 `;
 
 // src/components/chat-conversation-list/index.tsx
+var import_react20 = 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_styled15 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
-var ChatSessionItem = (0, import_react19.memo)(
-  ({ session, isActive, modeLabel, onClick }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      SessionButton,
-      {
-        type: "button",
-        "data-active": isActive,
-        onClick: () => onClick(session.sessionId),
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SessionMeta, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SessionTitle, { children: session.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModeBadge, { children: modeLabel })
-        ] })
-      }
-    );
-  }
-);
+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 })
+    }
+  );
+});
 ChatSessionItem.displayName = "ChatSessionItem";
-var SessionMeta = import_styled15.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-`;
 var SessionTitle = import_styled15.default.span`
+  display: block;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -8692,51 +8984,178 @@ var SessionButton = import_styled15.default.button`
   color: var(--text-primary);
   background: rgba(255, 255, 255, 0.03);
   cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.08);
+  }
+
+  &:focus-visible {
+    outline: none;
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.18);
+  }
+
+  &:active {
+    transform: scale(0.995);
+  }
 
   &[data-active='true'] {
     border-color: rgba(255, 255, 255, 0.2);
     background: rgba(255, 255, 255, 0.08);
   }
 `;
-var ModeBadge = import_styled15.default.span`
-  flex-shrink: 0;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 4px 10px;
-  font-size: 11px;
-  line-height: 1;
-  color: var(--text-secondary);
-  background: rgba(255, 255, 255, 0.04);
-`;
+
+// src/components/chat-conversation-list/lib/history-session-selection.ts
+var shouldLoadHistorySessionMessages = ({
+  sessionId,
+  messagesBySession,
+  loadStatusBySession,
+  isStreamingBySession
+}) => {
+  if (isStreamingBySession[sessionId])
+    return false;
+  if (loadStatusBySession[sessionId] === "loading")
+    return false;
+  if (loadStatusBySession[sessionId] === "error")
+    return true;
+  if (loadStatusBySession[sessionId] === "loaded")
+    return false;
+  return messagesBySession[sessionId] === void 0;
+};
 
 // src/components/chat-conversation-list/index.tsx
 var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
+var SCROLL_LOAD_MORE_THRESHOLD_PX = 80;
+var shouldLoadMoreSessions = ({
+  scrollTop,
+  clientHeight,
+  scrollHeight,
+  threshold = SCROLL_LOAD_MORE_THRESHOLD_PX
+}) => scrollHeight - scrollTop - clientHeight <= threshold;
+var isHistorySessionMessagesPage = (value) => typeof value === "object" && value !== null && Array.isArray(value.messages);
 var ChatConversationList = () => {
-  const { labels } = useChatContext();
-  const sessions = useChatStore((s) => s.sessions);
+  const { labels, historySessionList, onLoadMoreSessions, onSelectHistorySession, 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 modeLabels = {
-    ask: labels.modeLabelAsk,
-    plan: labels.modeLabelPlan,
-    agent: labels.modeLabelAgent
+  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)(() => {
+    if (!historySessionList)
+      return;
+    hydrateHistorySessions(historySessionList.sessions);
+  }, [historySessionList, hydrateHistorySessions]);
+  (0, import_react20.useEffect)(() => {
+    if (historySessionList?.isLoading) {
+      hasSeenLoadingMoreRef.current = true;
+      return;
+    }
+    if (hasSeenLoadingMoreRef.current) {
+      hasSeenLoadingMoreRef.current = false;
+      isLoadingMoreRef.current = false;
+    }
+  }, [historySessionList?.isLoading]);
+  (0, import_react20.useEffect)(() => {
+    isLoadingMoreRef.current = false;
+    hasSeenLoadingMoreRef.current = false;
+  }, [historySessionList?.sessions.length, historySessionList?.hasMore]);
+  const sessions = (0, import_react20.useMemo)(() => {
+    if (!historySessionList) {
+      return localSessions;
+    }
+    const persistedLocalSessions = localSessions.filter(
+      (session) => !isDraftChatSessionId(session.sessionId)
+    );
+    const localSessionIds = new Set(persistedLocalSessions.map((session) => session.sessionId));
+    return [
+      ...persistedLocalSessions,
+      ...historySessionList.sessions.filter((session) => !localSessionIds.has(session.sessionId))
+    ];
+  }, [historySessionList, localSessions]);
+  const handleSessionListScroll = (event) => {
+    if (!historySessionList?.hasMore || historySessionList.isLoading || !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;
+      });
+    }
+  };
+  const handleSelectSession = async (sessionId) => {
+    setActiveSession(sessionId);
+    const session = sessions.find((item) => item.sessionId === sessionId);
+    if (!session || !onSelectHistorySession) {
+      return;
+    }
+    const state = store.getState();
+    const shouldLoad = shouldLoadHistorySessionMessages({
+      sessionId,
+      messagesBySession: state.messagesBySession,
+      loadStatusBySession: state.sessionMessageLoadStatusBySession,
+      isStreamingBySession: state.isStreamingBySession
+    });
+    if (!shouldLoad) {
+      return;
+    }
+    setHistorySessionMessageLoadStatus(sessionId, "loading");
+    try {
+      const result = await onSelectHistorySession(session);
+      if (Array.isArray(result)) {
+        hydrateHistorySessionMessages(sessionId, result);
+        return;
+      }
+      if (isHistorySessionMessagesPage(result)) {
+        hydrateHistorySessionMessagesPage(sessionId, result);
+        return;
+      }
+      setHistorySessionMessageLoadStatus(sessionId, "loaded");
+    } catch (error2) {
+      setHistorySessionMessageLoadStatus(
+        sessionId,
+        "error",
+        error2 instanceof Error ? error2.message : String(error2)
+      );
+    }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Container3, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Toolbar, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Title3, { children: "Sessions" }),
+      /* @__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.jsx)(List2, { "data-testid": "chat-session-list", children: sessions.map((session) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      ChatSessionItem,
-      {
-        session,
-        isActive: activeSessionId === session.sessionId,
-        modeLabel: modeLabels[session.mode ?? DEFAULT_CHAT_AGENT_MODE] ?? "",
-        onClick: setActiveSession
-      },
-      session.sessionId
-    )) })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(List2, { "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)
+        },
+        session.sessionId
+      )),
+      historySessionList?.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StateRow, { "data-testid": "chat-session-history-loading", children: labels.sessionHistoryLoading }) : null,
+      historySessionList?.error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StateRow, { "data-testid": "chat-session-history-error", children: historySessionList.error || labels.sessionHistoryLoadFailed }) : null,
+      historySessionList && !historySessionList.isLoading && !historySessionList.error && sessions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StateRow, { "data-testid": "chat-session-history-empty", children: labels.sessionHistoryEmpty }) : null
+    ] })
   ] });
 };
 var Container3 = import_styled16.default.aside`
@@ -8759,13 +9178,32 @@ var Title3 = import_styled16.default.h2`
   color: var(--text-secondary);
 `;
 var CreateButton = import_styled16.default.button`
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 12px;
   padding: 12px 14px;
-  background: var(--text-primary);
-  color: var(--bg-primary);
+  background: rgba(255, 255, 255, 0.9);
+  color: rgba(20, 20, 20, 0.92);
   text-align: left;
   cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    transform 160ms ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.96);
+    border-color: rgba(255, 255, 255, 0.28);
+  }
+
+  &:focus-visible {
+    outline: none;
+    background: rgba(255, 255, 255, 0.96);
+    border-color: rgba(255, 255, 255, 0.32);
+  }
+
+  &:active {
+    transform: scale(0.995);
+  }
 `;
 var List2 = import_styled16.default.div`
   padding: 0 12px 16px;
@@ -8774,6 +9212,11 @@ var List2 = import_styled16.default.div`
   gap: 8px;
   overflow: auto;
 `;
+var StateRow = import_styled16.default.div`
+  padding: 12px;
+  font-size: 13px;
+  color: var(--text-secondary);
+`;
 
 // src/components/ai-chat/index.tsx
 var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
@@ -8835,7 +9278,7 @@ var AiChatWorkspaceContent = ({
     })
   );
   const shouldShowComposerOnly = showComposerOnlyBeforeFirstMessage && !showConversationList && !isConversationStarted;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     onConversationStartedChange?.(isConversationStarted);
   }, [isConversationStarted, onConversationStartedChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Root, { "data-testid": "ai-chat", children: [
@@ -8974,12 +9417,25 @@ var Root = import_styled17.default.div`
   overflow: hidden;
 `;
 var Workspace = import_styled17.default.section`
+  --chat-layout-rem: 16px;
+  --chat-content-margin: calc(var(--chat-layout-rem) * 1);
+  --chat-content-max-width: calc(var(--chat-layout-rem) * 40);
+
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-height: 0;
   overflow: hidden;
+
+  @media (min-width: 640px) {
+    --chat-content-margin: calc(var(--chat-layout-rem) * 1.5);
+  }
+
+  @media (min-width: 1024px) {
+    --chat-content-margin: calc(var(--chat-layout-rem) * 4);
+    --chat-content-max-width: calc(var(--chat-layout-rem) * 48);
+  }
 `;
 var QuickActionsRow = import_styled17.default.div`
   display: flex;