@aiscene/aiserver 1.2.4 → 1.2.6

package/dist/web/server.js

@@ -7,7 +7,205 @@ import { taskRepo } from '../storage/repositories/task-repo.js';
 import { debugLogRepo } from '../storage/repositories/debug-log-repo.js';
 import { executionLogRepo } from '../storage/repositories/execution-log-repo.js';
 import { getDebugPageHtml } from './debug-page.js';
+import { getConfig } from '../config/index.js';
+import { AutobotsClient } from '../core/autobots-client.js';
 const logger = createLogger('WebServer');
+/**
+ * 构建脚本生成的上下文信息
+ */
+function buildScriptContext(runMode, platform, url, deviceId, packageName) {
+    const context = [];
+    context.push('请根据用户的需求生成自动化测试脚本。');
+    context.push('');
+    if (runMode === 'browser') {
+        context.push('运行环境：浏览器模式');
+        if (url) {
+            context.push(`测试URL：${url}`);
+        }
+    }
+    else {
+        context.push('运行环境：真机模式');
+        context.push(`平台：${platform === 'ios' ? 'iOS' : 'Android'}`);
+        if (deviceId) {
+            context.push(`设备ID：${deviceId}`);
+        }
+        if (packageName) {
+            context.push(`应用包名：${packageName}`);
+        }
+    }
+    context.push('');
+    context.push('请生成符合以下要求的脚本：');
+    context.push('1. 使用 @midscene/web（浏览器模式）或 @midscene/android/@midscene/ios（真机模式）');
+    context.push('2. 脚本应该是可执行的JavaScript代码');
+    context.push('3. 使用aiAction方法执行自然语言指令');
+    context.push('4. 包含必要的初始化和清理代码');
+    return context.join('\n');
+}
+/**
+ * 清理生成的脚本，移除markdown代码块标记
+ */
+function cleanGeneratedScript(script) {
+    // 移除 markdown 代码块标记
+    let cleaned = script;
+    // 移除 ```javascript, ```js, ``` 等代码块开始标记
+    cleaned = cleaned.replace(/```javascript\s*/gi, '');
+    cleaned = cleaned.replace(/```js\s*/gi, '');
+    cleaned = cleaned.replace(/```typescript\s*/gi, '');
+    cleaned = cleaned.replace(/```ts\s*/gi, '');
+    cleaned = cleaned.replace(/```\s*/gi, '');
+    // 移除可能的行内代码标记
+    cleaned = cleaned.replace(/`/g, '');
+    // 移除前后空白
+    cleaned = cleaned.trim();
+    return cleaned;
+}
+function generateScriptFromNaturalLanguage(options) {
+    const { naturalLanguage, runMode, platform, url, deviceId, packageName } = options;
+    // 解析自然语言，提取关键动作
+    const nl = naturalLanguage.toLowerCase();
+    const lines = [];
+    // 生成头部注释
+    lines.push('// ============================================');
+    lines.push('// AI自动生成的自动化测试脚本');
+    lines.push('// ============================================');
+    lines.push('// 生成时间: ' + new Date().toLocaleString('zh-CN'));
+    lines.push('// 运行模式: ' + (runMode === 'browser' ? '浏览器' : '真机'));
+    lines.push('// 平台: ' + (platform === 'android' ? 'Android' : 'iOS'));
+    if (url)
+        lines.push('// 测试URL: ' + url);
+    if (deviceId)
+        lines.push('// 设备ID: ' + deviceId);
+    if (packageName)
+        lines.push('// 包名: ' + packageName);
+    lines.push('// ============================================');
+    lines.push('');
+    if (runMode === 'browser') {
+        // 浏览器模式脚本
+        lines.push('// Midscene Web 自动化测试脚本');
+        lines.push("const { Midscene } = require('@midscene/web');");
+        lines.push('');
+        lines.push('async function main() {');
+        lines.push('  const midscene = new Midscene();');
+        lines.push('');
+        // 解析自然语言生成对应的Web操作
+        if (nl.includes('点击') || nl.includes('tap') || nl.includes('click')) {
+            const match = naturalLanguage.match(/点击[\s\S]*?['"]([^'"]+)['"][\s\S]*?/i) ||
+                naturalLanguage.match(/tap[\s\S]*?['"]([^'"]+)['"]/i) ||
+                naturalLanguage.match(/click[\s\S]*?['"]([^'"]+)['"]/i);
+            if (match) {
+                lines.push(`  // 点击操作`);
+                lines.push(`  await midscene.aiAction('点击 "${match[1]}"');`);
+            }
+            else {
+                lines.push(`  // 点击操作`);
+                lines.push(`  await midscene.aiAction('${naturalLanguage.replace(/'/g, "\\'")}');`);
+            }
+        }
+        else if (nl.includes('输入') || nl.includes('type') || nl.includes('fill')) {
+            const match = naturalLanguage.match(/输入['"]([^'"]+)['"][\s\S]*?/i) ||
+                naturalLanguage.match(/type[\s\S]*?['"]([^'"]+)['"]/i);
+            if (match) {
+                lines.push(`  // 输入操作`);
+                lines.push(`  await midscene.aiAction('输入 "${match[1]}"');`);
+            }
+            else {
+                lines.push(`  // 输入操作`);
+                lines.push(`  await midscene.aiAction('${naturalLanguage.replace(/'/g, "\\'")}');`);
+            }
+        }
+        else if (nl.includes('等待') || nl.includes('wait')) {
+            lines.push(`  // 等待操作`);
+            lines.push(`  await midscene.aiAction('${naturalLanguage.replace(/'/g, "\\'")}');`);
+        }
+        else if (nl.includes('滑动') || nl.includes('scroll') || nl.includes('滚动')) {
+            lines.push(`  // 滚动操作`);
+            lines.push(`  await midscene.aiAction('${naturalLanguage.replace(/'/g, "\\'")}');`);
+        }
+        else {
+            // 默认使用AI动作
+            lines.push('  // 自然语言指令:');
+            lines.push('  // ' + naturalLanguage);
+            lines.push(`  await midscene.aiAction('${naturalLanguage.replace(/'/g, "\\'")}');`);
+        }
+        lines.push('  ');
+        lines.push('  // 可添加更多操作步骤...');
+        lines.push('  ');
+        lines.push('  await midscene.sleep(2000); // 等待2秒查看效果');
+        lines.push('  await midscene.quit();');
+        lines.push('}');
+        lines.push('');
+        lines.push('main().catch(console.error);');
+    }
+    else {
+        // 真机模式脚本
+        const isAndroid = platform === 'android';
+        const agentLib = isAndroid ? '@midscene/android' : '@midscene/ios';
+        const AgentClass = isAndroid ? 'AndroidAgent' : 'IOSAgent';
+        lines.push(`// Midscene ${isAndroid ? 'Android' : 'iOS'} 自动化测试脚本`);
+        lines.push(`const { ${AgentClass} } = require('${agentLib}');`);
+        lines.push('');
+        lines.push('async function main() {');
+        lines.push(`  const agent = new ${AgentClass}();`);
+        if (deviceId)
+            lines.push(`  await agent.setDevice('${deviceId}');`);
+        if (packageName)
+            lines.push(`  await agent.setPackage('${packageName}');`);
+        lines.push('');
+        // 解析自然语言生成对应的移动端操作
+        if (nl.includes('点击') || nl.includes('tap') || nl.includes('click')) {
+            const match = naturalLanguage.match(/点击[\s\S]*?['"]([^'"]+)['"][\s\S]*?/i) ||
+                naturalLanguage.match(/tap[\s\S]*?['"]([^'"]+)['"]/i);
+            if (match) {
+                lines.push(`  // 点击操作`);
+                lines.push(`  await agent.aiAction('点击 "${match[1]}"');`);
+            }
+            else {
+                lines.push(`  // 点击操作`);
+                lines.push(`  await agent.aiAction('${naturalLanguage.replace(/'/g, "\\'")}');`);
+            }
+        }
+        else if (nl.includes('输入') || nl.includes('type') || nl.includes('输入文本')) {
+            const match = naturalLanguage.match(/输入['"]([^'"]+)['"][\s\S]*?/i) ||
+                naturalLanguage.match(/type[\s\S]*?['"]([^'"]+)['"]/i) ||
+                naturalLanguage.match(/输入文本['"]([^'"]+)['"]/i);
+            if (match) {
+                lines.push(`  // 输入操作`);
+                lines.push(`  await agent.aiAction('输入 "${match[1]}"');`);
+            }
+            else {
+                lines.push(`  // 输入操作`);
+                lines.push(`  await agent.aiAction('${naturalLanguage.replace(/'/g, "\\'")}');`);
+            }
+        }
+        else if (nl.includes('滑动') || nl.includes('swipe') || nl.includes('滚动')) {
+            lines.push(`  // 滑动操作`);
+            lines.push(`  await agent.aiAction('${naturalLanguage.replace(/'/g, "\\'")}');`);
+        }
+        else if (nl.includes('启动') || nl.includes('start') || nl.includes('launch')) {
+            lines.push(`  // 启动应用`);
+            lines.push(`  await agent.aiAction('启动应用');`);
+        }
+        else if (nl.includes('截图') || nl.includes('screenshot')) {
+            lines.push(`  // 截图`);
+            lines.push(`  await agent.screenshot();`);
+        }
+        else {
+            // 默认使用AI动作
+            lines.push('  // 自然语言指令:');
+            lines.push('  // ' + naturalLanguage);
+            lines.push(`  await agent.aiAction('${naturalLanguage.replace(/'/g, "\\'")}');`);
+        }
+        lines.push('  ');
+        lines.push('  // 可添加更多操作步骤...');
+        lines.push('  ');
+        lines.push('  await agent.sleep(2000); // 等待2秒查看效果');
+        lines.push('  await agent.quit();');
+        lines.push('}');
+        lines.push('');
+        lines.push('main().catch(console.error);');
+    }
+    return lines.join('\n');
+}
 export class WebServer {
     app;
     config;
@@ -15,6 +213,7 @@ export class WebServer {
         this.app = express();
         this.setupMiddleware();
         this.setupApiRoutes();
+        this.setupDetailRoutes();
         this.setupStaticFiles();
     }
     setupMiddleware() {
@@ -178,8 +377,103 @@ export class WebServer {
                 res.json({ success: false, message: error.message });
             }
         });
+        // AI脚本生成API
+        api.post('/ai/generate-script', async (req, res) => {
+            try {
+                const { naturalLanguage, runMode, platform, url, deviceId, packageName } = req.body;
+                if (!naturalLanguage || naturalLanguage.trim() === '') {
+                    res.json({ success: false, message: '请输入自然语言描述' });
+                    return;
+                }
+                // 获取脚本生成配置
+                const config = getConfig();
+                const scriptGenConfig = config.scriptGeneration;
+                // 如果配置了真实的AI服务，使用AutobotsClient调用
+                if (scriptGenConfig && scriptGenConfig.enabled) {
+                    logger.info('[generate-script] 使用Autobots API生成脚本, baseUrl: ' + scriptGenConfig.baseUrl);
+                    const client = new AutobotsClient({
+                        enabled: scriptGenConfig.enabled,
+                        baseUrl: scriptGenConfig.baseUrl,
+                        agentId: scriptGenConfig.agentId,
+                        token: scriptGenConfig.token,
+                        connectTimeout: scriptGenConfig.connectTimeout || 30000,
+                        requestTimeout: scriptGenConfig.requestTimeout || 120000,
+                        socketTimeout: scriptGenConfig.socketTimeout || 300000,
+                    });
+                    // 构建上下文信息
+                    const contextInfo = buildScriptContext(runMode, platform, url, deviceId, packageName);
+                    const prompt = contextInfo + '\n\n用户需求：' + naturalLanguage.trim();
+                    // 调用Autobots API生成脚本（流式）
+                    let generatedScript = '';
+                    for await (const result of client.generateScriptStream(prompt)) {
+                        if (result.success) {
+                            // 处理特殊标记
+                            if (result.content.startsWith('FULL_CONTENT:')) {
+                                generatedScript = result.content.substring(13);
+                            }
+                            else {
+                                generatedScript += result.content;
+                            }
+                        }
+                        else {
+                            logger.error('[generate-script] Autobots API错误: ' + result.error);
+                            throw new Error(result.error);
+                        }
+                    }
+                    // 清理生成的脚本（移除可能的markdown标记）
+                    const cleanedScript = cleanGeneratedScript(generatedScript);
+                    logger.info('[generate-script] 脚本生成成功，长度: ' + cleanedScript.length);
+                    res.json({
+                        success: true,
+                        script: cleanedScript,
+                        message: '脚本生成成功'
+                    });
+                }
+                else {
+                    // 没有配置AI服务，使用本地生成
+                    logger.info('[generate-script] 未配置Autobots API，使用本地生成');
+                    const script = generateScriptFromNaturalLanguage({
+                        naturalLanguage: naturalLanguage.trim(),
+                        runMode: runMode || 'browser',
+                        platform: platform || 'android',
+                        url: url || '',
+                        deviceId: deviceId || '',
+                        packageName: packageName || ''
+                    });
+                    res.json({
+                        success: true,
+                        script,
+                        message: '本地模式生成成功'
+                    });
+                }
+            }
+            catch (error) {
+                logger.warn(`AI脚本生成失败: ${error.message}`);
+                res.json({ success: false, message: error.message });
+            }
+        });
         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));
@@ -200,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>
@@ -285,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;
@@ -398,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();
@@ -416,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();
 }
 
@@ -424,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 '-';
@@ -443,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();
 }
 
@@ -466,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>';
@@ -508,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>';
   }
@@ -520,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;
@@ -536,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">';
@@ -629,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>`;