@aiscene/aiserver 1.2.5 → 1.2.7

package/dist/web/server.js

@@ -213,6 +213,7 @@ export class WebServer {
         this.app = express();
         this.setupMiddleware();
         this.setupApiRoutes();
+        this.setupDetailRoutes();
         this.setupStaticFiles();
     }
     setupMiddleware() {
@@ -453,6 +454,26 @@ export class WebServer {
         });
         this.app.use('/api', api);
     }
+    setupDetailRoutes() {
+        // 任务详情页
+        this.app.get('/task-detail', (req, res) => {
+            const taskId = req.query.id;
+            if (!taskId) {
+                res.status(400).send('Missing id');
+                return;
+            }
+            res.status(200).send(this.getTaskDetailHtml());
+        });
+        // 调试会话详情页
+        this.app.get('/debug-detail', (req, res) => {
+            const sessionId = req.query.id;
+            if (!sessionId) {
+                res.status(400).send('Missing id');
+                return;
+            }
+            res.status(200).send(this.getDebugDetailHtml());
+        });
+    }
     setupStaticFiles() {
         const distPath = path.resolve(import.meta.dirname, 'dist');
         this.app.use(express.static(distPath));
@@ -473,63 +494,72 @@ export class WebServer {
 <title>AIServer 管理面板</title>
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
-body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#fff;color:#111;min-height:100vh}
-.container{max-width:1400px;margin:0 auto;padding:20px}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f8fafc;color:#1e293b;min-height:100vh}
+.container{max-width:1400px;margin:0 auto;padding:20px;height:calc(100vh - 40px);display:flex;flex-direction:column}
+.container.debugger-full{max-width:100%;padding:0;height:100vh;overflow:hidden}
+.container.debugger-full .header{display:none}
+.container.debugger-full .tabs{display:none}
+.container.debugger-full>[id^="page-"]{flex:1;min-height:0}
 .header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
-.header h1{font-size:24px;color:#38bdf8}
-.tabs{display:flex;gap:4px;background:#fff;border-radius:8px;padding:4px;margin-bottom:24px}
-.tab{padding:8px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;color:#94a3b8;border:none;background:none;transition:all .2s}
-.tab.active{background:#38bdf8;color:#0f172a}
-.tab:hover:not(.active){color:#e2e8f0}
+.header h1{font-size:24px;color:#0f172a}
+.tabs{display:flex;gap:4px;background:#f1f5f9;border-radius:8px;padding:4px;margin-bottom:24px}
+.tab{padding:8px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;color:#64748b;border:none;background:none;transition:all .2s}
+.tab.active{background:#38bdf8;color:#fff}
+.tab:hover:not(.active){color:#334155}
 .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
-.card{background:#fff;border-radius:8px;padding:20px;border:1px solid #334155}
-.card h3{font-size:13px;color:#94a3b8;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
-.card .value{font-size:32px;font-weight:700;color:#38bdf8}
-.card .sub{font-size:12px;color:#64748b;margin-top:4px}
+.card{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
+.card h3{font-size:13px;color:#64748b;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
+.card .value{font-size:32px;font-weight:700;color:#0f172a}
+.card .sub{font-size:12px;color:#94a3b8;margin-top:4px}
 table{width:100%;border-collapse:collapse;margin-top:8px}
-th,td{text-align:left;padding:10px 14px;border-bottom:1px solid #1e293b;font-size:13px}
-th{color:#94a3b8;font-size:11px;text-transform:uppercase;letter-spacing:.5px;background:#fff;position:sticky;top:0}
-tr:hover{background:#fff}
+th,td{text-align:left;padding:10px 14px;border-bottom:1px solid #e2e8f0;font-size:13px;color:#1e293b}
+th{color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.5px;background:#f8fafc;position:sticky;top:0}
+tr:hover{background:#f8fafc}
 .badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600}
-.b-online{background:#fff;color:#22c55e}
-.b-offline{background:#fff;color:#ef4444}
-.b-running{background:#fff;color:#f59e0b}
-.b-completed{background:#fff;color:#22c55e}
-.b-failed{background:#fff;color:#ef4444}
-.b-pending{background:#fff;color:#38bdf8}
-.b-idle{background:#fff;color:#94a3b8}
-.b-stopped{background:#fff;color:#94a3b8}
+.b-online{background:#dcfce7;color:#16a34a}
+.b-offline{background:#fee2e2;color:#dc2626}
+.b-running{background:#fef3c7;color:#d97706}
+.b-completed{background:#dcfce7;color:#16a34a}
+.b-failed{background:#fee2e2;color:#dc2626}
+.b-pending{background:#dbeafe;color:#2563eb}
+.b-idle{background:#f1f5f9;color:#64748b}
+.b-stopped{background:#f1f5f9;color:#64748b}
 .btn{padding:6px 14px;border-radius:6px;border:none;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s}
-.btn-primary{background:#fff;color:#0f172a}
-.btn-primary:hover{background:#fff}
+.btn-primary{background:#2563eb;color:#fff}
+.btn-primary:hover{background:#1d4ed8}
 .btn-sm{padding:4px 10px;font-size:11px}
-.section-title{font-size:16px;font-weight:600;color:#e2e8f0;margin:20px 0 12px;display:flex;align-items:center;gap:8px}
+.section-title{font-size:16px;font-weight:600;color:#1e293b;margin:20px 0 12px;display:flex;align-items:center;gap:8px}
 .mono{font-family:'SF Mono',Monaco,Consolas,monospace;font-size:12px}
-.log-viewer{background:#fff;border:1px solid #334155;border-radius:8px;padding:16px;max-height:600px;overflow-y:auto;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:12px;line-height:1.6}
-.log-viewer .log-line{padding:2px 0;border-bottom:1px solid #1e293b20}
-.log-viewer .log-line:hover{background:#fff}
-.log-time{color:#64748b;margin-right:8px}
-.log-level-info{color:#38bdf8}
-.log-level-warn{color:#f59e0b}
-.log-level-error{color:#ef4444}
+.log-viewer{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:16px 16px 40px;max-height:600px;overflow-y:auto;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:12px;line-height:1.6}
+.log-viewer .log-line{padding:2px 0;border-bottom:1px solid #f1f5f9}
+.log-viewer .log-line:hover{background:#f8fafc}
+.log-time{color:#94a3b8;margin-right:8px}
+.log-level-info{color:#0284c7}
+.log-level-warn{color:#d97706}
+.log-level-error{color:#dc2626}
 .log-level-debug{color:#94a3b8}
-.log-content{color:#cbd5e1}
+.log-content{color:#334155}
 .log-new{animation:flashLog 0.5s ease-out}
-@keyframes flashLog{0%{background:#fff}100%{background:transparent}}
-.log-live{color:#22c55e;font-size:10px;margin-left:8px;animation:pulse 2s infinite}
+@keyframes flashLog{0%{background:#dbeafe}100%{background:transparent}}
+.log-live{color:#16a34a;font-size:10px;margin-left:8px;animation:pulse 2s infinite}
 @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
-.detail-panel{background:#fff;border:1px solid #334155;border-radius:8px;padding:20px;margin-top:16px}
-.detail-row{display:flex;padding:8px 0;border-bottom:1px solid #33415520}
-.detail-label{width:140px;color:#94a3b8;font-size:13px;flex-shrink:0}
-.detail-value{color:#e2e8f0;font-size:13px;word-break:break-all}
-.empty-state{text-align:center;padding:60px 20px;color:#64748b}
+.detail-panel{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
+.detail-row{display:flex;padding:8px 0;border-bottom:1px solid #f1f5f9}
+.detail-label{width:140px;color:#64748b;font-size:13px;flex-shrink:0}
+.detail-value{color:#1e293b;font-size:13px;word-break:break-all}
+.empty-state{text-align:center;padding:60px 20px;color:#94a3b8}
 .empty-state .icon{font-size:48px;margin-bottom:16px}
 .refresh-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
-.refresh-bar .auto{font-size:12px;color:#64748b}
-.refresh-bar .auto.on{color:#22c55e}
-.search{background:#fff;border:1px solid #334155;border-radius:6px;padding:8px 14px;color:#e2e8f0;font-size:13px;width:220px}
+.refresh-bar .auto{font-size:12px;color:#94a3b8}
+.refresh-bar .auto.on{color:#16a34a}
+.search{background:#fff;border:1px solid #cbd5e1;border-radius:6px;padding:8px 14px;color:#1e293b;font-size:13px;width:220px}
 .search:focus{outline:none;border-color:#38bdf8}
 .collapsed{display:none}
+.table-wrap{max-height:480px;overflow-y:auto;border:1px solid #e2e8f0;border-radius:8px;margin-top:8px}
+.table-wrap table{margin-top:0}
+.pager{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:12px;color:#64748b}
+.pager .btn{margin:0 2px}
+.pager .info{display:flex;align-items:center;gap:8px}
 </style>
 </head>
 <body>
@@ -558,7 +588,6 @@ tr:hover{background:#fff}
 let currentTab='dashboard';
 let autoRefresh=true;
 let refreshTimer=null;
-let detailOpen=false; // track if a detail panel is open
 
 // ===== WebSocket for Real-time Task Logs =====
 let ws=null;
@@ -671,13 +700,9 @@ function updateTaskLogUI(taskId){
   logViewer.scrollTop=logViewer.scrollHeight;
 }
 
-// ===== Tab: load realtime logs for running tasks =====
-let currentDetailTaskId=null;
-let currentDetailTaskStatus=null;
-
+// ===== Tab switching =====
 function switchTab(tab){
   currentTab=tab;
-  detailOpen=false;
   document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
   document.querySelectorAll('.tab').forEach(t=>{
     var txt=t.textContent.toLowerCase();
@@ -689,6 +714,9 @@ function switchTab(tab){
   });
   document.querySelectorAll('[id^="page-"]').forEach(p=>p.classList.add('collapsed'));
   document.getElementById('page-'+tab).classList.remove('collapsed');
+  // 调试执行页面全屏展示
+  const container=document.querySelector('.container');
+  if(tab==='debugger'){container.classList.add('debugger-full')}else{container.classList.remove('debugger-full')}
   if(tab!=='debugger') refresh();
 }
 
@@ -697,7 +725,9 @@ function badge(s){
   return '<span class="badge '+cls+'">'+s+'</span>';
 }
 
-function esc(s){return String(s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')}
+function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}
+
+function openDetail(el){window.open(el.dataset.type+'?id='+encodeURIComponent(el.dataset.id),'_blank')}
 
 function timeAgo(d){
   if(!d)return '-';
@@ -716,9 +746,9 @@ async function api(path){
 
 async function refresh(){
   if(currentTab==='dashboard')await loadDashboard();
-  else if(currentTab==='devices')await loadDevices();
-  else if(currentTab==='tasks')await loadTasks();
-  else if(currentTab==='debug')await loadDebug();
+  else if(currentTab==='devices'){await loadDevicesData();loadDevices();}
+  else if(currentTab==='tasks'){await loadTasksData();loadTasks();}
+  else if(currentTab==='debug'){await loadDebugData();loadDebug();}
   else if(currentTab==='debugger')loadDebugger();
 }
 
@@ -739,41 +769,46 @@ async function loadDashboard(){
 
   // Devices overview
   if(d.devices.list&&d.devices.list.length>0){
-    h+='<div class="section-title">设备列表</div><table><tr><th>序列号</th><th>型号</th><th>品牌</th><th>平台</th><th>状态</th><th>最近心跳</th></tr>';
-    d.devices.list.forEach(dev=>{
+    h+='<div class="section-title">设备列表</div><div class="table-wrap"><table><tr><th>序列号</th><th>型号</th><th>品牌</th><th>平台</th><th>状态</th><th>最近心跳</th></tr>';
+    d.devices.list.slice(0,20).forEach(dev=>{
       h+='<tr><td class="mono">'+esc(dev.serialNumber)+'</td><td>'+esc(dev.model||'-')+'</td><td>'+esc(dev.brand||'-')+'</td><td>'+esc(dev.platform)+'</td><td>'+badge(dev.status)+'</td><td>'+timeAgo(dev.lastHeartbeatAt)+'</td></tr>';
     });
-    h+='</table>';
+    h+='</table></div>';
   }
 
   // Recent tasks
   if(d.tasks.recent&&d.tasks.recent.length>0){
-    h+='<div class="section-title">近期任务</div><table><tr><th>任务ID</th><th>类型</th><th>状态</th><th>开始时间</th><th>完成时间</th><th>操作</th></tr>';
-    d.tasks.recent.forEach(t=>{
-      h+='<tr><td class="mono">'+esc(t.taskId)+'</td><td>'+esc(t.type)+'</td><td>'+badge(t.status)+'</td><td>'+fmtTime(t.startedAt)+'</td><td>'+fmtTime(t.completedAt)+'</td><td><button class="btn btn-primary btn-sm" onclick="showTaskLogs(\\''+esc(t.taskId)+'\\')">日志</button></td></tr>';
+    h+='<div class="section-title">近期任务</div><div class="table-wrap"><table><tr><th>任务ID</th><th>类型</th><th>状态</th><th>开始时间</th><th>完成时间</th><th>操作</th></tr>';
+    d.tasks.recent.slice(0,20).forEach(t=>{
+      h+='<tr><td class="mono">'+esc(t.taskId)+'</td><td>'+esc(t.type)+'</td><td>'+badge(t.status)+'</td><td>'+fmtTime(t.startedAt)+'</td><td>'+fmtTime(t.completedAt)+'</td><td><button class="btn btn-primary btn-sm" data-type="/task-detail" data-id="'+esc(t.taskId)+'" onclick="openDetail(this)">日志</button></td></tr>';
     });
-    h+='</table>';
+    h+='</table></div>';
   }
 
   // Recent debug sessions
   if(d.debugSessions&&d.debugSessions.length>0){
-    h+='<div class="section-title">近期调试会话</div><table><tr><th>会话ID</th><th>设备</th><th>平台</th><th>状态</th><th>开始时间</th><th>操作</th></tr>';
+    h+='<div class="section-title">近期调试会话</div><div class="table-wrap"><table><tr><th>会话ID</th><th>设备</th><th>平台</th><th>状态</th><th>开始时间</th><th>操作</th></tr>';
     d.debugSessions.slice(0,10).forEach(s=>{
-      h+='<tr><td class="mono">'+esc(s.sessionId.substring(0,24))+'...</td><td>'+esc(s.deviceId||'-')+'</td><td>'+esc(s.platform||'-')+'</td><td>'+badge(s.status)+'</td><td>'+fmtTime(s.startedAt)+'</td><td><button class="btn btn-primary btn-sm" onclick="showDebugLogs(\\''+esc(s.sessionId)+'\\')">日志</button></td></tr>';
+      h+='<tr><td class="mono">'+esc(s.sessionId.substring(0,24))+'...</td><td>'+esc(s.deviceId||'-')+'</td><td>'+esc(s.platform||'-')+'</td><td>'+badge(s.status)+'</td><td>'+fmtTime(s.startedAt)+'</td><td><button class="btn btn-primary btn-sm" data-type="/debug-detail" data-id="'+esc(s.sessionId)+'" onclick="openDetail(this)">日志</button></td></tr>';
     });
-    h+='</table>';
+    h+='</table></div>';
   }
 
-  h+='<div id="detail-panel"></div>';
   p.innerHTML=h;
 }
 
 // ===== Devices =====
-async function loadDevices(){
+async function loadDevicesData(){
   const devs=await api('/devices');
-  if(!devs)return;
-  const p=document.getElementById('page-devices');
+  if(!devs)return[];
+  allDevices=devs;
+  return devs;
+}
+function loadDevices(page){
+  if(page)devicePage=page;
+  const devs=allDevices;
   const online=devs.filter(d=>d.status==='online').length;
+  const p=document.getElementById('page-devices');
   let h='<div class="grid">';
   h+='<div class="card"><h3>设备总数</h3><div class="value">'+devs.length+'</div></div>';
   h+='<div class="card"><h3>在线</h3><div class="value">'+online+'</div></div>';
@@ -781,11 +816,13 @@ async function loadDevices(){
   h+='</div>';
 
   if(devs.length>0){
-    h+='<div class="section-title">所有设备</div><table><tr><th>序列号</th><th>型号</th><th>品牌</th><th>平台</th><th>状态</th><th>最近心跳</th><th>创建时间</th></tr>';
-    devs.forEach(d=>{
+    const slice=paginate(devs,devicePage);
+    h+='<div class="section-title">所有设备</div>'+renderPager('dev',devs.length,devicePage,'loadDevices');
+    h+='<div class="table-wrap"><table><tr><th>序列号</th><th>型号</th><th>品牌</th><th>平台</th><th>状态</th><th>最近心跳</th><th>创建时间</th></tr>';
+    slice.forEach(d=>{
       h+='<tr><td class="mono">'+esc(d.serialNumber)+'</td><td>'+esc(d.model||'-')+'</td><td>'+esc(d.brand||'-')+'</td><td>'+esc(d.platform)+'</td><td>'+badge(d.status)+'</td><td>'+timeAgo(d.lastHeartbeatAt)+'</td><td>'+fmtTime(d.createdAt)+'</td></tr>';
     });
-    h+='</table>';
+    h+='</table></div>';
   }else{
     h+='<div class="empty-state"><div class="icon">&#128241;</div><p>暂无设备</p></div>';
   }
@@ -793,10 +830,15 @@ async function loadDevices(){
 }
 
 // ===== Tasks =====
-async function loadTasks(){
-  const tasks=await api('/tasks?limit=50');
-  if(!tasks)return;
-  const p=document.getElementById('page-tasks');
+async function loadTasksData(){
+  const tasks=await api('/tasks?limit=200');
+  if(!tasks)return[];
+  allTasks=tasks;
+  return tasks;
+}
+function loadTasks(page){
+  if(page)taskPage=page;
+  const tasks=allTasks;
   const running=tasks.filter(t=>t.status==='running').length;
   const completed=tasks.filter(t=>t.status==='completed').length;
   const failed=tasks.filter(t=>t.status==='failed').length;
@@ -809,91 +851,31 @@ async function loadTasks(){
   h+='</div>';
 
   if(tasks.length>0){
-    h+='<div class="section-title">所有任务</div><table><tr><th>任务ID</th><th>执行ID</th><th>类型</th><th>状态</th><th>优先级</th><th>开始时间</th><th>完成时间</th><th>错误</th><th>操作</th></tr>';
-    tasks.forEach(t=>{
+    const slice=paginate(tasks,taskPage);
+    h+='<div class="section-title">所有任务</div>'+renderPager('task',tasks.length,taskPage,'loadTasks');
+    h+='<div class="table-wrap"><table><tr><th>任务ID</th><th>执行ID</th><th>类型</th><th>状态</th><th>优先级</th><th>开始时间</th><th>完成时间</th><th>错误</th><th>操作</th></tr>';
+    slice.forEach(t=>{
       const err=t.errorMessage?(t.errorMessage.length>50?esc(t.errorMessage.substring(0,50))+'...':esc(t.errorMessage)):'-';
-      h+='<tr><td class="mono">'+esc(t.taskId)+'</td><td class="mono">'+esc(t.executionId||'-')+'</td><td>'+esc(t.type)+'</td><td>'+badge(t.status)+'</td><td>'+t.priority+'</td><td>'+fmtTime(t.startedAt)+'</td><td>'+fmtTime(t.completedAt)+'</td><td style="color:#ef4444;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+err+'</td><td><button class="btn btn-primary btn-sm" onclick="showTaskDetail(\\''+esc(t.taskId)+'\\')">详情</button></td></tr>';
+      h+='<tr><td class="mono">'+esc(t.taskId)+'</td><td class="mono">'+esc(t.executionId||'-')+'</td><td>'+esc(t.type)+'</td><td>'+badge(t.status)+'</td><td>'+t.priority+'</td><td>'+fmtTime(t.startedAt)+'</td><td>'+fmtTime(t.completedAt)+'</td><td style="color:#ef4444;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+err+'</td><td><button class="btn btn-primary btn-sm" data-type="/task-detail" data-id="'+esc(t.taskId)+'" onclick="openDetail(this)">详情</button></td></tr>';
     });
-    h+='</table>';
+    h+='</table></div>';
   }else{
     h+='<div class="empty-state"><div class="icon">&#128203;</div><p>暂无任务</p></div>';
   }
-  h+='<div id="task-detail"></div>';
+  const p=document.getElementById('page-tasks');
   p.innerHTML=h;
 }
 
-async function showTaskDetail(taskId){
-  detailOpen=true;
-  currentDetailTaskId=taskId;
-  currentDetailTaskStatus=null;
-  const task=await api('/tasks/'+encodeURIComponent(taskId));
-  const logs=await api('/tasks/'+encodeURIComponent(taskId)+'/logs');
-  const panel=document.getElementById('task-detail');
-  if(!task){panel.innerHTML='<p style="color:#ef4444">任务未找到</p>';detailOpen=false;currentDetailTaskId=null;return}
-  
-  currentDetailTaskStatus=task.status;
-  const isRunning=task.status==='running'||task.status==='pending';
-
-  let h='<div class="detail-panel"><div class="section-title">任务详情: '+esc(task.taskId)+' <button class="btn btn-sm" style="background:#334155;color:#94a3b8;margin-left:12px" onclick="closeTaskDetail()">关闭</button></div>';
-  h+='<div class="detail-row"><div class="detail-label">任务ID</div><div class="detail-value mono">'+esc(task.taskId)+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">执行ID</div><div class="detail-value mono">'+esc(task.executionId||'-')+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">类型</div><div class="detail-value">'+esc(task.type)+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">状态</div><div class="detail-value">'+badge(task.status)+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">优先级</div><div class="detail-value">'+task.priority+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">开始时间</div><div class="detail-value">'+fmtTime(task.startedAt)+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">完成时间</div><div class="detail-value">'+fmtTime(task.completedAt)+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">创建时间</div><div class="detail-value">'+fmtTime(task.createdAt)+'</div></div>';
-  if(task.errorMessage)h+='<div class="detail-row"><div class="detail-label">错误信息</div><div class="detail-value" style="color:#ef4444">'+esc(task.errorMessage)+'</div></div>';
-  if(task.config){
-    h+='<div class="detail-row"><div class="detail-label">配置</div><div class="detail-value mono" style="white-space:pre-wrap;font-size:11px">'+esc(typeof task.config==='object'?JSON.stringify(task.config,null,2):task.config)+'</div></div>';
-  }
-  if(task.result){
-    h+='<div class="detail-row"><div class="detail-label">结果</div><div class="detail-value mono" style="white-space:pre-wrap;font-size:11px">'+esc(typeof task.result==='object'?JSON.stringify(task.result,null,2):task.result)+'</div></div>';
-  }
-
-  // Execution logs with real-time support
-  const logSafeId=esc(taskId).replace(/[^a-zA-Z0-9-_]/g,'_');
-  const existingLogsCount=logs?logs.length:0;
-  if(existingLogsCount>0||isRunning){
-    h+='<div class="section-title" style="margin-top:20px">执行日志 <span id="task-log-count-'+logSafeId+'" style="color:#64748b;font-size:12px">'+(existingLogsCount||'')+'</span>';
-    if(isRunning)h+=' <span style="color:#22c55e;font-size:12px">● LIVE</span>';
-    h+='</div>';
-    h+='<div class="log-viewer" id="task-log-'+logSafeId+'" style="max-height:400px">';
-    if(logs&&logs.length>0){
-      logs.forEach(l=>{
-        const lvl='log-level-'+esc(l.level||'info');
-        h+='<div class="log-line"><span class="log-time">'+fmtTime(l.createdAt)+'</span><span class="'+lvl+'">['+esc(l.level||'info').toUpperCase()+']</span> <span class="log-content">'+esc(l.content)+'</span></div>';
-      });
-    }
-    h+='</div>';
-  }else{
-    h+='<div class="section-title" style="margin-top:20px">执行日志</div><p style="color:#64748b">暂无日志</p>';
-  }
-
-  h+='</div>';
-  panel.innerHTML=h;
-  panel.scrollIntoView({behavior:'smooth'});
-  
-  // 滚动到日志底部
-  const logViewer=document.getElementById('task-log-'+logSafeId);
-  if(logViewer)logViewer.scrollTop=logViewer.scrollHeight;
-  
-  // 订阅实时日志
-  if(isRunning){
-    subscribeTaskLogs(taskId);
-  }
-}
-
-function showTaskLogs(taskId){
-  if(currentTab!=='tasks'){switchTab('tasks');setTimeout(()=>showTaskDetail(taskId),500);return}
-  showTaskDetail(taskId);
-}
-
 // ===== Debug Sessions =====
-async function loadDebug(){
+async function loadDebugData(){
   const sessions=await api('/debug/sessions');
-  if(!sessions)return;
-  const p=document.getElementById('page-debug');
+  if(!sessions)return[];
+  allDebugSessions=sessions;
+  return sessions;
+}
+function loadDebug(page){
+  if(page)debugPage=page;
+  const sessions=allDebugSessions;
   const running=sessions.filter(s=>s.status==='running').length;
 
   let h='<div class="grid">';
@@ -902,80 +884,208 @@ async function loadDebug(){
   h+='</div>';
 
   if(sessions.length>0){
-    h+='<div class="section-title">所有调试会话</div><table><tr><th>会话ID</th><th>任务ID</th><th>设备</th><th>平台</th><th>状态</th><th>开始时间</th><th>完成时间</th><th>操作</th></tr>';
-    sessions.forEach(s=>{
-      h+='<tr><td class="mono">'+esc(s.sessionId.substring(0,28))+'...</td><td class="mono">'+esc(s.taskId||'-')+'</td><td>'+esc(s.deviceId||'-')+'</td><td>'+esc(s.platform||'-')+'</td><td>'+badge(s.status)+'</td><td>'+fmtTime(s.startedAt)+'</td><td>'+fmtTime(s.completedAt)+'</td><td><button class="btn btn-primary btn-sm" onclick="showDebugDetail(\\''+esc(s.sessionId)+'\\')">详情</button></td></tr>';
+    const slice=paginate(sessions,debugPage);
+    h+='<div class="section-title">所有调试会话</div>'+renderPager('dbg',sessions.length,debugPage,'loadDebug');
+    h+='<div class="table-wrap"><table><tr><th>会话ID</th><th>任务ID</th><th>设备</th><th>平台</th><th>状态</th><th>开始时间</th><th>完成时间</th><th>操作</th></tr>';
+    slice.forEach(s=>{
+      h+='<tr><td class="mono">'+esc(s.sessionId.substring(0,28))+'...</td><td class="mono">'+esc(s.taskId||'-')+'</td><td>'+esc(s.deviceId||'-')+'</td><td>'+esc(s.platform||'-')+'</td><td>'+badge(s.status)+'</td><td>'+fmtTime(s.startedAt)+'</td><td>'+fmtTime(s.completedAt)+'</td><td><button class="btn btn-primary btn-sm" data-type="/debug-detail" data-id="'+esc(s.sessionId)+'" onclick="openDetail(this)">详情</button></td></tr>';
     });
-    h+='</table>';
+    h+='</table></div>';
   }else{
     h+='<div class="empty-state"><div class="icon">&#128027;</div><p>暂无调试会话</p></div>';
   }
-  h+='<div id="debug-detail"></div>';
+  const p=document.getElementById('page-debug');
   p.innerHTML=h;
 }
 
-async function showDebugDetail(sessionId){
-  detailOpen=true;
-  const session=await api('/debug/sessions/'+encodeURIComponent(sessionId));
-  const logs=await api('/debug/sessions/'+encodeURIComponent(sessionId)+'/logs');
-  const panel=document.getElementById('debug-detail');
-  if(!session){panel.innerHTML='<p style="color:#ef4444">会话未找到</p>';detailOpen=false;return}
-
-  let h='<div class="detail-panel"><div class="section-title">调试会话详情: '+esc(sessionId)+' <button class="btn btn-sm" style="background:#334155;color:#94a3b8;margin-left:12px" onclick="closeDebugDetail()">关闭</button></div>';
-  h+='<div class="detail-row"><div class="detail-label">会话ID</div><div class="detail-value mono">'+esc(session.sessionId)+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">任务ID</div><div class="detail-value mono">'+esc(session.taskId||'-')+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">设备</div><div class="detail-value mono">'+esc(session.deviceId||'-')+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">平台</div><div class="detail-value">'+esc(session.platform||'-')+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">状态</div><div class="detail-value">'+badge(session.status)+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">开始时间</div><div class="detail-value">'+fmtTime(session.startedAt)+'</div></div>';
-  h+='<div class="detail-row"><div class="detail-label">完成时间</div><div class="detail-value">'+fmtTime(session.completedAt)+'</div></div>';
+// ===== Pagination State =====
+const PAGE_SIZE=20;
+let taskPage=1, devicePage=1, debugPage=1;
+let allTasks=[], allDevices=[], allDebugSessions=[];
+
+function renderPager(prefix,total,page,loadFn){
+  const pages=Math.ceil(total/PAGE_SIZE)||1;
+  if(total<=PAGE_SIZE)return '<div class="pager"><div class="info">共 '+total+' 条</div></div>';
+  let h='<div class="pager"><div class="info">共 '+total+' 条，第 '+page+'/'+pages+' 页</div><div>';
+  if(page>1)h+='<button class="btn btn-primary btn-sm" onclick="'+loadFn+'(1)">首页</button>';
+  if(page>1)h+='<button class="btn btn-primary btn-sm" onclick="'+loadFn+'('+(page-1)+')">上一页</button>';
+  if(page<pages)h+='<button class="btn btn-primary btn-sm" onclick="'+loadFn+'('+(page+1)+')">下一页</button>';
+  if(page<pages)h+='<button class="btn btn-primary btn-sm" onclick="'+loadFn+'('+pages+')">末页</button>';
+  h+='</div></div>';
+  return h;
+}
+function paginate(arr,page){const s=(page-1)*PAGE_SIZE;return arr.slice(s,s+PAGE_SIZE)}
+
+// ===== Init =====
+initWebSocket(); // 初始化 WebSocket 连接以接收实时日志
+refresh();
+refreshTimer=setInterval(()=>{if(autoRefresh)refresh()},5000);
+</script>
+</body>
+</html>`;
+    }
+    getTaskDetailHtml() {
+        return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<title>任务详情</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f8fafc;color:#1e293b;padding:24px}
+h2{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
+.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}
+.b-running{background:#fef3c7;color:#d97706}.b-completed{background:#dcfce7;color:#16a34a}.b-failed{background:#fee2e2;color:#dc2626}.b-pending{background:#f1f5f9;color:#64748b}.b-unknown{background:#f1f5f9;color:#64748b}
+.section{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:16px}
+.section-title{font-size:13px;font-weight:600;color:#64748b;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
+.row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid #f1f5f9}
+.row:last-child{border-bottom:none}
+.label{width:100px;color:#64748b;font-size:13px;flex-shrink:0}
+.value{color:#1e293b;font-size:13px;word-break:break-all;flex:1}
+.mono{font-family:'SF Mono',Monaco,Consolas,monospace;font-size:12px}
+.log-viewer{max-height:500px;overflow-y:auto;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px}
+.log-line{padding:4px 0;border-bottom:1px solid #f1f5f9;font-size:12px;line-height:1.5}
+.log-time{color:#94a3b8;margin-right:8px;font-size:11px}
+.log-level-info{color:#0284c7}.log-level-warn{color:#d97706}.log-level-error{color:#dc2626}
+.log-content{color:#475569}
+.loading{text-align:center;padding:60px;color:#94a3b8}
+.error{color:#dc2626;padding:20px}
+</style>
+</head>
+<body>
+<h2>&#128203; 任务详情</h2>
+<div id="content"><div class="loading">加载中...</div></div>
+<script>
+const params=new URLSearchParams(location.search);
+const taskId=params.get('id');
+if(!taskId){document.getElementById('content').innerHTML='<div class="error">缺少任务ID</div>';}
+
+function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}
+
+function fmtTime(d){if(!d)return '-';return new Date(d).toLocaleString('zh-CN',{hour12:false})}
+function badge(s){const cls='b-'+(s||'unknown');return '<span class="badge '+cls+'">'+esc(s)+'</span>'}
+
+async function load(){
+  const task=await (await fetch('/api/tasks/'+encodeURIComponent(taskId))).json();
+  const logs=await (await fetch('/api/tasks/'+encodeURIComponent(taskId)+'/logs')).json();
+  const c=document.getElementById('content');
+  if(!task){c.innerHTML='<div class="error">任务未找到</div>';return}
+
+  document.title='任务详情: '+task.taskId;
+  let h='<div class="section"><div class="section-title">基本信息</div>';
+  h+='<div class="row"><div class="label">任务ID</div><div class="value mono">'+esc(task.taskId)+'</div></div>';
+  h+='<div class="row"><div class="label">执行ID</div><div class="value mono">'+esc(task.executionId||'-')+'</div></div>';
+  h+='<div class="row"><div class="label">类型</div><div class="value">'+esc(task.type)+'</div></div>';
+  h+='<div class="row"><div class="label">状态</div><div class="value">'+badge(task.status)+'</div></div>';
+  h+='<div class="row"><div class="label">优先级</div><div class="value">'+task.priority+'</div></div>';
+  h+='<div class="row"><div class="label">开始时间</div><div class="value">'+fmtTime(task.startedAt)+'</div></div>';
+  h+='<div class="row"><div class="label">完成时间</div><div class="value">'+fmtTime(task.completedAt)+'</div></div>';
+  h+='<div class="row"><div class="label">创建时间</div><div class="value">'+fmtTime(task.createdAt)+'</div></div>';
+  if(task.errorMessage)h+='<div class="row"><div class="label">错误信息</div><div class="value" style="color:#dc2626">'+esc(task.errorMessage)+'</div></div>';
   h+='</div>';
 
-  // Session logs
+  if(task.config){
+    h+='<div class="section"><div class="section-title">配置</div><pre class="mono" style="white-space:pre-wrap;font-size:11px;background:#f8fafc;padding:12px;border-radius:4px">'+esc(typeof task.config==='object'?JSON.stringify(task.config,null,2):task.config)+'</pre></div>';
+  }
+  if(task.result){
+    h+='<div class="section"><div class="section-title">结果</div><pre class="mono" style="white-space:pre-wrap;font-size:11px;background:#f8fafc;padding:12px;border-radius:4px">'+esc(typeof task.result==='object'?JSON.stringify(task.result,null,2):task.result)+'</pre></div>';
+  }
+
   if(logs&&logs.length>0){
-    h+='<div class="detail-panel" style="margin-top:16px"><div class="section-title">会话日志 ('+logs.length+')</div>';
-    h+='<div class="log-viewer">';
+    h+='<div class="section"><div class="section-title">执行日志 ('+logs.length+')</div><div class="log-viewer">';
     logs.forEach(l=>{
-      const lvl='log-level-'+esc(l.type==='log_output'?'info':l.type==='error'?'error':'info');
-      const content=l.content||'';
-      h+='<div class="log-line"><span class="log-time">'+fmtTime(l.createdAt)+'</span> <span class="log-content">'+esc(content)+'</span></div>';
+      const lvl='log-level-'+esc(l.level||'info');
+      h+='<div class="log-line"><span class="log-time">'+fmtTime(l.createdAt)+'</span><span class="'+lvl+'">['+esc(l.level||'info').toUpperCase()+']</span> <span class="log-content">'+esc(l.content)+'</span></div>';
     });
     h+='</div></div>';
   }else{
-    h+='<div class="detail-panel" style="margin-top:16px"><div class="section-title">会话日志</div><p style="color:#64748b">暂无日志</p></div>';
+    h+='<div class="section"><div class="section-title">执行日志</div><p style="color:#94a3b8">暂无日志</p></div>';
   }
-
-  panel.innerHTML=h;
-  panel.scrollIntoView({behavior:'smooth'});
+  c.innerHTML=h;
+  const lv=c.querySelector('.log-viewer');
+  if(lv)lv.scrollTop=lv.scrollHeight;
 }
+load();
+</script>
+</body>
+</html>`;
+    }
+    getDebugDetailHtml() {
+        return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<title>调试会话详情</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f8fafc;color:#1e293b;padding:24px}
+h2{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
+.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}
+.b-running{background:#fef3c7;color:#d97706}.b-completed{background:#dcfce7;color:#16a34a}.b-failed{background:#fee2e2;color:#dc2626}.b-pending{background:#f1f5f9;color:#64748b}.b-unknown{background:#f1f5f9;color:#64748b}
+.section{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:16px}
+.section-title{font-size:13px;font-weight:600;color:#64748b;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
+.row{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid #f1f5f9}
+.row:last-child{border-bottom:none}
+.label{width:100px;color:#64748b;font-size:13px;flex-shrink:0}
+.value{color:#1e293b;font-size:13px;word-break:break-all;flex:1}
+.mono{font-family:'SF Mono',Monaco,Consolas,monospace;font-size:12px}
+.log-viewer{max-height:500px;overflow-y:auto;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px}
+.log-line{padding:4px 0;border-bottom:1px solid #f1f5f9;font-size:12px;line-height:1.5}
+.log-time{color:#94a3b8;margin-right:8px;font-size:11px}
+.log-level-info{color:#0284c7}.log-level-warn{color:#d97706}.log-level-error{color:#dc2626}
+.log-content{color:#475569}
+.loading{text-align:center;padding:60px;color:#94a3b8}
+.error{color:#dc2626;padding:20px}
+</style>
+</head>
+<body>
+<h2>&#128027; 调试会话详情</h2>
+<div id="content"><div class="loading">加载中...</div></div>
+<script>
+const params=new URLSearchParams(location.search);
+const sessionId=params.get('id');
+if(!sessionId){document.getElementById('content').innerHTML='<div class="error">缺少会话ID</div>';}
 
-function showDebugLogs(sessionId){
-  if(currentTab!=='debug'){switchTab('debug');setTimeout(()=>showDebugDetail(sessionId),500);return}
-  showDebugDetail(sessionId);
-}
+function esc(s){return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}
 
-function closeTaskDetail(){
-  // 取消订阅实时日志
-  if(currentDetailTaskId&&(currentDetailTaskStatus==='running'||currentDetailTaskStatus==='pending')){
-    unsubscribeTaskLogs(currentDetailTaskId);
-  }
-  const panel=document.getElementById('task-detail');
-  if(panel)panel.innerHTML='';
-  detailOpen=false;
-  currentDetailTaskId=null;
-  currentDetailTaskStatus=null;
-}
+function fmtTime(d){if(!d)return '-';return new Date(d).toLocaleString('zh-CN',{hour12:false})}
+function badge(s){const cls='b-'+(s||'unknown');return '<span class="badge '+cls+'">'+esc(s)+'</span>'}
 
-function closeDebugDetail(){
-  const panel=document.getElementById('debug-detail');
-  if(panel)panel.innerHTML='';
-  detailOpen=false;
-}
+async function load(){
+  const session=await (await fetch('/api/debug/sessions/'+encodeURIComponent(sessionId))).json();
+  const logs=await (await fetch('/api/debug/sessions/'+encodeURIComponent(sessionId)+'/logs')).json();
+  const c=document.getElementById('content');
+  if(!session){c.innerHTML='<div class="error">会话未找到</div>';return}
 
-// ===== Init =====
-initWebSocket(); // 初始化 WebSocket 连接以接收实时日志
-refresh();
-refreshTimer=setInterval(()=>{if(autoRefresh&&!detailOpen)refresh()},5000);
+  document.title='调试会话详情: '+session.sessionId;
+  let h='<div class="section"><div class="section-title">基本信息</div>';
+  h+='<div class="row"><div class="label">会话ID</div><div class="value mono">'+esc(session.sessionId)+'</div></div>';
+  h+='<div class="row"><div class="label">任务ID</div><div class="value mono">'+esc(session.taskId||'-')+'</div></div>';
+  h+='<div class="row"><div class="label">设备</div><div class="value mono">'+esc(session.deviceId||'-')+'</div></div>';
+  h+='<div class="row"><div class="label">平台</div><div class="value">'+esc(session.platform||'-')+'</div></div>';
+  h+='<div class="row"><div class="label">状态</div><div class="value">'+badge(session.status)+'</div></div>';
+  h+='<div class="row"><div class="label">开始时间</div><div class="value">'+fmtTime(session.startedAt)+'</div></div>';
+  h+='<div class="row"><div class="label">完成时间</div><div class="value">'+fmtTime(session.completedAt)+'</div></div>';
+  h+='</div>';
+
+  if(logs&&logs.length>0){
+    h+='<div class="section"><div class="section-title">会话日志 ('+logs.length+')</div><div class="log-viewer">';
+    logs.forEach(l=>{
+      const lvl='log-level-'+(l.type==='error'?'error':'info');
+      const content=l.content||'';
+      h+='<div class="log-line"><span class="log-time">'+fmtTime(l.createdAt)+'</span><span class="'+lvl+'">['+esc(l.type==='log_output'?'info':l.type==='error'?'error':'info').toUpperCase()+']</span> <span class="log-content">'+esc(content)+'</span></div>';
+    });
+    h+='</div></div>';
+  }else{
+    h+='<div class="section"><div class="section-title">会话日志</div><p style="color:#94a3b8">暂无日志</p></div>';
+  }
+  c.innerHTML=h;
+  const lv=c.querySelector('.log-viewer');
+  if(lv)lv.scrollTop=lv.scrollHeight;
+}
+load();
 </script>
 </body>
 </html>`;