improvement(logs): cleanup pass — remove anti-patterns, fix design tokens, simplify state

Author: waleedlatif1

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

@@ -965,13 +965,16 @@ export const TraceView = memo(function TraceView({ traceSpans }: TraceViewProps)
     [normalizedSpans, selectedId]
   )
 
-  const runStatus = useMemo(() => {
-    if (normalizedSpans.length === 0) return 'empty' as const
-    const rootHasError = normalizedSpans.some((span) =>
-      span.type?.toLowerCase() === 'workflow' ? hasUnhandledErrorInTree(span) : hasErrorInTree(span)
-    )
-    return rootHasError ? ('error' as const) : ('success' as const)
-  }, [normalizedSpans])
+  const runStatus =
+    normalizedSpans.length === 0
+      ? ('empty' as const)
+      : normalizedSpans.some((span) =>
+            span.type?.toLowerCase() === 'workflow'
+              ? hasUnhandledErrorInTree(span)
+              : hasErrorInTree(span)
+          )
+        ? ('error' as const)
+        : ('success' as const)
 
   const handleSelect = useCallback((id: string) => setSelectedId(id), [])
 

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

@@ -399,7 +399,7 @@ export const LogDetails = memo(function LogDetails({
 
       <div
         className={cn(
-          'absolute top-0 right-0 bottom-0 z-50 overflow-hidden border-l bg-[var(--bg)] shadow-md transition-transform duration-200 ease-out',
+          'absolute top-0 right-0 bottom-0 z-[var(--z-dropdown)] overflow-hidden border-l bg-[var(--bg)] shadow-md transition-transform duration-200 ease-out',
           isOpen ? 'translate-x-0' : 'translate-x-full'
         )}
         style={{ width: effectiveWidth }}

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

@@ -2,13 +2,19 @@
 
 import { memo } from 'react'
 import {
+  Copy,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Eye,
+  Link,
+  ListFilter,
+  Redo,
+  SquareArrowUpRight,
+  X,
 } from '@/components/emcn'
-import { Copy, Eye, Link, ListFilter, Redo, SquareArrowUpRight, X } from '@/components/emcn/icons'
 import type { WorkflowLog } from '@/stores/logs/filters/types'
 
 interface LogRowContextMenuProps {

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

@@ -10,12 +10,12 @@ import {
   Button,
   Combobox,
   type ComboboxOption,
+  DatePicker,
   Download,
   Library,
   RefreshCw,
   toast,
 } from '@/components/emcn'
-import { DatePicker } from '@/components/emcn/components/date-picker/date-picker'
 import { dollarsToCredits } from '@/lib/billing/credits/conversion'
 import { cn } from '@/lib/core/utils/cn'
 import {
@@ -305,23 +305,17 @@ export default function Logs() {
   const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
   const [contextMenuLog, setContextMenuLog] = useState<WorkflowLog | null>(null)
 
-  const [isPreviewOpen, setIsPreviewOpen] = useState(false)
   const [previewLogId, setPreviewLogId] = useState<string | null>(null)
 
-  const activeLogId = isPreviewOpen ? previewLogId : selectedLogId
+  const activeLogId = previewLogId ?? selectedLogId
   const queryClient = useQueryClient()
 
-  const detailRefetchInterval = useCallback(
-    (query: { state: { data?: WorkflowLog } }) => {
+  const activeLogQuery = useLogDetail(activeLogId ?? undefined, {
+    refetchInterval: (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: detailRefetchInterval,
   })
 
   const logFilters = useMemo(
@@ -399,18 +393,14 @@ export default function Logs() {
     })
   }, [logs, activeSort])
 
-  const selectedLogIndex = useMemo(
-    () => (selectedLogId ? sortedLogs.findIndex((l) => l.id === selectedLogId) : -1),
-    [sortedLogs, selectedLogId]
-  )
+  const selectedLogIndex = selectedLogId ? sortedLogs.findIndex((l) => l.id === selectedLogId) : -1
   const selectedLogFromList = selectedLogIndex >= 0 ? sortedLogs[selectedLogIndex] : null
 
   const selectedLog = useMemo(() => {
     if (!selectedLogFromList) return null
-    if (!activeLogQuery.data || isPreviewOpen || activeLogQuery.isPlaceholderData)
-      return selectedLogFromList
+    if (!activeLogQuery.data || previewLogId !== null) return selectedLogFromList
     return { ...selectedLogFromList, ...activeLogQuery.data }
-  }, [selectedLogFromList, activeLogQuery.data, activeLogQuery.isPlaceholderData, isPreviewOpen])
+  }, [selectedLogFromList, activeLogQuery.data, previewLogId])
 
   const handleLogHover = useCallback(
     (rowId: string) => {
@@ -535,7 +525,6 @@ export default function Logs() {
   const handleOpenPreview = useCallback(() => {
     if (contextMenuLog?.id) {
       setPreviewLogId(contextMenuLog.id)
-      setIsPreviewOpen(true)
     }
   }, [contextMenuLog])
 
@@ -749,10 +738,9 @@ export default function Logs() {
 
   const handleCloseContextMenu = useCallback(() => setContextMenuOpen(false), [])
   const handleOpenNotificationSettings = useCallback(() => setIsNotificationSettingsOpen(true), [])
-  const handleClosePreview = useCallback(() => {
-    setIsPreviewOpen(false)
+  function handleClosePreview() {
     setPreviewLogId(null)
-  }, [])
+  }
 
   const isDashboardView = viewMode === 'dashboard'
 
@@ -812,31 +800,18 @@ export default function Logs() {
     [sortedLogs]
   )
 
-  const sidebarOverlay = useMemo(
-    () => (
-      <LogDetails
-        log={selectedLog}
-        isOpen={effectiveSidebarOpen}
-        onClose={handleCloseSidebar}
-        onNavigateNext={handleNavigateNext}
-        onNavigatePrev={handleNavigatePrev}
-        hasNext={selectedLogIndex < sortedLogs.length - 1}
-        hasPrev={selectedLogIndex > 0}
-        onRetryExecution={handleRetrySidebarExecution}
-        isRetryPending={retryExecution.isPending}
-      />
-    ),
-    [
-      selectedLog,
-      effectiveSidebarOpen,
-      handleCloseSidebar,
-      handleNavigateNext,
-      handleNavigatePrev,
-      handleRetrySidebarExecution,
-      retryExecution.isPending,
-      selectedLogIndex,
-      sortedLogs.length,
-    ]
+  const sidebarOverlay = (
+    <LogDetails
+      log={selectedLog}
+      isOpen={effectiveSidebarOpen}
+      onClose={handleCloseSidebar}
+      onNavigateNext={handleNavigateNext}
+      onNavigatePrev={handleNavigatePrev}
+      hasNext={selectedLogIndex < sortedLogs.length - 1}
+      hasPrev={selectedLogIndex > 0}
+      onRetryExecution={handleRetrySidebarExecution}
+      isRetryPending={retryExecution.isPending}
+    />
   )
 
   const { data: allWorkflows = {} } = useWorkflowMap(workspaceId)
@@ -969,23 +944,17 @@ export default function Logs() {
     getSuggestions,
   })
 
-  const lastExternalSearchValue = useRef(searchQuery)
+  const lastExternalSearchValue = useRef<string | undefined>(undefined)
   useEffect(() => {
-    if (searchQuery !== lastExternalSearchValue.current) {
-      lastExternalSearchValue.current = searchQuery
-      const parsed = parseQuery(searchQuery)
-      initializeFromQuery(parsed.textSearch, parsed.filters)
-    }
+    if (searchQuery === lastExternalSearchValue.current) return
+    const isMount = lastExternalSearchValue.current === undefined
+    lastExternalSearchValue.current = searchQuery
+    // On mount with no initial query, skip the no-op parse
+    if (isMount && !searchQuery) return
+    const parsed = parseQuery(searchQuery)
+    initializeFromQuery(parsed.textSearch, parsed.filters)
   }, [searchQuery, initializeFromQuery])
 
-  useEffect(() => {
-    if (searchQuery) {
-      const parsed = parseQuery(searchQuery)
-      initializeFromQuery(parsed.textSearch, parsed.filters)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
   useEffect(() => {
     if (!isSuggestionsOpen || highlightedIndex < 0) return
     const container = searchDropdownRef.current
@@ -1247,12 +1216,12 @@ export default function Logs() {
         hasActiveFilters={filtersActive}
       />
 
-      {isPreviewOpen && !activeLogQuery.isPlaceholderData && activeLogQuery.data?.executionId && (
+      {previewLogId !== null && activeLogQuery.data?.executionId && (
         <ExecutionSnapshot
           executionId={activeLogQuery.data.executionId}
           traceSpans={activeLogQuery.data.executionData?.traceSpans}
           isModal
-          isOpen={isPreviewOpen}
+          isOpen={previewLogId !== null}
           onClose={handleClosePreview}
         />
       )}
@@ -1306,7 +1275,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
   )
 
   const [datePickerOpen, setDatePickerOpen] = useState(false)
-  const [previousTimeRange, setPreviousTimeRange] = useState(timeRange)
+  const previousTimeRangeRef = useRef(timeRange)
   const dateRangeAppliedRef = useRef(false)
   const { data: folders = {} } = useFolderMap(workspaceId)
   const { data: allWorkflowList = [] } = useWorkflows(workspaceId)
@@ -1397,7 +1366,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
 
   const handleTimeRangeChange = (val: string) => {
     if (val === 'Custom range') {
-      setPreviousTimeRange(timeRange)
+      previousTimeRangeRef.current = timeRange
       setDatePickerOpen(true)
     } else {
       clearDateRange()
@@ -1413,7 +1382,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
 
   const handleDatePickerCancel = () => {
     if (timeRange === 'Custom range' && !startDate) {
-      setTimeRange(previousTimeRange)
+      setTimeRange(previousTimeRangeRef.current)
     }
     setDatePickerOpen(false)
   }
@@ -1596,10 +1565,12 @@ function SuggestionButton({
   showCategory?: boolean
 }) {
   return (
-    <button
+    <Button
+      type='button'
+      variant='ghost'
       data-index={index}
       className={cn(
-        'w-full rounded-md px-3 py-2 text-left transition-colors hover-hover:bg-[var(--surface-5)]',
+        'h-auto w-full justify-start rounded-md px-3 py-2 text-left transition-colors hover-hover:bg-[var(--surface-5)]',
         highlighted && 'bg-[var(--surface-5)]'
       )}
       onMouseEnter={() => onHover(index)}
@@ -1608,7 +1579,7 @@ function SuggestionButton({
         onSelect(suggestion)
       }}
     >
-      <div className='flex items-center justify-between gap-3'>
+      <div className='flex w-full items-center justify-between gap-3'>
         <div className='min-w-0 flex-1 truncate text-small'>{suggestion.label}</div>
         {showCategory && suggestion.value !== suggestion.label && (
           <div className='shrink-0 font-mono text-[var(--text-muted)] text-xs'>
@@ -1621,6 +1592,6 @@ function SuggestionButton({
           <div className='shrink-0 text-[var(--text-muted)] text-xs'>{suggestion.value}</div>
         )}
       </div>
-    </button>
+    </Button>
   )
 }