fix(logs): final-audit follow-ups — stable tab callback, byExecution invalidation, optimistic detail patch, trace loading state

- Wrap LogDetails -> LogDetailsContent onActiveTabChange in useCallback
  so the child useEffect doesn't refire on every parent render.
- Add logKeys.byExecutionAll() to cancel + retry invalidation so the
  table-embedded sidebar picks up status changes immediately.
- Optimistic write-through to logKeys.detail in useCancelExecution so
  the open sidebar reflects 'cancelling' instantly; rolls back on error.
- Distinguish trace loading from trace-empty: when log.executionData is
  not yet fetched, render "Loading trace…" instead of the empty state.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: waleedlatif1

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { formatDuration } from '@sim/utils/formatting'
 import { ArrowDown, ArrowUp, Check, ChevronUp, Clipboard, Eye, Search, X } from 'lucide-react'
 import { createPortal } from 'react-dom'
@@ -600,12 +600,18 @@ export function LogDetailsContent({ log, onActiveTabChange }: LogDetailsContentP
           >
             {traceSpans?.length ? (
               <TraceView traceSpans={traceSpans} />
-            ) : (
+            ) : log.executionData ? (
               <div className='flex h-full items-center justify-center px-4 text-center'>
                 <span className='font-medium text-[var(--text-tertiary)] text-sm'>
                   No trace data available for this run
                 </span>
               </div>
+            ) : (
+              <div className='flex h-full items-center justify-center px-4 text-center'>
+                <span className='font-medium text-[var(--text-tertiary)] text-sm'>
+                  Loading trace…
+                </span>
+              </div>
             )}
           </SModalTabsContent>
         )}
@@ -667,6 +673,14 @@ export const LogDetails = memo(function LogDetails({
 }: LogDetailsProps) {
   const activeTabRef = useRef<LogDetailsTab>('overview')
 
+  const handleActiveTabChange = useCallback(
+    (tab: LogDetailsTab) => {
+      activeTabRef.current = tab
+      onActiveTabChange?.(tab)
+    },
+    [onActiveTabChange]
+  )
+
   const panelWidth = useLogDetailsUIStore((state) => state.panelWidth)
   const { handleMouseDown } = useLogDetailsResize()
 
@@ -773,13 +787,7 @@ export const LogDetails = memo(function LogDetails({
               </div>
             </div>
 
-            <LogDetailsContent
-              log={log}
-              onActiveTabChange={(tab) => {
-                activeTabRef.current = tab
-                onActiveTabChange?.(tab)
-              }}
-            />
+            <LogDetailsContent log={log} onActiveTabChange={handleActiveTabChange} />
           </div>
         )}
       </div>

apps/sim/hooks/queries/logs.ts

@@ -323,29 +323,47 @@ export function useCancelExecution() {
         queryKey: logKeys.lists(),
       })
 
+      let affectedLogId: string | null = null
       queryClient.setQueriesData<InfiniteData<LogsPage>>({ queryKey: logKeys.lists() }, (old) => {
         if (!old) return old
         return {
           ...old,
           pages: old.pages.map((page) => ({
             ...page,
-            logs: page.logs.map((log) =>
-              log.executionId === executionId ? { ...log, status: 'cancelling' } : log
-            ),
+            logs: page.logs.map((log) => {
+              if (log.executionId !== executionId) return log
+              affectedLogId = log.id
+              return { ...log, status: 'cancelling' }
+            }),
           })),
         }
       })
 
-      return { previousQueries }
+      let previousDetail: WorkflowLog | undefined
+      if (affectedLogId) {
+        previousDetail = queryClient.getQueryData<WorkflowLog>(logKeys.detail(affectedLogId))
+        if (previousDetail) {
+          queryClient.setQueryData<WorkflowLog>(logKeys.detail(affectedLogId), {
+            ...previousDetail,
+            status: 'cancelling',
+          })
+        }
+      }
+
+      return { previousQueries, affectedLogId, previousDetail }
     },
     onError: (_err, _variables, context) => {
       for (const [queryKey, data] of context?.previousQueries ?? []) {
         queryClient.setQueryData(queryKey, data)
       }
+      if (context?.affectedLogId && context.previousDetail !== undefined) {
+        queryClient.setQueryData(logKeys.detail(context.affectedLogId), context.previousDetail)
+      }
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: logKeys.lists() })
       queryClient.invalidateQueries({ queryKey: logKeys.details() })
+      queryClient.invalidateQueries({ queryKey: logKeys.byExecutionAll() })
       queryClient.invalidateQueries({ queryKey: logKeys.stats() })
     },
   })
@@ -375,6 +393,7 @@ export function useRetryExecution() {
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: logKeys.lists() })
       queryClient.invalidateQueries({ queryKey: logKeys.details() })
+      queryClient.invalidateQueries({ queryKey: logKeys.byExecutionAll() })
       queryClient.invalidateQueries({ queryKey: logKeys.stats() })
     },
   })