diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatContainer/ChatContainer.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatContainer/ChatContainer.tsx
index beba3434a3..147823f708 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatContainer/ChatContainer.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatContainer/ChatContainer.tsx
@@ -11,6 +11,7 @@ export interface ChatContainerProps {
   status: string;
   error: Error | undefined;
   sessionId: string | null;
+  isLoadingSession: boolean;
   isCreatingSession: boolean;
   onCreateSession: () => void | Promise<string>;
   onSend: (message: string) => void | Promise<void>;
@@ -20,6 +21,7 @@ export const ChatContainer = ({
   status,
   error,
   sessionId,
+  isLoadingSession,
   isCreatingSession,
   onCreateSession,
   onSend,
@@ -36,6 +38,7 @@ export const ChatContainer = ({
                 messages={messages}
                 status={status}
                 error={error}
+                isLoading={isLoadingSession}
               />
               <motion.div
                 layoutId={inputLayoutId}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatMessagesContainer/ChatMessagesContainer.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatMessagesContainer/ChatMessagesContainer.tsx
index a10423c147..597f50841c 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatMessagesContainer/ChatMessagesContainer.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatMessagesContainer/ChatMessagesContainer.tsx
@@ -8,6 +8,7 @@ import {
   MessageContent,
   MessageResponse,
 } from "@/components/ai-elements/message";
+import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { UIDataTypes, UIMessage, UITools, ToolUIPart } from "ai";
 import { FindBlocksTool } from "../../tools/FindBlocks/FindBlocks";
 import { FindAgentsTool } from "../../tools/FindAgents/FindAgents";
@@ -22,16 +23,23 @@ interface ChatMessagesContainerProps {
   messages: UIMessage<unknown, UIDataTypes, UITools>[];
   status: string;
   error: Error | undefined;
+  isLoading: boolean;
 }
 
 export const ChatMessagesContainer = ({
   messages,
   status,
   error,
+  isLoading,
 }: ChatMessagesContainerProps) => {
   return (
     <Conversation className="min-h-0 flex-1">
       <ConversationContent className="gap-6 px-3 py-6">
+        {isLoading && messages.length === 0 && (
+          <div className="flex flex-1 items-center justify-center">
+            <LoadingSpinner size="large" className="text-neutral-400" />
+          </div>
+        )}
         {messages.map((message) => (
           <Message from={message.role} key={message.id}>
             <MessageContent
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/page.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/page.tsx
index 68bdec1e92..402d139db5 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/page.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/page.tsx
@@ -13,6 +13,7 @@ export default function Page() {
     messages,
     status,
     error,
+    isLoadingSession,
     isCreatingSession,
     createSession,
     onSend,
@@ -42,6 +43,7 @@ export default function Page() {
             status={status}
             error={error}
             sessionId={sessionId}
+            isLoadingSession={isLoadingSession}
             isCreatingSession={isCreatingSession}
             onCreateSession={createSession}
             onSend={onSend}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindAgents/FindAgents.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindAgents/FindAgents.tsx
index d609f0dbd4..09126cd224 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindAgents/FindAgents.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindAgents/FindAgents.tsx
@@ -64,7 +64,11 @@ export function FindAgentsTool({ part }: Props) {
   return (
     <div className="py-2">
       <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <ToolIcon toolType={part.type} isStreaming={isStreaming} isError={isError} />
+        <ToolIcon
+          toolType={part.type}
+          isStreaming={isStreaming}
+          isError={isError}
+        />
         <MorphingTextAnimation
           text={text}
           className={isError ? "text-red-500" : undefined}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindAgents/helpers.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindAgents/helpers.tsx
index 01e14ace31..bd356b7d78 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindAgents/helpers.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/FindAgents/helpers.tsx
@@ -1,8 +1,5 @@
 import { ToolUIPart } from "ai";
-import {
-  MagnifyingGlassIcon,
-  SquaresFourIcon,
-} from "@phosphor-icons/react";
+import { MagnifyingGlassIcon, SquaresFourIcon } from "@phosphor-icons/react";
 import type { AgentInfo } from "@/app/api/__generated__/models/agentInfo";
 import type { AgentsFoundResponse } from "@/app/api/__generated__/models/agentsFoundResponse";
 import type { ErrorResponse } from "@/app/api/__generated__/models/errorResponse";
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/RunAgent.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/RunAgent.tsx
index 60e450ffa5..a39cfddddd 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/RunAgent.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunAgent/RunAgent.tsx
@@ -210,7 +210,8 @@ export function RunAgentTool({ part }: Props) {
 
   const output = getRunAgentToolOutput(part);
   const isError =
-    part.state === "output-error" || (!!output && isRunAgentErrorOutput(output));
+    part.state === "output-error" ||
+    (!!output && isRunAgentErrorOutput(output));
   const hasExpandableContent =
     part.state === "output-available" &&
     !!output &&
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunBlock/RunBlock.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunBlock/RunBlock.tsx
index bcbff8c922..fefd18a2a2 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunBlock/RunBlock.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunBlock/RunBlock.tsx
@@ -195,7 +195,8 @@ export function RunBlockTool({ part }: Props) {
 
   const output = getRunBlockToolOutput(part);
   const isError =
-    part.state === "output-error" || (!!output && isRunBlockErrorOutput(output));
+    part.state === "output-error" ||
+    (!!output && isRunBlockErrorOutput(output));
   const hasExpandableContent =
     part.state === "output-available" &&
     !!output &&
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunBlock/helpers.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunBlock/helpers.tsx
index 5f846da27f..c83d136db1 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunBlock/helpers.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/RunBlock/helpers.tsx
@@ -95,8 +95,7 @@ export function getAnimationText(part: {
     case "output-available": {
       const output = parseOutput(part.output);
       if (!output) return `Running the block${blockText}`;
-      if (isRunBlockBlockOutput(output))
-        return `Ran "${output.block_name}"`;
+      if (isRunBlockBlockOutput(output)) return `Ran "${output.block_name}"`;
       if (isRunBlockSetupRequirementsOutput(output)) {
         return `Setup needed for "${output.setup_info.agent_name}"`;
       }
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/SearchDocs/SearchDocs.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/SearchDocs/SearchDocs.tsx
index 2d8f4b1379..191323a7fe 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/SearchDocs/SearchDocs.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/tools/SearchDocs/SearchDocs.tsx
@@ -84,7 +84,11 @@ export function SearchDocsTool({ part }: Props) {
   return (
     <div className="py-2">
       <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <ToolIcon toolType={part.type} isStreaming={isStreaming} isError={isError} />
+        <ToolIcon
+          toolType={part.type}
+          isStreaming={isStreaming}
+          isError={isError}
+        />
         <MorphingTextAnimation
           text={text}
           className={isError ? "text-red-500" : undefined}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/useChatSession.ts b/autogpt_platform/frontend/src/app/(platform)/copilot-2/useChatSession.ts
new file mode 100644
index 0000000000..249efc4970
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/useChatSession.ts
@@ -0,0 +1,64 @@
+import {
+  getGetV2ListSessionsQueryKey,
+  useGetV2GetSession,
+  usePostV2CreateSession,
+} from "@/app/api/__generated__/endpoints/chat/chat";
+import { useQueryClient } from "@tanstack/react-query";
+import { parseAsString, useQueryState } from "nuqs";
+import { useMemo } from "react";
+import { convertChatSessionMessagesToUiMessages } from "./helpers/convertChatSessionToUiMessages";
+
+export function useChatSession() {
+  const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
+  const queryClient = useQueryClient();
+
+  const sessionQuery = useGetV2GetSession(sessionId ?? "", {
+    query: {
+      staleTime: Infinity,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  });
+
+  // Memoize so the effect in useCopilotPage doesn't infinite-loop on a new
+  // array reference every render. Re-derives only when query data changes.
+  const hydratedMessages = useMemo(() => {
+    if (sessionQuery.data?.status !== 200 || !sessionId) return undefined;
+    return convertChatSessionMessagesToUiMessages(
+      sessionId,
+      sessionQuery.data.data.messages ?? [],
+    );
+  }, [sessionQuery.data, sessionId]);
+
+  const { mutateAsync: createSessionMutation, isPending: isCreatingSession } =
+    usePostV2CreateSession({
+      mutation: {
+        onSuccess: (response) => {
+          if (response.status === 200 && response.data?.id) {
+            setSessionId(response.data.id);
+            queryClient.invalidateQueries({
+              queryKey: getGetV2ListSessionsQueryKey(),
+            });
+          }
+        },
+      },
+    });
+
+  async function createSession() {
+    if (sessionId) return sessionId;
+    const response = await createSessionMutation();
+    if (response.status !== 200 || !response.data?.id) {
+      throw new Error("Failed to create session");
+    }
+    return response.data.id;
+  }
+
+  return {
+    sessionId,
+    setSessionId,
+    hydratedMessages,
+    isLoadingSession: sessionQuery.isLoading,
+    createSession,
+    isCreatingSession,
+  };
+}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot-2/useCopilotPage.ts b/autogpt_platform/frontend/src/app/(platform)/copilot-2/useCopilotPage.ts
index 52aa89e228..01dd98ee9a 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot-2/useCopilotPage.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot-2/useCopilotPage.ts
@@ -1,31 +1,26 @@
-import {
-  getGetV2ListSessionsQueryKey,
-  getV2GetSession,
-  postV2CreateSession,
-  useGetV2ListSessions,
-} from "@/app/api/__generated__/endpoints/chat/chat";
+import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
 import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
 import { useChat } from "@ai-sdk/react";
-import { useQueryClient } from "@tanstack/react-query";
 import { DefaultChatTransport } from "ai";
-import { parseAsString, useQueryState } from "nuqs";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { convertChatSessionMessagesToUiMessages } from "./helpers/convertChatSessionToUiMessages";
+import { useCallback, useEffect, useState } from "react";
+import { useChatSession } from "./useChatSession";
 
 export function useCopilotPage() {
-  const [isCreatingSession, setIsCreatingSession] = useState(false);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
+  const [pendingMessage, setPendingMessage] = useState<string | null>(null);
+
+  const {
+    sessionId,
+    setSessionId,
+    hydratedMessages,
+    isLoadingSession,
+    createSession,
+    isCreatingSession,
+  } = useChatSession();
 
   const breakpoint = useBreakpoint();
   const isMobile =
     breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
-  const hydrationSeq = useRef(0);
-  const lastHydratedSessionIdRef = useRef<string | null>(null);
-  const createSessionPromiseRef = useRef<Promise<string> | null>(null);
-  const queuedFirstMessageRef = useRef<string | null>(null);
-  const queuedFirstMessageResolverRef = useRef<(() => void) | null>(null);
-  const queryClient = useQueryClient();
 
   const transport = sessionId
     ? new DefaultChatTransport({
@@ -50,101 +45,25 @@ export function useCopilotPage() {
     transport: transport ?? undefined,
   });
 
-  const messagesRef = useRef(messages);
-
   useEffect(() => {
-    messagesRef.current = messages;
-  }, [messages]);
-
-  async function createSession() {
-    if (sessionId) return sessionId;
-    if (createSessionPromiseRef.current) return createSessionPromiseRef.current;
-
-    setIsCreatingSession(true);
-    const promise = (async () => {
-      const response = await postV2CreateSession({
-        body: JSON.stringify({}),
-      });
-      if (response.status !== 200 || !response.data?.id) {
-        throw new Error("Failed to create chat session");
-      }
-      setSessionId(response.data.id);
-      queryClient.invalidateQueries({
-        queryKey: getGetV2ListSessionsQueryKey(),
-      });
-      return response.data.id;
-    })();
-
-    createSessionPromiseRef.current = promise;
-
-    try {
-      return await promise;
-    } finally {
-      createSessionPromiseRef.current = null;
-      setIsCreatingSession(false);
-    }
-  }
+    if (!hydratedMessages || hydratedMessages.length === 0) return;
+    setMessages((prev) => {
+      if (prev.length > hydratedMessages.length) return prev;
+      return hydratedMessages;
+    });
+  }, [hydratedMessages, setMessages]);
 
+  // Clear messages when session is null
   useEffect(() => {
-    hydrationSeq.current += 1;
-    const seq = hydrationSeq.current;
-    const controller = new AbortController();
-
-    if (!sessionId) {
-      setMessages([]);
-      lastHydratedSessionIdRef.current = null;
-      return;
-    }
-
-    const currentSessionId = sessionId;
-
-    if (lastHydratedSessionIdRef.current !== currentSessionId) {
-      setMessages([]);
-      lastHydratedSessionIdRef.current = currentSessionId;
-    }
-
-    async function hydrate() {
-      try {
-        const response = await getV2GetSession(currentSessionId, {
-          signal: controller.signal,
-        });
-        if (response.status !== 200) return;
-
-        const uiMessages = convertChatSessionMessagesToUiMessages(
-          currentSessionId,
-          response.data.messages ?? [],
-        );
-        if (controller.signal.aborted) return;
-        if (hydrationSeq.current !== seq) return;
-
-        const localMessagesCount = messagesRef.current.length;
-        const remoteMessagesCount = uiMessages.length;
-
-        if (remoteMessagesCount === 0) return;
-        if (localMessagesCount > remoteMessagesCount) return;
-
-        setMessages(uiMessages);
-      } catch (error) {
-        if ((error as { name?: string } | null)?.name === "AbortError") return;
-        console.warn("Failed to hydrate chat session:", error);
-      }
-    }
-
-    void hydrate();
-
-    return () => controller.abort();
+    if (!sessionId) setMessages([]);
   }, [sessionId, setMessages]);
 
   useEffect(() => {
-    if (!sessionId) return;
-    const firstMessage = queuedFirstMessageRef.current;
-    if (!firstMessage) return;
-
-    queuedFirstMessageRef.current = null;
-    sendMessage({ text: firstMessage });
-    queuedFirstMessageResolverRef.current?.();
-    queuedFirstMessageResolverRef.current = null;
-  }, [sendMessage, sessionId]);
+    if (!sessionId || !pendingMessage) return;
+    const msg = pendingMessage;
+    setPendingMessage(null);
+    sendMessage({ text: msg });
+  }, [sessionId, pendingMessage, sendMessage]);
 
   async function onSend(message: string) {
     const trimmed = message.trim();
@@ -155,23 +74,16 @@ export function useCopilotPage() {
       return;
     }
 
-    queuedFirstMessageRef.current = trimmed;
-    const sentPromise = new Promise<void>((resolve) => {
-      queuedFirstMessageResolverRef.current = resolve;
-    });
-
+    setPendingMessage(trimmed);
     await createSession();
-    await sentPromise;
   }
 
-  // Sessions list for mobile drawer
   const { data: sessionsResponse, isLoading: isLoadingSessions } =
     useGetV2ListSessions({ limit: 50 });
 
   const sessions =
     sessionsResponse?.status === 200 ? sessionsResponse.data.sessions : [];
 
-  // Drawer handlers
   const handleOpenDrawer = useCallback(() => {
     setIsDrawerOpen(true);
   }, []);
@@ -202,6 +114,7 @@ export function useCopilotPage() {
     messages,
     status,
     error,
+    isLoadingSession,
     isCreatingSession,
     createSession,
     onSend,
diff --git a/autogpt_platform/frontend/src/components/ai-elements/conversation.tsx b/autogpt_platform/frontend/src/components/ai-elements/conversation.tsx
index a32ebeea1a..92e940c715 100644
--- a/autogpt_platform/frontend/src/components/ai-elements/conversation.tsx
+++ b/autogpt_platform/frontend/src/components/ai-elements/conversation.tsx
@@ -12,7 +12,11 @@ export type ConversationProps = ComponentProps<typeof StickToBottom>;
 
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
-    className={cn("relative flex-1 overflow-y-hidden", scrollbarStyles, className)}
+    className={cn(
+      "relative flex-1 overflow-y-hidden",
+      scrollbarStyles,
+      className,
+    )}
     initial="smooth"
     resize="smooth"
     role="log"
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/useVoiceRecording.ts b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/useVoiceRecording.ts
index 2d605a4a4e..0f9ee51736 100644
--- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/useVoiceRecording.ts
+++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/useVoiceRecording.ts
@@ -38,9 +38,13 @@ export function useVoiceRecording({
   const streamRef = useRef<MediaStream | null>(null);
   const isRecordingRef = useRef(false);
 
-  const isSupported =
-    typeof window !== "undefined" &&
-    !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
+  const [isSupported, setIsSupported] = useState(false);
+
+  useEffect(() => {
+    setIsSupported(
+      !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),
+    );
+  }, []);
 
   const clearTimer = useCallback(() => {
     if (timerRef.current) {