From fa3cccc3f9ec880d0054f1f4f14f0fe7880185d3 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@t3.gg>
Date: Fri, 13 Feb 2026 18:46:10 -0800
Subject: [PATCH] fix message scrolling and update todo

---
 TODO.md                              |  4 ++--
 apps/web/src/components/ChatView.tsx | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/TODO.md b/TODO.md
index 1d33686b467ac80c904e97059e1caf711ecd99fa..3573b48ec9b854d052d9782567e6af9465099f67 100644
--- a/TODO.md
+++ b/TODO.md
@@ -12,5 +12,5 @@
 - [x] Reduce noise of tool calls (combine "command run" and "command completed", make tool calls a "box" with limited # of calls shown at a time, etc)
 - [ ] Insta focus input on new thread creation
 - [ ] Disable "streaming" (wait until whole paragraph/step finishes before showing it
-- [ ] Making new thread should auto-focus input box
-- [ ] Threads should be scrolled to bottom on open (they currently start near top and "scroll down" after rendering, it's jank)
+- [x] Making new thread should auto-focus input box
+- [x] Threads should be scrolled to bottom on open (they currently start near top and "scroll down" after rendering, it's jank)
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 727ce8fb044b7ef2c5ff9a12dd68b0f3ebb758a4..ba027e16905883504b667850e5ecf429faffb078 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -13,6 +13,7 @@ import {
   type KeyboardEvent,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -131,6 +132,7 @@ export default function ChatView() {
   const [expandedWorkGroups, setExpandedWorkGroups] = useState<Record<string, boolean>>({});
   const [nowTick, setNowTick] = useState(() => Date.now());
   const [terminalFocusRequestId, setTerminalFocusRequestId] = useState(0);
+  const messagesScrollRef = useRef<HTMLDivElement>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
@@ -345,6 +347,12 @@ export default function ChatView() {
   // Auto-scroll on new messages
   const messageCount = activeThread?.messages.length ?? 0;
   const workLogCount = workLogEntries.length;
+  useLayoutEffect(() => {
+    if (!activeThread?.id) return;
+    const scrollContainer = messagesScrollRef.current;
+    if (!scrollContainer) return;
+    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+  }, [activeThread?.id]);
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messageCount]);
@@ -1014,7 +1022,7 @@ export default function ChatView() {
       )}
 
       {/* Messages */}
-      <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+      <div ref={messagesScrollRef} className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
         {activeThread.messages.length === 0 && !isWorking ? (
           <div className="flex h-full items-center justify-center">
             <p className="text-sm text-muted-foreground/30">
-- 
2.54.0