fix(logs): refresh logic to refresh logs details (#2958)

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

@@ -94,7 +94,9 @@ export default function Logs() {
   const [previewLogId, setPreviewLogId] = useState<string | null>(null)
 
   const activeLogId = isPreviewOpen ? previewLogId : selectedLogId
-  const activeLogQuery = useLogDetail(activeLogId ?? undefined)
+  const activeLogQuery = useLogDetail(activeLogId ?? undefined, {
+    refetchInterval: isLive ? 3000 : false,
+  })
 
   const logFilters = useMemo(
     () => ({
@@ -113,7 +115,7 @@ export default function Logs() {
 
   const logsQuery = useLogsList(workspaceId, logFilters, {
     enabled: Boolean(workspaceId) && isInitialized.current,
-    refetchInterval: isLive ? 5000 : false,
+    refetchInterval: isLive ? 3000 : false,
   })
 
   const dashboardFilters = useMemo(
@@ -132,7 +134,7 @@ export default function Logs() {
 
   const dashboardStatsQuery = useDashboardStats(workspaceId, dashboardFilters, {
     enabled: Boolean(workspaceId) && isInitialized.current,
-    refetchInterval: isLive ? 5000 : false,
+    refetchInterval: isLive ? 3000 : false,
   })
 
   const logs = useMemo(() => {
@@ -160,12 +162,6 @@ export default function Logs() {
     }
   }, [debouncedSearchQuery, setStoreSearchQuery])
 
-  useEffect(() => {
-    if (!isLive || !selectedLogId) return
-    const interval = setInterval(() => activeLogQuery.refetch(), 5000)
-    return () => clearInterval(interval)
-  }, [isLive, selectedLogId, activeLogQuery])
-
   const handleLogClick = useCallback(
     (log: WorkflowLog) => {
       if (selectedLogId === log.id && isSidebarOpen) {
@@ -279,8 +275,11 @@ export default function Logs() {
       setIsVisuallyRefreshing(true)
       setTimeout(() => setIsVisuallyRefreshing(false), REFRESH_SPINNER_DURATION_MS)
       logsQuery.refetch()
+      if (selectedLogId) {
+        activeLogQuery.refetch()
+      }
     }
-  }, [isLive, logsQuery])
+  }, [isLive, logsQuery, activeLogQuery, selectedLogId])
 
   const prevIsFetchingRef = useRef(logsQuery.isFetching)
   useEffect(() => {

apps/sim/hooks/queries/logs.ts

@@ -144,11 +144,17 @@ export function useLogsList(
   })
 }
 
-export function useLogDetail(logId: string | undefined) {
+interface UseLogDetailOptions {
+  enabled?: boolean
+  refetchInterval?: number | false
+}
+
+export function useLogDetail(logId: string | undefined, options?: UseLogDetailOptions) {
   return useQuery({
     queryKey: logKeys.detail(logId),
     queryFn: () => fetchLogDetail(logId as string),
-    enabled: Boolean(logId),
+    enabled: Boolean(logId) && (options?.enabled ?? true),
+    refetchInterval: options?.refetchInterval ?? false,
     staleTime: 30 * 1000,
     placeholderData: keepPreviousData,
   })