diff --git a/ui/desktop/src/components/sessions/SessionHistoryView.tsx b/ui/desktop/src/components/sessions/SessionHistoryView.tsx
index 73b9f83693b1..82cd8fe25d7e 100644
--- a/ui/desktop/src/components/sessions/SessionHistoryView.tsx
+++ b/ui/desktop/src/components/sessions/SessionHistoryView.tsx
@@ -186,7 +186,7 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
         session.metadata.working_dir,
         session.messages,
         session.metadata.description || 'Shared Session',
-        session.metadata.total_tokens
+        session.metadata.total_tokens || 0
       );
 
       const shareableLink = `goose://sessions/${shareToken}`;
@@ -288,7 +288,7 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
                     {session.metadata.total_tokens !== null && (
                       <span className="flex items-center">
                         <Target className="w-4 h-4 mr-1" />
-                        {session.metadata.total_tokens.toLocaleString()}
+                        {(session.metadata.total_tokens || 0).toLocaleString()}
                       </span>
                     )}
                   </div>
diff --git a/ui/desktop/src/components/sessions/SessionListView.tsx b/ui/desktop/src/components/sessions/SessionListView.tsx
index d3c2ef1b25e5..a108903d9549 100644
--- a/ui/desktop/src/components/sessions/SessionListView.tsx
+++ b/ui/desktop/src/components/sessions/SessionListView.tsx
@@ -158,449 +158,457 @@ interface SessionListViewProps {
   selectedSessionId?: string | null;
 }
 
-const SessionListView: React.FC<SessionListViewProps> = React.memo(({ onSelectSession, selectedSessionId }) => {
-  const [sessions, setSessions] = useState<Session[]>([]);
-  const [filteredSessions, setFilteredSessions] = useState<Session[]>([]);
-  const [dateGroups, setDateGroups] = useState<DateGroup[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [showSkeleton, setShowSkeleton] = useState(true);
-  const [showContent, setShowContent] = useState(false);
-  const [isInitialLoad, setIsInitialLoad] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [searchResults, setSearchResults] = useState<{
-    count: number;
-    currentIndex: number;
-  } | null>(null);
-
-  // Edit modal state
-  const [showEditModal, setShowEditModal] = useState(false);
-  const [editingSession, setEditingSession] = useState<Session | null>(null);
-
-  // Search state for debouncing
-  const [searchTerm, setSearchTerm] = useState('');
-  const [caseSensitive, setCaseSensitive] = useState(false);
-  const debouncedSearchTerm = useDebounce(searchTerm, 300); // 300ms debounce
-
-  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);
-    setShowContent(false);
-    setError(null);
-    try {
-      const sessions = await fetchSessions();
-      // Use startTransition to make state updates non-blocking
-      startTransition(() => {
-        setSessions(sessions);
-        setFilteredSessions(sessions);
-      });
-    } catch (err) {
-      console.error('Failed to load sessions:', err);
-      setError('Failed to load sessions. Please try again later.');
-      setSessions([]);
-      setFilteredSessions([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
+const SessionListView: React.FC<SessionListViewProps> = React.memo(
+  ({ onSelectSession, selectedSessionId }) => {
+    const [sessions, setSessions] = useState<Session[]>([]);
+    const [filteredSessions, setFilteredSessions] = useState<Session[]>([]);
+    const [dateGroups, setDateGroups] = useState<DateGroup[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [showSkeleton, setShowSkeleton] = useState(true);
+    const [showContent, setShowContent] = useState(false);
+    const [isInitialLoad, setIsInitialLoad] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [searchResults, setSearchResults] = useState<{
+      count: number;
+      currentIndex: number;
+    } | null>(null);
+
+    // Edit modal state
+    const [showEditModal, setShowEditModal] = useState(false);
+    const [editingSession, setEditingSession] = useState<Session | null>(null);
+
+    // Search state for debouncing
+    const [searchTerm, setSearchTerm] = useState('');
+    const [caseSensitive, setCaseSensitive] = useState(false);
+    const debouncedSearchTerm = useDebounce(searchTerm, 300); // 300ms debounce
+
+    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];
+      }
+    };
 
-  useEffect(() => {
-    loadSessions();
-  }, [loadSessions]);
+    const loadSessions = useCallback(async () => {
+      setIsLoading(true);
+      setShowSkeleton(true);
+      setShowContent(false);
+      setError(null);
+      try {
+        const sessions = await fetchSessions();
+        // Use startTransition to make state updates non-blocking
+        startTransition(() => {
+          setSessions(sessions);
+          setFilteredSessions(sessions);
+        });
+      } catch (err) {
+        console.error('Failed to load sessions:', err);
+        setError('Failed to load sessions. Please try again later.');
+        setSessions([]);
+        setFilteredSessions([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }, []);
 
-  // Timing logic to prevent flicker between skeleton and content on initial load
-  useEffect(() => {
-    if (!isLoading && showSkeleton) {
-      setShowSkeleton(false);
-      // Use startTransition for non-blocking content show
-      startTransition(() => {
-        setTimeout(() => {
-          setShowContent(true);
-          if (isInitialLoad) {
-            setIsInitialLoad(false);
-          }
-        }, 10);
-      });
-    }
-    return () => void 0;
-  }, [isLoading, showSkeleton, isInitialLoad]);
-
-  // Memoize date groups calculation to prevent unnecessary recalculations
-  const memoizedDateGroups = useMemo(() => {
-    if (filteredSessions.length > 0) {
-      return groupSessionsByDate(filteredSessions);
-    }
-    return [];
-  }, [filteredSessions]);
-
-  // Update date groups when filtered sessions change
-  useEffect(() => {
-    startTransition(() => {
-      setDateGroups(memoizedDateGroups);
-    });
-  }, [memoizedDateGroups]);
+    useEffect(() => {
+      loadSessions();
+    }, [loadSessions]);
 
-  // Scroll to the selected session when returning from session history view
-  useEffect(() => {
-    if (selectedSessionId) {
-      const element = sessionRefs.current[selectedSessionId];
-      if (element) {
-        element.scrollIntoView({
-          block: "center"
+    // Timing logic to prevent flicker between skeleton and content on initial load
+    useEffect(() => {
+      if (!isLoading && showSkeleton) {
+        setShowSkeleton(false);
+        // Use startTransition for non-blocking content show
+        startTransition(() => {
+          setTimeout(() => {
+            setShowContent(true);
+            if (isInitialLoad) {
+              setIsInitialLoad(false);
+            }
+          }, 10);
         });
       }
-    }
-  }, [selectedSessionId, sessions]);
+      return () => void 0;
+    }, [isLoading, showSkeleton, isInitialLoad]);
 
-  // Debounced search effect - performs actual filtering
-  useEffect(() => {
-    if (!debouncedSearchTerm) {
+    // Memoize date groups calculation to prevent unnecessary recalculations
+    const memoizedDateGroups = useMemo(() => {
+      if (filteredSessions.length > 0) {
+        return groupSessionsByDate(filteredSessions);
+      }
+      return [];
+    }, [filteredSessions]);
+
+    // Update date groups when filtered sessions change
+    useEffect(() => {
       startTransition(() => {
-        setFilteredSessions(sessions);
-        setSearchResults(null);
+        setDateGroups(memoizedDateGroups);
       });
-      return;
-    }
-
-    // Use startTransition to make search non-blocking
-    startTransition(() => {
-      const searchTerm = caseSensitive ? debouncedSearchTerm : debouncedSearchTerm.toLowerCase();
-      const filtered = sessions.filter((session) => {
-        const description = session.metadata.description || session.id;
-        const path = session.path;
-        const workingDir = session.metadata.working_dir;
-
-        if (caseSensitive) {
-          return (
-            description.includes(searchTerm) ||
-            path.includes(searchTerm) ||
-            workingDir.includes(searchTerm)
-          );
-        } else {
-          return (
-            description.toLowerCase().includes(searchTerm) ||
-            path.toLowerCase().includes(searchTerm) ||
-            workingDir.toLowerCase().includes(searchTerm)
-          );
+    }, [memoizedDateGroups]);
+
+    // Scroll to the selected session when returning from session history view
+    useEffect(() => {
+      if (selectedSessionId) {
+        const element = sessionRefs.current[selectedSessionId];
+        if (element) {
+          element.scrollIntoView({
+            block: 'center',
+          });
         }
+      }
+    }, [selectedSessionId, sessions]);
+
+    // Debounced search effect - performs actual filtering
+    useEffect(() => {
+      if (!debouncedSearchTerm) {
+        startTransition(() => {
+          setFilteredSessions(sessions);
+          setSearchResults(null);
+        });
+        return;
+      }
+
+      // Use startTransition to make search non-blocking
+      startTransition(() => {
+        const searchTerm = caseSensitive ? debouncedSearchTerm : debouncedSearchTerm.toLowerCase();
+        const filtered = sessions.filter((session) => {
+          const description = session.metadata.description || session.id;
+          const path = session.path;
+          const workingDir = session.metadata.working_dir;
+
+          if (caseSensitive) {
+            return (
+              description.includes(searchTerm) ||
+              path.includes(searchTerm) ||
+              workingDir.includes(searchTerm)
+            );
+          } else {
+            return (
+              description.toLowerCase().includes(searchTerm) ||
+              path.toLowerCase().includes(searchTerm) ||
+              workingDir.toLowerCase().includes(searchTerm)
+            );
+          }
+        });
+
+        setFilteredSessions(filtered);
+        setSearchResults(filtered.length > 0 ? { count: filtered.length, currentIndex: 1 } : null);
       });
+    }, [debouncedSearchTerm, caseSensitive, sessions]);
 
-      setFilteredSessions(filtered);
-      setSearchResults(filtered.length > 0 ? { count: filtered.length, currentIndex: 1 } : null);
-    });
-  }, [debouncedSearchTerm, caseSensitive, sessions]);
-
-  // Handle immediate search input (updates search term for debouncing)
-  const handleSearch = useCallback((term: string, caseSensitive: boolean) => {
-    setSearchTerm(term);
-    setCaseSensitive(caseSensitive);
-  }, []);
-
-  // Handle search result navigation
-  const handleSearchNavigation = (direction: 'next' | 'prev') => {
-    if (!searchResults || filteredSessions.length === 0) return;
-
-    let newIndex: number;
-    if (direction === 'next') {
-      newIndex = (searchResults.currentIndex % filteredSessions.length) + 1;
-    } else {
-      newIndex =
-        searchResults.currentIndex === 1 ? filteredSessions.length : searchResults.currentIndex - 1;
-    }
-
-    setSearchResults({ ...searchResults, currentIndex: newIndex });
-
-    // Find the SearchView's container element
-    const searchContainer =
-      containerRef.current?.querySelector<SearchContainerElement>('.search-container');
-    if (searchContainer?._searchHighlighter) {
-      // Update the current match in the highlighter
-      searchContainer._searchHighlighter.setCurrentMatch(newIndex - 1, true);
-    }
-  };
-
-  // Handle modal close
-  const handleModalClose = useCallback(() => {
-    setShowEditModal(false);
-    setEditingSession(null);
-  }, []);
-
-  const handleModalSave = useCallback(async (sessionId: string, newDescription: string) => {
-    // Update state immediately for optimistic UI
-    setSessions((prevSessions) =>
-      prevSessions.map((s) =>
-        s.id === sessionId ? { ...s, metadata: { ...s.metadata, description: newDescription } } : s
-      )
-    );
-  }, []);
-
-  const handleEditSession = useCallback((session: Session) => {
-    setEditingSession(session);
-    setShowEditModal(true);
-  }, []);
-
-  const SessionItem = React.memo(function SessionItem({
-    session,
-    onEditClick,
-  }: {
-    session: Session;
-    onEditClick: (session: Session) => void;
-  }) {
-    const handleEditClick = useCallback(
-      (e: React.MouseEvent) => {
-        e.stopPropagation(); // Prevent card click
-        onEditClick(session);
-      },
-      [onEditClick, session]
-    );
+    // Handle immediate search input (updates search term for debouncing)
+    const handleSearch = useCallback((term: string, caseSensitive: boolean) => {
+      setSearchTerm(term);
+      setCaseSensitive(caseSensitive);
+    }, []);
 
-    const handleCardClick = useCallback(() => {
-      onSelectSession(session.id);
-    }, [session.id]);
+    // Handle search result navigation
+    const handleSearchNavigation = (direction: 'next' | 'prev') => {
+      if (!searchResults || filteredSessions.length === 0) return;
+
+      let newIndex: number;
+      if (direction === 'next') {
+        newIndex = (searchResults.currentIndex % filteredSessions.length) + 1;
+      } else {
+        newIndex =
+          searchResults.currentIndex === 1
+            ? filteredSessions.length
+            : searchResults.currentIndex - 1;
+      }
 
-    return (
-      <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"
-        ref={(el) => setSessionRefs(session.id, el)}
-      >
-        <button
-          onClick={handleEditClick}
-          className="absolute top-3 right-4 p-2 rounded opacity-0 group-hover:opacity-100 transition-opacity hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
-          title="Edit session name"
-        >
-          <Edit2 className="w-3 h-3 text-textSubtle hover:text-textStandard" />
-        </button>
+      setSearchResults({ ...searchResults, currentIndex: newIndex });
 
-        <div className="flex-1">
-          <h3 className="text-base mb-1 pr-6 break-words">
-            {session.metadata.description || session.id}
-          </h3>
+      // Find the SearchView's container element
+      const searchContainer =
+        containerRef.current?.querySelector<SearchContainerElement>('.search-container');
+      if (searchContainer?._searchHighlighter) {
+        // Update the current match in the highlighter
+        searchContainer._searchHighlighter.setCurrentMatch(newIndex - 1, true);
+      }
+    };
 
-          <div className="flex items-center text-text-muted text-xs mb-1">
-            <Calendar className="w-3 h-3 mr-1 flex-shrink-0" />
-            <span>{formatMessageTimestamp(Date.parse(session.modified) / 1000)}</span>
-          </div>
-          <div className="flex items-center text-text-muted text-xs mb-1">
-            <Folder className="w-3 h-3 mr-1 flex-shrink-0" />
-            <span className="truncate">{session.metadata.working_dir}</span>
-          </div>
-        </div>
+    // Handle modal close
+    const handleModalClose = useCallback(() => {
+      setShowEditModal(false);
+      setEditingSession(null);
+    }, []);
+
+    const handleModalSave = useCallback(async (sessionId: string, newDescription: string) => {
+      // Update state immediately for optimistic UI
+      setSessions((prevSessions) =>
+        prevSessions.map((s) =>
+          s.id === sessionId
+            ? { ...s, metadata: { ...s.metadata, description: newDescription } }
+            : s
+        )
+      );
+    }, []);
+
+    const handleEditSession = useCallback((session: Session) => {
+      setEditingSession(session);
+      setShowEditModal(true);
+    }, []);
+
+    const SessionItem = React.memo(function SessionItem({
+      session,
+      onEditClick,
+    }: {
+      session: Session;
+      onEditClick: (session: Session) => void;
+    }) {
+      const handleEditClick = useCallback(
+        (e: React.MouseEvent) => {
+          e.stopPropagation(); // Prevent card click
+          onEditClick(session);
+        },
+        [onEditClick, session]
+      );
+
+      const handleCardClick = useCallback(() => {
+        onSelectSession(session.id);
+      }, [session.id]);
 
-        <div className="flex items-center justify-between mt-1 pt-2">
-          <div className="flex items-center space-x-3 text-xs text-text-muted">
-            <div className="flex items-center">
-              <MessageSquareText className="w-3 h-3 mr-1" />
-              <span className="font-mono">{session.metadata.message_count}</span>
+      return (
+        <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"
+          ref={(el) => setSessionRefs(session.id, el)}
+        >
+          <button
+            onClick={handleEditClick}
+            className="absolute top-3 right-4 p-2 rounded opacity-0 group-hover:opacity-100 transition-opacity hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
+            title="Edit session name"
+          >
+            <Edit2 className="w-3 h-3 text-textSubtle hover:text-textStandard" />
+          </button>
+
+          <div className="flex-1">
+            <h3 className="text-base mb-1 pr-6 break-words">
+              {session.metadata.description || session.id}
+            </h3>
+
+            <div className="flex items-center text-text-muted text-xs mb-1">
+              <Calendar className="w-3 h-3 mr-1 flex-shrink-0" />
+              <span>{formatMessageTimestamp(Date.parse(session.modified) / 1000)}</span>
             </div>
-            {session.metadata.total_tokens !== null && (
+            <div className="flex items-center text-text-muted text-xs mb-1">
+              <Folder className="w-3 h-3 mr-1 flex-shrink-0" />
+              <span className="truncate">{session.metadata.working_dir}</span>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between mt-1 pt-2">
+            <div className="flex items-center space-x-3 text-xs text-text-muted">
               <div className="flex items-center">
-                <Target className="w-3 h-3 mr-1" />
-                <span className="font-mono">{session.metadata.total_tokens.toLocaleString()}</span>
+                <MessageSquareText className="w-3 h-3 mr-1" />
+                <span className="font-mono">{session.metadata.message_count}</span>
               </div>
-            )}
+              {session.metadata.total_tokens !== null && (
+                <div className="flex items-center">
+                  <Target className="w-3 h-3 mr-1" />
+                  <span className="font-mono">
+                    {(session.metadata.total_tokens || 0).toLocaleString()}
+                  </span>
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-      </Card>
-    );
-  });
-
-  // Render skeleton loader for session items with variations
-  const SessionSkeleton = React.memo(({ variant = 0 }: { variant?: number }) => {
-    const titleWidths = ['w-3/4', 'w-2/3', 'w-4/5', 'w-1/2'];
-    const pathWidths = ['w-32', 'w-28', 'w-36', 'w-24'];
-    const tokenWidths = ['w-12', 'w-10', 'w-14', 'w-8'];
+        </Card>
+      );
+    });
 
-    return (
-      <Card className="session-skeleton h-full py-3 px-4 flex flex-col justify-between">
-        <div className="flex-1">
-          <Skeleton className={`h-5 ${titleWidths[variant % titleWidths.length]} mb-2`} />
-          <div className="flex items-center mb-1">
-            <Skeleton className="h-3 w-3 mr-1 rounded-sm" />
-            <Skeleton className="h-4 w-20" />
-          </div>
-          <div className="flex items-center mb-1">
-            <Skeleton className="h-3 w-3 mr-1 rounded-sm" />
-            <Skeleton className={`h-4 ${pathWidths[variant % pathWidths.length]}`} />
-          </div>
-        </div>
+    // Render skeleton loader for session items with variations
+    const SessionSkeleton = React.memo(({ variant = 0 }: { variant?: number }) => {
+      const titleWidths = ['w-3/4', 'w-2/3', 'w-4/5', 'w-1/2'];
+      const pathWidths = ['w-32', 'w-28', 'w-36', 'w-24'];
+      const tokenWidths = ['w-12', 'w-10', 'w-14', 'w-8'];
 
-        <div className="flex items-center justify-between mt-1 pt-2">
-          <div className="flex items-center space-x-3">
-            <div className="flex items-center">
+      return (
+        <Card className="session-skeleton h-full py-3 px-4 flex flex-col justify-between">
+          <div className="flex-1">
+            <Skeleton className={`h-5 ${titleWidths[variant % titleWidths.length]} mb-2`} />
+            <div className="flex items-center mb-1">
               <Skeleton className="h-3 w-3 mr-1 rounded-sm" />
-              <Skeleton className="h-4 w-8" />
+              <Skeleton className="h-4 w-20" />
             </div>
-            <div className="flex items-center">
+            <div className="flex items-center mb-1">
               <Skeleton className="h-3 w-3 mr-1 rounded-sm" />
-              <Skeleton className={`h-4 ${tokenWidths[variant % tokenWidths.length]}`} />
+              <Skeleton className={`h-4 ${pathWidths[variant % pathWidths.length]}`} />
             </div>
           </div>
-        </div>
-      </Card>
-    );
-  });
-
-  SessionSkeleton.displayName = 'SessionSkeleton';
 
-  const renderActualContent = () => {
-    if (error) {
-      return (
-        <div className="flex flex-col items-center justify-center h-full text-text-muted">
-          <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
-          <p className="text-lg mb-2">Error Loading Sessions</p>
-          <p className="text-sm text-center mb-4">{error}</p>
-          <Button onClick={loadSessions} variant="default">
-            Try Again
-          </Button>
-        </div>
+          <div className="flex items-center justify-between mt-1 pt-2">
+            <div className="flex items-center space-x-3">
+              <div className="flex items-center">
+                <Skeleton className="h-3 w-3 mr-1 rounded-sm" />
+                <Skeleton className="h-4 w-8" />
+              </div>
+              <div className="flex items-center">
+                <Skeleton className="h-3 w-3 mr-1 rounded-sm" />
+                <Skeleton className={`h-4 ${tokenWidths[variant % tokenWidths.length]}`} />
+              </div>
+            </div>
+          </div>
+        </Card>
       );
-    }
+    });
 
-    if (sessions.length === 0) {
-      return (
-        <div className="flex flex-col justify-center h-full text-text-muted">
-          <MessageSquareText className="h-12 w-12 mb-4" />
-          <p className="text-lg mb-2">No chat sessions found</p>
-          <p className="text-sm">Your chat history will appear here</p>
-        </div>
-      );
-    }
+    SessionSkeleton.displayName = 'SessionSkeleton';
+
+    const renderActualContent = () => {
+      if (error) {
+        return (
+          <div className="flex flex-col items-center justify-center h-full text-text-muted">
+            <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
+            <p className="text-lg mb-2">Error Loading Sessions</p>
+            <p className="text-sm text-center mb-4">{error}</p>
+            <Button onClick={loadSessions} variant="default">
+              Try Again
+            </Button>
+          </div>
+        );
+      }
 
-    if (dateGroups.length === 0 && searchResults !== null) {
+      if (sessions.length === 0) {
+        return (
+          <div className="flex flex-col justify-center h-full text-text-muted">
+            <MessageSquareText className="h-12 w-12 mb-4" />
+            <p className="text-lg mb-2">No chat sessions found</p>
+            <p className="text-sm">Your chat history will appear here</p>
+          </div>
+        );
+      }
+
+      if (dateGroups.length === 0 && searchResults !== null) {
+        return (
+          <div className="flex flex-col items-center justify-center h-full text-text-muted mt-4">
+            <MessageSquareText className="h-12 w-12 mb-4" />
+            <p className="text-lg mb-2">No matching sessions found</p>
+            <p className="text-sm">Try adjusting your search terms</p>
+          </div>
+        );
+      }
+
+      // For regular rendering in grid layout
       return (
-        <div className="flex flex-col items-center justify-center h-full text-text-muted mt-4">
-          <MessageSquareText className="h-12 w-12 mb-4" />
-          <p className="text-lg mb-2">No matching sessions found</p>
-          <p className="text-sm">Try adjusting your search terms</p>
+        <div className="space-y-8">
+          {dateGroups.map((group) => (
+            <div key={group.label} className="space-y-4">
+              <div className="sticky top-0 z-10 bg-background-default/95 backdrop-blur-sm">
+                <h2 className="text-text-muted">{group.label}</h2>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+                {group.sessions.map((session) => (
+                  <SessionItem key={session.id} session={session} onEditClick={handleEditSession} />
+                ))}
+              </div>
+            </div>
+          ))}
         </div>
       );
-    }
+    };
 
-    // For regular rendering in grid layout
     return (
-      <div className="space-y-8">
-        {dateGroups.map((group) => (
-          <div key={group.label} className="space-y-4">
-            <div className="sticky top-0 z-10 bg-background-default/95 backdrop-blur-sm">
-              <h2 className="text-text-muted">{group.label}</h2>
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
-              {group.sessions.map((session) => (
-                <SessionItem key={session.id} session={session} onEditClick={handleEditSession} />
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  };
-
-  return (
-    <>
-      <MainPanelLayout>
-        <div className="flex-1 flex flex-col min-h-0">
-          <div className="bg-background-default px-8 pb-8 pt-16">
-            <div className="flex flex-col page-transition">
-              <div className="flex justify-between items-center mb-1">
-                <h1 className="text-4xl font-light">Chat history</h1>
+      <>
+        <MainPanelLayout>
+          <div className="flex-1 flex flex-col min-h-0">
+            <div className="bg-background-default px-8 pb-8 pt-16">
+              <div className="flex flex-col page-transition">
+                <div className="flex justify-between items-center mb-1">
+                  <h1 className="text-4xl font-light">Chat history</h1>
+                </div>
+                <p className="text-sm text-text-muted mb-4">
+                  View and search your past conversations with Goose.
+                </p>
               </div>
-              <p className="text-sm text-text-muted mb-4">
-                View and search your past conversations with Goose.
-              </p>
             </div>
-          </div>
 
-          <div className="flex-1 min-h-0 relative px-8">
-            <ScrollArea className="h-full" data-search-scroll-area>
-              <div ref={containerRef} className="h-full relative">
-                <SearchView
-                  onSearch={handleSearch}
-                  onNavigate={handleSearchNavigation}
-                  searchResults={searchResults}
-                  className="relative"
-                >
-                  {/* Skeleton layer - always rendered but conditionally visible */}
-                  <div
-                    className={`absolute inset-0 transition-opacity duration-300 ${
-                      isLoading || showSkeleton
-                        ? 'opacity-100 z-10'
-                        : 'opacity-0 z-0 pointer-events-none'
-                    }`}
+            <div className="flex-1 min-h-0 relative px-8">
+              <ScrollArea className="h-full" data-search-scroll-area>
+                <div ref={containerRef} className="h-full relative">
+                  <SearchView
+                    onSearch={handleSearch}
+                    onNavigate={handleSearchNavigation}
+                    searchResults={searchResults}
+                    className="relative"
                   >
-                    <div className="space-y-8">
-                      {/* Today section */}
-                      <div className="space-y-4">
-                        <Skeleton className="h-6 w-16" />
-                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
-                          <SessionSkeleton variant={0} />
-                          <SessionSkeleton variant={1} />
-                          <SessionSkeleton variant={2} />
-                          <SessionSkeleton variant={3} />
-                          <SessionSkeleton variant={0} />
+                    {/* Skeleton layer - always rendered but conditionally visible */}
+                    <div
+                      className={`absolute inset-0 transition-opacity duration-300 ${
+                        isLoading || showSkeleton
+                          ? 'opacity-100 z-10'
+                          : 'opacity-0 z-0 pointer-events-none'
+                      }`}
+                    >
+                      <div className="space-y-8">
+                        {/* Today section */}
+                        <div className="space-y-4">
+                          <Skeleton className="h-6 w-16" />
+                          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+                            <SessionSkeleton variant={0} />
+                            <SessionSkeleton variant={1} />
+                            <SessionSkeleton variant={2} />
+                            <SessionSkeleton variant={3} />
+                            <SessionSkeleton variant={0} />
+                          </div>
                         </div>
-                      </div>
 
-                      {/* Yesterday section */}
-                      <div className="space-y-4">
-                        <Skeleton className="h-6 w-20" />
-                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
-                          <SessionSkeleton variant={1} />
-                          <SessionSkeleton variant={2} />
-                          <SessionSkeleton variant={3} />
-                          <SessionSkeleton variant={0} />
-                          <SessionSkeleton variant={1} />
-                          <SessionSkeleton variant={2} />
+                        {/* Yesterday section */}
+                        <div className="space-y-4">
+                          <Skeleton className="h-6 w-20" />
+                          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+                            <SessionSkeleton variant={1} />
+                            <SessionSkeleton variant={2} />
+                            <SessionSkeleton variant={3} />
+                            <SessionSkeleton variant={0} />
+                            <SessionSkeleton variant={1} />
+                            <SessionSkeleton variant={2} />
+                          </div>
                         </div>
-                      </div>
 
-                      {/* Additional section */}
-                      <div className="space-y-4">
-                        <Skeleton className="h-6 w-24" />
-                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
-                          <SessionSkeleton variant={3} />
-                          <SessionSkeleton variant={0} />
-                          <SessionSkeleton variant={1} />
+                        {/* Additional section */}
+                        <div className="space-y-4">
+                          <Skeleton className="h-6 w-24" />
+                          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+                            <SessionSkeleton variant={3} />
+                            <SessionSkeleton variant={0} />
+                            <SessionSkeleton variant={1} />
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
 
-                  {/* Content layer - always rendered but conditionally visible */}
-                  <div
-                    className={`relative transition-opacity duration-300 ${
-                      showContent ? 'opacity-100 z-10' : 'opacity-0 z-0'
-                    }`}
-                  >
-                    {renderActualContent()}
-                  </div>
-                </SearchView>
-              </div>
-            </ScrollArea>
+                    {/* Content layer - always rendered but conditionally visible */}
+                    <div
+                      className={`relative transition-opacity duration-300 ${
+                        showContent ? 'opacity-100 z-10' : 'opacity-0 z-0'
+                      }`}
+                    >
+                      {renderActualContent()}
+                    </div>
+                  </SearchView>
+                </div>
+              </ScrollArea>
+            </div>
           </div>
-        </div>
-      </MainPanelLayout>
-
-      <EditSessionModal
-        session={editingSession}
-        isOpen={showEditModal}
-        onClose={handleModalClose}
-        onSave={handleModalSave}
-      />
-    </>
-  );
-});
+        </MainPanelLayout>
+
+        <EditSessionModal
+          session={editingSession}
+          isOpen={showEditModal}
+          onClose={handleModalClose}
+          onSave={handleModalSave}
+        />
+      </>
+    );
+  }
+);
 
 SessionListView.displayName = 'SessionListView';
 
diff --git a/ui/desktop/src/hooks/useChatEngine.ts b/ui/desktop/src/hooks/useChatEngine.ts
index 82054cdb09c5..eb01d0b6cd2c 100644
--- a/ui/desktop/src/hooks/useChatEngine.ts
+++ b/ui/desktop/src/hooks/useChatEngine.ts
@@ -222,9 +222,9 @@ export const useChatEngine = ({
   useEffect(() => {
     console.log('Session metadata received:', sessionMetadata);
     if (sessionMetadata) {
-      setSessionTokenCount(sessionMetadata.totalTokens || 0);
-      setSessionInputTokens(sessionMetadata.accumulatedInputTokens || 0);
-      setSessionOutputTokens(sessionMetadata.accumulatedOutputTokens || 0);
+      setSessionTokenCount(sessionMetadata.total_tokens || 0);
+      setSessionInputTokens(sessionMetadata.accumulated_input_tokens || 0);
+      setSessionOutputTokens(sessionMetadata.accumulated_output_tokens || 0);
     }
   }, [sessionMetadata]);
 
diff --git a/ui/desktop/src/hooks/useCostTracking.ts b/ui/desktop/src/hooks/useCostTracking.ts
index 87d7ed379035..cf22d0e0f3cd 100644
--- a/ui/desktop/src/hooks/useCostTracking.ts
+++ b/ui/desktop/src/hooks/useCostTracking.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useModelAndProvider } from '../components/ModelAndProviderContext';
 import { getCostForModel } from '../utils/costDatabase';
-import { SessionMetadata } from './useMessageStream';
+import { SessionMetadata } from '../api';
 
 interface UseCostTrackingProps {
   sessionInputTokens: number;
diff --git a/ui/desktop/src/hooks/useMessageStream.ts b/ui/desktop/src/hooks/useMessageStream.ts
index c6e01d170caa..4fdb0eaa1755 100644
--- a/ui/desktop/src/hooks/useMessageStream.ts
+++ b/ui/desktop/src/hooks/useMessageStream.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useId, useReducer, useRef, useState } from 'react';
 import useSWR from 'swr';
 import { createUserMessage, hasCompletedToolCalls, Message } from '../types/message';
-import { getSessionHistory } from '../api';
+import { getSessionHistory, SessionMetadata } from '../api';
 import { ChatState } from '../types/chatState';
 
 let messageIdCounter = 0;
@@ -15,19 +15,6 @@ const TextDecoder = globalThis.TextDecoder;
 
 type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };
 
-export interface SessionMetadata {
-  workingDir: string;
-  description: string;
-  scheduleId: string | null;
-  messageCount: number;
-  totalTokens: number | null;
-  inputTokens: number | null;
-  outputTokens: number | null;
-  accumulatedTotalTokens: number | null;
-  accumulatedInputTokens: number | null;
-  accumulatedOutputTokens: number | null;
-}
-
 export interface NotificationEvent {
   type: 'Notification';
   request_id: string;
@@ -369,21 +356,7 @@ export function useMessageStream({
                         });
 
                         if (sessionResponse.data?.metadata) {
-                          setSessionMetadata({
-                            workingDir: sessionResponse.data.metadata.working_dir,
-                            description: sessionResponse.data.metadata.description,
-                            scheduleId: sessionResponse.data.metadata.schedule_id || null,
-                            messageCount: sessionResponse.data.metadata.message_count,
-                            totalTokens: sessionResponse.data.metadata.total_tokens || null,
-                            inputTokens: sessionResponse.data.metadata.input_tokens || null,
-                            outputTokens: sessionResponse.data.metadata.output_tokens || null,
-                            accumulatedTotalTokens:
-                              sessionResponse.data.metadata.accumulated_total_tokens || null,
-                            accumulatedInputTokens:
-                              sessionResponse.data.metadata.accumulated_input_tokens || null,
-                            accumulatedOutputTokens:
-                              sessionResponse.data.metadata.accumulated_output_tokens || null,
-                          });
+                          setSessionMetadata(sessionResponse.data?.metadata);
                         }
                       } catch (error) {
                         console.error('Failed to fetch session metadata:', error);
diff --git a/ui/desktop/src/sessions.ts b/ui/desktop/src/sessions.ts
index 975535e64c72..a19220945931 100644
--- a/ui/desktop/src/sessions.ts
+++ b/ui/desktop/src/sessions.ts
@@ -1,19 +1,14 @@
 import { Message } from './types/message';
-import { getSessionHistory, listSessions, SessionInfo, Message as ApiMessage } from './api';
+import {
+  getSessionHistory,
+  listSessions,
+  SessionInfo,
+  Message as ApiMessage,
+  SessionMetadata,
+} from './api';
 import { convertApiMessageToFrontendMessage } from './components/context_management';
 import { getApiUrl } from './config';
 
-export interface SessionMetadata {
-  description: string;
-  message_count: number;
-  total_tokens: number | null;
-  working_dir: string; // Required in type, but may be missing in old sessions
-  // Add the accumulated token fields from the API
-  accumulated_input_tokens?: number | null;
-  accumulated_output_tokens?: number | null;
-  accumulated_total_tokens?: number | null;
-}
-
 // Helper function to ensure working directory is set
 export function ensureWorkingDir(metadata: Partial<SessionMetadata>): SessionMetadata {
   return {