fix(logs): sync refetch refs during render, fix handleToggleLive stale read, short-circuit memo comparator

apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/index.ts

@@ -1,2 +1,2 @@
 export type { StatusBarSegment } from './status-bar'
-export { default, StatusBar } from './status-bar'
+export { StatusBar } from './status-bar'

apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx

@@ -8,7 +8,7 @@ export interface StatusBarSegment {
   timestamp: string
 }
 
-export function StatusBar({
+function StatusBarInner({
   segments,
   selectedSegmentIndices,
   onSegmentClick,
@@ -127,4 +127,45 @@ export function StatusBar({
   )
 }
 
-export default memo(StatusBar)
+/**
+ * Custom equality function for StatusBar memo.
+ * Performs structural comparison of segments array to avoid re-renders
+ * when poll data returns new object references with identical content.
+ */
+function areStatusBarPropsEqual(
+  prev: Parameters<typeof StatusBarInner>[0],
+  next: Parameters<typeof StatusBarInner>[0]
+): boolean {
+  if (prev.workflowId !== next.workflowId) return false
+  if (prev.segmentDurationMs !== next.segmentDurationMs) return false
+  if (prev.preferBelow !== next.preferBelow) return false
+
+  if (prev.selectedSegmentIndices !== next.selectedSegmentIndices) {
+    if (!prev.selectedSegmentIndices || !next.selectedSegmentIndices) return false
+    if (prev.selectedSegmentIndices.length !== next.selectedSegmentIndices.length) return false
+    for (let i = 0; i < prev.selectedSegmentIndices.length; i++) {
+      if (prev.selectedSegmentIndices[i] !== next.selectedSegmentIndices[i]) return false
+    }
+  }
+
+  if (prev.segments !== next.segments) {
+    if (prev.segments.length !== next.segments.length) return false
+    for (let i = 0; i < prev.segments.length; i++) {
+      const ps = prev.segments[i]
+      const ns = next.segments[i]
+      if (
+        ps.successRate !== ns.successRate ||
+        ps.hasExecutions !== ns.hasExecutions ||
+        ps.totalExecutions !== ns.totalExecutions ||
+        ps.successfulExecutions !== ns.successfulExecutions ||
+        ps.timestamp !== ns.timestamp
+      ) {
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
+export const StatusBar = memo(StatusBarInner, areStatusBarPropsEqual)

apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/index.ts

@@ -1,2 +1,2 @@
 export type { WorkflowExecutionItem } from './workflows-list'
-export { default, WorkflowsList } from './workflows-list'
+export { WorkflowsList } from './workflows-list'

apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx

@@ -14,7 +14,7 @@ export interface WorkflowExecutionItem {
   overallSuccessRate: number
 }
 
-export function WorkflowsList({
+function WorkflowsListInner({
   filteredExecutions,
   expandedWorkflowId,
   onToggleWorkflow,
@@ -103,7 +103,7 @@ export function WorkflowsList({
                     <StatusBar
                       segments={workflow.segments}
                       selectedSegmentIndices={selectedSegments[workflow.workflowId] || null}
-                      onSegmentClick={onSegmentClick as any}
+                      onSegmentClick={onSegmentClick}
                       workflowId={workflow.workflowId}
                       segmentDurationMs={segmentDurationMs}
                       preferBelow={idx < 2}
@@ -124,4 +124,4 @@ export function WorkflowsList({
   )
 }
 
-export default memo(WorkflowsList)
+export const WorkflowsList = memo(WorkflowsListInner)

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Loader2 } from 'lucide-react'
 import { Skeleton } from '@/components/ui/skeleton'
 import { formatLatency } from '@/app/workspace/[workspaceId]/logs/utils'
@@ -141,10 +141,10 @@ function toWorkflowExecution(wf: WorkflowStats): WorkflowExecution {
   }
 }
 
-export default function Dashboard({ stats, isLoading, error }: DashboardProps) {
+function DashboardInner({ stats, isLoading, error }: DashboardProps) {
   const [selectedSegments, setSelectedSegments] = useState<Record<string, number[]>>({})
   const [lastAnchorIndices, setLastAnchorIndices] = useState<Record<string, number>>({})
-  const barsAreaRef = useRef<HTMLDivElement | null>(null)
+  const lastAnchorIndicesRef = useRef<Record<string, number>>({})
 
   const { workflowIds, searchQuery, toggleWorkflowId, timeRange } = useFilterStore()
 
@@ -152,20 +152,79 @@ export default function Dashboard({ stats, isLoading, error }: DashboardProps) {
 
   const expandedWorkflowId = workflowIds.length === 1 ? workflowIds[0] : null
 
-  const { executions, aggregateSegments, segmentMs } = useMemo(() => {
+  const { rawExecutions, aggregateSegments, segmentMs } = useMemo(() => {
     if (!stats) {
-      return { executions: [], aggregateSegments: [], segmentMs: 0 }
+      return { rawExecutions: [], aggregateSegments: [], segmentMs: 0 }
     }
 
-    const workflowExecutions = stats.workflows.map(toWorkflowExecution)
-
     return {
-      executions: workflowExecutions,
+      rawExecutions: stats.workflows.map(toWorkflowExecution),
       aggregateSegments: stats.aggregateSegments,
       segmentMs: stats.segmentMs,
     }
   }, [stats])
 
+  /**
+   * Stabilize execution objects: reuse previous references for workflows
+   * whose segment data hasn't structurally changed between polls.
+   * This prevents cascading re-renders through WorkflowsList → StatusBar.
+   */
+  const prevExecutionsRef = useRef<WorkflowExecution[]>([])
+
+  const executions = useMemo(() => {
+    const prevMap = new Map(prevExecutionsRef.current.map((e) => [e.workflowId, e]))
+    let anyChanged = false
+
+    const result = rawExecutions.map((exec) => {
+      const prev = prevMap.get(exec.workflowId)
+      if (!prev) {
+        anyChanged = true
+        return exec
+      }
+      if (
+        prev.overallSuccessRate !== exec.overallSuccessRate ||
+        prev.workflowName !== exec.workflowName ||
+        prev.segments.length !== exec.segments.length
+      ) {
+        anyChanged = true
+        return exec
+      }
+
+      for (let i = 0; i < prev.segments.length; i++) {
+        const ps = prev.segments[i]
+        const ns = exec.segments[i]
+        if (
+          ps.totalExecutions !== ns.totalExecutions ||
+          ps.successfulExecutions !== ns.successfulExecutions ||
+          ps.timestamp !== ns.timestamp ||
+          ps.avgDurationMs !== ns.avgDurationMs ||
+          ps.p50Ms !== ns.p50Ms ||
+          ps.p90Ms !== ns.p90Ms ||
+          ps.p99Ms !== ns.p99Ms
+        ) {
+          anyChanged = true
+          return exec
+        }
+      }
+
+      return prev
+    })
+
+    if (
+      !anyChanged &&
+      result.length === prevExecutionsRef.current.length &&
+      result.every((r, i) => r === prevExecutionsRef.current[i])
+    ) {
+      return prevExecutionsRef.current
+    }
+
+    return result
+  }, [rawExecutions])
+
+  useEffect(() => {
+    prevExecutionsRef.current = executions
+  }, [executions])
+
   const lastExecutionByWorkflow = useMemo(() => {
     const map = new Map<string, number>()
     for (const wf of executions) {
@@ -312,6 +371,10 @@ export default function Dashboard({ stats, isLoading, error }: DashboardProps) {
     [toggleWorkflowId]
   )
 
+  useEffect(() => {
+    lastAnchorIndicesRef.current = lastAnchorIndices
+  }, [lastAnchorIndices])
+
   /**
    * Handles segment click for selecting time segments.
    * @param workflowId - The workflow containing the segment
@@ -361,7 +424,7 @@ export default function Dashboard({ stats, isLoading, error }: DashboardProps) {
       } else if (mode === 'range') {
         setSelectedSegments((prev) => {
           const currentSegments = prev[workflowId] || []
-          const anchor = lastAnchorIndices[workflowId] ?? segmentIndex
+          const anchor = lastAnchorIndicesRef.current[workflowId] ?? segmentIndex
           const [start, end] =
             anchor < segmentIndex ? [anchor, segmentIndex] : [segmentIndex, anchor]
           const range = Array.from({ length: end - start + 1 }, (_, i) => start + i)
@@ -370,12 +433,12 @@ export default function Dashboard({ stats, isLoading, error }: DashboardProps) {
         })
       }
     },
-    [lastAnchorIndices]
+    []
   )
 
   useEffect(() => {
-    setSelectedSegments({})
+    setSelectedSegments((prev) => (Object.keys(prev).length > 0 ? {} : prev))
-    setLastAnchorIndices({})
+    setLastAnchorIndices((prev) => (Object.keys(prev).length > 0 ? {} : prev))
   }, [stats, timeRange, workflowIds, searchQuery])
 
   if (isLoading) {
@@ -493,7 +556,7 @@ export default function Dashboard({ stats, isLoading, error }: DashboardProps) {
         </div>
       </div>
 
-      <div className='min-h-0 flex-1 overflow-hidden' ref={barsAreaRef}>
+      <div className='min-h-0 flex-1 overflow-hidden'>
         <WorkflowsList
           filteredExecutions={filteredExecutions as WorkflowExecution[]}
           expandedWorkflowId={expandedWorkflowId}
@@ -507,3 +570,5 @@ export default function Dashboard({ stats, isLoading, error }: DashboardProps) {
     </div>
   )
 }
+
+export default memo(DashboardInner)

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -43,11 +43,12 @@ import { useLogDetailsUIStore } from '@/stores/logs/store'
 /**
  * Workflow Output section with code viewer, copy, search, and context menu functionality
  */
-function WorkflowOutputSection({ output }: { output: Record<string, unknown> }) {
+const WorkflowOutputSection = memo(
+  function WorkflowOutputSection({ output }: { output: Record<string, unknown> }) {
     const contentRef = useRef<HTMLDivElement>(null)
     const [copied, setCopied] = useState(false)
+    const copyTimerRef = useRef<number | null>(null)
 
-  // Context menu state
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
     const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
 
@@ -81,10 +82,17 @@ function WorkflowOutputSection({ output }: { output: Record<string, unknown> })
     const handleCopy = useCallback(() => {
       navigator.clipboard.writeText(jsonString)
       setCopied(true)
-    setTimeout(() => setCopied(false), 1500)
+      if (copyTimerRef.current !== null) window.clearTimeout(copyTimerRef.current)
+      copyTimerRef.current = window.setTimeout(() => setCopied(false), 1500)
       closeContextMenu()
     }, [jsonString, closeContextMenu])
 
+    useEffect(() => {
+      return () => {
+        if (copyTimerRef.current !== null) window.clearTimeout(copyTimerRef.current)
+      }
+    }, [])
+
     const handleSearch = useCallback(() => {
       activateSearch()
       closeContextMenu()
@@ -185,7 +193,12 @@ function WorkflowOutputSection({ output }: { output: Record<string, unknown> })
             >
               <ArrowDown className='h-[12px] w-[12px]' />
             </Button>
-          <Button variant='ghost' className='!p-1' onClick={closeSearch} aria-label='Close search'>
+            <Button
+              variant='ghost'
+              className='!p-1'
+              onClick={closeSearch}
+              aria-label='Close search'
+            >
               <X className='h-[12px] w-[12px]' />
             </Button>
           </div>
@@ -220,7 +233,10 @@ function WorkflowOutputSection({ output }: { output: Record<string, unknown> })
           )}
       </div>
     )
-}
+  },
+  (prev, next) =>
+    prev.output === next.output || JSON.stringify(prev.output) === JSON.stringify(next.output)
+)
 
 interface LogDetailsProps {
   /** The log to display details for */
@@ -278,7 +294,6 @@ export const LogDetails = memo(function LogDetails({
     return isWorkflowExecutionLog && log?.cost
   }, [log, isWorkflowExecutionLog])
 
-  // Extract and clean the workflow final output (recursively remove hidden keys for cleaner display)
   const workflowOutput = useMemo(() => {
     const executionData = log?.executionData as
       | { finalOutput?: Record<string, unknown> }

apps/sim/app/workspace/[workspaceId]/logs/components/log-row-context-menu/log-row-context-menu.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import type { RefObject } from 'react'
+import { memo } from 'react'
 import {
   Popover,
   PopoverAnchor,
@@ -29,7 +30,7 @@ interface LogRowContextMenuProps {
  * Context menu for log rows.
  * Provides quick actions for copying data, navigation, and filtering.
  */
-export function LogRowContextMenu({
+export const LogRowContextMenu = memo(function LogRowContextMenu({
   isOpen,
   position,
   menuRef,
@@ -121,4 +122,4 @@ export function LogRowContextMenu({
       </PopoverContent>
     </Popover>
   )
-}
+})

apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx

@@ -24,6 +24,7 @@ interface LogRowProps {
   log: WorkflowLog
   isSelected: boolean
   onClick: (log: WorkflowLog) => void
+  onHover?: (log: WorkflowLog) => void
   onContextMenu?: (e: React.MouseEvent, log: WorkflowLog) => void
   selectedRowRef: React.RefObject<HTMLTableRowElement | null> | null
 }
@@ -33,7 +34,14 @@ interface LogRowProps {
  * Uses shallow comparison for the log object.
  */
 const LogRow = memo(
-  function LogRow({ log, isSelected, onClick, onContextMenu, selectedRowRef }: LogRowProps) {
+  function LogRow({
+    log,
+    isSelected,
+    onClick,
+    onHover,
+    onContextMenu,
+    selectedRowRef,
+  }: LogRowProps) {
     const formattedDate = useMemo(() => formatDate(log.createdAt), [log.createdAt])
     const isDeletedWorkflow = !log.workflow?.id && !log.workflowId
     const workflowName = isDeletedWorkflow
@@ -43,6 +51,8 @@ const LogRow = memo(
 
     const handleClick = useCallback(() => onClick(log), [onClick, log])
 
+    const handleMouseEnter = useCallback(() => onHover?.(log), [onHover, log])
+
     const handleContextMenu = useCallback(
       (e: React.MouseEvent) => {
         if (onContextMenu) {
@@ -61,6 +71,7 @@ const LogRow = memo(
           isSelected && 'bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'
         )}
         onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
         onContextMenu={handleContextMenu}
       >
         <div className='flex flex-1 items-center'>
@@ -142,7 +153,8 @@ const LogRow = memo(
       prevProps.log.id === nextProps.log.id &&
       prevProps.log.duration === nextProps.log.duration &&
       prevProps.log.status === nextProps.log.status &&
-      prevProps.isSelected === nextProps.isSelected
+      prevProps.isSelected === nextProps.isSelected &&
+      prevProps.onHover === nextProps.onHover
     )
   }
 )
@@ -151,6 +163,7 @@ interface RowProps {
   logs: WorkflowLog[]
   selectedLogId: string | null
   onLogClick: (log: WorkflowLog) => void
+  onLogHover?: (log: WorkflowLog) => void
   onLogContextMenu?: (e: React.MouseEvent, log: WorkflowLog) => void
   selectedRowRef: React.RefObject<HTMLTableRowElement | null>
   isFetchingNextPage: boolean
@@ -167,6 +180,7 @@ function Row({
   logs,
   selectedLogId,
   onLogClick,
+  onLogHover,
   onLogContextMenu,
   selectedRowRef,
   isFetchingNextPage,
@@ -198,6 +212,7 @@ function Row({
         log={log}
         isSelected={isSelected}
         onClick={onLogClick}
+        onHover={onLogHover}
         onContextMenu={onLogContextMenu}
         selectedRowRef={isSelected ? selectedRowRef : null}
       />
@@ -209,6 +224,7 @@ export interface LogsListProps {
   logs: WorkflowLog[]
   selectedLogId: string | null
   onLogClick: (log: WorkflowLog) => void
+  onLogHover?: (log: WorkflowLog) => void
   onLogContextMenu?: (e: React.MouseEvent, log: WorkflowLog) => void
   selectedRowRef: React.RefObject<HTMLTableRowElement | null>
   hasNextPage: boolean
@@ -227,6 +243,7 @@ export function LogsList({
   logs,
   selectedLogId,
   onLogClick,
+  onLogHover,
   onLogContextMenu,
   selectedRowRef,
   hasNextPage,
@@ -272,6 +289,7 @@ export function LogsList({
       logs,
       selectedLogId,
       onLogClick,
+      onLogHover,
       onLogContextMenu,
       selectedRowRef,
       isFetchingNextPage,
@@ -281,6 +299,7 @@ export function LogsList({
       logs,
       selectedLogId,
       onLogClick,
+      onLogHover,
       onLogContextMenu,
       selectedRowRef,
       isFetchingNextPage,

apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { Plus, X } from 'lucide-react'
 import {
@@ -113,7 +113,7 @@ function formatAlertConfigLabel(config: {
   }
 }
 
-export function NotificationSettings({
+export const NotificationSettings = memo(function NotificationSettings({
   workspaceId,
   open,
   onOpenChange,
@@ -144,7 +144,7 @@ export function NotificationSettings({
     slackChannelId: '',
     slackChannelName: '',
     slackAccountId: '',
-    useAlertRule: false,
+
     alertRule: 'none' as AlertRule,
     consecutiveFailures: 3,
     failureRatePercent: 50,
@@ -212,7 +212,7 @@ export function NotificationSettings({
       slackChannelId: '',
       slackChannelName: '',
       slackAccountId: '',
-      useAlertRule: false,
+
       alertRule: 'none',
       consecutiveFailures: 3,
       failureRatePercent: 50,
@@ -484,7 +484,6 @@ export function NotificationSettings({
       slackChannelId: subscription.slackConfig?.channelId || '',
       slackChannelName: subscription.slackConfig?.channelName || '',
       slackAccountId: subscription.slackConfig?.accountId || '',
-      useAlertRule: !!subscription.alertConfig,
       alertRule: subscription.alertConfig?.rule || 'none',
       consecutiveFailures: subscription.alertConfig?.consecutiveFailures || 3,
       failureRatePercent: subscription.alertConfig?.failureRatePercent || 50,
@@ -1289,4 +1288,4 @@ export function NotificationSettings({
       </Modal>
     </>
   )
-}
+})

apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo, useState } from 'react'
+import { memo, useCallback, useMemo, useState } from 'react'
 import { ArrowUp, Bell, Library, MoreHorizontal, RefreshCw } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
@@ -149,7 +149,7 @@ function getTriggerIcon(
  * @param props - The component props
  * @returns The complete logs toolbar
  */
-export function LogsToolbar({
+export const LogsToolbar = memo(function LogsToolbar({
   viewMode,
   onViewModeChange,
   isRefreshing,
@@ -749,4 +749,4 @@ export function LogsToolbar({
       </div>
     </div>
   )
-}
+})

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

@@ -1,6 +1,7 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
 import { Loader2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { cn } from '@/lib/core/utils/cn'
@@ -10,12 +11,17 @@ import {
   hasActiveFilters,
 } from '@/lib/logs/filters'
 import { parseQuery, queryToApiParams } from '@/lib/logs/query-parser'
+import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useFolders } from '@/hooks/queries/folders'
-import { useDashboardStats, useLogDetail, useLogsList } from '@/hooks/queries/logs'
+import {
+  prefetchLogDetail,
+  useDashboardStats,
+  useLogDetail,
+  useLogsList,
+} from '@/hooks/queries/logs'
 import { useDebounce } from '@/hooks/use-debounce'
 import { useFilterStore } from '@/stores/logs/filters/store'
 import type { WorkflowLog } from '@/stores/logs/filters/types'
-import { useUserPermissionsContext } from '../providers/workspace-permissions-provider'
 import {
   Dashboard,
   ExecutionSnapshot,
@@ -30,6 +36,38 @@ import { LOG_COLUMN_ORDER, LOG_COLUMNS } from './utils'
 const LOGS_PER_PAGE = 50 as const
 const REFRESH_SPINNER_DURATION_MS = 1000 as const
 
+interface LogSelectionState {
+  selectedLogId: string | null
+  isSidebarOpen: boolean
+}
+
+type LogSelectionAction =
+  | { type: 'TOGGLE_LOG'; logId: string }
+  | { type: 'SELECT_LOG'; logId: string }
+  | { type: 'CLOSE_SIDEBAR' }
+  | { type: 'TOGGLE_SIDEBAR' }
+
+function logSelectionReducer(
+  state: LogSelectionState,
+  action: LogSelectionAction
+): LogSelectionState {
+  switch (action.type) {
+    case 'TOGGLE_LOG':
+      if (state.selectedLogId === action.logId && state.isSidebarOpen) {
+        return { selectedLogId: null, isSidebarOpen: false }
+      }
+      return { selectedLogId: action.logId, isSidebarOpen: true }
+    case 'SELECT_LOG':
+      return { ...state, selectedLogId: action.logId }
+    case 'CLOSE_SIDEBAR':
+      return { selectedLogId: null, isSidebarOpen: false }
+    case 'TOGGLE_SIDEBAR':
+      return state.selectedLogId ? { ...state, isSidebarOpen: !state.isSidebarOpen } : state
+    default:
+      return state
+  }
+}
+
 /**
  * Logs page component displaying workflow execution history.
  * Supports filtering, search, live updates, and detailed log inspection.
@@ -60,11 +98,13 @@ export default function Logs() {
     setWorkspaceId(workspaceId)
   }, [workspaceId, setWorkspaceId])
 
-  const [selectedLogId, setSelectedLogId] = useState<string | null>(null)
+  const [{ selectedLogId, isSidebarOpen }, dispatch] = useReducer(logSelectionReducer, {
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
+    selectedLogId: null,
+    isSidebarOpen: false,
+  })
   const selectedRowRef = useRef<HTMLTableRowElement | null>(null)
   const loaderRef = useRef<HTMLDivElement>(null)
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
+
   const isInitialized = useRef<boolean>(false)
 
   const [searchQuery, setSearchQuery] = useState('')
@@ -82,6 +122,13 @@ export default function Logs() {
   const [isVisuallyRefreshing, setIsVisuallyRefreshing] = useState(false)
   const [isExporting, setIsExporting] = useState(false)
   const isSearchOpenRef = useRef<boolean>(false)
+  const refreshTimersRef = useRef(new Set<number>())
+  const logsRef = useRef<WorkflowLog[]>([])
+  const selectedLogIndexRef = useRef(-1)
+  const selectedLogIdRef = useRef<string | null>(null)
+  const logsRefetchRef = useRef<() => void>(() => {})
+  const activeLogRefetchRef = useRef<() => void>(() => {})
+  const logsQueryRef = useRef({ isFetching: false, hasNextPage: false, fetchNextPage: () => {} })
   const [isNotificationSettingsOpen, setIsNotificationSettingsOpen] = useState(false)
   const userPermissions = useUserPermissionsContext()
 
@@ -94,8 +141,19 @@ export default function Logs() {
   const [previewLogId, setPreviewLogId] = useState<string | null>(null)
 
   const activeLogId = isPreviewOpen ? previewLogId : selectedLogId
+  const queryClient = useQueryClient()
+
+  const detailRefetchInterval = useCallback(
+    (query: { state: { data?: WorkflowLog } }) => {
+      if (!isLive) return false
+      const status = query.state.data?.status
+      return status === 'running' || status === 'pending' ? 3000 : false
+    },
+    [isLive]
+  )
+
   const activeLogQuery = useLogDetail(activeLogId ?? undefined, {
-    refetchInterval: isLive ? 3000 : false,
+    refetchInterval: detailRefetchInterval,
   })
 
   const logFilters = useMemo(
@@ -154,42 +212,67 @@ export default function Logs() {
     return { ...selectedLogFromList, ...activeLogQuery.data }
   }, [selectedLogFromList, activeLogQuery.data, isPreviewOpen])
 
+  const handleLogHover = useCallback(
+    (log: WorkflowLog) => {
+      prefetchLogDetail(queryClient, log.id)
+    },
+    [queryClient]
+  )
+
   useFolders(workspaceId)
 
+  useEffect(() => {
+    logsRef.current = logs
+  }, [logs])
+  useEffect(() => {
+    selectedLogIndexRef.current = selectedLogIndex
+  }, [selectedLogIndex])
+  useEffect(() => {
+    selectedLogIdRef.current = selectedLogId
+  }, [selectedLogId])
+  logsRefetchRef.current = logsQuery.refetch
+  activeLogRefetchRef.current = activeLogQuery.refetch
+  logsQueryRef.current = {
+    isFetching: logsQuery.isFetching,
+    hasNextPage: logsQuery.hasNextPage ?? false,
+    fetchNextPage: logsQuery.fetchNextPage,
+  }
+
+  useEffect(() => {
+    const timers = refreshTimersRef.current
+    return () => {
+      timers.forEach((id) => window.clearTimeout(id))
+      timers.clear()
+    }
+  }, [])
+
   useEffect(() => {
     if (isInitialized.current) {
       setStoreSearchQuery(debouncedSearchQuery)
     }
   }, [debouncedSearchQuery, setStoreSearchQuery])
 
-  const handleLogClick = useCallback(
+  const handleLogClick = useCallback((log: WorkflowLog) => {
-    (log: WorkflowLog) => {
+    dispatch({ type: 'TOGGLE_LOG', logId: log.id })
-      if (selectedLogId === log.id && isSidebarOpen) {
+  }, [])
-        setIsSidebarOpen(false)
-        setSelectedLogId(null)
-        return
-      }
-      setSelectedLogId(log.id)
-      setIsSidebarOpen(true)
-    },
-    [selectedLogId, isSidebarOpen]
-  )
 
   const handleNavigateNext = useCallback(() => {
-    if (selectedLogIndex < logs.length - 1) {
+    const idx = selectedLogIndexRef.current
-      setSelectedLogId(logs[selectedLogIndex + 1].id)
+    const currentLogs = logsRef.current
+    if (idx < currentLogs.length - 1) {
+      dispatch({ type: 'SELECT_LOG', logId: currentLogs[idx + 1].id })
     }
-  }, [selectedLogIndex, logs])
+  }, [])
 
   const handleNavigatePrev = useCallback(() => {
-    if (selectedLogIndex > 0) {
+    const idx = selectedLogIndexRef.current
-      setSelectedLogId(logs[selectedLogIndex - 1].id)
+    if (idx > 0) {
+      dispatch({ type: 'SELECT_LOG', logId: logsRef.current[idx - 1].id })
     }
-  }, [selectedLogIndex, logs])
+  }, [])
 
   const handleCloseSidebar = useCallback(() => {
-    setIsSidebarOpen(false)
+    dispatch({ type: 'CLOSE_SIDEBAR' })
-    setSelectedLogId(null)
   }, [])
 
   const handleLogContextMenu = useCallback((e: React.MouseEvent, log: WorkflowLog) => {
@@ -260,26 +343,34 @@ export default function Logs() {
 
   const handleRefresh = useCallback(() => {
     setIsVisuallyRefreshing(true)
-    setTimeout(() => setIsVisuallyRefreshing(false), REFRESH_SPINNER_DURATION_MS)
+    const timerId = window.setTimeout(() => {
-    logsQuery.refetch()
+      setIsVisuallyRefreshing(false)
-    if (selectedLogId) {
+      refreshTimersRef.current.delete(timerId)
-      activeLogQuery.refetch()
+    }, REFRESH_SPINNER_DURATION_MS)
+    refreshTimersRef.current.add(timerId)
+    logsRefetchRef.current()
+    if (selectedLogIdRef.current) {
+      activeLogRefetchRef.current()
     }
-  }, [logsQuery, activeLogQuery, selectedLogId])
+  }, [])
 
   const handleToggleLive = useCallback(() => {
-    const newIsLive = !isLive
+    setIsLive((prev) => {
-    setIsLive(newIsLive)
+      if (!prev) {
-
-    if (newIsLive) {
         setIsVisuallyRefreshing(true)
-      setTimeout(() => setIsVisuallyRefreshing(false), REFRESH_SPINNER_DURATION_MS)
+        const timerId = window.setTimeout(() => {
-      logsQuery.refetch()
+          setIsVisuallyRefreshing(false)
-      if (selectedLogId) {
+          refreshTimersRef.current.delete(timerId)
-        activeLogQuery.refetch()
+        }, REFRESH_SPINNER_DURATION_MS)
+        refreshTimersRef.current.add(timerId)
+        logsRefetchRef.current()
+        if (selectedLogIdRef.current) {
+          activeLogRefetchRef.current()
         }
       }
-  }, [isLive, logsQuery, activeLogQuery, selectedLogId])
+      return !prev
+    })
+  }, [])
 
   const prevIsFetchingRef = useRef(logsQuery.isFetching)
   useEffect(() => {
@@ -289,11 +380,15 @@ export default function Logs() {
 
     if (isLive && !wasFetching && isFetching) {
       setIsVisuallyRefreshing(true)
-      setTimeout(() => setIsVisuallyRefreshing(false), REFRESH_SPINNER_DURATION_MS)
+      const timerId = window.setTimeout(() => {
+        setIsVisuallyRefreshing(false)
+        refreshTimersRef.current.delete(timerId)
+      }, REFRESH_SPINNER_DURATION_MS)
+      refreshTimersRef.current.add(timerId)
     }
   }, [logsQuery.isFetching, isLive])
 
-  const handleExport = async () => {
+  const handleExport = useCallback(async () => {
     setIsExporting(true)
     try {
       const params = new URLSearchParams()
@@ -327,7 +422,17 @@ export default function Logs() {
     } finally {
       setIsExporting(false)
     }
-  }
+  }, [
+    workspaceId,
+    level,
+    triggers,
+    workflowIds,
+    folderIds,
+    timeRange,
+    startDate,
+    endDate,
+    debouncedSearchQuery,
+  ])
 
   useEffect(() => {
     if (!isInitialized.current) {
@@ -348,41 +453,59 @@ export default function Logs() {
   }, [initializeFromURL])
 
   const loadMoreLogs = useCallback(() => {
-    if (!logsQuery.isFetching && logsQuery.hasNextPage) {
+    const { isFetching, hasNextPage, fetchNextPage } = logsQueryRef.current
-      logsQuery.fetchNextPage()
+    if (!isFetching && hasNextPage) {
+      fetchNextPage()
     }
-  }, [logsQuery])
+  }, [])
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (isSearchOpenRef.current) return
-      if (logs.length === 0) return
+      const currentLogs = logsRef.current
+      const currentIndex = selectedLogIndexRef.current
+      if (currentLogs.length === 0) return
 
-      if (selectedLogIndex === -1 && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+      if (currentIndex === -1 && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
         e.preventDefault()
-        setSelectedLogId(logs[0].id)
+        dispatch({ type: 'SELECT_LOG', logId: currentLogs[0].id })
         return
       }
 
-      if (e.key === 'ArrowUp' && !e.metaKey && !e.ctrlKey && selectedLogIndex > 0) {
+      if (e.key === 'ArrowUp' && !e.metaKey && !e.ctrlKey && currentIndex > 0) {
         e.preventDefault()
         handleNavigatePrev()
       }
 
-      if (e.key === 'ArrowDown' && !e.metaKey && !e.ctrlKey && selectedLogIndex < logs.length - 1) {
+      if (
+        e.key === 'ArrowDown' &&
+        !e.metaKey &&
+        !e.ctrlKey &&
+        currentIndex < currentLogs.length - 1
+      ) {
         e.preventDefault()
         handleNavigateNext()
       }
 
-      if (e.key === 'Enter' && selectedLogId) {
+      if (e.key === 'Enter' && selectedLogIdRef.current) {
         e.preventDefault()
-        setIsSidebarOpen(!isSidebarOpen)
+        dispatch({ type: 'TOGGLE_SIDEBAR' })
       }
     }
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [logs, selectedLogIndex, isSidebarOpen, selectedLogId, handleNavigateNext, handleNavigatePrev])
+  }, [handleNavigateNext, handleNavigatePrev])
+
+  const handleCloseContextMenu = useCallback(() => setContextMenuOpen(false), [])
+  const handleOpenNotificationSettings = useCallback(() => setIsNotificationSettingsOpen(true), [])
+  const handleSearchOpenChange = useCallback((open: boolean) => {
+    isSearchOpenRef.current = open
+  }, [])
+  const handleClosePreview = useCallback(() => {
+    setIsPreviewOpen(false)
+    setPreviewLogId(null)
+  }, [])
 
   const isDashboardView = viewMode === 'dashboard'
 
@@ -402,12 +525,10 @@ export default function Logs() {
               onExport={handleExport}
               canEdit={userPermissions.canEdit}
               hasLogs={logs.length > 0}
-              onOpenNotificationSettings={() => setIsNotificationSettingsOpen(true)}
+              onOpenNotificationSettings={handleOpenNotificationSettings}
               searchQuery={searchQuery}
               onSearchQueryChange={setSearchQuery}
-              onSearchOpenChange={(open: boolean) => {
+              onSearchOpenChange={handleSearchOpenChange}
-                isSearchOpenRef.current = open
-              }}
             />
           </div>
 
@@ -449,7 +570,7 @@ export default function Logs() {
               </div>
 
               {/* Table body - virtualized */}
-              <div className='min-h-0 flex-1 overflow-hidden' ref={scrollContainerRef}>
+              <div className='min-h-0 flex-1 overflow-hidden'>
                 {logsQuery.isLoading && !logsQuery.data ? (
                   <div className='flex h-full items-center justify-center'>
                     <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
@@ -476,6 +597,7 @@ export default function Logs() {
                     logs={logs}
                     selectedLogId={selectedLogId}
                     onLogClick={handleLogClick}
+                    onLogHover={handleLogHover}
                     onLogContextMenu={handleLogContextMenu}
                     selectedRowRef={selectedRowRef}
                     hasNextPage={logsQuery.hasNextPage ?? false}
@@ -511,7 +633,7 @@ export default function Logs() {
         isOpen={contextMenuOpen}
         position={contextMenuPosition}
         menuRef={contextMenuRef}
-        onClose={() => setContextMenuOpen(false)}
+        onClose={handleCloseContextMenu}
         log={contextMenuLog}
         onCopyExecutionId={handleCopyExecutionId}
         onOpenWorkflow={handleOpenWorkflow}
@@ -528,10 +650,7 @@ export default function Logs() {
           traceSpans={activeLogQuery.data.executionData?.traceSpans}
           isModal
           isOpen={isPreviewOpen}
-          onClose={() => {
+          onClose={handleClosePreview}
-            setIsPreviewOpen(false)
-            setPreviewLogId(null)
-          }}
         />
       )}
     </div>

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx

@@ -223,7 +223,12 @@ function resolveToolsDisplay(
  * - Resolves tool names from block registry
  * - Shows '-' for other selector types that need hydration
  */
-function SubBlockRow({ title, value, subBlock, rawValue }: SubBlockRowProps) {
+const SubBlockRow = memo(function SubBlockRow({
+  title,
+  value,
+  subBlock,
+  rawValue,
+}: SubBlockRowProps) {
   const isPasswordField = subBlock?.password === true
   const maskedValue = isPasswordField && value && value !== '-' ? '•••' : null
 
@@ -255,7 +260,7 @@ function SubBlockRow({ title, value, subBlock, rawValue }: SubBlockRowProps) {
       )}
     </div>
   )
-}
+})
 
 /**
  * Preview block component for workflow visualization.

apps/sim/components/emcn/components/code/code.tsx

@@ -1008,7 +1008,7 @@ const VirtualizedViewerInner = memo(function VirtualizedViewerInner({
  * Non-virtualized code viewer implementation.
  * Renders all lines directly without windowing.
  */
-function ViewerInner({
+const ViewerInner = memo(function ViewerInner({
   code,
   showGutter,
   language,
@@ -1181,7 +1181,7 @@ function ViewerInner({
       </Content>
     </Container>
   )
-}
+})
 
 /**
  * Readonly code viewer with optional gutter and syntax highlighting.

apps/sim/hooks/queries/logs.ts

@@ -1,4 +1,10 @@
-import { keepPreviousData, useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import {
+  keepPreviousData,
+  type QueryClient,
+  useInfiniteQuery,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
 import { getEndDateFromTimeRange, getStartDateFromTimeRange } from '@/lib/logs/filters'
 import { parseQuery, queryToApiParams } from '@/lib/logs/query-parser'
 import type {
@@ -146,17 +152,45 @@ export function useLogsList(
 
 interface UseLogDetailOptions {
   enabled?: boolean
-  refetchInterval?: number | false
+  refetchInterval?:
+    | number
+    | false
+    | ((query: { state: { data?: WorkflowLog } }) => number | false | undefined)
 }
 
 export function useLogDetail(logId: string | undefined, options?: UseLogDetailOptions) {
+  const queryClient = useQueryClient()
   return useQuery({
     queryKey: logKeys.detail(logId),
     queryFn: () => fetchLogDetail(logId as string),
     enabled: Boolean(logId) && (options?.enabled ?? true),
     refetchInterval: options?.refetchInterval ?? false,
     staleTime: 30 * 1000,
-    placeholderData: keepPreviousData,
+    initialData: () => {
+      if (!logId) return undefined
+      const listQueries = queryClient.getQueriesData<{
+        pages: { logs: WorkflowLog[] }[]
+      }>({
+        queryKey: logKeys.lists(),
+      })
+      for (const [, data] of listQueries) {
+        const match = data?.pages?.flatMap((p) => p.logs).find((l) => l.id === logId)
+        if (match) return match
+      }
+      return undefined
+    },
+    initialDataUpdatedAt: 0,
+  })
+}
+
+/**
+ * Prefetches log detail data on hover for instant panel rendering on click.
+ */
+export function prefetchLogDetail(queryClient: QueryClient, logId: string) {
+  queryClient.prefetchQuery({
+    queryKey: logKeys.detail(logId),
+    queryFn: () => fetchLogDetail(logId),
+    staleTime: 30 * 1000,
   })
 }