improvement(log-details): polling, trace spans (#2292)

apps/sim/app/workspace/[workspaceId]/logs/hooks/use-log-details-resize.ts

@@ -1,9 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
-import {
-  MAX_LOG_DETAILS_WIDTH,
-  MIN_LOG_DETAILS_WIDTH,
-  useLogDetailsUIStore,
-} from '@/stores/logs/store'
+import { MIN_LOG_DETAILS_WIDTH, useLogDetailsUIStore } from '@/stores/logs/store'
 
 /**
  * Hook for handling log details panel resize via mouse drag.
@@ -29,10 +25,8 @@ export function useLogDetailsResize() {
     const handleMouseMove = (e: MouseEvent) => {
       // Calculate new width from right edge of window
       const newWidth = window.innerWidth - e.clientX
-      const clampedWidth = Math.max(
-        MIN_LOG_DETAILS_WIDTH,
-        Math.min(newWidth, MAX_LOG_DETAILS_WIDTH)
-      )
+      const maxWidth = window.innerWidth * 0.5 // 50vw
+      const clampedWidth = Math.max(MIN_LOG_DETAILS_WIDTH, Math.min(newWidth, maxWidth))
 
       setPanelWidth(clampedWidth)
     }

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -107,21 +107,42 @@ export default function Logs() {
     }
   }, [debouncedSearchQuery, setStoreSearchQuery])
 
+  // Track previous log state for efficient change detection
+  const prevSelectedLogRef = useRef<WorkflowLog | null>(null)
+
   // Sync selected log with refreshed data from logs list
   useEffect(() => {
     if (!selectedLog?.id || logs.length === 0) return
 
     const updatedLog = logs.find((l) => l.id === selectedLog.id)
-    if (updatedLog) {
-      // Update selectedLog with fresh data from the list
+    if (!updatedLog) return
+
+    const prevLog = prevSelectedLogRef.current
+
+    // Check if status-related fields have changed (e.g., running -> done)
+    const hasStatusChange =
+      prevLog?.id === updatedLog.id &&
+      (updatedLog.duration !== prevLog.duration ||
+        updatedLog.level !== prevLog.level ||
+        updatedLog.hasPendingPause !== prevLog.hasPendingPause)
+
+    // Only update if the log data actually changed
+    if (updatedLog !== selectedLog) {
       setSelectedLog(updatedLog)
-      // Update index in case position changed
-      const newIndex = logs.findIndex((l) => l.id === selectedLog.id)
-      if (newIndex !== selectedLogIndex) {
-        setSelectedLogIndex(newIndex)
-      }
+      prevSelectedLogRef.current = updatedLog
     }
-  }, [logs, selectedLog?.id, selectedLogIndex])
+
+    // Update index in case position changed
+    const newIndex = logs.findIndex((l) => l.id === selectedLog.id)
+    if (newIndex !== selectedLogIndex) {
+      setSelectedLogIndex(newIndex)
+    }
+
+    // Refetch log details if status changed to keep details panel in sync
+    if (hasStatusChange) {
+      logDetailQuery.refetch()
+    }
+  }, [logs, selectedLog?.id, selectedLogIndex, logDetailQuery.refetch])
 
   // Refetch log details during live mode
   useEffect(() => {
@@ -143,6 +164,7 @@ export default function Logs() {
 
     // Otherwise, select the log and open the sidebar
     setSelectedLog(log)
+    prevSelectedLogRef.current = log
     const index = logs.findIndex((l) => l.id === log.id)
     setSelectedLogIndex(index)
     setIsSidebarOpen(true)
@@ -154,6 +176,7 @@ export default function Logs() {
       setSelectedLogIndex(nextIndex)
       const nextLog = logs[nextIndex]
       setSelectedLog(nextLog)
+      prevSelectedLogRef.current = nextLog
     }
   }, [selectedLogIndex, logs])
 
@@ -163,6 +186,7 @@ export default function Logs() {
       setSelectedLogIndex(prevIndex)
       const prevLog = logs[prevIndex]
       setSelectedLog(prevLog)
+      prevSelectedLogRef.current = prevLog
     }
   }, [selectedLogIndex, logs])
 
@@ -170,6 +194,7 @@ export default function Logs() {
     setIsSidebarOpen(false)
     setSelectedLog(null)
     setSelectedLogIndex(-1)
+    prevSelectedLogRef.current = null
   }
 
   useEffect(() => {
@@ -332,6 +357,7 @@ export default function Logs() {
         e.preventDefault()
         setSelectedLogIndex(0)
         setSelectedLog(logs[0])
+        prevSelectedLogRef.current = logs[0]
         return
       }
 

apps/sim/stores/logs/store.ts

@@ -5,9 +5,15 @@ import { persist } from 'zustand/middleware'
  * Width constraints for the log details panel.
  */
 export const MIN_LOG_DETAILS_WIDTH = 340
-export const MAX_LOG_DETAILS_WIDTH = 700
 export const DEFAULT_LOG_DETAILS_WIDTH = 340
 
+/**
+ * Returns the maximum log details panel width (50vw).
+ * Falls back to a reasonable default for SSR.
+ */
+export const getMaxLogDetailsWidth = () =>
+  typeof window !== 'undefined' ? window.innerWidth * 0.5 : 800
+
 /**
  * Log details UI state persisted across sessions.
  */
@@ -27,7 +33,8 @@ export const useLogDetailsUIStore = create<LogDetailsUIState>()(
        * @param width - Desired width in pixels for the panel.
        */
       setPanelWidth: (width) => {
-        const clampedWidth = Math.max(MIN_LOG_DETAILS_WIDTH, Math.min(width, MAX_LOG_DETAILS_WIDTH))
+        const maxWidth = getMaxLogDetailsWidth()
+        const clampedWidth = Math.max(MIN_LOG_DETAILS_WIDTH, Math.min(width, maxWidth))
         set({ panelWidth: clampedWidth })
       },
       isResizing: false,