@alepha/ui 0.15.3 → 0.15.5

package/src/admin/components/jobs/AdminJobs.tsx

@@ -1,10 +1,37 @@
-import { DataTable, Flex, Text } from "@alepha/ui";
-import { Badge } from "@mantine/core";
 import {
-  IconCheck,
+  ActionButton,
+  DataTable,
+  Flex,
+  Text,
+  useDialog,
+  useToast,
+} from "@alepha/ui";
+import {
+  ActionIcon,
+  Badge,
+  Box,
+  Card,
+  Group,
+  Paper,
+  Progress,
+  RingProgress,
+  ScrollArea,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Tabs,
+  ThemeIcon,
+  Tooltip,
+  useMantineTheme,
+} from "@mantine/core";
+import {
+  IconAlertTriangle,
+  IconCircleCheck,
+  IconCircleX,
   IconClock,
   IconPlayerPlay,
-  IconX,
+  IconRefresh,
+  IconTerminal2,
 } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
 import {
@@ -14,10 +41,418 @@ import {
 } from "alepha/api/jobs";
 import { useClient } from "alepha/react";
 import { useI18n } from "alepha/react/i18n";
+import { useCallback, useEffect, useState } from "react";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface JobStats {
+  name: string;
+  total: number;
+  completed: number;
+  failed: number;
+  running: number;
+  avgDuration: number;
+  lastRun?: Date;
+  lastStatus?: "COMPLETED" | "FAILED" | "STARTED";
+}
+
+interface LogEntry {
+  level: string;
+  message: string;
+  service: string;
+  module: string;
+  timestamp: number;
+  data?: unknown;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Utilities
+// ─────────────────────────────────────────────────────────────────────────────
+
+const formatDuration = (
+  start: Date | string,
+  end?: Date | string | null,
+): string => {
+  const startTime = new Date(start).getTime();
+  const endTime = end ? new Date(end).getTime() : Date.now();
+  const duration = endTime - startTime;
+
+  if (duration < 1000) return `${duration}ms`;
+  if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;
+  if (duration < 3600000)
+    return `${Math.floor(duration / 60000)}m ${Math.floor((duration % 60000) / 1000)}s`;
+  return `${Math.floor(duration / 3600000)}h ${Math.floor((duration % 3600000) / 60000)}m`;
+};
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case "COMPLETED":
+      return "teal";
+    case "FAILED":
+      return "red";
+    case "STARTED":
+      return "blue";
+    default:
+      return "gray";
+  }
+};
+
+const getStatusIcon = (status: string, size = 14) => {
+  switch (status) {
+    case "COMPLETED":
+      return <IconCircleCheck size={size} />;
+    case "FAILED":
+      return <IconCircleX size={size} />;
+    case "STARTED":
+      return <IconPlayerPlay size={size} />;
+    default:
+      return <IconClock size={size} />;
+  }
+};
+
+const getLogLevelColor = (level: string) => {
+  switch (level) {
+    case "ERROR":
+      return "red";
+    case "WARN":
+      return "yellow";
+    case "INFO":
+      return "blue";
+    case "DEBUG":
+      return "gray";
+    case "TRACE":
+      return "dimmed";
+    default:
+      return "dimmed";
+  }
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Job Card Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface JobCardProps {
+  job: string;
+  stats?: JobStats;
+  isTriggering: boolean;
+  onTrigger: (job: string) => void;
+  onSelect: (job: string) => void;
+  isSelected: boolean;
+}
+
+const JobCard = (props: JobCardProps) => {
+  const { job, stats, isTriggering, onTrigger, onSelect, isSelected } = props;
+  const theme = useMantineTheme();
+
+  const successRate = stats
+    ? stats.total > 0
+      ? (stats.completed / stats.total) * 100
+      : 0
+    : 0;
+
+  return (
+    <Card
+      p="md"
+      radius="md"
+      withBorder
+      onClick={() => onSelect(job)}
+      style={{
+        cursor: "pointer",
+        borderColor: isSelected ? theme.colors.blue[6] : undefined,
+        backgroundColor: isSelected
+          ? "var(--mantine-color-blue-light)"
+          : undefined,
+        transition: "all 150ms ease",
+      }}
+    >
+      <Group justify="space-between" mb="xs">
+        <Group gap="xs">
+          <ThemeIcon
+            size="sm"
+            radius="sm"
+            variant="light"
+            color={
+              stats?.lastStatus ? getStatusColor(stats.lastStatus) : "gray"
+            }
+          >
+            <IconTerminal2 size={14} />
+          </ThemeIcon>
+          <Text size="sm" fw={600} ff="monospace">
+            {job}
+          </Text>
+        </Group>
+        <Tooltip label="Trigger job manually" position="left">
+          <ActionIcon
+            size="sm"
+            variant="light"
+            color="blue"
+            loading={isTriggering}
+            onClick={(e) => {
+              e.stopPropagation();
+              onTrigger(job);
+            }}
+          >
+            <IconPlayerPlay size={12} />
+          </ActionIcon>
+        </Tooltip>
+      </Group>
+
+      {stats ? (
+        <>
+          <Group gap="lg" mb="xs">
+            <Box>
+              <Text size="xs" c="dimmed" tt="uppercase" fw={500}>
+                Total
+              </Text>
+              <Text size="lg" fw={700} ff="monospace">
+                {stats.total}
+              </Text>
+            </Box>
+            <Box>
+              <Text size="xs" c="dimmed" tt="uppercase" fw={500}>
+                Success
+              </Text>
+              <Text size="lg" fw={700} ff="monospace" c="teal">
+                {stats.completed}
+              </Text>
+            </Box>
+            <Box>
+              <Text size="xs" c="dimmed" tt="uppercase" fw={500}>
+                Failed
+              </Text>
+              <Text size="lg" fw={700} ff="monospace" c="red">
+                {stats.failed}
+              </Text>
+            </Box>
+          </Group>
+
+          <Progress.Root size="sm" radius="xs">
+            <Tooltip label={`${stats.completed} completed`}>
+              <Progress.Section
+                value={(stats.completed / Math.max(stats.total, 1)) * 100}
+                color="teal"
+              />
+            </Tooltip>
+            <Tooltip label={`${stats.failed} failed`}>
+              <Progress.Section
+                value={(stats.failed / Math.max(stats.total, 1)) * 100}
+                color="red"
+              />
+            </Tooltip>
+            <Tooltip label={`${stats.running} running`}>
+              <Progress.Section
+                value={(stats.running / Math.max(stats.total, 1)) * 100}
+                color="blue"
+              />
+            </Tooltip>
+          </Progress.Root>
+
+          {stats.lastRun && (
+            <Text size="xs" c="dimmed" mt="xs">
+              Last run: {formatDuration(stats.lastRun, new Date())} ago
+            </Text>
+          )}
+        </>
+      ) : (
+        <Stack gap="xs">
+          <Skeleton height={8} radius="xl" />
+          <Skeleton height={8} width="70%" radius="xl" />
+        </Stack>
+      )}
+    </Card>
+  );
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Execution Log Viewer
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ExecutionLogViewerProps {
+  logs?: LogEntry[];
+  error?: string | null;
+}
+
+const ExecutionLogViewer = (props: ExecutionLogViewerProps) => {
+  const { logs, error } = props;
+
+  if (!logs?.length && !error) {
+    return (
+      <Box p="md">
+        <Text size="sm" c="dimmed" ta="center">
+          No logs available
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <ScrollArea h={300} type="auto">
+      <Box
+        p="md"
+        style={{
+          fontFamily: "var(--mantine-font-family-monospace)",
+          fontSize: "12px",
+          lineHeight: 1.6,
+        }}
+      >
+        {error && (
+          <Paper p="sm" mb="md" bg="var(--mantine-color-red-light)" radius="sm">
+            <Group gap="xs" align="flex-start">
+              <IconAlertTriangle
+                size={14}
+                color="var(--mantine-color-red-filled)"
+              />
+              <Text
+                size="xs"
+                c="red"
+                style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}
+              >
+                {error}
+              </Text>
+            </Group>
+          </Paper>
+        )}
+
+        {logs?.map((log, index) => (
+          <Group key={index} gap="sm" align="flex-start" mb={4} wrap="nowrap">
+            <Text size="xs" c="dimmed" style={{ minWidth: 80, flexShrink: 0 }}>
+              {new Date(log.timestamp).toLocaleTimeString()}
+            </Text>
+            <Badge
+              size="xs"
+              variant="light"
+              color={getLogLevelColor(log.level)}
+              style={{ minWidth: 50 }}
+            >
+              {log.level}
+            </Badge>
+            <Text size="xs" c="dimmed" style={{ minWidth: 100, flexShrink: 0 }}>
+              {log.module}
+            </Text>
+            <Text size="xs" style={{ wordBreak: "break-word" }}>
+              {log.message}
+            </Text>
+          </Group>
+        ))}
+      </Box>
+    </ScrollArea>
+  );
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Component
+// ─────────────────────────────────────────────────────────────────────────────
 
 const AdminJobs = () => {
   const client = useClient<AdminJobController>();
   const { l } = useI18n();
+  const toast = useToast();
+  const dialog = useDialog();
+
+  const [jobs, setJobs] = useState<string[]>([]);
+  const [jobStats, setJobStats] = useState<Map<string, JobStats>>(new Map());
+  const [selectedJob, setSelectedJob] = useState<string | null>(null);
+  const [triggeringJobs, setTriggeringJobs] = useState<Set<string>>(new Set());
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<string | null>("overview");
+
+  // Load jobs list
+  useEffect(() => {
+    const loadJobs = async () => {
+      try {
+        const jobList = await client.getJobs();
+        setJobs(jobList);
+
+        // Load stats for each job
+        const statsMap = new Map<string, JobStats>();
+        for (const job of jobList) {
+          const executions = await client.getJobExecutions({
+            query: { job, size: 100 },
+          });
+
+          const items = executions.content || [];
+          const completed = items.filter(
+            (e: JobExecutionEntity) => e.status === "COMPLETED",
+          ).length;
+          const failed = items.filter(
+            (e: JobExecutionEntity) => e.status === "FAILED",
+          ).length;
+          const running = items.filter(
+            (e: JobExecutionEntity) => e.status === "STARTED",
+          ).length;
+
+          const completedItems = items.filter(
+            (e: JobExecutionEntity) => e.status === "COMPLETED" && e.finishedAt,
+          );
+          const avgDuration =
+            completedItems.length > 0
+              ? completedItems.reduce((acc: number, e: JobExecutionEntity) => {
+                  const duration =
+                    new Date(e.finishedAt!).getTime() -
+                    new Date(e.createdAt).getTime();
+                  return acc + duration;
+                }, 0) / completedItems.length
+              : 0;
+
+          const lastItem = items[0];
+
+          statsMap.set(job, {
+            name: job,
+            total: items.length,
+            completed,
+            failed,
+            running,
+            avgDuration,
+            lastRun: lastItem?.createdAt
+              ? new Date(lastItem.createdAt)
+              : undefined,
+            lastStatus: lastItem?.status as JobStats["lastStatus"],
+          });
+        }
+
+        setJobStats(statsMap);
+      } catch (error) {
+        toast.danger("Failed to load jobs");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadJobs();
+  }, [refreshKey]);
+
+  const handleTriggerJob = useCallback(
+    async (job: string) => {
+      const confirmed = await dialog.confirm({
+        title: "Trigger Job",
+        message: `Are you sure you want to trigger "${job}" manually?`,
+        confirmLabel: "Trigger",
+        confirmColor: "blue",
+      });
+
+      if (!confirmed) return;
+
+      setTriggeringJobs((prev) => new Set(prev).add(job));
+
+      try {
+        await client.triggerJob({ body: { name: job } });
+        toast.success(`Job "${job}" triggered successfully`);
+        setRefreshKey((k) => k + 1);
+      } catch (error) {
+        toast.danger(`Failed to trigger job "${job}"`);
+      } finally {
+        setTriggeringJobs((prev) => {
+          const next = new Set(prev);
+          next.delete(job);
+          return next;
+        });
+      }
+    },
+    [client, dialog, toast],
+  );
 
   const filters = t.object({
     job: t.optional(
@@ -30,127 +465,306 @@ const AdminJobs = () => {
     status: t.optional(t.enum(["STARTED", "FAILED", "COMPLETED"])),
   });
 
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case "COMPLETED":
-        return "green";
-      case "FAILED":
-        return "red";
-      case "STARTED":
-        return "blue";
-      default:
-        return "gray";
-    }
-  };
-
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case "COMPLETED":
-        return <IconCheck size={12} />;
-      case "FAILED":
-        return <IconX size={12} />;
-      case "STARTED":
-        return <IconPlayerPlay size={12} />;
-      default:
-        return <IconClock size={12} />;
-    }
+  // Calculate global stats
+  const globalStats = {
+    total: Array.from(jobStats.values()).reduce((acc, s) => acc + s.total, 0),
+    completed: Array.from(jobStats.values()).reduce(
+      (acc, s) => acc + s.completed,
+      0,
+    ),
+    failed: Array.from(jobStats.values()).reduce((acc, s) => acc + s.failed, 0),
+    running: Array.from(jobStats.values()).reduce(
+      (acc, s) => acc + s.running,
+      0,
+    ),
   };
 
-  const formatDuration = (
-    start: Date | string,
-    end?: Date | string | null,
-  ): string => {
-    const startTime = new Date(start).getTime();
-    const endTime = end ? new Date(end).getTime() : Date.now();
-    const duration = endTime - startTime;
-
-    if (duration < 1000) return `${duration}ms`;
-    if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;
-    return `${Math.floor(duration / 60000)}m ${Math.floor((duration % 60000) / 1000)}s`;
-  };
+  const successRate =
+    globalStats.total > 0
+      ? Math.round((globalStats.completed / globalStats.total) * 100)
+      : 0;
 
   return (
-    <Flex flex={1} direction={"column"}>
-      <DataTable<JobExecutionEntity, typeof filters>
-        submitOnInit
-        defaultSize={10}
-        typeFormProps={{
-          skipSubmitButton: true,
-          columns: 3,
-        }}
-        tableProps={{
-          horizontalSpacing: "xs",
-          verticalSpacing: "xs",
-        }}
-        onFilterChange={(key, _value, form) => {
-          if (key === "job" || key === "status") {
-            return form.submit();
-          }
-        }}
-        filters={filters}
-        items={async (filters) => {
-          const response = await client.getJobExecutions({
-            query: filters,
-          });
+    <Flex flex={1} direction="column" gap="md">
+      {/* Header Stats */}
+      <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="md">
+        <Paper p="md" radius="md" withBorder>
+          <Group justify="space-between">
+            <Box>
+              <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+                Total Jobs
+              </Text>
+              <Text size="xl" fw={700} ff="monospace">
+                {jobs.length}
+              </Text>
+            </Box>
+            <ThemeIcon size="lg" radius="md" variant="light" color="blue">
+              <IconTerminal2 size={20} />
+            </ThemeIcon>
+          </Group>
+        </Paper>
 
-          return response as Page<JobExecutionEntity>;
-        }}
-        columns={{
-          job: {
-            label: "Job",
-            value: (item) => (
-              <Text size="sm" fw={500}>
-                {item.job}
-              </Text>
-            ),
-          },
-          status: {
-            label: "Status",
-            fit: true,
-            value: (item) => (
-              <Badge
-                size="sm"
-                variant="light"
-                color={getStatusColor(item.status)}
-                leftSection={getStatusIcon(item.status)}
+        <Paper p="md" radius="md" withBorder>
+          <Group justify="space-between">
+            <Box>
+              <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+                Executions
+              </Text>
+              <Text size="xl" fw={700} ff="monospace">
+                {globalStats.total}
+              </Text>
+            </Box>
+            <ThemeIcon size="lg" radius="md" variant="light" color="gray">
+              <IconClock size={20} />
+            </ThemeIcon>
+          </Group>
+        </Paper>
+
+        <Paper p="md" radius="md" withBorder>
+          <Group justify="space-between">
+            <Box>
+              <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+                Success Rate
+              </Text>
+              <Text
+                size="xl"
+                fw={700}
+                ff="monospace"
+                c={
+                  successRate >= 90
+                    ? "teal"
+                    : successRate >= 70
+                      ? "yellow"
+                      : "red"
+                }
               >
-                {item.status}
-              </Badge>
-            ),
-          },
-          duration: {
-            label: "Duration",
-            fit: true,
-            value: (item) => (
-              <Text size="xs" c="dimmed" ff="monospace">
-                {formatDuration(item.createdAt, item.finishedAt)}
-              </Text>
-            ),
-          },
-          error: {
-            label: "Error",
-            value: (item) =>
-              item.error ? (
-                <Text size="xs" c="red" lineClamp={1}>
-                  {item.error}
-                </Text>
-              ) : (
-                <Text size="xs" c="dimmed">
-                  -
-                </Text>
-              ),
-          },
-          createdAt: {
-            label: "Started",
-            fit: true,
-            value: (item) => (
-              <Text size="xs" c="dimmed">
-                {l(item.createdAt, { date: "fromNow" })}
-              </Text>
-            ),
-          },
-        }}
-      />
+                {successRate}%
+              </Text>
+            </Box>
+            <RingProgress
+              size={48}
+              thickness={4}
+              roundCaps
+              sections={[
+                {
+                  value: successRate,
+                  color:
+                    successRate >= 90
+                      ? "teal"
+                      : successRate >= 70
+                        ? "yellow"
+                        : "red",
+                },
+              ]}
+            />
+          </Group>
+        </Paper>
+
+        <Paper p="md" radius="md" withBorder>
+          <Group justify="space-between">
+            <Box>
+              <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
+                Running Now
+              </Text>
+              <Text size="xl" fw={700} ff="monospace" c="blue">
+                {globalStats.running}
+              </Text>
+            </Box>
+            <ThemeIcon
+              size="lg"
+              radius="md"
+              variant="light"
+              color={globalStats.running > 0 ? "blue" : "gray"}
+            >
+              <IconPlayerPlay size={20} />
+            </ThemeIcon>
+          </Group>
+        </Paper>
+      </SimpleGrid>
+
+      {/* Tabs */}
+      <Tabs value={activeTab} onChange={setActiveTab}>
+        <Tabs.List>
+          <Tabs.Tab value="overview" leftSection={<IconTerminal2 size={14} />}>
+            Jobs Overview
+          </Tabs.Tab>
+          <Tabs.Tab value="executions" leftSection={<IconClock size={14} />}>
+            Execution History
+          </Tabs.Tab>
+        </Tabs.List>
+
+        <Tabs.Panel value="overview" pt="md">
+          <Group justify="space-between" mb="md">
+            <Text size="sm" c="dimmed">
+              {jobs.length} registered job{jobs.length !== 1 ? "s" : ""}
+            </Text>
+            <ActionButton
+              size="xs"
+              variant="light"
+              leftSection={<IconRefresh size={14} />}
+              onClick={() => setRefreshKey((k) => k + 1)}
+            >
+              Refresh
+            </ActionButton>
+          </Group>
+
+          {loading ? (
+            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+              {[1, 2, 3].map((i) => (
+                <Skeleton key={i} height={150} radius="md" />
+              ))}
+            </SimpleGrid>
+          ) : jobs.length === 0 ? (
+            <Paper p="xl" radius="md" withBorder ta="center">
+              <IconTerminal2 size={48} color="var(--mantine-color-dimmed)" />
+              <Text size="lg" fw={500} mt="md">
+                No jobs registered
+              </Text>
+              <Text size="sm" c="dimmed" mt="xs">
+                Jobs will appear here once they are defined using $job primitive
+              </Text>
+            </Paper>
+          ) : (
+            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+              {jobs.map((job) => (
+                <JobCard
+                  key={job}
+                  job={job}
+                  stats={jobStats.get(job)}
+                  isTriggering={triggeringJobs.has(job)}
+                  onTrigger={handleTriggerJob}
+                  onSelect={setSelectedJob}
+                  isSelected={selectedJob === job}
+                />
+              ))}
+            </SimpleGrid>
+          )}
+        </Tabs.Panel>
+
+        <Tabs.Panel value="executions" pt="md">
+          <DataTable<JobExecutionEntity, typeof filters>
+            key={refreshKey}
+            submitOnInit
+            defaultSize={15}
+            typeFormProps={{
+              skipSubmitButton: true,
+              columns: 3,
+            }}
+            tableProps={{
+              horizontalSpacing: "sm",
+              verticalSpacing: "sm",
+              highlightOnHover: true,
+            }}
+            onFilterChange={(key, _value, form) => {
+              if (key === "job" || key === "status") {
+                return form.submit();
+              }
+            }}
+            filters={filters}
+            items={async (filters) => {
+              const response = await client.getJobExecutions({
+                query: {
+                  ...filters,
+                  job: selectedJob || filters.job,
+                },
+              });
+
+              return response as Page<JobExecutionEntity>;
+            }}
+            columns={{
+              job: {
+                label: "Job",
+                value: (item) => (
+                  <Text size="sm" fw={500} ff="monospace">
+                    {item.job}
+                  </Text>
+                ),
+              },
+              status: {
+                label: "Status",
+                fit: true,
+                value: (item) => (
+                  <Badge
+                    size="sm"
+                    variant="light"
+                    color={getStatusColor(item.status)}
+                    leftSection={getStatusIcon(item.status, 12)}
+                  >
+                    {item.status}
+                  </Badge>
+                ),
+              },
+              duration: {
+                label: "Duration",
+                fit: true,
+                value: (item) => (
+                  <Text size="xs" c="dimmed" ff="monospace">
+                    {formatDuration(item.createdAt, item.finishedAt)}
+                  </Text>
+                ),
+              },
+              logs: {
+                label: "Logs",
+                fit: true,
+                value: (item) => {
+                  const logCount =
+                    (item.logs as LogEntry[] | undefined)?.length || 0;
+                  const errorCount =
+                    (item.logs as LogEntry[] | undefined)?.filter(
+                      (log) => log.level === "ERROR",
+                    ).length || 0;
+
+                  return (
+                    <Group gap={4}>
+                      <Badge size="xs" variant="light" color="gray">
+                        {logCount} logs
+                      </Badge>
+                      {errorCount > 0 && (
+                        <Badge size="xs" variant="light" color="red">
+                          {errorCount} errors
+                        </Badge>
+                      )}
+                    </Group>
+                  );
+                },
+              },
+              error: {
+                label: "Error",
+                value: (item) =>
+                  item.error ? (
+                    <Tooltip label={item.error} multiline w={300}>
+                      <Text size="xs" c="red" lineClamp={1}>
+                        {item.error}
+                      </Text>
+                    </Tooltip>
+                  ) : (
+                    <Text size="xs" c="dimmed">
+                      —
+                    </Text>
+                  ),
+              },
+              createdAt: {
+                label: "Started",
+                fit: true,
+                value: (item) => (
+                  <Text size="xs" c="dimmed">
+                    {l(item.createdAt, { date: "fromNow" })}
+                  </Text>
+                ),
+              },
+            }}
+            panel={(item) => (
+              <Box bg="var(--mantine-color-dark-7)" p={0}>
+                <ExecutionLogViewer
+                  logs={item.logs as LogEntry[] | undefined}
+                  error={item.error}
+                />
+              </Box>
+            )}
+            canPanel={(item) => Boolean(item.logs?.length || item.error)}
+          />
+        </Tabs.Panel>
+      </Tabs>
     </Flex>
   );
 };