- {logsQuery.isLoading && !logsQuery.data ? (
-
-
-
- Loading logs...
-
-
- ) : logsQuery.isError ? (
-
-
-
-
- Error: {logsQuery.error?.message || 'Failed to load logs'}
-
-
-
- ) : logs.length === 0 ? (
-
- ) : (
-
- {logs.map((log) => {
- const formattedDate = formatDate(log.createdAt)
- const isSelected = selectedLog?.id === log.id
- const baseLevel = (log.level || 'info').toLowerCase()
- const isError = baseLevel === 'error'
- const isPending = !isError && log.hasPendingPause === true
- const isRunning = !isError && !isPending && log.duration === null
-
- return (
-
handleLogClick(log)}
- >
-
- {/* Date */}
-
- {formattedDate.compactDate}
-
-
- {/* Time */}
-
- {formattedDate.compactTime}
-
-
- {/* Status */}
-
-
-
-
- {/* Workflow */}
-
-
-
- {log.workflow?.name || 'Unknown'}
-
-
-
- {/* Cost */}
-
- {typeof log.cost?.total === 'number'
- ? `$${log.cost.total.toFixed(4)}`
- : '—'}
-
-
- {/* Trigger */}
-
- {log.trigger ? (
-
- ) : (
-
- —
-
- )}
-
-
- {/* Duration */}
-
-
- {formatDuration(log.duration) || '—'}
-
-
-
-
- {/* Resume Link */}
- {isPending &&
- log.executionId &&
- (log.workflow?.id || log.workflowId) && (
-
e.stopPropagation()}
- >
-
-
- )}
-
- )
- })}
-
- {/* Infinite scroll loader */}
- {logsQuery.hasNextPage && (
-
-
- {logsQuery.isFetchingNextPage ? (
- <>
-
- Loading more...
-
- ) : (
- Scroll to load more
- )}
-
-
- )}
-
- )}
+
+ {/* Table container */}
+
+ {/* Table header */}
+
+
+
+ Date
+
+
+ Time
+
+
+ Status
+
+
+ Workflow
+
+
+ Cost
+
+
+ Trigger
+
+
+ Duration
+
- {/* Log Details - rendered inside table container */}
-
0}
- />
+ {/* Table body - scrollable */}
+
+ {logsQuery.isLoading && !logsQuery.data ? (
+
+
+
+ Loading logs...
+
+
+ ) : logsQuery.isError ? (
+
+
+
+
+ Error: {logsQuery.error?.message || 'Failed to load logs'}
+
+
+
+ ) : logs.length === 0 ? (
+
+ ) : (
+
+ {logs.map((log) => {
+ const formattedDate = formatDate(log.createdAt)
+ const isSelected = selectedLog?.id === log.id
+ const baseLevel = (log.level || 'info').toLowerCase()
+ const isError = baseLevel === 'error'
+ const isPending = !isError && log.hasPendingPause === true
+ const isRunning = !isError && !isPending && log.duration === null
+
+ return (
+
handleLogClick(log)}
+ >
+
+ {/* Date */}
+
+ {formattedDate.compactDate}
+
+
+ {/* Time */}
+
+ {formattedDate.compactTime}
+
+
+ {/* Status */}
+
+
+
+
+ {/* Workflow */}
+
+
+
+ {log.workflow?.name || 'Unknown'}
+
+
+
+ {/* Cost */}
+
+ {typeof log.cost?.total === 'number'
+ ? `$${log.cost.total.toFixed(4)}`
+ : '—'}
+
+
+ {/* Trigger */}
+
+ {log.trigger ? (
+
+ ) : (
+
+ —
+
+ )}
+
+
+ {/* Duration */}
+
+
+ {formatDuration(log.duration) || '—'}
+
+
+
+
+ {/* Resume Link */}
+ {isPending && log.executionId && (log.workflow?.id || log.workflowId) && (
+
e.stopPropagation()}
+ >
+
+
+ )}
+
+ )
+ })}
+
+ {/* Infinite scroll loader */}
+ {logsQuery.hasNextPage && (
+
+
+ {logsQuery.isFetchingNextPage ? (
+ <>
+
+ Loading more...
+
+ ) : (
+ Scroll to load more
+ )}
+
+
+ )}
+
+ )}
+
- )}
+
+ {/* Log Details - rendered inside table container */}
+
0}
+ />
+