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({})
-    setLastAnchorIndices({})
+    setSelectedSegments((prev) => (Object.keys(prev).length > 0 ? {} : prev))
+    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,184 +43,200 @@ 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 contentRef = useRef<HTMLDivElement>(null)
-  const [copied, setCopied] = useState(false)
+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 })
+    const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
+    const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
 
-  const {
-    isSearchActive,
-    searchQuery,
-    setSearchQuery,
-    matchCount,
-    currentMatchIndex,
-    activateSearch,
-    closeSearch,
-    goToNextMatch,
-    goToPreviousMatch,
-    handleMatchCountChange,
-    searchInputRef,
-  } = useCodeViewerFeatures({ contentRef })
+    const {
+      isSearchActive,
+      searchQuery,
+      setSearchQuery,
+      matchCount,
+      currentMatchIndex,
+      activateSearch,
+      closeSearch,
+      goToNextMatch,
+      goToPreviousMatch,
+      handleMatchCountChange,
+      searchInputRef,
+    } = useCodeViewerFeatures({ contentRef })
 
-  const jsonString = useMemo(() => JSON.stringify(output, null, 2), [output])
+    const jsonString = useMemo(() => JSON.stringify(output, null, 2), [output])
 
-  const handleContextMenu = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setContextMenuPosition({ x: e.clientX, y: e.clientY })
-    setIsContextMenuOpen(true)
-  }, [])
+    const handleContextMenu = useCallback((e: React.MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setContextMenuPosition({ x: e.clientX, y: e.clientY })
+      setIsContextMenuOpen(true)
+    }, [])
 
-  const closeContextMenu = useCallback(() => {
-    setIsContextMenuOpen(false)
-  }, [])
+    const closeContextMenu = useCallback(() => {
+      setIsContextMenuOpen(false)
+    }, [])
 
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(jsonString)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 1500)
-    closeContextMenu()
-  }, [jsonString, closeContextMenu])
+    const handleCopy = useCallback(() => {
+      navigator.clipboard.writeText(jsonString)
+      setCopied(true)
+      if (copyTimerRef.current !== null) window.clearTimeout(copyTimerRef.current)
+      copyTimerRef.current = window.setTimeout(() => setCopied(false), 1500)
+      closeContextMenu()
+    }, [jsonString, closeContextMenu])
 
-  const handleSearch = useCallback(() => {
-    activateSearch()
-    closeContextMenu()
-  }, [activateSearch, closeContextMenu])
+    useEffect(() => {
+      return () => {
+        if (copyTimerRef.current !== null) window.clearTimeout(copyTimerRef.current)
+      }
+    }, [])
 
-  return (
-    <div className='relative flex min-w-0 flex-col overflow-hidden'>
-      <div ref={contentRef} onContextMenu={handleContextMenu} className='relative'>
-        <Code.Viewer
-          code={jsonString}
-          language='json'
-          className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
-          wrapText
-          searchQuery={isSearchActive ? searchQuery : undefined}
-          currentMatchIndex={currentMatchIndex}
-          onMatchCountChange={handleMatchCountChange}
-        />
-        {/* Glass action buttons overlay */}
-        {!isSearchActive && (
-          <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  type='button'
-                  variant='default'
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    handleCopy()
-                  }}
-                  className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
-                >
-                  {copied ? (
-                    <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
-                  ) : (
-                    <Clipboard className='h-[10px] w-[10px]' />
-                  )}
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top'>{copied ? 'Copied' : 'Copy'}</Tooltip.Content>
-            </Tooltip.Root>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  type='button'
-                  variant='default'
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    activateSearch()
-                  }}
-                  className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
-                >
-                  <Search className='h-[10px] w-[10px]' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top'>Search</Tooltip.Content>
-            </Tooltip.Root>
+    const handleSearch = useCallback(() => {
+      activateSearch()
+      closeContextMenu()
+    }, [activateSearch, closeContextMenu])
+
+    return (
+      <div className='relative flex min-w-0 flex-col overflow-hidden'>
+        <div ref={contentRef} onContextMenu={handleContextMenu} className='relative'>
+          <Code.Viewer
+            code={jsonString}
+            language='json'
+            className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+            wrapText
+            searchQuery={isSearchActive ? searchQuery : undefined}
+            currentMatchIndex={currentMatchIndex}
+            onMatchCountChange={handleMatchCountChange}
+          />
+          {/* Glass action buttons overlay */}
+          {!isSearchActive && (
+            <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    type='button'
+                    variant='default'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleCopy()
+                    }}
+                    className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                  >
+                    {copied ? (
+                      <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
+                    ) : (
+                      <Clipboard className='h-[10px] w-[10px]' />
+                    )}
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>{copied ? 'Copied' : 'Copy'}</Tooltip.Content>
+              </Tooltip.Root>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    type='button'
+                    variant='default'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      activateSearch()
+                    }}
+                    className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                  >
+                    <Search className='h-[10px] w-[10px]' />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top'>Search</Tooltip.Content>
+              </Tooltip.Root>
+            </div>
+          )}
+        </div>
+
+        {/* Search Overlay */}
+        {isSearchActive && (
+          <div
+            className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-[6px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-1)] px-[6px] shadow-sm'
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Input
+              ref={searchInputRef}
+              type='text'
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder='Search...'
+              className='mr-[2px] h-[23px] w-[94px] text-[12px]'
+            />
+            <span
+              className={cn(
+                'min-w-[45px] text-center text-[11px]',
+                matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
+              )}
+            >
+              {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : '0/0'}
+            </span>
+            <Button
+              variant='ghost'
+              className='!p-1'
+              onClick={goToPreviousMatch}
+              disabled={matchCount === 0}
+              aria-label='Previous match'
+            >
+              <ArrowUp className='h-[12px] w-[12px]' />
+            </Button>
+            <Button
+              variant='ghost'
+              className='!p-1'
+              onClick={goToNextMatch}
+              disabled={matchCount === 0}
+              aria-label='Next match'
+            >
+              <ArrowDown className='h-[12px] w-[12px]' />
+            </Button>
+            <Button
+              variant='ghost'
+              className='!p-1'
+              onClick={closeSearch}
+              aria-label='Close search'
+            >
+              <X className='h-[12px] w-[12px]' />
+            </Button>
           </div>
         )}
+
+        {/* Context Menu - rendered in portal to avoid transform/overflow clipping */}
+        {typeof document !== 'undefined' &&
+          createPortal(
+            <Popover
+              open={isContextMenuOpen}
+              onOpenChange={closeContextMenu}
+              variant='secondary'
+              size='sm'
+              colorScheme='inverted'
+            >
+              <PopoverAnchor
+                style={{
+                  position: 'fixed',
+                  left: `${contextMenuPosition.x}px`,
+                  top: `${contextMenuPosition.y}px`,
+                  width: '1px',
+                  height: '1px',
+                }}
+              />
+              <PopoverContent align='start' side='bottom' sideOffset={4}>
+                <PopoverItem onClick={handleCopy}>Copy</PopoverItem>
+                <PopoverDivider />
+                <PopoverItem onClick={handleSearch}>Search</PopoverItem>
+              </PopoverContent>
+            </Popover>,
+            document.body
+          )}
       </div>
-
-      {/* Search Overlay */}
-      {isSearchActive && (
-        <div
-          className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-[6px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-1)] px-[6px] shadow-sm'
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Input
-            ref={searchInputRef}
-            type='text'
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder='Search...'
-            className='mr-[2px] h-[23px] w-[94px] text-[12px]'
-          />
-          <span
-            className={cn(
-              'min-w-[45px] text-center text-[11px]',
-              matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
-            )}
-          >
-            {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : '0/0'}
-          </span>
-          <Button
-            variant='ghost'
-            className='!p-1'
-            onClick={goToPreviousMatch}
-            disabled={matchCount === 0}
-            aria-label='Previous match'
-          >
-            <ArrowUp className='h-[12px] w-[12px]' />
-          </Button>
-          <Button
-            variant='ghost'
-            className='!p-1'
-            onClick={goToNextMatch}
-            disabled={matchCount === 0}
-            aria-label='Next match'
-          >
-            <ArrowDown className='h-[12px] w-[12px]' />
-          </Button>
-          <Button variant='ghost' className='!p-1' onClick={closeSearch} aria-label='Close search'>
-            <X className='h-[12px] w-[12px]' />
-          </Button>
-        </div>
-      )}
-
-      {/* Context Menu - rendered in portal to avoid transform/overflow clipping */}
-      {typeof document !== 'undefined' &&
-        createPortal(
-          <Popover
-            open={isContextMenuOpen}
-            onOpenChange={closeContextMenu}
-            variant='secondary'
-            size='sm'
-            colorScheme='inverted'
-          >
-            <PopoverAnchor
-              style={{
-                position: 'fixed',
-                left: `${contextMenuPosition.x}px`,
-                top: `${contextMenuPosition.y}px`,
-                width: '1px',
-                height: '1px',
-              }}
-            />
-            <PopoverContent align='start' side='bottom' sideOffset={4}>
-              <PopoverItem onClick={handleCopy}>Copy</PopoverItem>
-              <PopoverDivider />
-              <PopoverItem onClick={handleSearch}>Search</PopoverItem>
-            </PopoverContent>
-          </Popover>,
-          document.body
-        )}
-    </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 [isSidebarOpen, setIsSidebarOpen] = useState(false)
+  const [{ selectedLogId, isSidebarOpen }, dispatch] = useReducer(logSelectionReducer, {
+    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(
-    (log: WorkflowLog) => {
-      if (selectedLogId === log.id && isSidebarOpen) {
-        setIsSidebarOpen(false)
-        setSelectedLogId(null)
-        return
-      }
-      setSelectedLogId(log.id)
-      setIsSidebarOpen(true)
-    },
-    [selectedLogId, isSidebarOpen]
-  )
+  const handleLogClick = useCallback((log: WorkflowLog) => {
+    dispatch({ type: 'TOGGLE_LOG', logId: log.id })
+  }, [])
 
   const handleNavigateNext = useCallback(() => {
-    if (selectedLogIndex < logs.length - 1) {
-      setSelectedLogId(logs[selectedLogIndex + 1].id)
+    const idx = selectedLogIndexRef.current
+    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) {
-      setSelectedLogId(logs[selectedLogIndex - 1].id)
+    const idx = selectedLogIndexRef.current
+    if (idx > 0) {
+      dispatch({ type: 'SELECT_LOG', logId: logsRef.current[idx - 1].id })
     }
-  }, [selectedLogIndex, logs])
+  }, [])
 
   const handleCloseSidebar = useCallback(() => {
-    setIsSidebarOpen(false)
-    setSelectedLogId(null)
+    dispatch({ type: 'CLOSE_SIDEBAR' })
   }, [])
 
   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)
-    logsQuery.refetch()
-    if (selectedLogId) {
-      activeLogQuery.refetch()
+    const timerId = window.setTimeout(() => {
+      setIsVisuallyRefreshing(false)
+      refreshTimersRef.current.delete(timerId)
+    }, 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(newIsLive)
-
-    if (newIsLive) {
-      setIsVisuallyRefreshing(true)
-      setTimeout(() => setIsVisuallyRefreshing(false), REFRESH_SPINNER_DURATION_MS)
-      logsQuery.refetch()
-      if (selectedLogId) {
-        activeLogQuery.refetch()
+    setIsLive((prev) => {
+      if (!prev) {
+        setIsVisuallyRefreshing(true)
+        const timerId = window.setTimeout(() => {
+          setIsVisuallyRefreshing(false)
+          refreshTimersRef.current.delete(timerId)
+        }, 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) {
-      logsQuery.fetchNextPage()
+    const { isFetching, hasNextPage, fetchNextPage } = logsQueryRef.current
+    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) => {
-                isSearchOpenRef.current = open
-              }}
+              onSearchOpenChange={handleSearchOpenChange}
             />
           </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={() => {
-            setIsPreviewOpen(false)
-            setPreviewLogId(null)
-          }}
+          onClose={handleClosePreview}
         />
       )}
     </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx

@@ -239,7 +239,12 @@ export const ComboBox = memo(function ComboBox({
    */
   const defaultOptionValue = useMemo(() => {
     if (defaultValue !== undefined) {
-      return defaultValue
+      // Validate that the default value exists in the available (filtered) options
+      const defaultInOptions = evaluatedOptions.find((opt) => getOptionValue(opt) === defaultValue)
+      if (defaultInOptions) {
+        return defaultValue
+      }
+      // Default not available (e.g. provider disabled) — fall through to other fallbacks
     }
 
     // For model field, default to claude-sonnet-4-5 if available

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/blocks/blocks/agent.ts

@@ -2,11 +2,10 @@ import { createLogger } from '@sim/logger'
 import { AgentIcon } from '@/components/icons'
 import type { BlockConfig } from '@/blocks/types'
 import { AuthMode } from '@/blocks/types'
-import { getApiKeyCondition } from '@/blocks/utils'
+import { getApiKeyCondition, getModelOptions } from '@/blocks/utils'
 import {
   getBaseModelProviders,
   getMaxTemperature,
-  getProviderIcon,
   getReasoningEffortValuesForModel,
   getThinkingLevelsForModel,
   getVerbosityValuesForModel,
@@ -18,7 +17,6 @@ import {
   providers,
   supportsTemperature,
 } from '@/providers/utils'
-import { useProvidersStore } from '@/stores/providers'
 import type { ToolResponse } from '@/tools/types'
 
 const logger = createLogger('AgentBlock')
@@ -121,21 +119,7 @@ Return ONLY the JSON array.`,
       placeholder: 'Type or select a model...',
       required: true,
       defaultValue: 'claude-sonnet-4-5',
-      options: () => {
-        const providersState = useProvidersStore.getState()
-        const baseModels = providersState.providers.base.models
-        const ollamaModels = providersState.providers.ollama.models
-        const vllmModels = providersState.providers.vllm.models
-        const openrouterModels = providersState.providers.openrouter.models
-        const allModels = Array.from(
-          new Set([...baseModels, ...ollamaModels, ...vllmModels, ...openrouterModels])
-        )
-
-        return allModels.map((model) => {
-          const icon = getProviderIcon(model)
-          return { label: model, id: model, ...(icon && { icon }) }
-        })
-      },
+      options: getModelOptions,
     },
     {
       id: 'vertexCredential',

apps/sim/blocks/blocks/evaluator.ts

@@ -1,10 +1,13 @@
 import { createLogger } from '@sim/logger'
 import { ChartBarIcon } from '@/components/icons'
 import type { BlockConfig, ParamType } from '@/blocks/types'
-import { getProviderCredentialSubBlocks, PROVIDER_CREDENTIAL_INPUTS } from '@/blocks/utils'
+import {
+  getModelOptions,
+  getProviderCredentialSubBlocks,
+  PROVIDER_CREDENTIAL_INPUTS,
+} from '@/blocks/utils'
 import type { ProviderId } from '@/providers/types'
-import { getBaseModelProviders, getProviderIcon } from '@/providers/utils'
-import { useProvidersStore } from '@/stores/providers/store'
+import { getBaseModelProviders } from '@/providers/utils'
 import type { ToolResponse } from '@/tools/types'
 
 const logger = createLogger('EvaluatorBlock')
@@ -175,21 +178,7 @@ export const EvaluatorBlock: BlockConfig<EvaluatorResponse> = {
       placeholder: 'Type or select a model...',
       required: true,
       defaultValue: 'claude-sonnet-4-5',
-      options: () => {
-        const providersState = useProvidersStore.getState()
-        const baseModels = providersState.providers.base.models
-        const ollamaModels = providersState.providers.ollama.models
-        const vllmModels = providersState.providers.vllm.models
-        const openrouterModels = providersState.providers.openrouter.models
-        const allModels = Array.from(
-          new Set([...baseModels, ...ollamaModels, ...vllmModels, ...openrouterModels])
-        )
-
-        return allModels.map((model) => {
-          const icon = getProviderIcon(model)
-          return { label: model, id: model, ...(icon && { icon }) }
-        })
-      },
+      options: getModelOptions,
     },
     ...getProviderCredentialSubBlocks(),
     {

apps/sim/blocks/blocks/guardrails.ts

@@ -1,8 +1,10 @@
 import { ShieldCheckIcon } from '@/components/icons'
 import type { BlockConfig } from '@/blocks/types'
-import { getProviderCredentialSubBlocks, PROVIDER_CREDENTIAL_INPUTS } from '@/blocks/utils'
-import { getProviderIcon } from '@/providers/utils'
-import { useProvidersStore } from '@/stores/providers/store'
+import {
+  getModelOptions,
+  getProviderCredentialSubBlocks,
+  PROVIDER_CREDENTIAL_INPUTS,
+} from '@/blocks/utils'
 import type { ToolResponse } from '@/tools/types'
 
 export interface GuardrailsResponse extends ToolResponse {
@@ -111,21 +113,7 @@ Return ONLY the regex pattern - no explanations, no quotes, no forward slashes,
       type: 'combobox',
       placeholder: 'Type or select a model...',
       required: true,
-      options: () => {
-        const providersState = useProvidersStore.getState()
-        const baseModels = providersState.providers.base.models
-        const ollamaModels = providersState.providers.ollama.models
-        const vllmModels = providersState.providers.vllm.models
-        const openrouterModels = providersState.providers.openrouter.models
-        const allModels = Array.from(
-          new Set([...baseModels, ...ollamaModels, ...vllmModels, ...openrouterModels])
-        )
-
-        return allModels.map((model) => {
-          const icon = getProviderIcon(model)
-          return { label: model, id: model, ...(icon && { icon }) }
-        })
-      },
+      options: getModelOptions,
       condition: {
         field: 'validationType',
         value: ['hallucination'],

apps/sim/blocks/blocks/router.ts

@@ -1,9 +1,12 @@
 import { ConnectIcon } from '@/components/icons'
 import { AuthMode, type BlockConfig } from '@/blocks/types'
-import { getProviderCredentialSubBlocks, PROVIDER_CREDENTIAL_INPUTS } from '@/blocks/utils'
+import {
+  getModelOptions,
+  getProviderCredentialSubBlocks,
+  PROVIDER_CREDENTIAL_INPUTS,
+} from '@/blocks/utils'
 import type { ProviderId } from '@/providers/types'
-import { getBaseModelProviders, getProviderIcon } from '@/providers/utils'
-import { useProvidersStore } from '@/stores/providers'
+import { getBaseModelProviders } from '@/providers/utils'
 import type { ToolResponse } from '@/tools/types'
 
 interface RouterResponse extends ToolResponse {
@@ -134,25 +137,6 @@ Respond with a JSON object containing:
 - reasoning: A brief explanation (1-2 sentences) of why you chose this route`
 }
 
-/**
- * Helper to get model options for both router versions.
- */
-const getModelOptions = () => {
-  const providersState = useProvidersStore.getState()
-  const baseModels = providersState.providers.base.models
-  const ollamaModels = providersState.providers.ollama.models
-  const vllmModels = providersState.providers.vllm.models
-  const openrouterModels = providersState.providers.openrouter.models
-  const allModels = Array.from(
-    new Set([...baseModels, ...ollamaModels, ...vllmModels, ...openrouterModels])
-  )
-
-  return allModels.map((model) => {
-    const icon = getProviderIcon(model)
-    return { label: model, id: model, ...(icon && { icon }) }
-  })
-}
-
 /**
  * Legacy Router Block (block-based routing).
  * Hidden from toolbar but still supported for existing workflows.

apps/sim/blocks/blocks/translate.ts

@@ -1,8 +1,10 @@
 import { TranslateIcon } from '@/components/icons'
 import { AuthMode, type BlockConfig } from '@/blocks/types'
-import { getProviderCredentialSubBlocks, PROVIDER_CREDENTIAL_INPUTS } from '@/blocks/utils'
-import { getProviderIcon } from '@/providers/utils'
-import { useProvidersStore } from '@/stores/providers/store'
+import {
+  getModelOptions,
+  getProviderCredentialSubBlocks,
+  PROVIDER_CREDENTIAL_INPUTS,
+} from '@/blocks/utils'
 
 const getTranslationPrompt = (targetLanguage: string) =>
   `Translate the following text into ${targetLanguage || 'English'}. Output ONLY the translated text with no additional commentary, explanations, or notes.`
@@ -38,18 +40,7 @@ export const TranslateBlock: BlockConfig = {
       type: 'combobox',
       placeholder: 'Type or select a model...',
       required: true,
-      options: () => {
-        const providersState = useProvidersStore.getState()
-        const baseModels = providersState.providers.base.models
-        const ollamaModels = providersState.providers.ollama.models
-        const openrouterModels = providersState.providers.openrouter.models
-        const allModels = Array.from(new Set([...baseModels, ...ollamaModels, ...openrouterModels]))
-
-        return allModels.map((model) => {
-          const icon = getProviderIcon(model)
-          return { label: model, id: model, ...(icon && { icon }) }
-        })
-      },
+      options: getModelOptions,
     },
     ...getProviderCredentialSubBlocks(),
     {

apps/sim/blocks/utils.ts

@@ -1,8 +1,32 @@
 import { isHosted } from '@/lib/core/config/feature-flags'
 import type { BlockOutput, OutputFieldDefinition, SubBlockConfig } from '@/blocks/types'
-import { getHostedModels, getProviderFromModel, providers } from '@/providers/utils'
+import {
+  getHostedModels,
+  getProviderFromModel,
+  getProviderIcon,
+  providers,
+} from '@/providers/utils'
 import { useProvidersStore } from '@/stores/providers/store'
 
+/**
+ * Returns model options for combobox subblocks, combining all provider sources.
+ */
+export function getModelOptions() {
+  const providersState = useProvidersStore.getState()
+  const baseModels = providersState.providers.base.models
+  const ollamaModels = providersState.providers.ollama.models
+  const vllmModels = providersState.providers.vllm.models
+  const openrouterModels = providersState.providers.openrouter.models
+  const allModels = Array.from(
+    new Set([...baseModels, ...ollamaModels, ...vllmModels, ...openrouterModels])
+  )
+
+  return allModels.map((model) => {
+    const icon = getProviderIcon(model)
+    return { label: model, id: model, ...(icon && { icon }) }
+  })
+}
+
 /**
  * Checks if a field is included in the dependsOn config.
  * Handles both simple array format and object format with all/any fields.

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,
   })
 }
 

apps/sim/providers/vertex/index.ts

@@ -30,8 +30,8 @@ export const vertexProvider: ProviderConfig = {
   executeRequest: async (
     request: ProviderRequest
   ): Promise<ProviderResponse | StreamingExecution> => {
-    const vertexProject = env.VERTEX_PROJECT || request.vertexProject
-    const vertexLocation = env.VERTEX_LOCATION || request.vertexLocation || 'us-central1'
+    const vertexProject = request.vertexProject || env.VERTEX_PROJECT
+    const vertexLocation = request.vertexLocation || env.VERTEX_LOCATION || 'us-central1'
 
     if (!vertexProject) {
       throw new Error(