feat: 定时任务管理(CronJob)全栈完善——删除确认框+主题色+空状态+刷新按钮+toast反馈

- 新增删除确认框（useConfirm variant:destructive），显示任务名称
- 全量主题色替换：bg-slate-800→var(--dg-bg-secondary)、border-slate-700→var(--dg-border)等
- 新增空状态（PackageOpen图标+提示文案），无任务时优雅降级
- 新增刷新按钮（双loading state：首次spinner+手动刷新spin icon）
- toggle操作新增toast成功反馈
- 执行历史空状态优化（History图标+提示）
- 修复Fragment key警告（<>→<Fragment key>）
- 描述为空时显示—占位符

frontend/src/components/automation/CronJobManager.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, Fragment } from 'react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -41,21 +41,25 @@ import {
   XCircle,
   Loader2,
   Terminal,
+  RefreshCw,
+  PackageOpen,
 } from 'lucide-react';
 import { toast } from 'sonner';
 import { cronJobApi, taskExecutionApi } from '@/services/api';
+import { useConfirm } from '@/components/ui/confirm-dialog';
 
 export function CronJobManager() {
   const [searchQuery, setSearchQuery] = useState('');
   const [jobs, setJobs] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [initialLoading, setInitialLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
   const [isFormDialogOpen, setIsFormDialogOpen] = useState(false);
   const [isLogDialogOpen, setIsLogDialogOpen] = useState(false);
   const [executions, setExecutions] = useState<any[]>([]);
   const [executionsLoading, setExecutionsLoading] = useState(false);
   const [expandedExec, setExpandedExec] = useState<number | null>(null);
   const [executingId, setExecutingId] = useState<number | null>(null);
-  // editingId === null 表示新建模式；非 null 表示编辑已有任务
+  // editingId === null 表示新建模式；非 null 表示编辑已有任务 // Logan.Li
   const [editingId, setEditingId] = useState<number | null>(null);
   const [formJob, setFormJob] = useState({
     name: '',
@@ -65,6 +69,8 @@ export function CronJobManager() {
     content: '',
   });
 
+  const _confirm = useConfirm();
+
   const openCreate = () => {
     setEditingId(null);
     setFormJob({ name: '', description: '', cron_expr: '', type: 'command', content: '' });
@@ -83,21 +89,24 @@ export function CronJobManager() {
     setIsFormDialogOpen(true);
   };
 
-  const loadData = async () => {
+  // 加载任务列表（双 loading state：首次全屏 spinner，手动刷新只 spin icon） // Logan.Li
+  const refreshData = useCallback(async () => {
+    setRefreshing(true);
     try {
-      setLoading(true);
       const data = await cronJobApi.getJobs();
       setJobs(data.list || []);
     } catch (error) {
       console.error('Failed to load cron jobs:', error);
+      toast.error('加载失败');
     } finally {
-      setLoading(false);
+      setRefreshing(false);
+      setInitialLoading(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
-    loadData();
-  }, []);
+    refreshData();
+  }, [refreshData]);
 
   const loadExecutions = async () => {
     try {
@@ -147,7 +156,7 @@ export function CronJobManager() {
         );
       default:
         return (
-          <Badge variant="outline" className="border-slate-500/30 text-slate-400 bg-slate-500/10">
+          <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-muted)]">
             从未执行
           </Badge>
         );
@@ -186,7 +195,7 @@ export function CronJobManager() {
         toast.success('任务创建成功');
       }
       setIsFormDialogOpen(false);
-      loadData();
+      refreshData();
     } catch (error) {
       console.error('Failed to save cron job:', error);
       toast.error(editingId !== null ? '更新失败' : '创建失败');
@@ -196,7 +205,8 @@ export function CronJobManager() {
   const handleToggleJob = async (id: any) => {
     try {
       await cronJobApi.toggleJob(id);
-      loadData();
+      toast.success('状态已切换');
+      refreshData();
     } catch (error) {
       console.error('Failed to toggle job:', error);
       toast.error('操作失败');
@@ -213,7 +223,7 @@ export function CronJobManager() {
       } else {
         toast.error('执行失败', { description: (result?.output || '').slice(0, 100) });
       }
-      loadData();
+      refreshData();
     } catch (error) {
       console.error('Failed to execute job:', error);
       toast.error('执行失败');
@@ -222,11 +232,18 @@ export function CronJobManager() {
     }
   };
 
-  const handleDeleteJob = async (id: any) => {
+  // 删除任务（带确认框） // Logan.Li
+  const handleDeleteJob = async (job: any) => {
+    const ok = await _confirm({
+      title: '删除定时任务',
+      description: `确定删除「${job.name}」吗？此操作不可恢复。`,
+      variant: 'destructive',
+    });
+    if (!ok) return;
     try {
-      await cronJobApi.deleteJob(id);
-      toast.success('已删除');
-      loadData();
+      await cronJobApi.deleteJob(job.id);
+      toast.success('任务已删除');
+      refreshData();
     } catch (error) {
       console.error('Failed to delete job:', error);
       toast.error('删除失败');
@@ -238,14 +255,27 @@ export function CronJobManager() {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-slate-100">定时任务</h1>
-          <p className="text-sm text-slate-500 mt-1">Cron 任务管理与执行</p>
+          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">定时任务</h1>
+          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">Cron 任务管理与执行</p>
         </div>
         <div className="flex items-center gap-2">
-          <Button variant="outline" className="border-slate-700 text-slate-300" onClick={openLogDialog}>
+          <Button
+            variant="outline"
+            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
+            onClick={openLogDialog}
+          >
             <History className="h-4 w-4 mr-2" />
             执行历史
           </Button>
+          <Button
+            variant="outline"
+            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
+            onClick={() => refreshData()}
+            disabled={refreshing}
+          >
+            <RefreshCw className={`h-4 w-4 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
+            刷新
+          </Button>
           <Button className="bg-blue-600 hover:bg-blue-700" onClick={openCreate}>
             <Plus className="h-4 w-4 mr-2" />
             新建任务
@@ -255,31 +285,31 @@ export function CronJobManager() {
 
       {/* Stats */}
       <div className="grid grid-cols-4 gap-4">
-        <Card className="bg-slate-800 border-slate-700">
+        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-4">
-            <p className="text-slate-400 text-sm">任务总数</p>
-            <p className="text-2xl font-bold text-slate-100">{jobs.length}</p>
+            <p className="text-[var(--dg-text-secondary)] text-sm">任务总数</p>
+            <p className="text-2xl font-bold text-[var(--dg-text-primary)]">{jobs.length}</p>
           </CardContent>
         </Card>
-        <Card className="bg-slate-800 border-slate-700">
+        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-4">
-            <p className="text-slate-400 text-sm">已启用</p>
+            <p className="text-[var(--dg-text-secondary)] text-sm">已启用</p>
             <p className="text-2xl font-bold text-emerald-400">
               {jobs.filter((j) => j.enabled).length}
             </p>
           </CardContent>
         </Card>
-        <Card className="bg-slate-800 border-slate-700">
+        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-4">
-            <p className="text-slate-400 text-sm">累计成功</p>
+            <p className="text-[var(--dg-text-secondary)] text-sm">累计成功</p>
             <p className="text-2xl font-bold text-emerald-400">
               {jobs.reduce((sum, j) => sum + (j.success_count || 0), 0)}
             </p>
           </CardContent>
         </Card>
-        <Card className="bg-slate-800 border-slate-700">
+        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-4">
-            <p className="text-slate-400 text-sm">累计失败</p>
+            <p className="text-[var(--dg-text-secondary)] text-sm">累计失败</p>
             <p className="text-2xl font-bold text-red-400">
               {jobs.reduce((sum, j) => sum + (j.fail_count || 0), 0)}
             </p>
@@ -290,62 +320,67 @@ export function CronJobManager() {
       {/* Filters */}
       <div className="flex items-center gap-4">
         <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-secondary)]" />
           <Input
             placeholder="搜索任务..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10 bg-slate-800 border-slate-700 text-slate-100"
+            className="pl-10 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
           />
         </div>
       </div>
 
-      {loading ? (
+      {initialLoading ? (
         <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-6 w-6 text-slate-500 animate-spin" />
+          <Loader2 className="h-6 w-6 text-[var(--dg-text-secondary)] animate-spin" />
+        </div>
+      ) : filteredJobs.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-16 text-[var(--dg-text-secondary)]">
+          <PackageOpen className="h-12 w-12 mb-3 opacity-40" />
+          <p className="text-sm">暂无定时任务</p>
         </div>
       ) : null}
 
       {/* Job List */}
       <div className="space-y-3">
         {filteredJobs.map((job) => (
-          <Card key={job.id} className="bg-slate-800 border-slate-700">
+          <Card key={job.id} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
             <CardContent className="p-4">
               <div className="flex items-start justify-between">
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-3 flex-wrap">
-                    <h3 className="font-medium text-slate-100">{job.name}</h3>
+                    <h3 className="font-medium text-[var(--dg-text-primary)]">{job.name}</h3>
                     <Badge
                       variant="outline"
                       className={
                         job.enabled
                           ? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
-                          : 'border-slate-500/30 text-slate-400 bg-slate-500/10'
+                          : 'border-[var(--dg-border)] text-[var(--dg-text-muted)]'
                       }
                     >
                       {job.enabled ? '已启用' : '已禁用'}
                     </Badge>
                     {getStatusBadge(job.last_status)}
-                    <Badge variant="outline" className="border-slate-600 text-slate-400">
+                    <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
                       {job.type === 'script' ? '脚本' : job.type === 'playbook' ? 'Playbook' : '命令'}
                     </Badge>
                   </div>
-                  <p className="text-sm text-slate-400 mt-1">{job.description}</p>
+                  <p className="text-sm text-[var(--dg-text-secondary)] mt-1">{job.description || '—'}</p>
                   <div className="flex items-center gap-4 mt-2 text-sm">
-                    <span className="flex items-center gap-1 text-slate-400">
+                    <span className="flex items-center gap-1 text-[var(--dg-text-secondary)]">
                       <Clock className="h-3 w-3" />
                       {parseCron(job.cron_expr)}
                     </span>
-                    {(job.content || job.script) && (
-                      <span className="flex items-center gap-1 text-slate-400">
+                    {job.content && (
+                      <span className="flex items-center gap-1 text-[var(--dg-text-secondary)]">
                         <Terminal className="h-3 w-3" />
-                        <code className="text-xs bg-slate-900 px-2 py-0.5 rounded truncate max-w-xs">
-                          {job.script ? job.script.name : job.content}
+                        <code className="text-xs bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded truncate max-w-xs">
+                          {job.content}
                         </code>
                       </span>
                     )}
                   </div>
-                  <div className="flex items-center gap-4 mt-2 text-xs text-slate-500">
+                  <div className="flex items-center gap-4 mt-2 text-xs text-[var(--dg-text-muted)]">
                     <span>上次执行: {job.last_run_at ? new Date(job.last_run_at).toLocaleString() : '--'}</span>
                     <span>成功: {job.success_count || 0} / 失败: {job.fail_count || 0}</span>
                     <span>累计: {job.run_count || 0} 次</span>
@@ -370,7 +405,8 @@ export function CronJobManager() {
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="h-8 w-8 text-slate-400 hover:text-blue-400"
+                    className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-blue-400"
+                    title={job.enabled ? '禁用' : '启用'}
                     onClick={() => handleToggleJob(job.id)}
                   >
                     {job.enabled ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
@@ -378,7 +414,7 @@ export function CronJobManager() {
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="h-8 w-8 text-slate-400 hover:text-blue-400"
+                    className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-blue-400"
                     title="编辑"
                     onClick={() => openEdit(job)}
                   >
@@ -387,8 +423,9 @@ export function CronJobManager() {
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="h-8 w-8 text-slate-400 hover:text-red-400"
-                    onClick={() => handleDeleteJob(job.id)}
+                    className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-red-400"
+                    title="删除"
+                    onClick={() => handleDeleteJob(job)}
                   >
                     <Trash2 className="h-4 w-4" />
                   </Button>
@@ -401,66 +438,66 @@ export function CronJobManager() {
 
       {/* Create / Edit Job Dialog (共用) */}
       <Dialog open={isFormDialogOpen} onOpenChange={setIsFormDialogOpen}>
-        <DialogContent className="max-w-2xl bg-slate-900 border-slate-700 text-slate-100">
+        <DialogContent className="max-w-2xl bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
           <DialogHeader>
             <DialogTitle>{editingId !== null ? '编辑定时任务' : '新建定时任务'}</DialogTitle>
-            <DialogDescription className="text-slate-500">配置 Cron 定时任务</DialogDescription>
+            <DialogDescription className="text-[var(--dg-text-secondary)]">配置 Cron 定时任务</DialogDescription>
           </DialogHeader>
           <div className="space-y-4 py-4">
             <div>
-              <Label className="text-slate-300">任务名称</Label>
+              <Label className="text-[var(--dg-text-primary)]">任务名称</Label>
               <Input
                 value={formJob.name}
                 onChange={(e) => setFormJob({ ...formJob, name: e.target.value })}
                 placeholder="例如: 数据库备份"
-                className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
+                className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
               />
             </div>
             <div>
-              <Label className="text-slate-300">描述</Label>
+              <Label className="text-[var(--dg-text-primary)]">描述</Label>
               <Textarea
                 value={formJob.description}
                 onChange={(e) => setFormJob({ ...formJob, description: e.target.value })}
                 placeholder="任务描述..."
-                className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
+                className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
               />
             </div>
             <div>
-              <Label className="text-slate-300">Cron 表达式</Label>
+              <Label className="text-[var(--dg-text-primary)]">Cron 表达式</Label>
               <div className="flex gap-2">
                 <Input
                   value={formJob.cron_expr}
                   onChange={(e) => setFormJob({ ...formJob, cron_expr: e.target.value })}
                   placeholder="0 2 * * *"
-                  className="bg-slate-800 border-slate-700 text-slate-100 mt-1"
+                  className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
                 />
                 <Select onValueChange={(v) => setFormJob({ ...formJob, cron_expr: v })}>
-                  <SelectTrigger className="w-48 bg-slate-800 border-slate-700 text-slate-100 mt-1">
+                  <SelectTrigger className="w-48 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1">
                     <SelectValue placeholder="快速选择" />
                   </SelectTrigger>
-                  <SelectContent className="bg-slate-800 border-slate-700">
-                    <SelectItem value="*/5 * * * *" className="text-slate-100">每 5 分钟</SelectItem>
-                    <SelectItem value="0 * * * *" className="text-slate-100">每小时</SelectItem>
-                    <SelectItem value="0 2 * * *" className="text-slate-100">每天 02:00</SelectItem>
-                    <SelectItem value="0 3 * * 0" className="text-slate-100">每周日 03:00</SelectItem>
-                    <SelectItem value="0 9 * * 1" className="text-slate-100">每周一 09:00</SelectItem>
+                  <SelectContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+                    <SelectItem value="*/5 * * * *" className="text-[var(--dg-text-primary)]">每 5 分钟</SelectItem>
+                    <SelectItem value="0 * * * *" className="text-[var(--dg-text-primary)]">每小时</SelectItem>
+                    <SelectItem value="0 2 * * *" className="text-[var(--dg-text-primary)]">每天 02:00</SelectItem>
+                    <SelectItem value="0 3 * * 0" className="text-[var(--dg-text-primary)]">每周日 03:00</SelectItem>
+                    <SelectItem value="0 9 * * 1" className="text-[var(--dg-text-primary)]">每周一 09:00</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
-              <p className="text-xs text-slate-500 mt-1">格式: 分 时 日 月 周</p>
+              <p className="text-xs text-[var(--dg-text-muted)] mt-1">格式: 分 时 日 月 周</p>
             </div>
             <div>
-              <Label className="text-slate-300">执行命令</Label>
+              <Label className="text-[var(--dg-text-primary)]">执行命令</Label>
               <Textarea
                 value={formJob.content}
                 onChange={(e) => setFormJob({ ...formJob, content: e.target.value })}
                 placeholder="/scripts/backup.sh"
-                className="bg-slate-800 border-slate-700 text-slate-100 mt-1 font-mono"
+                className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1 font-mono"
               />
             </div>
           </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setIsFormDialogOpen(false)} className="border-slate-700 text-slate-300">
+            <Button variant="outline" onClick={() => setIsFormDialogOpen(false)} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
               取消
             </Button>
             <Button className="bg-blue-600 hover:bg-blue-700" onClick={handleSaveJob}>
@@ -472,40 +509,43 @@ export function CronJobManager() {
 
       {/* Execution History Dialog */}
       <Dialog open={isLogDialogOpen} onOpenChange={setIsLogDialogOpen}>
-        <DialogContent className="max-w-4xl bg-slate-900 border-slate-700 text-slate-100 max-h-[85vh] overflow-y-auto">
+        <DialogContent className="max-w-4xl bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] max-h-[85vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle>执行历史</DialogTitle>
-            <DialogDescription className="text-slate-500">定时任务执行记录与输出日志</DialogDescription>
+            <DialogDescription className="text-[var(--dg-text-secondary)]">定时任务执行记录与输出日志</DialogDescription>
           </DialogHeader>
           <div className="mt-4">
             {executionsLoading ? (
               <div className="flex items-center justify-center py-8">
-                <Loader2 className="h-6 w-6 text-slate-500 animate-spin" />
+                <Loader2 className="h-6 w-6 text-[var(--dg-text-secondary)] animate-spin" />
               </div>
             ) : executions.length === 0 ? (
-              <div className="text-center text-slate-500 py-8">暂无执行记录</div>
+              <div className="flex flex-col items-center justify-center py-12 text-[var(--dg-text-secondary)]">
+                <History className="h-10 w-10 mb-3 opacity-40" />
+                <p className="text-sm">暂无执行记录</p>
+              </div>
             ) : (
               <Table>
                 <TableHeader>
-                  <TableRow className="border-slate-700">
-                    <TableHead className="text-slate-400">任务</TableHead>
-                    <TableHead className="text-slate-400">状态</TableHead>
-                    <TableHead className="text-slate-400">耗时</TableHead>
-                    <TableHead className="text-slate-400">执行时间</TableHead>
-                    <TableHead className="text-slate-400">输出</TableHead>
+                  <TableRow className="border-[var(--dg-border)]">
+                    <TableHead className="text-[var(--dg-text-secondary)]">任务</TableHead>
+                    <TableHead className="text-[var(--dg-text-secondary)]">状态</TableHead>
+                    <TableHead className="text-[var(--dg-text-secondary)]">耗时</TableHead>
+                    <TableHead className="text-[var(--dg-text-secondary)]">执行时间</TableHead>
+                    <TableHead className="text-[var(--dg-text-secondary)]">输出</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {executions.map((exec) => (
-                    <>
-                      <TableRow key={exec.id} className="border-slate-700 cursor-pointer hover:bg-slate-800/50" onClick={() => setExpandedExec(expandedExec === exec.id ? null : exec.id)}>
-                        <TableCell className="text-slate-200">{exec.task_name}</TableCell>
+                    <Fragment key={exec.id}>
+                      <TableRow className="border-[var(--dg-border)] cursor-pointer hover:bg-[var(--dg-bg-hover)]/50" onClick={() => setExpandedExec(expandedExec === exec.id ? null : exec.id)}>
+                        <TableCell className="text-[var(--dg-text-primary)]">{exec.task_name}</TableCell>
                         <TableCell>{getStatusBadge(exec.status)}</TableCell>
-                        <TableCell className="text-slate-400">{exec.duration ? `${exec.duration}ms` : '--'}</TableCell>
-                        <TableCell className="text-slate-400">
+                        <TableCell className="text-[var(--dg-text-secondary)]">{exec.duration ? `${exec.duration}ms` : '--'}</TableCell>
+                        <TableCell className="text-[var(--dg-text-secondary)]">
                           {exec.started_at ? new Date(exec.started_at).toLocaleString() : '--'}
                         </TableCell>
-                        <TableCell className="text-slate-400">
+                        <TableCell className="text-[var(--dg-text-secondary)]">
                           {exec.output ? (
                             <span className="text-blue-400 text-xs flex items-center gap-1">
                               <Terminal className="h-3 w-3" />
@@ -517,15 +557,15 @@ export function CronJobManager() {
                         </TableCell>
                       </TableRow>
                       {expandedExec === exec.id && exec.output && (
-                        <TableRow key={`${exec.id}-out`} className="border-slate-700">
-                          <TableCell colSpan={5} className="bg-slate-950 p-0">
-                            <pre className="p-4 text-xs text-slate-300 font-mono whitespace-pre-wrap max-h-64 overflow-y-auto">
+                        <TableRow key={`${exec.id}-out`} className="border-[var(--dg-border)]">
+                          <TableCell colSpan={5} className="bg-[var(--dg-bg-tertiary)] p-0">
+                            <pre className="p-4 text-xs text-[var(--dg-text-primary)] font-mono whitespace-pre-wrap max-h-64 overflow-y-auto">
                               {exec.output}
                             </pre>
                           </TableCell>
                         </TableRow>
                       )}
-                    </>
+                    </Fragment>
                   ))}
                 </TableBody>
               </Table>