diff --git a/apps/open-swe/package.json b/apps/open-swe/package.json
index 2ddfb041..f5436a50 100644
--- a/apps/open-swe/package.json
+++ b/apps/open-swe/package.json
@@ -27,7 +27,7 @@
     "@langchain/core": "^0.3.56",
     "@langchain/google-genai": "^0.2.9",
     "@langchain/langgraph": "^0.3.3",
-    "@langchain/langgraph-sdk": "^0.0.84",
+    "@langchain/langgraph-sdk": "^0.0.85",
     "@langchain/openai": "^0.5.10",
     "@octokit/rest": "^22.0.0",
     "@open-swe/shared": "*",
diff --git a/apps/web/package.json b/apps/web/package.json
index e54a74d3..add86a4a 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -21,7 +21,7 @@
   "dependencies": {
     "@langchain/core": "^0.3.57",
     "@langchain/langgraph": "^0.3.3",
-    "@langchain/langgraph-sdk": "^0.0.83",
+    "@langchain/langgraph-sdk": "^0.0.85",
     "@open-swe/shared": "*",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-avatar": "^1.1.3",
diff --git a/apps/web/src/components/gen-ui/initialize-step.tsx b/apps/web/src/components/gen-ui/initialize-step.tsx
index 1dec7355..f08361fb 100644
--- a/apps/web/src/components/gen-ui/initialize-step.tsx
+++ b/apps/web/src/components/gen-ui/initialize-step.tsx
@@ -41,9 +41,15 @@ export function InitializeStep({
 
   const stepStatusIcon = {
     waiting: (
-      <div className={cn("h-3.5 w-3.5 rounded-full border border-gray-300")} />
+      <div
+        className={cn(
+          "h-3.5 w-3.5 rounded-full border border-gray-300 dark:border-gray-600",
+        )}
+      />
+    ),
+    generating: (
+      <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-500 dark:text-gray-400" />
     ),
-    generating: <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-500" />,
     success: <CheckCircle className="h-3.5 w-3.5 text-green-500" />,
     error: <XCircle className="h-3.5 w-3.5 text-red-500" />,
   };
@@ -53,11 +59,15 @@ export function InitializeStep({
       case "loading":
         return (
           <div
-            className={cn("h-3.5 w-3.5 rounded-full border border-gray-300")}
+            className={cn(
+              "h-3.5 w-3.5 rounded-full border border-gray-300 dark:border-gray-600",
+            )}
           />
         );
       case "generating":
-        return <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-500" />;
+        return (
+          <Loader2 className="h-3.5 w-3.5 animate-spin text-gray-500 dark:text-gray-400" />
+        );
       case "done":
         return success ? (
           <CheckCircle className="h-3.5 w-3.5 text-green-500" />
@@ -79,11 +89,11 @@ export function InitializeStep({
   };
 
   return (
-    <div className="overflow-hidden rounded-md border border-gray-200">
+    <div className="overflow-hidden rounded-md border border-gray-200 dark:border-gray-700">
       {/* Collapse/Expand Icon */}
-      <div className="relative flex items-center border-b border-gray-200 bg-gray-50 p-2">
-        <GitBranch className="mr-2 h-3.5 w-3.5 text-gray-500" />
-        <span className="flex-1 text-xs font-normal text-gray-800">
+      <div className="relative flex items-center border-b border-gray-200 bg-gray-50 p-2 dark:border-gray-700 dark:bg-gray-800">
+        <GitBranch className="mr-2 h-3.5 w-3.5 text-gray-500 dark:text-gray-400" />
+        <span className="flex-1 text-xs font-normal text-gray-800 dark:text-gray-200">
           {getStatusText()}
         </span>
         {getStatusIcon()}
@@ -118,7 +128,7 @@ export function InitializeStep({
                     ] ?? (
                       <div
                         className={cn(
-                          "h-3.5 w-3.5 rounded-full border border-gray-300",
+                          "h-3.5 w-3.5 rounded-full border border-gray-300 dark:border-gray-600",
                         )}
                       />
                     )}
@@ -128,7 +138,7 @@ export function InitializeStep({
                       "font-normal",
                       step.status === "error"
                         ? "text-red-500"
-                        : "text-gray-800",
+                        : "text-gray-800 dark:text-gray-200",
                     )}
                   >
                     {step.name}
diff --git a/apps/web/src/components/github/repo-branch-selectors/index.tsx b/apps/web/src/components/github/repo-branch-selectors/index.tsx
index e4653cf9..3177247c 100644
--- a/apps/web/src/components/github/repo-branch-selectors/index.tsx
+++ b/apps/web/src/components/github/repo-branch-selectors/index.tsx
@@ -6,9 +6,9 @@ export function RepositoryBranchSelectors() {
   const [threadId] = useQueryState("threadId");
   const chatStarted = !!threadId;
   const defaultButtonStyles =
-    "bg-inherit border-none text-gray-500 hover:text-gray-300 text-xs p-0 h-fit hover:bg-inherit";
+    "bg-inherit border-none text-gray-500 hover:text-black dark:hover:text-gray-300 text-xs p-0 h-fit hover:bg-inherit";
   const defaultStylesChatStarted =
-    "hover:bg-inherit cursor-default hover:cursor-default hover:text-gray-300 hover:border-gray-300 hover:ring-inherit";
+    "hover:bg-inherit cursor-default hover:cursor-default hover:text-black dark:hover:text-gray-300 hover:border-gray-300 hover:ring-inherit";
 
   return (
     <div className="flex items-center gap-2">
diff --git a/apps/web/src/components/v2/terminal-input.tsx b/apps/web/src/components/v2/terminal-input.tsx
index 77d7c144..1d8e3fa7 100644
--- a/apps/web/src/components/v2/terminal-input.tsx
+++ b/apps/web/src/components/v2/terminal-input.tsx
@@ -155,13 +155,13 @@ export function TerminalInput({
         <Button
           onClick={handleSend}
           disabled={disabled || !message.trim() || !selectedRepository}
-          size="sm"
-          className="bg-muted-foreground/20 hover:bg-muted-foreground/30 h-7 w-7 self-end p-0 dark:bg-gray-700 hover:dark:bg-gray-600"
+          size="icon"
+          variant="brand"
         >
           {loading ? (
-            <Loader2 className="size-3 animate-spin" />
+            <Loader2 className="size-4 animate-spin" />
           ) : (
-            <Send className="size-3" />
+            <Send className="size-4" />
           )}
         </Button>
       </div>
diff --git a/apps/web/src/components/v2/thread-view.tsx b/apps/web/src/components/v2/thread-view.tsx
index 4cc8f573..d2516c5c 100644
--- a/apps/web/src/components/v2/thread-view.tsx
+++ b/apps/web/src/components/v2/thread-view.tsx
@@ -1,14 +1,15 @@
 "use client";
-
 import { v4 as uuidv4 } from "uuid";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
 import {
   ArrowLeft,
   GitBranch,
   Send,
+  Terminal,
+  Clock,
   User,
   Bot,
   Copy,
@@ -23,10 +24,16 @@ import { ThreadDisplayInfo } from "./types";
 import { useStream } from "@langchain/langgraph-sdk/react";
 import { ManagerGraphState } from "@open-swe/shared/open-swe/manager/types";
 import { PlannerGraphState } from "@open-swe/shared/open-swe/planner/types";
+import { GraphState } from "@open-swe/shared/open-swe/types";
 import { ActionsRenderer } from "./actions-renderer";
 import { ThemeToggle } from "../theme-toggle";
 import { HumanMessage } from "@langchain/core/messages";
 import { DO_NOT_RENDER_ID_PREFIX } from "@open-swe/shared/constants";
+import { StickToBottom } from "use-stick-to-bottom";
+import {
+  StickyToBottomContent,
+  ScrollToBottom,
+} from "../../utils/scroll-utils";
 
 const PROGRAMMER_ASSISTANT_ID = process.env.NEXT_PUBLIC_PROGRAMMER_ASSISTANT_ID;
 const PLANNER_ASSISTANT_ID = process.env.NEXT_PUBLIC_PLANNER_ASSISTANT_ID;
@@ -100,9 +107,23 @@ export function ThreadView({
   const [programmerSession, setProgrammerSession] =
     useState<ManagerGraphState["programmerSession"]>();
 
-  if (!stream.messages?.length) {
-    return null;
-  }
+  const prevMessageLength = useRef(0);
+  useEffect(() => {
+    if (
+      stream.messages &&
+      stream.messages.length !== prevMessageLength.current
+    ) {
+      prevMessageLength.current = stream.messages.length;
+    }
+  }, [stream.messages]);
+
+  useEffect(() => {
+    // Auto-scroll to bottom when tab switches (requirement fulfilled)
+    // StickToBottom handles the actual scrolling via scrollToBottom()
+  }, [selectedTab]);
+
+  // Don't early return for empty messages - show loading/empty state instead
+  // This prevents blank pages when navigating to existing threads
 
   const handleSendMessage = () => {
     if (chatInput.trim()) {
@@ -179,40 +200,58 @@ export function ThreadView({
         {/* Left Side - Chat Interface */}
         <div className="border-border bg-muted/30 flex h-full w-1/3 flex-col border-r dark:bg-gray-950">
           {/* Chat Messages */}
-          <div className="flex-1 space-y-4 overflow-y-auto p-4">
-            {filteredMessages.map((message) => (
-              <div
-                key={message.id}
-                className="group flex gap-3"
-              >
-                <div className="flex-shrink-0">
-                  {message.type === "human" ? (
-                    <div className="bg-muted flex h-6 w-6 items-center justify-center rounded-full dark:bg-gray-700">
-                      <User className="text-muted-foreground h-3 w-3" />
-                    </div>
-                  ) : (
-                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
-                      <Bot className="h-3 w-3 text-blue-700 dark:text-blue-400" />
-                    </div>
-                  )}
-                </div>
-                <div className="relative flex-1 space-y-1">
-                  <div className="flex items-center gap-2">
-                    <span className="text-muted-foreground text-xs font-medium">
-                      {message.type === "human" ? "You" : "Agent"}
-                    </span>
+          <div className="relative flex-1">
+            <StickToBottom
+              className="absolute inset-0"
+              initial={false}
+            >
+              <StickyToBottomContent
+                className="h-full overflow-y-auto"
+                contentClassName="space-y-4 p-4"
+                content={
+                  <>
+                    {filteredMessages.map((message) => (
+                      <div
+                        key={message.id}
+                        className="group flex gap-3"
+                      >
+                        <div className="flex-shrink-0">
+                          {message.type === "human" ? (
+                            <div className="bg-muted flex h-6 w-6 items-center justify-center rounded-full dark:bg-gray-700">
+                              <User className="text-muted-foreground h-3 w-3" />
+                            </div>
+                          ) : (
+                            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+                              <Bot className="h-3 w-3 text-blue-700 dark:text-blue-400" />
+                            </div>
+                          )}
+                        </div>
+                        <div className="relative flex-1 space-y-1">
+                          <div className="flex items-center gap-2">
+                            <span className="text-muted-foreground text-xs font-medium">
+                              {message.type === "human" ? "You" : "Agent"}
+                            </span>
+                          </div>
+                          <div className="text-foreground text-sm leading-relaxed">
+                            {getMessageContentString(message.content)}
+                          </div>
+                          <div className="absolute right-0 -bottom-5 opacity-0 transition-opacity group-hover:opacity-100">
+                            <MessageCopyButton
+                              content={getMessageContentString(message.content)}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </>
+                }
+                footer={
+                  <div className="absolute right-0 left-0 bottom-4 flex justify-center w-full">
+                    <ScrollToBottom className="animate-in fade-in-0 zoom-in-95" />
                   </div>
-                  <div className="text-foreground text-sm leading-relaxed">
-                    {getMessageContentString(message.content)}
-                  </div>
-                  <div className="absolute right-0 -bottom-5 opacity-0 transition-opacity group-hover:opacity-100">
-                    <MessageCopyButton
-                      content={getMessageContentString(message.content)}
-                    />
-                  </div>
-                </div>
-              </div>
-            ))}
+                }
+              />
+            </StickToBottom>
           </div>
 
           {/* Chat Input - Fixed at bottom */}
@@ -233,10 +272,10 @@ export function ThreadView({
               <Button
                 onClick={handleSendMessage}
                 disabled={!chatInput.trim()}
-                size="sm"
-                className="bg-muted hover:bg-muted/80 h-10 w-10 self-end p-0 dark:bg-gray-700 hover:dark:bg-gray-600"
+                size="icon"
+                variant="brand"
               >
-                <Send className="h-4 w-4" />
+                <Send className="size-4" />
               </Button>
             </div>
             <div className="text-muted-foreground mt-2 text-xs">
@@ -247,56 +286,87 @@ export function ThreadView({
 
         {/* Right Side - Actions & Plan */}
         <div className="flex h-full flex-1 flex-col">
-          <div className="flex-1 space-y-4 overflow-y-auto p-4">
-            <Tabs
-              defaultValue="planner"
-              className="w-full"
-              value={selectedTab}
-              onValueChange={(value) =>
-                setSelectedTab(value as "planner" | "programmer")
-              }
+          <div className="relative flex-1">
+            <StickToBottom
+              className="absolute inset-0"
+              initial={true}
             >
-              <TabsList className="bg-muted/70 dark:bg-gray-800">
-                <TabsTrigger value="planner">Planner</TabsTrigger>
-                <TabsTrigger value="programmer">Programmer</TabsTrigger>
-              </TabsList>
-              <TabsContent value="planner">
-                <Card className="border-border bg-card px-0 py-4 dark:bg-gray-950">
-                  <CardContent className="space-y-2 p-3 pt-0">
-                    {plannerThreadId &&
-                      plannerRunId &&
-                      PLANNER_ASSISTANT_ID && (
-                        <ActionsRenderer<PlannerGraphState>
-                          graphId={PLANNER_ASSISTANT_ID}
-                          threadId={plannerThreadId}
-                          runId={plannerRunId}
-                          setProgrammerSession={setProgrammerSession}
-                          programmerSession={programmerSession}
-                          setSelectedTab={setSelectedTab}
-                        />
-                      )}
-                  </CardContent>
-                </Card>
-              </TabsContent>
-              <TabsContent value="programmer">
-                <Card className="border-border bg-card px-0 py-4 dark:bg-gray-950">
-                  <CardContent className="space-y-2 p-3 pt-0">
-                    {programmerSession && PROGRAMMER_ASSISTANT_ID && (
-                      <ActionsRenderer<PlannerGraphState>
-                        graphId={PROGRAMMER_ASSISTANT_ID}
-                        threadId={programmerSession.threadId}
-                        runId={programmerSession.runId}
-                      />
-                    )}
-                    {!programmerSession && (
-                      <div className="text-muted-foreground text-xs">
-                        No programmer session
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-              </TabsContent>
-            </Tabs>
+              <StickyToBottomContent
+                className="h-full overflow-y-auto"
+                contentClassName="space-y-4 p-4"
+                content={
+                  <Tabs
+                    defaultValue="planner"
+                    className="w-full"
+                    value={selectedTab}
+                    onValueChange={(value) =>
+                      setSelectedTab(value as "planner" | "programmer")
+                    }
+                  >
+                    <TabsList className="bg-muted/70 dark:bg-gray-800">
+                      <TabsTrigger value="planner">Planner</TabsTrigger>
+                      <TabsTrigger value="programmer">Programmer</TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="planner">
+                      <Card className="border-border bg-card px-0 py-4 dark:bg-gray-950">
+                        <CardContent className="space-y-2 p-3 pt-0">
+                          {plannerThreadId &&
+                            plannerRunId &&
+                            PLANNER_ASSISTANT_ID && (
+                              <ActionsRenderer<PlannerGraphState>
+                                graphId={PLANNER_ASSISTANT_ID}
+                                threadId={plannerThreadId}
+                                runId={plannerRunId}
+                                setProgrammerSession={setProgrammerSession}
+                                programmerSession={programmerSession}
+                                setSelectedTab={setSelectedTab}
+                              />
+                            )}
+                          {!(
+                            plannerThreadId &&
+                            plannerRunId &&
+                            PLANNER_ASSISTANT_ID
+                          ) && (
+                            <div className="flex items-center justify-center gap-2 py-8">
+                              <Clock className="text-muted-foreground size-4" />
+                              <span className="text-muted-foreground text-sm">
+                                No planner session
+                              </span>
+                            </div>
+                          )}
+                        </CardContent>
+                      </Card>
+                    </TabsContent>
+                    <TabsContent value="programmer">
+                      <Card className="border-border bg-card px-0 py-4 dark:bg-gray-950">
+                        <CardContent className="space-y-2 p-3 pt-0">
+                          {programmerSession && PROGRAMMER_ASSISTANT_ID && (
+                            <ActionsRenderer<GraphState>
+                              graphId={PROGRAMMER_ASSISTANT_ID}
+                              threadId={programmerSession.threadId}
+                              runId={programmerSession.runId}
+                            />
+                          )}
+                          {!programmerSession && (
+                            <div className="flex items-center justify-center gap-2 py-8">
+                              <Terminal className="text-muted-foreground size-4" />
+                              <span className="text-muted-foreground text-sm">
+                                No programmer session
+                              </span>
+                            </div>
+                          )}
+                        </CardContent>
+                      </Card>
+                    </TabsContent>
+                  </Tabs>
+                }
+                footer={
+                  <div className="absolute right-0 left-0 bottom-4 flex justify-center w-full">
+                    <ScrollToBottom className="animate-in fade-in-0 zoom-in-95" />
+                  </div>
+                }
+              />
+            </StickToBottom>
           </div>
         </div>
       </div>
diff --git a/apps/web/src/utils/scroll-utils.tsx b/apps/web/src/utils/scroll-utils.tsx
new file mode 100644
index 00000000..91ccce4a
--- /dev/null
+++ b/apps/web/src/utils/scroll-utils.tsx
@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+import { ArrowDown } from "lucide-react";
+import { useStickToBottomContext } from "use-stick-to-bottom";
+
+export function StickyToBottomContent(props: {
+  content: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+}) {
+  const context = useStickToBottomContext();
+  return (
+    <div
+      ref={context.scrollRef}
+      style={{ width: "100%", height: "100%" }}
+      className={props.className}
+    >
+      <div
+        ref={context.contentRef}
+        className={props.contentClassName}
+      >
+        {props.content}
+      </div>
+      {props.footer}
+    </div>
+  );
+}
+
+export function ScrollToBottom(props: { className?: string }) {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  if (isAtBottom) return null;
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className={props.className}
+      onClick={() => scrollToBottom()}
+    >
+      <ArrowDown className="h-4 w-4" />
+      <span>Scroll to bottom</span>
+    </Button>
+  );
+}
diff --git a/package.json b/package.json
index b9edb4c3..7ade16b3 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "typescript": "^5"
   },
   "resolutions": {
-    "@langchain/langgraph-sdk": "^0.0.83",
+    "@langchain/langgraph-sdk": "^0.0.85",
     "@langchain/core": "^0.3.58"
   },
   "packageManager": "yarn@3.5.1"
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 1f16e400..7df1e825 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -19,7 +19,7 @@
   "dependencies": {
     "@langchain/core": "^0.3.56",
     "@langchain/langgraph": "^0.3.3",
-    "@langchain/langgraph-sdk": "^0.0.83",
+    "@langchain/langgraph-sdk": "^0.0.85",
     "@octokit/rest": "^22.0.0",
     "zod": "^3.25.32"
   },
diff --git a/yarn.lock b/yarn.lock
index ab991d5c..ccefd315 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1803,9 +1803,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@langchain/langgraph-sdk@npm:^0.0.83":
-  version: 0.0.83
-  resolution: "@langchain/langgraph-sdk@npm:0.0.83"
+"@langchain/langgraph-sdk@npm:^0.0.85":
+  version: 0.0.85
+  resolution: "@langchain/langgraph-sdk@npm:0.0.85"
   dependencies:
     "@types/json-schema": ^7.0.15
     p-queue: ^6.6.2
@@ -1819,7 +1819,7 @@ __metadata:
       optional: true
     react:
       optional: true
-  checksum: c6d037b8b9486456a8180d892e8b05ad3c2332456d7d237597720ebe42dd6b126f1aed963a0d2a681405724b7b8e0eac0607994b8e527d2f0e756e4c9e30c19e
+  checksum: f6d206c718cf4cb5d69dd677f2afa38325fdd69b485310a6beb61f06f24b2b4a8c0446eacbe7911c02cedc8bd4b719e22894c6f9b93572e6665c6a609cc9f511
   languageName: node
   linkType: hard
 
@@ -2264,7 +2264,7 @@ __metadata:
     "@langchain/google-genai": ^0.2.9
     "@langchain/langgraph": ^0.3.3
     "@langchain/langgraph-cli": latest
-    "@langchain/langgraph-sdk": ^0.0.84
+    "@langchain/langgraph-sdk": ^0.0.85
     "@langchain/openai": ^0.5.10
     "@octokit/rest": ^22.0.0
     "@open-swe/shared": "*"
@@ -2299,7 +2299,7 @@ __metadata:
     "@eslint/js": ^9.19.0
     "@langchain/core": ^0.3.56
     "@langchain/langgraph": ^0.3.3
-    "@langchain/langgraph-sdk": ^0.0.83
+    "@langchain/langgraph-sdk": ^0.0.85
     "@octokit/rest": ^22.0.0
     "@octokit/types": ^12.0.0
     "@tsconfig/recommended": ^1.0.8
@@ -2324,7 +2324,7 @@ __metadata:
     "@eslint/js": ^9.19.0
     "@langchain/core": ^0.3.57
     "@langchain/langgraph": ^0.3.3
-    "@langchain/langgraph-sdk": ^0.0.83
+    "@langchain/langgraph-sdk": ^0.0.85
     "@open-swe/shared": "*"
     "@radix-ui/react-alert-dialog": ^1.1.14
     "@radix-ui/react-avatar": ^1.1.3