Improve activity log pagination UI - move buttons to top right, add Load All button

Author: Murtaza Nsair

maestro_frontend/src/components/mission/AgentActivityLog.tsx

@@ -51,6 +51,7 @@ interface AgentActivityLogProps {
   missionId?: string;
   hasMore?: boolean;
   onLoadMore?: () => void;
+  onLoadAll?: () => void;
   isLoadingMore?: boolean;
   totalLogs?: number;
 }
@@ -62,6 +63,7 @@ export const AgentActivityLog: React.FC<AgentActivityLogProps> = ({
   missionId,
   hasMore = false,
   onLoadMore,
+  onLoadAll,
   isLoadingMore = false,
   totalLogs = 0
 }) => {
@@ -126,18 +128,37 @@ export const AgentActivityLog: React.FC<AgentActivityLogProps> = ({
 
   return (
     <div className="flex flex-col h-full max-h-full overflow-hidden space-y-2">
-      <div className="flex items-center space-x-2 flex-shrink-0">
-        <Bot className="h-4 w-4 text-primary" />
-        <h3 className="text-base font-semibold text-foreground">Agent Activity Log</h3>
-        {logs.length > 0 && (
-          <div className="flex items-center gap-2">
+      <div className="flex items-center justify-between flex-shrink-0">
+        <div className="flex items-center space-x-2">
+          <Bot className="h-4 w-4 text-primary" />
+          <h3 className="text-base font-semibold text-foreground">Agent Activity Log</h3>
+          {logs.length > 0 && (
             <span className="text-xs text-muted-foreground bg-secondary px-2 py-1 rounded">
-              {logs.length} entries
+              {logs.length} entries{totalLogs > 0 && totalLogs > logs.length ? ` of ${totalLogs} total` : ''}
             </span>
-            {totalLogs > 0 && totalLogs > logs.length && (
-              <span className="text-xs text-muted-foreground">
-                of {totalLogs} total
-              </span>
+          )}
+        </div>
+        {(hasMore || (totalLogs > 0 && logs.length < totalLogs)) && onLoadMore && (
+          <div className="flex gap-2">
+            <Button
+              onClick={onLoadMore}
+              disabled={isLoadingMore || (!hasMore && logs.length >= totalLogs)}
+              variant="outline"
+              size="sm"
+              className="text-xs h-7"
+            >
+              {isLoadingMore ? 'Loading...' : 'Load More'}
+            </Button>
+            {hasMore && onLoadAll && (
+              <Button
+                onClick={onLoadAll}
+                disabled={isLoadingMore}
+                variant="outline"
+                size="sm"
+                className="text-xs h-7"
+              >
+                Load All
+              </Button>
             )}
           </div>
         )}
@@ -167,37 +188,6 @@ export const AgentActivityLog: React.FC<AgentActivityLogProps> = ({
           )}
 
           {logs.map((log, index) => renderLogEntry(log, index))}
-          
-          {(hasMore || (totalLogs > 0 && logs.length < totalLogs)) && onLoadMore && (
-            <div className="p-4 border-t space-y-3">
-              <div className="flex items-center justify-between text-xs text-muted-foreground">
-                <span>
-                  Showing {logs.length} of {totalLogs || logs.length} logs
-                </span>
-              </div>
-              <div className="flex justify-center">
-                <Button
-                  onClick={onLoadMore}
-                  disabled={isLoadingMore || (!hasMore && logs.length >= totalLogs)}
-                  variant="outline"
-                  size="sm"
-                  className="flex items-center gap-2"
-                >
-                  {isLoadingMore ? (
-                    <>
-                      <Activity className="h-4 w-4 animate-spin" />
-                      Loading more...
-                    </>
-                  ) : (
-                    <>
-                      <ChevronDown className="h-4 w-4" />
-                      Load More
-                    </>
-                  )}
-                </Button>
-              </div>
-            </div>
-          )}
         </CardContent>
       </Card>
     </div>

maestro_frontend/src/features/mission/components/AgentsTab.tsx

@@ -11,6 +11,7 @@ interface AgentsTabProps {
   missionId: string;
   hasMoreLogs?: boolean;
   onLoadMoreLogs?: () => void;
+  onLoadAllLogs?: () => void;
   isLoadingMoreLogs?: boolean;
   totalLogsCount?: number;
 }
@@ -19,6 +20,7 @@ export const AgentsTab: React.FC<AgentsTabProps> = ({
   missionId,
   hasMoreLogs,
   onLoadMoreLogs,
+  onLoadAllLogs,
   isLoadingMoreLogs,
   totalLogsCount
 }) => {
@@ -71,6 +73,7 @@ export const AgentsTab: React.FC<AgentsTabProps> = ({
             missionId={missionId}
             hasMore={hasMoreLogs}
             onLoadMore={onLoadMoreLogs}
+            onLoadAll={onLoadAllLogs}
             isLoadingMore={isLoadingMoreLogs}
             totalLogs={totalLogsCount}
           />

maestro_frontend/src/features/mission/components/ResearchPanel.tsx

@@ -110,6 +110,44 @@ export const ResearchPanel: React.FC = () => {
     }
   }, [activeChat?.missionId, hasMoreLogs, isLoadingMoreLogs, missionLogs, appendMissionLogs, addToast])
 
+  // Load all logs function
+  const loadAllLogs = useCallback(async () => {
+    if (!activeChat?.missionId || !hasMoreLogs || isLoadingMoreLogs) {
+      return
+    }
+    
+    setIsLoadingMoreLogs(true)
+    try {
+      // Fetch all remaining logs in one request
+      const response = await apiClient.get(`/api/missions/${activeChat.missionId}/logs?skip=0&limit=10000`)
+      if (response.data && response.data.logs) {
+        const allLogs = response.data.logs.map((log: any) => ({
+          ...log,
+          timestamp: ensureDate(log.timestamp),
+        }))
+        
+        // Sort all logs by timestamp
+        const sortedAllLogs = allLogs.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
+        
+        // Replace existing logs with all logs
+        setMissionLogs(activeChat.missionId, sortedAllLogs)
+        
+        // Update pagination state
+        setHasMoreLogs(false)
+        setTotalLogsCount(response.data.total || sortedAllLogs.length)
+      }
+    } catch (error) {
+      console.error('Failed to load all logs:', error)
+      addToast({
+        type: 'error',
+        title: 'Failed to load all logs',
+        message: 'Please try again'
+      })
+    } finally {
+      setIsLoadingMoreLogs(false)
+    }
+  }, [activeChat?.missionId, hasMoreLogs, isLoadingMoreLogs, setMissionLogs, addToast])
+
   // Set up single WebSocket connection for ALL research updates
   const { isConnected, subscribeMission, unsubscribeMission } = useResearchWebSocket()
 
@@ -403,6 +441,7 @@ export const ResearchPanel: React.FC = () => {
             isWebSocketConnected={isConnected}
             hasMoreLogs={hasMoreLogs}
             onLoadMoreLogs={loadMoreLogs}
+            onLoadAllLogs={loadAllLogs}
             isLoadingMoreLogs={isLoadingMoreLogs}
             totalLogsCount={totalLogsCount}
           />

maestro_frontend/src/features/mission/components/ResearchTabs.tsx

@@ -16,6 +16,7 @@ interface ResearchTabsProps {
   isWebSocketConnected?: boolean
   hasMoreLogs?: boolean
   onLoadMoreLogs?: () => void
+  onLoadAllLogs?: () => void
   isLoadingMoreLogs?: boolean
   totalLogsCount?: number
 }
@@ -24,6 +25,7 @@ export const ResearchTabs: React.FC<ResearchTabsProps> = ({
   missionId, 
   hasMoreLogs,
   onLoadMoreLogs,
+  onLoadAllLogs,
   isLoadingMoreLogs,
   totalLogsCount
 }) => {
@@ -97,6 +99,7 @@ export const ResearchTabs: React.FC<ResearchTabsProps> = ({
             missionId={missionId}
             hasMoreLogs={hasMoreLogs}
             onLoadMoreLogs={onLoadMoreLogs}
+            onLoadAllLogs={onLoadAllLogs}
             isLoadingMoreLogs={isLoadingMoreLogs}
             totalLogsCount={totalLogsCount}
           />