From 19216dfa04a99ce74a510917aec46442265a797a Mon Sep 17 00:00:00 2001
From: Vincent Huang <vhuang@squareup.com>
Date: Tue, 26 Aug 2025 14:09:31 -0700
Subject: [PATCH 1/2] Added auto-scroll to most recently selected chat history

---
 .../components/sessions/SessionListView.tsx   | 30 ++++++++++++++++++-
 .../src/components/sessions/SessionsView.tsx  | 15 +++++++---
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/ui/desktop/src/components/sessions/SessionListView.tsx b/ui/desktop/src/components/sessions/SessionListView.tsx
index b86aae593427..46a1cec8ffc6 100644
--- a/ui/desktop/src/components/sessions/SessionListView.tsx
+++ b/ui/desktop/src/components/sessions/SessionListView.tsx
@@ -155,9 +155,10 @@ interface SearchContainerElement extends HTMLDivElement {
 interface SessionListViewProps {
   setView: (view: View, viewOptions?: ViewOptions) => void;
   onSelectSession: (sessionId: string) => void;
+  selectedSessionId?: string | null;
 }
 
-const SessionListView: React.FC<SessionListViewProps> = React.memo(({ onSelectSession }) => {
+const SessionListView: React.FC<SessionListViewProps> = React.memo(({ onSelectSession, selectedSessionId }) => {
   const [sessions, setSessions] = useState<Session[]>([]);
   const [filteredSessions, setFilteredSessions] = useState<Session[]>([]);
   const [dateGroups, setDateGroups] = useState<DateGroup[]>([]);
@@ -240,6 +241,32 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(({ onSelectSe
     });
   }, [memoizedDateGroups]);
 
+  // Scroll to the selected session when returning from session history view
+  useEffect(() => {
+    if (selectedSessionId && showContent && !isLoading) {
+      const observer = new MutationObserver(() => {
+        const sessionCard = containerRef.current?.querySelector(
+            `[session-item-id="${selectedSessionId}"]`
+        );
+
+        if (sessionCard) {
+          observer.disconnect();
+          sessionCard.scrollIntoView({
+            block:"center"
+          });
+        }
+      });
+
+      // Start observing
+      if (containerRef.current) {
+        observer.observe(containerRef.current, {
+          childList: true,
+          subtree: true
+        });
+      }
+    }
+  }, [selectedSessionId, showContent, isLoading]);
+
   // Debounced search effect - performs actual filtering
   useEffect(() => {
     if (!debouncedSearchTerm) {
@@ -350,6 +377,7 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(({ onSelectSe
       <Card
         onClick={handleCardClick}
         className="session-item h-full py-3 px-4 hover:shadow-default cursor-pointer transition-all duration-150 flex flex-col justify-between relative group"
+        session-item-id={session.id}
       >
         <button
           onClick={handleEditClick}
diff --git a/ui/desktop/src/components/sessions/SessionsView.tsx b/ui/desktop/src/components/sessions/SessionsView.tsx
index 8e6ba8a711e7..fe1414e654d8 100644
--- a/ui/desktop/src/components/sessions/SessionsView.tsx
+++ b/ui/desktop/src/components/sessions/SessionsView.tsx
@@ -12,6 +12,7 @@ interface SessionsViewProps {
 
 const SessionsView: React.FC<SessionsViewProps> = ({ setView }) => {
   const [selectedSession, setSelectedSession] = useState<SessionDetails | null>(null);
+  const [showSessionHistory, setShowSessionHistory] = useState(false);
   const [isLoadingSession, setIsLoadingSession] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [initialSessionId, setInitialSessionId] = useState<string | null>(null);
@@ -20,6 +21,7 @@ const SessionsView: React.FC<SessionsViewProps> = ({ setView }) => {
   const loadSessionDetails = async (sessionId: string) => {
     setIsLoadingSession(true);
     setError(null);
+    setShowSessionHistory(true);
     try {
       const sessionDetails = await fetchSessionDetails(sessionId);
       setSelectedSession(sessionDetails);
@@ -28,6 +30,7 @@ const SessionsView: React.FC<SessionsViewProps> = ({ setView }) => {
       setError('Failed to load session details. Please try again later.');
       // Keep the selected session null if there's an error
       setSelectedSession(null);
+      setShowSessionHistory(false);
 
       const errorMessage = err instanceof Error ? err.message : String(err);
       toastError({
@@ -59,7 +62,7 @@ const SessionsView: React.FC<SessionsViewProps> = ({ setView }) => {
   }, [location.state, handleSelectSession]);
 
   const handleBackToSessions = () => {
-    setSelectedSession(null);
+    setShowSessionHistory(false);
     setError(null);
   };
 
@@ -69,9 +72,9 @@ const SessionsView: React.FC<SessionsViewProps> = ({ setView }) => {
     }
   };
 
-  // If we're loading an initial session or have a selected session, show the session history view
+  // If we're loading an initial session or have a selected showSessionHistory, show the session history view
   // Otherwise, show the sessions list view
-  return selectedSession || (isLoadingSession && initialSessionId) ? (
+  return (showSessionHistory && selectedSession) || (isLoadingSession && initialSessionId) ? (
     <SessionHistoryView
       session={
         selectedSession || {
@@ -91,7 +94,11 @@ const SessionsView: React.FC<SessionsViewProps> = ({ setView }) => {
       onRetry={handleRetryLoadSession}
     />
   ) : (
-    <SessionListView setView={setView} onSelectSession={handleSelectSession} />
+    <SessionListView
+      setView={setView}
+      onSelectSession={handleSelectSession}
+      selectedSessionId={selectedSession?.session_id ?? null}
+    />
   );
 };
 

From c1eeb6ca21edf61e6771382031500eacdc59d9b8 Mon Sep 17 00:00:00 2001
From: Vincent Huang <vhuang@squareup.com>
Date: Wed, 27 Aug 2025 10:49:47 -0700
Subject: [PATCH 2/2] Removed mutation observer approach in favor of element
 ref

---
 .../components/sessions/SessionListView.tsx   | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/ui/desktop/src/components/sessions/SessionListView.tsx b/ui/desktop/src/components/sessions/SessionListView.tsx
index 46a1cec8ffc6..d3c2ef1b25e5 100644
--- a/ui/desktop/src/components/sessions/SessionListView.tsx
+++ b/ui/desktop/src/components/sessions/SessionListView.tsx
@@ -183,6 +183,16 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(({ onSelectSe
 
   const containerRef = useRef<HTMLDivElement>(null);
 
+  // Track session to element ref
+  const sessionRefs = useRef<Record<string, HTMLElement>>({});
+  const setSessionRefs = (itemId: string, element: HTMLDivElement | null) => {
+    if (element) {
+      sessionRefs.current[itemId] = element;
+    } else {
+      delete sessionRefs.current[itemId];
+    }
+  };
+
   const loadSessions = useCallback(async () => {
     setIsLoading(true);
     setShowSkeleton(true);
@@ -243,29 +253,15 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(({ onSelectSe
 
   // Scroll to the selected session when returning from session history view
   useEffect(() => {
-    if (selectedSessionId && showContent && !isLoading) {
-      const observer = new MutationObserver(() => {
-        const sessionCard = containerRef.current?.querySelector(
-            `[session-item-id="${selectedSessionId}"]`
-        );
-
-        if (sessionCard) {
-          observer.disconnect();
-          sessionCard.scrollIntoView({
-            block:"center"
-          });
-        }
-      });
-
-      // Start observing
-      if (containerRef.current) {
-        observer.observe(containerRef.current, {
-          childList: true,
-          subtree: true
+    if (selectedSessionId) {
+      const element = sessionRefs.current[selectedSessionId];
+      if (element) {
+        element.scrollIntoView({
+          block: "center"
         });
       }
     }
-  }, [selectedSessionId, showContent, isLoading]);
+  }, [selectedSessionId, sessions]);
 
   // Debounced search effect - performs actual filtering
   useEffect(() => {
@@ -377,7 +373,7 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(({ onSelectSe
       <Card
         onClick={handleCardClick}
         className="session-item h-full py-3 px-4 hover:shadow-default cursor-pointer transition-all duration-150 flex flex-col justify-between relative group"
-        session-item-id={session.id}
+        ref={(el) => setSessionRefs(session.id, el)}
       >
         <button
           onClick={handleEditClick}