@aiscene/aiserver 1.2.3 → 1.2.4

package/dist/web/debug-page.js

@@ -0,0 +1,1388 @@
+/**
+ * 调试页面前端HTML - 仿照 electron-shadcn 项目的调试页面
+ * 功能：脚本编辑、用例管理、调试执行、终端输出
+ * 所有文本使用中文
+ */
+export function getDebugPageHtml() {
+    return `
+<style>
+/* ===== 调试页面样式 - 全屏白色布局 ===== */
+.debug-page{display:flex;height:100vh;gap:0;overflow:hidden;background:#f8fafc}
+html,body{overflow:hidden;margin:0;padding:0}
+.debug-sidebar{width:320px;min-width:280px;max-width:400px;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;background:#fff}
+.debug-sidebar-header{padding:12px 16px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;background:#fff}
+.debug-sidebar-header h3{font-size:14px;font-weight:600;color:#1e293b}
+.debug-sidebar-body{flex:1;overflow-y:auto;padding:16px}
+.debug-sidebar-body .form-group{margin-bottom:16px}
+.debug-sidebar-body .form-group label{display:block;font-size:12px;color:#64748b;margin-bottom:6px;font-weight:500}
+.debug-sidebar-body .form-group input,.debug-sidebar-body .form-group select{width:100%;padding:8px 12px;background:#fff;border:1px solid #cbd5e1;border-radius:6px;color:#1e293b;font-size:13px;outline:none;transition:border-color .2s}
+.debug-sidebar-body .form-group input:focus,.debug-sidebar-body .form-group select:focus{border-color:#38bdf8}
+.debug-sidebar-body .form-group select option{background:#fff;color:#1e293b}
+.debug-sidebar-body .checkbox-group{display:flex;align-items:center;gap:8px;margin-bottom:12px}
+.debug-sidebar-body .checkbox-group input[type=checkbox]{accent-color:#38bdf8;width:16px;height:16px}
+.debug-sidebar-body .checkbox-group label{font-size:13px;color:#475569;cursor:pointer}
+.debug-content{flex:1;display:flex;flex-direction:column;min-width:0;background:#fff}
+.debug-editor-header{padding:8px 16px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;background:#fff}
+.debug-editor-header .title{font-size:13px;font-weight:600;color:#1e293b;display:flex;align-items:center;gap:6px}
+.debug-editor-header .actions{display:flex;gap:4px}
+.debug-editor-area{flex:1;position:relative;min-height:0}
+.debug-editor-area textarea{width:100%;height:100%;background:#fff;color:#1e293b;border:1px solid #e2e8f0;padding:16px;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:13px;line-height:1.6;resize:none;outline:none}
+.debug-terminal{height:280px;min-height:180px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;background:#f8fafc}
+.debug-terminal-header{padding:8px 16px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;background:#fff}
+.debug-terminal-header .title{font-size:11px;color:#64748b;display:flex;align-items:center;gap:6px}
+.debug-terminal-body{flex:1;overflow-y:auto;padding:12px 16px;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:12px;line-height:1.6;background:#fff}
+.debug-terminal-body .log-line{padding:2px 0;border-bottom:1px solid #f1f5f9}
+.debug-terminal-body .log-time{color:#94a3b8;margin-right:8px}
+.debug-terminal-body .log-info{color:#0284c7}
+.debug-terminal-body .log-warn{color:#d97706}
+.debug-terminal-body .log-error{color:#dc2626}
+.debug-terminal-body .log-success{color:#16a34a}
+/* 实时报告面板 - 右侧独立列（白色主题） */
+.debug-report-panel{width:480px;min-width:400px;max-width:600px;border-left:1px solid #e2e8f0;display:flex;flex-direction:column;background:#fff}
+.debug-report-panel.hidden{display:none}
+.debug-report-header{padding:8px 16px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;background:#fff}
+.debug-report-header .title{font-size:11px;color:#1e293b;display:flex;align-items:center;gap:6px;font-weight:600}
+.debug-report-body{flex:1;overflow-y:auto;display:flex;min-height:0;background:#fff}
+.debug-report-timeline{width:260px;min-width:200px;border-right:1px solid #e2e8f0;overflow-y:auto;padding:8px 0;background:#f8fafc}
+.debug-report-detail{flex:1;overflow-y:auto;padding:16px;background:#fff}
+.rtl-step{padding:6px 12px;cursor:pointer;display:flex;align-items:flex-start;gap:8px;border-left:2px solid transparent;transition:background .15s}
+.rtl-step:hover{background:#e2e8f0}
+.rtl-step.active{background:#dbeafe;border-left-color:#2563eb}
+.rtl-step-dot{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;margin-top:1px}
+.rtl-step-dot.status-finished{background:#dcfce7;color:#16a34a}
+.rtl-step-dot.status-running{background:#fef3c7;color:#d97706}
+.rtl-step-dot.status-failed{background:#fee2e2;color:#dc2626}
+.rtl-step-dot.status-pending{background:#f1f5f9;color:#64748b}
+.rtl-step-info{flex:1;min-width:0}
+.rtl-step-name{font-size:12px;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rtl-step-meta{font-size:10px;color:#64748b;margin-top:2px;display:flex;gap:6px;align-items:center}
+.rtl-step-type{padding:1px 4px;border-radius:3px;font-size:9px;font-weight:600}
+.rtl-step-type.type-insight{background:#dbeafe;color:#2563eb}
+.rtl-step-type.type-planning{background:#fef3c7;color:#d97706}
+.rtl-step-type.type-action{background:#dcfce7;color:#16a34a}
+.rtl-step-type.type-other{background:#f1f5f9;color:#64748b}
+.rrd-header{margin-bottom:12px;display:flex;align-items:center;gap:8px}
+.rrd-index{width:22px;height:22px;border-radius:50%;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
+.rrd-name{font-size:14px;font-weight:600;color:#1e293b}
+.rrd-section{margin-bottom:12px;background:#f8fafc;border-radius:6px;padding:12px}
+.rrd-section-title{font-size:11px;color:#64748b;font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
+.rrd-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
+.rrd-info-item{font-size:11px}
+.rrd-info-label{color:#94a3b8;margin-bottom:2px}
+.rrd-info-value{color:#1e293b}
+.rrd-thought{background:#fff;border:1px solid #e2e8f0;border-radius:4px;padding:10px;font-size:12px;color:#475569;white-space:pre-wrap;line-height:1.5}
+.rrd-task{border-bottom:1px solid #e2e8f0;padding:8px 0}
+.rrd-task:last-child{border-bottom:none}
+.rrd-task-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
+.rrd-task-type{font-size:11px;color:#1e293b;font-weight:500}
+.rrd-task-status{font-size:10px;padding:2px 6px;border-radius:8px;font-weight:600}
+.rrd-task-status.status-finished{background:#dcfce7;color:#16a34a}
+.rrd-task-status.status-running{background:#fef3c7;color:#d97706}
+.rrd-task-status.status-failed{background:#fee2e2;color:#dc2626}
+.rrd-task-status.status-pending{background:#f1f5f9;color:#64748b}
+.rrd-task-body{font-size:11px;color:#475569}
+.rrd-task-param,.rrd-task-output,.rrd-task-error{margin-top:4px;padding:6px;background:#f8fafc;border-radius:4px;font-family:'SF Mono',Monaco,Consolas,monospace;font-size:10px;white-space:pre-wrap;word-break:break-all}
+.rrd-task-error{border:1px solid #fecaca;color:#dc2626}
+.rrd-progress{display:flex;align-items:center;gap:8px;font-size:11px;color:#64748b}
+.rrd-progress-bar{flex:1;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden}
+.rrd-progress-fill{height:100%;background:#2563eb;border-radius:2px;transition:width .3s}
+.rrd-empty{text-align:center;color:#94a3b8;padding:40px 20px;font-size:13px}
+/* 截图展示 */
+.rrd-screenshot{margin-top:8px;border-radius:6px;overflow:hidden;border:1px solid #e2e8f0;background:#fff}
+.rrd-screenshot img{width:100%;display:block;cursor:pointer;transition:opacity .2s}
+.rrd-screenshot img:hover{opacity:0.9}
+.rrd-screenshot-label{font-size:10px;color:#64748b;padding:4px 8px;text-align:center}
+.debug-statusbar{height:28px;background:#fff;border-top:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
+.debug-statusbar .left{display:flex;align-items:center;gap:12px;font-size:11px;color:#64748b}
+.debug-statusbar .right{display:flex;align-items:center;gap:8px}
+.debug-statusbar .executing{color:#d97706;display:flex;align-items:center;gap:4px}
+.debug-statusbar .executing .spinner{width:12px;height:12px;border:2px solid #fef3c7;border-top-color:#d97706;border-radius:50%;animation:spin 1s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+/* 弹窗样式 */
+.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;display:flex;align-items:center;justify-content:center}
+.modal{background:#fff;border:1px solid #e2e8f0;border-radius:12px;max-width:900px;width:90%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
+.modal-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between}
+.modal-header h3{font-size:16px;font-weight:600;color:#1e293b}
+.modal-header .close-btn{background:none;border:none;color:#64748b;cursor:pointer;font-size:20px;padding:4px 8px;border-radius:4px}
+.modal-header .close-btn:hover{color:#1e293b;background:#f1f5f9}
+.modal-body{flex:1;overflow-y:auto;padding:24px}
+.modal-footer{padding:16px 24px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px}
+.modal-footer .btn{padding:8px 20px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .2s}
+.modal-footer .btn-cancel{background:#f1f5f9;color:#64748b}
+.modal-footer .btn-cancel:hover{background:#e2e8f0}
+.modal-footer .btn-primary{background:#2563eb;color:#fff}
+.modal-footer .btn-primary:hover{background:#1d4ed8}
+
+/* 用例选择器 */
+.case-selector{display:flex;gap:16px;height:60vh}
+.case-selector-left{width:35%;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
+.case-selector-right{flex:1;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
+.case-selector-header{padding:8px 12px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:12px;font-weight:600;color:#64748b}
+.case-selector-list{flex:1;overflow-y:auto;padding:8px}
+.folder-item{padding:6px 8px;border-radius:4px;cursor:pointer;font-size:13px;color:#475569;display:flex;align-items:center;gap:6px;transition:background .2s}
+.folder-item:hover{background:#f1f5f9}
+.folder-item.active{background:#dbeafe;color:#2563eb}
+.folder-item .arrow{font-size:10px;color:#64748b;transition:transform .2s}
+.folder-item .arrow.expanded{transform:rotate(90deg)}
+.case-item{padding:10px 12px;border-radius:6px;cursor:pointer;font-size:13px;color:#475569;transition:background .2s;border:1px solid transparent}
+.case-item:hover{background:#f1f5f9}
+.case-item.selected{background:#dbeafe;border-color:#bfdbfe}
+.case-item .case-name{font-weight:500;margin-bottom:2px}
+.case-item .case-desc{font-size:11px;color:#94a3b8}
+
+/* 保存用例弹窗 */
+.save-case-form .form-group{margin-bottom:16px}
+.save-case-form .form-group label{display:block;font-size:12px;color:#64748b;margin-bottom:6px;font-weight:500}
+.save-case-form .form-group input,.save-case-form .form-group select{width:100%;padding:8px 12px;background:#fff;border:1px solid #cbd5e1;border-radius:6px;color:#1e293b;font-size:13px;outline:none}
+.save-case-form .form-group input:focus,.save-case-form .form-group select:focus{border-color:#2563eb}
+
+/* 历史记录侧边栏 */
+.history-drawer{position:fixed;top:0;right:0;width:360px;height:100vh;background:#fff;border-left:1px solid #e2e8f0;z-index:999;transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column}
+.history-drawer.open{transform:translateX(0)}
+.history-drawer-header{padding:16px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between}
+.history-drawer-header h3{font-size:14px;font-weight:600;color:#1e293b}
+.history-drawer-body{flex:1;overflow-y:auto;padding:12px}
+.history-item{padding:12px;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:background .2s;margin-bottom:8px}
+.history-item:hover{background:#f8fafc}
+.history-item .meta{display:flex;justify-content:space-between;margin-bottom:4px}
+.history-item .status{font-size:11px;padding:2px 8px;border-radius:12px;font-weight:600}
+.history-item .status.success{background:#dcfce7;color:#16a34a}
+.history-item .status.failed{background:#fee2e2;color:#dc2626}
+.history-item .time{font-size:11px;color:#94a3b8}
+.history-item .url{font-size:13px;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.history-item .detail{font-size:11px;color:#94a3b8;margin-top:4px}
+
+/* 生成脚本按钮样式 */
+.btn-icon{padding:4px 10px;border-radius:4px;border:none;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s;display:flex;align-items:center;gap:4px}
+.btn-ghost{background:#f1f5f9;color:#475569}
+.btn-ghost:hover{background:#e2e8f0;color:#1e293b}
+.btn-danger{background:#dc2626;color:#fff}
+.btn-danger:hover{background:#ef4444}
+.btn-blue{background:#2563eb;color:#fff}
+.btn-blue:hover{background:#1d4ed8}
+</style>
+
+<div class="debug-page" id="debug-page-content">
+  <!-- 左侧配置面板 -->
+  <div class="debug-sidebar">
+    <div class="debug-sidebar-header">
+      <h3>调试面板</h3>
+      <button class="btn-icon btn-ghost" onclick="toggleHistoryDrawer()" title="历史记录">&#128218;</button>
+    </div>
+    <div class="debug-sidebar-body">
+      <div class="form-group">
+        <label>运行模式</label>
+        <select id="debug-runMode" onchange="onRunModeChange()">
+          <option value="device">真机</option>
+          <option value="browser">浏览器</option>
+        </select>
+      </div>
+
+      <div id="debug-device-section">
+        <div class="form-group">
+          <label>平台</label>
+          <select id="debug-platform" onchange="onPlatformChange()">
+            <option value="android">Android</option>
+            <option value="ios">iOS</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>设备 <button class="btn-icon btn-ghost" onclick="refreshDevices()" style="float:right;font-size:11px">&#8635; 刷新</button></label>
+          <select id="debug-device">
+            <option value="">加载中...</option>
+          </select>
+        </div>
+        <div class="form-group" id="debug-package-section">
+          <label id="debug-package-label">包名</label>
+          <select id="debug-package-preset" onchange="onPackagePresetChange()">
+            <option value="com.jingdong.app.mall">京东</option>
+            <option value="com.jd.dh">京东医生</option>
+            <option value="com.jd.jdhealth">京东健康</option>
+            <option value="custom">自定义</option>
+          </select>
+          <input id="debug-package-custom" style="display:none;margin-top:8px" placeholder="输入包名" oninput="syncPackageValue()">
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label>测试地址</label>
+        <input id="debug-url" placeholder="输入测试URL">
+      </div>
+
+      <div id="debug-browser-options" style="display:none">
+        <div class="checkbox-group">
+          <input type="checkbox" id="debug-mobileMode">
+          <label for="debug-mobileMode">模拟移动端</label>
+        </div>
+      </div>
+
+      <div class="checkbox-group">
+        <input type="checkbox" id="debug-skipAppium" checked>
+        <label for="debug-skipAppium">跳过 Appium 服务</label>
+      </div>
+
+      <div class="form-group">
+        <label>登录用户名（选填）</label>
+        <input id="debug-loginUser" placeholder="输入用户名">
+      </div>
+      <div class="form-group">
+        <label>登录密码（选填）</label>
+        <input id="debug-loginPass" type="password" placeholder="输入密码">
+      </div>
+
+      <div style="padding-top:16px;display:flex;flex-direction:column;gap:8px">
+        <button id="debug-execute-btn" class="btn-icon btn-blue" style="width:100%;justify-content:center;padding:10px" onclick="handleDebugExecute()">
+          &#9654; 运行任务
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 右侧内容区 -->
+  <div class="debug-content">
+    <!-- 脚本编辑器头部 -->
+    <div class="debug-editor-header">
+      <div class="title">&#128221; 脚本编辑器</div>
+      <div class="actions">
+        <button class="btn-icon btn-ghost" onclick="openCaseSelector()">&#128193; 选择用例</button>
+        <button class="btn-icon btn-ghost" onclick="openSaveCaseDialog()">&#128190; 保存用例</button>
+        <button class="btn-icon btn-ghost" onclick="handleGenerateScript()">&#9889; 生成脚本</button>
+        <button class="btn-icon btn-ghost" onclick="handleClearEditor()">&#128465; 清空</button>
+      </div>
+    </div>
+
+    <!-- 脚本编辑区 -->
+    <div class="debug-editor-area">
+      <textarea id="debug-script" placeholder="// 在此编写调试脚本\n\n" spellcheck="false"></textarea>
+    </div>
+
+    <!-- 终端面板 -->
+    <div class="debug-terminal" id="debug-terminal">
+      <div class="debug-terminal-header">
+        <div class="title">&#128187; 终端输出</div>
+        <div style="display:flex;gap:4px">
+          <button id="debug-report-btn" class="btn-icon btn-ghost" style="display:none" onclick="openReport()">&#128202; 报告</button>
+          <button class="btn-icon btn-ghost" onclick="clearTerminal()">&#128465; 清空</button>
+        </div>
+      </div>
+      <div class="debug-terminal-body" id="debug-terminal-body">
+        <div style="text-align:center;color:#64748b;padding:40px 20px">
+          <div style="font-size:32px;margin-bottom:8px;opacity:0.5">&#128187;</div>
+          <div style="font-style:italic">暂无输出...</div>
+          <div style="font-size:11px;margin-top:8px;color:#475569">运行任务后，输出将显示在这里</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部状态栏 -->
+    <div class="debug-statusbar">
+      <div class="left">
+        <span id="debug-exec-status"></span>
+        <span id="debug-task-id" style="color:#475569"></span>
+      </div>
+      <div class="right">
+        <button class="btn-icon btn-ghost" onclick="toggleTerminal()" style="font-size:11px">&#128187; 终端 ▼</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 实时报告面板 - 右侧独立列 -->
+  <div class="debug-report-panel hidden" id="debug-report-panel">
+    <div class="debug-report-header">
+      <div class="title">&#128202; 执行报告</div>
+      <div style="display:flex;align-items:center;gap:8px">
+        <div class="rrd-progress" id="report-progress"></div>
+        <button class="btn-icon btn-ghost" onclick="toggleReportPanel()">&#10005;</button>
+      </div>
+    </div>
+    <div class="debug-report-body" id="debug-report-body">
+      <div class="debug-report-timeline" id="report-timeline"></div>
+      <div class="debug-report-detail" id="report-detail">
+        <div class="rrd-empty">等待执行步骤...</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 历史记录侧边栏 -->
+<div class="history-drawer" id="history-drawer">
+  <div class="history-drawer-header">
+    <h3>历史记录</h3>
+    <button class="btn-icon btn-ghost" onclick="toggleHistoryDrawer()">&#10005;</button>
+  </div>
+  <div class="history-drawer-body" id="history-list">
+    <div style="text-align:center;color:#64748b;padding:40px 20px">暂无历史记录</div>
+  </div>
+</div>
+
+<!-- 用例选择弹窗 -->
+<div class="modal-overlay" id="case-selector-modal" style="display:none" onclick="closeCaseSelectorOnOverlay(event)">
+  <div class="modal" style="max-width:900px">
+    <div class="modal-header">
+      <h3>选择测试用例</h3>
+      <button class="close-btn" onclick="closeCaseSelector()">&#10005;</button>
+    </div>
+    <div class="modal-body" style="padding:0">
+      <div class="case-selector">
+        <div class="case-selector-left">
+          <div class="case-selector-header">文件夹</div>
+          <div class="case-selector-list" id="case-folder-list">
+            <div style="text-align:center;color:#64748b;padding:20px">加载中...</div>
+          </div>
+        </div>
+        <div class="case-selector-right">
+          <div class="case-selector-header" style="display:flex;align-items:center;justify-content:space-between">
+            <span id="case-list-title">测试用例</span>
+            <div style="display:flex;gap:8px;align-items:center">
+              <input id="case-search-input" placeholder="搜索用例" style="padding:4px 8px;background:#fff;border:1px solid #cbd5e1;border-radius:4px;color:#1e293b;font-size:12px;width:160px">
+              <button class="btn-icon btn-ghost" onclick="searchCases()" style="font-size:11px">搜索</button>
+            </div>
+          </div>
+          <div class="case-selector-list" id="case-list">
+            <div style="text-align:center;color:#64748b;padding:20px">请从左侧选择文件夹</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-cancel" onclick="closeCaseSelector()">取消</button>
+      <button class="btn btn-primary" onclick="confirmCaseSelection()">确定</button>
+    </div>
+  </div>
+</div>
+
+<!-- 保存用例弹窗 -->
+<div class="modal-overlay" id="save-case-modal" style="display:none" onclick="closeSaveCaseOnOverlay(event)">
+  <div class="modal" style="max-width:500px">
+    <div class="modal-header">
+      <h3 id="save-case-title">保存测试用例</h3>
+      <button class="close-btn" onclick="closeSaveCaseDialog()">&#10005;</button>
+    </div>
+    <div class="modal-body">
+      <div class="save-case-form">
+        <div class="form-group">
+          <label>用例名称</label>
+          <input id="save-case-name" placeholder="例如：登录测试">
+        </div>
+        <div class="form-group">
+          <label>所属文件夹</label>
+          <select id="save-case-folder">
+            <option value="">加载中...</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-cancel" onclick="closeSaveCaseDialog()">取消</button>
+      <button class="btn btn-primary" onclick="handleSaveCase()">保存</button>
+    </div>
+  </div>
+</div>
+
+<script>
+// ===== 调试页面状态 =====
+const debugState = {
+  isExecuting: false,
+  currentTaskId: null,
+  logs: [],
+  reportPath: '',
+  ws: null,
+  wsConnected: false,
+  // 配置
+  runMode: 'device',
+  platform: 'android',
+  selectedDevice: '',
+  devices: [],
+  // 用例
+  currentTestCase: null,
+  folderTree: [],
+  selectedFolderId: null,
+  // 历史
+  history: [],
+  // 实时报告
+  reportData: null, // { dump, sessionId, deviceId }
+  executions: [],   // 解析后的执行步骤
+  activeStepIndex: -1,
+  reportPanelVisible: false,
+};
+
+// 初始化加载历史
+(function(){
+  try {
+    const saved = localStorage.getItem('debug_history');
+    if(saved) debugState.history = JSON.parse(saved);
+  } catch(e){}
+})();
+
+// ===== 运行模式切换 =====
+function onRunModeChange() {
+  debugState.runMode = document.getElementById('debug-runMode').value;
+  document.getElementById('debug-device-section').style.display = debugState.runMode === 'device' ? '' : 'none';
+  document.getElementById('debug-browser-options').style.display = debugState.runMode === 'browser' ? '' : 'none';
+  if(debugState.runMode === 'device') refreshDevices();
+}
+
+function onPlatformChange() {
+  debugState.platform = document.getElementById('debug-platform').value;
+  const label = document.getElementById('debug-package-label');
+  label.textContent = debugState.platform === 'android' ? '包名' : 'Bundle ID';
+  document.getElementById('debug-package-preset').querySelector('option[value=custom]').textContent = '自定义';
+}
+
+function onPackagePresetChange() {
+  const v = document.getElementById('debug-package-preset').value;
+  const custom = document.getElementById('debug-package-custom');
+  if(v === 'custom') {
+    custom.style.display = '';
+    custom.focus();
+  } else {
+    custom.style.display = 'none';
+  }
+}
+
+function syncPackageValue() {}
+
+function getPackageName() {
+  const preset = document.getElementById('debug-package-preset').value;
+  if(preset === 'custom') return document.getElementById('debug-package-custom').value;
+  return preset;
+}
+
+// ===== 设备加载 =====
+async function refreshDevices() {
+  try {
+    const devs = await (await fetch('/api/debug/devices')).json();
+    debugState.devices = devs || [];
+    const sel = document.getElementById('debug-device');
+    sel.innerHTML = '';
+    if(debugState.devices.length === 0) {
+      sel.innerHTML = '<option value="">暂无在线设备</option>';
+    } else {
+      debugState.devices.forEach(d => {
+        const opt = document.createElement('option');
+        opt.value = d.serialNumber;
+        opt.textContent = (d.model || d.serialNumber) + ' (' + d.serialNumber + ')';
+        sel.appendChild(opt);
+      });
+      if(!debugState.selectedDevice && debugState.devices.length > 0) {
+        debugState.selectedDevice = debugState.devices[0].serialNumber;
+      }
+    }
+  } catch(e) {
+    console.error('加载设备失败:', e);
+  }
+}
+
+// ===== WebSocket 调试连接 =====
+function getDebugWsUrl() {
+  const proto = location.protocol === 'https:' ? 'wss://' : 'ws://';
+  return proto + (location.hostname || 'localhost') + ':8002';
+}
+
+function connectDebugWs() {
+  if(debugState.ws && debugState.ws.readyState === WebSocket.OPEN) return;
+  try {
+    debugState.ws = new WebSocket(getDebugWsUrl());
+    debugState.ws.onopen = () => {
+      debugState.wsConnected = true;
+      addDebugLog('WebSocket 已连接', 'info');
+    };
+    debugState.ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        handleDebugWsMessage(msg);
+      } catch(e) {}
+    };
+    debugState.ws.onclose = () => {
+      debugState.wsConnected = false;
+      addDebugLog('WebSocket 已断开', 'warn');
+      setTimeout(() => { if(debugState.isExecuting) connectDebugWs(); }, 3000);
+    };
+    debugState.ws.onerror = () => {
+      debugState.wsConnected = false;
+    };
+  } catch(e) {
+    console.error('WebSocket 连接失败:', e);
+  }
+}
+
+function handleDebugWsMessage(msg) {
+  switch(msg.type) {
+    case 'session_created':
+      debugState.currentTaskId = msg.sessionId;
+      updateTaskIdDisplay();
+      break;
+    case 'debug_started':
+      addDebugLog('调试会话已启动: ' + msg.sessionId, 'info');
+      break;
+    case 'log_output':
+      addDebugLog(msg.content || '', msg.level === 'error' ? 'error' : 'info');
+      break;
+    case 'debug_completed':
+      debugState.isExecuting = false;
+      updateExecuteButton();
+      addDebugLog('调试执行完成' + (msg.success ? ' (成功)' : ' (失败)'), msg.success ? 'success' : 'error');
+      saveToHistory(msg.success ? 'success' : 'failed');
+      // 最终报告更新
+      if(msg.dump) {
+        updateReportDump(msg.dump, msg.sessionId);
+      }
+      break;
+    case 'debug_error':
+      debugState.isExecuting = false;
+      updateExecuteButton();
+      addDebugLog('调试错误: ' + (msg.error || ''), 'error');
+      saveToHistory('failed');
+      break;
+    case 'action_result':
+      addDebugLog('动作执行' + (msg.success ? '成功' : '失败'), msg.success ? 'success' : 'error');
+      // 更新报告数据
+      if(msg.dump) {
+        updateReportDump(msg.dump, msg.sessionId);
+      }
+      break;
+    case 'action_dump':
+      // 实时dump数据更新
+      if(msg.dump) {
+        updateReportDump(msg.dump, msg.sessionId);
+      }
+      break;
+    case 'task_log':
+      addDebugLog(msg.content || '', msg.level || 'info');
+      break;
+    default:
+      // 其他消息忽略
+      break;
+  }
+  // 检查报告路径
+  if(msg.content && typeof msg.content === 'string') {
+    const reportMatch = msg.content.match(/Midscene - report file updated:\\s*(\\/[^\\s]+\\.html)/g);
+    if(reportMatch && reportMatch.length > 0) {
+      debugState.reportPath = reportMatch[reportMatch.length - 1].replace(/Midscene - report file updated:\\s*/, '');
+      document.getElementById('debug-report-btn').style.display = '';
+    }
+  }
+}
+
+// ===== 调试执行 =====
+async function handleDebugExecute() {
+  const script = document.getElementById('debug-script').value.trim();
+  if(!script || script === '// 在此编写调试脚本') {
+    alert('请输入脚本内容');
+    return;
+  }
+
+  const runMode = document.getElementById('debug-runMode').value;
+  const deviceId = runMode === 'device' ? document.getElementById('debug-device').value : undefined;
+
+  if(runMode === 'device' && !deviceId) {
+    alert('请选择设备');
+    return;
+  }
+
+  debugState.isExecuting = true;
+  debugState.logs = [];
+  debugState.reportPath = '';
+  clearTerminal();
+  updateExecuteButton();
+  addDebugLog('开始执行 (' + (runMode === 'device' ? '真机' : '浏览器') + ')...', 'info');
+
+  // 连接WebSocket
+  connectDebugWs();
+
+  // 等待连接就绪
+  const waitForWs = () => new Promise(resolve => {
+    if(debugState.wsConnected) return resolve();
+    const check = setInterval(() => {
+      if(debugState.wsConnected) { clearInterval(check); resolve(); }
+    }, 100);
+    setTimeout(() => { clearInterval(check); resolve(); }, 5000);
+  });
+
+  await waitForWs();
+
+  if(!debugState.wsConnected) {
+    addDebugLog('WebSocket 连接失败，请检查服务是否运行', 'error');
+    debugState.isExecuting = false;
+    updateExecuteButton();
+    return;
+  }
+
+  // 发送调试请求
+  const request = {
+    type: 'start_debug',
+    naturalLanguage: script,
+    runMode: runMode,
+    deviceId: deviceId,
+    url: document.getElementById('debug-url').value || undefined,
+    platform: runMode === 'device' ? document.getElementById('debug-platform').value : undefined,
+    packageName: runMode === 'device' ? getPackageName() : undefined,
+    mobileMode: document.getElementById('debug-mobileMode')?.checked || false,
+    isRnUrl: false,
+  };
+
+  debugState.ws.send(JSON.stringify(request));
+  addDebugLog('调试请求已发送', 'info');
+}
+
+function handleDebugStop() {
+  if(debugState.currentTaskId && debugState.ws && debugState.wsConnected) {
+    debugState.ws.send(JSON.stringify({
+      type: 'stop_debug',
+      sessionId: debugState.currentTaskId,
+    }));
+    addDebugLog('正在停止执行...', 'info');
+  }
+  debugState.isExecuting = false;
+  debugState.currentTaskId = null;
+  updateExecuteButton();
+  updateTaskIdDisplay();
+}
+
+function updateExecuteButton() {
+  const btn = document.getElementById('debug-execute-btn');
+  if(debugState.isExecuting) {
+    btn.innerHTML = '&#9632; 停止任务';
+    btn.className = 'btn-icon btn-danger';
+    btn.style = 'width:100%;justify-content:center;padding:10px';
+    btn.onclick = handleDebugStop;
+    document.getElementById('debug-exec-status').innerHTML = '<span class="executing"><span class="spinner"></span> 执行中...</span>';
+  } else {
+    btn.innerHTML = '&#9654; 运行任务';
+    btn.className = 'btn-icon btn-blue';
+    btn.style = 'width:100%;justify-content:center;padding:10px';
+    btn.onclick = handleDebugExecute;
+    document.getElementById('debug-exec-status').innerHTML = '';
+  }
+}
+
+function updateTaskIdDisplay() {
+  const el = document.getElementById('debug-task-id');
+  el.textContent = debugState.currentTaskId ? '任务ID: ' + debugState.currentTaskId.slice(0, 12) : '';
+}
+
+// ===== 终端输出 =====
+function addDebugLog(message, level) {
+  const time = new Date().toLocaleTimeString();
+  debugState.logs.push({ message, level, time });
+
+  const body = document.getElementById('debug-terminal-body');
+  // 第一次添加时清除占位
+  if(debugState.logs.length === 1) body.innerHTML = '';
+
+  const div = document.createElement('div');
+  div.className = 'log-line';
+  const levelClass = level === 'error' ? 'log-error' : level === 'warn' ? 'log-warn' : level === 'success' ? 'log-success' : 'log-info';
+  div.innerHTML = '<span class="log-time">' + escHtml(time) + '</span><span class="' + levelClass + '">[' + (level || 'info').toUpperCase() + ']</span> ' + escHtml(message);
+  body.appendChild(div);
+  body.scrollTop = body.scrollHeight;
+}
+
+function clearTerminal() {
+  debugState.logs = [];
+  debugState.reportPath = '';
+  debugState.reportData = null;
+  debugState.executions = [];
+  debugState.activeStepIndex = -1;
+  const reportBody = document.getElementById('debug-report-body');
+  if(reportBody) {
+    // 恢复子元素结构（不能直接清空innerHTML，否则后续getElementById找不到）
+    reportBody.innerHTML = '<div class="debug-report-timeline" id="report-timeline"></div><div class="debug-report-detail" id="report-detail"><div class="rrd-empty">等待执行步骤...</div></div>';
+  }
+  const reportPanel = document.getElementById('debug-report-panel');
+  if(reportPanel) reportPanel.classList.add('hidden');
+  debugState.reportPanelVisible = false;
+  const reportBtn = document.getElementById('debug-report-btn');
+  if(reportBtn) reportBtn.style.display = 'none';
+  document.getElementById('debug-terminal-body').innerHTML = '<div style="text-align:center;color:#64748b;padding:40px 20px"><div style="font-size:32px;margin-bottom:8px;opacity:0.5">&#128187;</div><div style="font-style:italic">暂无输出...</div><div style="font-size:11px;margin-top:8px;color:#475569">运行任务后，输出将显示在这里</div></div>';
+}
+
+function toggleTerminal() {
+  const t = document.getElementById('debug-terminal');
+  t.style.display = t.style.display === 'none' ? '' : 'none';
+}
+
+// ===== 实时报告 =====
+function toggleReportPanel() {
+  const panel = document.getElementById('debug-report-panel');
+  debugState.reportPanelVisible = !debugState.reportPanelVisible;
+  if(debugState.reportPanelVisible) {
+    panel.classList.remove('hidden');
+  } else {
+    panel.classList.add('hidden');
+  }
+}
+
+function updateReportDump(dumpStr, sessionId) {
+  try {
+    // 显示报告面板
+    if(!debugState.reportPanelVisible) {
+      const panel = document.getElementById('debug-report-panel');
+      panel.classList.remove('hidden');
+      debugState.reportPanelVisible = true;
+    }
+
+    // 解析 dump
+    let dump = dumpStr;
+    if(typeof dump === 'string') {
+      try { dump = JSON.parse(dump); } catch(e) { return; }
+    }
+
+    const executions = dump.executions || [];
+    debugState.reportData = { dump, sessionId };
+    debugState.executions = executions;
+
+    // 自动选中最新步骤
+    if(executions.length > 0 && debugState.activeStepIndex === -1) {
+      debugState.activeStepIndex = executions.length - 1;
+    } else if(executions.length > (debugState.executions.length || 0)) {
+      debugState.activeStepIndex = executions.length - 1;
+    }
+
+    renderReportTimeline();
+    renderStepDetail();
+    renderReportProgress();
+  } catch(e) {
+    console.error('更新报告失败:', e);
+  }
+}
+
+function getExecutionStatus(exec) {
+  if(!exec || !exec.tasks || !exec.tasks.length) return 'pending';
+  const statuses = exec.tasks.map(t => t.status);
+  if(statuses.some(s => s === 'failed')) return 'failed';
+  if(statuses.some(s => s === 'running')) return 'running';
+  if(statuses.every(s => s === 'finished')) return 'finished';
+  return 'pending';
+}
+
+function getTaskTypeCategory(exec) {
+  const mainTask = exec.tasks && exec.tasks[0];
+  if(!mainTask) return 'other';
+  if(mainTask.type === 'Insight') return 'insight';
+  if(mainTask.type === 'Planning') return 'planning';
+  if(mainTask.type === 'Action Space') return 'action';
+  return 'other';
+}
+
+function getTaskTypeLabel(exec) {
+  const mainTask = exec.tasks && exec.tasks[0];
+  if(!mainTask) return '未知';
+  if(mainTask.subType) return mainTask.subType;
+  if(mainTask.type === 'Insight') return '洞察';
+  if(mainTask.type === 'Planning') return '规划';
+  if(mainTask.type === 'Action Space') return '操作';
+  return mainTask.type || '未知';
+}
+
+function formatDuration(ms) {
+  if(!ms) return '';
+  if(ms < 1000) return ms + 'ms';
+  if(ms < 60000) return (ms / 1000).toFixed(1) + 's';
+  return Math.floor(ms / 60000) + 'm' + Math.floor((ms % 60000) / 1000) + 's';
+}
+
+function formatTimestamp(ts) {
+  if(!ts) return '-';
+  const d = new Date(ts);
+  return d.toLocaleString('zh-CN', { hour12: false, month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function renderReportProgress() {
+  const el = document.getElementById('report-progress');
+  const executions = debugState.executions || [];
+  if(!executions.length) { el.innerHTML = ''; return; }
+  const finished = executions.filter(e => getExecutionStatus(e) === 'finished').length;
+  const total = executions.length;
+  const pct = Math.round((finished / total) * 100);
+  el.innerHTML = '<div class="rrd-progress-bar"><div class="rrd-progress-fill" style="width:' + pct + '%"></div></div><span>' + finished + '/' + total + '</span>';
+}
+
+function renderReportTimeline() {
+  const container = document.getElementById('report-timeline');
+  const executions = debugState.executions || [];
+  if(!executions.length) {
+    container.innerHTML = '<div class="rrd-empty">等待执行步骤...</div>';
+    return;
+  }
+  container.innerHTML = executions.map((exec, i) => {
+    const status = getExecutionStatus(exec);
+    const typeCat = getTaskTypeCategory(exec);
+    const typeLabel = getTaskTypeLabel(exec);
+    const isActive = i === debugState.activeStepIndex;
+    const totalCost = (exec.tasks || []).reduce((s, t) => s + (t.timing && t.timing.cost || 0), 0);
+    const dotIcon = status === 'finished' ? '&#10003;' : status === 'running' ? '&#9679;' : status === 'failed' ? '&#10007;' : '&#9679;';
+    return '<div class="rtl-step' + (isActive ? ' active' : '') + '" onclick="selectReportStep(' + i + ')">' +
+      '<div class="rtl-step-dot status-' + status + '">' + dotIcon + '</div>' +
+      '<div class="rtl-step-info">' +
+        '<div class="rtl-step-name" title="' + escHtml(exec.name || '步骤 ' + (i+1)) + '">' + escHtml(exec.name || '步骤 ' + (i+1)) + '</div>' +
+        '<div class="rtl-step-meta">' +
+          '<span class="rtl-step-type type-' + typeCat + '">' + typeLabel + '</span>' +
+          (totalCost > 0 ? '<span>' + formatDuration(totalCost) + '</span>' : '') +
+          (exec.tasks && exec.tasks.length > 1 ? '<span>' + exec.tasks.length + '子任务</span>' : '') +
+        '</div>' +
+      '</div>' +
+    '</div>';
+  }).join('');
+
+  // 自动滚动到底部
+  container.scrollTop = container.scrollHeight;
+}
+
+function selectReportStep(index) {
+  debugState.activeStepIndex = index;
+  renderReportTimeline();
+  renderStepDetail();
+}
+
+function renderStepDetail() {
+  const container = document.getElementById('report-detail');
+  const index = debugState.activeStepIndex;
+  const executions = debugState.executions || [];
+  if(index < 0 || index >= executions.length) {
+    container.innerHTML = '<div class="rrd-empty">请选择一个步骤查看详情</div>';
+    return;
+  }
+  const exec = executions[index];
+  const firstTask = exec.tasks && exec.tasks[0];
+  const lastTask = exec.tasks && exec.tasks[exec.tasks.length - 1];
+  const totalCost = (exec.tasks || []).reduce((s, t) => s + (t.timing && t.timing.cost || 0), 0);
+  const startTime = firstTask && firstTask.timing && firstTask.timing.start;
+  const endTime = lastTask && lastTask.timing && lastTask.timing.end;
+  const mainType = firstTask && firstTask.type;
+  const mainSubType = firstTask && firstTask.subType;
+
+  // 提取AI思考内容
+  let thoughtContent = '';
+  for(const task of exec.tasks || []) {
+    if(task.thought) { thoughtContent = task.thought; break; }
+    if(task.log && task.log.data && task.log.data.formatResponse) {
+      try {
+        const parsed = JSON.parse(task.log.data.formatResponse);
+        if(parsed.thought) { thoughtContent = parsed.thought; break; }
+      } catch(e) {}
+    }
+  }
+
+  let html = '<div class="rrd-header"><div class="rrd-index">' + (index + 1) + '</div><div class="rrd-name">' + escHtml(exec.name || '步骤 ' + (index+1)) + '</div></div>';
+
+  // 基本信息
+  html += '<div class="rrd-section"><div class="rrd-section-title">基本信息</div><div class="rrd-info-grid">' +
+    '<div class="rrd-info-item"><div class="rrd-info-label">类型</div><div class="rrd-info-value">' + escHtml(mainType || '-') + (mainSubType ? ' / ' + escHtml(mainSubType) : '') + '</div></div>' +
+    '<div class="rrd-info-item"><div class="rrd-info-label">子任务数</div><div class="rrd-info-value">' + (exec.tasks ? exec.tasks.length : 0) + '</div></div>' +
+    '<div class="rrd-info-item"><div class="rrd-info-label">总耗时</div><div class="rrd-info-value">' + formatDuration(totalCost) + '</div></div>' +
+    (startTime ? '<div class="rrd-info-item"><div class="rrd-info-label">开始</div><div class="rrd-info-value">' + formatTimestamp(startTime) + '</div></div>' : '') +
+    (endTime ? '<div class="rrd-info-item"><div class="rrd-info-label">结束</div><div class="rrd-info-value">' + formatTimestamp(endTime) + '</div></div>' : '') +
+    '</div></div>';
+
+  // AI思考
+  if(thoughtContent) {
+    html += '<div class="rrd-section"><div class="rrd-section-title">AI 思考过程</div><div class="rrd-thought">' + escHtml(thoughtContent) + '</div></div>';
+  }
+
+  // 任务列表
+  html += '<div class="rrd-section"><div class="rrd-section-title">任务详情</div>';
+  for(const task of exec.tasks || []) {
+    const statusInfo = { finished: { cls: 'status-finished', text: '已完成' }, running: { cls: 'status-running', text: '执行中' }, failed: { cls: 'status-failed', text: '失败' }, pending: { cls: 'status-pending', text: '等待中' } };
+    const si = statusInfo[task.status] || statusInfo.pending;
+    html += '<div class="rrd-task"><div class="rrd-task-header"><span class="rrd-task-type">' + escHtml(task.type || '') + (task.subType ? ' / ' + escHtml(task.subType) : '') + '</span><span class="rrd-task-status ' + si.cls + '">' + si.text + '</span></div>';
+    html += '<div class="rrd-task-body">';
+    if(task.timing && task.timing.cost) html += '<div>耗时: ' + formatDuration(task.timing.cost) + '</div>';
+    if(task.param) {
+      html += '<div class="rrd-task-param">';
+      if(task.param.dataDemand) html += '需求: ' + escHtml(task.param.dataDemand) + '\\n';
+      if(task.param.locator) html += '定位: ' + escHtml(task.param.locator) + '\\n';
+      if(task.param.command) html += '命令: ' + escHtml(task.param.command) + '\\n';
+      html += '</div>';
+    }
+    if(task.output && typeof task.output === 'object') {
+      html += '<div class="rrd-task-output">' + escHtml(JSON.stringify(task.output, null, 2)) + '</div>';
+    }
+    if(task.log && task.log.data && task.log.data.data) {
+      html += '<div class="rrd-task-output">断言结果:\\n' + escHtml(JSON.stringify(task.log.data.data, null, 2)) + '</div>';
+    }
+    if(task.errorMessage) {
+      html += '<div class="rrd-task-error">' + escHtml(task.errorMessage) + '</div>';
+    }
+    if(task.usage) {
+      html += '<div style="margin-top:4px;font-size:10px;color:#64748b">模型: ' + escHtml(task.usage.model_name || task.usage.model_description || '-') + ' | Token: ' + (task.usage.prompt_tokens || 0) + '+' + (task.usage.completion_tokens || 0) + '=' + (task.usage.total_tokens || 0) + '</div>';
+    }
+    // 截图展示 - 图片可点击在新窗口打开
+    if(task.uiContext && task.uiContext.screenshot) {
+      const ss = task.uiContext.screenshot;
+      if(ss.base64) {
+        const sizeLabel = ss.width ? ss.width + "x" + (ss.height || "") : "";
+        html += '<div class="rrd-screenshot"><img src="' + escHtml(ss.base64) + '" title="点击查看大图" /><div class="rrd-screenshot-label">UI截图 ' + sizeLabel + '</div></div>';
+      } else if(ss.url) {
+        html += '<div class="rrd-screenshot"><img src="' + escHtml(ss.url) + '" title="点击查看大图" /><div class="rrd-screenshot-label">UI截图</div></div>';
+      }
+    }
+    html += '</div></div>';
+  }
+  html += '</div>';
+
+  container.innerHTML = html;
+}
+
+function openReport() {
+  if(debugState.reportPath) {
+    window.open('file://' + debugState.reportPath, '_blank');
+  }
+}
+
+// ===== 历史记录 =====
+function saveToHistory(status) {
+  const item = {
+    id: Date.now().toString(),
+    timestamp: Date.now(),
+    runMode: document.getElementById('debug-runMode').value,
+    platform: document.getElementById('debug-platform').value,
+    url: document.getElementById('debug-url').value,
+    script: document.getElementById('debug-script').value,
+    deviceId: document.getElementById('debug-device').value,
+    status: status,
+  };
+  debugState.history.unshift(item);
+  if(debugState.history.length > 50) debugState.history = debugState.history.slice(0, 50);
+  localStorage.setItem('debug_history', JSON.stringify(debugState.history));
+  renderHistory();
+}
+
+function renderHistory() {
+  const list = document.getElementById('history-list');
+  if(debugState.history.length === 0) {
+    list.innerHTML = '<div style="text-align:center;color:#64748b;padding:40px 20px">暂无历史记录</div>';
+    return;
+  }
+  list.innerHTML = debugState.history.map(item => {
+    const statusClass = item.status === 'success' ? 'success' : 'failed';
+    const statusText = item.status === 'success' ? '成功' : '失败';
+    const modeText = item.runMode === 'device' ? '真机' + (item.platform ? ' • ' + item.platform : '') : '浏览器';
+    return '<div class="history-item" onclick="restoreFromHistory(&apos;' + item.id + '&apos;)">' +
+      '<div class="meta"><span class="status ' + statusClass + '">' + statusText + '</span><span class="time">' + new Date(item.timestamp).toLocaleTimeString() + '</span></div>' +
+      '<div class="url">' + escHtml(item.url || '-') + '</div>' +
+      '<div class="detail">' + modeText + '</div></div>';
+  }).join('');
+}
+
+function restoreFromHistory(id) {
+  const item = debugState.history.find(h => h.id === id);
+  if(!item) return;
+  document.getElementById('debug-runMode').value = item.runMode || 'device';
+  onRunModeChange();
+  document.getElementById('debug-platform').value = item.platform || 'android';
+  document.getElementById('debug-url').value = item.url || '';
+  document.getElementById('debug-script').value = item.script || '';
+  if(item.deviceId) {
+    document.getElementById('debug-device').value = item.deviceId;
+  }
+  toggleHistoryDrawer();
+  addDebugLog('已恢复历史配置', 'success');
+}
+
+function toggleHistoryDrawer() {
+  document.getElementById('history-drawer').classList.toggle('open');
+  renderHistory();
+}
+
+// ===== 用例选择 =====
+let caseSelectorState = {
+  folders: [],
+  testCases: [],
+  selectedFolderId: null,
+  selectedCase: null,
+};
+
+async function openCaseSelector() {
+  document.getElementById('case-selector-modal').style.display = '';
+  caseSelectorState.selectedCase = null;
+  await loadFolderTree();
+}
+
+function closeCaseSelector() {
+  document.getElementById('case-selector-modal').style.display = 'none';
+}
+
+function closeCaseSelectorOnOverlay(e) {
+  if(e.target === e.currentTarget) closeCaseSelector();
+}
+
+async function loadFolderTree() {
+  try {
+    const res = await (await fetch('/api/testcases/folder-tree')).json();
+    if(res.success && res.data) {
+      let treeData;
+      if(Array.isArray(res.data)) treeData = res.data;
+      else if(res.data.data && Array.isArray(res.data.data)) treeData = res.data.data;
+      else treeData = [];
+      caseSelectorState.folders = treeData;
+      debugState.folderTree = treeData;
+      renderFolderTree();
+    } else {
+      caseSelectorState.folders = [];
+      renderFolderTree();
+    }
+  } catch(e) {
+    console.error('加载文件夹树失败:', e);
+    caseSelectorState.folders = [];
+    renderFolderTree();
+  }
+}
+
+function renderFolderTree() {
+  const list = document.getElementById('case-folder-list');
+  if(caseSelectorState.folders.length === 0) {
+    list.innerHTML = '<div style="text-align:center;color:#64748b;padding:20px">暂无文件夹</div>';
+    return;
+  }
+  list.innerHTML = '<div class="folder-item" onclick="loadAllCases()" style="color:#22c55e">&#128196; 全部用例</div>';
+  caseSelectorState.folders.forEach((folder, idx) => {
+    list.innerHTML += renderFolderNode(folder, 0, 'root-' + idx);
+  });
+}
+
+function renderFolderNode(node, level, key) {
+  const info = node.folder || {};
+  const folderId = info.folderId || info.id;
+  const name = (!info.folderName || info.folderName === '未命名文件夹') ? '未分类' : info.folderName;
+  const count = info.configCount || (node.configs ? node.configs.length : 0);
+  const hasChildren = node.children && node.children.length > 0;
+  const isActive = caseSelectorState.selectedFolderId === folderId;
+  const indent = level * 16 + 8;
+
+  let html = '<div class="folder-item' + (isActive ? ' active' : '') + '" style="padding-left:' + indent + 'px" onclick="selectFolder(&apos;' + folderId + '&apos;, this)">';
+  if(hasChildren) html += '<span class="arrow" onclick="event.stopPropagation();toggleFolder(this)">&#9654;</span>';
+  else html += '<span style="width:10px;display:inline-block"></span>';
+  html += '&#128193; ' + escHtml(name);
+  if(count > 0) html += ' <span style="color:#64748b;font-size:11px">(' + count + ')</span>';
+  html += '</div>';
+
+  if(hasChildren) {
+    html += '<div class="folder-children" style="display:none">';
+    node.children.forEach((child, idx) => {
+      html += renderFolderNode(child, level + 1, key + '-' + idx);
+    });
+    html += '</div>';
+  }
+  return html;
+}
+
+function toggleFolder(arrow) {
+  arrow.classList.toggle('expanded');
+  const children = arrow.closest('.folder-item').nextElementSibling;
+  if(children && children.classList.contains('folder-children')) {
+    children.style.display = children.style.display === 'none' ? '' : 'none';
+  }
+}
+
+async function selectFolder(folderId) {
+  caseSelectorState.selectedFolderId = folderId;
+  renderFolderTree();
+  document.getElementById('case-list-title').textContent = '加载中...';
+  document.getElementById('case-list').innerHTML = '<div style="text-align:center;color:#64748b;padding:20px">加载中...</div>';
+
+  try {
+    const res = await (await fetch('/api/testcases/folder/' + folderId)).json();
+    if(res.success && res.data) {
+      let cases;
+      // 后端返回 res.data = response.data，response.data 本身可能是 {data: {configs, folder}, success, message}
+      // 所以需要检查 res.data.data.configs 或 res.data.configs
+      const inner = res.data.data || res.data;
+      if(inner && inner.configs && Array.isArray(inner.configs)) cases = inner.configs;
+      else if(res.data.data && Array.isArray(res.data.data)) cases = res.data.data;
+      else if(Array.isArray(res.data)) cases = res.data;
+      else if(res.data.folder && res.data.folder.configs) cases = res.data.folder.configs;
+      else if(res.data.configs && Array.isArray(res.data.configs)) cases = res.data.configs;
+      else cases = [];
+      caseSelectorState.testCases = cases;
+    } else {
+      caseSelectorState.testCases = [];
+    }
+  } catch(e) {
+    console.error('加载用例列表失败:', e);
+    caseSelectorState.testCases = [];
+  }
+  renderCaseList();
+}
+
+async function loadAllCases() {
+  caseSelectorState.selectedFolderId = null;
+  renderFolderTree();
+  document.getElementById('case-list-title').textContent = '全部用例';
+  document.getElementById('case-list').innerHTML = '<div style="text-align:center;color:#64748b;padding:20px">加载中...</div>';
+
+  // 从所有文件夹收集用例
+  const allCases = [];
+  function collectFromTree(nodes) {
+    if(!nodes) return;
+    nodes.forEach(node => {
+      if(node.configs && Array.isArray(node.configs)) allCases.push(...node.configs);
+      if(node.children) collectFromTree(node.children);
+    });
+  }
+  collectFromTree(caseSelectorState.folders);
+  caseSelectorState.testCases = allCases;
+  renderCaseList();
+}
+
+async function searchCases() {
+  const keyword = document.getElementById('case-search-input').value.trim();
+  if(!keyword) return;
+  document.getElementById('case-list-title').textContent = '搜索: "' + keyword + '"';
+  document.getElementById('case-list').innerHTML = '<div style="text-align:center;color:#64748b;padding:20px">搜索中...</div>';
+
+  try {
+    const res = await (await fetch('/api/testcases/search?configName=' + encodeURIComponent(keyword))).json();
+    if(res.success && res.data) {
+      caseSelectorState.testCases = Array.isArray(res.data) ? res.data : [];
+    } else {
+      caseSelectorState.testCases = [];
+    }
+  } catch(e) {
+    caseSelectorState.testCases = [];
+  }
+  renderCaseList();
+}
+
+function renderCaseList() {
+  const list = document.getElementById('case-list');
+  const title = document.getElementById('case-list-title');
+  if(caseSelectorState.testCases.length === 0) {
+    title.textContent = '测试用例 (0)';
+    list.innerHTML = '<div style="text-align:center;color:#64748b;padding:20px">暂无测试用例</div>';
+    return;
+  }
+  title.textContent = '测试用例 (' + caseSelectorState.testCases.length + ')';
+  list.innerHTML = caseSelectorState.testCases.map(tc => {
+    const isSelected = caseSelectorState.selectedCase && String(caseSelectorState.selectedCase.id) === String(tc.id);
+    return '<div class="case-item' + (isSelected ? ' selected' : '') + '" onclick="selectTestCase(&apos;' + tc.id + '&apos;)">' +
+      '<div class="case-name">' + escHtml(tc.configName || '未命名') + '</div>' +
+      '<div class="case-desc">' + escHtml(tc.description || tc.testUrl || '无描述') + '</div></div>';
+  }).join('');
+}
+
+function selectTestCase(id) {
+  const strId = String(id);
+  caseSelectorState.selectedCase = caseSelectorState.testCases.find(tc => String(tc.id) === strId) || null;
+  renderCaseList();
+}
+
+function confirmCaseSelection() {
+  if(!caseSelectorState.selectedCase) {
+    alert('请选择一个用例');
+    return;
+  }
+  const tc = caseSelectorState.selectedCase;
+  debugState.currentTestCase = tc;
+
+  // 恢复用例配置
+  const runMode = tc.runMode || (tc.isRealDevice === false ? 'browser' : 'device');
+  document.getElementById('debug-runMode').value = runMode;
+  onRunModeChange();
+  if(tc.platform) document.getElementById('debug-platform').value = tc.platform;
+  if(tc.testUrl) document.getElementById('debug-url').value = tc.testUrl;
+  if(tc.packageName) {
+    const presetSel = document.getElementById('debug-package-preset');
+    const found = Array.from(presetSel.options).find(o => o.value === tc.packageName);
+    if(found) { presetSel.value = tc.packageName; }
+    else { presetSel.value = 'custom'; document.getElementById('debug-package-custom').style.display = ''; document.getElementById('debug-package-custom').value = tc.packageName; }
+  }
+  if(tc.mobileMode !== undefined) document.getElementById('debug-mobileMode').checked = tc.mobileMode;
+  if(tc.naturalLanguage) {
+    document.getElementById('debug-script').value = tc.naturalLanguage;
+  }
+  if(tc.loginUsername) document.getElementById('debug-loginUser').value = tc.loginUsername;
+  if(tc.loginPassword) document.getElementById('debug-loginPass').value = tc.loginPassword;
+
+  closeCaseSelector();
+  addDebugLog('已加载用例: ' + tc.configName, 'success');
+}
+
+// ===== 保存用例 =====
+function openSaveCaseDialog() {
+  if(debugState.currentTestCase) {
+    document.getElementById('save-case-title').textContent = '修改测试用例';
+    document.getElementById('save-case-name').value = debugState.currentTestCase.configName || '';
+  } else {
+    document.getElementById('save-case-title').textContent = '保存测试用例';
+    document.getElementById('save-case-name').value = '';
+  }
+  document.getElementById('save-case-modal').style.display = '';
+  loadSaveFolderOptions();
+}
+
+function closeSaveCaseDialog() {
+  document.getElementById('save-case-modal').style.display = 'none';
+}
+
+function closeSaveCaseOnOverlay(e) {
+  if(e.target === e.currentTarget) closeSaveCaseDialog();
+}
+
+function loadSaveFolderOptions() {
+  const sel = document.getElementById('save-case-folder');
+  sel.innerHTML = '<option value="">请选择文件夹</option>';
+  function addFolders(nodes, prefix) {
+    if(!nodes) return;
+    nodes.forEach(node => {
+      const info = node.folder || {};
+      const fid = info.folderId || info.id;
+      const name = info.folderName || '未分类';
+      if(fid) {
+        const opt = document.createElement('option');
+        opt.value = fid;
+        opt.textContent = prefix + name;
+        sel.appendChild(opt);
+      }
+      if(node.children) addFolders(node.children, prefix + '  ');
+    });
+  }
+  addFolders(debugState.folderTree, '');
+}
+
+async function handleSaveCase() {
+  const name = document.getElementById('save-case-name').value.trim();
+  const folderId = parseInt(document.getElementById('save-case-folder').value);
+
+  if(!name) { alert('请输入用例名称'); return; }
+  if(!folderId) { alert('请选择文件夹'); return; }
+
+  const runMode = document.getElementById('debug-runMode').value;
+  const testCaseData = {
+    id: debugState.currentTestCase?.id || undefined,
+    configName: name,
+    folderId: folderId,
+    testUrl: document.getElementById('debug-url').value || '',
+    naturalLanguage: document.getElementById('debug-script').value || '',
+    description: document.getElementById('debug-script').value.substring(0, 200),
+    runMode: runMode,
+    platform: runMode === 'device' ? document.getElementById('debug-platform').value : undefined,
+    packageName: runMode === 'device' ? getPackageName() : undefined,
+    mobileMode: document.getElementById('debug-mobileMode')?.checked || false,
+    isRnUrl: false,
+    loginUsername: document.getElementById('debug-loginUser').value || undefined,
+    loginPassword: document.getElementById('debug-loginPass').value || undefined,
+    loginUrl: '',
+    // 后端必需字段
+    status: 1,
+    windowWidth: 1920,
+    windowHeight: 1080,
+    rollingDistance: 300,
+    waitTime: 5000,
+    implicitlyWait: 10000,
+    isRealDevice: runMode === 'device',
+    headlessMode: false,
+    cdpPort: 9222,
+    configType: 'SIMPLE',
+    expectedDuration: 30000,
+    scriptType: 'SELENIUM',
+    extensionFields: '{}',
+    deepId: '',
+    deepMap: '',
+  };
+
+  try {
+    let res;
+    if(testCaseData.id) {
+      res = await (await fetch('/api/testcases/' + testCaseData.id, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(testCaseData),
+      })).json();
+    } else {
+      res = await (await fetch('/api/testcases', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(testCaseData),
+      })).json();
+    }
+
+    if(res.success) {
+      addDebugLog('用例' + (testCaseData.id ? '修改' : '保存') + '成功: ' + name, 'success');
+    } else {
+      addDebugLog('用例保存失败: ' + (res.message || '未知错误'), 'error');
+    }
+  } catch(e) {
+    addDebugLog('用例保存失败: ' + e.message, 'error');
+  }
+
+  closeSaveCaseDialog();
+}
+
+// ===== 生成脚本 =====
+function handleGenerateScript() {
+  const script = document.getElementById('debug-script').value.trim();
+  if(!script) {
+    alert('请先输入自然语言描述');
+    return;
+  }
+  // 提示用户：脚本生成功能需要配置AI服务
+  addDebugLog('脚本生成功能：请确保已配置AI模型，当前脚本将作为自然语言输入生成自动化脚本', 'info');
+
+  // 将当前脚本内容包装为标准的midscene脚本
+  const generatedScript = generateScriptFromNaturalLanguage(script);
+  document.getElementById('debug-script').value = generatedScript;
+  addDebugLog('脚本已生成', 'success');
+}
+
+function generateScriptFromNaturalLanguage(naturalLanguage) {
+  var runMode = document.getElementById('debug-runMode').value;
+  var platform = document.getElementById('debug-platform').value;
+  var url = document.getElementById('debug-url').value;
+  var deviceId = document.getElementById('debug-device').value;
+  var packageName = getPackageName();
+
+  if(runMode === 'browser') {
+    var lines = [];
+    lines.push('// 自动生成的浏览器测试脚本');
+    lines.push("const { PlaywrightAiFixture } = require('@midscene/web/playwright');");
+    lines.push("const { test, expect } = require('@playwright/test');");
+    lines.push('');
+    lines.push("test('AI自动化测试', async ({ page }) => {");
+    lines.push('  const ai = new PlaywrightAiFixture(page);');
+    if(url) lines.push("  await page.goto('" + url + "');");
+    lines.push('  // 自然语言指令:');
+    lines.push('  // ' + naturalLanguage);
+    lines.push("  await ai.aiAction('" + naturalLanguage.replace(/'/g, "\\'") + "');");
+    lines.push('});');
+    return lines.join('\\n');
+  } else {
+    var lines = [];
+    lines.push('// 自动生成的' + (platform === 'ios' ? 'iOS' : 'Android') + '测试脚本');
+    lines.push("const { AndroidAgent } = require('@aiscene/android');");
+    lines.push("// const { IOSAgent } = require('@midscene/ios');");
+    lines.push('');
+    lines.push('async function main() {');
+    lines.push('  const agent = new AndroidAgent();');
+    if(deviceId) lines.push('  // 设备: ' + deviceId);
+    if(packageName) lines.push('  // 包名: ' + packageName);
+    if(url) lines.push('  // URL: ' + url);
+    lines.push('  // 自然语言指令:');
+    lines.push('  // ' + naturalLanguage);
+    lines.push("  await agent.aiAction('" + naturalLanguage.replace(/'/g, "\\'") + "');");
+    lines.push('}');
+    lines.push('');
+    lines.push('main().catch(console.error);');
+    return lines.join('\\n');
+  }
+}
+
+// ===== 清空编辑器 =====
+function handleClearEditor() {
+  document.getElementById('debug-script').value = '';
+  debugState.currentTestCase = null;
+  addDebugLog('编辑器已清空', 'info');
+}
+
+// ===== 工具函数 =====
+function escHtml(s) {
+  return String(s || '').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
+}
+
+// 初始化
+refreshDevices();
+</script>
+`;
+}
+//# sourceMappingURL=debug-page.js.map